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).