JSFiddle - React, Tailwind, and code Playground

by HemalathaThanigaivel

HTML

<div id="contractStatusPie" style="width: 400px; height: 350px">

</div>

CSS

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  width: 960px;
  height: 500px;
  position: relative;
  background : #2e2e2e
}

.pieContract {
  width: 100%;
  height: 100%;
}
/* 
path.slice{
  stroke-width:0px;
} */

polyline.polyline1CS, polyline.polyline2CS{
  opacity: .8;
  stroke: #808080;
  stroke-width: 2px;
  fill: none;
}

JavaScript

var svg = d3.select("#contractStatusPie")
	.append("svg")
  .attr("class","pieContract")
	.append("g")

svg.append("g")
	.attr("class", "slicesCS");
svg.append("g")
	.attr("class", "slices2CS");
svg.append("g")
	.attr("class", "labelsCS");
svg.append("g")
	.attr("class", "labels2CS");
svg.append("g")
	.attr("class", "linesCS");
svg.append("g")
	.attr("class", "lines2CS");
  
svg.append("text")
	.attr("class", "centerLabelCS");
svg.append("text")
	.attr("class", "centerLabelSpentCS");
  
var width = 400,
    height = 350,
	radius = Math.min(width, height) / 2;

var pie = d3.pie()
	.sort(null)
	.value(function(d) {
		return d.value;
	});
var innerArc = d3.arc()
	.outerRadius(radius * 0.6)
	.innerRadius(radius * 0.4);
  
var arc = d3.arc()
	.outerRadius(radius * 0.8)
	.innerRadius(radius * 0.6);

var outerArc = d3.arc()
	.innerRadius(radius * 0.9)
	.outerRadius(radius * 0.9);
  
var outerArcSpent = d3.arc()
	.innerRadius(radius * 0.7)
	.outerRadius(radius * 0.7);

svg.attr("transform", "translate(" + 150 + "," + height / 2 + ")");

var key = function(d){return d.data.label; };

var color = d3.scaleOrdinal()
	.domain(["Total"])
	.range(["#b44845"]);
  
var color2 = d3.scaleOrdinal()
	.domain(["actualspent","predictSpent"])
	.range(["#fbcf65","#ff6e40"]);
  
function randomData (){
	var labels = [{label : "Total", value : 25000, color: "#b44845"},{label : "predict", value : 15000, color : "#ff6e40"},{label : "actual", value : 10000, color :"#fbcf65" }];
 // console.log(labels)
	return labels.map(function(item, index){
      return { label: item.label, value: item.value , color: item.color}
	});
}

change(randomData());

function change(data) {
	/* ------- PIE SLICES -------*/
 // console.log(data[0])
	var totalSlice = svg.select(".slicesCS").selectAll("path.sliceCS")
		.data(pie([data[0]]), key);

	totalSlice.enter()
		.insert("path")
		.style("fill", function(d) { return d.data.color; })
		.attr("class", "sliceCS")
    .attr("d",...