WaterfallChart

The running-total bridge: each step floats from the running total by its signed value, and a total step snapshots the running total as an absolute bar from zero.
The coloring is fixed semantics rather than a prop: rises green, falls red, totals the brand primary, so every bridge reads the same way. Hairline connectors link each bar's end to the next bar's start, and scrubbing a step flags its change and running total.
Q3 revenue bridge
iOS
Q3 revenue bridge
Android
Q3 revenue bridge
Web
tsx
<WaterfallChart
title="Q3 revenue bridge"
steps={[
{ label: "Q2", value: 4200, total: true },
{ label: "New", value: 980 },
{ label: "Expansion", value: 460 },
{ label: "Churn", value: -540 },
{ label: "FX", value: -120 },
{ label: "Q3", total: true },
]}
/>

Props

Prop
Description
steps
required
WaterfallStep[]
The bridge's steps, in order.
title
string
Optional heading shown above the plot.
compact
boolean
Density (omit for the default plot size).
hideGrid
boolean
Furniture visibility.
hideAxes
boolean
Furniture visibility.
formatValue
(v: number) => string
Formats tick labels, the flag, and the accessible name.
selected
number | null
Scrub-to-inspect: the selected step index (controlled). Pass null for none.
defaultSelected
number
Scrub-to-inspect: the initially selected step (uncontrolled).
onSelect
(index: number | null) => void
Fired when a press/scrub selects a step (or clears it with null).
testID
string
E2E hook forwarded to the root element.
style
LayoutStyle
Composition within a parent only, never a restyle hook and never a width: the parent layout container provides the bounds.

Do & Don’t

WaterfallChart

Don’t
Q2
Q3
Plain bars of period totals hide the walk: what rose, what fell, and by how much.
Do
Q3 revenue bridge
Bridge from one total to the next with signed steps; let the fixed coloring carry rise and fall.
← UptimeBar
Activity →