Breaking News: Grepper is joining You.com. Read the official announcement!

adding donet chart text center in react

Mystic Dev answered on July 16, 2021 Popularity 6/10 Helpfulness 10/10

answer adding donet chart text center in react

related adding donet chart text center in react

adding donet chart text center in react

Comment

import { Doughnut } from "react-chartjs-2";

function DoughnutChart() {

 const data = {...}

 const options = {...}

 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";
          var text = "Foo-bar",
          textX = Math.round((width - ctx.measureText(text).width) / 2),
          textY = height / 2;
          ctx.fillText(text, textX, textY);
          ctx.save();
     } 
   }]



  return (
   
        <Doughnut 
          type="doughnut" 
          data={data} 
          options{options} 
          plugins={plugins} 
         />
  );
}

export default DoughnutChart;

Popularity 6/10 Helpfulness 10/10 Language javascript

Source: stackoverflow.com

Tags: center javascript text

Link to this answer
Share Copy Link

Contributed on Jul 16 2021

Mystic Dev

0 Answers Avg Quality 2/10

Closely Related Answers

adding donet chart text center in react

Comment

function DoughnutChart({ data = {} }) {
 return (
   <Doughnut
     data={format(dataObj)}
     plugins={[
      {
        beforeDraw(chart) {
         const { width } = chart;
         const { height } = chart;
         const { ctx } = chart;
         ctx.restore();
         const fontSize = (height / 160).toFixed(2);
         ctx.font = `${fontSize}em sans-serif`;
         ctx.textBaseline = 'top';
         const { text } = "23";
         const textX = Math.round((width - ctx.measureText(text).width) / 2);
         const textY = height / 2;
         ctx.fillText(text, textX, textY);
         ctx.save();
       },
     },
   ]}
 />);

Popularity 4/10 Helpfulness 8/10 Language javascript

Source: stackoverflow.com

Tags: text javascript center

Link to this answer
Share Copy Link

Contributed on Jul 16 2021

Mystic Dev

0 Answers Avg Quality 2/10

adding donet chart text center in react

Comment

export const plugins = [{
	beforeDraw(chart: any) {
		const { width } = chart;
		const { height } = chart;
		const { ctx } = chart;
		ctx.restore();
		const fontSize = (height / 200).toFixed(2);
		ctx.font = `${fontSize}em sans-serif`;
		ctx.textBaseline = "top";
		const text: string = "Foo- coo";
		const textX = Math.round((width - ctx.measureText(text).width) / 2);
		const textY = height / 2.4;
		ctx.fillText(text, textX, textY);
		ctx.save();
	},
},]

Popularity 5/10 Helpfulness 7/10 Language javascript

Source: stackoverflow.com

Tags: javascript text center

Link to this answer
Share Copy Link

Contributed on Jul 16 2021

Mystic Dev

0 Answers Avg Quality 2/10

adding donet chart text center in react

Contents

More Related Answers

adding donet chart text center in react

Closely Related Answers

adding donet chart text center in react

adding donet chart text center in react

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.