apexcharts 8.2.0 → 8.3.1

package/dist/dumbbell.esm.js

@@ -30,7 +30,7 @@ var __objRest = (source, exclude) => {
   return target;
 };
 /*!
- * ApexCharts v8.2.0
+ * ApexCharts v8.3.1
  * (c) 2018-2026 ApexCharts
  */
 import * as _core from "apexcharts/core";
@@ -223,181 +223,6 @@ const resolveDataLabelOffset = (value, w, seriesIndex, dataPointIndex) => {
   });
   return Number.isFinite(resolved) ? resolved : 0;
 };
-const Animations = _core.__apex_Animations;
-const computeStagger = _core.__apex_Animations_computeStagger;
-const BrowserAPIs = _core.__apex_BrowserAPIs_BrowserAPIs;
-const Environment = _core.__apex_Environment_Environment;
-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((k, i) => {
-    if (!oldIndex.has(k)) oldIndex.set(k, 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((k, i) => {
-    const oi = oldIndex.has(k) && !usedOld.has(oldIndex.get(k)) ? oldIndex.get(k) : -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((k) => {
-    const count = seen.get(k) || 0;
-    seen.set(k, count + 1);
-    return count === 0 ? k : `${k}#${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 firstMove(d) {
-  const m = /^M\s*([+-]?[\d.eE]+)[\s,]+([+-]?[\d.eE]+)/.exec(d || "");
-  if (!m) return null;
-  const x = parseFloat(m[1]);
-  const y = parseFloat(m[2]);
-  return isFinite(x) && isFinite(y) ? { x, 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
@@ -433,7 +258,8 @@ class BarDataLabels {
       barXPosition,
       barYPosition,
       visibleSeries,
-      hl
+      hl,
+      noLabel
     } = opts;
     const w = this.w;
     const graphics = new Graphics(this.barCtx.w);
@@ -547,7 +373,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,
@@ -633,8 +459,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) {
@@ -643,6 +469,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;
@@ -663,7 +504,6 @@ class BarDataLabels {
     var _a;
     const w = this.w;
     let {
-      i,
       j,
       realIndex,
       y,
@@ -673,7 +513,6 @@ class BarDataLabels {
       textRects,
       dataLabelsX,
       dataLabelsY,
-      dataLabelsConfig,
       barDataLabelsConfig,
       barTotalDataLabelsConfig,
       strokeWidth,
@@ -687,7 +526,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;
@@ -708,7 +547,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);
@@ -782,16 +621,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;
@@ -821,7 +655,6 @@ class BarDataLabels {
     const w = this.w;
     let {
       x,
-      i,
       j,
       realIndex,
       bcy,
@@ -838,7 +671,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);
@@ -855,7 +688,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 = x;
     if (this.barCtx.isReversed) {
       newX = x + (valIsNegative ? -barWidth : barWidth);
@@ -890,10 +723,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) => {
@@ -906,11 +743,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";
@@ -979,8 +812,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;
@@ -993,10 +827,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));
@@ -1014,29 +845,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
@@ -1052,14 +866,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({
@@ -1111,7 +925,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",
@@ -1127,6 +941,7 @@ class BarDataLabels {
 }
 const Series = _core.__apex_Series;
 const Fill = _core.__apex_Fill;
+const CoreUtils = _core.__apex_CoreUtils;
 function isHistogramOverlay(w) {
   var _a, _b, _c, _d, _e, _f, _g;
   if (((_b = (_a = w == null ? void 0 : w.config) == null ? void 0 : _a.chart) == null ? void 0 : _b.requestedType) !== "histogram") return false;
@@ -1143,9 +958,11 @@ class Helpers {
   }
   /**
    * @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;
@@ -1166,6 +983,8 @@ class Helpers {
         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((x, j) => x !== labels[j])) ? new Map(labels.map((x, r) => [x, r])) : null;
     this.arrBorderRadius = this.createBorderRadiusArr(w.seriesData.series);
     if (Utils.isSafari()) {
       this.arrBorderRadius = this.arrBorderRadius.map(
@@ -1230,15 +1049,19 @@ class Helpers {
    * 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
@@ -1279,6 +1102,15 @@ class Helpers {
     }
     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
    */
@@ -1401,7 +1233,7 @@ class Helpers {
       });
     }
     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) {
@@ -1554,11 +1386,10 @@ class Helpers {
    * @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")
@@ -1714,7 +1545,7 @@ class Helpers {
     j,
     w
   }) {
-    var _a, _b;
+    var _a, _b, _c;
     const r = this.barRect({
       a: barXPosition,
       len: barWidth,
@@ -1745,7 +1576,7 @@ class Helpers {
       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,
@@ -1935,7 +1766,7 @@ class Helpers {
     j,
     w
   }) {
-    var _a, _b;
+    var _a, _b, _c;
     const graphics = new Graphics(this.barCtx.w);
     const r = this.barRect({
       a: barYPosition,
@@ -1971,7 +1802,7 @@ class Helpers {
       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]);
+      _ctx.xArrjVal.push((_c = this.barCtx.series[i][j]) != null ? _c : null);
     }
     return {
       pathTo,
@@ -2016,6 +1847,9 @@ class Helpers {
     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
@@ -2270,11 +2104,11 @@ class Helpers {
     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];
+      const val = w.seriesData.series[_si][j];
       if (val) {
         nonZeroColumns++;
       }
-      if (_si < i && val === 0) {
+      if (_si < i && !val) {
         zeroEncounters++;
       }
     });
@@ -2311,8 +2145,187 @@ class Helpers {
     return { groupIndex, columnGroupIndex };
   }
 }
-const CoreUtils = _core.__apex_CoreUtils;
 const Filters = _core.__apex_Filters;
+const Animations = _core.__apex_Animations;
+const computeStagger = _core.__apex_Animations_computeStagger;
+const BrowserAPIs = _core.__apex_BrowserAPIs_BrowserAPIs;
+const Environment = _core.__apex_Environment_Environment;
+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((k, i) => {
+    if (!oldIndex.has(k)) oldIndex.set(k, 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((k, i) => {
+    const oi = oldIndex.has(k) && !usedOld.has(oldIndex.get(k)) ? oldIndex.get(k) : -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((k) => {
+    const count = seen.get(k) || 0;
+    seen.set(k, count + 1);
+    return count === 0 ? k : `${k}#${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 firstMove(d) {
+  const m = /^M\s*([+-]?[\d.eE]+)[\s,]+([+-]?[\d.eE]+)/.exec(d || "");
+  if (!m) return null;
+  const x = parseFloat(m[1]);
+  const y = parseFloat(m[2]);
+  return isFinite(x) && isFinite(y) ? { x, 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 AxisMapping {
   /**
    * Pixels per data-unit on the x-axis. Derived from `minX..maxX` so it is the
@@ -2343,22 +2356,55 @@ class AxisMapping {
     return w.globals.minX + px * AxisMapping.xRatio(w);
   }
   /**
-   * Client (screen) x -> pixels from the plot origin. The origin is the svg
-   * element's left edge plus `translateX`, never the `.apexcharts-grid` box
-   * (fact 2 above), so the result does not depend on what the grid happens to
-   * render. `svgWidth` is the unscaled width the svg was drawn at, so the ratio
-   * against the measured one is the CSS zoom of any container the chart sits in.
+   * The plot area on screen, in client px: its corner is where the plot's
+   * group is translated to (translateX, translateY into the svg), and it is
+   * gridWidth by gridHeight. The one screen-to-plot measurement: the tooltip,
+   * zoom, selection and every other pointer reader map through it, so x and y
+   * cannot disagree under CSS zoom.
+   *
+   * Never the `.apexcharts-grid` group's box: a group measures to the union
+   * of what it happens to draw (fact 2 above). The plot's outline starts a
+   * pixel down (`Grid.drawGridArea`), so unless gridlines or row bands reach
+   * the top edge the box starts a pixel below the plot, and on a numeric-x bar
+   * chart the horizontal gridlines run `barPadForNumericAxis` out past both
+   * sides.
+   *
+   * `zoom` is the CSS zoom of any container the chart sits in (screen px per
+   * plot px): the measured svg width over `svgWidth`, the unscaled width it
+   * was drawn at. A distance measured on screen from this corner is divided
+   * by it to land in plot px, the space the series are laid out and painted in.
+   * With nothing mounted to measure, screen px are taken as svg px.
+   *
+   * @param {import('../types/internal').ChartStateW} w
+   * @returns {{ left: number, top: number, width: number, height: number, zoom: number }}
+   */
+  static plotRect(w) {
+    var _a, _b, _c;
+    const svg = ((_a = w.dom.Paper) == null ? void 0 : _a.node) || ((_b = w.dom.baseEl) == null ? void 0 : _b.querySelector(".apexcharts-svg"));
+    const box = ((_c = svg || w.dom.elWrap) == null ? void 0 : _c.getBoundingClientRect()) || {
+      left: 0,
+      top: 0,
+      width: 0
+    };
+    const zoom = (svg && w.globals.svgWidth ? box.width / w.globals.svgWidth : 1) || 1;
+    return {
+      left: box.left + w.layout.translateX * zoom,
+      top: box.top + w.layout.translateY * zoom,
+      width: w.layout.gridWidth * zoom,
+      height: w.layout.gridHeight * zoom,
+      zoom
+    };
+  }
+  /**
+   * Client (screen) x -> pixels from the plot origin of {@link plotRect}.
+   * Pass the rect when the caller has already measured it.
    * @param {import('../types/internal').ChartStateW} w
    * @param {number} screenX
+   * @param {{ left: number, zoom: number }} [plot]
    * @returns {number}
    */
-  static screenXToPlotPx(w, screenX) {
-    const baseEl = w.dom.baseEl;
-    const svg = baseEl && baseEl.querySelector(".apexcharts-svg");
-    if (!svg) return screenX - w.layout.translateX;
-    const svgRect = svg.getBoundingClientRect();
-    const zoom = w.globals.svgWidth ? svgRect.width / w.globals.svgWidth : 1;
-    return (screenX - svgRect.left) / (zoom || 1) - w.layout.translateX;
+  static screenXToPlotPx(w, screenX, plot = AxisMapping.plotRect(w)) {
+    return (screenX - plot.left) / plot.zoom;
   }
 }
 function seriesEmitter(ctx, graphics) {
@@ -2431,15 +2477,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
@@ -2456,7 +2504,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"
     });
@@ -2488,7 +2536,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]);
       }
@@ -2566,7 +2613,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
@@ -2648,6 +2697,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,
@@ -2658,15 +2708,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
         });
@@ -2675,7 +2721,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,
@@ -2707,7 +2753,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;
@@ -2781,7 +2829,8 @@ class Bar {
         barXPosition,
         barYPosition,
         visibleSeries,
-        hl: hl == null ? void 0 : hl.label
+        hl: hl == null ? void 0 : hl.label,
+        noLabel
       })
     );
     if (delayMs > 0) {
@@ -2797,19 +2846,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";
@@ -2832,7 +2880,7 @@ class Bar {
           pathTo,
           stroke: lineFill,
           strokeWidth,
-          strokeLineCap: w.config.stroke.lineCap,
+          strokeLinecap: w.config.stroke.lineCap,
           fill: pathFill,
           pathToInterp,
           animationDelay: delay,
@@ -2884,12 +2932,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,
@@ -2965,7 +3013,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;
       }
@@ -3104,7 +3155,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;
         }
@@ -3168,15 +3219,16 @@ class Bar {
   /** @param {{x: any, barWidth: any, realIndex: any, j: any}} opts */
   getBarXForNumericXAxis({ x, 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])) {
-      x = AxisMapping.dataXToPx(w, w.seriesData.seriesX[sxI][j]) - barWidth * this.seriesLen / 2;
+      x = AxisMapping.dataXToPx(w, w.seriesData.seriesX[sxI][j]) - barWidth * (overlay ? 1 : this.seriesLen) / 2;
     }
     return {
-      barXPosition: x + (isHistogramOverlay(w) ? 0 : barWidth * this.visibleI),
+      barXPosition: x + (overlay ? 0 : barWidth * this.visibleI),
       x
     };
   }
@@ -3197,7 +3249,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
@@ -3253,7 +3318,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;
@@ -3261,20 +3326,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((k) => !now.has(k));
       } 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;
@@ -3334,7 +3393,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 {
@@ -3477,11 +3536,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;
   }
   /**
@@ -3508,7 +3566,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} */
@@ -3539,7 +3597,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]),
@@ -3609,7 +3666,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
@@ -3683,6 +3742,7 @@ class BarStacked extends Bar {
           series,
           barHeight,
           barWidth,
+          barXPosition: paths.barXPosition,
           elDataLabelsWrap,
           elGoalsMarkers,
           type: "bar",
@@ -3700,7 +3760,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;
   }
   /**
@@ -3721,15 +3781,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",
@@ -3805,7 +3871,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;
@@ -3813,36 +3879,21 @@ class BarStacked extends Bar {
     const j = indexes.j;
     const realIndex = indexes.realIndex;
     const translationsIndex = indexes.translationsIndex;
-    let prevBarW = 0;
-    for (let k = 0; k < this.groupCtx.prevXF.length; k++) {
-      prevBarW = prevBarW + this.groupCtx.prevXF[k][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
-    ) {
-      x = 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 {
-      x = 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;
     }
+    x = barXPosition + v / this.invertedYRatio * (this.isReversed ? -1 : 1);
     const paths = this.barHelpers.getBarpaths({
       barYPosition,
       barHeight,
@@ -3856,6 +3907,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,
@@ -3893,13 +3945,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;
@@ -3914,11 +3970,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(
@@ -3931,25 +3985,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,
@@ -3957,17 +4002,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,
@@ -3986,13 +4021,32 @@ class BarStacked extends Bar {
         zeroH,
         realIndex,
         j,
-        0
+        translationsIndex
       ),
       barXPosition,
       x: w.axisFlags.isXNumeric ? x : x + 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
+    ]);
+  }
 }
 class RangeBar extends Bar {
   /**
@@ -4000,14 +4054,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"
     });
@@ -4029,6 +4083,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,
@@ -4038,10 +4095,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;
       x = initX;
       const elDataLabelsWrap = graphics.group({
@@ -4051,10 +4106,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
@@ -4066,20 +4127,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,
@@ -4102,17 +4159,14 @@ class RangeBar extends Bar {
           barWidth = paths.barWidth;
         } else {
           if (w.axisFlags.isXNumeric) {
-            x = (w.seriesData.seriesX[i][j] - w.globals.minX) / this.xRatio - barWidth / 2;
+            x = (w.seriesData.seriesX[realIndex][j] - w.globals.minX) / this.xRatio - barWidth / 2;
           }
           barXPosition = x + 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,
@@ -4131,9 +4185,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,
@@ -4178,19 +4233,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
         });
@@ -4242,11 +4289,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 {
@@ -4260,7 +4307,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);
         }
       }
     }
@@ -4283,7 +4330,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);
@@ -4291,7 +4338,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;
@@ -4352,6 +4399,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
    */
@@ -4378,8 +4449,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({