Category: Charts
A stacked area chart: one coloured layer per series, stacked on a zero baseline over an ordered x axis (time, stages, categories), so the top edge is the total and each layer's thickness is that series' value. Drawn as SVG with a zero-based value axis, a legend and a hidden data table. The optional offset turns it into a 100% share chart (expand), a centred chart (silhouette) or a streamgraph (wiggle). Before 2026-10-21 the default was a list of horizontal bars; layout 'bars' still draws that.
| Field | Type | Required |
|---|---|---|
| title | string (optional, e.g., 'SaaS Cumulative Workloads') | optional |
| labels | list of strings representing X-axis ticks (e.g., ['Q1', 'Q2', 'Q3', 'Q4']) | required |
| series | list of dictionaries representing stacked layers: [{'label': 'Enterprise', 'data': [10, 25, 45, 60], 'color': '#00f2ff'}, ...] | required |
| layout | string (optional, default 'area'): 'area' draws the stacked area chart (SVG, zero baseline, value axis). 'bars' draws a list of horizontal stacked bars, one row per label; that was the only drawing before 2026-10-21 and 'bars' keeps it unchanged. Absent, null or any other value means 'area'. The bar list ignores offset (a note says so when one is given). | optional |
| offset | string (optional, area layout only): how the layers sit on the baseline. Absent, 'none' or anything else is the plain zero baseline. 'expand' scales every point to 100% (a 0-100% axis), 'silhouette' centres the layers on a middle line, 'wiggle' is a streamgraph (d3's wiggle baseline, layers ordered inside-out). silhouette and wiggle have no value axis (the baseline means nothing); the hidden table lists the raw values. Up to 12 series and 60 labels; negative or non-numeric cells draw as 0 and are counted in a note. | optional |
| version | integer (optional, default 1). The stacked_area contract the payload was written for. Only version 1 exists; a higher whole number draws as version 1 with a note. | optional |
{
"type": "stacked_area",
"labels": [
"Category A",
"Category B",
"Category C",
"Category D"
],
"series": [
{
"label": "Series A",
"data": [
10,
20,
30,
40
]
},
{
"label": "Series B",
"data": [
5,
15,
25,
35
]
}
]
}{
"identifier": "urn:air:a2uicatalog.ai:atom:stacked_area",
"displayName": "Stacked Area",
"type": "application/vnd.a2ui.atom+json",
"url": "https://a2uicatalog.ai/atoms/stacked_area/",
"capabilities": [
"web",
"google-meet-stage",
"google-apps-script-web",
"mcp-apps",
"android"
],
"description": "A stacked area chart: one coloured layer per series, stacked on a zero baseline over an ordered x axis (time, stages, categories), so the top edge is the total and each layer's thickness is that series' value. Drawn as SVG with a zero-based value axis, a legend and a hidden data table. The optional offset turns it into a 100% share chart (expand), a centred chart (silhouette) or a streamgraph (wiggle). Before 2026-10-21 the default was a list of horizontal bars; layout 'bars' still draws that.",
"representativeQueries": [
"show a stacked area chart of series layers over an ordered axis (zero baseline, optional 100% / streamgraph offsets)",
"a stacked area chart: one coloured layer per series, stacked on a zero baseline over an ordered x ax",
"render a stacked area"
]
}The renderer is an open-source Google Apps Script web app. Deploy your own instance in 4 commands — you own the URL, no dependency on the demo endpoint.
git clone https://github.com/a2uicatalog/a2ui
cd a2ui/apps-script-surface/gas-wired-renderer
clasp push && clasp deploy