Platform

Sankey Chart

In this article, we will explain how to create and customize a sankey chart. So let's get started!

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:

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.

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)

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.

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.

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

PreviousGeo with Makers ChartNextHistogram Chart

Last updated