[Chartjs]-How to create single value Doughnut or Pie chart using Chart.js?

by

9👍

✅

Here is an example:

var value = 75;
var data = {
  labels: [
    "My val",
    ""
  ],
  datasets: [
    {
      data: [value, 100-value],
      backgroundColor: [
        "#FF6384",
        "#AAAAAA"
      ],
      hoverBackgroundColor: [
        "#FF6384",
        "#AAAAAA"
      ],
      hoverBorderColor: [
        "#FF6384",
        "#ffffff"
      ]
    }]
};

var myChart = new Chart(document.getElementById('myChart'), {
  type: 'doughnut',
  data: data,
  options: {
  	responsive: true,
    legend: {
      display: false
    },
    cutoutPercentage: 80,
    tooltips: {
    	filter: function(item, data) {
        var label = data.labels[item.index];
        if (label) return item;
      }
    }
  }
});

textCenter(value);

function textCenter(val) {
  Chart.pluginService.register({
    beforeDraw: function(chart) {
      var width = chart.chart.width,
          height = chart.chart.height,
          ctx = chart.chart.ctx;

      ctx.restore();
      var fontSize = (height / 114).toFixed(2);
      ctx.font = fontSize + "em sans-serif";
      ctx.textBaseline = "middle";

      var text = val+"%",
          textX = Math.round((width - ctx.measureText(text).width) / 2),
          textY = height / 2;

      ctx.fillText(text, textX, textY);
      ctx.save();
    }
  });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.js"></script>
<canvas id="myChart"></canvas>

Leave a comment