Funnel Chart
ProA tapered chart rendered as SVG trapezoids, showing progressive reduction through sequential stages — conversion funnels, sales pipelines, or onboarding steps. Each stage is labelled with its value and the drop-off percentage from the previous stage. Colour intensity increases from top to bottom to draw the eye toward the final conversion.
4 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Default | Standard vertical funnel with trapezoidal stages, labels, and drop-off percentages. | Use for conversion funnels, sales pipelines, or any sequential filtering process. |
| Horizontal | A horizontal funnel reading left to right for inline dashboard use. | Use when vertical space is limited or the funnel is embedded in a wider layout. |
Usage Guidelines
Show the absolute value and percentage for each stage.
Reorder stages — the funnel must reflect the actual sequential process.
Display the drop-off rate between consecutive stages.
Use a funnel for non-sequential data — use a bar chart instead.
Order stages sequentially from widest (top/left) to narrowest (bottom/right).
Omit labels — the shape alone is not enough to read precise values.
Provide a data table alternative for screen reader users.
Include more than 7 stages — the chart becomes too compressed.
Code
Design Tokens
Accessibility
- Use role="img" with aria-label and aria-describedby for a text summary.
- Include a hidden data table with stage names, values, and drop-off rates.
- Label each stage directly — do not rely on shape width to convey values.
- Use sufficient contrast between the stage fill and its text label.