Explode Clicked Pie Chart Segment
To improve the visualization of the data illustrated in a Kendo UI Pie Chart, you might need to explode a segment that was clicked by the user.
The following example demonstrates how to achieve this behavior.
<div id="chart"></div>
<script>
var data = [{
"source": "Hydro",
"percentage": 22,
"explode": true
}, {
"source": "Solar",
"percentage": 2
}, {
"source": "Nuclear",
"percentage": 49
}, {
"source": "Wind",
"percentage": 27
}];
$("#chart").kendoChart({
dataSource: {
transport: {
read: function(e) {
e.success(data);
}
}
},
series: [{
type: "pie",
field: "percentage",
categoryField: "source",
explodeField: "explode",
labels: {
visible: true,
background: "transparent",
template: "#= category #: \n #= value#%"
}
}],
seriesClick: function(e){
$.each(e.sender.dataSource.view(), function() {
// Clean up exploded state
this.explode = false;
});
// Disable animations
e.sender.options.transitions = false;
// Explode the current slice
e.dataItem.explode = true;
e.sender.refresh();
}
});
</script>