ApexCharts

ApexCharts Skill

AI coding assistants can write ApexCharts code - but without guidance they often get it wrong: incorrect series formats for pie/donut charts, missing render() calls, memory leaks in React/Vue component lifecycle, and wrong formatter signatures.

The ApexCharts Skill is a context file you add to your project once. Your AI assistant reads it and generates correct, idiomatic ApexCharts code from the start.

→ GitHub: apexcharts/apexcharts-skill

Install

Claude Code

mkdir -p .claude/skills
cd .claude/skills
git clone https://github.com/apexcharts/apexcharts-skill.git

Claude Code automatically discovers skills in .claude/skills/ and applies them to relevant requests.

Cursor / Windsurf

Copy .cursorrules to your project root:

curl -o .cursorrules https://raw.githubusercontent.com/apexcharts/apexcharts-skill/main/.cursorrules

Cursor and Windsurf read .cursorrules automatically on every prompt.

GitHub Copilot

Reference the skill file in Copilot Chat:

@workspace #file:SKILL.md How do I create a donut chart?

Or paste the contents of .cursorrules into your Copilot custom instructions (Settings → GitHub Copilot → Custom Instructions) so it applies to all conversations.

Generic AI (ChatGPT, Gemini, etc.)

Paste the contents of SKILL.md into your system prompt or attach it as context at the start of the conversation.

As an npm dependency

Tools that build on top of this skill (MCP servers, custom AI agents) can install it from npm and resolve absolute paths to the bundled markdown:

npm install apexcharts-skill

import { skillFile, referencesDir, referencePath } from 'apexcharts-skill';
import { readFile } from 'node:fs/promises';

const skill = await readFile(skillFile, 'utf8');
const barCharts = await readFile(referencePath('bar-charts.md'), 'utf8');

What the skill covers

The skill file gives your AI assistant accurate knowledge of:

  • 16 chart types — line, area, bar, pie, donut, radialBar, scatter, bubble, heatmap, candlestick, boxPlot, radar, polarArea, rangeBar, rangeArea, treemap
  • Correct data formats for every chart type
  • 16 common pitfalls with wrong/correct code examples
  • render() calls — required after constructing a chart instance in vanilla JS
  • React and Vue lifecycle — proper mount/unmount patterns to avoid memory leaks
  • Angular integration with NgApexchartsModule
  • Formatter signatures — xaxis.labels.formatter, tooltip.y.formatter, dataLabels.formatter
  • Tree shaking — how to import only the chart types you use
  • SSR — how to handle ApexCharts in server-side rendering environments
  • Methods — updateSeries(), updateOptions(), destroy(), addPointAnnotation(), and more

Why it matters

Without the skill, AI tools frequently produce code that:

  • Uses an object { name, data } series for pie/donut instead of a flat array
  • Omits chart.render() in vanilla JS usage
  • Leaves stale chart instances in React/Vue (no destroy() on unmount)
  • Passes the wrong number of arguments to formatter callbacks
  • Imports the full ApexCharts bundle when only one chart type is needed

The skill eliminates these classes of errors so you spend less time debugging generated code.

Repository structure

├── SKILL.md                    # Main entry point — read this first
├── .cursorrules                # Self-contained version for Cursor/Windsurf
├── references/
│   ├── cartesian-charts.md     # line, area, scatter, bubble, rangeArea
│   ├── bar-charts.md           # bar, column, rangeBar, timeline/Gantt
│   ├── financial-charts.md     # candlestick, boxPlot
│   ├── circular-charts.md      # pie, donut, polarArea, radialBar
│   ├── grid-charts.md          # heatmap, treemap
│   ├── radar-charts.md         # radar
│   ├── tree-shaking.md         # bundle optimization
│   ├── ssr.md                  # server-side rendering
│   └── framework-wrappers.md   # React, Vue, Angular
└── install/
    ├── claude-code.md
    ├── cursor.md
    └── copilot.md

SKILL.md is the main entry point — an AI reading it alone can generate correct code for any chart type. The references/ files provide deeper per-family detail loaded on demand.

Repository

https://github.com/apexcharts/apexcharts-skill

Contributions and improvements are welcome via pull request.