Quickchart

🚀 Quickchart-server MCP Server

A Model Context Protocol (MCP) server for generating charts via QuickChart.io.

This TypeScript-based MCP server offers chart generation capabilities. It enables you to generate various types of charts using data and style parameters through MCP tools.

🚀 Quick Start

This server integrates with QuickChart.io's URL-based chart generation feature, leveraging Chart.js configurations to generate chart images. Users can create different types of charts by providing data and style parameters, and the server will convert these parameters 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, polar area, scatter, bubble, radial gauge, speedometer
  • Allows customization of labels, datasets, colors, and additional options
  • Returns the URL of the generated chart

• 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 Chart: Used for comparing values of different categories
• Line Chart: Used for showing trends over time
• Pie Chart: Used for presenting proportional data
• Doughnut Chart: Similar to a pie chart but with a blank center
• Radar Chart: Used for displaying multivariate data
• Polar Area Chart: Used for showing proportional data in fixed angular segments
• Scatter Chart: Used for showing relationships between data points
• Bubble Chart: Used for presenting three-dimensional data through the size, color, and position of bubbles
• Radial Gauge: Used for displaying measurement indicators
• Speedometer: Used for showing real-time speed or status

💻 Usage Examples

Basic Usage

{
  "type": "bar", // Chart type
  "data": {
    "labels": ["A", "B", "C"], // X-axis labels
    "datasets": [
      {
        "label": "Dataset 1",
        "data": [65, 59, 80], // Data values
        "backgroundColor": "#FF6B6B" // Data background color
      },
      {
        "label": "Dataset 2",
        "data": [28, 48, 40],
        "backgroundColor": "#4ECDC4"
      }
    ]
  },
  "options": {
    "title": {
      "text": "Example Chart", // Chart title
      "position": "top" // Title position
    },
    "scales": {
      "y": {
        "beginAtZero": true // Y-axis starts from zero
      }
    }
  }
}

📚 Documentation

Development Guide

Install Dependencies

Install the required dependency packages using npm or yarn:

npm install chart.js quickchart
# Or
yarn add chart.js quickchart

Example Code

const { QuickChart } = require('quickchart');

async function generateChart() {
  const config = {
    type: 'bar',
    data: {
      labels: ['A', 'B', 'C'],
      datasets: [{
        label: 'Dataset 1',
        data: [65, 59, 80],
        backgroundColor: '#FF6B6B'
      }]
    }
  };

  const chartUrl = await QuickChart.create(config);
  console.log('Chart URL:', chartUrl);
}

generateChart();

Installation Instructions

Method 1: Using npm or yarn

npm install quickchart-server
# Or
yarn add quickchart-server

Method 2: Using CDN

Include in your HTML file:

<script src="https://cdn.jsdelivr.net/npm/quickchart@latest/dist/index.umd.js"></script>

Configuration Example

const { QuickChartServer } = require('quickchart-server');

const server = new QuickChartServer({
  port: 3000, // Server port
  width: 800, // Chart width
  height: 600 // Chart height
});

server.start();

Reference Documentation

• QuickChart Documentation
• Chart Type Reference

📄 License

This project is licensed under the MIT License.