Sankey Chart
Visualize flow and relationships between nodes. The width of each link is proportional to the flow quantity, making it ideal for energy flows, budget allocations, and process mapping.
Installation
dotnet add package Lumeo.Charts
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <SankeyChart />
Renewable and conventional energy sources feeding the national grid, then distributed across residential, commercial, and industrial consumers.
Website traffic from four acquisition channels flowing through landing pages and converting to demo requests or signups.
Annual company budget flowing from total revenue through departments and into specific cost categories. Data labels identify each node.
New users arriving via three entry points, progressing through activation steps and ending in retained or churned states.
Shape-aware skeleton with reserved space for legend and axes — no layout shift when real data arrives.
API Reference
SankeyChart
| Property | Type | Default | Description |
|---|---|---|---|
| Nodes | List<SankeyNode> | [] | List of nodes with a Name property. |
| Links | List<SankeyLink> | [] | Connections with Source, Target, and Value. |
| ShowLegend | bool | true | Shows or hides the chart legend. |
| IsLoading | bool | false | When true, renders a shape-matched loading skeleton in place of the chart. Bind to your async fetch state. |
| ShowLoadingSkeleton | bool | true | Set to false to opt out of the skeleton (chart area stays empty while IsLoading is true). |
| SkeletonKind | ChartSkeletonKind | (chart default) | Override the skeleton silhouette (Bars, Line, Area, Pie, Scatter, Grid, Generic). |
| SkeletonStyle | ChartSkeletonStyle | Phantom | Phantom renders the real chart with placeholder data and morphs to real data via ECharts animation. Silhouette falls back to the legacy SVG skeleton overlay. |
| ShowLoadingLabel | bool | true | Shows a small "Loading…" pill in the top-right corner whenever IsLoading is true. Layered on top of any SkeletonStyle. Set to false for bare visuals. (rc.18) |
| LoadingText | string? | "Loading…" | Label rendered next to the spinner inside the loading pill. Set to empty to show the spinner alone. (rc.18) |
| ShowTooltip | bool | true | Enables the hover tooltip showing node and flow details. |
| Colors | List<string>? | null | Custom color palette for Sankey nodes and links. |
| Width | string | "100%" | Chart container width as a CSS length. |
| Height | string | "350px" | Chart container height as a CSS length. |
| Theme | string? | null | ECharts theme name applied to this chart instance. |
| PhantomCycleMs | int | 1400 | Phantom-mode refresh interval in milliseconds. Lower = faster data cycling while loading. |
| ShowDataLabels | bool | false | When true, displays labels on Sankey nodes. |
| LabelPosition | string | "right" | Position of node labels relative to each node. |
| LabelFormat | string? | null | Optional ECharts label formatter string for node labels. |
| DataZoom | bool | false | Enables zoom slider controls for dense flow diagrams. |
| Toolbox | bool | false | Shows the ECharts toolbox with export and zoom controls. |
| ColorPalette | List<string>? | null | Alternate full color palette applied to the chart. |
| AnimationDuration | int? | null | Animation duration in milliseconds when data changes. |
| AnimationEasing | string? | null | ECharts easing function name for animation curves. |