Charts.js display two combined line charts for last 7 days

by

👍:0

You have to place the labels for datapoints.

let start = new Date(),
  end = new Date();
start.setDate(start.getDate() - 7); // set to 'now' minus 7 days.
start.setHours(0, 0, 0, 0); // set to midnight.

let chart = new Chart(document.getElementById("lastSevenDaysOverview"), {
  type: "line",
  data: {
    labels: [],
    datasets: [{
        label: 'Dataset 1',
        data: [1, 4, 66, 7, 12, 3, 8],
        borderColor: '#ff3366',
        backgroundColor: '#ff3366',

      },
      {
        label: 'Dataset 2',
        data: [31, 14, 6, 71, 1, 35, 9],
        borderColor: '#880000',
        backgroundColor: '#880000',
      }
    ]
  },
  options: {
    interaction: {
      mode: 'index',
      intersect: true,
    },
    stacked: false,
    responsive: true,

    scales: {
      y: {
        type: 'linear',
        display: true,
        position: 'left',
      },
      xAxes: [{
        type: "time",
         // this is not doing much 
         // time: {
          // min: start,
          // max: end,
          // unit: "day"
        //}
      }]
    }
  }
});

chart.render();

for (let i = 0; i < 7; i++) {
  var labelDate = start;
  labelDate.setDate(start.getDate() + 1);
  chart.data.labels.push(labelDate.toLocaleString())
}

chart.update();
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<canvas id="lastSevenDaysOverview"></canvas>

👍:0

2 things, for a time axis in chart.js you need according to the documentation a time adapter. Also you defined you x axis scales as a array which is incorrect. You need to define all scales as an object where the key of the object is the scale ID, you can read more about it in the migration guide

For points to be mapped in the chart you also need to provide a x place which in this case needs to be the date for which the datapoint is valid.

To just show a single axis with the highest values you can let both datasets be mapped to the same y axis:

let start = new Date(),
  end = new Date();
start.setDate(start.getDate() - 7); // set to 'now' minus 7 days.
start.setHours(0, 0, 0, 0); // set to midnight.

new Chart(document.getElementById("lastSevenDaysOverview"), {
  type: "line",
  data: {
    datasets: [{
        label: 'Dataset 1',
        data: [{
          x: new Date('10-16-2021'),
          y: 1
        }, {
          x: new Date('10-18-2021'),
          y: 4
        }, {
          x: new Date('10-19-2021'),
          y: 66
        }],
        borderColor: '#ff3366',
        backgroundColor: '#ff3366',
      },
      {
        label: 'Dataset 2',
        data: [{
          x: new Date('10-14-2021'),
          y: 31
        }, {
          x: new Date('10-18-2021'),
          y: 14
        }, {
          x: new Date('10-19-2021'),
          y: 6
        }],
        borderColor: '#880000',
        backgroundColor: '#880000'
      }
    ]
  },
  options: {
    interaction: {
      mode: 'index',
      intersect: true,
    },
    responsive: true,
    scales: {
      y: {
        type: 'linear',
        display: true,
        position: 'left',
      },
      x: {
        type: "time",
        min: start,
        max: end,
        time: {
          unit: "day"
        }
      }
    },
  }
});
<canvas id="lastSevenDaysOverview"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>

Leave a comment