JSFiddle - React, Tailwind, and code Playground

HTML

<div id="holder" style="width:500px; height:400px;"></div>

JavaScript

var data = [5,30,20,50,100,40,200];


    var color = ["red", "green", "blue", "yellow", "pink", "gray","black"];

    var paper;
    var arc;

    var sectorAngleArr = [];
    var total = 0;
    var startAngle = 0;
    var endAngle = 0;
    var x1, x2, y1, y2 = 0;

    paper = Raphael("holder"); //circle

     //CALCULATE THE TOTAL
    for (var k = 0; k < data.length; k++) {
      total += data[k];
    }

     //CALCULATE THE ANGLES THAT EACH SECTOR SWIPES AND STORE IN AN ARRAY
    for (var i = 0; i < data.length; i++) {
      var angle = Math.ceil(360 * data[i] / total);
      sectorAngleArr.push(angle);
    }

    drawArcs();

    function drawArcs() {
      for (var i = 0; i < sectorAngleArr.length; i++) {
        startAngle = endAngle;
        endAngle = startAngle + sectorAngleArr[i];
              

        x1 = parseInt(Math.round(200 + 195 * Math.cos(Math.PI * startAngle / 180)));
        y1 = parseInt(Math.round(200 + 195 * Math.sin(Math.PI * startAngle / 180)));

        x2 = parseInt(Math.round(200 + 195 * Math.cos(Math.PI * endAngle / 180)));
        y2 = parseInt(Math.round(200 + 195 * Math.sin(Math.PI * endAngle / 180)));

        var d = "M200,200  L" + x1 + "," + y1 + "  A195,195 0 " + ((endAngle - startAngle > 180) ? 1 : 0) + ",1 " + x2 + "," + y2 + " z";
        //alert(d);

        arc = paper.path(d);
        arc.attr("fill", color[i]);

      }
      //clear arrays
      data = [];
      color = [];
      sectorAngleArr = [];
    }