apexcharts 8.2.0 → 8.3.1

package/src/modules/tooltip/Labels.js

@@ -22,13 +22,18 @@ export default class Labels {
     this.w = tooltipContext.w
     this.ttCtx = tooltipContext
     this.tooltipUtil = new Utils(tooltipContext)
+    // Stateless helpers a datetime hover used to build afresh on every move.
+    this.xFormat = new Formatters(this.w)
+    this.dateTime = new DateTime(this.w)
   }
 
   /** @param {{ shared?: boolean, ttItems?: any, i?: number, j?: any, y1?: any, y2?: any, e?: any }} opts */
   drawSeriesTexts({ shared = true, ttItems, i = 0, j = null, y1, y2, e }) {
     const w = this.w
+    const custom = w.config.tooltip.custom !== undefined
+    const tooltipEl = this.ttCtx.getElTooltip()
 
-    if (w.config.tooltip.custom !== undefined) {
+    if (custom) {
       this.handleCustomTooltip({ i, j, y1, y2, w })
     } else {
       this.toggleActiveInactiveSeries(shared, i)
@@ -46,11 +51,12 @@ export default class Labels {
       ttItems,
       shared,
       e,
+      // Markup from tooltip.custom has replaced the built-in rows: formatting
+      // them anyway ran every formatter into nodes no one sees.
+      rows: !custom || tooltipEl?.contains(ttItems?.[0]),
     })
 
     // Re-calculate tooltip dimensions now that we have drawn the text
-    const tooltipEl = this.ttCtx.getElTooltip()
-
     if (tooltipEl) {
       // One rect read, not two: each call forces a synchronous layout of the
       // whole tooltip, which on a shared tooltip with a row per series is the
@@ -61,12 +67,28 @@ export default class Labels {
     }
   }
 
-  /** @param {{i: any, j: any, values: any, ttItems: any, shared: any, e: any}} opts */
-  printLabels({ i, j, values, ttItems, shared, e }) {
+  /** @param {{i: any, j: any, values: any, ttItems: any, shared: any, e: any, rows?: boolean}} opts */
+  printLabels({ i, j, values, ttItems, shared, e, rows = true }) {
     const w = this.w
+    const ttCtx = this.ttCtx
     const { xVal, zVal, xAxisTTVal } = values
     const seriesLen = w.seriesData.series.length
 
+    // The title and the x-axis label read the same for every row, so they are
+    // written once a hover, not once per series.
+    if (ttItems?.[0]) {
+      if (rows && ttCtx.showTooltipTitle) {
+        ttCtx.tooltipTitle ??= w.dom.baseEl.querySelector(
+          '.apexcharts-tooltip-title',
+        )
+        if (ttCtx.tooltipTitle) ttCtx.tooltipTitle.innerHTML = xVal
+      }
+      if (ttCtx.isXAxisTooltipEnabled && ttCtx.xaxisTooltipText) {
+        ttCtx.xaxisTooltipText.innerHTML = xAxisTTVal !== '' ? xAxisTTVal : xVal
+      }
+    }
+    if (!rows) return
+
     const basePColor =
       j !== null && w.config.plotOptions.bar.distributed
         ? w.globals.colors[j]
@@ -103,8 +125,6 @@ export default class Labels {
         values: {
           val: row.val,
           goalVals: row.goalVals,
-          xVal,
-          xAxisTTVal,
           zVal,
         },
         seriesName: row.seriesName,
@@ -122,38 +142,28 @@ export default class Labels {
    */
   computeSeriesRow({ i, j, tIndex, shared, e, basePColor }) {
     const w = this.w
-    let f = this.getFormatters(i)
+    // A shared row speaks for series tIndex. Its formatters and name are taken
+    // once, not the hovered series' first and then thrown away, which ran the
+    // title formatter twice per row.
+    const own = w.globals.axisCharts && shared ? tIndex : i
+    const f = this.getFormatters(own)
     let pColor = basePColor
     let val
     let goalVals = /** @type {any[]} */ ([])
 
-    let seriesName =
-      w.config.chart.type === 'treemap'
-        ? f.yLbTitleFormatter(
-            String(/** @type {any} */ (w.config.series[i]).data[j].x),
-            {
-              series: w.seriesData.series,
-              seriesIndex: i,
-              dataPointIndex: j,
-              w,
-            },
-          )
-        : this.getSeriesName({
-            fn: f.yLbTitleFormatter,
-            index: i,
-            seriesIndex: i,
-            j,
-          })
+    const seriesName = this.getSeriesName({
+      fn: f.yLbTitleFormatter,
+      index: own,
+      seriesIndex: i,
+      j,
+      leaf:
+        w.config.chart.type === 'treemap'
+          ? String(/** @type {any} */ (w.config.series[i]).data[j].x)
+          : null,
+    })
 
     if (w.globals.axisCharts) {
       if (shared) {
-        f = this.getFormatters(tIndex)
-        seriesName = this.getSeriesName({
-          fn: f.yLbTitleFormatter,
-          index: tIndex,
-          seriesIndex: i,
-          j,
-        })
         pColor = w.globals.colors[tIndex]
         val = this.formatYValue(f, tIndex, j)
         goalVals = this.formatGoalVals(f, tIndex, j)
@@ -358,15 +368,22 @@ export default class Labels {
     }
   }
 
-  /** @param {{fn: any, index: any, seriesIndex: any, j: any}} opts */
-  getSeriesName({ fn, index, seriesIndex, j }) {
+  /**
+   * A treemap row is named by its leaf, not its series.
+   * @param {{fn: any, index: any, seriesIndex: any, j: any, leaf?: string | null}} opts
+   */
+  getSeriesName({ fn, index, seriesIndex, j, leaf }) {
     const w = this.w
-    return fn(String(w.seriesData.seriesNames[index]), {
+    const s = fn(leaf ?? String(w.seriesData.seriesNames[index]), {
       series: w.seriesData.series,
       seriesIndex,
       dataPointIndex: j,
       w,
     })
+    // A leaf's name is data and the title is written as HTML. The default
+    // title is the name plus ': ', so that shape gets the name's '<' escaped
+    // (enough in element text); markup a title formatter adds stays markup.
+    return leaf && s === leaf + ': ' ? leaf.replace(/</g, '&lt;') + ': ' : s
   }
 
   /**
@@ -397,7 +414,7 @@ export default class Labels {
     const w = this.w
     const ttCtx = this.ttCtx
 
-    const { val, goalVals, xVal, xAxisTTVal, zVal } = values
+    const { val, goalVals, zVal } = values
 
     // A hover processed mid-render (e.g. during a cross-type updateOptions, where
     // the new type's series count can momentarily outpace the rebuilt tooltip
@@ -417,25 +434,6 @@ export default class Labels {
       ttItemsChildren[0].style.display = 'none'
     }
 
-    if (ttCtx.showTooltipTitle) {
-      if (ttCtx.tooltipTitle === null) {
-        // get it once if null, and store it in class property
-        ttCtx.tooltipTitle = w.dom.baseEl.querySelector(
-          '.apexcharts-tooltip-title',
-        )
-      }
-      if (ttCtx.tooltipTitle) {
-        ttCtx.tooltipTitle.innerHTML = xVal
-      }
-    }
-
-    // if xaxis tooltip is constructed, we need to replace the innerHTML
-    if (ttCtx.isXAxisTooltipEnabled) {
-      if (ttCtx.xaxisTooltipText) {
-        ttCtx.xaxisTooltipText.innerHTML = xAxisTTVal !== '' ? xAxisTTVal : xVal
-      }
-    }
-
     const ttYLabel = refs.yLabel
     if (ttYLabel) {
       ttYLabel.innerHTML = seriesName ? seriesName : ''
@@ -580,12 +578,10 @@ export default class Labels {
       // Rows are indexed by series index, except where only one was allocated
       // (the non-shared cartesian case, see Tooltip.createTTElements) and
       // every hovered series writes into row 0.
-      const rowIndex = this.ttCtx.ttItems?.length === 1 ? 0 : i
-
-      // enable the first tooltip text group
-      const firstTooltipSeriesGroup = w.dom.baseEl.querySelector(
-        `.apexcharts-tooltip-series-group-${rowIndex}`,
-      )
+      const rows = this.ttCtx.ttItems
+      // enable the first tooltip text group, the row already held, not
+      // queried for on every move
+      const firstTooltipSeriesGroup = rows?.[rows.length === 1 ? 0 : i]
 
       if (firstTooltipSeriesGroup) {
         const ftsGroup = /** @type {HTMLElement} */ (firstTooltipSeriesGroup)
@@ -598,12 +594,7 @@ export default class Labels {
   /** @param {{i: any, j: any}} opts */
   getValuesToPrint({ i, j }) {
     const w = this.w
-    /**
-     * @param {any[]} ser
-     */
-    const filteredSeriesX = w.seriesData.seriesX.map(
-      (/** @type {any} */ ser) => (ser.length > 0 ? ser : []),
-    )
+    const seriesX = /** @type {any[][]} */ (w.seriesData.seriesX)
 
     let xVal = ''
     let xAxisTTVal = ''
@@ -623,16 +614,23 @@ export default class Labels {
       val = w.seriesData.series[i]
     } else {
       if (w.axisFlags.isXNumeric && w.config.chart.type !== 'treemap') {
-        xVal = filteredSeriesX[i][j]
-        if (filteredSeriesX[i].length === 0) {
+        xVal = seriesX[i][j]
+        if (seriesX[i].length === 0) {
           // a series (possibly the first one) might be collapsed, so get the next active index
           const firstActiveSeriesIndex =
-            this.tooltipUtil.getFirstActiveXArray(filteredSeriesX)
-          xVal = filteredSeriesX[firstActiveSeriesIndex][j]
+            this.tooltipUtil.getFirstActiveXArray(seriesX)
+          xVal = seriesX[firstActiveSeriesIndex][j]
         }
       } else {
-        const dataFormat = new Data(this.w)
-        if (dataFormat.isFormatXY()) {
+        // Asked once a render (drawTooltip starts a new one): asking per move
+        // built a Data and scanned the series, and on [{x, y}, null] data
+        // logged its mixed-format warning on every move.
+        const gen = this.ttCtx.allTooltipSeriesGroups
+        if (this._xyGen !== gen) {
+          this._xyGen = gen
+          this._isXY = new Data(this.w).isFormatXY()
+        }
+        if (this._isXY) {
           // a null entry is a gap in the data, with no x of its own
           const datum = /** @type {any} */ (w.config.series[i]).data[j]
           xVal = datum == null ? '' : datum.x
@@ -648,14 +646,13 @@ export default class Labels {
     const bufferXVal = xVal
 
     if (w.axisFlags.isXNumeric && w.config.xaxis.type === 'datetime') {
-      const xFormat = new Formatters(this.w)
-      xVal = xFormat.xLabelFormat(
+      xVal = this.xFormat.xLabelFormat(
         /** @type {Function} */ (w.formatters.ttKeyFormatter),
         bufferXVal,
         bufferXVal,
         {
           i: undefined,
-          dateFormatter: new DateTime(this.w).formatDate,
+          dateFormatter: this.dateTime.formatDate,
           w: this.w,
         },
       )

package/src/modules/tooltip/Marker.js

@@ -2,7 +2,6 @@
 import Graphics from '../Graphics'
 import Position from './Position'
 import Markers from '../../modules/Markers'
-import Utils from '../../utils/Utils'
 import TooltipUtils from './Utils'
 import { BrowserAPIs } from '../../ssr/BrowserAPIs.js'
 import { SVGNS } from '../../svg/math'
@@ -76,6 +75,8 @@ export default class Marker {
     // ones it actually touched. See enlargePoints().
     /** @type {Set<any>} */
     this.enlargedPoints = new Set()
+    // A hover may have moved a hover dot since the last resetPointsSize.
+    this.dirty = false
   }
 
   drawDynamicPoints() {
@@ -204,6 +205,7 @@ export default class Marker {
   enlargePaintedPoint(marker, x, y) {
     const w = this.w
     this.resetPointsSize()
+    this.dirty = true
 
     // A bubble's radius is its value, so enlargeCurrentPoint leaves an SVG
     // bubble as it is and clears only `markers.hover.size`; a painted one is
@@ -442,27 +444,29 @@ export default class Marker {
     this.enlargedPoints.delete(point)
   }
 
+  /**
+   * Put every marker a hover changed back as drawn: the ones newPointSize
+   * grew (tracked) and each visible series' hover dot, the only nodes the
+   * dot writers touch. This used to re-path every marker in the chart, on
+   * every hide.
+   */
   resetPointsSize() {
-    const w = this.w
-
-    // This is the chart-wide sweep, so nothing is left enlarged afterwards.
-    this.enlargedPoints.clear()
-
-    const points = w.dom.baseEl.querySelectorAll(
-      '.apexcharts-series:not(.apexcharts-series-collapsed) .apexcharts-marker',
-    )
-
-    for (let p = 0; p < points.length; p++) {
-      const size = parseFloat(
-        points[p].getAttribute('default-marker-size') ?? '0',
-      )
-
-      if (Utils.isNumber(size) && size > 0) {
-        const path = this.ttCtx.tooltipUtil.getPathFromPoint(points[p], size)
-        points[p].setAttribute('d', path)
-      } else {
-        points[p].setAttribute('d', 'M0,0')
+    const collapsed = this.w.globals.collapsedSeriesIndices
+    this.dirty = false
+    this.resetEnlargedPoints()
+    this.ttCtx.tooltipUtil.markerWraps().forEach(([i, ...dots]) => {
+      if (collapsed.indexOf(i) < 0) {
+        dots.forEach((p) => {
+          if (!p) return
+          const size = parseFloat(p.getAttribute('default-marker-size'))
+          p.setAttribute(
+            'd',
+            size > 0
+              ? this.ttCtx.tooltipUtil.getPathFromPoint(p, size)
+              : 'M0,0',
+          )
+        })
       }
-    }
+    })
   }
 }

package/src/modules/tooltip/Position.js

@@ -27,6 +27,24 @@ import {
  */
 const CLIP_CACHE_TTL = 1000
 
+/**
+ * The bar-like series groups `group` (an attribute test) names, as one
+ * selector, down to the path at `j` when given: a violin's body, never the
+ * jitter that shares its `j`.
+ * @param {string} group
+ * @param {number} [j]
+ */
+const barSel = (group, j) =>
+  ['bar', 'candlestick', 'boxPlot', 'violin', 'rangebar']
+    .map(
+      (t) =>
+        `.apexcharts-${t}-series .apexcharts-series[${group}]` +
+        (j == null
+          ? ''
+          : ` path${t === 'violin' ? '.apexcharts-violin-area' : ''}[j='${j}']`),
+    )
+    .join()
+
 /**
  * ApexCharts Tooltip.Position Class to move the tooltip based on x and y position.
  *
@@ -53,6 +71,11 @@ export default class Position {
      * @type {{ clippers?: Array<{ node: Element, x: boolean, y: boolean }> | null, at?: number }}
      */
     this.clipCache = { clippers: null, at: 0 }
+    /**
+     * Hover lookups by selector, for one drawTooltip (see `_marks`).
+     * @type {any}
+     */
+    this._memo = null
   }
 
   /**
@@ -505,11 +528,9 @@ export default class Position {
       // grid. Falls back to `translateYAxisX` when the labels group can't
       // be measured (e.g. yaxis.show=false but tooltip still drawn).
       let cx
-      const labelsGroup = /** @type {SVGGElement | null} */ (
-        w.dom.baseEl.querySelector(
-          `.apexcharts-yaxis[rel='${index}'] .apexcharts-yaxis-texts-g`,
-        )
-      )
+      const labelsGroup = this._marks(
+        `.apexcharts-yaxis[rel='${index}'] .apexcharts-yaxis-texts-g`,
+      )[0]
       const elWrapRect = w.dom.elWrap.getBoundingClientRect()
       if (labelsGroup) {
         const lr = labelsGroup.getBoundingClientRect()
@@ -733,12 +754,14 @@ export default class Position {
     // WCAG 2.4.11 Focus Not Obscured: when keyboard nav drives the tooltip,
     // make sure the tooltip box doesn't sit on top of the focused data
     // point. If the tooltip's vertical extent overlaps the point, push it
-    // above the point by enough margin to clear the focus stroke.
+    // above the point by enough margin to clear the focus stroke. The focused
+    // node is read off KeyboardNavigation: a query for its class walked the
+    // whole chart on every move, with nothing focused just as with something.
     const a11y = w.config?.chart?.accessibility
     if (
       a11y?.enabled &&
       a11y?.keyboard?.navigation?.enabled &&
-      w.dom?.baseEl?.querySelector?.('.apexcharts-keyboard-focused')
+      this.ttCtx.ctx?._keyboardNavigation?._focusedEl?.isConnected
     ) {
       // Same coord space as `y`: elWrap.
       const refPointY = pointY
@@ -818,14 +841,19 @@ export default class Position {
     }
     if (firstPaint) {
       // Force layout so the position above is committed with transitions
-      // disabled; then in a microtask (after the active class is added by
-      // the caller in the same tick) clear the override so subsequent
-      // moves between data points animate smoothly.
+      // disabled; then on the next frame (after the active class is added
+      // by the caller in the same tick) clear the override so subsequent
+      // moves between data points animate smoothly. Where there is no
+      // frame clock (server rendering, a DOM shim without one) it clears
+      // at once.
       void tooltipEl.offsetWidth
       tooltipEl.dataset.positioned = 'true'
-      requestAnimationFrame(() => {
+      const clear = () => {
         tooltipEl.style.transitionProperty = ''
-      })
+      }
+      if (typeof requestAnimationFrame == 'function')
+        requestAnimationFrame(clear)
+      else clear()
     }
   }
 
@@ -840,23 +868,22 @@ export default class Position {
     // batched markers are one path per series, so there is no per-point node
     // to find by `rel` and enlarge: fall through to the dynamic point
     if (w.globals.markers.size[i] > 0 && !w.globals.markers.batched) {
-      const allPoints = w.dom.baseEl.querySelectorAll(
-        ` .apexcharts-series[data\\:realIndex='${i}'] .apexcharts-marker`,
+      // The one marker at `j`, found by its rel: reading rel off every marker
+      // of the series was linear in its points on every move.
+      const point = w.dom.baseEl.querySelector(
+        ` .apexcharts-series[data\\:realIndex='${i}'] .apexcharts-marker[rel='${j}']`,
       )
-      for (let p = 0; p < allPoints.length; p++) {
-        if (parseInt(allPoints[p].getAttribute('rel') ?? '0', 10) === j) {
-          // Put back only what we previously grew. resetPointsSize() re-paths
-          // EVERY marker in the chart, which on this (non-shared) path ran per
-          // hover and made it cost more than the shared tooltip it is usually
-          // reached for to avoid. Everything that enlarges a marker goes
-          // through Marker.newPointSize, so the tracked set is complete; the
-          // zero-size `M0,0` branch resetPointsSize also handles only applies
-          // to dynamic points, which exist solely when largestSize is 0 or
-          // markers are batched — neither of which reaches this branch.
-          ttCtx.marker.resetEnlargedPoints()
-          ttCtx.marker.enlargeCurrentPoint(j, allPoints[p])
-          break
-        }
+      if (point) {
+        // Put back only what we previously grew. resetPointsSize() re-paths
+        // EVERY marker in the chart, which on this (non-shared) path ran per
+        // hover and made it cost more than the shared tooltip it is usually
+        // reached for to avoid. Everything that enlarges a marker goes
+        // through Marker.newPointSize, so the tracked set is complete; the
+        // zero-size `M0,0` branch resetPointsSize also handles only applies
+        // to dynamic points, which exist solely when largestSize is 0 or
+        // markers are batched, neither of which reaches this branch.
+        ttCtx.marker.resetEnlargedPoints()
+        ttCtx.marker.enlargeCurrentPoint(j, point)
       }
     } else {
       ttCtx.marker.resetPointsSize()
@@ -1100,20 +1127,10 @@ export default class Position {
     const painted = !!(/** @type {any} */ (w.globals).barCanvasCoords)
     // A violin's mark is its body (`.apexcharts-violin-area`), never the
     // jitter path that shares its `j`.
-    let jBar = painted
-      ? null
-      : w.dom.baseEl.querySelector(
-          `.apexcharts-bar-series .apexcharts-series[rel='${i}'] path[j='${j}'], .apexcharts-candlestick-series .apexcharts-series[rel='${i}'] path[j='${j}'], .apexcharts-boxPlot-series .apexcharts-series[rel='${i}'] path[j='${j}'], .apexcharts-violin-series .apexcharts-series[rel='${i}'] path.apexcharts-violin-area[j='${j}'], .apexcharts-rangebar-series .apexcharts-series[rel='${i}'] path[j='${j}']`,
-        )
+    let jBar = painted ? null : this._marks(barSel(`rel='${i}'`, j))[0]
     if (!jBar && !painted && typeof capturedSeries === 'number') {
       // Try with captured series index
-      jBar = w.dom.baseEl.querySelector(
-        `.apexcharts-bar-series .apexcharts-series[data\\:realIndex='${capturedSeries}'] path[j='${j}'],
-        .apexcharts-candlestick-series .apexcharts-series[data\\:realIndex='${capturedSeries}'] path[j='${j}'],
-        .apexcharts-boxPlot-series .apexcharts-series[data\\:realIndex='${capturedSeries}'] path[j='${j}'],
-        .apexcharts-violin-series .apexcharts-series[data\\:realIndex='${capturedSeries}'] path.apexcharts-violin-area[j='${j}'],
-        .apexcharts-rangebar-series .apexcharts-series[data\\:realIndex='${capturedSeries}'] path[j='${j}']`,
-      )
+      jBar = this._marks(barSel(`data\\:realIndex='${capturedSeries}'`, j))[0]
     }
     const bc = painted ? this._paintedBarFor(i, j, capturedSeries) : null
 
@@ -1242,6 +1259,30 @@ export default class Position {
     }
   }
 
+  /**
+   * The nodes `sel` finds, none included, kept until the tooltip is drawn
+   * again (every render and update does that) or one of them leaves the DOM.
+   * A move along one column re-ran the same whole-chart attribute scans on
+   * every mousemove. Rects are still read per move: the marks can be
+   * mid-animation.
+   * @param {string} sel
+   * @returns {Element[]}
+   */
+  _marks(sel) {
+    const gen = this.ttCtx.allTooltipSeriesGroups
+    let m = this._memo
+    if (!m || m.gen !== gen || m.size > 99) {
+      m = this._memo = new Map()
+      m.gen = gen
+    }
+    /** @type {Element[]} */
+    let hit = m.get(sel)
+    if (!hit || hit.some((n) => !n.isConnected)) {
+      m.set(sel, (hit = Array.from(this.w.dom.baseEl.querySelectorAll(sel))))
+    }
+    return hit
+  }
+
   /**
    * The coords cached for the bar-like mark at index `j` painted to canvas
    * (Bar.renderSeries), found the way `moveStickyTooltipOverBars` finds the
@@ -1259,11 +1300,7 @@ export default class Position {
     const w = this.w
     const bcc = /** @type {any} */ (w.globals).barCanvasCoords
     if (!bcc) return null
-    const groups = w.dom.baseEl.querySelectorAll(
-      ['bar', 'candlestick', 'boxPlot', 'violin', 'rangebar']
-        .map((t) => `.apexcharts-${t}-series .apexcharts-series[rel='${rel}']`)
-        .join(', '),
-    )
+    const groups = this._marks(barSel(`rel='${rel}'`))
     for (let g = 0; g < groups.length; g++) {
       const realIndex = groups[g].getAttribute('data:realIndex')
       if (realIndex !== null && bcc[realIndex]?.[j]) return bcc[realIndex][j]
@@ -1352,7 +1389,7 @@ export default class Position {
         if (c?.type === 'violin' && !hidden.includes(Number(key))) take(c.cx)
       }
     } else {
-      const bodies = w.dom.baseEl.querySelectorAll(
+      const bodies = this._marks(
         `.apexcharts-violin-series .apexcharts-series:not(.apexcharts-series-collapsed) path.apexcharts-violin-area[j='${j}']`,
       )
       for (let k = 0; k < bodies.length; k++) {
@@ -1374,7 +1411,7 @@ export default class Position {
    */
   _barsExtentInGrid(j) {
     const w = this.w
-    const marks = w.dom.baseEl.querySelectorAll(
+    const marks = this._marks(
       `.apexcharts-bar-series path[j='${j}'],` +
         `.apexcharts-rangebar-series path[j='${j}'],` +
         `.apexcharts-candlestick-series path[j='${j}'],` +
@@ -1425,7 +1462,7 @@ export default class Position {
    */
   _datapointCenterXFromBars(j) {
     const w = this.w
-    const bars = w.dom.baseEl.querySelectorAll(
+    const bars = this._marks(
       `.apexcharts-bar-series path[j='${j}'],` +
         `.apexcharts-rangebar-series path[j='${j}']`,
     )
@@ -1435,8 +1472,8 @@ export default class Position {
 
     let unionLeft = Infinity
     let unionRight = -Infinity
+    const plot = TooltipUtils.plotRect(w)
     if (painted) {
-      const plot = TooltipUtils.plotRect(w)
       unionLeft = plot.left + painted.left * plot.zoom
       unionRight = plot.left + painted.right * plot.zoom
     }
@@ -1452,7 +1489,7 @@ export default class Position {
     // Convert to data-area-local x from the plot origin, the space `cx` and the
     // crosshair are already in. Measuring from the `.apexcharts-grid` element
     // rect instead only works while the grid draws nothing outside its own box.
-    return AxisMapping.screenXToPlotPx(w, (unionLeft + unionRight) / 2)
+    return AxisMapping.screenXToPlotPx(w, (unionLeft + unionRight) / 2, plot)
   }
 
   /**
@@ -1476,7 +1513,7 @@ export default class Position {
     // config-time, but the selector is harmless), and violin, read as its
     // whole glyph: body, box lane and jitter or rain, so the box clears a
     // raincloud's lanes as well as its cloud.
-    const bars = w.dom.baseEl.querySelectorAll(
+    const bars = this._marks(
       `.apexcharts-bar-series path[j='${j}'],` +
         `.apexcharts-rangebar-series path[j='${j}'],` +
         `.apexcharts-boxPlot-series path[j='${j}'],` +