The Funnel component visualises a staged process where volume decreases (or changes) at each step, making the proportion of items reaching each stage immediately apparent. Common uses include document review completion rates (submitted → under review → approved), procurement pipelines, and milestone stage progression.
Modes
| Mode | Description |
|---|
| Stepped | Rectangular bars of varying width stacked vertically. Clear and structured. Best for formal reports. |
| Smooth | Tapered trapezoid shape between steps. Classic funnel look. |
| Inverted triangle | Triangle narrowing from top to bottom. Emphasises attrition. |
| Pyramid | Triangle widening from top to bottom. Used when values increase rather than decrease through stages. |
Data binding
| Property | Description |
|---|
| Stage field | Field defining the label for each stage. |
| Value field | Count or sum at each stage. |
| Sort order | Manual (in field order), Descending (largest first), or Ascending. |
| Color field | Optional field to color each stage independently. |
Proportional heights
| Setting | Description |
|---|
| Proportional | Each segment's height is proportional to its value. Visually accurate to volume. |
| Equal | All segments have the same height regardless of value. Cleaner for small differences. |
Conversion metrics
Enable conversion metrics to show the percentage retained from stage to stage:
| Property | Description |
|---|
| Show conversion % | Display the percentage of the previous stage retained at each step. |
| Show absolute value | Display the raw count alongside the conversion percentage. |
| Conversion label position | Inside the bar, outside right, or tooltip only. |
| Highlight drop-off | Color-code stages where conversion drops below a threshold. |
Appearance options
| Option | Description |
|---|
| Stage colors | Individual color per stage or a gradient across all stages. |
| Gap between stages | Pixel gap between funnel sections (0 = no gap). |
| Data labels | Show the stage name, value, and/or percentage inside or beside each section. |
| Legend | Show/hide. Useful when stage labels are truncated inside narrow sections. |
Good practice
- Sort stages in their natural process order (submitted first, approved last). Do not sort by value unless the chart is explicitly a ranking view.
- Use conversion percentages to make the drop-off at each stage explicit — this is often the most important insight.
- Keep the number of stages to ≤ 8 for readability.
- For PDF export, the Stepped mode is the most legible.