Appearance
Charts > Sankey diagram
The Sankey diagram represents a directed graph with no circular paths.
The Chart
Download example CSV
Copy HTML
Playground
Sankey node alignment strategy (left, right, justify, center)
Color of the links
Component API
The Sankey diagram represents a graph. The nodes are specified by the nodes data property and the links by the links property.
Data
js
{
nodes: [
{ id: "A" },
{ id: "B" },
{ id: "C" },
{ id: "D" }
],
links: [
{ source: "A", target: "B", value: 30 },
{ source: "A", target: "C", value: 10 },
{ source: "B", target: "C", value: 20 },
{ source: "B", target: "D", value: 20 }
],
}Props
| Name | Type | Default | Description |
|---|---|---|---|
data | Object | () => ({ nodes: [{ id: "A" }, ...] }) | The dataset for the chart (nodes and links) |
margin | Object | () => ({ top: 0, right: 0, ... }) | The margins of the chart (top, right, bottom, left) |
duration | Number | 300 | The duration of the animation in milliseconds |
nodeAlign | [String, Function] | 'justify' | Sankey node alignment strategy: left, right, justify, center |
color | [String, Object, Function] | d3.schemeCategory10 | The color scheme for the chart |
linkColor | [String, Function] | '#eee' | The color of the links between nodes |
highlighted | [String, Array] | null | The highlighted section(s) on the chart |
Data Shape for Uploadable CSV (example data)
| source | target | value |
|---|---|---|
| Solar Panel | Battery | 50 |
| Solar Panel | Appliance | 30 |
| Wind Turbine | Battery | 20 |
| Wind Turbine | Appliance | 10 |
| Battery | Device | 40 |
| Battery | Lights | 30 |
| Appliance | Device | 20 |
| Appliance | Lights | 10 |