Sankey Chart

Flow between stages (budget → departments, traffic → outcomes). Link color follows its source node; link tooltips on hover, or focus + arrow keys.

Import

import { SankeyChart } from '@marbleui/ui'

Props

<SankeyChart>

Prop	Type	Default
links *required	`SankeyLink[]`	`—`
nodes *required	`SankeyNode[]`	`—`
summary *required	`string`	`—`
className	`string`	`—`
height	`number`	`300`
title	`string`	`—`
valueFormat	`(n: number) => string`	`formatCompact`

Usage notes

Flows that split and merge between stages, such as budget into departments or sign-ups into plans. For a single linear path use FunnelChart.

<SankeyChart
  title="Sign-up outcomes, October"
  summary="Of 4.2K sign-ups, 2.6K started a trial and 1.6K stayed free; 900 trials converted to paid."
  nodes={[{ id: 'signup', label: 'Sign-up' }, { id: 'trial', label: 'Trial' }, { id: 'free', label: 'Free plan' }, { id: 'paid', label: 'Paid' }]}
  links={[{ source: 'signup', target: 'trial', value: 2600 }, { source: 'signup', target: 'free', value: 1600 }, { source: 'trial', target: 'paid', value: 900 }]}
/>

Links point at nodes by id. An unknown id or a cycle (A → B → A) makes the d3-sankey layout throw.
A node’s colour follows its position in nodes (--chart-1…8, repeating after eight) and each link takes its source’s colour.
valueFormat applies to node totals, tooltips and the table. Raise height (default 300) when many nodes share a column.
Link tooltips open on hover, or on keyboard: Tab focuses the plot and arrow keys step through links in links order, with a live region reading each flow. The “Show data” table (From / To / Value) lists them all.

Example source · show

import { SankeyChart } from './sankey-chart'

const nodes = [{ id: 'visits', label: 'Visits' }, { id: 'signup', label: 'Sign-up' }, { id: 'bounce', label: 'Bounced' }, { id: 'trial', label: 'Trial' }, { id: 'free', label: 'Free plan' }, { id: 'paid', label: 'Paid' }, { id: 'churn', label: 'Churned' }]
const links = [{ source: 'visits', target: 'signup', value: 4200 }, { source: 'visits', target: 'bounce', value: 15800 }, { source: 'signup', target: 'trial', value: 2600 }, { source: 'signup', target: 'free', value: 1600 }, { source: 'trial', target: 'paid', value: 900 }, { source: 'trial', target: 'churn', value: 1700 }]
export const styles = { Funnel: () => <SankeyChart className="w-[38rem] max-w-full" title="Visitor flow, October" summary="Of 20K visits, 4.2K signed up; 2.6K started a trial and 900 converted to paid." nodes={nodes} links={links} /> }

Source: packages/ui/src/sankey-chart/sankey-chart.tsx

Catalog