mcp-server-chart Documentation

1. Project Overview & Quickstart (antvis/mcp-server-chart) Copy Chapter

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 Copy Chapter

• ✨ 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 Copy Chapter

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_pie_chart: Generate a pie chart, used to display the proportion of data, dividing it into parts represented by sectors showing the percentage of each part.
18. generate_pin_map - Generate a pin-map, used to show the distribution of POIs.
19. generate_radar_chart: Generate a radar chart, used to display multi-dimensional data comprehensively, showing multiple dimensions in a radar-like format.
20. generate_sankey_chart: Generate a sankey chart, used to display data flow and volume, representing the movement of data between different nodes in a Sankey-style format.
21. generate_scatter_chart: Generate a scatter plot, used to display the relationship between two variables, showing data points as scattered dots on a coordinate system.
22. generate_treemap_chart: Generate a treemap, used to display hierarchical data, showing data in rectangular forms where the size of rectangles represents the value of the data.
23. generate_venn_chart: Generate a venn diagram, used to display relationships between sets, including intersections, unions, and differences.
24. generate_violin_chart: Generate a violin plot, used to display the distribution of data, combining features of boxplots and density plots to provide a more detailed view of the data distribution.
25. generate_word_cloud_chart: Generate a word-cloud, used to display the frequency of words in textual data, with font sizes indicating the frequency of each word.
26. generate_spreadsheet: Generate a spreadsheet or pivot table for displaying tabular data. When 'rows' or 'values' fields are provided, it renders as a pivot table (cross-tabulation); otherwise, it renders as a regular table.

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

🤖 Usage Copy Chapter

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 Copy Chapter

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 Copy Chapter

Run directly Copy Section

Install the package globally.

npm install @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 Copy Section

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 Copy Chapter

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 Copy Chapter

📠 Private Deployment Copy Section

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 Copy Section

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 after success):

Next, you need to add the SERVICE_ID environment variable to the MCP server configuration. For example, the configuration for Mac is as follows (for Windows systems, just add the env variable):

{
  "mcpServers": {
    "AntV Map": {
      "command": "npx",
      "args": ["-y", "@antv/mcp-server-chart"],
      "env": {
        "SERVICE_ID": "***********************************"
      }
    }
  }
}

After updating the MCP Server configuration, you need to restart your AI client application and check again whether you have started and connected to the MCP Server successfully. Then you can try to generate the map again. After the generation is successful, you can go to the "My Map" page of the mini program to view your map generation records.

🎛️ Tool Filtering Copy Section

You can disable specific chart generation tools using the DISABLED_TOOLS environment variable. This is useful when certain tools have compatibility issues with your MCP client or when you want to limit the available functionality.

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

Available tool names for filtering See the ✨ Features.

🔨 Development Copy Chapter

Install dependencies:

npm install

Build the server:

npm run build

Start the MCP server:

npm run start

Start the MCP server with SSE transport:

node build/index.js -t sse

Start the MCP server with Streamable transport:

node build/index.js -t streamable

📄 License Copy Chapter

MIT@AntV.

2. Official Technical Reference & Guides (antvis/antvis.github.io) Copy Chapter

File: README.md Copy Chapter

AntV New Site 📈

New AntV site built on @antv/dumi-theme-antv.

Install & Preview Copy Chapter

npm install
npm start

Visit https://127.0.0.1:8000

Prettier Copy Chapter

npm run format

Deploy to antv.vision Copy Chapter

npm run deploy

File: docs/specification/principles/basic.en.md Copy Chapter

The design values of AntV for data visualization are derived from the Ant Design design system (Ant Design) and serve as guiding principles with characteristics of data visualization. While adhering to the design values of Ant Design, it offers a further interpretation in the field of data visualization.

AntV's design language initially defined four design values: "Accuracy, Clarity, Effectiveness, and Beauty". After several years of extensive project practice in internal business and with the changes in users' demands for data analysis, new requirements have been put forward for charts.

Today, we have shifted from the "object perspective" to the "user perspective" and reexamined the AntV design values. In the past, the essence of "accuracy" and "effectiveness" for charts was to build users' "sense of trust". The essence of "clarity" and "beauty" for charts was to build users' "sense of ease". As a carrier for transmitting data information, the most important value of charts is to inspire and provide insights for users. In the past, there was a lack of "sense of meaning", and today we have added it, thus resulting in the upgrade of the values today.

Sense of Trust Copy Chapter

If we compare a chart to a person, its visible appearance, the behavioral feedback during interaction, and even the sounds it makes are all ways to build a sense of trust with users. The sense of trust means that when users first see a chart from a distance, they can be attracted by its reliable appearance. When presenting data, it should not distort, mislead, or omit information, but accurately and truthfully reflect the characteristic information of the data. Only in this way can users trust the data in the chart with confidence, bravely approach, explore, and understand it, and be bold enough to analyze the data.

Sense of Ease Copy Chapter

The beauty of data is like a symphony of the visual and interactive aspects of a chart. Use an appropriate amount of visual elements to present data, group data according to the Gestalt principles, focus on conveying information without redundancy, and use the most appropriate data-ink ratio to express the most useful information for users, enabling users to quickly obtain information. Meanwhile, it can also create an orderly and regular beauty. Coupled with timely feedback and appropriately emerging interactions, they jointly play a clear, elegant, and intuitive beauty of data, allowing users to easily understand the data.

Sense of Meaning Copy Chapter

Truly effective communication is like a two-way exchange stage. When users stop to look at a chart, it would be wonderful if they suddenly have an "aha" moment, as if a light bulb has been lit! It's as if they suddenly understand something. Charts can not only help users clearly see the patterns of data at a glance but also stimulate their insight and inspire new views and ideas. Such communication is not only interesting but also brings practical work significance and gains for users. So, don't forget to make your charts shine and make your information more vivid and convincing.

File: docs/specification/principles/basic.zh.md Copy Chapter

title: 设计价值观 order: 0 Copy Chapter

数据可视化 AntV 的设计价值观是基于 Ant Design 设计体系衍生的，具有数据可视化特性的指导原则。它在遵循 Ant Design 设计价值观的同时，对数据可视化领域的进一步解读。

AntV 设计语言初建定义了四条设计价值观「准确、清晰、有效、美」，经过几年内部业务大量的项目实践，随着用户看数分析诉求的变化，对图表提出了新的要求。

今天我们从「物视角」到「用户视角」的转变，重新审视 AntV 设计价值观，过去对图表的「准确、有效」本质是期望建立用户的「信任感」，过去对图表的「清晰、美」本质是建立用户的「轻松感」，图表作为数据信息传递的载体，最重要的价值是给到用户启发和洞见，过去对「意义感」的缺失，在今天我们进行了新增，于是有了今天的价值观升级。

信任感 Copy Chapter

如果把图表拟作人，图表看得见的外观，与之交互的行为反馈，甚至发出的声音，都是与用户建立信任感的方式。信任感是，当用户远远初见图表时，能够被它的可靠外观所吸引，表达时不歪曲，不误导，不遗漏，精准如实反应数据的特征信息。这样才能让用户放心地相信图表的数据，勇敢地去靠近、探索和理解它们，让用户敢于看数。

轻松感 Copy Chapter

数据之美就像是图表视觉和交互的交响乐。运用适量的视觉元素来呈现数据，用格式塔原理把数据分组，信息传达有重点、无冗余，使用最适量的数据-油墨比表达对用户最有用的信息，让用户能快速获取信息，同时还能营造出秩序美和规律美，再搭配及时反馈和适时出现的交互，共同奏响一个清晰优雅直观的数据之美，让用户轻松读懂数据。

意义感 Copy Chapter

真正有效的沟通就像是双向的交流舞台。当用户驻足观看一个图表时，如果他们突然间有了"哇哦"的感觉，仿佛点亮了一盏灯泡，那就太棒了！仿佛一下子悟出了点什么，图表不仅能帮助用户一目了然地看清数据规律，还能激发他们的洞察力，启发新的观点和想法。这样的交流不仅有趣，也能为用户带来实际的工作意义和收获。所以，别忘了点亮你的图表，让你的信息更生动、更有说服力～

File: docs/specification/module/annotation.zh.md Copy Chapter

title: 标注 Annotation order: 6 Copy Chapter

定义 Copy Chapter

“辅助标记”指为帮助浏览者阅读图表更易理解图表信息，而添加的对图表整体或者部分元素的注解信息。

何时使用 Copy Chapter

辅助标记在以下两种场景可帮助用户理解图表：

1. 对于无分析经验或时间较少的用户，直接获取有用的信息。例：有分析经验的用户手动标注异常或重要的数据
2. 对于通过可视分析获取洞见的用户，提升分析效率。例：系统智能高亮波动并分析原因

常见类型 Copy Chapter

单一数据注解

区间数据注解：对某一区间范围（时间、数据、对象等）做注解

数据对比注解：统计指标、值域区间、辅助区间

多数据指定区域注解

多数据批量注解

构成元素 Copy Chapter

辅助标记的可选元素包括：文本，拉线，数据点，区间，辅助线，标记点

用户可针对不同的标记内容，选取不同的元素

注意：当无法避免与其他组件碰撞时，保持注解内容位于其他组件最上层

文本 Copy Section

设计建议

1. 在空间的允许下，尽可能显示文本，直观表达标注内容。如果不显示文本需显示 icon，用户可通过点击查看
2. 当文本内容宽度大于等于图表宽度 1/2 时，隐藏文本显示文本 icon
3. 文本内容较多时，需设定最大宽度（例：10 个字符），超出显示「...」，用户可通过 hover 查看全部

拉线 Copy Section

设计建议

1. 通常建议加上拉线来加强标注与图表的关联
2. 默认方向与值域趋势方向一致，方向视空间而定。建议:上 > 下 > 延长 > 折角 > 隐藏

数据点 Copy Section

设计建议

1. 在单一数据注解或多数据统一注解的场景，建议加上数据点，以突出标注的数据
2. 样式上建议区分已标注与未标注

区间 Copy Section

设计建议

1. 对某一区域/范围做批注时，建议显示区间。区间底色需与图形样式做区分
2. 区间的使用不宜重叠，且区间面积不宜过多，避免干扰用户阅读图表信息

辅助线 Copy Section

设计建议

1. 辅助线的样式需与图表样式做区分，且辅助线的数目不宜过多
2. 辅助线需配合文本表达含义

标记点 Copy Section

设计建议

1. 在对多数据做批量批注时，建议在文本附近显示标记点作为提示

File: docs/specification/module/axis.zh.md Copy Chapter

title: 坐标轴 Axis order: 3 Copy Chapter

定义 Copy Chapter

坐标轴指二维空间中统计图表中的轴，它用来定义坐标系中数据在方向和值的映射关系的图表组件。

何时使用 Copy Chapter

在二维笛卡尔坐标系中，轴通常为水平方向的横轴（x 轴）和竖直方向的纵轴（y 轴）。极坐标系中，轴分为切向的切向轴（angle）和径向轴（radius）。

构成元素 Copy Chapter

坐标轴主要构成元素包括：轴标题、轴标签、轴线、轴刻度线、坐标网格线。

轴标题 Copy Section

设计建议

• 通常都建议加上轴标题解释轴的含义。当图表其他部分的内容（图表标题，图形标签，注释，轴标签文字等）已能充分显示轴的意义，可以略去轴标题，精简画面元素。
• 除了数值百分比（%），科学计数法单位（k/m/g）、日期时间（年/月/日）单位和其他情况的数据单位建议在轴标题中显示，在各个轴标签中略去；例：生产总值（亿元）。

Copy Chapter

轴标签 Copy Section

设计建议：

• 可根据图表类型设置轴标签是否显示、旋转角度以及显示间隔。
• 对文本数据：不建议开启抽样。
• 对数值数据：不建议开启尾部省略。
• 连续轴、时间轴默认自动抽样 + 不旋转；
• 分类轴默认自动旋转 + 自动省略。

轴标签「若图形区域内有数据标签」，则轴标签可以考虑隐藏，如下图：

轴类型 Copy Chapter

映射轴的数据类型可分为

与此对应，轴可以分为：分类轴，时间轴，连续轴。

Copy Chapter

双轴图如何设计？ Copy Chapter

顾名思义，双轴图共用 Y 轴值域区间，它含有两个 Y 轴左标轴，左右各一个。双轴图的使用大大提高了屏效。

设计建议

• 尽量保证基线从「0」开始，且左右 Y 轴分段数量一致；
• 建议两组数据的 Y 轴单位是不同的，比如一组为「人数」，一组为「百分比」；
• 建议开启轴标题。

File: docs/specification/module/axisNavigator.en.md Copy Chapter

title: Axis Navigator order: 4 Copy Chapter

File: docs/specification/module/axisNavigator.zh.md Copy Chapter

title: 缩略轴 Axis Navigator order: 4 Copy Chapter

定义 Copy Chapter

缩略轴是一种辅助看数据的组件，它将大量数据浓缩在一个轴上，既可以缩小宏观看数据全貌，又可以放大微观看数据的片断，同时还可以拖拽观察数据在一定区间内的演变。

何时使用 Copy Chapter

缩略轴是值域数据的浓缩，它跟轴的类型息息相关。一般来说时间轴上使用缩略轴的频率高，连续轴使用缩略轴频率低、分类轴几乎不会用到缩略轴。

• 时间轴，数据跨度非常大，【高频使用】，比如一组时序数据跨度 10 年，需观察这期间数据变化趋势时，建议开启缩略轴；
• 时间轴，数据密度很高，【高频使用】，比如分钟级更新的实时数据，当需要查看一天内的数据走势时，建议开启缩略轴；
• 连续轴，数据密度很高，【低频使用】比如查看 1-100 岁平均身高分布，开启缩略轴可以全局查看身高分布；
• 分类轴【不建议使用】。

常见类型 Copy Chapter

X 轴缩略轴 Copy Section

Y 轴缩略轴 Copy Section

构成元素 Copy Chapter

缩略轴主要包括轴“主体”与“轴刻度”，其中“轴刻度”可以隐藏不显示。

出现位置 Copy Chapter

缩略轴可出现在图的四个方向，一般建议摆放在左、下、右方，上方因为有过多的图表组件（标题、图例、筛选器等）不建议摆放。

交互说明 Copy Chapter

缩略轴主题色 Copy Section

缩略轴建议与图表主题配色搭配使用，让整体更加和谐美观。假设你的图表主题色为蓝色，那么缩略轴选定区域也应该为蓝色，同理也可以为橙色。

文本躲避规则 Copy Section

与时间轴的关系 Copy Section

时间轴是缩略轴的分支，差异点如下：