Category: Charts
Draws a static, accessible bar chart as HTML (no script, no chart library) from labels and datasets, in grouped, stacked, relative or overlaid bars, vertical or horizontal, negative values, a linear or log value axis, d3 number formats, optional value labels and a legend. Series differ by fill pattern as well as colour, and a hidden table holds every value.
| Surface | Note |
|---|---|
| google-meet-stage | Bars are positioned HTML with container queries; a stage iframe that drops them shows the hidden table only. |
| google-chat | HTML is not rendered; only the text of the hidden table is shown. |
| Style blocks, container queries and absolute positioning are stripped by most clients; the table is what survives. |
| Field | Type | Required |
|---|---|---|
| labels | array of strings. Category labels (up to 40 drawn; the hidden table lists all). | required |
| datasets | array of {label, data, color}. One series each (up to 8 drawn); data is numbers, anything else is skipped with a note; color is an optional | optional |
| mode | group (default) | stack | relative | overlay. stack adds the signed values; relative stacks positives up and negatives down separately; overlay draws every series on the baseline. | required |
| orientation | v (default) | h. | required |
| show_values | boolean. Value labels on the bars; they hide when the chart is too narrow to fit them (the table keeps every value). | required |
| value_format | d3-format string for the value labels, for example ',.0f' or '.1%'. Types b c o p r x X are not supported. | required |
| y_format | d3-format string for the axis labels (and the value labels when value_format is absent). | required |
| y_scale | linear (default) | log. A log axis ticks at powers of ten, leaves out numbers that are not above zero (with a note) and cannot stack. | required |
| y_range | array of two numbers, min then max. Fixes the value axis; bars past it are cut at the axis with a note. | required |
| y_ticks | integer 2 to 12 (default 5). Target tick count. | required |
| y_reverse | boolean. Reverse the value axis. | required |
| gap | number 0 to 0.8 (default 0.3). Share of each category slot left empty. | required |
| legend_position | top | bottom | right | none. Default top with more than one series, none otherwise. | required |
| version | integer (optional, default 1). Only version 1 exists; a higher whole number is drawn as version 1 with a note. | optional |
{
"type": "chartjs_bar",
"labels": [
"Category A",
"Category B",
"Category C",
"Category D"
],
"show_values": true,
"value_format": "Value format",
"y_format": "Y format",
"y_range": 75,
"y_reverse": true
}{
"identifier": "urn:air:a2uicatalog.ai:atom:chartjs_bar",
"displayName": "Chartjs Bar",
"type": "application/vnd.a2ui.atom+json",
"url": "https://a2uicatalog.ai/atoms/chartjs_bar/",
"capabilities": [
"web",
"google-apps-script-web",
"mcp-apps",
"android"
],
"description": "Draws a static, accessible bar chart as HTML (no script, no chart library) from labels and datasets, in grouped, stacked, relative or overlaid bars, vertical or horizontal, negative values, a linear or log value axis, d3 number formats, optional value labels and a legend. Series differ by fill pattern as well as colour, and a hidden table holds every value.",
"representativeQueries": [
"show a static accessible bar chart (group, stack, relative, overlay; vertical or horizontal; log axis)",
"draws a static, accessible bar chart as html (no script, no chart library) from labels and datasets,",
"render a chartjs bar"
]
}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