apexcharts 8.2.0 → 8.3.0

package/dist/boxPlot.esm.js

@@ -18,7 +18,7 @@ var __spreadValues = (a, b) => {
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 /*!
- * ApexCharts v8.2.0
+ * ApexCharts v8.3.0
  * (c) 2018-2026 ApexCharts
  */
 import * as _core from "apexcharts/core";
@@ -37,181 +37,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
@@ -247,7 +72,8 @@ class BarDataLabels {
       barXPosition,
       barYPosition,
       visibleSeries,
-      hl
+      hl,
+      noLabel
     } = opts;
     const w = this.w;
     const graphics = new Graphics(this.barCtx.w);
@@ -361,7 +187,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,
@@ -447,8 +273,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) {
@@ -457,6 +283,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;
@@ -477,7 +318,6 @@ class BarDataLabels {
     var _a;
     const w = this.w;
     let {
-      i,
       j,
       realIndex,
       y,
@@ -487,7 +327,6 @@ class BarDataLabels {
       textRects,
       dataLabelsX,
       dataLabelsY,
-      dataLabelsConfig,
       barDataLabelsConfig,
       barTotalDataLabelsConfig,
       strokeWidth,
@@ -501,7 +340,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;
@@ -522,7 +361,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);
@@ -596,16 +435,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;
@@ -635,7 +469,6 @@ class BarDataLabels {
     const w = this.w;
     let {
       x,
-      i,
       j,
       realIndex,
       bcy,
@@ -652,7 +485,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);
@@ -669,7 +502,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);
@@ -704,10 +537,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) => {
@@ -720,11 +557,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";
@@ -793,8 +626,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;
@@ -807,10 +641,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));
@@ -828,29 +659,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
@@ -866,14 +680,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({
@@ -925,7 +739,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",
@@ -958,9 +772,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;
@@ -981,6 +797,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(
@@ -1045,15 +863,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
@@ -1094,6 +916,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
    */
@@ -1216,7 +1047,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) {
@@ -1369,11 +1200,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")
@@ -1529,7 +1359,7 @@ class Helpers {
     j,
     w
   }) {
-    var _a, _b;
+    var _a, _b, _c;
     const r = this.barRect({
       a: barXPosition,
       len: barWidth,
@@ -1560,7 +1390,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,
@@ -1750,7 +1580,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,
@@ -1786,7 +1616,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,
@@ -1831,6 +1661,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
@@ -2085,11 +1918,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++;
       }
     });
@@ -2127,6 +1960,186 @@ class Helpers {
   }
 }
 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
@@ -2245,15 +2258,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
@@ -2270,7 +2285,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"
     });
@@ -2302,7 +2317,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]);
       }
@@ -2380,7 +2394,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
@@ -2462,6 +2478,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,
@@ -2472,15 +2489,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
         });
@@ -2489,7 +2502,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,
@@ -2521,7 +2534,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;
@@ -2595,7 +2610,8 @@ class Bar {
         barXPosition,
         barYPosition,
         visibleSeries,
-        hl: hl == null ? void 0 : hl.label
+        hl: hl == null ? void 0 : hl.label,
+        noLabel
       })
     );
     if (delayMs > 0) {
@@ -2611,19 +2627,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";
@@ -2646,7 +2661,7 @@ class Bar {
           pathTo,
           stroke: lineFill,
           strokeWidth,
-          strokeLineCap: w.config.stroke.lineCap,
+          strokeLinecap: w.config.stroke.lineCap,
           fill: pathFill,
           pathToInterp,
           animationDelay: delay,
@@ -2698,12 +2713,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,
@@ -2779,7 +2794,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;
       }
@@ -2918,7 +2936,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;
         }
@@ -2982,15 +3000,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
     };
   }
@@ -3011,7 +3030,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
@@ -3067,7 +3099,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;
@@ -3075,20 +3107,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;
@@ -3148,7 +3174,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 {
@@ -3291,11 +3317,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;
   }
   /**
@@ -3311,9 +3336,20 @@ class Bar {
     return matches ? matches.length : 0;
   }
 }
+function jitterExtent(pool, w) {
+  let lo = Infinity;
+  let hi = -Infinity;
+  pool.slice(0, w.seriesData.series.length).flat(2).forEach((v) => {
+    if (v === +v) {
+      if (v < lo) lo = v;
+      if (v > hi) hi = v;
+    }
+  });
+  return [lo, hi];
+}
 function buildJitterGroups({
-  w,
   points,
+  extent,
   seedA,
   seedB,
   center,
@@ -3324,6 +3360,7 @@ function buildJitterGroups({
   clampAt,
   sideSign
 }) {
+  var _a, _b;
   const opts = options;
   if (!opts || opts.show === false) return [];
   if (!points || !points.length) return [];
@@ -3337,8 +3374,8 @@ function buildJitterGroups({
   const scale = opts.colorScale;
   const useScale = scale && Array.isArray(scale.colors) && scale.colors.length > 0;
   const steps = useScale ? Math.max(2, scale.steps || 24) : 1;
-  const sMin = useScale && scale.min != null ? scale.min : w.globals.minY;
-  const sMax = useScale && scale.max != null ? scale.max : w.globals.maxY;
+  const sMin = (_a = scale == null ? void 0 : scale.min) != null ? _a : extent[0];
+  const sMax = (_b = scale == null ? void 0 : scale.max) != null ? _b : extent[1];
   const span = sMax - sMin || 1;
   const buckets = useScale ? new Array(steps).fill("") : [""];
   for (let k = 0; k < points.length; k += stride) {
@@ -3424,7 +3461,7 @@ function renderJitter({
   elSeries.add(elPointsWrap);
 }
 function darkenColor(color, amount) {
-  const rgb = Utils.parseHex(color);
+  const rgb = Utils.parseColor(color) || Utils.parseColor(Utils.resolveColor(color));
   if (!rgb) return color;
   const f = Math.max(0, 1 - amount);
   return `rgb(${Math.round(rgb[0] * f)},${Math.round(rgb[1] * f)},${Math.round(rgb[2] * f)})`;
@@ -3489,7 +3526,7 @@ class BoxCandleStick extends Bar {
     if (!keyed || keyed.size === 0 || !row || row.length === 0) return false;
     let survivors = 0;
     for (let j = 0; j < row.length; j++) {
-      if (keyed.has(datumKey(this.w, realIndex, j))) survivors++;
+      if (keyed.has(this._keys(realIndex)[j])) survivors++;
     }
     return survivors / keyed.size < 0.5;
   }
@@ -3518,7 +3555,7 @@ class BoxCandleStick extends Bar {
       }
       this._prevHalves[realIndex] = map;
     }
-    const halves = map && map.get(datumKey(this.w, realIndex, j));
+    const halves = map && map.get(this._keys(realIndex)[j]);
     return halves && halves.length === 2 ? halves[pi] : null;
   }
   /**
@@ -3528,7 +3565,7 @@ class BoxCandleStick extends Bar {
    */
   // @ts-ignore -- BoxCandleStick.draw has an extra ctype param compared to Bar.draw
   draw(series, ctype, seriesIndex) {
-    var _a;
+    var _a, _b;
     const w = this.w;
     const graphics = new Graphics(this.w);
     const type = w.globals.comboCharts ? ctype : w.config.chart.type;
@@ -3536,16 +3573,17 @@ class BoxCandleStick extends Bar {
     this.candlestickOptions = this.w.config.plotOptions.candlestick;
     this.boxOptions = this.w.config.plotOptions.boxPlot;
     this.isHorizontal = w.config.plotOptions.bar.horizontal;
-    this.isOHLC = this.candlestickOptions && this.candlestickOptions.type === "ohlc";
     this.coreUtils = new CoreUtils(this.w);
     series = this.coreUtils.getLogSeries(series);
     this.series = series;
     this.yRatio = this.coreUtils.getLogYRatios(this.yRatio);
-    this.barHelpers.initVariables(series);
+    this.barHelpers.initVariables(series, seriesIndex);
     const ret = graphics.group({
       class: `apexcharts-${type}-series apexcharts-plot-series`
     });
     this.isBoxPlot = type === "boxPlot";
+    this.isOHLC = !this.isBoxPlot && ((_a = this.candlestickOptions) == null ? void 0 : _a.type) === "ohlc";
+    const jx = jitterExtent(w.candleData.seriesBoxPoints, w);
     for (let i = 0; i < series.length; i++) {
       let x;
       let y;
@@ -3671,6 +3709,7 @@ class BoxCandleStick extends Bar {
               i,
               pathFrom: (_a2 = this._prevBoxHalf(realIndex, j, pi)) != null ? _a2 : paths.pathFrom,
               fadeReveal,
+              noLabel: pi > 0,
               pathTo,
               strokeWidth,
               elSeries,
@@ -3692,7 +3731,7 @@ class BoxCandleStick extends Bar {
           }
         );
         if (boxPointsOpts && boxPointsOpts.show !== false) {
-          const pts = (_a = w.candleData.seriesBoxPoints[realIndex]) == null ? void 0 : _a[j];
+          const pts = (_b = w.candleData.seriesBoxPoints[realIndex]) == null ? void 0 : _b[j];
           if (pts && pts.length) {
             const logVal = (v) => (
               /** @type {any} */
@@ -3703,14 +3742,14 @@ class BoxCandleStick extends Bar {
             );
             let center, halfExtent, alongFn;
             if (this.isHorizontal) {
-              const yRatio = this.invertedYRatio;
+              const yRatio = this.invertedYRatio * (this.isReversed ? -1 : 1);
               const bh = barHeight != null ? barHeight : 0;
               const z = zeroW != null ? zeroW : 0;
               center = paths.barYPosition + bh / 2;
               halfExtent = bh / 2;
               alongFn = (v) => z + logVal(v) / yRatio;
             } else {
-              const yRatio = this.yRatio[translationsIndex];
+              const yRatio = this.yRatio[translationsIndex] * (this.isReversed ? -1 : 1);
               const bw = barWidth != null ? barWidth : 0;
               const z = zeroH != null ? zeroH : 0;
               center = paths.barXPosition + bw / 2;
@@ -3718,8 +3757,8 @@ class BoxCandleStick extends Bar {
               alongFn = (v) => z - logVal(v) / yRatio;
             }
             const groups = buildJitterGroups({
-              w,
               points: pts,
+              extent: jx,
               seedA: realIndex,
               seedB: j,
               center,
@@ -3748,15 +3787,13 @@ class BoxCandleStick extends Bar {
       w.globals.seriesXvalues[realIndex] = xArrj;
       w.globals.seriesYvalues[realIndex] = yArrj;
       if (w.globals.previousPaths.length > 0 && !fadeReveal) {
-        const newKeys = [];
-        for (let j = 0; j < series[i].length; j++) {
-          newKeys.push(datumKey(w, realIndex, j));
-        }
         renderBarExitGhosts({
           w,
           elSeries,
           record: this._prevRecord(realIndex),
-          newKeys,
+          newKeys: this._keys(realIndex).filter(
+            (_, j) => series[i][j] != null
+          ),
           isHorizontal: this.isHorizontal,
           speed: w.config.chart.animations.dynamicAnimation.speed
         });
@@ -3775,7 +3812,7 @@ class BoxCandleStick extends Bar {
     strokeWidth,
     cullBounds = null
   }) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c;
     const w = this.w;
     const graphics = new Graphics(this.w);
     const i = indexes.i;
@@ -3786,7 +3823,7 @@ class BoxCandleStick extends Bar {
     const getColor = (color2) => Array.isArray(color2) ? color2[realIndex] : color2;
     const colorPos = getColor(candleColors.upward);
     const colorNeg = getColor(candleColors.downward);
-    const yRatio = this.yRatio[indexes.translationsIndex];
+    const yRatio = this.yRatio[indexes.translationsIndex] * (this.isReversed ? -1 : 1);
     const ohlc = this.getOHLCValue(realIndex, j);
     let l1 = zeroH;
     let l2 = zeroH;
@@ -3803,9 +3840,11 @@ class BoxCandleStick extends Bar {
       x = pos.x;
       barXPosition = pos.barXPosition;
     }
-    if (typeof /** @type {any} */
-    ((_a = this.series[i]) == null ? void 0 : _a[j]) === "undefined" || /** @type {any} */
-    ((_b = this.series[i]) == null ? void 0 : _b[j]) === null) {
+    const hole = (
+      /** @type {any} */
+      ((_a = this.series[i]) == null ? void 0 : _a[j]) == null
+    );
+    if (hole) {
       y1 = zeroH;
       y2 = zeroH;
     } else {
@@ -3815,7 +3854,7 @@ class BoxCandleStick extends Bar {
       l2 = zeroH - ohlc.l / yRatio;
       m = zeroH - ohlc.m / yRatio;
     }
-    if (cullBounds && (barXPosition + barWidth < cullBounds.lo || barXPosition > cullBounds.hi) && !this._wasOnScreen(realIndex, j)) {
+    if (hole || cullBounds && (barXPosition + barWidth < cullBounds.lo || barXPosition > cullBounds.hi) && !this._wasOnScreen(realIndex, j)) {
       return {
         pathTo: null,
         pathFrom: null,
@@ -3845,7 +3884,7 @@ class BoxCandleStick extends Bar {
       ];
     }
     let pathFrom = null;
-    const morphFrom = (_d = (_c = this.ctx) == null ? void 0 : _c.morphTypeChange) == null ? void 0 : _d.getInitialPathFor(realIndex, j);
+    const morphFrom = (_c = (_b = this.ctx) == null ? void 0 : _b.morphTypeChange) == null ? void 0 : _c.getInitialPathFor(realIndex, j);
     if (morphFrom) {
       pathFrom = morphFrom;
     } else if (w.globals.previousPaths.length > 0) {
@@ -3884,7 +3923,7 @@ class BoxCandleStick extends Bar {
     zeroW,
     strokeWidth
   }) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c;
     const w = this.w;
     const graphics = new Graphics(this.w);
     const i = indexes.i;
@@ -3893,7 +3932,7 @@ class BoxCandleStick extends Bar {
     const { colors: candleColors } = w.config.plotOptions.candlestick;
     const { colors: boxColors } = this.boxOptions;
     const getColor = (color2) => Array.isArray(color2) ? color2[realIndex] : color2;
-    const yRatio = this.invertedYRatio;
+    const yRatio = this.invertedYRatio * (this.isReversed ? -1 : 1);
     const ohlc = this.getOHLCValue(realIndex, j);
     let color = ohlc.o < ohlc.c ? [getColor(candleColors.upward)] : [getColor(candleColors.downward)];
     if (this.isBoxPlot) {
@@ -3905,9 +3944,11 @@ class BoxCandleStick extends Bar {
     let x2 = Math.max(ohlc.o, ohlc.c);
     let m = ohlc.m;
     const barYPosition = y + barHeight * this.visibleI;
-    if (typeof /** @type {any} */
-    ((_a = this.series[i]) == null ? void 0 : _a[j]) === "undefined" || /** @type {any} */
-    ((_b = this.series[i]) == null ? void 0 : _b[j]) === null) {
+    const hole = (
+      /** @type {any} */
+      ((_a = this.series[i]) == null ? void 0 : _a[j]) == null
+    );
+    if (hole) {
       x1 = zeroW;
       x2 = zeroW;
     } else {
@@ -3922,7 +3963,7 @@ class BoxCandleStick extends Bar {
       graphics.move(m, barYPosition) + graphics.line(m, barYPosition + barHeight) + graphics.line(x2, barYPosition + barHeight) + graphics.line(x2, barYPosition + barHeight / 2) + graphics.line(l2, barYPosition + barHeight / 2) + graphics.line(l2, barYPosition + barHeight - barHeight / 4) + graphics.line(l2, barYPosition + barHeight / 4) + graphics.line(l2, barYPosition + barHeight / 2) + graphics.line(x2, barYPosition + barHeight / 2) + graphics.line(x2, barYPosition) + graphics.line(m, barYPosition) + "z"
     ];
     let pathFrom = null;
-    const morphFrom = (_d = (_c = this.ctx) == null ? void 0 : _c.morphTypeChange) == null ? void 0 : _d.getInitialPathFor(realIndex, j);
+    const morphFrom = (_c = (_b = this.ctx) == null ? void 0 : _b.morphTypeChange) == null ? void 0 : _c.getInitialPathFor(realIndex, j);
     if (morphFrom) {
       pathFrom = morphFrom;
     } else if (w.globals.previousPaths.length > 0) {
@@ -3947,7 +3988,8 @@ class BoxCandleStick extends Bar {
         0
       ),
       barYPosition,
-      color
+      color,
+      culled: hole
     };
   }
   /**