JSFiddle - React, Tailwind, and code Playground

by imys

HTML

<canvas id="cv" width="400" height="400"></canvas>

JavaScript

var cv = document.getElementById('cv'),
		ctx = cv.getContext('2d'),
    data = [ 32, 30, 20, 10, 8],
    colors = [ '#F44336', '#9C27B0', '#2196F3', '#4CAF50', '#FFC107'],
    r = cv.width/2,
    x = r,
    y = r;

function drawArc(item) {
	ctx.beginPath();
  ctx.moveTo(x, y);
  ctx.arc(x, y, r, Math.PI * item.start, Math.PI * item.end, item.reverse);
  ctx.closePath();
  ctx.fillStyle = item.color;
  ctx.fill();
}

var items = [];
data.forEach(function(value, i){
	var item = {
  	start: 1.5,
    end: 1.5,
  	color: colors[i],
    reverse: i % 2 !== 0
  };
  
  if(i > 1) {
  	item.start = items[i-2].end;
  }
  
  item.end =  i % 2 === 0 ? item.start + 2 * value/100 : item.start - 2 * value/100;
  
  items.push(item);
  
  drawArc(item);
	
});