apexcharts 8.2.0 → 8.3.0

package/dist/apexcharts.esm.js

@@ -31,7 +31,7 @@ var __objRest = (source, exclude) => {
 };
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 /*!
- * ApexCharts v8.2.0
+ * ApexCharts v8.3.0
  * (c) 2018-2026 ApexCharts
  */
 import * as _core from "apexcharts/core";
@@ -1142,6 +1142,7 @@ let Helpers$3 = class Helpers {
   toggleDataSeries(seriesCnt, isHidden) {
     var _a, _b, _c;
     const w = this.w;
+    if (!w.dom.baseEl) return;
     if (w.globals.axisCharts || w.config.chart.type === "radialBar") {
       w.globals.resized = true;
       let seriesEl = null;
@@ -1611,9 +1612,11 @@ class HeatmapGradientLegend {
     this._min = 0;
     this._max = 0;
     this._geom = null;
+    this._grad = null;
     this._bandHitEls = [];
     this._activeBandIndex = -1;
     this._targetEl = null;
+    this.panelsW = null;
     this._onCellEnter = this._onCellEnter.bind(this);
     this._onCellLeave = this._onCellLeave.bind(this);
     this._onBandEnter = this._onBandEnter.bind(this);
@@ -1728,15 +1731,8 @@ class HeatmapGradientLegend {
       linearGrad.setAttribute("x2", "1");
       linearGrad.setAttribute("y2", "0");
     }
-    const { min, max, stops, bands } = this._computeStops();
-    this._min = min;
-    this._max = max;
-    stops.forEach((s) => {
-      const stopEl = BrowserAPIs.createElementNS(SVG_NS, "stop");
-      stopEl.setAttribute("offset", `${(s.percent * 100).toFixed(2)}%`);
-      stopEl.setAttribute("stop-color", s.color);
-      linearGrad.appendChild(stopEl);
-    });
+    this._grad = linearGrad;
+    const { min, max, bands } = this._paintStops();
     defs.appendChild(linearGrad);
     svg.appendChild(defs);
     const rect = BrowserAPIs.createElementNS(SVG_NS, "rect");
@@ -1945,6 +1941,7 @@ class HeatmapGradientLegend {
    */
   repositionToPlot() {
     var _a, _b;
+    if (this._grad) this._paintStops();
     if (!Environment.isBrowser()) return;
     if (this._targetEl) return;
     const w = this.w;
@@ -2079,14 +2076,25 @@ class HeatmapGradientLegend {
     if (idx < 0 || idx === this._activeBandIndex) return;
     this._activeBandIndex = idx;
     (_d = (_c = (_b = this.ctx) == null ? void 0 : _b.events) == null ? void 0 : _c.fireEvent) == null ? void 0 : _d.call(_c, "legendHover", [this.ctx, idx, w]);
-    new Series(w).highlightRangeInSeries(idx, "highlight");
+    this._highlightRange(idx, "highlight");
   }
   /** Leaving a band clears the highlight. */
   _onBandLeave() {
     if (this._activeBandIndex < 0) return;
     const idx = this._activeBandIndex;
     this._activeBandIndex = -1;
-    new Series(this.w).highlightRangeInSeries(idx, "reset");
+    this._highlightRange(idx, "reset");
+  }
+  /**
+   * A shared trellis strip sets `panelsW` so a band reaches every panel.
+   * @param {number} idx
+   * @param {'highlight'|'reset'} action
+   */
+  _highlightRange(idx, action) {
+    var _a;
+    (((_a = this.panelsW) == null ? void 0 : _a.call(this)) || [this.w]).forEach(
+      (w) => new Series(w).highlightRangeInSeries(idx, action)
+    );
   }
   _attachHoverListeners() {
     var _a, _b;
@@ -2108,10 +2116,10 @@ class HeatmapGradientLegend {
    */
   _onCellEnter(...args) {
     var _a, _b, _c;
-    const w = this.w;
     if (!this.arrowEl) return;
     const opts = args[args.length - 1];
     if (!opts || typeof opts !== "object") return;
+    const w = opts.w || this.w;
     const i = opts.seriesIndex;
     const j = opts.dataPointIndex;
     if (typeof i !== "number" || typeof j !== "number") return;
@@ -2223,6 +2231,21 @@ class HeatmapGradientLegend {
     polygon.setAttribute("pointer-events", "none");
     return polygon;
   }
+  /** (Re)write the strip's stops; returns `_computeStops()`. */
+  _paintStops() {
+    const r = this._computeStops();
+    const grad = this._grad;
+    this._min = r.min;
+    this._max = r.max;
+    grad.innerHTML = "";
+    r.stops.forEach((s) => {
+      const stopEl = BrowserAPIs.createElementNS(SVG_NS, "stop");
+      stopEl.setAttribute("offset", `${(s.percent * 100).toFixed(2)}%`);
+      stopEl.setAttribute("stop-color", s.color);
+      grad.appendChild(stopEl);
+    });
+    return r;
+  }
   /**
    * Build gradient stops + return effective min/max.
    * - If `colorScale.ranges` is set, stops are placed at each range boundary
@@ -2264,7 +2287,8 @@ class HeatmapGradientLegend {
     if (!Number.isFinite(dataMax)) dataMax = 0;
     let min = dataMin;
     let max = dataMax;
-    if (typeof cs.min !== "undefined" && typeof cs.max !== "undefined" && cs.max > cs.min) {
+    const csWindow = typeof cs.min !== "undefined" && typeof cs.max !== "undefined" && cs.max > cs.min;
+    if (csWindow) {
       min = cs.min;
       max = cs.max;
     } else {
@@ -2295,34 +2319,30 @@ class HeatmapGradientLegend {
     } else {
       const baseColor = w.globals.colors[0] || "#008FFB";
       const utils = new Utils();
-      const plot = w.config.plotOptions[w.config.chart.type] || {};
+      const type = w.config.chart.type;
+      const plot = w.config.plotOptions[type] || {};
       const shadeIntensity = (_b = plot.shadeIntensity) != null ? _b : 0.5;
-      const hasNegs = (
+      const g = (
         /** @type {any} */
-        w.globals.hasNegs
+        w.globals
       );
+      const hasNegs = g.hasNegs;
+      const yExt = type === "heatmap" && !plot.distributed && !csWindow && g.maxY >= g.minY;
+      const hi = yExt ? g.maxY : max;
+      const total = Math.abs(hi) + Math.abs(yExt ? cs.min < g.minY ? cs.min : g.minY : min);
+      const k2 = shadeIntensity * 1.25;
       const n = Math.max(2, cfg.stops || 16);
       for (let s = 0; s < n; s++) {
         const t = s / (n - 1);
-        const v = min + t * (max - min);
-        const total = Math.abs(max) + Math.abs(min);
-        const percent_v = total === 0 ? 0 : 100 * v / total;
-        let colorShadePercent;
-        if (hasNegs) {
-          if (plot.reverseNegativeShade) {
-            colorShadePercent = percent_v < 0 ? percent_v / 100 * (shadeIntensity * 1.25) : (1 - percent_v / 100) * (shadeIntensity * 1.25);
-          } else {
-            colorShadePercent = percent_v <= 0 ? 1 - (1 + percent_v / 100) * shadeIntensity : (1 - percent_v / 100) * shadeIntensity;
-          }
-        } else {
-          colorShadePercent = 1 - percent_v / 100;
-        }
-        if (colorShadePercent > 1) colorShadePercent = 1;
-        if (colorShadePercent < -1) colorShadePercent = -1;
-        const shaded = plot.enableShades ? utils.shadeColor(
-          w.config.theme.mode === "dark" ? colorShadePercent * -1 : colorShadePercent,
-          baseColor
-        ) : baseColor;
+        const p = total === 0 ? 0 : Math.min(min + t * (max - min), hi) / total;
+        const c = Math.max(
+          -1,
+          Math.min(
+            1,
+            hasNegs ? plot.reverseNegativeShade ? (p < 0 ? p : 1 - p) * k2 : p <= 0 ? 1 - (1 + p) * shadeIntensity : (1 - p) * shadeIntensity : (1 - p) * (type === "treemap" ? k2 : 1)
+          )
+        );
+        const shaded = plot.enableShades ? utils.shadeColor(w.config.theme.mode === "dark" ? -c : c, baseColor) : baseColor;
         stops.push({ percent: t, color: shaded });
       }
     }
@@ -2352,9 +2372,12 @@ class Legend {
     this.legendHelpers = new Helpers$3(this);
   }
   init() {
+    var _a;
     const w = this.w;
     const gl = w.globals;
     const cnf = w.config;
+    (_a = this.heatmapGradientLegend) == null ? void 0 : _a.destroy();
+    this.heatmapGradientLegend = null;
     this.isBarsDistributed = cnf.chart.type === "bar" && cnf.plotOptions.bar.distributed && cnf.series.length === 1;
     const showLegendAlways = cnf.legend.showForSingleSeries && this.w.seriesData.series.length === 1 || this.isBarsDistributed || // Heatmap legends are colorScale-driven (discrete ranges or the
     // gradient strip), not series-driven, so they must render even for a
@@ -2372,10 +2395,6 @@ class Legend {
       while (elLegendWrap.firstChild) {
         elLegendWrap.removeChild(elLegendWrap.firstChild);
       }
-      if (this.heatmapGradientLegend) {
-        this.heatmapGradientLegend.destroy();
-        this.heatmapGradientLegend = null;
-      }
       if (HeatmapGradientLegend.isEnabled(w)) {
         this.heatmapGradientLegend = new HeatmapGradientLegend(w, this.ctx);
         this.heatmapGradientLegend.draw();
@@ -2553,7 +2572,7 @@ class Legend {
         }
       }
       const lg = legendGroups[w.labelData.seriesGroupIndex[i]];
-      if (lg) elLegendWrap.appendChild(lg);
+      if (lg && !lg.parentNode) elLegendWrap.appendChild(lg);
       (lg || elLegendWrap).appendChild(elLegend);
       elLegendWrap.classList.add(
         `apexcharts-align-${w.config.legend.horizontalAlign}`
@@ -2664,7 +2683,7 @@ class Legend {
     );
     const hoverOverLegend = isLegendItem(target);
     if (w.config.chart.type !== "heatmap" && !this.isBarsDistributed) {
-      if (!target.classList.contains("apexcharts-inactive-legend") && hoverOverLegend) {
+      if (hoverOverLegend && !target.closest(".apexcharts-inactive-legend")) {
         const series = new Series(this.ctx.w);
         series.toggleSeriesOnHover(e, target);
       }
@@ -2698,7 +2717,8 @@ class Legend {
       me.onLegendClick(e);
       if (rel !== null && w.config.legend.onItemClick.toggleDataSeries) {
         requestAnimationFrame(() => {
-          const restored = w.dom.baseEl.querySelector(
+          var _a;
+          const restored = (_a = w.dom.baseEl) == null ? void 0 : _a.querySelector(
             `.apexcharts-legend-series[rel="${rel}"]`
           );
           if (restored) restored.focus();
@@ -3783,6 +3803,63 @@ class ZoomPanSelection extends Toolbar {
     const { zoom } = this.w.config.chart;
     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);
+      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() {
+    var _a;
+    const w = this.w;
+    const it = w.interact;
+    if (it.wheelHintTimer) {
+      clearTimeout(it.wheelHintTimer);
+      it.wheelHintTimer = null;
+    }
+    const el = (_a = w.dom.elWrap) == null ? void 0 : _a.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.
    *
@@ -3854,8 +3931,13 @@ class ZoomPanSelection extends Toolbar {
    * @param {any} e
    */
   mouseWheelEvent(e) {
-    e.preventDefault();
     const st = this._wheel();
+    if (!this._wheelZoomGreedy() && !e.ctrlKey && !e.metaKey && st.endTimer == null) {
+      this._showWheelHint(e);
+      return;
+    }
+    e.preventDefault();
+    this._hideWheelHint();
     let dy = e.deltaY;
     if (e.deltaMode === 1) dy *= 33;
     else if (e.deltaMode === 2) dy *= 330;
@@ -4619,6 +4701,34 @@ class ZoomPanSelection extends Toolbar {
     w.config.chart.events.scrolled(this.ctx, args);
     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;
+    if (w.config.xaxis.convertedCatToNumeric) {
+      d = d > 0 ? Math.ceil(d) : Math.floor(d);
+    }
+    if (w.axisFlags.isRangeBar) {
+      const r = w.rangeData;
+      let lo = Infinity;
+      let hi = -Infinity;
+      r.seriesRangeStart.concat(r.seriesRangeEnd).flat().forEach((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(x2, t) {
     const s = this._m().samples;
@@ -6083,16 +6193,35 @@ class KeyboardNavigation {
     });
     svgEl.addEventListener("keydown", this._onKeyDown, { passive: false });
     this.ctx.events.addEventListener("legendClick", this._onLegendClick);
+    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;
+      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) {
+    var _a;
     const w = this.w;
     const svgEl = w.dom.Paper && w.dom.Paper.node;
     this.ctx.events.removeEventListener("legendClick", this._onLegendClick);
     clearTimeout(this._announceTimer);
     if (!svgEl) return;
+    if (updating && ((_a = svgEl.getRootNode) == null ? void 0 : _a.call(svgEl).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);
@@ -6144,7 +6273,7 @@ class KeyboardNavigation {
     this.active = true;
     this._clampCursor();
     this._snapToVisibleRange();
-    this._showCurrentPoint();
+    if (!this._tooltipDismissed) this._showCurrentPoint();
   }
   _onBlur() {
     this.active = false;
@@ -6190,20 +6319,18 @@ 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 "=":
@@ -6251,22 +6378,15 @@ class KeyboardNavigation {
     );
   }
   _canPan() {
-    return this._canZoom();
+    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);
+    var _a;
+    (_a = this.ctx.zoomPanSelection) == null ? void 0 : _a.panBy(direction / 10);
     this._announce(direction > 0 ? "Panned right" : "Panned left");
   }
   // ─── Navigation ───────────────────────────────────────────────────────────
@@ -6281,8 +6401,8 @@ class KeyboardNavigation {
     if (dSeries !== 0) {
       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 == null ? void 0 : ttCtx.ttItems) && ttCtx.tConfig.shared) {
         const j = this.dataPointIndex;
         const isActuallyShared = ttCtx.tooltipUtil && ttCtx.tooltipUtil.isXoverlap(j) && ttCtx.tooltipUtil.isInitialSeriesSameLen();
         if (isActuallyShared) return;
@@ -6308,59 +6428,43 @@ class KeyboardNavigation {
       }
     }
     if (dPoint !== 0) {
-      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;
-      if (dPoint > 0) {
-        this._skipNullForward();
-      } else {
-        this._skipNullBackward();
-      }
+      this._seek(this.dataPointIndex + dPoint, dPoint);
       if (!this._isDataPointVisible(this.seriesIndex, this.dataPointIndex)) {
         this._snapToVisibleRangeInDirection(dPoint);
       }
     }
     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;
-    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;
-    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 k2 = 0; k2 < n; k2++, di += dir) {
+      if (w.config.chart.accessibility.keyboard.navigation.wrapAround) {
+        di = (di + n) % n;
+      } else if (di < 0 || di >= n) return;
+      if (!Array.isArray(row) || row[di] !== null) {
+        this.dataPointIndex = di;
+        return;
+      }
     }
-    this.dataPointIndex = di;
   }
   // ─── Display ──────────────────────────────────────────────────────────────
   _showCurrentPoint() {
     const { seriesIndex: i, dataPointIndex: j } = this;
     const w = this.w;
     const ttCtx = w.globals.tooltip;
-    if (!ttCtx || !ttCtx.ttItems) return;
+    this._tooltipDismissed = false;
     w.interact.capturedSeriesIndex = i;
     w.interact.capturedDataPointIndex = j;
     this._applyFocusClass(i, j);
+    if (!(ttCtx == null ? void 0 : ttCtx.ttItems)) return this._announce(this._buildPointLabel(i, j));
     this._showTooltip(
       i,
       j,
@@ -6418,10 +6522,8 @@ class KeyboardNavigation {
     if (w.config.chart.accessibility.enabled && w.config.chart.accessibility.announcements.enabled) {
       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)) {
@@ -6776,24 +6878,23 @@ class KeyboardNavigation {
     return true;
   }
   /**
-   * 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;
     ttCtx.tooltipLabels.drawSeriesTexts({
       ttItems: ttCtx.ttItems,
-      i: j,
+      i: i + j,
       shared: false
     });
     const tooltipBound = tooltipEl.getBoundingClientRect();
     const ttWidth = tooltipBound.width || ttCtx.tooltipRect.ttWidth || 0;
     const ttHeight = tooltipBound.height || ttCtx.tooltipRect.ttHeight || 0;
-    const sliceEl = w.dom.baseEl.querySelector(`.apexcharts-pie-area[j='${j}']`);
-    const anchor = ttCtx.getSliceAnchor(sliceEl);
+    const anchor = ttCtx.getSliceAnchor(this._getFocusableElement(i, j));
     if (anchor) {
       const pos = ttCtx.tooltipPosition.placeOverAnchor(
         anchor.x,
@@ -6806,56 +6907,6 @@ 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) {
-    var _a;
-    const w = this.w;
-    ttCtx.tooltipLabels.drawSeriesTexts({
-      ttItems: ttCtx.ttItems,
-      i,
-      shared: false
-    });
-    const { ttWidth = 0, ttHeight = 0 } = ttCtx.getCachedDimensions();
-    const arcEl = w.dom.baseEl.querySelector(
-      `.apexcharts-radialbar-series[data\\:realIndex='${i}'] path`
-    );
-    if (arcEl) {
-      const angle = parseFloat((_a = arcEl.getAttribute("data:angle")) != null ? _a : "") || 0;
-      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;
-      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 x2 = centroid.x + (w.layout.translateX || 0);
-      const y = centroid.y + (w.layout.translateY || 0);
-      const pos = ttCtx.tooltipPosition.placeOverAnchor(
-        x2,
-        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
@@ -7115,9 +7166,7 @@ class KeyboardNavigation {
     const mark = this._canvasMark(i, j);
     if (!mark) return this._drawCanvasMarkerFocusRing(i, j);
     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: mark.d,
@@ -7141,9 +7190,7 @@ 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,
@@ -7237,6 +7284,7 @@ class KeyboardNavigation {
    * @param {number} j
    */
   _getFocusableElement(i, j) {
+    var _a, _b;
     const w = this.w;
     const type = w.config.chart.type;
     const baseEl = w.dom.baseEl;
@@ -7254,32 +7302,47 @@ 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)) {
       if (this._canvasMark(i, j)) return null;
-      return baseEl.querySelector(
-        `.apexcharts-series[data\\:realIndex='${i}'] path[j='${j}']`
-      );
+      return (_a = this._seriesGroup(i)) == null ? void 0 : _a.querySelector(`path[j='${j}']`);
     }
-    const marker = baseEl.querySelector(
-      `.apexcharts-series[data\\:realIndex='${i}'] .apexcharts-marker[rel='${j}']`
-    );
-    return marker || null;
+    return (_b = this._seriesGroup(i)) == null ? void 0 : _b.querySelector(`.apexcharts-marker[rel='${j}']`);
+  }
+  /**
+   * 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));
   }
   // ─── Click / Enter ────────────────────────────────────────────────────────
-  _fireClick() {
-    const w = this.w;
-    const ttCtx = w.globals.tooltip;
-    if (!ttCtx) return;
-    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) {
+    var _a, _b;
+    const el = (
+      /** @type {any} */
+      (_a = this._focusedEl) == null ? void 0 : _a.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);
+    (_b = this.w.globals.tooltip) == null ? void 0 : _b.markerClick(
+      e,
+      this.seriesIndex,
+      this.dataPointIndex
+    );
   }
   // ─── Helpers ──────────────────────────────────────────────────────────────
   _isNavEnabled() {
@@ -7303,8 +7366,8 @@ 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;
+    const s = w.seriesData.series[si];
+    return Array.isArray(s) ? s.length : 1;
   }
   _clampCursor() {
     const seriesCount = this._getSeriesCount();
@@ -11739,520 +11802,16 @@ const resolveDataLabelOffset = (value, w, seriesIndex, dataPointIndex) => {
   });
   return Number.isFinite(resolved) ? resolved : 0;
 };
-function buildUnionEntries(join, oldN) {
-  const exitSet = new Set(join.exits);
-  const entries = [];
-  let oi = 0;
-  for (let nj = 0; nj < join.toOld.length; nj++) {
-    const oj = join.toOld[nj];
-    if (oj !== -1) {
-      while (oi < oj) {
-        if (exitSet.has(oi)) entries.push({ oldJ: oi, newJ: -1 });
-        oi++;
-      }
-      entries.push({ oldJ: oj, newJ: nj });
-      oi = oj + 1;
-    } else {
-      entries.push({ oldJ: -1, newJ: nj });
-    }
-  }
-  while (oi < oldN) {
-    if (exitSet.has(oi)) entries.push({ oldJ: oi, newJ: -1 });
-    oi++;
-  }
-  return entries;
-}
-function analyzeSeriesPath(d, expectedAnchors, isArea) {
-  if (!d || typeof d !== "string") return null;
-  const cmds = parsePath(d);
-  if (!cmds.length || cmds[0][0] !== "M") return null;
-  for (let i = 1; i < cmds.length; i++) {
-    if (cmds[i][0] === "M") return null;
-  }
-  let body = cmds;
-  let closing = null;
-  if (isArea) {
-    if (cmds.length < 5) return null;
-    closing = cmds.slice(-3);
-    body = cmds.slice(0, -3);
-    if (closing[2][0] !== "Z") return null;
-    if (closing[1][0] !== "L") return null;
-    if (closing[0][0] !== "L" && closing[0][0] !== "C") return null;
-  } else if (cmds[cmds.length - 1][0] === "Z") {
-    return null;
-  }
-  if (body.length !== expectedAnchors || body.length < 2) return null;
-  const segType = body[1][0];
-  if (segType !== "L" && segType !== "C") return null;
-  for (let i = 2; i < body.length; i++) {
-    if (body[i][0] !== segType) return null;
-  }
-  const anchors = body.map(
-    (c) => c[0] === "C" ? [Number(c[5]), Number(c[6])] : [Number(c[1]), Number(c[2])]
-  );
-  for (const a of anchors) {
-    if (!isFinite(a[0]) || !isFinite(a[1])) return null;
-  }
-  return { body, closing, segType, anchors };
-}
-function lerpPt(a, b, t) {
-  return [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t];
-}
-function splitCubic(s, cmd, t) {
-  const p0 = s;
-  const p1 = [cmd[1], cmd[2]];
-  const p2 = [cmd[3], cmd[4]];
-  const p3 = [cmd[5], cmd[6]];
-  const p01 = lerpPt(p0, p1, t);
-  const p12 = lerpPt(p1, p2, t);
-  const p23 = lerpPt(p2, p3, t);
-  const p012 = lerpPt(p01, p12, t);
-  const p123 = lerpPt(p12, p23, t);
-  const mid = lerpPt(p012, p123, t);
-  return {
-    first: ["C", p01[0], p01[1], p012[0], p012[1], mid[0], mid[1]],
-    second: ["C", p123[0], p123[1], p23[0], p23[1], p3[0], p3[1]],
-    mid
-  };
-}
-function splitLine(s, cmd, t) {
-  const e = [cmd[1], cmd[2]];
-  const mid = lerpPt(s, e, t);
-  return {
-    first: ["L", mid[0], mid[1]],
-    second: ["L", e[0], e[1]],
-    mid
-  };
-}
-function expandPath(analysis, ownIdx) {
-  const { body, closing, segType, anchors } = analysis;
-  const n = anchors.length;
-  const m = ownIdx.length;
-  const degen = (p) => segType === "C" ? ["C", p[0], p[1], p[0], p[1], p[0], p[1]] : ["L", p[0], p[1]];
-  const out = [["M", anchors[0][0], anchors[0][1]]];
-  let firstOwn = 0;
-  while (firstOwn < m && ownIdx[firstOwn] !== 0) firstOwn++;
-  for (let q = 1; q <= firstOwn; q++) out.push(degen(anchors[0]));
-  let entry = firstOwn + 1;
-  for (let s = 0; s < n - 1; s++) {
-    let interior = 0;
-    while (entry + interior < m && ownIdx[entry + interior] === -1) interior++;
-    const cmd = body[s + 1];
-    if (!interior) {
-      out.push(cmd.slice());
-    } else {
-      const totalParts = interior + 1;
-      let start = anchors[s];
-      let rest = cmd;
-      for (let q = 0; q < interior; q++) {
-        const t = 1 / (totalParts - q);
-        const sp = segType === "C" ? splitCubic(start, rest, t) : splitLine(start, rest, t);
-        out.push(sp.first);
-        start = sp.mid;
-        rest = sp.second;
-      }
-      out.push(rest);
-    }
-    entry += interior + 1;
-  }
-  while (entry < m) {
-    out.push(degen(anchors[n - 1]));
-    entry++;
-  }
-  if (closing) closing.forEach((c) => out.push(c.slice()));
-  return out;
-}
-function reconcilePathPair(fromD, toD, entries, oldN, newN, isArea) {
-  const fromAnalysis = analyzeSeriesPath(fromD, oldN, isArea);
-  if (!fromAnalysis) return null;
-  const toAnalysis = analyzeSeriesPath(toD, newN, isArea);
-  if (!toAnalysis) return null;
-  if (fromAnalysis.segType !== toAnalysis.segType) return null;
-  if ((fromAnalysis.closing || toAnalysis.closing) && (!fromAnalysis.closing || !toAnalysis.closing || fromAnalysis.closing[0][0] !== toAnalysis.closing[0][0])) {
-    return null;
-  }
-  const fromOwn = entries.map((e) => e.oldJ);
-  const toOwn = entries.map((e) => e.newJ);
-  return {
-    from: arrayToPath(expandPath(fromAnalysis, fromOwn)),
-    toInterp: arrayToPath(expandPath(toAnalysis, toOwn))
-  };
-}
-function lengthTransitionEnabled(w) {
-  var _a;
-  const anim = w.config.chart.animations;
-  if (!anim || anim.enabled === false) return false;
-  if (!anim.dynamicAnimation || anim.dynamicAnimation.enabled === false) {
-    return false;
-  }
-  const largeThreshold = (_a = anim.largeDatasetThreshold) != null ? _a : 0;
-  if (largeThreshold > 0 && w.globals.dataPoints > largeThreshold) return false;
-  return !!(Environment.isBrowser() && w.globals.dataChanged && w.globals.shouldAnimate);
-}
-function datumKey(w, realIndex, j) {
-  var _a, _b, _c, _d;
-  if ((_a = w.axisFlags) == null ? void 0 : _a.isXNumeric) {
-    const sx = (_c = (_b = w.seriesData) == null ? void 0 : _b.seriesX) == null ? void 0 : _c[realIndex];
-    if (sx && sx.length && sx[j] != null) return "x:" + sx[j];
-  }
-  const lbl = (_d = w.globals.labels) == null ? void 0 : _d[j];
-  if (lbl != null && String(lbl) !== "") {
-    return "c:" + (Array.isArray(lbl) ? lbl.join(" ") : String(lbl));
-  }
-  return "j:" + j;
-}
-function frameDatumKey(frame, realIndex, j) {
-  var _a, _b;
-  if (frame.isXNumeric) {
-    const sx = (_a = frame.seriesX) == null ? void 0 : _a[realIndex];
-    if (sx && sx.length && sx[j] != null) return "x:" + sx[j];
-  }
-  const lbl = (_b = frame.labels) == null ? void 0 : _b[j];
-  if (lbl != null && String(lbl) !== "") {
-    return "c:" + (Array.isArray(lbl) ? lbl.join(" ") : String(lbl));
-  }
-  return "j:" + j;
-}
-function joinKeys(oldKeys, newKeys) {
-  const oldIndex = /* @__PURE__ */ new Map();
-  oldKeys.forEach((k2, i) => {
-    if (!oldIndex.has(k2)) oldIndex.set(k2, i);
-  });
-  const toOld = new Array(newKeys.length);
-  const usedOld = /* @__PURE__ */ new Set();
-  let prev = -1;
-  let ordered = true;
-  let identity = oldKeys.length === newKeys.length;
-  newKeys.forEach((k2, i) => {
-    const oi = oldIndex.has(k2) && !usedOld.has(oldIndex.get(k2)) ? oldIndex.get(k2) : -1;
-    toOld[i] = oi;
-    if (oi !== -1) {
-      usedOld.add(oi);
-      if (oi < prev) ordered = false;
-      prev = oi;
-    }
-    if (oi !== i) identity = false;
-  });
-  const exits = [];
-  for (let i = 0; i < oldKeys.length; i++) {
-    if (!usedOld.has(i)) exits.push(i);
-  }
-  return { toOld, exits, ordered, changed: !identity };
-}
-function uniquifyKeys(keys) {
-  const seen = /* @__PURE__ */ new Map();
-  return keys.map((k2) => {
-    const count = seen.get(k2) || 0;
-    seen.set(k2, count + 1);
-    return count === 0 ? k2 : `${k2}#${count}`;
-  });
-}
-function seriesJoin(w, realIndex, includeIdentity = false, allowReorder = false) {
-  var _a, _b;
-  if (!lengthTransitionEnabled(w)) return null;
-  const frame = w.globals.prevStreamFrame;
-  if (!frame) return null;
-  const oldY = (_a = frame.seriesY) == null ? void 0 : _a[realIndex];
-  const newY = (_b = w.seriesData.series) == null ? void 0 : _b[realIndex];
-  if (!Array.isArray(oldY) || !Array.isArray(newY)) return null;
-  if (!oldY.length || !newY.length) return null;
-  const oldKeys = uniquifyKeys(
-    oldY.map((_, j) => frameDatumKey(frame, realIndex, j))
-  );
-  const newKeys = uniquifyKeys(newY.map((_, j) => datumKey(w, realIndex, j)));
-  const join = joinKeys(oldKeys, newKeys);
-  if (!join.ordered && !allowReorder) return null;
-  if (!join.changed && !includeIdentity) return null;
-  return { join, oldKeys, newKeys };
-}
-function morphEasing(w) {
-  var _a, _b;
-  const anim = w.config.chart.animations;
-  return resolveEasing((_b = (_a = anim.dynamicAnimation) == null ? void 0 : _a.easing) != null ? _b : anim.easing);
-}
-function rafTween(w, duration, ease, onFrame, onDone) {
-  const startAt = performance.now();
-  const step = (now) => {
-    if (w.globals.isDestroyed) return;
-    const raw = Math.max(0, Math.min(1, (now - startAt) / duration));
-    onFrame(ease(raw), raw);
-    if (raw < 1) {
-      BrowserAPIs.requestAnimationFrame(step);
-    } else if (onDone) {
-      onDone();
-    }
-  };
-  BrowserAPIs.requestAnimationFrame(step);
-}
-function tweenSeriesMarkers(w, { elPointsMain, realIndex, speed }) {
-  var _a, _b, _c, _d;
-  if (!(elPointsMain == null ? void 0 : elPointsMain.node)) return false;
-  const sj = seriesJoin(w, realIndex, true);
-  if (!sj) return false;
-  const frame = w.globals.prevStreamFrame;
-  if (!frame) return false;
-  const oldXP = (_a = frame.xPixels) == null ? void 0 : _a[realIndex];
-  const oldYP = (_b = frame.yPixels) == null ? void 0 : _b[realIndex];
-  if (!oldXP || !oldYP) return false;
-  const markers = elPointsMain.node.querySelectorAll(".apexcharts-marker");
-  if (!markers.length) return false;
-  const newXP = ((_c = w.globals.seriesXvalues) == null ? void 0 : _c[realIndex]) || [];
-  const newYP = ((_d = w.globals.seriesYvalues) == null ? void 0 : _d[realIndex]) || [];
-  const ease = morphEasing(w);
-  const duration = Math.max(1, speed || 1);
-  elPointsMain.node.classList.remove("apexcharts-element-hidden");
-  markers.forEach((node) => {
-    var _a2, _b2, _c2, _d2, _e, _f, _g, _h, _i;
-    const j = parseInt(
-      (_b2 = (_a2 = node.getAttribute("j")) != null ? _a2 : node.getAttribute("rel")) != null ? _b2 : "",
-      10
-    );
-    if (!isFinite(j) || j < 0 || j >= sj.join.toOld.length) return;
-    const oldJ = sj.join.toOld[j];
-    const to = newXP[j] != null && newYP[j] != null ? [newXP[j], newYP[j]] : null;
-    if (oldJ === -1 || !to) {
-      const style = (
-        /** @type {any} */
-        node.style
-      );
-      style.opacity = "0";
-      rafTween(
-        w,
-        duration,
-        ease,
-        (eased) => {
-          style.opacity = String(eased);
-        },
-        () => {
-          style.opacity = "";
-        }
-      );
-      return;
-    }
-    const dx = ((_c2 = oldXP[oldJ]) != null ? _c2 : NaN) - to[0];
-    const dy = ((_d2 = oldYP[oldJ]) != null ? _d2 : NaN) - to[1];
-    if (!isFinite(dx) || !isFinite(dy)) return;
-    const rFrom = (_g = (_f = (_e = frame.rPixels) == null ? void 0 : _e[realIndex]) == null ? void 0 : _f[oldJ]) != null ? _g : NaN;
-    const rTo = parseFloat(
-      (_i = (_h = node.getAttribute("r")) != null ? _h : node.getAttribute("default-marker-size")) != null ? _i : ""
-    );
-    const scales = isFinite(rFrom) && isFinite(rTo) && rTo > 0 && Math.abs(rFrom - rTo) > 0.25;
-    const moves = Math.abs(dx) >= 0.5 || Math.abs(dy) >= 0.5;
-    if (!moves && !scales) return;
-    const apply = (eased) => {
-      const offX = dx * (1 - eased);
-      const offY = dy * (1 - eased);
-      if (scales) {
-        const s = (rFrom + (rTo - rFrom) * eased) / rTo;
-        node.setAttribute(
-          "transform",
-          `translate(${offX + to[0] * (1 - s)}, ${offY + to[1] * (1 - s)}) scale(${s})`
-        );
-      } else {
-        node.setAttribute("transform", `translate(${offX}, ${offY})`);
-      }
-    };
-    apply(0);
-    rafTween(w, duration, ease, apply, () => {
-      node.removeAttribute("transform");
-    });
-  });
-  return true;
-}
-function scaleAbout(node, cx, cy, s) {
-  node.setAttribute("transform", `translate(${cx * (1 - s)}, ${cy * (1 - s)}) scale(${s})`);
-}
-function growRisingMarkers(w, { elPointsMain, realIndex, speed }) {
-  if (!(elPointsMain == null ? void 0 : elPointsMain.node) || !lengthTransitionEnabled(w)) return false;
-  if ((w.globals.risingSeries || []).indexOf(realIndex) === -1) return false;
-  const markers = elPointsMain.node.querySelectorAll(".apexcharts-marker");
-  if (!markers.length) return false;
-  const ease = morphEasing(w);
-  elPointsMain.node.classList.remove("apexcharts-element-hidden");
-  markers.forEach((node) => {
-    const b = node.getBBox();
-    const cx = b.x + b.width / 2;
-    const cy = b.y + b.height / 2;
-    scaleAbout(node, cx, cy, 0);
-    rafTween(
-      w,
-      Math.max(1, speed || 1),
-      ease,
-      (eased) => scaleAbout(node, cx, cy, eased),
-      () => node.removeAttribute("transform")
-    );
-  });
-  return true;
-}
-function shrinkCollapsingMarkers(w, { elPointsMain, realIndex, speed, drawPoint }) {
-  var _a, _b, _c;
-  if (!(elPointsMain == null ? void 0 : elPointsMain.node) || !lengthTransitionEnabled(w)) return false;
-  if ((w.globals.collapsingSeriesIndices || []).indexOf(realIndex) === -1) return false;
-  const frame = w.globals.prevStreamFrame;
-  const xs = (_a = frame == null ? void 0 : frame.xPixels) == null ? void 0 : _a[realIndex];
-  const ys = (_b = frame == null ? void 0 : frame.yPixels) == null ? void 0 : _b[realIndex];
-  if (!Array.isArray(xs) || !Array.isArray(ys)) return false;
-  const rs = ((_c = frame == null ? void 0 : frame.rPixels) == null ? void 0 : _c[realIndex]) || [];
-  const fallbackR = w.globals.markers.size[realIndex] || 0;
-  const ease = morphEasing(w);
-  let drawn = false;
-  for (let j = 0; j < xs.length; j++) {
-    const x2 = xs[j];
-    const y = ys[j];
-    if (x2 == null || y == null || !isFinite(x2) || !isFinite(y)) continue;
-    const r = isFinite(rs[j]) ? rs[j] : fallbackR;
-    if (!(r > 0)) continue;
-    const el = drawPoint(x2, y, r, j);
-    if (!(el == null ? void 0 : el.node)) continue;
-    elPointsMain.add(el);
-    const node = el.node;
-    node.classList.add("apexcharts-marker-exit");
-    const landed = Animations.trackSeriesTween(w, realIndex);
-    rafTween(
-      w,
-      Math.max(1, speed || 1),
-      ease,
-      (eased) => scaleAbout(node, x2, y, 1 - eased),
-      () => {
-        scaleAbout(node, x2, y, 0);
-        landed();
-      }
-    );
-    drawn = true;
-  }
-  if (drawn) elPointsMain.node.classList.remove("apexcharts-element-hidden");
-  return drawn;
-}
-function reconcileSeriesPaths(w, { type, realIndex, pathFromLine, pathFromArea, linePaths, areaPaths }) {
-  var _a, _b;
-  const sj = seriesJoin(w, realIndex);
-  if (!sj) return null;
-  const { join, oldKeys, newKeys } = sj;
-  const frame = w.globals.prevStreamFrame;
-  if (!frame) return null;
-  const oldY = (_a = frame.seriesY) == null ? void 0 : _a[realIndex];
-  const newY = (_b = w.seriesData.series) == null ? void 0 : _b[realIndex];
-  if (oldY.length < 2 || newY.length < 2) return null;
-  if (oldY.some((v) => v === null) || newY.some((v) => v === null)) return null;
-  const entries = buildUnionEntries(join, oldKeys.length);
-  const out = {};
-  if (Array.isArray(linePaths) && linePaths.length === 1 && pathFromLine) {
-    out.line = reconcilePathPair(
-      pathFromLine,
-      linePaths[0],
-      entries,
-      oldKeys.length,
-      newKeys.length,
-      false
-    );
-  }
-  if (type === "area" && Array.isArray(areaPaths) && areaPaths.length === 1 && pathFromArea) {
-    out.area = reconcilePathPair(
-      pathFromArea,
-      areaPaths[0],
-      entries,
-      oldKeys.length,
-      newKeys.length,
-      true
-    );
-  }
-  if (!out.line && !out.area) return null;
-  return out;
-}
-function firstMove(d) {
-  const m = /^M\s*([+-]?[\d.eE]+)[\s,]+([+-]?[\d.eE]+)/.exec(d || "");
-  if (!m) return null;
-  const x2 = parseFloat(m[1]);
-  const y = parseFloat(m[2]);
-  return isFinite(x2) && isFinite(y) ? { x: x2, y } : null;
-}
-function renderBarExitGhosts({
-  w,
-  elSeries,
-  record,
-  newKeys,
-  isHorizontal,
-  speed
-}) {
-  var _a;
-  if (!lengthTransitionEnabled(w)) return;
-  if (!record || !Array.isArray(record.paths) || !(elSeries == null ? void 0 : elSeries.node)) return;
-  const newKeySet = new Set(newKeys);
-  const exits = record.paths.filter(
-    (p) => p && p.d && p.key != null && !newKeySet.has(p.key)
-  );
-  if (!exits.length) return;
-  const graphics = new Graphics(w);
-  const fallbackFill = (_a = w.globals.colors) == null ? void 0 : _a[parseInt(String(record.realIndex), 10)];
-  exits.forEach((p) => {
-    let fill = p.fill || fallbackFill || "#c8c8c8";
-    if (String(fill).indexOf("url(") === 0) fill = fallbackFill || "#c8c8c8";
-    const ghost = graphics.drawPath({
-      d: p.d,
-      stroke: "none",
-      strokeWidth: 0,
-      fill,
-      fillOpacity: 1,
-      classes: "apexcharts-bar-ghost"
-    });
-    const node = ghost.node;
-    node.setAttribute("pointer-events", "none");
-    ghost.attr(
-      "clip-path",
-      `url(#gridRectBarMask${w.globals.cuid})`
-    );
-    elSeries.node.insertBefore(node, elSeries.node.firstChild);
-    const start = firstMove(p.d);
-    let origin = isHorizontal ? "left center" : "center bottom";
-    try {
-      const bb = node.getBBox();
-      if (start && bb) {
-        if (isHorizontal) {
-          origin = Math.abs(start.x - bb.x) <= Math.abs(start.x - (bb.x + bb.width)) ? "left center" : "right center";
-        } else {
-          origin = Math.abs(start.y - (bb.y + bb.height)) <= Math.abs(start.y - bb.y) ? "center bottom" : "center top";
-        }
-      }
-    } catch (_) {
-    }
-    const style = node.style;
-    style.transformBox = "fill-box";
-    style.transformOrigin = origin;
-    node.setAttribute("data:ghostKey", `${record.realIndex}::${p.key}`);
-    try {
-      const bb = node.getBBox();
-      const edge = isHorizontal ? origin.startsWith("left") ? bb.x : bb.x + bb.width : origin.endsWith("bottom") ? bb.y + bb.height : bb.y;
-      if (isFinite(edge)) node.setAttribute("data:ghostEdge", String(edge));
-    } catch (_) {
-    }
-    const duration = Math.max(1, speed || 1);
-    const startAt = performance.now();
-    const step = (now) => {
-      if (w.globals.isDestroyed || !node.parentNode) return;
-      const t = Math.max(0, Math.min(1, (now - startAt) / duration));
-      const eased = 1 - Math.pow(1 - t, 3);
-      const scale = 1 - eased;
-      style.transform = isHorizontal ? `scaleX(${scale})` : `scaleY(${scale})`;
-      style.opacity = String(1 - eased);
-      if (t < 1) {
-        BrowserAPIs.requestAnimationFrame(step);
-      } else {
-        node.parentNode.removeChild(node);
-      }
-    };
-    BrowserAPIs.requestAnimationFrame(step);
-  });
-}
-class BarDataLabels {
-  /**
-   * @param {import('../../../charts/Bar').default} barCtx
-   */
-  constructor(barCtx) {
-    this.w = barCtx.w;
-    this.barCtx = barCtx;
-    this.totalFormatter = this.w.config.plotOptions.bar.dataLabels.total.formatter;
-    if (!this.totalFormatter) {
-      this.totalFormatter = this.w.config.dataLabels.formatter;
+class BarDataLabels {
+  /**
+   * @param {import('../../../charts/Bar').default} barCtx
+   */
+  constructor(barCtx) {
+    this.w = barCtx.w;
+    this.barCtx = barCtx;
+    this.totalFormatter = this.w.config.plotOptions.bar.dataLabels.total.formatter;
+    if (!this.totalFormatter) {
+      this.totalFormatter = this.w.config.dataLabels.formatter;
     }
   }
   /** handleBarDataLabels is used to calculate the positions for the data-labels
@@ -12278,7 +11837,8 @@ class BarDataLabels {
       barXPosition,
       barYPosition,
       visibleSeries,
-      hl
+      hl,
+      noLabel
     } = opts;
     const w = this.w;
     const graphics = new Graphics(this.barCtx.w);
@@ -12392,7 +11952,7 @@ class BarDataLabels {
         dataLabelsPos.dataLabelsX = (box.levelStart + box.levelEnd) / 2 + offX;
       }
     }
-    dataLabels = this.drawCalculatedDataLabels({
+    dataLabels = noLabel ? null : this.drawCalculatedDataLabels({
       x: dataLabelsPos.dataLabelsX,
       y: dataLabelsPos.dataLabelsY,
       neg: params.neg,
@@ -12478,8 +12038,8 @@ class BarDataLabels {
     return ctx && byGroups && byGroups[ctx.groupIndex] ? byGroups[ctx.groupIndex][j] : this.barCtx.stackedSeriesTotals[j];
   }
   /**
-   * The running stack at this column's x (BarStacked `tops`, columns only) on
-   * a numeric axis, where columns stack by x rather than by index.
+   * The running stack at this bar's x (BarStacked `tops`) on a numeric axis,
+   * where bars stack by x rather than by index.
    * @param {number} realIndex @param {number} j
    */
   xStackTop(realIndex, j) {
@@ -12488,6 +12048,21 @@ class BarDataLabels {
     return w.axisFlags.isXNumeric && /** @type {any} */
     ((_b = (_a = this.barCtx.stacks) == null ? void 0 : _a[w.labelData.seriesGroupIndex[realIndex]]) == null ? void 0 : _b.tops.get(w.seriesData.seriesX[realIndex][j]));
   }
+  /**
+   * The stacked total's text box, measured in the total's own font.
+   * @param {number} realIndex @param {number} j
+   */
+  totalRects(realIndex, j) {
+    const s = this.barCtx.barOptions.dataLabels.total.style;
+    return new Graphics(this.w).getTextRects(
+      this.getStackedTotalDataLabel({ realIndex, j }),
+      s.fontSize,
+      s.fontFamily,
+      void 0,
+      true,
+      s.fontWeight
+    );
+  }
   /** @param {{realIndex: any, j: any}} opts */
   getStackedTotalDataLabel({ realIndex, j }) {
     const w = this.w;
@@ -12508,7 +12083,6 @@ class BarDataLabels {
     var _a;
     const w = this.w;
     let {
-      i,
       j,
       realIndex,
       y,
@@ -12518,7 +12092,6 @@ class BarDataLabels {
       textRects,
       dataLabelsX,
       dataLabelsY,
-      dataLabelsConfig,
       barDataLabelsConfig,
       barTotalDataLabelsConfig,
       strokeWidth,
@@ -12532,7 +12105,7 @@ class BarDataLabels {
     barHeight = Math.abs(barHeight);
     const vertical = w.config.plotOptions.bar.dataLabels.orientation === "vertical";
     const { zeroEncounters } = this.barCtx.barHelpers.getZeroValueEncounters({
-      i,
+      i: realIndex,
       j
     });
     bcx = bcx - strokeWidth / 2;
@@ -12553,7 +12126,7 @@ class BarDataLabels {
       const offsetDLX = 2;
       dataLabelsX = dataLabelsX + textRects.height / 2 - strokeWidth / 2 - offsetDLX;
     }
-    const valIsNegative = (_a = opts.neg) != null ? _a : w.seriesData.series[i][j] < 0;
+    const valIsNegative = (_a = opts.neg) != null ? _a : w.seriesData.series[realIndex][j] < 0;
     let newY = y;
     if (this.barCtx.isReversed) {
       newY = y + (valIsNegative ? barHeight : -barHeight);
@@ -12627,16 +12200,11 @@ class BarDataLabels {
     });
     if (this.hlt) lowestPrevY = this.hlt.edge;
     if (this.drawsStackedTotal(realIndex) && barTotalDataLabelsConfig.enabled) {
-      const ADDITIONAL_OFFY = 18;
-      const graphics = new Graphics(this.barCtx.w);
-      const totalLabeltextRects = graphics.getTextRects(
-        this.getStackedTotalDataLabel({ realIndex, j }),
-        dataLabelsConfig.fontSize
-      );
+      const h = this.totalRects(realIndex, j).height;
       if (valIsNegative) {
-        totalDataLabelsY = lowestPrevY - totalLabeltextRects.height / 2 - offY - barTotalDataLabelsConfig.offsetY + ADDITIONAL_OFFY;
+        totalDataLabelsY = lowestPrevY + h * 0.77 - offY - barTotalDataLabelsConfig.offsetY;
       } else {
-        totalDataLabelsY = lowestPrevY + totalLabeltextRects.height + offY + barTotalDataLabelsConfig.offsetY - ADDITIONAL_OFFY;
+        totalDataLabelsY = lowestPrevY - h * 0.3 + offY + barTotalDataLabelsConfig.offsetY;
       }
       const xDivision = dataPointsDividedWidth;
       totalDataLabelsX = totalDataLabelsBcx + (w.axisFlags.isXNumeric ? -barWidth / 2 : barWidth / 2 - xDivision) + barTotalDataLabelsConfig.offsetX;
@@ -12666,7 +12234,6 @@ class BarDataLabels {
     const w = this.w;
     let {
       x: x2,
-      i,
       j,
       realIndex,
       bcy,
@@ -12683,7 +12250,7 @@ class BarDataLabels {
     } = opts;
     const dataPointsDividedHeight = w.layout.gridHeight / w.globals.dataPoints;
     const { zeroEncounters } = this.barCtx.barHelpers.getZeroValueEncounters({
-      i,
+      i: realIndex,
       j
     });
     barWidth = Math.abs(barWidth);
@@ -12700,7 +12267,7 @@ class BarDataLabels {
     let totalDataLabelsX;
     let totalDataLabelsY;
     let totalDataLabelsAnchor = "start";
-    const valIsNegative = (_b = opts.neg) != null ? _b : w.seriesData.series[i][j] < 0;
+    const valIsNegative = (_b = opts.neg) != null ? _b : w.seriesData.series[realIndex][j] < 0;
     let newX = x2;
     if (this.barCtx.isReversed) {
       newX = x2 + (valIsNegative ? -barWidth : barWidth);
@@ -12735,10 +12302,14 @@ class BarDataLabels {
     }
     let lowestPrevX = newX;
     const totalGroupCtx = this.getTotalGroupContext(realIndex);
-    const stacks = (
+    const top = this.xStackTop(realIndex, j);
+    const stacks = top ? [] : (
       /** @type {any} */
       this.barCtx.stacks || []
     );
+    if (top) {
+      lowestPrevX = valIsNegative ? Math.min(newX, top[4]) : Math.max(newX, top[5]);
+    }
     stacks.forEach((g, gi) => {
       if (totalGroupCtx && gi !== totalGroupCtx.groupIndex) return;
       g.prevX.forEach((arr) => {
@@ -12751,11 +12322,7 @@ class BarDataLabels {
     });
     if (this.hlt) lowestPrevX = this.hlt.edge;
     if (this.drawsStackedTotal(realIndex) && barTotalDataLabelsConfig.enabled) {
-      const graphics = new Graphics(this.barCtx.w);
-      const totalLabeltextRects = graphics.getTextRects(
-        this.getStackedTotalDataLabel({ realIndex, j }),
-        dataLabelsConfig.fontSize
-      );
+      const totalLabeltextRects = this.totalRects(realIndex, j);
       if (valIsNegative) {
         totalDataLabelsX = lowestPrevX - strokeWidth - offX - barTotalDataLabelsConfig.offsetX;
         totalDataLabelsAnchor = "end";
@@ -12824,8 +12391,9 @@ class BarDataLabels {
     let elDataLabelsWrap = null;
     const isSeriesCollapsed = w.globals.collapsedSeriesIndices.indexOf(i) > -1;
     const isSeriesCollapsing = (w.globals.collapsingSeriesIndices || []).indexOf(i) > -1;
+    const dlKey = `${i}::${this.barCtx._keys(i)[j]}`;
     if (isSeriesCollapsing) {
-      const prev = (_a = w.globals.prevDataLabels) == null ? void 0 : _a.get(`${i}::${datumKey(w, i, j)}`);
+      const prev = (_a = w.globals.prevDataLabels) == null ? void 0 : _a.get(dlKey);
       if (prev && isFinite(prev.val)) {
         val = prev.val;
         text = void 0;
@@ -12838,10 +12406,7 @@ class BarDataLabels {
       });
       const dlCfg = w.config.dataLabels;
       if (((_b = dlCfg.animate) == null ? void 0 : _b.enabled) || ((_c = dlCfg.countUp) == null ? void 0 : _c.enabled)) {
-        elDataLabelsWrap.node.setAttribute(
-          "data:dlKey",
-          `${i}::${datumKey(w, i, j)}`
-        );
+        elDataLabelsWrap.node.setAttribute("data:dlKey", dlKey);
         elDataLabelsWrap.node.setAttribute("data:dlJ", String(j));
         if (typeof val === "number" && isFinite(val)) {
           elDataLabelsWrap.node.setAttribute("data:dlVal", String(val));
@@ -12859,29 +12424,12 @@ class BarDataLabels {
       if (!val && w.config.plotOptions.bar.hideZeroBarsWhenGrouped) {
         text = "";
       }
-      const valIsNegative = neg != null ? neg : w.seriesData.series[i][j] < 0;
-      const position = w.config.plotOptions.bar.dataLabels.position;
+      let anchor = dataLabelsConfig.textAnchor;
       if (w.config.plotOptions.bar.dataLabels.orientation === "vertical") {
-        if (position === "top") {
-          if (valIsNegative) dataLabelsConfig.textAnchor = "end";
-          else dataLabelsConfig.textAnchor = "start";
-        }
-        if (position === "center") {
-          dataLabelsConfig.textAnchor = "middle";
-        }
-        if (position === "bottom") {
-          if (valIsNegative) dataLabelsConfig.textAnchor = "end";
-          else dataLabelsConfig.textAnchor = "start";
-        }
+        anchor = w.config.plotOptions.bar.dataLabels.position === "center" ? "middle" : (neg != null ? neg : w.seriesData.series[i][j] < 0) ? "end" : "start";
       }
-      if (this.barCtx.isRangeBar && this.barCtx.barOptions.dataLabels.hideOverflowingLabels) {
-        const txRect = graphics.getTextRects(
-          text,
-          parseFloat(dataLabelsConfig.style.fontSize).toString()
-        );
-        if (barWidth < txRect.width) {
-          text = "";
-        }
+      if (this.barCtx.isRangeBar && this.barCtx.barOptions.dataLabels.hideOverflowingLabels && barWidth < textRects.width) {
+        text = "";
       }
       if (w.config.chart.stacked && this.barCtx.barOptions.dataLabels.hideOverflowingLabels && // A collapsing series is measured against its NEW extent, which is
       // already zero, so this would blank a label whose bar is still at full
@@ -12897,14 +12445,14 @@ class BarDataLabels {
           }
         }
       }
-      const modifiedDataLabelsConfig = __spreadValues({}, dataLabelsConfig);
-      if (this.barCtx.isHorizontal) {
-        if (val < 0) {
-          if (dataLabelsConfig.textAnchor === "start") {
-            modifiedDataLabelsConfig.textAnchor = "end";
-          } else if (dataLabelsConfig.textAnchor === "end") {
-            modifiedDataLabelsConfig.textAnchor = "start";
-          }
+      const modifiedDataLabelsConfig = __spreadProps(__spreadValues({}, dataLabelsConfig), {
+        textAnchor: anchor
+      });
+      if (this.barCtx.isHorizontal && val < 0) {
+        if (anchor === "start") {
+          modifiedDataLabelsConfig.textAnchor = "end";
+        } else if (anchor === "end") {
+          modifiedDataLabelsConfig.textAnchor = "start";
         }
       }
       dataLabels.plotDataLabelsText({
@@ -12956,7 +12504,7 @@ class BarDataLabels {
         const { groupIndex } = this.barCtx.barHelpers.getGroupIndex(realIndex);
         totalDataLabelText.node.setAttribute(
           "data:dlTotalKey",
-          `${groupIndex}::${datumKey(this.w, realIndex, j)}`
+          `${groupIndex}::${this.barCtx._keys(realIndex)[j]}`
         );
         totalDataLabelText.node.setAttribute(
           "data:dlTotalSeries",
@@ -12986,9 +12534,11 @@ let Helpers$1 = class Helpers3 {
   }
   /**
    * @param {any[]} series
+   * @param {any} [seriesIndex] a combo's real indices of `series`
    */
-  initVariables(series) {
+  initVariables(series, seriesIndex) {
     const w = this.w;
+    this.seriesIndex = seriesIndex;
     this.barCtx.series = series;
     this.barCtx.totalItems = 0;
     this.barCtx.seriesLen = 0;
@@ -13009,6 +12559,8 @@ let Helpers$1 = class Helpers3 {
         this.barCtx.visibleItems = w.globals.dataPoints;
       }
     }
+    const labels = w.labelData.labels;
+    this.rows = w.globals.isBarHorizontal && w.axisFlags.isXNumeric && !this.barCtx.isRangeBar && w.seriesData.seriesX.some((s) => s == null ? void 0 : s.some((x2, j) => x2 !== labels[j])) ? new Map(labels.map((x2, r) => [x2, r])) : null;
     this.arrBorderRadius = this.createBorderRadiusArr(w.seriesData.series);
     if (Utils.isSafari()) {
       this.arrBorderRadius = this.arrBorderRadius.map(
@@ -13073,15 +12625,19 @@ let Helpers$1 = class Helpers3 {
    * Collapsed series count too, exactly as they did for `minXDiff`. Skipping
    * them would widen every bar the moment someone hid the tightest-spaced
    * series from the legend, so bar geometry would depend on legend state.
+   * In a combo only this renderer's own series count: a line's x values say
+   * nothing about how wide a column may be.
    *
    * @returns {number}
    */
   _unionMinXGap() {
     const w = this.w;
     const seriesX = w.seriesData.seriesX || [];
+    const own = this.seriesIndex;
     const arrays = [];
     for (let i = 0; i < seriesX.length; i++) {
       const xs = seriesX[i];
+      if (own && own.indexOf(i) < 0) continue;
       if (Array.isArray(xs) && xs.length > 0) {
         arrays.push(
           xs.some((v, n) => v < xs[n - 1]) ? xs.filter((v) => v === +v).sort((a, b) => a - b) : xs
@@ -13122,6 +12678,15 @@ let Helpers$1 = class Helpers3 {
     }
     return isFinite(min) ? min : 0;
   }
+  /**
+   * The band a horizontal bar is drawn in: its x's band when the series do
+   * not line up by index (see initVariables), else its index.
+   * @param {number} realIndex @param {number} j
+   */
+  barRow(realIndex, j) {
+    var _a, _b, _c;
+    return (_c = (_b = this.rows) == null ? void 0 : _b.get((_a = this.w.seriesData.seriesX[realIndex]) == null ? void 0 : _a[j])) != null ? _c : j;
+  }
   /**
    * @param {number} realIndex
    */
@@ -13244,7 +12809,7 @@ let Helpers$1 = class Helpers3 {
       });
     }
     const connectorFill = this.getDumbbellConnectorFill(i, j);
-    const datumFill = connectorFill || ((_a = w.config.series[i].data[j]) == null ? void 0 : _a.fill);
+    const datumFill = connectorFill || ((_a = w.config.series[realIndex].data[j]) == null ? void 0 : _a.fill);
     const connector = this.barCtx.barOptions.isDumbbell ? w.config.plotOptions.bar.dumbbell.connector : null;
     let connectorOpacity;
     if (connector && connector.color) {
@@ -13397,11 +12962,10 @@ let Helpers$1 = class Helpers3 {
    * @returns {string[][]}
    */
   createBorderRadiusArr(series) {
-    var _a;
     const w = this.w;
     const alwaysApplyRadius = !this.w.config.chart.stacked || w.config.plotOptions.bar.borderRadius <= 0;
     const numSeries = series.length;
-    const numColumns = ((_a = series[0]) == null ? void 0 : _a.length) | 0;
+    const numColumns = Math.max(0, ...series.map((s) => (s == null ? void 0 : s.length) | 0));
     const output = Array.from(
       { length: numSeries },
       () => Array(numColumns).fill(alwaysApplyRadius ? "top" : "none")
@@ -13557,7 +13121,7 @@ let Helpers$1 = class Helpers3 {
     j,
     w
   }) {
-    var _a, _b;
+    var _a, _b, _c;
     const r = this.barRect({
       a: barXPosition,
       len: barWidth,
@@ -13588,7 +13152,7 @@ let Helpers$1 = class Helpers3 {
       const _ctx = this.barCtx.groupCtx;
       _ctx.yArrj.push(y2 - strokeCenter * direction);
       _ctx.yArrjF.push(Math.abs(y1 - y2 + r.strokeWidth * direction));
-      _ctx.yArrjVal.push(this.barCtx.series[i][j]);
+      _ctx.yArrjVal.push((_c = this.barCtx.series[i][j]) != null ? _c : null);
     }
     return {
       pathTo,
@@ -13602,43 +13166,140 @@ let Helpers$1 = class Helpers3 {
     };
   }
   /**
-   * Build a trapezoidal funnel-stage path. Used when
-   * `plotOptions.funnel.shape === 'trapezoid'` is active alongside `isFunnel`.
+   * Build a trapezoidal funnel-stage path. Used when
+   * `plotOptions.funnel.shape === 'trapezoid'` is active alongside `isFunnel`.
+   *
+   * Each stage is a 4-corner polygon whose top width matches the current
+   * stage's value and bottom width matches the next stage's value, producing
+   * continuous sloped sides between consecutive stages.
+   *
+   * For the last stage, the bottom width is configurable:
+   * - `lastShape: 'flat'`  → bottom width = top width (parallel sides)
+   * - `lastShape: 'taper'` → bottom width = 0 (taper to a point)
+   *
+   * @param {{ barYPosition: number, barHeight: number, series: any[][], i: number, j: number, realIndex: number, strokeWidth: number, w: any }} opts
+   */
+  getFunnelTrapezoidPaths({
+    barYPosition,
+    barHeight,
+    series,
+    i,
+    j,
+    realIndex,
+    strokeWidth,
+    w
+  }) {
+    var _a, _b;
+    const graphics = new Graphics(this.barCtx.w);
+    const center = w.layout.gridWidth / 2;
+    const halfWidthFor = (v) => Math.abs(v / this.barCtx.invertedYRatio) / 2;
+    const topHalf = halfWidthFor(series[i][j]);
+    const lastIdx = series[i].length - 1;
+    const isLast = j === lastIdx;
+    const lastShape = w.config.plotOptions.funnel.lastShape === "taper" ? "taper" : "flat";
+    let bottomHalf;
+    if (isLast) {
+      bottomHalf = lastShape === "taper" ? 0 : topHalf;
+    } else {
+      bottomHalf = halfWidthFor(series[i][j + 1]);
+    }
+    const strokeCenter = strokeWidth / 2;
+    const y1 = barYPosition + strokeCenter;
+    const y2 = barYPosition + barHeight - strokeCenter;
+    const topLeftX = center - topHalf;
+    const topRightX = center + topHalf;
+    const bottomLeftX = center - bottomHalf;
+    const bottomRightX = center + bottomHalf;
+    const pathTo = graphics.move(topLeftX, y1) + graphics.line(topRightX, y1) + graphics.line(bottomRightX, y2) + graphics.line(bottomLeftX, y2) + " Z";
+    let pathFrom = null;
+    const morphFrom = (_b = (_a = this.barCtx.ctx) == null ? void 0 : _a.morphTypeChange) == null ? void 0 : _b.getInitialPathFor(
+      realIndex,
+      j
+    );
+    if (morphFrom) {
+      pathFrom = morphFrom;
+    } else if (w.globals.previousPaths.length > 0) {
+      pathFrom = this.barCtx.getPreviousPath(realIndex, j, pathTo);
+    }
+    if (pathFrom == null) {
+      pathFrom = graphics.move(center, y1) + graphics.line(center, y1) + graphics.line(center, y2) + graphics.line(center, y2) + " Z";
+    }
+    return {
+      pathTo,
+      pathFrom,
+      // x is the right edge of the wider (top) side — used by dataLabel
+      // positioning helpers that expect a "right" reference.
+      x: topRightX,
+      x1: topLeftX,
+      barXPosition: center
+    };
+  }
+  /**
+   * Pre-compute the per-segment layout for a value-proportional pyramid.
    *
-   * Each stage is a 4-corner polygon whose top width matches the current
-   * stage's value and bottom width matches the next stage's value, producing
-   * continuous sloped sides between consecutive stages.
+   * Each segment is a horizontal slice of a triangle whose apex sits at the
+   * top of the plot area (width = 0) and whose base spans `gridWidth` at the
+   * bottom. The vertical extent of each slice is its share of the total
+   * series value, so areas track value contribution and segments share
+   * edges (no gaps). The first data point is the apex, the last is the base.
    *
-   * For the last stage, the bottom width is configurable:
-   * - `lastShape: 'flat'`  → bottom width = top width (parallel sides)
-   * - `lastShape: 'taper'` → bottom width = 0 (taper to a point)
+   * @param {any[]} seriesData - 1D array of values for a single series row
+   * @returns {{ y: number, height: number, topHalf: number, bottomHalf: number }[]}
+   */
+  computePyramidLayout(seriesData) {
+    const w = this.w;
+    const gridHeight = w.layout.gridHeight;
+    const gridWidth = w.layout.gridWidth;
+    const values = seriesData.map(
+      /** @param {any} v */
+      (v) => Math.abs(Number(v) || 0)
+    );
+    const total = values.reduce(
+      /** @param {number} a @param {number} b */
+      (a, b) => a + b,
+      0
+    );
+    if (total === 0 || gridHeight <= 0) {
+      return values.map(() => ({ y: 0, height: 0, topHalf: 0, bottomHalf: 0 }));
+    }
+    const halfWidth = gridWidth / 2;
+    let cumulative = 0;
+    const layout = [];
+    for (let j = 0; j < values.length; j++) {
+      const topRatio = cumulative / total;
+      cumulative += values[j];
+      const bottomRatio = cumulative / total;
+      const topY = topRatio * gridHeight;
+      const bottomY = bottomRatio * gridHeight;
+      layout.push({
+        y: topY,
+        height: bottomY - topY,
+        topHalf: topRatio * halfWidth,
+        bottomHalf: bottomRatio * halfWidth
+      });
+    }
+    return layout;
+  }
+  /**
+   * Build a single pyramid stage path. Geometry is precomputed by
+   * `computePyramidLayout`; this method only renders that geometry into an
+   * SVG path string plus a `pathFrom` for entry/morph animations.
    *
-   * @param {{ barYPosition: number, barHeight: number, series: any[][], i: number, j: number, realIndex: number, strokeWidth: number, w: any }} opts
+   * @param {{ barYPosition: number, barHeight: number, topHalf: number, bottomHalf: number, realIndex: number, j: number, strokeWidth: number, w: any }} opts
    */
-  getFunnelTrapezoidPaths({
+  getPyramidPaths({
     barYPosition,
     barHeight,
-    series,
-    i,
-    j,
+    topHalf,
+    bottomHalf,
     realIndex,
+    j,
     strokeWidth,
     w
   }) {
     var _a, _b;
     const graphics = new Graphics(this.barCtx.w);
     const center = w.layout.gridWidth / 2;
-    const halfWidthFor = (v) => Math.abs(v / this.barCtx.invertedYRatio) / 2;
-    const topHalf = halfWidthFor(series[i][j]);
-    const lastIdx = series[i].length - 1;
-    const isLast = j === lastIdx;
-    const lastShape = w.config.plotOptions.funnel.lastShape === "taper" ? "taper" : "flat";
-    let bottomHalf;
-    if (isLast) {
-      bottomHalf = lastShape === "taper" ? 0 : topHalf;
-    } else {
-      bottomHalf = halfWidthFor(series[i][j + 1]);
-    }
     const strokeCenter = strokeWidth / 2;
     const y1 = barYPosition + strokeCenter;
     const y2 = barYPosition + barHeight - strokeCenter;
@@ -13663,497 +13324,912 @@ let Helpers$1 = class Helpers3 {
     return {
       pathTo,
       pathFrom,
-      // x is the right edge of the wider (top) side — used by dataLabel
-      // positioning helpers that expect a "right" reference.
       x: topRightX,
       x1: topLeftX,
       barXPosition: center
     };
   }
+  /** @param {{ barYPosition?: any, barHeight?: any, x1?: any, x2?: any, strokeWidth?: any, isReversed?: any, series?: any, realIndex?: any, i?: any, j?: any, w?: any }} opts */
+  getBarpaths({
+    barYPosition,
+    barHeight,
+    x1,
+    x2,
+    strokeWidth,
+    series,
+    realIndex,
+    i,
+    j,
+    w
+  }) {
+    var _a, _b, _c;
+    const graphics = new Graphics(this.barCtx.w);
+    const r = this.barRect({
+      a: barYPosition,
+      len: barHeight,
+      v1: x1,
+      v2: x2,
+      strokeWidth,
+      realIndex,
+      j,
+      dir: series[i][j] >= 0 ? 1 : -1,
+      horizontal: true
+    });
+    const { y1, y2, sl, closing, squarePathTo, pathTo, strokeCenter, direction } = r;
+    x1 = r.x1;
+    x2 = r.x2;
+    const isFunnel = this.barCtx.isFunnel;
+    const fromX = isFunnel ? (x1 + x2) / 2 : x1;
+    let pathFrom = null;
+    const morphFrom = (_b = (_a = this.barCtx.ctx) == null ? void 0 : _a.morphTypeChange) == null ? void 0 : _b.getInitialPathFor(
+      realIndex,
+      j
+    );
+    if (morphFrom) {
+      pathFrom = morphFrom;
+    } else if (w.globals.previousPaths.length > 0) {
+      pathFrom = this.barCtx.getPreviousPath(realIndex, j, pathTo, squarePathTo);
+    }
+    if (pathFrom == null) {
+      const slFrom = isFunnel ? graphics.line(fromX, y2) : sl;
+      pathFrom = graphics.move(fromX, y1) + graphics.line(fromX, y1) + slFrom + slFrom + slFrom + slFrom + slFrom + graphics.line(fromX, y1) + closing;
+    }
+    if (w.config.chart.stacked) {
+      const _ctx = this.barCtx.groupCtx;
+      _ctx.xArrj.push(x2 + strokeCenter * direction);
+      _ctx.xArrjF.push(Math.abs(x1 - x2 - r.strokeWidth * direction));
+      _ctx.xArrjVal.push((_c = this.barCtx.series[i][j]) != null ? _c : null);
+    }
+    return {
+      pathTo,
+      pathFrom,
+      // See getColumnPaths. Here `x1` is the start value's edge and `x2` the
+      // end value's, because a horizontal bar's two ends arrive unsorted.
+      drawnBox: { x1, x2, y1, y2 }
+    };
+  }
   /**
-   * Pre-compute the per-segment layout for a value-proportional pyramid.
+   * @param {number} value
+   * @param {number} zeroW
+   */
+  getXForValue(value, zeroW, zeroPositionForNull = true) {
+    let xForVal = zeroPositionForNull ? zeroW : null;
+    if (typeof value !== "undefined" && value !== null) {
+      xForVal = zeroW + value / this.barCtx.invertedYRatio - (this.barCtx.isReversed ? value / this.barCtx.invertedYRatio : 0) * 2;
+    }
+    return xForVal;
+  }
+  /**
+   * @param {number} value
+   * @param {number} zeroH
+   * @param {number} translationsIndex
+   */
+  getYForValue(value, zeroH, translationsIndex, zeroPositionForNull = true) {
+    let yForVal = zeroPositionForNull ? zeroH : null;
+    if (typeof value !== "undefined" && value !== null) {
+      yForVal = zeroH - value / this.barCtx.yRatio[translationsIndex] + (this.barCtx.isReversed ? value / this.barCtx.yRatio[translationsIndex] : 0) * 2;
+    }
+    return yForVal;
+  }
+  /**
+   * @param {string} type
+   * @param {number} zeroW
+   * @param {number} zeroH
+   * @param {number} i
+   * @param {number} j
+   * @param {number} translationsIndex
+   */
+  getGoalValues(type, zeroW, zeroH, i, j, translationsIndex) {
+    const w = this.w;
+    const goals = [];
+    const pushGoal = (value, attrs) => {
+      if (!w.globals.invalidLogScale) {
+        value = new CoreUtils(w).getLogValAtSeriesIndex(value, i);
+      }
+      goals.push({
+        [type]: type === "x" ? this.getXForValue(value, zeroW, false) : this.getYForValue(value, zeroH, translationsIndex, false),
+        attrs
+      });
+    };
+    if (w.seriesData.seriesGoals[i] && w.seriesData.seriesGoals[i][j] && Array.isArray(w.seriesData.seriesGoals[i][j])) {
+      w.seriesData.seriesGoals[i][j].forEach((goal) => {
+        pushGoal(goal.value, goal);
+      });
+    }
+    if (this.barCtx.barOptions.isDumbbell) {
+      const ends = this.getDumbbellEnds(i, j);
+      if (ends.length) {
+        const commonAttrs = {
+          strokeHeight: type === "x" ? 0 : w.globals.markers.size[i],
+          strokeWidth: type === "x" ? w.globals.markers.size[i] : 0,
+          strokeDashArray: 0,
+          strokeLineCap: "round"
+        };
+        let lo = 0;
+        let hi = 0;
+        for (let e = 1; e < ends.length; e++) {
+          if (ends[e].value < ends[lo].value) lo = e;
+          if (ends[e].value > ends[hi].value) hi = e;
+        }
+        const labelsCnf = w.config.plotOptions.bar.dumbbell.dataLabels;
+        ends.forEach((end, e) => {
+          const attrs = __spreadProps(__spreadValues({}, commonAttrs), { strokeColor: end.color });
+          if (labelsCnf.enabled && (e === lo || e === hi)) {
+            attrs.label = {
+              text: this.getDumbbellLabelText(end.value, i, j, end.index),
+              color: labelsCnf.colorFromMarker ? end.color : Array.isArray(labelsCnf.style.colors) ? labelsCnf.style.colors[end.index] || labelsCnf.style.colors[0] : labelsCnf.style.colors,
+              // Away from the connector: the low end reads to its left (below,
+              // on a column), the high end to its right. A lone endpoint has no
+              // connector to be clear of, so it takes the outward side.
+              outward: e === lo && lo !== hi ? -1 : 1
+            };
+          }
+          pushGoal(end.value, attrs);
+        });
+      }
+    }
+    return goals;
+  }
+  /**
+   * The marked ends of one dumbbell row: a value and the colour that says which
+   * measure it belongs to.
+   *
+   * `chart.type: 'dumbbell'` merged N measures into one interval and left the
+   * endpoint identities on `w.dumbbellData`, so an end is coloured after the
+   * SERIES it came from. A row where the two measures cross therefore keeps its
+   * colours, which the interval alone could not say: it is emitted low-to-high
+   * and has forgotten which end was which.
+   *
+   * The `y: [lo, hi]` form names no measures, so it keeps the positional
+   * `dumbbellColors` pathway: colour 0 for the start, colour 1 for the end.
+   *
+   * @param {number} i @param {number} j
+   * @returns {Array<{ value: number, color: string, index: number }>}
+   */
+  getDumbbellEnds(i, j) {
+    const w = this.w;
+    const ends = [];
+    const dumbbell = w.dumbbellData;
+    if (dumbbell && dumbbell.form === "series") {
+      const values = dumbbell.values[j] || [];
+      for (let k2 = 0; k2 < values.length; k2++) {
+        const v = values[k2];
+        if (v === null || dumbbell.hidden.indexOf(k2) !== -1) continue;
+        ends.push({ value: v, color: w.globals.colors[k2], index: k2 });
+      }
+      return ends;
+    }
+    if (!w.rangeData.seriesRange.length) return ends;
+    const colors = this.barCtx.barOptions.dumbbellColors ? this.barCtx.barOptions.dumbbellColors : w.globals.colors;
+    const pick = (n) => Array.isArray(colors[i]) ? colors[i][n] : colors[i];
+    return [
+      { value: w.rangeData.seriesRangeStart[i][j], color: pick(0), index: 0 },
+      { value: w.rangeData.seriesRangeEnd[i][j], color: pick(1), index: 1 }
+    ];
+  }
+  /**
+   * The text for one end label.
    *
-   * Each segment is a horizontal slice of a triangle whose apex sits at the
-   * top of the plot area (width = 0) and whose base spans `gridWidth` at the
-   * bottom. The vertical extent of each slice is its share of the total
-   * series value, so areas track value contribution and segments share
-   * edges (no gaps). The first data point is the apex, the last is the base.
+   * Deliberately NOT `dataLabels.formatter`: on a range bar that one reads out
+   * `end - start`, so an endpoint run through it would print the gap twice and
+   * the values never. The value-axis formatter is the one that already knows
+   * these numbers are percentages, or dollars, or dates.
    *
-   * @param {any[]} seriesData - 1D array of values for a single series row
-   * @returns {{ y: number, height: number, topHalf: number, bottomHalf: number }[]}
+   * @param {number} value @param {number} i @param {number} j @param {number} k
+   * @returns {string}
    */
-  computePyramidLayout(seriesData) {
+  getDumbbellLabelText(value, i, j, k2) {
     const w = this.w;
-    const gridHeight = w.layout.gridHeight;
-    const gridWidth = w.layout.gridWidth;
-    const values = seriesData.map(
-      /** @param {any} v */
-      (v) => Math.abs(Number(v) || 0)
-    );
-    const total = values.reduce(
-      /** @param {number} a @param {number} b */
-      (a, b) => a + b,
-      0
-    );
-    if (total === 0 || gridHeight <= 0) {
-      return values.map(() => ({ y: 0, height: 0, topHalf: 0, bottomHalf: 0 }));
-    }
-    const halfWidth = gridWidth / 2;
-    let cumulative = 0;
-    const layout = [];
-    for (let j = 0; j < values.length; j++) {
-      const topRatio = cumulative / total;
-      cumulative += values[j];
-      const bottomRatio = cumulative / total;
-      const topY = topRatio * gridHeight;
-      const bottomY = bottomRatio * gridHeight;
-      layout.push({
-        y: topY,
-        height: bottomY - topY,
-        topHalf: topRatio * halfWidth,
-        bottomHalf: bottomRatio * halfWidth
+    const cnf = w.config.plotOptions.bar.dumbbell.dataLabels;
+    if (typeof cnf.formatter === "function") {
+      return cnf.formatter(value, {
+        seriesIndex: i,
+        dataPointIndex: j,
+        endpointIndex: k2,
+        w
       });
     }
-    return layout;
+    const axisFormatter = this.barCtx.isHorizontal ? w.formatters.xLabelFormatter : w.formatters.yLabelFormatters[0];
+    if (typeof axisFormatter === "function") {
+      return axisFormatter(value, j, w);
+    }
+    return String(value);
   }
-  /**
-   * Build a single pyramid stage path. Geometry is precomputed by
-   * `computePyramidLayout`; this method only renders that geometry into an
-   * SVG path string plus a `pathFrom` for entry/morph animations.
-   *
-   * @param {{ barYPosition: number, barHeight: number, topHalf: number, bottomHalf: number, realIndex: number, j: number, strokeWidth: number, w: any }} opts
-   */
-  getPyramidPaths({
+  /** @param {{barXPosition: any, barYPosition: any, goalX: any, goalY: any, barWidth: any, barHeight: any}} opts */
+  drawGoalLine({
+    barXPosition,
     barYPosition,
-    barHeight,
-    topHalf,
-    bottomHalf,
-    realIndex,
-    j,
-    strokeWidth,
-    w
+    goalX,
+    goalY,
+    barWidth,
+    barHeight
   }) {
-    var _a, _b;
+    const hasGoals = Array.isArray(goalX) && goalX.length > 0 || Array.isArray(goalY) && goalY.length > 0;
+    if (!hasGoals) {
+      return null;
+    }
     const graphics = new Graphics(this.barCtx.w);
-    const center = w.layout.gridWidth / 2;
-    const strokeCenter = strokeWidth / 2;
-    const y1 = barYPosition + strokeCenter;
-    const y2 = barYPosition + barHeight - strokeCenter;
-    const topLeftX = center - topHalf;
-    const topRightX = center + topHalf;
-    const bottomLeftX = center - bottomHalf;
-    const bottomRightX = center + bottomHalf;
-    const pathTo = graphics.move(topLeftX, y1) + graphics.line(topRightX, y1) + graphics.line(bottomRightX, y2) + graphics.line(bottomLeftX, y2) + " Z";
-    let pathFrom = null;
-    const morphFrom = (_b = (_a = this.barCtx.ctx) == null ? void 0 : _a.morphTypeChange) == null ? void 0 : _b.getInitialPathFor(
-      realIndex,
-      j
+    const lineGroup = graphics.group({
+      class: "apexcharts-bar-goals-groups"
+    });
+    lineGroup.node.classList.add("apexcharts-element-hidden");
+    this.barCtx.w.globals.delayedElements.push({
+      el: lineGroup.node
+    });
+    lineGroup.attr(
+      "clip-path",
+      `url(#gridRectMarkerMask${this.barCtx.w.globals.cuid})`
     );
-    if (morphFrom) {
-      pathFrom = morphFrom;
-    } else if (w.globals.previousPaths.length > 0) {
-      pathFrom = this.barCtx.getPreviousPath(realIndex, j, pathTo);
-    }
-    if (pathFrom == null) {
-      pathFrom = graphics.move(center, y1) + graphics.line(center, y1) + graphics.line(center, y2) + graphics.line(center, y2) + " Z";
+    let line = null;
+    if (this.barCtx.isHorizontal) {
+      if (Array.isArray(goalX)) {
+        goalX.forEach((goal) => {
+          if (goal.x >= -1 && goal.x <= graphics.w.layout.gridWidth + 1) {
+            const sHeight = typeof goal.attrs.strokeHeight !== "undefined" ? goal.attrs.strokeHeight : barHeight / 2;
+            const y = barYPosition + sHeight + barHeight / 2;
+            line = graphics.drawLine(
+              goal.x,
+              y - sHeight * 2,
+              goal.x,
+              y,
+              goal.attrs.strokeColor ? goal.attrs.strokeColor : void 0,
+              goal.attrs.strokeDashArray,
+              goal.attrs.strokeWidth ? goal.attrs.strokeWidth : 2,
+              goal.attrs.strokeLineCap
+            );
+            lineGroup.add(line);
+            if (goal.attrs.label) {
+              lineGroup.add(
+                this.drawDumbbellLabel(goal.attrs, {
+                  x: goal.x,
+                  y: y - sHeight,
+                  horizontal: true,
+                  markerSize: goal.attrs.strokeWidth || 0
+                })
+              );
+            }
+          }
+        });
+      }
+    } else {
+      if (Array.isArray(goalY)) {
+        goalY.forEach((goal) => {
+          if (goal.y >= -1 && goal.y <= graphics.w.layout.gridHeight + 1) {
+            const sWidth = typeof goal.attrs.strokeWidth !== "undefined" ? goal.attrs.strokeWidth : barWidth / 2;
+            const x2 = barXPosition + sWidth + barWidth / 2;
+            line = graphics.drawLine(
+              x2 - sWidth * 2,
+              goal.y,
+              x2,
+              goal.y,
+              goal.attrs.strokeColor ? goal.attrs.strokeColor : void 0,
+              goal.attrs.strokeDashArray,
+              goal.attrs.strokeHeight ? goal.attrs.strokeHeight : 2,
+              goal.attrs.strokeLineCap
+            );
+            lineGroup.add(line);
+            if (goal.attrs.label) {
+              lineGroup.add(
+                this.drawDumbbellLabel(goal.attrs, {
+                  x: x2 - sWidth,
+                  y: goal.y,
+                  horizontal: false,
+                  markerSize: goal.attrs.strokeHeight || 0
+                })
+              );
+            }
+          }
+        });
+      }
     }
-    return {
-      pathTo,
-      pathFrom,
-      x: topRightX,
-      x1: topLeftX,
-      barXPosition: center
-    };
+    return lineGroup;
   }
-  /** @param {{ barYPosition?: any, barHeight?: any, x1?: any, x2?: any, strokeWidth?: any, isReversed?: any, series?: any, realIndex?: any, i?: any, j?: any, w?: any }} opts */
-  getBarpaths({
-    barYPosition,
-    barHeight,
-    x1,
-    x2,
-    strokeWidth,
-    series,
-    realIndex,
-    i,
-    j,
-    w
-  }) {
-    var _a, _b;
+  /**
+   * One dumbbell end label, placed clear of the marker it belongs to.
+   *
+   * Offset from the marker's EDGE rather than its centre, so growing
+   * `markers.size` never walks a label under its own dot. Vertically it is
+   * centred on the marker with `dominant-baseline`, which is exact whatever the
+   * font metrics are, where a dy fudge factor drifts with font size.
+   *
+   * @param {Record<string, any>} attrs the goal's attrs, carrying `label`
+   * @param {{x: number, y: number, horizontal: boolean, markerSize: number}} pos
+   */
+  drawDumbbellLabel(attrs, pos) {
+    const w = this.w;
+    const graphics = new Graphics(w);
+    const cnf = w.config.plotOptions.bar.dumbbell.dataLabels;
+    const gap = pos.markerSize / 2 + cnf.offset;
+    const away = attrs.label.outward;
+    return graphics.drawText({
+      x: pos.x + (pos.horizontal ? gap * away : 0),
+      y: pos.y - (pos.horizontal ? 0 : gap * away),
+      text: attrs.label.text,
+      textAnchor: pos.horizontal ? away < 0 ? "end" : "start" : "middle",
+      dominantBaseline: pos.horizontal ? "central" : away < 0 ? "hanging" : "auto",
+      foreColor: attrs.label.color,
+      fontSize: cnf.style.fontSize,
+      fontFamily: cnf.style.fontFamily,
+      fontWeight: cnf.style.fontWeight,
+      cssClass: "apexcharts-dumbbell-label"
+    });
+  }
+  /** @param {{prevPaths: any, currPaths: any, color: any, realIndex: any, j: any}} opts */
+  drawBarShadow({ prevPaths, currPaths, color, realIndex, j }) {
+    const w = this.w;
+    const { x: prevX2, x1: prevX1, barYPosition: prevY1 } = prevPaths;
+    const { x: currX2, x1: currX1, barYPosition: currY1 } = currPaths;
+    const prevY2 = prevY1 + currPaths.barHeight;
     const graphics = new Graphics(this.barCtx.w);
-    const r = this.barRect({
-      a: barYPosition,
-      len: barHeight,
-      v1: x1,
-      v2: x2,
-      strokeWidth,
-      realIndex,
-      j,
-      dir: series[i][j] >= 0 ? 1 : -1,
-      horizontal: true
+    const utils = new Utils();
+    const shadowPath = graphics.move(prevX1, prevY2) + graphics.line(prevX2, prevY2) + graphics.line(currX2, currY1) + graphics.line(currX1, currY1) + graphics.line(prevX1, prevY2) + (w.config.plotOptions.bar.borderRadiusApplication === "around" || this.arrBorderRadius[realIndex][j] === "both" ? " Z" : " z");
+    return graphics.drawPath({
+      d: shadowPath,
+      fill: utils.shadeColor(0.5, Utils.rgb2hex(color)),
+      stroke: "none",
+      strokeWidth: 0,
+      fillOpacity: 1,
+      classes: "apexcharts-bar-shadow apexcharts-decoration-element"
+    });
+  }
+  /** @param {{i: any, j: any}} opts */
+  getZeroValueEncounters({ i, j }) {
+    var _a;
+    const w = this.w;
+    let nonZeroColumns = 0;
+    let zeroEncounters = 0;
+    const seriesIndices = w.config.plotOptions.bar.horizontal ? w.seriesData.series.map((_, _i) => _i) : ((_a = w.globals.columnSeries) == null ? void 0 : _a.i.map((_i) => _i)) || [];
+    seriesIndices.forEach((_si) => {
+      const val = w.seriesData.series[_si][j];
+      if (val) {
+        nonZeroColumns++;
+      }
+      if (_si < i && !val) {
+        zeroEncounters++;
+      }
     });
-    const { y1, y2, sl, closing, squarePathTo, pathTo, strokeCenter, direction } = r;
-    x1 = r.x1;
-    x2 = r.x2;
-    const isFunnel = this.barCtx.isFunnel;
-    const fromX = isFunnel ? (x1 + x2) / 2 : x1;
-    let pathFrom = null;
-    const morphFrom = (_b = (_a = this.barCtx.ctx) == null ? void 0 : _a.morphTypeChange) == null ? void 0 : _b.getInitialPathFor(
-      realIndex,
-      j
-    );
-    if (morphFrom) {
-      pathFrom = morphFrom;
-    } else if (w.globals.previousPaths.length > 0) {
-      pathFrom = this.barCtx.getPreviousPath(realIndex, j, pathTo, squarePathTo);
-    }
-    if (pathFrom == null) {
-      const slFrom = isFunnel ? graphics.line(fromX, y2) : sl;
-      pathFrom = graphics.move(fromX, y1) + graphics.line(fromX, y1) + slFrom + slFrom + slFrom + slFrom + slFrom + graphics.line(fromX, y1) + closing;
-    }
-    if (w.config.chart.stacked) {
-      const _ctx = this.barCtx.groupCtx;
-      _ctx.xArrj.push(x2 + strokeCenter * direction);
-      _ctx.xArrjF.push(Math.abs(x1 - x2 - r.strokeWidth * direction));
-      _ctx.xArrjVal.push(this.barCtx.series[i][j]);
-    }
     return {
-      pathTo,
-      pathFrom,
-      // See getColumnPaths. Here `x1` is the start value's edge and `x2` the
-      // end value's, because a horizontal bar's two ends arrive unsorted.
-      drawnBox: { x1, x2, y1, y2 }
+      nonZeroColumns,
+      zeroEncounters
     };
   }
   /**
-   * @param {number} value
-   * @param {number} zeroW
+   * Index of the series group `seriesIndex` belongs to within
+   * `w.labelData.seriesGroups`, or -1 when the chart has no groups.
+   *
+   * Unlike `getGroupIndex` this is a pure lookup: it never appends to
+   * `columnGroupIndices`, so it is safe to call from positioning/label code
+   * that must not perturb the draw order bookkeeping.
+   * @param {number} seriesIndex
+   * @returns {number}
    */
-  getXForValue(value, zeroW, zeroPositionForNull = true) {
-    let xForVal = zeroPositionForNull ? zeroW : null;
-    if (typeof value !== "undefined" && value !== null) {
-      xForVal = zeroW + value / this.barCtx.invertedYRatio - (this.barCtx.isReversed ? value / this.barCtx.invertedYRatio : 0) * 2;
-    }
-    return xForVal;
+  getSeriesGroupIndex(seriesIndex) {
+    var _a;
+    return (_a = this.w.labelData.seriesGroupIndex[seriesIndex]) != null ? _a : -1;
   }
   /**
-   * @param {number} value
-   * @param {number} zeroH
-   * @param {number} translationsIndex
+   * @param {number} seriesIndex
    */
-  getYForValue(value, zeroH, translationsIndex, zeroPositionForNull = true) {
-    let yForVal = zeroPositionForNull ? zeroH : null;
-    if (typeof value !== "undefined" && value !== null) {
-      yForVal = zeroH - value / this.barCtx.yRatio[translationsIndex] + (this.barCtx.isReversed ? value / this.barCtx.yRatio[translationsIndex] : 0) * 2;
+  getGroupIndex(seriesIndex) {
+    const groupIndex = this.getSeriesGroupIndex(seriesIndex);
+    const cGI = this.barCtx.columnGroupIndices;
+    let columnGroupIndex = cGI.indexOf(groupIndex);
+    if (columnGroupIndex < 0) {
+      cGI.push(groupIndex);
+      columnGroupIndex = cGI.length - 1;
     }
-    return yForVal;
+    return { groupIndex, columnGroupIndex };
   }
-  /**
-   * @param {string} type
-   * @param {number} zeroW
-   * @param {number} zeroH
-   * @param {number} i
-   * @param {number} j
-   * @param {number} translationsIndex
-   */
-  getGoalValues(type, zeroW, zeroH, i, j, translationsIndex) {
-    const w = this.w;
-    const goals = [];
-    const pushGoal = (value, attrs) => {
-      goals.push({
-        [type]: type === "x" ? this.getXForValue(value, zeroW, false) : this.getYForValue(value, zeroH, translationsIndex, false),
-        attrs
-      });
-    };
-    if (w.seriesData.seriesGoals[i] && w.seriesData.seriesGoals[i][j] && Array.isArray(w.seriesData.seriesGoals[i][j])) {
-      w.seriesData.seriesGoals[i][j].forEach((goal) => {
-        pushGoal(goal.value, goal);
-      });
-    }
-    if (this.barCtx.barOptions.isDumbbell) {
-      const ends = this.getDumbbellEnds(i, j);
-      if (ends.length) {
-        const commonAttrs = {
-          strokeHeight: type === "x" ? 0 : w.globals.markers.size[i],
-          strokeWidth: type === "x" ? w.globals.markers.size[i] : 0,
-          strokeDashArray: 0,
-          strokeLineCap: "round"
-        };
-        let lo = 0;
-        let hi = 0;
-        for (let e = 1; e < ends.length; e++) {
-          if (ends[e].value < ends[lo].value) lo = e;
-          if (ends[e].value > ends[hi].value) hi = e;
-        }
-        const labelsCnf = w.config.plotOptions.bar.dumbbell.dataLabels;
-        ends.forEach((end, e) => {
-          const attrs = __spreadProps(__spreadValues({}, commonAttrs), { strokeColor: end.color });
-          if (labelsCnf.enabled && (e === lo || e === hi)) {
-            attrs.label = {
-              text: this.getDumbbellLabelText(end.value, i, j, end.index),
-              color: labelsCnf.colorFromMarker ? end.color : Array.isArray(labelsCnf.style.colors) ? labelsCnf.style.colors[end.index] || labelsCnf.style.colors[0] : labelsCnf.style.colors,
-              // Away from the connector: the low end reads to its left (below,
-              // on a column), the high end to its right. A lone endpoint has no
-              // connector to be clear of, so it takes the outward side.
-              outward: e === lo && lo !== hi ? -1 : 1
-            };
-          }
-          pushGoal(end.value, attrs);
-        });
+};
+function buildUnionEntries(join, oldN) {
+  const exitSet = new Set(join.exits);
+  const entries = [];
+  let oi = 0;
+  for (let nj = 0; nj < join.toOld.length; nj++) {
+    const oj = join.toOld[nj];
+    if (oj !== -1) {
+      while (oi < oj) {
+        if (exitSet.has(oi)) entries.push({ oldJ: oi, newJ: -1 });
+        oi++;
       }
+      entries.push({ oldJ: oj, newJ: nj });
+      oi = oj + 1;
+    } else {
+      entries.push({ oldJ: -1, newJ: nj });
     }
-    return goals;
   }
-  /**
-   * The marked ends of one dumbbell row: a value and the colour that says which
-   * measure it belongs to.
-   *
-   * `chart.type: 'dumbbell'` merged N measures into one interval and left the
-   * endpoint identities on `w.dumbbellData`, so an end is coloured after the
-   * SERIES it came from. A row where the two measures cross therefore keeps its
-   * colours, which the interval alone could not say: it is emitted low-to-high
-   * and has forgotten which end was which.
-   *
-   * The `y: [lo, hi]` form names no measures, so it keeps the positional
-   * `dumbbellColors` pathway: colour 0 for the start, colour 1 for the end.
-   *
-   * @param {number} i @param {number} j
-   * @returns {Array<{ value: number, color: string, index: number }>}
-   */
-  getDumbbellEnds(i, j) {
-    const w = this.w;
-    const ends = [];
-    const dumbbell = w.dumbbellData;
-    if (dumbbell && dumbbell.form === "series") {
-      const values = dumbbell.values[j] || [];
-      for (let k2 = 0; k2 < values.length; k2++) {
-        const v = values[k2];
-        if (v === null || dumbbell.hidden.indexOf(k2) !== -1) continue;
-        ends.push({ value: v, color: w.globals.colors[k2], index: k2 });
+  while (oi < oldN) {
+    if (exitSet.has(oi)) entries.push({ oldJ: oi, newJ: -1 });
+    oi++;
+  }
+  return entries;
+}
+function analyzeSeriesPath(d, expectedAnchors, isArea) {
+  if (!d || typeof d !== "string") return null;
+  const cmds = parsePath(d);
+  if (!cmds.length || cmds[0][0] !== "M") return null;
+  for (let i = 1; i < cmds.length; i++) {
+    if (cmds[i][0] === "M") return null;
+  }
+  let body = cmds;
+  let closing = null;
+  if (isArea) {
+    if (cmds.length < 5) return null;
+    closing = cmds.slice(-3);
+    body = cmds.slice(0, -3);
+    if (closing[2][0] !== "Z") return null;
+    if (closing[1][0] !== "L") return null;
+    if (closing[0][0] !== "L" && closing[0][0] !== "C") return null;
+  } else if (cmds[cmds.length - 1][0] === "Z") {
+    return null;
+  }
+  if (body.length !== expectedAnchors || body.length < 2) return null;
+  const segType = body[1][0];
+  if (segType !== "L" && segType !== "C") return null;
+  for (let i = 2; i < body.length; i++) {
+    if (body[i][0] !== segType) return null;
+  }
+  const anchors = body.map(
+    (c) => c[0] === "C" ? [Number(c[5]), Number(c[6])] : [Number(c[1]), Number(c[2])]
+  );
+  for (const a of anchors) {
+    if (!isFinite(a[0]) || !isFinite(a[1])) return null;
+  }
+  return { body, closing, segType, anchors };
+}
+function lerpPt(a, b, t) {
+  return [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t];
+}
+function splitCubic(s, cmd, t) {
+  const p0 = s;
+  const p1 = [cmd[1], cmd[2]];
+  const p2 = [cmd[3], cmd[4]];
+  const p3 = [cmd[5], cmd[6]];
+  const p01 = lerpPt(p0, p1, t);
+  const p12 = lerpPt(p1, p2, t);
+  const p23 = lerpPt(p2, p3, t);
+  const p012 = lerpPt(p01, p12, t);
+  const p123 = lerpPt(p12, p23, t);
+  const mid = lerpPt(p012, p123, t);
+  return {
+    first: ["C", p01[0], p01[1], p012[0], p012[1], mid[0], mid[1]],
+    second: ["C", p123[0], p123[1], p23[0], p23[1], p3[0], p3[1]],
+    mid
+  };
+}
+function splitLine(s, cmd, t) {
+  const e = [cmd[1], cmd[2]];
+  const mid = lerpPt(s, e, t);
+  return {
+    first: ["L", mid[0], mid[1]],
+    second: ["L", e[0], e[1]],
+    mid
+  };
+}
+function expandPath(analysis, ownIdx) {
+  const { body, closing, segType, anchors } = analysis;
+  const n = anchors.length;
+  const m = ownIdx.length;
+  const degen = (p) => segType === "C" ? ["C", p[0], p[1], p[0], p[1], p[0], p[1]] : ["L", p[0], p[1]];
+  const out = [["M", anchors[0][0], anchors[0][1]]];
+  let firstOwn = 0;
+  while (firstOwn < m && ownIdx[firstOwn] !== 0) firstOwn++;
+  for (let q = 1; q <= firstOwn; q++) out.push(degen(anchors[0]));
+  let entry = firstOwn + 1;
+  for (let s = 0; s < n - 1; s++) {
+    let interior = 0;
+    while (entry + interior < m && ownIdx[entry + interior] === -1) interior++;
+    const cmd = body[s + 1];
+    if (!interior) {
+      out.push(cmd.slice());
+    } else {
+      const totalParts = interior + 1;
+      let start = anchors[s];
+      let rest = cmd;
+      for (let q = 0; q < interior; q++) {
+        const t = 1 / (totalParts - q);
+        const sp = segType === "C" ? splitCubic(start, rest, t) : splitLine(start, rest, t);
+        out.push(sp.first);
+        start = sp.mid;
+        rest = sp.second;
       }
-      return ends;
+      out.push(rest);
     }
-    if (!w.rangeData.seriesRange.length) return ends;
-    const colors = this.barCtx.barOptions.dumbbellColors ? this.barCtx.barOptions.dumbbellColors : w.globals.colors;
-    const pick = (n) => Array.isArray(colors[i]) ? colors[i][n] : colors[i];
-    return [
-      { value: w.rangeData.seriesRangeStart[i][j], color: pick(0), index: 0 },
-      { value: w.rangeData.seriesRangeEnd[i][j], color: pick(1), index: 1 }
-    ];
+    entry += interior + 1;
   }
-  /**
-   * The text for one end label.
-   *
-   * Deliberately NOT `dataLabels.formatter`: on a range bar that one reads out
-   * `end - start`, so an endpoint run through it would print the gap twice and
-   * the values never. The value-axis formatter is the one that already knows
-   * these numbers are percentages, or dollars, or dates.
-   *
-   * @param {number} value @param {number} i @param {number} j @param {number} k
-   * @returns {string}
-   */
-  getDumbbellLabelText(value, i, j, k2) {
-    const w = this.w;
-    const cnf = w.config.plotOptions.bar.dumbbell.dataLabels;
-    if (typeof cnf.formatter === "function") {
-      return cnf.formatter(value, {
-        seriesIndex: i,
-        dataPointIndex: j,
-        endpointIndex: k2,
-        w
-      });
-    }
-    const axisFormatter = this.barCtx.isHorizontal ? w.formatters.xLabelFormatter : w.formatters.yLabelFormatters[0];
-    if (typeof axisFormatter === "function") {
-      return axisFormatter(value, j, w);
+  while (entry < m) {
+    out.push(degen(anchors[n - 1]));
+    entry++;
+  }
+  if (closing) closing.forEach((c) => out.push(c.slice()));
+  return out;
+}
+function reconcilePathPair(fromD, toD, entries, oldN, newN, isArea) {
+  const fromAnalysis = analyzeSeriesPath(fromD, oldN, isArea);
+  if (!fromAnalysis) return null;
+  const toAnalysis = analyzeSeriesPath(toD, newN, isArea);
+  if (!toAnalysis) return null;
+  if (fromAnalysis.segType !== toAnalysis.segType) return null;
+  if ((fromAnalysis.closing || toAnalysis.closing) && (!fromAnalysis.closing || !toAnalysis.closing || fromAnalysis.closing[0][0] !== toAnalysis.closing[0][0])) {
+    return null;
+  }
+  const fromOwn = entries.map((e) => e.oldJ);
+  const toOwn = entries.map((e) => e.newJ);
+  return {
+    from: arrayToPath(expandPath(fromAnalysis, fromOwn)),
+    toInterp: arrayToPath(expandPath(toAnalysis, toOwn))
+  };
+}
+function lengthTransitionEnabled(w) {
+  var _a;
+  const anim = w.config.chart.animations;
+  if (!anim || anim.enabled === false) return false;
+  if (!anim.dynamicAnimation || anim.dynamicAnimation.enabled === false) {
+    return false;
+  }
+  const largeThreshold = (_a = anim.largeDatasetThreshold) != null ? _a : 0;
+  if (largeThreshold > 0 && w.globals.dataPoints > largeThreshold) return false;
+  return !!(Environment.isBrowser() && w.globals.dataChanged && w.globals.shouldAnimate);
+}
+function datumKey(w, realIndex, j) {
+  var _a, _b, _c, _d;
+  if ((_a = w.axisFlags) == null ? void 0 : _a.isXNumeric) {
+    const sx = (_c = (_b = w.seriesData) == null ? void 0 : _b.seriesX) == null ? void 0 : _c[realIndex];
+    if (sx && sx.length && sx[j] != null) return "x:" + sx[j];
+  }
+  const lbl = (_d = w.globals.labels) == null ? void 0 : _d[j];
+  if (lbl != null && String(lbl) !== "") {
+    return "c:" + (Array.isArray(lbl) ? lbl.join(" ") : String(lbl));
+  }
+  return "j:" + j;
+}
+function frameDatumKey(frame, realIndex, j) {
+  var _a, _b;
+  if (frame.isXNumeric) {
+    const sx = (_a = frame.seriesX) == null ? void 0 : _a[realIndex];
+    if (sx && sx.length && sx[j] != null) return "x:" + sx[j];
+  }
+  const lbl = (_b = frame.labels) == null ? void 0 : _b[j];
+  if (lbl != null && String(lbl) !== "") {
+    return "c:" + (Array.isArray(lbl) ? lbl.join(" ") : String(lbl));
+  }
+  return "j:" + j;
+}
+function joinKeys(oldKeys, newKeys) {
+  const oldIndex = /* @__PURE__ */ new Map();
+  oldKeys.forEach((k2, i) => {
+    if (!oldIndex.has(k2)) oldIndex.set(k2, i);
+  });
+  const toOld = new Array(newKeys.length);
+  const usedOld = /* @__PURE__ */ new Set();
+  let prev = -1;
+  let ordered = true;
+  let identity = oldKeys.length === newKeys.length;
+  newKeys.forEach((k2, i) => {
+    const oi = oldIndex.has(k2) && !usedOld.has(oldIndex.get(k2)) ? oldIndex.get(k2) : -1;
+    toOld[i] = oi;
+    if (oi !== -1) {
+      usedOld.add(oi);
+      if (oi < prev) ordered = false;
+      prev = oi;
     }
-    return String(value);
+    if (oi !== i) identity = false;
+  });
+  const exits = [];
+  for (let i = 0; i < oldKeys.length; i++) {
+    if (!usedOld.has(i)) exits.push(i);
   }
-  /** @param {{barXPosition: any, barYPosition: any, goalX: any, goalY: any, barWidth: any, barHeight: any}} opts */
-  drawGoalLine({
-    barXPosition,
-    barYPosition,
-    goalX,
-    goalY,
-    barWidth,
-    barHeight
-  }) {
-    const hasGoals = Array.isArray(goalX) && goalX.length > 0 || Array.isArray(goalY) && goalY.length > 0;
-    if (!hasGoals) {
-      return null;
+  return { toOld, exits, ordered, changed: !identity };
+}
+function uniquifyKeys(keys) {
+  const seen = /* @__PURE__ */ new Map();
+  return keys.map((k2) => {
+    const count = seen.get(k2) || 0;
+    seen.set(k2, count + 1);
+    return count === 0 ? k2 : `${k2}#${count}`;
+  });
+}
+function seriesKeys(w, realIndex, n = ((_a) => (_a = w.seriesData.series[realIndex]) == null ? void 0 : _a.length)() | 0) {
+  return uniquifyKeys(
+    Array.from({ length: n }, (_, j) => datumKey(w, realIndex, j))
+  );
+}
+function seriesJoin(w, realIndex, includeIdentity = false, allowReorder = false) {
+  var _a, _b;
+  if (!lengthTransitionEnabled(w)) return null;
+  const frame = w.globals.prevStreamFrame;
+  if (!frame) return null;
+  const oldY = (_a = frame.seriesY) == null ? void 0 : _a[realIndex];
+  const newY = (_b = w.seriesData.series) == null ? void 0 : _b[realIndex];
+  if (!Array.isArray(oldY) || !Array.isArray(newY)) return null;
+  if (!oldY.length || !newY.length) return null;
+  const oldKeys = uniquifyKeys(
+    oldY.map((_, j) => frameDatumKey(frame, realIndex, j))
+  );
+  const newKeys = seriesKeys(w, realIndex);
+  const join = joinKeys(oldKeys, newKeys);
+  if (!join.ordered && !allowReorder) return null;
+  if (!join.changed && !includeIdentity) return null;
+  return { join, oldKeys, newKeys };
+}
+function morphEasing(w) {
+  var _a, _b;
+  const anim = w.config.chart.animations;
+  return resolveEasing((_b = (_a = anim.dynamicAnimation) == null ? void 0 : _a.easing) != null ? _b : anim.easing);
+}
+function rafTween(w, duration, ease, onFrame, onDone) {
+  const startAt = performance.now();
+  const step = (now) => {
+    if (w.globals.isDestroyed) return;
+    const raw = Math.max(0, Math.min(1, (now - startAt) / duration));
+    onFrame(ease(raw), raw);
+    if (raw < 1) {
+      BrowserAPIs.requestAnimationFrame(step);
+    } else if (onDone) {
+      onDone();
     }
-    const graphics = new Graphics(this.barCtx.w);
-    const lineGroup = graphics.group({
-      class: "apexcharts-bar-goals-groups"
-    });
-    lineGroup.node.classList.add("apexcharts-element-hidden");
-    this.barCtx.w.globals.delayedElements.push({
-      el: lineGroup.node
+  };
+  BrowserAPIs.requestAnimationFrame(step);
+}
+function tweenSeriesMarkers(w, { elPointsMain, realIndex, speed }) {
+  var _a, _b, _c, _d;
+  if (!(elPointsMain == null ? void 0 : elPointsMain.node)) return false;
+  const sj = seriesJoin(w, realIndex, true);
+  if (!sj) return false;
+  const frame = w.globals.prevStreamFrame;
+  if (!frame) return false;
+  const oldXP = (_a = frame.xPixels) == null ? void 0 : _a[realIndex];
+  const oldYP = (_b = frame.yPixels) == null ? void 0 : _b[realIndex];
+  if (!oldXP || !oldYP) return false;
+  const markers = elPointsMain.node.querySelectorAll(".apexcharts-marker");
+  if (!markers.length) return false;
+  const newXP = ((_c = w.globals.seriesXvalues) == null ? void 0 : _c[realIndex]) || [];
+  const newYP = ((_d = w.globals.seriesYvalues) == null ? void 0 : _d[realIndex]) || [];
+  const ease = morphEasing(w);
+  const duration = Math.max(1, speed || 1);
+  elPointsMain.node.classList.remove("apexcharts-element-hidden");
+  markers.forEach((node) => {
+    var _a2, _b2, _c2, _d2, _e, _f, _g, _h, _i;
+    const j = parseInt(
+      (_b2 = (_a2 = node.getAttribute("j")) != null ? _a2 : node.getAttribute("rel")) != null ? _b2 : "",
+      10
+    );
+    if (!isFinite(j) || j < 0 || j >= sj.join.toOld.length) return;
+    const oldJ = sj.join.toOld[j];
+    const to = newXP[j] != null && newYP[j] != null ? [newXP[j], newYP[j]] : null;
+    if (oldJ === -1 || !to) {
+      const style = (
+        /** @type {any} */
+        node.style
+      );
+      style.opacity = "0";
+      rafTween(
+        w,
+        duration,
+        ease,
+        (eased) => {
+          style.opacity = String(eased);
+        },
+        () => {
+          style.opacity = "";
+        }
+      );
+      return;
+    }
+    const dx = ((_c2 = oldXP[oldJ]) != null ? _c2 : NaN) - to[0];
+    const dy = ((_d2 = oldYP[oldJ]) != null ? _d2 : NaN) - to[1];
+    if (!isFinite(dx) || !isFinite(dy)) return;
+    const rFrom = (_g = (_f = (_e = frame.rPixels) == null ? void 0 : _e[realIndex]) == null ? void 0 : _f[oldJ]) != null ? _g : NaN;
+    const rTo = parseFloat(
+      (_i = (_h = node.getAttribute("r")) != null ? _h : node.getAttribute("default-marker-size")) != null ? _i : ""
+    );
+    const scales = isFinite(rFrom) && isFinite(rTo) && rTo > 0 && Math.abs(rFrom - rTo) > 0.25;
+    const moves = Math.abs(dx) >= 0.5 || Math.abs(dy) >= 0.5;
+    if (!moves && !scales) return;
+    const apply = (eased) => {
+      const offX = dx * (1 - eased);
+      const offY = dy * (1 - eased);
+      if (scales) {
+        const s = (rFrom + (rTo - rFrom) * eased) / rTo;
+        node.setAttribute(
+          "transform",
+          `translate(${offX + to[0] * (1 - s)}, ${offY + to[1] * (1 - s)}) scale(${s})`
+        );
+      } else {
+        node.setAttribute("transform", `translate(${offX}, ${offY})`);
+      }
+    };
+    apply(0);
+    rafTween(w, duration, ease, apply, () => {
+      node.removeAttribute("transform");
     });
-    lineGroup.attr(
-      "clip-path",
-      `url(#gridRectMarkerMask${this.barCtx.w.globals.cuid})`
+  });
+  return true;
+}
+function scaleAbout(node, cx, cy, s) {
+  node.setAttribute("transform", `translate(${cx * (1 - s)}, ${cy * (1 - s)}) scale(${s})`);
+}
+function growRisingMarkers(w, { elPointsMain, realIndex, speed }) {
+  if (!(elPointsMain == null ? void 0 : elPointsMain.node) || !lengthTransitionEnabled(w)) return false;
+  if ((w.globals.risingSeries || []).indexOf(realIndex) === -1) return false;
+  const markers = elPointsMain.node.querySelectorAll(".apexcharts-marker");
+  if (!markers.length) return false;
+  const ease = morphEasing(w);
+  elPointsMain.node.classList.remove("apexcharts-element-hidden");
+  markers.forEach((node) => {
+    const b = node.getBBox();
+    const cx = b.x + b.width / 2;
+    const cy = b.y + b.height / 2;
+    scaleAbout(node, cx, cy, 0);
+    rafTween(
+      w,
+      Math.max(1, speed || 1),
+      ease,
+      (eased) => scaleAbout(node, cx, cy, eased),
+      () => node.removeAttribute("transform")
     );
-    let line = null;
-    if (this.barCtx.isHorizontal) {
-      if (Array.isArray(goalX)) {
-        goalX.forEach((goal) => {
-          if (goal.x >= -1 && goal.x <= graphics.w.layout.gridWidth + 1) {
-            const sHeight = typeof goal.attrs.strokeHeight !== "undefined" ? goal.attrs.strokeHeight : barHeight / 2;
-            const y = barYPosition + sHeight + barHeight / 2;
-            line = graphics.drawLine(
-              goal.x,
-              y - sHeight * 2,
-              goal.x,
-              y,
-              goal.attrs.strokeColor ? goal.attrs.strokeColor : void 0,
-              goal.attrs.strokeDashArray,
-              goal.attrs.strokeWidth ? goal.attrs.strokeWidth : 2,
-              goal.attrs.strokeLineCap
-            );
-            lineGroup.add(line);
-            if (goal.attrs.label) {
-              lineGroup.add(
-                this.drawDumbbellLabel(goal.attrs, {
-                  x: goal.x,
-                  y: y - sHeight,
-                  horizontal: true,
-                  markerSize: goal.attrs.strokeWidth || 0
-                })
-              );
-            }
-          }
-        });
-      }
-    } else {
-      if (Array.isArray(goalY)) {
-        goalY.forEach((goal) => {
-          if (goal.y >= -1 && goal.y <= graphics.w.layout.gridHeight + 1) {
-            const sWidth = typeof goal.attrs.strokeWidth !== "undefined" ? goal.attrs.strokeWidth : barWidth / 2;
-            const x2 = barXPosition + sWidth + barWidth / 2;
-            line = graphics.drawLine(
-              x2 - sWidth * 2,
-              goal.y,
-              x2,
-              goal.y,
-              goal.attrs.strokeColor ? goal.attrs.strokeColor : void 0,
-              goal.attrs.strokeDashArray,
-              goal.attrs.strokeHeight ? goal.attrs.strokeHeight : 2,
-              goal.attrs.strokeLineCap
-            );
-            lineGroup.add(line);
-            if (goal.attrs.label) {
-              lineGroup.add(
-                this.drawDumbbellLabel(goal.attrs, {
-                  x: x2 - sWidth,
-                  y: goal.y,
-                  horizontal: false,
-                  markerSize: goal.attrs.strokeHeight || 0
-                })
-              );
-            }
-          }
-        });
+  });
+  return true;
+}
+function shrinkCollapsingMarkers(w, { elPointsMain, realIndex, speed, drawPoint }) {
+  var _a, _b, _c;
+  if (!(elPointsMain == null ? void 0 : elPointsMain.node) || !lengthTransitionEnabled(w)) return false;
+  if ((w.globals.collapsingSeriesIndices || []).indexOf(realIndex) === -1) return false;
+  const frame = w.globals.prevStreamFrame;
+  const xs = (_a = frame == null ? void 0 : frame.xPixels) == null ? void 0 : _a[realIndex];
+  const ys = (_b = frame == null ? void 0 : frame.yPixels) == null ? void 0 : _b[realIndex];
+  if (!Array.isArray(xs) || !Array.isArray(ys)) return false;
+  const rs = ((_c = frame == null ? void 0 : frame.rPixels) == null ? void 0 : _c[realIndex]) || [];
+  const fallbackR = w.globals.markers.size[realIndex] || 0;
+  const ease = morphEasing(w);
+  let drawn = false;
+  for (let j = 0; j < xs.length; j++) {
+    const x2 = xs[j];
+    const y = ys[j];
+    if (x2 == null || y == null || !isFinite(x2) || !isFinite(y)) continue;
+    const r = isFinite(rs[j]) ? rs[j] : fallbackR;
+    if (!(r > 0)) continue;
+    const el = drawPoint(x2, y, r, j);
+    if (!(el == null ? void 0 : el.node)) continue;
+    elPointsMain.add(el);
+    const node = el.node;
+    node.classList.add("apexcharts-marker-exit");
+    const landed = Animations.trackSeriesTween(w, realIndex);
+    rafTween(
+      w,
+      Math.max(1, speed || 1),
+      ease,
+      (eased) => scaleAbout(node, x2, y, 1 - eased),
+      () => {
+        scaleAbout(node, x2, y, 0);
+        landed();
       }
-    }
-    return lineGroup;
+    );
+    drawn = true;
   }
-  /**
-   * One dumbbell end label, placed clear of the marker it belongs to.
-   *
-   * Offset from the marker's EDGE rather than its centre, so growing
-   * `markers.size` never walks a label under its own dot. Vertically it is
-   * centred on the marker with `dominant-baseline`, which is exact whatever the
-   * font metrics are, where a dy fudge factor drifts with font size.
-   *
-   * @param {Record<string, any>} attrs the goal's attrs, carrying `label`
-   * @param {{x: number, y: number, horizontal: boolean, markerSize: number}} pos
-   */
-  drawDumbbellLabel(attrs, pos) {
-    const w = this.w;
-    const graphics = new Graphics(w);
-    const cnf = w.config.plotOptions.bar.dumbbell.dataLabels;
-    const gap = pos.markerSize / 2 + cnf.offset;
-    const away = attrs.label.outward;
-    return graphics.drawText({
-      x: pos.x + (pos.horizontal ? gap * away : 0),
-      y: pos.y - (pos.horizontal ? 0 : gap * away),
-      text: attrs.label.text,
-      textAnchor: pos.horizontal ? away < 0 ? "end" : "start" : "middle",
-      dominantBaseline: pos.horizontal ? "central" : away < 0 ? "hanging" : "auto",
-      foreColor: attrs.label.color,
-      fontSize: cnf.style.fontSize,
-      fontFamily: cnf.style.fontFamily,
-      fontWeight: cnf.style.fontWeight,
-      cssClass: "apexcharts-dumbbell-label"
-    });
+  if (drawn) elPointsMain.node.classList.remove("apexcharts-element-hidden");
+  return drawn;
+}
+function reconcileSeriesPaths(w, { type, realIndex, pathFromLine, pathFromArea, linePaths, areaPaths }) {
+  var _a, _b;
+  const sj = seriesJoin(w, realIndex);
+  if (!sj) return null;
+  const { join, oldKeys, newKeys } = sj;
+  const frame = w.globals.prevStreamFrame;
+  if (!frame) return null;
+  const oldY = (_a = frame.seriesY) == null ? void 0 : _a[realIndex];
+  const newY = (_b = w.seriesData.series) == null ? void 0 : _b[realIndex];
+  if (oldY.length < 2 || newY.length < 2) return null;
+  if (oldY.some((v) => v === null) || newY.some((v) => v === null)) return null;
+  const entries = buildUnionEntries(join, oldKeys.length);
+  const out = {};
+  if (Array.isArray(linePaths) && linePaths.length === 1 && pathFromLine) {
+    out.line = reconcilePathPair(
+      pathFromLine,
+      linePaths[0],
+      entries,
+      oldKeys.length,
+      newKeys.length,
+      false
+    );
   }
-  /** @param {{prevPaths: any, currPaths: any, color: any, realIndex: any, j: any}} opts */
-  drawBarShadow({ prevPaths, currPaths, color, realIndex, j }) {
-    const w = this.w;
-    const { x: prevX2, x1: prevX1, barYPosition: prevY1 } = prevPaths;
-    const { x: currX2, x1: currX1, barYPosition: currY1 } = currPaths;
-    const prevY2 = prevY1 + currPaths.barHeight;
-    const graphics = new Graphics(this.barCtx.w);
-    const utils = new Utils();
-    const shadowPath = graphics.move(prevX1, prevY2) + graphics.line(prevX2, prevY2) + graphics.line(currX2, currY1) + graphics.line(currX1, currY1) + graphics.line(prevX1, prevY2) + (w.config.plotOptions.bar.borderRadiusApplication === "around" || this.arrBorderRadius[realIndex][j] === "both" ? " Z" : " z");
-    return graphics.drawPath({
-      d: shadowPath,
-      fill: utils.shadeColor(0.5, Utils.rgb2hex(color)),
+  if (type === "area" && Array.isArray(areaPaths) && areaPaths.length === 1 && pathFromArea) {
+    out.area = reconcilePathPair(
+      pathFromArea,
+      areaPaths[0],
+      entries,
+      oldKeys.length,
+      newKeys.length,
+      true
+    );
+  }
+  if (!out.line && !out.area) return null;
+  return out;
+}
+function firstMove(d) {
+  const m = /^M\s*([+-]?[\d.eE]+)[\s,]+([+-]?[\d.eE]+)/.exec(d || "");
+  if (!m) return null;
+  const x2 = parseFloat(m[1]);
+  const y = parseFloat(m[2]);
+  return isFinite(x2) && isFinite(y) ? { x: x2, y } : null;
+}
+function renderBarExitGhosts({
+  w,
+  elSeries,
+  record,
+  newKeys,
+  isHorizontal,
+  speed
+}) {
+  var _a;
+  if (!lengthTransitionEnabled(w)) return;
+  if (!record || !Array.isArray(record.paths) || !(elSeries == null ? void 0 : elSeries.node)) return;
+  const newKeySet = new Set(newKeys);
+  const exits = record.paths.filter(
+    (p) => p && p.d && p.key != null && !newKeySet.has(p.key)
+  );
+  if (!exits.length) return;
+  const graphics = new Graphics(w);
+  const fallbackFill = (_a = w.globals.colors) == null ? void 0 : _a[parseInt(String(record.realIndex), 10)];
+  exits.forEach((p) => {
+    let fill = p.fill || fallbackFill || "#c8c8c8";
+    if (String(fill).indexOf("url(") === 0) fill = fallbackFill || "#c8c8c8";
+    const ghost = graphics.drawPath({
+      d: p.d,
       stroke: "none",
       strokeWidth: 0,
-      fillOpacity: 1,
-      classes: "apexcharts-bar-shadow apexcharts-decoration-element"
-    });
-  }
-  /** @param {{i: any, j: any}} opts */
-  getZeroValueEncounters({ i, j }) {
-    var _a;
-    const w = this.w;
-    let nonZeroColumns = 0;
-    let zeroEncounters = 0;
-    const seriesIndices = w.config.plotOptions.bar.horizontal ? w.seriesData.series.map((_, _i) => _i) : ((_a = w.globals.columnSeries) == null ? void 0 : _a.i.map((_i) => _i)) || [];
-    seriesIndices.forEach((_si) => {
-      const val = w.globals.seriesPercent[_si][j];
-      if (val) {
-        nonZeroColumns++;
+      fill,
+      fillOpacity: 1,
+      classes: "apexcharts-bar-ghost"
+    });
+    const node = ghost.node;
+    node.setAttribute("pointer-events", "none");
+    ghost.attr(
+      "clip-path",
+      `url(#gridRectBarMask${w.globals.cuid})`
+    );
+    elSeries.node.insertBefore(node, elSeries.node.firstChild);
+    const start = firstMove(p.d);
+    let origin = isHorizontal ? "left center" : "center bottom";
+    try {
+      const bb = node.getBBox();
+      if (start && bb) {
+        if (isHorizontal) {
+          origin = Math.abs(start.x - bb.x) <= Math.abs(start.x - (bb.x + bb.width)) ? "left center" : "right center";
+        } else {
+          origin = Math.abs(start.y - (bb.y + bb.height)) <= Math.abs(start.y - bb.y) ? "center bottom" : "center top";
+        }
       }
-      if (_si < i && val === 0) {
-        zeroEncounters++;
+    } catch (_) {
+    }
+    const style = node.style;
+    style.transformBox = "fill-box";
+    style.transformOrigin = origin;
+    node.setAttribute("data:ghostKey", `${record.realIndex}::${p.key}`);
+    try {
+      const bb = node.getBBox();
+      const edge = isHorizontal ? origin.startsWith("left") ? bb.x : bb.x + bb.width : origin.endsWith("bottom") ? bb.y + bb.height : bb.y;
+      if (isFinite(edge)) node.setAttribute("data:ghostEdge", String(edge));
+    } catch (_) {
+    }
+    const duration = Math.max(1, speed || 1);
+    const startAt = performance.now();
+    const step = (now) => {
+      if (w.globals.isDestroyed || !node.parentNode) return;
+      const t = Math.max(0, Math.min(1, (now - startAt) / duration));
+      const eased = 1 - Math.pow(1 - t, 3);
+      const scale = 1 - eased;
+      style.transform = isHorizontal ? `scaleX(${scale})` : `scaleY(${scale})`;
+      style.opacity = String(1 - eased);
+      if (t < 1) {
+        BrowserAPIs.requestAnimationFrame(step);
+      } else {
+        node.parentNode.removeChild(node);
       }
-    });
-    return {
-      nonZeroColumns,
-      zeroEncounters
     };
-  }
-  /**
-   * Index of the series group `seriesIndex` belongs to within
-   * `w.labelData.seriesGroups`, or -1 when the chart has no groups.
-   *
-   * Unlike `getGroupIndex` this is a pure lookup: it never appends to
-   * `columnGroupIndices`, so it is safe to call from positioning/label code
-   * that must not perturb the draw order bookkeeping.
-   * @param {number} seriesIndex
-   * @returns {number}
-   */
-  getSeriesGroupIndex(seriesIndex) {
-    var _a;
-    return (_a = this.w.labelData.seriesGroupIndex[seriesIndex]) != null ? _a : -1;
-  }
-  /**
-   * @param {number} seriesIndex
-   */
-  getGroupIndex(seriesIndex) {
-    const groupIndex = this.getSeriesGroupIndex(seriesIndex);
-    const cGI = this.barCtx.columnGroupIndices;
-    let columnGroupIndex = cGI.indexOf(groupIndex);
-    if (columnGroupIndex < 0) {
-      cGI.push(groupIndex);
-      columnGroupIndex = cGI.length - 1;
-    }
-    return { groupIndex, columnGroupIndex };
-  }
-};
+    BrowserAPIs.requestAnimationFrame(step);
+  });
+}
 class Bar {
   /**
    * @param {import('../types/internal').ChartStateW} w
@@ -14220,15 +14296,17 @@ class Bar {
   /**
    * Point the per-series axis state at this series' y axis. Every bar-family
    * renderer calls it before initialPositions, which reads the baseline by
-   * this.translationsIndex.
+   * this.translationsIndex and flips it for a reversed axis.
    * @param {number} realIndex
    * @return {number} translationsIndex
    */
   setSeriesAxis(realIndex) {
+    var _a;
     if (this.yRatio.length > 1) {
       this.yaxisIndex = this.w.globals.seriesYAxisReverseMap[realIndex];
       this.translationsIndex = realIndex;
     }
+    this.isReversed = (_a = this.w.config.yaxis[this.yaxisIndex]) == null ? void 0 : _a.reversed;
     return this.translationsIndex;
   }
   /** primary draw method which is called on bar object
@@ -14245,7 +14323,7 @@ class Bar {
     series = coreUtils.getLogSeries(series);
     this.series = series;
     this.yRatio = coreUtils.getLogYRatios(this.yRatio);
-    this.barHelpers.initVariables(series);
+    this.barHelpers.initVariables(series, seriesIndex);
     const ret = graphics.group({
       class: "apexcharts-bar-series apexcharts-plot-series"
     });
@@ -14277,7 +14355,6 @@ class Bar {
         this.visibleI = this.visibleI + 1;
       }
       const translationsIndex = this.setSeriesAxis(realIndex);
-      this.isReversed = w.config.yaxis[this.yaxisIndex] && w.config.yaxis[this.yaxisIndex].reversed;
       if (this.isPyramid) {
         this.pyramidLayout = this.barHelpers.computePyramidLayout(series[i]);
       }
@@ -14355,7 +14432,9 @@ class Bar {
           elSeries
         };
         if (this.isHorizontal) {
-          paths = this.drawBarPaths(__spreadProps(__spreadValues({}, pathsParams), {
+          paths = this.drawBarPaths(__spreadProps(__spreadValues(__spreadValues({}, pathsParams), this.barHelpers.rows && {
+            y: initY + this.barHelpers.barRow(realIndex, j) * yDivision
+          }), {
             barHeight,
             zeroW,
             yDivision
@@ -14437,6 +14516,7 @@ class Bar {
           series,
           barHeight: Math.abs(paths.barHeight ? paths.barHeight : barHeight),
           barWidth: Math.abs(paths.barWidth ? paths.barWidth : barWidth),
+          barXPosition: paths.barXPosition,
           elDataLabelsWrap,
           elGoalsMarkers,
           elBarShadows,
@@ -14447,15 +14527,11 @@ class Bar {
       w.globals.seriesXvalues[realIndex] = xArrj;
       w.globals.seriesYvalues[realIndex] = yArrj;
       if (w.globals.previousPaths.length > 0) {
-        const newKeys = [];
-        for (let j = 0; j < series[i].length; j++) {
-          newKeys.push(datumKey(w, realIndex, j));
-        }
         renderBarExitGhosts({
           w,
           elSeries,
           record: this._prevRecord(realIndex),
-          newKeys,
+          newKeys: this._keys(realIndex),
           isHorizontal: this.isHorizontal,
           speed: w.config.chart.animations.dynamicAnimation.speed
         });
@@ -14464,7 +14540,7 @@ class Bar {
     }
     return ret;
   }
-  /** @param {{ hl?: any, realIndex?: any, pathFill?: any, lineFill?: any, j?: any, i?: any, columnGroupIndex?: any, pathFrom?: any, pathTo?: any, strokeWidth?: any, elSeries?: any, x?: any, y?: any, y1?: any, y2?: any, series?: any, barHeight?: any, barWidth?: any, barXPosition?: any, barYPosition?: any, elDataLabelsWrap?: any, elGoalsMarkers?: any, elBarShadows?: any, visibleSeries?: any, type?: any, classes?: any, fadeReveal?: boolean }} opts */
+  /** @param {{ hl?: any, realIndex?: any, pathFill?: any, lineFill?: any, j?: any, i?: any, columnGroupIndex?: any, pathFrom?: any, pathTo?: any, strokeWidth?: any, elSeries?: any, x?: any, y?: any, y1?: any, y2?: any, series?: any, barHeight?: any, barWidth?: any, barXPosition?: any, barYPosition?: any, elDataLabelsWrap?: any, elGoalsMarkers?: any, elBarShadows?: any, visibleSeries?: any, type?: any, classes?: any, fadeReveal?: boolean, noLabel?: boolean }} opts */
   renderSeries({
     hl,
     realIndex,
@@ -14496,7 +14572,9 @@ class Bar {
     visibleSeries,
     type,
     classes,
-    fadeReveal = false
+    fadeReveal = false,
+    noLabel
+    // a datum's extra paths (box halves, box lane) label nothing
   }) {
     var _a, _b, _c, _d, _e, _f, _g;
     const w = this.w;
@@ -14570,7 +14648,8 @@ class Bar {
         barXPosition,
         barYPosition,
         visibleSeries,
-        hl: hl == null ? void 0 : hl.label
+        hl: hl == null ? void 0 : hl.label,
+        noLabel
       })
     );
     if (delayMs > 0) {
@@ -14586,19 +14665,18 @@ class Bar {
     }
     let leaving = false;
     if (!w.globals.isBarHorizontal) {
-      if (dataLabelsObj.dataLabelsPos.dataLabelsX + Math.max(barWidth, w.globals.barPadForNumericAxis) < 0 || dataLabelsObj.dataLabelsPos.dataLabelsX - Math.max(barWidth, w.globals.barPadForNumericAxis) > w.layout.gridWidth) {
+      const cx = barXPosition === void 0 ? dataLabelsObj.dataLabelsPos.dataLabelsX : barXPosition + barWidth / 2;
+      const pad = Math.max(barWidth, w.globals.barPadForNumericAxis);
+      if (cx + pad < 0 || cx - pad > w.layout.gridWidth) {
         if (this._wasOnScreen(realIndex, j)) leaving = true;
         else skipDrawing = true;
       }
     }
-    if (
-      /** @type {Record<string,any>} */
-      w.config.series[i].data[j] && /** @type {Record<string,any>} */
-      w.config.series[i].data[j].strokeColor
-    ) {
-      lineFill = /** @type {Record<string,any>} */
-      w.config.series[i].data[j].strokeColor;
-    }
+    const datum = (
+      /** @type {any} */
+      w.config.series[realIndex].data[j]
+    );
+    if (datum && datum.strokeColor) lineFill = datum.strokeColor;
     const fill = pathFill;
     if (this.isNullValue && w.globals.collapsingSeriesIndices.indexOf(realIndex) === -1) {
       pathFill = "none";
@@ -14621,7 +14699,7 @@ class Bar {
           pathTo,
           stroke: lineFill,
           strokeWidth,
-          strokeLineCap: w.config.stroke.lineCap,
+          strokeLinecap: w.config.stroke.lineCap,
           fill: pathFill,
           pathToInterp,
           animationDelay: delay,
@@ -14673,12 +14751,12 @@ class Bar {
         cy: dataLabelsObj.dataLabelsPos.bcy,
         cx: dataLabelsObj.dataLabelsPos.bcx,
         j,
-        val: w.seriesData.series[i][j],
+        val: w.seriesData.series[realIndex][j],
         barHeight,
         barWidth,
         // Datum identity for the next update's keyed join (see
         // LengthTransition): survivors match by key, not array position.
-        "data:pathKey": datumKey(w, realIndex, j)
+        "data:pathKey": this._keys(realIndex)[j]
       });
       hl == null ? void 0 : hl.paint(renderedPath, {
         delay,
@@ -14754,7 +14832,10 @@ class Bar {
     const j = indexes.j;
     let barYPosition;
     if (w.config.plotOptions.bar.hideZeroBarsWhenGrouped) {
-      const { nonZeroColumns, zeroEncounters } = this.barHelpers.getZeroValueEncounters({ i, j });
+      const { nonZeroColumns, zeroEncounters } = this.barHelpers.getZeroValueEncounters({
+        i: indexes.realIndex,
+        j
+      });
       if (nonZeroColumns > 0) {
         barHeight = this.seriesLen * barHeight / nonZeroColumns;
       }
@@ -14893,7 +14974,7 @@ class Bar {
       barXPosition = xForNumericX.barXPosition;
     } else {
       if (w.config.plotOptions.bar.hideZeroBarsWhenGrouped) {
-        const { nonZeroColumns, zeroEncounters } = this.barHelpers.getZeroValueEncounters({ i, j });
+        const { nonZeroColumns, zeroEncounters } = this.barHelpers.getZeroValueEncounters({ i: realIndex, j });
         if (nonZeroColumns > 0) {
           barWidth = this.seriesLen * barWidth / nonZeroColumns;
         }
@@ -14957,15 +15038,16 @@ class Bar {
   /** @param {{x: any, barWidth: any, realIndex: any, j: any}} opts */
   getBarXForNumericXAxis({ x: x2, barWidth, realIndex, j }) {
     const w = this.w;
+    const overlay = isHistogramOverlay(w);
     let sxI = realIndex;
     if (!w.seriesData.seriesX[realIndex].length) {
       sxI = w.globals.maxValsInArrayIndex;
     }
     if (Utils.isNumber(w.seriesData.seriesX[sxI][j])) {
-      x2 = AxisMapping.dataXToPx(w, w.seriesData.seriesX[sxI][j]) - barWidth * this.seriesLen / 2;
+      x2 = AxisMapping.dataXToPx(w, w.seriesData.seriesX[sxI][j]) - barWidth * (overlay ? 1 : this.seriesLen) / 2;
     }
     return {
-      barXPosition: x2 + (isHistogramOverlay(w) ? 0 : barWidth * this.visibleI),
+      barXPosition: x2 + (overlay ? 0 : barWidth * this.visibleI),
       x: x2
     };
   }
@@ -14986,7 +15068,20 @@ class Bar {
   _wasOnScreen(realIndex, j) {
     if (!lengthTransitionEnabled(this.w)) return false;
     const keyed = this._prevKeyedPaths(realIndex);
-    return !!keyed && keyed.has(datumKey(this.w, realIndex, j));
+    return !!keyed && keyed.has(this._keys(realIndex)[j]);
+  }
+  /**
+   * This render's datum keys for a series (see seriesKeys), as stamped on
+   * each bar and looked up in the previous render's.
+   * @param {number} realIndex
+   * @returns {string[]}
+   */
+  _keys(realIndex) {
+    const c = (
+      /** @type {any} */
+      this._keyCache || (this._keyCache = {})
+    );
+    return c[realIndex] || (c[realIndex] = seriesKeys(this.w, realIndex));
   }
   /**
    * The captured previous-render record for a series (last match wins, same
@@ -15042,7 +15137,7 @@ class Bar {
    * @returns {boolean}
    */
   isLengthTransition(realIndex) {
-    var _a, _b;
+    var _a, _b, _c, _d, _e, _f;
     if (!this._ltCache) this._ltCache = {};
     if (this._ltCache[realIndex] !== void 0) return this._ltCache[realIndex];
     const w = this.w;
@@ -15050,20 +15145,14 @@ class Bar {
     if (lengthTransitionEnabled(w) && w.globals.previousPaths.length > 0) {
       const record = this._prevRecord(realIndex);
       const dataLen = (_b = (_a = w.seriesData.series[realIndex]) == null ? void 0 : _a.length) != null ? _b : 0;
+      const keyed = record && this._prevKeyedPaths(realIndex);
       if (!record) {
         result = dataLen > 0;
-      } else if (record.paths.length !== dataLen) {
-        result = true;
+      } else if (keyed) {
+        const now = new Set(this._keys(realIndex));
+        result = ((_f = (_e = (_d = (_c = w.globals.prevStreamFrame) == null ? void 0 : _c.seriesY) == null ? void 0 : _d[realIndex]) == null ? void 0 : _e.length) != null ? _f : dataLen) !== dataLen || [...keyed.keys()].some((k2) => !now.has(k2));
       } else {
-        const keyed = this._prevKeyedPaths(realIndex);
-        if (keyed) {
-          for (let j = 0; j < dataLen; j++) {
-            if (!keyed.has(datumKey(w, realIndex, j))) {
-              result = true;
-              break;
-            }
-          }
-        }
+        result = record.paths.length !== dataLen;
       }
     }
     this._ltCache[realIndex] = result;
@@ -15123,7 +15212,7 @@ class Bar {
     let isNewDatum = false;
     const keyed = this._prevKeyedPaths(realIndex);
     if (keyed) {
-      const prev = keyed.get(datumKey(w, realIndex, j));
+      const prev = keyed.get(this._keys(realIndex)[j]);
       if (prev) {
         oldD = prev.d;
       } else {
@@ -15266,11 +15355,10 @@ class Bar {
    * @returns {boolean | null} null when there is no previous record to consult
    */
   getPreviousFlip(realIndex, j) {
-    const w = this.w;
     const record = this._prevRecord(realIndex);
     if (!record) return null;
     const keyed = this._prevKeyedPaths(realIndex);
-    const prev = keyed ? keyed.get(datumKey(w, realIndex, j)) : record.paths[j];
+    const prev = keyed ? keyed.get(this._keys(realIndex)[j]) : record.paths[j];
     return prev ? !!prev.flip : null;
   }
   /**
@@ -15297,7 +15385,7 @@ class BarStacked extends Bar {
     const coreUtils = new CoreUtils(this.w);
     series = coreUtils.getLogSeries(series);
     this.yRatio = coreUtils.getLogYRatios(this.yRatio);
-    this.barHelpers.initVariables(series);
+    this.barHelpers.initVariables(series, seriesIndex);
     if (w.config.chart.stackType === "100%") {
       series = w.globals.comboCharts ? (
         /** @type {any} */
@@ -15328,7 +15416,6 @@ class BarStacked extends Bar {
       const xArrValues = [];
       const yArrValues = [];
       const translationsIndex = this.setSeriesAxis(realIndex);
-      this.isReversed = w.config.yaxis[this.yaxisIndex] && w.config.yaxis[this.yaxisIndex].reversed;
       let elSeries = this.graphics.group({
         class: `apexcharts-series`,
         seriesName: Utils.escapeString(w.seriesData.seriesNames[realIndex]),
@@ -15398,7 +15485,9 @@ class BarStacked extends Bar {
           null
         );
         if (this.isHorizontal) {
-          paths = this.drawStackedBarPaths(__spreadProps(__spreadValues({}, commonPathOpts), {
+          paths = this.drawStackedBarPaths(__spreadProps(__spreadValues(__spreadValues({}, commonPathOpts), this.barHelpers.rows && {
+            y: initPositions.y + this.barHelpers.barRow(realIndex, j) * yDivision
+          }), {
             zeroW,
             barHeight,
             yDivision
@@ -15472,6 +15561,7 @@ class BarStacked extends Bar {
           series,
           barHeight,
           barWidth,
+          barXPosition: paths.barXPosition,
           elDataLabelsWrap,
           elGoalsMarkers,
           type: "bar",
@@ -15489,7 +15579,7 @@ class BarStacked extends Bar {
       this.groupCtx.prevXVal.push(this.groupCtx.xArrjVal);
       ret.add(elSeries);
     }
-    if (heldMirrors) this.settleHeldMirrors();
+    if (heldMirrors) this.settleHeldMirrors(ret);
     return ret;
   }
   /**
@@ -15510,15 +15600,21 @@ class BarStacked extends Bar {
    * 'bottom' → 'top', where the endpoint really is rounded at the other end;
    * everywhere else the mirror is an exact identity on the settled shape, so
    * removing it changes nothing on screen.
+   *
+   * The marks are collected now, not when the timer fires: a query then also
+   * stripped the mirrors a LATER update was still holding mid-tween.
+   * @param {any} [ret] this draw's series group (default: the whole chart)
    */
-  settleHeldMirrors() {
+  settleHeldMirrors(ret) {
     const w = this.w;
     if (!Environment.isBrowser()) return;
     const anim = w.config.chart.animations;
     const hold = (anim.dynamicAnimation.speed || 0) + (anim.speed || 0) + 100;
+    const held = (ret ? ret.node : w.dom.baseEl).querySelectorAll(
+      ".apexcharts-flip-held"
+    );
     setTimeout(() => {
-      if (w.globals.isDestroyed || !Utils.elementExists(w.dom.baseEl)) return;
-      w.dom.baseEl.querySelectorAll(".apexcharts-flip-held").forEach((el) => {
+      held.forEach((el) => {
         el.classList.remove(
           "apexcharts-flip-held",
           "apexcharts-flip-y",
@@ -15594,7 +15690,7 @@ class BarStacked extends Bar {
     yDivision,
     elSeries
   }) {
-    var _a, _b, _c, _d, _e;
+    var _a, _b;
     const w = this.w;
     const barYPosition = y + columnGroupIndex * barHeight;
     let barXPosition;
@@ -15602,36 +15698,21 @@ class BarStacked extends Bar {
     const j = indexes.j;
     const realIndex = indexes.realIndex;
     const translationsIndex = indexes.translationsIndex;
-    let prevBarW = 0;
-    for (let k2 = 0; k2 < this.groupCtx.prevXF.length; k2++) {
-      prevBarW = prevBarW + this.groupCtx.prevXF[k2][j];
-    }
-    const gsi = this.groupCtx.prevX.length;
-    if (gsi > 0) {
-      let bXP = zeroW;
-      if (this.groupCtx.prevXVal[gsi - 1][j] < 0) {
-        bXP = /** @type {any} */
-        ((_a = this.series[i]) == null ? void 0 : _a[j]) >= 0 ? this.groupCtx.prevX[gsi - 1][j] + prevBarW - (this.isReversed ? prevBarW : 0) * 2 : this.groupCtx.prevX[gsi - 1][j];
-      } else if (this.groupCtx.prevXVal[gsi - 1][j] >= 0) {
-        bXP = /** @type {any} */
-        ((_b = this.series[i]) == null ? void 0 : _b[j]) >= 0 ? this.groupCtx.prevX[gsi - 1][j] : this.groupCtx.prevX[gsi - 1][j] - prevBarW + (this.isReversed ? prevBarW : 0) * 2;
-      }
-      barXPosition = bXP;
-    } else {
-      barXPosition = zeroW;
-    }
-    if (
+    const v = (
       /** @type {any} */
-      ((_c = this.series[i]) == null ? void 0 : _c[j]) === null
-    ) {
-      x2 = barXPosition;
+      (_b = (_a = this.series[i]) == null ? void 0 : _a[j]) != null ? _b : null
+    );
+    const g = this.groupCtx;
+    const key = w.axisFlags.isXNumeric ? w.seriesData.seriesX[realIndex][j] : j;
+    const top = g.tops.get(key);
+    if (top) {
+      const [prevX, prevVal, prevBarW] = top;
+      const flip = (this.isReversed ? prevBarW : 0) * 2;
+      barXPosition = prevVal < 0 ? v >= 0 ? prevX + prevBarW - flip : prevX : v >= 0 ? prevX : prevX - prevBarW + flip;
     } else {
-      x2 = barXPosition + /** @type {any} */
-      ((_d = this.series[i]) == null ? void 0 : _d[j]) / this.invertedYRatio - (this.isReversed ? (
-        /** @type {any} */
-        ((_e = this.series[i]) == null ? void 0 : _e[j]) / this.invertedYRatio
-      ) : 0) * 2;
+      barXPosition = zeroW;
     }
+    x2 = barXPosition + v / this.invertedYRatio * (this.isReversed ? -1 : 1);
     const paths = this.barHelpers.getBarpaths({
       barYPosition,
       barHeight,
@@ -15645,6 +15726,7 @@ class BarStacked extends Bar {
       j,
       w
     });
+    this._setTop(key, top, g.xArrj[j], g.xArrjVal[j], g.xArrjF[j], realIndex, j);
     this.barHelpers.barBackground({
       j,
       i,
@@ -15682,13 +15764,17 @@ class BarStacked extends Bar {
     columnGroupIndex,
     elSeries
   }) {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c;
     const w = this.w;
     const i = indexes.i;
     const j = indexes.j;
     const bc = indexes.bc;
     const realIndex = indexes.realIndex;
     const translationsIndex = indexes.translationsIndex;
+    const v = (
+      /** @type {any} */
+      (_b = (_a = this.series[i]) == null ? void 0 : _a[j]) != null ? _b : null
+    );
     if (w.axisFlags.isXNumeric) {
       let seriesVal = w.seriesData.seriesX[realIndex][j];
       if (!seriesVal) seriesVal = 0;
@@ -15703,11 +15789,9 @@ class BarStacked extends Bar {
       const [prevYValue, prevVal, prevBarH] = top;
       let bYP;
       if (prevVal < 0) {
-        bYP = /** @type {any} */
-        ((_a = this.series[i]) == null ? void 0 : _a[j]) >= 0 ? prevYValue - prevBarH + (this.isReversed ? prevBarH : 0) * 2 : prevYValue;
+        bYP = v >= 0 ? prevYValue - prevBarH + (this.isReversed ? prevBarH : 0) * 2 : prevYValue;
       } else if (prevVal >= 0) {
-        bYP = /** @type {any} */
-        ((_b = this.series[i]) == null ? void 0 : _b[j]) >= 0 ? prevYValue : prevYValue + prevBarH - (this.isReversed ? prevBarH : 0) * 2;
+        bYP = v >= 0 ? prevYValue : prevYValue + prevBarH - (this.isReversed ? prevBarH : 0) * 2;
       }
       if (typeof bYP === "undefined") bYP = w.layout.gridHeight;
       if (((_c = g.prevYF[0]) == null ? void 0 : _c.every((val) => val === 0)) && g.prevYF.slice(1).every(
@@ -15720,25 +15804,16 @@ class BarStacked extends Bar {
     } else {
       barYPosition = zeroH;
     }
-    if (
-      /** @type {any} */
-      (_d = this.series[i]) == null ? void 0 : _d[j]
-    ) {
-      y = barYPosition - /** @type {any} */
-      ((_e = this.series[i]) == null ? void 0 : _e[j]) / this.yRatio[translationsIndex] + (this.isReversed ? (
-        /** @type {any} */
-        ((_f = this.series[i]) == null ? void 0 : _f[j]) / this.yRatio[translationsIndex]
-      ) : 0) * 2;
-    } else {
-      y = barYPosition;
-    }
+    y = barYPosition - v / this.yRatio[translationsIndex] * (this.isReversed ? -1 : 1);
     const paths = this.barHelpers.getColumnPaths({
       barXPosition,
       barWidth,
       y1: barYPosition,
       y2: y,
       yRatio: this.yRatio[translationsIndex],
-      strokeWidth: this.strokeWidth,
+      // the series' width even for an empty segment, so a hidden layer keeps
+      // its place, but no inset at all when no stroke is drawn
+      strokeWidth: w.config.stroke.show ? this.strokeWidth : 0,
       isReversed: this.isReversed,
       series: this.series,
       realIndex: indexes.realIndex,
@@ -15746,17 +15821,7 @@ class BarStacked extends Bar {
       j,
       w
     });
-    const t = g.yArrj[j];
-    if (!isNaN(t)) {
-      g.tops.set(key, [
-        t,
-        g.yArrjVal[j],
-        (top ? top[2] : 0) + g.yArrjF[j],
-        (top ? top[3] : 0) + (w.seriesData.series[realIndex][j] || 0),
-        top ? Math.min(top[0], top[4]) : 1 / 0,
-        top ? Math.max(top[0], top[5]) : -1 / 0
-      ]);
-    }
+    this._setTop(key, top, g.yArrj[j], g.yArrjVal[j], g.yArrjF[j], realIndex, j);
     this.barHelpers.barBackground({
       bc,
       j,
@@ -15775,17 +15840,47 @@ class BarStacked extends Bar {
         zeroH,
         realIndex,
         j,
-        0
+        translationsIndex
       ),
       barXPosition,
       x: w.axisFlags.isXNumeric ? x2 : x2 + xDivision,
       y
     };
   }
+  /**
+   * Record the segment just drawn as the top of its stack. Per key it holds
+   * the top and value of the last segment drawn there, the summed lengths and
+   * raw values of every segment so far (the total label's value), and the
+   * extreme tops below that segment (the total label's position).
+   * @param {any} key @param {any} top @param {number} t @param {any} val
+   * @param {number} len @param {number} realIndex @param {number} j
+   */
+  _setTop(key, top, t, val, len, realIndex, j) {
+    if (isNaN(t)) return;
+    this.groupCtx.tops.set(key, [
+      t,
+      val,
+      (top ? top[2] : 0) + len,
+      (top ? top[3] : 0) + (this.w.seriesData.series[realIndex][j] || 0),
+      top ? Math.min(top[0], top[4]) : 1 / 0,
+      top ? Math.max(top[0], top[5]) : -1 / 0
+    ]);
+  }
+}
+function jitterExtent(pool, w) {
+  let lo = Infinity;
+  let hi = -Infinity;
+  pool.slice(0, w.seriesData.series.length).flat(2).forEach((v) => {
+    if (v === +v) {
+      if (v < lo) lo = v;
+      if (v > hi) hi = v;
+    }
+  });
+  return [lo, hi];
 }
 function buildJitterGroups({
-  w,
   points,
+  extent,
   seedA,
   seedB,
   center,
@@ -15796,6 +15891,7 @@ function buildJitterGroups({
   clampAt,
   sideSign
 }) {
+  var _a, _b;
   const opts = options;
   if (!opts || opts.show === false) return [];
   if (!points || !points.length) return [];
@@ -15809,8 +15905,8 @@ function buildJitterGroups({
   const scale = opts.colorScale;
   const useScale = scale && Array.isArray(scale.colors) && scale.colors.length > 0;
   const steps = useScale ? Math.max(2, scale.steps || 24) : 1;
-  const sMin = useScale && scale.min != null ? scale.min : w.globals.minY;
-  const sMax = useScale && scale.max != null ? scale.max : w.globals.maxY;
+  const sMin = (_a = scale == null ? void 0 : scale.min) != null ? _a : extent[0];
+  const sMax = (_b = scale == null ? void 0 : scale.max) != null ? _b : extent[1];
   const span = sMax - sMin || 1;
   const buckets = useScale ? new Array(steps).fill("") : [""];
   for (let k2 = 0; k2 < points.length; k2 += stride) {
@@ -15896,7 +15992,7 @@ function renderJitter({
   elSeries.add(elPointsWrap);
 }
 function darkenColor(color, amount) {
-  const rgb = Utils.parseHex(color);
+  const rgb = Utils.parseColor(color) || Utils.parseColor(Utils.resolveColor(color));
   if (!rgb) return color;
   const f = Math.max(0, 1 - amount);
   return `rgb(${Math.round(rgb[0] * f)},${Math.round(rgb[1] * f)},${Math.round(rgb[2] * f)})`;
@@ -15961,7 +16057,7 @@ class BoxCandleStick extends Bar {
     if (!keyed || keyed.size === 0 || !row || row.length === 0) return false;
     let survivors = 0;
     for (let j = 0; j < row.length; j++) {
-      if (keyed.has(datumKey(this.w, realIndex, j))) survivors++;
+      if (keyed.has(this._keys(realIndex)[j])) survivors++;
     }
     return survivors / keyed.size < 0.5;
   }
@@ -15990,7 +16086,7 @@ class BoxCandleStick extends Bar {
       }
       this._prevHalves[realIndex] = map;
     }
-    const halves = map && map.get(datumKey(this.w, realIndex, j));
+    const halves = map && map.get(this._keys(realIndex)[j]);
     return halves && halves.length === 2 ? halves[pi] : null;
   }
   /**
@@ -16000,7 +16096,7 @@ class BoxCandleStick extends Bar {
    */
   // @ts-ignore -- BoxCandleStick.draw has an extra ctype param compared to Bar.draw
   draw(series, ctype, seriesIndex) {
-    var _a;
+    var _a, _b;
     const w = this.w;
     const graphics = new Graphics(this.w);
     const type = w.globals.comboCharts ? ctype : w.config.chart.type;
@@ -16008,16 +16104,17 @@ class BoxCandleStick extends Bar {
     this.candlestickOptions = this.w.config.plotOptions.candlestick;
     this.boxOptions = this.w.config.plotOptions.boxPlot;
     this.isHorizontal = w.config.plotOptions.bar.horizontal;
-    this.isOHLC = this.candlestickOptions && this.candlestickOptions.type === "ohlc";
     this.coreUtils = new CoreUtils(this.w);
     series = this.coreUtils.getLogSeries(series);
     this.series = series;
     this.yRatio = this.coreUtils.getLogYRatios(this.yRatio);
-    this.barHelpers.initVariables(series);
+    this.barHelpers.initVariables(series, seriesIndex);
     const ret = graphics.group({
       class: `apexcharts-${type}-series apexcharts-plot-series`
     });
     this.isBoxPlot = type === "boxPlot";
+    this.isOHLC = !this.isBoxPlot && ((_a = this.candlestickOptions) == null ? void 0 : _a.type) === "ohlc";
+    const jx = jitterExtent(w.candleData.seriesBoxPoints, w);
     for (let i = 0; i < series.length; i++) {
       let x2;
       let y;
@@ -16143,6 +16240,7 @@ class BoxCandleStick extends Bar {
               i,
               pathFrom: (_a2 = this._prevBoxHalf(realIndex, j, pi)) != null ? _a2 : paths.pathFrom,
               fadeReveal,
+              noLabel: pi > 0,
               pathTo,
               strokeWidth,
               elSeries,
@@ -16164,7 +16262,7 @@ class BoxCandleStick extends Bar {
           }
         );
         if (boxPointsOpts && boxPointsOpts.show !== false) {
-          const pts = (_a = w.candleData.seriesBoxPoints[realIndex]) == null ? void 0 : _a[j];
+          const pts = (_b = w.candleData.seriesBoxPoints[realIndex]) == null ? void 0 : _b[j];
           if (pts && pts.length) {
             const logVal = (v) => (
               /** @type {any} */
@@ -16175,14 +16273,14 @@ class BoxCandleStick extends Bar {
             );
             let center, halfExtent, alongFn;
             if (this.isHorizontal) {
-              const yRatio = this.invertedYRatio;
+              const yRatio = this.invertedYRatio * (this.isReversed ? -1 : 1);
               const bh = barHeight != null ? barHeight : 0;
               const z = zeroW != null ? zeroW : 0;
               center = paths.barYPosition + bh / 2;
               halfExtent = bh / 2;
               alongFn = (v) => z + logVal(v) / yRatio;
             } else {
-              const yRatio = this.yRatio[translationsIndex];
+              const yRatio = this.yRatio[translationsIndex] * (this.isReversed ? -1 : 1);
               const bw = barWidth != null ? barWidth : 0;
               const z = zeroH != null ? zeroH : 0;
               center = paths.barXPosition + bw / 2;
@@ -16190,8 +16288,8 @@ class BoxCandleStick extends Bar {
               alongFn = (v) => z - logVal(v) / yRatio;
             }
             const groups = buildJitterGroups({
-              w,
               points: pts,
+              extent: jx,
               seedA: realIndex,
               seedB: j,
               center,
@@ -16220,15 +16318,13 @@ class BoxCandleStick extends Bar {
       w.globals.seriesXvalues[realIndex] = xArrj;
       w.globals.seriesYvalues[realIndex] = yArrj;
       if (w.globals.previousPaths.length > 0 && !fadeReveal) {
-        const newKeys = [];
-        for (let j = 0; j < series[i].length; j++) {
-          newKeys.push(datumKey(w, realIndex, j));
-        }
         renderBarExitGhosts({
           w,
           elSeries,
           record: this._prevRecord(realIndex),
-          newKeys,
+          newKeys: this._keys(realIndex).filter(
+            (_, j) => series[i][j] != null
+          ),
           isHorizontal: this.isHorizontal,
           speed: w.config.chart.animations.dynamicAnimation.speed
         });
@@ -16247,7 +16343,7 @@ class BoxCandleStick extends Bar {
     strokeWidth,
     cullBounds = null
   }) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c;
     const w = this.w;
     const graphics = new Graphics(this.w);
     const i = indexes.i;
@@ -16258,7 +16354,7 @@ class BoxCandleStick extends Bar {
     const getColor = (color2) => Array.isArray(color2) ? color2[realIndex] : color2;
     const colorPos = getColor(candleColors.upward);
     const colorNeg = getColor(candleColors.downward);
-    const yRatio = this.yRatio[indexes.translationsIndex];
+    const yRatio = this.yRatio[indexes.translationsIndex] * (this.isReversed ? -1 : 1);
     const ohlc = this.getOHLCValue(realIndex, j);
     let l1 = zeroH;
     let l2 = zeroH;
@@ -16275,9 +16371,11 @@ class BoxCandleStick extends Bar {
       x2 = pos.x;
       barXPosition = pos.barXPosition;
     }
-    if (typeof /** @type {any} */
-    ((_a = this.series[i]) == null ? void 0 : _a[j]) === "undefined" || /** @type {any} */
-    ((_b = this.series[i]) == null ? void 0 : _b[j]) === null) {
+    const hole = (
+      /** @type {any} */
+      ((_a = this.series[i]) == null ? void 0 : _a[j]) == null
+    );
+    if (hole) {
       y1 = zeroH;
       y2 = zeroH;
     } else {
@@ -16287,7 +16385,7 @@ class BoxCandleStick extends Bar {
       l2 = zeroH - ohlc.l / yRatio;
       m = zeroH - ohlc.m / yRatio;
     }
-    if (cullBounds && (barXPosition + barWidth < cullBounds.lo || barXPosition > cullBounds.hi) && !this._wasOnScreen(realIndex, j)) {
+    if (hole || cullBounds && (barXPosition + barWidth < cullBounds.lo || barXPosition > cullBounds.hi) && !this._wasOnScreen(realIndex, j)) {
       return {
         pathTo: null,
         pathFrom: null,
@@ -16317,7 +16415,7 @@ class BoxCandleStick extends Bar {
       ];
     }
     let pathFrom = null;
-    const morphFrom = (_d = (_c = this.ctx) == null ? void 0 : _c.morphTypeChange) == null ? void 0 : _d.getInitialPathFor(realIndex, j);
+    const morphFrom = (_c = (_b = this.ctx) == null ? void 0 : _b.morphTypeChange) == null ? void 0 : _c.getInitialPathFor(realIndex, j);
     if (morphFrom) {
       pathFrom = morphFrom;
     } else if (w.globals.previousPaths.length > 0) {
@@ -16356,7 +16454,7 @@ class BoxCandleStick extends Bar {
     zeroW,
     strokeWidth
   }) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c;
     const w = this.w;
     const graphics = new Graphics(this.w);
     const i = indexes.i;
@@ -16365,7 +16463,7 @@ class BoxCandleStick extends Bar {
     const { colors: candleColors } = w.config.plotOptions.candlestick;
     const { colors: boxColors } = this.boxOptions;
     const getColor = (color2) => Array.isArray(color2) ? color2[realIndex] : color2;
-    const yRatio = this.invertedYRatio;
+    const yRatio = this.invertedYRatio * (this.isReversed ? -1 : 1);
     const ohlc = this.getOHLCValue(realIndex, j);
     let color = ohlc.o < ohlc.c ? [getColor(candleColors.upward)] : [getColor(candleColors.downward)];
     if (this.isBoxPlot) {
@@ -16377,9 +16475,11 @@ class BoxCandleStick extends Bar {
     let x2 = Math.max(ohlc.o, ohlc.c);
     let m = ohlc.m;
     const barYPosition = y + barHeight * this.visibleI;
-    if (typeof /** @type {any} */
-    ((_a = this.series[i]) == null ? void 0 : _a[j]) === "undefined" || /** @type {any} */
-    ((_b = this.series[i]) == null ? void 0 : _b[j]) === null) {
+    const hole = (
+      /** @type {any} */
+      ((_a = this.series[i]) == null ? void 0 : _a[j]) == null
+    );
+    if (hole) {
       x1 = zeroW;
       x2 = zeroW;
     } else {
@@ -16394,7 +16494,7 @@ class BoxCandleStick extends Bar {
       graphics.move(m, barYPosition) + graphics.line(m, barYPosition + barHeight) + graphics.line(x2, barYPosition + barHeight) + graphics.line(x2, barYPosition + barHeight / 2) + graphics.line(l2, barYPosition + barHeight / 2) + graphics.line(l2, barYPosition + barHeight - barHeight / 4) + graphics.line(l2, barYPosition + barHeight / 4) + graphics.line(l2, barYPosition + barHeight / 2) + graphics.line(x2, barYPosition + barHeight / 2) + graphics.line(x2, barYPosition) + graphics.line(m, barYPosition) + "z"
     ];
     let pathFrom = null;
-    const morphFrom = (_d = (_c = this.ctx) == null ? void 0 : _c.morphTypeChange) == null ? void 0 : _d.getInitialPathFor(realIndex, j);
+    const morphFrom = (_c = (_b = this.ctx) == null ? void 0 : _b.morphTypeChange) == null ? void 0 : _c.getInitialPathFor(realIndex, j);
     if (morphFrom) {
       pathFrom = morphFrom;
     } else if (w.globals.previousPaths.length > 0) {
@@ -16419,7 +16519,8 @@ class BoxCandleStick extends Bar {
         0
       ),
       barYPosition,
-      color
+      color,
+      culled: hole
     };
   }
   /**
@@ -16596,13 +16697,9 @@ class TreemapHelpers {
       elDataLabelsWrap = graphics.group({
         class: "apexcharts-data-labels"
       });
-      const offX = resolveDataLabelOffset(dataLabelsConfig.offsetX, w, i, j);
-      const offY = resolveDataLabelOffset(dataLabelsConfig.offsetY, w, i, j);
-      const dataLabelsX = x2 + offX;
-      const dataLabelsY = y + parseFloat(dataLabelsConfig.style.fontSize) / 3 + offY;
       dataLabels.plotDataLabelsText({
-        x: dataLabelsX,
-        y: dataLabelsY,
+        x: x2,
+        y: y + parseFloat(dataLabelsConfig.style.fontSize) / 3,
         text,
         i,
         j,
@@ -17066,18 +17163,16 @@ class Helpers4 {
     this.lineCtx = lineCtx;
   }
   /**
-   * @param {number} i
+   * @param {number} i index into `series`, the rows this draw call renders
    * @param {any[]} series
+   * @param {number} realIndex index into the config / fill options
    */
-  sameValueSeriesFix(i, series) {
+  sameValueSeriesFix(i, series, realIndex) {
     const w = this.w;
-    if (w.config.fill.type === "gradient" || w.config.fill.type[i] === "gradient") {
-      const coreUtils = new CoreUtils(this.lineCtx.w);
-      if (coreUtils.seriesHaveSameValues(i)) {
-        const gSeries = series[i].slice();
-        gSeries[gSeries.length - 1] = gSeries[gSeries.length - 1] + 1e-6;
-        series[i] = gSeries;
-      }
+    const s = series[i];
+    if ((w.config.fill.type === "gradient" || w.config.fill.type[realIndex] === "gradient") && s.every((v) => v === s[0])) {
+      series[i] = s.slice();
+      series[i][s.length - 1] += 1e-6;
     }
     return series;
   }
@@ -17518,13 +17613,27 @@ class Line {
     this.yRatio = coreUtils.getLogYRatios(this.yRatio);
     this.prevSeriesY = [];
     this.prevSeriesYByX = /* @__PURE__ */ new Map();
+    this._stackXs = null;
+    if (w.config.chart.stacked && w.axisFlags.isXNumeric) {
+      const xs = series.map(
+        (_, i) => w.globals.comboCharts ? (
+          /** @type {any} */
+          seriesIndex[i]
+        ) : i
+      ).filter((ri) => !this._hidden(ri)).map((ri) => w.seriesData.seriesX[ri] || []);
+      if (xs.some(
+        (a) => a.length !== xs[0].length || a.some((v, k2) => v !== xs[0][k2])
+      )) {
+        this._stackXs = [...new Set(xs.flat())].sort((a, b) => a - b);
+      }
+    }
     const allSeries = [];
     for (let i = 0; i < series.length; i++) {
-      series = this.lineHelpers.sameValueSeriesFix(i, series);
       const realIndex = w.globals.comboCharts ? (
         /** @type {any} */
         seriesIndex[i]
       ) : i;
+      series = this.lineHelpers.sameValueSeriesFix(i, series, realIndex);
       const translationsIndex = this.yRatio.length > 1 ? realIndex : 0;
       const flat = this._collapsedBaselineRow(series, i, realIndex);
       this._shapeOnly = !!flat;
@@ -17708,9 +17817,7 @@ class Line {
     const gl = w.globals;
     if (w.config.chart.stacked || this.pointsChart) return null;
     if (!Array.isArray(series[i]) || series[i].length !== 0) return null;
-    if (gl.collapsedSeriesIndices.indexOf(realIndex) === -1 && gl.ancillaryCollapsedSeriesIndices.indexOf(realIndex) === -1) {
-      return null;
-    }
+    if (!this._hidden(realIndex)) return null;
     const n = w.axisFlags.isXNumeric ? (w.seriesData.seriesX[realIndex] || []).length : gl.dataPoints;
     if (!n) return null;
     const lo = Utils.isNumber(gl.minYArr[realIndex]) ? gl.minYArr[realIndex] : gl.minY;
@@ -17839,6 +17946,11 @@ class Line {
     if (key === void 0 || key === null) return void 0;
     return this.prevSeriesYByX.get(key);
   }
+  /** @param {number} ri */
+  _hidden(ri) {
+    const g = this.w.globals;
+    return g.collapsedSeriesIndices.indexOf(ri) > -1 || g.ancillaryCollapsedSeriesIndices.indexOf(ri) > -1;
+  }
   /**
    * Fold a drawn series into the running stack top, so the next series can find
    * its baseline by x (#4886).
@@ -17854,19 +17966,18 @@ class Line {
    * correct if that representation ever changes.
    * @param {number} realIndex
    * @param {any[]} yArrj
+   * @param {any[]} [row] the drawn row, if not the series' own (a part)
    */
-  _recordStackTops(realIndex, yArrj) {
+  _recordStackTops(realIndex, yArrj, row = this.w.seriesData.series[realIndex]) {
     const w = this.w;
     if (!w.config.chart.stacked) return;
     if (!Array.isArray(yArrj)) return;
-    if (w.globals.collapsedSeriesIndices.indexOf(realIndex) !== -1 || w.globals.ancillaryCollapsedSeriesIndices.indexOf(realIndex) !== -1) {
-      return;
-    }
+    if (this._hidden(realIndex)) return;
     for (let j = 0; j < yArrj.length; j++) {
       const key = this._stackKey(realIndex, j);
       if (key === void 0 || key === null) continue;
       const y = yArrj[j];
-      if (!Utils.isNumber(y)) continue;
+      if (!Utils.isNumber(y) || (row == null ? void 0 : row[j]) == null) continue;
       this.prevSeriesYByX.set(key, y);
     }
   }
@@ -17899,7 +18010,8 @@ class Line {
     w.globals.seriesYvalues[realIndex] = paths.yArrj;
     const forecast = w.config.forecastDataPoints;
     if (forecast.count > 0 && type !== "rangeArea") {
-      const forecastCutoff = w.globals.seriesXvalues[realIndex][w.globals.seriesXvalues[realIndex].length - forecast.count - 1];
+      const ci = paths.xArrj.length - forecast.count - 1;
+      const forecastCutoff = w.axisFlags.isXNumeric ? (w.seriesData.seriesX[realIndex][ci] - w.globals.minX) / this.xRatio : w.globals.padHorizontal + this.categoryAxisCorrection + ci * this.xDivision;
       const elForecastMask = graphics.drawRect(
         forecastCutoff,
         0,
@@ -17986,7 +18098,7 @@ class Line {
           scrollMorph: !!streamScroll,
           stroke: "none",
           strokeWidth: 0,
-          strokeLineCap: null,
+          strokeLinecap: null,
           fill: pathFill
         }));
         this.elSeries.add(renderedPath);
@@ -18028,7 +18140,7 @@ class Line {
           scrollMorph: !!streamScroll,
           stroke: lineFill,
           strokeWidth: this.strokeWidth,
-          strokeLineCap: w.config.stroke.lineCap,
+          strokeLinecap: w.config.stroke.lineCap,
           fill: type === "rangeArea" ? pathFill : "none"
         });
         const renderedPath = emit.renderPaths(linePathCommonOpts);
@@ -18082,7 +18194,7 @@ class Line {
     isRangeStart,
     seriesRangeEnd
   }) {
-    var _a, _b;
+    var _a, _b, _c;
     const w = this.w;
     const graphics = new Graphics(this.w);
     const yRatio = this.yRatio;
@@ -18134,15 +18246,30 @@ class Line {
       });
       if (fast) return fast;
     }
+    const ks = stackSeries ? this._stackXs : null;
+    let kp = 0;
+    const midsAt = [];
     for (let j = 0; j < iterations; j++) {
       if (series[i].length === 0) break;
       const isNull = typeof series[i][j + 1] === "undefined" || series[i][j + 1] === null;
       if (w.axisFlags.isXNumeric) {
-        let sX = w.seriesData.seriesX[realIndex][j + 1];
-        if (typeof w.seriesData.seriesX[realIndex][j + 1] === "undefined") {
-          sX = w.seriesData.seriesX[realIndex][iterations - 1];
+        const sxs = w.seriesData.seriesX[realIndex];
+        let sX = sxs[j + 1];
+        if (typeof sX === "undefined") {
+          sX = sxs[iterations - 1];
         }
         x2 = (sX - w.globals.minX) / this.xRatio;
+        if (ks) {
+          const m = [];
+          while (ks[kp] <= sxs[j]) kp++;
+          while (ks[kp] < sX) {
+            m.push([
+              (ks[kp] - w.globals.minX) / this.xRatio,
+              (_c = this.prevSeriesYByX.get(ks[kp++])) != null ? _c : this.zeroY
+            ]);
+          }
+          if (m.length) midsAt[j + 1] = m;
+        }
       } else {
         x2 = x2 + this.xDivision;
       }
@@ -18152,9 +18279,7 @@ class Line {
             var _a2;
             for (let pii = pi; pii >= 0; pii--) {
               const ri = (_a2 = seriesIndex == null ? void 0 : seriesIndex[pii]) != null ? _a2 : pii;
-              if (w.globals.collapsedSeriesIndices.indexOf(ri) === -1 && w.globals.ancillaryCollapsedSeriesIndices.indexOf(ri) === -1) {
-                return pii;
-              }
+              if (!this._hidden(ri)) return pii;
             }
             return -1;
           };
@@ -18210,6 +18335,7 @@ class Line {
         j,
         x: x2,
         y,
+        midsAt,
         y2,
         xArrj,
         yArrj,
@@ -18450,7 +18576,7 @@ class Line {
       numericXY: nxs ? { xs: nxs, ys: nys, areaCloseY: bottomY } : void 0
     };
   }
-  /** @param {{type: any, series: any, i: any, j: any, x: any, y: any, xArrj: any, yArrj: any, y2: any, y2Arrj: any, pX: any, pY: any, pathState: any, segmentStartX: any, linePath: any, areaPath: any, linePaths: any, areaPaths: any, curve: any, isRangeStart: any}} opts */
+  /** @param {{type: any, series: any, i: any, j: any, x: any, y: any, midsAt: any[][], xArrj: any, yArrj: any, y2: any, y2Arrj: any, pX: any, pY: any, pathState: any, segmentStartX: any, linePath: any, areaPath: any, linePaths: any, areaPaths: any, curve: any, isRangeStart: any}} opts */
   _createPaths({
     type,
     series,
@@ -18458,6 +18584,7 @@ class Line {
     j,
     x: x2,
     y,
+    midsAt,
     xArrj,
     yArrj,
     y2,
@@ -18477,6 +18604,8 @@ class Line {
     const areaBottomY = this.areaBottomY;
     const rangeArea = type === "rangeArea";
     const isLowerRangeAreaPath = type === "rangeArea" && isRangeStart;
+    const mids = midsAt[j + 1];
+    const via = (f) => mids ? [...mids, [x2, y]].map(([bx, by], k2, a) => f(...k2 ? a[k2 - 1] : [pX, pY], bx, by)).join("") : f(pX, pY, x2, y);
     switch (curve) {
       case "monotoneCubic": {
         const yAj = isRangeStart ? yArrj : y2Arrj;
@@ -18522,8 +18651,19 @@ class Line {
             }
           // falls through
           case 2: {
-            const _xAj = isRangeStart ? xArrj : xArrj.slice().reverse();
-            const _yAj = isRangeStart ? yAj : yAj.slice().reverse();
+            let _xAj = isRangeStart ? xArrj : xArrj.slice().reverse();
+            let _yAj = isRangeStart ? yAj : yAj.slice().reverse();
+            if (midsAt.length && !rangeArea) {
+              const P = [];
+              _xAj.forEach((v, k2) => {
+                if (_yAj[k2] !== null && _yAj[k2 - 1] != null && midsAt[k2]) {
+                  P.push(...midsAt[k2]);
+                }
+                P.push([v, _yAj[k2]]);
+              });
+              _xAj = P.map((p) => p[0]);
+              _yAj = P.map((p) => p[1]);
+            }
             const smoothInputs = getSmoothInputs(_xAj, _yAj);
             const points = smoothInputs.length > 1 ? spline.points(smoothInputs) : smoothInputs;
             let smoothInputsLower = [];
@@ -18582,7 +18722,10 @@ class Line {
         break;
       }
       case "smooth": {
-        const length = (x2 - pX) * 0.35;
+        const toPoint = (ax, ay, bx, by) => {
+          const l = (bx - ax) * 0.35;
+          return graphics.curve(ax + l, ay, bx - l, by, bx, by);
+        };
         if (series[i][j] === null) {
           pathState = 0;
         } else {
@@ -18602,7 +18745,7 @@ class Line {
               }
               pathState = 1;
               if (j < series[i].length - 2) {
-                const p = graphics.curve(pX + length, pY, x2 - length, y, x2, y);
+                const p = via(toPoint);
                 linePath += p;
                 areaPath += p;
                 break;
@@ -18620,7 +18763,7 @@ class Line {
                 areaPaths.push(areaPath);
                 pathState = -1;
               } else {
-                const p = graphics.curve(pX + length, pY, x2 - length, y, x2, y);
+                const p = via(toPoint);
                 linePath += p;
                 areaPath += p;
                 if (j >= series[i].length - 2) {
@@ -18641,9 +18784,9 @@ class Line {
         break;
       }
       default: {
-        const pathToPoint = (curve2, x3, y3) => {
+        const pathToPoint = (_ax, _ay, x3, y3) => {
           let path = "";
-          switch (curve2) {
+          switch (curve) {
             case "stepline":
               path = graphics.line(x3, null, "H") + graphics.line(null, y3, "V");
               break;
@@ -18675,7 +18818,7 @@ class Line {
               }
               pathState = 1;
               if (j < series[i].length - 2) {
-                const p = pathToPoint(curve, x2, y);
+                const p = via(pathToPoint);
                 linePath += p;
                 areaPath += p;
                 break;
@@ -18693,7 +18836,7 @@ class Line {
                 areaPaths.push(areaPath);
                 pathState = -1;
               } else {
-                const p = pathToPoint(curve, x2, y);
+                const p = via(pathToPoint);
                 linePath += p;
                 areaPath += p;
                 if (j >= series[i].length - 2) {
@@ -20552,7 +20695,7 @@ class Radar {
       }
       s.forEach((dv, j) => {
         const range = Math.abs(this.maxValue - this.minValue);
-        dv = dv - this.minValue;
+        dv = Math.max(0, dv - this.minValue);
         if (this.isLog) {
           dv = this.coreUtils.getLogVal(this.logBase, dv, 0);
         }
@@ -20589,7 +20732,7 @@ class Radar {
         shouldClipToGrid: false,
         bindEventsOnPaths: false,
         stroke: w.globals.stroke.colors[i],
-        strokeLineCap: w.config.stroke.lineCap
+        strokeLinecap: w.config.stroke.lineCap
       };
       let pathFrom = null;
       if (w.globals.previousPaths.length > 0) {
@@ -20766,6 +20909,7 @@ class Radar {
   drawXAxisTexts() {
     const w = this.w;
     const xaxisLabelsConfig = w.config.xaxis.labels;
+    const lc = xaxisLabelsConfig.style.colors;
     const elXAxisWrap = this.graphics.group({
       class: "apexcharts-xaxis"
     });
@@ -20789,7 +20933,7 @@ class Radar {
           j: i,
           parent: elXAxisWrap,
           className: "apexcharts-xaxis-label",
-          color: Array.isArray(xaxisLabelsConfig.style.colors) && xaxisLabelsConfig.style.colors[i] ? xaxisLabelsConfig.style.colors[i] : "#a8a8a8",
+          color: (Array.isArray(lc) ? lc[i] : lc) || "#a8a8a8",
           dataLabelsConfig: __spreadValues({
             textAnchor: textPos.textAnchor,
             dropShadow: { enabled: false }
@@ -21774,14 +21918,14 @@ class RangeBar extends Bar {
    * @param {number} seriesIndex
    */
   draw(series, seriesIndex) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+    var _a, _b, _c, _d, _e, _f;
     const w = this.w;
     const graphics = new Graphics(this.w);
     this.rangeBarOptions = this.w.config.plotOptions.rangeBar;
     this.series = series;
     this.seriesRangeStart = w.rangeData.seriesRangeStart;
     this.seriesRangeEnd = w.rangeData.seriesRangeEnd;
-    this.barHelpers.initVariables(series);
+    this.barHelpers.initVariables(series, seriesIndex);
     const ret = graphics.group({
       class: "apexcharts-rangebar-series apexcharts-plot-series"
     });
@@ -21803,6 +21947,9 @@ class RangeBar extends Bar {
         this.visibleI = this.visibleI + 1;
       }
       const translationsIndex = this.setSeriesAxis(realIndex);
+      if (this.isHorizontal && w.labelData.timescaleLabels.length) {
+        this.isReversed = false;
+      }
       const initPositions = this.barHelpers.initialPositions(realIndex);
       const {
         y: initY,
@@ -21812,10 +21959,8 @@ class RangeBar extends Bar {
         zeroH
         // zeroH is the baseline where 0 meets y axis
       } = initPositions;
-      let barWidth = (_a = initPositions.barWidth) != null ? _a : 0;
-      let barHeight = (_b = initPositions.barHeight) != null ? _b : 0;
-      const yDivision = (_c = initPositions.yDivision) != null ? _c : 0;
-      const xDivision = (_d = initPositions.xDivision) != null ? _d : 0;
+      const yDivision = (_a = initPositions.yDivision) != null ? _a : 0;
+      const xDivision = (_b = initPositions.xDivision) != null ? _b : 0;
       y = initY;
       x2 = initX;
       const elDataLabelsWrap = graphics.group({
@@ -21825,10 +21970,16 @@ class RangeBar extends Bar {
       const elGoalsMarkers = graphics.group({
         class: "apexcharts-rangebar-goals-markers"
       });
+      const data = (
+        /** @type {any} */
+        w.config.series[realIndex].data
+      );
       for (let j = 0; j < w.globals.dataPoints; j++) {
         const strokeWidth = this.barHelpers.getStrokeWidth(i, j, realIndex);
-        const y1 = this.seriesRangeStart[i][j];
-        const y2 = this.seriesRangeEnd[i][j];
+        let barWidth = (_c = initPositions.barWidth) != null ? _c : 0;
+        let barHeight = (_d = initPositions.barHeight) != null ? _d : 0;
+        const y1 = this.seriesRangeStart[realIndex][j];
+        const y2 = this.seriesRangeEnd[realIndex][j];
         let paths = (
           /** @type {any} */
           null
@@ -21840,20 +21991,16 @@ class RangeBar extends Bar {
         if (w.config.plotOptions.bar.rangeBarGroupRows) {
           seriesLen = 1;
         }
-        if (typeof /** @type {Record<string,any>} */
-        ((_e = w.config.series[i].data) == null ? void 0 : _e[j]) === "undefined") {
+        if (typeof (data == null ? void 0 : data[j]) === "undefined") {
           break;
         }
         if (this.isHorizontal) {
           barYPosition = y + barHeight * /** @type {any} */
           this.visibleI;
           const srty = (yDivision - barHeight * seriesLen) / 2;
-          if (
-            /** @type {Record<string,any>} */
-            (_g = (_f = w.config.series[i].data) == null ? void 0 : _f[j]) == null ? void 0 : _g.x
-          ) {
+          if (((_e = data[j]) == null ? void 0 : _e.x) != null) {
             const positions = this.detectOverlappingBars({
-              i,
+              i: realIndex,
               j,
               barYPosition,
               srty,
@@ -21876,17 +22023,14 @@ class RangeBar extends Bar {
           barWidth = paths.barWidth;
         } else {
           if (w.axisFlags.isXNumeric) {
-            x2 = (w.seriesData.seriesX[i][j] - w.globals.minX) / this.xRatio - barWidth / 2;
+            x2 = (w.seriesData.seriesX[realIndex][j] - w.globals.minX) / this.xRatio - barWidth / 2;
           }
           barXPosition = x2 + barWidth * /** @type {any} */
           this.visibleI;
           const srtx = (xDivision - barWidth * seriesLen) / 2;
-          if (
-            /** @type {Record<string,any>} */
-            (_i = (_h = w.config.series[i].data) == null ? void 0 : _h[j]) == null ? void 0 : _i.x
-          ) {
+          if (((_f = data[j]) == null ? void 0 : _f.x) != null) {
             const positions = this.detectOverlappingBars({
-              i,
+              i: realIndex,
               j,
               barXPosition,
               srtx,
@@ -21905,9 +22049,10 @@ class RangeBar extends Bar {
             xDivision
           }, params));
           barHeight = paths.barHeight;
+          barXPosition = paths.barXPosition;
         }
         const barGoalLine = this.barHelpers.drawGoalLine({
-          barXPosition: paths.barXPosition,
+          barXPosition,
           barYPosition,
           goalX: paths.goalX,
           goalY: paths.goalY,
@@ -21952,19 +22097,11 @@ class RangeBar extends Bar {
         });
       }
       if (w.globals.previousPaths.length > 0) {
-        const data = (
-          /** @type {Record<string,any>} */
-          w.config.series[i].data || []
-        );
-        const newKeys = [];
-        for (let j = 0; j < data.length; j++) {
-          newKeys.push(datumKey(w, realIndex, j));
-        }
         renderBarExitGhosts({
           w,
           elSeries,
           record: this._prevRecord(realIndex),
-          newKeys,
+          newKeys: this._keys(realIndex),
           isHorizontal: this.isHorizontal,
           speed: w.config.chart.animations.dynamicAnimation.speed
         });
@@ -22016,11 +22153,11 @@ class RangeBar extends Bar {
         );
         if (overlaps.indexOf(rangeName) > -1) {
           barHeight = initPositions.barHeight / overlaps.length;
-          barYPosition = barHeight * this.visibleI + yDivision * (100 - parseInt(this.barOptions.barHeight, 10)) / 100 / 2 + barHeight * (this.visibleI + overlaps.indexOf(rangeName)) + yDivision * rowIndex;
+          barYPosition += barHeight * overlaps.indexOf(rangeName);
         }
       }
     } else {
-      if (rowIndex > -1 && !w.labelData.timescaleLabels.length) {
+      if (rowIndex > -1 && !w.axisFlags.isXNumeric) {
         if (w.config.plotOptions.bar.rangeBarGroupRows) {
           barXPosition = srtx + xDivision * rowIndex;
         } else {
@@ -22034,7 +22171,7 @@ class RangeBar extends Bar {
         );
         if (overlaps.indexOf(rangeName) > -1) {
           barWidth = initPositions.barWidth / overlaps.length;
-          barXPosition = barWidth * this.visibleI + xDivision * (100 - parseInt(this.barOptions.barWidth, 10)) / 100 / 2 + barWidth * (this.visibleI + overlaps.indexOf(rangeName)) + xDivision * rowIndex;
+          barXPosition += barWidth * overlaps.indexOf(rangeName);
         }
       }
     }
@@ -22057,7 +22194,7 @@ class RangeBar extends Bar {
     var _a, _b;
     const w = this.w;
     const { i, j, realIndex, translationsIndex } = indexes;
-    const yRatio = this.yRatio[translationsIndex];
+    const yRatio = this.yRatio[translationsIndex] * (this.isReversed ? -1 : 1);
     const range = this.getRangeValue(realIndex, j);
     let y1 = Math.min(range.start, range.end);
     let y2 = Math.max(range.start, range.end);
@@ -22065,7 +22202,7 @@ class RangeBar extends Bar {
     ((_a = this.series[i]) == null ? void 0 : _a[j]) === "undefined" || /** @type {any} */
     ((_b = this.series[i]) == null ? void 0 : _b[j]) === null);
     if (!hasValue) {
-      y1 = zeroH;
+      y1 = y2 = zeroH;
     } else {
       y1 = zeroH - y1 / yRatio;
       y2 = zeroH - y2 / yRatio;
@@ -22126,6 +22263,30 @@ class RangeBar extends Bar {
       barXPosition
     };
   }
+  /**
+   * Timeline datums key by their own row, not by the j-th label: a row can
+   * hold several bars, so labels[j] names some other datum's row.
+   * @param {number} realIndex
+   * @returns {string[]}
+   */
+  _keys(realIndex) {
+    const c = (
+      /** @type {any} */
+      this._keyCache || (this._keyCache = {})
+    );
+    const data = (
+      /** @type {any} */
+      this.w.config.series[realIndex].data
+    );
+    return c[realIndex] || (c[realIndex] = uniquifyKeys(
+      (data || []).map(
+        (d, j) => {
+          var _a;
+          return "c:" + ((_a = d == null ? void 0 : d.x) != null ? _a : j);
+        }
+      )
+    ));
+  }
   /**
    * @param {number} val
    */
@@ -22152,8 +22313,9 @@ class RangeBar extends Bar {
   }) {
     const w = this.w;
     const { realIndex, j } = indexes;
-    const x1 = this.preventBarOverflow(zeroW + y1 / this.invertedYRatio);
-    const x2 = this.preventBarOverflow(zeroW + y2 / this.invertedYRatio);
+    const ratio = this.invertedYRatio * (this.isReversed ? -1 : 1);
+    const x1 = this.preventBarOverflow(zeroW + y1 / ratio);
+    const x2 = this.preventBarOverflow(zeroW + y2 / ratio);
     const range = this.getRangeValue(realIndex, j);
     const barWidth = Math.abs(x2 - x1);
     const paths = this.barHelpers.getBarpaths({
@@ -22400,26 +22562,33 @@ function drilldownById(w, id) {
   const list = dd && Array.isArray(dd.series) ? dd.series : [];
   return list.find((s) => s && s.id === id);
 }
-function toNode(w, d, i, paletteFromParent, parentKey, seenIds = null, opts = {}) {
+function segment(name, seen) {
+  var _a;
+  const n = String(name).replace(/\//g, "%2F");
+  const o = ((_a = seen.get(n)) != null ? _a : -1) + 1;
+  seen.set(n, o);
+  return `${o}:${n}`;
+}
+function toNode(w, d, i, paletteFromParent, parentKey, seenIds = null, opts = {}, seen = /* @__PURE__ */ new Map()) {
   var _a, _b, _c;
   const isObj = d && typeof d === "object";
   const name = isObj ? (_b = (_a = d.x) != null ? _a : d.name) != null ? _b : "" : "";
-  const value = isObj ? Number((_c = d.y) != null ? _c : d.value) : Number(d);
+  const raw = isObj ? (_c = d.y) != null ? _c : d.value : d;
+  const value = raw == null || raw === "" ? NaN : Number(raw);
   const node = {
     name: String(name),
     value: isNaN(value) ? null : value,
     color: isObj && d.color ? d.color : void 0,
-    // Identity across data updates: the path of names (indexed so same-named
-    // siblings stay distinct). Update animations morph matched keys in place.
-    _key: `${parentKey}/${i}:${name}`
+    _key: `${parentKey}/${segment(name, seen)}`
   };
   if (paletteFromParent && !node.color) {
     node.color = paletteFromParent[i % paletteFromParent.length];
   }
   if (opts.keepDatum) node._datum = d;
+  const kids = /* @__PURE__ */ new Map();
   if (isObj && Array.isArray(d.children) && d.children.length) {
     node.children = d.children.map(
-      (c, j) => toNode(w, c, j, null, node._key, seenIds, opts)
+      (c, j) => toNode(w, c, j, null, node._key, seenIds, opts, kids)
     );
   } else if (isObj && d.drilldown != null && opts.expandDrilldown !== false) {
     const visited = seenIds || /* @__PURE__ */ new Set();
@@ -22430,7 +22599,7 @@ function toNode(w, d, i, paletteFromParent, parentKey, seenIds = null, opts = {}
         nextSeen.add(d.drilldown);
         const palette = Array.isArray(dd.colors) ? dd.colors : null;
         node.children = dd.data.map(
-          (c, j) => toNode(w, c, j, palette, node._key, nextSeen, opts)
+          (c, j) => toNode(w, c, j, palette, node._key, nextSeen, opts, kids)
         );
       }
     }
@@ -22443,10 +22612,12 @@ function buildSeriesRoots(w, series, opts = {}) {
     series || w.config.series
   );
   if (!Array.isArray(cfgSeries)) return [];
+  const seen = /* @__PURE__ */ new Map();
   return cfgSeries.map((s, i) => {
     var _a, _b;
     const data = s && Array.isArray(s.data) ? s.data : [];
-    const key = `${i}:${(_a = s == null ? void 0 : s.name) != null ? _a : ""}`;
+    const key = segment((_a = s == null ? void 0 : s.name) != null ? _a : "", seen);
+    const kids = /* @__PURE__ */ new Map();
     const root = {
       name: String((_b = s == null ? void 0 : s.name) != null ? _b : ""),
       value: null,
@@ -22454,7 +22625,7 @@ function buildSeriesRoots(w, series, opts = {}) {
       _key: key,
       _seriesIndex: i,
       children: data.map(
-        (d, j) => toNode(w, d, j, null, key, null, opts)
+        (d, j) => toNode(w, d, j, null, key, null, opts, kids)
       )
     };
     return root;
@@ -22620,7 +22791,7 @@ function renderBreadcrumb(w, opts) {
     text.setAttribute("class", "apexcharts-breadcrumb-label");
     text.textContent = String(label);
     btn.appendChild(text);
-    btn.addEventListener("click", () => opts.onNavigate(i, crumb));
+    btn.addEventListener("click", (e) => opts.onNavigate(i, crumb, e));
     nav.appendChild(btn);
   });
   elWrap.appendChild(nav);
@@ -22728,7 +22899,7 @@ class TreemapChart {
       if (w.config.chart.dropShadow.enabled) {
         const shadow = w.config.chart.dropShadow;
         const filters = new Filters(this.w);
-        filters.dropShadow(ret, shadow, i);
+        filters.dropShadow(elSeries, shadow, i);
       }
       const elDataLabelWrap = graphics.group({
         class: "apexcharts-data-labels"
@@ -22822,6 +22993,7 @@ class TreemapChart {
         });
         elRect.node.classList.add("apexcharts-treemap-rect");
         elRect.node.setAttribute("data:key", morphKey(leaf._key));
+        let tileTween = null;
         let fromRect = {
           x: x1 + (x2 - x1) / 2,
           y: y1 + (y2 - y1) / 2,
@@ -22847,7 +23019,7 @@ class TreemapChart {
           if (w.globals.resized) {
             w.globals.animationEnded = true;
           } else {
-            this.animateTreemap(
+            tileTween = this.animateTreemap(
               elRect,
               fromRect,
               toRect,
@@ -22858,7 +23030,6 @@ class TreemapChart {
             );
           }
         }
-        let tileTween = null;
         let labelFrom = null;
         let prevLook = null;
         if (w.globals.dataChanged) {
@@ -23240,7 +23411,7 @@ class TreemapChart {
     const elGroup = graphics.group({
       class: "apexcharts-treemap-parent",
       "data:depth": depth,
-      "data:name": Utils.escapeString(node.name)
+      "data:name": node.name
     });
     const key = morphKey(node._key);
     const morphFrom = this._morphKeyed() ? this.ctx.morphTypeChange.getInitialPathForKey(key) : null;
@@ -23349,7 +23520,7 @@ class TreemapChart {
       if (typeof header.formatter === "function") {
         text = String(
           header.formatter(node.name, {
-            value: node.value,
+            value: node._area,
             depth,
             seriesIndex: i,
             node,
@@ -23357,7 +23528,7 @@ class TreemapChart {
           })
         );
       } else if (header.showValue) {
-        text = `${text}  ${this._formatValue(node.value)}`;
+        text = `${text}  ${this._formatValue(node._area, node._si)}`;
       }
       headerText = text;
       const offsetX = Number(header.offsetX) || 0;
@@ -23368,7 +23539,9 @@ class TreemapChart {
       const clipped = graphics.getTextBasedOnMaxWidth({
         text,
         maxWidth,
-        fontSize
+        fontSize,
+        fontFamily: chrome.headerFontFamily,
+        fontWeight: chrome.headerFontWeight
       });
       if (clipped) {
         let tx = x1 + pad + offsetX;
@@ -23443,7 +23616,7 @@ class TreemapChart {
     const total = this._drawnTotal();
     const pct = total > 0 ? (node._area / total * 100).toFixed(1) : "0";
     const n = this._countLeaves(node);
-    const lead = visibleText && String(visibleText).trim() ? String(visibleText).replace(/\s+/g, " ").trim() : `${node.name}, ${this._formatValue(node._area)}`;
+    const lead = visibleText && String(visibleText).trim() ? String(visibleText).replace(/\s+/g, " ").trim() : `${node.name}, ${this._formatValue(node._area, node._si)}`;
     return `${lead}, ${n} ${n === 1 ? "item" : "items"}, ${pct}% of total`;
   }
   /**
@@ -23462,15 +23635,18 @@ class TreemapChart {
    * @param {string} [visibleText] the header's rendered text, unclipped
    */
   _makeParentAccessible(el, node, chrome, elRect, visibleText) {
+    const a11y = this.w.config.chart.accessibility;
     if (!el || !el.setAttribute) return;
-    if (!this._zoomEnabled()) return;
+    if (!a11y.enabled || !a11y.keyboard.enabled || !this._zoomEnabled()) return;
+    const open = this.w.globals.treemapFocusKey === node._key;
+    el.tmKey = node._key;
     el.setAttribute("role", "button");
     el.setAttribute("tabindex", "0");
     el.setAttribute(
       "aria-label",
-      `${this._parentLabel(node, visibleText)}. Zoom in`
+      `${this._parentLabel(node, visibleText)}. Zoom ${open ? "out" : "in"}`
     );
-    el.setAttribute("aria-expanded", "false");
+    el.setAttribute("aria-expanded", open);
     if (!Environment.isBrowser() || !el.addEventListener) return;
     el.addEventListener("focus", () => {
       elRect.node.setAttribute("stroke", chrome.hoverColor);
@@ -23537,15 +23713,17 @@ class TreemapChart {
    * @returns {boolean}
    */
   _zoomEnabled() {
+    var _a;
     const w = this.w;
     const z = w.config.plotOptions.treemap.zoom;
     if (!z || !z.enabled || !this.showParents) return false;
     const dd = w.config.drilldown;
-    if (this.ctx.drilldown && dd && dd.enabled && Array.isArray(dd.series) && dd.series.length) {
-      if (!this._warnedZoomConflict) {
-        this._warnedZoomConflict = true;
+    const d = this.ctx.drilldown;
+    if (d && dd && dd.enabled && (((_a = dd.series) == null ? void 0 : _a.length) || dd.onDrillDown)) {
+      if (!d.zoomWarned) {
+        d.zoomWarned = true;
         console.warn(
-          "ApexCharts treemap: `plotOptions.treemap.zoom` and the drilldown feature both navigate the hierarchy, so zoom is ignored here. Drop `drilldown.series` to zoom a nested treemap instead."
+          "ApexCharts treemap: zoom is ignored while drilldown is active (plotOptions.treemap.zoom vs drilldown series or onDrillDown)."
         );
       }
       return false;
@@ -23555,8 +23733,8 @@ class TreemapChart {
   /**
    * The focused branch for this render, looked up by the key stashed on the
    * last click. Keys are rebuilt identically from the same data, so the focus
-   * survives a re-render; a key that no longer resolves (the data changed under
-   * it) simply falls back to the whole tree.
+   * survives a re-render; a key that no longer resolves, or a branch left with
+   * nothing to draw (the data changed under it), falls back to the whole tree.
    * @param {any[]} drawn
    * @returns {any}
    */
@@ -23573,7 +23751,11 @@ class TreemapChart {
       if (node.children) node.children.forEach(walk);
     };
     drawn.forEach(walk);
-    return found && found.children && found.children.length ? found : null;
+    if (found && found.children && found.children.length && this._subtreeArea(found) > 0) {
+      return found;
+    }
+    this.w.globals.treemapFocusKey = null;
+    return null;
   }
   /**
    * @param {any} node
@@ -23586,28 +23768,7 @@ class TreemapChart {
     const w = this.w;
     if (!node || !node.children || !node.children.length) return;
     const next = w.globals.treemapFocusKey === node._key ? null : node._key;
-    const done = this._refocus(next);
-    if (!restoreFocus || !done || typeof done.then !== "function") return;
-    done.then(() => {
-      if (!Environment.isBrowser()) return;
-      const crumb = (
-        /** @type {any} */
-        w.dom.baseEl.querySelector(
-          ".apexcharts-breadcrumb .apexcharts-breadcrumb-item"
-        )
-      );
-      if (crumb && crumb.focus) {
-        crumb.focus();
-        return;
-      }
-      const header = (
-        /** @type {any} */
-        w.dom.baseEl.querySelector(
-          ".apexcharts-treemap-parent-header[tabindex]"
-        )
-      );
-      if (header && header.focus) header.focus();
-    });
+    this._refocus(next, restoreFocus);
   }
   /**
    * Re-render focused on another branch (null: the whole tree).
@@ -23618,22 +23779,34 @@ class TreemapChart {
    * left, which replayed the mount animation (every tile growing from
    * nothing) or snapped, while the containers, headers and labels jumped.
    * @param {string | null} next
-   * @returns {any} the update's promise
+   * @param {boolean} [restoreFocus] see _zoomTo
    */
-  _refocus(next) {
-    var _a;
+  _refocus(next, restoreFocus) {
     const w = this.w;
     const gl = w.globals;
+    const from = gl.treemapFocusKey;
     const anim = w.config.chart.animations;
     const animate = !!(anim.enabled && anim.dynamicAnimation.enabled);
-    gl.treemapZoom = animate && Environment.isBrowser() ? { from: (_a = gl.treemapFocusKey) != null ? _a : null, to: next } : null;
+    gl.treemapZoom = animate && Environment.isBrowser() ? { from: from != null ? from : null, to: next } : null;
     gl.treemapFocusKey = next;
     this._hideParentTooltip();
     gl.shouldAnimate = animate;
     gl.resized = true;
     gl.dataChanged = true;
     if (gl.treemapZoom) this.ctx.series.getPreviousPaths();
-    return this.ctx.update();
+    const done = this.ctx.update();
+    if (restoreFocus) {
+      done.then(() => {
+        const b = w.dom.baseEl;
+        const heads = (
+          /** @type {any[]} */
+          Array.from(
+            b.querySelectorAll(".apexcharts-treemap-parent-header[tabindex]")
+          )
+        );
+        (b.querySelector(".apexcharts-breadcrumb-item") || heads.find((h) => h.tmKey === from) || heads[0] || b).focus();
+      });
+    }
   }
   /**
    * A zoom reframes one tree, so it moves like a camera: one map takes the
@@ -23945,8 +24118,9 @@ class TreemapChart {
       crumbs: [{ label: "All", data: null }].concat(
         chain.map((n) => ({ label: n.name, data: n }))
       ),
-      onNavigate: (_i, crumb) => {
-        this._refocus(crumb.data ? crumb.data._key : null);
+      // A keyboard click (detail 0) keeps focus in the chart.
+      onNavigate: (_i, crumb, e) => {
+        this._refocus(crumb.data ? crumb.data._key : null, !e.detail);
       }
     });
     if (!nav) return;
@@ -23995,7 +24169,7 @@ class TreemapChart {
     const t = this._tip();
     if (!t) return;
     const total = this._drawnTotal();
-    const parentVal = node._parent ? node._parent._area : total;
+    const parentVal = node._parent ? this._subtreeArea(node._parent) : total;
     const pctTotal = total > 0 ? (node._area / total * 100).toFixed(1) : "0.0";
     const pctParent = parentVal > 0 ? (node._area / parentVal * 100).toFixed(1) : pctTotal;
     const cfg = this.w.config.plotOptions.treemap.parents;
@@ -24016,10 +24190,9 @@ class TreemapChart {
     } else {
       const marker = this._parentChrome(node.depth || 0).headerBg;
       const groupBg = w.config.tooltip.fillSeriesColor ? `background-color:${marker};` : "";
-      html = `<div class="apexcharts-tooltip-series-group apexcharts-active" style="display:flex;${groupBg}"><div class="apexcharts-tooltip-text"><div class="apexcharts-tooltip-y-group"><span class="apexcharts-tooltip-text-y-label">${Utils.escapeString(
-        node.name
-      )}: </span><span class="apexcharts-tooltip-text-y-value">${this._formatValue(
-        node._area
+      html = `<div class="apexcharts-tooltip-series-group apexcharts-active" style="display:flex;${groupBg}"><div class="apexcharts-tooltip-text"><div class="apexcharts-tooltip-y-group"><span class="apexcharts-tooltip-text-y-label">${String(node.name).replace(/&/g, "&amp;").replace(/</g, "&lt;")}: </span><span class="apexcharts-tooltip-text-y-value">${this._formatValue(
+        node._area,
+        node._si
       )}</span></div><div class="apexcharts-tooltip-y-group"><span class="apexcharts-tooltip-text-y-label">${leafCount} items, </span><span class="apexcharts-tooltip-text-y-value">${pctParent}% of parent, ${pctTotal}% of total</span></div></div></div>`;
     }
     t.innerHTML = html;
@@ -24115,17 +24288,21 @@ class TreemapChart {
   }
   /**
    * Format an aggregate the way the chart formats its own y values, so a
-   * parent's total reads like the tiles it contains.
+   * parent's total reads like the tiles it contains. A branch is no data
+   * point, so dataPointIndex is -1.
    * @param {number} v
+   * @param {number} [si] the branch's series index
    * @returns {string}
    */
-  _formatValue(v) {
+  _formatValue(v, si) {
     var _a, _b, _c, _d, _e;
     const w = this.w;
     const fmt = ((_b = (_a = w.config.tooltip) == null ? void 0 : _a.y) == null ? void 0 : _b.formatter) || ((_e = (_d = (_c = w.config.yaxis) == null ? void 0 : _c[0]) == null ? void 0 : _d.labels) == null ? void 0 : _e.formatter);
     if (typeof fmt === "function") {
       try {
-        return String(fmt(v, { seriesIndex: 0, dataPointIndex: 0, w }));
+        return String(
+          fmt(v, { seriesIndex: si || 0, dataPointIndex: -1, w })
+        );
       } catch (_) {
       }
     }
@@ -24206,7 +24383,7 @@ class TreemapChart {
    */
   rotateToFitLabel(elText, fontSize, text, x1, y1, x2, y2) {
     const graphics = new Graphics(this.w);
-    const textRect = graphics.getTextRects(text, String(fontSize));
+    const textRect = this._labelRect(graphics, text, fontSize);
     if (textRect.width + this.w.config.stroke.width + 5 > x2 - x1 && textRect.width <= y2 - y1) {
       const labelRotatingCenter = graphics.rotateAroundCenter(elText.node);
       elText.node.setAttribute(
@@ -24215,6 +24392,24 @@ class TreemapChart {
       );
     }
   }
+  /**
+   * A tile label's box, measured at the family and weight it is drawn at
+   * (bold is wider than the default regular).
+   * @param {Graphics} graphics
+   * @param {string} text
+   * @param {string | number} fontSize
+   */
+  _labelRect(graphics, text, fontSize) {
+    const st = this.w.config.dataLabels.style;
+    return graphics.getTextRects(
+      text,
+      String(fontSize),
+      st.fontFamily,
+      "",
+      true,
+      st.fontWeight
+    );
+  }
   // This is an alternative label formatting method that uses a
   // consistent font size, and trims the edge of long labels
   /**
@@ -24227,13 +24422,13 @@ class TreemapChart {
    */
   truncateLabels(text, fontSize, x1, y1, x2, y2) {
     const graphics = new Graphics(this.w);
-    const textRect = graphics.getTextRects(text, String(fontSize));
+    const textRect = this._labelRect(graphics, text, fontSize);
     const labelMaxWidth = textRect.width + this.w.config.stroke.width + 5 > x2 - x1 && y2 - y1 > x2 - x1 ? y2 - y1 : x2 - x1;
-    const truncatedText = graphics.getTextBasedOnMaxWidth({
+    const truncatedText = graphics.getTextBasedOnMaxWidth(__spreadProps(__spreadValues({}, this.w.config.dataLabels.style), {
       text,
       maxWidth: labelMaxWidth,
       fontSize
-    });
+    }));
     if (text.length !== truncatedText.length && labelMaxWidth / fontSize < 5) {
       return "";
     } else {