Sankey Energy Chart

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

Sankey Energy Chart

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)