> For the complete documentation index, see [llms.txt](https://docs.wem.io/platform/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.wem.io/platform/wemtipsandtricks/widgets/advanced-charts/sankey-energy-chart.md).

# 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.

{% hint style="info" %}
You can find a more in depth explanation about the Sankey energy on [this](<https://echarts.apache.org/examples/en/editor.html?c=sankey-nodeAlign-left >) page: [https://echarts.apache.org/examples/en/editor.html?c=sankey-nodeAlign-left](<https://echarts.apache.org/examples/en/editor.html?c=sankey-nodeAlign-left >)
{% endhint %}

![Sankey Energy Chart](/files/BHeSoexm7PMsNUFr28ih)

**Properties of Sankey Energy Chart**

<table data-header-hidden><thead><tr><th></th><th width="150"></th><th width="150"></th><th></th></tr></thead><tbody><tr><td><strong>Property Name</strong></td><td><strong>Data type</strong></td><td><strong>Type</strong></td><td><strong>Description</strong></td></tr><tr><td>Data source</td><td>List</td><td>Data Model</td><td>Data list source for the widget.</td></tr><tr><td>Node</td><td>Text</td><td>Expression</td><td>The name of nodes or labels of the chart.</td></tr><tr><td>Node colors</td><td>Text</td><td>Expression</td><td>Colour for each node (You can use hexadecimal '#FF000' or 'rgba(255,0,0)' values.</td></tr><tr><td>Source</td><td>Text</td><td>Expression</td><td>Initial Node (name) to start a link or connection.</td></tr><tr><td>Target</td><td>Text</td><td>Expression</td><td>Final node (name) to stablish where the link ends.</td></tr><tr><td>Value</td><td>Number</td><td>Expression</td><td>Value of the link or connection.</td></tr><tr><td>Chart orientation.</td><td>Text</td><td>Dropdown</td><td>Chart orientation. (Horizontal, vertical).</td></tr><tr><td>Width</td><td>Text</td><td>Expression</td><td>Width of the chart. It can be settled in px values ('500px') or percentages (100%). Default value is 100%</td></tr><tr><td>Height</td><td>Text</td><td>Expression</td><td>Height of the chart. It can be settled in px values ('500px') or percentages (100%). Default value is 100%</td></tr><tr><td>Custom padding</td><td>Boolean</td><td> </td><td>Adds padding properties to customize the chart.</td></tr><tr><td>Top padding</td><td>Number</td><td>Expression</td><td>To set the padding of the top.</td></tr><tr><td>Left padding</td><td>Number</td><td>Expression</td><td>To set the padding of the left.</td></tr><tr><td>Right padding</td><td>Number</td><td>Expression</td><td>To set the padding of the right.</td></tr><tr><td>Bottom padding</td><td>Number</td><td>Expression</td><td>To set the padding of the bottom.</td></tr><tr><td>Nodes align</td><td>Text</td><td>Dropdown</td><td>Alignment or flow direction of the nodes. (Left, Right, Justify).</td></tr><tr><td>Hover focus</td><td>Text</td><td>Dropdown</td><td>What part of the series the chart focus on when the user hovers the mouse over the chart. (None, self, series, adjacency).</td></tr><tr><td>Monochromatic</td><td>Boolean</td><td> </td><td>Displays the chart with a single colour.</td></tr><tr><td>Main color</td><td>Text</td><td>Expression</td><td>Single color for the whole chart. It uses Hexadecimal values (#FFF) or rgba values: 'rgba(255,0,0,0.6)'.</td></tr><tr><td>Background color</td><td>Text</td><td>Expression</td><td>Background color for the chart. It uses Hexadecimal values (#FFF) or rgba values: 'rgba(255,0,0,0.6)'.</td></tr><tr><td>Label legend position</td><td>Text</td><td>Dropdown</td><td>Where to display the legend of each label. (Top, bottom, left, right, inside).</td></tr><tr><td>Label legend color</td><td>Text</td><td>Expression</td><td>Color for the labels legend. It uses Hexadecimal values (#FFF) or rgba values: 'rgba(255,0,0,0.6)'.</td></tr><tr><td>Label legend size</td><td>Number</td><td>Expression</td><td>Numeric value for the label's legend size.</td></tr><tr><td>Curveness</td><td>Number</td><td>Expression</td><td>The amount of curveness used in the links of the chart. (Values from 0 to 1)</td></tr></tbody></table>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.wem.io/platform/wemtipsandtricks/widgets/advanced-charts/sankey-energy-chart.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.