Sankey Chart

Sankey diagrams in REAVIZ provide a powerful way to visualize and analyze flows of energy, materials, or costs within a system. They help in identifying major transfers and understanding resource distribution, making them a valuable tool for data visualization.

Where to use:

Visualize Flow Quantities: Ideal for displaying flows of energy, materials, or costs.
Highlight Major Transfers: Useful for emphasizing significant transfers within a system.
Analyze Resource Distribution: Great for analyzing how resources are distributed and transferred.

Quick Start

To create Sankey Chart, import the Sankey, SankeyNode and SankeyLink and then define the nodes and then links. The chart will automatically configure itself with the default options exposed via props.



import {
Sankey,
SankeyNode,
SankeyLink
} from 'reaviz';


export default function App() {
return (
  <Sankey
    height={400}
    width={300}
    nodes={[
      <SankeyNode title="A1" id="1" />,
      <SankeyNode title="A2" id="2" />,
      <SankeyNode title="B1" id="3" />,
      <SankeyNode title="B2" id="4" />
    ]}
    links={[
      <SankeyLink source="1" target="3" value="8" />,
      <SankeyLink source="2" target="4" value="4" />,
      <SankeyLink source="1" target="4" value="2" />
    ]}
  />
);
}


import {
Sankey,
SankeyNode,
SankeyLink
} from 'reaviz';

export default function App() {
return (
  <Sankey
    height={400}
    width={300}
    nodes={[
      <SankeyNode title="A1" id="1" />,
      <SankeyNode title="A2" id="2" />,
      <SankeyNode title="B1" id="3" />,
      <SankeyNode title="B2" id="4" />
    ]}
    links={[
      <SankeyLink source="1" target="3" value="8" />,
      <SankeyLink source="2" target="4" value="4" />,
      <SankeyLink source="1" target="4" value="2" />
    ]}
  />
);
}

As default, the Sankey chart shows the link/flow with gradation based on the given colorScheme. You can turn off the gradation by passing false to SankeyLink component’s gradient property (e.g. gradient={false}).

Configuration

To render, the nodes and links of the Sankey component are required and colorScheme is optianal but is recommended to spacify to make Sankeys easier to interpret.

Nodes: Define the nodes using the SankeyNode component. Each node can have a title and id.
Links: Define the links using the SankeyLink component. Each link requires source, target, and value properties. The source and target can be the index of the nodes array or the node’s id

Examples

API

Sankey

Name	Type	Default
`animated`	`boolean` Whether to animate the enter/update/exit. Set internally by `SankeyNode` and `SankeyLink`.	`true`
`colorScheme`	`ColorSchemeType` Color scheme for the nodes. Set internally by `SankeyNode`.
`justification`	`Justification` The node alignment method.	`'justify'`
`nodeWidth`	`number` Width of the node.	`15`
`nodePadding`	`number` Vertical padding between nodes in the same column.	`10`
`labelPosition`	`SankeyLabelPosition` Label position.	`'inside'`
`nodeSort`	`(a: any, b: any) => number` Sort function for the nodes. If sort is specified, sets the node sort method and returns this Sankey generator. If sort is not specified, returns the current node sort method, which defaults to undefined, indicating that vertical order of nodes within each column will be determined automatically by the layout. If sort is null, the order is fixed by the input. Otherwise, the specified sort function determines the order; the function is passed two nodes, and must return a value less than 0 if the first node should be above the second, and a value greater than 0 if the second node should be above the first, or 0 if the order is not specified. Reference: https://github.com/d3/d3-sankey#sankey_nodeSort
`nodes`	`NodeElement[]` Nodes that are rendered.
`links`	`LinkElement[]` Links that are rendered.
`id`	`string` Id of the chart.
`width`	`number` Width of the chart. If not provided will autosize.
`height`	`number` Height of the chart. If not provided will autosize.
`margins`	`Margins` Margins for the chart.
`className`	`string` Classnames for the chart.
`containerClassName`	`string` Classnames for the chart.
`style`	`StyleHTMLAttributes<SVGSVGElement>` Additional css styles.
`center`	`boolean` Center the chart. Used mainly internally.
`centerX`	`boolean` Center chart on X Axis only. Used mainly internally.
`centerY`	`boolean` Center chart on Y Axis only. Used mainly internally.

SankeyLink

Name	Type	Default
`color`	`string` Color of the link.
`active`	`boolean` Whether the element is active or not. Set internally by `Sankey`.	`false`
`animated`	`boolean` Whether to animate the enter/update/exit.	`true`
`chartId`	`string` Id of Sankey chart. Set internally by `Sankey`.
`className`	`string` CSS class to apply.
`disabled`	`boolean` Whether the node is disabled. Set internally by `Sankey`.	`false`
`gradient`	`boolean` Whether to use gradient or not.	`true`
`opacity`	`(active: boolean, disabled: boolean) => number` Opacity callback for the link.
`style`	`object` CSS styles to apply.
`tooltip`	`ReactElement<TooltipProps, FC<TooltipProps>> \| null` Tooltip element.	`<Tooltip followCursor modifiers={[offset(5)]} />`
`width`	`number` Width of the link. Set internally by `Sankey`.	`0`
`onClick`	`(event: MouseEvent<SVGPathElement, MouseEvent>) => void` Event for when the link is clicked.
`onMouseEnter`	`(event: MouseEvent<SVGPathElement, MouseEvent>) => void` Event for when the link has mouse enter.
`onMouseLeave`	`(event: MouseEvent<SVGPathElement, MouseEvent>) => void` Event for when the link has mouse leave.

SankeyNode

Name	Type	Default
`id`	`string` ID of the node. If not provided, the node’s index will be used.
`title`	`string` Title of the node.
`color`	`string` Color of the node.	`DEFAULT_COLOR`
`active`	`boolean` Whether the element is active or not. Set internally by `Sankey`.	`false`
`animated`	`boolean` Whether to animate the enter/update/exit.	`true`
`chartWidth`	`number` Width of the chart. Set internally by `Sankey`.
`className`	`string` CSS class to apply.
`disabled`	`boolean` Whether the node is disabled. Set internally by `Sankey`.	`false`
`label`	`ReactElement<SankeyLabelProps, FC<Partial<SankeyLabelProps>>>` Label element.	`<SankeyLabel />`
`labelPosition`	`SankeyLabelPosition` Label position. Set internally by `Sankey`.
`labelPadding`	`number` Percentage of total width occupied by labels on either side of the graph inside the container. Set internally by `Sankey`.
`opacity`	`(active: boolean, disabled: boolean) => number` Opacity callback for the node.
`style`	`StyleHTMLAttributes<SVGRectElement>` CSS styles to apply.
`tooltip`	`ReactElement<TooltipProps, FC<TooltipProps>> \| null` Tooltip element.	`<Tooltip followCursor modifiers={[offset(5)]} />`
`width`	`number` Width of the node. Set internally by `Sankey`.
`onClick`	`(event: MouseEvent<SVGRectElement, MouseEvent>) => void` Event for when the node is clicked.
`onMouseEnter`	`(event: MouseEvent<SVGRectElement, MouseEvent>) => void` Event for when the node has mouse enter.
`onMouseLeave`	`(event: MouseEvent<SVGRectElement, MouseEvent>) => void` Event for when the node has mouse leave.