ChartPane

ahmadsl/chartpane

Renders Chart.js visualizations directly in Claude conversations via two MCP tools: render_chart for single charts (bar, line, pie, doughnut, bubble, scatter, radar, and variants) and render_dashboard for multi-chart grid layouts. Charts appear inline as you chat, with data flowing through a Cloudflare Workers backend that validates input and returns structuredContent for client-side rendering. Useful when you're analyzing data with Claude and want to see distributions, trends, or comparisons without switching to a separate charting tool. All rendering happens in the browser, so your actual data values never hit the server. Works with Claude Desktop, ChatGPT, VS Code, and Cursor via the hosted instance at mcp.chartpane.com or self-hosted on your own Workers deployment.

GitHub stars: 1
tools: 2
transport: HTTP
last updated: Feb 13, 2026

View on GitHub

Tools

2 tools

Public tool metadata for what this MCP can expose to an agent.

render_chartRender a single chart (bar, line, area, pie, doughnut, polarArea, bubble, scatter, radar, stacked)

Render a single chart (bar, line, area, pie, doughnut, polarArea, bubble, scatter, radar, stacked)

No parameter schema in public metadata yet.

render_dashboardRender a multi-chart grid layout

Render a multi-chart grid layout

No parameter schema in public metadata yet.

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):

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

ChartPane

Tools

Readme

ChartPane

Features

Tools

Quick Start

Usage Examples

1. Bar chart

Details