New to Telerik UI for ASP.NET Core? Download free 30-day trial

100% Stacked and Grouped Bars

The Kendo UI Bar Chart supports 100% stacking that could be grouped in the same time. This implementation provides the opportunity to represent 100% stacked Bar Charts divided by groups of categories.

You can enable the 100% stack feature by setting the first ChartStackType.Stack100 argument of the Series -> Column -> Stack() method, i.e.

series.Column(new int[] { 1100941, 1139797, 1172929, 1184435, 1184654 }).Name("0-19").Stack(ChartStackType.Stack100, "Female");

The following implementation demonstrates the code needed for setting the 100% Stacked and Grouped Bar Chart:

  @(Html.Kendo().Chart()
        .Name("chart")
        .Title("World population by age group and sex")
        .Legend(legend => legend
            .Visible(false)
        )
        .Series(series => {
            series
                .Column(new int[] { 854622, 925844, 984930, 1044982, 1100941, 1139797, 1172929, 1184435, 1184654 })
                .Name("0-19").Stack(ChartStackType.Stack100, "Female");

            series
                .Column(new int[] { 490550, 555695, 627763, 718568, 810169, 883051, 942151, 1001395, 1058439 })
                .Name("20-39").Stack(ChartStackType.Stack100, "Female");

            series
                .Column(new int[] { 379788, 411217, 447201, 484739, 395533, 435485, 499861, 569114, 655066 })
                .Name("40-64").Stack(ChartStackType.Stack100, "Female");

            series
                .Column(new int[] { 97894, 113287, 128808, 137459, 152171, 170262, 191015, 210767, 226956 })
                .Name("65-79").Stack(ChartStackType.Stack100, "Female");

            series
                .Column(new int[] { 16358, 18576, 24586, 30352, 36724, 42939, 46413, 54984, 66029 })
                .Name("80+").Stack(ChartStackType.Stack100, "Female");

            series
                .Column(new int[] { 900268, 972205, 1031421, 1094547, 1155600, 1202766, 1244870, 1263637, 1268165 })
                .Name("0-19").Stack(ChartStackType.Stack100, "Male");

            series
                .Column(new int[] { 509133, 579487, 655494, 749511, 844496, 916479, 973694, 1036548, 1099507 })
                .Name("20-39").Stack(ChartStackType.Stack100, "Male");

            series
                .Column(new int[] { 364179, 401396, 440844, 479798, 390590, 430666, 495030, 564169, 646563 })
                .Name("40-64").Stack(ChartStackType.Stack100, "Male");

            series
                .Column(new int[] { 74208, 86516, 98956, 107352, 120614, 138868, 158387, 177078, 192156 })
                .Name("65-79").Stack(ChartStackType.Stack100, "Male");

            series
                .Column(new int[] { 9187, 10752, 13007, 15983, 19442, 23020, 25868, 31462, 39223 })
                .Name("80+").Stack(ChartStackType.Stack100, "Male");
        })
        .SeriesColors(
            "#cd1533", "#d43851", "#dc5c71", "#e47f8f", "#eba1ad",
            "#009bd7", "#26aadd", "#4db9e3", "#73c8e9", "#99d7ef"
        )
        .CategoryAxis(axis => axis
            .Categories("1970", "1975", "1980", "1985", "1990", "1995", "2000", "2005", "2010")
            .MajorGridLines(lines => lines.Visible(false))
        )
        .ValueAxis(axis => axis
            .Numeric()
            .Line(line => line.Visible(false))
        )
        .Tooltip(tooltip => tooltip
            .Visible(true)
            .Template("#= series.stack.group #s, age #= series.name #")
        )
    ) 
@addTagHelper *, Kendo.Mvc
@{
    var seriesColors = new string[] { "#cd1533", "#d43851", "#dc5c71", "#e47f8f", "#eba1ad", "#009bd7", "#26aadd", "#4db9e3", "#73c8e9", "#99d7ef" };
    var categories = new string[] { "1970", "1975", "1980", "1985", "1990", "1995", "2000", "2005", "2010" };
}
    <kendo-chart name="chart"
                 series-colors="seriesColors">
        <category-axis>
            <category-axis-item categories="categories">
                <major-grid-lines visible="false" />
            </category-axis-item>
        </category-axis>
        <series>
            <series-item type="ChartSeriesType.Column"
                         name="0-19"
                         data="new int[] { 854622, 925844, 984930, 1044982, 1100941, 1139797, 1172929, 1184435, 1184654 }">
                <stack type="ChartStackType.Stack100" group="Female" />
            </series-item>
            <series-item type="ChartSeriesType.Column"
                         name="20-39"
                         data="new int[] { 490550, 555695, 627763, 718568, 810169, 883051, 942151, 1001395, 1058439 }">
                <stack type="ChartStackType.Stack100" group="Female" />
            </series-item>
            <series-item type="ChartSeriesType.Column"
                         name="40-64"
                         data="new int[] { 379788, 411217, 447201, 484739, 395533, 435485, 499861, 569114, 655066 }">
                <stack type="ChartStackType.Stack100" group="Female" />
            </series-item>
            <series-item type="ChartSeriesType.Column"
                         name="65-79"
                         data="new int[] { 97894, 113287, 128808, 137459, 152171, 170262, 191015, 210767, 226956 }">
                <stack type="ChartStackType.Stack100" group="Female" />
            </series-item>
            <series-item type="ChartSeriesType.Column"
                         name="80+"
                         data="new int[] { 16358, 18576, 24586, 30352, 36724, 42939, 46413, 54984, 66029 }">
                <stack type="ChartStackType.Stack100" group="Female" />
            </series-item>
            <series-item type="ChartSeriesType.Column"
                         name="0-19"
                         data="new int[] { 900268, 972205, 1031421, 1094547, 1155600, 1202766, 1244870, 1263637, 1268165 }">
                <stack type="ChartStackType.Stack100" group="Male" />
            </series-item>
            <series-item type="ChartSeriesType.Column"
                         name="20-39"
                         data="new int[] { 509133, 579487, 655494, 749511, 844496, 916479, 973694, 1036548, 1099507 }">
                <stack type="ChartStackType.Stack100" group="Male" />
            </series-item>
            <series-item type="ChartSeriesType.Column"
                         name="40-64"
                         data="new int[] { 364179, 401396, 440844, 479798, 390590, 430666, 495030, 564169, 646563 }">
                <stack type="ChartStackType.Stack100" group="Male" />
            </series-item>
            <series-item type="ChartSeriesType.Column"
                         name="65-79"
                         data="new int[] { 74208, 86516, 98956, 107352, 120614, 138868, 158387, 177078, 192156 }">
                <stack type="ChartStackType.Stack100" group="Male" />
            </series-item>
            <series-item type="ChartSeriesType.Column"
                         name="80+"
                         data="new int[] { 9187, 10752, 13007, 15983, 19442, 23020, 25868, 31462, 39223 }">
                <stack type="ChartStackType.Stack100" group="Male" />
            </series-item>
        </series>
        <value-axis>
            <value-axis-item name="" type="numeric">
                <labels template="#= kendo.format('{0:N0}', value / 1000) # M">
                </labels>
                <line visible="false" />
            </value-axis-item>
        </value-axis>
        <chart-legend visible="false">
        </chart-legend>
        <chart-title text="World population by age group and sex">
        </chart-title>
        <tooltip template="#= series.stack.group #s, age #= series.name #" visible="true">
        </tooltip>
    </kendo-chart>

Overview of the 100% Stacked and Grouped Bars:

Stacked and Grouped Bars

See Also

In this article