apexcharts 8.2.0 → 8.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "apexcharts",
-  "version": "8.2.0",
+  "version": "8.3.0",
   "description": "A JavaScript Chart Library",
   "repository": {
     "type": "git",

package/src/apexcharts.js

@@ -862,6 +862,9 @@ export default class ApexCharts {
         ) {
           me.keyboardNavigation?.init()
         }
+        // The focus note is for this render only: one that nav was off for
+        // must not pull focus back when a later update turns nav on
+        w.interact.keyNav = null
 
         if (
           Environment.isBrowser() &&
@@ -2609,22 +2612,26 @@ export default class ApexCharts {
    * Returns the highest y value in the specified series.
    *
    * @param {number} [seriesIndex=0]
-   * @returns {number}
+   * @returns {number | undefined}
    */
   getHighestValueInSeries(seriesIndex = 0) {
-    const range = new Range(this.w)
-    return range.getMinYMaxY(seriesIndex).highestY
+    return (
+      this.w.seriesData.series[seriesIndex] &&
+      new Range(this.w).getMinYMaxY(seriesIndex).highestY
+    )
   }
 
   /**
    * Returns the lowest y value in the specified series.
    *
    * @param {number} [seriesIndex=0]
-   * @returns {number}
+   * @returns {number | undefined}
    */
   getLowestValueInSeries(seriesIndex = 0) {
-    const range = new Range(this.w)
-    return range.getMinYMaxY(seriesIndex).lowestY
+    return (
+      this.w.seriesData.series[seriesIndex] &&
+      new Range(this.w).getMinYMaxY(seriesIndex).lowestY
+    )
   }
 
   /**

package/src/assets/apexcharts.css

@@ -1040,6 +1040,41 @@ rect.legend-mouseover-inactive,
   cursor: move
 }
 
+.apexcharts-wheel-hint {
+  position: absolute;
+  inset: 0;
+  z-index: 12;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+
+.apexcharts-wheel-hint-visible {
+  opacity: 1;
+}
+
+.apexcharts-wheel-hint span {
+  padding: 6px 12px;
+  border-radius: 8px;
+  font-size: 13px;
+  color: #fff;
+  background: rgba(28, 28, 31, 0.82);
+}
+
+.apexcharts-theme-dark .apexcharts-wheel-hint span {
+  color: #1c1c1f;
+  background: rgba(255, 255, 255, 0.9);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .apexcharts-wheel-hint {
+    transition: none;
+  }
+}
+
 .apexcharts-menu-icon,
 .apexcharts-measure-icon,
 .apexcharts-pan-icon,

package/src/charts/Bar.js

@@ -7,10 +7,10 @@ import Filters from '../modules/Filters'
 import Graphics from '../modules/Graphics'
 import Animations, { computeStagger } from '../modules/Animations'
 import {
-  datumKey,
   lengthTransitionEnabled,
   renderBarExitGhosts,
   seriesJoin,
+  seriesKeys,
 } from '../modules/animations/LengthTransition'
 import Series from '../modules/Series'
 import AxisMapping from '../modules/AxisMapping'
@@ -136,7 +136,7 @@ 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
    */
@@ -145,6 +145,7 @@ class Bar {
       this.yaxisIndex = this.w.globals.seriesYAxisReverseMap[realIndex]
       this.translationsIndex = realIndex
     }
+    this.isReversed = this.w.config.yaxis[this.yaxisIndex]?.reversed
     return this.translationsIndex
   }
 
@@ -163,7 +164,7 @@ class Bar {
     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',
@@ -210,10 +211,6 @@ class Bar {
 
       const translationsIndex = this.setSeriesAxis(realIndex)
 
-      this.isReversed =
-        w.config.yaxis[this.yaxisIndex] &&
-        w.config.yaxis[this.yaxisIndex].reversed
-
       if (this.isPyramid) {
         // Recompute the per-segment trapezoid layout once per series, before
         // drawing any of its segments. Each entry yields the segment's top
@@ -322,6 +319,9 @@ class Bar {
         if (this.isHorizontal) {
           paths = this.drawBarPaths({
             ...pathsParams,
+            ...(this.barHelpers.rows && {
+              y: initY + this.barHelpers.barRow(realIndex, j) * yDivision,
+            }),
             barHeight,
             zeroW,
             yDivision,
@@ -426,6 +426,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,
@@ -441,15 +442,11 @@ class Bar {
       // Exit ghosts: previous datums whose keys are gone shrink to their
       // baseline edge and fade under the reflowing survivors.
       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,
         })
@@ -461,7 +458,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,
@@ -490,6 +487,7 @@ class Bar {
     type,
     classes,
     fadeReveal = false,
+    noLabel, // a datum's extra paths (box halves, box lane) label nothing
   }) {
     const w = this.w
     const graphics = new Graphics(this.w, this.ctx)
@@ -619,6 +617,7 @@ class Bar {
         barYPosition,
         visibleSeries,
         hl: hl?.label,
+        noLabel,
       })
     )
 
@@ -640,28 +639,23 @@ class Bar {
 
     // Drawn only to slide out of view (see _wasOnScreen): removed once the
     // update has landed, so nothing is left lying off-screen.
+    // Culled on the bar's own centre: the label x carries dataLabels.offsetX,
+    // which dropped the first or last columns even with labels off.
     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 === undefined
+          ? 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
 
@@ -711,7 +705,7 @@ class Bar {
           pathTo,
           stroke: lineFill,
           strokeWidth,
-          strokeLineCap: w.config.stroke.lineCap,
+          strokeLinecap: w.config.stroke.lineCap,
           fill: pathFill,
           pathToInterp,
           animationDelay: delay,
@@ -777,12 +771,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],
       })
 
       // Highlight filter: fade this whole and draw its part above it (below
@@ -886,7 +880,10 @@ class Bar {
     // band.
     if (w.config.plotOptions.bar.hideZeroBarsWhenGrouped) {
       const { nonZeroColumns, zeroEncounters } =
-        this.barHelpers.getZeroValueEncounters({ i, j })
+        this.barHelpers.getZeroValueEncounters({
+          i: indexes.realIndex,
+          j,
+        })
 
       if (nonZeroColumns > 0) {
         barHeight = (this.seriesLen * barHeight) / nonZeroColumns
@@ -1054,7 +1051,7 @@ class Bar {
     } else {
       if (w.config.plotOptions.bar.hideZeroBarsWhenGrouped) {
         const { nonZeroColumns, zeroEncounters } =
-          this.barHelpers.getZeroValueEncounters({ i, j })
+          this.barHelpers.getZeroValueEncounters({ i: realIndex, j })
 
         if (nonZeroColumns > 0) {
           barWidth = (this.seriesLen * barWidth) / nonZeroColumns
@@ -1122,6 +1119,7 @@ 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
@@ -1133,15 +1131,15 @@ class Bar {
       // ranges cannot drift apart.
       x =
         AxisMapping.dataXToPx(w, w.seriesData.seriesX[sxI][j]) -
-        (barWidth * this.seriesLen) / 2
+        (barWidth * (overlay ? 1 : this.seriesLen)) / 2
     }
 
     // Overlaid histogram series all sit on the bin, rather than stepping across
-    // it one series-width at a time. `seriesLen` is already forced to 1 above,
-    // so `barWidth` is the whole bin and stepping would march each series clear
-    // of the last.
+    // it one series-width at a time. `barWidth` is already the whole bin, so
+    // centring on seriesLen bars or stepping would march each series clear of
+    // the last.
     return {
-      barXPosition: x + (isHistogramOverlay(w) ? 0 : barWidth * this.visibleI),
+      barXPosition: x + (overlay ? 0 : barWidth * this.visibleI),
       x,
     }
   }
@@ -1163,7 +1161,18 @@ 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 ||= {})
+    return (c[realIndex] ||= seriesKeys(this.w, realIndex))
   }
 
   /**
@@ -1235,20 +1244,21 @@ class Bar {
     if (lengthTransitionEnabled(w) && w.globals.previousPaths.length > 0) {
       const record = this._prevRecord(realIndex)
       const dataLen = w.seriesData.series[realIndex]?.length ?? 0
+      const keyed = record && this._prevKeyedPaths(realIndex)
       if (!record) {
         result = dataLen > 0 // a brand-new series entering
-      } else if (record.paths.length !== dataLen) {
-        result = true
+      } else if (keyed) {
+        // Off-screen bars are not drawn, so a zoomed series has fewer paths
+        // than points and comparing counts called every value update a
+        // layout change. The datum count comes from the previous frame; a
+        // drawn datum whose key is gone has left.
+        const now = new Set(this._keys(realIndex))
+        result =
+          (w.globals.prevStreamFrame?.seriesY?.[realIndex]?.length ??
+            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
@@ -1317,7 +1327,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 {
@@ -1535,14 +1545,11 @@ 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
   }
 

package/src/charts/BarStacked.js

@@ -27,7 +27,7 @@ class BarStacked extends Bar {
     series = coreUtils.getLogSeries(series)
     this.yRatio = coreUtils.getLogYRatios(this.yRatio)
 
-    this.barHelpers.initVariables(series)
+    this.barHelpers.initVariables(series, seriesIndex)
 
     if (w.config.chart.stackType === '100%') {
       series = w.globals.comboCharts
@@ -74,10 +74,6 @@ class BarStacked extends Bar {
 
       const translationsIndex = this.setSeriesAxis(realIndex)
 
-      this.isReversed =
-        w.config.yaxis[this.yaxisIndex] &&
-        w.config.yaxis[this.yaxisIndex].reversed
-
       // el to which series will be drawn
       let elSeries = this.graphics.group({
         class: `apexcharts-series`,
@@ -160,6 +156,11 @@ class BarStacked extends Bar {
         if (this.isHorizontal) {
           paths = this.drawStackedBarPaths({
             ...commonPathOpts,
+            ...(this.barHelpers.rows && {
+              y:
+                initPositions.y +
+                this.barHelpers.barRow(realIndex, j) * yDivision,
+            }),
             zeroW,
             barHeight,
             yDivision,
@@ -263,6 +264,7 @@ class BarStacked extends Bar {
           series,
           barHeight,
           barWidth,
+          barXPosition: paths.barXPosition,
           elDataLabelsWrap,
           elGoalsMarkers,
           type: 'bar',
@@ -286,7 +288,7 @@ class BarStacked extends Bar {
       ret.add(elSeries)
     }
 
-    if (heldMirrors) this.settleHeldMirrors()
+    if (heldMirrors) this.settleHeldMirrors(ret)
 
     return ret
   }
@@ -310,8 +312,12 @@ class BarStacked extends Bar {
    * 'bottom' → 'top', where the endpoint really is rounded at the other end;
    * everywhere else the mirror is an exact identity on the settled shape, so
    * removing it changes nothing on screen.
+   *
+   * The marks are collected now, not when the timer fires: a query then also
+   * stripped the mirrors a LATER update was still holding mid-tween.
+   * @param {any} [ret] this draw's series group (default: the whole chart)
    */
-  settleHeldMirrors() {
+  settleHeldMirrors(ret) {
     const w = this.w
     if (!Environment.isBrowser()) return
 
@@ -319,18 +325,18 @@ class BarStacked extends Bar {
     // Matches the collapsing-series hold: morphSVG applies the stagger delay
     // twice, so the real tail runs past dynamicAnimation.speed on its own.
     const hold = (anim.dynamicAnimation.speed || 0) + (anim.speed || 0) + 100
+    const held = (ret ? ret.node : w.dom.baseEl).querySelectorAll(
+      '.apexcharts-flip-held',
+    )
 
     setTimeout(() => {
-      if (w.globals.isDestroyed || !Utils.elementExists(w.dom.baseEl)) return
-      w.dom.baseEl
-        .querySelectorAll('.apexcharts-flip-held')
-        .forEach((/** @type {Element} */ el) => {
-          el.classList.remove(
-            'apexcharts-flip-held',
-            'apexcharts-flip-y',
-            'apexcharts-flip-x',
-          )
-        })
+      held.forEach((/** @type {Element} */ el) => {
+        el.classList.remove(
+          'apexcharts-flip-held',
+          'apexcharts-flip-y',
+          'apexcharts-flip-x',
+        )
+      })
     }, hold)
   }
 
@@ -454,53 +460,34 @@ class BarStacked extends Bar {
     const j = indexes.j
     const realIndex = indexes.realIndex
     const translationsIndex = indexes.translationsIndex
+    // past the end of a short series reads as null, as a padded one would
+    const v = /** @type {any} */ (this.series)[i]?.[j] ?? null
 
-    let prevBarW = 0
-    for (let k = 0; k < this.groupCtx.prevXF.length; k++) {
-      prevBarW = prevBarW + this.groupCtx.prevXF[k][j]
-    }
-
-    // Where this series sits in its group's stack. See the note in
-    // drawStackedColumnPaths: the index has to count the series this renderer
-    // has already drawn for the group, which is exactly what prevX holds.
-    const gsi = this.groupCtx.prevX.length
-
-    if (gsi > 0) {
-      let bXP = zeroW
-
-      if (this.groupCtx.prevXVal[gsi - 1][j] < 0) {
-        bXP =
-          /** @type {any} */ (this.series)[i]?.[j] >= 0
-            ? this.groupCtx.prevX[gsi - 1][j] +
-              prevBarW -
-              (this.isReversed ? prevBarW : 0) * 2
-            : this.groupCtx.prevX[gsi - 1][j]
-      } else if (this.groupCtx.prevXVal[gsi - 1][j] >= 0) {
-        bXP =
-          /** @type {any} */ (this.series)[i]?.[j] >= 0
-            ? this.groupCtx.prevX[gsi - 1][j]
-            : this.groupCtx.prevX[gsi - 1][j] -
-              prevBarW +
-              (this.isReversed ? prevBarW : 0) * 2
-      }
-
-      barXPosition = bXP
+    // The layer below is found by x on a numeric axis, as for columns (see
+    // drawStackedColumnPaths): a series without a row's x leaves that row's
+    // stack as it was.
+    const g = this.groupCtx
+    const key = w.axisFlags.isXNumeric ? w.seriesData.seriesX[realIndex][j] : j
+    const top = g.tops.get(key)
+    if (top) {
+      const [prevX, prevVal, prevBarW] = top
+      const flip = (this.isReversed ? prevBarW : 0) * 2
+      barXPosition =
+        prevVal < 0
+          ? v >= 0
+            ? prevX + prevBarW - flip
+            : prevX
+          : v >= 0
+            ? prevX
+            : prevX - prevBarW + flip
     } else {
-      // the first series will not have prevX values
+      // nothing is stacked in this row yet
       barXPosition = zeroW
     }
 
-    if (/** @type {any} */ (this.series)[i]?.[j] === null) {
-      x = barXPosition
-    } else {
-      x =
-        barXPosition +
-        /** @type {any} */ (this.series)[i]?.[j] / this.invertedYRatio -
-        (this.isReversed
-          ? /** @type {any} */ (this.series)[i]?.[j] / this.invertedYRatio
-          : 0) *
-          2
-    }
+    x =
+      barXPosition +
+      (v / this.invertedYRatio) * (this.isReversed ? -1 : 1)
 
     const paths = this.barHelpers.getBarpaths({
       barYPosition,
@@ -516,6 +503,8 @@ class BarStacked extends Bar {
       w,
     })
 
+    this._setTop(key, top, g.xArrj[j], g.xArrjVal[j], g.xArrjF[j], realIndex, j)
+
     this.barHelpers.barBackground({
       j,
       i,
@@ -561,6 +550,7 @@ class BarStacked extends Bar {
     const bc = indexes.bc
     const realIndex = indexes.realIndex
     const translationsIndex = indexes.translationsIndex
+    const v = /** @type {any} */ (this.series)[i]?.[j] ?? null
 
     if (w.axisFlags.isXNumeric) {
       let seriesVal = w.seriesData.seriesX[realIndex][j]
@@ -589,12 +579,12 @@ class BarStacked extends Bar {
       let bYP
       if (prevVal < 0) {
         bYP =
-          /** @type {any} */ (this.series)[i]?.[j] >= 0
+          v >= 0
             ? prevYValue - prevBarH + (this.isReversed ? prevBarH : 0) * 2
             : prevYValue
       } else if (prevVal >= 0) {
         bYP =
-          /** @type {any} */ (this.series)[i]?.[j] >= 0
+          v >= 0
             ? prevYValue
             : prevYValue + prevBarH - (this.isReversed ? prevBarH : 0) * 2
       }
@@ -621,20 +611,10 @@ class BarStacked extends Bar {
       barYPosition = zeroH
     }
 
-    if (/** @type {any} */ (this.series)[i]?.[j]) {
-      y =
-        barYPosition -
-        /** @type {any} */ (this.series)[i]?.[j] /
-          this.yRatio[translationsIndex] +
-        (this.isReversed
-          ? /** @type {any} */ (this.series)[i]?.[j] /
-            this.yRatio[translationsIndex]
-          : 0) *
-          2
-    } else {
-      // fixes #3610
-      y = barYPosition
-    }
+    // a null stays on its layer below (#3610)
+    y =
+      barYPosition -
+      (v / this.yRatio[translationsIndex]) * (this.isReversed ? -1 : 1)
 
     const paths = this.barHelpers.getColumnPaths({
       barXPosition,
@@ -642,7 +622,9 @@ class BarStacked extends Bar {
       y1: barYPosition,
       y2: y,
       yRatio: this.yRatio[translationsIndex],
-      strokeWidth: this.strokeWidth,
+      // the series' width even for an empty segment, so a hidden layer keeps
+      // its place, but no inset at all when no stroke is drawn
+      strokeWidth: w.config.stroke.show ? this.strokeWidth : 0,
       isReversed: this.isReversed,
       series: this.series,
       realIndex: indexes.realIndex,
@@ -651,17 +633,7 @@ class BarStacked extends Bar {
       w,
     })
 
-    const t = g.yArrj[j]
-    if (!isNaN(t)) {
-      g.tops.set(key, [
-        t,
-        g.yArrjVal[j],
-        (top ? top[2] : 0) + g.yArrjF[j],
-        (top ? top[3] : 0) + (w.seriesData.series[realIndex][j] || 0),
-        top ? Math.min(top[0], top[4]) : 1 / 0,
-        top ? Math.max(top[0], top[5]) : -1 / 0,
-      ])
-    }
+    this._setTop(key, top, g.yArrj[j], g.yArrjVal[j], g.yArrjF[j], realIndex, j)
 
     this.barHelpers.barBackground({
       bc,
@@ -681,13 +653,33 @@ class BarStacked extends Bar {
         zeroH,
         realIndex,
         j,
-        0,
+        translationsIndex,
       ),
       barXPosition,
       x: w.axisFlags.isXNumeric ? x : x + xDivision,
       y,
     }
   }
+
+  /**
+   * Record the segment just drawn as the top of its stack. Per key it holds
+   * the top and value of the last segment drawn there, the summed lengths and
+   * raw values of every segment so far (the total label's value), and the
+   * extreme tops below that segment (the total label's position).
+   * @param {any} key @param {any} top @param {number} t @param {any} val
+   * @param {number} len @param {number} realIndex @param {number} j
+   */
+  _setTop(key, top, t, val, len, realIndex, j) {
+    if (isNaN(t)) return
+    this.groupCtx.tops.set(key, [
+      t,
+      val,
+      (top ? top[2] : 0) + len,
+      (top ? top[3] : 0) + (this.w.seriesData.series[realIndex][j] || 0),
+      top ? Math.min(top[0], top[4]) : 1 / 0,
+      top ? Math.max(top[0], top[5]) : -1 / 0,
+    ])
+  }
 }
 
 export default BarStacked