Chart.js version 2 responsive doughnut with text inside

by Muthuraman B

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.bundle.js"></script>
<canvas id="myChart1"></canvas>
<canvas id="myChart2"></canvas>

JavaScript

new Chart(document.getElementById('myChart1'), {
  type: 'doughnut',
  data: {
    labels: [ "Red", "Blue", "Yellow" ],
    datasets: [
      {
        data: [0, 0, 0],
        backgroundColor: [ "#FF6384", "#36A2EB", "#FFCE56" ],
        hoverBackgroundColor: [ "#FF6384", "#36A2EB", "#FFCE56" ],
        borderWidth: [0, 0, 0]
      }]
  },
  options: {
    radiusBackground: {color: '#f5f7f9'},
    cutoutPercentage: 60,
    legend: {display: false},
    elements: {
      center: {color: '#999',fontStyle: 'Arial',sidePadding: 20}
    }
  }
});

new Chart(document.getElementById('myChart2'), {
  type: 'doughnut',
  data: {
    labels: [ "Red", "Blue", "Yellow" ],
    datasets: [
      {
        data: [200, 50, 100],
        backgroundColor: [ "#FF6384", "#36A2EB", "#FFCE56" ],
        hoverBackgroundColor: [ "#FF6384", "#36A2EB", "#FFCE56" ],
        borderWidth: [0, 0, 0]
      }]
  },
  options: {
    radiusBackground: {color: '#f5f7f9'},
    cutoutPercentage: 60,
    legend: {display: false},
    elements: {
      center: {color: '#999',fontStyle: 'Arial',sidePadding: 20}
    }
  }
});

Chart.pluginService.register({
  beforeDraw: function(chart) {
    if (chart.options.elements.center) {
      // create center element
      var center = chart.options.elements.center;
      var fontStyle = center.fontStyle || 'Arial';
      var color = center.color || '#000';
      var width = chart.chart.width;
      var height = chart.chart.height;
      var ctx = chart.chart.ctx;
      ctx.fillStyle = color;
      // text1 fontSize calculation
      ctx.restore();
      var fontSize = (height / 60).toFixed(2);
      ctx.font = fontSize + "em sans-serif";
      ctx.textAlign = 'center';
      ctx.textBaseline = "middle";

      var sum = 0;
      for (var i = 0; i < chart.config.data.datasets[0].data.length; i++) {
        sum += chart.config.data.datasets[0].data[i];
      }
      // text1
      var text1 = sum;
      var textX1 = width / 2;
      var textY1 = height / 2.2;
 ...