Recharts

SankeyChart

Child Components

<Tooltip />

Properties

nameKeyStringoptional
The key of each sector's name.
DEFAULT: name
dataKeyString | Number | Functionoptional
The key of a group of data which should be unique in a SankeyChart.
DEFAULT: value
widthPercentage | Number
The percentage value of the chart's width or a fixed width.
DEFAULT: '100%'
heightPercentage | Number
The percentage value of the chart's width or a fixed height.
DEFAULT: '100%'

The source data, including the array of nodes, and the relationships, represented by links.

FORMAT:

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 },
],

sortBooleanoptional
Whether to sort the nodes on th y axis, or to display them as user-defined.
DEFAULT: true
nodePaddingNumberoptional
The padding between the nodes
DEFAULT: 10
nodeWidthNumber
The width of node
DEFAULT: 10
linkWidthNumber
The width of link
linkCurvatureNumber
The curvature of width
DEFAULT: 0.5
iterationsNumber
The number of the iterations between the links
DEFAULT: 32
nodeObject | ReactElementoptional
If set a object, the option is the configuration of nodes. If set a React element, the option is the custom react element of drawing the nodes.
FORMAT:
```
<Sankey node={<MyCustomComponent />} />
<Sankey node={{stroke: #77c878, strokeWidth: 2}} />
```
linkObject | ReactElementoptional
If set a object, the option is the configuration of links. If set a React element, the option is the custom react element of drawing the links.
FORMAT:
```
<Sankey link={<MyCustomComponent />} />
<Sankey link={{fill: #77c878 }} />
```
marginObject
The sizes of whitespace around the container.
DEFAULT: { top: 5, right: 5, bottom: 5, left: 5 }
FORMAT:
```
{ top: 5, right: 5, bottom: 5, left: 5 }
```
onClickFunctionoptional
The customized event handler of click on the area in this group
onMouseEnterFunctionoptional
The customized event handler of mouseenter on the area in this group
onMouseLeaveFunctionoptional
The customized event handler of mouseleave on the area in this group
sourceXNumber
The source number of X-axis
sourceYNumber
The source number of Y-axis
sourceControlXNumber
The source control of X-axis
targetControlXNumber
The target control of X-axis
targetXNumber
The target of X-axis
targetYNumber
The target of Y-axis