New to Kendo UI for Angular? Start a free 30-day trial

Waterfall Charts

Updated on Jan 20, 2026

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.

Change Theme

Theme

Loading ...

Binding to Data

You can bind the Waterfall chart series to an array through the 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.

public data: [number, string][] = [[10, 'Jan'], [-5, 'Feb'], [15, 'Mar']];

Binding to objects—Use an array of objects with custom properties.

public data: Array<{ value: number; category: string; summary?: string }> = [
    { value: 10, category: 'Jan' },
    { value: -5, category: 'Feb' },
    { 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`	`string`	Yes*	The property name that contains the numeric value (*required when binding to objects).
`categoryField`	`string`	No	The property name that contains the category with `string`, `date`, or `number` values.
`summaryField`	`string`	No	The property name that indicates if the point is a summary with `"runningTotal"` or `"total"` values.
`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.

Change Theme

Theme

Loading ...

Customizing the Appearance

You can customize the visual appearance of Waterfall charts through several properties that control spacing, line styles, and transparency:

gap—Sets the distance between categories as a percentage of the bar width. Larger values create wider gaps between the waterfall columns.
spacing—Specifies the space between series items within the same category as a percentage of the bar width.
line—Controls the appearance of the connecting lines between waterfall columns through the SeriesLine configuration, including color, width, and style properties.
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.

Change Theme

Theme

Loading ...

Waterfall Charts

Binding to Data

Customizing the Appearance

Support and Learning Resources

Additional Resources