Free · ECharts · Editable React source
Sankey Foundation
A flexible ECharts flow base with adjacency emphasis, selection, Canvas, and SVG rendering.
This is the installable component, not a mockup. Width is a preview container setting; theme and colors use your app’s shadcn CSS variables.
Select a mark or an accessible data-table value to inspect the callback.
Waiting for an interaction…
01 / Installation
Your code. Your project.
Use an initialized shadcn/Tailwind React project. The URL installs the component and its shared files recursively. No namespace configuration, platform account, or agent files.
Next.js, Vite & manual setup →npx shadcn@latest add https://beautifulcharts.dev/r/echarts-sankey-foundation.jsonPackage dependencies: echarts. Shared files are included in Source above. The installed license file covers the free source.
For a manual install, add those packages, copy every listed Source file to its displayed path, and adjust the @/ alias if your project uses a different one.
02 / Component API
Make it yours.
Types, defaults, and source below are generated from the distributed component. Numeric values must be finite; recipe-specific bounds are checked in source. Formatters change displayed labels, not the underlying measurements.
| Prop | Type | Default | Required |
|---|---|---|---|
| nodes | EChartsSankeyNode[] | sampleNodes | No |
| links | EChartsSankeyLink[] | sampleLinks | No |
| title | string | "Sankey foundation" | No |
| subtitle | string | "Trace movement between stages" | No |
| orientation | "horizontal" | "vertical" | "horizontal" | No |
| renderer | EChartsRenderer | "canvas" | No |
| onSelect | (params: unknown) => void | — | No |
| ariaDescription | string | — | No |
| optionOverrides | EChartsCoreOption | — | No |
| isLoading | boolean | — | No |
| className | string | — | No |
Exact data and series types
export type EChartsSankeyNode = { name: string; color?: string };
export type EChartsSankeyLink = { source: string; target: string; value: number };
export type EChartsSankeyFoundationProps = { nodes?: EChartsSankeyNode[]; links?: EChartsSankeyLink[]; title?: string; subtitle?: string; orientation?: "horizontal" | "vertical"; renderer?: EChartsRenderer; onSelect?: (params: unknown) => void; ariaDescription?: string; optionOverrides?: EChartsCoreOption; isLoading?: boolean; className?: string };shadcn theming
Your card, text, border, error, font, and chart colors—not a forced design system.
Native customization
Modify the local source or use the documented renderer-native extension points.
Accessible states
Loading, empty states, reduced motion, descriptions, and inspectable data tables.