New to Kendo UI for jQuery? Start a free 30-day trial
Create Stacked and Grouped Series Bound to Remote Data in Charts
Environment
| Product | Kendo UI Grid for jQuery |
| Version | 2025.2.520 |
Description
How can I create Stacked and Grouped Chart series that are grouped to remote data?
Solution
To implement this scenario:
- Assign an unique Group ID value to each Gender / Age Group combination.
- Set the stack name for each series to match the Gender field in the
dataBoundevent.
To see the same scenario for inline data, refer to the Bar Charts / Stacked and grouped bars demo.
The following example demonstrates how to implement the steps previously described.
<div id="chart"></div>
<script>
$("#chart").kendoChart({
dataSource: {
transport: {
read: {
url: "https://runner.telerik.io/fullscreen/NwWpHzwQ.json",
}
},
group: {
field: "groupId",
dir: "asc"
}
},
series: [{
type: "column",
field: "num",
categoryField: "year"
}],
seriesColors: ["#cd1533", "#d43851", "#dc5c71", "#009bd7", "#26aadd", "#93d4ed" ],
dataBound: function(e) {
var series = e.sender.options.series;
for (var i = 0; i < series.length; i++) {
series[i].stack = series[i].data[0].gender;
}
}
});
</script>