Agentic Data Plane

Draw Charts from an Agent

An agent draws a chart by emitting a fenced code block tagged chart whose body is strict JSON that follows the Agentic Data Plane chart contract. The Playground renders the data with the Agentic Data Plane chart components. The fence body contains data, not Recharts component code. The agent’s Playground tab renders that block with Chart, Data, and Code views. This is a rendering convention: the agent decides when a chart helps and writes the data, and the Playground draws it. No tool call or application setup is required.

The chart contract supports bar and line charts. The renderer uses shadcn/Recharts, not Chart.js. Existing bar and line blocks written for the earlier Chart.js format still render. When a block has no top-level title, the renderer falls back to options.plugins.title.text, but it ignores every other legacy presentation option. Other legacy chart types show an error. Convert them to bar or line. See Migrate from Chart.js to update an existing prompt.

After reading this page, you will be able to:

  • Instruct an agent to draw a bar or line chart by emitting a chart code block

  • Migrate an earlier chart prompt to the Agentic Data Plane chart contract

  • Diagnose a chart that renders as an error or stays a placeholder

Prerequisites

How chart rendering works

When the agent’s response contains a fenced code block tagged chart, the Playground parses the block body as a chart configuration and draws the chart in place of the code. Every other code block renders as plain code, so a chart block is the agent’s only departure from ordinary output.

The renderer supplies the visual presentation. A valid configuration renders as a responsive SVG chart with the Redpanda theme, a tooltip, and a legend. The agent supplies the chart type, optional title, labels, series names, and numeric values.

Agentic Data Plane draws a chart block wherever it shows the agent’s response: the agent’s Playground tab and the Transcripts tab. When an external application calls the agent, whether that application draws the chart depends on how it renders the agent’s output.

Chart rendering flow. An agent response contains a strict JSON chart code block. The Playground validates the chart contract and produces Chart, Data, and Code views from the same configuration. Invalid configurations produce a visible inline error.
Figure 1. The Playground turns a chart code block into three synchronized views

Write the chart block

Use the fields below. Unsupported chart types or invalid values show an error.

  • Tag the fence chart. The opening fence is three backticks followed by the word chart, with no other language tag.

  • Write the body as strict JSON. The Playground parses the body with a JSON parser, not a JavaScript evaluator, so use double-quoted keys and strings, unquoted numbers, no trailing commas, no comments, and no JavaScript expressions, functions, or callbacks.

  • Set the top-level type to bar or line.

  • Add a top-level data object with labels and datasets arrays. Each dataset contains a data array and can include a label. Without a label, the Playground names the series Series 1, Series 2, and so on. Values in a dataset must be finite numbers or null.

  • To display a title, add a top-level title string.

  • Do not add renderer-specific options, plugins, scales, animations, or color properties. The Playground controls those presentation details.

A bar chart:

```chart
{
  "type": "bar",
  "title": "Monthly orders",
  "data": {
    "labels": ["Jan", "Feb", "Mar"],
    "datasets": [
      { "label": "Orders", "data": [120, 190, 140] }
    ]
  }
}
```

Supported chart types

Type Use for

bar

Comparisons across categories.

line

Trends across an ordered axis, such as time.

Instruct the agent through its system prompt

To render a chart, tell the agent to emit a valid chart block. Add the convention to the agent’s system prompt: name the fence tag, state the strict JSON rules, list the supported types, and include one worked example.

The following snippet works as a standalone prompt or as a section added to an existing one:

You can draw charts inline. When a bar or line chart communicates better than
text, emit one fenced code block tagged exactly `chart` whose body follows the
chart contract as strict JSON.

Rules for the chart block:
- The fence language tag is exactly: chart
- The body is valid JSON: double-quoted keys and strings, unquoted numbers,
  no trailing commas, no comments, and no JavaScript, functions, or callbacks.
- The top level contains "type", optional "title", and "data".
- Allowed "type" values: "bar" and "line".
- "data" contains "labels" and "datasets". Each dataset contains a numeric
  "data" array and can include a "label".
- Do not emit renderer-specific options, plugins, scales, animations, or colors.
- Put a brief plain-text explanation (1 or 2 sentences) before the chart block.
  Do not also paste a data table; the Playground has a built-in Data view.

Example response to "show last quarter's orders by month":

Orders peaked in February:

```chart
{
  "type": "bar",
  "title": "Last quarter's orders",
  "data": {
    "labels": ["Jan", "Feb", "Mar"],
    "datasets": [
      { "label": "Orders", "data": [120, 190, 140] }
    ]
  }
}
```

For prompt-writing patterns that make this output reliable, see Output formatting.

Test the chart in the Playground

  1. Open the agent and switch to the Playground tab.

  2. Enter a prompt that calls for a chart, such as Show the broker count for the demo cluster over the last 3 months as a bar chart.

  3. Wait for the agent to finish its response. The chart appears in place of the chart block.

The Playground rendering a bar chart titled Broker count / demo cluster / 3 months, with a Chart, Data, and Code view selector above bars for January, February, and March.

Use the view selector to switch between:

  • Chart: The responsive bar or line chart. Hover over the chart to inspect values.

  • Data: The chart’s values as a table, reconstructed from the configuration.

  • Code: The JSON configuration the Playground parsed.

Zoom, pan, and PNG export are not available.

Migrate from Chart.js

Existing bar and line configurations keep their type, labels, datasets, and values. Move the title to the top level and remove legacy presentation options. Convert other chart types to bar or line.

Earlier Chart.js configuration Current chart contract

"type": "bar" or "type": "line"

Keep the type.

pie, doughnut, polarArea, or radar

Use bar to compare categories.

scatter or bubble

Choose line for an ordered trend or bar for category comparisons, and convert each point to a numeric dataset value.

options.plugins.title.text

Move the string to the top-level title field.

options, plugins, scales, animations, or colors

Remove them. The Playground supplies the presentation.

Zoom, pan, or PNG export instructions

Remove them. These controls are not available.

For example, replace:

{
  "type": "bar",
  "data": {
    "labels": ["Jan", "Feb", "Mar"],
    "datasets": [
      {
        "label": "Orders",
        "data": [120, 190, 140],
        "backgroundColor": "#ea580c"
      }
    ]
  },
  "options": {
    "plugins": {
      "title": {
        "display": true,
        "text": "Monthly orders"
      }
    }
  }
}

With:

{
  "type": "bar",
  "title": "Monthly orders",
  "data": {
    "labels": ["Jan", "Feb", "Mar"],
    "datasets": [
      { "label": "Orders", "data": [120, 190, 140] }
    ]
  }
}

Troubleshooting

A block that does not satisfy the contract shows an inline error that names the problem. Click Error details to inspect the body the agent sent.

An inline Failed to render chart error that explains the JSON problem and provides an Error details button.
Symptom Cause and fix

A Failed to render chart error appears in place of the chart

The block body does not satisfy the contract. The error description names the problem. Click Error details to inspect the body the agent sent. Common causes include invalid JSON, a missing type field, a missing data object, a type other than bar or line, or a non-numeric dataset value.

The error description reads Unsupported chart type

Change the type to bar or line. For migration guidance, see Migrate from Chart.js.

A Building chart… placeholder remains visible

The placeholder shows while the chart block streams in, because the Playground cannot parse the configuration until the closing fence arrives. The chart replaces the placeholder when the agent finishes the response. If the response finishes and the body cannot be parsed, the Failed to render chart error replaces the placeholder. If the placeholder remains after the agent stops responding, instruct the agent to emit one complete chart block with a closing fence.

The agent pastes a table or raw JSON instead of a chart

The agent either did not tag the fence chart or wrote prose instead of a block. Add the fence rule and worked example to the system prompt.

Next steps