Example of Waterfall in Angular Chart Component

This sample visualizes the revenue and profits of a company by using default waterfall series in the chart. The tooltip provides details on the profits made by each department.

Company Revenue and Profit

In this example, you can see how to render and configure the Waterfall type series. You can use border, fill properities to customize the data appearance. dataLabel is used to represent individual data and its value.

Injecting Module

Chart component features are segregated into individual feature-wise modules. To use Waterfall feature, we need to inject WaterfallSeriesService into the @NgModule.providers section.

More information about the waterfall series can be found in this documentation section.