Sankey Chart
Encode flow volume between categories using proportionally weighted links.
Source
LLM docs
Package
npm install @plocks/chartsExamples
6
Properties
46
Playground
Basics
Flow diagram showing volume between nodes.
Loading demo…
import { SankeyChart } from '@plocks/charts';
import { LINKS, NODES } from './data';
export function Demo() {
return (
<SankeyChart
title="Renewable energy flow"
h={360}
nodes={NODES}
links={LINKS}
/>
);
}Budget Allocation
Loading demo…
import { SankeyChart } from '@plocks/charts';
import { LINKS, NODES } from './data';
export function Demo() {
return (
<SankeyChart
title="Budget allocation flow"
subtitle="FY26 operating plan"
h={400}
nodes={NODES}
links={LINKS}
/>
);
}Cloud Provisioning
Loading demo…
import { SankeyChart } from '@plocks/charts';
import { LINKS, NODES } from './data';
export function Demo() {
return (
<SankeyChart
title="Cloud provisioning workflow"
subtitle="Quarterly environment requests"
nodes={NODES}
links={LINKS}
/>
);
}Customer Journey
Loading demo…
import { SankeyChart } from '@plocks/charts';
import { LINKS, NODES } from './data';
export function Demo() {
return (
<SankeyChart
title="Customer journey flow"
subtitle="Q3 acquisition to retention"
h={420}
nodes={NODES}
links={LINKS}
/>
);
}Data Lineage
Loading demo…
import { SankeyChart } from '@plocks/charts';
import { LINKS, NODES } from './data';
export function Demo() {
return (
<SankeyChart
title="Analytics data lineage"
subtitle="Daily load pipeline"
h={420}
nodes={NODES}
links={LINKS}
/>
);
}Talent Pipeline
Loading demo…
import { SankeyChart } from '@plocks/charts';
import { LINKS, NODES } from './data';
export function Demo() {
return (
<SankeyChart
title="Engineering talent pipeline"
subtitle="Campus + lateral hiring"
h={420}
nodes={NODES}
links={LINKS}
/>
);
}Related charts
Further reading
React Native design for iOS, Android, and Web.
Quick Links
Resources