mcp-highcharts

在 AI 聊天中内联渲染交互式 Highcharts 图表 — 适用于 VS Code、GitHub Copilot、Claude Desktop 或任何支持 MCP Apps 的 MCP 客户端。

在 VS Code 中安装在 VS Code Insiders 中安装 npm

Code_-_Insiders_15uBYM8FHt

设置

点击上方的徽章，或将其添加到您的 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 port

工具

工具	描述
`render_chart`	任意图表类型 — 折线图、柱状图、饼图、散点图、热力图、桑基图、仪表盘、树状图、词云以及 60 多种其他类型
`render_stock_chart`	带有导航器、范围选择器和 40 多种技术指标的金融图表
`render_dashboard`	包含图表、KPI 和数据网格的多组件布局
`render_map`	等值区域图、气泡地图、地图点（自动从 CDN 获取地图数据）
`render_gantt`	带有任务、依赖关系和里程碑的项目时间轴
`render_grid`	带有排序、分页和格式化的独立数据表格

所有工具均接受完整的 Highcharts Options API。

提示词

提示词	功能
`chart_from_data`	粘贴数据 → 获取最佳图表
`dashboard_layout`	构建仪表盘框架
`stock_analysis`	K 线图 + 成交量 + 指标
`comparison_chart`	并排比较模式
`project_timeline`	带有依赖关系的甘特图
`live_chart`	从数据 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" } }

深度	描述
`0`	仅属性名称 — 零上下文开销
`1` (默认)	顶级类型 + 描述 + 示例
`2`	一层类型的子级
`3`	两层深度 — 完整的递归 Highcharts 类型树

数据源

对于实时更新的图表，请使用带有 data.csvURL 和 data.enablePolling: true 的 Highcharts 数据模块。

图像导出（非 App 回退）

对于不支持 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 test

项目结构

main.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

Install Server

A

security – no known vulnerabilities

A

license - permissive license

A

quality - A tier

How are these scores calculated?

Resources

Need Help?

Related Servers

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

mcp-highcharts

mcp-highcharts

设置

工具

提示词

配置

主题

模式深度

数据源

图像导出（非 App 回退）

开发

项目结构

许可证

Resources

Looking for Admin?

Tools

Latest Blog Posts

MCP directory API