Back

Scrolling gesture on PieChart

Pie chart with 'scrolling' gesture enabled. When the user "scrolls" in a circular motion (like a rotary phone dial), the chart will slowly drill down and reveal the contents of the 'Others' slice. This and similar gestures can be configured in 'interaction' object.

Documentation Open in JSFiddle
Start Free Trial Purchase

HTML

HTML 
<script src="https://cdn.zoomcharts-cloud.com/1/nightly/zoomcharts.js"></script>

<div>
    <div id="demo" style="float:right; width: 100%"></div>
</div>
<div style="clear:both;"></div>

CSS

CSS 
//No CSS for this example

JavaScript

JavaScript 


    var chart = new PieChart({
        container: document.getElementById("demo"),
        area: { height: null },
        data: { url: "/dvsl/data/pie-chart/browsers.json" },
        interaction: {
            others: { maxOthersFraction: 0.15 },
            scrolling: { enabled: true },
            selection: { swipe: false }
        }
    });

Data

Data 
//Data too large to output
Download Data