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 {                                                        /* NEW */
        background: #eee;                                               /* NEW */
        box-shadow: 0 0 5px #999999;                                    /* NEW */
        color: #333;                                                    /* NEW */
        display: none;                                                  /* NEW */
        font-size: 12px;                                                /* NEW */
        left: 130px;                                                    /* NEW */
        padding: 10px;                                                  /* NEW */
        position: absolute;                                             /* NEW */
        text-align: center;                                             /* NEW */
        top: 0px;                                                      /* NEW */
        width: 80px;                                                    /* NEW */
        z-index: 99;      
        border: 1px solid red;/* NEW */
        cursor: pointer;
      }                   
</style>
</head>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<div id="piechart"></div>
</body>
</html>

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;
      })
		let arc = d3.arc()
					.innerRadius(0)
					.outerRadius(radius - 100)
          .padAngle(.02)
          .padRadius(100)
          .cornerRadius(4);
		let arcs = g.selectAll("arc")
		      .data(pie(datajson))
		      .enter()
		      .append("g")
		          
		arcs.append("path")
		  .attr("fill", function(d, i) {
		    return color(i);})
      .attr("d", arc);
      
 // 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) { return "transform","translate(" + i%n * (itemWidth) + "," + Math.floor(i/n) * itemHeight + ")"; })
      .attr("class","legend");
	
 let rects = legend.append('circle')
  .attr("cx",  width / 6 -10)
  .attr("cy", height / 2 + 100 - 4)
  .attr("r", 5)
  .attr("fill", function(d,i) { return color(i); });
  
let text = legend.append('text')
 ...