apexcharts 8.2.0 → 8.3.1

package/src/modules/legend/HeatmapGradientLegend.js

@@ -48,6 +48,8 @@ export default class HeatmapGradientLegend {
     this._max = 0
     /** @type {any} */
     this._geom = null
+    /** @type {any} */
+    this._grad = null
     /** @type {any[]} */
     this._bandHitEls = []
     /** @type {number} Currently highlighted band index (-1 = none). */
@@ -58,6 +60,8 @@ export default class HeatmapGradientLegend {
      * @type {HTMLElement|null}
      */
     this._targetEl = null
+    /** @type {(() => any[])|null} detached mode: every panel's w */
+    this.panelsW = null
     this._onCellEnter = this._onCellEnter.bind(this)
     this._onCellLeave = this._onCellLeave.bind(this)
     this._onBandEnter = this._onBandEnter.bind(this)
@@ -217,15 +221,8 @@ export default class HeatmapGradientLegend {
       linearGrad.setAttribute('y2', '0')
     }
 
-    const { min, max, stops, bands } = this._computeStops()
-    this._min = min
-    this._max = max
-    stops.forEach((s) => {
-      const stopEl = BrowserAPIs.createElementNS(SVG_NS, 'stop')
-      stopEl.setAttribute('offset', `${(s.percent * 100).toFixed(2)}%`)
-      stopEl.setAttribute('stop-color', s.color)
-      linearGrad.appendChild(stopEl)
-    })
+    this._grad = linearGrad
+    const { min, max, bands } = this._paintStops()
     defs.appendChild(linearGrad)
     svg.appendChild(defs)
 
@@ -498,6 +495,9 @@ export default class HeatmapGradientLegend {
    * Honors `legend.offsetX/offsetY` for user nudging. Safe to call repeatedly.
    */
   repositionToPlot() {
+    // The cells' y extent and hasNegs exist only now (draw runs before
+    // coreCalculations), so shade the strip again against them.
+    if (this._grad) this._paintStops()
     if (!Environment.isBrowser()) return
     // Detached mode (trellis): the host slot owns layout entirely.
     if (this._targetEl) return
@@ -672,7 +672,7 @@ export default class HeatmapGradientLegend {
     if (idx < 0 || idx === this._activeBandIndex) return
     this._activeBandIndex = idx
     this.ctx?.events?.fireEvent?.('legendHover', [this.ctx, idx, w])
-    new Series(w).highlightRangeInSeries(idx, 'highlight')
+    this._highlightRange(idx, 'highlight')
   }
 
   /** Leaving a band clears the highlight. */
@@ -680,7 +680,18 @@ export default class HeatmapGradientLegend {
     if (this._activeBandIndex < 0) return
     const idx = this._activeBandIndex
     this._activeBandIndex = -1
-    new Series(this.w).highlightRangeInSeries(idx, 'reset')
+    this._highlightRange(idx, 'reset')
+  }
+
+  /**
+   * A shared trellis strip sets `panelsW` so a band reaches every panel.
+   * @param {number} idx
+   * @param {'highlight'|'reset'} action
+   */
+  _highlightRange(idx, action) {
+    ;(this.panelsW?.() || [this.w]).forEach((/** @type {any} */ w) =>
+      new Series(w).highlightRangeInSeries(idx, action),
+    )
   }
 
   _attachHoverListeners() {
@@ -702,11 +713,12 @@ export default class HeatmapGradientLegend {
    * @param {...any} args
    */
   _onCellEnter(...args) {
-    const w = this.w
     if (!this.arrowEl) return
     // The opts object is the last argument.
     const opts = args[args.length - 1]
     if (!opts || typeof opts !== 'object') return
+    // the hovered chart: a shared trellis strip hears every panel
+    const w = opts.w || this.w
     const i = opts.seriesIndex
     const j = opts.dataPointIndex
     if (typeof i !== 'number' || typeof j !== 'number') return
@@ -845,6 +857,22 @@ export default class HeatmapGradientLegend {
     return polygon
   }
 
+  /** (Re)write the strip's stops; returns `_computeStops()`. */
+  _paintStops() {
+    const r = this._computeStops()
+    const grad = this._grad
+    this._min = r.min
+    this._max = r.max
+    grad.innerHTML = ''
+    r.stops.forEach((s) => {
+      const stopEl = BrowserAPIs.createElementNS(SVG_NS, 'stop')
+      stopEl.setAttribute('offset', `${(s.percent * 100).toFixed(2)}%`)
+      stopEl.setAttribute('stop-color', s.color)
+      grad.appendChild(stopEl)
+    })
+    return r
+  }
+
   /**
    * Build gradient stops + return effective min/max.
    * - If `colorScale.ranges` is set, stops are placed at each range boundary
@@ -898,7 +926,9 @@ export default class HeatmapGradientLegend {
     // one-sided = the historical expand-not-clamp semantics.
     let min = dataMin
     let max = dataMax
-    if (typeof cs.min !== 'undefined' && typeof cs.max !== 'undefined' && cs.max > cs.min) {
+    const csWindow =
+      typeof cs.min !== 'undefined' && typeof cs.max !== 'undefined' && cs.max > cs.min
+    if (csWindow) {
       min = cs.min
       max = cs.max
     } else {
@@ -956,45 +986,46 @@ export default class HeatmapGradientLegend {
       // is the documented behavior).
       const baseColor = w.globals.colors[0] || '#008FFB'
       const utils = new Utils()
-      const plot = w.config.plotOptions[w.config.chart.type] || {}
+      const type = w.config.chart.type
+      const plot = w.config.plotOptions[type] || {}
       const shadeIntensity = plot.shadeIntensity ?? 0.5
-      const hasNegs = /** @type {any} */ (w.globals).hasNegs
+      const g = /** @type {any} */ (w.globals)
+      const hasNegs = g.hasNegs
+      // A non-distributed heatmap's cells shade against the niced y extent
+      // and clamp into it (determineColor); use it once coreCalculations ran.
+      // A one-sided colorScale.max past maxY is ignored there, so cap at maxY.
+      const yExt =
+        type === 'heatmap' && !plot.distributed && !csWindow && g.maxY >= g.minY
+      const hi = yExt ? g.maxY : max
+      const total =
+        Math.abs(hi) + Math.abs(yExt ? (cs.min < g.minY ? cs.min : g.minY) : min)
+      const k = shadeIntensity * 1.25
       const n = Math.max(2, cfg.stops || 16)
       for (let s = 0; s < n; s++) {
         const t = s / (n - 1) // 0..1
-        // Map t to the shade percent the cell at that t would receive.
+        // Map t to the shade fraction the cell at that t would receive.
         // determineColor computes percent = 100*val/(|min|+|max|), so the cell
-        // sitting at value v = min + t*(max-min) gets percent_v.
-        const v = min + t * (max - min)
-        const total = Math.abs(max) + Math.abs(min)
-        const percent_v = total === 0 ? 0 : (100 * v) / total
-        let colorShadePercent
-        if (hasNegs) {
-          if (plot.reverseNegativeShade) {
-            colorShadePercent =
-              percent_v < 0
-                ? (percent_v / 100) * (shadeIntensity * 1.25)
-                : (1 - percent_v / 100) * (shadeIntensity * 1.25)
-          } else {
-            colorShadePercent =
-              percent_v <= 0
-                ? 1 - (1 + percent_v / 100) * shadeIntensity
-                : (1 - percent_v / 100) * shadeIntensity
-          }
-        } else {
-          colorShadePercent = 1 - percent_v / 100
-        }
-        // Clamp to a reasonable range to avoid color blowout.
-        if (colorShadePercent > 1) colorShadePercent = 1
-        if (colorShadePercent < -1) colorShadePercent = -1
+        // sitting at value v = min + t*(max-min) gets p = v / total.
+        const p =
+          total === 0 ? 0 : Math.min(min + t * (max - min), hi) / total
+        // Clamp to a reasonable range to avoid color blowout. Treemap tiles
+        // scale the plain shade too (getShadeColor).
+        const c = Math.max(
+          -1,
+          Math.min(
+            1,
+            hasNegs
+              ? plot.reverseNegativeShade
+                ? (p < 0 ? p : 1 - p) * k
+                : p <= 0
+                  ? 1 - (1 + p) * shadeIntensity
+                  : (1 - p) * shadeIntensity
+              : (1 - p) * (type === 'treemap' ? k : 1),
+          ),
+        )
 
         const shaded = plot.enableShades
-          ? utils.shadeColor(
-              w.config.theme.mode === 'dark'
-                ? colorShadePercent * -1
-                : colorShadePercent,
-              baseColor,
-            )
+          ? utils.shadeColor(w.config.theme.mode === 'dark' ? -c : c, baseColor)
           : baseColor
         stops.push({ percent: t, color: shaded })
       }

package/src/modules/legend/Helpers.js

@@ -55,6 +55,8 @@ export default class Helpers {
    */
   toggleDataSeries(seriesCnt, isHidden) {
     const w = this.w
+    // a legendClick handler may have destroyed the chart
+    if (!w.dom.baseEl) return
     if (w.globals.axisCharts || w.config.chart.type === 'radialBar') {
       w.globals.resized = true // we don't want initial animations again
 
@@ -276,7 +278,12 @@ export default class Helpers {
     const w = this.w
     const gl = w.globals
 
-    const series = Utils.clone(w.config.series)
+    // An axis chart only replaces a row's `data` below, so a copy per row
+    // does; a deep clone cost every point, once per `hidden: true` series on
+    // each render. A non-axis collapse writes into the slice values.
+    const series = gl.axisCharts
+      ? Utils.copySeriesShallow(w.config.series)
+      : Utils.clone(w.config.series)
 
     if (gl.axisCharts) {
       const yaxis = w.config.yaxis[gl.seriesYAxisReverseMap[realIndex]]

package/src/modules/legend/Legend.js

@@ -74,6 +74,11 @@ class Legend {
     const gl = w.globals
     const cnf = w.config
 
+    // Tear down any previous gradient legend every render, so hiding the
+    // legend does not leave its listeners and repositioning behind.
+    this.heatmapGradientLegend?.destroy()
+    this.heatmapGradientLegend = null
+
     // Recompute each render: the Legend instance is reused across updates, so a
     // value cached in the constructor would go stale when updateOptions changes
     // the type / distributed flag / series count (e.g. a distributed single-series
@@ -106,12 +111,6 @@ class Legend {
         elLegendWrap.removeChild(elLegendWrap.firstChild)
       }
 
-      // Tear down any previous gradient-legend listeners before re-rendering.
-      if (this.heatmapGradientLegend) {
-        this.heatmapGradientLegend.destroy()
-        this.heatmapGradientLegend = null
-      }
-
       if (HeatmapGradientLegend.isEnabled(w)) {
         this.heatmapGradientLegend = new HeatmapGradientLegend(w, this.ctx)
         this.heatmapGradientLegend.draw()
@@ -381,7 +380,8 @@ class Legend {
       // by index: groups may reuse series names, and an unnamed series has
       // none to match
       const lg = legendGroups[w.labelData.seriesGroupIndex[i]]
-      if (lg) elLegendWrap.appendChild(lg)
+      // once: re-appending moves the group, reordering interleaved groups
+      if (lg && !lg.parentNode) elLegendWrap.appendChild(lg)
       ;(lg || elLegendWrap).appendChild(elLegend)
 
       elLegendWrap.classList.add(
@@ -537,10 +537,8 @@ class Legend {
     const hoverOverLegend = isLegendItem(target)
 
     if (w.config.chart.type !== 'heatmap' && !this.isBarsDistributed) {
-      if (
-        !target.classList.contains('apexcharts-inactive-legend') &&
-        hoverOverLegend
-      ) {
+      // closest: the text span of a hidden item carries no inactive class
+      if (hoverOverLegend && !target.closest('.apexcharts-inactive-legend')) {
         const series = new Series(this.ctx.w)
         series.toggleSeriesOnHover(e, target)
       }
@@ -585,7 +583,8 @@ class Legend {
       // can keep toggling without having to re-tab to the legend.
       if (rel !== null && w.config.legend.onItemClick.toggleDataSeries) {
         requestAnimationFrame(() => {
-          const restored = w.dom.baseEl.querySelector(
+          // the chart may have been destroyed before this frame
+          const restored = w.dom.baseEl?.querySelector(
             `.apexcharts-legend-series[rel="${rel}"]`,
           )
           if (restored) /** @type {HTMLElement} */ (restored).focus()

package/src/modules/license/LicenseEnforcer.js

@@ -235,6 +235,7 @@ function reinstateWatermark(ctx, elWrap) {
   // and resolves a per-chart `chart.license` key, so letting the package decide
   // would paint free charts and erase watermarks we deliberately applied.
   const node = Watermark.add(elWrap, { manage: false })
+  ctx._wmPainted = true
   if (!node || typeof MutationObserver === 'undefined') return
   if (ctx._wmNodeObserver && ctx._wmObservedNode === node) return
 
@@ -279,6 +280,10 @@ function addWatermark(ctx, elWrap) {
  * @param {any} ctx @param {HTMLElement | null | undefined} [elWrap]
  */
 export function teardownWatermark(ctx, elWrap) {
+  // Free and licensed charts run this on every render: with nothing painted
+  // there is nothing to undo, so skip the subtree query for the node.
+  if (!ctx._wmPainted) return
+  ctx._wmPainted = false
   if (ctx._wmWrapObserver) {
     ctx._wmWrapObserver.disconnect()
     ctx._wmWrapObserver = null

package/src/modules/settings/Defaults.js

@@ -3,7 +3,7 @@ import Utils from '../../utils/Utils'
 import DateTime from '../../utils/DateTime'
 import Formatters from '../Formatters'
 import Options from './Options'
-import { TYPE_ALIASES, BUILTIN_TYPES } from './TypeAliases'
+import { TYPE_ALIASES, BUILTIN_TYPES, SOLO_TYPES } from './TypeAliases'
 
 /**
  * ApexCharts Default Class for setting default options for all chart types.
@@ -110,6 +110,17 @@ const TYPE_OWNED_PATHS = [
  */
 const floorLabel = (val) => (Utils.isNumber(val) ? Math.floor(val) : val)
 
+/**
+ * The pie, donut and polarArea label: the share of the whole, as a percentage.
+ * One function for all three, so a pie that becomes a donut hands it over as
+ * the same default. Guarded because a config survives a chart-type change: a
+ * pie that becomes a treemap hands this a category NAME, and a default of ours
+ * must not throw on a value it was never designed for.
+ * @param {any} val
+ */
+const percentLabel = (val) =>
+  typeof val === 'number' ? val.toFixed(1) + '%' : val
+
 /**
  * The base options with a type's defaults laid over them: what a leaf is when
  * no mode preset has touched it.
@@ -380,20 +391,13 @@ export default class Defaults {
     const requestedType = opts.chart.requestedType
     let chartDefaults
 
-    if (requestedType === 'funnel' || requestedType === 'pyramid') {
-      chartDefaults = /** @type {any} */ (defaults)[requestedType]()
-    } else if (requestedType === 'gauge') {
-      chartDefaults = defaults.gauge()
-    } else if (requestedType === 'histogram') {
-      chartDefaults = defaults.histogram()
-    } else if (requestedType === 'waterfall') {
-      chartDefaults = defaults.waterfall()
-    } else if (requestedType === 'dumbbell') {
-      chartDefaults = defaults.dumbbell()
-    } else if (requestedType === 'streamgraph') {
-      chartDefaults = defaults.streamgraph()
-    } else if (requestedType === 'raincloud') {
-      chartDefaults = defaults.raincloud()
+    // Every alias but waffle (and column, a plain bar) has a method of its own.
+    const aliasDefaults =
+      /** @type {any} */ (TYPE_ALIASES)[requestedType] &&
+      /** @type {any} */ (defaults)[requestedType]
+
+    if (aliasDefaults) {
+      chartDefaults = aliasDefaults.call(defaults)
     } else if (requestedType === 'waffle') {
       chartDefaults = Utils.extend(defaults.unit(), {
         plotOptions: { unit: { layout: 'grid', shape: 'square' } },
@@ -1374,7 +1378,9 @@ export default class Defaults {
     return {
       chart: {
         animations: {
-          animateGradually: false,
+          animateGradually: {
+            enabled: false,
+          },
         },
       },
       stroke: {
@@ -2064,16 +2070,9 @@ export default class Defaults {
         chartType === 'violin') &&
       opts.plotOptions?.bar?.horizontal
 
-    const unsupportedZoom =
-      chartType === 'pie' ||
-      chartType === 'polarArea' ||
-      chartType === 'donut' ||
-      chartType === 'radar' ||
-      chartType === 'radialBar' ||
-      chartType === 'heatmap' ||
-      chartType === 'unit' ||
-      chartType === 'sunburst' ||
-      chartType === 'icicle'
+    // A type that owns its plot has no category axis to space: the registry
+    // list, since a hand-kept copy of it once left treemap out.
+    const unsupportedZoom = SOLO_TYPES.includes(chartType)
 
     // The type's own axis counts as much as the user's: a histogram asks for a
     // numeric axis through Defaults.histogram, not by writing it into opts.
@@ -2478,16 +2477,7 @@ export default class Defaults {
         },
       },
       dataLabels: {
-        /**
-         * The share of the whole, as a percentage. Guarded because a config
-         * survives a chart-type change: a pie that becomes a treemap hands
-         * this same default a category NAME, and a default of ours must not
-         * throw on a value it was never designed for.
-         * @param {any} val
-         */
-        formatter(val) {
-          return typeof val === 'number' ? val.toFixed(1) + '%' : val
-        },
+        formatter: percentLabel,
         style: {
           colors: ['#fff'],
         },
@@ -2534,16 +2524,7 @@ export default class Defaults {
         },
       },
       dataLabels: {
-        /**
-         * The share of the whole, as a percentage. Guarded because a config
-         * survives a chart-type change: a pie that becomes a treemap hands
-         * this same default a category NAME, and a default of ours must not
-         * throw on a value it was never designed for.
-         * @param {any} val
-         */
-        formatter(val) {
-          return typeof val === 'number' ? val.toFixed(1) + '%' : val
-        },
+        formatter: percentLabel,
         style: {
           colors: ['#fff'],
         },
@@ -2593,16 +2574,7 @@ export default class Defaults {
         },
       },
       dataLabels: {
-        /**
-         * The share of the whole, as a percentage. Guarded because a config
-         * survives a chart-type change: a pie that becomes a treemap hands
-         * this same default a category NAME, and a default of ours must not
-         * throw on a value it was never designed for.
-         * @param {any} val
-         */
-        formatter(val) {
-          return typeof val === 'number' ? val.toFixed(1) + '%' : val
-        },
+        formatter: percentLabel,
         enabled: false,
       },
       stroke: {

package/src/modules/settings/Globals.js

@@ -49,6 +49,11 @@ export default class Globals {
     // that drops range data. See audit D1.
     gl.seriesRangeName = {}
 
+    // Fill colours resolved through a probe (CSS variables), keyed by the
+    // colour as configured. Reset each render, so a theme change is re-read.
+    // No prototype: a configured colour is user input.
+    gl.themeColors = Object.create(null)
+
     // ── Labels & categories (ephemeral — derived from parsed series/config) ──
     gl.labels = []
     gl.hasXaxisGroups = false

package/src/modules/settings/Options.js

@@ -498,12 +498,6 @@ export default class Options {
         // canvas-capable in v1; chrome stays SVG.
         renderer: 'svg',
         rendererThreshold: 8000,
-        layers: {
-          series: 'auto',
-          grid: 'svg',
-          annotations: 'svg',
-          dataLabels: 'svg',
-        },
         dropShadow: {
           enabled: false,
           enabledOnSeries: undefined,
@@ -788,7 +782,14 @@ export default class Options {
           // asked for and nobody can undo is a trap. Set either to true to
           // force the gesture on regardless (for a page that supplies its own
           // reset control), or false to turn it off outright.
+          //
+          // The 'auto' wheel is also cooperative: a bare wheel scrolls the
+          // page, and Ctrl/Cmd + wheel (or a trackpad pinch) zooms, so a page
+          // of charts scrolls past them. `true` zooms on every wheel.
           allowMouseWheelZoom: 'auto',
+          // With the cooperative wheel, a bare scroll over the chart briefly
+          // shows how to zoom it ("Use Ctrl + scroll to zoom").
+          wheelHint: true,
           // Momentum: two-finger pinch-zoom on touch devices. Zooms the x-axis
           // around the pinch centroid (matching the x-only wheel/toolbar zoom),
           // frame-by-frame rather than the 400ms wheel throttle.
@@ -839,7 +840,6 @@ export default class Options {
         },
         dataReducer: {
           enabled: false,
-          algorithm: 'lttb',
           targetPoints: 250,
           threshold: 500,
         },

package/src/modules/settings/TypeAliases.js

@@ -32,23 +32,27 @@
  */
 export const RESERVED_TYPES = ['icicle', 'unit', 'sunburst', 'violin']
 
+// No prototype, so a lookup never finds 'constructor' or 'toString'
 /** @type {Record<string, string>} */
-export const TYPE_ALIASES = {
-  funnel: 'bar',
-  pyramid: 'bar',
-  gauge: 'radialBar',
-  waffle: 'unit',
-  histogram: 'bar',
-  waterfall: 'rangeBar',
-  dumbbell: 'rangeBar',
-  streamgraph: 'rangeArea',
-  raincloud: 'violin',
-  // `column` is the name half the world uses for a vertical bar chart, and the
-  // combo path has always accepted it on `series[].type`. On `chart.type` it
-  // used to fall through every dispatch and die inside the renderer (#5325),
-  // so it is spelled out here as what it has always meant.
-  column: 'bar',
-}
+export const TYPE_ALIASES = Object.setPrototypeOf(
+  {
+    funnel: 'bar',
+    pyramid: 'bar',
+    gauge: 'radialBar',
+    waffle: 'unit',
+    histogram: 'bar',
+    waterfall: 'rangeBar',
+    dumbbell: 'rangeBar',
+    streamgraph: 'rangeArea',
+    raincloud: 'violin',
+    // `column` is the name half the world uses for a vertical bar chart, and the
+    // combo path has always accepted it on `series[].type`. On `chart.type` it
+    // used to fall through every dispatch and die inside the renderer (#5325),
+    // so it is spelled out here as what it has always meant.
+    column: 'bar',
+  },
+  null,
+)
 
 /**
  * Alias chart types that cannot draw anything true until the named feature
@@ -122,6 +126,19 @@ export const XY_TYPES = [
   'bubble',
 ]
 
+/**
+ * The XY types drawn through the bar pathway: one slot per point, so the
+ * hover divisor counts slots, and on a numeric axis the edge marks hang half
+ * a slot outside the plot and need padding and a widened clip.
+ */
+export const BAR_PATHWAY_TYPES = [
+  'bar',
+  'rangeBar',
+  'candlestick',
+  'boxPlot',
+  'violin',
+]
+
 /**
  * Types that need the axis/grid/scale pipeline but own the whole plot: they
  * take part in no combo, and a chart is one of them or it is not.

package/src/modules/streamgraph/StreamLabels.js

@@ -276,6 +276,7 @@ export default class StreamLabels {
               maxWidth: span,
               fontSize: `${px}px`,
               fontFamily,
+              fontWeight,
             })
       if (!text || text === '...') continue
       const drawnWidth =