Back

Pie chart - donut, bevel theme, hierarchical structure

This pie chart was turned into donut chart by increasing the 'innerRadius' property. Custom functions were used to add a suffix ("visits") to the tooltips and display percentages in slices. Bevelled edges were applied using 'theme: PieChart.themes.bevel' string.

Documentation Open in JSFiddle
Start Free Trial Purchase

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 }
    });

Data

Data 
//Data too large to output
Download Data