apexcharts 8.2.0 → 8.3.0

package/src/modules/accessibility/KeyboardNavigation.js

@@ -1,7 +1,6 @@
 // @ts-check
 import Graphics from '../Graphics'
 import TooltipUtils from '../tooltip/Utils'
-import Utils from '../../utils/Utils'
 
 /**
  * ApexCharts KeyboardNavigation
@@ -16,7 +15,7 @@ import Utils from '../../utils/Utils'
  *                            heatmap, the row above / below
  *   Home:                    first data point in current series
  *   End:                     last data point in current series
- *   Enter / Space:           fire markerClick event (same as mouse click)
+ *   Enter / Space:           select the point and fire markerClick, as a click does
  *   Escape:                  exit keyboard nav, return focus to SVG
  */
 export default class KeyboardNavigation {
@@ -107,12 +106,27 @@ export default class KeyboardNavigation {
     // keyboard-nav tooltip so it doesn't remain stuck on screen while the chart
     // re-renders with a different set of visible series.
     this.ctx.events.addEventListener('legendClick', this._onLegendClick)
+
+    // An update (a keyboard zoom or pan among them) replaced a focused SVG:
+    // focus this one, with the cursor and a dismissed tooltip as they were
+    // (destroy), unless focus has gone somewhere else since
+    const kept = w.interact.keyNav
+    const doc = svgEl.ownerDocument
+    w.interact.keyNav = null
+    if (kept && (!doc.activeElement || doc.activeElement === doc.body)) {
+      ;[this.seriesIndex, this.dataPointIndex, , this._tooltipDismissed] = kept
+      // Focus alone, without starting nav, if nav was not running
+      if (!kept[2]) this.notePointerFocus()
+      svgEl.focus({ preventScroll: true })
+    }
   }
 
   /**
-   * Removes all event listeners. Called from chart.destroy().
+   * Removes all event listeners. Called from chart.destroy(), and with
+   * `updating` when an update is about to replace the SVG.
+   * @param {boolean} [updating]
    */
-  destroy() {
+  destroy(updating) {
     const w = this.w
     const svgEl = w.dom.Paper && w.dom.Paper.node
 
@@ -126,6 +140,14 @@ export default class KeyboardNavigation {
 
     if (!svgEl) return
 
+    if (updating && svgEl.getRootNode?.().activeElement === svgEl) {
+      w.interact.keyNav = [
+        this.seriesIndex,
+        this.dataPointIndex,
+        this.active,
+        this._tooltipDismissed,
+      ]
+    }
     svgEl.removeEventListener('focus', this._onFocus)
     svgEl.removeEventListener('blur', this._onBlur)
     svgEl.removeEventListener('keydown', this._onKeyDown)
@@ -192,7 +214,8 @@ export default class KeyboardNavigation {
     // If the chart is zoomed, snap the cursor to the first visible data point
     // so the user doesn't start navigating outside the current viewport.
     this._snapToVisibleRange()
-    this._showCurrentPoint()
+    // An update re-focusing a chart whose tooltip was dismissed (init)
+    if (!this._tooltipDismissed) this._showCurrentPoint()
   }
 
   _onBlur() {
@@ -249,20 +272,18 @@ export default class KeyboardNavigation {
         break
       case 'Home':
         e.preventDefault()
-        this.dataPointIndex = 0
-        this._skipNullForward()
+        this._seek(0, 1)
         this._showCurrentPoint()
         break
       case 'End':
         e.preventDefault()
-        this.dataPointIndex = this._getDataPointCount(this.seriesIndex) - 1
-        this._skipNullBackward()
+        this._seek(this._getDataPointCount(this.seriesIndex) - 1, -1)
         this._showCurrentPoint()
         break
       case 'Enter':
       case ' ':
         e.preventDefault()
-        this._fireClick()
+        this._fireClick(e)
         break
       case '+':
       case '=':
@@ -323,28 +344,16 @@ export default class KeyboardNavigation {
   }
 
   _canPan() {
-    // Pan only meaningful once the chart is zoomed in (otherwise full data is
-    // already visible). We still allow it whenever zoom is enabled — the
-    // toolbar's zoomUpdateOptions clamps to data bounds.
-    return this._canZoom()
+    // Unzoomed, the whole domain is in view: there is nothing to pan to
+    return this._canZoom() && this.w.interact.zoomed
   }
 
   /**
-   * Shift the visible x-range by ~10% in the given direction.
+   * Shift the visible x-range by ~10% in the given direction, as a drag pan.
    * @param {number} direction +1 = right, -1 = left
    */
   _panBy(direction) {
-    const toolbar = this.ctx.toolbar
-    if (!toolbar) return
-
-    const r = toolbar._currentXRange()
-    const minX = Number(r.minX)
-    const maxX = Number(r.maxX)
-    if (!isFinite(minX) || !isFinite(maxX) || minX === maxX) return
-
-    const span = maxX - minX
-    const step = span * 0.1 * direction
-    toolbar.zoomUpdateOptions(minX + step, maxX + step)
+    this.ctx.zoomPanSelection?.panBy(direction / 10)
     this._announce(direction > 0 ? 'Panned right' : 'Panned left')
   }
 
@@ -365,13 +374,15 @@ export default class KeyboardNavigation {
       // so ↑/↓ series switching would show the same content — suppress it.
       // For irregular time series the tooltip falls back to individual mode
       // (isXoverlap returns false), so up/down navigation is meaningful there.
-      // A heatmap or treemap tooltip is always one cell's, whatever
-      // tooltip.shared says (and it defaults to true), so ↑/↓ is the only
-      // way to another row.
+      // A heatmap or treemap tooltip is always one cell's and a radialBar's
+      // one ring's, whatever tooltip.shared says (and it defaults to true), so
+      // ↑/↓ is the only way to another row. Without a tooltip nothing shows
+      // the other series either.
       const ttCtx = this.w.globals.tooltip
       const type = w.config.chart.type
-      const perCell = type === 'heatmap' || type === 'treemap'
-      if (!perCell && ttCtx && ttCtx.tConfig && ttCtx.tConfig.shared) {
+      const perCell =
+        type === 'heatmap' || type === 'treemap' || type === 'radialBar'
+      if (!perCell && ttCtx?.ttItems && ttCtx.tConfig.shared) {
         const j = this.dataPointIndex
         const isActuallyShared =
           ttCtx.tooltipUtil &&
@@ -413,20 +424,7 @@ export default class KeyboardNavigation {
 
     if (dPoint !== 0) {
       // Move between data points (←/→)
-      const dpCount = this._getDataPointCount(this.seriesIndex)
-      let di = this.dataPointIndex + dPoint
-
-      if (di < 0) di = wrapAround ? dpCount - 1 : 0
-      if (di >= dpCount) di = wrapAround ? 0 : dpCount - 1
-
-      this.dataPointIndex = di
-
-      // Skip null values
-      if (dPoint > 0) {
-        this._skipNullForward()
-      } else {
-        this._skipNullBackward()
-      }
+      this._seek(this.dataPointIndex + dPoint, dPoint)
 
       // If the chart is zoomed, skip data points outside the visible range
       if (!this._isDataPointVisible(this.seriesIndex, this.dataPointIndex)) {
@@ -437,40 +435,26 @@ export default class KeyboardNavigation {
     this._showCurrentPoint()
   }
 
-  /** Advance dataPointIndex forward past any nulls */
-  _skipNullForward() {
-    const w = this.w
-    const si = this.seriesIndex
-    const dpCount = this._getDataPointCount(si)
-    let di = this.dataPointIndex
-    let attempts = 0
-
-    // Non-axis charts (pie, etc.) have flat numeric series — no nulls to skip
-    if (!Array.isArray(w.seriesData.series[si])) return
-
-    while (attempts < dpCount && w.seriesData.series[si][di] === null) {
-      di = (di + 1) % dpCount
-      attempts++
-    }
-    this.dataPointIndex = di
-  }
-
-  /** Retreat dataPointIndex backward past any nulls */
-  _skipNullBackward() {
+  /**
+   * Land on the first non-null point from `di` going `dir`. Past an edge it
+   * wraps only with wrapAround; when no point lies ahead the cursor stays.
+   * @param {number} di
+   * @param {number} dir
+   */
+  _seek(di, dir) {
     const w = this.w
-    const si = this.seriesIndex
-    const dpCount = this._getDataPointCount(si)
-    let di = this.dataPointIndex
-    let attempts = 0
-
-    // Non-axis charts (pie, etc.) have flat numeric series — no nulls to skip
-    if (!Array.isArray(w.seriesData.series[si])) return
-
-    while (attempts < dpCount && w.seriesData.series[si][di] === null) {
-      di = (di - 1 + dpCount) % dpCount
-      attempts++
+    const row = w.seriesData.series[this.seriesIndex]
+    const n = this._getDataPointCount(this.seriesIndex)
+    for (let k = 0; k < n; k++, di += dir) {
+      if (w.config.chart.accessibility.keyboard.navigation.wrapAround) {
+        di = (di + n) % n
+      } else if (di < 0 || di >= n) return
+      // Non-axis charts (pie, radialBar) have flat values, no nulls
+      if (!Array.isArray(row) || row[di] !== null) {
+        this.dataPointIndex = di
+        return
+      }
     }
-    this.dataPointIndex = di
   }
 
   // ─── Display ──────────────────────────────────────────────────────────────
@@ -480,13 +464,15 @@ export default class KeyboardNavigation {
     const w = this.w
     const ttCtx = w.globals.tooltip
 
-    if (!ttCtx || !ttCtx.ttItems) return
-
+    // Showing a point again undoes an Escape dismissal
+    this._tooltipDismissed = false
     // Keep globals consistent with the rest of the system
     w.interact.capturedSeriesIndex = i
     w.interact.capturedDataPointIndex = j
 
     this._applyFocusClass(i, j)
+    // No tooltip to read out the point, so the live region names it
+    if (!ttCtx?.ttItems) return this._announce(this._buildPointLabel(i, j))
     this._showTooltip(i, j, /** @type {any} */ (ttCtx))
   }
 
@@ -571,10 +557,13 @@ export default class KeyboardNavigation {
       tooltipEl.removeAttribute('aria-hidden')
     }
 
-    if (type === 'pie' || type === 'donut' || type === 'polarArea') {
+    if (
+      type === 'pie' ||
+      type === 'donut' ||
+      type === 'polarArea' ||
+      type === 'radialBar'
+    ) {
       this._showTooltipNonAxis(i, j, ttCtx, tooltipEl)
-    } else if (type === 'radialBar') {
-      this._showTooltipRadialBar(i, j, ttCtx, tooltipEl)
     } else if (type === 'heatmap' || type === 'treemap') {
       this._showTooltipHeatTree(i, j, ttCtx, tooltipEl, type)
     } else if (this._isBarLikeSeries(i)) {
@@ -1130,19 +1119,17 @@ export default class KeyboardNavigation {
   }
 
   /**
-   * pie / donut / polarArea
+   * pie / donut / polarArea (a slice per point, i is 0) and radialBar (a ring
+   * per series, j is 0)
    * @param {number} i
    * @param {number} j
    * @param {import('../tooltip/Tooltip').default} ttCtx
    * @param {HTMLElement} tooltipEl
    */
   _showTooltipNonAxis(i, j, ttCtx, tooltipEl) {
-    const w = this.w
-
-    // For pie-like charts the series index IS the data point / slice index
     ttCtx.tooltipLabels.drawSeriesTexts({
       ttItems: ttCtx.ttItems,
-      i: j,
+      i: i + j,
       shared: false,
     })
 
@@ -1151,12 +1138,9 @@ export default class KeyboardNavigation {
     const ttWidth = tooltipBound.width || ttCtx.tooltipRect.ttWidth || 0
     const ttHeight = tooltipBound.height || ttCtx.tooltipRect.ttHeight || 0
 
-    // Anchor on the arc centroid, through the same helper the mouse path uses
-    // so keyboard and pointer land a slice's tooltip in the same place. The
-    // path element carries j='${j}' (0-indexed); data:cx/cy are set on the
-    // path directly, not on the parent group.
-    const sliceEl = w.dom.baseEl.querySelector(`.apexcharts-pie-area[j='${j}']`)
-    const anchor = ttCtx.getSliceAnchor(sliceEl)
+    // Anchor on the arc's stamped centre (data:cx/cy), through the same helper
+    // the mouse path uses so keyboard and pointer land in the same place.
+    const anchor = ttCtx.getSliceAnchor(this._getFocusableElement(i, j))
     if (anchor) {
       const pos = ttCtx.tooltipPosition.placeOverAnchor(
         anchor.x,
@@ -1169,68 +1153,6 @@ export default class KeyboardNavigation {
       tooltipEl.style.top = pos.y + 'px'
     }
   }
-  /**
-   * radialBar — one ring per series, single value each
-   * @param {number} i
-   * @param {any} _j
-   * @param {import('../tooltip/Tooltip').default} ttCtx
-   * @param {HTMLElement} tooltipEl
-   */
-  _showTooltipRadialBar(i, _j, ttCtx, tooltipEl) {
-    const w = this.w
-
-    ttCtx.tooltipLabels.drawSeriesTexts({
-      ttItems: ttCtx.ttItems,
-      i,
-      shared: false,
-    })
-
-    const { ttWidth = 0, ttHeight = 0 } = ttCtx.getCachedDimensions()
-
-    // Each radial series is a ring; find the path and use its data:angle to
-    // compute the centroid at the midpoint of the arc.
-    const arcEl = w.dom.baseEl.querySelector(
-      `.apexcharts-radialbar-series[data\\:realIndex='${i}'] path`,
-    )
-    if (arcEl) {
-      const angle = parseFloat(arcEl.getAttribute('data:angle') ?? '') || 0
-      // Radial bars start from the top (initialAngle) and sweep clockwise
-      const initialAngle = w.config.plotOptions.radialBar.startAngle || 0
-      const midAngle = initialAngle + angle / 2
-
-      const centerX = w.layout.gridWidth / 2
-      const centerY = w.layout.gridHeight / 2
-      const radialSize =
-        w.globals.radialSize ||
-        Math.min(w.layout.gridWidth, w.layout.gridHeight) / 2
-
-      // Use the outer radius for this particular ring (series i)
-      const seriesCount = w.seriesData.series.length
-      const trackSize = radialSize / Math.max(seriesCount, 1)
-      const outerRadius = radialSize - i * trackSize
-      const innerRadius = outerRadius - trackSize
-      const ringRadius = (outerRadius + innerRadius) / 2
-
-      const centroid = Utils.polarToCartesian(
-        centerX,
-        centerY,
-        ringRadius,
-        midAngle,
-      )
-      const x = centroid.x + (w.layout.translateX || 0)
-      const y = centroid.y + (w.layout.translateY || 0)
-
-      const pos = ttCtx.tooltipPosition.placeOverAnchor(
-        x,
-        y,
-        ttWidth,
-        ttHeight,
-        10,
-      )
-      tooltipEl.style.left = pos.x + 'px'
-      tooltipEl.style.top = pos.y + 'px'
-    }
-  }
   /**
    * heatmap / treemap — position tooltip using element bounding rect
    * @param {number} i
@@ -1562,11 +1484,7 @@ export default class KeyboardNavigation {
     const mark = this._canvasMark(i, j)
     if (!mark) return this._drawCanvasMarkerFocusRing(i, j)
     const w = this.w
-    // The series' own group, by realIndex (`rel` counts within a type's
-    // groups, which a combo has several of).
-    const host = Array.from(
-      w.dom.baseEl.querySelectorAll('.apexcharts-series'),
-    ).find((g) => g.getAttribute('data:realIndex') === String(i))
+    const host = this._seriesGroup(i)
     if (!host) return null
     const ring = new Graphics(w, this.ctx).drawPath({
       d: mark.d,
@@ -1591,9 +1509,7 @@ export default class KeyboardNavigation {
     const marker = this._canvasMarker(i, j)
     if (!marker) return null
     const w = this.w
-    const host = Array.from(
-      w.dom.baseEl.querySelectorAll('.apexcharts-series'),
-    ).find((g) => g.getAttribute('data:realIndex') === String(i))
+    const host = this._seriesGroup(i)
     if (!host) return null
     const ring = new Graphics(w, this.ctx).drawPath({
       d: marker.d,
@@ -1729,9 +1645,7 @@ export default class KeyboardNavigation {
     }
 
     if (type === 'radialBar') {
-      return baseEl.querySelector(
-        `.apexcharts-radialbar-series[data\\:realIndex='${i}'] path`,
-      )
+      return baseEl.querySelector(`.apexcharts-radialbar-slice-${i}`)
     }
 
     if (this._isBarLikeSeries(i)) {
@@ -1739,31 +1653,44 @@ export default class KeyboardNavigation {
       // it, _drawCanvasFocusRing), and a jitter path that still carries its
       // `j` in the series is no stand-in for it.
       if (this._canvasMark(i, j)) return null
-      return baseEl.querySelector(
-        `.apexcharts-series[data\\:realIndex='${i}'] path[j='${j}']`,
-      )
+      return this._seriesGroup(i)?.querySelector(`path[j='${j}']`)
     }
 
     // line / area / scatter / bubble / radar — try marker element
-    const marker = baseEl.querySelector(
-      `.apexcharts-series[data\\:realIndex='${i}'] .apexcharts-marker[rel='${j}']`,
-    )
-    return marker || null
+    return this._seriesGroup(i)?.querySelector(`.apexcharts-marker[rel='${j}']`)
   }
 
-  // ─── Click / Enter ────────────────────────────────────────────────────────
+  /**
+   * The series' own group, by realIndex (`rel` counts within a type's groups,
+   * which a combo has several of). Matched in script: not every selector
+   * engine takes the escaped `data\:realIndex` attribute.
+   * @param {number} i
+   * @returns {Element | undefined}
+   */
+  _seriesGroup(i) {
+    return Array.from(
+      this.w.dom.baseEl.querySelectorAll('.apexcharts-series'),
+    ).find((g) => g.getAttribute('data:realIndex') === String(i))
+  }
 
-  _fireClick() {
-    const w = this.w
-    const ttCtx = w.globals.tooltip
-    if (!ttCtx) return
+  // ─── Click / Enter ────────────────────────────────────────────────────────
 
-    const syntheticEvent = {
-      type: 'mouseup',
-      clientX: 0,
-      clientY: 0,
-    }
-    ttCtx.markerClick(syntheticEvent, this.seriesIndex, this.dataPointIndex)
+  /**
+   * What a click on the focused mark does: its mousedown selects it
+   * (dataPointSelection), its mouseup slides a pie slice out and fires
+   * markerClick.
+   * @param {KeyboardEvent} e
+   */
+  _fireClick(e) {
+    const el = /** @type {any} */ (this._focusedEl)?.instance
+    const pie = this.ctx.pie
+    if (el) new Graphics(this.w, this.ctx).pathMouseDown(el, e)
+    if (pie && pie.getExpandOffset() > 0) pie.pieClicked(this.dataPointIndex)
+    this.w.globals.tooltip?.markerClick(
+      e,
+      this.seriesIndex,
+      this.dataPointIndex,
+    )
   }
 
   // ─── Helpers ──────────────────────────────────────────────────────────────
@@ -1795,8 +1722,9 @@ export default class KeyboardNavigation {
     if (type === 'pie' || type === 'donut' || type === 'polarArea') {
       return w.seriesData.series.length
     }
-    const series = w.seriesData.series
-    return series[si] && Array.isArray(series[si]) ? series[si].length : 0
+    // A radialBar ring is a series of one value
+    const s = w.seriesData.series[si]
+    return Array.isArray(s) ? s.length : 1
   }
 
   _clampCursor() {

package/src/modules/animations/LengthTransition.js

@@ -160,7 +160,7 @@ export function joinKeys(oldKeys, newKeys) {
  * @param {string[]} keys
  * @returns {string[]}
  */
-function uniquifyKeys(keys) {
+export function uniquifyKeys(keys) {
   /** @type {Map<string, number>} */
   const seen = new Map()
   return keys.map((k) => {
@@ -170,6 +170,26 @@ function uniquifyKeys(keys) {
   })
 }
 
+/**
+ * Datum keys of a series, unique within it: repeated category labels (or a
+ * timeline's rows) would otherwise share one key, and the keyed bar morph
+ * would hand every duplicate the same previous bar.
+ *
+ * @param {import('../../types/internal').ChartStateW} w
+ * @param {number} realIndex
+ * @param {number} [n] how many datums (default: the parsed series length)
+ * @returns {string[]}
+ */
+export function seriesKeys(
+  w,
+  realIndex,
+  n = w.seriesData.series[realIndex]?.length | 0,
+) {
+  return uniquifyKeys(
+    Array.from({ length: n }, (_, j) => datumKey(w, realIndex, j)),
+  )
+}
+
 /**
  * The keyed join for one series against the captured previous frame, or null
  * when this render is not an animated update for that series (no frame,
@@ -212,7 +232,7 @@ export function seriesJoin(
   const oldKeys = uniquifyKeys(
     oldY.map((_, j) => frameDatumKey(frame, realIndex, j)),
   )
-  const newKeys = uniquifyKeys(newY.map((_, j) => datumKey(w, realIndex, j)))
+  const newKeys = seriesKeys(w, realIndex)
   const join = joinKeys(oldKeys, newKeys)
   if (!join.ordered && !allowReorder) return null
   if (!join.changed && !includeIdentity) return null

package/src/modules/drilldown/Breadcrumb.js

@@ -39,8 +39,11 @@ export default class Breadcrumb {
     const elWrap = w.dom.elWrap
     if (!elWrap) return
 
-    // Remove any stale breadcrumb first (guards against double-render).
-    const existing = elWrap.querySelector('.apexcharts-breadcrumb')
+    // Remove any stale breadcrumb first (guards against double-render), but
+    // only its own: a zoomed treemap's shares the class.
+    const existing = elWrap.querySelector(
+      '.apexcharts-breadcrumb[aria-label^=Drill]',
+    )
     if (existing && existing.parentNode) {
       existing.parentNode.removeChild(existing)
     }

package/src/modules/helpers/Destroy.js

@@ -64,7 +64,7 @@ export default class Destroy {
       // alone leaks the listener + the dead instance on every updateOptions().
       // zoomPanSelection/toolbar were destroyed above; the full-destroy path
       // destroys keyboardNavigation via apexcharts.js before calling clear().
-      this.ctx._keyboardNavigation?.destroy()
+      this.ctx._keyboardNavigation?.destroy(true)
       this.ctx._keyboardNavigation = null
     } else {
       // Full destroy — null everything so GC can collect the instances.

package/src/modules/highlightFilter/HighlightFilter.js

@@ -31,7 +31,6 @@ import Utils from '../../utils/Utils'
 import { prefersReducedMotion } from '../Animations'
 import DataLabels from '../DataLabels'
 import {
-  datumKey,
   morphEasing,
   reconcileSeriesPaths,
   seriesJoin,
@@ -739,8 +738,10 @@ export default class HighlightFilter {
     // A chart that is not highlighting and was not a frame ago: one check.
     if (!active && !prevMap?.size) return undefined
     const { j, realIndex } = o
-    // datumKey names the category, which every series shares at that x.
-    const key = BAR + `${realIndex}::${datumKey(w, realIndex, j)}`
+    // The bar's own key: the category, which every series shares at that x,
+    // made unique per occurrence so a repeated category keeps its own part
+    // (and matches the exit ghost's name).
+    const key = BAR + `${realIndex}::${bar._keys(realIndex)[j]}`
     this._seen.add(key)
     const prev = prevMap?.get(key)
     const p = active ? hd.parts[realIndex]?.[j] : null
@@ -1114,8 +1115,8 @@ export default class HighlightFilter {
 
   /**
    * The stack a stacked bar datum joins, as the renderer resolves it
-   * (BarStacked drawStackedColumnPaths): its series group, then its x value
-   * on a numeric or datetime column axis, else its index.
+   * (BarStacked): its series group, then its x value on a numeric or
+   * datetime axis, else its index.
    * @param {number} i @param {number} j
    */
   _barKey(i, j) {
@@ -1123,9 +1124,7 @@ export default class HighlightFilter {
     return (
       w.labelData.seriesGroupIndex[i] +
       '|' +
-      (!w.config.plotOptions.bar.horizontal && w.axisFlags.isXNumeric
-        ? w.seriesData.seriesX[i]?.[j]
-        : j)
+      (w.axisFlags.isXNumeric ? w.seriesData.seriesX[i]?.[j] : j)
     )
   }
 
@@ -1233,7 +1232,7 @@ export default class HighlightFilter {
         ? this._lineBase(ln, type, series, i, realIndex, ti, has ? raw : null)
         : null
     if (pp && w.config.chart.stacked) {
-      this._swap(ln, () => ln._recordStackTops(realIndex, pp.yArrj))
+      this._swap(ln, () => ln._recordStackTops(realIndex, pp.yArrj, pp.S[i]))
       this._stkPrev.push(pp.yArrj)
     }
     if (exit) {

package/src/modules/highlightFilter/TreemapPart.js

@@ -414,10 +414,10 @@ function wrapParentTip(hf, tm) {
     }
     const v = tm._tip()?.querySelector('.apexcharts-tooltip-text-y-value')
     if (!v) return
-    let rest = `/ ${tm._formatValue(h.total)}`
+    let rest = `/ ${tm._formatValue(h.total, node._si)}`
     if (tt.share && h.total) rest += ` · ${Math.round(h.share * 100)}%`
     v.innerHTML =
-      `${tm._formatValue(h.value)} ` +
+      `${tm._formatValue(h.value, node._si)} ` +
       `<span class="apexcharts-highlight-total" style="font-weight: 400; opacity: 0.6">${rest}</span>`
   }
 }