adding donet chart text center in react

1function DoughnutChart({ data = {} }) {
2 return (
3   <Doughnut
4     data={format(dataObj)}
5     plugins={[
6      {
7        beforeDraw(chart) {
8         const { width } = chart;
9         const { height } = chart;
10         const { ctx } = chart;
11         ctx.restore();
12         const fontSize = (height / 160).toFixed(2);
13         ctx.font = `${fontSize}em sans-serif`;
14         ctx.textBaseline = 'top';
15         const { text } = "23";
16         const textX = Math.round((width - ctx.measureText(text).width) / 2);
17         const textY = height / 2;
18         ctx.fillText(text, textX, textY);
19         ctx.save();
20       },
21     },
22   ]}
23 />);
24

1import { Doughnut } from "react-chartjs-2";
2
3function DoughnutChart() {
4
5 const data = {...}
6
7 const options = {...}
8
9 const plugins = [{
10     beforeDraw: function(chart) {
11      var width = chart.width,
12          height = chart.height,
13          ctx = chart.ctx;
14          ctx.restore();
15          var fontSize = (height / 160).toFixed(2);
16          ctx.font = fontSize + "em sans-serif";
17          ctx.textBaseline = "top";
18          var text = "Foo-bar",
19          textX = Math.round((width - ctx.measureText(text).width) / 2),
20          textY = height / 2;
21          ctx.fillText(text, textX, textY);
22          ctx.save();
23     } 
24   }]
25
26
27
28  return (
29   
30        <Doughnut 
31          type="doughnut" 
32          data={data} 
33          options{options} 
34          plugins={plugins} 
35         />
36  );
37}
38
39export default DoughnutChart;
40

1export const plugins = [{
2	beforeDraw(chart: any) {
3		const { width } = chart;
4		const { height } = chart;
5		const { ctx } = chart;
6		ctx.restore();
7		const fontSize = (height / 200).toFixed(2);
8		ctx.font = `${fontSize}em sans-serif`;
9		ctx.textBaseline = "top";
10		const text: string = "Foo- coo";
11		const textX = Math.round((width - ctx.measureText(text).width) / 2);
12		const textY = height / 2.4;
13		ctx.fillText(text, textX, textY);
14		ctx.save();
15	},
16},]
17