javascript - react-chartjs-2の円グラフの凡例に値を表示する方法

Question

ダッシュボードに react-Chartjs-2 円グラフを使用しています。要件に従って、凡例にデータを含む両方のラベルを表示する必要があります。アプリケーションで使用している以下のコンポーネント

import React, { Component } from "react";
import { Doughnut } from "react-chartjs-2";

class DoughnutChart extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    const chartdata = {
      labels: ["Newly Added", "Edited", "Deleted"],
      datasets: [
        {
          label: "Markets Monitored",
          backgroundColor: [
            "#83ce83",
            "#959595",
            "#f96a5d",
            "#00A6B4",
            "#6800B4",
          ],
          data: [9, 5, 3],
        },
      ],
    };
    return (
      <Doughnut
        data={chartdata}
        options={{
          legend: { display: true, position: "right" },

          datalabels: {
            display: true,
            color: "white",
          },
          tooltips: {
            backgroundColor: "#5a6e7f",
          },
        }}
      />
    );
  }
}

export default DoughnutChart;

今 、私は出力の下にあるようなチャートを取得しています 。私の要件は、凡例に値を追加することです(チャートの凡例をカスタマイズします)。画像の期待される出力の例