WaterfallChart

Chart
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.
src/charts/waterfall-chart
View in Charts

Playground

Every control sets a real prop of WaterfallChartProps. The JSX below updates as you go.
Q3 revenue bridge
Props
hideGrid
boolean
compact
boolean
JSX · WaterfallChartProps
<WaterfallChart />

Variants

2 examples from src/charts/waterfall-chart/waterfall-chart.md, each rendered live from its own JSX.
Signed steps only
<WaterfallChart
steps={[
{ label: "Hired", value: 24 },
{ label: "Backfill", value: 8 },
{ label: "Attrition", value: -11 },
{ label: "Transfers", value: -3 },
{ label: "Net", total: true },
]}
/>
Compact, inspected
<WaterfallChart
compact
defaultSelected={2}
steps={[
{ label: "Start", value: 100, total: true },
{ label: "Wins", value: 30 },
{ label: "Losses", value: -12 },
{ label: "End", total: true },
]}
/>

Anatomy

Q3 revenue bridge
1
Chart frame
2
Change bar
3
Axis labels
4
Total bar
5
Gridlines
Dimmed parts appear only in some states or variants.

Props

12 props on WaterfallChartProps, grouped as they are declared in source. Required props are marked *.
Prop
Type
Default
Description
Props
2 props
steps *
WaterfallStep[]
–
The bridge's steps, in order.
title
string
–
Optional heading shown above the plot.
Density
2 props
compact
boolean
false
plain
boolean
false
Strip the card surface for nesting inside an existing card (mirrors Stats).
Furniture visibility
8 props
hideGrid
boolean
false
Furniture visibility.
hideAxes
boolean
false
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.

Accessibility and keyboard

Keyboard
Tab
Focuses the plot
ArrowLeft
ArrowRight
Steps through points when inspectable
Escape
Clears the inspected point
Semantics
Roles
group
image
img
ARIA on web
aria-label

Platform skins

The playground's props on each platform: same tree, native shapes, type and touch sizes.
Web
control 10 · field 10 · card 16 · Instrument Sans
iOS
capsule controls · field 8 · card 12 · SF Pro · 44 pt
Android
Material 3 stadium · field 4 · card 12 · Roboto · 48 dp

Usage

<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 },
]}
/>
The coloring is fixed semantics rather than a prop: rises green, falls red, totals the brand primary, so every bridge reads the same way. Scrubbing a step flags its change and running total.

Tokens

Read from the playground render. Values follow the scheme and the ion hue.
--bad
--c1
--fd
--fm
--ft
--ln
--ok
--sf
--sh-sm
--tx3

Related components