I am trying to add data to the Label. Currently, it’s showing only the Label, How can I add data to the Label, for example, Red(12)? If I hover over the chart, it shows the number, Red # of votes: 12,
Now in the Header, it’s showing Red, I want to show Red(12) => Label with data and the rest of the Label with Data.
Here is the link to the example:https://codesandbox.io/s/github/reactchartjs/react-chartjs-2/tree/master/sandboxes/doughnut/default?from-embed=&file=/App.tsx:127-142
2
Answers
create custom labels using separate variable for label and data,
That one is called
tooltip
, to customize it please refer to:You can do something like:
Result:
And if you want to customize the labels on your chart, you can have aa look at
chartjs-plugin-datalabel
And then have something like
Result:
A working example: https://codesandbox.io/s/dreamy-raman-1wrrgc
Edit:
For performance reasons, you may want to consider Shaikh’s solution, I think it would be better to prepare your labels before you render the chart instead of calling chart.js’s callback for each element.
(Of course, you may have a different use case, or you don’t feel the impact of any of these approaches)