apexcharts 8.3.0 → 8.4.0

package/dist/waterfall.esm.js

@@ -30,7 +30,7 @@ var __objRest = (source, exclude) => {
   return target;
 };
 /*!
- * ApexCharts v8.3.0
+ * ApexCharts v8.4.0
  * (c) 2018-2026 ApexCharts
  */
 import * as _core from "apexcharts/core";
@@ -158,6 +158,14 @@ function stashSeries(ser, gl) {
     return __spreadProps(__spreadValues({}, rest), { data: Array.isArray(data) ? data.slice() : data });
   });
 }
+function withX(data, categories) {
+  return data.map(
+    (d, j) => d !== null && typeof d === "object" ? d : {
+      x: categories && categories[j] !== void 0 ? categories[j] : j + 1,
+      y: d
+    }
+  );
+}
 function readDatum(d, j, categories) {
   const fallbackX = categories && categories[j] !== void 0 ? categories[j] : j + 1;
   if (d == null) {
@@ -205,8 +213,6 @@ function fillFor(datum, kind, colors) {
 function accumulate(data, categories, colors) {
   const rows = [];
   const values = [];
-  const cumulative = [];
-  const kinds = [];
   let running = 0;
   let cut = 0;
   for (let j = 0; j < data.length; j++) {
@@ -228,8 +234,6 @@ function accumulate(data, categories, colors) {
       if (delta === null || !isFinite(delta)) {
         rows.push(__spreadProps(__spreadValues({}, rest), { x, y: null }));
         values.push(null);
-        cumulative.push(running);
-        kinds.push(null);
         continue;
       }
       start = running;
@@ -243,10 +247,8 @@ function accumulate(data, categories, colors) {
       y: [start, end]
     }), fill ? { fillColor: fill } : {}));
     values.push(end - start);
-    cumulative.push(running);
-    kinds.push(kind);
   }
-  return { data: rows, values, cumulative, kinds };
+  return { data: rows, values };
 }
 function waterfallTransform(ser, w) {
   var _a, _b, _c;
@@ -261,15 +263,12 @@ function waterfallTransform(ser, w) {
   const categories = (_c = cnf.xaxis) == null ? void 0 : _c.categories;
   const collapsed = collapsedIndices(gl);
   const values = [];
-  const cumulative = [];
-  const kinds = [];
   const out = raw.map((s, i) => {
     const data = Array.isArray(s == null ? void 0 : s.data) ? s.data : [];
-    if (collapsed.indexOf(i) !== -1) {
-      values[i] = [];
-      cumulative[i] = [];
-      kinds[i] = [];
-      return __spreadProps(__spreadValues({}, s), { data: [] });
+    values[i] = [];
+    if (collapsed.indexOf(i) !== -1) return __spreadProps(__spreadValues({}, s), { data: [] });
+    if ((s == null ? void 0 : s.type) && s.type !== "waterfall" && s.type !== "rangeBar") {
+      return Array.isArray(s.data) ? __spreadProps(__spreadValues({}, s), { data: withX(s.data, categories) }) : s;
     }
     if (isPrecomputed(data)) {
       values[i] = data.map((d) => {
@@ -279,24 +278,14 @@ function waterfallTransform(ser, w) {
         const hi = Utils.parseNumber(y[1]);
         return lo === null || hi === null ? null : hi - lo;
       });
-      cumulative[i] = data.map((d) => {
-        const y = Array.isArray(d) ? d[1] : d && typeof d === "object" ? d.y : d;
-        const hi = Array.isArray(y) ? Utils.parseNumber(y[1]) : null;
-        return hi === null ? 0 : hi;
-      });
-      kinds[i] = data.map(() => null);
       return s;
     }
     const acc = accumulate(data, categories, colors);
     values[i] = acc.values;
-    cumulative[i] = acc.cumulative;
-    kinds[i] = acc.kinds;
     return __spreadProps(__spreadValues({}, s), { data: acc.data });
   });
   w.waterfallData = {
     values,
-    cumulative,
-    kinds,
     // A non-null sink is what tells RangeBar to record the px box it drew each
     // column in, which the connector layer joins up. Fresh every parse.
     geometry: []
@@ -453,7 +442,11 @@ class BarDataLabels {
         dataLabelsConfig.style.fontWeight
       );
     }
+    const drawTotal = w.config.chart.stacked && barTotalDataLabelsConfig.enabled && this.hlt !== false && this.drawsStackedTotal(realIndex);
+    const totalText = drawTotal ? this.getStackedTotalDataLabel({ realIndex, j }) : void 0;
     const params = {
+      drawTotal,
+      totalText,
       x: (_a = hl == null ? void 0 : hl.x) != null ? _a : x,
       y: (_b = hl == null ? void 0 : hl.y) != null ? _b : y,
       neg: hl && hl.val != null ? hl.val < 0 : void 0,
@@ -499,7 +492,7 @@ class BarDataLabels {
       textRects,
       dataLabelsConfig
     });
-    if (w.config.chart.stacked && barTotalDataLabelsConfig.enabled && this.hlt !== false) {
+    if (drawTotal) {
       totalDataLabels = this.drawTotalDataLabels({
         x: dataLabelsPos.totalDataLabelsX,
         y: dataLabelsPos.totalDataLabelsY,
@@ -508,7 +501,7 @@ class BarDataLabels {
         realIndex,
         j,
         textAnchor: dataLabelsPos.totalDataLabelsAnchor,
-        val: this.getStackedTotalDataLabel({ realIndex, j }),
+        val: totalText,
         rawVal: this.getStackedTotalValue({ realIndex, j }),
         dataLabelsConfig,
         barTotalDataLabelsConfig
@@ -584,12 +577,12 @@ class BarDataLabels {
   }
   /**
    * The stacked total's text box, measured in the total's own font.
-   * @param {number} realIndex @param {number} j
+   * @param {any} text the formatted total
    */
-  totalRects(realIndex, j) {
+  totalRects(text) {
     const s = this.barCtx.barOptions.dataLabels.total.style;
     return new Graphics(this.w).getTextRects(
-      this.getStackedTotalDataLabel({ realIndex, j }),
+      text,
       s.fontSize,
       s.fontFamily,
       void 0,
@@ -610,6 +603,16 @@ class BarDataLabels {
     }
     return val;
   }
+  /**
+   * How many zero bars ahead of this one were dropped from its group, which
+   * only `hideZeroBarsWhenGrouped` does (and never on a stack): 0 otherwise,
+   * without asking for every bar.
+   * @param {number} realIndex @param {number} j
+   */
+  zeroEncounters(realIndex, j) {
+    const w = this.w;
+    return !w.config.chart.stacked && w.config.plotOptions.bar.hideZeroBarsWhenGrouped ? this.barCtx.barHelpers.getZeroValueEncounters({ i: realIndex, j }).zeroEncounters : 0;
+  }
   /**
    * @param {Record<string, any>} opts
    */
@@ -638,10 +641,7 @@ class BarDataLabels {
     const totalDataLabelsBcx = bcx;
     barHeight = Math.abs(barHeight);
     const vertical = w.config.plotOptions.bar.dataLabels.orientation === "vertical";
-    const { zeroEncounters } = this.barCtx.barHelpers.getZeroValueEncounters({
-      i: realIndex,
-      j
-    });
+    const zeroEncounters = this.zeroEncounters(realIndex, j);
     bcx = bcx - strokeWidth / 2;
     const dataPointsDividedWidth = w.layout.gridWidth / w.globals.dataPoints;
     if (this.barCtx.isVerticalGroupedRangeBar) {
@@ -652,9 +652,7 @@ class BarDataLabels {
       } else {
         dataLabelsX = bcx - dataPointsDividedWidth + barWidth / 2 + offX;
       }
-      if (!w.config.chart.stacked && zeroEncounters > 0 && w.config.plotOptions.bar.hideZeroBarsWhenGrouped) {
-        dataLabelsX -= barWidth * zeroEncounters;
-      }
+      if (zeroEncounters > 0) dataLabelsX -= barWidth * zeroEncounters;
     }
     if (vertical) {
       const offsetDLX = 2;
@@ -712,29 +710,29 @@ class BarDataLabels {
         }
         break;
     }
-    let lowestPrevY = newY;
-    const totalGroupCtx = this.getTotalGroupContext(realIndex);
-    const top = this.xStackTop(realIndex, j);
-    const stacks = top ? [] : (
-      /** @type {any} */
-      this.barCtx.stacks || []
-    );
-    if (top) {
-      lowestPrevY = valIsNegative ? Math.max(newY, top[5]) : Math.min(newY, top[4]);
-    }
-    stacks.forEach((g, gi) => {
-      if (totalGroupCtx && gi !== totalGroupCtx.groupIndex) return;
-      g.prevY.forEach((arr) => {
-        if (valIsNegative) {
-          lowestPrevY = Math.max(arr[j], lowestPrevY);
-        } else {
-          lowestPrevY = Math.min(arr[j], lowestPrevY);
-        }
+    if (opts.drawTotal) {
+      let lowestPrevY = newY;
+      const totalGroupCtx = this.getTotalGroupContext(realIndex);
+      const top = this.xStackTop(realIndex, j);
+      const stacks = top ? [] : (
+        /** @type {any} */
+        this.barCtx.stacks || []
+      );
+      if (top) {
+        lowestPrevY = valIsNegative ? Math.max(newY, top[5]) : Math.min(newY, top[4]);
+      }
+      stacks.forEach((g, gi) => {
+        if (totalGroupCtx && gi !== totalGroupCtx.groupIndex) return;
+        g.prevY.forEach((arr) => {
+          if (valIsNegative) {
+            lowestPrevY = Math.max(arr[j], lowestPrevY);
+          } else {
+            lowestPrevY = Math.min(arr[j], lowestPrevY);
+          }
+        });
       });
-    });
-    if (this.hlt) lowestPrevY = this.hlt.edge;
-    if (this.drawsStackedTotal(realIndex) && barTotalDataLabelsConfig.enabled) {
-      const h = this.totalRects(realIndex, j).height;
+      if (this.hlt) lowestPrevY = this.hlt.edge;
+      const h = this.totalRects(opts.totalText).height;
       if (valIsNegative) {
         totalDataLabelsY = lowestPrevY + h * 0.77 - offY - barTotalDataLabelsConfig.offsetY;
       } else {
@@ -783,10 +781,7 @@ class BarDataLabels {
       offY
     } = opts;
     const dataPointsDividedHeight = w.layout.gridHeight / w.globals.dataPoints;
-    const { zeroEncounters } = this.barCtx.barHelpers.getZeroValueEncounters({
-      i: realIndex,
-      j
-    });
+    const zeroEncounters = this.zeroEncounters(realIndex, j);
     barWidth = Math.abs(barWidth);
     let dataLabelsY;
     if (this.barCtx.isPyramid) {
@@ -795,9 +790,7 @@ class BarDataLabels {
     } else {
       dataLabelsY = bcy - (this.barCtx.isRangeBar ? 0 : dataPointsDividedHeight) + barHeight / 2 + textRects.height / 2 + offY - 3;
     }
-    if (!w.config.chart.stacked && zeroEncounters > 0 && w.config.plotOptions.bar.hideZeroBarsWhenGrouped) {
-      dataLabelsY -= barHeight * zeroEncounters;
-    }
+    if (zeroEncounters > 0) dataLabelsY -= barHeight * zeroEncounters;
     let totalDataLabelsX;
     let totalDataLabelsY;
     let totalDataLabelsAnchor = "start";
@@ -834,29 +827,29 @@ class BarDataLabels {
           break;
       }
     }
-    let lowestPrevX = newX;
-    const totalGroupCtx = this.getTotalGroupContext(realIndex);
-    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) => {
-        if (valIsNegative) {
-          lowestPrevX = Math.min(arr[j], lowestPrevX);
-        } else {
-          lowestPrevX = Math.max(arr[j], lowestPrevX);
-        }
+    if (opts.drawTotal) {
+      let lowestPrevX = newX;
+      const totalGroupCtx = this.getTotalGroupContext(realIndex);
+      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) => {
+          if (valIsNegative) {
+            lowestPrevX = Math.min(arr[j], lowestPrevX);
+          } else {
+            lowestPrevX = Math.max(arr[j], lowestPrevX);
+          }
+        });
       });
-    });
-    if (this.hlt) lowestPrevX = this.hlt.edge;
-    if (this.drawsStackedTotal(realIndex) && barTotalDataLabelsConfig.enabled) {
-      const totalLabeltextRects = this.totalRects(realIndex, j);
+      if (this.hlt) lowestPrevX = this.hlt.edge;
+      const totalLabeltextRects = this.totalRects(opts.totalText);
       if (valIsNegative) {
         totalDataLabelsX = lowestPrevX - strokeWidth - offX - barTotalDataLabelsConfig.offsetX;
         totalDataLabelsAnchor = "end";
@@ -1080,21 +1073,12 @@ class Helpers {
     this.barCtx.totalItems = 0;
     this.barCtx.seriesLen = 0;
     this.barCtx.visibleI = -1;
-    this.barCtx.visibleItems = 1;
+    this._bgOwner = void 0;
     for (let sl = 0; sl < series.length; sl++) {
       if (series[sl].length > 0) {
         this.barCtx.seriesLen = this.barCtx.seriesLen + 1;
         this.barCtx.totalItems += series[sl].length;
       }
-      if (w.axisFlags.isXNumeric) {
-        for (let j = 0; j < series[sl].length; j++) {
-          if (w.seriesData.seriesX[sl][j] > w.globals.minX && w.seriesData.seriesX[sl][j] < w.globals.maxX) {
-            this.barCtx.visibleItems++;
-          }
-        }
-      } else {
-        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;
@@ -1215,6 +1199,26 @@ class Helpers {
     }
     return isFinite(min) ? min : 0;
   }
+  /**
+   * How many bars a column slot is divided by: the data points on a category
+   * axis, and on a numeric one 1 plus every x strictly inside the axis range.
+   * Only read when a numeric axis has no slot span, so counted then.
+   * @returns {number}
+   */
+  visibleItems() {
+    const g = this.w.globals;
+    if (!this.w.axisFlags.isXNumeric) return g.dataPoints;
+    let n = 1;
+    const xs = this.w.seriesData.seriesX;
+    this.barCtx.series.forEach(
+      (s, sl) => {
+        for (let j = 0; j < s.length; j++) {
+          if (xs[sl][j] > g.minX && xs[sl][j] < g.maxX) n++;
+        }
+      }
+    );
+    return n;
+  }
   /**
    * 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.
@@ -1251,15 +1255,13 @@ class Helpers {
       }
       y = (yDivision - barHeight * this.barCtx.seriesLen) / 2;
     } else {
-      xDivision = w.layout.gridWidth / this.barCtx.visibleItems;
-      if (w.config.xaxis.convertedCatToNumeric) {
-        xDivision = w.layout.gridWidth / w.globals.dataPoints;
-      }
+      const xRatio = this.barCtx.xRatio;
+      const slotXSpan = w.axisFlags.isXNumeric ? this.barSlotXSpan() : 0;
+      const bySlot = slotXSpan > 0 && slotXSpan / xRatio > 0;
+      xDivision = w.config.xaxis.convertedCatToNumeric ? w.layout.gridWidth / w.globals.dataPoints : bySlot ? 0 : w.layout.gridWidth / this.visibleItems();
       barWidth = xDivision / seriesLen * parseInt(this.barCtx.barOptions.columnWidth, 10) / 100;
       if (w.axisFlags.isXNumeric) {
-        const xRatio = this.barCtx.xRatio;
-        const slotXSpan = this.barSlotXSpan();
-        if (slotXSpan > 0 && slotXSpan / xRatio > 0) {
+        if (bySlot) {
           xDivision = slotXSpan / xRatio;
         }
         barWidth = xDivision / seriesLen * parseInt(this.barCtx.barOptions.columnWidth, 10) / 100;
@@ -1559,22 +1561,25 @@ class Helpers {
   /** @param {{ j?: any, i?: any, x1?: any, x2?: any, y1?: any, y2?: any, bc?: any, elSeries?: any }} opts */
   barBackground({ j, i, x1, x2, y1, y2, elSeries }) {
     const w = this.w;
-    const graphics = new Graphics(this.barCtx.w);
-    const sr = new Series(this.barCtx.w);
-    const activeSeriesIndex = sr.getActiveConfigSeriesIndex();
-    if (this.barCtx.barOptions.colors.backgroundBarColors.length > 0 && activeSeriesIndex === i) {
-      if (j >= this.barCtx.barOptions.colors.backgroundBarColors.length) {
-        j %= this.barCtx.barOptions.colors.backgroundBarColors.length;
+    const colors = this.barCtx.barOptions.colors;
+    if (!colors.backgroundBarColors.length) return;
+    if (this._bgOwner === void 0) {
+      this._bgOwner = new Series(w).getActiveConfigSeriesIndex();
+    }
+    if (this._bgOwner === i) {
+      const graphics = new Graphics(w);
+      if (j >= colors.backgroundBarColors.length) {
+        j %= colors.backgroundBarColors.length;
       }
-      const bcolor = this.barCtx.barOptions.colors.backgroundBarColors[j];
+      const bcolor = colors.backgroundBarColors[j];
       const rect = graphics.drawRect(
         typeof x1 !== "undefined" ? x1 : 0,
         typeof y1 !== "undefined" ? y1 : 0,
         typeof x2 !== "undefined" ? x2 : w.layout.gridWidth,
         typeof y2 !== "undefined" ? y2 : w.layout.gridHeight,
-        this.barCtx.barOptions.colors.backgroundBarRadius,
+        colors.backgroundBarRadius,
         bcolor,
-        this.barCtx.barOptions.colors.backgroundBarOpacity
+        colors.backgroundBarOpacity
       );
       elSeries.add(rect);
       rect.node.classList.add("apexcharts-backgroundBar");
@@ -1591,13 +1596,37 @@ class Helpers {
    * `base` is the rect collapsed onto its baseline, padded to the command
    * count of `pathTo` so the rise morphs cleanly.
    *
-   * @param {{a: number, len: number, v1: number, v2: number, strokeWidth: any, realIndex: number, j: number, dir: number, horizontal?: boolean}} o
+   * `insetWidth`, when given, is the stroke width used only for the sideways
+   * inset along the slot (`a`/`len`); the value axis keeps `strokeWidth`. It
+   * defaults to `strokeWidth`, so one width sets both directions. When
+   * `strokeWidth` is the smaller (an empty segment of a stroked series), the
+   * rect collapses onto its base edge inset by `insetWidth`, where its drawn
+   * self starts.
+   *
+   * @param {{a: number, len: number, v1: number, v2: number, strokeWidth: any, insetWidth?: any, realIndex: number, j: number, dir: number, horizontal?: boolean}} o
    */
-  barRect({ a, len, v1, v2, strokeWidth, realIndex, j, dir, horizontal }) {
+  barRect({
+    a,
+    len,
+    v1,
+    v2,
+    strokeWidth,
+    insetWidth,
+    realIndex,
+    j,
+    dir,
+    horizontal
+  }) {
     const w = this.w;
     const graphics = new Graphics(w);
     strokeWidth = Array.isArray(strokeWidth) ? strokeWidth[realIndex] : strokeWidth;
     if (!strokeWidth) strokeWidth = 0;
+    if (insetWidth === void 0) {
+      insetWidth = strokeWidth;
+    } else {
+      insetWidth = Array.isArray(insetWidth) ? insetWidth[realIndex] : insetWidth;
+      if (!insetWidth) insetWidth = 0;
+    }
     const datum = (
       /** @type {any} */
       w.config.series[realIndex].data[j]
@@ -1608,28 +1637,35 @@ class Helpers {
       len += offset;
     }
     const strokeCenter = strokeWidth / 2;
+    const insetCenter = insetWidth / 2;
     const direction = dir * (this.barCtx.isReversed ? -1 : 1);
+    const empty = strokeWidth < insetWidth;
+    const baseCenter = empty ? insetCenter : strokeCenter;
+    let tip;
     const closing = w.config.plotOptions.bar.borderRadiusApplication === "around" || this.arrBorderRadius[realIndex][j] === "both" ? " Z" : " z";
     let x1, x2, y1, y2, sl, squarePathTo;
     if (horizontal) {
-      y1 = a + strokeCenter;
-      y2 = a + len - strokeCenter;
-      x1 = v1 + 1e-3 + strokeCenter * direction;
-      x2 = v2 + 1e-3 - strokeCenter * direction;
+      y1 = a + insetCenter;
+      y2 = a + len - insetCenter;
+      x1 = v1 + 1e-3 + baseCenter * direction;
+      tip = v2 + 1e-3 - strokeCenter * direction;
+      x2 = empty ? x1 : tip;
       sl = graphics.line(x1, y2);
       squarePathTo = graphics.move(x1, y1) + graphics.line(x2, y1) + graphics.line(x2, y2) + sl + closing;
     } else {
-      x1 = a + strokeCenter;
-      x2 = a + len - strokeCenter;
-      y1 = v1 + 1e-3 - strokeCenter * direction;
-      y2 = v2 + 1e-3 + strokeCenter * direction;
+      x1 = a + insetCenter;
+      x2 = a + len - insetCenter;
+      y1 = v1 + 1e-3 - baseCenter * direction;
+      tip = v2 + 1e-3 + strokeCenter * direction;
+      y2 = empty ? y1 : tip;
       sl = graphics.line(x2, y1);
       squarePathTo = graphics.move(x1, y1) + graphics.line(x1, y2) + graphics.line(x2, y2) + sl + closing;
     }
-    const pathTo = this.arrBorderRadius[realIndex][j] !== "none" ? graphics.roundPathCorners(
-      squarePathTo,
-      w.config.plotOptions.bar.borderRadius
-    ) : squarePathTo;
+    const radius = w.config.plotOptions.bar.borderRadius;
+    let pathTo = squarePathTo;
+    if (this.arrBorderRadius[realIndex][j] !== "none") {
+      pathTo = radius === 0 && isFinite(x1 + x2 + y1 + y2) ? squarePathTo.replace(" Z", ` L ${x1} ${y1} Z`).replace(/ L (\S+ \S+)(?= [LZ])/g, " L $1 C $1 $1 $1") + " " : graphics.roundPathCorners(squarePathTo, radius);
+    }
     return {
       x1,
       x2,
@@ -1640,18 +1676,47 @@ class Helpers {
       squarePathTo,
       pathTo,
       base: graphics.move(x1, y1) + graphics.line(x1, y1) + sl + sl + sl + sl + sl + graphics.line(x1, y1) + closing,
+      // the value end before an empty segment folds it onto its base edge
+      tip,
       strokeWidth,
       strokeCenter,
       direction
     };
   }
-  /** @param {{ barWidth?: any, barXPosition?: any, y1?: any, y2?: any, yRatio?: any, strokeWidth?: any, isReversed?: any, series?: any, realIndex?: any, i?: any, j?: any, w?: any }} opts */
+  /**
+   * The sign a legend-hidden column had, read from the data its collapse
+   * stored (its values are all 0 while hidden): 1, -1, or 0 when the series
+   * is not hidden or the datum has no sign. A hidden layer then folds onto
+   * the base edge of the side it left, where its neighbours' strokes run.
+   * @param {number} realIndex @param {number} j
+   * @returns {number}
+   */
+  collapsedSign(realIndex, j) {
+    var _a;
+    const gl = this.w.globals;
+    const lists = [
+      [gl.collapsedSeriesIndices, gl.collapsedSeries],
+      [gl.ancillaryCollapsedSeriesIndices, gl.ancillaryCollapsedSeries]
+    ];
+    for (const [indices, entries] of lists) {
+      if (!indices || indices.indexOf(realIndex) < 0) continue;
+      const c = (entries || []).find(
+        (s) => s.index === realIndex
+      );
+      const d = (_a = c == null ? void 0 : c.data) == null ? void 0 : _a[j];
+      const v = Array.isArray(d) ? d[1] : d && typeof d === "object" ? d.y : d;
+      return typeof v === "number" && v ? Math.sign(v) : 0;
+    }
+    return 0;
+  }
+  /** @param {{ barWidth?: any, barXPosition?: any, y1?: any, y2?: any, yRatio?: any, strokeWidth?: any, insetWidth?: any, isReversed?: any, series?: any, realIndex?: any, i?: any, j?: any, w?: any }} opts */
   getColumnPaths({
     barWidth,
     barXPosition,
     y1,
     y2,
     strokeWidth,
+    insetWidth,
     series,
     realIndex,
     i,
@@ -1665,9 +1730,10 @@ class Helpers {
       v1: y1,
       v2: y2,
       strokeWidth,
+      insetWidth,
       realIndex,
       j,
-      dir: series[i][j] >= 0 ? 1 : -1
+      dir: this.collapsedSign(realIndex, j) || (series[i][j] >= 0 ? 1 : -1)
     });
     const { pathTo, squarePathTo, strokeCenter, direction } = r;
     y1 = r.y1;
@@ -1687,7 +1753,7 @@ class Helpers {
     }
     if (w.config.chart.stacked) {
       const _ctx = this.barCtx.groupCtx;
-      _ctx.yArrj.push(y2 - strokeCenter * direction);
+      _ctx.yArrj.push(r.tip - strokeCenter * direction);
       _ctx.yArrjF.push(Math.abs(y1 - y2 + r.strokeWidth * direction));
       _ctx.yArrjVal.push((_c = this.barCtx.series[i][j]) != null ? _c : null);
     }
@@ -2274,24 +2340,24 @@ function lengthTransitionEnabled(w) {
   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;
+  var _a, _b;
+  return keyOf(
+    (_a = w.axisFlags) == null ? void 0 : _a.isXNumeric,
+    (_b = w.seriesData) == null ? void 0 : _b.seriesX,
+    w.globals.labels,
+    realIndex,
+    j
+  );
 }
 function frameDatumKey(frame, realIndex, j) {
-  var _a, _b;
-  if (frame.isXNumeric) {
-    const sx = (_a = frame.seriesX) == null ? void 0 : _a[realIndex];
+  return keyOf(frame.isXNumeric, frame.seriesX, frame.labels, realIndex, j);
+}
+function keyOf(isXNumeric, seriesX, labels, realIndex, j) {
+  if (isXNumeric) {
+    const sx = seriesX == null ? void 0 : seriesX[realIndex];
     if (sx && sx.length && sx[j] != null) return "x:" + sx[j];
   }
-  const lbl = (_b = frame.labels) == null ? void 0 : _b[j];
+  const lbl = labels == null ? void 0 : labels[j];
   if (lbl != null && String(lbl) !== "") {
     return "c:" + (Array.isArray(lbl) ? lbl.join(" ") : String(lbl));
   }
@@ -2336,7 +2402,13 @@ function seriesKeys(w, realIndex, n = ((_a) => (_a = w.seriesData.series[realInd
     Array.from({ length: n }, (_, j) => datumKey(w, realIndex, j))
   );
 }
-function seriesJoin(w, realIndex, includeIdentity = false, allowReorder = false) {
+function seriesJoin(w, realIndex, includeIdentity = false, allowReorder = false, sj = buildJoin(w, realIndex)) {
+  if (!sj) return null;
+  if (!sj.join.ordered && !allowReorder) return null;
+  if (!sj.join.changed && !includeIdentity) return null;
+  return sj;
+}
+function buildJoin(w, realIndex) {
   var _a, _b;
   if (!lengthTransitionEnabled(w)) return null;
   const frame = w.globals.prevStreamFrame;
@@ -2349,10 +2421,23 @@ function seriesJoin(w, realIndex, includeIdentity = false, allowReorder = false)
     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 };
+  return { join: joinKeys(oldKeys, newKeys), oldKeys, newKeys };
+}
+function rafTween(w, duration, ease, onFrame, onDone, alive, startAt = performance.now()) {
+  const step = (now) => {
+    if (w.globals.isDestroyed || alive && !alive()) 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);
+  return () => {
+    alive = () => false;
+  };
 }
 function firstMove(d) {
   const m = /^M\s*([+-]?[\d.eE]+)[\s,]+([+-]?[\d.eE]+)/.exec(d || "");
@@ -2361,6 +2446,7 @@ function firstMove(d) {
   const y = parseFloat(m[2]);
   return isFinite(x) && isFinite(y) ? { x, y } : null;
 }
+const GHOST_EASE = (t) => 1 - Math.pow(1 - t, 3);
 function renderBarExitGhosts({
   w,
   elSeries,
@@ -2379,7 +2465,9 @@ function renderBarExitGhosts({
   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) => {
+  const host = elSeries.node;
+  const staged = host.ownerDocument.createDocumentFragment();
+  const nodes = exits.map((p) => {
     let fill = p.fill || fallbackFill || "#c8c8c8";
     if (String(fill).indexOf("url(") === 0) fill = fallbackFill || "#c8c8c8";
     const ghost = graphics.drawPath({
@@ -2396,46 +2484,45 @@ function renderBarExitGhosts({
       "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";
+    staged.insertBefore(node, staged.firstChild);
+    return node;
+  });
+  host.insertBefore(staged, host.firstChild);
+  const boxes = nodes.map((node) => {
     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";
-        }
-      }
+      return node.getBBox();
     } catch (_) {
+      return null;
     }
+  });
+  const t0 = performance.now();
+  exits.forEach((p, i) => {
+    const node = nodes[i];
+    const bb = boxes[i];
+    const start = firstMove(p.d);
+    const near = !start || !bb || (isHorizontal ? Math.abs(start.x - bb.x) <= Math.abs(start.x - (bb.x + bb.width)) : Math.abs(start.y - (bb.y + bb.height)) <= Math.abs(start.y - bb.y));
     const style = node.style;
     style.transformBox = "fill-box";
-    style.transformOrigin = origin;
+    style.transformOrigin = isHorizontal ? near ? "left center" : "right center" : near ? "center bottom" : "center top";
     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;
+    node.setAttribute("data:ghostStart", String(t0));
+    if (bb) {
+      const edge = isHorizontal ? near ? bb.x : bb.x + bb.width : near ? 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);
+    rafTween(
+      w,
+      Math.max(1, speed || 1),
+      GHOST_EASE,
+      (eased) => {
+        const scale = 1 - eased;
+        style.transform = isHorizontal ? `scaleX(${scale})` : `scaleY(${scale})`;
+        style.opacity = String(scale);
+      },
+      () => node.remove(),
+      () => node.parentNode,
+      t0
+    );
   });
 }
 class AxisMapping {
@@ -2468,23 +2555,74 @@ 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;
+  }
+}
+const indexes = /* @__PURE__ */ new WeakMap();
+function prevRecords(w, realIndex) {
+  const all = w.globals.previousPaths;
+  let idx = indexes.get(all);
+  if (!idx || idx.n !== all.length) {
+    idx = { n: all.length, m: /* @__PURE__ */ new Map() };
+    for (const gpp of all) {
+      const k = parseInt((gpp || {}).realIndex, 10);
+      if (k === k) {
+        const list = idx.m.get(k);
+        if (list) list.push(gpp);
+        else idx.m.set(k, [gpp]);
+      }
+    }
+    indexes.set(all, idx);
   }
+  return idx.m.get(parseInt(String(realIndex), 10)) || [];
 }
 function seriesEmitter(ctx, graphics) {
   const r = ctx && ctx.renderer;
@@ -3078,7 +3216,7 @@ class Bar {
   }
   /** @param {{indexes: any, barHeight: any, strokeWidth: any, zeroW: any, x: any, y: any, yDivision: any, elSeries: any}} opts */
   drawBarPaths({
-    indexes,
+    indexes: indexes2,
     barHeight,
     strokeWidth,
     zeroW,
@@ -3088,12 +3226,12 @@ class Bar {
     elSeries
   }) {
     const w = this.w;
-    const i = indexes.i;
-    const j = indexes.j;
+    const i = indexes2.i;
+    const j = indexes2.j;
     let barYPosition;
     if (w.config.plotOptions.bar.hideZeroBarsWhenGrouped) {
       const { nonZeroColumns, zeroEncounters } = this.barHelpers.getZeroValueEncounters({
-        i: indexes.realIndex,
+        i: indexes2.realIndex,
         j
       });
       if (nonZeroColumns > 0) {
@@ -3133,7 +3271,7 @@ class Bar {
         barHeight,
         topHalf: pyramidSeg.topHalf,
         bottomHalf: pyramidSeg.bottomHalf,
-        realIndex: indexes.realIndex,
+        realIndex: indexes2.realIndex,
         j,
         strokeWidth,
         w
@@ -3149,7 +3287,7 @@ class Bar {
         ),
         i,
         j,
-        realIndex: indexes.realIndex,
+        realIndex: indexes2.realIndex,
         strokeWidth,
         w
       });
@@ -3163,7 +3301,7 @@ class Bar {
         strokeWidth,
         isReversed: this.isReversed,
         series: this.series,
-        realIndex: indexes.realIndex,
+        realIndex: indexes2.realIndex,
         i,
         j,
         w
@@ -3197,7 +3335,7 @@ class Bar {
         zeroW,
         /** @type {any} */
         null,
-        indexes.realIndex,
+        indexes2.realIndex,
         j,
         0
       ),
@@ -3207,7 +3345,7 @@ class Bar {
   }
   /** @param {{indexes: any, x: any, y: any, xDivision: any, barWidth: any, zeroH: any, strokeWidth: any, elSeries: any}} opts */
   drawColumnPaths({
-    indexes,
+    indexes: indexes2,
     x,
     y,
     xDivision,
@@ -3217,11 +3355,11 @@ class Bar {
     elSeries
   }) {
     const w = this.w;
-    const realIndex = indexes.realIndex;
-    const translationsIndex = indexes.translationsIndex;
-    const i = indexes.i;
-    const j = indexes.j;
-    const bc = indexes.bc;
+    const realIndex = indexes2.realIndex;
+    const translationsIndex = indexes2.translationsIndex;
+    const i = indexes2.i;
+    const j = indexes2.j;
+    const bc = indexes2.bc;
     let barXPosition;
     if (w.axisFlags.isXNumeric) {
       const xForNumericX = this.getBarXForNumericXAxis({
@@ -3351,15 +3489,38 @@ class Bar {
    * @returns {any | null}
    */
   _prevRecord(realIndex) {
-    const w = this.w;
-    let record = null;
-    for (let pp = 0; pp < w.globals.previousPaths.length; pp++) {
-      const gpp = w.globals.previousPaths[pp];
-      if (gpp.paths && gpp.paths.length > 0 && parseInt(gpp.realIndex, 10) === parseInt(String(realIndex), 10)) {
-        record = gpp;
-      }
+    const list = prevRecords(this.w, realIndex);
+    for (let k = list.length - 1; k >= 0; k--) {
+      if (list[k].paths && list[k].paths.length > 0) return list[k];
     }
-    return record;
+    return null;
+  }
+  /**
+   * Whether this render uses a bar's `pathFrom` at all (Graphics.revealPlan,
+   * the predicate renderPaths itself runs); when it does not, the
+   * previous-path lookups and corner padding built for it are skipped. A
+   * chart drawing highlight parts (now or a frame ago) keeps them: its parts
+   * start from the whole's pathFrom on their own rule. Canvas paints the
+   * final frame. `_fadeReveal` is the candles' per-series fade.
+   * @returns {boolean}
+   */
+  _pathFromUsed() {
+    var _a;
+    const w = this.w;
+    const hd = w.highlightData;
+    const parts = (
+      /** @type {any} */
+      w.globals.prevHighlightParts
+    );
+    if (hd && (hd.active || (parts == null ? void 0 : parts.size))) return true;
+    const r = (_a = this.ctx) == null ? void 0 : _a.renderer;
+    if (r && r.kind && r.kind !== "svg") return false;
+    const p = new Graphics(w, this.ctx).revealPlan(
+      "",
+      /** @type {any} */
+      this._fadeReveal
+    );
+    return p.animate && !p.fade;
   }
   /**
    * Previous paths of a series re-keyed by datum key (stamped as
@@ -3464,6 +3625,7 @@ class Bar {
   getPreviousPath(realIndex, j, pathTo, squarePathTo) {
     const w = this.w;
     this._pathToInterp = null;
+    if (!this._pathFromUsed()) return pathTo;
     const record = this._prevRecord(realIndex);
     if (!record) {
       return lengthTransitionEnabled(w) ? null : pathTo;
@@ -3940,7 +4102,7 @@ class BarStacked extends Bar {
   }
   /** @param {{indexes: any, barHeight: any, strokeWidth: any, zeroW: any, x: any, y: any, columnGroupIndex: any, yDivision: any, elSeries: any}} opts */
   drawStackedBarPaths({
-    indexes,
+    indexes: indexes2,
     barHeight,
     strokeWidth,
     zeroW,
@@ -3954,10 +4116,10 @@ class BarStacked extends Bar {
     const w = this.w;
     const barYPosition = y + columnGroupIndex * barHeight;
     let barXPosition;
-    const i = indexes.i;
-    const j = indexes.j;
-    const realIndex = indexes.realIndex;
-    const translationsIndex = indexes.translationsIndex;
+    const i = indexes2.i;
+    const j = indexes2.j;
+    const realIndex = indexes2.realIndex;
+    const translationsIndex = indexes2.translationsIndex;
     const v = (
       /** @type {any} */
       (_b = (_a = this.series[i]) == null ? void 0 : _a[j]) != null ? _b : null
@@ -3981,7 +4143,7 @@ class BarStacked extends Bar {
       strokeWidth,
       isReversed: this.isReversed,
       series: this.series,
-      realIndex: indexes.realIndex,
+      realIndex: indexes2.realIndex,
       i,
       j,
       w
@@ -4013,24 +4175,25 @@ class BarStacked extends Bar {
       y
     };
   }
-  /** @param {{indexes: any, x: any, y: any, xDivision: any, barWidth: any, zeroH: any, columnGroupIndex: any, elSeries: any}} opts */
+  /** @param {{indexes: any, x: any, y: any, xDivision: any, barWidth: any, zeroH: any, columnGroupIndex: any, strokeWidth: any, elSeries: any}} opts */
   drawStackedColumnPaths({
-    indexes,
+    indexes: indexes2,
     x,
     y,
     xDivision,
     barWidth,
     zeroH,
     columnGroupIndex,
+    strokeWidth,
     elSeries
   }) {
     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 i = indexes2.i;
+    const j = indexes2.j;
+    const bc = indexes2.bc;
+    const realIndex = indexes2.realIndex;
+    const translationsIndex = indexes2.translationsIndex;
     const v = (
       /** @type {any} */
       (_b = (_a = this.series[i]) == null ? void 0 : _a[j]) != null ? _b : null
@@ -4071,12 +4234,17 @@ class BarStacked extends Bar {
       y1: barYPosition,
       y2: y,
       yRatio: this.yRatio[translationsIndex],
-      // 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,
+      // Along the value axis, the per-datum width from getStrokeWidth (0 for
+      // a null/zero value): the series' width grew an empty segment by the
+      // stroke centering into a visible strip (#5046).
+      strokeWidth,
+      // Sideways, the series' width even for an empty segment, so a hidden
+      // layer keeps its slot inset and re-enters from the geometry it left,
+      // but no inset at all when no stroke is drawn.
+      insetWidth: w.config.stroke.show ? this.strokeWidth : 0,
       isReversed: this.isReversed,
       series: this.series,
-      realIndex: indexes.realIndex,
+      realIndex: indexes2.realIndex,
       i,
       j,
       w
@@ -4348,8 +4516,15 @@ class RangeBar extends Bar {
       (_d = (_c = w.config.series[i].data) == null ? void 0 : _c[j]) == null ? void 0 : _d.x
     );
     const labelX = Array.isArray(x) ? x.join(" ") : x;
-    const rowIndex = w.labelData.labels.map((_) => Array.isArray(_) ? _.join(" ") : _).indexOf(labelX);
-    const overlappedIndex = w.rangeData.seriesRange[i].findIndex(
+    const self = (
+      /** @type {any} */
+      this
+    );
+    self._rowKeys || (self._rowKeys = w.labelData.labels.map(
+      (l) => Array.isArray(l) ? l.join(" ") : l
+    ));
+    const rowIndex = self._rowKeys.indexOf(labelX);
+    const overlappedIndex = w.config.plotOptions.bar.rangeBarOverlap ? -1 : w.rangeData.seriesRange[i].findIndex(
       (tx) => {
         var _a2;
         return tx.x === labelX && ((_a2 = tx.overlaps) == null ? void 0 : _a2.size) > 0;
@@ -4361,7 +4536,7 @@ class RangeBar extends Bar {
       } else {
         barYPosition = srty + barHeight * this.visibleI + yDivision * rowIndex;
       }
-      if (overlappedIndex > -1 && !w.config.plotOptions.bar.rangeBarOverlap) {
+      if (overlappedIndex > -1) {
         overlaps = Array.from(
           /** @type {any} */
           w.rangeData.seriesRange[i][overlappedIndex].overlaps
@@ -4379,7 +4554,7 @@ class RangeBar extends Bar {
           barXPosition = srtx + barWidth * this.visibleI + xDivision * rowIndex;
         }
       }
-      if (overlappedIndex > -1 && !w.config.plotOptions.bar.rangeBarOverlap) {
+      if (overlappedIndex > -1) {
         overlaps = Array.from(
           /** @type {any} */
           w.rangeData.seriesRange[i][overlappedIndex].overlaps
@@ -4399,7 +4574,7 @@ class RangeBar extends Bar {
   }
   /** @param {{indexes: any, x: any, xDivision: any, barWidth: any, barXPosition: any, zeroH: any}} opts */
   drawRangeColumnPaths({
-    indexes,
+    indexes: indexes2,
     x,
     xDivision,
     barWidth,
@@ -4408,7 +4583,7 @@ class RangeBar extends Bar {
   }) {
     var _a, _b;
     const w = this.w;
-    const { i, j, realIndex, translationsIndex } = indexes;
+    const { i, j, realIndex, translationsIndex } = indexes2;
     const yRatio = this.yRatio[translationsIndex] * (this.isReversed ? -1 : 1);
     const range = this.getRangeValue(realIndex, j);
     let y1 = Math.min(range.start, range.end);
@@ -4517,7 +4692,7 @@ class RangeBar extends Bar {
   }
   /** @param {{indexes: any, y: any, y1: any, y2: any, yDivision: any, barHeight: any, barYPosition: any, zeroW: any}} opts */
   drawRangeBarPaths({
-    indexes,
+    indexes: indexes2,
     y,
     y1,
     y2,
@@ -4527,7 +4702,7 @@ class RangeBar extends Bar {
     zeroW
   }) {
     const w = this.w;
-    const { realIndex, j } = indexes;
+    const { realIndex, j } = indexes2;
     const ratio = this.invertedYRatio * (this.isReversed ? -1 : 1);
     const x1 = this.preventBarOverflow(zeroW + y1 / ratio);
     const x2 = this.preventBarOverflow(zeroW + y2 / ratio);