FunnelChart
Funnel or bar-style conversion chart.
stable
Quick Preview
Application funnel
Monthly buyer conversion
- 1,200 · 100%
- 420 · 35%
- 180 · 15%
- 96 · 8%
- Viewed
- Qualified
- Applied
- Approved
Usage
<FunnelChart data={stages} title="Pipeline" />Examples
Default FunnelChart
Use this as the starting point for FunnelChart. Keep product data, routing, fetching, and authorization logic in the consuming app.
Application funnel
Monthly buyer conversion
- 1,200 · 100%
- 420 · 35%
- 180 · 15%
- 96 · 8%
- Viewed
- Qualified
- Applied
- Approved
Props
| Prop/API | Type | Default | Description |
|---|---|---|---|
data | FunnelStage[] | - | Stage labels and values. |
type | `"funnel" | "bars"` | "funnel" |
legend | `"right" | "bottom"` | "right" |
className | string | - | Local layout or spacing overrides. |
| native/root props | React component props | - | Passed through to the underlying root or primitive. |
Accessibility
- Provide visible labels or accessible names for interactive controls.
- Preserve the component-provided focus, keyboard, disabled, and invalid-state behavior.
- Do not communicate state with color alone; include text, icons, or helper copy.