Stages that lose people on the way, with the conversion from each stage to the next and from the first written beside it.

WebBetaCharts

Web only — React, from @krizaka/charts/funnel. Beta: its API may still change in a minor version.

When to use

A sign-up or purchase journey: visit, sign-up, verification, first video, first sale.

When not to use

Flows that branch.Use instead: Sankey
Stages that do not contain each other.Use instead: Bar chart

Installation

Install

npm install @krizaka/charts

Import

import { Funnel } from "@krizaka/charts/funnel";

Examples

Orochia's creator sign-up, from visit to first sale.

Creator sign-up, September

Funnel, 5. Visited the creator page → Created an account 20%, Created an account → Verified their identity 64%, Verified their identity → Published a first video 52%, Published a first video → Made a first sale 37%. Overall 2.4%.

Creator sign-up, September — data
Stage	Creators	% of visits	% of previous
Visited the creator page	48,200	100%	—
Created an account	9,640	20%	20%
Verified their identity	6,170	13%	64%
Published a first video	3,210	6.7%	52%
Made a first sale	1,180	2.4%	37%

Props

Prop	Type	Default	Description
`data`required	`readonly T[]`	—	One row per stage, first stage first.
`label`required	`string \| ((datum: T, index: number) => string)`	—	The field (or function) naming the stage.
`title`required	`string`	—	What the chart shows, in a few words: its accessible name, and its heading unless `hideTitle`.
`value`required	`string \| ((datum: T, index: number) => number)`	—	The field of how many reached it.
`brand`	`BrandId`	—	The brand whose palette the charts use. Without it, a chart follows a `.brand-<id>` ancestor, else Krizaka. Set it when the app loads a brand stylesheet on `:root` (`@krizaka/tokens/brands/orazaka.css`).
`className`	`string`	—	A class on the figure (layout: margins, grid placement).
`dataTable`	`boolean`	—	The "Show data" button (the table is in the page for screen readers either way). Default true.
`description`	`ReactNode`	—	A sentence under the title: the period, the unit, the source.
`empty`	`ReactNode`	—	What to show when there is nothing to draw (default: the `empty` label). An `EmptyState` of @krizaka /ui fits.
`error`	`ReactNode`	—	The data could not be loaded: `true` says the default words, a node says yours (a retry button…).
`exportable`	`boolean \| readonly ExportFormat[]`	—	Export buttons: `true` for PNG, SVG and CSV, or the formats you want.
`format`	`ValueFormat`	—	How the counts are written. Default `"integer"`.
`fromFirstLabel`	`string`	—	The header of the share of the first stage. Default “% first”.
`fromPreviousLabel`	`string`	—	The header of the share of the previous stage. Default “% previous”.
`height`	`number`	—	The height of the plot in pixels. Default 280 (a sparkline: 32).
`hideTitle`	`boolean`	—	Visually hide the title (it stays the chart's accessible name): a card that already has its heading.
`id`	`string`	—	The id of the figure.
`labels`	`ChartLabelsInput`	—	The words, translated: the buttons, the states, the written summary.
`live`	`boolean`	—	Streaming data (a job queue, an auction): no entrance on updates, no announcement of every new point.
`loading`	`boolean`	—	The data is on its way: a skeleton of the chart, announced once.
`locale`	`Locale`	—	The locale of every figure and date (`"fr-FR"`). Default `"en-US"`.
`renderer`	`Renderer`	—	`svg` (default): sharp, exportable as SVG. `canvas`: for tens of thousands of marks.
`stageLabel`	`string`	—	The headers of the data table: the stage, the count, the share of the first, of the previous.
`style`	`CSSProperties`	—	Inline style on the figure (layout only: colours come from the tokens).
`summary`	`"hidden" \| "visible"`	—	The written summary: read by screen readers only (`"hidden"`, default), or shown under the chart (`"visible"`).
`summaryText`	`string`	—	Your own summary instead of the generated one (still read first by screen readers).
`valueLabel`	`string`	—	The header of the counts.

Accessibility

The plot is a group named by the title and described by a summary written from the data, read before anything else.
The data table is always in the page for assistive technology; “Show data” reveals it for everyone.
The engine (ECharts core and this one chart type) loads when the chart nears the screen; a skeleton of the same height holds its place, so nothing shifts.
Under reduced motion the chart is drawn without animation.
The summary says each step's conversion and the overall one.

Keyboard

Keys	Action
`Tab`	Moves the focus to the plot (one tab stop), then to the data and export buttons.
`Arrow keys`	Walk the items one by one: each is announced and highlighted, its tooltip shown.
`Home / End`	Jump to the first or the last item.
`Esc`	Hides the tooltip and clears the highlight.

Best practices

Order the stages as the journey goes; each count includes the next.
Name the columns of the table in your language (fromFirstLabel, fromPreviousLabel).

Generated from the code of @krizaka/ui 2.4.0: its meta.ts, its examples and its types.Edit this documentation on GitHub

Funnel