> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/recharts/recharts/llms.txt
> Use this file to discover all available pages before exploring further.

# 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

```jsx theme={null}
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>
  );
}
```

<Note>
  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
</Note>

## Custom node width and padding

<CodeGroup>
  ```jsx Wide nodes theme={null}
  <Sankey
    width={960}
    height={500}
    data={data}
    nodeWidth={20}
    nodePadding={40}
  />
  ```

  ```jsx Narrow nodes theme={null}
  <Sankey
    width={960}
    height={500}
    data={data}
    nodeWidth={5}
    nodePadding={80}
  />
  ```
</CodeGroup>

## Link curvature

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

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

<Note>
  `linkCurvature` ranges from 0 to 1. Default is 0.5.
</Note>

## Custom node colors

```jsx theme={null}
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

```jsx theme={null}
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

<CodeGroup>
  ```jsx Top aligned theme={null}
  <Sankey
    width={960}
    height={500}
    data={data}
    verticalAlign="top"
  />
  ```

  ```jsx Justified (default) theme={null}
  <Sankey
    width={960}
    height={500}
    data={data}
    verticalAlign="justify"
  />
  ```
</CodeGroup>

<Note>
  * `"justify"`: Distributes nodes evenly and balances link paths
  * `"top"`: Positions nodes starting from the top edge
</Note>

## Horizontal alignment

<CodeGroup>
  ```jsx Left aligned theme={null}
  <Sankey
    width={960}
    height={500}
    data={data}
    align="left"
  />
  ```

  ```jsx Justified (default) theme={null}
  <Sankey
    width={960}
    height={500}
    data={data}
    align="justify"
  />
  ```
</CodeGroup>

<Note>
  * `"justify"`: Start nodes align left, end nodes align right
  * `"left"`: All nodes align to the left
</Note>

## Disable node sorting

```jsx theme={null}
<Sankey
  width={960}
  height={500}
  data={data}
  sort={false}
/>
```

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

## Custom iterations

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

## Event handlers

```jsx theme={null}
<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>
```

<Note>
  Event handlers receive three parameters:

  * `item`: The node or link data
  * `type`: Either `'node'` or `'link'`
  * `event`: The mouse event
</Note>

## With margin

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

## Complex flow example

```jsx theme={null}
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.