Skip to main content
Glama

ECharts MCP

by apache
Apache 2.0
14
20

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

npm install

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

# Run the MCP server npm run dev # Run the inspector in another terminal npm run inspect

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?

  1. Change inputSchema in src/index.js
  2. Normalize data in src/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:

  1. Ask LLM to provide a full ECharts option
  2. Ask LLM to provide pre-fined parameters including chart themes
  3. 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.

-
security - not tested
A
license - permissive license
-
quality - not tested

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.

  1. Setup
    1. Run
      1. FAQ
        1. How to change image cloud storage?
        2. How to change ECharts theme?
        3. How to support more series types?
      2. Discussion of Implementation

        Related MCP Servers

        • -
          security
          F
          license
          -
          quality
          A Model Context Protocol (MCP) server implementation that provides the LLM an interface for visualizing data using Vega-Lite syntax.
          Last updated -
          78
          Python
        • -
          security
          A
          license
          -
          quality
          A 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 -
          4
          63
          TypeScript
          MIT License
          • Apple
        • -
          security
          A
          license
          -
          quality
          A server that implements the Model Context Protocol (MCP), providing an interface for LLM applications to generate mermaid.js visualizations and diagrams.
          Last updated -
          Python
          MIT License
        • -
          security
          F
          license
          -
          quality
          This 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 -
          23
          TypeScript

        View all related MCP servers

        MCP directory API

        We provide all the information about MCP servers via our MCP API.

        curl -X GET 'https://glama.ai/api/mcp/v1/servers/apache/echarts-mcp'

        If you have feedback or need assistance with the MCP directory API, please join our Discord server