apexcharts 8.2.0 → 8.3.1

package/src/charts/Icicle.js

@@ -38,10 +38,12 @@ import {
 import {
   bandScale,
   farEdge,
+  focusByKey,
   focusChain,
   parseSize,
   placeTree,
   resolveFocus,
+  setZoomCursor,
   sortTree,
   validateStrict,
 } from './common/partition/Partition'
@@ -131,6 +133,10 @@ export default class IcicleChart {
     this._roots = buildHierarchy(this.w)
     if (!this._roots.length) return g
     this._roots.forEach((r) => fillValues(r))
+    // Colour before sorting, so a branch keeps its authored palette slot (the
+    // one its legend marker shows) whatever `sort` does to its position.
+    this._nodesAll = []
+    this._colorNodes()
     sortTree(this._roots, this.cfg.sort)
     if (this.cfg.partition === 'strict') {
       validateStrict(this._roots, {
@@ -139,8 +145,6 @@ export default class IcicleChart {
       })
     }
 
-    this._nodesAll = []
-    this._colorNodes()
     this.total = this._roots.reduce((s, r) => s + Math.max(0, r.value), 0) || 1
     this._tooltip.total = this.total
 
@@ -149,7 +153,12 @@ export default class IcicleChart {
     g.add(this._cellsG)
     g.add(this._labelsG)
 
-    this._focus = null
+    // The focus outlives this instance by key (_relayout clears a stale one).
+    this._focus = focusByKey(
+      w.globals.icicleFocusKey,
+      this._nodesAll,
+      this._roots,
+    )
     this._relayout(this._focus)
 
     // Same gating as the sunburst and the pie family: a wipe intro on first
@@ -194,7 +203,7 @@ export default class IcicleChart {
     while (
       level.length === 1 &&
       level[0].children &&
-      level[0].children.length > 1
+      level[0].children.length
     ) {
       trunk.push(level[0])
       level = level[0].children
@@ -233,6 +242,7 @@ export default class IcicleChart {
    * @param {any} focus
    */
   _relayout(focus) {
+    this.w.globals.icicleFocusKey = focus && focus._key
     const extent = this._valueExtent()
     const maxDepth = this.cfg.maxDepth
     // `maxDepth` counts LEVELS; the walk wants a depth index.
@@ -286,9 +296,19 @@ export default class IcicleChart {
     })
 
     this._nodesAll.forEach((n) => {
+      n._sub = false
       if (!n._show) return
       n._d0 = scale.near(n._vDepth)
       n._d1 = farEdge(n, scale, this._focusMaxDepth, this.cfg.leaf, used)
+      // Under half a pixel along the value axis a cell shows nothing a reader
+      // can see or point at, and on flame-graph data most cells are that thin:
+      // no element, listeners or tween for it at rest. It keeps its box, so a
+      // zoom or update moves it into or out of that sliver like any other cell
+      // (_applyLayout), and a layout that widens it draws it again.
+      if (n._t1 - n._t0 < 0.5) {
+        n._show = false
+        n._sub = true
+      }
     })
   }
 
@@ -378,45 +398,51 @@ export default class IcicleChart {
     // (`dynamicAnimation.speed`) like an update, NOT on `animations.speed`,
     // which paces the first render. Reading the intro's clock made a click take
     // 800ms by default, which feels like lag rather than motion.
-    const dur = !anims.enabled
-      ? 0
-      : mode === 'none'
+    const dyn = anims.dynamicAnimation
+    const dur =
+      !anims.enabled || mode === 'none'
         ? 0
-        : mode === 'update' || mode === 'zoom'
-          ? anims.dynamicAnimation.speed || 350
-          : anims.speed || 500
+        : mode === 'intro'
+          ? (anims.speed ?? 500)
+          : dyn.enabled
+            ? (dyn.speed ?? 350)
+            : 0
 
     // Supersede any in-flight zoom: stale frames from the previous pass check
     // this and stop.
     const gen = ++this._zoomGen
 
     // Geometry of the PREVIOUS render (stashed on the persistent chart ctx —
-    // this module is re-instantiated on every data update).
+    // this module is re-instantiated on every data update). A zoom reads it too,
+    // for the cells too thin to have been drawn (`_sub`): their slot is there.
     const prev =
-      mode === 'update' ? /** @type {any} */ (this.ctx)._iciclePrevGeoms : null
+      dur > 0 && mode !== 'intro'
+        ? /** @type {any} */ (this.ctx)._iciclePrevGeoms
+        : null
 
     this._nodesAll.forEach((node) => {
+      // Where the cell is on screen: its live box, else last pass's box (`s`
+      // marks a sub-pixel slot that had no element).
+      const was =
+        node._cur || (prev && prev.get(node._key) && prev.get(node._key)())
       if (node._show) {
         const to = this._box(node)
         if (!node._el) node._el = this._createCellEl(node)
         // Per-layout, not per-element: a zoom changes which branches are cut.
         node._el.node.setAttribute('data:clipped', String(!!node._clipped))
-        this._setCursor(node)
+        setZoomCursor(this, node)
 
         if (mode === 'intro' && dur > 0) {
           this._wipeCell(node, to, dur, gen)
           return
         }
 
-        let from
+        // `_cur` is the cell's LIVE box (updated each frame), so an interrupted
+        // zoom continues from where it actually is; a cell that survived a data
+        // update, or was a sliver, tweens from its previous box.
+        let from = was
         let isNew = false
-        if (node._cur) {
-          // `_cur` is the cell's LIVE box (updated each frame), so an
-          // interrupted zoom continues from where it actually is.
-          from = node._cur
-        } else if (prev && prev.get(node._key)) {
-          from = prev.get(node._key) // survived a data update: tween in place
-        } else {
+        if (!from) {
           // A new cell grows out of the middle of the slot it is taking.
           from = {
             x: to.x + to.w / 2,
@@ -427,6 +453,11 @@ export default class IcicleChart {
           isNew = true
         }
         this._animateCell(node, from, to, dur, false, isNew, gen)
+      } else if (node._sub && was && !was.s) {
+        // On screen until now and a sliver from here: ride into that sliver,
+        // as an uncut cell would, and only then drop the element.
+        if (!node._el) node._el = this._createCellEl(node)
+        this._animateCell(node, was, this._box(node), dur, true, false, gen)
       } else if (node._el && node._cur) {
         const c = node._cur
         const collapsed = {
@@ -439,10 +470,13 @@ export default class IcicleChart {
       }
     })
 
-    // Stash what is now on screen so the NEXT data update can tween from it.
+    // Stash what is on screen so the NEXT data update can tween from it: read
+    // live, so an update landing mid-tween starts where the cell actually is.
     const geoms = new Map()
     this._nodesAll.forEach((n) => {
-      if (n._show) geoms.set(n._key, this._box(n))
+      const b = this._box(n)
+      if (n._sub) b.s = 1
+      if (n._show || n._sub) geoms.set(n._key, () => n._cur || b)
     })
     ;/** @type {any} */ (this.ctx)._iciclePrevGeoms = geoms
 
@@ -553,7 +587,8 @@ export default class IcicleChart {
 
     el.node.style.display = ''
     const startOp = hide ? Number(el.attr('opacity')) || 1 : fadeIn ? 0 : 1
-    const endOp = hide ? 0 : 1
+    // A cell thinning into a sliver stays opaque, as it would if it were drawn.
+    const endOp = hide && !node._sub ? 0 : 1
     el.attr({ opacity: startOp })
 
     el.animate(dur)
@@ -624,11 +659,14 @@ export default class IcicleChart {
       if (node._clipped) this._renderMoreMark(node)
     })
 
+    // Gen-checked: a superseded zoom's fade must not reveal labels over cells
+    // the newer zoom is still moving.
+    const gen = this._zoomGen
+    labelsG.attr({ opacity: dur > 0 ? 0 : 1 })
     if (dur > 0) {
-      labelsG.attr({ opacity: 0 })
-      labelsG.animate(250, dur).attr({ opacity: 1 })
-    } else {
-      labelsG.attr({ opacity: 1 })
+      labelsG.animate(250, dur).during((/** @type {number} */ p) => {
+        if (this._zoomGen === gen) labelsG.attr({ opacity: p })
+      })
     }
   }
 
@@ -642,7 +680,6 @@ export default class IcicleChart {
    * @param {any} node
    */
   _renderLabel(node) {
-    if (!Environment.isBrowser()) return
     const dl = this.cfg.dataLabels
     const style = dl.style
     const box = this._box(node)
@@ -669,7 +706,8 @@ export default class IcicleChart {
     const room = along - 8
     let label = node.name
     if (dl.showValue) {
-      const full = `${node.name}: ${node.value}`
+      // Trimmed like the node tooltip, so a rolled-up 0.1 + 0.2 reads 0.3.
+      const full = `${node.name}: ${+node.value.toPrecision(12)}`
       if (this._fits(full, room, fontPx)) label = full
     }
     const text = this._truncate(label, room, fontPx)
@@ -726,7 +764,6 @@ export default class IcicleChart {
    * @param {any} node
    */
   _renderMoreMark(node) {
-    if (!Environment.isBrowser()) return
     const box = this._box(node)
     const along = this._vertical ? box.w : box.h
     if (along < 18) return
@@ -790,22 +827,6 @@ export default class IcicleChart {
 
   // ----------------------------------------------------------------- zoom
 
-  /**
-   * A cell offers the pointer only while clicking it would change the view.
-   * A leaf under the current focus, or the single root of a one-root tree,
-   * resolves to the focus the reader is already on, and a pointer there
-   * promises a zoom that cannot happen. Asked on every layout, because a zoom
-   * changes the answer for every cell.
-   * @param {any} node
-   */
-  _setCursor(node) {
-    if (!Environment.isBrowser() || this.cfg.zoomOnClick === false) return
-    node._el.node.style.cursor = resolveFocus(node, this._focus, this._roots)
-      .changed
-      ? 'pointer'
-      : 'default'
-  }
-
   /**
    * Focus a node (zoom in), or zoom out one level when the current focus is
    * clicked.

package/src/charts/Line.js

@@ -111,17 +111,35 @@ class Line {
     // We call draw() for each series group
     this.prevSeriesY = []
     this.prevSeriesYByX = new Map()
+    // Ragged stacked x: the sorted union of the shown series' x, so each edge
+    // can pass through the stack at an x it lacks (see _iterateOverDataPoints)
+    /** @type {any[] | null} */
+    this._stackXs = null
+    if (w.config.chart.stacked && w.axisFlags.isXNumeric) {
+      const xs = series
+        .map((_, i) =>
+          w.globals.comboCharts ? /** @type {any} */ (seriesIndex)[i] : i,
+        )
+        .filter((ri) => !this._hidden(ri))
+        .map((ri) => w.seriesData.seriesX[ri] || [])
+      if (
+        xs.some(
+          (a) => a.length !== xs[0].length || a.some((v, k) => v !== xs[0][k]),
+        )
+      ) {
+        this._stackXs = [...new Set(xs.flat())].sort((a, b) => a - b)
+      }
+    }
 
     // push all series in an array, so we can draw in reverse order
     // (for stacked charts)
     const allSeries = []
 
     for (let i = 0; i < series.length; i++) {
-      series = this.lineHelpers.sameValueSeriesFix(i, series)
-
       const realIndex = w.globals.comboCharts
         ? /** @type {any} */ (seriesIndex)[i]
         : i
+      series = this.lineHelpers.sameValueSeriesFix(i, series, realIndex)
       const translationsIndex = this.yRatio.length > 1 ? realIndex : 0
 
       // A series hidden from the legend is drawn flat on the baseline instead
@@ -386,12 +404,7 @@ class Line {
     // (LengthTransition.shrinkCollapsingMarkers).
     if (w.config.chart.stacked || this.pointsChart) return null
     if (!Array.isArray(series[i]) || series[i].length !== 0) return null
-    if (
-      gl.collapsedSeriesIndices.indexOf(realIndex) === -1 &&
-      gl.ancillaryCollapsedSeriesIndices.indexOf(realIndex) === -1
-    ) {
-      return null
-    }
+    if (!this._hidden(realIndex)) return null
     const n = w.axisFlags.isXNumeric
       ? (w.seriesData.seriesX[realIndex] || []).length
       : gl.dataPoints
@@ -573,6 +586,15 @@ class Line {
     return this.prevSeriesYByX.get(key)
   }
 
+  /** @param {number} ri */
+  _hidden(ri) {
+    const g = this.w.globals
+    return (
+      g.collapsedSeriesIndices.indexOf(ri) > -1 ||
+      g.ancillaryCollapsedSeriesIndices.indexOf(ri) > -1
+    )
+  }
+
   /**
    * Fold a drawn series into the running stack top, so the next series can find
    * its baseline by x (#4886).
@@ -588,19 +610,19 @@ class Line {
    * correct if that representation ever changes.
    * @param {number} realIndex
    * @param {any[]} yArrj
+   * @param {any[]} [row] the drawn row, if not the series' own (a part)
    */
-  _recordStackTops(realIndex, yArrj) {
+  _recordStackTops(
+    realIndex,
+    yArrj,
+    row = this.w.seriesData.series[realIndex],
+  ) {
     const w = this.w
     // Only stacked series read the map back (stackTopAt), and the walk costs a
     // Map write per point: 4.7ms per update on a 50k line that is not stacked.
     if (!w.config.chart.stacked) return
     if (!Array.isArray(yArrj)) return
-    if (
-      w.globals.collapsedSeriesIndices.indexOf(realIndex) !== -1 ||
-      w.globals.ancillaryCollapsedSeriesIndices.indexOf(realIndex) !== -1
-    ) {
-      return
-    }
+    if (this._hidden(realIndex)) return
 
     for (let j = 0; j < yArrj.length; j++) {
       const key = this._stackKey(realIndex, j)
@@ -608,9 +630,10 @@ class Line {
       // A null y is a gap in this series, not a new top: leave whatever the
       // series below contributed. The ordinal path used to hand the null
       // straight to the next series as its baseline, where it coerced to 0 and
-      // put that point at the top of the plot.
+      // put that point at the top of the plot. Decided from the datum: the
+      // straight and step curves park a null at getY(minY), a real number.
       const y = yArrj[j]
-      if (!Utils.isNumber(y)) continue
+      if (!Utils.isNumber(y) || row?.[j] == null) continue
       this.prevSeriesYByX.set(key, y)
     }
   }
@@ -665,10 +688,14 @@ class Line {
 
     const forecast = w.config.forecastDataPoints
     if (forecast.count > 0 && type !== 'rangeArea') {
-      const forecastCutoff =
-        w.globals.seriesXvalues[realIndex][
-          w.globals.seriesXvalues[realIndex].length - forecast.count - 1
-        ]
+      // From the axis, not seriesXvalues: that holds null for a null value,
+      // which put the cutoff at 0 and dashed the whole series.
+      const ci = paths.xArrj.length - forecast.count - 1
+      const forecastCutoff = w.axisFlags.isXNumeric
+        ? (w.seriesData.seriesX[realIndex][ci] - w.globals.minX) / this.xRatio
+        : w.globals.padHorizontal +
+          this.categoryAxisCorrection +
+          ci * this.xDivision
       const elForecastMask = graphics.drawRect(
         forecastCutoff,
         0,
@@ -815,7 +842,7 @@ class Line {
           scrollMorph: !!streamScroll,
           stroke: 'none',
           strokeWidth: 0,
-          strokeLineCap: null,
+          strokeLinecap: null,
           fill: pathFill,
         })
         this.elSeries.add(renderedPath)
@@ -866,7 +893,7 @@ class Line {
           scrollMorph: !!streamScroll,
           stroke: lineFill,
           strokeWidth: this.strokeWidth,
-          strokeLineCap: w.config.stroke.lineCap,
+          strokeLinecap: w.config.stroke.lineCap,
           fill: type === 'rangeArea' ? pathFill : 'none',
         }
         const renderedPath = emit.renderPaths(linePathCommonOpts)
@@ -1018,6 +1045,15 @@ class Line {
       if (fast) return fast
     }
 
+    // Between two of its points a ragged stacked series contributes 0 at any
+    // x it lacks, so its edge passes through the stack top there (the axis
+    // when nothing below has that x), or the layers cross. midsAt[j] holds
+    // those vertices before point j.
+    const ks = stackSeries ? this._stackXs : null
+    let kp = 0
+    /** @type {any[][]} */
+    const midsAt = []
+
     for (let j = 0; j < iterations; j++) {
       if (series[i].length === 0) break
 
@@ -1025,12 +1061,24 @@ class Line {
         typeof series[i][j + 1] === 'undefined' || series[i][j + 1] === null
 
       if (w.axisFlags.isXNumeric) {
-        let sX = w.seriesData.seriesX[realIndex][j + 1]
-        if (typeof w.seriesData.seriesX[realIndex][j + 1] === 'undefined') {
+        const sxs = w.seriesData.seriesX[realIndex]
+        let sX = sxs[j + 1]
+        if (typeof sX === 'undefined') {
           /* fix #374 */
-          sX = w.seriesData.seriesX[realIndex][iterations - 1]
+          sX = sxs[iterations - 1]
         }
         x = (sX - w.globals.minX) / this.xRatio
+        if (ks) {
+          const m = []
+          while (ks[kp] <= sxs[j]) kp++
+          while (ks[kp] < sX) {
+            m.push([
+              (ks[kp] - w.globals.minX) / this.xRatio,
+              this.prevSeriesYByX.get(ks[kp++]) ?? this.zeroY,
+            ])
+          }
+          if (m.length) midsAt[j + 1] = m
+        }
       } else {
         x = x + this.xDivision
       }
@@ -1078,12 +1126,7 @@ class Line {
           const prevIndex = (pi) => {
             for (let pii = pi; pii >= 0; pii--) {
               const ri = seriesIndex?.[pii] ?? pii
-              if (
-                w.globals.collapsedSeriesIndices.indexOf(ri) === -1 &&
-                w.globals.ancillaryCollapsedSeriesIndices.indexOf(ri) === -1
-              ) {
-                return pii
-              }
+              if (!this._hidden(ri)) return pii
             }
             return -1
           }
@@ -1163,6 +1206,7 @@ class Line {
         j,
         x,
         y,
+        midsAt,
         y2,
         xArrj,
         yArrj,
@@ -1469,7 +1513,7 @@ class Line {
     }
   }
 
-  /** @param {{type: any, series: any, i: any, j: any, x: any, y: any, xArrj: any, yArrj: any, y2: any, y2Arrj: any, pX: any, pY: any, pathState: any, segmentStartX: any, linePath: any, areaPath: any, linePaths: any, areaPaths: any, curve: any, isRangeStart: any}} opts */
+  /** @param {{type: any, series: any, i: any, j: any, x: any, y: any, midsAt: any[][], xArrj: any, yArrj: any, y2: any, y2Arrj: any, pX: any, pY: any, pathState: any, segmentStartX: any, linePath: any, areaPath: any, linePaths: any, areaPaths: any, curve: any, isRangeStart: any}} opts */
   _createPaths({
     type,
     series,
@@ -1477,6 +1521,7 @@ class Line {
     j,
     x,
     y,
+    midsAt,
     xArrj,
     yArrj,
     y2,
@@ -1496,6 +1541,15 @@ class Line {
     const areaBottomY = this.areaBottomY
     const rangeArea = type === 'rangeArea'
     const isLowerRangeAreaPath = type === 'rangeArea' && isRangeStart
+    const mids = midsAt[j + 1]
+    // one segment per vertex, through any stack tops in between
+    /** @param {(...p: number[]) => string} f */
+    const via = (f) =>
+      mids
+        ? [...mids, [x, y]]
+            .map(([bx, by], k, a) => f(...(k ? a[k - 1] : [pX, pY]), bx, by))
+            .join('')
+        : f(pX, pY, x, y)
 
     switch (curve) {
       case 'monotoneCubic': {
@@ -1577,8 +1631,20 @@ class Line {
           case 2: {
             // Interpolate the full series with nulls excluded then extract the
             // null delimited segments with interpolated points included.
-            const _xAj = isRangeStart ? xArrj : xArrj.slice().reverse()
-            const _yAj = isRangeStart ? yAj : yAj.slice().reverse()
+            let _xAj = isRangeStart ? xArrj : xArrj.slice().reverse()
+            let _yAj = isRangeStart ? yAj : yAj.slice().reverse()
+            if (midsAt.length && !rangeArea) {
+              // fit through the stack tops between points too (see via)
+              /** @type {any[]} */ const P = []
+              _xAj.forEach((/** @type {any} */ v, /** @type {number} */ k) => {
+                if (_yAj[k] !== null && _yAj[k - 1] != null && midsAt[k]) {
+                  P.push(...midsAt[k])
+                }
+                P.push([v, _yAj[k]])
+              })
+              _xAj = P.map((p) => p[0])
+              _yAj = P.map((p) => p[1])
+            }
 
             const smoothInputs = getSmoothInputs(_xAj, _yAj)
             const points =
@@ -1664,7 +1730,16 @@ class Line {
         break
       }
       case 'smooth': {
-        const length = (x - pX) * 0.35
+        /**
+         * @param {number} ax
+         * @param {number} ay
+         * @param {number} bx
+         * @param {number} by
+         */
+        const toPoint = (ax, ay, bx, by) => {
+          const l = (bx - ax) * 0.35
+          return graphics.curve(ax + l, ay, bx - l, by, bx, by)
+        }
         if (series[i][j] === null) {
           pathState = 0
         } else {
@@ -1692,7 +1767,7 @@ class Line {
               }
               pathState = 1
               if (j < series[i].length - 2) {
-                const p = graphics.curve(pX + length, pY, x - length, y, x, y)
+                const p = via(toPoint)
                 linePath += p
                 areaPath += p
                 break
@@ -1715,7 +1790,7 @@ class Line {
                 areaPaths.push(areaPath)
                 pathState = -1
               } else {
-                const p = graphics.curve(pX + length, pY, x - length, y, x, y)
+                const p = via(toPoint)
                 linePath += p
                 areaPath += p
                 if (j >= series[i].length - 2) {
@@ -1744,11 +1819,12 @@ class Line {
       }
       default: {
         /**
-         * @param {string} curve
+         * @param {number} _ax
+         * @param {number} _ay
          * @param {number} x
          * @param {number} y
          */
-        const pathToPoint = (curve, x, y) => {
+        const pathToPoint = (_ax, _ay, x, y) => {
           /** @type {string} */ let path = ''
           switch (curve) {
             case 'stepline':
@@ -1790,7 +1866,7 @@ class Line {
               }
               pathState = 1
               if (j < series[i].length - 2) {
-                const p = pathToPoint(curve, x, y)
+                const p = via(pathToPoint)
                 linePath += p
                 areaPath += p
                 break
@@ -1813,7 +1889,7 @@ class Line {
                 areaPaths.push(areaPath)
                 pathState = -1
               } else {
-                const p = pathToPoint(curve, x, y)
+                const p = via(pathToPoint)
                 linePath += p
                 areaPath += p
                 if (j >= series[i].length - 2) {

package/src/charts/Pie.js

@@ -1278,17 +1278,11 @@ class Pie {
   }
 
   /**
-   * How far a clicked slice slides out, in px. 0 when the pull-out is off, when
-   * drilldown owns the click, and always for polarArea: there the radius
-   * encodes the value, so moving a slice outward would read as a bigger number.
+   * How far a clicked slice slides out, in px (see Filters.sliceExpandOffset).
    * @returns {number}
    */
   getExpandOffset() {
-    const pie = this.w.config.plotOptions.pie
-    if (!pie.expandOnClick || this.chartType === 'polarArea') return 0
-    if (Filters.drilldownBlocksSliceOffset(this.w)) return 0
-    const offset = Number(pie.expandOffset)
-    return Number.isFinite(offset) && offset > 0 ? offset : 0
+    return Filters.sliceExpandOffset(this.w)
   }
 
   /**

package/src/charts/Radar.js

@@ -206,7 +206,8 @@ class Radar {
        */
       s.forEach((/** @type {any} */ dv, /** @type {any} */ j) => {
         const range = Math.abs(this.maxValue - this.minValue)
-        dv = dv - this.minValue
+        // below yaxis.min sits at the centre, not on the opposite spoke
+        dv = Math.max(0, dv - this.minValue)
 
         if (this.isLog) {
           dv = this.coreUtils.getLogVal(this.logBase, dv, 0)
@@ -253,7 +254,7 @@ class Radar {
         shouldClipToGrid: false,
         bindEventsOnPaths: false,
         stroke: w.globals.stroke.colors[i],
-        strokeLineCap: w.config.stroke.lineCap,
+        strokeLinecap: w.config.stroke.lineCap,
       }
 
       let pathFrom = null
@@ -514,6 +515,7 @@ class Radar {
     const w = this.w
 
     const xaxisLabelsConfig = w.config.xaxis.labels
+    const lc = xaxisLabelsConfig.style.colors
     const elXAxisWrap = this.graphics.group({
       class: 'apexcharts-xaxis',
     })
@@ -551,11 +553,7 @@ class Radar {
           j: i,
           parent: elXAxisWrap,
           className: 'apexcharts-xaxis-label',
-          color:
-            Array.isArray(xaxisLabelsConfig.style.colors) &&
-            xaxisLabelsConfig.style.colors[i]
-              ? xaxisLabelsConfig.style.colors[i]
-              : '#a8a8a8',
+          color: (Array.isArray(lc) ? lc[i] : lc) || '#a8a8a8',
           dataLabelsConfig: {
             textAnchor: textPos.textAnchor,
             dropShadow: { enabled: false },

package/src/charts/Radial.js

@@ -8,6 +8,7 @@ import Series from '../modules/Series'
 import { resolveClaimed } from '../modules/weave/Claims'
 import { BrowserAPIs } from '../ssr/BrowserAPIs'
 import { Environment } from '../utils/Environment'
+import { resolveEasing } from '../modules/animations/Easing'
 
 /**
  * ApexCharts Radial Class for drawing Circle / Semi Circle Charts.
@@ -1055,15 +1056,10 @@ class Radial extends Pie {
       Number(cfg.animationSpeed) ||
       (isInitialMount ? anim.speed : anim.dynamicAnimation?.speed) ||
       800
-    const c1 = 1.70158
-    const c3 = c1 + 1
     return {
       speed,
       mount: isInitialMount,
-      ease: isInitialMount
-        ? (/** @type {number} */ t) =>
-            1 + c3 * Math.pow(t - 1, 3) + c1 * Math.pow(t - 1, 2)
-        : (/** @type {number} */ t) => 1 - Math.pow(1 - t, 3),
+      ease: resolveEasing(isInitialMount ? 'easeOutBack' : 'easeOutCubic'),
     }
   }