Bencockin/highcharts_mcp

Highcharts Dashboards MCP Server

An advanced Model Context Protocol (MCP) server that enables AI agents (such as Claude Desktop) to generate analytics-grade, interactive dashboards.

Unlike standard static chart generation, this server orchestrates a Highcharts Dashboard using a DataPool architecture, enabling client-side filtering and synchronisation between charts without re-prompting the LLM.

🚀 Features

• Dynamic Orchestration
  Generates the JSON schema for Highcharts Dashboards rather than static images.

• DataPool Architecture
  Separates data fetching from visualisation, allowing multiple charts to consume the same data source efficiently.

• 5+ Supported Chart Types

  • Line – Time-series trends with zoom synchronisation.
  • Column – Categorical comparisons with drill-down capabilities.
  • Pie – Proportional distribution with key-based mapping.
  • Scatter – Correlation analysis with highlight synchronisation.
  • KPI – “Glanceable” metrics for headers.

• Interactive Filtering
  Injects custom HTML/JS components to filter data at runtime (e.g. “Filter by Region”) using Highcharts DataModifiers.

• Synchronisation
  Built-in support for highlight, visibility, and extremes syncing across all components.

🛠️ Architecture

This server implements a DataPool-first approach:

1. The Server
   Built with FastMCP and Pydantic for strict schema validation.

2. The Transport
   Communicates via stdio (standard input/output) for secure local execution.

3. The Output
   Returns a strictly formatted JSON configuration that defines:

   • A DataPool with CSV/JSON connectors
   • A GUI layout (rows/cells)
   • A list of components mapped to the connectors

📦 Installation & Setup

1. Clone the repository and create a virtual environment

git clone https://github.com/Bencockin/highcharts_mcp.git
cd highcharts_mcp

python3 -m venv venv
source venv/bin/activate

pip install -r requirements.txt

2. Configure Claude Desktop

Open your config file:

~/Library/Application\ Support/Claude/claude_desktop_config.json

Add this entry (update the paths to match your user folder):

{
  "mcpServers": {
    "highcharts": {
      "command": "/Users/YOUR_USER/highcharts_mcp/venv/bin/python",
      "args": [
        "/Users/YOUR_USER/highcharts_mcp/server.py"
      ]
    }
  }
}

3. Restart Claude

Quit and reopen Claude Desktop. Look for the 🔌 icon.

💡 Usage Example

Prompt:

"Create a dashboard for Global Sales using this data: https://www.google.com/search?q=https://demo-live-data.highcharts.com/vs-sales.json. I need a Line chart for trends, a Pie chart for regional split, and a KPI for total revenue. Please add a filter for the 'Region' column."

What happens:

• Claude sends the request to the MCP server.

• The Server constructs the valid Highcharts JSON with a Filter modifier.

• Claude renders the dashboard artifacts.

You can use the dropdown in the dashboard to filter data instantly.

📄 License

MIT