KQ-2052 · CHART/TALK

Chart Talk

A conversation with a dataset where the answer is one living chart: each follow-up morphs the same chart on springs.glide — bars split into stacked region segments that start as the whole bar, months gather into their quarter, a filter widens the bars that stay while the rest sink on the exit ease, and lines and areas morph point by point — while the axis and the total count to the new range on the same spring. The thread keeps one line and a thumbnail per turn, its selection bar sliding on springs.snap; loading, no-rows and query errors are drawn on the chart. The thread is a listbox: arrow keys step turns and the chart follows, Home and End jump, Enter selects.

KQ-2052 · CHART/TALK

Sensor sales · 2026

gaugeworks.sales

July to September, by region.

5,353units in view

North
Coast
Inland

July to September, by region.
Month	North	Coast	Inland
July	758	518	396
August	838	567	429
September	826	619	402

turn 3 of 3 · units · jul–sep · by region

Open it on the Canvas stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/chart-talk

Props

rows: ChartTalkRow[]; default defaultChartTalkRows; The dataset: { month, region, units, revenue } records.
turns: ChartTalkTurn[]; default defaultChartTalkTurns; The questions the assistant can answer, each with a reply, a chart spec and match words.
defaultAsked: number; default 3; How many turns are already asked when the surface mounts.
value / defaultValue: string; default the last asked turn; Controlled or initial id of the turn the chart shows.
onValueChange: (turnId: string) => void; default —; Fires from the click or key that selected a turn.
onAsk: (question: string, turn: ChartTalkTurn | null) => void; default —; A question was asked; turn is null when nothing matched.
onRestoreTurn: (turnId: string) => void; default —; The chart was taken back to an earlier turn.
onExport: (table: ChartTalkTable) => void; default —; Export was pressed, with the columns and rows behind the chart on screen.
chartKind: "bars" | "lines" | "area"; default "bars"; Stacked bars, a line per series, or stacked areas.
thumbSize: "sm" | "md" | "lg"; default "md"; Size of the chart thumbnails in the thread.
accent: string; default "var(--accent-bright)"; Start of the series ramp — any CSS colour.
queryDelay: number; default 520; Milliseconds a question shows the chart querying before it answers.
format: (value: number, measure: ChartTalkMeasure, share: boolean) => string; default defaultChartTalkFormat; Formats axis labels and the total.
title: string; default "Sensor sales · 2026"; The surface's heading and accessible name.
source: string; default "gaugeworks.sales"; Where the rows come from, shown under the title.
status: "ready" | "loading" | "empty" | "error"; default "ready"; The dataset's state, drawn on the chart itself.
onRetry: () => void; default —; Try again was pressed after the rows failed to load.
height: number; default 520; Height of the surface in px.
disabled: boolean; default false; Read only: nothing can be asked or exported.
className: string; default —; Classes for the surface.

Prop	Type	Default	Description
rows	ChartTalkRow[]	defaultChartTalkRows	The dataset: { month, region, units, revenue } records.
turns	ChartTalkTurn[]	defaultChartTalkTurns	The questions the assistant can answer, each with a reply, a chart spec and match words.
defaultAsked	number	3	How many turns are already asked when the surface mounts.
value / defaultValue	string	the last asked turn	Controlled or initial id of the turn the chart shows.
onValueChange	(turnId: string) => void	—	Fires from the click or key that selected a turn.
onAsk	(question: string, turn: ChartTalkTurn \| null) => void	—	A question was asked; turn is null when nothing matched.
onRestoreTurn	(turnId: string) => void	—	The chart was taken back to an earlier turn.
onExport	(table: ChartTalkTable) => void	—	Export was pressed, with the columns and rows behind the chart on screen.
chartKind	"bars" \| "lines" \| "area"	"bars"	Stacked bars, a line per series, or stacked areas.
thumbSize	"sm" \| "md" \| "lg"	"md"	Size of the chart thumbnails in the thread.
accent	string	"var(--accent-bright)"	Start of the series ramp — any CSS colour.
queryDelay	number	520	Milliseconds a question shows the chart querying before it answers.
format	(value: number, measure: ChartTalkMeasure, share: boolean) => string	defaultChartTalkFormat	Formats axis labels and the total.
title	string	"Sensor sales · 2026"	The surface's heading and accessible name.
source	string	"gaugeworks.sales"	Where the rows come from, shown under the title.
status	"ready" \| "loading" \| "empty" \| "error"	"ready"	The dataset's state, drawn on the chart itself.
onRetry	() => void	—	Try again was pressed after the rows failed to load.
height	number	520	Height of the surface in px.
disabled	boolean	false	Read only: nothing can be asked or exported.
className	string	—	Classes for the surface.