The Sankey Chart Widget Node visualizes flow relationships between categories, where the width of each connection (link) is proportional to its value. It is ideal for tracking inputs to outputs, energy consumption, customer journeys and more...
What Is a Sankey Chart?
A Sankey chart represents flows from sources to destinations with arrows or lines. Each link is defined by a source, destination, and a numeric value. This chart is useful for tracing distributions and identifying where resources, traffic, or data diverge or converge in a system.
Step-by-Step: How to Configure the Sankey Chart Widget Node
-
Add the widget
-
Drag the Sankey Chart Widget Node from the Visualizations panel to the canvas.
-
-
Connect the widget to the data source
-
Link the widget to an upstream workflow node that emits the array of flow objects.
-
Each object must contain at least:
-
Source
-
Destination
-
Value
-
-
-
Open configuration
-
Double-click the widget to open the configuration window.
-
General Settings
| Field | Requirement | Description |
|---|---|---|
| Widget Name* | Required | Main title of the chart (e.g., Power Distribution Flow). |
| Widget Subtitle | Optional | Supporting label below the title. |
| Show UID / Label Name | Optional | Toggle to show device or label identifier. |
| Refresh Interval (seconds) | Optional | How often the chart updates (default: 60 seconds). |
Flow Data Settings
| Field | Requirement | Description |
|---|---|---|
| JSON Key (for Value Array)* | Required | The main key in the payload that holds the list of flows. |
| Source JSON Key* | Required | The field within each object that defines the source. |
| Destination JSON Key* | Required | The field that defines the destination. |
| Value JSON Key* | Required | The field that holds the numeric value of the flow. |
| Calculation* | Optional | Choose how values are aggregated (default: Last value received). |
The expected data format is:
{
"flows": [
{ "source": "A", "destination": "B", "value": 120 },
{ "source": "A", "destination": "C", "value": 30 },
{ "source": "B", "destination": "D", "value": 50 }
]
}
Color Picker
| Field | Requirement | Description |
|---|---|---|
| Value | Optional | Name of a source, destination, or category. |
| Hex Color | Optional | Assign color to that value’s flow for better distinction. |
Add multiple mappings to apply consistent visual identity across flows.
Tooltip & Interface
| Field | Requirement | Description |
|---|---|---|
| Enable Tooltip | Optional | Show flow value on hover. |
| Tooltip Text | Optional | Custom message to appear in the tooltip box. |
| Add to Interface* | Required | Select one or more interfaces where this widget is displayed. |
Grouping & Display
| Field | Requirement | Description |
|---|---|---|
| Select Label | Optional | Use device label to group flows by source or system. |
| Grouped Display Mode | Optional | Choose: - No Grouping - Group by Label Value - Group by Label Name |
| Number of Widgets to Display | Optional | Limit the number of grouped Sankey charts shown. |
Use Cases
-
Track resource flow (e.g., electricity, water, fuel)
-
Analyze website/user navigation (e.g., homepage → products → checkout)
-
Visualize conversion funnels
-
Model input/output material balance
Best Practices
-
Ensure clean and consistent source/destination labels
-
Group flows into meaningful segments for clarity
-
Use color coding to differentiate key categories or flow directions
-
Keep flow counts manageable (ideally under 15 links) for readability
-
Use tooltip to enhance interpretation without cluttering the view
Frequently Asked Questions (FAQ)
Q: What if the same source appears more than once?
A: All flows from that source will be visualized proportionally by value. You can color them for easier distinction.
Q: Can flows be directional left-to-right?
A: Yes, the direction is determined by source → destination logic.
Q: Can the widget handle live updates?
A: Yes, it refreshes based on the interval setting and incoming payload.