Loading...
Loading...
> Visualize conversion funnels with interactive stages showing values and conversion rates.
1import { FunnelChart } from "@/components/ui/funnel-chart"
Visitors
10,000
Leads
5,000
50.0% conversion
Qualified
2,500
50.0% conversion
Proposals
1,000
40.0% conversion
Customers
400
40.0% conversion
1const salesFunnel = [2 { label: "Visitors", value: 10000 },3 { label: "Leads", value: 5000 },4 { label: "Qualified", value: 2500 },5 { label: "Proposals", value: 1000 },6 { label: "Customers", value: 400 },7];89<FunnelChart data={salesFunnel} />
Impressions
50,000
Clicks
5,000
Sign-ups
1,000
Active Users
500
1<FunnelChart2 data={funnel}3 showPercentages={false}4/>
Impressions
Clicks
Sign-ups
Active Users
1<FunnelChart2 data={funnel}3 showValues={false}4 showPercentages={false}5/>
Stage 1
1,000
Stage 2
750
75.0% conversion
Stage 3
500
66.7% conversion
1<FunnelChart2 data={funnel}3 height={250}4 width={400}5/>
Visitors
10,000
Leads
5,000
50.0% conversion
Qualified
2,500
50.0% conversion
Proposals
1,000
40.0% conversion
Customers
400
40.0% conversion
1<FunnelChart2 data={funnel}3 onStageClick={(stage, index) => {4 // Handle stage click - show toast, navigate, etc.5 }}6/>
Stage 1
1,000
Stage 2
750
75.0% conversion
Stage 3
500
66.7% conversion
1<FunnelChart2 data={funnel}3 height={200}4 width={300}5 gap={4}6/>
Impressions
50,000
Clicks
5,000
10.0% conversion
Sign-ups
1,000
20.0% conversion
Active Users
500
50.0% conversion
1const marketingFunnel = [2 { label: "Impressions", value: 50000 },3 { label: "Clicks", value: 5000 },4 { label: "Sign-ups", value: 1000 },5 { label: "Active Users", value: 500 },6];78<FunnelChart data={marketingFunnel} />
Stage 1
1,000
Stage 2
750
75.0% conversion
Stage 3
500
66.7% conversion
1// Hover effects built-in automatically2<FunnelChart data={funnel} />
| Prop | Type | Default | Description |
|---|---|---|---|
| data | FunnelStage[] | - | Array of funnel stages with label and value |
| height | number | 400 | Height of the funnel chart in pixels |
| width | number | 600 | Width of the funnel chart in pixels |
| gap | number | 8 | Gap between funnel stages in pixels |
| showValues | boolean | true | Display numeric values on stages |
| showPercentages | boolean | true | Show conversion rate percentages between stages |
| direction | "vertical" | "horizontal" | "vertical" | Orientation of the funnel (vertical only currently supported) |
| className | string | - | Additional CSS classes for the container |
| onStageClick | (stage: FunnelStage, index: number) => void | - | Callback when a funnel stage is clicked |