Waterfall chart

Cumulative running-total bar chart with positive / negative deltas and total bars. Self-contained SVG (no ChartRoot).

Primitive: ChartWaterfall· Standalone (no ChartRoot needed)

Interactive demo

Usage

import { ChartWaterfall } from '@ramtt/charts'

<ChartWaterfall
  data={[
    { label: 'Start', value: 100, type: 'total' },
    { label: 'Sales', value: 50, type: 'increase' },
    { label: 'Costs', value: -20, type: 'decrease' },
    { label: 'End', value: 130, type: 'total' },
  ]}
/>

Props

Prop	Type	Default	Description
data*	`WaterfallItem[]`	—	Bars with type "increase" \| "decrease" \| "total"
width	`number`	600	SVG width in px
height	`number`	300	SVG height in px
radius	`number`	2	Bar corner radius
gap	`number`	0.35	Gap as fraction of bar slot width
positiveClassName	`string`	—	Tailwind class for positive bars
negativeClassName	`string`	—	Tailwind class for negative bars