Gallery › Pie chart

Pie chart: Where the general fund's money comes from

A label column and one number column. More than eight parts fold into Other.

Where the general fund's money comes fromFiscal year 2026 adopted budget

Pie chart of Amount by Source: 6 parts adding up to $11M. Largest: Property tax, $6.2M (58.5%), Sales tax, $2.4M (22.6%) and Fees and permits, $900K (8.5%). Smallest: Interest, $150K (1.4%).

Property tax
Sales tax
Fees and permits
State grants
Fines
Interest

Data for “Where the general fund's money comes from”
Source	Amount	Share
Property tax	$6.2M	58.5%
Sales tax	$2.4M	22.6%
Fees and permits	$900K	8.5%
State grants	$700K	6.6%
Fines	$250K	2.4%
Interest	$150K	1.4%

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": "revenue-sources",
  "type": "pie",
  "title": "Where the general fund's money comes from",
  "subtitle": "Fiscal year 2026 adopted budget",
  "format": {
    "style": "currency",
    "currency": "USD",
    "notation": "compact"
  },
  "source": "Halcyon County sample data (fictional, for the demo)",
  "data": {
    "columns": [
      "Source",
      "Amount"
    ],
    "rows": [
      [
        "Property tax",
        6200000
      ],
      [
        "Sales tax",
        2400000
      ],
      [
        "Fees and permits",
        900000
      ],
      [
        "State grants",
        700000
      ],
      [
        "Fines",
        250000
      ],
      [
        "Interest",
        150000
      ]
    ]
  }
}

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