Skip to content
CHARTS · COMPLETE

WaterfallChart

Explain how increases and decreases add up to a total.

Explain how increases and decreases add up to a total, with colors also told apart by sign for accessibility.

Why it helps

  • Running total
  • Increases and decreases
  • Totals

Where it fits

  • Profit and loss
  • Budget changes
  • Inventory

Example

<WaterfallChart Zoomable="true" Label="Profit bridge" Items="_items" ValueFormat="#,0" />

@code {
    private readonly WaterfallItem[] _items =
    [
        new("Revenue", 520),
        new("Cost of goods", -210),
        new("Salaries", -140),
        new("Marketing", -45),
        new("Subtotal", 0, true),
        new("Other income", 30),
        new("Taxes", -38),
        new("Net profit", 0, true)
    ];
}

A short fragment. Add @using RayCraft.Blazor.Components to your page and use an interactive render mode.

Part of RayCraft Complete.

All controls ยท Documentation