React chart example
Waterfall chart
Break a total into the sequence of increases and decreases that produced it.
What is a waterfall chart?
A waterfall chart starts at an opening value and steps up or down through each contributing change, landing on a closing total. Floating bars sit at the running total, so each step shows both its size and where it lands.
When to use it
Use it for bridges: revenue from last quarter to this, budget to actual, headcount opening to closing. It answers “what moved, and by how much” in one picture. Use a stacked column when you want the composition at a point in time rather than the path between two points.
Design tips
Colour by direction — one hue for increases, one for decreases — and give totals their own neutral.
Keep the steps in their real order; a waterfall sorted by size is no longer a bridge.
Show the opening and closing bars anchored to the baseline so they read as totals, not steps.
Build this chart in React
Compare with
Use when composition at each period matters more than sequential change.
Use for independent values rather than a running bridge between totals.
Graphy Chart SDK
Add Graphy’s waterfall charts to your React app.
Ship quickly with one maintained SDK, without building and maintaining the entire charting experience yourself.