TwWaterfallChart

TwWaterfallChart shows how a series of changes builds up to a result. Each ChartValue in Data is a change, positive or negative, and each column floats from where the previous one ended. A total column is added for you. Direction is shown by color and named in the legend and tooltips, so it never depends on color alone.

<TwChart Title="Profit bridge" Description="Thousands of pounds">
    <TwWaterfallChart Data="@_bridge" />
</TwChart>

@code {
    private readonly ChartValue[] _bridge =
    [
        new("Sales", 520),
        new("Services", 140),
        new("Cost of goods", -210),
        new("Salaries", -180),
        new("Marketing", -60)
    ];
}

Set ShowValues to label each column with its signed change.

<TwChart Title="Profit bridge">
    <TwWaterfallChart Data="@_bridge" ShowValues="true" />
</TwChart>

Set ShowTotal to false to leave out the final column. TotalLabel, IncreaseLabel and DecreaseLabel rename the legend entries.

<TwChart Title="Profit bridge">
    <TwWaterfallChart Data="@_bridge" TotalLabel="Profit" IncreaseLabel="Income" DecreaseLabel="Cost" />
</TwChart>

Tooltips and the table view give the change at each step. Tooltips also give the running total.

The legend, tooltips, keyboard navigation, table view, value formatting, height and empty state work the same on every chart. See TwChart for those options.

The plot is a single Tab stop. Each data point is announced with its series and value as focus reaches it, and the table view presents the same data without the plot.