javascript - React + Chart.js 2.0: How to put a label inside of a doughnut chart? - Stack Overflow

admin管理员组

文章数量:1390685

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

Share Improve this question Follow edited May 23, 2017 at 12:02 CommunityBot 111 silver badge asked Aug 26, 2016 at 18:35 KwhitejrKwhitejr 2,30666 gold badges3333 silver badges5151 bronze badges 3

• 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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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

本文标签： javascriptReactChartjs 20 How to put a label inside of a doughnut chartStack Overflow