Funnel
Vertical conversion funnel — each stage is a trapezoid narrowing toward the next, with optional conversion labels.
Category: chart · WCAG 2.1-AA · chart, funnel, conversion, flow, data-viz
Props
| Prop | Type | Default | Description |
|---|---|---|---|
data | FunnelStage[] | — | Ordered stages (descending): { id, label, value, color? }. |
title | string | — | Chart title (also used as aria-label). |
description | string | — | Subtitle below the title. |
width | number | — | Fixed SVG width in px. ⚠ **Omit for a responsive chart** — the chart fills and tracks its container via a ResizeObserver; there is no correct pixel number in a responsive grid. A fixed width is clamped to the container (max-inline-size: 100%) so it can never overflow its card, but it also stops the chart growing. `useChartSize` is NOT needed for this — charts call it internally. |
height | number | 320 | SVG height in px. Unlike `width`, height does NOT track the container — this is the knob you set to change the chart's aspect. |
showConversion | boolean | false | Append each stage’s % of the first stage to its label. |
tooltip | boolean | — | Enable hover tooltip. |
className | string | — | Additional CSS class names merged onto the root element. |
plain | boolean | false | Marks only — no labels. For micro/inline charts. |
Design tokens
--cascivo-chart-1--cascivo-chart-2--cascivo-chart-3--cascivo-chart-4--cascivo-chart-5--cascivo-chart-6--cascivo-chart-7--cascivo-chart-8
When to use
- Showing drop-off across the ordered stages of a process (signup, checkout)
- Communicating stage-to-stage conversion at a glance
When not to use
- Stages are not strictly decreasing — use BarChart
- Showing a trend over time — use LineChart
Examples
Signup conversion funnel
import { Funnel } from '@cascivo/charts'
<Funnel
title="Signup funnel"
showConversion
data={[
{ id: 'visit', label: 'Visited', value: 8200 },
{ id: 'signup', label: 'Signed up', value: 3100 },
{ id: 'active', label: 'Activated', value: 1400 },
{ id: 'paid', label: 'Paid', value: 520 },
]}
/>Related components
- BarChart — Use when stages aren’t monotonically decreasing