Lumeo

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

dotnet add package Lumeo.Charts

One-time app setup (AddLumeo(), CSS & JS) is covered in the installation guide.

Usage

@using Lumeo

<WaterfallChart />

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

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

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

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

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.