How to add data with the label?

Question

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

Answer 1

create custom labels using separate variable for label and data,

import React from 'react';
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js';
import { Doughnut } from 'react-chartjs-2';

ChartJS.register(ArcElement, Tooltip, Legend);


var doughnutData = [12, 19, 3, 5, 2, 3]; //this
var doughnutlabel = ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'] //and this
doughnutlabel = doughnutlabel.map((i, index) => i + ` (${doughnutData[index]})`);  //create custom labels

export const data = {
  labels: doughnutlabel,  //use here
  datasets: [
    {
      label: '# of Votes',
      data: doughnutData,  //and here
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)',
      ],
      borderColor: [
        'rgba(255, 99, 132, 1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)',
      ],
      borderWidth: 1,
    },
  ],
};

export function App() {
  return <Doughnut data={data} />;
}