JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

var x_data1 = 100;
		var y_data1 = 100;
		var data1 = [10,40,70,20,30];
		
		var x_data2 = 150;
		var y_data2 = 150;
		var data2 = [20,60,100,20];
		
		graph_circ(data1,x_data1,y_data1); //call function
        
        graph_circ(data2,x_data2,y_data2); //call function
		
		function graph_circ(data,x_circle,y_circle){
		
            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];
			}
	
			console.log(data);
			 //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 makeSVG(tag, attrs) {
		    var el= document.createElementNS('http://www.w3.org/2000/svg', tag);
		    for (var k in attrs)
		        if (attrs.hasOwnProperty(k)) el.setAttribute(k, attrs[k]);
		    return el;
			}

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

					 if(i == sectorAngleArr.length-1 && data.length >2){  
						endAngle = 0;
					}
					
					//***************** cx cy circle *******************
					//var x_circle = 150;
					//var y_circle = 150;
					
					x1 = parseInt(Math.round(x_circle + y_circle*Math.cos(Math.PI*startAngle/180)));
					y1 = parseInt(Math.round(x_circle + y_circle*Math.sin(Math.PI*startAngle/180)));

					x2 = parseInt(Math.round(x_circle + y_circle*Math.cos(Math.PI*endAngle/180)));
					y2 = parseInt(Math.round(x_circle + y_circle*Math.sin(Math.PI*endAngle/180)));
					 
					var d = "M"+x_circle+","+x_circle+"  L" + x1 + "," + y1 + "  A"+y_circle+","+y_circle+" 0...