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

100% Stacked Series

This ASP.NET AJAX Chart example covers how you can create 100% stacked chart. This feature is available in all Series that support the Stacked Series functionality.

To create a chart with 100% stacked series you should set the StackType property of the Series to Stack100 and the Stacked property to true. This can be done 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 >
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Title="" Language="C#"  AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.HtmlChart.Stacked100.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" StackType="Stack100">
                            <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" StackType="Stack100">
                            <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" Stacked="true" StackType="Stack100">
                            <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" Stacked="true" StackType="Stack100">
                            <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" Stacked="true" StackType="Stack100">
                            <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" StackType="Stack100">
                            <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