# Waterfall Chart

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

# Waterfall Chart

Show how an initial value is affected by successive positive and negative changes. Commonly used for financial statements, budget analysis, and variance breakdowns.

## 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

<WaterfallChart />

Preview Code

Income Statement Waterfall

Revenue walks down to Operating Income through Cost of Goods Sold and operating expenses. Positive bars use primary color, negative bars use destructive red.

Preview Code

Quarterly Bridge

Q3 to Q4 revenue bridge showing upsell gains, churn losses, and new-logo additions. Data labels make each delta immediately readable.

Preview Code

Project Budget Variance

Approved budget vs actual spend breakdown per workstream. Custom green/red colors replace the default palette. Toolbox enabled.

Preview Code

P&L Summary with DataZoom

Full P&L walkthrough from Gross Revenue to Net Profit across twelve line items. DataZoom enabled for scrolling on smaller screens.

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

### WaterfallChart

Property

Type

Default

Description

Categories

List<string>

\[\]

X-axis labels for each step.

Values

List<double>

\[\]

Positive or negative values for each step.

IncreaseColor

string

var(--color-primary)

Color for positive values.

DecreaseColor

string

var(--color-destructive)

Color for negative values.

LabelStrategy

ChartLabelStrategy

Smart

How category-axis labels are rendered. Smart auto-rotates at higher densities; ShowAll forces all horizontal; Auto thins overlapping labels.

LabelRotate

int?

null

Manual rotation override in degrees on top of LabelStrategy.

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)**

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.

Colors

List<string>?

null

Explicit series colors overriding the theme palette.

ColorPalette

List<string>?

null

Named palette used to seed series colors.

ShowLegend

bool

false

Shows or hides the chart legend.

ShowTooltip

bool

true

Shows or hides hover tooltips on bars.

ShowDataLabels

bool

false

Show value labels on each waterfall bar.

LabelPosition

string

"top"

Position of data labels relative to each bar.

LabelFormat

string?

null

ECharts label formatter template string.

DataZoom

bool

false

Enable scroll and drag zoom controls on the x-axis.

Toolbox

bool

false

Show ECharts toolbox with save, restore, and zoom utilities.

MarkArea

EChartMarkArea?

null

Highlight a rectangular region overlaid on the chart.

MarkLine

EChartMarkLine?

null

Reference line drawn across the chart.

MarkPoint

EChartMarkPoint?

null

Annotated marker points overlaid on the chart.

AnimationDuration

int?

null

Animation length in milliseconds when rendering.

AnimationEasing

string?

null

ECharts easing function name applied to animations.

PhantomCycleMs

int

1400

Phantom-mode refresh interval in milliseconds while loading.