WaterfallChart

stable

Quick Preview

Opening balance to net position

Increase

Decrease

Total

Use WaterfallChart when you want the full Figma card: title, description, plot, and legend.

<WaterfallChart
  data={data}
  title="Cash bridge"
  description="Opening balance to net position"
/>

Use WaterfallChartPlot when the chart lives inside custom chrome.

<WaterfallChartPlot data={data} />

Totals anchor to the baseline. Middle steps float between running totals and are linked with connectors.

Opening balance to net position

Increase

Decrease

Total

Use horizontal orientation for long labels or denser step counts.

Long labels read better horizontally

Increase

Decrease

Total

The plot is exported separately so consumers do not have to use ChartCard.

Plot only

Use the chart without ChartCard chrome.

Increase

Decrease

Total

Prop/API	Type	Default	Description
`data`	`WaterfallChartDatum[]`	-	Ordered bridge steps. `total` values are absolute; increase/decrease values are deltas.
`size`	`"sm"	"md"	"lg"`
`orientation`	`"vertical"	"horizontal"`	`"vertical"`
`legend`	`"right"	"bottom"	false`
`showValues`	`boolean`	`true`	Shows exact values on bars.
`showTooltip`	`boolean`	`false`	Enables the shared Recharts tooltip.
`valueFormatter`	`(value, context) => ReactNode`	grouped number with signs for deltas	Formats bar values.
`categoryFormatter`	`(label, datum) => ReactNode`	identity	Formats category labels.
`domain`	`[number, number]`	inferred from all running totals	Overrides the value scale.
`className`	`string`	-	Local layout or spacing overrides.
native/root props	React component props	-	Passed through to the root element.

Keep steps in chronological or logical order so the bridge tells a coherent story.
Reserve type="total" for genuine subtotals such as opening and net values.
Do not rely on color alone; keep legend and value labels visible when exact comparison matters.