Sankey Chart

Sankey is a visualization used to depict a flow from one set of values to another with proportional magnitudes. The things being connected are called nodes and the connections are called links. It is built with d3. Here's a preview:

Live Editor

Usage

1 . Import SankeyChart after installation

import { SankeyChart } from "@k2/d3-viz";

2 . Add data or URL to SankeyChart component.

<SankeyChart data={SankeyChartData} />

// or

<SankeyChart url="server/api/data" />

Examples

Sankey chart with node and link props: Demo

<SankeyChart

data={SankeyChartData}

linkProps={{

mode: "gradient",

}}

nodeProps={{

shape: "rect",

width: 25,

}}

/>

Sankey chart with grid layout: Demo

<SankeyChart data={SankeyChartData} disableGrid={false} />

Sankey chart with animation Demo

<SankeyChart data={SankeyChartData} />

Sankey Chart with tooltip formatter Demo

<SankeyChart

data={SankeyChartData}

tooltip={{

formatter({ data }) {

return `${data.sourceId} to ${data.targetId}`;

},

}}

/>

Sankey Chart with Classes: Demo

<SankeyChart

data={SankeyChartData}

classes={{

chart: "chart-sankey",

header: "header-sankey",

label: "label-sankey",

link: "link-sankey",

node: "node-sankey",

root: "root-sankey",

title: "title-sankey",

tooltip: "tooltip-sankey",

}}

/>

Props

Property	Type	Required	Default value	Description
data	SankeyChartData	yes		Data for SankeyChart.
nodeProps	NodeProps	no	Mentioned in NodeProps	Node Props API of chart to customize nodes.
linkProps	LinkProps	no	Mentioned inLinkProps	Link Props API of chart to customize links.
title	string | JSX.Element	no	None	Title of the chart.
animate	boolean	no	true	Enable the animation.
disableGrid	boolean	no	true	Disable grid of SankeyChart.
label	boolean | LabelComponent	no	true	Enable or customize the labels.
tooltip	boolean | TooltipProps	no	true	Enable or customize the tooltip.
colors	{[theme-mode: e.g "light" or "dark"] : SankeyColors }	no	None	Colors of visual in different theme modes
width	number	no	700	Width of SankeyChart.
height	number	no	400	Height of SankeyChart.
onClick	(event: { type: "node" | "link"; data: D3SankeyNode | D3SankeyLink; }) => void	no	None	Callback for node or link click.
style	CSSProperties	no	None	Styles applied to the root element of chart.
className	string	no	None	Class applied to the root element of chart.
classes	Classes	no	None	Classes of chart.

SankeyChart is wrapped with fetchData HoC, to perform data handling tasks, which adds support for some additional props.

Custom Types

SankeyChartData

Here is the format of the data accepted by SankeyChart.

type SankeyChartData = {

nodes: {

id: string | number;

label: string;

level: string;

color?: string;

}[];

links: {

id: string | number;

sourceId: string | number;

targetId: string | number;

value: number;

color?: string;

}[];

};

D3SankeyNode

Type of the object containing information of a Sankey node.

type D3SankeyNode = {

dx: number;

dy: number;

id: string | number;

label: string;

sourceLinks: D3SankeyLink[];

targetLinks: D3SankeyLink[];

level: string;

value: number;

x: number;

y: number;

color: string;

};

D3SankeyLink

Type of the object containing information of a Sankey link.

type D3SankeyLink = {

dy: number;

id: string | number;

sourceId: string | number;

targetId: string | number;

originalIndex: number;

source: D3SankeyNode;

sy: number;

target: D3SankeyNode;

ty: number;

y0: number;

value: number;

color: string;

};

LabelComponent

This is a type of custom label component. You can create a custom label component by this.

type LabelComponent = (args: {

data: D3SankeyNode,

linkMode: "gradient" | "default",

}) => JSX.Element;

SankeyColors

This is a type of sankey colors props.

type SankeyColors = {

nodeColorScheme: string[],

linkColor: string,

};

NodeProps

NodeProps allows customization of chart nodes.

Property	Type	Required	Default value	Description
width	number	no	20	Width of nodes.
padding	number	no	20	Padding between nodes on same level.
shape	"rect" | "ellipse"	no	rect	Shape of NodeProps (rect or eclipse).
colorScheme	string[]	no	["#BB856F", "#B6B17C", "#66cdaa", "#42C0FB", "#0077ff", "#9090FF", "#B86DFF", "#074700", "#FF99FF", "#F1536A"]	Color scheme of nodes.

LinkProps

LinkProps allows customization of chart links.

Property	Type	Required	Default value	Description
mode	"gradient" | "default"	no	default	Color mode of link (default or gradient).
color	string	no	#828282	Color of links (Only applicable when mode is default).

Classes

Classes enable customization and styling of chart elements through their classes.

ClassName	Type	Required	Default value	Description
root	string	no	None	Applied to root element of chart.
header	string	no	None	Applied to header of chart.
title	string	no	None	Applied to title of chart.
tooltip	string	no	None	Applied to tooltip of chart.
chart	string	no	None	Applied to svg component of chart.
label	string	no	None	Applied to labels of chart.
node	string	no	None	Applied to node of chart.
link	string	no	None	Applied to link of chart.
grid	string	no	None	Applied to grid of chart.

Please see Class Specificity for correctly defining it.