Waterfall Chart

Displays how an initial value is affected by a series of positive and negative changes. Bars float to show the running total.

Basic Usage

<ArcadiaWaterfallChart TItem="WaterfallItem" Data="@data"
                     CategoryField="@(d => d.Category)"
                     ValueField="@(d => d.Amount)"
                     Height="400" Width="600" Title="Revenue Waterfall" />

@code {
    record WaterfallItem(string Category, double Amount);

    List<WaterfallItem> data = new()
    {
        new("Revenue", 500000),
        new("COGS", -180000),
        new("OpEx", -120000),
        new("Marketing", -65000),
        new("Tax", -40000),
    };
}

Parameters

Parameter	Type	Default	Description
`CategoryField`	`Func<T, string>`	required	Extracts the category label
`ValueField`	`Func<T, double>`	required	Extracts the value (positive = increase, negative = decrease)
`PositiveColor`	`string`	`"var(--arcadia-color-success, #16a34a)"`	Color for positive (increase) bars
`NegativeColor`	`string`	`"var(--arcadia-color-danger, #dc2626)"`	Color for negative (decrease) bars
`TotalColor`	`string`	`"var(--arcadia-color-primary, #2563eb)"`	Color for total bars
`ConnectorOpacity`	`double`	`0.2`	Opacity of the connector lines between waterfall bars (0.0 to 1.0)
`ConnectorDashPattern`	`string`	`"3,3"`	SVG stroke-dasharray pattern for connector lines between bars

Plus all shared ChartBase parameters.

Features

Automatic color coding: green for increases, red for decreases
Connector lines between bars showing the running total
Hover tooltips with value and running total
Responsive layout with the standard layout engine
PNG/SVG export via toolbar