# Angular Waterfall Charts Waterfall charts are categorical charts that display the cumulative effect of sequentially introduced positive or negative values. They help visualize how an initial value is affected by a series of intermediate positive or negative changes. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/series-types/waterfall/overview/source.txt) ## Binding to Data You can bind the Waterfall chart series to an array through the [`data`](https://www.telerik.com/kendo-angular-ui/components/charts/api/seriesitemcomponent#data) property in three formats: * Binding to numbers—Use a simple array of numeric values. ```ts public data: number[] = [10, -5, 15, -8, 20]; ``` * Binding to arrays—Use arrays of `[value, category]` pairs. ```ts public data: [number, string][] = [[10, 'Jan'], [-5, 'Feb'], [15, 'Mar']]; ``` * Binding to objects—Use an array of objects with custom properties. ```ts public data: Array<{ value: number; category: string; summary?: string }> = [ { value: 10, category: 'Jan' }, { value: -5, category: 'Feb' }, // Mark the final point as a total for summary rendering. { value: 15, category: 'Mar', summary: 'total' } ]; ``` When binding to objects, specify which properties contain the data through the following field mappings: | Property | Data type | Required | Description | | ------------------------------------------------------------------------------------------------------------------- | --------- | -------- | ----------------------------------------------------------------------------------------------------- | | [`field`](https://www.telerik.com/kendo-angular-ui/components/charts/api/seriesitemcomponent#field) | `string` | Yes\* | The property name that contains the numeric value (\*required when binding to objects). | | [`categoryField`](https://www.telerik.com/kendo-angular-ui/components/charts/api/seriesitemcomponent#categoryfield) | `string` | No | The property name that contains the category with `string`, `date`, or `number` values. | | [`summaryField`](https://www.telerik.com/kendo-angular-ui/components/charts/api/seriesitemcomponent#summaryfield) | `string` | No | The property name that indicates if the point is a summary with `"runningTotal"` or `"total"` values. | | [`colorField`](https://www.telerik.com/kendo-angular-ui/components/charts/api/seriesitemcomponent#colorfield) | `string` | No | The property name that contains the color with `string` values. | The following example demonstrates how to bind the Waterfall chart series to data using object models. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/series-types/waterfall/data-binding/source.txt) ## Customizing the Appearance You can customize the visual appearance of Waterfall charts through several properties that control spacing, line styles, and transparency: * [`gap`](https://www.telerik.com/kendo-angular-ui/components/charts/api/seriesitemcomponent#gap)—Sets the distance between categories as a percentage of the bar width. Larger values create wider gaps between the waterfall columns. * [`spacing`](https://www.telerik.com/kendo-angular-ui/components/charts/api/seriesitemcomponent#spacing)—Specifies the space between series items within the same category as a percentage of the bar width. * [`line`](https://www.telerik.com/kendo-angular-ui/components/charts/api/seriesitemcomponent#line)—Controls the appearance of the connecting lines between waterfall columns through the [`SeriesLine`](https://www.telerik.com/kendo-angular-ui/components/charts/api/seriesline) configuration, including color, width, and style properties. * [`opacity`](https://www.telerik.com/kendo-angular-ui/components/charts/api/seriesitemcomponent#opacity)—Sets the transparency level of the waterfall columns. Values range from 0 (fully transparent) to 1 (fully opaque). The following example demonstrates how to customize Waterfall chart properties using interactive controls. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/series-types/waterfall/customization/source.txt) ## Support and Learning Resources * [Waterfall Chart Homepage](https://www.telerik.com/kendo-angular-ui/charts#waterfall-chart) * [Getting Started with the Kendo UI for Angular Chart](https://www.telerik.com/kendo-angular-ui/components/charts/installation/getting-started) * [API Reference of the Charts](https://www.telerik.com/kendo-angular-ui/components/charts/api) * [Area Charts](https://www.telerik.com/kendo-angular-ui/components/charts/series-types/area) * [Bar Charts](https://www.telerik.com/kendo-angular-ui/components/charts/series-types/bar) * [Box Plot Charts](https://www.telerik.com/kendo-angular-ui/components/charts/series-types/box-plot) * [Bullet Charts](https://www.telerik.com/kendo-angular-ui/components/charts/series-types/bullet) * [Line Charts](https://www.telerik.com/kendo-angular-ui/components/charts/series-types/line) * [Radar Charts](https://www.telerik.com/kendo-angular-ui/components/charts/series-types/radar) * [RangeArea Charts](https://www.telerik.com/kendo-angular-ui/components/charts/series-types/range-area) * [RangeBar Charts](https://www.telerik.com/kendo-angular-ui/components/charts/series-types/range-bar) * [Getting Started with Kendo UI for Angular (Online Guide)](https://www.telerik.com/kendo-angular-ui/components/getting-started) * [Getting Started with Kendo UI for Angular (Video Tutorial)](https://www.telerik.com/campaigns/kendo-ui/using-kendo-ui-with-angular-video-tutorial) * [Video Courses](https://www.telerik.com/kendo-angular-ui/components/getting-started/video-onboarding) * [Chart Forum](https://www.telerik.com/forums/kendo-angular-ui?tagId=256) * [Before You Start: All Things Angular (Telerik Blog Post)](https://www.telerik.com/blogs/all-things-angular) * [Knowledge Base](https://www.telerik.com/kendo-angular-ui/components/knowledge-base) ## Additional Resources * [Angular Blogs](https://www.telerik.com/blogs/tag/kendo-ui-for-angular) * [Angular Videos](https://www.telerik.com/videos/kendo-angular-ui) * [Kendo UI for Angular Roadmap](https://www.telerik.com/support/whats-new/kendo-angular-ui/roadmap)