> ## 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

> API reference for the Sankey component

Sankey is a flow diagram in which the width of the arrows is proportional to the flow rate. It is typically used to visualize energy or material or cost transfers between processes.

```tsx 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 },
  ],
};

<Sankey
  width={960}
  height={500}
  data={data}
  nodeWidth={10}
  nodePadding={60}
  linkCurvature={0.5}
  iterations={32}
>
  <Tooltip />
</Sankey>
```

## Props

<ParamField path="data" type="object" required>
  The source data, including the array of nodes, and the relationships, represented by links. Each node should have a unique index in the nodes array, and each link should reference these nodes by their indices.

  <Expandable title="properties">
    <ParamField path="nodes" type="array" required>
      Array of node objects. Each node should have a name property.
    </ParamField>

    <ParamField path="links" type="array" required>
      Array of link objects. Each link should have source, target, and value properties, where source and target are indices of nodes.
    </ParamField>
  </Expandable>
</ParamField>

<ParamField path="width" type="number | string">
  The width of chart container. Can be a number or a percent string like "100%".
</ParamField>

<ParamField path="height" type="number | string">
  The height of chart container. Can be a number or a percent string like "100%".
</ParamField>

<ParamField path="margin" type="object" default="{top: 5, right: 5, bottom: 5, left: 5}">
  Empty space around the container.

  <Expandable title="properties">
    <ParamField path="top" type="number" />

    <ParamField path="right" type="number" />

    <ParamField path="bottom" type="number" />

    <ParamField path="left" type="number" />
  </Expandable>
</ParamField>

<ParamField path="nodeWidth" type="number" default="10">
  The width of node.
</ParamField>

<ParamField path="nodePadding" type="number" default="10">
  The padding between the nodes.
</ParamField>

<ParamField path="linkCurvature" type="number" default="0.5">
  The curvature of width.
</ParamField>

<ParamField path="iterations" type="number" default="32">
  The number of the iterations between the links.
</ParamField>

<ParamField path="node" type="ReactElement | function | object">
  If set an object, the option is the configuration of nodes. If set a React element, the option is the custom react element of drawing the nodes.
</ParamField>

<ParamField path="link" type="ReactElement | function | object">
  If set an object, the option is the configuration of links. If set a React element, the option is the custom react element of drawing the links.
</ParamField>

<ParamField path="sort" type="boolean" default="true">
  Whether to sort the nodes on the y axis, or to display them as user-defined.
</ParamField>

<ParamField path="verticalAlign" type="'justify' | 'top'" default="'justify'">
  Controls the vertical spacing of nodes within a depth. 'justify' distributes nodes evenly and balances link paths, while 'top' positions the group starting from the top edge of the chart.
</ParamField>

<ParamField path="align" type="'left' | 'justify'" default="'justify'">
  If set to 'justify', the start nodes will be aligned to the left edge of the chart and the end nodes will be aligned to the right edge of the chart. If set to 'left', the start nodes will be aligned to the left edge of the chart.
</ParamField>

<ParamField path="nameKey" type="string | number | function" default="'name'">
  Name represents each sector in the tooltip. Can be a string key name, number index, or function.
</ParamField>

<ParamField path="dataKey" type="string | number | function" default="'value'">
  dataKey prop in Sankey defines which key in the link objects represents the value of the link in Tooltip only.
</ParamField>

<ParamField path="onClick" type="function">
  The customized event handler of click on the area in this group.
</ParamField>

<ParamField path="onMouseEnter" type="function">
  The customized event handler of mouseenter on the area in this group.
</ParamField>

<ParamField path="onMouseLeave" type="function">
  The customized event handler of mouseleave on the area in this group.
</ParamField>

<ParamField path="className" type="string">
  CSS class name for the chart container.
</ParamField>

<ParamField path="style" type="CSSProperties">
  Inline CSS styles for the chart container.
</ParamField>

<ParamField path="id" type="string">
  The unique id of chart.
</ParamField>

<ParamField path="throttleDelay" type="number | 'raf'" default="'raf'">
  Decides the time interval to throttle events.
</ParamField>