apexcharts-skill 1.1.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

@@ -10,8 +10,8 @@ description: >
   (`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/
@@ -55,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.1.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",

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.