Sankey Chart

Диаграммы потоков между этапами. Pro · Графики и аналитика › Доли и структура

Установка

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

npm install valyro-ui-pro

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

Prop	Type	Default
`nodes` *	`SankeyNode[]`		Nodes referenced by link ids; a node's height follows its larger of inflow and outflow, unlinked nodes are hidden.
`links` *	`SankeyLink[]`		Flows between nodes. Links that would close a cycle are not drawn.
`height`	`number`	`360`	Plot height in px; width follows the container. Default 360.
`nodeWidth`	`number`		Width of a node bar in px. Default: the theme's `--ui-sankey-chart-node-w` (10 in Vercel, 14 in Glass).
`nodePadding`	`number`	`16`	Vertical gap between nodes in px (less when a column is crowded). Default 16.
`align`	`'justify' \| 'left'`	`'justify'`	`justify` puts nodes without outflow in the last column; `left` keeps them at their depth.
`valueFormatter`	`ValueFormatter`		Formats node and link values in labels, the tooltip and the data table.
`locale`	`string`		BCP 47 locale for the default number formatting. Default: the `ThemeProvider` locale, then the browser's.
`labels`	`Partial<SankeyChartLabels>`		Overrides for the built-in strings.
`loading`	`boolean`	`false`	Shows a placeholder of the same height while data loads.
`ariaLabel` *	`string`		Accessible name of the chart (also the caption of its sr-only data table).