Chartjs-Chart.js plotting timeseries

by

1👍

✅

Chart.js internally uses Moment.js for the functionality of the time axis. Therefore you should use the bundled version of Chart.js that includes Moment.js in a single file.

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>

This will solve your problem as the following amended code snippet illustrates.

var ctx = document.getElementById("myLineChart").getContext('2d');
var dat_1 = {
  label: 'things',
  borderColor: 'blue',
  data: [
    { t: new Date("04/01/2020"), y: 310 },
    { t: new Date("04/02/2020"), y: 315 },
    { t: new Date("04/03/2020"), y: 320 },
  ]
};
var myLineChart = new Chart(ctx, {
  type: 'line',
  data: {
    datasets: [dat_1]
  },
  options: {
    scales: {
      xAxes: [{
        type: 'time',
        time: {
          unit: 'day'
        },
      }],
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="myLineChart" height="90"></canvas>

Leave a comment