Back to Skill Directory
Development

Chart

BYantvis0GRADE B

🤖 A Model Context Protocol server for generating visual charts using [AntV](https://github.com/antvis).

Config Installation

Add this to your claude_desktop_config.json:

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

* Note: Requires restart of Claude Desktop app.

OWN THIS SKILL?

Apply for the Verified Badge to boost trust and rankings.

Claim & Verify ($99)

Adoption Framework for Chart

Before installing any skill, define a clear objective and measurable outcome. A useful implementation question is: what workflow becomes faster, safer, or more reliable after this skill is active? If that answer is vague, delay rollout and tighten scope first.

For most teams, a low-risk pattern is preview-first rollout with one owner, one test scenario, and one rollback plan. Capture failures in a structured log so quality decisions are evidence-based. This is especially important for skills that touch file systems, external APIs, or automation chains with downstream side effects.

  • Define success metrics before installation.
  • Validate permission scope against policy boundaries.
  • Run one controlled pilot and document failure categories.
  • Promote only after acceptance checks pass consistently.

Pre-Deployment Review Questions

Use these questions before enabling the skill in shared environments. They reduce surprise incidents and make approval decisions consistent across teams.

  • What data can this skill read, write, or transmit by default?
  • Which failures are recoverable automatically and which require manual stop?
  • Do we have verifiable logs that prove safe behavior under load?
  • Is rollback tested, documented, and assigned to a clear owner?

If any answer is unclear, keep rollout in preview and close the gap before production use.

Editorial Review Snapshot

This listing includes an editorial QA layer in addition to automated rendering. Review status is based on documentation depth, content uniqueness, and operational safety signals from the upstream repository.

  • Last scan date: 2026-01-18
  • README depth: 1071 words
  • Content diversity score: 0.48 (higher is better)
  • Template signal count: 0
  • Index status: Index eligible

Recommendation: Pilot in a bounded environment first. Confirm observability and ownership before promoting to shared workflows.

Skill Implementation Board

Actionable utility module for rollout decisions. Use the inputs below to choose a deployment path, then execute the checklist and record an output note.

Input: Security Grade

B

Input: Findings

0

Input: README Depth

1071 words

Input: Index State

Eligible

Decision TriggerActionExpected Output
Input: risk band moderate, docs partial, findings 0Run a preview pilot with fixed ownership and observability checkpoints.Pilot can start with rollback checklist attached.
Input: page is index-eligibleProceed with external documentation and team onboarding draft.Reusable rollout runbook ready for team adoption.
Input: context tags/scenarios are missingDefine two concrete scenarios before broad rollout.Clear scope definition before further deployment.

Execution Steps

  1. Capture objective, owner, and rollback contact.
  2. Run one preview pilot with fixed test scenario.
  3. Record warning behavior and recovery evidence.
  4. Promote only if pilot output matches expected threshold.

Output Template

skill=chart
mode=B
pilot_result=pass|fail
warning_count=0
next_step=rollout|patch|hold

🛡️ Security Analysis

SCANNED: 2026-01-18
SCORE: 80/100

Clean Scan Report

Our static analysis engine detected no common vulnerabilities (RCE, API Leaks, Unbounded FS).

DocumentationREADME.md

Note: The content below is automatically rendered from the repository's README file.

MCP Server Chart build npm Version smithery badge npm License Trust Score codecov Visitors

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

mcp-server-chart technical digram

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

Now 25+ charts supported.

mcp-server-chart preview
  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.

[!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.

  1. Import .skills/chart-visualization and enable the skill in your editor.
  2. Provide your data or describe the visualization you want.
  3. 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

VariableDescriptionDefaultExample
VIS_REQUEST_SERVERCustom chart generation service URL for private deploymenthttps://antv-studio.alipay.com/api/gpt-vishttps://your-server.com/api/chart
SERVICE_IDService identifier for chart generation records-your-service-id-123
DISABLED_TOOLSComma-separated list of tool names to disable-generate_fishbone_diagram,generate_mind_map

📠 Private Deploy

...(truncated)