New to Kendo UI for jQuery? Start a free 30-day trial
Aggregate Pie Chart Data
Updated on Sep 8, 2026
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 aggregate Pie Chart data and override the sort order of the Chart categories?
Solution
The following example demonstrates how to achieve this behavior by using the dataSource aggregates.
<div id="piechart"></div>
<script>
var data = [
{
"source": "Hydro",
"percentage": 20,
},
{
"source": "Hydro",
"percentage": 20
},
{
"source": "Solar",
"percentage": 10
},
{
"source": "Nuclear",
"percentage": 30
}
];
var dataSource = new kendo.data.DataSource({
data: data,
group: {field: "source", aggregates: [{
field: "percentage", aggregate: "sum"
}]}
});
dataSource.read();
$("#piechart").kendoChart({
title: {
text: "Population by State"
},
legend: {
position: "bottom"
},
dataSource: getChartData(),
series: [{
type: "pie",
field: "percentage",
categoryField: "source",
aggregate: "sum"
}],
tooltip: {
visible: true,
template: "${ category } - #:value# (#:percentage#%)"
}
});
function getChartData() {
var chartData = [];
var view = dataSource.view();
for(var idx = 0; idx < view.length; idx++) {
chartData.push({
source: view[idx].value,
percentage: view[idx].aggregates.percentage.sum
});
}
return chartData;
}
</script>