[Chartjs]-How to Add filled circle in doghnut chart using chart.js

by

2👍

✅

You can mimic this design by using a pie chart with specific configuration options.

Here is a working example, including the posted plugin code for drawing text in the middle (note that the plugin is changed from beforeDraw to afterDraw to keep the text above the fill segment):

const data = {
  datasets: [{
    label: 'outer',
    data: [1, 2],
    backgroundColor: [
      '#27AE60',
      '#3333331A'
    ],
    rotation: 210,
    circumference: 300,
    cutout: '50%',
    borderWidth: 0
  }, {
    // dummy dataset to fill middle.
    label: 'inner',
    data: [1],
    backgroundColor: '#27AE60',
    weight: 3,
    borderWidth: 0
  }]
};

new Chart('chart', {
  type: 'pie',
  data: data,
  options: {
    borderAlign: 'inner'
  },
  plugins: [{
    id: 'text',
    afterDraw: function(chart, a, b) {
      let width = chart.width,
        height = chart.height,
        ctx = chart.ctx;

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

      let text = '90%',
        textX = Math.round((width - ctx.measureText(text).width) / 2),
        textY = height / 2;

      ctx.fillText(text, textX, textY);
      ctx.save();
    }
  }],
});
<div style="width:200px;height:200px"><canvas id="chart"></canvas></div>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.2.1"></script>

Leave a comment