skip to Main Content

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

enter image description here

2

Answers


  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} />;
    }
    
    Login or Signup to reply.
  2. 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:

    doghnut chart


    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:

    chart with labels

    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)

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search