Gallery › Sparkline

Sparkline: Monthly sales tax receipts, 2026

A category column and one number column; drawn word-sized, inside a sentence.

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": "sales-tax-spark",
  "type": "sparkline",
  "title": "Monthly sales tax receipts, 2026",
  "format": {
    "style": "currency",
    "currency": "USD",
    "notation": "compact"
  },
  "data": {
    "columns": [
      "Month",
      "Receipts"
    ],
    "rows": [
      [
        "Jan",
        182000
      ],
      [
        "Feb",
        176000
      ],
      [
        "Mar",
        194000
      ],
      [
        "Apr",
        201000
      ],
      [
        "May",
        208000
      ],
      [
        "Jun",
        221000
      ],
      [
        "Jul",
        214000
      ],
      [
        "Aug",
        206000
      ],
      [
        "Sep",
        199000
      ]
    ]
  }
}

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