Overview
WaterfallChart shows how values add up or break down across categories. Each bar shows the contribution to a running total, making it perfect for financial analysis, budget breakdowns, or step-by-step value changes. Built on Recharts.
Features
- Running total visualization
- Color-coded increase/decrease/total bars
- Value labels on bars
- Connector lines between bars
- Customizable colors
- Interactive tooltips
Examples
Revenue Waterfall
Revenue breakdown analysis
User Growth Analysis
User base changes over time
Without Labels
Clean view without value labels
With ChartCard
Wrapped in ChartCard
Monthly Revenue Analysis
January 2024
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
data | WaterfallDataPoint[] | required | Array of data points with label, value, type |
showConnectors | boolean | true | Show connector lines between bars |
showLabels | boolean | true | Show value labels on bars |
positiveColor | string | success | Color for positive values |
negativeColor | string | destructive | Color for negative values |
totalColor | string | primary | Color for total bars |
showGrid | boolean | true | Show grid lines |
Usage
import { WaterfallChart, ChartCard } from '@/ui/components/charts';
// Basic waterfall chart
<ChartCard title="Revenue Breakdown">
<WaterfallChart
data={[
{ label: 'Starting', value: 100, type: 'total' },
{ label: 'New Sales', value: 50, type: 'increase' },
{ label: 'Refunds', value: -20, type: 'decrease' },
{ label: 'Upgrades', value: 30, type: 'increase' },
{ label: 'Ending', value: 160, type: 'total' },
]}
showLabels
/>
</ChartCard>
// With custom colors
<WaterfallChart
data={[...]}
positiveColor="var(--success)"
negativeColor="var(--destructive)"
totalColor="var(--primary)"
/>