Sankey Chart

Flow diagrams between stages. Pro · Charts and analytics › Shares and composition

Installation

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).

Donut Chart — Donut charts
Treemap — Hierarchies as areas, with drill-down
Funnel Chart — Conversion funnels
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