All charts

sankey/*

Sankey

Flow diagrams — fund flows, capital allocation, source → bucket → destination.

1 variant
@vireya/ui/charts/sankey/flows

Capital flow Sankey: revenue sources → operating bucket → cost destinations + net income. Recharts native node/link API.

client

Understanding Sankey charts

Sankey diagrams show flow: nodes are stages and the width of each link is proportional to the quantity moving between them. They make conservation and redistribution visible — where money, users or energy come from and where they end up.

Vireya uses recharts' native node/link Sankey API, tokenised to your palette.

When to use

  • Flow between stages (revenue sources → operating bucket → cost destinations).
  • Multi-step redistribution where link magnitude is the point.
  • Budget, energy or user-journey flows with a clear source and sink.

When to avoid

  • Simple two-stage splits, where a stacked bar is simpler.
  • Cyclic flows, which Sankeys represent poorly.
  • Precise value reading across many thin links.

Best practices

  • Order nodes to minimise link crossings.
  • Colour links by source or category to trace paths.
  • Label nodes with their totals so the flow is quantified.

Accessibility

  • Provide tooltips with the exact flow value on each link.
  • Keep node and link colours distinguishable.
  • Summarise the main flow path in adjacent text.

Frequently asked questions

What is a Sankey diagram best for?
Visualising how a quantity flows and splits across stages — capital allocation, energy use, or a user journey — where the width of each connection shows how much moves along that path.
Does Vireya build Sankeys on recharts?
Yes. The Sankey variant uses recharts' native node/link API and themes it with Vireya tokens, so flows match your palette without custom rendering.