[Chartjs]-ChartJs Doughnut parsing datasets

by

2👍

✅

At the moment chart.js does not support object notation with parsing for pie/doughnut charts.

There has been a pr for this a few days ago which is merged into the master so as soon as a new version of chart.js releases, anything beyond version 3.5.1 will have this change in it and then you can use your object.

Otherwise you can take the route @uminder suggested and map the data yourself

3👍

Regarding data structures, the Chart.js documentation says:

For a pie (and doughnut) chart, datasets need to contain an array of data points. The data points should be a number (…)

Therefore, parsing doesn’t make sense and is probably not supported. The problem can be solved by mapping your data to labels and data as follows.

var data = [{vX:12, n:'vx'}, {vX:13, n:'vx2'}];

new Chart('myChart', {
  type: 'doughnut',
  data: {
    labels: data.map(v => v.n),
    datasets: [{
      label: '# of Votes',
      data: data.map(v => v.vX),     
      borderWidth: 1
    }]
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<canvas id="myChart"></canvas>

0👍

As mentioned by Christian, It’s available since 3.6.0 (2021-10-24, see https://github.com/chartjs/Chart.js/issues/9440) with sth. like this:

    options: {
      parsing: {
        key: "the-label-key',
      }
    }

ref official doc: https://www.chartjs.org/docs/latest/general/data-structures.html

Leave a comment