aw-highstock_rails 7.0.3

data/vendor/assets/javascripts/highstock/es-modules/parts/LogarithmicAxis.js

@@ -0,0 +1,168 @@
+/**
+ * (c) 2010-2019 Torstein Honsi
+ *
+ * License: www.highcharts.com/license
+ */
+
+'use strict';
+
+import H from './Globals.js';
+import './Utilities.js';
+
+var Axis = H.Axis,
+    getMagnitude = H.getMagnitude,
+    normalizeTickInterval = H.normalizeTickInterval,
+    pick = H.pick;
+
+/*
+ * Methods defined on the Axis prototype
+ */
+
+/**
+ * Set the tick positions of a logarithmic axis.
+ *
+ * @private
+ * @function Highcharts.Axis#getLogTickPositions
+ *
+ * @param {number} interval
+ *
+ * @param {number} min
+ *
+ * @param {number} max
+ *
+ * @param {number} minor
+ *
+ * @return {Array<number>}
+ */
+Axis.prototype.getLogTickPositions = function (interval, min, max, minor) {
+    var axis = this,
+        options = axis.options,
+        axisLength = axis.len,
+        // Since we use this method for both major and minor ticks,
+        // use a local variable and return the result
+        positions = [];
+
+    // Reset
+    if (!minor) {
+        axis._minorAutoInterval = null;
+    }
+
+    // First case: All ticks fall on whole logarithms: 1, 10, 100 etc.
+    if (interval >= 0.5) {
+        interval = Math.round(interval);
+        positions = axis.getLinearTickPositions(interval, min, max);
+
+    // Second case: We need intermediary ticks. For example
+    // 1, 2, 4, 6, 8, 10, 20, 40 etc.
+    } else if (interval >= 0.08) {
+        var roundedMin = Math.floor(min),
+            intermediate,
+            i,
+            j,
+            len,
+            pos,
+            lastPos,
+            break2;
+
+        if (interval > 0.3) {
+            intermediate = [1, 2, 4];
+
+        // 0.2 equals five minor ticks per 1, 10, 100 etc
+        } else if (interval > 0.15) {
+            intermediate = [1, 2, 4, 6, 8];
+        } else { // 0.1 equals ten minor ticks per 1, 10, 100 etc
+            intermediate = [1, 2, 3, 4, 5, 6, 7, 8, 9];
+        }
+
+        for (i = roundedMin; i < max + 1 && !break2; i++) {
+            len = intermediate.length;
+            for (j = 0; j < len && !break2; j++) {
+                pos = axis.log2lin(axis.lin2log(i) * intermediate[j]);
+                // #1670, lastPos is #3113
+                if (
+                    pos > min &&
+                    (!minor || lastPos <= max) &&
+                    lastPos !== undefined
+                ) {
+                    positions.push(lastPos);
+                }
+
+                if (lastPos > max) {
+                    break2 = true;
+                }
+                lastPos = pos;
+            }
+        }
+
+    // Third case: We are so deep in between whole logarithmic values that
+    // we might as well handle the tick positions like a linear axis. For
+    // example 1.01, 1.02, 1.03, 1.04.
+    } else {
+        var realMin = axis.lin2log(min),
+            realMax = axis.lin2log(max),
+            tickIntervalOption = minor ?
+                this.getMinorTickInterval() :
+                options.tickInterval,
+            filteredTickIntervalOption = tickIntervalOption === 'auto' ?
+                null :
+                tickIntervalOption,
+            tickPixelIntervalOption =
+                options.tickPixelInterval / (minor ? 5 : 1),
+            totalPixelLength = minor ?
+                axisLength / axis.tickPositions.length :
+                axisLength;
+
+        interval = pick(
+            filteredTickIntervalOption,
+            axis._minorAutoInterval,
+            (realMax - realMin) *
+                tickPixelIntervalOption / (totalPixelLength || 1)
+        );
+
+        interval = normalizeTickInterval(
+            interval,
+            null,
+            getMagnitude(interval)
+        );
+
+        positions = axis.getLinearTickPositions(
+            interval,
+            realMin,
+            realMax
+        ).map(axis.log2lin);
+
+        if (!minor) {
+            axis._minorAutoInterval = interval / 5;
+        }
+    }
+
+    // Set the axis-level tickInterval variable
+    if (!minor) {
+        axis.tickInterval = interval;
+    }
+    return positions;
+};
+
+/**
+ * @private
+ * @function Highcharts.Axis#log2lin
+ *
+ * @param {number} num
+ *
+ * @return {number}
+ */
+Axis.prototype.log2lin = function (num) {
+    return Math.log(num) / Math.LN10;
+};
+
+/**
+ * @private
+ * @function Highcharts.Axis#lin2log
+ *
+ * @param {number} num
+ *
+ * @return {number}
+ */
+Axis.prototype.lin2log = function (num) {
+    return Math.pow(10, num);
+};

data/vendor/assets/javascripts/highstock/es-modules/parts/MSPointer.js

@@ -0,0 +1,176 @@
+/**
+ * (c) 2010-2019 Torstein Honsi
+ *
+ * License: www.highcharts.com/license
+ */
+
+'use strict';
+
+import H from './Globals.js';
+import './Utilities.js';
+import './Pointer.js';
+
+var addEvent = H.addEvent,
+    charts = H.charts,
+    css = H.css,
+    doc = H.doc,
+    extend = H.extend,
+    hasTouch = H.hasTouch,
+    noop = H.noop,
+    Pointer = H.Pointer,
+    removeEvent = H.removeEvent,
+    win = H.win,
+    wrap = H.wrap;
+
+if (!hasTouch && (win.PointerEvent || win.MSPointerEvent)) {
+
+    // The touches object keeps track of the points being touched at all times
+    var touches = {},
+        hasPointerEvent = !!win.PointerEvent,
+        getWebkitTouches = function () {
+            var fake = [];
+
+            fake.item = function (i) {
+                return this[i];
+            };
+            H.objectEach(touches, function (touch) {
+                fake.push({
+                    pageX: touch.pageX,
+                    pageY: touch.pageY,
+                    target: touch.target
+                });
+            });
+            return fake;
+        },
+        translateMSPointer = function (e, method, wktype, func) {
+            var p;
+
+            if (
+                (
+                    e.pointerType === 'touch' ||
+                    e.pointerType === e.MSPOINTER_TYPE_TOUCH
+                ) && charts[H.hoverChartIndex]
+            ) {
+                func(e);
+                p = charts[H.hoverChartIndex].pointer;
+                p[method]({
+                    type: wktype,
+                    target: e.currentTarget,
+                    preventDefault: noop,
+                    touches: getWebkitTouches()
+                });
+            }
+        };
+
+    // Extend the Pointer prototype with methods for each event handler and more
+    extend(Pointer.prototype, /** @lends Pointer.prototype */ {
+
+        /**
+         * @private
+         * @function Highcharts.Pointer#onContainerPointerDown
+         *
+         * @param {Highcharts.PointerEventObject} e
+         */
+        onContainerPointerDown: function (e) {
+            translateMSPointer(
+                e,
+                'onContainerTouchStart',
+                'touchstart',
+                function (e) {
+                    touches[e.pointerId] = {
+                        pageX: e.pageX,
+                        pageY: e.pageY,
+                        target: e.currentTarget
+                    };
+                }
+            );
+        },
+
+        /**
+         * @private
+         * @function Highcharts.Pointer#onContainerPointerMove
+         *
+         * @param {Highcharts.PointerEventObject} e
+         */
+        onContainerPointerMove: function (e) {
+            translateMSPointer(
+                e,
+                'onContainerTouchMove',
+                'touchmove',
+                function (e) {
+                    touches[e.pointerId] = { pageX: e.pageX, pageY: e.pageY };
+                    if (!touches[e.pointerId].target) {
+                        touches[e.pointerId].target = e.currentTarget;
+                    }
+                }
+            );
+        },
+
+        /**
+         * @private
+         * @function Highcharts.Pointer#onDocumentPointerUp
+         *
+         * @param {Highcharts.PointerEventObject} e
+         */
+        onDocumentPointerUp: function (e) {
+            translateMSPointer(
+                e,
+                'onDocumentTouchEnd',
+                'touchend',
+                function (e) {
+                    delete touches[e.pointerId];
+                }
+            );
+        },
+
+        /**
+         * Add or remove the MS Pointer specific events
+         *
+         * @private
+         * @function Highcharts.Pointer#batchMSEvents
+         *
+         * @param {Function} fn
+         */
+        batchMSEvents: function (fn) {
+            fn(
+                this.chart.container,
+                hasPointerEvent ? 'pointerdown' : 'MSPointerDown',
+                this.onContainerPointerDown
+            );
+            fn(
+                this.chart.container,
+                hasPointerEvent ? 'pointermove' : 'MSPointerMove',
+                this.onContainerPointerMove
+            );
+            fn(
+                doc,
+                hasPointerEvent ? 'pointerup' : 'MSPointerUp',
+                this.onDocumentPointerUp
+            );
+        }
+    });
+
+    // Disable default IE actions for pinch and such on chart element
+    wrap(Pointer.prototype, 'init', function (proceed, chart, options) {
+        proceed.call(this, chart, options);
+        if (this.hasZoom) { // #4014
+            css(chart.container, {
+                '-ms-touch-action': 'none',
+                'touch-action': 'none'
+            });
+        }
+    });
+
+    // Add IE specific touch events to chart
+    wrap(Pointer.prototype, 'setDOMEvents', function (proceed) {
+        proceed.apply(this);
+        if (this.hasZoom || this.followTouchMove) {
+            this.batchMSEvents(addEvent);
+        }
+    });
+    // Destroy MS events also
+    wrap(Pointer.prototype, 'destroy', function (proceed) {
+        this.batchMSEvents(removeEvent);
+        proceed.call(this);
+    });
+}

data/vendor/assets/javascripts/highstock/es-modules/parts/Navigator.js

@@ -0,0 +1,2486 @@
+/**
+ * (c) 2010-2019 Torstein Honsi
+ *
+ * License: www.highcharts.com/license
+ */
+
+'use strict';
+
+import H from './Globals.js';
+import './Utilities.js';
+import './Color.js';
+import './Axis.js';
+import './Chart.js';
+import './Series.js';
+import './Options.js';
+import './Scrollbar.js';
+
+var addEvent = H.addEvent,
+    Axis = H.Axis,
+    Chart = H.Chart,
+    color = H.color,
+    defaultDataGroupingUnits = H.defaultDataGroupingUnits,
+    defaultOptions = H.defaultOptions,
+    defined = H.defined,
+    destroyObjectProperties = H.destroyObjectProperties,
+    erase = H.erase,
+    extend = H.extend,
+    hasTouch = H.hasTouch,
+    isArray = H.isArray,
+    isNumber = H.isNumber,
+    isTouchDevice = H.isTouchDevice,
+    merge = H.merge,
+    pick = H.pick,
+    removeEvent = H.removeEvent,
+    Scrollbar = H.Scrollbar,
+    Series = H.Series,
+    seriesTypes = H.seriesTypes,
+
+    units = [].concat(defaultDataGroupingUnits), // copy
+    defaultSeriesType,
+
+    // Finding the min or max of a set of variables where we don't know if they
+    // are defined, is a pattern that is repeated several places in Highcharts.
+    // Consider making this a global utility method.
+    numExt = function (extreme) {
+        var numbers = [].filter.call(arguments, isNumber);
+
+        if (numbers.length) {
+            return Math[extreme].apply(0, numbers);
+        }
+    };
+
+// add more resolution to units
+units[4] = ['day', [1, 2, 3, 4]]; // allow more days
+units[5] = ['week', [1, 2, 3]]; // allow more weeks
+
+defaultSeriesType = seriesTypes.areaspline === undefined ?
+    'line' :
+    'areaspline';
+
+extend(defaultOptions, {
+
+    /**
+     * Maximum range which can be set using the navigator's handles.
+     * Opposite of [xAxis.minRange](#xAxis.minRange).
+     *
+     * @sample {highstock} stock/navigator/maxrange/
+     *         Defined max and min range
+     *
+     * @type      {number}
+     * @since     6.0.0
+     * @product   highstock
+     * @apioption xAxis.maxRange
+     */
+
+    /**
+     * The navigator is a small series below the main series, displaying
+     * a view of the entire data set. It provides tools to zoom in and
+     * out on parts of the data as well as panning across the dataset.
+     *
+     * @product      highstock
+     * @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.
+         *
+         * @sample {highstock} stock/navigator/height/
+         *         A higher navigator
+         *
+         * @product highstock
+         */
+        height: 40,
+
+        /**
+         * The distance from the nearest element, the X axis or X axis labels.
+         *
+         * @sample {highstock} stock/navigator/margin/
+         *         A margin of 2 draws the navigator closer to the X axis labels
+         *
+         * @product highstock
+         */
+        margin: 25,
+
+        /**
+         * Whether the mask should be inside the range marking the zoomed
+         * range, or outside. In Highstock 1.x it was always `false`.
+         *
+         * @sample {highstock} stock/navigator/maskinside-false/
+         *         False, mask outside
+         *
+         * @since   2.0
+         * @product highstock
+         */
+        maskInside: true,
+
+        /**
+         * Options for the handles for dragging the zoomed area.
+         *
+         * @sample {highstock} stock/navigator/handles/
+         *         Colored handles
+         *
+         * @product highstock
+         */
+        handles: {
+            /**
+             * Width for handles.
+             *
+             * @sample {highstock} stock/navigator/styled-handles/
+             *         Styled handles
+             *
+             * @since   6.0.0
+             * @product highstock
+             */
+            width: 7,
+
+            /**
+             * Height for handles.
+             *
+             * @sample {highstock} stock/navigator/styled-handles/
+             *         Styled handles
+             *
+             * @since   6.0.0
+             * @product highstock
+             */
+            height: 15,
+
+            /**
+             * Array to define shapes of handles. 0-index for left, 1-index for
+             * right.
+             *
+             * Additionally, the URL to a graphic can be given on this form:
+             * `url(graphic.png)`. Note that for the image to be applied to
+             * exported charts, its URL needs to be accessible by the export
+             * server.
+             *
+             * Custom callbacks for symbol path generation can also be added to
+             * `Highcharts.SVGRenderer.prototype.symbols`. The callback is then
+             * used by its method name, as shown in the demo.
+             *
+             * @sample {highstock} stock/navigator/styled-handles/
+             *         Styled handles
+             *
+             * @type    {Array<string>}
+             * @default ["navigator-handle", "navigator-handle"]
+             * @since   6.0.0
+             * @product highstock
+             */
+            symbols: ['navigator-handle', 'navigator-handle'],
+
+            /**
+             * Allows to enable/disable handles.
+             *
+             * @since   6.0.0
+             * @product highstock
+             */
+            enabled: true,
+
+            /**
+             * The width for the handle border and the stripes inside.
+             *
+             * @sample {highstock} stock/navigator/styled-handles/
+             *         Styled handles
+             *
+             * @since     6.0.0
+             * @product   highstock
+             * @apioption navigator.handles.lineWidth
+             */
+            lineWidth: 1,
+
+            /**
+             * The fill for the handle.
+             *
+             * @type    {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
+             * @product highstock
+             */
+            backgroundColor: '#f2f2f2',
+
+            /**
+             * The stroke for the handle border and the stripes inside.
+             *
+             * @type    {Highcharts.ColorString}
+             * @product highstock
+             */
+            borderColor: '#999999'
+        },
+
+        /**
+         * The color of the mask covering the areas of the navigator series
+         * that are currently not visible in the main series. The default
+         * color is bluish with an opacity of 0.3 to see the series below.
+         *
+         * @see In styled mode, the mask is styled with the
+         *      `.highcharts-navigator-mask` and
+         *      `.highcharts-navigator-mask-inside` classes.
+         *
+         * @sample {highstock} stock/navigator/maskfill/
+         *         Blue, semi transparent mask
+         *
+         * @type    {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
+         * @default rgba(102,133,194,0.3)
+         * @product highstock
+         */
+        maskFill: color('#6685c2').setOpacity(0.3).get(),
+
+        /**
+         * The color of the line marking the currently zoomed area in the
+         * navigator.
+         *
+         * @sample {highstock} stock/navigator/outline/
+         *         2px blue outline
+         *
+         * @type    {Highcharts.ColorString}
+         * @default #cccccc
+         * @product highstock
+         */
+        outlineColor: '#cccccc',
+
+        /**
+         * The width of the line marking the currently zoomed area in the
+         * navigator.
+         *
+         * @see In styled mode, the outline stroke width is set with the
+         *      `.highcharts-navigator-outline` class.
+         *
+         * @sample {highstock} stock/navigator/outline/
+         *         2px blue outline
+         *
+         * @type    {number}
+         * @product highstock
+         */
+        outlineWidth: 1,
+
+        /**
+         * Options for the navigator series. Available options are the same
+         * as any series, documented at [plotOptions](#plotOptions.series)
+         * and [series](#series).
+         *
+         * Unless data is explicitly defined on navigator.series, the data
+         * is borrowed from the first series in the chart.
+         *
+         * Default series options for the navigator series are:
+         *
+         * <pre>series: {
+         *     type: 'areaspline',
+         *     fillOpacity: 0.05,
+         *     dataGrouping: {
+         *         smoothed: true
+         *     },
+         *     lineWidth: 1,
+         *     marker: {
+         *         enabled: false
+         *     }
+         * }</pre>
+         *
+         * @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
+         */
+        series: {
+
+            /**
+             * The type of the navigator series. Defaults to `areaspline` if
+             * defined, otherwise `line`.
+             *
+             * @type    {string}
+             * @default areaspline
+             */
+            type: defaultSeriesType,
+
+            /**
+             * The fill opacity of the navigator series.
+             */
+            fillOpacity: 0.05,
+
+            /**
+             * The pixel line width of the navigator series.
+             */
+            lineWidth: 1,
+
+            /**
+             * @ignore-option
+             */
+            compare: null,
+
+            /**
+             * Data grouping options for the navigator series.
+             *
+             * @extends plotOptions.series.dataGrouping
+             */
+            dataGrouping: {
+                approximation: 'average',
+                enabled: true,
+                groupPixelWidth: 2,
+                smoothed: true,
+                units: units
+            },
+
+            /**
+             * Data label options for the navigator series. Data labels are
+             * disabled by default on the navigator series.
+             *
+             * @extends plotOptions.series.dataLabels
+             */
+            dataLabels: {
+                enabled: false,
+                zIndex: 2 // #1839
+            },
+
+            id: 'highcharts-navigator-series',
+
+            className: 'highcharts-navigator-series',
+
+            /**
+             * Line color for the navigator series. Allows setting the color
+             * while disallowing the default candlestick setting.
+             *
+             * @type {Highcharts.ColorString|null}
+             */
+            lineColor: null, // #4602
+
+            marker: {
+                enabled: false
+            },
+
+            pointRange: 0,
+
+            /**
+             * 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|null}
+             */
+            threshold: null
+        },
+
+        /**
+         * Options for the navigator X axis. Default series options
+         * for the navigator xAxis are:
+         *
+         * <pre>xAxis: {
+         *     tickWidth: 0,
+         *     lineWidth: 0,
+         *     gridLineWidth: 1,
+         *     tickPixelInterval: 200,
+         *     labels: {
+         *            align: 'left',
+         *         style: {
+         *             color: '#888'
+         *         },
+         *         x: 3,
+         *         y: -4
+         *     }
+         * }</pre>
+         *
+         * @extends   xAxis
+         * @excluding linkedTo, maxZoom, minRange, opposite, range, scrollbar,
+         *            showEmpty, maxRange
+         * @product   highstock
+         */
+        xAxis: {
+            /**
+             * Additional range on the right side of the xAxis. Works similar to
+             * xAxis.maxPadding, but value is set in milliseconds.
+             * Can be set for both, main xAxis and navigator's xAxis.
+             *
+             * @since   6.0.0
+             * @product highstock
+             */
+            overscroll: 0,
+
+            className: 'highcharts-navigator-xaxis',
+
+            tickLength: 0,
+
+            lineWidth: 0,
+
+            gridLineColor: '#e6e6e6',
+
+            gridLineWidth: 1,
+
+            tickPixelInterval: 200,
+
+            labels: {
+
+                align: 'left',
+
+                /**
+                 * @type {Highcharts.CSSObject}
+                 */
+                style: {
+                    /** @ignore */
+                    color: '#999999'
+                },
+
+                x: 3,
+
+                y: -4
+
+            },
+
+            crosshair: false
+
+        },
+
+        /**
+         * Options for the navigator Y axis. Default series options
+         * for the navigator yAxis are:
+         *
+         * <pre>yAxis: {
+         *     gridLineWidth: 0,
+         *     startOnTick: false,
+         *     endOnTick: false,
+         *     minPadding: 0.1,
+         *     maxPadding: 0.1,
+         *     labels: {
+         *         enabled: false
+         *     },
+         *     title: {
+         *         text: null
+         *     },
+         *     tickWidth: 0
+         * }</pre>
+         *
+         * @extends   yAxis
+         * @excluding height, linkedTo, maxZoom, minRange, ordinal, range,
+         *            showEmpty, scrollbar, top, units, maxRange, minLength,
+         *            maxLength, resize
+         * @product   highstock
+         */
+        yAxis: {
+
+            className: 'highcharts-navigator-yaxis',
+
+            gridLineWidth: 0,
+
+            startOnTick: false,
+
+            endOnTick: false,
+
+            minPadding: 0.1,
+
+            maxPadding: 0.1,
+
+            labels: {
+                enabled: false
+            },
+
+            crosshair: false,
+
+            title: {
+                text: null
+            },
+
+            tickLength: 0,
+
+            tickWidth: 0
+
+        }
+
+    }
+
+});
+
+/**
+ * Draw one of the handles on the side of the zoomed range in the navigator
+ *
+ * @function Highcharts.Renderer#symbols.navigator-handle
+ *
+ * @param {boolean} inverted
+ *        flag for chart.inverted
+ *
+ * @return {Highcharts.SVGPathArray}
+ *         Path to be used in a handle
+ */
+H.Renderer.prototype.symbols['navigator-handle'] = function (
+    x,
+    y,
+    w,
+    h,
+    options
+) {
+    var halfWidth = options.width / 2,
+        markerPosition = Math.round(halfWidth / 3) + 0.5,
+        height = options.height;
+
+    return [
+        'M',
+        -halfWidth - 1, 0.5,
+        'L',
+        halfWidth, 0.5,
+        'L',
+        halfWidth, height + 0.5,
+        'L',
+        -halfWidth - 1, height + 0.5,
+        'L',
+        -halfWidth - 1, 0.5,
+        'M',
+        -markerPosition, 4,
+        'L',
+        -markerPosition, height - 3,
+        'M',
+        markerPosition - 1, 4,
+        'L',
+        markerPosition - 1, height - 3
+    ];
+};
+
+/**
+ * The Navigator class
+ *
+ * @private
+ * @class
+ * @name Highcharts.Navigator
+ *
+ * @param {Highcharts.Chart} chart
+ *        Chart object
+ */
+function Navigator(chart) {
+    this.init(chart);
+}
+
+Navigator.prototype = {
+
+    /**
+     * Draw one of the handles on the side of the zoomed range in the navigator
+     *
+     * @private
+     * @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'
+     */
+    drawHandle: function (x, index, inverted, verb) {
+        var navigator = this,
+            height = navigator.navigatorOptions.handles.height;
+
+        // Place it
+        navigator.handles[index][verb](inverted ? {
+            translateX: Math.round(navigator.left + navigator.height / 2),
+            translateY: Math.round(
+                navigator.top + parseInt(x, 10) + 0.5 - height
+            )
+        } : {
+            translateX: Math.round(navigator.left + parseInt(x, 10)),
+            translateY: Math.round(
+                navigator.top + navigator.height / 2 - height / 2 - 1
+            )
+        });
+    },
+
+    /**
+     * Render outline around the zoomed range
+     *
+     * @private
+     * @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'
+     */
+    drawOutline: function (zoomedMin, zoomedMax, inverted, verb) {
+        var navigator = this,
+            maskInside = navigator.navigatorOptions.maskInside,
+            outlineWidth = navigator.outline.strokeWidth(),
+            halfOutline = outlineWidth / 2,
+            outlineCorrection = (outlineWidth % 2) / 2, // #5800
+            outlineHeight = navigator.outlineHeight,
+            scrollbarHeight = navigator.scrollbarHeight,
+            navigatorSize = navigator.size,
+            left = navigator.left - scrollbarHeight,
+            navigatorTop = navigator.top,
+            verticalMin,
+            path;
+
+        if (inverted) {
+            left -= halfOutline;
+            verticalMin = navigatorTop + zoomedMax + outlineCorrection;
+            zoomedMax = navigatorTop + zoomedMin + outlineCorrection;
+
+            path = [
+                'M',
+                left + outlineHeight,
+                navigatorTop - scrollbarHeight - outlineCorrection, // top edge
+                'L',
+                left + outlineHeight,
+                verticalMin, // top right of zoomed range
+                'L',
+                left,
+                verticalMin, // top left of z.r.
+                'L',
+                left,
+                zoomedMax, // bottom left of z.r.
+                'L',
+                left + outlineHeight,
+                zoomedMax, // bottom right of z.r.
+                'L',
+                left + outlineHeight,
+                navigatorTop + navigatorSize + scrollbarHeight // bottom edge
+            ].concat(maskInside ? [
+                'M',
+                left + outlineHeight,
+                verticalMin - halfOutline, // upper left of zoomed range
+                'L',
+                left + outlineHeight,
+                zoomedMax + halfOutline // upper right of z.r.
+            ] : []);
+        } else {
+            zoomedMin += left + scrollbarHeight - outlineCorrection;
+            zoomedMax += left + scrollbarHeight - outlineCorrection;
+            navigatorTop += halfOutline;
+
+            path = [
+                'M',
+                left,
+                navigatorTop, // left
+                'L',
+                zoomedMin,
+                navigatorTop, // upper left of zoomed range
+                'L',
+                zoomedMin,
+                navigatorTop + outlineHeight, // lower left of z.r.
+                'L',
+                zoomedMax,
+                navigatorTop + outlineHeight, // lower right of z.r.
+                'L',
+                zoomedMax,
+                navigatorTop, // upper right of z.r.
+                'L',
+                left + navigatorSize + scrollbarHeight * 2,
+                navigatorTop // right
+            ].concat(maskInside ? [
+                'M',
+                zoomedMin - halfOutline,
+                navigatorTop, // upper left of zoomed range
+                'L',
+                zoomedMax + halfOutline,
+                navigatorTop // upper right of z.r.
+            ] : []);
+        }
+        navigator.outline[verb]({
+            d: path
+        });
+    },
+
+    /**
+     * Render outline around the zoomed range
+     *
+     * @private
+     * @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'
+     */
+    drawMasks: function (zoomedMin, zoomedMax, inverted, verb) {
+        var navigator = this,
+            left = navigator.left,
+            top = navigator.top,
+            navigatorHeight = navigator.height,
+            height,
+            width,
+            x,
+            y;
+
+        // Determine rectangle position & size
+        // According to (non)inverted position:
+        if (inverted) {
+            x = [left, left, left];
+            y = [top, top + zoomedMin, top + zoomedMax];
+            width = [navigatorHeight, navigatorHeight, navigatorHeight];
+            height = [
+                zoomedMin,
+                zoomedMax - zoomedMin,
+                navigator.size - zoomedMax
+            ];
+        } else {
+            x = [left, left + zoomedMin, left + zoomedMax];
+            y = [top, top, top];
+            width = [
+                zoomedMin,
+                zoomedMax - zoomedMin,
+                navigator.size - zoomedMax
+            ];
+            height = [navigatorHeight, navigatorHeight, navigatorHeight];
+        }
+        navigator.shades.forEach(function (shade, i) {
+            shade[verb]({
+                x: x[i],
+                y: y[i],
+                width: width[i],
+                height: height[i]
+            });
+        });
+    },
+
+    /**
+     * Generate DOM elements for a navigator:
+     *
+     * - main navigator group
+     *
+     * - all shades
+     *
+     * - outline
+     *
+     * - handles
+     *
+     * @private
+     * @function Highcharts.Navigator#renderElements
+     */
+    renderElements: function () {
+        var navigator = this,
+            navigatorOptions = navigator.navigatorOptions,
+            maskInside = navigatorOptions.maskInside,
+            chart = navigator.chart,
+            inverted = chart.inverted,
+            renderer = chart.renderer,
+            navigatorGroup,
+            mouseCursor = {
+                cursor: inverted ? 'ns-resize' : 'ew-resize'
+            };
+
+        // Create the main navigator group
+        navigator.navigatorGroup = navigatorGroup = renderer.g('navigator')
+            .attr({
+                zIndex: 8,
+                visibility: 'hidden'
+            })
+            .add();
+
+        // Create masks, each mask will get events and fill:
+        [
+            !maskInside,
+            maskInside,
+            !maskInside
+        ].forEach(function (hasMask, index) {
+            navigator.shades[index] = renderer.rect()
+                .addClass('highcharts-navigator-mask' +
+                    (index === 1 ? '-inside' : '-outside'))
+                .add(navigatorGroup);
+
+            if (!chart.styledMode) {
+                navigator.shades[index]
+                    .attr({
+                        fill: hasMask ?
+                            navigatorOptions.maskFill :
+                            'rgba(0,0,0,0)'
+                    })
+                    .css(index === 1 && mouseCursor);
+            }
+        });
+
+        // Create the outline:
+        navigator.outline = renderer.path()
+            .addClass('highcharts-navigator-outline')
+            .add(navigatorGroup);
+
+        if (!chart.styledMode) {
+            navigator.outline.attr({
+                'stroke-width': navigatorOptions.outlineWidth,
+                stroke: navigatorOptions.outlineColor
+            });
+        }
+
+        // Create the handlers:
+        if (navigatorOptions.handles.enabled) {
+            [0, 1].forEach(function (index) {
+                navigatorOptions.handles.inverted = chart.inverted;
+                navigator.handles[index] = renderer.symbol(
+                    navigatorOptions.handles.symbols[index],
+                    -navigatorOptions.handles.width / 2 - 1,
+                    0,
+                    navigatorOptions.handles.width,
+                    navigatorOptions.handles.height,
+                    navigatorOptions.handles
+                );
+                // zIndex = 6 for right handle, 7 for left.
+                // Can't be 10, because of the tooltip in inverted chart #2908
+                navigator.handles[index].attr({ zIndex: 7 - index })
+                    .addClass(
+                        'highcharts-navigator-handle ' +
+                        'highcharts-navigator-handle-' +
+                        ['left', 'right'][index]
+                    ).add(navigatorGroup);
+
+                if (!chart.styledMode) {
+                    var handlesOptions = navigatorOptions.handles;
+
+                    navigator.handles[index]
+                        .attr({
+                            fill: handlesOptions.backgroundColor,
+                            stroke: handlesOptions.borderColor,
+                            'stroke-width': handlesOptions.lineWidth
+                        })
+                        .css(mouseCursor);
+                }
+            });
+        }
+    },
+
+    /**
+     * Update navigator
+     *
+     * @private
+     * @function Highcharts.Navigator#update
+     *
+     * @param {Highcharts.NavigatorOptions} options
+     *        Options to merge in when updating navigator
+     */
+    update: function (options) {
+        // Remove references to old navigator series in base series
+        (this.series || []).forEach(function (series) {
+            if (series.baseSeries) {
+                delete series.baseSeries.navigatorSeries;
+            }
+        });
+        // Destroy and rebuild navigator
+        this.destroy();
+        var chartOptions = this.chart.options;
+
+        merge(true, chartOptions.navigator, this.options, options);
+        this.init(this.chart);
+    },
+
+    /**
+     * Render the navigator
+     *
+     * @private
+     * @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
+     */
+    render: function (min, max, pxMin, pxMax) {
+
+        var navigator = this,
+            chart = navigator.chart,
+            navigatorWidth,
+            scrollbarLeft,
+            scrollbarTop,
+            scrollbarHeight = navigator.scrollbarHeight,
+            navigatorSize,
+            xAxis = navigator.xAxis,
+            scrollbarXAxis = xAxis.fake ? chart.xAxis[0] : xAxis,
+            navigatorEnabled = navigator.navigatorEnabled,
+            zoomedMin,
+            zoomedMax,
+            rendered = navigator.rendered,
+            inverted = chart.inverted,
+            verb,
+            newMin,
+            newMax,
+            currentRange,
+            minRange = chart.xAxis[0].minRange,
+            maxRange = chart.xAxis[0].options.maxRange;
+
+        // Don't redraw while moving the handles (#4703).
+        if (this.hasDragged && !defined(pxMin)) {
+            return;
+        }
+
+        // Don't render the navigator until we have data (#486, #4202, #5172).
+        if (!isNumber(min) || !isNumber(max)) {
+            // However, if navigator was already rendered, we may need to resize
+            // it. For example hidden series, but visible navigator (#6022).
+            if (rendered) {
+                pxMin = 0;
+                pxMax = pick(xAxis.width, scrollbarXAxis.width);
+            } else {
+                return;
+            }
+        }
+
+        navigator.left = pick(
+            xAxis.left,
+            // in case of scrollbar only, without navigator
+            chart.plotLeft + scrollbarHeight + (inverted ? chart.plotWidth : 0)
+        );
+
+        navigator.size = zoomedMax = navigatorSize = pick(
+            xAxis.len,
+            (inverted ? chart.plotHeight : chart.plotWidth) -
+                2 * scrollbarHeight
+        );
+
+        if (inverted) {
+            navigatorWidth = scrollbarHeight;
+        } else {
+            navigatorWidth = navigatorSize + 2 * scrollbarHeight;
+        }
+
+        // Get the pixel position of the handles
+        pxMin = pick(pxMin, xAxis.toPixels(min, true));
+        pxMax = pick(pxMax, xAxis.toPixels(max, true));
+
+        // Verify (#1851, #2238)
+        if (!isNumber(pxMin) || Math.abs(pxMin) === Infinity) {
+            pxMin = 0;
+            pxMax = navigatorWidth;
+        }
+
+        // Are we below the minRange? (#2618, #6191)
+        newMin = xAxis.toValue(pxMin, true);
+        newMax = xAxis.toValue(pxMax, true);
+        currentRange = Math.abs(H.correctFloat(newMax - newMin));
+        if (currentRange < minRange) {
+            if (this.grabbedLeft) {
+                pxMin = xAxis.toPixels(newMax - minRange, true);
+            } else if (this.grabbedRight) {
+                pxMax = xAxis.toPixels(newMin + minRange, true);
+            }
+        } else if (defined(maxRange) && currentRange > maxRange) {
+            if (this.grabbedLeft) {
+                pxMin = xAxis.toPixels(newMax - maxRange, true);
+            } else if (this.grabbedRight) {
+                pxMax = xAxis.toPixels(newMin + maxRange, true);
+            }
+        }
+
+        // Handles are allowed to cross, but never exceed the plot area
+        navigator.zoomedMax = Math.min(Math.max(pxMin, pxMax, 0), zoomedMax);
+        navigator.zoomedMin = Math.min(
+            Math.max(
+                navigator.fixedWidth ?
+                    navigator.zoomedMax - navigator.fixedWidth :
+                    Math.min(pxMin, pxMax),
+                0
+            ),
+            zoomedMax
+        );
+
+        navigator.range = navigator.zoomedMax - navigator.zoomedMin;
+
+        zoomedMax = Math.round(navigator.zoomedMax);
+        zoomedMin = Math.round(navigator.zoomedMin);
+
+        if (navigatorEnabled) {
+            navigator.navigatorGroup.attr({
+                visibility: 'visible'
+            });
+            // Place elements
+            verb = rendered && !navigator.hasDragged ? 'animate' : 'attr';
+
+            navigator.drawMasks(zoomedMin, zoomedMax, inverted, verb);
+            navigator.drawOutline(zoomedMin, zoomedMax, inverted, verb);
+
+            if (navigator.navigatorOptions.handles.enabled) {
+                navigator.drawHandle(zoomedMin, 0, inverted, verb);
+                navigator.drawHandle(zoomedMax, 1, inverted, verb);
+            }
+        }
+
+        if (navigator.scrollbar) {
+            if (inverted) {
+                scrollbarTop = navigator.top - scrollbarHeight;
+                scrollbarLeft = navigator.left - scrollbarHeight +
+                    (navigatorEnabled || !scrollbarXAxis.opposite ? 0 :
+                        // Multiple axes has offsets:
+                        (scrollbarXAxis.titleOffset || 0) +
+                        // Self margin from the axis.title
+                        scrollbarXAxis.axisTitleMargin
+                    );
+                scrollbarHeight = navigatorSize + 2 * scrollbarHeight;
+            } else {
+                scrollbarTop = navigator.top +
+                    (navigatorEnabled ? navigator.height : -scrollbarHeight);
+                scrollbarLeft = navigator.left - scrollbarHeight;
+            }
+            // Reposition scrollbar
+            navigator.scrollbar.position(
+                scrollbarLeft,
+                scrollbarTop,
+                navigatorWidth,
+                scrollbarHeight
+            );
+            // Keep scale 0-1
+            navigator.scrollbar.setRange(
+                // Use real value, not rounded because range can be very small
+                // (#1716)
+                navigator.zoomedMin / (navigatorSize || 1),
+                navigator.zoomedMax / (navigatorSize || 1)
+            );
+        }
+        navigator.rendered = true;
+    },
+
+    /**
+     * Set up the mouse and touch events for the navigator
+     *
+     * @private
+     * @function Highcharts.Navigator#addMouseEvents
+     */
+    addMouseEvents: function () {
+        var navigator = this,
+            chart = navigator.chart,
+            container = chart.container,
+            eventsToUnbind = [],
+            mouseMoveHandler,
+            mouseUpHandler;
+
+        /**
+         * Create mouse events' handlers.
+         * Make them as separate functions to enable wrapping them:
+         */
+        navigator.mouseMoveHandler = mouseMoveHandler = function (e) {
+            navigator.onMouseMove(e);
+        };
+        navigator.mouseUpHandler = mouseUpHandler = function (e) {
+            navigator.onMouseUp(e);
+        };
+
+        // Add shades and handles mousedown events
+        eventsToUnbind = navigator.getPartsEvents('mousedown');
+        // Add mouse move and mouseup events. These are bind to doc/container,
+        // because Navigator.grabbedSomething flags are stored in mousedown
+        // events
+        eventsToUnbind.push(
+            addEvent(container, 'mousemove', mouseMoveHandler),
+            addEvent(container.ownerDocument, 'mouseup', mouseUpHandler)
+        );
+
+        // Touch events
+        if (hasTouch) {
+            eventsToUnbind.push(
+                addEvent(container, 'touchmove', mouseMoveHandler),
+                addEvent(container.ownerDocument, 'touchend', mouseUpHandler)
+            );
+            eventsToUnbind.concat(navigator.getPartsEvents('touchstart'));
+        }
+
+        navigator.eventsToUnbind = eventsToUnbind;
+
+        // Data events
+        if (navigator.series && navigator.series[0]) {
+            eventsToUnbind.push(
+                addEvent(
+                    navigator.series[0].xAxis,
+                    'foundExtremes',
+                    function () {
+                        chart.navigator.modifyNavigatorAxisExtremes();
+                    }
+                )
+            );
+        }
+    },
+
+    /**
+     * Generate events for handles and masks
+     *
+     * @private
+     * @function Highcharts.Navigator#getPartsEvents
+     *
+     * @param {string} eventName
+     *        Event name handler, 'mousedown' or 'touchstart'
+     *
+     * @return {Array<Function>}
+     *         An array of functions to remove navigator functions from the
+     *         events again.
+     */
+    getPartsEvents: function (eventName) {
+        var navigator = this,
+            events = [];
+
+        ['shades', 'handles'].forEach(function (name) {
+            navigator[name].forEach(function (navigatorItem, index) {
+                events.push(
+                    addEvent(
+                        navigatorItem.element,
+                        eventName,
+                        function (e) {
+                            navigator[name + 'Mousedown'](e, index);
+                        }
+                    )
+                );
+            });
+        });
+        return events;
+    },
+
+    /**
+     * Mousedown on a shaded mask, either:
+     *
+     * - will be stored for future drag&drop
+     *
+     * - will directly shift to a new range
+     *
+     * @private
+     * @function Highcharts.Navigator#shadesMousedown
+     *
+     * @param {global.PointerEventObject} e
+     *        Mouse event
+     *
+     * @param {number} index
+     *        Index of a mask in Navigator.shades array
+     */
+    shadesMousedown: function (e, index) {
+        e = this.chart.pointer.normalize(e);
+
+        var navigator = this,
+            chart = navigator.chart,
+            xAxis = navigator.xAxis,
+            zoomedMin = navigator.zoomedMin,
+            navigatorPosition = navigator.left,
+            navigatorSize = navigator.size,
+            range = navigator.range,
+            chartX = e.chartX,
+            fixedMax,
+            fixedMin,
+            ext,
+            left;
+
+        // For inverted chart, swap some options:
+        if (chart.inverted) {
+            chartX = e.chartY;
+            navigatorPosition = navigator.top;
+        }
+
+        if (index === 1) {
+            // Store information for drag&drop
+            navigator.grabbedCenter = chartX;
+            navigator.fixedWidth = range;
+            navigator.dragOffset = chartX - zoomedMin;
+        } else {
+            // Shift the range by clicking on shaded areas
+            left = chartX - navigatorPosition - range / 2;
+            if (index === 0) {
+                left = Math.max(0, left);
+            } else if (index === 2 && left + range >= navigatorSize) {
+                left = navigatorSize - range;
+                if (navigator.reversedExtremes) {
+                    // #7713
+                    left -= range;
+                    fixedMin = navigator.getUnionExtremes().dataMin;
+                } else {
+                    // #2293, #3543
+                    fixedMax = navigator.getUnionExtremes().dataMax;
+                }
+            }
+            if (left !== zoomedMin) { // it has actually moved
+                navigator.fixedWidth = range; // #1370
+
+                ext = xAxis.toFixedRange(
+                    left,
+                    left + range,
+                    fixedMin,
+                    fixedMax
+                );
+                if (defined(ext.min)) { // #7411
+                    chart.xAxis[0].setExtremes(
+                        Math.min(ext.min, ext.max),
+                        Math.max(ext.min, ext.max),
+                        true,
+                        null, // auto animation
+                        { trigger: 'navigator' }
+                    );
+                }
+            }
+        }
+    },
+
+    /**
+     * Mousedown on a handle mask.
+     * Will store necessary information for drag&drop.
+     *
+     * @private
+     * @function Highcharts.Navigator#handlesMousedown
+     *
+     * @param {Highcharts.PointerEventObject} e
+     *        Mouse event
+     *
+     * @param {number} index
+     *        Index of a handle in Navigator.handles array
+     */
+    handlesMousedown: function (e, index) {
+        e = this.chart.pointer.normalize(e);
+
+        var navigator = this,
+            chart = navigator.chart,
+            baseXAxis = chart.xAxis[0],
+            // For reversed axes, min and max are changed,
+            // so the other extreme should be stored
+            reverse = navigator.reversedExtremes;
+
+        if (index === 0) {
+            // Grab the left handle
+            navigator.grabbedLeft = true;
+            navigator.otherHandlePos = navigator.zoomedMax;
+            navigator.fixedExtreme = reverse ? baseXAxis.min : baseXAxis.max;
+        } else {
+            // Grab the right handle
+            navigator.grabbedRight = true;
+            navigator.otherHandlePos = navigator.zoomedMin;
+            navigator.fixedExtreme = reverse ? baseXAxis.max : baseXAxis.min;
+        }
+
+        chart.fixedRange = null;
+    },
+    /**
+     * Mouse move event based on x/y mouse position.
+     *
+     * @private
+     * @function Highcharts.Navigator#onMouseMove
+     *
+     * @param {Highcharts.PointerEventObject} e
+     *        Mouse event
+     */
+    onMouseMove: function (e) {
+        var navigator = this,
+            chart = navigator.chart,
+            left = navigator.left,
+            navigatorSize = navigator.navigatorSize,
+            range = navigator.range,
+            dragOffset = navigator.dragOffset,
+            inverted = chart.inverted,
+            chartX;
+
+
+        // In iOS, a mousemove event with e.pageX === 0 is fired when holding
+        // the finger down in the center of the scrollbar. This should be
+        // ignored.
+        if (!e.touches || e.touches[0].pageX !== 0) { // #4696
+
+            e = chart.pointer.normalize(e);
+            chartX = e.chartX;
+
+            // Swap some options for inverted chart
+            if (inverted) {
+                left = navigator.top;
+                chartX = e.chartY;
+            }
+
+            // Drag left handle or top handle
+            if (navigator.grabbedLeft) {
+                navigator.hasDragged = true;
+                navigator.render(
+                    0,
+                    0,
+                    chartX - left,
+                    navigator.otherHandlePos
+                );
+            // Drag right handle or bottom handle
+            } else if (navigator.grabbedRight) {
+                navigator.hasDragged = true;
+                navigator.render(
+                    0,
+                    0,
+                    navigator.otherHandlePos,
+                    chartX - left
+                );
+            // Drag scrollbar or open area in navigator
+            } else if (navigator.grabbedCenter) {
+                navigator.hasDragged = true;
+                if (chartX < dragOffset) { // outside left
+                    chartX = dragOffset;
+                // outside right
+                } else if (chartX > navigatorSize + dragOffset - range) {
+                    chartX = navigatorSize + dragOffset - range;
+                }
+
+                navigator.render(
+                    0,
+                    0,
+                    chartX - dragOffset,
+                    chartX - dragOffset + range
+                );
+            }
+            if (
+                navigator.hasDragged &&
+                navigator.scrollbar &&
+                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 () {
+                    navigator.onMouseUp(e);
+                }, 0);
+            }
+        }
+    },
+
+    /**
+     * Mouse up event based on x/y mouse position.
+     *
+     * @private
+     * @function Highcharts.Navigator#onMouseUp
+     *
+     * @param {Highcharts.PointerEventObject} e
+     *        Mouse event
+     */
+    onMouseUp: function (e) {
+        var navigator = this,
+            chart = navigator.chart,
+            xAxis = navigator.xAxis,
+            scrollbar = navigator.scrollbar,
+            unionExtremes,
+            fixedMin,
+            fixedMax,
+            ext,
+            DOMEvent = e.DOMEvent || e;
+
+        if (
+            // MouseUp is called for both, navigator and scrollbar (that order),
+            // which causes calling afterSetExtremes twice. Prevent first call
+            // by checking if scrollbar is going to set new extremes (#6334)
+            (navigator.hasDragged && (!scrollbar || !scrollbar.hasDragged)) ||
+            e.trigger === 'scrollbar'
+        ) {
+            unionExtremes = navigator.getUnionExtremes();
+
+            // When dragging one handle, make sure the other one doesn't change
+            if (navigator.zoomedMin === navigator.otherHandlePos) {
+                fixedMin = navigator.fixedExtreme;
+            } else if (navigator.zoomedMax === navigator.otherHandlePos) {
+                fixedMax = navigator.fixedExtreme;
+            }
+            // Snap to right edge (#4076)
+            if (navigator.zoomedMax === navigator.size) {
+                fixedMax = navigator.reversedExtremes ?
+                    unionExtremes.dataMin : unionExtremes.dataMax;
+            }
+
+            // Snap to left edge (#7576)
+            if (navigator.zoomedMin === 0) {
+                fixedMin = navigator.reversedExtremes ?
+                    unionExtremes.dataMax : unionExtremes.dataMin;
+            }
+
+            ext = xAxis.toFixedRange(
+                navigator.zoomedMin,
+                navigator.zoomedMax,
+                fixedMin,
+                fixedMax
+            );
+
+            if (defined(ext.min)) {
+                chart.xAxis[0].setExtremes(
+                    Math.min(ext.min, ext.max),
+                    Math.max(ext.min, ext.max),
+                    true,
+                    // Run animation when clicking buttons, scrollbar track etc,
+                    // but not when dragging handles or scrollbar
+                    navigator.hasDragged ? false : null,
+                    {
+                        trigger: 'navigator',
+                        triggerOp: 'navigator-drag',
+                        DOMEvent: DOMEvent // #1838
+                    }
+                );
+            }
+        }
+
+        if (e.DOMType !== 'mousemove') {
+            navigator.grabbedLeft = navigator.grabbedRight =
+                navigator.grabbedCenter = navigator.fixedWidth =
+                navigator.fixedExtreme = navigator.otherHandlePos =
+                navigator.hasDragged = navigator.dragOffset = null;
+        }
+    },
+
+    /**
+     * Removes the event handlers attached previously with addEvents.
+     *
+     * @private
+     * @function Highcharts.Navigator#removeEvents
+     */
+    removeEvents: function () {
+        if (this.eventsToUnbind) {
+            this.eventsToUnbind.forEach(function (unbind) {
+                unbind();
+            });
+            this.eventsToUnbind = undefined;
+        }
+        this.removeBaseSeriesEvents();
+    },
+
+    /**
+     * Remove data events.
+     *
+     * @private
+     * @function Highcharts.Navigator#removeBaseSeriesEvents
+     */
+    removeBaseSeriesEvents: function () {
+        var baseSeries = this.baseSeries || [];
+
+        if (this.navigatorEnabled && baseSeries[0]) {
+            if (this.navigatorOptions.adaptToUpdatedData !== false) {
+                baseSeries.forEach(function (series) {
+                    removeEvent(series, 'updatedData', this.updatedDataHandler);
+                }, this);
+            }
+
+            // We only listen for extremes-events on the first baseSeries
+            if (baseSeries[0].xAxis) {
+                removeEvent(
+                    baseSeries[0].xAxis,
+                    'foundExtremes',
+                    this.modifyBaseAxisExtremes
+                );
+            }
+        }
+    },
+
+    /**
+     * Initialize the Navigator object
+     *
+     * @private
+     * @function Highcharts.Navigator#init
+     *
+     * @param {Highcharts.Chart} chart
+     */
+    init: function (chart) {
+        var chartOptions = chart.options,
+            navigatorOptions = chartOptions.navigator,
+            navigatorEnabled = navigatorOptions.enabled,
+            scrollbarOptions = chartOptions.scrollbar,
+            scrollbarEnabled = scrollbarOptions.enabled,
+            height = navigatorEnabled ? navigatorOptions.height : 0,
+            scrollbarHeight = scrollbarEnabled ? scrollbarOptions.height : 0;
+
+        this.handles = [];
+        this.shades = [];
+
+        this.chart = chart;
+        this.setBaseSeries();
+
+        this.height = height;
+        this.scrollbarHeight = scrollbarHeight;
+        this.scrollbarEnabled = scrollbarEnabled;
+        this.navigatorEnabled = navigatorEnabled;
+        this.navigatorOptions = navigatorOptions;
+        this.scrollbarOptions = scrollbarOptions;
+        this.outlineHeight = height + scrollbarHeight;
+
+        this.opposite = pick(
+            navigatorOptions.opposite,
+            !navigatorEnabled && chart.inverted
+        ); // #6262
+
+        var navigator = this,
+            baseSeries = navigator.baseSeries,
+            xAxisIndex = chart.xAxis.length,
+            yAxisIndex = chart.yAxis.length,
+            baseXaxis = baseSeries && baseSeries[0] && baseSeries[0].xAxis ||
+                chart.xAxis[0] || { options: {} };
+
+        chart.isDirtyBox = true;
+
+        if (navigator.navigatorEnabled) {
+            // an x axis is required for scrollbar also
+            navigator.xAxis = new Axis(chart, merge({
+                // inherit base xAxis' break and ordinal options
+                breaks: baseXaxis.options.breaks,
+                ordinal: baseXaxis.options.ordinal
+            }, navigatorOptions.xAxis, {
+                id: 'navigator-x-axis',
+                yAxis: 'navigator-y-axis',
+                isX: true,
+                type: 'datetime',
+                index: xAxisIndex,
+                isInternal: true,
+                offset: 0,
+                keepOrdinalPadding: true, // #2436
+                startOnTick: false,
+                endOnTick: false,
+                minPadding: 0,
+                maxPadding: 0,
+                zoomEnabled: false
+            }, chart.inverted ? {
+                offsets: [scrollbarHeight, 0, -scrollbarHeight, 0],
+                width: height
+            } : {
+                offsets: [0, -scrollbarHeight, 0, scrollbarHeight],
+                height: height
+            }));
+
+            navigator.yAxis = new Axis(chart, merge(navigatorOptions.yAxis, {
+                id: 'navigator-y-axis',
+                alignTicks: false,
+                offset: 0,
+                index: yAxisIndex,
+                isInternal: true,
+                zoomEnabled: false
+            }, chart.inverted ? {
+                width: height
+            } : {
+                height: height
+            }));
+
+            // If we have a base series, initialize the navigator series
+            if (baseSeries || navigatorOptions.series.data) {
+                navigator.updateNavigatorSeries(false);
+
+            // If not, set up an event to listen for added series
+            } else if (chart.series.length === 0) {
+
+                navigator.unbindRedraw = addEvent(
+                    chart,
+                    'beforeRedraw',
+                    function () {
+                        // We've got one, now add it as base
+                        if (chart.series.length > 0 && !navigator.series) {
+                            navigator.setBaseSeries();
+                            navigator.unbindRedraw(); // reset
+                        }
+                    }
+                );
+            }
+
+            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
+            navigator.addMouseEvents();
+
+        // in case of scrollbar only, fake an x axis to get translation
+        } else {
+            navigator.xAxis = {
+                translate: function (value, reverse) {
+                    var axis = chart.xAxis[0],
+                        ext = axis.getExtremes(),
+                        scrollTrackWidth = axis.len - 2 * scrollbarHeight,
+                        min = numExt('min', axis.options.min, ext.dataMin),
+                        valueRange = numExt(
+                            'max',
+                            axis.options.max,
+                            ext.dataMax
+                        ) - min;
+
+                    return reverse ?
+                        // from pixel to value
+                        (value * valueRange / scrollTrackWidth) + min :
+                        // from value to pixel
+                        scrollTrackWidth * (value - min) / valueRange;
+                },
+                toPixels: function (value) {
+                    return this.translate(value);
+                },
+                toValue: function (value) {
+                    return this.translate(value, true);
+                },
+                toFixedRange: Axis.prototype.toFixedRange,
+                fake: true
+            };
+        }
+
+
+        // Initialize the scrollbar
+        if (chart.options.scrollbar.enabled) {
+            chart.scrollbar = navigator.scrollbar = new Scrollbar(
+                chart.renderer,
+                merge(chart.options.scrollbar, {
+                    margin: navigator.navigatorEnabled ? 0 : 10,
+                    vertical: chart.inverted
+                }),
+                chart
+            );
+            addEvent(navigator.scrollbar, 'changed', function (e) {
+                var range = navigator.size,
+                    to = range * this.to,
+                    from = range * this.from;
+
+                navigator.hasDragged = navigator.scrollbar.hasDragged;
+                navigator.render(0, 0, from, to);
+
+                if (
+                    chart.options.scrollbar.liveRedraw ||
+                    (
+                        e.DOMType !== 'mousemove' &&
+                        e.DOMType !== 'touchmove'
+                    )
+                ) {
+                    setTimeout(function () {
+                        navigator.onMouseUp(e);
+                    });
+                }
+            });
+        }
+
+        // Add data events
+        navigator.addBaseSeriesEvents();
+        // Add redraw events
+        navigator.addChartEvents();
+    },
+
+    /**
+     * Get the union data extremes of the chart - the outer data extremes of the
+     * base X axis and the navigator axis.
+     *
+     * @private
+     * @function Highcharts.Navigator#getUnionExtremes
+     *
+     * @param {boolean} returnFalseOnNoBaseSeries
+     *        as the param says.
+     *
+     * @return {*}
+     */
+    getUnionExtremes: function (returnFalseOnNoBaseSeries) {
+        var baseAxis = this.chart.xAxis[0],
+            navAxis = this.xAxis,
+            navAxisOptions = navAxis.options,
+            baseAxisOptions = baseAxis.options,
+            ret;
+
+        if (!returnFalseOnNoBaseSeries || baseAxis.dataMin !== null) {
+            ret = {
+                dataMin: pick( // #4053
+                    navAxisOptions && navAxisOptions.min,
+                    numExt(
+                        'min',
+                        baseAxisOptions.min,
+                        baseAxis.dataMin,
+                        navAxis.dataMin,
+                        navAxis.min
+                    )
+                ),
+                dataMax: pick(
+                    navAxisOptions && navAxisOptions.max,
+                    numExt(
+                        'max',
+                        baseAxisOptions.max,
+                        baseAxis.dataMax,
+                        navAxis.dataMax,
+                        navAxis.max
+                    )
+                )
+            };
+        }
+        return ret;
+    },
+
+    /**
+     * 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
+     *
+     * @private
+     * @function Highcharts.Navigator#setBaseSeries
+     *
+     * @param {*} baseSeriesOptions
+     *        Additional series options for a navigator
+     *
+     * @param {boolean} [redraw]
+     *        Whether to redraw after update.
+     */
+    setBaseSeries: function (baseSeriesOptions, redraw) {
+        var chart = this.chart,
+            baseSeries = this.baseSeries = [];
+
+        baseSeriesOptions = (
+            baseSeriesOptions ||
+            chart.options && chart.options.navigator.baseSeries ||
+            (chart.series.length ?
+                // Find the first non-navigator series (#8430)
+                H.find(chart.series, function (s) {
+                    return !s.options.isInternal;
+                }).index : 0)
+        );
+
+        // Iterate through series and add the ones that should be shown in
+        // navigator.
+        (chart.series || []).forEach(function (series, i) {
+            if (
+                // Don't include existing nav series
+                !series.options.isInternal &&
+                (
+                    series.options.showInNavigator ||
+                    (
+                        i === baseSeriesOptions ||
+                        series.options.id === baseSeriesOptions
+                    ) &&
+                    series.options.showInNavigator !== false
+                )
+            ) {
+                baseSeries.push(series);
+            }
+        });
+
+        // When run after render, this.xAxis already exists
+        if (this.xAxis && !this.xAxis.fake) {
+            this.updateNavigatorSeries(true, redraw);
+        }
+    },
+
+    /**
+     * Update series in the navigator from baseSeries, adding new if does not
+     * exist.
+     *
+     * @private
+     * @function Highcharts.Navigator.updateNavigatorSeries
+     *
+     * @param {boolean} addEvents
+     *
+     * @param {boolean} redraw
+     */
+    updateNavigatorSeries: function (addEvents, redraw) {
+        var navigator = this,
+            chart = navigator.chart,
+            baseSeries = navigator.baseSeries,
+            baseOptions,
+            mergedNavSeriesOptions,
+            chartNavigatorSeriesOptions = navigator.navigatorOptions.series,
+            baseNavigatorOptions,
+            navSeriesMixin = {
+                enableMouseTracking: false,
+                index: null, // #6162
+                linkedTo: null, // #6734
+                group: 'nav', // for columns
+                padXAxis: false,
+                xAxis: 'navigator-x-axis',
+                yAxis: 'navigator-y-axis',
+                showInLegend: false,
+                stacking: false, // #4823
+                isInternal: true
+            },
+            // Remove navigator series that are no longer in the baseSeries
+            navigatorSeries = navigator.series =
+                (navigator.series || []).filter(function (navSeries) {
+                    var base = navSeries.baseSeries;
+
+                    if (baseSeries.indexOf(base) < 0) { // Not in array
+                        // If there is still a base series connected to this
+                        // series, remove event handler and reference.
+                        if (base) {
+                            removeEvent(
+                                base,
+                                'updatedData',
+                                navigator.updatedDataHandler
+                            );
+                            delete base.navigatorSeries;
+                        }
+                        // Kill the nav series. It may already have been
+                        // destroyed (#8715).
+                        if (navSeries.chart) {
+                            navSeries.destroy();
+                        }
+                        return false;
+                    }
+                    return true;
+                });
+
+        // Go through each base series and merge the options to create new
+        // series
+        if (baseSeries && baseSeries.length) {
+            baseSeries.forEach(function eachBaseSeries(base) {
+                var linkedNavSeries = base.navigatorSeries,
+                    userNavOptions = extend(
+                        // Grab color and visibility from base as default
+                        {
+                            color: base.color,
+                            visible: base.visible
+                        },
+                        !isArray(chartNavigatorSeriesOptions) ?
+                            chartNavigatorSeriesOptions :
+                            defaultOptions.navigator.series
+                    );
+
+                // Don't update if the series exists in nav and we have disabled
+                // adaptToUpdatedData.
+                if (
+                    linkedNavSeries &&
+                    navigator.navigatorOptions.adaptToUpdatedData === false
+                ) {
+                    return;
+                }
+
+                navSeriesMixin.name = 'Navigator ' + baseSeries.length;
+
+                baseOptions = base.options || {};
+                baseNavigatorOptions = baseOptions.navigatorOptions || {};
+                mergedNavSeriesOptions = merge(
+                    baseOptions,
+                    navSeriesMixin,
+                    userNavOptions,
+                    baseNavigatorOptions
+                );
+
+                // Merge data separately. Do a slice to avoid mutating the
+                // navigator options from base series (#4923).
+                var navigatorSeriesData =
+                    baseNavigatorOptions.data || userNavOptions.data;
+
+                navigator.hasNavigatorData =
+                    navigator.hasNavigatorData || !!navigatorSeriesData;
+                mergedNavSeriesOptions.data =
+                    navigatorSeriesData ||
+                    baseOptions.data && baseOptions.data.slice(0);
+
+                // Update or add the series
+                if (linkedNavSeries && linkedNavSeries.options) {
+                    linkedNavSeries.update(mergedNavSeriesOptions, redraw);
+                } else {
+                    base.navigatorSeries = chart.initSeries(
+                        mergedNavSeriesOptions
+                    );
+                    base.navigatorSeries.baseSeries = base; // Store ref
+                    navigatorSeries.push(base.navigatorSeries);
+                }
+            });
+        }
+
+        // If user has defined data (and no base series) or explicitly defined
+        // navigator.series as an array, we create these series on top of any
+        // base series.
+        if (
+            chartNavigatorSeriesOptions.data &&
+            !(baseSeries && baseSeries.length) ||
+            isArray(chartNavigatorSeriesOptions)
+        ) {
+            navigator.hasNavigatorData = false;
+            // Allow navigator.series to be an array
+            chartNavigatorSeriesOptions = H.splat(chartNavigatorSeriesOptions);
+            chartNavigatorSeriesOptions
+                .forEach(function (userSeriesOptions, i) {
+                    navSeriesMixin.name =
+                    'Navigator ' + (navigatorSeries.length + 1);
+                    mergedNavSeriesOptions = merge(
+                        defaultOptions.navigator.series,
+                        {
+                        // Since we don't have a base series to pull color from,
+                        // try to fake it by using color from series with same
+                        // index. Otherwise pull from the colors array. We need
+                        // an explicit color as otherwise updates will increment
+                        // color counter and we'll get a new color for each
+                        // update of the nav series.
+                            color: chart.series[i] &&
+                            !chart.series[i].options.isInternal &&
+                            chart.series[i].color ||
+                            chart.options.colors[i] ||
+                            chart.options.colors[0]
+                        },
+                        navSeriesMixin,
+                        userSeriesOptions
+                    );
+                    mergedNavSeriesOptions.data = userSeriesOptions.data;
+                    if (mergedNavSeriesOptions.data) {
+                        navigator.hasNavigatorData = true;
+                        navigatorSeries.push(
+                            chart.initSeries(mergedNavSeriesOptions)
+                        );
+                    }
+                });
+        }
+
+        if (addEvents) {
+            this.addBaseSeriesEvents();
+        }
+    },
+
+    /**
+     * Add data events.
+     * For example when main series is updated we need to recalculate extremes
+     *
+     * @private
+     * @function Highcharts.Navigator#addBaseSeriesEvent
+     */
+    addBaseSeriesEvents: function () {
+        var navigator = this,
+            baseSeries = navigator.baseSeries || [];
+
+        // Bind modified extremes event to first base's xAxis only.
+        // In event of > 1 base-xAxes, the navigator will ignore those.
+        // Adding this multiple times to the same axis is no problem, as
+        // duplicates should be discarded by the browser.
+        if (baseSeries[0] && baseSeries[0].xAxis) {
+            addEvent(
+                baseSeries[0].xAxis,
+                'foundExtremes',
+                this.modifyBaseAxisExtremes
+            );
+        }
+
+        baseSeries.forEach(function (base) {
+            // Link base series show/hide to navigator series visibility
+            addEvent(base, 'show', function () {
+                if (this.navigatorSeries) {
+                    this.navigatorSeries.setVisible(true, false);
+                }
+            });
+            addEvent(base, 'hide', function () {
+                if (this.navigatorSeries) {
+                    this.navigatorSeries.setVisible(false, false);
+                }
+            });
+
+            // Respond to updated data in the base series, unless explicitily
+            // not adapting to data changes.
+            if (this.navigatorOptions.adaptToUpdatedData !== false) {
+                if (base.xAxis) {
+                    addEvent(base, 'updatedData', this.updatedDataHandler);
+                }
+            }
+
+            // Handle series removal
+            addEvent(base, 'remove', function () {
+                if (this.navigatorSeries) {
+                    erase(navigator.series, this.navigatorSeries);
+                    if (defined(this.navigatorSeries.options)) {
+                        this.navigatorSeries.remove(false);
+                    }
+                    delete this.navigatorSeries;
+                }
+            });
+        }, 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 this.baseSeries.reduce(
+            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.
+     *
+     * @private
+     * @function Highcharts.Navigator#modifyNavigatorAxisExtremes
+     */
+    modifyNavigatorAxisExtremes: function () {
+        var xAxis = this.xAxis,
+            unionExtremes;
+
+        if (xAxis.getExtremes) {
+            unionExtremes = this.getUnionExtremes(true);
+            if (
+                unionExtremes &&
+                (
+                    unionExtremes.dataMin !== xAxis.min ||
+                    unionExtremes.dataMax !== xAxis.max
+                )
+            ) {
+                xAxis.min = unionExtremes.dataMin;
+                xAxis.max = unionExtremes.dataMax;
+            }
+        }
+    },
+
+    /**
+     * Hook to modify the base axis extremes with information from the Navigator
+     *
+     * @private
+     * @function Highcharts.Navigator#modifyBaseAxisExtremes
+     */
+    modifyBaseAxisExtremes: function () {
+        var baseXAxis = this,
+            navigator = baseXAxis.chart.navigator,
+            baseExtremes = baseXAxis.getExtremes(),
+            baseMin = baseExtremes.min,
+            baseMax = baseExtremes.max,
+            baseDataMin = baseExtremes.dataMin,
+            baseDataMax = baseExtremes.dataMax,
+            range = baseMax - baseMin,
+            stickToMin = navigator.stickToMin,
+            stickToMax = navigator.stickToMax,
+            overscroll = pick(baseXAxis.options.overscroll, 0),
+            newMax,
+            newMin,
+            navigatorSeries = navigator.series && navigator.series[0],
+            hasSetExtremes = !!baseXAxis.setExtremes,
+
+            // When the extremes have been set by range selector button, don't
+            // stick to min or max. The range selector buttons will handle the
+            // extremes. (#5489)
+            unmutable = baseXAxis.eventArgs &&
+                baseXAxis.eventArgs.trigger === 'rangeSelectorButton';
+
+        if (!unmutable) {
+
+            // If the zoomed range is already at the min, move it to the right
+            // as new data comes in
+            if (stickToMin) {
+                newMin = baseDataMin;
+                newMax = newMin + range;
+            }
+
+            // If the zoomed range is already at the max, move it to the right
+            // as new data comes in
+            if (stickToMax) {
+                newMax = baseDataMax + overscroll;
+
+                // if stickToMin is true, the new min value is set above
+                if (!stickToMin) {
+                    newMin = Math.max(
+                        newMax - range,
+                        navigator.getBaseSeriesMin(
+                            navigatorSeries && navigatorSeries.xData ?
+                                navigatorSeries.xData[0] :
+                                -Number.MAX_VALUE
+                        )
+                    );
+                }
+            }
+
+            // Update the extremes
+            if (hasSetExtremes && (stickToMin || stickToMax)) {
+                if (isNumber(newMin)) {
+                    baseXAxis.min = baseXAxis.userMin = newMin;
+                    baseXAxis.max = baseXAxis.userMax = newMax;
+                }
+            }
+        }
+
+        // Reset
+        navigator.stickToMin = navigator.stickToMax = null;
+    },
+
+    /**
+     * 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.
+     *
+     * @private
+     * @function Highcharts.Navigator#updateDataHandler
+     */
+    updatedDataHandler: function () {
+        var navigator = this.chart.navigator,
+            baseSeries = this,
+            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.reversedExtremes ?
+            Math.round(navigator.zoomedMin) === 0 :
+            Math.round(navigator.zoomedMax) >= Math.round(navigator.size);
+
+        // Detect whether the zoomed area should stick to the minimum or
+        // maximum. If the current axis minimum falls outside the new updated
+        // dataset, we must adjust.
+        navigator.stickToMin = isNumber(baseSeries.xAxis.min) &&
+            (baseSeries.xAxis.min <= xDataMin) &&
+            (!this.chart.fixedRange || !navigator.stickToMax);
+
+        // Set the navigator series data to the new data of the base series
+        if (navigatorSeries && !navigator.hasNavigatorData) {
+            navigatorSeries.options.pointStart = baseSeries.xData[0];
+            navigatorSeries.setData(
+                baseSeries.options.data,
+                false,
+                null,
+                false
+            ); // #5414
+        }
+    },
+
+    /**
+     * Add chart events, like redrawing navigator, when chart requires that.
+     *
+     * @private
+     * @function Highcharts.Navigator#addChartEvents
+     */
+    addChartEvents: function () {
+        if (!this.eventsToUnbind) {
+            this.eventsToUnbind = [];
+        }
+
+        this.eventsToUnbind.push(
+            // Move the scrollbar after redraw, like after data updata even if
+            // axes don't redraw
+            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.
+     *
+     * @private
+     * @function Highcharts.Navigator#destroy
+     */
+    destroy: function () {
+
+        // Disconnect events added in addEvents
+        this.removeEvents();
+
+        if (this.xAxis) {
+            erase(this.chart.xAxis, this.xAxis);
+            erase(this.chart.axes, this.xAxis);
+        }
+        if (this.yAxis) {
+            erase(this.chart.yAxis, this.yAxis);
+            erase(this.chart.axes, this.yAxis);
+        }
+        // Destroy series
+        (this.series || []).forEach(function (s) {
+            if (s.destroy) {
+                s.destroy();
+            }
+        });
+
+        // Destroy properties
+        [
+            'series', 'xAxis', 'yAxis', 'shades', 'outline', 'scrollbarTrack',
+            'scrollbarRifles', 'scrollbarGroup', 'scrollbar', 'navigatorGroup',
+            'rendered'
+        ].forEach(function (prop) {
+            if (this[prop] && this[prop].destroy) {
+                this[prop].destroy();
+            }
+            this[prop] = null;
+        }, this);
+
+        // Destroy elements in collection
+        [this.handles].forEach(function (coll) {
+            destroyObjectProperties(coll);
+        }, this);
+    }
+};
+
+H.Navigator = Navigator;
+
+/*
+ * For Stock charts, override selection zooming with some special features
+ * because X axis zooming is already allowed by the Navigator and Range
+ * selector.
+ */
+addEvent(Axis, 'zoom', function (e) {
+    var chart = this.chart,
+        chartOptions = chart.options,
+        zoomType = chartOptions.chart.zoomType,
+        pinchType = chartOptions.chart.pinchType,
+        previousZoom,
+        navigator = chartOptions.navigator,
+        rangeSelector = chartOptions.rangeSelector;
+
+    if (this.isXAxis && ((navigator && navigator.enabled) ||
+            (rangeSelector && rangeSelector.enabled))) {
+
+        // For y only zooming, ignore the X axis completely
+        if (zoomType === 'y') {
+            e.zoomed = false;
+
+        // For xy zooming, record the state of the zoom before zoom selection,
+        // then when the reset button is pressed, revert to this state. This
+        // should apply only if the chart is initialized with a range (#6612),
+        // otherwise zoom all the way out.
+        } else if (
+            (
+                (!isTouchDevice && zoomType === 'xy') ||
+                (isTouchDevice && pinchType === 'xy')
+            ) &&
+            this.options.range
+        ) {
+
+            previousZoom = this.previousZoom;
+            if (defined(e.newMin)) {
+                this.previousZoom = [this.min, this.max];
+            } else if (previousZoom) {
+                e.newMin = previousZoom[0];
+                e.newMax = previousZoom[1];
+                delete this.previousZoom;
+            }
+        }
+
+    }
+    if (e.zoomed !== undefined) {
+        e.preventDefault();
+    }
+});
+
+/**
+ * For Stock charts. For x only zooming, do not to create the zoom button
+ * because X axis zooming is already allowed by the Navigator and Range
+ * selector. (#9285)
+ */
+addEvent(Chart, 'beforeShowResetZoom', function () {
+    var chartOptions = this.options,
+        navigator = chartOptions.navigator,
+        rangeSelector = chartOptions.rangeSelector;
+
+    if (
+        (
+            (navigator && navigator.enabled) ||
+            (rangeSelector && rangeSelector.enabled)
+        ) && (
+            (!isTouchDevice && chartOptions.chart.zoomType === 'x') ||
+            (isTouchDevice && chartOptions.chart.pinchType === 'x')
+        )
+    ) {
+        return false;
+    }
+});
+
+// Initialize navigator for stock charts
+addEvent(Chart, 'beforeRender', function () {
+    var options = this.options;
+
+    if (options.navigator.enabled || options.scrollbar.enabled) {
+        this.scroller = this.navigator = new Navigator(this);
+    }
+});
+
+/*
+ * For stock charts, extend the Chart.setChartSize method so that we can set the
+ * final top position of the navigator once the height of the chart, including
+ * the legend, is determined. #367. We can't use Chart.getMargins, because
+ * labels offsets are not calculated yet.
+ */
+addEvent(Chart, 'afterSetChartSize', function () {
+
+    var legend = this.legend,
+        navigator = this.navigator,
+        scrollbarHeight,
+        legendOptions,
+        xAxis,
+        yAxis;
+
+    if (navigator) {
+        legendOptions = legend && legend.options;
+        xAxis = navigator.xAxis;
+        yAxis = navigator.yAxis;
+        scrollbarHeight = navigator.scrollbarHeight;
+
+        // Compute the top position
+        if (this.inverted) {
+            navigator.left = navigator.opposite ?
+                this.chartWidth - scrollbarHeight - navigator.height :
+                this.spacing[3] + scrollbarHeight;
+            navigator.top = this.plotTop + scrollbarHeight;
+        } else {
+            navigator.left = this.plotLeft + scrollbarHeight;
+            navigator.top = navigator.navigatorOptions.top ||
+                this.chartHeight -
+                navigator.height -
+                scrollbarHeight -
+                this.spacing[2] -
+                (
+                    this.rangeSelector && this.extraBottomMargin ?
+                        this.rangeSelector.getHeight() :
+                        0
+                ) -
+                (
+                    (
+                        legendOptions &&
+                        legendOptions.verticalAlign === 'bottom' &&
+                        legendOptions.enabled &&
+                        !legendOptions.floating
+                    ) ?
+                        legend.legendHeight + pick(legendOptions.margin, 10) :
+                        0
+                );
+        }
+
+        if (xAxis && yAxis) { // false if navigator is disabled (#904)
+
+            if (this.inverted) {
+                xAxis.options.left = yAxis.options.left = navigator.left;
+            } else {
+                xAxis.options.top = yAxis.options.top = navigator.top;
+            }
+
+            xAxis.setAxisSize();
+            yAxis.setAxisSize();
+        }
+    }
+});
+
+// Merge options, if no scrolling exists yet
+addEvent(Chart, 'update', function (e) {
+
+    var navigatorOptions = (e.options.navigator || {}),
+        scrollbarOptions = (e.options.scrollbar || {});
+
+    if (!this.navigator && !this.scroller &&
+        (navigatorOptions.enabled || scrollbarOptions.enabled)
+    ) {
+        merge(true, this.options.navigator, navigatorOptions);
+        merge(true, this.options.scrollbar, scrollbarOptions);
+        delete e.options.navigator;
+        delete e.options.scrollbar;
+    }
+
+});
+
+// Initialize navigator, if no scrolling exists yet
+addEvent(Chart, 'afterUpdate', function () {
+
+    if (!this.navigator && !this.scroller &&
+        (this.options.navigator.enabled || this.options.scrollbar.enabled)
+    ) {
+        this.scroller = this.navigator = new Navigator(this);
+    }
+
+});
+
+// Handle adding new series
+addEvent(Chart, 'afterAddSeries', function () {
+    if (this.navigator) {
+        // Recompute which series should be shown in navigator, and add them
+        this.navigator.setBaseSeries(null, false);
+    }
+});
+
+// Handle updating series
+addEvent(Series, 'afterUpdate', function () {
+    if (this.chart.navigator && !this.options.isInternal) {
+        this.chart.navigator.setBaseSeries(null, false);
+    }
+});
+
+Chart.prototype.callbacks.push(function (chart) {
+    var extremes,
+        navigator = chart.navigator;
+
+    // Initialize the navigator
+    if (navigator && chart.xAxis[0]) {
+        extremes = chart.xAxis[0].getExtremes();
+        navigator.render(extremes.min, extremes.max);
+    }
+});