MCP Server Chart for VS Code: Setup & Config

What you can do with MCP Server Chart in VS Code

Choose a broad AntV visualization toolkit with tables, diagrams, and configurable rendering.

• Visualize distributions with histograms, boxplots, or violin plots.
• Create flow diagrams, organization charts, and relationship graphs.
• Render tables or pivot tables for summaries.

Before you start: MCP Server Chart in VS Code

• Node.js with npx for local execution
• An MCP-compatible client

The README gives this desktop stdio configuration. Windows uses a cmd /c wrapper. Optional environment settings support private rendering, generation records, and disabled tools.

MCP Server Chart VS Code configuration

1. Choose VS Code configuration scope

   For MCP Server Chart, open Workspace: .vscode/mcp.json. Merge into servers; preserve existing inputs.

2. Add MCP Server Chart to VS Code

   Use the mcp-server-chart entry below in servers. Keep MCP Server Chart's documented stdio connection fields and your other VS Code entries.

3. Check MCP Server Chart in VS Code

   MCP Server Chart: Start in VS Code’s MCP controls; inspect output and trust prompts.

{
  "servers": {
    "mcp-server-chart": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "@antv/mcp-server-chart"
      ],
      "env": {}
    }
  }
}

MCP Server Chart tools available to VS Code

MCP Server Chart's stored tool list documents 27 tools; compare it with VS Code's connected tool list, because the stored list is not a live check.

generate_area_chart

Look for generate_area_chart among VS Code's agent-mode tools after starting MCP Server Chart through the MCP controls.

generate_bar_chart

Look for generate_bar_chart among VS Code's agent-mode tools after starting MCP Server Chart through the MCP controls.

Compare category values with horizontal bars.

generate_boxplot_chart

Look for generate_boxplot_chart among VS Code's agent-mode tools after starting MCP Server Chart through the MCP controls.

Summarize distributions using medians, quartiles, and outliers.

generate_column_chart

Look for generate_column_chart among VS Code's agent-mode tools after starting MCP Server Chart through the MCP controls.

Compare category values with vertical columns.

generate_district_map

Look for generate_district_map among VS Code's agent-mode tools after starting MCP Server Chart through the MCP controls.

Visualize values across administrative regions within supported map coverage.

generate_dual_axes_chart

Look for generate_dual_axes_chart among VS Code's agent-mode tools after starting MCP Server Chart through the MCP controls.

Combine series with different units or scales in one chart.

generate_fishbone_diagram

Look for generate_fishbone_diagram among VS Code's agent-mode tools after starting MCP Server Chart through the MCP controls.

Organize possible causes around a central problem.

generate_flow_diagram

Look for generate_flow_diagram among VS Code's agent-mode tools after starting MCP Server Chart through the MCP controls.

Show process steps and decision paths.

generate_funnel_chart

Look for generate_funnel_chart among VS Code's agent-mode tools after starting MCP Server Chart through the MCP controls.

generate_histogram_chart

Look for generate_histogram_chart among VS Code's agent-mode tools after starting MCP Server Chart through the MCP controls.

generate_line_chart

Look for generate_line_chart among VS Code's agent-mode tools after starting MCP Server Chart through the MCP controls.

generate_liquid_chart

Look for generate_liquid_chart among VS Code's agent-mode tools after starting MCP Server Chart through the MCP controls.

generate_mind_map

Look for generate_mind_map among VS Code's agent-mode tools after starting MCP Server Chart through the MCP controls.

generate_network_graph

Look for generate_network_graph among VS Code's agent-mode tools after starting MCP Server Chart through the MCP controls.

generate_organization_chart

Look for generate_organization_chart among VS Code's agent-mode tools after starting MCP Server Chart through the MCP controls.

Represent an organization's reporting hierarchy.

generate_path_map

Look for generate_path_map among VS Code's agent-mode tools after starting MCP Server Chart through the MCP controls.

Plot a planned route across supported map locations.

generate_pie_chart

Look for generate_pie_chart among VS Code's agent-mode tools after starting MCP Server Chart through the MCP controls.

Show how categories contribute to a whole.

generate_pin_map

Look for generate_pin_map among VS Code's agent-mode tools after starting MCP Server Chart through the MCP controls.

Mark the positions and distribution of locations on a map.

generate_radar_chart

Look for generate_radar_chart among VS Code's agent-mode tools after starting MCP Server Chart through the MCP controls.

Compare multiple dimensions using a radial layout.

generate_sankey_chart

Look for generate_sankey_chart among VS Code's agent-mode tools after starting MCP Server Chart through the MCP controls.

Show flows and their magnitudes between stages or categories.

generate_scatter_chart

Look for generate_scatter_chart among VS Code's agent-mode tools after starting MCP Server Chart through the MCP controls.

Plot paired variables to inspect association and data patterns.

generate_treemap_chart

Look for generate_treemap_chart among VS Code's agent-mode tools after starting MCP Server Chart through the MCP controls.

generate_venn_chart

Look for generate_venn_chart among VS Code's agent-mode tools after starting MCP Server Chart through the MCP controls.

generate_violin_chart

Look for generate_violin_chart among VS Code's agent-mode tools after starting MCP Server Chart through the MCP controls.

generate_waterfall_chart

Look for generate_waterfall_chart among VS Code's agent-mode tools after starting MCP Server Chart through the MCP controls.

generate_word_cloud_chart

Look for generate_word_cloud_chart among VS Code's agent-mode tools after starting MCP Server Chart through the MCP controls.

generate_spreadsheet

Look for generate_spreadsheet among VS Code's agent-mode tools after starting MCP Server Chart through the MCP controls.

MCP Server Chart: full stored tool descriptions

Troubleshooting MCP Server Chart in VS Code

• Make npx @antv/mcp-server-chart (Node.js/npm) available in the workspace, container, or remote environment hosting MCP Server Chart. Start through VS Code's MCP controls; inspect output and trust prompts.
• MCP Server Chart uses stdio here: VS Code must keep the configured process running; protocol output belongs on stdout and diagnostics on stderr.
• Known limitation: Geographic generation is limited to China.
• Known limitation: The private rendering option does not support geographic tools.
• Known limitation: Generation history requires optional service-identifier setup; otherwise results must be saved manually.
• General VS Code troubleshooting lives in the /clients/vscode guide.

Frequently asked questions