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

Horizontal Waterfall Chart

  • Demo Configurator
Spin UpSpin Down

This example demonstrates a RadHtmlChart 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

  • DefaultVB.aspx
  • DefaultVB.aspx.vb
<%@ Page Language="vb" AutoEventWireup="true" CodeFile="DefaultVB.aspx.vb" Inherits="Telerik.Web.Examples.HtmlChart.ChartTypes.BarChart.DefaultVB" %>


<%@ 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 ID="ConfiguratorColumn1" runat="server" Size="Medium">
                    <qsf:ComboBox runat="server" ID="LabelsPosition" Width="100" AutoPostBack="true" Label="Labels Position">
                    </qsf:ComboBox>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" 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