MCP Server Chart

A Model Context Protocol server for generating charts using AntV. We can use this mcp server for chart generation and data analysis.

This is a TypeScript-based MCP server that provides chart generation capabilities. It allows you to create various types of charts through MCP tools. You can also use it in Dify.

📋 Table of Contents

• ✨ Features
• 🤖 Usage
• 🎨 Skill Usage
• 🚰 Run with SSE or Streamable transport
• 🎮 CLI Options
• ⚙️ Environment Variables
  • VIS_REQUEST_SERVER
  • SERVICE_ID
  • DISABLED_TOOLS
• 📠 Private Deployment
• 🗺️ Generate Records
• 🎛️ Tool Filtering
• 🔨 Development
• 📄 License

✨ Features

Now 26+ charts supported.

1. generate_area_chart: Generate an area chart, used to display the trend of data under a continuous independent variable, allowing observation of overall data trends.
2. generate_bar_chart: Generate a bar chart, used to compare values across different categories, suitable for horizontal comparisons.
3. generate_boxplot_chart: Generate a boxplot, used to display the distribution of data, including the median, quartiles, and outliers.
4. generate_column_chart: Generate a column chart, used to compare values across different categories, suitable for vertical comparisons.
5. generate_district_map - Generate a district-map, used to show administrative divisions and data distribution.
6. generate_dual_axes_chart: Generate a dual-axes chart, used to display the relationship between two variables with different units or ranges.
7. generate_fishbone_diagram: Generate a fishbone diagram, also known as an Ishikawa diagram, used to identify and display the root causes of a problem.
8. generate_flow_diagram: Generate a flowchart, used to display the steps and sequence of a process.
9. generate_funnel_chart: Generate a funnel chart, used to display data loss at different stages.
10. generate_histogram_chart: Generate a histogram, used to display the distribution of data by dividing it into intervals and counting the number of data points in each interval.
11. generate_line_chart: Generate a line chart, used to display the trend of data over time or another continuous variable.
12. generate_liquid_chart: Generate a liquid chart, used to display the proportion of data, visually representing percentages in the form of water-filled spheres.
13. generate_mind_map: Generate a mind-map, used to display thought processes and hierarchical information.
14. generate_network_graph: Generate a network graph, used to display relationships and connections between nodes.
15. generate_organization_chart: Generate an organizational chart, used to display the structure of an organization and personnel relationships.
16. generate_path_map - Generate a path-map, used to display route planning results for POIs.
17. : Generate a chart, used to display the proportion of data, dividing it into parts represented by sectors showing the percentage of each part.

[!NOTE] The above geographic visualization chart generation tool uses AMap service and currently only supports map generation within China.

🤖 Usage

To use with Desktop APP, such as Claude, VSCode, Cline, Cherry Studio, Cursor, and so on, add the MCP server config below. On Mac system:

{
  "mcpServers": {
    "mcp-server-chart": {
      "command": "npx",
      "args": ["-y", "@antv/mcp-server-chart"]
    }
  }
}

On Window system:

{
  "mcpServers": {
    "mcp-server-chart": {
      "command": "cmd",
      "args": ["/c", "npx", "-y", "@antv/mcp-server-chart"]
    }
  }
}

Also, you can use it on aliyun, modelscope, glama.ai, smithery.ai or others with HTTP, SSE Protocol.

🎨 Skill Usage

If you are using an AI IDE with skill support (like Claude Code), you can use the chart-visualization skill to automatically select the best chart type and generate visualizations.

You can add the skill from https://github.com/antvis/chart-visualization-skills using:

npx skills add antvis/chart-visualization-skills

Then provide your data or describe the visualization you want. The skill will intelligently choose from 25+ chart types and generate the chart for you.

🚰 Run with SSE or Streamable transport

Run directly

Install the package globally.

npm install -g @antv/mcp-server-chart

Run the server with your preferred transport option:

# For SSE transport (default endpoint: /sse)
mcp-server-chart --transport sse

# For Streamable transport with custom endpoint
mcp-server-chart --transport streamable

Then you can access the server at:

• SSE transport: http://localhost:1122/sse
• Streamable transport: http://localhost:1122/mcp

Docker deploy

Enter the docker directory.

cd docker

Deploy using docker-compose.

docker compose up -d

Then you can access the server at:

• SSE transport: http://localhost:1123/sse
• Streamable transport: http://localhost:1122/mcp

🎮 CLI Options

You can also use the following CLI options when running the MCP server. Command options by run cli with -H.

MCP Server Chart CLI

Options:
  --transport, -t  Specify the transport protocol: "stdio", "sse", or "streamable" (default: "stdio")
  --host, -h       Specify the host for SSE or streamable transport (default: localhost)
  --port, -p       Specify the port for SSE or streamable transport (default: 1122)
  --endpoint, -e   Specify the endpoint for the transport:
                   - For SSE: default is "/sse"
                   - For streamable: default is "/mcp"
  --help, -H       Show this help message

⚙️ Environment Variables

Variable	Description	Default	Example
VIS_REQUEST_SERVER	Custom chart generation service URL for private deployment	https://antv-studio.alipay.com/api/gpt-vis	https://your-server.com/api/chart
SERVICE_ID	Service identifier for chart generation records	-	your-service-id-123
DISABLED_TOOLS	Comma-separated list of tool names to disable	-	generate_fishbone_diagram,generate_mind_map

📠 Private Deployment

MCP Server Chart provides a free chart generation service by default. For users with a need for private deployment, they can try using VIS_REQUEST_SERVER to customize their own chart generation service.

{
  "mcpServers": {
    "mcp-server-chart": {
      "command": "npx",
      "args": ["-y", "@antv/mcp-server-chart"],
      "env": {
        "VIS_REQUEST_SERVER": "<YOUR_VIS_REQUEST_SERVER>"
      }
    }
  }
}

You can use AntV's project GPT-Vis-SSR to deploy an HTTP service in a private environment, and then pass the URL address through env VIS_REQUEST_SERVER.

• Method: POST
• Parameter: Which will be passed to GPT-Vis-SSR for rendering. Such as, { "type": "line", "data": [{ "time": "2025-05", "value": 512 }, { "time": "2025-06", "value": 1024 }] }.
• Return: The return object of HTTP service.
  • success: boolean Whether generate chart image successfully.
  • resultObj: string The chart image url.
  • errorMessage: string When success = false, return the error message.

[!NOTE] The private deployment solution currently does not support geographic visualization chart generation include 3 tools: geographic-district-map, geographic-path-map, geographic-pin-map.

🗺️ Generate Records

By default, users are required to save the results themselves, but we also provide a service for viewing the chart generation records, which requires users to generate a service identifier for themselves and configure it.

Use Alipay to scan and open the mini program to generate a personal service identifier (click the "My" menu below, enter the "My Services" page, click the "Generate" button, and click the "Copy" button afte