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

Waterfall

Updated on Dec 12, 2025

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.

The following example demonstrates the Angular Waterfall chart in action.

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 ...

Waterfall

Binding to Data

Support and Learning Resources

Additional Resources