|
| 1 | +--- |
| 2 | +title: Waterfall |
| 3 | +page_title: Chart - Waterfall |
| 4 | +description: The Telerik UI for Blazor Waterfall Chart illustrates the cumulative effects of positive or negative values from a starting point. Its purpose is to enhance comprehension of how an initial amount is impacted by subsequently added positive or negative values. |
| 5 | +slug: components/chart/types/waterfall |
| 6 | +tags: telerik,blazor,chart,waterfall |
| 7 | +published: True |
| 8 | +position: 0 |
| 9 | +--- |
| 10 | + |
| 11 | +# Waterfall Chart |
| 12 | + |
| 13 | +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. |
| 14 | + |
| 15 | +A Waterfall Chart is useful for different types of quantitative analysis related to inventory, cash flows, performance, etc. |
| 16 | + |
| 17 | + |
| 18 | + |
| 19 | +@[template](/_contentTemplates/chart/link-to-basics.md#understand-basics-and-databinding-first) |
| 20 | + |
| 21 | +## Creating a Waterfall Chart |
| 22 | + |
| 23 | +1. Add a `ChartSeries` tag to the `ChartSeriesItems` collection. |
| 24 | +2. Set its `Type` parameter to `ChartSeriesType.Waterfall` or `ChartSeriesType.HorizontalWaterfall`. |
| 25 | +3. Provide a data collection to its `Data` parameter. |
| 26 | +4. (optional) Set the `SummaryField` to add a summary column. Summary columns can be two types: |
| 27 | + * `runningTotal`—This column shows the cumulative sum of all items since the last running total point. |
| 28 | + * `total`—This column displays the sum of all preceding items. |
| 29 | + |
| 30 | +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`. |
| 31 | + |
| 32 | +>caption A Waterfall Chart that shows cash flow |
| 33 | +
|
| 34 | +````CSHTML |
| 35 | +<TelerikChart Width="100%" |
| 36 | + Height="400px"> |
| 37 | + <ChartTitle Text="Cash Flow"></ChartTitle> |
| 38 | + <ChartSeriesItems> |
| 39 | + <ChartSeries Type="ChartSeriesType.Waterfall" |
| 40 | + Data="@ChartData" |
| 41 | + ColorField="@nameof(CashFlowData.Color)" |
| 42 | + Field="@nameof(CashFlowData.Amount)" |
| 43 | + CategoryField="@nameof(CashFlowData.Period)" |
| 44 | + SummaryField="@nameof(CashFlowData.Summary)"> |
| 45 | + <ChartSeriesLabels Visible="true" |
| 46 | + Format="C0" |
| 47 | + Position="@ChartSeriesLabelsPosition.InsideEnd" /> |
| 48 | + </ChartSeries> |
| 49 | + </ChartSeriesItems> |
| 50 | + <ChartValueAxes> |
| 51 | + <ChartValueAxis Type="ChartValueAxisType.Numeric"> |
| 52 | + <ChartValueAxisLabels Format="C0" /> |
| 53 | + </ChartValueAxis> |
| 54 | + </ChartValueAxes> |
| 55 | +</TelerikChart> |
| 56 | +
|
| 57 | +@code { |
| 58 | + private CashFlowData[] ChartData { get; set; } |
| 59 | +
|
| 60 | + protected override Task OnInitializedAsync() |
| 61 | + { |
| 62 | + ChartData = GetWaterfallData(); |
| 63 | +
|
| 64 | + return base.OnInitializedAsync(); |
| 65 | + } |
| 66 | +
|
| 67 | + private CashFlowData[] GetWaterfallData() |
| 68 | + { |
| 69 | + return new CashFlowData[] { |
| 70 | + new CashFlowData |
| 71 | + { |
| 72 | + Period = "Beginning\nBalance", |
| 73 | + Amount = 50000, |
| 74 | + Color = "green" |
| 75 | + }, |
| 76 | + new CashFlowData |
| 77 | + { |
| 78 | + Period = "Jan", |
| 79 | + Amount = 17000, |
| 80 | + Color = "green" |
| 81 | + }, |
| 82 | + new CashFlowData |
| 83 | + { |
| 84 | + Period = "Feb", |
| 85 | + Amount = 14000, |
| 86 | + Color = "green" |
| 87 | + }, |
| 88 | + new CashFlowData |
| 89 | + { |
| 90 | + Period = "Mar", |
| 91 | + Amount = -12000, |
| 92 | + Color = "red" |
| 93 | + }, |
| 94 | + new CashFlowData |
| 95 | + { |
| 96 | + Period = "Q1", |
| 97 | + Summary = "runningTotal", |
| 98 | + Color = "gray" |
| 99 | + }, |
| 100 | + new CashFlowData |
| 101 | + { |
| 102 | + Period = "Apr", |
| 103 | + Amount = -22000, |
| 104 | + Color = "red" |
| 105 | + }, |
| 106 | + new CashFlowData |
| 107 | + { |
| 108 | + Period = "May", |
| 109 | + Amount = -18000, |
| 110 | + Color = "red" |
| 111 | + }, |
| 112 | + new CashFlowData |
| 113 | + { |
| 114 | + Period = "Jun", |
| 115 | + Amount = 10000, |
| 116 | + Color = "green" |
| 117 | + }, |
| 118 | + new CashFlowData |
| 119 | + { |
| 120 | + Period = "Q2", |
| 121 | + Summary = "runningTotal", |
| 122 | + Color = "gray" |
| 123 | + }, |
| 124 | + new CashFlowData |
| 125 | + { |
| 126 | + Period = "Ending\nBalance", |
| 127 | + Summary = "total", |
| 128 | + Color = "#555" |
| 129 | + } |
| 130 | + }; |
| 131 | + } |
| 132 | +
|
| 133 | + private class CashFlowData |
| 134 | + { |
| 135 | + public string Period { get; set; } |
| 136 | + public decimal? Amount { get; set; } |
| 137 | + public string Summary { get; set; } |
| 138 | + public string Color { get; set; } |
| 139 | + } |
| 140 | +} |
| 141 | +```` |
| 142 | + |
| 143 | +## Waterfall Chart Specific Appearance Settings |
| 144 | + |
| 145 | +The Waterfall Chart provides dedicated properties that allow you to customize its appearance by controlling its [orientation](#orientation), [labels](#labels), and [color](#color). |
| 146 | + |
| 147 | +### Orientation |
| 148 | + |
| 149 | +Waterfall Charts fall into two types: |
| 150 | + |
| 151 | +* Traditional Waterfall Charts—They display changes vertically. To use this Waterfall Chart, set the series type to `ChartSeriesType.Waterfall`. |
| 152 | +  |
| 153 | +* Horizontal Waterfall Charts—They present changes horizontally. To use this type of Waterfall Chart, set the series type to `ChartSeriesType.HorizontalWaterfall`. |
| 154 | +  |
| 155 | + |
| 156 | +### Labels |
| 157 | + |
| 158 | +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: |
| 159 | + |
| 160 | +* `Visible`—When set to `false`, this parameter hides all labels. |
| 161 | +* `Step`—Renders every n-th label, where n is the value (double number) passed to the parameter. |
| 162 | +* `Skip`—Skips the first n number of labels, where n is the value (double number) passed to the parameter. |
| 163 | +* `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. |
| 164 | + |
| 165 | +### Color |
| 166 | + |
| 167 | +The color of a series is controlled through the `Color` property that can take any valid CSS color (for example, `#abcdef`, `#f00`, or `blue`). |
| 168 | + |
| 169 | +@[template](/_contentTemplates/chart/link-to-basics.md#color-field-bar-column) |
| 170 | + |
| 171 | +@[template](/_contentTemplates/chart/link-to-basics.md#gap-and-spacing) |
| 172 | + |
| 173 | +@[template](/_contentTemplates/chart/link-to-basics.md#configurable-nested-chart-settings) |
| 174 | + |
| 175 | +@[template](/_contentTemplates/chart/link-to-basics.md#configurable-nested-chart-settings-categorical) |
| 176 | + |
| 177 | +## See Also |
| 178 | + |
| 179 | + * [Live Demo: Column Chart](https://demos.telerik.com/blazor-ui/chart/waterfall) |
0 commit comments