highcharts 6.1.1 → 6.2.0

package/es-modules/parts/RangeSelector.js

@@ -1,5 +1,5 @@
 /**
- * (c) 2010-2017 Torstein Honsi
+ * (c) 2010-2018 Torstein Honsi
  *
  * License: www.highcharts.com/license
  */
@@ -41,20 +41,201 @@ extend(defaultOptions, {
      * @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',
 
@@ -73,13 +254,17 @@ extend(defaultOptions, {
          * `.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,
@@ -93,8 +278,12 @@ extend(defaultOptions, {
          * @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,
 
@@ -102,8 +291,11 @@ extend(defaultOptions, {
          * 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,
 
@@ -111,8 +303,11 @@ extend(defaultOptions, {
          * 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,
 
@@ -120,69 +315,232 @@ extend(defaultOptions, {
          * 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,
+
         
-        // inputStyle: {},
+
+        /**
+         * CSS for the HTML inputs in the range selector.
+         *
+         * In styled mode, the inputs are styled by the
+         * `.highcharts-range-input text` rule in SVG mode, and
+         * `input.highcharts-range-selector` when active.
+         *
+         * @sample {highstock} stock/rangeselector/styling/
+         *         Styling the buttons and inputs
+         *
+         * @type       {Highcharts.CSSObject}
+         * @product    highstock
+         * @apioption  rangeSelector.inputStyle
+         */
 
         /**
          * CSS styles for the labels - the Zoom, From and To texts.
@@ -190,10 +548,12 @@ extend(defaultOptions, {
          * In styled mode, the labels are styled by the
          * `.highcharts-range-label` class.
          *
-         * @type {CSSObject}
          * @sample {highstock} stock/rangeselector/styling/
          *         Styling the buttons and inputs
-         * @product highstock
+         *
+         * @type       {Highcharts.CSSObject}
+         * @product    highstock
+         * @apioption  rangeSelector.labelStyle
          */
         labelStyle: {
             color: '#666666'
@@ -231,9 +591,10 @@ defaultOptions.lang = merge(
         /**
          * 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',
 
@@ -241,18 +602,20 @@ defaultOptions.lang = merge(
          * 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'
     }
@@ -260,8 +623,10 @@ defaultOptions.lang = merge(
 
 /**
  * The range selector.
- * @class
- * @param {Object} chart
+ *
+ * @class Highcharts.RangeSelector
+ *
+ * @param {Highcharts.Chart} chart
  */
 function RangeSelector(chart) {
 
@@ -273,9 +638,15 @@ RangeSelector.prototype = {
     /**
      * 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,
@@ -317,6 +688,8 @@ RangeSelector.prototype = {
                 dataGrouping,
                 false
             );
+
+            this.frozenStates = rangeOptions.preserveDataGrouping;
         }
 
         // Apply range
@@ -423,6 +796,12 @@ RangeSelector.prototype = {
     /**
      * 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;
@@ -457,6 +836,12 @@ RangeSelector.prototype = {
 
     /**
      * Initialize the range selector
+     *
+     * @function Highcharts.RangeSelector#init
+     *
+     * @param  {Highcharts.Chart} chart
+     *
+     * @return {void}
      */
     init: function (chart) {
         var rangeSelector = this,
@@ -505,7 +890,8 @@ RangeSelector.prototype = {
                         this.max - this.min !== chart.fixedRange &&
                         e.trigger !== 'rangeSelectorButton' &&
                         e.trigger !== 'updatedData' &&
-                        rangeSelector.forcedDataGrouping
+                        rangeSelector.forcedDataGrouping &&
+                        !rangeSelector.frozenStates
                     ) {
                         this.setDataGrouping(false, false);
                     }
@@ -517,6 +903,10 @@ RangeSelector.prototype = {
     /**
      * Dynamically update the range selector buttons after a new range has been
      * set
+     *
+     * @function Highcharts.RangeSelector#updateButtonStates
+     *
+     * @return {void}
      */
     updateButtonStates: function () {
         var rangeSelector = this,
@@ -604,7 +994,8 @@ RangeSelector.prototype = {
             );
             select = (
                 (isSelected && isSameRange) ||
-                (isSameRange && !selectedExists && !isYTDButNotSelected)
+                (isSameRange && !selectedExists && !isYTDButNotSelected) ||
+                (isSelected && rangeSelector.frozenStates)
             );
 
             if (disable) {
@@ -623,6 +1014,12 @@ RangeSelector.prototype = {
 
     /**
      * 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,
@@ -655,8 +1052,14 @@ RangeSelector.prototype = {
 
     /**
      * 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,
@@ -680,6 +1083,13 @@ RangeSelector.prototype = {
         });
     },
 
+    /**
+     * @function Highcharts.RangeSelector#showInput
+     *
+     * @param  {string} name
+     *
+     * @return {void}
+     */
     showInput: function (name) {
         var inputGroup = this.inputGroup,
             dateBox = this[name + 'DateBox'];
@@ -693,6 +1103,13 @@ RangeSelector.prototype = {
         });
     },
 
+    /**
+     * @function Highcharts.RangeSelector#hideInput
+     *
+     * @param  {string} name
+     *
+     * @return {void}
+     */
     hideInput: function (name) {
         css(this[name + 'Input'], {
             border: 0,
@@ -704,7 +1121,12 @@ RangeSelector.prototype = {
 
     /**
      * 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,
@@ -801,10 +1223,12 @@ RangeSelector.prototype = {
                 padding: 2,
                 width: options.inputBoxWidth || 90,
                 height: options.inputBoxHeight || 17,
+                'text-align': 'center',
+                
                 stroke:
                     options.inputBoxBorderColor || '#cccccc',
-                'stroke-width': 1,
-                'text-align': 'center'
+                'stroke-width': 1
+                
             })
             .on('click', function () {
                 // If it is already focused, the onfocus event doesn't fire
@@ -870,6 +1294,10 @@ RangeSelector.prototype = {
     /**
      * 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,
@@ -884,13 +1312,18 @@ RangeSelector.prototype = {
         };
     },
     /**
-     * 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,
@@ -912,8 +1345,16 @@ RangeSelector.prototype = {
      * 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) {
 
@@ -931,6 +1372,12 @@ RangeSelector.prototype = {
             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,
@@ -951,6 +1398,7 @@ RangeSelector.prototype = {
             buttonPositionY = buttonPosition.y,
             inputPositionY = inputPosition.y,
             animate = rendered || false,
+            verb = animate ? 'animate' : 'attr',
             exportingX = 0,
             alignTranslateY,
             legendHeight,
@@ -976,20 +1424,17 @@ RangeSelector.prototype = {
 
             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 () {
 
@@ -1020,9 +1465,6 @@ RangeSelector.prototype = {
                         '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
@@ -1031,7 +1473,7 @@ RangeSelector.prototype = {
                 rangeSelector.div = div = createElement('div', null, {
                     position: 'relative',
                     height: 0,
-                    zIndex: 1 // above container
+                    zIndex: inputsZIndex
                 });
 
                 container.parentNode.insertBefore(div, container);
@@ -1046,6 +1488,22 @@ RangeSelector.prototype = {
             }
         }
 
+        // #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();
 
@@ -1247,7 +1705,11 @@ RangeSelector.prototype = {
 
     /**
      * Extracts height of range selector
-     * @return {Number} Returns rangeSelector height
+     *
+     * @function Highcharts.RangeSelector#getHeight
+     *
+     * @return {number}
+     *         Returns rangeSelector height
      */
     getHeight: function () {
         var rangeSelector = this,
@@ -1280,8 +1742,13 @@ RangeSelector.prototype = {
 
     /**
      * 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);
@@ -1289,7 +1756,12 @@ RangeSelector.prototype = {
 
     /**
      * 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;
@@ -1302,6 +1774,10 @@ RangeSelector.prototype = {
 
     /**
      * Destroys allocated elements.
+     *
+     * @function Highcharts.RangeSelector#destroy
+     *
+     * @return {void}
      */
     destroy: function () {
         var rSelector = this,
@@ -1341,6 +1817,18 @@ RangeSelector.prototype = {
 /**
  * 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,
@@ -1374,7 +1862,10 @@ Axis.prototype.toFixedRange = function (pxMin, pxMax, fixedMin, fixedMax) {
  * 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,
@@ -1471,20 +1962,32 @@ addEvent(Chart, 'update', function (e) {
 
     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
         );
@@ -1497,6 +2000,13 @@ addEvent(Chart, 'update', function (e) {
             }
         }
 
+        if (
+            this.extraBottomMargin !== extraBottomMarginWas ||
+            this.extraTopMargin !== extraTopMarginWas
+        ) {
+            this.isDirtyBox = true;
+        }
+
     }
 
 });