highcharts 10.0.0 → 10.2.1

package/highcharts.src.js

@@ -1,5 +1,5 @@
 /**
- * @license Highcharts JS v10.0.0 (2022-03-07)
+ * @license Highcharts JS v10.2.1 (2022-08-29)
  *
  * (c) 2009-2021 Torstein Honsi
  *
@@ -55,6 +55,7 @@
          * */
         /**
          * Shared Highcharts properties.
+         * @private
          */
         var Globals;
         (function (Globals) {
@@ -63,7 +64,7 @@
              *  Constants
              *
              * */
-            Globals.SVG_NS = 'http://www.w3.org/2000/svg', Globals.product = 'Highcharts', Globals.version = '10.0.0', Globals.win = (typeof window !== 'undefined' ?
+            Globals.SVG_NS = 'http://www.w3.org/2000/svg', Globals.product = 'Highcharts', Globals.version = '10.2.1', Globals.win = (typeof window !== 'undefined' ?
                 window :
                 {}), // eslint-disable-line node/no-unsupported-features/es-builtins
             Globals.doc = Globals.win.document, Globals.svg = (Globals.doc &&
@@ -208,11 +209,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) {
@@ -231,7 +232,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);
                     }
@@ -691,7 +692,7 @@
         function css(el, styles) {
             if (H.isMS && !H.svg) { // #2686
                 if (styles && defined(styles.opacity)) {
-                    styles.filter = "alpha(opacity=" + styles.opacity * 100 + ")";
+                    styles.filter = "alpha(opacity=".concat(styles.opacity * 100, ")");
                 }
             }
             extend(el.style, styles);
@@ -884,7 +885,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) {
@@ -1179,7 +1180,7 @@
             }
             // Otherwise, get the computed style
             var css = win.getComputedStyle(el,
-                undefined); // eslint-disable-line no-undefined
+                void 0); // eslint-disable-line no-undefined
                 if (css) {
                     style = css.getPropertyValue(prop);
                 if (pick(toInt, prop !== 'opacity')) {
@@ -1304,8 +1305,6 @@
          *
          * @param {T} [ctx]
          *        The context.
-         *
-         * @return {void}
          */
         function objectEach(obj, fn, ctx) {
             /* eslint-enable valid-jsdoc */
@@ -1414,7 +1413,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));
             };
         });
@@ -2642,6 +2641,7 @@
              * @default    {highstock} x
              * @since      3.0
              * @product    highcharts highstock gantt
+             * @deprecated
              * @validvalue ["x", "y", "xy"]
              * @apioption  chart.pinchType
              */
@@ -2679,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`.
              *
@@ -2749,6 +2760,7 @@
             /**
              * The button that appears after a selection zoom, allowing the user
              * to reset zoom.
+             * @deprecated
              */
             resetZoomButton: {
                 /**
@@ -2762,6 +2774,7 @@
                  *
                  * @type       {Highcharts.ButtonRelativeToValue}
                  * @default    plot
+                 * @deprecated
                  * @since      2.2
                  * @apioption  chart.resetZoomButton.relativeTo
                  */
@@ -2778,10 +2791,14 @@
                  *         Theming the button
                  *
                  * @type {Highcharts.SVGAttributes}
+                 * @deprecated
                  * @since 2.2
                  */
                 theme: {
-                    /** @internal */
+                    /**
+                     * @internal
+                     * @deprecated
+                     */
                     zIndex: 6
                 },
                 /**
@@ -2795,26 +2812,31 @@
                  *         Above the plot area
                  *
                  * @type  {Highcharts.AlignObject}
+                 * @deprecated
                  * @since 2.2
                  */
                 position: {
                     /**
                      * The horizontal alignment of the button.
+                     * @deprecated
                      */
                     align: 'right',
                     /**
                      * The horizontal offset of the button.
+                     * @deprecated
                      */
                     x: -10,
                     /**
                      * The vertical alignment of the button.
                      *
                      * @type       {Highcharts.VerticalAlignValue}
+                     * @deprecated
                      * @default    top
                      * @apioption  chart.resetZoomButton.position.verticalAlign
                      */
                     /**
                      * The vertical offset of the button.
+                     * @deprecated
                      */
                     y: 10
                 }
@@ -3096,6 +3118,7 @@
              *
              * @type       {string}
              * @validvalue ["x", "y", "xy"]
+             * @deprecated
              * @apioption  chart.zoomType
              */
             /**
@@ -3105,12 +3128,148 @@
              * However, `zoomBySingleTouch` will interfere with touch-dragging the
              * chart to read the tooltip. And especially when vertical zooming is
              * enabled, it will make it hard to scroll vertically on the page.
-             * @since 9.0.0
+             * @since      9.0.0
              * @sample     highcharts/chart/zoombysingletouch
              *             Zoom by single touch enabled, with buttons to toggle
              * @product    highcharts highstock gantt
+             * @deprecated
              */
             zoomBySingleTouch: false,
+            /**
+             * Chart zooming options.
+             * @since 10.2.1
+             */
+            zooming: {
+                /**
+                 * Equivalent to [type](#chart.zooming.type), but for multitouch
+                 * gestures only. By default, the `pinchType` is the same as the
+                 * `type` setting. However, pinching can be enabled separately in
+                 * some cases, for example in stock charts where a mouse drag pans the
+                 * chart, while pinching is enabled. When [tooltip.followTouchMove](
+                 * #tooltip.followTouchMove) is true, pinchType only applies to
+                 * two-finger touches.
+                 *
+                 * @type       {string}
+                 * @default    {highcharts} undefined
+                 * @default    {highstock} x
+                 * @product    highcharts highstock gantt
+                 * @since 10.2.1
+                 * @validvalue ["x", "y", "xy"]
+                 * @apioption  chart.zooming.pinchType
+                 */
+                /**
+                 * Decides in what dimensions the user can zoom by dragging the mouse.
+                 * Can be one of `x`, `y` or `xy`.
+                 *
+                 * @type       {string}
+                 * @default    {highcharts} undefined
+                 * @product    highcharts highstock gantt
+                 * @validvalue ["x", "y", "xy"]
+                 * @since 10.2.1
+                 * @apioption  chart.zooming.type
+                 */
+                /**
+                * Set a key to hold when dragging to zoom the chart. This is useful to
+                * avoid zooming while moving points. Should be set different than
+                * [chart.panKey](#chart.panKey).
+                *
+                * @type       {string}
+                * @default    {highcharts} undefined
+                * @since 10.2.1
+                * @validvalue ["alt", "ctrl", "meta", "shift"]
+                * @requires   modules/draggable-points
+                * @apioption  chart.zooming.key
+                */
+                /**
+                 * Enables zooming by a single touch, in combination with
+                 * [chart.zooming.type](#chart.zooming.type). When enabled, two-finger
+                 * pinch will still work as set up by [chart.zooming.pinchType]
+                 * (#chart.zooming.pinchType). However, `singleTouch` will interfere
+                 * with touch-dragging the chart to read the tooltip. And especially
+                 * when vertical zooming is enabled, it will make it hard to scroll
+                 * vertically on the page.
+                 * @sample     highcharts/chart/zoombysingletouch
+                 *             Zoom by single touch enabled, with buttons to toggle
+                 * @product    highcharts highstock gantt
+                 * @since 10.2.1
+                 */
+                singleTouch: false,
+                /**
+                 * The button that appears after a selection zoom, allowing the user
+                 * to reset zoom.
+                 * @since 10.2.1
+                 */
+                resetButton: {
+                    /**
+                     * What frame the button placement should be related to. Can be
+                     * either `plotBox` or `spacingBox`.
+                     *
+                     * @sample {highcharts} highcharts/chart/resetzoombutton-relativeto/
+                     *         Relative to the chart
+                     * @sample {highstock} highcharts/chart/resetzoombutton-relativeto/
+                     *         Relative to the chart
+                     *
+                     * @type       {Highcharts.ButtonRelativeToValue}
+                     * @default    plot
+                     * @since 10.2.1
+                     * @apioption  chart.zooming.resetButton.relativeTo
+                     */
+                    /**
+                     * A collection of attributes for the button. The object takes SVG
+                     * attributes like `fill`, `stroke`, `stroke-width` or `r`, the
+                     * border radius. The theme also supports `style`, a collection of
+                     * CSS properties for the text. Equivalent attributes for the hover
+                     * state are given in `theme.states.hover`.
+                     *
+                     * @sample {highcharts} highcharts/chart/resetzoombutton-theme/
+                     *         Theming the button
+                     * @sample {highstock} highcharts/chart/resetzoombutton-theme/
+                     *         Theming the button
+                     *
+                     * @type {Highcharts.SVGAttributes}
+                     * @since 10.2.1
+                     */
+                    theme: {
+                        /** @internal */
+                        zIndex: 6
+                    },
+                    /**
+                     * The position of the button.
+                     *
+                     * @sample {highcharts} highcharts/chart/resetzoombutton-position/
+                     *         Above the plot area
+                     * @sample {highstock} highcharts/chart/resetzoombutton-position/
+                     *         Above the plot area
+                     * @sample {highmaps} highcharts/chart/resetzoombutton-position/
+                     *         Above the plot area
+                     *
+                     * @type  {Highcharts.AlignObject}
+                     * @since 10.2.1
+                     */
+                    position: {
+                        /**
+                         * The horizontal alignment of the button.
+                         */
+                        align: 'right',
+                        /**
+                         * The horizontal offset of the button.
+                         */
+                        x: -10,
+                        /**
+                         * The vertical alignment of the button.
+                         *
+                         * @type       {Highcharts.VerticalAlignValue}
+                         * @since 10.2.1
+                         * @default    top
+                         * @apioption  chart.zooming.resetButton.position.verticalAlign
+                         */
+                        /**
+                         * The vertical offset of the button.
+                         */
+                        y: 10
+                    }
+                }
+            },
             /**
              * An explicit width for the chart. By default (when `null`) the width
              * is calculated from the offset width of the containing element.
@@ -3163,7 +3322,7 @@
              *
              * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
              */
-            borderColor: "#335cad" /* highlightColor80 */,
+            borderColor: "#335cad" /* Palette.highlightColor80 */,
             /**
              * The pixel width of the outer chart border.
              *
@@ -3202,7 +3361,7 @@
              *
              * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
              */
-            backgroundColor: "#ffffff" /* backgroundColor */,
+            backgroundColor: "#ffffff" /* Palette.backgroundColor */,
             /**
              * The background color or gradient for the plot area.
              *
@@ -3259,7 +3418,7 @@
              *
              * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
              */
-            plotBorderColor: "#cccccc" /* neutralColor20 */
+            plotBorderColor: "#cccccc" /* Palette.neutralColor20 */
         };
         /* *
          *
@@ -3438,7 +3597,7 @@
                         return 'rgb(' + rgba[0] + ',' + rgba[1] + ',' + rgba[2] + ')';
                     }
                     if (format === 'a') {
-                        return "" + rgba[3];
+                        return "".concat(rgba[3]);
                     }
                     return 'rgba(' + rgba.join(',') + ')';
                 }
@@ -3934,13 +4093,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
@@ -4377,17 +4535,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
@@ -4407,10 +4564,7 @@
                         lastN = n;
                     }
                 }
-                if (n) {
-                    format = this.resolveDTLFormat(dateTimeLabelFormats[n]).main;
-                }
-                return format;
+                return this.resolveDTLFormat(dateTimeLabelFormats[n]).main;
             };
             return Time;
         }());
@@ -4514,6 +4668,7 @@
          * @type {Highcharts.Options}
          */ /**
         * @optionparent
+        * @private
         */
         var defaultOptions = {
                 /**
@@ -4546,7 +4701,7 @@
                  * @sample {highcharts} highcharts/chart/colors/
                  *         Assign a global color theme
                  *
-                 * @type    {Array<Highcharts.ColorString>}
+                 * @type    {Array<(Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject)>}
                  * @default ["#7cb5ec", "#434348", "#90ed7d", "#f7a35c", "#8085e9",
                  *          "#f15c80", "#e4d354", "#2b908f", "#f45b5b", "#91e8e1"]
                  */
@@ -5367,7 +5522,7 @@
                     /**
                      * @ignore-option
                      */
-                    color: "#333333" /* neutralColor80 */
+                    color: "#333333" /* Palette.neutralColor80 */
                 }
             },
             /**
@@ -5647,7 +5802,7 @@
                  *
                  * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
                  */
-                borderColor: "#999999" /* neutralColor40 */,
+                borderColor: "#999999" /* Palette.neutralColor40 */,
                 /**
                  * The border corner radius of the legend.
                  *
@@ -5741,7 +5896,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. .
@@ -5757,7 +5912,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.
@@ -5833,7 +5988,7 @@
                     /**
                      * @ignore
                      */
-                    color: "#333333" /* neutralColor80 */,
+                    color: "#333333" /* Palette.neutralColor80 */,
                     /**
                      * @ignore
                      */
@@ -5871,7 +6026,7 @@
                     /**
                      * @ignore
                      */
-                    color: "#000000" /* neutralColor100 */
+                    color: "#000000" /* Palette.neutralColor100 */
                 },
                 /**
                  * CSS styles for each legend item when the corresponding series or
@@ -5892,7 +6047,7 @@
                     /**
                      * @ignore
                      */
-                    color: "#cccccc" /* neutralColor20 */
+                    color: "#cccccc" /* Palette.neutralColor20 */
                 },
                 /**
                  * Whether to apply a drop shadow to the legend. A `backgroundColor`
@@ -6196,7 +6351,7 @@
                     /**
                      * @ignore
                      */
-                    backgroundColor: "#ffffff" /* backgroundColor */,
+                    backgroundColor: "#ffffff" /* Palette.backgroundColor */,
                     /**
                      * @ignore
                      */
@@ -6402,18 +6557,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 }`.
@@ -6789,7 +6946,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(),
                 /**
@@ -6852,7 +7009,7 @@
                  */
                 style: {
                     /** @internal */
-                    color: "#333333" /* neutralColor80 */,
+                    color: "#333333" /* Palette.neutralColor80 */,
                     /** @internal */
                     cursor: 'default',
                     /** @internal */
@@ -6967,7 +7124,7 @@
                     /** @internal */
                     cursor: 'pointer',
                     /** @internal */
-                    color: "#999999" /* neutralColor40 */,
+                    color: "#999999" /* Palette.neutralColor40 */,
                     /** @internal */
                     fontSize: '9px'
                 },
@@ -7441,7 +7598,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) {
@@ -7954,7 +8111,9 @@
                         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];
                     }
                 });
@@ -7965,10 +8124,9 @@
                     .split(';')
                     .reduce(function (styles, line) {
                     var pair = line.split(':').map(function (s) { return s.trim(); }),
-                        key = pair[0].replace(/-([a-z])/g,
-                        function (g) { return g[1].toUpperCase(); });
-                    if (pair[1]) {
-                        styles[key] = pair[1];
+                        key = pair.shift();
+                    if (key && pair.length) {
+                        styles[key.replace(/-([a-z])/g, function (g) { return g[1].toUpperCase(); })] = pair.join(':'); // #17146
                     }
                     return styles;
                 }, {});
@@ -8069,8 +8227,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
@@ -8102,7 +8261,8 @@
                     .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="');
+                    // Make all quotation marks parse correctly to DOM (#17627)
+                    .replace(/ style=(["'])/g, ' data-style=$1');
                 var doc;
                 if (hasValidDOMParser) {
                     doc = new DOMParser().parseFromString(trustedTypesPolicy ?
@@ -8227,6 +8387,7 @@
                 'target',
                 'tabindex',
                 'text-align',
+                'text-anchor',
                 'textAnchor',
                 'textLength',
                 'title',
@@ -8327,6 +8488,7 @@
                 'svg',
                 'table',
                 'text',
+                'textPath',
                 'thead',
                 'tbody',
                 'tspan',
@@ -8825,7 +8987,7 @@
 
         return RendererUtilities;
     });
-    _registerModule(_modules, 'Core/Renderer/SVG/SVGElement.js', [_modules['Core/Animation/AnimationUtilities.js'], _modules['Core/Renderer/HTML/AST.js'], _modules['Core/Color/Color.js'], _modules['Core/Globals.js'], _modules['Core/Utilities.js']], function (A, AST, Color, H, U) {
+    _registerModule(_modules, 'Core/Renderer/SVG/SVGElement.js', [_modules['Core/Animation/AnimationUtilities.js'], _modules['Core/Color/Color.js'], _modules['Core/Globals.js'], _modules['Core/Utilities.js']], function (A, Color, H, U) {
         /* *
          *
          *  (c) 2010-2021 Torstein Honsi
@@ -8860,6 +9022,7 @@
             objectEach = U.objectEach,
             pick = U.pick,
             pInt = U.pInt,
+            removeEvent = U.removeEvent,
             syncTimeout = U.syncTimeout,
             uniqueKey = U.uniqueKey;
         /* *
@@ -9277,27 +9440,32 @@
                     });
                     // For each of the tspans and text nodes, create a copy in the
                     // outline.
-                    [].forEach.call(elem.childNodes, function (childNode) {
+                    var parentElem = elem.querySelector('textPath') || elem;
+                    [].forEach.call(parentElem.childNodes, function (childNode) {
                         var clone = childNode.cloneNode(true);
                         if (clone.removeAttribute) {
-                            ['fill', 'stroke', 'stroke-width', 'stroke'].forEach(function (prop) { return clone.removeAttribute(prop); });
+                            ['fill', 'stroke', 'stroke-width', 'stroke'].forEach(function (prop) { return clone
+                                .removeAttribute(prop); });
                         }
                         outline_1.appendChild(clone);
                     });
+                    // Collect the sum of dy from all children, included nested ones
+                    var totalHeight_1 = 0;
+                    [].forEach.call(parentElem.querySelectorAll('text tspan'), function (element) {
+                        totalHeight_1 += Number(element.getAttribute('dy'));
+                    });
                     // Insert an absolutely positioned break before the original text
                     // to keep it in place
-                    var br_1 = doc.createElementNS(SVG_NS, 'tspan');
-                    br_1.textContent = '\u200B';
-                    // Copy x and y if not null
-                    ['x', 'y'].forEach(function (key) {
-                        var value = elem.getAttribute(key);
-                        if (value) {
-                            br_1.setAttribute(key, value);
-                        }
+                    var br = doc.createElementNS(SVG_NS, 'tspan');
+                    br.textContent = '\u200B';
+                    // Reset the position for the following text
+                    attr(br, {
+                        x: Number(elem.getAttribute('x')),
+                        dy: -totalHeight_1
                     });
                     // Insert the outline
-                    outline_1.appendChild(br_1);
-                    elem.insertBefore(outline_1, elem.firstChild);
+                    outline_1.appendChild(br);
+                    parentElem.insertBefore(outline_1, parentElem.firstChild);
                 }
             };
             /**
@@ -9787,42 +9955,6 @@
                 }, this);
                 this.shadows = void 0;
             };
-            /**
-             * @private
-             */
-            SVGElement.prototype.destroyTextPath = function (elem, path) {
-                var textElement = elem.getElementsByTagName('text')[0];
-                var childNodes;
-                if (textElement) {
-                    // Remove textPath attributes
-                    textElement.removeAttribute('dx');
-                    textElement.removeAttribute('dy');
-                    // Remove ID's:
-                    path.element.setAttribute('id', '');
-                    // Check if textElement includes textPath,
-                    if (this.textPathWrapper &&
-                        textElement.getElementsByTagName('textPath').length) {
-                        // Move nodes to <text>
-                        childNodes = this.textPathWrapper.element.childNodes;
-                        // Now move all <tspan>'s and text nodes to the <textPath> node
-                        while (childNodes.length) {
-                            textElement.appendChild(childNodes[0]);
-                        }
-                        // Remove <textPath> from the DOM
-                        textElement.removeChild(this.textPathWrapper.element);
-                    }
-                }
-                else if (elem.getAttribute('dx') || elem.getAttribute('dy')) {
-                    // Remove textPath attributes from elem
-                    // to get correct text-outline position
-                    elem.removeAttribute('dx');
-                    elem.removeAttribute('dy');
-                }
-                if (this.textPathWrapper) {
-                    // Set textPathWrapper to undefined and destroy it
-                    this.textPathWrapper = this.textPathWrapper.destroy();
-                }
-            };
             /**
              * @private
              * @function Highcharts.SVGElement#dSettter
@@ -9873,7 +10005,7 @@
                     duration: pick(duration, 150),
                     complete: function () {
                         // #3088, assuming we're only using this for tooltips
-                        elemWrapper.attr({ y: -9999 }).hide();
+                        elemWrapper.hide();
                     }
                 });
             };
@@ -9918,8 +10050,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,
@@ -9929,7 +10062,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,
@@ -9950,6 +10083,7 @@
                         rotation,
                         fontSize,
                         wrapper.textWidth,
+                        alignValue,
                         styles && styles.textOverflow,
                         styles && styles.fontWeight // #12163
                     ].join(',');
@@ -9979,9 +10113,12 @@
                                 // SVG: use extend because IE9 is not allowed to change
                                 // width and height in case of rotation (below)
                                 extend({}, element.getBBox()) : {
-                                // Legacy IE in export mode
+                                // HTML elements with `exporting.allowHTML` and
+                                // legacy IE in export mode
                                 width: element.offsetWidth,
-                                height: element.offsetHeight
+                                height: element.offsetHeight,
+                                x: 0,
+                                y: 0
                             };
                             // #3842
                             if (isFunction(toggleTextShadowShim)) {
@@ -9995,7 +10132,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
                     }
@@ -10019,16 +10156,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
@@ -10087,21 +10248,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
@@ -10215,7 +10366,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());
@@ -10272,26 +10423,27 @@
                 return this;
             };
             /**
-             * @private
+             * Set a text path for a `text` or `label` element, allowing the text to
+             * flow along a path.
+             *
+             * In order to unset the path for an existing element, call `setTextPath`
+             * with `{ enabled: false }` as the second argument.
+             *
+             * @sample highcharts/members/renderer-textpath/ Text path demonstrated
+             *
              * @function Highcharts.SVGElement#setTextPath
-             * @param {Highcharts.SVGElement} path
-             * Path to follow.
+             *
+             * @param {Highcharts.SVGElement|undefined} path
+             *        Path to follow. If undefined, it allows changing options for the
+             *        existing path.
+             *
              * @param {Highcharts.DataLabelsTextPathOptionsObject} textPathOptions
-             * Options.
-             * @return {Highcharts.SVGElement}
-             * Returns the SVGElement for chaining.
+             *        Options.
+             *
+             * @return {Highcharts.SVGElement} Returns the SVGElement for chaining.
              */
             SVGElement.prototype.setTextPath = function (path, textPathOptions) {
-                var elem = this.element,
-                    textNode = this.text ? this.text.element : elem,
-                    attribsMap = {
-                        textAnchor: 'text-anchor'
-                    };
-                var adder = false,
-                    textPathElement,
-                    textPathId,
-                    textPathWrapper = this.textPathWrapper,
-                    firstTime = !textPathWrapper;
+                var _this = this;
                 // Defaults
                 textPathOptions = merge(true, {
                     enabled: true,
@@ -10301,109 +10453,70 @@
                         textAnchor: 'middle'
                     }
                 }, textPathOptions);
-                var attrs = AST.filterUserAttributes(textPathOptions.attributes);
-                if (path && textPathOptions && textPathOptions.enabled) {
-                    // In case of fixed width for a text, string is rebuilt
-                    // (e.g. ellipsis is applied), so we need to rebuild textPath too
-                    if (textPathWrapper &&
-                        textPathWrapper.element.parentNode === null) {
-                        // When buildText functionality was triggered again
-                        // and deletes textPathWrapper parentNode
-                        firstTime = true;
-                        textPathWrapper = textPathWrapper.destroy();
-                    }
-                    else if (textPathWrapper) {
-                        // Case after drillup when spans were added into
-                        // the DOM outside the textPathWrapper parentGroup
-                        this.removeTextOutline.call(textPathWrapper.parentGroup);
-                    }
-                    // label() has padding, text() doesn't
-                    if (this.options && this.options.padding) {
-                        attrs.dx = -this.options.padding;
-                    }
-                    if (!textPathWrapper) {
-                        // Create <textPath>, defer the DOM adder
-                        this.textPathWrapper = textPathWrapper =
-                            this.renderer.createElement('textPath');
-                        adder = true;
-                    }
-                    textPathElement = textPathWrapper.element;
-                    // Set ID for the path
-                    textPathId = path.element.getAttribute('id');
-                    if (!textPathId) {
-                        path.element.setAttribute('id', textPathId = uniqueKey());
-                    }
-                    // Change DOM structure, by placing <textPath> tag in <text>
-                    if (firstTime) {
-                        // Adjust the position
-                        textNode.setAttribute('y', 0); // Firefox
-                        if (isNumber(attrs.dx)) {
-                            textNode.setAttribute('x', -attrs.dx);
-                        }
-                        // Move all <tspan>'s and text nodes to the <textPath> node. Do
-                        // not move other elements like <title> or <path>
-                        var childNodes = [].slice.call(textNode.childNodes);
-                        for (var i = 0; i < childNodes.length; i++) {
-                            var childNode = childNodes[i];
-                            if (childNode.nodeType === win.Node.TEXT_NODE ||
-                                childNode.nodeName === 'tspan') {
-                                textPathElement.appendChild(childNode);
+                var url = this.renderer.url,
+                    textWrapper = this.text || this,
+                    textPath = textWrapper.textPath,
+                    attributes = textPathOptions.attributes,
+                    enabled = textPathOptions.enabled;
+                path = path || (textPath && textPath.path);
+                // Remove previously added event
+                if (textPath) {
+                    textPath.undo();
+                }
+                if (path && enabled) {
+                    var undo = addEvent(textWrapper, 'afterModifyTree',
+                        function (e) {
+                            if (path && enabled) {
+                                // Set ID for the path
+                                var textPathId = path.attr('id');
+                            if (!textPathId) {
+                                path.attr('id', textPathId = uniqueKey());
+                            }
+                            // Set attributes for the <text>
+                            var textAttribs = {
+                                    // dx/dy options must by set on <text> (parent), the
+                                    // rest should be set on <textPath>
+                                    x: 0,
+                                    y: 0
+                                };
+                            if (defined(attributes.dx)) {
+                                textAttribs.dx = attributes.dx;
+                                delete attributes.dx;
+                            }
+                            if (defined(attributes.dy)) {
+                                textAttribs.dy = attributes.dy;
+                                delete attributes.dy;
                             }
+                            textWrapper.attr(textAttribs);
+                            // Handle label properties
+                            _this.attr({ transform: '' });
+                            if (_this.box) {
+                                _this.box = _this.box.destroy();
+                            }
+                            // Wrap the nodes in a textPath
+                            var children = e.nodes.slice(0);
+                            e.nodes.length = 0;
+                            e.nodes[0] = {
+                                tagName: 'textPath',
+                                attributes: extend(attributes, {
+                                    'text-anchor': attributes.textAnchor,
+                                    href: "" + url + "#".concat(textPathId)
+                                }),
+                                children: children
+                            };
                         }
-                    }
-                    // Add <textPath> to the DOM
-                    if (adder && textPathWrapper) {
-                        textPathWrapper.add({ element: textNode });
-                    }
-                    // Set basic options:
-                    // Use `setAttributeNS` because Safari needs this..
-                    textPathElement.setAttributeNS('http://www.w3.org/1999/xlink', 'href', this.renderer.url + '#' + textPathId);
-                    // Presentation attributes:
-                    // dx/dy options must by set on <text> (parent),
-                    // the rest should be set on <textPath>
-                    if (defined(attrs.dy)) {
-                        textPathElement.parentNode
-                            .setAttribute('dy', attrs.dy);
-                        delete attrs.dy;
-                    }
-                    if (defined(attrs.dx)) {
-                        textPathElement.parentNode
-                            .setAttribute('dx', attrs.dx);
-                        delete attrs.dx;
-                    }
-                    // Additional attributes
-                    objectEach(attrs, function (val, key) {
-                        textPathElement.setAttribute(attribsMap[key] || key, val);
                     });
-                    // Remove translation, text that follows path does not need that
-                    elem.removeAttribute('transform');
-                    // Remove shadows and text outlines
-                    this.removeTextOutline.call(textPathWrapper);
-                    // Remove background and border for label(), see #10545
-                    // Alternatively, we can disable setting background rects in
-                    // series.drawDataLabels()
-                    if (this.text && !this.renderer.styledMode) {
-                        this.attr({
-                            fill: 'none',
-                            'stroke-width': 0
-                        });
-                    }
-                    // Disable some functions
-                    this.updateTransform = noop;
-                    this.applyTextOutline = noop;
-                }
-                else if (textPathWrapper) {
-                    // Reset to prototype
-                    delete this.updateTransform;
-                    delete this.applyTextOutline;
-                    // Restore DOM structure:
-                    this.destroyTextPath(elem, path);
-                    // Bring attributes back
-                    this.updateTransform();
-                    // Set textOutline back for text()
-                    if (this.options && this.options.rotation) {
-                        this.applyTextOutline(this.options.style.textOutline);
-                    }
+                    // Set the reference
+                    textWrapper.textPath = { path: path, undo: undo };
+                }
+                else {
+                    textWrapper.attr({ dx: 0, dy: 0 });
+                    delete textWrapper.textPath;
+                }
+                if (this.added) {
+                    // Rebuild text after added
+                    textWrapper.textCache = '';
+                    this.renderer.buildText(textWrapper);
                 }
                 return this;
             };
@@ -10440,7 +10553,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,
@@ -10481,14 +10594,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,
@@ -10516,7 +10629,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.
@@ -10525,6 +10638,7 @@
              *         Returns the SVGElement for chaining.
              */
             SVGElement.prototype.show = function (inherit) {
+                if (inherit === void 0) { inherit = true; }
                 return this.attr({ visibility: inherit ? 'inherit' : 'visible' });
             };
             /**
@@ -10784,7 +10898,7 @@
                 if (defined(scaleX) || defined(scaleY)) {
                     transform.push('scale(' + pick(scaleX, 1) + ' ' + pick(scaleY, 1) + ')');
                 }
-                if (transform.length) {
+                if (transform.length && !(wrapper.text || wrapper).textPath) {
                     element.setAttribute('transform', transform.join(' '));
                 }
             };
@@ -11035,6 +11149,12 @@
         * @name Highcharts.SVGAttributes#d
         * @type {string|Highcharts.SVGPathArray|undefined}
         */ /**
+        * @name Highcharts.SVGAttributes#dx
+        * @type {number|undefined}
+        */ /**
+        * @name Highcharts.SVGAttributes#dy
+        * @type {number|undefined}
+        */ /**
         * @name Highcharts.SVGAttributes#fill
         * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject|undefined}
         */ /**
@@ -11447,7 +11567,8 @@
              * the new bounding box and reflect it in the border box.
              */
             SVGLabel.prototype.updateBoxSize = function () {
-                var style = this.text.element.style,
+                var text = this.text,
+                    style = text.element.style,
                     attribs = {},
                     padding = this.padding, 
                     // #12165 error when width is null (auto)
@@ -11455,14 +11576,14 @@
                     // #3295 && 3514 box failure when string equals 0
                     bBox = this.bBox = (((!isNumber(this.widthSetting) ||
                         !isNumber(this.heightSetting) ||
-                        this.textAlign) && defined(this.text.textStr)) ?
-                        this.text.getBBox() :
+                        this.textAlign) && defined(text.textStr)) ?
+                        text.getBBox() :
                         SVGLabel.emptyBBox);
                 var crispAdjust;
                 this.width = this.getPaddedWidth();
                 this.height = (this.heightSetting || bBox.height || 0) + 2 * padding;
                 var metrics = this.renderer.fontMetrics(style && style.fontSize,
-                    this.text);
+                    text);
                 // Update the label-scoped y offset. Math.min because of inline
                 // style (#9400)
                 this.baselineOffset = padding + Math.min(
@@ -11475,7 +11596,7 @@
                 if (this.heightSetting) {
                     this.baselineOffset += (this.heightSetting - metrics.h) / 2;
                 }
-                if (this.needsBox) {
+                if (this.needsBox && !text.textPath) {
                     // Create the border box if it is not already present
                     if (!this.box) {
                         // Symbol definition exists (#5324)
@@ -11505,32 +11626,34 @@
              */
             SVGLabel.prototype.updateTextPadding = function () {
                 var text = this.text;
-                this.updateBoxSize();
-                // Determine y based on the baseline
-                var textY = this.baseline ? 0 : this.baselineOffset;
-                var textX = pick(this.paddingLeft,
-                    this.padding);
-                // compensate for alignment
-                if (defined(this.widthSetting) &&
-                    this.bBox &&
-                    (this.textAlign === 'center' || this.textAlign === 'right')) {
-                    textX += { center: 0.5, right: 1 }[this.textAlign] * (this.widthSetting - this.bBox.width);
-                }
-                // update if anything changed
-                if (textX !== text.x || textY !== text.y) {
-                    text.attr('x', textX);
-                    // #8159 - prevent misplaced data labels in treemap
-                    // (useHTML: true)
-                    if (text.hasBoxWidthChanged) {
-                        this.bBox = text.getBBox(true);
-                    }
-                    if (typeof textY !== 'undefined') {
-                        text.attr('y', textY);
-                    }
-                }
-                // record current values
-                text.x = textX;
-                text.y = textY;
+                if (!text.textPath) {
+                    this.updateBoxSize();
+                    // Determine y based on the baseline
+                    var textY = this.baseline ? 0 : this.baselineOffset;
+                    var textX = pick(this.paddingLeft,
+                        this.padding);
+                    // compensate for alignment
+                    if (defined(this.widthSetting) &&
+                        this.bBox &&
+                        (this.textAlign === 'center' || this.textAlign === 'right')) {
+                        textX += { center: 0.5, right: 1 }[this.textAlign] * (this.widthSetting - this.bBox.width);
+                    }
+                    // update if anything changed
+                    if (textX !== text.x || textY !== text.y) {
+                        text.attr('x', textX);
+                        // #8159 - prevent misplaced data labels in treemap
+                        // (useHTML: true)
+                        if (text.hasBoxWidthChanged) {
+                            this.bBox = text.getBBox(true);
+                        }
+                        if (typeof textY !== 'undefined') {
+                            text.attr('y', textY);
+                        }
+                    }
+                    // record current values
+                    text.x = textX;
+                    text.y = textY;
+                }
             };
             SVGLabel.prototype.widthSetter = function (value) {
                 // width:auto => null
@@ -11832,6 +11955,7 @@
             win = H.win;
         var attr = U.attr,
             extend = U.extend,
+            fireEvent = U.fireEvent,
             isString = U.isString,
             objectEach = U.objectEach,
             pick = U.pick;
@@ -11892,6 +12016,7 @@
                 if (!hasMarkup &&
                     !this.ellipsis &&
                     !this.width &&
+                    !wrapper.textPath &&
                     (textStr.indexOf(' ') === -1 ||
                         (this.noWrap && !regexMatchBreaks.test(textStr)))) {
                     textNode.appendChild(doc.createTextNode(this.unescapeEntities(textStr)));
@@ -11908,7 +12033,7 @@
                     // Step 2. Do as many as we can of the modifications to the tree
                     // structure before it is added to the DOM
                     this.modifyTree(ast.nodes);
-                    ast.addToDOM(wrapper.element);
+                    ast.addToDOM(textNode);
                     // Step 3. Some modifications can't be done until the structure is
                     // in the DOM, because we need to read computed metrics.
                     this.modifyDOM();
@@ -12166,6 +12291,7 @@
                     }
                 };
                 nodes.forEach(modifyChild);
+                fireEvent(this.svgElement, 'afterModifyTree', { nodes: nodes });
             };
             /*
              * Truncate the text node contents to a given length. Used when the css
@@ -12179,7 +12305,7 @@
                     rotation = svgElement.rotation;
                 // Cache the lengths to avoid checking the same twice
                 var lengths = [];
-                // Word wrap can not be truncated to shorter than one word, ellipsis
+                // Word wrap cannot be truncated to shorter than one word, ellipsis
                 // text can be completely blank.
                 var minIndex = words ? 1 : 0;
                 var maxIndex = (text || words || '').length;
@@ -12497,7 +12623,7 @@
                 this.url = this.getReferenceURL();
                 // Add description
                 var desc = this.createElement('desc').add();
-                desc.element.appendChild(doc.createTextNode('Created with Highcharts 10.0.0'));
+                desc.element.appendChild(doc.createTextNode('Created with Highcharts 10.2.1'));
                 renderer.defs = this.createElement('defs').add();
                 renderer.allowHTML = allowHTML;
                 renderer.forExport = forExport;
@@ -12610,7 +12736,7 @@
                                                 id: 'hitme',
                                                 width: 8,
                                                 height: 8,
-                                                'clip-path': "url(#" + id + ")",
+                                                'clip-path': "url(#".concat(id, ")"),
                                                 fill: 'rgba(0,0,0,0.001)'
                                             }
                                         }]
@@ -12763,27 +12889,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.
@@ -12808,7 +12938,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]
@@ -12818,12 +12948,13 @@
              * The shape type.
              *
              * @param {boolean} [useHTML=false]
-             * Wether to use HTML to render the label.
+             * Whether to use HTML to render the label.
              *
              * @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,
@@ -12832,56 +12963,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) : {};
+                    styledMode = this.styledMode,
+                    states = theme.states || {};
+                var curState = 0;
+                theme = merge(theme);
+                delete theme.states;
                 var normalStyle = merge({
-                        color: "#333333" /* neutralColor80 */,
+                        color: "#333333" /* Palette.neutralColor80 */,
                         cursor: 'pointer',
                         fontWeight: 'normal'
                     },
-                    normalState.style);
-                delete normalState.style;
-                // Remove stylable attributes
-                normalState = AST.filterUserAttributes(normalState);
+                    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. The string type is a mistake, it is just for
                 // compliance with SVGAttribute and is not used in button theme.
                 var hoverStyle,
-                    pressedStyle,
+                    selectStyle,
                     disabledStyle;
                 if (!styledMode) {
                     // Normal state - prepare the attributes
                     normalState = merge({
-                        fill: "#f7f7f7" /* neutralColor3 */,
-                        stroke: "#cccccc" /* neutralColor20 */,
+                        fill: "#f7f7f7" /* Palette.neutralColor3 */,
+                        stroke: "#cccccc" /* Palette.neutralColor20 */,
                         'stroke-width': 1
                     }, normalState);
                     // 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;
                 }
@@ -12912,13 +13044,13 @@
                             .attr([
                             normalState,
                             hoverState,
-                            pressedState,
+                            selectState,
                             disabledState
                         ][state || 0]);
                         var css_1 = [
                                 normalStyle,
                                 hoverStyle,
-                                pressedStyle,
+                                selectStyle,
                                 disabledStyle
                             ][state || 0];
                         if (isObject(css_1)) {
@@ -13625,7 +13757,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');
                 }
@@ -13943,7 +14075,7 @@
              *        coordinates it should be pinned to.
              *
              * @param {boolean} [useHTML=false]
-             *        Wether to use HTML to render the label.
+             *        Whether to use HTML to render the label.
              *
              * @param {boolean} [baseline=false]
              *        Whether to position the label relative to the text baseline,
@@ -15769,7 +15901,7 @@
                      */
                     style: {
                         /** @internal */
-                        color: "#666666" /* neutralColor60 */,
+                        color: "#666666" /* Palette.neutralColor60 */,
                         /** @internal */
                         cursor: 'default',
                         /** @internal */
@@ -16604,7 +16736,7 @@
                      */
                     style: {
                         /** @internal */
-                        color: "#666666" /* neutralColor60 */
+                        color: "#666666" /* Palette.neutralColor60 */
                     }
                 },
                 /**
@@ -16721,7 +16853,7 @@
                  * @type    {Highcharts.ColorType}
                  * @default #f2f2f2
                  */
-                minorGridLineColor: "#f2f2f2" /* neutralColor5 */,
+                minorGridLineColor: "#f2f2f2" /* Palette.neutralColor5 */,
                 /**
                  * Width of the minor, secondary grid lines.
                  *
@@ -16747,7 +16879,7 @@
                  * @type    {Highcharts.ColorType}
                  * @default #999999
                  */
-                minorTickColor: "#999999" /* neutralColor40 */,
+                minorTickColor: "#999999" /* Palette.neutralColor40 */,
                 /**
                  * The color of the line marking the axis itself.
                  *
@@ -16768,7 +16900,7 @@
                  * @type    {Highcharts.ColorType}
                  * @default #ccd6eb
                  */
-                lineColor: "#ccd6eb" /* highlightColor20 */,
+                lineColor: "#ccd6eb" /* Palette.highlightColor20 */,
                 /**
                  * The width of the line marking the axis itself.
                  *
@@ -16805,7 +16937,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
@@ -16863,7 +16995,7 @@
                  * @type    {Highcharts.ColorType}
                  * @default #ccd6eb
                  */
-                tickColor: "#ccd6eb" /* highlightColor20 */
+                tickColor: "#ccd6eb" /* Palette.highlightColor20 */
                 // tickWidth: 1
             };
             /**
@@ -17636,7 +17768,7 @@
                     formatter: function () {
                         var numberFormatter = this.axis.chart.numberFormatter;
                         /* eslint-enable valid-jsdoc */
-                        return numberFormatter(this.total, -1);
+                        return numberFormatter(this.total || 0, -1);
                     },
                     /**
                      * CSS styles for the label.
@@ -17653,7 +17785,7 @@
                      */
                     style: {
                         /** @internal */
-                        color: "#000000" /* neutralColor100 */,
+                        color: "#000000" /* Palette.neutralColor100 */,
                         /** @internal */
                         fontSize: '11px',
                         /** @internal */
@@ -17943,7 +18075,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
@@ -18111,8 +18244,8 @@
                     pos = {
                         x: horiz ?
                             correctFloat(axis.translate(tickPos + tickmarkOffset,
-                    null,
-                    null,
+                    void 0,
+                    void 0,
                     old) +
                                 axis.transB) :
                             (axis.left +
@@ -18130,8 +18263,8 @@
                                 (axis.opposite ? axis.height : 0)) :
                             correctFloat(cHeight -
                                 axis.translate(tickPos + tickmarkOffset,
-                    null,
-                    null,
+                    void 0,
+                    void 0,
                     old) -
                                 axis.transB)
                     };
@@ -18159,20 +18292,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 +
@@ -18563,11 +18699,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;
                     }
                 }
@@ -18667,7 +18803,6 @@
             error = U.error,
             extend = U.extend,
             fireEvent = U.fireEvent,
-            getMagnitude = U.getMagnitude,
             isArray = U.isArray,
             isNumber = U.isNumber,
             isString = U.isString,
@@ -18679,6 +18814,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
@@ -19044,7 +19189,7 @@
                     multi,
                     ret;
                 if (categories) {
-                    ret = "" + this.value;
+                    ret = "".concat(this.value);
                 }
                 else if (dateTimeLabelFormat) { // datetime axis
                     ret = time.dateFormat(dateTimeLabelFormat, value);
@@ -19120,7 +19265,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;
@@ -19189,8 +19333,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;
@@ -19228,14 +19375,10 @@
                         val = axis.val2lin(val);
                     }
                     var value = sign * (val - localMin) * localA;
-                    returnValue = isNumber(localMin) ?
-                        ((!axis.isRadial ? correctFloat(value) : value) +
-                            cvsOffset +
-                            (sign * minPixelPadding) +
-                            (isNumber(pointPlacement) ?
-                                localA * pointPlacement :
-                                0)) :
-                        void 0;
+                    returnValue = (!axis.isRadial ? correctFloat(value) : value) +
+                        cvsOffset +
+                        (sign * minPixelPadding) +
+                        (isNumber(pointPlacement) ? localA * pointPlacement : 0);
                 }
                 return returnValue;
             };
@@ -19255,7 +19398,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);
             };
             /**
@@ -19275,7 +19418,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
@@ -19334,7 +19477,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);
@@ -19649,6 +19792,9 @@
                     // Backwards mapping is much faster than array searching (#7725)
                     this.names.keys[point.name] = x;
                 }
+                else if (point.x) {
+                    x = point.x; // #17438
+                }
                 return x;
             };
             /**
@@ -20031,15 +20177,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) {
@@ -20124,7 +20264,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) {
@@ -20448,11 +20602,6 @@
                             }
                         }
                         adjustExtremes();
-                        // We have too many ticks, run second pass to try to reduce ticks
-                    }
-                    else if (currentTickAmount > tickAmount) {
-                        axis.tickInterval *= 2;
-                        axis.setTickPositions();
                     }
                     // The finalTickAmt property is set in getTickAmount
                     if (defined(finalTickAmt)) {
@@ -20719,7 +20868,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.
              */
@@ -21215,12 +21364,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);
@@ -21408,18 +21555,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,
@@ -21643,14 +21790,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) {
@@ -21846,10 +21987,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'
@@ -22454,10 +22595,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;
             }());
@@ -22658,7 +22802,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;
@@ -23092,7 +23236,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 =
@@ -23100,7 +23244,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;
@@ -23158,7 +23302,7 @@
                 }
                 else if (svgElem) {
                     if (path) {
-                        svgElem.show(true);
+                        svgElem.show();
                         svgElem.animate({ d: path });
                     }
                     else if (svgElem.d) {
@@ -24300,11 +24444,22 @@
                 return this.label;
             };
             /**
-             * Place the tooltip in a chart without spilling over
-             * and not covering the point it self.
+             * Place the tooltip in a chart without spilling over and not covering the
+             * point itself.
              *
-             * @private
              * @function Highcharts.Tooltip#getPosition
+             *
+             * @param {number} boxWidth
+             *        Width of the tooltip box.
+             *
+             * @param {number} boxHeight
+             *        Height of the tooltip box.
+             *
+             * @param {Highcharts.Point} point
+             *        Tooltip related point.
+             *
+             * @return {Highcharts.PositionObject}
+             *         Recommended position of the tooltip.
              */
             Tooltip.prototype.getPosition = function (boxWidth, boxHeight, point) {
                 var chart = this.chart,
@@ -24749,7 +24904,7 @@
                                     stroke: (options.borderColor ||
                                         point.color ||
                                         currentSeries.color ||
-                                        "#666666" /* neutralColor60 */)
+                                        "#666666" /* Palette.neutralColor60 */)
                                 });
                             }
                             tooltip.updatePosition({
@@ -24949,7 +25104,7 @@
                             stroke: (options.borderColor ||
                                 point.color ||
                                 series.color ||
-                                "#333333" /* neutralColor80 */)
+                                "#333333" /* Palette.neutralColor80 */)
                         });
                     }
                     return tt;
@@ -25287,7 +25442,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;
@@ -25445,7 +25600,7 @@
                      * point. For other axes it holds the X value.
                      *
                      * @name Highcharts.Point#category
-                     * @type {string}
+                     * @type {number|string}
                      */
                     this.category = void 0;
                 /**
@@ -25515,6 +25670,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.
@@ -25800,7 +25964,7 @@
                     props.push('graphic', 'upperGraphic', 'shadowGroup');
                 }
                 if (kinds.dataLabel) {
-                    props.push('dataLabel', 'dataLabelUpper', 'connector');
+                    props.push('dataLabel', 'dataLabelPath', 'dataLabelUpper', 'connector');
                 }
                 i = props.length;
                 while (i--) {
@@ -26973,7 +27137,7 @@
                             if (!chart.styledMode) {
                                 selectionMarker.attr({
                                     fill: (chartOptions.selectionMarkerFill ||
-                                        color("#335cad" /* highlightColor80 */)
+                                        color("#335cad" /* Palette.highlightColor80 */)
                                             .setOpacity(0.25).get())
                                 });
                             }
@@ -27316,10 +27480,8 @@
                     // Only search on hovered series if it has stickyTracking false
                     [hoverSeries] :
                     // Filter what series to look in.
-                    series.filter(function (s) {
-                        return eventArgs.filter ? eventArgs.filter(s) : filter(s) &&
-                            s.stickyTracking;
-                    });
+                    series.filter(function (s) { return s.stickyTracking &&
+                        (eventArgs.filter || filter)(s); });
                 // Use existing hovered point or find the one closest to coordinates.
                 var hoverPoint = useExisting || !e ?
                         existingHoverPoint :
@@ -27347,8 +27509,8 @@
                                 * Boost returns a minimal point. Convert it to a usable
                                 * point for tooltip and states.
                                 */
-                                if (s.chart.isBoosting) {
-                                    point = s.getPoint(point);
+                                if (s.boosted && s.boost) {
+                                    point = s.boost.getPoint(point);
                                 }
                                 hoverPoints.push(point);
                             }
@@ -28252,7 +28414,7 @@
              * @function Highcharts.Pointer#touchSelect
              */
             Pointer.prototype.touchSelect = function (e) {
-                return Boolean(this.chart.options.chart.zoomBySingleTouch &&
+                return Boolean(this.chart.options.chart.zooming.singleTouch &&
                     e.touches &&
                     e.touches.length === 1);
             };
@@ -28266,12 +28428,12 @@
                 var chart = this.chart,
                     options = chart.options.chart,
                     inverted = chart.inverted;
-                var zoomType = options.zoomType || '',
+                var zoomType = options.zooming.type || '',
                     zoomX,
                     zoomY;
                 // Look for the pinchType option
                 if (/touch/.test(e.type)) {
-                    zoomType = pick(options.pinchType, zoomType);
+                    zoomType = pick(options.zooming.pinchType, zoomType);
                 }
                 this.zoomX = zoomX = /x/.test(zoomType);
                 this.zoomY = zoomY = /y/.test(zoomType);
@@ -29046,7 +29208,7 @@
                         item.series :
                         item,
                     seriesOptions = series.options,
-                    showCheckbox = legend.createCheckboxForItem &&
+                    showCheckbox = (legend.createCheckboxForItem) &&
                         seriesOptions &&
                         seriesOptions.showCheckbox,
                     useHTML = options.useHTML,
@@ -29317,7 +29479,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;
                     }
@@ -29445,7 +29607,7 @@
                     }, box.strokeWidth()));
                 }
                 // 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;
@@ -29684,7 +29846,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({
@@ -30005,46 +30167,23 @@
              *  Functions
              *
              * */
-            /* eslint-disable valid-jsdoc */
-            /**
-             * Internal function to initialize an individual series.
-             * @private
-             */
-            function getSeries(chart, options) {
-                if (options === void 0) { options = {}; }
-                var optionsChart = chart.options.chart,
-                    type = (options.type ||
-                        optionsChart.type ||
-                        optionsChart.defaultSeriesType ||
-                        ''),
-                    SeriesClass = SeriesRegistry.seriesTypes[type];
-                // No such series type
-                if (!SeriesRegistry) {
-                    error(17, true, chart, { missingModuleFor: type });
-                }
-                var series = new SeriesClass();
-                if (typeof series.init === 'function') {
-                    series.init(chart, options);
-                }
-                return series;
-            }
-            SeriesRegistry.getSeries = getSeries;
             /**
              * Registers class pattern of a series.
              *
              * @private
              */
-            function registerSeriesType(seriesType, seriesClass) {
+            function registerSeriesType(seriesType, SeriesClass) {
                 var defaultPlotOptions = defaultOptions.plotOptions || {},
-                    seriesOptions = seriesClass.defaultOptions;
-                if (!seriesClass.prototype.pointClass) {
-                    seriesClass.prototype.pointClass = Point;
+                    seriesOptions = SeriesClass.defaultOptions,
+                    seriesProto = SeriesClass.prototype;
+                seriesProto.type = seriesType;
+                if (!seriesProto.pointClass) {
+                    seriesProto.pointClass = Point;
                 }
-                seriesClass.prototype.type = seriesType;
                 if (seriesOptions) {
                     defaultPlotOptions[seriesType] = seriesOptions;
                 }
-                SeriesRegistry.seriesTypes[seriesType] = seriesClass;
+                SeriesRegistry.seriesTypes[seriesType] = SeriesClass;
             }
             SeriesRegistry.registerSeriesType = registerSeriesType;
             /**
@@ -30089,7 +30228,6 @@
                 return SeriesRegistry.seriesTypes[type];
             }
             SeriesRegistry.seriesType = seriesType;
-            /* eslint-enable valid-jsdoc */
         })(SeriesRegistry || (SeriesRegistry = {}));
         /* *
          *
@@ -30136,7 +30274,6 @@
             fireEvent = U.fireEvent,
             getStyle = U.getStyle,
             isArray = U.isArray,
-            isFunction = U.isFunction,
             isNumber = U.isNumber,
             isObject = U.isObject,
             isString = U.isString,
@@ -30339,6 +30476,15 @@
                     this.labelCollectors = [];
                     this.callback = callback;
                     this.isResizing = 0;
+                    var zooming = optionsChart.zooming = optionsChart.zooming || {};
+                    // Other options have no default so just pick
+                    if (userOptions.chart && !userOptions.chart.zooming) {
+                        zooming.resetButton = optionsChart.resetZoomButton;
+                    }
+                    zooming.key = pick(zooming.key, optionsChart.zoomKey);
+                    zooming.pinchType = pick(zooming.pinchType, optionsChart.pinchType);
+                    zooming.singleTouch = pick(zooming.singleTouch, optionsChart.zoomBySingleTouch);
+                    zooming.type = pick(zooming.type, optionsChart.zoomType);
                     /**
                      * The options structure for the chart after merging
                      * {@link #defaultOptions} and {@link #userOptions}. It contains
@@ -30898,10 +31044,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(
@@ -32182,9 +32328,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
@@ -32747,9 +32916,8 @@
             Chart.prototype.showResetZoom = function () {
                 var chart = this,
                     lang = defaultOptions.lang,
-                    btnOptions = chart.options.chart.resetZoomButton,
+                    btnOptions = chart.options.chart.zooming.resetButton,
                     theme = btnOptions.theme,
-                    states = theme.states,
                     alignTo = (btnOptions.relativeTo === 'chart' ||
                         btnOptions.relativeTo === 'spacingBox' ?
                         null :
@@ -32762,7 +32930,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
@@ -32863,9 +33031,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;
                 }
@@ -32960,7 +33126,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 &&
@@ -32996,6 +33161,8 @@
              *
              * Note: We need to define these references after initializers are bound to
              * chart's prototype.
+             *
+             * @private
              */
             collectionsWithInit: {
                 // collectionName: [ initializingMethod, [extraArguments] ]
@@ -33006,6 +33173,7 @@
             /**
              * These collections (arrays) implement update() methods with support for
              * one-to-one option.
+             * @private
              */
             collectionsWithUpdate: [
                 'xAxis',
@@ -33015,6 +33183,7 @@
             /**
              * These properties cause isDirtyBox to be set to true when updating. Can be
              * extended from plugins.
+             * @private
              */
             propsRequireDirtyBox: [
                 'backgroundColor',
@@ -33031,7 +33200,7 @@
             /**
              * These properties require a full reflow of chart elements, best
              * implemented through running `Chart.setSize` internally (#8190).
-             * @type {Array}
+             * @private
              */
             propsRequireReflow: [
                 'margin',
@@ -33048,6 +33217,7 @@
             /**
              * These properties cause all series to be updated when updating. Can be
              * extended from plugins.
+             * @private
              */
             propsRequireUpdateSeries: [
                 'chart.inverted',
@@ -33720,6 +33890,9 @@
                 /**
                  * The line cap used for line ends and line joins on the graph.
                  *
+                 * @sample highcharts/series-line/linecap/
+                 *         Line cap comparison
+                 *
                  * @type       {Highcharts.SeriesLinecapValue}
                  * @default    round
                  * @product    highcharts highstock
@@ -34291,7 +34464,7 @@
                      *
                      * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
                      */
-                    lineColor: "#ffffff" /* backgroundColor */,
+                    lineColor: "#ffffff" /* Palette.backgroundColor */,
                     /**
                      * The width of the point marker's outline.
                      *
@@ -34491,7 +34664,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.
@@ -34501,7 +34674,7 @@
                              *
                              * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
                              */
-                            lineColor: "#000000" /* neutralColor100 */,
+                            lineColor: "#000000" /* Palette.neutralColor100 */,
                             /**
                              * The width of the point marker's outline.
                              *
@@ -35121,13 +35294,13 @@
                  */
                 x: 0,
                 /**
-                 * The Z index of the data labels. The default Z index puts it above
-                 * the series. Use a Z index of 2 to display it behind the series.
+                 * The z index of the data labels. Use a `zIndex` of 6 to display it above
+                 * the series, or use a `zIndex` of 2 to display it behind the series.
                  *
                  * @type      {number}
                  * @default   6
                  * @since     2.3.5
-                 * @apioption plotOptions.series.dataLabels.z
+                 * @apioption plotOptions.series.dataLabels.zIndex
                  */
                 /**
                  * The y position offset of the label relative to the point in
@@ -35565,6 +35738,8 @@
              *
              * @sample highcharts/coloraxis/custom-color-key/
              *         Custom color key
+             * @sample highcharts/coloraxis/color-key-with-stops/
+             *         Custom colorKey with color axis stops
              * @sample highcharts/coloraxis/changed-default-color-key/
              *         Changed default color key
              *
@@ -35606,7 +35781,7 @@
 
         return seriesDefaults;
     });
-    _registerModule(_modules, 'Core/Series/Series.js', [_modules['Core/Animation/AnimationUtilities.js'], _modules['Core/DefaultOptions.js'], _modules['Core/Foundation.js'], _modules['Core/Globals.js'], _modules['Core/Legend/LegendSymbol.js'], _modules['Core/Series/Point.js'], _modules['Core/Series/SeriesDefaults.js'], _modules['Core/Series/SeriesRegistry.js'], _modules['Core/Renderer/SVG/SVGElement.js'], _modules['Core/Utilities.js']], function (A, D, F, H, LegendSymbol, Point, SeriesDefaults, SeriesRegistry, SVGElement, U) {
+    _registerModule(_modules, 'Core/Series/Series.js', [_modules['Core/Animation/AnimationUtilities.js'], _modules['Core/DefaultOptions.js'], _modules['Core/Foundation.js'], _modules['Core/Globals.js'], _modules['Core/Legend/LegendSymbol.js'], _modules['Core/Series/Point.js'], _modules['Core/Series/SeriesDefaults.js'], _modules['Core/Series/SeriesRegistry.js'], _modules['Core/Renderer/SVG/SVGElement.js'], _modules['Core/Utilities.js']], function (A, DO, F, H, LegendSymbol, Point, SeriesDefaults, SeriesRegistry, SVGElement, U) {
         /* *
          *
          *  (c) 2010-2021 Torstein Honsi
@@ -35618,7 +35793,7 @@
          * */
         var animObject = A.animObject,
             setAnimation = A.setAnimation;
-        var defaultOptions = D.defaultOptions;
+        var defaultOptions = DO.defaultOptions;
         var registerEventOptions = F.registerEventOptions;
         var hasTouch = H.hasTouch,
             svg = H.svg,
@@ -36217,7 +36392,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 ||
@@ -36317,7 +36492,7 @@
             };
             /**
              * Internal function called from setData. If the point count is the same
-             * as is was, or if there are overlapping X values, just run
+             * as it was, or if there are overlapping X values, just run
              * Point.update which is cheaper, allows animation, and keeps references
              * to points. This also allows adding or removing points if the X-es
              * don't match.
@@ -36404,7 +36579,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);
                         }
                     });
@@ -36483,6 +36658,7 @@
              *        `false` to prevent.
              */
             Series.prototype.setData = function (data, redraw, animation, updatePoints) {
+                if (redraw === void 0) { redraw = true; }
                 var series = this,
                     oldData = series.points,
                     oldDataLength = (oldData && oldData.length) || 0,
@@ -36501,16 +36677,27 @@
                     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) {
                     data = this.sortData(data);
                 }
                 // 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 &&
@@ -36518,7 +36705,7 @@
                     series.visible &&
                     // Soft updating has no benefit in boost, and causes JS error
                     // (#8355)
-                    !series.isSeriesBoosting) {
+                    !series.boosted) {
                     updatedData = this.updateData(data, animation);
                 }
                 if (!updatedData) {
@@ -36611,7 +36798,7 @@
                     // destroy old points
                     i = oldDataLength;
                     while (i--) {
-                        if (oldData[i] && oldData[i].destroy) {
+                        if (oldData[i] && (oldData[i].destroy)) {
                             oldData[i].destroy();
                         }
                     }
@@ -36909,26 +37096,6 @@
                     else {
                         // splat the y data in case of ohlc data array
                         point = (new PointClass()).init(series, [processedXData[i]].concat(splat(processedYData[i])));
-                        /**
-                         * Highcharts Stock only. If a point object is created by data
-                         * grouping, it doesn't reflect actual points in the raw
-                         * data. In this case, the `dataGroup` property holds
-                         * information that points back to the raw data.
-                         *
-                         * - `dataGroup.start` is the index of the first raw data
-                         *   point in the group.
-                         *
-                         * - `dataGroup.length` is the amount of points in the
-                         *   group.
-                         *
-                         * @product highstock
-                         *
-                         * @name Highcharts.Point#dataGroup
-                         * @type {Highcharts.DataGroupingInfoObject|undefined}
-                         *
-                         * @sample stock/members/point-datagroup
-                         *         Click to inspect raw data points
-                         */
                         point.dataGroup = series.groupMap[groupCropStartIndex + i];
                         if (point.dataGroup.options) {
                             point.options = point.dataGroup.options;
@@ -37503,7 +37670,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];
                     }
@@ -37821,8 +37988,8 @@
                     clips = (this.clips || []),
                     graph = this.graph,
                     area = this.area,
-                    chartSizeMax = Math.max(chart.chartWidth,
-                    chart.chartHeight),
+                    plotSizeMax = Math.max(chart.plotWidth,
+                    chart.plotHeight),
                     axis = this[(this.zoneAxis || 'y') + 'Axis'],
                     inverted = chart.inverted;
                 var translatedFrom,
@@ -37859,8 +38026,8 @@
                         translatedFrom = reversed ?
                             (horiz ? chart.plotWidth : 0) :
                             (horiz ? 0 : (axis.toPixels(extremes.min) || 0));
-                        translatedFrom = clamp(pick(translatedTo, translatedFrom), 0, chartSizeMax);
-                        translatedTo = clamp(Math.round(axis.toPixels(pick(threshold.value, extremes.max), true) || 0), 0, chartSizeMax);
+                        translatedFrom = clamp(pick(translatedTo, translatedFrom), 0, plotSizeMax);
+                        translatedTo = clamp(Math.round(axis.toPixels(pick(threshold.value, extremes.max), true) || 0), 0, plotSizeMax);
                         if (ignoreZones) {
                             translatedFrom = translatedTo =
                                 axis.toPixels(extremes.max);
@@ -37873,7 +38040,7 @@
                                 x: inverted ? pxPosMax : pxPosMin,
                                 y: 0,
                                 width: pxRange,
-                                height: chartSizeMax
+                                height: plotSizeMax
                             };
                             if (!horiz) {
                                 clipAttr.x = chart.plotHeight - clipAttr.x;
@@ -37883,7 +38050,7 @@
                             clipAttr = {
                                 x: 0,
                                 y: inverted ? pxPosMax : pxPosMin,
-                                width: chartSizeMax,
+                                width: plotSizeMax,
                                 height: pxRange
                             };
                             if (horiz) {
@@ -37941,10 +38108,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();
                     }
                 }
             };
@@ -38337,7 +38504,7 @@
                     }
                     if (tree[sideB]) {
                         // compare distance to current best to splitting point to
-                        // decide wether to check side B or not
+                        // decide whether to check side B or not
                         if (Math.sqrt(tdist * tdist) < ret[kdComparer]) {
                             nPoint2 = _search(search, tree[sideB], depth + 1, dimensions);
                             ret = (nPoint2[kdComparer] <
@@ -38438,7 +38605,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 ?
@@ -38577,7 +38744,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 {
@@ -38782,7 +38949,8 @@
                         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
@@ -39265,6 +39433,31 @@
                 return this.chart.isInsidePlot(plotX, plotY, options);
             };
             Series.defaultOptions = SeriesDefaults;
+            /**
+             * Registry of all available series types.
+             *
+             * @name Highcharts.Series.types
+             * @type {Highcharts.Dictionary<typeof_Highcharts.Series>}
+             */
+            Series.types = SeriesRegistry.seriesTypes;
+            /* *
+             *
+             *  Static Functions
+             *
+             * */
+            /**
+             * Registers a series class to be accessible via `Series.types`.
+             *
+             * @function Highcharts.Series.registerType
+             *
+             * @param {string} seriesType
+             * The series type as an identifier string in lower case.
+             *
+             * @param {Function} SeriesClass
+             * The series class as a class pattern or a constructor function with
+             * prototype.
+             */
+            Series.registerType = SeriesRegistry.registerSeriesType;
             return Series;
         }());
         extend(Series.prototype, {
@@ -39677,6 +39870,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 */
@@ -39710,7 +39904,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) {
@@ -39845,7 +40039,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) {
@@ -40012,7 +40206,7 @@
          *         Scrollable plot area
          * @sample highcharts/chart/scrollable-plotarea-vertical
          *         Vertically scrollable plot area
-         * @sample {gantt} highcharts/chart/scrollable-plotarea-vertical
+         * @sample {gantt} gantt/chart/scrollable-plotarea-vertical
          *         Gantt chart with vertically scrollable plot area
          *
          * @since     6.1.0
@@ -40067,238 +40261,7 @@
         (''); // keep doclets above in transpiled file
 
     });
-    _registerModule(_modules, 'Core/Axis/StackingAxis.js', [_modules['Core/Animation/AnimationUtilities.js'], _modules['Core/Axis/Axis.js'], _modules['Core/Utilities.js']], function (A, Axis, U) {
-        /* *
-         *
-         *  (c) 2010-2021 Torstein Honsi
-         *
-         *  License: www.highcharts.com/license
-         *
-         *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
-         *
-         * */
-        var getDeferredAnimation = A.getDeferredAnimation;
-        var addEvent = U.addEvent,
-            destroyObjectProperties = U.destroyObjectProperties,
-            fireEvent = U.fireEvent,
-            isNumber = U.isNumber,
-            objectEach = U.objectEach;
-        /* *
-         *
-         *  Composition
-         *
-         * */
-        /**
-         * @private
-         */
-        var StackingAxis;
-        (function (StackingAxis) {
-            /* *
-             *
-             *  Declarations
-             *
-             * */
-            /* *
-             *
-             *  Constants
-             *
-             * */
-            var composedClasses = [];
-            /* *
-             *
-             *  Functions
-             *
-             * */
-            /* eslint-disable valid-jsdoc */
-            /**
-             * Extends axis with stacking support.
-             * @private
-             */
-            function compose(AxisClass) {
-                if (composedClasses.indexOf(AxisClass) === -1) {
-                    composedClasses.push(AxisClass);
-                    addEvent(AxisClass, 'init', onInit);
-                    addEvent(AxisClass, 'destroy', onDestroy);
-                }
-                return AxisClass;
-            }
-            StackingAxis.compose = compose;
-            /**
-             * @private
-             */
-            function onDestroy() {
-                var stacking = this.stacking;
-                if (!stacking) {
-                    return;
-                }
-                var stacks = stacking.stacks;
-                // Destroy each stack total
-                objectEach(stacks, function (stack, stackKey) {
-                    destroyObjectProperties(stack);
-                    stacks[stackKey] = null;
-                });
-                if (stacking &&
-                    stacking.stackTotalGroup) {
-                    stacking.stackTotalGroup.destroy();
-                }
-            }
-            /**
-             * @private
-             */
-            function onInit() {
-                var axis = this;
-                if (!axis.stacking) {
-                    axis.stacking = new Additions(axis);
-                }
-            }
-            /* *
-             *
-             *  Class
-             *
-             * */
-            /**
-             * Adds stacking support to axes.
-             * @private
-             * @class
-             */
-            var Additions = /** @class */ (function () {
-                    /* *
-                    *
-                    *  Constructors
-                    *
-                    * */
-                    function Additions(axis) {
-                        this.oldStacks = {};
-                    this.stacks = {};
-                    this.stacksTouched = 0;
-                    this.axis = axis;
-                }
-                /* *
-                *
-                *  Functions
-                *
-                * */
-                /**
-                 * Build the stacks from top down
-                 * @private
-                 */
-                Additions.prototype.buildStacks = function () {
-                    var stacking = this;
-                    var axis = stacking.axis;
-                    var axisSeries = axis.series;
-                    var reversedStacks = axis.options.reversedStacks;
-                    var len = axisSeries.length;
-                    var actualSeries,
-                        i;
-                    if (!axis.isXAxis) {
-                        stacking.usePercentage = false;
-                        i = len;
-                        while (i--) {
-                            actualSeries = axisSeries[reversedStacks ? i : len - i - 1];
-                            actualSeries.setStackedPoints();
-                            actualSeries.setGroupedPoints();
-                        }
-                        // Loop up again to compute percent and stream stack
-                        for (i = 0; i < len; i++) {
-                            axisSeries[i].modifyStacks();
-                        }
-                        fireEvent(axis, 'afterBuildStacks');
-                    }
-                };
-                /**
-                 * @private
-                 */
-                Additions.prototype.cleanStacks = function () {
-                    var stacking = this,
-                        axis = stacking.axis;
-                    var stacks;
-                    if (!axis.isXAxis) {
-                        if (stacking.oldStacks) {
-                            stacks = stacking.stacks = stacking.oldStacks;
-                        }
-                        // reset stacks
-                        objectEach(stacks, function (type) {
-                            objectEach(type, function (stack) {
-                                stack.cumulative = stack.total;
-                            });
-                        });
-                    }
-                };
-                /**
-                 * Set all the stacks to initial states and destroy unused ones.
-                 * @private
-                 */
-                Additions.prototype.resetStacks = function () {
-                    var stacking = this,
-                        axis = stacking.axis,
-                        stacks = stacking.stacks;
-                    if (!axis.isXAxis) {
-                        objectEach(stacks, function (type) {
-                            objectEach(type, function (stack, x) {
-                                // Clean up memory after point deletion (#1044, #4320)
-                                if (isNumber(stack.touched) &&
-                                    stack.touched < stacking.stacksTouched) {
-                                    stack.destroy();
-                                    delete type[x];
-                                    // Reset stacks
-                                }
-                                else {
-                                    stack.total = null;
-                                    stack.cumulative = null;
-                                }
-                            });
-                        });
-                    }
-                };
-                /**
-                 * @private
-                 */
-                Additions.prototype.renderStackTotals = function () {
-                    var stacking = this,
-                        axis = stacking.axis,
-                        chart = axis.chart,
-                        renderer = chart.renderer,
-                        stacks = stacking.stacks,
-                        stackLabelsAnim = axis.options.stackLabels &&
-                            axis.options.stackLabels.animation,
-                        animationConfig = getDeferredAnimation(chart,
-                        stackLabelsAnim || false),
-                        stackTotalGroup = stacking.stackTotalGroup = (stacking.stackTotalGroup ||
-                            renderer
-                                .g('stack-labels')
-                                .attr({
-                                visibility: 'visible',
-                                zIndex: 6,
-                                opacity: 0
-                            })
-                                .add());
-                    // plotLeft/Top will change when y axis gets wider so we need to
-                    // translate the stackTotalGroup at every render call. See bug #506
-                    // and #516
-                    stackTotalGroup.translate(chart.plotLeft, chart.plotTop);
-                    // Render each stack total
-                    objectEach(stacks, function (type) {
-                        objectEach(type, function (stack) {
-                            stack.render(stackTotalGroup);
-                        });
-                    });
-                    stackTotalGroup.animate({
-                        opacity: 1
-                    }, animationConfig);
-                };
-                return Additions;
-            }());
-            StackingAxis.Additions = Additions;
-        })(StackingAxis || (StackingAxis = {}));
-        /* *
-         *
-         *  Default Export
-         *
-         * */
-
-        return StackingAxis;
-    });
-    _registerModule(_modules, 'Extensions/Stacking.js', [_modules['Core/Axis/Axis.js'], _modules['Core/Chart/Chart.js'], _modules['Core/FormatUtilities.js'], _modules['Core/Globals.js'], _modules['Core/Series/Series.js'], _modules['Core/Axis/StackingAxis.js'], _modules['Core/Utilities.js']], function (Axis, Chart, F, H, Series, StackingAxis, U) {
+    _registerModule(_modules, 'Core/Axis/Stacking/StackItem.js', [_modules['Core/FormatUtilities.js'], _modules['Core/Series/SeriesRegistry.js'], _modules['Core/Utilities.js']], function (FU, SeriesRegistry, U) {
         /* *
          *
          *  (c) 2010-2021 Torstein Honsi
@@ -40308,34 +40271,28 @@
          *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
          *
          * */
-        var format = F.format;
-        var correctFloat = U.correctFloat,
-            defined = U.defined,
+        var format = FU.format;
+        var Series = SeriesRegistry.series;
+        var defined = U.defined,
             destroyObjectProperties = U.destroyObjectProperties,
-            isArray = U.isArray,
             isNumber = U.isNumber,
-            objectEach = U.objectEach,
             pick = U.pick;
         /* *
          *
          *  Class
          *
          * */
-        /* eslint-disable no-invalid-this, valid-jsdoc */
         /**
          * The class for stacks. Each stack, on a specific X value and either negative
          * or positive, has its own stack item.
-         *
          * @private
-         * @class
-         * @name Highcharts.StackItem
-         * @param {Highcharts.Axis} axis
-         * @param {Highcharts.YAxisStackLabelsOptions} options
-         * @param {boolean} isNegative
-         * @param {number} x
-         * @param {Highcharts.OptionsStackingValue} [stackOption]
          */
         var StackItem = /** @class */ (function () {
+                /* *
+                 *
+                 *  Constructor
+                 *
+                 * */
                 function StackItem(axis, options, isNegative, x, stackOption) {
                     var inverted = axis.chart.inverted;
                 this.axis = axis;
@@ -40347,6 +40304,7 @@
                 this.x = x;
                 // Initialize total value
                 this.total = null;
+                this.cumulative = null;
                 // This will keep each points' extremes stored by series.index and point
                 // index
                 this.points = {};
@@ -40372,23 +40330,18 @@
             }
             /**
              * @private
-             * @function Highcharts.StackItem#destroy
              */
             StackItem.prototype.destroy = function () {
                 destroyObjectProperties(this, this.axis);
             };
             /**
              * Renders the stack total label and adds it to the stack label group.
-             *
              * @private
-             * @function Highcharts.StackItem#render
-             * @param {Highcharts.SVGElement} group
              */
             StackItem.prototype.render = function (group) {
                 var chart = this.axis.chart,
                     options = this.options,
                     formatOption = options.format,
-                    attr = {},
                     str = formatOption ? // format the text in the label
                         format(formatOption,
                     this,
@@ -40403,14 +40356,14 @@
                     // Create new label
                     this.label = chart.renderer
                         .label(str, null, null, options.shape, null, null, options.useHTML, false, 'stack-labels');
-                    attr = {
-                        r: options.borderRadius || 0,
-                        text: str,
-                        rotation: options.rotation,
-                        // set default padding to 5 as it is in datalabels #12308
-                        padding: pick(options.padding, 5),
-                        visibility: 'hidden' // hidden until setOffset is called
-                    };
+                    var attr = {
+                            r: options.borderRadius || 0,
+                            text: str,
+                            rotation: options.rotation,
+                            // set default padding to 5 as it is in datalabels #12308
+                            padding: pick(options.padding, 5),
+                            visibility: 'hidden' // hidden until setOffset is called
+                        };
                     if (!chart.styledMode) {
                         attr.fill = options.backgroundColor;
                         attr.stroke = options.borderColor;
@@ -40428,49 +40381,39 @@
             /**
              * Sets the offset that the stack has from the x value and repositions the
              * label.
-             *
              * @private
-             * @function Highcarts.StackItem#setOffset
-             * @param {number} xOffset
-             * @param {number} xWidth
-             * @param {number} [boxBottom]
-             * @param {number} [boxTop]
-             * @param {number} [defaultX]
              */
             StackItem.prototype.setOffset = function (xOffset, xWidth, boxBottom, boxTop, defaultX) {
-                var stackItem = this,
-                    axis = stackItem.axis,
+                var axis = this.axis,
                     chart = axis.chart, 
                     // stack value translated mapped to chart coordinates
                     y = axis.translate(axis.stacking.usePercentage ?
                         100 :
                         (boxTop ?
                             boxTop :
-                            stackItem.total), 0, 0, 0, 1),
+                            this.total), 0, 0, 0, 1),
                     yZero = axis.translate(boxBottom ? boxBottom : 0), // stack origin
-                    // stack height:
-                    h = defined(y) && Math.abs(y - yZero), 
                     // x position:
                     x = pick(defaultX,
-                    chart.xAxis[0].translate(stackItem.x)) +
+                    chart.xAxis[0].translate(this.x)) +
                         xOffset,
-                    stackBox = defined(y) && stackItem.getStackBox(chart,
-                    stackItem,
+                    stackBox = defined(y) && this.getStackBox(chart,
+                    this,
                     x,
                     y,
-                    xWidth,
-                    h,
+                    xWidth, 
+                    // stack height:
+                    Math.abs(y - yZero),
                     axis),
-                    label = stackItem.label,
-                    isNegative = stackItem.isNegative,
-                    isJustify = pick(stackItem.options.overflow, 'justify') === 'justify',
-                    textAlign = stackItem.textAlign,
-                    visible;
+                    label = this.label,
+                    isNegative = this.isNegative,
+                    textAlign = this.textAlign;
                 if (label && stackBox) {
                     var bBox = label.getBBox(),
-                        padding = label.padding,
-                        boxOffsetX = void 0,
-                        boxOffsetY = void 0;
+                        padding = label.padding;
+                    var boxOffsetX = void 0,
+                        isJustify = pick(this.options.overflow, 'justify') === 'justify',
+                        visible = void 0;
                     if (textAlign === 'left') {
                         boxOffsetX = chart.inverted ? -padding : padding;
                     }
@@ -40487,34 +40430,34 @@
                                 bBox.width / 2;
                         }
                     }
-                    boxOffsetY = chart.inverted ?
-                        bBox.height / 2 : (isNegative ? -padding : bBox.height);
+                    var boxOffsetY = chart.inverted ?
+                            bBox.height / 2 : (isNegative ? -padding : bBox.height);
                     // Reset alignOptions property after justify #12337
-                    stackItem.alignOptions.x = pick(stackItem.options.x, 0);
-                    stackItem.alignOptions.y = pick(stackItem.options.y, 0);
+                    this.alignOptions.x = pick(this.options.x, 0);
+                    this.alignOptions.y = pick(this.options.y, 0);
                     // Set the stackBox position
                     stackBox.x -= boxOffsetX;
                     stackBox.y -= boxOffsetY;
                     // Align the label to the box
-                    label.align(stackItem.alignOptions, null, stackBox);
+                    label.align(this.alignOptions, null, stackBox);
                     // Check if label is inside the plotArea #12294
-                    if (chart.isInsidePlot(label.alignAttr.x + boxOffsetX - stackItem.alignOptions.x, label.alignAttr.y + boxOffsetY - stackItem.alignOptions.y)) {
+                    if (chart.isInsidePlot(label.alignAttr.x + boxOffsetX - this.alignOptions.x, label.alignAttr.y + boxOffsetY - this.alignOptions.y)) {
                         label.show();
                     }
                     else {
                         // Move label away to avoid the overlapping issues
-                        label.alignAttr.y = -9999;
+                        label.hide();
                         isJustify = false;
                     }
                     if (isJustify) {
                         // Justify stackLabel into the stackBox
-                        Series.prototype.justifyDataLabel.call(this.axis, label, stackItem.alignOptions, label.alignAttr, bBox, stackBox);
+                        Series.prototype.justifyDataLabel.call(this.axis, label, this.alignOptions, label.alignAttr, bBox, stackBox);
                     }
                     label.attr({
                         x: label.alignAttr.x,
                         y: label.alignAttr.y
                     });
-                    if (pick(!isJustify && stackItem.options.crop, true)) {
+                    if (pick(!isJustify && this.options.crop, true)) {
                         visible =
                             isNumber(label.x) &&
                                 isNumber(label.y) &&
@@ -40552,13 +40495,92 @@
             };
             return StackItem;
         }());
+        /* *
+         *
+         *  Default Export
+         *
+         * */
+        /* *
+         *
+         *  API Declarations
+         *
+         * */
+        /**
+         * Stack of data points
+         *
+         * @product highcharts
+         *
+         * @interface Highcharts.StackItemObject
+         */ /**
+        * Alignment settings
+        * @name Highcharts.StackItemObject#alignOptions
+        * @type {Highcharts.AlignObject}
+        */ /**
+        * Related axis
+        * @name Highcharts.StackItemObject#axis
+        * @type {Highcharts.Axis}
+        */ /**
+        * Cumulative value of the stacked data points
+        * @name Highcharts.StackItemObject#cumulative
+        * @type {number}
+        */ /**
+        * True if on the negative side
+        * @name Highcharts.StackItemObject#isNegative
+        * @type {boolean}
+        */ /**
+        * Related SVG element
+        * @name Highcharts.StackItemObject#label
+        * @type {Highcharts.SVGElement}
+        */ /**
+        * Related stack options
+        * @name Highcharts.StackItemObject#options
+        * @type {Highcharts.YAxisStackLabelsOptions}
+        */ /**
+        * Total value of the stacked data points
+        * @name Highcharts.StackItemObject#total
+        * @type {number}
+        */ /**
+        * Shared x value of the stack
+        * @name Highcharts.StackItemObject#x
+        * @type {number}
+        */
+        ''; // keeps doclets above in JS file
+
+        return StackItem;
+    });
+    _registerModule(_modules, 'Core/Axis/Stacking/StackingAxis.js', [_modules['Core/Animation/AnimationUtilities.js'], _modules['Core/Axis/Axis.js'], _modules['Core/Series/SeriesRegistry.js'], _modules['Core/Axis/Stacking/StackItem.js'], _modules['Core/Utilities.js']], function (A, Axis, SeriesRegistry, StackItem, U) {
+        /* *
+         *
+         *  (c) 2010-2021 Torstein Honsi
+         *
+         *  License: www.highcharts.com/license
+         *
+         *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
+         *
+         * */
+        var getDeferredAnimation = A.getDeferredAnimation;
+        var seriesProto = SeriesRegistry.series.prototype;
+        var addEvent = U.addEvent,
+            correctFloat = U.correctFloat,
+            defined = U.defined,
+            destroyObjectProperties = U.destroyObjectProperties,
+            fireEvent = U.fireEvent,
+            isArray = U.isArray,
+            isNumber = U.isNumber,
+            objectEach = U.objectEach,
+            pick = U.pick;
+        /* *
+         *
+         *  Functions
+         *
+         * */
         /**
          * Generate stacks for each series and calculate stacks total values
          *
          * @private
          * @function Highcharts.Chart#getStacks
          */
-        Chart.prototype.getStacks = function () {
+        function chartGetStacks() {
             var chart = this,
                 inverted = chart.inverted;
             // reset stacks for each yAxis
@@ -40580,10 +40602,111 @@
                     ].join(',');
                 }
             });
-        };
-        // Stacking methods defined on the Axis prototype
-        StackingAxis.compose(Axis);
-        // Stacking methods defined for Series prototype
+        }
+        /**
+         * @private
+         */
+        function onAxisDestroy() {
+            var stacking = this.stacking;
+            if (!stacking) {
+                return;
+            }
+            var stacks = stacking.stacks;
+            // Destroy each stack total
+            objectEach(stacks, function (stack, stackKey) {
+                destroyObjectProperties(stack);
+                stacks[stackKey] = null;
+            });
+            if (stacking &&
+                stacking.stackTotalGroup) {
+                stacking.stackTotalGroup.destroy();
+            }
+        }
+        /**
+         * @private
+         */
+        function onAxisInit() {
+            var axis = this;
+            if (!axis.stacking) {
+                axis.stacking = new AxisAdditions(axis);
+            }
+        }
+        /**
+         * Get stack indicator, according to it's x-value, to determine points with the
+         * same x-value
+         *
+         * @private
+         * @function Highcharts.Series#getStackIndicator
+         */
+        function seriesGetStackIndicator(stackIndicator, x, index, key) {
+            // Update stack indicator, when:
+            // first point in a stack || x changed || stack type (negative vs positive)
+            // changed:
+            if (!defined(stackIndicator) ||
+                stackIndicator.x !== x ||
+                (key && stackIndicator.stackKey !== key)) {
+                stackIndicator = {
+                    x: x,
+                    index: 0,
+                    key: key,
+                    stackKey: key
+                };
+            }
+            else {
+                (stackIndicator).index++;
+            }
+            stackIndicator.key =
+                [index, x, stackIndicator.index].join(',');
+            return stackIndicator;
+        }
+        /**
+         * Iterate over all stacks and compute the absolute values to percent
+         *
+         * @private
+         * @function Highcharts.Series#modifyStacks
+         */
+        function seriesModifyStacks() {
+            var series = this,
+                yAxis = series.yAxis,
+                stackKey = series.stackKey,
+                stacks = yAxis.stacking.stacks,
+                processedXData = series.processedXData,
+                stacking = series.options.stacking,
+                stacker = series[stacking + 'Stacker'];
+            var stackIndicator;
+            if (stacker) { // Modifier function exists (Series.percentStacker etc.)
+                [stackKey, '-' + stackKey].forEach(function (key) {
+                    var i = processedXData.length,
+                        x,
+                        stack,
+                        pointExtremes;
+                    while (i--) {
+                        x = processedXData[i];
+                        stackIndicator = series.getStackIndicator(stackIndicator, x, series.index, key);
+                        stack = stacks[key] && stacks[key][x];
+                        pointExtremes =
+                            stack && stack.points[stackIndicator.key];
+                        if (pointExtremes) {
+                            stacker.call(series, pointExtremes, stack, i);
+                        }
+                    }
+                });
+            }
+        }
+        /**
+         * Modifier function for percent stacks. Blows up the stack to 100%.
+         *
+         * @private
+         * @function Highcharts.Series#percentStacker
+         */
+        function seriesPercentStacker(pointExtremes, stack, i) {
+            var totalFactor = stack.total ? 100 / stack.total : 0;
+            // Y bottom value
+            pointExtremes[0] = correctFloat(pointExtremes[0] * totalFactor);
+            // Y value
+            pointExtremes[1] = correctFloat(pointExtremes[1] * totalFactor);
+            this.stackedYData[i] = pointExtremes[1];
+        }
         /**
          * Set grouped points in a stack-like object. When `centerInCategory` is true,
          * and `stacking` is not enabled, we need a pseudo (horizontal) stack in order
@@ -40593,7 +40716,7 @@
          * @function Highcharts.Series#setStackedPoints
          * @return {void}
          */
-        Series.prototype.setGroupedPoints = function () {
+        function seriesSetGroupedPoints() {
             var stacking = this.yAxis.stacking;
             if (this.options.centerInCategory &&
                 (this.is('column') || this.is('columnrange')) &&
@@ -40602,7 +40725,7 @@
                 !this.options.stacking &&
                 // With only one series, we don't need to consider centerInCategory
                 this.chart.series.length > 1) {
-                Series.prototype.setStackedPoints.call(this, 'group');
+                seriesProto.setStackedPoints.call(this, 'group');
                 // After updating, if we now have proper stacks, we must delete the group
                 // pseudo stacks (#14986)
             }
@@ -40614,20 +40737,29 @@
                     }
                 });
             }
-        };
+        }
         /**
          * Adds series' points value to corresponding stack
          *
          * @private
          * @function Highcharts.Series#setStackedPoints
          */
-        Series.prototype.setStackedPoints = function (stackingParam) {
+        function seriesSetStackedPoints(stackingParam) {
             var stacking = stackingParam || this.options.stacking;
             if (!stacking || (this.visible !== true &&
                 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;
+            var 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++) {
@@ -40652,7 +40784,7 @@
                         stacks[key][x].total = null;
                     }
                     else {
-                        stacks[key][x] = new StackItem(yAxis, yAxis.options.stackLabels, isNegative, x, stackOption);
+                        stacks[key][x] = new StackItem(yAxis, yAxis.options.stackLabels, !!isNegative, x, stackOption);
                     }
                 }
                 // If the StackItem doesn't exist, create it first
@@ -40729,130 +40861,195 @@
             }
             // Reset old stacks
             yAxis.stacking.oldStacks = {};
-        };
-        /**
-         * Iterate over all stacks and compute the absolute values to percent
+        }
+        /* *
+         *
+         *  Classes
          *
+         * */
+        /**
+         * Adds stacking support to axes.
          * @private
-         * @function Highcharts.Series#modifyStacks
+         * @class
          */
-        Series.prototype.modifyStacks = function () {
-            var series = this,
-                yAxis = series.yAxis,
-                stackKey = series.stackKey,
-                stacks = yAxis.stacking.stacks,
-                processedXData = series.processedXData,
-                stackIndicator,
-                stacking = series.options.stacking;
-            if (series[stacking + 'Stacker']) { // Modifier function exists
-                [stackKey, '-' + stackKey].forEach(function (key) {
-                    var i = processedXData.length,
-                        x,
-                        stack,
-                        pointExtremes;
+        var AxisAdditions = /** @class */ (function () {
+                /* *
+                 *
+                 *  Constructors
+                 *
+                 * */
+                function AxisAdditions(axis) {
+                    this.oldStacks = {};
+                this.stacks = {};
+                this.stacksTouched = 0;
+                this.axis = axis;
+            }
+            /* *
+             *
+             *  Functions
+             *
+             * */
+            /**
+             * Build the stacks from top down
+             * @private
+             */
+            AxisAdditions.prototype.buildStacks = function () {
+                var stacking = this;
+                var axis = stacking.axis;
+                var axisSeries = axis.series;
+                var reversedStacks = axis.options.reversedStacks;
+                var len = axisSeries.length;
+                var actualSeries,
+                    i;
+                if (!axis.isXAxis) {
+                    stacking.usePercentage = false;
+                    i = len;
                     while (i--) {
-                        x = processedXData[i];
-                        stackIndicator = series.getStackIndicator(stackIndicator, x, series.index, key);
-                        stack = stacks[key] && stacks[key][x];
-                        pointExtremes =
-                            stack && stack.points[stackIndicator.key];
-                        if (pointExtremes) {
-                            series[stacking + 'Stacker'](pointExtremes, stack, i);
-                        }
+                        actualSeries = axisSeries[reversedStacks ? i : len - i - 1];
+                        actualSeries.setStackedPoints();
+                        actualSeries.setGroupedPoints();
+                    }
+                    // Loop up again to compute percent and stream stack
+                    for (i = 0; i < len; i++) {
+                        axisSeries[i].modifyStacks();
                     }
+                    fireEvent(axis, 'afterBuildStacks');
+                }
+            };
+            /**
+             * @private
+             */
+            AxisAdditions.prototype.cleanStacks = function () {
+                var stacking = this,
+                    axis = stacking.axis;
+                var stacks;
+                if (!axis.isXAxis) {
+                    if (stacking.oldStacks) {
+                        stacks = stacking.stacks = stacking.oldStacks;
+                    }
+                    // reset stacks
+                    objectEach(stacks, function (type) {
+                        objectEach(type, function (stack) {
+                            stack.cumulative = stack.total;
+                        });
+                    });
+                }
+            };
+            /**
+             * Set all the stacks to initial states and destroy unused ones.
+             * @private
+             */
+            AxisAdditions.prototype.resetStacks = function () {
+                var stacking = this,
+                    axis = stacking.axis,
+                    stacks = stacking.stacks;
+                if (!axis.isXAxis) {
+                    objectEach(stacks, function (type) {
+                        objectEach(type, function (stack, x) {
+                            // Clean up memory after point deletion (#1044, #4320)
+                            if (isNumber(stack.touched) &&
+                                stack.touched < stacking.stacksTouched) {
+                                stack.destroy();
+                                delete type[x];
+                                // Reset stacks
+                            }
+                            else {
+                                stack.total = null;
+                                stack.cumulative = null;
+                            }
+                        });
+                    });
+                }
+            };
+            /**
+             * @private
+             */
+            AxisAdditions.prototype.renderStackTotals = function () {
+                var stacking = this,
+                    axis = stacking.axis,
+                    chart = axis.chart,
+                    renderer = chart.renderer,
+                    stacks = stacking.stacks,
+                    stackLabelsAnim = axis.options.stackLabels &&
+                        axis.options.stackLabels.animation,
+                    animationConfig = getDeferredAnimation(chart,
+                    stackLabelsAnim || false),
+                    stackTotalGroup = stacking.stackTotalGroup = (stacking.stackTotalGroup ||
+                        renderer
+                            .g('stack-labels')
+                            .attr({
+                            zIndex: 6,
+                            opacity: 0
+                        })
+                            .add());
+                // plotLeft/Top will change when y axis gets wider so we need to
+                // translate the stackTotalGroup at every render call. See bug #506
+                // and #516
+                stackTotalGroup.translate(chart.plotLeft, chart.plotTop);
+                // Render each stack total
+                objectEach(stacks, function (type) {
+                    objectEach(type, function (stack) {
+                        stack.render(stackTotalGroup);
+                    });
                 });
-            }
-        };
-        /**
-         * Modifier function for percent stacks. Blows up the stack to 100%.
+                stackTotalGroup.animate({
+                    opacity: 1
+                }, animationConfig);
+            };
+            return AxisAdditions;
+        }());
+        /* *
          *
-         * @private
-         * @function Highcharts.Series#percentStacker
-         */
-        Series.prototype.percentStacker = function (pointExtremes, stack, i) {
-            var totalFactor = stack.total ? 100 / stack.total : 0;
-            // Y bottom value
-            pointExtremes[0] = correctFloat(pointExtremes[0] * totalFactor);
-            // Y value
-            pointExtremes[1] = correctFloat(pointExtremes[1] * totalFactor);
-            this.stackedYData[i] = pointExtremes[1];
-        };
-        /**
-         * Get stack indicator, according to it's x-value, to determine points with the
-         * same x-value
+         *  Composition
          *
-         * @private
-         * @function Highcharts.Series#getStackIndicator
-         */
-        Series.prototype.getStackIndicator = function (stackIndicator, x, index, key) {
-            // Update stack indicator, when:
-            // first point in a stack || x changed || stack type (negative vs positive)
-            // changed:
-            if (!defined(stackIndicator) ||
-                stackIndicator.x !== x ||
-                (key && stackIndicator.stackKey !== key)) {
-                stackIndicator = {
-                    x: x,
-                    index: 0,
-                    key: key,
-                    stackKey: key
-                };
-            }
-            else {
-                (stackIndicator).index++;
+         * */
+        var StackingAxis;
+        (function (StackingAxis) {
+            /* *
+             *
+             *  Constants
+             *
+             * */
+            var composedClasses = [];
+            /* *
+             *
+             *  Functions
+             *
+             * */
+            /**
+             * Extends axis with stacking support.
+             * @private
+             */
+            function compose(AxisClass, ChartClass, SeriesClass) {
+                if (composedClasses.indexOf(AxisClass) === -1) {
+                    composedClasses.push(AxisClass);
+                    addEvent(AxisClass, 'init', onAxisInit);
+                    addEvent(AxisClass, 'destroy', onAxisDestroy);
+                }
+                if (composedClasses.indexOf(ChartClass) === -1) {
+                    composedClasses.push(ChartClass);
+                    var chartProto = ChartClass.prototype;
+                    chartProto.getStacks = chartGetStacks;
+                }
+                if (composedClasses.indexOf(SeriesClass) === -1) {
+                    composedClasses.push(SeriesClass);
+                    var seriesProto_1 = SeriesClass.prototype;
+                    seriesProto_1.getStackIndicator = seriesGetStackIndicator;
+                    seriesProto_1.modifyStacks = seriesModifyStacks;
+                    seriesProto_1.percentStacker = seriesPercentStacker;
+                    seriesProto_1.setGroupedPoints = seriesSetGroupedPoints;
+                    seriesProto_1.setStackedPoints = seriesSetStackedPoints;
+                }
             }
-            stackIndicator.key =
-                [index, x, stackIndicator.index].join(',');
-            return stackIndicator;
-        };
-        H.StackItem = StackItem; // @todo -> master
+            StackingAxis.compose = compose;
+        })(StackingAxis || (StackingAxis = {}));
         /* *
          *
          *  Default Export
          *
          * */
-        /**
-         * Stack of data points
-         *
-         * @product highcharts
-         *
-         * @interface Highcharts.StackItemObject
-         */ /**
-        * Alignment settings
-        * @name Highcharts.StackItemObject#alignOptions
-        * @type {Highcharts.AlignObject}
-        */ /**
-        * Related axis
-        * @name Highcharts.StackItemObject#axis
-        * @type {Highcharts.Axis}
-        */ /**
-        * Cumulative value of the stacked data points
-        * @name Highcharts.StackItemObject#cumulative
-        * @type {number}
-        */ /**
-        * True if on the negative side
-        * @name Highcharts.StackItemObject#isNegative
-        * @type {boolean}
-        */ /**
-        * Related SVG element
-        * @name Highcharts.StackItemObject#label
-        * @type {Highcharts.SVGElement}
-        */ /**
-        * Related stack options
-        * @name Highcharts.StackItemObject#options
-        * @type {Highcharts.YAxisStackLabelsOptions}
-        */ /**
-        * Total value of the stacked data points
-        * @name Highcharts.StackItemObject#total
-        * @type {number}
-        */ /**
-        * Shared x value of the stack
-        * @name Highcharts.StackItemObject#x
-        * @type {number}
-        */
-        ''; // keeps doclets above in JS file
 
-        return H.StackItem;
+        return StackingAxis;
     });
     _registerModule(_modules, 'Series/Line/LineSeries.js', [_modules['Core/Series/Series.js'], _modules['Core/Series/SeriesRegistry.js'], _modules['Core/Utilities.js']], function (Series, SeriesRegistry, U) {
         /* *
@@ -40939,7 +41136,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);
@@ -41511,9 +41708,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 ?
@@ -41543,15 +41740,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] :
@@ -41583,13 +41783,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 =
@@ -41619,20 +41822,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;
@@ -41691,8 +41903,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) {
@@ -41799,7 +42011,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
                  */
@@ -41836,7 +42048,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
                  */
@@ -41851,7 +42063,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
@@ -42029,6 +42241,11 @@
         var LineSeries = SeriesRegistry.seriesTypes.line;
         var merge = U.merge,
             pick = U.pick;
+        /* *
+         *
+         *  Class
+         *
+         * */
         /**
          * Spline series type.
          *
@@ -42077,12 +42294,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
                  */
@@ -42098,8 +42314,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;
@@ -42185,15 +42401,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;
@@ -42298,7 +42518,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
@@ -42324,7 +42544,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;
         /* *
@@ -42346,7 +42568,7 @@
             function AreaSplineSeries() {
                 /* *
                  *
-                 *  Static properties
+                 *  Static Properties
                  *
                  * */
                 var _this = _super !== null && _super.apply(this,
@@ -42361,40 +42583,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));
@@ -42407,9 +42595,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).
@@ -42495,8 +42721,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
@@ -43217,6 +43442,8 @@
              *               lineWidth, marker, step, useOhlcData
              * @product      highcharts highstock
              * @optionparent plotOptions.column
+             *
+             * @private
              */
             ColumnSeries.defaultOptions = merge(Series.defaultOptions, {
                 /**
@@ -43488,7 +43715,7 @@
                          * @default #cccccc
                          * @product highcharts highstock gantt
                          */
-                        color: "#cccccc" /* neutralColor20 */,
+                        color: "#cccccc" /* Palette.neutralColor20 */,
                         /**
                          * A specific border color for the selected point.
                          *
@@ -43496,7 +43723,7 @@
                          * @default #000000
                          * @product highcharts highstock gantt
                          */
-                        borderColor: "#000000" /* neutralColor100 */
+                        borderColor: "#000000" /* Palette.neutralColor100 */
                     }
                 },
                 dataLabels: {
@@ -43563,7 +43790,7 @@
                  *
                  * @private
                  */
-                borderColor: "#ffffff" /* backgroundColor */
+                borderColor: "#ffffff" /* Palette.backgroundColor */
             });
             return ColumnSeries;
         }(Series));
@@ -43770,6 +43997,7 @@
             extend = U.extend,
             fireEvent = U.fireEvent,
             isArray = U.isArray,
+            isString = U.isString,
             merge = U.merge,
             objectEach = U.objectEach,
             pick = U.pick,
@@ -43809,17 +44037,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,
@@ -43830,8 +44059,6 @@
                     }
                 };
                 var baseline,
-                    normRotation,
-                    negRotation,
                     rotCorr, // rotation correction
                     // Math.round for rounding errors (#2683), alignTo to allow column
                     // labels (#2700)
@@ -43855,7 +44082,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({
@@ -43884,27 +44116,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
@@ -43917,12 +44134,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
                                 });
@@ -43946,9 +44188,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.
@@ -43996,7 +44241,13 @@
                     seriesOptions = series.options,
                     points = series.points,
                     hasRendered = series.hasRendered || 0,
-                    renderer = chart.renderer;
+                    renderer = chart.renderer,
+                    _a = chart.options.chart,
+                    backgroundColor = _a.backgroundColor,
+                    plotBackgroundColor = _a.plotBackgroundColor,
+                    contrastColor = renderer.getContrast((isString(plotBackgroundColor) && plotBackgroundColor) ||
+                        (isString(backgroundColor) && backgroundColor) ||
+                        "#000000" /* Palette.neutralColor100 */);
                 var seriesDlOptions = seriesOptions.dataLabels,
                     pointOptions,
                     dataLabelsGroup;
@@ -44025,7 +44276,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);
                         }
@@ -44074,7 +44325,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));
@@ -44083,7 +44334,7 @@
                                             labelDistance < 0 ||
                                             !!seriesOptions.stacking ?
                                             point.contrastColor :
-                                            "#000000" /* neutralColor100 */;
+                                            contrastColor;
                                     }
                                     else {
                                         delete point.contrastColor;
@@ -44160,10 +44411,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;
@@ -44188,9 +44439,6 @@
                                     // read text bounding box
                                     dataLabel.css(style).shadow(labelOptions.shadow);
                                 }
-                                if (!dataLabel.added) {
-                                    dataLabel.add(dataLabelsGroup);
-                                }
                                 if (labelOptions.textPath && !labelOptions.useHTML) {
                                     dataLabel.setTextPath((point.getDataLabelPath &&
                                         point.getDataLabelPath(dataLabel)) || point.graphic, labelOptions.textPath);
@@ -44200,10 +44448,16 @@
                                         point.dataLabelPath = (point.dataLabelPath.destroy());
                                     }
                                 }
+                                if (!dataLabel.added) {
+                                    dataLabel.add(dataLabelsGroup);
+                                }
                                 // Now the data label is created and placed at 0,0, so
                                 // we need to align it
                                 series.alignDataLabel(point, dataLabel, labelOptions, null, isNew);
                             }
+                            else if (dataLabel) {
+                                dataLabel.hide();
+                            }
                         });
                     });
                 }
@@ -44681,7 +44935,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
@@ -44707,6 +44961,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;
@@ -44723,6 +44980,11 @@
         var ScatterSeries = /** @class */ (function (_super) {
                 __extends(ScatterSeries, _super);
             function ScatterSeries() {
+                /* *
+                 *
+                 *  Static Properties
+                 *
+                 * */
                 var _this = _super !== null && _super.apply(this,
                     arguments) || this;
                 /* *
@@ -44790,7 +45052,6 @@
             };
             /**
              * @private
-             * @function Highcharts.seriesTypes.scatter#drawGraph
              */
             ScatterSeries.prototype.drawGraph = function () {
                 if (this.options.lineWidth) {
@@ -44887,9 +45148,12 @@
                  * series, in a scatter plot the series.name by default shows in the
                  * headerFormat and point.x and point.y in the pointFormat.
                  *
-                 * @product highcharts highstock
+                 * @product highcharts highstock highmaps
                  */
                 tooltip: {
+                    /**
+                     * @product highcharts highstock
+                     */
                     headerFormat: '<span style="color:{point.color}">\u25CF</span> ' +
                         '<span style="font-size: 10px"> {series.name}</span><br/>',
                     pointFormat: 'x: <b>{point.x}</b><br/>y: <b>{point.y}</b><br/>'
@@ -44993,7 +45257,7 @@
          * @product   highcharts highstock
          * @apioption series.scatter.data
          */
-        ''; // adds doclets above to transpilat
+        ''; // keeps doclets above in JS file
 
         return ScatterSeries;
     });
@@ -45008,7 +45272,8 @@
          *
          * */
         var deg2rad = H.deg2rad;
-        var isNumber = U.isNumber,
+        var fireEvent = U.fireEvent,
+            isNumber = U.isNumber,
             pick = U.pick,
             relativeLength = U.relativeLength;
         /**
@@ -45042,7 +45307,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,
@@ -45079,6 +45345,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;
@@ -45582,7 +45854,7 @@
                         this.graph.attr({
                             'stroke-width': options.borderWidth,
                             fill: options.fillColor || 'none',
-                            stroke: options.color || "#cccccc" /* neutralColor20 */
+                            stroke: options.color || "#cccccc" /* Palette.neutralColor20 */
                         });
                     }
                 }
@@ -45739,6 +46011,7 @@
              * @private
              */
             PieSeries.prototype.translate = function (positions) {
+                fireEvent(this, 'translate');
                 this.generatePoints();
                 var series = this,
                     precision = 1000, // issue #172
@@ -45908,8 +46181,10 @@
              *               pointPlacement, pointStart, softThreshold, stacking, step,
              *               threshold, turboThreshold, zoneAxis, zones, dataSorting,
              *               boostBlending
-             * @product      highcharts
+             * @product      highcharts highmaps
              * @optionparent plotOptions.pie
+             *
+             * @private
              */
             PieSeries.defaultOptions = merge(Series.defaultOptions, {
                 /**
@@ -45928,7 +46203,7 @@
                  *
                  * @type      {Function}
                  * @since     1.2.0
-                 * @product   highcharts
+                 * @product   highcharts highmaps
                  * @context   Highcharts.Point
                  * @apioption plotOptions.pie.events.checkboxClick
                  */
@@ -45944,7 +46219,7 @@
                  *
                  * @type      {Highcharts.PointLegendItemClickCallbackFunction}
                  * @since     1.2.0
-                 * @product   highcharts
+                 * @product   highcharts highmaps
                  * @apioption plotOptions.pie.point.events.legendItemClick
                  */
                 /**
@@ -45960,7 +46235,7 @@
                  *
                  * @type    {Array<(number|string|null),(number|string|null)>}
                  * @default [null, null]
-                 * @product highcharts
+                 * @product highcharts highmaps
                  *
                  * @private
                  */
@@ -46005,7 +46280,7 @@
                  *
                  * @type      {Array<Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject>}
                  * @since     3.0
-                 * @product   highcharts
+                 * @product   highcharts highmaps
                  * @apioption plotOptions.pie.colors
                  */
                 /**
@@ -46018,7 +46293,7 @@
                     /**
                      * Alignment method for data labels. Possible values are:
                      *
-                     * - `toPlotEdges`: Each label touches the nearest vertical edge of
+                     * - `plotEdges`: Each label touches the nearest vertical edge of
                      *   the plot area.
                      *
                      * - `connectors`: Connectors have the same x position and the
@@ -46032,7 +46307,7 @@
                      *
                      * @type      {string}
                      * @since     7.0.0
-                     * @product   highcharts
+                     * @product   highcharts highmaps
                      * @apioption plotOptions.pie.dataLabels.alignTo
                      */
                     allowOverlap: true,
@@ -46050,7 +46325,7 @@
                      *
                      * @type      {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
                      * @since     2.1
-                     * @product   highcharts
+                     * @product   highcharts highmaps
                      * @apioption plotOptions.pie.dataLabels.connectorColor
                      */
                     /**
@@ -46062,7 +46337,7 @@
                      *         No padding
                      *
                      * @since   2.1
-                     * @product highcharts
+                     * @product highcharts highmaps
                      */
                     connectorPadding: 5,
                     /**
@@ -46099,7 +46374,7 @@
                      *
                      * @type    {string|Function}
                      * @since   7.0.0
-                     * @product highcharts
+                     * @product highcharts highmaps
                      */
                     connectorShape: 'fixedOffset',
                     /**
@@ -46116,7 +46391,7 @@
                      * @type      {number}
                      * @default   1
                      * @since     2.1
-                     * @product   highcharts
+                     * @product   highcharts highmaps
                      * @apioption plotOptions.pie.dataLabels.connectorWidth
                      */
                     /**
@@ -46128,7 +46403,7 @@
                      *         crookDistance set to 90%
                      *
                      * @since   7.0.0
-                     * @product highcharts
+                     * @product highcharts highmaps
                      */
                     crookDistance: '70%',
                     /**
@@ -46142,7 +46417,7 @@
                      *
                      * @type    {number|string}
                      * @since   2.1
-                     * @product highcharts
+                     * @product highcharts highmaps
                      */
                     distance: 30,
                     enabled: true,
@@ -46183,7 +46458,7 @@
                      *         Non soft
                      *
                      * @since   2.1.7
-                     * @product highcharts
+                     * @product highcharts highmaps
                      */
                     softConnector: true,
                     /**
@@ -46219,9 +46494,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
@@ -46234,7 +46520,7 @@
                  *         True, the hiddden point is ignored
                  *
                  * @since   2.3.0
-                 * @product highcharts
+                 * @product highcharts highmaps
                  *
                  * @private
                  */
@@ -46249,7 +46535,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
@@ -46265,7 +46551,7 @@
                  * @type      {number|string}
                  * @default   0
                  * @since     2.0
-                 * @product   highcharts
+                 * @product   highcharts highmaps
                  * @apioption plotOptions.pie.innerSize
                  */
                 /**
@@ -46288,7 +46574,7 @@
                  * @type      {number|string}
                  * @default   80
                  * @since     3.0
-                 * @product   highcharts
+                 * @product   highcharts highmaps
                  * @apioption plotOptions.pie.minSize
                  */
                 /**
@@ -46305,7 +46591,7 @@
                  *         Smaller pie
                  *
                  * @type    {number|string|null}
-                 * @product highcharts
+                 * @product highcharts highmaps
                  *
                  * @private
                  */
@@ -46317,7 +46603,7 @@
                  * @sample {highcharts} highcharts/plotoptions/series-showinlegend/
                  *         One series in the legend, one hidden
                  *
-                 * @product highcharts
+                 * @product highcharts highmaps
                  *
                  * @private
                  */
@@ -46329,7 +46615,7 @@
                  * @sample {highcharts} highcharts/plotoptions/pie-slicedoffset-20/
                  *         20px offset
                  *
-                 * @product highcharts
+                 * @product highcharts highmaps
                  *
                  * @private
                  */
@@ -46344,7 +46630,7 @@
                  * @type      {number}
                  * @default   0
                  * @since     2.3.4
-                 * @product   highcharts
+                 * @product   highcharts highmaps
                  * @apioption plotOptions.pie.startAngle
                  */
                 /**
@@ -46356,7 +46642,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
                  */
@@ -46378,11 +46664,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.
                  *
@@ -46397,7 +46683,7 @@
                  * @sample {highcharts} highcharts/plotoptions/pie-borderwidth/
                  *         3px border
                  *
-                 * @product highcharts
+                 * @product highcharts highmaps
                  *
                  * @private
                  */
@@ -46411,7 +46697,7 @@
                     /**
                      * @extends   plotOptions.series.states.hover
                      * @excluding marker, lineWidth, lineWidthPlus
-                     * @product   highcharts
+                     * @product   highcharts highmaps
                      */
                     hover: {
                         /**
@@ -46425,7 +46711,7 @@
                          * @sample {highcharts} highcharts/plotoptions/pie-states-hover-brightness/
                          *         Brightened by 0.5
                          *
-                         * @product highcharts
+                         * @product highcharts highmaps
                          */
                         brightness: 0.1
                     }
@@ -46467,7 +46753,7 @@
          * @extends   series,plotOptions.pie
          * @excluding cropThreshold, dataParser, dataURL, stack, xAxis, yAxis,
          *            dataSorting, step, boostThreshold, boostBlending
-         * @product   highcharts
+         * @product   highcharts highmaps
          * @apioption series.pie
          */
         /**
@@ -46511,19 +46797,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
          */
         /**
@@ -46533,18 +46819,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
@@ -46913,7 +47199,7 @@
                                             'stroke-width': connectorWidth,
                                             'stroke': (pointDataLabelsOptions.connectorColor ||
                                                 point.color ||
-                                                "#666666" /* neutralColor60 */)
+                                                "#666666" /* Palette.neutralColor60 */)
                                         });
                                     }
                                 }
@@ -47011,7 +47297,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();
@@ -47074,9 +47362,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);
                             }
                         });
@@ -47220,7 +47506,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;
@@ -47636,7 +47925,7 @@
 
         return Responsive;
     });
-    _registerModule(_modules, 'masters/highcharts.src.js', [_modules['Core/Globals.js'], _modules['Core/Utilities.js'], _modules['Core/DefaultOptions.js'], _modules['Core/Animation/Fx.js'], _modules['Core/Animation/AnimationUtilities.js'], _modules['Core/Renderer/HTML/AST.js'], _modules['Core/FormatUtilities.js'], _modules['Core/Renderer/RendererUtilities.js'], _modules['Core/Renderer/SVG/SVGElement.js'], _modules['Core/Renderer/SVG/SVGRenderer.js'], _modules['Core/Renderer/HTML/HTMLElement.js'], _modules['Core/Renderer/HTML/HTMLRenderer.js'], _modules['Core/Axis/Axis.js'], _modules['Core/Axis/DateTimeAxis.js'], _modules['Core/Axis/LogarithmicAxis.js'], _modules['Core/Axis/PlotLineOrBand/PlotLineOrBand.js'], _modules['Core/Axis/Tick.js'], _modules['Core/Tooltip.js'], _modules['Core/Series/Point.js'], _modules['Core/Pointer.js'], _modules['Core/MSPointer.js'], _modules['Core/Legend/Legend.js'], _modules['Core/Chart/Chart.js'], _modules['Core/Series/Series.js'], _modules['Core/Series/SeriesRegistry.js'], _modules['Series/Column/ColumnSeries.js'], _modules['Series/Column/ColumnDataLabel.js'], _modules['Series/Pie/PieSeries.js'], _modules['Series/Pie/PieDataLabel.js'], _modules['Core/Series/DataLabel.js'], _modules['Core/Responsive.js'], _modules['Core/Color/Color.js'], _modules['Core/Time.js']], function (Highcharts, Utilities, DefaultOptions, Fx, Animation, AST, FormatUtilities, RendererUtilities, SVGElement, SVGRenderer, HTMLElement, HTMLRenderer, Axis, DateTimeAxis, LogarithmicAxis, PlotLineOrBand, Tick, Tooltip, Point, Pointer, MSPointer, Legend, Chart, Series, SeriesRegistry, ColumnSeries, ColumnDataLabel, PieSeries, PieDataLabel, DataLabel, Responsive, Color, Time) {
+    _registerModule(_modules, 'masters/highcharts.src.js', [_modules['Core/Globals.js'], _modules['Core/Utilities.js'], _modules['Core/DefaultOptions.js'], _modules['Core/Animation/Fx.js'], _modules['Core/Animation/AnimationUtilities.js'], _modules['Core/Renderer/HTML/AST.js'], _modules['Core/FormatUtilities.js'], _modules['Core/Renderer/RendererUtilities.js'], _modules['Core/Renderer/SVG/SVGElement.js'], _modules['Core/Renderer/SVG/SVGRenderer.js'], _modules['Core/Renderer/HTML/HTMLElement.js'], _modules['Core/Renderer/HTML/HTMLRenderer.js'], _modules['Core/Axis/Axis.js'], _modules['Core/Axis/DateTimeAxis.js'], _modules['Core/Axis/LogarithmicAxis.js'], _modules['Core/Axis/PlotLineOrBand/PlotLineOrBand.js'], _modules['Core/Axis/Tick.js'], _modules['Core/Tooltip.js'], _modules['Core/Series/Point.js'], _modules['Core/Pointer.js'], _modules['Core/MSPointer.js'], _modules['Core/Legend/Legend.js'], _modules['Core/Chart/Chart.js'], _modules['Core/Axis/Stacking/StackingAxis.js'], _modules['Core/Axis/Stacking/StackItem.js'], _modules['Core/Series/Series.js'], _modules['Core/Series/SeriesRegistry.js'], _modules['Series/Column/ColumnSeries.js'], _modules['Series/Column/ColumnDataLabel.js'], _modules['Series/Pie/PieSeries.js'], _modules['Series/Pie/PieDataLabel.js'], _modules['Core/Series/DataLabel.js'], _modules['Core/Responsive.js'], _modules['Core/Color/Color.js'], _modules['Core/Time.js']], function (Highcharts, Utilities, DefaultOptions, Fx, Animation, AST, FormatUtilities, RendererUtilities, SVGElement, SVGRenderer, HTMLElement, HTMLRenderer, Axis, DateTimeAxis, LogarithmicAxis, PlotLineOrBand, Tick, Tooltip, Point, Pointer, MSPointer, Legend, Chart, StackingAxis, StackItem, Series, SeriesRegistry, ColumnSeries, ColumnDataLabel, PieSeries, PieDataLabel, DataLabel, Responsive, Color, Time) {
 
         var G = Highcharts;
         // Animation
@@ -47657,6 +47946,7 @@
         G.Point = Point;
         G.Pointer = (MSPointer.isRequired() ? MSPointer : Pointer);
         G.Series = Series;
+        G.StackItem = StackItem;
         G.SVGElement = SVGElement;
         G.SVGRenderer = SVGRenderer;
         G.Tick = Tick;
@@ -47732,6 +48022,7 @@
         PieDataLabel.compose(PieSeries);
         PlotLineOrBand.compose(Axis);
         Responsive.compose(Chart);
+        StackingAxis.compose(Axis, Chart, Series);
         // Default Export
 
         return G;