ECharts
About
Generate visual charts using [ECharts](https://echarts.apache.org) with AI MCP dynamically, used for chart generation and data analysis.
Details
- Author
- hustcc
- Downloads
- 587
- Categories
- Developer Tools, Other
Jump to
- Full support for all ECharts syntax, data, style, and themes.
- Export charts to PNG, SVG, or ECharts option format.
- Validates ECharts syntax for correct multi-round output.
- Lightweight with zero dependencies.
- Fully local generation; no reliance on remote services.
Setting up with Highlight
This MCP is not yet compatible with Highlight’s one-click setup. However, you can still use it with Highlight by following these steps:
- Download and install Highlight from highlightai.com/download
- Navigate to the plugins tab and select "Add Custom Plugin"
-
Configure the plugin with the settings below
Plugin Name
EChartsCommand (node, npx, python, etc.)Please refer to the README for specific instructions on how to obtain API keys or other required environment variables.
- Enable "Start Automatically" if you want the plugin to start when Highlight launches
From the repository
Install and run the server via npx -y mcp-echarts. Configure it as an MCP server in desktop apps like Claude, VSCode, Cline, or Cherry Studio by adding the appropriate JSON configuration (macOS or Windows). It also supports HTTP and SSE protocols for use on remote platforms.
generate_echarts
Generate visual charts using Apache ECharts with echarts option and configuration dynamically. Apache ECharts is an Open Source JavaScript Visualization Library, which is used to create interactive charts and visualizations in web applications. It supports a wide range of chart types, including line charts, bar charts, pie charts, scatter plots, and more. ECharts is highly customizable and can be integrated with various data sources to create dynamic visualizations.
generate_area_chart
Generate an area chart to show data trends under continuous independent variables and observe the overall data trend, such as, displacement = velocity (average or instantaneous) × time: s = v × t. If the x-axis is time (t) and the y-axis is velocity (v) at each moment, an area chart allows you to observe the trend of velocity over time and infer the distance traveled by the area's size.
generate_line_chart
Generate a line chart to show trends over time, such as, the ratio of Apple computer sales to Apple's profits changed from 2000 to 2016.
generate_bar_chart
Generate a bar chart to show data for numerical comparisons among different categories, such as, comparing categorical data and for horizontal comparisons.
generate_pie_chart
Generate a pie chart to show the proportion of parts, such as, market share and budget allocation.
generate_radar_chart
Generate a radar chart to display multidimensional data (four dimensions or more), such as, evaluate Huawei and Apple phones in terms of five dimensions: ease of use, functionality, camera, benchmark scores, and battery life.
generate_scatter_chart
Generate a scatter chart to show the relationship between two variables, helps discover their relationship or trends, such as, the strength of correlation, data distribution patterns.
generate_sankey_chart
Generate a sankey chart to visualize the flow of data between different stages or categories, such as, the user journey from landing on a page to completing a purchase.
generate_funnel_chart
Generate a funnel chart to visualize the progressive reduction of data as it passes through stages, such as, the conversion rates of users from visiting a website to completing a purchase.
generate_gauge_chart
Generate a gauge chart to display single indicator's current status, such as, CPU usage rate, completion progress, or performance scores.
generate_treemap_chart
Generate a treemap chart to display hierarchical data and can intuitively show comparisons between items at the same level, such as, show disk space usage with treemap.
generate_sunburst_chart
Generate a sunburst chart to display multi-level hierarchical data, such as, organizational structure, file system hierarchy, or category breakdown.
generate_heatmap_chart
Generate a heatmap chart to display data density or intensity distribution, such as, user activity patterns by time and day, or correlation matrix.
generate_candlestick_chart
Generate a candlestick chart for financial data visualization, such as, stock prices, cryptocurrency prices, or other OHLC (Open-High-Low-Close) data.
generate_boxplot_chart
Generate a boxplot chart to show data for statistical summaries among different categories, such as, comparing the distribution of data points across categories.
generate_graph_chart
Generate a network graph chart to show relationships (edges) between entities (nodes), such as, relationships between people in social networks.
generate_parallel_chart
Generate a parallel coordinates chart to display multi-dimensional data, such as, comparing different products across multiple attributes.
generate_tree_chart
Generate a tree chart to display hierarchical data structure, such as, organizational chart, family tree, or file directory structure.
Claude Desktop / Cursor
Paste into your MCP client config file to install this server.
{
"mcpServers": {
"echarts": {
"mcp-echarts": {
"command": "npx",
"args": [
"-y",
"mcp-echarts"
]
}
}
}
}McpServers
{
"mcp-echarts": {
"command": "npx",
"args": [
"-y",
"mcp-echarts"
]
}
}
MCP ECharts  
Generate Apache ECharts diagram and chart with AI MCP dynamically. Using for chart generation and data analysis.
<div align="center">
</div>
✨ Features
- Fully support all features and syntax of ECharts, include data, style, theme and so on.
- Support exporting to png, svg, and option formats, with validation for ECharts to facilitate the model's multi-round output of correct syntax and graphics.
- Lightweight, we can install it with zero dependence.
- Extremely secure, fully generated locally, without relying on any remote services.
🤖 Usage
To use with Desktop APP, such as Claude, VSCode, Cline, Cherry Studio, and so on, add the MCP server config below. On Mac system:
{
"mcpServers": {
"mcp-echarts": {
"command": "npx",
"args": [
"-y",
"mcp-echarts"
]
}
}
}
On Window system:
{
"mcpServers": {
"mcp-echarts": {
"command": "cmd",
"args": [
"/c",
"npx",
"-y",
"mcp-echarts"
]
}
}
}
Also, you can use it on aliyun, modelscope, glama.ai, smithery.ai or others with HTTP, SSE Protocol.
🔨 Development
Install dependencies:
npm install
Build the server:
npm run build
Start the MCP server:
npm run start
📄 License
MIT@hustcc.
Sign in to leave a review
Use Google, GitHub, or an email account so ratings stay tied to real people.
No reviews posted yet.
