JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

var paper;
var arc;
var colorArr = ["#468966", "#FFF0A5", "#FFB03B", "#B64926", "#8E2800"];
var pieData = [113, 0, 56, 0, 27];
var sectorAngleArr = [];
var total = 0;
var startAngle = 0;
var endAngle = 0;
var x1, x2, y1, y2 = 0;


paper = Raphael("holder", 600, 400);
//CALCULATE THE TOTAL
for (var k = 0; k < pieData.length; k++) {
    total += pieData[k];
}
//CALCULATE THE ANGLES THAT EACH SECTOR SWIPES AND STORE IN AN ARRAY
for (var i = 0; i < pieData.length; i++) {
    var angle = Math.ceil(360 * pieData[i] / total);
    sectorAngleArr.push(angle);
}


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

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

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

    var d = "M200,200  L" + x1 + "," + y1 + "  A180,180 0 0,1 " + x2 + "," + y2 + " z"; //1 means clockwise
    arc = paper.path(d);
    arc.attr("fill", colorArr[i]);
}