shadcn.io is an independent project built on shadcn/ui
Installation
Usage
import { ChartSankeyLegend } from "@/components/charts/chart-sankey-legend";<ChartSankeyLegend />API Reference
SankeyChart
dataSankeyData
Nodes and links to draw. Links reference nodes by index; links with a non-positive or non-finite value are ignored, and the chart is empty when no positive link remains.
margin?Partial<Margin>
Chart margins in pixels. Any side you omit keeps its default; the wide left and right defaults leave room for node labels.
- Type
Partial<Margin>- Default
{ top: 40, right: 180, bottom: 40, left: 180 }
animationDuration?number
Duration of the enter animation in milliseconds.
- Default
1100
enterTransition?Transition
Enter transition (a spring or a cubic-bezier tween), in seconds. Overrides animationDuration when it sets a duration.
- Default
a 1.1s tween on the reveal curve
revealSignature?string
Changing this value replays the enter animation.
- Default
""
aspectRatio?string
Aspect ratio of the chart as "width / height".
- Default
"2 / 1"
nodeWidth?number
Width of the node bars in pixels.
- Default
16
nodePadding?number
Vertical gap between nodes of the same column in pixels.
- Default
24
className?string
Additional class name for the chart container.
children?ReactNode
SankeyNode, SankeyLink and SankeyTooltip to configure the chart, plus any elements that call useSankey().
hoveredNodeIndex?number | null
Controlled hovered node index, for example from a legend. Overrides hover from the chart surface; null clears it.
- Type
number | null
onNodeHoverChange?(index: number | null) => void
Called with the hovered node index (or null) when hover changes on the chart surface.
- Type
(index: number | null) => void
ariaLabel?string
Accessible label of the chart.
- Default
"Sankey chart"
ariaDescription?string
Longer accessible description of the chart.
SankeyLink
stroke?string
Solid color for all links. Overrides the gradient.
strokeOpacity?number
Opacity of the links.
- Default
0.5
fadedOpacity?number
Opacity of links not connected to the hovered node or link.
- Default
0.1
useGradient?boolean
Paint each link with a gradient from its source color to its target color.
- Default
true
getNodeColor?(node: SankeyPropNode, index: number) => string
Returns the color of a node, used for the gradient ends.
- Type
(node: SankeyPropNode, index: number) => string
getLinkColor?(link: SankeyPropLink, index: number) => string
Returns a solid color per link. Overrides the gradient.
- Type
(link: SankeyPropLink, index: number) => string
patterns?ReactNode
Pattern definitions (SVG <pattern> elements) that links can reference by id through getLinkPattern.
getLinkPattern?(link: SankeyPropLink, index: number) => string | null | undefined
Returns the id of a pattern to fill a link with, or null/undefined to use the gradient or solid color. A pattern wins over stroke and getLinkColor.
- Type
(link: SankeyPropLink, index: number) => string | null | undefined
SankeyNode
fill?string
Fill color of the nodes.
- Default
the theme chart colors, by node
lineCap?number
Corner radius of the nodes in pixels.
- Default
4
fadedOpacity?number
Opacity of nodes not connected to the hovered node or link.
- Default
0.4
showLabels?boolean
Show node names.
- Default
true
showValueLabels?boolean
Show node values under the names.
- Default
true
formatValue?(value: number) => string
Formats the value shown under a node's name. A node's value is the larger of its inflow and outflow.
- Type
(value: number) => string- Default
the value as an integer followed by " sessions"
labelOrientation?SankeyLabelOrientation
Reading direction of the labels outside the nodes.
- Default
"horizontal"
getNodeColor?(node: SankeyPropNode, index: number) => string
Returns the color of a node. Overrides fill.
- Type
(node: SankeyPropNode, index: number) => string
SankeyTooltip
nodeContent?(props: { node: SankeyPropNode; index: number }) => ReactNode
Custom tooltip content for a node. Receives the node and its index.
- Type
(props: { node: SankeyPropNode; index: number }) => ReactNode
linkContent?(props: { link: SankeyPropLink; index: number }) => ReactNode
Custom tooltip content for a link. Receives the link and its index.
- Type
(props: { link: SankeyPropLink; index: number }) => ReactNode
formatValue?(value: number) => string
Formats the values in the default tooltip.
- Type
(value: number) => string- Default
integer formatting
valueLabel?string
Label of the value row in the default node tooltip.
- Default
"Sessions"
className?string
Additional class name for the tooltip.