JSFiddle - React, Tailwind, and code Playground

by CoolBlue

HTML

<svg id="chart"></svg>

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>

JavaScript

var margin = {top: 20, right: 20, bottom: 30, left: 40},
    w = 100,   // ALTER: Changed fixed width with the 'pbi.width' variable
    h = 100; // ALTER: Changed fixed height with the 'pbi.height' variable

var duration = 750;
var chart = d3.select('#chart')
        .attr('width', w + margin.left + margin.right)
        .attr('height',h + margin.top + margin.bottom)
        .append('g')
        .attr('transform', 'translate('+ w/2 + "," + h/2 + ')'),
    oldPieData = [],
        // group at the center of donut
    center_group = chart.append('g')
        .attr("class", "center_group").text("TEST");

function createPieChart(data){

    // displaying total calls at the center
//  	center_group.text(data.total);

    var update = center_group.selectAll('text').data(data)
    update.text(function(d) { return d.value });
    update.enter().append('text')
            .attr({'text-anchor': 'middle', dy: "0.35em"})
            .text(function(d) { return d.value })
   // center_group.text(d3.format(",.1f")(d3.sum(data, function(d){return d.value})));
}