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

Stacked Series

Since 2014 Q3 the ASP.NET AJAX Chart series supporting the Stacked Series functionality are:

  • Bar
  • Column
  • Line
  • Area
  • Radar-Line
  • Radar-Area
  • Radar-Column

You can enable the Stack feature of the supported RadHtmlChart Series by setting the Stacked property to true. This can be applied only to the first series, the rest will automatically inherit the setting.

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

Optionally, you can change the type of the stacking by setting the StackType property to Normal for default view or Stack100 for 100% stacked series.

In the Stacked 100% Series demo you can examine how the charts here will look like when the Stack100 type is set.

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

<%@ 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-containers">
        <div class="demo-container size-thin">
            <telerik:RadHtmlChart runat="server" ID="BarChart" Height="250px" Width="300px" Transitions="false" Skin="Silk">
                <PlotArea>
                    <Series>
                        <telerik:BarSeries DataFieldY="Value1" Stacked="true">
                            <LabelsAppearance Visible="false"></LabelsAppearance>
                        </telerik:BarSeries>
                        <telerik:BarSeries DataFieldY="Value2">
                            <LabelsAppearance Visible="false"></LabelsAppearance>
                        </telerik:BarSeries>
                    </Series>
                    <XAxis DataLabelsField="Item"></XAxis>
                </PlotArea>
                <ChartTitle Text="Stacked Bar Series"></ChartTitle>
            </telerik:RadHtmlChart>
        </div>

        <div class="demo-container size-thin">
            <telerik:RadHtmlChart runat="server" ID="ColumnChart" Height="250px" Width="300px" Transitions="false" Skin="Silk">
                <PlotArea>
                    <Series>
                        <telerik:ColumnSeries DataFieldY="Value1" Stacked="true">
                            <LabelsAppearance Visible="false"></LabelsAppearance>
                        </telerik:ColumnSeries>
                        <telerik:ColumnSeries DataFieldY="Value2">
                            <LabelsAppearance Visible="false"></LabelsAppearance>
                        </telerik:ColumnSeries>
                    </Series>
                    <XAxis DataLabelsField="Item"></XAxis>
                </PlotArea>
                <ChartTitle Text="Stacked Column Series"></ChartTitle>
            </telerik:RadHtmlChart>
        </div>

        <div class="demo-container size-thin">
            <telerik:RadHtmlChart runat="server" ID="LineChart" Height="250px" Width="300px" Transitions="false" Skin="Silk">
                <PlotArea>
                    <Series>
                        <telerik:LineSeries DataFieldY="Value1" StackType="Normal" Stacked="true">
                            <LabelsAppearance Visible="false"></LabelsAppearance>
                        </telerik:LineSeries>
                        <telerik:LineSeries DataFieldY="Value2">
                            <LabelsAppearance Visible="false"></LabelsAppearance>
                        </telerik:LineSeries>
                    </Series>
                    <XAxis DataLabelsField="Item"></XAxis>
                </PlotArea>
                <ChartTitle Text="Stacked Line Series"></ChartTitle>
            </telerik:RadHtmlChart>
        </div>

        <div class="demo-container size-thin">
            <telerik:RadHtmlChart runat="server" ID="AreaChart" Height="250px" Width="300px" Transitions="false" Skin="Silk">
                <PlotArea>
                    <Series>
                        <telerik:AreaSeries DataFieldY="Value1" StackType="Normal" Stacked="true">
                            <LabelsAppearance Visible="false"></LabelsAppearance>
                        </telerik:AreaSeries>
                        <telerik:AreaSeries DataFieldY="Value2">
                            <LabelsAppearance Visible="false"></LabelsAppearance>
                        </telerik:AreaSeries>
                    </Series>
                    <XAxis DataLabelsField="Item"></XAxis>
                </PlotArea>
                <ChartTitle Text="Stacked Area Series"></ChartTitle>
            </telerik:RadHtmlChart>
        </div>

        <div class="demo-container size-thin">
            <telerik:RadHtmlChart runat="server" ID="RadarAreaChart"  Height="250px" Width="300px" Transitions="false" Skin="Silk">
                <PlotArea>
                    <Series>
                        <telerik:RadarAreaSeries DataFieldY="Value1" StackType="Normal" Stacked="true">
                            <LabelsAppearance Visible="false"></LabelsAppearance>
                        </telerik:RadarAreaSeries>
                        <telerik:RadarAreaSeries DataFieldY="Value2">
                            <LabelsAppearance Visible="false"></LabelsAppearance>
                        </telerik:RadarAreaSeries>
                    </Series>
                    <YAxis Visible="false">
                        <MajorGridLines Color="#EFEFEF" Width="1" />
                        <MinorGridLines Visible="false" />
                    </YAxis>
                    <XAxis DataLabelsField="Item"></XAxis>
                </PlotArea>
                <ChartTitle Text="Stacked Radar-Area Series"></ChartTitle>
            </telerik:RadHtmlChart>
        </div>

        <div class="demo-container size-thin">
            <telerik:RadHtmlChart runat="server" ID="RadarColumnChart" Height="250px" Width="300px" Transitions="false" Skin="Silk">
                <PlotArea>
                    <Series>
                        <telerik:RadarColumnSeries DataFieldY="Value1" Stacked="true">
                            <LabelsAppearance Visible="false"></LabelsAppearance>
                        </telerik:RadarColumnSeries>
                        <telerik:RadarColumnSeries DataFieldY="Value2">
                            <LabelsAppearance Visible="false"></LabelsAppearance>
                        </telerik:RadarColumnSeries>
                    </Series>
                    <YAxis Visible="false">
                        <MajorGridLines Color="#EFEFEF" Width="1" />
                        <MinorGridLines Visible="false" />
                    </YAxis>
                    <XAxis DataLabelsField="Item">
                    </XAxis>
                </PlotArea>
                <ChartTitle Text="Stacked Radar-Column Series"></ChartTitle>
            </telerik:RadHtmlChart>
        </div>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance