Charts

Sankey Chart

Flow between nodes. Default and Motion variants.

Examples

Default

Cronus flow between nodes.

tsx

<SankeyChart data={SANKEY} />

Motion

Flow chart with hoverable links and nodes.

tsx

import { SankeyChart, SankeyLink, SankeyNode, SankeyTooltip } from "@cronus-ui/ui/charts";

<SankeyChart data={data}>
  <SankeyLink />
  <SankeyNode />
  <SankeyTooltip />
</SankeyChart>

Installation

Default is a ready-made wrapper from the registry. Motion is the composable engine at @cronus-ui/ui/charts (peer visx + motion).

bash

npx cronus-ui add sankey-chart

tsx

import { SankeyChart } from "@cronus-ui/ui";

Usage

tsx

import { SankeyChart, SankeyNode, SankeyLink, SankeyTooltip } from "@cronus-ui/ui/charts";

<SankeyChart data={{ nodes, links }}>
  <SankeyLink />
  <SankeyNode />
  <SankeyTooltip />
</SankeyChart>

Components

Motion API — compose these under the chart root. Default wrapper props are in Default API below.

SankeyChart

Flow diagram. Hover a node to isolate connected links.

Prop	Type	Default	Description
`data`*	`SankeyData`	—	{ nodes, links }.
`nodeWidth`	`number`	`16`	Node width in px.
`nodePadding`	`number`	`24`	Vertical gap between nodes.
`aspectRatio`	`string`	`"2 / 1"`	CSS aspect ratio.
`hoveredNodeIndex`	`number \| null`	—	Controlled node hover.

SankeyNode

Rectangles + labels. Hover dims unrelated nodes.

Prop	Type	Default	Description
`fill`	`string`	—	Solid fill. Default cycles --chart-1…5.
`lineCap`	`number`	`4`	Corner radius.
`fadedOpacity`	`number`	`0.4`	Opacity when another node is hovered.
`labelOrientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Outside label direction.
`getNodeColor`	`(node, index) => string`	—	Custom node color.

SankeyLink

Flows between nodes. Gradient from source to target by default.

Prop	Type	Default	Description
`useGradient`	`boolean`	`true`	Source → target gradient.
`strokeOpacity`	`number`	`0.5`	Link opacity.
`fadedOpacity`	`number`	`0.1`	Opacity when another link is hovered.
`getLinkPattern`	`(link, index) => string \| null`	—	Pattern id for a link.

SankeyTooltip

Node or link tooltip that follows the pointer.

Prop	Type	Default	Description
`nodeContent`	`(props) => ReactNode`	—	Custom node tooltip.
`linkContent`	`(props) => ReactNode`	—	Custom link tooltip.
`formatValue`	`(value: number) => string`	—	Value formatter.

Hover

Hovering a node highlights connected links and dims the rest. hoveredNodeIndex can be driven from a legend of sources.

Label orientation

labelOrientation="vertical" rotates outside labels along the node edge — useful when names are long.

tsx

<SankeyNode labelOrientation="vertical" />

Data format

`source` / `target` are indices into `nodes`.

type SankeyData = {
  nodes: { name: string; category?: "source" | "landing" | "outcome" }[];
  links: { source: number; target: number; value: number }[];
};

const data: SankeyData = {
  nodes: [{ name: "Ads" }, { name: "Site" }, { name: "Paid" }],
  links: [
    { source: 0, target: 1, value: 120 },
    { source: 1, target: 2, value: 40 },
  ],
};

Theming

Motion charts read `--chart-*` aliases that map onto Cronus semantic tokens (`--cronus-chart-1`…`--cronus-chart-5`, `--cronus-border`, `--cronus-fg`, surfaces). Override the aliases or the tokens — never palette scales (`bg-zinc-900`). Default wrappers use `ChartConfig` with `var(--cronus-chart-*)` / `var(--cronus-primary)`.

Full token reference: Theming.

Dependencies

Default needs the recharts peer. Motion needs visx (and sometimes d3) as optional peers — install only what this chart uses.

bash

bun add recharts

bash

bun add @visx/sankey @visx/responsive d3-sankey motion

Default API

Generated from the Default wrapper's exported types. Motion subcomponents are documented above.

SankeyChartProps

Extends HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
`data`*	`SankeyChartData`	—	—