score:0

Accepted answer

Reason your time axis is not working is because since chart.js V3 you will need to include your own date adapter, chart.js does not ship with a default date adapter anymore. For more information see the documentation

const data = {
  datasets: [{
      label: 'my first dataset',
      borderColor: 'rgb(255, 99, 132)',

      data: [{
        x: "2016-12-25",
        y: 3
      }, {
        x: "2016-12-28",
        y: 10
      }, {
        x: "2016-12-29",
        y: 5
      }, {
        x: "2016-12-30",
        y: 2
      }, {
        x: "2017-01-03",
        y: 20
      }, {
        x: "2017-01-05",
        y: 30
      }, {
        x: "2017-01-08",
        y: 45
      }],
    },
    {
      label: 'My Second dataset',
      borderColor: 'rgb(99, 255, 132)',

      data: [{
        x: "2016-12-25",
        y: 20
      }, {
        x: "2016-12-27",
        y: 62
      }, {
        x: "2016-12-26",
        y: 15
      }, {
        x: "2016-12-31",
        y: 172
      }, {
        x: "2017-01-01",
        y: 30
      }, {
        x: "2017-01-05",
        y: 50
      }, {
        x: "2017-01-06",
        y: 25
      }],
    }
  ]
};

const config = {
  type: 'line',
  data: data,
  options: {
    responsive: true,
    scales: {
      x: {
        type: 'time',
      }
    }
  },
};

const myChart = new Chart(
  document.getElementById('line-chart'),
  config
);
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Chart.js Integration</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

  <!--Line below added, added date adapter for time scale -->
  <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
</head>

<body>
  <canvas id="line-chart" width="800" height="450"></canvas>
</body>

</html>


Related Query

More Query from same tag