mcp-highcharts

AIチャット（VS Code、GitHub Copilot、Claude Desktop、またはMCP Appsをサポートする任意のMCPクライアント）内で、インタラクティブなHighchartsチャートをインラインでレンダリングします。

Install in VS Code Install in 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`	ローソク足 + ボリューム + 指標
`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`	1階層下の型付き子要素
`3`	2階層下まで — 完全な再帰的Highcharts型ツリー

データソース

ライブ更新されるチャートには、data.csvURL と data.enablePolling: true を指定したHighchartsデータモジュールを使用してください。

画像エクスポート（アプリ非対応時のフォールバック）

MCP AppsをサポートしていないMCPクライアント向けに、サーバーサイドでの画像エクスポートを有効にすると、ツールレスポンスに各チャートのPNGスクリーンショットを含めることができます：

{
  "env": {
    "IMAGE_EXPORT": "true"
  }
}

チャートはPNGとしてレンダリングされ、base64画像コンテンツブロックとして返されます。対応クライアントでは、引き続きインタラクティブなMCPアプリが使用されます。

レンダリング戦略（自動）:

ローカル (Puppeteer) — highcharts-export-server がインストールされている場合、ヘッドレスブラウザを介してローカルでレンダリングされます。ネットワーク呼び出しが発生せず、最も高速です。
リモートフォールバック — ローカルが利用できない場合、チャート設定が Highcharts Export Server にPOSTされます。

ローカルレンダリングを有効にするには、オプションのピア依存関係をインストールしてください：

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

mcp-highcharts

mcp-highcharts

セットアップ

ツール

プロンプト

設定

テーマ設定

スキーマの深さ

データソース

画像エクスポート（アプリ非対応時のフォールバック）

開発

プロジェクト構造

ライセンス

Resources

Looking for Admin?

Tools

Latest Blog Posts

MCP directory API