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

Waterfall Chart

  • Demo Configurator
Spin UpSpin Down

This example demonstrates an ASP.NET AJAX Chart control, configured as a Waterfall Chart by using the WaterfallSeries series type. It helps in understanding the cumulative effect of sequentially introduced positive or negative values, displayed as vertical 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="Cash flow">
                <Appearance Align="Center" Position="Top"></Appearance>
            </ChartTitle>
            <Legend>
                <Appearance Position="Bottom"></Appearance>
            </Legend>
            <PlotArea>
                <XAxis AxisCrossingValue="0">
                    <MinorGridLines Visible="false" />
                    <Items>
                        <telerik:AxisItem LabelText="Beginning Balance"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="Jan"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="Feb"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="Mar"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="Q1"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="Apr"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="May"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="Jun"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="Q2"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="Ending Balance"></telerik:AxisItem>
                    </Items>
                </XAxis>
                <YAxis>
                    <LabelsAppearance DataFormatString="C0"></LabelsAppearance>
                    <MinorGridLines Visible="false" />
                </YAxis>
                <Series>
                    <telerik:WaterfallSeries>
                        <TooltipsAppearance Visible="false"></TooltipsAppearance>
                        <LabelsAppearance Visible="true" Position="Center" DataFormatString="C0" />
                        <SeriesItems>
                            <telerik:WaterfallSeriesItem Y="40000" />
                            <telerik:WaterfallSeriesItem Y="15000" />
                            <telerik:WaterfallSeriesItem Y="14000" />
                            <telerik:WaterfallSeriesItem Y="-5000" />
                            <telerik:WaterfallSeriesItem Summary="RunningTotal" />
                            <telerik:WaterfallSeriesItem Y="-20000" />
                            <telerik:WaterfallSeriesItem Y="-8000" />
                            <telerik:WaterfallSeriesItem Y="10000" />
                            <telerik:WaterfallSeriesItem Summary="RunningTotal" />
                            <telerik:WaterfallSeriesItem Summary="Total" />
                        </SeriesItems>
                    </telerik:WaterfallSeries>
                </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