React Sankey Diagram

Copy Page

Where does the volume actually go? A Sankey answers that in one picture: every ribbon is as wide as the quantity it carries, so a loss you would have missed in a table becomes the thickest thing on screen.

Installation

Props

Layout, and the thing to check in your data

Columns are assigned by longest path from a root, so flow always travels left to right and a node never appears upstream of something feeding it. A cycle guard keeps a malformed graph from hanging the layout. Ribbons stack in link order on each side of a node, and one scale — set by the busiest column — applies to the whole diagram, so a ribbon twice as thick genuinely carries twice the volume.

The property worth verifying in your own data is conservation: for every intermediate node, inflow should equal outflow, and total sources should equal total sinks. The demo's yield accounting does (25,000 wafer starts in, 25,000 accounted for across shipped and four named scrap buckets). If your numbers do not balance, the diagram will still render — it will just quietly imply that material vanished, which is exactly the error a Sankey is supposed to expose. Add an explicit "unaccounted" node rather than letting the gap hide.