highcharts 11.3.0 → 11.4.0

package/es-modules/Extensions/ArrowSymbols.js

@@ -9,10 +9,6 @@
  *
  * */
 'use strict';
-import H from '../Core/Globals.js';
-const { composed } = H;
-import U from '../Core/Utilities.js';
-const { pushUnique } = U;
 /* *
  *
  *  Functions
@@ -91,15 +87,13 @@ function arrowHalf(x, y, w, h) {
  * @private
  */
 function compose(SVGRendererClass) {
-    if (pushUnique(composed, compose)) {
-        const symbols = SVGRendererClass.prototype.symbols;
-        symbols.arrow = arrow;
-        symbols['arrow-filled'] = triangleLeft;
-        symbols['arrow-filled-half'] = triangleLeftHalf;
-        symbols['arrow-half'] = arrowHalf;
-        symbols['triangle-left'] = triangleLeft;
-        symbols['triangle-left-half'] = triangleLeftHalf;
-    }
+    const symbols = SVGRendererClass.prototype.symbols;
+    symbols.arrow = arrow;
+    symbols['arrow-filled'] = triangleLeft;
+    symbols['arrow-filled-half'] = triangleLeftHalf;
+    symbols['arrow-half'] = arrowHalf;
+    symbols['triangle-left'] = triangleLeft;
+    symbols['triangle-left-half'] = triangleLeftHalf;
 }
 /**
  * Creates a left-oriented triangle.

package/es-modules/Extensions/Boost/Boost.js

@@ -13,10 +13,10 @@
 import BoostChart from './BoostChart.js';
 import BoostSeries from './BoostSeries.js';
 import H from '../../Core/Globals.js';
-const { composed, doc, win } = H;
+const { doc, win } = H;
 import NamedColors from './NamedColors.js';
 import U from '../../Core/Utilities.js';
-const { error, pushUnique } = U;
+const { addEvent, error } = U;
 /* *
  *
  *  Constants
@@ -36,7 +36,7 @@ const contexts = [
 /**
  * @private
  */
-function compose(ChartClass, SeriesClass, seriesTypes, ColorClass) {
+function compose(ChartClass, AxisClass, SeriesClass, seriesTypes, ColorClass) {
     const wglMode = hasWebGLSupport();
     if (!wglMode) {
         if (typeof H.initCanvasBoost !== 'undefined') {
@@ -47,7 +47,7 @@ function compose(ChartClass, SeriesClass, seriesTypes, ColorClass) {
             error(26);
         }
     }
-    if (ColorClass && pushUnique(composed, compose)) {
+    if (ColorClass && !ColorClass.names.lightgoldenrodyellow) {
         ColorClass.names = {
             ...ColorClass.names,
             ...NamedColors.defaultHTMLColorMap
@@ -56,6 +56,38 @@ function compose(ChartClass, SeriesClass, seriesTypes, ColorClass) {
     // WebGL support is alright, and we're good to go.
     BoostChart.compose(ChartClass, wglMode);
     BoostSeries.compose(SeriesClass, seriesTypes, wglMode);
+    // Handle zooming by touch/pinch or mouse wheel. Assume that boosted charts
+    // are too slow for a live preview while dragging. Instead, just scale the
+    // div while `isPanning`.
+    addEvent(AxisClass, 'setExtremes', function (e) {
+        // Render targets can be either chart-wide or series-specific
+        const renderTargets = [this.chart, ...this.series]
+            .map((item) => item.renderTarget)
+            .filter(Boolean);
+        for (const renderTarget of renderTargets) {
+            const { horiz, pos } = this, scaleKey = horiz ? 'scaleX' : 'scaleY', translateKey = horiz ? 'translateX' : 'translateY', lastScale = renderTarget?.[scaleKey] ?? 1;
+            let scale = 1, translate = 0, opacity = 1, filter = 'none';
+            if (this.isPanning) {
+                scale = (e.scale ?? 1) * lastScale;
+                translate = (renderTarget?.[translateKey] || 0) -
+                    scale * (e.move || 0) +
+                    lastScale * pos -
+                    scale * pos;
+                opacity = 0.7;
+                filter = 'blur(3px)';
+            }
+            renderTarget
+                ?.attr({
+                [scaleKey]: scale,
+                [translateKey]: translate
+            })
+                .css({
+                transition: '250ms filter, 250ms opacity',
+                filter,
+                opacity
+            });
+        }
+    });
 }
 /**
  * Returns true if the current browser supports WebGL.
@@ -187,7 +219,7 @@ export default Boost;
  * @apioption boost.debug.timeSeriesProcessing
  */
 /**
- * Time the the WebGL setup.
+ * Time the WebGL setup.
  *
  * This outputs the time spent on setting up the WebGL context,
  * creating shaders, and textures.
@@ -265,7 +297,7 @@ export default Boost;
  * Setting to e.g. 20 will cause the whole chart to enter boost mode
  * if there are 20 or more series active. When the chart is in boost mode,
  * every series in it will be rendered to a common canvas. This offers
- * a significant speed improvment in charts with a very high
+ * a significant speed improvement in charts with a very high
  * amount of series.
  *
  * @type      {number}
@@ -279,7 +311,7 @@ export default Boost;
  * This option may cause rendering issues with certain datasets.
  * Namely, if your dataset has large numbers with small increments (such as
  * timestamps), it won't work correctly. This is due to floating point
- * precission.
+ * precision.
  *
  * @type      {boolean}
  * @default   false

package/es-modules/Extensions/Boost/BoostChart.js

@@ -24,7 +24,7 @@ const { addEvent, pick, pushUnique } = U;
  * @private
  */
 function compose(ChartClass, wglMode) {
-    if (wglMode && pushUnique(composed, compose)) {
+    if (wglMode && pushUnique(composed, 'Boost.Chart')) {
         ChartClass.prototype.callbacks.push(onChartCallback);
     }
     return ChartClass;
@@ -46,7 +46,7 @@ function getBoostClipRect(chart, target) {
             chart.navigator.top + chart.navigator.height - chart.plotTop :
             chart.plotHeight
     };
-    // Clipping of individal series (#11906, #19039).
+    // Clipping of individual series (#11906, #19039).
     if (target.getClipBox) {
         const { xAxis, yAxis } = target;
         clipBox = target.getClipBox();
@@ -169,8 +169,8 @@ function onChartCallback(chart) {
         chart.boost.forceChartBoost = void 0;
         chart.boosted = false;
         // Clear the canvas
-        if (chart.boost.clear) {
-            chart.boost.clear();
+        if (!chart.axes.some((axis) => axis.isPanning)) {
+            chart.boost.clear?.();
         }
         if (chart.boost.canvas &&
             chart.boost.wgl &&

package/es-modules/Extensions/Boost/BoostSeries.js

@@ -70,7 +70,7 @@ function boostEnabled(chart) {
  * @private
  */
 function compose(SeriesClass, seriesTypes, wglMode) {
-    if (pushUnique(composed, compose)) {
+    if (pushUnique(composed, 'Boost.Series')) {
         const plotOptions = getOptions().plotOptions, seriesProto = SeriesClass.prototype;
         addEvent(SeriesClass, 'destroy', onSeriesDestroy);
         addEvent(SeriesClass, 'hide', onSeriesHide);
@@ -135,7 +135,7 @@ function compose(SeriesClass, seriesTypes, wglMode) {
             if (ScatterSeries) {
                 ScatterSeries.prototype.fill = true;
             }
-            // We need to handle heatmaps separatly, since we can't perform the
+            // We need to handle heatmaps separately, since we can't perform the
             // size/color calculations in the shader easily.
             // @todo This likely needs future optimization.
             [HeatmapSeries, TreemapSeries].forEach((SC) => {
@@ -251,8 +251,7 @@ function createAndAttachRenderer(chart, series) {
             // it will cover the most common use case of one or more
             // successive boosted or non-boosted series (#9819).
             zIndex: series.options.zIndex
-        })
-            .clip(boost.clipRect);
+        });
         if (target instanceof ChartClass) {
             target.boost.markerGroup = target.renderer
                 .g()
@@ -263,7 +262,15 @@ function createAndAttachRenderer(chart, series) {
     boost.canvas.width = width;
     boost.canvas.height = height;
     if (boost.clipRect) {
-        boost.clipRect.attr(getBoostClipRect(chart, target));
+        const box = getBoostClipRect(chart, target), 
+        // When using panes, the image itself must be clipped. When not
+        // using panes, it is better to clip the target group, because then
+        // we preserve clipping on touch- and mousewheel zoom preview.
+        clippedElement = (box.width === chart.clipBox.width &&
+            box.height === chart.clipBox.height) ? targetGroup :
+            (boost.targetFo || boost.target);
+        boost.clipRect.attr(box);
+        clippedElement?.clip(boost.clipRect);
     }
     boost.resize();
     boost.clear();
@@ -315,7 +322,9 @@ function destroyGraphics(series) {
             series[prop] = seriesProp.destroy();
         }
     });
-    series.zones.forEach(destroyObjectProperties);
+    for (const zone of series.zones) {
+        destroyObjectProperties(zone, void 0, true);
+    }
 }
 /**
  * An "async" foreach loop. Uses a setTimeout to keep the loop from blocking the
@@ -546,6 +555,7 @@ function getPoint(series, boostPoint) {
  * @private
  */
 function scatterProcessData(force) {
+    var _a, _b, _c, _d;
     const series = this, { options, xAxis, yAxis } = series;
     // Process only on changes
     if (!series.isDirty &&
@@ -557,7 +567,7 @@ function scatterProcessData(force) {
     // Required to get tick-based zoom ranges that take options into account
     // like `minPadding`, `maxPadding`, `startOnTick`, `endOnTick`.
     series.yAxis.setTickInterval();
-    const boostThreshold = options.boostThreshold || 0, cropThreshold = options.cropThreshold, data = options.data || series.data, xData = series.xData, xExtremes = xAxis.getExtremes(), xMax = xExtremes.max, xMin = xExtremes.min, yData = series.yData, yExtremes = yAxis.getExtremes(), yMax = yExtremes.max, yMin = yExtremes.min;
+    const boostThreshold = options.boostThreshold || 0, cropThreshold = options.cropThreshold, data = options.data || series.data, xData = series.xData, xExtremes = xAxis.getExtremes(), xMax = xExtremes.max ?? Number.MAX_VALUE, xMin = xExtremes.min ?? -Number.MAX_VALUE, yData = series.yData, yExtremes = yAxis.getExtremes(), yMax = yExtremes.max ?? Number.MAX_VALUE, yMin = yExtremes.min ?? -Number.MAX_VALUE;
     // Skip processing in non-boost zoom
     if (!series.boosted &&
         xAxis.old &&
@@ -583,8 +593,8 @@ function scatterProcessData(force) {
         return true;
     }
     // Filter unsorted scatter data for ranges
-    const processedData = [], processedXData = [], processedYData = [];
-    let cropped = false, x, y;
+    const processedData = [], processedXData = [], processedYData = [], xRangeNeeded = !(isNumber(xExtremes.max) || isNumber(xExtremes.min)), yRangeNeeded = !(isNumber(yExtremes.max) || isNumber(yExtremes.min));
+    let cropped = false, x, xDataMax = xData[0], xDataMin = xData[0], y, yDataMax = yData[0], yDataMin = yData[0];
     for (let i = 0, iEnd = xData.length; i < iEnd; ++i) {
         x = xData[i];
         y = yData[i];
@@ -593,11 +603,27 @@ function scatterProcessData(force) {
             processedData.push({ x, y });
             processedXData.push(x);
             processedYData.push(y);
+            if (xRangeNeeded) {
+                xDataMax = Math.max(xDataMax, x);
+                xDataMin = Math.min(xDataMin, x);
+            }
+            if (yRangeNeeded) {
+                yDataMax = Math.max(yDataMax, y);
+                yDataMin = Math.min(yDataMin, y);
+            }
         }
         else {
             cropped = true;
         }
     }
+    if (xRangeNeeded) {
+        (_a = xAxis.options).max ?? (_a.max = xDataMax);
+        (_b = xAxis.options).min ?? (_b.min = xDataMin);
+    }
+    if (yRangeNeeded) {
+        (_c = yAxis.options).max ?? (_c.max = yDataMax);
+        (_d = yAxis.options).min ?? (_d.min = yDataMin);
+    }
     // Set properties as base processData
     series.cropped = cropped;
     series.cropStart = 0;
@@ -621,6 +647,13 @@ function seriesRenderCanvas() {
         this.processedXData ||
         false);
     let renderer = false, lastClientX, yBottom = yAxis.getThreshold(threshold), minVal, maxVal, minI, maxI;
+    // When touch-zooming or mouse-panning, re-rendering the canvas would not
+    // perform fast enough. Instead, let the axes redraw, but not the series.
+    // The series is scale-translated in an event handler for an approximate
+    // preview.
+    if (xAxis.isPanning || yAxis.isPanning) {
+        return;
+    }
     // Get or create the renderer
     renderer = createAndAttachRenderer(chart, this);
     chart.boosted = true;
@@ -643,7 +676,7 @@ function seriesRenderCanvas() {
         this.markerGroup = this.plotGroup('markerGroup', 'markers', true, 1, chart.seriesGroup);
     }
     else {
-        // If series has a private markeGroup, remove that
+        // If series has a private markerGroup, remove that
         // and use common markerGroup
         if (this.markerGroup &&
             this.markerGroup !== chart.boost.markerGroup) {
@@ -697,6 +730,7 @@ function seriesRenderCanvas() {
     };
     // Do not start building while drawing
     this.buildKDTree = noop;
+    fireEvent(this, 'renderCanvas');
     if (renderer) {
         allocateIfNotSeriesBoosting(renderer, this);
         renderer.pushSeries(this);
@@ -882,9 +916,16 @@ function wrapSeriesFunctions(seriesProto, seriesTypes, method) {
  * @private
  */
 function wrapSeriesGetExtremes(proceed) {
-    if (this.boosted &&
-        hasExtremes(this)) {
-        return {};
+    if (this.boosted) {
+        if (hasExtremes(this)) {
+            return {};
+        }
+        if (this.xAxis.isPanning || this.yAxis.isPanning) {
+            // Do not re-compute the extremes during panning, because looping
+            // the data is expensive. The `this` contains the `dataMin` and
+            // `dataMax` to use.
+            return this;
+        }
     }
     return proceed.apply(this, [].slice.call(arguments, 1));
 }
@@ -908,6 +949,10 @@ function wrapSeriesProcessData(proceed) {
             // Use processedYData for the stack (#7481):
             series.options.stacking ||
             !hasExtremes(series, true)) {
+            // Do nothing until the panning stops
+            if (series.boosted && (series.xAxis?.isPanning || series.yAxis?.isPanning)) {
+                return;
+            }
             // Extra check for zoomed scatter data
             if (isScatter && !series.yAxis.treeGrid) {
                 scatterProcessData.call(series, arguments[1]);

package/es-modules/Extensions/Boost/WGLRenderer.js

@@ -612,8 +612,8 @@ class WGLRenderer {
                 // y = plotHeight;
                 // }
                 if (x > plotWidth) {
-                    // If this is  rendered as a point, just skip drawing it
-                    // entirely, as we're not dependandt on lineTo'ing to it.
+                    // If this is rendered as a point, just skip drawing it
+                    // entirely, as we're not dependant on lineTo'ing to it.
                     // See #8197
                     if (inst.drawMode === 'POINTS') {
                         continue;
@@ -727,7 +727,7 @@ class WGLRenderer {
     }
     /**
      * Push a series to the renderer
-     * If we render the series immediatly, we don't have to loop later
+     * If we render the series immediately, we don't have to loop later
      * @private
      * @param {Highchart.Series} s
      * The series to push.

package/es-modules/Extensions/Boost/WGLVertexBuffer.js

@@ -88,7 +88,7 @@ class WGLVertexBuffer {
      * @param {string} attrib
      * Name of the Attribute to bind the buffer to
      * @param {number} dataComponents
-     * Mumber of components per. indice
+     * Number of components per. indice
      */
     build(dataIn, attrib, dataComponents) {
         let farray;

package/es-modules/Extensions/BoostCanvas.js

@@ -20,9 +20,9 @@ const { destroyGraphics } = BoostSeries;
 import Color from '../Core/Color/Color.js';
 const { parse: color } = Color;
 import H from '../Core/Globals.js';
-const { composed, doc, noop } = H;
+const { doc, noop } = H;
 import U from '../Core/Utilities.js';
-const { addEvent, fireEvent, isNumber, merge, pick, pushUnique, wrap } = U;
+const { addEvent, fireEvent, isNumber, merge, pick, wrap } = U;
 /* *
  *
  *  Namespace
@@ -79,8 +79,9 @@ var BoostCanvas;
      * @private
      */
     function compose(ChartClass, SeriesClass, seriesTypes) {
-        if (pushUnique(composed, compose)) {
-            const seriesProto = SeriesClass.prototype, { area: AreaSeries, bubble: BubbleSeries, column: ColumnSeries, heatmap: HeatmapSeries, scatter: ScatterSeries } = seriesTypes;
+        const seriesProto = SeriesClass.prototype;
+        if (!seriesProto.renderCanvas) {
+            const { area: AreaSeries, bubble: BubbleSeries, column: ColumnSeries, heatmap: HeatmapSeries, scatter: ScatterSeries } = seriesTypes;
             ChartConstructor = ChartClass;
             ChartClass.prototype.callbacks.push((chart) => {
                 addEvent(chart, 'predraw', onChartClear);

package/es-modules/Extensions/BorderRadius.js

@@ -13,9 +13,9 @@
 import D from '../Core/Defaults.js';
 const { defaultOptions } = D;
 import H from '../Core/Globals.js';
-const { composed, noop } = H;
+const { noop } = H;
 import U from '../Core/Utilities.js';
-const { addEvent, extend, isObject, merge, pushUnique, relativeLength } = U;
+const { addEvent, extend, isObject, merge, relativeLength } = U;
 /* *
  *
  *  Constants
@@ -207,8 +207,9 @@ function seriesOnAfterColumnTranslate() {
     }
 }
 /** @private */
-function compose(SeriesClass, PieSeriesClass, SVGElementClass, SVGRendererClass) {
-    if (pushUnique(composed, compose)) {
+function compose(SeriesClass, SVGElementClass, SVGRendererClass) {
+    const PieSeriesClass = SeriesClass.types.pie;
+    if (!SVGElementClass.symbolCustomAttribs.includes('borderRadius')) {
         const symbols = SVGRendererClass.prototype.symbols;
         addEvent(SeriesClass, 'afterColumnTranslate', seriesOnAfterColumnTranslate, {
             // After columnrange and polar column modifications

package/es-modules/Extensions/Breadcrumbs/Breadcrumbs.js

@@ -113,7 +113,7 @@ class Breadcrumbs {
      *
      * */
     static compose(ChartClass, highchartsDefaultOptions) {
-        if (pushUnique(composed, this.compose)) {
+        if (pushUnique(composed, 'Breadcrumbs')) {
             addEvent(ChartClass, 'destroy', onChartDestroy);
             addEvent(ChartClass, 'afterShowResetZoom', onChartAfterShowResetZoom);
             addEvent(ChartClass, 'getMargins', onChartGetMargins);
@@ -172,7 +172,7 @@ class Breadcrumbs {
         this.list = list;
     }
     /**
-     * Calcule level on which chart currently is.
+     * Calculate level on which chart currently is.
      *
      * @requires  modules/breadcrumbs
      *
@@ -227,7 +227,7 @@ class Breadcrumbs {
     /**
      * Redraw.
      *
-     * @requires  modules/breadcrums
+     * @requires  modules/breadcrumbs
      *
      * @function Highcharts.Breadcrumbs#redraw
      * @param {Highcharts.Breadcrumbs} this
@@ -301,7 +301,7 @@ class Breadcrumbs {
         const breadcrumbs = this, chart = breadcrumbs.chart, list = breadcrumbs.list, breadcrumbsOptions = breadcrumbs.options, buttonSpacing = breadcrumbsOptions.buttonSpacing;
         // Make sure that only one type of button is visible.
         this.destroyListElements();
-        // Draw breadcrumbs. Inital position for calculating the breadcrumbs
+        // Draw breadcrumbs. Initial position for calculating the breadcrumbs
         // group.
         const posX = breadcrumbs.group ?
             breadcrumbs.group.getBBox().width :
@@ -335,7 +335,7 @@ class Breadcrumbs {
             const breadcrumbsOptions = breadcrumbs.options, buttonTheme = breadcrumbsOptions.buttonTheme, positionOptions = breadcrumbsOptions.position, alignTo = (breadcrumbsOptions.relativeTo === 'chart' ||
                 breadcrumbsOptions.relativeTo === 'spacingBox' ?
                 void 0 :
-                'scrollablePlotBox'), bBox = breadcrumbs.group.getBBox(), additionalSpace = 2 * (buttonTheme.padding || 0) +
+                'plotBox'), bBox = breadcrumbs.group.getBBox(), additionalSpace = 2 * (buttonTheme.padding || 0) +
                 breadcrumbsOptions.buttonSpacing;
             // Store positionOptions
             positionOptions.width = bBox.width + additionalSpace;
@@ -355,7 +355,7 @@ class Breadcrumbs {
     /**
      * Render a button.
      *
-     * @requires  modules/breadcrums
+     * @requires  modules/breadcrumbs
      *
      * @function Highcharts.Breadcrumbs#renderButton
      * @param {Highcharts.Breadcrumbs} this
@@ -403,7 +403,7 @@ class Breadcrumbs {
     /**
      * Render a separator.
      *
-     * @requires  modules/breadcrums
+     * @requires  modules/breadcrumbs
      *
      * @function Highcharts.Breadcrumbs#renderSeparator
      * @param {Highcharts.Breadcrumbs} this
@@ -472,7 +472,7 @@ class Breadcrumbs {
      */
     destroy() {
         this.destroySingleButton();
-        // Destroy elements one by one. It's necessary beacause
+        // Destroy elements one by one. It's necessary because
         // g().destroy() does not remove added HTML
         this.destroyListElements(true);
         // Then, destroy the group itself.
@@ -553,7 +553,7 @@ class Breadcrumbs {
         }, adjustToRTL = function (element, posX, posY) {
             element.translate(posX - element.getBBox().width, posY);
         };
-        // Inital position for calculating the breadcrumbs group.
+        // Initial position for calculating the breadcrumbs group.
         let posX = breadcrumbs.group ?
             updateXPosition(breadcrumbs.group, buttonSpacing) :
             buttonSpacing, currentBreadcrumb, breadcrumb;

package/es-modules/Extensions/CurrentDateIndication.js

@@ -76,7 +76,7 @@ const defaultOptions = {
  * @private
  */
 function compose(AxisClass, PlotLineOrBandClass) {
-    if (pushUnique(composed, compose)) {
+    if (pushUnique(composed, 'CurrentDateIndication')) {
         addEvent(AxisClass, 'afterSetOptions', onAxisAfterSetOptions);
         addEvent(PlotLineOrBandClass, 'render', onPlotLineOrBandRender);
         wrap(PlotLineOrBandClass.prototype, 'getLabelText', wrapPlotLineOrBandGetLabelText);

package/es-modules/Extensions/Data.js

@@ -377,7 +377,7 @@ class Data {
             it's stable and passes all the test.
 
             It's also not written with speed in mind, instead everything is
-            very seggregated, and there a several redundant loops.
+            very segregated, and there a several redundant loops.
             This is to make it easier to stabilize the code initially.
 
             We do a pre-pass on the first 4 rows to make some intelligent
@@ -399,7 +399,7 @@ class Data {
             General rules:
                 - Quoting is allowed, e.g: "Col 1",123,321
                 - Quoting is optional, e.g.: Col1,123,321
-                - Doubble quoting is escaping, e.g. "Col ""Hello world""",123
+                - Double quoting is escaping, e.g. "Col ""Hello world""",123
                 - Spaces are considered part of the data: Col1 ,123
                 - New line is always the row delimiter
                 - Potential column delimiters are , ; \t
@@ -461,7 +461,7 @@ class Data {
                     columns.push([]);
                 }
                 if (!noAdd) {
-                    // Don't push - if there's a varrying amount of columns
+                    // Don't push - if there's a varying amount of columns
                     // for each row, pushing will skew everything down n slots
                     columns[column][rowNumber] = token;
                 }
@@ -688,7 +688,7 @@ class Data {
                     guessedFormat[2] = 'YY';
                 }
                 calculatedFormat = guessedFormat.join('/');
-                // If the caculated format is not valid, we need to present an
+                // If the calculated format is not valid, we need to present an
                 // error.
                 if (!(options.dateFormats || self.dateFormats)[calculatedFormat]) {
                     // This should emit an event instead
@@ -976,7 +976,7 @@ class Data {
         if (googleSpreadsheetKey) {
             delete options.googleSpreadsheetKey;
             fetchSheet(function (json) {
-                // Prepare the data from the spreadsheat
+                // Prepare the data from the spreadsheet
                 const columns = json.values;
                 if (!columns || columns.length === 0) {
                     return false;
@@ -1024,7 +1024,7 @@ class Data {
     trim(str, inside) {
         if (typeof str === 'string') {
             str = str.replace(/^\s+|\s+$/g, '');
-            // Clear white space insdie the string, like thousands separators
+            // Clear white space inside the string, like thousands separators
             if (inside && /^-?[0-9\s]+$/.test(str)) {
                 str = str.replace(/\s/g, '');
             }
@@ -1588,7 +1588,7 @@ class SeriesBuilder {
     /**
      * Returns true if the builder has a reader for the given configName.
      *
-     * @function SeriesBuider#hasReader
+     * @function SeriesBuilder#hasReader
      */
     hasReader(configName) {
         let i, columnReader;
@@ -1632,7 +1632,7 @@ export default Data;
  *        The chart options that were used.
  */
 /**
- * Callback function that returns the correspondig Date object to a match.
+ * Callback function that returns the corresponding Date object to a match.
  *
  * @callback Highcharts.DataDateFormatCallbackFunction
  *
@@ -1671,7 +1671,7 @@ export default Data;
  *         Timestamp (milliseconds since 1.1.1970) as integer for Date class.
  */
 /**
- * Callback function to access the parsed columns, the two-dimentional
+ * Callback function to access the parsed columns, the two-dimensional
  * input data array directly, before they are interpreted into series
  * data and categories.
  *
@@ -1942,7 +1942,7 @@ export default Data;
  * @apioption data.lineDelimiter
  */
 /**
- * A callback function to access the parsed columns, the two-dimentional
+ * A callback function to access the parsed columns, the two-dimensional
  * input data array directly, before they are interpreted into series
  * data and categories. Return `false` to stop completion, or call
  * `this.complete()` to continue async.
@@ -1967,7 +1967,7 @@ export default Data;
  * @apioption data.parseDate
  */
 /**
- * The same as the columns input option, but defining rows intead of
+ * The same as the columns input option, but defining rows instead of
  * columns.
  *
  * @see [data.columns](#data.columns)

package/es-modules/Extensions/DataGrouping/DataGrouping.js

@@ -29,7 +29,7 @@ function compose(AxisClass, SeriesClass, TooltipClass) {
     DataGroupingAxisComposition.compose(AxisClass);
     DataGroupingSeriesComposition.compose(SeriesClass);
     if (TooltipClass &&
-        pushUnique(composed, compose)) {
+        pushUnique(composed, 'DataGrouping')) {
         addEvent(TooltipClass, 'headerFormatter', onTooltipHeaderFormatter);
     }
 }

package/es-modules/Extensions/DataGrouping/DataGroupingAxisComposition.js

@@ -9,10 +9,8 @@
  * */
 'use strict';
 import DataGroupingDefaults from './DataGroupingDefaults.js';
-import H from '../../Core/Globals.js';
-const { composed } = H;
 import U from '../../Core/Utilities.js';
-const { addEvent, extend, merge, pick, pushUnique } = U;
+const { addEvent, extend, merge, pick } = U;
 /* *
  *
  *  Variables
@@ -54,12 +52,13 @@ function applyGrouping(e) {
  */
 function compose(AxisClass) {
     AxisConstructor = AxisClass;
-    if (pushUnique(composed, compose)) {
+    const axisProto = AxisClass.prototype;
+    if (!axisProto.applyGrouping) {
         addEvent(AxisClass, 'afterSetScale', onAfterSetScale);
         // When all series are processed, calculate the group pixel width and
         // then if this value is different than zero apply groupings.
         addEvent(AxisClass, 'postProcessData', applyGrouping);
-        extend(AxisClass.prototype, {
+        extend(axisProto, {
             applyGrouping,
             getGroupPixelWidth,
             setDataGrouping
@@ -97,8 +96,8 @@ function getGroupPixelWidth() {
     return doGrouping ? groupPixelWidth : 0;
 }
 /**
- * When resetting the scale reset the hasProccessed flag to avoid taking
- * previous data grouping of neighbour series into accound when determining
+ * When resetting the scale reset the hasProcessed flag to avoid taking
+ * previous data grouping of neighbour series into account when determining
  * group pixel width (#2692).
  * @private
  */
@@ -140,7 +139,7 @@ function setDataGrouping(dataGrouping, redraw) {
                 dataGrouping: dataGrouping
             }, false);
         }
-        // Axis not yet instanciated, alter series options
+        // Axis not yet instantiated, alter series options
     }
     else {
         this.chart.options.series.forEach(function (seriesOptions) {
@@ -150,7 +149,7 @@ function setDataGrouping(dataGrouping, redraw) {
                 merge(dataGrouping, seriesOptions.dataGrouping);
         });
     }
-    // Clear ordinal slope, so we won't accidentaly use the old one (#7827)
+    // Clear ordinal slope, so we won't accidentally use the old one (#7827)
     if (axis.ordinal) {
         axis.ordinal.slope = void 0;
     }