# ChartPane Alternative: Agent Charts From Your Own Query Data

> Comparing ChartPane and @bonnard/mcp-charts? Both render interactive charts inside the agent. ChartPane charts data the agent passes in. Bonnard adds a visualize tool to your MCP server and charts your real query results, with bundled warehouse adapters.

[ChartPane](https://mcpservers.org/servers/ahmadsl/chartpane) is an MCP App that renders interactive Chart.js charts inline in Claude, ChatGPT, and other MCP Apps clients. The agent calls it with data and a chart type, and the chart appears in the conversation. It covers nine chart types and dashboard grids.

`@bonnard/mcp-charts` shares the interactive-widget approach but starts from a different place. Instead of the agent passing the data, you add a `visualize` tool to your own MCP server. The agent writes SQL, your database returns the rows, and the chart renders from those results. The data on screen is the data your query returned.

## At a glance

| | ChartPane | @bonnard/mcp-charts |
|---|---|---|
| Output | Interactive widget (MCP Apps) | Interactive widget (MCP Apps) |
| Primary job | Chart data the agent supplies | Add charting to your MCP server, from your query results |
| Data source | The agent passes the data in the tool call | Your `runSql` callback returns rows from your database |
| Where it runs | A standalone MCP server the agent connects to | A few lines inside your existing MCP server |
| Chart library | Chart.js | Apache ECharts |
| Chart types | 9 (bar, line, area, pie, doughnut, polarArea, bubble, scatter, radar) + grids | 8 core types + variants (stacked, grouped, 100%, horizontal, combo, dual-axis, bubble, reference lines) |
| Grounded in real data | The agent provides the values | The chart renders exactly the rows your query returned |
| Warehouse adapters | Bring your own data | Bundled for BigQuery, Postgres, Snowflake, Databricks, DuckDB |
| Clients | Claude, ChatGPT, Cursor, VS Code | Claude, ChatGPT, and other MCP Apps clients |

## Both are interactive. The difference is the data path.

ChartPane and Bonnard both render real, interactive widgets in the agent, not static images. The split is where the numbers come from.

With ChartPane, the agent is the data source: it builds the data array and passes it to the chart tool. That is ideal for charting something the agent already has in context.

Bonnard puts your query in the path:

```ts
import { addCharts } from "@bonnard/mcp-charts";

addCharts(server, {
  runSql: async (sql) => ({ rows: await db.query(sql) }),
  discovery: { toolName: "explore_schema" },
});
```

The agent calls `visualize` with SQL. Your database runs it and returns rows. The chart renders those rows. The model never types the values into a tool call, so the chart stays faithful to your data. Run `runSql` through a read-only role to keep the agent's SQL scoped.

## Bundled warehouse adapters

Because Bonnard charts your data, it ships adapters that map native warehouse column types to chart roles:

```ts
import { bigQueryRunSql } from "@bonnard/mcp-charts/bigquery";
addCharts(server, { runSql: bigQueryRunSql(bq) });
```

Adapters cover BigQuery, Postgres, Snowflake, Databricks, and DuckDB. See [the docs](https://docs.bonnard.dev/mcp-charts/adapters).

## When to use ChartPane

Reach for ChartPane when:

- You want to chart data the agent already holds, without wiring up a data source
- You prefer Chart.js, or want chart types Bonnard doesn't cover (radar, polar area)
- You want a general-purpose chart server any client can call

Reach for `@bonnard/mcp-charts` when the chart should come from your own query results, with warehouse adapters and a tool you add to a server you already run.

## Getting started

```bash
npm install @bonnard/mcp-charts
```

```ts
import { addCharts } from "@bonnard/mcp-charts";
addCharts(server, { runSql: async (sql) => ({ rows: await db.query(sql) }) });
```

Read the [documentation](https://docs.bonnard.dev/mcp-charts/getting-started) or the source on [GitHub](https://github.com/bonnard-data/mcp-charts).

## FAQ

### Do ChartPane and Bonnard both render interactive charts in the agent?

Yes. Both use the MCP Apps standard to render interactive widgets inline, not static images.

### What's the main difference?

The data source. ChartPane charts data the agent passes in. Bonnard charts the rows your `runSql` callback returns from your database, so the chart matches your real query results.

### Which charting library does Bonnard use?

Apache ECharts. ChartPane uses Chart.js.

### Does Bonnard connect to my database?

No. You own the connection and pass a `runSql` callback. Run it through a read-only role. See [Security](https://docs.bonnard.dev/mcp-charts/getting-started#security).

### Does it work in ChatGPT?

Yes. The widget renders in Claude, ChatGPT, and other MCP Apps clients.