Skip to main content

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

​
data
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.
​
width
number | string
The width of chart container. Can be a number or a percent string like “100%”.
​
height
number | string
The height of chart container. Can be a number or a percent string like “100%”.
​
margin
object
default:"{top: 5, right: 5, bottom: 5, left: 5}"
Empty space around the container.
​
nodeWidth
number
default:"10"
The width of node.
​
nodePadding
number
default:"10"
The padding between the nodes.
​
linkCurvature
number
default:"0.5"
The curvature of width.
​
iterations
number
default:"32"
The number of the iterations between the links.
​
node
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.
​
link
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.
​
sort
boolean
default:"true"
Whether to sort the nodes on the y axis, or to display them as user-defined.
​
verticalAlign
'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.
​
align
'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.
​
nameKey
string | number | function
default:"'name'"
Name represents each sector in the tooltip. Can be a string key name, number index, or function.
​
dataKey
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.
​
onClick
function
The customized event handler of click on the area in this group.
​
onMouseEnter
function
The customized event handler of mouseenter on the area in this group.
​
onMouseLeave
function
The customized event handler of mouseleave on the area in this group.
​
className
string
CSS class name for the chart container.
​
style
CSSProperties
Inline CSS styles for the chart container.
​
id
string
The unique id of chart.
​
throttleDelay
number | 'raf'
default:"'raf'"
Decides the time interval to throttle events.