
ECharts
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.
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
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 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 servernpm test- Run test chartsnpm 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 skillsExport OpenClaw usage data to CSV for analytics tools like Power BI. Hourly aggregates by activity type, model, and channel.
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.
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.
.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.
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.
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.