JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://d3js.org/d3.v3.js"></script>

CSS

text {
    text-rendering: optimizeLegibility;
}

JavaScript

// Get the angle on the arc and then rotate by -90 degrees
var getAngle = function (d) {
    var ang = (180 / Math.PI * (d.startAngle + d.endAngle) / 2 - 90);
    return (ang > 180) ? 180 - ang : ang;
};

var config = {
    width: 300,
    height: 300,
    id: 'xyz',
    data: [
        {
            value: 10,
            name: 'Ten'
        },
        {
            value: 20,
            name: 'Twenty'
        },
        {
            value: 30,
            name: 'Thirty'
        },
        {
            value: 40,
            name: 'Forty'
        },
        {
            value: 50,
            name: 'Fifty'
        },
        {
            value: 60,
            name: 'Sixty'
        },
        {
            value: 200,
            name: 'Two hundred'
        },
    ]
};
           
(function(config)
    {
        var width = config.width || 840,
            height = config.height || 520,
            radius = Math.min(width, height) / 2;

        var color = this._color = d3.scale.ordinal().range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
        var arc = d3.svg.arc().outerRadius(radius - 10).innerRadius(0);
        var pie = d3.layout.pie().sort(null).value(function(d) { return d.value; });

        var svg = d3.select("body").append("svg").attr('id', config.id || 'chart').attr("width", width).attr("height", height)
                    .append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

          var g = svg.selectAll(".arc").data(pie(config.data)).enter().append("g").attr("class", "arc");
          g.append("path").attr("d", arc).style("fill", function(d) { return color(d.data.name); });
        
        var gLabel = svg.selectAll('.arc-label').data(pie(config.data)).enter().append('g').attr('class', 'arc-label');

          gLabel.append("text")
              .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ") rotate(" + getAngle(d) + ")"; })
             ...