CODEWITHSUNDEEP
javascripthtmlchart.jschart.js3
MSchmidt
MSchmidt

Reputation: 35

chart.js 3 and time axis displays wrong date data

I have a very hard time to get chart.js running with time axis.

I have following simplified code:

<html>
<head>


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

        <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: {
                                        xAxes: [ { type: 'time', } ] 
                                }
                        }
                });

        };

</script>

</body>
</html>

When including the latest 3.4.0 chart.js the time axis is not correctly formatted (the datapoints are evenly distributed on the x-axis). However when using the 2.9.3 version, it is displayed correctly (datapoints are not evenly distributed).

Fiddle not working (using 3.4.0): https://jsfiddle.net/ungoq8j6/1/
Fiddle working (using 2.9.3): https://jsfiddle.net/ungoq8j6/2/

According to the docs (which are completly vague about that topic) you have to include a date library and an adapter (here moment.js + chartjs-adapter-moment).

The script is used only on the client side, so no node.js/npm is available.

Upvotes: 1

Views: 1753

Answers (1)

LeeLenalee
LeeLenalee

Reputation: 31371

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>

Upvotes: 1

Related Questions