Sankey
Flow diagram — ranked nodes connected by throughput-sized link ribbons.
Category: chart · WCAG 2.1-AA · chart, sankey, flow, network, data-viz
Props
| Prop | Type | Default | Description |
|---|---|---|---|
nodes | SankeyNode[] | — | Nodes: { id, label, color? }. |
links | SankeyLink[] | — | Links: { source, target, value }. |
title | string | — | Title text for the component. |
description | string | — | Supporting description text. |
width | number | — | Fixed SVG width in px. ⚠ **Omit for a responsive chart** — the chart fills and tracks its container via a ResizeObserver; there is no correct pixel number in a responsive grid. A fixed width is clamped to the container (max-inline-size: 100%) so it can never overflow its card, but it also stops the chart growing. `useChartSize` is NOT needed for this — charts call it internally. |
height | number | 320 | SVG height in px. Unlike `width`, height does NOT track the container — this is the knob you set to change the chart's aspect. |
tooltip | boolean | — | Whether to show tooltips on hover. |
className | string | — | Additional CSS class names merged onto the root element. |
plain | boolean | false | When true, renders a minimal variant without chart chrome. |
Design tokens
--cascivo-chart-1--cascivo-chart-2--cascivo-chart-3--cascivo-chart-4--cascivo-chart-5--cascivo-chart-6--cascivo-chart-7--cascivo-chart-8
When to use
- Showing flow/throughput between stages or categories
- Visualizing where volume splits and merges
When not to use
- Strict ordered stages with one path — use Funnel
- Arbitrary node/edge graphs — use @cascivo/flow
Examples
Sankey flow
import { Sankey } from '@cascivo/charts'
<Sankey
title="Traffic flow"
nodes={[{ id: 'a', label: 'Search' }, { id: 'b', label: 'Home' }, { id: 'c', label: 'Signup' }]}
links={[{ source: 'a', target: 'b', value: 30 }, { source: 'b', target: 'c', value: 12 }]}
/>Related components
- Funnel — Use for a single decreasing path