Funnel Chart

Conversion funnels. Pro · Charts and analytics › Shares and composition

Conversion funnel: bars narrowing per stage, with step and overall conversion.

Installation

npx valyro-cli@latest login
npx valyro-cli@latest add funnel-chart

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { FunnelChart } from 'valyro-ui-pro';

Prop	Type	Default
`data` *	`FunnelStage[]`		Stages top to bottom; bar widths are relative to the largest value, conversion to the first and previous stage.
`color`	`string`	`'var(--ui-chart-1)'`	Any CSS color. Default `--ui-chart-1`.
`align`	`'start' \| 'center'`	`'start'`	`start`: bars line up next to the stage labels. `center`: a symmetric funnel shape. Default `start`.
`valueFormatter`	`ValueFormatter`		Formats stage values, drop-offs between stages, the summary and the data table.
`locale`	`string`		BCP 47 locale for the default number formatting. Default: the `ThemeProvider` locale, then the browser's.
`labels`	`Partial<FunnelChartLabels>`		Overrides for the built-in strings.
`ariaLabel` *	`string`		Accessible name of the chart (also the caption of its sr-only data table).

Donut Chart — Donut charts
Treemap — Hierarchies as areas, with drill-down
Sankey Chart — Flow diagrams between stages
Radar Chart — Radar charts for comparing profiles
Line Chart — Line charts
Bar Chart — Bar charts
Area Chart — Filled area charts
Scatter Chart — Scatter and bubble charts with a trend line
Sparkline — Tiny inline charts
Confidence Band Chart — Forecast with confidence intervals and outliers, keyboard-readable points
Candlestick Chart — Stock candlesticks with volume and moving averages
Heatmap — Heatmaps