Canlah Skills Radar
Sage · 数据复盘官

AntV Chart Generator

antvis/mcp-server-chart
✓ I/O · 27认领这个员工

@antv/mcp-server-chart is a TypeScript-based server that enables AI assistants to generate data visualizations using AntV's charting capabilities. Developed by the AntV Visualization Team, it implements the Model Context Protocol to provide a standardized interface for creating various chart types from data. The server exposes chart generation functionality that can be accessed through MCP tools, making it particularly valuable for applications that need to produce visual data representations through conversational interfaces without requiring direct knowledge of visualization libraries.

真实 I/O · 已连通 ✓

启动 server · tools/list · 27 个工具 · mcp-server-chart

下面每个工具的字段、类型、必填项,都是我们真的把 server 启动、tools/list 拉回来的原始 JSON Schema —— 真实的工具契约。注意:下方「示例调用」是按 schema 自动生成的演示,不是真实调用的返回。

generate_area_chart

Generate a 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.

Input(真实 schema)
dataarrayrequired
Data for area chart, it should be an array of objects, each object contains a `time` field and a `value` field, such as, [{ time: '2015', value: 23 }, { time: '2016', value: 32 }], when stacking is needed for area, the data should contain a
stackboolean
Whether stacking is enabled. When enabled, area charts require a 'group' field in the data.
styleobject
Style configuration for the chart with a JSON object, optional.
themestring
Set the theme for the chart, optional, default is 'default'.
widthnumber
Set the width of chart, default is 600.
heightnumber
Set the height of chart, default is 400.
titlestring
Set the title of chart.
axisXTitlestring
Set the x-axis title of chart.
axisYTitlestring
Set the y-axis title of chart.
示例调用
{
  "tool": "generate_area_chart",
  "arguments": {
    "data": []
  }
}
generate_bar_chart

Generate a horizontal bar chart to show data for numerical comparisons among different categories, such as, comparing categorical data and for horizontal comparisons.

Input(真实 schema)
dataarrayrequired
Data for bar chart, such as, [{ category: '分类一', value: 10 }, { category: '分类二', value: 20 }], when grouping or stacking is needed for bar, the data should contain a `group` field, such as, when [{ category: '北京', value: 825, group: '油车' },
groupboolean
Whether grouping is enabled. When enabled, bar charts require a 'group' field in the data. When `group` is true, `stack` should be false.
stackboolean
Whether stacking is enabled. When enabled, bar charts require a 'group' field in the data. When `stack` is true, `group` should be false.
styleobject
Style configuration for the chart with a JSON object, optional.
themestring
Set the theme for the chart, optional, default is 'default'.
widthnumber
Set the width of chart, default is 600.
heightnumber
Set the height of chart, default is 400.
titlestring
Set the title of chart.
axisXTitlestring
Set the x-axis title of chart.
axisYTitlestring
Set the y-axis title of chart.
示例调用
{
  "tool": "generate_bar_chart",
  "arguments": {
    "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.

Input(真实 schema)
dataarrayrequired
Data for boxplot chart, such as, [{ category: '分类一', value: 10 }] or [{ category: '分类二', value: 20, group: '组别一' }].
styleobject
Style configuration for the chart with a JSON object, optional.
themestring
Set the theme for the chart, optional, default is 'default'.
widthnumber
Set the width of chart, default is 600.
heightnumber
Set the height of chart, default is 400.
titlestring
Set the title of chart.
axisXTitlestring
Set the x-axis title of chart.
axisYTitlestring
Set the y-axis title of chart.
示例调用
{
  "tool": "generate_boxplot_chart",
  "arguments": {
    "data": []
  }
}
generate_column_chart

Generate a column chart, which are best for comparing categorical data, such as, when values are close, column charts are preferable because our eyes are better at judging height than other visual elements like area or angles.

Input(真实 schema)
dataarrayrequired
Data for column chart, such as, [{ category: 'Category A', value: 10 }, { category: 'Category B', value: 20 }], when grouping or stacking is needed for column, the data should contain a 'group' field, such as, [{ category: 'Beijing', value:
groupboolean
Whether grouping is enabled. When enabled, column charts require a 'group' field in the data. When `group` is true, `stack` should be false.
stackboolean
Whether stacking is enabled. When enabled, column charts require a 'group' field in the data. When `stack` is true, `group` should be false.
styleobject
Style configuration for the chart with a JSON object, optional.
themestring
Set the theme for the chart, optional, default is 'default'.
widthnumber
Set the width of chart, default is 600.
heightnumber
Set the height of chart, default is 400.
titlestring
Set the title of chart.
axisXTitlestring
Set the x-axis title of chart.
axisYTitlestring
Set the y-axis title of chart.
示例调用
{
  "tool": "generate_column_chart",
  "arguments": {
    "data": []
  }
}
generate_district_map

Generates regional distribution maps, which are usually used to show the administrative divisions and coverage of a dataset. It is not suitable for showing the distribution of specific locations, such as urban administrative divisions, GDP distribution maps of provinces and cities across the country, etc. This tool is limited to generating data maps within China.

Input(真实 schema)
titlestringrequired
The map title should not exceed 16 characters. The content should be consistent with the information the map wants to convey and should be accurate, rich, creative, and attractive.
dataobjectrequired
Administrative division data, lower-level administrative divisions are optional. There are usually two scenarios: one is to simply display the regional composition, only `fillColor` needs to be configured, and all administrative divisions a
widthnumber
Set the width of map, default is 1600.
heightnumber
Set the height of map, default is 1000.
示例调用
{
  "tool": "generate_district_map",
  "arguments": {
    "title": "…",
    "data": {}
  }
}
generate_dual_axes_chart

Generate a dual axes chart which is a combination chart that integrates two different chart types, typically combining a bar chart with a line chart to display both the trend and comparison of data, such as, the trend of sales and profit over time.

Input(真实 schema)
categoriesarrayrequired
Categories for dual axes chart, such as, ['2015', '2016', '2017'].
seriesarrayrequired
Series for dual axes chart, such as, [{ type: 'column', data: [91.9, 99.1, 101.6, 114.4, 121], axisYTitle: '销售额' }, { type: 'line', data: [0.055, 0.06, 0.062, 0.07, 0.075], 'axisYTitle': '利润率' }].
styleobject
Style configuration for the chart with a JSON object, optional.
themestring
Set the theme for the chart, optional, default is 'default'.
widthnumber
Set the width of chart, default is 600.
heightnumber
Set the height of chart, default is 400.
titlestring
Set the title of chart.
axisXTitlestring
Set the x-axis title of chart.
示例调用
{
  "tool": "generate_dual_axes_chart",
  "arguments": {
    "categories": [],
    "series": []
  }
}
generate_fishbone_diagram

Generate a fishbone diagram chart to uses a fish skeleton, like structure to display the causes or effects of a core problem, with the problem as the fish head and the causes/effects as the fish bones. It suits problems that can be split into multiple related factors.

Input(真实 schema)
dataobjectrequired
Data for fishbone diagram chart which is a hierarchical structure, such as, { name: 'main topic', children: [{ name: 'topic 1', children: [{ name: 'subtopic 1-1' }] }] }, and the maximum depth is 3.
styleobject
Style configuration for the chart with a JSON object, optional.
themestring
Set the theme for the chart, optional, default is 'default'.
widthnumber
Set the width of chart, default is 600.
heightnumber
Set the height of chart, default is 400.
示例调用
{
  "tool": "generate_fishbone_diagram",
  "arguments": {
    "data": {}
  }
}
generate_flow_diagram

Generate a flow diagram chart to show the steps and decision points of a process or system, such as, scenarios requiring linear process presentation.

Input(真实 schema)
dataobjectrequired
Data for flow diagram chart, such as, { nodes: [{ name: 'node1' }, { name: 'node2' }], edges: [{ source: 'node1', target: 'node2', name: 'edge1' }] }.
styleobject
Style configuration for the chart with a JSON object, optional.
themestring
Set the theme for the chart, optional, default is 'default'.
widthnumber
Set the width of chart, default is 600.
heightnumber
Set the height of chart, default is 400.
示例调用
{
  "tool": "generate_flow_diagram",
  "arguments": {
    "data": {}
  }
}
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.

Input(真实 schema)
dataarrayrequired
Data for funnel chart, such as, [{ category: '浏览网站', value: 50000 }, { category: '放入购物车', value: 35000 }, { category: '生成订单', value: 25000 }, { category: '支付订单', value: 15000 }, { category: '完成交易', value: 8000 }].
styleobject
Style configuration for the chart with a JSON object, optional.
themestring
Set the theme for the chart, optional, default is 'default'.
widthnumber
Set the width of chart, default is 600.
heightnumber
Set the height of chart, default is 400.
titlestring
Set the title of chart.
示例调用
{
  "tool": "generate_funnel_chart",
  "arguments": {
    "data": []
  }
}
generate_histogram_chart

Generate a histogram chart to show the frequency of data points within a certain range. It can observe data distribution, such as, normal and skewed distributions, and identify data concentration areas and extreme points.

Input(真实 schema)
dataarrayrequired
Data for histogram chart, it should be an array of numbers, such as, [78, 88, 60, 100, 95].
binNumbernumber
Number of intervals to define the number of intervals in a histogram, when not specified, a built-in value will be used.
styleobject
Style configuration for the chart with a JSON object, optional.
themestring
Set the theme for the chart, optional, default is 'default'.
widthnumber
Set the width of chart, default is 600.
heightnumber
Set the height of chart, default is 400.
titlestring
Set the title of chart.
axisXTitlestring
Set the x-axis title of chart.
axisYTitlestring
Set the y-axis title of chart.
示例调用
{
  "tool": "generate_histogram_chart",
  "arguments": {
    "data": []
  }
}
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.

Input(真实 schema)
dataarrayrequired
Data for line chart, it should be an array of objects, each object contains a `time` field and a `value` field, such as, [{ time: '2015', value: 23 }, { time: '2016', value: 32 }], when the data is grouped by time, the `group` field should
styleobject
Style configuration for the chart with a JSON object, optional.
themestring
Set the theme for the chart, optional, default is 'default'.
widthnumber
Set the width of chart, default is 600.
heightnumber
Set the height of chart, default is 400.
titlestring
Set the title of chart.
axisXTitlestring
Set the x-axis title of chart.
axisYTitlestring
Set the y-axis title of chart.
示例调用
{
  "tool": "generate_line_chart",
  "arguments": {
    "data": []
  }
}
generate_liquid_chart

Generate a liquid chart to visualize a single value as a percentage, such as, the current occupancy rate of a reservoir or the completion percentage of a project.

Input(真实 schema)
percentnumberrequired
The percentage value to display in the liquid chart, should be a number between 0 and 1, where 1 represents 100%. For example, 0.75 represents 75%.
shapestring
The shape of the liquid chart, can be 'circle', 'rect', 'pin', or 'triangle'. Default is 'circle'.
styleobject
Style configuration for the chart with a JSON object, optional.
themestring
Set the theme for the chart, optional, default is 'default'.
widthnumber
Set the width of chart, default is 600.
heightnumber
Set the height of chart, default is 400.
titlestring
Set the title of chart.
示例调用
{
  "tool": "generate_liquid_chart",
  "arguments": {
    "percent": 0
  }
}
generate_mind_map

Generate a mind map chart to organizes and presents information in a hierarchical structure with branches radiating from a central topic, such as, a diagram showing the relationship between a main topic and its subtopics.

Input(真实 schema)
dataobjectrequired
Data for mind map chart which is a hierarchical structure, such as, { name: 'main topic', children: [{ name: 'topic 1', children: [{ name:'subtopic 1-1' }] }, and the maximum depth is 3.
styleobject
Style configuration for the chart with a JSON object, optional.
themestring
Set the theme for the chart, optional, default is 'default'.
widthnumber
Set the width of chart, default is 600.
heightnumber
Set the height of chart, default is 400.
示例调用
{
  "tool": "generate_mind_map",
  "arguments": {
    "data": {}
  }
}
generate_network_graph

Generate a network graph chart to show relationships (edges) between entities (nodes), such as, relationships between people in social networks.

Input(真实 schema)
dataobjectrequired
Data for network graph chart, such as, { nodes: [{ name: 'node1' }, { name: 'node2' }], edges: [{ source: 'node1', target: 'node2', name: 'edge1' }] }
styleobject
Style configuration for the chart with a JSON object, optional.
themestring
Set the theme for the chart, optional, default is 'default'.
widthnumber
Set the width of chart, default is 600.
heightnumber
Set the height of chart, default is 400.
示例调用
{
  "tool": "generate_network_graph",
  "arguments": {
    "data": {}
  }
}
generate_organization_chart

Generate an organization chart to visualize the hierarchical structure of an organization, such as, a diagram showing the relationship between a CEO and their direct reports.

Input(真实 schema)
dataobjectrequired
Data for organization chart which is a hierarchical structure, such as, { name: 'CEO', description: 'Chief Executive Officer', children: [{ name: 'CTO', description: 'Chief Technology Officer', children: [{ name: 'Dev Manager', description:
orientstring
Orientation of the organization chart, either horizontal or vertical. Default is vertical, when the level of the chart is more than 3, it is recommended to use horizontal orientation.
styleobject
Style configuration for the chart with a JSON object, optional.
themestring
Set the theme for the chart, optional, default is 'default'.
widthnumber
Set the width of chart, default is 600.
heightnumber
Set the height of chart, default is 400.
示例调用
{
  "tool": "generate_organization_chart",
  "arguments": {
    "data": {}
  }
}
generate_path_map

Generate a route map to display the user's planned route, such as travel guide routes.

Input(真实 schema)
titlestringrequired
The map title should not exceed 16 characters. The content should be consistent with the information the map wants to convey and should be accurate, rich, creative, and attractive.
dataarrayrequired
Routes, each group represents all POIs along a route. For example, [{ "data": ["西安钟楼", "西安大唐不夜城", "西安大雁塔"] }, { "data": ["西安曲江池公园", "西安回民街"] }]
widthnumber
Set the width of map, default is 1600.
heightnumber
Set the height of map, default is 1000.
示例调用
{
  "tool": "generate_path_map",
  "arguments": {
    "title": "…",
    "data": []
  }
}
generate_pie_chart

Generate a pie chart to show the proportion of parts, such as, market share and budget allocation.

Input(真实 schema)
dataarrayrequired
Data for pie chart, it should be an array of objects, each object contains a `category` field and a `value` field, such as, [{ category: '分类一', value: 27 }].
innerRadiusnumber
Set the innerRadius of pie chart, the value between 0 and 1. Set the pie chart as a donut chart. Set the value to 0.6 or number in [0 ,1] to enable it.
styleobject
Style configuration for the chart with a JSON object, optional.
themestring
Set the theme for the chart, optional, default is 'default'.
widthnumber
Set the width of chart, default is 600.
heightnumber
Set the height of chart, default is 400.
titlestring
Set the title of chart.
示例调用
{
  "tool": "generate_pie_chart",
  "arguments": {
    "data": []
  }
}
generate_pin_map

Generate a point map to display the location and distribution of point data on the map, such as the location distribution of attractions, hospitals, supermarkets, etc.

Input(真实 schema)
titlestringrequired
The map title should not exceed 16 characters. The content should be consistent with the information the map wants to convey and should be accurate, rich, creative, and attractive.
dataarrayrequired
A list of keywords for the names of points of interest (POIs) in Chinese. These POIs usually contain a group of places with similar locations, so the names should be more descriptive, must adding attributives to indicate that they are diffe
markerPopupobject
Marker type, one is simple mode, which is just an icon and does not require `markerPopup` configuration; the other is image mode, which displays location photos and requires `markerPopup` configuration. Among them, `width`/`height`/`borderR
widthnumber
Set the width of map, default is 1600.
heightnumber
Set the height of map, default is 1000.
示例调用
{
  "tool": "generate_pin_map",
  "arguments": {
    "title": "…",
    "data": []
  }
}
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.

Input(真实 schema)
dataarrayrequired
Data for radar chart, it should be an array of objects, each object contains a `name` field and a `value` field, such as, [{ name: 'Design', value: 70 }], when the data is grouped by `group`, the `group` field is required, such as, [{ name:
styleobject
Style configuration for the chart with a JSON object, optional.
themestring
Set the theme for the chart, optional, default is 'default'.
widthnumber
Set the width of chart, default is 600.
heightnumber
Set the height of chart, default is 400.
titlestring
Set the title of chart.
示例调用
{
  "tool": "generate_radar_chart",
  "arguments": {
    "data": []
  }
}
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.

Input(真实 schema)
dataarrayrequired
Date for sankey chart, such as, [{ source: 'Landing Page', target: 'Product Page', value: 50000 }, { source: 'Product Page', target: 'Add to Cart', value: 35000 }, { source: 'Add to Cart', target: 'Checkout', value: 25000 }, { source: 'Chec
nodeAlignstring
Alignment of nodes in the sankey chart, such as, 'left', 'right', 'justify', or 'center'.
styleobject
Style configuration for the chart with a JSON object, optional.
themestring
Set the theme for the chart, optional, default is 'default'.
widthnumber
Set the width of chart, default is 600.
heightnumber
Set the height of chart, default is 400.
titlestring
Set the title of chart.
示例调用
{
  "tool": "generate_sankey_chart",
  "arguments": {
    "data": []
  }
}

共 27 个工具,此处展示前 20 个。

综合分

Canlah Score88
归属岗位Sage · 数据复盘官
岗位分值×1.20
★ Stars4.2k
↓ 下载量431k
工具数(实测)27
npm 包@antv/mcp-server-chart
✓ 已连通:字段来自真实的 tools/list(工具清单)。工具本身尚未真实调用。

真实调用 · 真跑了一次工具

✓ tools/call · 2026-07-04
真实输入 · generate_bar_chart
{
  "data": [
    {
      "category": "Organic Search",
      "value": 3200000
    },
    {
      "category": "Paid Social",
      "value": 2100000
    },
    {
      "category": "Email",
      "value": 1450000
    },
    {
      "category": "Direct",
      "value": 980000
    },
    {
      "category": "Affiliate",
      "value": 540000
    }
  ],
  "title": "Allbirds 2025 revenue by channel (USD)"
}
真实输出
real tool output

真实 tools/call —— 喂真实数据,返回真实渲染图表 URL

效果测评卡

进行中 · 待运行
任务成功率
输出质量 (LLM 评审)
延迟
成本 / token
稳定性

真实 I/O 已解决「输入输出是什么」;下一步接 agent 真跑,量化「效果好不好」。

取用 / 安装

npx -y @antv/mcp-server-chart
同岗位其他 skill