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

react-chartjs-2 donut chart

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

answer react-chartjs-2 donut chart

related react-chartjs-2 donut chart

react-chartjs-2 donut chart

Comment

const data = {
  labels: [...],
  datasets: [...],
  text: '23%'
};

Popularity 8/10 Helpfulness 1/10 Language javascript

Source: stackoverflow.com

Tags: donut-chart javascript react-chartjs-2

Link to this answer
Share Copy Link

Contributed on Jul 16 2021

Mystic Dev

0 Answers Avg Quality 2/10

Closely Related Answers

react-chartjs-2 donut chart

Comment

import React from 'react';
import ReactDOM from 'react-dom';
import {Doughnut} from 'react-chartjs-2';

// some of this code is a variation on https://jsfiddle.net/cmyker/u6rr5moq/
var originalDoughnutDraw = Chart.controllers.doughnut.prototype.draw;
Chart.helpers.extend(Chart.controllers.doughnut.prototype, {
  draw: function() {
    originalDoughnutDraw.apply(this, arguments);
    
    var chart = this.chart.chart;
    var ctx = chart.ctx;
    var width = chart.width;
    var height = chart.height;

    var fontSize = (height / 114).toFixed(2);
    ctx.font = fontSize + "em Verdana";
    ctx.textBaseline = "middle";

    var text = chart.config.data.text,
        textX = Math.round((width - ctx.measureText(text).width) / 2),
        textY = height / 2;

    ctx.fillText(text, textX, textY);
  }
});

const data = {
	labels: [
		'Red',
		'Green',
		'Yellow'
	],
	datasets: [{
		data: [300, 50, 100],
		backgroundColor: [
		'#FF6384',
		'#36A2EB',
		'#FFCE56'
		],
		hoverBackgroundColor: [
		'#FF6384',
		'#36A2EB',
		'#FFCE56'
		]
	}],
  text: '23%'
};

class DonutWithText extends React.Component {

  render() {
    return (
      <div>
        <h2>React Doughnut with Text Example</h2>
        <Doughnut data={data} />
      </div>
    );
  }
};

ReactDOM.render(
  <DonutWithText />,
  document.getElementById('root')
);

Popularity 8/10 Helpfulness 4/10 Language javascript

Source: stackoverflow.com

Tags: react-chartjs-2 javascript donut-chart donut-

Link to this answer
Share Copy Link

Contributed on Jul 16 2021

Mystic Dev

0 Answers Avg Quality 2/10

react-chartjs-2 donut chart

Contents

More Related Answers

react-chartjs-2 donut chart

Closely Related Answers

react-chartjs-2 donut chart

Grepper

Documentation

Social

Legal

Contact

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