Flows between stages — credits from plans to models to outcomes — with widths proportional to the amounts.

WebBetaCharts

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

When to use

Where an amount goes, in two or three steps: credits by plan, then by model, then by outcome.
A journey with branches: viewers from sources to subscriptions.

When not to use

A single sequence of stages that only loses people.Use instead: Funnel
A split at one level.Use instead: Pie and donut chart

Installation

Install

npm install @krizaka/charts

Import

import { Sankey } from "@krizaka/charts/sankey";

Examples

Credit flow

A month of Orazaka credits, from plans to models to outcomes.

Where the credits went (k)

Flow diagram, 7 · 11. Chat → Delivered 211 (47%), Pro plans → Chat 182 (40%), Studio plans → Video 121 (27%). Total 452.

Where the credits went (k) — data
From	To	Credits (k)
Pro plans	Chat	182
Pro plans	Image	64
Studio plans	Video	121
Studio plans	Image	48
Studio plans	Chat	37
Chat	Delivered	211
Chat	Refunded	8
Image	Delivered	104
Image	Refunded	8
Video	Delivered	109
Video	Refunded	12

Props

Prop	Type	Default	Description
`data`required	`readonly T[]`	—	One row per flow.
`source`required	`string \| ((datum: T, index: number) => string)`	—	The fields (or functions) naming where the flow comes from and where it goes.
`target`required	`string \| ((datum: T, index: number) => string)`	—	The field (or function) naming where the flow goes.
`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 its amount.
`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 amounts are written.
`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.
`sourceLabel`	`string`	—	The headers of the data table.
`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).
`targetLabel`	`string`	—	The header of the targets.
`valueLabel`	`string`	—	The header of the amounts.
`vertical`	`boolean`	—	Lay the stages out top to bottom (narrow screens). Default: left to right.

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 keyboard walks the flows; the table lists every source, target and amount.

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

Keep to about a dozen nodes; group the small flows.
Use vertical on narrow screens.

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

Sankey