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.

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

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

Add ChartPane to Claude Desktop viaSettings > Connectors > Add custom connector:

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

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

{ "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.

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

{ "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.

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

{ "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.

npm install cp .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 inwrangler.jsonc.

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

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

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

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

- GitHub Issues:github.com/ahmadnassri/chartpane/issues
- Email:support@chartpane.com

Generates interactive sprint analytics and executive dashboards by connecting Jira data to Claude AI. Provides insights on burndown, velocity, and goal progress.