highcharts 6.1.1 → 6.2.0

package/js/modules/stock.src.js

@@ -1,8 +1,8 @@
 /**
- * @license Highcharts JS v6.1.1 (2018-06-27)
+ * @license Highcharts JS v6.2.0 (2018-10-17)
  * Highstock as a plugin for Highcharts
  *
- * (c) 2017 Torstein Honsi
+ * (c) 2018 Torstein Honsi
  *
  * License: www.highcharts.com/license
  */
@@ -10,13 +10,17 @@
 (function (factory) {
 	if (typeof module === 'object' && module.exports) {
 		module.exports = factory;
+	} else if (typeof define === 'function' && define.amd) {
+		define(function () {
+			return factory;
+		});
 	} else {
 		factory(Highcharts);
 	}
 }(function (Highcharts) {
 	(function (H) {
 		/**
-		 * (c) 2010-2017 Torstein Honsi
+		 * (c) 2010-2018 Torstein Honsi
 		 *
 		 * License: www.highcharts.com/license
 		 */
@@ -78,9 +82,14 @@
 		        tickPixelIntervalOption = this.options.tickPixelInterval,
 		        time = this.chart.time;
 
-		    // The positions are not always defined, for example for ordinal positions when data
-		    // has regular interval (#1557, #2090)
-		    if ((!this.options.ordinal && !this.options.breaks) || !positions || positions.length < 3 || min === undefined) {
+		    // The positions are not always defined, for example for ordinal positions
+		    // when data has regular interval (#1557, #2090)
+		    if (
+		        (!this.options.ordinal && !this.options.breaks) ||
+		        !positions ||
+		        positions.length < 3 ||
+		        min === undefined
+		    ) {
 		        return proceed.call(this, normalizedInterval, min, max, startOfWeek);
 		    }
 
@@ -247,7 +256,8 @@
 		            overscrollPointsRange = Number.MAX_VALUE,
 		            ignoreHiddenSeries = axis.chart.options.chart.ignoreHiddenSeries,
 		            isNavigatorAxis = axis.options.className === 'highcharts-navigator-xaxis',
-		            i;
+		            i,
+		            hasBoostedSeries;
 
 		        if (
 		            axis.options.overscroll &&
@@ -327,8 +337,16 @@
 		                    }
 		                }
 
+		                if (series.isSeriesBoosting) {
+		                    hasBoostedSeries = true;
+		                }
+
 		            });
 
+		            if (hasBoostedSeries) {
+		                ordinalPositions.length = 0;
+		            }
+
 		            // cache the length
 		            len = ordinalPositions.length;
 
@@ -687,7 +705,7 @@
 		     * Make the tick intervals closer because the ordinal gaps make the ticks spread out or cluster
 		     */
 		    postProcessTickInterval: function (tickInterval) {
-		        // Problem: http://jsfiddle.net/highcharts/FQm4E/1/
+		        // Problem: https://jsfiddle.net/highcharts/FQm4E/1/
 		        // This is a case where this algorithm doesn't work optimally. In this case, the
 		        // tick labels are spread out per week, but all the gaps reside within weeks. So
 		        // we have a situation where the labels are courser than the ordinal gaps, and
@@ -816,7 +834,7 @@
 	}(Highcharts));
 	(function (H) {
 		/**
-		 * (c) 2009-2017 Torstein Honsi
+		 * (c) 2009-2018 Torstein Honsi
 		 *
 		 * License: www.highcharts.com/license
 		 */
@@ -888,8 +906,14 @@
 		    }
 		});
 
+		addEvent(Axis, 'afterInit', function () {
+		    if (typeof this.setBreaks === 'function') {
+		        this.setBreaks(this.options.breaks, false);
+		    }
+		});
+
 		addEvent(Axis, 'afterSetTickPositions', function () {
-		    if (this.options.breaks) {
+		    if (this.isBroken) {
 		        var axis = this,
 		            tickPositions = this.tickPositions,
 		            info = this.tickPositions.info,
@@ -909,55 +933,77 @@
 
 		// Force Axis to be not-ordinal when breaks are defined
 		addEvent(Axis, 'afterSetOptions', function () {
-		    if (this.options.breaks && this.options.breaks.length) {
+		    if (this.isBroken) {
 		        this.options.ordinal = false;
 		    }
 		});
 
-		addEvent(Axis, 'afterInit', function () {
+		/**
+		 * Dynamically set or unset breaks in an axis. This function in lighter than
+		 * usin Axis.update, and it also preserves animation.
+		 * @param  {Array} [breaks]
+		 *         The breaks to add. When `undefined` it removes existing breaks.
+		 * @param  {Boolean} [redraw=true]
+		 *         Whether to redraw the chart immediately.
+		 */
+		Axis.prototype.setBreaks = function (breaks, redraw) {
 		    var axis = this,
-		        breaks;
-
-		    breaks = this.options.breaks;
-		    axis.isBroken = (isArray(breaks) && !!breaks.length);
-		    if (axis.isBroken) {
-		        axis.val2lin = function (val) {
-		            var nval = val,
-		                brk,
-		                i;
-
-		            for (i = 0; i < axis.breakArray.length; i++) {
-		                brk = axis.breakArray[i];
-		                if (brk.to <= val) {
-		                    nval -= brk.len;
-		                } else if (brk.from >= val) {
-		                    break;
-		                } else if (axis.isInBreak(brk, val)) {
-		                    nval -= (val - brk.from);
-		                    break;
-		                }
+		        isBroken = (isArray(breaks) && !!breaks.length);
+
+		    function breakVal2Lin(val) {
+		        var nval = val,
+		            brk,
+		            i;
+
+		        for (i = 0; i < axis.breakArray.length; i++) {
+		            brk = axis.breakArray[i];
+		            if (brk.to <= val) {
+		                nval -= brk.len;
+		            } else if (brk.from >= val) {
+		                break;
+		            } else if (axis.isInBreak(brk, val)) {
+		                nval -= (val - brk.from);
+		                break;
 		            }
+		        }
 
-		            return nval;
-		        };
+		        return nval;
+		    }
 
-		        axis.lin2val = function (val) {
-		            var nval = val,
-		                brk,
-		                i;
+		    function breakLin2Val(val) {
+		        var nval = val,
+		            brk,
+		            i;
 
-		            for (i = 0; i < axis.breakArray.length; i++) {
-		                brk = axis.breakArray[i];
-		                if (brk.from >= nval) {
-		                    break;
-		                } else if (brk.to < nval) {
-		                    nval += brk.len;
-		                } else if (axis.isInBreak(brk, nval)) {
-		                    nval += brk.len;
-		                }
+		        for (i = 0; i < axis.breakArray.length; i++) {
+		            brk = axis.breakArray[i];
+		            if (brk.from >= nval) {
+		                break;
+		            } else if (brk.to < nval) {
+		                nval += brk.len;
+		            } else if (axis.isInBreak(brk, nval)) {
+		                nval += brk.len;
 		            }
-		            return nval;
-		        };
+		        }
+		        return nval;
+		    }
+
+
+		    axis.isDirty = axis.isBroken !== isBroken;
+		    axis.isBroken = isBroken;
+		    axis.options.breaks = axis.userOptions.breaks = breaks;
+		    axis.forceRedraw = true; // Force recalculation in setScale
+
+		    if (!isBroken && axis.val2lin === breakVal2Lin) {
+		        // Revert to prototype functions
+		        delete axis.val2lin;
+		        delete axis.lin2val;
+		    }
+
+		    if (isBroken) {
+		        axis.userOptions.ordinal = false;
+		        axis.val2lin = breakVal2Lin;
+		        axis.lin2val = breakLin2Val;
 
 		        axis.setExtremes = function (
 		            newMin,
@@ -968,11 +1014,13 @@
 		        ) {
 		            // If trying to set extremes inside a break, extend it to before and
 		            // after the break ( #3857 )
-		            while (this.isInAnyBreak(newMin)) {
-		                newMin -= this.closestPointRange;
-		            }
-		            while (this.isInAnyBreak(newMax)) {
-		                newMax -= this.closestPointRange;
+		            if (this.isBroken) {
+		                while (this.isInAnyBreak(newMin)) {
+		                    newMin -= this.closestPointRange;
+		                }
+		                while (this.isInAnyBreak(newMax)) {
+		                    newMax -= this.closestPointRange;
+		                }
 		            }
 		            Axis.prototype.setExtremes.call(
 		                this,
@@ -987,108 +1035,113 @@
 		        axis.setAxisTranslation = function (saveOld) {
 		            Axis.prototype.setAxisTranslation.call(this, saveOld);
 
-		            var breaks = axis.options.breaks,
-		                breakArrayT = [],    // Temporary one
-		                breakArray = [],
-		                length = 0,
-		                inBrk,
-		                repeat,
-		                min = axis.userMin || axis.min,
-		                max = axis.userMax || axis.max,
-		                pointRangePadding = pick(axis.pointRangePadding, 0),
-		                start,
-		                i;
-
-		            // Min & max check (#4247)
-		            each(breaks, function (brk) {
-		                repeat = brk.repeat || Infinity;
-		                if (axis.isInBreak(brk, min)) {
-		                    min += (brk.to % repeat) - (min % repeat);
-		                }
-		                if (axis.isInBreak(brk, max)) {
-		                    max -= (max % repeat) - (brk.from % repeat);
-		                }
-		            });
+		            this.unitLength = null;
+		            if (this.isBroken) {
+		                var breaks = axis.options.breaks,
+		                    breakArrayT = [],    // Temporary one
+		                    breakArray = [],
+		                    length = 0,
+		                    inBrk,
+		                    repeat,
+		                    min = axis.userMin || axis.min,
+		                    max = axis.userMax || axis.max,
+		                    pointRangePadding = pick(axis.pointRangePadding, 0),
+		                    start,
+		                    i;
+
+		                // Min & max check (#4247)
+		                each(breaks, function (brk) {
+		                    repeat = brk.repeat || Infinity;
+		                    if (axis.isInBreak(brk, min)) {
+		                        min += (brk.to % repeat) - (min % repeat);
+		                    }
+		                    if (axis.isInBreak(brk, max)) {
+		                        max -= (max % repeat) - (brk.from % repeat);
+		                    }
+		                });
 
-		            // Construct an array holding all breaks in the axis
-		            each(breaks, function (brk) {
-		                start = brk.from;
-		                repeat = brk.repeat || Infinity;
+		                // Construct an array holding all breaks in the axis
+		                each(breaks, function (brk) {
+		                    start = brk.from;
+		                    repeat = brk.repeat || Infinity;
 
-		                while (start - repeat > min) {
-		                    start -= repeat;
-		                }
-		                while (start < min) {
-		                    start += repeat;
-		                }
+		                    while (start - repeat > min) {
+		                        start -= repeat;
+		                    }
+		                    while (start < min) {
+		                        start += repeat;
+		                    }
 
-		                for (i = start; i < max; i += repeat) {
-		                    breakArrayT.push({
-		                        value: i,
-		                        move: 'in'
-		                    });
-		                    breakArrayT.push({
-		                        value: i + (brk.to - brk.from),
-		                        move: 'out',
-		                        size: brk.breakSize
-		                    });
-		                }
-		            });
+		                    for (i = start; i < max; i += repeat) {
+		                        breakArrayT.push({
+		                            value: i,
+		                            move: 'in'
+		                        });
+		                        breakArrayT.push({
+		                            value: i + (brk.to - brk.from),
+		                            move: 'out',
+		                            size: brk.breakSize
+		                        });
+		                    }
+		                });
 
-		            breakArrayT.sort(function (a, b) {
-		                var ret;
-		                if (a.value === b.value) {
-		                    ret = (a.move === 'in' ? 0 : 1) - (b.move === 'in' ? 0 : 1);
-		                } else {
-		                    ret = a.value - b.value;
-		                }
-		                return ret;
-		            });
+		                breakArrayT.sort(function (a, b) {
+		                    return (
+		                        (a.value === b.value) ?
+		                        (a.move === 'in' ? 0 : 1) - (b.move === 'in' ? 0 : 1) :
+		                        a.value - b.value
+		                    );
+		                });
 
-		            // Simplify the breaks
-		            inBrk = 0;
-		            start = min;
+		                // Simplify the breaks
+		                inBrk = 0;
+		                start = min;
 
-		            each(breakArrayT, function (brk) {
-		                inBrk += (brk.move === 'in' ? 1 : -1);
+		                each(breakArrayT, function (brk) {
+		                    inBrk += (brk.move === 'in' ? 1 : -1);
 
-		                if (inBrk === 1 && brk.move === 'in') {
-		                    start = brk.value;
-		                }
-		                if (inBrk === 0) {
-		                    breakArray.push({
-		                        from: start,
-		                        to: brk.value,
-		                        len: brk.value - start - (brk.size || 0)
-		                    });
-		                    length += brk.value - start - (brk.size || 0);
-		                }
-		            });
+		                    if (inBrk === 1 && brk.move === 'in') {
+		                        start = brk.value;
+		                    }
+		                    if (inBrk === 0) {
+		                        breakArray.push({
+		                            from: start,
+		                            to: brk.value,
+		                            len: brk.value - start - (brk.size || 0)
+		                        });
+		                        length += brk.value - start - (brk.size || 0);
+		                    }
+		                });
 
-		            axis.breakArray = breakArray;
+		                axis.breakArray = breakArray;
 
-		            // Used with staticScale, and below, the actual axis length when
-		            // breaks are substracted.
-		            axis.unitLength = max - min - length + pointRangePadding;
+		                // Used with staticScale, and below, the actual axis length when
+		                // breaks are substracted.
+		                axis.unitLength = max - min - length + pointRangePadding;
 
-		            fireEvent(axis, 'afterBreaks');
+		                fireEvent(axis, 'afterBreaks');
 
-		            if (axis.options.staticScale) {
-		                axis.transA = axis.options.staticScale;
-		            } else if (axis.unitLength) {
-		                axis.transA *= (max - axis.min + pointRangePadding) /
-		                    axis.unitLength;
-		            }
+		                if (axis.staticScale) {
+		                    axis.transA = axis.staticScale;
+		                } else if (axis.unitLength) {
+		                    axis.transA *= (max - axis.min + pointRangePadding) /
+		                        axis.unitLength;
+		                }
 
-		            if (pointRangePadding) {
-		                axis.minPixelPadding = axis.transA * axis.minPointOffset;
-		            }
+		                if (pointRangePadding) {
+		                    axis.minPixelPadding = axis.transA * axis.minPointOffset;
+		                }
 
-		            axis.min = min;
-		            axis.max = max;
+		                axis.min = min;
+		                axis.max = max;
+		            }
 		        };
 		    }
-		});
+
+		    if (pick(redraw, true)) {
+		        this.chart.redraw();
+		    }
+		};
 
 		wrap(Series.prototype, 'generatePoints', function (proceed) {
 
@@ -1295,7 +1348,7 @@
 	}());
 	(function (H) {
 		/**
-		 * (c) 2010-2017 Torstein Honsi
+		 * (c) 2010-2018 Torstein Honsi
 		 *
 		 * License: www.highcharts.com/license
 		 */
@@ -1330,7 +1383,11 @@
 		 *
 		 * If data grouping is applied, the grouping information of grouped
 		 * points can be read from the [Point.dataGroup](
-		 * /class-reference/Highcharts.Point#.dataGroup).
+		 * /class-reference/Highcharts.Point#.dataGroup). If point options other than
+		 * the data itself are set, for example `name` or `color` or custom properties,
+		 * the grouping logic doesn't know how to group it. In this case the options of
+		 * the first point instance are copied over to the group point. This can be
+		 * altered through a custom `approximation` callback function.
 		 *
 		 * @product highstock
 		 * @apioption plotOptions.series.dataGrouping
@@ -1778,6 +1835,7 @@
 		                ) || approximations[commonOptions.approximation],
 		        pointArrayMap = series.pointArrayMap,
 		        pointArrayMapLength = pointArrayMap && pointArrayMap.length,
+		        extendedPointArrayMap = ['x'].concat(pointArrayMap || ['y']),
 		        pos = 0,
 		        start = 0,
 		        valuesLen,
@@ -1814,6 +1872,28 @@
 		            series.dataGroupInfo = { start: start, length: values[0].length };
 		            groupedY = approximationFn.apply(series, values);
 
+		            // By default, let options of the first grouped point be passed over
+		            // to the grouped point. This allows preserving properties like
+		            // `name` and `color` or custom properties. Implementers can
+		            // override this from the approximation function, where they can
+		            // write custom options to `this.dataGroupInfo.options`.
+		            if (!defined(series.dataGroupInfo.options)) {
+		                // Convert numbers and arrays into objects
+		                series.dataGroupInfo.options = merge(
+		                    series.pointClass.prototype
+		                        .optionsToObject.call(
+		                            { series: series },
+		                            series.options.data[start]
+		                        )
+		                );
+
+		                // Make sure the raw data (x, y, open, high etc) is not copied
+		                // over and overwriting approximated data.
+		                each(extendedPointArrayMap, function (key) {
+		                    delete series.dataGroupInfo.options[key];
+		                });
+		            }
+
 		            // push the grouped data
 		            if (groupedY !== undefined) {
 		                groupedXData.push(pointX);
@@ -1984,7 +2064,13 @@
 		                groupedXData[0] < xAxis.dataMin &&
 		                visible
 		            ) {
-		                if (xAxis.min <= xAxis.dataMin) {
+		                if (
+		                    (
+		                        !defined(xAxis.options.min) &&
+		                        xAxis.min <= xAxis.dataMin
+		                    ) ||
+		                    xAxis.min === xAxis.dataMin
+		                ) {
 		                    xAxis.min = groupedXData[0];
 		                }
 		                xAxis.dataMin = groupedXData[0];
@@ -2298,7 +2384,7 @@
 	}(Highcharts));
 	(function (H) {
 		/**
-		 * (c) 2010-2017 Torstein Honsi
+		 * (c) 2010-2018 Torstein Honsi
 		 *
 		 * License: www.highcharts.com/license
 		 */
@@ -2319,8 +2405,8 @@
 		 * point.
 		 *
 		 * @sample stock/demo/ohlc/ OHLC chart
-		 * @extends {plotOptions.column}
-		 * @excluding borderColor,borderRadius,borderWidth,crisp
+		 * @extends plotOptions.column
+		 * @excluding borderColor,borderRadius,borderWidth,crisp,stacking,stack
 		 * @product highstock
 		 * @optionparent plotOptions.ohlc
 		 */
@@ -2538,8 +2624,8 @@
 		 *     ]
 		 *  ```
 		 *
-		 * 2.  An array of objects with named values. The objects are point
-		 * configuration objects as seen below. If the total number of data
+		 * 2.  An array of objects with named values. The following snippet shows only a
+		 * few settings, see the complete options set below. If the total number of data
 		 * points exceeds the series' [turboThreshold](#series.ohlc.turboThreshold),
 		 * this option is not available.
 		 *
@@ -2589,7 +2675,7 @@
 	}(Highcharts));
 	(function (H) {
 		/**
-		 * (c) 2010-2017 Torstein Honsi
+		 * (c) 2010-2018 Torstein Honsi
 		 *
 		 * License: www.highcharts.com/license
 		 */
@@ -2605,7 +2691,7 @@
 		 *
 		 * @sample stock/demo/candlestick/ Candlestick chart
 		 *
-		 * @extends {plotOptions.ohlc}
+		 * @extends plotOptions.ohlc
 		 * @excluding borderColor,borderRadius,borderWidth
 		 * @product highstock
 		 * @optionparent plotOptions.candlestick
@@ -2650,7 +2736,7 @@
 		    },
 
 		    /**
-		     * @extends {plotOptions.ohlc.tooltip}
+		     * @extends plotOptions.ohlc.tooltip
 		     */
 		    tooltip: defaultPlotOptions.ohlc.tooltip,
 
@@ -2678,7 +2764,8 @@
 		    drawPoints: function () {
 		        var series = this,
 		            points = series.points,
-		            chart = series.chart;
+		            chart = series.chart,
+		            reversedYAxis = series.yAxis.reversed;
 
 
 		        each(points, function (point) {
@@ -2713,9 +2800,12 @@
 		                topBox = Math.min(plotOpen, plotClose);
 		                bottomBox = Math.max(plotOpen, plotClose);
 		                halfWidth = Math.round(point.shapeArgs.width / 2);
-		                hasTopWhisker =
+		                hasTopWhisker = reversedYAxis ?
+		                    bottomBox !== point.yBottom :
 		                    Math.round(topBox) !== Math.round(point.plotHigh);
-		                hasBottomWhisker = bottomBox !== point.yBottom;
+		                hasBottomWhisker = reversedYAxis ?
+		                    Math.round(topBox) !== Math.round(point.plotHigh) :
+		                    bottomBox !== point.yBottom;
 		                topBox = Math.round(topBox) + crispCorr;
 		                bottomBox = Math.round(bottomBox) + crispCorr;
 
@@ -2739,13 +2829,19 @@
 		                    crispX, topBox,
 		                    'L',
 		                    // #460, #2094
-		                    crispX, hasTopWhisker ? Math.round(point.plotHigh) : topBox,
+		                    crispX, hasTopWhisker ?
+		                        Math.round(
+		                            reversedYAxis ? point.yBottom : point.plotHigh
+		                        ) :
+		                        topBox,
 		                    'M',
 		                    crispX, bottomBox,
 		                    'L',
 		                    // #460, #2094
 		                    crispX, hasBottomWhisker ?
-		                        Math.round(point.yBottom) :
+		                        Math.round(
+		                            reversedYAxis ? point.plotHigh : point.yBottom
+		                        ) :
 		                        bottomBox
 		                );
 
@@ -2792,8 +2888,8 @@
 		 *     ]
 		 *  ```
 		 *
-		 * 2.  An array of objects with named values. The objects are point
-		 * configuration objects as seen below. If the total number of data
+		 * 2.  An array of objects with named values. The following snippet shows only a
+		 * few settings, see the complete options set below. If the total number of data
 		 * points exceeds the series' [turboThreshold](
 		 * #series.candlestick.turboThreshold), this option is not available.
 		 *
@@ -2827,7 +2923,7 @@
 	}(Highcharts));
 	var onSeriesMixin = (function (H) {
 		/**
-		 * (c) 2010-2017 Torstein Honsi
+		 * (c) 2010-2018 Torstein Honsi
 		 *
 		 * License: www.highcharts.com/license
 		 */
@@ -2982,7 +3078,7 @@
 	}(Highcharts));
 	(function (H, onSeriesMixin) {
 		/**
-		 * (c) 2010-2017 Torstein Honsi
+		 * (c) 2010-2018 Torstein Honsi
 		 *
 		 * License: www.highcharts.com/license
 		 */
@@ -3060,7 +3156,7 @@
 
 		    /**
 		     * The shape of the marker. Can be one of "flag", "circlepin", "squarepin",
-		     * or an image on the format `url(/path-to-image.jpg)`. Individual
+		     * or an image of the format `url(/path-to-image.jpg)`. Individual
 		     * shapes can also be set for each point.
 		     *
 		     * @validvalue ["flag", "circlepin", "squarepin"]
@@ -3137,6 +3233,27 @@
 		     * @apioption plotOptions.flags.useHTML
 		     */
 
+		    /**
+		     * Fixed width of the flag's shape. By default, width is autocalculated
+		     * according to the flag's title.
+		     *
+		     * @type      {Number}
+		     * @default   undefined
+		     * @product   highstock
+		     * @sample    {highstock} stock/demo/flags-shapes/ Flags with fixed width
+		     * @apioption plotOptions.flags.width
+		     */
+
+		     /**
+		     * Fixed height of the flag's shape. By default, height is autocalculated
+		     * according to the flag's title.
+		     *
+		     * @type      {Number}
+		     * @default   undefined
+		     * @product   highstock
+		     * @apioption plotOptions.flags.height
+		     */
+
     
 
 		}, /** @lends seriesTypes.flags.prototype */ {
@@ -3300,7 +3417,16 @@
 		                        x: box.pos,
 		                        anchorX: point.anchorX
 		                    });
-		                    point.graphic.isNew = false;
+		                    // Hide flag when its box position is not specified (#8573)
+		                    if (!box.pos) {
+		                        point.graphic.attr({
+		                            x: -9999,
+		                            anchorX: -9999
+		                        });
+		                        point.graphic.isNew = true;
+		                    } else {
+		                        point.graphic.isNew = false;
+		                    }
 		                }
 		            });
 		        }
@@ -3364,9 +3490,21 @@
 		        });
 		    },
 
-		    animate: noop, // Disable animation
+		    // Disable animation, but keep clipping (#8546):
+		    animate: function (init) {
+		        if (init) {
+		            this.setClip();
+		        } else {
+		            this.animate = null;
+		        }
+		    },
+		    setClip: function () {
+		        Series.prototype.setClip.apply(this, arguments);
+		        if (this.options.clip !== false && this.sharedClipKey) {
+		            this.markerGroup.clip(this.chart[this.sharedClipKey]);
+		        }
+		    },
 		    buildKDTree: noop,
-		    setClip: noop,
 		    /**
 		     * Don't invert the flag marker group (#4960)
 		     */
@@ -3455,8 +3593,8 @@
 		 * An array of data points for the series. For the `flags` series type,
 		 * points can be given in the following ways:
 		 *
-		 * 1.  An array of objects with named values. The objects are point
-		 * configuration objects as seen below. If the total number of data
+		 * 1.  An array of objects with named values. The following snippet shows only a
+		 * few settings, see the complete options set below. If the total number of data
 		 * points exceeds the series' [turboThreshold](#series.flags.turboThreshold),
 		 * this option is not available.
 		 *
@@ -3506,7 +3644,7 @@
 	}(Highcharts, onSeriesMixin));
 	(function (H) {
 		/**
-		 * (c) 2010-2017 Torstein Honsi
+		 * (c) 2010-2018 Torstein Honsi
 		 *
 		 * License: www.highcharts.com/license
 		 */
@@ -3523,8 +3661,6 @@
 		    merge = H.merge,
 		    pick = H.pick,
 		    removeEvent = H.removeEvent,
-		    svg = H.svg,
-		    wrap = H.wrap,
 		    swapXY;
 
 		/**
@@ -3554,65 +3690,115 @@
 		     * of the scroll arrows so that they are always squares. Defaults to
 		     * 20 for touch devices and 14 for mouse devices.
 		     *
-		     * @type {Number}
-		     * @sample {highstock} stock/scrollbar/height/ A 30px scrollbar
-		     * @product highstock
+		     * @sample {highstock} stock/scrollbar/height/
+		     *         A 30px scrollbar
+		     *
+		     * @type       {number}
+		     * @default    20/14
+		     * @product    highstock
+		     * @apioption  scrollbar.height
 		     */
 		    height: isTouchDevice ? 20 : 14,
 
 		    /**
 		     * The border rounding radius of the bar.
 		     *
-		     * @type {Number}
-		     * @sample {highstock} stock/scrollbar/style/ Scrollbar styling
-		     * @default 0
-		     * @product highstock
+		     * @sample {highstock} stock/scrollbar/style/
+		     *         Scrollbar styling
+		     *
+		     * @type       {number}
+		     * @default    0
+		     * @product    highstock
+		     * @apioption  scrollbar.barBorderRadius
 		     */
 		    barBorderRadius: 0,
 
 		    /**
 		     * The corner radius of the scrollbar buttons.
 		     *
-		     * @type {Number}
-		     * @sample {highstock} stock/scrollbar/style/ Scrollbar styling
-		     * @default 0
-		     * @product highstock
+		     * @sample {highstock} stock/scrollbar/style/
+		     *         Scrollbar styling
+		     *
+		     * @type       {number}
+		     * @default    0
+		     * @product    highstock
+		     * @apioption  scrollbar.buttonBorderRadius
 		     */
 		    buttonBorderRadius: 0,
 
+		    /**
+		     * Enable or disable the scrollbar.
+		     *
+		     * @type       {boolean}
+		     * @sample     {highstock} stock/scrollbar/enabled/
+		     *             Disable the scrollbar, only use navigator
+		     * @default    true
+		     * @product    highstock
+		     * @apioption  scrollbar.enabled
+		     */
+
 		    /**
 		     * Whether to redraw the main chart as the scrollbar or the navigator
 		     * zoomed window is moved. Defaults to `true` for modern browsers and
 		     * `false` for legacy IE browsers as well as mobile devices.
 		     *
-		     * @type {Boolean}
-		     * @since 1.3
-		     * @product highstock
+		     * @type       {boolean}
+		     * @since      1.3
+		     * @product    highstock
+		     *
+		     * @sample     stock/scrollbar/liveredraw Setting live redraw to false
+		     *
+		     * @apioption  scrollbar.liveRedraw
 		     */
-		    liveRedraw: svg && !isTouchDevice,
+		    liveRedraw: undefined,
 
 		    /**
 		     * The margin between the scrollbar and its axis when the scrollbar is
 		     * applied directly to an axis.
+		     *
+		     * @type       {number}
+		     * @default    10
+		     * @apioption  scrollbar.margin
 		     */
 		    margin: 10,
 
 		    /**
 		     * The minimum width of the scrollbar.
 		     *
-		     * @type {Number}
-		     * @default 6
-		     * @since 1.2.5
-		     * @product highstock
+		     * @type       {number}
+		     * @default    6
+		     * @since      1.2.5
+		     * @product    highstock
+		     * @apioption  scrollbar.minWidth
 		     */
 		    minWidth: 6,
 
+		    /**
+		     * Whether to show or hide the scrollbar when the scrolled content is
+		     * zoomed out to it full extent.
+		     *
+		     * @type       {boolean}
+		     * @default    true
+		     * @product    highstock
+		     * @apioption  scrollbar.showFull
+		     */
+
+		    /**
+		     * @type       {number}
+		     * @default    0.2
+		     * @apioption  scrollbar.step
+		     */
 		    step: 0.2,
 
 		    /**
 		     * The z index of the scrollbar group.
+		     *
+		     * @type       {number}
+		     * @default    3
+		     * @apioption  scrollbar.zIndex
 		     */
 		    zIndex: 3
+
     
 		};
 
@@ -3623,11 +3809,19 @@
 		);
 
 		/**
-		* When we have vertical scrollbar, rifles and arrow in buttons should be
-		* rotated. The same method is used in Navigator's handles, to rotate them.
-		* @param {Array} path - path to be rotated
-		* @param {Boolean} vertical - if vertical scrollbar, swap x-y values
-		*/
+		 * When we have vertical scrollbar, rifles and arrow in buttons should be
+		 * rotated. The same method is used in Navigator's handles, to rotate them.
+		 *
+		 * @function Highcharts.swapXY
+		 *
+		 * @param  {Array<number|string>} path
+		 *         Path to be rotated.
+		 *
+		 * @param  {boolean} vertical
+		 *         If vertical scrollbar, swap x-y values.
+		 *
+		 * @return {Array<number|string>}
+		 */
 		H.swapXY = swapXY = function (path, vertical) {
 		    var i,
 		        len = path.length,
@@ -3648,10 +3842,13 @@
 		 * A reusable scrollbar, internally used in Highstock's navigator and optionally
 		 * on individual axes.
 		 *
-		 * @class
-		 * @param {Object} renderer
-		 * @param {Object} options
-		 * @param {Object} chart
+		 * @class Highcharts.Scrollbar
+		 *
+		 * @param {Highcharts.SVGRenderer} renderer
+		 *
+		 * @param {Highcharts.ScrollbarOptions} options
+		 *
+		 * @param {Highcharts.Chart} chart
 		 */
 		function Scrollbar(renderer, options, chart) { // docs
 		    this.init(renderer, options, chart);
@@ -3659,6 +3856,17 @@
 
 		Scrollbar.prototype = {
 
+		    /**
+		     * @function Highcharts.Scrollbar#init
+		     *
+		     * @param  {Highcharts.SVGRenderer} renderer
+		     *
+		     * @param  {Highcharts.ScrollbarOptions} options
+		     *
+		     * @param  {Highcharts.Chart} chart
+		     *
+		     * @return {void}
+		     */
 		    init: function (renderer, options, chart) {
 
 		        this.scrollbarButtons = [];
@@ -3683,6 +3891,10 @@
 
 		    /**
 		    * Render scrollbar with all required items.
+		    *
+		    * @function Highcharts.Scrollbar#render
+		    *
+		    * @return {void}
 		    */
 		    render: function () {
 		        var scroller = this,
@@ -3758,10 +3970,22 @@
 		    /**
 		     * Position the scrollbar, method called from a parent with defined
 		     * dimensions.
-		     * @param {Number} x - x-position on the chart
-		     * @param {Number} y - y-position on the chart
-		     * @param {Number} width - width of the scrollbar
-		     * @param {Number} height - height of the scorllbar
+		     *
+		     * @function Highcharts.Scrollbar#position
+		     *
+		     * @param  {number} x
+		     *         x-position on the chart
+		     *
+		     * @param  {number} y
+		     *         y-position on the chart
+		     *
+		     * @param  {number} width
+		     *         width of the scrollbar
+		     *
+		     * @param  {number} height
+		     *         height of the scorllbar
+		     *
+		     * @return {void}
 		     */
 		    position: function (x, y, width, height) {
 		        var scroller = this,
@@ -3812,7 +4036,13 @@
 
 		    /**
 		     * Draw the scrollbar buttons with arrows
-		     * @param {Number} index 0 is left, 1 is right
+		     *
+		     * @function Highcharts.Scrollbar#drawScrollbarButton
+		     *
+		     * @param  {number} index
+		     *         0 is left, 1 is right
+		     *
+		     * @return {void}
 		     */
 		    drawScrollbarButton: function (index) {
 		        var scroller = this,
@@ -3863,8 +4093,16 @@
 
 		    /**
 		    * Set scrollbar size, with a given scale.
-		    * @param {Number} from - scale (0-1) where bar should start
-		    * @param {Number} to - scale (0-1) where bar should end
+		    *
+		    * @function Highcharts.Scrollbar#setRange
+		    *
+		    * @param  {number} from
+		    *         scale (0-1) where bar should start
+		    *
+		    * @param  {number} to
+		    *         scale (0-1) where bar should end
+		    *
+		    * @return {void}
 		    */
 		    setRange: function (from, to) {
 		        var scroller = this,
@@ -3877,7 +4115,11 @@
 		            newPos,
 		            newSize,
 		            newRiflesPos,
-		            method = this.rendered && !this.hasDragged ? 'animate' : 'attr';
+		            method = (
+		                this.rendered &&
+		                !this.hasDragged &&
+		                !(this.chart.navigator && this.chart.navigator.hasDragged)
+		            ) ? 'animate' : 'attr';
 
 		        if (!defined(fullWidth)) {
 		            return;
@@ -3946,6 +4188,13 @@
 
 		    /**
 		    * Init events methods, so we have an access to the Scrollbar itself
+		    *
+		    * @function Highcharts.Scrollbar#initEvents
+		    *
+		    * @return {void}
+		    *
+		    * @todo
+		    * Make events official: Fires the event `changed`.
 		    */
 		    initEvents: function () {
 		        var scroller = this;
@@ -4086,9 +4335,14 @@
 
 		    /**
 		     * Get normalized (0-1) cursor position over the scrollbar
-		     * @param {Event} normalizedEvent - normalized event, with chartX and chartY
-		     *                                values
-		     * @return {Object} Local position {chartX, chartY}
+		     *
+		     * @function Highcharts.Scrollbar#cursorToScrollbarPosition
+		     *
+		     * @param  {*} normalizedEvent
+		     *         normalized event, with chartX and chartY values
+		     *
+		     * @return {*}
+		     *         Local position {chartX, chartY}
 		     */
 		    cursorToScrollbarPosition: function (normalizedEvent) {
 		        var scroller = this,
@@ -4107,6 +4361,14 @@
 
 		    /**
 		    * Update position option in the Scrollbar, with normalized 0-1 scale
+		    *
+		    * @function Highcharts.Scrollbar#updatePosition
+		    *
+		    * @param  {number} from
+		    *
+		    * @param  {number} to
+		    *
+		    * @return {void}
 		    */
 		    updatePosition: function (from, to) {
 		        if (to > 1) {
@@ -4125,6 +4387,12 @@
 
 		    /**
 		     * Update the scrollbar with new options
+		     *
+		     * @function Highcharts.Scrollbar#update
+		     *
+		     * @param  {Highcharts.ScrollbarOptions} options
+		     *
+		     * @return {void}
 		     */
 		    update: function (options) {
 		        this.destroy();
@@ -4137,6 +4405,10 @@
 
 		    /**
 		     * Set up the mouse and touch events for the Scrollbar
+		     *
+		     * @function Highcharts.Scrollbar#addEvents
+		     *
+		     * @return {void}
 		     */
 		    addEvents: function () {
 		        var buttonsOrder = this.options.inverted ? [1, 0] : [0, 1],
@@ -4176,6 +4448,10 @@
 
 		    /**
 		     * Removes the event handlers attached previously with addEvents.
+		     *
+		     * @function Highcharts.Scrollbar#removeEvents
+		     *
+		     * @return {void}
 		     */
 		    removeEvents: function () {
 		        each(this._events, function (args) {
@@ -4186,6 +4462,10 @@
 
 		    /**
 		     * Destroys allocated elements.
+		     *
+		     * @function Highcharts.Scrollbar#destroy
+		     *
+		     * @return {void}
 		     */
 		    destroy: function () {
 
@@ -4221,14 +4501,17 @@
 		    }
 		};
 
-		/**
-		* Wrap axis initialization and create scrollbar if enabled:
-		*/
-		wrap(Axis.prototype, 'init', function (proceed) {
+		/*
+		 * Wrap axis initialization and create scrollbar if enabled:
+		 */
+		addEvent(Axis, 'afterInit', function () {
 		    var axis = this;
-		    proceed.apply(axis, Array.prototype.slice.call(arguments, 1));
 
-		    if (axis.options.scrollbar && axis.options.scrollbar.enabled) {
+		    if (
+		        axis.options &&
+		        axis.options.scrollbar &&
+		        axis.options.scrollbar.enabled
+		    ) {
 		        // Predefined options:
 		        axis.options.scrollbar.vertical = !axis.horiz;
 		        axis.options.startOnTick = axis.options.endOnTick = false;
@@ -4272,10 +4555,10 @@
 		    }
 		});
 
-		/**
-		* Wrap rendering axis, and update scrollbar if one is created:
-		*/
-		wrap(Axis.prototype, 'render', function (proceed) {
+		/*
+		 * Wrap rendering axis, and update scrollbar if one is created:
+		 */
+		addEvent(Axis, 'afterRender', function () {
 		    var axis = this,
 		        scrollMin = Math.min(
 		            pick(axis.options.min, axis.min),
@@ -4293,8 +4576,6 @@
 		        from,
 		        to;
 
-		    proceed.apply(axis, Array.prototype.slice.call(arguments, 1));
-
 		    if (scrollbar) {
 
 		        if (axis.horiz) {
@@ -4353,16 +4634,14 @@
 		    }
 		});
 
-		/**
-		* Make space for a scrollbar
-		*/
-		wrap(Axis.prototype, 'getOffset', function (proceed) {
+		/*
+		 * Make space for a scrollbar
+		 */
+		addEvent(Axis, 'afterGetOffset', function () {
 		    var axis = this,
 		        index = axis.horiz ? 2 : 1,
 		        scrollbar = axis.scrollbar;
 
-		    proceed.apply(axis, Array.prototype.slice.call(arguments, 1));
-
 		    if (scrollbar) {
 		        axis.chart.scrollbarsOffsets = [0, 0]; // reset scrollbars offsets
 		        axis.chart.axisOffset[index] +=
@@ -4370,58 +4649,17 @@
 		    }
 		});
 
-		/**
-		* Destroy scrollbar when connected to the specific axis
-		*/
-		wrap(Axis.prototype, 'destroy', function (proceed) {
-		    if (this.scrollbar) {
-		        this.scrollbar = this.scrollbar.destroy();
-		    }
-
-		    proceed.apply(this, Array.prototype.slice.call(arguments, 1));
-		});
-
 		H.Scrollbar = Scrollbar;
 
 	}(Highcharts));
 	(function (H) {
 		/**
-		 * (c) 2010-2017 Torstein Honsi
+		 * (c) 2010-2018 Torstein Honsi
 		 *
 		 * License: www.highcharts.com/license
 		 */
 
 
-		/**
-		 * Options for the corresponding navigator series if `showInNavigator`
-		 * is `true` for this series. Available options are the same as any
-		 * series, documented at [plotOptions](#plotOptions.series) and
-		 * [series](#series).
-		 *
-		 *
-		 * These options are merged with options in [navigator.series](
-		 * #navigator.series), and will take precedence if the same option is defined
-		 * both places.
-		 *
-		 * @type {Object}
-		 * @see [navigator.series](#navigator.series)
-		 * @default undefined
-		 * @since 5.0.0
-		 * @product highstock
-		 * @apioption plotOptions.series.navigatorOptions
-		 */
-
-		/**
-		 * Whether or not to show the series in the navigator. Takes precedence
-		 * over [navigator.baseSeries](#navigator.baseSeries) if defined.
-		 *
-		 * @type {Boolean}
-		 * @default undefined
-		 * @since 5.0.0
-		 * @product highstock
-		 * @apioption plotOptions.series.showInNavigator
-		 */
-
 		var addEvent = H.addEvent,
 		    Axis = H.Axis,
 		    Chart = H.Chart,
@@ -4480,24 +4718,85 @@
 		     * @optionparent navigator
 		     */
 		    navigator: {
+
+		        /**
+		         * Whether the navigator and scrollbar should adapt to updated data
+		         * in the base X axis. When loading data async, as in the demo below,
+		         * this should be `false`. Otherwise new data will trigger navigator
+		         * redraw, which will cause unwanted looping. In the demo below, the
+		         * data in the navigator is set only once. On navigating, only the main
+		         * chart content is updated.
+		         *
+		         * @sample {highstock} stock/demo/lazy-loading/
+		         *         Set to false with async data loading
+		         *
+		         * @type       {boolean}
+		         * @default    true
+		         * @product    highstock
+		         * @apioption  navigator.adaptToUpdatedData
+		         */
+
+		        /**
+		         * An integer identifying the index to use for the base series, or a
+		         * string representing the id of the series.
+		         *
+		         * **Note**: As of Highcharts 5.0, this is now a deprecated option.
+		         * Prefer [series.showInNavigator](#plotOptions.series.showInNavigator).
+		         *
+		         * @see [series.showInNavigator](#plotOptions.series.showInNavigator)
+		         *
+		         * @deprecated
+		         * @type       {*}
+		         * @default    0
+		         * @product    highstock
+		         * @apioption  navigator.baseSeries
+		         */
+
+		        /**
+		         * Enable or disable the navigator.
+		         *
+		         * @sample {highstock} stock/navigator/enabled/ Disable the navigator
+		         *
+		         * @type       {boolean}
+		         * @default    true
+		         * @product    highstock
+		         * @apioption  navigator.enabled
+		         */
+
+		        /**
+		         * When the chart is inverted, whether to draw the navigator on the
+		         * opposite side.
+		         *
+		         * @type       {boolean}
+		         * @default    false
+		         * @since      5.0.8
+		         * @product    highstock
+		         * @apioption  navigator.opposite
+		         */
+
 		        /**
 		         * The height of the navigator.
 		         *
-		         * @type {Number}
-		         * @sample {highstock} stock/navigator/height/ A higher navigator
-		         * @default 40
-		         * @product highstock
+		         * @sample {highstock} stock/navigator/height/
+		         *         A higher navigator
+		         *
+		         * @type       {number}
+		         * @default    40
+		         * @product    highstock
+		         * @apioption  navigator.height
 		         */
 		        height: 40,
 
 		        /**
 		         * The distance from the nearest element, the X axis or X axis labels.
 		         *
-		         * @type {Number}
 		         * @sample {highstock} stock/navigator/margin/
 		         *         A margin of 2 draws the navigator closer to the X axis labels
-		         * @default 25
-		         * @product highstock
+		         *
+		         * @type       {number}
+		         * @default    25
+		         * @product    highstock
+		         * @apioption  navigator.margin
 		         */
 		        margin: 25,
 
@@ -4505,44 +4804,53 @@
 		         * Whether the mask should be inside the range marking the zoomed
 		         * range, or outside. In Highstock 1.x it was always `false`.
 		         *
-		         * @type {Boolean}
 		         * @sample {highstock} stock/navigator/maskinside-false/
 		         *         False, mask outside
-		         * @default true
-		         * @since 2.0
-		         * @product highstock
+		         *
+		         * @type       {boolean}
+		         * @default    true
+		         * @since      2.0
+		         * @product    highstock
+		         * @apioption  navigator.maskInside
 		         */
 		        maskInside: true,
 
 		        /**
 		         * Options for the handles for dragging the zoomed area.
 		         *
-		         * @type {Object}
-		         * @sample {highstock} stock/navigator/handles/ Colored handles
-		         * @product highstock
+		         * @sample {highstock} stock/navigator/handles/
+		         *         Colored handles
+		         *
+		         * @type       {*}
+		         * @product    highstock
+		         * @apioption  navigator.handles
 		         */
 		        handles: {
 		            /**
 		             * Width for handles.
 		             *
-		             * @type {Number}
-		             * @default 7
-		             * @product highstock
 		             * @sample {highstock} stock/navigator/styled-handles/
 		             *         Styled handles
-		             * @since 6.0.0
+		             *
+		             * @type       {number}
+		             * @default    7
+		             * @since      6.0.0
+		             * @product    highstock
+		             * @apioption  navigator.handles.width
 		             */
 		            width: 7,
 
 		            /**
 		             * Height for handles.
 		             *
-		             * @type {Number}
-		             * @default 15
-		             * @product highstock
 		             * @sample {highstock} stock/navigator/styled-handles/
 		             *         Styled handles
-		             * @since 6.0.0
+		             *
+		             * @type       {number}
+		             * @default    15
+		             * @since      6.0.0
+		             * @product    highstock
+		             * @apioption  navigator.handles.height
 		             */
 		            height: 15,
 
@@ -4559,22 +4867,25 @@
 		             * `Highcharts.SVGRenderer.prototype.symbols`. The callback is then
 		             * used by its method name, as shown in the demo.
 		             *
-		             * @type {Array}
-		             * @default ['navigator-handle', 'navigator-handle']
-		             * @product highstock
 		             * @sample {highstock} stock/navigator/styled-handles/
 		             *         Styled handles
-		             * @since 6.0.0
+		             *
+		             * @type       {Array<string>}
+		             * @default    ['navigator-handle', 'navigator-handle']
+		             * @since      6.0.0
+		             * @product    highstock
+		             * @apioption  navigator.handles.symbols
 		             */
 		            symbols: ['navigator-handle', 'navigator-handle'],
 
 		            /**
 		             * Allows to enable/disable handles.
 		             *
-		             * @type {Boolean}
-		             * @default true
-		             * @product highstock
-		             * @since 6.0.0
+		             * @type       {boolean}
+		             * @default    true
+		             * @since      6.0.0
+		             * @product    highstock
+		             * @apioption  navigator.handles.enabled
 		             */
 		            enabled: true
 
@@ -4605,14 +4916,17 @@
 		         *     }
 		         * }</pre>
 		         *
-		         * @type {Object}
 		         * @see In styled mode, the navigator series is styled with the
 		         *      `.highcharts-navigator-series` class.
+		         *
 		         * @sample {highstock} stock/navigator/series-data/
 		         *         Using a separate data set for the navigator
 		         * @sample {highstock} stock/navigator/series/
 		         *         A green navigator series
-		         * @product highstock
+		         *
+		         * @type       {*}
+		         * @product    highstock
+		         * @apioption  navigator.series
 		         */
 		        series: {
 
@@ -4620,7 +4934,9 @@
 		             * The type of the navigator series. Defaults to `areaspline` if
 		             * defined, otherwise `line`.
 		             *
-		             * @type {String}
+		             * @type       {string}
+		             * @default    areaspline
+		             * @apioption  navigator.series.type
 		             */
 		            type: defaultSeriesType,
             
@@ -4633,7 +4949,9 @@
 		            /**
 		             * Data grouping options for the navigator series.
 		             *
-		             * @extends {plotOptions.series.dataGrouping}
+		             * @type       {*}
+		             * @extends    plotOptions.series.dataGrouping
+		             * @apioption  navigator.series.dataGrouping
 		             */
 		            dataGrouping: {
 		                approximation: 'average',
@@ -4647,7 +4965,9 @@
 		             * Data label options for the navigator series. Data labels are
 		             * disabled by default on the navigator series.
 		             *
-		             * @extends {plotOptions.series.dataLabels}
+		             * @type       {*}
+		             * @extends    plotOptions.series.dataLabels
+		             * @apioption  navigator.series.dataLabels
 		             */
 		            dataLabels: {
 		                enabled: false,
@@ -4661,7 +4981,9 @@
 		             * Line color for the navigator series. Allows setting the color
 		             * while disallowing the default candlestick setting.
 		             *
-		             * @type {Color}
+		             * @type       {Highcharts.ColorString|null}
+		             * @default    null
+		             * @apioption  navigator.series.lineColor
 		             */
 		            lineColor: null, // #4602
 
@@ -4673,7 +4995,10 @@
 		            /**
 		             * The threshold option. Setting it to 0 will make the default
 		             * navigator area series draw its area from the 0 value and up.
-		             * @type {Number}
+		             *
+		             * @type       {number|null}
+		             * @default    null
+		             * @apioption  navigator.series.threshold
 		             */
 		            threshold: null
 		        },
@@ -4697,11 +5022,12 @@
 		         *     }
 		         * }</pre>
 		         *
-		         * @type {Object}
-		         * @extends {xAxis}
-		         * @excluding linkedTo,maxZoom,minRange,opposite,range,scrollbar,
-		         *          showEmpty,maxRange
-		         * @product highstock
+		         * @type       {*}
+		         * @extends    xAxis
+		         * @excluding  linkedTo,maxZoom,minRange,opposite,range,scrollbar,
+		         *             showEmpty,maxRange
+		         * @product    highstock
+		         * @apioption  navigator.xAxis
 		         */
 		        xAxis: {
 		            /**
@@ -4709,11 +5035,11 @@
 		             * xAxis.maxPadding, but value is set in milliseconds.
 		             * Can be set for both, main xAxis and navigator's xAxis.
 		             *
-		             * @type {Number}
-		             * @default 0
-		             * @since 6.0.0
-		             * @product highstock
-		             * @apioption xAxis.overscroll
+		             * @type       {number}
+		             * @default    0
+		             * @since      6.0.0
+		             * @product    highstock
+		             * @apioption  navigator.xAxis.overscroll
 		             */
 		            overscroll: 0,
 
@@ -4755,11 +5081,12 @@
 		         *     tickWidth: 0
 		         * }</pre>
 		         *
-		         * @type {Object}
-		         * @extends {yAxis}
-		         * @excluding height,linkedTo,maxZoom,minRange,ordinal,range,showEmpty,
-		         *          scrollbar,top,units,maxRange,minLength,maxLength,resize
-		         * @product highstock
+		         * @type       {*}
+		         * @extends    yAxis
+		         * @excluding  height,linkedTo,maxZoom,minRange,ordinal,range,showEmpty,
+		         *             scrollbar,top,units,maxRange,minLength,maxLength,resize
+		         * @product    highstock
+		         * @apioption  navigator.yAxis
 		         */
 		        yAxis: {
 
@@ -4786,8 +5113,14 @@
 
 		/**
 		 * Draw one of the handles on the side of the zoomed range in the navigator
-		 * @param {Boolean} inverted flag for chart.inverted
-		 * @returns {Array} Path to be used in a handle
+		 *
+		 * @function Highcharts.Renderer#symbols.navigator-handle
+		 *
+		 * @param  {boolean} inverted
+		 *         flag for chart.inverted
+		 *
+		 * @return {Array<number|string>}
+		 *         Path to be used in a handle
 		 */
 		H.Renderer.prototype.symbols['navigator-handle'] = function (
 		    x,
@@ -4824,8 +5157,11 @@
 
 		/**
 		 * The Navigator class
-		 * @param {Object} chart - Chart object
-		 * @class
+		 *
+		 * @class Highcharts.Navigator
+		 *
+		 * @param {Highcharts.Chart} chart
+		 *        Chart object
 		 */
 		function Navigator(chart) {
 		    this.init(chart);
@@ -4834,10 +5170,20 @@
 		Navigator.prototype = {
 		    /**
 		     * Draw one of the handles on the side of the zoomed range in the navigator
-		     * @param {Number} x The x center for the handle
-		     * @param {Number} index 0 for left and 1 for right
-		     * @param {Boolean} inverted flag for chart.inverted
-		     * @param {String} verb use 'animate' or 'attr'
+		     *
+		     * @function Highcharts.Navigator#drawHandle
+		     *
+		     * @param  {number} x
+		     *         The x center for the handle
+		     *
+		     * @param  {number} index
+		     *         0 for left and 1 for right
+		     * @param  {boolean} inverted
+		     *         flag for chart.inverted
+		     * @param  {string} verb
+		     *         use 'animate' or 'attr'
+		     *
+		     * @return {void}
 		     */
 		    drawHandle: function (x, index, inverted, verb) {
 		        var navigator = this,
@@ -4859,10 +5205,22 @@
 
 		    /**
 		     * Render outline around the zoomed range
-		     * @param {Number} zoomedMin in pixels position where zoomed range starts
-		     * @param {Number} zoomedMax in pixels position where zoomed range ends
-		     * @param {Boolean} inverted flag if chart is inverted
-		     * @param {String} verb use 'animate' or 'attr'
+		     *
+		     * @function Highcharts.Navigator#drawOutline
+		     *
+		     * @param  {number} zoomedMin
+		     *         in pixels position where zoomed range starts
+		     *
+		     * @param  {number} zoomedMax
+		     *         in pixels position where zoomed range ends
+		     *
+		     * @param  {boolean} inverted
+		     *         flag if chart is inverted
+		     *
+		     * @param  {string} verb
+		     *         use 'animate' or 'attr'
+		     *
+		     * @return {void}
 		     */
 		    drawOutline: function (zoomedMin, zoomedMax, inverted, verb) {
 		        var navigator = this,
@@ -4950,10 +5308,22 @@
 
 		    /**
 		     * Render outline around the zoomed range
-		     * @param {Number} zoomedMin in pixels position where zoomed range starts
-		     * @param {Number} zoomedMax in pixels position where zoomed range ends
-		     * @param {Boolean} inverted flag if chart is inverted
-		     * @param {String} verb use 'animate' or 'attr'
+		     *
+		     * @function Highcharts.Navigator#drawMasks
+		     *
+		     * @param  {number} zoomedMin
+		     *         in pixels position where zoomed range starts
+		     *
+		     * @param  {number} zoomedMax
+		     *         in pixels position where zoomed range ends
+		     *
+		     * @param  {boolean} inverted
+		     *         flag if chart is inverted
+		     *
+		     * @param  {string} verb
+		     *         use 'animate' or 'attr'
+		     *
+		     * @return {void}
 		     */
 		    drawMasks: function (zoomedMin, zoomedMax, inverted, verb) {
 		        var navigator = this,
@@ -5002,6 +5372,10 @@
 		     * - all shades
 		     * - outline
 		     * - handles
+		     *
+		     * @function Highcharts.Navigator#renderElements
+		     *
+		     * @return {void}
 		     */
 		    renderElements: function () {
 		        var navigator = this,
@@ -5066,7 +5440,13 @@
 
 		    /**
 		     * Update navigator
-		     * @param {Object} options Options to merge in when updating navigator
+		     *
+		     * @function Highcharts.Navigator#update
+		     *
+		     * @param  {Highcharts.NavigatorOptions} options
+		     *         Options to merge in when updating navigator
+		     *
+		     * @return {void}
 		     */
 		    update: function (options) {
 		        // Remove references to old navigator series in base series
@@ -5084,10 +5464,22 @@
 
 		    /**
 		     * Render the navigator
-		     * @param {Number} min X axis value minimum
-		     * @param {Number} max X axis value maximum
-		     * @param {Number} pxMin Pixel value minimum
-		     * @param {Number} pxMax Pixel value maximum
+		     *
+		     * @function Highcharts.Navigator#render
+		     *
+		     * @param  {number} min
+		     *         X axis value minimum
+		     *
+		     * @param  {number} max
+		     *         X axis value maximum
+		     *
+		     * @param  {number} pxMin
+		     *         Pixel value minimum
+		     *
+		     * @param  {number} pxMax
+		     *         Pixel value maximum
+		     *
+		     * @return {void}
 		     */
 		    render: function (min, max, pxMin, pxMax) {
 
@@ -5247,8 +5639,8 @@
 		            navigator.scrollbar.setRange(
 		                // Use real value, not rounded because range can be very small
 		                // (#1716)
-		                navigator.zoomedMin / navigatorSize,
-		                navigator.zoomedMax / navigatorSize
+		                navigator.zoomedMin / (navigatorSize || 1),
+		                navigator.zoomedMax / (navigatorSize || 1)
 		            );
 		        }
 		        navigator.rendered = true;
@@ -5256,6 +5648,10 @@
 
 		    /**
 		     * Set up the mouse and touch events for the navigator
+		     *
+		     * @function Highcharts.Navigator#addMouseEvents
+		     *
+		     * @return {void}
 		     */
 		    addMouseEvents: function () {
 		        var navigator = this,
@@ -5313,8 +5709,14 @@
 
 		    /**
 		     * Generate events for handles and masks
-		     * @param {String} eventName Event name handler, 'mousedown' or 'touchstart'
-		     * @returns {Array} An array of arrays: [DOMElement, eventName, callback].
+		     *
+		     * @function Highcharts.Navigator#getPartsEvents
+		     *
+		     * @param  {string} eventName
+		     *         Event name handler, 'mousedown' or 'touchstart'
+		     *
+		     * @return {Array<*>}
+		     *         An array of arrays: [DOMElement, eventName, callback].
 		     */
 		    getPartsEvents: function (eventName) {
 		        var navigator = this,
@@ -5340,8 +5742,15 @@
 		     * - will be stored for future drag&drop
 		     * - will directly shift to a new range
 		     *
-		     * @param {Object} e Mouse event
-		     * @param {Number} index Index of a mask in Navigator.shades array
+		     * @function Highcharts.Navigator#shadesMousedown
+		     *
+		     * @param  {*} e
+		     *         Mouse event
+		     *
+		     * @param  {number} index
+		     *         Index of a mask in Navigator.shades array
+		     *
+		     * @return {void}
 		     */
 		    shadesMousedown: function (e, index) {
 		        e = this.chart.pointer.normalize(e);
@@ -5377,7 +5786,7 @@
 		                left = Math.max(0, left);
 		            } else if (index === 2 && left + range >= navigatorSize) {
 		                left = navigatorSize - range;
-		                if (xAxis.reversed) {
+		                if (navigator.reversedExtremes) {
 		                    // #7713
 		                    left -= range;
 		                    fixedMin = navigator.getUnionExtremes().dataMin;
@@ -5412,8 +5821,15 @@
 		     * Mousedown on a handle mask.
 		     * Will store necessary information for drag&drop.
 		     *
-		     * @param {Object} e Mouse event
-		     * @param {Number} index Index of a handle in Navigator.handles array
+		     * @function Highcharts.Navigator#handlesMousedown
+		     *
+		     * @param  {*} e
+		     *         Mouse event
+		     *
+		     * @param  {number} index
+		     *         Index of a handle in Navigator.handles array
+		     *
+		     * @return {void}
 		     */
 		    handlesMousedown: function (e, index) {
 		        e = this.chart.pointer.normalize(e);
@@ -5421,10 +5837,9 @@
 		        var navigator = this,
 		            chart = navigator.chart,
 		            baseXAxis = chart.xAxis[0],
-		            // For reversed axes, min and max are chagned,
+		            // For reversed axes, min and max are changed,
 		            // so the other extreme should be stored
-		            reverse = (chart.inverted && !baseXAxis.reversed) ||
-		                (!chart.inverted && baseXAxis.reversed);
+		            reverse = navigator.reversedExtremes;
 
 		        if (index === 0) {
 		            // Grab the left handle
@@ -5442,7 +5857,13 @@
 		    },
 		    /**
 		     * Mouse move event based on x/y mouse position.
-		     * @param {Object} e Mouse event
+		     *
+		     * @function Highcharts.Navigator#onMouseMove
+		     *
+		     * @param  {*} e
+		     *         Mouse event
+		     *
+		     * @return {void}
 		     */
 		    onMouseMove: function (e) {
 		        var navigator = this,
@@ -5507,7 +5928,13 @@
 		            if (
 		                navigator.hasDragged &&
 		                navigator.scrollbar &&
-		                navigator.scrollbar.options.liveRedraw
+		                pick(
+		                    navigator.scrollbar.options.liveRedraw,
+
+		                    // By default, don't run live redraw on VML, on touch
+		                    // devices or if the chart is in boost.
+		                    H.svg && !isTouchDevice && !this.chart.isBoosting
+		                )
 		            ) {
 		                e.DOMType = e.type; // DOMType is for IE8
 		                setTimeout(function () {
@@ -5519,13 +5946,18 @@
 
 		    /**
 		     * Mouse up event based on x/y mouse position.
-		     * @param {Object} e Mouse event
+		     *
+		     * @function Highcharts.Navigator#onMouseUp
+		     *
+		     * @param  {*} e
+		     *         Mouse event
+		     *
+		     * @return {void}
 		     */
 		    onMouseUp: function (e) {
 		        var navigator = this,
 		            chart = navigator.chart,
 		            xAxis = navigator.xAxis,
-		            reversed = xAxis && xAxis.reversed,
 		            scrollbar = navigator.scrollbar,
 		            unionExtremes,
 		            fixedMin,
@@ -5550,13 +5982,13 @@
 		            }
 		            // Snap to right edge (#4076)
 		            if (navigator.zoomedMax === navigator.size) {
-		                fixedMax = reversed ?
+		                fixedMax = navigator.reversedExtremes ?
 		                    unionExtremes.dataMin : unionExtremes.dataMax;
 		            }
 
 		            // Snap to left edge (#7576)
 		            if (navigator.zoomedMin === 0) {
-		                fixedMin = reversed ?
+		                fixedMin = navigator.reversedExtremes ?
 		                    unionExtremes.dataMax : unionExtremes.dataMin;
 		            }
 
@@ -5594,6 +6026,10 @@
 
 		    /**
 		     * Removes the event handlers attached previously with addEvents.
+		     *
+		     * @function Highcharts.Navigator#removeEvents
+		     *
+		     * @return {void}
 		     */
 		    removeEvents: function () {
 		        if (this.eventsToUnbind) {
@@ -5607,6 +6043,10 @@
 
 		    /**
 		     * Remove data events.
+		     *
+		     * @function Highcharts.Navigator#removeBaseSeriesEvents
+		     *
+		     * @return {void}
 		     */
 		    removeBaseSeriesEvents: function () {
 		        var baseSeries = this.baseSeries || [];
@@ -5630,6 +6070,12 @@
 
 		    /**
 		     * Initiate the Navigator object
+		     *
+		     * @function Highcharts.Navigator#init
+		     *
+		     * @param  {Highcharts.Chart} chart
+		     *
+		     * @return {void}
 		     */
 		    init: function (chart) {
 		        var chartOptions = chart.options,
@@ -5666,22 +6112,6 @@
 		            baseXaxis = baseSeries && baseSeries[0] && baseSeries[0].xAxis ||
 		                chart.xAxis[0] || { options: {} };
 
-
-		        // Make room for the navigator, can be placed around the chart:
-		        addEvent(chart, 'getMargins', function () {
-		            var marginName = navigator.opposite ? 'plotTop' : 'marginBottom';
-		            if (chart.inverted) {
-		                marginName = navigator.opposite ? 'marginRight' : 'plotLeft';
-		            }
-
-		            chart[marginName] = (chart[marginName] || 0) + (
-		                navigatorEnabled || !chart.inverted ?
-		                    navigator.outlineHeight :
-		                    0
-		            ) + navigatorOptions.margin;
-
-		        });
-
 		        chart.isDirtyBox = true;
 
 		        if (navigator.navigatorEnabled) {
@@ -5696,6 +6126,7 @@
 		                isX: true,
 		                type: 'datetime',
 		                index: xAxisIndex,
+		                isInternal: true,
 		                offset: 0,
 		                keepOrdinalPadding: true, // #2436
 		                startOnTick: false,
@@ -5716,6 +6147,7 @@
 		                alignTicks: false,
 		                offset: 0,
 		                index: yAxisIndex,
+		                isInternal: true,
 		                zoomEnabled: false
 		            }, chart.inverted ? {
 		                width: height
@@ -5743,6 +6175,12 @@
 		                );
 		            }
 
+		            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
@@ -5821,7 +6259,13 @@
 		    /**
 		     * Get the union data extremes of the chart - the outer data extremes of the
 		     * base X axis and the navigator axis.
-		     * @param {boolean} returnFalseOnNoBaseSeries - as the param says.
+		     *
+		     * @function Highcharts.Navigator#getUnionExtremes
+		     *
+		     * @param  {boolean} returnFalseOnNoBaseSeries
+		     *         as the param says.
+		     *
+		     * @return {*}
 		     */
 		    getUnionExtremes: function (returnFalseOnNoBaseSeries) {
 		        var baseAxis = this.chart.xAxis[0],
@@ -5861,10 +6305,16 @@
 		     * Set the base series and update the navigator series from this. With a bit
 		     * of modification we should be able to make this an API method to be called
 		     * from the outside
-		     * @param  {Object} baseSeriesOptions
+		     *
+		     * @function Highcharts.Navigator#setBaseSeries
+		     *
+		     * @param  {*} baseSeriesOptions
 		     *         Additional series options for a navigator
-		     * @param  {Boolean} [redraw]
+		     *
+		     * @param  {boolean} [redraw]
 		     *         Whether to redraw after update.
+		     *
+		     * @return {void}
 		     */
 		    setBaseSeries: function (baseSeriesOptions, redraw) {
 		        var chart = this.chart,
@@ -5901,9 +6351,17 @@
 		        }
 		    },
 
-		    /*
+		    /**
 		     * Update series in the navigator from baseSeries, adding new if does not
 		     * exist.
+		     *
+		     * @function Highcharts.Navigator.updateNavigatorSeries
+		     *
+		     * @param  {boolean} addEvents
+		     *
+		     * @param  {boolean} redraw
+		     *
+		     * @return {void}
 		     */
 		    updateNavigatorSeries: function (addEvents, redraw) {
 		        var navigator = this,
@@ -5940,8 +6398,11 @@
 		                            );
 		                            delete base.navigatorSeries;
 		                        }
-		                        // Kill the nav series
-		                        navSeries.destroy();
+		                        // Kill the nav series. It may already have been
+		                        // destroyed (#8715).
+		                        if (navSeries.chart) {
+		                            navSeries.destroy();
+		                        }
 		                        return false;
 		                    }
 		                    return true;
@@ -6057,6 +6518,10 @@
 		    /**
 		     * Add data events.
 		     * For example when main series is updated we need to recalculate extremes
+		     *
+		     * @function Highcharts.Navigator#addBaseSeriesEvent
+		     *
+		     * @return {void}
 		     */
 		    addBaseSeriesEvents: function () {
 		        var navigator = this,
@@ -6108,10 +6573,32 @@
 		        }, this);
 		    },
 
+		    /**
+		     * Get minimum from all base series connected to the navigator
+		     *
+		     * @param  {number} currentSeriesMin
+		     *         Minium from the current series
+		     *
+		     * @return {number} Minimum from all series
+		     */
+		    getBaseSeriesMin: function (currentSeriesMin) {
+		        return H.reduce(
+		            this.baseSeries,
+		            function (min, series) {
+		                return Math.min(min, series.xData[0]);
+		            },
+		            currentSeriesMin
+		        );
+		    },
+
 		    /**
 		     * Set the navigator x axis extremes to reflect the total. The navigator
 		     * extremes should always be the extremes of the union of all series in the
 		     * chart as well as the navigator series.
+		     *
+		     * @function Highcharts.Navigator#modifyNavigatorAxisExtremes
+		     *
+		     * @return {void}
 		     */
 		    modifyNavigatorAxisExtremes: function () {
 		        var xAxis = this.xAxis,
@@ -6134,6 +6621,10 @@
 
 		    /**
 		     * Hook to modify the base axis extremes with information from the Navigator
+		     *
+		     * @function Highcharts.Navigator#modifyBaseAxisExtremes
+		     *
+		     * @return {void}
 		     */
 		    modifyBaseAxisExtremes: function () {
 		        var baseXAxis = this,
@@ -6176,8 +6667,11 @@
 		                if (!stickToMin) {
 		                    newMin = Math.max(
 		                        newMax - range,
-		                        navigatorSeries && navigatorSeries.xData ?
-		                            navigatorSeries.xData[0] : -Number.MAX_VALUE
+		                        navigator.getBaseSeriesMin(
+		                            navigatorSeries && navigatorSeries.xData ?
+		                                navigatorSeries.xData[0] :
+		                                -Number.MAX_VALUE
+		                        )
 		                    );
 		                }
 		            }
@@ -6199,15 +6693,20 @@
 		     * Handler for updated data on the base series. When data is modified, the
 		     * navigator series must reflect it. This is called from the Chart.redraw
 		     * function before axis and series extremes are computed.
+		     *
+		     * @function Highcharts.Navigator#updateDataHandler
+		     *
+		     * @return {void}
 		     */
 		    updatedDataHandler: function () {
 		        var navigator = this.chart.navigator,
 		            baseSeries = this,
-		            navigatorSeries = this.navigatorSeries;
+		            navigatorSeries = this.navigatorSeries,
+		            xDataMin = navigator.getBaseSeriesMin(baseSeries.xData[0]);
 
 		        // If the scrollbar is scrolled all the way to the right, keep right as
 		        // new data  comes in.
-		        navigator.stickToMax = navigator.xAxis.reversed ?
+		        navigator.stickToMax = navigator.reversedExtremes ?
 		            Math.round(navigator.zoomedMin) === 0 :
 		            Math.round(navigator.zoomedMax) >= Math.round(navigator.size);
 
@@ -6215,7 +6714,7 @@
 		        // maximum. If the current axis minimum falls outside the new updated
 		        // dataset, we must adjust.
 		        navigator.stickToMin = isNumber(baseSeries.xAxis.min) &&
-		            (baseSeries.xAxis.min <= baseSeries.xData[0]) &&
+		            (baseSeries.xAxis.min <= xDataMin) &&
 		            (!this.chart.fixedRange || !navigator.stickToMax);
 
 		        // Set the navigator series data to the new data of the base series
@@ -6232,27 +6731,66 @@
 
 		    /**
 		     * Add chart events, like redrawing navigator, when chart requires that.
+		     *
+		     * @function Highcharts.Navigator#addChartEvents
+		     *
+		     * @return {void}
 		     */
 		    addChartEvents: function () {
-		        addEvent(this.chart, 'redraw', function () {
+		        if (!this.eventsToUnbind) {
+		            this.eventsToUnbind = [];
+		        }
+
+		        this.eventsToUnbind.push(
 		            // Move the scrollbar after redraw, like after data updata even if
 		            // axes don't redraw
-		            var navigator = this.navigator,
-		                xAxis = navigator && (
-		                    navigator.baseSeries &&
-		                    navigator.baseSeries[0] &&
-		                    navigator.baseSeries[0].xAxis ||
-		                    navigator.scrollbar && this.xAxis[0]
-		                ); // #5709
-
-		            if (xAxis) {
-		                navigator.render(xAxis.min, xAxis.max);
-		            }
-		        });
+		            addEvent(
+		                this.chart,
+		                'redraw',
+		                function () {
+		                    var navigator = this.navigator,
+		                        xAxis = navigator && (
+		                            navigator.baseSeries &&
+		                            navigator.baseSeries[0] &&
+		                            navigator.baseSeries[0].xAxis ||
+		                            navigator.scrollbar && this.xAxis[0]
+		                        ); // #5709
+
+		                    if (xAxis) {
+		                        navigator.render(xAxis.min, xAxis.max);
+		                    }
+		                }
+		            ),
+		            // Make room for the navigator, can be placed around the chart:
+		            addEvent(
+		                this.chart,
+		                'getMargins',
+		                function () {
+		                    var chart = this,
+		                        navigator = chart.navigator,
+		                        marginName = navigator.opposite ?
+		                            'plotTop' : 'marginBottom';
+		                    if (chart.inverted) {
+		                        marginName = navigator.opposite ?
+		                            'marginRight' : 'plotLeft';
+		                    }
+
+		                    chart[marginName] = (chart[marginName] || 0) + (
+		                        navigator.navigatorEnabled || !chart.inverted ?
+		                            navigator.outlineHeight :
+		                            0
+		                    ) + navigator.navigatorOptions.margin;
+		                }
+		            )
+		        );
 		    },
 
 		    /**
 		     * Destroys allocated elements.
+		     *
+		     * @function Highcharts.Navigator#destroy
+		     *
+		     * @return {void}
 		     */
 		    destroy: function () {
 
@@ -6501,7 +7039,7 @@
 	}(Highcharts));
 	(function (H) {
 		/**
-		 * (c) 2010-2017 Torstein Honsi
+		 * (c) 2010-2018 Torstein Honsi
 		 *
 		 * License: www.highcharts.com/license
 		 */
@@ -6539,20 +7077,201 @@
 		     * @optionparent rangeSelector
 		     */
 		    rangeSelector: {
-		        // allButtonsEnabled: false,
-		        // enabled: true,
-		        // buttons: {Object}
-		        // buttonSpacing: 0,
+
+		        /**
+		         * Whether to enable all buttons from the start. By default buttons are
+		         * only enabled if the corresponding time range exists on the X axis,
+		         * but enabling all buttons allows for dynamically loading different
+		         * time ranges.
+		         *
+		         * @sample {highstock} stock/rangeselector/allbuttonsenabled-true/
+		         *         All buttons enabled
+		         *
+		         * @type       {boolean}
+		         * @default    false
+		         * @since      2.0.3
+		         * @product    highstock
+		         * @apioption  rangeSelector.allButtonsEnabled
+		         */
+
+		        /**
+		         * An array of configuration objects for the buttons.
+		         *
+		         * Defaults to
+		         *
+		         * <pre>buttons: [{
+		         *     type: 'month',
+		         *     count: 1,
+		         *     text: '1m'
+		         * }, {
+		         *     type: 'month',
+		         *     count: 3,
+		         *     text: '3m'
+		         * }, {
+		         *     type: 'month',
+		         *     count: 6,
+		         *     text: '6m'
+		         * }, {
+		         *     type: 'ytd',
+		         *     text: 'YTD'
+		         * }, {
+		         *     type: 'year',
+		         *     count: 1,
+		         *     text: '1y'
+		         * }, {
+		         *     type: 'all',
+		         *     text: 'All'
+		         * }]</pre>
+		         *
+		         * @sample {highstock} stock/rangeselector/datagrouping/
+		         *         Data grouping by buttons
+		         *
+		         * @type       {Array<*>}
+		         * @product    highstock
+		         * @apioption  rangeSelector.buttons
+		         */
+
+		        /**
+		         * How many units of the defined type the button should span. If `type`
+		         * is "month" and `count` is 3, the button spans three months.
+		         *
+		         * @type       {number}
+		         * @default    1
+		         * @product    highstock
+		         * @apioption  rangeSelector.buttons.count
+		         */
+
+		        /**
+		         * Fires when clicking on the rangeSelector button. One parameter,
+		         * event, is passed to the function, containing common event
+		         * information.
+		         *
+		         * <pre>
+		         * click: function(e) {
+		         *   console.log(this);
+		         * }
+		         * </pre>
+		         *
+		         * Return false to stop default button's click action.
+		         *
+		         * @sample {highstock} stock/rangeselector/button-click/
+		         *         Click event on the button
+		         *
+		         * @type       {Function}
+		         * @product    highstock
+		         * @apioption  rangeSelector.buttons.events.click
+		         */
+
+		        /**
+		         * Additional range (in milliseconds) added to the end of the calculated
+		         * time span.
+		         *
+		         * @sample {highstock} stock/rangeselector/min-max-offsets/
+		         *         Button offsets
+		         *
+		         * @type       {number}
+		         * @default    0
+		         * @since      6.0.0
+		         * @product    highstock
+		         * @apioption  rangeSelector.buttons.offsetMax
+		         */
+
+		        /**
+		         * Additional range (in milliseconds) added to the start of the
+		         * calculated time span.
+		         *
+		         * @sample {highstock} stock/rangeselector/min-max-offsets/
+		         *         Button offsets
+		         *
+		         * @type       {number}
+		         * @default    0
+		         * @since      6.0.0
+		         * @product    highstock
+		         * @apioption  rangeSelector.buttons.offsetMin
+		         */
+
+		        /**
+		         * When buttons apply dataGrouping on a series, by default zooming
+		         * in/out will deselect buttons and unset dataGrouping. Enable this
+		         * option to keep buttons selected when extremes change.
+		         *
+		         * @sample {highstock} stock/rangeselector/preserve-datagrouping/
+		         *         Different preserveDataGrouping settings
+		         *
+		         * @type       {boolean}
+		         * @since      6.1.2
+		         * @default    false
+		         * @product    highstock
+		         * @apioption  rangeSelector.buttons.preserveDataGrouping
+		         */
+
+		        /**
+		         * A custom data grouping object for each button.
+		         *
+		         * @see [series.dataGrouping](#plotOptions.series.dataGrouping)
+		         *
+		         * @sample {highstock} stock/rangeselector/datagrouping/
+		         *         Data grouping by range selector buttons
+		         *
+		         * @type       {*}
+		         * @extends    plotOptions.series.dataGrouping
+		         * @product    highstock
+		         * @apioption  rangeSelector.buttons.dataGrouping
+		         */
+
+		        /**
+		         * The text for the button itself.
+		         *
+		         * @type       {string}
+		         * @product    highstock
+		         * @apioption  rangeSelector.buttons.text
+		         */
+
+		        /**
+		         * Defined the time span for the button. Can be one of `millisecond`,
+		         * `second`, `minute`, `hour`, `day`, `week`, `month`, `ytd`, `all`.
+		         *
+		         * @type       {string}
+		         * @product    highstock
+		         * @validvalue ["millisecond", "second", "minute", "day", "week", "month", "ytd", "all"]
+		         * @apioption  rangeSelector.buttons.type
+		         */
+
+		        /**
+		         * The space in pixels between the buttons in the range selector.
+		         *
+		         * @type       {number}
+		         * @default    0
+		         * @product    highstock
+		         * @apioption  rangeSelector.buttonSpacing
+		         */
+
+		        /**
+		         * Enable or disable the range selector.
+		         *
+		         * @sample {highstock} stock/rangeselector/enabled/
+		         *         Disable the range selector
+		         *
+		         * @type       {boolean}
+		         * @default    true
+		         * @product    highstock
+		         * @apioption  rangeSelector.enabled
+		         */
 
 		        /**
 		         * The vertical alignment of the rangeselector box. Allowed properties
 		         * are `top`, `middle`, `bottom`.
 		         *
-		         * @since 6.0.0
-		         * @validvalue ["top", "middle", "bottom"]
-		         * @sample {highstock} stock/rangeselector/vertical-align-middle/ Middle
+		         * @sample {highstock} stock/rangeselector/vertical-align-middle/
+		         *         Middle
+		         * @sample {highstock} stock/rangeselector/vertical-align-bottom/
+		         *         Bottom
 		         *
-		         * @sample {highstock} stock/rangeselector/vertical-align-bottom/ Bottom
+		         * @type       {string}
+		         * @default    top
+		         * @since      6.0.0
+		         * @validvalue ["top", "middle", "bottom"]
+		         * @apioption  rangeSelector.verticalAlign
 		         */
 		        verticalAlign: 'top',
 
@@ -6571,13 +7290,15 @@
 		         * `.highcharts-range-selector-buttons .highcharts-button` rule with its
 		         * different states.
 		         *
-		         * @type {Object}
 		         * @sample {highstock} stock/rangeselector/styling/
 		         *         Styling the buttons and inputs
-		         * @product highstock
+		         *
+		         * @type       {Highcharts.CSSObject}
+		         * @product    highstock
+		         * @apioption  rangeSelector.buttonTheme
 		         */
 		        buttonTheme: {
-		            'stroke-width': 0,
+            
 		            width: 28,
 		            height: 18,
 		            padding: 2,
@@ -6591,8 +7312,12 @@
 		         * @sample {highstock} stock/rangeselector/floating/
 		         *         Placing the range selector between the plot area and the
 		         *         navigator
-		         * @since 6.0.0
-		         * @product highstock
+		         *
+		         * @type       {boolean}
+		         * @default    false
+		         * @since      6.0.0
+		         * @product    highstock
+		         * @apioption  rangeSelector.floating
 		         */
 		        floating: false,
 
@@ -6600,8 +7325,11 @@
 		         * The x offset of the range selector relative to its horizontal
 		         * alignment within `chart.spacingLeft` and `chart.spacingRight`.
 		         *
-		         * @since 6.0.0
-		         * @product highstock
+		         * @type       {number}
+		         * @default    0
+		         * @since      6.0.0
+		         * @product    highstock
+		         * @apioption  rangeSelector.x
 		         */
 		        x: 0,
 
@@ -6609,8 +7337,11 @@
 		         * The y offset of the range selector relative to its horizontal
 		         * alignment within `chart.spacingLeft` and `chart.spacingRight`.
 		         *
-		         * @since 6.0.0
-		         * @product highstock
+		         * @type       {number}
+		         * @default    0
+		         * @since      6.0.0
+		         * @product    highstock
+		         * @apioption  rangeSelector.y
 		         */
 		        y: 0,
 
@@ -6618,67 +7349,216 @@
 		         * Deprecated. The height of the range selector. Currently it is
 		         * calculated dynamically.
 		         *
-		         * @type {Number}
-		         * @default undefined
-		         * @since 2.1.9
-		         * @product highstock
-		         * @deprecated true
+		         * @deprecated
+		         * @type       {number}
+		         * @default    undefined
+		         * @since      2.1.9
+		         * @product    highstock
+		         * @apioption  rangeSelector.height
 		         */
 		        height: undefined, // reserved space for buttons and input
 
+		        /**
+		         * The border color of the date input boxes.
+		         *
+		         * @sample {highstock} stock/rangeselector/styling/
+		         *         Styling the buttons and inputs
+		         *
+		         * @type       {Highcharts.ColorString}
+		         * @default    #cccccc
+		         * @since      1.3.7
+		         * @product    highstock
+		         * @apioption  rangeSelector.inputBoxBorderColor
+		         */
+
+		        /**
+		         * The pixel height of the date input boxes.
+		         *
+		         * @sample {highstock} stock/rangeselector/styling/
+		         *         Styling the buttons and inputs
+		         *
+		         * @type       {number}
+		         * @default    17
+		         * @since      1.3.7
+		         * @product    highstock
+		         * @apioption  rangeSelector.inputBoxHeight
+		         */
+
+		        /**
+		         * CSS for the container DIV holding the input boxes. Deprecated as
+		         * of 1.2.5\. Use [inputPosition](#rangeSelector.inputPosition) instead.
+		         *
+		         * @sample {highstock} stock/rangeselector/styling/
+		         *         Styling the buttons and inputs
+		         *
+		         * @deprecated
+		         * @type       {Highcharts.CSSObject}
+		         * @product    highstock
+		         * @apioption  rangeSelector.inputBoxStyle
+		         */
+
+		        /**
+		         * The pixel width of the date input boxes.
+		         *
+		         * @sample {highstock} stock/rangeselector/styling/
+		         *         Styling the buttons and inputs
+		         *
+		         * @type       {number}
+		         * @default    90
+		         * @since      1.3.7
+		         * @product    highstock
+		         * @apioption  rangeSelector.inputBoxWidth
+		         */
+
+		        /**
+		         * The date format in the input boxes when not selected for editing.
+		         * Defaults to `%b %e, %Y`.
+		         *
+		         * @sample {highstock} stock/rangeselector/input-format/
+		         *         Milliseconds in the range selector
+		         *
+		         * @type       {string}
+		         * @default    %b %e %Y,
+		         * @product    highstock
+		         * @apioption  rangeSelector.inputDateFormat
+		         */
+
+		        /**
+		         * A custom callback function to parse values entered in the input boxes
+		         * and return a valid JavaScript time as milliseconds since 1970.
+		         *
+		         * @sample {highstock} stock/rangeselector/input-format/
+		         *         Milliseconds in the range selector
+		         *
+		         * @type       {Function}
+		         * @since      1.3.3
+		         * @product    highstock
+		         * @apioption  rangeSelector.inputDateParser
+		         */
+
+		        /**
+		         * The date format in the input boxes when they are selected for
+		         * editing. This must be a format that is recognized by JavaScript
+		         * Date.parse.
+		         *
+		         * @sample {highstock} stock/rangeselector/input-format/
+		         *         Milliseconds in the range selector
+		         *
+		         * @type       {string}
+		         * @default    %Y-%m-%d
+		         * @product    highstock
+		         * @apioption  rangeSelector.inputEditDateFormat
+		         */
+
+		        /**
+		         * Enable or disable the date input boxes. Defaults to enabled when
+		         * there is enough space, disabled if not (typically mobile).
+		         *
+		         * @sample {highstock} stock/rangeselector/input-datepicker/
+		         *         Extending the input with a jQuery UI datepicker
+		         *
+		         * @type       {boolean}
+		         * @default    true
+		         * @product    highstock
+		         * @apioption  rangeSelector.inputEnabled
+		         */
+
 		        /**
 		         * Positioning for the input boxes. Allowed properties are `align`,
 		         *  `x` and `y`.
 		         *
-		         * @type {Object}
-		         * @default { align: "right" }
-		         * @since 1.2.4
-		         * @product highstock
+		         * @type       {*}
+		         * @since      1.2.4
+		         * @product    highstock
+		         * @apioption  rangeSelector.inputPosition
 		         */
 		        inputPosition: {
 		            /**
 		             * The alignment of the input box. Allowed properties are `left`,
 		             * `center`, `right`.
-		              * @validvalue ["left", "center", "right"]
-		              * @sample {highstock} stock/rangeselector/input-button-position/
-		              *         Alignment
-		              * @since 6.0.0
+		             *
+		             * @sample {highstock} stock/rangeselector/input-button-position/
+		             *         Alignment
+		             *
+		             * @type       {string}
+		             * @default    right
+		             * @since      6.0.0
+		             * @validvalue ["left", "center", "right"]
+		             * @apioption  rangeSelector.inputPosition.align
 		             */
 		            align: 'right',
+
+		            /**
+		             * X offset of the input row.
+		             *
+		             * @type       {number}
+		             * @default    0
+		             * @apioption  rangeSelector.inputPosition.x
+		             */
 		            x: 0,
+
+		            /**
+		             * Y offset of the input row.
+		             *
+		             * @type       {number}
+		             * @default    0
+		             * @apioption  rangeSelector.inputPosition.y
+		             */
 		            y: 0
 		        },
 
+		        /**
+		         * The index of the button to appear pre-selected.
+		         *
+		         * @type       {number}
+		         * @product    highstock
+		         * @apioption  rangeSelector.selected
+		         */
+
 		        /**
 		         * Positioning for the button row.
 		         *
-		         * @since 1.2.4
-		         * @product highstock
+		         * @type       {*}
+		         * @since      1.2.4
+		         * @product    highstock
+		         * @apioption  rangeSelector.buttonPosition
 		         */
 		        buttonPosition: {
+
 		            /**
 		             * The alignment of the input box. Allowed properties are `left`,
 		             * `center`, `right`.
-		              *
-		              * @validvalue ["left", "center", "right"]
-		              * @sample {highstock} stock/rangeselector/input-button-position/
-		              *         Alignment
-		              * @since 6.0.0
+		             *
+		             * @sample {highstock} stock/rangeselector/input-button-position/
+		             *         Alignment
+		             *
+		             * @type       {string}
+		             * @default    left
+		             * @since      6.0.0
+		             * @validvalue ["left", "center", "right"]
+		             * @apioption  rangeSelector.buttonPosition.align
 		             */
 		            align: 'left',
+
 		            /**
 		             * X offset of the button row.
+		             *
+		             * @type       {number}
+		             * @default    0
+		             * @apioption  rangeSelector.buttonPosition.x
 		             */
 		            x: 0,
+
 		            /**
 		             * Y offset of the button row.
+		             *
+		             * @type       {number}
+		             * @default    0
+		             * @apioption  rangeSelector.buttonPosition.y
 		             */
 		            y: 0
-		        },
-		        // inputDateFormat: '%b %e, %Y',
-		        // inputEditDateFormat: '%Y-%m-%d',
-		        // inputEnabled: true,
-		        // selected: undefined
+		        }
+
         
 		    }
 		});
@@ -6712,9 +7592,10 @@
 		        /**
 		         * The text for the label for the range selector buttons.
 		         *
-		         * @type {String}
-		         * @default Zoom
-		         * @product highstock
+		         * @type       {string}
+		         * @default    Zoom
+		         * @product    highstock
+		         * @apioption  lang.rangeSelectorZoom
 		         */
 		        rangeSelectorZoom: 'Zoom',
 
@@ -6722,18 +7603,20 @@
 		         * The text for the label for the "from" input box in the range
 		         * selector.
 		         *
-		         * @type {String}
-		         * @default From
-		         * @product highstock
+		         * @type       {string}
+		         * @default    From
+		         * @product    highstock
+		         * @apioption  lang.rangeSelectorFrom
 		         */
 		        rangeSelectorFrom: 'From',
 
 		        /**
 		         * The text for the label for the "to" input box in the range selector.
 		         *
-		         * @type {String}
-		         * @default To
-		         * @product highstock
+		         * @type       {string}
+		         * @default    To
+		         * @product    highstock
+		         * @apioption  lang.rangeSelectorTo
 		         */
 		        rangeSelectorTo: 'To'
 		    }
@@ -6741,8 +7624,10 @@
 
 		/**
 		 * The range selector.
-		 * @class
-		 * @param {Object} chart
+		 *
+		 * @class Highcharts.RangeSelector
+		 *
+		 * @param {Highcharts.Chart} chart
 		 */
 		function RangeSelector(chart) {
 
@@ -6754,9 +7639,15 @@
 		    /**
 		     * The method to run when one of the buttons in the range selectors is
 		     * clicked
-		     * @param {Number} i The index of the button
-		     * @param {Object} rangeOptions
-		     * @param {Boolean} redraw
+		     *
+		     * @function Highcharts.RangeSelector#clickButton
+		     *
+		     * @param  {number} i
+		     *         The index of the button
+		     *
+		     * @param  {boolean} redraw
+		     *
+		     * @return {void}
 		     */
 		    clickButton: function (i, redraw) {
 		        var rangeSelector = this,
@@ -6798,6 +7689,8 @@
 		                dataGrouping,
 		                false
 		            );
+
+		            this.frozenStates = rangeOptions.preserveDataGrouping;
 		        }
 
 		        // Apply range
@@ -6904,6 +7797,12 @@
 		    /**
 		     * Set the selected option. This method only sets the internal flag, it
 		     * doesn't update the buttons or the actual zoomed range.
+		     *
+		     * @function Highcharts.RangeSelector#setSelected
+		     *
+		     * @param  {boolean} selected
+		     *
+		     * @return {void}
 		     */
 		    setSelected: function (selected) {
 		        this.selected = this.options.selected = selected;
@@ -6938,6 +7837,12 @@
 
 		    /**
 		     * Initialize the range selector
+		     *
+		     * @function Highcharts.RangeSelector#init
+		     *
+		     * @param  {Highcharts.Chart} chart
+		     *
+		     * @return {void}
 		     */
 		    init: function (chart) {
 		        var rangeSelector = this,
@@ -6986,7 +7891,8 @@
 		                        this.max - this.min !== chart.fixedRange &&
 		                        e.trigger !== 'rangeSelectorButton' &&
 		                        e.trigger !== 'updatedData' &&
-		                        rangeSelector.forcedDataGrouping
+		                        rangeSelector.forcedDataGrouping &&
+		                        !rangeSelector.frozenStates
 		                    ) {
 		                        this.setDataGrouping(false, false);
 		                    }
@@ -6998,6 +7904,10 @@
 		    /**
 		     * Dynamically update the range selector buttons after a new range has been
 		     * set
+		     *
+		     * @function Highcharts.RangeSelector#updateButtonStates
+		     *
+		     * @return {void}
 		     */
 		    updateButtonStates: function () {
 		        var rangeSelector = this,
@@ -7085,7 +7995,8 @@
 		            );
 		            select = (
 		                (isSelected && isSameRange) ||
-		                (isSameRange && !selectedExists && !isYTDButNotSelected)
+		                (isSameRange && !selectedExists && !isYTDButNotSelected) ||
+		                (isSelected && rangeSelector.frozenStates)
 		            );
 
 		            if (disable) {
@@ -7104,6 +8015,12 @@
 
 		    /**
 		     * Compute and cache the range for an individual button
+		     *
+		     * @function Highcharts.RangeSelector#computeButtonRange
+		     *
+		     * @param  {Highcharts.RangeSelectorOptions} rangeOptions
+		     *
+		     * @return {void}
 		     */
 		    computeButtonRange: function (rangeOptions) {
 		        var type = rangeOptions.type,
@@ -7136,8 +8053,14 @@
 
 		    /**
 		     * Set the internal and displayed value of a HTML input for the dates
-		     * @param {String} name
-		     * @param {Number} inputTime
+		     *
+		     * @function Highcharts.RangeSelector#setInputValue
+		     *
+		     * @param  {string} name
+		     *
+		     * @param  {number} inputTime
+		     *
+		     * @return {void}
 		     */
 		    setInputValue: function (name, inputTime) {
 		        var options = this.chart.options.rangeSelector,
@@ -7161,6 +8084,13 @@
 		        });
 		    },
 
+		    /**
+		     * @function Highcharts.RangeSelector#showInput
+		     *
+		     * @param  {string} name
+		     *
+		     * @return {void}
+		     */
 		    showInput: function (name) {
 		        var inputGroup = this.inputGroup,
 		            dateBox = this[name + 'DateBox'];
@@ -7174,6 +8104,13 @@
 		        });
 		    },
 
+		    /**
+		     * @function Highcharts.RangeSelector#hideInput
+		     *
+		     * @param  {string} name
+		     *
+		     * @return {void}
+		     */
 		    hideInput: function (name) {
 		        css(this[name + 'Input'], {
 		            border: 0,
@@ -7185,7 +8122,12 @@
 
 		    /**
 		     * Draw either the 'from' or the 'to' HTML input box of the range selector
-		     * @param {Object} name
+		     *
+		     * @function Highcharts.RangeSelector#drawInput
+		     *
+		     * @param  {string} name
+		     *
+		     * @return {void}
 		     */
 		    drawInput: function (name) {
 		        var rangeSelector = this,
@@ -7282,10 +8224,8 @@
 		                padding: 2,
 		                width: options.inputBoxWidth || 90,
 		                height: options.inputBoxHeight || 17,
-		                stroke:
-		                    options.inputBoxBorderColor || '#cccccc',
-		                'stroke-width': 1,
 		                'text-align': 'center'
+                
 		            })
 		            .on('click', function () {
 		                // If it is already focused, the onfocus event doesn't fire
@@ -7332,6 +8272,10 @@
 		    /**
 		     * Get the position of the range selector buttons and inputs. This can be
 		     * overridden from outside for custom positioning.
+		     *
+		     * @function Highcharts.RangeSelector#getPosition
+		     *
+		     * @return {Highcharts.Dictionary<number>}
 		     */
 		    getPosition: function () {
 		        var chart = this.chart,
@@ -7346,13 +8290,18 @@
 		        };
 		    },
 		    /**
-		     * Get the extremes of YTD.
-		     * Will choose dataMax if its value is lower than the current timestamp.
-		     * Will choose dataMin if its value is higher than the timestamp for
-		     *     the start of current year.
+		     * Get the extremes of YTD. Will choose dataMax if its value is lower than
+		     * the current timestamp. Will choose dataMin if its value is higher than
+		     * the timestamp for the start of current year.
+		     *
+		     * @function Highcharts.RangeSelector#getYTDExtremes
+		     *
 		     * @param  {number} dataMax
+		     *
 		     * @param  {number} dataMin
-		     * @return {object} Returns min and max for the YTD
+		     *
+		     * @return {*}
+		     *         Returns min and max for the YTD
 		     */
 		    getYTDExtremes: function (dataMax, dataMin, useUTC) {
 		        var time = this.chart.time,
@@ -7374,8 +8323,16 @@
 		     * Render the range selector including the buttons and the inputs. The first
 		     * time render is called, the elements are created and positioned. On
 		     * subsequent calls, they are moved and updated.
-		     * @param {Number} min X axis minimum
-		     * @param {Number} max X axis maximum
+		     *
+		     * @function Highcharts.RangeSelector#render
+		     *
+		     * @param  {number} min
+		     *         X axis minimum
+		     *
+		     * @param  {number} max
+		     *         X axis maximum
+		     *
+		     * @return {void}
 		     */
 		    render: function (min, max) {
 
@@ -7393,6 +8350,12 @@
 		            lang = defaultOptions.lang,
 		            div = rangeSelector.div,
 		            options = chartOptions.rangeSelector,
+		            // Place inputs above the container
+		            inputsZIndex = pick(
+		                chartOptions.chart.style &&
+		                chartOptions.chart.style.zIndex,
+		                0
+		            ) + 1,
 		            floating = options.floating,
 		            buttons = rangeSelector.buttons,
 		            inputGroup = rangeSelector.inputGroup,
@@ -7413,6 +8376,7 @@
 		            buttonPositionY = buttonPosition.y,
 		            inputPositionY = inputPosition.y,
 		            animate = rendered || false,
+		            verb = animate ? 'animate' : 'attr',
 		            exportingX = 0,
 		            alignTranslateY,
 		            legendHeight,
@@ -7438,20 +8402,17 @@
 
 		            rangeSelector.zoomText = renderer.text(
 		                    lang.rangeSelectorZoom,
-		                    pick(plotLeft + buttonPosition.x, plotLeft), 15
+		                    0,
+		                    15
 		                )
 		                .css(options.labelStyle)
 		                .add(buttonGroup);
 
-		            // button start position
-		            buttonLeft = pick(plotLeft + buttonPosition.x, plotLeft) +
-		                rangeSelector.zoomText.getBBox().width + 5;
-
 		            each(rangeSelector.buttonOptions, function (rangeOptions, i) {
 
 		                buttons[i] = renderer.button(
 		                        rangeOptions.text,
-		                        buttonLeft,
+		                        0,
 		                        0,
 		                        function () {
 
@@ -7482,9 +8443,6 @@
 		                        'text-align': 'center'
 		                    })
 		                    .add(buttonGroup);
-
-		                // increase button position for the next button
-		                buttonLeft += buttons[i].width + pick(options.buttonSpacing, 5);
 		            });
 
 		            // first create a wrapper outside the container in order to make
@@ -7493,7 +8451,7 @@
 		                rangeSelector.div = div = createElement('div', null, {
 		                    position: 'relative',
 		                    height: 0,
-		                    zIndex: 1 // above container
+		                    zIndex: inputsZIndex
 		                });
 
 		                container.parentNode.insertBefore(div, container);
@@ -7508,6 +8466,22 @@
 		            }
 		        }
 
+		        // #8769, allow dynamically updating margins
+		        rangeSelector.zoomText[verb]({
+		            x: pick(plotLeft + buttonPosition.x, plotLeft)
+		        });
+		        // button start position
+		        buttonLeft = pick(plotLeft + buttonPosition.x, plotLeft) +
+		            rangeSelector.zoomText.getBBox().width + 5;
+		        each(rangeSelector.buttonOptions, function (rangeOptions, i) {
+
+		            buttons[i][verb]({ x: buttonLeft });
+
+		            // increase button position for the next button
+		            buttonLeft += buttons[i].width + pick(options.buttonSpacing, 5);
+		        });
+
+
 		        plotLeft = chart.plotLeft - chart.spacing[3];
 		        rangeSelector.updateButtonStates();
 
@@ -7709,7 +8683,11 @@
 
 		    /**
 		     * Extracts height of range selector
-		     * @return {Number} Returns rangeSelector height
+		     *
+		     * @function Highcharts.RangeSelector#getHeight
+		     *
+		     * @return {number}
+		     *         Returns rangeSelector height
 		     */
 		    getHeight: function () {
 		        var rangeSelector = this,
@@ -7742,8 +8720,13 @@
 
 		    /**
 		     * Detect collision with title or subtitle
-		     * @param {object} chart
-		     * @return {Boolean} Returns collision status
+		     *
+		     * @function Highcharts.RangeSelector#titleCollision
+		     *
+		     * @param  {Highcharts.Chart} chart
+		     *
+		     * @return {boolean}
+		     *         Returns collision status
 		     */
 		    titleCollision: function (chart) {
 		        return !(chart.options.title.text || chart.options.subtitle.text);
@@ -7751,7 +8734,12 @@
 
 		    /**
 		     * Update the range selector with new options
-		     * @param {object} options
+		     *
+		     * @function Highcharts.RangeSelector#update
+		     *
+		     * @param  {Highcharts.RangeSelectorOptions} options
+		     *
+		     * @return {void}
 		     */
 		    update: function (options) {
 		        var chart = this.chart;
@@ -7764,6 +8752,10 @@
 
 		    /**
 		     * Destroys allocated elements.
+		     *
+		     * @function Highcharts.RangeSelector#destroy
+		     *
+		     * @return {void}
 		     */
 		    destroy: function () {
 		        var rSelector = this,
@@ -7803,6 +8795,18 @@
 		/**
 		 * Add logic to normalize the zoomed range in order to preserve the pressed
 		 * state of range selector buttons
+		 *
+		 * @function Highcharts.Axis#toFixedRange
+		 *
+		 * @param  {number} pxMin
+		 *
+		 * @param  {number} pxMax
+		 *
+		 * @param  {number} fixedMin
+		 *
+		 * @param  {number} fixedMax
+		 *
+		 * @return {*}
 		 */
 		Axis.prototype.toFixedRange = function (pxMin, pxMax, fixedMin, fixedMax) {
 		    var fixedRange = this.chart && this.chart.fixedRange,
@@ -7836,7 +8840,10 @@
 		 * selected range is a multiple of months or years, it is compensated for
 		 * various month lengths.
 		 *
-		 * @return {number} The new minimum value.
+		 * @function Highcharts.Axis#minFromRange
+		 *
+		 * @return {number}
+		 *         The new minimum value.
 		 */
 		Axis.prototype.minFromRange = function () {
 		    var rangeOptions = this.range,
@@ -7933,20 +8940,32 @@
 
 		    var chart = this,
 		        options = e.options,
+		        optionsRangeSelector = options.rangeSelector,
 		        rangeSelector = chart.rangeSelector,
-		        verticalAlign;
+		        verticalAlign,
+		        extraBottomMarginWas = this.extraBottomMargin,
+		        extraTopMarginWas = this.extraTopMargin;
+
+		    if (
+		        optionsRangeSelector &&
+		        optionsRangeSelector.enabled &&
+		        !defined(rangeSelector)
+		    ) {
+		        this.options.rangeSelector.enabled = true;
+		        this.rangeSelector = new RangeSelector(this);
+		    }
+
 
 		    this.extraBottomMargin = false;
 		    this.extraTopMargin = false;
-		    this.isDirtyBox = true; //    #7684 - ignored spacingBottom after update
 
 		    if (rangeSelector) {
 
 		        rangeSelector.render();
 
 		        verticalAlign = (
-		            options.rangeSelector &&
-		            options.rangeSelector.verticalAlign
+		            optionsRangeSelector &&
+		            optionsRangeSelector.verticalAlign
 		        ) || (
 		            rangeSelector.options && rangeSelector.options.verticalAlign
 		        );
@@ -7959,6 +8978,13 @@
 		            }
 		        }
 
+		        if (
+		            this.extraBottomMargin !== extraBottomMarginWas ||
+		            this.extraTopMargin !== extraTopMarginWas
+		        ) {
+		            this.isDirtyBox = true;
+		        }
+
 		    }
 
 		});
@@ -8049,7 +9075,7 @@
 	}(Highcharts));
 	(function (H) {
 		/**
-		 * (c) 2010-2017 Torstein Honsi
+		 * (c) 2010-2018 Torstein Honsi
 		 *
 		 * License: www.highcharts.com/license
 		 */
@@ -8089,7 +9115,8 @@
 		 * zero value in the visible range. The y axis will show percentage
 		 * or absolute change depending on whether `compare` is set to `"percent"`
 		 * or `"value"`. When this is applied to multiple series, it allows
-		 * comparing the development of the series against each other.
+		 * comparing the development of the series against each other. Adds
+		 * a `change` field to every point object.
 		 *
 		 * @type {String}
 		 * @see [compareBase](#plotOptions.series.compareBase),
@@ -8103,7 +9130,7 @@
 		 */
 
 		/**
-		 * Defines if comparisson should start from the first point within the visible
+		 * Defines if comparison should start from the first point within the visible
 		 * range or should start from the first point <b>before</b> the range.
 		 * In other words, this flag determines if first point within the visible range
 		 * will have 0% (`compareStart=true`) or should have been already calculated
@@ -8442,7 +9469,7 @@
 		            inArray(axis2, uniqueAxes) === -1 &&
 		            // Do not draw on axis which overlap completely. #5424
 		            !H.find(uniqueAxes, function (unique) {
-		                return unique.pos === axis2.pos && unique.len && axis2.len;
+		                return unique.pos === axis2.pos && unique.len === axis2.len;
 		            })
 		        ) {
 		            uniqueAxes.push(axis2);
@@ -8460,7 +9487,10 @@
 		                x1 = x2 = Math.round(transVal + axis.transB);
 
 		                // outside plot area
-		                if (x1 < axisLeft || x1 > axisLeft + axis.width) {
+		                if (
+		                    force !== 'pass' &&
+		                    (x1 < axisLeft || x1 > axisLeft + axis.width)
+		                ) {
 		                    if (force) {
 		                        x1 = x2 = Math.min(
 		                            Math.max(axisLeft, x1),
@@ -8483,7 +9513,10 @@
 		                y1 = y2 = Math.round(axisTop + axis.height - transVal);
 
 		                // outside plot area
-		                if (y1 < axisTop || y1 > axisTop + axis.height) {
+		                if (
+		                    force !== 'pass' &&
+		                    (y1 < axisTop || y1 > axisTop + axis.height)
+		                ) {
 		                    if (force) {
 		                        y1 = y2 = Math.min(
 		                            Math.max(axisTop, y1),
@@ -8567,7 +9600,18 @@
 		        offset = 0,
 		        // Use last available event (#5287)
 		        e = event.e || (this.cross && this.cross.e),
-		        point = event.point;
+		        point = event.point,
+		        lin2log = this.lin2log,
+		        min,
+		        max;
+
+		    if (this.isLog) {
+		        min = lin2log(this.min);
+		        max = lin2log(this.max);
+		    } else {
+		        min = this.min;
+		        max = this.max;
+		    }
 
 		    align = (horiz ? 'center' : opposite ?
 		        (this.labelAlign === 'right' ? 'right' : 'left') :
@@ -8624,7 +9668,7 @@
 		        x: posx,
 		        y: posy,
 		        // Crosshair should be rendered within Axis range (#7219)
-		        visibility: value < this.min || value > this.max ? 'hidden' : 'visible'
+		        visibility: value < min || value > max ? 'hidden' : 'visible'
 		    });
 
 		    crossBox = crossLabel.getBBox();