<Recharts />

Sankey

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%'

• dataObject

  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

• align'left' | 'justify'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