Search code examples
javascriptcanvasgraphicspie-chartdonut-chart

How to fill a certain share of slices in a pie chart?

I am trying to reproduce such a graph:

What I am trying to figure out is how to fill a certain percentage of the slices in the middle for the pie chart but also how to fill the doughnut chart in the same way.

I have tried to use fillRect() but that did not fill the slices how I wanted. Let me know if you have any ideas of how I could obtain a graph similar to the one I presented above.

var canvas = document.getElementById('Arc');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;

function draw() {
  context.save();
  context.beginPath();
  context.arc(centerX, centerY, 50, 50, (Math.PI) / 2, true);
  context.clip();
  context.fillStyle = '#090A09';
  context.fillRect(centerX, centerY, -25, 50);
  context.lineWidth = 5;
  context.strokeStyle = '#000000';
  context.stroke();
}
draw();
<canvas id="Arc"></canvas>

Solution

  • The fillRect is just a rectangle, if a pie is what you need we can do those with arcs.

    The pies that start from the center of the circle we just move to the center then draw the arcs and fill them, for the doughnut pies we have to do two arcs in opposite directions and different radius and call fill()

    see samples below:

    var canvas = document.getElementById('Arc');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;

context.beginPath();
context.strokeStyle = 'red';
context.arc(centerX, centerY, 50, 0, Math.PI * 2);
context.stroke();

context.beginPath();
context.fillStyle = 'blue';
context.moveTo(centerX, centerY)
context.arc(centerX, centerY, 50, 0, Math.PI * 0.5);
context.fill()

context.beginPath();
context.fillStyle = 'black';
context.moveTo(centerX, centerY)
context.arc(centerX, centerY, 45, Math.PI * 1.6, Math.PI * 1.8);
context.fill()

context.beginPath();
context.fillStyle = 'lime';
context.arc(centerX, centerY, 51, Math.PI, Math.PI * 1.2);
context.arc(centerX, centerY, 95, Math.PI * 1.2, Math.PI, true);
context.fill()

context.beginPath();
context.fillStyle = 'green';
context.arc(centerX, centerY, 60, Math.PI * 1.8, Math.PI * 2.1);
context.arc(centerX, centerY, 95, Math.PI * 2.1, Math.PI * 1.8, true);
context.fill()
    <canvas id="Arc"></canvas>