Sankey

Props

• dataSankeyData

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

  Note that Sankey requires a specific data structure. Each node should have a unique index in the nodes array, and each link should reference these nodes by their indices. This is different from other chart types in Recharts, which accept arbitrary data.

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

• align"justify" | "left"optional

  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.

  DEFAULT: "justify"

• childrenReactNodeoptional

• classNamestringoptional

• dataKeyFunction | number | stringoptional

  dataKey prop in Sankey defines which key in the link objects represents the value of the link in Tooltip only.

  Unlike other charts where dataKey is used to extract values from the data array, in Sankey charts, the value of each link is directly taken from the 'value' property of the link objects.

  DEFAULT: "value"

• height`${number}%` | numberoptional

  The height of chart container. Can be a number or a percent string like "100%".

  Examples:

  • Chart sizing guide

• iterationsnumberoptional

  The number of the iterations between the links

  DEFAULT: 32

• linkFunction | React.SVGProps<SVGPathElement> | ReactNodeoptional

  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.

  FORMAT:

  <Sankey link={MyCustomComponent} />
  <Sankey link={{ fill: #77c878 }} />

• linkCurvaturenumberoptional

  The curvature of width

  DEFAULT: 0.5

• marginPartial<Margin>optional

  Empty space around the container.

  DEFAULT: {"top":5,"right":5,"bottom":5,"left":5}

• nameKeyFunction | number | stringoptional

  Name represents each sector in the tooltip. This allows you to extract the name from the data:

  • string: the name of the field in the data object;
  • number: the index of the field in the data;
  • function: a function that receives the data object and returns the name.

  DEFAULT: "name"

• nodeFunction | Props | ReactNodeoptional

  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.

  FORMAT:

  <Sankey node={MyCustomComponent} />
  <Sankey node={{stroke: #77c878, strokeWidth: 2}} />

• nodePaddingnumberoptional

  The padding between the nodes

  DEFAULT: 10

• nodeWidthnumberoptional

  The width of node

  DEFAULT: 10

• sortbooleanoptional

  Whether to sort the nodes on the y axis, or to display them as user-defined.

  DEFAULT: true

• styleReact.CSSPropertiesoptional

• throttleDelay"raf" | numberoptional

  Decides the time interval to throttle events. Only events defined in throttledEvents prop are throttled. All other events are executed immediately/synchronously.

  Options:

  • number: the time interval in milliseconds
  • 'raf': use requestAnimationFrame to schedule updates.

  DEFAULT: "raf"

• throttledEvents"all" | Array<keyof GlobalEventHandlersEventMap>optional

  Defines which events should be throttled. Events not in this list will not be throttled.

  Use the special value 'all' to throttle all events. Empty array means no events are throttled.

  Use the prop throttleDelay to define the throttling interval.

  If an event is on this list, then you lose the opportunity to access the event synchronously. Which means that if you want to call e.preventDefault() or e.stopPropagation() inside the event handler, then that event handler must not be in this list.

  DEFAULT: ["mousemove","touchmove","pointermove","scroll","wheel"]

• verticalAlign"justify" | "top"optional

  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.

  DEFAULT: "justify"

• width`${number}%` | numberoptional

  The width of chart container. Can be a number or a percent string like "100%".

  Examples:

  • Chart sizing guide

• 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