React Waterfall Chart

A Waterfall chart visualizes the cumulative effect of sequential positive and negative data points, making it ideal for understanding how an initial value is affected by intermediate changes and final totals.

How to configure:

• Set type as Waterfall on ChartSeries
• Provide category x and y values in your data
• Use waterfallSettings on ChartSeries to style gains/losses and configure intermediate and total sums.

Overview

To visualize data as a Waterfall chart, set the type property to Waterfall within the ChartSeries component.

A simple Waterfall chart displays incremental increases and decreases without intermediate or total sum columns.
This is useful when you want to track the step-by-step impact of changes on a value.

Key characteristics:

• Positive values are rendered as upward bars
• Negative values are rendered as downward bars
• Each bar starts from the previous cumulative value

Intermediate and Total Sums

Waterfall charts support intermediateSumIndexes and sumIndexes columns to highlight important checkpoints and final outcomes.

• intermediateSumIndexes summarize a subset of values.
• sumIndexes represent the final cumulative value.
• These columns are rendered with distinct styling and start from the baseline.

Customization

You can customize the appearance and behavior of a Waterfall series via the waterfallSettings property on ChartSeries.

Series Items

Waterfall charts support rich customization to improve readability. Negative values can be highlighted using negativeColor, positive values using positiveColor, and connector lines can be styled or dashed to clearly show value transitions. This makes gains, losses, and cumulative flow easy to interpret.

Connector lines

Waterfall charts support connector line styles that visually link the cumulative steps between bars. To customize connector lines, use the connectorLine option in waterfallSettings.

• strokeWidth controls thickness of line.
• strokeColor controls connector line color.
• strokeOpacity specifies the opacity of the connector line. Value ranges from 0 to 1.

Horizontal Waterfall

A horizontal waterfall chart is used to visualize the cumulative impact of sequential positive and negative values across categories. To enable a horizontal waterfall chart, set the transposed property in the Chart.