Enables generation of data visualizations using Apache ECharts, supporting various chart types (bar, line, pie, scatter, funnel, tree, treemap, sunburst) by accepting chart parameters and returning cloud image URLs of the rendered charts.
Utilizes Baidu Cloud Storage (via baidubce/bce-sdk-js) to store generated chart images and return their URLs for display purposes.
ECharts MCP
This project shows how to implement an MCP (Model Context Protocol) server of Apache ECharts.
The basic workflow is that it gets chart type, data and other parameters from an LLM, and returns the cloud image URL of the generated ECharts chart.
Supported ECharts series types: 'bar', 'line', 'pie', 'scatter', 'funnel', 'tree', 'treemap', 'sunburst'
.
Setup
Create an .env
file. See .env.example
for reference. You need to have the access to a baidubce/bce-sdk-js account to store the images on the cloud.
Run
FAQ
How to change image cloud storage?
By default, it uses baidubce/bce-sdk-js to store the generated image and return the URL of the image on the cloud. If you wish to use other Cloud storage, change the implemenation in src/storage.js
.
How to change ECharts theme?
See registerTheme
and registerFont
comments in src/chart.js
.
How to support more series types?
- Change
inputSchema
insrc/index.js
- Normalize
data
insrc/chart.js
You are welcomed to make a pull request.
Discussion of Implementation
To make an MCP server of Apache ECharts, there are 3 common ways to do:
- Ask LLM to provide a full ECharts option
- Ask LLM to provide pre-fined parameters including chart themes
- Ask LLM to provide pre-fined minimal parameters
The advantage of Approach 1 is that is has the potential of making all kinds of charts that ECharts supports. But it may not be stable, especially for less frequently used chart types.
Approach 2 gives the freedom to change chart themes from prompt. For example, you may ask the LLM to generate a chart with red bars of data ...
. But this approach requires a lot of parameters in order to support so many ECharts options. And it degenerates to approach 1 as the number of parameters grows.
Approach 3 asks LLM to provide minimal parameters like series type, data, seriesName, title, and axisName. The chart theme is defined in the app so that only the developer of this app, rather than users can change the theme. We believe this is the best way to provide stable results and so this is the approach we take in this project.
This server cannot be installed
An MCP (Model Context Protocol) server that enables LLMs to generate ECharts visualizations by accepting chart type, data and parameters and returning cloud image URLs of the generated charts.
Related MCP Servers
- -securityFlicense-qualityA Model Context Protocol (MCP) server implementation that provides the LLM an interface for visualizing data using Vega-Lite syntax.Last updated -78Python
- -securityAlicense-qualityA Model Context Protocol (MCP) server that enables LLMs to interact directly the documents that they have on-disk through agentic RAG and hybrid search in LanceDB. Ask LLMs questions about the dataset as a whole or about specific documents.Last updated -463TypeScriptMIT License
- -securityAlicense-qualityA server that implements the Model Context Protocol (MCP), providing an interface for LLM applications to generate mermaid.js visualizations and diagrams.Last updated -PythonMIT License
- -securityFlicense-qualityThis Model Context Protocol (MCP) server provides powerful visualization tools using QuickChart.io APIs. With this MCP, AI assistants can create charts, diagrams, barcodes, QR codes, word clouds, tables, and more.Last updated -23TypeScript