A Sankey diagram, also known as a Sankey energy balance diagram, is a specific type of flowchart. Data flows from nodes on the left to nodes on the right, with the height of each node representing the size of the data. The width of each link is proportional to the flow value; the wider the link, the greater the flow value it represents. Sankey diagrams are used to illustrate the distribution of flows and structural comparisons, and are commonly applied in data visualization analysis in fields such as energy, material composition, and finance.
Node: The "rectangular" part in the diagram, as shown below. Nodes represent different categories, that is, the dimensions of the visualization query.
Link: The flow line connecting nodes. The thickness of the flow line reflects the magnitude of the flow, which is the metric of the visualization query.

2.1 Common use cases #

Sankey diagrams are typically used for data visualization analysis with flow relationships, such as population migration between different countries or the destinations of product sales and more.
Sankey diagram example

2.2 Example usage process #

Step 1: Set dimensions, metrics, and filter conditions
The first step in using a Sankey diagram is to set the dimensions, metrics, and filter conditions for the diagram. Dimensions correspond to the nodes in the Sankey diagram, and metrics correspond to the thickness of the links.
For example, to visualize the following sales data table as a Sankey diagram in order to observe the regional flow of sales revenue.

Select the dimensions: country, region, and province/autonomous region, which correspond to the three columns of nodes in the Sankey diagram.
Select the metric: sales revenue (sum), which corresponds to the links in the Sankey diagram.
Step 2: Draw the Sankey diagram
The Sankey diagram is drawn as follows: the links connect the nodes "from country to region" and "from region to province/autonomous region", representing the proportion of "national sales revenue flowing to each region" and "regional sales revenue flowing to each province" respectively. The thickness of the links indicates the level of sales revenue.

Highlight flow paths and display data results
When the mouse hovers over any node or path, a data tooltip is displayed.

When a traffic path is clicked, that path is highlighted.

3.1 Sankey diagram icon #

3.2 Configuration rules #

The Sankey diagram supports two or more dimensions and one metric.

3.3 Edit colors #

The Sankey diagram supports custom color settings, and the product provides multiple built-in color schemes.

3.4 Link styles #

The links in the Sankey diagram support both curved and straight styles, which can be selected as needed. The product uses the curved style by default.
Curved example:

Straight example:

3.5 Dimension labels #

Dimension labels can be enabled, and their alignment style can be configured.

3.6 Legend and labels #

Legend:

• Supports choosing whether to display legend information. Click the switch button on the right to configure.
• The legend's position in the chart can be set to top, bottom, left, or right.
• The legend's alignment can be set to top/left alignment, center alignment, or bottom/right alignment.
• The maximum number of legend rows/columns, as well as the font and color, can be configured.
• The legend's display mode can be set. When there are too many legend items, you can choose between a pager or a scrollbar for display.

Labels:

• Users can choose whether to display label information. After enabling label display, labels appear on the top layer of the chart, and metric values are shown on the chart.
• The "Allow overlap" feature is disabled by default. When enabled, label display is not restricted by spacing, which may result in overlapping labels.

Caution: Only one of "Sparse display" or "Allow overlap" can be selected for the display mode. If one is selected, the other is grayed out, with a prompt stating "Allow overlap and sparse display cannot be selected at the same time." When labels are crowded by default, it is recommended to select "Sparse display."

• Users can customize the font size and color of labels.

3.7 In-chart control styles #

See 3.11 In-chart control styles.

3.8 Restore default settings #

Click [Restore Default Settings] to restore all items in the above chart configuration to default