JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<div style="position: relative;">
    <canvas id="text" style="z-index: 1; position: absolute; left: 0px; top: 0px; width: 300px; height: 300px;"></canvas>
    <canvas id="canvas" style="z-index: 2; position: absolute; left: 0px; top: 0px; width: 300px; height: 300px;" ></canvas>
</div>

JavaScript

var doughnutData = [
  { value: 100, color:"#F7464A", highlight: "#FF5A5E", label: "Red" },
  { value: 50, color: "#CCCCCC", highlight: "#5AD3D1", label: "Green" }
];

var options = { 
	showTooltips : true,
  animation: true,
  percentageInnerCutout : 70,
  onAnimationComplete: innerTextFunction
};

var chartCtx = $("#canvas").get(0).getContext("2d");
var textCtx = $("#text").get(0).getContext("2d");
var chart = new Chart(chartCtx).Doughnut(doughnutData, options);



function innerTextFunction() {
    var canvasWidthvar = $('#canvas').width();
    var canvasHeight = $('#canvas').height();
    var constant = 114;
    var fontsize = (canvasHeight/constant).toFixed(2);
    textCtx.font = fontsize + "em Verdana";
    textCtx.textBaseline="middle"; 
    var total = 0;
    $.each(doughnutData,function() {
      total += parseInt(this.value,10);
    });
    var tpercentage = ((doughnutData[0].value/total)*100).toFixed(2)+"%";
    var textWidth = textCtx.measureText(tpercentage).width;
    var txtPosx = Math.round((canvasWidthvar - textWidth)/2);
    textCtx.fillText(tpercentage, txtPosx, canvasHeight/4);
      
}