📌Overview

Purpose: To provide a server for generating charts using QuickChart.io through a Model Context Protocol (MCP).

Overview: This TypeScript-based MCP server interfaces with QuickChart.io's chart generation service, enabling users to create customizable charts via URL configurations. It allows for the generation of various chart types by inputting data and styling parameters, ultimately producing chart URLs or downloadable images.

Key Features:

generate_chart: Allows users to generate a chart URL using QuickChart.io. It supports multiple chart types (e.g., bar, line, pie) with options for customization (labels, datasets, and colors), returning a URL to the created chart.
download_chart: Facilitates the downloading of chart images as local files, taking chart configurations and output paths as inputs to save the generated images to specified locations.

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...}

Installation

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"]
    }
  }
}

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

Development

Install dependencies:

npm install

Build the server:

npm run build

Documentation References

License

This project is licensed under the MIT License.

Quickchart-MCP-Server