[Chartjs]-Chart.js 3 and time axis displays wrong date data

by

1👍

✅

Your config is wrong, in v3 the way you have to define scales have changed, please read the migration guide: https://www.chartjs.org/docs/master/getting-started/v3-migration.html#scales

Working example:

<html>

<head>
  <script src="https://cdn.jsdelivr.net/npm/moment"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.0/chart.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment"></script>
</head>

<body>
  <canvas id="chart" width="800" height="400"></canvas>
  
  <script type="text/javascript">
    window.onload = function() {

      var ctx = document.getElementById('chart').getContext('2d');
      var myChart = new Chart(ctx, {

        type: 'line',
        data: {
          datasets: [{
            data: [{
                x: '2017-01-06',
                y: 50
              },
              {
                x: '2017-01-15',
                y: 45
              },
              {
                x: '2017-03-07',
                y: 35
              },
            ]
          }]
        },
        options: {
          scales: {
            x: {
              type: 'time',
            }
          }
        }
      });

    };
  </script>
</body>
</html>

Leave a comment