JSFiddle - React, Tailwind, and code Playground

by Muthuraman B

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="col-md-3 col-sm-3 col-xs-6">
  <canvas id="doughnut1" width="100%" height="100%"></canvas> 
</div>
<div class="col-md-3 col-sm-3 col-xs-6">
  <canvas id="doughnut2" width="100%" height="100%"></canvas>
</div>
<div class="col-md-3 col-sm-3 col-xs-6">
  <canvas id="doughnut3" width="100%" height="100%"></canvas> 
</div>
<div class="col-md-3 col-sm-3 col-xs-6">
  <canvas id="doughnut4" width="100%" height="100%"></canvas>  
</div>

JavaScript

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;
      ctx.fillText(text1, textX1, textY1);
      // text2 fontSize calculation
      fontSize = (height / 150).toFixed(2);
      ctx.font = fontSize + "em sans-serif";
      ctx.textBaseline = "middle";
      // text2
      var text2 = "Funds";
      var textY2 = height / 1.6;
      ctx.fillText(text2, textX1, textY2);
      ctx.save();
    }
  }
});

new Chart(document.getElementById('doughnut1'), {
  type: 'doughnut',
  data: {
    labels: ["label1","label2","label3"],
    datasets: [{
      data: [10, 20, 30],
      backgroundColor: ["#54c2c8","#d5edf0","#9cd7db"],
      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('doughnut2'), {
  type: 'doughnut',
  data: {
    labels: ["label1","label2","label3"],
    datasets: [{
      data: [30, 40, 50],
      backgroundColor: ["#11a4da","#7bbee5","#cae3f5"],
      borderWidth: [0, 0, 0]
    }]
  },
  options: {
   ...