Let Claude Build Your Charts: the ApexCharts MCP Walkthrough

Ask any AI assistant for an ApexCharts chart and it will confidently hand you code. About half the time that code renders blank, because the assistant guessed at a detail it only half-remembers: the wrong series shape for a pie chart, a missing render() call, or a formatter with the wrong signature. The ApexCharts MCP server fixes this by giving the assistant real tools instead of memory. It generates a valid config, validates it against documented rules, and serves the official knowledge base on demand.

The fastest way to see it: in Claude Code, run claude mcp add apexcharts -- npx -y apexcharts-mcp, restart, and ask for a chart. The rest of this post walks through exactly what happens next, using the real output the server returned while we wrote this.

Key takeaways

• The MCP server gives an AI assistant four tools: generate a config, validate a config, list chart types, and read the knowledge base. The assistant calls them automatically once connected.
• Validation is the part competitors do not have. The server checks a config against 15 rules and returns structured fixes, so bad series shapes and out-of-range values are caught before the code reaches your app.
• Setup is one line and local. claude mcp add apexcharts -- npx -y apexcharts-mcp for Claude Code, or a small JSON block for Claude Desktop and Cursor. No account, no API key.
• One server covers the whole family: ApexCharts, ApexGrid, ApexGantt, ApexTree, ApexSankey, and ApexStock, each reporting the library version its guidance was verified against.
• The MCP server and skill packages are free and open source (MIT).

What is the ApexCharts MCP server?

MCP (Model Context Protocol) is an open standard that lets an AI assistant call external tools during a conversation. Instead of relying on what the model memorized during training, the assistant can ask a live server for the right answer. The apexcharts-mcp server is that live server for ApexCharts.

For the charts library it exposes four tools:

Tool	What it does
generate_chart_config	Builds a minimal valid options object for any of 16 chart types, with the correct series-data format and placeholder data.
validate_chart_config	Checks a config against 15 rules from the ApexCharts skill (wrong series shape, radialBar out of range, hex colors without #, conflicting tooltip flags) and returns structured fixes.
list_chart_types	Returns every supported chart type with its series format and data shape, filterable by family.
get_reference	Reads the bundled knowledge base: SKILL.md plus per-family docs for every chart type.

The same server also registers tool sets for ApexGrid, ApexGantt, ApexTree, ApexSankey, and ApexStock, so a single connection covers all six libraries.

How do I connect it?

You do this once per client, then forget about it.

Claude Code:

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

Claude Desktop (add to claude_desktop_config.json) or Cursor (add to ~/.cursor/mcp.json):

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

Restart the client after adding it. The assistant now has the ApexCharts tools and will reach for them on its own. The full client list and options are in the MCP server docs.

A real walkthrough

Here is an actual session. We asked for a chart, and the assistant used the server's tools to build it. Every block below is the real tool output.

The request

Build me a stacked area chart of monthly revenue across three regions for the first half of 2025.

Step 1: the assistant checks the right format

Before writing anything, the assistant confirms how an area chart wants its data by calling list_chart_types. The relevant part of the response:

{
  "type": "area",
  "name": "Area",
  "seriesFormat": "axis",
  "dataFormat": "[{ name, data: [number | null] }] or [{ name, data: [{ x, y }] }]",
  "referenceFile": "cartesian-charts.md"
}

This is the step that prevents the most common failure. The assistant now knows an area chart takes the axis series format, not the flat number array a pie chart wants, so it will not mix them up.

Step 2: generate a valid config

Next the assistant calls generate_chart_config with the type, the stacking flag, and the month categories. The server returns a complete, valid skeleton with placeholder data:

{
  "chart": { "type": "area", "height": 350, "stacked": true },
  "title": { "text": "Monthly Revenue by Region" },
  "series": [
    { "name": "Series 1", "data": [30, 40, 35, 50, 49, 60, 70] }
  ],
  "xaxis": { "categories": ["Jan", "Feb", "Mar", "Apr", "May", "Jun"] }
}

The structure is correct out of the box: chart.type is area, stacked is set, the series uses the axis format, and the x-axis has categories. The assistant swaps the placeholder for your real three-region data and you get a chart that renders on the first try:

That chart is the generated config filled with real numbers, rendered live on this page. No back-and-forth, no blank canvas.

Step 3: the validator catches a mistake

The generation step is useful, but the validator is what makes this different from a chatbot that only retrieves docs. Say you already have a pie chart config from somewhere else and it renders blank. A naive assistant often produces this, copying the axis format it uses for line and bar charts:

// Renders blank: pie charts do not take the axis series format
{
  chart: { type: 'pie' },
  series: [
    { name: 'Desktop', data: [44] },
    { name: 'Mobile', data: [55] },
    { name: 'Tablet', data: [13] }
  ],
  labels: ['Desktop', 'Mobile', 'Tablet']
}

Pass that to validate_chart_config and it does not just say "invalid." It returns ok: false with a structured issue for each problem: the rule that was broken, the path to the offending field, a plain-language message, and a fix hint. Here the rule is the wrong series shape: pie, donut, polar area, and radialBar all take a flat array of numbers plus a labels array, not axis series. The corrected config the assistant writes back:

// Correct: a flat number array plus labels
{
  chart: { type: 'pie' },
  series: [44, 55, 13],
  labels: ['Desktop', 'Mobile', 'Tablet']
}

The assistant applies the fix and moves on, without you ever pasting broken code into your app and wondering why the canvas is empty.

Why this beats pasting into a raw chatbot

A plain chatbot answers from memory, and its memory of a specific library's API is fuzzy. The MCP server changes three things:

• It validates before you paste. The validate_chart_config tool is the direct equivalent of a linter for AI-generated chart code. It catches the wrong series shape for a chart type, radialBar values outside 0 to 100, hex colors missing a #, and conflicting options, and it returns a fix rather than a vague warning.
• Its knowledge is versioned, not remembered. Calling get_reference with no arguments lists the bundled knowledge base, ten files covering every chart family plus tree-shaking, server-side rendering, and framework wrappers. The charts guidance reports which library version it was verified against (apexcharts 5.15.2 at the time of writing), so the assistant is working from current docs, not a training snapshot of unknown age.
• It covers the whole family from one connection. The same server answers for grids, Gantt charts, trees, Sankey diagrams, and stock charts, each with its own generate, validate, and reference tools.

Skill file or MCP server: which should I use?

Both exist, and they solve the same problem in different ways. The skill is a context file your assistant reads once and applies to every request, and it works with tools that do not speak MCP (ChatGPT, Gemini, Copilot). The MCP server adds live tools that generate and validate on demand. If your client supports MCP, use it, because it uses context more efficiently and can catch mistakes before you paste. You do not need both. The AI overview covers all three setup paths, including a browser-chat prompt for tools with no install.

Summary

The ApexCharts MCP server turns "the AI wrote chart code that does not run" into a non-problem. Connect it in one line, and your assistant stops guessing: it checks the correct data format with list_chart_types, builds a valid skeleton with generate_chart_config, catches mistakes with validate_chart_config, and reads current docs with get_reference, all automatically. The validation step in particular is something a plain chatbot cannot do, and it is the difference between pasting code that works and debugging a blank canvas. Add it to your client, describe the chart you want, and let the tools handle the details. See the Build with AI page for every setup option, or read The State of JavaScript Charting in 2026 for where ApexCharts sits in the wider field.

Frequently asked questions