JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width="400" height="300">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>

JavaScript

var myColor = ["#ff0","#00f","#002","#003","#004"];
var myData = [10,30,20,60,40];
var myRadius = [120,80,40,70,40];//[120,80,40,70,40];
function getTotal(){
    var myTotal = 0;
    for (var j = 0; j < myData.length; j++) {
        myTotal += (typeof myData[j] == 'number') ? myData[j] : 0;
    }
    return myTotal;
}

function plotData() {
    var canvas;
    var ctx;
    var lastend = 0;
    var myTotal = getTotal();
    
    canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d");
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    for (var i = 0; i < myData.length; i++) {
        ctx.fillStyle = myColor[i];
        ctx.beginPath();
        ctx.moveTo(200,150);
        ctx.arc(200,150,myRadius,lastend,lastend+
          (Math.PI*2*(myData[i]/myTotal)),false);
        console.log(myRadius[i]);
        ctx.lineTo(200,150);
        ctx.fill();
        lastend += Math.PI*2*(myData[i]/myTotal);
    }
}

plotData();