Gallery › Waterfall chart

Waterfall chart: How the general fund balance changed in 2026

A label column and a change column; totals: ["..."] names rows that are totals.

How the general fund balance changed in 2026Starting balance, the year's changes, and the ending balance

Waterfall chart of Amount: 8 steps from $3.2M (Start of year) to $1.8M (End of year). The largest increase is Property tax (+$6.2M). The largest decrease is Public safety (−$5.6M).

Increase
Decrease
Total

Data for “How the general fund balance changed in 2026”
Step	Change	Running total
Start of year	total	$3.2M
Property tax	+$6.2M	$9.4M
Sales tax	+$2.4M	$12M
Other revenue	+$2M	$14M
Public safety	−$5.6M	$8.2M
Roads	−$3.1M	$5.1M
Everything else	−$3.3M	$1.8M
End of year	total	$1.8M

Source: Halcyon County sample data (fictional, for the demo)

The spec

This is everything OSCharts needed to draw the chart above. The data is a table: named columns and rows, the way it sits in a spreadsheet.

{
  "id": "fund-balance",
  "type": "waterfall",
  "title": "How the general fund balance changed in 2026",
  "subtitle": "Starting balance, the year's changes, and the ending balance",
  "format": {
    "style": "currency",
    "currency": "USD",
    "notation": "compact"
  },
  "source": "Halcyon County sample data (fictional, for the demo)",
  "totals": [
    "Start of year",
    "End of year"
  ],
  "data": {
    "columns": [
      "Step",
      "Amount"
    ],
    "rows": [
      [
        "Start of year",
        3200000
      ],
      [
        "Property tax",
        6200000
      ],
      [
        "Sales tax",
        2400000
      ],
      [
        "Other revenue",
        2000000
      ],
      [
        "Public safety",
        -5600000
      ],
      [
        "Roads",
        -3100000
      ],
      [
        "Everything else",
        -3300000
      ],
      [
        "End of year",
        1800000
      ]
    ]
  }
}

Put it on a page

In a browser, load the two files and mount the chart:

<link rel="stylesheet" href="oscharts.css">
<script src="oscharts.js" defer></script>
<div id="chart"></div>
<script type="module">
  OSCharts.mount(document.getElementById("chart"), spec);
</script>

Or render it on a server or in a build step, so the chart is in the page before any JavaScript runs:

import { render } from "oscharts";
const html = render(spec);   // a complete, accessible <figure>

Command line: npx oscharts render spec.json > chart.html