CleenUI · Charts · SankeyChart

SankeyChart

Flow visualization showing volume between nodes — funnels, traffic flow, resource allocation.

storybook.cleenui.com · charts-sankeychart--default
Open in new window

About SankeyChart

SankeyChart shows the flow of quantity from source nodes to destination nodes through intermediate stages. The width of each band reflects the volume of flow through that path.

Useful for any process or system where you want to visualize how things split, merge, or transform across stages — conversion funnels, energy flows, budget allocation, user-journey mapping.

When to use it

  • Conversion funnel visualization with drop-offs at each stage.
  • Traffic-source flow into outcomes.
  • Budget or resource allocation across categories.
  • User journey or pathway analysis.

Common props

Prop
Type
Description
nodes
Node[]
Node definitions {id, label, color}.
links
Link[]
Links {source, target, value}.
nodeWidth
number
Pixel width of each node block.
nodePadding
number
Vertical padding between nodes.
showValues
boolean
Display flow values on each link.
Cross-references

Where this component shows up elsewhere in the foundation.

In modules

2
⚡ Already in an AI editor?

Set up CleenUI in your tool.

Skip the manual import — ask your AI agent to build with this component. The Builder skill knows its props, variants, and idioms.

Claude CodeCursorWindsurfGitHub CopilotClineAider+6All 12 guides
Other categories

More component families.