Skip to main content

SankeyChart

The SankeyChart component visualizes the flow of data between multiple nodes. Each link represents a weighted connection from one node to another, making it ideal for showing how values are distributed or transferred across stages.

Result
Loading...
Live Editor
<SankeyChart
	data={[
		['Node A1', 'Node B1', 100],
		['Node A2', 'Node B1', 75],
		['Node A3', 'Node B1', 50],

		['Node B1', 'Node C1', 150],
		['Node B1', 'Node C2', 75],
	]}
	formatType="currency"
/>

Sequential Coloring​

If each column represents a group of related data, the colorMode prop can be used to make sure all nodes in a column are in the same color family.

Result
Loading...
Live Editor
<SankeyChart
	data={[
		['Node A1', 'Node B1', 50],
		['Node A1', 'Node B2', 35],
		['Node A1', 'Node B3', 15],
		['Node A2', 'Node B1', 30],
		['Node A2', 'Node B2', 20],
		['Node A2', 'Node B3', 10],
		['Node A3', 'Node B1', 50],
		['Node A3', 'Node B2', 35],
		['Node A3', 'Node B3', 15],

		['Node B1', 'Node C1', 130],
		['Node B2', 'Node C1', 90],
		['Node B3', 'Node C1', 40],

		['Node C1', 'Node D1', 260],

		['Node D1', 'Node E1', 130],
		['Node D1', 'Node E2', 130],
	]}
	formatType="currency"
	colorMode="sequential"
/>

Node Offset​

If one or more of your nodes needs to be offset, use the nodes prop to set the horizontal and/or vertical offset. See the official Highcharts documentation for more details.

Result
Loading...
Live Editor
<SankeyChart
	data={[
		['Node A1', 'Node B1', 100],
		['Node A2', 'Node B1', 75],
		['Node A3', 'Node B1', 50],

		['Node B1', 'Node C1', 150],
		['Node B1', 'Node C2', 75],
	]}
	formatType="currency"
	nodes={[
		{
			id: 'Node A1',
			offsetHorizontal: 100,
		},
		{
			id: 'Node C2',
			offsetHorizontal: -100,
		},
	]}
/>

Props​