Skip to content
Get All-Access
Data & ChartsPro

Waterfall Chart

Waterfall chart for how a total changes: the start total, the changes that move it and the end total, in one indigo scale — totals strongest, increases medium, decreases light with an edge — and a +/− sign on every change.

Usage

Revenue bridge

  • Total
  • Increase
  • Decrease
Waterfall chart, 6 points from Q2 revenue to Q3 revenue. Change from $248k to $0k, lowest $-27k, highest $248k.
Revenue bridge Q2 to Q3, data table
stepChange
Q2 revenue$248k
New business$64k
Expansion$31k
Contraction$-18k
Churn$-27k
Q3 revenue$0k

Installation

Waterfall Chart comes with WunderUI Core and Pro, in the package from your plan. See the plans.

Then import what you need:

tsx
import {
  WaterfallChart,
  WaterfallChartProps,
  WaterfallChartVariant,
} from "@wunderui/react"

Examples

Basic Waterfall

Revenue bridge

  • Total
  • Increase
  • Decrease
Waterfall chart, 6 points from Q2 revenue to Q3 revenue. Change from $248k to $0k, lowest $-27k, highest $248k.
Revenue bridge Q2 to Q3, data table
stepChange
Q2 revenue$248k
New business$64k
Expansion$31k
Contraction$-18k
Churn$-27k
Q3 revenue$0k

Waterfall with Connectors

Revenue bridge

  • Total
  • Increase
  • Decrease
Waterfall chart, 6 points from Q2 revenue to Q3 revenue. Change from $248k to $0k, lowest $-27k, highest $248k.
Revenue bridge Q2 to Q3, data table
stepChange
Q2 revenue$248k
New business$64k
Expansion$31k
Contraction$-18k
Churn$-27k
Q3 revenue$0k

Horizontal Waterfall

Revenue bridge

  • Total
  • Increase
  • Decrease
Waterfall chart, 6 points from Q2 revenue to Q3 revenue. Change from $248k to $0k, lowest $-27k, highest $248k.
Revenue bridge Q2 to Q3, data table
stepChange
Q2 revenue$248k
New business$64k
Expansion$31k
Contraction$-18k
Churn$-27k
Q3 revenue$0k

State – Loading

Revenue bridge

Waterfall chart, 6 points from Q2 revenue to Q3 revenue. Change from $248k to $0k, lowest $-27k, highest $248k.

In context

How the component is used inside real screens — the same compositions as the Usage section of the Figma page.

Revenue Bridge

Last quarter's revenue to this quarter's.

Q3 revenue bridge

From last quarter's revenue to this quarter's

  • Total
  • Increase
  • Decrease
Waterfall chart, 6 points from Q2 revenue to Q3 revenue. Change from $248k to $0k, lowest $-27k, highest $248k.
Q3 revenue bridge, data table
stepChange
Q2 revenue$248k
New business$64k
Expansion$31k
Contraction$-18k
Churn$-27k
Q3 revenue$0k

API Reference

PropTypeDefault
variant"basic-waterfall" | "waterfall-with-connectors" | "horizontal-waterfall""basic-waterfall"
valuestring"value"
totalstringfirst and last row
state"ready" | "loading" | "empty" | "error""ready"
hiddenSeries · animate · animationKeystring[] · boolean · string | number—
data*readonly ChartDatum[]—
index*string—
activeIndexnumber | null—
animateboolean—
animationKeystring | number—
axisFormatterChartValueFormatter—
categoryAxisboolean—
categoryFormatter(label: string) => string—
categoryTicksreadonly string[]—
classNamestring—
defaultActiveIndexnumber | null—
defaultSelectedRangeChartRange | null—
descriptionstring—
emptyDescriptionstring—
emptyTitlestring—
errorDescriptionstring—
errorTitlestring—
gridboolean—
gridIntervalsnumber—
gridStyle"solid" | "dashed"—
heightnumber—
hiddenSeriesreadonly string[]—
includeZeroboolean—
labelstring—
onActiveIndexChange(index: number | null) => void—
onRetry() => void—
onSelectedRangeChange(range: ChartRange | null) => void—
rangeSelectableboolean—
selectedRangeChartRange | null—
tooltipboolean—
tooltipTitle(datum: ChartDatum, index: number) => React.ReactNode—
valueAxisboolean—
valueAxisSide"left" | "right"—
valueDomainreadonly [number, number]—
valueFormatterChartValueFormatter—
valueTicksreadonly number[]—
widthnumber—

Theming

The CSS variables this component reads. Set one on any wrapper to restyle everything inside it. More in Theming.

VariableUsed forDefault
Color
Stroke#D9E1E7dark #323438
Value#BBBEFA
Value#777DF5
Value#444AC2
Value#A2A3A3dark #6E7078
Fill#000000dark #FFFFFF
PreviousTreemapNextKPI