ECharts

A MCP server to generate echarts image

javascript

7

GitHub Stars

javascript

Language

6 months ago

First Indexed

2 months ago

Catalog Refreshed

Documentation & install

Readme and setup notes from the catalogue, plus a client-ready config you can copy for your MCP host.

Installation

Add the following to your MCP client configuration file.

Configuration

View docs

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

You can generate high-quality chart images from ECharts configurations using this MCP server. It enables you to create bar, line, pie, and other chart types with customizable dimensions, making it easy to integrate chart rendering into AI-assisted workflows.

How to use

Once you have the MCP server configured, you can request chart generation from your AI assistant. Provide an ECharts configuration as a string, plus optional width and height to control the output size. The server will return a chart image built from your configuration. You can use prompts like asking for a specific chart type or data set, and adjust the final image dimensions to fit your needs.

How to install

Prerequisites: you need Node.js and npm installed on your machine.

Clone the project, install dependencies, and start the server.

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

# Install dependencies
npm install

# Run the server
npm start

Configuration

Configure the MCP client to connect to the echarts-mcp server. The following is an example configuration you can start with.

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

Additional notes

The server supports various chart types from ECharts and lets you specify output dimensions. You can provide the ECharts configuration as a string within your client prompts or integration, and set the desired width and height for the resulting image.

Usage example ECharts configuration

Here is a representative ECharts configuration you might pass to generate a bar chart of monthly data.

{
  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]
  }]
}