Hi I need to get text in center of dough nut like the image

Question

I need to get the label in the center of the doughnut as shown in second image. I tried some methods but it doesn't seem to work. I have also attached my current code. Thanks you for helping me.

export class DoughnutChartDemo extends Component {

    constructor(props) {
        super(props);

        this.chartData = {
            labels: ['A', 'B', 'C'],
            datasets: [
                {
                    data: [300, 50, 100],
                    backgroundColor: [
                        "#FF6384",
                        "#36A2EB",
                        "#FFCE56"
                    ],
                    hoverBackgroundColor: [
                        "#FF6384",
                        "#36A2EB",
                        "#FFCE56"
                    ]
                }]
        };

        this.lightOptions = {
            plugins: {
                legend: {
                    labels: {
                        color: '#495057'
                    }
                }
            }
        };
    }

    render() {
        return (
            <div className="card flex justify-content-center">
                <Chart type="doughnut" data={this.chartData} options={this.lightOptions} style={{ position: 'relative', width: '40%' }} />
            </div>
        )
    }
}
                

TO

Answer 1

I have create. please try this one. i hope this can help you guys.

import React, { useState } from "react";
import ReactDOM from "react-dom";
import { Doughnut } from "react-chartjs-2";
import "./styles.css";

function App() {
  const options = {
    cutoutPercentage: 60,
    tooltips: {
      callbacks: {
        label: (tooltipItem, data) => {
          // Get the dataset label, global label or fall back to empty label
          let label =
            (data.datasets[tooltipItem.datasetIndex].labels &&
              data.datasets[tooltipItem.datasetIndex].labels[
                tooltipItem.index
              ]) ||
            data.labels[tooltipItem.index] ||
            "";
          setChartText({
            label: label,
            value:
              data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]
          });
          return false;
        }
      }
    }
  };

  const data = {
    datasets: [
      {
        data: [6.5, 55, 180],
        backgroundColor: ["#5b7232", "#97012e", "#faab18"],
        labels: ["SCORE", "SCORE B", "SCORE C"],
        pointStyle: "circle"
      }
    ]
  };

  const [chartText, setChartText] = useState({
    label: data.datasets[0].labels[0],
    value: data.datasets[0].data[0]
  });
  return (
    <div className="App">
      <div className="chartContainer">
        <Doughnut data={data} options={options} height={400} width={400} />
        <div className="chartInner">
          <div className="chartValue">{chartText.value}</div>
          <div className="chartLable">{chartText.label}</div>
        </div>
      </div>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

this preview : https://zw3zw7.csb.app/ and this my codesandbox : https://codesandbox.io/s/react-chart-js-doughnut-center-label-zw3zw7?file=/src/index.js:0-1646