JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/nvd3/1.7.0/nv.d3.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.js"></script>
<div id="piechart-sector-current">
<svg style="width:100%;height:300px" />
</div>
JavaScript
function pieSectorData() {
return [{
"key": "Technology",
y: 298.85,
"symbols": "DOV",
"color": "#3182bd",
},
{
"key": "Health Care",
y: 477.80,
"symbols": "JNJ",
"color": "#6baed6",
},
{
"key": "Consumer Services",
y: 485.65,
"symbols": "MCD",
"color": "#9ecae1",
},
{
"key": "Energy",
y: 739.45,
"symbols": "XOM, CVX",
"color": "#A52A2A",
}];
}
//Regular pie chart example
nv.addGraph(function () {
var chart = nv.models.pieChart()
.x(function (d) {
return d.key
})
.y(function (d) {
return d.y
})
.showLabels(false)
.color(function (d) {
return d.color;
})
.showLegend(false);
/* chart.tooltip.contentGenerator(function (obj) {
content = '<h3 style="background-color: ';
content += obj.color + '">';
content += obj.data.key + '</h3><p>$' + Math.round(obj.data.y * 100) / 100 + ' ('+ obj.data.symbols +')</p>';
return content;
}); */
d3.select("#piechart-sector-current svg")
.datum(pieSectorData())
.transition().duration(350)
.call(chart);
return chart;
});