React chart example
Sankey diagram
Trace quantities between stages with ribbons whose widths reveal the size of each flow.
Options apply to compatible charts.
Synthetic sample data · 5 flows connecting 6 acquisition and account stages.
What is a Sankey diagram?
A Sankey diagram connects stages with ribbons whose widths represent quantities. Splits and merges make it possible to follow how a total is distributed between sources, intermediate stages and destinations.
When to use it
Use a Sankey diagram for acquisition paths, resource allocation or transfers between categories when you have measured source-to-target quantities. It is more informative than a funnel when people or resources can take several routes. Use a simpler bar chart when only the totals at each stage matter.
Design tips
Use the same unit throughout and make inflows, outflows and any losses explicit.
Keep the graph directed and free of cycles for this example’s layout. Group minor routes when crossings obscure the main paths.
Read ribbon width, not its length or slope. A link shows a measured flow, not proof that one stage caused another.
Build this chart in React
Build this chart
This example uses a custom Graphy geom plugin with a React renderer. Register the plugin with createGraphyKit to use its typed builder and provider together. Hover tooltips and themes are available; annotation and emphasis controls are disabled for this example.
Compare with
Graphy Chart SDK
Add Graphy’s Sankey diagrams to your React app.
Ship quickly with one maintained SDK, without building and maintaining the entire charting experience yourself.