Funnel Chart

Charts
Analytics

Visualize conversion flows, drop-offs, and multi-step processes with vertical, horizontal, and tapered funnel variants.

Preview

Vertical and tapered funnel variants

Task Completion Funnel

Last 30 days

8.5% Overall
Tasks Created
10,000100.0%
10,000
100.0% conversion
📅
Scheduled
6,50065.0%
6,500
65.0% conversion-35.0% drop-off
In Progress
2,80028.0%
43.1% conversion-56.9% drop-off
Under Review
1,20012.0%
42.9% conversion-57.1% drop-off
Completed
8508.5%

Project Progress Funnel

Project lifecycle stages

15.0% Overall
Ideation
1,000
100.0%
Planning
650
65.0%
In Progress
400
40.0%
Review
220
22.0%
Completed
150
15.0%

Horizontal Funnel

Compact left-to-right layout for conversion flows

User Onboarding Flow

Account creation to team collaboration

9.6% Overall
50,000
100%
24%
12,000
24%
71%
8,500
17%
73%
6,200
12%
77%
4,800
10%
Account Created
Profile Setup
First Project
First Task
Team Invited

Props

Component API reference

PropTypeDefaultDescription
title*string—Card title
subtitlestring—Card subtitle
data*Record<string, unknown>[]—Array of funnel stage data
labelKey*string—Key for stage label in data
valueKey*string—Key for stage value in data
variant'vertical' | 'horizontal' | 'tapered''vertical'Funnel layout variant
colorsstring[]—Custom color array for stages
showPercentagesbooleantrueShow conversion percentages
classNamestring—Additional CSS classes

Usage

Import and implementation examples

import { FunnelChartCard } from '@/blocks/charts/funnel-chart'

// Vertical funnel
const taskFunnel = [
  { stage: 'Tasks Created', count: 10000 },
  { stage: 'Scheduled', count: 6500 },
  { stage: 'In Progress', count: 2800 },
  { stage: 'Completed', count: 850 }
]

<FunnelChartCard
  title="Task Completion Funnel"
  subtitle="Last 30 days"
  data={taskFunnel}
  labelKey="stage"
  valueKey="count"
  variant="vertical"
/>

// Tapered funnel with custom colors
<FunnelChartCard
  title="Project Progress"
  data={projectData}
  labelKey="name"
  valueKey="value"
  variant="tapered"
  colors={['var(--color-indigo-600)', 'var(--color-violet-500)', 'var(--color-teal-500)']}
/>

// Horizontal funnel
<FunnelChartCard
  title="User Onboarding"
  data={onboardingData}
  labelKey="step"
  valueKey="users"
  variant="horizontal"
/>

Features

Built-in functionality

  • 3 variants: Vertical, horizontal, and tapered funnel styles
  • Conversion rates: Automatic calculation of drop-off percentages
  • Custom icons: Support for icons and emojis per stage
  • Custom colors: Configurable color palette for stages
  • Card wrapper: Built-in card with title and subtitle
  • Dark mode: Full dark mode support

Accessibility

Accessibility considerations

ARIA Attributes

Uses semantic list structureStage values announced to screen readersPercentage changes included in labels

Keyboard Navigation

KeyAction
N/AFunnel chart is not interactive by default

Notes

  • Color is supplemented with text values
  • Conversion rates shown as percentages
  • Consider providing data table for complex funnels

Related Components

Bar ChartProgressStatistic