Gongrzhe Quickchart MCP Server

🚀 Quickchart-server MCP Server

This is a server based on the Model Context Protocol (MCP) for generating charts using QuickChart.io. Written in TypeScript, this server provides the functionality to generate various types of charts through MCP tools.

🚀 Quick Start

This server integrates with QuickChart.io's URL-based chart generation service, leveraging Chart.js configurations to generate chart images. Users can generate different types of charts by providing data and style parameters, and the server will convert them into chart URLs or downloadable images.

✨ Features

Tools

• generate_chart - Generate a chart URL via QuickChart.io

  • Supports multiple chart types: Bar charts, Line charts, Pie charts, Doughnut charts, Radar charts, Polar area charts, Scatter plots, Bubble charts, Radial gauge charts, Speedometers
  • Allows customization of labels, datasets, colors, and additional options
  • Returns the generated chart URL

• download_chart - Download the chart image to a local file

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

Supported Chart Types

• Bar charts: Used for comparing data across different categories.
• Line charts: Suitable for showing trends in data over time.
• Pie charts: Display the proportion of each part in the whole.
• Doughnut charts: Similar to pie charts but can more clearly compare multiple categories.
• Radar charts: Used for comparing data across multiple variables.
• Polar area charts: Show the magnitude of data using the radius.
• Scatter plots: Display the relationship between two variables.
• Bubble charts: Show data for three variables on a two-dimensional plane.
• Radial gauge charts: Present the value of an indicator in a gauge format.
• Speedometers: Used to show a data range, similar to a tachometer in a car.

📦 Installation

Install with npm

npm install quickchart-server-mcp

Use in package.json

Add the following dependency to your project:

{
  "dependencies": {
    "@gongrzhe/quickchart-server-mcp": "^1.0.0"
  }
}

💻 Usage Examples

Basic Usage

const server = new QuickChartServer({
  port: 3000,
  chartType: 'bar',
  data: {
    labels: ['January', 'February', 'March'],
    datasets: [{
      label: 'Sales',
      data: [65, 59, 80]
    }]
  }
});

Advanced Usage

const server = new QuickChartServer({
  port: 3000,
  chartType: 'line',
  data: {
    labels: ['2017', '2018', '2019'],
    datasets: [{
      label: 'Revenue',
      data: [12, 19, 3],
      borderColor: '#ff0000'
    }, {
      label: 'Expenses',
      data: [5, 6, 7],
      borderColor: '#00ff00'
    }]
  },
  options: {
    responsive: true,
    scales: {
      y: {
        beginAtZero: true
      }
    }
  }
});

📚 Documentation

• QuickChart Documentation
• Chart Type Reference

📄 License

This project is licensed under the MIT License.