JSFiddle - React, Tailwind, and code Playground

by HemalathaThanigaivel

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<div id="pieDashboard"></div>
<button id="resetBtn">
Reset
</button>
<div id="tooltip" class="hidden">
    <p><span id="labelMpan"></span></p>
    <p><strong>Usage (%) : </strong><span id="value"></span>
    </p>  
</div>

CSS

body{
  background : #2c2b29
}
#tooltip {
    position: absolute;
    width: 100px;
    height: auto;
    padding: 5px;
    background-color: white;
   -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
    -mox-box-shadow: 4px 4px 4px 10px rgba(0, 0, 0, 0.4);
    box-shadow: 4px 4px 10px rbga(0, 0, 0, 0.4);
    pointer-events: none;
}
#tooltip.hidden {
    opacity: 0;
}
#tooltip p {
    margin: 0;
    font-family: sans-serif;
    font-size: 10px;
    line-height: 15px;
}

JavaScript

//buildDBPie();
function buildDBPie(){
d3.dashboardPie = {};

	var width = 500,
	    height = 300,
	    radius = Math.min(width, height) / 2;
     var arc1 = d3.arc()										
        .innerRadius(radius - 80)
        .outerRadius(radius - 15);
     var arc2 = d3.arc()										
        .innerRadius(radius - 80)
        .outerRadius(radius - 25);
     var arc3 = d3.arc()										
        .innerRadius(radius - 80)
        .outerRadius(radius - 35);
        
		 var arc4 = d3.arc()
				.innerRadius(radius - 80)
				.outerRadius(radius - 45);   
     var arc = d3.arc()
      .innerRadius(radius - 80)
      .outerRadius(radius);
     var arcArr = [{"arc1" : arc1, "arc2": arc2, "arc3": arc3,"arc4" : arc4, "arc": arc}];
     var thisMonthCostpie;
      
d3.dashboardPie.donut = function module() {


	var color =  d3.scaleOrdinal(['rgb(195, 95, 95)', 'rgb(249, 165, 4)', 'rgb(83, 158, 158)', 'lightgreen']);



   var dispatch = d3.dispatch("customHover");
   function graph(_selection) {
       _selection.each(function(_data) {	
			var pie = d3.pie()
		    	.sort(null)
          .value(function (d) {
              return d.value;
          });
		
        
			var arcIn = d3.arc()
				.innerRadius(0)
				.outerRadius(radius - 81)
        .startAngle(Math.PI)
        .endAngle(-Math.PI);
        
      var svg = d3.select(this).select("svg > g");
			if (svg.empty()){
				 svg = d3.select(this).append("svg")
			    	.attr("width", width)
			    	.attr("height", height)
			    	.append("g")
			    	.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
			}
      
        svg.append("path")
          .attr("class", "arc-cost")
          .style("fill","none")
          .attr("d", arcIn);
          
        svg.append("text")
       		.attr("class","totalCost");
          
        svg.append("text")
       		.attr("class","totalCostValue");  
          
        svg.append("text")
       		.attr("class","totalConsm");    
         
       svg.append("text")
      ...