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

Have a look at this https://www.chartjs.org/docs/latest/samples/tooltip/content.html. You need to write a custom function that will render the data as you want. — Prerak Sola, Feb 15 '23 at 08:27

score 2 · Accepted Answer · answered Feb 15 '23 at 08:52

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} />;
}

Fcmam5 · Answer 2 · 2023-02-15T09:17:58.383

That one is called tooltip, to customize it please refer to:

You can do something like:

export function App() {
  return (
    <Doughnut
      data={data}
      options={{
        plugins: {
          tooltip: {
            callbacks: {
              title: (tooltipItems) => {
                return tooltipItems.map(
                  (item) => `${item.label} (${item.formattedValue})`
                );
              }
            }
          }
        }
      }}
    />
  );
}

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

export function App() {
  return (
    <Doughnut
      data={data}
      options={{
        plugins: {
          tooltip: {
            callbacks: {
              title: (tooltipItems) => {
                return tooltipItems.map(
                  (item) => `${item.label} (${item.formattedValue})`
                );
              }
            }
          },
          datalabels: {
            labels: {
              title: {
                font: {
                  weight: "bold"
                },
                formatter: function (value, context) {
                  console.log(value);
                  console.log(context);
                  console.log("-");

                  return `${
                    context.chart.data.labels[context.dataIndex]
                  } (${value})`;
                }
              },
              value: null
            }
          }
        }
      }}
    />
  );
}

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)

How to add data with the label?

2 Answers2