Chartjs-Chart JS parsing data with xAxisKey

by

1👍

✅

It’s a feature of Chart.js V3 and onwards so you need to update the Charts.js library to a newer version.

And that should be yAxisKey: 'value' instead of yAxis: 'value'

var xyValues = [{
    date_time: '2022-11-13 23:00:00',
    value: 2.3
  },
  {
    date_time: '2022-11-14 00:00:00',
    value: 3.1
  },
  {
    date_time: '2022-11-14 01:00:00',
    value: 4.5
  },
  {
    date_time: '2022-11-14 02:00:00',
    value: 5.1
  },
  {
    date_time: '2022-11-14 09:00:00',
    value: 5.5
  }
]

new Chart('myChart', {
  type: 'line',
  data: {
    datasets: [{
      data: xyValues
    }]
  },
  options: {
    parsing: {
      xAxisKey: 'date_time',
      yAxisKey: 'value'
    }
  }
});
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<canvas id="myChart"></canvas>

1👍

This is because you are using V2 of the lib while this feature got added in v3, so you either need to update your chartjs version or map your array to an object with an x and y key

Leave a comment