Gallery › Radar chart

Radar chart: Resident satisfaction by service

A spoke-label column (three or more rows), then one number column per series.

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": "service-radar",
  "type": "radar",
  "title": "Resident satisfaction by service",
  "subtitle": "Average score out of 10, 2025 and 2026 surveys",
  "source": "Halcyon County sample data (fictional, for the demo)",
  "format": {
    "maximumFractionDigits": 1
  },
  "data": {
    "columns": [
      "Service",
      "2025",
      "2026"
    ],
    "rows": [
      [
        "Roads",
        5.1,
        5.9
      ],
      [
        "Parks",
        7.4,
        7.8
      ],
      [
        "Library",
        8.2,
        8.4
      ],
      [
        "Public safety",
        7,
        7.3
      ],
      [
        "Permits",
        4.6,
        6.2
      ],
      [
        "Trash pickup",
        7.9,
        7.6
      ]
    ]
  }
}

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