# Sankey

The **SankeyChart** widget is designed to visualize flow or process data. It uses nodes to represent stages or entities and links to show the flow and quantity (weight) between them. This makes it an excellent tool for analyzing energy flows, user journeys, supply chains, or any process where you need to understand distribution and magnitude.

It provides a clear and intuitive representation of complex process data.

<figure><img src="/files/eFYoKdLLHCiIgCqCx1Eo" alt="" width="563"><figcaption></figcaption></figure>

## Data Binding

Connect the widget to your application's logic by dragging the corresponding items from the Flow Builder.

### Output

| **Property** | **Type** | **Description**                                                                                                         |
| ------------ | -------- | ----------------------------------------------------------------------------------------------------------------------- |
| **`data`**   | `Array`  | An array of data objects, where each object defines a link in the flow. See the **Data Structure** section for details. |

#### Data Structure

To render a Sankey chart, you must provide an array of objects where each object represents a single link or connection in the flow. The widget needs to know the source of the flow, the target, and the weight (or quantity) of that flow. You specify which fields in your data correspond to these roles in the configuration.

For example, if you configure `Source Key` as `"from"`, `Target Key` as `"to"`, and `Weight Key` as `"amount"`, your data should look like this:

```json
[
  { "from": "Coal", "to": "Power Plant", "amount": 100 },
  { "from": "Power Plant", "to": "Electricity Grid", "amount": 80 },
  { "from": "Power Plant", "to": "Heat Loss", "amount": 20 }
]

```

## Configuration

### Settings

These properties control the title and the mapping of your data fields to the chart's structure.

| **Label**      | **Description**                                                                              | **Type** | **Property** |
| -------------- | -------------------------------------------------------------------------------------------- | -------- | ------------ |
| **Title**      | The title displayed at the top of the Sankey chart.                                          | String   | `title`      |
| **Source Key** | The name of the field in your data objects that represents the source node of a link.        | String   | `source`     |
| **Target Key** | The name of the field in your data objects that represents the target node of a link.        | String   | `target`     |
| **Weight Key** | The name of the field in your data objects that represents the weight or quantity of a link. | String   | `weight`     |


---

# Agent Instructions: 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:

```
GET https://docs.heisenware.com/app-builder/build-frontend/widgets/display-widgets/sankey.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.