apexcharts-skill 3.0.0 → 4.0.0

package/references/bar-charts.md

@@ -2,7 +2,7 @@
 
 ## Chart Types Covered
 
-- **Column** (`'bar'`) — Vertical column chart (the default for `type: 'bar'`)
+- **Column** (`'bar'`, or `'column'` since v7.9): Vertical column chart (the default for `type: 'bar'`). `chart.type: 'column'` is a plain synonym, rewritten to `'bar'` on the way in, so `w.config.chart.type` reads `'bar'`. Before v7.9 it broke the chart, so write `'bar'` for older versions.
 - **Bar** (`'bar'` + `plotOptions.bar.horizontal: true`) — Horizontal bar chart
 - **Range Bar** (`'rangeBar'`) — Bars with start/end values (used for timelines, Gantt charts)
 - **Funnel** (`'funnel'`, **new in v6**): Stage-by-stage drop-off chart
@@ -23,7 +23,7 @@ import ApexCharts from 'apexcharts/waterfall'  // == apexcharts/bar + features/w
 import ApexCharts from 'apexcharts/dumbbell'   // == apexcharts/bar + features/dumbbell
 ```
 
-Both are **Tier 1**, so the default `apexcharts` bundle already has them and no import is needed there.
+**⚠️ Waterfall and dumbbell are Tier 2 since v8.0.** The default bundle no longer carries their features. Next to `import ApexCharts from 'apexcharts'` add only the feature, `import 'apexcharts/features/waterfall'` or `import 'apexcharts/features/dumbbell'` (script tag: `dist/features/waterfall.js` or `dist/features/dumbbell.js`). The bar renderer is already in the default bundle, and the `apexcharts/waterfall` / `apexcharts/dumbbell` entries above would add a second copy of it, so keep those for a tree-shaken build. Or use the full bundle (`apexcharts/full`, `dist/apexcharts.full.min.js`). Without the feature the chart draws an empty plot and the console names the import to add.
 
 **Alias note:** `funnel` and `pyramid` are first-class `chart.type` aliases that render through the bar engine. Use them directly as `chart.type`; you do **not** need `plotOptions.bar.isFunnel`. `plotOptions.funnel` carries the funnel-specific shape options.
 
@@ -197,6 +197,8 @@ Same shape as funnel, but order values **smallest → largest** so the wide base
 `chart.type: 'waterfall'` **accumulates the running total for you**. The series holds the **deltas**; a row flagged `isSubtotal` or `isTotal` draws the running total from zero at that position and carries **no `y` of its own**. Connectors bridge each bar's finish to the next one's start, and rising, falling and total bars take their own colors.
 
 ```js
+import 'apexcharts/features/waterfall'   // Tier 2 since v8.0: not in the default bundle
+
 {
   chart: { type: 'waterfall', height: 350 },
   series: [{
@@ -245,18 +247,22 @@ plotOptions: {
 
 A datum's own `fillColor` always wins over `plotOptions.waterfall.colors`.
 
+**Data labels (v7.8):** each step is written on its bar with no background chip, in ink that follows `chart.foreColor`, so it reads in either theme and on a small step whose label sits outside the bar. `dataLabels: { background: { enabled: true } }` brings the chip back.
+
 ### Dumbbell (v7.1)
 
 `chart.type: 'dumbbell'` compares two or more measures per category. **Each series is one measure**, and the chart joins them with a connector per category. You do not zip the values into `[low, high]` pairs.
 
 ```js
+import 'apexcharts/features/dumbbell'   // Tier 2 since v8.0: not in the default bundle
+
 {
   chart: { type: 'dumbbell', height: 350 },
   series: [
     { name: '2020', data: [{ x: 'Backend', y: 92 }, { x: 'Frontend', y: 78 }] },
     { name: '2025', data: [{ x: 'Backend', y: 118 }, { x: 'Frontend', y: 96 }] },
   ],
-  plotOptions: { bar: { horizontal: true } },  // rows; omit for columns
+  plotOptions: { bar: { horizontal: true } },  // rows, the default for dumbbell; set false for columns
 }
 ```
 
@@ -304,7 +310,7 @@ plotOptions: {
     distributed: false,       // true = different color per data point
     borderRadius: 4,          // rounded corners (number or object)
     borderRadiusApplication: 'end',  // 'end' | 'around'
-    // borderRadiusWhenStacked was REMOVED in v7.0, see the note below
+    borderRadiusWhenStacked: 'all',  // 'all' (default) | 'last'; stacked bars only, see the note below
 
     dataLabels: {
       position: 'top',        // 'top' | 'center' | 'bottom'
@@ -322,7 +328,12 @@ plotOptions: {
 }
 ```
 
-**⚠️ `borderRadiusWhenStacked` was removed in v7.0.** Rounded corners on a stacked bar are no longer a setting: corner ownership follows the **outer edge** of the stack, which is what `'last'` approximated and what `'all'` got wrong on any stack whose last series was empty. An unknown option is ignored, so leaving it in a config is harmless but does nothing. Delete it. Related v7.0 fixes: a stacked bar's bottom cap is now the top-rounded path mirrored (caps no longer invert or pop when a series collapses and rises again), and grouped stacked charts resolve caps per group rather than chart-wide, so every group gets its own bottom and top radius.
+**⚠️ `borderRadiusWhenStacked`: dropped in v7.0, restored working in v7.4.** v7.0 removed it as dead config (it had not been read for some time) and let corner ownership follow the stack's **outer edge** automatically. v7.4 made it a real option again, so at v7.4+ it is live and must not be deleted from a config:
+
+- `'all'` (the default) keeps the v7.0 look, both ends of the stack rounded. Existing charts are unchanged.
+- `'last'` rounds only the far end and leaves the baseline square.
+
+A stack of a single data point also stopped rounding its baseline in v7.4, which on a horizontal 100% stack with one category used to round the first segment on its inner edge. Related v7.0 fixes: a stacked bar's bottom cap is now the top-rounded path mirrored (caps no longer invert or pop when a series collapses and rises again), and grouped stacked charts resolve caps per group rather than chart-wide, so every group gets its own bottom and top radius.
 
 **⚠️ `dataLabels.animate.enabled` now defaults to `true` (v7.0), bar/column only.** Labels ride to their new position on a data-change update instead of snapping there, so they reflow on the same clock as the bars, markers and axis ticks. A label that has not moved is a per-label no-op; speed and easing follow `chart.animations.dynamicAnimation`. For the pre-v7 behavior:
 
@@ -330,9 +341,11 @@ plotOptions: {
 dataLabels: { animate: { enabled: false } }
 ```
 
+**⚠️ `dataLabels.avoidOverlap` is on by default (v7.8).** Labels that land on each other, across series too, are nudged apart along the value axis (left and right on a horizontal bar), each by at most about its own size. A pair that cannot be separated stays overlapping unless you pass `{ hide: true }`. Tune it with `{ gap, maxShift, hide }`, or set `false` to keep every label where it was placed. Rotated labels (`orientation: 'vertical'`) are never moved. A manual `offsetY` that only separated labels may no longer be needed.
+
 ### 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`.
+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 `dataLabels` flags complete the effect, both **bar / column only**: `animate.enabled` is **on by default** since v7.0 (it was opt-in before), and `countUp.enabled` is off. their speed and easing follow `chart.animations.dynamicAnimation`.
 
 ```js
 const options = {
@@ -372,6 +385,10 @@ series: [{
 }]
 ```
 
+### Part-of-whole overlay (v7.9, premium)
+
+Bar, column, funnel and pyramid charts take `highlightFilter`, which draws each value faded with a part of it solid in front (`highlightData` on a series, or `highlight` on a point), after `import 'apexcharts/features/highlight-filter'`. See "Highlight filter" in `references/feature-platform.md`.
+
 ---
 
 ## Complete Working Example — Grouped Column Chart
@@ -419,7 +436,7 @@ series: [{
 ## Family-Specific Pitfalls
 
 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.
+2. **Expecting stacking to be bar-only**: `chart.stacked: true` stacks `bar`, `area` and `line` series. In a mixed chart only the bar/column series stack by default (`chart.stackOnlyBar: true`); set `stackOnlyBar: false` to stack the line and area series too.
 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.
 5. **`distributed: true` with multiple series** — distributed coloring applies to each data point independently. With multiple series, each point gets a unique color which is usually not desired. Use `distributed: true` only with single-series charts.
@@ -428,5 +445,6 @@ series: [{
 8. **Pre-computing the running total for a waterfall** *(v7.1)*: the series carries the **deltas**; the chart accumulates. Feeding it cumulative values draws each bar from zero to the total, which is a column chart with extra steps.
 9. **Giving a waterfall subtotal row a `y`** *(v7.1)*: `isSubtotal` / `isTotal` rows are measured for you. Supply `x` and the flag, nothing else.
 10. **Zipping dumbbell values into `y: [lo, hi]`** *(v7.1)*: that is the older `plotOptions.bar.isDumbbell` range-bar form. `chart.type: 'dumbbell'` wants one series per measure, each with plain `{ x, y }` points.
-11. **Setting `borderRadiusWhenStacked`**: removed in v7.0. The option is ignored; stacked corner ownership follows the stack's outer edge automatically.
+11. **Assuming `borderRadiusWhenStacked` is still removed**: it was dead config in v7.0 through v7.3 and is a working option again from v7.4 (`'all'` default, `'last'` to leave the baseline square). Guidance written for v7.0 says to delete it; on v7.4+ that silently reverts a deliberate `'last'` to `'all'`.
 12. **Expecting data labels to snap on update** *(v7.0)*: `dataLabels.animate.enabled` now defaults to `true` on bar/column. Set it to `false` for the old behavior.
+13. **Waterfall or dumbbell on the default bundle** *(v8.0)*: draws an empty plot plus one console warning. Add `import 'apexcharts/features/waterfall'` (or `'apexcharts/features/dumbbell'`) next to `import ApexCharts from 'apexcharts'`.

package/references/cartesian-charts.md

@@ -20,7 +20,7 @@ import ApexCharts from 'apexcharts/line'
 import ApexCharts from 'apexcharts/streamgraph'  // == apexcharts/rangeArea + features/streamgraph
 ```
 
-Streamgraph is **Tier 1**, so the default `apexcharts` bundle already has it and no import is needed there.
+**⚠️ Streamgraph is Tier 2 since v8.0.** The default bundle no longer carries its feature. Next to `import ApexCharts from 'apexcharts'` add `import 'apexcharts/features/streamgraph'` (script tag: `dist/features/streamgraph.js`). The range-area renderer is already in the default bundle, and the `apexcharts/streamgraph` entry above would add a second copy of it, so keep that for a tree-shaken build. Or use the full bundle (`apexcharts/full`, `dist/apexcharts.full.min.js`). Without the feature the chart draws an empty plot and the console names the import to add.
 
 ---
 
@@ -135,6 +135,8 @@ Always use XY format:
 `chart.type: 'streamgraph'` stacks the series as flowing bands around a baseline chosen to keep the whole picture readable. Series format is the same as area; **the stacking is the chart's job, so do not set `chart.stacked`**.
 
 ```js
+import 'apexcharts/features/streamgraph'   // Tier 2 since v8.0: not in the default bundle
+
 {
   chart: { type: 'streamgraph', height: 350 },
   series: [
@@ -254,6 +256,29 @@ xaxis: {
 }
 ```
 
+### A way out of a zoom when the toolbar is hidden (v7.4)
+
+Hiding the toolbar does not disable drag-to-zoom (a drag is a deliberate gesture, unlike the wheel and the pinch), so a viewer can zoom a bare chart and then have nothing on screen that puts the range back.
+
+```js
+chart: {
+  toolbar: { show: false },
+  zoom: { enabled: true, resetControl: 'auto' }   // 'auto' is the default
+}
+```
+
+While the chart **is** zoomed and nothing else can reset it, one reset control is drawn where the toolbar would have been, and it goes when the range does. `Escape` resets under the same gate, and the event is left alone so a page listening for it still hears it.
+
+- `'auto'` (default): supply both only where there is no reset button already. A chart nobody zooms is untouched, so `toolbar: { show: false }` still means an empty chart for every viewer who does not zoom.
+- `true`: also force the control on where `toolbar.tools.reset` is off, which is the same dead end as a hidden toolbar.
+- `false`: turn off both the control and the key, for a page that supplies its own reset.
+
+Requires `zoom.enabled: true`. A completed drag-zoom now also focuses the chart, so the `+`, `-` and `0` keys are reachable straight after a mouse zoom.
+
+### Part-of-whole overlay (v7.9, premium)
+
+Line and area charts (stacked area too) take `highlightFilter`, which draws each value faded with a part of it solid in front (`highlightData` on a series, or `highlight` on a point), after `import 'apexcharts/features/highlight-filter'`. See "Highlight filter" in `references/feature-platform.md`.
+
 ---
 
 ## Complete Working Example — Line Chart with Datetime
@@ -310,6 +335,7 @@ xaxis: {
 6. **Setting `chart.stacked` on a streamgraph** *(v7.1)*: the chart owns its own stacking, baseline and band order through `plotOptions.streamgraph`. Reach for `offset: 'zero'` if what you actually want is a plain stacked area.
 7. **A series that starts with nulls used to mis-target the tooltip**: the hovered index resolved against the drawn points rather than the data, so the tooltip read the wrong point. Fixed in v7.1.
 8. **`autoScaleYaxis` scaling to points nobody can see**: before v7.1, zooming let one point just outside the window size the whole axis, and a series with nothing in the window still contributed. Fixed in v7.1; stacked charts now also scale to the stacked totals inside the window rather than to individual series.
+9. **Streamgraph on the default bundle** *(v8.0)*: draws an empty plot plus one console warning. Add `import 'apexcharts/features/streamgraph'` next to `import ApexCharts from 'apexcharts'`.
 
 ## Axis and layout fixes worth knowing (v7.0 / v7.1)
 

package/references/circular-charts.md

@@ -34,7 +34,7 @@ import { person, registerMarks } from 'apexcharts/pictograms'
 // Pictogram glyph collection (v7.0), one drawn mark per unit. See "Pictograms" below.
 ```
 
-All of these are **Tier 1** (in the default `apexcharts` bundle). Nothing in the circular family is Tier 2.
+**⚠️ Sunburst and unit / waffle are Tier 2 since v8.0.** Pie, donut, polarArea, radialBar and gauge are in the default `apexcharts` bundle; `sunburst` and `unit` (with the `waffle` alias and the beeswarm layout) are not. Add `import 'apexcharts/sunburst'` or `import 'apexcharts/unit'` next to `import ApexCharts from 'apexcharts'` (script tag: `dist/sunburst.js` or `dist/unit.js`), or use the full bundle (`apexcharts/full`, `dist/apexcharts.full.min.js`). Without it the chart draws nothing and the console says the type is not registered, naming the import.
 
 ---
 
@@ -52,7 +52,7 @@ All of these are **Tier 1** (in the default `apexcharts` bundle). Nothing in the
 }
 ```
 
-### Radial Bar (values 0–100)
+### Radial Bar (values on the min/max domain, default 0 to 100)
 
 ```js
 {
@@ -62,7 +62,7 @@ All of these are **Tier 1** (in the default `apexcharts` bundle). Nothing in the
 }
 ```
 
-**Important:** RadialBar values represent percentages (0–100). Values above 100 will overflow the track.
+**Important:** RadialBar values sit on the `plotOptions.radialBar.min` to `max` domain, which defaults to 0 to 100, so by default they read as percentages. A value outside the domain is clamped to the end of the arc; set `min` / `max` to plot raw values.
 
 ### Gauge (v6)
 
@@ -102,7 +102,7 @@ A gauge is a single-value `radialBar` alias. Series is a flat one-element array;
       },
       needle: { color: '#0F172A', length: '60%', baseWidth: 6, tipWidth: 1 },
       hollow: { size: '70%' },
-      dataLabels: { name: { show: false }, value: { offsetY: 32, fontSize: '28px', fontWeight: 700 } }
+      dataLabels: { name: { show: false }, value: { fontSize: '28px', fontWeight: 700 } }  // value sits below the needle (v7.9)
     }
   }
 }
@@ -110,11 +110,15 @@ 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`.
 
+**Needle value label (v7.9):** on a `gauge` with `shape: 'needle'` and no `plotOptions.radialBar.dataLabels.value.offsetY`, the value is placed below the farthest reach of the needle, so the two never cross (it used to sit under the needle). Set `offsetY` to place it yourself.
+
 ### 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
+import 'apexcharts/sunburst'   // Tier 2 since v8.0: not in the default bundle
+
 {
   chart: { type: 'sunburst', height: 380 },
   series: [{
@@ -155,6 +159,10 @@ A sunburst draws a hierarchy as concentric rings: the first level fills a donut
 
 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.
 
+A branch may **omit its own `y`** and be the sum of its children. That is the documented shape, but it only began working in v7.6: before that the non-axis parser required every datum to carry `x` and `y`, so a branch with only `children` was dropped, the series came back empty, and the chart drew nothing while warning about pie data. The samples all gave their top-level nodes a `y`, which is what hid it from the moment sunburst shipped.
+
+**The same tree in cartesian coordinates** is the `icicle` type *(v7.6)*: one band per depth level instead of concentric rings, labels horizontal at every depth, and `direction: 'up'` for flame graphs. It is an opt-in import. See `references/grid-charts.md`.
+
 ### 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/feature-platform.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.
@@ -162,6 +170,8 @@ A `unit` chart renders one discrete mark for every unit of value instead of a si
 Data is the same flat number array + `labels` shape as pie:
 
 ```js
+import 'apexcharts/unit'   // Tier 2 since v8.0: not in the default bundle
+
 {
   chart: { type: 'unit', height: 360 },
   series: [276, 266, 3],
@@ -190,6 +200,7 @@ A companion kit of **39 shapes** a count can take (a heart, a house, a globe, th
 
 ```js
 import ApexCharts from 'apexcharts'
+import 'apexcharts/unit'   // the unit type is not in the default bundle since v8.0
 import { heart } from 'apexcharts/unit-shapes'
 
 new ApexCharts(el, {
@@ -222,7 +233,7 @@ strokeFrom(path, opts?)          // your own centreline
 registerShapes([...])            // register so positions: '<name>' resolves by string
 ```
 
-Every shape carries metadata on `shape` (category, kind, and `minUnits`: the count below which it stops being recognisable; asking for fewer logs a console warning naming the shape). From a script tag, `dist/unit-shapes.js` exposes the kit as the global `ApexUnitShapes` with every shape pre-registered, so `positions: 'heart'` works by name.
+Every shape carries metadata on `shape` (category, kind, and `minUnits`: the count below which it stops being recognisable; asking for fewer logs a console warning naming the shape). From a script tag, load `dist/unit.js` (the unit type) and then `dist/unit-shapes.js`, which exposes the kit as the global `ApexUnitShapes` with every shape pre-registered, so `positions: 'heart'` works by name. The full bundle (`apexcharts/full`, `dist/apexcharts.full.min.js`) already has the unit type and registers every shape and pictogram by name.
 
 ### Pictograms (`apexcharts/pictograms`, v7.0)
 
@@ -230,6 +241,7 @@ A **shape** is where the units go; a **pictogram** is what one unit looks like.
 
 ```js
 import ApexCharts from 'apexcharts'
+import 'apexcharts/unit'   // the unit type is not in the default bundle since v8.0
 import { person, registerMarks } from 'apexcharts/pictograms'
 
 registerMarks([person])   // so pictogram.mark: 'person' resolves by name
@@ -426,6 +438,10 @@ plotOptions: {
 }
 ```
 
+### Part-of-whole overlay (v7.9, premium)
+
+Pie, donut, polarArea, radialBar and gauge charts take `highlightFilter`, which draws each value faded with a part of it solid in front (parts in `highlightFilter.data`, one per slice or ring, or `highlight` on a slice's `{ x, y }` point), after `import 'apexcharts/features/highlight-filter'`. See "Highlight filter" in `references/feature-platform.md`. While parts are shown, the donut and radialBar `total.formatter` reads the parts in `w.globals.seriesTotals` (unless `highlightFilter.dataLabels.total` is `'whole'`).
+
 ---
 
 ## Complete Working Example — Donut with Center Label
@@ -478,13 +494,13 @@ plotOptions: {
 ## Family-Specific Pitfalls
 
 1. **Using axis-chart series format** — `series: [{ name: 'A', data: [44, 55] }]` is WRONG for pie/donut. The x/y object form `series: [{ data: [{ x: 'A', y: 44 }] }]` works (ApexCharts normalizes it), but the canonical form is preferred: `series: [44, 55]` (flat array) + `labels: ['A', 'B']`.
-2. **RadialBar values above 100** — values represent percentages and will overflow. If you have raw values, calculate percentages first: `(value / max) * 100`.
+2. **RadialBar raw values on the default domain**: the domain defaults to 0 to 100, so a value such as 340 is clamped to a full arc. Set `plotOptions.radialBar.min` / `max` to the raw range, or convert to percentages first: `(value / max) * 100`.
 3. **Missing `labels` array** — without `labels`, pie/donut slices show as "undefined" in tooltips and legend.
 4. **Donut center labels not showing** — must set `plotOptions.pie.donut.labels.show: true` explicitly.
 5. **`total.formatter` signature** — receives `w` (the full chart config object), NOT a simple value. Access `w.globals.seriesTotals` for the array of current values.
 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.
+8. **Gauge value outside `min`/`max`**: a gauge, like a plain radialBar, maps its value to the `min..max` domain you set (default 0 to 100). 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.
 11. **Slice click behavior changed (v6.9)**: clicking a pie/donut slice now slides it out along its own mid-angle (`plotOptions.pie.expandOffset`, default 10 px) instead of darkening it and redrawing it at a larger radius, and hover traces an outline band (`plotOptions.pie.hoverOutline`) instead of lightening the fill. Set `expandOffset: 0` to keep slices in place; set `states.hover.filter.type: 'none'` to suppress the hover band.
@@ -492,3 +508,4 @@ plotOptions: {
 13. **Confusing a shape with a pictogram** *(v7.0)*: `plotOptions.unit.positions` (from `apexcharts/unit-shapes`) is **where** the units go; `plotOptions.unit.shape: 'pictogram'` + `pictogram.mark` (from `apexcharts/pictograms`) is **what one unit looks like**. They compose freely.
 14. **Setting a size on a pictogram** *(v7.0)*: there is no `pictogram.size`. A glyph is fitted to the box the dot would have occupied, so use `plotOptions.unit.size` and `spacing`. Use `pictogram.scale` only to nudge a glyph that reads light.
 15. **Pie / radial charts pinned to the top of a tall container** *(fixed v7.1)*: the centre came from `min(width, height)`, so a tall, narrow container put the circle at the top with the leftover space below it. The circle now centres in the height it actually has. If you carried a manual `offsetY` to work around this, remove it.
+16. **Sunburst, unit or waffle on the default bundle** *(v8.0)*: draws nothing and the console says the type is not registered. Add `import 'apexcharts/sunburst'` or `import 'apexcharts/unit'` next to `import ApexCharts from 'apexcharts'`. `apexcharts/unit-shapes` and `apexcharts/pictograms` do not register the unit type.