JSFiddle - React, Tailwind, and code Playground

by HemalathaThanigaivel

HTML

<html>
<head>
<style>
.svg{
      border:1px solid black;
    }
    
.legendText{
      font-size: 12px;
      font-weight: bold;
      font-family: sans-serif;    
      }
 #piechart {                                                          /* NEW */
        height: 400px;                                                  /* NEW */
        position: relative;                                             /* NEW */
        width: 540px;                                                   /* NEW */
      }                                                                 /* NEW */
      .tooltip {       
      font-family: sans-serif;/* NEW */
        background: #eee;                                               NEW
        /* background: #11998e; */
        /* background: linear-gradient(to right, #ffa600, #ff7c43, #f95d6a, #d45087, #a05195, #665191, #2f4b7c, #003f5c); */ 
        box-shadow: 0 0 5px #999999;                                    /* NEW */
        color: #000;                                                    /* NEW */
        display: none;                                                  /* NEW */
        font-size: 12px;                                                /* NEW */
        left: 130px;                                                    /* NEW */
        padding: 10px;                                                  /* NEW */
        position: absolute;                                             /* NEW */
        text-align: center;                                             /* NEW */
        top: 0px;                                                      /* NEW */
        min-width: 80px;                                                    /* NEW */
        z-index: 99;      
        border: 1px solid #000;/* NEW */
        font-weight: bold;
        text-transform: captitalize;
      }         
      .arc path {
        stroke-width: 5px;
       } 
      .arc path:hover {
        stroke:  #00000050;
        stroke-width:  5px;
     ...

JavaScript

let datajson = [
      {value: 57.77,name:"Npower Limited"},
      {value: 19.4,name:"Engie Limited"},
      {value: 14.04,name:"Total Gas"},
      {value: 10.21,name:"Corona Energy "},
      {value: 9.53,name:"SSE"},
      {value: 1.07,name:"Yorkshire Gas"},
      {value: 1,name:"ISE"},
      {value: 1,name:"Orsted Energy"},
      {value: 0.91,name:"Haven Power"},
			{value: 0.35,name:"Contract Gas"},
      {value: 0.17,name:"Crown Energy"},
			{value: 0.05,name:"British Gas"}
    ];
    
let width = 540,
    height = 400,
    radius = Math.min(width,height) / 2 ;
    
let color = d3.scaleOrdinal(['#ffa600','#ff7c43','#f95d6a','#d45087','#a05195','#665191','#2f4b7c','#003f5c']);

let svg = d3.select("#piechart")
            .append("svg")
            .attr("width",width)
            .attr("height",height)
            .attr("class","svg")
let g = svg.append("g")
            .attr("transform","translate("+ width/2 +"," + height/3 +")")
            
 
            
let pie = d3.pie()
				.value(function(d) { return d.value; })
        .sort(null);
let arc = d3.arc()
			.innerRadius(5)
			.outerRadius(radius - 100)
     .padAngle(.02)
      .padRadius(100)
      .cornerRadius(4);
				/* arc.append('div')   */     
        
    datajson.forEach(function(d) {
      d.value = +d.value; // calculate count as we iterate through the data
      d.enabled = true; // add enabled property to track which entries are checked
    });
let arcs = g.selectAll("arc")
			.data(pie(datajson))
			.enter()
			.append("g")
			.attr("class","arc")
      .each(function(d) { this._current - d; });
	
  arcs.append("path")
			.attr("fill", function(d, i) {return color(i);})
      .attr("d", arc)
       // creates a smooth animation for each track
      
      
 // Legend Text
  let n = datajson.length/4;
    let itemWidth =150;
    let itemHeight = 25;
    let legend = svg.selectAll(".legend")
      .data(datajson)
      .enter()
      .append("g")
      .attr("transform", function(d,i) {...