# Sankey Chart

Source: https://lumeo.nativ.sh/components/charts/sankey

# 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

.NET CLI PackageReference Lumeo CLI

dotnet add package Lumeo.Charts

One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction).

## Usage

@using Lumeo

<SankeyChart />

Preview Code

Energy Flow Sankey

Renewable and conventional energy sources feeding the national grid, then distributed across residential, commercial, and industrial consumers.

Preview Code

Marketing Traffic Sources

Website traffic from four acquisition channels flowing through landing pages and converting to demo requests or signups.

Preview Code

Budget Allocation

Annual company budget flowing from total revenue through departments and into specific cost categories. Data labels identify each node.

Preview Code

User Onboarding Journey

New users arriving via three entry points, progressing through activation steps and ending in retained or churned states.

Preview Code

Loading state

Simulate loading

Hold skeleton open

Duration: 2s 

Cycle: 1400 ms 

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.