ECharts

ECharts

w2xi

Converts ECharts JavaScript configuration objects into PNG chart images through server-side rendering. Takes chart configs and outputs visualization images for reports and data presentation.

Generates ECharts visualizations as PNG images from JavaScript configuration objects, processing chart dimensions and configurations through server-side rendering to output image files for data visualization and report generation.

7770 viewsLocal (stdio)

What it does

  • Generate PNG images from ECharts configurations
  • Create bar charts, line charts, pie charts, and scatter plots
  • Customize chart dimensions and styling
  • Process JavaScript chart objects server-side
  • Export high-quality visualization images

Best for

Data analysts creating visual reportsDevelopers building dashboard exportsAI assistants generating chart imagesAutomated report generation systems
Server-side renderingMultiple chart types supportedCustomizable dimensions

About ECharts

ECharts is a community-built MCP server published by w2xi that provides AI assistants with tools and capabilities via the Model Context Protocol. Generate ECharts visualizations as PNG images from JavaScript configs, perfect for data visualization and report generat It is categorized under analytics data, developer tools. This server exposes 1 tool that AI clients can invoke during conversations and coding sessions.

How to install

You can install ECharts in your AI client of choice. Use the install panel on this page to get one-click setup for Cursor, Claude Desktop, VS Code, and other MCP-compatible clients. This server runs locally on your machine via the stdio transport.

License

ECharts is released under the MIT license. This is a permissive open-source license, meaning you can freely use, modify, and distribute the software.

Tools (1)

generate-echarts

Generate an echarts image from a given echarts configuration

📊 ECharts MCP Server

中文文档 | English

A Model Context Protocol (MCP) server that generates beautiful chart images from ECharts configurations.

✨ Features

  • 🎨 Generate high-quality chart images from ECharts configurations
  • 🖼️ Support for various chart types (bar, line, pie, scatter, etc.)
  • 📐 Customizable dimensions (width/height)
  • 🎯 Easy integration with AI assistants via MCP

⚙️ Configuration

.cursor/mcp.json

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

🔧 Local Development

If you want to run from source:

# Clone the repository
git clone https://github.com/w2xi/echarts-mcp.git
cd echarts-mcp

# Install dependencies
npm install

# Run the server
npm start

Then configure your MCP client:

{
  "mcpServers": {
    "echarts-mcp": {
      "command": "node",
      "args": ["/path/to/echarts-mcp/cli.js"],
      "env": {}
    }
  }
}

📖 Usage

Once configured, you can use the MCP server in your AI assistant by requesting chart generation:

Example Prompts:

  • "Generate a bar chart showing sales data for the last 6 months"
  • "Create a pie chart displaying market share distribution"
  • "Make a line chart with temperature data over time"

Tool Parameters:

  • width: Chart width in pixels (e.g., 1000)
  • height: Chart height in pixels (e.g., 500)
  • echarts: ECharts configuration object as string

Example ECharts Configuration:

{
  backgroundColor: '#fff',
  title: {
    text: 'Monthly Sales Data'
  },
  tooltip: {},
  legend: {
    data: ['Sales']
  },
  xAxis: {
    data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
  },
  yAxis: {},
  series: [{
    name: 'Sales',
    type: 'bar',
    data: [120, 200, 150, 80, 70, 110]
  }]
}

🛠️ Development

Scripts

  • npm start - Start the MCP server
  • npm test - Run test charts
  • npm run inspect - Inspect the MCP server with debugging tools

Dependencies

  • ECharts: Chart generation library
  • Canvas: Server-side canvas rendering
  • MCP SDK: Model Context Protocol implementation
  • Zod: Schema validation

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

MIT License

🔗 Links


Made with ❤️ by w2xi

Alternatives

Related Skills

Browse all skills
usage-export

Export OpenClaw usage data to CSV for analytics tools like Power BI. Hourly aggregates by activity type, model, and channel.

1
mcp-developer

Use when building MCP servers or clients that connect AI systems with external tools and data sources. Invoke for MCP protocol compliance, TypeScript/Python SDKs, resource providers, tool functions.

1
ccxt-typescript

CCXT cryptocurrency exchange library for TypeScript and JavaScript developers (Node.js and browser). Covers both REST API (standard) and WebSocket API (real-time). Helps install CCXT, connect to exchanges, fetch market data, place orders, stream live tickers/orderbooks, handle authentication, and manage errors. Use when working with crypto exchanges in TypeScript/JavaScript projects, trading bots, arbitrage systems, or portfolio management tools. Includes both REST and WebSocket examples.

1
dotnet-backend

.NET/C# backend developer for ASP.NET Core APIs with Entity Framework Core. Builds REST APIs, minimal APIs, gRPC services, authentication with Identity/JWT, authorization, database operations, background services, SignalR real-time features. Activates for: .NET, C#, ASP.NET Core, Entity Framework Core, EF Core, .NET Core, minimal API, Web API, gRPC, authentication .NET, Identity, JWT .NET, authorization, LINQ, async/await C#, background service, IHostedService, SignalR, SQL Server, PostgreSQL .NET, dependency injection, middleware .NET.

109
supabase-developer

Build full-stack applications with Supabase (PostgreSQL, Auth, Storage, Real-time, Edge Functions). Use when implementing authentication, database design with RLS, file storage, real-time features, or serverless functions.

87
python-expert

Senior Python developer expertise for writing clean, efficient, and well-documented code. Use when: writing Python code, optimizing Python scripts, reviewing Python code for best practices, debugging Python issues, implementing type hints, or when user mentions Python, PEP 8, or needs help with Python data structures and algorithms.

40