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

Stacked Groups

  • Demo Configurator

Stack Type

Stacked Column, Bar and Radar-Column series in the ASP.NET AJAX Chart can be clustered in groups since the Q3 2013 release.

Series that will be stacked in a separate group must have the same group name set in their GroupName property. If the property is left blank, all series will be placed in one default stack. Setting the GroupName property of any series automatically sets the Stacked property of the first series to true, so it is not required to be explicitly set.

< telerik:RadHtmlChart runat = "server" ID = "RadBarChart" Width = "300px" Height = "250px" >
     < PlotArea >
          < Series >
               < telerik:BarSeries DataFieldY = "Value1" GroupName = "Group1" >
               </ telerik:BarSeries >
               < telerik:BarSeries DataFieldY = "Value2" GroupName = "Group1" >
               </ telerik:BarSeries >
          </ Series >
     </ PlotArea >
</ telerik:RadHtmlChart >

You can further examine the stacking of Series in the Stacked Series example.

Optionally, you can also use the StackType property to change the stack type from the default (Normal) type to Stack100, which will lead you to a 100% stacked chart. More about the Stack100 type is explained in the Stacked 100% Series demo.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Title="" Language="C#"  AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.HtmlChart.StackedGroups.DefaultCS" %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-wide">
        <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Skin="Silk">
            <PlotArea>
                <Series>
                    <telerik:ColumnSeries Name="Germany Gold" GroupName="Germany">
                        <Appearance>
                            <FillStyle BackgroundColor="#DDD9C3" />
                        </Appearance>
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="13" />
                            <telerik:CategorySeriesItem Y="12" />
                            <telerik:CategorySeriesItem Y="16" />
                        </SeriesItems>
                        <TooltipsAppearance ClientTemplate="#= series.name# medals: #= dataItem.value#" />
                        <LabelsAppearance Visible="false"></LabelsAppearance>
                    </telerik:ColumnSeries>
                    <telerik:ColumnSeries Name="Germany Silver" GroupName="Germany">
                        <Appearance>
                            <FillStyle BackgroundColor="#C4BD97" />
                        </Appearance>
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="17" />
                            <telerik:CategorySeriesItem Y="16" />
                            <telerik:CategorySeriesItem Y="10" />
                        </SeriesItems>
                        <TooltipsAppearance ClientTemplate="#= series.name# medals: #= dataItem.value#" />
                        <LabelsAppearance Visible="false"></LabelsAppearance>
                    </telerik:ColumnSeries>
                    <telerik:ColumnSeries Name="Germany Bronze" GroupName="Germany">
                        <Appearance>
                            <FillStyle BackgroundColor="#948A54" />
                        </Appearance>
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="26" />
                            <telerik:CategorySeriesItem Y="20" />
                            <telerik:CategorySeriesItem Y="15" />
                        </SeriesItems>
                        <TooltipsAppearance ClientTemplate="#= series.name# medals: #= dataItem.value#" Color="White" />
                        <LabelsAppearance Visible="false"></LabelsAppearance>
                    </telerik:ColumnSeries>
                    <telerik:ColumnSeries Name="United Kingdom Gold" GroupName="United Kingdom">
                        <Appearance>
                            <FillStyle BackgroundColor="#FCD5B5" />
                        </Appearance>
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="11" />
                            <telerik:CategorySeriesItem Y="9" />
                            <telerik:CategorySeriesItem Y="18" />
                        </SeriesItems>
                        <TooltipsAppearance ClientTemplate="#= series.name# medals: #= dataItem.value#" />
                        <LabelsAppearance Visible="false"></LabelsAppearance>
                    </telerik:ColumnSeries>
                    <telerik:ColumnSeries Name="United Kingdom Silver" GroupName="United Kingdom">
                        <Appearance>
                            <FillStyle BackgroundColor="#FAC090" />
                        </Appearance>
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="10" />
                            <telerik:CategorySeriesItem Y="9" />
                            <telerik:CategorySeriesItem Y="13" />
                        </SeriesItems>
                        <TooltipsAppearance ClientTemplate="#= series.name# medals: #= dataItem.value#" />
                        <LabelsAppearance Visible="false"></LabelsAppearance>
                    </telerik:ColumnSeries>
                    <telerik:ColumnSeries Name="United Kingdom Bronze" GroupName="United Kingdom">
                        <Appearance>
                            <FillStyle BackgroundColor="#E46C0A" />
                        </Appearance>
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="7" />
                            <telerik:CategorySeriesItem Y="12" />
                            <telerik:CategorySeriesItem Y="15" />
                        </SeriesItems>
                        <TooltipsAppearance ClientTemplate="#= series.name# medals: #= dataItem.value#" Color="White" />
                        <LabelsAppearance Visible="false"></LabelsAppearance>
                    </telerik:ColumnSeries>
                </Series>
                <YAxis>
                    <TitleAppearance Text="Number of Medals" />
                </YAxis>
                <XAxis>
                    <LabelsAppearance DataFormatString="Year {0}" />
                    <Items>
                        <telerik:AxisItem LabelText="2000" />
                        <telerik:AxisItem LabelText="2004" />
                        <telerik:AxisItem LabelText="2008" />
                    </Items>
                </XAxis>
            </PlotArea>
            <ChartTitle Text="Olympic Medals Per Country Over The Years">
            </ChartTitle>
            <Legend>
                <Appearance Position="Bottom">
                    <TextStyle Margin="20 0 0 0" />
                </Appearance>
            </Legend>
        </telerik:RadHtmlChart>
    </div>

    <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="ConfiguratorPanel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadHtmlChart1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="ConfiguratorPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Silk"></telerik:RadAjaxLoadingPanel>

    <qsf:ConfiguratorPanel runat="server" ID="ConfiguratorPanel1">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Auto">
                    <qsf:RadioButtonList runat="server" ID="RadioButtonListStackType" Label="Stack Type" AutoPostBack="true">
                        <asp:ListItem Text="Normal" Selected="True"></asp:ListItem>
                        <asp:ListItem Text="Stack100"></asp:ListItem>
                    </qsf:RadioButtonList>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance