Gallery › Bar chart

Bar chart: Building permits issued in 2026, by type

Like column, drawn sideways: best for long category names or many categories.

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": "permits-by-type",
  "type": "bar",
  "title": "Building permits issued in 2026, by type",
  "subtitle": "Halcyon County Development Services, January to September",
  "source": "Halcyon County sample data (fictional, for the demo)",
  "data": {
    "columns": [
      "Permit type",
      "Permits"
    ],
    "rows": [
      [
        "New single-family home",
        214
      ],
      [
        "Remodel or addition",
        167
      ],
      [
        "Fence, deck or patio",
        139
      ],
      [
        "Swimming pool",
        48
      ],
      [
        "Commercial build-out",
        36
      ],
      [
        "Accessory dwelling unit",
        21
      ],
      [
        "Demolition",
        12
      ]
    ]
  }
}

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