# hustcc/mcp-echarts [Health: Active]

**Category:** 👤 Customer Data Platforms  
**Repository:** https://github.com/hustcc/mcp-echarts  
**GitHub Stars:** 270  
**npm Downloads (last month):** 2663  
**Views:** 7  
**Installs:** 0  
**Upvotes:** 0  
**Directory Page:** https://allmcps.com/mcp/hustcc-mcp-echarts

## Description
Generate visual charts using Apache ECharts with AI MCP dynamically.

## Tools
Capabilities this server exposes over MCP:

- **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 Quick Installation
Install path detected from listing signals. Uses `npx` (confidence: high):

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

## Documentation

## What hustcc/mcp-echarts MCP server does

The hustcc/mcp-echarts MCP server turns chart requests and ECharts configuration into visualizations through the Model Context Protocol. It is built around Apache ECharts and supports both a general-purpose generation tool and separate tools for frequently used chart families.

The general `generate_echarts` tool accepts ECharts options and configuration for custom visualizations. Specialized tools cover area, line, bar, pie, radar, scatter, Sankey, funnel, gauge, treemap, sunburst, heatmap, candlestick, boxplot, graph, parallel coordinates, and tree charts. These tools map common analytical needs to chart-specific generation requests, such as showing category comparisons, proportions, flows, hierarchies, distributions, or relationships.

## How it works

An MCP-compatible client starts the package locally over standard input/output, or connects to an HTTP endpoint when the server is run with SSE or streamable transport. The server renders the requested Apache ECharts result and can return one of three output forms: a PNG image, an SVG image, or the ECharts option representation.

Generated output is validated for ECharts compatibility. This supports iterative requests in which an AI model adjusts chart syntax or presentation based on earlier results. Rendering occurs locally rather than through a required remote visualization service.

## Setup and configuration

Node.js 18 or newer is required. For a desktop client using stdio, the package can be launched with `npx -y mcp-echarts`. The README provides configurations for macOS-style command execution and Windows through `cmd`. Claude Desktop, VS Code, and Cline are named as example desktop applications, alongside other compatible desktop clients.

For HTTP-style access, install the package globally with `npm install -g mcp-echarts`. Run `mcp-echarts -t sse` for SSE, which defaults to port 3033 and the `/sse` endpoint, or use `mcp-echarts -t streamable`, which defaults to `/mcp`. The port and endpoint can be changed with the CLI options `-p` and `-e`; `-t stdio` selects standard input/output.

MinIO configuration is optional. When configured, chart images can be stored in object storage and returned as URLs instead of Base64 data. Supported object-storage approaches include MinIO and S3-compatible or cloud storage services such as Amazon S3, Alibaba Cloud OSS, Google Cloud Storage, Microsoft Azure Blob Storage, and Tencent Cloud COS. If storage is unavailable or not configured, the server falls back to Base64 output.

## Tools and capabilities

The hustcc/mcp-echarts MCP server provides:

- Custom ECharts generation through `generate_echarts`.
- Area, line, bar, pie, radar, and scatter charts.
- Sankey, funnel, gauge, treemap, and sunburst charts.
- Heatmap, candlestick, boxplot, graph, parallel coordinates, and tree charts.
- PNG, SVG, and option output formats.
- ECharts option validation and optional object-storage URLs.

## Limitations and notes

The package requires Node.js 18 or later. MinIO or another object-storage setup is not necessary for basic use, but URL-based image output depends on configuring storage. Without it, image results use Base64 data.

_Full upstream README: https://allmcps.com/mcp/hustcc-mcp-echarts/readme_