Examples
A Start step sets the opening total, each Delta step adds its Value (negative to subtract), and an End step draws where it lands. Dashed rules carry each total across to the next bar.
Subtotal steps draw the running total part way through; Horizontal lays the bars out top to bottom with room for longer names.
Playground
<WaterfallChart
ValueFormat="{0:N0}"
Title="Customers over the quarter"
Steps="@_steps" />
@code {
private readonly WaterfallStep[] _steps =
[
new("July 1", 1_240, WaterfallStepKind.Start),
new("New signups", 310),
new("Reactivated", 42),
new("Churned", -96),
new("Merged", -12),
new("Sept 30", 0, WaterfallStepKind.End),
];
}API
<WaterfallChart>
DaisyBlazor.ChartsParameters
- AspectRatio double= 1.78
Width divided by height. The chart keeps this shape at any width; its text keeps its size.
- DecreaseColor string= "var(--color-error)"
CSS colour of decreases.
- Horizontal bool= false
Lay the bars out top to bottom, with the categories down the left side.
- IncreaseColor string= "var(--color-success)"
CSS colour of increases.
- RowHeight double?= null
Height of each row in px, for a chart that lays its categories out as rows (horizontal bars, a Gantt's lanes, a heatmap's rows…): its height then follows its number of rows instead of AspectRatio, so a long list keeps readable rows at any width. A chart, or an orientation, without rows ignores it.
- ShowTitle bool= true
Draw Title as a visible heading above the chart (the default); false keeps it only as the chart's accessible name, for a chart inside a card that already has a heading.
- ShowValues bool= true
Print each bar's value (signed for changes) next to it.
- Steps IReadOnlyList<
WaterfallStep> = []The bars, in order: usually a Start, Delta changes, optional Subtotal steps and an End.
- Title string= null
Optional heading rendered above the chart; it is also the chart's accessible name.
- TotalColor string= "var(--color-primary)"
CSS colour of the start, subtotal and end bars.
- ValueFormat string= "{0:#,0.##}"
Format string for values in labels, ticks and tooltips, e.g. "{0:N0}".
- Width string= "100%"
CSS width of the chart wrapper.
- Class string= null
Additional CSS classes merged onto the w-full wrapper.
- Style string= null
Inline styles appended after the width on the wrapper.