apexcharts-skill 2.0.1 → 2.1.0

package/SKILL.md

@@ -4,7 +4,8 @@ description: >
   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,
-  violin, radar, polarArea, rangeBar, rangeArea, treemap, funnel, pyramid, gauge). Covers
+  violin, radar, polarArea, rangeBar, rangeArea, treemap, funnel, pyramid, gauge, sunburst,
+  unit, waffle). 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 /
@@ -12,8 +13,8 @@ description: >
   (`react-apexcharts`, `vue3-apexcharts`, `ng-apexcharts`) over the core API.
 metadata:
   author: ApexCharts
-  version: "2.0.1"
-  library_version: "6.2.0"
+  version: "2.1.0"
+  library_version: "6.7.0"
   category: data-visualization
   tags: [charts, visualization, javascript, typescript, svg, apexcharts]
   docs: https://apexcharts.com/docs/
@@ -31,6 +32,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.
+>
+> **Premium features and licensing (6.5.0+).** Seven of the v6 features are premium: `storyboard`, `link` (crossfilter / linked views), `ink` (annotation authoring), `measure`, `context-menu`, `perspectives` (shareable views), and `history` (undo/redo). The `unit` / `waffle` chart type is also premium (6.6.0+). These still function fully, but render an `APEXCHARTS` trial watermark until an entitled license is set via `ApexCharts.setLicense(key)` (static) or per-chart `chart.license`. As of 6.7.0 they require a `premium` or `enterprise` plan; a `pro` key or the free tier keeps the watermark. Every other chart type and free module is never gated. See the Licensing section in `references/v6-features.md`.
 
 ## 1. Critical Rules
 
@@ -76,14 +79,14 @@ This is the most critical reference. Using the wrong data format is the #1 cause
 | 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, gauge)
+### Non-Axis Charts (pie, donut, radialBar, polarArea, gauge, unit, waffle)
 
 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', 'gauge'
+  chart: { type: 'pie' },  // or 'donut', 'polarArea', 'radialBar', 'gauge', 'unit', 'waffle'
   series: [44, 55, 13, 43, 22],
   labels: ['Team A', 'Team B', 'Team C', 'Team D', 'Team E']
 }
@@ -91,6 +94,29 @@ These use a **flat number array** for `series`, NOT the object format:
 
 **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`).
 
+**Unit / Waffle *(v6.6, premium)*** render one mark per unit of value (dot clusters, pictograms, waffles, beeswarms). Same flat-array + `labels` shape as pie; layout is chosen through `plotOptions.unit.layout`. A per-mark object form (`series: [{ name, data: [{ value, x, z, name, fillColor, id }] }]`) gives each mark its own color, position, size, and tooltip. `waffle` is a preset alias of `unit` (grid layout). Both render an `APEXCHARTS` watermark until an entitled license is set. See `references/circular-charts.md`.
+
+### Hierarchical Charts (sunburst)
+
+**Sunburst *(v6.7, free)*** draws tree-structured data as concentric rings (a nested pie / donut). It uses the axis-style `[{ data: [...] }]` wrapper, but each datum is an `{ x, y, children }` node nested to any depth:
+
+```js
+{
+  chart: { type: 'sunburst' },
+  series: [{
+    data: [
+      { x: 'Mobile', y: 55, children: [
+        { x: 'iOS', y: 30, children: [{ x: 'iOS 17', y: 18 }, { x: 'iOS 16', y: 9 }] },
+        { x: 'Android', y: 23 }
+      ] },
+      { x: 'Desktop', y: 33, children: [{ x: 'Windows', y: 20 }, { x: 'macOS', y: 10 }] }
+    ]
+  }]
+}
+```
+
+Configure the centre hole, corner rounding, and inter-arc gap through `plotOptions.sunburst` (see `references/circular-charts.md`).
+
 ---
 
 ## 3. Package / Module Map
@@ -121,6 +147,8 @@ 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
+import ApexCharts from 'apexcharts/sunburst'      # sunburst (v6.7, hierarchical)
+import ApexCharts from 'apexcharts/unit'          # unit + waffle (v6.6, premium)
 # funnel + pyramid (v6) render through the bar engine; use apexcharts/bar
 
 # Optional features (side-effect imports — just import, no default export needed)
@@ -531,6 +559,7 @@ await chart.updateOptions({ title: { text: 'New Title' } })
 |---|---|
 | `ApexCharts.exec(chartID, fn, ...args)` | Call method on chart by its `chart.id`. |
 | `ApexCharts.getChartByID(chartID)` | Get chart instance by id. |
+| `ApexCharts.setLicense(key)` | *(v6.5)* Set the license key that clears the premium-feature trial watermark. Static, family-shared, offline, SSR-safe; call before `render()`. Per-chart override is `chart.license`. As of 6.7.0 requires a `premium`/`enterprise` plan. |
 | `ApexCharts.merge(target, source)` | Deep-merge objects. |
 | `ApexCharts.use(typeMap)` | Register chart type constructors (tree-shaking). |
 | `ApexCharts.registerFeatures(featureMap)` | Register optional feature modules. |
@@ -632,7 +661,7 @@ For detailed chart-family-specific options, data format variants, and full worki
 | Line, Area, Scatter, Bubble, Range Area | `references/cartesian-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` |
+| Pie, Donut, Polar Area, Radial Bar, Gauge, Sunburst, Unit, Waffle | `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` |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "apexcharts-skill",
-  "version": "2.0.1",
+  "version": "2.1.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

@@ -213,6 +213,28 @@ plotOptions: {
 }
 ```
 
+### Bar Chart Race (v6.4)
+
+A reorder update animates into a bar chart race: when you re-sort the data and update the chart, the bars slide to their new ranks and their category labels ride along automatically (whenever `dynamicAnimation` is on). Two opt-in `dataLabels` flags complete the effect. Both are off by default and apply to **bar / column only**; their speed and easing follow `chart.animations.dynamicAnimation`.
+
+```js
+const options = {
+  chart: {
+    type: 'bar',
+    animations: { dynamicAnimation: { speed: 800 } },
+  },
+  plotOptions: { bar: { horizontal: true } },
+  dataLabels: {
+    enabled: true,
+    animate: { enabled: true },  // value labels ride to the new rank instead of snapping
+    countUp: { enabled: true },  // and count up/down from the previous value (formatter runs each frame)
+  },
+}
+// On each frame, re-sort your data and call updateOptions (or updateSeries) with the
+// new series and categories. Bars, category labels, and value labels animate together.
+// Rotated axis labels ride correctly too.
+```
+
 ### Goals / Target Markers
 
 ```js

package/references/circular-charts.md

@@ -7,6 +7,8 @@
 - **Polar Area** (`'polarArea'`) — Radial segments with equal angles, varying radius
 - **Radial Bar** (`'radialBar'`): Circular progress chart (one or more concentric tracks)
 - **Gauge** (`'gauge'`, **new in v6**): Single-value gauge with arc/needle shapes, colored bands, and ticks
+- **Sunburst** (`'sunburst'`, **new in v6.7, free**): Hierarchical nested pie/donut; concentric rings, one per level
+- **Unit / Waffle** (`'unit'` / `'waffle'`, **new in v6.6, premium**): One mark per unit of value (dot clusters, pictograms, waffles, beeswarms, parliament)
 
 ## Tree-Shakeable Import
 
@@ -18,6 +20,12 @@ import ApexCharts from 'apexcharts/pie'
 import ApexCharts from 'apexcharts/radialBar'
 // Registers: radialBar (separate entry point)
 // Also covers gauge (it normalizes to the radialBar engine in v6)
+
+import ApexCharts from 'apexcharts/sunburst'
+// Registers: sunburst (v6.7, hierarchical). Free, not gated.
+
+import ApexCharts from 'apexcharts/unit'
+// Registers: unit + waffle (v6.6). Premium: watermarked until a license is set.
 ```
 
 ---
@@ -94,6 +102,104 @@ A gauge is a single-value `radialBar` alias. Series is a flat one-element array;
 
 A plain radialBar is effectively a gauge with `shape: 'arc'`. A semi-circle gauge is `startAngle: -90, endAngle: 90`.
 
+### Sunburst (v6.7)
+
+A sunburst draws a hierarchy as concentric rings: the first level fills a donut around the centre hole, and each deeper level stacks outward, with every child arc constrained to its parent's angular wedge. It is a **free** chart type (not gated). Data uses the axis-style `[{ data: [...] }]` wrapper, but each datum is an `{ x, y, children }` node nested to any depth. A leaf node omits `children`.
+
+```js
+{
+  chart: { type: 'sunburst', height: 380 },
+  series: [{
+    data: [
+      { x: 'Mobile', y: 55, children: [
+        { x: 'iOS', y: 30, children: [
+          { x: 'iOS 17', y: 18 },
+          { x: 'iOS 16', y: 9 }
+        ] },
+        { x: 'Android', y: 23 }
+      ] },
+      { x: 'Desktop', y: 33, children: [
+        { x: 'Windows', y: 20 },
+        { x: 'macOS', y: 10 }
+      ] }
+    ]
+  }],
+  plotOptions: {
+    sunburst: {
+      innerSize: '25%',      // centre hole radius as a % of max radius (or px)
+      borderRadius: 5,       // round the arc corners (px), same semantics as pie.borderRadius
+      spacing: 1,            // gap between adjacent arcs (px), same semantics as pie.spacing
+      startAngle: 0,
+      endAngle: 360,
+      leaf: 'extend',        // 'extend' draws a shallow branch's leaf to the rim | 'stop'
+      partition: 'normalize', // angular partition of a parent's wedge among children: 'normalize' | 'strict'
+      tint: 0,               // per-depth lightening of the parent colour (0 = same, 1 = white)
+      zoomOnClick: true,     // click a wedge to zoom into its branch (breadcrumb to go back). Default true
+      dataLabels: {
+        show: true,
+        minAngleToShow: 5,   // hide the label on any arc narrower than this (degrees)
+        style: { fontSize: '12px', colors: ['#fff'] }
+      }
+    }
+  }
+}
+```
+
+Colours, `stroke`, `legend`, and `title` behave as they do on pie and donut. A sunburst can also adapt an existing `drilldown` config instead of a native `children` hierarchy.
+
+### Unit / Waffle (v6.6, premium)
+
+A `unit` chart renders one discrete mark for every unit of value instead of a single bar or slice, so "37 of 200" reads as a countable quantity. It is a **non-axis** chart (dispatched like pie or treemap) and is **premium**: it renders fully in trial mode with an `APEXCHARTS` watermark until an entitled license is set (see `references/v6-features.md`). On every update each mark tweens from its old position to its new one, so re-grouping, filtering, or a changing count re-forms the marks.
+
+Data is the same flat number array + `labels` shape as pie:
+
+```js
+{
+  chart: { type: 'unit', height: 360 },
+  series: [276, 266, 3],
+  labels: ['For', 'Against', 'Abstain'],
+  plotOptions: { unit: { layout: 'grouped' } }
+}
+```
+
+**Layouts** via `plotOptions.unit.layout`:
+
+- `grouped` (default): one phyllotaxis blob per category, laid out in a row.
+- `packed`: one shared blob, coloured by group (`sortByGroup: true` nests the minority in the centre).
+- `columns`: each category is a vertical bar built from stacked dots (a waffle column).
+- `grid`: one waffle lattice, a part-to-whole square "pie" (`grid.total: 100` rounds it to a fixed cell budget for a percentage waffle; `grid.split: true` makes small-multiple mini-waffles).
+- `scatter`: a beeswarm on real value axes (`scatter.y: 'lanes'` default, or `'value'` for a 2D value-value plot; `scatter.sizeRange` for area-scaled bubbles).
+- `arc` (**v6.7**): a parliament / hemicycle, seats in concentric arced rows across an annulus, filled in category order.
+
+**Also available:** `shape` (`'circle'` | `'square'` | `'image'` pictogram with `image.tint`); per-mark object data `series: [{ name, data: [{ value, x, z, name, fillColor, id }] }]`; `transition` (`'group'` default | `'flow'` crowd migration | `'identity'` keyed by `id`/`name`); numeric or `'auto'` dot `size`; `sizeByValue` bubbles; `unitValue` (1 mark = N units); `maxUnits` cap; per-cluster `clusterLabels`; and per-mark `tooltip.formatter`.
+
+`waffle` is a thin alias of `unit` that presets the `grid` layout with square cells. With `grid.total: 100` the values are largest-remainder rounded to exactly 100 cells, so the grid reads as percentages. The original alias is preserved on the read-only `chart.requestedType`; an explicit `layout` or `shape` still wins.
+
+```js
+{
+  chart: { type: 'waffle', height: 360 },
+  series: [35, 23, 15, 9, 8, 6, 4],
+  labels: ['Coal', 'Gas', 'Hydro', 'Nuclear', 'Wind', 'Solar', 'Other'],
+  plotOptions: { unit: { grid: { columns: 10, total: 100 } } }
+}
+```
+
+A parliament (hemicycle) seat chart:
+
+```js
+{
+  chart: { type: 'unit', height: 320 },
+  series: [120, 95, 60, 25],
+  labels: ['Party A', 'Party B', 'Party C', 'Party D'],
+  plotOptions: {
+    unit: {
+      layout: 'arc',
+      arc: { startAngle: -90, endAngle: 90, innerRadiusRatio: 0.4, rows: 'auto' }
+    }
+  }
+}
+```
+
 ---
 
 ## Key plotOptions
@@ -111,6 +217,9 @@ plotOptions: {
 
     customScale: 1,            // scale the pie (0.5 = half size)
 
+    borderRadius: 0,           // (v6.7) round each slice's corners (px). Applies to pie, donut, polarArea
+    spacing: 0,                // (v6.7) gap between adjacent slices (px). Applies to pie, donut, polarArea
+
     dataLabels: {
       offset: 0,               // move labels away from center
       minAngleToShowLabel: 10   // hide labels on tiny slices
@@ -266,3 +375,5 @@ plotOptions: {
 6. **Polar Area confused with Radar** — polar area uses `series: [num]` (flat), radar uses `series: [{ data: [num] }]` (axis format). They look similar but have different data shapes.
 7. **Looking for `plotOptions.gauge`**: it does not exist. Gauge is a `radialBar` alias; configure `shape`, `bands`, `ticks`, `needle`, and `min`/`max` under `plotOptions.radialBar`.
 8. **Gauge value outside `min`/`max`**: unlike a plain radialBar (fixed 0-100), a gauge maps its value to the `min..max` domain you set. A value beyond that domain saturates at the arc ends.
+9. **Legend click now toggles the slice (v6.7 behavior change)**: on pie, donut, and polarArea a legend click hides and shows the slice (like other chart types). Previously it darkened and expanded the slice. If your app relied on the old darken-and-expand behavior, review this.
+10. **Expecting `unit` / `waffle` without a license to be watermark-free**: they are premium and render an `APEXCHARTS` watermark until an entitled `premium`/`enterprise` license is set. Sunburst, by contrast, is free.

package/references/grid-charts.md

@@ -46,6 +46,49 @@ Each series is a row; each data point is a cell. The `y` value determines the co
 }
 ```
 
+#### Continuous numeric / datetime x-axis (v6.4)
+
+By default a heatmap tiles one cell per column by index. On a **numeric or datetime** x-axis (`xaxis.type: 'numeric'` or `'datetime'`), cells are instead placed at their real x value, so irregular spacing and gaps render as real empty space: a missing hour is a gap in the grid, not a squeezed column, and the axis shows sparse proportional ticks rather than one label per cell. Rows stay categorical (one series per row).
+
+```js
+{
+  chart: { type: 'heatmap', height: 350 },
+  xaxis: { type: 'datetime' },
+  series: [{
+    name: 'Server 1',
+    data: [
+      { x: new Date('2024-01-01T09:00').getTime(), y: 20 },
+      { x: new Date('2024-01-01T11:00').getTime(), y: 80 }, // 10:00 is absent -> real gap
+      { x: new Date('2024-01-01T12:00').getTime(), y: 65 }
+    ]
+  }]
+}
+```
+
+#### Canvas rendering for large heatmaps (v6.4)
+
+With `chart.renderer: 'canvas'` (or `'auto'` past `chart.rendererThreshold`) and the canvas feature imported, heatmap cells paint to a single canvas instead of one `<rect>` per cell, which is several times faster for large grids (roughly 3x at 50,000+ cells).
+
+```js
+import ApexCharts from 'apexcharts'
+import 'apexcharts/features/renderer-canvas'
+
+const options = {
+  chart: {
+    type: 'heatmap',
+    renderer: 'canvas',   // 'svg' | 'canvas' | 'auto'
+  },
+}
+```
+
+#### Heatmap default changes (v6.4)
+
+Three heatmap defaults changed in 6.4.0. Each is a default, not a removal:
+
+- **Tooltip anchored above the cell.** The heatmap tooltip now sits centered above the hovered cell with a downward arrow pointing at it (flipping below when the cell is against the top edge), instead of following the cursor.
+- **Zoom is off by default.** Re-enable with `chart.zoom: { enabled: true }` if you need it.
+- **Y-axis label thinning.** Dense y-axis (row) labels are thinned to fit.
+
 ### Treemap
 
 Flat list of `{ x, y }` where `x` is the label and `y` is the value (determines area).

package/references/tree-shaking.md

@@ -36,6 +36,8 @@ Each entry point registers a family of related chart types:
 | `apexcharts/radar` | radar |
 | `apexcharts/heatmap` | heatmap |
 | `apexcharts/treemap` | treemap |
+| `apexcharts/sunburst` | sunburst *(new in v6.7, free)* |
+| `apexcharts/unit` | unit, **waffle** *(new in v6.6, premium: watermarked until licensed)* |
 
 **v6 first-class aliases:** `funnel` and `pyramid` render through the bar engine, so `apexcharts/bar` covers them. `gauge` renders through radialBar, so `apexcharts/radialBar` covers it. There is no separate `apexcharts/funnel`, `apexcharts/pyramid`, or `apexcharts/gauge` entry.
 

package/references/v6-features.md

@@ -11,6 +11,45 @@ Also new by default: **`render()` is idempotent**: a repeated `render()` (e.g. a
 
 ---
 
+## Licensing: premium features and the trial watermark
+
+Introduced in **6.5.0**, tightened in **6.7.0**. Not every v6 feature is free. Seven feature modules plus the `unit` / `waffle` chart type are **premium** and run under a lightweight, offline license check. They keep working fully without a key (trial mode), but the chart shows an unobtrusive `APEXCHARTS` watermark until an entitled license is set.
+
+**The premium set (watermarked until entitled):**
+
+- `storyboard` (scrollytelling)
+- `link` (crossfilter / linked views)
+- `ink` (annotation authoring)
+- `measure` (delta ruler)
+- `context-menu` (`contextMenu`)
+- `perspectives` (shareable view state)
+- `history` (undo/redo, Rewind)
+- the `unit` / `waffle` chart type (premium since **6.6.0**, the first premium chart type)
+
+**Everything else is free and never gated**: every other chart type (including `sunburst`), and every other module (Weave, Strata / canvas, Marks, Facet / themes, Cadence, drilldown, streaming, exports, legend, toolbar, annotations, keyboard).
+
+### Setting a license
+
+```js
+// Static: applies to every chart on the page. Call before render().
+ApexCharts.setLicense('APEX-...')
+
+// Per-chart: overrides the static key and window.Apex.license for this chart.
+const options = { chart: { license: 'APEX-...' } }
+```
+
+Both are typed: `ApexCharts.setLicense(key: string)` (static) and `chart.license?: string`.
+
+- **In use, not bundled.** Importing a premium module without actually enabling it does not watermark; only *using* it does.
+- **Live.** A late `setLicense(validKey)` followed by an update clears an on-screen watermark; no full re-render needed. The watermark is re-evaluated on every render/update.
+- **One key across the family.** The key format is shared across the ApexCharts family (apexgantt, apextree, apexsankey, apex-grid-enterprise, apexstock), validated offline with no network call. SSR-safe.
+
+### Plan entitlement (6.7.0 behavior change)
+
+As of **6.7.0** the premium features clear the watermark only on a `premium` or `enterprise` plan. A valid `pro` key, or the free tier, keeps them in trial mode with the watermark and logs a one-time upgrade notice (it is **not** treated as an invalid key). **Existing `pro`-plan customers using these features will now see the watermark.** No functionality is blocked in any case, the watermark is the only effect.
+
+---
+
 ## Weave: public plugin platform
 
 `import 'apexcharts/features/weave'`
@@ -116,6 +155,8 @@ Dumbbell uses `dataType: 'rangeXY'` (datum `y` is `[start, end]`, both bounds fo
 
 `import 'apexcharts/features/history'`
 
+**Premium** (watermarked in trial mode until an entitled license is set, see Licensing above).
+
 Generic Ctrl-Z over a command journal. Zooms, series toggles, option changes, and annotation edits are recorded; high-frequency gestures coalesce into a single step.
 
 ```js
@@ -137,6 +178,8 @@ chart.history.entries()        // [{ id, label, at }]
 
 `import 'apexcharts/features/perspectives'`
 
+**Premium** (watermarked in trial mode until an entitled license is set, see Licensing above).
+
 Serialize the exact view (zoom window, hidden series, selection, annotations, theme) into a compact token you can put in a URL and restore anywhere.
 
 ```js
@@ -219,6 +262,8 @@ Built-in curve names: `linear`, `easeInSine`, `easeOutSine`, `easeInOutSine`, `e
 
 `import 'apexcharts/features/link'`
 
+**Premium** (watermarked in trial mode until an entitled license is set, see Licensing above).
+
 Coordinate a group of charts without wiring.
 
 ```js
@@ -255,6 +300,8 @@ const b = {
 
 `import 'apexcharts/features/ink'`
 
+**Premium** (watermarked in trial mode until an entitled license is set, see Licensing above).
+
 Annotations become draggable and resizable, with click-to-create, snap to gridlines, and a floating editor card (rename, recolor, bold, font size, marker size/shape, delete). Every edit is undoable when Rewind is enabled.
 
 ```js
@@ -277,6 +324,8 @@ const options = {
 
 `import 'apexcharts/features/measure'`
 
+**Premium** (watermarked in trial mode until an entitled license is set, see Licensing above).
+
 Hold a key and drag to read the change, percent, range, and slope between two points; on release the ruler pins as a data-anchored overlay that re-projects on zoom and resize.
 
 ```js
@@ -324,6 +373,8 @@ const options = {
 
 `import 'apexcharts/features/context-menu'`
 
+**Premium** (watermarked in trial mode until an entitled license is set, see Licensing above).
+
 Right-click or long-press a data point for actions that operate at that exact point.
 
 ```js
@@ -350,6 +401,8 @@ Built-in `annotate` / `xline` / `yline` items are ink-managed when the ink featu
 
 `import 'apexcharts/features/storyboard'` (includes Perspectives)
 
+**Premium** (watermarked in trial mode until an entitled license is set, see Licensing above).
+
 Pair prose sections with saved views. Scrolling a beat past the viewport trigger applies its view; scrolling back reverses it. A beat can also merge an `options` payload to restyle or morph `chart.type` inside one animated transition.
 
 ```js
@@ -423,6 +476,34 @@ chart.drillToRoot()
 
 ---
 
+## Point annotation tooltips (6.7.0)
+
+`import 'apexcharts/features/annotations'` (free, part of the standard annotations module)
+
+A point annotation can now show its own hover tooltip, so an annotated marker carries explanatory text without a separate custom element. Add `tooltip` to any entry in `annotations.points`:
+
+```js
+const options = {
+  annotations: {
+    points: [{
+      x: 'Mar',
+      y: 62,
+      marker: { size: 6, fillColor: '#FF4560' },
+      label: { text: 'Peak' },
+      tooltip: {
+        enabled: true,
+        text: 'All-time high: 62',   // string, or an array joined with line breaks; falls back to label.text
+        // formatter: (opts) => `<b>${opts.annotation.label.text}</b>`  // HTML, takes precedence over text
+      },
+    }],
+  },
+}
+```
+
+`tooltip.formatter` receives `{ annotation, seriesIndex, id, ... }` and returns HTML.
+
+---
+
 ## Common Pitfalls
 
 1. **Forgetting the feature import**: every v6 feature is off until you `import 'apexcharts/features/<name>'` (or use the full `apexcharts` bundle). Enabling the config alone does nothing if the feature isn't in the bundle.