Sankey Energy Chart
Last updated
Was this helpful?
Last updated
Was this helpful?
Sankey Diagram is a type of flow diagram that depicts the flow of resources (material, energy, cost, etc.) from one node to another. The start and endpoints of each flow are called nodes and the flow paths between them are called links. There can only be one link between a pair of nodes. The value of the flow between each pair of nodes is encoded by the width of the link. The coloration of the links help establishes visual mapping with their respective nodes.
Properties of Sankey Energy Chart
Property Name
Data type
Type
Description
Data source
List
Data Model
Data list source for the widget.
Node
Text
Expression
The name of nodes or labels of the chart.
Node colors
Text
Expression
Colour for each node (You can use hexadecimal '#FF000' or 'rgba(255,0,0)' values.
Source
Text
Expression
Initial Node (name) to start a link or connection.
Target
Text
Expression
Final node (name) to stablish where the link ends.
Value
Number
Expression
Value of the link or connection.
Chart orientation.
Text
Dropdown
Chart orientation. (Horizontal, vertical).
Width
Text
Expression
Width of the chart. It can be settled in px values ('500px') or percentages (100%). Default value is 100%
Height
Text
Expression
Height of the chart. It can be settled in px values ('500px') or percentages (100%). Default value is 100%
Custom padding
Boolean
Adds padding properties to customize the chart.
Top padding
Number
Expression
To set the padding of the top.
Left padding
Number
Expression
To set the padding of the left.
Right padding
Number
Expression
To set the padding of the right.
Bottom padding
Number
Expression
To set the padding of the bottom.
Nodes align
Text
Dropdown
Alignment or flow direction of the nodes. (Left, Right, Justify).
Hover focus
Text
Dropdown
What part of the series the chart focus on when the user hovers the mouse over the chart. (None, self, series, adjacency).
Monochromatic
Boolean
Displays the chart with a single colour.
Main color
Text
Expression
Single color for the whole chart. It uses Hexadecimal values (#FFF) or rgba values: 'rgba(255,0,0,0.6)'.
Background color
Text
Expression
Background color for the chart. It uses Hexadecimal values (#FFF) or rgba values: 'rgba(255,0,0,0.6)'.
Label legend position
Text
Dropdown
Where to display the legend of each label. (Top, bottom, left, right, inside).
Label legend color
Text
Expression
Color for the labels legend. It uses Hexadecimal values (#FFF) or rgba values: 'rgba(255,0,0,0.6)'.
Label legend size
Number
Expression
Numeric value for the label's legend size.
Curveness
Number
Expression
The amount of curveness used in the links of the chart. (Values from 0 to 1)
