Charts

Sankey Chart

Flows from up to six sources to their targets, one ribbon per link, with totals, shares, and a table of flows.

idle

Usage

import { SankeyChart } from "@mizen-labs/ui";

Five activities flowing into seven apps; ribbons wear their source's hue.

Guidance	Practice
Do	Order sources and targets so the largest flows run straight across; that keeps ribbons from crossing.

Guidance	Boundary
Scope	Two columns only: every link runs from a source to a target. Split multi-step flows into several charts.

Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.

Prop	Type	Default	Description
`sources / targets`	`readonly { id: string; label: string }[]`	`Required`	Left and right columns in display order. Up to six sources, each coloring its ribbons; targets use the neutral reference tone.
`links`	`readonly { source: string; target: string; value: number }[]`	`Required`	Non-negative flows between a known source and target. Node heights are the sums of their links.
`aria-label / formatValue / locale`	`string / (value: number) => string / string`	`Required / Locale formatting / "en-US"`	Names the figure and formats node totals and table values; targets show their share of the total.

Charts

Flows from up to six sources to their targets, one ribbon per link, with totals, shares, and a table of flows.

idle

import { SankeyChart } from "@mizen-labs/ui";

Five activities flowing into seven apps; ribbons wear their source's hue.

Guidance	Practice
Do	Order sources and targets so the largest flows run straight across; that keeps ribbons from crossing.

Guidance	Boundary
Scope	Two columns only: every link runs from a source to a target. Split multi-step flows into several charts.

Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.

Prop	Type	Default	Description
`sources / targets`	`readonly { id: string; label: string }[]`	`Required`	Left and right columns in display order. Up to six sources, each coloring its ribbons; targets use the neutral reference tone.
`links`	`readonly { source: string; target: string; value: number }[]`	`Required`	Non-negative flows between a known source and target. Node heights are the sums of their links.
`aria-label / formatValue / locale`	`string / (value: number) => string / string`	`Required / Locale formatting / "en-US"`	Names the figure and formats node totals and table values; targets show their share of the total.