Waterfall Chart ^0.1.17

Visualize cumulative change across a sequence of positive and negative contributions. Perfect for P&L breakdowns, budget variance, and cash-flow analysis.

Basic

Each bar represents a change. Connectors between tops show the running total.

<VxWaterfallChart
  :data="[
    { label: 'Start',  value: 1000, type: 'total' },
    { label: 'Gain 1', value: 350 },
    { label: 'Loss 1', value: -180 },
    { label: 'Gain 2', value: 220 },
    { label: 'Loss 2', value: -90 },
    { label: 'End',    value: 0, type: 'total' },
  ]"
/>

Quarterly P&L

<VxWaterfallChart :data="quarterlyPnl" />

Revenue breakdown with subtotals

Use type: 'subtotal' to anchor the running total at that point.

<VxWaterfallChart
  :data="[
    { label: 'Gross',       value: 480, type: 'total' },
    { label: 'Returns',     value: -28 },
    { label: 'Discounts',   value: -42 },
    { label: 'Net revenue', value: 0, type: 'subtotal' },
    { label: 'COGS',        value: -180 },
    { label: 'Opex',        value: -95 },
    { label: 'Profit',      value: 0, type: 'total' },
  ]"
/>

Monthly cash flow

<VxWaterfallChart :data="monthlyCash" />

No connectors

<VxWaterfallChart :data="data" :connectors="false" />

No value labels

<VxWaterfallChart :data="data" :valueLabels="false" />

Custom colors

UpDownTotal

<VxWaterfallChart
  :data="data"
  upColor="#22c55e"
  downColor="#ef4444"
  totalColor="#6366f1"
/>

Dashboard card

Q4 profit bridge

From gross revenue to net profit

Props

Prop	Type	Default	Description
data	WaterfallPoint[]	[]	Array of steps
height	number	300	SVG height in px
barGap	number	0.35	Gap between bars (0–1)
radius	number	4	Corner radius
upColor	string	#22c55e	Positive bar color
downColor	string	#ef4444	Negative bar color
totalColor	string	var(--primary)	Total / subtotal color
connectors	boolean	true	Dashed lines between bars
valueLabels	boolean	true	Show value above each bar
grid	boolean	true	Show horizontal grid
axis	boolean	true	Show axis labels
tooltip	boolean	true	Show hover tooltip
animate	boolean	true	Animate on mount
yTicks	number	5	Number of y-axis ticks
min / max	number	—	Force value bounds
formatValue	(v: number) => string	smart	Format axis / tooltip

WaterfallPoint

interface WaterfallPoint {
  label: string
  value: number
  type?: 'positive' | 'negative' | 'total' | 'subtotal'
}

• Omit type — sign of value decides positive/negative.
• type: 'total' — absolute bar drawn from 0 to value, resets the running total.
• type: 'subtotal' — absolute bar drawn from 0 to the current running total (set value: 0).

Events

Event	Payload
hover	{ index, point, runningTotal }
click	{ index, point, runningTotal }