# Draw Charts from an Agent

> For the complete documentation index, see [llms.txt](https://docs.redpanda.com/llms.txt). Component-specific: [agentic-data-plane-full.txt](https://docs.redpanda.com/agentic-data-plane-full.txt)

---
title: Draw Charts from an Agent
latest-operator-version: v26.2.1
latest-console-tag: v3.10.0
latest-connect-version: 4.104.0
latest-redpanda-tag: v26.2.1
docname: draw-charts
page-component-name: agentic-data-plane
page-version: master
page-component-version: master
page-component-title: Agentic Data Plane
page-relative-src-path: draw-charts.adoc
page-edit-url: https://github.com/redpanda-data/adp-docs/edit/main/modules/connect/pages/draw-charts.adoc
description: Make an agent render inline bar and line charts in the Playground by emitting a chart code block that follows the Agentic Data Plane chart contract.
page-topic-type: how-to
personas: agent_builder
learning-objective-1: Instruct an agent to draw a bar or line chart by emitting a chart code block
learning-objective-2: Migrate an earlier chart prompt to the Agentic Data Plane chart contract
learning-objective-3: Diagnose a chart that renders as an error or stays a placeholder
page-git-created-date: "2026-06-30"
page-git-modified-date: "2026-08-10"
---

<!-- Source: https://docs.redpanda.com/agentic-data-plane/connect/draw-charts.md -->

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.

> ❗ **IMPORTANT**
>
> 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](#migrate-chart-js-prompt) 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)Prerequisites

-   A deployed agent in Agentic Data Plane. To create one, see [Create an Agent](https://docs.redpanda.com/agentic-data-plane/connect/create-agent/).

-   An understanding of how to write an agent system prompt. See [Write Effective System Prompts](https://docs.redpanda.com/agentic-data-plane/connect/system-prompts/).


## [](#how-chart-rendering-works)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.](https://docs.redpanda.com/agentic-data-plane/connect/_images/agent-chart-rendering.svg)

Figure 1. The Playground turns a chart code block into three synchronized views

## [](#write-the-chart-block)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:

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

### [](#supported-chart-types)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)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](https://docs.redpanda.com/agentic-data-plane/connect/system-prompts/): 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:

````text
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](https://docs.redpanda.com/agentic-data-plane/connect/system-prompts/#output-formatting).

## [](#test-the-chart-in-the-playground)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.](https://docs.redpanda.com/agentic-data-plane/connect/_images/agent-chart-rendered.png)

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-chart-js-prompt)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:

```json
{
  "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:

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

## [](#troubleshooting)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.](https://docs.redpanda.com/agentic-data-plane/connect/_images/agent-chart-error.png)

| 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)Next steps

-   [Write Effective System Prompts](https://docs.redpanda.com/agentic-data-plane/connect/system-prompts/)

-   [Create an Agent](https://docs.redpanda.com/agentic-data-plane/connect/create-agent/)

-   [See What Your Agent Did](https://docs.redpanda.com/agentic-data-plane/monitor/transcripts/)