ChartJs Doughnut parsing datasets

Question

I‘m trying to create a doughnut chart with custom objects as data. I don’t know if it is a bug or am I stupid. 😩 If the type of the chart is „bar“ everything is working as expected but if I change it to doughnut the chart area is empty.

Here is the code for the bar chart:

var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        datasets: [{
            label: '# of Votes',
            data: [{vX:12, n:'vx'}, {vX:13, n:'vx2'}],
            parsing:{
                yAxisKey:'vX',
              xAxisKey: 'n'
            },
            borderWidth: 1
        }]
    },
    options: {
        
    }
});

and that‘s my doughnut:

var myChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
        datasets: [{
            label: '# of Votes',
            data: [{vX:12, n:'vx'}, {vX:13, n:'vx2'}],
            parsing:{
                yAxisKey:'vX',
              
            },
            borderWidth: 1
        }]
    },
    options: {
        
    }
});

Is parsing not supported for doughnut charts? I can‘t find information about this in the docs.

thanks, Christian

Answer 1

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>

Answer 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