Gallery › Column chart

Column chart: Total general fund spending

A category column, then one or more number columns (one per series). stack: "normal" or "percent" stacks them.

Total general fund spendingStacked by department, fiscal years 2022 to 2026

Stacked column chart of Public safety, Roads and bridges and Parks by Fiscal year, from 2022 to 2026. Public safety went from $4.1M in 2022 to $5.6M in 2026, a change of +$1.5M (+36.6%). Roads and bridges went from $2.3M in 2022 to $3.1M in 2026, a change of +$800K (+34.8%). Its highest is $3.1M (2026) and its lowest $2.2M (2024). Parks went from $800K in 2022 to $1M in 2026, a change of +$200K (+25%). Totals range from $7.2M (2022) to $9.7M (2026).

Public safety
Roads and bridges
Parks

Data for “Total general fund spending”
Fiscal year	Public safety	Roads and bridges	Parks	Total
2022	$4.1M	$2.3M	$800K	$7.2M
2023	$4.4M	$2.5M	$850K	$7.8M
2024	$4.8M	$2.2M	$900K	$7.9M
2025	$5.2M	$2.9M	$950K	$9.1M
2026	$5.6M	$3.1M	$1M	$9.7M

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": "spending-stacked",
  "type": "column",
  "stack": "normal",
  "title": "Total general fund spending",
  "subtitle": "Stacked by department, fiscal years 2022 to 2026",
  "format": {
    "style": "currency",
    "currency": "USD",
    "notation": "compact"
  },
  "source": "Halcyon County sample data (fictional, for the demo)",
  "data": {
    "columns": [
      "Fiscal year",
      "Public safety",
      "Roads and bridges",
      "Parks"
    ],
    "rows": [
      [
        "2022",
        4100000,
        2300000,
        800000
      ],
      [
        "2023",
        4400000,
        2500000,
        850000
      ],
      [
        "2024",
        4800000,
        2200000,
        900000
      ],
      [
        "2025",
        5200000,
        2900000,
        950000
      ],
      [
        "2026",
        5600000,
        3100000,
        1000000
      ]
    ]
  }
}

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