Gallery › Area chart

Area chart: Water use by customer type

Like line; stack: "normal" or "percent" shows parts of a whole over time.

Water use by customer typeMillions of gallons per quarter

Stacked area chart of Homes, Businesses and Farms and ranches by Quarter, from 2025 Q1 to 2026 Q3. Homes went from 118 in 2025 Q1 to 196 in 2026 Q3, a change of +78 (+66.1%). Businesses went from 42 in 2025 Q1 to 53 in 2026 Q3, a change of +11 (+26.2%). Farms and ranches went from 61 in 2025 Q1 to 140 in 2026 Q3, a change of +79 (+129.5%). Its highest is 140 (2026 Q3) and its lowest 58 (2026 Q1). Totals range from 221 (2025 Q1) to 389 (2026 Q3).

Homes
Businesses
Farms and ranches

Data for “Water use by customer type”
Quarter	Homes	Businesses	Farms and ranches	Total
2025 Q1	118	42	61	221
2025 Q2	151	47	96	294
2025 Q3	189	51	132	372
2025 Q4	124	44	70	238
2026 Q1	121	43	58	222
2026 Q2	157	49	101	307
2026 Q3	196	53	140	389

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": "water-use",
  "type": "area",
  "stack": "normal",
  "title": "Water use by customer type",
  "subtitle": "Millions of gallons per quarter",
  "source": "Halcyon County sample data (fictional, for the demo)",
  "format": {
    "maximumFractionDigits": 1
  },
  "data": {
    "columns": [
      "Quarter",
      "Homes",
      "Businesses",
      "Farms and ranches"
    ],
    "rows": [
      [
        "2025 Q1",
        118,
        42,
        61
      ],
      [
        "2025 Q2",
        151,
        47,
        96
      ],
      [
        "2025 Q3",
        189,
        51,
        132
      ],
      [
        "2025 Q4",
        124,
        44,
        70
      ],
      [
        "2026 Q1",
        121,
        43,
        58
      ],
      [
        "2026 Q2",
        157,
        49,
        101
      ],
      [
        "2026 Q3",
        196,
        53,
        140
      ]
    ]
  }
}

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