apexcharts 8.2.0 → 8.3.1

package/src/modules/Graphics.js

@@ -457,6 +457,23 @@ class Graphics {
     return arc
   }
 
+  /**
+   * stroke.dashArray of a series, shared with the canvas renderer. A plugin
+   * may have claimed it: resolved here rather than written into the config,
+   * so the caller's own dashing is untouched and there is nothing to restore
+   * when the claim goes. See weave/Claims.
+   * @param {number} realIndex
+   */
+  seriesDash(realIndex) {
+    const d = this.w.config.stroke.dashArray
+    return resolveClaimed(
+      this.w,
+      'stroke.dashArray',
+      realIndex,
+      Array.isArray(d) ? d[realIndex] : d,
+    )
+  }
+
   /**
    * @memberof Graphics
    * @param {Record<string, any>} opts
@@ -610,23 +627,6 @@ class Graphics {
       }
     }
 
-    const strokeDashArrayOpt = w.config.stroke.dashArray
-    let strokeDashArray = 0
-    if (Array.isArray(strokeDashArrayOpt)) {
-      strokeDashArray = strokeDashArrayOpt[realIndex]
-    } else {
-      strokeDashArray = w.config.stroke.dashArray
-    }
-    // A plugin may have claimed this series' dash. Resolved here rather than
-    // written into the config above, so the caller's own dashing is untouched
-    // and there is nothing to restore when the claim goes. See weave/Claims.
-    strokeDashArray = resolveClaimed(
-      w,
-      'stroke.dashArray',
-      realIndex,
-      strokeDashArray,
-    )
-
     const el = this.drawPath({
       d,
       stroke,
@@ -635,7 +635,7 @@ class Graphics {
       fillOpacity: 1,
       classes: className,
       strokeLinecap,
-      strokeDashArray,
+      strokeDashArray: this.seriesDash(realIndex),
     })
 
     el.attr('index', realIndex)
@@ -718,11 +718,16 @@ class Graphics {
       // Skip the immediate reveal when we're fading in via revealBulk — it owns
       // the reveal (a single scheduled rAF), so revealing here would pre-empt it.
       // An update that does not animate has no completion to reveal them at,
-      // so it reveals them now.
+      // so it reveals them now. Only when something was registered since the
+      // last reveal: the list is new each render, and walking it again for
+      // every bar is a no-op that grew as bars x overlays.
+      const de = /** @type {any} */ (w.globals.delayedElements)
       if (
         (w.globals.resized || !w.globals.dataChanged || !shouldAnimate) &&
-        !revealViaFade
+        !revealViaFade &&
+        de.shown !== de.length
       ) {
+        de.shown = de.length
         anim.showDelayedElements()
       }
     }
@@ -935,13 +940,21 @@ class Graphics {
     return g
   }
 
-  /** @param {{ text: any, maxWidth: any, fontSize: any, fontFamily?: any }} opts */
-  getTextBasedOnMaxWidth({ text, maxWidth, fontSize, fontFamily }) {
-    const tRects = this.getTextRects(text, fontSize, fontFamily, '')
-    const wordWidth = tRects.width / text.length
-    const wordsBasedOnWidth = Math.floor(maxWidth / wordWidth)
+  /** @param {{ text: any, maxWidth: any, fontSize: any, fontFamily?: any, fontWeight?: any }} opts */
+  getTextBasedOnMaxWidth({ text, maxWidth, fontSize, fontFamily, fontWeight }) {
+    const tRects = this.getTextRects(
+      text,
+      fontSize,
+      fontFamily,
+      '',
+      true,
+      fontWeight,
+    )
+    // Characters that fit, less the ellipsis. Below zero not even '...'
+    // fits (and a negative slice end would keep nearly the whole text).
+    const n = Math.floor(maxWidth / (tRects.width / text.length)) - 3
     if (maxWidth < tRects.width) {
-      return text.slice(0, wordsBasedOnWidth - 3) + '...'
+      return n < 0 ? '' : text.slice(0, n) + '...'
     }
     return text
   }
@@ -984,6 +997,7 @@ class Graphics {
       maxWidth,
       fontSize,
       fontFamily,
+      fontWeight,
     }
     let elText
     if (Array.isArray(text)) {
@@ -1226,7 +1240,12 @@ class Graphics {
     if (w.config.states.hover.filter.type !== 'none') {
       if (!w.interact.isTouchDevice) {
         const hoverFilter = w.config.states.hover.filter
-        filters.applyFilter(path, i, hoverFilter.type, hoverFilter.value)
+        filters.applyFilter(
+          path,
+          Filters.isSliceChart(w) ? j : i,
+          hoverFilter.type,
+          hoverFilter.value,
+        )
       }
     }
   }
@@ -1267,35 +1286,29 @@ class Graphics {
     if (Filters.hoverOutlineOwnsHoverState(w)) return
 
     if (w.config.states.hover.filter.type !== 'none') {
-      filters.getDefaultFilter(path, i)
+      filters.getDefaultFilter(path, Filters.isSliceChart(w) ? j : i)
     }
   }
 
   /**
    * Clear every selected data point (single-select mode): reset the selection
-   * array and restore the default filter on all series path/circle/rect nodes.
-   * NOTE: preserves the original behavior of passing the clicked series index
-   * `i` to getDefaultFilter for every element (not each element's own index).
-   * @param {any} filters @param {number} i
+   * array and restore the default filter on each selected node, with its own
+   * series index (dropShadow.enabledOnSeries is per series; a pie slice's
+   * shadow is per slice, j).
+   * @param {any} filters
    */
-  _clearAllDataPointSelections(filters, i) {
+  _clearAllDataPointSelections(filters) {
     const w = this.w
     w.interact.selectedDataPoints = []
-    const elPaths = w.dom.Paper.find(
-      '.apexcharts-series path:not(.apexcharts-decoration-element)',
-    )
-    const elCircles = w.dom.Paper.find(
-      '.apexcharts-series circle:not(.apexcharts-decoration-element), .apexcharts-series rect:not(.apexcharts-decoration-element)',
-    )
-    /** @param {any[]} els */
-    const deSelect = (els) => {
-      Array.prototype.forEach.call(els, (/** @type {any} */ el) => {
+    w.dom.Paper.find('.apexcharts-series [selected="true"]').forEach(
+      (/** @type {any} */ el) => {
         el.node.setAttribute('selected', 'false')
-        filters.getDefaultFilter(el, i)
-      })
-    }
-    deSelect(elPaths)
-    deSelect(elCircles)
+        filters.getDefaultFilter(
+          el,
+          +el.node.getAttribute(Filters.isSliceChart(w) ? 'j' : 'index'),
+        )
+      },
+    )
   }
 
   /**
@@ -1321,7 +1334,7 @@ class Graphics {
       !w.config.states.active.allowMultipleDataPointsSelection &&
       w.interact.selectedDataPoints.length > 0
     ) {
-      this._clearAllDataPointSelections(filters, i)
+      this._clearAllDataPointSelections(filters)
     }
 
     path.node.setAttribute('selected', 'true')
@@ -1350,11 +1363,11 @@ class Graphics {
 
     if (selected === 'true') {
       const activeFilter = w.config.states.active.filter
-      if (activeFilter !== 'none') {
+      if (activeFilter.type !== 'none') {
         filters.applyFilter(path, i, activeFilter.type, activeFilter.value)
       } else {
         // Reapply the hover filter in case it was removed by `deselect`when there is no active filter and it is not a touch device
-        if (w.config.states.hover.filter !== 'none') {
+        if (w.config.states.hover.filter.type !== 'none') {
           if (!w.interact.isTouchDevice) {
             const hoverFilter = w.config.states.hover.filter
             filters.applyFilter(path, i, hoverFilter.type, hoverFilter.value)
@@ -1404,7 +1417,12 @@ class Graphics {
 
     if (!crossfilterClick) {
       const selected = this._togglePointSelection(path, filters, i, j)
-      this._applyPointSelectionFilter(path, filters, i, selected)
+      this._applyPointSelectionFilter(
+        path,
+        filters,
+        Filters.isSliceChart(w) ? j : i,
+        selected,
+      )
     }
 
     if (typeof w.config.chart.events.dataPointSelection === 'function') {

package/src/modules/Markers.js

@@ -143,8 +143,10 @@ export default class Markers {
   setGlobalMarkerSize() {
     const w = this.w
 
+    // A copy: the padding below must not grow (or throw on a frozen) caller
+    // array.
     w.globals.markers.size = Array.isArray(w.config.markers.size)
-      ? w.config.markers.size
+      ? w.config.markers.size.slice()
       : [w.config.markers.size]
 
     if (w.globals.markers.size.length > 0) {

package/src/modules/MorphTypeChange.js

@@ -685,7 +685,7 @@ export default class MorphTypeChange {
       !svg ||
       typeof svg.createSVGPoint !== 'function'
     ) {
-      layer.removeChild(probe)
+      probe.remove()
       return null
     }
     const pt = svg.createSVGPoint()
@@ -694,10 +694,8 @@ export default class MorphTypeChange {
       pt.x = x
       pt.y = y
       const p = /** @type {any} */ (probe)
-      return (
-        p.isPointInFill(pt) ||
-        (typeof p.isPointInStroke === 'function' && p.isPointInStroke(pt))
-      )
+      // isPointInStroke shipped with isPointInFill, which was checked above.
+      return p.isPointInFill(pt) || p.isPointInStroke(pt)
     }
 
     // Samples across the minor axis per probe line. Fine enough to catch a
@@ -829,6 +827,10 @@ export default class MorphTypeChange {
     /** @type {import('./MorphPieces').Piece[]} */
     const pieces = []
     const doc = layer.ownerDocument
+    // Cells are staged off the page and land in one write after the loop: a
+    // probe hit-test brings style and layout up to date, so cells written
+    // between two marks' probes would make every later probe pay for them.
+    const staged = doc.createDocumentFragment()
 
     // A bar IS its bounding box, so the plain grid tiles it exactly. A
     // summary mark (violin, boxPlot) is a silhouette inside its box, and
@@ -887,7 +889,7 @@ export default class MorphTypeChange {
           el.setAttribute('height', String(cell.height))
           el.setAttribute('rx', '0')
           el.setAttribute('fill', String(markFill))
-          layer.appendChild(el)
+          staged.appendChild(el)
           pieces.push({
             el,
             from: { x: cell.x, y: cell.y, width: cell.width, height: cell.height, rx: 0 },
@@ -905,6 +907,7 @@ export default class MorphTypeChange {
           })
         }
       })
+    layer.appendChild(staged)
 
     if (!pieces.length) return this._cancelPieces()
 
@@ -973,6 +976,8 @@ export default class MorphTypeChange {
     const layer = this._makePieceLayer()
     if (!layer) return this._revealPieceHidden()
     const doc = layer.ownerDocument
+    // Staged off the page until every mark is probed, as in _separatePieces.
+    const staged = doc.createDocumentFragment()
 
     /** @type {import('./MorphPieces').Piece[]} */
     const pieces = []
@@ -1024,7 +1029,7 @@ export default class MorphTypeChange {
       const markState = {
         remaining: ordered.length,
         els: target.els,
-        g: layer.appendChild(doc.createElementNS('http://www.w3.org/2000/svg', 'g')),
+        g: staged.appendChild(doc.createElementNS('http://www.w3.org/2000/svg', 'g')),
       }
 
       for (let m = 0; m < ordered.length; m++) {
@@ -1053,6 +1058,7 @@ export default class MorphTypeChange {
         })
       }
     }
+    layer.appendChild(staged)
 
     if (!pieces.length) return this._cancelPieces()
 

package/src/modules/Range.js

@@ -634,42 +634,38 @@ class Range {
     gl.barGroups = []
     gl.lineGroups = []
     gl.areaGroups = []
-    /**
-     * @param {Record<string, any>} s
-     */
-    cnf.series.forEach((s) => {
-      const _s = /** @type {any} */ (s)
-      const type = _s.type || cnf.chart.type
-      switch (type) {
+    cnf.series.forEach((s, i) => {
+      const g = this.w.labelData.seriesGroupIndex[i]
+      switch (/** @type {any} */ (s).type || cnf.chart.type) {
         case 'bar':
         case 'column':
-          gl.barGroups.push(_s.group)
+          gl.barGroups.push(g)
           break
         case 'line':
-          gl.lineGroups.push(_s.group)
+          gl.lineGroups.push(g)
           break
         case 'area':
-          gl.areaGroups.push(_s.group)
+          gl.areaGroups.push(g)
           break
       }
     })
     // Uniquify the group names in each stackable chart type.
     /**
-     * @param {string} v
+     * @param {number} v
      * @param {number} i
-     * @param {string[]} a
+     * @param {number[]} a
      */
     gl.barGroups = gl.barGroups.filter((v, i, a) => a.indexOf(v) === i)
     /**
-     * @param {string} v
+     * @param {number} v
      * @param {number} i
-     * @param {string[]} a
+     * @param {number[]} a
      */
     gl.lineGroups = gl.lineGroups.filter((v, i, a) => a.indexOf(v) === i)
     /**
-     * @param {string} v
+     * @param {number} v
      * @param {number} i
-     * @param {string[]} a
+     * @param {number[]} a
      */
     gl.areaGroups = gl.areaGroups.filter((v, i, a) => a.indexOf(v) === i)
 
@@ -796,9 +792,10 @@ class Range {
           ticks = gl.dataPoints - 1
         }
       } else if (cnf.xaxis.tickAmount === 'dataPoints') {
-        if (this.w.seriesData.series.length > 1) {
-          ticks = this.w.seriesData.series[gl.maxValsInArrayIndex].length - 1
-        }
+        ticks = Math.max(
+          1,
+          (this.w.seriesData.series[gl.maxValsInArrayIndex] || []).length - 1,
+        )
         if (this.w.axisFlags.isXNumeric) {
           const diff = Math.round(gl.maxX - gl.minX)
           if (diff < 30) {
@@ -877,9 +874,30 @@ class Range {
         // On its side the chart draws one band per row and one label per
         // band, so each band is labelled with its own row's x. The evenly
         // spaced ticks put "Jan 03" against the row that holds Jan 04.
-        this.w.labelData.labels = /** @type {any} */ (
-          (this.w.seriesData.seriesX[gl.maxValsInArrayIndex] || []).slice()
-        )
+        // Series that do not share their x values get a band for every x any
+        // of them has, in the longest series' direction, and each bar sits in
+        // its own x's band (bar/Helpers barRow).
+        const rows = (
+          this.w.seriesData.seriesX[gl.maxValsInArrayIndex] || []
+        ).slice()
+        const seen = new Set(rows)
+        const n = rows.length
+        if (cnf.chart.type === 'bar') {
+          this.w.seriesData.seriesX.forEach((s) =>
+            s?.forEach((x) => {
+              if (x != null && !seen.has(x)) {
+                seen.add(x)
+                rows.push(x)
+              }
+            }),
+          )
+        }
+        if (rows.length > n) {
+          const dir = rows[0] > rows[n - 1] ? -1 : 1
+          rows.sort((a, b) => (a - b) * dir)
+          gl.dataPoints = rows.length
+        }
+        this.w.labelData.labels = /** @type {any} */ (rows)
       } else if (isXNumeric) {
         this.w.labelData.labels = /** @type {any} */ (
           gl.xAxisScale.result.slice()
@@ -1073,10 +1091,9 @@ class Range {
     if (!this.w.seriesData.series.length) return
     const gIdx = this.w.labelData.seriesGroupIndex
     // [positive, negative] sums per stack: the series group (by index, groups
-    // may reuse names), then the x value on a numeric axis as stacked columns
-    // and lines draw (#4886), else the ordinal (horizontal bars stack by it).
-    const byX =
-      this.w.axisFlags.isXNumeric && !this.w.config.plotOptions.bar.horizontal
+    // may reuse names), then the x value on a numeric axis as stacked bars and
+    // lines draw (#4886), else the ordinal.
+    const byX = this.w.axisFlags.isXNumeric
     /** @type {Map<string, number[]>} */
     const stacks = new Map()
 
@@ -1108,9 +1125,7 @@ class Range {
 
           const v = this.w.seriesData.series[i][j]
           if (stackSeries && v !== null && Utils.isNumber(v)) {
-            v > 0
-              ? (st[0] += parseFloat(String(v)) + 0.0001)
-              : (st[1] += parseFloat(String(v)))
+            v > 0 ? (st[0] += v * 1.000001) : (st[1] += +v)
           }
         }
       },

package/src/modules/RendererController.js

@@ -143,7 +143,9 @@ export default class RendererController {
         return this._activeKind
       }
       // The backend was requested/auto-selected but its feature isn't bundled.
-      if (mode === desired) {
+      // resolve() runs every render, so say it once per chart.
+      if (mode === desired && !this._warned) {
+        this._warned = 1
         warnMissingFeature(
           `\`chart.renderer: '${desired}'\``,
           `renderer-${desired}`,
@@ -152,10 +154,15 @@ export default class RendererController {
           },
         )
       }
-    } else if (mode === 'canvas' && hasCanvasUnsupportedFeature(this.w)) {
+    } else if (
+      mode === 'canvas' &&
+      !this._warned &&
+      hasCanvasUnsupportedFeature(this.w)
+    ) {
       // Explicit canvas, but a configured feature (gradient/pattern/image fill,
       // or a state color-matrix filter) can't render on canvas yet: 'auto'
-      // declines silently, explicit 'canvas' says why.
+      // declines silently, explicit 'canvas' says why (once).
+      this._warned = 1
       console.warn(
         `[apexcharts] renderer:"canvas" requested but this chart uses a feature the ` +
           `canvas renderer does not render yet (gradient/pattern/image fill or a ` +
@@ -163,6 +170,13 @@ export default class RendererController {
       )
     }
 
+    // Leaving a non-SVG backend frees it (display list, bitmap); the factory
+    // builds a fresh one if the chart crosses back.
+    const prev = this._instances[this._activeKind]
+    if (prev) {
+      prev.destroy()
+      delete this._instances[this._activeKind]
+    }
     this._activate('svg', this.svg)
     return this._activeKind
   }

package/src/modules/Scales.js

@@ -655,6 +655,19 @@ export default class Scales {
       ;/** @type {any} */ (gl).yAxisScale[index] = []
     }
 
+    // Zero, a negative or the MIN_VALUE sentinel has no logarithm. The floor
+    // was the base, clipping smaller values: drop it to the power of the base
+    // at or below the smallest positive value this axis plots.
+    if (y.logarithmic && minY <= Number.MIN_VALUE) {
+      const s = this.w.seriesData.series
+      const map = gl.isMultipleYAxis && gl.seriesYAxisMap[index]
+      const b = y.logBase || 10
+      const m = (map ? map.map((i) => s[i]) : s)
+        .flat()
+        .reduce((a, v) => (v > 0 && (!a || v < a) ? v : a), 0)
+      minY = m && Math.min(b, b ** Math.floor(Math.log(m) / Math.log(b)))
+    }
+
     const range = Math.abs(maxY - minY)
 
     // A log scale is degenerate when the domain spans less than one full
@@ -719,15 +732,25 @@ export default class Scales {
       // no data in the chart. Either all series collapsed or user passed a blank array
       gl.xAxisScale = this.linearScale(0, 10, 10)
     } else {
-      const ticks = gl.xTickAmount
-
-      gl.xAxisScale = this.linearScale(
-        minX,
-        maxX,
-        ticks,
-        0,
-        w.config.xaxis.max === undefined ? w.config.xaxis.stepSize : undefined,
-      )
+      const x = w.config.xaxis
+      // a fixed max or a streaming range window wins over the step
+      let step = (x.max ?? x.range) === undefined ? x.stepSize : undefined
+      // A step fixes the tick count and the axis ends on the last step. One
+      // too fine to draw keeps the default count instead.
+      const fit = step > 0 && !gl.isBarHorizontal && x.type !== 'datetime'
+      if (fit) {
+        const n = Math.ceil((maxX - minX) / step - 1e-9)
+        n > 1e3 ? (step = undefined) : (gl.xTickAmount = n)
+      }
+
+      let s = this.linearScale(minX, maxX, gl.xTickAmount, 0, step)
+      if (fit && step) {
+        // linearScale rounds the step, so it can fall short of the data
+        while (s.niceMax < maxX)
+          s = this.linearScale(minX, maxX, ++gl.xTickAmount, 0, step)
+        gl.maxX = s.niceMax
+      }
+      gl.xAxisScale = s
     }
     return gl.xAxisScale
   }

package/src/modules/Series.js

@@ -63,8 +63,9 @@ export default class Series {
    * @param {string} seriesName
    */
   isSeriesHidden(seriesName) {
-    const targetElement = this.getSeriesByName(seriesName)
-    const el = /** @type {Element} */ (targetElement)
+    const el = this.getSeriesByName(seriesName)
+    // An unknown name (or a type that draws no series group) is a no-op.
+    if (!el) return { isHidden: false, realIndex: -1 }
     const realIndex = parseInt(el.getAttribute('data:realIndex') ?? '0', 10)
     // The collapse is recorded per index for every type; the class only on
     // the types that draw a series group for it. A pie, donut or polarArea
@@ -295,11 +296,11 @@ export default class Series {
    * @param {string} seriesName
    */
   toggleSeries(seriesName) {
-    const isSeriesHidden = this.isSeriesHidden(seriesName)
+    const { isHidden, realIndex } = this.isSeriesHidden(seriesName)
 
-    this._toggleDataSeries?.(isSeriesHidden.realIndex, isSeriesHidden.isHidden)
+    if (realIndex > -1) this._toggleDataSeries?.(realIndex, isHidden)
 
-    return isSeriesHidden.isHidden
+    return isHidden
   }
 
   /**
@@ -319,7 +320,7 @@ export default class Series {
   hideSeries(seriesName) {
     const isSeriesHidden = this.isSeriesHidden(seriesName)
 
-    if (!isSeriesHidden.isHidden) {
+    if (!isSeriesHidden.isHidden && isSeriesHidden.realIndex > -1) {
       this._toggleDataSeries?.(isSeriesHidden.realIndex, false)
     }
   }
@@ -372,7 +373,8 @@ export default class Series {
 
     this.clearSeriesCache()
 
-    let series = Utils.clone(w.globals.initialSeries)
+    // From the peek: reading initialSeries deep clones it first.
+    let series = Utils.clone(w.globals._initialSeriesPeek)
     // A chart constructed (or once updated) with an invalid series leaves no
     // usable snapshot; resetting to the live config beats crashing here and
     // stranding the chart mid-update.
@@ -409,10 +411,14 @@ export default class Series {
    * @param {any[]} series
    */
   emptyCollapsedSeries(series) {
-    const w = this.w
+    const gl = this.w.globals
     if (!Array.isArray(series)) return series
     for (let i = 0; i < series.length; i++) {
-      if (w.globals.collapsedSeriesIndices.indexOf(i) > -1) {
+      // A series hidden on a showAlways y axis sits on the ancillary list.
+      if (
+        gl.collapsedSeriesIndices.includes(i) ||
+        gl.ancillaryCollapsedSeriesIndices.includes(i)
+      ) {
         // Axis charts carry {name, data}; non-axis charts (pie / donut / unit)
         // carry a bare numeric value. Empty each in its own shape: setting
         // `.data` on a number throws ("Cannot create property 'data' on number"),
@@ -656,8 +662,10 @@ export default class Series {
    */
   highlightRangeInSeries(rangeIndex, action) {
     const w = this.w
+    // a treemap's gradient legend draws range bands too
+    const t = w.config.chart.type === 'treemap' ? 'treemap' : 'heatmap'
     const allHeatMapElements = w.dom.baseEl.getElementsByClassName(
-      'apexcharts-heatmap-rect',
+      `apexcharts-${t}-rect`,
     )
 
     /**
@@ -677,17 +685,24 @@ export default class Series {
       return
     }
 
-    const ranges = w.config.plotOptions.heatmap.colorScale.ranges
+    const ranges = w.config.plotOptions[t].colorScale.ranges
     const range = ranges && ranges[rangeIndex]
     if (!range) return
 
     toggleAllInactive('add')
     for (let i = 0; i < allHeatMapElements.length; i++) {
-      const val = Number(allHeatMapElements[i].getAttribute('val'))
+      const el = allHeatMapElements[i]
+      // treemap tiles carry no val; they are coloured by series[i][j]
+      const val = Number(
+        el.getAttribute('val') ??
+          w.seriesData.series[/** @type {any} */ (el.getAttribute('i'))]?.[
+            /** @type {any} */ (el.getAttribute('j'))
+          ],
+      )
       // Match the inclusive bounds used by determineColor (treemap/Helpers.js)
       // so the same cells that were colored by this range get highlighted.
       if (val >= range.from && val <= range.to) {
-        allHeatMapElements[i].classList.remove(this.legendInactiveClass)
+        el.classList.remove(this.legendInactiveClass)
       }
     }
   }
@@ -711,10 +726,7 @@ export default class Series {
             return (
               chartTypes.length === 0 ||
               (chartTypes.length &&
-                chartTypes.indexOf(
-                  /** @type {Record<string,any>} */ (w.config.series[index])
-                    .type,
-                ) > -1)
+                chartTypes.indexOf(s.type || w.config.chart.type) > -1)
             )
           }
           return true
@@ -765,7 +777,7 @@ export default class Series {
         if (
           w.globals.comboCharts &&
           chartTypes.length &&
-          chartTypes.indexOf(s.type) === -1
+          chartTypes.indexOf(s.type || w.config.chart.type) === -1
         ) {
           return
         }
@@ -786,7 +798,9 @@ export default class Series {
     if (w.globals.comboCharts) {
       return this.w.config.series
         .map((/** @type {any} */ s, /** @type {number} */ i) => {
-          return s.type === 'bar' || s.type === 'column' ? i : -1
+          // An untyped series draws as chart.type.
+          const t = s.type || w.config.chart.type
+          return t === 'bar' || t === 'column' ? i : -1
         })
         .filter((/** @type {number} */ i) => {
           return i !== -1
@@ -892,6 +906,13 @@ export default class Series {
             ((type === 'line' || type === 'area') &&
               paths[j].getAttribute('d')) ||
             paths[j].getAttribute('pathTo')
+          // A violin's box lane shares its body's datum key: ride on the
+          // body's entry so the keyed join stays one path per datum.
+          if (paths[j].classList.contains('apexcharts-raincloud-box')) {
+            const body = dArr.paths[dArr.paths.length - 1]
+            if (body) (body.box ||= []).push(d)
+            continue
+          }
           // Datum key + fill stamped by the bar renderer: the key lets the
           // next render match survivors by identity (not position) and detect
           // exited datums; the fill paints their exit ghosts.
@@ -935,6 +956,7 @@ export default class Series {
       'candlestick',
       'boxPlot',
       'radar',
+      'violin',
     ]
     chartTypes.forEach((type) => {
       const paths = getPaths(type)