MCP ECharts MCP — Use Cases, Install & Live Demo

Why use it

Key features

15+ chart tools covering the ECharts family
Full ECharts syntax support — agents can use any series option
Export PNG, SVG, or raw option JSON
Zero cloud dependencies — renders locally
Optional MinIO storage for share-friendly URLs

Live Demo

What it looks like in practice

mcp-echarts.replay ▶ ready

0/0

Install

Pick your client

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

{
  "mcpServers": {
    "mcp-echarts": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-echarts"
      ]
    }
  }
}

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

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

{
  "mcpServers": {
    "mcp-echarts": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-echarts"
      ]
    }
  }
}

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

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "mcp-echarts": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-echarts"
      ]
    }
  }
}

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

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "mcp-echarts": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-echarts"
      ]
    }
  }
}

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

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "mcp-echarts",
      "command": "npx",
      "args": [
        "-y",
        "mcp-echarts"
      ]
    }
  ]
}

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

~/.config/zed/settings.json

{
  "context_servers": {
    "mcp-echarts": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "mcp-echarts"
        ]
      }
    }
  }
}

Add to context_servers. Zed hot-reloads on save.

claude mcp add mcp-echarts -- npx -y mcp-echarts

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

Use Cases

Real-world ways to use MCP ECharts

Turn a table of numbers into a chart in one tool call

👤 Analysts, PMs, and engineers working in chat ⏱ ~5 min beginner

When to use: You have a small dataset and want a visual without opening a spreadsheet.

Prerequisites

Node 18+ — nvm install 18

Flow

Describe the chart

Bar chart of weekly active users: Mon 820, Tue 905, Wed 1120, Thu 980, Fri 1340, Sat 780, Sun 610. Title it 'WAU by day'.✓ Copied

→ Agent picks generate_bar_chart with correct x-axis labels and values
Export the PNG

Export as PNG and save it to ~/charts/wau.png.✓ Copied

→ File returned; png_path in tool result

Outcome: A chart you can drop into a deck or doc without leaving chat.

Pitfalls

Asking for a pie chart on a dataset with 30+ categories — Agent should suggest bar/heatmap instead; force it with 'use bar chart, pie is unreadable'

Combine with: filesystem

Get the raw ECharts option to paste into a React/Vue dashboard

👤 Frontend devs building internal tooling ⏱ ~15 min intermediate

When to use: You want Claude to draft the chart config so you only tweak it in your app.

Prerequisites

A frontend using ECharts — npm install echarts

Flow

Ask for option JSON

Generate an ECharts option for a stacked area chart: three series (direct, organic, paid), monthly for 2025.✓ Copied

→ Return shape is an option object with series[].type:'line', areaStyle, and stack:'total'
Drop into your component

Now emit it as a TypeScript const named exportOption.✓ Copied

→ TS const ready to paste

Outcome: Production-ready ECharts config without hand-crafting the boilerplate.

Pitfalls

Agent returning PNG when you wanted the option — Say 'return option JSON only — no rendering'

Combine with: antv-chart

Visualize a flow (funnel, journey, conversion) as a sankey

👤 Growth/product analysts ⏱ ~10 min beginner

When to use: You need a flow diagram for a deck and sankey is the right tool.

Flow

Describe nodes and flows

Sankey: Landing (1000) → Signup (420) → Activated (310) → Paid (95). Show dropoff percentages.✓ Copied

→ Correct node/link structure; labels include the counts
Export SVG

Export SVG so it scales in Keynote.✓ Copied

→ SVG path saved

Outcome: A crisp sankey for a funnel review, without Figma.

Combine with: markmap-mcp-server

Publish generated charts to MinIO for sharing

👤 Teams running a self-hosted object store ⏱ ~20 min intermediate

When to use: You want reproducible URLs for charts you'll reference from Slack/Notion.

Prerequisites

MinIO endpoint + credentials — Provision MINIO_* env vars in your MCP client config

Flow

Configure env

Set MINIO_ENDPOINT, MINIO_ACCESS_KEY, MINIO_SECRET_KEY, MINIO_BUCKET_NAME in the MCP config.✓ Copied

→ Server reports MinIO enabled at startup
Generate and upload

Chart the revenue by region; upload to MinIO and give me the URL.✓ Copied

→ Public (or presigned) URL returned

Outcome: Stable links for charts that won't break after chat rolls.

Pitfalls

Leaking credentials in config — Use a dedicated bucket-scoped IAM user, not the MinIO root key

Combine with: s3-like MCPs

Combinations

Pair with other MCPs for X10 leverage

mcp-echarts + filesystem

Read a CSV, extract columns, chart them

Read data/sales.csv, chart the 'revenue' column by 'region' as a bar chart.✓ Copied

mcp-echarts + bigquery-server

Run SQL then chart the result

Query last 30 days of signups from BigQuery; plot daily counts as a line.✓ Copied

mcp-echarts + antv-chart

Pick between ECharts and AntV by use case

For a Chinese-audience dashboard prefer ECharts; for data-ink-minimal pick AntV.✓ Copied

Tools

What this MCP exposes

Tool	Inputs	When to call
generate_line_chart	xAxis: array, series: array<number[]>, title?: str	Trend over an ordered axis (time, position)
generate_bar_chart	categories, values, stack?: bool	Compare discrete categories
generate_pie_chart	items: [{name, value}]	Share-of-total with ≤8 slices
generate_scatter_chart	points: [[x,y]]	Correlation or clustering visualizations
generate_heatmap	matrix: number[][], rows, cols	Density or confusion matrices
generate_sankey	nodes, links	Flow/funnel between discrete states
generate_echarts_option	free-form option object	When you want full ECharts syntax, not a templated chart

Cost & Limits

What this costs to run

API quota: None — local render
Tokens per call: Small: option object in, path out
Monetary: Free
Tip: Ask for option JSON when you'll reuse it many times; ask for PNG for one-off shares.

Security

Permissions, secrets, blast radius

Credential storage: MinIO creds in env vars only. No server-side storage of your data beyond the rendered chart.

Data egress: No egress by default. MinIO export uploads to your configured endpoint only.

Chart images can contain sensitive data. Review before publishing to a shared MinIO bucket.

Troubleshooting

Common errors and fixes

PNG render is blank

Ensure series data types match (numbers, not strings) and x-axis length equals series length.

Verify: Inspect the option JSON; types should be number arrays

MinIO upload failed: signature mismatch

Check MINIO_USE_SSL, MINIO_PORT, and that access/secret keys belong to the same MinIO instance.

Verify: mc admin info myminio/

Fonts missing / CJK characters as boxes

Install a CJK-capable font in the environment running the MCP server (e.g., Noto Sans CJK).

Verify: fc-list | grep -i cjk

Alternatives

MCP ECharts vs others

Alternative	When to use it instead	Tradeoff
antv-chart	You prefer AntV's opinionated defaults and Chinese docs	Smaller chart vocabulary
markmap-mcp-server	You need a hierarchy, not statistical charts	Different output class
mermaid-skill	You need flowcharts/sequence diagrams, not data charts	Diagrams ≠ charts

More

Resources

📖 Read the official README on GitHub

🐙 Browse open issues

🔍 Browse all 400+ MCP servers and Skills