Charts

Sankey Diagram

How an amount flows between stages — traffic sources into pages and outcomes, a budget into departments. Links are as wide as their value. Drawn as SVG by the component, rendered on the server and themed by the design tokens.

Part of @tectra-ng/charts (npm install @tectra-ng/charts, also included in tectra-ng).

Features10

API

Theming

Basic

Nodes stand in columns by stage and links are as wide as their value. Hover a node to light its flows, or a link for its value and share of the source.

Visitors from source to outcome. Sankey diagram, 12 flows
Category	Value
Search → Home page	4.2K
Ads → Home page	2.6K
Ads → Pricing	1.4K
Social → Home page	1.8K
Email → Pricing	900
Home page → Pricing	3.1K
Home page → Docs	2.2K
Home page → Left	3.3K
Pricing → Signed up	2.3K
Pricing → Left	3.1K
Docs → Signed up	700
Docs → Left	1.5K

Budget

Without nodes the ids are the names. A node can collect flows from many sources — here every department pays salaries.

Budget by department. Sankey diagram, 9 flows
Category	Value
Budget → Engineering	4.2M
Budget → Sales	1.9M
Budget → Operations	1.1M
Engineering → Salaries	3.3M
Engineering → Cloud	900K
Sales → Salaries	1.2M
Sales → Events	700K
Operations → Office	650K
Operations → Salaries	450K

Align

align="left" puts every node right after its sources, so "Solved" stands next to triage instead of in the last column. showValues turns the numbers off.

Support tickets. Sankey diagram, 6 flows
Category	Value
Email → Triage	320
Chat → Triage	540
Triage → Solved	610
Triage → Engineering	250
Engineering → Fixed	190
Engineering → Won't fix	60

Events

nodeClick reports a node with its in and out totals, linkClick a flow with its value.

Leads by stage. Sankey diagram, 4 flows
Category	Value
Leads → Qualified	420
Leads → Lost	380
Qualified → Won	160
Qualified → Lost	260

Click a node or a link.

10 lines

<div class="wrap">  <tx-sankey-chart    [links]="links"    [height]="260"    ariaLabel="Leads by stage"    (nodeClick)="onNode($event)"    (linkClick)="onLink($event)"  />  <p class="log" aria-live="polite">{{ message() }}</p></div>

Loading and empty

loading keeps the size with a skeleton; empty links show "No data".

No data

12 lines

<div class="wrap">  <div class="controls">    <button txButton label="Load data" variant="outlined" (click)="load()"></button>    <button txButton label="Clear" variant="text" (click)="links.set([])"></button>  </div>  <tx-sankey-chart    [links]="links()"    [loading]="loading()"    [height]="240"    ariaLabel="Loaded flows"  /></div>

Live

New links redraw in place — nodes and flows slide to their new size.

Monthly flows. Sankey diagram, 4 flows
Category	Value
Web → Trial	20
App → Trial	37
Trial → Paid	49
Trial → Churned	61

6 lines

<div class="wrap">  <div class="controls">    <button txButton label="Next month" variant="outlined" (click)="next()"></button>  </div>  <tx-sankey-chart [links]="links()" [height]="280" ariaLabel="Monthly flows" /></div>

Accessibility

Tab to the chart: the arrow keys walk the nodes column by column, each one lights its flows and is announced with its in and out totals. Screen readers also get a summary and a hidden table of every flow.

Website visitors. Sankey diagram, 12 flows
Category	Value
Search → Home page	4.2K
Ads → Home page	2.6K
Ads → Pricing	1.4K
Social → Home page	1.8K
Email → Pricing	900
Home page → Pricing	3.1K
Home page → Docs	2.2K
Home page → Left	3.3K
Pricing → Signed up	2.3K
Pricing → Left	3.1K
Docs → Signed up	700
Docs → Left	1.5K

Design tokens

dt sets the node width, the gap between nodes, their radius, how strongly the links take the node colour, the edge between them and the labels of one chart.

Energy use. Sankey diagram, 5 flows
Category	Value
Solar → Grid	30
Wind → Grid	45
Gas → Grid	25
Grid → Homes	40
Grid → Industry	60

14 lines

<tx-sankey-chart    [links]="links"    [height]="280"    [dt]="{      sankey: {        nodeWidth: '22',        nodePadding: '24',        nodeRadius: '6px',        linkStrength: '45%',        linkEdgeWidth: '2',      },    }"    ariaLabel="Energy use"  />

Pass through

pt reaches the parts — node, link, label, plot, tooltip and more.

Order fulfilment. Sankey diagram, 4 flows
Category	Value
Orders → Shipped	820
Orders → Cancelled	90
Shipped → Delivered	790
Shipped → Returned	30

9 lines

<tx-sankey-chart    [links]="links"    [height]="260"    [pt]="{      link: { style: { 'stroke-linecap': 'round' } },      label: { style: { 'text-transform': 'uppercase', 'font-size': '11px' } },    }"    ariaLabel="Order fulfilment"  />

Unstyled

unstyled removes the tectra styles: no tokens, no motion — the layout, the colours, the tooltip and the keyboard stay, ready for your own CSS.

Category	Value
A → C	5
B → C	3
C → D	8