Gallery › Column and line chart

Column and line chart: Ambulance response time against the target

Like column; seriesTypes: {"Target": "line"} draws chosen series as lines, on the same scale.

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-vs-target",
  "type": "combo",
  "title": "Ambulance response time against the target",
  "subtitle": "Median minutes from call to arrival",
  "source": "Halcyon County sample data (fictional, for the demo)",
  "seriesTypes": {
    "Median response": "column",
    "Target": "line"
  },
  "format": {
    "maximumFractionDigits": 1
  },
  "yAxis": {
    "title": "Minutes"
  },
  "data": {
    "columns": [
      "Month",
      "Median response",
      "Target"
    ],
    "rows": [
      [
        "Jan",
        9.8,
        9
      ],
      [
        "Feb",
        9.4,
        9
      ],
      [
        "Mar",
        9.1,
        9
      ],
      [
        "Apr",
        8.7,
        9
      ],
      [
        "May",
        8.9,
        9
      ],
      [
        "Jun",
        9.6,
        9
      ],
      [
        "Jul",
        8.5,
        9
      ],
      [
        "Aug",
        8.2,
        9
      ],
      [
        "Sep",
        8.4,
        9
      ]
    ]
  }
}

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