Overview
FunnelChart provides a true tapered funnel visualization for showing conversion rates and drop-off. Perfect for user journey analysis, onboarding flows, and survey completion tracking.
Features
- True tapered funnel visualization
- Drop-off percentage indicators
- Vertical and horizontal orientations
- Tapered or stepped visual styles
- Interactive tooltips with details
- Overall conversion summary
Examples
Basic Funnel
Standard conversion funnel
User Conversion Funnel
Visited100%
Signed Up35%
Activated21%
Purchased9%
Overall conversion: 8.5%
With Drop-off Indicators
Show drop-off between stages
Survey Completion
Invited100%
Started85%↓ 15.0% drop-off
Page 176%↓ 10.6% drop-off
Page 264%↓ 15.8% drop-off
Completed57%↓ 10.9% drop-off
Overall conversion: 57.0%
Funnel Styles
Visual style options
Tapered (Default)
Visited100%
Signed Up35%
Activated21%
Purchased9%
Overall conversion: 8.5%
Stepped
Visited100%
Signed Up35%
Activated21%
Purchased9%
Overall conversion: 8.5%
Horizontal Orientation
Horizontal layout option
Conversion Flow
Visited100%
Signed Up35%
Activated21%
Purchased9%
Overall conversion: 8.5%
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
data | FunnelStage[] | required | Array of funnel stages |
showPercentages | boolean | true | Show percentage labels |
showDropOff | boolean | false | Show drop-off between stages |
orientation | "vertical" | "horizontal" | "vertical" | Funnel orientation |
style | "tapered" | "stepped" | "tapered" | Visual style |
onStageClick | function | - | Click handler for stages |
Usage
import { FunnelChart, ChartCard } from '@/ui/components/charts';
// Basic conversion funnel
<ChartCard title="User Conversion" height="auto">
<FunnelChart
data={[
{ label: 'Visited', value: 10000 },
{ label: 'Signed Up', value: 3500 },
{ label: 'Activated', value: 2100 },
{ label: 'Purchased', value: 850 },
]}
showPercentages
/>
</ChartCard>
// With drop-off indicators
<FunnelChart
data={conversionFunnel}
showDropOff
showPercentages
/>
// Stepped style (flat bars)
<FunnelChart
data={conversionFunnel}
style="stepped"
showPercentages
/>
// Horizontal orientation
<FunnelChart
data={conversionFunnel}
orientation="horizontal"
/>
// With click handler
<FunnelChart
data={conversionFunnel}
onStageClick={(stage, value) => {
console.log(`Clicked ${stage}: ${value}`);
}}
/>