Chart
A line/bar/area chart with axes. The renderer derives a text alternative from the data automatically.
rendered, live
the wire — click a line to scrub
the contract — Chart in catalog.json
{
"type": "object",
"description": "A line/bar/area chart with axes. The renderer derives a text alternative from the data automatically.",
"properties": {
"component": {
"const": "Chart"
},
"kind": {
"type": "string",
"enum": [
"line",
"bar",
"area"
],
"description": "The mark. Line for trends over time, bar for comparisons, area for cumulative feel."
},
"label": {
"$ref": "https://a2ui.org/specification/v1_0/common_types.json#/$defs/DynamicString",
"description": "The chart's title and accessible name, e.g. \"Error rate by class\". Required — a chart without a name is unreadable to assistive tech."
},
"series": {
"oneOf": [
{
"type": "array",
"minItems": 1,
"items": {
"type": "object",
"properties": {
"label": {
"$ref": "https://a2ui.org/specification/v1_0/common_types.json#/$defs/DynamicString",
"description": "Series name, shown in the legend and the generated text alternative."
},
"values": {
"oneOf": [
{
"type": "array",
"items": {
"type": "number"
}
},
{
"$ref": "https://a2ui.org/specification/v1_0/common_types.json#/$defs/DataBinding"
}
],
"description": "The data points, raw numbers. Bind with {\"path\": ...} to stream new points."
}
},
"required": [
"label",
"values"
],
"additionalProperties": false
}
},
{
"$ref": "https://a2ui.org/specification/v1_0/common_types.json#/$defs/DataBinding"
}
],
"description": "The data series. Bind each series' values with {\"path\": ...} so the chart streams."
},
"xLabels": {
"oneOf": [
{
"type": "array",
"items": {
"type": "string"
}
},
{
"$ref": "https://a2ui.org/specification/v1_0/common_types.json#/$defs/DataBinding"
}
],
"description": "Labels along the x axis, one per data point. With xFormat 'datetime', supply ISO 8601 strings and the renderer formats them in the user's locale."
},
"xFormat": {
"type": "string",
"enum": [
"text",
"datetime"
],
"default": "text",
"description": "How to interpret xLabels — same idea as a DataTable column format. 'datetime' expects ISO 8601 strings."
},
"unit": {
"type": "string",
"description": "Unit for the value axis: 'ms', '%', 'req/s', or an ISO 4217 currency code."
},
"markers": {
"oneOf": [
{
"type": "array",
"items": {
"type": "object",
"properties": {
"pointIndex": {
"type": "number",
"description": "Zero-based x position the marker sits on. Out-of-range markers are dropped with a console warning, never floated."
},
"intent": {
"type": "string",
"enum": [
"good",
"bad",
"warning",
"info",
"neutral"
],
"default": "warning",
"description": "Judgment of the marked event; default 'warning'. Intent implies the glyph — markers are never colour-only."
},
"label": {
"type": "string",
"description": "Human text for the marker, e.g. 'Sentiment fell 22%'. Required — it is the marker's accessible name and joins the chart's generated text alternative."
}
},
"required": [
"pointIndex",
"label"
],
"additionalProperties": false
}
},
{
"$ref": "https://a2ui.org/specification/v1_0/common_types.json#/$defs/DataBinding"
}
],
"description": "Anomaly/event markers: each marks one x position with a labelled, intent-coloured glyph. Bind with {\"path\": ...} to add markers as you learn more."
},
"pointAction": {
"$ref": "https://a2ui.org/specification/v1_0/common_types.json#/$defs/Action",
"description": "Fired when the user activates a data point (click, or arrow-key traversal + Enter). The renderer adds seriesLabel, pointIndex, xLabel, and value to the action context automatically — put your own drill context (e.g. a cluster id) in context."
}
},
"required": [
"component",
"kind",
"label",
"series"
]
}the prompt-pack — paste into your agent
### Chart — line / bar / area with axes
| prop | type | required | notes |
| ------------- | --------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| `kind` | `"line" \| "bar" \| "area"` | yes | line = trend, bar = comparison |
| `label` | string | yes | title and accessible name |
| `series` | array \| `{"path"}` | yes | series shape below; bind `values` to stream |
| `xLabels` | string[] \| `{"path"}` | no | one label per point |
| `xFormat` | `"text" \| "datetime"` | no | `datetime`: xLabels are ISO 8601 strings, rendered in the user's locale |
| `unit` | string | no | value-axis unit: `"ms"`, `"%"`, `"USD"` … |
| `markers` | array \| `{"path"}` | no | labelled anomaly/event glyphs; marker shape below |
| `pointAction` | action | no | fired on point activation; `seriesLabel`, `pointIndex`, `xLabel`, `value` are added to its context automatically — put your own ids in `context` |
Series shape — `label` and `values` (raw numbers) required:
```
{"label":"5xx","values":{"path":"/err5xx"}}
```
Marker shape — `pointIndex` (zero-based x position) and `label` (human text; it joins the chart's
text alternative) required; `intent` defaults `"warning"`:
```
{"pointIndex":13,"intent":"bad","label":"Sentiment fell 22%"}
```
```
{"id":"errors","component":"Chart","kind":"line","label":"Error rate by class","unit":"%","series":[{"label":"5xx","values":{"path":"/err5xx"}},{"label":"4xx","values":{"path":"/err4xx"}}],"xLabels":{"path":"/times"},"xFormat":"datetime","markers":[{"pointIndex":3,"intent":"bad","label":"Deploy 4190 went out"}],"pointAction":{"event":{"name":"point_drilled","context":{"clusterId":"cl-report-accuracy"}}}}
```
To stream a new reading, append to the bound array with `updateDataModel` (send the whole updated
array — arrays replace wholesale).