Render interactive Highcharts visualizations directly within AI chat.
mcp-highcharts
Render interactive Highcharts charts inline in AI chat — VS Code, GitHub Copilot, Claude Desktop, or any MCP client with MCP Apps support.
Setup
Click a badge above, or add to your MCP config:
{
"mcp": {
"servers": {
"highcharts": {
"command": "npx",
"args": ["-y", "mcp-highcharts@latest"]
}
}
}
}
Claude Desktop
Add to claude_desktop_config.json:
{
"mcpServers": {
"highcharts": {
"command": "npx",
"args": ["-y", "mcp-highcharts@latest"]
}
}
}
HTTP mode
npx mcp-highcharts@latest --http # http://localhost:3001/mcp
PORT=8080 npx mcp-highcharts@latest --http # custom port
Tools
| Tool | Description |
|---|---|
render_chart |
Any chart type — line, bar, pie, scatter, heatmap, sankey, gauge, treemap, wordcloud, and 60+ more |
render_stock_chart |
Financial charts with navigator, range selector, and 40+ technical indicators |
render_dashboard |
Multi-component layouts with charts, KPIs, and data grids |
render_map |
Choropleth maps, map bubbles, map points (auto-fetches map data from CDN) |
render_gantt |
Project timelines with tasks, dependencies, and milestones |
render_grid |
Standalone data tables with sorting, pagination, and formatting |
All tools accept the full Highcharts Options API. Title and subtitle accept string shorthand.
Prompts
| Prompt | What it does |
|---|---|
chart_from_data |
Paste data → get the best chart |
dashboard_layout |
Scaffold a dashboard |
stock_analysis |
Candlestick + volume + indicators |
comparison_chart |
Side-by-side comparison patterns |
project_timeline |
Gantt with dependencies |
Configuration
Theming
Charts auto-adapt to host light/dark mode. Override with environment variables:
{
"env": {
"HIGHCHARTS_THEME": "dark-unica",
"HIGHCHARTS_OPTIONS": "./my-theme.json"
}
}
HIGHCHARTS_OPTIONS accepts .json, .js, .mjs, .ts, or inline JSON.
Built-in themes: adaptive (default), avocado, brand-dark, brand-light, dark-blue, dark-green, dark-unica, gray, grid, grid-light, high-contrast-dark, high-contrast-light, sand-signika, skies, sunset
Schema detail
Controls how much type information is sent to the LLM:
{ "env": { "SCHEMA_DETAIL": "basic" } }
| Level | Description |
|---|---|
minimal |
Property names only — zero context overhead |
basic (default) |
Top-level types + descriptions + examples |
full |
Complete recursive Highcharts type tree |
Color modes
Generate monochrome palettes: "colorMode": "monochrome-blue" or any CSS color like "#7b68ee".
Data sources
Read files instead of inlining data: "dataSource": "sales.csv". Supports CSV, JSON, TSV, and HTTPS URLs. Paths are sandboxed to the workspace.
Development
npm install && npm run build && npm test
Chart types, module mappings, and schemas are auto-generated from the installed Highcharts version — just npm update highcharts and rebuild.
License
MIT
Tools (6)
render_chartRenders various chart types including line, bar, pie, scatter, heatmap, sankey, gauge, treemap, and wordcloud.render_stock_chartRenders financial charts with navigator, range selector, and technical indicators.render_dashboardCreates multi-component layouts with charts, KPIs, and data grids.render_mapRenders choropleth maps, map bubbles, and map points with auto-fetched data.render_ganttRenders project timelines with tasks, dependencies, and milestones.render_gridRenders standalone data tables with sorting, pagination, and formatting.Environment Variables
HIGHCHARTS_THEMESets the visual theme for charts (e.g., dark-unica, grid).HIGHCHARTS_OPTIONSPath to a JSON, JS, or TS file containing custom chart options.SCHEMA_DETAILControls the level of type information sent to the LLM (minimal, basic, full).Configuration
{"mcpServers": {"highcharts": {"command": "npx", "args": ["-y", "mcp-highcharts@latest"]}}}