highcharts 9.3.2 → 10.1.0

package/highstock.src.js

@@ -1,11 +1,10 @@
 /**
- * @license Highstock JS v9.3.2 (2021-11-29)
+ * @license Highstock JS v10.1.0 (2022-04-29)
  *
  * (c) 2009-2021 Torstein Honsi
  *
  * License: www.highcharts.com/license
  */
-'use strict';
 (function (root, factory) {
     if (typeof module === 'object' && module.exports) {
         factory['default'] = factory;
@@ -22,11 +21,21 @@
         }
         root.Highcharts = factory(root);
     }
-}(typeof window !== 'undefined' ? window : this, function (win) {
+}(typeof window !== 'undefined' ? window : this, function (window) {
+    'use strict';
     var _modules = {};
     function _registerModule(obj, path, args, fn) {
         if (!obj.hasOwnProperty(path)) {
             obj[path] = fn.apply(null, args);
+
+            if (typeof CustomEvent === 'function') {
+                window.dispatchEvent(
+                    new CustomEvent(
+                        'HighchartsModuleLoaded',
+                        { detail: { path: path, module: obj[path] }
+                    })
+                );
+            }
         }
     }
     _registerModule(_modules, 'Core/Globals.js', [], function () {
@@ -39,23 +48,6 @@
          *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
          *
          * */
-        /* *
-         *
-         *  Constants
-         *
-         * */
-        /**
-         * @private
-         * @deprecated
-         * @todo Rename UMD argument `win` to `window`; move code to `Globals.win`
-         */
-        var w = (typeof win !== 'undefined' ?
-                win :
-                typeof window !== 'undefined' ?
-                    window :
-                    {}
-            // eslint-disable-next-line node/no-unsupported-features/es-builtins
-            );
         /* *
          *
          *  Namespace
@@ -71,7 +63,10 @@
              *  Constants
              *
              * */
-            Globals.SVG_NS = 'http://www.w3.org/2000/svg', Globals.product = 'Highcharts', Globals.version = '9.3.2', Globals.win = w, Globals.doc = Globals.win.document, Globals.svg = (Globals.doc &&
+            Globals.SVG_NS = 'http://www.w3.org/2000/svg', Globals.product = 'Highcharts', Globals.version = '10.1.0', Globals.win = (typeof window !== 'undefined' ?
+                window :
+                {}), // eslint-disable-line node/no-unsupported-features/es-builtins
+            Globals.doc = Globals.win.document, Globals.svg = (Globals.doc &&
                 Globals.doc.createElementNS &&
                 !!Globals.doc.createElementNS(Globals.SVG_NS, 'svg').createSVGRect), Globals.userAgent = (Globals.win.navigator && Globals.win.navigator.userAgent) || '', Globals.isChrome = Globals.userAgent.indexOf('Chrome') !== -1, Globals.isFirefox = Globals.userAgent.indexOf('Firefox') !== -1, Globals.isMS = /(edge|msie|trident)/i.test(Globals.userAgent) && !Globals.win.opera, Globals.isSafari = !Globals.isChrome && Globals.userAgent.indexOf('Safari') !== -1, Globals.isTouchDevice = /(Mobile|Android|Windows Phone)/.test(Globals.userAgent), Globals.isWebKit = Globals.userAgent.indexOf('AppleWebKit') !== -1, Globals.deg2rad = Math.PI * 2 / 360, Globals.hasBidiBug = (Globals.isFirefox &&
                 parseInt(Globals.userAgent.split('Firefox/')[1], 10) < 4 // issue #38
@@ -365,7 +360,9 @@
                     // Arrays, primitives and DOM nodes are copied directly
                 }
                 else if (isObject(newer[key]) ||
-                    newer[key] !== older[key]) {
+                    newer[key] !== older[key] ||
+                    // If the newer key is explicitly undefined, keep it (#10525)
+                    (key in newer && !(key in older))) {
                     result[key] = newer[key];
                 }
             });
@@ -533,7 +530,7 @@
          * @param {Highcharts.HTMLDOMElement|Highcharts.SVGDOMElement} elem
          *        The DOM element to receive the attribute(s).
          *
-         * @param {string|Highcharts.HTMLAttributes|Highcharts.SVGAttributes} [prop]
+         * @param {string|Highcharts.HTMLAttributes|Highcharts.SVGAttributes} [keyOrAttribs]
          *        The property or an object of key-value pairs.
          *
          * @param {number|string} [value]
@@ -542,33 +539,36 @@
          * @return {string|null|undefined}
          *         When used as a getter, return the value.
          */
-        function attr(elem, prop, value) {
+        function attr(elem, keyOrAttribs, value) {
+            var isGetter = isString(keyOrAttribs) && !defined(value);
             var ret;
-            // if the prop is a string
-            if (isString(prop)) {
-                // set the value
-                if (defined(value)) {
-                    elem.setAttribute(prop, value);
-                    // get the value
-                }
-                else if (elem && elem.getAttribute) {
-                    ret = elem.getAttribute(prop);
+            var attrSingle = function (value,
+                key) {
+                    // Set the value
+                    if (defined(value)) {
+                        elem.setAttribute(key,
+                value);
+                    // Get the value
+                }
+                else if (isGetter) {
+                    ret = elem.getAttribute(key);
                     // IE7 and below cannot get class through getAttribute (#7850)
-                    if (!ret && prop === 'class') {
-                        ret = elem.getAttribute(prop + 'Name');
+                    if (!ret && key === 'class') {
+                        ret = elem.getAttribute(key + 'Name');
                     }
+                    // Remove the value
                 }
-                // else if prop is defined, it is a hash of key/value pairs
+                else {
+                    elem.removeAttribute(key);
+                }
+            };
+            // If keyOrAttribs is a string
+            if (isString(keyOrAttribs)) {
+                attrSingle(value, keyOrAttribs);
+                // Else if keyOrAttribs is defined, it is a hash of key/value pairs
             }
             else {
-                objectEach(prop, function (val, key) {
-                    if (defined(val)) {
-                        elem.setAttribute(key, val);
-                    }
-                    else {
-                        elem.removeAttribute(key);
-                    }
-                });
+                objectEach(keyOrAttribs, attrSingle);
             }
             return ret;
         }
@@ -619,10 +619,8 @@
          *
          * @function Highcharts.clearTimeout
          *
-         * @param {number} id
-         *        Id of a timeout.
-         *
-         * @return {void}
+         * @param {number|undefined} id
+         * Id of a timeout.
          */
         function internalClearTimeout(id) {
             if (defined(id)) {
@@ -692,9 +690,8 @@
          */
         function css(el, styles) {
             if (H.isMS && !H.svg) { // #2686
-                if (styles && typeof styles.opacity !== 'undefined') {
-                    styles.filter =
-                        'alpha(opacity=' + (styles.opacity * 100) + ')';
+                if (styles && defined(styles.opacity)) {
+                    styles.filter = "alpha(opacity=" + styles.opacity * 100 + ")";
                 }
             }
             extend(el.style, styles);
@@ -887,7 +884,7 @@
             var i,
                 retInterval = interval;
             // round to a tenfold of 1, 2, 2.5 or 5
-            magnitude = pick(magnitude, 1);
+            magnitude = pick(magnitude, getMagnitude(interval));
             var normalized = interval / magnitude;
             // multiples for a linear scale
             if (!multiples) {
@@ -2173,19 +2170,22 @@
          */
         var ChartDefaults = {
                 /**
-                 * Default `mapData` for all series. If set to a string,
-            it functions
-                 * as an index into the `Highcharts.maps` array. Otherwise it is
-                 * interpreted as map data.
+                 * Default `mapData` for all series,
+            in terms of a GeoJSON or TopoJSON
+                 * object. If set to a string,
+            it functions as an index into the
+                 * `Highcharts.maps` array.
                  *
-                 * @see [mapData](#series.map.mapData)
+                 * For picking out individual shapes and geometries to use for each series
+                 * of the map,
+            see [series.mapData](#series.map.mapData).
                  *
                  * @sample    maps/demo/geojson
-                 *            Loading geoJSON data
+                 *            Loading GeoJSON data
                  * @sample    maps/chart/topojson
-                 *            Loading topoJSON converted to geoJSON
+                 *            Loading TopoJSON data
                  *
-                 * @type      {string|Array<*>|Highcharts.GeoJSON}
+                 * @type      {string|Array<*>|Highcharts.GeoJSON|Highcharts.TopoJSON}
                  * @since     5.0.0
                  * @product   highmaps
                  * @apioption chart.map
@@ -2200,7 +2200,7 @@
                  * @apioption chart.mapTransforms
                  */
                 /**
-                 * When using multiple axis,
+                 * When using multiple axes,
             the ticks of two or more opposite axes
                  * will automatically be aligned by adding ticks to the axis or axes
                  * with the least ticks,
@@ -2211,8 +2211,8 @@
             it's a good idea to hide them for the secondary
                  * axis by setting `gridLineWidth` to 0.
                  *
-                 * If `startOnTick` or `endOnTick` in an Axis options are set to false,
-                 * then the `alignTicks ` will be disabled for the Axis.
+                 * If `startOnTick` or `endOnTick` in the axis options are set to false,
+                 * then the `alignTicks ` will be disabled for the axis.
                  *
                  * Disabled for logarithmic axes.
                  *
@@ -2230,6 +2230,31 @@
                  * @product   highcharts highstock gantt
                  * @apioption chart.alignTicks
                  */
+                /**
+                 * When using multiple axes,
+            align the thresholds. When this is true,
+            other
+                 * ticks will also be aligned.
+                 *
+                 * Note that for line series and some other series types,
+            the `threshold`
+                 * option is set to `null` by default. This will in turn cause their y-axis
+                 * to not have a threshold. In order to avoid that,
+            set the series
+                 * `threshold` to 0 or another number.
+                 *
+                 * If `startOnTick` or `endOnTick` in the axis options are set to false,
+            or
+                 * if the axis is logarithmic,
+            the threshold will not be aligned.
+                 *
+                 * @sample {highcharts} highcharts/chart/alignthresholds/ Set to true
+                 *
+                 * @since 10.0.0
+                 * @product   highcharts highstock gantt
+                 * @apioption chart.alignThresholds
+                 */
+                alignThresholds: false,
                 /**
                  * Set the overall animation for all chart updating. Animation can be
                  * disabled throughout the chart by setting it to false here. It can
@@ -2654,6 +2679,17 @@
              * @since      5.0.0
              */
             colorCount: 10,
+            /**
+             * By default, (because of memory and performance reasons) the chart does
+             * not copy the data but keeps it as a reference. In some cases, this might
+             * result in mutating the original data source. In order to prevent that,
+             * set that property to false. Please note that changing that might decrease
+             * performance, especially with bigger sets of data.
+             *
+             * @type       {boolean}
+             * @since 10.1.0
+             */
+            allowMutatingData: true,
             /**
              * Alias of `type`.
              *
@@ -3066,9 +3102,10 @@
              *         Y
              * @sample {highstock} stock/chart/zoomtype-xy/
              *         Xy
+             * @sample {highmaps} maps/chart/zoomtype-xy/
+             *         Map with selection zoom
              *
              * @type       {string}
-             * @product    highcharts highstock gantt
              * @validvalue ["x", "y", "xy"]
              * @apioption  chart.zoomType
              */
@@ -6376,18 +6413,20 @@
                  * @apioption tooltip.pointFormatter
                  */
                 /**
-                 * A callback function to place the tooltip in a default position. The
+                 * A callback function to place the tooltip in a custom position. The
                  * callback receives three parameters: `labelWidth`, `labelHeight` and
                  * `point`, where point contains values for `plotX` and `plotY` telling
                  * where the reference point is in the plot area. Add `chart.plotLeft`
                  * and `chart.plotTop` to get the full coordinates.
                  *
+                 * To find the actual hovered `Point` instance, use
+                 * `this.chart.hoverPoint`. For shared or split tooltips, all the hover
+                 * points are available in `this.chart.hoverPoints`.
+                 *
                  * Since v7, when [tooltip.split](#tooltip.split) option is enabled,
                  * positioner is called for each of the boxes separately, including
                  * xAxis header. xAxis header is not a point, instead `point` argument
-                 * contains info:
-                 * `{ plotX: Number, plotY: Number, isHeader: Boolean }`
-                 *
+                 * contains info: `{ plotX: Number, plotY: Number, isHeader: Boolean }`
                  *
                  * The return should be an object containing x and y values, for example
                  * `{ x: 100, y: 100 }`.
@@ -6730,6 +6769,8 @@
                  *
                  * @sample {highcharts} highcharts/tooltip/pointformat/
                  *         A different point format with value suffix
+                 * @sample {highcharts|highstock} highcharts/tooltip/pointformat-extra-information/
+                 *         Show extra information about points in the tooltip
                  * @sample {highmaps} maps/tooltip/format/
                  *         Format demo
                  *
@@ -7841,6 +7882,7 @@
             win = H.win;
         var attr = U.attr,
             createElement = U.createElement,
+            css = U.css,
             error = U.error,
             isFunction = U.isFunction,
             isString = U.isString,
@@ -7925,12 +7967,26 @@
                         valid = isString(val) && AST.allowedReferences.some(function (ref) { return val.indexOf(ref) === 0; });
                     }
                     if (!valid) {
-                        error("Highcharts warning: Invalid attribute '" + key + "' in config");
+                        error(33, false, void 0, {
+                            'Invalid attribute in config': "" + key
+                        });
                         delete attributes[key];
                     }
                 });
                 return attributes;
             };
+            AST.parseStyle = function (style) {
+                return style
+                    .split(';')
+                    .reduce(function (styles, line) {
+                    var pair = line.split(':').map(function (s) { return s.trim(); }),
+                        key = pair.shift();
+                    if (key && pair.length) {
+                        styles[key.replace(/-([a-z])/g, function (g) { return g[1].toUpperCase(); })] = pair.join(':'); // #17146
+                    }
+                    return styles;
+                }, {});
+            };
             /**
              * Utility function to set html content for an element by passing in a
              * markup string. The markup is safely parsed by the AST class to avoid
@@ -7986,12 +8042,15 @@
                         var textNode = item.textContent ?
                                 H.doc.createTextNode(item.textContent) :
                                 void 0;
+                        // Whether to ignore the AST filtering totally, #15345
+                        var bypassHTMLFiltering = AST.bypassHTMLFiltering;
                         var node;
                         if (tagName) {
                             if (tagName === '#text') {
                                 node = textNode;
                             }
-                            else if (AST.allowedTags.indexOf(tagName) !== -1) {
+                            else if (AST.allowedTags.indexOf(tagName) !== -1 ||
+                                bypassHTMLFiltering) {
                                 var NS = tagName === 'svg' ?
                                         SVG_NS :
                                         (subParent.namespaceURI || SVG_NS);
@@ -8004,11 +8063,17 @@
                                     if (key !== 'tagName' &&
                                         key !== 'attributes' &&
                                         key !== 'children' &&
+                                        key !== 'style' &&
                                         key !== 'textContent') {
                                         attributes_1[key] = val;
                                     }
                                 });
-                                attr(element, AST.filterUserAttributes(attributes_1));
+                                attr(element, bypassHTMLFiltering ?
+                                    attributes_1 :
+                                    AST.filterUserAttributes(attributes_1));
+                                if (item.style) {
+                                    css(element, item.style);
+                                }
                                 // Add text content
                                 if (textNode) {
                                     element.appendChild(textNode);
@@ -8018,8 +8083,9 @@
                                 node = element;
                             }
                             else {
-                                error('Highcharts warning: Invalid tagName ' +
-                                    tagName + ' in config');
+                                error(33, false, void 0, {
+                                    'Invalid tagName in config': tagName
+                                });
                             }
                         }
                         // Add to the tree
@@ -8047,7 +8113,11 @@
              */
             AST.prototype.parseMarkup = function (markup) {
                 var nodes = [];
-                markup = markup.trim();
+                markup = markup
+                    .trim()
+                    // The style attribute throws a warning when parsing when CSP is
+                    // enabled (#6884), so use an alias and pick it up below
+                    .replace(/ style="/g, ' data-style="');
                 var doc;
                 if (hasValidDOMParser) {
                     doc = new DOMParser().parseFromString(trustedTypesPolicy ?
@@ -8074,7 +8144,12 @@
                     if (parsedAttributes) {
                         var attributes_2 = {};
                         [].forEach.call(parsedAttributes, function (attrib) {
-                            attributes_2[attrib.name] = attrib.value;
+                            if (attrib.name === 'data-style') {
+                                astNode.style = AST.parseStyle(attrib.value);
+                            }
+                            else {
+                                attributes_2[attrib.name] = attrib.value;
+                            }
                         });
                         astNode.attributes = attributes_2;
                     }
@@ -8278,6 +8353,34 @@
                 '#text'
             ];
             AST.emptyHTML = emptyHTML;
+            /**
+             * Allow all custom SVG and HTML attributes, references and tags (together
+             * with potentially harmful ones) to be added to the DOM from the chart
+             * configuration. In other words, disable the the allow-listing which is the
+             * primary functionality of the AST.
+             *
+             * WARNING: Setting this property to `true` while allowing untrusted user
+             * data in the chart configuration will expose your application to XSS
+             * security risks!
+             *
+             * Note that in case you want to allow a known set of tags or attributes,
+             * you should allow-list them instead of disabling the filtering totally.
+             * See [allowedAttributes](Highcharts.AST#.allowedAttributes),
+             * [allowedReferences](Highcharts.AST#.allowedReferences) and
+             * [allowedTags](Highcharts.AST#.allowedTags). The `bypassHTMLFiltering`
+             * setting is intended only for those cases where allow-listing is not
+             * practical, and the chart configuration already comes from a secure
+             * source.
+             *
+             * @example
+             * // Allow all custom attributes, references and tags (disable DOM XSS
+             * // filtering)
+             * Highcharts.AST.bypassHTMLFiltering = true;
+             *
+             * @name Highcharts.AST.bypassHTMLFiltering
+             * @static
+             */
+            AST.bypassHTMLFiltering = false;
             return AST;
         }());
         /* *
@@ -9121,7 +9224,7 @@
                     }, deferTime);
                 }
                 else {
-                    this.attr(params, void 0, complete);
+                    this.attr(params, void 0, complete || animOptions.complete);
                     // Call the end step synchronously
                     objectEach(params, function (val, prop) {
                         if (animOptions.step) {
@@ -9519,25 +9622,20 @@
              *         Return the SVG element for chaining.
              */
             SVGElement.prototype.css = function (styles) {
-                var oldStyles = this.styles, newStyles = {}, elem = this.element, 
-                    // These CSS properties are interpreted internally by the SVG
-                    // renderer, but are not supported by SVG and should not be added to
-                    // the DOM. In styled mode, no CSS should find its way to the DOM
-                    // whatsoever (#6173, #6474).
-                    svgPseudoProps = ['textOutline', 'textOverflow', 'width'];
+                var oldStyles = this.styles,
+                    newStyles = {},
+                    elem = this.element;
                 var textWidth,
-                    serializedCss = '',
-                    hyphenate,
                     hasNew = !oldStyles;
                 // convert legacy
-                if (styles && styles.color) {
+                if (styles.color) {
                     styles.fill = styles.color;
                 }
                 // Filter out existing styles to increase performance (#2640)
                 if (oldStyles) {
-                    objectEach(styles, function (style, n) {
-                        if (oldStyles && oldStyles[n] !== style) {
-                            newStyles[n] = style;
+                    objectEach(styles, function (value, n) {
+                        if (oldStyles && oldStyles[n] !== value) {
+                            newStyles[n] = value;
                             hasNew = true;
                         }
                     });
@@ -9548,41 +9646,30 @@
                         styles = extend(oldStyles, newStyles);
                     }
                     // Get the text width from style
-                    if (styles) {
-                        // Previously set, unset it (#8234)
-                        if (styles.width === null || styles.width === 'auto') {
-                            delete this.textWidth;
-                            // Apply new
-                        }
-                        else if (elem.nodeName.toLowerCase() === 'text' &&
-                            styles.width) {
-                            textWidth = this.textWidth = pInt(styles.width);
-                        }
+                    // Previously set, unset it (#8234)
+                    if (styles.width === null || styles.width === 'auto') {
+                        delete this.textWidth;
+                        // Apply new
+                    }
+                    else if (elem.nodeName.toLowerCase() === 'text' &&
+                        styles.width) {
+                        textWidth = this.textWidth = pInt(styles.width);
                     }
                     // store object
                     this.styles = styles;
                     if (textWidth && (!svg && this.renderer.forExport)) {
                         delete styles.width;
                     }
-                    // Serialize and set style attribute
-                    if (elem.namespaceURI === this.SVG_NS) { // #7633
-                        hyphenate = function (a, b) {
-                            return '-' + b.toLowerCase();
-                        };
-                        objectEach(styles, function (style, n) {
-                            if (svgPseudoProps.indexOf(n) === -1) {
-                                serializedCss +=
-                                    n.replace(/([A-Z])/g, hyphenate) + ':' +
-                                        style + ';';
-                            }
-                        });
-                        if (serializedCss) {
-                            attr(elem, 'style', serializedCss); // #1881
-                        }
-                    }
-                    else {
-                        css(elem, styles);
+                    var stylesToApply_1 = merge(styles);
+                    if (elem.namespaceURI === this.SVG_NS) {
+                        // These CSS properties are interpreted internally by the SVG
+                        // renderer, but are not supported by SVG and should not be
+                        // added to the DOM. In styled mode, no CSS should find its way
+                        // to the DOM whatsoever (#6173, #6474).
+                        ['textOutline', 'textOverflow', 'width'].forEach(function (key) { return (stylesToApply_1 &&
+                            delete stylesToApply_1[key]); });
                     }
+                    css(elem, stylesToApply_1);
                     if (this.added) {
                         // Rebuild text after added. Cache mechanisms in the buildText
                         // will prevent building if there are no significant changes.
@@ -9590,7 +9677,7 @@
                             this.renderer.buildText(this);
                         }
                         // Apply text outline after added
-                        if (styles && styles.textOutline) {
+                        if (styles.textOutline) {
                             this.applyTextOutline(styles.textOutline);
                         }
                     }
@@ -9846,8 +9933,9 @@
              */
             SVGElement.prototype.getBBox = function (reload, rot) {
                 var wrapper = this,
-                    renderer = wrapper.renderer,
+                    alignValue = wrapper.alignValue,
                     element = wrapper.element,
+                    renderer = wrapper.renderer,
                     styles = wrapper.styles,
                     textStr = wrapper.textStr,
                     cache = renderer.cache,
@@ -9857,7 +9945,7 @@
                     wrapper.rotation, 0),
                     fontSize = renderer.styledMode ? (element &&
                         SVGElement.prototype.getStyle.call(element, 'font-size')) : (styles && styles.fontSize);
-                var bBox, // = wrapper.bBox,
+                var bBox,
                     width,
                     height,
                     toggleTextShadowShim,
@@ -9878,6 +9966,7 @@
                         rotation,
                         fontSize,
                         wrapper.textWidth,
+                        alignValue,
                         styles && styles.textOverflow,
                         styles && styles.fontWeight // #12163
                     ].join(',');
@@ -9923,7 +10012,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
                     }
@@ -9952,11 +10041,35 @@
                         }
                         // Adjust for rotated text
                         if (rotation) {
-                            var rad = rotation * deg2rad;
-                            bBox.width = Math.abs(height * Math.sin(rad)) +
-                                Math.abs(width * Math.cos(rad));
-                            bBox.height = Math.abs(height * Math.cos(rad)) +
-                                Math.abs(width * Math.sin(rad));
+                            var baseline = Number(element.getAttribute('y') || 0) - bBox.y,
+                                alignFactor = {
+                                    'right': 1,
+                                    'center': 0.5
+                                }[alignValue || 0] || 0,
+                                rad = rotation * deg2rad,
+                                rad90 = (rotation - 90) * deg2rad,
+                                wCosRad = width * Math.cos(rad),
+                                wSinRad = width * Math.sin(rad),
+                                cosRad90 = Math.cos(rad90),
+                                sinRad90 = Math.sin(rad90), 
+                                // Find the starting point on the left side baseline of
+                                // the text
+                                pX = bBox.x + alignFactor * (width - wCosRad),
+                                pY = bBox.y + baseline - alignFactor * wSinRad, 
+                                // Find all corners
+                                aX = pX + baseline * cosRad90,
+                                bX = aX + wCosRad,
+                                cX = bX - height * cosRad90,
+                                dX = cX - wCosRad,
+                                aY = pY + baseline * sinRad90,
+                                bY = aY + wSinRad,
+                                cY = bY - height * sinRad90,
+                                dY = cY - wSinRad;
+                            // Deduct the bounding box from the corners
+                            bBox.x = Math.min(aX, bX, cX, dX);
+                            bBox.y = Math.min(aY, bY, cY, dY);
+                            bBox.width = Math.max(aX, bX, cX, dX) - bBox.x;
+                            bBox.height = Math.max(aY, bY, cY, dY) - bBox.y;
                         }
                     }
                     // Cache it. When loading a chart in a hidden iframe in Firefox and
@@ -10015,21 +10128,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
@@ -10444,7 +10547,7 @@
              *
              * @function Highcharts.SVGElement#show
              *
-             * @param {boolean} [inherit=false]
+             * @param {boolean} [inherit=true]
              *        Set the visibility attribute to `inherit` rather than `visible`.
              *        The difference is that an element with `visibility="visible"`
              *        will be visible even if the parent is hidden.
@@ -10453,6 +10556,7 @@
              *         Returns the SVGElement for chaining.
              */
             SVGElement.prototype.show = function (inherit) {
+                if (inherit === void 0) { inherit = true; }
                 return this.attr({ visibility: inherit ? 'inherit' : 'visible' });
             };
             /**
@@ -11759,6 +11863,7 @@
             SVG_NS = H.SVG_NS,
             win = H.win;
         var attr = U.attr,
+            extend = U.extend,
             isString = U.isString,
             objectEach = U.objectEach,
             pick = U.pick;
@@ -12034,28 +12139,32 @@
                         var _a = node.attributes,
                     attributes = _a === void 0 ? {} : _a,
                     children = node.children,
+                    _b = node.style,
+                    style = _b === void 0 ? {} : _b,
                     tagName = node.tagName,
                     styledMode = _this.renderer.styledMode;
                     // Apply styling to text tags
                     if (tagName === 'b' || tagName === 'strong') {
                         if (styledMode) {
-                            attributes['class'] = 'highcharts-strong'; // eslint-disable-line dot-notation
+                            // eslint-disable-next-line dot-notation
+                            attributes['class'] = 'highcharts-strong';
                         }
                         else {
-                            attributes.style = ('font-weight:bold;' + (attributes.style || ''));
+                            style.fontWeight = 'bold';
                         }
                     }
                     else if (tagName === 'i' || tagName === 'em') {
                         if (styledMode) {
-                            attributes['class'] = 'highcharts-emphasized'; // eslint-disable-line dot-notation
+                            // eslint-disable-next-line dot-notation
+                            attributes['class'] = 'highcharts-emphasized';
                         }
                         else {
-                            attributes.style = ('font-style:italic;' + (attributes.style || ''));
+                            style.fontStyle = 'italic';
                         }
                     }
-                    // Modify attributes
-                    if (isString(attributes.style)) {
-                        attributes.style = attributes.style.replace(/(;| |^)color([ :])/, '$1fill$2');
+                    // Modify styling
+                    if (style && style.color) {
+                        style.fill = style.color;
                     }
                     // Handle breaks
                     if (tagName === 'br') {
@@ -12080,7 +12189,7 @@
                     if (tagName !== '#text' && tagName !== 'a') {
                         node.tagName = 'tspan';
                     }
-                    node.attributes = attributes;
+                    extend(node, { attributes: attributes, style: style });
                     // Recurse
                     if (children) {
                         children
@@ -12420,7 +12529,7 @@
                 this.url = this.getReferenceURL();
                 // Add description
                 var desc = this.createElement('desc').add();
-                desc.element.appendChild(doc.createTextNode('Created with Highcharts 9.3.2'));
+                desc.element.appendChild(doc.createTextNode('Created with Highcharts 10.1.0'));
                 renderer.defs = this.createElement('defs').add();
                 renderer.allowHTML = allowHTML;
                 renderer.forExport = forExport;
@@ -12731,7 +12840,7 @@
              * @param {Highcharts.SVGAttributes} [hoverState]
              * SVG attributes for the hover state.
              *
-             * @param {Highcharts.SVGAttributes} [pressedState]
+             * @param {Highcharts.SVGAttributes} [selectState]
              * SVG attributes for the pressed state.
              *
              * @param {Highcharts.SVGAttributes} [disabledState]
@@ -12746,7 +12855,7 @@
              * @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) {
                 var label = this.label(text,
                     x,
                     y,
@@ -12755,59 +12864,60 @@
                     void 0,
                     useHTML,
                     void 0, 'button'),
-                    styledMode = this.styledMode;
+                    styledMode = this.styledMode,
+                    states = (theme && theme.states) || {};
+                if (theme) {
+                    delete theme.states;
+                }
                 var curState = 0, 
                     // Make a copy of normalState (#13798)
                     // (reference to options.rangeSelector.buttonTheme)
                     normalState = theme ? merge(theme) : {};
-                var userNormalStyle = normalState && normalState.style || {};
+                var normalStyle = merge({
+                        color: "#333333" /* neutralColor80 */,
+                        cursor: 'pointer',
+                        fontWeight: 'normal'
+                    },
+                    normalState.style);
+                delete normalState.style;
                 // Remove stylable attributes
                 normalState = AST.filterUserAttributes(normalState);
                 // Default, non-stylable attributes
                 label.attr(merge({ padding: 8, r: 2 }, normalState));
-                // Presentational
-                var normalStyle,
-                    hoverStyle,
-                    pressedStyle,
+                // Presentational. The string type is a mistake, it is just for
+                // compliance with SVGAttribute and is not used in button theme.
+                var hoverStyle,
+                    selectStyle,
                     disabledStyle;
                 if (!styledMode) {
                     // Normal state - prepare the attributes
                     normalState = merge({
                         fill: "#f7f7f7" /* neutralColor3 */,
                         stroke: "#cccccc" /* neutralColor20 */,
-                        'stroke-width': 1,
-                        style: {
-                            color: "#333333" /* neutralColor80 */,
-                            cursor: 'pointer',
-                            fontWeight: 'normal'
-                        }
-                    }, {
-                        style: userNormalStyle
+                        'stroke-width': 1
                     }, normalState);
-                    normalStyle = normalState.style;
-                    delete normalState.style;
                     // Hover state
                     hoverState = merge(normalState, {
                         fill: "#e6e6e6" /* neutralColor10 */
-                    }, AST.filterUserAttributes(hoverState || {}));
+                    }, AST.filterUserAttributes(hoverState || states.hover || {}));
                     hoverStyle = hoverState.style;
                     delete hoverState.style;
                     // Pressed state
-                    pressedState = merge(normalState, {
+                    selectState = merge(normalState, {
                         fill: "#e6ebf5" /* highlightColor10 */,
                         style: {
                             color: "#000000" /* 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 */
                         }
-                    }, AST.filterUserAttributes(disabledState || {}));
+                    }, AST.filterUserAttributes(disabledState || states.disabled || {}));
                     disabledStyle = disabledState.style;
                     delete disabledState.style;
                 }
@@ -12838,15 +12948,18 @@
                             .attr([
                             normalState,
                             hoverState,
-                            pressedState,
+                            selectState,
                             disabledState
-                        ][state || 0])
-                            .css([
-                            normalStyle,
-                            hoverStyle,
-                            pressedStyle,
-                            disabledStyle
                         ][state || 0]);
+                        var css_1 = [
+                                normalStyle,
+                                hoverStyle,
+                                selectStyle,
+                                disabledStyle
+                            ][state || 0];
+                        if (isObject(css_1)) {
+                            label.css(css_1);
+                        }
                     }
                 };
                 // Presentational attributes
@@ -18486,11 +18599,11 @@
                     // Set the new position, and show or hide
                     if (show && isNumber(xy.y)) {
                         xy.opacity = opacity;
-                        label[tick.isNewLabel ? 'attr' : 'animate'](xy);
+                        label[tick.isNewLabel ? 'attr' : 'animate'](xy).show(true);
                         tick.isNewLabel = false;
                     }
                     else {
-                        label.attr('y', -9999); // #1338
+                        label.hide(); // #1338, #15863
                         tick.isNewLabel = true;
                     }
                 }
@@ -18590,7 +18703,6 @@
             error = U.error,
             extend = U.extend,
             fireEvent = U.fireEvent,
-            getMagnitude = U.getMagnitude,
             isArray = U.isArray,
             isNumber = U.isNumber,
             isString = U.isString,
@@ -18602,6 +18714,16 @@
             removeEvent = U.removeEvent,
             splat = U.splat,
             syncTimeout = U.syncTimeout;
+        var getNormalizedTickInterval = function (axis,
+            tickInterval) { return normalizeTickInterval(tickInterval,
+            void 0,
+            void 0,
+            pick(axis.options.allowDecimals, 
+            // If the tick interval is greather than 0.5, avoid decimals, as
+            // linear axes are often used to render discrete values (#3363). If
+            // a tick amount is set, allow decimals by default, as it increases
+            // the chances for a good fit.
+            tickInterval < 0.5 || axis.tickAmount !== void 0), !!axis.tickAmount); };
         /* *
          *
          *  Class
@@ -18648,7 +18770,6 @@
                 function Axis(chart, userOptions) {
                     this.alternateBands = void 0;
                 this.bottom = void 0;
-                this.categories = void 0;
                 this.chart = void 0;
                 this.closestPointRange = void 0;
                 this.coll = void 0;
@@ -18812,7 +18933,7 @@
                  * @type {Array<string>}
                  * @readonly
                  */
-                axis.categories = options.categories || axis.hasNames;
+                axis.categories = options.categories || (axis.hasNames ? [] : void 0);
                 if (!axis.names) { // Preserve on update (#3830)
                     axis.names = [];
                     axis.names.keys = {};
@@ -19151,8 +19272,9 @@
                     if (doPostTranslate) { // log, ordinal and broken axis
                         val = axis.val2lin(val);
                     }
+                    var value = sign * (val - localMin) * localA;
                     returnValue = isNumber(localMin) ?
-                        (sign * (val - localMin) * localA +
+                        ((!axis.isRadial ? correctFloat(value) : value) +
                             cvsOffset +
                             (sign * minPixelPadding) +
                             (isNumber(pointPlacement) ?
@@ -19546,20 +19668,20 @@
              * The X value that the point is given.
              */
             Axis.prototype.nameToX = function (point) {
-                var explicitCategories = isArray(this.categories),
+                var explicitCategories = isArray(this.options.categories),
                     names = explicitCategories ? this.categories : this.names;
                 var nameX = point.options.x,
                     x;
                 point.series.requireSorting = false;
                 if (!defined(nameX)) {
-                    nameX = this.options.uniqueNames ?
+                    nameX = this.options.uniqueNames && names ?
                         (explicitCategories ?
                             names.indexOf(point.name) :
                             pick(names.keys[point.name], -1)) :
                         point.series.autoIncrement();
                 }
                 if (nameX === -1) { // Not found in currenct categories
-                    if (!explicitCategories) {
+                    if (!explicitCategories && names) {
                         x = names.length;
                     }
                 }
@@ -19954,15 +20076,9 @@
                 if (!tickIntervalOption && axis.tickInterval < minTickInterval) {
                     axis.tickInterval = minTickInterval;
                 }
-                // for linear axes, get magnitude and normalize the interval
+                // For linear axes, normalize the interval
                 if (!axis.dateTime && !axis.logarithmic && !tickIntervalOption) {
-                    axis.tickInterval = normalizeTickInterval(axis.tickInterval, void 0, getMagnitude(axis.tickInterval), pick(options.allowDecimals, 
-                    // If the tick interval is greather than 0.5, avoid
-                    // decimals, as linear axes are often used to render
-                    // discrete values. #3363. If a tick amount is set, allow
-                    // decimals by default, as it increases the chances for a
-                    // good fit.
-                    axis.tickInterval < 0.5 || this.tickAmount !== void 0), !!this.tickAmount);
+                    axis.tickInterval = getNormalizedTickInterval(axis, axis.tickInterval);
                 }
                 // Prevent ticks from getting so close that we can't draw the labels
                 if (!this.tickAmount) {
@@ -20047,7 +20163,21 @@
                         tickPositions = axis.logarithmic.getLogTickPositions(this.tickInterval, this.min, this.max);
                     }
                     else {
-                        tickPositions = this.getLinearTickPositions(this.tickInterval, this.min, this.max);
+                        var startingTickInterval = this.tickInterval;
+                        var adjustedTickInterval = startingTickInterval;
+                        while (adjustedTickInterval <= startingTickInterval * 2) {
+                            tickPositions = this.getLinearTickPositions(this.tickInterval, this.min, this.max);
+                            // If there are more tick positions than the set tickAmount,
+                            // increase the tickInterval and continue until it fits.
+                            // (#17100)
+                            if (this.tickAmount &&
+                                tickPositions.length > this.tickAmount) {
+                                this.tickInterval = getNormalizedTickInterval(this, adjustedTickInterval *= 1.1);
+                            }
+                            else {
+                                break;
+                            }
+                        }
                     }
                     // Too dense ticks, keep only the first and last (#4477)
                     if (tickPositions.length > this.len) {
@@ -20146,39 +20276,92 @@
              */
             Axis.prototype.alignToOthers = function () {
                 var axis = this,
-                    others = // Whether there is another axis to pair with this one
-                     {},
-                    options = axis.options;
+                    alignedAxes = [this],
+                    options = axis.options,
+                    alignThresholds = (this.coll === 'yAxis' &&
+                        this.chart.options.chart.alignThresholds),
+                    thresholdAlignments = [];
                 var hasOther;
-                if (
-                // Only if alignTicks is true
-                this.chart.options.chart.alignTicks !== false &&
-                    options.alignTicks &&
+                axis.thresholdAlignment = void 0;
+                if ((
+                // Only if alignTicks or alignThresholds is true
+                (this.chart.options.chart.alignTicks !== false &&
+                    options.alignTicks) || (alignThresholds)) &&
                     // Disabled when startOnTick or endOnTick are false (#7604)
                     options.startOnTick !== false &&
                     options.endOnTick !== false &&
                     // Don't try to align ticks on a log axis, they are not evenly
                     // spaced (#6021)
                     !axis.logarithmic) {
-                    this.chart[this.coll].forEach(function (axis) {
-                        var otherOptions = axis.options, horiz = axis.horiz, key = [
-                                horiz ? otherOptions.left : otherOptions.top,
-                                otherOptions.width,
-                                otherOptions.height,
-                                otherOptions.pane
-                            ].join(',');
-                        if (axis.series.length) { // #4442
-                            if (others[key]) {
-                                hasOther = true; // #4201
-                            }
-                            else {
-                                others[key] = 1;
-                            }
+                    // Get a key identifying which pane the axis belongs to
+                    var getKey_1 = function (axis) {
+                            var horiz = axis.horiz,
+                        options = axis.options;
+                        return [
+                            horiz ? options.left : options.top,
+                            options.width,
+                            options.height,
+                            options.pane
+                        ].join(',');
+                    };
+                    var thisKey_1 = getKey_1(this);
+                    this.chart[this.coll].forEach(function (otherAxis) {
+                        var series = otherAxis.series;
+                        if (
+                        // #4442
+                        series.length &&
+                            series.some(function (s) { return s.visible; }) &&
+                            otherAxis !== axis &&
+                            getKey_1(otherAxis) === thisKey_1) {
+                            hasOther = true; // #4201
+                            alignedAxes.push(otherAxis);
                         }
                     });
                 }
+                if (hasOther && alignThresholds) {
+                    // Handle alignThresholds. The `thresholdAlignments` array keeps
+                    // records of where each axis in the group wants its threshold, from
+                    // 0 which is on `axis.min`, to 1 which is on `axis.max`.
+                    alignedAxes.forEach(function (otherAxis) {
+                        var threshAlign = otherAxis.getThresholdAlignment(axis);
+                        if (isNumber(threshAlign)) {
+                            thresholdAlignments.push(threshAlign);
+                        }
+                    });
+                    // For each of the axes in the group, record the average
+                    // `thresholdAlignment`.
+                    var thresholdAlignment_1 = thresholdAlignments.length > 1 ?
+                            thresholdAlignments.reduce(function (sum,
+                        n) { return (sum += n); }, 0) / thresholdAlignments.length :
+                            void 0;
+                    alignedAxes.forEach(function (axis) {
+                        axis.thresholdAlignment = thresholdAlignment_1;
+                    });
+                }
                 return hasOther;
             };
+            /**
+             * Where the axis wants its threshold, from 0 which is on `axis.min`, to 1 which
+             * is on `axis.max`.
+             *
+             * @private
+             * @function Highcharts.Axis#getThresholdAlignment
+             */
+            Axis.prototype.getThresholdAlignment = function (callerAxis) {
+                if (!isNumber(this.dataMin) ||
+                    (this !== callerAxis &&
+                        this.series.some(function (s) { return (s.isDirty || s.isDirtyData); }))) {
+                    this.getSeriesExtremes();
+                }
+                if (isNumber(this.threshold)) {
+                    var thresholdAlignment = clamp(((this.threshold - (this.dataMin || 0)) /
+                            ((this.dataMax || 0) - (this.dataMin || 0))), 0, 1);
+                    if (this.options.reversed) {
+                        thresholdAlignment = 1 - thresholdAlignment;
+                    }
+                    return thresholdAlignment;
+                }
+            };
             /**
              * Find the max ticks of either the x and y axis collection, and record it
              * in `this.tickAmount`.
@@ -20223,47 +20406,101 @@
              */
             Axis.prototype.adjustTickAmount = function () {
                 var axis = this,
-                    axisOptions = axis.options,
-                    tickInterval = axis.tickInterval,
+                    finalTickAmt = axis.finalTickAmt,
+                    max = axis.max,
+                    min = axis.min,
+                    options = axis.options,
                     tickPositions = axis.tickPositions,
                     tickAmount = axis.tickAmount,
-                    finalTickAmt = axis.finalTickAmt,
+                    thresholdAlignment = axis.thresholdAlignment,
                     currentTickAmount = tickPositions && tickPositions.length,
                     threshold = pick(axis.threshold,
                     axis.softThreshold ? 0 : null);
                 var len,
-                    i;
-                if (axis.hasData() &&
-                    isNumber(axis.min) &&
-                    isNumber(axis.max)) { // #14769
-                    if (currentTickAmount < tickAmount) {
+                    i,
+                    tickInterval = axis.tickInterval,
+                    thresholdTickIndex;
+                var 
+                    // Extend the tickPositions by appending a position
+                    append = function () { return tickPositions.push(correctFloat(tickPositions[tickPositions.length - 1] +
+                        tickInterval)); }, 
+                    // Extend the tickPositions by prepending a position
+                    prepend = function () { return tickPositions.unshift(correctFloat(tickPositions[0] - tickInterval)); };
+                // If `thresholdAlignment` is a number, it means the `alignThresholds`
+                // option is true. The `thresholdAlignment` is a scalar value between 0
+                // and 1 for where the threshold should be relative to `axis.min` and
+                // `axis.max`. Now that we know the tick amount, convert this to the
+                // tick index. Unless `thresholdAlignment` is exactly 0 or 1, avoid the
+                // first or last tick because that would lead to series being clipped.
+                if (isNumber(thresholdAlignment)) {
+                    thresholdTickIndex = thresholdAlignment < 0.5 ?
+                        Math.ceil(thresholdAlignment * (tickAmount - 1)) :
+                        Math.floor(thresholdAlignment * (tickAmount - 1));
+                    if (options.reversed) {
+                        thresholdTickIndex = tickAmount - 1 - thresholdTickIndex;
+                    }
+                }
+                if (axis.hasData() && isNumber(min) && isNumber(max)) { // #14769
+                    // Adjust extremes and translation to the modified tick positions
+                    var adjustExtremes = function () {
+                            axis.transA *= (currentTickAmount - 1) / (tickAmount - 1);
+                        // Do not crop when ticks are not extremes (#9841)
+                        axis.min = options.startOnTick ?
+                            tickPositions[0] :
+                            Math.min(min, tickPositions[0]);
+                        axis.max = options.endOnTick ?
+                            tickPositions[tickPositions.length - 1] :
+                            Math.max(max, tickPositions[tickPositions.length - 1]);
+                    };
+                    // When the axis is subject to the alignThresholds option. Use
+                    // axis.threshold because the local threshold includes the
+                    // `softThreshold`.
+                    if (isNumber(thresholdTickIndex) && isNumber(axis.threshold)) {
+                        // Throw away the previously computed tickPositions and start
+                        // from scratch with only the threshold itself, then add ticks
+                        // below the threshold first, then fill up above the threshold.
+                        // If we are not able to fill up to axis.max, double the
+                        // tickInterval and run again.
+                        while (tickPositions[thresholdTickIndex] !== threshold ||
+                            tickPositions.length !== tickAmount ||
+                            tickPositions[0] > min ||
+                            tickPositions[tickPositions.length - 1] < max) {
+                            tickPositions.length = 0;
+                            tickPositions.push(axis.threshold);
+                            while (tickPositions.length < tickAmount) {
+                                if (
+                                // Start by prepending positions until the threshold
+                                // is at the required index...
+                                tickPositions[thresholdTickIndex] === void 0 ||
+                                    tickPositions[thresholdTickIndex] > axis.threshold) {
+                                    prepend();
+                                }
+                                else {
+                                    // ... then append positions until we have the
+                                    // required length
+                                    append();
+                                }
+                            }
+                            // Safety vent
+                            if (tickInterval > axis.tickInterval * 8) {
+                                break;
+                            }
+                            tickInterval *= 2;
+                        }
+                        adjustExtremes();
+                    }
+                    else if (currentTickAmount < tickAmount) {
                         while (tickPositions.length < tickAmount) {
                             // Extend evenly for both sides unless we're on the
                             // threshold (#3965)
-                            if (tickPositions.length % 2 ||
-                                axis.min === threshold) {
-                                // to the end
-                                tickPositions.push(correctFloat(tickPositions[tickPositions.length - 1] +
-                                    tickInterval));
+                            if (tickPositions.length % 2 || min === threshold) {
+                                append();
                             }
                             else {
-                                // to the start
-                                tickPositions.unshift(correctFloat(tickPositions[0] - tickInterval));
+                                prepend();
                             }
                         }
-                        axis.transA *= (currentTickAmount - 1) / (tickAmount - 1);
-                        // Do not crop when ticks are not extremes (#9841)
-                        axis.min = axisOptions.startOnTick ?
-                            tickPositions[0] :
-                            Math.min(axis.min, tickPositions[0]);
-                        axis.max = axisOptions.endOnTick ?
-                            tickPositions[tickPositions.length - 1] :
-                            Math.max(axis.max, tickPositions[tickPositions.length - 1]);
-                        // We have too many ticks, run second pass to try to reduce ticks
-                    }
-                    else if (currentTickAmount > tickAmount) {
-                        axis.tickInterval *= 2;
-                        axis.setTickPositions();
+                        adjustExtremes();
                     }
                     // The finalTickAmt property is set in getTickAmount
                     if (defined(finalTickAmt)) {
@@ -21219,18 +21456,18 @@
                     // The part of a multiline text that is below the baseline of the
                     // first line. Subtract 1 to preserve pixel-perfectness from the
                     // old behaviour (v5.0.12), where only one line was allowed.
-                    textHeightOvershoot = Math.max(axisTitle.getBBox(null, 0).height - fontMetrics.h - 1, 0), 
+                    textHeightOvershoot = axisTitle ? Math.max(axisTitle.getBBox(false, 0).height - fontMetrics.h - 1, 0) : 0, 
                     // the position in the length direction of the axis
-                    alongAxis = {
+                    alongAxis = ({
                         low: margin + (horiz ? 0 : axisLength),
                         middle: margin + axisLength / 2,
                         high: margin + (horiz ? axisLength : 0)
-                    }[axisTitleOptions.align], 
+                    })[axisTitleOptions.align], 
                     // the position in the perpendicular direction of the axis
                     offAxis = (horiz ? axisTop + this.height : axisLeft) +
                         (horiz ? 1 : -1) * // horizontal axis reverses the margin
                             (opposite ? -1 : 1) * // so does opposite axes
-                            this.axisTitleMargin +
+                            (this.axisTitleMargin || 0) +
                         [
                             -textHeightOvershoot,
                             textHeightOvershoot,
@@ -21454,14 +21691,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) {
@@ -22469,7 +22700,7 @@
                                 axisLength;
                         interval = pick(filteredTickIntervalOption, log.minorAutoInterval, (realMax - realMin) *
                             tickPixelIntervalOption / (totalPixelLength || 1));
-                        interval = normalizeTickInterval(interval, void 0, getMagnitude(interval));
+                        interval = normalizeTickInterval(interval);
                         positions = axis.getLinearTickPositions(interval, realMin, realMax).map(log.log2lin);
                         if (!minor) {
                             log.minorAutoInterval = interval / 5;
@@ -22969,7 +23200,7 @@
                 }
                 else if (svgElem) {
                     if (path) {
-                        svgElem.show(true);
+                        svgElem.show();
                         svgElem.animate({ d: path });
                     }
                     else if (svgElem.d) {
@@ -23869,6 +24100,12 @@
              * the context here is an object holding point, series, x, y etc.
              *
              * @function Highcharts.Tooltip#defaultFormatter
+             *
+             * @param {Highcharts.Tooltip} tooltip
+             *
+             * @return {string|Array<string>}
+             * Returns a string (single tooltip and shared)
+             * or an array of strings (split tooltip)
              */
             Tooltip.prototype.defaultFormatter = function (tooltip) {
                 var items = this.points || splat(this);
@@ -24471,7 +24708,7 @@
                     shared = tooltip.shared,
                     styledMode = chart.styledMode;
                 var textConfig = {};
-                if (!options.enabled) {
+                if (!options.enabled || !point.series) { // #16820
                     return;
                 }
                 U.clearTimeout(this.hideTimer);
@@ -25127,46 +25364,23 @@
          * @callback Highcharts.TooltipFormatterCallbackFunction
          *
          * @param {Highcharts.TooltipFormatterContextObject} this
-         *        Context to format
+         * Context to format
          *
          * @param {Highcharts.Tooltip} tooltip
-         *        The tooltip instance
+         * The tooltip instance
          *
          * @return {false|string|Array<(string|null|undefined)>|null|undefined}
-         *         Formatted text or false
+         * Formatted text or false
          */
         /**
+         * Configuration for the tooltip formatters.
+         *
          * @interface Highcharts.TooltipFormatterContextObject
+         * @extends Highcharts.PointLabelObject
          */ /**
-        * @name Highcharts.TooltipFormatterContextObject#color
-        * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
-        */ /**
-        * @name Highcharts.TooltipFormatterContextObject#colorIndex
-        * @type {number|undefined}
-        */ /**
-        * @name Highcharts.TooltipFormatterContextObject#key
-        * @type {number}
-        */ /**
-        * @name Highcharts.TooltipFormatterContextObject#percentage
-        * @type {number|undefined}
-        */ /**
-        * @name Highcharts.TooltipFormatterContextObject#point
-        * @type {Highcharts.Point}
-        */ /**
+        * Array of points in shared tooltips.
         * @name Highcharts.TooltipFormatterContextObject#points
         * @type {Array<Highcharts.TooltipFormatterContextObject>|undefined}
-        */ /**
-        * @name Highcharts.TooltipFormatterContextObject#series
-        * @type {Highcharts.Series}
-        */ /**
-        * @name Highcharts.TooltipFormatterContextObject#total
-        * @type {number|undefined}
-        */ /**
-        * @name Highcharts.TooltipFormatterContextObject#x
-        * @type {number}
-        */ /**
-        * @name Highcharts.TooltipFormatterContextObject#y
-        * @type {number}
         */
         /**
          * A callback function to place the tooltip in a specific position.
@@ -26422,7 +26636,7 @@
         * @type {Highcharts.Point}
         */
         /**
-         * Configuration hash for the data label and tooltip formatters.
+         * Configuration for the data label and tooltip formatters.
          *
          * @interface Highcharts.PointLabelObject
          */ /**
@@ -26464,7 +26678,7 @@
         */ /**
         * The y value of the point.
         * @name Highcharts.PointLabelObject#y
-        * @type {number|undefined}
+        * @type {number|null|undefined}
         */
         /**
          * Gets fired when the mouse leaves the area close to the point.
@@ -27244,9 +27458,10 @@
              * name.
              */
             Pointer.prototype.inClass = function (element, className) {
-                var elemClassName;
-                while (element) {
-                    elemClassName = attr(element, 'class');
+                var elem = element,
+                    elemClassName;
+                while (elem) {
+                    elemClassName = attr(elem, 'class');
                     if (elemClassName) {
                         if (elemClassName.indexOf(className) !== -1) {
                             return true;
@@ -27255,7 +27470,7 @@
                             return false;
                         }
                     }
-                    element = element.parentNode;
+                    elem = elem.parentElement;
                 }
             };
             /**
@@ -27296,6 +27511,9 @@
              * properties `chartX` and `chartY` in order to work on the internal
              * coordinate system.
              *
+             * On map charts, the properties `lon` and `lat` are added to the event
+             * object given that the chart has projection information.
+             *
              * @function Highcharts.Pointer#normalize
              *
              * @param {global.MouseEvent|global.PointerEvent|global.TouchEvent} e
@@ -27891,11 +28109,12 @@
                      * The mouseOver event should be triggered when hoverPoint
                      * is correct.
                      */
-                    hoverPoint.firePointEvent('mouseOver');
-                    // Draw tooltip if necessary
-                    if (tooltip) {
-                        tooltip.refresh(useSharedTooltip ? points : hoverPoint, e);
-                    }
+                    hoverPoint.firePointEvent('mouseOver', void 0, function () {
+                        // Draw tooltip if necessary
+                        if (tooltip && hoverPoint) {
+                            tooltip.refresh(useSharedTooltip ? points : hoverPoint, e);
+                        }
+                    });
                     // Update positions (regardless of kdpoint or hoverPoint)
                 }
                 else if (followPointer && tooltip && !tooltip.isHidden) {
@@ -27926,7 +28145,7 @@
                         point = chart.hoverPoint; // #13002
                         if (!point || point.series[axis.coll] !== axis) {
                             point = find(points, function (p) {
-                                return p.series[axis.coll] === axis;
+                                return p.series && p.series[axis.coll] === axis;
                             });
                         }
                     }
@@ -28015,7 +28234,7 @@
                 var hoverChart = H.charts[pick(Pointer.hoverChartIndex, -1)];
                 if (hoverChart &&
                     hoverChart !== chart) {
-                    hoverChart.pointer.onContainerMouseLeave({ relatedTarget: true });
+                    hoverChart.pointer.onContainerMouseLeave({ relatedTarget: chart.container });
                 }
                 if (!hoverChart ||
                     !hoverChart.mouseIsDown) {
@@ -28477,7 +28696,7 @@
                 this.maxItemWidth = 0;
                 this.maxLegendWidth = 0;
                 this.offsetWidth = 0;
-                this.options = {};
+                this.options = void 0;
                 this.padding = 0;
                 this.pages = [];
                 this.proximate = false;
@@ -28808,7 +29027,7 @@
                          * @name Highcharts.Legend#title
                          * @type {Highcharts.SVGElement}
                          */
-                        this.title = this.chart.renderer.label(titleOptions.text, padding - 3, padding - 4, null, null, null, options.useHTML, null, 'legend-title')
+                        this.title = this.chart.renderer.label(titleOptions.text, padding - 3, padding - 4, void 0, void 0, void 0, options.useHTML, void 0, 'legend-title')
                             .attr({ zIndex: 1 });
                         if (!this.chart.styledMode) {
                             this.title.css(titleOptions.style);
@@ -29175,8 +29394,7 @@
                 legend.lastItemY = 0;
                 legend.widthOption = relativeLength(options.width, chart.spacingBox.width - padding);
                 // Compute how wide the legend is allowed to be
-                allowedWidth =
-                    chart.spacingBox.width - 2 * padding - options.x;
+                allowedWidth = chart.spacingBox.width - 2 * padding - options.x;
                 if (['rm', 'lm'].indexOf(legend.getAlignment().substring(0, 2)) > -1) {
                     allowedWidth /= 2;
                 }
@@ -29249,7 +29467,6 @@
                         r: options.borderRadius
                     })
                         .add(legendGroup);
-                    box.isNew = true;
                 }
                 // Presentational
                 if (!chart.styledMode) {
@@ -29262,13 +29479,12 @@
                         .shadow(options.shadow);
                 }
                 if (legendWidth > 0 && legendHeight > 0) {
-                    box[box.isNew ? 'attr' : 'animate'](box.crisp.call({}, {
+                    box[box.placed ? 'animate' : 'attr'](box.crisp.call({}, {
                         x: 0,
                         y: 0,
                         width: legendWidth,
                         height: legendHeight
                     }, box.strokeWidth()));
-                    box.isNew = false;
                 }
                 // hide the border if no items
                 box[display ? 'show' : 'hide']();
@@ -29311,6 +29527,11 @@
                 if (y !== alignTo.y) {
                     alignTo = merge(alignTo, { y: y });
                 }
+                if (!chart.hasRendered) {
+                    // Avoid animation when adjusting alignment for responsiveness and
+                    // colorAxis label layout
+                    this.group.placed = false;
+                }
                 this.group.align(merge(options, {
                     width: this.legendWidth,
                     height: this.legendHeight,
@@ -29444,7 +29665,7 @@
                         });
                         this.pager = renderer.text('', 15, 10)
                             .addClass('highcharts-legend-navigation');
-                        if (!chart.styledMode) {
+                        if (!chart.styledMode && navOptions.style) {
                             this.pager.css(navOptions.style);
                         }
                         this.pager.add(nav);
@@ -29505,7 +29726,7 @@
                     this.nav.attr({
                         translateX: padding,
                         translateY: clipHeight + this.padding + 7 + this.titleHeight,
-                        visibility: 'visible'
+                        visibility: 'inherit'
                     });
                     [this.up, this.upTracker].forEach(function (elem) {
                         elem.attr({
@@ -29957,7 +30178,6 @@
             fireEvent = U.fireEvent,
             getStyle = U.getStyle,
             isArray = U.isArray,
-            isFunction = U.isFunction,
             isNumber = U.isNumber,
             isObject = U.isObject,
             isString = U.isString,
@@ -32003,9 +32223,27 @@
                 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 _this = this;
+                setTimeout(function () {
+                    var opts = _this && _this.options;
+                    if (opts && !_this.accessibility &&
+                        !(opts.accessibility && opts.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);
+                    }
+                }, 100);
+            };
             /**
              * Add a series to the chart after render time. Note that this method should
              * never be used when adding data synchronously at chart render time, as it
@@ -32570,7 +32808,6 @@
                     lang = defaultOptions.lang,
                     btnOptions = chart.options.chart.resetZoomButton,
                     theme = btnOptions.theme,
-                    states = theme.states,
                     alignTo = (btnOptions.relativeTo === 'chart' ||
                         btnOptions.relativeTo === 'spacingBox' ?
                         null :
@@ -32583,7 +32820,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
@@ -34381,6 +34618,9 @@
                      * parameter, `event`, is passed to the function, containing common
                      * event information.
                      *
+                     * Returning `false` cancels the default behavior, which is to show a
+                     * tooltip for the point.
+                     *
                      * @sample {highcharts} highcharts/plotoptions/series-point-events-mouseover/
                      *         Show values in the chart's corner on mouse over
                      *
@@ -35103,7 +35343,7 @@
                      * @deprecated
                      *
                      * @extends   plotOptions.series.marker
-                     * @excluding states
+                     * @excluding states, symbol
                      * @product   highcharts highstock
                      */
                     marker: {
@@ -36319,8 +36559,19 @@
                     updatedData,
                     indexOfX = 0,
                     indexOfY = 1,
-                    firstPoint = null;
-                data = data || [];
+                    firstPoint = null,
+                    copiedData;
+                if (!chart.options.chart.allowMutatingData) { // #4259
+                    // Remove old reference
+                    if (options.data) {
+                        delete series.options.data;
+                    }
+                    if (series.userOptions.data) {
+                        delete series.userOptions.data;
+                    }
+                    copiedData = merge(true, data);
+                }
+                data = copiedData || data || [];
                 var dataLength = data.length;
                 redraw = pick(redraw, true);
                 if (dataSorting && dataSorting.enabled) {
@@ -36328,7 +36579,8 @@
                 }
                 // First try to run Point.update which is cheaper, allows animation,
                 // and keeps references to points.
-                if (updatePoints !== false &&
+                if (chart.options.chart.allowMutatingData &&
+                    updatePoints !== false &&
                     dataLength &&
                     oldDataLength &&
                     !series.cropped &&
@@ -36553,7 +36805,7 @@
                     xExtremes = xAxis.getExtremes();
                     min = xExtremes.min;
                     max = xExtremes.max;
-                    updatingNames = xAxis.categories && !xAxis.names.length;
+                    updatingNames = !!(xAxis.categories && !xAxis.names.length);
                 }
                 // optionally filter out points outside the plot area
                 if (isCartesian &&
@@ -36687,7 +36939,7 @@
             Series.prototype.generatePoints = function () {
                 var series = this,
                     options = series.options,
-                    dataOptions = options.data,
+                    dataOptions = (series.processedData || options.data),
                     processedXData = series.processedXData,
                     processedYData = series.processedYData,
                     PointClass = series.pointClass,
@@ -37020,8 +37272,16 @@
                             !xAxis.validatePositiveValue(xValue)) {
                         point.isNull = true;
                     }
-                    // Get the plotX translation
+                    /**
+                     * The translated X value for the point in terms of pixels. Relative
+                     * to the X axis position if the series has one, otherwise relative
+                     * to the plot area. Depending on the series type this value might
+                     * not be defined.
+                     * @name Highcharts.Point#plotX
+                     * @type {number|undefined}
+                     */
                     point.plotX = plotX = correctFloat(// #5236
+                    // Get the plotX translation
                     limitedRange(xAxis.translate(// #3923
                     xValue, 0, 0, 0, 1, pointPlacement, this.type === 'flags')) // #3923
                     );
@@ -37082,6 +37342,14 @@
                             false,
                             true);
                         if (typeof translated !== 'undefined') {
+                            /**
+                             * The translated Y value for the point in terms of pixels.
+                             * Relative to the Y axis position if the series has one,
+                             * otherwise relative to the plot area. Depending on the
+                             * series type this value might not be defined.
+                             * @name Highcharts.Point#plotY
+                             * @type {number|undefined}
+                             */
                             point.plotY = limitedRange(translated);
                         }
                     }
@@ -37096,10 +37364,7 @@
                         threshold ||
                         0);
                     // some API data
-                    point.category = (categories &&
-                        typeof categories[point.x] !== 'undefined' ?
-                        categories[point.x] :
-                        point.x);
+                    point.category = pick(categories && categories[point.x], point.x);
                     // Determine auto enabling of markers (#3635, #5099)
                     if (!point.isNull && point.visible !== false) {
                         if (typeof lastPlotX !== 'undefined') {
@@ -37450,26 +37715,26 @@
                 var seriesStateOptions,
                     pointStateOptions,
                     radius = pick(pointMarkerOptions.radius,
-                    seriesMarkerOptions.radius);
+                    seriesMarkerOptions && seriesMarkerOptions.radius);
                 // Handle hover and select states
                 if (state) {
                     seriesStateOptions = seriesMarkerOptions.states[state];
                     pointStateOptions = pointMarkerOptions.states &&
                         pointMarkerOptions.states[state];
-                    radius = pick(pointStateOptions && pointStateOptions.radius, seriesStateOptions && seriesStateOptions.radius, radius + (seriesStateOptions && seriesStateOptions.radiusPlus ||
+                    radius = pick(pointStateOptions && pointStateOptions.radius, seriesStateOptions && seriesStateOptions.radius, radius && radius + (seriesStateOptions && seriesStateOptions.radiusPlus ||
                         0));
                 }
                 point.hasImage = symbol && symbol.indexOf('url') === 0;
                 if (point.hasImage) {
                     radius = 0; // and subsequently width and height is not set
                 }
-                var attribs = {
+                var attribs = isNumber(radius) ? {
                         // Math.floor for #1843:
                         x: seriesOptions.crisp ?
                             Math.floor(point.plotX - radius) :
                             point.plotX - radius,
                         y: point.plotY - radius
-                    };
+                    } : {};
                 if (radius) {
                     attribs.width = attribs.height = 2 * radius;
                 }
@@ -37559,7 +37824,7 @@
                     point,
                     axis;
                 // add event hook
-                fireEvent(series, 'destroy');
+                fireEvent(series, 'destroy', { keepEventsForUpdate: keepEventsForUpdate });
                 // remove events
                 this.removeEvents(keepEventsForUpdate);
                 // erase from axes
@@ -37746,10 +38011,10 @@
                 else if (series.visible) {
                     // If zones were removed, restore graph and area
                     if (graph) {
-                        graph.show(true);
+                        graph.show();
                     }
                     if (area) {
-                        area.show(true);
+                        area.show();
                     }
                 }
             };
@@ -38243,7 +38508,7 @@
                 else if (series.graph) { // create
                     series.tracker = renderer.path(trackerPath)
                         .attr({
-                        visibility: series.visible ? 'visible' : 'hidden',
+                        visibility: series.visible ? 'inherit' : 'hidden',
                         zIndex: 2
                     })
                         .addClass(trackByArea ?
@@ -38369,7 +38634,10 @@
                     names[x] = point.name;
                 }
                 dataOptions.splice(i, 0, options);
-                if (isInTheMiddle) {
+                if (isInTheMiddle ||
+                    // When processedData is present we need to splice an empty slot
+                    // into series.data, otherwise generatePoints won't pick it up.
+                    series.processedData) {
                     series.data.splice(i, 0, null);
                     series.processData();
                 }
@@ -38574,6 +38842,8 @@
                         typeof options.pointStart !== 'undefined' ||
                         typeof options.pointInterval !== 'undefined' ||
                         typeof options.relativeXValue !== 'undefined' ||
+                        options.joinBy ||
+                        options.mapData || // #11636
                         // Changes to data grouping requires new points in new group
                         series.hasOptionChanged('dataGrouping') ||
                         series.hasOptionChanged('pointStart') ||
@@ -38582,9 +38852,12 @@
                         series.hasOptionChanged('keys'));
                 newType = newType || initialType;
                 if (keepPoints) {
-                    preserve.push('data', 'isDirtyData', 'points', 'processedXData', 'processedYData', 'xIncrement', 'cropped', '_hasPointMarkers', '_hasPointLabels', 'clips', // #15420
+                    preserve.push('data', 'isDirtyData', 'points', 'processedData', // #17057
+                    'processedXData', 'processedYData', 'xIncrement', 'cropped', '_hasPointMarkers', '_hasPointLabels', 'clips', // #15420
                     // Networkgraph (#14397)
                     'nodes', 'layout', 
+                    // Treemap
+                    'level', 
                     // Map specific, consider moving it to series-specific preserve-
                     // properties (#10617)
                     'mapMap', 'mapData', 'minY', 'maxY', 'minX', 'maxX');
@@ -38636,8 +38909,6 @@
                     series.remove(false, false, false, true);
                     if (casting) {
                         // Modern browsers including IE11
-                        // @todo slow, consider alternatives mentioned:
-                        // https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/setPrototypeOf
                         if (Object.setPrototypeOf) {
                             Object.setPrototypeOf(series, seriesTypes[newType].prototype);
                             // Legacy (IE < 11)
@@ -39696,7 +39967,7 @@
                     .addClass('highcharts-scrollable-mask')
                     .add();
                 addEvent(this, 'afterShowResetZoom', this.moveFixedElements);
-                addEvent(this, 'afterDrilldown', this.moveFixedElements);
+                addEvent(this, 'afterApplyDrilldown', this.moveFixedElements);
                 addEvent(this, 'afterLayOutTitles', this.moveFixedElements);
             }
             else {
@@ -39824,6 +40095,7 @@
          * area will become scrollable.
          *
          * @type      {number}
+         * @since     7.1.2
          * @apioption chart.scrollablePlotArea.minHeight
          */
         /**
@@ -39831,6 +40103,7 @@
          * area will become scrollable.
          *
          * @type      {number}
+         * @since     6.1.0
          * @apioption chart.scrollablePlotArea.minWidth
          */
         /**
@@ -39839,6 +40112,7 @@
          * Typically we would use 1 if the chart has right aligned Y axes.
          *
          * @type      {number}
+         * @since     6.1.0
          * @apioption chart.scrollablePlotArea.scrollPositionX
          */
         /**
@@ -39846,6 +40120,7 @@
          * 1, where 0 aligns the plot area to the top and 1 aligns it to the bottom.
          *
          * @type      {number}
+         * @since     7.1.2
          * @apioption chart.scrollablePlotArea.scrollPositionY
          */
         /**
@@ -40063,7 +40338,6 @@
                             renderer
                                 .g('stack-labels')
                                 .attr({
-                                visibility: 'visible',
                                 zIndex: 6,
                                 opacity: 0
                             })
@@ -40299,7 +40573,7 @@
                     }
                     else {
                         // Move label away to avoid the overlapping issues
-                        label.alignAttr.y = -9999;
+                        label.hide();
                         isJustify = false;
                     }
                     if (isJustify) {
@@ -40586,11 +40860,12 @@
             // changed:
             if (!defined(stackIndicator) ||
                 stackIndicator.x !== x ||
-                (key && stackIndicator.key !== key)) {
+                (key && stackIndicator.stackKey !== key)) {
                 stackIndicator = {
                     x: x,
                     index: 0,
-                    key: key
+                    key: key,
+                    stackKey: key
                 };
             }
             else {
@@ -42600,8 +42875,9 @@
                 var _this = this;
                 var stacking = this.options.stacking;
                 if (!point.isNull && metrics.columnCount > 1) {
-                    var indexInCategory_1 = 0;
-                    var totalInCategory_1 = 0;
+                    var reversedStacks_1 = this.yAxis.options.reversedStacks;
+                    var indexInCategory_1 = 0,
+                        totalInCategory_1 = reversedStacks_1 ? 0 : -metrics.columnCount;
                     // Loop over all the stacks on the Y axis. When stacking is enabled,
                     // these are real point stacks. When stacking is not enabled, but
                     // `centerInCategory` is true, there is one stack handling the
@@ -42622,7 +42898,8 @@
                                         indexInCategory_1 = totalInCategory_1;
                                     }
                                     if (stackItem.hasValidPoints) {
-                                        totalInCategory_1++;
+                                        reversedStacks_1 ? // #16169
+                                            totalInCategory_1++ : totalInCategory_1--;
                                     }
                                     // If `stacking` is not enabled, look for the index
                                     // and total of the `group` stack.
@@ -43602,17 +43879,18 @@
                     inverted = this.isCartesian && chart.inverted,
                     enabledDataSorting = this.enabledDataSorting,
                     plotX = pick(point.dlBox && point.dlBox.centerX,
-                    point.plotX, -9999),
-                    plotY = pick(point.plotY, -9999),
-                    bBox = dataLabel.getBBox(),
+                    point.plotX),
+                    plotY = point.plotY,
                     rotation = options.rotation,
                     align = options.align,
-                    isInsidePlot = chart.isInsidePlot(plotX,
+                    isInsidePlot = defined(plotX) &&
+                        defined(plotY) &&
+                        chart.isInsidePlot(plotX,
                     Math.round(plotY), {
-                        inverted: inverted,
-                        paneCoordinates: true,
-                        series: series
-                    }),
+                            inverted: inverted,
+                            paneCoordinates: true,
+                            series: series
+                        }),
                     setStartPos = function (alignOptions) {
                         if (enabledDataSorting && series.xAxis && !justify) {
                             series.setDataLabelStartPos(point,
@@ -43623,8 +43901,6 @@
                     }
                 };
                 var baseline,
-                    normRotation,
-                    negRotation,
                     rotCorr, // rotation correction
                     // Math.round for rounding errors (#2683), alignTo to allow column
                     // labels (#2700)
@@ -43648,7 +43924,12 @@
                                 paneCoordinates: true,
                                 series: series
                             })));
-                if (visible) {
+                if (visible && defined(plotX) && defined(plotY)) {
+                    if (rotation) {
+                        dataLabel.attr({ align: align });
+                    }
+                    var bBox = dataLabel.getBBox(true),
+                        bBoxCorrection = [0, 0];
                     baseline = chart.renderer.fontMetrics(chart.styledMode ? void 0 : options.style.fontSize, dataLabel).b;
                     // The alignment box is a singular point
                     alignTo = extend({
@@ -43677,27 +43958,12 @@
                                 { top: 0, middle: 0.5, bottom: 1 }[options.verticalAlign] *
                                     alignTo.height)
                         };
+                        bBoxCorrection = [
+                            bBox.x - Number(dataLabel.attr('x')),
+                            bBox.y - Number(dataLabel.attr('y'))
+                        ];
                         setStartPos(alignAttr); // data sorting
-                        dataLabel[isNew ? 'attr' : 'animate'](alignAttr)
-                            .attr({
-                            align: align
-                        });
-                        // Compensate for the rotated label sticking out on the sides
-                        normRotation = (rotation + 720) % 360;
-                        negRotation = normRotation > 180 && normRotation < 360;
-                        if (align === 'left') {
-                            alignAttr.y -= negRotation ? bBox.height : 0;
-                        }
-                        else if (align === 'center') {
-                            alignAttr.x -= bBox.width / 2;
-                            alignAttr.y -= bBox.height / 2;
-                        }
-                        else if (align === 'right') {
-                            alignAttr.x -= bBox.width;
-                            alignAttr.y -= negRotation ? 0 : bBox.height;
-                        }
-                        dataLabel.placed = true;
-                        dataLabel.alignAttr = alignAttr;
+                        dataLabel[isNew ? 'attr' : 'animate'](alignAttr);
                     }
                     else {
                         setStartPos(alignTo); // data sorting
@@ -43710,12 +43976,37 @@
                         // Now check that the data label is within the plot area
                     }
                     else if (pick(options.crop, true)) {
+                        var x = alignAttr.x,
+                            y = alignAttr.y;
+                        x += bBoxCorrection[0];
+                        y += bBoxCorrection[1];
+                        // Uncomment this block to visualize the bounding boxes used for
+                        // determining visibility
+                        /*
+                        chart.renderer.rect(
+                            chart.plotLeft + alignAttr.x + bBox.x,
+                            chart.plotTop + alignAttr.y + bBox.y + 9999,
+                            bBox.width,
+                            bBox.height
+                        ).attr({
+                            stroke: 'rgba(0, 0, 0, 0.3)',
+                            'stroke-width': 0.5
+                        }).add();
+                        chart.renderer.circle(
+                            chart.plotLeft + alignAttr.x,
+                            chart.plotTop + alignAttr.y,
+                            2
+                        ).attr({
+                            fill: 'red',
+                            zIndex: 20
+                        }).add();
+                        // */
                         visible =
-                            chart.isInsidePlot(alignAttr.x, alignAttr.y, {
+                            chart.isInsidePlot(x, y, {
                                 paneCoordinates: true,
                                 series: series
                             }) &&
-                                chart.isInsidePlot(alignAttr.x + bBox.width, alignAttr.y + bBox.height, {
+                                chart.isInsidePlot(x + bBox.width, y + bBox.height, {
                                     paneCoordinates: true,
                                     series: series
                                 });
@@ -43739,9 +44030,12 @@
                 }
                 // Show or hide based on the final aligned position
                 if (!visible && (!enabledDataSorting || justify)) {
-                    dataLabel.hide(true);
+                    dataLabel.hide();
                     dataLabel.placed = false; // don't animate back in
                 }
+                else {
+                    dataLabel.show();
+                }
             }
             /**
              * Handle the dataLabels.filter option.
@@ -43818,7 +44112,7 @@
                         var group = series.dataLabelsGroup;
                         if (group) {
                             if (series.visible) { // #2597, #3023, #3024
-                                dataLabelsGroup.show(true);
+                                dataLabelsGroup.show();
                             }
                             group[seriesOptions.animation ? 'animate' : 'attr']({ opacity: 1 }, animationConfig);
                         }
@@ -43850,10 +44144,10 @@
                                 rotation,
                                 attr,
                                 dataLabel = point.dataLabels ?
-                                    point.dataLabels[i] : point.dataLabel;
-                            var labelDistance = pick(labelOptions.distance,
-                                point.labelDistance),
+                                    point.dataLabels[i] : point.dataLabel,
                                 isNew = !dataLabel;
+                            var labelDistance = pick(labelOptions.distance,
+                                point.labelDistance);
                             if (labelEnabled) {
                                 // Create individual options structure that can be
                                 // extended without affecting others
@@ -43907,7 +44201,15 @@
                             // #820
                             if (dataLabel && (!labelEnabled ||
                                 !defined(labelText) ||
-                                !!dataLabel.div !== !!labelOptions.useHTML)) {
+                                !!dataLabel.div !== !!labelOptions.useHTML ||
+                                (
+                                // Change from no rotation to rotation and
+                                // vice versa. Don't use defined() because
+                                // rotation = 0 means also rotation = undefined
+                                (!dataLabel.rotation ||
+                                    !labelOptions.rotation) &&
+                                    dataLabel.rotation !== labelOptions.rotation))) {
+                                isNew = true;
                                 point.dataLabel = dataLabel =
                                     point.dataLabel && point.dataLabel.destroy();
                                 if (point.dataLabels) {
@@ -43945,10 +44247,10 @@
                                     point.dataLabels = point.dataLabels || [];
                                     dataLabel = point.dataLabels[i] = rotation ?
                                         // Labels don't rotate, use text element
-                                        renderer.text(labelText, 0, -9999, labelOptions.useHTML)
+                                        renderer.text(labelText, 0, 0, labelOptions.useHTML)
                                             .addClass('highcharts-data-label') :
                                         // We can use label
-                                        renderer.label(labelText, 0, -9999, labelOptions.shape, null, null, labelOptions.useHTML, null, 'data-label');
+                                        renderer.label(labelText, 0, 0, labelOptions.shape, null, null, labelOptions.useHTML, null, 'data-label');
                                     // Store for backwards compatibility
                                     if (!i) {
                                         point.dataLabel = dataLabel;
@@ -43989,6 +44291,9 @@
                                 // we need to align it
                                 series.alignDataLabel(point, dataLabel, labelOptions, null, isNew);
                             }
+                            else if (dataLabel) {
+                                dataLabel.hide();
+                            }
                         });
                     });
                 }
@@ -44661,7 +44966,7 @@
                  *
                  * @type      {boolean}
                  * @default   false
-                 * @product   highcharts highstock
+                 * @product   highcharts highstock highmaps
                  * @apioption plotOptions.scatter.stickyTracking
                  */
                 /**
@@ -44827,7 +45132,8 @@
                     plotHeight = chart.plotHeight - 2 * slicingRoom,
                     centerOption = options.center,
                     smallestSize = Math.min(plotWidth,
-                    plotHeight);
+                    plotHeight),
+                    thickness = options.thickness;
                 var handleSlicingRoom,
                     size = options.size,
                     innerSize = options.innerSize || 0,
@@ -44864,6 +45170,11 @@
                 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;
+                }
                 return positions;
             }
             CenteredUtilities.getCenter = getCenter;
@@ -45051,12 +45362,19 @@
                 return isNumber(this.y) && this.y >= 0;
             };
             /**
-             * Toggle the visibility of the pie slice.
-             * @private
+             * Toggle the visibility of a pie slice or other data point. Note that this
+             * method is available only for some series, like pie, treemap and sunburst.
+             *
+             * @function Highcharts.Point#setVisible
+             *
+             * @param {boolean} [vis]
+             * True to show the pie slice or other data point, false to hide. If
+             * undefined, the visibility is toggled.
+             *
+             * @param {boolean} [redraw] Whether to redraw the chart after the point is
+             * altered. If doing more operations on the chart, it is a good idea to set
+             * redraw to false and call {@link Chart#redraw|chart.redraw()} after.
              *
-             * @param {boolean} vis
-             * Whether to show the slice or not. If undefined, the visibility is
-             * toggled.
              */
             PiePoint.prototype.setVisible = function (vis, redraw) {
                 var _this = this;
@@ -46000,6 +46318,17 @@
                  * @product   highcharts
                  * @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
@@ -46027,7 +46356,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
@@ -46789,7 +47118,9 @@
                     if (newSize < center[2]) {
                         center[2] = newSize;
                         center[3] = Math.min(// #3632
-                        relativeLength(options.innerSize || 0, newSize), newSize);
+                        options.thickness ?
+                            Math.max(0, newSize - options.thickness * 2) :
+                            Math.max(0, relativeLength(options.innerSize || 0, newSize)), newSize); // #6647
                         this.translate(center);
                         if (this.drawDataLabels) {
                             this.drawDataLabels();
@@ -46852,9 +47183,7 @@
                     !yAxis.options.stackLabels.allowOverlap) {
                     objectEach(yAxis.stacking.stacks, function (stack) {
                         objectEach(stack, function (stackItem) {
-                            if (stackItem.label &&
-                                stackItem.label.visibility !== 'hidden' // #15607
-                            ) {
+                            if (stackItem.label) {
                                 labels.push(stackItem.label);
                             }
                         });
@@ -46998,7 +47327,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;
@@ -47967,9 +48299,11 @@
                         // how many ordinal units did we move?
                         movedUnits = (mouseDownX - chartX) / pointPixelWidth, 
                         // get index of all the chart's points
+                        extendedOrdinalPositions = xAxis.ordinal.getExtendedPositions(),
                         extendedAxis = {
                             ordinal: {
-                                positions: xAxis.ordinal.getExtendedPositions()
+                                positions: extendedOrdinalPositions,
+                                extendedOrdinalPositions: extendedOrdinalPositions
                             }
                         },
                         index2val_1 = xAxis.index2val,
@@ -49100,6 +49434,7 @@
          * @type      {string}
          * @since     1.0.1
          * @product   highstock
+         * @validvalue ["percent", "value"]
          * @apioption plotOptions.series.compare
          */
         /**
@@ -50542,9 +50877,11 @@
         Axis.prototype.applyGrouping = function (e) {
             var axis = this,
                 series = axis.series;
+            // Reset the groupPixelWidth for all series, #17141.
             series.forEach(function (series) {
-                // Reset the groupPixelWidth, then calculate if needed.
                 series.groupPixelWidth = void 0; // #2110
+            });
+            series.forEach(function (series) {
                 series.groupPixelWidth = (axis.getGroupPixelWidth &&
                     axis.getGroupPixelWidth());
                 if (series.groupPixelWidth) {
@@ -50631,8 +50968,11 @@
             }
             else {
                 this.chart.options.series.forEach(function (seriesOptions) {
-                    seriesOptions.dataGrouping = dataGrouping;
-                }, false);
+                    // Merging dataGrouping options with already defined options #16759
+                    seriesOptions.dataGrouping = typeof dataGrouping === 'boolean' ?
+                        dataGrouping :
+                        merge(dataGrouping, seriesOptions.dataGrouping);
+                });
             }
             // Clear ordinal slope, so we won't accidentaly use the old one (#7827)
             if (axis.ordinal) {
@@ -51883,6 +52223,13 @@
          * @product   highstock
          * @apioption series.ohlc.data
          */
+        /**
+         * The closing value of each data point.
+         *
+         * @type      {number}
+         * @product   highstock
+         * @apioption series.ohlc.data.close
+         */
         /**
          * The opening value of each data point.
          *
@@ -52827,23 +53174,20 @@
                     // depending on the label width or a hardcoded value, #16041.
                     distribute(boxes, inverted ? yAxis.len : this.xAxis.len, maxDistance_1);
                     points.forEach(function (point) {
-                        var box = point.graphic && boxesMap[point.plotX];
-                        if (box) {
-                            point.graphic[point.graphic.isNew ? 'attr' : 'animate']({
-                                x: box.pos + box.align * box.size,
-                                anchorX: point.anchorX
-                            });
+                        var plotX = point.plotX,
+                            graphic = point.graphic,
+                            box = graphic && boxesMap[plotX];
+                        if (box && graphic) {
                             // Hide flag when its box position is not specified
                             // (#8573, #9299)
                             if (!defined(box.pos)) {
-                                point.graphic.attr({
-                                    x: -9999,
-                                    anchorX: -9999
-                                });
-                                point.graphic.isNew = true;
+                                graphic.hide().isNew = true;
                             }
                             else {
-                                point.graphic.isNew = false;
+                                graphic[graphic.isNew ? 'attr' : 'animate']({
+                                    x: box.pos + (box.align || 0) * box.size,
+                                    anchorX: point.anchorX
+                                }).show().isNew = false;
                             }
                         }
                     });
@@ -54095,6 +54439,8 @@
                     method = scroller.rendered ? 'animate' : 'attr';
                 var xOffset = height,
                     yOffset = 0;
+                // Make the scrollbar visible when it is repositioned, #15763.
+                scroller.group.show();
                 scroller.x = x;
                 scroller.y = y + this.trackBorderWidth;
                 scroller.width = width; // width with buttons
@@ -54154,10 +54500,12 @@
                     options = scroller.options,
                     size = scroller.size,
                     styledMode = scroller.chart.styledMode,
-                    group = renderer.g('scrollbar').attr({
-                        zIndex: options.zIndex,
-                        translateY: -99999
-                    }).add();
+                    group = renderer.g('scrollbar')
+                        .attr({
+                        zIndex: options.zIndex
+                    })
+                        .hide() // initially hide the scrollbar #15863
+                        .add();
                 // Draw the scrollbar group
                 scroller.group = group;
                 // Draw the scrollbar track:
@@ -54285,7 +54633,7 @@
                     scroller.scrollbarRifles.hide();
                 }
                 else {
-                    scroller.scrollbarRifles.show(true);
+                    scroller.scrollbarRifles.show();
                 }
                 // Show or hide the scrollbar based on the showFull setting
                 if (options.showFull === false) {
@@ -55339,19 +55687,21 @@
                     maskInside,
                     !maskInside
                 ].forEach(function (hasMask, index) {
-                    navigator.shades[index] = renderer.rect()
-                        .addClass('highcharts-navigator-mask' +
-                        (index === 1 ? '-inside' : '-outside'))
-                        .add(navigatorGroup);
+                    var shade = renderer.rect()
+                            .addClass('highcharts-navigator-mask' +
+                            (index === 1 ? '-inside' : '-outside'))
+                            .add(navigatorGroup);
                     if (!chart.styledMode) {
-                        navigator.shades[index]
-                            .attr({
+                        shade.attr({
                             fill: hasMask ?
                                 navigatorOptions.maskFill :
                                 'rgba(0,0,0,0)'
-                        })
-                            .css((index === 1) && mouseCursor);
+                        });
+                        if (index === 1) {
+                            shade.css(mouseCursor);
+                        }
                     }
+                    navigator.shades[index] = shade;
                 });
                 // Create the outline:
                 navigator.outline = renderer.path()
@@ -55514,7 +55864,7 @@
                 zoomedMin = Math.round(navigator.zoomedMin);
                 if (navigatorEnabled) {
                     navigator.navigatorGroup.attr({
-                        visibility: 'visible'
+                        visibility: 'inherit'
                     });
                     // Place elements
                     verb = rendered && !navigator.hasDragged ? 'animate' : 'attr';
@@ -56319,7 +56669,8 @@
             Navigator.prototype.getBaseSeriesMin = function (currentSeriesMin) {
                 return this.baseSeries.reduce(function (min, series) {
                     // (#10193)
-                    return Math.min(min, series.xData ? series.xData[0] : min);
+                    return Math.min(min, series.xData && series.xData.length ?
+                        series.xData[0] : min);
                 }, currentSeriesMin);
             };
             /**
@@ -59622,7 +59973,7 @@
                 text: text,
                 x: posx,
                 y: posy,
-                visibility: isInside ? 'visible' : 'hidden'
+                visibility: isInside ? 'inherit' : 'hidden'
             });
             crossBox = crossLabel.getBBox();
             // now it is placed we can correct its position