JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://nvd3.org/assets/css/nv.d3.css">
<script src="http://nvd3.org/assets/lib/d3.v3.js"></script>
<script src="http://nvd3.org/assets/js/nv.d3.js"></script>
<div id='chart1' style="height:500px;">
    <svg></svg>
</div>

CSS

svg text {
    fill: blue;
}

.nvd3.nv-pie .nv-slice text {
    fill: blue !important;
}

JavaScript

//Donut chart example
nv.addGraph(function () {
    var chart = nv.models.pieChart()
        .x(function (d) {
        return d.label
    })
        .y(function (d) {
        return d.value
    })
        .showLabels(true)
        .labelThreshold(.05)
        .labelType("percent")
        .donut(true)
        .donutRatio(0.35) //Configure how big you want the donut hole size to be.
    ;

    d3.select("#chart1 svg")
        .datum(exampleData())
        .transition().duration(350)
        .call(chart);

    return chart;
});

//Pie chart example data. Note how there is only a single array of key-value pairs.
function exampleData() {
    return [{
        "label": "One",
            "value": 29.765957771107
    }, {
        "label": "Two",
            "value": 0
    }, {
        "label": "Three",
            "value": 32.807804682612
    }, {
        "label": "Four",
            "value": 196.45946739256
    }, {
        "label": "Five",
            "value": 0.19434030906893
    }, {
        "label": "Six",
            "value": 98.079782601442
    }, {
        "label": "Seven",
            "value": 13.925743130903
    }, {
        "label": "Eight",
            "value": 5.1387322875705
    }];
}