JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="can" width="200" height="200" />

JavaScript

var canvas = document.getElementById("can");
var ctx = canvas.getContext("2d");
var lastend = 0;
var data = [200,60,15];
var myTotal = 0;
var myColor = ['red','green','blue'];

for(var e = 0; e < data.length; e++)
{
  myTotal += data[e];
}

for (var i = 0; i < data.length; i++) {
ctx.fillStyle = myColor[i];
ctx.beginPath();
ctx.moveTo(canvas.width/2,canvas.height/2);
ctx.arc(canvas.width/2,canvas.height/2,canvas.height/2,lastend,lastend+(Math.PI*2*(data[i]/myTotal)),false);
ctx.lineTo(canvas.width/2,canvas.height/2);
ctx.fill();
lastend += Math.PI*2*(data[i]/myTotal);
}