Create Stacked and Grouped Series Bound to Remote Data

To create Stacked and Grouped Chart series that are grouped to remote data:

  1. Assign an unique Group ID value to each Gender / Age Group combination.
  2. Set the stack name for each series to match the Gender field in the dataBound event.

To see the same scenario for inline data, refer to the Bar Charts / Stacked and grouped bars demo.

The example below demonstrates how to implement the steps previously described.

Example
    <div id="chart"></div>
    <script>
        var dataUrl = "https://www.mocky.io/v2/5bfc002c3100006f0039bbff";

        $("#chart").kendoChart({
            dataSource: {
                transport: {
                    read: {
                    url: dataUrl,
                    }
                },
                group: {
                    field: "groupId",
                    dir: "asc"
                }
            },
            series: [{
                type: "column",
                field: "value",
                categoryField: "year"
            }],
            seriesColors: ["#cd1533", "#d43851", "#dc5c71", "#e47f8f", "#eba1ad",
                           "#009bd7", "#26aadd", "#4db9e3", "#73c8e9", "#99d7ef"],
            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>

See Also

For more runnable examples on Kendo UI Charts, browse the How To documentation folder.

In this article
Not finding the help you need? Improve this article