I am doing data visualizations with react, react-chartjs-2, and chart.js version 2.2.1. There is a possibly related answer to this question here (look for 17.06.16 update), but I'm not sure what Chart.pluginService.register is or whether it is patible with React. So far it hasn't worked for me.

I am simply looking to place a label inside the doughnut that is the sum of all data subsets. I assume this is nested somewhere in the doughnut chart's options, but I haven't found it yet.

I am doing data visualizations with react, react-chartjs-2, and chart.js version 2.2.1. There is a possibly related answer to this question here (look for 17.06.16 update), but I'm not sure what Chart.pluginService.register is or whether it is patible with React. So far it hasn't worked for me.

I am simply looking to place a label inside the doughnut that is the sum of all data subsets. I assume this is nested somewhere in the doughnut chart's options, but I haven't found it yet.

• javascript
• reactjs
• chart.js
• react-chartjs

• Did you find a solution to this? – LucaSpeedStack Commented Mar 31, 2017 at 5:32
• Negative. I had to make a separate value using the same data on my ponent – Kwhitejr Commented Mar 31, 2017 at 19:37
• Please refer below code. This is perfectly work. https://stackoverflow./questions/54040320/pass-context-to-options-on-react-chartjs-2 – donkey Commented Mar 15, 2023 at 8:23

1 Answer 1

In react-chartjs-2 you can access the datasets through chart.config.data.datasets.

So for:

data = {
    labels: [
        'Red',
        'Green',
        'Yellow'
    ],
    datasets: [{
        data: [300, 50, 100],
    ...

Inside the draw callback in Chart.helpers.extend you can use:

var sum = 0;
for (var i = 0; i < this.chart.config.data.datasets[0].data.length; i++) {
   sum += this.chart.config.data.datasets[0].data[i];
}

Here's an example Codepen: http://codepen.io/anon/pen/xqMQQB?editors=1010