Waterfall Chart

Installation

Usage

import {
  WaterfallChart,
  WaterfallLabelChart,
  WaterfallCustomLabelChart,
  WaterfallLegendChart,
  WaterfallHorizontalChart,
  WaterfallInteractiveChart,
} from "@/components/ruixen/waterfall-chart";

const data = [
  { name: "Starting", value: 50000, isTotal: true },
  { name: "Sales", value: 25000 },
  { name: "Services", value: 15000 },
  { name: "Returns", value: -8000 },
  { name: "Discounts", value: -5000 },
  { name: "Ending", value: 77000, isTotal: true },
]
 
// Default waterfall chart
<WaterfallChart data={data} className="h-[280px]" />
 
// With value labels above bars
<WaterfallLabelChart data={data} className="h-[280px]" />
 
// Center labels inside bars
<WaterfallCustomLabelChart data={data} className="h-[280px]" />
 
// With legend
<WaterfallLegendChart data={data} className="h-[320px]" />
 
// Horizontal layout
<WaterfallHorizontalChart data={data} className="h-[320px]" />
 
// Interactive with hover effects
<WaterfallInteractiveChart data={data} className="h-[280px]" />

Examples

Default Waterfall

The default waterfall chart displays positive and negative changes with automatic cumulative calculation.

<WaterfallChart data={revenueData} className="h-[280px]" />

With Labels

Display value labels above each bar showing the change amount with +/- prefix.

<WaterfallLabelChart data={revenueData} className="h-[280px]" />

Center Labels

Display formatted values in the center of each bar.

<WaterfallCustomLabelChart data={profitData} className="h-[280px]" />

With Legend

Add a legend showing the meaning of colors (Increase, Decrease, Total).

<WaterfallLegendChart
  data={profitData}
  legendPosition="bottom"
  className="h-[320px]"
/>

Horizontal Layout

Display the waterfall chart horizontally for better label visibility.

<WaterfallHorizontalChart data={revenueData} className="h-[320px]" />

Interactive

Enable hover effects to highlight individual bars.

<WaterfallInteractiveChart data={profitData} className="h-[280px]" />

The component supports three tooltip indicator styles matching shadcn/ui charts:

// Dot indicator (default)
<WaterfallChart data={data} tooltipIndicator="dot" />
 
// Line indicator
<WaterfallChart data={data} tooltipIndicator="line" />
 
// Dashed indicator
<WaterfallChart data={data} tooltipIndicator="dashed" />

Custom Value Formatter

Format values with a custom function:

<WaterfallChart
  data={data}
  valueFormatter={(value) => `$${value.toLocaleString()}`}
/>

Props

WaterfallChart

Prop	Type	Default	Description
`data`	`WaterfallDataItem[]`	Required	Array of data items with name and value
`className`	`string`	-	Additional CSS classes
`showTooltip`	`boolean`	`true`	Show tooltip on hover
`tooltipIndicator`	`"dot" \| "line" \| "dashed"`	`"dot"`	Tooltip indicator style
`valueFormatter`	`(value: number) => string`	-	Custom value formatter
`showXAxis`	`boolean`	`true`	Show X axis
`showYAxis`	`boolean`	`true`	Show Y axis
`showGrid`	`boolean`	`true`	Show grid lines

WaterfallLabelChart

Same props as WaterfallChart. Displays value labels above bars with +/- prefix.

WaterfallCustomLabelChart

Same base props. Displays formatted values centered inside bars.

WaterfallLegendChart

Prop	Type	Default	Description
`legendPosition`	`"top" \| "bottom"`	`"bottom"`	Legend position

Plus all WaterfallChartBaseProps.

WaterfallHorizontalChart

Same base props. Renders the chart with horizontal bars.

WaterfallInteractiveChart

Same base props. Adds hover highlighting effect.

WaterfallDataItem

Property	Type	Description
`name`	`string`	Category name
`value`	`number`	Numeric value (positive or negative)
`isTotal`	`boolean`	Mark as total bar (starts from zero)