Bar
Funnel Chart
Shows conversion stages from top to bottom. Essential for sales pipelines and user funnels.
Loading chart…
#funnel#conversion#sales#pipeline
Customization Guides & Code Snippets
◆Adding Percentage Conversion Labels
To show step-by-step conversion dropoff, use LabelList with a custom formatter or calculate the percentage against the first stage value.
<LabelList position="right" fill="#e8eaed" stroke="none" dataKey="value" formatter={(val: number) => `${val.toLocaleString()} (${Math.round((val / 10000) * 100)}%)`} />◆Customizing Stage Colors with Cell
Wrap each step with a Cell component inside Funnel to apply distinct brand gradient colors per pipeline stage.
<Funnel dataKey="value" data={data} isAnimationActive>
{data.map((entry, index) => (
<Cell key={index} fill={entry.fill} />
))}
</Funnel>When to use a Funnel Chart
A Funnel 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 Funnel 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