apexcharts-skill 1.0.0 → 1.2.0

package/README.md

@@ -2,6 +2,16 @@
 
 AI coding skill for building [ApexCharts.js](https://apexcharts.com/) charts and data visualizations. Works with Claude Code, Cursor, GitHub Copilot, and any AI coding assistant.
 
+> **ApexCharts ecosystem — make sure this is the skill you want.** `apexcharts-skill` covers the core **ApexCharts.js charting** library only. Every other product in the ecosystem is a **separate npm library with its own dedicated skill package and repo** — grab the one that matches your library:
+>
+> | Product | npm library | Skill package & repo |
+> |---|---|---|
+> | **ApexCharts** — charts · *this skill* | `apexcharts` | `apexcharts-skill` |
+> | **ApexGantt** — Gantt / timeline | `apexgantt` | [`apexgantt-skill`](https://github.com/apexcharts/apexgantt-skill) |
+> | **ApexTree** — hierarchy / org charts | `apextree` | [`apextree-skill`](https://github.com/apexcharts/apextree-skill) |
+> | **ApexSankey** — flow / Sankey | `apexsankey` | [`apexsankey-skill`](https://github.com/apexcharts/apexsankey-skill) |
+> | **Apex Grid** — data grid | `apex-grid` | [`apexgrid-skill`](https://github.com/apexcharts/apexgrid-skill) |
+
 ## What This Does
 
 AI models frequently generate incorrect ApexCharts code — wrong series data formats, missing `render()` calls, broken formatter signatures, etc. This skill provides structured reference files that help AI assistants generate correct ApexCharts code on the first try.

package/SKILL.md

@@ -5,11 +5,13 @@ description: >
   Use when the user asks to create, configure, or troubleshoot any chart using ApexCharts
   (line, area, bar, pie, donut, radialBar, scatter, bubble, heatmap, candlestick, boxPlot,
   radar, polarArea, rangeBar, rangeArea, treemap). Covers correct data formats, lifecycle,
-  formatters, tree-shaking, SSR, and framework integration.
+  formatters, tree-shaking, SSR, and framework integration. In React /
+  Vue / Angular projects, prefer the framework wrapper packages
+  (`react-apexcharts`, `vue3-apexcharts`, `ng-apexcharts`) over the core API.
 metadata:
   author: ApexCharts
-  version: "1.0.0"
-  library_version: ">=5.0.0"
+  version: "1.2.0"
+  library_version: "5.15.0"
   category: data-visualization
   tags: [charts, visualization, javascript, typescript, svg, apexcharts]
   docs: https://apexcharts.com/docs/
@@ -19,6 +21,13 @@ metadata:
 
 # ApexCharts AI Skill
 
+> **Framework wrapper detection — check `package.json` before generating code.**
+> - `react` → use **`react-apexcharts`** instead of the core API.
+> - `vue` (Vue 3) → use **`vue3-apexcharts`**. Vue 2 → **`vue-apexcharts`**.
+> - `@angular/core` → use **`ng-apexcharts`**.
+>
+> Wrappers handle `destroy()` automatically on unmount, accept reactive props, and forward events as idiomatic framework events. Use the core API directly only when no framework is detected, or when the user explicitly asks for vanilla. See `references/framework-wrappers.md`.
+
 ## 1. Critical Rules
 
 1. **Always call `chart.render()`** after `new ApexCharts(el, options)`. The constructor does not render.
@@ -46,7 +55,7 @@ This is the most critical reference. Using the wrong data format is the #1 cause
 |---|---|---|---|
 | Line | `'line'` | `[{ name, data: [number \| null] }]` or `[{ name, data: [{ x, y }] }]` | `series: [{ name: 'Sales', data: [30, 40, null, 50] }]` |
 | Area | `'area'` | Same as line | `series: [{ name: 'Views', data: [10, 20, 30] }]` |
-| Bar / Column | `'bar'` | Same as line. Use `plotOptions.bar.horizontal: true` for horizontal bars (default). Set `horizontal: false` for vertical columns. | `series: [{ name: 'Revenue', data: [44, 55, 41] }]` |
+| Bar / Column | `'bar'` | Same as line. Defaults to **vertical columns**; set `plotOptions.bar.horizontal: true` for horizontal bars. | `series: [{ name: 'Revenue', data: [44, 55, 41] }]` |
 | Scatter | `'scatter'` | `[{ name, data: [{ x, y }] }]` — always use XY format | `series: [{ name: 'Points', data: [{ x: 1, y: 5 }, { x: 2, y: 10 }] }]` |
 | Bubble | `'bubble'` | `[{ name, data: [{ x, y, z }] }]` — **z is required** (bubble size) | `series: [{ name: 'Data', data: [{ x: 1, y: 30, z: 10 }] }]` |
 | Range Area | `'rangeArea'` | `[{ name, data: [{ x, y: [low, high] }] }]` | `series: [{ name: 'Temp', data: [{ x: 'Jan', y: [5, 15] }] }]` |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "apexcharts-skill",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "description": "AI coding skill for ApexCharts.js — structured reference docs that help AI assistants (Claude, Cursor, Copilot, etc.) generate correct ApexCharts code.",
   "keywords": [
     "apexcharts",
@@ -43,4 +43,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/references/bar-charts.md

@@ -2,8 +2,8 @@
 
 ## Chart Types Covered
 
-- **Bar** (`'bar'`) — Horizontal bar chart (default orientation)
-- **Column** (`'bar'` + `plotOptions.bar.horizontal: false`) — Vertical bar/column chart
+- **Column** (`'bar'`) — Vertical column chart (the default for `type: 'bar'`)
+- **Bar** (`'bar'` + `plotOptions.bar.horizontal: true`) — Horizontal bar chart
 - **Range Bar** (`'rangeBar'`) — Bars with start/end values (used for timelines, Gantt charts)
 
 ## Tree-Shakeable Import
@@ -32,8 +32,8 @@ import ApexCharts from 'apexcharts/bar'
   },
   plotOptions: {
     bar: {
-      horizontal: true    // true = horizontal bars (default)
-                           // false = vertical columns
+      horizontal: true    // true = horizontal bars
+                           // false = vertical columns (default)
     }
   }
 }
@@ -237,7 +237,7 @@ series: [{
 
 ## Family-Specific Pitfalls
 
-1. **Forgetting `plotOptions.bar.horizontal: false` for column charts** — ApexCharts defaults to horizontal bars. Set `horizontal: false` explicitly for vertical columns.
+1. **Assuming `type: 'bar'` renders horizontal bars** — it defaults to **vertical columns** (`horizontal: false`). Set `plotOptions.bar.horizontal: true` when you actually want horizontal bars.
 2. **Stacking with `chart.stacked: true` but missing on bar type** — stacking only works on `type: 'bar'` (and `'area'`). It does NOT work on line, scatter, etc.
 3. **Range Bar with single value instead of array** — `y` must be `[start, end]`, not a single number.
 4. **Timeline without `xaxis.type: 'datetime'`** — date-based range bars need `xaxis: { type: 'datetime' }` to render correctly.