Funnel Chart
A production-ready funnel chart for visualizing conversion pipelines and stage-by-stage drop-off. Three variants — tapered, straight, and horizontal chevron — for any dashboard layout.
Tapered, Straight & Horizontal
Conversion Rate Badges
Stagger Animation
Hover Tooltip
Responsive
TypeScript
Keyboard Accessible
Reduced Motion
E-commerce Conversion Funnel
Classic conversion funnel from visitors to purchase — try all three variants and toggle conversion rate badges
Loading…
Variant:
Installation
Get started with the FunnelChart component in just a few steps.
Quick Install
bash
npx mario-charts@latest add funnel-chartZero Lock-in Philosophy
The component is fully yours to own, modify, and customize.
Examples
Different use cases and configurations for the FunnelChart component.
Sales Pipeline — Horizontal Variant
Stage-by-stage pipeline as diminishing horizontal bars — labels on the left, bars extending right
Loading…
SaaS Onboarding Flow
6-stage onboarding funnel with conversion rate badges between each step
Loading…
Loading State
Error State
Chart Error
Failed to load data
Empty State
No Data
There's no data to display
API Reference
Complete TypeScript interface with all available props and configurations.
| Prop | Type | Default | Description |
|---|---|---|---|
datarequired | readonly T[] | — | Array of data objects for each funnel stage |
labelrequired | keyof T | — | Key for stage label text |
valuerequired | keyof T | — | Key for numeric stage value |
colors | readonly string[] | DEFAULT_COLORS | Array of colors, one per stage (cycles if fewer than stages) |
variant | 'tapered' | 'straight' | 'horizontal' | 'tapered' | Tapered shrinks by value ratio; straight uses uniform width; horizontal renders left-to-right chevrons |
showValues | boolean | true | Show numeric values inside stages |
showPercentages | boolean | true | Show % of total inside stages |
showConversionRates | boolean | false | Show conversion rate badge between each stage |
height | number | 400 | Height of the chart in pixels |
loading | boolean | false | Show loading skeleton state |
error | string | null | null | Error message to display |
animation | boolean | true | Enable stagger entrance animation |
onClick | (item: T, index: number) => void | — | Callback when a stage is clicked |
className | string | — | Additional CSS classes for the container |