Expand a Clicked Pie Chart Segment
Environment
| Product | Progress® Kendo UI® Chart for jQuery |
| Operating System | Windows 10 64bit |
| Visual Studio Version | Visual Studio 2017 |
| Preferred Language | JavaScript |
Description
How can I improve the visualization of the data illustrated in the Pie Chart by expanding a segment that was clicked by the user?
Solution
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>