JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.8.0/d3.min.js"></script>
<script src="https://rawgit.com/benkeen/d3pie/master/d3pie/d3pie.min.js"></script>
<div id="pieChart"></div>

JavaScript

var pie = new d3pie("pieChart", {
        "size": {
            "canvasHeight": 350,
            "canvasWidth": 350,
            "pieOuterRadius": "50%",
            "pieInnerRadius": "50%"
        },
        "data": {
            "sortOrder": "value-asc",
            "content": [
                  {"label":"Total Foreign","value":3.55},
                  {"label":"Total Institutions","value":0.89},
                  {"label":"Total Govt Holding","value":0},
                  {"label":"Total Non Promoter Corporate Holding","value":0.20},
                  {"label":"Total Promoters","value":12.13},
                  {"label":"Total Public & Others","value":3.20}
                ]
        },
        "labels": {
            "outer": {
                "pieDistance": 30
            },
            "inner": {
                "hideWhenLessThanPercentage": 10
            },
            "mainLabel": {
                "fontSize": 11
            },
            "percentage": {
                "color": "#ffffff",
                "decimalPlaces": 0
            },
            "value": {
                "color": "#adadad",
                "fontSize": 11
            },
            "lines": {
                "enabled": true
            },
            "truncation": {
                "enabled": true
            }
        },
        "tooltips": {
            "enabled": true,
            "type": "placeholder",
            "string": "{label}: {percentage}%"
        },
        "effects": {
            "pullOutSegmentOnClick": {
                "effect": "linear",
                "speed": 400,
                "size": 8
            }
        },
        "misc": {
            "gradient": {
                "enabled": true,
                "percentage": 100
            }
        },
        "callbacks": {}
    });