JSFiddle - React, Tailwind, and code Playground

by Muthuraman B

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.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="doughnut_1" width="100%" height="100%"></canvas> 
</div>

JavaScript

var ctx1 = document.getElementById("doughnut_1");

var myChart = new Chart(ctx1, {
    type: 'doughnut',
    data: {
     labels: ["label1","label2","label3"],
     datasets: [{
       data: [80, 100],
       backgroundColor: ["#d5edf0","#9cd7db"],
       borderWidth: [0, 0]
     }]
   },
   options: {
     radiusBackground: {color: '#f5f7f9'},
     cutoutPercentage: 80,
     legend: {display: false},
     elements: {
       center: {text: '100',color: '#999',fontStyle: 'Arial',sidePadding: 20}
     }
 }
});
//default background
var radiusBackground = function() {
   var self = this;
   self.draw = function(chartInstance) {
     if(chartInstance.options.radiusBackground) {
       var x = chartInstance.chart.canvas.clientWidth / 2,
           y = chartInstance.chart.canvas.clientHeight / 2,
           ctx = chartInstance.chart.ctx;
       ctx.beginPath();
       ctx.arc(x, y, chartInstance.outerRadius - (chartInstance.radiusLength / 2), 0, 2 * Math.PI);
       ctx.lineWidth = chartInstance.radiusLength;
       ctx.strokeStyle = chartInstance.options.radiusBackground.color || '#f5f7f9';
       ctx.stroke();
     }
   };
   return {
     beforeDatasetsDraw: self.draw,
     onResize: self.draw
   }
 };
 // Register with Chart JS
 Chart.plugins.register(new radiusBackground());