highcharts 11.3.0 → 11.4.0

package/es-modules/Accessibility/Options/A11yDefaults.js

@@ -472,12 +472,22 @@ const Options = {
         /**
          * Theme to apply to the chart when Windows High Contrast Mode is
          * detected. By default, a high contrast theme matching the high
-         * contrast system system colors is used.
+         * contrast system colors is used.
          *
          * @type      {*}
          * @since     7.1.3
          * @apioption accessibility.highContrastTheme
          */
+        /**
+         * Controls how [highContrastTheme](#accessibility.highContrastTheme)
+         * is applied.
+         *
+         * The default option is `auto`, which applies the high contrast theme
+         * the user's system has a high contrast theme active.
+         *
+         * @since 11.4.0
+         */
+        highContrastMode: 'auto',
         /**
          * A text description of the chart.
          *

package/es-modules/Accessibility/ProxyElement.js

@@ -150,7 +150,7 @@ class ProxyElement {
                     fireEventOnWrappedOrUnwrappedElement(target, clonedEvent);
                 }
                 e.stopPropagation();
-                // #9682, #15318: Touch scrolling didnt work when touching
+                // #9682, #15318: Touch scrolling didn't work when touching
                 // proxy
                 if (!isTouchEvent) {
                     e.preventDefault();
@@ -188,9 +188,9 @@ class ProxyElement {
             clickTarget.element :
             clickTarget;
         const posElement = this.target.visual || clickTargetElement;
-        const chartDiv = this.chart.renderTo;
-        if (chartDiv && posElement && posElement.getBoundingClientRect) {
-            const rectEl = posElement.getBoundingClientRect(), chartPos = this.chart.pointer.getChartPosition();
+        const chartDiv = this.chart.renderTo, pointer = this.chart.pointer;
+        if (chartDiv && posElement?.getBoundingClientRect && pointer) {
+            const rectEl = posElement.getBoundingClientRect(), chartPos = pointer.getChartPosition();
             return {
                 x: (rectEl.left - chartPos.left) / chartPos.scaleX,
                 y: (rectEl.top - chartPos.top) / chartPos.scaleY,

package/es-modules/Accessibility/ProxyProvider.js

@@ -22,7 +22,7 @@ import CU from './Utils/ChartUtilities.js';
 const { unhideChartElementFromAT } = CU;
 import DOMElementProvider from './Utils/DOMElementProvider.js';
 import HU from './Utils/HTMLUtilities.js';
-const { removeElement, removeChildNodes } = HU;
+const { removeChildNodes } = HU;
 import ProxyElement from './ProxyElement.js';
 /* *
  *
@@ -181,7 +181,13 @@ class ProxyProvider {
     removeGroup(groupKey) {
         const group = this.groups[groupKey];
         if (group) {
-            removeElement(group.groupElement);
+            // Remove detached HTML elements to prevent memory leak (#20329).
+            this.domElementProvider.removeElement(group.groupElement);
+            // Sometimes groupElement is a wrapper around the proxyContainer, so
+            // the real one proxyContainer needs to be removed also.
+            if (group.groupElement !== group.proxyContainerElement) {
+                this.domElementProvider.removeElement(group.proxyContainerElement);
+            }
             delete this.groups[groupKey];
         }
     }

package/es-modules/Accessibility/Utils/DOMElementProvider.js

@@ -42,6 +42,14 @@ class DOMElementProvider {
         this.elements.push(el);
         return el;
     }
+    /**
+     * Destroy created element, removing it from the DOM.
+     * @private
+     */
+    removeElement(element) {
+        removeElement(element);
+        this.elements.splice(this.elements.indexOf(element), 1);
+    }
     /**
      * Destroy all created elements, removing them from the DOM.
      * @private

package/es-modules/Accessibility/Utils/EventProvider.js

@@ -40,6 +40,15 @@ class EventProvider {
         this.eventRemovers.push(remover);
         return remover;
     }
+    /**
+     * Remove added event.
+     * @private
+     */
+    removeEvent(event) {
+        const pos = this.eventRemovers.indexOf(event);
+        this.eventRemovers[pos]();
+        this.eventRemovers.splice(pos, 1);
+    }
     /**
      * Remove all added events.
      * @private

package/es-modules/Core/Animation/Fx.js

@@ -288,7 +288,7 @@ class Fx {
          * Copy and append last point until the length matches the end length.
          * @private
          */
-        function append(arr, other) {
+        function append(arr) {
             while (arr.length < fullLength) {
                 // Pull out the slice that is going to be appended or inserted.
                 // In a line graph, the positionFactor is 1, and the last point
@@ -344,11 +344,11 @@ class Fx {
             fullLength = end.length + shift * positionFactor;
             if (!reverse) {
                 prepend(end, start);
-                append(start, end);
+                append(start);
             }
             else {
                 prepend(start, end);
-                append(end, start);
+                append(end);
             }
         }
         return [start, end];

package/es-modules/Core/Axis/Axis.js

@@ -23,7 +23,7 @@ import Tick from './Tick.js';
 import U from '../Utilities.js';
 const { arrayMax, arrayMin, clamp, correctFloat, defined, destroyObjectProperties, erase, error, extend, fireEvent, getClosestDistance, insertItem, isArray, isNumber, isString, merge, normalizeTickInterval, objectEach, pick, relativeLength, removeEvent, splat, syncTimeout } = U;
 const getNormalizedTickInterval = (axis, tickInterval) => normalizeTickInterval(tickInterval, void 0, void 0, pick(axis.options.allowDecimals, 
-// If the tick interval is greather than 0.5, avoid decimals, as
+// If the tick interval is greater than 0.5, avoid decimals, as
 // linear axes are often used to render discrete values (#3363). If
 // a tick amount is set, allow decimals by default, as it increases
 // the chances for a good fit.
@@ -35,7 +35,7 @@ extend(defaultOptions, { xAxis, yAxis: merge(xAxis, yAxis) });
  *
  * */
 /**
- * Create a new axis object. Called internally when instanciating a new chart or
+ * Create a new axis object. Called internally when instantiating a new chart or
  * adding axes by {@link Highcharts.Chart#addAxis}.
  *
  * A chart can have from 0 axes (pie chart) to multiples. In a normal, single
@@ -199,7 +199,7 @@ class Axis {
         // Flag, if axis is linked to another axis
         axis.isLinked = defined(options.linkedTo);
         /**
-         * List of major ticks mapped by postition on axis.
+         * List of major ticks mapped by position on axis.
          *
          * @see {@link Highcharts.Tick}
          *
@@ -221,7 +221,12 @@ class Axis {
         axis.plotLinesAndBands = [];
         // Alternate bands
         axis.alternateBands = {};
-        // Axis metrics
+        /**
+         * The length of the axis in terms of pixels.
+         *
+         * @name Highcharts.Axis#len
+         * @type {number}
+         */
         axis.len = 0;
         axis.minRange = axis.userMinRange = options.minRange || options.maxZoom;
         axis.range = options.range;
@@ -331,7 +336,7 @@ class Axis {
      * @return {string}
      * The formatted label content.
      */
-    defaultLabelFormatter(ctx) {
+    defaultLabelFormatter() {
         const axis = this.axis, chart = this.chart, { numberFormatter } = chart, value = isNumber(this.value) ? this.value : NaN, time = axis.chart.time, categories = axis.categories, dateTimeLabelFormat = this.dateTimeLabelFormat, lang = defaultOptions.lang, numericSymbols = lang.numericSymbols, numSymMagnitude = lang.numericSymbolMagnitude || 1000, 
         // Make sure the same symbol is added for all labels on a linear
         // axis
@@ -615,12 +620,12 @@ class Axis {
             }
             else if (axis.horiz) {
                 y1 = axisTop;
-                y2 = cHeight - axis.bottom;
+                y2 = cHeight - axis.bottom + (chart.scrollablePixelsY || 0);
                 x1 = x2 = between(x1, axisLeft, axisLeft + axis.width);
             }
             else {
                 x1 = axisLeft;
-                x2 = cWidth - axis.right;
+                x2 = cWidth - axis.right + (chart.scrollablePixelsX || 0);
                 y1 = y2 = between(y1, axisTop, axisTop + axis.height);
             }
             e.path = skip && !force ?
@@ -804,7 +809,7 @@ class Axis {
                 min + minRange,
                 pick(options.max, min + minRange)
             ];
-            // If space is availabe, stay within the data range
+            // If space is available, stay within the data range
             if (spaceAvailable) {
                 maxArgs[2] = logarithmic ?
                     logarithmic.log2lin(axis.dataMax) :
@@ -885,7 +890,7 @@ class Axis {
                     pick(names.keys[point.name], -1)) :
                 point.series.autoIncrement();
         }
-        if (nameX === -1) { // Not found in currenct categories
+        if (nameX === -1) { // Not found in current categories
             if (!explicitCategories && names) {
                 x = names.length;
             }
@@ -1202,7 +1207,7 @@ class Axis {
             axis.tickInterval = pick(tickIntervalOption, this.tickAmount ?
                 range / Math.max(this.tickAmount - 1, 1) :
                 void 0, 
-            // For categoried axis, 1 is default, for linear axis use
+            // For categorized axis, 1 is default, for linear axis use
             // tickPix
             categories ?
                 1 :
@@ -1266,7 +1271,7 @@ class Axis {
      * @emits Highcharts.Axis#event:afterSetTickPositions
      */
     setTickPositions() {
-        const axis = this, options = this.options, tickPositionsOption = options.tickPositions, tickPositioner = options.tickPositioner, minorTickIntervalOption = this.getMinorTickInterval(), hasVerticalPanning = this.hasVerticalPanning(), isColorAxis = this.coll === 'colorAxis', startOnTick = ((isColorAxis || !hasVerticalPanning) && options.startOnTick), endOnTick = ((isColorAxis || !hasVerticalPanning) && options.endOnTick);
+        const axis = this, options = this.options, tickPositionsOption = options.tickPositions, tickPositioner = options.tickPositioner, minorTickIntervalOption = this.getMinorTickInterval(), allowEndOnTick = !this.isPanning, startOnTick = allowEndOnTick && options.startOnTick, endOnTick = allowEndOnTick && options.endOnTick;
         let tickPositions = [], tickPositionerResult;
         // Set the tickmarkOffset
         this.tickmarkOffset = (this.categories &&
@@ -1439,7 +1444,7 @@ class Axis {
      * True if there are other axes.
      */
     alignToOthers() {
-        const axis = this, alignedAxes = [this], options = axis.options, chartOptions = this.chart.options.chart, alignThresholds = (this.coll === 'yAxis' &&
+        const axis = this, chart = axis.chart, alignedAxes = [this], options = axis.options, chartOptions = chart.options.chart, alignThresholds = (this.coll === 'yAxis' &&
             chartOptions.alignThresholds), thresholdAlignments = [];
         let hasOther;
         axis.thresholdAlignment = void 0;
@@ -1464,7 +1469,7 @@ class Axis {
                 ].join(',');
             };
             const thisKey = getKey(this);
-            this.chart[this.coll].forEach(function (otherAxis) {
+            chart[this.coll].forEach(function (otherAxis) {
                 const { series } = otherAxis;
                 if (
                 // #4442
@@ -1720,10 +1725,10 @@ class Axis {
         else if (stacking) {
             stacking.cleanStacks();
         }
-        // Recalculate panning state object, when the data
-        // has changed. It is required when vertical panning is enabled.
-        if (isDirtyData && axis.panningState) {
-            axis.panningState.isDirty = true;
+        // Recalculate all extremes object when the data has changed. It is
+        // required when vertical panning is enabled.
+        if (isDirtyData) {
+            delete axis.allExtremes;
         }
         fireEvent(this, 'afterSetScale');
     }
@@ -1764,75 +1769,22 @@ class Axis {
      *
      * @emits Highcharts.Axis#event:setExtremes
      */
-    setExtremes(newMin, newMax, redraw = true, animation, eventArguments) {
-        const axis = this, chart = axis.chart;
-        axis.series.forEach((serie) => {
+    setExtremes(min, max, redraw = true, animation, eventArguments) {
+        this.series.forEach((serie) => {
             delete serie.kdTree;
         });
         // Extend the arguments with min and max
-        eventArguments = extend(eventArguments, {
-            min: newMin,
-            max: newMax
-        });
+        eventArguments = extend(eventArguments, { min, max });
         // Fire the event
-        fireEvent(axis, 'setExtremes', eventArguments, () => {
-            axis.userMin = newMin;
-            axis.userMax = newMax;
-            axis.eventArgs = eventArguments;
+        fireEvent(this, 'setExtremes', eventArguments, (e) => {
+            this.userMin = e.min;
+            this.userMax = e.max;
+            this.eventArgs = e;
             if (redraw) {
-                chart.redraw(animation);
+                this.chart.redraw(animation);
             }
         });
     }
-    /**
-     * Overridable method for zooming chart. Pulled out in a separate method to
-     * allow overriding in stock charts.
-     *
-     * @private
-     * @function Highcharts.Axis#zoom
-     */
-    zoom(newMin, newMax) {
-        const axis = this, dataMin = this.dataMin, dataMax = this.dataMax, options = this.options, min = Math.min(dataMin, pick(options.min, dataMin)), max = Math.max(dataMax, pick(options.max, dataMax)), evt = {
-            newMin: newMin,
-            newMax: newMax
-        };
-        fireEvent(this, 'zoom', evt, function (e) {
-            // Use e.newMin and e.newMax - event handlers may have altered them
-            let newMin = e.newMin, newMax = e.newMax;
-            if (newMin !== axis.min || newMax !== axis.max) { // #5790
-                // Prevent pinch zooming out of range. Check for defined is for
-                // #1946. #1734.
-                if (!axis.allowZoomOutside) {
-                    // #6014, sometimes newMax will be smaller than min (or
-                    // newMin will be larger than max).
-                    if (defined(dataMin)) {
-                        if (newMin < min) {
-                            newMin = min;
-                        }
-                        if (newMin > max) {
-                            newMin = max;
-                        }
-                    }
-                    if (defined(dataMax)) {
-                        if (newMax < min) {
-                            newMax = min;
-                        }
-                        if (newMax > max) {
-                            newMax = max;
-                        }
-                    }
-                }
-                // In full view, displaying the reset zoom button is not
-                // required
-                axis.displayBtn = (typeof newMin !== 'undefined' ||
-                    typeof newMax !== 'undefined');
-                // Do it
-                axis.setExtremes(newMin, newMax, false, void 0, { trigger: 'zoom' });
-            }
-            e.zoomed = true;
-        });
-        return evt.zoomed;
-    }
     /**
      * Update the axis metrics.
      *
@@ -1851,6 +1803,15 @@ class Axis {
         this.right = chart.chartWidth - width - left;
         // Direction agnostic properties
         this.len = Math.max(horiz ? width : height, 0); // Math.max fixes #905
+        /**
+         * The position of the axis in terms of pixels, compared to the chart
+         * edge. In a horizontal axis it is the same as `chart.plotLeft` unless
+         * the axis is explicitly positioned, and in a default vertical axis it
+         * is the same as `chart.plotTop`.
+         *
+         * @name Highcharts.Axis#pos
+         * @type {number}
+         */
         this.pos = horiz ? left : top; // Distance from SVG origin
     }
     /**
@@ -2137,8 +2098,7 @@ class Axis {
                     if (label) {
                         // Reset ellipsis in order to get the correct
                         // bounding box (#4070)
-                        if (label.styles &&
-                            label.styles.textOverflow === 'ellipsis') {
+                        if (label.styles.textOverflow === 'ellipsis') {
                             label.css({ textOverflow: 'clip' });
                             // Set the correct width in order to read
                             // the bounding box height (#4678, #5034)
@@ -2196,10 +2156,7 @@ class Axis {
                     label.css(css);
                     // Reset previously shortened label (#8210)
                 }
-                else if (label.styles &&
-                    label.styles.width &&
-                    !css.width &&
-                    !widthOption) {
+                else if (label.styles.width && !css.width && !widthOption) {
                     label.css({ width: null });
                 }
                 delete label.specificTextOverflow;
@@ -2736,7 +2693,8 @@ class Axis {
             axis.stacking.renderStackTotals();
         }
         // End stacked totals
-        // Record old scaling for updating/animation
+        // Record old scaling for updating/animation. Pinch base must be
+        // preserved until the pinch ends.
         axis.old = {
             len: axis.len,
             max: axis.max,
@@ -2954,18 +2912,6 @@ class Axis {
         }
         fireEvent(this, 'afterHideCrosshair');
     }
-    /**
-     * Check whether the chart has vertical panning ('y' or 'xy' type).
-     *
-     * @private
-     * @function Highcharts.Axis#hasVerticalPanning
-     */
-    hasVerticalPanning() {
-        const panningOptions = this.chart.options.chart.panning;
-        return Boolean(panningOptions &&
-            panningOptions.enabled && // #14624
-            /y/.test(panningOptions.type));
-    }
     /**
      * Update an axis object with a new set of options. The options are merged
      * with the existing options, so only new or altered options need to be

package/es-modules/Core/Axis/Axis3DComposition.js

@@ -2,7 +2,7 @@
  *
  *  (c) 2010-2024 Torstein Honsi
  *
- *  Extenstion for 3d axes
+ *  Extension for 3d axes
  *
  *  License: www.highcharts.com/license
  *
@@ -14,12 +14,12 @@ import Axis3DDefaults from './Axis3DDefaults.js';
 import D from '../Defaults.js';
 const { defaultOptions } = D;
 import H from '../Globals.js';
-const { composed, deg2rad } = H;
+const { deg2rad } = H;
 import Math3D from '../Math3D.js';
 const { perspective, perspective3D, shapeArea } = Math3D;
 import Tick3D from './Tick3DComposition.js';
 import U from '../Utilities.js';
-const { addEvent, merge, pick, pushUnique, wrap } = U;
+const { addEvent, merge, pick, wrap } = U;
 /* *
  *
  *  Functions
@@ -251,7 +251,7 @@ class Axis3DAdditions {
      */
     static compose(AxisClass, TickClass) {
         Tick3D.compose(TickClass);
-        if (pushUnique(composed, this.compose)) {
+        if (!AxisClass.keepProps.includes('axis3D')) {
             merge(true, defaultOptions.xAxis, Axis3DDefaults);
             AxisClass.keepProps.push('axis3D');
             addEvent(AxisClass, 'init', onAxisInit);
@@ -396,7 +396,7 @@ class Axis3DAdditions {
             }
         }
         else if (positionMode === 'ortho') {
-            // Labels will be rotated to be ortogonal to the axis
+            // Labels will be rotated to be orthogonal to the axis
             if (!axis.horiz) { // Y Axis
                 vecX = { x: Math.cos(beta), y: 0, z: Math.sin(beta) };
             }

package/es-modules/Core/Axis/Axis3DDefaults.js

@@ -2,7 +2,7 @@
  *
  *  (c) 2010-2024 Torstein Honsi
  *
- *  Extenstion for 3d axes
+ *  Extension for 3d axes
  *
  *  License: www.highcharts.com/license
  *

package/es-modules/Core/Axis/AxisDefaults.js

@@ -1422,15 +1422,26 @@ var AxisDefaults;
          */
         /**
          * Additional range on the right side of the xAxis. Works similar to
-         * `xAxis.maxPadding`, but value is set in milliseconds. This property
-         * should be set to the same value for both the main `xAxis` and the
-         * navigator's `xAxis` to maintain consistent behavior during
-         * interactions such as dragging or resizing the navigator.
+         * `xAxis.maxPadding`, but the value is set in terms of axis values,
+         * percentage or pixels.
          *
-         * @sample {highstock} stock/xaxis/overscroll/
-         *         One minute overscroll with live data
+         * If it's a number, it is interpreted as axis values, which in a
+         * datetime axis equals milliseconds.
          *
-         * @type      {number}
+         * If it's a percentage string, is interpreted as percentages of axis
+         * length. An overscroll of 50% will make a 100px axis 50px longer.
+         *
+         * If it's a pixel string, it is interpreted as a fixed pixel value, but
+         * limited to 90% of the axis length.
+         *
+         * @sample {highstock} stock/xaxis/overscroll/ One minute overscroll
+         *         with live data
+         * @sample {highstock} stock/xaxis/overscroll-percent/ Overscroll set in
+         *         percentage
+         * @sample {highstock} stock/xaxis/overscroll-pixel/ Overscroll set in
+         *         pixels
+         *
+         * @type      {number | string}
          * @default   0
          * @since     6.0.0
          * @product   highstock

package/es-modules/Core/Axis/BrokenAxis.js

@@ -8,11 +8,9 @@
  *
  * */
 'use strict';
-import H from '../Globals.js';
-const { composed } = H;
 import StackItem from './Stacking/StackItem.js';
 import U from '../Utilities.js';
-const { addEvent, find, fireEvent, isArray, isNumber, pick, pushUnique } = U;
+const { addEvent, find, fireEvent, isArray, isNumber, pick } = U;
 /* *
  *
  *  Composition
@@ -39,7 +37,7 @@ var BrokenAxis;
      * @private
      */
     function compose(AxisClass, SeriesClass) {
-        if (pushUnique(composed, compose)) {
+        if (!AxisClass.keepProps.includes('brokenAxis')) {
             AxisClass.keepProps.push('brokenAxis');
             addEvent(AxisClass, 'init', onAxisInit);
             addEvent(AxisClass, 'afterInit', onAxisAfterInit);
@@ -440,7 +438,7 @@ var BrokenAxis;
         }
         /**
          * Dynamically set or unset breaks in an axis. This function in lighter
-         * than usin Axis.update, and it also preserves animation.
+         * than using Axis.update, and it also preserves animation.
          *
          * @private
          * @function Highcharts.Axis#setBreaks
@@ -568,7 +566,7 @@ var BrokenAxis;
                         });
                         brokenAxis.breakArray = breakArray;
                         // Used with staticScale, and below the actual axis
-                        // length, when breaks are substracted.
+                        // length, when breaks are subtracted.
                         if (isNumber(min) &&
                             isNumber(max) &&
                             isNumber(axis.min)) {

package/es-modules/Core/Axis/Color/ColorAxis.js

@@ -243,7 +243,7 @@ class ColorAxis extends Axis {
             (horiz ?
                 itemDistance :
                 pick(labelOptions.x, labelOptions.distance) +
-                    this.maxLabelLength));
+                    (this.maxLabelLength || 0)));
         legendItem.labelHeight = height + padding + (horiz ? labelPadding : 0);
     }
     /**
@@ -506,6 +506,7 @@ class ColorAxis extends Axis {
                         const affectedSeries = [];
                         for (const point of getPointsInDataClass(i)) {
                             point.setVisible(vis);
+                            point.hiddenInDataClass = !vis; // #20441
                             if (affectedSeries.indexOf(point.series) === -1) {
                                 affectedSeries.push(point.series);
                             }

package/es-modules/Core/Axis/Color/ColorAxisComposition.js

@@ -10,10 +10,8 @@
 'use strict';
 import Color from '../../Color/Color.js';
 const { parse: color } = Color;
-import H from '../../Globals.js';
-const { composed } = H;
 import U from '../../Utilities.js';
-const { addEvent, extend, merge, pick, pushUnique, splat } = U;
+const { addEvent, extend, merge, pick, splat } = U;
 /* *
  *
  *  Composition
@@ -41,9 +39,9 @@ var ColorAxisComposition;
      * @private
      */
     function compose(ColorAxisClass, ChartClass, FxClass, LegendClass, SeriesClass) {
-        if (pushUnique(composed, compose)) {
+        const chartProto = ChartClass.prototype, fxProto = FxClass.prototype, seriesProto = SeriesClass.prototype;
+        if (!chartProto.collectionsWithUpdate.includes('colorAxis')) {
             ColorAxisConstructor = ColorAxisClass;
-            const chartProto = ChartClass.prototype, fxProto = FxClass.prototype, seriesProto = SeriesClass.prototype;
             chartProto.collectionsWithUpdate.push('colorAxis');
             chartProto.collectionsWithInit.colorAxis = [
                 chartProto.addColorAxis

package/es-modules/Core/Axis/DateTimeAxis.js

@@ -8,10 +8,8 @@
  *
  * */
 'use strict';
-import H from '../Globals.js';
-const { composed } = H;
 import U from '../Utilities.js';
-const { addEvent, getMagnitude, normalizeTickInterval, pushUnique, timeUnits } = U;
+const { addEvent, getMagnitude, normalizeTickInterval, timeUnits } = U;
 /* *
  *
  *  Composition
@@ -35,7 +33,7 @@ var DateTimeAxis;
      * @private
      */
     function compose(AxisClass) {
-        if (pushUnique(composed, compose)) {
+        if (!AxisClass.keepProps.includes('dateTime')) {
             AxisClass.keepProps.push('dateTime');
             const axisProto = AxisClass.prototype;
             axisProto.getTimeTicks = getTimeTicks;
@@ -53,7 +51,7 @@ var DateTimeAxis;
      * @private
      * @function Highcharts.Axis#getTimeTicks
      * @param {Highcharts.TimeNormalizeObject} normalizedInterval
-     * The interval in axis values (ms) and thecount.
+     * The interval in axis values (ms) and the count.
      * @param {number} min
      * The minimum in axis values.
      * @param {number} max

package/es-modules/Core/Axis/GridAxis.js

@@ -11,9 +11,9 @@
 'use strict';
 import Axis from './Axis.js';
 import H from '../Globals.js';
-const { composed, dateFormats } = H;
+const { dateFormats } = H;
 import U from '../Utilities.js';
-const { addEvent, defined, erase, find, isArray, isNumber, merge, pick, pushUnique, timeUnits, wrap } = U;
+const { addEvent, defined, erase, find, isArray, isNumber, merge, pick, timeUnits, wrap } = U;
 /* *
  *
  *  Enums
@@ -81,7 +81,7 @@ function applyGridOptions(axis) {
  * @private
  */
 function compose(AxisClass, ChartClass, TickClass) {
-    if (pushUnique(composed, compose)) {
+    if (!AxisClass.keepProps.includes('grid')) {
         AxisClass.keepProps.push('grid');
         AxisClass.prototype.getMaxLabelDimensions = getMaxLabelDimensions;
         wrap(AxisClass.prototype, 'unsquish', wrapUnsquish);
@@ -285,7 +285,7 @@ function onAfterRender() {
             !axis.options.title.style.width) {
             axisTitle.css({ width: `${firstTick.slotWidth}px` });
         }
-        // @todo acutual label padding (top, bottom, left, right)
+        // @todo actual label padding (top, bottom, left, right)
         axis.maxLabelDimensions = axis.getMaxLabelDimensions(axis.ticks, axis.tickPositions);
         // Remove right wall before rendering if updating
         if (axis.rightWall) {
@@ -486,7 +486,7 @@ function onAfterSetOptions(e) {
     let gridAxisOptions;
     if (gridOptions.enabled === true) {
         // Merge the user options into default grid axis options so
-        // that when a user option is set, it takes presedence.
+        // that when a user option is set, it takes precedence.
         gridAxisOptions = merge(true, {
             className: ('highcharts-grid-axis ' + (userOptions.className || '')),
             dateTimeLabelFormats: {
@@ -522,7 +522,7 @@ function onAfterSetOptions(e) {
                 }
             },
             // In a grid axis, only allow one unit of certain types,
-            // for example we shouln't have one grid cell spanning
+            // for example we shouldn't have one grid cell spanning
             // two days.
             units: [[
                     'millisecond',
@@ -831,7 +831,7 @@ function onTickLabelFormat(ctx) {
  *       ticks and not the labels directly?
  */
 function onTrimTicks() {
-    const axis = this, chart = axis.chart, options = axis.options, gridOptions = options.grid || {}, categoryAxis = axis.categories, tickPositions = axis.tickPositions, firstPos = tickPositions[0], secondPos = tickPositions[1], lastPos = tickPositions[tickPositions.length - 1], beforeLastPos = tickPositions[tickPositions.length - 2], linkedMin = axis.linkedParent && axis.linkedParent.min, linkedMax = axis.linkedParent && axis.linkedParent.max, min = linkedMin || axis.min, max = linkedMax || axis.max, tickInterval = axis.tickInterval, startLessThanMin = ( // #19845
+    const axis = this, options = axis.options, gridOptions = options.grid || {}, categoryAxis = axis.categories, tickPositions = axis.tickPositions, firstPos = tickPositions[0], secondPos = tickPositions[1], lastPos = tickPositions[tickPositions.length - 1], beforeLastPos = tickPositions[tickPositions.length - 2], linkedMin = axis.linkedParent && axis.linkedParent.min, linkedMax = axis.linkedParent && axis.linkedParent.max, min = linkedMin || axis.min, max = linkedMax || axis.max, tickInterval = axis.tickInterval, startLessThanMin = ( // #19845
     isNumber(min) &&
         min >= firstPos + tickInterval &&
         min < secondPos), endMoreThanMin = (isNumber(min) &&