# 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="https://2441185785-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeTNY9XuZbora2UmeM4sm%2Fuploads%2FO3TGmeSAl43cdeuiwEcl%2Fimage.png?alt=media&#x26;token=da41156f-dacd-4dad-87f3-c1f42cef5db8" 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="https://2441185785-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeTNY9XuZbora2UmeM4sm%2Fuploads%2FOhij3Y2wU7DJLXCiMvkf%2Fstep1.jpg?alt=media&#x26;token=321fe46c-424e-487b-b637-26e96c5cc008" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2441185785-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeTNY9XuZbora2UmeM4sm%2Fuploads%2FwMav5OlZHLpavYFcLFKG%2Fstep2.jpg?alt=media&#x26;token=2f3ef706-528a-49c0-b9bc-7a34f71af7f4" 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="https://2441185785-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeTNY9XuZbora2UmeM4sm%2Fuploads%2FUornlhC4Nr4nBa1Ix6jz%2Fstep3.jpg?alt=media&#x26;token=97accdc7-2426-4647-91de-453539e303d9" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2441185785-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeTNY9XuZbora2UmeM4sm%2Fuploads%2FETyQOY4Xnuj3g1MwsATc%2Fstep4.jpg?alt=media&#x26;token=35ea2601-7564-4c93-b9de-2cdc873a87ae" 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="https://2441185785-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeTNY9XuZbora2UmeM4sm%2Fuploads%2FzQrjuTsrWS37fXPsL3T5%2Fstep5.jpg?alt=media&#x26;token=225ea2b1-7918-4d17-978b-b5bdc6019c60" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2441185785-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeTNY9XuZbora2UmeM4sm%2Fuploads%2Fv2QftY9ODHvmhKhcsj7b%2Fstep6.jpg?alt=media&#x26;token=fdcedc26-e04d-4ad8-a92d-7134ee76d1e6" 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="https://2441185785-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeTNY9XuZbora2UmeM4sm%2Fuploads%2F0OBDbNqg6ADGUOs3kXwv%2Fadv%20editor1.jpg?alt=media&#x26;token=1085a199-2bcd-44ec-98bb-9c3fed37e77f" 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="https://2441185785-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeTNY9XuZbora2UmeM4sm%2Fuploads%2FsL81M3ICwnNo5cHHSRgq%2Fadv%20editor2.jpg?alt=media&#x26;token=5891d1a7-e20c-4534-907d-e813e0805db1" alt=""><figcaption></figcaption></figure>