Wie füge ich mit „react-chartjs-2.js“ Text in ein Donut-Diagramm ein?

Question

So fügen Sie mit „react-chartjs-2.js“ und Typescript Text in ein Donut-Diagramm ein, wenn sich der Titel des Diagramms oben und die Beschriftung auf der rechten Seite des Donut-Diagramms befindet. Die Lösungen, die ich bisher gefunden habe, scheinen mit Side-Tags oder React/TS nicht zu funktionieren.

Das habe ich jetzt:

...

setOptions({
   responsive: true,
   plugins: {
     legend: {
       position: 'right',
       rtl : true,
       labels: {
         usePointStyle: true,
         pointStyle: 'circle',
       }
     },
     title: {
       display: true,
       text: 'Title',
       font: {
         size: 25,
       }
     }
   },
});
    
setPlugins ({
    id: "tooltipLine",
    beforeDraw: function(chart) {
      var width = chart.width,
      height = chart.height,
      ctx = chart.ctx;
      ctx.restore();
      var fontSize = (height / 160).toFixed(2);
      ctx.font = fontSize + "em sans-serif";
      ctx.textBaseline = "top";
      var text = "Foo-bar",
      textX = Math.round((width - ctx.measureText(text).width) / 2),
      textY = height / 2;
      ctx.fillText(text, textX, textY);
      ctx.save();
    }
})
<Doughnut id="pieChart" data={data} options={options} plugins={[plugins] as any}/>

Aber dadurch wird der Text nur in der Mitte der gesamten Leinwand platziert, nicht in der Mitte des Donuts.

Answer 1

const plugins = [{
        beforeDraw: function(chart) {
            var width = chart.width,
                height = chart.height,
                ctx = chart.ctx;
            ctx.restore();
            var fontSize = (height / 160).toFixed(2);
            ctx.font = fontSize + 'em sans-serif';
            ctx.textBaseline = 'top';

            // Draw "Total" on the first line
            var text1 = 'Total';
            var textX1 = Math.round((width - ctx.measureText(text1).width) / 2);
            var textY1 = height / 2.5;
            ctx.fillText(text1, textX1, textY1);

            // Draw the number on the second line
            var text2 = totalStatusCountRef.current;
            var textX2 = Math.round((width - ctx.measureText(text2).width) / 2);
            var textY2 = height / 1.9;
            ctx.fillText(text2, textX2, textY2);

            ctx.save();
        }
    }];