Chart spec editorPro
A chart with its spec in the open (type, x, y, aggregate and color by) and an ask field: plain requests come back as a new spec and the chart morphs into it, with what changed and Undo.
On this page
Installation
Usage
import { ChartSpecEditor } from "@/components/ui/chatcn/pro/chart-spec-editor"
<ChartSpecEditor
data={weekly}
fields={fields}
defaultSpec={{ type: "bar", x: "week", y: "revenue" }}
onAsk={(prompt, spec) => agent.updateSpec(prompt, spec)}
/>onAsk receives the request and the current spec and returns the next spec, or { error } with words the person can act on. Send the field list to your model and parse its JSON. Each control changes the spec directly too. actionsRef exposes ask() so a chat composer elsewhere can drive the chart.
Examples
States
Props
| Prop | Type | Notes |
|---|---|---|
data, fields | rows, ChartSpecField[] | Fields are temporal, nominal or quantitative |
spec, defaultSpec, onSpecChange | ChartSpec | { type, x, y, color?, aggregate? } |
onAsk | (prompt, spec) => Promise<ChartSpec | { error }> | Shows the ask field |
actionsRef | Ref<{ ask }> | Send a request from outside |
loading, error, onRetry, title, height, disabled | Chart states |
Keyboard
| Key | Action |
|---|---|
| Left and Right on the chart | Read each category |
| Enter in the ask field | Sends the request |
Accessibility
- The chart is an image whose label states the type, fields and split.
- The change line is a status region: it reads the request and each field that changed.
- Series carry a legend and the readout names each value, not only its color.
Motion
Every mark tweens from its old shape to its new one over 280 ms on the kit's ease-out: bars settle into points on the line and points rise into bars; added marks fade in, removed ones fade out. Changes are interruptible. Controls the agent changed get a ring for 1.2 s. Reduced motion swaps instantly.