Donut Stat

Category: Charts

Live preview

Donut Stat

Renders a single key metric with a surrounding donut chart indicating

Surfaces

webgoogle-meet-stagegoogle-apps-script-webmcp-appsandroid

Degraded on

Surface	Note
google-chat	Only the metric value, label, and percentage will be rendered as text. The visual donut chart is not supported.

Fields

Field	Type	Required
value	number (the current value, e.g., 75)	required
max_value	number (the maximum possible value, e.g., 100)	required
label	string (descriptive label for the metric, e.g., 'Completion')	required
unit	string (optional, unit for the value, e.g., '%')	optional
color	string (hex or named color for the donut segment, e.g., '#2196F3')	required
size	string (CSS size value, e.g., '100px')	required

Example payload

{
  "type": "donut_stat",
  "value": 75,
  "max_value": 5,
  "label": "Donut Stat",
  "color": "#6366f1",
  "size": "md"
}

ARD catalog entry

{
  "identifier": "urn:air:a2uicatalog.ai:atom:donut_stat",
  "displayName": "Donut Stat",
  "type": "application/vnd.a2ui.atom+json",
  "url": "https://a2uicatalog.ai/atoms/donut_stat/",
  "capabilities": [
    "web",
    "google-meet-stage",
    "google-apps-script-web",
    "mcp-apps",
    "android"
  ],
  "description": "Renders a single key metric with a surrounding donut chart indicating",
  "representativeQueries": [
    "show a CSS ring chart with centre value and percentage its proportion or progress",
    "renders a single key metric with a surrounding donut chart indicating",
    "render a donut stat"
  ]
}

← Full ARD catalog

Deploy your own Google Apps Script renderer

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

Full deploy guide →