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 canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
console.log(ctx);

var center = {
    x: 200,
    y: 150
};
var myColor = ["#ff0", "#ff0", "#ff0", "#ff0", "#c01c3f"];
var myData = [20, 40, 50, 70, 100];
var myRadius = [150, 120, 80, 100, 70];
var myDistance = [5, 5, 2, 2, 2];
var myText = ['first', 'second', 'third', 'fourth', 'fifth'];

function getTotal(data) {
    var myTotal = 0;
    for (var j = 0; j < data.length; j++) {
        myTotal += (typeof data[j] == 'number') ? data[j] : 0;
    }
    return myTotal;
}

function plotData() {
    var lastend = 0;
    var myTotal = getTotal(myData);

    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    //ctx.strokeStyle = 'rgba(255,255,255,0.5)';
    ctx.lineWidth = 1;
    ctx.font="15px Arial";
    for (var i = 0; i < myData.length; i++) {
        ctx.save();
        ctx.fillStyle = myColor[i];
        ctx.beginPath();
        ctx.translate(center.x, center.y);
        var thisAngle = (Math.PI * 2 * (myData[i] / myTotal));
        ctx.rotate(lastend + thisAngle / 2);
        ctx.translate(myDistance[i], 0);
        ctx.moveTo(0, 0);
        ctx.arc(0, 0, myRadius[i], -(thisAngle / 2), thisAngle / 2, false);
        ctx.closePath();
        ctx.fill();
        
        ctx.beginPath();
        ctx.strokeStyle = '#079';
        ctx.lineWidth = 9;
        ctx.arc(0, 0, myRadius[i], -(thisAngle / 2), thisAngle / 2);
        ctx.stroke();
        
       // ctx.stroke();
        ctx.fillStyle = '#fff';
        ctx.translate(0.6 * myRadius[i], 0);
        ctx.rotate(-(lastend + thisAngle / 2));
        ctx.fillText(myText[i], 0, 0);
        ctx.restore();
        lastend += thisAngle;
    }
}

plotData();