Get started

Two files and a spec. The full guide, with every option, is the repository's README.

1. Get the files

• oscharts.js, the drop-in script (about 30 KB gzipped)
• oscharts.css, the stylesheet
• oscharts.esm.js, the same library as a JavaScript module

2. Put a chart on a page

<link rel="stylesheet" href="oscharts.css">
<script src="oscharts.js" defer></script>

<div id="spending"></div>
<script type="module">
  OSCharts.mount(document.getElementById("spending"), {
    type: "column",
    title: "General fund spending by department",
    format: { style: "currency", currency: "USD", notation: "compact" },
    data: {
      columns: ["Fiscal year", "Public safety", "Roads and bridges"],
      rows: [["2025", 5200000, 2900000], ["2026", 5600000, 3100000]]
    }
  });
</script>

Or chart a table you already publish

<table data-oscharts="bar" data-source="County Clerk">
  <caption>Marriage licenses issued, by quarter</caption>
  <thead><tr><th>Quarter</th><th>Licenses</th></tr></thead>
  <tbody><tr><th>Q1</th><td>48</td></tr><tr><th>Q2</th><td>91</td></tr></tbody>
</table>

With the script, the chart appears in the table's place; without it, readers get the table unchanged.

Or render on a server or in a build step

import { render, renderSVG, check } from "oscharts";

check(spec);       // [] when the spec is fine, or plain-language problems
render(spec);      // the complete <figure>, as HTML
renderSVG(spec);   // a standalone SVG file

Or use the command line

npx oscharts render spec.json > chart.html
npx oscharts svg spec.json --patterns > chart.svg
npx oscharts check spec.json
npx oscharts types

The source and every file are in OSCivic/OSCharts. It needs no other software; the command line and server rendering need Node 18 or later.