Sankey Energy Chart
Last updated
Last updated
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.
You can find a more in depth explanation about the Sankey energy on this page: https://echarts.apache.org/examples/en/editor.html?c=sankey-nodeAlign-left
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) |
