Waterfall Chart

A read-only, CSS-only waterfall: running-total bars at the ends, floating increase / decrease bars between, dashed connectors at each step. Built for cash flow and budget analysis. No JavaScript.

Q1 cash flow

Q1 cash flow, $ thousands
Step	Change	Balance
Starting balance	—	$50k
Income	+$35k	$85k
Operating costs	−$20k	$65k
Tax	−$10k	$55k
Ending balance	—	$55k

Start Income Operating Tax Ending

Markup

<!-- each bar floats from --start to --end (0..100); data-direction is
     total | increase | decrease -->
<div class="casca-waterfall" aria-hidden="true" data-grid>
  <div class="casca-waterfall-bar" data-direction="total" style="--start: 0; --end: 50">
    <span class="casca-waterfall-cap">$50k</span>
  </div>
  <div class="casca-waterfall-bar" data-direction="increase" style="--start: 50; --end: 85">
    <span class="casca-waterfall-cap">+$35k</span>
  </div>
  <!-- ...one bar per step... -->
</div>
<div class="casca-waterfall-labels"><span class="casca-waterfall-label">Start</span> <!-- ... --></div>