MCP Chart Server

A Model Context Protocol (MCP) server that provides comprehensive chart generation capabilities. This server offers a wide variety of chart types with comprehensive Zod schema validation for type-safe chart configuration.

Claude.AI Integration (Free Running Version)

For immediate use with Claude.AI without local setup, use these public endpoints:

- Streamable HTTP: https://chart.mcp.cloudcertainty.com/mcp
- Server-Sent Events: https://chart.mcp.cloudcertainty.com/sse

Simply add either endpoint to your Claude.AI MCP configuration to start generating charts immediately.

Features

- 🎯 15+ Chart Types - Comprehensive chart library covering all major visualization needs
- 🔒 Type Safety - Full Zod schema validation for all chart configurations
- 🌐 Multiple Deployment Options - Local server, HTTP streaming, and SSE endpoints
- 🚀 Claude.AI Integration - Ready-to-use endpoints for Claude.AI integration
- 📊 Professional Charts - Support for financial, statistical, and business visualizations

Chart Types Supported

Basic Charts

- Bar Chart - Traditional bar charts with multiple datasets - Line Chart - Line charts with customizable styling and fill options - Pie Chart - Pie charts with hover effects and custom colors - Radar Chart - Multi-axis radar charts for comparative analysis - Polar Area Chart - Radial area charts for cyclical data

Advanced Charts

- Doughnut Chart - Enhanced pie charts with center labels and semi-circle support - Scatter Plot - X/Y coordinate plotting with optional trend lines - Bubble Chart - Three-dimensional data visualization with bubble sizes - OHLC Chart - Financial candlestick charts with volume and indicators

Specialized Charts

- Violin Plot - Statistical distribution visualization - Gauge Chart - Customizable gauge meters with thresholds - Radial Gauge - Simple radial progress indicators - Progress Bar - Linear progress indicators - Sparkline - Minimal trend visualization - Sankey Diagram - Flow and process visualization

Quick Start

Local Development

1. Clone the repository

   git clone https://github.com/KamranBiglari/mcp-server-chart.git

   cd mcp-server-chart

   

2. Install dependencies

   npm install

   

3. Build the project

   npm run build

   

4. Run the server

   npm start

   

Usage Examples

Basic Bar Chart

{
  "type": "bar",
  "data": {
    "labels": ["January", "February", "March", "April", "May"],
    "datasets": [
      { "label": "Sales", "data": [50, 60, 70, 180, 190] },
      { "label": "Expenses", "data": [100, 200, 300, 400, 500] }
    ]
  }
}

Financial OHLC Chart

{
  "type": "ohlc",
  "data": {
    "datasets": [
      {
        "label": "MSFT",
        "data": [
          {"x": 1459468800000, "o": 18.23, "h": 19.36, "l": 18.18, "c": 19.31}
        ],
        "color": {"up": "#26a69a", "down": "#ef5350", "unchanged": "#999"}
      }
    ]
  }
}

Advanced Doughnut Chart

{
  "type": "doughnut",
  "data": {
    "labels": ["Complete", "Remaining"],
    "datasets": [{"data": [75, 25], "backgroundColor": ["#4CAF50", "#E0E0E0"]}]
  },
  "options": {
    "circumference": 3.14159,
    "rotation": 3.14159,
    "plugins": {
      "doughnutlabel": {
        "labels": [{"text": "75%", "font": {"size": 24}}]
      }
    }
  }
}

Scatter Plot

{
  "type": "scatter",
  "data": {
    "datasets": [
      {
        "label": "Dataset 1",
        "data": [
          {"x": 2, "y": 4},
          {"x": 3, "y": 3},
          {"x": 5, "y": 8}
        ]
      }
    ]
  }
}

Configuration

MCP Client Configuration

Add to your MCP client configuration:

{
  "mcpServers": {
    "chart-server": {
      "command": "node",
      "args": ["path/to/mcp-server-chart/dist/index.js"]
    }
  }
}

Claude.AI Configuration

For Claude.AI integration, add one of these endpoints:

{
  "mcpServers": {
    "chart-server": {
      "url": "https://chart.mcp.cloudcertainty.com/mcp"
    }
  }
}

Development

Project Structure

src/
├── charts/           # Chart type definitions
│   ├── bar.ts       # Bar chart schema
│   ├── line.ts      # Line chart schema
│   ├── ohlc.ts      # OHLC chart schema
│   └── ...          # Other chart types
├── utils/           # Utility functions
│   ├── index.ts     # Zod to JSON schema conversion
│   └── schema.ts    # Common schema definitions
└── index.ts         # Main MCP server

Building

npm run build      # Build TypeScript
npm run dev        # Development mode with watch
npm run lint       # Run linting

Testing

npm test           # Run test suite
npm run test:watch # Watch mode testing

Chart Type Reference

| Chart Type | Use Case | Data Format |
|------------|----------|-------------|
| bar | Categorical comparisons | {labels: string[], datasets: {data: number[]}[]} |
| line | Trends over time | {labels: string[], datasets: {data: number[]}[]} |
| pie | Part-to-whole relationships | {labels: string[], datasets: {data: number[]}[]} |
| doughnut | Enhanced pie charts | {labels: string[], datasets: {data: number[]}[]} |
| radar | Multi-variable comparison | {labels: string[], datasets: {data: number[]}[]} |
| polarArea | Cyclical data | {labels: string[], datasets: {data: number[]}[]} |
| scatter | Correlation analysis | {datasets: {data: {x: number, y: number}[]}[]} |
| bubble | Three-dimensional data | {datasets: {data: {x: number, y: number, r: number}[]}[]} |
| ohlc | Financial data | {datasets: {data: {x: number, o: number, h: number, l: number, c: number}[]}[]} |
| violin | Statistical distributions | {labels: string[], datasets: {data: number[][]}[]} |
| gauge | KPI dashboards | {datasets: {value: number, data: number[]}[]} |
| sankey | Process flows | {datasets: {data: {from: string, to: string, flow: number}[]}[]} |

API Reference

Tools Available

All chart types are available as MCP tools with the following pattern:
- Tool name matches chart type (e.g., bar, line, ohlc)
- Input schema validates chart configuration
- Returns generated chart data

Schema Validation

Every chart type includes comprehensive Zod schemas that validate:
- Chart type and structure
- Data format and types
- Styling options
- Chart-specific configurations

Contributing

1. Fork the repository
2. Create a feature branch
3. Add your chart type or improvement
4. Include tests and documentation
5. Submit a pull request

License

MIT License - see LICENSE file for details

Support

- 📚 Documentation: Check the inline schema documentation
- 🐛 Issues: Report bugs via GitHub Issues
- 💬 Discussions: Use GitHub Discussions for questions
- 🌐 Live Demo: Try the public endpoints with Claude.AI

Roadmap

- [ ] Real-time data binding
- [ ] Custom theme support
- [ ] Export formats (PNG, SVG, PDF)
- [ ] Animation and interaction options
- [ ] Dashboard layout compositions