highcharts 6.1.1 → 6.2.0

package/js/es-modules/parts/Navigator.js

@@ -1,5 +1,5 @@
 /**
- * (c) 2010-2017 Torstein Honsi
+ * (c) 2010-2018 Torstein Honsi
  *
  * License: www.highcharts.com/license
  */
@@ -14,36 +14,6 @@ import './Series.js';
 import './Options.js';
 import './Scrollbar.js';
 
-/**
- * Options for the corresponding navigator series if `showInNavigator`
- * is `true` for this series. Available options are the same as any
- * series, documented at [plotOptions](#plotOptions.series) and
- * [series](#series).
- *
- *
- * These options are merged with options in [navigator.series](
- * #navigator.series), and will take precedence if the same option is defined
- * both places.
- *
- * @type {Object}
- * @see [navigator.series](#navigator.series)
- * @default undefined
- * @since 5.0.0
- * @product highstock
- * @apioption plotOptions.series.navigatorOptions
- */
-
-/**
- * Whether or not to show the series in the navigator. Takes precedence
- * over [navigator.baseSeries](#navigator.baseSeries) if defined.
- *
- * @type {Boolean}
- * @default undefined
- * @since 5.0.0
- * @product highstock
- * @apioption plotOptions.series.showInNavigator
- */
-
 var addEvent = H.addEvent,
     Axis = H.Axis,
     Chart = H.Chart,
@@ -102,24 +72,85 @@ extend(defaultOptions, {
      * @optionparent navigator
      */
     navigator: {
+
+        /**
+         * Whether the navigator and scrollbar should adapt to updated data
+         * in the base X axis. When loading data async, as in the demo below,
+         * this should be `false`. Otherwise new data will trigger navigator
+         * redraw, which will cause unwanted looping. In the demo below, the
+         * data in the navigator is set only once. On navigating, only the main
+         * chart content is updated.
+         *
+         * @sample {highstock} stock/demo/lazy-loading/
+         *         Set to false with async data loading
+         *
+         * @type       {boolean}
+         * @default    true
+         * @product    highstock
+         * @apioption  navigator.adaptToUpdatedData
+         */
+
+        /**
+         * An integer identifying the index to use for the base series, or a
+         * string representing the id of the series.
+         *
+         * **Note**: As of Highcharts 5.0, this is now a deprecated option.
+         * Prefer [series.showInNavigator](#plotOptions.series.showInNavigator).
+         *
+         * @see [series.showInNavigator](#plotOptions.series.showInNavigator)
+         *
+         * @deprecated
+         * @type       {*}
+         * @default    0
+         * @product    highstock
+         * @apioption  navigator.baseSeries
+         */
+
+        /**
+         * Enable or disable the navigator.
+         *
+         * @sample {highstock} stock/navigator/enabled/ Disable the navigator
+         *
+         * @type       {boolean}
+         * @default    true
+         * @product    highstock
+         * @apioption  navigator.enabled
+         */
+
+        /**
+         * When the chart is inverted, whether to draw the navigator on the
+         * opposite side.
+         *
+         * @type       {boolean}
+         * @default    false
+         * @since      5.0.8
+         * @product    highstock
+         * @apioption  navigator.opposite
+         */
+
         /**
          * The height of the navigator.
          *
-         * @type {Number}
-         * @sample {highstock} stock/navigator/height/ A higher navigator
-         * @default 40
-         * @product highstock
+         * @sample {highstock} stock/navigator/height/
+         *         A higher navigator
+         *
+         * @type       {number}
+         * @default    40
+         * @product    highstock
+         * @apioption  navigator.height
          */
         height: 40,
 
         /**
          * The distance from the nearest element, the X axis or X axis labels.
          *
-         * @type {Number}
          * @sample {highstock} stock/navigator/margin/
          *         A margin of 2 draws the navigator closer to the X axis labels
-         * @default 25
-         * @product highstock
+         *
+         * @type       {number}
+         * @default    25
+         * @product    highstock
+         * @apioption  navigator.margin
          */
         margin: 25,
 
@@ -127,44 +158,53 @@ extend(defaultOptions, {
          * Whether the mask should be inside the range marking the zoomed
          * range, or outside. In Highstock 1.x it was always `false`.
          *
-         * @type {Boolean}
          * @sample {highstock} stock/navigator/maskinside-false/
          *         False, mask outside
-         * @default true
-         * @since 2.0
-         * @product highstock
+         *
+         * @type       {boolean}
+         * @default    true
+         * @since      2.0
+         * @product    highstock
+         * @apioption  navigator.maskInside
          */
         maskInside: true,
 
         /**
          * Options for the handles for dragging the zoomed area.
          *
-         * @type {Object}
-         * @sample {highstock} stock/navigator/handles/ Colored handles
-         * @product highstock
+         * @sample {highstock} stock/navigator/handles/
+         *         Colored handles
+         *
+         * @type       {*}
+         * @product    highstock
+         * @apioption  navigator.handles
          */
         handles: {
             /**
              * Width for handles.
              *
-             * @type {Number}
-             * @default 7
-             * @product highstock
              * @sample {highstock} stock/navigator/styled-handles/
              *         Styled handles
-             * @since 6.0.0
+             *
+             * @type       {number}
+             * @default    7
+             * @since      6.0.0
+             * @product    highstock
+             * @apioption  navigator.handles.width
              */
             width: 7,
 
             /**
              * Height for handles.
              *
-             * @type {Number}
-             * @default 15
-             * @product highstock
              * @sample {highstock} stock/navigator/styled-handles/
              *         Styled handles
-             * @since 6.0.0
+             *
+             * @type       {number}
+             * @default    15
+             * @since      6.0.0
+             * @product    highstock
+             * @apioption  navigator.handles.height
              */
             height: 15,
 
@@ -181,22 +221,25 @@ extend(defaultOptions, {
              * `Highcharts.SVGRenderer.prototype.symbols`. The callback is then
              * used by its method name, as shown in the demo.
              *
-             * @type {Array}
-             * @default ['navigator-handle', 'navigator-handle']
-             * @product highstock
              * @sample {highstock} stock/navigator/styled-handles/
              *         Styled handles
-             * @since 6.0.0
+             *
+             * @type       {Array<string>}
+             * @default    ['navigator-handle', 'navigator-handle']
+             * @since      6.0.0
+             * @product    highstock
+             * @apioption  navigator.handles.symbols
              */
             symbols: ['navigator-handle', 'navigator-handle'],
 
             /**
              * Allows to enable/disable handles.
              *
-             * @type {Boolean}
-             * @default true
-             * @product highstock
-             * @since 6.0.0
+             * @type       {boolean}
+             * @default    true
+             * @since      6.0.0
+             * @product    highstock
+             * @apioption  navigator.handles.enabled
              */
             enabled: true
 
@@ -227,14 +270,17 @@ extend(defaultOptions, {
          *     }
          * }</pre>
          *
-         * @type {Object}
          * @see In styled mode, the navigator series is styled with the
          *      `.highcharts-navigator-series` class.
+         *
          * @sample {highstock} stock/navigator/series-data/
          *         Using a separate data set for the navigator
          * @sample {highstock} stock/navigator/series/
          *         A green navigator series
-         * @product highstock
+         *
+         * @type       {*}
+         * @product    highstock
+         * @apioption  navigator.series
          */
         series: {
 
@@ -242,7 +288,9 @@ extend(defaultOptions, {
              * The type of the navigator series. Defaults to `areaspline` if
              * defined, otherwise `line`.
              *
-             * @type {String}
+             * @type       {string}
+             * @default    areaspline
+             * @apioption  navigator.series.type
              */
             type: defaultSeriesType,
             
@@ -255,7 +303,9 @@ extend(defaultOptions, {
             /**
              * Data grouping options for the navigator series.
              *
-             * @extends {plotOptions.series.dataGrouping}
+             * @type       {*}
+             * @extends    plotOptions.series.dataGrouping
+             * @apioption  navigator.series.dataGrouping
              */
             dataGrouping: {
                 approximation: 'average',
@@ -269,7 +319,9 @@ extend(defaultOptions, {
              * Data label options for the navigator series. Data labels are
              * disabled by default on the navigator series.
              *
-             * @extends {plotOptions.series.dataLabels}
+             * @type       {*}
+             * @extends    plotOptions.series.dataLabels
+             * @apioption  navigator.series.dataLabels
              */
             dataLabels: {
                 enabled: false,
@@ -283,7 +335,9 @@ extend(defaultOptions, {
              * Line color for the navigator series. Allows setting the color
              * while disallowing the default candlestick setting.
              *
-             * @type {Color}
+             * @type       {Highcharts.ColorString|null}
+             * @default    null
+             * @apioption  navigator.series.lineColor
              */
             lineColor: null, // #4602
 
@@ -295,7 +349,10 @@ extend(defaultOptions, {
             /**
              * The threshold option. Setting it to 0 will make the default
              * navigator area series draw its area from the 0 value and up.
-             * @type {Number}
+             *
+             * @type       {number|null}
+             * @default    null
+             * @apioption  navigator.series.threshold
              */
             threshold: null
         },
@@ -319,11 +376,12 @@ extend(defaultOptions, {
          *     }
          * }</pre>
          *
-         * @type {Object}
-         * @extends {xAxis}
-         * @excluding linkedTo,maxZoom,minRange,opposite,range,scrollbar,
-         *          showEmpty,maxRange
-         * @product highstock
+         * @type       {*}
+         * @extends    xAxis
+         * @excluding  linkedTo,maxZoom,minRange,opposite,range,scrollbar,
+         *             showEmpty,maxRange
+         * @product    highstock
+         * @apioption  navigator.xAxis
          */
         xAxis: {
             /**
@@ -331,11 +389,11 @@ extend(defaultOptions, {
              * xAxis.maxPadding, but value is set in milliseconds.
              * Can be set for both, main xAxis and navigator's xAxis.
              *
-             * @type {Number}
-             * @default 0
-             * @since 6.0.0
-             * @product highstock
-             * @apioption xAxis.overscroll
+             * @type       {number}
+             * @default    0
+             * @since      6.0.0
+             * @product    highstock
+             * @apioption  navigator.xAxis.overscroll
              */
             overscroll: 0,
 
@@ -377,11 +435,12 @@ extend(defaultOptions, {
          *     tickWidth: 0
          * }</pre>
          *
-         * @type {Object}
-         * @extends {yAxis}
-         * @excluding height,linkedTo,maxZoom,minRange,ordinal,range,showEmpty,
-         *          scrollbar,top,units,maxRange,minLength,maxLength,resize
-         * @product highstock
+         * @type       {*}
+         * @extends    yAxis
+         * @excluding  height,linkedTo,maxZoom,minRange,ordinal,range,showEmpty,
+         *             scrollbar,top,units,maxRange,minLength,maxLength,resize
+         * @product    highstock
+         * @apioption  navigator.yAxis
          */
         yAxis: {
 
@@ -408,8 +467,14 @@ extend(defaultOptions, {
 
 /**
  * Draw one of the handles on the side of the zoomed range in the navigator
- * @param {Boolean} inverted flag for chart.inverted
- * @returns {Array} Path to be used in a handle
+ *
+ * @function Highcharts.Renderer#symbols.navigator-handle
+ *
+ * @param  {boolean} inverted
+ *         flag for chart.inverted
+ *
+ * @return {Array<number|string>}
+ *         Path to be used in a handle
  */
 H.Renderer.prototype.symbols['navigator-handle'] = function (
     x,
@@ -446,8 +511,11 @@ H.Renderer.prototype.symbols['navigator-handle'] = function (
 
 /**
  * The Navigator class
- * @param {Object} chart - Chart object
- * @class
+ *
+ * @class Highcharts.Navigator
+ *
+ * @param {Highcharts.Chart} chart
+ *        Chart object
  */
 function Navigator(chart) {
     this.init(chart);
@@ -456,10 +524,20 @@ function Navigator(chart) {
 Navigator.prototype = {
     /**
      * Draw one of the handles on the side of the zoomed range in the navigator
-     * @param {Number} x The x center for the handle
-     * @param {Number} index 0 for left and 1 for right
-     * @param {Boolean} inverted flag for chart.inverted
-     * @param {String} verb use 'animate' or 'attr'
+     *
+     * @function Highcharts.Navigator#drawHandle
+     *
+     * @param  {number} x
+     *         The x center for the handle
+     *
+     * @param  {number} index
+     *         0 for left and 1 for right
+     * @param  {boolean} inverted
+     *         flag for chart.inverted
+     * @param  {string} verb
+     *         use 'animate' or 'attr'
+     *
+     * @return {void}
      */
     drawHandle: function (x, index, inverted, verb) {
         var navigator = this,
@@ -481,10 +559,22 @@ Navigator.prototype = {
 
     /**
      * Render outline around the zoomed range
-     * @param {Number} zoomedMin in pixels position where zoomed range starts
-     * @param {Number} zoomedMax in pixels position where zoomed range ends
-     * @param {Boolean} inverted flag if chart is inverted
-     * @param {String} verb use 'animate' or 'attr'
+     *
+     * @function Highcharts.Navigator#drawOutline
+     *
+     * @param  {number} zoomedMin
+     *         in pixels position where zoomed range starts
+     *
+     * @param  {number} zoomedMax
+     *         in pixels position where zoomed range ends
+     *
+     * @param  {boolean} inverted
+     *         flag if chart is inverted
+     *
+     * @param  {string} verb
+     *         use 'animate' or 'attr'
+     *
+     * @return {void}
      */
     drawOutline: function (zoomedMin, zoomedMax, inverted, verb) {
         var navigator = this,
@@ -572,10 +662,22 @@ Navigator.prototype = {
 
     /**
      * Render outline around the zoomed range
-     * @param {Number} zoomedMin in pixels position where zoomed range starts
-     * @param {Number} zoomedMax in pixels position where zoomed range ends
-     * @param {Boolean} inverted flag if chart is inverted
-     * @param {String} verb use 'animate' or 'attr'
+     *
+     * @function Highcharts.Navigator#drawMasks
+     *
+     * @param  {number} zoomedMin
+     *         in pixels position where zoomed range starts
+     *
+     * @param  {number} zoomedMax
+     *         in pixels position where zoomed range ends
+     *
+     * @param  {boolean} inverted
+     *         flag if chart is inverted
+     *
+     * @param  {string} verb
+     *         use 'animate' or 'attr'
+     *
+     * @return {void}
      */
     drawMasks: function (zoomedMin, zoomedMax, inverted, verb) {
         var navigator = this,
@@ -624,6 +726,10 @@ Navigator.prototype = {
      * - all shades
      * - outline
      * - handles
+     *
+     * @function Highcharts.Navigator#renderElements
+     *
+     * @return {void}
      */
     renderElements: function () {
         var navigator = this,
@@ -688,7 +794,13 @@ Navigator.prototype = {
 
     /**
      * Update navigator
-     * @param {Object} options Options to merge in when updating navigator
+     *
+     * @function Highcharts.Navigator#update
+     *
+     * @param  {Highcharts.NavigatorOptions} options
+     *         Options to merge in when updating navigator
+     *
+     * @return {void}
      */
     update: function (options) {
         // Remove references to old navigator series in base series
@@ -706,10 +818,22 @@ Navigator.prototype = {
 
     /**
      * Render the navigator
-     * @param {Number} min X axis value minimum
-     * @param {Number} max X axis value maximum
-     * @param {Number} pxMin Pixel value minimum
-     * @param {Number} pxMax Pixel value maximum
+     *
+     * @function Highcharts.Navigator#render
+     *
+     * @param  {number} min
+     *         X axis value minimum
+     *
+     * @param  {number} max
+     *         X axis value maximum
+     *
+     * @param  {number} pxMin
+     *         Pixel value minimum
+     *
+     * @param  {number} pxMax
+     *         Pixel value maximum
+     *
+     * @return {void}
      */
     render: function (min, max, pxMin, pxMax) {
 
@@ -869,8 +993,8 @@ Navigator.prototype = {
             navigator.scrollbar.setRange(
                 // Use real value, not rounded because range can be very small
                 // (#1716)
-                navigator.zoomedMin / navigatorSize,
-                navigator.zoomedMax / navigatorSize
+                navigator.zoomedMin / (navigatorSize || 1),
+                navigator.zoomedMax / (navigatorSize || 1)
             );
         }
         navigator.rendered = true;
@@ -878,6 +1002,10 @@ Navigator.prototype = {
 
     /**
      * Set up the mouse and touch events for the navigator
+     *
+     * @function Highcharts.Navigator#addMouseEvents
+     *
+     * @return {void}
      */
     addMouseEvents: function () {
         var navigator = this,
@@ -935,8 +1063,14 @@ Navigator.prototype = {
 
     /**
      * Generate events for handles and masks
-     * @param {String} eventName Event name handler, 'mousedown' or 'touchstart'
-     * @returns {Array} An array of arrays: [DOMElement, eventName, callback].
+     *
+     * @function Highcharts.Navigator#getPartsEvents
+     *
+     * @param  {string} eventName
+     *         Event name handler, 'mousedown' or 'touchstart'
+     *
+     * @return {Array<*>}
+     *         An array of arrays: [DOMElement, eventName, callback].
      */
     getPartsEvents: function (eventName) {
         var navigator = this,
@@ -962,8 +1096,15 @@ Navigator.prototype = {
      * - will be stored for future drag&drop
      * - will directly shift to a new range
      *
-     * @param {Object} e Mouse event
-     * @param {Number} index Index of a mask in Navigator.shades array
+     * @function Highcharts.Navigator#shadesMousedown
+     *
+     * @param  {*} e
+     *         Mouse event
+     *
+     * @param  {number} index
+     *         Index of a mask in Navigator.shades array
+     *
+     * @return {void}
      */
     shadesMousedown: function (e, index) {
         e = this.chart.pointer.normalize(e);
@@ -999,7 +1140,7 @@ Navigator.prototype = {
                 left = Math.max(0, left);
             } else if (index === 2 && left + range >= navigatorSize) {
                 left = navigatorSize - range;
-                if (xAxis.reversed) {
+                if (navigator.reversedExtremes) {
                     // #7713
                     left -= range;
                     fixedMin = navigator.getUnionExtremes().dataMin;
@@ -1034,8 +1175,15 @@ Navigator.prototype = {
      * Mousedown on a handle mask.
      * Will store necessary information for drag&drop.
      *
-     * @param {Object} e Mouse event
-     * @param {Number} index Index of a handle in Navigator.handles array
+     * @function Highcharts.Navigator#handlesMousedown
+     *
+     * @param  {*} e
+     *         Mouse event
+     *
+     * @param  {number} index
+     *         Index of a handle in Navigator.handles array
+     *
+     * @return {void}
      */
     handlesMousedown: function (e, index) {
         e = this.chart.pointer.normalize(e);
@@ -1043,10 +1191,9 @@ Navigator.prototype = {
         var navigator = this,
             chart = navigator.chart,
             baseXAxis = chart.xAxis[0],
-            // For reversed axes, min and max are chagned,
+            // For reversed axes, min and max are changed,
             // so the other extreme should be stored
-            reverse = (chart.inverted && !baseXAxis.reversed) ||
-                (!chart.inverted && baseXAxis.reversed);
+            reverse = navigator.reversedExtremes;
 
         if (index === 0) {
             // Grab the left handle
@@ -1064,7 +1211,13 @@ Navigator.prototype = {
     },
     /**
      * Mouse move event based on x/y mouse position.
-     * @param {Object} e Mouse event
+     *
+     * @function Highcharts.Navigator#onMouseMove
+     *
+     * @param  {*} e
+     *         Mouse event
+     *
+     * @return {void}
      */
     onMouseMove: function (e) {
         var navigator = this,
@@ -1129,7 +1282,13 @@ Navigator.prototype = {
             if (
                 navigator.hasDragged &&
                 navigator.scrollbar &&
-                navigator.scrollbar.options.liveRedraw
+                pick(
+                    navigator.scrollbar.options.liveRedraw,
+
+                    // By default, don't run live redraw on VML, on touch
+                    // devices or if the chart is in boost.
+                    H.svg && !isTouchDevice && !this.chart.isBoosting
+                )
             ) {
                 e.DOMType = e.type; // DOMType is for IE8
                 setTimeout(function () {
@@ -1141,13 +1300,18 @@ Navigator.prototype = {
 
     /**
      * Mouse up event based on x/y mouse position.
-     * @param {Object} e Mouse event
+     *
+     * @function Highcharts.Navigator#onMouseUp
+     *
+     * @param  {*} e
+     *         Mouse event
+     *
+     * @return {void}
      */
     onMouseUp: function (e) {
         var navigator = this,
             chart = navigator.chart,
             xAxis = navigator.xAxis,
-            reversed = xAxis && xAxis.reversed,
             scrollbar = navigator.scrollbar,
             unionExtremes,
             fixedMin,
@@ -1172,13 +1336,13 @@ Navigator.prototype = {
             }
             // Snap to right edge (#4076)
             if (navigator.zoomedMax === navigator.size) {
-                fixedMax = reversed ?
+                fixedMax = navigator.reversedExtremes ?
                     unionExtremes.dataMin : unionExtremes.dataMax;
             }
 
             // Snap to left edge (#7576)
             if (navigator.zoomedMin === 0) {
-                fixedMin = reversed ?
+                fixedMin = navigator.reversedExtremes ?
                     unionExtremes.dataMax : unionExtremes.dataMin;
             }
 
@@ -1216,6 +1380,10 @@ Navigator.prototype = {
 
     /**
      * Removes the event handlers attached previously with addEvents.
+     *
+     * @function Highcharts.Navigator#removeEvents
+     *
+     * @return {void}
      */
     removeEvents: function () {
         if (this.eventsToUnbind) {
@@ -1229,6 +1397,10 @@ Navigator.prototype = {
 
     /**
      * Remove data events.
+     *
+     * @function Highcharts.Navigator#removeBaseSeriesEvents
+     *
+     * @return {void}
      */
     removeBaseSeriesEvents: function () {
         var baseSeries = this.baseSeries || [];
@@ -1252,6 +1424,12 @@ Navigator.prototype = {
 
     /**
      * Initiate the Navigator object
+     *
+     * @function Highcharts.Navigator#init
+     *
+     * @param  {Highcharts.Chart} chart
+     *
+     * @return {void}
      */
     init: function (chart) {
         var chartOptions = chart.options,
@@ -1288,22 +1466,6 @@ Navigator.prototype = {
             baseXaxis = baseSeries && baseSeries[0] && baseSeries[0].xAxis ||
                 chart.xAxis[0] || { options: {} };
 
-
-        // Make room for the navigator, can be placed around the chart:
-        addEvent(chart, 'getMargins', function () {
-            var marginName = navigator.opposite ? 'plotTop' : 'marginBottom';
-            if (chart.inverted) {
-                marginName = navigator.opposite ? 'marginRight' : 'plotLeft';
-            }
-
-            chart[marginName] = (chart[marginName] || 0) + (
-                navigatorEnabled || !chart.inverted ?
-                    navigator.outlineHeight :
-                    0
-            ) + navigatorOptions.margin;
-
-        });
-
         chart.isDirtyBox = true;
 
         if (navigator.navigatorEnabled) {
@@ -1318,6 +1480,7 @@ Navigator.prototype = {
                 isX: true,
                 type: 'datetime',
                 index: xAxisIndex,
+                isInternal: true,
                 offset: 0,
                 keepOrdinalPadding: true, // #2436
                 startOnTick: false,
@@ -1338,6 +1501,7 @@ Navigator.prototype = {
                 alignTicks: false,
                 offset: 0,
                 index: yAxisIndex,
+                isInternal: true,
                 zoomEnabled: false
             }, chart.inverted ? {
                 width: height
@@ -1365,6 +1529,12 @@ Navigator.prototype = {
                 );
             }
 
+            navigator.reversedExtremes = (
+                chart.inverted && !navigator.xAxis.reversed
+            ) || (
+                !chart.inverted && navigator.xAxis.reversed
+            );
+
             // Render items, so we can bind events to them:
             navigator.renderElements();
             // Add mouse events
@@ -1443,7 +1613,13 @@ Navigator.prototype = {
     /**
      * Get the union data extremes of the chart - the outer data extremes of the
      * base X axis and the navigator axis.
-     * @param {boolean} returnFalseOnNoBaseSeries - as the param says.
+     *
+     * @function Highcharts.Navigator#getUnionExtremes
+     *
+     * @param  {boolean} returnFalseOnNoBaseSeries
+     *         as the param says.
+     *
+     * @return {*}
      */
     getUnionExtremes: function (returnFalseOnNoBaseSeries) {
         var baseAxis = this.chart.xAxis[0],
@@ -1483,10 +1659,16 @@ Navigator.prototype = {
      * Set the base series and update the navigator series from this. With a bit
      * of modification we should be able to make this an API method to be called
      * from the outside
-     * @param  {Object} baseSeriesOptions
+     *
+     * @function Highcharts.Navigator#setBaseSeries
+     *
+     * @param  {*} baseSeriesOptions
      *         Additional series options for a navigator
-     * @param  {Boolean} [redraw]
+     *
+     * @param  {boolean} [redraw]
      *         Whether to redraw after update.
+     *
+     * @return {void}
      */
     setBaseSeries: function (baseSeriesOptions, redraw) {
         var chart = this.chart,
@@ -1523,9 +1705,17 @@ Navigator.prototype = {
         }
     },
 
-    /*
+    /**
      * Update series in the navigator from baseSeries, adding new if does not
      * exist.
+     *
+     * @function Highcharts.Navigator.updateNavigatorSeries
+     *
+     * @param  {boolean} addEvents
+     *
+     * @param  {boolean} redraw
+     *
+     * @return {void}
      */
     updateNavigatorSeries: function (addEvents, redraw) {
         var navigator = this,
@@ -1562,8 +1752,11 @@ Navigator.prototype = {
                             );
                             delete base.navigatorSeries;
                         }
-                        // Kill the nav series
-                        navSeries.destroy();
+                        // Kill the nav series. It may already have been
+                        // destroyed (#8715).
+                        if (navSeries.chart) {
+                            navSeries.destroy();
+                        }
                         return false;
                     }
                     return true;
@@ -1679,6 +1872,10 @@ Navigator.prototype = {
     /**
      * Add data events.
      * For example when main series is updated we need to recalculate extremes
+     *
+     * @function Highcharts.Navigator#addBaseSeriesEvent
+     *
+     * @return {void}
      */
     addBaseSeriesEvents: function () {
         var navigator = this,
@@ -1730,10 +1927,32 @@ Navigator.prototype = {
         }, this);
     },
 
+    /**
+     * Get minimum from all base series connected to the navigator
+     *
+     * @param  {number} currentSeriesMin
+     *         Minium from the current series
+     *
+     * @return {number} Minimum from all series
+     */
+    getBaseSeriesMin: function (currentSeriesMin) {
+        return H.reduce(
+            this.baseSeries,
+            function (min, series) {
+                return Math.min(min, series.xData[0]);
+            },
+            currentSeriesMin
+        );
+    },
+
     /**
      * Set the navigator x axis extremes to reflect the total. The navigator
      * extremes should always be the extremes of the union of all series in the
      * chart as well as the navigator series.
+     *
+     * @function Highcharts.Navigator#modifyNavigatorAxisExtremes
+     *
+     * @return {void}
      */
     modifyNavigatorAxisExtremes: function () {
         var xAxis = this.xAxis,
@@ -1756,6 +1975,10 @@ Navigator.prototype = {
 
     /**
      * Hook to modify the base axis extremes with information from the Navigator
+     *
+     * @function Highcharts.Navigator#modifyBaseAxisExtremes
+     *
+     * @return {void}
      */
     modifyBaseAxisExtremes: function () {
         var baseXAxis = this,
@@ -1798,8 +2021,11 @@ Navigator.prototype = {
                 if (!stickToMin) {
                     newMin = Math.max(
                         newMax - range,
-                        navigatorSeries && navigatorSeries.xData ?
-                            navigatorSeries.xData[0] : -Number.MAX_VALUE
+                        navigator.getBaseSeriesMin(
+                            navigatorSeries && navigatorSeries.xData ?
+                                navigatorSeries.xData[0] :
+                                -Number.MAX_VALUE
+                        )
                     );
                 }
             }
@@ -1821,15 +2047,20 @@ Navigator.prototype = {
      * Handler for updated data on the base series. When data is modified, the
      * navigator series must reflect it. This is called from the Chart.redraw
      * function before axis and series extremes are computed.
+     *
+     * @function Highcharts.Navigator#updateDataHandler
+     *
+     * @return {void}
      */
     updatedDataHandler: function () {
         var navigator = this.chart.navigator,
             baseSeries = this,
-            navigatorSeries = this.navigatorSeries;
+            navigatorSeries = this.navigatorSeries,
+            xDataMin = navigator.getBaseSeriesMin(baseSeries.xData[0]);
 
         // If the scrollbar is scrolled all the way to the right, keep right as
         // new data  comes in.
-        navigator.stickToMax = navigator.xAxis.reversed ?
+        navigator.stickToMax = navigator.reversedExtremes ?
             Math.round(navigator.zoomedMin) === 0 :
             Math.round(navigator.zoomedMax) >= Math.round(navigator.size);
 
@@ -1837,7 +2068,7 @@ Navigator.prototype = {
         // maximum. If the current axis minimum falls outside the new updated
         // dataset, we must adjust.
         navigator.stickToMin = isNumber(baseSeries.xAxis.min) &&
-            (baseSeries.xAxis.min <= baseSeries.xData[0]) &&
+            (baseSeries.xAxis.min <= xDataMin) &&
             (!this.chart.fixedRange || !navigator.stickToMax);
 
         // Set the navigator series data to the new data of the base series
@@ -1854,27 +2085,66 @@ Navigator.prototype = {
 
     /**
      * Add chart events, like redrawing navigator, when chart requires that.
+     *
+     * @function Highcharts.Navigator#addChartEvents
+     *
+     * @return {void}
      */
     addChartEvents: function () {
-        addEvent(this.chart, 'redraw', function () {
+        if (!this.eventsToUnbind) {
+            this.eventsToUnbind = [];
+        }
+
+        this.eventsToUnbind.push(
             // Move the scrollbar after redraw, like after data updata even if
             // axes don't redraw
-            var navigator = this.navigator,
-                xAxis = navigator && (
-                    navigator.baseSeries &&
-                    navigator.baseSeries[0] &&
-                    navigator.baseSeries[0].xAxis ||
-                    navigator.scrollbar && this.xAxis[0]
-                ); // #5709
-
-            if (xAxis) {
-                navigator.render(xAxis.min, xAxis.max);
-            }
-        });
+            addEvent(
+                this.chart,
+                'redraw',
+                function () {
+                    var navigator = this.navigator,
+                        xAxis = navigator && (
+                            navigator.baseSeries &&
+                            navigator.baseSeries[0] &&
+                            navigator.baseSeries[0].xAxis ||
+                            navigator.scrollbar && this.xAxis[0]
+                        ); // #5709
+
+                    if (xAxis) {
+                        navigator.render(xAxis.min, xAxis.max);
+                    }
+                }
+            ),
+            // Make room for the navigator, can be placed around the chart:
+            addEvent(
+                this.chart,
+                'getMargins',
+                function () {
+                    var chart = this,
+                        navigator = chart.navigator,
+                        marginName = navigator.opposite ?
+                            'plotTop' : 'marginBottom';
+                    if (chart.inverted) {
+                        marginName = navigator.opposite ?
+                            'marginRight' : 'plotLeft';
+                    }
+
+                    chart[marginName] = (chart[marginName] || 0) + (
+                        navigator.navigatorEnabled || !chart.inverted ?
+                            navigator.outlineHeight :
+                            0
+                    ) + navigator.navigatorOptions.margin;
+                }
+            )
+        );
     },
 
     /**
      * Destroys allocated elements.
+     *
+     * @function Highcharts.Navigator#destroy
+     *
+     * @return {void}
      */
     destroy: function () {