highcharts 9.3.3 → 10.2.0

package/es-modules/Core/DefaultOptions.js

@@ -882,7 +882,7 @@ var defaultOptions = {
             /**
              * @ignore-option
              */
-            color: "#333333" /* neutralColor80 */
+            color: "#333333" /* Palette.neutralColor80 */
         }
     },
     /**
@@ -1162,7 +1162,7 @@ var defaultOptions = {
          *
          * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
          */
-        borderColor: "#999999" /* neutralColor40 */,
+        borderColor: "#999999" /* Palette.neutralColor40 */,
         /**
          * The border corner radius of the legend.
          *
@@ -1256,7 +1256,7 @@ var defaultOptions = {
              * @type  {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
              * @since 2.2.4
              */
-            activeColor: "#003399" /* highlightColor100 */,
+            activeColor: "#003399" /* Palette.highlightColor100 */,
             /**
              * The color of the inactive up or down arrow in the legend page
              * navigation. .
@@ -1272,7 +1272,7 @@ var defaultOptions = {
              * @type  {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
              * @since 2.2.4
              */
-            inactiveColor: "#cccccc" /* neutralColor20 */
+            inactiveColor: "#cccccc" /* Palette.neutralColor20 */
         },
         /**
          * The inner padding of the legend box.
@@ -1348,7 +1348,7 @@ var defaultOptions = {
             /**
              * @ignore
              */
-            color: "#333333" /* neutralColor80 */,
+            color: "#333333" /* Palette.neutralColor80 */,
             /**
              * @ignore
              */
@@ -1386,7 +1386,7 @@ var defaultOptions = {
             /**
              * @ignore
              */
-            color: "#000000" /* neutralColor100 */
+            color: "#000000" /* Palette.neutralColor100 */
         },
         /**
          * CSS styles for each legend item when the corresponding series or
@@ -1407,7 +1407,7 @@ var defaultOptions = {
             /**
              * @ignore
              */
-            color: "#cccccc" /* neutralColor20 */
+            color: "#cccccc" /* Palette.neutralColor20 */
         },
         /**
          * Whether to apply a drop shadow to the legend. A `backgroundColor`
@@ -1711,7 +1711,7 @@ var defaultOptions = {
             /**
              * @ignore
              */
-            backgroundColor: "#ffffff" /* backgroundColor */,
+            backgroundColor: "#ffffff" /* Palette.backgroundColor */,
             /**
              * @ignore
              */
@@ -1917,18 +1917,20 @@ var defaultOptions = {
          * @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 }`.
@@ -2271,6 +2273,8 @@ var defaultOptions = {
          *
          * @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
          *
@@ -2302,7 +2306,7 @@ var defaultOptions = {
          *
          * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
          */
-        backgroundColor: color("#f7f7f7" /* neutralColor3 */)
+        backgroundColor: color("#f7f7f7" /* Palette.neutralColor3 */)
             // @todo: Disallow undefined as input for colors
             .setOpacity(0.85).get(),
         /**
@@ -2365,7 +2369,7 @@ var defaultOptions = {
          */
         style: {
             /** @internal */
-            color: "#333333" /* neutralColor80 */,
+            color: "#333333" /* Palette.neutralColor80 */,
             /** @internal */
             cursor: 'default',
             /** @internal */
@@ -2480,7 +2484,7 @@ var defaultOptions = {
             /** @internal */
             cursor: 'pointer',
             /** @internal */
-            color: "#999999" /* neutralColor40 */,
+            color: "#999999" /* Palette.neutralColor40 */,
             /** @internal */
             fontSize: '9px'
         },

package/es-modules/Core/Geometry/PolygonClip.js

@@ -0,0 +1,84 @@
+/* *
+ *
+ *  (c) 2010-2021 Highsoft AS
+ *
+ *  License: www.highcharts.com/license
+ *
+ *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
+ *
+ * */
+'use strict';
+var isInside = function (clipEdge1, clipEdge2, p) {
+    return (clipEdge2[0] - clipEdge1[0]) * (p[1] - clipEdge1[1]) >
+        (clipEdge2[1] - clipEdge1[1]) * (p[0] - clipEdge1[0]);
+};
+var intersection = function (clipEdge1, clipEdge2, prevPoint, currentPoint) {
+    var dc = [
+        clipEdge1[0] - clipEdge2[0],
+        clipEdge1[1] - clipEdge2[1]
+    ], dp = [
+        prevPoint[0] - currentPoint[0],
+        prevPoint[1] - currentPoint[1]
+    ], n1 = clipEdge1[0] * clipEdge2[1] - clipEdge1[1] * clipEdge2[0], n2 = prevPoint[0] * currentPoint[1] - prevPoint[1] * currentPoint[0], n3 = 1 / (dc[0] * dp[1] - dc[1] * dp[0]), intersection = [
+        (n1 * dp[0] - n2 * dc[0]) * n3,
+        (n1 * dp[1] - n2 * dc[1]) * n3
+    ];
+    intersection.isIntersection = true;
+    return intersection;
+};
+var PolygonClip;
+(function (PolygonClip) {
+    // Simple line string clipping. Clip to bounds and insert intersection
+    // points.
+    PolygonClip.clipLineString = function (line, boundsPolygon) {
+        var ret = [], l = PolygonClip.clipPolygon(line, boundsPolygon, false);
+        for (var i = 1; i < l.length; i++) {
+            // Insert gap where two intersections follow each other
+            if (l[i].isIntersection && l[i - 1].isIntersection) {
+                ret.push(l.splice(0, i));
+                i = 0;
+            }
+            // Push the rest
+            if (i === l.length - 1) {
+                ret.push(l);
+            }
+        }
+        return ret;
+    };
+    // Clip a polygon to another polygon using the Sutherland/Hodgman algorithm.
+    PolygonClip.clipPolygon = function (subjectPolygon, boundsPolygon, closed) {
+        if (closed === void 0) { closed = true; }
+        var clipEdge1 = boundsPolygon[boundsPolygon.length - 1], clipEdge2, prevPoint, currentPoint, outputList = subjectPolygon;
+        for (var j = 0; j < boundsPolygon.length; j++) {
+            var inputList = outputList;
+            clipEdge2 = boundsPolygon[j];
+            outputList = [];
+            prevPoint = closed ?
+                // Polygon, wrap around
+                inputList[inputList.length - 1] :
+                // Open line string, don't wrap
+                inputList[0];
+            for (var i = 0; i < inputList.length; i++) {
+                currentPoint = inputList[i];
+                if (isInside(clipEdge1, clipEdge2, currentPoint)) {
+                    if (!isInside(clipEdge1, clipEdge2, prevPoint)) {
+                        outputList.push(intersection(clipEdge1, clipEdge2, prevPoint, currentPoint));
+                    }
+                    outputList.push(currentPoint);
+                }
+                else if (isInside(clipEdge1, clipEdge2, prevPoint)) {
+                    outputList.push(intersection(clipEdge1, clipEdge2, prevPoint, currentPoint));
+                }
+                prevPoint = currentPoint;
+            }
+            clipEdge1 = clipEdge2;
+        }
+        return outputList;
+    };
+})(PolygonClip || (PolygonClip = {}));
+/* *
+ *
+ *  Default Export
+ *
+ * */
+export default PolygonClip;

package/es-modules/Core/Globals.js

@@ -8,23 +8,6 @@
  *
  * */
 'use strict';
-/* *
- *
- *  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
@@ -40,7 +23,10 @@ var Globals;
      *  Constants
      *
      * */
-    Globals.SVG_NS = 'http://www.w3.org/2000/svg', Globals.product = 'Highcharts', Globals.version = '9.3.3', Globals.win = w, Globals.doc = Globals.win.document, Globals.svg = (Globals.doc &&
+    Globals.SVG_NS = 'http://www.w3.org/2000/svg', Globals.product = 'Highcharts', Globals.version = '10.2.0', Globals.win = (typeof window !== 'undefined' ?
+        window :
+        {}), // eslint-disable-line node/no-unsupported-features/es-builtins
+    Globals.doc = Globals.win.document, Globals.svg = (Globals.doc &&
         Globals.doc.createElementNS &&
         !!Globals.doc.createElementNS(Globals.SVG_NS, 'svg').createSVGRect), Globals.userAgent = (Globals.win.navigator && Globals.win.navigator.userAgent) || '', Globals.isChrome = Globals.userAgent.indexOf('Chrome') !== -1, Globals.isFirefox = Globals.userAgent.indexOf('Firefox') !== -1, Globals.isMS = /(edge|msie|trident)/i.test(Globals.userAgent) && !Globals.win.opera, Globals.isSafari = !Globals.isChrome && Globals.userAgent.indexOf('Safari') !== -1, Globals.isTouchDevice = /(Mobile|Android|Windows Phone)/.test(Globals.userAgent), Globals.isWebKit = Globals.userAgent.indexOf('AppleWebKit') !== -1, Globals.deg2rad = Math.PI * 2 / 360, Globals.hasBidiBug = (Globals.isFirefox &&
         parseInt(Globals.userAgent.split('Firefox/')[1], 10) < 4 // issue #38

package/es-modules/Core/HttpUtilities.js

@@ -12,33 +12,31 @@ import G from '../Core/Globals.js';
 var doc = G.doc;
 import U from '../Core/Utilities.js';
 var createElement = U.createElement, discardElement = U.discardElement, merge = U.merge, objectEach = U.objectEach;
+/* *
+ *
+ *  Functions
+ *
+ * */
 /**
  * Perform an Ajax call.
  *
  * @function Highcharts.ajax
  *
- * @param {Partial<Highcharts.AjaxSettingsObject>} attr
+ * @param {Highcharts.AjaxSettingsObject} settings
  *        The Ajax settings to use.
  *
  * @return {false|undefined}
  *         Returns false, if error occured.
  */
-function ajax(attr) {
-    var options = merge(true, {
-        url: false,
-        type: 'get',
-        dataType: 'json',
-        success: false,
-        error: false,
-        data: false,
-        headers: {}
-    }, attr), headers = {
+function ajax(settings) {
+    var headers = {
         json: 'application/json',
         xml: 'application/xml',
         text: 'text/plain',
         octet: 'application/octet-stream'
     }, r = new XMLHttpRequest();
     /**
+     * Private error handler.
      * @private
      * @param {XMLHttpRequest} xhr
      * Internal request object.
@@ -46,49 +44,53 @@ function ajax(attr) {
      * Occured error.
      */
     function handleError(xhr, err) {
-        if (options.error) {
-            options.error(xhr, err);
+        if (settings.error) {
+            settings.error(xhr, err);
         }
         else {
             // @todo Maybe emit a highcharts error event here
         }
     }
-    if (!options.url) {
+    if (!settings.url) {
         return false;
     }
-    r.open(options.type.toUpperCase(), options.url, true);
-    if (!options.headers['Content-Type']) {
-        r.setRequestHeader('Content-Type', headers[options.dataType] || headers.text);
+    r.open((settings.type || 'get').toUpperCase(), settings.url, true);
+    if (!settings.headers || !settings.headers['Content-Type']) {
+        r.setRequestHeader('Content-Type', headers[settings.dataType || 'json'] || headers.text);
     }
-    objectEach(options.headers, function (val, key) {
+    objectEach(settings.headers, function (val, key) {
         r.setRequestHeader(key, val);
     });
+    if (settings.responseType) {
+        r.responseType = settings.responseType;
+    }
     // @todo lacking timeout handling
     r.onreadystatechange = function () {
         var res;
         if (r.readyState === 4) {
             if (r.status === 200) {
-                res = r.responseText;
-                if (options.dataType === 'json') {
-                    try {
-                        res = JSON.parse(res);
-                    }
-                    catch (e) {
-                        return handleError(r, e);
+                if (settings.responseType !== 'blob') {
+                    res = r.responseText;
+                    if (settings.dataType === 'json') {
+                        try {
+                            res = JSON.parse(res);
+                        }
+                        catch (e) {
+                            if (e instanceof Error) {
+                                return handleError(r, e);
+                            }
+                        }
                     }
                 }
-                return options.success && options.success(res);
+                return settings.success && settings.success(res, r);
             }
             handleError(r, r.responseText);
         }
     };
-    try {
-        options.data = JSON.stringify(options.data);
+    if (settings.data && typeof settings.data !== 'string') {
+        settings.data = JSON.stringify(settings.data);
     }
-    catch (e) {
-        // empty
-    }
-    r.send(options.data || true);
+    r.send(settings.data);
 }
 /**
  * Get a JSON resource over XHR, also supporting CORS without preflight.
@@ -142,7 +144,7 @@ function post(url, data, formAttributes) {
             type: 'hidden',
             name: name,
             value: val
-        }, null, form);
+        }, void 0, form);
     });
     // submit
     form.submit();
@@ -160,33 +162,38 @@ var HttpUtilities = {
     post: post
 };
 export default HttpUtilities;
+/* *
+ *
+ *  API Declarations
+ *
+ * */
 /**
  * @interface Highcharts.AjaxSettingsObject
  */ /**
 * The payload to send.
 *
 * @name Highcharts.AjaxSettingsObject#data
-* @type {string|Highcharts.Dictionary<any>}
+* @type {string|Highcharts.Dictionary<any>|undefined}
 */ /**
 * The data type expected.
 * @name Highcharts.AjaxSettingsObject#dataType
-* @type {"json"|"xml"|"text"|"octet"}
+* @type {"json"|"xml"|"text"|"octet"|undefined}
 */ /**
 * Function to call on error.
 * @name Highcharts.AjaxSettingsObject#error
-* @type {Function}
+* @type {Function|undefined}
 */ /**
 * The headers; keyed on header name.
 * @name Highcharts.AjaxSettingsObject#headers
-* @type {Highcharts.Dictionary<string>}
+* @type {Highcharts.Dictionary<string>|undefined}
 */ /**
 * Function to call on success.
 * @name Highcharts.AjaxSettingsObject#success
-* @type {Function}
+* @type {Function|undefined}
 */ /**
 * The HTTP method to use. For example GET or POST.
 * @name Highcharts.AjaxSettingsObject#type
-* @type {string}
+* @type {string|undefined}
 */ /**
 * The URL to call.
 * @name Highcharts.AjaxSettingsObject#url

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

@@ -68,7 +68,7 @@ var Legend = /** @class */ (function () {
         this.maxItemWidth = 0;
         this.maxLegendWidth = 0;
         this.offsetWidth = 0;
-        this.options = {};
+        this.options = void 0;
         this.padding = 0;
         this.pages = [];
         this.proximate = false;
@@ -378,7 +378,7 @@ var Legend = /** @class */ (function () {
                  * @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);
@@ -425,7 +425,7 @@ var Legend = /** @class */ (function () {
     Legend.prototype.renderItem = function (item) {
         var legend = this, chart = legend.chart, renderer = chart.renderer, options = legend.options, horizontal = options.layout === 'horizontal', symbolWidth = legend.symbolWidth, symbolPadding = options.symbolPadding || 0, itemStyle = legend.itemStyle, itemHiddenStyle = legend.itemHiddenStyle, itemDistance = horizontal ? pick(options.itemDistance, 20) : 0, ltr = !options.rtl, isSeries = !item.series, series = !isSeries && item.series.drawLegendSymbol ?
             item.series :
-            item, seriesOptions = series.options, showCheckbox = legend.createCheckboxForItem &&
+            item, seriesOptions = series.options, showCheckbox = (legend.createCheckboxForItem) &&
             seriesOptions &&
             seriesOptions.showCheckbox, useHTML = options.useHTML, itemClassName = item.options.className;
         var li = item.legendItem, 
@@ -678,7 +678,7 @@ var Legend = /** @class */ (function () {
             }
         }, this);
         distribute(boxes, chart.plotHeight).forEach(function (box) {
-            if (box.item._legendItemPos) {
+            if (box.item._legendItemPos && box.pos) {
                 box.item._legendItemPos[1] =
                     chart.plotTop - chart.spacing[0] + box.pos;
             }
@@ -704,8 +704,7 @@ var Legend = /** @class */ (function () {
         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;
         }
@@ -778,7 +777,6 @@ var Legend = /** @class */ (function () {
                 r: options.borderRadius
             })
                 .add(legendGroup);
-            box.isNew = true;
         }
         // Presentational
         if (!chart.styledMode) {
@@ -791,16 +789,15 @@ var Legend = /** @class */ (function () {
                 .shadow(options.shadow);
         }
         if (legendWidth > 0 && legendHeight > 0) {
-            box[box.isNew ? 'attr' : 'animate'](box.crisp.call({}, {
+            box[box.placed ? 'animate' : 'attr'](box.crisp.call({}, {
                 x: 0,
                 y: 0,
                 width: legendWidth,
                 height: legendHeight
             }, box.strokeWidth()));
-            box.isNew = false;
         }
         // hide the border if no items
-        box[display ? 'show' : 'hide']();
+        legendGroup[display ? 'show' : 'hide']();
         // Open for responsiveness
         if (chart.styledMode && legendGroup.getStyle('display') === 'none') {
             legendWidth = legendHeight = 0;
@@ -839,6 +836,11 @@ var Legend = /** @class */ (function () {
         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,
@@ -953,7 +955,7 @@ var Legend = /** @class */ (function () {
                 });
                 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);
@@ -1008,7 +1010,7 @@ var Legend = /** @class */ (function () {
             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({

package/es-modules/Core/MSPointer.js

@@ -12,10 +12,12 @@ var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
         return extendStatics(d, b);
     };
     return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
         extendStatics(d, b);
         function __() { this.constructor = d; }
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());

package/es-modules/Core/Navigator.js

@@ -202,13 +202,13 @@ extend(defaultOptions, {
              *
              * @type    {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
              */
-            backgroundColor: "#f2f2f2" /* neutralColor5 */,
+            backgroundColor: "#f2f2f2" /* Palette.neutralColor5 */,
             /**
              * The stroke for the handle border and the stripes inside.
              *
              * @type    {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
              */
-            borderColor: "#999999" /* neutralColor40 */
+            borderColor: "#999999" /* Palette.neutralColor40 */
         },
         /**
          * The color of the mask covering the areas of the navigator series
@@ -225,7 +225,7 @@ extend(defaultOptions, {
          * @type    {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
          * @default rgba(102,133,194,0.3)
          */
-        maskFill: color("#6685c2" /* highlightColor60 */).setOpacity(0.3).get(),
+        maskFill: color("#6685c2" /* Palette.highlightColor60 */).setOpacity(0.3).get(),
         /**
          * The color of the line marking the currently zoomed area in the
          * navigator.
@@ -236,7 +236,7 @@ extend(defaultOptions, {
          * @type    {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
          * @default #cccccc
          */
-        outlineColor: "#cccccc" /* neutralColor20 */,
+        outlineColor: "#cccccc" /* Palette.neutralColor20 */,
         /**
          * The width of the line marking the currently zoomed area in the
          * navigator.
@@ -427,7 +427,7 @@ extend(defaultOptions, {
             className: 'highcharts-navigator-xaxis',
             tickLength: 0,
             lineWidth: 0,
-            gridLineColor: "#e6e6e6" /* neutralColor10 */,
+            gridLineColor: "#e6e6e6" /* Palette.neutralColor10 */,
             gridLineWidth: 1,
             tickPixelInterval: 200,
             labels: {
@@ -437,7 +437,7 @@ extend(defaultOptions, {
                  */
                 style: {
                     /** @ignore */
-                    color: "#999999" /* neutralColor40 */
+                    color: "#999999" /* Palette.neutralColor40 */
                 },
                 x: 3,
                 y: -4
@@ -747,19 +747,21 @@ var Navigator = /** @class */ (function () {
             maskInside,
             !maskInside
         ].forEach(function (hasMask, index) {
-            navigator.shades[index] = renderer.rect()
+            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()
@@ -902,7 +904,7 @@ var Navigator = /** @class */ (function () {
         zoomedMin = Math.round(navigator.zoomedMin);
         if (navigatorEnabled) {
             navigator.navigatorGroup.attr({
-                visibility: 'visible'
+                visibility: 'inherit'
             });
             // Place elements
             verb = rendered && !navigator.hasDragged ? 'animate' : 'attr';
@@ -1643,7 +1645,8 @@ var Navigator = /** @class */ (function () {
     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);
     };
     /**