Charts

Funnel

Conversion stages as bars on a shared track, each with its value and its share of the first stage.

idle

Usage

import { Funnel } from "@mizen-labs/ui";

The flow presentation in a card.

Stages with icons, values, and each stage's share of the first.

presentation="flow" draws one narrowing band with each stage's share and value tiles.

Guidance	Practice
Do	Order stages as users move through them, and keep one hue: length already shows the drop-off.

Guidance	Boundary
Scope	Shares are relative to the first stage, not to the previous one. State step conversion in text when it matters.

Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.

Prop	Type	Default	Description
`stages`	`readonly { id: string; label: string; value: number; icon?: ReactNode }[]`	`Required`	Ordered stages, each in its palette color; up to six unless tone sets one hue. Bars and shares are relative to the first stage.
`aria-label`	`string`	`Required`	Names the funnel for assistive technology.
`formatValue / locale / tone`	`(value: number) => string / string / ChartSeriesTone`	`Locale number formatting / "en-US" / palette per stage`	Formats values. tone draws every stage in one hue.