Sankey diagram

Examples and usage of Sankey component

The Sankey component creates flow diagrams where the width of arrows is proportional to flow quantity. It’s ideal for visualizing energy transfers, material flows, cost distributions, or any process with inputs and outputs.

Basic sankey diagram

import { Sankey, Tooltip } from 'recharts';

const data = {
  nodes: [
    { name: 'Visit' },
    { name: 'Direct-Favourite' },
    { name: 'Page-Click' },
    { name: 'Detail-Favourite' },
    { name: 'Lost' },
  ],
  links: [
    { source: 0, target: 1, value: 3728.3 },
    { source: 0, target: 2, value: 354170 },
    { source: 2, target: 3, value: 62429 },
    { source: 2, target: 4, value: 291741 },
  ],
};

function Example() {
  return (
    <Sankey
      width={960}
      height={500}
      data={data}
      nodeWidth={10}
      nodePadding={60}
      linkCurvature={0.5}
      iterations={32}
    >
      <Tooltip />
    </Sankey>
  );
}

Sankey requires a specific data structure:

• nodes: Array of objects with at least a name property
• links: Array of objects with source, target (node indices), and value properties

Custom node width and padding

Wide nodes

<Sankey
  width={960}
  height={500}
  data={data}
  nodeWidth={20}
  nodePadding={40}
/>

Link curvature

<Sankey
  width={960}
  height={500}
  data={data}
  linkCurvature={0.2}  // Less curved
/>

<Sankey
  width={960}
  height={500}
  data={data}
  linkCurvature={0.8}  // More curved
/>

linkCurvature ranges from 0 to 1. Default is 0.5.

Custom node colors

const CustomNode = (props) => {
  const { x, y, width, height, payload } = props;
  const colors = ['#3C898E', '#486DF0', '#6F50E5', '#8B4DE6', '#A349DC'];
  const color = colors[payload.depth % colors.length];
  
  return (
    <rect
      x={x}
      y={y}
      width={width}
      height={height}
      fill={color}
      rx={2}
    />
  );
};

<Sankey
  width={960}
  height={500}
  data={data}
  node={<CustomNode />}
>
  <Tooltip />
</Sankey>

Custom link colors

const CustomLink = (props) => {
  const {
    sourceX,
    targetX,
    sourceY,
    targetY,
    sourceControlX,
    targetControlX,
    linkWidth,
    payload,
  } = props;
  
  return (
    <path
      d={`
        M${sourceX},${sourceY}
        C${sourceControlX},${sourceY} ${targetControlX},${targetY} ${targetX},${targetY}
      `}
      fill="none"
      stroke="#8884d8"
      strokeWidth={linkWidth}
      strokeOpacity={0.5}
    />
  );
};

<Sankey
  width={960}
  height={500}
  data={data}
  link={<CustomLink />}
/>

Vertical alignment

Top aligned

<Sankey
  width={960}
  height={500}
  data={data}
  verticalAlign="top"
/>

• "justify": Distributes nodes evenly and balances link paths
• "top": Positions nodes starting from the top edge

Horizontal alignment

Left aligned

<Sankey
  width={960}
  height={500}
  data={data}
  align="left"
/>

• "justify": Start nodes align left, end nodes align right
• "left": All nodes align to the left

Disable node sorting

<Sankey
  width={960}
  height={500}
  data={data}
  sort={false}
/>

By default, nodes are sorted vertically. Set sort={false} to preserve the order from your data.

Custom iterations

<Sankey
  width={960}
  height={500}
  data={data}
  iterations={64}  // More iterations = better link positioning
/>

Event handlers

<Sankey
  width={960}
  height={500}
  data={data}
  onClick={(item, type, event) => {
    console.log(`Clicked ${type}:`, item);
  }}
  onMouseEnter={(item, type, event) => {
    console.log(`Mouse entered ${type}:`, item);
  }}
  onMouseLeave={(item, type, event) => {
    console.log(`Mouse left ${type}:`, item);
  }}
>
  <Tooltip />
</Sankey>

Event handlers receive three parameters:

• item: The node or link data
• type: Either 'node' or 'link'
• event: The mouse event

With margin

<Sankey
  width={960}
  height={500}
  data={data}
  margin={{ top: 20, right: 20, bottom: 20, left: 20 }}
/>

Complex flow example

const complexData = {
  nodes: [
    { name: 'Income' },
    { name: 'Budget' },
    { name: 'Investment' },
    { name: 'Saving' },
    { name: 'Housing' },
    { name: 'Food' },
    { name: 'Stocks' },
    { name: 'Crypto' },
  ],
  links: [
    { source: 0, target: 1, value: 8500 },
    { source: 1, target: 2, value: 2300 },
    { source: 1, target: 3, value: 500 },
    { source: 1, target: 4, value: 3384 },
    { source: 1, target: 5, value: 800 },
    { source: 2, target: 6, value: 1800 },
    { source: 2, target: 7, value: 500 },
  ],
};

<Sankey
  width={960}
  height={500}
  data={complexData}
  nodeWidth={15}
  nodePadding={50}
>
  <Tooltip />
</Sankey>

Common pitfalls

• Data structure: Links must reference nodes by their array index (0-based), not by name or id.
• Node order: The order of nodes in the array affects visualization. Place source nodes before target nodes for best results.
• Responsive sizing: Sankey doesn’t support responsive mode. Always use fixed width and height.
• Missing values: Every link must have a value property. Missing or zero values may cause rendering issues.
• Tooltip event type: Sankey only supports 'item' tooltip event type.
• Cyclic flows: Sankey diagrams are designed for acyclic flows (no loops). Cycles in data may produce unexpected results.