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 />
| Category | Series 1 | Series 2 |
|---|---|---|
| Revenue | 0 | 12400 |
| COGS | 7600 | 4800 |
| Gross Profit | 7600 | 7600 |
| R&D | 14000 | 1200 |
| Sales & Mktg | 11900 | 2100 |
| G&A | 11100 | 800 |
| Operating Income | 11100 | 3500 |
Revenue walks down to Operating Income through Cost of Goods Sold and operating expenses. Positive bars use primary color, negative bars use destructive red.
| Category | Series 1 | Series 2 |
|---|---|---|
| Q3 ARR | 0 | 8200 |
| New Logos | 8200 | 1450 |
| Upsell | 9650 | 680 |
| Churn | 9790 | 540 |
| Contraction | 9580 | 210 |
| Q4 ARR | 9580 | 9580 |
Q3 to Q4 revenue bridge showing upsell gains, churn losses, and new-logo additions. Data labels make each delta immediately readable.
| Category | Series 1 | Series 2 |
|---|---|---|
| Approved Budget | 0 | 500000 |
| Design | 458000 | 42000 |
| Engineering | 273000 | 185000 |
| QA | 245000 | 28000 |
| DevOps | 245000 | 8000 |
| Marketing | 218000 | 35000 |
| Final Spend | 218000 | 218000 |
Approved budget vs actual spend breakdown per workstream. Custom green/red colors replace the default palette. Toolbox enabled.
| Category | Series 1 | Series 2 |
|---|---|---|
| Gross Revenue | 0 | 18500 |
| Discounts | 17300 | 1200 |
| Net Revenue | 17300 | 17300 |
| COGS | 29500 | 5100 |
| Gross Profit | 29500 | 12200 |
| R&D | 39300 | 2400 |
| Sales | 36200 | 3100 |
| Marketing | 34400 | 1800 |
| G&A | 33300 | 1100 |
| EBITDA | 33300 | 3800 |
| D&A | 36680 | 420 |
| EBIT | 36680 | 3380 |
Full P&L walkthrough from Gross Revenue to Net Profit across twelve line items. DataZoom enabled for scrolling on smaller screens.
| Category | Series 1 | Series 2 |
|---|---|---|
| Revenue | 0 | 12400 |
| COGS | 7600 | 4800 |
| Gross Profit | 7600 | 7600 |
| R&D | 14000 | 1200 |
| Sales & Mktg | 11900 | 2100 |
| G&A | 11100 | 800 |
| Operating Income | 11100 | 3500 |
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. |