Overview
DropOffChart visualizes user progression through multi-step processes like surveys, forms, or checkout flows. Each bar shows how many users reached that stage, with automatic drop-off rate calculation and problem highlighting.
Features
- Step-by-step progression bars
- Automatic drop-off rate calculation
- Problem stage highlighting (threshold-based)
- Retention from start percentage
- Horizontal or vertical orientation
- Stage click handler for drill-down
Examples
Basic Example
Survey completion flow
Survey Drop-off Analysis
Started
920
92% of total
-80(8%)
Demographics
780
78% of total
-140(15%)
Product Usage
650
65% of total
-130(17%)
Satisfaction
580
58% of total
-70(11%)
Recommendations
520
52% of total
-60(10%)
Completed
520
52% of total
Started: 1,000
Finished: 520(52%)
Problem Highlighting
Highlight stages with high drop-off
Problematic Survey Flow
Page 2 shows unusually high abandonment
Started
950
95% of total
-50(5%)
Page 1
580
58% of total
-370(39%)
Page 2 (Long)
520
52% of total
-60(10%)
Page 3
490
49% of total
-30(6%)
Review
450
45% of total
-40(8%)
Submitted
450
45% of total
Started: 1,000
Finished: 450(45%)
Vertical Orientation
Top-to-bottom flow
Checkout Flow
1
Cart
3,800 completed
76%
of total
-1,200(24.0%)
2
Shipping
2,900 completed
58%
of total
-900(23.7%)
3
Payment
2,650 completed
53%
of total
-250(8.6%)
4
Review
2,400 completed
48%
of total
-250(9.4%)
5
Complete
2,400 completed
48%
of total
Clickable Stages
Click stages for details
Click any stage
Started
920
92% of total
-80(8%)
Demographics
780
78% of total
-140(15%)
Product Usage
650
65% of total
-130(17%)
Satisfaction
580
58% of total
-70(11%)
Recommendations
520
52% of total
-60(10%)
Completed
520
52% of total
Started: 1,000
Finished: 520(52%)
Minimal View
Simple view without drop-off labels
Simple Progress
Cart
3,800
Shipping
2,900
Payment
2,650
Review
2,400
Complete
2,400
Started: 5,000
Finished: 2,400(48%)
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
stages | DropOffStage[] | required | Stages with id, label, value |
showAbandonment | boolean | true | Show drop-off percentages |
showPercentages | boolean | true | Show retention percentages |
highlightProblems | boolean | false | Highlight high drop-off stages |
threshold | number | 20 | Drop-off % to trigger highlight |
orientation | "horizontal" | "vertical" | "horizontal" | Chart orientation |
onStageClick | (stage) => void | - | Stage click handler |
isLoading | boolean | false | Show loading skeleton |
Usage
import { DropOffChart } from '@/ui/components/charts';
// Basic drop-off chart
<DropOffChart
stages={[
{ id: '1', label: 'Started', value: 1000 },
{ id: '2', label: 'Page 1', value: 920 },
{ id: '3', label: 'Page 2', value: 780 },
{ id: '4', label: 'Page 3', value: 650 },
{ id: '5', label: 'Completed', value: 580 },
]}
/>
// With problem highlighting
<DropOffChart
stages={stages}
showAbandonment
highlightProblems
threshold={15} // Highlight stages with >15% drop
/>
// Vertical orientation
<DropOffChart
stages={stages}
orientation="vertical"
showPercentages
onStageClick={(stage) => console.log('Stage:', stage)}
/>