Gallery › Box plot

Box plot: Fire response times by district

A group column and a value column (one row per value), or one number column per group.

Fire response times by districtMinutes from call to arrival, 2026 calls

Box plot of Minutes for 3 groups. Each box spans the middle half of the values; the line inside is the median; whiskers reach the furthest values within 1.5 box-lengths; dots beyond them are outliers. The highest median is Rural (13.6); the lowest is Burnt End (7.2).

Data for “Fire response times by district”
Group	Count	Minimum	Lower quartile	Median	Upper quartile	Maximum
Burnt End	12	5.1	6.4	7.2	8.1	13.5
Glimmer	11	6	7.3	8.3	9.6	11
Rural	12	8.5	11.6	13.6	17.1	27

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": "response-box",
  "type": "box",
  "title": "Fire response times by district",
  "subtitle": "Minutes from call to arrival, 2026 calls",
  "source": "Halcyon County sample data (fictional, for the demo)",
  "group": "District",
  "value": "Minutes",
  "format": {
    "maximumFractionDigits": 1
  },
  "data": {
    "columns": [
      "District",
      "Minutes"
    ],
    "rows": [
      [
        "Burnt End",
        5.1
      ],
      [
        "Burnt End",
        5.8
      ],
      [
        "Burnt End",
        6.2
      ],
      [
        "Burnt End",
        6.4
      ],
      [
        "Burnt End",
        6.9
      ],
      [
        "Burnt End",
        7.1
      ],
      [
        "Burnt End",
        7.3
      ],
      [
        "Burnt End",
        7.8
      ],
      [
        "Burnt End",
        8
      ],
      [
        "Burnt End",
        8.4
      ],
      [
        "Burnt End",
        9.1
      ],
      [
        "Burnt End",
        13.5
      ],
      [
        "Glimmer",
        6
      ],
      [
        "Glimmer",
        6.6
      ],
      [
        "Glimmer",
        7
      ],
      [
        "Glimmer",
        7.5
      ],
      [
        "Glimmer",
        7.9
      ],
      [
        "Glimmer",
        8.3
      ],
      [
        "Glimmer",
        8.8
      ],
      [
        "Glimmer",
        9.2
      ],
      [
        "Glimmer",
        9.9
      ],
      [
        "Glimmer",
        10.4
      ],
      [
        "Glimmer",
        11
      ],
      [
        "Rural",
        8.5
      ],
      [
        "Rural",
        9.6
      ],
      [
        "Rural",
        10.8
      ],
      [
        "Rural",
        11.9
      ],
      [
        "Rural",
        12.4
      ],
      [
        "Rural",
        13
      ],
      [
        "Rural",
        14.2
      ],
      [
        "Rural",
        15.1
      ],
      [
        "Rural",
        16.8
      ],
      [
        "Rural",
        18
      ],
      [
        "Rural",
        19.5
      ],
      [
        "Rural",
        27
      ]
    ]
  }
}

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