Waterfall Chart

import { Component } from '@angular/core';
import { WrWaterfallChart } from 'ngwr/charts/waterfall-chart';

@Component({ imports: [WrWaterfallChart] })
export class MyComponent {}

<wr-waterfall-chart
  ariaLabel="Profit bridge"
  [steps]="[
    { label: 'Opening', value: 4200, total: true },
    { label: 'Sales', value: 1800 },
    { label: 'Refunds', value: -350 },
    { label: 'Payroll', value: -900 },
    { label: 'Closing', value: 4750, total: true }
  ]"
/>

<wr-waterfall-chart [steps]="months" />

months: WrWaterfallStep[] = [
  { label: 'Start', value: 1200, total: true }, // opens the chart
  { label: 'Jan', value: 300 },
  { label: 'Feb', value: -150 },
  { label: 'Mar', value: 420 },
  { label: 'Q1', value: 1770, total: true }, // checked: 1200 + 300 − 150 + 420
  { label: 'Apr', value: -80 },
  { label: 'May', value: 260 },
  { label: 'Jun', value: 190 },
  { label: 'H1', value: 2140, total: true },
];

<wr-waterfall-chart [steps]="cash" />

<wr-waterfall-chart totalColor="var(--wr-color-on-surface-muted)" [steps]="bridge" />

<wr-waterfall-chart [steps]="bridge" [valueFormat]="format" />

const usd = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0 });
const compactUsd = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', notation: 'compact' });

// Compact past the bars ('label'), whole on the axis and in the tooltip, names and table.
// Every figure arrives as its magnitude; the chart writes + or − in front.
format = (value: number, where: WrWaterfallValueContext): string =>
  (where === 'label' ? compactUsd : usd).format(value);

<wr-waterfall-chart [steps]="bridge" [showValues]="false" [showGrid]="false" />

<wr-waterfall-chart ariaLabel="Profit bridge" dataTable [steps]="bridge" />

interface WrWaterfallStep {
  label: string;
  value: number;
  total?: boolean;
}

type WrWaterfallValueContext = 'label' | 'tick' | 'value';