FunnelChart
Every example on this page is live, drawn by the library's Storybook, where you can also change its props and see the result.
A sequential funnel visualization using SVG trapezoids. Each stage narrows to represent drop-off, using patterns to differentiate stages. The last stage narrows to a spout.
The funnel stretches to fill whatever box the chart is given, including a widget's stored preview, while its outlines, patterns and labels keep their size. A funnel that widens is scaled so its widest stage still fits.
Import
import { FunnelChart } from "~lib/charts/funnel-chart";
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
data | { label: string; value: number; pattern?: PatternType }[] | Yes | N/A | Funnel stages |
showValues | boolean | No | false | Show numeric values on each stage |
showPercentage | boolean | No | true | Show percentage relative to first stage |
width | number | string | No | 300 | Chart width |
height | number | string | No | 300 | Chart height |
PatternType: "solid" | "diagonal" | "dots" | "crosshatch" — cycles automatically if not specified.