"How did I spend money this week?" is a question best answered visually. Chart renders bar or line visualizations inline in the conversation. You pass data, an x-axis key, and one or more series. The assistant can show spending breakdowns, revenue trends, or performance over time without describing the numbers in prose. **Role:** Information. For displaying data the user reads. See [Design Guidelines](/docs/design-guidelines) for how component roles work. ## Getting Started Run this once from your project root. Render `Chart` in your UI with tool-compatible props.

```tsx import { Chart } from "@/components/tool-ui/chart"; ; ```

Register this renderer so tool results display as `Chart`. ```tsx import { type Toolkit } from "@assistant-ui/react"; import { Chart } from "@/components/tool-ui/chart"; import { safeParseSerializableChart } from "@/components/tool-ui/chart/schema"; export const toolkit: Toolkit = { showChart: { type: "backend", render: ({ result }) => { const parsed = safeParseSerializableChart(result); if (!parsed) { return null; } return ; }, }, }; ``` ## Key Features Bar for categorical data, line for time-series Plot multiple datasets with automatic color assignment Hover tooltips and click handlers on data points Optional legends, grid lines, and custom color palettes ## Variants ### Line Charts Use `type="line"` for time-series or continuous data. ### Minimal Configuration Only `data`, `xKey`, and `series` are required. Title, description, legend, and grid are all optional. ## Props []", required: true, }, xKey: { description: "Key for x-axis values", type: "string", required: true, }, series: { description: "Data series to plot", type: "ChartSeries[]", required: true, }, title: { description: "Chart title (renders in Card header)", type: "string", }, description: { description: "Chart description (renders below title)", type: "string", }, colors: { description: "Custom color palette for series", type: "string[]", }, showLegend: { description: "Show legend below chart", type: "boolean", default: "false", }, showGrid: { description: "Show background grid lines", type: "boolean", default: "true", }, onDataPointClick: { description: "Click handler for data points", type: "(point: ChartDataPoint) => void", }, }} /> ## Series Schema ## ChartDataPoint (click handler payload) ", }, }} /> ## Accessibility - Built on Recharts with semantic SVG structure - Tooltips and legends provide text alternatives for visual data - Inherits focus management from shadcn/ui Card primitives ## Related - [Stats Display](/docs/stats-display): key metrics as a grid of numbers with sparklines

Tool UI