JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://rawgit.com/palantir/plottable/develop/plottable.js"></script>
<link rel="stylesheet" href="https://rawgit.com/palantir/plottable/develop/plottable.css">
<svg id="equal" width="200px"></svg>
<br />
<svg id="hidden" width="200px"></svg>
<br />
<svg id="inner_radius" width="200px"></svg>
JavaScript
function loadLabelsEqual() {
var data = [ 5, 5, 5 ];
new Plottable.Plots.Pie()
.addDataset(new Plottable.Dataset(data))
.sectorValue(function(d) { return d; })
.labelsEnabled(true)
.renderTo("svg#equal");
}
function loadLabelsHidden() {
var data = [ 1, 10, 70 ];
new Plottable.Plots.Pie()
.addDataset(new Plottable.Dataset(data))
.sectorValue(function(d) { return d; })
.labelsEnabled(true)
.renderTo("svg#hidden");
}
function loadLabelsInnerRadius() {
var data = [ 5, 5, 5 ];
new Plottable.Plots.Pie()
.addDataset(new Plottable.Dataset(data))
.sectorValue(function(d) { return d; })
.innerRadius(50)
.labelsEnabled(true)
.renderTo("svg#inner_radius");
}
window.onload = function() {
loadLabelsEqual();
loadLabelsHidden();
loadLabelsInnerRadius();
};