highcharts 9.3.3 → 10.2.0

package/highcharts.src.js

@@ -1,11 +1,10 @@
 /**
- * @license Highcharts JS v9.3.3 (2022-02-01)
+ * @license Highcharts JS v10.2.0 (2022-07-05)
  *
  * (c) 2009-2021 Torstein Honsi
  *
  * License: www.highcharts.com/license
  */
-'use strict';
 (function (root, factory) {
     if (typeof module === 'object' && module.exports) {
         factory['default'] = factory;
@@ -22,11 +21,21 @@
         }
         root.Highcharts = factory(root);
     }
-}(typeof window !== 'undefined' ? window : this, function (win) {
+}(typeof window !== 'undefined' ? window : this, function (window) {
+    'use strict';
     var _modules = {};
     function _registerModule(obj, path, args, fn) {
         if (!obj.hasOwnProperty(path)) {
             obj[path] = fn.apply(null, args);
+
+            if (typeof CustomEvent === 'function') {
+                window.dispatchEvent(
+                    new CustomEvent(
+                        'HighchartsModuleLoaded',
+                        { detail: { path: path, module: obj[path] }
+                    })
+                );
+            }
         }
     }
     _registerModule(_modules, 'Core/Globals.js', [], function () {
@@ -39,23 +48,6 @@
          *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
          *
          * */
-        /* *
-         *
-         *  Constants
-         *
-         * */
-        /**
-         * @private
-         * @deprecated
-         * @todo Rename UMD argument `win` to `window`; move code to `Globals.win`
-         */
-        var w = (typeof win !== 'undefined' ?
-                win :
-                typeof window !== 'undefined' ?
-                    window :
-                    {}
-            // eslint-disable-next-line node/no-unsupported-features/es-builtins
-            );
         /* *
          *
          *  Namespace
@@ -71,7 +63,10 @@
              *  Constants
              *
              * */
-            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.SVG_NS = 'http://www.w3.org/2000/svg', Globals.product = 'Highcharts', Globals.version = '10.2.0', Globals.win = (typeof window !== 'undefined' ?
+                window :
+                {}), // eslint-disable-line node/no-unsupported-features/es-builtins
+            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
@@ -213,11 +208,11 @@
         function error(code, stop, chart, params) {
             var severity = stop ? 'Highcharts error' : 'Highcharts warning';
             if (code === 32) {
-                code = severity + ": Deprecated member";
+                code = "" + severity + ": Deprecated member";
             }
             var isCode = isNumber(code);
             var message = isCode ?
-                    severity + " #" + code + ": www.highcharts.com/errors/" + code + "/" :
+                    "" + severity + " #" + code + ": www.highcharts.com/errors/" + code + "/" :
                     code.toString();
             var defaultHandler = function () {
                     if (stop) {
@@ -236,7 +231,7 @@
                     message += '?';
                 }
                 objectEach(params, function (value, key) {
-                    additionalMessages_1 += "\n - " + key + ": " + value;
+                    additionalMessages_1 += "\n - ".concat(key, ": ").concat(value);
                     if (isCode) {
                         message += encodeURI(key) + '=' + encodeURI(value);
                     }
@@ -365,7 +360,9 @@
                     // Arrays, primitives and DOM nodes are copied directly
                 }
                 else if (isObject(newer[key]) ||
-                    newer[key] !== older[key]) {
+                    newer[key] !== older[key] ||
+                    // If the newer key is explicitly undefined, keep it (#10525)
+                    (key in newer && !(key in older))) {
                     result[key] = newer[key];
                 }
             });
@@ -533,7 +530,7 @@
          * @param {Highcharts.HTMLDOMElement|Highcharts.SVGDOMElement} elem
          *        The DOM element to receive the attribute(s).
          *
-         * @param {string|Highcharts.HTMLAttributes|Highcharts.SVGAttributes} [prop]
+         * @param {string|Highcharts.HTMLAttributes|Highcharts.SVGAttributes} [keyOrAttribs]
          *        The property or an object of key-value pairs.
          *
          * @param {number|string} [value]
@@ -542,33 +539,36 @@
          * @return {string|null|undefined}
          *         When used as a getter, return the value.
          */
-        function attr(elem, prop, value) {
+        function attr(elem, keyOrAttribs, value) {
+            var isGetter = isString(keyOrAttribs) && !defined(value);
             var ret;
-            // if the prop is a string
-            if (isString(prop)) {
-                // set the value
-                if (defined(value)) {
-                    elem.setAttribute(prop, value);
-                    // get the value
-                }
-                else if (elem && elem.getAttribute) {
-                    ret = elem.getAttribute(prop);
+            var attrSingle = function (value,
+                key) {
+                    // Set the value
+                    if (defined(value)) {
+                        elem.setAttribute(key,
+                value);
+                    // Get the value
+                }
+                else if (isGetter) {
+                    ret = elem.getAttribute(key);
                     // IE7 and below cannot get class through getAttribute (#7850)
-                    if (!ret && prop === 'class') {
-                        ret = elem.getAttribute(prop + 'Name');
+                    if (!ret && key === 'class') {
+                        ret = elem.getAttribute(key + 'Name');
                     }
+                    // Remove the value
                 }
-                // else if prop is defined, it is a hash of key/value pairs
+                else {
+                    elem.removeAttribute(key);
+                }
+            };
+            // If keyOrAttribs is a string
+            if (isString(keyOrAttribs)) {
+                attrSingle(value, keyOrAttribs);
+                // Else if keyOrAttribs is defined, it is a hash of key/value pairs
             }
             else {
-                objectEach(prop, function (val, key) {
-                    if (defined(val)) {
-                        elem.setAttribute(key, val);
-                    }
-                    else {
-                        elem.removeAttribute(key);
-                    }
-                });
+                objectEach(keyOrAttribs, attrSingle);
             }
             return ret;
         }
@@ -619,10 +619,8 @@
          *
          * @function Highcharts.clearTimeout
          *
-         * @param {number} id
-         *        Id of a timeout.
-         *
-         * @return {void}
+         * @param {number|undefined} id
+         * Id of a timeout.
          */
         function internalClearTimeout(id) {
             if (defined(id)) {
@@ -692,9 +690,8 @@
          */
         function css(el, styles) {
             if (H.isMS && !H.svg) { // #2686
-                if (styles && typeof styles.opacity !== 'undefined') {
-                    styles.filter =
-                        'alpha(opacity=' + (styles.opacity * 100) + ')';
+                if (styles && defined(styles.opacity)) {
+                    styles.filter = "alpha(opacity=".concat(styles.opacity * 100, ")");
                 }
             }
             extend(el.style, styles);
@@ -887,7 +884,7 @@
             var i,
                 retInterval = interval;
             // round to a tenfold of 1, 2, 2.5 or 5
-            magnitude = pick(magnitude, 1);
+            magnitude = pick(magnitude, getMagnitude(interval));
             var normalized = interval / magnitude;
             // multiples for a linear scale
             if (!multiples) {
@@ -1417,7 +1414,7 @@
         }, function (val, key) {
             H[key] = function (arr) {
                 var _a;
-                error(32, false, void 0, (_a = {}, _a["Highcharts." + key] = "use Array." + val, _a));
+                error(32, false, void 0, (_a = {}, _a["Highcharts.".concat(key)] = "use Array.".concat(val), _a));
                 return Array.prototype[val].apply(arr, [].slice.call(arguments, 1));
             };
         });
@@ -2173,19 +2170,22 @@
          */
         var ChartDefaults = {
                 /**
-                 * Default `mapData` for all series. If set to a string,
-            it functions
-                 * as an index into the `Highcharts.maps` array. Otherwise it is
-                 * interpreted as map data.
+                 * Default `mapData` for all series,
+            in terms of a GeoJSON or TopoJSON
+                 * object. If set to a string,
+            it functions as an index into the
+                 * `Highcharts.maps` array.
                  *
-                 * @see [mapData](#series.map.mapData)
+                 * For picking out individual shapes and geometries to use for each series
+                 * of the map,
+            see [series.mapData](#series.map.mapData).
                  *
                  * @sample    maps/demo/geojson
-                 *            Loading geoJSON data
+                 *            Loading GeoJSON data
                  * @sample    maps/chart/topojson
-                 *            Loading topoJSON converted to geoJSON
+                 *            Loading TopoJSON data
                  *
-                 * @type      {string|Array<*>|Highcharts.GeoJSON}
+                 * @type      {string|Array<*>|Highcharts.GeoJSON|Highcharts.TopoJSON}
                  * @since     5.0.0
                  * @product   highmaps
                  * @apioption chart.map
@@ -2200,7 +2200,7 @@
                  * @apioption chart.mapTransforms
                  */
                 /**
-                 * When using multiple axis,
+                 * When using multiple axes,
             the ticks of two or more opposite axes
                  * will automatically be aligned by adding ticks to the axis or axes
                  * with the least ticks,
@@ -2211,8 +2211,8 @@
             it's a good idea to hide them for the secondary
                  * axis by setting `gridLineWidth` to 0.
                  *
-                 * If `startOnTick` or `endOnTick` in an Axis options are set to false,
-                 * then the `alignTicks ` will be disabled for the Axis.
+                 * If `startOnTick` or `endOnTick` in the axis options are set to false,
+                 * then the `alignTicks ` will be disabled for the axis.
                  *
                  * Disabled for logarithmic axes.
                  *
@@ -2230,6 +2230,31 @@
                  * @product   highcharts highstock gantt
                  * @apioption chart.alignTicks
                  */
+                /**
+                 * When using multiple axes,
+            align the thresholds. When this is true,
+            other
+                 * ticks will also be aligned.
+                 *
+                 * Note that for line series and some other series types,
+            the `threshold`
+                 * option is set to `null` by default. This will in turn cause their y-axis
+                 * to not have a threshold. In order to avoid that,
+            set the series
+                 * `threshold` to 0 or another number.
+                 *
+                 * If `startOnTick` or `endOnTick` in the axis options are set to false,
+            or
+                 * if the axis is logarithmic,
+            the threshold will not be aligned.
+                 *
+                 * @sample {highcharts} highcharts/chart/alignthresholds/ Set to true
+                 *
+                 * @since 10.0.0
+                 * @product   highcharts highstock gantt
+                 * @apioption chart.alignThresholds
+                 */
+                alignThresholds: false,
                 /**
                  * Set the overall animation for all chart updating. Animation can be
                  * disabled throughout the chart by setting it to false here. It can
@@ -2654,6 +2679,17 @@
              * @since      5.0.0
              */
             colorCount: 10,
+            /**
+             * By default, (because of memory and performance reasons) the chart does
+             * not copy the data but keeps it as a reference. In some cases, this might
+             * result in mutating the original data source. In order to prevent that,
+             * set that property to false. Please note that changing that might decrease
+             * performance, especially with bigger sets of data.
+             *
+             * @type       {boolean}
+             * @since 10.1.0
+             */
+            allowMutatingData: true,
             /**
              * Alias of `type`.
              *
@@ -3066,9 +3102,10 @@
              *         Y
              * @sample {highstock} stock/chart/zoomtype-xy/
              *         Xy
+             * @sample {highmaps} maps/chart/zoomtype-xy/
+             *         Map with selection zoom
              *
              * @type       {string}
-             * @product    highcharts highstock gantt
              * @validvalue ["x", "y", "xy"]
              * @apioption  chart.zoomType
              */
@@ -3137,7 +3174,7 @@
              *
              * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
              */
-            borderColor: "#335cad" /* highlightColor80 */,
+            borderColor: "#335cad" /* Palette.highlightColor80 */,
             /**
              * The pixel width of the outer chart border.
              *
@@ -3176,7 +3213,7 @@
              *
              * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
              */
-            backgroundColor: "#ffffff" /* backgroundColor */,
+            backgroundColor: "#ffffff" /* Palette.backgroundColor */,
             /**
              * The background color or gradient for the plot area.
              *
@@ -3233,7 +3270,7 @@
              *
              * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
              */
-            plotBorderColor: "#cccccc" /* neutralColor20 */
+            plotBorderColor: "#cccccc" /* Palette.neutralColor20 */
         };
         /* *
          *
@@ -3412,7 +3449,7 @@
                         return 'rgb(' + rgba[0] + ',' + rgba[1] + ',' + rgba[2] + ')';
                     }
                     if (format === 'a') {
-                        return "" + rgba[3];
+                        return "".concat(rgba[3]);
                     }
                     return 'rgba(' + rgba.join(',') + ')';
                 }
@@ -3908,13 +3945,12 @@
              */
             Time.prototype.update = function (options) {
                 var useUTC = pick(options && options.useUTC,
-                    true),
-                    time = this;
+                    true);
                 this.options = options = merge(true, this.options || {}, options);
                 // Allow using a different Date class
                 this.Date = options.Date || win.Date || Date;
                 this.useUTC = useUTC;
-                this.timezoneOffset = (useUTC && options.timezoneOffset);
+                this.timezoneOffset = (useUTC && options.timezoneOffset) || void 0;
                 this.getTimezoneOffset = this.timezoneOffsetFunction();
                 /*
                  * The time object has options allowing for variable time zones, meaning
@@ -4351,17 +4387,16 @@
                         hour: 6,
                         day: 3
                     };
-                var format,
-                    n,
-                    lastN = 'millisecond'; // for sub-millisecond data, #4223
-                    for (n in timeUnits) { // eslint-disable-line guard-for-in
-                        // If the range is exactly one week and we're looking at a
-                        // Sunday/Monday, go for the week format
-                        if (range === timeUnits.week &&
-                            +this.dateFormat('%w',
-                    timestamp) === startOfWeek &&
-                            dateStr.substr(6) === blank.substr(6)) {
-                            n = 'week';
+                var n = 'millisecond', 
+                    // for sub-millisecond data, #4223
+                    lastN = n;
+                for (n in timeUnits) { // eslint-disable-line guard-for-in
+                    // If the range is exactly one week and we're looking at a
+                    // Sunday/Monday, go for the week format
+                    if (range === timeUnits.week &&
+                        +this.dateFormat('%w', timestamp) === startOfWeek &&
+                        dateStr.substr(6) === blank.substr(6)) {
+                        n = 'week';
                         break;
                     }
                     // The first format that is too great for the range
@@ -4381,10 +4416,7 @@
                         lastN = n;
                     }
                 }
-                if (n) {
-                    format = this.resolveDTLFormat(dateTimeLabelFormats[n]).main;
-                }
-                return format;
+                return this.resolveDTLFormat(dateTimeLabelFormats[n]).main;
             };
             return Time;
         }());
@@ -5341,7 +5373,7 @@
                     /**
                      * @ignore-option
                      */
-                    color: "#333333" /* neutralColor80 */
+                    color: "#333333" /* Palette.neutralColor80 */
                 }
             },
             /**
@@ -5621,7 +5653,7 @@
                  *
                  * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
                  */
-                borderColor: "#999999" /* neutralColor40 */,
+                borderColor: "#999999" /* Palette.neutralColor40 */,
                 /**
                  * The border corner radius of the legend.
                  *
@@ -5715,7 +5747,7 @@
                      * @type  {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
                      * @since 2.2.4
                      */
-                    activeColor: "#003399" /* highlightColor100 */,
+                    activeColor: "#003399" /* Palette.highlightColor100 */,
                     /**
                      * The color of the inactive up or down arrow in the legend page
                      * navigation. .
@@ -5731,7 +5763,7 @@
                      * @type  {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
                      * @since 2.2.4
                      */
-                    inactiveColor: "#cccccc" /* neutralColor20 */
+                    inactiveColor: "#cccccc" /* Palette.neutralColor20 */
                 },
                 /**
                  * The inner padding of the legend box.
@@ -5807,7 +5839,7 @@
                     /**
                      * @ignore
                      */
-                    color: "#333333" /* neutralColor80 */,
+                    color: "#333333" /* Palette.neutralColor80 */,
                     /**
                      * @ignore
                      */
@@ -5845,7 +5877,7 @@
                     /**
                      * @ignore
                      */
-                    color: "#000000" /* neutralColor100 */
+                    color: "#000000" /* Palette.neutralColor100 */
                 },
                 /**
                  * CSS styles for each legend item when the corresponding series or
@@ -5866,7 +5898,7 @@
                     /**
                      * @ignore
                      */
-                    color: "#cccccc" /* neutralColor20 */
+                    color: "#cccccc" /* Palette.neutralColor20 */
                 },
                 /**
                  * Whether to apply a drop shadow to the legend. A `backgroundColor`
@@ -6170,7 +6202,7 @@
                     /**
                      * @ignore
                      */
-                    backgroundColor: "#ffffff" /* backgroundColor */,
+                    backgroundColor: "#ffffff" /* Palette.backgroundColor */,
                     /**
                      * @ignore
                      */
@@ -6376,18 +6408,20 @@
                  * @apioption tooltip.pointFormatter
                  */
                 /**
-                 * A callback function to place the tooltip in a default position. The
+                 * A callback function to place the tooltip in a custom position. The
                  * callback receives three parameters: `labelWidth`, `labelHeight` and
                  * `point`, where point contains values for `plotX` and `plotY` telling
                  * where the reference point is in the plot area. Add `chart.plotLeft`
                  * and `chart.plotTop` to get the full coordinates.
                  *
+                 * To find the actual hovered `Point` instance, use
+                 * `this.chart.hoverPoint`. For shared or split tooltips, all the hover
+                 * points are available in `this.chart.hoverPoints`.
+                 *
                  * Since v7, when [tooltip.split](#tooltip.split) option is enabled,
                  * positioner is called for each of the boxes separately, including
                  * xAxis header. xAxis header is not a point, instead `point` argument
-                 * contains info:
-                 * `{ plotX: Number, plotY: Number, isHeader: Boolean }`
-                 *
+                 * contains info: `{ plotX: Number, plotY: Number, isHeader: Boolean }`
                  *
                  * The return should be an object containing x and y values, for example
                  * `{ x: 100, y: 100 }`.
@@ -6730,6 +6764,8 @@
                  *
                  * @sample {highcharts} highcharts/tooltip/pointformat/
                  *         A different point format with value suffix
+                 * @sample {highcharts|highstock} highcharts/tooltip/pointformat-extra-information/
+                 *         Show extra information about points in the tooltip
                  * @sample {highmaps} maps/tooltip/format/
                  *         Format demo
                  *
@@ -6761,7 +6797,7 @@
                  *
                  * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
                  */
-                backgroundColor: color("#f7f7f7" /* neutralColor3 */)
+                backgroundColor: color("#f7f7f7" /* Palette.neutralColor3 */)
                     // @todo: Disallow undefined as input for colors
                     .setOpacity(0.85).get(),
                 /**
@@ -6824,7 +6860,7 @@
                  */
                 style: {
                     /** @internal */
-                    color: "#333333" /* neutralColor80 */,
+                    color: "#333333" /* Palette.neutralColor80 */,
                     /** @internal */
                     cursor: 'default',
                     /** @internal */
@@ -6939,7 +6975,7 @@
                     /** @internal */
                     cursor: 'pointer',
                     /** @internal */
-                    color: "#999999" /* neutralColor40 */,
+                    color: "#999999" /* Palette.neutralColor40 */,
                     /** @internal */
                     fontSize: '9px'
                 },
@@ -7413,7 +7449,7 @@
                     curAnim = options.curAnim;
                 var ret,
                     done;
-                if (elem.attr && !elem.element) { // #2616, element is destroyed
+                if ((elem.attr) && !elem.element) { // #2616, element is destroyed
                     ret = false;
                 }
                 else if (gotoEnd || t >= duration + this.startTime) {
@@ -7841,6 +7877,7 @@
             win = H.win;
         var attr = U.attr,
             createElement = U.createElement,
+            css = U.css,
             error = U.error,
             isFunction = U.isFunction,
             isString = U.isString,
@@ -7925,12 +7962,26 @@
                         valid = isString(val) && AST.allowedReferences.some(function (ref) { return val.indexOf(ref) === 0; });
                     }
                     if (!valid) {
-                        error("Highcharts warning: Invalid attribute '" + key + "' in config");
+                        error(33, false, void 0, {
+                            'Invalid attribute in config': "".concat(key)
+                        });
                         delete attributes[key];
                     }
                 });
                 return attributes;
             };
+            AST.parseStyle = function (style) {
+                return style
+                    .split(';')
+                    .reduce(function (styles, line) {
+                    var pair = line.split(':').map(function (s) { return s.trim(); }),
+                        key = pair.shift();
+                    if (key && pair.length) {
+                        styles[key.replace(/-([a-z])/g, function (g) { return g[1].toUpperCase(); })] = pair.join(':'); // #17146
+                    }
+                    return styles;
+                }, {});
+            };
             /**
              * Utility function to set html content for an element by passing in a
              * markup string. The markup is safely parsed by the AST class to avoid
@@ -7986,12 +8037,15 @@
                         var textNode = item.textContent ?
                                 H.doc.createTextNode(item.textContent) :
                                 void 0;
+                        // Whether to ignore the AST filtering totally, #15345
+                        var bypassHTMLFiltering = AST.bypassHTMLFiltering;
                         var node;
                         if (tagName) {
                             if (tagName === '#text') {
                                 node = textNode;
                             }
-                            else if (AST.allowedTags.indexOf(tagName) !== -1) {
+                            else if (AST.allowedTags.indexOf(tagName) !== -1 ||
+                                bypassHTMLFiltering) {
                                 var NS = tagName === 'svg' ?
                                         SVG_NS :
                                         (subParent.namespaceURI || SVG_NS);
@@ -8004,11 +8058,17 @@
                                     if (key !== 'tagName' &&
                                         key !== 'attributes' &&
                                         key !== 'children' &&
+                                        key !== 'style' &&
                                         key !== 'textContent') {
                                         attributes_1[key] = val;
                                     }
                                 });
-                                attr(element, AST.filterUserAttributes(attributes_1));
+                                attr(element, bypassHTMLFiltering ?
+                                    attributes_1 :
+                                    AST.filterUserAttributes(attributes_1));
+                                if (item.style) {
+                                    css(element, item.style);
+                                }
                                 // Add text content
                                 if (textNode) {
                                     element.appendChild(textNode);
@@ -8018,8 +8078,9 @@
                                 node = element;
                             }
                             else {
-                                error('Highcharts warning: Invalid tagName ' +
-                                    tagName + ' in config');
+                                error(33, false, void 0, {
+                                    'Invalid tagName in config': tagName
+                                });
                             }
                         }
                         // Add to the tree
@@ -8047,7 +8108,11 @@
              */
             AST.prototype.parseMarkup = function (markup) {
                 var nodes = [];
-                markup = markup.trim();
+                markup = markup
+                    .trim()
+                    // The style attribute throws a warning when parsing when CSP is
+                    // enabled (#6884), so use an alias and pick it up below
+                    .replace(/ style="/g, ' data-style="');
                 var doc;
                 if (hasValidDOMParser) {
                     doc = new DOMParser().parseFromString(trustedTypesPolicy ?
@@ -8074,7 +8139,12 @@
                     if (parsedAttributes) {
                         var attributes_2 = {};
                         [].forEach.call(parsedAttributes, function (attrib) {
-                            attributes_2[attrib.name] = attrib.value;
+                            if (attrib.name === 'data-style') {
+                                astNode.style = AST.parseStyle(attrib.value);
+                            }
+                            else {
+                                attributes_2[attrib.name] = attrib.value;
+                            }
                         });
                         astNode.attributes = attributes_2;
                     }
@@ -8278,6 +8348,34 @@
                 '#text'
             ];
             AST.emptyHTML = emptyHTML;
+            /**
+             * Allow all custom SVG and HTML attributes, references and tags (together
+             * with potentially harmful ones) to be added to the DOM from the chart
+             * configuration. In other words, disable the the allow-listing which is the
+             * primary functionality of the AST.
+             *
+             * WARNING: Setting this property to `true` while allowing untrusted user
+             * data in the chart configuration will expose your application to XSS
+             * security risks!
+             *
+             * Note that in case you want to allow a known set of tags or attributes,
+             * you should allow-list them instead of disabling the filtering totally.
+             * See [allowedAttributes](Highcharts.AST#.allowedAttributes),
+             * [allowedReferences](Highcharts.AST#.allowedReferences) and
+             * [allowedTags](Highcharts.AST#.allowedTags). The `bypassHTMLFiltering`
+             * setting is intended only for those cases where allow-listing is not
+             * practical, and the chart configuration already comes from a secure
+             * source.
+             *
+             * @example
+             * // Allow all custom attributes, references and tags (disable DOM XSS
+             * // filtering)
+             * Highcharts.AST.bypassHTMLFiltering = true;
+             *
+             * @name Highcharts.AST.bypassHTMLFiltering
+             * @static
+             */
+            AST.bypassHTMLFiltering = false;
             return AST;
         }());
         /* *
@@ -9121,7 +9219,7 @@
                     }, deferTime);
                 }
                 else {
-                    this.attr(params, void 0, complete);
+                    this.attr(params, void 0, complete || animOptions.complete);
                     // Call the end step synchronously
                     objectEach(params, function (val, prop) {
                         if (animOptions.step) {
@@ -9519,25 +9617,20 @@
              *         Return the SVG element for chaining.
              */
             SVGElement.prototype.css = function (styles) {
-                var oldStyles = this.styles, newStyles = {}, elem = this.element, 
-                    // These CSS properties are interpreted internally by the SVG
-                    // renderer, but are not supported by SVG and should not be added to
-                    // the DOM. In styled mode, no CSS should find its way to the DOM
-                    // whatsoever (#6173, #6474).
-                    svgPseudoProps = ['textOutline', 'textOverflow', 'width'];
+                var oldStyles = this.styles,
+                    newStyles = {},
+                    elem = this.element;
                 var textWidth,
-                    serializedCss = '',
-                    hyphenate,
                     hasNew = !oldStyles;
                 // convert legacy
-                if (styles && styles.color) {
+                if (styles.color) {
                     styles.fill = styles.color;
                 }
                 // Filter out existing styles to increase performance (#2640)
                 if (oldStyles) {
-                    objectEach(styles, function (style, n) {
-                        if (oldStyles && oldStyles[n] !== style) {
-                            newStyles[n] = style;
+                    objectEach(styles, function (value, n) {
+                        if (oldStyles && oldStyles[n] !== value) {
+                            newStyles[n] = value;
                             hasNew = true;
                         }
                     });
@@ -9548,41 +9641,30 @@
                         styles = extend(oldStyles, newStyles);
                     }
                     // Get the text width from style
-                    if (styles) {
-                        // Previously set, unset it (#8234)
-                        if (styles.width === null || styles.width === 'auto') {
-                            delete this.textWidth;
-                            // Apply new
-                        }
-                        else if (elem.nodeName.toLowerCase() === 'text' &&
-                            styles.width) {
-                            textWidth = this.textWidth = pInt(styles.width);
-                        }
+                    // Previously set, unset it (#8234)
+                    if (styles.width === null || styles.width === 'auto') {
+                        delete this.textWidth;
+                        // Apply new
+                    }
+                    else if (elem.nodeName.toLowerCase() === 'text' &&
+                        styles.width) {
+                        textWidth = this.textWidth = pInt(styles.width);
                     }
                     // store object
                     this.styles = styles;
                     if (textWidth && (!svg && this.renderer.forExport)) {
                         delete styles.width;
                     }
-                    // Serialize and set style attribute
-                    if (elem.namespaceURI === this.SVG_NS) { // #7633
-                        hyphenate = function (a, b) {
-                            return '-' + b.toLowerCase();
-                        };
-                        objectEach(styles, function (style, n) {
-                            if (svgPseudoProps.indexOf(n) === -1) {
-                                serializedCss +=
-                                    n.replace(/([A-Z])/g, hyphenate) + ':' +
-                                        style + ';';
-                            }
-                        });
-                        if (serializedCss) {
-                            attr(elem, 'style', serializedCss); // #1881
-                        }
-                    }
-                    else {
-                        css(elem, styles);
+                    var stylesToApply_1 = merge(styles);
+                    if (elem.namespaceURI === this.SVG_NS) {
+                        // These CSS properties are interpreted internally by the SVG
+                        // renderer, but are not supported by SVG and should not be
+                        // added to the DOM. In styled mode, no CSS should find its way
+                        // to the DOM whatsoever (#6173, #6474).
+                        ['textOutline', 'textOverflow', 'width'].forEach(function (key) { return (stylesToApply_1 &&
+                            delete stylesToApply_1[key]); });
                     }
+                    css(elem, stylesToApply_1);
                     if (this.added) {
                         // Rebuild text after added. Cache mechanisms in the buildText
                         // will prevent building if there are no significant changes.
@@ -9590,7 +9672,7 @@
                             this.renderer.buildText(this);
                         }
                         // Apply text outline after added
-                        if (styles && styles.textOutline) {
+                        if (styles.textOutline) {
                             this.applyTextOutline(styles.textOutline);
                         }
                     }
@@ -9801,7 +9883,7 @@
                     duration: pick(duration, 150),
                     complete: function () {
                         // #3088, assuming we're only using this for tooltips
-                        elemWrapper.attr({ y: -9999 }).hide();
+                        elemWrapper.hide();
                     }
                 });
             };
@@ -9846,8 +9928,9 @@
              */
             SVGElement.prototype.getBBox = function (reload, rot) {
                 var wrapper = this,
-                    renderer = wrapper.renderer,
+                    alignValue = wrapper.alignValue,
                     element = wrapper.element,
+                    renderer = wrapper.renderer,
                     styles = wrapper.styles,
                     textStr = wrapper.textStr,
                     cache = renderer.cache,
@@ -9857,7 +9940,7 @@
                     wrapper.rotation, 0),
                     fontSize = renderer.styledMode ? (element &&
                         SVGElement.prototype.getStyle.call(element, 'font-size')) : (styles && styles.fontSize);
-                var bBox, // = wrapper.bBox,
+                var bBox,
                     width,
                     height,
                     toggleTextShadowShim,
@@ -9878,6 +9961,7 @@
                         rotation,
                         fontSize,
                         wrapper.textWidth,
+                        alignValue,
                         styles && styles.textOverflow,
                         styles && styles.fontWeight // #12163
                     ].join(',');
@@ -9923,7 +10007,7 @@
                         // other condition is for Opera that returns a width of
                         // -Infinity on hidden elements.
                         if (!bBox || bBox.width < 0) {
-                            bBox = { width: 0, height: 0 };
+                            bBox = { x: 0, y: 0, width: 0, height: 0 };
                         }
                         // VML Renderer or useHTML within SVG
                     }
@@ -9947,16 +10031,40 @@
                             bBox.height = height = ({
                                 '11px,17': 14,
                                 '13px,20': 16
-                            }[(fontSize || '') + "," + Math.round(height)] ||
+                            }["" + (fontSize || '') + ",".concat(Math.round(height))] ||
                                 height);
                         }
                         // Adjust for rotated text
                         if (rotation) {
-                            var rad = rotation * deg2rad;
-                            bBox.width = Math.abs(height * Math.sin(rad)) +
-                                Math.abs(width * Math.cos(rad));
-                            bBox.height = Math.abs(height * Math.cos(rad)) +
-                                Math.abs(width * Math.sin(rad));
+                            var baseline = Number(element.getAttribute('y') || 0) - bBox.y,
+                                alignFactor = {
+                                    'right': 1,
+                                    'center': 0.5
+                                }[alignValue || 0] || 0,
+                                rad = rotation * deg2rad,
+                                rad90 = (rotation - 90) * deg2rad,
+                                wCosRad = width * Math.cos(rad),
+                                wSinRad = width * Math.sin(rad),
+                                cosRad90 = Math.cos(rad90),
+                                sinRad90 = Math.sin(rad90), 
+                                // Find the starting point on the left side baseline of
+                                // the text
+                                pX = bBox.x + alignFactor * (width - wCosRad),
+                                pY = bBox.y + baseline - alignFactor * wSinRad, 
+                                // Find all corners
+                                aX = pX + baseline * cosRad90,
+                                bX = aX + wCosRad,
+                                cX = bX - height * cosRad90,
+                                dX = cX - wCosRad,
+                                aY = pY + baseline * sinRad90,
+                                bY = aY + wSinRad,
+                                cY = bY - height * sinRad90,
+                                dY = cY - wSinRad;
+                            // Deduct the bounding box from the corners
+                            bBox.x = Math.min(aX, bX, cX, dX);
+                            bBox.y = Math.min(aY, bY, cY, dY);
+                            bBox.width = Math.max(aX, bX, cX, dX) - bBox.x;
+                            bBox.height = Math.max(aY, bY, cY, dY) - bBox.y;
                         }
                     }
                     // Cache it. When loading a chart in a hidden iframe in Firefox and
@@ -10015,21 +10123,11 @@
              *
              * @function Highcharts.SVGElement#hide
              *
-             * @param {boolean} [hideByTranslation=false]
-             *        The flag to determine if element should be hidden by moving out
-             *        of the viewport. Used for example for dataLabels.
-             *
              * @return {Highcharts.SVGElement}
              *         Returns the SVGElement for chaining.
              */
-            SVGElement.prototype.hide = function (hideByTranslation) {
-                if (hideByTranslation) {
-                    this.attr({ y: -9999 });
-                }
-                else {
-                    this.attr({ visibility: 'hidden' });
-                }
-                return this;
+            SVGElement.prototype.hide = function () {
+                return this.attr({ visibility: 'hidden' });
             };
             /**
              * @private
@@ -10143,7 +10241,7 @@
             SVGElement.prototype.removeClass = function (className) {
                 return this.attr('class', ('' + this.attr('class'))
                     .replace(isString(className) ?
-                    new RegExp("(^| )" + className + "( |$)") : // #12064, #13590
+                    new RegExp("(^| )".concat(className, "( |$)")) : // #12064, #13590
                     className, ' ')
                     .replace(/ +/g, ' ')
                     .trim());
@@ -10368,7 +10466,7 @@
                     element = this.element,
                     oldShadowOptions = this.oldShadowOptions,
                     defaultShadowOptions = {
-                        color: "#000000" /* neutralColor100 */,
+                        color: "#000000" /* Palette.neutralColor100 */,
                         offsetX: this.parentInverted ? -1 : 1,
                         offsetY: this.parentInverted ? -1 : 1,
                         opacity: 0.15,
@@ -10409,14 +10507,14 @@
                 else if (!this.shadows) {
                     shadowElementOpacity = options.opacity / options.width;
                     transform = this.parentInverted ?
-                        "translate(" + options.offsetY + ", " + options.offsetX + ")" :
-                        "translate(" + options.offsetX + ", " + options.offsetY + ")";
+                        "translate(".concat(options.offsetY, ", ").concat(options.offsetX, ")") :
+                        "translate(".concat(options.offsetX, ", ").concat(options.offsetY, ")");
                     for (i = 1; i <= options.width; i++) {
                         shadow = element.cloneNode(false);
                         strokeWidth = (options.width * 2) + 1 - (2 * i);
                         attr(shadow, {
                             stroke: (shadowOptions.color ||
-                                "#000000" /* neutralColor100 */),
+                                "#000000" /* Palette.neutralColor100 */),
                             'stroke-opacity': shadowElementOpacity * i,
                             'stroke-width': strokeWidth,
                             transform: transform,
@@ -10444,7 +10542,7 @@
              *
              * @function Highcharts.SVGElement#show
              *
-             * @param {boolean} [inherit=false]
+             * @param {boolean} [inherit=true]
              *        Set the visibility attribute to `inherit` rather than `visible`.
              *        The difference is that an element with `visibility="visible"`
              *        will be visible even if the parent is hidden.
@@ -10453,6 +10551,7 @@
              *         Returns the SVGElement for chaining.
              */
             SVGElement.prototype.show = function (inherit) {
+                if (inherit === void 0) { inherit = true; }
                 return this.attr({ visibility: inherit ? 'inherit' : 'visible' });
             };
             /**
@@ -11759,6 +11858,7 @@
             SVG_NS = H.SVG_NS,
             win = H.win;
         var attr = U.attr,
+            extend = U.extend,
             isString = U.isString,
             objectEach = U.objectEach,
             pick = U.pick;
@@ -12034,28 +12134,32 @@
                         var _a = node.attributes,
                     attributes = _a === void 0 ? {} : _a,
                     children = node.children,
+                    _b = node.style,
+                    style = _b === void 0 ? {} : _b,
                     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
+                            // eslint-disable-next-line dot-notation
+                            attributes['class'] = 'highcharts-strong';
                         }
                         else {
-                            attributes.style = ('font-weight:bold;' + (attributes.style || ''));
+                            style.fontWeight = 'bold';
                         }
                     }
                     else if (tagName === 'i' || tagName === 'em') {
                         if (styledMode) {
-                            attributes['class'] = 'highcharts-emphasized'; // eslint-disable-line dot-notation
+                            // eslint-disable-next-line dot-notation
+                            attributes['class'] = 'highcharts-emphasized';
                         }
                         else {
-                            attributes.style = ('font-style:italic;' + (attributes.style || ''));
+                            style.fontStyle = 'italic';
                         }
                     }
-                    // Modify attributes
-                    if (isString(attributes.style)) {
-                        attributes.style = attributes.style.replace(/(;| |^)color([ :])/, '$1fill$2');
+                    // Modify styling
+                    if (style && style.color) {
+                        style.fill = style.color;
                     }
                     // Handle breaks
                     if (tagName === 'br') {
@@ -12080,7 +12184,7 @@
                     if (tagName !== '#text' && tagName !== 'a') {
                         node.tagName = 'tspan';
                     }
-                    node.attributes = attributes;
+                    extend(node, { attributes: attributes, style: style });
                     // Recurse
                     if (children) {
                         children
@@ -12420,7 +12524,7 @@
                 this.url = this.getReferenceURL();
                 // Add description
                 var desc = this.createElement('desc').add();
-                desc.element.appendChild(doc.createTextNode('Created with Highcharts 9.3.3'));
+                desc.element.appendChild(doc.createTextNode('Created with Highcharts 10.2.0'));
                 renderer.defs = this.createElement('defs').add();
                 renderer.allowHTML = allowHTML;
                 renderer.forExport = forExport;
@@ -12533,7 +12637,7 @@
                                                 id: 'hitme',
                                                 width: 8,
                                                 height: 8,
-                                                'clip-path': "url(#" + id + ")",
+                                                'clip-path': "url(#".concat(id, ")"),
                                                 fill: 'rgba(0,0,0,0.001)'
                                             }
                                         }]
@@ -12686,27 +12790,31 @@
                 new TextBuilder(wrapper).buildSVG();
             };
             /**
-             * Returns white for dark colors and black for bright colors.
+             * Returns white for dark colors and black for bright colors, based on W3C's
+             * definition of [Relative luminance](
+             * https://www.w3.org/WAI/GL/wiki/Relative_luminance).
              *
              * @function Highcharts.SVGRenderer#getContrast
              *
-             * @param {Highcharts.ColorString} rgba
+             * @param {Highcharts.ColorString} color
              * The color to get the contrast for.
              *
              * @return {Highcharts.ColorString}
              * The contrast color, either `#000000` or `#FFFFFF`.
              */
-            SVGRenderer.prototype.getContrast = function (rgba) {
-                rgba = Color.parse(rgba).rgba;
-                // The threshold may be discussed. Here's a proposal for adding
-                // different weight to the color channels (#6216)
-                rgba[0] *= 1; // red
-                rgba[1] *= 1.2; // green
-                rgba[2] *= 0.5; // blue
-                return rgba[0] + rgba[1] + rgba[2] >
-                    1.8 * 255 ?
-                    '#000000' :
-                    '#FFFFFF';
+            SVGRenderer.prototype.getContrast = function (color) {
+                // #6216, #17273
+                var rgba = Color.parse(color).rgba
+                        .map(function (b8) {
+                        var c = b8 / 255;
+                    return c <= 0.03928 ?
+                        c / 12.92 :
+                        Math.pow((c + 0.055) / 1.055, 2.4);
+                });
+                // Relative luminance
+                var l = 0.2126 * rgba[0] + 0.7152 * rgba[1] + 0.0722 * rgba[2];
+                // Use white or black based on which provides more contrast
+                return 1.05 / (l + 0.05) > (l + 0.05) / 0.05 ? '#FFFFFF' : '#000000';
             };
             /**
              * Create a button with preset states.
@@ -12731,7 +12839,7 @@
              * @param {Highcharts.SVGAttributes} [hoverState]
              * SVG attributes for the hover state.
              *
-             * @param {Highcharts.SVGAttributes} [pressedState]
+             * @param {Highcharts.SVGAttributes} [selectState]
              * SVG attributes for the pressed state.
              *
              * @param {Highcharts.SVGAttributes} [disabledState]
@@ -12746,7 +12854,8 @@
              * @return {Highcharts.SVGElement}
              * The button element.
              */
-            SVGRenderer.prototype.button = function (text, x, y, callback, theme, hoverState, pressedState, disabledState, shape, useHTML) {
+            SVGRenderer.prototype.button = function (text, x, y, callback, theme, hoverState, selectState, disabledState, shape, useHTML) {
+                if (theme === void 0) { theme = {}; }
                 var label = this.label(text,
                     x,
                     y,
@@ -12755,59 +12864,57 @@
                     void 0,
                     useHTML,
                     void 0, 'button'),
-                    styledMode = this.styledMode;
-                var curState = 0, 
-                    // Make a copy of normalState (#13798)
-                    // (reference to options.rangeSelector.buttonTheme)
-                    normalState = theme ? merge(theme) : {};
-                var userNormalStyle = normalState && normalState.style || {};
-                // Remove stylable attributes
-                normalState = AST.filterUserAttributes(normalState);
+                    styledMode = this.styledMode,
+                    states = theme.states || {};
+                var curState = 0;
+                theme = merge(theme);
+                delete theme.states;
+                var normalStyle = merge({
+                        color: "#333333" /* Palette.neutralColor80 */,
+                        cursor: 'pointer',
+                        fontWeight: 'normal'
+                    },
+                    theme.style);
+                delete theme.style;
+                // Remove stylable attributes. Pass in the ButtonThemeObject and get the
+                // SVGAttributes subset back.
+                var normalState = AST.filterUserAttributes(theme);
                 // Default, non-stylable attributes
                 label.attr(merge({ padding: 8, r: 2 }, normalState));
-                // Presentational
-                var normalStyle,
-                    hoverStyle,
-                    pressedStyle,
+                // Presentational. The string type is a mistake, it is just for
+                // compliance with SVGAttribute and is not used in button theme.
+                var hoverStyle,
+                    selectStyle,
                     disabledStyle;
                 if (!styledMode) {
                     // Normal state - prepare the attributes
                     normalState = merge({
-                        fill: "#f7f7f7" /* neutralColor3 */,
-                        stroke: "#cccccc" /* neutralColor20 */,
-                        'stroke-width': 1,
-                        style: {
-                            color: "#333333" /* neutralColor80 */,
-                            cursor: 'pointer',
-                            fontWeight: 'normal'
-                        }
-                    }, {
-                        style: userNormalStyle
+                        fill: "#f7f7f7" /* Palette.neutralColor3 */,
+                        stroke: "#cccccc" /* Palette.neutralColor20 */,
+                        'stroke-width': 1
                     }, normalState);
-                    normalStyle = normalState.style;
-                    delete normalState.style;
                     // Hover state
                     hoverState = merge(normalState, {
-                        fill: "#e6e6e6" /* neutralColor10 */
-                    }, AST.filterUserAttributes(hoverState || {}));
+                        fill: "#e6e6e6" /* Palette.neutralColor10 */
+                    }, AST.filterUserAttributes(hoverState || states.hover || {}));
                     hoverStyle = hoverState.style;
                     delete hoverState.style;
                     // Pressed state
-                    pressedState = merge(normalState, {
-                        fill: "#e6ebf5" /* highlightColor10 */,
+                    selectState = merge(normalState, {
+                        fill: "#e6ebf5" /* Palette.highlightColor10 */,
                         style: {
-                            color: "#000000" /* neutralColor100 */,
+                            color: "#000000" /* Palette.neutralColor100 */,
                             fontWeight: 'bold'
                         }
-                    }, AST.filterUserAttributes(pressedState || {}));
-                    pressedStyle = pressedState.style;
-                    delete pressedState.style;
+                    }, AST.filterUserAttributes(selectState || states.select || {}));
+                    selectStyle = selectState.style;
+                    delete selectState.style;
                     // Disabled state
                     disabledState = merge(normalState, {
                         style: {
-                            color: "#cccccc" /* neutralColor20 */
+                            color: "#cccccc" /* Palette.neutralColor20 */
                         }
-                    }, AST.filterUserAttributes(disabledState || {}));
+                    }, AST.filterUserAttributes(disabledState || states.disabled || {}));
                     disabledStyle = disabledState.style;
                     delete disabledState.style;
                 }
@@ -12838,15 +12945,18 @@
                             .attr([
                             normalState,
                             hoverState,
-                            pressedState,
+                            selectState,
                             disabledState
-                        ][state || 0])
-                            .css([
-                            normalStyle,
-                            hoverStyle,
-                            pressedStyle,
-                            disabledStyle
                         ][state || 0]);
+                        var css_1 = [
+                                normalStyle,
+                                hoverStyle,
+                                selectStyle,
+                                disabledStyle
+                            ][state || 0];
+                        if (isObject(css_1)) {
+                            label.css(css_1);
+                        }
                     }
                 };
                 // Presentational attributes
@@ -13548,7 +13658,7 @@
              */
             SVGRenderer.prototype.fontMetrics = function (fontSize, elem) {
                 if ((this.styledMode || !/px/.test(fontSize)) &&
-                    win.getComputedStyle // old IE doesn't support it
+                    (win.getComputedStyle) // old IE doesn't support it
                 ) {
                     fontSize = elem && SVGElement.prototype.getStyle.call(elem, 'font-size');
                 }
@@ -15692,7 +15802,7 @@
                      */
                     style: {
                         /** @internal */
-                        color: "#666666" /* neutralColor60 */,
+                        color: "#666666" /* Palette.neutralColor60 */,
                         /** @internal */
                         cursor: 'default',
                         /** @internal */
@@ -16527,7 +16637,7 @@
                      */
                     style: {
                         /** @internal */
-                        color: "#666666" /* neutralColor60 */
+                        color: "#666666" /* Palette.neutralColor60 */
                     }
                 },
                 /**
@@ -16644,7 +16754,7 @@
                  * @type    {Highcharts.ColorType}
                  * @default #f2f2f2
                  */
-                minorGridLineColor: "#f2f2f2" /* neutralColor5 */,
+                minorGridLineColor: "#f2f2f2" /* Palette.neutralColor5 */,
                 /**
                  * Width of the minor, secondary grid lines.
                  *
@@ -16670,7 +16780,7 @@
                  * @type    {Highcharts.ColorType}
                  * @default #999999
                  */
-                minorTickColor: "#999999" /* neutralColor40 */,
+                minorTickColor: "#999999" /* Palette.neutralColor40 */,
                 /**
                  * The color of the line marking the axis itself.
                  *
@@ -16691,7 +16801,7 @@
                  * @type    {Highcharts.ColorType}
                  * @default #ccd6eb
                  */
-                lineColor: "#ccd6eb" /* highlightColor20 */,
+                lineColor: "#ccd6eb" /* Palette.highlightColor20 */,
                 /**
                  * The width of the line marking the axis itself.
                  *
@@ -16728,7 +16838,7 @@
                  * @type    {Highcharts.ColorType}
                  * @default #e6e6e6
                  */
-                gridLineColor: "#e6e6e6" /* neutralColor10 */,
+                gridLineColor: "#e6e6e6" /* Palette.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
@@ -16786,7 +16896,7 @@
                  * @type    {Highcharts.ColorType}
                  * @default #ccd6eb
                  */
-                tickColor: "#ccd6eb" /* highlightColor20 */
+                tickColor: "#ccd6eb" /* Palette.highlightColor20 */
                 // tickWidth: 1
             };
             /**
@@ -17576,7 +17686,7 @@
                      */
                     style: {
                         /** @internal */
-                        color: "#000000" /* neutralColor100 */,
+                        color: "#000000" /* Palette.neutralColor100 */,
                         /** @internal */
                         fontSize: '11px',
                         /** @internal */
@@ -17866,7 +17976,8 @@
                         dateTimeLabelFormat = dateTimeLabelFormats.main;
                     }
                     else if (isNumber(value)) { // #1441
-                        dateTimeLabelFormat = axis.dateTime.getXDateFormat(value, (options.dateTimeLabelFormats || {}));
+                        dateTimeLabelFormat = axis.dateTime.getXDateFormat(value, options.dateTimeLabelFormats ||
+                            {});
                     }
                 }
                 // set properties for access in render method
@@ -18034,8 +18145,8 @@
                     pos = {
                         x: horiz ?
                             correctFloat(axis.translate(tickPos + tickmarkOffset,
-                    null,
-                    null,
+                    void 0,
+                    void 0,
                     old) +
                                 axis.transB) :
                             (axis.left +
@@ -18053,8 +18164,8 @@
                                 (axis.opposite ? axis.height : 0)) :
                             correctFloat(cHeight -
                                 axis.translate(tickPos + tickmarkOffset,
-                    null,
-                    null,
+                    void 0,
+                    void 0,
                     old) -
                                 axis.transB)
                     };
@@ -18082,20 +18193,23 @@
                         -axis.labelOffset * (axis.labelAlign === 'center' ? 0.5 : 1) :
                         0),
                     pos = {};
-                var yOffset = labelOptions.y,
+                var yOffset,
                     line;
-                if (!defined(yOffset)) {
-                    if (axis.side === 0) {
-                        yOffset = label.rotation ? -8 : -label.getBBox().height;
-                    }
-                    else if (axis.side === 2) {
-                        yOffset = rotCorr.y + 8;
-                    }
-                    else {
-                        // #3140, #3140
-                        yOffset = Math.cos(label.rotation * deg2rad) *
-                            (rotCorr.y - label.getBBox(false, 0).height / 2);
-                    }
+                if (axis.side === 0) {
+                    yOffset = label.rotation ? -8 : -label.getBBox().height;
+                }
+                else if (axis.side === 2) {
+                    yOffset = rotCorr.y + 8;
+                }
+                else {
+                    // #3140, #3140
+                    yOffset = Math.cos(label.rotation * deg2rad) *
+                        (rotCorr.y - label.getBBox(false, 0).height / 2);
+                }
+                if (defined(labelOptions.y)) {
+                    yOffset = axis.side === 0 && axis.horiz ?
+                        labelOptions.y + yOffset :
+                        labelOptions.y;
                 }
                 x = x +
                     labelOptions.x +
@@ -18486,11 +18600,11 @@
                     // Set the new position, and show or hide
                     if (show && isNumber(xy.y)) {
                         xy.opacity = opacity;
-                        label[tick.isNewLabel ? 'attr' : 'animate'](xy);
+                        label[tick.isNewLabel ? 'attr' : 'animate'](xy).show(true);
                         tick.isNewLabel = false;
                     }
                     else {
-                        label.attr('y', -9999); // #1338
+                        label.hide(); // #1338, #15863
                         tick.isNewLabel = true;
                     }
                 }
@@ -18590,7 +18704,6 @@
             error = U.error,
             extend = U.extend,
             fireEvent = U.fireEvent,
-            getMagnitude = U.getMagnitude,
             isArray = U.isArray,
             isNumber = U.isNumber,
             isString = U.isString,
@@ -18602,6 +18715,16 @@
             removeEvent = U.removeEvent,
             splat = U.splat,
             syncTimeout = U.syncTimeout;
+        var getNormalizedTickInterval = function (axis,
+            tickInterval) { return normalizeTickInterval(tickInterval,
+            void 0,
+            void 0,
+            pick(axis.options.allowDecimals, 
+            // If the tick interval is greather than 0.5, avoid decimals, as
+            // linear axes are often used to render discrete values (#3363). If
+            // a tick amount is set, allow decimals by default, as it increases
+            // the chances for a good fit.
+            tickInterval < 0.5 || axis.tickAmount !== void 0), !!axis.tickAmount); };
         /* *
          *
          *  Class
@@ -18648,7 +18771,6 @@
                 function Axis(chart, userOptions) {
                     this.alternateBands = void 0;
                 this.bottom = void 0;
-                this.categories = void 0;
                 this.chart = void 0;
                 this.closestPointRange = void 0;
                 this.coll = void 0;
@@ -18812,7 +18934,7 @@
                  * @type {Array<string>}
                  * @readonly
                  */
-                axis.categories = options.categories || axis.hasNames;
+                axis.categories = options.categories || (axis.hasNames ? [] : void 0);
                 if (!axis.names) { // Preserve on update (#3830)
                     axis.names = [];
                     axis.names.keys = {};
@@ -18968,7 +19090,7 @@
                     multi,
                     ret;
                 if (categories) {
-                    ret = "" + this.value;
+                    ret = "".concat(this.value);
                 }
                 else if (dateTimeLabelFormat) { // datetime axis
                     ret = time.dateFormat(dateTimeLabelFormat, value);
@@ -19044,7 +19166,6 @@
                             if (axis.isXAxis) {
                                 xData = series.xData;
                                 if (xData.length) {
-                                    var isPositive = function (number) { return number > 0; };
                                     xData = axis.logarithmic ?
                                         xData.filter(axis.validatePositiveValue) :
                                         xData;
@@ -19113,8 +19234,11 @@
              */
             Axis.prototype.translate = function (val, backwards, cvsCoord, old, handleLog, pointPlacement) {
                 var axis = (this.linkedParent || this), // #1417
-                    localMin = old && axis.old ? axis.old.min : axis.min,
-                    minPixelPadding = axis.minPixelPadding,
+                    localMin = (old && axis.old ? axis.old.min : axis.min);
+                if (!isNumber(localMin)) {
+                    return NaN;
+                }
+                var minPixelPadding = axis.minPixelPadding,
                     doPostTranslate = (axis.isOrdinal ||
                         axis.brokenAxis && axis.brokenAxis.hasBreaks ||
                         (axis.logarithmic && handleLog)) && axis.lin2val;
@@ -19151,14 +19275,11 @@
                     if (doPostTranslate) { // log, ordinal and broken axis
                         val = axis.val2lin(val);
                     }
-                    returnValue = isNumber(localMin) ?
-                        (sign * (val - localMin) * localA +
-                            cvsOffset +
-                            (sign * minPixelPadding) +
-                            (isNumber(pointPlacement) ?
-                                localA * pointPlacement :
-                                0)) :
-                        void 0;
+                    var value = sign * (val - localMin) * localA;
+                    returnValue = (!axis.isRadial ? correctFloat(value) : value) +
+                        cvsOffset +
+                        (sign * minPixelPadding) +
+                        (isNumber(pointPlacement) ? localA * pointPlacement : 0);
                 }
                 return returnValue;
             };
@@ -19178,7 +19299,7 @@
              * Pixel position of the value on the chart or axis.
              */
             Axis.prototype.toPixels = function (value, paneCoordinates) {
-                return this.translate(value, false, !this.horiz, null, true) +
+                return this.translate(value, false, !this.horiz, void 0, true) +
                     (paneCoordinates ? 0 : this.pos);
             };
             /**
@@ -19198,7 +19319,7 @@
              * The axis value.
              */
             Axis.prototype.toValue = function (pixel, paneCoordinates) {
-                return this.translate(pixel - (paneCoordinates ? 0 : this.pos), true, !this.horiz, null, true);
+                return this.translate(pixel - (paneCoordinates ? 0 : this.pos), true, !this.horiz, void 0, true);
             };
             /**
              * Create the path for a plot line that goes from the given value on
@@ -19257,7 +19378,7 @@
                         translatedValue: translatedValue
                     };
                 fireEvent(this, 'getPlotLinePath', evt, function (e) {
-                    translatedValue = pick(translatedValue, axis.translate(value, null, null, old));
+                    translatedValue = pick(translatedValue, axis.translate(value, void 0, void 0, old));
                     // Keep the translated value within sane bounds, and avoid Infinity
                     // to fail the isNumber test (#7709).
                     translatedValue = clamp(translatedValue, -1e5, 1e5);
@@ -19546,20 +19667,20 @@
              * The X value that the point is given.
              */
             Axis.prototype.nameToX = function (point) {
-                var explicitCategories = isArray(this.categories),
+                var explicitCategories = isArray(this.options.categories),
                     names = explicitCategories ? this.categories : this.names;
                 var nameX = point.options.x,
                     x;
                 point.series.requireSorting = false;
                 if (!defined(nameX)) {
-                    nameX = this.options.uniqueNames ?
+                    nameX = this.options.uniqueNames && names ?
                         (explicitCategories ?
                             names.indexOf(point.name) :
                             pick(names.keys[point.name], -1)) :
                         point.series.autoIncrement();
                 }
                 if (nameX === -1) { // Not found in currenct categories
-                    if (!explicitCategories) {
+                    if (!explicitCategories && names) {
                         x = names.length;
                     }
                 }
@@ -19954,15 +20075,9 @@
                 if (!tickIntervalOption && axis.tickInterval < minTickInterval) {
                     axis.tickInterval = minTickInterval;
                 }
-                // for linear axes, get magnitude and normalize the interval
+                // For linear axes, normalize the interval
                 if (!axis.dateTime && !axis.logarithmic && !tickIntervalOption) {
-                    axis.tickInterval = normalizeTickInterval(axis.tickInterval, void 0, getMagnitude(axis.tickInterval), pick(options.allowDecimals, 
-                    // If the tick interval is greather than 0.5, avoid
-                    // decimals, as linear axes are often used to render
-                    // discrete values. #3363. If a tick amount is set, allow
-                    // decimals by default, as it increases the chances for a
-                    // good fit.
-                    axis.tickInterval < 0.5 || this.tickAmount !== void 0), !!this.tickAmount);
+                    axis.tickInterval = getNormalizedTickInterval(axis, axis.tickInterval);
                 }
                 // Prevent ticks from getting so close that we can't draw the labels
                 if (!this.tickAmount) {
@@ -20047,7 +20162,21 @@
                         tickPositions = axis.logarithmic.getLogTickPositions(this.tickInterval, this.min, this.max);
                     }
                     else {
-                        tickPositions = this.getLinearTickPositions(this.tickInterval, this.min, this.max);
+                        var startingTickInterval = this.tickInterval;
+                        var adjustedTickInterval = startingTickInterval;
+                        while (adjustedTickInterval <= startingTickInterval * 2) {
+                            tickPositions = this.getLinearTickPositions(this.tickInterval, this.min, this.max);
+                            // If there are more tick positions than the set tickAmount,
+                            // increase the tickInterval and continue until it fits.
+                            // (#17100)
+                            if (this.tickAmount &&
+                                tickPositions.length > this.tickAmount) {
+                                this.tickInterval = getNormalizedTickInterval(this, adjustedTickInterval *= 1.1);
+                            }
+                            else {
+                                break;
+                            }
+                        }
                     }
                     // Too dense ticks, keep only the first and last (#4477)
                     if (tickPositions.length > this.len) {
@@ -20146,39 +20275,92 @@
              */
             Axis.prototype.alignToOthers = function () {
                 var axis = this,
-                    others = // Whether there is another axis to pair with this one
-                     {},
-                    options = axis.options;
+                    alignedAxes = [this],
+                    options = axis.options,
+                    alignThresholds = (this.coll === 'yAxis' &&
+                        this.chart.options.chart.alignThresholds),
+                    thresholdAlignments = [];
                 var hasOther;
-                if (
-                // Only if alignTicks is true
-                this.chart.options.chart.alignTicks !== false &&
-                    options.alignTicks &&
+                axis.thresholdAlignment = void 0;
+                if ((
+                // Only if alignTicks or alignThresholds is true
+                (this.chart.options.chart.alignTicks !== false &&
+                    options.alignTicks) || (alignThresholds)) &&
                     // Disabled when startOnTick or endOnTick are false (#7604)
                     options.startOnTick !== false &&
                     options.endOnTick !== false &&
                     // Don't try to align ticks on a log axis, they are not evenly
                     // spaced (#6021)
                     !axis.logarithmic) {
-                    this.chart[this.coll].forEach(function (axis) {
-                        var otherOptions = axis.options, horiz = axis.horiz, key = [
-                                horiz ? otherOptions.left : otherOptions.top,
-                                otherOptions.width,
-                                otherOptions.height,
-                                otherOptions.pane
-                            ].join(',');
-                        if (axis.series.length) { // #4442
-                            if (others[key]) {
-                                hasOther = true; // #4201
-                            }
-                            else {
-                                others[key] = 1;
-                            }
+                    // Get a key identifying which pane the axis belongs to
+                    var getKey_1 = function (axis) {
+                            var horiz = axis.horiz,
+                        options = axis.options;
+                        return [
+                            horiz ? options.left : options.top,
+                            options.width,
+                            options.height,
+                            options.pane
+                        ].join(',');
+                    };
+                    var thisKey_1 = getKey_1(this);
+                    this.chart[this.coll].forEach(function (otherAxis) {
+                        var series = otherAxis.series;
+                        if (
+                        // #4442
+                        series.length &&
+                            series.some(function (s) { return s.visible; }) &&
+                            otherAxis !== axis &&
+                            getKey_1(otherAxis) === thisKey_1) {
+                            hasOther = true; // #4201
+                            alignedAxes.push(otherAxis);
                         }
                     });
                 }
+                if (hasOther && alignThresholds) {
+                    // Handle alignThresholds. The `thresholdAlignments` array keeps
+                    // records of where each axis in the group wants its threshold, from
+                    // 0 which is on `axis.min`, to 1 which is on `axis.max`.
+                    alignedAxes.forEach(function (otherAxis) {
+                        var threshAlign = otherAxis.getThresholdAlignment(axis);
+                        if (isNumber(threshAlign)) {
+                            thresholdAlignments.push(threshAlign);
+                        }
+                    });
+                    // For each of the axes in the group, record the average
+                    // `thresholdAlignment`.
+                    var thresholdAlignment_1 = thresholdAlignments.length > 1 ?
+                            thresholdAlignments.reduce(function (sum,
+                        n) { return (sum += n); }, 0) / thresholdAlignments.length :
+                            void 0;
+                    alignedAxes.forEach(function (axis) {
+                        axis.thresholdAlignment = thresholdAlignment_1;
+                    });
+                }
                 return hasOther;
             };
+            /**
+             * Where the axis wants its threshold, from 0 which is on `axis.min`, to 1 which
+             * is on `axis.max`.
+             *
+             * @private
+             * @function Highcharts.Axis#getThresholdAlignment
+             */
+            Axis.prototype.getThresholdAlignment = function (callerAxis) {
+                if (!isNumber(this.dataMin) ||
+                    (this !== callerAxis &&
+                        this.series.some(function (s) { return (s.isDirty || s.isDirtyData); }))) {
+                    this.getSeriesExtremes();
+                }
+                if (isNumber(this.threshold)) {
+                    var thresholdAlignment = clamp(((this.threshold - (this.dataMin || 0)) /
+                            ((this.dataMax || 0) - (this.dataMin || 0))), 0, 1);
+                    if (this.options.reversed) {
+                        thresholdAlignment = 1 - thresholdAlignment;
+                    }
+                    return thresholdAlignment;
+                }
+            };
             /**
              * Find the max ticks of either the x and y axis collection, and record it
              * in `this.tickAmount`.
@@ -20223,47 +20405,101 @@
              */
             Axis.prototype.adjustTickAmount = function () {
                 var axis = this,
-                    axisOptions = axis.options,
-                    tickInterval = axis.tickInterval,
+                    finalTickAmt = axis.finalTickAmt,
+                    max = axis.max,
+                    min = axis.min,
+                    options = axis.options,
                     tickPositions = axis.tickPositions,
                     tickAmount = axis.tickAmount,
-                    finalTickAmt = axis.finalTickAmt,
+                    thresholdAlignment = axis.thresholdAlignment,
                     currentTickAmount = tickPositions && tickPositions.length,
                     threshold = pick(axis.threshold,
                     axis.softThreshold ? 0 : null);
                 var len,
-                    i;
-                if (axis.hasData() &&
-                    isNumber(axis.min) &&
-                    isNumber(axis.max)) { // #14769
-                    if (currentTickAmount < tickAmount) {
+                    i,
+                    tickInterval = axis.tickInterval,
+                    thresholdTickIndex;
+                var 
+                    // Extend the tickPositions by appending a position
+                    append = function () { return tickPositions.push(correctFloat(tickPositions[tickPositions.length - 1] +
+                        tickInterval)); }, 
+                    // Extend the tickPositions by prepending a position
+                    prepend = function () { return tickPositions.unshift(correctFloat(tickPositions[0] - tickInterval)); };
+                // If `thresholdAlignment` is a number, it means the `alignThresholds`
+                // option is true. The `thresholdAlignment` is a scalar value between 0
+                // and 1 for where the threshold should be relative to `axis.min` and
+                // `axis.max`. Now that we know the tick amount, convert this to the
+                // tick index. Unless `thresholdAlignment` is exactly 0 or 1, avoid the
+                // first or last tick because that would lead to series being clipped.
+                if (isNumber(thresholdAlignment)) {
+                    thresholdTickIndex = thresholdAlignment < 0.5 ?
+                        Math.ceil(thresholdAlignment * (tickAmount - 1)) :
+                        Math.floor(thresholdAlignment * (tickAmount - 1));
+                    if (options.reversed) {
+                        thresholdTickIndex = tickAmount - 1 - thresholdTickIndex;
+                    }
+                }
+                if (axis.hasData() && isNumber(min) && isNumber(max)) { // #14769
+                    // Adjust extremes and translation to the modified tick positions
+                    var adjustExtremes = function () {
+                            axis.transA *= (currentTickAmount - 1) / (tickAmount - 1);
+                        // Do not crop when ticks are not extremes (#9841)
+                        axis.min = options.startOnTick ?
+                            tickPositions[0] :
+                            Math.min(min, tickPositions[0]);
+                        axis.max = options.endOnTick ?
+                            tickPositions[tickPositions.length - 1] :
+                            Math.max(max, tickPositions[tickPositions.length - 1]);
+                    };
+                    // When the axis is subject to the alignThresholds option. Use
+                    // axis.threshold because the local threshold includes the
+                    // `softThreshold`.
+                    if (isNumber(thresholdTickIndex) && isNumber(axis.threshold)) {
+                        // Throw away the previously computed tickPositions and start
+                        // from scratch with only the threshold itself, then add ticks
+                        // below the threshold first, then fill up above the threshold.
+                        // If we are not able to fill up to axis.max, double the
+                        // tickInterval and run again.
+                        while (tickPositions[thresholdTickIndex] !== threshold ||
+                            tickPositions.length !== tickAmount ||
+                            tickPositions[0] > min ||
+                            tickPositions[tickPositions.length - 1] < max) {
+                            tickPositions.length = 0;
+                            tickPositions.push(axis.threshold);
+                            while (tickPositions.length < tickAmount) {
+                                if (
+                                // Start by prepending positions until the threshold
+                                // is at the required index...
+                                tickPositions[thresholdTickIndex] === void 0 ||
+                                    tickPositions[thresholdTickIndex] > axis.threshold) {
+                                    prepend();
+                                }
+                                else {
+                                    // ... then append positions until we have the
+                                    // required length
+                                    append();
+                                }
+                            }
+                            // Safety vent
+                            if (tickInterval > axis.tickInterval * 8) {
+                                break;
+                            }
+                            tickInterval *= 2;
+                        }
+                        adjustExtremes();
+                    }
+                    else if (currentTickAmount < tickAmount) {
                         while (tickPositions.length < tickAmount) {
                             // Extend evenly for both sides unless we're on the
                             // threshold (#3965)
-                            if (tickPositions.length % 2 ||
-                                axis.min === threshold) {
-                                // to the end
-                                tickPositions.push(correctFloat(tickPositions[tickPositions.length - 1] +
-                                    tickInterval));
+                            if (tickPositions.length % 2 || min === threshold) {
+                                append();
                             }
                             else {
-                                // to the start
-                                tickPositions.unshift(correctFloat(tickPositions[0] - tickInterval));
+                                prepend();
                             }
                         }
-                        axis.transA *= (currentTickAmount - 1) / (tickAmount - 1);
-                        // Do not crop when ticks are not extremes (#9841)
-                        axis.min = axisOptions.startOnTick ?
-                            tickPositions[0] :
-                            Math.min(axis.min, tickPositions[0]);
-                        axis.max = axisOptions.endOnTick ?
-                            tickPositions[tickPositions.length - 1] :
-                            Math.max(axis.max, tickPositions[tickPositions.length - 1]);
-                        // We have too many ticks, run second pass to try to reduce ticks
-                    }
-                    else if (currentTickAmount > tickAmount) {
-                        axis.tickInterval *= 2;
-                        axis.setTickPositions();
+                        adjustExtremes();
                     }
                     // The finalTickAmt property is set in getTickAmount
                     if (defined(finalTickAmt)) {
@@ -20530,7 +20766,7 @@
              * @param {number} threshold
              * The threshold in axis values.
              *
-             * @return {number|undefined}
+             * @return {number}
              * The translated threshold position in terms of pixels, and corrected to
              * stay within the axis bounds.
              */
@@ -21026,12 +21262,10 @@
                 axis.staggerLines = (axis.horiz && labelOptions.staggerLines) || void 0;
                 // Create the axisGroup and gridGroup elements on first iteration
                 if (!axis.axisGroup) {
-                    var createGroup = function (name,
-                        suffix,
-                        zIndex) { return renderer.g(name)
+                    var createGroup = function (name, suffix, zIndex) { return renderer.g(name)
                             .attr({ zIndex: zIndex })
-                            .addClass("highcharts-" + coll.toLowerCase() + suffix + " " +
-                            (_this.isRadial ? "highcharts-radial-axis" + suffix + " " : '') +
+                            .addClass("highcharts-".concat(coll.toLowerCase()).concat(suffix, " ") +
+                            (_this.isRadial ? "highcharts-radial-axis".concat(suffix, " ") : '') +
                             (className || ''))
                             .add(axisParent); };
                     axis.gridGroup = createGroup('grid', '-grid', options.gridZIndex);
@@ -21219,18 +21453,18 @@
                     // The part of a multiline text that is below the baseline of the
                     // first line. Subtract 1 to preserve pixel-perfectness from the
                     // old behaviour (v5.0.12), where only one line was allowed.
-                    textHeightOvershoot = Math.max(axisTitle.getBBox(null, 0).height - fontMetrics.h - 1, 0), 
+                    textHeightOvershoot = axisTitle ? Math.max(axisTitle.getBBox(false, 0).height - fontMetrics.h - 1, 0) : 0, 
                     // the position in the length direction of the axis
-                    alongAxis = {
+                    alongAxis = ({
                         low: margin + (horiz ? 0 : axisLength),
                         middle: margin + axisLength / 2,
                         high: margin + (horiz ? axisLength : 0)
-                    }[axisTitleOptions.align], 
+                    })[axisTitleOptions.align], 
                     // the position in the perpendicular direction of the axis
                     offAxis = (horiz ? axisTop + this.height : axisLeft) +
                         (horiz ? 1 : -1) * // horizontal axis reverses the margin
                             (opposite ? -1 : 1) * // so does opposite axes
-                            this.axisTitleMargin +
+                            (this.axisTitleMargin || 0) +
                         [
                             -textHeightOvershoot,
                             textHeightOvershoot,
@@ -21454,14 +21688,8 @@
                 }
                 if (axisTitle && showAxis) {
                     var titleXy = axis.getTitlePosition();
-                    if (isNumber(titleXy.y)) {
-                        axisTitle[axisTitle.isNew ? 'attr' : 'animate'](titleXy);
-                        axisTitle.isNew = false;
-                    }
-                    else {
-                        axisTitle.attr('y', -9999);
-                        axisTitle.isNew = true;
-                    }
+                    axisTitle[axisTitle.isNew ? 'attr' : 'animate'](titleXy);
+                    axisTitle.isNew = false;
                 }
                 // Stacked totals:
                 if (stackLabelOptions && stackLabelOptions.enabled && axis.stacking) {
@@ -21657,10 +21885,10 @@
                                 stroke: options.color ||
                                     (categorized ?
                                         Color
-                                            .parse("#ccd6eb" /* highlightColor20 */)
+                                            .parse("#ccd6eb" /* Palette.highlightColor20 */)
                                             .setOpacity(0.25)
                                             .get() :
-                                        "#cccccc" /* neutralColor20 */),
+                                        "#cccccc" /* Palette.neutralColor20 */),
                                 'stroke-width': pick(options.width, 1)
                             }).css({
                                 'pointer-events': 'none'
@@ -22265,10 +22493,13 @@
                  * @private
                  */
                 Additions.prototype.getXDateFormat = function (x, dateTimeLabelFormats) {
-                    var axis = this.axis;
+                    var axis = this.axis,
+                        time = axis.chart.time;
                     return axis.closestPointRange ?
-                        axis.chart.time.getDateFormat(axis.closestPointRange, x, axis.options.startOfWeek, dateTimeLabelFormats) || dateTimeLabelFormats.year : // #2546, 2581
-                        dateTimeLabelFormats.day;
+                        time.getDateFormat(axis.closestPointRange, x, axis.options.startOfWeek, dateTimeLabelFormats) ||
+                            // #2546, 2581
+                            time.resolveDTLFormat(dateTimeLabelFormats.year).main :
+                        time.resolveDTLFormat(dateTimeLabelFormats.day).main;
                 };
                 return Additions;
             }());
@@ -22469,7 +22700,7 @@
                                 axisLength;
                         interval = pick(filteredTickIntervalOption, log.minorAutoInterval, (realMax - realMin) *
                             tickPixelIntervalOption / (totalPixelLength || 1));
-                        interval = normalizeTickInterval(interval, void 0, getMagnitude(interval));
+                        interval = normalizeTickInterval(interval);
                         positions = axis.getLinearTickPositions(interval, realMin, realMax).map(log.log2lin);
                         if (!minor) {
                             log.minorAutoInterval = interval / 5;
@@ -22903,7 +23134,7 @@
                 // Set the presentational attributes
                 if (!axis.chart.styledMode) {
                     if (isLine) {
-                        attribs.stroke = color || "#999999" /* neutralColor40 */;
+                        attribs.stroke = color || "#999999" /* Palette.neutralColor40 */;
                         attribs['stroke-width'] = pick(options.width, 1);
                         if (options.dashStyle) {
                             attribs.dashstyle =
@@ -22911,7 +23142,7 @@
                         }
                     }
                     else if (isBand) { // plot band
-                        attribs.fill = color || "#e6ebf5" /* highlightColor10 */;
+                        attribs.fill = color || "#e6ebf5" /* Palette.highlightColor10 */;
                         if (options.borderWidth) {
                             attribs.stroke = options.borderColor;
                             attribs['stroke-width'] = options.borderWidth;
@@ -22969,7 +23200,7 @@
                 }
                 else if (svgElem) {
                     if (path) {
-                        svgElem.show(true);
+                        svgElem.show();
                         svgElem.animate({ d: path });
                     }
                     else if (svgElem.d) {
@@ -23869,6 +24100,12 @@
              * the context here is an object holding point, series, x, y etc.
              *
              * @function Highcharts.Tooltip#defaultFormatter
+             *
+             * @param {Highcharts.Tooltip} tooltip
+             *
+             * @return {string|Array<string>}
+             * Returns a string (single tooltip and shared)
+             * or an array of strings (split tooltip)
              */
             Tooltip.prototype.defaultFormatter = function (tooltip) {
                 var items = this.points || splat(this);
@@ -24471,7 +24708,7 @@
                     shared = tooltip.shared,
                     styledMode = chart.styledMode;
                 var textConfig = {};
-                if (!options.enabled) {
+                if (!options.enabled || !point.series) { // #16820
                     return;
                 }
                 U.clearTimeout(this.hideTimer);
@@ -24554,7 +24791,7 @@
                                     stroke: (options.borderColor ||
                                         point.color ||
                                         currentSeries.color ||
-                                        "#666666" /* neutralColor60 */)
+                                        "#666666" /* Palette.neutralColor60 */)
                                 });
                             }
                             tooltip.updatePosition({
@@ -24754,7 +24991,7 @@
                             stroke: (options.borderColor ||
                                 point.color ||
                                 series.color ||
-                                "#333333" /* neutralColor80 */)
+                                "#333333" /* Palette.neutralColor80 */)
                         });
                     }
                     return tt;
@@ -25092,7 +25329,7 @@
                     // scale transform/css zoom. #11329.
                     if (chartPosition.scaleX !== 1 || chartPosition.scaleY !== 1) {
                         css(this.container, {
-                            transform: "scale(" + chartPosition.scaleX + ", " + chartPosition.scaleY + ")"
+                            transform: "scale(".concat(chartPosition.scaleX, ", ").concat(chartPosition.scaleY, ")")
                         });
                         anchorX *= chartPosition.scaleX;
                         anchorY *= chartPosition.scaleY;
@@ -25127,46 +25364,23 @@
          * @callback Highcharts.TooltipFormatterCallbackFunction
          *
          * @param {Highcharts.TooltipFormatterContextObject} this
-         *        Context to format
+         * Context to format
          *
          * @param {Highcharts.Tooltip} tooltip
-         *        The tooltip instance
+         * The tooltip instance
          *
          * @return {false|string|Array<(string|null|undefined)>|null|undefined}
-         *         Formatted text or false
+         * Formatted text or false
          */
         /**
+         * Configuration for the tooltip formatters.
+         *
          * @interface Highcharts.TooltipFormatterContextObject
+         * @extends Highcharts.PointLabelObject
          */ /**
-        * @name Highcharts.TooltipFormatterContextObject#color
-        * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
-        */ /**
-        * @name Highcharts.TooltipFormatterContextObject#colorIndex
-        * @type {number|undefined}
-        */ /**
-        * @name Highcharts.TooltipFormatterContextObject#key
-        * @type {number}
-        */ /**
-        * @name Highcharts.TooltipFormatterContextObject#percentage
-        * @type {number|undefined}
-        */ /**
-        * @name Highcharts.TooltipFormatterContextObject#point
-        * @type {Highcharts.Point}
-        */ /**
+        * Array of points in shared tooltips.
         * @name Highcharts.TooltipFormatterContextObject#points
         * @type {Array<Highcharts.TooltipFormatterContextObject>|undefined}
-        */ /**
-        * @name Highcharts.TooltipFormatterContextObject#series
-        * @type {Highcharts.Series}
-        */ /**
-        * @name Highcharts.TooltipFormatterContextObject#total
-        * @type {number|undefined}
-        */ /**
-        * @name Highcharts.TooltipFormatterContextObject#x
-        * @type {number}
-        */ /**
-        * @name Highcharts.TooltipFormatterContextObject#y
-        * @type {number}
         */
         /**
          * A callback function to place the tooltip in a specific position.
@@ -25343,6 +25557,15 @@
                  * @type {Highcharts.Series}
                  */
                 this.series = void 0;
+                /**
+                 * The attributes of the rendered SVG shape like in `column` or `pie`
+                 * series.
+                 *
+                 * @readonly
+                 * @name Highcharts.Point#shapeArgs
+                 * @type {Readonly<Highcharts.SVGAttributes>|undefined}
+                 */
+                this.shapeArgs = void 0;
                 /**
                  * The total of values in either a stack for stacked series, or a pie in a
                  * pie series.
@@ -26422,7 +26645,7 @@
         * @type {Highcharts.Point}
         */
         /**
-         * Configuration hash for the data label and tooltip formatters.
+         * Configuration for the data label and tooltip formatters.
          *
          * @interface Highcharts.PointLabelObject
          */ /**
@@ -26464,7 +26687,7 @@
         */ /**
         * The y value of the point.
         * @name Highcharts.PointLabelObject#y
-        * @type {number|undefined}
+        * @type {number|null|undefined}
         */
         /**
          * Gets fired when the mouse leaves the area close to the point.
@@ -26801,7 +27024,7 @@
                             if (!chart.styledMode) {
                                 selectionMarker.attr({
                                     fill: (chartOptions.selectionMarkerFill ||
-                                        color("#335cad" /* highlightColor80 */)
+                                        color("#335cad" /* Palette.highlightColor80 */)
                                             .setOpacity(0.25).get())
                                 });
                             }
@@ -27244,9 +27467,10 @@
              * name.
              */
             Pointer.prototype.inClass = function (element, className) {
-                var elemClassName;
-                while (element) {
-                    elemClassName = attr(element, 'class');
+                var elem = element,
+                    elemClassName;
+                while (elem) {
+                    elemClassName = attr(elem, 'class');
                     if (elemClassName) {
                         if (elemClassName.indexOf(className) !== -1) {
                             return true;
@@ -27255,7 +27479,7 @@
                             return false;
                         }
                     }
-                    element = element.parentNode;
+                    elem = elem.parentElement;
                 }
             };
             /**
@@ -27296,6 +27520,9 @@
              * properties `chartX` and `chartY` in order to work on the internal
              * coordinate system.
              *
+             * On map charts, the properties `lon` and `lat` are added to the event
+             * object given that the chart has projection information.
+             *
              * @function Highcharts.Pointer#normalize
              *
              * @param {global.MouseEvent|global.PointerEvent|global.TouchEvent} e
@@ -27891,11 +28118,12 @@
                      * The mouseOver event should be triggered when hoverPoint
                      * is correct.
                      */
-                    hoverPoint.firePointEvent('mouseOver');
-                    // Draw tooltip if necessary
-                    if (tooltip) {
-                        tooltip.refresh(useSharedTooltip ? points : hoverPoint, e);
-                    }
+                    hoverPoint.firePointEvent('mouseOver', void 0, function () {
+                        // Draw tooltip if necessary
+                        if (tooltip && hoverPoint) {
+                            tooltip.refresh(useSharedTooltip ? points : hoverPoint, e);
+                        }
+                    });
                     // Update positions (regardless of kdpoint or hoverPoint)
                 }
                 else if (followPointer && tooltip && !tooltip.isHidden) {
@@ -27926,7 +28154,7 @@
                         point = chart.hoverPoint; // #13002
                         if (!point || point.series[axis.coll] !== axis) {
                             point = find(points, function (p) {
-                                return p.series[axis.coll] === axis;
+                                return p.series && p.series[axis.coll] === axis;
                             });
                         }
                     }
@@ -28015,7 +28243,7 @@
                 var hoverChart = H.charts[pick(Pointer.hoverChartIndex, -1)];
                 if (hoverChart &&
                     hoverChart !== chart) {
-                    hoverChart.pointer.onContainerMouseLeave({ relatedTarget: true });
+                    hoverChart.pointer.onContainerMouseLeave({ relatedTarget: chart.container });
                 }
                 if (!hoverChart ||
                     !hoverChart.mouseIsDown) {
@@ -28477,7 +28705,7 @@
                 this.maxItemWidth = 0;
                 this.maxLegendWidth = 0;
                 this.offsetWidth = 0;
-                this.options = {};
+                this.options = void 0;
                 this.padding = 0;
                 this.pages = [];
                 this.proximate = false;
@@ -28808,7 +29036,7 @@
                          * @name Highcharts.Legend#title
                          * @type {Highcharts.SVGElement}
                          */
-                        this.title = this.chart.renderer.label(titleOptions.text, padding - 3, padding - 4, null, null, null, options.useHTML, null, 'legend-title')
+                        this.title = this.chart.renderer.label(titleOptions.text, padding - 3, padding - 4, void 0, void 0, void 0, options.useHTML, void 0, 'legend-title')
                             .attr({ zIndex: 1 });
                         if (!this.chart.styledMode) {
                             this.title.css(titleOptions.style);
@@ -28869,7 +29097,7 @@
                         item.series :
                         item,
                     seriesOptions = series.options,
-                    showCheckbox = legend.createCheckboxForItem &&
+                    showCheckbox = (legend.createCheckboxForItem) &&
                         seriesOptions &&
                         seriesOptions.showCheckbox,
                     useHTML = options.useHTML,
@@ -29140,7 +29368,7 @@
                     }
                 }, this);
                 distribute(boxes, chart.plotHeight).forEach(function (box) {
-                    if (box.item._legendItemPos) {
+                    if (box.item._legendItemPos && box.pos) {
                         box.item._legendItemPos[1] =
                             chart.plotTop - chart.spacing[0] + box.pos;
                     }
@@ -29175,8 +29403,7 @@
                 legend.lastItemY = 0;
                 legend.widthOption = relativeLength(options.width, chart.spacingBox.width - padding);
                 // Compute how wide the legend is allowed to be
-                allowedWidth =
-                    chart.spacingBox.width - 2 * padding - options.x;
+                allowedWidth = chart.spacingBox.width - 2 * padding - options.x;
                 if (['rm', 'lm'].indexOf(legend.getAlignment().substring(0, 2)) > -1) {
                     allowedWidth /= 2;
                 }
@@ -29249,7 +29476,6 @@
                         r: options.borderRadius
                     })
                         .add(legendGroup);
-                    box.isNew = true;
                 }
                 // Presentational
                 if (!chart.styledMode) {
@@ -29262,16 +29488,15 @@
                         .shadow(options.shadow);
                 }
                 if (legendWidth > 0 && legendHeight > 0) {
-                    box[box.isNew ? 'attr' : 'animate'](box.crisp.call({}, {
+                    box[box.placed ? 'animate' : 'attr'](box.crisp.call({}, {
                         x: 0,
                         y: 0,
                         width: legendWidth,
                         height: legendHeight
                     }, box.strokeWidth()));
-                    box.isNew = false;
                 }
                 // hide the border if no items
-                box[display ? 'show' : 'hide']();
+                legendGroup[display ? 'show' : 'hide']();
                 // Open for responsiveness
                 if (chart.styledMode && legendGroup.getStyle('display') === 'none') {
                     legendWidth = legendHeight = 0;
@@ -29311,6 +29536,11 @@
                 if (y !== alignTo.y) {
                     alignTo = merge(alignTo, { y: y });
                 }
+                if (!chart.hasRendered) {
+                    // Avoid animation when adjusting alignment for responsiveness and
+                    // colorAxis label layout
+                    this.group.placed = false;
+                }
                 this.group.align(merge(options, {
                     width: this.legendWidth,
                     height: this.legendHeight,
@@ -29444,7 +29674,7 @@
                         });
                         this.pager = renderer.text('', 15, 10)
                             .addClass('highcharts-legend-navigation');
-                        if (!chart.styledMode) {
+                        if (!chart.styledMode && navOptions.style) {
                             this.pager.css(navOptions.style);
                         }
                         this.pager.add(nav);
@@ -29505,7 +29735,7 @@
                     this.nav.attr({
                         translateX: padding,
                         translateY: clipHeight + this.padding + 7 + this.titleHeight,
-                        visibility: 'visible'
+                        visibility: 'inherit'
                     });
                     [this.up, this.upTracker].forEach(function (elem) {
                         elem.attr({
@@ -29957,7 +30187,6 @@
             fireEvent = U.fireEvent,
             getStyle = U.getStyle,
             isArray = U.isArray,
-            isFunction = U.isFunction,
             isNumber = U.isNumber,
             isObject = U.isObject,
             isString = U.isString,
@@ -30719,10 +30948,10 @@
                 var chart = this;
                 // Default style
                 var style = name === 'title' ? {
-                        color: "#333333" /* neutralColor80 */,
+                        color: "#333333" /* Palette.neutralColor80 */,
                         fontSize: this.options.isStock ? '16px' : '18px' // #2944
                     } : {
-                        color: "#666666" /* neutralColor60 */
+                        color: "#666666" /* Palette.neutralColor60 */
                     };
                 // Merge default options with explicit options
                 var options = this.options[name] = merge(
@@ -32003,9 +32232,32 @@
                 if (defined(this.index)) {
                     this.setReflow(this.options.chart.reflow);
                 }
+                this.warnIfA11yModuleNotLoaded();
                 // Don't run again
                 this.hasLoaded = true;
             };
+            /**
+             * Emit console warning if the a11y module is not loaded.
+             */
+            Chart.prototype.warnIfA11yModuleNotLoaded = function () {
+                var _a = this,
+                    options = _a.options,
+                    title = _a.title;
+                if (options && !this.accessibility) {
+                    // Make chart behave as an image with the title as alt text
+                    this.renderer.boxWrapper.attr({
+                        role: 'img',
+                        'aria-label': (title && title.element.textContent) || ''
+                    });
+                    if (!(options.accessibility && options.accessibility.enabled === false)) {
+                        error('Highcharts warning: Consider including the ' +
+                            '"accessibility.js" module to make your chart more ' +
+                            'usable for people with disabilities. Set the ' +
+                            '"accessibility.enabled" option to false to remove this ' +
+                            'warning. See https://www.highcharts.com/docs/accessibility/accessibility-module.', false, this);
+                    }
+                }
+            };
             /**
              * Add a series to the chart after render time. Note that this method should
              * never be used when adding data synchronously at chart render time, as it
@@ -32570,7 +32822,6 @@
                     lang = defaultOptions.lang,
                     btnOptions = chart.options.chart.resetZoomButton,
                     theme = btnOptions.theme,
-                    states = theme.states,
                     alignTo = (btnOptions.relativeTo === 'chart' ||
                         btnOptions.relativeTo === 'spacingBox' ?
                         null :
@@ -32583,7 +32834,7 @@
                 }
                 fireEvent(this, 'beforeShowResetZoom', null, function () {
                     chart.resetZoomButton = chart.renderer
-                        .button(lang.resetZoom, null, null, zoomOut, theme, states && states.hover)
+                        .button(lang.resetZoom, null, null, zoomOut, theme)
                         .attr({
                         align: btnOptions.position.align,
                         title: lang.resetZoomTitle
@@ -32684,9 +32935,7 @@
                             enabled: panning,
                             type: 'x'
                         }),
-                    chartOptions = chart.options.chart,
-                    hasMapNavigation = chart.options.mapNavigation &&
-                        chart.options.mapNavigation.enabled;
+                    chartOptions = chart.options.chart;
                 if (chartOptions && chartOptions.panning) {
                     chartOptions.panning = panningOptions;
                 }
@@ -32781,7 +33030,6 @@
                                 newMax <= paddedMax) {
                                 axis.setExtremes(newMin, newMax, false, false, { trigger: 'pan' });
                                 if (!chart.resetZoomButton &&
-                                    !hasMapNavigation &&
                                     // Show reset zoom button only when both newMin and
                                     // newMax values are between padded axis range.
                                     newMin !== paddedMin &&
@@ -34112,7 +34360,7 @@
                      *
                      * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
                      */
-                    lineColor: "#ffffff" /* backgroundColor */,
+                    lineColor: "#ffffff" /* Palette.backgroundColor */,
                     /**
                      * The width of the point marker's outline.
                      *
@@ -34312,7 +34560,7 @@
                              *
                              * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
                              */
-                            fillColor: "#cccccc" /* neutralColor20 */,
+                            fillColor: "#cccccc" /* Palette.neutralColor20 */,
                             /**
                              * The color of the point marker's outline. When
                              * `undefined`, the series' or point's color is used.
@@ -34322,7 +34570,7 @@
                              *
                              * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
                              */
-                            lineColor: "#000000" /* neutralColor100 */,
+                            lineColor: "#000000" /* Palette.neutralColor100 */,
                             /**
                              * The width of the point marker's outline.
                              *
@@ -34381,6 +34629,9 @@
                      * parameter, `event`, is passed to the function, containing common
                      * event information.
                      *
+                     * Returning `false` cancels the default behavior, which is to show a
+                     * tooltip for the point.
+                     *
                      * @sample {highcharts} highcharts/plotoptions/series-point-events-mouseover/
                      *         Show values in the chart's corner on mouse over
                      *
@@ -35103,7 +35354,7 @@
                      * @deprecated
                      *
                      * @extends   plotOptions.series.marker
-                     * @excluding states
+                     * @excluding states, symbol
                      * @product   highcharts highstock
                      */
                     marker: {
@@ -36035,7 +36286,7 @@
                     this.getCyclic('color');
                 }
                 else if (this.options.colorByPoint) {
-                    this.color = "#cccccc" /* neutralColor20 */;
+                    this.color = "#cccccc" /* Palette.neutralColor20 */;
                 }
                 else {
                     this.getCyclic('color', this.options.color ||
@@ -36222,7 +36473,7 @@
                     data.forEach(function (point, i) {
                         // .update doesn't exist on a linked, hidden series (#3709)
                         // (#10187)
-                        if (point !== oldData[i].y && oldData[i].update) {
+                        if (point !== oldData[i].y && (oldData[i].update)) {
                             oldData[i].update(point, false, null, false);
                         }
                     });
@@ -36319,8 +36570,19 @@
                     updatedData,
                     indexOfX = 0,
                     indexOfY = 1,
-                    firstPoint = null;
-                data = data || [];
+                    firstPoint = null,
+                    copiedData;
+                if (!chart.options.chart.allowMutatingData) { // #4259
+                    // Remove old reference
+                    if (options.data) {
+                        delete series.options.data;
+                    }
+                    if (series.userOptions.data) {
+                        delete series.userOptions.data;
+                    }
+                    copiedData = merge(true, data);
+                }
+                data = copiedData || data || [];
                 var dataLength = data.length;
                 redraw = pick(redraw, true);
                 if (dataSorting && dataSorting.enabled) {
@@ -36328,7 +36590,8 @@
                 }
                 // First try to run Point.update which is cheaper, allows animation,
                 // and keeps references to points.
-                if (updatePoints !== false &&
+                if (chart.options.chart.allowMutatingData &&
+                    updatePoints !== false &&
                     dataLength &&
                     oldDataLength &&
                     !series.cropped &&
@@ -36429,7 +36692,7 @@
                     // destroy old points
                     i = oldDataLength;
                     while (i--) {
-                        if (oldData[i] && oldData[i].destroy) {
+                        if (oldData[i] && (oldData[i].destroy)) {
                             oldData[i].destroy();
                         }
                     }
@@ -36553,7 +36816,7 @@
                     xExtremes = xAxis.getExtremes();
                     min = xExtremes.min;
                     max = xExtremes.max;
-                    updatingNames = xAxis.categories && !xAxis.names.length;
+                    updatingNames = !!(xAxis.categories && !xAxis.names.length);
                 }
                 // optionally filter out points outside the plot area
                 if (isCartesian &&
@@ -36687,7 +36950,7 @@
             Series.prototype.generatePoints = function () {
                 var series = this,
                     options = series.options,
-                    dataOptions = options.data,
+                    dataOptions = (series.processedData || options.data),
                     processedXData = series.processedXData,
                     processedYData = series.processedYData,
                     PointClass = series.pointClass,
@@ -37020,8 +37283,16 @@
                             !xAxis.validatePositiveValue(xValue)) {
                         point.isNull = true;
                     }
-                    // Get the plotX translation
+                    /**
+                     * The translated X value for the point in terms of pixels. Relative
+                     * to the X axis position if the series has one, otherwise relative
+                     * to the plot area. Depending on the series type this value might
+                     * not be defined.
+                     * @name Highcharts.Point#plotX
+                     * @type {number|undefined}
+                     */
                     point.plotX = plotX = correctFloat(// #5236
+                    // Get the plotX translation
                     limitedRange(xAxis.translate(// #3923
                     xValue, 0, 0, 0, 1, pointPlacement, this.type === 'flags')) // #3923
                     );
@@ -37082,6 +37353,14 @@
                             false,
                             true);
                         if (typeof translated !== 'undefined') {
+                            /**
+                             * The translated Y value for the point in terms of pixels.
+                             * Relative to the Y axis position if the series has one,
+                             * otherwise relative to the plot area. Depending on the
+                             * series type this value might not be defined.
+                             * @name Highcharts.Point#plotY
+                             * @type {number|undefined}
+                             */
                             point.plotY = limitedRange(translated);
                         }
                     }
@@ -37096,10 +37375,7 @@
                         threshold ||
                         0);
                     // some API data
-                    point.category = (categories &&
-                        typeof categories[point.x] !== 'undefined' ?
-                        categories[point.x] :
-                        point.x);
+                    point.category = pick(categories && categories[point.x], point.x);
                     // Determine auto enabling of markers (#3635, #5099)
                     if (!point.isNull && point.visible !== false) {
                         if (typeof lastPlotX !== 'undefined') {
@@ -37308,7 +37584,7 @@
                 this.setClip();
                 // 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 + ")\"]")) {
+                    if (clip && !_this.chart.container.querySelector("[clip-path=\"url(#".concat(clip.id, ")\"]"))) {
                         clip.destroy();
                         delete sharedClips[key];
                     }
@@ -37450,26 +37726,26 @@
                 var seriesStateOptions,
                     pointStateOptions,
                     radius = pick(pointMarkerOptions.radius,
-                    seriesMarkerOptions.radius);
+                    seriesMarkerOptions && seriesMarkerOptions.radius);
                 // Handle hover and select states
                 if (state) {
                     seriesStateOptions = seriesMarkerOptions.states[state];
                     pointStateOptions = pointMarkerOptions.states &&
                         pointMarkerOptions.states[state];
-                    radius = pick(pointStateOptions && pointStateOptions.radius, seriesStateOptions && seriesStateOptions.radius, radius + (seriesStateOptions && seriesStateOptions.radiusPlus ||
+                    radius = pick(pointStateOptions && pointStateOptions.radius, seriesStateOptions && seriesStateOptions.radius, radius && radius + (seriesStateOptions && seriesStateOptions.radiusPlus ||
                         0));
                 }
                 point.hasImage = symbol && symbol.indexOf('url') === 0;
                 if (point.hasImage) {
                     radius = 0; // and subsequently width and height is not set
                 }
-                var attribs = {
+                var attribs = isNumber(radius) ? {
                         // Math.floor for #1843:
                         x: seriesOptions.crisp ?
                             Math.floor(point.plotX - radius) :
                             point.plotX - radius,
                         y: point.plotY - radius
-                    };
+                    } : {};
                 if (radius) {
                     attribs.width = attribs.height = 2 * radius;
                 }
@@ -37559,7 +37835,7 @@
                     point,
                     axis;
                 // add event hook
-                fireEvent(series, 'destroy');
+                fireEvent(series, 'destroy', { keepEventsForUpdate: keepEventsForUpdate });
                 // remove events
                 this.removeEvents(keepEventsForUpdate);
                 // erase from axes
@@ -37746,10 +38022,10 @@
                 else if (series.visible) {
                     // If zones were removed, restore graph and area
                     if (graph) {
-                        graph.show(true);
+                        graph.show();
                     }
                     if (area) {
-                        area.show(true);
+                        area.show();
                     }
                 }
             };
@@ -38243,7 +38519,7 @@
                 else if (series.graph) { // create
                     series.tracker = renderer.path(trackerPath)
                         .attr({
-                        visibility: series.visible ? 'visible' : 'hidden',
+                        visibility: series.visible ? 'inherit' : 'hidden',
                         zIndex: 2
                     })
                         .addClass(trackByArea ?
@@ -38369,7 +38645,10 @@
                     names[x] = point.name;
                 }
                 dataOptions.splice(i, 0, options);
-                if (isInTheMiddle) {
+                if (isInTheMiddle ||
+                    // When processedData is present we need to splice an empty slot
+                    // into series.data, otherwise generatePoints won't pick it up.
+                    series.processedData) {
                     series.data.splice(i, 0, null);
                     series.processData();
                 }
@@ -38379,7 +38658,7 @@
                 }
                 // Shift the first point off the parallel arrays
                 if (shift) {
-                    if (data[0] && data[0].remove) {
+                    if (data[0] && (data[0].remove)) {
                         data[0].remove(false);
                     }
                     else {
@@ -38574,6 +38853,8 @@
                         typeof options.pointStart !== 'undefined' ||
                         typeof options.pointInterval !== 'undefined' ||
                         typeof options.relativeXValue !== 'undefined' ||
+                        options.joinBy ||
+                        options.mapData || // #11636
                         // Changes to data grouping requires new points in new group
                         series.hasOptionChanged('dataGrouping') ||
                         series.hasOptionChanged('pointStart') ||
@@ -38582,9 +38863,12 @@
                         series.hasOptionChanged('keys'));
                 newType = newType || initialType;
                 if (keepPoints) {
-                    preserve.push('data', 'isDirtyData', 'points', 'processedXData', 'processedYData', 'xIncrement', 'cropped', '_hasPointMarkers', '_hasPointLabels', 'clips', // #15420
+                    preserve.push('data', 'isDirtyData', 'points', 'processedData', // #17057
+                    'processedXData', 'processedYData', 'xIncrement', 'cropped', '_hasPointMarkers', '_hasPointLabels', 'clips', // #15420
                     // Networkgraph (#14397)
                     'nodes', 'layout', 
+                    // Treemap
+                    'level', 
                     // Map specific, consider moving it to series-specific preserve-
                     // properties (#10617)
                     'mapMap', 'mapData', 'minY', 'maxY', 'minX', 'maxX');
@@ -38636,8 +38920,6 @@
                     series.remove(false, false, false, true);
                     if (casting) {
                         // Modern browsers including IE11
-                        // @todo slow, consider alternatives mentioned:
-                        // https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/setPrototypeOf
                         if (Object.setPrototypeOf) {
                             Object.setPrototypeOf(series, seriesTypes[newType].prototype);
                             // Legacy (IE < 11)
@@ -39477,6 +39759,7 @@
         var stop = A.stop;
         var addEvent = U.addEvent,
             createElement = U.createElement,
+            defined = U.defined,
             merge = U.merge,
             pick = U.pick;
         /* eslint-disable no-invalid-this, valid-jsdoc */
@@ -39510,7 +39793,7 @@
                 }
                 else if (scrollableMinHeight) {
                     this.scrollablePixelsY = scrollablePixelsY = Math.max(0, scrollableMinHeight - this.chartHeight);
-                    if (scrollablePixelsY) {
+                    if (defined(scrollablePixelsY)) {
                         this.scrollablePlotBox = (this.renderer.scrollablePlotBox = merge(this.plotBox));
                         this.plotBox.height = this.plotHeight += scrollablePixelsY;
                         if (this.inverted) {
@@ -39645,7 +39928,7 @@
                 axisClass = '.highcharts-yaxis';
             }
             if (axisClass) {
-                fixedSelectors.push(axisClass + ":not(.highcharts-radial-axis)", axisClass + "-labels:not(.highcharts-radial-axis-labels)");
+                fixedSelectors.push("" + axisClass + ":not(.highcharts-radial-axis)", "" + axisClass + "-labels:not(.highcharts-radial-axis-labels)");
             }
             fixedSelectors.forEach(function (className) {
                 [].forEach.call(container.querySelectorAll(className), function (elem) {
@@ -39696,7 +39979,7 @@
                     .addClass('highcharts-scrollable-mask')
                     .add();
                 addEvent(this, 'afterShowResetZoom', this.moveFixedElements);
-                addEvent(this, 'afterDrilldown', this.moveFixedElements);
+                addEvent(this, 'afterApplyDrilldown', this.moveFixedElements);
                 addEvent(this, 'afterLayOutTitles', this.moveFixedElements);
             }
             else {
@@ -39824,6 +40107,7 @@
          * area will become scrollable.
          *
          * @type      {number}
+         * @since     7.1.2
          * @apioption chart.scrollablePlotArea.minHeight
          */
         /**
@@ -39831,6 +40115,7 @@
          * area will become scrollable.
          *
          * @type      {number}
+         * @since     6.1.0
          * @apioption chart.scrollablePlotArea.minWidth
          */
         /**
@@ -39839,6 +40124,7 @@
          * Typically we would use 1 if the chart has right aligned Y axes.
          *
          * @type      {number}
+         * @since     6.1.0
          * @apioption chart.scrollablePlotArea.scrollPositionX
          */
         /**
@@ -39846,6 +40132,7 @@
          * 1, where 0 aligns the plot area to the top and 1 aligns it to the bottom.
          *
          * @type      {number}
+         * @since     7.1.2
          * @apioption chart.scrollablePlotArea.scrollPositionY
          */
         /**
@@ -40063,7 +40350,6 @@
                             renderer
                                 .g('stack-labels')
                                 .attr({
-                                visibility: 'visible',
                                 zIndex: 6,
                                 opacity: 0
                             })
@@ -40299,7 +40585,7 @@
                     }
                     else {
                         // Move label away to avoid the overlapping issues
-                        label.alignAttr.y = -9999;
+                        label.hide();
                         isJustify = false;
                     }
                     if (isJustify) {
@@ -40423,7 +40709,7 @@
                 this.chart.options.chart.ignoreHiddenSeries !== false)) {
                 return;
             }
-            var series = this, xData = series.processedXData, yData = series.processedYData, stackedYData = [], yDataLength = yData.length, seriesOptions = series.options, threshold = seriesOptions.threshold, stackThreshold = pick(seriesOptions.startFromThreshold && threshold, 0), stackOption = seriesOptions.stack, stackKey = stackingParam ? series.type + "," + stacking : series.stackKey, negKey = '-' + stackKey, negStacks = series.negStacks, yAxis = series.yAxis, stacks = yAxis.stacking.stacks, oldStacks = yAxis.stacking.oldStacks, stackIndicator, isNegative, stack, other, key, pointKey, i, x, y;
+            var series = this, xData = series.processedXData, yData = series.processedYData, stackedYData = [], yDataLength = yData.length, seriesOptions = series.options, threshold = seriesOptions.threshold, stackThreshold = pick(seriesOptions.startFromThreshold && threshold, 0), stackOption = seriesOptions.stack, stackKey = stackingParam ? "" + series.type + ",".concat(stacking) : series.stackKey, negKey = '-' + stackKey, negStacks = series.negStacks, yAxis = series.yAxis, stacks = yAxis.stacking.stacks, oldStacks = yAxis.stacking.oldStacks, stackIndicator, isNegative, stack, other, key, pointKey, i, x, y;
             yAxis.stacking.stacksTouched += 1;
             // loop over the non-null y values and read them into a local array
             for (i = 0; i < yDataLength; i++) {
@@ -40586,11 +40872,12 @@
             // changed:
             if (!defined(stackIndicator) ||
                 stackIndicator.x !== x ||
-                (key && stackIndicator.key !== key)) {
+                (key && stackIndicator.stackKey !== key)) {
                 stackIndicator = {
                     x: x,
                     index: 0,
-                    key: key
+                    key: key,
+                    stackKey: key
                 };
             }
             else {
@@ -40734,7 +41021,7 @@
                 if (!styledMode) {
                     props[0].push((options.lineColor ||
                         this.color ||
-                        "#cccccc" /* neutralColor20 */ // when colorByPoint = true
+                        "#cccccc" /* Palette.neutralColor20 */ // when colorByPoint = true
                     ), options.dashStyle);
                 }
                 props = series.getZonesGraphs(props);
@@ -41306,9 +41593,9 @@
                 });
                 props.forEach(function (prop) {
                     var areaKey = prop[0],
-                        area = series[areaKey],
-                        verb = area ? 'animate' : 'attr',
                         attribs = {};
+                    var area = series[areaKey];
+                    var verb = area ? 'animate' : 'attr';
                     // Create or update the area
                     if (area) { // update
                         area.endX = series.preventGraphAnimation ?
@@ -41338,15 +41625,18 @@
              * @private
              */
             AreaSeries.prototype.getGraphPath = function (points) {
-                var getGraphPath = LineSeries.prototype.getGraphPath, graphPath, options = this.options, stacking = options.stacking, yAxis = this.yAxis, topPath, bottomPath, bottomPoints = [], graphPoints = [], seriesIndex = this.index, i, areaPath, plotX, stacks = yAxis.stacking.stacks[this.stackKey], threshold = options.threshold, translatedThreshold = Math.round(// #10909
-                    yAxis.getThreshold(options.threshold)), isNull, yBottom, connectNulls = pick(// #10574
+                var getGraphPath = LineSeries.prototype.getGraphPath, options = this.options, stacking = options.stacking, yAxis = this.yAxis, bottomPoints = [], graphPoints = [], seriesIndex = this.index, stacks = yAxis.stacking.stacks[this.stackKey], threshold = options.threshold, translatedThreshold = Math.round(// #10909
+                    yAxis.getThreshold(options.threshold)), connectNulls = pick(// #10574
                     options.connectNulls, stacking === 'percent'), 
                     // To display null points in underlying stacked series, this
                     // series graph must be broken, and the area also fall down to
                     // fill the gap left by the null point. #2069
                     addDummyPoints = function (i, otherI, side) {
                         var point = points[i], stackedValues = stacking &&
-                            stacks[point.x].points[seriesIndex], nullVal = point[side + 'Null'] || 0, cliffVal = point[side + 'Cliff'] || 0, top, bottom, isNull = true;
+                            stacks[point.x].points[seriesIndex], nullVal = point[side + 'Null'] || 0, cliffVal = point[side + 'Cliff'] || 0;
+                    var top,
+                        bottom,
+                        isNull = true;
                     if (cliffVal || nullVal) {
                         top = (nullVal ?
                             stackedValues[0] :
@@ -41378,13 +41668,16 @@
                         });
                     }
                 };
+                var plotX,
+                    isNull,
+                    yBottom;
                 // Find what points to use
                 points = points || this.points;
                 // Fill in missing points
                 if (stacking) {
                     points = this.getStackPoints(points);
                 }
-                for (i = 0; i < points.length; i++) {
+                for (var i = 0, iEnd = points.length; i < iEnd; ++i) {
                     // Reset after series.update of stacking property (#12033)
                     if (!stacking) {
                         points[i].leftCliff = points[i].rightCliff =
@@ -41414,20 +41707,29 @@
                         }
                     }
                 }
-                topPath = getGraphPath.call(this, graphPoints, true, true);
+                var topPath = getGraphPath.call(this,
+                    graphPoints,
+                    true,
+                    true);
                 bottomPoints.reversed = true;
-                bottomPath = getGraphPath.call(this, bottomPoints, true, true);
+                var bottomPath = getGraphPath.call(this,
+                    bottomPoints,
+                    true,
+                    true);
                 var firstBottomPoint = bottomPath[0];
                 if (firstBottomPoint && firstBottomPoint[0] === 'M') {
                     bottomPath[0] = ['L', firstBottomPoint[1], firstBottomPoint[2]];
                 }
-                areaPath = topPath.concat(bottomPath);
+                var areaPath = topPath.concat(bottomPath);
                 if (areaPath.length) {
                     areaPath.push(['Z']);
                 }
                 // TODO: don't set leftCliff and rightCliff when connectNulls?
-                graphPath = getGraphPath
-                    .call(this, graphPoints, false, connectNulls);
+                var graphPath = getGraphPath
+                        .call(this,
+                    graphPoints,
+                    false,
+                    connectNulls);
                 areaPath.xMap = topPath.xMap;
                 this.areaPath = areaPath;
                 return graphPath;
@@ -41486,8 +41788,8 @@
                                     cliffName = direction === 1 ?
                                         'rightCliff' :
                                         'leftCliff',
-                                    cliff = 0,
                                     otherStack = stack[keys[idx + direction]];
+                                var cliff = 0;
                                 // If there is a stack next to this one,
                                 // to the left or to the right...
                                 if (otherStack) {
@@ -41594,7 +41896,7 @@
                  * @sample {highcharts} highcharts/plotoptions/area-fillcolor-gradient/
                  *         Gradient
                  *
-                 * @type      {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
+                 * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
                  * @product   highcharts highstock
                  * @apioption plotOptions.area.fillColor
                  */
@@ -41631,7 +41933,7 @@
                  * @sample {highcharts} highcharts/plotoptions/area-linecolor/
                  *         Dark gray line
                  *
-                 * @type      {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
+                 * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
                  * @product   highcharts highstock
                  * @apioption plotOptions.area.lineColor
                  */
@@ -41646,7 +41948,7 @@
                  * @sample {highcharts} highcharts/css/series-negative-color/
                  *         Negative color in styled mode
                  *
-                 * @type      {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
+                 * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
                  * @since     3.0
                  * @product   highcharts
                  * @apioption plotOptions.area.negativeFillColor
@@ -41824,6 +42126,11 @@
         var LineSeries = SeriesRegistry.seriesTypes.line;
         var merge = U.merge,
             pick = U.pick;
+        /* *
+         *
+         *  Class
+         *
+         * */
         /**
          * Spline series type.
          *
@@ -41872,12 +42179,11 @@
                     plotX = point.plotX || 0,
                     plotY = point.plotY || 0,
                     lastPoint = points[i - 1],
-                    nextPoint = points[i + 1],
-                    leftContX,
+                    nextPoint = points[i + 1];
+                var leftContX,
                     leftContY,
                     rightContX,
-                    rightContY,
-                    ret;
+                    rightContY;
                 /**
                  * @private
                  */
@@ -41893,8 +42199,8 @@
                     var lastX = lastPoint.plotX || 0,
                         lastY = lastPoint.plotY || 0,
                         nextX = nextPoint.plotX || 0,
-                        nextY = nextPoint.plotY || 0,
-                        correction = 0;
+                        nextY = nextPoint.plotY || 0;
+                    var correction = 0;
                     leftContX = (smoothing * plotX + lastX) / denom;
                     leftContY = (smoothing * plotY + lastY) / denom;
                     rightContX = (smoothing * plotX + nextX) / denom;
@@ -41980,15 +42286,19 @@
                         .add();
                 }
                 // */
-                ret = [
-                    'C',
-                    pick(lastPoint.rightContX, lastPoint.plotX, 0),
-                    pick(lastPoint.rightContY, lastPoint.plotY, 0),
-                    pick(leftContX, plotX, 0),
-                    pick(leftContY, plotY, 0),
-                    plotX,
-                    plotY
-                ];
+                var ret = [
+                        'C',
+                        pick(lastPoint.rightContX,
+                    lastPoint.plotX, 0),
+                        pick(lastPoint.rightContY,
+                    lastPoint.plotY, 0),
+                        pick(leftContX,
+                    plotX, 0),
+                        pick(leftContY,
+                    plotY, 0),
+                        plotX,
+                        plotY
+                    ];
                 // reset for updating series later
                 lastPoint.rightContX = lastPoint.rightContY = void 0;
                 return ret;
@@ -42093,7 +42403,7 @@
 
         return SplineSeries;
     });
-    _registerModule(_modules, 'Series/AreaSpline/AreaSplineSeries.js', [_modules['Series/Area/AreaSeries.js'], _modules['Series/Spline/SplineSeries.js'], _modules['Core/Legend/LegendSymbol.js'], _modules['Core/Series/SeriesRegistry.js'], _modules['Core/Utilities.js']], function (AreaSeries, SplineSeries, LegendSymbol, SeriesRegistry, U) {
+    _registerModule(_modules, 'Series/AreaSpline/AreaSplineSeries.js', [_modules['Series/Spline/SplineSeries.js'], _modules['Core/Legend/LegendSymbol.js'], _modules['Core/Series/SeriesRegistry.js'], _modules['Core/Utilities.js']], function (SplineSeries, LegendSymbol, SeriesRegistry, U) {
         /* *
          *
          *  (c) 2010-2021 Torstein Honsi
@@ -42119,7 +42429,9 @@
                 d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
             };
         })();
-        var areaProto = AreaSeries.prototype;
+        var _a = SeriesRegistry.seriesTypes,
+            AreaSeries = _a.area,
+            areaProto = _a.area.prototype;
         var extend = U.extend,
             merge = U.merge;
         /* *
@@ -42141,7 +42453,7 @@
             function AreaSplineSeries() {
                 /* *
                  *
-                 *  Static properties
+                 *  Static Properties
                  *
                  * */
                 var _this = _super !== null && _super.apply(this,
@@ -42156,40 +42468,6 @@
                 _this.options = void 0;
                 return _this;
             }
-            /**
-             * The area spline series is an area series where the graph between the
-             * points is smoothed into a spline.
-             *
-             * @sample {highcharts} highcharts/demo/areaspline/
-             *         Area spline chart
-             * @sample {highstock} stock/demo/areaspline/
-             *         Area spline chart
-             *
-             * @extends   plotOptions.area
-             * @excluding step, boostThreshold, boostBlending
-             * @product   highcharts highstock
-             * @apioption plotOptions.areaspline
-             */
-            /**
-             * @see [fillColor](#plotOptions.areaspline.fillColor)
-             * @see [fillOpacity](#plotOptions.areaspline.fillOpacity)
-             *
-             * @apioption plotOptions.areaspline.color
-             */
-            /**
-             * @see [color](#plotOptions.areaspline.color)
-             * @see [fillOpacity](#plotOptions.areaspline.fillOpacity)
-             *
-             * @apioption plotOptions.areaspline.fillColor
-             */
-            /**
-             * @see [color](#plotOptions.areaspline.color)
-             * @see [fillColor](#plotOptions.areaspline.fillColor)
-             *
-             * @default   {highcharts} 0.75
-             * @default   {highstock} 0.75
-             * @apioption plotOptions.areaspline.fillOpacity
-             */
             AreaSplineSeries.defaultOptions = merge(SplineSeries.defaultOptions, AreaSeries.defaultOptions);
             return AreaSplineSeries;
         }(SplineSeries));
@@ -42202,9 +42480,47 @@
         SeriesRegistry.registerSeriesType('areaspline', AreaSplineSeries);
         /* *
          *
-         *  Default export
+         *  Default Export
+         *
+         * */
+        /* *
+         *
+         *  API Options
          *
          * */
+        /**
+         * The area spline series is an area series where the graph between the
+         * points is smoothed into a spline.
+         *
+         * @sample {highcharts} highcharts/demo/areaspline/
+         *         Area spline chart
+         * @sample {highstock} stock/demo/areaspline/
+         *         Area spline chart
+         *
+         * @extends   plotOptions.area
+         * @excluding step, boostThreshold, boostBlending
+         * @product   highcharts highstock
+         * @apioption plotOptions.areaspline
+         */
+        /**
+         * @see [fillColor](#plotOptions.areaspline.fillColor)
+         * @see [fillOpacity](#plotOptions.areaspline.fillOpacity)
+         *
+         * @apioption plotOptions.areaspline.color
+         */
+        /**
+         * @see [color](#plotOptions.areaspline.color)
+         * @see [fillOpacity](#plotOptions.areaspline.fillOpacity)
+         *
+         * @apioption plotOptions.areaspline.fillColor
+         */
+        /**
+         * @see [color](#plotOptions.areaspline.color)
+         * @see [fillColor](#plotOptions.areaspline.fillColor)
+         *
+         * @default   0.75
+         * @apioption plotOptions.areaspline.fillOpacity
+         */
         /**
          * A `areaspline` series. If the [type](#series.areaspline.type) option
          * is not specified, it is inherited from [chart.type](#chart.type).
@@ -42290,8 +42606,7 @@
          * @see [color](#series.areaspline.color)
          * @see [fillColor](#series.areaspline.fillColor)
          *
-         * @default   {highcharts} 0.75
-         * @default   {highstock} 0.75
+         * @default   0.75
          * @apioption series.areaspline.fillOpacity
          */
         ''; // adds doclets above into transpilat
@@ -42600,8 +42915,9 @@
                 var _this = this;
                 var stacking = this.options.stacking;
                 if (!point.isNull && metrics.columnCount > 1) {
-                    var indexInCategory_1 = 0;
-                    var totalInCategory_1 = 0;
+                    var reversedStacks_1 = this.yAxis.options.reversedStacks;
+                    var indexInCategory_1 = 0,
+                        totalInCategory_1 = reversedStacks_1 ? 0 : -metrics.columnCount;
                     // 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
@@ -42622,7 +42938,8 @@
                                         indexInCategory_1 = totalInCategory_1;
                                     }
                                     if (stackItem.hasValidPoints) {
-                                        totalInCategory_1++;
+                                        reversedStacks_1 ? // #16169
+                                            totalInCategory_1++ : totalInCategory_1--;
                                     }
                                     // If `stacking` is not enabled, look for the index
                                     // and total of the `group` stack.
@@ -43281,7 +43598,7 @@
                          * @default #cccccc
                          * @product highcharts highstock gantt
                          */
-                        color: "#cccccc" /* neutralColor20 */,
+                        color: "#cccccc" /* Palette.neutralColor20 */,
                         /**
                          * A specific border color for the selected point.
                          *
@@ -43289,7 +43606,7 @@
                          * @default #000000
                          * @product highcharts highstock gantt
                          */
-                        borderColor: "#000000" /* neutralColor100 */
+                        borderColor: "#000000" /* Palette.neutralColor100 */
                     }
                 },
                 dataLabels: {
@@ -43356,7 +43673,7 @@
                  *
                  * @private
                  */
-                borderColor: "#ffffff" /* backgroundColor */
+                borderColor: "#ffffff" /* Palette.backgroundColor */
             });
             return ColumnSeries;
         }(Series));
@@ -43602,17 +43919,18 @@
                     inverted = this.isCartesian && chart.inverted,
                     enabledDataSorting = this.enabledDataSorting,
                     plotX = pick(point.dlBox && point.dlBox.centerX,
-                    point.plotX, -9999),
-                    plotY = pick(point.plotY, -9999),
-                    bBox = dataLabel.getBBox(),
+                    point.plotX),
+                    plotY = point.plotY,
                     rotation = options.rotation,
                     align = options.align,
-                    isInsidePlot = chart.isInsidePlot(plotX,
+                    isInsidePlot = defined(plotX) &&
+                        defined(plotY) &&
+                        chart.isInsidePlot(plotX,
                     Math.round(plotY), {
-                        inverted: inverted,
-                        paneCoordinates: true,
-                        series: series
-                    }),
+                            inverted: inverted,
+                            paneCoordinates: true,
+                            series: series
+                        }),
                     setStartPos = function (alignOptions) {
                         if (enabledDataSorting && series.xAxis && !justify) {
                             series.setDataLabelStartPos(point,
@@ -43623,8 +43941,6 @@
                     }
                 };
                 var baseline,
-                    normRotation,
-                    negRotation,
                     rotCorr, // rotation correction
                     // Math.round for rounding errors (#2683), alignTo to allow column
                     // labels (#2700)
@@ -43648,7 +43964,12 @@
                                 paneCoordinates: true,
                                 series: series
                             })));
-                if (visible) {
+                if (visible && defined(plotX) && defined(plotY)) {
+                    if (rotation) {
+                        dataLabel.attr({ align: align });
+                    }
+                    var bBox = dataLabel.getBBox(true),
+                        bBoxCorrection = [0, 0];
                     baseline = chart.renderer.fontMetrics(chart.styledMode ? void 0 : options.style.fontSize, dataLabel).b;
                     // The alignment box is a singular point
                     alignTo = extend({
@@ -43677,27 +43998,12 @@
                                 { top: 0, middle: 0.5, bottom: 1 }[options.verticalAlign] *
                                     alignTo.height)
                         };
+                        bBoxCorrection = [
+                            bBox.x - Number(dataLabel.attr('x')),
+                            bBox.y - Number(dataLabel.attr('y'))
+                        ];
                         setStartPos(alignAttr); // data sorting
-                        dataLabel[isNew ? 'attr' : 'animate'](alignAttr)
-                            .attr({
-                            align: align
-                        });
-                        // Compensate for the rotated label sticking out on the sides
-                        normRotation = (rotation + 720) % 360;
-                        negRotation = normRotation > 180 && normRotation < 360;
-                        if (align === 'left') {
-                            alignAttr.y -= negRotation ? bBox.height : 0;
-                        }
-                        else if (align === 'center') {
-                            alignAttr.x -= bBox.width / 2;
-                            alignAttr.y -= bBox.height / 2;
-                        }
-                        else if (align === 'right') {
-                            alignAttr.x -= bBox.width;
-                            alignAttr.y -= negRotation ? 0 : bBox.height;
-                        }
-                        dataLabel.placed = true;
-                        dataLabel.alignAttr = alignAttr;
+                        dataLabel[isNew ? 'attr' : 'animate'](alignAttr);
                     }
                     else {
                         setStartPos(alignTo); // data sorting
@@ -43710,12 +44016,37 @@
                         // Now check that the data label is within the plot area
                     }
                     else if (pick(options.crop, true)) {
+                        var x = alignAttr.x,
+                            y = alignAttr.y;
+                        x += bBoxCorrection[0];
+                        y += bBoxCorrection[1];
+                        // Uncomment this block to visualize the bounding boxes used for
+                        // determining visibility
+                        /*
+                        chart.renderer.rect(
+                            chart.plotLeft + alignAttr.x + bBox.x,
+                            chart.plotTop + alignAttr.y + bBox.y + 9999,
+                            bBox.width,
+                            bBox.height
+                        ).attr({
+                            stroke: 'rgba(0, 0, 0, 0.3)',
+                            'stroke-width': 0.5
+                        }).add();
+                        chart.renderer.circle(
+                            chart.plotLeft + alignAttr.x,
+                            chart.plotTop + alignAttr.y,
+                            2
+                        ).attr({
+                            fill: 'red',
+                            zIndex: 20
+                        }).add();
+                        // */
                         visible =
-                            chart.isInsidePlot(alignAttr.x, alignAttr.y, {
+                            chart.isInsidePlot(x, y, {
                                 paneCoordinates: true,
                                 series: series
                             }) &&
-                                chart.isInsidePlot(alignAttr.x + bBox.width, alignAttr.y + bBox.height, {
+                                chart.isInsidePlot(x + bBox.width, y + bBox.height, {
                                     paneCoordinates: true,
                                     series: series
                                 });
@@ -43739,9 +44070,12 @@
                 }
                 // Show or hide based on the final aligned position
                 if (!visible && (!enabledDataSorting || justify)) {
-                    dataLabel.hide(true);
+                    dataLabel.hide();
                     dataLabel.placed = false; // don't animate back in
                 }
+                else {
+                    dataLabel.show();
+                }
             }
             /**
              * Handle the dataLabels.filter option.
@@ -43818,7 +44152,7 @@
                         var group = series.dataLabelsGroup;
                         if (group) {
                             if (series.visible) { // #2597, #3023, #3024
-                                dataLabelsGroup.show(true);
+                                dataLabelsGroup.show();
                             }
                             group[seriesOptions.animation ? 'animate' : 'attr']({ opacity: 1 }, animationConfig);
                         }
@@ -43850,10 +44184,10 @@
                                 rotation,
                                 attr,
                                 dataLabel = point.dataLabels ?
-                                    point.dataLabels[i] : point.dataLabel;
-                            var labelDistance = pick(labelOptions.distance,
-                                point.labelDistance),
+                                    point.dataLabels[i] : point.dataLabel,
                                 isNew = !dataLabel;
+                            var labelDistance = pick(labelOptions.distance,
+                                point.labelDistance);
                             if (labelEnabled) {
                                 // Create individual options structure that can be
                                 // extended without affecting others
@@ -43867,7 +44201,7 @@
                                 rotation = labelOptions.rotation;
                                 if (!chart.styledMode) {
                                     // Determine the color
-                                    style.color = pick(labelOptions.color, style.color, series.color, "#000000" /* neutralColor100 */);
+                                    style.color = pick(labelOptions.color, style.color, series.color, "#000000" /* Palette.neutralColor100 */);
                                     // Get automated contrast color
                                     if (style.color === 'contrast') {
                                         point.contrastColor = renderer.getContrast((point.color || series.color));
@@ -43876,7 +44210,7 @@
                                             labelDistance < 0 ||
                                             !!seriesOptions.stacking ?
                                             point.contrastColor :
-                                            "#000000" /* neutralColor100 */;
+                                            "#000000" /* Palette.neutralColor100 */;
                                     }
                                     else {
                                         delete point.contrastColor;
@@ -43907,7 +44241,15 @@
                             // #820
                             if (dataLabel && (!labelEnabled ||
                                 !defined(labelText) ||
-                                !!dataLabel.div !== !!labelOptions.useHTML)) {
+                                !!dataLabel.div !== !!labelOptions.useHTML ||
+                                (
+                                // Change from no rotation to rotation and
+                                // vice versa. Don't use defined() because
+                                // rotation = 0 means also rotation = undefined
+                                (!dataLabel.rotation ||
+                                    !labelOptions.rotation) &&
+                                    dataLabel.rotation !== labelOptions.rotation))) {
+                                isNew = true;
                                 point.dataLabel = dataLabel =
                                     point.dataLabel && point.dataLabel.destroy();
                                 if (point.dataLabels) {
@@ -43945,10 +44287,10 @@
                                     point.dataLabels = point.dataLabels || [];
                                     dataLabel = point.dataLabels[i] = rotation ?
                                         // Labels don't rotate, use text element
-                                        renderer.text(labelText, 0, -9999, labelOptions.useHTML)
+                                        renderer.text(labelText, 0, 0, labelOptions.useHTML)
                                             .addClass('highcharts-data-label') :
                                         // We can use label
-                                        renderer.label(labelText, 0, -9999, labelOptions.shape, null, null, labelOptions.useHTML, null, 'data-label');
+                                        renderer.label(labelText, 0, 0, labelOptions.shape, null, null, labelOptions.useHTML, null, 'data-label');
                                     // Store for backwards compatibility
                                     if (!i) {
                                         point.dataLabel = dataLabel;
@@ -43989,6 +44331,9 @@
                                 // we need to align it
                                 series.alignDataLabel(point, dataLabel, labelOptions, null, isNew);
                             }
+                            else if (dataLabel) {
+                                dataLabel.hide();
+                            }
                         });
                     });
                 }
@@ -44466,7 +44811,7 @@
 
         return BarSeries;
     });
-    _registerModule(_modules, 'Series/Scatter/ScatterSeries.js', [_modules['Series/Column/ColumnSeries.js'], _modules['Series/Line/LineSeries.js'], _modules['Core/Series/SeriesRegistry.js'], _modules['Core/Utilities.js']], function (ColumnSeries, LineSeries, SeriesRegistry, U) {
+    _registerModule(_modules, 'Series/Scatter/ScatterSeries.js', [_modules['Core/Series/SeriesRegistry.js'], _modules['Core/Utilities.js']], function (SeriesRegistry, U) {
         /* *
          *
          *  (c) 2010-2021 Torstein Honsi
@@ -44492,6 +44837,9 @@
                 d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
             };
         })();
+        var _a = SeriesRegistry.seriesTypes,
+            ColumnSeries = _a.column,
+            LineSeries = _a.line;
         var addEvent = U.addEvent,
             extend = U.extend,
             merge = U.merge;
@@ -44508,6 +44856,11 @@
         var ScatterSeries = /** @class */ (function (_super) {
                 __extends(ScatterSeries, _super);
             function ScatterSeries() {
+                /* *
+                 *
+                 *  Static Properties
+                 *
+                 * */
                 var _this = _super !== null && _super.apply(this,
                     arguments) || this;
                 /* *
@@ -44575,7 +44928,6 @@
             };
             /**
              * @private
-             * @function Highcharts.seriesTypes.scatter#drawGraph
              */
             ScatterSeries.prototype.drawGraph = function () {
                 if (this.options.lineWidth) {
@@ -44661,7 +45013,7 @@
                  *
                  * @type      {boolean}
                  * @default   false
-                 * @product   highcharts highstock
+                 * @product   highcharts highstock highmaps
                  * @apioption plotOptions.scatter.stickyTracking
                  */
                 /**
@@ -44778,7 +45130,7 @@
          * @product   highcharts highstock
          * @apioption series.scatter.data
          */
-        ''; // adds doclets above to transpilat
+        ''; // keeps doclets above in JS file
 
         return ScatterSeries;
     });
@@ -44793,7 +45145,8 @@
          *
          * */
         var deg2rad = H.deg2rad;
-        var isNumber = U.isNumber,
+        var fireEvent = U.fireEvent,
+            isNumber = U.isNumber,
             pick = U.pick,
             relativeLength = U.relativeLength;
         /**
@@ -44827,7 +45180,8 @@
                     plotHeight = chart.plotHeight - 2 * slicingRoom,
                     centerOption = options.center,
                     smallestSize = Math.min(plotWidth,
-                    plotHeight);
+                    plotHeight),
+                    thickness = options.thickness;
                 var handleSlicingRoom,
                     size = options.size,
                     innerSize = options.innerSize || 0,
@@ -44864,6 +45218,12 @@
                 if (positions[3] > positions[2]) {
                     positions[3] = positions[2];
                 }
+                // thickness overrides innerSize, need to be less than pie size (#6647)
+                if (isNumber(thickness) &&
+                    thickness * 2 < positions[2] && thickness > 0) {
+                    positions[3] = positions[2] - thickness * 2;
+                }
+                fireEvent(this, 'afterGetCenter', { positions: positions });
                 return positions;
             }
             CenteredUtilities.getCenter = getCenter;
@@ -45051,12 +45411,19 @@
                 return isNumber(this.y) && this.y >= 0;
             };
             /**
-             * Toggle the visibility of the pie slice.
-             * @private
+             * Toggle the visibility of a pie slice or other data point. Note that this
+             * method is available only for some series, like pie, treemap and sunburst.
+             *
+             * @function Highcharts.Point#setVisible
+             *
+             * @param {boolean} [vis]
+             * True to show the pie slice or other data point, false to hide. If
+             * undefined, the visibility is toggled.
+             *
+             * @param {boolean} [redraw] Whether to redraw the chart after the point is
+             * altered. If doing more operations on the chart, it is a good idea to set
+             * redraw to false and call {@link Chart#redraw|chart.redraw()} after.
              *
-             * @param {boolean} vis
-             * Whether to show the slice or not. If undefined, the visibility is
-             * toggled.
              */
             PiePoint.prototype.setVisible = function (vis, redraw) {
                 var _this = this;
@@ -45360,7 +45727,7 @@
                         this.graph.attr({
                             'stroke-width': options.borderWidth,
                             fill: options.fillColor || 'none',
-                            stroke: options.color || "#cccccc" /* neutralColor20 */
+                            stroke: options.color || "#cccccc" /* Palette.neutralColor20 */
                         });
                     }
                 }
@@ -45517,6 +45884,7 @@
              * @private
              */
             PieSeries.prototype.translate = function (positions) {
+                fireEvent(this, 'translate');
                 this.generatePoints();
                 var series = this,
                     precision = 1000, // issue #172
@@ -45686,7 +46054,7 @@
              *               pointPlacement, pointStart, softThreshold, stacking, step,
              *               threshold, turboThreshold, zoneAxis, zones, dataSorting,
              *               boostBlending
-             * @product      highcharts
+             * @product      highcharts highmaps
              * @optionparent plotOptions.pie
              */
             PieSeries.defaultOptions = merge(Series.defaultOptions, {
@@ -45706,7 +46074,7 @@
                  *
                  * @type      {Function}
                  * @since     1.2.0
-                 * @product   highcharts
+                 * @product   highcharts highmaps
                  * @context   Highcharts.Point
                  * @apioption plotOptions.pie.events.checkboxClick
                  */
@@ -45722,7 +46090,7 @@
                  *
                  * @type      {Highcharts.PointLegendItemClickCallbackFunction}
                  * @since     1.2.0
-                 * @product   highcharts
+                 * @product   highcharts highmaps
                  * @apioption plotOptions.pie.point.events.legendItemClick
                  */
                 /**
@@ -45738,7 +46106,7 @@
                  *
                  * @type    {Array<(number|string|null),(number|string|null)>}
                  * @default [null, null]
-                 * @product highcharts
+                 * @product highcharts highmaps
                  *
                  * @private
                  */
@@ -45783,7 +46151,7 @@
                  *
                  * @type      {Array<Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject>}
                  * @since     3.0
-                 * @product   highcharts
+                 * @product   highcharts highmaps
                  * @apioption plotOptions.pie.colors
                  */
                 /**
@@ -45810,7 +46178,7 @@
                      *
                      * @type      {string}
                      * @since     7.0.0
-                     * @product   highcharts
+                     * @product   highcharts highmaps
                      * @apioption plotOptions.pie.dataLabels.alignTo
                      */
                     allowOverlap: true,
@@ -45828,7 +46196,7 @@
                      *
                      * @type      {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
                      * @since     2.1
-                     * @product   highcharts
+                     * @product   highcharts highmaps
                      * @apioption plotOptions.pie.dataLabels.connectorColor
                      */
                     /**
@@ -45840,7 +46208,7 @@
                      *         No padding
                      *
                      * @since   2.1
-                     * @product highcharts
+                     * @product highcharts highmaps
                      */
                     connectorPadding: 5,
                     /**
@@ -45877,7 +46245,7 @@
                      *
                      * @type    {string|Function}
                      * @since   7.0.0
-                     * @product highcharts
+                     * @product highcharts highmaps
                      */
                     connectorShape: 'fixedOffset',
                     /**
@@ -45894,7 +46262,7 @@
                      * @type      {number}
                      * @default   1
                      * @since     2.1
-                     * @product   highcharts
+                     * @product   highcharts highmaps
                      * @apioption plotOptions.pie.dataLabels.connectorWidth
                      */
                     /**
@@ -45906,7 +46274,7 @@
                      *         crookDistance set to 90%
                      *
                      * @since   7.0.0
-                     * @product highcharts
+                     * @product highcharts highmaps
                      */
                     crookDistance: '70%',
                     /**
@@ -45920,7 +46288,7 @@
                      *
                      * @type    {number|string}
                      * @since   2.1
-                     * @product highcharts
+                     * @product highcharts highmaps
                      */
                     distance: 30,
                     enabled: true,
@@ -45961,7 +46329,7 @@
                      *         Non soft
                      *
                      * @since   2.1.7
-                     * @product highcharts
+                     * @product highcharts highmaps
                      */
                     softConnector: true,
                     /**
@@ -45997,9 +46365,20 @@
                  *
                  * @type      {number}
                  * @since     1.3.6
-                 * @product   highcharts
+                 * @product   highcharts highmaps
                  * @apioption plotOptions.pie.endAngle
                  */
+                /**
+                 * Thickness describing the ring size for a donut type chart,
+                 * overriding [innerSize](#plotOptions.pie.innerSize).
+                 *
+                 * @type      {number}
+                 * @default   undefined
+                 * @product   highcharts
+                 * @since 10.1.0
+                 * @apioption plotOptions.pie.thickness
+                 * @private
+                 */
                 /**
                  * Equivalent to [chart.ignoreHiddenSeries](#chart.ignoreHiddenSeries),
                  * this option tells whether the series shall be redrawn as if the
@@ -46012,7 +46391,7 @@
                  *         True, the hiddden point is ignored
                  *
                  * @since   2.3.0
-                 * @product highcharts
+                 * @product highcharts highmaps
                  *
                  * @private
                  */
@@ -46027,7 +46406,7 @@
                  * The size of the inner diameter for the pie. A size greater than 0
                  * renders a donut chart. Can be a percentage or pixel value.
                  * Percentages are relative to the pie size. Pixel values are given as
-                 * integers.
+                 * integers. Setting overridden by thickness.
                  *
                  *
                  * Note: in Highcharts < 4.1.2, the percentage was relative to the plot
@@ -46043,7 +46422,7 @@
                  * @type      {number|string}
                  * @default   0
                  * @since     2.0
-                 * @product   highcharts
+                 * @product   highcharts highmaps
                  * @apioption plotOptions.pie.innerSize
                  */
                 /**
@@ -46066,7 +46445,7 @@
                  * @type      {number|string}
                  * @default   80
                  * @since     3.0
-                 * @product   highcharts
+                 * @product   highcharts highmaps
                  * @apioption plotOptions.pie.minSize
                  */
                 /**
@@ -46083,7 +46462,7 @@
                  *         Smaller pie
                  *
                  * @type    {number|string|null}
-                 * @product highcharts
+                 * @product highcharts highmaps
                  *
                  * @private
                  */
@@ -46095,7 +46474,7 @@
                  * @sample {highcharts} highcharts/plotoptions/series-showinlegend/
                  *         One series in the legend, one hidden
                  *
-                 * @product highcharts
+                 * @product highcharts highmaps
                  *
                  * @private
                  */
@@ -46107,7 +46486,7 @@
                  * @sample {highcharts} highcharts/plotoptions/pie-slicedoffset-20/
                  *         20px offset
                  *
-                 * @product highcharts
+                 * @product highcharts highmaps
                  *
                  * @private
                  */
@@ -46122,7 +46501,7 @@
                  * @type      {number}
                  * @default   0
                  * @since     2.3.4
-                 * @product   highcharts
+                 * @product   highcharts highmaps
                  * @apioption plotOptions.pie.startAngle
                  */
                 /**
@@ -46134,7 +46513,7 @@
                  * `stickyTracking` is false and `tooltip.shared` is false, the tooltip
                  * will be hidden when moving the mouse between series.
                  *
-                 * @product highcharts
+                 * @product highcharts highmaps
                  *
                  * @private
                  */
@@ -46156,11 +46535,11 @@
                  *
                  * @type    {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
                  * @default #ffffff
-                 * @product highcharts
+                 * @product highcharts highmaps
                  *
                  * @private
                  */
-                borderColor: "#ffffff" /* backgroundColor */,
+                borderColor: "#ffffff" /* Palette.backgroundColor */,
                 /**
                  * The width of the border surrounding each slice.
                  *
@@ -46175,7 +46554,7 @@
                  * @sample {highcharts} highcharts/plotoptions/pie-borderwidth/
                  *         3px border
                  *
-                 * @product highcharts
+                 * @product highcharts highmaps
                  *
                  * @private
                  */
@@ -46189,7 +46568,7 @@
                     /**
                      * @extends   plotOptions.series.states.hover
                      * @excluding marker, lineWidth, lineWidthPlus
-                     * @product   highcharts
+                     * @product   highcharts highmaps
                      */
                     hover: {
                         /**
@@ -46203,7 +46582,7 @@
                          * @sample {highcharts} highcharts/plotoptions/pie-states-hover-brightness/
                          *         Brightened by 0.5
                          *
-                         * @product highcharts
+                         * @product highcharts highmaps
                          */
                         brightness: 0.1
                     }
@@ -46245,7 +46624,7 @@
          * @extends   series,plotOptions.pie
          * @excluding cropThreshold, dataParser, dataURL, stack, xAxis, yAxis,
          *            dataSorting, step, boostThreshold, boostBlending
-         * @product   highcharts
+         * @product   highcharts highmaps
          * @apioption series.pie
          */
         /**
@@ -46289,19 +46668,19 @@
          * @type      {Array<number|Array<string,(number|null)>|null|*>}
          * @extends   series.line.data
          * @excluding marker, x
-         * @product   highcharts
+         * @product   highcharts highmaps
          * @apioption series.pie.data
          */
         /**
          * @type      {Highcharts.SeriesPieDataLabelsOptionsObject}
-         * @product   highcharts
+         * @product   highcharts highmaps
          * @apioption series.pie.data.dataLabels
          */
         /**
          * The sequential index of the data point in the legend.
          *
          * @type      {number}
-         * @product   highcharts
+         * @product   highcharts highmaps
          * @apioption series.pie.data.legendIndex
          */
         /**
@@ -46311,18 +46690,18 @@
          *         One sliced point
          *
          * @type      {boolean}
-         * @product   highcharts
+         * @product   highcharts highmaps
          * @apioption series.pie.data.sliced
          */
         /**
          * @extends plotOptions.pie.dataLabels
          * @excluding align, allowOverlap, inside, staggerLines, step
-         * @product   highcharts
+         * @product   highcharts highmaps
          * @apioption series.pie.dataLabels
          */
         /**
          * @excluding legendItemClick
-         * @product   highcharts
+         * @product   highcharts highmaps
          * @apioption series.pie.events
          */
         ''; // placeholder for transpiled doclets above
@@ -46691,7 +47070,7 @@
                                             'stroke-width': connectorWidth,
                                             'stroke': (pointDataLabelsOptions.connectorColor ||
                                                 point.color ||
-                                                "#666666" /* neutralColor60 */)
+                                                "#666666" /* Palette.neutralColor60 */)
                                         });
                                     }
                                 }
@@ -46789,7 +47168,9 @@
                     if (newSize < center[2]) {
                         center[2] = newSize;
                         center[3] = Math.min(// #3632
-                        relativeLength(options.innerSize || 0, newSize), newSize);
+                        options.thickness ?
+                            Math.max(0, newSize - options.thickness * 2) :
+                            Math.max(0, relativeLength(options.innerSize || 0, newSize)), newSize); // #6647
                         this.translate(center);
                         if (this.drawDataLabels) {
                             this.drawDataLabels();
@@ -46852,9 +47233,7 @@
                     !yAxis.options.stackLabels.allowOverlap) {
                     objectEach(yAxis.stacking.stacks, function (stack) {
                         objectEach(stack, function (stackItem) {
-                            if (stackItem.label &&
-                                stackItem.label.visibility !== 'hidden' // #15607
-                            ) {
+                            if (stackItem.label) {
                                 labels.push(stackItem.label);
                             }
                         });
@@ -46998,7 +47377,10 @@
                         box2 &&
                         label1 !== label2 && // #6465, polar chart with connectEnds
                         label1.newOpacity !== 0 &&
-                        label2.newOpacity !== 0) {
+                        label2.newOpacity !== 0 &&
+                        // #15863 dataLabels are no longer hidden by translation
+                        label1.visibility !== 'hidden' &&
+                        label2.visibility !== 'hidden') {
                         if (isIntersectRect(box1, box2)) {
                             (label1.labelrank < label2.labelrank ? label1 : label2)
                                 .newOpacity = 0;