ChartPane

io.github.ahmadslPublished by GitHub account ahmadslv1.0.0Updated Oct 24, 2026

Renders interactive Chart.js charts and dashboards inline in AI conversations.

VerifiedStreamable HTTPWeb executableData & AnalyticsMedia & Design

Overview

AI-generated overview

ChartPane is a remote MCP server that renders interactive Chart.js charts and multi-chart dashboards inline in AI conversations.

What you can do
Render a single chart from labels and datasets, choosing among bar, line, area, pie, doughnut, polarArea, bubble, scatter and radar types, including stacked and horizontal bar variants. Build multi-chart dashboard grids of up to four columns. Apply custom colors or the built-in 12-color palette. Charts render client-side in the browser as interactive Chart.js canvases.
When to use it
Useful when you want data turned into a visual chart or dashboard directly inside a chat with Claude, ChatGPT, VS Code, Cursor or another MCP Apps client, instead of exporting data to a separate charting tool.
Requirements
A remote endpoint at mcp.chartpane.com, reached over streamable HTTP; OAuth authentication is required. The client must support MCP Apps for inline rendering. The README's alternative mcp-remote setup requires Node.js.
Before you install
OAuth sign-in is required to connect. Chart data is said to render client-side and not be stored server-side, but request metadata such as chart type, title and timestamp is logged. Data you chart is sent to the remote service.

Installation

In SourceWeft

  1. Open ChartPane in the dashboard and add it to a workspace.
  2. Connect the required credentials. They are stored privately and never shown on public pages.
  3. Enable the server for the chats that should use its tools.

Web executable via Streamable HTTP. Remote servers run from the web runtime once configured in a workspace.

Use with an agent

Paste this prompt into Claude Code, Codex, Cursor or another agent — or into SourceWeft chat. The agent reads this server's install guide, shows you its publisher, endpoint and sign-in, and adds it to your client once you agree. Keys never go into a command.

Read https://sourceweft.com/mcp/io.github.ahmadsl%2Fchartpane/install.md and connect the MCP server it describes to my client. Before changing any config, show me its publisher, endpoint and sign-in method and wait for my OK. Never put an API key in a command or in a file I would commit; ask me where it should come from.

Read the install guide the agent follows

Other MCP clients

Add this to your client's mcpServers config. The client completes OAuth sign-in on first connect.

{
  "mcpServers": {
    "chartpane": {
      "type": "http",
      "url": "https://mcp.chartpane.com/mcp"
    }
  }
}

README

ChartPane

MCP App that renders interactive Chart.js charts inline in Claude's UI. Works with Claude Desktop, ChatGPT, VS Code, Cursor, and any client that supports MCP Apps.

Live instance: mcp.chartpane.com

Features

  • 9 chart types: bar, line, area, pie, doughnut, polarArea, bubble, scatter, radar
  • Stacked and horizontal bar chart variants
  • Multi-chart dashboard grids (up to 4 columns)
  • Custom colors or automatic 12-color palette
  • Client-side rendering — chart data never stored server-side
  • Works with any MCP-compatible client (Claude Desktop, ChatGPT, VS Code, Cursor)

Tools

  • render_chart — Render a single chart (bar, line, area, pie, doughnut, polarArea, bubble, scatter, radar, stacked)
  • render_dashboard — Render a multi-chart grid layout

Quick Start

Add ChartPane to Claude Desktop via Settings > Connectors > Add custom connector:

https://mcp.chartpane.com/mcp

Or use mcp-remote (requires Node.js):

json
{  "mcpServers": {    "chartpane": {      "command": "npx",      "args": ["-y", "mcp-remote", "https://mcp.chartpane.com/mcp"]    }  }}

Usage Examples

1. Bar chart

Prompt: "Create a bar chart of quarterly revenue: Q1 $50k, Q2 $80k, Q3 $120k, Q4 $95k"

Claude calls render_chart with:

json
{  "type": "bar",  "title": "Quarterly Revenue",  "data": {    "labels": ["Q1", "Q2", "Q3", "Q4"],    "datasets": [{ "label": "Revenue ($k)", "data": [50, 80, 120, 95] }]  }}

An interactive bar chart renders inline in the conversation.

2. Pie chart

Prompt: "Show browser market share as a pie chart: Chrome 65%, Safari 19%, Firefox 8%, Edge 5%, Other 3%"

Claude calls render_chart with:

json
{  "type": "pie",  "title": "Browser Market Share",  "data": {    "labels": ["Chrome", "Safari", "Firefox", "Edge", "Other"],    "datasets": [{ "label": "Share", "data": [65, 19, 8, 5, 3] }]  }}

Each slice gets a distinct color from the built-in palette.

3. Multi-chart dashboard

Prompt: "Build a dashboard with monthly active users as a line chart and signups by channel as a bar chart"

Claude calls render_dashboard with:

json
{  "title": "Growth Dashboard",  "charts": [    {      "type": "line",      "title": "Monthly Active Users",      "data": {        "labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],        "datasets": [{ "label": "MAU", "data": [12000, 15000, 18000, 22000, 28000, 35000] }]      }    },    {      "type": "bar",      "title": "Signups by Channel",      "data": {        "labels": ["Organic", "Referral", "Paid", "Social"],        "datasets": [{ "label": "Signups", "data": [4500, 3200, 2800, 1500] }]      }    }  ],  "columns": 2}

Both charts render side-by-side in a grid layout.

Self-Hosting

ChartPane runs on Cloudflare Workers.

bash
npm installcp .dev.vars.example .dev.vars    # Configure secrets (optional)npm run dev                        # Local dev server (port 8787 + sandbox on 3456)npm run deploy                     # Deploy to Cloudflare Workers

You'll need to create your own KV namespace and D1 database — see comments in wrangler.jsonc.

Development

bash
npm run dev        # wrangler dev + sandbox dev server (localhost:3456)npm run build      # Type-check (tsc --noEmit) + bundle UInpm test           # Run all tests (vitest)npm run test:watch # Watch mode

Architecture

Claude tool calls flow through a thin MCP server that validates input and returns structuredContent. The browser-side UI transforms input into Chart.js configs and renders to canvas. All shared logic (types, validation, colors, config) lives in shared/.

Claude tool call → server.ts (validate) → structuredContent    → mcp-app.ts (browser) → buildChartConfig() → Chart.js canvas

Privacy

ChartPane logs only request metadata (chart type, title, timestamp). Chart data values are never stored. Charts render entirely client-side in your browser. Full policy: chartpane.com/privacy

Support

License

MIT

Source: README.md at commit 097a2af

Tools

0
This server asks you to sign in, so SourceWeft could not read its tools without an account and has not indexed them. What a connected account sees can depend on that account and its permissions.

Version history

1
  1. v1.0.0LatestSep 16, 2026

Score

85% of the applicable checks met

How complete this listing is, computed from the registry entry, the endpoint and public sources. Not a rating of the server and not a statement that it is safe or working today: reachability is a dated check, and no installs or reviews go into the score.

  • Reached in the last 30 daysRequired25 pts
  • Auth declaredRequired10 pts
  • Tools listed15 pts

    Answer tools/list without a credential, or ship a package that starts in a sandbox without one.

  • DescriptionRequired15 pts
  • Logo10 pts
  • Documentation15 pts
  • License10 pts