Home/ Cookbook/ Charts/ Waterfall

Waterfall (cash flow)

A start bar, a sequence of green and red change bars, an end bar. The chart accountants reach for first because it answers "how did we get from there to here?" in a single picture.

Charts · 19 of 20 1 primitive · Chart.Waterfall ~12 min React · @corelithzw/react

Overview

Anchor bars at the start and end; floating change bars in between, each starting where the previous left off. Positive deltas are green, negative are red.

Waterfalls explain a delta. "We started the quarter at $120k cash, ended at $95k — here's where the $25k went." Each intermediate bar floats above the x-axis at the running total, so the staircase visualises the running balance. They're indispensable for finance pages (P&L bridge, cash flow), and useful anywhere you need to decompose a change — onboarding funnel offsets, headcount churn, energy consumption decomposition.

Reach for it when the data is a sequence of additive contributions to a total. Skip it if the contributions aren't additive (use a stacked bar) or if the start and end are the only numbers that matter (use a delta + two anchors).

The opinion: always show the start and end values as full bars, anchored at zero. Floating-only waterfalls hide the magnitude and trick the eye into reading deltas as absolutes.

The chart

Q3 cash bridge: opening balance, plus revenue and tax refund, minus payroll, rent, supplies, closing balance.

Required pieces

PrimitiveChart.Waterfall

Roadmap: Chart.Waterfall with auto running-total layout, totals at start/end and connectors ships in v0.2. v0.1-alpha users compute the y-offsets and emit rects.

React snippet

Steps as objects with a type ('start' | 'change' | 'total') and a value.

Chart.Waterfall@corelithzw/react

Customising

With sub-totals

Insert type: 'subtotal' at boundary points — after revenue, after costs — so the bridge tells a P&L story.

{ type: 'subtotal',
  label: 'Gross',
  value: 210000 },
{ type: 'change',
  label: 'Opex',
  value: -115000 },

Horizontal orientation

Lay the waterfall left-to-right for landing screens — bigger numbers, easier to read on phones.

<Chart.Waterfall
  orientation="horizontal"
  steps={cashBridge}
  width={640}
  height={240}
/>

Percent-of-start scale

Normalise everything to opening — useful when comparing two periods on the same axis.

<Chart.Waterfall
  steps={cashBridge}
  scale="pct-of-start"
  format={(v) => `${v.toFixed(1)}%`}
/>

In context

A finance dashboard hero — title, the two anchor numbers as stat hero, the waterfall under them so the bridge fills the rest of the card.

Q3 cash bridge

$120k → $95k

−$25k · payroll the biggest line