Charts

Waterfall Chart

How a starting value turns into a result step by step — each bar floats from the running total, increases and decreases in their own colours, total bars close a section. Drawn as SVG by the component, rendered on the server and themed by the design tokens.

Part of @tectra-ng/charts (npm install @tectra-ng/charts, also included in tectra-ng).

Features12

API

Theming

Basic

Each step floats from the running total: increases in green, decreases in red, and total: true draws the running total from zero. Signed labels and dashed connectors show where the next step starts.

IncreaseDecreaseTotal

Cash flow for the quarter. Waterfall chart, 1 series, 7 values, total 440K
Category	Change	Total
Opening	+420K	420K
Sales	+310K	730K
Services	+95K	825K
Salaries	−240K	585K
Rent	−60K	525K
Taxes	−85K	440K
Closing	—	440K

Subtotals

Several total steps close sections along the way — gross, operating and net profit — while the running total carries on. Long category labels turn when they do not fit.

IncreaseDecreaseTotal

Profit and loss. Waterfall chart, 1 series, 10 values, total 163
Category	Change	Total
Revenue	+820	820
Cost of sales	−310	510
Gross profit	—	510
Marketing	−140	370
Research	−95	275
Admin	−70	205
Operating profit	—	205
Interest	+12	217
Tax	−54	163
Net profit	—	163

Negative

The running total may go below zero: the zero line appears and bars cross it.

IncreaseDecreaseTotal

Account balance. Waterfall chart, 1 series, 6 values, total 70
Category	Change	Total
Start	+40	40
Payroll	−95	-55
Invoices	+30	-25
Supplier	−25	-50
Loan	+120	70
End	—	70

Plain

dataLabels, connectors and showLegend turn the extras off for a quiet chart; yAxisTitle names the axis.

Visitors gained and lost by source. Waterfall chart, 1 series, 6 values, total 5,270
Category	Change	Total
Last week	+5,200	5,200
Search	+640	5,840
Social	−310	5,530
Email	+220	5,750
Ads	−480	5,270
This week	—	5,270

9 lines

<tx-waterfall-chart    [items]="items"    [dataLabels]="false"    [connectors]="false"    [showLegend]="false"    yAxisTitle="Visitors"    [height]="280"    ariaLabel="Visitors gained and lost by source"  />

Colors

color on an item paints one bar in its own colour, whatever its kind.

IncreaseDecreaseTotal

Budget by team. Waterfall chart, 1 series, 5 values, total 270
Category	Change	Total
Budget	+500	500
Design	−80	420
Engineering	−210	210
Grant	+60	270
Left	—	270

Events

barClick reports the clicked step with its change, the running total after it and its kind.

IncreaseDecreaseTotal

Click a part. Waterfall chart, 1 series, 5 values, total 150
Category	Change	Total
Start	+120	120
Wins	+45	165
Losses	−30	135
Bonus	+15	150
End	—	150

Click a bar.

Loading and empty

loading keeps the size with a skeleton; empty items show "No data".

No data

7 lines

<div class="wrap">  <div class="controls">    <button txButton label="Load data" variant="outlined" (click)="load()"></button>    <button txButton label="Clear" variant="text" (click)="items.set([])"></button>  </div>  <tx-waterfall-chart [items]="items()" [loading]="loading()" ariaLabel="Loaded data" /></div>

Live

New items redraw in place — bars slide to their new place and the connectors follow.

IncreaseDecreaseTotal

Shuffled data. Waterfall chart, 1 series, 6 values, total 180
Category	Change	Total
Opening	+200	200
Q1	−33	167
Q2	−21	146
Q3	+3	149
Q4	+31	180
Closing	—	180

6 lines

<div class="wrap">  <div class="controls">    <button txButton label="Shuffle" variant="outlined" (click)="shuffle()"></button>  </div>  <tx-waterfall-chart [items]="items()" ariaLabel="Shuffled data" /></div>

Accessibility

Tab to the chart: ←/→ walk the steps and each one is announced with its change and the running total; Home / End jump to the ends. Screen readers also get a summary with the final total and a hidden table.

IncreaseDecreaseTotal

Weekly hours. Waterfall chart, 1 series, 4 values, total 38
Category	Change	Total
Planned	+40	40
Meetings	−6	34
Overtime	+4	38
Worked	—	38

Design tokens

dt sets the increase, decrease and total colours, the connectors and the bar radius and width of one chart.

IncreaseDecreaseTotal

Stock movements. Waterfall chart, 1 series, 5 values, total 255
Category	Change	Total
On hand	+300	300
Received	+140	440
Shipped	−210	230
Returned	+25	255
Now	—	255

13 lines

<tx-waterfall-chart    [items]="items"    [dt]="{      waterfall: {        upColor: 'var(--tx-sky-500)',        downColor: 'var(--tx-orange-400)',        totalColor: 'var(--tx-surface-600)',        connectorDash: 'none',      },      bar: { radius: '2px', width: '70%' },    }"    ariaLabel="Stock movements"  />

Pass through

pt reaches the parts — bar, connector, dataLabel, grid, axis, legend, plot, tooltip and more.

IncreaseDecreaseTotal

Points by round. Waterfall chart, 1 series, 4 values, total 17
Category	Change	Total
Round 1	+12	12
Round 2	−4	8
Round 3	+9	17
Score	—	17

8 lines

<tx-waterfall-chart    [items]="items"    [pt]="{      connector: { style: { 'stroke-dasharray': '1 3' } },      dataLabel: { style: { 'font-weight': '400' } },    }"    ariaLabel="Points by round"  />

Unstyled

unstyled removes the tectra styles: no tokens, no rounding, no motion — the geometry, the tooltip and the keyboard stay, ready for your own CSS.

IncreaseDecreaseTotal