Sankey Chart Card

A Sankey flow in the dashboard card shell. Recharts lays out the nodes and links; the card draws pill nodes in the chart tokens, tints every ribbon with its source's colour so each origin's flows read as one family, labels sources with name and value on the left and sinks with their share on the right, and isolates whatever you hover - node or link - while the headline follows.

Tracked time

86h

Tracked timeShare of tracked time

Installation

Sankey Chart Card is part of BoardUI Pro.

Dark mode ready - this component follows BoardUI semantic tokens automatically. Set up theme switching.

Pro access

Sankey Chart Card is a Pro component.

Your BoardUI Pro license unlocks this component and all of its source files. Activate your license once, then install it directly into your project with the CLI.

Activate your license

Use the key from your Lemon Squeezy purchase email. You only need to do this once per machine.

npx boardui@latest login YOUR_LICENSE_KEY

Install the component

The CLI copies the source and resolves every BoardUI and npm dependency for you.

npx boardui@latest add sankey-chart-card

This component is included in BoardUI Pro

Get BoardUI Pro now and install it right away.

Data

nodes is a { name, color? } list and links is { source, target, value }, referencing nodes by name or index. Node values, the headline total, sink shares, and hover relationships are all derived from the links. The period pill is a dropdown when you pass ranges - each range carries its own data (and optionally delta / headline) and the chart re-animates on selection; onRangeChange lets you fetch instead. With no data props the card ships three demo ranges, which is what the previews above use.

// Sources carry the colour - every ribbon leaving a node takes that node's// colour (linkColor="source", the default) - and sinks stay "neutral" so the// ribbons paint them. Nodes without a colour cycle the palette by index.const nodes = [  { name: "Focus", color: "var(--color-chart-7)" },  { name: "Meetings", color: "var(--color-chart-5)" },  { name: "Browsing", color: "neutral" },  { name: "Writing", color: "neutral" },  { name: "Email", color: "neutral" },];
// Links reference nodes by name (or index). Add a node + link and the// layout rebalances; the right-hand percentages are shares of all sinks.const links = [  { source: "Focus", target: "Browsing", value: 16.2 },  { source: "Focus", target: "Writing", value: 11.6 },  { source: "Focus", target: "Email", value: 3.4 },  { source: "Meetings", target: "Email", value: 1.2 },];
<SankeyChartCard  title="Tracked time"  nodes={nodes}  links={links}  format={(n) => `${n}h`}   // headline + source labels  range="This week"        // static pill…  axisLabels={["Tracked time", "Share of tracked time"]}/>
// …or a working period dropdown: each range overrides links (and nodes / delta / headline).<SankeyChartCard  nodes={nodes}  ranges={[    { id: "this-week", label: "This week", links: thisWeek },    { id: "last-week", label: "Last week", links: lastWeek },    { id: "this-month", label: "This month", links: thisMonth },  ]}/>