QuickChart

Quickchart-MCP-Server: What is it?

Quickchart-MCP-Server is a TypeScript-based Model Context Protocol (MCP) server that integrates with QuickChart.io to provide robust chart generation capabilities. It allows users to create a wide array of chart images by converting Chart.js configurations into QuickChart URLs or downloadable images.

How to Use Quickchart-MCP-Server?

To use Quickchart-MCP-Server, you interact with its provided tools, primarily generate_chart and download_chart. You supply chart configurations in the Chart.js format, specifying chart type, data, labels, and styling. The server then processes this configuration to either return a URL to the generated chart or save the chart image to a local file.

Chart Configuration Example:

{
  "type": "bar",
  "data": {
    "labels": ["January", "February", "March"],
    "datasets": [{
      "label": "Sales",
      "data": [65, 59, 80],
      "backgroundColor": "rgb(75, 192, 192)"
    }]
  },
  "options": {
    "title": {
      "display": true,
      "text": "Monthly Sales"
    }
  }
}

Installation:

You can install the server via npm:

npm install @gongrzhe/quickchart-mcp-server

Or, for Claude Desktop users, via Smithery:

npx -y @smithery/cli install @gongrzhe/quickchart-mcp-server --client claude

After installation, configure your Claude Desktop claude_desktop_config.json to include the server, specifying the command to run it.

Key Features of Quickchart-MCP-Server

• Chart Generation: Create various chart types (bar, line, pie, doughnut, radar, polarArea, scatter, bubble, radialGauge, speedometer) using QuickChart.io.
• Customization: Full control over chart appearance with customizable labels, datasets, colors, and additional Chart.js options.
• Tool Integration: Provides generate_chart for URL generation and download_chart for local image saving.
• MCP Server: Functions as a Model Context Protocol server, enabling integration with MCP tools.
• TypeScript-based: Built with TypeScript for enhanced code quality and maintainability.

Use Cases for Quickchart-MCP-Server

• Automated Reporting: Generate charts programmatically for daily, weekly, or monthly reports.
• Data Visualization in Applications: Integrate chart generation into web or desktop applications to display data visually.
• Dashboard Creation: Create dynamic dashboards that update charts based on real-time data.
• Educational Tools: Develop tools that help users visualize data for learning purposes.
• API Integrations: Offer chart generation as a service through an API.

FAQ about Quickchart-MCP-Server

Q: What chart types are supported? A: The server supports a wide range of Chart.js types including bar, line, pie, doughnut, radar, polarArea, scatter, bubble, radialGauge, and speedometer charts.

Q: Can I customize the charts? A: Yes, you can extensively customize charts using the Chart.js configuration format, allowing you to control labels, datasets, colors, titles, and other options.

Q: How do I get the generated chart? A: You can either get a URL to the generated chart image using the generate_chart tool or download the image directly to a local file using the download_chart tool.

Q: Is this server compatible with Claude Desktop? A: Yes, the server provides clear instructions for installation and configuration with Claude Desktop via Smithery.

Q: What is QuickChart.io? A: QuickChart.io is a service that allows you to generate chart images from Chart.js configurations via a URL, which this server leverages.

quickchart-server MCP Server

A Model Context Protocol server for generating charts using QuickChart.io

This is a TypeScript-based MCP server that provides chart generation capabilities. It allows you to create various types of charts through MCP tools.

Overview

This server integrates with QuickChart.io's URL-based chart generation service to create chart images using Chart.js configurations. Users can generate various types of charts by providing data and styling parameters, which the server converts into chart URLs or downloadable images.

Features

Tools

• generate_chart - Generate a chart URL using QuickChart.io

  • Supports multiple chart types: bar, line, pie, doughnut, radar, polarArea, scatter, bubble, radialGauge, speedometer
  • Customizable with labels, datasets, colors, and additional options
  • Returns a URL to the generated chart

• download_chart - Download a chart image to a local file

  • Takes chart configuration and output path as parameters
  • Saves the chart image to the specified location

Supported Chart Types

• Bar charts: For comparing values across categories
• Line charts: For showing trends over time
• Pie charts: For displaying proportional data
• Doughnut charts: Similar to pie charts with a hollow center
• Radar charts: For showing multivariate data
• Polar Area charts: For displaying proportional data with fixed-angle segments
• Scatter plots: For showing data point distributions
• Bubble charts: For three-dimensional data visualization
• Radial Gauge: For displaying single values within a range
• Speedometer: For speedometer-style value display

Usage

Chart Configuration

The server uses Chart.js configuration format. Here's a basic example:

{
  "type": "bar",
  "data": {
    "labels": ["January", "February", "March"],
    "datasets": [{
      "label": "Sales",
      "data": [65, 59, 80],
      "backgroundColor": "rgb(75, 192, 192)"
    }]
  },
  "options": {
    "title": {
      "display": true,
      "text": "Monthly Sales"
    }
  }
}

URL Generation

The server converts your configuration into a QuickChart URL:

https://quickchart.io/chart?c={...encoded configuration...}

Development

Install dependencies:

npm install

Build the server:

npm run build

Installation

Installing

npm install @gongrzhe/quickchart-mcp-server

Installing via Smithery

To install QuickChart Server for Claude Desktop automatically via Smithery:

npx -y @smithery/cli install @gongrzhe/quickchart-mcp-server --client claude

To use with Claude Desktop, add the server config:

On MacOS: ~/Library/Application Support/Claude/claude_desktop_config.json On Windows: %APPDATA%/Claude/claude_desktop_config.json

{
  "mcpServers": {
    "quickchart-server": {
      "command": "node",
      "args": ["/path/to/quickchart-server/build/index.js"]
    }
  }
}

or

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

Documentation References

• QuickChart Documentation
• Chart Types Reference

📜 License

This project is licensed under the MIT License.