Sankey Chart
In this article, we will explain how to create and customize a sankey chart. So let's get started!
Last updated
In this article, we will explain how to create and customize a sankey chart. So let's get started!
Last updated
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
A Sankey chart visualizing how users move through a website might look like this:
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.
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)
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.
To fine-tune the visual style, click Advanced Editor.
This opens a side panel for visual customization of your Sankey chart.
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.
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
