AntV Chart MCP — Use Cases, Install & Live Demo

Why use it

Key features

25+ chart types covered by one server
Declarative spec per chart — data + axis + style
Returns a hosted URL or inline image you can embed
No API key, no usage cost — purely client/server rendering
Great pairing with DB MCPs for auto-charted reports

Live Demo

What it looks like in practice

antv-chart.replay ▶ ready

0/0

Install

Pick your client

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "antv-chart": {
      "command": "npx",
      "args": [
        "-y",
        "@antv/mcp-server-chart"
      ]
    }
  }
}

Open Claude Desktop → Settings → Developer → Edit Config. Restart after saving.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "antv-chart": {
      "command": "npx",
      "args": [
        "-y",
        "@antv/mcp-server-chart"
      ]
    }
  }
}

Cursor uses the same mcpServers schema as Claude Desktop. Project config wins over global.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "antv-chart": {
      "command": "npx",
      "args": [
        "-y",
        "@antv/mcp-server-chart"
      ]
    }
  }
}

Click the MCP Servers icon in the Cline sidebar, then "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "antv-chart": {
      "command": "npx",
      "args": [
        "-y",
        "@antv/mcp-server-chart"
      ]
    }
  }
}

Same shape as Claude Desktop. Restart Windsurf to pick up changes.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "antv-chart",
      "command": "npx",
      "args": [
        "-y",
        "@antv/mcp-server-chart"
      ]
    }
  ]
}

Continue uses an array of server objects rather than a map.

~/.config/zed/settings.json

{
  "context_servers": {
    "antv-chart": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "@antv/mcp-server-chart"
        ]
      }
    }
  }
}

Add to context_servers. Zed hot-reloads on save.

claude mcp add antv-chart -- npx -y @antv/mcp-server-chart

One-liner. Verify with claude mcp list. Remove with claude mcp remove.

Use Cases

Real-world ways to use AntV Chart

Chart a Postgres query result in one prompt

👤 Analysts who want a picture, not a CSV ⏱ ~5 min beginner

When to use: You just ran a query; next natural step is 'show me this as a bar chart'.

Prerequisites

Data as rows (from any other MCP or pasted) — Usually output of a postgres/mongodb/duckdb query

Flow

Pick the right chart type

Given this data [paste rows with category + value], which AntV chart fits best? Options: bar, column, pie, line.✓ Copied

→ Justified pick (e.g. 'column — category vs value, ≤20 categories')
Render

Generate a column chart with x=category, y=value, title '<Title>'. Return the image URL.✓ Copied

→ URL or base64 image
Iterate on style

Same chart but sort bars by value desc, add data labels, use a single color (teal).✓ Copied

→ Refined chart image

Outcome: A report-ready chart image in 30 seconds without touching a plotting library.

Pitfalls

Too many categories makes a bar chart unreadable — Cap at top 15 + 'Other'; use a treemap or heatmap for higher-cardinality data

Combine with: postgres · mongodb

Visualize a conversion funnel from event counts

👤 Growth / product analysts ⏱ ~15 min intermediate

When to use: You have step-by-step event counts (signup → verify → first-action → paid) and need a funnel chart.

Flow

Get step counts

From Postgres: count distinct users at each funnel step in the last 30 days, in order.✓ Copied

→ Step + count rows
Render funnel

Generate an AntV funnel chart with those steps. Show absolute count and step-to-step conversion %.✓ Copied

→ Funnel image with labels
Compare segments

Now generate 2 funnels side-by-side: mobile vs desktop. Same steps; annotate biggest drop-off differences.✓ Copied

→ Comparison visualization

Outcome: A ready-to-paste funnel visual with segment comparison.

Pitfalls

Counting non-unique events inflates later steps — Always count distinct user_id per step, not event rows

Combine with: postgres

Generate a sankey or tree diagram for relationships

👤 Anyone explaining flows or hierarchies ⏱ ~15 min intermediate

When to use: You want to show 'traffic by source → landing → conversion' or an org chart.

Flow

Shape your data

I have source → destination → value edges [paste]. Shape them for an AntV sankey.✓ Copied

→ Normalized edges array
Render sankey

Generate the sankey with node labels and link weights. Use the '3-color' palette.✓ Copied

→ Sankey image
Alternative as tree

If hierarchical instead, render as a treemap or org tree — same data, different chart type.✓ Copied

→ Alternative visualization

Outcome: The right relationship visualization for your story, first try.

Pitfalls

Sankey with too many nodes becomes spaghetti — Merge small sources into 'Other'; keep ≤20 nodes per layer

Combine with: neo4j

Combinations

Pair with other MCPs for X10 leverage

antv-chart + postgres

Query → chart in one prompt for PM reports

Query weekly signups for the last 12 weeks from Postgres, then generate an AntV line chart of the trend.✓ Copied

antv-chart + mongodb

Aggregate + visualize doc data

Aggregate orders by country this quarter from Mongo, render as a column chart sorted desc.✓ Copied

antv-chart + filesystem

Save the generated image alongside a report markdown

Render the funnel chart, save the PNG to /reports/funnel-<date>.png, and embed in /reports/weekly.md.✓ Copied

antv-chart + notion

Embed charts into a Notion report page

Generate the three weekly KPI charts; create a Notion page with each chart URL embedded as an image block.✓ Copied

Tools

What this MCP exposes

Tool	Inputs	When to call	Cost
generate_line_chart / generate_column_chart / generate_bar_chart	data: row[], x, y, title?, style?	Time-series / categorical comparisons	free
generate_pie_chart / generate_donut_chart	data, value, category, title?	Part-of-whole when ≤6 categories	free
generate_funnel_chart	data: [{step, value}]	Conversion flows	free
generate_sankey_chart	nodes, links: [{source,target,value}]	Flow between categories	free
generate_scatter_chart / generate_bubble_chart	data, x, y, size?, color?	Correlation or distribution exploration	free
generate_radar_chart	data: {dimensions, series}	Multi-dimensional comparison across ≤2 entities	free
generate_word_cloud_chart	data: [{word, weight}]	Text-frequency visualization	free
generate_treemap_chart / generate_histogram_chart / generate_boxplot_chart	data, fields	Distributions and nested categories	free

Cost & Limits

What this costs to run

API quota: No auth; practical rate-limit depends on the hosted backend (~reasonable interactive use)
Tokens per call: Spec + response: 300–1500 tokens
Monetary: Free — runs locally via npx / against AntV's public render service
Tip: Keep data points under a few hundred per chart; send aggregated data, not raw events.

Security

Permissions, secrets, blast radius

Credential storage: None required

Data egress: Data you pass in the spec is sent to AntV's rendering service to produce the image URL — do not send PII or confidential data

Anything you chart via the hosted endpoint leaves your network. For sensitive data, self-host the renderer or pre-aggregate.

Troubleshooting

Common errors and fixes

Invalid data format / missing field

Each chart type expects a specific shape; re-check the tool's inputs — funnel wants {step, value}, sankey wants {source, target, value}.

Returned URL 404 after a while

Hosted URLs expire. Save the image locally (filesystem) right after generation if you need persistence.

Chart unreadable — too many bars/nodes

Aggregate to top-N + Other, or switch chart type (sankey/treemap) better suited to cardinality.

Alternatives

AntV Chart vs others

Alternative	When to use it instead	Tradeoff
QuickChart	You want Chart.js-style charts via URL	Fewer niche chart types than AntV
Mermaid MCP	You need diagrams (flowcharts, sequence), not data charts	Not suitable for numerical data visualization
Vega-Lite MCP	You want a grammar-of-graphics approach	Steeper spec; more flexibility

More

Resources

📖 Read the official README on GitHub

🐙 Browse open issues

🔍 Browse all 400+ MCP servers and Skills