Chart Funnel

Charts how much of a population survives each stage of a sequence.

Configurations

Supported configurations for this component.

2 examples

Neutral

Tone from data

One command adds this component to your project.

Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.

npx shadcn@latest add @aicanvas/••••••••••••

Light and dark both come with the install and follow the dark class on <html>, the shadcn dark mode setup (next-themes with attribute="class").

Every prop this component accepts. Any other prop is forwarded to the underlying element.

Prop	Type	Default	Description
idreq	`string`	-	Stable key for the stage.
labelreq	`string`	-	Stage name, shown under the band.
valuereq	`number`	-	Absolute count at this stage. Must be <= the previous stage's value; a funnel where a stage grows is not a funnel.
tone	`'neutral'\|'accent'\|'warning'\|'fault'\|'context'`	'neutral'	How healthy this stage's reading is. Derive it from the data, never assign it to make the chart colourful.

Prop	Type	Default	Description
stagesreq	`FunnelStage[]`	-	Ordered stages, widest first. Two or more.
percentOf	`'first'\|'previous'`	'first'	What each stage's percentage is measured against: the top of the funnel (overall conversion) or the stage before it (step conversion).
valueFormatter	`(value:number)=>string`	-	Formats the count shown above each band. Defaults to a thousands-separated integer.
height	`number`	200	Height of the band area in px. Labels and values sit outside it.
emptyLabel	`string`	'No data'	Shown in place of the chart when `stages` is empty.
onStageSelect	`(stage:FunnelStage, index:number)=>void`	-	Called when a stage is clicked or activated by keyboard.
className	`string`	-	Additional CSS classes applied to the root element.
style	`React.CSSProperties`	-	Inline styles applied to the root element.

Displays a status message in the flow of the page, at a severity from note to fault.

Represents a person as a square image tile that falls back to their initials.

Displays the state a row or cell reports, such as online, queued, or fault.