Gallery › Column chart

Column chart: General fund spending by department

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

General fund spending by departmentHalcyon County, fiscal years 2022 to 2026

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%).

Public safety
Roads and bridges
Parks

Data for “General fund spending by department”
Fiscal year	Public safety	Roads and bridges	Parks
2022	$4.1M	$2.3M	$800K
2023	$4.4M	$2.5M	$850K
2024	$4.8M	$2.2M	$900K
2025	$5.2M	$2.9M	$950K
2026	$5.6M	$3.1M	$1M

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-by-year",
  "type": "column",
  "title": "General fund spending by department",
  "subtitle": "Halcyon County, 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