Back

Left click behavior: expand, select, or toggle

In PieChart, you can choose the default right click action under 'navigation' -> 'mode': 'select' will make a new selection, 'toggle' will add or remove the clicked slice to the existing selection, and 'drilldown' will reveal the subvalues of the clicked slice.

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: 60%">
	</div>
    <div style="float:left; width: 30%">
        <label for="d" style="display: block;margin:5px"><input style="margin-right:5px" type="radio" id="d" name="m" value="drilldown" checked="checked">click to expand slice</label>
        <label for="s" style="display: block;margin:5px"><input style="margin-right:5px" type="radio" id="s" name="m" value="select">select</label>
        <label for="t" style="display: block;margin:5px"><input style="margin-right:5px" type="radio" id="t" name="m" value="toggle">toggle</label>
    </div>
</div>
<div style="clear:both;"></div>

CSS

CSS 
//No CSS for this example

JavaScript

JavaScript 

	var doc = document.getElementById("demo");
    var chart = new PieChart({
        container : doc,
        area: { height: null },
        data: { url: "/dvsl/data/pie-chart/browsers.json" }
    });
	
	//selection mode
    document.getElementById("s").addEventListener("click", function(){
		chart.setPie("", 0).selection([]);
		chart.updateSettings({interaction:{mode:"select"}});
	});
	
	//toggle mode
    document.getElementById("t").addEventListener("click", function(){
		chart.setPie("", 0).selection([]);
		chart.updateSettings({interaction:{mode:"toggle"}});
	});
	
	//click to expand slice mode
    document.getElementById("d").addEventListener("click", function(){
		chart.setPie("", 0).selection([]);
		chart.updateSettings({interaction:{mode:"drilldown"}});
	});

Data

Data 
//Data too large to output
Download Data