apexcharts 8.2.0 → 8.3.0

package/src/charts/Unit.js

@@ -12,6 +12,7 @@ import {
   measureLabelWidth,
   spaceOutLabels,
 } from './common/OuterLabels'
+import { hash01 } from './common/Jitter'
 
 /**
  * ApexCharts Unit Class - dot-cluster / pictogram ("unit") chart.
@@ -40,6 +41,28 @@ import {
 
 const GOLDEN_ANGLE = Math.PI * (3 - Math.sqrt(5))
 
+/**
+ * Suffix a repeated id ("a", "a#2", ...) so every unit sharing it keeps a key of
+ * its own.
+ * @param {Map<string, number>} seen
+ * @param {string} id
+ */
+const uniqueId = (seen, id) => {
+  const n = (seen.get(id) || 0) + 1
+  seen.set(id, n)
+  return n > 1 ? id + '#' + n : id
+}
+
+/**
+ * A finite number from a number or numeric string, else null.
+ * @param {any} v
+ * @returns {number|null}
+ */
+const toNum = (v) => {
+  if (typeof v === 'string') v = parseFloat(v)
+  return typeof v === 'number' && isFinite(v) ? v : null
+}
+
 /** @param {number} t */
 function easeOutCubic(t) {
   return 1 - Math.pow(1 - t, 3)
@@ -123,13 +146,15 @@ function springParams(preset, speed) {
  * @property {number} cy0 start y
  * @property {number} delay stagger delay (ms) before this dot starts moving
  * @property {boolean} isEnter true when the dot has no previous slot
+ * @property {boolean} [pair] launches with the next dot (a waffle track cell
+ *   and the cell on it)
  * @property {any} spec this mark's placement/draw spec (see Unit#_place). The
  *   frame loop switches on `spec.pk` rather than on a chart-wide shape, which
  *   is what lets one population mix circles and pictograms.
  * @property {string} [key] identity key, used to carry live spring state
  *   across a gather that was interrupted by a re-render
- * @property {number} [r0]
- * @property {number} [r1]
+ * @property {number} r0 size (radius) it starts at
+ * @property {number} r1 size (radius) it lands at
  * @property {string} [fill0]
  * @property {string} [fill1]
  * @property {number[]|null} [_c0]
@@ -170,6 +195,11 @@ export default class Unit {
     const graphics = new Graphics(w, this.ctx)
 
     const ret = graphics.group({ class: 'apexcharts-unit' })
+    // The previous render's loops animate nodes this render just replaced,
+    // whether or not this one animates.
+    BrowserAPIs.cancelAnimationFrame(w.globals.unitGatherRAF || 0)
+    BrowserAPIs.cancelAnimationFrame(w.globals.unitExitRAF || 0)
+    w.globals.unitGatherRAF = w.globals.unitExitRAF = null
     if (w.globals.noData || !Array.isArray(series) || series.length === 0) {
       return ret
     }
@@ -207,14 +237,20 @@ export default class Unit {
     const identity = transition === 'identity'
     const unitValue = opts.unitValue > 0 ? opts.unitValue : 1
 
+    // Small-multiple waffles fill a fixed cell budget per tile from the raw
+    // value, so they are neither rounded nor capped.
+    const gridSplit = layout === 'grid' && !!(opts.grid && opts.grid.split)
     // value -> dot count. A non-zero value always yields at least one dot so a
     // tiny category (e.g. 3 of 545) never vanishes entirely.
     let counts = series.map((v) => {
       const n = Math.abs(Utils.parseNumber(v)) / unitValue
-      return n > 0 ? Math.max(1, Math.round(n)) : 0
+      return gridSplit ? n : n > 0 ? Math.max(1, Math.round(n)) : 0
     })
 
-    counts = this._applyMaxUnits(counts, opts.maxUnits)
+    // A scatter caps its own datums (see _layoutScatter).
+    if (!gridSplit && layout !== 'scatter') {
+      counts = this._applyMaxUnits(counts, opts.maxUnits)
+    }
 
     const total = counts.reduce((a, b) => a + b, 0)
     /** @type {{ i: number, cx: number, cy: number, outerR: number, dots: {x:number,y:number,slot?:number,r?:number,j?:number}[] }[]} */
@@ -233,10 +269,6 @@ export default class Unit {
                   ? this._layoutCustom(counts, opts)
                   : this._layoutGrouped(counts, opts)
 
-    // Small-multiple waffles paint a faint track backdrop (the "of N" cells)
-    // behind every tile's filled dots, and carry a per-tile label.
-    const gridSplit = layout === 'grid' && !!(opts.grid && opts.grid.split)
-    if (gridSplit) this._drawGridTrack(ret, graphics, opts)
     // Scatter (beeswarm) paints its value X axis + category lanes behind the dots.
     if (layout === 'scatter') this._drawScatterAxes(ret, graphics)
 
@@ -311,7 +343,68 @@ export default class Unit {
     // Running index across ALL dots of ALL clusters, used as the key in 'flow'
     // mode so a dot is identified by its global order, not its category slot.
     let gIndex = 0
-    clusters.forEach((cluster) => {
+    const seen = new Map()
+
+    // Small-multiple waffles paint a faint track backdrop (the "of N" cells)
+    // behind every tile's filled dots, and carry a per-tile label. Each track
+    // cell is keyed by its physical slot like the filled cell on it and rides
+    // the same transition, so a re-tiled waffle moves its backdrop with its
+    // cells; it is queued just before that cell and launches with it.
+    const track = (gridSplit && this._gridTrack && this._gridTrack.cells) || []
+    const trackG = graphics.group({ class: 'apexcharts-unit-track' })
+    if (track.length) ret.add(trackG)
+    const trackFill = (opts.grid && opts.grid.trackColor) || 'rgba(128,128,128,0.14)'
+    const trackSpec = this._baseSpec({ shape: opts.shape === 'square' && 'square' }, dotR)
+    const perTile = track.length / Math.max(1, clusters.length)
+    const live = this.ctx && this.ctx._unitSprings
+    // Glide a track cell or tile label with its tile's cells, from where it was
+    // (or fading in), queued at `at`. One resting on its slot (no move, no
+    // spring still in flight) stays put.
+    /**
+     * @param {any} node @param {any} spec @param {number} x @param {number} y
+     * @param {string} key @param {number} r @param {number} at @param {boolean} pair
+     */
+    const glide = (node, spec, x, y, key, r, at, pair) => {
+      const from = prev && prev.get(key)
+      const s = live && live.get(key)
+      const still =
+        from &&
+        from.x === x &&
+        from.y === y &&
+        from.r === r &&
+        (!s || (s.x.value === x && s.y.value === y))
+      nextPrev.set(key, { x, y, fill: trackFill, r, spec })
+      if (prev && animate && !pieceTakeover && !still) {
+        const cx0 = from ? from.x : x
+        const cy0 = from ? from.y : y
+        node.style.opacity = from ? '1' : '0'
+        this._place(node, spec, cx0, cy0)
+        animDots.splice(at, 0, {
+          node,
+          spec,
+          x,
+          y,
+          cx0,
+          cy0,
+          key,
+          r0: from && from.r != null ? from.r : r,
+          r1: r,
+          delay: 0,
+          isEnter: !from,
+          pair,
+        })
+      } else {
+        this._place(node, spec, x, y)
+      }
+    }
+    const ride = (/** @type {number} */ k, /** @type {boolean} */ pair) => {
+      const el = this._drawDot(graphics, opts, dotR, trackFill, -1, 0, trackSpec)
+      el.node.classList.add('apexcharts-unit-track-cell')
+      trackG.add(el)
+      glide(el.node, trackSpec, track[k].x, track[k].y, 'trk:' + k, dotR, animDots.length, pair)
+    }
+
+    clusters.forEach((cluster, ci) => {
       const color = w.globals.colors[cluster.i] || w.globals.colors[0] || '#008FFB'
       const elSeries = graphics.group({
         class: 'apexcharts-series',
@@ -325,7 +418,9 @@ export default class Unit {
       const burstCount = cluster.dots.length
       const catData = unitData[cluster.i]
 
+      const at = animDots.length
       cluster.dots.forEach((d, jj) => {
+        if (track.length) ride(ci * perTile + jj, true)
         // The mark's own dataPointIndex where the layout carried one (a custom
         // provider may omit marks, which would otherwise shift every later
         // datum by one), else its position in the cluster.
@@ -357,14 +452,15 @@ export default class Unit {
         let key
         if (identity) {
           // Needs an explicit id/name; a bare primitive is not a stable identity
-          // (duplicates would collide), so those fall back to global order.
+          // (duplicates would collide), so those fall back to global order. A
+          // repeated id/name is suffixed so its holders never share one slot.
           const id =
             datum && typeof datum === 'object'
               ? datum.id != null
                 ? datum.id
                 : datum.name
               : undefined
-          key = id != null ? `id:${id}` : `g:${gIndex}`
+          key = id != null ? `id:${uniqueId(seen, String(id))}` : `g:${gIndex}`
         } else if (flow) {
           key = String(gIndex)
         } else if (d.slot != null) {
@@ -406,9 +502,12 @@ export default class Unit {
           // from a centre).
           const enter = (opts.gather && opts.gather.enter) || 'burst'
           const inPlace = gridSplit || enter === 'fade' || enter === 'rise'
-          const cx0 = anchor ? anchor.x : inPlace ? d.x : cluster.cx
-          const cy0 = anchor
-            ? anchor.y
+          // A waffle cell filling in starts on its track cell, wherever that
+          // was, so the two travel together.
+          const start = anchor || (gridSplit && prev && prev.get('trk:' + d.slot))
+          const cx0 = start ? start.x : inPlace ? d.x : cluster.cx
+          const cy0 = start
+            ? start.y
             : enter === 'rise' && !gridSplit
               ? d.y + 14
               : inPlace
@@ -442,6 +541,8 @@ export default class Unit {
           this._place(el.node, spec, d.x, d.y)
         }
       })
+      // The tile's unfilled track cells.
+      for (let k = cluster.dots.length; k < perTile; k++) ride(ci * perTile + k, false)
 
       // Per-cluster label: a curved arc over a 'grouped' blob, a straight label
       // by a 'columns' bar, or a straight per-tile label on a small-multiple
@@ -457,7 +558,14 @@ export default class Unit {
         counts[cluster.i] > 0
       ) {
         const labelTotal = gridSplit ? this._gridDenom : total
-        this._drawClusterLabel(elSeries, cluster, counts[cluster.i], labelTotal, opts, color)
+        const t = this._drawClusterLabel(elSeries, cluster, counts[cluster.i], labelTotal, opts, color)
+        // A tile label rides with its cells (kept out of the exit ghosts).
+        if (t && gridSplit) {
+          const spec = { pk: PK_CORNER, hx: 0, hy: 0, r: 0 }
+          const lx = +(t.getAttribute('x') || 0)
+          const ly = +(t.getAttribute('y') || 0)
+          glide(t, spec, lx, ly, 'lbl:' + cluster.i, 0, at, animDots.length > at)
+        }
       }
 
       ret.add(elSeries)
@@ -524,11 +632,16 @@ export default class Unit {
     const total = counts.reduce((a, b) => a + b, 0)
     if (!maxUnits || maxUnits <= 0 || total <= maxUnits) return counts
     const scale = maxUnits / total
-    console.warn(
-      `[ApexCharts] unit chart: ${total} dots exceeds maxUnits (${maxUnits}); ` +
-        `counts were scaled down proportionally. Raise plotOptions.unit.maxUnits ` +
-        `or use plotOptions.unit.unitValue to represent more units per dot.`,
-    )
+    // Once per chart, not on every update of a live chart.
+    const ctx = this.ctx || {}
+    if (!ctx._unitCapWarned) {
+      ctx._unitCapWarned = true
+      console.warn(
+        `[ApexCharts] unit chart: ${total} dots exceeds maxUnits (${maxUnits}); ` +
+          `counts were scaled down proportionally. Raise plotOptions.unit.maxUnits ` +
+          `or use plotOptions.unit.unitValue to represent more units per dot.`,
+      )
+    }
     return counts.map((c) => (c > 0 ? Math.max(1, Math.round(c * scale)) : 0))
   }
 
@@ -675,7 +788,8 @@ export default class Unit {
    *
    * `id` is the datum's own id/name where the per-unit object form supplies
    * one, so a provider can address a specific unit ("Texas", "employee 41")
-   * rather than a positional slot. It falls back to `"<category>:<index>"`.
+   * rather than a positional slot. It falls back to `"<category>:<index>"`, and
+   * a repeated one is suffixed (`"Alex#2"`).
    *
    * @param {number[]} counts
    * @param {number} dotR the radius the engine would use, so a provider that
@@ -688,15 +802,19 @@ export default class Unit {
     const names = w.seriesData.seriesNames || []
     /** @type {{id:string,index:number,seriesIndex:number,dataPointIndex:number,label:string,value:number|undefined,datum:any,r:number}[]} */
     const objects = []
+    const seen = new Map()
     let index = 0
     counts.forEach((n, i) => {
       const catData = unitData[i]
       for (let j = 0; j < n; j++) {
         const datum = catData ? catData[j] : undefined
-        const id =
+        // A repeated id/name is suffixed ("Alex#2") so each mark is placed.
+        const id = uniqueId(
+          seen,
           datum && typeof datum === 'object' && (datum.id != null || datum.name != null)
             ? String(datum.id != null ? datum.id : datum.name)
-            : `${i}:${j}`
+            : `${i}:${j}`,
+        )
         objects.push({
           id,
           index,
@@ -927,12 +1045,23 @@ export default class Unit {
     const pad = Math.min(gw, gh) * 0.04
     const boxW = Math.max(1e-6, b.maxX - b.minX)
     const boxH = Math.max(1e-6, b.maxY - b.minY)
-    const r1 = Math.max(4, Math.min((gw - 2 * pad) / boxW, (gh - 2 * pad) / boxH))
-    const r0 = r1 * innerRatio
+    const fit = (/** @type {number} */ inset) =>
+      Math.max(4, Math.min((gw - 2 * pad - inset) / boxW, (gh - 2 * pad - inset) / boxH))
+    // The box bounds seat CENTRES, so inset the fit by the seat size. Seats
+    // shrink with the radius: bisect for the largest radius its own seats fit.
+    const seat = (/** @type {number} */ r) =>
+      fit(2 * this._arcAllocate(total, r * innerRatio, r, span, opts).dotR)
+    let hi = fit(0)
+    let r1 = seat(hi)
+    for (let k = 0; k < 6; k++) {
+      const m = (r1 + hi) / 2
+      if (m <= seat(m)) r1 = m
+      else hi = m
+    }
     const cx = gw / 2 - ((b.minX + b.maxX) / 2) * r1
     const cy = gh / 2 - ((b.minY + b.maxY) / 2) * r1
 
-    const alloc = this._arcAllocate(total, r0, r1, span, opts)
+    const alloc = this._arcAllocate(total, r1 * innerRatio, r1, span, opts)
     this._lastDotR = alloc.dotR
 
     // Every seat position, then sorted by angle so category-ordered assignment
@@ -1294,7 +1423,7 @@ export default class Unit {
    * value over a denominator (`grid.max`, else the largest count so the leader
    * fills its tile and every other tile stays proportionally full - no empty
    * tiles for arbitrary data). The unfilled cells are drawn as a faint TRACK
-   * backdrop (see _drawGridTrack) so each tile reads as a part-to-whole "of N".
+   * backdrop (drawn by draw()) so each tile reads as a part-to-whole "of N".
    * Only VISIBLE (non-zero) categories claim a tile, so a legend hide drops the
    * tile and the rest re-flow. Each filled cell is keyed by a physical
    * `tile*cells + localCell` slot, so a value change grows/shrinks a tile's fill
@@ -1319,7 +1448,7 @@ export default class Unit {
     // Value -> filled-cell denominator. Default = the largest count (leader
     // fills its tile, the rest proportional); `grid.max` pins an explicit whole
     // (e.g. 100 so a value of 35 fills 35 of 100 cells - a percentage waffle).
-    const denom = gcfg.max > 0 ? gcfg.max : Math.max(1, ...counts)
+    const denom = gcfg.max > 0 ? gcfg.max : Math.max(...counts) || 1
 
     // Arrange the tiles in a near-square grid unless grid.tileColumns pins it.
     const tileCols = Math.max(
@@ -1410,41 +1539,6 @@ export default class Unit {
     return clusters
   }
 
-  /**
-   * Draw the faint "track" backdrop for the small-multiple grid: every cell of
-   * every tile's full lattice, so the filled (coloured) cells drawn on top read
-   * as a fraction of the whole. Static (redrawn each render, never animated);
-   * painted BEHIND the series groups. `grid.trackColor` overrides the default
-   * theme-neutral grey.
-   * @param {any} ret @param {Graphics} graphics @param {any} opts
-   */
-  _drawGridTrack(ret, graphics, opts) {
-    const track = this._gridTrack
-    if (!track || !track.cells || !track.cells.length) return
-    const r = this._lastDotR
-    const gcfg = opts.grid || {}
-    const trackColor = gcfg.trackColor || 'rgba(128,128,128,0.14)'
-    const g = graphics.group({ class: 'apexcharts-unit-track' })
-    track.cells.forEach((c) => {
-      let el
-      if (opts.shape === 'square') {
-        const side = r * 2
-        el = graphics.drawRect(0, 0, side, side, opts.borderRadius || 0, trackColor, 1, 0, 'none')
-        el.node.setAttribute('fill', trackColor)
-        el.node.setAttribute('x', String(c.x - r))
-        el.node.setAttribute('y', String(c.y - r))
-      } else {
-        el = graphics.drawCircle(r, { fill: trackColor, 'stroke-width': 0, stroke: 'none' })
-        el.node.setAttribute('fill', trackColor)
-        el.node.setAttribute('cx', String(c.x))
-        el.node.setAttribute('cy', String(c.y))
-      }
-      el.node.classList.add('apexcharts-unit-track-cell')
-      g.add(el)
-    })
-    ret.add(g)
-  }
-
   /**
    * Scatter / beeswarm layout: position every unit on a real numeric X value
    * axis by its own value (`_unitValueOf`), laned by category on Y. Within a
@@ -1459,13 +1553,19 @@ export default class Unit {
   _layoutScatter(opts) {
     const w = this.w
     const scfg = opts.scatter || {}
+    const unitData = w.seriesData.unitData || []
+    // maxUnits keeps an evenly spaced sample of each category, one dot per datum.
+    const lens = unitData.map((c) => (c ? c.length : 0))
+    const caps = this._applyMaxUnits(lens, opts.maxUnits)
+    /** @param {number} ci @param {number} j */
+    const keep = (ci, j) =>
+      Math.floor(((j + 1) * caps[ci]) / lens[ci]) > Math.floor((j * caps[ci]) / lens[ci])
     // 2D value-value scatter: each datum's own x AND y on two numeric axes.
-    if (scfg.y === 'value') return this._layoutScatter2D(opts)
+    if (scfg.y === 'value') return this._layoutScatter2D(opts, keep)
     // Vertical beeswarm: value on the Y axis, category lanes as X columns.
-    if (scfg.orientation === 'vertical') return this._layoutScatterVertical(opts)
+    if (scfg.orientation === 'vertical') return this._layoutScatterVertical(opts, keep)
     const gw = w.layout.gridWidth
     const gh = w.layout.gridHeight
-    const unitData = w.seriesData.unitData || []
     const names = w.seriesData.seriesNames || []
     const valueOf = (/** @type {any} */ d) => this._unitValueOf(d)
     // Optional bubble sizing (by a separate `sizeField`): a bubble beeswarm.
@@ -1500,14 +1600,22 @@ export default class Unit {
       vmax = 1
     }
     const tickAmount = Math.max(2, Math.round(scfg.tickAmount > 0 ? scfg.tickAmount : 5))
-    const domain = this._scatterValueDomain(scfg, vmin, vmax, tickAmount)
+    const domain = this._scatterValueDomain(scfg.xMin, scfg.xMax, vmin, vmax, tickAmount)
     const xMin = domain.min
     const xMax = domain.max
     const xSpan = xMax - xMin || 1
 
-    // Plot box: left gutter for lane labels, bottom gutter for the axis.
+    // Plot box: left gutter for lane labels, bottom gutter for the axis. The
+    // gutter fits the widest lane label (drawn 12px / 600), up to a third of
+    // the plot; a label past it is shortened with an ellipsis.
+    const font = { fontFamily: w.config.chart.fontFamily, fontWeight: 600 }
+    const laneName = (/** @type {number} */ i) => names[i] || `series-${i + 1}`
     const laneW =
-      scfg.laneLabelWidth != null ? Math.max(0, scfg.laneLabelWidth) : Kv > 1 ? 92 : 8
+      scfg.laneLabelWidth != null
+        ? Math.max(0, scfg.laneLabelWidth)
+        : Kv > 1
+          ? Math.min(gw / 3, measureLabelWidth(w, visible.map(laneName), font) + 14)
+          : 8
     const bottomGutter = 30 + (scfg.xTitle ? 20 : 0)
     const plotL = laneW
     const plotR = gw - 8
@@ -1553,38 +1661,44 @@ export default class Unit {
 
     visible.forEach((ci, slot) => {
       const cy = laneCy(slot)
-      lanes.push({ i: ci, cy, name: names[ci] || `series-${ci + 1}` })
-      const cat = unitData[ci] || []
+      let name = laneName(ci)
+      // Only a gutter wide enough to draw labels in (see _drawScatterAxes).
+      const wid = laneW > 12 ? measureLabelWidth(w, [name], font) : 0
+      if (wid > laneW - 14 && wid) {
+        name = name.slice(0, Math.max(1, Math.floor((name.length * (laneW - 14)) / wid) - 1)) + '\u2026'
+      }
+      lanes.push({ i: ci, cy, name })
       // Points keep their original datum index j so draw() can still resolve
-      // unitData[i][j] for per-unit colour + tooltip. A non-numeric datum is
-      // pinned to the axis start (defensive; scatter expects numeric values).
+      // unitData[i][j] for per-unit colour + tooltip. A datum with no numeric
+      // value has no place on the axis and is not drawn.
       // With bubble sizing each point carries its own radius `r` (used by the
       // pack + read back by draw()); otherwise the shared radius applies.
-      const pts = cat.map((d, j) => {
+      /** @type {{j:number,px:number,y:number,r?:number}[]} */
+      const pts = []
+      ;(unitData[ci] || []).forEach((/** @type {any} */ d, /** @type {number} */ j) => {
         const v = valueOf(d)
+        if (!isNum(v) || !keep(ci, j)) return
         /** @type {{j:number,px:number,y:number,r?:number}} */
-        const p = { j, px: plotX(isNum(v) ? v : xMin), y: cy }
+        const p = { j, px: plotX(v), y: cy }
         if (sizeStats) p.r = this._scatterRadius(d, sizeStats, r)
-        return p
+        pts.push(p)
       })
       if (jitter) {
-        // Deterministic pseudo-jitter by index (no Math.random - keeps SSR +
-        // re-render stable): spread within the lane band.
+        // Deterministic pseudo-jitter (no Math.random - keeps SSR + re-render
+        // stable): spread within the lane band.
         const halfLane = Math.max(maxR, laneH / 2 - maxR)
-        pts.forEach((p, k) => {
-          const t = ((k * 9301 + 49297) % 233280) / 233280 // LCG in [0,1)
-          p.y = cy + (t * 2 - 1) * halfLane
+        pts.forEach((p) => {
+          p.y = cy + (hash01(ci * 7919 + p.j) * 2 - 1) * halfLane
         })
       } else {
         this._beeswarm(pts, cy, r, step, maxR)
       }
-      // draw() indexes cluster.dots[j] against unitData[i][j], so keep j order.
       clusters.push({
         i: ci,
         cx: (plotL + plotR) / 2,
         cy,
         outerR: laneH / 2,
-        dots: pts.map((p) => ({ x: p.px, y: p.y, r: p.r })),
+        dots: pts.map((p) => ({ x: p.px, y: p.y, r: p.r, j: p.j })),
       })
     })
 
@@ -1615,9 +1729,9 @@ export default class Unit {
    * dots horizontally off each column's centre line. The value-axis config keys
    * (`xMin`/`xMax`/`xTitle`/`xFormatter`/`tickAmount`) still describe the value
    * axis (now Y), so flipping `orientation` keeps the same value settings.
-   * @param {any} opts
+   * @param {any} opts @param {(ci:number, j:number) => boolean} keep
    */
-  _layoutScatterVertical(opts) {
+  _layoutScatterVertical(opts, keep) {
     const w = this.w
     const scfg = opts.scatter || {}
     const gw = w.layout.gridWidth
@@ -1653,7 +1767,7 @@ export default class Unit {
       vmax = 1
     }
     const tickAmount = Math.max(2, Math.round(scfg.tickAmount > 0 ? scfg.tickAmount : 5))
-    const domain = this._scatterValueDomain(scfg, vmin, vmax, tickAmount)
+    const domain = this._scatterValueDomain(scfg.xMin, scfg.xMax, vmin, vmax, tickAmount)
     const vMin = domain.min
     const vMax = domain.max
     const vSpan = vMax - vMin || 1
@@ -1705,19 +1819,20 @@ export default class Unit {
     visible.forEach((ci, slot) => {
       const cx = laneCx(slot)
       lanes.push({ i: ci, cx, name: names[ci] || `series-${ci + 1}` })
-      const cat = unitData[ci] || []
-      const pts = cat.map((d, j) => {
+      /** @type {{j:number,py:number,x:number,r?:number}[]} */
+      const pts = []
+      ;(unitData[ci] || []).forEach((/** @type {any} */ d, /** @type {number} */ j) => {
         const v = valueOf(d)
+        if (!isNum(v) || !keep(ci, j)) return
         /** @type {{j:number,py:number,x:number,r?:number}} */
-        const p = { j, py: plotY(isNum(v) ? v : vMin), x: cx }
+        const p = { j, py: plotY(v), x: cx }
         if (sizeStats) p.r = this._scatterRadius(d, sizeStats, r)
-        return p
+        pts.push(p)
       })
       if (jitter) {
         const halfLane = Math.max(maxR, laneW / 2 - maxR)
-        pts.forEach((p, k) => {
-          const t = ((k * 9301 + 49297) % 233280) / 233280 // LCG in [0,1)
-          p.x = cx + (t * 2 - 1) * halfLane
+        pts.forEach((p) => {
+          p.x = cx + (hash01(ci * 7919 + p.j) * 2 - 1) * halfLane
         })
       } else {
         this._beeswarm(pts, cx, r, step, maxR, true)
@@ -1727,7 +1842,7 @@ export default class Unit {
         cx,
         cy: (plotT + plotB) / 2,
         outerR: laneW / 2,
-        dots: pts.map((p) => ({ x: p.x, y: p.py, r: p.r })),
+        dots: pts.map((p) => ({ x: p.x, y: p.py, r: p.r, j: p.j })),
       })
     })
 
@@ -1760,19 +1875,20 @@ export default class Unit {
    * per category). With `scatter.sizeRange` set, each dot is a BUBBLE scaled (by
    * area) from its `sizeField` (default 'z'). Needs the object form with numeric
    * `x` + `y`.
-   * @param {any} opts
+   * @param {any} opts @param {(ci:number, j:number) => boolean} keep
    */
-  _layoutScatter2D(opts) {
+  _layoutScatter2D(opts, keep) {
     const w = this.w
     const gw = w.layout.gridWidth
     const gh = w.layout.gridHeight
     const scfg = opts.scatter || {}
     const unitData = w.seriesData.unitData || []
-    const isNum = (/** @type {any} */ v) => typeof v === 'number' && isFinite(v)
+    /** @param {any} v @returns {v is number} */
+    const isNum = (v) => v != null
     const xOf = (/** @type {any} */ d) =>
-      d && typeof d === 'object' ? d.x : null
+      d && typeof d === 'object' ? toNum(d.x) : null
     const yOf = (/** @type {any} */ d) =>
-      d && typeof d === 'object' ? (d.y != null ? d.y : d.value) : null
+      d && typeof d === 'object' ? toNum(d.y != null ? d.y : d.value) : null
 
     // A category is visible if it has at least one point with numeric x AND y.
     const visible = unitData
@@ -1804,22 +1920,26 @@ export default class Unit {
       ymn = 0
       ymx = 1
     }
-    const xTicksN = Math.max(2, Math.round(scfg.tickAmount > 0 ? scfg.tickAmount : 5))
-    const yTicksN = Math.max(2, Math.round(scfg.yTickAmount > 0 ? scfg.yTickAmount : 5))
-    const nx = this._niceScale(
-      scfg.xMin != null ? scfg.xMin : xmn,
-      scfg.xMax != null ? scfg.xMax : xmx,
-      xTicksN,
+    // Pinned bounds frame each axis and extend to keep every point inside the
+    // plot, as the 1D beeswarm's value axis does.
+    const dx = this._scatterValueDomain(
+      scfg.xMin,
+      scfg.xMax,
+      xmn,
+      xmx,
+      Math.max(2, Math.round(scfg.tickAmount > 0 ? scfg.tickAmount : 5)),
     )
-    const ny = this._niceScale(
-      scfg.yMin != null ? scfg.yMin : ymn,
-      scfg.yMax != null ? scfg.yMax : ymx,
-      yTicksN,
+    const dy = this._scatterValueDomain(
+      scfg.yMin,
+      scfg.yMax,
+      ymn,
+      ymx,
+      Math.max(2, Math.round(scfg.yTickAmount > 0 ? scfg.yTickAmount : 5)),
     )
-    const xMin = scfg.xMin != null ? scfg.xMin : nx.min
-    const xMax = scfg.xMax != null ? scfg.xMax : nx.max
-    const yMin = scfg.yMin != null ? scfg.yMin : ny.min
-    const yMax = scfg.yMax != null ? scfg.yMax : ny.max
+    const xMin = dx.min
+    const xMax = dx.max
+    const yMin = dy.min
+    const yMax = dy.max
     const xSpan = xMax - xMin || 1
     const ySpan = yMax - yMin || 1
 
@@ -1844,15 +1964,19 @@ export default class Unit {
     /** @type {{ i:number, cx:number, cy:number, outerR:number, dots:{x:number,y:number,r?:number}[] }[]} */
     const clusters = []
     visible.forEach((ci) => {
-      const cat = unitData[ci] || []
-      const dots = cat.map((d) => {
+      /** @type {{x:number,y:number,r?:number,j:number}[]} */
+      const dots = []
+      ;(unitData[ci] || []).forEach((/** @type {any} */ d, /** @type {number} */ j) => {
         const x = xOf(d)
         const y = yOf(d)
-        return {
-          x: plotX(isNum(x) ? x : xMin),
-          y: plotY(isNum(y) ? y : yMin),
+        // A point with no numeric x or y has no place on the plane.
+        if (x == null || y == null || !keep(ci, j)) return
+        dots.push({
+          x: plotX(x),
+          y: plotY(y),
           r: sizeStats ? this._scatterRadius(d, sizeStats, baseR) : undefined,
-        }
+          j,
+        })
       })
       clusters.push({
         i: ci,
@@ -1863,27 +1987,6 @@ export default class Unit {
       })
     })
 
-    const mkTicks = (
-      /** @type {number} */ lo,
-      /** @type {number} */ hi,
-      /** @type {number} */ span,
-      /** @type {number} */ spacing,
-      /** @type {boolean} */ pinned,
-      /** @type {number} */ n,
-    ) => {
-      /** @type {number[]} */
-      const out = []
-      if (pinned) {
-        for (let k = 0; k < n; k++) out.push(lo + (span * k) / (n - 1))
-      } else {
-        const sp = spacing || span / Math.max(1, n - 1)
-        for (let v = lo; v <= hi + sp * 0.5; v += sp) {
-          out.push(Math.abs(v) < sp * 1e-9 ? 0 : v)
-        }
-      }
-      return out
-    }
-
     this._scatterAxis = {
       mode: '2d',
       plotL,
@@ -1892,22 +1995,8 @@ export default class Unit {
       plotB,
       plotX,
       plotY,
-      xTicks: mkTicks(
-        xMin,
-        xMax,
-        xSpan,
-        nx.spacing,
-        scfg.xMin != null || scfg.xMax != null,
-        xTicksN,
-      ),
-      yTicks: mkTicks(
-        yMin,
-        yMax,
-        ySpan,
-        ny.spacing,
-        scfg.yMin != null || scfg.yMax != null,
-        yTicksN,
-      ),
+      xTicks: dx.ticks,
+      yTicks: dy.ticks,
       xTitle: scfg.xTitle,
       yTitle: scfg.yTitle,
       xFormatter: typeof scfg.xFormatter === 'function' ? scfg.xFormatter : null,
@@ -2019,36 +2108,47 @@ export default class Unit {
   }
 
   /**
-   * Value-axis domain + ticks for a 1D beeswarm. The domain ALWAYS contains
+   * Value-axis domain + ticks for a scatter axis. The domain ALWAYS contains
    * every datum: a swarm that clips a dot outside the plot box is a bug, so an
-   * explicit `xMin`/`xMax` only FRAMES the axis and is extended by whole
+   * explicit `lo`/`hi` only FRAMES the axis and is extended by whole
    * tick-steps whenever the data would otherwise overflow. Orientation-agnostic:
    * the same value axis is X for a horizontal swarm and Y for a vertical one.
-   * @param {any} scfg scatter config
+   * @param {number|undefined} lo pinned minimum @param {number|undefined} hi
+   *   pinned maximum
    * @param {number} vmin data minimum @param {number} vmax data maximum
    * @param {number} tickAmount desired tick count
    * @returns {{ min:number, max:number, ticks:number[] }}
    */
-  _scatterValueDomain(scfg, vmin, vmax, tickAmount) {
+  _scatterValueDomain(lo, hi, vmin, vmax, tickAmount) {
     /** @param {number} min @param {number} max @param {number} spacing */
     const buildTicks = (min, max, spacing) => {
       /** @type {number[]} */
       const ticks = []
-      for (let v = min; v <= max + spacing * 0.5; v += spacing) {
+      for (let k = 0, v = min; v <= max + spacing * 0.5; v = min + ++k * spacing) {
         ticks.push(Math.abs(v) < spacing * 1e-9 ? 0 : v)
       }
       return ticks
     }
-    if (scfg.xMin != null || scfg.xMax != null) {
-      let min = scfg.xMin != null ? scfg.xMin : vmin
-      let max = scfg.xMax != null ? scfg.xMax : vmax
-      if (!(max > min)) max = min + 1
-      const spacing = (max - min) / Math.max(1, tickAmount - 1)
+    if (lo != null || hi != null) {
+      let min = /** @type {number} */ (lo != null ? lo : hi)
+      let max = /** @type {number} */ (hi != null ? hi : lo)
+      // Both ends pinned: split the span. One end pinned: step from it by a
+      // nice spacing, so the free end lands on a whole step.
+      const spacing =
+        max > min
+          ? (max - min) / Math.max(1, tickAmount - 1)
+          : this._niceScale(Math.min(min, vmin), Math.max(max, vmax), tickAmount).spacing
       // Extend the framed bounds by whole steps so no dot falls outside the
       // plot (keeps the user's tick origin + spacing, just adds ticks).
       if (vmin < min) min -= Math.ceil((min - vmin) / spacing) * spacing
       if (vmax > max) max += Math.ceil((vmax - max) / spacing) * spacing
-      return { min, max, ticks: buildTicks(min, max, spacing) }
+      if (!(max > min)) max = min + spacing
+      if ((max - min) / spacing <= 2 * tickAmount) {
+        return { min, max, ticks: buildTicks(min, max, spacing) }
+      }
+      // A far outlier would add a tick per step: nice-number the whole span.
+      vmin = min
+      vmax = max
     }
     const nice = this._niceScale(vmin, vmax, tickAmount)
     const spacing =
@@ -2168,14 +2268,14 @@ export default class Unit {
       ax.yTicks.forEach((/** @type {number} */ v) => {
         const y = ax.plotY(v)
         if (ax.gridlines) line(ax.plotL, y, ax.plotR, y, gridColor)
-        const label = ax.yFormatter ? String(ax.yFormatter(v)) : this._formatTick(v)
+        const label = ax.yFormatter ? String(ax.yFormatter(v)) : this._formatTick(v, ax.yTicks)
         text(label, ax.plotL - 8, y, 'end', labelColor, 11, 400, 'apexcharts-unit-tick')
       })
       // X gridlines + tick labels.
       ax.xTicks.forEach((/** @type {number} */ v) => {
         const x = ax.plotX(v)
         if (ax.gridlines) line(x, ax.plotT, x, ax.plotB, gridColor)
-        const label = ax.xFormatter ? String(ax.xFormatter(v)) : this._formatTick(v)
+        const label = ax.xFormatter ? String(ax.xFormatter(v)) : this._formatTick(v, ax.xTicks)
         text(label, x, ax.plotB + 14, 'middle', labelColor, 11, 400, 'apexcharts-unit-tick')
       })
       // Axis baselines (X along the bottom, Y up the left).
@@ -2220,7 +2320,7 @@ export default class Unit {
       ax.ticks.forEach((/** @type {number} */ v) => {
         const y = ax.plotY(v)
         if (ax.gridlines) line(ax.plotL, y, ax.plotR, y, gridColor)
-        const label = ax.formatter ? String(ax.formatter(v)) : this._formatTick(v)
+        const label = ax.formatter ? String(ax.formatter(v)) : this._formatTick(v, ax.ticks)
         text(label, ax.plotL - 8, y, 'end', labelColor, 11, 400, 'apexcharts-unit-tick')
       })
       // Y axis baseline up the left.
@@ -2261,7 +2361,7 @@ export default class Unit {
     ax.ticks.forEach((/** @type {number} */ v, /** @type {number} */ idx) => {
       const x = ax.plotX(v)
       if (ax.gridlines) line(x, ax.plotT, x, ax.plotB, gridColor)
-      const label = ax.formatter ? String(ax.formatter(v)) : this._formatTick(v)
+      const label = ax.formatter ? String(ax.formatter(v)) : this._formatTick(v, ax.ticks)
       const anchor =
         idx === 0 ? 'start' : idx === ax.ticks.length - 1 ? 'end' : 'middle'
       text(label, x, ax.plotB + 14, anchor, labelColor, 11, 400, 'apexcharts-unit-tick')
@@ -2298,17 +2398,19 @@ export default class Unit {
   }
 
   /**
-   * Compact tick-value formatting: integers as-is, otherwise trimmed to a short
-   * decimal; large magnitudes get a k/M suffix.
-   * @param {number} v @returns {string}
+   * Compact tick-value formatting: integers as-is, otherwise trimmed to enough
+   * decimals to tell neighbouring ticks apart; large magnitudes get a k/M suffix.
+   * @param {number} v @param {number[]} ticks the axis ticks (their step sets
+   *   the decimals) @returns {string}
    */
-  _formatTick(v) {
+  _formatTick(v, ticks) {
     if (!isFinite(v)) return ''
     const a = Math.abs(v)
     if (a >= 1e6) return `${+(v / 1e6).toFixed(1)}M`
     if (a >= 1e4) return `${+(v / 1e3).toFixed(1)}k`
     if (Number.isInteger(v)) return String(v)
-    return String(+v.toFixed(2))
+    const step = Math.abs(ticks[1] - ticks[0]) || 1
+    return String(+v.toFixed(Math.min(20, Math.max(2, 1 - Math.floor(Math.log10(step))))))
   }
 
   /**
@@ -2390,17 +2492,12 @@ export default class Unit {
   }
 
   /**
-   * This datum's numeric value for sizing / tooltip: the number itself, or an
-   * object's `value` / `y`. Null when there is no usable number.
+   * This datum's numeric value for sizing / tooltip: the number (or numeric
+   * string) itself, or an object's `value` / `y`. Null when there is none.
    * @param {any} d @returns {number | null}
    */
   _unitValueOf(d) {
-    if (typeof d === 'number') return d
-    if (d && typeof d === 'object') {
-      const v = d.value != null ? d.value : d.y
-      return typeof v === 'number' ? v : null
-    }
-    return null
+    return toNum(d && typeof d === 'object' ? (d.value != null ? d.value : d.y) : d)
   }
 
   /**
@@ -2552,25 +2649,43 @@ export default class Unit {
    *
    * @param {SVGElement} node @param {UnitMarkSpec} spec
    * @param {number} x @param {number} y
+   * @param {number} [k] scale against the spec's size, while a size tweens
    */
-  _place(node, spec, x, y) {
+  _place(node, spec, x, y, k = 1) {
     // One typedef covers all three kinds, so every per-kind field is optional
     // on it. The `pk` switch is what makes them present.
     const s = /** @type {any} */ (spec)
     if (s.pk === PK_GLYPH) {
       node.setAttribute(
         'transform',
-        'translate(' + (x - s.ox) + ',' + (y - s.oy) + s.tail,
+        'translate(' +
+          (x - s.ox * k) +
+          ',' +
+          (y - s.oy * k) +
+          (k === 1 ? s.tail : ') scale(' + s.s * k + ')'),
       )
     } else if (s.pk === PK_CORNER) {
-      node.setAttribute('x', String(x - s.hx))
-      node.setAttribute('y', String(y - s.hy))
+      node.setAttribute('x', String(x - s.hx * k))
+      node.setAttribute('y', String(y - s.hy * k))
     } else {
       node.setAttribute('cx', String(x))
       node.setAttribute('cy', String(y))
     }
   }
 
+  /**
+   * Size one mark at `k` times its spec's size (a glyph scales in `_place`).
+   * @param {SVGElement} node @param {UnitMarkSpec} spec @param {number} k
+   */
+  _size(node, spec, k) {
+    const s = /** @type {any} */ (spec)
+    if (s.pk === PK_CIRCLE) node.setAttribute('r', String(s.r * k))
+    else if (s.pk === PK_CORNER) {
+      node.setAttribute('width', String(2 * s.hx * k))
+      node.setAttribute('height', String(2 * s.hy * k))
+    }
+  }
+
   /**
    * The spec for the chart-wide shape (no pictogram, no per-mark radius).
    * @param {any} opts @param {number} [r]
@@ -2637,7 +2752,8 @@ export default class Unit {
     // grow the cache to one entry per dot; sub-tenth-pixel scale differences
     // are not observable anyway.
     const qr = Math.round(dotR * 10) / 10
-    const key = mark.name + '|' + mark.path.length + '|' + qr
+    // Inline marks are all named 'anonymous', so the outline itself keys.
+    const key = mark.name + mark.path + mark.viewBox + mark.fillRule + qr
     const hit = this._specCache.get(key)
     if (hit) return hit
 
@@ -2698,9 +2814,9 @@ export default class Unit {
    * Draw one dot (circle, square, or image icon) with the category fill +
    * stroke, tagged so the shared non-axis tooltip and hover reuse work.
    * @param {Graphics} graphics @param {any} opts @param {number} dotR
-   * @param {string} color @param {number} i @param {number} j
-   * @param {UnitMarkSpec} [spec] this mark's resolved spec; defaults to the
-   *   chart-wide shape
+   * @param {string} color @param {number} i @param {number} j (i < 0: an exit
+   *   ghost, left untagged so tooltips and morph capture skip it)
+   * @param {UnitMarkSpec} spec this mark's resolved spec
    * @returns {any}
    */
   _drawDot(graphics, opts, dotR, color, i, j, spec) {
@@ -2718,7 +2834,7 @@ export default class Unit {
       typeof w.config.fill.opacity === 'number' ? w.config.fill.opacity : 1
 
     let el
-    if (spec && spec.pk === PK_GLYPH) {
+    if (spec.pk === PK_GLYPH) {
       // A monochrome vector glyph: ONE <path>, filled directly in the mark's
       // colour. No fetch, no decode, and crucially no per-colour <filter> - an
       // feFlood/feComposite pair (what `shape:'image'` needs to match the
@@ -2733,7 +2849,7 @@ export default class Unit {
       // Geometry the morph capture cannot read back off a transform. Written
       // once at creation; never touched in a frame.
       el.node.setAttribute('data:r', String(spec.r))
-    } else if (opts.shape === 'image' && opts.image && opts.image.src) {
+    } else if (spec.pk === PK_CORNER && opts.shape === 'image' && opts.image && opts.image.src) {
       const iw = opts.image.width || 20
       const ih = opts.image.height || 20
       el = w.dom.Paper.image(opts.image.src)
@@ -2747,7 +2863,8 @@ export default class Unit {
       if (opts.image.tint) {
         el.node.setAttribute('filter', `url(#${this._tintFilter(color)})`)
       }
-    } else if (opts.shape === 'square') {
+    } else if (spec.pk === PK_CORNER) {
+      // A square, or the square fallback of an unresolved pictogram.
       const side = dotR * 2
       el = graphics.drawRect(0, 0, side, side, opts.borderRadius || 0, color, 1, strokeW, strokeColor)
       el.node.setAttribute('fill', color)
@@ -2761,9 +2878,11 @@ export default class Unit {
       el.node.setAttribute('fill', color)
       if (fillOpacity < 1) el.node.setAttribute('fill-opacity', String(fillOpacity))
     }
-    el.node.classList.add('apexcharts-unit-area')
-    el.node.setAttribute('i', String(i))
-    el.node.setAttribute('j', String(j))
+    if (i >= 0) {
+      el.node.classList.add('apexcharts-unit-area')
+      el.node.setAttribute('i', String(i))
+      el.node.setAttribute('j', String(j))
+    }
     return el
   }
 
@@ -2778,10 +2897,14 @@ export default class Unit {
   _tintFilter(color) {
     const w = this.w
     const NS = 'http://www.w3.org/2000/svg'
-    const safe = String(color).replace(/[^a-zA-Z0-9]/g, '')
-    const id = `apexcharts-unit-tint-${w.globals.chartID}-${safe}`
+    // Keyed by the raw colour: a sanitised one let rgb(1,23,4) and
+    // rgb(12,3,4) share a filter.
+    const tints = this._tints || (this._tints = new Map())
+    let id = tints.get(color)
+    if (id) return id
+    id = `apexcharts-unit-tint-${w.globals.chartID}-${tints.size}`
+    tints.set(color, id)
     const svg = w.dom.Paper.node
-    if (svg.querySelector(`#${id}`)) return id
 
     let defs = svg.querySelector('defs')
     if (!defs) {
@@ -2929,6 +3052,15 @@ export default class Unit {
     if (this.ctx) this.ctx._unitSprings = springs
   }
 
+  /**
+   * True once a loop's node no longer belongs to this chart's live SVG.
+   * @param {Element} node @returns {boolean}
+   */
+  _stale(node) {
+    const P = this.w.dom.Paper
+    return !!this.w.globals.isDestroyed || !P || !P.node.contains(node)
+  }
+
   /**
    * One rAF loop that tweens every dot from its start (cx0/cy0 - either the
    * cluster centre on first mount / for entering dots, or its previous slot on
@@ -2960,8 +3092,12 @@ export default class Unit {
     // quickly. Dots animate outward roughly centre-first.
     const maxDelay = Math.min(speed * 0.6, 450)
     const n = dots.length
-    for (let k = 0; k < n; k++) {
-      dots[k].delay = n > 1 ? (k / (n - 1)) * maxDelay : 0
+    for (let k = n; k--; ) {
+      dots[k].delay = dots[k].pair
+        ? dots[k + 1].delay
+        : n > 1
+          ? (k / (n - 1)) * maxDelay
+          : 0
     }
 
     const gcfg = opts.gather || {}
@@ -2979,15 +3115,13 @@ export default class Unit {
     // the positions, so switching motion at runtime cannot resurrect them.
     else if (this.ctx) this.ctx._unitSprings = null
 
-    // Seed the starting radius for size-changing circles so they grow from the
-    // previous size instead of flashing at the new one for a frame. (The old
-    // "seed initial corner" pass that stood here is gone: it rewrote exactly
-    // what draw()'s _placeDot had already written, and what _seedSprings
-    // rewrites again for a carried spring.)
+    // Seed the starting size of size-changing marks so they grow from the
+    // previous size instead of flashing at the new one for a frame.
     for (let k = 0; k < n; k++) {
       const d = dots[k]
-      if (d.spec.pk === PK_CIRCLE && d.r0 != null && d.r1 != null && d.r0 !== d.r1) {
-        d.node.setAttribute('r', String(d.r0))
+      if (d.r0 !== d.r1) {
+        this._size(d.node, d.spec, d.r0 / d.r1)
+        this._place(d.node, d.spec, d.cx0, d.cy0, d.r0 / d.r1)
       }
     }
 
@@ -3015,23 +3149,16 @@ export default class Unit {
           ? easeInOutCubic
           : easeOutCubic
 
-    // Cancel a gather loop still running from a previous render before starting
-    // a new one, so we don't keep animating the old (detached) dots on a rapid
-    // update.
-    if (this.w.globals.unitGatherRAF != null) {
-      BrowserAPIs.cancelAnimationFrame(this.w.globals.unitGatherRAF)
-      this.w.globals.unitGatherRAF = null
-    }
+    // draw() already cancelled the previous render's loop.
     const start = performance.now()
     let last = start
     /** @param {number} now */
     const stepFn = (now) => {
-      // Bail if the chart was destroyed mid-gather (route change / re-render):
-      // the dots are detached and setAttribute on them is wasted work. Matches
-      // Animations.animatePop.
-      if (this.w.globals.isDestroyed) {
+      // Bail once the chart is destroyed or another chart type rendered in its
+      // place (no unit draw cancelled this loop). A detached container is not
+      // a bail: the loop must still settle every dot.
+      if (this._stale(dots[0].node)) {
         this.w.globals.unitGatherRAF = null
-        this.w.globals.animationEnded = true
         return
       }
       const dt = Math.min(MAX_FRAME_STEP, Math.max(0, (now - last) / 1000))
@@ -3063,7 +3190,13 @@ export default class Unit {
           cx = d.cx0 + (d.x - d.cx0) * e
           cy = d.cy0 + (d.y - d.cy0) * e
         }
-        this._place(d.node, d.spec, cx, cy)
+        // Grow/shrink marks whose size changed (bubble sizing, a re-fit).
+        let sk = 1
+        if (d.r0 !== d.r1) {
+          sk = (d.r0 + (d.r1 - d.r0) * ec) / d.r1
+          this._size(d.node, d.spec, sk)
+        }
+        this._place(d.node, d.spec, cx, cy, sk)
         // Entering dots fade in over the first stretch; moving dots stay solid.
         if (d.isEnter) d.node.style.opacity = String(Math.min(1, t * 2.5))
         // Cross-fade the fill for dots that changed group colour.
@@ -3073,30 +3206,17 @@ export default class Unit {
           const cb = Math.round(d._c0[2] + (d._c1[2] - d._c0[2]) * ec)
           d.node.setAttribute('fill', `rgb(${cr},${cg},${cb})`)
         }
-        // Grow/shrink circles whose radius changed (bubble sizing).
-        if (
-          d.spec.pk === PK_CIRCLE &&
-          d.r0 != null &&
-          d.r1 != null &&
-          d.r0 !== d.r1
-        ) {
-          d.node.setAttribute('r', String(d.r0 + (d.r1 - d.r0) * ec))
-        }
         if (t < 1) done = false
       }
       if (done) {
         for (let k = 0; k < n; k++) {
           const d = dots[k]
           d.node.style.opacity = ''
-          // Settle on the exact target colour + radius (undo rounding drift).
+          // Settle on the exact target colour + size (undo rounding drift).
           if (d._c1 && d.fill1) d.node.setAttribute('fill', d.fill1)
-          if (
-            d.spec.pk === PK_CIRCLE &&
-            d.r0 != null &&
-            d.r1 != null &&
-            d.r0 !== d.r1
-          ) {
-            d.node.setAttribute('r', String(d.r1))
+          if (d.r0 !== d.r1) {
+            this._size(d.node, d.spec, 1)
+            this._place(d.node, d.spec, d.x, d.y)
           }
         }
         this.w.globals.unitGatherRAF = null
@@ -3126,7 +3246,8 @@ export default class Unit {
     /** @type {{x:number,y:number,fill:string,r?:number,spec?:any}[]} */
     const exits = []
     for (const [key, slot] of prev) {
-      if (!nextPrev.has(key)) {
+      // A tile label ('lbl:') has no mark to leave as a ghost.
+      if (!nextPrev.has(key) && key[0] !== 'l') {
         exits.push(slot)
         if (exits.length >= cap) break
       }
@@ -3168,7 +3289,7 @@ export default class Unit {
       // slot; without it every pictogram would ghost out as a plain circle.
       const r = slot.r != null ? slot.r : dotR
       const spec = slot.spec || this._baseSpec(opts, r)
-      const el = this._drawDot(graphics, opts, r, slot.fill, 0, 0, spec)
+      const el = this._drawDot(graphics, opts, r, slot.fill, -1, 0, spec)
       el.node.classList.add('apexcharts-unit-exit')
       this._place(el.node, spec, slot.x, slot.y)
       group.add(el)
@@ -3182,18 +3303,12 @@ export default class Unit {
     }
 
     const speed = Math.max(1, w.config.chart.animations.speed || 800)
-    // Cancel an exit loop still running from a previous render before starting a
-    // new one, so stale ghosts don't keep fading on a rapid update.
-    if (this.w.globals.unitExitRAF != null) {
-      BrowserAPIs.cancelAnimationFrame(this.w.globals.unitExitRAF)
-      this.w.globals.unitExitRAF = null
-    }
     const start = performance.now()
 
     /** @param {number} now */
     const stepFn = (now) => {
-      // Bail if the chart was destroyed mid-exit (the ghost group is detached).
-      if (this.w.globals.isDestroyed) {
+      // Bail once the chart is destroyed or replaced (see _runGather).
+      if (this._stale(group.node)) {
         this.w.globals.unitExitRAF = null
         return
       }
@@ -3281,6 +3396,7 @@ export default class Unit {
     const width = measureLabelWidth(w, lines, {
       fontSize: cfg.fontSize,
       fontFamily: cfg.fontFamily || w.config.chart.fontFamily,
+      fontWeight: cfg.fontWeight,
     })
     const gap = conn.gap != null ? conn.gap : 8
     const length = conn.length != null ? conn.length : 22
@@ -3456,6 +3572,7 @@ export default class Unit {
    * the blob in either direction.
    * @param {any} elSeries @param {{ i:number, cx:number, cy:number, outerR:number, flat?:boolean }} cluster
    * @param {number} value @param {number} total @param {any} opts @param {string} color
+   * @returns {SVGElement|undefined}
    */
   _drawClusterLabel(elSeries, cluster, value, total, opts, color) {
     const w = this.w
@@ -3541,5 +3658,6 @@ export default class Unit {
     }
 
     elSeries.node.appendChild(textEl)
+    return /** @type {any} */ (textEl)
   }
 }