VChart

The VChart MCP Server enables AI assistants to generate interactive charts and visualizations through the Model Context Protocol and the VChart library.

When you request charts or graphs during AI conversations, the MCP server processes the request and generates professional-quality visualizations across multiple output formats.

Features

• Multiple Chart Types: Cartesian, polar, hierarchical, progress, scatter, range, dual-axis, Sankey, heatmap, word cloud, and Venn diagrams
• Flexible Output Formats: Generate charts as PNG/JPG images, interactive HTML, or VChart specification objects
• Extensive Customization: Control dimensions, themes, colors, titles, axis configurations, and visual elements
• Cross-Platform Compatibility: Works with desktop applications including Claude, VSCode, Cursor, and other MCP-compatible clients
• Multiple Transport Methods: Supports stdio, SSE, and streamable transport protocols
• Professional Quality: Generates publication-ready charts suitable for business presentations and reports

Use Cases

• Business Intelligence Dashboards: Create interactive charts for quarterly reports, sales performance tracking, and KPI monitoring where executives need quick visual insights from complex datasets
• Data Analysis Workflows: Generate scatter plots, heatmaps, and correlation charts during exploratory data analysis sessions where researchers need immediate visual feedback on statistical relationships
• Project Management Reporting: Build progress charts, timeline visualizations, and resource allocation diagrams for stakeholder presentations and project status updates
• Educational Content Creation: Develop interactive learning materials with radar charts for skill assessments, hierarchical charts for concept mapping, and animated ranking charts for historical data trends

How to Use It

1. Configure the MCP server in your MCP clients by adding the following configuration:

MacOS Configuration:

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

Windows Configuration:

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

2. Install vchart-mcp-server for Claude Desktop automatically using Smithery:

npx -y @smithery/cli install @VisActor/vchart-mcp-server --client claude

3. Or Install the server globally for HTTP-based transports:

npm install -g @visactor/vchart-mcp-server

4. Start the server with different transport options:

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

Access endpoints:

• SSE transport: http://localhost:3001/sse
• Streamable transport: http://localhost:3001/streamable

Available Chart Generation Tools

• generate_cartesian_chart: Creates line, area, bar, waterfall, funnel, and animated ranking bar charts with comprehensive axis controls and customization options.
• generate_polar_chart: Generates radar, rose, and pie charts with angle and radius axis configurations for circular data representations.
• generate_hierarchical_chart: Produces treemap, circle packing, and sunburst charts for hierarchical data visualization with color and value field mappings.
• generate_progress_chart: Creates linear progress bars, circular progress indicators, gauge charts, and liquid fill charts for progress tracking.
• generate_scatter_chart: Builds scatter plots with size and color field mappings for correlation analysis and pattern discovery.
• generate_dual_axis_chart: Constructs combination charts with two Y axes for comparing metrics with different units or scales.
• generate_range_column_chart: Creates horizontal range bar charts for displaying data ranges and interval comparisons.
• generate_sankey_chart: Generates flow diagrams showing data movement between source and target nodes with value weighting.
• generate_heatmap_chart: Produces density maps for showing data distribution patterns across two categorical dimensions.
• generate_wordcloud_venn: Creates word clouds and Venn diagrams for text analysis and set relationship visualization.

Available Parameters

• output: Choose between “spec” (VChart specification), “image” (PNG/JPG), or “html” (interactive chart)
• width/height: Set chart dimensions (default: 500×500 pixels)
• title/subTitle: Add descriptive titles with optional positioning
• chartTheme: Apply predefined visual themes
• background: Set background color
• colors: Define custom color palettes

Private Deployment

For private deployments, configure a custom image generation server:

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

FAQs

Q: Can I generate charts in different formats from the same data?
A: Yes, you can specify the output parameter as “image” for PNG/JPG files, “html” for interactive web charts, or “spec” for VChart specification objects that can be programmatically manipulated.

Q: How do I customize axis labels and grid lines?
A: Use the axis-specific parameters like xAxisTitle, yAxisTitle, xAxisHasGrid, yAxisHasGrid, xAxisHasLabel, and yAxisHasLabel to control the appearance and visibility of axis elements.

Q: What data format does the server expect?
A: The server expects data as an array of objects (dataTable parameter) where each object represents a data point with field names corresponding to the chart’s xField, yField, colorField, and other mapping parameters.

Q: Can I create animated charts?
A: Yes, the ranking_bar chart type supports animation through the timeField parameter, which creates animated ranking visualizations showing changes over time.