Waterfall Chart

The Blazor Waterfall Chart is a form of data visualization that helps users understand the cumulative effect of sequentially introduced positive or negative values. These values can be either time-based or category-based.

A Waterfall Chart is useful for different types of quantitative analysis related to inventory, cash flows, performance, etc.

This article assumes you are familiar with the chart basics and data binding.

Creating a Waterfall Chart

1. Add a ChartSeries tag to the ChartSeriesItems collection.
2. Set its Type parameter to ChartSeriesType.Waterfall or ChartSeriesType.HorizontalWaterfall.
3. Provide a data collection to its Data parameter.
4. (optional) Set the SummaryField to add a summary column. Summary columns can be two types:
   • runningTotal—This column shows the cumulative sum of all items since the last running total point.
   • total—This column displays the sum of all preceding items.

To define a data item as a running total or total, include a corresponding data point in the data source and set the SummaryField value as either runningTotal or total.

A Waterfall Chart that shows cash flow

<TelerikChart Width="100%"
              Height="400px">
    <ChartTitle Text="Cash Flow"></ChartTitle>
    <ChartSeriesItems>
        <ChartSeries Type="ChartSeriesType.Waterfall"
                     Data="@ChartData"
                     ColorField="@nameof(CashFlowData.Color)"
                     Field="@nameof(CashFlowData.Amount)"
                     CategoryField="@nameof(CashFlowData.Period)"
                     SummaryField="@nameof(CashFlowData.Summary)">
                     <ChartSeriesLabels Visible="true"
                                        Format="C0"
                                        Position="@ChartSeriesLabelsPosition.InsideEnd" />
        </ChartSeries>
    </ChartSeriesItems>
    <ChartValueAxes>
        <ChartValueAxis Type="ChartValueAxisType.Numeric">
            <ChartValueAxisLabels Format="C0" />
        </ChartValueAxis>
    </ChartValueAxes>
</TelerikChart>

@code {
    private CashFlowData[] ChartData { get; set; }

    protected override Task OnInitializedAsync()
    {
        ChartData = GetWaterfallData();

        return base.OnInitializedAsync();
    }

    private CashFlowData[] GetWaterfallData()
    {
        return new CashFlowData[] {
            new CashFlowData
            {
                Period = "Beginning\nBalance",
                Amount = 50000,
                Color = "green"
            },
            new CashFlowData
            {
                Period = "Jan",
                Amount = 17000,
                Color = "green"
            },
            new CashFlowData
            {
                Period = "Feb",
                Amount = 14000,
                Color = "green"
            },
            new CashFlowData
            {
                Period = "Mar",
                Amount = -12000,
                Color = "red"
            },
            new CashFlowData
            {
                Period = "Q1",
                Summary = "runningTotal",
                Color = "gray"
            },
            new CashFlowData
            {
                Period = "Apr",
                Amount = -22000,
                Color = "red"
            },
            new CashFlowData
            {
                Period = "May",
                Amount = -18000,
                Color = "red"
            },
            new CashFlowData
            {
                Period = "Jun",
                Amount = 10000,
                Color = "green"
            },
            new CashFlowData
            {
                Period = "Q2",
                Summary = "runningTotal",
                Color = "gray"
            },
            new CashFlowData
            {
                Period = "Ending\nBalance",
                Summary = "total",
                Color = "#555"
            }
        };
    }

    private class CashFlowData
    {
        public string Period { get; set; }
        public decimal? Amount { get; set; }
        public string Summary { get; set; }
        public string Color { get; set; }
    }
}

Waterfall Chart Specific Appearance Settings

The Waterfall Chart provides dedicated properties that allow you to customize its appearance by controlling its orientation, labels, and color.

Orientation

Waterfall Charts fall into two types:

• Traditional Waterfall Charts—They display changes vertically. To use this Waterfall Chart, set the series type to ChartSeriesType.Waterfall.
• Horizontal Waterfall Charts—They present changes horizontally. To use this type of Waterfall Chart, set the series type to ChartSeriesType.HorizontalWaterfall.

Labels

Each data item is decorated with a text label. To control and customize these labels, use the <ChartCategoryAxisLabels /> tag and its children, which accept the following parameters:

• Visible—When set to false, this parameter hides all labels.
• Step—Renders every n-th label, where n is the value (double number) passed to the parameter.
• Skip—Skips the first n number of labels, where n is the value (double number) passed to the parameter.
• Angle—Rotates the labels with the desired angle by n degrees, where n is the value passed to the parameter. It can take positive and negative numbers. To set this parameter, use the < ChartCategoryAxisLabelsRotation /> child tag.

Color

The color of a series is controlled through the Color property that can take any valid CSS color (for example, #abcdef, #f00, or blue).

Color Field

Bar and Column charts can take the color of the series item from the ColorField of the data source. You can pass a valid CSS color (for example, #abcdef, #f00, or blue).

Colors per series item

<TelerikChart>
    <ChartSeriesItems>
        <ChartSeries Type="ChartSeriesType.Bar" Data="@theData" ColorField="@nameof(MyChartDataModel.Color)"
                            Field="@nameof(MyChartDataModel.ItemValue)" CategoryField="@nameof(MyChartDataModel.Category)" />
    </ChartSeriesItems>

    <ChartTitle Text="Revenue per product" />

    <ChartLegend Position="ChartLegendPosition.Right" />
</TelerikChart>

@code {
    public class MyChartDataModel
    {
        public string Category { get; set; }
        public double ItemValue { get; set; }
        public string Color { get; set; }
    }

    public List<MyChartDataModel> theData = new List<MyChartDataModel>
    {
        new MyChartDataModel
        {
            Category = "Product 1",
            ItemValue = 2,
            Color = "red"
        },
        new MyChartDataModel
        {
            Category = "Product 2",
            ItemValue = 3,
            Color = "#00ff00"
        },
        new MyChartDataModel
        {
            Category = "Product 3",
            ItemValue = 4,
            Color = "#00f"
        }
    };
}

Gap and Spacing

You can control the distance between the categories that cluster a data point from each series. To do this, use the Gap property of the series. It is the distance between categories expressed as a percentage of the bar width.

To set the distance between the bars of different series in the same category, use the Spacing property. It is the space between the series items in one series category as a proportion of the width of a single series item.

To create overlap, set negative values.

You can configure the values of Gap and Spacing for the whole chart in the first series and they are applied for all categories and series items.

Customize Chart Elements - Nested Tags Settings

When configuring nested properties and child elements in your chart, the inner tags will contain their parent tag name and add specifics to its end. In general the structure of such nested tags will be <Chart*Category**Specifics*> where the Category can be one of the following:

• CategoryAxis
• ChartArea
• Legend
• PlotArea
• SeriesItems
• Title
• Tooltip
• ValueAxis
• XAxes
• YAxes
• and others

To customize the chart, look for nested tags and their properties - the inner tags will contain their parent tag name and add specifics to its end. For example, the ChartSeries tag has a ChartSeriesLabels tag that exposes configuration options and more child tags.

An example of this is the rotation the Labels of a categorical chart. You can use the

ChartCategoryAxes > ChartCategoryAxis > ChartCategoryAxisLabels > ChartCategoryAxisLabelsRotation tag

and set the Angle property to the desired value in degrees (they might be negative or positive numbers). By using similar approach you can take control over ChartCategoryAxisLabelsMargin (add margin for top, bottom, left and right), ChartCategoryAxisLabelsPadding (add padding for top, bottom, left and right) and others.

This approach is not limited only to the Labels - it can be used with all tags that are applicable for the chart type, for example the Chart Title ChartTitle > ChartTitleMargin.

See Also

• Live Demo: Waterfall Chart