# Sankey Chart

## Creating a Sankey Chart

### What is a Sankey Chart?

A **Sankey Chart** is a type of flow diagram where the width of the arrows is proportional to the magnitude of the flow. These charts are ideal for visualizing:

* User journeys
* Resource allocation
* Data or process flows
* Drop-offs in conversion funnels

#### Example: Website User Journey

A Sankey chart visualizing how users move through a website might look like this:

<figure><img src="/files/bjGCBTBRQY4KnPEu07Xo" alt=""><figcaption></figcaption></figure>

***

### Step-by-Step Guide

#### Step 1: Enter Your Prompt and Proceed

Start by describing your intent. Enter a prompt such as:

> **Website User Journey**

This helps the AI understand the context of your analysis.\
Then, click **Next**.

<figure><img src="/files/ie0VH51iallcIUI1JXsy" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/2DYUnM4AzDbcC3m4l6YY" alt=""><figcaption></figcaption></figure>

***

#### Step 2: Select and Upload a Data Source

Choose how to bring in your data. You can:

* Upload a **CSV** file
* Upload an **Excel (.xlsx/.xls)** file
* Use a **database connection**
* Select from **previously uploaded datasets**

In this example, we select `file_sankey_chart_data`.

Make sure your dataset includes:

* A **Source** column (e.g., Homepage)
* A **Target** column (e.g., Checkout)
* A **Value** column (e.g., Number of users)

<figure><img src="/files/WXSAqneK5dldZmueOMKk" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/uAtW1t8xzcm0hgQSD9he" alt=""><figcaption></figcaption></figure>

***

#### Step 3: Configure the Sankey Chart

Define the chart by mapping columns from your dataset:

* **Source** – Starting point of each flow
* **Target** – Next step or destination
* **Value** – Quantity or weight of the flow

You may also:

* Apply **filters** to limit or segment the data
* Sort data using **sum of values** to emphasize major paths

Click **Save** to render the chart.

<figure><img src="/files/nJYZk5tWrCC1AYGUcmF4" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/WmOZqlxPGDc4WRvCJXHh" alt=""><figcaption></figcaption></figure>

***

#### Step 4: Customize Using the Advanced Editor

To fine-tune the visual style, click **Advanced Editor**.

!\[Advanced Editor Button]\(../images/adv editor1.jpg)

This opens a side panel for visual customization of your Sankey chart.

<figure><img src="/files/31jbp6x6KwuplqAlYViB" alt=""><figcaption></figcaption></figure>

***

### Styling Options

#### 🔗 Link Styling

* **Chart Background**: Customize the background color of the entire chart canvas.
* **Link Color Mode**: Choose a single color or gradient style for flow links.
* **Link Color**: Define custom link colors.
* **Stroke**: Enable borders around link paths for clarity.

#### 🔲 Node Styling

You can adjust how each node (e.g., Homepage, Product Page, Checkout) appears:

* **Font Family** – Choose from fonts like Arial, Helvetica, Times, etc.
* **Font Size** – Define readable label size (e.g., 12–16px).
* **Font Color** – Set color for node labels.
* **Bold / Italic** – Style text with emphasis as needed.
* **Label** – Edit the text that displays on each node.
* **Node Padding** – Add space around nodes to avoid crowding

<figure><img src="/files/XpQfAvoWZUHpv9FLKul5" alt=""><figcaption></figcaption></figure>


---

# 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.getinfinity.app/user-guide/comprehensive-user-guide/2.-charts/featured-chart-examples/sankey-chart.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.