How to Make a Sankey Diagram Readable
Practical rules for a Sankey people can read: fewer nodes, a sensible order, direct labels, restrained colour and printed numbers. The example applies each of them.
A readable Sankey has a clear left-to-right story, few nodes, ordered columns and labels you can read without a legend. Most unreadable Sankeys break one of those rules.
The example shows a household budget drawn with the rules applied: two income sources flow into one pool, and the pool splits into five categories, roughly largest first, with the catch-all last. There are only eight nodes, and nothing crosses.
The rules below apply to any Sankey. They are about making the diagram easier, not prettier.
Fewer nodes
Keep each column to a handful of nodes and group the rest into Other. A reader can follow five ribbons; they cannot follow thirty.
Order the columns
Put the largest node at the top of each column, or order by a meaningful sequence such as time. Random order produces crossing ribbons.
Label the nodes directly
Put the name and, for key nodes, the value next to the node. A reader who must look up a colour in a legend loses the thread.
Use colour sparingly
Colour by group or source, not by every node. Use one accent colour to highlight the ribbon your caption talks about.
Add a one-line finding
Tell the reader what to notice. A Sankey shows a lot, and a caption points to the part that matters.
Key points
- 3,500 € of monthly income is split into five categories.
- Housing is the largest at 1,200 € (34%), followed by savings at 700 € (20%).
- Salary supplies 86% of income (3,000 of 3,500).
- The figures are invented.
The example’s data
Invented household figures, balanced at every node.
| From | To | Amount (€) |
|---|---|---|
| Salary | Monthly income | 3000 |
| Other income | Monthly income | 500 |
| Monthly income | Housing | 1200 |
| Monthly income | Savings | 700 |
| Monthly income | Food | 600 |
| Monthly income | Everything else | 600 |
| Monthly income | Transport | 400 |
The same data as CSV
source,target,value
Salary,Monthly income,3000
Other income,Monthly income,500
Monthly income,Housing,1200
Monthly income,Savings,700
Monthly income,Food,600
Monthly income,Everything else,600
Monthly income,Transport,400How it works
Cut to the story
Remove or group nodes that do not support the finding.
Order each column
Sort by size or sequence so that ribbons cross as little as possible.
Label and colour
Label nodes directly and limit colour to one meaning.
Add a caption
State the finding in one line under the chart.
Frequently asked questions
Should I show values on the ribbons?
Show them for the key flows and leave the rest to the table. Too many numbers clutter the diagram.
Why do my ribbons cross?
Usually because of node order. Reordering nodes within a column, or grouping small ones, removes most crossings.
Edit this budget Sankey
Open the example as your own chart and apply the rules to your data.
