Chart

When to useCopy Anchor Link

• The user asks how a number changed over time or how categories compare, and you have the figures from a tool.
• The shape matters more than any single value: a trend, a spike, a gap between two series.

When not to useCopy Anchor Link

• There are one or two numbers. Say them in a sentence.
• The user needs exact values across many fields. Use a Data Table.
• You don't have the data from a tool. Never invent or estimate points.
• The series use different units. Show two charts instead of mixing them on one axis.

How the agent should use itCopy Anchor Link

• Copy data from the tool result unchanged. Don't round, fill gaps or extrapolate.
• Pick the type for the job: line for trends, bar for comparing categories, area for volumes over time.
• Set stacked: true on a bar chart only when the series are parts of a whole (revenue by product line per region). Each x value then gets one bar split into a piece per series. Leave bars side by side when the series are separate measures to compare (Q2 vs Q3).
• Keep to 1–4 series that share a unit. They share one y-axis.
• Only annotate real events that explain the shape, like a release, and use an x value that exists in the data.
• Put the takeaway in summary in plain words, without repeating every number.

HoverCopy Anchor Link

On bar charts the hover card is anchored above the hovered bar, centred on it, and stays put while the pointer moves inside the bar: it doesn't follow the cursor. On line and area charts the tooltip is pinned to one height and doesn't slide between points.

With stacked: true, hovering a piece lights up that series in every bar and fades the others, and the card shows the piece's value and its share of the bar. Pieces are rounded and separated by a small gap; the card rises over the heading when a bar is too tall to leave room above it.

AccessibilityCopy Anchor Link

The chart's SVG is hidden from screen readers. A visually hidden table with the same rows, captioned with the title, carries the numbers instead (with a Total column when stacked), and annotations are listed after it. Values are formatted with Intl in the axis, the tooltip and the table, so they follow the user's locale.

InstallationCopy Anchor Link

npx shadcn@latest add https://your-site.com/r/chart.json

UsageCopy Anchor Link

The Chart is display-only, so the tool can return immediately:

import { tool } from "ai"
import { chartTool } from "@/components/genui/chart.schema"

const tools = {
  [chartTool.name]: tool({
    description: chartTool.description,
    inputSchema: chartTool.inputSchema,
    execute: async () => ({ shown: true }),
  }),
}

Render it through the Renderer under show_chart, or directly:

<Chart {...part.input} status={part.state === "input-streaming" ? "streaming" : "ready"} />

Points render as they stream in, so a long series draws progressively.

With LangGraphCopy Anchor Link

Push it from a graph node with ui.push({ name: "show_chart", props }, { message }), and render the thread's UI messages with the Renderer.

SchemaCopy Anchor Link

Host props: status (streaming or ready) and className.

SourceCopy Anchor Link