Waterfall

1. First and last bar plots represent beginning and end values based on zero.
2. Middle bar plots represent increased and decreased values positioned relative to previous bars.
3. Y-axis is a vertical axis that uses a linear scale.
4. X-axis is a horizontal axis that uses a categorical scale.
5. Legend identifies data categories.

Use when:

• Visualizing the underlying drivers of change to a value in sequence.
• Explain how a start value becomes an end value via a sequence of additions/subtractions.
• Show cumulative composition in sequence, not just change over time.

Avoid when:

• Categories are independent and don't build on one another. Use a vertical bar chart.
• Showing parts of a whole at a single point in time. Use a donut chart or a treemap.
• Tracking a trend across many data points, or where interim volatility matters. Use a line chart.

• Use consistent color coding: one color for increases, one for decreases, and a third for starting and ending totals.
• Anchor the starting and ending totals to the baseline, and let the middle bars float.
• Avoid adding too many bars for readability.

Installation

Usage

Packages

Technical documentation and usage examples are available in Storybook.