Chart
Gen UI 2.0 standardA bar, line, area, scatter, pie or donut chart. "data" is a list of objects. "xKey" is the field of the category. "series" are the value fields.
One of the 69 components in CopilotKit's standardUI. The playground's catalog extends it, so every agent here can use Chart. Standard catalog docs
Props
Read from standardUI.manifestComponents in the installed @copilotkit/react-core. In A2UI 1.0 any value may also be a { "@path" } binding into the surface data model or a { "@call" } function call.
| Prop | Type | Required | Description |
|---|---|---|---|
| data | object[] | No | - |
| xKey | string | No | The field of the category axis |
| series | (string | { key, label?, color? })[] | No | Default: every number field except xKey |
| chartType | "bar" | "line" | "area" | "scatter" | "pie" | "donut" | No | Default "bar" |
| stacked | boolean | No | - |
| layout | "vertical" | "horizontal" | No | "horizontal" draws the bars from left to right. Default "vertical" |
| yAxis | { label?, min?, max?, width? } | No | Example: {label: "Revenue (USD)", min: 0, max: 100}. In a horizontal chart it is the horizontal axis, and width sets the category axis width |
| showDots | boolean | No | Point markers on a line or area |
| barRadius | number | No | The corner radius of a bar, in pixels |
| innerRadius | number | string | No | Pie and donut |
| outerRadius | number | string | No | Pie and donut |
| startAngle | number | No | Pie and donut. Default 90 |
| endAngle | number | No | Pie and donut. Default -270 |
| cornerRadius | number | No | The corners of a slice |
| paddingAngle | number | No | The gap between slices |
| showLabelLines | boolean | No | Leader lines of the slice labels. Default true |
| showLegend | boolean | No | Default true |
| showGrid | boolean | No | Default true |
| showTooltip | boolean | No | Default true |
| showValueLabels | boolean | No | - |
| format | "number" | "currency" | "percent" | No | With "percent", data values and axis min/max are fractions: 0.4 shows as 40%; for 0% to 10%, use min: 0 and max: 0.1. |
| currency | string | No | ISO code. Default "USD" |
| title | string | No | - |
| height | number | No | Pixels. Default 240 |