highcharts 9.2.2 → 9.3.3

package/highcharts.src.js

@@ -1,5 +1,5 @@
 /**
- * @license Highcharts JS v9.2.2 (2021-08-24)
+ * @license Highcharts JS v9.3.3 (2022-02-01)
  *
  * (c) 2009-2021 Torstein Honsi
  *
@@ -71,7 +71,7 @@
              *  Constants
              *
              * */
-            Globals.SVG_NS = 'http://www.w3.org/2000/svg', Globals.product = 'Highcharts', Globals.version = '9.2.2', Globals.win = w, Globals.doc = Globals.win.document, Globals.svg = (Globals.doc &&
+            Globals.SVG_NS = 'http://www.w3.org/2000/svg', Globals.product = 'Highcharts', Globals.version = '9.3.3', Globals.win = w, Globals.doc = Globals.win.document, Globals.svg = (Globals.doc &&
                 Globals.doc.createElementNS &&
                 !!Globals.doc.createElementNS(Globals.SVG_NS, 'svg').createSVGRect), Globals.userAgent = (Globals.win.navigator && Globals.win.navigator.userAgent) || '', Globals.isChrome = Globals.userAgent.indexOf('Chrome') !== -1, Globals.isFirefox = Globals.userAgent.indexOf('Firefox') !== -1, Globals.isMS = /(edge|msie|trident)/i.test(Globals.userAgent) && !Globals.win.opera, Globals.isSafari = !Globals.isChrome && Globals.userAgent.indexOf('Safari') !== -1, Globals.isTouchDevice = /(Mobile|Android|Windows Phone)/.test(Globals.userAgent), Globals.isWebKit = Globals.userAgent.indexOf('AppleWebKit') !== -1, Globals.deg2rad = Math.PI * 2 / 360, Globals.hasBidiBug = (Globals.isFirefox &&
                 parseInt(Globals.userAgent.split('Firefox/')[1], 10) < 4 // issue #38
@@ -520,9 +520,13 @@
             return typeof obj !== 'undefined' && obj !== null;
         }
         /**
-         * Set or get an attribute or an object of attributes. To use as a setter, pass
-         * a key and a value, or let the second argument be a collection of keys and
-         * values. To use as a getter, pass only a string as the second argument.
+         * Set or get an attribute or an object of attributes.
+         *
+         * To use as a setter, pass a key and a value, or let the second argument be a
+         * collection of keys and values. When using a collection, passing a value of
+         * `null` or `undefined` will remove the attribute.
+         *
+         * To use as a getter, pass only a string as the second argument.
          *
          * @function Highcharts.attr
          *
@@ -558,7 +562,12 @@
             }
             else {
                 objectEach(prop, function (val, key) {
-                    elem.setAttribute(key, val);
+                    if (defined(val)) {
+                        elem.setAttribute(key, val);
+                    }
+                    else {
+                        elem.removeAttribute(key);
+                    }
                 });
             }
             return ret;
@@ -752,7 +761,7 @@
             return obj;
         }
         /**
-         * Left-pad a string to a given length by adding a character repetetively.
+         * Left-pad a string to a given length by adding a character repetitively.
          *
          * @function Highcharts.pad
          *
@@ -929,8 +938,6 @@
          *
          * @param {Function} sortFunction
          *        The function to sort it with, like with regular Array.prototype.sort.
-         *
-         * @return {void}
          */
         function stableSort(arr, sortFunction) {
             // @todo It seems like Chrome since v70 sorts in a stable way internally,
@@ -1023,7 +1030,7 @@
             });
         }
         /**
-         * Discard a HTML element by moving it to the bin and delete.
+         * Discard a HTML element
          *
          * @function Highcharts.discardElement
          *
@@ -1031,17 +1038,10 @@
          *        The HTML node to discard.
          */
         function discardElement(element) {
-            // create a garbage bin element, not part of the DOM
-            if (!garbageBin) {
-                garbageBin = createElement('div');
+            if (element && element.parentElement) {
+                element.parentElement.removeChild(element);
             }
-            // move the node and empty bin
-            if (element) {
-                garbageBin.appendChild(element);
-            }
-            garbageBin.innerHTML = '';
         }
-        var garbageBin;
         /**
          * Fix JS round off float errors.
          *
@@ -1057,7 +1057,8 @@
          *         The corrected float number.
          */
         function correctFloat(num, prec) {
-            return parseFloat(num.toPrecision(prec || 14));
+            // When the number is higher than 1e14 use the number (#16275)
+            return num > 1e14 ? num : parseFloat(num.toPrecision(prec || 14));
         }
         /**
          * The time unit lookup
@@ -1239,7 +1240,7 @@
                 var i;
                 var length = arr.length;
                 for (i = 0; i < length; i++) {
-                    if (callback(arr[i], i)) { // eslint-disable-line callback-return
+                    if (callback(arr[i], i)) { // eslint-disable-line node/callback-return
                         return arr[i];
                     }
                 }
@@ -1511,9 +1512,6 @@
             /* eslint-enable valid-jsdoc */
             /**
              * @private
-             * @param {string} type - event type
-             * @param {Highcharts.EventCallbackFunction<T>} fn - callback
-             * @return {void}
              */
             function removeOneEvent(type, fn) {
                 var removeEventListener = (el.removeEventListener || H.removeEventListenerPolyfill);
@@ -1523,8 +1521,6 @@
             }
             /**
              * @private
-             * @param {any} eventCollection - collection
-             * @return {void}
              */
             function removeAllEvents(eventCollection) {
                 var types,
@@ -2155,106 +2151,7 @@
 
         return Utilities;
     });
-    _registerModule(_modules, 'Core/Color/Palette.js', [], function () {
-        var palette = {
-                /**
-                 * Colors for data series and points.
-                 */
-                colors: [
-                    '#7cb5ec',
-                    '#434348',
-                    '#90ed7d',
-                    '#f7a35c',
-                    '#8085e9',
-                    '#f15c80',
-                    '#e4d354',
-                    '#2b908f',
-                    '#f45b5b',
-                    '#91e8e1'
-                ],
-                /**
-                 * Chart background,
-            point stroke for markers and columns etc
-                 */
-                backgroundColor: '#ffffff',
-                /**
-                 * Strong text.
-                 */
-                neutralColor100: '#000000',
-                /**
-                 * Main text and some strokes.
-                 */
-                neutralColor80: '#333333',
-                /**
-                 * Axis labels,
-            axis title,
-            connector fallback.
-                 */
-                neutralColor60: '#666666',
-                /**
-                 * Credits text,
-            export menu stroke.
-                 */
-                neutralColor40: '#999999',
-                /**
-                 * Disabled texts,
-            button strokes,
-            crosshair etc.
-                 */
-                neutralColor20: '#cccccc',
-                /**
-                 * Grid lines etc.
-                 */
-                neutralColor10: '#e6e6e6',
-                /**
-                 * Minor grid lines etc.
-                 */
-                neutralColor5: '#f2f2f2',
-                /**
-                 * Tooltip backgroud,
-            button fills,
-            map null points.
-                 */
-                neutralColor3: '#f7f7f7',
-                /**
-                 * Drilldown clickable labels,
-            color axis max color.
-                 */
-                highlightColor100: '#003399',
-                /**
-                 * Selection marker,
-            menu hover,
-            button hover,
-            chart border,
-            navigator series.
-                 */
-                highlightColor80: '#335cad',
-                /**
-                 * Navigator mask fill.
-                 */
-                highlightColor60: '#6685c2',
-                /**
-                 * Ticks and axis line.
-                 */
-                highlightColor20: '#ccd6eb',
-                /**
-                 * Pressed button,
-            color axis min color.
-                 */
-                highlightColor10: '#e6ebf5',
-                /**
-                 * Positive indicator color
-                 */
-                positiveColor: '#06b535',
-                /**
-                 * Negative indicator color
-                 */
-                negativeColor: '#f21313'
-            };
-
-        return palette;
-    });
-    _registerModule(_modules, 'Core/Chart/ChartDefaults.js', [_modules['Core/Color/Palette.js']], function (Palette) {
+    _registerModule(_modules, 'Core/Chart/ChartDefaults.js', [], function () {
         /* *
          *
          *  (c) 2010-2021 Torstein Honsi
@@ -3240,7 +3137,7 @@
              *
              * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
              */
-            borderColor: Palette.highlightColor80,
+            borderColor: "#335cad" /* highlightColor80 */,
             /**
              * The pixel width of the outer chart border.
              *
@@ -3279,7 +3176,7 @@
              *
              * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
              */
-            backgroundColor: Palette.backgroundColor,
+            backgroundColor: "#ffffff" /* backgroundColor */,
             /**
              * The background color or gradient for the plot area.
              *
@@ -3336,7 +3233,7 @@
              *
              * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
              */
-            plotBorderColor: Palette.neutralColor20
+            plotBorderColor: "#cccccc" /* neutralColor20 */
         };
         /* *
          *
@@ -3773,6 +3670,31 @@
 
         return Color;
     });
+    _registerModule(_modules, 'Core/Color/Palettes.js', [], function () {
+        /**
+         * Series palettes for Highcharts. Series colors are defined in highcharts.scss.
+         * **Do not edit this file!** This file is generated using the 'gulp palette' task.
+         */
+        var SeriesPalettes = {
+                /**
+                 * Colors for data series and points.
+                 */
+                colors: [
+                    '#7cb5ec',
+                    '#434348',
+                    '#90ed7d',
+                    '#f7a35c',
+                    '#8085e9',
+                    '#f15c80',
+                    '#e4d354',
+                    '#2b908f',
+                    '#f45b5b',
+                    '#91e8e1'
+                ]
+            };
+
+        return SeriesPalettes;
+    });
     _registerModule(_modules, 'Core/Time.js', [_modules['Core/Globals.js'], _modules['Core/Utilities.js']], function (H, U) {
         /* *
          *
@@ -3948,7 +3870,8 @@
                     // time
                     if (unit === 'Milliseconds' ||
                         unit === 'Seconds' ||
-                        (unit === 'Minutes' && this.getTimezoneOffset(date) % 3600000 === 0) // #13961
+                        (unit === 'Minutes' &&
+                            this.getTimezoneOffset(date) % 3600000 === 0) // #13961
                     ) {
                         return date['setUTC' + unit](value);
                     }
@@ -3965,8 +3888,8 @@
                 }
                 // UTC time with no timezone handling
                 if (this.useUTC ||
-                    (hasNewSafariBug && unit === 'FullYear') // leap calculation in UTC only
-                ) {
+                    // leap calculation in UTC only
+                    (hasNewSafariBug && unit === 'FullYear')) {
                     return date['setUTC' + unit](value);
                 }
                 // Else, local time
@@ -3982,7 +3905,6 @@
              *
              * @param {Highcharts.TimeOptions} options
              *
-             * @return {void}
              */
             Time.prototype.update = function (options) {
                 var useUTC = pick(options && options.useUTC,
@@ -4071,6 +3993,7 @@
             Time.prototype.timezoneOffsetFunction = function () {
                 var time = this,
                     options = this.options,
+                    getTimezoneOffset = options.getTimezoneOffset,
                     moment = options.moment || win.moment;
                 if (!this.useUTC) {
                     return function (timestamp) {
@@ -4090,9 +4013,9 @@
                     }
                 }
                 // If not timezone is set, look for the getTimezoneOffset callback
-                if (this.useUTC && options.getTimezoneOffset) {
+                if (this.useUTC && getTimezoneOffset) {
                     return function (timestamp) {
-                        return options.getTimezoneOffset(timestamp.valueOf()) * 60000;
+                        return getTimezoneOffset(timestamp.valueOf()) * 60000;
                     };
                 }
                 // Last, use the `timezoneOffset` option if set
@@ -4226,8 +4149,10 @@
              * Resolve legacy formats of dateTimeLabelFormats (strings and arrays) into
              * an object.
              * @private
-             * @param {string|Array<T>|Highcharts.Dictionary<T>} f - General format description
-             * @return {Highcharts.Dictionary<T>} - The object definition
+             * @param {string|Array<T>|Highcharts.Dictionary<T>} f
+             * General format description
+             * @return {Highcharts.Dictionary<T>}
+             * The object definition
              */
             Time.prototype.resolveDTLFormat = function (f) {
                 if (!isObject(f, true)) { // check for string or array
@@ -4259,6 +4184,7 @@
              * @param {number} [startOfWeek=1]
              *
              * @return {Highcharts.AxisTickPositionsArray}
+             * Time positions
              */
             Time.prototype.getTimeTicks = function (normalizedInterval, min, max, startOfWeek) {
                 var time = this,
@@ -4528,15 +4454,15 @@
          * In case of loading the library from a `script` tag,
          * this option is not needed, it will be loaded from there by default.
          *
-         * @type {function}
-         * @since 8.2.0
+         * @type      {Function}
+         * @since     8.2.0
          * @apioption time.moment
          */
         ''; // keeps doclets above in JS file
 
         return Time;
     });
-    _registerModule(_modules, 'Core/DefaultOptions.js', [_modules['Core/Chart/ChartDefaults.js'], _modules['Core/Color/Color.js'], _modules['Core/Globals.js'], _modules['Core/Color/Palette.js'], _modules['Core/Time.js'], _modules['Core/Utilities.js']], function (ChartDefaults, Color, H, palette, Time, U) {
+    _registerModule(_modules, 'Core/DefaultOptions.js', [_modules['Core/Chart/ChartDefaults.js'], _modules['Core/Color/Color.js'], _modules['Core/Globals.js'], _modules['Core/Color/Palettes.js'], _modules['Core/Time.js'], _modules['Core/Utilities.js']], function (ChartDefaults, Color, H, Palettes, Time, U) {
         /* *
          *
          *  (c) 2010-2021 Torstein Honsi
@@ -4598,7 +4524,7 @@
                  * @default ["#7cb5ec", "#434348", "#90ed7d", "#f7a35c", "#8085e9",
                  *          "#f15c80", "#e4d354", "#2b908f", "#f45b5b", "#91e8e1"]
                  */
-                colors: palette.colors,
+                colors: Palettes.colors,
                 /**
                  * Styled mode only. Configuration object for adding SVG definitions for
                  * reusable elements. See [gradients, shadows and
@@ -5415,7 +5341,7 @@
                     /**
                      * @ignore-option
                      */
-                    color: palette.neutralColor80
+                    color: "#333333" /* neutralColor80 */
                 }
             },
             /**
@@ -5695,7 +5621,7 @@
                  *
                  * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
                  */
-                borderColor: palette.neutralColor40,
+                borderColor: "#999999" /* neutralColor40 */,
                 /**
                  * The border corner radius of the legend.
                  *
@@ -5789,7 +5715,7 @@
                      * @type  {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
                      * @since 2.2.4
                      */
-                    activeColor: palette.highlightColor100,
+                    activeColor: "#003399" /* highlightColor100 */,
                     /**
                      * The color of the inactive up or down arrow in the legend page
                      * navigation. .
@@ -5805,7 +5731,7 @@
                      * @type  {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
                      * @since 2.2.4
                      */
-                    inactiveColor: palette.neutralColor20
+                    inactiveColor: "#cccccc" /* neutralColor20 */
                 },
                 /**
                  * The inner padding of the legend box.
@@ -5881,7 +5807,7 @@
                     /**
                      * @ignore
                      */
-                    color: palette.neutralColor80,
+                    color: "#333333" /* neutralColor80 */,
                     /**
                      * @ignore
                      */
@@ -5919,7 +5845,7 @@
                     /**
                      * @ignore
                      */
-                    color: palette.neutralColor100
+                    color: "#000000" /* neutralColor100 */
                 },
                 /**
                  * CSS styles for each legend item when the corresponding series or
@@ -5940,7 +5866,7 @@
                     /**
                      * @ignore
                      */
-                    color: palette.neutralColor20
+                    color: "#cccccc" /* neutralColor20 */
                 },
                 /**
                  * Whether to apply a drop shadow to the legend. A `backgroundColor`
@@ -6244,7 +6170,7 @@
                     /**
                      * @ignore
                      */
-                    backgroundColor: palette.backgroundColor,
+                    backgroundColor: "#ffffff" /* backgroundColor */,
                     /**
                      * @ignore
                      */
@@ -6587,11 +6513,13 @@
                  * @apioption tooltip.xDateFormat
                  */
                 /**
-                 * How many decimals to show for the `point.change` value when the
-                 * `series.compare` option is set. This is overridable in each series'
-                 * tooltip options object. The default is to preserve all decimals.
+                 * How many decimals to show for the `point.change`
+                 * or the `point.cumulativeSum` value when the `series.compare`
+                 * or the `series.cumulative` option is set.
+                 * This is overridable in each series' tooltip options object.
                  *
                  * @type      {number}
+                 * @default   2
                  * @since     1.0.1
                  * @product   highstock
                  * @apioption tooltip.changeDecimals
@@ -6629,7 +6557,7 @@
                  * header will by default be guessed based on the closest data points.
                  * This member gives the default string representations used for
                  * each unit. For an overview of the replacement codes, see
-                 * [dateFormat](/class-reference/Highcharts#.dateFormat).
+                 * [dateFormat](/class-reference/Highcharts.Time#dateFormat).
                  *
                  * @see [xAxis.dateTimeLabelFormats](#xAxis.dateTimeLabelFormats)
                  *
@@ -6833,7 +6761,7 @@
                  *
                  * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
                  */
-                backgroundColor: color(palette.neutralColor3)
+                backgroundColor: color("#f7f7f7" /* neutralColor3 */)
                     // @todo: Disallow undefined as input for colors
                     .setOpacity(0.85).get(),
                 /**
@@ -6896,7 +6824,7 @@
                  */
                 style: {
                     /** @internal */
-                    color: palette.neutralColor80,
+                    color: "#333333" /* neutralColor80 */,
                     /** @internal */
                     cursor: 'default',
                     /** @internal */
@@ -7011,7 +6939,7 @@
                     /** @internal */
                     cursor: 'pointer',
                     /** @internal */
-                    color: palette.neutralColor40,
+                    color: "#999999" /* neutralColor40 */,
                     /** @internal */
                     fontSize: '9px'
                 },
@@ -7046,6 +6974,7 @@
          * @function Highcharts.getOptions
          *
          * @return {Highcharts.Options}
+         * Default options.
          */
         function getOptions() {
             return defaultOptions;
@@ -7060,10 +6989,10 @@
          * @function Highcharts.setOptions
          *
          * @param {Highcharts.Options} options
-         *        The new custom chart options.
+         * The new custom chart options.
          *
          * @return {Highcharts.Options}
-         *         Updated options.
+         * Updated options.
          */
         function setOptions(options) {
             // Copy in the default options
@@ -7338,7 +7267,6 @@
              *
              * @function Highcharts.Fx#dSetter
              *
-             * @return {void}
              */
             Fx.prototype.dSetter = function () {
                 var paths = this.paths,
@@ -7387,7 +7315,6 @@
              *
              * @function Highcharts.Fx#update
              *
-             * @return {void}
              */
             Fx.prototype.update = function () {
                 var elem = this.elem,
@@ -7426,7 +7353,6 @@
              * @param {string} unit
              *        The property unit, for example `px`.
              *
-             * @return {void}
              */
             Fx.prototype.run = function (from, to, unit) {
                 var self = this,
@@ -7448,7 +7374,8 @@
                 };
                 if (from === to && !this.elem['forceAnimate:' + this.prop]) {
                     delete options.curAnim[this.prop];
-                    if (options.complete && Object.keys(options.curAnim).length === 0) {
+                    if (options.complete &&
+                        Object.keys(options.curAnim).length === 0) {
                         options.complete.call(this.elem);
                     }
                 }
@@ -7507,7 +7434,8 @@
                 }
                 else {
                     this.pos = options.easing((t - this.startTime) / duration);
-                    this.now = this.start + ((this.end - this.start) * this.pos);
+                    this.now = this.start + ((this.end -
+                        this.start) * this.pos);
                     this.update();
                     ret = true;
                 }
@@ -7549,9 +7477,6 @@
                 /**
                  * If shifting points, prepend a dummy point to the end path.
                  * @private
-                 * @param {Highcharts.SVGPathArray} arr - array
-                 * @param {Highcharts.SVGPathArray} other - array
-                 * @return {void}
                  */
                 function prepend(arr, other) {
                     while (arr.length < fullLength) {
@@ -7587,9 +7512,6 @@
                 /**
                  * Copy and append last point until the length matches the end length.
                  * @private
-                 * @param {Highcharts.SVGPathArray} arr - array
-                 * @param {Highcharts.SVGPathArray} other - array
-                 * @return {void}
                  */
                 function append(arr, other) {
                     while (arr.length < fullLength) {
@@ -7661,7 +7583,6 @@
              *
              * @function Highcharts.Fx#fillSetter
              *
-             * @return {void}
              */
             Fx.prototype.fillSetter = function () {
                 Fx.prototype.strokeSetter.apply(this, arguments);
@@ -7671,10 +7592,9 @@
              *
              * @function Highcharts.Fx#strokeSetter
              *
-             * @return {void}
              */
             Fx.prototype.strokeSetter = function () {
-                this.elem.attr(this.prop, color(this.start).tweenTo(color(this.end), this.pos), null, true);
+                this.elem.attr(this.prop, color(this.start).tweenTo(color(this.end), this.pos), void 0, true);
             };
             /* *
              *
@@ -7917,23 +7837,34 @@
          *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
          *
          * */
-        var SVG_NS = H.SVG_NS;
+        var SVG_NS = H.SVG_NS,
+            win = H.win;
         var attr = U.attr,
             createElement = U.createElement,
-            discardElement = U.discardElement,
             error = U.error,
+            isFunction = U.isFunction,
             isString = U.isString,
             objectEach = U.objectEach,
             splat = U.splat;
+        var trustedTypes = win.trustedTypes;
         /* *
          *
          *  Constants
          *
          * */
+        // Create the trusted type policy. This should not be exposed.
+        var trustedTypesPolicy = (trustedTypes &&
+                isFunction(trustedTypes.createPolicy) &&
+                trustedTypes.createPolicy('highcharts', {
+                    createHTML: function (s) { return s; }
+                }));
+        var emptyHTML = trustedTypesPolicy ?
+                trustedTypesPolicy.createHTML('') :
+                '';
         // In IE8, DOMParser is undefined. IE9 and PhantomJS are only able to parse XML.
         var hasValidDOMParser = (function () {
                 try {
-                    return Boolean(new DOMParser().parseFromString('', 'text/html'));
+                    return Boolean(new DOMParser().parseFromString(emptyHTML, 'text/html'));
             }
             catch (e) {
                 return false;
@@ -8016,7 +7947,7 @@
              * Markup string
              */
             AST.setElementHTML = function (el, html) {
-                el.innerHTML = ''; // Clear previous
+                el.innerHTML = AST.emptyHTML; // Clear previous
                 if (html) {
                     var ast = new AST(html);
                     ast.addToDOM(el);
@@ -8041,9 +7972,12 @@
             AST.prototype.addToDOM = function (parent) {
                 /**
                  * @private
-                 * @param {Highcharts.ASTNode} subtree - HTML/SVG definition
-                 * @param {Element} [subParent] - parent node
-                 * @return {Highcharts.SVGDOMElement|Highcharts.HTMLDOMElement} The inserted node.
+                 * @param {Highcharts.ASTNode} subtree
+                 * HTML/SVG definition
+                 * @param {Element} [subParent]
+                 * parent node
+                 * @return {Highcharts.SVGDOMElement|Highcharts.HTMLDOMElement}
+                 * The inserted node.
                  */
                 function recurse(subtree, subParent) {
                     var ret;
@@ -8084,7 +8018,8 @@
                                 node = element;
                             }
                             else {
-                                error("Highcharts warning: Invalid tagName '" + tagName + "' in config");
+                                error('Highcharts warning: Invalid tagName ' +
+                                    tagName + ' in config');
                             }
                         }
                         // Add to the tree
@@ -8114,12 +8049,13 @@
                 var nodes = [];
                 markup = markup.trim();
                 var doc;
-                var body;
                 if (hasValidDOMParser) {
-                    doc = new DOMParser().parseFromString(markup, 'text/html');
+                    doc = new DOMParser().parseFromString(trustedTypesPolicy ?
+                        trustedTypesPolicy.createHTML(markup) :
+                        markup, 'text/html');
                 }
                 else {
-                    body = createElement('div');
+                    var body = createElement('div');
                     body.innerHTML = markup;
                     doc = { body: body };
                 }
@@ -8155,9 +8091,6 @@
                     addTo.push(astNode);
                 };
                 [].forEach.call(doc.body.childNodes, function (childNode) { return appendChildNodes(childNode, nodes); });
-                if (body) {
-                    discardElement(body);
-                }
                 return nodes;
             };
             /* *
@@ -8236,6 +8169,7 @@
                 'text-align',
                 'textAnchor',
                 'textLength',
+                'title',
                 'type',
                 'valign',
                 'width',
@@ -8281,6 +8215,7 @@
              */
             AST.allowedTags = [
                 'a',
+                'abbr',
                 'b',
                 'br',
                 'button',
@@ -8342,6 +8277,7 @@
                 'ul',
                 '#text'
             ];
+            AST.emptyHTML = emptyHTML;
             return AST;
         }());
         /* *
@@ -8677,7 +8613,8 @@
              * @private
              */
             function distribute(boxes, len, maxDistance) {
-                var origBoxes = boxes, // Original array will be altered with added .pos
+                // Original array will be altered with added .pos
+                var origBoxes = boxes,
                     reducedLen = origBoxes.reducedLen || len,
                     sortByRank = function (a,
                     b) {
@@ -8800,7 +8737,7 @@
 
         return RendererUtilities;
     });
-    _registerModule(_modules, 'Core/Renderer/SVG/SVGElement.js', [_modules['Core/Animation/AnimationUtilities.js'], _modules['Core/Renderer/HTML/AST.js'], _modules['Core/Color/Color.js'], _modules['Core/Globals.js'], _modules['Core/Color/Palette.js'], _modules['Core/Utilities.js']], function (A, AST, Color, H, Palette, U) {
+    _registerModule(_modules, 'Core/Renderer/SVG/SVGElement.js', [_modules['Core/Animation/AnimationUtilities.js'], _modules['Core/Renderer/HTML/AST.js'], _modules['Core/Color/Color.js'], _modules['Core/Globals.js'], _modules['Core/Utilities.js']], function (A, AST, Color, H, U) {
         /* *
          *
          *  (c) 2010-2021 Torstein Honsi
@@ -8932,7 +8869,6 @@
              *
              * @param {Highcharts.SVGDOMElement} element
              *
-             * @return {void}
              */
             SVGElement.prototype._defaultSetter = function (value, key, element) {
                 element.setAttribute(key, value);
@@ -9085,7 +9021,8 @@
                     alignByTranslate = this.alignByTranslate;
                     alignTo = this.alignTo;
                 }
-                box = pick(box, renderer[alignTo], alignTo === 'scrollablePlotBox' ? renderer.plotBox : void 0, renderer);
+                box = pick(box, renderer[alignTo], alignTo === 'scrollablePlotBox' ?
+                    renderer.plotBox : void 0, renderer);
                 // Assign variables
                 var align = alignOptions.align,
                     vAlign = alignOptions.verticalAlign;
@@ -9381,7 +9318,8 @@
                             // Let the shadow follow the main element
                             if (!this.styledMode &&
                                 this.shadows &&
-                                /^(width|height|visibility|x|y|d|transform|cx|cy|r)$/.test(key)) {
+                                /^(width|height|visibility|x|y|d|transform|cx|cy|r)$/
+                                    .test(key)) {
                                 this.updateShadows(key, val, setter);
                             }
                         }
@@ -9770,7 +9708,6 @@
              * @private
              * @function Highcharts.SVGElement#destroyShadows
              *
-             * @return {void}
              */
             SVGElement.prototype.destroyShadows = function () {
                 (this.shadows || []).forEach(function (shadow) {
@@ -10010,8 +9947,7 @@
                             bBox.height = height = ({
                                 '11px,17': 14,
                                 '13px,20': 16
-                            }[styles &&
-                                styles.fontSize + ',' + Math.round(height)] ||
+                            }[(fontSize || '') + "," + Math.round(height)] ||
                                 height);
                         }
                         // Adjust for rotated text
@@ -10337,7 +10273,7 @@
                         var childNodes = [].slice.call(textNode.childNodes);
                         for (var i = 0; i < childNodes.length; i++) {
                             var childNode = childNodes[i];
-                            if (childNode.nodeType === Node.TEXT_NODE ||
+                            if (childNode.nodeType === win.Node.TEXT_NODE ||
                                 childNode.nodeName === 'tspan') {
                                 textPathElement.appendChild(childNode);
                             }
@@ -10432,7 +10368,7 @@
                     element = this.element,
                     oldShadowOptions = this.oldShadowOptions,
                     defaultShadowOptions = {
-                        color: Palette.neutralColor100,
+                        color: "#000000" /* neutralColor100 */,
                         offsetX: this.parentInverted ? -1 : 1,
                         offsetY: this.parentInverted ? -1 : 1,
                         opacity: 0.15,
@@ -10480,7 +10416,7 @@
                         strokeWidth = (options.width * 2) + 1 - (2 * i);
                         attr(shadow, {
                             stroke: (shadowOptions.color ||
-                                Palette.neutralColor100),
+                                "#000000" /* neutralColor100 */),
                             'stroke-opacity': shadowElementOpacity * i,
                             'stroke-width': strokeWidth,
                             transform: transform,
@@ -10690,12 +10626,13 @@
              * @function Highcharts.SVGElement#translate
              *
              * @param {number} x
-             *        The x value.
+             * The x value.
              *
              * @param {number} y
-             *        The y value.
+             * The y value.
              *
              * @return {Highcharts.SVGElement}
+             * Translated element.
              */
             SVGElement.prototype.translate = function (x, y) {
                 return this.attr({
@@ -10789,7 +10726,6 @@
              *
              * @param {Highcharts.SVGDOMElement} element
              *
-             * @return {void}
              */
             SVGElement.prototype.visibilitySetter = function (value, key, element) {
                 // IE9-11 doesn't handle visibilty:inherit well, so we remove the
@@ -10805,10 +10741,6 @@
             /**
              * @private
              * @function Highcharts.SVGElement#xGetter
-             *
-             * @param {string} key
-             *
-             * @return {number|string|null}
              */
             SVGElement.prototype.xGetter = function (key) {
                 if (this.element.nodeName === 'circle') {
@@ -10824,9 +10756,6 @@
             /**
              * @private
              * @function Highcharts.SVGElement#zIndexSetter
-             * @param {number} [value]
-             * @param {string} [key]
-             * @return {boolean}
              */
             SVGElement.prototype.zIndexSetter = function (value, key) {
                 var renderer = this.renderer,
@@ -11311,7 +11240,8 @@
                         }
                     });
                     this.text.css(textStyles_1);
-                    var isWidth = 'width' in textStyles_1, isFontStyle = ('fontSize' in textStyles_1 || 'fontWeight' in textStyles_1);
+                    var isWidth = 'width' in textStyles_1, isFontStyle = ('fontSize' in textStyles_1 ||
+                            'fontWeight' in textStyles_1);
                     // Update existing text, box (#9400, #12163)
                     if (isFontStyle) {
                         this.updateTextPadding();
@@ -11481,13 +11411,15 @@
                                 this.renderer.symbol(this.symbolKey) :
                                 this.renderer.rect();
                         box.addClass(// Don't use label className for buttons
-                        (this.className === 'button' ? '' : 'highcharts-label-box') +
-                            (this.className ? ' highcharts-' + this.className + '-box' : ''));
+                        (this.className === 'button' ?
+                            '' : 'highcharts-label-box') +
+                            (this.className ?
+                                ' highcharts-' + this.className + '-box' : ''));
                         box.add(this);
                     }
                     crispAdjust = this.getCrispAdjust();
                     attribs.x = crispAdjust;
-                    attribs.y = (this.baseline ? -this.baselineOffset : 0) + crispAdjust;
+                    attribs.y = ((this.baseline ? -this.baselineOffset : 0) + crispAdjust);
                     // Apply the box attributes
                     attribs.width = Math.round(this.width);
                     attribs.height = Math.round(this.height);
@@ -11510,8 +11442,7 @@
                 if (defined(this.widthSetting) &&
                     this.bBox &&
                     (this.textAlign === 'center' || this.textAlign === 'right')) {
-                    textX += { center: 0.5, right: 1 }[this.textAlign] *
-                        (this.widthSetting - this.bBox.width);
+                    textX += { center: 0.5, right: 1 }[this.textAlign] * (this.widthSetting - this.bBox.width);
                 }
                 // update if anything changed
                 if (textX !== text.x || textY !== text.y) {
@@ -11539,7 +11470,9 @@
                     padding);
                 var paddingRight = pick(this.paddingRight,
                     padding);
-                return (this.widthSetting || this.bBox.width || 0) + paddingLeft + paddingRight;
+                return ((this.widthSetting || this.bBox.width || 0) +
+                    paddingLeft +
+                    paddingRight);
             };
             SVGLabel.prototype.xSetter = function (value) {
                 this.x = value; // for animation getter
@@ -11560,7 +11493,12 @@
              *  Static Properties
              *
              * */
-            SVGLabel.emptyBBox = { width: 0, height: 0, x: 0, y: 0 };
+            SVGLabel.emptyBBox = {
+                width: 0,
+                height: 0,
+                x: 0,
+                y: 0
+            };
             /**
              * For labels, these CSS properties are applied to the `text` node directly.
              *
@@ -11818,7 +11756,8 @@
          *
          * */
         var doc = H.doc,
-            SVG_NS = H.SVG_NS;
+            SVG_NS = H.SVG_NS,
+            win = H.win;
         var attr = U.attr,
             isString = U.isString,
             objectEach = U.objectEach,
@@ -11922,7 +11861,6 @@
              *
              * @private
              *
-             * @return {void}
              */
             TextBuilder.prototype.modifyDOM = function () {
                 var _this = this;
@@ -12040,7 +11978,7 @@
                 var modifyChildren = (function (node) {
                         var childNodes = [].slice.call(node.childNodes);
                     childNodes.forEach(function (childNode) {
-                        if (childNode.nodeType === Node.TEXT_NODE) {
+                        if (childNode.nodeType === win.Node.TEXT_NODE) {
                             modifyTextNode(childNode, node);
                         }
                         else {
@@ -12066,7 +12004,7 @@
             TextBuilder.prototype.getLineHeight = function (node) {
                 var fontSizeStyle;
                 // If the node is a text node, use its parent
-                var element = node.nodeType === Node.TEXT_NODE ?
+                var element = (node.nodeType === win.Node.TEXT_NODE) ?
                         node.parentElement :
                         node;
                 if (!this.renderer.styledMode) {
@@ -12088,22 +12026,23 @@
              *
              * @param {ASTNode[]} nodes The AST nodes
              *
-             * @return {void}
              */
             TextBuilder.prototype.modifyTree = function (nodes) {
                 var _this = this;
                 var modifyChild = function (node,
                     i) {
-                        var tagName = node.tagName;
-                    var styledMode = _this.renderer.styledMode;
-                    var attributes = node.attributes || {};
+                        var _a = node.attributes,
+                    attributes = _a === void 0 ? {} : _a,
+                    children = node.children,
+                    tagName = node.tagName,
+                    styledMode = _this.renderer.styledMode;
                     // Apply styling to text tags
                     if (tagName === 'b' || tagName === 'strong') {
                         if (styledMode) {
                             attributes['class'] = 'highcharts-strong'; // eslint-disable-line dot-notation
                         }
                         else {
-                            attributes.style = 'font-weight:bold;' + (attributes.style || '');
+                            attributes.style = ('font-weight:bold;' + (attributes.style || ''));
                         }
                     }
                     else if (tagName === 'i' || tagName === 'em') {
@@ -12111,13 +12050,14 @@
                             attributes['class'] = 'highcharts-emphasized'; // eslint-disable-line dot-notation
                         }
                         else {
-                            attributes.style = 'font-style:italic;' + (attributes.style || '');
+                            attributes.style = ('font-style:italic;' + (attributes.style || ''));
                         }
                     }
                     // Modify attributes
                     if (isString(attributes.style)) {
                         attributes.style = attributes.style.replace(/(;| |^)color([ :])/, '$1fill$2');
                     }
+                    // Handle breaks
                     if (tagName === 'br') {
                         attributes['class'] = 'highcharts-br'; // eslint-disable-line dot-notation
                         node.textContent = '\u200B'; // zero-width space
@@ -12127,14 +12067,23 @@
                             nextNode.textContent =
                                 nextNode.textContent.replace(/^ +/gm, '');
                         }
+                        // If an anchor has direct text node children, the text is unable to
+                        // wrap because there is no `getSubStringLength` function on the
+                        // element. Therefore we need to wrap the child text node or nodes
+                        // in a tspan. #16173.
+                    }
+                    else if (tagName === 'a' &&
+                        children &&
+                        children.some(function (child) { return child.tagName === '#text'; })) {
+                        node.children = [{ children: children, tagName: 'tspan' }];
                     }
                     if (tagName !== '#text' && tagName !== 'a') {
                         node.tagName = 'tspan';
                     }
                     node.attributes = attributes;
                     // Recurse
-                    if (node.children) {
-                        node.children
+                    if (children) {
+                        children
                             .filter(function (c) { return c.tagName !== '#text'; })
                             .forEach(modifyChild);
                     }
@@ -12260,7 +12209,7 @@
 
         return TextBuilder;
     });
-    _registerModule(_modules, 'Core/Renderer/SVG/SVGRenderer.js', [_modules['Core/Renderer/HTML/AST.js'], _modules['Core/Color/Color.js'], _modules['Core/Globals.js'], _modules['Core/Color/Palette.js'], _modules['Core/Renderer/RendererRegistry.js'], _modules['Core/Renderer/SVG/SVGElement.js'], _modules['Core/Renderer/SVG/SVGLabel.js'], _modules['Core/Renderer/SVG/Symbols.js'], _modules['Core/Renderer/SVG/TextBuilder.js'], _modules['Core/Utilities.js']], function (AST, Color, H, Palette, RendererRegistry, SVGElement, SVGLabel, Symbols, TextBuilder, U) {
+    _registerModule(_modules, 'Core/Renderer/SVG/SVGRenderer.js', [_modules['Core/Renderer/HTML/AST.js'], _modules['Core/Color/Color.js'], _modules['Core/Globals.js'], _modules['Core/Renderer/RendererRegistry.js'], _modules['Core/Renderer/SVG/SVGElement.js'], _modules['Core/Renderer/SVG/SVGLabel.js'], _modules['Core/Renderer/SVG/Symbols.js'], _modules['Core/Renderer/SVG/TextBuilder.js'], _modules['Core/Utilities.js']], function (AST, Color, H, RendererRegistry, SVGElement, SVGLabel, Symbols, TextBuilder, U) {
         /* *
          *
          *  (c) 2010-2021 Torstein Honsi
@@ -12471,7 +12420,7 @@
                 this.url = this.getReferenceURL();
                 // Add description
                 var desc = this.createElement('desc').add();
-                desc.element.appendChild(doc.createTextNode('Created with Highcharts 9.2.2'));
+                desc.element.appendChild(doc.createTextNode('Created with Highcharts 9.3.3'));
                 renderer.defs = this.createElement('defs').add();
                 renderer.allowHTML = allowHTML;
                 renderer.forExport = forExport;
@@ -12663,6 +12612,7 @@
              * @function Highcharts.SVGRenderer#destroy
              *
              * @return {null}
+             * Pass through value.
              */
             SVGRenderer.prototype.destroy = function () {
                 var renderer = this,
@@ -12823,11 +12773,11 @@
                 if (!styledMode) {
                     // Normal state - prepare the attributes
                     normalState = merge({
-                        fill: Palette.neutralColor3,
-                        stroke: Palette.neutralColor20,
+                        fill: "#f7f7f7" /* neutralColor3 */,
+                        stroke: "#cccccc" /* neutralColor20 */,
                         'stroke-width': 1,
                         style: {
-                            color: Palette.neutralColor80,
+                            color: "#333333" /* neutralColor80 */,
                             cursor: 'pointer',
                             fontWeight: 'normal'
                         }
@@ -12838,15 +12788,15 @@
                     delete normalState.style;
                     // Hover state
                     hoverState = merge(normalState, {
-                        fill: Palette.neutralColor10
+                        fill: "#e6e6e6" /* neutralColor10 */
                     }, AST.filterUserAttributes(hoverState || {}));
                     hoverStyle = hoverState.style;
                     delete hoverState.style;
                     // Pressed state
                     pressedState = merge(normalState, {
-                        fill: Palette.highlightColor10,
+                        fill: "#e6ebf5" /* highlightColor10 */,
                         style: {
-                            color: Palette.neutralColor100,
+                            color: "#000000" /* neutralColor100 */,
                             fontWeight: 'bold'
                         }
                     }, AST.filterUserAttributes(pressedState || {}));
@@ -12855,7 +12805,7 @@
                     // Disabled state
                     disabledState = merge(normalState, {
                         style: {
-                            color: Palette.neutralColor20
+                            color: "#cccccc" /* neutralColor20 */
                         }
                     }, AST.filterUserAttributes(disabledState || {}));
                     disabledStyle = disabledState.style;
@@ -13275,14 +13225,18 @@
                         el.setAttribute('hc-svg-href', src);
                     }
                 };
-                // optional properties
-                if (arguments.length > 1) {
-                    extend(attribs, {
-                        x: x,
-                        y: y,
-                        width: width,
-                        height: height
-                    });
+                // Optional properties (#11756)
+                if (isNumber(x)) {
+                    attribs.x = x;
+                }
+                if (isNumber(y)) {
+                    attribs.y = y;
+                }
+                if (isNumber(width)) {
+                    attribs.width = width;
+                }
+                if (isNumber(height)) {
+                    attribs.height = height;
                 }
                 var elemWrapper = this.createElement('image').attr(attribs),
                     onDummyLoad = function (e) {
@@ -13335,6 +13289,7 @@
              * Additional options, depending on the actual symbol drawn.
              *
              * @return {Highcharts.SVGElement}
+             * SVG symbol.
              */
             SVGRenderer.prototype.symbol = function (symbol, x, y, width, height, options) {
                 var ren = this,
@@ -13564,8 +13519,8 @@
                             parentVal = element.getAttribute(key);
                         for (var i = 0, tspan = void 0; i < tspans.length; i++) {
                             tspan = tspans[i];
-                            // If the x values are equal, the tspan represents a
-                            // linebreak
+                            // If the x values are equal, the tspan represents a line
+                            // break
                             if (tspan.getAttribute(key) === parentVal) {
                                 tspan.setAttribute(key, value);
                             }
@@ -13629,14 +13584,6 @@
              *
              * @private
              * @function Highcharts.SVGRenderer#rotCorr
-             *
-             * @param {number} baseline
-             *
-             * @param {number} rotation
-             *
-             * @param {boolean} [alterY]
-             *
-             * @param {Highcharts.PositionObject}
              */
             SVGRenderer.prototype.rotCorr = function (baseline, rotation, alterY) {
                 var y = baseline;
@@ -13940,7 +13887,6 @@
              *
              * @private
              * @function Highcharts.SVGRenderer#alignElements
-             * @return {void}
              */
             SVGRenderer.prototype.alignElements = function () {
                 this.alignedObjects.forEach(function (el) { return el.align(); });
@@ -14087,7 +14033,7 @@
         * The shadow color.
         * @name    Highcharts.ShadowOptionsObject#color
         * @type    {Highcharts.ColorString|undefined}
-        * @default ${palette.neutralColor100}
+        * @default #000000
         */ /**
         * The horizontal offset from the element.
         *
@@ -14270,10 +14216,12 @@
                     HTMLElement.composedClasses.push(SVGElementClass);
                     var htmlElementProto = HTMLElement.prototype,
                         svgElementProto = SVGElementClass.prototype;
-                    svgElementProto.getSpanCorrection = htmlElementProto.getSpanCorrection;
+                    svgElementProto.getSpanCorrection = htmlElementProto
+                        .getSpanCorrection;
                     svgElementProto.htmlCss = htmlElementProto.htmlCss;
                     svgElementProto.htmlGetBBox = htmlElementProto.htmlGetBBox;
-                    svgElementProto.htmlUpdateTransform = htmlElementProto.htmlUpdateTransform;
+                    svgElementProto.htmlUpdateTransform = htmlElementProto
+                        .htmlUpdateTransform;
                     svgElementProto.setSpanRotation = htmlElementProto.setSpanRotation;
                 }
                 return SVGElementClass;
@@ -14365,6 +14313,9 @@
                     whiteSpace = styles && styles.whiteSpace;
                 /** @private */
                 function getTextPxLength() {
+                    if (wrapper.textPxLength) {
+                        return wrapper.textPxLength;
+                    }
                     // Reset multiline/ellipsis in order to read width (#4928,
                     // #5417)
                     css(elem, {
@@ -14400,29 +14351,32 @@
                             wrapper.textWidth,
                             wrapper.textAlign
                         ].join(',');
-                    var baseline = void 0;
+                    var baseline = void 0,
+                        hasBoxWidthChanged = false;
                     // Update textWidth. Use the memoized textPxLength if possible, to
                     // avoid the getTextPxLength function using elem.offsetWidth.
                     // Calling offsetWidth affects rendering time as it forces layout
                     // (#7656).
-                    if (textWidth !== wrapper.oldTextWidth &&
-                        ((textWidth > wrapper.oldTextWidth) ||
-                            (wrapper.textPxLength || getTextPxLength()) > textWidth) && (
-                    // Only set the width if the text is able to word-wrap, or
-                    // text-overflow is ellipsis (#9537)
-                    /[ \-]/.test(elem.textContent || elem.innerText) ||
-                        elem.style.textOverflow === 'ellipsis')) { // #983, #1254
-                        css(elem, {
-                            width: textWidth + 'px',
-                            display: 'block',
-                            whiteSpace: whiteSpace || 'normal' // #3331
-                        });
-                        wrapper.oldTextWidth = textWidth;
-                        wrapper.hasBoxWidthChanged = true; // #8159
-                    }
-                    else {
-                        wrapper.hasBoxWidthChanged = false; // #8159
+                    if (textWidth !== wrapper.oldTextWidth) { // #983, #1254
+                        var textPxLength = getTextPxLength();
+                        if (((textWidth > wrapper.oldTextWidth) ||
+                            textPxLength > textWidth) && (
+                        // Only set the width if the text is able to word-wrap,
+                        // or text-overflow is ellipsis (#9537)
+                        /[ \-]/.test(elem.textContent || elem.innerText) ||
+                            elem.style.textOverflow === 'ellipsis')) {
+                            css(elem, {
+                                width: (textPxLength > textWidth) || rotation ?
+                                    textWidth + 'px' :
+                                    'auto',
+                                display: 'block',
+                                whiteSpace: whiteSpace || 'normal' // #3331
+                            });
+                            wrapper.oldTextWidth = textWidth;
+                            hasBoxWidthChanged = true; // #8159
+                        }
                     }
+                    wrapper.hasBoxWidthChanged = hasBoxWidthChanged; // #8159
                     // Do the calculations and DOM access only if properties changed
                     if (currentTextTransform !== wrapper.cTT) {
                         baseline = renderer.fontMetrics(elem.style.fontSize, elem).b;
@@ -14561,15 +14515,16 @@
              * @function Highcharts.SVGRenderer#html
              *
              * @param {string} str
-             *        The text of (subset) HTML to draw.
+             * The text of (subset) HTML to draw.
              *
              * @param {number} x
-             *        The x position of the text's lower left corner.
+             * The x position of the text's lower left corner.
              *
              * @param {number} y
-             *        The y position of the text's lower left corner.
+             * The y position of the text's lower left corner.
              *
              * @return {Highcharts.HTMLDOMElement}
+             * HTML element.
              */
             HTMLRenderer.prototype.html = function (str, x, y) {
                 var wrapper = this.createElement('span'), element = wrapper.element, renderer = wrapper.renderer, isSVG = renderer.isSVG, addSetters = function (gWrapper, style) {
@@ -14679,8 +14634,7 @@
                                      * @private
                                      * @param {*} value
                                      * @param {string} key
-                                     * @return {void}
-                                     */
+                                                             */
                                     function translateSetter(value, key) {
                                         parentGroup[key] = value;
                                         if (key === 'translateX') {
@@ -14703,7 +14657,9 @@
                                                 display: parentGroup.display,
                                                 opacity: parentGroup.opacity,
                                                 cursor: parentGroupStyles.cursor,
-                                                pointerEvents: parentGroupStyles.pointerEvents,
+                                                pointerEvents: (
+                                                // #5595
+                                                parentGroupStyles.pointerEvents),
                                                 visibility: parentGroup.visibility
                                                 // the top group is appended to container
                                             }, htmlGroup || container);
@@ -14768,7 +14724,7 @@
 
         return HTMLRenderer;
     });
-    _registerModule(_modules, 'Core/Axis/AxisDefaults.js', [_modules['Core/Color/Palette.js']], function (Palette) {
+    _registerModule(_modules, 'Core/Axis/AxisDefaults.js', [], function () {
         /* *
          *
          *  (c) 2010-2021 Torstein Honsi
@@ -15198,7 +15154,7 @@
                  * same axis.
                  *
                  * For an overview of the replacement codes, see
-                 * [dateFormat](/class-reference/Highcharts#.dateFormat).
+                 * [dateFormat](/class-reference/Highcharts.Time#dateFormat).
                  *
                  * Defaults to:
                  * ```js
@@ -15292,9 +15248,9 @@
                  * In Highcharts Stock, `endOnTick` is always `false` when the navigator
                  * is enabled, to prevent jumpy scrolling.
                  *
-                 * @sample {highcharts} highcharts/chart/reflow-true/
-                 *         True by default
                  * @sample {highcharts} highcharts/yaxis/endontick/
+                 *         True by default
+                 * @sample {highcharts} highcharts/yaxis/endontick-false/
                  *         False
                  * @sample {highstock} stock/demo/basic-line/
                  *         True by default
@@ -15736,7 +15692,7 @@
                      */
                     style: {
                         /** @internal */
-                        color: Palette.neutralColor60,
+                        color: "#666666" /* neutralColor60 */,
                         /** @internal */
                         cursor: 'default',
                         /** @internal */
@@ -15801,8 +15757,6 @@
                  *         Y axis max on logarithmic axis
                  * @sample {highstock} stock/xaxis/min-max/
                  *         Fixed min and max on X axis
-                 * @sample {highmaps} maps/axis/min-max/
-                 *         Pre-zoomed to a specific area
                  *
                  * @type      {number|null}
                  * @apioption xAxis.max
@@ -15857,8 +15811,6 @@
                  *         -50 with startOnTick true by default
                  * @sample {highstock} stock/xaxis/min-max/
                  *         Set min and max on X axis
-                 * @sample {highmaps} maps/axis/min-max/
-                 *         Pre-zoomed to a specific area
                  *
                  * @type      {number|null}
                  * @apioption xAxis.min
@@ -16010,8 +15962,6 @@
                  *         Minimum range of 5
                  * @sample {highstock} stock/xaxis/minrange/
                  *         Max zoom of 6 months overrides user selections
-                 * @sample {highmaps} maps/axis/minrange/
-                 *         Minimum range of 1000
                  *
                  * @type      {number}
                  * @apioption xAxis.minRange
@@ -16577,7 +16527,7 @@
                      */
                     style: {
                         /** @internal */
-                        color: Palette.neutralColor60
+                        color: "#666666" /* neutralColor60 */
                     }
                 },
                 /**
@@ -16694,7 +16644,7 @@
                  * @type    {Highcharts.ColorType}
                  * @default #f2f2f2
                  */
-                minorGridLineColor: Palette.neutralColor5,
+                minorGridLineColor: "#f2f2f2" /* neutralColor5 */,
                 /**
                  * Width of the minor, secondary grid lines.
                  *
@@ -16720,7 +16670,7 @@
                  * @type    {Highcharts.ColorType}
                  * @default #999999
                  */
-                minorTickColor: Palette.neutralColor40,
+                minorTickColor: "#999999" /* neutralColor40 */,
                 /**
                  * The color of the line marking the axis itself.
                  *
@@ -16741,7 +16691,7 @@
                  * @type    {Highcharts.ColorType}
                  * @default #ccd6eb
                  */
-                lineColor: Palette.highlightColor20,
+                lineColor: "#ccd6eb" /* highlightColor20 */,
                 /**
                  * The width of the line marking the axis itself.
                  *
@@ -16778,7 +16728,7 @@
                  * @type    {Highcharts.ColorType}
                  * @default #e6e6e6
                  */
-                gridLineColor: Palette.neutralColor10,
+                gridLineColor: "#e6e6e6" /* neutralColor10 */,
                 /**
                  * The width of the grid lines extending the ticks across the plot area.
                  * Defaults to 1 on the Y axis and 0 on the X axis, except for 3d
@@ -16836,7 +16786,7 @@
                  * @type    {Highcharts.ColorType}
                  * @default #ccd6eb
                  */
-                tickColor: Palette.highlightColor20
+                tickColor: "#ccd6eb" /* highlightColor20 */
                 // tickWidth: 1
             };
             /**
@@ -16996,9 +16946,9 @@
                  * @see [type](#chart.panning.type)
                  *
                  *
-                 * @sample {highcharts} highcharts/chart/reflow-true/
-                 *         True by default
                  * @sample {highcharts} highcharts/yaxis/endontick/
+                 *         True by default
+                 * @sample {highcharts} highcharts/yaxis/endontick-false/
                  *         False
                  * @sample {highstock} stock/demo/basic-line/
                  *         True by default
@@ -17151,8 +17101,6 @@
                  *         Y axis max on logarithmic axis
                  * @sample {highstock} stock/yaxis/min-max/
                  *         Fixed min and max on Y axis
-                 * @sample {highmaps} maps/axis/min-max/
-                 *         Pre-zoomed to a specific area
                  *
                  * @apioption yAxis.max
                  */
@@ -17163,8 +17111,6 @@
                  *         -50 with startOnTick true by default
                  * @sample {highstock} stock/yaxis/min-max/
                  *         Fixed min and max on Y axis
-                 * @sample {highmaps} maps/axis/min-max/
-                 *         Pre-zoomed to a specific area
                  *
                  * @apioption yAxis.min
                  */
@@ -17207,6 +17153,28 @@
                  * @product   highstock
                  * @apioption yAxis.scrollbar.margin
                  */
+                /* eslint-disable highcharts/doclet-apioption-last */
+                /**
+                 * Defines the position of the scrollbar. By default, it is positioned
+                 * on the opposite of the main axis (right side of the chart).
+                 * However, in the case of RTL languages could be set to `false`
+                 * which positions the scrollbar on the left.
+                 *
+                 * Works only for vertical axes.
+                 * This means yAxis in a non-inverted chart and xAxis in the inverted.
+                 *
+                 * @sample stock/yaxis/scrollbar-opposite/
+                 *         A scrollbar not on the opposite side
+                 *
+                 * @type      {boolean}
+                 * @default   true
+                 * @since 9.3.0
+                 *
+                 * @apioption yAxis.scrollbar.opposite
+                 * @apioption xAxis.scrollbar.opposite
+                 *
+                 */
+                /* eslint-enable highcharts/doclet-apioption-last */
                 /**
                  * Whether to show the scrollbar when it is fully zoomed out at max
                  * range. Setting it to `false` on the Y axis makes the scrollbar stay
@@ -17608,7 +17576,7 @@
                      */
                     style: {
                         /** @internal */
-                        color: Palette.neutralColor100,
+                        color: "#000000" /* neutralColor100 */,
                         /** @internal */
                         fontSize: '11px',
                         /** @internal */
@@ -17709,47 +17677,54 @@
             removeEvent = U.removeEvent;
         /* *
          *
-         *  Functions
+         *  Class Namespace
          *
          * */
-        /*
-         * Register event options. If an event handler is set on the options, it should
-         * be subject to Chart.update, Axis.update and Series.update. This is contrary
-         * to general handlers that are set directly using addEvent either on the class
-         * or on the instance. #6538, #6943, #10861.
-         */
-        var registerEventOptions = function (component,
-            options) {
+        var Foundation;
+        (function (Foundation) {
+            /* *
+             *
+             *  Functions
+             *
+             * */
+            /* eslint-disable valid-jsdoc */
+            /**
+             * Register event options. If an event handler is set on the options, it
+             * should be subject to Chart.update, Axis.update and Series.update. This is
+             * contrary to general handlers that are set directly using addEvent either
+             * on the class or on the instance. #6538, #6943, #10861.
+             * @private
+             */
+            function registerEventOptions(component, options) {
                 // A lookup over those events that are added by _options_ (not
                 // programmatically). These are updated through .update()
                 component.eventOptions = component.eventOptions || {};
-            // Register event listeners
-            objectEach(options.events, function (event, eventType) {
-                // If event does not exist, or is changed by the .update()
-                // function
-                if (component.eventOptions[eventType] !== event) {
-                    // Remove existing if set by option
-                    if (component.eventOptions[eventType]) {
-                        removeEvent(component, eventType, component.eventOptions[eventType]);
-                        delete component.eventOptions[eventType];
-                    }
-                    if (isFunction(event)) {
-                        component.eventOptions[eventType] = event;
-                        addEvent(component, eventType, event);
+                // Register event listeners
+                objectEach(options.events, function (event, eventType) {
+                    // If event does not exist, or is changed by the .update()
+                    // function
+                    if (component.eventOptions[eventType] !== event) {
+                        // Remove existing if set by option
+                        if (component.eventOptions[eventType]) {
+                            removeEvent(component, eventType, component.eventOptions[eventType]);
+                            delete component.eventOptions[eventType];
+                        }
+                        if (isFunction(event)) {
+                            component.eventOptions[eventType] = event;
+                            addEvent(component, eventType, event);
+                        }
                     }
-                }
-            });
-        };
+                });
+            }
+            Foundation.registerEventOptions = registerEventOptions;
+        })(Foundation || (Foundation = {}));
         /* *
          *
          *  Default Export
          *
          * */
-        var exports = {
-                registerEventOptions: registerEventOptions
-            };
 
-        return exports;
+        return Foundation;
     });
     _registerModule(_modules, 'Core/Axis/Tick.js', [_modules['Core/FormatUtilities.js'], _modules['Core/Globals.js'], _modules['Core/Utilities.js']], function (F, H, U) {
         /* *
@@ -17796,7 +17771,7 @@
          * @param {boolean} [noLabel=false]
          * Whether to disable the label or not. Defaults to false.
          *
-         * @param {object} [parameters]
+         * @param {Object} [parameters]
          * Optional parameters for the tick.
          */
         var Tick = /** @class */ (function () {
@@ -18050,7 +18025,7 @@
              * @return {Highcharts.PositionObject}
              * The tick position.
              *
-             * @fires Highcharts.Tick#event:afterGetPosition
+             * @emits Highcharts.Tick#event:afterGetPosition
              */
             Tick.prototype.getPosition = function (horiz, tickPos, tickmarkOffset, old) {
                 var axis = this.axis,
@@ -18090,9 +18065,7 @@
             };
             /**
              * Get the x, y position of the tick label
-             *
              * @private
-             * @return {Highcharts.PositionObject}
              */
             Tick.prototype.getLabelPosition = function (x, y, label, horiz, labelOptions, tickmarkOffset, index, step) {
                 var axis = this.axis,
@@ -18593,7 +18566,7 @@
 
         return Tick;
     });
-    _registerModule(_modules, 'Core/Axis/Axis.js', [_modules['Core/Animation/AnimationUtilities.js'], _modules['Core/Axis/AxisDefaults.js'], _modules['Core/Color/Color.js'], _modules['Core/Color/Palette.js'], _modules['Core/DefaultOptions.js'], _modules['Core/Foundation.js'], _modules['Core/Globals.js'], _modules['Core/Axis/Tick.js'], _modules['Core/Utilities.js']], function (A, AxisDefaults, Color, Palette, D, F, H, Tick, U) {
+    _registerModule(_modules, 'Core/Axis/Axis.js', [_modules['Core/Animation/AnimationUtilities.js'], _modules['Core/Axis/AxisDefaults.js'], _modules['Core/Color/Color.js'], _modules['Core/DefaultOptions.js'], _modules['Core/Foundation.js'], _modules['Core/Globals.js'], _modules['Core/Axis/Tick.js'], _modules['Core/Utilities.js']], function (A, AxisDefaults, Color, D, F, H, Tick, U) {
         /* *
          *
          *  (c) 2010-2021 Torstein Honsi
@@ -18742,8 +18715,8 @@
              * @param {AxisOptions} userOptions
              * Axis options.
              *
-             * @fires Highcharts.Axis#event:afterInit
-             * @fires Highcharts.Axis#event:init
+             * @emits Highcharts.Axis#event:afterInit
+             * @emits Highcharts.Axis#event:init
              */
             Axis.prototype.init = function (chart, userOptions) {
                 var isXAxis = userOptions.isX,
@@ -18779,7 +18752,8 @@
                  */
                 axis.coll = axis.coll || (isXAxis ? 'xAxis' : 'yAxis');
                 fireEvent(this, 'init', { userOptions: userOptions });
-                axis.opposite = pick(userOptions.opposite, axis.opposite); // needed in setOptions
+                // Needed in setOptions
+                axis.opposite = pick(userOptions.opposite, axis.opposite);
                 /**
                  * The side on which the axis is rendered. 0 is top, 1 is right, 2
                  * is bottom and 3 is left.
@@ -18944,7 +18918,7 @@
              * @param {Highcharts.AxisOptions} userOptions
              * Axis options.
              *
-             * @fires Highcharts.Axis#event:afterSetOptions
+             * @emits Highcharts.Axis#event:afterSetOptions
              */
             Axis.prototype.setOptions = function (userOptions) {
                 this.options = merge(AxisDefaults.defaultXAxisOptions, (this.coll === 'yAxis') && AxisDefaults.defaultYAxisOptions, [
@@ -19037,8 +19011,8 @@
              * @private
              * @function Highcharts.Axis#getSeriesExtremes
              *
-             * @fires Highcharts.Axis#event:afterGetSeriesExtremes
-             * @fires Highcharts.Axis#event:getSeriesExtremes
+             * @emits Highcharts.Axis#event:afterGetSeriesExtremes
+             * @emits Highcharts.Axis#event:getSeriesExtremes
              */
             Axis.prototype.getSeriesExtremes = function () {
                 var axis = this,
@@ -19136,26 +19110,6 @@
              *
              * @private
              * @function Highcharts.Axis#translate
-             *
-             * @param {number} val
-             * TO-DO: parameter description
-             *
-             * @param {boolean|null} [backwards]
-             * TO-DO: parameter description
-             *
-             * @param {boolean|null} [cvsCoord]
-             * TO-DO: parameter description
-             *
-             * @param {boolean|null} [old]
-             * TO-DO: parameter description
-             *
-             * @param {boolean} [handleLog]
-             * TO-DO: parameter description
-             *
-             * @param {number} [pointPlacement]
-             * TO-DO: parameter description
-             *
-             * @return {number|undefined}
              */
             Axis.prototype.translate = function (val, backwards, cvsCoord, old, handleLog, pointPlacement) {
                 var axis = (this.linkedParent || this), // #1417
@@ -19389,6 +19343,7 @@
              * @function Highcharts.Axis#getMinorTickInterval
              *
              * @return {number|"auto"|null}
+             * Legacy option
              */
             Axis.prototype.getMinorTickInterval = function () {
                 var options = this.options;
@@ -19482,7 +19437,10 @@
                 if (axis.isXAxis &&
                     typeof axis.minRange === 'undefined' &&
                     !log) {
-                    if (defined(options.min) || defined(options.max)) {
+                    if (defined(options.min) ||
+                        defined(options.max) ||
+                        defined(options.floor) ||
+                        defined(options.ceiling)) {
                         axis.minRange = null; // don't do this again
                     }
                     else {
@@ -19495,7 +19453,8 @@
                             if (xData.length > 1) {
                                 for (i = loopLength; i > 0; i--) {
                                     distance = xData[i] - xData[i - 1];
-                                    if (!closestDataRange || distance < closestDataRange) {
+                                    if (!closestDataRange ||
+                                        distance < closestDataRange) {
                                         closestDataRange = distance;
                                     }
                                 }
@@ -19550,8 +19509,6 @@
              *
              * @private
              * @function Highcharts.Axis#getClosest
-             *
-             * @return {number}
              */
             Axis.prototype.getClosest = function () {
                 var ret;
@@ -19670,7 +19627,7 @@
              * @private
              * @function Highcharts.Axis#setAxisTranslation
              *
-             * @fires Highcharts.Axis#event:afterSetAxisTranslation
+             * @emits Highcharts.Axis#event:afterSetAxisTranslation
              */
             Axis.prototype.setAxisTranslation = function () {
                 var axis = this,
@@ -19706,7 +19663,9 @@
                             if (!axis.single || hasCategories) {
                                 // TODO: series should internally set x- and y-
                                 // pointPlacement to simplify this logic.
-                                var isPointPlacementAxis = series.is('xrange') ? !isXAxis : isXAxis;
+                                var isPointPlacementAxis = series.is('xrange') ?
+                                        !isXAxis :
+                                        isXAxis;
                                 // minPointOffset is the value padding to the left of
                                 // the axis in order to make room for points with a
                                 // pointRange, typically columns. When the
@@ -19725,7 +19684,7 @@
                         });
                     }
                     // Record minPointOffset and pointRangePadding
-                    ordinalCorrection = axis.ordinal && axis.ordinal.slope && closestPointRange ?
+                    ordinalCorrection = (axis.ordinal && axis.ordinal.slope && closestPointRange) ?
                         axis.ordinal.slope / closestPointRange :
                         1; // #988, #1853
                     axis.minPointOffset = minPointOffset =
@@ -19754,8 +19713,6 @@
             /**
              * @private
              * @function Highcharts.Axis#minFromRange
-             *
-             * @return {number|undefined}
              */
             Axis.prototype.minFromRange = function () {
                 var axis = this;
@@ -19771,7 +19728,7 @@
              * @param {boolean} secondPass
              * TO-DO: parameter description
              *
-             * @fires Highcharts.Axis#event:foundExtremes
+             * @emits Highcharts.Axis#event:foundExtremes
              */
             Axis.prototype.setTickInterval = function (secondPass) {
                 var axis = this,
@@ -19786,8 +19743,10 @@
                 var maxPadding = options.maxPadding,
                     minPadding = options.minPadding,
                     length,
-                    linkedParentExtremes,
-                    tickIntervalOption = options.tickInterval,
+                    linkedParentExtremes, 
+                    // Only non-negative tickInterval is valid, #12961
+                    tickIntervalOption = isNumber(options.tickInterval) && options.tickInterval >= 0 ?
+                        options.tickInterval : void 0,
                     threshold = isNumber(axis.threshold) ? axis.threshold : null,
                     thresholdMin,
                     thresholdMax,
@@ -19961,15 +19920,19 @@
                 // This is in turn needed in order to find tick positions in ordinal
                 // axes.
                 if (isXAxis && !secondPass) {
+                    var hasExtemesChanged_1 = axis.min !== (axis.old && axis.old.min) ||
+                            axis.max !== (axis.old && axis.old.max);
                     // First process all series assigned to that axis.
                     axis.series.forEach(function (series) {
                         // Allows filtering out points outside the plot area.
-                        series.forceCrop = series.forceCropping && series.forceCropping();
-                        series.processData(axis.min !== (axis.old && axis.old.min) ||
-                            axis.max !== (axis.old && axis.old.max));
+                        series.forceCrop = (series.forceCropping &&
+                            series.forceCropping());
+                        series.processData(hasExtemesChanged_1);
                     });
-                    // Then apply grouping if needed.
-                    fireEvent(this, 'postProcessData');
+                    // Then apply grouping if needed. The hasExtemesChanged helps to
+                    // decide if the data grouping should be skipped in the further
+                    // calculations #16319.
+                    fireEvent(this, 'postProcessData', { hasExtemesChanged: hasExtemesChanged_1 });
                 }
                 // set the translation factor used in translate function
                 axis.setAxisTranslation();
@@ -20013,7 +19976,7 @@
              * @private
              * @function Highcharts.Axis#setTickPositions
              *
-             * @fires Highcharts.Axis#event:afterSetTickPositions
+             * @emits Highcharts.Axis#event:afterSetTickPositions
              */
             Axis.prototype.setTickPositions = function () {
                 var axis = this,
@@ -20022,8 +19985,8 @@
                     minorTickIntervalOption = this.getMinorTickInterval(),
                     hasVerticalPanning = this.hasVerticalPanning(),
                     isColorAxis = this.coll === 'colorAxis',
-                    startOnTick = (isColorAxis || !hasVerticalPanning) && options.startOnTick,
-                    endOnTick = (isColorAxis || !hasVerticalPanning) && options.endOnTick;
+                    startOnTick = ((isColorAxis || !hasVerticalPanning) && options.startOnTick),
+                    endOnTick = ((isColorAxis || !hasVerticalPanning) && options.endOnTick);
                 var tickPositions,
                     tickPositioner = options.tickPositioner;
                 // Set the tickmarkOffset
@@ -20270,7 +20233,9 @@
                     axis.softThreshold ? 0 : null);
                 var len,
                     i;
-                if (axis.hasData() && isNumber(axis.min) && isNumber(axis.max)) { // #14769
+                if (axis.hasData() &&
+                    isNumber(axis.min) &&
+                    isNumber(axis.max)) { // #14769
                     if (currentTickAmount < tickAmount) {
                         while (tickPositions.length < tickAmount) {
                             // Extend evenly for both sides unless we're on the
@@ -20322,7 +20287,7 @@
              * @private
              * @function Highcharts.Axis#setScale
              *
-             * @fires Highcharts.Axis#event:afterSetScale
+             * @emits Highcharts.Axis#event:afterSetScale
              */
             Axis.prototype.setScale = function () {
                 var axis = this;
@@ -20391,8 +20356,6 @@
              *         Set extremes off ticks
              * @sample stock/members/axis-setextremes/
              *         Set extremes in Highcharts Stock
-             * @sample maps/members/axis-setextremes/
-             *         Set extremes in Highmaps
              *
              * @function Highcharts.Axis#setExtremes
              *
@@ -20412,7 +20375,7 @@
              * @param {*} [eventArguments]
              * Arguments to be accessed in event handler.
              *
-             * @fires Highcharts.Axis#event:setExtremes
+             * @emits Highcharts.Axis#event:setExtremes
              */
             Axis.prototype.setExtremes = function (newMin, newMax, redraw, animation, eventArguments) {
                 var axis = this,
@@ -20442,14 +20405,6 @@
              *
              * @private
              * @function Highcharts.Axis#zoom
-             *
-             * @param {number} newMin
-             * TO-DO: parameter description
-             *
-             * @param {number} newMax
-             * TO-DO: parameter description
-             *
-             * @return {boolean}
              */
             Axis.prototype.zoom = function (newMin, newMax) {
                 var axis = this,
@@ -20544,8 +20499,6 @@
              *
              * @sample highcharts/members/axis-getextremes/
              *         Report extremes by click on a button
-             * @sample maps/members/axis-getextremes/
-             *         Get extremes in Highmaps
              *
              * @function Highcharts.Axis#getExtremes
              *
@@ -20662,8 +20615,6 @@
              *
              * @private
              * @function Highcharts.Axis#labelMetrics
-             *
-             * @return {Highcharts.FontMetricsObject}
              */
             Axis.prototype.labelMetrics = function () {
                 var index = this.tickPositions && this.tickPositions[0] || 0;
@@ -20676,8 +20627,6 @@
              *
              * @private
              * @function Highcharts.Axis#unsquish
-             *
-             * @return {number}
              */
             Axis.prototype.unsquish = function () {
                 var labelOptions = this.options.labels,
@@ -21039,18 +20988,21 @@
              * @private
              * @function Highcharts.Axis#getOffset
              *
-             * @fires Highcharts.Axis#event:afterGetOffset
+             * @emits Highcharts.Axis#event:afterGetOffset
              */
             Axis.prototype.getOffset = function () {
                 var _this = this;
                 var axis = this,
                     chart = axis.chart,
-                    renderer = chart.renderer,
-                    options = axis.options,
-                    tickPositions = axis.tickPositions,
-                    ticks = axis.ticks,
                     horiz = axis.horiz,
+                    options = axis.options,
                     side = axis.side,
+                    ticks = axis.ticks,
+                    tickPositions = axis.tickPositions,
+                    coll = axis.coll,
+                    axisParent = axis.axisParent // Used in color axis
+                    ,
+                    renderer = chart.renderer,
                     invertedSide = (chart.inverted && !axis.isZAxis ?
                         [1, 0, 3, 2][side] :
                         side),
@@ -21060,9 +21012,8 @@
                     axisOffset = chart.axisOffset,
                     clipOffset = chart.clipOffset,
                     directionFactor = [-1, 1, 1, -1][side],
-                    className = options.className,
-                    axisParent = axis.axisParent; // Used in color axis
-                    var showAxis,
+                    className = options.className;
+                var showAxis,
                     titleOffset = 0,
                     titleOffsetOption,
                     titleMargin = 0,
@@ -21079,7 +21030,7 @@
                         suffix,
                         zIndex) { return renderer.g(name)
                             .attr({ zIndex: zIndex })
-                            .addClass("highcharts-" + _this.coll.toLowerCase() + suffix + " " +
+                            .addClass("highcharts-" + coll.toLowerCase() + suffix + " " +
                             (_this.isRadial ? "highcharts-radial-axis" + suffix + " " : '') +
                             (className || ''))
                             .add(axisParent); };
@@ -21157,21 +21108,23 @@
                 }
                 // Due to GridAxis.tickSize, tickSize should be calculated after ticks
                 // has rendered.
-                var tickSize = this.tickSize('tick');
-                axisOffset[side] = Math.max(axisOffset[side], (axis.axisTitleMargin || 0) + titleOffset +
-                    directionFactor * axis.offset, labelOffsetPadded, // #3027
-                tickPositions && tickPositions.length && tickSize ?
-                    tickSize[0] + directionFactor * axis.offset :
-                    0 // #4866
-                );
-                // Decide the clipping needed to keep the graph inside
-                // the plot area and axis lines
-                var clip = options.offset ?
-                        0 :
-                        // #4308, #4371:
-                        Math.floor(axis.axisLine.strokeWidth() / 2) * 2;
-                clipOffset[invertedSide] =
-                    Math.max(clipOffset[invertedSide], clip);
+                if (coll !== 'colorAxis') {
+                    var tickSize = this.tickSize('tick');
+                    axisOffset[side] = Math.max(axisOffset[side], (axis.axisTitleMargin || 0) + titleOffset +
+                        directionFactor * axis.offset, labelOffsetPadded, // #3027
+                    tickPositions && tickPositions.length && tickSize ?
+                        tickSize[0] + directionFactor * axis.offset :
+                        0 // #4866
+                    );
+                    // Decide the clipping needed to keep the graph inside
+                    // the plot area and axis lines
+                    var clip = !axis.axisLine || options.offset ?
+                            0 :
+                            // #4308, #4371:
+                            Math.floor(axis.axisLine.strokeWidth() / 2) * 2;
+                    clipOffset[invertedSide] =
+                        Math.max(clipOffset[invertedSide], clip);
+                }
                 fireEvent(this, 'afterGetOffset');
             };
             /**
@@ -21362,7 +21315,7 @@
              * @private
              * @function Highcharts.Axis#render
              *
-             * @fires Highcharts.Axis#event:afterRender
+             * @emits Highcharts.Axis#event:afterRender
              */
             Axis.prototype.render = function () {
                 var axis = this,
@@ -21453,7 +21406,8 @@
                         (options.plotLines || [])
                             .concat(options.plotBands || [])
                             .forEach(function (plotLineOptions) {
-                            axis.addPlotBandOrLine(plotLineOptions);
+                            axis
+                                .addPlotBandOrLine(plotLineOptions);
                         });
                     }
                 } // end if hasData
@@ -21553,8 +21507,6 @@
              *
              * @private
              * @function Highcharts.Axis#getKeepProps
-             *
-             * @return {Array<string>}
              */
             Axis.prototype.getKeepProps = function () {
                 return (this.keepProps || Axis.keepProps);
@@ -21620,8 +21572,8 @@
              * @param {Highcharts.Point} [point]
              * The Point object if the crosshair snaps to points.
              *
-             * @fires Highcharts.Axis#event:afterDrawCrosshair
-             * @fires Highcharts.Axis#event:drawCrosshair
+             * @emits Highcharts.Axis#event:afterDrawCrosshair
+             * @emits Highcharts.Axis#event:drawCrosshair
              */
             Axis.prototype.drawCrosshair = function (e, point) {
                 var options = this.crosshair,
@@ -21705,10 +21657,10 @@
                                 stroke: options.color ||
                                     (categorized ?
                                         Color
-                                            .parse(Palette.highlightColor20)
+                                            .parse("#ccd6eb" /* highlightColor20 */)
                                             .setOpacity(0.25)
                                             .get() :
-                                        Palette.neutralColor20),
+                                        "#cccccc" /* neutralColor20 */),
                                 'stroke-width': pick(options.width, 1)
                             }).css({
                                 'pointer-events': 'none'
@@ -21748,8 +21700,6 @@
              *
              * @private
              * @function Highcharts.Axis#hasVerticalPanning
-             *
-             * @return {boolean}
              */
             Axis.prototype.hasVerticalPanning = function () {
                 var panningOptions = this.chart.options.chart.panning;
@@ -21765,8 +21715,6 @@
             *
             * @param {unknown} value
             * The axis value
-            *
-            * @return {boolean}
             */
             Axis.prototype.validatePositiveValue = function (value) {
                 return isNumber(value) && value > 0;
@@ -21876,7 +21824,14 @@
             Axis.defaultOptions = AxisDefaults.defaultXAxisOptions;
             // Properties to survive after destroy, needed for Axis.update (#4317,
             // #5773, #5881).
-            Axis.keepProps = ['extKey', 'hcEvents', 'names', 'series', 'userMax', 'userMin'];
+            Axis.keepProps = [
+                'extKey',
+                'hcEvents',
+                'names',
+                'series',
+                'userMax',
+                'userMin'
+            ];
             return Axis;
         }());
         /* *
@@ -22177,19 +22132,12 @@
              *
              * @private
              * @function Highcharts.Axis#getTimeTicks
-             *
              * @param {Highcharts.TimeNormalizeObject} normalizedInterval
              * The interval in axis values (ms) and thecount.
-             *
              * @param {number} min
              * The minimum in axis values.
-             *
              * @param {number} max
              * The maximum in axis values.
-             *
-             * @param {number} startOfWeek
-             *
-             * @return {Highcharts.AxisTickPositionsArray}
              */
             function getTimeTicks() {
                 return this.chart.time.getTimeTicks.apply(this.chart.time, arguments);
@@ -22239,8 +22187,10 @@
                  */
                 Additions.prototype.normalizeTimeTickInterval = function (tickInterval, unitsOption) {
                     var units = (unitsOption || [[
+                                // unit name
                                 'millisecond',
-                                [1, 2, 5, 10, 20, 25, 50, 100, 200, 500] // allowed multiples
+                                // allowed multiples
+                                [1, 2, 5, 10, 20, 25, 50, 100, 200, 500]
                             ],
                         [
                                 'second',
@@ -22313,12 +22263,6 @@
                  * point range on the axis.
                  *
                  * @private
-                 *
-                 * @param {number} x
-                 *
-                 * @param {Highcharts.Dictionary<string>} dateTimeLabelFormats
-                 *
-                 * @return {string}
                  */
                 Additions.prototype.getXDateFormat = function (x, dateTimeLabelFormats) {
                     var axis = this.axis;
@@ -22745,13 +22689,8 @@
                  *
                  * @private
                  * @function Highcharts.Axis#addPlotBandOrLine
-                 *
                  * @param {Highcharts.AxisPlotBandsOptions|Highcharts.AxisPlotLinesOptions} options
                  * The plotBand or plotLine configuration object.
-                 *
-                 * @param {"plotBands"|"plotLines"} [coll]
-                 *
-                 * @return {Highcharts.PlotLineOrBand|undefined}
                  */
                 Additions.prototype.addPlotBandOrLine = function (options, coll) {
                     var _this = this;
@@ -22858,7 +22797,7 @@
 
         return PlotLineOrBandAxis;
     });
-    _registerModule(_modules, 'Core/Axis/PlotLineOrBand/PlotLineOrBand.js', [_modules['Core/Color/Palette.js'], _modules['Core/Axis/PlotLineOrBand/PlotLineOrBandAxis.js'], _modules['Core/Utilities.js']], function (Palette, PlotLineOrBandAxis, U) {
+    _registerModule(_modules, 'Core/Axis/PlotLineOrBand/PlotLineOrBand.js', [_modules['Core/Axis/PlotLineOrBand/PlotLineOrBandAxis.js'], _modules['Core/Utilities.js']], function (PlotLineOrBandAxis, U) {
         /* *
          *
          *  (c) 2010-2021 Torstein Honsi
@@ -22964,7 +22903,7 @@
                 // Set the presentational attributes
                 if (!axis.chart.styledMode) {
                     if (isLine) {
-                        attribs.stroke = color || Palette.neutralColor40;
+                        attribs.stroke = color || "#999999" /* neutralColor40 */;
                         attribs['stroke-width'] = pick(options.width, 1);
                         if (options.dashStyle) {
                             attribs.dashstyle =
@@ -22972,7 +22911,7 @@
                         }
                     }
                     else if (isBand) { // plot band
-                        attribs.fill = color || Palette.highlightColor10;
+                        attribs.fill = color || "#e6ebf5" /* highlightColor10 */;
                         if (options.borderWidth) {
                             attribs.stroke = options.borderColor;
                             attribs['stroke-width'] = options.borderWidth;
@@ -23237,7 +23176,7 @@
          *         Plot band on Y axis
          *
          * @type      {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
-         * @default   ${palette.highlightColor10}
+         * @default   #e6ebf5
          * @apioption xAxis.plotBands.color
          */
         /**
@@ -23485,7 +23424,7 @@
          *         Plot line on Y axis
          *
          * @type      {Highcharts.ColorString}
-         * @default   ${palette.neutralColor40}
+         * @default   #999999
          * @apioption xAxis.plotLines.color
          */
         /**
@@ -23762,7 +23701,7 @@
 
         return PlotLineOrBand;
     });
-    _registerModule(_modules, 'Core/Tooltip.js', [_modules['Core/FormatUtilities.js'], _modules['Core/Globals.js'], _modules['Core/Color/Palette.js'], _modules['Core/Renderer/RendererUtilities.js'], _modules['Core/Renderer/RendererRegistry.js'], _modules['Core/Utilities.js']], function (F, H, palette, R, RendererRegistry, U) {
+    _registerModule(_modules, 'Core/Tooltip.js', [_modules['Core/FormatUtilities.js'], _modules['Core/Globals.js'], _modules['Core/Renderer/RendererUtilities.js'], _modules['Core/Renderer/RendererRegistry.js'], _modules['Core/Utilities.js']], function (F, H, R, RendererRegistry, U) {
         /* *
          *
          *  (c) 2010-2021 Torstein Honsi
@@ -23814,7 +23753,13 @@
                  *
                  * */
                 function Tooltip(chart, options) {
-                    this.container = void 0;
+                    /* *
+                     *
+                     *  Properties
+                     *
+                     * */
+                    this.allowShared = true;
+                this.container = void 0;
                 this.crosshairs = [];
                 this.distance = 0;
                 this.isHidden = true;
@@ -23888,8 +23833,6 @@
              *
              * @private
              * @function Highcharts.Tooltip#bodyFormatter
-             * @param {Array<(Highcharts.Point|Highcharts.Series)>} items
-             * @return {Array<string>}
              */
             Tooltip.prototype.bodyFormatter = function (items) {
                 return items.map(function (item) {
@@ -23906,7 +23849,7 @@
              * @function Highcharts.Tooltip#cleanSplit
              *
              * @param {boolean} [force]
-             *        Force destroy all tooltips.
+             * Force destroy all tooltips.
              */
             Tooltip.prototype.cleanSplit = function (force) {
                 this.chart.series.forEach(function (series) {
@@ -23926,10 +23869,6 @@
              * the context here is an object holding point, series, x, y etc.
              *
              * @function Highcharts.Tooltip#defaultFormatter
-             *
-             * @param {Highcharts.Tooltip} tooltip
-             *
-             * @return {Array<string>}
              */
             Tooltip.prototype.defaultFormatter = function (tooltip) {
                 var items = this.points || splat(this);
@@ -23953,7 +23892,7 @@
                     this.label = this.label.destroy();
                 }
                 if (this.split && this.tt) {
-                    this.cleanSplit(this.chart, true);
+                    this.cleanSplit(true);
                     this.tt = this.tt.destroy();
                 }
                 if (this.renderer) {
@@ -23969,12 +23908,6 @@
              *
              * @private
              * @function Highcharts.Tooltip#getAnchor
-             *
-             * @param {Highcharts.Point|Array<Highcharts.Point>} points
-             *
-             * @param {Highcharts.PointerEventObject} [mouseEvent]
-             *
-             * @return {Array<number>}
              */
             Tooltip.prototype.getAnchor = function (points, mouseEvent) {
                 var chart = this.chart,
@@ -24019,8 +23952,8 @@
                                 plotY += yAxis.pos - plotTop;
                             }
                             else { // #14771
-                                plotX += plotTop + chart.plotHeight - xAxis.len - xAxis.pos;
-                                plotY += plotLeft + chart.plotWidth - yAxis.len - yAxis.pos;
+                                plotX += (plotTop + chart.plotHeight - xAxis.len - xAxis.pos);
+                                plotY += (plotLeft + chart.plotWidth - yAxis.len - yAxis.pos);
                             }
                         }
                     });
@@ -24047,17 +23980,21 @@
              * Creates the Tooltip label element if it does not exist, then returns it.
              *
              * @function Highcharts.Tooltip#getLabel
+             *
              * @return {Highcharts.SVGElement}
+             * Tooltip label
              */
             Tooltip.prototype.getLabel = function () {
                 var tooltip = this,
                     styledMode = this.chart.styledMode,
                     options = this.options,
+                    doSplit = this.split && this.allowShared,
                     className = ('tooltip' + (defined(options.className) ?
                         ' ' + options.className :
                         '')),
                     pointerEvents = (options.style.pointerEvents ||
-                        (!this.followPointer && options.stickOnContact ? 'auto' : 'none')),
+                        (!this.followPointer &&
+                            options.stickOnContact ? 'auto' : 'none')),
                     onMouseEnter = function () {
                         tooltip.inContact = true;
                 }, onMouseLeave = function (e) {
@@ -24073,6 +24010,14 @@
                 };
                 var container,
                     renderer = this.chart.renderer;
+                // If changing from a split tooltip to a non-split tooltip, we must
+                // destroy it in order to get the SVG right. #13868.
+                if (tooltip.label) {
+                    var wasSplit = !tooltip.label.hasClass('highcharts-label');
+                    if ((doSplit && !wasSplit) || (!doSplit && wasSplit)) {
+                        tooltip.destroy();
+                    }
+                }
                 if (!this.label) {
                     if (this.outside) {
                         var chartStyle = this.chart.options.chart.style,
@@ -24107,7 +24052,7 @@
                         this.renderer = renderer = new Renderer(container, 0, 0, chartStyle, void 0, void 0, renderer.styledMode);
                     }
                     // Create the label
-                    if (this.split) {
+                    if (doSplit) {
                         this.label = renderer.g(className);
                     }
                     else {
@@ -24165,14 +24110,6 @@
              *
              * @private
              * @function Highcharts.Tooltip#getPosition
-             *
-             * @param {number} boxWidth
-             *
-             * @param {number} boxHeight
-             *
-             * @param {Highcharts.Point} point
-             *
-             * @return {Highcharts.PositionObject}
              */
             Tooltip.prototype.getPosition = function (boxWidth, boxHeight, point) {
                 var chart = this.chart,
@@ -24226,8 +24163,17 @@
                     ]);
                 };
                 var first = buildDimensionArray('y'), second = buildDimensionArray('x'), swapped;
+                // Handle negative points or reversed axis (#13780)
+                var flipped = !!point.negative;
+                if (!chart.polar &&
+                    chart.hoverSeries &&
+                    chart.hoverSeries.yAxis &&
+                    chart.hoverSeries.yAxis.reversed) {
+                    flipped = !flipped;
+                }
                 // The far side is right or bottom
-                var preferFarSide = !this.followPointer && pick(point.ttBelow, !chart.inverted === !!point.negative), // #4984
+                var preferFarSide = !this.followPointer &&
+                        pick(point.ttBelow, !chart.inverted === flipped), // #4984
                     /*
                      * Handle the preferred dimension. When the preferred dimension is
                      * tooltip on top or bottom of the point,
@@ -24529,17 +24475,19 @@
                     return;
                 }
                 U.clearTimeout(this.hideTimer);
+                // A switch saying if this specific tooltip configuration allows shared
+                // or split modes
+                tooltip.allowShared = !(!isArray(pointOrPoints) &&
+                    pointOrPoints.series &&
+                    pointOrPoints.series.noSharedTooltip);
                 // get the reference point coordinates (pie charts use tooltipPos)
-                tooltip.followPointer = !tooltip.split && point.series.tooltipOptions.followPointer;
+                tooltip.followPointer = (!tooltip.split && point.series.tooltipOptions.followPointer);
                 var anchor = tooltip.getAnchor(pointOrPoints,
                     mouseEvent),
                     x = anchor[0],
                     y = anchor[1];
                 // shared tooltip, array is sent over
-                if (shared &&
-                    !(!isArray(pointOrPoints) &&
-                        pointOrPoints.series &&
-                        pointOrPoints.series.noSharedTooltip)) {
+                if (shared && tooltip.allowShared) {
                     chart.pointer.applyInactiveState(points);
                     // Now set hover state for the choosen ones:
                     points.forEach(function (item) {
@@ -24568,20 +24516,22 @@
                 }
                 else {
                     // update text
-                    if (tooltip.split) {
+                    if (tooltip.split && tooltip.allowShared) { // #13868
                         this.renderSplit(text, points);
                     }
                     else {
-                        var checkX = x;
-                        var checkY = y;
+                        var checkX_1 = x;
+                        var checkY_1 = y;
                         if (mouseEvent && chart.pointer.isDirectTouch) {
-                            checkX = mouseEvent.chartX - chart.plotLeft;
-                            checkY = mouseEvent.chartY - chart.plotTop;
+                            checkX_1 = mouseEvent.chartX - chart.plotLeft;
+                            checkY_1 = mouseEvent.chartY - chart.plotTop;
                         }
                         // #11493, #13095
                         if (chart.polar ||
                             currentSeries.options.clip === false ||
-                            currentSeries.shouldShowTooltip(checkX, checkY)) {
+                            points.some(function (p) {
+                                return p.series.shouldShowTooltip(checkX_1, checkY_1);
+                            })) {
                             var label = tooltip.getLabel();
                             // Prevent the tooltip from flowing over the chart box
                             // (#6659)
@@ -24604,7 +24554,7 @@
                                     stroke: (options.borderColor ||
                                         point.color ||
                                         currentSeries.color ||
-                                        palette.neutralColor60)
+                                        "#666666" /* neutralColor60 */)
                                 });
                             }
                             tooltip.updatePosition({
@@ -24665,9 +24615,10 @@
                     options = tooltip.options,
                     positioner = tooltip.options.positioner;
                 // The area which the tooltip should be limited to. Limit to scrollable
-                // plot area if enabled, otherwise limit to the chart container.
-                // If outside is true it should be the whole viewport
-                var bounds = tooltip.outside && typeof scrollablePixelsX !== 'number' ?
+                // plot area if enabled, otherwise limit to the chart container. If
+                // outside is true it should be the whole viewport
+                var bounds = (tooltip.outside &&
+                        typeof scrollablePixelsX !== 'number') ?
                         doc.documentElement.getBoundingClientRect() : {
                         left: scrollLeft,
                         right: scrollLeft + chartWidth,
@@ -24688,7 +24639,7 @@
                  *
                  * @private
                  * @param {Highcharts.Point} point The point related to the tooltip
-                 * @return {object} Returns an object with anchorX and anchorY
+                 * @return {Object} Returns an object with anchorX and anchorY
                  */
                 function getAnchor(point) {
                     var isHeader = point.isHeader,
@@ -24803,7 +24754,7 @@
                             stroke: (options.borderColor ||
                                 point.color ||
                                 series.color ||
-                                palette.neutralColor80)
+                                "#333333" /* neutralColor80 */)
                         });
                     }
                     return tt;
@@ -24880,13 +24831,14 @@
                     }
                     return boxes;
                 }, []);
-                // Realign the tooltips towards the right if there is not enough
-                // space to the left and there is space to to the right
+                // Realign the tooltips towards the right if there is not enough space
+                // to the left and there is space to to the right
                 if (!positioner && boxes.some(function (box) {
                     // Always realign if the beginning of a label is outside bounds
                     var outside = tooltip.outside;
                     var boxStart = (outside ? chartLeft : 0) + box.anchorX;
-                    if (boxStart < bounds.left && boxStart + box.boxWidth < bounds.right) {
+                    if (boxStart < bounds.left &&
+                        boxStart + box.boxWidth < bounds.right) {
                         return true;
                     }
                     // Otherwise, check if there is more space available to the right
@@ -24924,7 +24876,9 @@
                         if (tooltip.outside && chartLeft + x < boxExtremes.left) {
                             boxExtremes.left = chartLeft + x;
                         }
-                        if (!isHeader && tooltip.outside && boxExtremes.left + boxWidth > boxExtremes.right) {
+                        if (!isHeader &&
+                            tooltip.outside &&
+                            boxExtremes.left + boxWidth > boxExtremes.right) {
                             boxExtremes.right = chartLeft + x;
                         }
                     }
@@ -25058,9 +25012,6 @@
              *
              * @private
              * @function Highcharts.Tooltip#tooltipFooterHeaderFormatter
-             * @param {Highcharts.PointLabelObject} labelConfig
-             * @param {boolean} [isFooter]
-             * @return {string}
              */
             Tooltip.prototype.tooltipFooterHeaderFormatter = function (labelConfig, isFooter) {
                 var series = labelConfig.series,
@@ -25469,7 +25420,9 @@
                 options = Point.prototype.optionsToObject.call(this, options);
                 // copy options directly to point
                 extend(point, options);
-                point.options = point.options ? extend(point.options, options) : options;
+                point.options = point.options ?
+                    extend(point.options, options) :
+                    options;
                 // Since options are copied into the Point instance, some accidental
                 // options must be shielded (#5681)
                 if (options.group) {
@@ -25611,7 +25564,7 @@
              * @param {Highcharts.EventCallbackFunction<Highcharts.Point>|Function} [defaultFunction]
              *        Default event handler.
              *
-             * @fires Highcharts.Point#event:*
+             * @emits Highcharts.Point#event:*
              */
             Point.prototype.firePointEvent = function (eventType, eventArgs, defaultFunction) {
                 var point = this,
@@ -25662,8 +25615,6 @@
              *
              * @private
              * @function Highcharts.Point#getGraphicalProps
-             * @param {Highcharts.Dictionary<number>} [kinds]
-             * @return {Highcharts.PointGraphicalProps}
              */
             Point.prototype.getGraphicalProps = function (kinds) {
                 var point = this,
@@ -25762,8 +25713,7 @@
             /**
              * Utility to check if point has new shape type. Used in column series and
              * all others that are based on column series.
-             *
-             * @return boolean|undefined
+             * @private
              */
             Point.prototype.hasNewShapeType = function () {
                 var point = this;
@@ -25789,7 +25739,7 @@
              * @return {Highcharts.Point}
              *         The Point instance.
              *
-             * @fires Highcharts.Point#event:afterInit
+             * @emits Highcharts.Point#event:afterInit
              */
             Point.prototype.init = function (series, options, x) {
                 this.series = series;
@@ -25808,13 +25758,14 @@
              * transformed to `{ y: 10 }`, and an array config like `[1, 10]` in a
              * scatter series will be transformed to `{ x: 1, y: 10 }`.
              *
+             * @deprecated
              * @function Highcharts.Point#optionsToObject
              *
              * @param {Highcharts.PointOptionsType} options
-             *        The input option.
+             * Series data options.
              *
              * @return {Highcharts.Dictionary<*>}
-             *         Transformed options.
+             * Transformed point options.
              */
             Point.prototype.optionsToObject = function (options) {
                 var series = this.series,
@@ -25874,7 +25825,6 @@
             /**
              * @private
              * @function Highcharts.Point#resolveColor
-             * @return {void}
              */
             Point.prototype.resolveColor = function () {
                 var series = this.series,
@@ -26009,7 +25959,7 @@
              *        Whether to apply animation, and optionally animation
              *        configuration.
              *
-             * @fires Highcharts.Point#event:update
+             * @emits Highcharts.Point#event:update
              */
             Point.prototype.update = function (options, redraw, animation, runEvent) {
                 var point = this,
@@ -26027,7 +25977,9 @@
                     // Update visuals, #4146
                     // Handle dummy graphic elements for a11y, #12718
                     var hasDummyGraphic = graphic && point.hasDummyGraphic;
-                    var shouldDestroyGraphic = point.y === null ? !hasDummyGraphic : hasDummyGraphic;
+                    var shouldDestroyGraphic = point.y === null ?
+                            !hasDummyGraphic :
+                            hasDummyGraphic;
                     if (graphic && shouldDestroyGraphic) {
                         point.graphic = graphic.destroy();
                         delete point.hasDummyGraphic;
@@ -26130,8 +26082,8 @@
              * is `true`, selected points are accumulated on Control, Shift or Cmd
              * clicking the point.
              *
-             * @fires Highcharts.Point#event:select
-             * @fires Highcharts.Point#event:unselect
+             * @emits Highcharts.Point#event:select
+             * @emits Highcharts.Point#event:unselect
              */
             Point.prototype.select = function (selected, accumulate) {
                 var point = this,
@@ -26200,7 +26152,7 @@
              * events.
              *
              * @function Highcharts.Point#onMouseOut
-             * @fires Highcharts.Point#event:mouseOut
+             * @emits Highcharts.Point#event:mouseOut
              */
             Point.prototype.onMouseOut = function () {
                 var point = this,
@@ -26247,7 +26199,7 @@
              * @param {boolean} [move]
              *        State for animation.
              *
-             * @fires Highcharts.Point#event:afterSetState
+             * @emits Highcharts.Point#event:afterSetState
              */
             Point.prototype.setState = function (state, move) {
                 var point = this,
@@ -26308,8 +26260,9 @@
                         pointAttribs = series.pointAttribs(point, state);
                         pointAttribsAnimation = pick(chart.options.chart.animation, stateOptions.animation);
                         // Some inactive points (e.g. slices in pie) should apply
-                        // oppacity also for it's labels
-                        if (series.options.inactiveOtherPoints && isNumber(pointAttribs.opacity)) {
+                        // opacity also for their labels
+                        if (series.options.inactiveOtherPoints &&
+                            isNumber(pointAttribs.opacity)) {
                             (point.dataLabels || []).forEach(function (label) {
                                 if (label) {
                                     label.animate({
@@ -26365,7 +26318,8 @@
                                 });
                             }
                         }
-                        if (!chart.styledMode && stateMarkerGraphic) {
+                        if (!chart.styledMode && stateMarkerGraphic &&
+                            point.state !== 'inactive') {
                             stateMarkerGraphic.attr(series.pointAttribs(point, state));
                         }
                     }
@@ -26643,7 +26597,7 @@
 
         return Point;
     });
-    _registerModule(_modules, 'Core/Pointer.js', [_modules['Core/Color/Color.js'], _modules['Core/Globals.js'], _modules['Core/Color/Palette.js'], _modules['Core/Tooltip.js'], _modules['Core/Utilities.js']], function (Color, H, Palette, Tooltip, U) {
+    _registerModule(_modules, 'Core/Pointer.js', [_modules['Core/Color/Color.js'], _modules['Core/Globals.js'], _modules['Core/Tooltip.js'], _modules['Core/Utilities.js']], function (Color, H, Tooltip, U) {
         /* *
          *
          *  (c) 2010-2021 Torstein Honsi
@@ -26769,7 +26723,7 @@
                         Pointer.unbindDocumentMouseUp = Pointer.unbindDocumentMouseUp();
                     }
                     if (Pointer.unbindDocumentTouchEnd) {
-                        Pointer.unbindDocumentTouchEnd = Pointer.unbindDocumentTouchEnd();
+                        Pointer.unbindDocumentTouchEnd = (Pointer.unbindDocumentTouchEnd());
                     }
                 }
                 // memory and CPU leak
@@ -26832,7 +26786,7 @@
                         visiblePlotOnly: true
                     });
                     // make a selection
-                    if (chart.hasCartesianSeries &&
+                    if ((chart.hasCartesianSeries || chart.mapView) &&
                         (this.zoomX || this.zoomY) &&
                         clickedInside &&
                         !panKey) {
@@ -26847,7 +26801,7 @@
                             if (!chart.styledMode) {
                                 selectionMarker.attr({
                                     fill: (chartOptions.selectionMarkerFill ||
-                                        color(Palette.highlightColor80)
+                                        color("#335cad" /* highlightColor80 */)
                                             .setOpacity(0.25).get())
                                 });
                             }
@@ -26900,25 +26854,22 @@
                     chart = this.chart,
                     hasPinched = this.hasPinched;
                 if (this.selectionMarker) {
-                    var selectionData_1 = {
-                            originalEvent: e,
-                            xAxis: [],
-                            yAxis: []
-                        },
-                        selectionBox = this.selectionMarker,
-                        selectionLeft_1 = selectionBox.attr ?
-                            selectionBox.attr('x') :
-                            selectionBox.x,
-                        selectionTop_1 = selectionBox.attr ?
-                            selectionBox.attr('y') :
-                            selectionBox.y,
-                        selectionWidth_1 = selectionBox.attr ?
+                    var selectionBox = this.selectionMarker, x_1 = selectionBox.attr ? selectionBox.attr('x') : selectionBox.x, y_1 = selectionBox.attr ? selectionBox.attr('y') : selectionBox.y, width_1 = selectionBox.attr ?
                             selectionBox.attr('width') :
-                            selectionBox.width,
-                        selectionHeight_1 = selectionBox.attr ?
+                            selectionBox.width, height_1 = selectionBox.attr ?
                             selectionBox.attr('height') :
-                            selectionBox.height;
-                    var runZoom_1;
+                            selectionBox.height, selectionData_1 = {
+                            originalEvent: e,
+                            xAxis: [],
+                            yAxis: [],
+                            x: x_1,
+                            y: y_1,
+                            width: width_1,
+                            height: height_1
+                        }, 
+                        // Start by false runZoom, unless when we have a mapView, in
+                        // which case the zoom will be handled in the selection event.
+                        runZoom_1 = Boolean(chart.mapView);
                     // a selection has been made
                     if (this.hasDragged || hasPinched) {
                         // record each axis' min and max
@@ -26930,17 +26881,15 @@
                                         xAxis: 'zoomX',
                                         yAxis: 'zoomY'
                                     }[axis.coll]]) &&
-                                isNumber(selectionLeft_1) &&
-                                isNumber(selectionTop_1)) { // #859, #3569
+                                isNumber(x_1) &&
+                                isNumber(y_1)) { // #859, #3569
                                 var horiz = axis.horiz,
                                     minPixelPadding = e.type === 'touchend' ?
                                         axis.minPixelPadding :
                                         0, // #1207, #3075
-                                    selectionMin = axis.toValue((horiz ? selectionLeft_1 : selectionTop_1) +
-                                        minPixelPadding),
-                                    selectionMax = axis.toValue((horiz ?
-                                        selectionLeft_1 + selectionWidth_1 :
-                                        selectionTop_1 + selectionHeight_1) - minPixelPadding);
+                                    selectionMin = axis.toValue((horiz ? x_1 : y_1) + minPixelPadding),
+                                    selectionMax = axis.toValue((horiz ? x_1 + width_1 : y_1 + height_1) -
+                                        minPixelPadding);
                                 selectionData_1[axis.coll].push({
                                     axis: axis,
                                     // Min/max for reversed axes
@@ -27127,6 +27076,7 @@
              * Pointer event, extended with `chartX` and `chartY` properties.
              *
              * @return {Highcharts.PointerAxisCoordinatesObject}
+             * Axis coordinates.
              */
             Pointer.prototype.getCoordinates = function (e) {
                 var coordinates = {
@@ -27165,7 +27115,7 @@
              * @param {Highcharts.PointerEventObject} [e]
              * The triggering event, containing chart coordinates of the pointer.
              *
-             * @return {object}
+             * @return {Object}
              * Object containing resulting hover data: hoverPoint, hoverSeries, and
              * hoverPoints.
              */
@@ -27462,9 +27412,8 @@
                     // Also reset the chart position, used in #149 fix
                     chart.pointer.chartPosition = void 0;
                 }
-                if ( // #11635, Firefox wheel scroll does not fire out events consistently
-                tooltip &&
-                    !tooltip.isHidden) {
+                // #11635, Firefox wheel scroll does not fire out events consistently
+                if (tooltip && !tooltip.isHidden) {
                     this.reset();
                 }
             };
@@ -27611,7 +27560,10 @@
                 }
                 // On touch devices, only proceed to trigger click if a handler is
                 // defined
-                if (hasZoom && self.initiated && !fireClickEvent && e.cancelable !== false) {
+                if (hasZoom &&
+                    self.initiated &&
+                    !fireClickEvent &&
+                    e.cancelable !== false) {
                     e.preventDefault();
                 }
                 // Normalize each touch
@@ -27656,20 +27608,22 @@
                 }
                 else if (pinchDown.length) { // can be 0 when releasing, if touchend
                     // fires first
-                    // Set the marker
-                    if (!selectionMarker) {
-                        // @todo It's a mock object, so maybe we need a separate
-                        // interface
-                        self.selectionMarker = selectionMarker = extend({
-                            destroy: noop,
-                            touch: true
-                        }, chart.plotBox);
-                    }
-                    self.pinchTranslate(pinchDown, touches, transform, selectionMarker, clip, lastValidTouch);
-                    self.hasPinched = hasZoom;
-                    // Scale and translate the groups to provide visual feedback during
-                    // pinching
-                    self.scaleGroups(transform, clip);
+                    fireEvent(chart, 'touchpan', { originalEvent: e }, function () {
+                        // Set the marker
+                        if (!selectionMarker) {
+                            // @todo It's a mock object, so maybe we need a separate
+                            // interface
+                            self.selectionMarker = selectionMarker = extend({
+                                destroy: noop,
+                                touch: true
+                            }, chart.plotBox);
+                        }
+                        self.pinchTranslate(pinchDown, touches, transform, selectionMarker, clip, lastValidTouch);
+                        self.hasPinched = hasZoom;
+                        // Scale and translate the groups to provide visual feedback
+                        // during pinching
+                        self.scaleGroups(transform, clip);
+                    });
                     if (self.res) {
                         self.res = false;
                         this.reset(false, 0);
@@ -27750,7 +27704,8 @@
                     clip[xy] = clipXY - plotLeftTop;
                     clip[wh] = selectionWH;
                 }
-                var scaleKey = inverted ? (horiz ? 'scaleY' : 'scaleX') : 'scale' + XY;
+                var scaleKey = inverted ?
+                        (horiz ? 'scaleY' : 'scaleX') : 'scale' + XY;
                 var transformScale = inverted ? 1 / scale : scale;
                 selectionMarker[wh] = selectionWH;
                 selectionMarker[xy] = selectionXY;
@@ -27853,8 +27808,8 @@
              * @private
              * @function Highcharts.Pointer#runPointActions
              *
-             * @fires Highcharts.Point#event:mouseOut
-             * @fires Highcharts.Point#event:mouseOver
+             * @emits Highcharts.Point#event:mouseOut
+             * @emits Highcharts.Point#event:mouseOver
              */
             Pointer.prototype.runPointActions = function (e, p) {
                 var pointer = this,
@@ -27996,7 +27951,9 @@
                 // Scale each series
                 chart.series.forEach(function (series) {
                     var seriesAttribs = attribs || series.getPlotBox(); // #1701
-                        if (series.xAxis && series.xAxis.zoomEnabled && series.group) {
+                        if (series.group &&
+                            ((series.xAxis && series.xAxis.zoomEnabled) ||
+                                chart.mapView)) {
                             series.group.attr(seriesAttribs);
                         if (series.markerGroup) {
                             series.markerGroup.attr(seriesAttribs);
@@ -28605,7 +28562,8 @@
                 this.symbolWidth = pick(options.symbolWidth, 16);
                 this.pages = [];
                 this.proximate = options.layout === 'proximate' && !this.chart.inverted;
-                this.baseline = void 0; // #12705: baseline has to be reset on every update
+                // #12705: baseline has to be reset on every update
+                this.baseline = void 0;
             };
             /**
              * Update the legend with new options. Equivalent to running `chart.update`
@@ -28624,7 +28582,7 @@
              * operations on the chart, it is a good idea to set redraw to false and
              * call {@link Chart#redraw} after. Whether to redraw the chart.
              *
-             * @fires Highcharts.Legends#event:afterUpdate
+             * @emits Highcharts.Legends#event:afterUpdate
              */
             Legend.prototype.update = function (options, redraw) {
                 var chart = this.chart;
@@ -28774,8 +28732,7 @@
                 /**
                  * @private
                  * @param {string} key
-                 * @return {void}
-                 */
+                     */
                 function destroyItems(key) {
                     if (this[key]) {
                         this[key] = this[key].destroy();
@@ -28992,13 +28949,16 @@
                 legend.setText(item);
                 // calculate the positions for the next line
                 var bBox = li.getBBox();
+                var fontMetricsH = (legend.fontMetrics && legend.fontMetrics.h) || 0;
                 item.itemWidth = item.checkboxOffset =
                     options.itemWidth ||
                         item.legendItemWidth ||
                         bBox.width + itemExtraWidth;
                 legend.maxItemWidth = Math.max(legend.maxItemWidth, item.itemWidth);
                 legend.totalItemWidth += item.itemWidth;
-                legend.itemHeight = item.itemHeight = Math.round(item.legendItemHeight || bBox.height || legend.symbolHeight);
+                legend.itemHeight = item.itemHeight = Math.round(item.legendItemHeight ||
+                    // use bBox for multiline (#16398)
+                    (bBox.height > fontMetricsH * 1.5 ? bBox.height : fontMetricsH));
             };
             /**
              * Get the position of the item in the layout. We now know the
@@ -29062,7 +29022,7 @@
              * @function Highcharts.Legend#getAllItems
              * @return {Array<(Highcharts.BubbleLegendItem|Highcharts.Point|Highcharts.Series)>}
              * The current items in the legend.
-             * @fires Highcharts.Legend#event:afterGetAllItems
+             * @emits Highcharts.Legend#event:afterGetAllItems
              */
             Legend.prototype.getAllItems = function () {
                 var allItems = [];
@@ -29332,7 +29292,6 @@
              * @private
              * @function Highcharts.align
              * @param {Highcharts.BBoxObject} alignTo
-             * @return {void}
              */
             Legend.prototype.align = function (alignTo) {
                 if (alignTo === void 0) { alignTo = this.chart.spacingBox; }
@@ -29364,8 +29323,6 @@
              *
              * @private
              * @function Highcharts.Legend#handleOverflow
-             * @param {number} legendHeight
-             * @return {number}
              */
             Legend.prototype.handleOverflow = function (legendHeight) {
                 var legend = this,
@@ -29450,10 +29407,14 @@
                         if (lastY) {
                             allItems[i - 1].pageIx = len - 1;
                         }
-                        if (i === allItems.length - 1 &&
+                        // add the last page if needed (#2617, #13683)
+                        if (
+                        // check the last item
+                        i === allItems.length - 1 &&
+                            // if adding next page is needed
                             y + h - pages[len - 1] > clipHeight &&
-                            y !== lastY // #2617
-                        ) {
+                            // and will fully fit inside a new page
+                            h <= clipHeight) {
                             pages.push(y);
                             item.pageIx = len;
                         }
@@ -29522,7 +29483,6 @@
              * @param {boolean|Partial<Highcharts.AnimationOptionsObject>} [animation]
              *        Whether and how to apply animation.
              *
-             * @return {void}
              */
             Legend.prototype.scroll = function (scrollBy, animation) {
                 var _this = this;
@@ -29611,8 +29571,8 @@
              * @param {Highcharts.BubbleLegendItem|Point|Highcharts.Series} item
              * @param {Highcharts.SVGElement} legendItem
              * @param {boolean} [useHTML=false]
-             * @fires Highcharts.Point#event:legendItemClick
-             * @fires Highcharts.Series#event:legendItemClick
+             * @emits Highcharts.Point#event:legendItemClick
+             * @emits Highcharts.Series#event:legendItemClick
              */
             Legend.prototype.setItemEvents = function (item, legendItem, useHTML) {
                 var legend = this,
@@ -29702,7 +29662,7 @@
              * @private
              * @function Highcharts.Legend#createCheckboxForItem
              * @param {Highcharts.BubbleLegendItem|Point|Highcharts.Series} item
-             * @fires Highcharts.Series#event:checkboxClick
+             * @emits Highcharts.Series#event:checkboxClick
              */
             Legend.prototype.createCheckboxForItem = function (item) {
                 var legend = this;
@@ -29945,8 +29905,7 @@
                 SeriesRegistry.seriesTypes[type].prototype.type = type;
                 // Create the point class if needed
                 if (pointProto) {
-                    SeriesRegistry.seriesTypes[type].prototype.pointClass =
-                        extendClass(Point, pointProto);
+                    SeriesRegistry.seriesTypes[type].prototype.pointClass = extendClass(Point, pointProto);
                 }
                 return SeriesRegistry.seriesTypes[type];
             }
@@ -29961,7 +29920,7 @@
 
         return SeriesRegistry;
     });
-    _registerModule(_modules, 'Core/Chart/Chart.js', [_modules['Core/Animation/AnimationUtilities.js'], _modules['Core/Axis/Axis.js'], _modules['Core/FormatUtilities.js'], _modules['Core/Foundation.js'], _modules['Core/Globals.js'], _modules['Core/Legend/Legend.js'], _modules['Core/MSPointer.js'], _modules['Core/DefaultOptions.js'], _modules['Core/Color/Palette.js'], _modules['Core/Pointer.js'], _modules['Core/Renderer/RendererRegistry.js'], _modules['Core/Series/SeriesRegistry.js'], _modules['Core/Renderer/SVG/SVGRenderer.js'], _modules['Core/Time.js'], _modules['Core/Utilities.js'], _modules['Core/Renderer/HTML/AST.js']], function (A, Axis, FormatUtilities, Foundation, H, Legend, MSPointer, D, palette, Pointer, RendererRegistry, SeriesRegistry, SVGRenderer, Time, U, AST) {
+    _registerModule(_modules, 'Core/Chart/Chart.js', [_modules['Core/Animation/AnimationUtilities.js'], _modules['Core/Axis/Axis.js'], _modules['Core/FormatUtilities.js'], _modules['Core/Foundation.js'], _modules['Core/Globals.js'], _modules['Core/Legend/Legend.js'], _modules['Core/MSPointer.js'], _modules['Core/DefaultOptions.js'], _modules['Core/Pointer.js'], _modules['Core/Renderer/RendererRegistry.js'], _modules['Core/Series/SeriesRegistry.js'], _modules['Core/Renderer/SVG/SVGRenderer.js'], _modules['Core/Time.js'], _modules['Core/Utilities.js'], _modules['Core/Renderer/HTML/AST.js']], function (A, Axis, FormatUtilities, Foundation, H, Legend, MSPointer, D, Pointer, RendererRegistry, SeriesRegistry, SVGRenderer, Time, U, AST) {
         /* *
          *
          *  (c) 2010-2021 Torstein Honsi
@@ -30132,8 +30091,8 @@
              * @param {...Array<*>} arguments
              * All arguments for the constructor.
              *
-             * @fires Highcharts.Chart#event:init
-             * @fires Highcharts.Chart#event:afterInit
+             * @emits Highcharts.Chart#event:init
+             * @emits Highcharts.Chart#event:afterInit
              */
             Chart.prototype.getArgs = function (a, b, c) {
                 // Remove the optional first argument, renderTo, and
@@ -30159,10 +30118,9 @@
              *        Function to run when the chart has loaded and and all external
              *        images are loaded.
              *
-             * @return {void}
              *
-             * @fires Highcharts.Chart#event:init
-             * @fires Highcharts.Chart#event:afterInit
+             * @emits Highcharts.Chart#event:init
+             * @emits Highcharts.Chart#event:afterInit
              */
             Chart.prototype.init = function (userOptions, callback) {
                 // Handle regular options
@@ -30340,7 +30298,6 @@
              *
              * @private
              * @function Highcharts.Series#getSeriesOrderByLinks
-             * @return {Array<Highcharts.Series>}
              */
             Chart.prototype.getSeriesOrderByLinks = function () {
                 return this.series.concat().sort(function (a, b) {
@@ -30421,7 +30378,8 @@
                             pos: plotLeft,
                             len: Infinity
                         };
-                    var chartX = options.paneCoordinates ? xAxis.pos + x : plotLeft + x;
+                    var chartX = options.paneCoordinates ?
+                            xAxis.pos + x : plotLeft + x;
                     if (!(chartX >= Math.max(scrollLeft + plotLeft, xAxis.pos) &&
                         chartX <= Math.min(scrollLeft + plotLeft + box.width, xAxis.pos + xAxis.len))) {
                         e.isInsidePlot = false;
@@ -30432,7 +30390,8 @@
                             pos: plotTop,
                             len: Infinity
                         };
-                    var chartY = options.paneCoordinates ? yAxis.pos + y : plotTop + y;
+                    var chartY = options.paneCoordinates ?
+                            yAxis.pos + y : plotTop + y;
                     if (!(chartY >= Math.max(scrollTop + plotTop, yAxis.pos) &&
                         chartY <= Math.min(scrollTop + plotTop + box.height, yAxis.pos + yAxis.len))) {
                         e.isInsidePlot = false;
@@ -30455,12 +30414,12 @@
              * @param {boolean|Partial<Highcharts.AnimationOptionsObject>} [animation]
              * If or how to apply animation to the redraw.
              *
-             * @fires Highcharts.Chart#event:afterSetExtremes
-             * @fires Highcharts.Chart#event:beforeRedraw
-             * @fires Highcharts.Chart#event:predraw
-             * @fires Highcharts.Chart#event:redraw
-             * @fires Highcharts.Chart#event:render
-             * @fires Highcharts.Chart#event:updatedData
+             * @emits Highcharts.Chart#event:afterSetExtremes
+             * @emits Highcharts.Chart#event:beforeRedraw
+             * @emits Highcharts.Chart#event:predraw
+             * @emits Highcharts.Chart#event:redraw
+             * @emits Highcharts.Chart#event:render
+             * @emits Highcharts.Chart#event:updatedData
              */
             Chart.prototype.redraw = function (animation) {
                 fireEvent(this, 'beforeRedraw');
@@ -30622,8 +30581,6 @@
                 var series = this.series;
                 /**
                  * @private
-                 * @param {Highcharts.Axis|Highcharts.Series} item
-                 * @return {boolean}
                  */
                 function itemById(item) {
                     return (item.id === id ||
@@ -30647,8 +30604,8 @@
              *
              * @private
              * @function Highcharts.Chart#getAxes
-             * @fires Highcharts.Chart#event:afterGetAxes
-             * @fires Highcharts.Chart#event:getAxes
+             * @emits Highcharts.Chart#event:afterGetAxes
+             * @emits Highcharts.Chart#event:getAxes
              */
             Chart.prototype.getAxes = function () {
                 var chart = this,
@@ -30762,10 +30719,10 @@
                 var chart = this;
                 // Default style
                 var style = name === 'title' ? {
-                        color: palette.neutralColor80,
+                        color: "#333333" /* neutralColor80 */,
                         fontSize: this.options.isStock ? '16px' : '18px' // #2944
                     } : {
-                        color: palette.neutralColor60
+                        color: "#666666" /* neutralColor60 */
                     };
                 // Merge default options with explicit options
                 var options = this.options[name] = merge(
@@ -30830,7 +30787,7 @@
              * @function Highcharts.Chart#layOutTitles
              *
              * @param {boolean} [redraw=true]
-             * @fires Highcharts.Chart#event:afterLayOutTitles
+             * @emits Highcharts.Chart#event:afterLayOutTitles
              */
             Chart.prototype.layOutTitles = function (redraw) {
                 var titleOffset = [0, 0, 0],
@@ -30838,7 +30795,7 @@
                     spacingBox = this.spacingBox;
                 // Lay out the title and the subtitle respectively
                 ['title', 'subtitle', 'caption'].forEach(function (key) {
-                    var title = this[key], titleOptions = this.options[key], verticalAlign = titleOptions.verticalAlign || 'top', offset = key === 'title' ?
+                    var title = this[key], titleOptions = (this.options[key]), verticalAlign = titleOptions.verticalAlign || 'top', offset = key === 'title' ?
                             verticalAlign === 'top' ? -3 : 0 :
                             // Floating subtitle (#6574)
                             verticalAlign === 'top' ? titleOffset[0] + 2 : 0;
@@ -30846,7 +30803,8 @@
                         height;
                     if (title) {
                         if (!this.styledMode) {
-                            titleSize = titleOptions.style && titleOptions.style.fontSize;
+                            titleSize = (titleOptions.style &&
+                                titleOptions.style.fontSize);
                         }
                         titleSize = renderer.fontMetrics(titleSize, title).b;
                         title
@@ -31021,7 +30979,7 @@
              *
              * @private
              * @function Highcharts.Chart#afterGetContainer
-             * @fires Highcharts.Chart#event:afterGetContainer
+             * @emits Highcharts.Chart#event:afterGetContainer
              */
             Chart.prototype.getContainer = function () {
                 var chart = this,
@@ -31058,7 +31016,7 @@
                 // Make a reference to the chart from the div
                 attr(renderTo, indexAttrName, chart.index);
                 // remove previous chart
-                renderTo.innerHTML = '';
+                renderTo.innerHTML = AST.emptyHTML;
                 // If the container doesn't have an offsetWidth, it has or is a child of
                 // a node that has display:none. We need to temporarily move it out to a
                 // visible state to determine the size, else the legend and tooltips
@@ -31143,7 +31101,7 @@
              *
              * @private
              * @function Highcharts.Chart#getMargins
-             * @fires Highcharts.Chart#event:getMargins
+             * @emits Highcharts.Chart#event:getMargins
              */
             Chart.prototype.getMargins = function (skipAxes) {
                 var _a = this,
@@ -31309,10 +31267,9 @@
              * @param {boolean|Partial<Highcharts.AnimationOptionsObject>} [animation=true]
              *        Whether and how to apply animation.
              *
-             * @return {void}
              *
-             * @fires Highcharts.Chart#event:endResize
-             * @fires Highcharts.Chart#event:resize
+             * @emits Highcharts.Chart#event:endResize
+             * @emits Highcharts.Chart#event:resize
              */
             Chart.prototype.setSize = function (width, height, animation) {
                 var chart = this,
@@ -31369,7 +31326,7 @@
              *
              * @private
              * @function Highcharts.Chart#setChartSize
-             * @fires Highcharts.Chart#event:afterSetChartSize
+             * @emits Highcharts.Chart#event:afterSetChartSize
              */
             Chart.prototype.setChartSize = function (skipAxes) {
                 var chart = this,
@@ -31492,7 +31449,7 @@
              *
              * @private
              * @function Highcharts.Chart#drawChartBox
-             * @fires Highcharts.Chart#event:afterDrawChartBox
+             * @emits Highcharts.Chart#event:afterDrawChartBox
              */
             Chart.prototype.drawChartBox = function () {
                 var chart = this,
@@ -31626,7 +31583,6 @@
              *
              * @private
              * @function Highcharts.Chart#propFromSeries
-             * @return {void}
              */
             Chart.prototype.propFromSeries = function () {
                 var chart = this,
@@ -31670,7 +31626,7 @@
              *
              * @private
              * @function Highcharts.Chart#linkSeries
-             * @fires Highcharts.Chart#event:afterLinkSeries
+             * @emits Highcharts.Chart#event:afterLinkSeries
              */
             Chart.prototype.linkSeries = function () {
                 var chart = this,
@@ -31898,7 +31854,7 @@
              *
              * @function Highcharts.Chart#destroy
              *
-             * @fires Highcharts.Chart#event:destroy
+             * @emits Highcharts.Chart#event:destroy
              */
             Chart.prototype.destroy = function () {
                 var chart = this,
@@ -31950,7 +31906,7 @@
                 // Remove container and all SVG, check container as it can break in IE
                 // when destroyed before finished loading
                 if (container) {
-                    container.innerHTML = '';
+                    container.innerHTML = AST.emptyHTML;
                     removeEvent(container);
                     if (parentNode) {
                         discardElement(container);
@@ -31966,7 +31922,7 @@
              *
              * @private
              * @function Highcharts.Chart#firstRender
-             * @fires Highcharts.Chart#event:beforeRender
+             * @emits Highcharts.Chart#event:beforeRender
              */
             Chart.prototype.firstRender = function () {
                 var chart = this,
@@ -32030,8 +31986,8 @@
              *
              * @private
              * @function Highcharts.Chart#onload
-             * @fires Highcharts.Chart#event:load
-             * @fires Highcharts.Chart#event:render
+             * @emits Highcharts.Chart#event:load
+             * @emits Highcharts.Chart#event:render
              */
             Chart.prototype.onload = function () {
                 // Run callbacks, first the ones registered by modules, then user's one
@@ -32077,8 +32033,8 @@
              * @return {Highcharts.Series}
              *         The newly created series object.
              *
-             * @fires Highcharts.Chart#event:addSeries
-             * @fires Highcharts.Chart#event:afterAddSeries
+             * @emits Highcharts.Chart#event:addSeries
+             * @emits Highcharts.Chart#event:afterAddSeries
              */
             Chart.prototype.addSeries = function (options, redraw, animation) {
                 var chart = this;
@@ -32337,8 +32293,8 @@
              *        Whether to apply animation, and optionally animation
              *        configuration.
              *
-             * @fires Highcharts.Chart#event:update
-             * @fires Highcharts.Chart#event:afterUpdate
+             * @emits Highcharts.Chart#event:update
+             * @emits Highcharts.Chart#event:afterUpdate
              */
             Chart.prototype.update = function (options, redraw, oneToOne, animation) {
                 var chart = this,
@@ -32606,8 +32562,8 @@
              *
              * @function Highcharts.Chart#showResetZoom
              *
-             * @fires Highcharts.Chart#event:afterShowResetZoom
-             * @fires Highcharts.Chart#event:beforeShowResetZoom
+             * @emits Highcharts.Chart#event:afterShowResetZoom
+             * @emits Highcharts.Chart#event:beforeShowResetZoom
              */
             Chart.prototype.showResetZoom = function () {
                 var chart = this,
@@ -32644,7 +32600,7 @@
              *
              * @function Highcharts.Chart#zoomOut
              *
-             * @fires Highcharts.Chart#event:selection
+             * @emits Highcharts.Chart#event:selection
              */
             Chart.prototype.zoomOut = function () {
                 fireEvent(this, 'selection', { resetSelection: true }, this.zoom);
@@ -32659,7 +32615,8 @@
             Chart.prototype.zoom = function (event) {
                 var chart = this,
                     pointer = chart.pointer,
-                    mouseDownPos = (chart.inverted ? pointer.mouseDownX : pointer.mouseDownY);
+                    mouseDownPos = chart.inverted ?
+                        pointer.mouseDownX : pointer.mouseDownY;
                 var displayButton = false,
                     hasZoomed;
                 // If zoom is called with no arguments, reset the axes
@@ -33172,7 +33129,7 @@
 
         return LegendSymbol;
     });
-    _registerModule(_modules, 'Core/Series/SeriesDefaults.js', [_modules['Core/Color/Palette.js']], function (Palette) {
+    _registerModule(_modules, 'Core/Series/SeriesDefaults.js', [], function () {
         /* *
          *
          *  (c) 2010-2021 Torstein Honsi
@@ -34155,7 +34112,7 @@
                      *
                      * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
                      */
-                    lineColor: Palette.backgroundColor,
+                    lineColor: "#ffffff" /* backgroundColor */,
                     /**
                      * The width of the point marker's outline.
                      *
@@ -34355,7 +34312,7 @@
                              *
                              * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
                              */
-                            fillColor: Palette.neutralColor20,
+                            fillColor: "#cccccc" /* neutralColor20 */,
                             /**
                              * The color of the point marker's outline. When
                              * `undefined`, the series' or point's color is used.
@@ -34365,7 +34322,7 @@
                              *
                              * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
                              */
-                            lineColor: Palette.neutralColor100,
+                            lineColor: "#000000" /* neutralColor100 */,
                             /**
                              * The width of the point marker's outline.
                              *
@@ -34760,9 +34717,9 @@
                      */
                     // eslint-disable-next-line valid-jsdoc
                     /**
-                     * Callback JavaScript function to format the data label. Note that
-                     * if a `format` is defined, the format takes precedence and the
-                     * formatter is ignored.
+                     * Callback JavaScript function to format the data label. Note that if a
+                     * `format` is defined, the format takes precedence and the formatter is
+                     * ignored.
                      *
                      * @sample {highmaps} maps/plotoptions/series-datalabels-format/
                      *         Formatted value
@@ -34771,7 +34728,8 @@
                      */
                     formatter: function () {
                         var numberFormatter = this.series.chart.numberFormatter;
-                    return typeof this.y !== 'number' ? '' : numberFormatter(this.y, -1);
+                    return typeof this.y !== 'number' ?
+                        '' : numberFormatter(this.y, -1);
                 },
                 /**
                  * For points with an extent, like columns or map areas, whether to
@@ -35466,7 +35424,7 @@
 
         return seriesDefaults;
     });
-    _registerModule(_modules, 'Core/Series/Series.js', [_modules['Core/Animation/AnimationUtilities.js'], _modules['Core/DefaultOptions.js'], _modules['Core/Foundation.js'], _modules['Core/Globals.js'], _modules['Core/Legend/LegendSymbol.js'], _modules['Core/Color/Palette.js'], _modules['Core/Series/Point.js'], _modules['Core/Series/SeriesDefaults.js'], _modules['Core/Series/SeriesRegistry.js'], _modules['Core/Renderer/SVG/SVGElement.js'], _modules['Core/Utilities.js']], function (A, D, F, H, LegendSymbol, Palette, Point, SeriesDefaults, SeriesRegistry, SVGElement, U) {
+    _registerModule(_modules, 'Core/Series/Series.js', [_modules['Core/Animation/AnimationUtilities.js'], _modules['Core/DefaultOptions.js'], _modules['Core/Foundation.js'], _modules['Core/Globals.js'], _modules['Core/Legend/LegendSymbol.js'], _modules['Core/Series/Point.js'], _modules['Core/Series/SeriesDefaults.js'], _modules['Core/Series/SeriesRegistry.js'], _modules['Core/Renderer/SVG/SVGElement.js'], _modules['Core/Utilities.js']], function (A, D, F, H, LegendSymbol, Point, SeriesDefaults, SeriesRegistry, SVGElement, U) {
         /* *
          *
          *  (c) 2010-2021 Torstein Honsi
@@ -35852,7 +35810,6 @@
              *
              * @private
              * @function Highcharts.Series#hasData
-             * @return {boolean}
              */
             Series.prototype.hasData = function () {
                 return ((this.visible &&
@@ -35870,7 +35827,6 @@
              *
              * @private
              * @function Highcharts.Series#autoIncrement
-             * @return {number}
              */
             Series.prototype.autoIncrement = function (x) {
                 var options = this.options,
@@ -35931,13 +35887,9 @@
              * not redraw the series. For API usage, use {@link Series#update}.
              * @private
              * @function Highcharts.Series#setOptions
-             *
              * @param {Highcharts.SeriesOptionsType} itemOptions
              * The series options.
-             *
-             * @return {Highcharts.SeriesOptionsType}
-             *
-             * @fires Highcharts.Series#event:afterSetOptions
+             * @emits Highcharts.Series#event:afterSetOptions
              */
             Series.prototype.setOptions = function (itemOptions) {
                 var chart = this.chart,
@@ -36083,7 +36035,7 @@
                     this.getCyclic('color');
                 }
                 else if (this.options.colorByPoint) {
-                    this.color = Palette.neutralColor20;
+                    this.color = "#cccccc" /* neutralColor20 */;
                 }
                 else {
                     this.getCyclic('color', this.options.color ||
@@ -36095,7 +36047,6 @@
              *
              * @private
              * @function Highcharts.Series#getPointsCollection
-             * @return {Array<Highcharts.Point>}
              */
             Series.prototype.getPointsCollection = function () {
                 return (this.hasGroupedData ? this.points : this.data) || [];
@@ -36106,7 +36057,6 @@
              *
              * @private
              * @function Highcharts.Series#getSymbol
-             * @return {void}
              */
             Series.prototype.getSymbol = function () {
                 var seriesMarkerOption = this.options.marker;
@@ -36118,14 +36068,13 @@
              *
              * @private
              * @function Highcharts.Series#findPointIndex
-             * @param    {Highcharts.PointOptionsObject} optionsObject
-             *           The options of the point.
-             * @param    {number} fromIndex
-             *           The index to start searching from, used for optimizing
-             *           series with required sorting.
-             * @returns  {number|undefined}
-             *           Returns the index of a matching point, or undefined if no
-             *           match is found.
+             * @param {Highcharts.PointOptionsObject} optionsObject
+             * The options of the point.
+             * @param {number} fromIndex
+             * The index to start searching from, used for optimizing series with
+             * required sorting.
+             * @return {number|undefined}
+             * Returns the index of a matching point, or undefined if no match is found.
              */
             Series.prototype.findPointIndex = function (optionsObject, fromIndex) {
                 var id = optionsObject.id,
@@ -36414,11 +36363,19 @@
                         }
                         else if (isArray(firstPoint)) {
                             if (valueCount) { // [x, low, high] or [x, o, h, l, c]
-                                for (i = 0; i < dataLength; i++) {
-                                    pt = data[i];
-                                    xData[i] = pt[0];
-                                    yData[i] =
-                                        pt.slice(1, valueCount + 1);
+                                if (firstPoint.length === valueCount) {
+                                    for (i = 0; i < dataLength; i++) {
+                                        xData[i] = this.autoIncrement();
+                                        yData[i] = data[i];
+                                    }
+                                }
+                                else {
+                                    for (i = 0; i < dataLength; i++) {
+                                        pt = data[i];
+                                        xData[i] = pt[0];
+                                        yData[i] =
+                                            pt.slice(1, valueCount + 1);
+                                    }
                                 }
                             }
                             else { // [x, y]
@@ -36428,10 +36385,21 @@
                                     indexOfX = indexOfX >= 0 ? indexOfX : 0;
                                     indexOfY = indexOfY >= 0 ? indexOfY : 1;
                                 }
-                                for (i = 0; i < dataLength; i++) {
-                                    pt = data[i];
-                                    xData[i] = pt[indexOfX];
-                                    yData[i] = pt[indexOfY];
+                                if (firstPoint.length === 1) {
+                                    indexOfY = 0;
+                                }
+                                if (indexOfX === indexOfY) {
+                                    for (i = 0; i < dataLength; i++) {
+                                        xData[i] = this.autoIncrement();
+                                        yData[i] = data[i][indexOfY];
+                                    }
+                                }
+                                else {
+                                    for (i = 0; i < dataLength; i++) {
+                                        pt = data[i];
+                                        xData[i] = pt[indexOfX];
+                                        yData[i] = pt[indexOfY];
+                                    }
                                 }
                             }
                         }
@@ -36489,11 +36457,8 @@
              *
              * @private
              * @function Highcharts.Series#sortData
-             *
              * @param {Array<Highcharts.PointOptionsType>} data
              * Force data grouping.
-             *
-             * @return {Array<Highcharts.PointOptionsObject>}
              */
             Series.prototype.sortData = function (data) {
                 var series = this,
@@ -36555,8 +36520,7 @@
              * @private
              * @function Highcharts.Series#getProcessedData
              * @param {boolean} [forceExtremesFromAll]
-             *        Force getting extremes of a total series data range.
-             * @return {Highcharts.SeriesProcessedDataObject}
+             * Force getting extremes of a total series data range.
              */
             Series.prototype.getProcessedData = function (forceExtremesFromAll) {
                 var series = this,
@@ -36652,8 +36616,7 @@
              * @private
              * @function Highcharts.Series#processData
              * @param {boolean} [force]
-             *        Force data grouping.
-             * @return {boolean|undefined}
+             * Force data grouping.
              */
             Series.prototype.processData = function (force) {
                 var series = this,
@@ -36674,7 +36637,8 @@
                 series.cropStart = processedData.cropStart;
                 series.processedXData = processedData.xData;
                 series.processedYData = processedData.yData;
-                series.closestPointRange = series.basePointRange = processedData.closestPointRange;
+                series.closestPointRange = (series.basePointRange = processedData.closestPointRange);
+                fireEvent(series, 'afterProcessData');
             };
             /**
              * Iterate over xData and crop values between min and max. Returns
@@ -36683,12 +36647,6 @@
              *
              * @private
              * @function Highcharts.Series#cropData
-             * @param {Array<number>} xData
-             * @param {Array<number>} yData
-             * @param {number} min
-             * @param {number} max
-             * @param {number} [cropShoulder]
-             * @return {Highcharts.SeriesCropDataObject}
              */
             Series.prototype.cropData = function (xData, yData, min, max, cropShoulder) {
                 var dataLength = xData.length;
@@ -36806,7 +36764,8 @@
                          * @readonly
                          */
                         // For faster access in Point.update
-                        point.index = hasGroupedData ? (groupCropStartIndex + i) : cursor;
+                        point.index = hasGroupedData ?
+                            (groupCropStartIndex + i) : cursor;
                         points[i] = point;
                     }
                 }
@@ -36866,12 +36825,9 @@
              *
              * @private
              * @function Highcharts.Series#getXExtremes
-             *
              * @param {Array<number>} xData
              * The data to inspect. Defaults to the current data within the visible
              * range.
-             *
-             * @return {Highcharts.RangeObject}
              */
             Series.prototype.getXExtremes = function (xData) {
                 return {
@@ -36885,14 +36841,11 @@
              *
              * @private
              * @function Highcharts.Series#getExtremes
-             *
              * @param {Array<number>} [yData]
              * The data to inspect. Defaults to the current data within the visible
              * range.
              * @param {boolean} [forceExtremesFromAll]
              * Force getting extremes of a total series data range.
-             *
-             * @return {Highcharts.DataExtremesObject}
              */
             Series.prototype.getExtremes = function (yData, forceExtremesFromAll) {
                 var xAxis = this.xAxis,
@@ -36950,6 +36903,7 @@
                     }
                 }
                 var dataExtremes = {
+                        activeYData: activeYData,
                         dataMin: arrayMin(activeYData),
                         dataMax: arrayMax(activeYData)
                     };
@@ -36991,11 +36945,8 @@
              *
              * @private
              * @function Highcharts.Series.getFirstValidPoint
-             *
              * @param {Array<Highcharts.PointOptionsType>} data
              * Array of options for points
-             *
-             * @return {Highcharts.PointOptionsType}
              */
             Series.prototype.getFirstValidPoint = function (data) {
                 var dataLength = data.length;
@@ -37015,7 +36966,7 @@
              *
              * @function Highcharts.Series#translate
              *
-             * @fires Highcharts.Series#events:translate
+             * @emits Highcharts.Series#events:translate
              */
             Series.prototype.translate = function () {
                 if (!this.processedXData) { // hidden series
@@ -37031,7 +36982,6 @@
                     yAxis = series.yAxis,
                     points = series.points,
                     dataLength = points.length,
-                    hasModifyValue = !!series.modifyValue,
                     pointPlacement = series.pointPlacementToXValue(), // #7860
                     dynamicallyPlaced = Boolean(pointPlacement),
                     threshold = options.threshold,
@@ -37064,8 +37014,10 @@
                                 (stackThreshold ? 0 : threshold) ?
                             '-' :
                             '') + series.stackKey];
-                    if (yAxis.positiveValuesOnly && !yAxis.validatePositiveValue(yValue) ||
-                        xAxis.positiveValuesOnly && !xAxis.validatePositiveValue(xValue)) {
+                    if (yAxis.positiveValuesOnly &&
+                        !yAxis.validatePositiveValue(yValue) ||
+                        xAxis.positiveValuesOnly &&
+                            !xAxis.validatePositiveValue(xValue)) {
                         point.isNull = true;
                     }
                     // Get the plotX translation
@@ -37116,9 +37068,9 @@
                     point.yBottom = defined(yBottom) ?
                         limitedRange(yAxis.translate(yBottom, 0, 1, 0, 1)) :
                         null;
-                    // general hook, used for Highcharts Stock compare mode
-                    if (hasModifyValue) {
-                        yValue = series.modifyValue(yValue, point);
+                    // General hook, used for Highcharts Stock compare and cumulative
+                    if (series.dataModify) {
+                        yValue = series.dataModify.modifyValue(yValue, i);
                     }
                     // Set the the plotY value, reset it for redraws
                     // #3201
@@ -37156,7 +37108,7 @@
                         lastPlotX = plotX;
                     }
                     // Find point zone
-                    point.zone = (this.zones.length && point.getZone());
+                    point.zone = this.zones.length ? point.getZone() : void 0;
                     // Animate new points with data sorting
                     if (!point.graphic && series.group && enabledDataSorting) {
                         point.isNew = true;
@@ -37200,52 +37152,23 @@
              *
              * @private
              * @function Highcharts.Series#getClip
-             *
-             * @param  {boolean|Partial<Highcharts.AnimationOptionsObject>} [animation]
-             * Initialize the animation.
-             *
-             * @param  {boolean} [finalBox]
-             * Final size for the clip - end state for the animation.
-             *
-             * @return {Highcharts.Dictionary<number>}
              */
-            Series.prototype.getClipBox = function (animation, finalBox) {
-                var series = this,
-                    options = series.options,
-                    chart = series.chart,
-                    inverted = chart.inverted,
-                    xAxis = series.xAxis,
-                    yAxis = xAxis && series.yAxis,
-                    scrollablePlotAreaOptions = chart.options.chart.scrollablePlotArea || {};
-                var clipBox;
-                if (animation && options.clip === false && yAxis) {
-                    // support for not clipped series animation (#10450)
-                    clipBox = inverted ? {
-                        y: -chart.chartWidth + yAxis.len + yAxis.pos,
-                        height: chart.chartWidth,
-                        width: chart.chartHeight,
-                        x: -chart.chartHeight + xAxis.len + xAxis.pos
-                    } : {
-                        y: -yAxis.pos,
-                        height: chart.chartHeight,
-                        width: chart.chartWidth,
-                        x: -xAxis.pos
-                    };
-                    // x and width will be changed later when setting for animation
-                    // initial state in Series.setClip
+            Series.prototype.getClipBox = function () {
+                var _a = this,
+                    chart = _a.chart,
+                    xAxis = _a.xAxis,
+                    yAxis = _a.yAxis;
+                // If no axes on the series, use global clipBox
+                var seriesBox = merge(chart.clipBox);
+                // Otherwise, use clipBox.width which is corrected for plotBorderWidth
+                // and clipOffset
+                if (xAxis && xAxis.len !== chart.plotSizeX) {
+                    seriesBox.width = xAxis.len;
                 }
-                else {
-                    clipBox = series.clipBox || chart.clipBox;
-                    if (finalBox) {
-                        clipBox.width = chart.plotSizeX;
-                        clipBox.x = (chart.scrollablePixelsX || 0) *
-                            (scrollablePlotAreaOptions.scrollPositionX || 0);
-                    }
+                if (yAxis && yAxis.len !== chart.plotSizeY) {
+                    seriesBox.height = yAxis.len;
                 }
-                return !finalBox ? clipBox : {
-                    width: clipBox.width,
-                    x: clipBox.x
-                };
+                return seriesBox;
             };
             /**
              * Get the shared clip key, creating it if it doesn't exist.
@@ -37253,99 +37176,52 @@
              * @private
              * @function Highcharts.Series#getSharedClipKey
              */
-            Series.prototype.getSharedClipKey = function (animation) {
-                if (this.sharedClipKey) {
-                    return this.sharedClipKey;
-                }
-                var sharedClipKey = [
-                        animation && animation.duration,
-                        animation && animation.easing,
-                        animation && animation.defer,
-                        this.getClipBox(animation).height,
-                        this.options.xAxis,
-                        this.options.yAxis
-                    ].join(',');
-                if (this.options.clip !== false || animation) {
-                    this.sharedClipKey = sharedClipKey;
-                }
-                return sharedClipKey;
+            Series.prototype.getSharedClipKey = function () {
+                this.sharedClipKey = (this.options.xAxis || 0) + ',' +
+                    (this.options.yAxis || 0);
+                return this.sharedClipKey;
             };
             /**
-             * Set the clipping for the series. For animated series it is called
-             * twice, first to initiate animating the clip then the second time
-             * without the animation to set the final clip.
+             * Set the clipping for the series. For animated series the clip is later
+             * modified.
              *
              * @private
              * @function Highcharts.Series#setClip
              */
-            Series.prototype.setClip = function (animation) {
-                var chart = this.chart,
-                    options = this.options,
+            Series.prototype.setClip = function () {
+                var _a = this,
+                    chart = _a.chart,
+                    group = _a.group,
+                    markerGroup = _a.markerGroup,
+                    sharedClips = chart.sharedClips,
                     renderer = chart.renderer,
-                    inverted = chart.inverted,
-                    seriesClipBox = this.clipBox,
-                    clipBox = this.getClipBox(animation),
-                    sharedClipKey = this.getSharedClipKey(animation); // #4526
-                    var clipRect = chart.sharedClips[sharedClipKey],
-                    markerClipRect = chart.sharedClips[sharedClipKey + 'm'];
-                if (animation) {
-                    clipBox.width = 0;
-                    if (inverted) {
-                        clipBox.x = chart.plotHeight +
-                            (options.clip !== false ? 0 : chart.plotTop);
-                    }
-                }
-                // If a clipping rectangle with the same properties is currently
-                // present in the chart, use that.
+                    clipBox = this.getClipBox(),
+                    sharedClipKey = this.getSharedClipKey(); // #4526
+                    var clipRect = sharedClips[sharedClipKey];
+                // If a clipping rectangle for the same set of axes does not exist,
+                // create it
                 if (!clipRect) {
-                    // When animation is set, prepare the initial positions
-                    if (animation) {
-                        chart.sharedClips[sharedClipKey + 'm'] = markerClipRect =
-                            renderer.clipRect(
-                            // include the width of the first marker
-                            inverted ? (chart.plotSizeX || 0) + 99 : -99, inverted ? -chart.plotLeft : -chart.plotTop, 99, inverted ? chart.chartWidth : chart.chartHeight);
-                    }
-                    chart.sharedClips[sharedClipKey] = clipRect = renderer.clipRect(clipBox);
-                    // Create hashmap for series indexes
-                    clipRect.count = { length: 0 };
-                    // When the series is rendered again before starting animating, in
-                    // compliance to a responsive rule
+                    sharedClips[sharedClipKey] = clipRect = renderer.clipRect(clipBox);
+                    // When setting chart size, or when the series is rendered again before
+                    // starting animating, in compliance to a responsive rule
                 }
-                else if (!chart.hasLoaded) {
-                    clipRect.attr(clipBox);
+                else {
+                    clipRect.animate(clipBox);
                 }
-                if (animation) {
-                    if (!clipRect.count[this.index]) {
-                        clipRect.count[this.index] = true;
-                        clipRect.count.length += 1;
-                    }
+                if (group) {
+                    // When clip is false, reset to no clip after animation
+                    group.clip(this.options.clip === false ? void 0 : clipRect);
                 }
-                if (options.clip !== false || animation) {
-                    this.group.clip(animation || seriesClipBox ? clipRect : chart.clipRect);
-                    this.markerGroup.clip(markerClipRect);
-                }
-                // Remove the shared clipping rectangle when all series are shown
-                if (!animation) {
-                    if (clipRect.count[this.index]) {
-                        delete clipRect.count[this.index];
-                        clipRect.count.length -= 1;
-                    }
-                    if (clipRect.count.length === 0) {
-                        if (!seriesClipBox) {
-                            chart.sharedClips[sharedClipKey] = clipRect.destroy();
-                        }
-                        if (markerClipRect) {
-                            chart.sharedClips[sharedClipKey + 'm'] = markerClipRect.destroy();
-                        }
-                    }
+                // Unclip temporary animation clip
+                if (markerGroup) {
+                    markerGroup.clip();
                 }
             };
             /**
              * Animate in the series. Called internally twice. First with the `init`
              * parameter set to true, which sets up the initial state of the
              * animation. Then when ready, it is called with the `init` parameter
-             * undefined, in order to perform the actual animation. After the
-             * second run, the function is removed.
+             * undefined, in order to perform the actual animation.
              *
              * @function Highcharts.Series#animate
              *
@@ -37353,29 +37229,70 @@
              * Initialize the animation.
              */
             Series.prototype.animate = function (init) {
-                var series = this,
-                    chart = series.chart,
-                    animation = animObject(series.options.animation),
-                    sharedClipKey = this.sharedClipKey;
+                var _a = this, chart = _a.chart, group = _a.group, markerGroup = _a.markerGroup, inverted = chart.inverted, animation = animObject(this.options.animation), 
+                    // The key for temporary animation clips
+                    animationClipKey = [
+                        this.getSharedClipKey(),
+                        animation.duration,
+                        animation.easing,
+                        animation.defer
+                    ].join(',');
+                var animationClipRect = chart.sharedClips[animationClipKey],
+                    markerAnimationClipRect = chart.sharedClips[animationClipKey + 'm'];
                 // Initialize the animation. Set up the clipping rectangle.
-                if (init) {
-                    series.setClip(animation);
+                if (init && group) {
+                    var clipBox = this.getClipBox();
+                    // Create temporary animation clips
+                    if (!animationClipRect) {
+                        clipBox.width = 0;
+                        if (inverted) {
+                            clipBox.x = chart.plotHeight;
+                        }
+                        animationClipRect = chart.renderer.clipRect(clipBox);
+                        chart.sharedClips[animationClipKey] = animationClipRect;
+                        var markerClipBox = {
+                                // Include the width of the first marker
+                                x: inverted ? (chart.plotSizeX || 0) + 99 : -99,
+                                y: inverted ? -chart.plotLeft : -chart.plotTop,
+                                width: 99,
+                                height: inverted ? chart.chartWidth : chart.chartHeight
+                            };
+                        markerAnimationClipRect = chart.renderer.clipRect(markerClipBox);
+                        chart.sharedClips[animationClipKey + 'm'] = markerAnimationClipRect;
+                    }
+                    else {
+                        // When height changes during animation, typically due to
+                        // responsive settings
+                        animationClipRect.attr('height', clipBox.height);
+                    }
+                    group.clip(animationClipRect);
+                    if (markerGroup) {
+                        markerGroup.clip(markerAnimationClipRect);
+                    }
                     // Run the animation
                 }
-                else if (sharedClipKey) {
-                    var clipRect = chart.sharedClips[sharedClipKey];
-                    var markerClipRect = chart.sharedClips[sharedClipKey + 'm'];
-                    var finalBox = series.getClipBox(animation,
-                        true);
-                    if (clipRect) {
-                        clipRect.animate(finalBox, animation);
-                    }
-                    if (markerClipRect) {
-                        markerClipRect.animate({
-                            width: finalBox.width + 99,
-                            x: finalBox.x - (chart.inverted ? 0 : 99)
-                        }, animation);
+                else if (animationClipRect &&
+                    // Only first series in this pane
+                    !animationClipRect.hasClass('highcharts-animating')) {
+                    var finalBox = this.getClipBox(),
+                        step_1 = animation.step;
+                    // Only do this when there are actually markers
+                    if (markerGroup && markerGroup.element.childNodes.length) {
+                        // To provide as smooth animation as possible, update the marker
+                        // group clipping in steps of the main group animation
+                        animation.step = function (val, fx) {
+                            if (step_1) {
+                                step_1.apply(fx, arguments);
+                            }
+                            if (markerAnimationClipRect &&
+                                markerAnimationClipRect.element) {
+                                markerAnimationClipRect.attr(fx.prop, fx.prop === 'width' ? val + 99 : val);
+                            }
+                        };
                     }
+                    animationClipRect
+                        .addClass('highcharts-animating')
+                        .animate(finalBox, animation);
                 }
             };
             /**
@@ -37384,12 +37301,20 @@
              * @private
              * @function Highcharts.Series#afterAnimate
              *
-             * @fires Highcharts.Series#event:afterAnimate
+             * @emits Highcharts.Series#event:afterAnimate
              */
             Series.prototype.afterAnimate = function () {
+                var _this = this;
                 this.setClip();
-                fireEvent(this, 'afterAnimate');
+                // Destroy temporary clip rectangles that are no longer in use
+                objectEach(this.chart.sharedClips, function (clip, key, sharedClips) {
+                    if (clip && !_this.chart.container.querySelector("[clip-path=\"url(#" + clip.id + ")\"]")) {
+                        clip.destroy();
+                        delete sharedClips[key];
+                    }
+                });
                 this.finishedAnimating = true;
+                fireEvent(this, 'afterAnimate');
             };
             /**
              * Draw the markers for line-like series types, and columns or other
@@ -37597,7 +37522,7 @@
                 // Handle hover and select states
                 state = state || 'normal';
                 if (state) {
-                    seriesStateOptions = seriesMarkerOptions.states[state];
+                    seriesStateOptions = (seriesMarkerOptions.states[state] || {});
                     pointStateOptions = (pointMarkerOptions.states &&
                         pointMarkerOptions.states[state]) || {};
                     strokeWidth = pick(pointStateOptions.lineWidth, seriesStateOptions.lineWidth, strokeWidth + pick(pointStateOptions.lineWidthPlus, seriesStateOptions.lineWidthPlus, 0));
@@ -37622,7 +37547,7 @@
              * @private
              * @function Highcharts.Series#destroy
              *
-             * @fires Highcharts.Series#event:destroy
+             * @emits Highcharts.Series#event:destroy
              */
             Series.prototype.destroy = function (keepEventsForUpdate) {
                 var series = this,
@@ -37917,8 +37842,6 @@
              * Get the translation and scale for the plot area of this series.
              *
              * @function Highcharts.Series#getPlotBox
-             *
-             * @return {Highcharts.SeriesPlotBoxObject}
              */
             Series.prototype.getPlotBox = function () {
                 var chart = this.chart;
@@ -37963,7 +37886,7 @@
              *
              * @function Highcharts.Series#render
              *
-             * @fires Highcharts.Series#event:afterRender
+             * @emits Highcharts.Series#event:afterRender
              */
             Series.prototype.render = function () {
                 var series = this,
@@ -37978,15 +37901,18 @@
                     inverted = chart.inverted;
                 // Animation doesn't work in IE8 quirks when the group div is
                 // hidden, and looks bad in other oldIE
-                var animDuration = (!series.finishedAnimating &&
-                        chart.renderer.isSVG &&
-                        animOptions.duration);
+                var animDuration = (!series.finishedAnimating && chart.renderer.isSVG) ?
+                        animOptions.duration : 0;
                 fireEvent(this, 'render');
                 // the group
                 var group = series.plotGroup('group', 'series', visibility, zIndex, chartSeriesGroup);
                 series.markerGroup = series.plotGroup('markerGroup', 'markers', visibility, zIndex, chartSeriesGroup);
-                // initiate the animation
-                if (animDuration && series.animate) {
+                // Initial clipping, applies to columns etc. (#3839).
+                if (options.clip !== false) {
+                    series.setClip();
+                }
+                // Initialize the animation
+                if (series.animate && animDuration) {
                     series.animate(true);
                 }
                 // SVGRenderer needs to know this before drawing elements (#1089,
@@ -38002,11 +37928,6 @@
                 if (series.visible) {
                     series.drawPoints();
                 }
-                /* series.points.forEach(function (point) {
-                    if (point.redraw) {
-                        point.redraw();
-                    }
-                }); */
                 // Draw the data labels
                 if (series.drawDataLabels) {
                     series.drawDataLabels();
@@ -38023,15 +37944,8 @@
                 }
                 // Handle inverted series and tracker groups
                 series.invertGroups(inverted);
-                // Initial clipping, must be defined after inverting groups for VML.
-                // Applies to columns etc. (#3839).
-                if (options.clip !== false &&
-                    !series.sharedClipKey &&
-                    !hasRendered) {
-                    group.clip(chart.clipRect);
-                }
                 // Run the animation
-                if (animDuration && series.animate) {
+                if (series.animate && animDuration) {
                     series.animate();
                 }
                 // Call the afterAnimate function on animation complete (but don't
@@ -38270,12 +38184,16 @@
              * @function Highcharts.Series#isPointInside
              */
             Series.prototype.isPointInside = function (point) {
-                var isInside = typeof point.plotY !== 'undefined' &&
+                var _a = this,
+                    chart = _a.chart,
+                    xAxis = _a.xAxis,
+                    yAxis = _a.yAxis,
+                    isInside = (typeof point.plotY !== 'undefined' &&
                         typeof point.plotX !== 'undefined' &&
                         point.plotY >= 0 &&
-                        point.plotY <= this.yAxis.len && // #3519
+                        point.plotY <= (yAxis ? yAxis.len : chart.plotHeight) &&
                         point.plotX >= 0 &&
-                        point.plotX <= this.xAxis.len;
+                        point.plotX <= (xAxis ? xAxis.len : chart.plotWidth));
                 return isInside;
             };
             /**
@@ -38414,7 +38332,7 @@
              * @param {boolean} [withEvent=true]
              *        Used internally, whether to fire the series `addPoint` event.
              *
-             * @fires Highcharts.Series#event:addPoint
+             * @emits Highcharts.Series#event:addPoint
              */
             Series.prototype.addPoint = function (options, redraw, shift, animation, withEvent) {
                 var series = this,
@@ -38506,7 +38424,7 @@
              * @param {boolean|Partial<Highcharts.AnimationOptionsObject>} [animation]
              *        Whether and optionally how the series should be animated.
              *
-             * @fires Highcharts.Point#event:remove
+             * @emits Highcharts.Point#event:remove
              */
             Series.prototype.removePoint = function (i, redraw, animation) {
                 var series = this,
@@ -38560,7 +38478,7 @@
              * @param {boolean} [withEvent=true]
              *        Used internally, whether to fire the series `remove` event.
              *
-             * @fires Highcharts.Series#event:remove
+             * @emits Highcharts.Series#event:remove
              */
             Series.prototype.remove = function (redraw, animation, withEvent, keepEvents) {
                 var series = this,
@@ -38610,8 +38528,8 @@
              *        more operations on the chart, it is a good idea to set redraw to
              *        false and call {@link Chart#redraw} after.
              *
-             * @fires Highcharts.Series#event:update
-             * @fires Highcharts.Series#event:afterUpdate
+             * @emits Highcharts.Series#event:update
+             * @emits Highcharts.Series#event:afterUpdate
              */
             Series.prototype.update = function (options, redraw) {
                 options = cleanRecursively(options, this.userOptions);
@@ -38693,7 +38611,9 @@
                         series.index : oldOptions.index,
                     pointStart: pick(
                     // when updating from blank (#7933)
-                    plotOptions && plotOptions.series && plotOptions.series.pointStart, oldOptions.pointStart, 
+                    (plotOptions &&
+                        plotOptions.series &&
+                        plotOptions.series.pointStart), oldOptions.pointStart, 
                     // when updating after addPoint
                     series.xData[0])
                 }, (!keepPoints && { data: series.options.data }), options);
@@ -38723,8 +38643,7 @@
                             // Legacy (IE < 11)
                         }
                         else {
-                            var ownEvents = Object.hasOwnProperty.call(series, 'hcEvents') &&
-                                    series.hcEvents;
+                            var ownEvents = Object.hasOwnProperty.call(series, 'hcEvents') && series.hcEvents;
                             for (n in initialSeriesProto) { // eslint-disable-line guard-for-in
                                 series[n] = void 0;
                             }
@@ -38822,13 +38741,17 @@
                     return option !== oldOption;
                 }
                 return option !==
-                    pick(plotOptions && plotOptions[this.type] && plotOptions[this.type][optionName], plotOptions && plotOptions.series && plotOptions.series[optionName], option);
+                    pick(plotOptions &&
+                        plotOptions[this.type] &&
+                        plotOptions[this.type][optionName], plotOptions &&
+                        plotOptions.series &&
+                        plotOptions.series[optionName], option);
             };
             /**
              * Runs on mouse over the series graphical items.
              *
              * @function Highcharts.Series#onMouseOver
-             * @fires Highcharts.Series#event:mouseOver
+             * @emits Highcharts.Series#event:mouseOver
              */
             Series.prototype.onMouseOver = function () {
                 var series = this,
@@ -38860,7 +38783,7 @@
              *
              * @function Highcharts.Series#onMouseOut
              *
-             * @fires Highcharts.Series#event:mouseOut
+             * @emits Highcharts.Series#event:mouseOut
              */
             Series.prototype.onMouseOut = function () {
                 // trigger the event only if listeners exist
@@ -39015,8 +38938,8 @@
              * operations on the chart, it is a good idea to set redraw to false and
              * call {@link Chart#redraw|chart.redraw()} after.
              *
-             * @fires Highcharts.Series#event:hide
-             * @fires Highcharts.Series#event:show
+             * @emits Highcharts.Series#event:hide
+             * @emits Highcharts.Series#event:show
              */
             Series.prototype.setVisible = function (vis, redraw) {
                 var series = this,
@@ -39080,7 +39003,7 @@
              *         Toggle visibility from a button
              *
              * @function Highcharts.Series#show
-             * @fires Highcharts.Series#event:show
+             * @emits Highcharts.Series#event:show
              */
             Series.prototype.show = function () {
                 this.setVisible(true);
@@ -39094,7 +39017,7 @@
              *         Toggle visibility from a button
              *
              * @function Highcharts.Series#hide
-             * @fires Highcharts.Series#event:hide
+             * @emits Highcharts.Series#event:hide
              */
             Series.prototype.hide = function () {
                 this.setVisible(false);
@@ -39115,8 +39038,8 @@
              * True to select the series, false to unselect. If undefined, the selection
              * state is toggled.
              *
-             * @fires Highcharts.Series#event:select
-             * @fires Highcharts.Series#event:unselect
+             * @emits Highcharts.Series#event:select
+             * @emits Highcharts.Series#event:unselect
              */
             Series.prototype.select = function (selected) {
                 var series = this;
@@ -39134,10 +39057,6 @@
              * Checks if a tooltip should be shown for a given point.
              *
              * @private
-             * @param {number} plotX
-             * @param {number} plotY
-             * @param {Highcharts.ChartIsInsideOptionsObject} [options]
-             * @return {boolean}
              */
             Series.prototype.shouldShowTooltip = function (plotX, plotY, options) {
                 if (options === void 0) { options = {}; }
@@ -39574,7 +39493,7 @@
                 if (scrollableMinWidth) {
                     this.scrollablePixelsX = scrollablePixelsX = Math.max(0, scrollableMinWidth - this.chartWidth);
                     if (scrollablePixelsX) {
-                        this.scrollablePlotBox = this.renderer.scrollablePlotBox = merge(this.plotBox);
+                        this.scrollablePlotBox = (this.renderer.scrollablePlotBox = merge(this.plotBox));
                         this.plotBox.width = this.plotWidth += scrollablePixelsX;
                         if (this.inverted) {
                             this.clipBox.height += scrollablePixelsX;
@@ -39592,7 +39511,7 @@
                 else if (scrollableMinHeight) {
                     this.scrollablePixelsY = scrollablePixelsY = Math.max(0, scrollableMinHeight - this.chartHeight);
                     if (scrollablePixelsY) {
-                        this.scrollablePlotBox = this.renderer.scrollablePlotBox = merge(this.plotBox);
+                        this.scrollablePlotBox = (this.renderer.scrollablePlotBox = merge(this.plotBox));
                         this.plotBox.height = this.plotHeight += scrollablePixelsY;
                         if (this.inverted) {
                             this.clipBox.width += scrollablePixelsY;
@@ -40136,7 +40055,8 @@
                         chart = axis.chart,
                         renderer = chart.renderer,
                         stacks = stacking.stacks,
-                        stackLabelsAnim = axis.options.stackLabels && axis.options.stackLabels.animation,
+                        stackLabelsAnim = axis.options.stackLabels &&
+                            axis.options.stackLabels.animation,
                         animationConfig = getDeferredAnimation(chart,
                         stackLabelsAnim || false),
                         stackTotalGroup = stacking.stackTotalGroup = (stacking.stackTotalGroup ||
@@ -40283,6 +40203,7 @@
                         r: options.borderRadius || 0,
                         text: str,
                         rotation: options.rotation,
+                        // set default padding to 5 as it is in datalabels #12308
                         padding: pick(options.padding, 5),
                         visibility: 'hidden' // hidden until setOffset is called
                     };
@@ -40358,7 +40279,8 @@
                         }
                         else {
                             boxOffsetX = chart.inverted ?
-                                (isNegative ? bBox.width + padding : -padding) : bBox.width / 2;
+                                (isNegative ? bBox.width + padding : -padding) :
+                                bBox.width / 2;
                         }
                     }
                     boxOffsetY = chart.inverted ?
@@ -40403,22 +40325,6 @@
             /**
              * @private
              * @function Highcharts.StackItem#getStackBox
-             *
-             * @param {Highcharts.Chart} chart
-             *
-             * @param {Highcharts.StackItem} stackItem
-             *
-             * @param {number} x
-             *
-             * @param {number} y
-             *
-             * @param {number} xWidth
-             *
-             * @param {number} h
-             *
-             * @param {Highcharts.Axis} axis
-             *
-             * @return {Highcharts.BBoxObject}
              */
             StackItem.prototype.getStackBox = function (chart, stackItem, x, y, xWidth, h, axis) {
                 var reversed = stackItem.axis.reversed,
@@ -40428,7 +40334,8 @@
                     neg = (stackItem.isNegative && !reversed) ||
                         (!stackItem.isNegative && reversed); // #4056
                     return {
-                        x: inverted ? (neg ? y - axis.right : y - h + axis.pos - chart.plotLeft) :
+                        x: inverted ?
+                            (neg ? y - axis.right : y - h + axis.pos - chart.plotLeft) :
                             x + chart.xAxis[0].transB - chart.plotLeft,
                         y: inverted ?
                             axis.height - x - xWidth :
@@ -40672,11 +40579,6 @@
          *
          * @private
          * @function Highcharts.Series#getStackIndicator
-         * @param {Highcharts.StackItemIndicatorObject|undefined} stackIndicator
-         * @param {number} x
-         * @param {number} index
-         * @param {string} [key]
-         * @return {Highcharts.StackItemIndicatorObject}
          */
         Series.prototype.getStackIndicator = function (stackIndicator, x, index, key) {
             // Update stack indicator, when:
@@ -40747,7 +40649,7 @@
 
         return H.StackItem;
     });
-    _registerModule(_modules, 'Series/Line/LineSeries.js', [_modules['Core/Color/Palette.js'], _modules['Core/Series/Series.js'], _modules['Core/Series/SeriesRegistry.js'], _modules['Core/Utilities.js']], function (Palette, Series, SeriesRegistry, U) {
+    _registerModule(_modules, 'Series/Line/LineSeries.js', [_modules['Core/Series/Series.js'], _modules['Core/Series/SeriesRegistry.js'], _modules['Core/Utilities.js']], function (Series, SeriesRegistry, U) {
         /* *
          *
          *  (c) 2010-2021 Torstein Honsi
@@ -40832,7 +40734,7 @@
                 if (!styledMode) {
                     props[0].push((options.lineColor ||
                         this.color ||
-                        Palette.neutralColor20 // when colorByPoint = true
+                        "#cccccc" /* neutralColor20 */ // when colorByPoint = true
                     ), options.dashStyle);
                 }
                 props = series.getZonesGraphs(props);
@@ -41490,7 +41392,9 @@
                     }
                     isNull = points[i].isNull;
                     plotX = pick(points[i].rectPlotX, points[i].plotX);
-                    yBottom = stacking ? pick(points[i].yBottom, translatedThreshold) : translatedThreshold;
+                    yBottom = stacking ?
+                        pick(points[i].yBottom, translatedThreshold) :
+                        translatedThreshold;
                     if (!isNull || connectNulls) {
                         if (!connectNulls) {
                             addDummyPoints(i, i - 1, 'left');
@@ -41594,24 +41498,22 @@
                                         var si = yAxisSeries[i].index;
                                         stackPoint = otherStack.points[si];
                                         if (!stackPoint) {
-                                            // If the next point in this series
-                                            // is missing, mark the point
-                                            // with point.leftNull or
-                                            // point.rightNull = true.
+                                            // If the next point in this series is
+                                            // missing, mark the point with
+                                            // point.leftNull or point.rightNull = true.
                                             if (si === series.index) {
                                                 pointMap[x][nullName] = true;
-                                                // If there are missing points in
-                                                // the next stack in any of the
-                                                // series below this one, we need
-                                                // to substract the missing values
-                                                // and add a hiatus to the left or
+                                                // If there are missing points in the next
+                                                // stack in any of the series below this
+                                                // one, we need to substract the missing
+                                                // values and add a hiatus to the left or
                                                 // right.
                                             }
                                             else if (visibleSeries_1[i]) {
-                                                stackedValues =
-                                                    stack[x].points[si];
+                                                stackedValues = stack[x].points[si];
                                                 if (stackedValues) {
-                                                    cliff -= stackedValues[1] - stackedValues[0];
+                                                    cliff -= (stackedValues[1] -
+                                                        stackedValues[0]);
                                                 }
                                             }
                                         }
@@ -41960,14 +41862,6 @@
              *
              * @private
              * @function Highcharts.seriesTypes.spline#getPointSpline
-             *
-             * @param {Array<Highcharts.Point>}
-             *
-             * @param {Highcharts.Point} point
-             *
-             * @param {number} i
-             *
-             * @return {Highcharts.SVGPathArray}
              */
             SplineSeries.prototype.getPointSpline = function (points, point, i) {
                 var 
@@ -42404,7 +42298,7 @@
 
         return AreaSplineSeries;
     });
-    _registerModule(_modules, 'Series/Column/ColumnSeries.js', [_modules['Core/Animation/AnimationUtilities.js'], _modules['Core/Color/Color.js'], _modules['Core/Globals.js'], _modules['Core/Legend/LegendSymbol.js'], _modules['Core/Color/Palette.js'], _modules['Core/Series/Series.js'], _modules['Core/Series/SeriesRegistry.js'], _modules['Core/Utilities.js']], function (A, Color, H, LegendSymbol, Palette, Series, SeriesRegistry, U) {
+    _registerModule(_modules, 'Series/Column/ColumnSeries.js', [_modules['Core/Animation/AnimationUtilities.js'], _modules['Core/Color/Color.js'], _modules['Core/Globals.js'], _modules['Core/Legend/LegendSymbol.js'], _modules['Core/Series/Series.js'], _modules['Core/Series/SeriesRegistry.js'], _modules['Core/Utilities.js']], function (A, Color, H, LegendSymbol, Series, SeriesRegistry, U) {
         /* *
          *
          *  (c) 2010-2021 Torstein Honsi
@@ -42502,7 +42396,9 @@
                     options = series.options,
                     inverted = this.chart.inverted,
                     attr = {},
-                    translateProp = inverted ? 'translateX' : 'translateY';
+                    translateProp = inverted ?
+                        'translateX' :
+                        'translateY';
                 var translateStart,
                     translatedThreshold;
                 if (init) {
@@ -42563,7 +42459,6 @@
              *
              * @private
              * @function Highcharts.seriesTypes.column#getColumnMetrics
-             * @return {Highcharts.ColumnMetricsObject}
              */
             ColumnSeries.prototype.getColumnMetrics = function () {
                 var series = this,
@@ -42594,7 +42489,8 @@
                                 !series.chart.options.chart.ignoreHiddenSeries) &&
                             yAxis.len === otherYAxis.len &&
                             yAxis.pos === otherYAxis.pos) { // #642, #2086
-                            if (otherOptions.stacking && otherOptions.stacking !== 'group') {
+                            if (otherOptions.stacking &&
+                                otherOptions.stacking !== 'group') {
                                 stackKey = otherSeries.stackKey;
                                 if (typeof stackGroups[stackKey] ===
                                     'undefined') {
@@ -42706,21 +42602,21 @@
                 if (!point.isNull && metrics.columnCount > 1) {
                     var indexInCategory_1 = 0;
                     var totalInCategory_1 = 0;
-                    // Loop over all the stacks on the Y axis. When stacking is
-                    // enabled, these are real point stacks. When stacking is not
-                    // enabled, but `centerInCategory` is true, there is one stack
-                    // handling the grouping of points in each category. This is
-                    // done in the `setGroupedPoints` function.
+                    // Loop over all the stacks on the Y axis. When stacking is enabled,
+                    // these are real point stacks. When stacking is not enabled, but
+                    // `centerInCategory` is true, there is one stack handling the
+                    // grouping of points in each category. This is done in the
+                    // `setGroupedPoints` function.
                     objectEach(this.yAxis.stacking && this.yAxis.stacking.stacks, function (stack) {
                         if (typeof point.x === 'number') {
                             var stackItem = stack[point.x.toString()];
                             if (stackItem) {
                                 var pointValues = stackItem.points[_this.index],
                                     total = stackItem.total;
-                                // If true `stacking` is enabled, count the
-                                // total number of non-null stacks in the
-                                // category, and note which index this point is
-                                // within those stacks.
+                                // If true `stacking` is enabled, count the total
+                                // number of non-null stacks in the category, and
+                                // note which index this point is within those
+                                // stacks.
                                 if (stacking) {
                                     if (pointValues) {
                                         indexInCategory_1 = totalInCategory_1;
@@ -42728,8 +42624,8 @@
                                     if (stackItem.hasValidPoints) {
                                         totalInCategory_1++;
                                     }
-                                    // If `stacking` is not enabled, look for the
-                                    // index and total of the `group` stack.
+                                    // If `stacking` is not enabled, look for the index
+                                    // and total of the `group` stack.
                                 }
                                 else if (isArray(pointValues)) {
                                     indexInCategory_1 = pointValues[1];
@@ -43385,7 +43281,7 @@
                          * @default #cccccc
                          * @product highcharts highstock gantt
                          */
-                        color: Palette.neutralColor20,
+                        color: "#cccccc" /* neutralColor20 */,
                         /**
                          * A specific border color for the selected point.
                          *
@@ -43393,7 +43289,7 @@
                          * @default #000000
                          * @product highcharts highstock gantt
                          */
-                        borderColor: Palette.neutralColor100
+                        borderColor: "#000000" /* neutralColor100 */
                     }
                 },
                 dataLabels: {
@@ -43460,7 +43356,7 @@
                  *
                  * @private
                  */
-                borderColor: Palette.backgroundColor
+                borderColor: "#ffffff" /* backgroundColor */
             });
             return ColumnSeries;
         }(Series));
@@ -43651,7 +43547,7 @@
 
         return ColumnSeries;
     });
-    _registerModule(_modules, 'Core/Series/DataLabel.js', [_modules['Core/Animation/AnimationUtilities.js'], _modules['Core/FormatUtilities.js'], _modules['Core/Color/Palette.js'], _modules['Core/Utilities.js']], function (A, F, Palette, U) {
+    _registerModule(_modules, 'Core/Series/DataLabel.js', [_modules['Core/Animation/AnimationUtilities.js'], _modules['Core/FormatUtilities.js'], _modules['Core/Utilities.js']], function (A, F, U) {
         /* *
          *
          *  (c) 2010-2021 Torstein Honsi
@@ -43932,8 +43828,10 @@
                         // Merge in series options for the point.
                         // @note dataLabelAttribs (like pointAttribs) would eradicate
                         // the need for dlOptions, and simplify the section below.
-                        pointOptions = splat(mergeArrays(seriesDlOptions, point.dlOptions || // dlOptions is used in treemaps
-                            (point.options && point.options.dataLabels)));
+                        pointOptions = splat(mergeArrays(seriesDlOptions, 
+                        // dlOptions is used in treemaps
+                        (point.dlOptions ||
+                            (point.options && point.options.dataLabels))));
                         // Handle each individual data label for this point
                         pointOptions.forEach(function (labelOptions, i) {
                             // Options for one datalabel
@@ -43951,8 +43849,8 @@
                                 style,
                                 rotation,
                                 attr,
-                                dataLabel = point.dataLabels ? point.dataLabels[i] :
-                                    point.dataLabel;
+                                dataLabel = point.dataLabels ?
+                                    point.dataLabels[i] : point.dataLabel;
                             var labelDistance = pick(labelOptions.distance,
                                 point.labelDistance),
                                 isNew = !dataLabel;
@@ -43969,7 +43867,7 @@
                                 rotation = labelOptions.rotation;
                                 if (!chart.styledMode) {
                                     // Determine the color
-                                    style.color = pick(labelOptions.color, style.color, series.color, Palette.neutralColor100);
+                                    style.color = pick(labelOptions.color, style.color, series.color, "#000000" /* neutralColor100 */);
                                     // Get automated contrast color
                                     if (style.color === 'contrast') {
                                         point.contrastColor = renderer.getContrast((point.color || series.color));
@@ -43978,7 +43876,7 @@
                                             labelDistance < 0 ||
                                             !!seriesOptions.stacking ?
                                             point.contrastColor :
-                                            Palette.neutralColor100;
+                                            "#000000" /* neutralColor100 */;
                                     }
                                     else {
                                         delete point.contrastColor;
@@ -44007,8 +43905,10 @@
                             }
                             // If the point is outside the plot area, destroy it. #678,
                             // #820
-                            if (dataLabel && (!labelEnabled || !defined(labelText))) {
-                                point.dataLabel =
+                            if (dataLabel && (!labelEnabled ||
+                                !defined(labelText) ||
+                                !!dataLabel.div !== !!labelOptions.useHTML)) {
+                                point.dataLabel = dataLabel =
                                     point.dataLabel && point.dataLabel.destroy();
                                 if (point.dataLabels) {
                                     // Remove point.dataLabels if this was the last one
@@ -44035,11 +43935,11 @@
                                         }
                                     }
                                 }
-                                // Individual labels are disabled if the are explicitly
-                                // disabled in the point options, or if they fall outside
-                                // the plot area.
                             }
-                            else if (labelEnabled && defined(labelText)) {
+                            // Individual labels are disabled if the are explicitly
+                            // disabled in the point options, or if they fall outside
+                            // the plot area.
+                            if (labelEnabled && defined(labelText)) {
                                 if (!dataLabel) {
                                     // Create new label element
                                     point.dataLabels = point.dataLabels || [];
@@ -44053,7 +43953,8 @@
                                     if (!i) {
                                         point.dataLabel = dataLabel;
                                     }
-                                    dataLabel.addClass(' highcharts-data-label-color-' + point.colorIndex +
+                                    dataLabel.addClass(' highcharts-data-label-color-' +
+                                        point.colorIndex +
                                         ' ' + (labelOptions.className || '') +
                                         ( // #3398
                                         labelOptions.useHTML ?
@@ -44081,7 +43982,7 @@
                                     if (point.dataLabelPath &&
                                         !labelOptions.textPath.enabled) {
                                         // clean the DOM
-                                        point.dataLabelPath = point.dataLabelPath.destroy();
+                                        point.dataLabelPath = (point.dataLabelPath.destroy());
                                     }
                                 }
                                 // Now the data label is created and placed at 0,0, so
@@ -44314,13 +44215,15 @@
              */
             function alignDataLabel(point, dataLabel, options, alignTo, isNew) {
                 var inverted = this.chart.inverted,
-                    series = point.series, 
+                    series = point.series,
+                    xLen = (series.xAxis ? series.xAxis.len : this.chart.plotSizeX) || 0,
+                    yLen = (series.yAxis ? series.yAxis.len : this.chart.plotSizeY) || 0, 
                     // data label box for alignment
                     dlBox = point.dlBox || point.shapeArgs,
                     below = pick(point.below, // range series
                     point.plotY >
                         pick(this.translatedThreshold,
-                    series.yAxis.len)), 
+                    yLen)), 
                     // draw it inside the box?
                     inside = pick(options.inside, !!this.options.stacking),
                     overshoot;
@@ -44333,14 +44236,14 @@
                     }
                     // If parts of the box overshoots outside the plot area, modify the
                     // box to center the label inside
-                    overshoot = alignTo.y + alignTo.height - series.yAxis.len;
+                    overshoot = alignTo.y + alignTo.height - yLen;
                     if (overshoot > 0 && overshoot < alignTo.height) {
                         alignTo.height -= overshoot;
                     }
                     if (inverted) {
                         alignTo = {
-                            x: series.yAxis.len - alignTo.y - alignTo.height,
-                            y: series.xAxis.len - alignTo.x - alignTo.width,
+                            x: yLen - alignTo.y - alignTo.height,
+                            y: xLen - alignTo.x - alignTo.width,
                             width: alignTo.height,
                             height: alignTo.width
                         };
@@ -44879,7 +44782,7 @@
 
         return ScatterSeries;
     });
-    _registerModule(_modules, 'Mixins/CenteredSeries.js', [_modules['Core/Globals.js'], _modules['Core/Series/Series.js'], _modules['Core/Utilities.js']], function (H, Series, U) {
+    _registerModule(_modules, 'Series/CenteredUtilities.js', [_modules['Core/Globals.js'], _modules['Core/Series/Series.js'], _modules['Core/Utilities.js']], function (H, Series, U) {
         /* *
          *
          *  (c) 2010-2021 Torstein Honsi
@@ -44889,63 +44792,60 @@
          *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
          *
          * */
-        /**
-         * @private
-         * @interface Highcharts.RadianAngles
-         */ /**
-        * @name Highcharts.RadianAngles#end
-        * @type {number}
-        */ /**
-        * @name Highcharts.RadianAngles#start
-        * @type {number}
-        */
+        var deg2rad = H.deg2rad;
         var isNumber = U.isNumber,
             pick = U.pick,
             relativeLength = U.relativeLength;
-        var deg2rad = H.deg2rad;
-        /* eslint-disable valid-jsdoc */
         /**
          * @private
-         * @mixin Highcharts.CenteredSeriesMixin
          */
-        var centeredSeriesMixin = H.CenteredSeriesMixin = {
-                /**
-                 * Get the center of the pie based on the size and center options relative
-                 * to the plot area. Borrowed by the polar and gauge series types.
-                 *
-                 * @private
-                 * @function Highcharts.CenteredSeriesMixin.getCenter
-                 *
-                 * @return {Array<number>}
-                 */
-                getCenter: function () {
-                    var options = this.options,
-            chart = this.chart,
-            slicingRoom = 2 * (options.slicedOffset || 0),
-            handleSlicingRoom,
-            plotWidth = chart.plotWidth - 2 * slicingRoom,
-            plotHeight = chart.plotHeight - 2 * slicingRoom,
-            centerOption = options.center,
-            smallestSize = Math.min(plotWidth,
-            plotHeight),
-            size = options.size,
-            innerSize = options.innerSize || 0,
-            positions,
-            i,
-            value;
+        var CenteredUtilities;
+        (function (CenteredUtilities) {
+            /* *
+             *
+             *  Declarations
+             *
+             * */
+            /* *
+             *
+             *  Functions
+             *
+             * */
+            /* eslint-disable valid-jsdoc */
+            /**
+             * Get the center of the pie based on the size and center options relative
+             * to the plot area. Borrowed by the polar and gauge series types.
+             *
+             * @private
+             * @function Highcharts.CenteredSeriesMixin.getCenter
+             */
+            function getCenter() {
+                var options = this.options,
+                    chart = this.chart,
+                    slicingRoom = 2 * (options.slicedOffset || 0),
+                    plotWidth = chart.plotWidth - 2 * slicingRoom,
+                    plotHeight = chart.plotHeight - 2 * slicingRoom,
+                    centerOption = options.center,
+                    smallestSize = Math.min(plotWidth,
+                    plotHeight);
+                var handleSlicingRoom,
+                    size = options.size,
+                    innerSize = options.innerSize || 0,
+                    i,
+                    value;
                 if (typeof size === 'string') {
                     size = parseFloat(size);
                 }
                 if (typeof innerSize === 'string') {
                     innerSize = parseFloat(innerSize);
                 }
-                positions = [
-                    pick(centerOption[0], '50%'),
-                    pick(centerOption[1], '50%'),
-                    // Prevent from negative values
-                    pick(size && size < 0 ? void 0 : options.size, '100%'),
-                    pick(innerSize && innerSize < 0 ? void 0 : options.innerSize || 0, '0%')
-                ];
+                var positions = [
+                        pick(centerOption[0], '50%'),
+                        pick(centerOption[1], '50%'),
+                        // Prevent from negative values
+                        pick(size && size < 0 ? void 0 : options.size, '100%'),
+                        pick(innerSize && innerSize < 0 ? void 0 : options.innerSize || 0, '0%')
+                    ];
                 // No need for inner size in angular (gauges) series but still required
                 // for pie series
                 if (chart.angular && !(this instanceof Series)) {
@@ -44965,7 +44865,8 @@
                     positions[3] = positions[2];
                 }
                 return positions;
-            },
+            }
+            CenteredUtilities.getCenter = getCenter;
             /**
              * getStartAndEndRadians - Calculates start and end angles in radians.
              * Used in series types such as pie and sunburst.
@@ -44982,7 +44883,7 @@
              * @return {Highcharts.RadianAngles}
              *         Returns an object containing start and end angles as radians.
              */
-            getStartAndEndRadians: function (start, end) {
+            function getStartAndEndRadians(start, end) {
                 var startAngle = isNumber(start) ? start : 0, // must be a number
                     endAngle = ((isNumber(end) && // must be a number
                         end > startAngle && // must be larger than the start angle
@@ -44996,9 +44897,31 @@
                     end: deg2rad * (endAngle + correction)
                 };
             }
-        };
+            CenteredUtilities.getStartAndEndRadians = getStartAndEndRadians;
+        })(CenteredUtilities || (CenteredUtilities = {}));
+        /* *
+         *
+         *  Default Export
+         *
+         * */
+        /* *
+         *
+         *  API Declarations
+         *
+         * */
+        /**
+         * @private
+         * @interface Highcharts.RadianAngles
+         */ /**
+        * @name Highcharts.RadianAngles#end
+        * @type {number}
+        */ /**
+        * @name Highcharts.RadianAngles#start
+        * @type {number}
+        */
+        ''; // keeps doclets above in JS file
 
-        return centeredSeriesMixin;
+        return CenteredUtilities;
     });
     _registerModule(_modules, 'Series/Pie/PiePoint.js', [_modules['Core/Animation/AnimationUtilities.js'], _modules['Core/Series/Point.js'], _modules['Core/Utilities.js']], function (A, Point, U) {
         /* *
@@ -45179,10 +45102,10 @@
              * @param {boolean} sliced
              * When undefined, the slice state is toggled.
              *
-             * @param {boolean} redraw
+             * @param {boolean} [redraw]
              * Whether to redraw the chart. True by default.
              *
-             * @param {boolean|Partial<Highcharts.AnimationOptionsObject>}
+             * @param {boolean|Partial<Highcharts.AnimationOptionsObject>} [animation]
              * Animation options.
              */
             PiePoint.prototype.slice = function (sliced, redraw, animation) {
@@ -45296,7 +45219,7 @@
 
         return PiePoint;
     });
-    _registerModule(_modules, 'Series/Pie/PieSeries.js', [_modules['Mixins/CenteredSeries.js'], _modules['Series/Column/ColumnSeries.js'], _modules['Core/Globals.js'], _modules['Core/Legend/LegendSymbol.js'], _modules['Core/Color/Palette.js'], _modules['Series/Pie/PiePoint.js'], _modules['Core/Series/Series.js'], _modules['Core/Series/SeriesRegistry.js'], _modules['Core/Renderer/SVG/Symbols.js'], _modules['Core/Utilities.js']], function (CenteredSeriesMixin, ColumnSeries, H, LegendSymbol, Palette, PiePoint, Series, SeriesRegistry, Symbols, U) {
+    _registerModule(_modules, 'Series/Pie/PieSeries.js', [_modules['Series/CenteredUtilities.js'], _modules['Series/Column/ColumnSeries.js'], _modules['Core/Globals.js'], _modules['Core/Legend/LegendSymbol.js'], _modules['Series/Pie/PiePoint.js'], _modules['Core/Series/Series.js'], _modules['Core/Series/SeriesRegistry.js'], _modules['Core/Renderer/SVG/Symbols.js'], _modules['Core/Utilities.js']], function (CU, ColumnSeries, H, LegendSymbol, PiePoint, Series, SeriesRegistry, Symbols, U) {
         /* *
          *
          *  (c) 2010-2021 Torstein Honsi
@@ -45322,7 +45245,7 @@
                 d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
             };
         })();
-        var getStartAndEndRadians = CenteredSeriesMixin.getStartAndEndRadians;
+        var getStartAndEndRadians = CU.getStartAndEndRadians;
         var noop = H.noop;
         var clamp = U.clamp,
             extend = U.extend,
@@ -45437,7 +45360,7 @@
                         this.graph.attr({
                             'stroke-width': options.borderWidth,
                             fill: options.fillColor || 'none',
-                            stroke: options.color || Palette.neutralColor20
+                            stroke: options.color || "#cccccc" /* neutralColor20 */
                         });
                     }
                 }
@@ -45836,7 +45759,7 @@
                  *         Empty pie series
                  *
                  * @type      {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
-                 * @default   ${palette.neutralColor20}
+                 * @default   #cccccc
                  * @apioption plotOptions.pie.color
                  */
                 /**
@@ -46237,7 +46160,7 @@
                  *
                  * @private
                  */
-                borderColor: Palette.backgroundColor,
+                borderColor: "#ffffff" /* backgroundColor */,
                 /**
                  * The width of the border surrounding each slice.
                  *
@@ -46258,7 +46181,7 @@
                  */
                 borderWidth: 1,
                 /**
-                 * @ignore-options
+                 * @ignore-option
                  * @private
                  */
                 lineWidth: void 0,
@@ -46294,7 +46217,7 @@
             drawGraph: void 0,
             drawLegendSymbol: LegendSymbol.drawRectangle,
             drawTracker: ColumnSeries.prototype.drawTracker,
-            getCenter: CenteredSeriesMixin.getCenter,
+            getCenter: CU.getCenter,
             getSymbol: noop,
             isCartesian: false,
             noSharedTooltip: true,
@@ -46406,7 +46329,7 @@
 
         return PieSeries;
     });
-    _registerModule(_modules, 'Series/Pie/PieDataLabel.js', [_modules['Core/Series/DataLabel.js'], _modules['Core/Globals.js'], _modules['Core/Color/Palette.js'], _modules['Core/Renderer/RendererUtilities.js'], _modules['Core/Series/SeriesRegistry.js'], _modules['Core/Utilities.js']], function (DataLabel, H, Palette, R, SeriesRegistry, U) {
+    _registerModule(_modules, 'Series/Pie/PieDataLabel.js', [_modules['Core/Series/DataLabel.js'], _modules['Core/Globals.js'], _modules['Core/Renderer/RendererUtilities.js'], _modules['Core/Series/SeriesRegistry.js'], _modules['Core/Utilities.js']], function (DataLabel, H, R, SeriesRegistry, U) {
         /* *
          *
          *  (c) 2010-2021 Torstein Honsi
@@ -46768,7 +46691,7 @@
                                             'stroke-width': connectorWidth,
                                             'stroke': (pointDataLabelsOptions.connectorColor ||
                                                 point.color ||
-                                                Palette.neutralColor60)
+                                                "#666666" /* neutralColor60 */)
                                         });
                                     }
                                 }
@@ -47036,7 +46959,8 @@
                     if (alignValue) {
                         xOffset = +alignValue * boxWidth;
                     }
-                    else if (isNumber(label.x) && Math.round(label.x) !== label.translateX) {
+                    else if (isNumber(label.x) &&
+                        Math.round(label.x) !== label.translateX) {
                         xOffset = label.x - label.translateX;
                     }
                     return {
@@ -47098,10 +47022,11 @@
          * @private
          * @function hideOrShow
          * @param {Highcharts.SVGElement} label
-         *        The label.
+         * The label.
          * @param {Highcharts.Chart} chart
-         *        The chart that contains the label.
+         * The chart that contains the label.
          * @return {boolean}
+         * Whether label is affected
          */
         function hideOrShow(label, chart) {
             var complete,
@@ -47110,13 +47035,15 @@
             if (label) {
                 newOpacity = label.newOpacity;
                 if (label.oldOpacity !== newOpacity) {
-                    // Make sure the label is completely hidden to avoid catching
-                    // clicks (#4362)
+                    // Make sure the label is completely hidden to avoid catching clicks
+                    // (#4362)
                     if (label.alignAttr && label.placed) { // data labels
                         label[newOpacity ? 'removeClass' : 'addClass']('highcharts-data-label-hidden');
                         complete = function () {
                             if (!chart.styledMode) {
-                                label.css({ pointerEvents: newOpacity ? 'auto' : 'none' });
+                                label.css({
+                                    pointerEvents: newOpacity ? 'auto' : 'none'
+                                });
                             }
                         };
                         isLabelAffected = true;
@@ -47278,8 +47205,7 @@
                         fn = condition.callback || function () {
                             return (this.chartWidth <= pick(condition.maxWidth,
                         Number.MAX_VALUE) &&
-                                this.chartHeight <=
-                                    pick(condition.maxHeight,
+                                this.chartHeight <= pick(condition.maxHeight,
                         Number.MAX_VALUE) &&
                                 this.chartWidth >= pick(condition.minWidth, 0) &&
                                 this.chartHeight >= pick(condition.minHeight, 0));
@@ -47322,7 +47248,7 @@
                     mergedOptions.isResponsiveOptions = true;
                     // Stringified key for the rules that currently apply.
                     ruleIds = (ruleIds.toString() || void 0);
-                    var currentRuleIds = currentResponsive && currentResponsive.ruleIds;
+                    var currentRuleIds = (currentResponsive && currentResponsive.ruleIds);
                     // Changes in what rules apply
                     if (ruleIds !== currentRuleIds) {
                         // Undo previous rules. Before we apply a new set of rules, we