apexcharts 6.2.0 → 6.4.0

package/dist/apexcharts.js

@@ -54,7 +54,7 @@ var __async = (__this, __arguments, generator) => {
   });
 };
 /*!
- * ApexCharts v6.2.0
+ * ApexCharts v6.4.0
  * (c) 2018-2026 ApexCharts
  */
 
@@ -2819,7 +2819,14 @@ var __async = (__this, __arguments, generator) => {
     heatmap() {
       return {
         chart: {
-          stacked: false
+          stacked: false,
+          // A heatmap is a fixed grid: zooming/panning only distorts the cells
+          // and (on a datetime axis) collapses the month labels to repeats, so
+          // it is off by default, mirroring treemap. Users can opt back in with
+          // chart.zoom.enabled: true.
+          zoom: {
+            enabled: false
+          }
         },
         fill: {
           opacity: 1
@@ -2833,7 +2840,11 @@ var __async = (__this, __arguments, generator) => {
           colors: ["#fff"]
         },
         tooltip: {
-          followCursor: true,
+          // Anchor the tooltip above the hovered cell with a downward arrow
+          // (flipping below near the top edge), the same treatment horizontal
+          // bars get, rather than trailing the cursor. Opt back into the old
+          // behavior with tooltip.followCursor: true.
+          followCursor: false,
           marker: {
             show: false
           },
@@ -4514,6 +4525,20 @@ var __async = (__this, __arguments, generator) => {
             blur: 1,
             color: "#000",
             opacity: 0.8
+          },
+          // Ride data labels to their new position on a data-change update
+          // (e.g. a bar chart race), instead of snapping. Off by default so
+          // existing charts are unchanged. Speed/easing follow
+          // chart.animations.dynamicAnimation. Bar/column only.
+          animate: {
+            enabled: false
+          },
+          // Count the numeric value up/down from its previous value on update,
+          // like countUp.js. Off by default. The dataLabels.formatter runs each
+          // frame, so number formatting (decimals, separators, prefixes) is
+          // preserved. Bar/column only.
+          countUp: {
+            enabled: false
           }
         },
         fill: {
@@ -4705,13 +4730,15 @@ var __async = (__this, __arguments, generator) => {
         states: {
           hover: {
             filter: {
-              type: "lighten"
+              type: "lighten",
+              value: 0.15
             }
           },
           active: {
             allowMultipleDataPointsSelection: false,
             filter: {
-              type: "darken"
+              type: "darken",
+              value: 0.35
             }
           }
         },
@@ -5765,14 +5792,54 @@ var __async = (__this, __arguments, generator) => {
         globals
       );
     }
+    /**
+     * Lazy initial-series snapshot. Capturing `initialSeries` used to deep-clone
+     * the entire series on every parse and every update: the single largest CPU
+     * bucket at 50k+ points (profiled at ~23ms per 50k update). The setter now
+     * stores a cheap per-series shallow copy (series OBJECTS copied, data arrays
+     * shared) and the deep snapshot materializes only when something actually
+     * reads it (resetSeries, toolbar reset-home, tooltip same-length check).
+     *
+     * Why sharing the data arrays is safe: internal "mutations" of a series'
+     * data are property REPLACEMENTS (`series[i].data = []` on legend collapse),
+     * which cannot reach the captured copies because each series object was
+     * copied at capture time. The one in-place mutator (appendData's push loop)
+     * re-captures immediately after mutating, so the pending snapshot never
+     * spans the mutation.
+     *
+     * @param {Record<string, any>} globals
+     */
+    defineLazyInitialSeries(globals) {
+      let src = [];
+      let snap = null;
+      Object.defineProperty(globals, "initialSeries", {
+        configurable: true,
+        enumerable: true,
+        get() {
+          if (snap === null) {
+            snap = Utils$1.clone(src);
+          }
+          return snap;
+        },
+        set(value) {
+          src = Array.isArray(value) ? value.map(
+            (s) => s && typeof s === "object" && !Array.isArray(s) ? __spreadValues({}, s) : s
+          ) : value;
+          snap = null;
+          globals._initialSeriesPeek = src;
+        }
+      });
+      globals._initialSeriesPeek = src;
+    }
     /**
      * @param {Record<string, any>} config
      */
     init(config) {
       const globals = this.globalVars(config);
       this.initGlobalVars(globals);
+      this.defineLazyInitialSeries(globals);
       globals.initialConfig = Utils$1.extend({}, config);
-      globals.initialSeries = Utils$1.clone(config.series);
+      globals.initialSeries = config.series;
       globals.lastXAxis = Utils$1.clone(
         /** @type {NonNullable<typeof globals.initialConfig>} */
         globals.initialConfig.xaxis
@@ -8151,6 +8218,7 @@ var __async = (__this, __arguments, generator) => {
       });
     }
   }
+  const DEFAULT_INTENSITY = { lighten: 0.15, darken: 0.35 };
   class Filters {
     /**
      * @param {import('../types/internal').ChartStateW} w
@@ -8176,8 +8244,9 @@ var __async = (__this, __arguments, generator) => {
      * @param {any} el
      * @param {number} i
      * @param {string} filterType
+     * @param {number} [intensity] Blend strength (0 to 1). Defaults per type.
      */
-    applyFilter(el, i, filterType) {
+    applyFilter(el, i, filterType, intensity) {
       var _a, _b, _c;
       const w = this.w;
       if (el.unfilter) {
@@ -8188,15 +8257,21 @@ var __async = (__this, __arguments, generator) => {
         return;
       }
       const shadowAttr = w.config.chart.dropShadow;
-      const brightnessFactor = filterType === "lighten" ? 2 : 0.3;
+      const fallback = filterType === "lighten" ? DEFAULT_INTENSITY.lighten : DEFAULT_INTENSITY.darken;
+      const t = Math.max(
+        0,
+        Math.min(1, typeof intensity === "number" ? intensity : fallback)
+      );
+      const diag = 1 - t;
+      const offset = filterType === "lighten" ? t : 0;
       if (el.filterWith) {
         el.filterWith((add) => {
           add.colorMatrix({
             type: "matrix",
             values: `
-            ${brightnessFactor} 0 0 0 0
-            0 ${brightnessFactor} 0 0 0
-            0 0 ${brightnessFactor} 0 0
+            ${diag} 0 0 0 ${offset}
+            0 ${diag} 0 0 ${offset}
+            0 0 ${diag} 0 ${offset}
             0 0 0 1 0
           `,
             in: "SourceGraphic",
@@ -8295,7 +8370,7 @@ var __async = (__this, __arguments, generator) => {
           el.node.setAttribute("selected", true);
           const activeFilter = w.config.states.active.filter;
           if (activeFilter !== "none") {
-            this.applyFilter(el, realIndex, activeFilter.type);
+            this.applyFilter(el, realIndex, activeFilter.type, activeFilter.value);
           }
         }
       }
@@ -9134,7 +9209,7 @@ var __async = (__this, __arguments, generator) => {
       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);
+          filters.applyFilter(path, i, hoverFilter.type, hoverFilter.value);
         }
       }
     }
@@ -9219,12 +9294,12 @@ var __async = (__this, __arguments, generator) => {
         if (selected === "true") {
           const activeFilter = w.config.states.active.filter;
           if (activeFilter !== "none") {
-            filters.applyFilter(path, i, activeFilter.type);
+            filters.applyFilter(path, i, activeFilter.type, activeFilter.value);
           } else {
             if (w.config.states.hover.filter !== "none") {
               if (!w.interact.isTouchDevice) {
                 const hoverFilter = w.config.states.hover.filter;
-                filters.applyFilter(path, i, hoverFilter.type);
+                filters.applyFilter(path, i, hoverFilter.type, hoverFilter.value);
               }
             }
           }
@@ -9232,7 +9307,7 @@ var __async = (__this, __arguments, generator) => {
           if (w.config.states.active.filter.type !== "none") {
             if (w.config.states.hover.filter.type !== "none" && !w.interact.isTouchDevice) {
               const hoverFilter = w.config.states.hover.filter;
-              filters.applyFilter(path, i, hoverFilter.type);
+              filters.applyFilter(path, i, hoverFilter.type, hoverFilter.value);
             } else {
               filters.getDefaultFilter(path, i);
             }
@@ -9871,12 +9946,13 @@ var __async = (__this, __arguments, generator) => {
     const markerSize = w.config.markers && w.config.markers.size;
     const markersOn = Array.isArray(markerSize) ? markerSize.some((s) => s > 0) : (markerSize || 0) > 0;
     const labelsOn = !!(w.config.dataLabels && w.config.dataLabels.enabled);
+    const isHeatmap = type === "heatmap";
     let total = 0;
     let maxLen = 0;
     series.forEach((s) => {
       const n = Array.isArray(s.data) ? s.data.length : 0;
       if (n > maxLen) maxLen = n;
-      if (scatterish || markersOn) total += n;
+      if (scatterish || markersOn || isHeatmap) total += n;
       if (labelsOn) total += n;
     });
     const LARGE_D = 5e4;
@@ -12728,7 +12804,7 @@ var __async = (__this, __arguments, generator) => {
      * @param {number | null} [endingSeriesIndex]
      */
     getMinYMaxY(startingSeriesIndex, lowestY = Number.MAX_VALUE, highestY = -Number.MAX_VALUE, endingSeriesIndex = null) {
-      var _a, _b, _c, _d, _e, _f, _g, _h;
+      var _a, _b, _c, _d, _e, _f, _g, _h, _i;
       const cnf = this.w.config;
       const gl = this.w.globals;
       let maxY = -Number.MAX_VALUE;
@@ -12792,14 +12868,68 @@ var __async = (__this, __arguments, generator) => {
             }
           }
         }
+        const plainNumeric = seriesMin === series && seriesMax === series && cnf.chart.type !== "boxPlot" && seriesType !== "candlestick" && seriesType !== "boxPlot" && seriesType !== "violin" && seriesType !== "rangeArea" && seriesType !== "rangeBar" && !(this.w.seriesData.seriesGoals[i] && this.w.seriesData.seriesGoals[i].length);
+        if (plainNumeric) {
+          const arr = series[i];
+          const jEnd = Math.min(lastXIndex, arr.length - 1);
+          const pe = (_b = this.w.seriesData._parsedExtrema) == null ? void 0 : _b[i];
+          if (pe && pe.ref === arr && pe.len === arr.length && firstXIndex === 0 && jEnd === arr.length - 1) {
+            if (pe.maxY > maxY) maxY = pe.maxY;
+            if (pe.lowestY < lowestY) lowestY = pe.lowestY;
+            if (pe.negMinY < 0 && pe.negMinY < minY) minY = pe.negMinY;
+            if (pe.yDec > gl.yValueDecimal) gl.yValueDecimal = pe.yDec;
+            if (pe.hasNulls) gl.hasNullValues = true;
+          } else {
+            let yDec = gl.yValueDecimal;
+            let hasNulls = false;
+            for (let j = firstXIndex; j <= jEnd; j++) {
+              const val = arr[j];
+              if (val !== null && typeof val === "number" && val === val && val !== Infinity && val !== -Infinity) {
+                if (val > maxY) maxY = val;
+                if (val < lowestY) lowestY = val;
+                if (minY > val && val < 0) minY = val;
+                if (!Number.isInteger(val)) {
+                  const av = val < 0 ? -val : val;
+                  if (av >= 1e-6 && av < 1e21) {
+                    const str = "" + val;
+                    const dot = str.indexOf(".");
+                    const dec = dot === -1 ? 0 : str.length - dot - 1;
+                    if (dec > yDec) yDec = dec;
+                  } else {
+                    const nv = Utils$1.noExponents(val);
+                    if (Utils$1.isFloat(nv)) {
+                      yDec = Math.max(yDec, nv.toString().split(".")[1].length);
+                    }
+                  }
+                }
+              } else {
+                hasNulls = true;
+              }
+            }
+            gl.yValueDecimal = yDec;
+            if (hasNulls) gl.hasNullValues = true;
+          }
+          highestY = maxY;
+          if (seriesType === "bar" || seriesType === "column") {
+            if (minY < 0 && maxY < 0) {
+              maxY = 0;
+              highestY = Math.max(highestY, 0);
+            }
+            if (minY === Number.MIN_VALUE) {
+              minY = 0;
+              lowestY = Math.min(lowestY, 0);
+            }
+          }
+          continue;
+        }
         for (let j = firstXIndex; j <= lastXIndex && j < this.w.seriesData.series[i].length; j++) {
           let val = series[i][j];
           if (val !== null && Utils$1.isNumber(val)) {
-            if (typeof ((_b = seriesMax[i]) == null ? void 0 : _b[j]) !== "undefined") {
+            if (typeof ((_c = seriesMax[i]) == null ? void 0 : _c[j]) !== "undefined") {
               maxY = Math.max(maxY, seriesMax[i][j]);
               lowestY = Math.min(lowestY, seriesMax[i][j]);
             }
-            if (typeof ((_c = seriesMin[i]) == null ? void 0 : _c[j]) !== "undefined") {
+            if (typeof ((_d = seriesMin[i]) == null ? void 0 : _d[j]) !== "undefined") {
               lowestY = Math.min(lowestY, seriesMin[i][j]);
               highestY = Math.max(highestY, seriesMin[i][j]);
             }
@@ -12828,7 +12958,7 @@ var __async = (__this, __arguments, generator) => {
                 break;
               case "violin":
                 {
-                  if (typeof ((_d = this.w.violinData.seriesViolinMax[i]) == null ? void 0 : _d[j]) !== "undefined") {
+                  if (typeof ((_e = this.w.violinData.seriesViolinMax[i]) == null ? void 0 : _e[j]) !== "undefined") {
                     maxY = Math.max(maxY, this.w.violinData.seriesViolinMax[i][j]);
                     lowestY = Math.min(
                       lowestY,
@@ -12851,7 +12981,7 @@ var __async = (__this, __arguments, generator) => {
               );
             }
             if (this.w.config.chart.type === "boxPlot" || seriesType === "boxPlot") {
-              const boxPts = (_f = (_e = this.w.candleData.seriesBoxPoints) == null ? void 0 : _e[i]) == null ? void 0 : _f[j];
+              const boxPts = (_g = (_f = this.w.candleData.seriesBoxPoints) == null ? void 0 : _f[i]) == null ? void 0 : _g[j];
               if (boxPts) {
                 for (let p = 0; p < boxPts.length; p++) {
                   const pv = boxPts[p];
@@ -12870,7 +13000,7 @@ var __async = (__this, __arguments, generator) => {
                 val.toString().split(".")[1].length
               );
             }
-            if (minY > ((_g = seriesMin[i]) == null ? void 0 : _g[j]) && ((_h = seriesMin[i]) == null ? void 0 : _h[j]) < 0) {
+            if (minY > ((_h = seriesMin[i]) == null ? void 0 : _h[j]) && ((_i = seriesMin[i]) == null ? void 0 : _i[j]) < 0) {
               minY = seriesMin[i][j];
             }
           } else {
@@ -13024,38 +13154,33 @@ var __async = (__this, __arguments, generator) => {
       const cnf = this.w.config;
       const isXNumeric = cnf.xaxis.type === "numeric" || cnf.xaxis.type === "datetime" || cnf.xaxis.type === "category" && !this.w.axisFlags.noLabelsProvided || this.w.axisFlags.noLabelsProvided || this.w.axisFlags.isXNumeric;
       const getInitialMinXMaxX = () => {
+        var _a;
+        let minX = gl.minX;
+        let maxX = gl.maxX;
         for (let i = 0; i < this.w.seriesData.series.length; i++) {
-          if (this.w.labelData.labels[i]) {
-            for (let j = 0; j < this.w.labelData.labels[i].length; j++) {
-              if (this.w.labelData.labels[i][j] !== null && Utils$1.isNumber(this.w.labelData.labels[i][j])) {
-                gl.maxX = Math.max(
-                  gl.maxX,
-                  /** @type {number} */
-                  /** @type {any} */
-                  this.w.labelData.labels[i][j]
-                );
-                gl.initialMaxX = Math.max(
-                  gl.maxX,
-                  /** @type {number} */
-                  /** @type {any} */
-                  this.w.labelData.labels[i][j]
-                );
-                gl.minX = Math.min(
-                  gl.minX,
-                  /** @type {number} */
-                  /** @type {any} */
-                  this.w.labelData.labels[i][j]
-                );
-                gl.initialMinX = Math.min(
-                  gl.minX,
-                  /** @type {number} */
-                  /** @type {any} */
-                  this.w.labelData.labels[i][j]
-                );
-              }
+          const lbls = (
+            /** @type {any} */
+            this.w.labelData.labels[i]
+          );
+          if (!lbls) continue;
+          const pe = (_a = this.w.seriesData._parsedExtrema) == null ? void 0 : _a[i];
+          if (pe && pe.xNumeric && pe.xref === lbls && pe.len === lbls.length) {
+            if (pe.maxX > maxX) maxX = pe.maxX;
+            if (pe.minX < minX) minX = pe.minX;
+            continue;
+          }
+          for (let j = 0; j < lbls.length; j++) {
+            const v = lbls[j];
+            if (v !== null && typeof v === "number" && v === v) {
+              if (v > maxX) maxX = v;
+              if (v < minX) minX = v;
             }
           }
         }
+        gl.maxX = maxX;
+        gl.initialMaxX = maxX;
+        gl.minX = minX;
+        gl.initialMinX = minX;
       };
       if (this.w.axisFlags.isXNumeric) {
         getInitialMinXMaxX();
@@ -13197,13 +13322,40 @@ var __async = (__this, __arguments, generator) => {
     _getMinXDiff() {
       const gl = this.w.globals;
       if (this.w.axisFlags.isXNumeric) {
-        this.w.seriesData.seriesX.forEach((sX) => {
+        this.w.seriesData.seriesX.forEach((sX, si) => {
+          var _a;
           if (sX.length) {
             if (sX.length === 1) {
               sX.push(
                 this.w.seriesData.seriesX[gl.maxValsInArrayIndex][this.w.seriesData.seriesX[gl.maxValsInArrayIndex].length - 1]
               );
             }
+            const pe = (_a = this.w.seriesData._parsedExtrema) == null ? void 0 : _a[si];
+            if (pe && pe.xNumeric && pe.xSorted && pe.xref === sX && pe.len === sX.length) {
+              if (pe.minXDiff < gl.minXDiff) gl.minXDiff = pe.minXDiff;
+              if (gl.dataPoints === 1 || gl.minXDiff === Number.MAX_VALUE) {
+                gl.minXDiff = 0.5;
+              }
+              return;
+            }
+            let presorted = true;
+            let minDiff = gl.minXDiff;
+            for (let j = 1; j < sX.length; j++) {
+              const d = sX[j] - sX[j - 1];
+              if (d > 0) {
+                if (d < minDiff) minDiff = d;
+              } else if (d < 0) {
+                presorted = false;
+                break;
+              }
+            }
+            if (presorted) {
+              gl.minXDiff = minDiff;
+              if (gl.dataPoints === 1 || gl.minXDiff === Number.MAX_VALUE) {
+                gl.minXDiff = 0.5;
+              }
+              return;
+            }
             const seriesX = sX.slice();
             seriesX.sort((a, b) => a - b);
             seriesX.forEach((s, j) => {
@@ -13362,6 +13514,13 @@ var __async = (__this, __arguments, generator) => {
         realIndex,
         w.globals.yAxisScale[realIndex].result.slice()
       );
+      let labelStep = 1;
+      if (w.config.chart.type === "heatmap" && !w.config.yaxis[realIndex].labels.formatter) {
+        const fs = parseInt(yaxisFontSize, 10) || 11;
+        const maxLabels = Math.max(1, Math.floor(w.layout.gridHeight / (fs * 1.4)));
+        const count = tickAmount + 1;
+        if (count > maxLabels) labelStep = Math.ceil(count / maxLabels);
+      }
       if (w.config.yaxis[realIndex].labels.show) {
         let lY = w.layout.translateY + w.config.yaxis[realIndex].labels.offsetY;
         if (w.globals.isBarHorizontal) lY = 0;
@@ -13369,7 +13528,8 @@ var __async = (__this, __arguments, generator) => {
         lY += parseInt(yaxisFontSize, 10) / 3;
         let firstLabel = null;
         for (let i = tickAmount; i >= 0; i--) {
-          const val = lbFormatter(labels[i], i, w);
+          const thinned = labelStep > 1 && i % labelStep !== 0;
+          const val = thinned ? "" : lbFormatter(labels[i], i, w);
           let xPad = w.config.yaxis[realIndex].labels.padding;
           if (w.config.yaxis[realIndex].opposite && w.config.yaxis.length !== 0)
             xPad *= -1;
@@ -13980,6 +14140,7 @@ var __async = (__this, __arguments, generator) => {
     }
     drawXCrosshairs() {
       const w = this.w;
+      w.dom.elGraphical.node.querySelectorAll(":scope > .apexcharts-xcrosshairs").forEach((el) => el.remove());
       const graphics = new Graphics(this.w);
       const filters = new Filters(this.w);
       const crosshairGradient = w.config.xaxis.crosshairs.fill.gradient;
@@ -14011,10 +14172,7 @@ var __async = (__this, __arguments, generator) => {
             []
           );
         }
-        let xcrosshairs = graphics.drawRect();
-        if (w.config.xaxis.crosshairs.width === 1) {
-          xcrosshairs = graphics.drawLine(0, 0, 0, 0);
-        }
+        let xcrosshairs = w.config.xaxis.crosshairs.width === 1 ? graphics.drawLine(0, 0, 0, 0) : graphics.drawRect();
         let gridHeight = w.layout.gridHeight;
         if (!Utils$1.isNumber(gridHeight) || gridHeight < 0) {
           gridHeight = 0;
@@ -14051,6 +14209,9 @@ var __async = (__this, __arguments, generator) => {
     }
     drawYCrosshairs() {
       const w = this.w;
+      w.dom.elGraphical.node.querySelectorAll(
+        ":scope > .apexcharts-ycrosshairs, :scope > .apexcharts-ycrosshairs-hidden"
+      ).forEach((el) => el.remove());
       const graphics = new Graphics(this.w);
       const crosshair = (
         /** @type {any[]} */
@@ -14603,7 +14764,7 @@ var __async = (__this, __arguments, generator) => {
       return count === 0 ? k : `${k}#${count}`;
     });
   }
-  function seriesJoin(w, realIndex, includeIdentity = false) {
+  function seriesJoin(w, realIndex, includeIdentity = false, allowReorder = false) {
     var _a, _b;
     if (!lengthTransitionEnabled(w)) return null;
     const frame = w.globals.prevStreamFrame;
@@ -14617,7 +14778,7 @@ var __async = (__this, __arguments, generator) => {
     );
     const newKeys = uniquifyKeys(newY.map((_, j) => datumKey(w, realIndex, j)));
     const join = joinKeys(oldKeys, newKeys);
-    if (!join.ordered) return null;
+    if (!join.ordered && !allowReorder) return null;
     if (!join.changed && !includeIdentity) return null;
     return { join, oldKeys, newKeys };
   }
@@ -14926,7 +15087,7 @@ var __async = (__this, __arguments, generator) => {
       gl.prevChromeFrame = null;
     }
   }
-  function fadeIn(w, node, duration, ease) {
+  function fadeIn$1(w, node, duration, ease) {
     const style = (
       /** @type {any} */
       node.style
@@ -15023,34 +15184,59 @@ var __async = (__this, __arguments, generator) => {
     const spanHi = Math.max(...spanPs);
     const margin = Math.max(40, (spanHi - spanLo) * 0.25);
     const clamp = (p) => Math.max(spanLo - margin, Math.min(spanHi + margin, p));
+    const tweenPairedLine = (line, old) => {
+      if (!line) return;
+      const lineTo = parseFloat(line.getAttribute(lineAttrs[0]) || "");
+      const lineFrom = oldLines[old.i];
+      if (isFinite(lineTo) && isFinite(lineFrom)) {
+        tweenPos(w, line, lineAttrs, lineFrom, lineTo, duration, ease);
+      }
+    };
     newLabels.forEach((label, i) => {
       const to = parseFloat(label.getAttribute(posAttr) || "");
       const old = oldByText.get(label.textContent || "");
       const line = newLinesAligned ? newLines[i] : null;
       if (old) matchedOld.add(old.i);
-      if (!old || !isFinite(old.pos) || old.transform || label.getAttribute("transform")) {
+      const labelTransform = label.getAttribute("transform");
+      if (!old || !isFinite(old.pos)) {
         if (!old) {
-          if (project && isFinite(to) && !label.getAttribute("transform")) {
+          if (project && isFinite(to) && !labelTransform) {
             const from = isFinite(project.toOld(to)) ? clamp(project.toOld(to)) : NaN;
             if (isFinite(from) && Math.abs(from - to) > 0.5) {
               tweenPos(w, label, [posAttr], from, to, duration, ease);
               if (line) tweenPos(w, line, lineAttrs, from, to, duration, ease);
             }
           }
-          fadeIn(w, label, duration, ease);
-          if (line) fadeIn(w, line, duration, ease);
+          fadeIn$1(w, label, duration, ease);
+          if (line) fadeIn$1(w, line, duration, ease);
         }
         return;
       }
       if (!isFinite(to) || Math.abs(old.pos - to) < 0.5) return;
-      tweenPos(w, label, [posAttr], old.pos, to, duration, ease);
-      if (line) {
-        const lineTo = parseFloat(line.getAttribute(lineAttrs[0]) || "");
-        const lineFrom = oldLines[old.i];
-        if (isFinite(lineTo) && isFinite(lineFrom)) {
-          tweenPos(w, line, lineAttrs, lineFrom, lineTo, duration, ease);
+      if (labelTransform || old.transform) {
+        const delta = old.pos - to;
+        if (isFinite(delta)) {
+          const base = labelTransform || "";
+          rafTween(
+            w,
+            duration,
+            ease,
+            (eased) => {
+              const v = delta * (1 - eased);
+              const t = posAttr === "x" ? `translate(${v} 0)` : `translate(0 ${v})`;
+              label.setAttribute("transform", `${t} ${base}`.trim());
+            },
+            () => {
+              if (base) label.setAttribute("transform", base);
+              else label.removeAttribute("transform");
+            }
+          );
         }
+        tweenPairedLine(line, old);
+        return;
       }
+      tweenPos(w, label, [posAttr], old.pos, to, duration, ease);
+      tweenPairedLine(line, old);
     });
     if (!project || !newLabels.length) return;
     let ghosts = 0;
@@ -15089,7 +15275,7 @@ var __async = (__this, __arguments, generator) => {
     if (!chrome || !gl.axisCharts || !Environment.isBrowser()) return;
     if (!lengthTransitionEnabled(w)) return;
     const anyMotion = (w.seriesData.series || []).some(
-      (_, i) => seriesJoin(w, i, true) !== null
+      (_, i) => seriesJoin(w, i, true, true) !== null
     );
     if (!anyMotion) return;
     const root = w.dom.baseEl;
@@ -15133,6 +15319,158 @@ var __async = (__this, __arguments, generator) => {
     } catch (_) {
     }
   }
+  const DL_GROUP_SEL = ".apexcharts-data-labels[data\\:dlKey]";
+  const DL_TEXT_SEL = ".apexcharts-datalabel";
+  function dataLabelMotionEnabled(w) {
+    var _a, _b;
+    const dl = w.config.dataLabels;
+    return !!(((_a = dl == null ? void 0 : dl.animate) == null ? void 0 : _a.enabled) || ((_b = dl == null ? void 0 : dl.countUp) == null ? void 0 : _b.enabled));
+  }
+  function decimalsOf(n) {
+    if (!isFinite(n)) return 0;
+    const s = String(n);
+    const dot = s.indexOf(".");
+    return dot === -1 ? 0 : Math.min(6, s.length - dot - 1);
+  }
+  function writeLabel(textEl, s) {
+    const tspan = textEl.querySelector("tspan");
+    if (tspan) tspan.textContent = s;
+    else textEl.textContent = s;
+  }
+  function captureDataLabels(w) {
+    const gl = w.globals;
+    gl.prevDataLabels = null;
+    if (!gl.axisCharts || !Environment.isBrowser()) return;
+    if (!dataLabelMotionEnabled(w)) return;
+    const root = w.dom.baseEl;
+    if (!Utils$1.elementExists(root)) return;
+    try {
+      const map = /* @__PURE__ */ new Map();
+      root.querySelectorAll(DL_GROUP_SEL).forEach((group) => {
+        const key = group.getAttribute("data:dlKey");
+        if (!key) return;
+        const textEl = group.querySelector(DL_TEXT_SEL);
+        if (!textEl) return;
+        map.set(key, {
+          cx: parseFloat(textEl.getAttribute("cx") || ""),
+          cy: parseFloat(textEl.getAttribute("cy") || ""),
+          val: parseFloat(group.getAttribute("data:dlVal") || "")
+        });
+      });
+      gl.prevDataLabels = map.size ? map : null;
+    } catch (_) {
+      gl.prevDataLabels = null;
+    }
+  }
+  function fadeIn(w, node, duration, ease) {
+    const style = (
+      /** @type {any} */
+      node.style
+    );
+    style.opacity = "0";
+    rafTween(
+      w,
+      duration,
+      ease,
+      (eased) => {
+        style.opacity = String(eased);
+      },
+      () => {
+        style.opacity = "";
+      }
+    );
+  }
+  function applyDataLabelTransition(w) {
+    var _a, _b;
+    const gl = w.globals;
+    const prev = gl.prevDataLabels;
+    gl.prevDataLabels = null;
+    if (!prev || !gl.axisCharts || !Environment.isBrowser()) return;
+    if (!dataLabelMotionEnabled(w)) return;
+    if (!lengthTransitionEnabled(w)) return;
+    const root = w.dom.baseEl;
+    if (!Utils$1.elementExists(root)) return;
+    const dl = w.config.dataLabels;
+    const ride = !!((_a = dl.animate) == null ? void 0 : _a.enabled);
+    const countUp = !!((_b = dl.countUp) == null ? void 0 : _b.enabled);
+    const formatter = dl.formatter;
+    const duration = Math.max(1, w.config.chart.animations.dynamicAnimation.speed || 1);
+    const ease = morphEasing(w);
+    try {
+      root.querySelectorAll(DL_GROUP_SEL).forEach((group) => {
+        const key = group.getAttribute("data:dlKey");
+        if (!key) return;
+        const textEl = group.querySelector(DL_TEXT_SEL);
+        if (!textEl) return;
+        const old = prev.get(key);
+        if (ride) {
+          if (old && isFinite(old.cx) && isFinite(old.cy)) {
+            const newCx = parseFloat(textEl.getAttribute("cx") || "");
+            const newCy = parseFloat(textEl.getAttribute("cy") || "");
+            const dx = old.cx - newCx;
+            const dy = old.cy - newCy;
+            if (isFinite(dx) && isFinite(dy) && Math.abs(dx) + Math.abs(dy) > 0.5) {
+              const base = group.getAttribute("transform") || "";
+              rafTween(
+                w,
+                duration,
+                ease,
+                (eased) => {
+                  const t = 1 - eased;
+                  group.setAttribute(
+                    "transform",
+                    `translate(${dx * t} ${dy * t}) ${base}`.trim()
+                  );
+                },
+                () => {
+                  group.setAttribute("transform", base);
+                }
+              );
+            }
+          } else if (!old) {
+            fadeIn(w, group, duration, ease);
+          }
+        }
+        if (countUp && old && isFinite(old.val)) {
+          const newVal = parseFloat(group.getAttribute("data:dlVal") || "");
+          if (isFinite(newVal) && Math.abs(newVal - old.val) > 1e-9) {
+            const from = old.val;
+            const dec = Math.max(decimalsOf(from), decimalsOf(newVal));
+            const realIndex = parseInt(key, 10);
+            const j = parseInt(group.getAttribute("data:dlJ") || "", 10);
+            const format = (v) => {
+              const rounded = Number(v.toFixed(dec));
+              let out = rounded;
+              if (typeof formatter === "function") {
+                try {
+                  out = formatter(rounded, __spreadProps(__spreadValues({}, w), {
+                    seriesIndex: realIndex,
+                    dataPointIndex: isFinite(j) ? j : 0,
+                    w
+                  }));
+                } catch (_) {
+                  out = rounded;
+                }
+              }
+              return String(out);
+            };
+            rafTween(
+              w,
+              duration,
+              ease,
+              (eased) => {
+                writeLabel(textEl, format(from + (newVal - from) * eased));
+              },
+              () => {
+                writeLabel(textEl, format(newVal));
+              }
+            );
+          }
+        }
+      });
+    } catch (_) {
+    }
+  }
   class Series {
     /**
      * @param {import('../types/internal').ChartStateW} w
@@ -15241,6 +15579,24 @@ var __async = (__this, __arguments, generator) => {
         (_a = this._toggleDataSeries) == null ? void 0 : _a.call(this, isSeriesHidden.realIndex, false);
       }
     }
+    /**
+     * Cheap pre-update reset for the data-replacement paths (updateSeries /
+     * appendSeries). Clears the same bookkeeping resetSeries() clears (series
+     * cache, previous paths, collapsed-series state) WITHOUT restoring
+     * config.series from the initialSeries snapshot: the caller is about to
+     * replace the series anyway (parseData assigns config.series = newSeries),
+     * so materializing and cloning the snapshot per update is pure waste (two
+     * O(n) deep clones per streaming tick at 50k points).
+     */
+    prepareDataUpdate() {
+      const w = this.w;
+      this.clearSeriesCache();
+      w.globals.previousPaths = [];
+      w.globals.collapsedSeries = [];
+      w.globals.ancillaryCollapsedSeries = [];
+      w.globals.collapsedSeriesIndices = [];
+      w.globals.ancillaryCollapsedSeriesIndices = [];
+    }
     resetSeries(shouldUpdateChart = true, shouldResetZoom = true, shouldResetCollapsed = true) {
       var _a, _b;
       const w = this.w;
@@ -15488,6 +15844,7 @@ var __async = (__this, __arguments, generator) => {
       const w = this.w;
       captureStreamFrame(w);
       captureAxisChrome(w);
+      captureDataLabels(w);
       if (!w.globals.axisCharts) {
         w.globals.previousPaths = w.seriesData.series;
         return;
@@ -17742,6 +18099,24 @@ var __async = (__this, __arguments, generator) => {
         }
       }
       if (canvasMode) {
+        const rr = (
+          /** @type {any} */
+          ctx.renderer
+        );
+        if (rr && rr._repaintHostInPlace) {
+          rr._repaintHostInPlace = false;
+          const wrapNode = this.w.dom.elGraphical.node.querySelector(
+            ".apexcharts-canvas-series-wrap"
+          );
+          if (wrapNode && rr.canRepaintInPlace && rr.canRepaintInPlace()) {
+            rr.repaintInPlace();
+            const groups = Array.isArray(elGraph) ? elGraph : [elGraph];
+            groups.forEach((g) => {
+              if (g && g.node) wrapNode.appendChild(g.node);
+            });
+            return [];
+          }
+        }
         const host = ctx.renderer.present();
         if (host) {
           const wrap = new Graphics(w).group({
@@ -18139,6 +18514,108 @@ var __async = (__this, __arguments, generator) => {
       const firstDataPoint = this.getFirstDataPoint();
       return firstDataPoint && Array.isArray(firstDataPoint);
     }
+    /**
+     * Typed single pass for the dominant [[x, y], ...] shape: scalar numeric or
+     * null y, no z, no OHLC tuples. One monomorphic loop fills preallocated
+     * x/y arrays and fuses the y-extrema scan that Range.getMinYMaxY would
+     * otherwise repeat over every value (the extrema entry is ref+length
+     * guarded, so any later reshaping of the series array simply falls back to
+     * the scan). Returns false untouched on any non-conforming point so the
+     * general loop below handles mixed/exotic data with unchanged output.
+     * @param {any[]} data
+     * @param {number} i
+     * @returns {boolean}
+     */
+    _fast2DArrayParse(data, i) {
+      var _a, _b;
+      const n = data.length;
+      if (n === 0) return false;
+      const ys = new Array(n);
+      const xs = new Array(n);
+      let maxY = -Number.MAX_VALUE;
+      let lowestY = Number.MAX_VALUE;
+      let negMinY = Infinity;
+      let hasNulls = false;
+      let yDec = 0;
+      let xNumeric = true;
+      let minX = Infinity;
+      let maxX = -Infinity;
+      let xSorted = true;
+      let minXDiff = Infinity;
+      let prevX = NaN;
+      for (let j = 0; j < n; j++) {
+        const point = data[j];
+        if (!Array.isArray(point) || point.length > 2) return false;
+        const x = point[0];
+        const y = point[1];
+        if (xNumeric) {
+          if (typeof x === "number") {
+            if (x === x) {
+              if (x < minX) minX = x;
+              if (x > maxX) maxX = x;
+            }
+            const d = x - prevX;
+            if (d > 0) {
+              if (d < minXDiff) minXDiff = d;
+            } else if (d < 0) {
+              xSorted = false;
+            }
+            prevX = x;
+          } else {
+            xNumeric = false;
+          }
+        }
+        if (typeof y === "number") {
+          if (y === y && y !== Infinity && y !== -Infinity) {
+            if (y > maxY) maxY = y;
+            if (y < lowestY) lowestY = y;
+            if (y < 0 && y < negMinY) negMinY = y;
+            if (!Number.isInteger(y)) {
+              const av = y < 0 ? -y : y;
+              if (av >= 1e-6 && av < 1e21) {
+                const str = "" + y;
+                const dot = str.indexOf(".");
+                const dec = dot === -1 ? 0 : str.length - dot - 1;
+                if (dec > yDec) yDec = dec;
+              } else {
+                const nv = Utils$1.noExponents(y);
+                if (Utils$1.isFloat(nv)) {
+                  yDec = Math.max(yDec, nv.toString().split(".")[1].length);
+                }
+              }
+            }
+          } else {
+            hasNulls = true;
+          }
+        } else if (y === null) {
+          hasNulls = true;
+        } else {
+          return false;
+        }
+        ys[j] = y;
+        xs[j] = x;
+      }
+      this.twoDSeries = ys;
+      this.twoDSeriesX = xs;
+      this.w.axisFlags.dataFormatXNumeric = true;
+      const extrema = (_b = (_a = this.w.seriesData)._parsedExtrema) != null ? _b : _a._parsedExtrema = [];
+      extrema[i] = {
+        ref: ys,
+        len: n,
+        maxY,
+        lowestY,
+        negMinY,
+        hasNulls,
+        yDec,
+        xref: xs,
+        xNumeric,
+        minX,
+        maxX,
+        xSorted,
+        minXDiff
+      };
+      return true;
+    }
     /**
      * @param {any[]} ser
      * @param {number} i
@@ -18148,6 +18625,9 @@ var __async = (__this, __arguments, generator) => {
       const data = ser[i].data;
       const isBoxPlot = cnf.chart.type === "boxPlot" || /** @type {any} */
       cnf.series[i].type === "boxPlot";
+      if (!isBoxPlot && cnf.xaxis.type !== "datetime" && this._fast2DArrayParse(data, i)) {
+        return;
+      }
       for (let j = 0; j < data.length; j++) {
         const point = data[j];
         const x = point[0];
@@ -18544,6 +19024,7 @@ var __async = (__this, __arguments, generator) => {
       const cnf = this.w.config;
       const gl = this.w.globals;
       const dt = new DateTime(this.w);
+      this.w.seriesData._parsedExtrema = [];
       const xlabels = cnf.labels.length > 0 ? cnf.labels.slice() : cnf.xaxis.categories.slice();
       this.w.axisFlags.isRangeBar = cnf.chart.type === "rangeBar" && gl.isBarHorizontal;
       this.w.labelData.hasXaxisGroups = cnf.xaxis.type === "category" && cnf.xaxis.group.groups.length > 0;
@@ -18933,7 +19414,11 @@ var __async = (__this, __arguments, generator) => {
       if (this.w.axisFlags.dataWasParsed) {
         return series;
       }
-      if (!globalParsing && !series.some((s) => s.parsing)) {
+      const hasGlobalParsing = !!(globalParsing && (globalParsing.x || globalParsing.y || globalParsing.z));
+      const hasSeriesParsing = series.some(
+        (s) => s.parsing && (s.parsing.x || s.parsing.y || s.parsing.z)
+      );
+      if (!hasGlobalParsing && !hasSeriesParsing) {
         return series;
       }
       const processedSeries = series.map((serie, index) => {
@@ -19200,7 +19685,7 @@ var __async = (__this, __arguments, generator) => {
      * @param {any[]} ser
      */
     parseData(ser) {
-      var _a, _b, _c, _d, _e, _f;
+      var _a, _b, _c, _d, _e, _f, _g;
       const w = this.w;
       const cnf = w.config;
       const gl = w.globals;
@@ -19226,8 +19711,11 @@ var __async = (__this, __arguments, generator) => {
           gl.dataReducerRawMaxX = rawMaxX;
         }
       }
-      cnf.series = ser;
       if (gl.dataReducerRawSeries && ((_f = cnf.chart.dataReducer) == null ? void 0 : _f.enabled)) {
+        ser = ser.map((s) => __spreadValues({}, s));
+      }
+      cnf.series = ser;
+      if (gl.dataReducerRawSeries && ((_g = cnf.chart.dataReducer) == null ? void 0 : _g.enabled)) {
         const stash = gl.dataReducerRawSeries;
         gl.initialSeries = ser.map((s, i) => {
           var _a2, _b2, _c2;
@@ -19236,7 +19724,7 @@ var __async = (__this, __arguments, generator) => {
           });
         });
       } else {
-        gl.initialSeries = Utils$1.clone(ser);
+        gl.initialSeries = ser;
       }
       this.excludeCollapsedSeriesInYAxis();
       this.fallbackToCategory = false;
@@ -19256,10 +19744,23 @@ var __async = (__this, __arguments, generator) => {
       }
       this.coreUtils.getSeriesTotals();
       if (gl.axisCharts) {
-        this.w.seriesData.stackedSeriesTotals = this.coreUtils.getStackedSeriesTotals();
-        this.w.seriesData.stackedSeriesTotalsByGroups = this.coreUtils.getStackedSeriesTotalsByGroups();
+        Data._defineLazyResult(
+          this.w.seriesData,
+          "stackedSeriesTotals",
+          () => this.coreUtils.getStackedSeriesTotals()
+        );
+        Data._defineLazyResult(
+          this.w.seriesData,
+          "stackedSeriesTotalsByGroups",
+          () => this.coreUtils.getStackedSeriesTotalsByGroups()
+        );
+        Data._defineLazyResult(gl, "seriesPercent", () => {
+          this.coreUtils.getPercentSeries();
+          return gl.seriesPercent;
+        });
+      } else {
+        this.coreUtils.getPercentSeries();
       }
-      this.coreUtils.getPercentSeries();
       if (!this.w.axisFlags.dataFormatXNumeric && (!this.w.axisFlags.isXNumeric || cnf.xaxis.type === "numeric" && cnf.labels.length === 0 && cnf.xaxis.categories.length === 0)) {
         this.handleExternalLabelsData(ser);
       }
@@ -19272,6 +19773,12 @@ var __async = (__this, __arguments, generator) => {
       }
       return {
         // w.seriesData (future slice)
+        // initialSeries/originalSeries and the stacked totals are deliberately
+        // ABSENT: they already live as lazy accessors on gl / w.seriesData, so
+        // a snapshot field would either force their materialization (a deep
+        // clone plus three O(n) passes per parse that most charts never need)
+        // or, as a delegating getter, recurse into itself when a writer copies
+        // it back onto the object it delegates to.
         seriesData: {
           series: this.w.seriesData.series,
           seriesNames: this.w.seriesData.seriesNames,
@@ -19279,10 +19786,6 @@ var __async = (__this, __arguments, generator) => {
           seriesZ: this.w.seriesData.seriesZ,
           seriesColors: this.w.seriesData.seriesColors,
           seriesGoals: this.w.seriesData.seriesGoals,
-          initialSeries: gl.initialSeries,
-          originalSeries: gl.originalSeries,
-          stackedSeriesTotals: this.w.seriesData.stackedSeriesTotals,
-          stackedSeriesTotalsByGroups: this.w.seriesData.stackedSeriesTotalsByGroups,
           noLabelsProvided: this.w.axisFlags.noLabelsProvided
         },
         // w.rangeData (future slice)
@@ -19331,6 +19834,40 @@ var __async = (__this, __arguments, generator) => {
      * @param {number|null|undefined} xmax
      * @returns {any[]} Sliced array (new array, never the input reference).
      */
+    /**
+     * Define `key` on `obj` as a lazily computed property: `compute` runs on
+     * first read after this call and its result is cached; assigning to the
+     * property stores the assigned value directly (so code that writes the
+     * field, like getPercentSeries, keeps working). Re-calling resets the cache
+     * (used once per parse).
+     * @param {any} obj
+     * @param {string} key
+     * @param {() => any} compute
+     */
+    static _defineLazyResult(obj, key, compute) {
+      let has = false;
+      let value;
+      Object.defineProperty(obj, key, {
+        configurable: true,
+        enumerable: true,
+        get() {
+          if (!has) {
+            has = true;
+            value = compute();
+          }
+          return value;
+        },
+        set(v) {
+          has = true;
+          value = v;
+        }
+      });
+    }
+    /**
+     * @param {any[]} data
+     * @param {any} xmin
+     * @param {any} xmax
+     */
     static sliceByXRange(data, xmin, xmax) {
       const len = data.length;
       if (len === 0) return data;
@@ -19554,7 +20091,7 @@ var __async = (__this, __arguments, generator) => {
           if (!redraw) {
             w.globals.resized = true;
             w.globals.dataChanged = true;
-            if (animate) {
+            if (animate && w.config.chart.animations.enabled) {
               ch.series.getPreviousPaths();
             }
           }
@@ -19600,7 +20137,7 @@ var __async = (__this, __arguments, generator) => {
               w.globals.lastXAxis = options2.xaxis ? Utils$1.clone(options2.xaxis) : [];
               w.globals.lastYAxis = options2.yaxis ? Utils$1.clone(options2.yaxis) : [];
               w.globals.initialConfig = Utils$1.extend({}, w.config);
-              w.globals.initialSeries = Utils$1.clone(w.config.series);
+              w.globals.initialSeries = w.config.series;
               if (options2.series) {
                 for (let i = 0; i < w.globals.collapsedSeriesIndices.length; i++) {
                   const series = w.config.series[w.globals.collapsedSeriesIndices[i]];
@@ -19645,7 +20182,7 @@ var __async = (__this, __arguments, generator) => {
           xMax: w.globals.maxX
         });
         PerformanceCache.invalidateSelectors(w);
-        if (animate) {
+        if (animate && w.config.chart.animations.enabled) {
           this.ctx.series.getPreviousPaths();
         }
         const prevSeriesCount = w.config.series.length;
@@ -19665,15 +20202,16 @@ var __async = (__this, __arguments, generator) => {
         this.ctx._writeParsedAxisFlags(parsedState.axisFlags);
         if (overwriteInitialSeries) {
           if (w.globals.initialConfig) {
-            w.globals.initialConfig.series = Utils$1.clone(w.config.series);
+            w.globals.initialConfig.series = w.config.series;
           }
-          w.globals.initialSeries = Utils$1.clone(w.config.series);
+          w.globals.initialSeries = w.config.series;
         }
         if (this._canUseFastPath(newSeries, prevSeriesCount, prevDataLengths, w)) {
           return this.ctx.fastUpdate(animate, prevAxisScaleSig).then(() => {
             resolve(this.ctx);
           });
         }
+        if (this.ctx._updateStats) this.ctx._updateStats.full++;
         return this.ctx.update().then(() => {
           resolve(this.ctx);
         });
@@ -20196,11 +20734,11 @@ var __async = (__this, __arguments, generator) => {
       return false;
     }
     isInitialSeriesSameLen() {
-      var _a, _b, _c;
+      var _a, _b, _c, _d;
       let sameLen = true;
       const initialSeries = (
         /** @type {any[]} */
-        ((_a = this.w.globals.initialSeries) == null ? void 0 : _a.filter(
+        ((_b = (_a = this.w.globals._initialSeriesPeek) != null ? _a : this.w.globals.initialSeries) == null ? void 0 : _b.filter(
           /**
            * @param {Record<string, any>} s
            * @param {number} i
@@ -20212,7 +20750,7 @@ var __async = (__this, __arguments, generator) => {
         )) || []
       );
       for (let i = 0; i < initialSeries.length - 1; i++) {
-        if (!((_b = initialSeries[i]) == null ? void 0 : _b.data) || !((_c = initialSeries[i + 1]) == null ? void 0 : _c.data)) return true;
+        if (!((_c = initialSeries[i]) == null ? void 0 : _c.data) || !((_d = initialSeries[i + 1]) == null ? void 0 : _d.data)) return true;
         if (initialSeries[i].data.length !== initialSeries[i + 1].data.length) {
           sameLen = false;
           break;
@@ -20818,12 +21356,14 @@ var __async = (__this, __arguments, generator) => {
         w
       });
       if (tooltipEl) {
+        const arrowEl = tooltipEl.querySelector(".apexcharts-tooltip-arrow");
         if (typeof customTooltip === "string" || typeof customTooltip === "number") {
           tooltipEl.innerHTML = String(customTooltip);
         } else if (customTooltip instanceof Element || typeof customTooltip.nodeName === "string") {
           tooltipEl.innerHTML = "";
           tooltipEl.appendChild(customTooltip.cloneNode(true));
         }
+        if (arrowEl) tooltipEl.appendChild(arrowEl);
       }
     }
   }
@@ -21676,33 +22216,107 @@ var __async = (__this, __arguments, generator) => {
       var _a, _b;
       const ttCtx = this.ttCtx;
       const w = this.w;
-      if (e.target.classList.contains(`apexcharts-${type}-rect`)) {
-        const i = this.getAttr(e, "i");
-        const j = this.getAttr(e, "j");
-        const cx = this.getAttr(e, "cx");
-        const cy = this.getAttr(e, "cy");
-        const width = this.getAttr(e, "width");
-        const height = this.getAttr(e, "height");
-        ttCtx.tooltipLabels.drawSeriesTexts({
-          ttItems: opt.ttItems,
-          i,
-          j,
-          shared: false,
-          e
-        });
-        w.interact.capturedSeriesIndex = i;
-        w.interact.capturedDataPointIndex = j;
-        x = cx + ttCtx.tooltipRect.ttWidth / 2 + width;
-        y = cy + ttCtx.tooltipRect.ttHeight / 2 - height / 2;
-        ttCtx.tooltipPosition.moveXCrosshairs(cx + width / 2);
-        if (x > w.layout.gridWidth / 2) {
-          x = cx - ttCtx.tooltipRect.ttWidth / 2 + width;
-        }
-        if (ttCtx.w.config.tooltip.followCursor) {
-          const seriesBound = w.dom.elWrap.getBoundingClientRect();
-          x = ((_a = w.interact.clientX) != null ? _a : 0) - seriesBound.left - (x > w.layout.gridWidth / 2 ? ttCtx.tooltipRect.ttWidth : 0);
-          y = ((_b = w.interact.clientY) != null ? _b : 0) - seriesBound.top - (y > w.layout.gridHeight / 2 ? ttCtx.tooltipRect.ttHeight : 0);
+      const renderer = w.globals.activeRenderer;
+      const canvasCells = type === "heatmap" && renderer && renderer.kind === "canvas" && typeof renderer.hitTest === "function";
+      let i, j, cx, cy, width, height;
+      if (canvasCells) {
+        const seriesBound = opt.elGrid.getBoundingClientRect();
+        const clientX = e.type === "touchmove" ? e.touches[0].clientX : e.clientX;
+        const clientY = e.type === "touchmove" ? e.touches[0].clientY : e.clientY;
+        const hit = renderer.hitTest(
+          clientX - seriesBound.left,
+          clientY - seriesBound.top
+        );
+        if (!hit) {
+          return { x, y, noHit: true };
+        }
+        i = hit.seriesIndex;
+        j = hit.dataPointIndex;
+        cx = hit.x;
+        cy = hit.y;
+        width = hit.width;
+        height = hit.height;
+      } else if (e.target.classList.contains(`apexcharts-${type}-rect`)) {
+        i = this.getAttr(e, "i");
+        j = this.getAttr(e, "j");
+        cx = this.getAttr(e, "cx");
+        cy = this.getAttr(e, "cy");
+        width = this.getAttr(e, "width");
+        height = this.getAttr(e, "height");
+      } else {
+        return { x, y };
+      }
+      ttCtx.tooltipLabels.drawSeriesTexts({
+        ttItems: opt.ttItems,
+        i,
+        j,
+        shared: false,
+        e
+      });
+      w.interact.capturedSeriesIndex = i;
+      w.interact.capturedDataPointIndex = j;
+      ttCtx.tooltipPosition.moveXCrosshairs(cx + width / 2);
+      const tooltipEl = ttCtx.getElTooltip();
+      if (type === "heatmap" && w.config.tooltip.arrow && !w.config.tooltip.followCursor && tooltipEl) {
+        const elGridRect = opt.elGrid.getBoundingClientRect();
+        const elWrapRect = w.dom.elWrap.getBoundingClientRect();
+        const gridOffsetXInElWrap = elGridRect.left - elWrapRect.left;
+        let clLeft, clTop, clRight, clBottom;
+        if (canvasCells) {
+          clLeft = cx;
+          clTop = cy;
+          clRight = cx + width;
+          clBottom = cy + height;
+        } else {
+          const r = e.target.getBoundingClientRect();
+          clLeft = r.left - elGridRect.left;
+          clTop = r.top - elGridRect.top;
+          clRight = r.right - elGridRect.left;
+          clBottom = r.bottom - elGridRect.top;
+        }
+        const ttW = ttCtx.tooltipRect.ttWidth || 0;
+        const ttH = ttCtx.tooltipRect.ttHeight || 0;
+        const ARROW_TIP_OVERHANG = 7;
+        const cellCenterXInElWrap = (clLeft + clRight) / 2 + gridOffsetXInElWrap;
+        const cellTopInElWrap = clTop + w.layout.translateY;
+        const cellBottomInElWrap = clBottom + w.layout.translateY;
+        const gridTop = w.layout.translateY;
+        const gridBottom = w.layout.translateY + w.layout.gridHeight;
+        const gridLeft = gridOffsetXInElWrap;
+        const gridRight = gridOffsetXInElWrap + w.layout.gridWidth;
+        let placement = "top";
+        let finalY = cellTopInElWrap - ttH - ARROW_TIP_OVERHANG;
+        if (finalY < gridTop) {
+          const belowTop = cellBottomInElWrap + ARROW_TIP_OVERHANG;
+          if (belowTop + ttH <= gridBottom) {
+            placement = "bottom";
+            finalY = belowTop;
+          } else {
+            finalY = gridTop;
+          }
         }
+        let finalX = cellCenterXInElWrap - ttW / 2;
+        if (finalX < gridLeft) finalX = gridLeft;
+        if (finalX + ttW > gridRight) finalX = gridRight - ttW;
+        const arrowX = Math.max(10, Math.min(ttW - 10, cellCenterXInElWrap - finalX));
+        ttCtx.tooltipPosition.applyTooltipPosition(tooltipEl, {
+          x: finalX,
+          y: finalY,
+          placement,
+          arrowY: null,
+          arrowX
+        });
+        return { x: finalX, y: finalY, positioned: true };
+      }
+      x = cx + ttCtx.tooltipRect.ttWidth / 2 + width;
+      y = cy + ttCtx.tooltipRect.ttHeight / 2 - height / 2;
+      if (x > w.layout.gridWidth / 2) {
+        x = cx - ttCtx.tooltipRect.ttWidth / 2 + width;
+      }
+      if (ttCtx.w.config.tooltip.followCursor) {
+        const seriesBound = w.dom.elWrap.getBoundingClientRect();
+        x = ((_a = w.interact.clientX) != null ? _a : 0) - seriesBound.left - (x > w.layout.gridWidth / 2 ? ttCtx.tooltipRect.ttWidth : 0);
+        y = ((_b = w.interact.clientY) != null ? _b : 0) - seriesBound.top - (y > w.layout.gridHeight / 2 ? ttCtx.tooltipRect.ttHeight : 0);
       }
       return {
         x,
@@ -22076,7 +22690,7 @@ var __async = (__this, __arguments, generator) => {
         const tooltipCssClass = isRight ? `apexcharts-yaxistooltip apexcharts-yaxistooltip-${i} apexcharts-yaxistooltip-right` : `apexcharts-yaxistooltip apexcharts-yaxistooltip-${i} apexcharts-yaxistooltip-left`;
         const renderTo = w.dom.elWrap;
         const yaxisTooltip = w.dom.baseEl.querySelector(
-          `.apexcharts-yaxistooltip apexcharts-yaxistooltip-${i}`
+          `.apexcharts-yaxistooltip.apexcharts-yaxistooltip-${i}`
         );
         if (yaxisTooltip === null) {
           ttCtx.yaxisTooltip = BrowserAPIs.createElementNS(
@@ -22341,7 +22955,7 @@ var __async = (__this, __arguments, generator) => {
           this.tConfig.style.background
         );
       }
-      const isSharedMulti = this.tConfig.shared && w.config.series.length > 1 && !w.globals.isBarHorizontal;
+      const isSharedMulti = this.tConfig.shared && w.config.series.length > 1 && !w.globals.isBarHorizontal && w.config.chart.type !== "heatmap";
       const shouldDrawArrow = this.tConfig.arrow && !this.tConfig.followCursor && !this.tConfig.fixed.enabled && !isSharedMulti && !this.tConfig.fillSeriesColor && w.globals.axisCharts;
       if (shouldDrawArrow) {
         const arrowEl = BrowserAPIs.createElementNS(
@@ -22518,6 +23132,8 @@ var __async = (__this, __arguments, generator) => {
         this.addPathsEventListeners([hoverArea], seriesHoverParams);
       } else if (commonBar && !w.globals.comboCharts || chartWithmarkers && this.showOnIntersect) {
         this.addDatapointEventsListeners(seriesHoverParams);
+      } else if (type === "heatmap" && w.globals.activeRenderer && w.globals.activeRenderer.kind === "canvas") {
+        this.addPathsEventListeners([hoverArea], seriesHoverParams);
       } else if (!w.globals.axisCharts || type === "heatmap" || type === "treemap") {
         const seriesAll = w.dom.baseEl.querySelectorAll(".apexcharts-series");
         this.addPathsEventListeners(seriesAll, seriesHoverParams);
@@ -22767,10 +23383,16 @@ var __async = (__this, __arguments, generator) => {
               y,
               type: w.config.chart.type
             });
+            if (markerXY.noHit) {
+              this.handleMouseOut(opt);
+              return;
+            }
             x = markerXY.x;
             y = markerXY.y;
-            tooltipEl.style.left = x + "px";
-            tooltipEl.style.top = y + "px";
+            if (!markerXY.positioned) {
+              tooltipEl.style.left = x + "px";
+              tooltipEl.style.top = y + "px";
+            }
           } else {
             if (this.tooltipUtil.hasBars()) {
               this.intersect.handleBarTooltip({
@@ -24786,6 +25408,8 @@ var __async = (__this, __arguments, generator) => {
       /** @type {any} */
       __publicField(this, "_keyboardNavigation");
       /** @type {any} */
+      __publicField(this, "_zoomPanSelection");
+      /** @type {any} */
       __publicField(this, "windowResizeHandler");
       /** @type {any} */
       __publicField(this, "parentResizeHandler");
@@ -24827,6 +25451,7 @@ var __async = (__this, __arguments, generator) => {
       const initCtx = new InitCtxVariables(this);
       initCtx.initModules();
       this.lastUpdateOptions = null;
+      this._updateStats = { fast: 0, fastWithAxes: 0, full: 0 };
       this.create = this.create.bind(this);
       if (Environment.isBrowser()) {
         this.windowResizeHandler = this._windowResizeHandler.bind(this);
@@ -25207,7 +25832,7 @@ var __async = (__this, __arguments, generator) => {
         if (Utils$1.shallowEqual(this.lastUpdateOptions, options2)) {
           return Promise.resolve(this);
         }
-        if (options2.series && this.lastUpdateOptions.series) {
+        if (options2.series && this.lastUpdateOptions.series && !_ApexCharts._optionsTooBigToCompare(options2)) {
           if (JSON.stringify(this.lastUpdateOptions.series) === JSON.stringify(options2.series)) {
             const optionsWithoutSeries = __spreadValues({}, options2);
             const lastWithoutSeries = __spreadValues({}, this.lastUpdateOptions);
@@ -25261,7 +25886,7 @@ var __async = (__this, __arguments, generator) => {
      */
     updateSeries(newSeries = [], animate = true, overwriteInitialSeries = true) {
       this.data.resetParsingFlags();
-      this.series.resetSeries(false);
+      this.series.prepareDataUpdate();
       this.updateHelpers.revertDefaultAxisMinMax();
       return this.updateHelpers._updateSeries(
         newSeries,
@@ -25284,7 +25909,7 @@ var __async = (__this, __arguments, generator) => {
         /** @type {any} */
         newSerie
       );
-      this.series.resetSeries(false);
+      this.series.prepareDataUpdate();
       this.updateHelpers.revertDefaultAxisMinMax();
       return this.updateHelpers._updateSeries(
         newSeries,
@@ -25304,7 +25929,9 @@ var __async = (__this, __arguments, generator) => {
       const me = this;
       me.data.resetParsingFlags();
       me.w.globals.dataChanged = true;
-      me.series.getPreviousPaths();
+      if (me.w.config.chart.animations.enabled) {
+        me.series.getPreviousPaths();
+      }
       const newSeries = me.w.config.series.slice();
       for (let i = 0; i < newSeries.length; i++) {
         if (newData[i] !== null && typeof newData[i] !== "undefined") {
@@ -25324,19 +25951,37 @@ var __async = (__this, __arguments, generator) => {
       trimStreamingSeries(newSeries, me.w);
       me.w.config.series = newSeries;
       if (overwriteInitialSeries) {
-        me.w.globals.initialSeries = Utils$1.clone(me.w.config.series);
+        me.w.globals.initialSeries = me.w.config.series;
       }
       return this.update();
     }
+    /**
+     * True when an options object carries enough series data that a
+     * JSON.stringify equality check (and the Utils.clone needed to store it for
+     * later comparison) would cost more than the re-render it tries to avoid.
+     * @param {any} options
+     * @returns {boolean}
+     */
+    static _optionsTooBigToCompare(options2) {
+      const series = options2 && options2.series;
+      if (!Array.isArray(series)) return false;
+      let points = 0;
+      for (let i = 0; i < series.length; i++) {
+        const d = series[i] && series[i].data;
+        points += Array.isArray(d) ? d.length : 1;
+        if (points > 1e3) return true;
+      }
+      return false;
+    }
     /**
      * @param {object} [options]
      */
     update(options2) {
       return new Promise((resolve, reject) => {
-        if (this.lastUpdateOptions && JSON.stringify(this.lastUpdateOptions) === JSON.stringify(options2)) {
+        if (options2 && this.lastUpdateOptions && !_ApexCharts._optionsTooBigToCompare(options2) && JSON.stringify(this.lastUpdateOptions) === JSON.stringify(options2)) {
           return resolve(this);
         }
-        this.lastUpdateOptions = Utils$1.clone(options2);
+        this.lastUpdateOptions = options2 && !_ApexCharts._optionsTooBigToCompare(options2) ? Utils$1.clone(options2) : null;
         new Destroy(this.ctx).clear({ isUpdating: true });
         const graphData = this.create(this.w.config.series, options2 != null ? options2 : {});
         if (!graphData) return resolve(this);
@@ -25344,6 +25989,7 @@ var __async = (__this, __arguments, generator) => {
           var _a;
           (_a = this.morphTypeChange) == null ? void 0 : _a.applyChromeFade();
           applyAxisTransition(this.w);
+          applyDataLabelTransition(this.w);
           if (typeof this.w.config.chart.events.updated === "function") {
             this.w.config.chart.events.updated(this, this.w);
           }
@@ -25355,6 +26001,140 @@ var __async = (__this, __arguments, generator) => {
         });
       });
     }
+    /**
+     * Redraws the scale-dependent chrome (grid lines, x-axis, y-axes) IN PLACE
+     * within the frozen layout after a data-only update changed the axis
+     * domain. The rebuilt groups replace the old nodes positionally, so z-order
+     * (grid back/front) is preserved without re-running mount. Legend,
+     * annotations containers, toolbar, defs/masks, and the plot geometry are
+     * untouched.
+     *
+     * Returns false when the refresh cannot faithfully reproduce the chart and
+     * the caller must fall back to a full render:
+     * - horizontal bar charts (inversed axes draw through a different path)
+     * - charts with annotations or ink notes (their positions are scale-bound
+     *   and are laid out by the full render)
+     * - the new y labels no longer fit the width reserved at layout time
+     *
+     * @param {any} _xyRatios
+     * @returns {boolean} true when the chrome was refreshed in place
+     */
+    _fastAxisChromeRefresh(_xyRatios) {
+      const w = this.w;
+      const gl = w.globals;
+      this._fastAxisBailReason = "";
+      try {
+        if (gl.isBarHorizontal) {
+          this._fastAxisBailReason = "barHorizontal";
+          return false;
+        }
+        if (w.config.chart.sparkline.enabled) return true;
+        const a = w.config.annotations;
+        if (a && (a.yaxis && a.yaxis.length || a.xaxis && a.xaxis.length || a.points && a.points.length || a.texts && a.texts.length || a.images && a.images.length)) {
+          this._fastAxisBailReason = "annotations";
+          return false;
+        }
+        if (w.config.chart.ink && w.config.chart.ink.enabled) {
+          this._fastAxisBailReason = "ink";
+          return false;
+        }
+        const dim = this.dimensions;
+        if (!dim || !dim.dimYAxis) {
+          this._fastAxisBailReason = "noDimensions";
+          return false;
+        }
+        const prevYLabelsCoords = w.layout.yLabelsCoords;
+        const prevYTitleCoords = w.layout.yTitleCoords;
+        const yaxisLabelCoords = dim.dimYAxis.getyAxisLabelsCoords();
+        const yTitleCoords = dim.dimYAxis.getyAxisTitleCoords();
+        w.layout.yLabelsCoords = [];
+        w.layout.yTitleCoords = [];
+        w.config.yaxis.map((_yaxe, index) => {
+          w.layout.yLabelsCoords.push({
+            width: yaxisLabelCoords[index].width,
+            index
+          });
+          w.layout.yTitleCoords.push(
+            /** @type {any} */
+            { width: yTitleCoords[index].width, index }
+          );
+        });
+        const newYAxisWidth = dim.dimYAxis.getTotalYAxisWidth();
+        if (newYAxisWidth > dim.yAxisWidth + 2) {
+          w.layout.yLabelsCoords = prevYLabelsCoords;
+          w.layout.yTitleCoords = prevYTitleCoords;
+          this._fastAxisBailReason = `labelWidth ${newYAxisWidth} > ${dim.yAxisWidth}`;
+          return false;
+        }
+        const innerEl = w.dom.elGraphical.node;
+        const oldGrid = innerEl.querySelector(".apexcharts-grid");
+        const oldGridBorders = innerEl.querySelector(".apexcharts-grid-borders");
+        if (!oldGrid) {
+          this._fastAxisBailReason = "missingGridNode";
+          return false;
+        }
+        const gridParent = oldGrid.parentNode;
+        const gridNext = oldGridBorders ? oldGridBorders.nextSibling : oldGrid.nextSibling;
+        oldGrid.remove();
+        if (oldGridBorders) oldGridBorders.remove();
+        innerEl.querySelectorAll(".apexcharts-xaxis-tick").forEach((t) => t.remove());
+        this.grid = new Grid(w, this);
+        const elgrid = this.grid.drawGrid();
+        if (elgrid && elgrid.el) {
+          gridParent.insertBefore(elgrid.el.node, gridNext);
+          if (elgrid.elGridBorders && elgrid.elGridBorders.node) {
+            gridParent.insertBefore(elgrid.elGridBorders.node, gridNext);
+          }
+        }
+        const xAxis = new XAxis(this.w, this.ctx, elgrid);
+        const oldXaxis = innerEl.querySelector(".apexcharts-xaxis");
+        if (oldXaxis) {
+          const xParent = oldXaxis.parentNode;
+          const xNext = oldXaxis.nextSibling;
+          oldXaxis.remove();
+          const elXaxis = xAxis.drawXaxis();
+          xParent.insertBefore(elXaxis.node, xNext);
+        }
+        const yAxis = new YAxis(
+          this.w,
+          { theme: this.theme, timeScale: this.timeScale },
+          elgrid
+        );
+        for (let index = 0; index < w.config.yaxis.length; index++) {
+          if (gl.ignoreYAxisIndexes.indexOf(index) !== -1) continue;
+          const oldY = w.dom.baseEl.querySelector(
+            `.apexcharts-yaxis[rel='${index}']`
+          );
+          if (!oldY) {
+            this._fastAxisBailReason = "missingYAxisNode";
+            return false;
+          }
+          const yParent = oldY.parentNode;
+          if (!yParent) {
+            this._fastAxisBailReason = "missingYAxisParent";
+            return false;
+          }
+          const yNext = oldY.nextSibling;
+          oldY.remove();
+          const elYaxis = yAxis.drawYaxis(index);
+          yParent.insertBefore(elYaxis.node, yNext);
+        }
+        if (elgrid !== null) {
+          xAxis.xAxisLabelCorrections();
+          yAxis.setYAxisTextAlignments();
+          w.config.yaxis.map((yaxe, index) => {
+            if (gl.ignoreYAxisIndexes.indexOf(index) === -1) {
+              yAxis.yAxisTitleRotate(index, yaxe.opposite);
+            }
+          });
+        }
+        return true;
+      } catch (e) {
+        this._fastAxisBailReason = "error: " + (e && /** @type {any} */
+        e.message);
+        return false;
+      }
+    }
     /**
      * Fast update path for data-only series changes.
      *
@@ -25412,18 +26192,32 @@ var __async = (__this, __arguments, generator) => {
             }
           }
           const xyRatios = this.core.xySettings();
+          if (this._zoomPanSelection) this._zoomPanSelection.xyRatios = xyRatios;
           const newAxisScaleSig = JSON.stringify({
             y: (gl.yAxisScale || []).map((s) => s ? s.result : null),
             xMin: gl.minX,
             xMax: gl.maxX
           });
-          if (gl.axisCharts && prevAxisScaleSig != null && newAxisScaleSig !== prevAxisScaleSig) {
+          const scaleChanged = gl.axisCharts && prevAxisScaleSig != null && newAxisScaleSig !== prevAxisScaleSig;
+          if (scaleChanged && !this._fastAxisChromeRefresh(xyRatios)) {
+            this._updateStats.full++;
             return this.update().then(() => resolve(this)).catch(reject);
           }
+          if (scaleChanged) {
+            this._updateStats.fastWithAxes++;
+          } else {
+            this._updateStats.fast++;
+          }
           (_a = this.weave) == null ? void 0 : _a.dispatch("afterScales", { pass: "fast", xyRatios });
+          const rr = (
+            /** @type {any} */
+            this.ctx.renderer
+          );
+          const reuseCanvasHost = !!(rr && rr.kind === "canvas" && rr.canRepaintInPlace && rr.canRepaintInPlace());
+          if (reuseCanvasHost) rr._repaintHostInPlace = true;
           const innerEl = w.dom.elGraphical.node;
           const toRemove = innerEl.querySelectorAll(
-            ".apexcharts-canvas-series-wrap, .apexcharts-series, .apexcharts-datalabels, .apexcharts-datalabels-background"
+            (reuseCanvasHost ? "" : ".apexcharts-canvas-series-wrap, ") + ".apexcharts-plot-series, .apexcharts-series, .apexcharts-datalabels, .apexcharts-datalabels-background"
           );
           toRemove.forEach(
             (el) => {
@@ -25433,11 +26227,13 @@ var __async = (__this, __arguments, generator) => {
           );
           const elGraph = this.core.plotChartType(w.config.series, xyRatios);
           const gridEl = innerEl.querySelector(".apexcharts-grid");
+          const xaxisEl = innerEl.querySelector(".apexcharts-xaxis");
           const graphs = Array.isArray(elGraph) ? elGraph : [elGraph];
-          if (gridEl && w.config.grid.position === "front") {
+          const anchor = gridEl && w.config.grid.position === "front" ? gridEl : xaxisEl;
+          if (anchor) {
             graphs.forEach((g) => {
               const node = g && g.node ? g.node : g;
-              if (node) innerEl.insertBefore(node, gridEl);
+              if (node) innerEl.insertBefore(node, anchor);
             });
           } else {
             graphs.forEach((g) => {
@@ -26197,41 +26993,57 @@ var __async = (__this, __arguments, generator) => {
       return this.ctx.drilldown.drillToRoot();
     }
     // ─── Slice write-back stubs ─────────────────────────────────────────────────
+    /**
+     * Copy own DATA properties of a parse-state slice onto a live w.* slice.
+     * Never Object.assign here: several w.* fields (and, historically, snapshot
+     * fields) are lazy accessors, and [[Get]]-ing an accessor while copying
+     * forces its deferred computation (a deep initialSeries clone plus O(n)
+     * stacked-totals passes on every render/update) and can replace the live
+     * accessor with a materialized value for the life of the instance.
+     * @param {any} target
+     * @param {any} slice
+     */
+    static _writeDataProps(target, slice) {
+      for (const key of Object.keys(slice)) {
+        const d = Object.getOwnPropertyDescriptor(slice, key);
+        if (d && "value" in d) target[key] = d.value;
+      }
+    }
     /**
      * @param {Partial<import('./types/internal').SeriesData>} slice
      */
     _writeParsedSeriesData(slice) {
-      Object.assign(this.w.seriesData, slice);
+      _ApexCharts._writeDataProps(this.w.seriesData, slice);
     }
     /**
      * @param {Partial<import('./types/internal').RangeData>} slice
      */
     _writeParsedRangeData(slice) {
-      Object.assign(this.w.rangeData, slice);
+      _ApexCharts._writeDataProps(this.w.rangeData, slice);
     }
     /**
      * @param {Partial<import('./types/internal').CandleData>} slice
      */
     _writeParsedCandleData(slice) {
-      Object.assign(this.w.candleData, slice);
+      _ApexCharts._writeDataProps(this.w.candleData, slice);
     }
     /**
      * @param {Partial<import('./types/internal').LabelData>} slice
      */
     _writeParsedLabelData(slice) {
-      Object.assign(this.w.labelData, slice);
+      _ApexCharts._writeDataProps(this.w.labelData, slice);
     }
     /**
      * @param {Partial<import('./types/internal').AxisFlags>} slice
      */
     _writeParsedAxisFlags(slice) {
-      Object.assign(this.w.axisFlags, slice);
+      _ApexCharts._writeDataProps(this.w.axisFlags, slice);
     }
     /**
      * @param {Partial<import('./types/internal').LayoutCoords>} slice
      */
     _writeLayoutCoords(slice) {
-      Object.assign(this.w.layout, slice);
+      _ApexCharts._writeDataProps(this.w.layout, slice);
     }
     _parentResizeCallback() {
       if (this.w.globals.animationEnded && this.w.config.chart.redrawOnParentResize) {
@@ -28769,7 +29581,6 @@ var __async = (__this, __arguments, generator) => {
       this.xyRatios = xyRatios;
       this.zoomRect = this.graphics.drawRect(0, 0, 0, 0);
       this.selectionRect = this.graphics.drawRect(0, 0, 0, 0);
-      this.gridRect = w.dom.baseEl.querySelector(".apexcharts-grid");
       this.constraints = new Box(0, 0, w.layout.gridWidth, w.layout.gridHeight);
       this.zoomRect.node.classList.add("apexcharts-zoom-rect");
       this.selectionRect.node.classList.add("apexcharts-selection-rect");
@@ -28833,14 +29644,12 @@ var __async = (__this, __arguments, generator) => {
       }
       this.selectionRect = null;
       this.zoomRect = null;
-      this.gridRect = null;
     }
     /**
      * @param {import('../types/internal').XYRatios} xyRatios
      * @param {any} e
      */
     svgMouseEvents(xyRatios, e) {
-      var _a;
       const w = this.w;
       const toolbar = this.ctx.toolbar;
       if (w.interact.momentum && w.interact.momentum.busy) return;
@@ -28871,7 +29680,7 @@ var __async = (__this, __arguments, generator) => {
       this.clientX = e.type === "touchmove" || e.type === "touchstart" ? e.touches[0].clientX : e.type === "touchend" ? e.changedTouches[0].clientX : e.clientX;
       this.clientY = e.type === "touchmove" || e.type === "touchstart" ? e.touches[0].clientY : e.type === "touchend" ? e.changedTouches[0].clientY : e.clientY;
       if (e.type === "mousedown" && e.which === 1 || e.type === "touchstart") {
-        const gridRectDim = (_a = this.gridRect) == null ? void 0 : _a.getBoundingClientRect();
+        const gridRectDim = this._gridRect();
         if (!gridRectDim) return;
         this.startX = this.clientX - gridRectDim.left - w.globals.barPadForNumericAxis;
         this.startY = this.clientY - gridRectDim.top;
@@ -28886,7 +29695,7 @@ var __async = (__this, __arguments, generator) => {
             this.panDragging({
               context: this,
               zoomtype,
-              xyRatios
+              xyRatios: this.xyRatios
             });
           }
         } else {
@@ -28905,9 +29714,8 @@ var __async = (__this, __arguments, generator) => {
     }
     /** @param {{ zoomtype?: any, isResized?: any }} opts */
     handleMouseUp({ zoomtype, isResized }) {
-      var _a;
       const w = this.w;
-      const gridRectDim = (_a = this.gridRect) == null ? void 0 : _a.getBoundingClientRect();
+      const gridRectDim = this._gridRect();
       if (gridRectDim && (this.w.interact.mousedown || isResized)) {
         this.endX = this.clientX - gridRectDim.left - w.globals.barPadForNumericAxis;
         this.endY = this.clientY - gridRectDim.top;
@@ -28949,11 +29757,11 @@ var __async = (__this, __arguments, generator) => {
      * @param {any} e
      */
     executeMouseWheelZoom(e) {
-      var _a, _b, _c;
+      var _a, _b;
       const w = this.w;
       this.minX = w.axisFlags.isRangeBar ? w.globals.minY : w.globals.minX;
       this.maxX = w.axisFlags.isRangeBar ? w.globals.maxY : w.globals.maxX;
-      const gridRectDim = (_a = this.gridRect) == null ? void 0 : _a.getBoundingClientRect();
+      const gridRectDim = this._gridRect();
       if (!gridRectDim) return;
       const mouseX = (e.clientX - gridRectDim.left) / gridRectDim.width;
       const currentMinX = this.minX;
@@ -28974,8 +29782,8 @@ var __async = (__this, __arguments, generator) => {
         newMaxX = currentMaxX + zoomRange / 2;
       }
       if (!w.axisFlags.isRangeBar) {
-        const clampMin = (_b = w.globals.dataReducerRawMinX) != null ? _b : w.globals.initialMinX;
-        const clampMax = (_c = w.globals.dataReducerRawMaxX) != null ? _c : w.globals.initialMaxX;
+        const clampMin = (_a = w.globals.dataReducerRawMinX) != null ? _a : w.globals.initialMinX;
+        const clampMax = (_b = w.globals.dataReducerRawMaxX) != null ? _b : w.globals.initialMaxX;
         newMinX = Math.max(newMinX, clampMin);
         newMaxX = Math.min(newMaxX, clampMax);
         const minXDiff = w.globals.minXDiff > 0 && isFinite(w.globals.minXDiff) ? w.globals.minXDiff : 0;
@@ -29112,10 +29920,9 @@ var __async = (__this, __arguments, generator) => {
       }
     }
     selectionDrawing({ context, zoomtype }) {
-      var _a;
       const w = this.w;
       const me = context;
-      const gridRectDim = (_a = this.gridRect) == null ? void 0 : _a.getBoundingClientRect();
+      const gridRectDim = this._gridRect();
       if (!gridRectDim) return;
       const startX = me.startX - 1;
       const startY = me.startY;
@@ -29221,8 +30028,8 @@ var __async = (__this, __arguments, generator) => {
       if ((typeof w.config.chart.events.selection === "function" || linkActive) && w.interact.selectionEnabled) {
         clearTimeout((_a = this.w.globals.selectionResizeTimer) != null ? _a : void 0);
         this.w.globals.selectionResizeTimer = window.setTimeout(() => {
-          var _a2, _b;
-          const gridRectDim = (_a2 = this.gridRect) == null ? void 0 : _a2.getBoundingClientRect();
+          var _a2;
+          const gridRectDim = this._gridRect();
           if (!gridRectDim) return;
           const selectionRect = selRect.node.getBoundingClientRect();
           let minX, maxX, minY, maxY;
@@ -29256,7 +30063,7 @@ var __async = (__this, __arguments, generator) => {
           if (w.config.chart.brush.enabled && w.config.chart.events.brushScrolled !== void 0) {
             w.config.chart.events.brushScrolled(this.ctx, xyAxis);
           }
-          (_b = this.ctx.linkedViews) == null ? void 0 : _b.onSourceSelection(xyAxis.xaxis);
+          (_a2 = this.ctx.linkedViews) == null ? void 0 : _a2.onSourceSelection(xyAxis.xaxis);
         }, timerInterval);
       }
     }
@@ -29268,7 +30075,8 @@ var __async = (__this, __arguments, generator) => {
       const xyRatios = this.xyRatios;
       const toolbar = this.ctx.toolbar;
       const selRect = w.interact.zoomEnabled ? me.zoomRect.node.getBoundingClientRect() : me.selectionRect.node.getBoundingClientRect();
-      const gridRectDim = me.gridRect.getBoundingClientRect();
+      const gridRectDim = me._gridRect();
+      if (!gridRectDim) return;
       const localStartX = selRect.left - gridRectDim.left - w.globals.barPadForNumericAxis;
       const localEndX = selRect.right - gridRectDim.left - w.globals.barPadForNumericAxis;
       const localStartY = selRect.top - gridRectDim.top;
@@ -29526,8 +30334,11 @@ var __async = (__this, __arguments, generator) => {
       const w = this.w;
       return w.axisFlags.isRangeBar ? { min: w.globals.minY, max: w.globals.maxY } : { min: w.globals.minX, max: w.globals.maxX };
     }
-    /** Live grid rect from the current DOM (this.gridRect goes stale/null after
-     * the re-render a gesture frame triggers). */
+    /** Live grid rect from the current DOM. Never cache the grid node on the
+     * instance: a full render replaces this whole instance, but the fast update
+     * path (fastUpdate/_fastAxisChromeRefresh) keeps the instance while swapping
+     * the grid node, and a cached node would go stale (detached nodes report an
+     * all-zero bounding rect, silently corrupting selection geometry). */
     _gridRect() {
       const baseEl = this.w.dom.baseEl;
       const grid = baseEl && baseEl.querySelector(".apexcharts-grid");
@@ -34433,6 +35244,30 @@ var __async = (__this, __arguments, generator) => {
       return NOOP_RUNNER;
     }
   }
+  const SHARED_RECT_REF = {
+    __isCanvasMark: true,
+    node: SHARED_MARKER_NODE,
+    /** @returns {any} */
+    attr() {
+      return SHARED_RECT_REF;
+    },
+    add() {
+      return SHARED_RECT_REF;
+    },
+    addTo() {
+      return SHARED_RECT_REF;
+    },
+    remove() {
+      return SHARED_RECT_REF;
+    },
+    /** @returns {any} */
+    css() {
+      return SHARED_RECT_REF;
+    },
+    animate() {
+      return NOOP_RUNNER;
+    }
+  };
   class CanvasMark {
     /** @param {any} cmd */
     constructor(cmd) {
@@ -34560,6 +35395,16 @@ var __async = (__this, __arguments, generator) => {
       this._msi = new Int32Array(16);
       this._mn = 0;
       this._mcap = 16;
+      this._crx = new Float64Array(16);
+      this._cry = new Float64Array(16);
+      this._crw = new Float64Array(16);
+      this._crh = new Float64Array(16);
+      this._crstyle = new Int32Array(16);
+      this._crsi = new Int32Array(16);
+      this._crdi = new Int32Array(16);
+      this._crn = 0;
+      this._crcap = 16;
+      this._cellRadius = 0;
       this._styles = [];
       this._styleMap = /* @__PURE__ */ new Map();
       this._lf = NEVER;
@@ -34572,6 +35417,12 @@ var __async = (__this, __arguments, generator) => {
       this._lofFill = NEVER;
       this._lofBase = -1;
       this._lofId = -1;
+      this._rlf = NEVER;
+      this._rls = NEVER;
+      this._rlsw = NEVER;
+      this._rlfo = NEVER;
+      this._rlso = NEVER;
+      this._rlid = -1;
     }
     _resetStyleCache() {
       this._lf = NEVER;
@@ -34584,6 +35435,12 @@ var __async = (__this, __arguments, generator) => {
       this._lofFill = NEVER;
       this._lofBase = -1;
       this._lofId = -1;
+      this._rlf = NEVER;
+      this._rls = NEVER;
+      this._rlsw = NEVER;
+      this._rlfo = NEVER;
+      this._rlso = NEVER;
+      this._rlid = -1;
     }
     /** Start a fresh scene (columnar marker store + object-command list). */
     reset() {
@@ -34600,6 +35457,46 @@ var __async = (__this, __arguments, generator) => {
       }
       cap = Math.ceil(cap * 1.15) + 16;
       if (cap > this._mcap) this._allocMarkers(cap);
+      this._crn = 0;
+      this._cellRadius = 0;
+      if (cap > this._crcap) this._allocRects(cap);
+    }
+    /** @param {number} cap */
+    _allocRects(cap) {
+      this._crcap = cap;
+      this._crx = new Float64Array(cap);
+      this._cry = new Float64Array(cap);
+      this._crw = new Float64Array(cap);
+      this._crh = new Float64Array(cap);
+      this._crstyle = new Int32Array(cap);
+      this._crsi = new Int32Array(cap);
+      this._crdi = new Int32Array(cap);
+    }
+    /** Grow the rect columns (rare: capacity estimate was low). */
+    _growRects() {
+      const cap = this._crcap * 2;
+      const nx = new Float64Array(cap);
+      nx.set(this._crx);
+      this._crx = nx;
+      const ny = new Float64Array(cap);
+      ny.set(this._cry);
+      this._cry = ny;
+      const nw = new Float64Array(cap);
+      nw.set(this._crw);
+      this._crw = nw;
+      const nh = new Float64Array(cap);
+      nh.set(this._crh);
+      this._crh = nh;
+      const nst = new Int32Array(cap);
+      nst.set(this._crstyle);
+      this._crstyle = nst;
+      const nsi = new Int32Array(cap);
+      nsi.set(this._crsi);
+      this._crsi = nsi;
+      const ndi = new Int32Array(cap);
+      ndi.set(this._crdi);
+      this._crdi = ndi;
+      this._crcap = cap;
     }
     /** @param {number} cap */
     _allocMarkers(cap) {
@@ -34709,6 +35606,65 @@ var __async = (__this, __arguments, generator) => {
     shapeName(id) {
       return SHAPE_NAME[id] || "circle";
     }
+    // ── columnar rect cell (heatmap): parallel unboxed arrays, no per-cell object ──
+    /**
+     * Record a heatmap-style cell (a filled, optionally stroked rect). Geometry
+     * and style are captured up front into the columns; the returned handle is a
+     * shared no-op (the emit site sets nothing back on it in canvas mode).
+     * @param {number} x @param {number} y @param {number} w @param {number} h
+     * @param {any} opts {fill, fillOpacity, stroke, strokeWidth, radius, seriesIndex, dataPointIndex}
+     * @returns {any}
+     */
+    drawRectCell(x, y, w, h, opts = {}) {
+      const styleId = this._rectStyleId(opts);
+      if (this._crn >= this._crcap) this._growRects();
+      const i = this._crn++;
+      this._crx[i] = x || 0;
+      this._cry[i] = y || 0;
+      this._crw[i] = w > 0 ? w : 0;
+      this._crh[i] = h > 0 ? h : 0;
+      this._crstyle[i] = styleId;
+      this._crsi[i] = opts.seriesIndex == null ? -1 : opts.seriesIndex;
+      this._crdi[i] = opts.dataPointIndex == null ? -1 : opts.dataPointIndex;
+      if (opts.radius) this._cellRadius = opts.radius;
+      return SHARED_RECT_REF;
+    }
+    /**
+     * Resolve (and dedupe) a rect-cell style → shared-palette id. A last-style
+     * cache keeps the Map/string work off the path for runs of same-style cells.
+     * @param {any} opts
+     * @returns {number}
+     */
+    _rectStyleId(opts) {
+      const fill = opts.fill;
+      const stroke = opts.stroke;
+      const sw = opts.strokeWidth;
+      const fo = opts.fillOpacity;
+      const so = opts.strokeOpacity;
+      if (fill === this._rlf && stroke === this._rls && sw === this._rlsw && fo === this._rlfo && so === this._rlso) {
+        return this._rlid;
+      }
+      const id = this._internStyle(fill, stroke, sw, 0, fo, so);
+      this._rlf = fill;
+      this._rls = stroke;
+      this._rlsw = sw;
+      this._rlfo = fo;
+      this._rlso = so;
+      this._rlid = id;
+      return id;
+    }
+    /** @returns {number} number of recorded rect cells */
+    rectCount() {
+      return this._crn;
+    }
+    /** @param {number} i @returns {any} the style object for a rect cell */
+    rectStyle(i) {
+      return this._styles[this._crstyle[i]];
+    }
+    /** @param {number} i @returns {number} series (realIndex) of a cell, -1 if none */
+    rectSeries(i) {
+      return this._crsi[i];
+    }
     /**
      * @param {string} tag
      * @param {number} z
@@ -35024,9 +35980,97 @@ var __async = (__this, __arguments, generator) => {
           this._paintOne(ctx, c);
         }
       }
+      this._paintRects(ctx, shim2);
       this._paintMarkers(ctx, shim2);
       this._alpha = 1;
     }
+    /**
+     * Paint the columnar rect cells (heatmap) as STYLE BATCHES: one fill/stroke
+     * state application per run of consecutive same-style cells, then a fast
+     * fillRect (or a roundRect path when the shared corner radius is non-zero)
+     * per cell. Clipped to the plot rect so cells never bleed into the canvas
+     * margin (mirrors the SVG gridRectMask). Per-cell globalAlpha carries the
+     * hover/legend dim multiplier when a dim spec is active.
+     * @param {any} ctx
+     * @param {any} shim
+     */
+    _paintRects(ctx, shim2) {
+      const n = shim2.rectCount ? shim2.rectCount() : 0;
+      if (!n) return;
+      const rx = shim2._crx;
+      const ry = shim2._cry;
+      const rw = shim2._crw;
+      const rh = shim2._crh;
+      const rstyle = shim2._crstyle;
+      const radius = shim2._cellRadius || 0;
+      const cx = (
+        /** @type {any} */
+        ctx
+      );
+      const useRound = radius > 0 && typeof cx.roundRect === "function";
+      const dimming = !!this._dim;
+      const gw = Math.max(0, this.w.layout.gridWidth || 0);
+      const gh = Math.max(0, this.w.layout.gridHeight || 0);
+      ctx.save();
+      ctx.beginPath();
+      ctx.rect(0, 0, gw, gh);
+      ctx.clip();
+      let i = 0;
+      while (i < n) {
+        const styleId = rstyle[i];
+        const style = shim2.rectStyle(i);
+        if (!style) {
+          i++;
+          continue;
+        }
+        const fill = style.fill;
+        const doFill = fill && fill !== "none" && !(typeof fill === "string" && fill.indexOf("url(") === 0);
+        const stroke = style.stroke;
+        const sw = style.strokeWidth == null ? 0 : Number(style.strokeWidth);
+        const doStroke = stroke && stroke !== "none" && sw > 0 && !(typeof stroke === "string" && stroke.indexOf("url(") === 0);
+        if (doFill) ctx.fillStyle = fill;
+        if (doStroke) {
+          ctx.strokeStyle = stroke;
+          ctx.lineWidth = sw;
+          ctx.setLineDash([]);
+        }
+        const baseFillA = style.fillOpacity == null ? 1 : Number(style.fillOpacity);
+        const baseStrokeA = style.strokeOpacity == null ? 1 : Number(style.strokeOpacity);
+        let j = i;
+        while (j < n && rstyle[j] === styleId) {
+          const w = rw[j];
+          const h = rh[j];
+          if (w > 0 && h > 0) {
+            const f = dimming ? this._seriesAlpha(shim2.rectSeries(j)) : 1;
+            if (useRound) {
+              ctx.beginPath();
+              cx.roundRect(rx[j], ry[j], w, h, radius);
+              if (doFill) {
+                ctx.globalAlpha = baseFillA * f;
+                ctx.fill();
+              }
+              if (doStroke) {
+                ctx.globalAlpha = baseStrokeA * f;
+                ctx.stroke();
+              }
+            } else {
+              if (doFill) {
+                ctx.globalAlpha = baseFillA * f;
+                ctx.fillRect(rx[j], ry[j], w, h);
+              }
+              if (doStroke) {
+                ctx.globalAlpha = baseStrokeA * f;
+                ctx.strokeRect(rx[j], ry[j], w, h);
+              }
+            }
+          }
+          j++;
+        }
+        i = j;
+      }
+      ctx.globalAlpha = 1;
+      ctx.restore();
+    }
     /**
      * Reusable unit Path2D for a (shape, size): the shape's geometry built at the
      * origin once, then translated per marker via setTransform. Returns null when
@@ -35340,6 +36384,20 @@ var __async = (__this, __arguments, generator) => {
     clear() {
       this._compositor.clear();
     }
+    /**
+     * Whether the existing <canvas> host can be repainted in place (it exists
+     * and is still mounted). Used by the data-only fast update path to skip
+     * recreating the foreignObject + backing store on every tick.
+     * @returns {boolean}
+     */
+    canRepaintInPlace() {
+      const host = this._compositor.getHost();
+      return !!(host && host.node && host.node.isConnected);
+    }
+    /** Repaint the freshly recorded display list into the EXISTING canvas. */
+    repaintInPlace() {
+      this._compositor.paint(this._g.displayList(), this._g);
+    }
     // ── emit primitives (delegate to the display-list shim) ──
     /** @param {any} attrs */
     group(attrs) {
@@ -35363,6 +36421,16 @@ var __async = (__this, __arguments, generator) => {
         this._g.drawRect(...args)
       );
     }
+    /**
+     * Columnar heatmap-cell rect (dense same-shape rects): recorded into typed
+     * arrays, painted as style batches. Distinct from drawRect (object command)
+     * so 100k cells don't allocate 100k retained commands.
+     * @param {number} x @param {number} y @param {number} w @param {number} h
+     * @param {any} opts
+     */
+    drawRectCell(x, y, w, h, opts) {
+      return this._g.drawRectCell(x, y, w, h, opts);
+    }
     /**
      * @param {number} r
      * @param {any} attrs
@@ -35392,14 +36460,44 @@ var __async = (__this, __arguments, generator) => {
       return feature === "solidFill" || feature === "dashArray";
     }
     // ── interaction ──
-    // Shared tooltip/zoom/click resolve via coordinate lookup (pointsArray), so
-    // there is no per-mark hit surface to query; hitTest stays a no-op unless a
-    // future per-point feature needs it.
-    /**
-     * @param {number} _px
-     * @param {number} _py
-     */
-    hitTest(_px, _py) {
+    // Line/area/bar/scatter tooltips resolve via coordinate lookup (pointsArray),
+    // so those need no per-mark query. Heatmap cells, however, are hovered by
+    // point (the SVG path hit-tests the <rect> under the cursor); with cells on
+    // canvas there is no node, so hitTest resolves the columnar rect store.
+    /**
+     * Find the cell under a plot-local point (0,0 = plot origin, the same space
+     * as the recorded cell geometry). Reverse scan so a later-painted cell wins
+     * when cells overlap (continuous-x edges). A linear scan stays well under a
+     * frame even at 100k cells (~100k integer compares). Returns the cell's
+     * series/dataPoint index plus its geometry for tooltip positioning, or null
+     * when the point is off every cell.
+     * @param {number} px
+     * @param {number} py
+     * @returns {({seriesIndex:number,dataPointIndex:number,x:number,y:number,width:number,height:number})|null}
+     */
+    hitTest(px, py) {
+      const g = this._g;
+      const n = g.rectCount ? g.rectCount() : 0;
+      if (!n) return null;
+      const rx = g._crx;
+      const ry = g._cry;
+      const rw = g._crw;
+      const rh = g._crh;
+      for (let k = n - 1; k >= 0; k--) {
+        const w = rw[k];
+        const h = rh[k];
+        if (w <= 0 || h <= 0) continue;
+        if (px >= rx[k] && px < rx[k] + w && py >= ry[k] && py < ry[k] + h) {
+          return {
+            seriesIndex: g._crsi[k],
+            dataPointIndex: g._crdi[k],
+            x: rx[k],
+            y: ry[k],
+            width: w,
+            height: h
+          };
+        }
+      }
       return null;
     }
     /**
@@ -39260,6 +40358,7 @@ var __async = (__this, __arguments, generator) => {
       barWidth,
       dataLabelsConfig
     }) {
+      var _a, _b;
       const w = this.w;
       let rotate = "rotate(0)";
       if (w.config.plotOptions.bar.dataLabels.orientation === "vertical")
@@ -39274,6 +40373,17 @@ var __async = (__this, __arguments, generator) => {
           class: "apexcharts-data-labels",
           transform: rotate
         });
+        const dlCfg = w.config.dataLabels;
+        if (((_a = dlCfg.animate) == null ? void 0 : _a.enabled) || ((_b = dlCfg.countUp) == null ? void 0 : _b.enabled)) {
+          elDataLabelsWrap.node.setAttribute(
+            "data:dlKey",
+            `${i}::${datumKey(w, i, j)}`
+          );
+          elDataLabelsWrap.node.setAttribute("data:dlJ", String(j));
+          if (typeof val === "number" && isFinite(val)) {
+            elDataLabelsWrap.node.setAttribute("data:dlVal", String(val));
+          }
+        }
         let text = "";
         if (typeof val !== "undefined") {
           text = formatter(val, __spreadProps(__spreadValues({}, w), {
@@ -40231,6 +41341,7 @@ var __async = (__this, __arguments, generator) => {
       this.pathArr = [];
       this._prevKeyed = null;
       this._ltCache = null;
+      this._layoutShiftCache = null;
       this.series = [];
       this.elSeries = null;
       this.visibleI = 0;
@@ -40259,7 +41370,7 @@ var __async = (__this, __arguments, generator) => {
      * @return {Element} element which is supplied to parent chart draw method for appending
      **/
     draw(series, seriesIndex) {
-      var _a, _b;
+      var _a, _b, _c;
       const w = this.w;
       const graphics = new Graphics(this.w);
       const coreUtils = new CoreUtils(this.w);
@@ -40333,8 +41444,10 @@ var __async = (__this, __arguments, generator) => {
           el: elDataLabelsWrap.node,
           // On a layout-changing update the labels must stay hidden through the
           // reflow morph (the updateOptions flow otherwise reveals them at
-          // frame 0, where they float over sliding bars).
-          holdUntilComplete: this.isLengthTransition(realIndex)
+          // frame 0, where they float over sliding bars). When dataLabels.animate
+          // is on the labels instead RIDE the morph (see DataLabelTransition), so
+          // keep them visible: holding would hide the very motion we want to show.
+          holdUntilComplete: !((_a = w.config.dataLabels.animate) == null ? void 0 : _a.enabled) && this.isLengthTransition(realIndex)
         });
         elDataLabelsWrap.node.classList.add("apexcharts-element-hidden");
         const elGoalsMarkers = graphics.group({
@@ -40387,9 +41500,9 @@ var __async = (__this, __arguments, generator) => {
             j,
             realIndex
           );
-          if (this.isFunnel && !this.isPyramid && this.barOptions.isFunnel3d && ((_a = w.config.plotOptions.funnel) == null ? void 0 : _a.shape) !== "trapezoid" && this.pathArr.length && j > 0) {
+          if (this.isFunnel && !this.isPyramid && this.barOptions.isFunnel3d && ((_b = w.config.plotOptions.funnel) == null ? void 0 : _b.shape) !== "trapezoid" && this.pathArr.length && j > 0) {
             const barShadow = this.barHelpers.drawBarShadow({
-              color: typeof pathFill.color === "string" && ((_b = pathFill.color) == null ? void 0 : _b.indexOf("url")) === -1 ? pathFill.color : Utils$1.hexToRgba(w.globals.colors[i]),
+              color: typeof pathFill.color === "string" && ((_c = pathFill.color) == null ? void 0 : _c.indexOf("url")) === -1 ? pathFill.color : Utils$1.hexToRgba(w.globals.colors[i]),
               prevPaths: this.pathArr[this.pathArr.length - 1],
               currPaths: paths,
               realIndex,
@@ -40561,7 +41674,7 @@ var __async = (__this, __arguments, generator) => {
       }
       const animCfg = w.config.chart.animations;
       const gradCfg = animCfg.animateGradually;
-      const staggerEnabled = gradCfg && gradCfg.enabled !== false && !(w.globals.dataChanged && this.isLengthTransition(realIndex));
+      const staggerEnabled = gradCfg && gradCfg.enabled !== false && !(w.globals.dataChanged && this.isLayoutShift(realIndex));
       let delay = 0;
       if (staggerEnabled) {
         const totalBars = w.globals.dataPoints || 1;
@@ -40975,6 +42088,26 @@ var __async = (__this, __arguments, generator) => {
       this._ltCache[realIndex] = result;
       return result;
     }
+    /**
+     * Whether this update moves survivors to new slots: a length change
+     * (enter/exit, via isLengthTransition) OR a pure reorder (a "bar chart race"
+     * swap, same datum set in a new order). Used to drop the per-bar stagger so
+     * all bars slide on one shared clock, staying locked to the axis/data labels.
+     * Broader than isLengthTransition, which is deliberately enter/exit-only
+     * (exit ghosts / baseline enters must not fire on a plain reorder).
+     * @param {number} realIndex
+     */
+    isLayoutShift(realIndex) {
+      if (this.isLengthTransition(realIndex)) return true;
+      if (!this._layoutShiftCache) this._layoutShiftCache = {};
+      if (this._layoutShiftCache[realIndex] !== void 0) {
+        return this._layoutShiftCache[realIndex];
+      }
+      const sj = seriesJoin(this.w, realIndex, true, true);
+      const result = !!(sj && sj.join.changed);
+      this._layoutShiftCache[realIndex] = result;
+      return result;
+    }
     /**
      * Resolve `pathFrom` for a bar on data update, joining old and new datums
      * by KEY (category label / x value) so survivors keep their identity across
@@ -42836,14 +43969,24 @@ var __async = (__this, __arguments, generator) => {
      * @param {any[]} series
      */
     draw(series) {
+      var _a, _b;
       const w = this.w;
       const graphics = new Graphics(this.w, this.ctx);
+      const emit = seriesEmitter(this.ctx, graphics);
+      const useCanvas = emit !== graphics && typeof emit.drawRectCell === "function";
       const ret = graphics.group({
         class: "apexcharts-heatmap"
       });
       ret.attr("clip-path", `url(#gridRectMask${w.globals.cuid})`);
       const xDivision = w.layout.gridWidth / w.globals.dataPoints;
       const yDivision = w.layout.gridHeight / w.seriesData.series.length;
+      const isContinuousX = (w.config.xaxis.type === "numeric" || w.config.xaxis.type === "datetime") && w.axisFlags.isXNumeric && this.xRatio > 0;
+      let binPx = xDivision;
+      if (isContinuousX) {
+        const diff = w.globals.minXDiff;
+        binPx = Number.isFinite(diff) && diff > 0 ? diff / this.xRatio : xDivision;
+      }
+      const cellFillOpacity = Array.isArray(w.config.fill.opacity) ? (_a = w.config.fill.opacity[0]) != null ? _a : 1 : (_b = w.config.fill.opacity) != null ? _b : 1;
       let y1 = 0;
       let rev = false;
       this.negRange = this.helpers.checkColorRange();
@@ -42860,7 +44003,9 @@ var __async = (__this, __arguments, generator) => {
           "data:realIndex": i
         });
         Series.addCollapsedClassToSeries(this.w, elSeries, i);
-        graphics.setupEventDelegation(elSeries, ".apexcharts-heatmap-rect");
+        if (!useCanvas) {
+          graphics.setupEventDelegation(elSeries, ".apexcharts-heatmap-rect");
+        }
         if (w.config.chart.dropShadow.enabled) {
           const shadow = w.config.chart.dropShadow;
           const filters = new Filters(this.w);
@@ -42870,13 +44015,22 @@ var __async = (__this, __arguments, generator) => {
         const shadeIntensity = w.config.plotOptions.heatmap.shadeIntensity;
         let j = 0;
         for (let dIndex = 0; dIndex < w.globals.dataPoints; dIndex++) {
-          if (w.seriesData.seriesX.length && !w.globals.allSeriesHasEqualX) {
+          if (!isContinuousX && w.seriesData.seriesX.length && !w.globals.allSeriesHasEqualX) {
             if (w.globals.minX + w.globals.minXDiff * dIndex < w.seriesData.seriesX[i][j]) {
               x1 = x1 + xDivision;
               continue;
             }
           }
           if (j >= heatSeries[i].length) break;
+          const cellW = isContinuousX ? binPx : xDivision;
+          if (isContinuousX) {
+            const xVal = w.seriesData.seriesX[i] ? w.seriesData.seriesX[i][j] : null;
+            if (xVal == null || xVal !== xVal) {
+              j++;
+              continue;
+            }
+            x1 = (xVal - w.globals.minX) / this.xRatio - binPx / 2;
+          }
           const heatColor = this.helpers.getShadeColor(
             w.config.chart.type,
             i,
@@ -42895,47 +44049,60 @@ var __async = (__this, __arguments, generator) => {
                 w.globals.hasNegs ? heatColorProps.percent < 0 ? 1 - (1 + heatColorProps.percent / 100) : shadeIntensity + heatColorProps.percent / 100 : heatColorProps.percent / 100
               ),
               patternID: Utils$1.randomId(),
-              width: w.config.fill.image.width ? w.config.fill.image.width : xDivision,
+              width: w.config.fill.image.width ? w.config.fill.image.width : cellW,
               height: w.config.fill.image.height ? w.config.fill.image.height : yDivision
             });
           }
           const radius = this.rectRadius;
-          const rect = graphics.drawRect(x1, y1, xDivision, yDivision, radius);
-          rect.attr({
-            cx: x1,
-            cy: y1
-          });
-          rect.node.classList.add("apexcharts-heatmap-rect");
-          elSeries.add(rect);
-          rect.attr({
-            fill: color,
-            i,
-            index: i,
-            j,
-            val: series[i][j],
-            "stroke-width": this.strokeWidth,
-            stroke: w.config.plotOptions.heatmap.useFillColorAsStroke ? color : w.globals.stroke.colors[0],
-            color
-          });
-          if (w.config.chart.animations.enabled && !w.globals.dataChanged) {
-            let speed = 1;
-            if (!w.globals.resized) {
-              speed = w.config.chart.animations.speed;
-            }
-            this.animateHeatMap(rect, x1, y1, xDivision, yDivision, speed, i, j);
-          }
-          if (w.globals.dataChanged) {
-            let speed = 1;
-            if (this.dynamicAnim.enabled && w.globals.shouldAnimate) {
-              speed = this.dynamicAnim.speed;
-              let colorFrom = w.globals.previousPaths[i] && w.globals.previousPaths[i][j] && w.globals.previousPaths[i][j].color;
-              if (!colorFrom) colorFrom = "rgba(255, 255, 255, 0)";
-              this.animateHeatColor(
-                rect,
-                Utils$1.isColorHex(colorFrom) ? colorFrom : Utils$1.rgb2hex(colorFrom),
-                Utils$1.isColorHex(color) ? color : Utils$1.rgb2hex(color),
-                speed
-              );
+          const stroke = w.config.plotOptions.heatmap.useFillColorAsStroke ? color : w.globals.stroke.colors[0];
+          if (useCanvas) {
+            emit.drawRectCell(x1, y1, cellW, yDivision, {
+              fill: color,
+              fillOpacity: cellFillOpacity,
+              stroke,
+              strokeWidth: this.strokeWidth,
+              radius,
+              seriesIndex: i,
+              dataPointIndex: j
+            });
+          } else {
+            const rect = graphics.drawRect(x1, y1, cellW, yDivision, radius);
+            rect.attr({
+              cx: x1,
+              cy: y1
+            });
+            rect.node.classList.add("apexcharts-heatmap-rect");
+            elSeries.add(rect);
+            rect.attr({
+              fill: color,
+              i,
+              index: i,
+              j,
+              val: series[i][j],
+              "stroke-width": this.strokeWidth,
+              stroke,
+              color
+            });
+            if (w.config.chart.animations.enabled && !w.globals.dataChanged) {
+              let speed = 1;
+              if (!w.globals.resized) {
+                speed = w.config.chart.animations.speed;
+              }
+              this.animateHeatMap(rect, x1, y1, cellW, yDivision, speed, i, j);
+            }
+            if (w.globals.dataChanged) {
+              let speed = 1;
+              if (this.dynamicAnim.enabled && w.globals.shouldAnimate) {
+                speed = this.dynamicAnim.speed;
+                let colorFrom = w.globals.previousPaths[i] && w.globals.previousPaths[i][j] && w.globals.previousPaths[i][j].color;
+                if (!colorFrom) colorFrom = "rgba(255, 255, 255, 0)";
+                this.animateHeatColor(
+                  rect,
+                  Utils$1.isColorHex(colorFrom) ? colorFrom : Utils$1.rgb2hex(colorFrom),
+                  Utils$1.isColorHex(color) ? color : Utils$1.rgb2hex(color),
+                  speed
+                );
+              }
             }
           }
           const formatter = w.config.dataLabels.formatter;
@@ -42947,7 +44114,7 @@ var __async = (__this, __arguments, generator) => {
           });
           const dataLabels = this.helpers.calculateDataLabels({
             text: formattedText,
-            x: x1 + xDivision / 2,
+            x: x1 + cellW / 2,
             y: y1 + yDivision / 2,
             i,
             j,
@@ -42957,7 +44124,7 @@ var __async = (__this, __arguments, generator) => {
           if (dataLabels !== null) {
             elSeries.add(dataLabels);
           }
-          x1 = x1 + xDivision;
+          if (!isContinuousX) x1 = x1 + xDivision;
           j++;
         }
         y1 = y1 + yDivision;
@@ -43953,7 +45120,7 @@ var __async = (__this, __arguments, generator) => {
       let { pathFromLine, pathFromArea } = pathsFrom;
       const r = this.ctx && this.ctx.renderer;
       const canvasMode = !!(r && r.kind && r.kind !== "svg");
-      const buildStrings = !canvasMode || w.globals.dataChanged;
+      const buildStrings = !canvasMode || w.globals.dataChanged && !!w.globals.prevStreamFrame;
       const nxs = canvasMode ? new Float64Array(n) : null;
       const nys = canvasMode ? new Float64Array(n) : null;
       if (nxs && nys) {