Data & Charts
Funnel Chart
Shows drop-off across sequential stages, each with a label and value.
Usage
Impressions2,620,120
Product View180,410
Initiate Checkout861
Purchases246
60k48k36k24k12k0
JanFebMarAprMayJunJulAugSepOctNovDec
Installation
npm install @wunderui/reactThen import what you need:
import { FunnelChart } from "@wunderui/react"Examples
Stages
Each stage with its value and a bar for its share.
| 4 stages |
|---|
Impressions2,620,120 Product view180,410 Checkout861 Purchases246 60k48k36k24k12k0 JanFebMarAprMayJunJulAugSepOctNovDec |
| 3 stages |
|---|
Impressions2,620,120 Product view180,410 Checkout861 60k48k36k24k12k0 JanFebMarAprMayJunJulAugSepOctNovDec |
Figma variants
All 14 Funnel Chart cards of the Figma library, each loading the way it does on a page: the skeleton first, then the series draw themselves in. Hover a card to replay.
Type 01
Funnel Charts
Type 02
Funnel Charts
Type 03
Funnel Charts
Total Profits
Type 04
Funnel Charts
Total Profits
Type 05
Funnel Charts
Total Profits
Type 06
Funnel Charts
Type 07
Funnel Charts
Type 08
Funnel Charts
Total Profits
Type 09
Funnel Charts
Total Profits
Type 10
Funnel Charts
Total Profits
Type 11
Funnel Charts
Type 12
Funnel Charts
Type 13
Funnel Charts
Type 14
Funnel Charts
In context
How the component is used inside real screens — the same compositions as the Usage section of the Figma page.
Signup funnel
Where visitors drop off on the way to a paid plan.
Signup funnel
September
Visitors48,200
Signed up6,120
Activated2,940
Paid812
60k48k36k24k12k0
JanFebMarAprMayJunJulAugSepOctNovDec