Sankey Chart
A Sankey diagram component built using Recharts v3. Visualize flow data between nodes with customizable links, gradients, and glow effects.
Installation
$ npx shadcn@latest add @orecus/sankey-chartRegistry:
@orecus/chart@orecus/color-utils@orecus/chart-utils@orecus/card
Component
User Flow
Conversion paths from visit to subscription
Energy Distribution
Power generation to consumption flow
Props
| Prop | Type | Default | Description |
|---|---|---|---|
data* | { nodes: { name: string }[]; links: { source: number; target: number; value: number }[] } | — | Sankey data with nodes and links arrays |
colors | ThemeColor[] | — | Colors for nodes |
colorStyle | 'default' | 'gradient' | 'gradient' | Node fill style |
glow | boolean | false | Add glow effect behind nodes |
nodeWidth | number | 10 | Width of nodes in pixels |
nodePadding | number | 20 | Vertical padding between nodes |
linkCurvature | number | 0.5 | Link curve amount (0-1) |
iterations | number | 32 | Number of layout iterations |
showTooltip | boolean | true | Show tooltip on hover |
cardProps | CardProps | — | Props to pass to the underlying Card component |