WaterfallChart

stable

Cash flow waterfall with opening balance, incremental flows, and closing balance

Finance/Storybook ↗

import { WaterfallChart } from "@nodus/design-system/finance"

Loading demo…

Props

Prop	Type	Default	Description
`opening`req	`number`	—	Opening balance
`flows`req	`WaterfallFlow[]`	—	Incremental cash flows
`closing`	`number`	—	Closing balance override
`currency`	`string`	—	Currency code
`locale`	`string`	—	BCP 47 locale override
`label`	`string`	—	Chart title

openingrequired

Type numberDefault —

Opening balance

flowsrequired

Type WaterfallFlow[]Default —

Incremental cash flows

closing

Type numberDefault —

Closing balance override

currency

Type stringDefault —

Currency code

locale

Type stringDefault —

BCP 47 locale override

label

Type stringDefault —

Chart title

Metadatasemantic type outcome

MobileStacks / Scroll

Waterfall chart requires min 320px. Wrap in overflow-x-auto.

Design Rationale

This component was designed to express:

View all principles →

Explore Related

ReconWaterfall→

Reconciliation waterfall showing match stages from total items to final exceptions

ForecastTable→

Multi-period cash forecast table with row grouping, totals, and loading skeleton

CashForecastChart→

13-week rolling cash forecast with confidence-band bar chart

Was this helpful?