Bar
Waterfall Chart
Shows cumulative effect of positive and negative values. Popular in financial reports.
Loading chart…
#waterfall#finance#cumulative#bar
Customization Guides & Code Snippets
◆Floating Variance with an Invisible Baseline Bar
Create the floating waterfall effect by stacking an invisible transparent bar underneath the change value.
<Bar dataKey="base" stackId="a" fill="transparent" />
<Bar dataKey="value" stackId="a" radius={[4, 4, 4, 4]}>
{data.map((d, i) => <Cell key={i} fill={d.value >= 0 ? '#00e5a0' : '#ff6b6b'} />)}
</Bar>When to use a Waterfall Chart
A Waterfall Chart is ideal for developers and designers who need to display data clearly and effectively. Use this chart type when:
- ✓Comparing values across multiple categories (e.g. monthly revenue per region)
- ✓Showing ranked data where order matters (e.g. top 10 products by sales)
- ✓Displaying survey results or poll responses
- ✓Visualizing before/after comparisons
Tips for Recharts Waterfall Chart
TIP 1Always start the Y-axis at zero to avoid misleading comparisons
TIP 2Use rounded corners (radius prop) for a modern, polished look
TIP 3Add a Tooltip component so users can see exact values on hover
TIP 4Use Cell components to color individual bars differently
TIP 5For long category names, switch to a horizontal bar chart layout
Key Recharts Props