OSCharts demo Halcyon County sample data

Gallery › Line chart

Line chart: Library visits by month

A category column (years, months, dates), then one or more number columns.

Library visits by monthBurnt End and Glimmer branches, 2026

Line chart of Burnt End and Glimmer by Month, from Jan 2026 to Sep 2026. Burnt End went from 4,210 in Jan 2026 to 4,705 in Sep 2026, a change of +495 (+11.8%). Its highest is 6,480 (Jul 2026) and its lowest 4,030 (Feb 2026). Glimmer went from 2,105 in Jan 2026 to 2,540 in Sep 2026, a change of +435 (+20.7%). Its highest is 3,520 (Jul 2026) and its lowest 2,105 (Jan 2026).

  • Burnt End
  • Glimmer
2,0003,0004,0005,0006,0007,000Jan 2026Feb 2026Mar 2026Apr 2026May 2026Jun 2026Jul 2026Aug 2026Sep 2026Burnt EndGlimmer
2,0004,0006,0008,000Jan2026Mar2026May2026Jul2026Sep2026Burnt EndGlimmer
Data for “Library visits by month”
MonthBurnt EndGlimmer
Jan 20264,2102,105
Feb 20264,0302,210
Mar 20264,6752,380
Apr 20264,5902,440
May 20264,8202,610
Jun 20266,1203,390
Jul 20266,4803,520
Aug 20265,2102,875
Sep 20264,7052,540

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": "library-visits",
  "type": "line",
  "title": "Library visits by month",
  "subtitle": "Burnt End and Glimmer branches, 2026",
  "source": "Halcyon County sample data (fictional, for the demo)",
  "data": {
    "columns": [
      "Month",
      "Burnt End",
      "Glimmer"
    ],
    "rows": [
      [
        "2026-01",
        4210,
        2105
      ],
      [
        "2026-02",
        4030,
        2210
      ],
      [
        "2026-03",
        4675,
        2380
      ],
      [
        "2026-04",
        4590,
        2440
      ],
      [
        "2026-05",
        4820,
        2610
      ],
      [
        "2026-06",
        6120,
        3390
      ],
      [
        "2026-07",
        6480,
        3520
      ],
      [
        "2026-08",
        5210,
        2875
      ],
      [
        "2026-09",
        4705,
        2540
      ]
    ]
  }
}

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