Doughnut Single Value

by Muthuraman B

HTML

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

JavaScript

var value = 30;
var maxvalue = 1000;

var data = {
  labels: [ "My val", "" ],
  datasets: [
    {
      data: [value, maxvalue-value],
      backgroundColor: [ "#FF6384", "transparent" ],      
      borderWidth: [0, 0]
    }]
};

new Chart(document.getElementById('myChart'), {
  type: 'doughnut',
  data: data,
  options: {
    responsive: true,
    legend: { display: false },
    elements: {
      center: {color: '#999',fontStyle: 'Arial',sidePadding: 20}
    },
    radiusBackground: {color: '#f5f7f9'},
    cutoutPercentage: 60,
    tooltips: {
      filter: function(item, data) {
        var label = data.labels[item.index];
        if (label) return item;
      }
    }
  }
});

textCenter(value, maxvalue);

function textCenter(value, maxvalue) {
  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 / 70).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];
        } */
        
        sum = value* 100 / maxvalue;

        // 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";
       ...