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

    Horizontal Waterfall Chart

    AvailableReservedDamagedIn Stock0204060801001201401601802001253520180Product Stock
    • Demo Configurator

    This example demonstrates an ASP.NET AJAX Chart control, configured as a Horizontal Waterfall Chart by using the HorizontalWaterfallSeries series type. It helps in understanding the cumulative effect of sequentially introduced positive or negative values, displayed as horizontal bars.

    Related Resources

    • DefaultCS.aspx
    • DefaultCS.aspx.cs
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.HtmlChart.ChartTypes.BarChart.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="WaterfallChart" Height="400px" Width="800px" Skin="Silk">
                <ChartTitle Text="Product Stock">
                    <Appearance Align="Center" Position="Top"></Appearance>
                </ChartTitle>
                <PlotArea>
                    <XAxis AxisCrossingValue="4">
                        <MinorGridLines Visible="false" />
                        <Items>
                            <telerik:AxisItem LabelText="Available"></telerik:AxisItem>
                            <telerik:AxisItem LabelText="Reserved"></telerik:AxisItem>
                            <telerik:AxisItem LabelText="Damaged"></telerik:AxisItem>
                            <telerik:AxisItem LabelText="In Stock"></telerik:AxisItem>
                        </Items>
                    </XAxis>
                    <YAxis>
                        <LabelsAppearance></LabelsAppearance>
                        <MinorGridLines Visible="false" />
                    </YAxis>
                    <Series>
                        <telerik:HorizontalWaterfallSeries>
                            <TooltipsAppearance Visible="false"></TooltipsAppearance>
                            <LabelsAppearance Visible="true" Position="Center"/>
                            <SeriesItems>
                                <telerik:WaterfallSeriesItem Y="125" BackgroundColor="LimeGreen"/>
                                <telerik:WaterfallSeriesItem Y="35" BackgroundColor="PaleGoldenrod"/>
                                <telerik:WaterfallSeriesItem Y="20" BackgroundColor="Salmon"/>
                                <telerik:WaterfallSeriesItem Summary="RunningTotal" BackgroundColor="MediumTurquoise"/>
                            </SeriesItems>
                        </telerik:HorizontalWaterfallSeries>
                    </Series>
                </PlotArea>
            </telerik:RadHtmlChart>
        </div>
        <telerik:RadAjaxManager runat="server" ID="theAjaxMaanger">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="demoConfigurator">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="demoConfigurator" LoadingPanelID="RadAjaxLoadingPanel1" />
                        <telerik:AjaxUpdatedControl ControlID="WaterfallChart" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" Skin="Silk">
        </telerik:RadAjaxLoadingPanel>
        <qsf:ConfiguratorPanel ID="demoConfigurator" runat="server">
            <Views>
                <qsf:View>
                    <qsf:ConfiguratorColumn runat="server" Size="Medium">
                        <qsf:ComboBox runat="server" ID="LabelsPosition" Width="100" AutoPostBack="true" Label="Labels Position">
                        </qsf:ComboBox>
                    </qsf:ConfiguratorColumn>
                    <qsf:ConfiguratorColumn runat="server" Size="Narrow">
                        <qsf:NumericTextBox runat="server" ID="ChartGap" Value="1.5" AutoPostBack="true" Size="Narrow" Label="Gap"  MinValue="-1" MaxValue="5" IncrementSettings-Step="0.2"></qsf:NumericTextBox>
                    </qsf:ConfiguratorColumn>
                </qsf:View>
            </Views>
        </qsf:ConfiguratorPanel>
        </form>
    </body>
    </html>

    Support & Learning Resources

    Find Assistance