apexcharts-skill 1.2.1 → 2.0.0

package/.cursorrules

@@ -0,0 +1,272 @@
+# ApexCharts.js — AI Coding Rules
+
+You are working with ApexCharts.js (v6), a JavaScript charting library.
+Documentation: https://apexcharts.com/docs/
+NPM: apexcharts
+GitHub: https://github.com/apexcharts/apexcharts.js
+
+v6 is backward compatible: existing v5 configs keep working. New chart types (violin, funnel, pyramid, gauge) and the feature platform (plugins, canvas renderer, custom series, undo/redo, shareable views, themes, crossfilter, annotation authoring, storyboard, streaming, drilldown) are opt-in and tree-shakeable. Two behaviors changed on by default (both respect prefers-reduced-motion): coherent add/remove data-transition animations, and mobile pinch-zoom / two-finger pan.
+
+## Framework wrapper detection — check `package.json` first
+
+- `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 idiomatically. Use the core API directly only when no framework is detected, or when the user explicitly asks for vanilla.
+
+## Critical Rules
+
+1. **Always call `chart.render()`** after `new ApexCharts(el, options)`. The constructor does not render.
+2. **Always call `chart.destroy()`** before creating a new chart on the same element.
+3. **Series data format is chart-type-specific.** See the Data Format Table below.
+4. **`yaxis` must be an array** when using multiple y-axes. Each entry needs `seriesName`.
+5. **`tooltip.shared` and `tooltip.intersect` are mutually exclusive.**
+6. **Use `null` (not `undefined`)** for missing data points.
+7. **`chart.stacked: true`** only works with `bar` and `area` chart types.
+8. **Responsive breakpoints** must be in ascending order.
+9. **For mixed/combo charts**, set `type` on each series object.
+10. **RadialBar values must be 0–100** (percentages).
+11. **Color hex values must include `#`** (e.g., `'#FF5733'`).
+12. **Tree-shaking**: `apexcharts/core` requires separate chart-type + feature imports.
+13. **v6 aliases**: `funnel`/`pyramid` render through bar, `gauge` through radialBar. Use them as `chart.type` directly (no `plotOptions.bar.isFunnel`); covered by `apexcharts/bar` and `apexcharts/radialBar`.
+14. **`violin`** points use a density profile: `data: [{ x, y: { density: [[value, weight], ...], points?: [num] } }]`.
+15. **`render()` is idempotent (v6)**: a repeated `render()` returns the same promise; still `destroy()` before a new instance on the same element.
+
+---
+
+## Series Data Format Table
+
+### Axis Charts
+
+| Chart Type | `chart.type` | Series Format | Example |
+|---|---|---|---|
+| Line | `'line'` | `[{ name, data: [num\|null] }]` or `[{ name, data: [{ x, y }] }]` | `[{ data: [30, 40, null, 50] }]` |
+| Area | `'area'` | Same as line | `[{ data: [10, 20, 30] }]` |
+| Bar/Column | `'bar'` | Same as line. `plotOptions.bar.horizontal: false` for columns. | `[{ data: [44, 55, 41] }]` |
+| Scatter | `'scatter'` | `[{ name, data: [{ x, y }] }]` | `[{ data: [{ x: 1, y: 5 }] }]` |
+| Bubble | `'bubble'` | `[{ name, data: [{ x, y, z }] }]` — z required | `[{ data: [{ x: 1, y: 30, z: 10 }] }]` |
+| Range Area | `'rangeArea'` | `[{ data: [{ x, y: [low, high] }] }]` | `[{ data: [{ x: 'Jan', y: [5, 15] }] }]` |
+| Range Bar | `'rangeBar'` | `[{ data: [{ x, y: [start, end] }] }]` | `[{ data: [{ x: 'Task', y: [1, 5] }] }]` |
+| Candlestick | `'candlestick'` | `[{ data: [{ x, y: [O,H,L,C] }] }]` — 4 values | `[{ data: [{ x: new Date(), y: [51,56,48,53] }] }]` |
+| Box Plot | `'boxPlot'` | `[{ data: [{ x, y: [min,Q1,med,Q3,max] }] }]` — 5 values | `[{ data: [{ x: 'A', y: [10,20,30,40,50] }] }]` |
+| Violin *(v6)* | `'violin'` | `[{ name, data: [{ x, y: { density: [[value,weight],...], points?: [num] } }] }]` | `[{ data: [{ x: 'A', y: { density: [[20,0.1],[30,0.2]], points: [21,29] } }] }]` |
+| Heatmap | `'heatmap'` | `[{ name, data: [{ x, y: number }] }]` — y is intensity | `[{ name: 'Mon', data: [{ x: '10am', y: 45 }] }]` |
+| Treemap | `'treemap'` | `[{ data: [{ x, y: number }] }]` — y is area value | `[{ data: [{ x: 'Item', y: 100 }] }]` |
+| Radar | `'radar'` | `[{ name, data: [num] }]` + `xaxis.categories` | `[{ data: [80, 50, 30] }]` |
+| Funnel *(v6)* | `'funnel'` | `[{ name, data: [num] }]` + `xaxis.categories`; order largest→smallest | `[{ data: [1380, 990, 548, 200] }]` |
+| Pyramid *(v6)* | `'pyramid'` | Same as funnel; order smallest→largest | `[{ data: [200, 548, 990, 1380] }]` |
+
+### Non-Axis Charts (flat number array — NOT object format)
+
+```js
+// Pie, Donut, Polar Area
+{ chart: { type: 'pie' }, series: [44, 55, 13], labels: ['A', 'B', 'C'] }
+
+// Radial Bar (values 0–100)
+{ chart: { type: 'radialBar' }, series: [76, 67, 61], labels: ['X', 'Y', 'Z'] }
+
+// Gauge (v6): single value; domain via plotOptions.radialBar.min/max
+{ chart: { type: 'gauge' }, series: [72], labels: ['Progress'] }
+```
+
+---
+
+## Core Lifecycle
+
+```js
+import ApexCharts from 'apexcharts'
+
+const chart = new ApexCharts(document.querySelector('#chart'), {
+  chart: { type: 'line', height: 350 },
+  series: [{ name: 'Sales', data: [30, 40, 35, 50] }],
+  xaxis: { categories: ['Q1', 'Q2', 'Q3', 'Q4'] }
+})
+
+await chart.render()                                    // REQUIRED
+await chart.updateSeries([{ data: [10, 20, 30, 40] }]) // update data
+await chart.updateOptions({ title: { text: 'New' } })  // update config
+chart.destroy()                                         // cleanup
+```
+
+---
+
+## Import Paths
+
+```
+apexcharts              # Full bundle (all types + features)
+apexcharts/core         # Bare core (must register types + features manually)
+apexcharts/line         # line, area, scatter, bubble, rangeArea
+apexcharts/bar          # bar, column, rangeBar, funnel, pyramid (v6 aliases)
+apexcharts/candlestick  # candlestick, boxPlot
+apexcharts/violin       # violin (v6)
+apexcharts/pie          # pie, donut, polarArea
+apexcharts/radialBar    # radialBar, gauge (v6 alias)
+apexcharts/radar        # radar
+apexcharts/heatmap      # heatmap
+apexcharts/treemap      # treemap
+apexcharts/ssr          # Server-side rendering (Node.js)
+apexcharts/client       # Explicit browser import
+
+# Optional features (side-effect imports)
+apexcharts/features/exports         # dataURI(), exportToCSV()
+apexcharts/features/legend          # Legend component
+apexcharts/features/toolbar         # Zoom, pan, download
+apexcharts/features/annotations     # X/Y/point annotations
+apexcharts/features/keyboard        # Keyboard navigation
+# v6 feature platform (all opt-in):
+apexcharts/features/morph           # animated chart-type morphs
+apexcharts/features/drilldown       # hierarchical drill-down
+apexcharts/features/history         # undo/redo (Rewind)
+apexcharts/features/perspectives    # shareable view state
+apexcharts/features/storyboard      # scrollytelling
+apexcharts/features/facet           # design tokens + OS themes
+apexcharts/features/weave           # plugin platform
+apexcharts/features/renderer-canvas # hybrid SVG + canvas renderer (Strata)
+apexcharts/features/marks           # custom series types (registerSeriesType)
+apexcharts/features/link            # crossfilter / linked views
+apexcharts/features/ink             # on-chart annotation authoring
+apexcharts/features/measure         # measure / delta ruler
+apexcharts/features/context-menu    # right-click context menu
+apexcharts/features/all             # All features
+```
+(Cadence easing and real-time streaming are core: no feature import needed.)
+
+---
+
+## Formatter Signatures
+
+| Config Path | Signature |
+|---|---|
+| `xaxis.labels.formatter` | `(value, timestamp?, opts?) => string` |
+| `yaxis.labels.formatter` | `(value, opts?) => string` |
+| `tooltip.x.formatter` | `(value, opts?) => string` |
+| `tooltip.y.formatter` | `(value, opts?) => string` |
+| `tooltip.y.title.formatter` | `(seriesName, opts?) => string` |
+| `dataLabels.formatter` | `(value, opts?) => string \| number` |
+| `legend.formatter` | `(legendName, opts?) => string` |
+| `plotOptions.pie.donut.labels.total.formatter` | `(w) => string` |
+| `plotOptions.radialBar.dataLabels.value.formatter` | `(val) => string` |
+
+---
+
+## Pitfalls — ❌ Wrong vs ✅ Correct
+
+### 1. Pie/donut data format
+❌ `{ chart: { type: 'pie' }, series: [{ name: 'A', data: [44, 55] }] }`
+✅ `{ chart: { type: 'pie' }, series: [44, 55], labels: ['A', 'B'] }`
+
+### 2. Missing render()
+❌ `const chart = new ApexCharts(el, opts)` — nothing displays
+✅ `const chart = new ApexCharts(el, opts); await chart.render()`
+
+### 3. React/Vue memory leak
+❌ No cleanup on unmount
+✅ `useEffect(() => { const c = new ApexCharts(el, opts); c.render(); return () => c.destroy() }, [])`
+
+### 4. Datetime axis with strings
+❌ `xaxis: { type: 'datetime' }, data: [{ x: 'January 2024', y: 30 }]`
+✅ `xaxis: { type: 'datetime' }, data: [{ x: new Date('2024-01-01').getTime(), y: 30 }]`
+
+### 5. Multiple y-axes as object
+❌ `yaxis: { title: { text: 'Value' } }`
+✅ `yaxis: [{ seriesName: 'Revenue', title: {...} }, { seriesName: 'Profit', opposite: true }]`
+
+### 6. Both shared and intersect tooltips
+❌ `tooltip: { shared: true, intersect: true }`
+✅ `tooltip: { shared: true, intersect: false }` or `{ shared: false, intersect: true }`
+
+### 7. undefined for missing data
+❌ `data: [10, undefined, 30]`
+✅ `data: [10, null, 30]`
+
+### 8. Stacking on unsupported types
+❌ `chart: { type: 'scatter', stacked: true }`
+✅ `chart: { type: 'bar', stacked: true }` (or area)
+
+### 9. Mixed chart without per-series type
+❌ `series: [{ name: 'A', data: [...] }, { name: 'B', data: [...] }]` — all same type
+✅ `series: [{ name: 'A', type: 'column', data: [...] }, { name: 'B', type: 'line', data: [...] }]`
+
+### 10. RadialBar > 100
+❌ `series: [340, 520]`
+✅ `series: [76, 67]` (percentages 0–100)
+
+### 11. Colors without #
+❌ `colors: ['FF5733']`
+✅ `colors: ['#FF5733']`
+
+### 12. Tree-shaking without features
+❌ `import ApexCharts from 'apexcharts/line'` — no legend/toolbar
+✅ `import ApexCharts from 'apexcharts/line'; import 'apexcharts/features/legend'`
+
+### 13. SSR with wrong import
+❌ Server: `import ApexCharts from 'apexcharts'; ApexCharts.renderToString(opts)` — method missing
+✅ Server: `import ApexCharts from 'apexcharts/ssr'; await ApexCharts.renderToString(opts)`
+
+### 14. updateOptions just to change data
+❌ `chart.updateOptions({ series: [{ data: newData }] })`
+✅ `chart.updateSeries([{ name: 'Sales', data: newData }])`
+
+### 15. Bar chart defaults to vertical columns
+❌ Expecting horizontal bars with just `type: 'bar'`
+✅ `plotOptions: { bar: { horizontal: true } }` for horizontal bars
+
+### 16. Categories with {x,y} data
+❌ `xaxis: { categories: ['A','B'] }, series: [{ data: [{ x: 'A', y: 10 }] }]` — categories ignored
+✅ Either use categories + simple array, OR use {x,y} without categories
+
+---
+
+## API Methods
+
+| Method | Description |
+|---|---|
+| `render()` | Render chart. Returns Promise. |
+| `destroy()` | Destroy and clean up. |
+| `updateOptions(opts)` | Merge options and re-render. |
+| `updateSeries(series)` | Replace series data. |
+| `appendSeries(series)` | Add new series. |
+| `appendData(data)` | Append data points. |
+| `toggleSeries(name)` | Show/hide series. |
+| `resetSeries()` | Reset to initial data. |
+| `zoomX(min, max)` | Programmatic zoom. |
+| `addXaxisAnnotation(opts)` | Dynamic annotation. |
+| `addYaxisAnnotation(opts)` | Dynamic annotation. |
+| `addPointAnnotation(opts)` | Dynamic annotation. |
+| `removeAnnotation(id)` | Remove by id. |
+| `clearAnnotations()` | Remove all. |
+| `dataURI()` | Export as image (needs features/exports). |
+| `exportToCSV()` | Export as CSV (needs features/exports). |
+
+### Static Methods
+
+| Method | Description |
+|---|---|
+| `ApexCharts.exec(id, fn, ...args)` | Call method on chart by id. |
+| `ApexCharts.getChartByID(id)` | Get instance by id. |
+
+### SSR Methods (apexcharts/ssr only)
+
+| Method | Description |
+|---|---|
+| `ApexCharts.renderToString(opts, { width, height })` | SVG string (server). |
+| `ApexCharts.renderToHTML(opts, { width, height })` | HTML wrapper + SVG (server). |
+| `ApexCharts.hydrate(el, clientOpts?)` | Hydrate SSR chart (client). |
+| `ApexCharts.hydrateAll(selector?)` | Hydrate all SSR charts. |
+
+---
+
+## Framework Wrappers
+
+```
+npm install react-apexcharts apexcharts    # React
+npm install vue3-apexcharts apexcharts     # Vue 3
+npm install ng-apexcharts apexcharts       # Angular
+```
+
+React: `<Chart options={opts} series={series} type="line" height={350} />`
+Vue 3: `<apexchart type="bar" :options="opts" :series="series" height="350" />`
+Angular: `<apx-chart [series]="series" [chart]="chart" [xaxis]="xaxis" />`
+
+All wrappers handle destroy() on unmount automatically.

package/README.md

@@ -16,11 +16,14 @@ AI coding skill for building [ApexCharts.js](https://apexcharts.com/) charts and
 
 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.
 
+This skill targets **ApexCharts v6** (backward compatible with v5 configs).
+
 ### Coverage
 
-- **16 chart types**: line, area, bar, pie, donut, radialBar, scatter, bubble, heatmap, candlestick, boxPlot, radar, polarArea, rangeBar, rangeArea, treemap
+- **20 chart types**: line, area, bar, pie, donut, radialBar, scatter, bubble, heatmap, candlestick, boxPlot, violin, radar, polarArea, rangeBar, rangeArea, treemap, funnel, pyramid, gauge
 - **Correct data formats** for every chart type
-- **16 common pitfalls** with wrong/correct code examples
+- **Common pitfalls** with wrong/correct code examples
+- **v6 feature platform**: plugins (Weave), canvas renderer (Strata), custom series (Marks), undo/redo (Rewind), shareable views (Perspectives), themes (Facet), easing (Cadence), crossfilter (Link), annotation authoring (Ink), measure ruler, context menu, storyboard, streaming, drilldown
 - **Tree-shaking** and bundle optimization patterns
 - **SSR** (server-side rendering) and hydration
 - **Framework integration**: React, Vue 3, Angular
@@ -76,11 +79,12 @@ const barCharts = await readFile(referencePath('bar-charts.md'), 'utf8');
 ├── .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
+│   ├── bar-charts.md           # bar, column, rangeBar, timeline/Gantt, funnel, pyramid
+│   ├── financial-charts.md     # candlestick, boxPlot, violin
+│   ├── circular-charts.md      # pie, donut, polarArea, radialBar, gauge
 │   ├── grid-charts.md          # heatmap, treemap
 │   ├── radar-charts.md         # radar
+│   ├── v6-features.md          # v6 feature platform (plugins, canvas, undo/redo, themes, ...)
 │   ├── tree-shaking.md         # bundle optimization
 │   ├── ssr.md                  # server-side rendering
 │   └── framework-wrappers.md   # React, Vue, Angular

package/SKILL.md

@@ -1,17 +1,19 @@
 ---
 name: apexcharts
 description: >
-  AI skill for building ApexCharts.js charts and data visualizations.
+  AI skill for building ApexCharts.js charts and data visualizations (targets v6).
   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. In React /
+  violin, radar, polarArea, rangeBar, rangeArea, treemap, funnel, pyramid, gauge). Covers
+  correct data formats, lifecycle, formatters, tree-shaking, SSR, and the v6 feature
+  platform (plugins, canvas renderer, custom series, undo/redo, shareable views, themes,
+  crossfilter, annotation authoring, storyboard, streaming, drilldown). 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.2.1"
-  library_version: "5.15.2"
+  version: "2.0.0"
+  library_version: "6.1.0"
   category: data-visualization
   tags: [charts, visualization, javascript, typescript, svg, apexcharts]
   docs: https://apexcharts.com/docs/
@@ -28,6 +30,8 @@ metadata:
 >
 > 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`.
 
+> **Targets ApexCharts v6.** v6 is backward compatible: existing v5 configs keep working unchanged. Everything new (the plugin platform, canvas renderer, custom series, undo/redo, shareable views, themes, crossfilter, annotation authoring, storyboard, streaming, drilldown) is opt-in and tree-shakeable. Two behaviors changed *on by default* (both respect `prefers-reduced-motion`): (1) data updates that add/remove points now animate coherently, and (2) mobile pinch-zoom / two-finger pan gestures are enabled. See `references/v6-features.md` for the full v6 surface.
+
 ## 1. Critical Rules
 
 1. **Always call `chart.render()`** after `new ApexCharts(el, options)`. The constructor does not render.
@@ -42,6 +46,9 @@ metadata:
 10. **RadialBar values must be 0–100** (they represent percentages).
 11. **Color hex values must include the `#` prefix** (e.g., `'#FF5733'`, not `'FF5733'`).
 12. **Tree-shaking**: importing `apexcharts/core` gives you a bare class — you must also import chart-type entries and feature entries separately.
+13. **v6 first-class aliases**: `funnel` and `pyramid` render through the bar engine; `gauge` renders through radialBar. Use them as `chart.type` directly (no `plotOptions.bar.isFunnel` needed). They are covered by the `apexcharts/bar` and `apexcharts/radialBar` tree-shaking entries respectively.
+14. **`violin` (v6, statistical)** uses a per-point density profile: `data: [{ x, y: { density: [[value, weight], ...], points?: [number] } }]`, not a plain number.
+15. **`render()` is idempotent (v6)**: calling `render()` twice on the same instance returns the same promise instead of building a duplicate chart. You still must `destroy()` before creating a *new* instance on the same element.
 
 ---
 
@@ -62,23 +69,28 @@ This is the most critical reference. Using the wrong data format is the #1 cause
 | Range Bar | `'rangeBar'` | `[{ name, data: [{ x, y: [start, end] }] }]` — for timeline/Gantt, use timestamps | `series: [{ name: 'Tasks', data: [{ x: 'Design', y: [1, 5] }] }]` |
 | Candlestick | `'candlestick'` | `[{ data: [{ x, y: [O, H, L, C] }] }]` — array of 4: Open, High, Low, Close | `series: [{ data: [{ x: new Date('2024-01-01'), y: [51, 56, 48, 53] }] }]` |
 | Box Plot | `'boxPlot'` | `[{ data: [{ x, y: [min, Q1, median, Q3, max] }] }]` — array of 5 | `series: [{ data: [{ x: 'Group A', y: [10, 20, 30, 40, 50] }] }]` |
+| Violin *(v6)* | `'violin'` | `[{ name, data: [{ x, y: { density: [[value, weight], ...], points?: [number] } }] }]` | `series: [{ name: 'Sessions', data: [{ x: 'A', y: { density: [[20, 0.1], [30, 0.2]], points: [21, 29] } }] }]` |
 | Heatmap | `'heatmap'` | `[{ name, data: [{ x, y: number }] }]` — y is the intensity value | `series: [{ name: 'Mon', data: [{ x: '10am', y: 45 }] }]` |
 | Treemap | `'treemap'` | `[{ data: [{ x, y: number }] }]` — y is the area/value | `series: [{ data: [{ x: 'Item A', y: 100 }, { x: 'Item B', y: 60 }] }]` |
 | Radar | `'radar'` | `[{ name, data: [number] }]` + `xaxis: { categories: [...] }` | `series: [{ name: 'Skill', data: [80, 50, 30, 40, 100] }]` |
+| Funnel *(v6)* | `'funnel'` | `[{ name, data: [number] }]` + `xaxis: { categories: [...] }`. Order values **largest→smallest**. | `series: [{ data: [1380, 990, 548, 200] }]` |
+| Pyramid *(v6)* | `'pyramid'` | Same as funnel; order values **smallest→largest** (wide base at bottom). | `series: [{ data: [200, 548, 990, 1380] }]` |
 
-### Non-Axis Charts (pie, donut, radialBar, polarArea)
+### Non-Axis Charts (pie, donut, radialBar, polarArea, gauge)
 
 These use a **flat number array** for `series`, NOT the object format:
 
 ```js
 // CORRECT — flat number array + labels
 {
-  chart: { type: 'pie' },  // or 'donut', 'polarArea', 'radialBar'
+  chart: { type: 'pie' },  // or 'donut', 'polarArea', 'radialBar', 'gauge'
   series: [44, 55, 13, 43, 22],
   labels: ['Team A', 'Team B', 'Team C', 'Team D', 'Team E']
 }
 ```
 
+**Gauge *(v6)*** is a single-value radialBar alias: `series: [72]`, `labels: ['Progress']`. Configure the arc/needle, colored bands, ticks, and `min`/`max` domain through `plotOptions.radialBar` (see `references/circular-charts.md`).
+
 ---
 
 ## 3. Package / Module Map
@@ -101,21 +113,37 @@ import ApexCharts from 'apexcharts/column'        # same as /bar
 import ApexCharts from 'apexcharts/rangeBar'      # same as /bar
 import ApexCharts from 'apexcharts/candlestick'   # candlestick, boxPlot
 import ApexCharts from 'apexcharts/boxPlot'       # same as /candlestick
+import ApexCharts from 'apexcharts/violin'        # violin (v6)
 import ApexCharts from 'apexcharts/pie'           # pie, donut, polarArea
 import ApexCharts from 'apexcharts/donut'         # same as /pie
 import ApexCharts from 'apexcharts/polarArea'     # same as /pie
-import ApexCharts from 'apexcharts/radialBar'     # radialBar only
+import ApexCharts from 'apexcharts/radialBar'     # radialBar + gauge (v6)
 import ApexCharts from 'apexcharts/radar'         # radar only
 import ApexCharts from 'apexcharts/heatmap'       # heatmap only
 import ApexCharts from 'apexcharts/treemap'       # treemap only
+# funnel + pyramid (v6) render through the bar engine; use apexcharts/bar
 
 # Optional features (side-effect imports — just import, no default export needed)
-import 'apexcharts/features/exports'      # PNG/SVG/CSV export methods
-import 'apexcharts/features/legend'       # Interactive legend component
-import 'apexcharts/features/toolbar'      # Toolbar (zoom, pan, download buttons)
-import 'apexcharts/features/annotations'  # X/Y/point/text/image annotations
-import 'apexcharts/features/keyboard'     # Keyboard navigation (accessibility)
-import 'apexcharts/features/all'          # All features at once
+import 'apexcharts/features/exports'         # PNG/SVG/CSV export methods
+import 'apexcharts/features/legend'          # Interactive legend component
+import 'apexcharts/features/toolbar'         # Toolbar (zoom, pan, download buttons)
+import 'apexcharts/features/annotations'     # X/Y/point/text/image annotations
+import 'apexcharts/features/keyboard'        # Keyboard navigation (accessibility)
+# v6 feature platform (all opt-in, all tree-shakeable)
+import 'apexcharts/features/morph'           # Animated chart-type morphs
+import 'apexcharts/features/drilldown'       # Hierarchical drill-down
+import 'apexcharts/features/history'         # Undo/redo (Rewind)
+import 'apexcharts/features/perspectives'    # Shareable view state
+import 'apexcharts/features/storyboard'      # Scrollytelling (includes perspectives)
+import 'apexcharts/features/facet'           # Design tokens + OS-aware themes
+import 'apexcharts/features/weave'           # Public plugin platform
+import 'apexcharts/features/renderer-canvas' # Hybrid SVG + canvas renderer (Strata)
+import 'apexcharts/features/marks'           # Custom series types (registerSeriesType)
+import 'apexcharts/features/link'            # Crossfilter / linked views
+import 'apexcharts/features/ink'             # On-chart annotation authoring
+import 'apexcharts/features/measure'         # Measure / delta ruler
+import 'apexcharts/features/context-menu'    # Right-click / long-press context menu
+import 'apexcharts/features/all'             # All features at once
 
 # SSR (server-side rendering)
 import ApexCharts from 'apexcharts/ssr'    # Node.js: renderToString, renderToHTML
@@ -484,6 +512,19 @@ await chart.updateOptions({ title: { text: 'New Title' } })
 | `addEventListener(name, handler)` | Subscribe to chart event. |
 | `removeEventListener(name, handler)` | Unsubscribe from chart event. |
 
+### v6 Instance Methods (require the matching feature import)
+
+| Method | Feature | Description |
+|---|---|---|
+| `chart.history.undo() / redo() / jump(id) / transaction(fn)` | history | Undo/redo over the command journal. |
+| `chart.perspectives.capture() / toURL() / apply(token)` | perspectives | Serialize / restore the exact view. |
+| `chart.getActiveRenderer()` | renderer-canvas | Returns `'svg' \| 'canvas'` currently in use. |
+| `chart.refreshTokens()` | facet | Re-read `--apx-*` CSS custom properties. |
+| `chart.startMeasure() / stopMeasure() / clearMeasures()` | measure | Drive the measure ruler from code. |
+| `chart.storyboard.bind({ beats }) / goTo() / unbind()` | storyboard | Scroll-driven choreography. |
+| `chart.drillDown(id) / drillUp() / drillToRoot()` | drilldown | Navigate the drill-down hierarchy. |
+| `chart.clearCrossfilter()` | link | Clear active crossfilter selections. |
+
 ### Static Methods
 
 | Method | Description |
@@ -493,15 +534,21 @@ await chart.updateOptions({ title: { text: 'New Title' } })
 | `ApexCharts.merge(target, source)` | Deep-merge objects. |
 | `ApexCharts.use(typeMap)` | Register chart type constructors (tree-shaking). |
 | `ApexCharts.registerFeatures(featureMap)` | Register optional feature modules. |
+| `ApexCharts.registerPlugin(def) / unregisterPlugin(name)` | *(v6, Weave)* Register a reusable plugin. |
+| `ApexCharts.registerSeriesType(name, def) / unregisterSeriesType(name)` | *(v6, Marks)* Register a custom series type. |
+| `ApexCharts.registerTheme(name, def) / unregisterTheme(name)` | *(v6, Facet)* Register a named brand theme. |
+| `ApexCharts.registerEasing(name, fn)` | *(v6, Cadence)* Register a custom easing curve. |
+| `ApexCharts.crossfilter({ id, records }) / getCrossfilter(id)` | *(v6, Link)* Create / fetch a crossfilter engine. |
+| `ApexCharts.perspectives.fromURL(href)` | *(v6)* Decode a perspective token from a URL. |
 
 ### SSR Static Methods (available with `apexcharts/ssr`)
 
 | Method | Description |
 |---|---|
-| `ApexCharts.renderToString(options)` | Render chart to SVG string (Node.js). |
-| `ApexCharts.renderToHTML(options)` | Render chart to HTML string with wrapper (Node.js). |
-| `ApexCharts.hydrate(element)` | Hydrate server-rendered chart (browser). |
-| `ApexCharts.hydrateAll()` | Hydrate all server-rendered charts on page. |
+| `ApexCharts.renderToString(options, { width, height, scale })` | Render chart to raw SVG string (Node.js). |
+| `ApexCharts.renderToHTML(options, { width, height, scale, className })` | Render hydration-ready HTML string (Node.js). |
+| `ApexCharts.hydrate(element, clientOptions?)` | Hydrate a server-rendered chart (browser). |
+| `ApexCharts.hydrateAll(selector?, clientOptions?)` | Hydrate all server-rendered charts on page. |
 | `ApexCharts.isHydrated(element)` | Check if element is already hydrated. |
 
 ---
@@ -537,6 +584,17 @@ await chart.updateOptions({ title: { text: 'New Title' } })
       beforeResetZoom: (chart, options) => {},    // return false to cancel
       scrolled: (chart, { xaxis }) => {},
       selection: (chart, { xaxis, yaxis }) => {},
+
+      // v6 feature events (fire only when the matching feature is enabled)
+      annotationDragged: (chart, options) => {},  // ink
+      annotationEdited: (chart, options) => {},    // ink
+      annotationStyled: (chart, options) => {},    // ink
+      annotationDeleted: (chart, options) => {},   // ink
+      measured: (chart, { from, to, dx, dy, percentChange, slope }) => {}, // measure
+      beatChange: (chart, beatInfo) => {},         // storyboard
+      drillDownStart: (info, chart, options) => {},// drilldown
+      drillDownEnd: (info, chart, options) => {},  // drilldown
+      drillUp: (info, chart, options) => {},       // drilldown
     }
   }
 }
@@ -544,18 +602,40 @@ await chart.updateOptions({ title: { text: 'New Title' } })
 
 ---
 
-## 9. Reference Routing Table
+## 9. v6 Feature Platform (opt-in, tree-shakeable)
+
+All of the following are new in v6, off by default, and each ships as a `apexcharts/features/*` entry. Full config shapes, APIs, and examples are in `references/v6-features.md`. Quick map:
+
+| Feature | Opt-in | One-liner |
+|---|---|---|
+| **Weave** (plugins) | `apexcharts/features/weave` | Publish reusable chart plugins against a stable `ApexCharts.registerPlugin({ name, setup })` API; activate per chart with `plugins: [{ name }]`. |
+| **Strata** (canvas) | `apexcharts/features/renderer-canvas` | `chart: { renderer: 'auto', rendererThreshold }` paints the dense series layer to canvas while axes/tooltips/exports stay SVG. |
+| **Marks** (custom series) | `apexcharts/features/marks` | `ApexCharts.registerSeriesType(name, { renderItem })` for first-class custom marks (lollipop, dumbbell, bullet). Baseline is `scales.y(0)`, **not** `api.zeroY`. |
+| **Rewind** (undo/redo) | `apexcharts/features/history` | `chart: { history: { enabled: true } }`, then `chart.history.undo()/redo()/jump()/transaction()`. |
+| **Perspectives** (view state) | `apexcharts/features/perspectives` | `chart.perspectives.capture()/toURL()/apply()` to serialize and restore the exact view. |
+| **Facet** (themes/tokens) | `apexcharts/features/facet` | `theme: { follow: 'os', name }`, `--apx-*` CSS custom props, `ApexCharts.registerTheme`. |
+| **Cadence** (easing) | core | `chart.animations.easing` accepts a named curve, cubic-bezier array, or function; `ApexCharts.registerEasing`. |
+| **Link** (crossfilter) | `apexcharts/features/link` | `chart: { group, link: { enabled, mode } }` for highlight linking; `ApexCharts.crossfilter({ id, records })` for a filter engine. |
+| **Ink** (annotation authoring) | `apexcharts/features/ink` | `chart: { ink: { enabled: true } }` makes annotations draggable/resizable with a floating editor. |
+| **Measure** (ruler) | `apexcharts/features/measure` | `chart: { measure: { enabled, mode } }`; hold a key and drag to read change/percent/slope. v6.1 adds a toolbar tool (`toolbar.tools.measure`, `toolbar.autoSelected: 'measure'`). |
+| **Context menu** | `apexcharts/features/context-menu` | `chart: { contextMenu: { enabled, items } }` for point-specific right-click actions. |
+| **Storyboard** (scrollytelling) | `apexcharts/features/storyboard` | `chart.storyboard.bind({ beats })` pairs prose sections with saved views. |
+| **Streaming** | core | `chart: { streaming: { enabled, maxPoints } }` for constant-velocity rolling-window scroll. |
+| **Drilldown** | `apexcharts/features/drilldown` | `drilldown: { enabled, series }` + a `drilldown` id on data points; `chart.drillDown()/drillUp()`. |
+
+## 10. Reference Routing Table
 
 For detailed chart-family-specific options, data format variants, and full working examples, refer to:
 
 | Topic | Reference File |
 |---|---|
 | Line, Area, Scatter, Bubble, Range Area | `references/cartesian-charts.md` |
-| Bar, Column, Range Bar, Timeline/Gantt | `references/bar-charts.md` |
-| Candlestick, Box Plot | `references/financial-charts.md` |
-| Pie, Donut, Polar Area, Radial Bar | `references/circular-charts.md` |
+| Bar, Column, Range Bar, Timeline/Gantt, Funnel, Pyramid | `references/bar-charts.md` |
+| Candlestick, Box Plot, Violin | `references/financial-charts.md` |
+| Pie, Donut, Polar Area, Radial Bar, Gauge | `references/circular-charts.md` |
 | Heatmap, Treemap | `references/grid-charts.md` |
 | Radar | `references/radar-charts.md` |
+| v6 feature platform (plugins, canvas, undo/redo, themes, crossfilter, storyboard, ...) | `references/v6-features.md` |
 | Tree-shaking, Bundle optimization | `references/tree-shaking.md` |
 | Server-side rendering, Hydration | `references/ssr.md` |
 | React, Vue, Angular integration | `references/framework-wrappers.md` |

package/index.js

@@ -26,6 +26,7 @@ export const referenceFiles = [
   'radar-charts.md',
   'ssr.md',
   'tree-shaking.md',
+  'v6-features.md',
 ];
 
 /** Resolve a reference file by its filename. Throws if not in the known list. */

package/install/claude-code.md

@@ -0,0 +1,25 @@
+# Installing ApexCharts Skill for Claude Code
+
+## Installation
+
+```bash
+# Navigate to your project's Claude config
+mkdir -p .claude/skills
+cd .claude/skills
+
+# Clone the skill
+git clone https://github.com/apexcharts/apexcharts-skill.git
+```
+
+Claude Code will automatically detect and use the skill files when working on ApexCharts code.
+
+## Verification
+
+Ask Claude to create a simple chart:
+
+> Create a line chart with ApexCharts showing monthly sales data
+
+Claude should generate code that:
+- Calls `new ApexCharts(el, options)` followed by `chart.render()`
+- Uses the correct series data format
+- Includes proper cleanup patterns for your framework

package/install/copilot.md

@@ -0,0 +1,23 @@
+# Installing ApexCharts Skill for GitHub Copilot
+
+## VS Code + Copilot Chat
+
+### Option 1: Add as Workspace Context
+
+1. Clone this repository or download `SKILL.md` into your project
+2. In Copilot Chat, reference the file: `@workspace #file:SKILL.md`
+3. Ask your charting question
+
+### Option 2: Custom Instructions
+
+1. Open VS Code Settings (Cmd/Ctrl + ,)
+2. Search for "Copilot Custom Instructions"
+3. Paste the contents of `.cursorrules` into the custom instructions field
+
+## Copilot in GitHub.com
+
+When working in GitHub's web editor with Copilot, paste the relevant sections from `SKILL.md` into your prompt for accurate ApexCharts code generation.
+
+## Verification
+
+Ask Copilot to generate a chart. It should use the correct series data format and call `render()` after construction.

package/install/cursor.md

@@ -0,0 +1,27 @@
+# Installing ApexCharts Skill for Cursor
+
+## Setup
+
+1. Copy the `.cursorrules` file from this repository into the root of your project:
+
+```bash
+cp /path/to/apexcharts-skill/.cursorrules /path/to/your-project/.cursorrules
+```
+
+Or download it directly:
+
+```bash
+curl -o .cursorrules https://raw.githubusercontent.com/apexcharts/apexcharts-skill/main/.cursorrules
+```
+
+2. Restart Cursor or open a new Cursor window.
+
+Cursor automatically reads `.cursorrules` files in the project root and uses them as context for AI-assisted coding.
+
+## For Windsurf
+
+Same approach — Windsurf also supports `.cursorrules` files in the project root.
+
+## Verification
+
+Ask Cursor to generate a chart. It should follow the correct data format patterns and lifecycle (render/destroy).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "apexcharts-skill",
-  "version": "1.2.1",
+  "version": "2.0.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",
@@ -35,7 +35,9 @@
   "files": [
     "index.js",
     "SKILL.md",
-    "references"
+    "references",
+    "install",
+    ".cursorrules"
   ],
   "engines": {
     "node": ">=18"