Flow distribution diagram for traffic, cost, and conversion breakdowns.
Adjacency emphasis
import { SankeyChart } from '@chanrg/4ui/echarts';<SankeyChart {nodes} {links} unit="/s" />Installation
pnpm add @chanrg/4uiImport the stylesheet once, at the root of your app:
import '@chanrg/4ui/styles.css';Usage
import { SankeyChart } from '@chanrg/4ui';import { SankeyChart } from '@chanrg/4ui/echarts';<SankeyChart {nodes} {links} unit="/s" />API reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
nodes | { name, color? }[] | [] | Flow nodes. |
links | { source, target, value }[] | [] | Directed flows. |
CSS variables
| Variable | Description |
|---|---|
--4ui-surface | Primary component surface. |
--4ui-text | Primary foreground color. |
--4ui-border | Default control and panel border. |
Accessibility
- Hover highlights adjacency; provide the same totals as a table for assistive tech.