Demo of exploded property - CanvasJS

Demo of exploded property - CanvasJS

HTML

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer",
{
	title:{
		text: "Demo of exploded property"
	},
	legend: {
		itemmouseover: function(e){
	          if(typeof e.dataPoint.exploded !== 'undefined' && e.dataPoint.exploded === true)
	       	 	e.dataPoint.exploded = false;
	       	 else
	       	 	e.dataPoint.exploded = true;
	       	 e.chart.render();
	       },
	       itemmouseout: function(e) {
	       	 if(typeof e.dataPoint.exploded !== 'undefined' && e.dataPoint.exploded === true)
	       	 	e.dataPoint.exploded = false;
	       	 e.chart.render();
	       }
	},
	data: [
	{
		type: "pie",
		showInLegend: true,
		dataPoints: [
			{  y: 4181563, indexLabel: " First" },
			{  y: 2175498, indexLabel: "Second" },
			{  y: 3125844, indexLabel: "Third" }
		]
	}
	]
});
chart.render();