Gallery › Funnel chart

Funnel chart: From permit application to final inspection

Stage names and counts, in order.

From permit application to final inspectionResidential permits, 2026

Funnel chart of Permits through 5 stages, from Applied (640) to Final inspection passed (402). 62.8% of Applied reach Final inspection passed. The biggest drop is from Construction started to Final inspection passed, where 80.7% continue.

Data for “From permit application to final inspection”
Stage	Permits	Share of Applied	Share of stage before
Applied	640	100%
Complete application	588	91.9%	91.9%
Approved	551	86.1%	93.7%
Construction started	498	77.8%	90.4%
Final inspection passed	402	62.8%	80.7%

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": "permit-funnel",
  "type": "funnel",
  "title": "From permit application to final inspection",
  "subtitle": "Residential permits, 2026",
  "source": "Halcyon County sample data (fictional, for the demo)",
  "data": {
    "columns": [
      "Stage",
      "Permits"
    ],
    "rows": [
      [
        "Applied",
        640
      ],
      [
        "Complete application",
        588
      ],
      [
        "Approved",
        551
      ],
      [
        "Construction started",
        498
      ],
      [
        "Final inspection passed",
        402
      ]
    ]
  }
}

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