What is Quickchart

Quickchart-MCP-Server is a Model Context Protocol server designed for generating charts via QuickChart.io. It utilizes Chart.js configurations to create and serve various types of charts dynamically as images or URLs.

Use cases

This server can be used for visualizing data in different formats such as sales statistics, performance metrics, or any other data that benefits from graphical representation. It is ideal for developers needing charting capabilities in applications or reports.

How to use

To use the server, configure the chart with Chart.js settings and make use of the tools provided, such as generate_chart for creating chart URLs and download_chart for saving chart images locally. A simple JSON object defines the chart type, data, and options.

Key features

Key features include support for multiple chart types, customization options for data and styling, URL generation for web integration, and image downloading capabilities. The server is built on TypeScript and leverages QuickChart.io for rendering charts.

Where to use

Quickchart-MCP-Server can be integrated into web applications, dashboards, and reporting tools that require dynamic chart generation. It is also suitable for usage in environments that support Model Context Protocol servers.

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.