Waterfall Chart for Angular

import { AuiWaterfallChart } from '@absoluteui/angular/waterfall-chart';

Styles are included with the component. Behavior, keyboard and screen-reader support, design tokens, and limitations are described on the Waterfall Chart page; this page covers the Angular API.

Defaults for every instance: provideAbsoluteUIConfig({ components: { waterfallChart: { ... } } }) (see Configuration).

Example

import { Component } from '@angular/core';
import { AuiWaterfallChart } from '@absoluteui/angular/waterfall-chart';
import type { WaterfallStep } from '@absoluteui/components/waterfall-chart';

@Component({
  selector: 'app-bridge',
  imports: [AuiWaterfallChart],
  template: `<aui-waterfall-chart label="Profit bridge" [steps]="steps" [connectors]="true"></aui-waterfall-chart>`,
})
export class BridgeComponent {
  readonly steps: WaterfallStep[] = [
    { id: 'open', label: 'Opening', kind: 'total', value: 100 },
    { id: 'sales', label: 'Sales', value: 40 },
    { id: 'close', label: 'Closing', kind: 'total' },
  ];
}

`<aui-waterfall-chart>`

Class AuiWaterfallChart; template reference #ref="auiWaterfallChart".

Server rendering: Renders on the server; the browser re-creates it after hydration.

Inputs

Input	Type	Default	Description
`label`	`string`		Required. Chart title: visible text and the accessible name of the plot (aria-labelledby).
`hideLabel`	`boolean`	`false`	Visually hide the title; it stays the accessible name.
`description`	`string`		Visible description below the title, also referenced by aria-describedby (text only).
`summary`	`string`		Replaces the generated accessible summary (aria-describedby).
`valueFormat`	`NumberFormatOptions`		Number format for values in tooltips, labels, the data table, the summary, and axis ticks (ticks use fixed fraction digits).
`formatValue`	`(value: number) => string`		Custom value text; overrides valueFormat everywhere except axis ticks.
`steps`	`readonly WaterfallStep[]`		Required. Steps in order: { id, label, value?: number \| null, kind?: ‘delta’ \| ‘total’ }. Ids are unique and non-empty. delta (default): the change (null: a gap, the running total carries over). total: with a value, the running total becomes it (an opening balance); without, the bar shows the current running total.
`colors`	`WaterfallChartColors`		Palette slots (1-8) per step kind. Default increase 3, decrease 2, total 1.
`categoryAxis`	`{ label?: string; }`		Category axis title (also the first table column header; default “Category”).
`valueAxis`	`ValueAxisInput`		Value axis title, fixed domain, and tick count (2-20). The domain always includes zero.
`legend`	`ChartLegendMode`	`'auto'`	Legend of the step kinds present (Increase, Decrease, Total); not toggleable. auto and show display it, hide removes it.
`dataTable`	`ChartTableMode`	`'toggle'`	Data table fallback with the exact data: behind a Show data table button (built on first open), always visible, visually hidden (screen readers only), or none.
`tooltip`	`boolean`	`true`	Tooltip on pointer hover and keyboard focus.
`patterns`	`boolean`	`false`	Texture fills (and dash patterns for lines) so marks never differ by color alone (always on in forced colors).
`height`	`number`	`'300'`	Plot height in CSS px (integer 120-2000); the width follows the container.
`valueLabels`	`boolean`	`true`	Signed change (deltas) or total printed above the bar (below for decreases and negative totals); a label wider than the step is omitted.
`connectors`	`boolean`	`true`	Dashed connectors (aria-hidden) from each step to the next at the running total; none into a total step.
`locale`	`string`	`'en-US'`	Number and message locale.
`direction`	`Direction`	`'ltr'`	rtl mirrors the category axis (first step at the right), puts the value axis on the right, and swaps ArrowLeft/ArrowRight.

Two-way bindings

Model	Type	Change output	Description
`[(hiddenSeries)]`	`readonly string[]`	`(hiddenSeriesChange)`	Accepted and validated (string[]) for the shared chart contract; a waterfall has no series, so it has no effect.

Methods

Call them through a viewChild query or a template reference.

Method	Description
`setSeriesVisible(id: string, visible: boolean): void`	Inherited from the shared chart controller; no visible effect (a waterfall has no series).