ApexCharts

com.apexchartsv0.9.3更新於 Oct 7, 2026

Generates and validates configs for ApexCharts charts, grid, gantt, tree, sankey, stock and maps.

已驗證Streamable HTTP可網頁執行Developer ToolsData & Analytics

概覽

AI 產生的概覽

讓助理產生並驗證 ApexCharts 的圖表、甘特圖、樹狀圖、桑基圖、表格、股票圖與地圖設定，並查閱官方參考資料。

功能
此伺服器為七個 ApexCharts 產品提供依產品命名空間的工具。每個產品都有 generate_config，可依簡短說明產生有效設定；validate_config 依規則集檢查現有設定並回傳結構化問題；get_reference 可隨需讀取該產品的知識庫。圖表工具另提供支援的圖表類型目錄，還有一個中繼工具列出各產品、工具名稱及其對應的上游函式庫版本。
適用情境
適合助理撰寫或除錯 ApexCharts 視覺化、需要正確的選項名稱、資料格式與規則檢查而非猜測的情境。可用於圖表、甘特圖、樹狀圖、桑基圖、表格、股票圖與地圖的設定工作，包括排查無法呈現的設定。
執行需求
可使用託管的 Streamable HTTP 端點，或透過 npm 套件 apexcharts-mcp 在本機執行，需要 Node.js。不需要驗證、API 金鑰或環境變數。選用設定包括以 APEXCHARTS_MCP_PRODUCTS 限制載入哪些產品；HTTP 模式下還有連接埠、主機、允許的主機名稱與允許的來源。
安裝前請注意
工具被描述為唯讀且無狀態，不會寫入或刪除資料。HTTP 模式預設綁定 127.0.0.1；若要對外暴露，需設定 APEXCHARTS_MCP_ALLOWED_HOSTS，若瀏覽器會呼叫還需設定 APEXCHARTS_MCP_ALLOWED_ORIGINS。使用託管端點時，你的設定與提問會傳送給第三方服務。

安裝

在 SourceWeft 中

  1. 開啟 儀表板中的 ApexCharts，將其新增到工作區。
  2. 為需要使用其工具的對話啟用該服務。

Web executable，透過 Streamable HTTP。 遠端服務在工作區中設定後即可從網頁執行環境執行。

其他 MCP 客戶端

把它新增到你客戶端的 mcpServers 設定中。

{
  "mcpServers": {
    "mcp": {
      "type": "http",
      "url": "https://mcp.apexcharts.com/mcp"
    }
  }
}

README

apexcharts-mcp

A Model Context Protocol server that gives AI assistants like Claude expert-level help with the ApexCharts ecosystem: charts, gantt, tree, sankey, grid, stock, and maps. It generates valid configs, catches common mistakes, and serves the official knowledge base for each product on demand, so the AI gets your visualization right the first time.

One MCP, seven products. Tools are namespaced per product (apexcharts_*, apexgantt_*, apextree_*, apexsankey_*, apexgrid_*, apexstock_*, apexmaps_*) so you can use any combination together.

Install

Pick your editor / client. You only need to do this once.

Hosted server (nothing to install)

The quickest way: point your client at the hosted server, https://mcp.apexcharts.com/mcp. It needs no Node.js and stays on the latest release.

Claude Code

bash
claude mcp add --transport http apexcharts https://mcp.apexcharts.com/mcp

Cursor, in ~/.cursor/mcp.json:

json
{  "mcpServers": {    "apexcharts": {      "url": "https://mcp.apexcharts.com/mcp"    }  }}

VS Code, in .vscode/mcp.json:

json
{  "servers": {    "apexcharts": {      "type": "http",      "url": "https://mcp.apexcharts.com/mcp"    }  }}

Any other client that accepts a remote MCP server URL (Streamable HTTP) connects the same way. To run the server on your own machine instead, use one of the local installs below.

Claude Code

bash
claude mcp add apexcharts -- npx -y apexcharts-mcp

Claude Desktop

Add to claude_desktop_config.json:

json
{  "mcpServers": {    "apexcharts": {      "command": "npx",      "args": ["-y", "apexcharts-mcp"]    }  }}

Cursor

Add to ~/.cursor/mcp.json:

json
{  "mcpServers": {    "apexcharts": {      "command": "npx",      "args": ["-y", "apexcharts-mcp"]    }  }}

After installing, restart the client. Your AI assistant now has tools for every ApexCharts product, with no further commands needed.

What you can ask the AI

Once installed, the assistant uses the server's tools automatically. Things you can ask:

  • "Build me a stacked area chart of monthly revenue across three regions."
  • "Here's my pie chart config — why isn't it rendering?" (paste the config)
  • "What data format does ApexGantt expect for dependencies?"
  • "Show me the recursive node shape ApexTree uses."
  • "How do I configure layer ordering in ApexSankey?"
  • "Explain cellTemplate in apex-grid and give me an example."
  • "Map unemployment by US state as a choropleth with ApexMaps."

The AI decides which tool to call. You don't invoke them directly.

Tools

ProductTools
metaapexcharts_list_products
apexchartsapexcharts_generate_config, apexcharts_validate_config, apexcharts_list_types, apexcharts_get_reference
apexganttapexgantt_generate_config, apexgantt_validate_config, apexgantt_get_reference
apextreeapextree_generate_config, apextree_validate_config, apextree_get_reference
apexsankeyapexsankey_generate_config, apexsankey_validate_config, apexsankey_get_reference
apexgridapexgrid_generate_config, apexgrid_validate_config, apexgrid_get_reference
apexstockapexstock_generate_config, apexstock_validate_config, apexstock_get_reference
apexmapsapexmaps_generate_config, apexmaps_validate_config, apexmaps_get_reference

Every product exposes generate_config (build a valid config from a short spec) and validate_config (check a config against its skill's rules and return structured issues), plus get_reference to read that product's knowledge base on demand. The chart tools add apexcharts_list_types (a typed catalog of the 29 supported chart types, including the v6 additions violin, funnel, pyramid, gauge, unit, waffle, sunburst and histogram, the v7.1 additions waterfall, dumbbell, streamgraph and raincloud, and the v7.6 addition icicle); apexcharts_generate_config covers all 29 and apexcharts_validate_config checks against 39 rules. apexcharts_list_products is a meta tool that lists the products this server exposes, their tool names, and the upstream library version each product's guidance targets.

Limiting which products load

By default, all seven products' tools are registered. To load only a subset, set APEXCHARTS_MCP_PRODUCTS to a comma-separated list of product ids:

json
{  "mcpServers": {    "apexcharts": {      "command": "npx",      "args": ["-y", "apexcharts-mcp"],      "env": { "APEXCHARTS_MCP_PRODUCTS": "charts,gantt" }    }  }}

Valid ids: charts, gantt, tree, sankey, grid, stock, maps. Unknown ids are skipped with a stderr warning; the server still starts.

Running over HTTP

The install commands above run the server locally over stdio. To serve it over the network instead (for a shared team server, or a client that only takes a URL), start it with --http:

bash
npx -y apexcharts-mcp --http --port 3000

It speaks Streamable HTTP at /mcp and answers a dependency-free health check at /healthz. Connect a client to it:

bash
claude mcp add --transport http apexcharts http://localhost:3000/mcp

The server is stateless and answers every request with plain JSON. Every tool is a quick read-only call, so it keeps no sessions and opens no long-lived streams: GET and DELETE on /mcp return 405, which the spec defines as "this server offers neither". Nothing outlives a single request, so it runs behind any load balancer without sticky sessions or a raised idle timeout.

SettingDefaultMeaning
--port or PORT3000Port to listen on
--host or APEXCHARTS_MCP_HOST127.0.0.1Address to bind. Use 0.0.0.0 in a container
APEXCHARTS_MCP_ALLOWED_HOSTSlocalhost,127.0.0.1,[::1]Hostnames /mcp answers for (DNS-rebinding defence), or *. Set it to your public hostname when exposing the server
APEXCHARTS_MCP_ALLOWED_ORIGINSnoneBrowser origins that may call /mcp (CORS), or *. Requests without an Origin header, which is every IDE and desktop client, are always accepted
APEXCHARTS_MCP_PRODUCTSallSame as in stdio mode

Request bodies are capped at 1 MiB. Each request writes one JSON line to stdout naming the JSON-RPC method and tool (never the arguments); diagnostics go to stderr. SIGTERM lets in-flight requests finish before exiting.

A Dockerfile builds a production image that listens on port 3000 inside the container:

bash
docker build -t apexcharts-mcp .docker run -d -p 127.0.0.1:3100:3000 --memory=256m \  -e APEXCHARTS_MCP_ALLOWED_HOSTS=mcp.example.com,localhost apexcharts-mcp

Configure the container through environment variables rather than flags; its HEALTHCHECK reads PORT.

Knowledge base

Authoritative guidance comes from the per-product skill packages on npm:

  • apexcharts-skill — SKILL.md + cartesian/bar/financial/circular/grid/radar references + the feature platform and its v7 bundle tiers, tree-shaking, SSR, framework wrappers
  • apexgantt-skill — task data, dependencies, columns/toolbar, events, editing (CRUD/undo/calendar), the task-list grid (sort/filter/group), interaction (UI state, draw-to-create, export), framework wrappers
  • apextree-skill — data format, graph API, framework wrappers
  • apexsankey-skill — data format, styling/interaction, framework wrappers
  • apexgrid-skill — columns/templates, data pipeline, sort/filter, state and interaction features (row pinning/reordering, undo-redo, validators, localization), framework integration, vanilla JS
  • apexstock-skill: OHLC data format, technical indicators, streaming/appendData, trading overlays, the analysis workspace (range statistics, drawdown, measurements, comparison), state and export, theming, framework wrappers
  • apexmaps-skill: series data formats, geo joins, geometry registry, projections, scales, drilldown, framework wrappers

They're regular dependencies — bump the version in this repo's package.json to pick up upstream improvements. Each skill repo is the source of truth for its own docs.

Contributing

For working on apexcharts-mcp itself.

bash
git clone https://github.com/apexcharts/apexcharts-mcp.gitcd apexcharts-mcpnpm installnpm run build

This is an npm workspace monorepo:

apexcharts-mcp/  src/index.ts            # bootstrap: reads APEXCHARTS_MCP_PRODUCTS, wires up products, picks stdio or --http  Dockerfile              # production image for HTTP mode  packages/    mcp-core/             # shared types and the reference-reader factory    mcp-http/             # stateless Streamable HTTP transport, /healthz, Host/Origin policy    mcp-charts/           # apexcharts_* tools    mcp-gantt/            # apexgantt_* tools    mcp-tree/             # apextree_* tools    mcp-sankey/           # apexsankey_* tools    mcp-grid/             # apexgrid_* tools    mcp-stock/            # apexstock_* tools    mcp-maps/             # apexmaps_* tools

The build runs tsc -b across all workspaces, then bundles src/index.ts (plus all workspace packages) into a single dist/index.js via esbuild. Skill packages stay external because they resolve file paths via import.meta.url.

Run the server directly (for manual testing):

bash
node dist/index.js          # stdionode dist/index.js --http   # HTTP on 127.0.0.1:3000

Point your client at the local build instead of the published package:

bash
claude mcp add apexcharts -- node /absolute/path/to/apexcharts-mcp/dist/index.js

Common scripts:

bash
npm run dev        # tsc -b --watchnpm test           # vitestnpm run typecheck  # tsc -bnpm run clean      # remove all dist/ output

Keeping the bundled knowledge base honest (see CLAUDE.md for the full loop):

bash
npm run check:versions       # is any upstream library ahead of what its skill was verified against?npm run check:chart-types    # hard gate: every chart type the library ships is documented and supportednpm run check:surface-delta  # what shipped since the pin that the docs never mentionnpm run verify:skills        # signal: doc examples referencing names the types don't have

License

MIT

來源：README.md，提交 ea4966d

工具

0
工具後設資料尚未被收錄。

版本歷史

1
  1. v0.9.3最新Oct 7, 2026