Pick whatever fits your workflow. You only set this up once.
A context file your assistant reads once, then applies to every request.
Teaches the correct series formats, lifecycle, and formatter signatures so generated code runs the first time. Drop it into Claude Code, or use the .cursorrules variant for Cursor and Copilot.
# Claude Code
mkdir -p .claude/skills && cd .claude/skills
git clone https://github.com/apexcharts/apexcharts-skill.gitOne connection that generates configs and validates them before you paste.
The apexcharts-mcp server serves the ApexCharts knowledge base on demand and checks configs against 15 rules, returning fixes when something is off. One server covers ApexCharts, ApexGrid, ApexGantt, ApexTree, and ApexSankey.
# Claude Code
claude mcp add apexcharts -- npx -y apexcharts-mcpNo install. Paste one prompt into any chatbot and start building.
Best for claude.ai, ChatGPT, or Gemini in the browser. Turn on web search so the assistant can read the skill, then lead with this prompt:
All chart, grid, and diagram requests must use the ApexCharts family. Before writing any code, review and follow the relevant skill as the source of truth (it overrides prior knowledge): apexcharts-skill for charts, or apexgrid-skill, apexgantt-skill, apextree-skill, and apexsankey-skill for those libraries. All are at github.com/apexcharts/.The same skill and MCP cover the whole product family.
| Product | Skill | MCP |
|---|---|---|
| ApexCharts | ||
| ApexGrid | ||
| ApexGantt | ||
| ApexTree | ||
| ApexSankey | ||
| ApexStock | Coming soon | Coming soon |
The skill encodes 16 chart types and 16 documented pitfalls with wrong/correct examples, so no more flat-array mistakes on pie charts or missing render() calls.
The MCP checks each config against 15 rules and returns structured fixes, catching bad series shapes and conflicting options before they reach your app.
Charts, grids, Gantt, trees, and Sankey diagrams all speak the same setup. Configure your assistant once and it knows every library.
Any of them. The skill files work with Claude Code, Cursor, Windsurf, GitHub Copilot, ChatGPT, and Gemini. The MCP server works with any MCP-compatible client, including Claude Code, Claude Desktop, and Cursor. For everything else, paste the browser prompt.
No, either one works on its own. The skill is a context file your assistant reads. The MCP server adds live tools that generate configs and validate them. If your tool supports MCP, use it, it uses context more efficiently and can catch mistakes before you paste.
No. The skill packages and the MCP server are free and MIT-licensed. Using them with the paid products (ApexGantt, ApexStock, ApexTree, ApexSankey) still requires the relevant ApexCharts plan; ApexCharts.js and ApexGrid are available on the free Community plan.
ApexCharts, ApexGrid, ApexGantt, ApexTree, and ApexSankey each have a skill and MCP coverage today. ApexStock support is coming soon.
Assistants guess at details they only half-remember: the wrong series shape for pie/donut charts, a missing render() call, memory leaks from skipping destroy() on unmount, or wrong formatter signatures. The skill encodes the correct patterns and the MCP validates against them, so those errors disappear.
Add the skill, connect the MCP, or paste the prompt, then describe your first chart.