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.

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.

Show properties

nodes · array · required

Array of node objects. Each node should have a name property.

links · array · required

Array of link objects. Each link should have source, target, and value properties, where source and target are indices of nodes.

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.

Show properties

top · number

right · number

bottom · number

left · number

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.