Pie chart - donut, bevel theme, hierarchical structure
Browser shares (sample data). Click to explore
HTML
HTML
<script src="https://cdn.zoomcharts-cloud.com/1/nightly/zoomcharts.js"></script>
<div id="demo"></div>
CSS
CSS
//No CSS for this example
JavaScript
JavaScript
pc = new PieChart({
theme: PieChart.themes.bevel,
container: document.getElementById("demo"),
data: { url: "/dvsl/data/pie-chart/browsers.json" },
info: {
contentsFunction: function (data) {
return "" + data.name + " " + data.value + " visits";
}
},
slice: {
styleFunction: function (slice, data) {
var name = data.name;
if (slice.percent >= 10)
percents = slice.percent.toFixed(0) + "%";
else if (slice.percent >= 1)
percents = slice.percent.toFixed(1) + "%";
else
percents = slice.percent.toFixed(2) + "%";
slice.insideLabel.text = percents;
slice.label.text = name;
}
},
interaction: { resizing: { enabled: false } },
pie: { innerRadius: 0.75 }
});