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

Provided data

Tracked timeShare of tracked time

Tracked time: illustrative source-shaped fixture data
Category	Value
Focus → Browsing	10.4 h
Focus → Writing	8.2 h
Focus → Messaging	6.1 h
Focus → Productivity	5 h
Focus → Email	2.3 h
Meetings → Video calls	9.6 h
Meetings → Everything else	3.8 h
Meetings → Writing	3 h
Meetings → Email	1.6 h
Breaks → Everything else	5.6 h
Breaks → Browsing	3.6 h
Breaks → Video calls	2.8 h
Admin → Productivity	5.2 h
Admin → Writing	4 h
Admin → Messaging	3.2 h
Admin → Everything else	1.6 h
Learning → Browsing	4.6 h
Learning → Email	3.4 h
Learning → Messaging	2 h

Installation

Download the React source package, install its dependencies, and import the component with its shared styles.

Download React package Installation guide

'use client';
import {SourceChartPreview} from '@helios-ui/react';
import '@helios-ui/react/styles.css';

export default function Example(){return <SourceChartPreview id="sankey-chart-card"/>;}

Data

Define named nodes, optionally with colors, and links containing source, target and value. Links may refer to nodes by name or index. Flow values drive the node totals, headline, destination shares and hover relationships. Each range may supply its own links, headline and delta. Handle onRangeChange to load application data; the preview’s three ranges are local illustrative snapshots.

usage

'use client';
import {SourceChartPreview} from '@helios-ui/react';
import '@helios-ui/react/styles.css';

export default function Example(){return <SourceChartPreview id="sankey-chart-card" nodes={[{name:'Income'},{name:'Savings'},{name:'Expenses'}]} links={[{source:0,target:1,value:40},{source:0,target:2,value:60}]}/>;}

Advanced playground, API and recovery states ↗

Sankey Chart Card

Tracked time

Provided data

Tracked timeShare of tracked time

Tracked time: illustrative source-shaped fixture data
Category	Value
Focus → Browsing	10.4 h
Focus → Writing	8.2 h
Focus → Messaging	6.1 h
Focus → Productivity	5 h
Focus → Email	2.3 h
Meetings → Video calls	9.6 h
Meetings → Everything else	3.8 h
Meetings → Writing	3 h
Meetings → Email	1.6 h
Breaks → Everything else	5.6 h
Breaks → Browsing	3.6 h
Breaks → Video calls	2.8 h
Admin → Productivity	5.2 h
Admin → Writing	4 h
Admin → Messaging	3.2 h
Admin → Everything else	1.6 h
Learning → Browsing	4.6 h
Learning → Email	3.4 h
Learning → Messaging	2 h

Installation

Download the React source package, install its dependencies, and import the component with its shared styles.

Download React package Installation guide

'use client';
import {SourceChartPreview} from '@helios-ui/react';
import '@helios-ui/react/styles.css';

export default function Example(){return <SourceChartPreview id="sankey-chart-card"/>;}

Data

usage

'use client';
import {SourceChartPreview} from '@helios-ui/react';
import '@helios-ui/react/styles.css';

export default function Example(){return <SourceChartPreview id="sankey-chart-card" nodes={[{name:'Income'},{name:'Savings'},{name:'Expenses'}]} links={[{source:0,target:1,value:40},{source:0,target:2,value:60}]}/>;}

Advanced playground, API and recovery states ↗

Sankey Chart Card

Tracked time

Installation

Data

Search Helios UI

Sankey Chart Card

Tracked time

Installation

Data

Search Helios UI