Chart authoring
The app renders a <chart> block as an interactive chart. It is an output
tag, not a tool: write the JSON directly in your response text. There is no
tool to call and nothing to discover — get the data first with whatever tool
fits, then draw it.
Format
Types
bar, line, pie, scatter, radar.
Pick by question, not by habit: line for change over time, bar for
comparison across categories, pie only for parts of one whole (and only
with a handful of slices), scatter for correlation between two numeric
variables, radar for several comparable dimensions of the same subject.
Fields
type: bar | line | pie | scatter | radar (required)title: chart title (required)labels: x-axis labels, e.g. ["Jan 2025","Feb 2025","Mar 2025"]
(required for bar/line/radar)datasets: array of data series (required for bar/line/radar/scatter)
label: series namedata: array of numbers, or {x, y} objects for scattercolor: hex color like "#FF5722"
data: for pie charts only — array of
{"label":"...","value":N,"color":"#..."}height: pixels (default 250; use 350-500 for detailed charts)max_y / min_y: fix the y-axis rangemax_x / min_x: fix the x-axis range (scatter only)
Rules
- Only chart numbers that came from tool results in this conversation, or
that the user supplied. Never fabricate data points to make a nicer curve.
- For stock and financial time series, include the full history you were
given — do not downsample.
- Never use
scatter for geographic data. Use a <map> block instead.
- Give every dataset an explicit
color when there is more than one series.
- Write your full text answer FIRST, then the
<chart> block at the very
END, and stop after </chart>.
1---2name: chart-authoring3description: Authors <chart> blocks — bar, line, pie, scatter and radar — with the exact JSON field schema. Use when the user asks for a chart, graph, plot, trend, comparison, Diagramm, Grafik, Verlauf, or when numeric data would read better visualized. Load before emitting a <chart> block.4---56# Chart authoring78The app renders a `<chart>` block as an interactive chart. It is an output9tag, not a tool: write the JSON directly in your response text. There is no10tool to call and nothing to discover — get the data first with whatever tool11fits, then draw it.1213## Format1415<chart>16{"type":"line","title":"Revenue Growth","labels":["Q1 2024","Q2 2024","Q3 2024","Q4 2024"],"datasets":[{"label":"2024","data":[120,180,250,310],"color":"#4CAF50"},{"label":"2023","data":[90,110,140,190],"color":"#2196F3"}],"height":350}17</chart>1819## Types2021`bar`, `line`, `pie`, `scatter`, `radar`.2223Pick by question, not by habit: `line` for change over time, `bar` for24comparison across categories, `pie` only for parts of one whole (and only25with a handful of slices), `scatter` for correlation between two numeric26variables, `radar` for several comparable dimensions of the same subject.2728## Fields2930- `type`: `bar` | `line` | `pie` | `scatter` | `radar` (required)31- `title`: chart title (required)32- `labels`: x-axis labels, e.g. `["Jan 2025","Feb 2025","Mar 2025"]`33 (required for bar/line/radar)34- `datasets`: array of data series (required for bar/line/radar/scatter)35 - `label`: series name36 - `data`: array of numbers, or `{x, y}` objects for scatter37 - `color`: hex color like `"#FF5722"`38- `data`: for pie charts only — array of39 `{"label":"...","value":N,"color":"#..."}`40- `height`: pixels (default 250; use 350-500 for detailed charts)41- `max_y` / `min_y`: fix the y-axis range42- `max_x` / `min_x`: fix the x-axis range (scatter only)4344## Rules4546- Only chart numbers that came from tool results in this conversation, or47 that the user supplied. Never fabricate data points to make a nicer curve.48- For stock and financial time series, include the full history you were49 given — do not downsample.50- Never use `scatter` for geographic data. Use a `<map>` block instead.51- Give every dataset an explicit `color` when there is more than one series.52- Write your full text answer FIRST, then the `<chart>` block at the very53 END, and stop after `</chart>`.
chuk-development