highcharts 11.4.3 → 11.4.4

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

@@ -162,7 +162,7 @@ class Series {
              * @name Highcharts.Series#visible
              * @type {boolean}
              */
-            visible,
+            visible, // True by default
             /**
              * Read only. The series' selected state as set by {@link
              * Highcharts.Series#select}.
@@ -788,7 +788,7 @@ class Series {
      */
     setData(data, redraw = true, animation, updatePoints) {
         const series = this, oldData = series.points, oldDataLength = (oldData && oldData.length) || 0, options = series.options, chart = series.chart, dataSorting = options.dataSorting, xAxis = series.xAxis, turboThreshold = options.turboThreshold, xData = this.xData, yData = this.yData, pointArrayMap = series.pointArrayMap, valueCount = pointArrayMap && pointArrayMap.length, keys = options.keys;
-        let i, pt, updatedData, indexOfX = 0, indexOfY = 1, firstPoint = null, copiedData;
+        let i, pt, updatedData, indexOfX = 0, indexOfY = 1, copiedData;
         if (!chart.options.chart.allowMutatingData) { // #4259
             // Remove old reference
             if (options.data) {
@@ -826,21 +826,24 @@ class Series {
             this.parallelArrays.forEach(function (key) {
                 series[key + 'Data'].length = 0;
             });
-            // In turbo mode, only one- or twodimensional arrays of numbers
-            // are allowed. The first value is tested, and we assume that
-            // all the rest are defined the same way. Although the 'for'
-            // loops are similar, they are repeated inside each if-else
-            // conditional for max performance.
-            if (turboThreshold && dataLength > turboThreshold) {
-                firstPoint = series.getFirstValidPoint(data);
-                if (isNumber(firstPoint)) { // Assume all points are numbers
+            // In turbo mode, look for one- or twodimensional arrays of numbers.
+            // The first and the last valid value are tested, and we assume that
+            // all the rest are defined the same way. Although the 'for' loops
+            // are similar, they are repeated inside each if-else conditional
+            // for max performance.
+            let runTurbo = turboThreshold && dataLength > turboThreshold;
+            if (runTurbo) {
+                const firstPoint = series.getFirstValidPoint(data), lastPoint = series.getFirstValidPoint(data, dataLength - 1, -1), isShortArray = (a) => Boolean(isArray(a) && (keys || isNumber(a[0])));
+                // Assume all points are numbers
+                if (isNumber(firstPoint) && isNumber(lastPoint)) {
                     for (i = 0; i < dataLength; i++) {
                         xData[i] = this.autoIncrement();
                         yData[i] = data[i];
                     }
                     // Assume all points are arrays when first point is
                 }
-                else if (isArray(firstPoint)) {
+                else if (isShortArray(firstPoint) &&
+                    isShortArray(lastPoint)) {
                     if (valueCount) { // [x, low, high] or [x, o, h, l, c]
                         if (firstPoint.length === valueCount) {
                             for (i = 0; i < dataLength; i++) {
@@ -885,10 +888,10 @@ class Series {
                 else {
                     // Highcharts expects configs to be numbers or arrays in
                     // turbo mode
-                    error(12, false, chart);
+                    runTurbo = false;
                 }
             }
-            else {
+            if (!runTurbo) {
                 for (i = 0; i < dataLength; i++) {
                     pt = { series: series };
                     series.pointClass.prototype.applyOptions.apply(pt, [data[i]]);
@@ -1296,7 +1299,7 @@ class Series {
             }
         }
         const dataExtremes = {
-            activeYData,
+            activeYData, // Needed for Stock Cumulative Sum
             dataMin: arrayMin(activeYData),
             dataMax: arrayMax(activeYData)
         };
@@ -1334,21 +1337,26 @@ class Series {
         return dataExtremes;
     }
     /**
-     * Find and return the first non null point in the data
+     * Find and return the first non nullish point in the data
      *
      * @private
      * @function Highcharts.Series.getFirstValidPoint
      * @param {Array<Highcharts.PointOptionsType>} data
-     * Array of options for points
+     *        Array of options for points
+     * @param {number} [start=0]
+     *        Index to start searching from
+     * @param {number} [increment=1]
+     *        Index increment, set -1 to search backwards
      */
-    getFirstValidPoint(data) {
+    getFirstValidPoint(data, start = 0, increment = 1) {
         const dataLength = data.length;
-        let i = 0, firstPoint = null;
-        while (firstPoint === null && i < dataLength) {
-            firstPoint = data[i];
-            i++;
+        let i = start;
+        while (i >= 0 && i < dataLength) {
+            if (defined(data[i])) {
+                return data[i];
+            }
+            i += increment;
         }
-        return firstPoint;
     }
     /**
      * Translate data points from raw data values to chart specific
@@ -2187,7 +2195,7 @@ class Series {
             rotationOriginY: inverted ?
                 (horAxis.len + vertAxis.len) / 2 :
                 0,
-            scaleX: inverted ? -1 : 1,
+            scaleX: inverted ? -1 : 1, // #1623
             scaleY: 1
         };
     }
@@ -2510,7 +2518,7 @@ class Series {
             if (!chart.styledMode) {
                 tracker.attr({
                     'stroke-linecap': 'round',
-                    'stroke-linejoin': 'round',
+                    'stroke-linejoin': 'round', // #1225
                     stroke: TRACKER_FILL,
                     fill: trackByArea ? TRACKER_FILL : 'none',
                     'stroke-width': series.graph.strokeWidth() +
@@ -3478,6 +3486,10 @@ export default Series;
  * default action is to toggle the visibility of the series. This can be
  * prevented by returning `false` or calling `event.preventDefault()`.
  *
+ * **Note:** This option is deprecated in favor of
+ * Highcharts.LegendItemClickCallbackFunction.
+ *
+ * @deprecated
  * @callback Highcharts.SeriesLegendItemClickCallbackFunction
  *
  * @param {Highcharts.Series} this
@@ -3489,6 +3501,10 @@ export default Series;
 /**
  * Information about the event.
  *
+ * **Note:** This option is deprecated in favor of
+ * Highcharts.LegendItemClickEventObject.
+ *
+ * @deprecated
  * @interface Highcharts.SeriesLegendItemClickEventObject
  */ /**
 * Related browser event.

package/es-modules/Core/Series/SeriesDefaults.js

@@ -897,12 +897,13 @@ const seriesDefaults = {
      * is to toggle the visibility of the series. This can be prevented
      * by returning `false` or calling `event.preventDefault()`.
      *
-     * @sample {highcharts} highcharts/plotoptions/series-events-legenditemclick/
-     *         Confirm hiding and showing
+     * **Note:** This option is deprecated in favor of
+     * [legend.events.itemClick](#legend.events.itemClick).
      *
-     * @type      {Highcharts.SeriesLegendItemClickCallbackFunction}
-     * @context   Highcharts.Series
-     * @apioption plotOptions.series.events.legendItemClick
+     * @type       {Highcharts.SeriesLegendItemClickCallbackFunction}
+     * @deprecated
+     * @context    Highcharts.Series
+     * @apioption  plotOptions.series.events.legendItemClick
      */
     /**
      * Fires when the mouse leaves the graph. One parameter, `event`, is
@@ -2215,15 +2216,20 @@ const seriesDefaults = {
      * @apioption plotOptions.series.tooltip
      */
     /**
-     * When a series contains a data array that is longer than this, only
-     * one dimensional arrays of numbers, or two dimensional arrays with
-     * x and y values are allowed. Also, only the first point is tested,
-     * and the rest are assumed to be the same format. This saves expensive
-     * data checking and indexing in long series. Set it to `0` disable.
+     * When a series contains a `data` array that is longer than this, the
+     * Series class looks for data configurations of plain numbers or arrays of
+     * numbers. The first and last valid points are checked. If found, the rest
+     * of the data is assumed to be the same. This saves expensive data checking
+     * and indexing in long series, and makes data-heavy charts render faster.
+     *
+     * Set it to `0` disable.
      *
      * Note:
-     * In boost mode turbo threshold is forced. Only array of numbers or
-     * two dimensional arrays are allowed.
+     * - In boost mode turbo threshold is forced. Only array of numbers or two
+     *   dimensional arrays are allowed.
+     * - In version 11.4.3 and earlier, if object configurations were passed
+     *   beyond the turbo threshold, a warning was logged in the console and the
+     *   data series didn't render.
      *
      * @since   2.2
      * @product highcharts highstock gantt

package/es-modules/Core/Templating.js

@@ -121,11 +121,11 @@ function dateFormat(format, timestamp, capitalize) {
  *         The formatted string.
  */
 function format(str = '', ctx, chart) {
-    const regex = /\{([a-zA-Z0-9\:\.\,;\-\/<>%_@"'= #\(\)]+)\}/g, 
+    const regex = /\{([\w\:\.\,;\-\/<>%@"'’= #\(\)]+)\}/g, 
     // The sub expression regex is the same as the top expression regex,
     // but except parens and block helpers (#), and surrounded by parens
     // instead of curly brackets.
-    subRegex = /\(([a-zA-Z0-9\:\.\,;\-\/<>%_@"'= ]+)\)/g, matches = [], floatRegex = /f$/, decRegex = /\.([0-9])/, lang = defaultOptions.lang, time = chart && chart.time || defaultTime, numberFormatter = chart && chart.numberFormatter || numberFormat;
+    subRegex = /\(([\w\:\.\,;\-\/<>%@"'= ]+)\)/g, matches = [], floatRegex = /f$/, decRegex = /\.(\d)/, lang = defaultOptions.lang, time = chart && chart.time || defaultTime, numberFormatter = chart && chart.numberFormatter || numberFormat;
     /*
      * Get a literal or variable value inside a template expression. May be
      * extended with other types like string or null if needed, but keep it

package/es-modules/Core/Tooltip.js

@@ -36,6 +36,9 @@ const { addEvent, clamp, css, discardElement, extend, fireEvent, isArray, isNumb
  *
  * @param {Highcharts.TooltipOptions} options
  * Tooltip options.
+ *
+ * @param {Highcharts.Pointer} pointer
+ * The pointer instance.
  */
 class Tooltip {
     /* *
@@ -371,7 +374,7 @@ class Tooltip {
         buildDimensionArray = (dim) => {
             const isX = dim === 'x';
             return [
-                dim,
+                dim, // Dimension - x or y
                 isX ? outerWidth : outerHeight,
                 isX ? boxWidth : boxHeight
             ].concat(outside ? [
@@ -719,12 +722,12 @@ class Tooltip {
                         });
                     }
                     label.attr({
+                        // Add class before the label BBox calculation (#21035)
+                        'class': tooltip.getClassName(point),
                         text: text && text.join ?
                             text.join('') :
                             text
                     });
-                    // Set the stroke color of the box to reflect the point
-                    label.addClass(tooltip.getClassName(point), true);
                     if (!styledMode) {
                         label.attr({
                             stroke: (options.borderColor ||

package/es-modules/Data/Connectors/JSONConnector.js

@@ -78,6 +78,7 @@ class JSONConnector extends DataConnector {
                 table.deleteColumns();
                 converter.parse({ data });
                 table.setColumns(converter.getTable().getColumns());
+                table.setRowKeysColumn(data.length);
             }
             return connector.setModifierOptions(dataModifier).then(() => data);
         })

package/es-modules/Data/Converters/CSVConverter.js

@@ -291,7 +291,7 @@ class CSVConverter extends DataConverter {
             read(i);
             if (c === '#') {
                 // If there are hexvalues remaining (#13283)
-                if (!/^#[0-9a-f]{3,3}|[0-9a-f]{6,6}/i.test(columnStr.substring(i))) {
+                if (!/^#[A-F\d]{3,3}|[A-F\d]{6,6}/i.test(columnStr.substring(i))) {
                     // The rest of the row is a comment
                     push();
                     return;

package/es-modules/Data/Converters/DataConverter.js

@@ -51,7 +51,7 @@ class DataConverter {
          */
         this.dateFormats = {
             'YYYY/mm/dd': {
-                regex: /^([0-9]{4})([\-\.\/])([0-9]{1,2})\2([0-9]{1,2})$/,
+                regex: /^(\d{4})([\-\.\/])(\d{1,2})\2(\d{1,2})$/,
                 parser: function (match) {
                     return (match ?
                         Date.UTC(+match[1], match[3] - 1, +match[4]) :
@@ -59,7 +59,7 @@ class DataConverter {
                 }
             },
             'dd/mm/YYYY': {
-                regex: /^([0-9]{1,2})([\-\.\/])([0-9]{1,2})\2([0-9]{4})$/,
+                regex: /^(\d{1,2})([\-\.\/])(\d{1,2})\2(\d{4})$/,
                 parser: function (match) {
                     return (match ?
                         Date.UTC(+match[4], match[3] - 1, +match[1]) :
@@ -68,7 +68,7 @@ class DataConverter {
                 alternative: 'mm/dd/YYYY' // Different format with the same regex
             },
             'mm/dd/YYYY': {
-                regex: /^([0-9]{1,2})([\-\.\/])([0-9]{1,2})\2([0-9]{4})$/,
+                regex: /^(\d{1,2})([\-\.\/])(\d{1,2})\2(\d{4})$/,
                 parser: function (match) {
                     return (match ?
                         Date.UTC(+match[4], match[1] - 1, +match[3]) :
@@ -76,7 +76,7 @@ class DataConverter {
                 }
             },
             'dd/mm/YY': {
-                regex: /^([0-9]{1,2})([\-\.\/])([0-9]{1,2})\2([0-9]{2})$/,
+                regex: /^(\d{1,2})([\-\.\/])(\d{1,2})\2(\d{2})$/,
                 parser: function (match) {
                     const d = new Date();
                     if (!match) {
@@ -94,7 +94,7 @@ class DataConverter {
                 alternative: 'mm/dd/YY' // Different format with the same regex
             },
             'mm/dd/YY': {
-                regex: /^([0-9]{1,2})([\-\.\/])([0-9]{1,2})\2([0-9]{2})$/,
+                regex: /^(\d{1,2})([\-\.\/])(\d{1,2})\2(\d{2})$/,
                 parser: function (match) {
                     return (match ?
                         Date.UTC(+match[4] + 2000, match[1] - 1, +match[3]) :
@@ -256,7 +256,7 @@ class DataConverter {
                 data[i] && data[i].length) {
                 thing = data[i]
                     .trim()
-                    .replace(/[-\.\/]/g, ' ')
+                    .replace(/[\-\.\/]/g, ' ')
                     .split(' ');
                 guessedFormat = [
                     '',
@@ -523,7 +523,7 @@ class DataConverter {
         if (typeof str === 'string') {
             str = str.replace(/^\s+|\s+$/g, '');
             // Clear white space insdie the string, like thousands separators
-            if (inside && /^[0-9\s]+$/.test(str)) {
+            if (inside && /^[\d\s]+$/.test(str)) {
                 str = str.replace(/\s/g, '');
             }
         }

package/es-modules/Data/DataTable.js

@@ -9,6 +9,7 @@
  *  Authors:
  *  - Sophie Bremer
  *  - Gøran Slettemark
+ *  - Jomar Hønsi
  *
  * */
 'use strict';
@@ -114,7 +115,7 @@ class DataTable {
         this.autoId = !options.id;
         this.columns = {};
         /**
-         * ID of the table for indentification purposes.
+         * ID of the table for identification purposes.
          *
          * @name Highcharts.DataTable#id
          * @type {string}
@@ -123,6 +124,7 @@ class DataTable {
         this.modified = this;
         this.rowCount = 0;
         this.versionTag = uniqueKey();
+        this.rowKeysId = options.rowKeysId;
         const columns = options.columns || {}, columnNames = Object.keys(columns), thisColumns = this.columns;
         let rowCount = 0;
         for (let i = 0, iEnd = columnNames.length, column, columnName; i < iEnd; ++i) {
@@ -140,6 +142,7 @@ class DataTable {
             alias = aliasKeys[i];
             thisAliases[alias] = aliases[alias];
         }
+        this.setRowKeysColumn(rowCount);
     }
     /* *
      *
@@ -175,6 +178,9 @@ class DataTable {
         if (!table.autoId) {
             tableOptions.id = table.id;
         }
+        if (table.rowKeysId) {
+            tableOptions.rowKeysId = table.rowKeysId;
+        }
         const tableClone = new DataTable(tableOptions);
         if (!skipColumns) {
             tableClone.versionTag = table.versionTag;
@@ -245,7 +251,13 @@ class DataTable {
                 }
                 delete columns[columnName];
             }
-            if (!Object.keys(columns).length) {
+            let nColumns = Object.keys(columns).length;
+            if (table.rowKeysId && nColumns === 1) {
+                // All columns deleted, remove row keys column
+                delete columns[table.rowKeysId];
+                nColumns = 0;
+            }
+            if (!nColumns) {
                 table.rowCount = 0;
             }
             if (modifier) {
@@ -415,7 +427,7 @@ class DataTable {
             case 'number':
                 return (isNaN(cellValue) && !useNaN ? null : cellValue);
         }
-        cellValue = parseFloat(`${cellValue}`);
+        cellValue = parseFloat(`${cellValue ?? ''}`);
         return (isNaN(cellValue) && !useNaN ? null : cellValue);
     }
     /**
@@ -437,6 +449,7 @@ class DataTable {
         columnNameOrAlias = (table.aliases[columnNameOrAlias] ||
             columnNameOrAlias);
         const column = table.columns[columnNameOrAlias];
+        // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
         return `${(column && column[rowIndex])}`;
     }
     /**
@@ -516,6 +529,7 @@ class DataTable {
      */
     getColumnNames() {
         const table = this, columnNames = Object.keys(table.columns);
+        this.removeRowKeysColumn(columnNames);
         return columnNames;
     }
     /**
@@ -536,6 +550,7 @@ class DataTable {
     getColumns(columnNamesOrAliases, asReference) {
         const table = this, tableAliasMap = table.aliases, tableColumns = table.columns, columns = {};
         columnNamesOrAliases = (columnNamesOrAliases || Object.keys(tableColumns));
+        this.removeRowKeysColumn(columnNamesOrAliases);
         for (let i = 0, iEnd = columnNamesOrAliases.length, column, columnName; i < iEnd; ++i) {
             columnName = columnNamesOrAliases[i];
             column = tableColumns[(tableAliasMap[columnName] || columnName)];
@@ -652,6 +667,7 @@ class DataTable {
     getRowObjects(rowIndex = 0, rowCount = (this.rowCount - rowIndex), columnNamesOrAliases) {
         const table = this, aliases = table.aliases, columns = table.columns, rows = new Array(rowCount);
         columnNamesOrAliases = (columnNamesOrAliases || Object.keys(columns));
+        this.removeRowKeysColumn(columnNamesOrAliases);
         for (let i = rowIndex, i2 = 0, iEnd = Math.min(table.rowCount, (rowIndex + rowCount)), column, row; i < iEnd; ++i, ++i2) {
             row = rows[i2] = {};
             for (const columnName of columnNamesOrAliases) {
@@ -788,6 +804,10 @@ class DataTable {
                 }
                 columns[newColumnName] = columns[columnName];
                 delete columns[columnName];
+                if (table.rowKeysId) {
+                    // Ensure that row keys column is last
+                    this.moveRowKeysColumnToLast(columns, table.rowKeysId);
+                }
             }
             return true;
         }
@@ -923,6 +943,10 @@ class DataTable {
         if (tableModifier) {
             tableModifier.modifyColumns(table, columns, (rowIndex || 0));
         }
+        if (table.rowKeysId) {
+            // Ensure that the row keys column is always last
+            this.moveRowKeysColumnToLast(tableColumns, table.rowKeysId);
+        }
         table.emit({
             type: 'afterSetColumns',
             columns,
@@ -931,6 +955,63 @@ class DataTable {
             rowIndex
         });
     }
+    /**
+     * Sets the row key column. This column is invisible and the cells
+     * serve as identifiers to the rows they are contained in. Accessing
+     * rows by keys instead of indexes is necessary in cases where rows
+     * are rearranged by a DataModifier (e.g. SortModifier or RangeModifier).
+     *
+     * @function Highcharts.DataTable#setRowKeysColumn
+     *
+     * @param {number} nRows
+     * Number of rows to add to the column.
+     *
+     */
+    setRowKeysColumn(nRows) {
+        const id = this.rowKeysId;
+        if (!id) {
+            return;
+        }
+        this.columns[id] = [];
+        const keysArray = this.columns[id];
+        for (let i = 0; i < nRows; i++) {
+            keysArray.push(id + '_' + i);
+        }
+    }
+    /**
+     * Get the row key column.
+     *
+     * @function Highcharts.DataTable#getRowKeysColumn
+     *     *
+     * @return {DataTable.Column|undefined}
+     * Returns row keys if rowKeysId is defined, else undefined.
+     */
+    getRowKeysColumn() {
+        const id = this.rowKeysId;
+        if (id) {
+            return this.columns[id];
+        }
+    }
+    /**
+     * Get the row index in the original (unmodified) data table.
+     *
+     * @function Highcharts.DataTable#getRowIndexOriginal
+     *
+     * @param {number} idx
+     * Row index in the modified data table.
+     *
+     * @return {string}
+     * Row index in the original data table.
+     */
+    getRowIndexOriginal(idx) {
+        const id = this.rowKeysId;
+        if (id) {
+            const rowKeyCol = this.columns[id];
+            const idxOrig = '' + rowKeyCol[idx];
+            return idxOrig.split('_')[1];
+        }
+        return String(idx);
+    }
     /**
      * Sets or unsets the modifier for the table.
      * @private
@@ -942,7 +1023,7 @@ class DataTable {
      * Custom information for pending events.
      *
      * @return {Promise<Highcharts.DataTable>}
-     * Resolves to this table if successfull, or rejects on failure.
+     * Resolves to this table if successful, or rejects on failure.
      *
      * @emits #setModifier
      * @emits #afterSetModifier
@@ -1018,7 +1099,7 @@ class DataTable {
      * Row values to set.
      *
      * @param {number} [rowIndex]
-     * Index of the first row to set. Leave `undefind` to add as new rows.
+     * Index of the first row to set. Leave `undefined` to add as new rows.
      *
      * @param {Highcharts.DataTableEventDetail} [eventDetail]
      * Custom information for pending events.
@@ -1066,6 +1147,9 @@ class DataTable {
                 columns[columnNames[i]].length = indexRowCount;
             }
         }
+        if (this.rowKeysId && !columnNames.includes(this.rowKeysId)) {
+            this.setRowKeysColumn(rowCount);
+        }
         if (modifier) {
             modifier.modifyRows(table, rows, rowIndex);
         }
@@ -1077,6 +1161,23 @@ class DataTable {
             rows
         });
     }
+    // The row keys column must always be the last column
+    moveRowKeysColumnToLast(columns, id) {
+        const rowKeyColumn = columns[id];
+        delete columns[id];
+        columns[id] = rowKeyColumn;
+    }
+    // The row keys column must be removed in some methods
+    // (API backwards compatibility)
+    removeRowKeysColumn(columnNamesOrAliases) {
+        if (this.rowKeysId) {
+            const pos = columnNamesOrAliases.indexOf(this.rowKeysId);
+            if (pos !== -1) {
+                // Always the last column
+                columnNamesOrAliases.pop();
+            }
+        }
+    }
 }
 /* *
  *

package/es-modules/Data/Formula/FormulaParser.js

@@ -24,12 +24,12 @@ const booleanRegExp = /^(?:FALSE|TRUE)/;
  * `.`-separated decimal.
  * @private
  */
-const decimal1RegExp = /^[+-]?\d+(?:\.\d+)?(?:e[+-]\d+)?/;
+const decimal1RegExp = /^[+\-]?\d+(?:\.\d+)?(?:e[+\-]\d+)?/;
 /**
  * `,`-separated decimal.
  * @private
  */
-const decimal2RegExp = /^[+-]?\d+(?:,\d+)?(?:e[+-]\d+)?/;
+const decimal2RegExp = /^[+\-]?\d+(?:,\d+)?(?:e[+\-]\d+)?/;
 /**
  * - Group 1: Function name
  * @private

package/es-modules/Extensions/Annotations/Controllables/ControllableDefaults.js

@@ -57,7 +57,7 @@ const defaultMarkers = {
         children: [{
                 tagName: 'path',
                 attributes: {
-                    d: 'M 0 0 L 10 5 L 0 10 Z',
+                    d: 'M 0 0 L 10 5 L 0 10 Z', // Triangle (used as an arrow)
                     'stroke-width': 0
                 }
             }]

package/es-modules/Extensions/Annotations/Controllables/ControllablePath.js

@@ -185,7 +185,7 @@ class ControllablePath extends Controllable {
             .add(parent);
         if (!this.annotation.chart.styledMode) {
             this.tracker.attr({
-                'stroke-linejoin': 'round',
+                'stroke-linejoin': 'round', // #1225
                 stroke: TRACKER_FILL,
                 fill: TRACKER_FILL,
                 'stroke-width': this.graphic.strokeWidth() +

package/es-modules/Extensions/Annotations/NavigationBindings.js

@@ -375,8 +375,7 @@ class NavigationBindings {
             }
         }
         else {
-            chart.stockTools &&
-                chart.stockTools.toggleButtonActiveClass(button);
+            chart.stockTools && button.classList.remove('highcharts-active');
             svgContainer.removeClass('highcharts-draw-mode');
             navigation.nextEvent = false;
             navigation.mouseMoveEvent = false;

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

@@ -92,7 +92,7 @@ function compose(ChartClass, AxisClass, SeriesClass, seriesTypes, ColorClass) {
 /**
  * Returns true if the current browser supports WebGL.
  *
- * @requires module:modules/boost
+ * @requires modules/boost
  *
  * @function Highcharts.hasWebGLSupport
  *

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

@@ -202,14 +202,20 @@ function onChartCallback(chart) {
     addEvent(chart, 'redraw', canvasToSVG);
     let prevX = -1;
     let prevY = -1;
-    addEvent(chart.pointer, 'afterGetHoverData', () => {
-        const series = chart.hoverSeries;
+    addEvent(chart.pointer, 'afterGetHoverData', (e) => {
+        const series = e.hoverPoint?.series;
         chart.boost = chart.boost || {};
         if (chart.boost.markerGroup && series) {
             const xAxis = chart.inverted ? series.yAxis : series.xAxis;
             const yAxis = chart.inverted ? series.xAxis : series.yAxis;
             if ((xAxis && xAxis.pos !== prevX) ||
                 (yAxis && yAxis.pos !== prevY)) {
+                // #21176: If the axis is changed, hide teh halo without
+                // animation  to prevent flickering of halos sharing the
+                // same marker group
+                chart.series.forEach((s) => {
+                    s.halo?.hide();
+                });
                 // #10464: Keep the marker group position in sync with the
                 // position of the hovered series axes since there is only
                 // one shared marker group when boosting.