JSFiddle - React, Tailwind, and code Playground

by Sampath

HTML

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

<div id="chartnew">
  <svg></svg>
</div>

<div id="chartnewagain">
  <svg></svg>
</div>

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.min.css" type="text/css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

<script>
var h = 600;
var r = h / 2;
var arc = d3.svg.arc().outerRadius(r);

var data = [{
    "label": "Colorectale levermetastase (n=336)",
    "value": 74
  },
  {
    "label": "Levensmetatase van andere origine (n=32)",
    "value": 7
  },
  {
    "label": "Beningne levertumor (n=34)",
    "value": 7
  },
  {
    "label": "Primaire maligne levertumor (n=56)",
    "value": 12
  }
];
var data1 = [{
    "label": "Colorectale levermetastase (n=336)",
    "value": 74
  },
  {
    "label": "Levensmetatase van andere origine (n=32)",
    "value": 7
  },
  {
    "label": "Beningne levertumor (n=34)",
    "value": 7
  },
  {
    "label": "Primaire maligne levertumor (n=56)",
    "value": 12
  }
];
var data2 = [{
    "label": "Colorectale levermetastase (n=336)",
    "value": 74
  },
  {
    "label": "Levensmetatase van andere origine (n=32)",
    "value": 7
  },
  {
    "label": "Beningne levertumor (n=34)",
    "value": 7
  },
  {
    "label": "Primaire maligne levertumor (n=56)",
    "value": 12
  }
];


var colors = [
  'rgb(178, 55, 56)',
  'rgb(213, 69, 70)',
  'rgb(230, 125, 126)',
  'rgb(239, 183, 182)'
]


nv.addGraph(function() {
    
    //1
  var chart = nv.models.pieChart()
    .x(function(d) {
      return d.label
    })
    .y(function(d) {
      return d.value
    })
    .color(colors)
    .showLabels(true)
    .labelType("percent")
  //        .donut(true).donutRatio(0) /* Trick to make the labels go...