在 AI 聊天中内联渲染交互式 Highcharts 图表 — 适用于 VS Code、GitHub Copilot、Claude Desktop 或任何支持 MCP Apps 的 MCP 客户端。
点击上方的徽章，或将其添加到您的 MCP 配置中：
{
"mcp": {
"servers": {
"highcharts": {
"command": "npx",
"args": ["-y", "mcp-highcharts@latest"]
}
}
}
}添加到 claude_desktop_config.json：
{
"mcpServers": {
"highcharts": {
"command": "npx",
"args": ["-y", "mcp-highcharts@latest"]
}
}
}npx mcp-highcharts@latest --http # http://localhost:3001/mcp
PORT=8080 npx mcp-highcharts@latest --http # custom portRelated MCP server: Chart-Output MCP Server
工具 | 描述 |
| 任意图表类型 — 折线图、柱状图、饼图、散点图、热力图、桑基图、仪表盘、树状图、词云以及 60 多种其他类型 |
| 带有导航器、范围选择器和 40 多种技术指标的金融图表 |
| 包含图表、KPI 和数据网格的多组件布局 |
| 等值区域图、气泡地图、地图点（自动从 CDN 获取地图数据） |
| 带有任务、依赖关系和里程碑的项目时间轴 |
| 带有排序、分页和格式化的独立数据表格 |
所有工具均接受完整的 Highcharts Options API。
提示词 | 功能 |
| 粘贴数据 → 获取最佳图表 |
| 构建仪表盘框架 |
| K 线图 + 成交量 + 指标 |
| 并排比较模式 |
| 带有依赖关系的甘特图 |
| 从数据 URL 获取实时更新的图表 |
图表会自动适应宿主的浅色/深色模式。可通过环境变量进行覆盖：
{
"env": {
"HIGHCHARTS_THEME": "dark-unica",
"HIGHCHARTS_OPTIONS": "./my-theme.json"
}
}HIGHCHARTS_OPTIONS 接受 .json、.js、.mjs、.ts 或内联 JSON。
内置主题： adaptive (默认), 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
控制发送给 LLM 的类型信息量：
{ "env": { "SCHEMA_DEPTH": "1" } }深度 | 描述 |
| 仅属性名称 — 零上下文开销 |
| 顶级类型 + 描述 + 示例 |
| 一层类型的子级 |
| 两层深度 — 完整的递归 Highcharts 类型树 |
对于实时更新的图表，请使用带有 data.csvURL 和 data.enablePolling: true 的 Highcharts 数据模块。
对于不支持 MCP Apps 的 MCP 客户端，请启用服务端图像导出，以便在工具响应中包含每张图表的 PNG 截图：
{
"env": {
"IMAGE_EXPORT": "true"
}
}图表将渲染为 PNG 并作为 base64 图像内容块返回。交互式 MCP 应用仍会提供给支持的客户端。
渲染策略（自动）：
本地 (Puppeteer) — 如果安装了 highcharts-export-server，图表将通过无头浏览器在本地渲染。无网络调用，速度最快。
远程回退 — 如果本地不可用，图表配置将 POST 到 Highcharts Export Server。
要启用本地渲染，请安装可选的对等依赖项：
npm install highcharts-export-server要使用自定义远程导出服务器：
{
"env": {
"IMAGE_EXPORT": "true",
"EXPORT_SERVER_URL": "https://your-export-server.example.com/"
}
}您也可以通过编程方式启用它：createServer({ imageExport: true })。
注意： 图像导出适用于标准图表、股票图表和甘特图。仪表盘、数据网格以及带有基于字符串的地图键（例如
"custom/world"）的地图无法导出，并将返回纯文本结果。
npm install
node scripts/generate-from-tree.mjs --multi # generate Zod schemas at depths 0, 1, 2
npm run build
npm testmain.ts Entry point (stdio + HTTP transports)
server.ts MCP server — tool registrations and handlers
src/
export-image.ts Server-side PNG export (local Puppeteer + remote fallback)
input-schema.ts Depth-based schema selection + LLM-friendly overrides
mcp-app.ts Client-side Highcharts rendering
module-loader.ts Dynamic Highcharts module loading
generated/ Auto-generated from Highcharts API (do not edit)
highcharts-depth-{0,1,2}.gen.ts Zod schemas at each depth
module-map.json Chart type → Highcharts module mapping
scripts/
generate-from-tree.mjs Generate Zod schemas from Highcharts tree.json
generate-module-map.mjs Generate module-map.json from Highcharts
example-providers.mjs Example extraction for schema generation
measure-schema.ts Measure tool context size at each depth图表类型、模块映射和模式均根据已安装的 Highcharts 版本自动生成 — 只需运行 npm update highcharts 并重新生成即可。
MIT
Unclaimed servers have limited discoverability.
If you are the server author, to access and configure the admin panel.
Renders interactive Chart.js charts and dashboards inline in AI conversations.
Provide real-time data querying and visualization by integrating Tako with your agents. Generate o…
Give your AI assistant access to real Helm chart data. No more hallucinated values.yaml files.
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/austenstone/mcp-highcharts'
If you have feedback or need assistance with the MCP directory API, please join our Discord server