Chart is a namespace, not a renderable component. Use Chart.Funnel.
A funnel has no axes, so a step has no x, y, or seriesId. It is a labeled stage, the same
shape a pie slice takes. format and currency render the step values in the tooltip.
Steps draw in the order they are sent. Each step’s conversion is measured against the one before
it, so the first step is the whole and always draws at 100%.
A funnel keeps a minimum of 120px per step and draws wider than its container rather than squeeze.
The extra width scrolls horizontally. Keep the steps to a handful.
See Using charts for height tokens, color tokens, format, and the
empty and error states.
Example
TypeScript
Props
Array<ChartFunnelStep>
required
Two or more steps, in the order they are passed through. Each step is
{label, value, color?}.
label is drawn above the stage. color defaults to "blue".An empty list, or a first step whose value is 0, draws No data.'number' | 'compact' | 'percent' | 'currency' | 'date' | 'datetime'
How step values are rendered. See Using charts.
string
An ISO 4217 code, for example
"USD". Required when format is "currency", and rejected for
every other format.string
A caption above the chart.
'small' | 'medium' | 'large' | 'extraLarge'
The height of the whole chart, including title.Defaults to
"medium" (240px). See Using charts.