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')

);

<script src=https://gor181.github.io/react-chartjs-2/common.js></script>

<script src=https://gor181.github.io/react-chartjs-2/bundle.js></script>



<div id=root>

</div>