Sankey Chart Maker

How to make a Sankey chart

A useful Sankey diagram begins with a small, explicit flow table. Build the structure first, check the quantities, and style the chart only after the relationships are correct.

Sankey Chart Maker features

Preparing data for a Sankey diagram

A Sankey chart describes directed movement. Every row needs a source node, a destination node, and a positive quantity. That quantity can represent money, energy, materials, visitors, emissions, time, or another consistent unit. Keep one unit throughout a chart; mixing dollars with percentages or kilowatt-hours with joules makes ribbon widths impossible to compare.

Use short, specific node names. “Organic search” and “Paid search” communicate more than two nodes both called “Traffic.” Names are trimmed when the chart is built, but capitalization is preserved, so “Checkout” and “checkout” are two different nodes. Standardize spelling before pasting if those labels should be combined.

Duplicate From/To pairs are allowed in the editor because separate rows may reflect separate records in your source data. The preview sums those duplicate pairs into one ribbon. If the same customer path appears in three rows with amounts of 10, 15, and 5, the rendered connection has a value of 30 while the source rows remain available for correction.

Pasted data can use From, To, and Amount headers or Source, Target, and Value. Without either header set, the grid uses the first three columns in order. Extra columns are ignored. For reliable pastes, remove subtotals, blank header rows, notes, and formatting-only columns first.

When a Sankey chart is the right choice

Sankey diagrams work best when the main question is “where did it come from, and where did it go?” A household budget can connect income to spending and saving. An energy balance can connect primary resources to conversion stages and end uses. A journey chart can connect visits to product views, carts, purchases, and exits.

The width of each ribbon represents its amount relative to other flows in the same diagram. Trace a ribbon from one node to the next before comparing widths, especially when several paths cross. A wide ribbon signals a large quantity, not automatically a good result. A large waste stream, customer drop-off, or operating expense may deserve attention precisely because it is wide.

For a strong real-world reference, explore Lawrence Livermore National Laboratory’s energy, carbon, and water flow-chart collection. Those charts show how a shared unit, clear stages, and carefully named losses help readers follow a complex system. They also demonstrate why supporting notes and source context matter when a visualization will inform a decision.

Choose another chart when direction is not important. A bar chart is clearer for ranking unrelated categories, a line chart is better for change over time, and a network diagram is better when relationship presence matters more than quantity. Sankey charts also become difficult to read when they contain dozens of small nodes or many crossing ribbons.

Layout, labels, and color choices

Start with the horizontal, justified layout for processes that read from left to right. Vertical orientation can work well for portrait reports or flows that naturally move from top to bottom. Left alignment keeps early stages together, right alignment emphasizes endpoints, and justified alignment spreads terminal nodes across the available depth. Make manual adjustments only after the structure and automatic layout are settled.

Node width and spacing affect both legibility and density. Wider nodes create stronger visual anchors but leave less room for ribbons. More spacing separates labels and makes small flows easier to distinguish, while less spacing can keep a large chart compact. Dragging is best for final, local corrections—not for hiding a structural problem in the data.

Use color to encode a deliberate idea. Source coloring helps readers follow what leaves each origin; destination coloring emphasizes where flows end; gradients show both ends of a connection. A global ribbon color is useful when node identity matters more than path grouping. Keep adjacent node colors distinct and verify labels against the background with the Color Contrast Checker.

The color controls store fixed hex values so an export does not change when the site theme changes. If a brand palette arrives in RGB, HSL, OKLCH, or Lab, normalize it first with the Color Converter. Transparency is useful when a chart must sit over a slide background, but a solid background is safer when the destination surface is unknown.

Limitations, common mistakes, and privacy

This maker accepts directed acyclic flows. A node cannot point to itself, and a later node cannot connect back to an earlier one in a way that creates a cycle. ECharts computes Sankey positions from a directed acyclic graph, so the editor rejects circular data before rendering rather than displaying a misleading or broken layout.

Do not infer conservation automatically. If 100 units enter a process but only 80 leave it, the diagram can still render; the missing 20 may represent loss, an omitted category, or incomplete data. Add an explicit “Losses,” “Other,” or “Untracked” destination when balancing the system matters. Likewise, avoid double-counting a total row alongside its component rows.

Another common mistake is using too much precision. Two or three significant digits are often easier to read than long decimals, but the right choice depends on the source. The decimal control changes display formatting only; it does not round the underlying connections used to size ribbons. Prefixes and suffixes should identify the unit without overwhelming every label.

The tool keeps one versioned draft in local storage so the page can restore your work on return. It does not create an account or store a cloud project. If you create a share link with “Include my inputs” selected, the chart data is stored in the URL and can be read by anyone who receives it. Clear the draft before using a shared computer if node names contain sensitive business, customer, or personal information.

Choosing PNG or SVG export

PNG is the practical choice for presentation software, email, and documents that expect a bitmap. Pick a preset close to the final placement to avoid unnecessary scaling: Presentation is 1600 × 900, Report is 1500 × 1000, and Square is 1200 × 1200. Custom dimensions accept values from 320 through 4096 pixels in each direction.

SVG is preferable when the chart needs to remain sharp at any size or continue into a vector-design workflow. The exported file includes a viewBox, explicit dimensions, the current background choice, and the node positions visible in the preview. Because both downloads start from the same rendered SVG, the PNG and SVG should preserve the same dragged arrangement.

Review the downloaded file at its intended size. Long labels that fit in a large browser preview may feel crowded on a small slide, while very thin ribbons can disappear when a chart is reduced. For publication work, keep the original flow table beside the export so figures can be audited and revised later.

Sankey Chart Maker FAQ