apexcharts-skill 2.2.0 → 3.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/.cursorrules +57 -19
  2. package/README.md +14 -10
  3. package/SKILL.md +165 -66
  4. package/index.js +1 -1
  5. package/package.json +1 -1
  6. package/references/bar-charts.md +130 -5
  7. package/references/cartesian-charts.md +96 -1
  8. package/references/circular-charts.md +52 -1
  9. package/references/{v6-features.md → feature-platform.md} +233 -30
  10. package/references/financial-charts.md +68 -0
  11. package/references/framework-wrappers.md +1 -1
  12. package/references/grid-charts.md +91 -1
  13. package/references/ssr.md +18 -9
  14. package/references/tree-shaking.md +119 -28
package/.cursorrules CHANGED
@@ -1,11 +1,26 @@
1
1
  # ApexCharts.js — AI Coding Rules
2
2
 
3
- You are working with ApexCharts.js (v6), a JavaScript charting library.
3
+ You are working with ApexCharts.js (v7), a JavaScript charting library.
4
4
  Documentation: https://apexcharts.com/docs/
5
5
  NPM: apexcharts
6
6
  GitHub: https://github.com/apexcharts/apexcharts.js
7
7
 
8
- 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.
8
+ v5 and v6 configs keep working in v7, with two exceptions: `plotOptions.bar.borderRadiusWhenStacked` was REMOVED (corner ownership now follows the stack's outer edge), and `dataLabels.animate.enabled` now defaults to true on bar/column.
9
+
10
+ ## !! v7.0: the default bundle no longer ships every feature
11
+
12
+ Nine features are Tier 2: in the package, in NO bundle, reachable only through an explicit import. This applies to `import ApexCharts from 'apexcharts'` too, not just tree-shaken builds, and it is the most common v6 -> v7 failure.
13
+
14
+ import ApexCharts from 'apexcharts'
15
+ import 'apexcharts/features/trellis' // required even here
16
+
17
+ Tier 2: trellis, storyboard, perspectives, ink, renderer-canvas, link, measure, history, context-menu, plus the `raincloud` chart type.
18
+ `apexcharts/features/all` is the Tier 1 set and pulls in none of them.
19
+ Each Tier 2 module warns in the console when its config is present but the module is not, and degrades where it can (a trellis renders as one chart; renderer: 'canvas' falls back to SVG).
20
+
21
+ Premium (watermarked until an entitled premium/enterprise license): trellis, storyboard, link, ink, measure, context-menu, perspectives, history, and the unit/waffle and raincloud chart types. Premium and Tier 2 are independent: renderer-canvas is Tier 2 and free; unit/waffle is premium and Tier 1.
22
+
23
+ Two behaviors are on by default (both respect prefers-reduced-motion): coherent add/remove data-transition animations, and mobile pinch-zoom / two-finger pan.
9
24
 
10
25
  ## Framework wrapper detection — check `package.json` first
11
26
 
@@ -29,9 +44,9 @@ Wrappers handle `destroy()` automatically on unmount, accept reactive props, and
29
44
  10. **RadialBar values must be 0–100** (percentages).
30
45
  11. **Color hex values must include `#`** (e.g., `'#FF5733'`).
31
46
  12. **Tree-shaking**: `apexcharts/core` requires separate chart-type + feature imports.
32
- 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`.
47
+ 13. **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`.
33
48
  14. **`violin`** points use a density profile: `data: [{ x, y: { density: [[value, weight], ...], points?: [num] } }]`.
34
- 15. **`render()` is idempotent (v6)**: a repeated `render()` returns the same promise; still `destroy()` before a new instance on the same element.
49
+ 15. **`render()` is idempotent**: a repeated `render()` returns the same promise; still `destroy()` before a new instance on the same element.
35
50
 
36
51
  ---
37
52
 
@@ -56,6 +71,10 @@ Wrappers handle `destroy()` automatically on unmount, accept reactive props, and
56
71
  | Radar | `'radar'` | `[{ name, data: [num] }]` + `xaxis.categories` | `[{ data: [80, 50, 30] }]` |
57
72
  | Funnel *(v6)* | `'funnel'` | `[{ name, data: [num] }]` + `xaxis.categories`; order largest→smallest | `[{ data: [1380, 990, 548, 200] }]` |
58
73
  | Pyramid *(v6)* | `'pyramid'` | Same as funnel; order smallest→largest | `[{ data: [200, 548, 990, 1380] }]` |
74
+ | Waterfall *(v7.1)* | `'waterfall'` | `[{ name, data: [{ x, y }] }]` where y is the signed DELTA; a running-total row carries `isSubtotal` or `isTotal` and NO y | `[{ data: [{ x: 'Rev', y: 8786 }, { x: 'Cost', y: -2786 }, { x: 'Gross', isSubtotal: true }] }]` |
75
+ | Dumbbell *(v7.1)* | `'dumbbell'` | ONE SERIES PER MEASURE sharing x categories; not [low, high] pairs | `[{ name: '2020', data: [{ x: 'BE', y: 92 }] }, { name: '2025', data: [{ x: 'BE', y: 118 }] }]` |
76
+ | Streamgraph *(v7.1)* | `'streamgraph'` | Same as area; do NOT set chart.stacked (the chart owns baseline + order) | `[{ name: 'Drama', data: [{ x: '2024-01-01', y: 32 }] }]` |
77
+ | Raincloud *(v7.1, premium, TIER 2)* | `'raincloud'` | `[{ name, data: [{ x, points: [num] }] }]`: raw sample; configured via `plotOptions.violin` | `[{ data: [{ x: 'Control', points: [3.1, 4.7, 2.9] }] }]` |
59
78
 
60
79
  ### Non-Axis Charts (flat number array — NOT object format)
61
80
 
@@ -94,43 +113,62 @@ chart.destroy() // cleanup
94
113
  ## Import Paths
95
114
 
96
115
  ```
97
- apexcharts # Full bundle (all types + features)
116
+ apexcharts # Default bundle: every type except raincloud + the Tier 1 features
98
117
  apexcharts/core # Bare core (must register types + features manually)
99
118
  apexcharts/line # line, area, scatter, bubble, rangeArea
100
- apexcharts/bar # bar, column, rangeBar, funnel, pyramid (v6 aliases)
119
+ apexcharts/bar # bar, column, rangeBar, funnel, pyramid (aliases)
120
+ apexcharts/waterfall # waterfall (v7.1) = bar + features/waterfall
121
+ apexcharts/dumbbell # dumbbell (v7.1) = bar + features/dumbbell
122
+ apexcharts/streamgraph # streamgraph (v7.1) = rangeArea + features/streamgraph
101
123
  apexcharts/candlestick # candlestick, boxPlot
102
- apexcharts/violin # violin (v6)
124
+ apexcharts/violin # violin
125
+ apexcharts/raincloud # raincloud (v7.1, premium, TIER 2) = violin + features/raincloud
126
+ apexcharts/histogram # histogram (v6.9) = bar + features/stats
103
127
  apexcharts/pie # pie, donut, polarArea
104
- apexcharts/radialBar # radialBar, gauge (v6 alias)
128
+ apexcharts/radialBar # radialBar, gauge (alias)
105
129
  apexcharts/radar # radar
106
130
  apexcharts/heatmap # heatmap
107
131
  apexcharts/treemap # treemap
132
+ apexcharts/sunburst # sunburst (v6.7)
133
+ apexcharts/unit # unit, waffle (v6.6, premium)
134
+ apexcharts/unit-shapes # unit-chart shape kit (v6.10), named exports
135
+ apexcharts/pictograms # pictogram glyphs (v7.0), named exports
108
136
  apexcharts/ssr # Server-side rendering (Node.js)
109
137
  apexcharts/client # Explicit browser import
110
138
 
111
- # Optional features (side-effect imports)
139
+ # TIER 1 features: already in the default `apexcharts` bundle.
140
+ # Import only if you started from /core or a per-type entry.
112
141
  apexcharts/features/exports # dataURI(), exportToCSV()
113
142
  apexcharts/features/legend # Legend component
114
143
  apexcharts/features/toolbar # Zoom, pan, download
115
144
  apexcharts/features/annotations # X/Y/point annotations
116
145
  apexcharts/features/keyboard # Keyboard navigation
117
- # v6 feature platform (all opt-in):
146
+ apexcharts/features/stats # histogram binning, raw-sample summaries, rowSeries()
118
147
  apexcharts/features/morph # animated chart-type morphs
119
148
  apexcharts/features/drilldown # hierarchical drill-down
120
- apexcharts/features/history # undo/redo (Rewind)
121
- apexcharts/features/perspectives # shareable view state
122
- apexcharts/features/storyboard # scrollytelling
123
149
  apexcharts/features/facet # design tokens + OS themes
124
150
  apexcharts/features/weave # plugin platform
125
- apexcharts/features/renderer-canvas # hybrid SVG + canvas renderer (Strata)
126
151
  apexcharts/features/marks # custom series types (registerSeriesType)
127
- apexcharts/features/link # crossfilter / linked views
128
- apexcharts/features/ink # on-chart annotation authoring
129
- apexcharts/features/measure # measure / delta ruler
130
- apexcharts/features/context-menu # right-click context menu
131
- apexcharts/features/all # All features
152
+ apexcharts/features/waterfall # (v7.1) waterfall type
153
+ apexcharts/features/dumbbell # (v7.1) dumbbell type
154
+ apexcharts/features/streamgraph # (v7.1) streamgraph type
155
+ apexcharts/features/all # Tier 1 only: NOT a shortcut past Tier 2
156
+
157
+ # TIER 2 features: in NO bundle. Required whatever entry point you used.
158
+ apexcharts/features/trellis # (v7.0) small multiples (premium)
159
+ apexcharts/features/storyboard # scrollytelling (premium; registers perspectives)
160
+ apexcharts/features/perspectives # shareable view state (premium)
161
+ apexcharts/features/ink # on-chart annotation authoring (premium)
162
+ apexcharts/features/renderer-canvas # hybrid SVG + canvas renderer (Strata)
163
+ apexcharts/features/link # crossfilter / linked views (premium)
164
+ apexcharts/features/measure # measure / delta ruler (premium)
165
+ apexcharts/features/history # undo/redo (Rewind, premium)
166
+ apexcharts/features/context-menu # right-click context menu (premium)
167
+ apexcharts/features/raincloud # (v7.1) raincloud type (premium)
132
168
  ```
133
169
  (Cadence easing and real-time streaming are core: no feature import needed.)
170
+ Script tags: every Tier 2 module has a `dist/features/<name>.js`, and a full-bundle page still needs it.
171
+ Lean core channel (v7.0): `dist/apexcharts.core.js` + `dist/line.js` + `dist/features/legend.js`, 136,921 B gzipped vs 252,005 for the full bundle.
134
172
 
135
173
  ---
136
174
 
package/README.md CHANGED
@@ -11,20 +11,24 @@ AI coding skill for building [ApexCharts.js](https://apexcharts.com/) charts and
11
11
  > | **ApexTree** — hierarchy / org charts | `apextree` | [`apextree-skill`](https://github.com/apexcharts/apextree-skill) |
12
12
  > | **ApexSankey** — flow / Sankey | `apexsankey` | [`apexsankey-skill`](https://github.com/apexcharts/apexsankey-skill) |
13
13
  > | **Apex Grid** — data grid | `apex-grid` | [`apexgrid-skill`](https://github.com/apexcharts/apexgrid-skill) |
14
+ | **ApexStock**: financial / OHLC | `apexstock` | [`apexstock-skill`](https://github.com/apexcharts/apexstock-skill) |
15
+ | **ApexMaps**: maps / geo | `apexmaps` | [`apexmaps-skill`](https://github.com/apexcharts/apexmaps-skill) |
14
16
 
15
17
  ## What This Does
16
18
 
17
19
  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.
18
20
 
19
- This skill targets **ApexCharts v6** (backward compatible with v5 configs).
21
+ This skill targets **ApexCharts v7** (v5 and v6 configs keep working, apart from two v7.0 breaking changes the skill documents).
22
+
23
+ > **The v7.0 change to know about:** the default bundle no longer ships every feature. Nine features (trellis, storyboard, perspectives, ink, canvas renderer, link, measure, history, context menu) plus the `raincloud` chart type now need an explicit `import 'apexcharts/features/<name>'` **even on the full bundle**. This is the most common v6 → v7 upgrade failure, so the skill leads with it.
20
24
 
21
25
  ### Coverage
22
26
 
23
- - **24 chart types**: line, area, bar, pie, donut, radialBar, scatter, bubble, heatmap, candlestick, boxPlot, violin, histogram, radar, polarArea, rangeBar, rangeArea, treemap, funnel, pyramid, gauge, sunburst, unit, waffle
27
+ - **28 chart types**: line, area, bar, pie, donut, radialBar, scatter, bubble, heatmap, candlestick, boxPlot, violin, histogram, radar, polarArea, rangeBar, rangeArea, treemap, funnel, pyramid, gauge, sunburst, unit, waffle, waterfall, dumbbell, streamgraph, raincloud
24
28
  - **Correct data formats** for every chart type
25
29
  - **Common pitfalls** with wrong/correct code examples
26
- - **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, raw-sample statistics (Stats), unit-chart shape kit (`apexcharts/unit-shapes`)
27
- - **Tree-shaking** and bundle optimization patterns
30
+ - **Feature platform**: small multiples (Trellis), 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, raw-sample statistics (Stats), unit-chart shape kit (`apexcharts/unit-shapes`), pictogram glyphs (`apexcharts/pictograms`)
31
+ - **Bundle tiers** (which features are in the default v7 bundle and which are not), tree-shaking, and the lean-core script-tag channel
28
32
  - **SSR** (server-side rendering) and hydration
29
33
  - **Framework integration**: React, Vue 3, Angular
30
34
 
@@ -78,14 +82,14 @@ const barCharts = await readFile(referencePath('bar-charts.md'), 'utf8');
78
82
  ├── SKILL.md # Main entry point — read this first
79
83
  ├── .cursorrules # Self-contained version for Cursor/Windsurf
80
84
  ├── references/
81
- │ ├── cartesian-charts.md # line, area, scatter, bubble, rangeArea
82
- │ ├── bar-charts.md # bar, column, rangeBar, timeline/Gantt, funnel, pyramid
83
- │ ├── financial-charts.md # candlestick, boxPlot, violin, histogram
84
- │ ├── circular-charts.md # pie, donut, polarArea, radialBar, gauge, sunburst, unit, waffle
85
+ │ ├── cartesian-charts.md # line, area, scatter, bubble, rangeArea, streamgraph
86
+ │ ├── bar-charts.md # bar, column, rangeBar, timeline/Gantt, funnel, pyramid, waterfall, dumbbell
87
+ │ ├── financial-charts.md # candlestick, boxPlot, violin, histogram, raincloud
88
+ │ ├── circular-charts.md # pie, donut, polarArea, radialBar, gauge, sunburst, unit, waffle, pictograms
85
89
  │ ├── grid-charts.md # heatmap, treemap
86
90
  │ ├── radar-charts.md # radar
87
- │ ├── v6-features.md # v6 feature platform (plugins, canvas, undo/redo, themes, ...)
88
- │ ├── tree-shaking.md # bundle optimization
91
+ │ ├── feature-platform.md # feature platform + bundle tiers (trellis, plugins, canvas, undo/redo, ...)
92
+ │ ├── tree-shaking.md # bundle tiers and optimization
89
93
  │ ├── ssr.md # server-side rendering
90
94
  │ └── framework-wrappers.md # React, Vue, Angular
91
95
  └── install/