Bencockin/highcharts_mcp
If you are the rightful owner of highcharts_mcp and would like to certify it and/or have it hosted online, please leave a comment on the right or send an email to dayong@mcphub.com.
The Highcharts Dashboards MCP Server is an advanced server that enables AI agents to generate interactive, analytics-grade dashboards using Highcharts.
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 and data grids — all as self-contained HTML artifacts.
🚀 Features
Dashboard + Grid Integration
The core capability: charts and a Grid table share a single DataPool connector, enabling native Highcharts synchronisation with zero custom JavaScript.
| Sync Type | What it does |
|---|---|
highlight | Hovering a chart point highlights the corresponding Grid row, and vice versa |
extremes | Zooming or panning a chart scopes the Grid to show only matching rows |
visibility | Toggling a legend series shows/hides the corresponding Grid rows |
| Two-way editing | Edit a Grid cell → chart updates live. Drag a chart point → Grid row updates |
Chart Types
- Line – time-series trends with zoom sync
- Column – categorical comparisons
- Pie – proportional distribution
- Scatter – correlation analysis
- KPI – glanceable headline metrics
Grid Features
- Inline column filters (type-aware: text, number, date, boolean)
- Click-to-sort headers with multi-column sort (Shift+click)
- Drag-to-resize columns
- Alternating row stripes + hover highlight
- Pagination
- In-cell editing with chart propagation
- Full CSS variable theming
Data Ingestion — Any Format
Pass data as a remote URL or inline in any of these formats:
- CSV / TSV
- Markdown table (
| col | col |) - JSON array of objects (
[{"col": val}, ...])
Auto-detects column types (string, number, boolean, date) to configure appropriate filters.
🛠️ Architecture
┌─────────────────────────────────────────────┐
│ DashboardRequest │
│ │
│ DataPool Connector (shared) │
│ │ │
│ ├── KPI components (row 1) │
│ ├── Chart components (rows 2–N) │
│ └── Grid Pro component (last row) │
│ ↕ highlight / extremes / vis │
└─────────────────────────────────────────────┘
Two MCP tools are exposed:
generate_highcharts_dashboard— charts + optional Grid, fully syncedgenerate_highcharts_grid— standalone table only (no charts needed)
📦 Installation & Setup
1. Clone and install
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 ~/Library/Application Support/Claude/claude_desktop_config.json and add:
{
"mcpServers": {
"highcharts": {
"command": "/Users/YOUR_USER/highcharts_mcp/venv/bin/python",
"args": ["/Users/YOUR_USER/highcharts_mcp/server.py"]
}
}
}
3. Restart Claude Desktop
Quit and reopen. Look for the 🔌 icon confirming the MCP is connected.
💡 Usage Examples
Dashboard with synced Grid
Create a hiring pipeline dashboard from this data:
[paste CSV or Markdown table]
Include a column chart of candidates by stage, a KPI for total pipeline,
and add the full data grid below so I can filter by recruiter.
Claude will call generate_highcharts_dashboard with include_grid=True.
Hovering a bar in the chart highlights the matching rows in the grid.
Dashboard with two-way editing
Create a forecast dashboard. I want to be able to drag points on the chart
to adjust values, and have the table update automatically.
Claude will set allow_editing=True on the GridConfig, enabling live drag-drop
on chart points with instant Grid propagation.
Standalone Grid
Create an interactive table from this Markdown data. Sort by Score descending,
add inline filters on every column, and use a dark navy header.
Claude will call generate_highcharts_grid with appropriate theme and column config.
🔑 Key Options
DashboardRequest
| Option | Type | Description |
|---|---|---|
title | string | Dashboard title |
data_url | string | Remote CSV/JSON URL |
data_inline | string | CSV, Markdown table, or JSON array |
charts | ChartConfig[] | Chart components to include |
include_grid | bool | Add Grid Pro below charts |
grid | GridConfig | Grid configuration (see below) |
theme | GridTheme | Visual theme |
GridConfig (used inside Dashboard)
| Option | Type | Description |
|---|---|---|
columns | ColumnConfig[] | Per-column overrides |
allow_editing | bool | Enable two-way cell editing |
rows_per_page | int | Enable pagination |
sort_by | string | Pre-sort column |
height | int | Grid cell height in px |
ColumnConfig
| Option | Type | Description |
|---|---|---|
id | string | Must match data column name |
sortable | bool | Allow sorting (default: true) |
filterable | bool | Enable filter (default: true) |
filter_inline | bool | Inline vs popup filter (default: inline) |
editable | bool | Allow cell editing |
format | string | Highcharts format string e.g. £{value:,.0f} |
width | int | Fixed column width in px |
hidden | bool | Exclude from grid |
⚠️ Script Load Order
When using Dashboard + Grid, the load order is mandatory:
<!-- 1. Grid Pro — must come BEFORE Dashboards -->
<script src="https://cdn.jsdelivr.net/npm/@highcharts/grid-pro/grid-pro.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@highcharts/grid-pro/css/grid-pro.css" />
<!-- 2. Highcharts Core -->
<script src="https://code.highcharts.com/highcharts.js"></script>
<!-- 3. Dashboards -->
<script src="https://code.highcharts.com/dashboards/dashboards.js"></script>
<script src="https://code.highcharts.com/dashboards/modules/layout.js"></script>
<link rel="stylesheet" href="https://code.highcharts.com/dashboards/css/dashboards.css" />
<!-- 4. Optional — only when allow_editing=True -->
<script src="https://code.highcharts.com/modules/draggable-points.js"></script>
The server handles this automatically.
📄 License
MIT