apexcharts 8.2.0 → 8.3.1

package/src/modules/Theme.js

@@ -406,7 +406,7 @@ export default class Theme {
         c
       ].colors =
         w.config[c].colors === undefined
-          ? this.isColorFn
+          ? this.isColorFn && w.config.colors
             ? w.config.colors.slice()
             : defaultColors
           : w.config[c].colors.slice()

package/src/modules/Toolbar.js

@@ -876,9 +876,10 @@ export default class Toolbar {
       }
 
       // if user has some series collapsed before hitting zoom reset button,
-      // those series should stay collapsed
+      // those series should stay collapsed. Cloned from the peek, as
+      // reading initialSeries deep clones it first.
       const series = ch.ctx.series.emptyCollapsedSeries(
-        Utils.clone(w.globals.initialSeries),
+        Utils.clone(w.globals._initialSeriesPeek),
       )
 
       ch.updateHelpers._updateSeries(

package/src/modules/UnitMarkRegistry.js

@@ -123,8 +123,3 @@ export function getUnitMark(name) {
 export function unregisterUnitMark(name) {
   delete getMarks()[name]
 }
-
-/** @returns {string[]} */
-export function registeredUnitMarkNames() {
-  return Object.keys(getMarks())
-}

package/src/modules/ZoomPanSelection.js

@@ -5,6 +5,7 @@ import Toolbar from './Toolbar'
 import AxisMapping from './AxisMapping'
 import TooltipUtils from './tooltip/Utils'
 import { Box } from '../svg/index'
+import { BrowserAPIs } from '../ssr/BrowserAPIs.js'
 
 // Wheel-zoom feel: scrolling this many deltaY pixels doubles (or halves) the
 // visible x-window. 240px is about two discrete wheel notches per 2x zoom
@@ -381,6 +382,67 @@ export default class ZoomPanSelection extends Toolbar {
     return this._incidentalZoomEnabled(zoom && zoom.allowMouseWheelZoom)
   }
 
+  /** An explicit `true` zooms on every wheel; 'auto' needs Ctrl/Cmd. */
+  _wheelZoomGreedy() {
+    return this.w.config.chart.zoom.allowMouseWheelZoom === true
+  }
+
+  /**
+   * Tell a viewer whose bare wheel just scrolled past the chart how to zoom it.
+   * Shown over the chart while the scroll goes on and faded out shortly after
+   * it stops. Only for a mostly vertical wheel: a sideways trackpad swipe is
+   * not someone reaching for zoom.
+   *
+   * The node lives in elWrap and the timer on w.interact, since a re-render can
+   * replace both this instance and the wrapper's contents while it is up.
+   *
+   * @param {any} e
+   */
+  _showWheelHint(e) {
+    const w = this.w
+    if (w.config.chart.zoom.wheelHint === false) return
+    if (Math.abs(e.deltaY) <= Math.abs(e.deltaX)) return
+    const wrap = w.dom.elWrap
+    if (!wrap) return
+
+    let el = wrap.querySelector('.apexcharts-wheel-hint')
+    if (!el) {
+      const win = BrowserAPIs.getWindow()
+      const nav = win && win.navigator
+      const mac = !!nav && /Mac|iPhone|iPad/.test(nav.platform || nav.userAgent)
+      const text = (w.globals.locale.toolbar.wheelZoomHint || '').replace(
+        '{key}',
+        mac ? '⌘' : 'Ctrl',
+      )
+      el = BrowserAPIs.createElement('div')
+      el.className = 'apexcharts-wheel-hint'
+      el.setAttribute('aria-hidden', 'true')
+      const label = BrowserAPIs.createElement('span')
+      label.textContent = text
+      label.style.fontFamily = w.config.chart.fontFamily
+      el.appendChild(label)
+      wrap.appendChild(el)
+      // lay the hidden state out before showing it, so it fades in
+      void (/** @type {HTMLElement} */ (el).offsetWidth)
+    }
+    el.classList.add('apexcharts-wheel-hint-visible')
+
+    const it = w.interact
+    if (it.wheelHintTimer) clearTimeout(it.wheelHintTimer)
+    it.wheelHintTimer = setTimeout(() => this._hideWheelHint(), 1200)
+  }
+
+  _hideWheelHint() {
+    const w = this.w
+    const it = w.interact
+    if (it.wheelHintTimer) {
+      clearTimeout(it.wheelHintTimer)
+      it.wheelHintTimer = null
+    }
+    const el = w.dom.elWrap?.querySelector('.apexcharts-wheel-hint')
+    if (el) el.classList.remove('apexcharts-wheel-hint-visible')
+  }
+
   /**
    * Put keyboard focus on the chart, where the chart is focusable at all.
    *
@@ -454,10 +516,28 @@ export default class ZoomPanSelection extends Toolbar {
    * @param {any} e
    */
   mouseWheelEvent(e) {
-    e.preventDefault()
-
     const st = this._wheel()
 
+    // Cooperative wheel ('auto'): a bare wheel belongs to the page, so a
+    // dashboard of charts scrolls past them instead of zooming each one it
+    // crosses. Ctrl/Cmd + wheel zooms, and so does a trackpad pinch, which
+    // browsers deliver as a wheel event with ctrlKey set. Once a zoom gesture
+    // is under way it keeps the wheel until it settles, so a trackpad's
+    // momentum tail after the key comes up does not spill into a page scroll.
+    // An explicit `true` keeps the greedy wheel (every scroll zooms).
+    if (
+      !this._wheelZoomGreedy() &&
+      !e.ctrlKey &&
+      !e.metaKey &&
+      st.endTimer == null
+    ) {
+      this._showWheelHint(e)
+      return
+    }
+
+    e.preventDefault()
+    this._hideWheelHint()
+
     // normalize the delta to pixels (deltaMode 1 = lines, 2 = pages)
     let dy = e.deltaY
     if (e.deltaMode === 1) dy *= 33
@@ -1295,6 +1375,10 @@ export default class ZoomPanSelection extends Toolbar {
       }
     }
 
+    // A vertical drag, or one held at the data edge, leaves the window where
+    // it is: no re-render and no `scrolled` for a pan that did not move.
+    if (xLowestValue === minX && xHighestValue === maxX) return
+
     const xaxis = {
       min: xLowestValue,
       max: xHighestValue,
@@ -1520,6 +1604,43 @@ export default class ZoomPanSelection extends Toolbar {
     this.ctx.events.fireEvent('scrolled', args)
   }
 
+  /**
+   * Pan a zoomed x-window by `fraction` of its width (keyboard Shift+Arrow),
+   * clamped to the data as a drag pan is, and reported as one (`scrolled`).
+   * @param {number} fraction
+   */
+  panBy(fraction) {
+    const w = this.w
+    if (!w.interact.zoomed) return
+    const { min, max } = this._currentXWindow()
+    let d = (max - min) * fraction
+    // a category window moves by whole categories
+    if (w.config.xaxis.convertedCatToNumeric) {
+      d = d > 0 ? Math.ceil(d) : Math.floor(d)
+    }
+    // _clampBounds has none for a rangeBar: stop at the ends of its bars
+    if (w.axisFlags.isRangeBar) {
+      const r = w.rangeData
+      let lo = Infinity
+      let hi = -Infinity
+      r.seriesRangeStart
+        .concat(r.seriesRangeEnd)
+        .flat()
+        .forEach((/** @type {any} */ y) => {
+          if (y != null) {
+            lo = Math.min(lo, y)
+            hi = Math.max(hi, y)
+          }
+        })
+      d =
+        d > 0
+          ? Math.min(d, Math.max(0, hi - max))
+          : Math.max(d, Math.min(0, lo - min))
+      if (!d) return
+    }
+    if (this._applyXRange(min + d, max + d, false)) this._fireScrolled()
+  }
+
   /** @param {number} x @param {number} t */
   _pushSample(x, t) {
     const s = this._m().samples

package/src/modules/accessibility/KeyboardNavigation.js

@@ -1,7 +1,6 @@
 // @ts-check
 import Graphics from '../Graphics'
 import TooltipUtils from '../tooltip/Utils'
-import Utils from '../../utils/Utils'
 
 /**
  * ApexCharts KeyboardNavigation
@@ -16,7 +15,7 @@ import Utils from '../../utils/Utils'
  *                            heatmap, the row above / below
  *   Home:                    first data point in current series
  *   End:                     last data point in current series
- *   Enter / Space:           fire markerClick event (same as mouse click)
+ *   Enter / Space:           select the point and fire markerClick, as a click does
  *   Escape:                  exit keyboard nav, return focus to SVG
  */
 export default class KeyboardNavigation {
@@ -107,12 +106,27 @@ export default class KeyboardNavigation {
     // keyboard-nav tooltip so it doesn't remain stuck on screen while the chart
     // re-renders with a different set of visible series.
     this.ctx.events.addEventListener('legendClick', this._onLegendClick)
+
+    // An update (a keyboard zoom or pan among them) replaced a focused SVG:
+    // focus this one, with the cursor and a dismissed tooltip as they were
+    // (destroy), unless focus has gone somewhere else since
+    const kept = w.interact.keyNav
+    const doc = svgEl.ownerDocument
+    w.interact.keyNav = null
+    if (kept && (!doc.activeElement || doc.activeElement === doc.body)) {
+      ;[this.seriesIndex, this.dataPointIndex, , this._tooltipDismissed] = kept
+      // Focus alone, without starting nav, if nav was not running
+      if (!kept[2]) this.notePointerFocus()
+      svgEl.focus({ preventScroll: true })
+    }
   }
 
   /**
-   * Removes all event listeners. Called from chart.destroy().
+   * Removes all event listeners. Called from chart.destroy(), and with
+   * `updating` when an update is about to replace the SVG.
+   * @param {boolean} [updating]
    */
-  destroy() {
+  destroy(updating) {
     const w = this.w
     const svgEl = w.dom.Paper && w.dom.Paper.node
 
@@ -126,6 +140,14 @@ export default class KeyboardNavigation {
 
     if (!svgEl) return
 
+    if (updating && svgEl.getRootNode?.().activeElement === svgEl) {
+      w.interact.keyNav = [
+        this.seriesIndex,
+        this.dataPointIndex,
+        this.active,
+        this._tooltipDismissed,
+      ]
+    }
     svgEl.removeEventListener('focus', this._onFocus)
     svgEl.removeEventListener('blur', this._onBlur)
     svgEl.removeEventListener('keydown', this._onKeyDown)
@@ -192,7 +214,8 @@ export default class KeyboardNavigation {
     // If the chart is zoomed, snap the cursor to the first visible data point
     // so the user doesn't start navigating outside the current viewport.
     this._snapToVisibleRange()
-    this._showCurrentPoint()
+    // An update re-focusing a chart whose tooltip was dismissed (init)
+    if (!this._tooltipDismissed) this._showCurrentPoint()
   }
 
   _onBlur() {
@@ -249,20 +272,18 @@ export default class KeyboardNavigation {
         break
       case 'Home':
         e.preventDefault()
-        this.dataPointIndex = 0
-        this._skipNullForward()
+        this._seek(0, 1)
         this._showCurrentPoint()
         break
       case 'End':
         e.preventDefault()
-        this.dataPointIndex = this._getDataPointCount(this.seriesIndex) - 1
-        this._skipNullBackward()
+        this._seek(this._getDataPointCount(this.seriesIndex) - 1, -1)
         this._showCurrentPoint()
         break
       case 'Enter':
       case ' ':
         e.preventDefault()
-        this._fireClick()
+        this._fireClick(e)
         break
       case '+':
       case '=':
@@ -323,28 +344,16 @@ export default class KeyboardNavigation {
   }
 
   _canPan() {
-    // Pan only meaningful once the chart is zoomed in (otherwise full data is
-    // already visible). We still allow it whenever zoom is enabled — the
-    // toolbar's zoomUpdateOptions clamps to data bounds.
-    return this._canZoom()
+    // Unzoomed, the whole domain is in view: there is nothing to pan to
+    return this._canZoom() && this.w.interact.zoomed
   }
 
   /**
-   * Shift the visible x-range by ~10% in the given direction.
+   * Shift the visible x-range by ~10% in the given direction, as a drag pan.
    * @param {number} direction +1 = right, -1 = left
    */
   _panBy(direction) {
-    const toolbar = this.ctx.toolbar
-    if (!toolbar) return
-
-    const r = toolbar._currentXRange()
-    const minX = Number(r.minX)
-    const maxX = Number(r.maxX)
-    if (!isFinite(minX) || !isFinite(maxX) || minX === maxX) return
-
-    const span = maxX - minX
-    const step = span * 0.1 * direction
-    toolbar.zoomUpdateOptions(minX + step, maxX + step)
+    this.ctx.zoomPanSelection?.panBy(direction / 10)
     this._announce(direction > 0 ? 'Panned right' : 'Panned left')
   }
 
@@ -365,13 +374,15 @@ export default class KeyboardNavigation {
       // so ↑/↓ series switching would show the same content — suppress it.
       // For irregular time series the tooltip falls back to individual mode
       // (isXoverlap returns false), so up/down navigation is meaningful there.
-      // A heatmap or treemap tooltip is always one cell's, whatever
-      // tooltip.shared says (and it defaults to true), so ↑/↓ is the only
-      // way to another row.
+      // A heatmap or treemap tooltip is always one cell's and a radialBar's
+      // one ring's, whatever tooltip.shared says (and it defaults to true), so
+      // ↑/↓ is the only way to another row. Without a tooltip nothing shows
+      // the other series either.
       const ttCtx = this.w.globals.tooltip
       const type = w.config.chart.type
-      const perCell = type === 'heatmap' || type === 'treemap'
-      if (!perCell && ttCtx && ttCtx.tConfig && ttCtx.tConfig.shared) {
+      const perCell =
+        type === 'heatmap' || type === 'treemap' || type === 'radialBar'
+      if (!perCell && ttCtx?.ttItems && ttCtx.tConfig.shared) {
         const j = this.dataPointIndex
         const isActuallyShared =
           ttCtx.tooltipUtil &&
@@ -413,20 +424,7 @@ export default class KeyboardNavigation {
 
     if (dPoint !== 0) {
       // Move between data points (←/→)
-      const dpCount = this._getDataPointCount(this.seriesIndex)
-      let di = this.dataPointIndex + dPoint
-
-      if (di < 0) di = wrapAround ? dpCount - 1 : 0
-      if (di >= dpCount) di = wrapAround ? 0 : dpCount - 1
-
-      this.dataPointIndex = di
-
-      // Skip null values
-      if (dPoint > 0) {
-        this._skipNullForward()
-      } else {
-        this._skipNullBackward()
-      }
+      this._seek(this.dataPointIndex + dPoint, dPoint)
 
       // If the chart is zoomed, skip data points outside the visible range
       if (!this._isDataPointVisible(this.seriesIndex, this.dataPointIndex)) {
@@ -437,40 +435,26 @@ export default class KeyboardNavigation {
     this._showCurrentPoint()
   }
 
-  /** Advance dataPointIndex forward past any nulls */
-  _skipNullForward() {
-    const w = this.w
-    const si = this.seriesIndex
-    const dpCount = this._getDataPointCount(si)
-    let di = this.dataPointIndex
-    let attempts = 0
-
-    // Non-axis charts (pie, etc.) have flat numeric series — no nulls to skip
-    if (!Array.isArray(w.seriesData.series[si])) return
-
-    while (attempts < dpCount && w.seriesData.series[si][di] === null) {
-      di = (di + 1) % dpCount
-      attempts++
-    }
-    this.dataPointIndex = di
-  }
-
-  /** Retreat dataPointIndex backward past any nulls */
-  _skipNullBackward() {
+  /**
+   * Land on the first non-null point from `di` going `dir`. Past an edge it
+   * wraps only with wrapAround; when no point lies ahead the cursor stays.
+   * @param {number} di
+   * @param {number} dir
+   */
+  _seek(di, dir) {
     const w = this.w
-    const si = this.seriesIndex
-    const dpCount = this._getDataPointCount(si)
-    let di = this.dataPointIndex
-    let attempts = 0
-
-    // Non-axis charts (pie, etc.) have flat numeric series — no nulls to skip
-    if (!Array.isArray(w.seriesData.series[si])) return
-
-    while (attempts < dpCount && w.seriesData.series[si][di] === null) {
-      di = (di - 1 + dpCount) % dpCount
-      attempts++
+    const row = w.seriesData.series[this.seriesIndex]
+    const n = this._getDataPointCount(this.seriesIndex)
+    for (let k = 0; k < n; k++, di += dir) {
+      if (w.config.chart.accessibility.keyboard.navigation.wrapAround) {
+        di = (di + n) % n
+      } else if (di < 0 || di >= n) return
+      // Non-axis charts (pie, radialBar) have flat values, no nulls
+      if (!Array.isArray(row) || row[di] !== null) {
+        this.dataPointIndex = di
+        return
+      }
     }
-    this.dataPointIndex = di
   }
 
   // ─── Display ──────────────────────────────────────────────────────────────
@@ -480,13 +464,15 @@ export default class KeyboardNavigation {
     const w = this.w
     const ttCtx = w.globals.tooltip
 
-    if (!ttCtx || !ttCtx.ttItems) return
-
+    // Showing a point again undoes an Escape dismissal
+    this._tooltipDismissed = false
     // Keep globals consistent with the rest of the system
     w.interact.capturedSeriesIndex = i
     w.interact.capturedDataPointIndex = j
 
     this._applyFocusClass(i, j)
+    // No tooltip to read out the point, so the live region names it
+    if (!ttCtx?.ttItems) return this._announce(this._buildPointLabel(i, j))
     this._showTooltip(i, j, /** @type {any} */ (ttCtx))
   }
 
@@ -571,10 +557,13 @@ export default class KeyboardNavigation {
       tooltipEl.removeAttribute('aria-hidden')
     }
 
-    if (type === 'pie' || type === 'donut' || type === 'polarArea') {
+    if (
+      type === 'pie' ||
+      type === 'donut' ||
+      type === 'polarArea' ||
+      type === 'radialBar'
+    ) {
       this._showTooltipNonAxis(i, j, ttCtx, tooltipEl)
-    } else if (type === 'radialBar') {
-      this._showTooltipRadialBar(i, j, ttCtx, tooltipEl)
     } else if (type === 'heatmap' || type === 'treemap') {
       this._showTooltipHeatTree(i, j, ttCtx, tooltipEl, type)
     } else if (this._isBarLikeSeries(i)) {
@@ -1130,19 +1119,17 @@ export default class KeyboardNavigation {
   }
 
   /**
-   * pie / donut / polarArea
+   * pie / donut / polarArea (a slice per point, i is 0) and radialBar (a ring
+   * per series, j is 0)
    * @param {number} i
    * @param {number} j
    * @param {import('../tooltip/Tooltip').default} ttCtx
    * @param {HTMLElement} tooltipEl
    */
   _showTooltipNonAxis(i, j, ttCtx, tooltipEl) {
-    const w = this.w
-
-    // For pie-like charts the series index IS the data point / slice index
     ttCtx.tooltipLabels.drawSeriesTexts({
       ttItems: ttCtx.ttItems,
-      i: j,
+      i: i + j,
       shared: false,
     })
 
@@ -1151,12 +1138,9 @@ export default class KeyboardNavigation {
     const ttWidth = tooltipBound.width || ttCtx.tooltipRect.ttWidth || 0
     const ttHeight = tooltipBound.height || ttCtx.tooltipRect.ttHeight || 0
 
-    // Anchor on the arc centroid, through the same helper the mouse path uses
-    // so keyboard and pointer land a slice's tooltip in the same place. The
-    // path element carries j='${j}' (0-indexed); data:cx/cy are set on the
-    // path directly, not on the parent group.
-    const sliceEl = w.dom.baseEl.querySelector(`.apexcharts-pie-area[j='${j}']`)
-    const anchor = ttCtx.getSliceAnchor(sliceEl)
+    // Anchor on the arc's stamped centre (data:cx/cy), through the same helper
+    // the mouse path uses so keyboard and pointer land in the same place.
+    const anchor = ttCtx.getSliceAnchor(this._getFocusableElement(i, j))
     if (anchor) {
       const pos = ttCtx.tooltipPosition.placeOverAnchor(
         anchor.x,
@@ -1169,68 +1153,6 @@ export default class KeyboardNavigation {
       tooltipEl.style.top = pos.y + 'px'
     }
   }
-  /**
-   * radialBar — one ring per series, single value each
-   * @param {number} i
-   * @param {any} _j
-   * @param {import('../tooltip/Tooltip').default} ttCtx
-   * @param {HTMLElement} tooltipEl
-   */
-  _showTooltipRadialBar(i, _j, ttCtx, tooltipEl) {
-    const w = this.w
-
-    ttCtx.tooltipLabels.drawSeriesTexts({
-      ttItems: ttCtx.ttItems,
-      i,
-      shared: false,
-    })
-
-    const { ttWidth = 0, ttHeight = 0 } = ttCtx.getCachedDimensions()
-
-    // Each radial series is a ring; find the path and use its data:angle to
-    // compute the centroid at the midpoint of the arc.
-    const arcEl = w.dom.baseEl.querySelector(
-      `.apexcharts-radialbar-series[data\\:realIndex='${i}'] path`,
-    )
-    if (arcEl) {
-      const angle = parseFloat(arcEl.getAttribute('data:angle') ?? '') || 0
-      // Radial bars start from the top (initialAngle) and sweep clockwise
-      const initialAngle = w.config.plotOptions.radialBar.startAngle || 0
-      const midAngle = initialAngle + angle / 2
-
-      const centerX = w.layout.gridWidth / 2
-      const centerY = w.layout.gridHeight / 2
-      const radialSize =
-        w.globals.radialSize ||
-        Math.min(w.layout.gridWidth, w.layout.gridHeight) / 2
-
-      // Use the outer radius for this particular ring (series i)
-      const seriesCount = w.seriesData.series.length
-      const trackSize = radialSize / Math.max(seriesCount, 1)
-      const outerRadius = radialSize - i * trackSize
-      const innerRadius = outerRadius - trackSize
-      const ringRadius = (outerRadius + innerRadius) / 2
-
-      const centroid = Utils.polarToCartesian(
-        centerX,
-        centerY,
-        ringRadius,
-        midAngle,
-      )
-      const x = centroid.x + (w.layout.translateX || 0)
-      const y = centroid.y + (w.layout.translateY || 0)
-
-      const pos = ttCtx.tooltipPosition.placeOverAnchor(
-        x,
-        y,
-        ttWidth,
-        ttHeight,
-        10,
-      )
-      tooltipEl.style.left = pos.x + 'px'
-      tooltipEl.style.top = pos.y + 'px'
-    }
-  }
   /**
    * heatmap / treemap — position tooltip using element bounding rect
    * @param {number} i
@@ -1562,11 +1484,7 @@ export default class KeyboardNavigation {
     const mark = this._canvasMark(i, j)
     if (!mark) return this._drawCanvasMarkerFocusRing(i, j)
     const w = this.w
-    // The series' own group, by realIndex (`rel` counts within a type's
-    // groups, which a combo has several of).
-    const host = Array.from(
-      w.dom.baseEl.querySelectorAll('.apexcharts-series'),
-    ).find((g) => g.getAttribute('data:realIndex') === String(i))
+    const host = this._seriesGroup(i)
     if (!host) return null
     const ring = new Graphics(w, this.ctx).drawPath({
       d: mark.d,
@@ -1591,9 +1509,7 @@ export default class KeyboardNavigation {
     const marker = this._canvasMarker(i, j)
     if (!marker) return null
     const w = this.w
-    const host = Array.from(
-      w.dom.baseEl.querySelectorAll('.apexcharts-series'),
-    ).find((g) => g.getAttribute('data:realIndex') === String(i))
+    const host = this._seriesGroup(i)
     if (!host) return null
     const ring = new Graphics(w, this.ctx).drawPath({
       d: marker.d,
@@ -1729,9 +1645,7 @@ export default class KeyboardNavigation {
     }
 
     if (type === 'radialBar') {
-      return baseEl.querySelector(
-        `.apexcharts-radialbar-series[data\\:realIndex='${i}'] path`,
-      )
+      return baseEl.querySelector(`.apexcharts-radialbar-slice-${i}`)
     }
 
     if (this._isBarLikeSeries(i)) {
@@ -1739,31 +1653,44 @@ export default class KeyboardNavigation {
       // it, _drawCanvasFocusRing), and a jitter path that still carries its
       // `j` in the series is no stand-in for it.
       if (this._canvasMark(i, j)) return null
-      return baseEl.querySelector(
-        `.apexcharts-series[data\\:realIndex='${i}'] path[j='${j}']`,
-      )
+      return this._seriesGroup(i)?.querySelector(`path[j='${j}']`)
     }
 
     // line / area / scatter / bubble / radar — try marker element
-    const marker = baseEl.querySelector(
-      `.apexcharts-series[data\\:realIndex='${i}'] .apexcharts-marker[rel='${j}']`,
-    )
-    return marker || null
+    return this._seriesGroup(i)?.querySelector(`.apexcharts-marker[rel='${j}']`)
   }
 
-  // ─── Click / Enter ────────────────────────────────────────────────────────
+  /**
+   * The series' own group, by realIndex (`rel` counts within a type's groups,
+   * which a combo has several of). Matched in script: not every selector
+   * engine takes the escaped `data\:realIndex` attribute.
+   * @param {number} i
+   * @returns {Element | undefined}
+   */
+  _seriesGroup(i) {
+    return Array.from(
+      this.w.dom.baseEl.querySelectorAll('.apexcharts-series'),
+    ).find((g) => g.getAttribute('data:realIndex') === String(i))
+  }
 
-  _fireClick() {
-    const w = this.w
-    const ttCtx = w.globals.tooltip
-    if (!ttCtx) return
+  // ─── Click / Enter ────────────────────────────────────────────────────────
 
-    const syntheticEvent = {
-      type: 'mouseup',
-      clientX: 0,
-      clientY: 0,
-    }
-    ttCtx.markerClick(syntheticEvent, this.seriesIndex, this.dataPointIndex)
+  /**
+   * What a click on the focused mark does: its mousedown selects it
+   * (dataPointSelection), its mouseup slides a pie slice out and fires
+   * markerClick.
+   * @param {KeyboardEvent} e
+   */
+  _fireClick(e) {
+    const el = /** @type {any} */ (this._focusedEl)?.instance
+    const pie = this.ctx.pie
+    if (el) new Graphics(this.w, this.ctx).pathMouseDown(el, e)
+    if (pie && pie.getExpandOffset() > 0) pie.pieClicked(this.dataPointIndex)
+    this.w.globals.tooltip?.markerClick(
+      e,
+      this.seriesIndex,
+      this.dataPointIndex,
+    )
   }
 
   // ─── Helpers ──────────────────────────────────────────────────────────────
@@ -1795,8 +1722,9 @@ export default class KeyboardNavigation {
     if (type === 'pie' || type === 'donut' || type === 'polarArea') {
       return w.seriesData.series.length
     }
-    const series = w.seriesData.series
-    return series[si] && Array.isArray(series[si]) ? series[si].length : 0
+    // A radialBar ring is a series of one value
+    const s = w.seriesData.series[si]
+    return Array.isArray(s) ? s.length : 1
   }
 
   _clampCursor() {

package/src/modules/animations/Easing.js

@@ -14,7 +14,8 @@
  * pop) are intentionally NOT routed through here: `applyProgressiveReveal`
  * inverts `easeOutCubic` for reveal-sync timing, so those stay fixed. This
  * registry governs the GENERIC runner tweens (data-update value transitions,
- * path morphs, marker animate).
+ * path morphs, marker animate) and the gauge needle, which resolves
+ * 'easeOutBack' and 'easeOutCubic' by name.
  *
  * @module modules/animations/Easing
  */