OSCharts demo Halcyon County sample data

Gallery › Donut chart

Donut chart: Fiscal year 2026 spending plan

Like pie, with the total in the middle.

Fiscal year 2026 spending planAdopted general fund budget, by department

Donut chart of Budget by Department: 6 parts adding up to $11M. Largest: Sheriff, $3.9M (36.8%), Road and bridge, $3.1M (29.2%) and Courts, $1.3M (12.3%). Smallest: Administration, $600K (5.7%).

  • Sheriff
  • Road and bridge
  • Courts
  • Parks
  • Library
  • Administration
Sheriff 36.8%Administration 5.7%Library 6.6%Parks 9.4%Courts 12.3%Road and bridge 29.2%$11MTotal
$11MTotal
Data for “Fiscal year 2026 spending plan”
DepartmentBudgetShare
Sheriff$3.9M36.8%
Road and bridge$3.1M29.2%
Courts$1.3M12.3%
Parks$1M9.4%
Library$700K6.6%
Administration$600K5.7%

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": "budget-donut",
  "type": "donut",
  "title": "Fiscal year 2026 spending plan",
  "subtitle": "Adopted general fund budget, by department",
  "format": {
    "style": "currency",
    "currency": "USD",
    "notation": "compact"
  },
  "source": "Halcyon County sample data (fictional, for the demo)",
  "data": {
    "columns": [
      "Department",
      "Budget"
    ],
    "rows": [
      [
        "Sheriff",
        3900000
      ],
      [
        "Road and bridge",
        3100000
      ],
      [
        "Courts",
        1300000
      ],
      [
        "Parks",
        1000000
      ],
      [
        "Library",
        700000
      ],
      [
        "Administration",
        600000
      ]
    ]
  }
}

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