/**
 * @license Highcharts JS vv7.0.1 custom build (2019-01-15)
 *
 * (c) 2009-2016 Torstein Honsi
 *
 * License: www.highcharts.com/license
 */
'use strict';
(function (root, factory) {
	if (typeof module === 'object' && module.exports) {
		factory.default = factory;
		module.exports = root.document ?
			factory(root) :
			factory;
	} else if (typeof define === 'function' && define.amd) {
		define(function () {
			return factory(root);
		});
	} else {
		root.Highcharts = factory(root);
	}
}(typeof window !== 'undefined' ? window : this, function (win) {
	var Highcharts = (function () {
		/**
		 * (c) 2010-2018 Torstein Honsi
		 *
		 * License: www.highcharts.com/license
		 */

		/**
		 * Reference to the global SVGElement class as a workaround for a name conflict
		 * in the Highcharts namespace.
		 *
		 * @global
		 * @typedef {global.SVGElement} GlobalSVGElement
		 *
		 * @see https://developer.mozilla.org/en-US/docs/Web/API/SVGElement
		 */


		/* global win, window */

		// glob is a temporary fix to allow our es-modules to work.
		var glob = typeof win === 'undefined' ? window : win,
		    doc = glob.document,
		    SVG_NS = 'http://www.w3.org/2000/svg',
		    userAgent = (glob.navigator && glob.navigator.userAgent) || '',
		    svg = (
		        doc &&
		        doc.createElementNS &&
		        !!doc.createElementNS(SVG_NS, 'svg').createSVGRect
		    ),
		    isMS = /(edge|msie|trident)/i.test(userAgent) && !glob.opera,
		    isFirefox = userAgent.indexOf('Firefox') !== -1,
		    isChrome = userAgent.indexOf('Chrome') !== -1,
		    hasBidiBug = (
		        isFirefox &&
		        parseInt(userAgent.split('Firefox/')[1], 10) < 4 // issue #38
		    );

		var Highcharts = glob.Highcharts ? glob.Highcharts.error(16, true) : {
		    product: 'Highcharts',
		    version: 'v7.0.1 custom build',
		    deg2rad: Math.PI * 2 / 360,
		    doc: doc,
		    hasBidiBug: hasBidiBug,
		    hasTouch: doc && doc.documentElement.ontouchstart !== undefined,
		    isMS: isMS,
		    isWebKit: userAgent.indexOf('AppleWebKit') !== -1,
		    isFirefox: isFirefox,
		    isChrome: isChrome,
		    isSafari: !isChrome && userAgent.indexOf('Safari') !== -1,
		    isTouchDevice: /(Mobile|Android|Windows Phone)/.test(userAgent),
		    SVG_NS: SVG_NS,
		    chartCount: 0,
		    seriesTypes: {},
		    symbolSizes: {},
		    svg: svg,
		    win: glob,
		    marginNames: ['plotTop', 'marginRight', 'marginBottom', 'plotLeft'],
		    noop: function () {
		        return undefined;
		    },
		    /**
		     * An array containing the current chart objects in the page. A chart's
		     * position in the array is preserved throughout the page's lifetime. When
		     * a chart is destroyed, the array item becomes `undefined`.
		     *
		     * @name Highcharts.charts
		     * @type {Array<Highcharts.Chart>}
		     */
		    charts: []
		};

		return Highcharts;
	}());
	(function (H) {
		/* *
		 *
		 *  (c) 2010-2018 Torstein Honsi
		 *
		 *  License: www.highcharts.com/license
		 *
		 * */

		/**
		 * Reference to the global SVGElement class as a workaround for a name conflict
		 * in the Highcharts namespace.
		 *
		 * @see https://developer.mozilla.org/en-US/docs/Web/API/SVGElement
		 *
		 * @global
		 * @typedef {global.SVGElement} GlobalSVGElement
		 */

		/**
		 * An animation configuration. Animation configurations can also be defined as
		 * booleans, where `false` turns off animation and `true` defaults to a duration
		 * of 500ms.
		 *
		 * @interface Highcharts.AnimationOptionsObject
		 *//**
		 * A callback function to exectute when the animation finishes.
		 * @name Highcharts.AnimationOptionsObject#complete
		 * @type {Function|undefined}
		 *//**
		 * The animation duration in milliseconds.
		 * @name Highcharts.AnimationOptionsObject#duration
		 * @type {number}
		 *//**
		 * The name of an easing function as defined on the `Math` object.
		 * @name Highcharts.AnimationOptionsObject#easing
		 * @type {string|undefined}
		 *//**
		 * A callback function to execute on each step of each attribute or CSS property
		 * that's being animated. The first argument contains information about the
		 * animation and progress.
		 * @name Highcharts.AnimationOptionsObject#step
		 * @type {Function|undefined}
		 */

		/**
		 * A style object with camel case property names to define visual appearance of
		 * a SVG element or HTML element. The properties can be whatever styles are
		 * supported on the given SVG or HTML element.
		 *
		 * @example
		 * {
		 *    fontFamily: 'monospace',
		 *    fontSize: '1.2em'
		 * }
		 *
		 * @interface Highcharts.CSSObject
		 *//**
		 * @name Highcharts.CSSObject#[key:string]
		 * @type {boolean|number|string|undefined}
		 *//**
		 * Background style for the element.
		 * @name Highcharts.CSSObject#background
		 * @type {string|undefined}
		 *//**
		 * Background color of the element.
		 * @name Highcharts.CSSObject#backgroundColor
		 * @type {Highcharts.ColorString|undefined}
		 *//**
		 * Border style for the element.
		 * @name Highcharts.CSSObject#border
		 * @type {string|undefined}
		 *//**
		 * Radius of the element border.
		 * @name Highcharts.CSSObject#borderRadius
		 * @type {number|undefined}
		 *//**
		 * Color used in the element. The "contrast" option is a Highcharts custom
		 * property that results in black or white, depending on the background of the
		 * element.
		 * @name Highcharts.CSSObject#color
		 * @type {"contrast"|Highcharts.ColorString|undefined}
		 *//**
		 * Style of the mouse cursor when resting over the element.
		 * @name Highcharts.CSSObject#cursor
		 * @type {Highcharts.CursorType|undefined}
		 *//**
		 * Font family of the element text. Multiple values have to be in decreasing
		 * preference order and separated by comma.
		 * @name Highcharts.CSSObject#fontFamily
		 * @type {string|undefined}
		 *//**
		 * Font size of the element text.
		 * @name Highcharts.CSSObject#fontSize
		 * @type {string|undefined}
		 *//**
		 * Font weight of the element text.
		 * @name Highcharts.CSSObject#fontWeight
		 * @type {string|undefined}
		 *//**
		 * Height of the element.
		 * @name Highcharts.CSSObject#height
		 * @type {number|undefined}
		 *//**
		 * Width of the element border.
		 * @name Highcharts.CSSObject#lineWidth
		 * @type {number|undefined}
		 *//**
		 * Opacity of the element.
		 * @name Highcharts.CSSObject#opacity
		 * @type {number|undefined}
		 *//**
		 * Space around the element content.
		 * @name Highcharts.CSSObject#padding
		 * @type {string|undefined}
		 *//**
		 * Behaviour of the element when the mouse cursor rests over it.
		 * @name Highcharts.CSSObject#pointerEvents
		 * @type {string|undefined}
		 *//**
		 * Positioning of the element.
		 * @name Highcharts.CSSObject#position
		 * @type {string|undefined}
		 *//**
		 * Alignment of the element text.
		 * @name Highcharts.CSSObject#textAlign
		 * @type {string|undefined}
		 *//**
		 * Outline style of the element text.
		 * @name Highcharts.CSSObject#textOutline
		 * @type {string|undefined}
		 *//**
		 * Additional decoration of the element text.
		 * @name Highcharts.CSSObject#textDecoration
		 * @type {string|undefined}
		 *//**
		 * Line break style of the element text. Highcharts SVG elements support
		 * `ellipsis` when a `width` is set.
		 * @name Highcharts.CSSObject#textOverflow
		 * @type {string|undefined}
		 *//**
		 * Top spacing of the element relative to the parent element.
		 * @name Highcharts.CSSObject#top
		 * @type {string|undefined}
		 *//**
		 * Animated transition of selected element properties.
		 * @name Highcharts.CSSObject#transition
		 * @type {string|undefined}
		 *//**
		 * Line break style of the element text.
		 * @name Highcharts.CSSObject#whiteSpace
		 * @type {string|undefined}
		 *//**
		 * Width of the element.
		 * @name Highcharts.CSSObject#width
		 * @type {number|undefined}
		 */

		/**
		 * All possible cursor styles.
		 *
		 * @typedef {"alias"|"all-scroll"|"auto"|"cell"|"col-resize"|"context-menu"|"copy"|"crosshair"|"default"|"e-resize"|"ew-resize"|"grab"|"grabbing"|"help"|"move"|"n-resize"|"ne-resize"|"nesw-resize"|"no-drop"|"none"|"not-allowed"|"ns-resize"|"nw-resize"|"nwse-resize"|"pointer"|"progress"|"row-resize"|"s-resize"|"se-resize"|"sw-resize"|"text"|"vertical-text"|"w-resize"|"wait"|"zoom-in"|"zoom-out"} Highcharts.CursorType
		 */

		/**
		 * Generic dictionary in TypeScript notation.
		 *
		 * @interface Highcharts.Dictionary<T>
		 *//**
		 * @name Highcharts.Dictionary<T>#[key:string]
		 * @type {T}
		 */

		/**
		 * The function callback to execute when the event is fired. The `this` context
		 * contains the instance, that fired the event.
		 *
		 * @callback Highcharts.EventCallbackFunction<T>
		 *
		 * @param {T} this
		 *
		 * @param {Highcharts.Dictionary<*>} [eventArguments]
		 *        Event arguments.
		 */

		/**
		 * The event options for adding function callback.
		 *
		 * @interface Highcharts.EventOptionsObject
		 *//**
		 * The order the event handler should be called. This opens for having one
		 * handler be called before another, independent of in which order they were
		 * added.
		 * @name Highcharts.EventOptionsObject#order
		 * @type {number}
		 */

		/**
		 * Formats data as a string. Usually the data is accessible throught the `this`
		 * keyword.
		 *
		 * @callback Highcharts.FormatterCallbackFunction<T>
		 *
		 * @param {T} this
		 *
		 * @return {string}
		 */

		/**
		 * An object of key-value pairs for HTML attributes.
		 *
		 * @typedef {Highcharts.Dictionary<boolean|number|string>} Highcharts.HTMLAttributes
		 */

		/**
		 * An HTML DOM element. The type is a reference to the regular HTMLElement in
		 * the global scope.
		 *
		 * @typedef {global.HTMLElement} Highcharts.HTMLDOMElement
		 *
		 * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement
		 */

		/**
		 * The iterator callback.
		 *
		 * @callback Highcharts.ObjectEachCallbackFunction
		 *
		 * @param {*} value
		 *        The property value.
		 *
		 * @param {string} key
		 *        The property key.
		 *
		 * @param {*} obj
		 *        The object that objectEach is being applied to.
		 */

		/**
		 * An object containing `left` and `top` properties for the position in the
		 * page.
		 *
		 * @interface Highcharts.OffsetObject
		 *//**
		 * Left distance to the page border.
		 * @name Highcharts.OffsetObject#left
		 * @type {number}
		 *//**
		 * Top distance to the page border.
		 * @name Highcharts.OffsetObject#top
		 * @type {number}
		 */

		/**
		 * An object containing `x` and `y` properties for the position of an element.
		 *
		 * @interface Highcharts.PositionObject
		 *//**
		 * X position of the element.
		 * @name Highcharts.PositionObject#x
		 * @type {number}
		 *//**
		 * Y position of the element.
		 * @name Highcharts.PositionObject#y
		 * @type {number}
		 */

		/**
		 * If a number is given, it defines the pixel length. If a percentage string is
		 * given, like for example `'50%'`, the setting defines a length relative to a
		 * base size, for example the size of a container.
		 *
		 * @typedef {number|string} Highcharts.RelativeSize
		 */

		/**
		 * An object of key-value pairs for SVG attributes. Attributes in Highcharts
		 * elements for the most parts correspond to SVG, but some are specific to
		 * Highcharts, like `zIndex`, `rotation`, `rotationOriginX`,
		 * `rotationOriginY`, `translateX`, `translateY`, `scaleX` and `scaleY`. SVG
		 * attributes containing a hyphen are _not_ camel-cased, they should be
		 * quoted to preserve the hyphen.
		 *
		 * @example
		 * {
		 *     'stroke': '#ff0000', // basic
		 *     'stroke-width': 2, // hyphenated
		 *     'rotation': 45 // custom
		 *     'd': ['M', 10, 10, 'L', 30, 30, 'z'] // path definition, note format
		 * }
		 *
		 * @interface Highcharts.SVGAttributes
		 *//**
		 * @name Highcharts.SVGAttributes#[key:string]
		 * @type {boolean|number|string|Array<number|string>|undefined}
		 *//**
		 * @name Highcharts.SVGAttributes#d
		 * @type {string|Highcharts.SVGPathArray|undefined}
		 *//**
		 * @name Highcharts.SVGAttributes#inverted
		 * @type {boolean|undefined}
		 *//**
		 * @name Highcharts.SVGAttributes#matrix
		 * @type {Array<number>|undefined}
		 *//**
		 * @name Highcharts.SVGAttributes#stroke
		 * @type {Highcharts.ColorString|undefined}
		 *//**
		 * @name Highcharts.SVGAttributes#rotation
		 * @type {string|undefined}
		 *//**
		 * @name Highcharts.SVGAttributes#rotationOriginX
		 * @type {number|undefined}
		 *//**
		 * @name Highcharts.SVGAttributes#rotationOriginY
		 * @type {number|undefined}
		 *//**
		 * @name Highcharts.SVGAttributes#scaleX
		 * @type {number|undefined}
		 *//**
		 * @name Highcharts.SVGAttributes#scaleY
		 * @type {number|undefined}
		 *//**
		 * @name Highcharts.SVGAttributes#translateX
		 * @type {number|undefined}
		 *//**
		 * @name Highcharts.SVGAttributes#translateY
		 * @type {number|undefined}
		 *//**
		 * @name Highcharts.SVGAttributes#zIndex
		 * @type {number|undefined}
		 */

		/**
		 * An SVG DOM element. The type is a reference to the regular SVGElement in the
		 * global scope.
		 *
		 * @typedef {globals.GlobalSVGElement} Highcharts.SVGDOMElement
		 *
		 * @see https://developer.mozilla.org/en-US/docs/Web/API/SVGElement
		 */

		/**
		 * Array of path commands, that will go into the `d` attribute of an SVG
		 * element.
		 *
		 * @typedef {Array<number|Highcharts.SVGPathCommand>} Highcharts.SVGPathArray
		 */

		/**
		 * Possible path commands in a SVG path array.
		 *
		 * @typedef {string} Highcharts.SVGPathCommand
		 * @validvalue ["a","c","h","l","m","q","s","t","v","z","A","C","H","L","M","Q","S","T","V","Z"]
		 */



		/**
		 * The Highcharts object is the placeholder for all other members, and various
		 * utility functions. The most important member of the namespace would be the
		 * chart constructor.
		 *
		 * @example
		 * var chart = Highcharts.chart('container', { ... });
		 *
		 * @namespace Highcharts
		 */

		H.timers = [];

		var charts = H.charts,
		    doc = H.doc,
		    win = H.win;

		/**
		 * Provide error messages for debugging, with links to online explanation. This
		 * function can be overridden to provide custom error handling.
		 *
		 * @sample highcharts/chart/highcharts-error/
		 *         Custom error handler
		 *
		 * @function Highcharts.error
		 *
		 * @param {number|string} code
		 *        The error code. See
		 *        [errors.xml](https://github.com/highcharts/highcharts/blob/master/errors/errors.xml)
		 *        for available codes. If it is a string, the error message is printed
		 *        directly in the console.
		 *
		 * @param {boolean} [stop=false]
		 *        Whether to throw an error or just log a warning in the console.
		 */
		H.error = function (code, stop, chart) {
		    var msg = H.isNumber(code) ?
		        'Highcharts error #' + code + ': www.highcharts.com/errors/' + code :
		        code;
		    if (chart) {
		        H.fireEvent(chart, 'displayError', { code: code });
		    }
		    if (stop) {
		        throw new Error(msg);
		    }
		    // else ...
		    if (win.console) {
		        console.log(msg); // eslint-disable-line no-console
		    }
		};

		/**
		 * An animator object used internally. One instance applies to one property
		 * (attribute or style prop) on one element. Animation is always initiated
		 * through {@link SVGElement#animate}.
		 *
		 * @example
		 * var rect = renderer.rect(0, 0, 10, 10).add();
		 * rect.animate({ width: 100 });
		 *
		 * @private
		 * @class Highcharts.Fx
		 *
		 * @param {Highcharts.HTMLDOMElement|Highcharts.SVGElement} elem
		 *        The element to animate.
		 *
		 * @param {Highcharts.AnimationOptionsObject} options
		 *        Animation options.
		 *
		 * @param {string} prop
		 *        The single attribute or CSS property to animate.
		 */
		H.Fx = function (elem, options, prop) {
		    this.options = options;
		    this.elem = elem;
		    this.prop = prop;
		};
		H.Fx.prototype = {

		    /**
		     * Set the current step of a path definition on SVGElement.
		     *
		     * @function Highcharts.Fx#dSetter
		     */
		    dSetter: function () {
		        var start = this.paths[0],
		            end = this.paths[1],
		            ret = [],
		            now = this.now,
		            i = start.length,
		            startVal;

		        // Land on the final path without adjustment points appended in the ends
		        if (now === 1) {
		            ret = this.toD;

		        } else if (i === end.length && now < 1) {
		            while (i--) {
		                startVal = parseFloat(start[i]);
		                ret[i] =
		                    isNaN(startVal) ? // a letter instruction like M or L
		                            end[i] :
		                            now * (parseFloat(end[i] - startVal)) + startVal;

		            }
		        // If animation is finished or length not matching, land on right value
		        } else {
		            ret = end;
		        }
		        this.elem.attr('d', ret, null, true);
		    },

		    /**
		     * Update the element with the current animation step.
		     *
		     * @function Highcharts.Fx#update
		     */
		    update: function () {
		        var elem = this.elem,
		            prop = this.prop, // if destroyed, it is null
		            now = this.now,
		            step = this.options.step;

		        // Animation setter defined from outside
		        if (this[prop + 'Setter']) {
		            this[prop + 'Setter']();

		        // Other animations on SVGElement
		        } else if (elem.attr) {
		            if (elem.element) {
		                elem.attr(prop, now, null, true);
		            }

		        // HTML styles, raw HTML content like container size
		        } else {
		            elem.style[prop] = now + this.unit;
		        }

		        if (step) {
		            step.call(elem, now, this);
		        }

		    },

		    /**
		     * Run an animation.
		     *
		     * @function Highcharts.Fx#run
		     *
		     * @param {number} from
		     *        The current value, value to start from.
		     *
		     * @param {number} to
		     *        The end value, value to land on.
		     *
		     * @param {string} [unit]
		     *        The property unit, for example `px`.
		     */
		    run: function (from, to, unit) {
		        var self = this,
		            options = self.options,
		            timer = function (gotoEnd) {
		                return timer.stopped ? false : self.step(gotoEnd);
		            },
		            requestAnimationFrame =
		                win.requestAnimationFrame ||
		                function (step) {
		                    setTimeout(step, 13);
		                },
		            step = function () {
		                for (var i = 0; i < H.timers.length; i++) {
		                    if (!H.timers[i]()) {
		                        H.timers.splice(i--, 1);
		                    }
		                }

		                if (H.timers.length) {
		                    requestAnimationFrame(step);
		                }
		            };

		        if (from === to && !this.elem['forceAnimate:' + this.prop]) {
		            delete options.curAnim[this.prop];
		            if (options.complete && Object.keys(options.curAnim).length === 0) {
		                options.complete.call(this.elem);
		            }
		        } else { // #7166
		            this.startTime = +new Date();
		            this.start = from;
		            this.end = to;
		            this.unit = unit;
		            this.now = this.start;
		            this.pos = 0;

		            timer.elem = this.elem;
		            timer.prop = this.prop;

		            if (timer() && H.timers.push(timer) === 1) {
		                requestAnimationFrame(step);
		            }
		        }
		    },

		    /**
		     * Run a single step in the animation.
		     *
		     * @function Highcharts.Fx#step
		     *
		     * @param {boolean} [gotoEnd]
		     *        Whether to go to the endpoint of the animation after abort.
		     *
		     * @return {boolean}
		     *         Returns `true` if animation continues.
		     */
		    step: function (gotoEnd) {
		        var t = +new Date(),
		            ret,
		            done,
		            options = this.options,
		            elem = this.elem,
		            complete = options.complete,
		            duration = options.duration,
		            curAnim = options.curAnim;

		        if (elem.attr && !elem.element) { // #2616, element is destroyed
		            ret = false;

		        } else if (gotoEnd || t >= duration + this.startTime) {
		            this.now = this.end;
		            this.pos = 1;
		            this.update();

		            curAnim[this.prop] = true;

		            done = true;

		            H.objectEach(curAnim, function (val) {
		                if (val !== true) {
		                    done = false;
		                }
		            });

		            if (done && complete) {
		                complete.call(elem);
		            }
		            ret = false;

		        } else {
		            this.pos = options.easing((t - this.startTime) / duration);
		            this.now = this.start + ((this.end - this.start) * this.pos);
		            this.update();
		            ret = true;
		        }
		        return ret;
		    },

		    /**
		     * Prepare start and end values so that the path can be animated one to one.
		     *
		     * @function Highcharts.Fx#initPath
		     *
		     * @param {Highcharts.SVGElement} elem
		     *        The SVGElement item.
		     *
		     * @param {string} fromD
		     *        Starting path definition.
		     *
		     * @param {Highcharts.SVGPathArray} toD
		     *        Ending path definition.
		     *
		     * @return {Array<Highcharts.SVGPathArray>}
		     *         An array containing start and end paths in array form so that
		     *         they can be animated in parallel.
		     */
		    initPath: function (elem, fromD, toD) {
		        fromD = fromD || '';
		        var shift,
		            startX = elem.startX,
		            endX = elem.endX,
		            bezier = fromD.indexOf('C') > -1,
		            numParams = bezier ? 7 : 3,
		            fullLength,
		            slice,
		            i,
		            start = fromD.split(' '),
		            end = toD.slice(), // copy
		            isArea = elem.isArea,
		            positionFactor = isArea ? 2 : 1,
		            reverse;

		        /**
		         * In splines make moveTo and lineTo points have six parameters like
		         * bezier curves, to allow animation one-to-one.
		         */
		        function sixify(arr) {
		            var isOperator,
		                nextIsOperator;
		            i = arr.length;
		            while (i--) {

		                // Fill in dummy coordinates only if the next operator comes
		                // three places behind (#5788)
		                isOperator = arr[i] === 'M' || arr[i] === 'L';
		                nextIsOperator = /[a-zA-Z]/.test(arr[i + 3]);
		                if (isOperator && nextIsOperator) {
		                    arr.splice(
		                        i + 1, 0,
		                        arr[i + 1], arr[i + 2],
		                        arr[i + 1], arr[i + 2]
		                    );
		                }
		            }
		        }

		        /**
		         * Insert an array at the given position of another array
		         */
		        function insertSlice(arr, subArr, index) {
		            [].splice.apply(
		                arr,
		                [index, 0].concat(subArr)
		            );
		        }

		        /**
		         * If shifting points, prepend a dummy point to the end path.
		         */
		        function prepend(arr, other) {
		            while (arr.length < fullLength) {

		                // Move to, line to or curve to?
		                arr[0] = other[fullLength - arr.length];

		                // Prepend a copy of the first point
		                insertSlice(arr, arr.slice(0, numParams), 0);

		                // For areas, the bottom path goes back again to the left, so we
		                // need to append a copy of the last point.
		                if (isArea) {
		                    insertSlice(
		                        arr,
		                        arr.slice(arr.length - numParams), arr.length
		                    );
		                    i--;
		                }
		            }
		            arr[0] = 'M';
		        }

		        /**
		         * Copy and append last point until the length matches the end length.
		         */
		        function append(arr, other) {
		            var i = (fullLength - arr.length) / numParams;
		            while (i > 0 && i--) {

		                // Pull out the slice that is going to be appended or inserted.
		                // In a line graph, the positionFactor is 1, and the last point
		                // is sliced out. In an area graph, the positionFactor is 2,
		                // causing the middle two points to be sliced out, since an area
		                // path starts at left, follows the upper path then turns and
		                // follows the bottom back.
		                slice = arr.slice().splice(
		                    (arr.length / positionFactor) - numParams,
		                    numParams * positionFactor
		                );

		                // Move to, line to or curve to?
		                slice[0] = other[fullLength - numParams - (i * numParams)];

		                // Disable first control point
		                if (bezier) {
		                    slice[numParams - 6] = slice[numParams - 2];
		                    slice[numParams - 5] = slice[numParams - 1];
		                }

		                // Now insert the slice, either in the middle (for areas) or at
		                // the end (for lines)
		                insertSlice(arr, slice, arr.length / positionFactor);

		                if (isArea) {
		                    i--;
		                }
		            }
		        }

		        if (bezier) {
		            sixify(start);
		            sixify(end);
		        }

		        // For sideways animation, find out how much we need to shift to get the
		        // start path Xs to match the end path Xs.
		        if (startX && endX) {
		            for (i = 0; i < startX.length; i++) {
		                // Moving left, new points coming in on right
		                if (startX[i] === endX[0]) {
		                    shift = i;
		                    break;
		                // Moving right
		                } else if (startX[0] ===
		                        endX[endX.length - startX.length + i]) {
		                    shift = i;
		                    reverse = true;
		                    break;
		                }
		            }
		            if (shift === undefined) {
		                start = [];
		            }
		        }

		        if (start.length && H.isNumber(shift)) {

		            // The common target length for the start and end array, where both
		            // arrays are padded in opposite ends
		            fullLength = end.length + shift * positionFactor * numParams;

		            if (!reverse) {
		                prepend(end, start);
		                append(start, end);
		            } else {
		                prepend(start, end);
		                append(end, start);
		            }
		        }

		        return [start, end];
		    },

		    /**
		     * Handle animation of the color attributes directly.
		     *
		     * @function Highcharts.Fx#fillSetter
		     */
		    fillSetter: function () {
		        H.Fx.prototype.strokeSetter.apply(this, arguments);
		    },

		    /**
		     * Handle animation of the color attributes directly.
		     *
		     * @function Highcharts.Fx#strokeSetter
		     */
		    strokeSetter: function () {
		        this.elem.attr(
		            this.prop,
		            H.color(this.start).tweenTo(H.color(this.end), this.pos),
		            null,
		            true
		        );
		    }

		}; // End of Fx prototype



		/**
		 * Utility function to deep merge two or more objects and return a third object.
		 * The merge function can also be used with a single object argument to create a
		 * deep copy of an object.
		 *
		 * @function Highcharts.merge
		 *
		 * @param {*} a
		 *        The first object to extend. When only this is given, the function
		 *        returns a deep copy.
		 *
		 * @param {*} [n]
		 *        An object to merge into the previous one.
		 *
		 * @return {*}
		 *         The merged object. If the first argument is true, the return is the
		 *         same as the second argument.
		 *//**
		 * Utility function to deep merge two or more objects and return a third object.
		 * If the first argument is true, the contents of the second object is copied
		 * into the first object. The merge function can also be used with a single
		 * object argument to create a deep copy of an object.
		 *
		 * @function Highcharts.merge
		 *
		 * @param {boolean} extend
		 *        Whether to extend the left-side object (a) or return a whole new
		 *        object.
		 *
		 * @param {*} a
		 *        The first object to extend. When only this is given, the function
		 *        returns a deep copy.
		 *
		 * @param {*} [n]
		 *        An object to merge into the previous one.
		 *
		 * @return {*}
		 *         The merged object. If the first argument is true, the return is the
		 *         same as the second argument.
		 */
		H.merge = function () {
		    var i,
		        args = arguments,
		        len,
		        ret = {},
		        doCopy = function (copy, original) {
		            // An object is replacing a primitive
		            if (typeof copy !== 'object') {
		                copy = {};
		            }

		            H.objectEach(original, function (value, key) {

		                // Copy the contents of objects, but not arrays or DOM nodes
		                if (
		                        H.isObject(value, true) &&
		                        !H.isClass(value) &&
		                        !H.isDOMElement(value)
		                ) {
		                    copy[key] = doCopy(copy[key] || {}, value);

		                // Primitives and arrays are copied over directly
		                } else {
		                    copy[key] = original[key];
		                }
		            });
		            return copy;
		        };

		    // If first argument is true, copy into the existing object. Used in
		    // setOptions.
		    if (args[0] === true) {
		        ret = args[1];
		        args = Array.prototype.slice.call(args, 2);
		    }

		    // For each argument, extend the return
		    len = args.length;
		    for (i = 0; i < len; i++) {
		        ret = doCopy(ret, args[i]);
		    }

		    return ret;
		};

		/**
		 * Shortcut for parseInt
		 *
		 * @private
		 * @function Highcharts.pInt
		 *
		 * @param {*} s
		 *
		 * @param {number} mag
		 *        Magnitude
		 *
		 * @return {number}
		 */
		H.pInt = function (s, mag) {
		    return parseInt(s, mag || 10);
		};

		/**
		 * Utility function to check for string type.
		 *
		 * @function Highcharts.isString
		 *
		 * @param {*} s
		 *        The item to check.
		 *
		 * @return {boolean}
		 *         True if the argument is a string.
		 */
		H.isString = function (s) {
		    return typeof s === 'string';
		};

		/**
		 * Utility function to check if an item is an array.
		 *
		 * @function Highcharts.isArray
		 *
		 * @param {*} obj
		 *        The item to check.
		 *
		 * @return {boolean}
		 *         True if the argument is an array.
		 */
		H.isArray = function (obj) {
		    var str = Object.prototype.toString.call(obj);
		    return str === '[object Array]' || str === '[object Array Iterator]';
		};

		/**
		 * Utility function to check if an item is of type object.
		 *
		 * @function Highcharts.isObject
		 *
		 * @param {*} obj
		 *        The item to check.
		 *
		 * @param {boolean} [strict=false]
		 *        Also checks that the object is not an array.
		 *
		 * @return {boolean}
		 *         True if the argument is an object.
		 */
		H.isObject = function (obj, strict) {
		    return !!obj && typeof obj === 'object' && (!strict || !H.isArray(obj));
		};

		/**
		 * Utility function to check if an Object is a HTML Element.
		 *
		 * @function Highcharts.isDOMElement
		 *
		 * @param {*} obj
		 *        The item to check.
		 *
		 * @return {boolean}
		 *         True if the argument is a HTML Element.
		 */
		H.isDOMElement = function (obj) {
		    return H.isObject(obj) && typeof obj.nodeType === 'number';
		};

		/**
		 * Utility function to check if an Object is an class.
		 *
		 * @function Highcharts.isClass
		 *
		 * @param {*} obj
		 *        The item to check.
		 *
		 * @return {boolean}
		 *         True if the argument is an class.
		 */
		H.isClass = function (obj) {
		    var c = obj && obj.constructor;
		    return !!(
		        H.isObject(obj, true) &&
		        !H.isDOMElement(obj) &&
		        (c && c.name && c.name !== 'Object')
		    );
		};

		/**
		 * Utility function to check if an item is a number and it is finite (not NaN,
		 * Infinity or -Infinity).
		 *
		 * @function Highcharts.isNumber
		 *
		 * @param {*} n
		 *        The item to check.
		 *
		 * @return {boolean}
		 *         True if the item is a finite number
		 */
		H.isNumber = function (n) {
		    return typeof n === 'number' && !isNaN(n) && n < Infinity && n > -Infinity;
		};

		/**
		 * Remove the last occurence of an item from an array.
		 *
		 * @function Highcharts.erase
		 *
		 * @param {Array} arr
		 *        The array.
		 *
		 * @param {*} item
		 *        The item to remove.
		 */
		H.erase = function (arr, item) {
		    var i = arr.length;
		    while (i--) {
		        if (arr[i] === item) {
		            arr.splice(i, 1);
		            break;
		        }
		    }
		};

		/**
		 * Check if an object is null or undefined.
		 *
		 * @function Highcharts.defined
		 *
		 * @param {*} obj
		 *        The object to check.
		 *
		 * @return {boolean}
		 *         False if the object is null or undefined, otherwise true.
		 */
		H.defined = function (obj) {
		    return obj !== undefined && obj !== null;
		};

		/**
		 * Set or get an attribute or an object of attributes. To use as a setter, pass
		 * a key and a value, or let the second argument be a collection of keys and
		 * values. To use as a getter, pass only a string as the second argument.
		 *
		 * @function Highcharts.attr
		 *
		 * @param {Highcharts.HTMLDOMElement|Highcharts.SVGDOMElement} elem
		 *        The DOM element to receive the attribute(s).
		 *
		 * @param {string|Highcharts.HTMLAttributes|Highcharts.SVGAttributes} [prop]
		 *        The property or an object of key-value pairs.
		 *
		 * @param {string} [value]
		 *        The value if a single property is set.
		 *
		 * @return {*}
		 *         When used as a getter, return the value.
		 */
		H.attr = function (elem, prop, value) {
		    var ret;

		    // if the prop is a string
		    if (H.isString(prop)) {
		        // set the value
		        if (H.defined(value)) {
		            elem.setAttribute(prop, value);

		        // get the value
		        } else if (elem && elem.getAttribute) {
		            ret = elem.getAttribute(prop);

		            // IE7 and below cannot get class through getAttribute (#7850)
		            if (!ret && prop === 'class') {
		                ret = elem.getAttribute(prop + 'Name');
		            }
		        }

		    // else if prop is defined, it is a hash of key/value pairs
		    } else if (H.defined(prop) && H.isObject(prop)) {
		        H.objectEach(prop, function (val, key) {
		            elem.setAttribute(key, val);
		        });
		    }
		    return ret;
		};

		/**
		 * Check if an element is an array, and if not, make it into an array.
		 *
		 * @function Highcharts.splat
		 *
		 * @param {*} obj
		 *        The object to splat.
		 *
		 * @return {Array}
		 *         The produced or original array.
		 */
		H.splat = function (obj) {
		    return H.isArray(obj) ? obj : [obj];
		};

		/**
		 * Set a timeout if the delay is given, otherwise perform the function
		 * synchronously.
		 *
		 * @function Highcharts.syncTimeout
		 *
		 * @param {Function} fn
		 *        The function callback.
		 *
		 * @param {number} delay
		 *        Delay in milliseconds.
		 *
		 * @param {*} [context]
		 *        The context.
		 *
		 * @return {number}
		 *         An identifier for the timeout that can later be cleared with
		 *         Highcharts.clearTimeout.
		 */
		H.syncTimeout = function (fn, delay, context) {
		    if (delay) {
		        return setTimeout(fn, delay, context);
		    }
		    fn.call(0, context);
		};

		/**
		 * Internal clear timeout. The function checks that the `id` was not removed
		 * (e.g. by `chart.destroy()`). For the details see
		 * [issue #7901](https://github.com/highcharts/highcharts/issues/7901).
		 *
		 * @function Highcharts.clearTimeout
		 *
		 * @param {number} id
		 *        Id of a timeout.
		 */
		H.clearTimeout = function (id) {
		    if (H.defined(id)) {
		        clearTimeout(id);
		    }
		};

		/**
		 * Utility function to extend an object with the members of another.
		 *
		 * @function Highcharts.extend
		 *
		 * @param {Highcharts.Dictionary<*>} a
		 *        The object to be extended.
		 *
		 * @param {Highcharts.Dictionary<*>} b
		 *        The object to add to the first one.
		 *
		 * @return {Highcharts.Dictionary<*>}
		 *         Object a, the original object.
		 */
		H.extend = function (a, b) {
		    var n;
		    if (!a) {
		        a = {};
		    }
		    for (n in b) {
		        a[n] = b[n];
		    }
		    return a;
		};


		/**
		 * Return the first value that is not null or undefined.
		 *
		 * @function Highcharts.pick
		 *
		 * @param {...*} items
		 *        Variable number of arguments to inspect.
		 *
		 * @return {*}
		 *         The value of the first argument that is not null or undefined.
		 */
		H.pick = function () {
		    var args = arguments,
		        i,
		        arg,
		        length = args.length;
		    for (i = 0; i < length; i++) {
		        arg = args[i];
		        if (arg !== undefined && arg !== null) {
		            return arg;
		        }
		    }
		};

		/**
		 * Set CSS on a given element.
		 *
		 * @function Highcharts.css
		 *
		 * @param {Highcharts.HTMLDOMElement} el
		 *        An HTML DOM element.
		 *
		 * @param {Highcharts.CSSObject} styles
		 *        Style object with camel case property names.
		 */
		H.css = function (el, styles) {
		    if (H.isMS && !H.svg) { // #2686
		        if (styles && styles.opacity !== undefined) {
		            styles.filter = 'alpha(opacity=' + (styles.opacity * 100) + ')';
		        }
		    }
		    H.extend(el.style, styles);
		};

		/**
		 * Utility function to create an HTML element with attributes and styles.
		 *
		 * @function Highcharts.createElement
		 *
		 * @param {string} tag
		 *        The HTML tag.
		 *
		 * @param {Highcharts.HTMLAttributes} [attribs]
		 *        Attributes as an object of key-value pairs.
		 *
		 * @param {Highcharts.CSSObject} [styles]
		 *        Styles as an object of key-value pairs.
		 *
		 * @param {Highcharts.HTMLDOMElement} [parent]
		 *        The parent HTML object.
		 *
		 * @param {boolean} [nopad=false]
		 *        If true, remove all padding, border and margin.
		 *
		 * @return {Highcharts.HTMLDOMElement}
		 *         The created DOM element.
		 */
		H.createElement = function (tag, attribs, styles, parent, nopad) {
		    var el = doc.createElement(tag),
		        css = H.css;
		    if (attribs) {
		        H.extend(el, attribs);
		    }
		    if (nopad) {
		        css(el, { padding: 0, border: 'none', margin: 0 });
		    }
		    if (styles) {
		        css(el, styles);
		    }
		    if (parent) {
		        parent.appendChild(el);
		    }
		    return el;
		};

		/**
		 * Extend a prototyped class by new members.
		 *
		 * @function Highcharts.extendClass
		 *
		 * @param {*} parent
		 *        The parent prototype to inherit.
		 *
		 * @param {Highcharts.Dictionary<*>} members
		 *        A collection of prototype members to add or override compared to the
		 *        parent prototype.
		 *
		 * @return {*}
		 *         A new prototype.
		 */
		H.extendClass = function (parent, members) {
		    var object = function () {};
		    object.prototype = new parent(); // eslint-disable-line new-cap
		    H.extend(object.prototype, members);
		    return object;
		};

		/**
		 * Left-pad a string to a given length by adding a character repetetively.
		 *
		 * @function Highcharts.pad
		 *
		 * @param {number} number
		 *        The input string or number.
		 *
		 * @param {number} length
		 *        The desired string length.
		 *
		 * @param {string} [padder=0]
		 *        The character to pad with.
		 *
		 * @return {string}
		 *         The padded string.
		 */
		H.pad = function (number, length, padder) {
		    return new Array(
		            (length || 2) +
		            1 -
		            String(number)
		                .replace('-', '')
		                .length
		        ).join(padder || 0) + number;
		};

		/**
		 * Return a length based on either the integer value, or a percentage of a base.
		 *
		 * @function Highcharts.relativeLength
		 *
		 * @param {Highcharts.RelativeSize} value
		 *        A percentage string or a number.
		 *
		 * @param {number} base
		 *        The full length that represents 100%.
		 *
		 * @param {number} [offset=0]
		 *        A pixel offset to apply for percentage values. Used internally in
		 *        axis positioning.
		 *
		 * @return {number}
		 *         The computed length.
		 */
		H.relativeLength = function (value, base, offset) {
		    return (/%$/).test(value) ?
		        (base * parseFloat(value) / 100) + (offset || 0) :
		        parseFloat(value);
		};

		/**
		 * Wrap a method with extended functionality, preserving the original function.
		 *
		 * @function Highcharts.wrap
		 *
		 * @param {*} obj
		 *        The context object that the method belongs to. In real cases, this is
		 *        often a prototype.
		 *
		 * @param {string} method
		 *        The name of the method to extend.
		 *
		 * @param {Function} func
		 *        A wrapper function callback. This function is called with the same
		 *        arguments as the original function, except that the original function
		 *        is unshifted and passed as the first argument.
		 */
		H.wrap = function (obj, method, func) {
		    var proceed = obj[method];
		    obj[method] = function () {
		        var args = Array.prototype.slice.call(arguments),
		            outerArgs = arguments,
		            ctx = this,
		            ret;
		        ctx.proceed = function () {
		            proceed.apply(ctx, arguments.length ? arguments : outerArgs);
		        };
		        args.unshift(proceed);
		        ret = func.apply(this, args);
		        ctx.proceed = null;
		        return ret;
		    };
		};



		/**
		 * Recursively converts all Date properties to timestamps.
		 *
		 * @param  {Object} object - any object to convert properties of
		 */
		H.datePropsToTimestamps = function (object) {
		    H.objectEach(object, function (val, key) {
		        if (H.isObject(val) && typeof val.getTime === 'function') {
		            object[key] = val.getTime();
		        } else if (H.isObject(val) || H.isArray(val)) {
		            H.datePropsToTimestamps(val);
		        }
		    });
		};

		/**
		 * Format a single variable. Similar to sprintf, without the % prefix.
		 *
		 * @example
		 * formatSingle('.2f', 5); // => '5.00'.
		 *
		 * @function Highcharts.formatSingle
		 *
		 * @param {string} format
		 *        The format string.
		 *
		 * @param {*} val
		 *        The value.
		 *
		 * @param {Highcharts.Time} [time]
		 *        A `Time` instance that determines the date formatting, for example
		 *        for applying time zone corrections to the formatted date.
		 *
		 * @return {string}
		 *         The formatted representation of the value.
		 */
		H.formatSingle = function (format, val, time) {
		    var floatRegex = /f$/,
		        decRegex = /\.([0-9])/,
		        lang = H.defaultOptions.lang,
		        decimals;

		    if (floatRegex.test(format)) { // float
		        decimals = format.match(decRegex);
		        decimals = decimals ? decimals[1] : -1;
		        if (val !== null) {
		            val = H.numberFormat(
		                val,
		                decimals,
		                lang.decimalPoint,
		                format.indexOf(',') > -1 ? lang.thousandsSep : ''
		            );
		        }
		    } else {
		        val = (time || H.time).dateFormat(format, val);
		    }
		    return val;
		};

		/**
		 * Format a string according to a subset of the rules of Python's String.format
		 * method.
		 *
		 * @example
		 * var s = Highcharts.format(
		 *     'The {color} fox was {len:.2f} feet long',
		 *     { color: 'red', len: Math.PI }
		 * );
		 * // => The red fox was 3.14 feet long
		 *
		 * @function Highcharts.format
		 *
		 * @param {string} str
		 *        The string to format.
		 *
		 * @param {*} ctx
		 *        The context, a collection of key-value pairs where each key is
		 *        replaced by its value.
		 *
		 * @param {Highcharts.Time} [time]
		 *        A `Time` instance that determines the date formatting, for example
		 *        for applying time zone corrections to the formatted date.
		 *
		 * @return {string}
		 *         The formatted string.
		 */
		H.format = function (str, ctx, time) {
		    var splitter = '{',
		        isInside = false,
		        segment,
		        valueAndFormat,
		        path,
		        i,
		        len,
		        ret = [],
		        val,
		        index;

		    while (str) {
		        index = str.indexOf(splitter);
		        if (index === -1) {
		            break;
		        }

		        segment = str.slice(0, index);
		        if (isInside) { // we're on the closing bracket looking back

		            valueAndFormat = segment.split(':');
		            path = valueAndFormat.shift().split('.'); // get first and leave
		            len = path.length;
		            val = ctx;

		            // Assign deeper paths
		            for (i = 0; i < len; i++) {
		                if (val) {
		                    val = val[path[i]];
		                }
		            }

		            // Format the replacement
		            if (valueAndFormat.length) {
		                val = H.formatSingle(valueAndFormat.join(':'), val, time);
		            }

		            // Push the result and advance the cursor
		            ret.push(val);

		        } else {
		            ret.push(segment);

		        }
		        str = str.slice(index + 1); // the rest
		        isInside = !isInside; // toggle
		        splitter = isInside ? '}' : '{'; // now look for next matching bracket
		    }
		    ret.push(str);
		    return ret.join('');
		};

		/**
		 * Get the magnitude of a number.
		 *
		 * @function Highcharts.getMagnitude
		 *
		 * @param {number} number
		 *        The number.
		 *
		 * @return {number}
		 *         The magnitude, where 1-9 are magnitude 1, 10-99 magnitude 2 etc.
		 */
		H.getMagnitude = function (num) {
		    return Math.pow(10, Math.floor(Math.log(num) / Math.LN10));
		};

		/**
		 * Take an interval and normalize it to multiples of round numbers.
		 *
		 * @deprecated
		 * @function Highcharts.normalizeTickInterval
		 *
		 * @param {number} interval
		 *        The raw, un-rounded interval.
		 *
		 * @param {Array} [multiples]
		 *        Allowed multiples.
		 *
		 * @param {number} [magnitude]
		 *        The magnitude of the number.
		 *
		 * @param {boolean} [allowDecimals]
		 *        Whether to allow decimals.
		 *
		 * @param {boolean} [hasTickAmount]
		 *        If it has tickAmount, avoid landing on tick intervals lower than
		 *        original.
		 *
		 * @return {number}
		 *         The normalized interval.
		 *
		 * @todo
		 * Move this function to the Axis prototype. It is here only for historical
		 * reasons.
		 */
		H.normalizeTickInterval = function (
		    interval,
		    multiples,
		    magnitude,
		    allowDecimals,
		    hasTickAmount
		) {
		    var normalized,
		        i,
		        retInterval = interval;

		    // round to a tenfold of 1, 2, 2.5 or 5
		    magnitude = H.pick(magnitude, 1);
		    normalized = interval / magnitude;

		    // multiples for a linear scale
		    if (!multiples) {
		        multiples = hasTickAmount ?
		            // Finer grained ticks when the tick amount is hard set, including
		            // when alignTicks is true on multiple axes (#4580).
		            [1, 1.2, 1.5, 2, 2.5, 3, 4, 5, 6, 8, 10] :

		            // Else, let ticks fall on rounder numbers
		            [1, 2, 2.5, 5, 10];


		        // the allowDecimals option
		        if (allowDecimals === false) {
		            if (magnitude === 1) {
		                multiples = multiples.filter(function (num) {
		                    return num % 1 === 0;
		                });
		            } else if (magnitude <= 0.1) {
		                multiples = [1 / magnitude];
		            }
		        }
		    }

		    // normalize the interval to the nearest multiple
		    for (i = 0; i < multiples.length; i++) {
		        retInterval = multiples[i];
		        // only allow tick amounts smaller than natural
		        if (
		            (
		                hasTickAmount &&
		                retInterval * magnitude >= interval
		            ) ||
		            (
		                !hasTickAmount &&
		                (
		                    normalized <=
		                    (
		                        multiples[i] +
		                        (multiples[i + 1] || multiples[i])
		                    ) / 2
		                )
		            )
		        ) {
		            break;
		        }
		    }

		    // Multiply back to the correct magnitude. Correct floats to appropriate
		    // precision (#6085).
		    retInterval = H.correctFloat(
		        retInterval * magnitude,
		        -Math.round(Math.log(0.001) / Math.LN10)
		    );

		    return retInterval;
		};


		/**
		 * Sort an object array and keep the order of equal items. The ECMAScript
		 * standard does not specify the behaviour when items are equal.
		 *
		 * @function Highcharts.stableSort
		 *
		 * @param {Array} arr
		 *        The array to sort.
		 *
		 * @param {Function} sortFunction
		 *        The function to sort it with, like with regular Array.prototype.sort.
		 */
		H.stableSort = function (arr, sortFunction) {
		    var length = arr.length,
		        sortValue,
		        i;

		    // Add index to each item
		    for (i = 0; i < length; i++) {
		        arr[i].safeI = i; // stable sort index
		    }

		    arr.sort(function (a, b) {
		        sortValue = sortFunction(a, b);
		        return sortValue === 0 ? a.safeI - b.safeI : sortValue;
		    });

		    // Remove index from items
		    for (i = 0; i < length; i++) {
		        delete arr[i].safeI; // stable sort index
		    }
		};

		/**
		 * Non-recursive method to find the lowest member of an array. `Math.min` raises
		 * a maximum call stack size exceeded error in Chrome when trying to apply more
		 * than 150.000 points. This method is slightly slower, but safe.
		 *
		 * @function Highcharts.arrayMin
		 *
		 * @param {Array} data
		 *        An array of numbers.
		 *
		 * @return {number}
		 *         The lowest number.
		 */
		H.arrayMin = function (data) {
		    var i = data.length,
		        min = data[0];

		    while (i--) {
		        if (data[i] < min) {
		            min = data[i];
		        }
		    }
		    return min;
		};

		/**
		 * Non-recursive method to find the lowest member of an array. `Math.max` raises
		 * a maximum call stack size exceeded error in Chrome when trying to apply more
		 * than 150.000 points. This method is slightly slower, but safe.
		 *
		 * @function Highcharts.arrayMax
		 *
		 * @param {Array} data
		 *        An array of numbers.
		 *
		 * @return {number}
		 *         The highest number.
		 */
		H.arrayMax = function (data) {
		    var i = data.length,
		        max = data[0];

		    while (i--) {
		        if (data[i] > max) {
		            max = data[i];
		        }
		    }
		    return max;
		};

		/**
		 * Utility method that destroys any SVGElement instances that are properties on
		 * the given object. It loops all properties and invokes destroy if there is a
		 * destroy method. The property is then delete.
		 *
		 * @function Highcharts.destroyObjectProperties
		 *
		 * @param {*} obj
		 *        The object to destroy properties on.
		 *
		 * @param {*} [except]
		 *        Exception, do not destroy this property, only delete it.
		 */
		H.destroyObjectProperties = function (obj, except) {
		    H.objectEach(obj, function (val, n) {
		        // If the object is non-null and destroy is defined
		        if (val && val !== except && val.destroy) {
		            // Invoke the destroy
		            val.destroy();
		        }

		        // Delete the property from the object.
		        delete obj[n];
		    });
		};


		/**
		 * Discard a HTML element by moving it to the bin and delete.
		 *
		 * @function Highcharts.discardElement
		 *
		 * @param {Highcharts.HTMLDOMElement} element
		 *        The HTML node to discard.
		 */
		H.discardElement = function (element) {
		    var garbageBin = H.garbageBin;
		    // create a garbage bin element, not part of the DOM
		    if (!garbageBin) {
		        garbageBin = H.createElement('div');
		    }

		    // move the node and empty bin
		    if (element) {
		        garbageBin.appendChild(element);
		    }
		    garbageBin.innerHTML = '';
		};

		/**
		 * Fix JS round off float errors.
		 *
		 * @function Highcharts.correctFloat
		 *
		 * @param {number} num
		 *        A float number to fix.
		 *
		 * @param {number} [prec=14]
		 *        The precision.
		 *
		 * @return {number}
		 *         The corrected float number.
		 */
		H.correctFloat = function (num, prec) {
		    return parseFloat(
		        num.toPrecision(prec || 14)
		    );
		};

		/**
		 * Set the global animation to either a given value, or fall back to the given
		 * chart's animation option.
		 *
		 * @function Highcharts.setAnimation
		 *
		 * @param {boolean|Highcharts.AnimationOptionsObject} animation
		 *        The animation object.
		 *
		 * @param {Highcharts.Chart} chart
		 *        The chart instance.
		 *
		 * @todo
		 * This function always relates to a chart, and sets a property on the renderer,
		 * so it should be moved to the SVGRenderer.
		 */
		H.setAnimation = function (animation, chart) {
		    chart.renderer.globalAnimation = H.pick(
		        animation,
		        chart.options.chart.animation,
		        true
		    );
		};

		/**
		 * Get the animation in object form, where a disabled animation is always
		 * returned as `{ duration: 0 }`.
		 *
		 * @function Highcharts.animObject
		 *
		 * @param {boolean|Highcharts.AnimationOptionsObject} animation
		 *        An animation setting. Can be an object with duration, complete and
		 *        easing properties, or a boolean to enable or disable.
		 *
		 * @return {Highcharts.AnimationOptionsObject}
		 *         An object with at least a duration property.
		 */
		H.animObject = function (animation) {
		    return H.isObject(animation) ?
		        H.merge(animation) :
		        { duration: animation ? 500 : 0 };
		};

		/**
		 * The time unit lookup
		 *
		 * @ignore
		 */
		H.timeUnits = {
		    millisecond: 1,
		    second: 1000,
		    minute: 60000,
		    hour: 3600000,
		    day: 24 * 3600000,
		    week: 7 * 24 * 3600000,
		    month: 28 * 24 * 3600000,
		    year: 364 * 24 * 3600000
		};

		/**
		 * Format a number and return a string based on input settings.
		 *
		 * @sample highcharts/members/highcharts-numberformat/
		 *         Custom number format
		 *
		 * @function Highcharts.numberFormat
		 *
		 * @param {number} number
		 *        The input number to format.
		 *
		 * @param {number} decimals
		 *        The amount of decimals. A value of -1 preserves the amount in the
		 *        input number.
		 *
		 * @param {string} [decimalPoint]
		 *        The decimal point, defaults to the one given in the lang options, or
		 *        a dot.
		 *
		 * @param {string} [thousandsSep]
		 *        The thousands separator, defaults to the one given in the lang
		 *        options, or a space character.
		 *
		 * @return {string}
		 *         The formatted number.
		 */
		H.numberFormat = function (number, decimals, decimalPoint, thousandsSep) {
		    number = +number || 0;
		    decimals = +decimals;

		    var lang = H.defaultOptions.lang,
		        origDec = (number.toString().split('.')[1] || '').split('e')[0].length,
		        strinteger,
		        thousands,
		        ret,
		        roundedNumber,
		        exponent = number.toString().split('e'),
		        fractionDigits;

		    if (decimals === -1) {
		        // Preserve decimals. Not huge numbers (#3793).
		        decimals = Math.min(origDec, 20);
		    } else if (!H.isNumber(decimals)) {
		        decimals = 2;
		    } else if (decimals && exponent[1] && exponent[1] < 0) {
		        // Expose decimals from exponential notation (#7042)
		        fractionDigits = decimals + +exponent[1];
		        if (fractionDigits >= 0) {
		            // remove too small part of the number while keeping the notation
		            exponent[0] = (+exponent[0]).toExponential(fractionDigits)
		                .split('e')[0];
		            decimals = fractionDigits;
		        } else {
		            // fractionDigits < 0
		            exponent[0] = exponent[0].split('.')[0] || 0;

		            if (decimals < 20) {
		                // use number instead of exponential notation (#7405)
		                number = (exponent[0] * Math.pow(10, exponent[1]))
		                    .toFixed(decimals);
		            } else {
		                // or zero
		                number = 0;
		            }
		            exponent[1] = 0;
		        }
		    }

		    // Add another decimal to avoid rounding errors of float numbers. (#4573)
		    // Then use toFixed to handle rounding.
		    roundedNumber = (
		        Math.abs(exponent[1] ? exponent[0] : number) +
		        Math.pow(10, -Math.max(decimals, origDec) - 1)
		    ).toFixed(decimals);

		    // A string containing the positive integer component of the number
		    strinteger = String(H.pInt(roundedNumber));

		    // Leftover after grouping into thousands. Can be 0, 1 or 2.
		    thousands = strinteger.length > 3 ? strinteger.length % 3 : 0;

		    // Language
		    decimalPoint = H.pick(decimalPoint, lang.decimalPoint);
		    thousandsSep = H.pick(thousandsSep, lang.thousandsSep);

		    // Start building the return
		    ret = number < 0 ? '-' : '';

		    // Add the leftover after grouping into thousands. For example, in the
		    // number 42 000 000, this line adds 42.
		    ret += thousands ? strinteger.substr(0, thousands) + thousandsSep : '';

		    // Add the remaining thousands groups, joined by the thousands separator
		    ret += strinteger
		        .substr(thousands)
		        .replace(/(\d{3})(?=\d)/g, '$1' + thousandsSep);

		    // Add the decimal point and the decimal component
		    if (decimals) {
		        // Get the decimal component
		        ret += decimalPoint + roundedNumber.slice(-decimals);
		    }

		    if (exponent[1] && +ret !== 0) {
		        ret += 'e' + exponent[1];
		    }

		    return ret;
		};

		/**
		 * Easing definition
		 *
		 * @private
		 * @function Math.easeInOutSine
		 *
		 * @param {number} pos
		 *        Current position, ranging from 0 to 1.
		 *
		 * @return {number}
		 */
		Math.easeInOutSine = function (pos) {
		    return -0.5 * (Math.cos(Math.PI * pos) - 1);
		};

		/**
		 * Get the computed CSS value for given element and property, only for numerical
		 * properties. For width and height, the dimension of the inner box (excluding
		 * padding) is returned. Used for fitting the chart within the container.
		 *
		 * @function Highcharts.getStyle
		 *
		 * @param {Highcharts.HTMLDOMElement} el
		 *        An HTML element.
		 *
		 * @param {string} prop
		 *        The property name.
		 *
		 * @param {boolean} [toInt=true]
		 *        Parse to integer.
		 *
		 * @return {number}
		 *         The numeric value.
		 */
		H.getStyle = function (el, prop, toInt) {

		    var style;

		    // For width and height, return the actual inner pixel size (#4913)
		    if (prop === 'width') {
		        return Math.max(
		            0, // #8377
		            (
		                Math.min(
		                    el.offsetWidth,
		                    el.scrollWidth,
		                    el.getBoundingClientRect ?
		                        Math.floor(el.getBoundingClientRect().width) : // #6427
		                        Infinity
		                ) -
		                H.getStyle(el, 'padding-left') -
		                H.getStyle(el, 'padding-right')
		            )
		        );
		    } else if (prop === 'height') {
		        return Math.max(
		            0, // #8377
		            Math.min(el.offsetHeight, el.scrollHeight) -
		                H.getStyle(el, 'padding-top') -
		                H.getStyle(el, 'padding-bottom')
		        );
		    }

		    if (!win.getComputedStyle) {
		        // SVG not supported, forgot to load oldie.js?
		        H.error(27, true);
		    }

		    // Otherwise, get the computed style
		    style = win.getComputedStyle(el, undefined);
		    if (style) {
		        style = style.getPropertyValue(prop);
		        if (H.pick(toInt, prop !== 'opacity')) {
		            style = H.pInt(style);
		        }
		    }
		    return style;
		};

		/**
		 * Search for an item in an array.
		 *
		 * @function Highcharts.inArray
		 *
		 * @deprecated
		 *
		 * @param {*} item
		 *        The item to search for.
		 *
		 * @param {Array} arr
		 *        The array or node collection to search in.
		 *
		 * @param {number} [fromIndex=0]
		 *        The index to start searching from.
		 *
		 * @return {number}
		 *         The index within the array, or -1 if not found.
		 */
		H.inArray = function (item, arr, fromIndex) {
		    return arr.indexOf(item, fromIndex);
		};

		/**
		 * Return the value of the first element in the array that satisfies the
		 * provided testing function.
		 *
		 * @function Highcharts.find
		 *
		 * @param {Array} arr
		 *        The array to test.
		 *
		 * @param {Function} callback
		 *        The callback function. The function receives the item as the first
		 *        argument. Return `true` if this item satisfies the condition.
		 *
		 * @return {*}
		 *         The value of the element.
		 */
		H.find = Array.prototype.find ?
		    function (arr, callback) {
		        return arr.find(callback);
		    } :
		    // Legacy implementation. PhantomJS, IE <= 11 etc. #7223.
		    function (arr, fn) {
		        var i,
		            length = arr.length;

		        for (i = 0; i < length; i++) {
		            if (fn(arr[i], i)) {
		                return arr[i];
		            }
		        }
		    };

		/**
		 * Returns an array of a given object's own properties.
		 *
		 * @function Highcharts.keys
		 * @deprecated
		 *
		 * @param {*} obj
		 *        The object of which the properties are to be returned.
		 *
		 * @return {Array<string>}
		 *         An array of strings that represents all the properties.
		 */
		H.keys = Object.keys;

		/**
		 * Get the element's offset position, corrected for `overflow: auto`.
		 *
		 * @function Highcharts.offset
		 *
		 * @param {Highcharts.HTMLDOMElement} el
		 *        The HTML element.
		 *
		 * @return {Highcharts.OffsetObject}
		 *         An object containing `left` and `top` properties for the position in
		 *         the page.
		 */
		H.offset = function (el) {
		    var docElem = doc.documentElement,
		        box = (el.parentElement || el.parentNode) ?
		            el.getBoundingClientRect() :
		            { top: 0, left: 0 };

		    return {
		        top: box.top + (win.pageYOffset || docElem.scrollTop) -
		            (docElem.clientTop || 0),
		        left: box.left + (win.pageXOffset || docElem.scrollLeft) -
		            (docElem.clientLeft || 0)
		    };
		};

		/**
		 * Stop running animation.
		 *
		 * @function Highcharts.stop
		 *
		 * @param {Highcharts.SVGElement} el
		 *        The SVGElement to stop animation on.
		 *
		 * @param {string} [prop]
		 *        The property to stop animating. If given, the stop method will stop a
		 *        single property from animating, while others continue.
		 *
		 * @todo
		 * A possible extension to this would be to stop a single property, when
		 * we want to continue animating others. Then assign the prop to the timer
		 * in the Fx.run method, and check for the prop here. This would be an
		 * improvement in all cases where we stop the animation from .attr. Instead of
		 * stopping everything, we can just stop the actual attributes we're setting.
		 */
		H.stop = function (el, prop) {

		    var i = H.timers.length;

		    // Remove timers related to this element (#4519)
		    while (i--) {
		        if (H.timers[i].elem === el && (!prop || prop === H.timers[i].prop)) {
		            H.timers[i].stopped = true; // #4667
		        }
		    }
		};

		/**
		 * Iterate over object key pairs in an object.
		 *
		 * @function Highcharts.objectEach
		 *
		 * @param {*} obj
		 *        The object to iterate over.
		 *
		 * @param {Highcharts.ObjectEachCallbackFunction} fn
		 *        The iterator callback. It passes three arguments:
		 *        * value - The property value.
		 *        * key - The property key.
		 *        * obj - The object that objectEach is being applied to.
		 *
		 * @param {*} [ctx]
		 *        The context.
		 */
		H.objectEach = function (obj, fn, ctx) {
		    for (var key in obj) {
		        if (obj.hasOwnProperty(key)) {
		            fn.call(ctx || obj[key], obj[key], key, obj);
		        }
		    }
		};

		/**
		 * Iterate over an array.
		 *
		 * @deprecated
		 * @function Highcharts.each
		 *
		 * @param {Array<*>} arr
		 *        The array to iterate over.
		 *
		 * @param {Function} fn
		 *        The iterator callback. It passes three arguments:
		 *        - `item`: The array item.
		 *        - `index`: The item's index in the array.
		 *        - `arr`: The array that each is being applied to.
		 *
		 * @param {*} [ctx]
		 *        The context.
		 */

		/**
		 * Filter an array by a callback.
		 *
		 * @deprecated
		 * @function Highcharts.grep
		 *
		 * @param {Array<*>} arr
		 *        The array to filter.
		 *
		 * @param {Function} callback
		 *        The callback function. The function receives the item as the first
		 *        argument. Return `true` if the item is to be preserved.
		 *
		 * @return {Array<*>}
		 *         A new, filtered array.
		 */

		/**
		 * Map an array by a callback.
		 *
		 * @deprecated
		 * @function Highcharts.map
		 *
		 * @param {Array<*>} arr
		 *        The array to map.
		 *
		 * @param {Function} fn
		 *        The callback function. Return the new value for the new array.
		 *
		 * @return {Array<*>}
		 *         A new array item with modified items.
		 */

		/**
		 * Reduce an array to a single value.
		 *
		 * @deprecated
		 * @function Highcharts.reduce
		 *
		 * @param {Array} arr
		 *        The array to reduce.
		 *
		 * @param {Function} fn
		 *        The callback function. Return the reduced value. Receives 4
		 *        arguments: Accumulated/reduced value, current value, current array
		 *        index, and the array.
		 *
		 * @param {*} initialValue
		 *        The initial value of the accumulator.
		 *
		 * @return {*}
		 *         The reduced value.
		 */

		/**
		 * Test whether at least one element in the array passes the test implemented by
		 * the provided function.
		 *
		 * @deprecated
		 * @function Highcharts.some
		 *
		 * @param {Array<*>} arr
		 *        The array to test
		 *
		 * @param {Function} fn
		 *        The function to run on each item. Return truty to pass the test.
		 *        Receives arguments `currentValue`, `index` and `array`.
		 *
		 * @param {*} ctx
		 *        The context.
		 *
		 * @return {boolean}
		 */
		H.objectEach({
		    map: 'map',
		    each: 'forEach',
		    grep: 'filter',
		    reduce: 'reduce',
		    some: 'some'
		}, function (val, key) {
		    H[key] = function (arr) {
		        return Array.prototype[val].apply(
		            arr,
		            [].slice.call(arguments, 1)
		        );
		    };
		});

		/**
		 * Add an event listener.
		 *
		 * @function Highcharts.addEvent<T>
		 *
		 * @param {T} el
		 *        The element or object to add a listener to. It can be a
		 *        {@link HTMLDOMElement}, an {@link SVGElement} or any other object.
		 *
		 * @param {string} type
		 *        The event type.
		 *
		 * @param {Highcharts.EventCallbackFunction<T>} fn
		 *        The function callback to execute when the event is fired.
		 *
		 * @param {Highcharts.EventOptionsObject} [options]
		 *        Options for adding the event.
		 *
		 * @return {Function}
		 *         A callback function to remove the added event.
		 */
		H.addEvent = function (el, type, fn, options) {

		    var events,
		        addEventListener = el.addEventListener || H.addEventListenerPolyfill;

		    // If we're setting events directly on the constructor, use a separate
		    // collection, `protoEvents` to distinguish it from the item events in
		    // `hcEvents`.
		    if (typeof el === 'function' && el.prototype) {
		        events = el.prototype.protoEvents = el.prototype.protoEvents || {};
		    } else {
		        events = el.hcEvents = el.hcEvents || {};
		    }

		    // Allow click events added to points, otherwise they will be prevented by
		    // the TouchPointer.pinch function after a pinch zoom operation (#7091).
		    if (H.Point && el instanceof H.Point && el.series && el.series.chart) {
		        el.series.chart.runTrackerClick = true;
		    }

		    // Handle DOM events
		    if (addEventListener) {
		        addEventListener.call(el, type, fn, false);
		    }

		    if (!events[type]) {
		        events[type] = [];
		    }

		    events[type].push(fn);

		    // Order the calls
		    if (options && H.isNumber(options.order)) {
		        fn.order = options.order;
		        events[type].sort(function (a, b) {
		            return a.order - b.order;
		        });
		    }

		    // Return a function that can be called to remove this event.
		    return function () {
		        H.removeEvent(el, type, fn);
		    };
		};

		/**
		 * Remove an event that was added with {@link Highcharts#addEvent}.
		 *
		 * @function Highcharts.removeEvent<T>
		 *
		 * @param {T} el
		 *        The element to remove events on.
		 *
		 * @param {string} [type]
		 *        The type of events to remove. If undefined, all events are removed
		 *        from the element.
		 *
		 * @param {Highcharts.EventCallbackFunction<T>} [fn]
		 *        The specific callback to remove. If undefined, all events that match
		 *        the element and optionally the type are removed.
		 */
		H.removeEvent = function (el, type, fn) {

		    var events,
		        index;

		    function removeOneEvent(type, fn) {
		        var removeEventListener =
		            el.removeEventListener || H.removeEventListenerPolyfill;

		        if (removeEventListener) {
		            removeEventListener.call(el, type, fn, false);
		        }
		    }

		    function removeAllEvents(eventCollection) {
		        var types,
		            len;

		        if (!el.nodeName) {
		            return; // break on non-DOM events
		        }

		        if (type) {
		            types = {};
		            types[type] = true;
		        } else {
		            types = eventCollection;
		        }

		        H.objectEach(types, function (val, n) {
		            if (eventCollection[n]) {
		                len = eventCollection[n].length;
		                while (len--) {
		                    removeOneEvent(n, eventCollection[n][len]);
		                }
		            }
		        });
		    }

		    ['protoEvents', 'hcEvents'].forEach(function (coll) {
		        var eventCollection = el[coll];
		        if (eventCollection) {
		            if (type) {
		                events = eventCollection[type] || [];
		                if (fn) {
		                    index = events.indexOf(fn);
		                    if (index > -1) {
		                        events.splice(index, 1);
		                        eventCollection[type] = events;
		                    }
		                    removeOneEvent(type, fn);

		                } else {
		                    removeAllEvents(eventCollection);
		                    eventCollection[type] = [];
		                }
		            } else {
		                removeAllEvents(eventCollection);
		                el[coll] = {};
		            }
		        }
		    });
		};

		/**
		 * Fire an event that was registered with {@link Highcharts#addEvent}.
		 *
		 * @function Highcharts.fireEvent
		 *
		 * @param {*} el
		 *        The object to fire the event on. It can be a {@link HTMLDOMElement},
		 *        an {@link SVGElement} or any other object.
		 *
		 * @param {string} type
		 *        The type of event.
		 *
		 * @param {Highcharts.Dictionary<*>} [eventArguments]
		 *        Custom event arguments that are passed on as an argument to the event
		 *        handler.
		 *
		 * @param {Function} [defaultFunction]
		 *        The default function to execute if the other listeners haven't
		 *        returned false.
		 */
		H.fireEvent = function (el, type, eventArguments, defaultFunction) {
		    var e,
		        events,
		        len,
		        i,
		        fn;

		    eventArguments = eventArguments || {};

		    if (doc.createEvent && (el.dispatchEvent || el.fireEvent)) {
		        e = doc.createEvent('Events');
		        e.initEvent(type, true, true);

		        H.extend(e, eventArguments);

		        if (el.dispatchEvent) {
		            el.dispatchEvent(e);
		        } else {
		            el.fireEvent(type, e);
		        }

		    } else {

		        ['protoEvents', 'hcEvents'].forEach(function (coll) {

		            if (el[coll]) {
		                events = el[coll][type] || [];
		                len = events.length;

		                if (!eventArguments.target) { // We're running a custom event

		                    H.extend(eventArguments, {
		                        // Attach a simple preventDefault function to skip
		                        // default handler if called. The built-in
		                        // defaultPrevented property is not overwritable (#5112)
		                        preventDefault: function () {
		                            eventArguments.defaultPrevented = true;
		                        },
		                        // Setting target to native events fails with clicking
		                        // the zoom-out button in Chrome.
		                        target: el,
		                        // If the type is not set, we're running a custom event
		                        // (#2297). If it is set, we're running a browser event,
		                        // and setting it will cause en error in IE8 (#2465).
		                        type: type
		                    });
		                }


		                for (i = 0; i < len; i++) {
		                    fn = events[i];

		                    // If the event handler return false, prevent the default
		                    // handler from executing
		                    if (fn && fn.call(el, eventArguments) === false) {
		                        eventArguments.preventDefault();
		                    }
		                }
		            }
		        });
		    }

		    // Run the default if not prevented
		    if (defaultFunction && !eventArguments.defaultPrevented) {
		        defaultFunction.call(el, eventArguments);
		    }
		};

		/**
		 * The global animate method, which uses Fx to create individual animators.
		 *
		 * @function Highcharts.animate
		 *
		 * @param {Highcharts.HTMLDOMElement|Highcharts.SVGElement} el
		 *        The element to animate.
		 *
		 * @param {Highcharts.HTMLAttributes|Highcharts.SVGAttributes} params
		 *        An object containing key-value pairs of the properties to animate.
		 *        Supports numeric as pixel-based CSS properties for HTML objects and
		 *        attributes for SVGElements.
		 *
		 * @param {Highcharts.AnimationOptionsObject} [opt]
		 *        Animation options.
		 */
		H.animate = function (el, params, opt) {
		    var start,
		        unit = '',
		        end,
		        fx,
		        args;

		    if (!H.isObject(opt)) { // Number or undefined/null
		        args = arguments;
		        opt = {
		            duration: args[2],
		            easing: args[3],
		            complete: args[4]
		        };
		    }
		    if (!H.isNumber(opt.duration)) {
		        opt.duration = 400;
		    }
		    opt.easing = typeof opt.easing === 'function' ?
		        opt.easing :
		        (Math[opt.easing] || Math.easeInOutSine);
		    opt.curAnim = H.merge(params);

		    H.objectEach(params, function (val, prop) {
		        // Stop current running animation of this property
		        H.stop(el, prop);

		        fx = new H.Fx(el, opt, prop);
		        end = null;

		        if (prop === 'd') {
		            fx.paths = fx.initPath(
		                el,
		                el.d,
		                params.d
		            );
		            fx.toD = params.d;
		            start = 0;
		            end = 1;
		        } else if (el.attr) {
		            start = el.attr(prop);
		        } else {
		            start = parseFloat(H.getStyle(el, prop)) || 0;
		            if (prop !== 'opacity') {
		                unit = 'px';
		            }
		        }

		        if (!end) {
		            end = val;
		        }
		        if (end && end.match && end.match('px')) {
		            end = end.replace(/px/g, ''); // #4351
		        }
		        fx.run(start, end, unit);
		    });
		};

		/**
		 * Factory to create new series prototypes.
		 *
		 * @function Highcharts.seriesType
		 *
		 * @param {string} type
		 *        The series type name.
		 *
		 * @param {string} parent
		 *        The parent series type name. Use `line` to inherit from the basic
		 *        {@link Series} object.
		 *
		 * @param {*} options
		 *        The additional default options that is merged with the parent's
		 *        options.
		 *
		 * @param {*} props
		 *        The properties (functions and primitives) to set on the new
		 *        prototype.
		 *
		 * @param {*} [pointProps]
		 *        Members for a series-specific extension of the {@link Point}
		 *        prototype if needed.
		 *
		 * @return {Highcharts.Series}
		 *         The newly created prototype as extended from {@link Series} or its
		 *         derivatives.
		 */
		// docs: add to API + extending Highcharts
		H.seriesType = function (type, parent, options, props, pointProps) {
		    var defaultOptions = H.getOptions(),
		        seriesTypes = H.seriesTypes;

		    // Merge the options
		    defaultOptions.plotOptions[type] = H.merge(
		        defaultOptions.plotOptions[parent],
		        options
		    );

		    // Create the class
		    seriesTypes[type] = H.extendClass(seriesTypes[parent] ||
		        function () {}, props);
		    seriesTypes[type].prototype.type = type;

		    // Create the point class if needed
		    if (pointProps) {
		        seriesTypes[type].prototype.pointClass =
		            H.extendClass(H.Point, pointProps);
		    }

		    return seriesTypes[type];
		};

		/**
		 * Get a unique key for using in internal element id's and pointers. The key is
		 * composed of a random hash specific to this Highcharts instance, and a
		 * counter.
		 *
		 * @example
		 * var id = H.uniqueKey(); // => 'highcharts-x45f6hp-0'
		 *
		 * @function Highcharts.uniqueKey
		 *
		 * @return {string}
		 *         A unique key.
		 */
		H.uniqueKey = (function () {

		    var uniqueKeyHash = Math.random().toString(36).substring(2, 9),
		        idCounter = 0;

		    return function () {
		        return 'highcharts-' + uniqueKeyHash + '-' + idCounter++;
		    };
		}());

		H.isFunction = function (obj) {
		    return typeof obj === 'function';
		};

		// Register Highcharts as a plugin in jQuery
		if (win.jQuery) {

		    /**
		     * Highcharts-extended JQuery.
		     *
		     * @external JQuery
		     */

		    /**
		     * Helper function to return the chart of the current JQuery selector
		     * element.
		     *
		     * @function external:JQuery#highcharts
		     *
		     * @return {Highcharts.Chart}
		     *         The chart that is linked to the JQuery selector element.
		     *//**
		     * Factory function to create a chart in the current JQuery selector
		     * element.
		     *
		     * @function external:JQuery#highcharts
		     *
		     * @param {"Chart"|"Map"|"StockChart"|string} [className]
		     *        Name of the factory class in the Highcharts namespace.
		     *
		     * @param {Highcharts.Options} [options]
		     *        The chart options structure.
		     *
		     * @param {Highcharts.ChartCallbackFunction} [callback]
		     *        Function to run when the chart has loaded and and all external
		     *        images are loaded. Defining a
		     *        [chart.event.load](https://api.highcharts.com/highcharts/chart.events.load)
		     *        handler is equivalent.
		     *
		     * @return {JQuery}
		     *         The current JQuery selector.
		     */
		    win.jQuery.fn.highcharts = function () {
		        var args = [].slice.call(arguments);

		        if (this[0]) { // this[0] is the renderTo div

		            // Create the chart
		            if (args[0]) {
		                new H[ // eslint-disable-line no-new
		                    // Constructor defaults to Chart
		                    H.isString(args[0]) ? args.shift() : 'Chart'
		                ](this[0], args[0], args[1]);
		                return this;
		            }

		            // When called without parameters or with the return argument,
		            // return an existing chart
		            return charts[H.attr(this[0], 'data-highcharts-chart')];
		        }
		    };
		}

	}(Highcharts));
	(function (H) {
		/**
		 * (c) 2010-2018 Torstein Honsi
		 *
		 * License: www.highcharts.com/license
		 */

		/**
		 * A valid color to be parsed and handled by Highcharts. Highcharts internally
		 * supports hex colors like `#ffffff`, rgb colors like `rgb(255,255,255)` and
		 * rgba colors like `rgba(255,255,255,1)`. Other colors may be supported by the
		 * browsers and displayed correctly, but Highcharts is not able to process them
		 * and apply concepts like opacity and brightening.
		 *
		 * @typedef {string} Highcharts.ColorString
		 */



		var isNumber = H.isNumber,
		    merge = H.merge,
		    pInt = H.pInt;

		/**
		 * Handle color operations. The object methods are chainable.
		 *
		 * @private
		 * @class
		 * @name Highcharts.Color
		 *
		 * @param {Highcharts.ColorString} input
		 *        The input color in either rbga or hex format
		 */
		H.Color = function (input) {
		    // Backwards compatibility, allow instanciation without new
		    if (!(this instanceof H.Color)) {
		        return new H.Color(input);
		    }
		    // Initialize
		    this.init(input);
		};
		H.Color.prototype = {

		    // Collection of parsers. This can be extended from the outside by pushing
		    // parsers to Highcharts.Color.prototype.parsers.
		    parsers: [{
		        // RGBA color
		        regex: /rgba\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]?(?:\.[0-9]+)?)\s*\)/, // eslint-disable-line security/detect-unsafe-regex
		        parse: function (result) {
		            return [
		                pInt(result[1]),
		                pInt(result[2]),
		                pInt(result[3]),
		                parseFloat(result[4], 10)
		            ];
		        }
		    }, {
		        // RGB color
		        regex:
		            /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/,
		        parse: function (result) {
		            return [pInt(result[1]), pInt(result[2]), pInt(result[3]), 1];
		        }
		    }],

		    // Collection of named colors. Can be extended from the outside by adding
		    // colors to Highcharts.Color.prototype.names.
		    names: {
		        white: '#ffffff',
		        black: '#000000'
		    },

		    /**
		     * Parse the input color to rgba array
		     *
		     * @private
		     * @function Highcharts.Color#init
		     *
		     * @param {Highcharts.ColorString} input
		     *        The input color in either rbga or hex format
		     */
		    init: function (input) {
		        var result,
		            rgba,
		            i,
		            parser,
		            len;

		        this.input = input = this.names[
		                                input && input.toLowerCase ?
		                                    input.toLowerCase() :
		                                    ''
		                            ] || input;

		        // Gradients
		        if (input && input.stops) {
		            this.stops = input.stops.map(function (stop) {
		                return new H.Color(stop[1]);
		            });

		        // Solid colors
		        } else {

		            // Bitmasking as input[0] is not working for legacy IE.
		            if (input && input.charAt && input.charAt() === '#') {

		                len = input.length;
		                input = parseInt(input.substr(1), 16);

		                // Handle long-form, e.g. #AABBCC
		                if (len === 7) {

		                    rgba = [
		                        (input & 0xFF0000) >> 16,
		                        (input & 0xFF00) >> 8,
		                        (input & 0xFF),
		                        1
		                    ];

		                // Handle short-form, e.g. #ABC
		                // In short form, the value is assumed to be the same
		                // for both nibbles for each component. e.g. #ABC = #AABBCC
		                } else if (len === 4) {

		                    rgba = [
		                        ((input & 0xF00) >> 4) | (input & 0xF00) >> 8,
		                        ((input & 0xF0) >> 4) | (input & 0xF0),
		                        ((input & 0xF) << 4) | (input & 0xF),
		                        1
		                    ];
		                }
		            }

		            // Otherwise, check regex parsers
		            if (!rgba) {
		                i = this.parsers.length;
		                while (i-- && !rgba) {
		                    parser = this.parsers[i];
		                    result = parser.regex.exec(input);
		                    if (result) {
		                        rgba = parser.parse(result);
		                    }
		                }
		            }
		        }
		        this.rgba = rgba || [];
		    },

		    /**
		     * Return the color in the specified format
		     *
		     * @function Highcharts.Color#get
		     *
		     * @param {string} format
		     *        Possible values are 'a', 'rgb', undefined
		     *
		     * @return {Highcharts.ColorString}
		     *         This color as a string.
		     */
		    get: function (format) {
		        var input = this.input,
		            rgba = this.rgba,
		            ret;

		        if (this.stops) {
		            ret = merge(input);
		            ret.stops = [].concat(ret.stops);
		            this.stops.forEach(function (stop, i) {
		                ret.stops[i] = [ret.stops[i][0], stop.get(format)];
		            });

		        // it's NaN if gradient colors on a column chart
		        } else if (rgba && isNumber(rgba[0])) {
		            if (format === 'rgb' || (!format && rgba[3] === 1)) {
		                ret = 'rgb(' + rgba[0] + ',' + rgba[1] + ',' + rgba[2] + ')';
		            } else if (format === 'a') {
		                ret = rgba[3];
		            } else {
		                ret = 'rgba(' + rgba.join(',') + ')';
		            }
		        } else {
		            ret = input;
		        }
		        return ret;
		    },

		    /**
		     * Brighten the color instance.
		     *
		     * @function Highcharts.Color#brighten
		     *
		     * @param {number} alpha
		     *        The alpha value.
		     *
		     * @return {Highcharts.ColorString}
		     *         This color with modifications.
		     */
		    brighten: function (alpha) {
		        var i,
		            rgba = this.rgba;

		        if (this.stops) {
		            this.stops.forEach(function (stop) {
		                stop.brighten(alpha);
		            });

		        } else if (isNumber(alpha) && alpha !== 0) {
		            for (i = 0; i < 3; i++) {
		                rgba[i] += pInt(alpha * 255);

		                if (rgba[i] < 0) {
		                    rgba[i] = 0;
		                }
		                if (rgba[i] > 255) {
		                    rgba[i] = 255;
		                }
		            }
		        }
		        return this;
		    },

		    /**
		     * Set the color's opacity to a given alpha value.
		     *
		     * @function Highcharts.Color#setOpacity
		     *
		     * @param {number} alpha
		     *        Opacity between 0 and 1.
		     *
		     * @return {Highcharts.ColorString}
		     *         Color with modifications.
		     */
		    setOpacity: function (alpha) {
		        this.rgba[3] = alpha;
		        return this;
		    },

		    /**
		     * Return an intermediate color between two colors.
		     *
		     * @function Highcharts.Color#tweenTo
		     *
		     * @param {Highcharts.Color} to
		     *        The color object to tween to.
		     *
		     * @param {number} pos
		     *        The intermediate position, where 0 is the from color (current
		     *        color item), and 1 is the `to` color.
		     *
		     * @return {Highcharts.ColorString}
		     *         The intermediate color in rgba notation.
		     */
		    tweenTo: function (to, pos) {
		        // Check for has alpha, because rgba colors perform worse due to lack of
		        // support in WebKit.
		        var fromRgba = this.rgba,
		            toRgba = to.rgba,
		            hasAlpha,
		            ret;

		        // Unsupported color, return to-color (#3920, #7034)
		        if (!toRgba.length || !fromRgba || !fromRgba.length) {
		            ret = to.input || 'none';

		        // Interpolate
		        } else {
		            hasAlpha = (toRgba[3] !== 1 || fromRgba[3] !== 1);
		            ret = (hasAlpha ? 'rgba(' : 'rgb(') +
		                Math.round(toRgba[0] + (fromRgba[0] - toRgba[0]) * (1 - pos)) +
		                ',' +
		                Math.round(toRgba[1] + (fromRgba[1] - toRgba[1]) * (1 - pos)) +
		                ',' +
		                Math.round(toRgba[2] + (fromRgba[2] - toRgba[2]) * (1 - pos)) +
		                (
		                    hasAlpha ?
		                        (
		                            ',' +
		                            (toRgba[3] + (fromRgba[3] - toRgba[3]) * (1 - pos))
		                        ) :
		                        ''
		                ) +
		                ')';
		        }
		        return ret;
		    }
		};

		/**
		 * Creates a color instance out of a color string.
		 *
		 * @private
		 * @function Highcharts.color
		 *
		 * @param {Highcharts.ColorString} input
		 *        The input color in either rbga or hex format
		 */
		H.color = function (input) {
		    return new H.Color(input);
		};

	}(Highcharts));
	(function (Highcharts) {
		/**
		 * (c) 2010-2018 Torstein Honsi
		 *
		 * License: www.highcharts.com/license
		 */

		/**
		 * Normalized interval.
		 *
		 * @interface Highcharts.NormalizedIntervalObject
		 *//**
		 * The interval in axis values (ms).
		 *
		 * @name Highcharts.NormalizedIntervalObject#unitRange
		 * @type {number}
		 *//**
		 * The count.
		 *
		 * @name Highcharts.NormalizedIntervalObject#count
		 * @type {number}
		 */

		/**
		 * Function of an additional date format specifier.
		 *
		 * @callback Highcharts.TimeFormatCallbackFunction
		 *
		 * @param {number} timestamp
		 *        The time to format.
		 *
		 * @return {string}
		 *         The formatted portion of the date.
		 */

		/**
		 * Additonal time tick information.
		 *
		 * @interface Highcharts.TimeTicksInfoObject
		 * @augments Highcharts.NormalizedIntervalObject
		 *//**
		 * @name Highcharts.TimeTicksInfoObject#higherRanks
		 * @type {Array<string>}
		 *//**
		 * @name Highcharts.TimeTicksInfoObject#totalRange
		 * @type {number}
		 */

		/**
		 * Time ticks.
		 *
		 * @interface Highcharts.TimeTicksObject
		 * @augments Array<number>
		 *//**
		 * @name Highcharts.TimeTicksObject#info
		 * @type {Highcharts.TimeTicksInfoObject}
		 */



		var H = Highcharts,
		    defined = H.defined,
		    extend = H.extend,
		    merge = H.merge,
		    pick = H.pick,
		    timeUnits = H.timeUnits,
		    win = H.win;

		/**
		 * The Time class. Time settings are applied in general for each page using
		 * `Highcharts.setOptions`, or individually for each Chart item through the
		 * [time](https://api.highcharts.com/highcharts/time) options set.
		 *
		 * The Time object is available from {@link Highcharts.Chart#time},
		 * which refers to  `Highcharts.time` if no individual time settings are
		 * applied.
		 *
		 * @example
		 * // Apply time settings globally
		 * Highcharts.setOptions({
		 *     time: {
		 *         timezone: 'Europe/London'
		 *     }
		 * });
		 *
		 * // Apply time settings by instance
		 * var chart = Highcharts.chart('container', {
		 *     time: {
		 *         timezone: 'America/New_York'
		 *     },
		 *     series: [{
		 *         data: [1, 4, 3, 5]
		 *     }]
		 * });
		 *
		 * // Use the Time object
		 * console.log(
		 *        'Current time in New York',
		 *        chart.time.dateFormat('%Y-%m-%d %H:%M:%S', Date.now())
		 * );
		 *
		 * @class
		 * @name Highcharts.Time
		 *
		 * @param {Highcharts.TimeOptions} options
		 *        Time options as defined in [chart.options.time](/highcharts/time).
		 *
		 * @since 6.0.5
		 */
		Highcharts.Time = function (options) {
		    this.update(options, false);
		};

		Highcharts.Time.prototype = {

		    /**
		     * Time options that can apply globally or to individual charts. These
		     * settings affect how `datetime` axes are laid out, how tooltips are
		     * formatted, how series
		     * [pointIntervalUnit](#plotOptions.series.pointIntervalUnit) works and how
		     * the Highstock range selector handles time.
		     *
		     * The common use case is that all charts in the same Highcharts object
		     * share the same time settings, in which case the global settings are set
		     * using `setOptions`.
		     *
		     * ```js
		     * // Apply time settings globally
		     * Highcharts.setOptions({
		     *     time: {
		     *         timezone: 'Europe/London'
		     *     }
		     * });
		     * // Apply time settings by instance
		     * var chart = Highcharts.chart('container', {
		     *     time: {
		     *         timezone: 'America/New_York'
		     *     },
		     *     series: [{
		     *         data: [1, 4, 3, 5]
		     *     }]
		     * });
		     *
		     * // Use the Time object
		     * console.log(
		     *        'Current time in New York',
		     *        chart.time.dateFormat('%Y-%m-%d %H:%M:%S', Date.now())
		     * );
		     * ```
		     *
		     * Since v6.0.5, the time options were moved from the `global` obect to the
		     * `time` object, and time options can be set on each individual chart.
		     *
		     * @sample {highcharts|highstock}
		     *         highcharts/time/timezone/
		     *         Set the timezone globally
		     * @sample {highcharts}
		     *         highcharts/time/individual/
		     *         Set the timezone per chart instance
		     * @sample {highstock}
		     *         stock/time/individual/
		     *         Set the timezone per chart instance
		     *
		     * @since     6.0.5
		     * @apioption time
		     */

		    /**
		     * Whether to use UTC time for axis scaling, tickmark placement and
		     * time display in `Highcharts.dateFormat`. Advantages of using UTC
		     * is that the time displays equally regardless of the user agent's
		     * time zone settings. Local time can be used when the data is loaded
		     * in real time or when correct Daylight Saving Time transitions are
		     * required.
		     *
		     * @sample {highcharts} highcharts/time/useutc-true/
		     *         True by default
		     * @sample {highcharts} highcharts/time/useutc-false/
		     *         False
		     *
		     * @type      {boolean}
		     * @default   true
		     * @apioption time.useUTC
		     */

		    /**
		     * A custom `Date` class for advanced date handling. For example,
		     * [JDate](https://github.com/tahajahangir/jdate) can be hooked in to
		     * handle Jalali dates.
		     *
		     * @type      {*}
		     * @since     4.0.4
		     * @product   highcharts highstock gantt
		     * @apioption time.Date
		     */

		    /**
		     * A callback to return the time zone offset for a given datetime. It
		     * takes the timestamp in terms of milliseconds since January 1 1970,
		     * and returns the timezone offset in minutes. This provides a hook
		     * for drawing time based charts in specific time zones using their
		     * local DST crossover dates, with the help of external libraries.
		     *
		     * @see [global.timezoneOffset](#global.timezoneOffset)
		     *
		     * @sample {highcharts|highstock} highcharts/time/gettimezoneoffset/
		     *         Use moment.js to draw Oslo time regardless of browser locale
		     *
		     * @type      {Function}
		     * @since     4.1.0
		     * @product   highcharts highstock gantt
		     * @apioption time.getTimezoneOffset
		     */

		    /**
		     * Requires [moment.js](http://momentjs.com/). If the timezone option
		     * is specified, it creates a default
		     * [getTimezoneOffset](#time.getTimezoneOffset) function that looks
		     * up the specified timezone in moment.js. If moment.js is not included,
		     * this throws a Highcharts error in the console, but does not crash the
		     * chart.
		     *
		     * @see [getTimezoneOffset](#time.getTimezoneOffset)
		     *
		     * @sample {highcharts|highstock} highcharts/time/timezone/
		     *         Europe/Oslo
		     *
		     * @type      {string}
		     * @since     5.0.7
		     * @product   highcharts highstock gantt
		     * @apioption time.timezone
		     */

		    /**
		     * The timezone offset in minutes. Positive values are west, negative
		     * values are east of UTC, as in the ECMAScript
		     * [getTimezoneOffset](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getTimezoneOffset)
		     * method. Use this to display UTC based data in a predefined time zone.
		     *
		     * @see [time.getTimezoneOffset](#time.getTimezoneOffset)
		     *
		     * @sample {highcharts|highstock} highcharts/time/timezoneoffset/
		     *         Timezone offset
		     *
		     * @type      {number}
		     * @default   0
		     * @since     3.0.8
		     * @product   highcharts highstock gantt
		     * @apioption time.timezoneOffset
		     */

		    defaultOptions: {},

		    /**
		     * Update the Time object with current options. It is called internally on
		     * initiating Highcharts, after running `Highcharts.setOptions` and on
		     * `Chart.update`.
		     *
		     * @private
		     * @function Highcharts.Time#update
		     *
		     * @param {Highcharts.TimeOptions} options
		     */
		    update: function (options) {
		        var useUTC = pick(options && options.useUTC, true),
		            time = this;

		        this.options = options = merge(true, this.options || {}, options);

		        // Allow using a different Date class
		        this.Date = options.Date || win.Date;

		        this.useUTC = useUTC;
		        this.timezoneOffset = useUTC && options.timezoneOffset;

		        /**
		         * Get the time zone offset based on the current timezone information as
		         * set in the global options.
		         *
		         * @function Highcharts.Time#getTimezoneOffset
		         *
		         * @param {number} timestamp
		         *        The JavaScript timestamp to inspect.
		         *
		         * @return {number}
		         *         The timezone offset in minutes compared to UTC.
		         */
		        this.getTimezoneOffset = this.timezoneOffsetFunction();

		        /*
		         * The time object has options allowing for variable time zones, meaning
		         * the axis ticks or series data needs to consider this.
		         */
		        this.variableTimezone = !!(
		            !useUTC ||
		            options.getTimezoneOffset ||
		            options.timezone
		        );

		        // UTC time with timezone handling
		        if (this.variableTimezone || this.timezoneOffset) {
		            this.get = function (unit, date) {
		                var realMs = date.getTime(),
		                    ms = realMs - time.getTimezoneOffset(date),
		                    ret;

		                date.setTime(ms); // Temporary adjust to timezone
		                ret = date['getUTC' + unit]();
		                date.setTime(realMs); // Reset

		                return ret;
		            };
		            this.set = function (unit, date, value) {
		                var ms, offset, newOffset;

		                // For lower order time units, just set it directly using local
		                // time
		                if (
		                    unit === 'Milliseconds' ||
		                    unit === 'Seconds' ||

		                    // If we're dealting with minutes, we only need to
		                    // consider timezone if we're in Indian time zones with
		                    // half-hour offsets (#8768).
		                    (
		                        unit === 'Minutes' &&
		                        date.getTimezoneOffset() % 60 === 0
		                    )
		                ) {
		                    date['set' + unit](value);

		                // Higher order time units need to take the time zone into
		                // account
		                } else {

		                    // Adjust by timezone
		                    offset = time.getTimezoneOffset(date);
		                    ms = date.getTime() - offset;
		                    date.setTime(ms);

		                    date['setUTC' + unit](value);
		                    newOffset = time.getTimezoneOffset(date);

		                    ms = date.getTime() + newOffset;
		                    date.setTime(ms);
		                }

		            };

		        // UTC time with no timezone handling
		        } else if (useUTC) {
		            this.get = function (unit, date) {
		                return date['getUTC' + unit]();
		            };
		            this.set = function (unit, date, value) {
		                return date['setUTC' + unit](value);
		            };

		        // Local time
		        } else {
		            this.get = function (unit, date) {
		                return date['get' + unit]();
		            };
		            this.set = function (unit, date, value) {
		                return date['set' + unit](value);
		            };
		        }

		    },

		    /**
		     * Make a time and returns milliseconds. Interprets the inputs as UTC time,
		     * local time or a specific timezone time depending on the current time
		     * settings.
		     *
		     * @function Highcharts.Time#makeTime
		     *
		     * @param {number} year
		     *        The year
		     *
		     * @param {number} month
		     *        The month. Zero-based, so January is 0.
		     *
		     * @param {number} [date=1]
		     *        The day of the month
		     *
		     * @param {number} [hours=0]
		     *        The hour of the day, 0-23.
		     *
		     * @param {number} [minutes=0]
		     *        The minutes
		     *
		     * @param {number} [seconds=0]
		     *        The seconds
		     *
		     * @return {number}
		     *         The time in milliseconds since January 1st 1970.
		     */
		    makeTime: function (year, month, date, hours, minutes, seconds) {
		        var d, offset, newOffset;
		        if (this.useUTC) {
		            d = this.Date.UTC.apply(0, arguments);
		            offset = this.getTimezoneOffset(d);
		            d += offset;
		            newOffset = this.getTimezoneOffset(d);

		            if (offset !== newOffset) {
		                d += newOffset - offset;

		            // A special case for transitioning from summer time to winter time.
		            // When the clock is set back, the same time is repeated twice, i.e.
		            // 02:30 am is repeated since the clock is set back from 3 am to
		            // 2 am. We need to make the same time as local Date does.
		            } else if (
		                offset - 36e5 === this.getTimezoneOffset(d - 36e5) &&
		                !H.isSafari
		            ) {
		                d -= 36e5;
		            }

		        } else {
		            d = new this.Date(
		                year,
		                month,
		                pick(date, 1),
		                pick(hours, 0),
		                pick(minutes, 0),
		                pick(seconds, 0)
		            ).getTime();
		        }
		        return d;
		    },

		    /**
		     * Sets the getTimezoneOffset function. If the `timezone` option is set, a
		     * default getTimezoneOffset function with that timezone is returned. If
		     * a `getTimezoneOffset` option is defined, it is returned. If neither are
		     * specified, the function using the `timezoneOffset` option or 0 offset is
		     * returned.
		     *
		     * @private
		     * @function Highcharts.Time#timezoneOffsetFunction
		     *
		     * @return {Function}
		     *         A getTimezoneOffset function
		     */
		    timezoneOffsetFunction: function () {
		        var time = this,
		            options = this.options,
		            moment = win.moment;

		        if (!this.useUTC) {
		            return function (timestamp) {
		                return new Date(timestamp).getTimezoneOffset() * 60000;
		            };
		        }

		        if (options.timezone) {
		            if (!moment) {
		                // getTimezoneOffset-function stays undefined because it depends
		                // on Moment.js
		                H.error(25);

		            } else {
		                return function (timestamp) {
		                    return -moment.tz(
		                        timestamp,
		                        options.timezone
		                    ).utcOffset() * 60000;
		                };
		            }
		        }

		        // If not timezone is set, look for the getTimezoneOffset callback
		        if (this.useUTC && options.getTimezoneOffset) {
		            return function (timestamp) {
		                return options.getTimezoneOffset(timestamp) * 60000;
		            };
		        }

		        // Last, use the `timezoneOffset` option if set
		        return function () {
		            return (time.timezoneOffset || 0) * 60000;
		        };
		    },

		    /**
		     * Formats a JavaScript date timestamp (milliseconds since Jan 1st 1970)
		     * into a human readable date string. The format is a subset of the formats
		     * for PHP's [strftime](http://www.php.net/manual/en/function.strftime.php)
		     * function. Additional formats can be given in the
		     * {@link Highcharts.dateFormats} hook.
		     *
		     * @function Highcharts.Time#dateFormat
		     *
		     * @param {string} [format]
		     *        The desired format where various time representations are
		     *        prefixed with %.
		     *
		     * @param {number} timestamp
		     *        The JavaScript timestamp.
		     *
		     * @param {boolean} [capitalize=false]
		     *        Upper case first letter in the return.
		     *
		     * @return {string}
		     *         The formatted date.
		     */
		    dateFormat: function (format, timestamp, capitalize) {
		        if (!H.defined(timestamp) || isNaN(timestamp)) {
		            return H.defaultOptions.lang.invalidDate || '';
		        }
		        format = H.pick(format, '%Y-%m-%d %H:%M:%S');

		        var time = this,
		            date = new this.Date(timestamp),
		            // get the basic time values
		            hours = this.get('Hours', date),
		            day = this.get('Day', date),
		            dayOfMonth = this.get('Date', date),
		            month = this.get('Month', date),
		            fullYear = this.get('FullYear', date),
		            lang = H.defaultOptions.lang,
		            langWeekdays = lang.weekdays,
		            shortWeekdays = lang.shortWeekdays,
		            pad = H.pad,

		            // List all format keys. Custom formats can be added from the
		            // outside.
		            replacements = H.extend(
		                {

		                    // Day
		                    // Short weekday, like 'Mon'
		                    'a': shortWeekdays ?
		                        shortWeekdays[day] :
		                        langWeekdays[day].substr(0, 3),
		                    // Long weekday, like 'Monday'
		                    'A': langWeekdays[day],
		                    // Two digit day of the month, 01 to 31
		                    'd': pad(dayOfMonth),
		                    // Day of the month, 1 through 31
		                    'e': pad(dayOfMonth, 2, ' '),
		                    'w': day,

		                    // Week (none implemented)
		                    // 'W': weekNumber(),

		                    // Month
		                    // Short month, like 'Jan'
		                    'b': lang.shortMonths[month],
		                    // Long month, like 'January'
		                    'B': lang.months[month],
		                    // Two digit month number, 01 through 12
		                    'm': pad(month + 1),
		                    // Month number, 1 through 12 (#8150)
		                    'o': month + 1,

		                    // Year
		                    // Two digits year, like 09 for 2009
		                    'y': fullYear.toString().substr(2, 2),
		                    // Four digits year, like 2009
		                    'Y': fullYear,

		                    // Time
		                    // Two digits hours in 24h format, 00 through 23
		                    'H': pad(hours),
		                    // Hours in 24h format, 0 through 23
		                    'k': hours,
		                    // Two digits hours in 12h format, 00 through 11
		                    'I': pad((hours % 12) || 12),
		                    // Hours in 12h format, 1 through 12
		                    'l': (hours % 12) || 12,
		                    // Two digits minutes, 00 through 59
		                    'M': pad(time.get('Minutes', date)),
		                    // Upper case AM or PM
		                    'p': hours < 12 ? 'AM' : 'PM',
		                    // Lower case AM or PM
		                    'P': hours < 12 ? 'am' : 'pm',
		                    // Two digits seconds, 00 through  59
		                    'S': pad(date.getSeconds()),
		                    // Milliseconds (naming from Ruby)
		                    'L': pad(Math.floor(timestamp % 1000), 3)
		                },

		                /**
		                 * A hook for defining additional date format specifiers. New
		                 * specifiers are defined as key-value pairs by using the
		                 * specifier as key, and a function which takes the timestamp as
		                 * value. This function returns the formatted portion of the
		                 * date.
		                 *
		                 * @sample highcharts/global/dateformats/
		                 *         Adding support for week number
		                 *
		                 * @name Highcharts.dateFormats
		                 * @type {Highcharts.Dictionary<Highcharts.TimeFormatCallbackFunction>}
		                 */
		                H.dateFormats
		            );


		        // Do the replaces
		        H.objectEach(replacements, function (val, key) {
		            // Regex would do it in one line, but this is faster
		            while (format.indexOf('%' + key) !== -1) {
		                format = format.replace(
		                    '%' + key,
		                    typeof val === 'function' ? val.call(time, timestamp) : val
		                );
		            }

		        });

		        // Optionally capitalize the string and return
		        return capitalize ?
		            format.substr(0, 1).toUpperCase() + format.substr(1) :
		            format;
		    },

		    /**
		     * Resolve legacy formats of dateTimeLabelFormats (strings and arrays) into
		     * an object.
		     * @param  {String|Array|Object} f General format description
		     * @return {Object}   The object definition
		     */
		    resolveDTLFormat: function (f) {
		        if (!H.isObject(f, true)) {
		            f = H.splat(f);
		            return {
		                main: f[0],
		                from: f[1],
		                to: f[2]
		            };
		        }
		        return f;
		    },

		    /**
		     * Return an array with time positions distributed on round time values
		     * right and right after min and max. Used in datetime axes as well as for
		     * grouping data on a datetime axis.
		     *
		     * @function Highcharts.Time#getTimeTicks
		     *
		     * @param {Highcharts.NormalizedIntervalObject} normalizedInterval
		     *        The interval in axis values (ms) and the count
		     *
		     * @param {number} [min]
		     *        The minimum in axis values
		     *
		     * @param {number} [max]
		     *        The maximum in axis values
		     *
		     * @param {number} [startOfWeek=1]
		     *
		     * @return {Highcharts.TimeTicksObject}
		     */
		    getTimeTicks: function (
		        normalizedInterval,
		        min,
		        max,
		        startOfWeek
		    ) {
		        var time = this,
		            Date = time.Date,
		            tickPositions = [],
		            i,
		            higherRanks = {},
		            minYear, // used in months and years as a basis for Date.UTC()
		            // When crossing DST, use the max. Resolves #6278.
		            minDate = new Date(min),
		            interval = normalizedInterval.unitRange,
		            count = normalizedInterval.count || 1,
		            variableDayLength,
		            minDay;

		        startOfWeek = pick(startOfWeek, 1);

		        if (defined(min)) { // #1300
		            time.set(
		                'Milliseconds',
		                minDate,
		                interval >= timeUnits.second ?
		                    0 : // #3935
		                    count * Math.floor(
		                        time.get('Milliseconds', minDate) / count
		                    )
		            ); // #3652, #3654

		            if (interval >= timeUnits.second) { // second
		                time.set('Seconds',
		                    minDate,
		                    interval >= timeUnits.minute ?
		                        0 : // #3935
		                        count * Math.floor(time.get('Seconds', minDate) / count)
		                );
		            }

		            if (interval >= timeUnits.minute) { // minute
		                time.set('Minutes', minDate,
		                    interval >= timeUnits.hour ?
		                        0 :
		                        count * Math.floor(time.get('Minutes', minDate) / count)
		                );
		            }

		            if (interval >= timeUnits.hour) { // hour
		                time.set(
		                    'Hours',
		                    minDate,
		                    interval >= timeUnits.day ?
		                        0 :
		                        count * Math.floor(
		                            time.get('Hours', minDate) / count
		                        )
		                );
		            }

		            if (interval >= timeUnits.day) { // day
		                time.set(
		                    'Date',
		                    minDate,
		                    interval >= timeUnits.month ?
		                        1 :
		                        Math.max(
		                            1,
		                            count * Math.floor(
		                                time.get('Date', minDate) / count
		                            )
		                        )
		                    );
		            }

		            if (interval >= timeUnits.month) { // month
		                time.set(
		                    'Month',
		                    minDate,
		                    interval >= timeUnits.year ? 0 :
		                        count * Math.floor(time.get('Month', minDate) / count)
		                );
		                minYear = time.get('FullYear', minDate);
		            }

		            if (interval >= timeUnits.year) { // year
		                minYear -= minYear % count;
		                time.set('FullYear', minDate, minYear);
		            }

		            // week is a special case that runs outside the hierarchy
		            if (interval === timeUnits.week) {
		                // get start of current week, independent of count
		                minDay = time.get('Day', minDate);
		                time.set(
		                    'Date',
		                    minDate,
		                    (
		                        time.get('Date', minDate) -
		                        minDay + startOfWeek +
		                        // We don't want to skip days that are before
		                        // startOfWeek (#7051)
		                        (minDay < startOfWeek ? -7 : 0)
		                    )
		                );
		            }


		            // Get basics for variable time spans
		            minYear = time.get('FullYear', minDate);
		            var minMonth = time.get('Month', minDate),
		                minDateDate = time.get('Date', minDate),
		                minHours = time.get('Hours', minDate);

		            // Redefine min to the floored/rounded minimum time (#7432)
		            min = minDate.getTime();

		            // Handle local timezone offset
		            if (time.variableTimezone) {

		                // Detect whether we need to take the DST crossover into
		                // consideration. If we're crossing over DST, the day length may
		                // be 23h or 25h and we need to compute the exact clock time for
		                // each tick instead of just adding hours. This comes at a cost,
		                // so first we find out if it is needed (#4951).
		                variableDayLength = (
		                    // Long range, assume we're crossing over.
		                    max - min > 4 * timeUnits.month ||
		                    // Short range, check if min and max are in different time
		                    // zones.
		                    time.getTimezoneOffset(min) !== time.getTimezoneOffset(max)
		                );
		            }

		            // Iterate and add tick positions at appropriate values
		            var t = minDate.getTime();
		            i = 1;
		            while (t < max) {
		                tickPositions.push(t);

		                // if the interval is years, use Date.UTC to increase years
		                if (interval === timeUnits.year) {
		                    t = time.makeTime(minYear + i * count, 0);

		                // if the interval is months, use Date.UTC to increase months
		                } else if (interval === timeUnits.month) {
		                    t = time.makeTime(minYear, minMonth + i * count);

		                // if we're using global time, the interval is not fixed as it
		                // jumps one hour at the DST crossover
		                } else if (
		                    variableDayLength &&
		                    (interval === timeUnits.day || interval === timeUnits.week)
		                ) {
		                    t = time.makeTime(
		                        minYear,
		                        minMonth,
		                        minDateDate +
		                            i * count * (interval === timeUnits.day ? 1 : 7)
		                    );

		                } else if (
		                    variableDayLength &&
		                    interval === timeUnits.hour &&
		                    count > 1
		                ) {
		                    // make sure higher ranks are preserved across DST (#6797,
		                    // #7621)
		                    t = time.makeTime(
		                        minYear,
		                        minMonth,
		                        minDateDate,
		                        minHours + i * count
		                    );

		                // else, the interval is fixed and we use simple addition
		                } else {
		                    t += interval * count;
		                }

		                i++;
		            }

		            // push the last time
		            tickPositions.push(t);


		            // Handle higher ranks. Mark new days if the time is on midnight
		            // (#950, #1649, #1760, #3349). Use a reasonable dropout threshold
		            // to prevent looping over dense data grouping (#6156).
		            if (interval <= timeUnits.hour && tickPositions.length < 10000) {
		                tickPositions.forEach(function (t) {
		                    if (
		                        // Speed optimization, no need to run dateFormat unless
		                        // we're on a full or half hour
		                        t % 1800000 === 0 &&
		                        // Check for local or global midnight
		                        time.dateFormat('%H%M%S%L', t) === '000000000'
		                    ) {
		                        higherRanks[t] = 'day';
		                    }
		                });
		            }
		        }


		        // record information on the chosen unit - for dynamic label formatter
		        tickPositions.info = extend(normalizedInterval, {
		            higherRanks: higherRanks,
		            totalRange: interval * count
		        });

		        return tickPositions;
		    }

		}; // end of Time


	}(Highcharts));
	(function (H) {
		/**
		 * (c) 2010-2018 Torstein Honsi
		 *
		 * License: www.highcharts.com/license
		 */

		/**
		 * Gets fired when an area of the chart has been selected. The default action
		 * for the selection event is to zoom the chart to the selected area. It can be
		 * prevented by calling `event.preventDefault()` or return false.
		 *
		 * @callback Highcharts.ChartSelectionCallbackFunction
		 *
		 * @param {global.Event} event
		 *        Event informations
		 *
		 * @return {boolean|undefined}
		 *         Return false to prevent the default action, usually zoom.
		 */

		/**
		 * @interface Highcharts.TooltipFormatterContextObject
		 *//**
		 * @name Highcharts.TooltipFormatterContextObject#color
		 * @type {Highcharts.ColorString}
		 *//**
		 * @name Highcharts.TooltipFormatterContextObject#colorIndex
		 * @type {number|undefined}
		 *//**
		 * @name Highcharts.TooltipFormatterContextObject#key
		 * @type {number}
		 *//**
		 * @name Highcharts.TooltipFormatterContextObject#percentage
		 * @type {number|undefined}
		 *//**
		 * @name Highcharts.TooltipFormatterContextObject#point
		 * @type {Highcharts.Point}
		 *//**
		 * @name Highcharts.TooltipFormatterContextObject#series
		 * @type {Highcharts.Series}
		 *//**
		 * @name Highcharts.TooltipFormatterContextObject#total
		 * @type {number|undefined}
		 *//**
		 * @name Highcharts.TooltipFormatterContextObject#x
		 * @type {number}
		 *//**
		 * @name Highcharts.TooltipFormatterContextObject#y
		 * @type {number}
		 */



		var color = H.color,
		    isTouchDevice = H.isTouchDevice,
		    merge = H.merge,
		    svg = H.svg;

		/* ****************************************************************************
		 * Handle the options                                                         *
		 *****************************************************************************/
		/**
		 * Global default settings.
		 *
		 * @name Highcharts.defaultOptions
		 * @type {Highcharts.Options}
		 *//**
		 * @optionparent
		 */
		H.defaultOptions = {

		    /**
		     * An array containing the default colors for the chart's series. When
		     * all colors are used, new colors are pulled from the start again.
		     *
		     * Default colors can also be set on a series or series.type basis,
		     * see [column.colors](#plotOptions.column.colors),
		     * [pie.colors](#plotOptions.pie.colors).
		     *
		     * In styled mode, the colors option doesn't exist. Instead, colors
		     * are defined in CSS and applied either through series or point class
		     * names, or through the [chart.colorCount](#chart.colorCount) option.
		     *
		     *
		     * ### Legacy
		     *
		     * In Highcharts 3.x, the default colors were:
		     *
		     * <pre>colors: ['#2f7ed8', '#0d233a', '#8bbc21', '#910000', '#1aadce',
		     *     '#492970', '#f28f43', '#77a1e5', '#c42525', '#a6c96a']</pre>
		     *
		     * In Highcharts 2.x, the default colors were:
		     *
		     * <pre>colors: ['#4572A7', '#AA4643', '#89A54E', '#80699B', '#3D96AE',
		     *    '#DB843D', '#92A8CD', '#A47D7C', '#B5CA92']</pre>
		     *
		     * @sample {highcharts} highcharts/chart/colors/
		     *         Assign a global color theme
		     *
		     * @type    {Array<Highcharts.ColorString>}
		     * @default ["#7cb5ec", "#434348", "#90ed7d", "#f7a35c", "#8085e9",
		     *          "#f15c80", "#e4d354", "#2b908f", "#f45b5b", "#91e8e1"]
		     */
		    colors: '#7cb5ec #434348 #90ed7d #f7a35c #8085e9 #f15c80 #e4d354 #2b908f #f45b5b #91e8e1'.split(' '),


		    /**
		     * Styled mode only. Configuration object for adding SVG definitions for
		     * reusable elements. See [gradients, shadows and
		     * patterns](https://www.highcharts.com/docs/chart-design-and-style/gradients-shadows-and-patterns)
		     * for more information and code examples.
		     *
		     * @type      {*}
		     * @since     5.0.0
		     * @apioption defs
		     */

		    /**
		     * @ignore-option
		     */
		    symbols: ['circle', 'diamond', 'square', 'triangle', 'triangle-down'],

		    /**
		     * The language object is global and it can't be set on each chart
		     * initiation. Instead, use `Highcharts.setOptions` to set it before any
		     * chart is initialized.
		     *
		     * <pre>Highcharts.setOptions({
		     *     lang: {
		     *         months: [
		     *             'Janvier', 'Février', 'Mars', 'Avril',
		     *             'Mai', 'Juin', 'Juillet', 'Août',
		     *             'Septembre', 'Octobre', 'Novembre', 'Décembre'
		     *         ],
		     *         weekdays: [
		     *             'Dimanche', 'Lundi', 'Mardi', 'Mercredi',
		     *             'Jeudi', 'Vendredi', 'Samedi'
		     *         ]
		     *     }
		     * });</pre>
		     */
		    lang: {

		        /**
		         * The loading text that appears when the chart is set into the loading
		         * state following a call to `chart.showLoading`.
		         */
		        loading: 'Loading...',

		        /**
		         * An array containing the months names. Corresponds to the `%B` format
		         * in `Highcharts.dateFormat()`.
		         *
		         * @type    {Array<string>}
		         * @default ["January", "February", "March", "April", "May", "June",
		         *          "July", "August", "September", "October", "November",
		         *          "December"]
		         */
		        months: [
		            'January', 'February', 'March', 'April', 'May', 'June', 'July',
		            'August', 'September', 'October', 'November', 'December'
		        ],

		        /**
		         * An array containing the months names in abbreviated form. Corresponds
		         * to the `%b` format in `Highcharts.dateFormat()`.
		         *
		         * @type    {Array<string>}
		         * @default ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
		         *          "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
		         */
		        shortMonths: [
		            'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul',
		            'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
		        ],

		        /**
		         * An array containing the weekday names.
		         *
		         * @type    {Array<string>}
		         * @default ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday",
		         *          "Friday", "Saturday"]
		         */
		        weekdays: [
		            'Sunday', 'Monday', 'Tuesday', 'Wednesday',
		            'Thursday', 'Friday', 'Saturday'
		        ],

		        /**
		         * Short week days, starting Sunday. If not specified, Highcharts uses
		         * the first three letters of the `lang.weekdays` option.
		         *
		         * @sample highcharts/lang/shortweekdays/
		         *         Finnish two-letter abbreviations
		         *
		         * @type      {Array<string>}
		         * @since     4.2.4
		         * @apioption lang.shortWeekdays
		         */

		        /**
		         * What to show in a date field for invalid dates. Defaults to an empty
		         * string.
		         *
		         * @type      {string}
		         * @since     4.1.8
		         * @product   highcharts highstock
		         * @apioption lang.invalidDate
		         */

		        /**
		         * The title appearing on hovering the zoom in button. The text itself
		         * defaults to "+" and can be changed in the button options.
		         *
		         * @type      {string}
		         * @default   Zoom in
		         * @product   highmaps
		         * @apioption lang.zoomIn
		         */

		        /**
		         * The title appearing on hovering the zoom out button. The text itself
		         * defaults to "-" and can be changed in the button options.
		         *
		         * @type      {string}
		         * @default   Zoom out
		         * @product   highmaps
		         * @apioption lang.zoomOut
		         */

		        /**
		         * The default decimal point used in the `Highcharts.numberFormat`
		         * method unless otherwise specified in the function arguments.
		         *
		         * @since 1.2.2
		         */
		        decimalPoint: '.',

		        /**
		         * [Metric prefixes](http://en.wikipedia.org/wiki/Metric_prefix) used
		         * to shorten high numbers in axis labels. Replacing any of the
		         * positions with `null` causes the full number to be written. Setting
		         * `numericSymbols` to `null` disables shortening altogether.
		         *
		         * @sample {highcharts} highcharts/lang/numericsymbols/
		         *         Replacing the symbols with text
		         * @sample {highstock} highcharts/lang/numericsymbols/
		         *         Replacing the symbols with text
		         *
		         * @type    {Array<string>}
		         * @default ["k", "M", "G", "T", "P", "E"]
		         * @since   2.3.0
		         */
		        numericSymbols: ['k', 'M', 'G', 'T', 'P', 'E'],

		        /**
		         * The magnitude of [numericSymbols](#lang.numericSymbol) replacements.
		         * Use 10000 for Japanese, Korean and various Chinese locales, which
		         * use symbols for 10^4, 10^8 and 10^12.
		         *
		         * @sample highcharts/lang/numericsymbolmagnitude/
		         *         10000 magnitude for Japanese
		         *
		         * @type      {number}
		         * @default   1000
		         * @since     5.0.3
		         * @apioption lang.numericSymbolMagnitude
		         */

		        /**
		         * The text for the label appearing when a chart is zoomed.
		         *
		         * @since 1.2.4
		         */
		        resetZoom: 'Reset zoom',

		        /**
		         * The tooltip title for the label appearing when a chart is zoomed.
		         *
		         * @since 1.2.4
		         */
		        resetZoomTitle: 'Reset zoom level 1:1',

		        /**
		         * The default thousands separator used in the `Highcharts.numberFormat`
		         * method unless otherwise specified in the function arguments. Defaults
		         * to a single space character, which is recommended in
		         * [ISO 31-0](https://en.wikipedia.org/wiki/ISO_31-0#Numbers) and works
		         * across Anglo-American and continental European languages.
		         *
		         * @default \u0020
		         * @since   1.2.2
		         */
		        thousandsSep: ' '
		    },

		    /**
		     * Global options that don't apply to each chart. These options, like
		     * the `lang` options, must be set using the `Highcharts.setOptions`
		     * method.
		     *
		     * <pre>Highcharts.setOptions({
		     *     global: {
		     *         useUTC: false
		     *     }
		     * });</pre>
		     *
		     */

		    /**
		     * _Canvg rendering for Android 2.x is removed as of Highcharts 5.0\.
		     * Use the [libURL](#exporting.libURL) option to configure exporting._
		     *
		     * The URL to the additional file to lazy load for Android 2.x devices.
		     * These devices don't support SVG, so we download a helper file that
		     * contains [canvg](http://code.google.com/p/canvg/), its dependency
		     * rbcolor, and our own CanVG Renderer class. To avoid hotlinking to
		     * our site, you can install canvas-tools.js on your own server and
		     * change this option accordingly.
		     *
		     * @deprecated
		     *
		     * @type      {string}
		     * @default   http://code.highcharts.com/{version}/modules/canvas-tools.js
		     * @product   highcharts highmaps
		     * @apioption global.canvasToolsURL
		     */

		    /**
		     * This option is deprecated since v6.0.5. Instead, use
		     * [time.useUTC](#time.useUTC) that supports individual time settings
		     * per chart.
		     *
		     * @deprecated
		     *
		     * @type      {boolean}
		     * @apioption global.useUTC
		     */

		    /**
		     * This option is deprecated since v6.0.5. Instead, use
		     * [time.Date](#time.Date) that supports individual time settings
		     * per chart.
		     *
		     * @deprecated
		     *
		     * @type      {Function}
		     * @product   highcharts highstock
		     * @apioption global.Date
		     */

		    /**
		     * This option is deprecated since v6.0.5. Instead, use
		     * [time.getTimezoneOffset](#time.getTimezoneOffset) that supports
		     * individual time settings per chart.
		     *
		     * @deprecated
		     *
		     * @type      {Function}
		     * @product   highcharts highstock
		     * @apioption global.getTimezoneOffset
		     */

		    /**
		     * This option is deprecated since v6.0.5. Instead, use
		     * [time.timezone](#time.timezone) that supports individual time
		     * settings per chart.
		     *
		     * @deprecated
		     *
		     * @type      {string}
		     * @product   highcharts highstock
		     * @apioption global.timezone
		     */

		    /**
		     * This option is deprecated since v6.0.5. Instead, use
		     * [time.timezoneOffset](#time.timezoneOffset) that supports individual
		     * time settings per chart.
		     *
		     * @deprecated
		     *
		     * @type      {number}
		     * @product   highcharts highstock
		     * @apioption global.timezoneOffset
		     */

		    global: {},

		    time: H.Time.prototype.defaultOptions,

		    /**
		     * General options for the chart.
		     */
		    chart: {

		        /**
		         * Default `mapData` for all series. If set to a string, it functions
		         * as an index into the `Highcharts.maps` array. Otherwise it is
		         * interpreted s map data.
		         *
		         * @see [mapData](#series.map.mapData)
		         *
		         * @type      {string|Array<*>}
		         * @since     5.0.0
		         * @product   highmaps
		         * @apioption chart.map
		         */

		        /**
		         * Set lat/lon transformation definitions for the chart. If not defined,
		         * these are extracted from the map data.
		         *
		         * @type      {*}
		         * @since     5.0.0
		         * @product   highmaps
		         * @apioption chart.mapTransforms
		         */

		        /**
		         * When using multiple axis, the ticks of two or more opposite axes
		         * will automatically be aligned by adding ticks to the axis or axes
		         * with the least ticks, as if `tickAmount` were specified.
		         *
		         * This can be prevented by setting `alignTicks` to false. If the grid
		         * lines look messy, it's a good idea to hide them for the secondary
		         * axis by setting `gridLineWidth` to 0.
		         *
		         * If `startOnTick` or `endOnTick` in an Axis options are set to false,
		         * then the `alignTicks ` will be disabled for the Axis.
		         *
		         * Disabled for logarithmic axes.
		         *
		         * @sample {highcharts} highcharts/chart/alignticks-true/
		         *         True by default
		         * @sample {highcharts} highcharts/chart/alignticks-false/
		         *         False
		         * @sample {highstock} stock/chart/alignticks-true/
		         *         True by default
		         * @sample {highstock} stock/chart/alignticks-false/
		         *         False
		         *
		         * @type      {boolean}
		         * @default   true
		         * @product   highcharts highstock gantt
		         * @apioption chart.alignTicks
		         */

		        /**
		         * Set the overall animation for all chart updating. Animation can be
		         * disabled throughout the chart by setting it to false here. It can
		         * be overridden for each individual API method as a function parameter.
		         * The only animation not affected by this option is the initial series
		         * animation, see [plotOptions.series.animation](
		         * #plotOptions.series.animation).
		         *
		         * The animation can either be set as a boolean or a configuration
		         * object. If `true`, it will use the 'swing' jQuery easing and a
		         * duration of 500 ms. If used as a configuration object, the following
		         * properties are supported:
		         *
		         * <dl>
		         *
		         * <dt>duration</dt>
		         *
		         * <dd>The duration of the animation in milliseconds.</dd>
		         *
		         * <dt>easing</dt>
		         *
		         * <dd>A string reference to an easing function set on the `Math`
		         * object. See [the easing
		         * demo](https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/series-animation-easing/).
		         * </dd>
		         *
		         * </dl>
		         *
		         * @sample {highcharts} highcharts/chart/animation-none/
		         *         Updating with no animation
		         * @sample {highcharts} highcharts/chart/animation-duration/
		         *         With a longer duration
		         * @sample {highcharts} highcharts/chart/animation-easing/
		         *         With a jQuery UI easing
		         * @sample {highmaps} maps/chart/animation-none/
		         *         Updating with no animation
		         * @sample {highmaps} maps/chart/animation-duration/
		         *         With a longer duration
		         *
		         * @type      {boolean|Highcharts.AnimationOptionsObject}
		         * @default   true
		         * @apioption chart.animation
		         */

		        /**
		         * A CSS class name to apply to the charts container `div`, allowing
		         * unique CSS styling for each chart.
		         *
		         * @type      {string}
		         * @apioption chart.className
		         */

		        /**
		         * Event listeners for the chart.
		         *
		         * @apioption chart.events
		         */

		        /**
		         * Fires when a series is added to the chart after load time, using
		         * the `addSeries` method. One parameter, `event`, is passed to the
		         * function, containing common event information.
		         * Through `event.options` you can access the series options that was
		         * passed to the `addSeries` method. Returning false prevents the series
		         * from being added.
		         *
		         * @sample {highcharts} highcharts/chart/events-addseries/
		         *         Alert on add series
		         * @sample {highstock} stock/chart/events-addseries/
		         *         Alert on add series
		         *
		         * @type      {Function}
		         * @since     1.2.0
		         * @context   Highcharts.Chart
		         * @apioption chart.events.addSeries
		         */

		        /**
		         * Fires when clicking on the plot background. One parameter, `event`,
		         * is passed to the function, containing common event information.
		         *
		         * Information on the clicked spot can be found through `event.xAxis`
		         * and `event.yAxis`, which are arrays containing the axes of each
		         * dimension and each axis' value at the clicked spot. The primary axes
		         * are `event.xAxis[0]` and `event.yAxis[0]`. Remember the unit of a
		         * datetime axis is milliseconds since 1970-01-01 00:00:00.
		         *
		         * <pre>click: function(e) {
		         *     console.log(
		         *         Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', e.xAxis[0].value),
		         *         e.yAxis[0].value
		         *     )
		         * }</pre>
		         *
		         * @sample {highcharts} highcharts/chart/events-click/
		         *         Alert coordinates on click
		         * @sample {highcharts} highcharts/chart/events-container/
		         *         Alternatively, attach event to container
		         * @sample {highstock} stock/chart/events-click/
		         *         Alert coordinates on click
		         * @sample {highstock} highcharts/chart/events-container/
		         *         Alternatively, attach event to container
		         * @sample {highmaps} maps/chart/events-click/
		         *         Record coordinates on click
		         * @sample {highmaps} highcharts/chart/events-container/
		         *         Alternatively, attach event to container
		         *
		         * @type      {Function}
		         * @since     1.2.0
		         * @context   Highcharts.Chart
		         * @apioption chart.events.click
		         */


		        /**
		         * Fires when the chart is finished loading. Since v4.2.2, it also waits
		         * for images to be loaded, for example from point markers. One
		         * parameter, `event`, is passed to the function, containing common
		         * event information.
		         *
		         * There is also a second parameter to the chart constructor where a
		         * callback function can be passed to be executed on chart.load.
		         *
		         * @sample {highcharts} highcharts/chart/events-load/
		         *         Alert on chart load
		         * @sample {highstock} stock/chart/events-load/
		         *         Alert on chart load
		         * @sample {highmaps} maps/chart/events-load/
		         *         Add series on chart load
		         *
		         * @type      {Function}
		         * @context   Highcharts.Chart
		         * @apioption chart.events.load
		         */

		        /**
		         * Fires when the chart is redrawn, either after a call to
		         * `chart.redraw()` or after an axis, series or point is modified with
		         * the `redraw` option set to true. One parameter, `event`, is passed to
		         * the function, containing common event information.
		         *
		         * @sample {highcharts} highcharts/chart/events-redraw/
		         *         Alert on chart redraw
		         * @sample {highstock} stock/chart/events-redraw/
		         *         Alert on chart redraw when adding a series or moving the
		         *         zoomed range
		         * @sample {highmaps} maps/chart/events-redraw/
		         *         Set subtitle on chart redraw
		         *
		         * @type      {Function}
		         * @since     1.2.0
		         * @context   Highcharts.Chart
		         * @apioption chart.events.redraw
		         */

		        /**
		         * Fires after initial load of the chart (directly after the `load`
		         * event), and after each redraw (directly after the `redraw` event).
		         *
		         * @type      {Function}
		         * @since     5.0.7
		         * @context   Highcharts.Chart
		         * @apioption chart.events.render
		         */

		        /**
		         * Fires when an area of the chart has been selected. Selection is
		         * enabled by setting the chart's zoomType. One parameter, `event`, is
		         * passed to the function, containing common event information. The
		         * default action for the selection event is to zoom the chart to the
		         * selected area. It can be prevented by calling
		         * `event.preventDefault()` or return false.
		         *
		         * Information on the selected area can be found through `event.xAxis`
		         * and `event.yAxis`, which are arrays containing the axes of each
		         * dimension and each axis' min and max values. The primary axes are
		         * `event.xAxis[0]` and `event.yAxis[0]`. Remember the unit of a
		         * datetime axis is milliseconds since 1970-01-01 00:00:00.
		         *
		         * <pre>selection: function(event) {
		         *     // log the min and max of the primary, datetime x-axis
		         *     console.log(
		         *         Highcharts.dateFormat(
		         *             '%Y-%m-%d %H:%M:%S',
		         *             event.xAxis[0].min
		         *         ),
		         *         Highcharts.dateFormat(
		         *             '%Y-%m-%d %H:%M:%S',
		         *             event.xAxis[0].max
		         *         )
		         *     );
		         *     // log the min and max of the y axis
		         *     console.log(event.yAxis[0].min, event.yAxis[0].max);
		         * }</pre>
		         *
		         * @sample {highcharts} highcharts/chart/events-selection/
		         *         Report on selection and reset
		         * @sample {highcharts} highcharts/chart/events-selection-points/
		         *         Select a range of points through a drag selection
		         * @sample {highstock} stock/chart/events-selection/
		         *         Report on selection and reset
		         * @sample {highstock} highcharts/chart/events-selection-points/
		         *         Select a range of points through a drag selection
		         *         (Highcharts)
		         *
		         * @type      {Highcharts.ChartSelectionCallbackFunction}
		         * @apioption chart.events.selection
		         */

		        /**
		         * The margin between the outer edge of the chart and the plot area.
		         * The numbers in the array designate top, right, bottom and left
		         * respectively. Use the options `marginTop`, `marginRight`,
		         * `marginBottom` and `marginLeft` for shorthand setting of one option.
		         *
		         * By default there is no margin. The actual space is dynamically
		         * calculated from the offset of axis labels, axis title, title,
		         * subtitle and legend in addition to the `spacingTop`, `spacingRight`,
		         * `spacingBottom` and `spacingLeft` options.
		         *
		         * @sample {highcharts} highcharts/chart/margins-zero/
		         *         Zero margins
		         * @sample {highstock} stock/chart/margin-zero/
		         *         Zero margins
		         *
		         * @type      {number|Array<number>}
		         * @apioption chart.margin
		         */

		        /**
		         * The margin between the bottom outer edge of the chart and the plot
		         * area. Use this to set a fixed pixel value for the margin as opposed
		         * to the default dynamic margin. See also `spacingBottom`.
		         *
		         * @sample {highcharts} highcharts/chart/marginbottom/
		         *         100px bottom margin
		         * @sample {highstock} stock/chart/marginbottom/
		         *         100px bottom margin
		         * @sample {highmaps} maps/chart/margin/
		         *         100px margins
		         *
		         * @type      {number}
		         * @since     2.0
		         * @apioption chart.marginBottom
		         */

		        /**
		         * The margin between the left outer edge of the chart and the plot
		         * area. Use this to set a fixed pixel value for the margin as opposed
		         * to the default dynamic margin. See also `spacingLeft`.
		         *
		         * @sample {highcharts} highcharts/chart/marginleft/
		         *         150px left margin
		         * @sample {highstock} stock/chart/marginleft/
		         *         150px left margin
		         * @sample {highmaps} maps/chart/margin/
		         *         100px margins
		         *
		         * @type      {number}
		         * @since     2.0
		         * @apioption chart.marginLeft
		         */

		        /**
		         * The margin between the right outer edge of the chart and the plot
		         * area. Use this to set a fixed pixel value for the margin as opposed
		         * to the default dynamic margin. See also `spacingRight`.
		         *
		         * @sample {highcharts} highcharts/chart/marginright/
		         *         100px right margin
		         * @sample {highstock} stock/chart/marginright/
		         *         100px right margin
		         * @sample {highmaps} maps/chart/margin/
		         *         100px margins
		         *
		         * @type      {number}
		         * @since     2.0
		         * @apioption chart.marginRight
		         */

		        /**
		         * The margin between the top outer edge of the chart and the plot area.
		         * Use this to set a fixed pixel value for the margin as opposed to
		         * the default dynamic margin. See also `spacingTop`.
		         *
		         * @sample {highcharts} highcharts/chart/margintop/ 100px top margin
		         * @sample {highstock} stock/chart/margintop/
		         *         100px top margin
		         * @sample {highmaps} maps/chart/margin/
		         *         100px margins
		         *
		         * @type      {number}
		         * @since     2.0
		         * @apioption chart.marginTop
		         */

		        /**
		         * Allows setting a key to switch between zooming and panning. Can be
		         * one of `alt`, `ctrl`, `meta` (the command key on Mac and Windows
		         * key on Windows) or `shift`. The keys are mapped directly to the key
		         * properties of the click event argument (`event.altKey`,
		         * `event.ctrlKey`, `event.metaKey` and `event.shiftKey`).
		         *
		         * @type       {string}
		         * @since      4.0.3
		         * @product    highcharts gantt
		         * @validvalue ["alt", "ctrl", "meta", "shift"]
		         * @apioption  chart.panKey
		         */

		        /**
		         * Allow panning in a chart. Best used with [panKey](#chart.panKey)
		         * to combine zooming and panning.
		         *
		         * On touch devices, when the [tooltip.followTouchMove](
		         * #tooltip.followTouchMove) option is `true` (default), panning
		         * requires two fingers. To allow panning with one finger, set
		         * `followTouchMove` to `false`.
		         *
		         * @sample {highcharts} highcharts/chart/pankey/ Zooming and panning
		         *
		         * @type      {boolean}
		         * @default   {highcharts} false
		         * @default   {highstock} true
		         * @since     4.0.3
		         * @product   highcharts highstock gantt
		         * @apioption chart.panning
		         */


		        /**
		         * Equivalent to [zoomType](#chart.zoomType), but for multitouch
		         * gestures only. By default, the `pinchType` is the same as the
		         * `zoomType` setting. However, pinching can be enabled separately in
		         * some cases, for example in stock charts where a mouse drag pans the
		         * chart, while pinching is enabled. When [tooltip.followTouchMove](
		         * #tooltip.followTouchMove) is true, pinchType only applies to
		         * two-finger touches.
		         *
		         * @type       {string}
		         * @default    {highcharts} undefined
		         * @default    {highstock} x
		         * @since      3.0
		         * @product    highcharts highstock gantt
		         * @validvalue ["x", "y", "xy"]
		         * @apioption  chart.pinchType
		         */


		        /**
		         * Whether to apply styled mode. When in styled mode, no presentational
		         * attributes or CSS are applied to the chart SVG. Instead, CSS rules
		         * are required to style the chart. The default style sheet is
		         * available from `https://code.highcharts.com/css/highcharts.css`.
		         *
		         * @type       {boolean}
		         * @default    false
		         * @since      7.0
		         * @apioption  chart.styledMode
		         */
		        styledMode: false,

		        /**
		         * The corner radius of the outer chart border.
		         *
		         * @sample {highcharts} highcharts/chart/borderradius/
		         *         20px radius
		         * @sample {highstock} stock/chart/border/
		         *         10px radius
		         * @sample {highmaps} maps/chart/border/
		         *         Border options
		         *
		         */
		        borderRadius: 0,

		        /**
		         * In styled mode, this sets how many colors the class names
		         * should rotate between. With ten colors, series (or points) are
		         * given class names like `highcharts-color-0`, `highcharts-color-0`
		         * [...] `highcharts-color-9`. The equivalent in non-styled mode
		         * is to set colors using the [colors](#colors) setting.
		         *
		         * @since      5.0.0
		         */
		        colorCount: 10,

		        /**
		         * Alias of `type`.
		         *
		         * @sample {highcharts} highcharts/chart/defaultseriestype/
		         *         Bar
		         *
		         * @deprecated
		         *
		         * @product highcharts
		         */
		        defaultSeriesType: 'line',

		        /**
		         * If true, the axes will scale to the remaining visible series once
		         * one series is hidden. If false, hiding and showing a series will
		         * not affect the axes or the other series. For stacks, once one series
		         * within the stack is hidden, the rest of the stack will close in
		         * around it even if the axis is not affected.
		         *
		         * @sample {highcharts} highcharts/chart/ignorehiddenseries-true/
		         *         True by default
		         * @sample {highcharts} highcharts/chart/ignorehiddenseries-false/
		         *         False
		         * @sample {highcharts} highcharts/chart/ignorehiddenseries-true-stacked/
		         *         True with stack
		         * @sample {highstock} stock/chart/ignorehiddenseries-true/
		         *         True by default
		         * @sample {highstock} stock/chart/ignorehiddenseries-false/
		         *         False
		         *
		         * @since   1.2.0
		         * @product highcharts highstock gantt
		         */
		        ignoreHiddenSeries: true,


		        /**
		         * Whether to invert the axes so that the x axis is vertical and y axis
		         * is horizontal. When `true`, the x axis is [reversed](#xAxis.reversed)
		         * by default.
		         *
		         * @productdesc {highcharts}
		         * If a bar series is present in the chart, it will be inverted
		         * automatically. Inverting the chart doesn't have an effect if there
		         * are no cartesian series in the chart, or if the chart is
		         * [polar](#chart.polar).
		         *
		         * @sample {highcharts} highcharts/chart/inverted/
		         *         Inverted line
		         * @sample {highstock} stock/navigator/inverted/
		         *         Inverted stock chart
		         *
		         * @type      {boolean}
		         * @default   false
		         * @product   highcharts highstock gantt
		         * @apioption chart.inverted
		         */

		        /**
		         * The distance between the outer edge of the chart and the content,
		         * like title or legend, or axis title and labels if present. The
		         * numbers in the array designate top, right, bottom and left
		         * respectively. Use the options spacingTop, spacingRight, spacingBottom
		         * and spacingLeft options for shorthand setting of one option.
		         *
		         * @type    {Array<number>}
		         * @see     [chart.margin](#chart.margin)
		         * @default [10, 10, 15, 10]
		         * @since   3.0.6
		         */
		        spacing: [10, 10, 15, 10],

		        /**
		         * The button that appears after a selection zoom, allowing the user
		         * to reset zoom.
		         */
		        resetZoomButton: {

		            /**
		             * What frame the button should be placed related to. Can be either
		             * `plot` or `chart`
		             *
		             * @sample {highcharts} highcharts/chart/resetzoombutton-relativeto/
		             *         Relative to the chart
		             * @sample {highstock} highcharts/chart/resetzoombutton-relativeto/
		             *         Relative to the chart
		             *
		             * @type       {string}
		             * @default    plot
		             * @since      2.2
		             * @validvalue ["plot", "chart"]
		             * @apioption  chart.resetZoomButton.relativeTo
		             */

		            /**
		             * A collection of attributes for the button. The object takes SVG
		             * attributes like `fill`, `stroke`, `stroke-width` or `r`, the
		             * border radius. The theme also supports `style`, a collection of
		             * CSS properties for the text. Equivalent attributes for the hover
		             * state are given in `theme.states.hover`.
		             *
		             * @sample {highcharts} highcharts/chart/resetzoombutton-theme/
		             *         Theming the button
		             * @sample {highstock} highcharts/chart/resetzoombutton-theme/
		             *         Theming the button
		             *
		             * @since 2.2
		             */
		            theme: {

		                /**
		                 * The Z index for the reset zoom button. The default value
		                 * places it below the tooltip that has Z index 7.
		                 */
		                zIndex: 6
		            },

		            /**
		             * The position of the button.
		             *
		             * @sample {highcharts} highcharts/chart/resetzoombutton-position/
		             *         Above the plot area
		             * @sample {highstock} highcharts/chart/resetzoombutton-position/
		             *         Above the plot area
		             * @sample {highmaps} highcharts/chart/resetzoombutton-position/
		             *         Above the plot area
		             *
		             * @since 2.2
		             */
		            position: {

		                /**
		                 * The horizontal alignment of the button.
		                 */
		                align: 'right',

		                /**
		                 * The horizontal offset of the button.
		                 */
		                x: -10,

		                /**
		                 * The vertical alignment of the button.
		                 *
		                 * @type       {string}
		                 * @default    top
		                 * @validvalue ["top", "middle", "bottom"]
		                 * @apioption  chart.resetZoomButton.position.verticalAlign
		                 */

		                /**
		                 * The vertical offset of the button.
		                 */
		                y: 10
		            }
		        },

		        /**
		         * The pixel width of the plot area border.
		         *
		         * @sample {highcharts} highcharts/chart/plotborderwidth/
		         *         1px border
		         * @sample {highstock} stock/chart/plotborder/
		         *         2px border
		         * @sample {highmaps} maps/chart/plotborder/
		         *         Plot border options
		         *
		         * @type      {number}
		         * @default   0
		         * @apioption chart.plotBorderWidth
		         */

		        /**
		         * Whether to apply a drop shadow to the plot area. Requires that
		         * plotBackgroundColor be set. The shadow can be an object configuration
		         * containing `color`, `offsetX`, `offsetY`, `opacity` and `width`.
		         *
		         * @sample {highcharts} highcharts/chart/plotshadow/
		         *         Plot shadow
		         * @sample {highstock} stock/chart/plotshadow/
		         *         Plot shadow
		         * @sample {highmaps} maps/chart/plotborder/
		         *         Plot border options
		         *
		         * @type      {boolean|Highcharts.CSSObject}
		         * @default   false
		         * @apioption chart.plotShadow
		         */

		        /**
		         * When true, cartesian charts like line, spline, area and column are
		         * transformed into the polar coordinate system. This produces _polar
		         * charts_, also known as _radar charts_. Requires
		         * `highcharts-more.js`.
		         *
		         * @sample {highcharts} highcharts/demo/polar/
		         *         Polar chart
		         * @sample {highcharts} highcharts/demo/polar-wind-rose/
		         *         Wind rose, stacked polar column chart
		         * @sample {highcharts} highcharts/demo/polar-spider/
		         *         Spider web chart
		         * @sample {highcharts} highcharts/parallel-coordinates/polar/
		         *         Star plot, multivariate data in a polar chart
		         *
		         * @type      {boolean}
		         * @default   false
		         * @since     2.3.0
		         * @product   highcharts
		         * @apioption chart.polar
		         */

		        /**
		         * Whether to reflow the chart to fit the width of the container div
		         * on resizing the window.
		         *
		         * @sample {highcharts} highcharts/chart/reflow-true/
		         *         True by default
		         * @sample {highcharts} highcharts/chart/reflow-false/
		         *         False
		         * @sample {highstock} stock/chart/reflow-true/
		         *         True by default
		         * @sample {highstock} stock/chart/reflow-false/
		         *         False
		         * @sample {highmaps} maps/chart/reflow-true/
		         *         True by default
		         * @sample {highmaps} maps/chart/reflow-false/
		         *         False
		         *
		         * @type      {boolean}
		         * @default   true
		         * @since     2.1
		         * @apioption chart.reflow
		         */

		        /**
		         * The HTML element where the chart will be rendered. If it is a string,
		         * the element by that id is used. The HTML element can also be passed
		         * by direct reference, or as the first argument of the chart
		         * constructor, in which case the option is not needed.
		         *
		         * @sample {highcharts} highcharts/chart/reflow-true/
		         *         String
		         * @sample {highcharts} highcharts/chart/renderto-object/
		         *         Object reference
		         * @sample {highcharts} highcharts/chart/renderto-jquery/
		         *         Object reference through jQuery
		         * @sample {highstock} stock/chart/renderto-string/
		         *         String
		         * @sample {highstock} stock/chart/renderto-object/
		         *         Object reference
		         * @sample {highstock} stock/chart/renderto-jquery/
		         *         Object reference through jQuery
		         *
		         * @type      {string|Highcharts.HTMLDOMElement}
		         * @apioption chart.renderTo
		         */

		        /**
		         * The background color of the marker square when selecting (zooming
		         * in on) an area of the chart.
		         *
		         * @see In styled mode, the selection marker fill is set with the
		         *      `.highcharts-selection-marker` class.
		         *
		         * @type      {Highcharts.ColorString}
		         * @default   rgba(51,92,173,0.25)
		         * @since     2.1.7
		         * @apioption chart.selectionMarkerFill
		         */

		        /**
		         * Whether to apply a drop shadow to the outer chart area. Requires
		         * that backgroundColor be set. The shadow can be an object
		         * configuration containing `color`, `offsetX`, `offsetY`, `opacity` and
		         * `width`.
		         *
		         * @sample {highcharts} highcharts/chart/shadow/
		         *         Shadow
		         * @sample {highstock} stock/chart/shadow/
		         *         Shadow
		         * @sample {highmaps} maps/chart/border/
		         *         Chart border and shadow
		         *
		         * @type      {boolean|Highcharts.CSSObject}
		         * @default   false
		         * @apioption chart.shadow
		         */

		        /**
		         * Whether to show the axes initially. This only applies to empty charts
		         * where series are added dynamically, as axes are automatically added
		         * to cartesian series.
		         *
		         * @sample {highcharts} highcharts/chart/showaxes-false/
		         *         False by default
		         * @sample {highcharts} highcharts/chart/showaxes-true/
		         *         True
		         *
		         * @type      {boolean}
		         * @since     1.2.5
		         * @product   highcharts gantt
		         * @apioption chart.showAxes
		         */

		        /**
		         * The space between the bottom edge of the chart and the content (plot
		         * area, axis title and labels, title, subtitle or legend in top
		         * position).
		         *
		         * @sample {highcharts} highcharts/chart/spacingbottom/
		         *         Spacing bottom set to 100
		         * @sample {highstock} stock/chart/spacingbottom/
		         *         Spacing bottom set to 100
		         * @sample {highmaps} maps/chart/spacing/
		         *         Spacing 100 all around
		         *
		         * @type      {number}
		         * @default   15
		         * @since     2.1
		         * @apioption chart.spacingBottom
		         */

		        /**
		         * The space between the left edge of the chart and the content (plot
		         * area, axis title and labels, title, subtitle or legend in top
		         * position).
		         *
		         * @sample {highcharts} highcharts/chart/spacingleft/
		         *         Spacing left set to 100
		         * @sample {highstock} stock/chart/spacingleft/
		         *         Spacing left set to 100
		         * @sample {highmaps} maps/chart/spacing/
		         *         Spacing 100 all around
		         *
		         * @type      {number}
		         * @default   10
		         * @since     2.1
		         * @apioption chart.spacingLeft
		         */

		        /**
		         * The space between the right edge of the chart and the content (plot
		         * area, axis title and labels, title, subtitle or legend in top
		         * position).
		         *
		         * @sample {highcharts} highcharts/chart/spacingright-100/
		         *         Spacing set to 100
		         * @sample {highcharts} highcharts/chart/spacingright-legend/
		         *         Legend in right position with default spacing
		         * @sample {highstock} stock/chart/spacingright/
		         *         Spacing set to 100
		         * @sample {highmaps} maps/chart/spacing/
		         *         Spacing 100 all around
		         *
		         * @type      {number}
		         * @default   10
		         * @since     2.1
		         * @apioption chart.spacingRight
		         */

		        /**
		         * The space between the top edge of the chart and the content (plot
		         * area, axis title and labels, title, subtitle or legend in top
		         * position).
		         *
		         * @sample {highcharts} highcharts/chart/spacingtop-100/
		         *         A top spacing of 100
		         * @sample {highcharts} highcharts/chart/spacingtop-10/
		         *         Floating chart title makes the plot area align to the default
		         *         spacingTop of 10.
		         * @sample {highstock} stock/chart/spacingtop/
		         *         A top spacing of 100
		         * @sample {highmaps} maps/chart/spacing/
		         *         Spacing 100 all around
		         *
		         * @type      {number}
		         * @default   10
		         * @since     2.1
		         * @apioption chart.spacingTop
		         */

		        /**
		         * Additional CSS styles to apply inline to the container `div`. Note
		         * that since the default font styles are applied in the renderer, it
		         * is ignorant of the individual chart options and must be set globally.
		         *
		         * @see    In styled mode, general chart styles can be set with the
		         *         `.highcharts-root` class.
		         * @sample {highcharts} highcharts/chart/style-serif-font/
		         *         Using a serif type font
		         * @sample {highcharts} highcharts/css/em/
		         *         Styled mode with relative font sizes
		         * @sample {highstock} stock/chart/style/
		         *         Using a serif type font
		         * @sample {highmaps} maps/chart/style-serif-font/
		         *         Using a serif type font
		         *
		         * @type      {Highcharts.CSSObject}
		         * @default   {"fontFamily": "\"Lucida Grande\", \"Lucida Sans Unicode\", Verdana, Arial, Helvetica, sans-serif","fontSize":"12px"}
		         * @apioption chart.style
		         */

		        /**
		         * The default series type for the chart. Can be any of the chart types
		         * listed under [plotOptions](#plotOptions).
		         *
		         * @sample {highcharts} highcharts/chart/type-bar/
		         *         Bar
		         * @sample {highstock} stock/chart/type/
		         *         Areaspline
		         * @sample {highmaps} maps/chart/type-mapline/
		         *         Mapline
		         *
		         * @type       {string}
		         * @default    {highcharts} line
		         * @default    {highstock} line
		         * @default    {highmaps} map
		         * @since      2.1.0
		         * @validvalue ["line", "spline", "column", "bar", "area", "areaspline",
		         *             "pie", "arearange", "areasplinerange", "boxplot",
		         *             "bubble", "columnrange", "errorbar", "funnel", "gauge",
		         *             "heatmap", "polygon", "pyramid", "scatter", "solidgauge",
		         *             "treemap", "waterfall"]
		         * @apioption  chart.type
		         */

		        /**
		         * Decides in what dimensions the user can zoom by dragging the mouse.
		         * Can be one of `x`, `y` or `xy`.
		         *
		         * @see [panKey](#chart.panKey)
		         *
		         * @sample {highcharts} highcharts/chart/zoomtype-none/
		         *         None by default
		         * @sample {highcharts} highcharts/chart/zoomtype-x/
		         *         X
		         * @sample {highcharts} highcharts/chart/zoomtype-y/
		         *         Y
		         * @sample {highcharts} highcharts/chart/zoomtype-xy/
		         *         Xy
		         * @sample {highstock} stock/demo/basic-line/
		         *         None by default
		         * @sample {highstock} stock/chart/zoomtype-x/
		         *         X
		         * @sample {highstock} stock/chart/zoomtype-y/
		         *         Y
		         * @sample {highstock} stock/chart/zoomtype-xy/
		         *         Xy
		         *
		         * @type       {string}
		         * @product    highcharts highstock gantt
		         * @validvalue ["x", "y", "xy"]
		         * @apioption  chart.zoomType
		         */

		        /**
		         * An explicit width for the chart. By default (when `null`) the width
		         * is calculated from the offset width of the containing element.
		         *
		         * @sample {highcharts} highcharts/chart/width/
		         *         800px wide
		         * @sample {highstock} stock/chart/width/
		         *         800px wide
		         * @sample {highmaps} maps/chart/size/
		         *         Chart with explicit size
		         *
		         * @type {number|null}
		         */
		        width: null,

		        /**
		         * An explicit height for the chart. If a _number_, the height is
		         * given in pixels. If given a _percentage string_ (for example
		         * `'56%'`), the height is given as the percentage of the actual chart
		         * width. This allows for preserving the aspect ratio across responsive
		         * sizes.
		         *
		         * By default (when `null`) the height is calculated from the offset
		         * height of the containing element, or 400 pixels if the containing
		         * element's height is 0.
		         *
		         * @sample {highcharts} highcharts/chart/height/
		         *         500px height
		         * @sample {highstock} stock/chart/height/
		         *         300px height
		         * @sample {highmaps} maps/chart/size/
		         *         Chart with explicit size
		         * @sample highcharts/chart/height-percent/
		         *         Highcharts with percentage height
		         *
		         * @type {number|string|null}
		         */
		        height: null,

		        /**
		         * The color of the outer chart border.
		         *
		         * @see In styled mode, the stroke is set with the
		         *      `.highcharts-background` class.
		         *
		         * @sample {highcharts} highcharts/chart/bordercolor/
		         *         Brown border
		         * @sample {highstock} stock/chart/border/
		         *         Brown border
		         * @sample {highmaps} maps/chart/border/
		         *         Border options
		         *
		         * @type {Highcharts.ColorString}
		         */
		        borderColor: '#335cad',

		        /**
		         * The pixel width of the outer chart border.
		         *
		         * @see In styled mode, the stroke is set with the
		         *      `.highcharts-background` class.
		         *
		         * @sample {highcharts} highcharts/chart/borderwidth/
		         *         5px border
		         * @sample {highstock} stock/chart/border/
		         *         2px border
		         * @sample {highmaps} maps/chart/border/
		         *         Border options
		         *
		         * @type      {number}
		         * @default   0
		         * @apioption chart.borderWidth
		         */

		        /**
		         * The background color or gradient for the outer chart area.
		         *
		         * @see In styled mode, the background is set with the
		         *      `.highcharts-background` class.
		         *
		         * @sample {highcharts} highcharts/chart/backgroundcolor-color/
		         *         Color
		         * @sample {highcharts} highcharts/chart/backgroundcolor-gradient/
		         *         Gradient
		         * @sample {highstock} stock/chart/backgroundcolor-color/
		         *         Color
		         * @sample {highstock} stock/chart/backgroundcolor-gradient/
		         *         Gradient
		         * @sample {highmaps} maps/chart/backgroundcolor-color/
		         *         Color
		         * @sample {highmaps} maps/chart/backgroundcolor-gradient/
		         *         Gradient
		         *
		         * @type {Highcharts.ColorString}
		         */
		        backgroundColor: '#ffffff',

		        /**
		         * The background color or gradient for the plot area.
		         *
		         * @see In styled mode, the plot background is set with the
		         *      `.highcharts-plot-background` class.
		         *
		         * @sample {highcharts} highcharts/chart/plotbackgroundcolor-color/
		         *         Color
		         * @sample {highcharts} highcharts/chart/plotbackgroundcolor-gradient/
		         *         Gradient
		         * @sample {highstock} stock/chart/plotbackgroundcolor-color/
		         *         Color
		         * @sample {highstock} stock/chart/plotbackgroundcolor-gradient/
		         *         Gradient
		         * @sample {highmaps} maps/chart/plotbackgroundcolor-color/
		         *         Color
		         * @sample {highmaps} maps/chart/plotbackgroundcolor-gradient/
		         *         Gradient
		         *
		         * @type      {Highcharts.ColorString}
		         * @apioption chart.plotBackgroundColor
		         */

		        /**
		         * The URL for an image to use as the plot background. To set an image
		         * as the background for the entire chart, set a CSS background image
		         * to the container element. Note that for the image to be applied to
		         * exported charts, its URL needs to be accessible by the export server.
		         *
		         * @see In styled mode, a plot background image can be set with the
		         *      `.highcharts-plot-background` class and a [custom pattern](
		         *      https://www.highcharts.com/docs/chart-design-and-style/
		         *      gradients-shadows-and-patterns).
		         *
		         * @sample {highcharts} highcharts/chart/plotbackgroundimage/
		         *         Skies
		         * @sample {highstock} stock/chart/plotbackgroundimage/
		         *         Skies
		         *
		         * @type      {string}
		         * @apioption chart.plotBackgroundImage
		         */

		        /**
		         * The color of the inner chart or plot area border.
		         *
		         * @see In styled mode, a plot border stroke can be set with the
		         *      `.highcharts-plot-border` class.
		         *
		         * @sample {highcharts} highcharts/chart/plotbordercolor/
		         *         Blue border
		         * @sample {highstock} stock/chart/plotborder/
		         *         Blue border
		         * @sample {highmaps} maps/chart/plotborder/
		         *         Plot border options
		         *
		         * @type {Highcharts.ColorString}
		         */
		        plotBorderColor: '#cccccc'

		    },

		    /**
		     * The chart's main title.
		     *
		     * @sample {highmaps} maps/title/title/
		     *         Title options demonstrated
		     */
		    title: {

		        /**
		         * When the title is floating, the plot area will not move to make space
		         * for it.
		         *
		         * @sample {highcharts} highcharts/chart/zoomtype-none/
		         *         False by default
		         * @sample {highcharts} highcharts/title/floating/
		         *         True - title on top of the plot area
		         * @sample {highstock} stock/chart/title-floating/
		         *         True - title on top of the plot area
		         *
		         * @type      {boolean}
		         * @default   false
		         * @since     2.1
		         * @apioption title.floating
		         */

		        /**
		         * CSS styles for the title. Use this for font styling, but use `align`,
		         * `x` and `y` for text alignment.
		         *
		         * In styled mode, the title style is given in the `.highcharts-title`
		         * class.
		         *
		         * @sample {highcharts} highcharts/title/style/
		         *         Custom color and weight
		         * @sample {highstock} stock/chart/title-style/
		         *         Custom color and weight
		         * @sample highcharts/css/titles/
		         *         Styled mode
		         *
		         * @type      {Highcharts.CSSObject}
		         * @default   {highcharts|highmaps} { "color": "#333333", "fontSize": "18px" }
		         * @default   {highstock} { "color": "#333333", "fontSize": "16px" }
		         * @apioption title.style
		         */

		        /**
		         * Whether to
		         * [use HTML](https://www.highcharts.com/docs/chart-concepts/labels-and-string-formatting#html)
		         * to render the text.
		         *
		         * @type      {boolean}
		         * @default   false
		         * @apioption title.useHTML
		         */

		        /**
		         * The vertical alignment of the title. Can be one of `"top"`,
		         * `"middle"` and `"bottom"`. When a value is given, the title behaves
		         * as if [floating](#title.floating) were `true`.
		         *
		         * @sample {highcharts} highcharts/title/verticalalign/
		         *         Chart title in bottom right corner
		         * @sample {highstock} stock/chart/title-verticalalign/
		         *         Chart title in bottom right corner
		         *
		         * @type       {string}
		         * @since      2.1
		         * @validvalue ["top", "middle", "bottom"]
		         * @apioption  title.verticalAlign
		         */

		        /**
		         * The x position of the title relative to the alignment within
		         * `chart.spacingLeft` and `chart.spacingRight`.
		         *
		         * @sample {highcharts} highcharts/title/align/
		         *         Aligned to the plot area (x = 70px = margin left - spacing
		         *         left)
		         * @sample {highstock} stock/chart/title-align/
		         *         Aligned to the plot area (x = 50px = margin left - spacing
		         *         left)
		         *
		         * @type      {number}
		         * @default   0
		         * @since     2.0
		         * @apioption title.x
		         */

		        /**
		         * The y position of the title relative to the alignment within
		         * [chart.spacingTop](#chart.spacingTop) and [chart.spacingBottom](
		         * #chart.spacingBottom). By default it depends on the font size.
		         *
		         * @sample {highcharts} highcharts/title/y/
		         *         Title inside the plot area
		         * @sample {highstock} stock/chart/title-verticalalign/
		         *         Chart title in bottom right corner
		         *
		         * @type      {number}
		         * @since     2.0
		         * @apioption title.y
		         */

		        /**
		         * The title of the chart. To disable the title, set the `text` to
		         * `undefined`.
		         *
		         * @sample {highcharts} highcharts/title/text/
		         *         Custom title
		         * @sample {highstock} stock/chart/title-text/
		         *         Custom title
		         *
		         * @default {highcharts|highmaps} Chart title
		         * @default {highstock} undefined
		         */
		        text: 'Chart title',

		        /**
		         * The horizontal alignment of the title. Can be one of "left", "center"
		         * and "right".
		         *
		         * @sample {highcharts} highcharts/title/align/
		         *         Aligned to the plot area (x = 70px = margin left - spacing
		         *         left)
		         * @sample {highstock} stock/chart/title-align/
		         *         Aligned to the plot area (x = 50px = margin left - spacing
		         *         left)
		         *
		         * @since      2.0
		         * @validvalue ["left", "center", "right"]
		         */
		        align: 'center',

		        /**
		         * The margin between the title and the plot area, or if a subtitle
		         * is present, the margin between the subtitle and the plot area.
		         *
		         * @sample {highcharts} highcharts/title/margin-50/
		         *         A chart title margin of 50
		         * @sample {highcharts} highcharts/title/margin-subtitle/
		         *         The same margin applied with a subtitle
		         * @sample {highstock} stock/chart/title-margin/
		         *         A chart title margin of 50
		         *
		         * @since 2.1
		         */
		        margin: 15,

		        /**
		         * Adjustment made to the title width, normally to reserve space for
		         * the exporting burger menu.
		         *
		         * @sample highcharts/title/widthadjust/
		         *         Wider menu, greater padding
		         *
		         * @since 4.2.5
		         */
		        widthAdjust: -44

		    },

		    /**
		     * The chart's subtitle. This can be used both to display a subtitle below
		     * the main title, and to display random text anywhere in the chart. The
		     * subtitle can be updated after chart initialization through the
		     * `Chart.setTitle` method.
		     *
		     * @sample {highmaps} maps/title/subtitle/
		     *         Subtitle options demonstrated
		     */
		    subtitle: {

		        /**
		         * When the subtitle is floating, the plot area will not move to make
		         * space for it.
		         *
		         * @sample {highcharts} highcharts/subtitle/floating/
		         *         Floating title and subtitle
		         * @sample {highstock} stock/chart/subtitle-footnote
		         *         Footnote floating at bottom right of plot area
		         *
		         * @type      {boolean}
		         * @default   false
		         * @since     2.1
		         * @apioption subtitle.floating
		         */

		        /**
		         * CSS styles for the title.
		         *
		         * In styled mode, the subtitle style is given in the
		         * `.highcharts-subtitle` class.
		         *
		         * @sample {highcharts} highcharts/subtitle/style/
		         *         Custom color and weight
		         * @sample {highcharts} highcharts/css/titles/
		         *         Styled mode
		         * @sample {highstock} stock/chart/subtitle-style
		         *         Custom color and weight
		         * @sample {highstock} highcharts/css/titles/
		         *         Styled mode
		         * @sample {highmaps} highcharts/css/titles/
		         *         Styled mode
		         *
		         * @type      {Highcharts.CSSObject}
		         * @default   {"color": "#666666"}
		         * @apioption subtitle.style
		         */

		        /**
		         * Whether to
		         * [use HTML](https://www.highcharts.com/docs/chart-concepts/labels-and-string-formatting#html)
		         * to render the text.
		         *
		         * @type      {boolean}
		         * @default   false
		         * @apioption subtitle.useHTML
		         */

		        /**
		         * The vertical alignment of the title. Can be one of "top", "middle"
		         * and "bottom". When a value is given, the title behaves as floating.
		         *
		         * @sample {highcharts} highcharts/subtitle/verticalalign/
		         *         Footnote at the bottom right of plot area
		         * @sample {highstock} stock/chart/subtitle-footnote
		         *         Footnote at the bottom right of plot area
		         *
		         * @type       {string}
		         * @since      2.1
		         * @validvalue ["top", "middle", "bottom"]
		         * @apioption  subtitle.verticalAlign
		         */

		        /**
		         * The x position of the subtitle relative to the alignment within
		         * `chart.spacingLeft` and `chart.spacingRight`.
		         *
		         * @sample {highcharts} highcharts/subtitle/align/
		         *         Footnote at right of plot area
		         * @sample {highstock} stock/chart/subtitle-footnote
		         *         Footnote at the bottom right of plot area
		         *
		         * @type      {number}
		         * @default   0
		         * @since     2.0
		         * @apioption subtitle.x
		         */

		        /**
		         * The y position of the subtitle relative to the alignment within
		         * `chart.spacingTop` and `chart.spacingBottom`. By default the subtitle
		         * is laid out below the title unless the title is floating.
		         *
		         * @sample {highcharts} highcharts/subtitle/verticalalign/
		         *         Footnote at the bottom right of plot area
		         * @sample {highstock} stock/chart/subtitle-footnote
		         *         Footnote at the bottom right of plot area
		         *
		         * @type      {number}
		         * @since     2.0
		         * @apioption subtitle.y
		         */

		        /**
		         * The subtitle of the chart.
		         *
		         * @sample {highcharts|highstock} highcharts/subtitle/text/
		         *         Custom subtitle
		         * @sample {highcharts|highstock} highcharts/subtitle/text-formatted/
		         *         Formatted and linked text.
		         */
		        text: '',

		        /**
		         * The horizontal alignment of the subtitle. Can be one of "left",
		         *  "center" and "right".
		         *
		         * @sample {highcharts} highcharts/subtitle/align/
		         *         Footnote at right of plot area
		         * @sample {highstock} stock/chart/subtitle-footnote
		         *         Footnote at bottom right of plot area
		         *
		         * @since      2.0
		         * @validvalue ["left", "center", "right"]
		         */
		        align: 'center',

		        /**
		         * Adjustment made to the subtitle width, normally to reserve space
		         * for the exporting burger menu.
		         *
		         * @see [title.widthAdjust](#title.widthAdjust)
		         *
		         * @sample highcharts/title/widthadjust/
		         *         Wider menu, greater padding
		         *
		         * @since 4.2.5
		         */
		        widthAdjust: -44
		    },

		    /**
		     * The plotOptions is a wrapper object for config objects for each series
		     * type. The config objects for each series can also be overridden for
		     * each series item as given in the series array.
		     *
		     * Configuration options for the series are given in three levels. Options
		     * for all series in a chart are given in the [plotOptions.series](
		     * #plotOptions.series) object. Then options for all series of a specific
		     * type are given in the plotOptions of that type, for example
		     * `plotOptions.line`. Next, options for one single series are given in
		     * [the series array](#series).
		     */
		    plotOptions: {},

		    /**
		     * HTML labels that can be positioned anywhere in the chart area.
		     */
		    labels: {

		        /**
		         * An HTML label that can be positioned anywhere in the chart area.
		         *
		         * @type      {Array<*>}
		         * @apioption labels.items
		         */

		        /**
		         * Inner HTML or text for the label.
		         *
		         * @type      {string}
		         * @apioption labels.items.html
		         */

		        /**
		         * CSS styles for each label. To position the label, use left and top
		         * like this:
		         *
		         * <pre>style: {
		         *     left: '100px',
		         *     top: '100px'
		         * }</pre>
		         *
		         * @type      {Highcharts.CSSObject}
		         * @apioption labels.items.style
		         */

		        /**
		         * Shared CSS styles for all labels.
		         *
		         * @type    {Highcharts.CSSObject}
		         * @default {"color": "#333333", "position": "absolute"}
		         */
		        style: {
		            /**
		             * @ignore
		             */
		            position: 'absolute',
		            /**
		             * @ignore
		             */
		            color: '#333333'
		        }
		    },

		    /**
		     * The legend is a box containing a symbol and name for each series
		     * item or point item in the chart. Each series (or points in case
		     * of pie charts) is represented by a symbol and its name in the legend.
		     *
		     * It is possible to override the symbol creator function and create
		     * [custom legend symbols](https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/studies/legend-custom-symbol/).
		     *
		     * @productdesc {highmaps}
		     * A Highmaps legend by default contains one legend item per series, but if
		     * a `colorAxis` is defined, the axis will be displayed in the legend.
		     * Either as a gradient, or as multiple legend items for `dataClasses`.
		     */
		    legend: {

		        /**
		         * The background color of the legend.
		         *
		         * @see In styled mode, the legend background fill can be applied with
		         *      the `.highcharts-legend-box` class.
		         *
		         * @sample {highcharts} highcharts/legend/backgroundcolor/
		         *         Yellowish background
		         * @sample {highstock} stock/legend/align/
		         *         Various legend options
		         * @sample {highmaps} maps/legend/border-background/
		         *         Border and background options
		         *
		         * @type      {Highcharts.ColorString}
		         * @apioption legend.backgroundColor
		         */

		        /**
		         * The width of the drawn border around the legend.
		         *
		         * @see In styled mode, the legend border stroke width can be applied
		         *      with the `.highcharts-legend-box` class.
		         *
		         * @sample {highcharts} highcharts/legend/borderwidth/
		         *         2px border width
		         * @sample {highstock} stock/legend/align/
		         *         Various legend options
		         * @sample {highmaps} maps/legend/border-background/
		         *         Border and background options
		         *
		         * @type      {number}
		         * @default   0
		         * @apioption legend.borderWidth
		         */

		        /**
		         * Enable or disable the legend. There is also a series-specific option,
		         * [showInLegend](#plotOptions.series.showInLegend), that can hide the
		         * series from the legend. In some series types this is `false` by
		         * default, so it must set to `true` in order to show the legend for the
		         * series.
		         *
		         * @sample {highcharts} highcharts/legend/enabled-false/ Legend disabled
		         * @sample {highstock} stock/legend/align/ Various legend options
		         * @sample {highmaps} maps/legend/enabled-false/ Legend disabled
		         *
		         * @default {highstock} false
		         * @default {highmaps} true
		         * @default {gantt} false
		         */
		        enabled: true,

		        /**
		         * The horizontal alignment of the legend box within the chart area.
		         * Valid values are `left`, `center` and `right`.
		         *
		         * In the case that the legend is aligned in a corner position, the
		         * `layout` option will determine whether to place it above/below
		         * or on the side of the plot area.
		         *
		         * @sample {highcharts} highcharts/legend/align/
		         *         Legend at the right of the chart
		         * @sample {highstock} stock/legend/align/
		         *         Various legend options
		         * @sample {highmaps} maps/legend/alignment/
		         *         Legend alignment
		         *
		         * @since      2.0
		         * @validvalue ["left", "center", "right"]
		         */
		        align: 'center',

		        /**
		         * If the [layout](legend.layout) is `horizontal` and the legend items
		         * span over two lines or more, whether to align the items into vertical
		         * columns. Setting this to `false` makes room for more items, but will
		         * look more messy.
		         *
		         * @since 6.1.0
		         */
		        alignColumns: true,

		        /**
		         * When the legend is floating, the plot area ignores it and is allowed
		         * to be placed below it.
		         *
		         * @sample {highcharts} highcharts/legend/floating-false/
		         *         False by default
		         * @sample {highcharts} highcharts/legend/floating-true/
		         *         True
		         * @sample {highmaps} maps/legend/alignment/
		         *         Floating legend
		         *
		         * @type      {boolean}
		         * @default   false
		         * @since     2.1
		         * @apioption legend.floating
		         */

		        /**
		         * The layout of the legend items. Can be one of `horizontal` or
		         * `vertical` or `proximate`. When `proximate`, the legend items will be
		         * placed as close as possible to the graphs they're representing,
		         * except in inverted charts or when the legend position doesn't allow
		         * it.
		         *
		         * @sample {highcharts} highcharts/legend/layout-horizontal/
		         *         Horizontal by default
		         * @sample {highcharts} highcharts/legend/layout-vertical/
		         *         Vertical
		         * @sample highcharts/legend/layout-proximate
		         *         Labels proximate to the data
		         * @sample {highstock} stock/legend/layout-horizontal/
		         *         Horizontal by default
		         * @sample {highmaps} maps/legend/padding-itemmargin/
		         *         Vertical with data classes
		         * @sample {highmaps} maps/legend/layout-vertical/
		         *         Vertical with color axis gradient
		         *
		         * @validvalue ["horizontal", "vertical", "proximate"]
		         */
		        layout: 'horizontal',

		        /**
		         * In a legend with horizontal layout, the itemDistance defines the
		         * pixel distance between each item.
		         *
		         * @sample {highcharts} highcharts/legend/layout-horizontal/
		         *         50px item distance
		         * @sample {highstock} highcharts/legend/layout-horizontal/
		         *         50px item distance
		         *
		         * @type      {number}
		         * @default   {highcharts} 20
		         * @default   {highstock} 20
		         * @default   {highmaps} 8
		         * @since     3.0.3
		         * @apioption legend.itemDistance
		         */

		        /**
		         * The pixel bottom margin for each legend item.
		         *
		         * @sample {highcharts|highstock} highcharts/legend/padding-itemmargin/
		         *         Padding and item margins demonstrated
		         * @sample {highmaps} maps/legend/padding-itemmargin/
		         *         Padding and item margins demonstrated
		         *
		         * @type      {number}
		         * @default   0
		         * @since     2.2.0
		         * @apioption legend.itemMarginBottom
		         */

		        /**
		         * The pixel top margin for each legend item.
		         *
		         * @sample {highcharts|highstock} highcharts/legend/padding-itemmargin/
		         *         Padding and item margins demonstrated
		         * @sample {highmaps} maps/legend/padding-itemmargin/
		         *         Padding and item margins demonstrated
		         *
		         * @type      {number}
		         * @default   0
		         * @since     2.2.0
		         * @apioption legend.itemMarginTop
		         */

		        /**
		         * The width for each legend item. By default the items are laid out
		         * successively. In a [horizontal layout](legend.layout), if the items
		         * are laid out across two rows or more, they will be vertically aligned
		         * depending on the [legend.alignColumns](legend.alignColumns) option.
		         *
		         * @sample {highcharts} highcharts/legend/itemwidth-default/
		         *         Undefined by default
		         * @sample {highcharts} highcharts/legend/itemwidth-80/
		         *         80 for aligned legend items
		         *
		         * @type      {number}
		         * @since     2.0
		         * @apioption legend.itemWidth
		         */

		        /**
		         * A [format string](https://www.highcharts.com/docs/chart-concepts/labels-and-string-formatting)
		         * for each legend label. Available variables relates to properties on
		         * the series, or the point in case of pies.
		         *
		         * @type      {string}
		         * @default   {name}
		         * @since     1.3
		         * @apioption legend.labelFormat
		         */

		        /**
		         * Callback function to format each of the series' labels. The `this`
		         * keyword refers to the series object, or the point object in case
		         * of pie charts. By default the series or point name is printed.
		         *
		         * @productdesc {highmaps}
		         * In Highmaps the context can also be a data class in case of a
		         * `colorAxis`.
		         *
		         * @sample {highcharts} highcharts/legend/labelformatter/
		         *         Add text
		         * @sample {highmaps} maps/legend/labelformatter/
		         *         Data classes with label formatter
		         *
		         * @context {Highcharts.Series|Highcharts.Point}
		         */
		        labelFormatter: function () {
		            return this.name;
		        },

		        /**
		         * Line height for the legend items. Deprecated as of 2.1\. Instead,
		         * the line height for each item can be set using itemStyle.lineHeight,
		         * and the padding between items using `itemMarginTop` and
		         * `itemMarginBottom`.
		         *
		         * @sample {highcharts} highcharts/legend/lineheight/
		         *         Setting padding
		         *
		         * @deprecated
		         *
		         * @type      {number}
		         * @default   16
		         * @since     2.0
		         * @product   highcharts gantt
		         * @apioption legend.lineHeight
		         */

		        /**
		         * If the plot area sized is calculated automatically and the legend
		         * is not floating, the legend margin is the space between the legend
		         * and the axis labels or plot area.
		         *
		         * @sample {highcharts} highcharts/legend/margin-default/
		         *         12 pixels by default
		         * @sample {highcharts} highcharts/legend/margin-30/
		         *         30 pixels
		         *
		         * @type      {number}
		         * @default   12
		         * @since     2.1
		         * @apioption legend.margin
		         */

		        /**
		         * Maximum pixel height for the legend. When the maximum height is
		         * extended, navigation will show.
		         *
		         * @type      {number}
		         * @since     2.3.0
		         * @apioption legend.maxHeight
		         */

		        /**
		         * The color of the drawn border around the legend.
		         *
		         * @see In styled mode, the legend border stroke can be applied with the
		         *      `.highcharts-legend-box` class.
		         *
		         * @sample {highcharts} highcharts/legend/bordercolor/
		         *         Brown border
		         * @sample {highstock} stock/legend/align/
		         *         Various legend options
		         * @sample {highmaps} maps/legend/border-background/
		         *         Border and background options
		         *
		         * @type {Highcharts.ColorString}
		         */
		        borderColor: '#999999',

		        /**
		         * The border corner radius of the legend.
		         *
		         * @sample {highcharts} highcharts/legend/borderradius-default/
		         *         Square by default
		         * @sample {highcharts} highcharts/legend/borderradius-round/
		         *         5px rounded
		         * @sample {highmaps} maps/legend/border-background/
		         *         Border and background options
		         */
		        borderRadius: 0,

		        /**
		         * Options for the paging or navigation appearing when the legend
		         * is overflown. Navigation works well on screen, but not in static
		         * exported images. One way of working around that is to
		         * [increase the chart height in
		         * export](https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/legend/navigation-enabled-false/).
		         */
		        navigation: {

		            /**
		             * How to animate the pages when navigating up or down. A value of
		             * `true` applies the default navigation given in the
		             * `chart.animation` option. Additional options can be given as an
		             * object containing values for easing and duration.
		             *
		             * @sample {highcharts} highcharts/legend/navigation/
		             *         Legend page navigation demonstrated
		             * @sample {highstock} highcharts/legend/navigation/
		             *         Legend page navigation demonstrated
		             *
		             * @type      {boolean|Highcharts.AnimationOptionsObject}
		             * @default   true
		             * @since     2.2.4
		             * @apioption legend.navigation.animation
		             */

		            /**
		             * The pixel size of the up and down arrows in the legend paging
		             * navigation.
		             *
		             * @sample {highcharts} highcharts/legend/navigation/
		             *         Legend page navigation demonstrated
		             * @sample {highstock} highcharts/legend/navigation/
		             *         Legend page navigation demonstrated
		             *
		             * @type      {number}
		             * @default   12
		             * @since     2.2.4
		             * @apioption legend.navigation.arrowSize
		             */

		            /**
		             * Whether to enable the legend navigation. In most cases, disabling
		             * the navigation results in an unwanted overflow.
		             *
		             * See also the [adapt chart to legend](
		             * https://www.highcharts.com/products/plugin-registry/single/8/Adapt-Chart-To-Legend)
		             * plugin for a solution to extend the chart height to make room for
		             * the legend, optionally in exported charts only.
		             *
		             * @type      {boolean}
		             * @default   true
		             * @since     4.2.4
		             * @apioption legend.navigation.enabled
		             */

		            /**
		             * Text styles for the legend page navigation.
		             *
		             * @see In styled mode, the navigation items are styled with the
		             *      `.highcharts-legend-navigation` class.
		             *
		             * @sample {highcharts} highcharts/legend/navigation/
		             *         Legend page navigation demonstrated
		             * @sample {highstock} highcharts/legend/navigation/
		             *         Legend page navigation demonstrated
		             *
		             * @type      {Highcharts.CSSObject}
		             * @since     2.2.4
		             * @apioption legend.navigation.style
		             */

		            /**
		             * The color for the active up or down arrow in the legend page
		             * navigation.
		             *
		             * @see In styled mode, the active arrow be styled with the
		             *      `.highcharts-legend-nav-active` class.
		             *
		             * @sample  {highcharts} highcharts/legend/navigation/
		             *          Legend page navigation demonstrated
		             * @sample  {highstock} highcharts/legend/navigation/
		             *          Legend page navigation demonstrated
		             *
		             * @type  {Highcharts.ColorString}
		             * @since 2.2.4
		             */
		            activeColor: '#003399',

		            /**
		             * The color of the inactive up or down arrow in the legend page
		             * navigation. .
		             *
		             * @see In styled mode, the inactive arrow be styled with the
		             *      `.highcharts-legend-nav-inactive` class.
		             *
		             * @sample {highcharts} highcharts/legend/navigation/
		             *         Legend page navigation demonstrated
		             * @sample {highstock} highcharts/legend/navigation/
		             *         Legend page navigation demonstrated
		             *
		             * @type  {Highcharts.ColorString}
		             * @since 2.2.4
		             */
		            inactiveColor: '#cccccc'
		        },

		        /**
		         * The inner padding of the legend box.
		         *
		         * @sample {highcharts|highstock} highcharts/legend/padding-itemmargin/
		         *         Padding and item margins demonstrated
		         * @sample {highmaps} maps/legend/padding-itemmargin/
		         *         Padding and item margins demonstrated
		         *
		         * @type      {number}
		         * @default   8
		         * @since     2.2.0
		         * @apioption legend.padding
		         */

		        /**
		         * Whether to reverse the order of the legend items compared to the
		         * order of the series or points as defined in the configuration object.
		         *
		         * @see [yAxis.reversedStacks](#yAxis.reversedStacks),
		         *      [series.legendIndex](#series.legendIndex)
		         *
		         * @sample {highcharts} highcharts/legend/reversed/
		         *         Stacked bar with reversed legend
		         *
		         * @type      {boolean}
		         * @default   false
		         * @since     1.2.5
		         * @apioption legend.reversed
		         */

		        /**
		         * Whether to show the symbol on the right side of the text rather than
		         * the left side. This is common in Arabic and Hebraic.
		         *
		         * @sample {highcharts} highcharts/legend/rtl/
		         *         Symbol to the right
		         *
		         * @type      {boolean}
		         * @default   false
		         * @since     2.2
		         * @apioption legend.rtl
		         */

		        /**
		         * CSS styles for the legend area. In the 1.x versions the position
		         * of the legend area was determined by CSS. In 2.x, the position is
		         * determined by properties like `align`, `verticalAlign`, `x` and `y`,
		         * but the styles are still parsed for backwards compatibility.
		         *
		         * @deprecated
		         *
		         * @type      {Highcharts.CSSObject}
		         * @product   highcharts highstock
		         * @apioption legend.style
		         */

		        /**
		         * CSS styles for each legend item. Only a subset of CSS is supported,
		         * notably those options related to text. The default `textOverflow`
		         * property makes long texts truncate. Set it to `undefined` to wrap
		         * text instead. A `width` property can be added to control the text
		         * width.
		         *
		         * @see In styled mode, the legend items can be styled with the
		         *      `.highcharts-legend-item` class.
		         *
		         * @sample {highcharts} highcharts/legend/itemstyle/
		         *         Bold black text
		         * @sample {highmaps} maps/legend/itemstyle/
		         *         Item text styles
		         *
		         * @type    {Highcharts.CSSObject}
		         * @default {"color": "#333333", "cursor": "pointer", "fontSize": "12px", "fontWeight": "bold", "textOverflow": "ellipsis"}
		         */
		        itemStyle: {
		            /**
		             * @ignore
		             */
		            color: '#333333',
		            /**
		             * @ignore
		             */
		            cursor: 'pointer',
		            /**
		             * @ignore
		             */
		            fontSize: '12px',
		            /**
		             * @ignore
		             */
		            fontWeight: 'bold',
		            /**
		             * @ignore
		             */
		            textOverflow: 'ellipsis'
		        },

		        /**
		         * CSS styles for each legend item in hover mode. Only a subset of
		         * CSS is supported, notably those options related to text. Properties
		         * are inherited from `style` unless overridden here.
		         *
		         * @see In styled mode, the hovered legend items can be styled with
		         *      the `.highcharts-legend-item:hover` pesudo-class.
		         *
		         * @sample {highcharts} highcharts/legend/itemhoverstyle/
		         *         Red on hover
		         * @sample {highmaps} maps/legend/itemstyle/
		         *         Item text styles
		         *
		         * @type    {Highcharts.CSSObject}
		         * @default {"color": "#000000"}
		         */
		        itemHoverStyle: {
		            /**
		             * @ignore
		             */
		            color: '#000000'
		        },

		        /**
		         * CSS styles for each legend item when the corresponding series or
		         * point is hidden. Only a subset of CSS is supported, notably those
		         * options related to text. Properties are inherited from `style`
		         * unless overridden here.
		         *
		         * @see In styled mode, the hidden legend items can be styled with
		         *      the `.highcharts-legend-item-hidden` class.
		         *
		         * @sample {highcharts} highcharts/legend/itemhiddenstyle/
		         *         Darker gray color
		         *
		         * @type    {Highcharts.CSSObject}
		         * @default {"color": "#cccccc"}
		         */
		        itemHiddenStyle: {
		            /**
		             * @ignore
		             */
		            color: '#cccccc'
		        },

		        /**
		         * Whether to apply a drop shadow to the legend. A `backgroundColor`
		         * also needs to be applied for this to take effect. The shadow can be
		         * an object configuration containing `color`, `offsetX`, `offsetY`,
		         * `opacity` and `width`.
		         *
		         * @sample {highcharts} highcharts/legend/shadow/
		         *         White background and drop shadow
		         * @sample {highstock} stock/legend/align/
		         *         Various legend options
		         * @sample {highmaps} maps/legend/border-background/
		         *         Border and background options
		         *
		         * @type {boolean|Highcharts.CSSObject}
		         */
		        shadow: false,

		        /**
		         * Default styling for the checkbox next to a legend item when
		         * `showCheckbox` is true.
		         *
		         * @type {Highcharts.CSSObject}
		         * @default {"width": "13px", "height": "13px", "position":"absolute"}
		         */
		        itemCheckboxStyle: {
		            /**
		             * @ignore
		             */
		            position: 'absolute',
		            /**
		             * @ignore
		             */
		            width: '13px', // for IE precision
		            /**
		             * @ignore
		             */
		            height: '13px'
		        },
		        // itemWidth: undefined,

		        /**
		         * When this is true, the legend symbol width will be the same as
		         * the symbol height, which in turn defaults to the font size of the
		         * legend items.
		         *
		         * @since 5.0.0
		         */
		        squareSymbol: true,

		        /**
		         * The pixel height of the symbol for series types that use a rectangle
		         * in the legend. Defaults to the font size of legend items.
		         *
		         * @productdesc {highmaps}
		         * In Highmaps, when the symbol is the gradient of a vertical color
		         * axis, the height defaults to 200.
		         *
		         * @sample {highmaps} maps/legend/layout-vertical-sized/
		         *         Sized vertical gradient
		         * @sample {highmaps} maps/legend/padding-itemmargin/
		         *         No distance between data classes
		         *
		         * @type      {number}
		         * @since     3.0.8
		         * @apioption legend.symbolHeight
		         */

		        /**
		         * The border radius of the symbol for series types that use a rectangle
		         * in the legend. Defaults to half the `symbolHeight`.
		         *
		         * @sample {highcharts} highcharts/legend/symbolradius/
		         *         Round symbols
		         * @sample {highstock} highcharts/legend/symbolradius/
		         *         Round symbols
		         * @sample {highmaps} highcharts/legend/symbolradius/
		         *         Round symbols
		         *
		         * @type      {number}
		         * @since     3.0.8
		         * @apioption legend.symbolRadius
		         */

		        /**
		         * The pixel width of the legend item symbol. When the `squareSymbol`
		         * option is set, this defaults to the `symbolHeight`, otherwise 16.
		         *
		         * @productdesc {highmaps}
		         * In Highmaps, when the symbol is the gradient of a horizontal color
		         * axis, the width defaults to 200.
		         *
		         * @sample {highcharts} highcharts/legend/symbolwidth/
		         *         Greater symbol width and padding
		         * @sample {highmaps} maps/legend/padding-itemmargin/
		         *         Padding and item margins demonstrated
		         * @sample {highmaps} maps/legend/layout-vertical-sized/
		         *         Sized vertical gradient
		         *
		         * @type      {number}
		         * @apioption legend.symbolWidth
		         */

		        /**
		         * Whether to [use HTML](https://www.highcharts.com/docs/chart-concepts/labels-and-string-formatting#html)
		         * to render the legend item texts.
		         *
		         * Prior to 4.1.7, when using HTML, [legend.navigation](
		         * #legend.navigation) was disabled.
		         *
		         * @type      {boolean}
		         * @default   false
		         * @apioption legend.useHTML
		         */

		        /**
		         * The width of the legend box.
		         *
		         * @sample {highcharts} highcharts/legend/width/
		         *         Aligned to the plot area
		         *
		         * @type      {number}
		         * @since     2.0
		         * @apioption legend.width
		         */

		        /**
		         * The pixel padding between the legend item symbol and the legend
		         * item text.
		         *
		         * @sample {highcharts} highcharts/legend/symbolpadding/
		         *         Greater symbol width and padding
		         */
		        symbolPadding: 5,

		        /**
		         * The vertical alignment of the legend box. Can be one of `top`,
		         * `middle` or `bottom`. Vertical position can be further determined
		         * by the `y` option.
		         *
		         * In the case that the legend is aligned in a corner position, the
		         * `layout` option will determine whether to place it above/below
		         * or on the side of the plot area.
		         *
		         * When the [layout](#legend.layout) option is `proximate`, the
		         * `verticalAlign` option doesn't apply.
		         *
		         * @sample {highcharts} highcharts/legend/verticalalign/
		         *         Legend 100px from the top of the chart
		         * @sample {highstock} stock/legend/align/
		         *         Various legend options
		         * @sample {highmaps} maps/legend/alignment/
		         *         Legend alignment
		         *
		         * @since      2.0
		         * @validvalue ["top", "middle", "bottom"]
		         */
		        verticalAlign: 'bottom',

		        // width: undefined,

		        /**
		         * The x offset of the legend relative to its horizontal alignment
		         * `align` within chart.spacingLeft and chart.spacingRight. Negative
		         * x moves it to the left, positive x moves it to the right.
		         *
		         * @sample {highcharts} highcharts/legend/width/
		         *         Aligned to the plot area
		         *
		         * @since 2.0
		         */
		        x: 0,

		        /**
		         * The vertical offset of the legend relative to it's vertical alignment
		         * `verticalAlign` within chart.spacingTop and chart.spacingBottom.
		         *  Negative y moves it up, positive y moves it down.
		         *
		         * @sample {highcharts} highcharts/legend/verticalalign/
		         *         Legend 100px from the top of the chart
		         * @sample {highstock} stock/legend/align/
		         *         Various legend options
		         * @sample {highmaps} maps/legend/alignment/
		         *         Legend alignment
		         *
		         * @since 2.0
		         */
		        y: 0,

		        /**
		         * A title to be added on top of the legend.
		         *
		         * @sample {highcharts} highcharts/legend/title/
		         *         Legend title
		         * @sample {highmaps} maps/legend/alignment/
		         *         Legend with title
		         *
		         * @since 3.0
		         */
		        title: {
		            /**
		             * A text or HTML string for the title.
		             *
		             * @type      {string}
		             * @since     3.0
		             * @apioption legend.title.text
		             */

		            /**
		             * Generic CSS styles for the legend title.
		             *
		             * @see In styled mode, the legend title is styled with the
		             *      `.highcharts-legend-title` class.
		             *
		             * @type    {Highcharts.CSSObject}
		             * @default {"fontWeight": "bold"}
		             * @since   3.0
		             */
		            style: {
		                /**
		                 * @ignore
		                 */
		                fontWeight: 'bold'
		            }
		        }
		    },


		    /**
		     * The loading options control the appearance of the loading screen
		     * that covers the plot area on chart operations. This screen only
		     * appears after an explicit call to `chart.showLoading()`. It is a
		     * utility for developers to communicate to the end user that something
		     * is going on, for example while retrieving new data via an XHR connection.
		     * The "Loading..." text itself is not part of this configuration
		     * object, but part of the `lang` object.
		     */
		    loading: {

		        /**
		         * The duration in milliseconds of the fade out effect.
		         *
		         * @sample highcharts/loading/hideduration/
		         *         Fade in and out over a second
		         *
		         * @type      {number}
		         * @default   100
		         * @since     1.2.0
		         * @apioption loading.hideDuration
		         */

		        /**
		         * The duration in milliseconds of the fade in effect.
		         *
		         * @sample highcharts/loading/hideduration/
		         *         Fade in and out over a second
		         *
		         * @type      {number}
		         * @default   100
		         * @since     1.2.0
		         * @apioption loading.showDuration
		         */

		        /**
		         * CSS styles for the loading label `span`.
		         *
		         * @see In styled mode, the loading label is styled with the
		         *      `.highcharts-loading-inner` class.
		         *
		         * @sample {highcharts|highmaps} highcharts/loading/labelstyle/
		         *         Vertically centered
		         * @sample {highstock} stock/loading/general/
		         *         Label styles
		         *
		         * @type    {Highcharts.CSSObject}
		         * @default {"fontWeight": "bold", "position": "relative", "top": "45%"}
		         * @since   1.2.0
		         */
		        labelStyle: {
		            /**
		             * @ignore
		             */
		            fontWeight: 'bold',
		            /**
		             * @ignore
		             */
		            position: 'relative',
		            /**
		             * @ignore
		             */
		            top: '45%'
		        },

		        /**
		         * CSS styles for the loading screen that covers the plot area.
		         *
		         * In styled mode, the loading label is styled with the
		         * `.highcharts-loading` class.
		         *
		         * @sample  {highcharts|highmaps} highcharts/loading/style/
		         *          Gray plot area, white text
		         * @sample  {highstock} stock/loading/general/
		         *          Gray plot area, white text
		         *
		         * @type    {Highcharts.CSSObject}
		         * @default {"position": "absolute", "backgroundColor": "#ffffff", "opacity": 0.5, "textAlign": "center"}
		         * @since   1.2.0
		         */
		        style: {
		            /**
		             * @ignore
		             */
		            position: 'absolute',
		            /**
		             * @ignore
		             */
		            backgroundColor: '#ffffff',
		            /**
		             * @ignore
		             */
		            opacity: 0.5,
		            /**
		             * @ignore
		             */
		            textAlign: 'center'
		        }
		    },


		    /**
		     * Options for the tooltip that appears when the user hovers over a
		     * series or point.
		     */
		    tooltip: {


		        /**
		         * The color of the tooltip border. When `undefined`, the border takes
		         * the color of the corresponding series or point.
		         *
		         * @sample {highcharts} highcharts/tooltip/bordercolor-default/
		         *         Follow series by default
		         * @sample {highcharts} highcharts/tooltip/bordercolor-black/
		         *         Black border
		         * @sample {highstock} stock/tooltip/general/
		         *         Styled tooltip
		         * @sample {highmaps} maps/tooltip/background-border/
		         *         Background and border demo
		         *
		         * @type      {Highcharts.ColorString}
		         * @apioption tooltip.borderColor
		         */

		        /**
		         * Since 4.1, the crosshair definitions are moved to the Axis object
		         * in order for a better separation from the tooltip. See
		         * [xAxis.crosshair](#xAxis.crosshair)<a>.</a>
		         *
		         * @sample {highcharts} highcharts/tooltip/crosshairs-x/
		         *         Enable a crosshair for the x value
		         *
		         * @deprecated
		         *
		         * @type      {*}
		         * @default   true
		         * @apioption tooltip.crosshairs
		         */

		        /**
		         * Whether the tooltip should follow the mouse as it moves across
		         * columns, pie slices and other point types with an extent. By default
		         * it behaves this way for scatter, bubble and pie series by override
		         * in the `plotOptions` for those series types.
		         *
		         * For touch moves to behave the same way, [followTouchMove](
		         * #tooltip.followTouchMove) must be `true` also.
		         *
		         * @type      {boolean}
		         * @default   {highcharts} false
		         * @default   {highstock} false
		         * @default   {highmaps} true
		         * @since     3.0
		         * @apioption tooltip.followPointer
		         */

		        /**
		         * Whether the tooltip should update as the finger moves on a touch
		         * device. If this is `true` and [chart.panning](#chart.panning) is
		         * set,`followTouchMove` will take over one-finger touches, so the user
		         * needs to use two fingers for zooming and panning.
		         *
		         * Note the difference to [followPointer](#tooltip.followPointer) that
		         * only defines the _position_ of the tooltip. If `followPointer` is
		         * false in for example a column series, the tooltip will show above or
		         * below the column, but as `followTouchMove` is true, the tooltip will
		         * jump from column to column as the user swipes across the plot area.
		         *
		         * @type      {boolean}
		         * @default   {highcharts} true
		         * @default   {highstock} true
		         * @default   {highmaps} false
		         * @since     3.0.1
		         * @apioption tooltip.followTouchMove
		         */

		        /**
		         * Callback function to format the text of the tooltip from scratch.
		         * Return `false` to disable tooltip for a specific point on series.
		         *
		         * A subset of HTML is supported. Unless `useHTML` is true, the HTML of
		         * the tooltip is parsed and converted to SVG, therefore this isn't a
		         * complete HTML renderer. The following tags are supported: `<b>`,
		         * `<strong>`, `<i>`, `<em>`, `<br/>`, `<span>`. Spans can be styled
		         * with a `style` attribute, but only text-related CSS that is shared
		         * with SVG is handled.
		         *
		         * Since version 2.1 the tooltip can be shared between multiple series
		         * through the `shared` option. The available data in the formatter
		         * differ a bit depending on whether the tooltip is shared or not. In
		         * a shared tooltip, all properties except `x`, which is common for
		         * all points, are kept in an array, `this.points`.
		         *
		         * Available data are:
		         *
		         * <dl>
		         *
		         * <dt>this.percentage (not shared) / this.points[i].percentage (shared)
		         * </dt>
		         *
		         * <dd>Stacked series and pies only. The point's percentage of the
		         * total.
		         * </dd>
		         *
		         * <dt>this.point (not shared) / this.points[i].point (shared)</dt>
		         *
		         * <dd>The point object. The point name, if defined, is available
		         * through `this.point.name`.</dd>
		         *
		         * <dt>this.points</dt>
		         *
		         * <dd>In a shared tooltip, this is an array containing all other
		         * properties for each point.</dd>
		         *
		         * <dt>this.series (not shared) / this.points[i].series (shared)</dt>
		         *
		         * <dd>The series object. The series name is available through
		         * `this.series.name`.</dd>
		         *
		         * <dt>this.total (not shared) / this.points[i].total (shared)</dt>
		         *
		         * <dd>Stacked series only. The total value at this point's x value.
		         * </dd>
		         *
		         * <dt>this.x</dt>
		         *
		         * <dd>The x value. This property is the same regardless of the tooltip
		         * being shared or not.</dd>
		         *
		         * <dt>this.y (not shared) / this.points[i].y (shared)</dt>
		         *
		         * <dd>The y value.</dd>
		         *
		         * </dl>
		         *
		         * @sample {highcharts} highcharts/tooltip/formatter-simple/
		         *         Simple string formatting
		         * @sample {highcharts} highcharts/tooltip/formatter-shared/
		         *         Formatting with shared tooltip
		         * @sample {highstock} stock/tooltip/formatter/
		         *         Formatting with shared tooltip
		         * @sample {highmaps} maps/tooltip/formatter/
		         *         String formatting
		         *
		         * @type      {Highcharts.FormatterCallbackFunction<Highcharts.TooltipFormatterContextObject>}
		         * @apioption tooltip.formatter
		         */

		        /**
		         * The number of milliseconds to wait until the tooltip is hidden when
		         * mouse out from a point or chart.
		         *
		         * @type      {number}
		         * @default   500
		         * @since     3.0
		         * @apioption tooltip.hideDelay
		         */

		        /**
		         * Whether to allow the tooltip to render outside the chart's SVG
		         * element box. By default (`false`), the tooltip is rendered within the
		         * chart's SVG element, which results in the tooltip being aligned
		         * inside the chart area. For small charts, this may result in clipping
		         * or overlapping. When `true`, a separate SVG element is created and
		         * overlaid on the page, allowing the tooltip to be aligned inside the
		         * page itself.
		         *
		         * @sample highcharts/tooltip/outside
		         *         Small charts with tooltips outside
		         *
		         * @type      {boolean}
		         * @default   false
		         * @since     6.1.1
		         * @apioption tooltip.outside
		         */

		        /**
		         * A callback function for formatting the HTML output for a single point
		         * in the tooltip. Like the `pointFormat` string, but with more
		         * flexibility.
		         *
		         * @type      {Function}
		         * @since     4.1.0
		         * @context   Highcharts.Point
		         * @apioption tooltip.pointFormatter
		         */

		        /**
		         * A callback function to place the tooltip in a default position. The
		         * callback receives three parameters: `labelWidth`, `labelHeight` and
		         * `point`, where point contains values for `plotX` and `plotY` telling
		         * where the reference point is in the plot area. Add `chart.plotLeft`
		         * and `chart.plotTop` to get the full coordinates.
		         *
		         * Since v7, when [tooltip.split](#tooltip.split) option is enabled,
		         * positioner is called for each of the boxes separately, including
		         * xAxis header. xAxis header is not a point, instead `point` argument
		         * contains info:
		         * `{ plotX: Number, plotY: Number, isHeader: Boolean }`
		         *
		         *
		         * The return should be an object containing x and y values, for example
		         * `{ x: 100, y: 100 }`.
		         *
		         * @sample {highcharts} highcharts/tooltip/positioner/
		         *         A fixed tooltip position
		         * @sample {highstock} stock/tooltip/positioner/
		         *         A fixed tooltip position on top of the chart
		         * @sample {highmaps} maps/tooltip/positioner/
		         *         A fixed tooltip position
		         * @sample {highstock} stock/tooltip/split-positioner/
		         *         Split tooltip with fixed positions
		         *
		         * @type      {Function}
		         * @since     2.2.4
		         * @apioption tooltip.positioner
		         */

		        /**
		         * The name of a symbol to use for the border around the tooltip. Can
		         * be one of: `"callout"`, `"circle"` or `"square"`. When
		         * [tooltip.split](#tooltip.split) option is enabled, shape is applied
		         * to all boxes except header, which is controlled by
		         * [tooltip.headerShape](#tooltip.headerShape).
		         *
		         * Custom callbacks for symbol path generation can also be added to
		         * `Highcharts.SVGRenderer.prototype.symbols` the same way as for
		         * [series.marker.symbol](plotOptions.line.marker.symbol).
		         *
		         * @type       {string}
		         * @default    callout
		         * @since      4.0
		         * @validvalue ["callout", "square"]
		         * @apioption  tooltip.shape
		         */

		         /**
		         * The name of a symbol to use for the border around the tooltip
		         * header. Applies only when [tooltip.split](#tooltip.split) is
		         * enabled.
		         *
		         * Custom callbacks for symbol path generation can also be added to
		         * `Highcharts.SVGRenderer.prototype.symbols` the same way as for
		         * [series.marker.symbol](plotOptions.line.marker.symbol).
		         *
		         * @see [tooltip.shape](#tooltip.shape)
		         * @type {String}
		         * @default callout
		         * @sample {highstock} stock/tooltip/split-positioner/
		         *         Different shapes for header and split boxes
		         * @validvalue ["callout", "square"]
		         * @since 7.0
		         * @apioption tooltip.headerShape
		         */

		        /**
		         * When the tooltip is shared, the entire plot area will capture mouse
		         * movement or touch events. Tooltip texts for series types with ordered
		         * data (not pie, scatter, flags etc) will be shown in a single bubble.
		         * This is recommended for single series charts and for tablet/mobile
		         * optimized charts.
		         *
		         * See also [tooltip.split](#tooltip.split), that is better suited for
		         * charts with many series, especially line-type series. The
		         * `tooltip.split` option takes precedence over `tooltip.shared`.
		         *
		         * @sample {highcharts} highcharts/tooltip/shared-false/
		         *         False by default
		         * @sample {highcharts} highcharts/tooltip/shared-true/
		         *         True
		         * @sample {highcharts} highcharts/tooltip/shared-x-crosshair/
		         *         True with x axis crosshair
		         * @sample {highcharts} highcharts/tooltip/shared-true-mixed-types/
		         *         True with mixed series types
		         *
		         * @type      {boolean}
		         * @default   false
		         * @since     2.1
		         * @product   highcharts highstock
		         * @apioption tooltip.shared
		         */

		        /**
		         * Split the tooltip into one label per series, with the header close
		         * to the axis. This is recommended over [shared](#tooltip.shared)
		         * tooltips for charts with multiple line series, generally making them
		         * easier to read. This option takes precedence over `tooltip.shared`.
		         *
		         * @productdesc {highstock} In Highstock, tooltips are split by default
		         * since v6.0.0. Stock charts typically contain multi-dimension points
		         * and multiple panes, making split tooltips the preferred layout over
		         * the previous `shared` tooltip.
		         *
		         * @sample highcharts/tooltip/split/
		         *         Split tooltip
		         *
		         * @type      {boolean}
		         * @default   {highcharts} false
		         * @default   {highstock} true
		         * @since     5.0.0
		         * @product   highcharts highstock
		         * @apioption tooltip.split
		         */

		        /**
		         * Use HTML to render the contents of the tooltip instead of SVG. Using
		         * HTML allows advanced formatting like tables and images in the
		         * tooltip. It is also recommended for rtl languages as it works around
		         * rtl bugs in early Firefox.
		         *
		         * @sample {highcharts|highstock} highcharts/tooltip/footerformat/
		         *         A table for value alignment
		         * @sample {highcharts|highstock} highcharts/tooltip/fullhtml/
		         *         Full HTML tooltip
		         * @sample {highmaps} maps/tooltip/usehtml/
		         *         Pure HTML tooltip
		         *
		         * @type      {boolean}
		         * @default   false
		         * @since     2.2
		         * @apioption tooltip.useHTML
		         */

		        /**
		         * How many decimals to show in each series' y value. This is
		         * overridable in each series' tooltip options object. The default is to
		         * preserve all decimals.
		         *
		         * @sample {highcharts|highstock} highcharts/tooltip/valuedecimals/
		         *         Set decimals, prefix and suffix for the value
		         * @sample {highmaps} maps/tooltip/valuedecimals/
		         *         Set decimals, prefix and suffix for the value
		         *
		         * @type      {number}
		         * @since     2.2
		         * @apioption tooltip.valueDecimals
		         */

		        /**
		         * A string to prepend to each series' y value. Overridable in each
		         * series' tooltip options object.
		         *
		         * @sample {highcharts|highstock} highcharts/tooltip/valuedecimals/
		         *         Set decimals, prefix and suffix for the value
		         * @sample {highmaps} maps/tooltip/valuedecimals/
		         *         Set decimals, prefix and suffix for the value
		         *
		         * @type      {string}
		         * @since     2.2
		         * @apioption tooltip.valuePrefix
		         */

		        /**
		         * A string to append to each series' y value. Overridable in each
		         * series' tooltip options object.
		         *
		         * @sample {highcharts|highstock} highcharts/tooltip/valuedecimals/
		         *         Set decimals, prefix and suffix for the value
		         * @sample {highmaps} maps/tooltip/valuedecimals/
		         *         Set decimals, prefix and suffix for the value
		         *
		         * @type      {string}
		         * @since     2.2
		         * @apioption tooltip.valueSuffix
		         */

		        /**
		         * The format for the date in the tooltip header if the X axis is a
		         * datetime axis. The default is a best guess based on the smallest
		         * distance between points in the chart.
		         *
		         * @sample {highcharts} highcharts/tooltip/xdateformat/
		         *         A different format
		         *
		         * @type      {string}
		         * @product   highcharts highstock gantt
		         * @apioption tooltip.xDateFormat
		         */

		        /**
		         * How many decimals to show for the `point.change` value when the
		         * `series.compare` option is set. This is overridable in each series'
		         * tooltip options object. The default is to preserve all decimals.
		         *
		         * @type      {number}
		         * @since     1.0.1
		         * @product   highstock
		         * @apioption tooltip.changeDecimals
		         */

		        /**
		         * Enable or disable the tooltip.
		         *
		         * @sample {highcharts} highcharts/tooltip/enabled/
		         *         Disabled
		         * @sample {highcharts} highcharts/plotoptions/series-point-events-mouseover/
		         *         Disable tooltip and show values on chart instead
		         */
		        enabled: true,

		        /**
		         * Enable or disable animation of the tooltip.
		         *
		         * @type       {boolean}
		         * @default    true
		         * @since      2.3.0
		         */
		        animation: svg,

		        /**
		         * The radius of the rounded border corners.
		         *
		         * @sample {highcharts} highcharts/tooltip/bordercolor-default/
		         *         5px by default
		         * @sample {highcharts} highcharts/tooltip/borderradius-0/
		         *         Square borders
		         * @sample {highmaps} maps/tooltip/background-border/
		         *         Background and border demo
		         */
		        borderRadius: 3,

		        /**
		         * For series on a datetime axes, the date format in the tooltip's
		         * header will by default be guessed based on the closest data points.
		         * This member gives the default string representations used for
		         * each unit. For an overview of the replacement codes, see
		         * [dateFormat](/class-reference/Highcharts#dateFormat).
		         *
		         * @see [xAxis.dateTimeLabelFormats](#xAxis.dateTimeLabelFormats)
		         *
		         * @type    {Highcharts.Dictionary<string>}
		         * @product highcharts highstock gantt
		         */
		        dateTimeLabelFormats: {
		            millisecond: '%A, %b %e, %H:%M:%S.%L',
		            second: '%A, %b %e, %H:%M:%S',
		            minute: '%A, %b %e, %H:%M',
		            hour: '%A, %b %e, %H:%M',
		            day: '%A, %b %e, %Y',
		            week: 'Week from %A, %b %e, %Y',
		            month: '%B %Y',
		            year: '%Y'
		        },

		        /**
		         * A string to append to the tooltip format.
		         *
		         * @sample {highcharts} highcharts/tooltip/footerformat/
		         *         A table for value alignment
		         * @sample {highmaps} maps/tooltip/format/
		         *         Format demo
		         *
		         * @since 2.2
		         */
		        footerFormat: '',

		        /**
		         * Padding inside the tooltip, in pixels.
		         *
		         * @since      5.0.0
		         */
		        padding: 8,

		        /**
		         * Proximity snap for graphs or single points. It defaults to 10 for
		         * mouse-powered devices and 25 for touch devices.
		         *
		         * Note that in most cases the whole plot area captures the mouse
		         * movement, and in these cases `tooltip.snap` doesn't make sense. This
		         * applies when [stickyTracking](#plotOptions.series.stickyTracking)
		         * is `true` (default) and when the tooltip is [shared](#tooltip.shared)
		         * or [split](#tooltip.split).
		         *
		         * @sample {highcharts} highcharts/tooltip/bordercolor-default/
		         *         10 px by default
		         * @sample {highcharts} highcharts/tooltip/snap-50/
		         *         50 px on graph
		         *
		         * @type    {number}
		         * @default 10/25
		         * @since   1.2.0
		         * @product highcharts highstock
		         */
		        snap: isTouchDevice ? 25 : 10,
		        /**
		         * The HTML of the tooltip header line. Variables are enclosed by
		         * curly brackets. Available variables are `point.key`, `series.name`,
		         * `series.color` and other members from the `point` and `series`
		         * objects. The `point.key` variable contains the category name, x
		         * value or datetime string depending on the type of axis. For datetime
		         * axes, the `point.key` date format can be set using
		         * `tooltip.xDateFormat`.
		         *
		         * @sample {highcharts} highcharts/tooltip/footerformat/
		         *         An HTML table in the tooltip
		         * @sample {highstock} highcharts/tooltip/footerformat/
		         *         An HTML table in the tooltip
		         * @sample {highmaps} maps/tooltip/format/
		         *         Format demo
		         *
		         * @type       {string}
		         * @apioption  tooltip.headerFormat
		         */
		        headerFormat: '<span style="font-size: 10px">{point.key}</span><br/>',

		        /**
		         * The HTML of the point's line in the tooltip. Variables are enclosed
		         * by curly brackets. Available variables are point.x, point.y, series.
		         * name and series.color and other properties on the same form.
		         * Furthermore, `point.y` can be extended by the `tooltip.valuePrefix`
		         * and `tooltip.valueSuffix` variables. This can also be overridden for
		         * each series, which makes it a good hook for displaying units.
		         *
		         * In styled mode, the dot is colored by a class name rather
		         * than the point color.
		         *
		         * @sample {highcharts} highcharts/tooltip/pointformat/
		         *         A different point format with value suffix
		         * @sample {highmaps} maps/tooltip/format/
		         *         Format demo
		         *
		         * @type       {string}
		         * @default    <span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y}</b><br/>
		         * @since      2.2
		         * @apioption  tooltip.pointFormat
		         */
		        pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y}</b><br/>',

		        /**
		         * The background color or gradient for the tooltip.
		         *
		         * In styled mode, the stroke width is set in the
		         * `.highcharts-tooltip-box` class.
		         *
		         * @sample {highcharts} highcharts/tooltip/backgroundcolor-solid/
		         *         Yellowish background
		         * @sample {highcharts} highcharts/tooltip/backgroundcolor-gradient/
		         *         Gradient
		         * @sample {highcharts} highcharts/css/tooltip-border-background/
		         *         Tooltip in styled mode
		         * @sample {highstock} stock/tooltip/general/
		         *         Custom tooltip
		         * @sample {highstock} highcharts/css/tooltip-border-background/
		         *         Tooltip in styled mode
		         * @sample {highmaps} maps/tooltip/background-border/
		         *         Background and border demo
		         * @sample {highmaps} highcharts/css/tooltip-border-background/
		         *         Tooltip in styled mode
		         *
		         * @type {Highcharts.ColorString}
		         */
		        backgroundColor: color('#f7f7f7')
		            .setOpacity(0.85).get(),

		        /**
		         * The pixel width of the tooltip border.
		         *
		         * In styled mode, the stroke width is set in the
		         * `.highcharts-tooltip-box` class.
		         *
		         * @sample {highcharts} highcharts/tooltip/bordercolor-default/
		         *         2px by default
		         * @sample {highcharts} highcharts/tooltip/borderwidth/
		         *         No border (shadow only)
		         * @sample {highcharts} highcharts/css/tooltip-border-background/
		         *         Tooltip in styled mode
		         * @sample {highstock} stock/tooltip/general/
		         *         Custom tooltip
		         * @sample {highstock} highcharts/css/tooltip-border-background/
		         *         Tooltip in styled mode
		         * @sample {highmaps} maps/tooltip/background-border/
		         *         Background and border demo
		         * @sample {highmaps} highcharts/css/tooltip-border-background/
		         *         Tooltip in styled mode
		         */
		        borderWidth: 1,

		        /**
		         * Whether to apply a drop shadow to the tooltip.
		         *
		         * @sample {highcharts} highcharts/tooltip/bordercolor-default/
		         *         True by default
		         * @sample {highcharts} highcharts/tooltip/shadow/
		         *         False
		         * @sample {highmaps} maps/tooltip/positioner/
		         *         Fixed tooltip position, border and shadow disabled
		         */
		        shadow: true,

		        /**
		         * CSS styles for the tooltip. The tooltip can also be styled through
		         * the CSS class `.highcharts-tooltip`.
		         *
		         * @sample {highcharts} highcharts/tooltip/style/
		         *         Greater padding, bold text
		         *
		         * @type    {Highcharts.CSSObject}
		         * @default {"color": "#333333", "cursor": "default", "fontSize": "12px", "pointerEvents": "none", "whiteSpace": "nowrap"}
		         */
		        style: {
		            /**
		             * @ignore
		             */
		            color: '#333333',
		            /**
		             * @ignore
		             */
		            cursor: 'default',
		            /**
		             * @ignore
		             */
		            fontSize: '12px',
		            /**
		             * @ignore
		             */
		            pointerEvents: 'none',
		            // #1686 http://caniuse.com/#feat=pointer-events
		            /**
		             * @ignore
		             */
		            whiteSpace: 'nowrap'
		        }
		    },


		    /**
		     * Highchart by default puts a credits label in the lower right corner
		     * of the chart. This can be changed using these options.
		     */
		    credits: {

		        /**
		         * Credits for map source to be concatenated with conventional credit
		         * text. By default this is a format string that collects copyright
		         * information from the map if available.
		         *
		         * @see [mapTextFull](#credits.mapTextFull)
		         * @see [text](#credits.text)
		         *
		         * @type      {string}
		         * @default   \u00a9 <a href="{geojson.copyrightUrl}">{geojson.copyrightShort}</a>
		         * @since     4.2.2
		         * @product   highmaps
		         * @apioption credits.mapText
		         */

		        /**
		         * Detailed credits for map source to be displayed on hover of credits
		         * text. By default this is a format string that collects copyright
		         * information from the map if available.
		         *
		         * @see [mapText](#credits.mapText)
		         * @see [text](#credits.text)
		         *
		         * @type      {string}
		         * @default   {geojson.copyright}
		         * @since     4.2.2
		         * @product   highmaps
		         * @apioption credits.mapTextFull
		         */

		        /**
		         * Whether to show the credits text.
		         *
		         * @sample {highcharts} highcharts/credits/enabled-false/
		         *         Credits disabled
		         * @sample {highstock} stock/credits/enabled/
		         *         Credits disabled
		         * @sample {highmaps} maps/credits/enabled-false/
		         *         Credits disabled
		         */
		        enabled: true,

		        /**
		         * The URL for the credits label.
		         *
		         * @sample {highcharts} highcharts/credits/href/
		         *         Custom URL and text
		         * @sample {highmaps} maps/credits/customized/
		         *         Custom URL and text
		         */
		        href: 'https://www.highcharts.com?credits',

		        /**
		         * Position configuration for the credits label.
		         *
		         * @sample {highcharts} highcharts/credits/position-left/
		         *         Left aligned
		         * @sample {highcharts} highcharts/credits/position-left/
		         *         Left aligned
		         * @sample {highmaps} maps/credits/customized/
		         *         Left aligned
		         * @sample {highmaps} maps/credits/customized/
		         *         Left aligned
		         *
		         * @since 2.1
		         */
		        position: {

		            /**
		             * Horizontal alignment of the credits.
		             *
		             * @validvalue ["left", "center", "right"]
		             */
		            align: 'right',

		            /**
		             * Horizontal pixel offset of the credits.
		             */
		            x: -10,

		            /**
		             * Vertical alignment of the credits.
		             *
		             * @validvalue ["top", "middle", "bottom"]
		             */
		            verticalAlign: 'bottom',

		            /**
		             * Vertical pixel offset of the credits.
		             */
		            y: -5

		        },

		        /**
		         * CSS styles for the credits label.
		         *
		         * @see In styled mode, credits styles can be set with the
		         *      `.highcharts-credits` class.
		         *
		         * @type    {Highcharts.CSSObject}
		         * @default {"cursor": "pointer", "color": "#999999", "fontSize": "10px"}
		         */
		        style: {
		            /**
		             * @ignore
		             */
		            cursor: 'pointer',
		            /**
		             * @ignore
		             */
		            color: '#999999',
		            /**
		             * @ignore
		             */
		            fontSize: '9px'
		        },

		        /**
		         * The text for the credits label.
		         *
		         * @productdesc {highmaps}
		         * If a map is loaded as GeoJSON, the text defaults to
		         * `Highcharts @ {map-credits}`. Otherwise, it defaults to
		         * `Highcharts.com`.
		         *
		         * @sample {highcharts} highcharts/credits/href/
		         *         Custom URL and text
		         * @sample {highmaps} maps/credits/customized/
		         *         Custom URL and text
		         */
		        text: 'Highcharts.com'

		    }
		};

		/**
		 * Merge the default options with custom options and return the new options
		 * structure. Commonly used for defining reusable templates.
		 *
		 * @sample highcharts/global/useutc-false Setting a global option
		 * @sample highcharts/members/setoptions Applying a global theme
		 *
		 * @function Highcharts.setOptions
		 *
		 * @param {Highcharts.Options} options
		 *        The new custom chart options.
		 *
		 * @return {Highcharts.Options}
		 *         Updated options.
		 */
		H.setOptions = function (options) {

		    // Copy in the default options
		    H.defaultOptions = merge(true, H.defaultOptions, options);

		    // Update the time object
		    H.time.update(
		        merge(H.defaultOptions.global, H.defaultOptions.time),
		        false
		    );

		    return H.defaultOptions;
		};

		/**
		 * Get the updated default options. Until 3.0.7, merely exposing defaultOptions
		 * for outside modules wasn't enough because the setOptions method created a new
		 * object.
		 *
		 * @function Highcharts.getOptions
		 *
		 * @return {Highcharts.Options}
		 */
		H.getOptions = function () {
		    return H.defaultOptions;
		};


		// Series defaults
		H.defaultPlotOptions = H.defaultOptions.plotOptions;


		/**
		 * Global `Time` object with default options. Since v6.0.5, time settings can be
		 * applied individually for each chart. If no individual settings apply, this
		 * `Time` object is shared by all instances.
		 *
		 * @name Highcharts.time
		 * @type {Highcharts.Time}
		 */
		H.time = new H.Time(merge(H.defaultOptions.global, H.defaultOptions.time));

		/**
		 * Formats a JavaScript date timestamp (milliseconds since Jan 1st 1970) into a
		 * human readable date string. The format is a subset of the formats for PHP's
		 * [strftime](http://www.php.net/manual/en/function.strftime.php) function.
		 * Additional formats can be given in the {@link Highcharts.dateFormats} hook.
		 *
		 * Since v6.0.5, all internal dates are formatted through the
		 * {@link Highcharts.Chart#time} instance to respect chart-level time settings.
		 * The `Highcharts.dateFormat` function only reflects global time settings set
		 * with `setOptions`.
		 *
		 * @function Highcharts.dateFormat
		 *
		 * @param {string} format
		 *        The desired format where various time representations are prefixed
		 *        with `%`.
		 *
		 * @param {number} timestamp
		 *        The JavaScript timestamp.
		 *
		 * @param {boolean} [capitalize=false]
		 *        Upper case first letter in the return.
		 *
		 * @return {string}
		 *         The formatted date.
		 */
		H.dateFormat = function (format, timestamp, capitalize) {
		    return H.time.dateFormat(format, timestamp, capitalize);
		};


		

	}(Highcharts));
	(function (H) {
		/**
		 * (c) 2010-2018 Torstein Honsi
		 *
		 * License: www.highcharts.com/license
		 */



		var correctFloat = H.correctFloat,
		    defined = H.defined,
		    destroyObjectProperties = H.destroyObjectProperties,
		    fireEvent = H.fireEvent,
		    isNumber = H.isNumber,
		    merge = H.merge,
		    pick = H.pick,
		    deg2rad = H.deg2rad;

		/**
		 * The Tick class.
		 *
		 * @private
		 * @class
		 * @name Highcharts.Tick
		 *
		 * @param {Highcharts.Axis} axis
		 *
		 * @param {number} pos The position of the tick on the axis.
		 *
		 * @param {string} [type] The type of tick.
		 *
		 * @param {boolean} [noLabel=false] Wether to disable the label or not. Defaults to
		 * false.
		 *
		 * @param {object} [parameters] Optional parameters for the tick.
		 *
		 * @param {object} [parameters.tickmarkOffset] Set tickmarkOffset for the tick.
		 *
		 * @param {object} [parameters.category] Set category for the tick.
		 */
		H.Tick = function (axis, pos, type, noLabel, parameters) {
		    this.axis = axis;
		    this.pos = pos;
		    this.type = type || '';
		    this.isNew = true;
		    this.isNewLabel = true;
		    this.parameters = parameters || {};
		    // Usually undefined, numeric for grid axes
		    this.tickmarkOffset = this.parameters.tickmarkOffset;

		    this.options = this.parameters.options;
		    if (!type && !noLabel) {
		        this.addLabel();
		    }
		};

		/** @lends Highcharts.Tick.prototype */
		H.Tick.prototype = {

		    /**
		     * Write the tick label.
		     *
		     * @private
		     * @function Highcharts.Tick#addLabel
		     */
		    addLabel: function () {
		        var tick = this,
		            axis = tick.axis,
		            options = axis.options,
		            chart = axis.chart,
		            categories = axis.categories,
		            names = axis.names,
		            pos = tick.pos,
		            labelOptions = pick(
		                tick.options && tick.options.labels,
		                options.labels
		            ),
		            str,
		            tickPositions = axis.tickPositions,
		            isFirst = pos === tickPositions[0],
		            isLast = pos === tickPositions[tickPositions.length - 1],
		            value = this.parameters.category || (
		                categories ?
		                    pick(categories[pos], names[pos], pos) :
		                    pos
		            ),
		            label = tick.label,
		            tickPositionInfo = tickPositions.info,
		            dateTimeLabelFormat,
		            dateTimeLabelFormats,
		            i,
		            list;

		        // Set the datetime label format. If a higher rank is set for this
		        // position, use that. If not, use the general format.
		        if (axis.isDatetimeAxis && tickPositionInfo) {
		            dateTimeLabelFormats = chart.time.resolveDTLFormat(
		                options.dateTimeLabelFormats[
		                    (
		                        !options.grid &&
		                        tickPositionInfo.higherRanks[pos]
		                    ) ||
		                    tickPositionInfo.unitName
		                ]
		            );
		            dateTimeLabelFormat = dateTimeLabelFormats.main;
		        }

		        // set properties for access in render method
		        tick.isFirst = isFirst;
		        tick.isLast = isLast;

		        // Get the string
		        tick.formatCtx = {
		            axis: axis,
		            chart: chart,
		            isFirst: isFirst,
		            isLast: isLast,
		            dateTimeLabelFormat: dateTimeLabelFormat,
		            tickPositionInfo: tickPositionInfo,
		            value: axis.isLog ? correctFloat(axis.lin2log(value)) : value,
		            pos: pos
		        };
		        str = axis.labelFormatter.call(tick.formatCtx, this.formatCtx);

		        // Set up conditional formatting based on the format list if existing.
		        list = dateTimeLabelFormats && dateTimeLabelFormats.list;
		        if (list) {
		            tick.shortenLabel = function () {
		                for (i = 0; i < list.length; i++) {
		                    label.attr({
		                        text: axis.labelFormatter.call(H.extend(
		                            tick.formatCtx,
		                            { dateTimeLabelFormat: list[i] }
		                        ))
		                    });
		                    if (
		                        label.getBBox().width <
		                        axis.getSlotWidth(tick) - 2 *
		                            pick(labelOptions.padding, 5)
		                    ) {
		                        return;
		                    }
		                }
		                label.attr({
		                    text: ''
		                });
		            };
		        }

		        // first call
		        if (!defined(label)) {

		            tick.label = label =
		                defined(str) && labelOptions.enabled ?
		                    chart.renderer.text(
		                            str,
		                            0,
		                            0,
		                            labelOptions.useHTML
		                        )
		                        .add(axis.labelGroup) :
		                    null;

		            // Un-rotated length
		            if (label) {
		                // Without position absolute, IE export sometimes is wrong
		                if (!chart.styledMode) {
		                    label.css(merge(labelOptions.style));
		                }

		                label.textPxLength = label.getBBox().width;
		            }


		            // Base value to detect change for new calls to getBBox
		            tick.rotation = 0;

		        // update
		        } else if (label && label.textStr !== str) {
		            // When resetting text, also reset the width if dynamically set
		            // (#8809)
		            if (
		                label.textWidth &&
		                !(labelOptions.style && labelOptions.style.width) &&
		                !label.styles.width
		            ) {
		                label.css({ width: null });
		            }

		            label.attr({ text: str });
		        }
		    },

		    /**
		     * Get the offset height or width of the label
		     *
		     * @private
		     * @function Highcharts.Tick#getLabelSize
		     *
		     * @return {number}
		     */
		    getLabelSize: function () {
		        return this.label ?
		            this.label.getBBox()[this.axis.horiz ? 'height' : 'width'] :
		            0;
		    },

		    /**
		     * Handle the label overflow by adjusting the labels to the left and right
		     * edge, or hide them if they collide into the neighbour label.
		     *
		     * @private
		     * @function Highcharts.Tick#handleOverflow
		     *
		     * @param {Highcharts.PositionObject} xy
		     */
		    handleOverflow: function (xy) {
		        var tick = this,
		            axis = this.axis,
		            labelOptions = axis.options.labels,
		            pxPos = xy.x,
		            chartWidth = axis.chart.chartWidth,
		            spacing = axis.chart.spacing,
		            leftBound = pick(axis.labelLeft, Math.min(axis.pos, spacing[3])),
		            rightBound = pick(
		                axis.labelRight,
		                Math.max(
		                    !axis.isRadial ? axis.pos + axis.len : 0,
		                    chartWidth - spacing[1]
		                )
		            ),
		            label = this.label,
		            rotation = this.rotation,
		            factor = { left: 0, center: 0.5, right: 1 }[
		                axis.labelAlign || label.attr('align')
		            ],
		            labelWidth = label.getBBox().width,
		            slotWidth = axis.getSlotWidth(tick),
		            modifiedSlotWidth = slotWidth,
		            xCorrection = factor,
		            goRight = 1,
		            leftPos,
		            rightPos,
		            textWidth,
		            css = {};

		        // Check if the label overshoots the chart spacing box. If it does, move
		        // it. If it now overshoots the slotWidth, add ellipsis.
		        if (!rotation && pick(labelOptions.overflow, 'justify') === 'justify') {
		            leftPos = pxPos - factor * labelWidth;
		            rightPos = pxPos + (1 - factor) * labelWidth;

		            if (leftPos < leftBound) {
		                modifiedSlotWidth =
		                    xy.x + modifiedSlotWidth * (1 - factor) - leftBound;
		            } else if (rightPos > rightBound) {
		                modifiedSlotWidth =
		                    rightBound - xy.x + modifiedSlotWidth * factor;
		                goRight = -1;
		            }

		            modifiedSlotWidth = Math.min(slotWidth, modifiedSlotWidth); // #4177
		            if (modifiedSlotWidth < slotWidth && axis.labelAlign === 'center') {
		                xy.x += (
		                    goRight *
		                    (
		                        slotWidth -
		                        modifiedSlotWidth -
		                        xCorrection * (
		                            slotWidth - Math.min(labelWidth, modifiedSlotWidth)
		                        )
		                    )
		                );
		            }
		            // If the label width exceeds the available space, set a text width
		            // to be picked up below. Also, if a width has been set before, we
		            // need to set a new one because the reported labelWidth will be
		            // limited by the box (#3938).
		            if (
		                labelWidth > modifiedSlotWidth ||
		                (axis.autoRotation && (label.styles || {}).width)
		            ) {
		                textWidth = modifiedSlotWidth;
		            }

		        // Add ellipsis to prevent rotated labels to be clipped against the edge
		        // of the chart
		        } else if (rotation < 0 && pxPos - factor * labelWidth < leftBound) {
		            textWidth = Math.round(
		                pxPos / Math.cos(rotation * deg2rad) - leftBound
		            );
		        } else if (rotation > 0 && pxPos + factor * labelWidth > rightBound) {
		            textWidth = Math.round(
		                (chartWidth - pxPos) / Math.cos(rotation * deg2rad)
		            );
		        }

		        if (textWidth) {
		            if (tick.shortenLabel) {
		                tick.shortenLabel();
		            } else {
		                css.width = Math.floor(textWidth);
		                if (!(labelOptions.style || {}).textOverflow) {
		                    css.textOverflow = 'ellipsis';
		                }
		                label.css(css);

		            }
		        }
		    },

		    /**
		     * Get the x and y position for ticks and labels
		     *
		     * @private
		     * @function Highcharts.Tick#getPosition
		     *
		     * @param {boolean} horiz
		     *
		     * @param {number} tickPos
		     *
		     * @param {number} tickmarkOffset
		     *
		     * @param {boolean} [old]
		     *
		     * @return {number}
		     *
		     * @fires Highcharts.Tick#event:afterGetPosition
		     */
		    getPosition: function (horiz, tickPos, tickmarkOffset, old) {
		        var axis = this.axis,
		            chart = axis.chart,
		            cHeight = (old && chart.oldChartHeight) || chart.chartHeight,
		            pos;

		        pos = {
		            x: horiz ?
		                H.correctFloat(
		                    axis.translate(tickPos + tickmarkOffset, null, null, old) +
		                    axis.transB
		                ) :
		                (
		                    axis.left +
		                    axis.offset +
		                    (
		                        axis.opposite ?
		                            (
		                                (
		                                    (old && chart.oldChartWidth) ||
		                                    chart.chartWidth
		                                ) -
		                                axis.right -
		                                axis.left
		                            ) :
		                            0
		                    )
		                ),

		            y: horiz ?
		                (
		                    cHeight -
		                    axis.bottom +
		                    axis.offset -
		                    (axis.opposite ? axis.height : 0)
		                ) :
		                H.correctFloat(
		                    cHeight -
		                    axis.translate(tickPos + tickmarkOffset, null, null, old) -
		                    axis.transB
		                )
		        };

		        fireEvent(this, 'afterGetPosition', { pos: pos });

		        return pos;

		    },

		    /**
		     * Get the x, y position of the tick label
		     *
		     * @private
		     *
		     */
		    getLabelPosition: function (
		        x,
		        y,
		        label,
		        horiz,
		        labelOptions,
		        tickmarkOffset,
		        index,
		        step
		    ) {
		        var axis = this.axis,
		            transA = axis.transA,
		            reversed = axis.reversed,
		            staggerLines = axis.staggerLines,
		            rotCorr = axis.tickRotCorr || { x: 0, y: 0 },
		            yOffset = labelOptions.y,

		            // Adjust for label alignment if we use reserveSpace: true (#5286)
		            labelOffsetCorrection = (
		                !horiz && !axis.reserveSpaceDefault ?
		                    -axis.labelOffset * (
		                        axis.labelAlign === 'center' ? 0.5 : 1
		                    ) :
		                    0
		            ),
		            line,
		            pos = {};

		        if (!defined(yOffset)) {
		            if (axis.side === 0) {
		                yOffset = label.rotation ? -8 : -label.getBBox().height;
		            } else if (axis.side === 2) {
		                yOffset = rotCorr.y + 8;
		            } else {
		                // #3140, #3140
		                yOffset = Math.cos(label.rotation * deg2rad) *
		                    (rotCorr.y - label.getBBox(false, 0).height / 2);
		            }
		        }

		        x = x +
		            labelOptions.x +
		            labelOffsetCorrection +
		            rotCorr.x -
		            (
		                tickmarkOffset && horiz ?
		                    tickmarkOffset * transA * (reversed ? -1 : 1) :
		                    0
		            );
		        y = y + yOffset - (tickmarkOffset && !horiz ?
		            tickmarkOffset * transA * (reversed ? 1 : -1) : 0);

		        // Correct for staggered labels
		        if (staggerLines) {
		            line = (index / (step || 1) % staggerLines);
		            if (axis.opposite) {
		                line = staggerLines - line - 1;
		            }
		            y += line * (axis.labelOffset / staggerLines);
		        }

		        pos.x = x;
		        pos.y = Math.round(y);

		        fireEvent(this, 'afterGetLabelPosition', { pos: pos });

		        return pos;
		    },

		    /**
		     * Extendible method to return the path of the marker
		     *
		     * @private
		     *
		     */
		    getMarkPath: function (x, y, tickLength, tickWidth, horiz, renderer) {
		        return renderer.crispLine([
		            'M',
		            x,
		            y,
		            'L',
		            x + (horiz ? 0 : -tickLength),
		            y + (horiz ? tickLength : 0)
		        ], tickWidth);
		    },

		    /**
		     * Renders the gridLine.
		     *
		     * @private
		     *
		     * @param  {Boolean} old         Whether or not the tick is old
		     * @param  {number} opacity      The opacity of the grid line
		     * @param  {number} reverseCrisp Modifier for avoiding overlapping 1 or -1
		     * @return {undefined}
		     */
		    renderGridLine: function (old, opacity, reverseCrisp) {
		        var tick = this,
		            axis = tick.axis,
		            options = axis.options,
		            gridLine = tick.gridLine,
		            gridLinePath,
		            attribs = {},
		            pos = tick.pos,
		            type = tick.type,
		            tickmarkOffset = pick(tick.tickmarkOffset, axis.tickmarkOffset),
		            renderer = axis.chart.renderer,
		            gridPrefix = type ? type + 'Grid' : 'grid',
		            gridLineWidth = options[gridPrefix + 'LineWidth'],
		            gridLineColor = options[gridPrefix + 'LineColor'],
		            dashStyle = options[gridPrefix + 'LineDashStyle'];

		        if (!gridLine) {
		            if (!axis.chart.styledMode) {
		                attribs.stroke = gridLineColor;
		                attribs['stroke-width'] = gridLineWidth;
		                if (dashStyle) {
		                    attribs.dashstyle = dashStyle;
		                }
		            }
		            if (!type) {
		                attribs.zIndex = 1;
		            }
		            if (old) {
		                opacity = 0;
		            }
		            tick.gridLine = gridLine = renderer.path()
		                .attr(attribs)
		                .addClass(
		                    'highcharts-' + (type ? type + '-' : '') + 'grid-line'
		                )
		                .add(axis.gridGroup);

		        }

		        if (gridLine) {
		            gridLinePath = axis.getPlotLinePath(
		                pos + tickmarkOffset,
		                gridLine.strokeWidth() * reverseCrisp,
		                old,
		                'pass'
		            );

		            // If the parameter 'old' is set, the current call will be followed
		            // by another call, therefore do not do any animations this time
		            if (gridLinePath) {
		                gridLine[old || tick.isNew ? 'attr' : 'animate']({
		                    d: gridLinePath,
		                    opacity: opacity
		                });
		            }
		        }
		    },

		    /**
		     * Renders the tick mark.
		     *
		     * @private
		     *
		     * @param  {Object} xy           The position vector of the mark
		     * @param  {number} xy.x         The x position of the mark
		     * @param  {number} xy.y         The y position of the mark
		     * @param  {number} opacity      The opacity of the mark
		     * @param  {number} reverseCrisp Modifier for avoiding overlapping 1 or -1
		     * @return {undefined}
		     */
		    renderMark: function (xy, opacity, reverseCrisp) {
		        var tick = this,
		            axis = tick.axis,
		            options = axis.options,
		            renderer = axis.chart.renderer,
		            type = tick.type,
		            tickPrefix = type ? type + 'Tick' : 'tick',
		            tickSize = axis.tickSize(tickPrefix),
		            mark = tick.mark,
		            isNewMark = !mark,
		            x = xy.x,
		            y = xy.y,
		            tickWidth = pick(
		                options[tickPrefix + 'Width'],
		                !type && axis.isXAxis ? 1 : 0
		            ), // X axis defaults to 1
		            tickColor = options[tickPrefix + 'Color'];

		        if (tickSize) {

		            // negate the length
		            if (axis.opposite) {
		                tickSize[0] = -tickSize[0];
		            }

		            // First time, create it
		            if (isNewMark) {
		                tick.mark = mark = renderer.path()
		                    .addClass('highcharts-' + (type ? type + '-' : '') + 'tick')
		                    .add(axis.axisGroup);

		                if (!axis.chart.styledMode) {
		                    mark.attr({
		                        stroke: tickColor,
		                        'stroke-width': tickWidth
		                    });
		                }
		            }
		            mark[isNewMark ? 'attr' : 'animate']({
		                d: tick.getMarkPath(
		                    x,
		                    y,
		                    tickSize[0],
		                    mark.strokeWidth() * reverseCrisp,
		                    axis.horiz,
		                    renderer),
		                opacity: opacity
		            });

		        }
		    },

		    /**
		     * Renders the tick label.
		     * Note: The label should already be created in init(), so it should only
		     * have to be moved into place.
		     *
		     * @private
		     *
		     * @param  {Object} xy      The position vector of the label
		     * @param  {number} xy.x    The x position of the label
		     * @param  {number} xy.y    The y position of the label
		     * @param  {Boolean} old    Whether or not the tick is old
		     * @param  {number} opacity The opacity of the label
		     * @param  {number} index   The index of the tick
		     * @return {undefined}
		     */
		    renderLabel: function (xy, old, opacity, index) {
		        var tick = this,
		            axis = tick.axis,
		            horiz = axis.horiz,
		            options = axis.options,
		            label = tick.label,
		            labelOptions = options.labels,
		            step = labelOptions.step,
		            tickmarkOffset = pick(tick.tickmarkOffset, axis.tickmarkOffset),
		            show = true,
		            x = xy.x,
		            y = xy.y;
		        if (label && isNumber(x)) {
		            label.xy = xy = tick.getLabelPosition(
		                x,
		                y,
		                label,
		                horiz,
		                labelOptions,
		                tickmarkOffset,
		                index,
		                step
		            );

		            // Apply show first and show last. If the tick is both first and
		            // last, it is a single centered tick, in which case we show the
		            // label anyway (#2100).
		            if (
		                (
		                    tick.isFirst &&
		                    !tick.isLast &&
		                    !pick(options.showFirstLabel, 1)
		                ) ||
		                (
		                    tick.isLast &&
		                    !tick.isFirst &&
		                    !pick(options.showLastLabel, 1)
		                )
		            ) {
		                show = false;

		            // Handle label overflow and show or hide accordingly
		            } else if (
		                horiz &&
		                !labelOptions.step &&
		                !labelOptions.rotation &&
		                !old &&
		                opacity !== 0
		            ) {
		                tick.handleOverflow(xy);
		            }

		            // apply step
		            if (step && index % step) {
		                // show those indices dividable by step
		                show = false;
		            }

		            // Set the new position, and show or hide
		            if (show && isNumber(xy.y)) {
		                xy.opacity = opacity;
		                label[tick.isNewLabel ? 'attr' : 'animate'](xy);
		                tick.isNewLabel = false;
		            } else {
		                label.attr('y', -9999); // #1338
		                tick.isNewLabel = true;
		            }
		        }
		    },

		    /**
		     * Put everything in place
		     *
		     * @private
		     *
		     * @param index {Number}
		     * @param old {Boolean} Use old coordinates to prepare an animation into new
		     *                      position
		     */
		    render: function (index, old, opacity) {
		        var tick = this,
		            axis = tick.axis,
		            horiz = axis.horiz,
		            pos = tick.pos,
		            tickmarkOffset = pick(tick.tickmarkOffset, axis.tickmarkOffset),
		            xy = tick.getPosition(horiz, pos, tickmarkOffset, old),
		            x = xy.x,
		            y = xy.y,
		            reverseCrisp = ((horiz && x === axis.pos + axis.len) ||
		                (!horiz && y === axis.pos)) ? -1 : 1; // #1480, #1687

		        opacity = pick(opacity, 1);
		        this.isActive = true;

		        // Create the grid line
		        this.renderGridLine(old, opacity, reverseCrisp);

		        // create the tick mark
		        this.renderMark(xy, opacity, reverseCrisp);

		        // the label is created on init - now move it into place
		        this.renderLabel(xy, old, opacity, index);

		        tick.isNew = false;

		        H.fireEvent(this, 'afterRender');
		    },

		    /**
		     * Destructor for the tick prototype
		     *
		     * @private
		     * @function Highcharts.Tick#destroy
		     */
		    destroy: function () {
		        destroyObjectProperties(this, this.axis);
		    }
		};

	}(Highcharts));
	var Axis = (function (H) {
		/* *
		 * (c) 2010-2018 Torstein Honsi
		 *
		 * License: www.highcharts.com/license
		 */

		/**
		 * @callback Highcharts.AxisEventCallbackFunction
		 *
		 * @param {Highcharts.Axis} this
		 */

		/**
		 * Options for crosshairs on axes.
		 *
		 * @typedef {Highcharts.XAxisCrosshairOptions|Highcharts.YAxisCrosshairOptions} Highcharts.AxisCrosshairOptions
		 */

		/**
		 * @interface Highcharts.AxisLabelsFormatterContextObject
		 *//**
		 * @name Highcharts.AxisLabelsFormatterContextObject#axis
		 * @type {Highcharts.Axis}
		 *//**
		 * @name Highcharts.AxisLabelsFormatterContextObject#chart
		 * @type {Highcharts.Chart}
		 *//**
		 * @name Highcharts.AxisLabelsFormatterContextObject#isFirst
		 * @type {boolean}
		 *//**
		 * @name Highcharts.AxisLabelsFormatterContextObject#isLast
		 * @type {boolean}
		 *//**
		 * @name Highcharts.AxisLabelsFormatterContextObject#value
		 * @type {number}
		 */

		/**
		 * Options for axes.
		 *
		 * @typedef {Highcharts.XAxisOptions|Highcharts.YAxisOptions|Highcharts.ZAxisOptions} Highcharts.AxisOptions
		 */

		/**
		 * The returned object literal from the {@link Highcharts.Axis#getExtremes}
		 * function.
		 *
		 * @interface Highcharts.ExtremesObject
		 *//**
		 * The maximum value of the axis' associated series.
		 * @name Highcharts.ExtremesObject#dataMax
		 * @type {number}
		 *//**
		 * The minimum value of the axis' associated series.
		 * @name Highcharts.ExtremesObject#dataMin
		 * @type {number}
		 *//**
		 * The maximum axis value, either automatic or set manually. If the `max` option
		 * is not set, `maxPadding` is 0 and `endOnTick` is false, this value will be
		 * the same as `dataMax`.
		 * @name Highcharts.ExtremesObject#max
		 * @type {number}
		 *//**
		 * The minimum axis value, either automatic or set manually. If the `min` option
		 * is not set, `minPadding` is 0 and `startOnTick` is false, this value will be
		 * the same as `dataMin`.
		 * @name Highcharts.ExtremesObject#min
		 * @type {number}
		 *//**
		 * The user defined maximum, either from the `max` option or from a zoom or
		 * `setExtremes` action.
		 * @name Highcharts.ExtremesObject#userMax
		 * @type {number}
		 *//**
		 * The user defined minimum, either from the `min` option or from a zoom or
		 * `setExtremes` action.
		 * @name Highcharts.ExtremesObject#userMin
		 * @type {number}
		 */

		/**
		 * @callback Highcharts.AxisPointBreakEventCallbackFunction
		 *
		 * @param {Highcharts.Axis} this
		 *
		 * @param {Highcharts.AxisPointBreakEventObject} event
		 */

		/**
		 * @interface Highcharts.AxisPointBreakEventObject
		 *//**
		 * @name Highcharts.AxisPointBreakEventObject#brk
		 * @type {Highcharts.Dictionary<number>}
		 *//**
		 * @name Highcharts.AxisPointBreakEventObject#point
		 * @type {Highcharts.Point}
		 *//**
		 * @name Highcharts.AxisPointBreakEventObject#preventDefault
		 * @type {Function}
		 *//**
		 * @name Highcharts.AxisPointBreakEventObject#target
		 * @type {Highcharts.SVGElement}
		 *//**
		 * @name Highcharts.AxisPointBreakEventObject#type
		 * @type {"pointBreak"|"pointInBreak"}
		 */

		/**
		 * @callback Highcharts.AxisSetExtremesEventCallbackFunction
		 *
		 * @param {Highcharts.Axis} this
		 *
		 * @param {Highcharts.AxisSetExtremesEventObject} event
		 */

		/**
		 * @interface Highcharts.AxisSetExtremesEventObject
		 *//**
		 * @name Highcharts.AxisSetExtremesEventObject#dataMax
		 * @type {number}
		 *//**
		 * @name Highcharts.AxisSetExtremesEventObject#dataMin
		 * @type {number}
		 *//**
		 * @name Highcharts.AxisSetExtremesEventObject#max
		 * @type {number}
		 *//**
		 * @name Highcharts.AxisSetExtremesEventObject#min
		 * @type {number}
		 *//**
		 * @name Highcharts.AxisSetExtremesEventObject#preventDefault
		 * @type {Function}
		 *//**
		 * @name Highcharts.AxisSetExtremesEventObject#target
		 * @type {Highcharts.SVGElement}
		 *//**
		 * @name Highcharts.AxisSetExtremesEventObject#trigger
		 * @type {string}
		 *//**
		 * @name Highcharts.AxisSetExtremesEventObject#type
		 * @type {"setExtremes"}
		 *//**
		 * @name Highcharts.AxisSetExtremesEventObject#userMax
		 * @type {number}
		 *//**
		 * @name Highcharts.AxisSetExtremesEventObject#userMin
		 * @type {number}
		 */

		/**
		 * @callback Highcharts.AxisTickPositionerCallbackFunction
		 *
		 * @param {Highcharts.Axis} this
		 *
		 * @return {Array<number>}
		 */



		var addEvent = H.addEvent,
		    animObject = H.animObject,
		    arrayMax = H.arrayMax,
		    arrayMin = H.arrayMin,
		    color = H.color,
		    correctFloat = H.correctFloat,
		    defaultOptions = H.defaultOptions,
		    defined = H.defined,
		    deg2rad = H.deg2rad,
		    destroyObjectProperties = H.destroyObjectProperties,
		    extend = H.extend,
		    fireEvent = H.fireEvent,
		    format = H.format,
		    getMagnitude = H.getMagnitude,
		    isArray = H.isArray,
		    isNumber = H.isNumber,
		    isString = H.isString,
		    merge = H.merge,
		    normalizeTickInterval = H.normalizeTickInterval,
		    objectEach = H.objectEach,
		    pick = H.pick,
		    removeEvent = H.removeEvent,
		    splat = H.splat,
		    syncTimeout = H.syncTimeout,
		    Tick = H.Tick;

		/**
		 * Create a new axis object. Called internally when instanciating a new chart or
		 * adding axes by {@link Highcharts.Chart#addAxis}.
		 *
		 * A chart can have from 0 axes (pie chart) to multiples. In a normal, single
		 * series cartesian chart, there is one X axis and one Y axis.
		 *
		 * The X axis or axes are referenced by {@link Highcharts.Chart.xAxis}, which is
		 * an array of Axis objects. If there is only one axis, it can be referenced
		 * through `chart.xAxis[0]`, and multiple axes have increasing indices. The same
		 * pattern goes for Y axes.
		 *
		 * If you need to get the axes from a series object, use the `series.xAxis` and
		 * `series.yAxis` properties. These are not arrays, as one series can only be
		 * associated to one X and one Y axis.
		 *
		 * A third way to reference the axis programmatically is by `id`. Add an `id` in
		 * the axis configuration options, and get the axis by
		 * {@link Highcharts.Chart#get}.
		 *
		 * Configuration options for the axes are given in options.xAxis and
		 * options.yAxis.
		 *
		 * @class
		 * @name Highcharts.Axis
		 *
		 * @param {Highcharts.Chart} chart
		 *        The Chart instance to apply the axis on.
		 *
		 * @param {Highcharts.AxisOptions} options
		 *        Axis options.
		 */
		var Axis = function () {
		    this.init.apply(this, arguments);
		};

		H.extend(Axis.prototype, /** @lends Highcharts.Axis.prototype */{

		    /**
		     * The X axis or category axis. Normally this is the horizontal axis,
		     * though if the chart is inverted this is the vertical axis. In case of
		     * multiple axes, the xAxis node is an array of configuration objects.
		     *
		     * See the [Axis class](/class-reference/Highcharts.Axis) for programmatic
		     * access to the axis.
		     *
		     * @productdesc {highmaps}
		     * In Highmaps, the axis is hidden, but it is used behind the scenes to
		     * control features like zooming and panning. Zooming is in effect the same
		     * as setting the extremes of one of the exes.
		     *
		     * @type         {*|Array<*>}
		     * @optionparent xAxis
		     */
		    defaultOptions: {

		        /**
		         * When using multiple axis, the ticks of two or more opposite axes
		         * will automatically be aligned by adding ticks to the axis or axes
		         * with the least ticks, as if `tickAmount` were specified.
		         *
		         * This can be prevented by setting `alignTicks` to false. If the grid
		         * lines look messy, it's a good idea to hide them for the secondary
		         * axis by setting `gridLineWidth` to 0.
		         *
		         * If `startOnTick` or `endOnTick` in an Axis options are set to false,
		         * then the `alignTicks ` will be disabled for the Axis.
		         *
		         * Disabled for logarithmic axes.
		         *
		         * @type      {boolean}
		         * @default   true
		         * @product   highcharts highstock gantt
		         * @apioption xAxis.alignTicks
		         */

		        /**
		         * Whether to allow decimals in this axis' ticks. When counting
		         * integers, like persons or hits on a web page, decimals should
		         * be avoided in the labels.
		         *
		         * @see [minTickInterval](#xAxis.minTickInterval)
		         *
		         * @sample {highcharts|highstock} highcharts/yaxis/allowdecimals-true/
		         *         True by default
		         * @sample {highcharts|highstock} highcharts/yaxis/allowdecimals-false/
		         *         False
		         *
		         * @type      {boolean}
		         * @default   true
		         * @since     2.0
		         * @apioption xAxis.allowDecimals
		         */

		        /**
		         * When using an alternate grid color, a band is painted across the
		         * plot area between every other grid line.
		         *
		         * @sample {highcharts} highcharts/yaxis/alternategridcolor/
		         *         Alternate grid color on the Y axis
		         * @sample {highstock} stock/xaxis/alternategridcolor/
		         *         Alternate grid color on the Y axis
		         *
		         * @type      {Highcharts.ColorString}
		         * @apioption xAxis.alternateGridColor
		         */

		        /**
		         * An array defining breaks in the axis, the sections defined will be
		         * left out and all the points shifted closer to each other.
		         *
		         * @productdesc {highcharts}
		         * Requires that the broken-axis.js module is loaded.
		         *
		         * @sample {highcharts} highcharts/axisbreak/break-simple/
		         *         Simple break
		         * @sample {highcharts|highstock} highcharts/axisbreak/break-visualized/
		         *         Advanced with callback
		         * @sample {highstock} stock/demo/intraday-breaks/
		         *         Break on nights and weekends
		         *
		         * @type      {Array<*>}
		         * @since     4.1.0
		         * @product   highcharts highstock gantt
		         * @apioption xAxis.breaks
		         */

		        /**
		         * A number indicating how much space should be left between the start
		         * and the end of the break. The break size is given in axis units,
		         * so for instance on a `datetime` axis, a break size of 3600000 would
		         * indicate the equivalent of an hour.
		         *
		         * @type      {number}
		         * @default   0
		         * @since     4.1.0
		         * @product   highcharts highstock gantt
		         * @apioption xAxis.breaks.breakSize
		         */

		        /**
		         * The point where the break starts.
		         *
		         * @type      {number}
		         * @since     4.1.0
		         * @product   highcharts highstock gantt
		         * @apioption xAxis.breaks.from
		         */

		        /**
		         * Defines an interval after which the break appears again. By default
		         * the breaks do not repeat.
		         *
		         * @type      {number}
		         * @default   0
		         * @since     4.1.0
		         * @product   highcharts highstock gantt
		         * @apioption xAxis.breaks.repeat
		         */

		        /**
		         * The point where the break ends.
		         *
		         * @type      {number}
		         * @since     4.1.0
		         * @product   highcharts highstock gantt
		         * @apioption xAxis.breaks.to
		         */

		        /**
		         * If categories are present for the xAxis, names are used instead of
		         * numbers for that axis. Since Highcharts 3.0, categories can also
		         * be extracted by giving each point a [name](#series.data) and setting
		         * axis [type](#xAxis.type) to `category`. However, if you have multiple
		         * series, best practice remains defining the `categories` array.
		         *
		         * Example:
		         *
		         * <pre>categories: ['Apples', 'Bananas', 'Oranges']</pre>
		         *
		         * @sample {highcharts} highcharts/demo/line-labels/
		         *         With
		         * @sample {highcharts} highcharts/xaxis/categories/
		         *         Without
		         *
		         * @type      {Array<string>}
		         * @product   highcharts gantt
		         * @apioption xAxis.categories
		         */

		        /**
		         * The highest allowed value for automatically computed axis extremes.
		         *
		         * @see [floor](#xAxis.floor)
		         *
		         * @sample {highcharts|highstock} highcharts/yaxis/floor-ceiling/
		         *         Floor and ceiling
		         *
		         * @type       {number}
		         * @since      4.0
		         * @product    highcharts highstock gantt
		         * @apioption  xAxis.ceiling
		         */

		        /**
		         * A class name that opens for styling the axis by CSS, especially in
		         * Highcharts styled mode. The class name is applied to group elements
		         * for the grid, axis elements and labels.
		         *
		         * @sample {highcharts|highstock|highmaps} highcharts/css/axis/
		         *         Multiple axes with separate styling
		         *
		         * @type      {string}
		         * @since     5.0.0
		         * @apioption xAxis.className
		         */

		        /**
		         * Configure a crosshair that follows either the mouse pointer or the
		         * hovered point.
		         *
		         * In styled mode, the crosshairs are styled in the
		         * `.highcharts-crosshair`, `.highcharts-crosshair-thin` or
		         * `.highcharts-xaxis-category` classes.
		         *
		         * @productdesc {highstock}
		         * In Highstock, by default, the crosshair is enabled on the X axis and
		         * disabled on the Y axis.
		         *
		         * @sample {highcharts} highcharts/xaxis/crosshair-both/
		         *         Crosshair on both axes
		         * @sample {highstock} stock/xaxis/crosshairs-xy/
		         *         Crosshair on both axes
		         * @sample {highmaps} highcharts/xaxis/crosshair-both/
		         *         Crosshair on both axes
		         *
		         * @type      {boolean|*}
		         * @default   false
		         * @since     4.1
		         * @apioption xAxis.crosshair
		         */

		        /**
		         * A class name for the crosshair, especially as a hook for styling.
		         *
		         * @type      {string}
		         * @since     5.0.0
		         * @apioption xAxis.crosshair.className
		         */

		        /**
		         * The color of the crosshair. Defaults to `#cccccc` for numeric and
		         * datetime axes, and `rgba(204,214,235,0.25)` for category axes, where
		         * the crosshair by default highlights the whole category.
		         *
		         * @sample {highcharts|highstock|highmaps} highcharts/xaxis/crosshair-customized/
		         *         Customized crosshairs
		         *
		         * @type      {Highcharts.ColorString}
		         * @default   #cccccc
		         * @since     4.1
		         * @apioption xAxis.crosshair.color
		         */

		        /**
		         * The dash style for the crosshair. See
		         * [series.dashStyle](#plotOptions.series.dashStyle)
		         * for possible values.
		         *
		         * @sample {highcharts|highmaps} highcharts/xaxis/crosshair-dotted/
		         *         Dotted crosshair
		         * @sample {highstock} stock/xaxis/crosshair-dashed/
		         *         Dashed X axis crosshair
		         *
		         * @type       {string}
		         * @default    Solid
		         * @since      4.1
		         * @validvalue ["Solid", "ShortDash", "ShortDot", "ShortDashDot",
		         *             "ShortDashDotDot", "Dot", "Dash" ,"LongDash", "DashDot",
		         *             "LongDashDot", "LongDashDotDot"]
		         * @apioption  xAxis.crosshair.dashStyle
		         */

		        /**
		         * A label on the axis next to the crosshair.
		         *
		         * In styled mode, the label is styled with the
		         * `.highcharts-crosshair-label` class.
		         *
		         * @sample {highstock} stock/xaxis/crosshair-label/
		         *         Crosshair labels
		         * @sample {highstock} highcharts/css/crosshair-label/
		         *         Style mode
		         *
		         * @since     2.1
		         * @product   highstock
		         * @apioption xAxis.crosshair.label
		         */

		        /**
		         * Alignment of the label compared to the axis. Defaults to `left` for
		         * right-side axes, `right` for left-side axes and `center` for
		         * horizontal axes.
		         *
		         * @type      {string}
		         * @since     2.1
		         * @product   highstock
		         * @apioption xAxis.crosshair.label.align
		         */

		        /**
		         * The background color for the label. Defaults to the related series
		         * color, or `#666666` if that is not available.
		         *
		         * @type      {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
		         * @since     2.1
		         * @product   highstock
		         * @apioption xAxis.crosshair.label.backgroundColor
		         */

		        /**
		         * The border color for the crosshair label
		         *
		         * @type      {Highcharts.ColorString}
		         * @since     2.1
		         * @product   highstock
		         * @apioption xAxis.crosshair.label.borderColor
		         */

		        /**
		         * The border corner radius of the crosshair label.
		         *
		         * @type      {number}
		         * @default   3
		         * @since     2.1.10
		         * @product   highstock
		         * @apioption xAxis.crosshair.label.borderRadius
		         */

		        /**
		         * The border width for the crosshair label.
		         *
		         * @type      {number}
		         * @default   0
		         * @since     2.1
		         * @product   highstock
		         * @apioption xAxis.crosshair.label.borderWidth
		         */

		        /**
		         * A format string for the crosshair label. Defaults to `{value}` for
		         * numeric axes and `{value:%b %d, %Y}` for datetime axes.
		         *
		         * @type      {string}
		         * @since     2.1
		         * @product   highstock
		         * @apioption xAxis.crosshair.label.format
		         */

		        /**
		         * Formatter function for the label text.
		         *
		         * @type      {Highcharts.FormatterCallbackFunction<object>}
		         * @since     2.1
		         * @product   highstock
		         * @apioption xAxis.crosshair.label.formatter
		         */

		        /**
		         * Padding inside the crosshair label.
		         *
		         * @type      {number}
		         * @default   8
		         * @since     2.1
		         * @product   highstock
		         * @apioption xAxis.crosshair.label.padding
		         */

		        /**
		         * The shape to use for the label box.
		         *
		         * @type      {string}
		         * @default   callout
		         * @since     2.1
		         * @product   highstock
		         * @apioption xAxis.crosshair.label.shape
		         */

		        /**
		         * Text styles for the crosshair label.
		         *
		         * @type      {Highcharts.CSSObject}
		         * @default   {"color": "white", "fontWeight": "normal", "fontSize": "11px", "textAlign": "center"}
		         * @since     2.1
		         * @product   highstock
		         * @apioption xAxis.crosshair.label.style
		         */

		        /**
		         * Whether the crosshair should snap to the point or follow the pointer
		         * independent of points.
		         *
		         * @sample {highcharts|highstock} highcharts/xaxis/crosshair-snap-false/
		         *         True by default
		         * @sample {highmaps} maps/demo/latlon-advanced/
		         *         Snap is false
		         *
		         * @type      {boolean}
		         * @default   true
		         * @since     4.1
		         * @apioption xAxis.crosshair.snap
		         */

		        /**
		         * The pixel width of the crosshair. Defaults to 1 for numeric or
		         * datetime axes, and for one category width for category axes.
		         *
		         * @sample {highcharts} highcharts/xaxis/crosshair-customized/
		         *         Customized crosshairs
		         * @sample {highstock} highcharts/xaxis/crosshair-customized/
		         *         Customized crosshairs
		         * @sample {highmaps} highcharts/xaxis/crosshair-customized/
		         *         Customized crosshairs
		         *
		         * @type      {number}
		         * @default   1
		         * @since     4.1
		         * @apioption xAxis.crosshair.width
		         */

		        /**
		         * The Z index of the crosshair. Higher Z indices allow drawing the
		         * crosshair on top of the series or behind the grid lines.
		         *
		         * @type      {number}
		         * @default   2
		         * @since     4.1
		         * @apioption xAxis.crosshair.zIndex
		         */

		        /**
		         * For a datetime axis, the scale will automatically adjust to the
		         * appropriate unit. This member gives the default string
		         * representations used for each unit. For intermediate values,
		         * different units may be used, for example the `day` unit can be used
		         * on midnight and `hour` unit be used for intermediate values on the
		         * same axis. For an overview of the replacement codes, see
		         * [dateFormat](/class-reference/Highcharts#dateFormat). Defaults to:
		         *
		         * <pre>{
		         *     millisecond: '%H:%M:%S.%L',
		         *     second: '%H:%M:%S',
		         *     minute: '%H:%M',
		         *     hour: '%H:%M',
		         *     day: '%e. %b',
		         *     week: '%e. %b',
		         *     month: '%b \'%y',
		         *     year: '%Y'
		         * }</pre>
		         *
		         * @sample {highcharts} highcharts/xaxis/datetimelabelformats/
		         *         Different day format on X axis
		         * @sample {highstock} stock/xaxis/datetimelabelformats/
		         *         More information in x axis labels
		         *
		         * @product highcharts highstock gantt
		         */
		        dateTimeLabelFormats: {
		            millisecond: {
		                main: '%H:%M:%S.%L',
		                range: false
		            },
		            second: {
		                main: '%H:%M:%S',
		                range: false
		            },
		            minute: {
		                main: '%H:%M',
		                range: false
		            },
		            hour: {
		                main: '%H:%M',
		                range: false
		            },
		            day: {
		                main: '%e. %b'
		            },
		            week: {
		                main: '%e. %b'
		            },
		            month: {
		                main: '%b \'%y'
		            },
		            year: {
		                main: '%Y'
		            }
		        },

		        /**
		         * _Requires Accessibility module_
		         *
		         * Description of the axis to screen reader users.
		         *
		         * @type      {string}
		         * @since     5.0.0
		         * @apioption xAxis.description
		         */

		        /**
		         * Whether to force the axis to end on a tick. Use this option with
		         * the `maxPadding` option to control the axis end.
		         *
		         * @productdesc {highstock}
		         * In Highstock, `endOnTick` is always false when the navigator is
		         * enabled, to prevent jumpy scrolling.
		         *
		         * @sample {highcharts} highcharts/chart/reflow-true/
		         *         True by default
		         * @sample {highcharts} highcharts/yaxis/endontick/
		         *         False
		         * @sample {highstock} stock/demo/basic-line/
		         *         True by default
		         * @sample {highstock} stock/xaxis/endontick/
		         *         False
		         *
		         * @since 1.2.0
		         */
		        endOnTick: false,

		        /**
		         * Event handlers for the axis.
		         *
		         * @type      {*}
		         * @apioption xAxis.events
		         */

		        /**
		         * An event fired after the breaks have rendered.
		         *
		         * @see [breaks](#xAxis.breaks)
		         *
		         * @sample {highcharts} highcharts/axisbreak/break-event/
		         *         AfterBreak Event
		         *
		         * @type      {Highcharts.AxisEventCallbackFunction}
		         * @since     4.1.0
		         * @product   highcharts gantt
		         * @apioption xAxis.events.afterBreaks
		         */

		        /**
		         * As opposed to the `setExtremes` event, this event fires after the
		         * final min and max values are computed and corrected for `minRange`.
		         *
		         * Fires when the minimum and maximum is set for the axis, either by
		         * calling the `.setExtremes()` method or by selecting an area in the
		         * chart. One parameter, `event`, is passed to the function, containing
		         * common event information.
		         *
		         * The new user set minimum and maximum values can be found by
		         * `event.min` and `event.max`. These reflect the axis minimum and
		         * maximum in axis values. The actual data extremes are found in
		         * `event.dataMin` and `event.dataMax`.
		         *
		         * @type      {Highcharts.AxisEventCallbackFunction}
		         * @since     2.3
		         * @context   Axis
		         * @apioption xAxis.events.afterSetExtremes
		         */

		        /**
		         * An event fired when a break from this axis occurs on a point.
		         *
		         * @see [breaks](#xAxis.breaks)
		         *
		         * @sample {highcharts} highcharts/axisbreak/break-visualized/
		         *         Visualization of a Break
		         *
		         * @type      {Highcharts.AxisPointBreakEventCallbackFunction}
		         * @since     4.1.0
		         * @product   highcharts gantt
		         * @context   Axis
		         * @apioption xAxis.events.pointBreak
		         */

		        /**
		         * An event fired when a point falls inside a break from this axis.
		         *
		         * @type      {Highcharts.AxisPointBreakEventCallbackFunction}
		         * @product   highcharts highstock gantt
		         * @context   Axis
		         * @apioption xAxis.events.pointInBreak
		         */

		        /**
		         * Fires when the minimum and maximum is set for the axis, either by
		         * calling the `.setExtremes()` method or by selecting an area in the
		         * chart. One parameter, `event`, is passed to the function,
		         * containing common event information.
		         *
		         * The new user set minimum and maximum values can be found by
		         * `event.min` and `event.max`. These reflect the axis minimum and
		         * maximum in data values. When an axis is zoomed all the way out from
		         * the "Reset zoom" button, `event.min` and `event.max` are null, and
		         * the new extremes are set based on `this.dataMin` and `this.dataMax`.
		         *
		         * @sample {highstock} stock/xaxis/events-setextremes/
		         *         Log new extremes on x axis
		         *
		         * @type      {Highcharts.AxisSetExtremesEventCallbackFunction}
		         * @since     1.2.0
		         * @context   Axis
		         * @apioption xAxis.events.setExtremes
		         */

		        /**
		         * The lowest allowed value for automatically computed axis extremes.
		         *
		         * @see [ceiling](#yAxis.ceiling)
		         *
		         * @sample {highcharts} highcharts/yaxis/floor-ceiling/
		         *         Floor and ceiling
		         * @sample {highstock} stock/demo/lazy-loading/
		         *         Prevent negative stock price on Y axis
		         *
		         * @type      {number}
		         * @since     4.0
		         * @product   highcharts highstock gantt
		         * @apioption xAxis.floor
		         */

		        /**
		         * The dash or dot style of the grid lines. For possible values, see
		         * [this demonstration](https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/series-dashstyle-all/).
		         *
		         * @sample {highcharts} highcharts/yaxis/gridlinedashstyle/
		         *         Long dashes
		         * @sample {highstock} stock/xaxis/gridlinedashstyle/
		         *         Long dashes
		         *
		         * @type       {string}
		         * @default    Solid
		         * @since      1.2
		         * @validvalue ["Solid", "ShortDash", "ShortDot", "ShortDashDot",
		         *             "ShortDashDotDot", "Dot", "Dash" ,"LongDash", "DashDot",
		         *             "LongDashDot", "LongDashDotDot"]
		         * @apioption  xAxis.gridLineDashStyle
		         */

		        /**
		         * The Z index of the grid lines.
		         *
		         * @sample {highcharts|highstock} highcharts/xaxis/gridzindex/
		         *         A Z index of 4 renders the grid above the graph
		         *
		         * @type      {number}
		         * @default   1
		         * @product   highcharts highstock gantt
		         * @apioption xAxis.gridZIndex
		         */

		        /**
		         * An id for the axis. This can be used after render time to get
		         * a pointer to the axis object through `chart.get()`.
		         *
		         * @sample {highcharts} highcharts/xaxis/id/
		         *         Get the object
		         * @sample {highstock} stock/xaxis/id/
		         *         Get the object
		         *
		         * @type      {string}
		         * @since     1.2.0
		         * @apioption xAxis.id
		         */

		        /**
		         * The axis labels show the number or category for each tick.
		         *
		         * @productdesc {highmaps}
		         * X and Y axis labels are by default disabled in Highmaps, but the
		         * functionality is inherited from Highcharts and used on `colorAxis`,
		         * and can be enabled on X and Y axes too.
		         */
		        labels: {

		            /**
		             * What part of the string the given position is anchored to.
		             * If `left`, the left side of the string is at the axis position.
		             * Can be one of `"left"`, `"center"` or `"right"`. Defaults to
		             * an intelligent guess based on which side of the chart the axis
		             * is on and the rotation of the label.
		             *
		             * @see [reserveSpace](#xAxis.labels.reserveSpace)
		             *
		             * @sample {highcharts} highcharts/xaxis/labels-align-left/
		             *         Left
		             * @sample {highcharts} highcharts/xaxis/labels-align-right/
		             *         Right
		             * @sample {highcharts} highcharts/xaxis/labels-reservespace-true/
		             *         Left-aligned labels on a vertical category axis
		             *
		             * @type       {string}
		             * @validvalue ["left", "center", "right"]
		             * @apioption  xAxis.labels.align
		             */

		            /**
		             * For horizontal axes, the allowed degrees of label rotation
		             * to prevent overlapping labels. If there is enough space,
		             * labels are not rotated. As the chart gets narrower, it
		             * will start rotating the labels -45 degrees, then remove
		             * every second label and try again with rotations 0 and -45 etc.
		             * Set it to `false` to disable rotation, which will
		             * cause the labels to word-wrap if possible.
		             *
		             * @sample {highcharts|highstock} highcharts/xaxis/labels-autorotation-default/
		             *         Default auto rotation of 0 or -45
		             * @sample {highcharts|highstock} highcharts/xaxis/labels-autorotation-0-90/
		             *         Custom graded auto rotation
		             *
		             * @type      {Array<number>}
		             * @default   [-45]
		             * @since     4.1.0
		             * @product   highcharts highstock gantt
		             * @apioption xAxis.labels.autoRotation
		             */

		            /**
		             * When each category width is more than this many pixels, we don't
		             * apply auto rotation. Instead, we lay out the axis label with word
		             * wrap. A lower limit makes sense when the label contains multiple
		             * short words that don't extend the available horizontal space for
		             * each label.
		             *
		             * @sample {highcharts} highcharts/xaxis/labels-autorotationlimit/
		             *         Lower limit
		             *
		             * @type      {number}
		             * @default   80
		             * @since     4.1.5
		             * @product   highcharts gantt
		             * @apioption xAxis.labels.autoRotationLimit
		             */

		            /**
		             * Polar charts only. The label's pixel distance from the perimeter
		             * of the plot area.
		             *
		             * @type      {number}
		             * @default   15
		             * @product   highcharts gantt
		             * @apioption xAxis.labels.distance
		             */

		            /**
		             * Enable or disable the axis labels.
		             *
		             * @sample {highcharts} highcharts/xaxis/labels-enabled/
		             *         X axis labels disabled
		             * @sample {highstock} stock/xaxis/labels-enabled/
		             *         X axis labels disabled
		             *
		             * @default {highcharts|highstock|gantt} true
		             * @default {highmaps} false
		             */
		            enabled: true,

		            /**
		             * A [format string](https://www.highcharts.com/docs/chart-concepts/labels-and-string-formatting)
		             * for the axis label.
		             *
		             * @sample {highcharts|highstock} highcharts/yaxis/labels-format/
		             *         Add units to Y axis label
		             *
		             * @type      {string}
		             * @default   {value}
		             * @since     3.0
		             * @apioption xAxis.labels.format
		             */

		            /**
		             * Callback JavaScript function to format the label. The value
		             * is given by `this.value`. Additional properties for `this` are
		             * `axis`, `chart`, `isFirst` and `isLast`. The value of the default
		             * label formatter can be retrieved by calling
		             * `this.axis.defaultLabelFormatter.call(this)` within the function.
		             *
		             * Defaults to:
		             *
		             * <pre>function() {
		             *     return this.value;
		             * }</pre>
		             *
		             * @sample {highcharts} highcharts/xaxis/labels-formatter-linked/
		             *         Linked category names
		             * @sample {highcharts} highcharts/xaxis/labels-formatter-extended/
		             *         Modified numeric labels
		             * @sample {highstock} stock/xaxis/labels-formatter/
		             *         Added units on Y axis
		             *
		             * @type      {Highcharts.FormatterCallbackFunction<Highcharts.AxisLabelsFormatterContextObject>}
		             * @apioption xAxis.labels.formatter
		             */

		            /**
		             * The number of pixels to indent the labels per level in a treegrid
		             * axis.
		             *
		             * @sample gantt/treegrid-axis/demo
		             *         Indentation 10px by default.
		             * @sample gantt/treegrid-axis/indentation-0px
		             *         Indentation set to 0px.
		             *
		             * @product gantt
		             */
		            indentation: 10,

		            /**
		             * Horizontal axis only. When `staggerLines` is not set,
		             * `maxStaggerLines` defines how many lines the axis is allowed to
		             * add to automatically avoid overlapping X labels. Set to `1` to
		             * disable overlap detection.
		             *
		             * @deprecated
		             * @type      {number}
		             * @default   5
		             * @since     1.3.3
		             * @apioption xAxis.labels.maxStaggerLines
		             */

		            /**
		             * How to handle overflowing labels on horizontal axis. If set to
		             * `"allow"`, it will not be aligned at all. By default it
		             * `"justify"` labels inside the chart area. If there is room to
		             * move it, it will be aligned to the edge, else it will be removed.
		             *
		             * @type       {boolean|string}
		             * @default    justify
		             * @since      2.2.5
		             * @validvalue ["allow", "justify"]
		             * @apioption  xAxis.labels.overflow
		             */

		            /**
		             * The pixel padding for axis labels, to ensure white space between
		             * them.
		             *
		             * @type      {number}
		             * @default   5
		             * @product   highcharts gantt
		             * @apioption xAxis.labels.padding
		             */

		            /**
		             * Whether to reserve space for the labels. By default, space is
		             * reserved for the labels in these cases:
		             *
		             * * On all horizontal axes.
		             * * On vertical axes if `label.align` is `right` on a left-side
		             * axis or `left` on a right-side axis.
		             * * On vertical axes if `label.align` is `center`.
		             *
		             * This can be turned off when for example the labels are rendered
		             * inside the plot area instead of outside.
		             *
		             * @see [labels.align](#xAxis.labels.align)
		             *
		             * @sample {highcharts} highcharts/xaxis/labels-reservespace/
		             *         No reserved space, labels inside plot
		             * @sample {highcharts} highcharts/xaxis/labels-reservespace-true/
		             *         Left-aligned labels on a vertical category axis
		             *
		             * @type      {boolean}
		             * @since     4.1.10
		             * @product   highcharts gantt
		             * @apioption xAxis.labels.reserveSpace
		             */

		            /**
		             * Rotation of the labels in degrees.
		             *
		             * @sample {highcharts} highcharts/xaxis/labels-rotation/
		             *         X axis labels rotated 90°
		             *
		             * @type      {number}
		             * @default   0
		             * @apioption xAxis.labels.rotation
		             */

		            /**
		             * Horizontal axes only. The number of lines to spread the labels
		             * over to make room or tighter labels.
		             *
		             * @sample {highcharts} highcharts/xaxis/labels-staggerlines/
		             *         Show labels over two lines
		             * @sample {highstock} stock/xaxis/labels-staggerlines/
		             *         Show labels over two lines
		             *
		             * @type      {number}
		             * @since     2.1
		             * @apioption xAxis.labels.staggerLines
		             */

		            /**
		             * To show only every _n_'th label on the axis, set the step to _n_.
		             * Setting the step to 2 shows every other label.
		             *
		             * By default, the step is calculated automatically to avoid
		             * overlap. To prevent this, set it to 1\. This usually only
		             * happens on a category axis, and is often a sign that you have
		             * chosen the wrong axis type.
		             *
		             * Read more at
		             * [Axis docs](https://www.highcharts.com/docs/chart-concepts/axes)
		             * => What axis should I use?
		             *
		             * @sample {highcharts} highcharts/xaxis/labels-step/
		             *         Showing only every other axis label on a categorized
		             *         x-axis
		             * @sample {highcharts} highcharts/xaxis/labels-step-auto/
		             *         Auto steps on a category axis
		             *
		             * @type      {number}
		             * @since     2.1
		             * @apioption xAxis.labels.step
		             */

		            /**
		             * Whether to [use HTML](https://www.highcharts.com/docs/chart-concepts/labels-and-string-formatting#html)
		             * to render the labels.
		             *
		             * @type      {boolean}
		             * @default   false
		             * @apioption xAxis.labels.useHTML
		             */

		            /**
		             * The x position offset of the label relative to the tick position
		             * on the axis.
		             *
		             * @sample {highcharts} highcharts/xaxis/labels-x/
		             *         Y axis labels placed on grid lines
		             */
		            x: 0,

		            /**
		             * The y position offset of the label relative to the tick position
		             * on the axis. The default makes it adapt to the font size on
		             * bottom axis.
		             *
		             * @sample {highcharts} highcharts/xaxis/labels-x/
		             *         Y axis labels placed on grid lines
		             *
		             * @type      {number}
		             * @apioption xAxis.labels.y
		             */

		            /**
		             * The Z index for the axis labels.
		             *
		             * @type      {number}
		             * @default   7
		             * @apioption xAxis.labels.zIndex
		             */

		            /**
		             * CSS styles for the label. Use `whiteSpace: 'nowrap'` to prevent
		             * wrapping of category labels. Use `textOverflow: 'none'` to
		             * prevent ellipsis (dots).
		             *
		             * In styled mode, the labels are styled with the
		             * `.highcharts-axis-labels` class.
		             *
		             * @sample {highcharts} highcharts/xaxis/labels-style/
		             *         Red X axis labels
		             *
		             * @type      {Highcharts.CSSObject}
		             * @default   {"color": "#666666", "cursor": "default", "fontSize": "11px"}
		             */
		            style: {
		                /** @ignore-option */
		                color: '#666666',
		                /** @ignore-option */
		                cursor: 'default',
		                /** @ignore-option */
		                fontSize: '11px'
		            }
		        },

		        /**
		         * Index of another axis that this axis is linked to. When an axis is
		         * linked to a master axis, it will take the same extremes as
		         * the master, but as assigned by min or max or by setExtremes.
		         * It can be used to show additional info, or to ease reading the
		         * chart by duplicating the scales.
		         *
		         * @sample {highcharts} highcharts/xaxis/linkedto/
		         *         Different string formats of the same date
		         * @sample {highcharts} highcharts/yaxis/linkedto/
		         *         Y values on both sides
		         *
		         * @type      {number}
		         * @since     2.0.2
		         * @product   highcharts highstock gantt
		         * @apioption xAxis.linkedTo
		         */

		        /**
		         * The maximum value of the axis. If `null`, the max value is
		         * automatically calculated.
		         *
		         * If the [endOnTick](#yAxis.endOnTick) option is true, the `max` value
		         * might be rounded up.
		         *
		         * If a [tickAmount](#yAxis.tickAmount) is set, the axis may be extended
		         * beyond the set max in order to reach the given number of ticks. The
		         * same may happen in a chart with multiple axes, determined by [chart.
		         * alignTicks](#chart), where a `tickAmount` is applied internally.
		         *
		         * @sample {highcharts} highcharts/yaxis/max-200/
		         *         Y axis max of 200
		         * @sample {highcharts} highcharts/yaxis/max-logarithmic/
		         *         Y axis max on logarithmic axis
		         * @sample {highstock} stock/xaxis/min-max/
		         *         Fixed min and max on X axis
		         * @sample {highmaps} maps/axis/min-max/
		         *         Pre-zoomed to a specific area
		         *
		         * @type      {number}
		         * @apioption xAxis.max
		         */

		        /**
		         * Padding of the max value relative to the length of the axis. A
		         * padding of 0.05 will make a 100px axis 5px longer. This is useful
		         * when you don't want the highest data value to appear on the edge
		         * of the plot area. When the axis' `max` option is set or a max extreme
		         * is set using `axis.setExtremes()`, the maxPadding will be ignored.
		         *
		         * @sample {highcharts} highcharts/yaxis/maxpadding/
		         *         Max padding of 0.25 on y axis
		         * @sample {highstock} stock/xaxis/minpadding-maxpadding/
		         *         Greater min- and maxPadding
		         * @sample {highmaps} maps/chart/plotbackgroundcolor-gradient/
		         *         Add some padding
		         *
		         * @default   {highcharts} 0.01
		         * @default   {highstock|highmaps} 0
		         * @since     1.2.0
		         */
		        maxPadding: 0.01,

		        /**
		         * Deprecated. Use `minRange` instead.
		         *
		         * @deprecated
		         * @type      {number}
		         * @product   highcharts highstock
		         * @apioption xAxis.maxZoom
		         */

		        /**
		         * The minimum value of the axis. If `null` the min value is
		         * automatically calculated.
		         *
		         * If the [startOnTick](#yAxis.startOnTick) option is true (default),
		         * the `min` value might be rounded down.
		         *
		         * The automatically calculated minimum value is also affected by
		         * [floor](#yAxis.floor), [softMin](#yAxis.softMin),
		         * [minPadding](#yAxis.minPadding), [minRange](#yAxis.minRange)
		         * as well as [series.threshold](#plotOptions.series.threshold)
		         * and [series.softThreshold](#plotOptions.series.softThreshold).
		         *
		         * @sample {highcharts} highcharts/yaxis/min-startontick-false/
		         *         -50 with startOnTick to false
		         * @sample {highcharts} highcharts/yaxis/min-startontick-true/
		         *         -50 with startOnTick true by default
		         * @sample {highstock} stock/xaxis/min-max/
		         *         Set min and max on X axis
		         * @sample {highmaps} maps/axis/min-max/
		         *         Pre-zoomed to a specific area
		         *
		         * @type      {number}
		         * @apioption xAxis.min
		         */

		        /**
		         * The dash or dot style of the minor grid lines. For possible values,
		         * see [this demonstration](https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/series-dashstyle-all/).
		         *
		         * @sample {highcharts} highcharts/yaxis/minorgridlinedashstyle/
		         *         Long dashes on minor grid lines
		         * @sample {highstock} stock/xaxis/minorgridlinedashstyle/
		         *         Long dashes on minor grid lines
		         *
		         * @type       {string}
		         * @default    Solid
		         * @since      1.2
		         * @validvalue ["Solid", "ShortDash", "ShortDot", "ShortDashDot",
		         *             "ShortDashDotDot", "Dot", "Dash" ,"LongDash",
		         *             "DashDot", "LongDashDot", "LongDashDotDot"]
		         * @apioption  xAxis.minorGridLineDashStyle
		         */

		        /**
		         * Specific tick interval in axis units for the minor ticks. On a linear
		         * axis, if `"auto"`, the minor tick interval is calculated as a fifth
		         * of the tickInterval. If `null` or `undefined`, minor ticks are not
		         * shown.
		         *
		         * On logarithmic axes, the unit is the power of the value. For example,
		         * setting the minorTickInterval to 1 puts one tick on each of 0.1, 1,
		         * 10, 100 etc. Setting the minorTickInterval to 0.1 produces 9 ticks
		         * between 1 and 10, 10 and 100 etc.
		         *
		         * If user settings dictate minor ticks to become too dense, they don't
		         * make sense, and will be ignored to prevent performance problems.
		         *
		         * @sample {highcharts} highcharts/yaxis/minortickinterval-null/
		         *         Null by default
		         * @sample {highcharts} highcharts/yaxis/minortickinterval-5/
		         *         5 units
		         * @sample {highcharts} highcharts/yaxis/minortickinterval-log-auto/
		         *         "auto"
		         * @sample {highcharts} highcharts/yaxis/minortickinterval-log/
		         *         0.1
		         * @sample {highstock} stock/demo/basic-line/
		         *         Null by default
		         * @sample {highstock} stock/xaxis/minortickinterval-auto/
		         *         "auto"
		         *
		         * @type      {number|string|null}
		         * @apioption xAxis.minorTickInterval
		         */

		        /**
		         * The pixel length of the minor tick marks.
		         *
		         * @sample {highcharts} highcharts/yaxis/minorticklength/
		         *         10px on Y axis
		         * @sample {highstock} stock/xaxis/minorticks/
		         *         10px on Y axis
		         */
		        minorTickLength: 2,

		        /**
		         * The position of the minor tick marks relative to the axis line.
		         *  Can be one of `inside` and `outside`.
		         *
		         * @sample {highcharts} highcharts/yaxis/minortickposition-outside/
		         *         Outside by default
		         * @sample {highcharts} highcharts/yaxis/minortickposition-inside/
		         *         Inside
		         * @sample {highstock} stock/xaxis/minorticks/
		         *         Inside
		         *
		         * @validvalue ["inside", "outside"]
		         */
		        minorTickPosition: 'outside',

		        /**
		         * Enable or disable minor ticks. Unless
		         * [minorTickInterval](#xAxis.minorTickInterval) is set, the tick
		         * interval is calculated as a fifth of the `tickInterval`.
		         *
		         * On a logarithmic axis, minor ticks are laid out based on a best
		         * guess, attempting to enter approximately 5 minor ticks between
		         * each major tick.
		         *
		         * Prior to v6.0.0, ticks were unabled in auto layout by setting
		         * `minorTickInterval` to `"auto"`.
		         *
		         * @productdesc {highcharts}
		         * On axes using [categories](#xAxis.categories), minor ticks are not
		         * supported.
		         *
		         * @sample {highcharts} highcharts/yaxis/minorticks-true/
		         *         Enabled on linear Y axis
		         *
		         * @type      {boolean}
		         * @default   false
		         * @since     6.0.0
		         * @apioption xAxis.minorTicks
		         */

		        /**
		         * The pixel width of the minor tick mark.
		         *
		         * @sample {highcharts} highcharts/yaxis/minortickwidth/
		         *         3px width
		         * @sample {highstock} stock/xaxis/minorticks/
		         *         1px width
		         *
		         * @type      {number}
		         * @default   0
		         * @apioption xAxis.minorTickWidth
		         */

		        /**
		         * Padding of the min value relative to the length of the axis. A
		         * padding of 0.05 will make a 100px axis 5px longer. This is useful
		         * when you don't want the lowest data value to appear on the edge
		         * of the plot area. When the axis' `min` option is set or a min extreme
		         * is set using `axis.setExtremes()`, the minPadding will be ignored.
		         *
		         * @sample {highcharts} highcharts/yaxis/minpadding/
		         *         Min padding of 0.2
		         * @sample {highstock} stock/xaxis/minpadding-maxpadding/
		         *         Greater min- and maxPadding
		         * @sample {highmaps} maps/chart/plotbackgroundcolor-gradient/
		         *         Add some padding
		         *
		         * @default    {highcharts} 0.01
		         * @default    {highstock|highmaps} 0
		         * @since      1.2.0
		         * @product    highcharts highstock gantt
		         */
		        minPadding: 0.01,

		        /**
		         * The minimum range to display on this axis. The entire axis will not
		         * be allowed to span over a smaller interval than this. For example,
		         * for a datetime axis the main unit is milliseconds. If minRange is
		         * set to 3600000, you can't zoom in more than to one hour.
		         *
		         * The default minRange for the x axis is five times the smallest
		         * interval between any of the data points.
		         *
		         * On a logarithmic axis, the unit for the minimum range is the power.
		         * So a minRange of 1 means that the axis can be zoomed to 10-100,
		         * 100-1000, 1000-10000 etc.
		         *
		         * Note that the `minPadding`, `maxPadding`, `startOnTick` and
		         * `endOnTick` settings also affect how the extremes of the axis
		         * are computed.
		         *
		         * @sample {highcharts} highcharts/xaxis/minrange/
		         *         Minimum range of 5
		         * @sample {highstock} stock/xaxis/minrange/
		         *         Max zoom of 6 months overrides user selections
		         * @sample {highmaps} maps/axis/minrange/
		         *         Minimum range of 1000
		         *
		         * @type      {number}
		         * @apioption xAxis.minRange
		         */

		        /**
		         * The minimum tick interval allowed in axis values. For example on
		         * zooming in on an axis with daily data, this can be used to prevent
		         * the axis from showing hours. Defaults to the closest distance between
		         * two points on the axis.
		         *
		         * @type      {number}
		         * @since     2.3.0
		         * @apioption xAxis.minTickInterval
		         */

		        /**
		         * The distance in pixels from the plot area to the axis line.
		         * A positive offset moves the axis with it's line, labels and ticks
		         * away from the plot area. This is typically used when two or more
		         * axes are displayed on the same side of the plot. With multiple
		         * axes the offset is dynamically adjusted to avoid collision, this
		         * can be overridden by setting offset explicitly.
		         *
		         * @sample {highcharts} highcharts/yaxis/offset/
		         *         Y axis offset of 70
		         * @sample {highcharts} highcharts/yaxis/offset-centered/
		         *         Axes positioned in the center of the plot
		         * @sample {highstock} stock/xaxis/offset/
		         *         Y axis offset by 70 px
		         *
		         * @type      {number}
		         * @default   0
		         * @apioption xAxis.offset
		         */

		        /**
		         * Whether to display the axis on the opposite side of the normal. The
		         * normal is on the left side for vertical axes and bottom for
		         * horizontal, so the opposite sides will be right and top respectively.
		         * This is typically used with dual or multiple axes.
		         *
		         * @sample {highcharts} highcharts/yaxis/opposite/
		         *         Secondary Y axis opposite
		         * @sample {highstock} stock/xaxis/opposite/
		         *         Y axis on left side
		         *
		         * @type      {boolean}
		         * @default   false
		         * @apioption xAxis.opposite
		         */

		        /**
		         * In an ordinal axis, the points are equally spaced in the chart
		         * regardless of the actual time or x distance between them. This means
		         * that missing data periods (e.g. nights or weekends for a stock chart)
		         * will not take up space in the chart.
		         * Having `ordinal: false` will show any gaps created by the `gapSize`
		         * setting proportionate to their duration.
		         *
		         * In stock charts the X axis is ordinal by default, unless
		         * the boost module is used and at least one of the series' data length
		         * exceeds the [boostThreshold](#series.line.boostThreshold).
		         *
		         * @sample {highstock} stock/xaxis/ordinal-true/
		         *         True by default
		         * @sample {highstock} stock/xaxis/ordinal-false/
		         *         False
		         *
		         * @type      {boolean}
		         * @default   true
		         * @since     1.1
		         * @product   highstock
		         * @apioption xAxis.ordinal
		         */

		        /**
		         * Additional range on the right side of the xAxis. Works similar to
		         * `xAxis.maxPadding`, but value is set in milliseconds. Can be set for
		         * both main `xAxis` and the navigator's `xAxis`.
		         *
		         * @sample {highstock} stock/xaxis/overscroll/
		         *         One minute overscroll with live data
		         *
		         * @type      {number}
		         * @default   0
		         * @since     6.0.0
		         * @product   highstock
		         * @apioption xAxis.overscroll
		         */

		        /**
		         * Refers to the index in the [panes](#panes) array. Used for circular
		         * gauges and polar charts. When the option is not set then first pane
		         * will be used.
		         *
		         * @sample highcharts/demo/gauge-vu-meter
		         *         Two gauges with different center
		         *
		         * @type      {number}
		         * @product   highcharts
		         * @apioption xAxis.pane
		         */


		        /**
		         * The zoomed range to display when only defining one or none of `min`
		         * or `max`. For example, to show the latest month, a range of one month
		         * can be set.
		         *
		         * @sample {highstock} stock/xaxis/range/
		         *         Setting a zoomed range when the rangeSelector is disabled
		         *
		         * @type      {number}
		         * @product   highstock
		         * @apioption xAxis.range
		         */

		        /**
		         * Whether to reverse the axis so that the highest number is closest
		         * to the origin. If the chart is inverted, the x axis is reversed by
		         * default.
		         *
		         * @sample {highcharts} highcharts/yaxis/reversed/
		         *         Reversed Y axis
		         * @sample {highstock} stock/xaxis/reversed/
		         *         Reversed Y axis
		         *
		         * @type      {boolean}
		         * @default   false
		         * @apioption xAxis.reversed
		         */
		        // reversed: false,

		        /**
		         * This option determines how stacks should be ordered within a group.
		         * For example reversed xAxis also reverses stacks, so first series
		         * comes last in a group. To keep order like for non-reversed xAxis
		         * enable this option.
		         *
		         * @sample {highcharts} highcharts/xaxis/reversedstacks/
		         *         Reversed stacks comparison
		         * @sample {highstock} highcharts/xaxis/reversedstacks/
		         *         Reversed stacks comparison
		         *
		         * @type      {boolean}
		         * @default   false
		         * @since     6.1.1
		         * @product   highcharts highstock
		         * @apioption xAxis.reversedStacks
		         */

		        /**
		         * An optional scrollbar to display on the X axis in response to
		         * limiting the minimum and maximum of the axis values.
		         *
		         * In styled mode, all the presentational options for the scrollbar are
		         * replaced by the classes `.highcharts-scrollbar-thumb`,
		         * `.highcharts-scrollbar-arrow`, `.highcharts-scrollbar-button`,
		         * `.highcharts-scrollbar-rifles` and `.highcharts-scrollbar-track`.
		         *
		         * @sample {highstock} stock/yaxis/heatmap-scrollbars/
		         *         Heatmap with both scrollbars
		         *
		         * @extends   scrollbar
		         * @since     4.2.6
		         * @product   highstock
		         * @apioption xAxis.scrollbar
		         */

		        /**
		         * Whether to show the axis line and title when the axis has no data.
		         *
		         * @sample {highcharts} highcharts/yaxis/showempty/
		         *         When clicking the legend to hide series, one axis preserves
		         *         line and title, the other doesn't
		         * @sample {highstock} highcharts/yaxis/showempty/
		         *         When clicking the legend to hide series, one axis preserves
		         *         line and title, the other doesn't
		         *
		         * @type      {boolean}
		         * @default   true
		         * @since     1.1
		         * @apioption xAxis.showEmpty
		         */

		        /**
		         * Whether to show the first tick label.
		         *
		         * @sample {highcharts} highcharts/xaxis/showfirstlabel-false/
		         *         Set to false on X axis
		         * @sample {highstock} stock/xaxis/showfirstlabel/
		         *         Labels below plot lines on Y axis
		         *
		         * @type      {boolean}
		         * @default   true
		         * @apioption xAxis.showFirstLabel
		         */

		        /**
		         * Whether to show the last tick label. Defaults to `true` on cartesian
		         * charts, and `false` on polar charts.
		         *
		         * @sample {highcharts} highcharts/xaxis/showlastlabel-true/
		         *         Set to true on X axis
		         * @sample {highstock} stock/xaxis/showfirstlabel/
		         *         Labels below plot lines on Y axis
		         *
		         * @type      {boolean}
		         * @default   true
		         * @product   highcharts highstock gantt
		         * @apioption xAxis.showLastLabel
		         */

		        /**
		         * A soft maximum for the axis. If the series data maximum is less than
		         * this, the axis will stay at this maximum, but if the series data
		         * maximum is higher, the axis will flex to show all data.
		         *
		         * @sample highcharts/yaxis/softmin-softmax/
		         *         Soft min and max
		         *
		         * @type      {number}
		         * @since     5.0.1
		         * @product   highcharts highstock gantt
		         * @apioption xAxis.softMax
		         */

		        /**
		         * A soft minimum for the axis. If the series data minimum is greater
		         * than this, the axis will stay at this minimum, but if the series
		         * data minimum is lower, the axis will flex to show all data.
		         *
		         * @sample highcharts/yaxis/softmin-softmax/
		         *         Soft min and max
		         *
		         * @type      {number}
		         * @since     5.0.1
		         * @product   highcharts highstock gantt
		         * @apioption xAxis.softMin
		         */

		        /**
		         * For datetime axes, this decides where to put the tick between weeks.
		         *  0 = Sunday, 1 = Monday.
		         *
		         * @sample {highcharts} highcharts/xaxis/startofweek-monday/
		         *         Monday by default
		         * @sample {highcharts} highcharts/xaxis/startofweek-sunday/
		         *         Sunday
		         * @sample {highstock} stock/xaxis/startofweek-1
		         *         Monday by default
		         * @sample {highstock} stock/xaxis/startofweek-0
		         *         Sunday
		         *
		         * @product highcharts highstock gantt
		         */
		        startOfWeek: 1,

		        /**
		         * Whether to force the axis to start on a tick. Use this option with
		         * the `minPadding` option to control the axis start.
		         *
		         * @productdesc {highstock}
		         * In Highstock, `startOnTick` is always false when the navigator is
		         * enabled, to prevent jumpy scrolling.
		         *
		         * @sample {highcharts} highcharts/xaxis/startontick-false/
		         *         False by default
		         * @sample {highcharts} highcharts/xaxis/startontick-true/
		         *         True
		         * @sample {highstock} stock/xaxis/endontick/
		         *         False for Y axis
		         *
		         * @since 1.2.0
		         */
		        startOnTick: false,


		        /**
		         * The amount of ticks to draw on the axis. This opens up for aligning
		         * the ticks of multiple charts or panes within a chart. This option
		         * overrides the `tickPixelInterval` option.
		         *
		         * This option only has an effect on linear axes. Datetime, logarithmic
		         * or category axes are not affected.
		         *
		         * @sample {highcharts} highcharts/yaxis/tickamount/
		         *         8 ticks on Y axis
		         * @sample {highstock} highcharts/yaxis/tickamount/
		         *         8 ticks on Y axis
		         *
		         * @type      {number}
		         * @since     4.1.0
		         * @product   highcharts highstock gantt
		         * @apioption xAxis.tickAmount
		         */

		        /**
		         * The interval of the tick marks in axis units. When `undefined`, the
		         * tick interval is computed to approximately follow the
		         * [tickPixelInterval](#xAxis.tickPixelInterval) on linear and datetime
		         * axes. On categorized axes, a `undefined` tickInterval will default to
		         * 1, one category. Note that datetime axes are based on milliseconds,
		         * so for example an interval of one day is expressed as
		         * `24 * 3600 * 1000`.
		         *
		         * On logarithmic axes, the tickInterval is based on powers, so a
		         * tickInterval of 1 means one tick on each of 0.1, 1, 10, 100 etc. A
		         * tickInterval of 2 means a tick of 0.1, 10, 1000 etc. A tickInterval
		         * of 0.2 puts a tick on 0.1, 0.2, 0.4, 0.6, 0.8, 1, 2, 4, 6, 8, 10, 20,
		         * 40 etc.
		         *
		         *
		         * If the tickInterval is too dense for labels to be drawn, Highcharts
		         * may remove ticks.
		         *
		         * If the chart has multiple axes, the [alignTicks](#chart.alignTicks)
		         * option may interfere with the `tickInterval` setting.
		         *
		         * @see [tickPixelInterval](#xAxis.tickPixelInterval)
		         * @see [tickPositions](#xAxis.tickPositions)
		         * @see [tickPositioner](#xAxis.tickPositioner)
		         *
		         * @sample {highcharts} highcharts/xaxis/tickinterval-5/
		         *         Tick interval of 5 on a linear axis
		         * @sample {highstock} stock/xaxis/tickinterval/
		         *         Tick interval of 0.01 on Y axis
		         *
		         * @type      {number}
		         * @apioption xAxis.tickInterval
		         */

		        /**
		         * The pixel length of the main tick marks.
		         *
		         * @sample {highcharts} highcharts/xaxis/ticklength/
		         *         20 px tick length on the X axis
		         * @sample {highstock} stock/xaxis/ticks/
		         *         Formatted ticks on X axis
		         */
		        tickLength: 10,

		        /**
		         * If tickInterval is `null` this option sets the approximate pixel
		         * interval of the tick marks. Not applicable to categorized axis.
		         *
		         * The tick interval is also influenced by the [minTickInterval](
		         * #xAxis.minTickInterval) option, that, by default prevents ticks from
		         * being denser than the data points.
		         *
		         * @see [tickInterval](#xAxis.tickInterval)
		         * @see [tickPositioner](#xAxis.tickPositioner)
		         * @see [tickPositions](#xAxis.tickPositions)
		         *
		         * @sample {highcharts} highcharts/xaxis/tickpixelinterval-50/
		         *         50 px on X axis
		         * @sample {highstock} stock/xaxis/tickpixelinterval/
		         *         200 px on X axis
		         */
		        tickPixelInterval: 100,

		        /**
		         * For categorized axes only. If `on` the tick mark is placed in the
		         * center of the category, if `between` the tick mark is placed between
		         * categories. The default is `between` if the `tickInterval` is 1, else
		         * `on`.
		         *
		         * @sample {highcharts} highcharts/xaxis/tickmarkplacement-between/
		         *         "between" by default
		         * @sample {highcharts} highcharts/xaxis/tickmarkplacement-on/
		         *         "on"
		         *
		         * @product    highcharts gantt
		         * @validvalue ["on", "between"]
		         */
		        tickmarkPlacement: 'between',

		        /**
		         * The position of the major tick marks relative to the axis line.
		         * Can be one of `inside` and `outside`.
		         *
		         * @sample {highcharts} highcharts/xaxis/tickposition-outside/
		         *         "outside" by default
		         * @sample {highcharts} highcharts/xaxis/tickposition-inside/
		         *         "inside"
		         * @sample {highstock} stock/xaxis/ticks/
		         *         Formatted ticks on X axis
		         *
		         * @validvalue ["inside", "outside"]
		         */
		        tickPosition: 'outside',

		        /**
		         * A callback function returning array defining where the ticks are
		         * laid out on the axis. This overrides the default behaviour of
		         * [tickPixelInterval](#xAxis.tickPixelInterval) and [tickInterval](
		         * #xAxis.tickInterval). The automatic tick positions are accessible
		         * through `this.tickPositions` and can be modified by the callback.
		         *
		         * @see [tickPositions](#xAxis.tickPositions)
		         *
		         * @sample {highcharts} highcharts/xaxis/tickpositions-tickpositioner/
		         *         Demo of tickPositions and tickPositioner
		         * @sample {highstock} highcharts/xaxis/tickpositions-tickpositioner/
		         *         Demo of tickPositions and tickPositioner
		         *
		         * @type      {Highcharts.AxisTickPositionerCallbackFunction}
		         * @apioption xAxis.tickPositioner
		         */

		        /**
		         * An array defining where the ticks are laid out on the axis. This
		         * overrides the default behaviour of [tickPixelInterval](
		         * #xAxis.tickPixelInterval) and [tickInterval](#xAxis.tickInterval).
		         *
		         * @see [tickPositioner](#xAxis.tickPositioner)
		         *
		         * @sample {highcharts} highcharts/xaxis/tickpositions-tickpositioner/
		         *         Demo of tickPositions and tickPositioner
		         * @sample {highstock} highcharts/xaxis/tickpositions-tickpositioner/
		         *         Demo of tickPositions and tickPositioner
		         *
		         * @type      {Array<number>}
		         * @apioption xAxis.tickPositions
		         */

		        /**
		         * The pixel width of the major tick marks.
		         *
		         * In styled mode, the stroke width is given in the `.highcharts-tick`
		         * class.
		         *
		         * @sample {highcharts} highcharts/xaxis/tickwidth/
		         *         10 px width
		         * @sample {highcharts} highcharts/css/axis-grid/
		         *         Styled mode
		         * @sample {highstock} stock/xaxis/ticks/
		         *         Formatted ticks on X axis
		         * @sample {highstock} highcharts/css/axis-grid/
		         *         Styled mode
		         *
		         * @type      {number}
		         * @default   {highcharts} 1
		         * @default   {highstock} 1
		         * @default   {highmaps} 0
		         * @apioption xAxis.tickWidth
		         */

		        /**
		         * The axis title, showing next to the axis line.
		         *
		         * @productdesc {highmaps}
		         * In Highmaps, the axis is hidden by default, but adding an axis title
		         * is still possible. X axis and Y axis titles will appear at the bottom
		         * and left by default.
		         */
		        title: {

		            /**
		             * Deprecated. Set the `text` to `null` to disable the title.
		             *
		             * @deprecated
		             * @type      {string}
		             * @default   middle
		             * @product   highcharts
		             * @apioption xAxis.title.enabled
		             */

		            /**
		             * The pixel distance between the axis labels or line and the title.
		             * Defaults to 0 for horizontal axes, 10 for vertical
		             *
		             * @sample {highcharts} highcharts/xaxis/title-margin/
		             *         Y axis title margin of 60
		             *
		             * @type      {number}
		             * @apioption xAxis.title.margin
		             */

		            /**
		             * The distance of the axis title from the axis line. By default,
		             * this distance is computed from the offset width of the labels,
		             * the labels' distance from the axis and the title's margin.
		             * However when the offset option is set, it overrides all this.
		             *
		             * @sample {highcharts} highcharts/yaxis/title-offset/
		             *         Place the axis title on top of the axis
		             * @sample {highstock} highcharts/yaxis/title-offset/
		             *         Place the axis title on top of the Y axis
		             *
		             * @type      {number}
		             * @since     2.2.0
		             * @apioption xAxis.title.offset
		             */

		            /**
		             * Whether to reserve space for the title when laying out the axis.
		             *
		             * @type      {boolean}
		             * @default   true
		             * @since     5.0.11
		             * @product   highcharts highstock gantt
		             * @apioption xAxis.title.reserveSpace
		             */

		            /**
		             * The rotation of the text in degrees. 0 is horizontal, 270 is
		             * vertical reading from bottom to top.
		             *
		             * @sample {highcharts} highcharts/yaxis/title-offset/
		             *         Horizontal
		             *
		             * @type      {number}
		             * @default   0
		             * @apioption xAxis.title.rotation
		             */

		            /**
		             * The actual text of the axis title. It can contain basic HTML text
		             * markup like <b>, <i> and spans with style.
		             *
		             * @sample {highcharts} highcharts/xaxis/title-text/
		             *         Custom HTML
		             * @sample {highstock} stock/xaxis/title-text/
		             *         Titles for both axes
		             *
		             * @type      {string|null}
		             * @apioption xAxis.title.text
		             */

		            /**
		             * Alignment of the text, can be `"left"`, `"right"` or `"center"`.
		             * Default alignment depends on the
		             * [title.align](xAxis.title.align):
		             *
		             * Horizontal axes:
		             * - for `align` = `"low"`, `textAlign` is set to `left`
		             * - for `align` = `"middle"`, `textAlign` is set to `center`
		             * - for `align` = `"high"`, `textAlign` is set to `right`
		             *
		             * Vertical axes:
		             * - for `align` = `"low"` and `opposite` = `true`, `textAlign` is
		             *   set to `right`
		             * - for `align` = `"low"` and `opposite` = `false`, `textAlign` is
		             *   set to `left`
		             * - for `align` = `"middle"`, `textAlign` is set to `center`
		             * - for `align` = `"high"` and `opposite` = `true` `textAlign` is
		             *   set to `left`
		             * - for `align` = `"high"` and `opposite` = `false` `textAlign` is
		             *   set to `right`
		             *
		             * @type      {string}
		             * @apioption xAxis.title.textAlign
		             */

		            /**
		             * Whether to [use HTML](https://www.highcharts.com/docs/chart-concepts/labels-and-string-formatting#html)
		             * to render the axis title.
		             *
		             * @type      {boolean}
		             * @default   false
		             * @product   highcharts highstock gantt
		             * @apioption xAxis.title.useHTML
		             */

		            /**
		             * Horizontal pixel offset of the title position.
		             *
		             * @type      {number}
		             * @default   0
		             * @since     4.1.6
		             * @product   highcharts highstock gantt
		             * @apioption xAxis.title.x
		             */

		            /**
		             * Vertical pixel offset of the title position.
		             *
		             * @type      {number}
		             * @product   highcharts highstock gantt
		             * @apioption xAxis.title.y
		             */

		            /**
		             * Alignment of the title relative to the axis values. Possible
		             * values are "low", "middle" or "high".
		             *
		             * @sample {highcharts} highcharts/xaxis/title-align-low/
		             *         "low"
		             * @sample {highcharts} highcharts/xaxis/title-align-center/
		             *         "middle" by default
		             * @sample {highcharts} highcharts/xaxis/title-align-high/
		             *         "high"
		             * @sample {highcharts} highcharts/yaxis/title-offset/
		             *         Place the Y axis title on top of the axis
		             * @sample {highstock} stock/xaxis/title-align/
		             *         Aligned to "high" value
		             *
		             * @validvalue ["low", "middle", "high"]
		             */
		            align: 'middle',

		            /**
		             * CSS styles for the title. If the title text is longer than the
		             * axis length, it will wrap to multiple lines by default. This can
		             * be customized by setting `textOverflow: 'ellipsis'`, by
		             * setting a specific `width` or by setting `whiteSpace: 'nowrap'`.
		             *
		             * In styled mode, the stroke width is given in the
		             * `.highcharts-axis-title` class.
		             *
		             * @sample {highcharts} highcharts/xaxis/title-style/
		             *         Red
		             * @sample {highcharts} highcharts/css/axis/
		             *         Styled mode
		             *
		             * @type    {Highcharts.CSSObject}
		             * @default {"color": "#666666"}
		             */
		            style: {
		                /** @ignore-option */
		                color: '#666666'
		            }
		        },

		        /**
		         * The type of axis. Can be one of `linear`, `logarithmic`, `datetime`
		         * or `category`. In a datetime axis, the numbers are given in
		         * milliseconds, and tick marks are placed on appropriate values like
		         * full hours or days. In a category axis, the
		         * [point names](#series.line.data.name) of the chart's series are used
		         * for categories, if not a [categories](#xAxis.categories) array is
		         * defined.
		         *
		         * @sample {highcharts} highcharts/xaxis/type-linear/
		         *         Linear
		         * @sample {highcharts} highcharts/yaxis/type-log/
		         *         Logarithmic
		         * @sample {highcharts} highcharts/yaxis/type-log-minorgrid/
		         *         Logarithmic with minor grid lines
		         * @sample {highcharts} highcharts/xaxis/type-log-both/
		         *         Logarithmic on two axes
		         * @sample {highcharts} highcharts/yaxis/type-log-negative/
		         *         Logarithmic with extension to emulate negative values
		         *
		         * @product    highcharts gantt
		         * @validvalue ["linear", "logarithmic", "datetime", "category"]
		         */
		        type: 'linear',

		        /**
		         * The type of axis. Can be one of `linear`, `logarithmic`, `datetime`,
		         * `category` or `treegrid`. Defaults to `treegrid` for Gantt charts,
		         * `linear` for other chart types.
		         *
		         * In a datetime axis, the numbers are given in milliseconds, and tick
		         * marks are placed on appropriate values, like full hours or days. In a
		         * category or treegrid axis, the [point names](#series.line.data.name)
		         * of the chart's series are used for categories, if a
		         * [categories](#xAxis.categories) array is not defined.
		         *
		         * @sample {highcharts} highcharts/yaxis/type-log-minorgrid/
		         *         Logarithmic with minor grid lines
		         * @sample {highcharts} highcharts/yaxis/type-log-negative/
		         *         Logarithmic with extension to emulate negative values
		         * @sample {gantt} gantt/treegrid-axis/demo
		         *         Treegrid axis
		         *
		         * @default    {highcharts} linear
		         * @default    {gantt} treegrid
		         * @product    highcharts gantt
		         * @validvalue ["linear", "logarithmic", "datetime", "category",
		         *             "treegrid"]
		         * @apioption  yAxis.type
		         */

		        /**
		         * Applies only when the axis `type` is `category`. When `uniqueNames`
		         * is true, points are placed on the X axis according to their names.
		         * If the same point name is repeated in the same or another series,
		         * the point is placed on the same X position as other points of the
		         * same name. When `uniqueNames` is false, the points are laid out in
		         * increasing X positions regardless of their names, and the X axis
		         * category will take the name of the last point in each position.
		         *
		         * @sample {highcharts} highcharts/xaxis/uniquenames-true/
		         *         True by default
		         * @sample {highcharts} highcharts/xaxis/uniquenames-false/
		         *         False
		         *
		         * @type      {boolean}
		         * @default   true
		         * @since     4.2.7
		         * @product   highcharts gantt
		         * @apioption xAxis.uniqueNames
		         */

		        /**
		         * Datetime axis only. An array determining what time intervals the
		         * ticks are allowed to fall on. Each array item is an array where the
		         * first value is the time unit and the second value another array of
		         * allowed multiples. Defaults to:
		         *
		         * <pre>units: [[
		         *     'millisecond', // unit name
		         *     [1, 2, 5, 10, 20, 25, 50, 100, 200, 500] // allowed multiples
		         * ], [
		         *     'second',
		         *     [1, 2, 5, 10, 15, 30]
		         * ], [
		         *     'minute',
		         *     [1, 2, 5, 10, 15, 30]
		         * ], [
		         *     'hour',
		         *     [1, 2, 3, 4, 6, 8, 12]
		         * ], [
		         *     'day',
		         *     [1]
		         * ], [
		         *     'week',
		         *     [1]
		         * ], [
		         *     'month',
		         *     [1, 3, 6]
		         * ], [
		         *     'year',
		         *     null
		         * ]]</pre>
		         *
		         * @type      {Array<Array<string,(Array<number>|null)>>}
		         * @product   highcharts highstock gantt
		         * @apioption xAxis.units
		         */

		        /**
		         * Whether axis, including axis title, line, ticks and labels, should
		         * be visible.
		         *
		         * @type      {boolean}
		         * @default   true
		         * @since     4.1.9
		         * @product   highcharts highstock gantt
		         * @apioption xAxis.visible
		         */

		        /**
		         * Color of the minor, secondary grid lines.
		         *
		         * In styled mode, the stroke width is given in the
		         * `.highcharts-minor-grid-line` class.
		         *
		         * @sample {highcharts} highcharts/yaxis/minorgridlinecolor/
		         *         Bright grey lines from Y axis
		         * @sample {highcharts|highstock} highcharts/css/axis-grid/
		         *         Styled mode
		         * @sample {highstock} stock/xaxis/minorgridlinecolor/
		         *         Bright grey lines from Y axis
		         *
		         * @type    {Highcharts.ColorString}
		         * @default #f2f2f2
		         */
		        minorGridLineColor: '#f2f2f2',

		        /**
		         * Width of the minor, secondary grid lines.
		         *
		         * In styled mode, the stroke width is given in the
		         * `.highcharts-grid-line` class.
		         *
		         * @sample {highcharts} highcharts/yaxis/minorgridlinewidth/
		         *         2px lines from Y axis
		         * @sample {highcharts|highstock} highcharts/css/axis-grid/
		         *         Styled mode
		         * @sample {highstock} stock/xaxis/minorgridlinewidth/
		         *         2px lines from Y axis
		         */
		        minorGridLineWidth: 1,

		        /**
		         * Color for the minor tick marks.
		         *
		         * @sample {highcharts} highcharts/yaxis/minortickcolor/
		         *         Black tick marks on Y axis
		         * @sample {highstock} stock/xaxis/minorticks/
		         *         Black tick marks on Y axis
		         *
		         * @type    {Highcharts.ColorString}
		         * @default #999999
		         */
		        minorTickColor: '#999999',

		        /**
		         * The color of the line marking the axis itself.
		         *
		         * In styled mode, the line stroke is given in the
		         * `.highcharts-axis-line` or `.highcharts-xaxis-line` class.
		         *
		         * @productdesc {highmaps}
		         * In Highmaps, the axis line is hidden by default, because the axis is
		         * not visible by default.
		         *
		         * @sample {highcharts} highcharts/yaxis/linecolor/
		         *         A red line on Y axis
		         * @sample {highcharts|highstock} highcharts/css/axis/
		         *         Axes in styled mode
		         * @sample {highstock} stock/xaxis/linecolor/
		         *         A red line on X axis
		         *
		         * @type    {Highcharts.ColorString}
		         * @default #ccd6eb
		         */
		        lineColor: '#ccd6eb',

		        /**
		         * The width of the line marking the axis itself.
		         *
		         * In styled mode, the stroke width is given in the
		         * `.highcharts-axis-line` or `.highcharts-xaxis-line` class.
		         *
		         * @sample {highcharts} highcharts/yaxis/linecolor/
		         *         A 1px line on Y axis
		         * @sample {highcharts|highstock} highcharts/css/axis/
		         *         Axes in styled mode
		         * @sample {highstock} stock/xaxis/linewidth/
		         *         A 2px line on X axis
		         *
		         * @default {highcharts|highstock} 1
		         * @default {highmaps} 0
		         */
		        lineWidth: 1,

		        /**
		         * Color of the grid lines extending the ticks across the plot area.
		         *
		         * In styled mode, the stroke is given in the `.highcharts-grid-line`
		         * class.
		         *
		         * @productdesc {highmaps}
		         * In Highmaps, the grid lines are hidden by default.
		         *
		         * @sample {highcharts} highcharts/yaxis/gridlinecolor/
		         *         Green lines
		         * @sample {highcharts|highstock} highcharts/css/axis-grid/
		         *         Styled mode
		         * @sample {highstock} stock/xaxis/gridlinecolor/
		         *         Green lines
		         *
		         * @type    {Highcharts.ColorString}
		         * @default #e6e6e6
		         */
		        gridLineColor: '#e6e6e6',

		        // gridLineDashStyle: 'solid',

		        /**
		         * The width of the grid lines extending the ticks across the plot area.
		         *
		         * In styled mode, the stroke width is given in the
		         * `.highcharts-grid-line` class.
		         *
		         * @sample {highcharts} highcharts/yaxis/gridlinewidth/
		         *         2px lines
		         * @sample {highcharts|highstock} highcharts/css/axis-grid/
		         *         Styled mode
		         * @sample {highstock} stock/xaxis/gridlinewidth/
		         *         2px lines
		         *
		         * @type      {number}
		         * @default   0
		         * @apioption xAxis.gridLineWidth
		         */
		        // gridLineWidth: 0,

		        /**
		         * Color for the main tick marks.
		         *
		         * In styled mode, the stroke is given in the `.highcharts-tick`
		         * class.
		         *
		         * @sample {highcharts} highcharts/xaxis/tickcolor/
		         *         Red ticks on X axis
		         * @sample {highcharts|highstock} highcharts/css/axis-grid/
		         *         Styled mode
		         * @sample {highstock} stock/xaxis/ticks/
		         *         Formatted ticks on X axis
		         *
		         * @type    {Highcharts.ColorString}
		         * @default #ccd6eb
		         */
		        tickColor: '#ccd6eb'

		        // tickWidth: 1
		    },

		    /**
		     * The Y axis or value axis. Normally this is the vertical axis,
		     * though if the chart is inverted this is the horizontal axis.
		     * In case of multiple axes, the yAxis node is an array of
		     * configuration objects.
		     *
		     * See [the Axis object](/class-reference/Highcharts.Axis) for programmatic
		     * access to the axis.
		     *
		     * @type         {*|Array<*>}
		     * @extends      xAxis
		     * @excluding    ordinal,overscroll,currentDateIndicator
		     * @optionparent yAxis
		     */
		    defaultYAxisOptions: {

		        /**
		         * In a polar chart, this is the angle of the Y axis in degrees, where
		         * 0 is up and 90 is right. The angle determines the position of the
		         * axis line and the labels, though the coordinate system is unaffected.
		         *
		         * @sample {highcharts} highcharts/yaxis/angle/
		         *         Dual axis polar chart
		         *
		         * @type      {number}
		         * @default   0
		         * @since     4.2.7
		         * @product   highcharts
		         * @apioption yAxis.angle
		         */

		        /**
		         * Polar charts only. Whether the grid lines should draw as a polygon
		         * with straight lines between categories, or as circles. Can be either
		         * `circle` or `polygon`.
		         *
		         * @sample {highcharts} highcharts/demo/polar-spider/
		         *         Polygon grid lines
		         * @sample {highcharts} highcharts/yaxis/gridlineinterpolation/
		         *         Circle and polygon
		         *
		         * @type       {string}
		         * @product    highcharts
		         * @validvalue ["circle", "polygon"]
		         * @apioption  yAxis.gridLineInterpolation
		         */

		        /**
		         * The height of the Y axis. If it's a number, it is interpreted as
		         * pixels.
		         *
		         * Since Highstock 2: If it's a percentage string, it is interpreted
		         * as percentages of the total plot height.
		         *
		         * @see [yAxis.top](#yAxis.top)
		         *
		         * @sample {highstock} stock/demo/candlestick-and-volume/
		         *         Percentage height panes
		         *
		         * @type      {number|string}
		         * @product   highstock
		         * @apioption yAxis.height
		         */

		        /**
		         * Solid gauge only. Unless [stops](#yAxis.stops) are set, the color
		         * to represent the maximum value of the Y axis.
		         *
		         * @sample {highcharts} highcharts/yaxis/mincolor-maxcolor/
		         *         Min and max colors
		         *
		         * @type      {Highcharts.ColorString}
		         * @default   #003399
		         * @since     4.0
		         * @product   highcharts
		         * @apioption yAxis.maxColor
		         */

		        /**
		         * Solid gauge only. Unless [stops](#yAxis.stops) are set, the color
		         * to represent the minimum value of the Y axis.
		         *
		         * @sample {highcharts} highcharts/yaxis/mincolor-maxcolor/
		         *         Min and max color
		         *
		         * @type      {Highcharts.ColorString}
		         * @default   #e6ebf5
		         * @since     4.0
		         * @product   highcharts
		         * @apioption yAxis.minColor
		         */

		        /**
		         * Whether to reverse the axis so that the highest number is closest
		         * to the origin.
		         *
		         * @sample {highcharts} highcharts/yaxis/reversed/
		         *         Reversed Y axis
		         * @sample {highstock} stock/xaxis/reversed/
		         *         Reversed Y axis
		         *
		         * @type      {boolean}
		         * @default   {highcharts} false
		         * @default   {highstock} false
		         * @default   {highmaps} true
		         * @default   {gantt} true
		         * @apioption yAxis.reversed
		         */

		        /**
		         * If `true`, the first series in a stack will be drawn on top in a
		         * positive, non-reversed Y axis. If `false`, the first series is in
		         * the base of the stack.
		         *
		         * @sample {highcharts} highcharts/yaxis/reversedstacks-false/
		         *         Non-reversed stacks
		         * @sample {highstock} highcharts/yaxis/reversedstacks-false/
		         *         Non-reversed stacks
		         *
		         * @type      {boolean}
		         * @default   true
		         * @since     3.0.10
		         * @product   highcharts highstock
		         * @apioption yAxis.reversedStacks
		         */

		        /**
		         * Solid gauge series only. Color stops for the solid gauge. Use this
		         * in cases where a linear gradient between a `minColor` and `maxColor`
		         * is not sufficient. The stops is an array of tuples, where the first
		         * item is a float between 0 and 1 assigning the relative position in
		         * the gradient, and the second item is the color.
		         *
		         * For solid gauges, the Y axis also inherits the concept of
		         * [data classes](http://api.highcharts.com/highmaps#colorAxis.dataClasses)
		         * from the Highmaps color axis.
		         *
		         * @see [minColor](#yAxis.minColor)
		         * @see [maxColor](#yAxis.maxColor)
		         *
		         * @sample {highcharts} highcharts/demo/gauge-solid/
		         *         True by default
		         *
		         * @type      {Array<Array<number,Highcharts.ColorString>>}
		         * @since     4.0
		         * @product   highcharts
		         * @apioption yAxis.stops
		         */

		        /**
		         * The pixel width of the major tick marks.
		         *
		         * @sample {highcharts} highcharts/xaxis/tickwidth/ 10 px width
		         * @sample {highstock} stock/xaxis/ticks/ Formatted ticks on X axis
		         *
		         * @type      {number}
		         * @default   0
		         * @product   highcharts highstock gantt
		         * @apioption yAxis.tickWidth
		         */

		        /**
		         * Angular gauges and solid gauges only. The label's pixel distance
		         * from the perimeter of the plot area.
		         *
		         * @type      {number}
		         * @default   -25
		         * @product   highcharts
		         * @apioption yAxis.labels.distance
		         */

		        /**
		         * The y position offset of the label relative to the tick position
		         * on the axis.
		         *
		         * @sample {highcharts} highcharts/xaxis/labels-x/
		         *         Y axis labels placed on grid lines
		         *
		         * @type      {number}
		         * @default   {highcharts} 3
		         * @default   {highstock} -2
		         * @default   {highmaps} 3
		         * @apioption yAxis.labels.y
		         */

		        /**
		         * @productdesc {highstock}
		         * In Highstock, `endOnTick` is always false when the navigator is
		         * enabled, to prevent jumpy scrolling.
		         */
		        endOnTick: true,

		        /**
		         * Padding of the max value relative to the length of the axis. A
		         * padding of 0.05 will make a 100px axis 5px longer. This is useful
		         * when you don't want the highest data value to appear on the edge
		         * of the plot area. When the axis' `max` option is set or a max extreme
		         * is set using `axis.setExtremes()`, the maxPadding will be ignored.
		         *
		         * @sample {highcharts} highcharts/yaxis/maxpadding-02/
		         *         Max padding of 0.2
		         * @sample {highstock} stock/xaxis/minpadding-maxpadding/
		         *         Greater min- and maxPadding
		         *
		         * @since   1.2.0
		         * @product highcharts highstock gantt
		         */
		        maxPadding: 0.05,

		        /**
		         * Padding of the min value relative to the length of the axis. A
		         * padding of 0.05 will make a 100px axis 5px longer. This is useful
		         * when you don't want the lowest data value to appear on the edge
		         * of the plot area. When the axis' `min` option is set or a max extreme
		         * is set using `axis.setExtremes()`, the maxPadding will be ignored.
		         *
		         * @sample {highcharts} highcharts/yaxis/minpadding/
		         *         Min padding of 0.2
		         * @sample {highstock} stock/xaxis/minpadding-maxpadding/
		         *         Greater min- and maxPadding
		         *
		         * @since   1.2.0
		         * @product highcharts highstock gantt
		         */
		        minPadding: 0.05,

		        /**
		         * @productdesc {highstock}
		         * In Highstock 1.x, the Y axis was placed on the left side by default.
		         *
		         * @sample {highcharts} highcharts/yaxis/opposite/
		         *         Secondary Y axis opposite
		         * @sample {highstock} stock/xaxis/opposite/
		         *         Y axis on left side
		         *
		         * @type      {boolean}
		         * @default   {highstock} true
		         * @default   {highcharts} false
		         * @product   highstock highcharts gantt
		         * @apioption yAxis.opposite
		         */

		        /**
		         * @see [tickInterval](#xAxis.tickInterval)
		         * @see [tickPositioner](#xAxis.tickPositioner)
		         * @see [tickPositions](#xAxis.tickPositions)
		         */
		        tickPixelInterval: 72,

		        showLastLabel: true,

		        /**
		         * @extends xAxis.labels
		         */
		        labels: {
		            /**
		             * What part of the string the given position is anchored to. Can
		             * be one of `"left"`, `"center"` or `"right"`. The exact position
		             * also depends on the `labels.x` setting.
		             *
		             * Angular gauges and solid gauges defaults to `center`.
		             *
		             * @sample {highcharts} highcharts/yaxis/labels-align-left/
		             *         Left
		             *
		             * @type       {string}
		             * @default    {highcharts|highmaps} right
		             * @default    {highstock} left
		             * @validvalue ["left", "center", "right"]
		             * @apioption  yAxis.labels.align
		             */

		            /**
		             * The x position offset of the label relative to the tick position
		             * on the axis. Defaults to -15 for left axis, 15 for right axis.
		             *
		             * @sample {highcharts} highcharts/xaxis/labels-x/
		             *         Y axis labels placed on grid lines
		             */
		            x: -8
		        },

		        /**
		         * @productdesc {highmaps}
		         * In Highmaps, the axis line is hidden by default, because the axis is
		         * not visible by default.
		         *
		         * @type      {Highcharts.ColorString}
		         * @apioption yAxis.lineColor
		         */

		        /**
		         * @sample {highcharts} highcharts/yaxis/max-200/
		         *         Y axis max of 200
		         * @sample {highcharts} highcharts/yaxis/max-logarithmic/
		         *         Y axis max on logarithmic axis
		         * @sample {highstock} stock/yaxis/min-max/
		         *         Fixed min and max on Y axis
		         * @sample {highmaps} maps/axis/min-max/
		         *         Pre-zoomed to a specific area
		         *
		         * @type      {number}
		         * @apioption yAxis.max
		         */

		        /**
		         * @sample {highcharts} highcharts/yaxis/min-startontick-false/
		         *         -50 with startOnTick to false
		         * @sample {highcharts} highcharts/yaxis/min-startontick-true/
		         *         -50 with startOnTick true by default
		         * @sample {highstock} stock/yaxis/min-max/
		         *         Fixed min and max on Y axis
		         * @sample {highmaps} maps/axis/min-max/
		         *         Pre-zoomed to a specific area
		         *
		         * @type      {number}
		         * @apioption yAxis.min
		         */

		        /**
		         * An optional scrollbar to display on the Y axis in response to
		         * limiting the minimum an maximum of the axis values.
		         *
		         * In styled mode, all the presentational options for the scrollbar
		         * are replaced by the classes `.highcharts-scrollbar-thumb`,
		         * `.highcharts-scrollbar-arrow`, `.highcharts-scrollbar-button`,
		         * `.highcharts-scrollbar-rifles` and `.highcharts-scrollbar-track`.
		         *
		         * @sample {highstock} stock/yaxis/scrollbar/
		         *         Scrollbar on the Y axis
		         *
		         * @extends   scrollbar
		         * @since     4.2.6
		         * @product   highstock
		         * @excluding height
		         * @apioption yAxis.scrollbar
		         */

		        /**
		         * Enable the scrollbar on the Y axis.
		         *
		         * @sample {highstock} stock/yaxis/scrollbar/
		         *         Enabled on Y axis
		         *
		         * @type      {boolean}
		         * @default   false
		         * @since     4.2.6
		         * @product   highstock
		         * @apioption yAxis.scrollbar.enabled
		         */

		        /**
		         * Pixel margin between the scrollbar and the axis elements.
		         *
		         * @type      {number}
		         * @default   10
		         * @since     4.2.6
		         * @product   highstock
		         * @apioption yAxis.scrollbar.margin
		         */

		        /**
		         * Whether to show the scrollbar when it is fully zoomed out at max
		         * range. Setting it to `false` on the Y axis makes the scrollbar stay
		         * hidden until the user zooms in, like common in browsers.
		         *
		         * @type      {boolean}
		         * @default   true
		         * @since     4.2.6
		         * @product   highstock
		         * @apioption yAxis.scrollbar.showFull
		         */

		        /**
		         * The width of a vertical scrollbar or height of a horizontal
		         * scrollbar. Defaults to 20 on touch devices.
		         *
		         * @type      {number}
		         * @default   14
		         * @since     4.2.6
		         * @product   highstock
		         * @apioption yAxis.scrollbar.size
		         */

		        /**
		         * Z index of the scrollbar elements.
		         *
		         * @type      {number}
		         * @default   3
		         * @since     4.2.6
		         * @product   highstock
		         * @apioption yAxis.scrollbar.zIndex
		         */

		        /**
		         * A soft maximum for the axis. If the series data maximum is less
		         * than this, the axis will stay at this maximum, but if the series
		         * data maximum is higher, the axis will flex to show all data.
		         *
		         * **Note**: The [series.softThreshold](
		         * #plotOptions.series.softThreshold) option takes precedence over this
		         * option.
		         *
		         * @sample highcharts/yaxis/softmin-softmax/
		         *         Soft min and max
		         *
		         * @type      {number}
		         * @since     5.0.1
		         * @product   highcharts highstock gantt
		         * @apioption yAxis.softMax
		         */

		        /**
		         * A soft minimum for the axis. If the series data minimum is greater
		         * than this, the axis will stay at this minimum, but if the series
		         * data minimum is lower, the axis will flex to show all data.
		         *
		         * **Note**: The [series.softThreshold](
		         * #plotOptions.series.softThreshold) option takes precedence over this
		         * option.
		         *
		         * @sample highcharts/yaxis/softmin-softmax/
		         *         Soft min and max
		         *
		         * @type      {number}
		         * @since     5.0.1
		         * @product   highcharts highstock gantt
		         * @apioption yAxis.softMin
		         */

		        /**
		         * Defines the horizontal alignment of the stack total label. Can be one
		         * of `"left"`, `"center"` or `"right"`. The default value is calculated
		         * at runtime and depends on orientation and whether the stack is
		         * positive or negative.
		         *
		         * @sample {highcharts} highcharts/yaxis/stacklabels-align-left/
		         *         Aligned to the left
		         * @sample {highcharts} highcharts/yaxis/stacklabels-align-center/
		         *         Aligned in center
		         * @sample {highcharts} highcharts/yaxis/stacklabels-align-right/
		         *         Aligned to the right
		         *
		         * @type       {string}
		         * @since      2.1.5
		         * @product    highcharts
		         * @validvalue ["left", "center", "right"]
		         * @apioption  yAxis.stackLabels.align
		         */

		        /**
		         * A [format string](http://docs.highcharts.com/#formatting) for the
		         * data label. Available variables are the same as for `formatter`.
		         *
		         * @type      {string}
		         * @default   {total}
		         * @since     3.0.2
		         * @product   highcharts highstock
		         * @apioption yAxis.stackLabels.format
		         */

		        /**
		         * Rotation of the labels in degrees.
		         *
		         * @sample {highcharts} highcharts/yaxis/stacklabels-rotation/
		         *         Labels rotated 45°
		         *
		         * @type      {number}
		         * @default   0
		         * @since     2.1.5
		         * @product   highcharts
		         * @apioption yAxis.stackLabels.rotation
		         */

		        /**
		         * The text alignment for the label. While `align` determines where the
		         * texts anchor point is placed with regards to the stack, `textAlign`
		         * determines how the text is aligned against its anchor point. Possible
		         * values are `"left"`, `"center"` and `"right"`. The default value is
		         * calculated at runtime and depends on orientation and whether the
		         * stack is positive or negative.
		         *
		         * @sample {highcharts} highcharts/yaxis/stacklabels-textalign-left/
		         *         Label in center position but text-aligned left
		         *
		         * @type       {string}
		         * @since      2.1.5
		         * @product    highcharts
		         * @validvalue ["left", "center", "right"]
		         * @apioption  yAxis.stackLabels.textAlign
		         */

		        /**
		         * Whether to [use HTML](https://www.highcharts.com/docs/chart-concepts/labels-and-string-formatting#html)
		         * to render the labels.
		         *
		         * @type      {boolean}
		         * @default   false
		         * @since     3.0
		         * @product   highcharts highstock
		         * @apioption yAxis.stackLabels.useHTML
		         */

		        /**
		         * Defines the vertical alignment of the stack total label. Can be one
		         * of `"top"`, `"middle"` or `"bottom"`. The default value is calculated
		         * at runtime and depends on orientation and whether the stack is
		         * positive or negative.
		         *
		         * @sample {highcharts} highcharts/yaxis/stacklabels-verticalalign-top/
		         *         Vertically aligned top
		         * @sample {highcharts} highcharts/yaxis/stacklabels-verticalalign-middle/
		         *         Vertically aligned middle
		         * @sample {highcharts} highcharts/yaxis/stacklabels-verticalalign-bottom/
		         *         Vertically aligned bottom
		         *
		         * @type       {string}
		         * @since      2.1.5
		         * @product    highcharts
		         * @validvalue ["top", "middle", "bottom"]
		         * @apioption  yAxis.stackLabels.verticalAlign
		         */

		        /**
		         * The x position offset of the label relative to the left of the
		         * stacked bar. The default value is calculated at runtime and depends
		         * on orientation and whether the stack is positive or negative.
		         *
		         * @sample {highcharts} highcharts/yaxis/stacklabels-x/
		         *         Stack total labels with x offset
		         *
		         * @type      {number}
		         * @since     2.1.5
		         * @product   highcharts
		         * @apioption yAxis.stackLabels.x
		         */

		        /**
		         * The y position offset of the label relative to the tick position
		         * on the axis. The default value is calculated at runtime and depends
		         * on orientation and whether the stack is positive or negative.
		         *
		         * @sample {highcharts} highcharts/yaxis/stacklabels-y/
		         *         Stack total labels with y offset
		         *
		         * @type      {number}
		         * @since     2.1.5
		         * @product   highcharts
		         * @apioption yAxis.stackLabels.y
		         */

		        /**
		         * Whether to force the axis to start on a tick. Use this option with
		         * the `maxPadding` option to control the axis start.
		         *
		         * @sample {highcharts} highcharts/xaxis/startontick-false/
		         *         False by default
		         * @sample {highcharts} highcharts/xaxis/startontick-true/
		         *         True
		         * @sample {highstock} stock/xaxis/endontick/
		         *         False for Y axis
		         *
		         * @since   1.2.0
		         * @product highcharts highstock gantt
		         */
		        startOnTick: true,

		        title: {

		            /**
		             * The pixel distance between the axis labels and the title.
		             * Positive values are outside the axis line, negative are inside.
		             *
		             * @sample {highcharts} highcharts/xaxis/title-margin/
		             *         Y axis title margin of 60
		             *
		             * @type      {number}
		             * @default   40
		             * @apioption yAxis.title.margin
		             */

		            /**
		             * The rotation of the text in degrees. 0 is horizontal, 270 is
		             * vertical reading from bottom to top.
		             *
		             * @sample {highcharts} highcharts/yaxis/title-offset/
		             *         Horizontal
		             */
		            rotation: 270,

		            /**
		             * The actual text of the axis title. Horizontal texts can contain
		             * HTML, but rotated texts are painted using vector techniques and
		             * must be clean text. The Y axis title is disabled by setting the
		             * `text` option to `undefined`.
		             *
		             * @sample {highcharts} highcharts/xaxis/title-text/
		             *         Custom HTML
		             *
		             * @type    {string|null}
		             * @default {highcharts} Values
		             * @default {highstock} undefined
		             * @product highcharts highstock gantt
		             */
		            text: 'Values'
		        },

		        /**
		         * The top position of the Y axis. If it's a number, it is interpreted
		         * as pixel position relative to the chart.
		         *
		         * Since Highstock 2: If it's a percentage string, it is interpreted
		         * as percentages of the plot height, offset from plot area top.
		         *
		         * @see [yAxis.height](#yAxis.height)
		         *
		         * @sample {highstock} stock/demo/candlestick-and-volume/
		         *         Percentage height panes
		         *
		         * @type      {number|string}
		         * @product   highstock
		         * @apioption yAxis.top
		         */

		        /**
		         * The stack labels show the total value for each bar in a stacked
		         * column or bar chart. The label will be placed on top of positive
		         * columns and below negative columns. In case of an inverted column
		         * chart or a bar chart the label is placed to the right of positive
		         * bars and to the left of negative bars.
		         *
		         * @product highcharts
		         */
		        stackLabels: {

		            /**
		             * Allow the stack labels to overlap.
		             *
		             * @sample {highcharts} highcharts/yaxis/stacklabels-allowoverlap-false/
		             *         Default false
		             *
		             * @since   5.0.13
		             * @product highcharts
		             */
		            allowOverlap: false,

		            /**
		             * Enable or disable the stack total labels.
		             *
		             * @sample {highcharts} highcharts/yaxis/stacklabels-enabled/
		             *         Enabled stack total labels
		             *
		             * @since   2.1.5
		             * @product highcharts
		             */
		            enabled: false,

		            /**
		             * Callback JavaScript function to format the label. The value is
		             * given by `this.total`.
		             *
		             * @sample {highcharts} highcharts/yaxis/stacklabels-formatter/
		             *         Added units to stack total value
		             *
		             * @type    {Highcharts.FormatterCallbackFunction<object>}
		             * @since   2.1.5
		             * @product highcharts
		             */
		            formatter: function () {
		                return H.numberFormat(this.total, -1);
		            },

		            /**
		             * CSS styles for the label.
		             *
		             * In styled mode, the styles are set in the
		             * `.highcharts-stack-label` class.
		             *
		             * @sample {highcharts} highcharts/yaxis/stacklabels-style/
		             *         Red stack total labels
		             *
		             * @type    {Highcharts.CSSObject}
		             * @default {"color": "#666666", "fontSize": "11px", "fontWeight": "bold", "textOutline": "1px contrast"}
		             * @since   2.1.5
		             * @product highcharts
		             */
		            style: {
		                /** @ignore-option */
		                color: '#000000',
		                /** @ignore-option */
		                fontSize: '11px',
		                /** @ignore-option */
		                fontWeight: 'bold',
		                /** @ignore-option */
		                textOutline: '1px contrast'
		            }
		        },
		        gridLineWidth: 1,

		        lineWidth: 0

		        // tickWidth: 0
		    },

		    /**
		     * The Z axis or depth axis for 3D plots.
		     *
		     * See the [Axis class](/class-reference/Highcharts.Axis) for programmatic
		     * access to the axis.
		     *
		     * @sample {highcharts} highcharts/3d/scatter-zaxis-categories/
		     *         Z-Axis with Categories
		     * @sample {highcharts} highcharts/3d/scatter-zaxis-grid/
		     *         Z-Axis with styling
		     *
		     * @type      {*|Array<*>}
		     * @extends   xAxis
		     * @since     5.0.0
		     * @product   highcharts
		     * @excluding breaks, crosshair, lineColor, lineWidth, nameToX, showEmpty
		     * @apioption zAxis
		     */

		    // This variable extends the defaultOptions for left axes.
		    defaultLeftAxisOptions: {
		        labels: {
		            x: -15
		        },
		        title: {
		            rotation: 270
		        }
		    },

		    // This variable extends the defaultOptions for right axes.
		    defaultRightAxisOptions: {
		        labels: {
		            x: 15
		        },
		        title: {
		            rotation: 90
		        }
		    },

		    // This variable extends the defaultOptions for bottom axes.
		    defaultBottomAxisOptions: {
		        labels: {
		            autoRotation: [-45],
		            x: 0
		            // overflow: undefined,
		            // staggerLines: null
		        },
		        title: {
		            rotation: 0
		        }
		    },

		    // This variable extends the defaultOptions for top axes.
		    defaultTopAxisOptions: {
		        labels: {
		            autoRotation: [-45],
		            x: 0
		            // overflow: undefined
		            // staggerLines: null
		        },
		        title: {
		            rotation: 0
		        }
		    },

		    /**
		     * Overrideable function to initialize the axis.
		     *
		     * @see {@link Axis}
		     *
		     * @function Highcharts.Axis#init
		     *
		     * @param {Highcharts.Chart} chart
		     *
		     * @param {Highcharts.Options} userOptions
		     *
		     * @fires Highcharts.Axis#event:afterInit
		     * @fires Highcharts.Axis#event:init
		     */
		    init: function (chart, userOptions) {


		        var isXAxis = userOptions.isX,
		            axis = this;

		        /**
		         * The Chart that the axis belongs to.
		         *
		         * @name Highcharts.Axis#chart
		         * @type {Highcharts.Chart}
		         */
		        axis.chart = chart;

		        /**
		         * Whether the axis is horizontal.
		         *
		         * @name Highcharts.Axis#horiz
		         * @type {boolean}
		         */
		        axis.horiz = chart.inverted && !axis.isZAxis ? !isXAxis : isXAxis;

		        /**
		         * Whether the axis is the x-axis.
		         *
		         * @name Highcharts.Axis#isXAxis
		         * @type {boolean|undefined}
		         */
		        axis.isXAxis = isXAxis;

		        /**
		         * The collection where the axis belongs, for example `xAxis`, `yAxis`
		         * or `colorAxis`. Corresponds to properties on Chart, for example
		         * {@link Chart.xAxis}.
		         *
		         * @name Highcharts.Axis#coll
		         * @type {string}
		         */
		        axis.coll = axis.coll || (isXAxis ? 'xAxis' : 'yAxis');

		        fireEvent(this, 'init', { userOptions: userOptions });

		        axis.opposite = userOptions.opposite; // needed in setOptions

		        /**
		         * The side on which the axis is rendered. 0 is top, 1 is right, 2 is
		         * bottom and 3 is left.
		         *
		         * @name Highcharts.Axis#side
		         * @type {number}
		         */
		        axis.side = userOptions.side || (axis.horiz ?
		                (axis.opposite ? 0 : 2) : // top : bottom
		                (axis.opposite ? 1 : 3));  // right : left

		        axis.setOptions(userOptions);


		        var options = this.options,
		            type = options.type,
		            isDatetimeAxis = type === 'datetime';

		        axis.labelFormatter = options.labels.formatter ||
		            axis.defaultLabelFormatter; // can be overwritten by dynamic format


		        // Flag, stagger lines or not
		        axis.userOptions = userOptions;

		        axis.minPixelPadding = 0;


		        /**
		         * Whether the axis is reversed. Based on the `axis.reversed`,
		         * option, but inverted charts have reversed xAxis by default.
		         *
		         * @name Highcharts.Axis#reversed
		         * @type {boolean}
		         */
		        axis.reversed = options.reversed;
		        axis.visible = options.visible !== false;
		        axis.zoomEnabled = options.zoomEnabled !== false;

		        // Initial categories
		        axis.hasNames = type === 'category' || options.categories === true;
		        axis.categories = options.categories || axis.hasNames;
		        if (!axis.names) { // Preserve on update (#3830)
		            axis.names = [];
		            axis.names.keys = {};
		        }


		        // Placeholder for plotlines and plotbands groups
		        axis.plotLinesAndBandsGroups = {};

		        // Shorthand types
		        axis.isLog = type === 'logarithmic';
		        axis.isDatetimeAxis = isDatetimeAxis;
		        axis.positiveValuesOnly = axis.isLog && !axis.allowNegativeLog;

		        // Flag, if axis is linked to another axis
		        axis.isLinked = defined(options.linkedTo);

		        /**
		         * List of major ticks mapped by postition on axis.
		         *
		         * @see {@link Highcharts.Tick}
		         *
		         * @private
		         * @name Highcharts.Axis#ticks
		         * @type {Highcharts.Dictionary<Highcharts.Tick>}
		         */
		        axis.ticks = {};
		        axis.labelEdge = [];
		        /**
		         * List of minor ticks mapped by position on the axis.
		         *
		         * @see {@link Highcharts.Tick}
		         *
		         * @private
		         * @name Highcharts.Axis#minorTicks
		         * @type {Highcharts.Dictionary<Highcharts.Tick>}
		         */
		        axis.minorTicks = {};

		        // List of plotLines/Bands
		        axis.plotLinesAndBands = [];

		        // Alternate bands
		        axis.alternateBands = {};

		        // Axis metrics
		        axis.len = 0;
		        axis.minRange = axis.userMinRange = options.minRange || options.maxZoom;
		        axis.range = options.range;
		        axis.offset = options.offset || 0;


		        // Dictionary for stacks
		        axis.stacks = {};
		        axis.oldStacks = {};
		        axis.stacksTouched = 0;


		        /**
		         * The maximum value of the axis. In a logarithmic axis, this is the
		         * logarithm of the real value, and the real value can be obtained from
		         * {@link Axis#getExtremes}.
		         *
		         * @name Highcharts.Axis#max
		         * @type {number|null}
		         */
		        axis.max = null;

		        /**
		         * The minimum value of the axis. In a logarithmic axis, this is the
		         * logarithm of the real value, and the real value can be obtained from
		         * {@link Axis#getExtremes}.
		         *
		         * @name Highcharts.Axis#min
		         * @type {number|null}
		         */
		        axis.min = null;

		        /**
		         * The processed crosshair options.
		         *
		         * @name Highcharts.Axis#crosshair
		         * @type {boolean|Highcharts.AxisCrosshairOptions}
		         */
		        axis.crosshair = pick(
		            options.crosshair,
		            splat(chart.options.tooltip.crosshairs)[isXAxis ? 0 : 1],
		            false
		        );

		        var events = axis.options.events;

		        // Register. Don't add it again on Axis.update().
		        if (chart.axes.indexOf(axis) === -1) { //
		            if (isXAxis) { // #2713
		                chart.axes.splice(chart.xAxis.length, 0, axis);
		            } else {
		                chart.axes.push(axis);
		            }

		            chart[axis.coll].push(axis);
		        }

		        /**
		         * All series associated to the axis.
		         *
		         * @name Highcharts.Axis#series
		         * @type {Array<Highcharts.Series>}
		         */
		        axis.series = axis.series || []; // populated by Series

		        // Reversed axis
		        if (
		            chart.inverted &&
		            !axis.isZAxis &&
		            isXAxis &&
		            axis.reversed === undefined
		        ) {
		            axis.reversed = true;
		        }

		        // register event listeners
		        objectEach(events, function (event, eventType) {
		            addEvent(axis, eventType, event);
		        });

		        // extend logarithmic axis
		        axis.lin2log = options.linearToLogConverter || axis.lin2log;
		        if (axis.isLog) {
		            axis.val2lin = axis.log2lin;
		            axis.lin2val = axis.lin2log;
		        }

		        fireEvent(this, 'afterInit');
		    },

		    /**
		     * Merge and set options.
		     *
		     * @private
		     * @function Highcharts.Axis#setOptions
		     *
		     * @param {Highcharts.AxisOptions} userOptions
		     *
		     * @fires Highcharts.Axis#event:afterSetOptions
		     */
		    setOptions: function (userOptions) {
		        this.options = merge(
		            this.defaultOptions,
		            this.coll === 'yAxis' && this.defaultYAxisOptions,
		            [
		                this.defaultTopAxisOptions,
		                this.defaultRightAxisOptions,
		                this.defaultBottomAxisOptions,
		                this.defaultLeftAxisOptions
		            ][this.side],
		            merge(
		                defaultOptions[this.coll], // if set in setOptions (#1053)
		                userOptions
		            )
		        );

		        fireEvent(this, 'afterSetOptions', { userOptions: userOptions });
		    },

		    /**
		     * The default label formatter. The context is a special config object for
		     * the label. In apps, use the
		     * [labels.formatter](https://api.highcharts.com/highcharts/xAxis.labels.formatter)
		     * instead except when a modification is needed.
		     * @private
		     */
		    defaultLabelFormatter: function () {
		        var axis = this.axis,
		            value = this.value,
		            time = axis.chart.time,
		            categories = axis.categories,
		            dateTimeLabelFormat = this.dateTimeLabelFormat,
		            lang = defaultOptions.lang,
		            numericSymbols = lang.numericSymbols,
		            numSymMagnitude = lang.numericSymbolMagnitude || 1000,
		            i = numericSymbols && numericSymbols.length,
		            multi,
		            ret,
		            formatOption = axis.options.labels.format,

		            // make sure the same symbol is added for all labels on a linear
		            // axis
		            numericSymbolDetector = axis.isLog ?
		                Math.abs(value) :
		                axis.tickInterval;

		        if (formatOption) {
		            ret = format(formatOption, this, time);

		        } else if (categories) {
		            ret = value;

		        } else if (dateTimeLabelFormat) { // datetime axis
		            ret = time.dateFormat(dateTimeLabelFormat, value);

		        } else if (i && numericSymbolDetector >= 1000) {
		            // Decide whether we should add a numeric symbol like k (thousands)
		            // or M (millions). If we are to enable this in tooltip or other
		            // places as well, we can move this logic to the numberFormatter and
		            // enable it by a parameter.
		            while (i-- && ret === undefined) {
		                multi = Math.pow(numSymMagnitude, i + 1);
		                if (
		                    // Only accept a numeric symbol when the distance is more
		                    // than a full unit. So for example if the symbol is k, we
		                    // don't accept numbers like 0.5k.
		                    numericSymbolDetector >= multi &&
		                    // Accept one decimal before the symbol. Accepts 0.5k but
		                    // not 0.25k. How does this work with the previous?
		                    (value * 10) % multi === 0 &&
		                    numericSymbols[i] !== null &&
		                    value !== 0
		                ) { // #5480
		                    ret = H.numberFormat(value / multi, -1) + numericSymbols[i];
		                }
		            }
		        }

		        if (ret === undefined) {
		            if (Math.abs(value) >= 10000) { // add thousands separators
		                ret = H.numberFormat(value, -1);
		            } else { // small numbers
		                ret = H.numberFormat(value, -1, undefined, ''); // #2466
		            }
		        }

		        return ret;
		    },

		    /**
		     * Get the minimum and maximum for the series of each axis. The function
		     * analyzes the axis series and updates `this.dataMin` and `this.dataMax`.
		     * @private
		     * @fires Highcharts.Axis#event:afterGetSeriesExtremes
		     * @fires Highcharts.Axis#event:getSeriesExtremes
		     */
		    getSeriesExtremes: function () {
		        var axis = this,
		            chart = axis.chart;

		        fireEvent(this, 'getSeriesExtremes', null, function () {

		            axis.hasVisibleSeries = false;

		            // Reset properties in case we're redrawing (#3353)
		            axis.dataMin = axis.dataMax = axis.threshold = null;
		            axis.softThreshold = !axis.isXAxis;

		            if (axis.buildStacks) {
		                axis.buildStacks();
		            }

		            // loop through this axis' series
		            axis.series.forEach(function (series) {

		                if (series.visible || !chart.options.chart.ignoreHiddenSeries) {

		                    var seriesOptions = series.options,
		                        xData,
		                        threshold = seriesOptions.threshold,
		                        seriesDataMin,
		                        seriesDataMax;

		                    axis.hasVisibleSeries = true;

		                    // Validate threshold in logarithmic axes
		                    if (axis.positiveValuesOnly && threshold <= 0) {
		                        threshold = null;
		                    }

		                    // Get dataMin and dataMax for X axes
		                    if (axis.isXAxis) {
		                        xData = series.xData;
		                        if (xData.length) {
		                            // If xData contains values which is not numbers,
		                            // then filter them out. To prevent performance hit,
		                            // we only do this after we have already found
		                            // seriesDataMin because in most cases all data is
		                            // valid. #5234.
		                            seriesDataMin = arrayMin(xData);
		                            seriesDataMax = arrayMax(xData);

		                            if (
		                                !isNumber(seriesDataMin) &&
		                                !(seriesDataMin instanceof Date) // #5010
		                            ) {
		                                xData = xData.filter(isNumber);
		                                // Do it again with valid data
		                                seriesDataMin = arrayMin(xData);
		                                seriesDataMax = arrayMax(xData);
		                            }

		                            if (xData.length) {
		                                axis.dataMin = Math.min(
		                                    pick(axis.dataMin, xData[0], seriesDataMin),
		                                    seriesDataMin
		                                );
		                                axis.dataMax = Math.max(
		                                    pick(axis.dataMax, xData[0], seriesDataMax),
		                                    seriesDataMax
		                                );
		                            }
		                        }

		                    // Get dataMin and dataMax for Y axes, as well as handle
		                    // stacking and processed data
		                    } else {

		                        // Get this particular series extremes
		                        series.getExtremes();
		                        seriesDataMax = series.dataMax;
		                        seriesDataMin = series.dataMin;

		                        // Get the dataMin and dataMax so far. If percentage is
		                        // used, the min and max are always 0 and 100. If
		                        // seriesDataMin and seriesDataMax is null, then series
		                        // doesn't have active y data, we continue with nulls
		                        if (defined(seriesDataMin) && defined(seriesDataMax)) {
		                            axis.dataMin = Math.min(
		                                pick(axis.dataMin, seriesDataMin),
		                                seriesDataMin
		                            );
		                            axis.dataMax = Math.max(
		                                pick(axis.dataMax, seriesDataMax),
		                                seriesDataMax
		                            );
		                        }

		                        // Adjust to threshold
		                        if (defined(threshold)) {
		                            axis.threshold = threshold;
		                        }
		                        // If any series has a hard threshold, it takes
		                        // precedence
		                        if (
		                            !seriesOptions.softThreshold ||
		                            axis.positiveValuesOnly
		                        ) {
		                            axis.softThreshold = false;
		                        }
		                    }
		                }
		            });
		        });

		        fireEvent(this, 'afterGetSeriesExtremes');
		    },

		    /**
		     * Translate from axis value to pixel position on the chart, or back. Use
		     * the `toPixels` and `toValue` functions in applications.
		     * @private
		     */
		    translate: function (
		        val,
		        backwards,
		        cvsCoord,
		        old,
		        handleLog,
		        pointPlacement
		    ) {
		        var axis = this.linkedParent || this, // #1417
		            sign = 1,
		            cvsOffset = 0,
		            localA = old ? axis.oldTransA : axis.transA,
		            localMin = old ? axis.oldMin : axis.min,
		            returnValue,
		            minPixelPadding = axis.minPixelPadding,
		            doPostTranslate = (
		                axis.isOrdinal ||
		                axis.isBroken ||
		                (axis.isLog && handleLog)
		            ) && axis.lin2val;

		        if (!localA) {
		            localA = axis.transA;
		        }

		        // In vertical axes, the canvas coordinates start from 0 at the top like
		        // in SVG.
		        if (cvsCoord) {
		            sign *= -1; // canvas coordinates inverts the value
		            cvsOffset = axis.len;
		        }

		        // Handle reversed axis
		        if (axis.reversed) {
		            sign *= -1;
		            cvsOffset -= sign * (axis.sector || axis.len);
		        }

		        // From pixels to value
		        if (backwards) { // reverse translation

		            val = val * sign + cvsOffset;
		            val -= minPixelPadding;
		            returnValue = val / localA + localMin; // from chart pixel to value
		            if (doPostTranslate) { // log and ordinal axes
		                returnValue = axis.lin2val(returnValue);
		            }

		        // From value to pixels
		        } else {
		            if (doPostTranslate) { // log and ordinal axes
		                val = axis.val2lin(val);
		            }
		            returnValue = isNumber(localMin) ?
		                (
		                    sign * (val - localMin) * localA +
		                    cvsOffset +
		                    (sign * minPixelPadding) +
		                    (isNumber(pointPlacement) ? localA * pointPlacement : 0)
		                ) :
		                undefined;
		        }

		        return returnValue;
		    },

		    /**
		     * Translate a value in terms of axis units into pixels within the chart.
		     *
		     * @function Highcharts.Axis#toPixels
		     *
		     * @param {number} value
		     *        A value in terms of axis units.
		     *
		     * @param {boolean} paneCoordinates
		     *        Whether to return the pixel coordinate relative to the chart or
		     *        just the axis/pane itself.
		     *
		     * @return {number}
		     *         Pixel position of the value on the chart or axis.
		     */
		    toPixels: function (value, paneCoordinates) {
		        return this.translate(value, false, !this.horiz, null, true) +
		            (paneCoordinates ? 0 : this.pos);
		    },

		    /**
		     * Translate a pixel position along the axis to a value in terms of axis
		     * units.
		     *
		     * @function Highcharts.Axis#toValue
		     *
		     * @param {number} pixel
		     *        The pixel value coordinate.
		     *
		     * @param {boolean} paneCoordiantes
		     *        Whether the input pixel is relative to the chart or just the
		     *        axis/pane itself.
		     *
		     * @return {number}
		     *         The axis value.
		     */
		    toValue: function (pixel, paneCoordinates) {
		        return this.translate(
		            pixel - (paneCoordinates ? 0 : this.pos),
		            true,
		            !this.horiz,
		            null,
		            true
		        );
		    },

		    /**
		     * Create the path for a plot line that goes from the given value on
		     * this axis, across the plot to the opposite side. Also used internally for
		     * grid lines and crosshairs.
		     *
		     * @function Highcharts.Axis#getPlotLinePath
		     *
		     * @param {number} value
		     *        Axis value.
		     *
		     * @param {number} [lineWidth=1]
		     *        Used for calculation crisp line coordinates.
		     *
		     * @param {boolean} [old=false]
		     *        Use old coordinates (for resizing and rescaling).
		     *
		     * @param {boolean|string} [force=false]
		     *        If `false`, the function will return null when it falls outside
		     *        the axis bounds. If `true`, the function will return a path
		     *        aligned to the plot area sides if it falls outside. If `pass`, it
		     *        will return a path outside.
		     *
		     * @param {number} [translatedValue]
		     *        If given, return the plot line path of a pixel position on the
		     *        axis.
		     *
		     * @return {Array<string|number>}
		     *         The SVG path definition for the plot line.
		     */
		    getPlotLinePath: function (value, lineWidth, old, force, translatedValue) {
		        var axis = this,
		            chart = axis.chart,
		            axisLeft = axis.left,
		            axisTop = axis.top,
		            x1,
		            y1,
		            x2,
		            y2,
		            cHeight = (old && chart.oldChartHeight) || chart.chartHeight,
		            cWidth = (old && chart.oldChartWidth) || chart.chartWidth,
		            skip,
		            transB = axis.transB,
		            /**
		             * Check if x is between a and b. If not, either move to a/b
		             * or skip, depending on the force parameter.
		             */
		            between = function (x, a, b) {
		                if (force !== 'pass' && x < a || x > b) {
		                    if (force) {
		                        x = Math.min(Math.max(a, x), b);
		                    } else {
		                        skip = true;
		                    }
		                }
		                return x;
		            };

		        translatedValue = pick(
		            translatedValue,
		            axis.translate(value, null, null, old)
		        );
		        // Keep the translated value within sane bounds, and avoid Infinity to
		        // fail the isNumber test (#7709).
		        translatedValue = Math.min(Math.max(-1e5, translatedValue), 1e5);


		        x1 = x2 = Math.round(translatedValue + transB);
		        y1 = y2 = Math.round(cHeight - translatedValue - transB);
		        if (!isNumber(translatedValue)) { // no min or max
		            skip = true;
		            force = false; // #7175, don't force it when path is invalid
		        } else if (axis.horiz) {
		            y1 = axisTop;
		            y2 = cHeight - axis.bottom;
		            x1 = x2 = between(x1, axisLeft, axisLeft + axis.width);
		        } else {
		            x1 = axisLeft;
		            x2 = cWidth - axis.right;
		            y1 = y2 = between(y1, axisTop, axisTop + axis.height);
		        }
		        return skip && !force ?
		            null :
		            chart.renderer.crispLine(
		                ['M', x1, y1, 'L', x2, y2],
		                lineWidth || 1
		            );
		    },

		    /**
		     * Internal function to et the tick positions of a linear axis to round
		     * values like whole tens or every five.
		     *
		     * @function Highcharts.Axis#getLinearTickPositions
		     *
		     * @param {number} tickInterval
		     *        The normalized tick interval.
		     *
		     * @param {number} min
		     *        Axis minimum.
		     *
		     * @param {number} max
		     *        Axis maximum.
		     *
		     * @return {Array<number>}
		     *         An array of axis values where ticks should be placed.
		     */
		    getLinearTickPositions: function (tickInterval, min, max) {
		        var pos,
		            lastPos,
		            roundedMin =
		                correctFloat(Math.floor(min / tickInterval) * tickInterval),
		            roundedMax =
		                correctFloat(Math.ceil(max / tickInterval) * tickInterval),
		            tickPositions = [],
		            precision;

		        // When the precision is higher than what we filter out in
		        // correctFloat, skip it (#6183).
		        if (correctFloat(roundedMin + tickInterval) === roundedMin) {
		            precision = 20;
		        }

		        // For single points, add a tick regardless of the relative position
		        // (#2662, #6274)
		        if (this.single) {
		            return [min];
		        }

		        // Populate the intermediate values
		        pos = roundedMin;
		        while (pos <= roundedMax) {

		            // Place the tick on the rounded value
		            tickPositions.push(pos);

		            // Always add the raw tickInterval, not the corrected one.
		            pos = correctFloat(
		                pos + tickInterval,
		                precision
		            );

		            // If the interval is not big enough in the current min - max range
		            // to actually increase the loop variable, we need to break out to
		            // prevent endless loop. Issue #619
		            if (pos === lastPos) {
		                break;
		            }

		            // Record the last value
		            lastPos = pos;
		        }
		        return tickPositions;
		    },

		    /**
		     * Resolve the new minorTicks/minorTickInterval options into the legacy
		     * loosely typed minorTickInterval option.
		     *
		     * @function Highcharts.Axis#getMinorTickInterval
		     *
		     * @return {number|"auto"|null}
		     */
		    getMinorTickInterval: function () {
		        var options = this.options;

		        if (options.minorTicks === true) {
		            return pick(options.minorTickInterval, 'auto');
		        }
		        if (options.minorTicks === false) {
		            return null;
		        }
		        return options.minorTickInterval;
		    },

		    /**
		     * Internal function to return the minor tick positions. For logarithmic
		     * axes, the same logic as for major ticks is reused.
		     *
		     * @function Highcharts.Axis#getMinorTickPositions
		     *
		     * @return {Array<number>}
		     *         An array of axis values where ticks should be placed.
		     */
		    getMinorTickPositions: function () {
		        var axis = this,
		            options = axis.options,
		            tickPositions = axis.tickPositions,
		            minorTickInterval = axis.minorTickInterval,
		            minorTickPositions = [],
		            pos,
		            pointRangePadding = axis.pointRangePadding || 0,
		            min = axis.min - pointRangePadding, // #1498
		            max = axis.max + pointRangePadding, // #1498
		            range = max - min;

		        // If minor ticks get too dense, they are hard to read, and may cause
		        // long running script. So we don't draw them.
		        if (range && range / minorTickInterval < axis.len / 3) { // #3875

		            if (axis.isLog) {
		                // For each interval in the major ticks, compute the minor ticks
		                // separately.
		                this.paddedTicks.forEach(function (pos, i, paddedTicks) {
		                    if (i) {
		                        minorTickPositions.push.apply(
		                            minorTickPositions,
		                            axis.getLogTickPositions(
		                                minorTickInterval,
		                                paddedTicks[i - 1],
		                                paddedTicks[i],
		                                true
		                            )
		                        );
		                    }
		                });

		            } else if (
		                axis.isDatetimeAxis &&
		                this.getMinorTickInterval() === 'auto'
		            ) { // #1314
		                minorTickPositions = minorTickPositions.concat(
		                    axis.getTimeTicks(
		                        axis.normalizeTimeTickInterval(minorTickInterval),
		                        min,
		                        max,
		                        options.startOfWeek
		                    )
		                );
		            } else {
		                for (
		                    pos = min + (tickPositions[0] - min) % minorTickInterval;
		                    pos <= max;
		                    pos += minorTickInterval
		                ) {
		                    // Very, very, tight grid lines (#5771)
		                    if (pos === minorTickPositions[0]) {
		                        break;
		                    }
		                    minorTickPositions.push(pos);
		                }
		            }
		        }

		        if (minorTickPositions.length !== 0) {
		            axis.trimTicks(minorTickPositions); // #3652 #3743 #1498 #6330
		        }
		        return minorTickPositions;
		    },

		    /**
		     * Adjust the min and max for the minimum range. Keep in mind that the
		     * series data is not yet processed, so we don't have information on data
		     * cropping and grouping, or updated `axis.pointRange` or
		     * `series.pointRange`. The data can't be processed until we have finally
		     * established min and max.
		     * @private
		     */
		    adjustForMinRange: function () {
		        var axis = this,
		            options = axis.options,
		            min = axis.min,
		            max = axis.max,
		            zoomOffset,
		            spaceAvailable,
		            closestDataRange,
		            i,
		            distance,
		            xData,
		            loopLength,
		            minArgs,
		            maxArgs,
		            minRange;

		        // Set the automatic minimum range based on the closest point distance
		        if (axis.isXAxis && axis.minRange === undefined && !axis.isLog) {

		            if (defined(options.min) || defined(options.max)) {
		                axis.minRange = null; // don't do this again

		            } else {

		                // Find the closest distance between raw data points, as opposed
		                // to closestPointRange that applies to processed points
		                // (cropped and grouped)
		                axis.series.forEach(function (series) {
		                    xData = series.xData;
		                    loopLength = series.xIncrement ? 1 : xData.length - 1;
		                    for (i = loopLength; i > 0; i--) {
		                        distance = xData[i] - xData[i - 1];
		                        if (
		                            closestDataRange === undefined ||
		                            distance < closestDataRange
		                        ) {
		                            closestDataRange = distance;
		                        }
		                    }
		                });
		                axis.minRange = Math.min(
		                    closestDataRange * 5,
		                    axis.dataMax - axis.dataMin
		                );
		            }
		        }

		        // if minRange is exceeded, adjust
		        if (max - min < axis.minRange) {

		            spaceAvailable = axis.dataMax - axis.dataMin >= axis.minRange;
		            minRange = axis.minRange;
		            zoomOffset = (minRange - max + min) / 2;

		            // if min and max options have been set, don't go beyond it
		            minArgs = [min - zoomOffset, pick(options.min, min - zoomOffset)];
		            // If space is available, stay within the data range
		            if (spaceAvailable) {
		                minArgs[2] = axis.isLog ?
		                    axis.log2lin(axis.dataMin) :
		                    axis.dataMin;
		            }
		            min = arrayMax(minArgs);

		            maxArgs = [min + minRange, pick(options.max, min + minRange)];
		            // If space is availabe, stay within the data range
		            if (spaceAvailable) {
		                maxArgs[2] = axis.isLog ?
		                    axis.log2lin(axis.dataMax) :
		                    axis.dataMax;
		            }

		            max = arrayMin(maxArgs);

		            // now if the max is adjusted, adjust the min back
		            if (max - min < minRange) {
		                minArgs[0] = max - minRange;
		                minArgs[1] = pick(options.min, max - minRange);
		                min = arrayMax(minArgs);
		            }
		        }

		        // Record modified extremes
		        axis.min = min;
		        axis.max = max;
		    },

		    // Find the closestPointRange across all series.
		    getClosest: function () {
		        var ret;

		        if (this.categories) {
		            ret = 1;
		        } else {
		            this.series.forEach(function (series) {
		                var seriesClosest = series.closestPointRange,
		                    visible = series.visible ||
		                        !series.chart.options.chart.ignoreHiddenSeries;

		                if (
		                    !series.noSharedTooltip &&
		                    defined(seriesClosest) &&
		                    visible
		                ) {
		                    ret = defined(ret) ?
		                        Math.min(ret, seriesClosest) :
		                        seriesClosest;
		                }
		            });
		        }
		        return ret;
		    },

		    /**
		     * When a point name is given and no x, search for the name in the existing
		     * categories, or if categories aren't provided, search names or create a
		     * new category (#2522).
		     * @private
		     * @param {Highcharts.Point} point The point to inspect.
		     * @return {number} The X value that the point is given.
		     */
		    nameToX: function (point) {
		        var explicitCategories = isArray(this.categories),
		            names = explicitCategories ? this.categories : this.names,
		            nameX = point.options.x,
		            x;

		        point.series.requireSorting = false;

		        if (!defined(nameX)) {
		            nameX = this.options.uniqueNames === false ?
		                point.series.autoIncrement() :
		                (
		                    explicitCategories ?
		                        names.indexOf(point.name) :
		                        pick(names.keys[point.name], -1)

		                );
		        }
		        if (nameX === -1) { // Not found in currenct categories
		            if (!explicitCategories) {
		                x = names.length;
		            }
		        } else {
		            x = nameX;
		        }

		        // Write the last point's name to the names array
		        if (x !== undefined) {
		            this.names[x] = point.name;
		            // Backwards mapping is much faster than array searching (#7725)
		            this.names.keys[point.name] = x;
		        }

		        return x;
		    },

		    // When changes have been done to series data, update the axis.names.
		    updateNames: function () {
		        var axis = this,
		            names = this.names,
		            i = names.length;

		        if (i > 0) {
		            Object.keys(names.keys).forEach(function (key) {
		                delete names.keys[key];
		            });
		            names.length = 0;

		            this.minRange = this.userMinRange; // Reset
		            (this.series || []).forEach(function (series) {

		                // Reset incrementer (#5928)
		                series.xIncrement = null;

		                // When adding a series, points are not yet generated
		                if (!series.points || series.isDirtyData) {
		                    // When we're updating the series with data that is longer
		                    // than it was, and cropThreshold is passed, we need to make
		                    // sure that the axis.max is increased _before_ running the
		                    // premature processData. Otherwise this early iteration of
		                    // processData will crop the points to axis.max, and the
		                    // names array will be too short (#5857).
		                    axis.max = Math.max(axis.max, series.xData.length - 1);

		                    series.processData();
		                    series.generatePoints();
		                }

		                series.data.forEach(function (point, i) { // #9487
		                    var x;
		                    if (
		                        point &&
		                        point.options &&
		                        point.name !== undefined // #9562
		                    ) {
		                        x = axis.nameToX(point);
		                        if (x !== undefined && x !== point.x) {
		                            point.x = x;
		                            series.xData[i] = x;
		                        }
		                    }
		                });
		            });
		        }
		    },

		    /**
		     * Update translation information.
		     * @private
		     * @param {boolean} saveOld
		     * @fires Highcharts.Axis#event:afterSetAxisTranslation
		     */
		    setAxisTranslation: function (saveOld) {
		        var axis = this,
		            range = axis.max - axis.min,
		            pointRange = axis.axisPointRange || 0,
		            closestPointRange,
		            minPointOffset = 0,
		            pointRangePadding = 0,
		            linkedParent = axis.linkedParent,
		            ordinalCorrection,
		            hasCategories = !!axis.categories,
		            transA = axis.transA,
		            isXAxis = axis.isXAxis;

		        // Adjust translation for padding. Y axis with categories need to go
		        // through the same (#1784).
		        if (isXAxis || hasCategories || pointRange) {

		            // Get the closest points
		            closestPointRange = axis.getClosest();

		            if (linkedParent) {
		                minPointOffset = linkedParent.minPointOffset;
		                pointRangePadding = linkedParent.pointRangePadding;
		            } else {
		                axis.series.forEach(function (series) {
		                    var seriesPointRange = hasCategories ?
		                        1 :
		                        (
		                            isXAxis ?
		                                pick(
		                                    series.options.pointRange,
		                                    closestPointRange,
		                                    0
		                                ) :
		                                (axis.axisPointRange || 0)
		                        ), // #2806
		                        pointPlacement = series.options.pointPlacement;

		                    pointRange = Math.max(pointRange, seriesPointRange);

		                    if (!axis.single) {
		                        // minPointOffset is the value padding to the left of
		                        // the axis in order to make room for points with a
		                        // pointRange, typically columns. When the
		                        // pointPlacement option is 'between' or 'on', this
		                        // padding does not apply.
		                        minPointOffset = Math.max(
		                            minPointOffset,
		                            isString(pointPlacement) ? 0 : seriesPointRange / 2
		                        );

		                        // Determine the total padding needed to the length of
		                        // the axis to make room for the pointRange. If the
		                        // series' pointPlacement is 'on', no padding is added.
		                        pointRangePadding = Math.max(
		                            pointRangePadding,
		                            pointPlacement === 'on' ? 0 : seriesPointRange
		                        );
		                    }
		                });
		            }

		            // Record minPointOffset and pointRangePadding
		            ordinalCorrection = axis.ordinalSlope && closestPointRange ?
		                axis.ordinalSlope / closestPointRange :
		                1; // #988, #1853
		            axis.minPointOffset = minPointOffset =
		                minPointOffset * ordinalCorrection;
		            axis.pointRangePadding =
		                pointRangePadding = pointRangePadding * ordinalCorrection;

		            // pointRange means the width reserved for each point, like in a
		            // column chart
		            axis.pointRange = Math.min(pointRange, range);

		            // closestPointRange means the closest distance between points. In
		            // columns it is mostly equal to pointRange, but in lines pointRange
		            // is 0 while closestPointRange is some other value
		            if (isXAxis) {
		                axis.closestPointRange = closestPointRange;
		            }
		        }

		        // Secondary values
		        if (saveOld) {
		            axis.oldTransA = transA;
		        }
		        axis.translationSlope = axis.transA = transA =
		            axis.staticScale ||
		            axis.len / ((range + pointRangePadding) || 1);

		        // Translation addend
		        axis.transB = axis.horiz ? axis.left : axis.bottom;
		        axis.minPixelPadding = transA * minPointOffset;

		        fireEvent(this, 'afterSetAxisTranslation');
		    },

		    minFromRange: function () {
		        return this.max - this.range;
		    },

		    /**
		     * Set the tick positions to round values and optionally extend the extremes
		     * to the nearest tick.
		     * @private
		     * @param {boolean} secondPass
		     * @fires Highcharts.Axis#event:foundExtremes
		     */
		    setTickInterval: function (secondPass) {
		        var axis = this,
		            chart = axis.chart,
		            options = axis.options,
		            isLog = axis.isLog,
		            isDatetimeAxis = axis.isDatetimeAxis,
		            isXAxis = axis.isXAxis,
		            isLinked = axis.isLinked,
		            maxPadding = options.maxPadding,
		            minPadding = options.minPadding,
		            length,
		            linkedParentExtremes,
		            tickIntervalOption = options.tickInterval,
		            minTickInterval,
		            tickPixelIntervalOption = options.tickPixelInterval,
		            categories = axis.categories,
		            threshold = isNumber(axis.threshold) ? axis.threshold : null,
		            softThreshold = axis.softThreshold,
		            thresholdMin,
		            thresholdMax,
		            hardMin,
		            hardMax;

		        if (!isDatetimeAxis && !categories && !isLinked) {
		            this.getTickAmount();
		        }

		        // Min or max set either by zooming/setExtremes or initial options
		        hardMin = pick(axis.userMin, options.min);
		        hardMax = pick(axis.userMax, options.max);

		        // Linked axis gets the extremes from the parent axis
		        if (isLinked) {
		            axis.linkedParent = chart[axis.coll][options.linkedTo];
		            linkedParentExtremes = axis.linkedParent.getExtremes();
		            axis.min = pick(
		                linkedParentExtremes.min,
		                linkedParentExtremes.dataMin
		            );
		            axis.max = pick(
		                linkedParentExtremes.max,
		                linkedParentExtremes.dataMax
		            );
		            if (options.type !== axis.linkedParent.options.type) {
		                H.error(11, 1, chart); // Can't link axes of different type
		            }

		        // Initial min and max from the extreme data values
		        } else {

		            // Adjust to hard threshold
		            if (!softThreshold && defined(threshold)) {
		                if (axis.dataMin >= threshold) {
		                    thresholdMin = threshold;
		                    minPadding = 0;
		                } else if (axis.dataMax <= threshold) {
		                    thresholdMax = threshold;
		                    maxPadding = 0;
		                }
		            }

		            axis.min = pick(hardMin, thresholdMin, axis.dataMin);
		            axis.max = pick(hardMax, thresholdMax, axis.dataMax);

		        }

		        if (isLog) {
		            if (
		                axis.positiveValuesOnly &&
		                !secondPass &&
		                Math.min(axis.min, pick(axis.dataMin, axis.min)) <= 0
		            ) { // #978
		                H.error(10, 1, chart); // Can't plot negative values on log axis
		            }
		            // The correctFloat cures #934, float errors on full tens. But it
		            // was too aggressive for #4360 because of conversion back to lin,
		            // therefore use precision 15.
		            axis.min = correctFloat(axis.log2lin(axis.min), 15);
		            axis.max = correctFloat(axis.log2lin(axis.max), 15);
		        }

		        // handle zoomed range
		        if (axis.range && defined(axis.max)) {
		            axis.userMin = axis.min = hardMin =
		                Math.max(axis.dataMin, axis.minFromRange()); // #618, #6773
		            axis.userMax = hardMax = axis.max;

		            axis.range = null;  // don't use it when running setExtremes
		        }

		        // Hook for Highstock Scroller. Consider combining with beforePadding.
		        fireEvent(axis, 'foundExtremes');

		        // Hook for adjusting this.min and this.max. Used by bubble series.
		        if (axis.beforePadding) {
		            axis.beforePadding();
		        }

		        // adjust min and max for the minimum range
		        axis.adjustForMinRange();

		        // Pad the values to get clear of the chart's edges. To avoid
		        // tickInterval taking the padding into account, we do this after
		        // computing tick interval (#1337).
		        if (
		            !categories &&
		            !axis.axisPointRange &&
		            !axis.usePercentage &&
		            !isLinked &&
		            defined(axis.min) &&
		            defined(axis.max)
		        ) {
		            length = axis.max - axis.min;
		            if (length) {
		                if (!defined(hardMin) && minPadding) {
		                    axis.min -= length * minPadding;
		                }
		                if (!defined(hardMax) && maxPadding) {
		                    axis.max += length * maxPadding;
		                }
		            }
		        }

		        // Handle options for floor, ceiling, softMin and softMax (#6359)
		        if (isNumber(options.softMin) && !isNumber(axis.userMin)) {
		            axis.min = Math.min(axis.min, options.softMin);
		        }
		        if (isNumber(options.softMax) && !isNumber(axis.userMax)) {
		            axis.max = Math.max(axis.max, options.softMax);
		        }
		        if (isNumber(options.floor)) {
		            axis.min = Math.min(
		                Math.max(axis.min, options.floor),
		                Number.MAX_VALUE
		            );
		        }
		        if (isNumber(options.ceiling)) {
		            axis.max = Math.max(
		                Math.min(axis.max, options.ceiling),
		                pick(axis.userMax, -Number.MAX_VALUE)
		            );
		        }


		        // When the threshold is soft, adjust the extreme value only if the data
		        // extreme and the padded extreme land on either side of the threshold.
		        // For example, a series of [0, 1, 2, 3] would make the yAxis add a tick
		        // for -1 because of the default minPadding and startOnTick options.
		        // This is prevented by the softThreshold option.
		        if (softThreshold && defined(axis.dataMin)) {
		            threshold = threshold || 0;
		            if (
		                !defined(hardMin) &&
		                axis.min < threshold &&
		                axis.dataMin >= threshold
		            ) {
		                axis.min = threshold;

		            } else if (
		                !defined(hardMax) &&
		                axis.max > threshold &&
		                axis.dataMax <= threshold
		            ) {
		                axis.max = threshold;
		            }
		        }


		        // get tickInterval
		        if (
		            axis.min === axis.max ||
		            axis.min === undefined ||
		            axis.max === undefined
		        ) {
		            axis.tickInterval = 1;

		        } else if (
		            isLinked &&
		            !tickIntervalOption &&
		            tickPixelIntervalOption ===
		                axis.linkedParent.options.tickPixelInterval
		        ) {
		            axis.tickInterval = tickIntervalOption =
		                axis.linkedParent.tickInterval;

		        } else {
		            axis.tickInterval = pick(
		                tickIntervalOption,
		                this.tickAmount ?
		                    ((axis.max - axis.min) / Math.max(this.tickAmount - 1, 1)) :
		                    undefined,
		                // For categoried axis, 1 is default, for linear axis use
		                // tickPix
		                categories ?
		                    1 :
		                    // don't let it be more than the data range
		                    (axis.max - axis.min) * tickPixelIntervalOption /
		                        Math.max(axis.len, tickPixelIntervalOption)
		            );
		        }

		        // Now we're finished detecting min and max, crop and group series data.
		        // This is in turn needed in order to find tick positions in ordinal
		        // axes.
		        if (isXAxis && !secondPass) {
		            axis.series.forEach(function (series) {
		                series.processData(
		                    axis.min !== axis.oldMin || axis.max !== axis.oldMax
		                );
		            });
		        }

		        // set the translation factor used in translate function
		        axis.setAxisTranslation(true);

		        // hook for ordinal axes and radial axes
		        if (axis.beforeSetTickPositions) {
		            axis.beforeSetTickPositions();
		        }

		        // hook for extensions, used in Highstock ordinal axes
		        if (axis.postProcessTickInterval) {
		            axis.tickInterval = axis.postProcessTickInterval(axis.tickInterval);
		        }

		        // In column-like charts, don't cramp in more ticks than there are
		        // points (#1943, #4184)
		        if (axis.pointRange && !tickIntervalOption) {
		            axis.tickInterval = Math.max(axis.pointRange, axis.tickInterval);
		        }

		        // Before normalizing the tick interval, handle minimum tick interval.
		        // This applies only if tickInterval is not defined.
		        minTickInterval = pick(
		            options.minTickInterval,
		            axis.isDatetimeAxis && axis.closestPointRange
		        );
		        if (!tickIntervalOption && axis.tickInterval < minTickInterval) {
		            axis.tickInterval = minTickInterval;
		        }

		        // for linear axes, get magnitude and normalize the interval
		        if (!isDatetimeAxis && !isLog && !tickIntervalOption) {
		            axis.tickInterval = normalizeTickInterval(
		                axis.tickInterval,
		                null,
		                getMagnitude(axis.tickInterval),
		                // If the tick interval is between 0.5 and 5 and the axis max is
		                // in the order of thousands, chances are we are dealing with
		                // years. Don't allow decimals. #3363.
		                pick(
		                    options.allowDecimals,
		                    !(
		                        axis.tickInterval > 0.5 &&
		                        axis.tickInterval < 5 &&
		                        axis.max > 1000 &&
		                        axis.max < 9999
		                    )
		                ),
		                !!this.tickAmount
		            );
		        }

		        // Prevent ticks from getting so close that we can't draw the labels
		        if (!this.tickAmount) {
		            axis.tickInterval = axis.unsquish();
		        }

		        this.setTickPositions();
		    },

		    /**
		     * Now we have computed the normalized tickInterval, get the tick positions
		     *
		     * @function Highcharts.Axis#setTickPositions
		     *
		     * @fires Highcharts.Axis#event:afterSetTickPositions
		     */
		    setTickPositions: function () {

		        var options = this.options,
		            tickPositions,
		            tickPositionsOption = options.tickPositions,
		            minorTickIntervalOption = this.getMinorTickInterval(),
		            tickPositioner = options.tickPositioner,
		            startOnTick = options.startOnTick,
		            endOnTick = options.endOnTick;

		        // Set the tickmarkOffset
		        this.tickmarkOffset = (
		            this.categories &&
		            options.tickmarkPlacement === 'between' &&
		            this.tickInterval === 1
		        ) ? 0.5 : 0; // #3202


		        // get minorTickInterval
		        this.minorTickInterval =
		            minorTickIntervalOption === 'auto' &&
		            this.tickInterval ?
		                this.tickInterval / 5 :
		                minorTickIntervalOption;

		        // When there is only one point, or all points have the same value on
		        // this axis, then min and max are equal and tickPositions.length is 0
		        // or 1. In this case, add some padding in order to center the point,
		        // but leave it with one tick. #1337.
		        this.single =
		            this.min === this.max &&
		            defined(this.min) &&
		            !this.tickAmount &&
		            (
		                // Data is on integer (#6563)
		                parseInt(this.min, 10) === this.min ||

		                // Between integers and decimals are not allowed (#6274)
		                options.allowDecimals !== false
		            );

		        // Find the tick positions. Work on a copy (#1565)
		        this.tickPositions = tickPositions =
		            tickPositionsOption && tickPositionsOption.slice();
		        if (!tickPositions) {

		            // Too many ticks (#6405). Create a friendly warning and provide two
		            // ticks so at least we can show the data series.
		            if (
		                !this.ordinalPositions &&
		                (
		                    (this.max - this.min) / this.tickInterval >
		                    Math.max(2 * this.len, 200)
		                )
		            ) {
		                tickPositions = [this.min, this.max];
		                H.error(19, false, this.chart);

		            } else if (this.isDatetimeAxis) {
		                tickPositions = this.getTimeTicks(
		                    this.normalizeTimeTickInterval(
		                        this.tickInterval,
		                        options.units
		                    ),
		                    this.min,
		                    this.max,
		                    options.startOfWeek,
		                    this.ordinalPositions,
		                    this.closestPointRange,
		                    true
		                );
		            } else if (this.isLog) {
		                tickPositions = this.getLogTickPositions(
		                    this.tickInterval,
		                    this.min,
		                    this.max
		                );
		            } else {
		                tickPositions = this.getLinearTickPositions(
		                    this.tickInterval,
		                    this.min,
		                    this.max
		                );
		            }

		            // Too dense ticks, keep only the first and last (#4477)
		            if (tickPositions.length > this.len) {
		                tickPositions = [tickPositions[0], tickPositions.pop()];
		                // Reduce doubled value (#7339)
		                if (tickPositions[0] === tickPositions[1]) {
		                    tickPositions.length = 1;
		                }
		            }

		            this.tickPositions = tickPositions;

		            // Run the tick positioner callback, that allows modifying auto tick
		            // positions.
		            if (tickPositioner) {
		                tickPositioner = tickPositioner.apply(
		                    this,
		                    [this.min, this.max]
		                );
		                if (tickPositioner) {
		                    this.tickPositions = tickPositions = tickPositioner;
		                }
		            }

		        }

		        // Reset min/max or remove extremes based on start/end on tick
		        this.paddedTicks = tickPositions.slice(0); // Used for logarithmic minor
		        this.trimTicks(tickPositions, startOnTick, endOnTick);
		        if (!this.isLinked) {

		            // Substract half a unit (#2619, #2846, #2515, #3390),
		            // but not in case of multiple ticks (#6897)
		            if (this.single && tickPositions.length < 2) {
		                this.min -= 0.5;
		                this.max += 0.5;
		            }
		            if (!tickPositionsOption && !tickPositioner) {
		                this.adjustTickAmount();
		            }
		        }

		        fireEvent(this, 'afterSetTickPositions');
		    },

		    // Handle startOnTick and endOnTick by either adapting to padding min/max or
		    // rounded min/max. Also handle single data points.
		    trimTicks: function (tickPositions, startOnTick, endOnTick) {
		        var roundedMin = tickPositions[0],
		            roundedMax = tickPositions[tickPositions.length - 1],
		            minPointOffset = this.minPointOffset || 0;

		        if (!this.isLinked) {
		            if (startOnTick && roundedMin !== -Infinity) { // #6502
		                this.min = roundedMin;
		            } else {
		                while (this.min - minPointOffset > tickPositions[0]) {
		                    tickPositions.shift();
		                }
		            }

		            if (endOnTick) {
		                this.max = roundedMax;
		            } else {
		                while (this.max + minPointOffset <
		                        tickPositions[tickPositions.length - 1]) {
		                    tickPositions.pop();
		                }
		            }

		            // If no tick are left, set one tick in the middle (#3195)
		            if (
		                tickPositions.length === 0 &&
		                defined(roundedMin) &&
		                !this.options.tickPositions
		            ) {
		                tickPositions.push((roundedMax + roundedMin) / 2);
		            }
		        }
		    },

		    /**
		     * Check if there are multiple axes in the same pane.
		     * @private
		     * @return {boolean} True if there are other axes.
		     */
		    alignToOthers: function () {
		        var others = {}, // Whether there is another axis to pair with this one
		            hasOther,
		            options = this.options;

		        if (
		            // Only if alignTicks is true
		            this.chart.options.chart.alignTicks !== false &&
		            options.alignTicks !== false &&

		            // Disabled when startOnTick or endOnTick are false (#7604)
		            options.startOnTick !== false &&
		            options.endOnTick !== false &&

		            // Don't try to align ticks on a log axis, they are not evenly
		            // spaced (#6021)
		            !this.isLog
		        ) {
		            this.chart[this.coll].forEach(function (axis) {
		                var otherOptions = axis.options,
		                    horiz = axis.horiz,
		                    key = [
		                        horiz ? otherOptions.left : otherOptions.top,
		                        otherOptions.width,
		                        otherOptions.height,
		                        otherOptions.pane
		                    ].join(',');


		                if (axis.series.length) { // #4442
		                    if (others[key]) {
		                        hasOther = true; // #4201
		                    } else {
		                        others[key] = 1;
		                    }
		                }
		            });
		        }
		        return hasOther;
		    },

		    /**
		     * Find the max ticks of either the x and y axis collection, and record it
		     * in `this.tickAmount`.
		     * @private
		     */
		    getTickAmount: function () {
		        var options = this.options,
		            tickAmount = options.tickAmount,
		            tickPixelInterval = options.tickPixelInterval;

		        if (
		            !defined(options.tickInterval) &&
		            this.len < tickPixelInterval &&
		            !this.isRadial &&
		            !this.isLog &&
		            options.startOnTick &&
		            options.endOnTick
		        ) {
		            tickAmount = 2;
		        }

		        if (!tickAmount && this.alignToOthers()) {
		            // Add 1 because 4 tick intervals require 5 ticks (including first
		            // and last)
		            tickAmount = Math.ceil(this.len / tickPixelInterval) + 1;
		        }

		        // For tick amounts of 2 and 3, compute five ticks and remove the
		        // intermediate ones. This prevents the axis from adding ticks that are
		        // too far away from the data extremes.
		        if (tickAmount < 4) {
		            this.finalTickAmt = tickAmount;
		            tickAmount = 5;
		        }

		        this.tickAmount = tickAmount;
		    },

		    /**
		     * When using multiple axes, adjust the number of ticks to match the highest
		     * number of ticks in that group.
		     * @private
		     */
		    adjustTickAmount: function () {
		        var tickInterval = this.tickInterval,
		            tickPositions = this.tickPositions,
		            tickAmount = this.tickAmount,
		            finalTickAmt = this.finalTickAmt,
		            currentTickAmount = tickPositions && tickPositions.length,
		            threshold = pick(this.threshold, this.softThreshold ? 0 : null),
		            i,
		            len;

		        if (this.hasData()) {
		            if (currentTickAmount < tickAmount) {
		                while (tickPositions.length < tickAmount) {

		                    // Extend evenly for both sides unless we're on the
		                    // threshold (#3965)
		                    if (
		                        tickPositions.length % 2 ||
		                        this.min === threshold
		                    ) {
		                        // to the end
		                        tickPositions.push(correctFloat(
		                            tickPositions[tickPositions.length - 1] +
		                            tickInterval
		                        ));
		                    } else {
		                        // to the start
		                        tickPositions.unshift(correctFloat(
		                            tickPositions[0] - tickInterval
		                        ));
		                    }
		                }
		                this.transA *= (currentTickAmount - 1) / (tickAmount - 1);
		                this.min = tickPositions[0];
		                this.max = tickPositions[tickPositions.length - 1];

		            // We have too many ticks, run second pass to try to reduce ticks
		            } else if (currentTickAmount > tickAmount) {
		                this.tickInterval *= 2;
		                this.setTickPositions();
		            }

		            // The finalTickAmt property is set in getTickAmount
		            if (defined(finalTickAmt)) {
		                i = len = tickPositions.length;
		                while (i--) {
		                    if (
		                        // Remove every other tick
		                        (finalTickAmt === 3 && i % 2 === 1) ||
		                        // Remove all but first and last
		                        (finalTickAmt <= 2 && i > 0 && i < len - 1)
		                    ) {
		                        tickPositions.splice(i, 1);
		                    }
		                }
		                this.finalTickAmt = undefined;
		            }
		        }
		    },

		    /**
		     * Set the scale based on data min and max, user set min and max or options.
		     * @private
		     * @fires Highcharts.Axis#event:afterSetScale
		     */
		    setScale: function () {
		        var axis = this,
		            isDirtyData,
		            isDirtyAxisLength;

		        axis.oldMin = axis.min;
		        axis.oldMax = axis.max;
		        axis.oldAxisLength = axis.len;

		        // set the new axisLength
		        axis.setAxisSize();
		        isDirtyAxisLength = axis.len !== axis.oldAxisLength;

		        // is there new data?
		        axis.series.forEach(function (series) {
		            if (
		                series.isDirtyData ||
		                series.isDirty ||
		                // When x axis is dirty, we need new data extremes for y as well
		                series.xAxis.isDirty
		            ) {
		                isDirtyData = true;
		            }
		        });

		        // do we really need to go through all this?
		        if (
		            isDirtyAxisLength ||
		            isDirtyData ||
		            axis.isLinked ||
		            axis.forceRedraw ||
		            axis.userMin !== axis.oldUserMin ||
		            axis.userMax !== axis.oldUserMax ||
		            axis.alignToOthers()
		        ) {

		            if (axis.resetStacks) {
		                axis.resetStacks();
		            }

		            axis.forceRedraw = false;

		            // get data extremes if needed
		            axis.getSeriesExtremes();

		            // get fixed positions based on tickInterval
		            axis.setTickInterval();

		            // record old values to decide whether a rescale is necessary later
		            // on (#540)
		            axis.oldUserMin = axis.userMin;
		            axis.oldUserMax = axis.userMax;

		            // Mark as dirty if it is not already set to dirty and extremes have
		            // changed. #595.
		            if (!axis.isDirty) {
		                axis.isDirty =
		                    isDirtyAxisLength ||
		                    axis.min !== axis.oldMin ||
		                    axis.max !== axis.oldMax;
		            }
		        } else if (axis.cleanStacks) {
		            axis.cleanStacks();
		        }

		        fireEvent(this, 'afterSetScale');
		    },

		    /**
		     * Set the minimum and maximum of the axes after render time. If the
		     * `startOnTick` and `endOnTick` options are true, the minimum and maximum
		     * values are rounded off to the nearest tick. To prevent this, these
		     * options can be set to false before calling setExtremes. Also, setExtremes
		     * will not allow a range lower than the `minRange` option, which by default
		     * is the range of five points.
		     *
		     * @sample highcharts/members/axis-setextremes/
		     *         Set extremes from a button
		     * @sample highcharts/members/axis-setextremes-datetime/
		     *         Set extremes on a datetime axis
		     * @sample highcharts/members/axis-setextremes-off-ticks/
		     *         Set extremes off ticks
		     * @sample stock/members/axis-setextremes/
		     *         Set extremes in Highstock
		     * @sample maps/members/axis-setextremes/
		     *         Set extremes in Highmaps
		     *
		     * @function Highcharts.Axis#setExtremes
		     *
		     * @param {number} [newMin]
		     *        The new minimum value.
		     *
		     * @param {number} [newMax]
		     *        The new maximum value.
		     *
		     * @param {boolean} [redraw=true]
		     *        Whether to redraw the chart or wait for an explicit call to
		     *        {@link Highcharts.Chart#redraw}
		     *
		     * @param {boolean|Highcharts.AnimationOptionsObject} [animation=true]
		     *        Enable or modify animations.
		     *
		     * @param {*} [eventArguments]
		     *        Arguments to be accessed in event handler.
		     *
		     * @fires Highcharts.Axis#event:setExtremes
		     */
		    setExtremes: function (newMin, newMax, redraw, animation, eventArguments) {
		        var axis = this,
		            chart = axis.chart;

		        redraw = pick(redraw, true); // defaults to true

		        axis.series.forEach(function (serie) {
		            delete serie.kdTree;
		        });

		        // Extend the arguments with min and max
		        eventArguments = extend(eventArguments, {
		            min: newMin,
		            max: newMax
		        });

		        // Fire the event
		        fireEvent(axis, 'setExtremes', eventArguments, function () {

		            axis.userMin = newMin;
		            axis.userMax = newMax;
		            axis.eventArgs = eventArguments;

		            if (redraw) {
		                chart.redraw(animation);
		            }
		        });
		    },

		    // Overridable method for zooming chart. Pulled out in a separate method to
		    // allow overriding in stock charts.
		    zoom: function (newMin, newMax) {
		        var dataMin = this.dataMin,
		            dataMax = this.dataMax,
		            options = this.options,
		            min = Math.min(dataMin, pick(options.min, dataMin)),
		            max = Math.max(dataMax, pick(options.max, dataMax));

		        if (newMin !== this.min || newMax !== this.max) { // #5790

		            // Prevent pinch zooming out of range. Check for defined is for
		            // #1946. #1734.
		            if (!this.allowZoomOutside) {
		                // #6014, sometimes newMax will be smaller than min (or newMin
		                // will be larger than max).
		                if (defined(dataMin)) {
		                    if (newMin < min) {
		                        newMin = min;
		                    }
		                    if (newMin > max) {
		                        newMin = max;
		                    }
		                }
		                if (defined(dataMax)) {
		                    if (newMax < min) {
		                        newMax = min;
		                    }
		                    if (newMax > max) {
		                        newMax = max;
		                    }
		                }
		            }

		            // In full view, displaying the reset zoom button is not required
		            this.displayBtn = newMin !== undefined || newMax !== undefined;

		            // Do it
		            this.setExtremes(
		                newMin,
		                newMax,
		                false,
		                undefined,
		                { trigger: 'zoom' }
		            );
		        }

		        return true;
		    },

		    // Update the axis metrics.
		    setAxisSize: function () {
		        var chart = this.chart,
		            options = this.options,
		            // [top, right, bottom, left]
		            offsets = options.offsets || [0, 0, 0, 0],
		            horiz = this.horiz,

		            // Check for percentage based input values. Rounding fixes problems
		            // with column overflow and plot line filtering (#4898, #4899)
		            width = this.width = Math.round(H.relativeLength(
		                pick(
		                    options.width,
		                    chart.plotWidth - offsets[3] + offsets[1]
		                ),
		                chart.plotWidth
		            )),
		            height = this.height = Math.round(H.relativeLength(
		                pick(
		                    options.height,
		                    chart.plotHeight - offsets[0] + offsets[2]
		                ),
		                chart.plotHeight
		            )),
		            top = this.top = Math.round(H.relativeLength(
		                pick(options.top, chart.plotTop + offsets[0]),
		                chart.plotHeight,
		                chart.plotTop
		            )),
		            left = this.left = Math.round(H.relativeLength(
		                pick(options.left, chart.plotLeft + offsets[3]),
		                chart.plotWidth,
		                chart.plotLeft
		            ));

		        // Expose basic values to use in Series object and navigator
		        this.bottom = chart.chartHeight - height - top;
		        this.right = chart.chartWidth - width - left;

		        // Direction agnostic properties
		        this.len = Math.max(horiz ? width : height, 0); // Math.max fixes #905
		        this.pos = horiz ? left : top; // distance from SVG origin
		    },

		    /**
		     * Get the current extremes for the axis.
		     *
		     * @sample highcharts/members/axis-getextremes/
		     *         Report extremes by click on a button
		     * @sample maps/members/axis-getextremes/
		     *         Get extremes in Highmaps
		     *
		     * @function Highcharts.Axis#getExtremes
		     *
		     * @returns {Highcharts.ExtremesObject}
		     *          An object containing extremes information.
		     */
		    getExtremes: function () {
		        var axis = this,
		            isLog = axis.isLog;

		        return {
		            min: isLog ? correctFloat(axis.lin2log(axis.min)) : axis.min,
		            max: isLog ? correctFloat(axis.lin2log(axis.max)) : axis.max,
		            dataMin: axis.dataMin,
		            dataMax: axis.dataMax,
		            userMin: axis.userMin,
		            userMax: axis.userMax
		        };
		    },

		    /**
		     * Get the zero plane either based on zero or on the min or max value.
		     * Used in bar and area plots.
		     *
		     * @function Highcharts.Axis#getThreshold
		     *
		     * @param {number} threshold
		     *        The threshold in axis values.
		     *
		     * @return {number}
		     *         The translated threshold position in terms of pixels, and
		     *         corrected to stay within the axis bounds.
		     */
		    getThreshold: function (threshold) {
		        var axis = this,
		            isLog = axis.isLog,
		            realMin = isLog ? axis.lin2log(axis.min) : axis.min,
		            realMax = isLog ? axis.lin2log(axis.max) : axis.max;

		        if (threshold === null || threshold === -Infinity) {
		            threshold = realMin;
		        } else if (threshold === Infinity) {
		            threshold = realMax;
		        } else if (realMin > threshold) {
		            threshold = realMin;
		        } else if (realMax < threshold) {
		            threshold = realMax;
		        }

		        return axis.translate(threshold, 0, 1, 0, 1);
		    },

		    /**
		     * Compute auto alignment for the axis label based on which side the axis is
		     * on and the given rotation for the label.
		     * @private
		     * @param {number} rotation The rotation in degrees as set by either the
		     * `rotation` or `autoRotation` options.
		     * @return {string} Can be `center`, `left` or `right`.
		     */
		    autoLabelAlign: function (rotation) {
		        var ret,
		            angle = (pick(rotation, 0) - (this.side * 90) + 720) % 360;

		        if (angle > 15 && angle < 165) {
		            ret = 'right';
		        } else if (angle > 195 && angle < 345) {
		            ret = 'left';
		        } else {
		            ret = 'center';
		        }
		        return ret;
		    },

		    /**
		     * Get the tick length and width for the axis based on axis options.
		     * @private
		     * @param {string} prefix 'tick' or 'minorTick'
		     * @return {Array<number>} An array of tickLength and tickWidth
		     */
		    tickSize: function (prefix) {
		        var options = this.options,
		            tickLength = options[prefix + 'Length'],
		            tickWidth = pick(
		                options[prefix + 'Width'],
		                prefix === 'tick' && this.isXAxis ? 1 : 0 // X axis default 1
		            );

		        if (tickWidth && tickLength) {
		            // Negate the length
		            if (options[prefix + 'Position'] === 'inside') {
		                tickLength = -tickLength;
		            }
		            return [tickLength, tickWidth];
		        }

		    },

		    // Return the size of the labels.
		    labelMetrics: function () {
		        var index = this.tickPositions && this.tickPositions[0] || 0;
		        return this.chart.renderer.fontMetrics(
		            this.options.labels.style && this.options.labels.style.fontSize,
		            this.ticks[index] && this.ticks[index].label
		        );
		    },

		    // Prevent the ticks from getting so close we can't draw the labels. On a
		    // horizontal axis, this is handled by rotating the labels, removing ticks
		    // and adding ellipsis. On a vertical axis remove ticks and add ellipsis.
		    unsquish: function () {
		        var labelOptions = this.options.labels,
		            horiz = this.horiz,
		            tickInterval = this.tickInterval,
		            newTickInterval = tickInterval,
		            slotSize = this.len / (
		                ((this.categories ? 1 : 0) + this.max - this.min) / tickInterval
		            ),
		            rotation,
		            rotationOption = labelOptions.rotation,
		            labelMetrics = this.labelMetrics(),
		            step,
		            bestScore = Number.MAX_VALUE,
		            autoRotation,
		            // Return the multiple of tickInterval that is needed to avoid
		            // collision
		            getStep = function (spaceNeeded) {
		                var step = spaceNeeded / (slotSize || 1);
		                step = step > 1 ? Math.ceil(step) : 1;
		                return correctFloat(step * tickInterval);
		            };

		        if (horiz) {
		            autoRotation = !labelOptions.staggerLines &&
		                !labelOptions.step &&
		                ( // #3971
		                    defined(rotationOption) ?
		                        [rotationOption] :
		                        slotSize < pick(labelOptions.autoRotationLimit, 80) &&
		                            labelOptions.autoRotation
		                );

		            if (autoRotation) {

		                // Loop over the given autoRotation options, and determine
		                // which gives the best score. The best score is that with
		                // the lowest number of steps and a rotation closest
		                // to horizontal.
		                autoRotation.forEach(function (rot) {
		                    var score;

		                    if (
		                        rot === rotationOption ||
		                        (rot && rot >= -90 && rot <= 90)
		                    ) { // #3891

		                        step = getStep(
		                            Math.abs(labelMetrics.h / Math.sin(deg2rad * rot))
		                        );

		                        score = step + Math.abs(rot / 360);

		                        if (score < bestScore) {
		                            bestScore = score;
		                            rotation = rot;
		                            newTickInterval = step;
		                        }
		                    }
		                });
		            }

		        } else if (!labelOptions.step) { // #4411
		            newTickInterval = getStep(labelMetrics.h);
		        }

		        this.autoRotation = autoRotation;
		        this.labelRotation = pick(rotation, rotationOption);

		        return newTickInterval;
		    },

		    /**
		     * Get the general slot width for labels/categories on this axis. This may
		     * change between the pre-render (from Axis.getOffset) and the final tick
		     * rendering and placement.
		     * @private
		     * @param {Highcharts.Tick} [tick] Optionally, calculate the slot width
		     * basing on tick label. It is used in highcharts-3d module, where the slots
		     * has different widths depending on perspective angles.
		     * @return {number} The pixel width allocated to each axis label.
		     */
		    getSlotWidth: function (tick) {
		        // #5086, #1580, #1931
		        var chart = this.chart,
		            horiz = this.horiz,
		            labelOptions = this.options.labels,
		            slotCount = Math.max(
		                this.tickPositions.length - (this.categories ? 0 : 1),
		                1
		            ),
		            marginLeft = chart.margin[3];

		        return (
		            tick &&
		            tick.slotWidth // Used by grid axis
		        ) || (
		            horiz &&
		            (labelOptions.step || 0) < 2 &&
		            !labelOptions.rotation && // #4415
		            ((this.staggerLines || 1) * this.len) / slotCount
		        ) || (
		            !horiz && (
		                // #7028
		                (
		                    labelOptions.style &&
		                    parseInt(labelOptions.style.width, 10)
		                ) ||
		                (
		                    marginLeft &&
		                    (marginLeft - chart.spacing[3])
		                ) ||
		                chart.chartWidth * 0.33
		            )
		        );

		    },

		    // Render the axis labels and determine whether ellipsis or rotation need to
		    // be applied.
		    renderUnsquish: function () {
		        var chart = this.chart,
		            renderer = chart.renderer,
		            tickPositions = this.tickPositions,
		            ticks = this.ticks,
		            labelOptions = this.options.labels,
		            labelStyleOptions = (labelOptions && labelOptions.style || {}),
		            horiz = this.horiz,
		            slotWidth = this.getSlotWidth(),
		            innerWidth = Math.max(
		                1,
		                Math.round(slotWidth - 2 * (labelOptions.padding || 5))
		            ),
		            attr = {},
		            labelMetrics = this.labelMetrics(),
		            textOverflowOption = labelOptions.style &&
		                labelOptions.style.textOverflow,
		            commonWidth,
		            commonTextOverflow,
		            maxLabelLength = 0,
		            label,
		            i,
		            pos;

		        // Set rotation option unless it is "auto", like in gauges
		        if (!isString(labelOptions.rotation)) {
		            attr.rotation = labelOptions.rotation || 0; // #4443
		        }

		        // Get the longest label length
		        tickPositions.forEach(function (tick) {
		            tick = ticks[tick];
		            if (
		                tick &&
		                tick.label &&
		                tick.label.textPxLength > maxLabelLength
		            ) {
		                maxLabelLength = tick.label.textPxLength;
		            }
		        });
		        this.maxLabelLength = maxLabelLength;


		        // Handle auto rotation on horizontal axis
		        if (this.autoRotation) {

		            // Apply rotation only if the label is too wide for the slot, and
		            // the label is wider than its height.
		            if (
		                maxLabelLength > innerWidth &&
		                maxLabelLength > labelMetrics.h
		            ) {
		                attr.rotation = this.labelRotation;
		            } else {
		                this.labelRotation = 0;
		            }

		        // Handle word-wrap or ellipsis on vertical axis
		        } else if (slotWidth) {
		            // For word-wrap or ellipsis
		            commonWidth = innerWidth;

		            if (!textOverflowOption) {
		                commonTextOverflow = 'clip';

		                // On vertical axis, only allow word wrap if there is room
		                // for more lines.
		                i = tickPositions.length;
		                while (!horiz && i--) {
		                    pos = tickPositions[i];
		                    label = ticks[pos].label;
		                    if (label) {
		                        // Reset ellipsis in order to get the correct
		                        // bounding box (#4070)
		                        if (
		                            label.styles &&
		                            label.styles.textOverflow === 'ellipsis'
		                        ) {
		                            label.css({ textOverflow: 'clip' });

		                        // Set the correct width in order to read
		                        // the bounding box height (#4678, #5034)
		                        } else if (label.textPxLength > slotWidth) {
		                            label.css({ width: slotWidth + 'px' });
		                        }

		                        if (
		                            label.getBBox().height > (
		                                this.len / tickPositions.length -
		                                (labelMetrics.h - labelMetrics.f)
		                            )
		                        ) {
		                            label.specificTextOverflow = 'ellipsis';
		                        }
		                    }
		                }
		            }
		        }


		        // Add ellipsis if the label length is significantly longer than ideal
		        if (attr.rotation) {
		            commonWidth = (
		                maxLabelLength > chart.chartHeight * 0.5 ?
		                    chart.chartHeight * 0.33 :
		                    maxLabelLength
		            );
		            if (!textOverflowOption) {
		                commonTextOverflow = 'ellipsis';
		            }
		        }

		        // Set the explicit or automatic label alignment
		        this.labelAlign = labelOptions.align ||
		            this.autoLabelAlign(this.labelRotation);
		        if (this.labelAlign) {
		            attr.align = this.labelAlign;
		        }

		        // Apply general and specific CSS
		        tickPositions.forEach(function (pos) {
		            var tick = ticks[pos],
		                label = tick && tick.label,
		                widthOption = labelStyleOptions.width,
		                css = {};

		            if (label) {
		                // This needs to go before the CSS in old IE (#4502)
		                label.attr(attr);

		                if (tick.shortenLabel) {
		                    tick.shortenLabel();
		                } else if (
		                    commonWidth &&
		                    !widthOption &&
		                    // Setting width in this case messes with the bounding box
		                    // (#7975)
		                    labelStyleOptions.whiteSpace !== 'nowrap' &&
		                    (
		                        // Speed optimizing, #7656
		                        commonWidth < label.textPxLength ||
		                        // Resetting CSS, #4928
		                        label.element.tagName === 'SPAN'
		                    )
		                ) {
		                    css.width = commonWidth;
		                    if (!textOverflowOption) {
		                        css.textOverflow = (
		                            label.specificTextOverflow ||
		                            commonTextOverflow
		                        );
		                    }
		                    label.css(css);

		                // Reset previously shortened label (#8210)
		                } else if (
		                    label.styles &&
		                    label.styles.width &&
		                    !css.width &&
		                    !widthOption
		                ) {
		                    label.css({ width: null });
		                }

		                delete label.specificTextOverflow;
		                tick.rotation = attr.rotation;
		            }
		        }, this);

		        // Note: Why is this not part of getLabelPosition?
		        this.tickRotCorr = renderer.rotCorr(
		            labelMetrics.b,
		            this.labelRotation || 0,
		            this.side !== 0
		        );
		    },

		    /**
		     * Return true if the axis has associated data.
		     *
		     * @function Highcharts.Axis#hasData
		     *
		     * @return {boolean}
		     *         True if the axis has associated visible series and those series
		     *         have either valid data points or explicit `min` and `max`
		     *         settings.
		     */
		    hasData: function () {
		        return (
		            this.hasVisibleSeries ||
		            (
		                defined(this.min) &&
		                defined(this.max) &&
		                this.tickPositions &&
		                this.tickPositions.length > 0
		            )
		        );
		    },

		    /**
		     * Adds the title defined in axis.options.title.
		     *
		     * @function Highcharts.Axis#addTitle
		     *
		     * @param {boolean} display
		     *        Whether or not to display the title.
		     */
		    addTitle: function (display) {
		        var axis = this,
		            renderer = axis.chart.renderer,
		            horiz = axis.horiz,
		            opposite = axis.opposite,
		            options = axis.options,
		            axisTitleOptions = options.title,
		            textAlign,
		            styledMode = axis.chart.styledMode;

		        if (!axis.axisTitle) {
		            textAlign = axisTitleOptions.textAlign;
		            if (!textAlign) {
		                textAlign = (horiz ? {
		                    low: 'left',
		                    middle: 'center',
		                    high: 'right'
		                } : {
		                    low: opposite ? 'right' : 'left',
		                    middle: 'center',
		                    high: opposite ? 'left' : 'right'
		                })[axisTitleOptions.align];
		            }
		            axis.axisTitle = renderer.text(
		                axisTitleOptions.text,
		                0,
		                0,
		                axisTitleOptions.useHTML
		            )
		            .attr({
		                zIndex: 7,
		                rotation: axisTitleOptions.rotation || 0,
		                align: textAlign
		            })
		            .addClass('highcharts-axis-title');

		            // #7814, don't mutate style option
		            if (!styledMode) {
		                axis.axisTitle.css(merge(axisTitleOptions.style));
		            }

		            axis.axisTitle.add(axis.axisGroup);
		            axis.axisTitle.isNew = true;
		        }

		        // Max width defaults to the length of the axis
		        if (!styledMode && !axisTitleOptions.style.width && !axis.isRadial) {
		            axis.axisTitle.css({
		                width: axis.len
		            });
		        }

		        // hide or show the title depending on whether showEmpty is set
		        axis.axisTitle[display ? 'show' : 'hide'](true);
		    },

		    /**
		     * Generates a tick for initial positioning.
		     * @private
		     * @param {number} pos The tick position in axis values.
		     * @param {number} i The index of the tick in {@link Axis.tickPositions}.
		     */
		    generateTick: function (pos) {
		        var ticks = this.ticks;

		        if (!ticks[pos]) {
		            ticks[pos] = new Tick(this, pos);
		        } else {
		            ticks[pos].addLabel(); // update labels depending on tick interval
		        }
		    },

		    /**
		     * Render the tick labels to a preliminary position to get their sizes
		     * @private
		     * @fires Highcharts.Axis#event:afterGetOffset
		     */
		    getOffset: function () {
		        var axis = this,
		            chart = axis.chart,
		            renderer = chart.renderer,
		            options = axis.options,
		            tickPositions = axis.tickPositions,
		            ticks = axis.ticks,
		            horiz = axis.horiz,
		            side = axis.side,
		            invertedSide = chart.inverted &&
		                !axis.isZAxis ? [1, 0, 3, 2][side] : side,
		            hasData,
		            showAxis,
		            titleOffset = 0,
		            titleOffsetOption,
		            titleMargin = 0,
		            axisTitleOptions = options.title,
		            labelOptions = options.labels,
		            labelOffset = 0, // reset
		            labelOffsetPadded,
		            axisOffset = chart.axisOffset,
		            clipOffset = chart.clipOffset,
		            clip,
		            directionFactor = [-1, 1, 1, -1][side],
		            className = options.className,
		            axisParent = axis.axisParent, // Used in color axis
		            lineHeightCorrection,
		            tickSize;

		        // For reuse in Axis.render
		        hasData = axis.hasData();
		        axis.showAxis = showAxis = hasData || pick(options.showEmpty, true);

		        // Set/reset staggerLines
		        axis.staggerLines = axis.horiz && labelOptions.staggerLines;

		        // Create the axisGroup and gridGroup elements on first iteration
		        if (!axis.axisGroup) {
		            axis.gridGroup = renderer.g('grid')
		                .attr({ zIndex: options.gridZIndex || 1 })
		                .addClass(
		                    'highcharts-' + this.coll.toLowerCase() + '-grid ' +
		                    (className || '')
		                )
		                .add(axisParent);
		            axis.axisGroup = renderer.g('axis')
		                .attr({ zIndex: options.zIndex || 2 })
		                .addClass(
		                    'highcharts-' + this.coll.toLowerCase() + ' ' +
		                    (className || '')
		                )
		                .add(axisParent);
		            axis.labelGroup = renderer.g('axis-labels')
		                .attr({ zIndex: labelOptions.zIndex || 7 })
		                .addClass(
		                    'highcharts-' + axis.coll.toLowerCase() + '-labels ' +
		                    (className || '')
		                )
		                .add(axisParent);
		        }

		        if (hasData || axis.isLinked) {

		            // Generate ticks
		            tickPositions.forEach(function (pos, i) {
		                // i is not used here, but may be used in overrides
		                axis.generateTick(pos, i);
		            });

		            axis.renderUnsquish();


		            // Left side must be align: right and right side must
		            // have align: left for labels
		            axis.reserveSpaceDefault = (
		                side === 0 ||
		                side === 2 ||
		                { 1: 'left', 3: 'right' }[side] === axis.labelAlign
		            );
		            if (pick(
		                labelOptions.reserveSpace,
		                axis.labelAlign === 'center' ? true : null,
		                axis.reserveSpaceDefault)
		            ) {
		                tickPositions.forEach(function (pos) {
		                    // get the highest offset
		                    labelOffset = Math.max(
		                        ticks[pos].getLabelSize(),
		                        labelOffset
		                    );
		                });
		            }

		            if (axis.staggerLines) {
		                labelOffset *= axis.staggerLines;
		            }
		            axis.labelOffset = labelOffset * (axis.opposite ? -1 : 1);

		        } else { // doesn't have data
		            objectEach(ticks, function (tick, n) {
		                tick.destroy();
		                delete ticks[n];
		            });
		        }

		        if (
		            axisTitleOptions &&
		            axisTitleOptions.text &&
		            axisTitleOptions.enabled !== false
		        ) {
		            axis.addTitle(showAxis);

		            if (showAxis && axisTitleOptions.reserveSpace !== false) {
		                axis.titleOffset = titleOffset =
		                    axis.axisTitle.getBBox()[horiz ? 'height' : 'width'];
		                titleOffsetOption = axisTitleOptions.offset;
		                titleMargin = defined(titleOffsetOption) ?
		                    0 :
		                    pick(axisTitleOptions.margin, horiz ? 5 : 10);
		            }
		        }

		        // Render the axis line
		        axis.renderLine();

		        // handle automatic or user set offset
		        axis.offset = directionFactor * pick(options.offset, axisOffset[side]);

		        axis.tickRotCorr = axis.tickRotCorr || { x: 0, y: 0 }; // polar
		        if (side === 0) {
		            lineHeightCorrection = -axis.labelMetrics().h;
		        } else if (side === 2) {
		            lineHeightCorrection = axis.tickRotCorr.y;
		        } else {
		            lineHeightCorrection = 0;
		        }

		        // Find the padded label offset
		        labelOffsetPadded = Math.abs(labelOffset) + titleMargin;
		        if (labelOffset) {
		            labelOffsetPadded -= lineHeightCorrection;
		            labelOffsetPadded += directionFactor * (
		                horiz ?
		                    pick(
		                        labelOptions.y,
		                        axis.tickRotCorr.y + directionFactor * 8
		                    ) :
		                    labelOptions.x
		            );
		        }

		        axis.axisTitleMargin = pick(titleOffsetOption, labelOffsetPadded);

		        if (axis.getMaxLabelDimensions) {
		            axis.maxLabelDimensions = axis.getMaxLabelDimensions(
		                ticks,
		                tickPositions
		            );
		        }

		        // Due to GridAxis.tickSize, tickSize should be calculated after ticks
		        // has rendered.
		        tickSize = this.tickSize('tick');

		        axisOffset[side] = Math.max(
		            axisOffset[side],
		            axis.axisTitleMargin + titleOffset + directionFactor * axis.offset,
		            labelOffsetPadded, // #3027
		            hasData && tickPositions.length && tickSize ?
		                tickSize[0] + directionFactor * axis.offset :
		                0 // #4866
		        );

		        // Decide the clipping needed to keep the graph inside
		        // the plot area and axis lines
		        clip = options.offset ?
		            0 :
		            Math.floor(axis.axisLine.strokeWidth() / 2) * 2; // #4308, #4371
		        clipOffset[invertedSide] = Math.max(clipOffset[invertedSide], clip);

		        fireEvent(this, 'afterGetOffset');
		    },

		    /**
		     * Internal function to get the path for the axis line. Extended for polar
		     * charts.
		     *
		     * @function Highcharts.Axis#getLinePath
		     *
		     * @param {number} lineWidth
		     *        The line width in pixels.
		     *
		     * @return {Highcharts.SVGPathArray}
		     *         The SVG path definition in array form.
		     */
		    getLinePath: function (lineWidth) {
		        var chart = this.chart,
		            opposite = this.opposite,
		            offset = this.offset,
		            horiz = this.horiz,
		            lineLeft = this.left + (opposite ? this.width : 0) + offset,
		            lineTop = chart.chartHeight - this.bottom -
		                (opposite ? this.height : 0) + offset;

		        if (opposite) {
		            lineWidth *= -1; // crispify the other way - #1480, #1687
		        }

		        return chart.renderer
		            .crispLine([
		                'M',
		                horiz ?
		                    this.left :
		                    lineLeft,
		                horiz ?
		                    lineTop :
		                    this.top,
		                'L',
		                horiz ?
		                    chart.chartWidth - this.right :
		                    lineLeft,
		                horiz ?
		                    lineTop :
		                    chart.chartHeight - this.bottom
		            ], lineWidth);
		    },

		    /**
		     * Render the axis line. Called internally when rendering and redrawing the
		     * axis.
		     *
		     * @function Highcharts.Axis#renderLine
		     */
		    renderLine: function () {
		        if (!this.axisLine) {
		            this.axisLine = this.chart.renderer.path()
		                .addClass('highcharts-axis-line')
		                .add(this.axisGroup);

		            if (!this.chart.styledMode) {
		                this.axisLine.attr({
		                    stroke: this.options.lineColor,
		                    'stroke-width': this.options.lineWidth,
		                    zIndex: 7
		                });
		            }
		        }
		    },

		    /**
		     * Position the axis title.
		     * @private
		     * @return {Highcharts.PositionObject} X and Y positions for the title.
		     */
		    getTitlePosition: function () {
		        // compute anchor points for each of the title align options
		        var horiz = this.horiz,
		            axisLeft = this.left,
		            axisTop = this.top,
		            axisLength = this.len,
		            axisTitleOptions = this.options.title,
		            margin = horiz ? axisLeft : axisTop,
		            opposite = this.opposite,
		            offset = this.offset,
		            xOption = axisTitleOptions.x || 0,
		            yOption = axisTitleOptions.y || 0,
		            axisTitle = this.axisTitle,
		            fontMetrics = this.chart.renderer.fontMetrics(
		                axisTitleOptions.style && axisTitleOptions.style.fontSize,
		                axisTitle
		            ),
		            // The part of a multiline text that is below the baseline of the
		            // first line. Subtract 1 to preserve pixel-perfectness from the
		            // old behaviour (v5.0.12), where only one line was allowed.
		            textHeightOvershoot = Math.max(
		                axisTitle.getBBox(null, 0).height - fontMetrics.h - 1,
		                0
		            ),

		            // the position in the length direction of the axis
		            alongAxis = {
		                low: margin + (horiz ? 0 : axisLength),
		                middle: margin + axisLength / 2,
		                high: margin + (horiz ? axisLength : 0)
		            }[axisTitleOptions.align],

		            // the position in the perpendicular direction of the axis
		            offAxis = (horiz ? axisTop + this.height : axisLeft) +
		                (horiz ? 1 : -1) * // horizontal axis reverses the margin
		                (opposite ? -1 : 1) * // so does opposite axes
		                this.axisTitleMargin +
		                [
		                    -textHeightOvershoot, // top
		                    textHeightOvershoot, // right
		                    fontMetrics.f, // bottom
		                    -textHeightOvershoot // left
		                ][this.side];


		        return {
		            x: horiz ?
		                alongAxis + xOption :
		                offAxis + (opposite ? this.width : 0) + offset + xOption,
		            y: horiz ?
		                offAxis + yOption - (opposite ? this.height : 0) + offset :
		                alongAxis + yOption
		        };
		    },

		    /**
		     * Render a minor tick into the given position. If a minor tick already
		     * exists in this position, move it.
		     *
		     * @function Highcharts.Axis#renderMinorTick
		     *
		     * @param {number} pos
		     *        The position in axis values.
		     */
		    renderMinorTick: function (pos) {
		        var slideInTicks = this.chart.hasRendered && isNumber(this.oldMin),
		            minorTicks = this.minorTicks;

		        if (!minorTicks[pos]) {
		            minorTicks[pos] = new Tick(this, pos, 'minor');
		        }

		        // Render new ticks in old position
		        if (slideInTicks && minorTicks[pos].isNew) {
		            minorTicks[pos].render(null, true);
		        }

		        minorTicks[pos].render(null, false, 1);
		    },

		    /**
		     * Render a major tick into the given position. If a tick already exists
		     * in this position, move it.
		     *
		     * @function Highcharts.Axis#renderTick
		     *
		     * @param {number} pos
		     *        The position in axis values.
		     *
		     * @param {number} i
		     *        The tick index.
		     */
		    renderTick: function (pos, i) {
		        var isLinked = this.isLinked,
		            ticks = this.ticks,
		            slideInTicks = this.chart.hasRendered && isNumber(this.oldMin);

		        // Linked axes need an extra check to find out if
		        if (!isLinked || (pos >= this.min && pos <= this.max)) {

		            if (!ticks[pos]) {
		                ticks[pos] = new Tick(this, pos);
		            }
		            // NOTE this seems like overkill. Could be handled in tick.render by
		            // setting old position in attr, then set new position in animate.
		            // render new ticks in old position
		            if (slideInTicks && ticks[pos].isNew) {
		                // Start with negative opacity so that it is visible from
		                // halfway into the animation
		                ticks[pos].render(i, true, -1);
		            }

		            ticks[pos].render(i);
		        }
		    },

		    /**
		     * Render the axis.
		     * @private
		     * @fires Highcharts.Axis#event:afterRender
		     */
		    render: function () {
		        var axis = this,
		            chart = axis.chart,
		            renderer = chart.renderer,
		            options = axis.options,
		            isLog = axis.isLog,
		            isLinked = axis.isLinked,
		            tickPositions = axis.tickPositions,
		            axisTitle = axis.axisTitle,
		            ticks = axis.ticks,
		            minorTicks = axis.minorTicks,
		            alternateBands = axis.alternateBands,
		            stackLabelOptions = options.stackLabels,
		            alternateGridColor = options.alternateGridColor,
		            tickmarkOffset = axis.tickmarkOffset,
		            axisLine = axis.axisLine,
		            showAxis = axis.showAxis,
		            animation = animObject(renderer.globalAnimation),
		            from,
		            to;

		        // Reset
		        axis.labelEdge.length = 0;
		        axis.overlap = false;

		        // Mark all elements inActive before we go over and mark the active ones
		        [ticks, minorTicks, alternateBands].forEach(function (coll) {
		            objectEach(coll, function (tick) {
		                tick.isActive = false;
		            });
		        });

		        // If the series has data draw the ticks. Else only the line and title
		        if (axis.hasData() || isLinked) {

		            // minor ticks
		            if (axis.minorTickInterval && !axis.categories) {
		                axis.getMinorTickPositions().forEach(function (pos) {
		                    axis.renderMinorTick(pos);
		                });
		            }

		            // Major ticks. Pull out the first item and render it last so that
		            // we can get the position of the neighbour label. #808.
		            if (tickPositions.length) { // #1300
		                tickPositions.forEach(function (pos, i) {
		                    axis.renderTick(pos, i);
		                });
		                // In a categorized axis, the tick marks are displayed
		                // between labels. So we need to add a tick mark and
		                // grid line at the left edge of the X axis.
		                if (tickmarkOffset && (axis.min === 0 || axis.single)) {
		                    if (!ticks[-1]) {
		                        ticks[-1] = new Tick(axis, -1, null, true);
		                    }
		                    ticks[-1].render(-1);
		                }

		            }

		            // alternate grid color
		            if (alternateGridColor) {
		                tickPositions.forEach(function (pos, i) {
		                    to = tickPositions[i + 1] !== undefined ?
		                        tickPositions[i + 1] + tickmarkOffset :
		                        axis.max - tickmarkOffset;

		                    if (
		                        i % 2 === 0 &&
		                        pos < axis.max &&
		                        to <= axis.max + (
		                            chart.polar ?
		                                -tickmarkOffset :
		                                tickmarkOffset
		                        )
		                    ) { // #2248, #4660
		                        if (!alternateBands[pos]) {
		                            alternateBands[pos] = new H.PlotLineOrBand(axis);
		                        }
		                        from = pos + tickmarkOffset; // #949
		                        alternateBands[pos].options = {
		                            from: isLog ? axis.lin2log(from) : from,
		                            to: isLog ? axis.lin2log(to) : to,
		                            color: alternateGridColor
		                        };
		                        alternateBands[pos].render();
		                        alternateBands[pos].isActive = true;
		                    }
		                });
		            }

		            // custom plot lines and bands
		            if (!axis._addedPlotLB) { // only first time
		                (
		                    (options.plotLines || []).concat(options.plotBands || [])
		                ).forEach(
		                    function (plotLineOptions) {
		                        axis.addPlotBandOrLine(plotLineOptions);
		                    }
		                );
		                axis._addedPlotLB = true;
		            }

		        } // end if hasData

		        // Remove inactive ticks
		        [ticks, minorTicks, alternateBands].forEach(function (coll) {
		            var i,
		                forDestruction = [],
		                delay = animation.duration,
		                destroyInactiveItems = function () {
		                    i = forDestruction.length;
		                    while (i--) {
		                        // When resizing rapidly, the same items
		                        // may be destroyed in different timeouts,
		                        // or the may be reactivated
		                        if (
		                            coll[forDestruction[i]] &&
		                            !coll[forDestruction[i]].isActive
		                        ) {
		                            coll[forDestruction[i]].destroy();
		                            delete coll[forDestruction[i]];
		                        }
		                    }

		                };

		            objectEach(coll, function (tick, pos) {
		                if (!tick.isActive) {
		                    // Render to zero opacity
		                    tick.render(pos, false, 0);
		                    tick.isActive = false;
		                    forDestruction.push(pos);
		                }
		            });

		            // When the objects are finished fading out, destroy them
		            syncTimeout(
		                destroyInactiveItems,
		                coll === alternateBands ||
		                    !chart.hasRendered ||
		                    !delay ?
		                        0 :
		                        delay
		            );
		        });

		        // Set the axis line path
		        if (axisLine) {
		            axisLine[axisLine.isPlaced ? 'animate' : 'attr']({
		                d: this.getLinePath(axisLine.strokeWidth())
		            });
		            axisLine.isPlaced = true;

		            // Show or hide the line depending on options.showEmpty
		            axisLine[showAxis ? 'show' : 'hide'](true);
		        }

		        if (axisTitle && showAxis) {
		            var titleXy = axis.getTitlePosition();
		            if (isNumber(titleXy.y)) {
		                axisTitle[axisTitle.isNew ? 'attr' : 'animate'](titleXy);
		                axisTitle.isNew = false;
		            } else {
		                axisTitle.attr('y', -9999);
		                axisTitle.isNew = true;
		            }
		        }

		        // Stacked totals:
		        if (stackLabelOptions && stackLabelOptions.enabled) {
		            axis.renderStackTotals();
		        }
		        // End stacked totals

		        axis.isDirty = false;

		        fireEvent(this, 'afterRender');
		    },

		    // Redraw the axis to reflect changes in the data or axis extremes. Called
		    // internally from Highcharts.Chart#redraw.
		    redraw: function () {

		        if (this.visible) {
		            // render the axis
		            this.render();

		            // move plot lines and bands
		            this.plotLinesAndBands.forEach(function (plotLine) {
		                plotLine.render();
		            });
		        }

		        // mark associated series as dirty and ready for redraw
		        this.series.forEach(function (series) {
		            series.isDirty = true;
		        });

		    },

		    // Properties to survive after destroy, needed for Axis.update (#4317,
		    // #5773, #5881).
		    keepProps: ['extKey', 'hcEvents', 'names', 'series', 'userMax', 'userMin'],

		    /**
		     * Destroys an Axis instance. See {@link Axis#remove} for the API endpoint
		     * to fully remove the axis.
		     * @private
		     * @param {boolean} keepEvents Whether to preserve events, used internally
		     * in Axis.update.
		     */
		    destroy: function (keepEvents) {
		        var axis = this,
		            stacks = axis.stacks,
		            plotLinesAndBands = axis.plotLinesAndBands,
		            plotGroup,
		            i;

		        fireEvent(this, 'destroy', { keepEvents: keepEvents });

		        // Remove the events
		        if (!keepEvents) {
		            removeEvent(axis);
		        }

		        // Destroy each stack total
		        objectEach(stacks, function (stack, stackKey) {
		            destroyObjectProperties(stack);

		            stacks[stackKey] = null;
		        });

		        // Destroy collections
		        [axis.ticks, axis.minorTicks, axis.alternateBands].forEach(
		            function (coll) {
		                destroyObjectProperties(coll);
		            }
		        );
		        if (plotLinesAndBands) {
		            i = plotLinesAndBands.length;
		            while (i--) { // #1975
		                plotLinesAndBands[i].destroy();
		            }
		        }

		        // Destroy elements
		        ['stackTotalGroup', 'axisLine', 'axisTitle', 'axisGroup',
		            'gridGroup', 'labelGroup', 'cross', 'scrollbar'].forEach(
		            function (prop) {
		                if (axis[prop]) {
		                    axis[prop] = axis[prop].destroy();
		                }
		            }
		        );

		        // Destroy each generated group for plotlines and plotbands
		        for (plotGroup in axis.plotLinesAndBandsGroups) {
		            axis.plotLinesAndBandsGroups[plotGroup] =
		                axis.plotLinesAndBandsGroups[plotGroup].destroy();
		        }

		        // Delete all properties and fall back to the prototype.
		        objectEach(axis, function (val, key) {
		            if (axis.keepProps.indexOf(key) === -1) {
		                delete axis[key];
		            }
		        });
		    },

		    /**
		     * Internal function to draw a crosshair.
		     *
		     * @function Highcharts.Axis#drawCrosshair
		     *
		     * @param {Highcharts.PointerEventObject} [e]
		     *        The event arguments from the modified pointer event, extended with
		     *        `chartX` and `chartY`
		     *
		     * @param {Highcharts.Point} [point]
		     *        The Point object if the crosshair snaps to points.
		     *
		     * @fires Highcharts.Axis#event:afterDrawCrosshair
		     * @fires Highcharts.Axis#event:drawCrosshair
		     */
		    drawCrosshair: function (e, point) {

		        var path,
		            options = this.crosshair,
		            snap = pick(options.snap, true),
		            pos,
		            categorized,
		            graphic = this.cross;

		        fireEvent(this, 'drawCrosshair', { e: e, point: point });

		        // Use last available event when updating non-snapped crosshairs without
		        // mouse interaction (#5287)
		        if (!e) {
		            e = this.cross && this.cross.e;
		        }

		        if (
		            // Disabled in options
		            !this.crosshair ||
		            // Snap
		            ((defined(point) || !snap) === false)
		        ) {
		            this.hideCrosshair();
		        } else {

		            // Get the path
		            if (!snap) {
		                pos = e &&
		                    (
		                        this.horiz ?
		                            e.chartX - this.pos :
		                            this.len - e.chartY + this.pos
		                    );
		            } else if (defined(point)) {
		                // #3834
		                pos = pick(
		                    point.crosshairPos, // 3D axis extension
		                    this.isXAxis ? point.plotX : this.len - point.plotY
		                );
		            }

		            if (defined(pos)) {
		                path = this.getPlotLinePath(
		                    // First argument, value, only used on radial
		                    point && (this.isXAxis ?
		                        point.x :
		                        pick(point.stackY, point.y)
		                    ),
		                    null,
		                    null,
		                    null,
		                    pos // Translated position
		                ) || null; // #3189
		            }

		            if (!defined(path)) {
		                this.hideCrosshair();
		                return;
		            }

		            categorized = this.categories && !this.isRadial;

		            // Draw the cross
		            if (!graphic) {
		                this.cross = graphic = this.chart.renderer
		                    .path()
		                    .addClass(
		                        'highcharts-crosshair highcharts-crosshair-' +
		                        (categorized ? 'category ' : 'thin ') +
		                        options.className
		                    )
		                    .attr({
		                        zIndex: pick(options.zIndex, 2)
		                    })
		                    .add();

		                // Presentational attributes
		                if (!this.chart.styledMode) {
		                    graphic.attr({
		                        'stroke': options.color ||
		                            (
		                                categorized ?
		                                    color('#ccd6eb')
		                                        .setOpacity(0.25).get() :
		                                    '#cccccc'
		                            ),
		                        'stroke-width': pick(options.width, 1)
		                    }).css({
		                        'pointer-events': 'none'
		                    });
		                    if (options.dashStyle) {
		                        graphic.attr({
		                            dashstyle: options.dashStyle
		                        });
		                    }
		                }

		            }

		            graphic.show().attr({
		                d: path
		            });

		            if (categorized && !options.width) {
		                graphic.attr({
		                    'stroke-width': this.transA
		                });
		            }
		            this.cross.e = e;
		        }

		        fireEvent(this, 'afterDrawCrosshair', { e: e, point: point });
		    },

		    /**
		     * Hide the crosshair if visible.
		     *
		     * @function Highcharts.Axis#hideCrosshair
		     */
		    hideCrosshair: function () {
		        if (this.cross) {
		            this.cross.hide();
		        }
		    }
		}); // end Axis

		H.Axis = Axis;

		return Axis;
	}(Highcharts));
	(function (Highcharts) {
		/**
		 * (c) 2010-2018 Torstein Honsi
		 *
		 * License: www.highcharts.com/license
		 */



		var H = Highcharts,

		    addEvent = H.addEvent,
		    css = H.css,
		    discardElement = H.discardElement,
		    defined = H.defined,
		    fireEvent = H.fireEvent,
		    isFirefox = H.isFirefox,
		    marginNames = H.marginNames,
		    merge = H.merge,
		    pick = H.pick,
		    setAnimation = H.setAnimation,
		    stableSort = H.stableSort,
		    win = H.win,
		    wrap = H.wrap;

		/**
		 * The overview of the chart's series. The legend object is instanciated
		 * internally in the chart constructor, and is available from the `chart.legend`
		 * property. Each chart has only one legend.
		 *
		 * @class
		 * @name Highcharts.Legend
		 *
		 * @param {Highcharts.Chart} chart
		 *        The chart instance.
		 *
		 * @param {Highcharts.LegendOptions} options
		 *        Legend options.
		 */
		Highcharts.Legend = function (chart, options) {
		    this.init(chart, options);
		};

		Highcharts.Legend.prototype = {

		    /**
		     * Initialize the legend.
		     *
		     * @private
		     * @function Highcharts.Legend#init
		     *
		     * @param {Highcharts.Chart} chart
		     *        The chart instance.
		     *
		     * @param {Highcharts.LegendOptions} options
		     *        Legend options.
		     */
		    init: function (chart, options) {

		        /**
		         * Chart of this legend.
		         *
		         * @readonly
		         * @name Highcharts.Legend#chart
		         * @type {Highcharts.Chart}
		         */
		        this.chart = chart;

		        this.setOptions(options);

		        if (options.enabled) {

		            // Render it
		            this.render();

		            // move checkboxes
		            addEvent(this.chart, 'endResize', function () {
		                this.legend.positionCheckboxes();
		            });

		            if (this.proximate) {
		                this.unchartrender = addEvent(
		                    this.chart,
		                    'render',
		                    function () {
		                        this.legend.proximatePositions();
		                        this.legend.positionItems();
		                    }
		                );
		            } else if (this.unchartrender) {
		                this.unchartrender();
		            }
		        }
		    },

		    /**
		     * @private
		     * @function Highcharts.Legend#setOptions
		     *
		     * @param {Highcharts.LegendOptions} options
		     */
		    setOptions: function (options) {

		        var padding = pick(options.padding, 8);

		        /**
		         * Legend options.
		         *
		         * @readonly
		         * @name Highcharts.Legend#options
		         * @type {Highcharts.LegendOptions}
		         */
		        this.options = options;

		        if (!this.chart.styledMode) {
		            this.itemStyle = options.itemStyle;
		            this.itemHiddenStyle = merge(
		                this.itemStyle,
		                options.itemHiddenStyle
		            );
		        }

		        this.itemMarginTop = options.itemMarginTop || 0;
		        this.padding = padding;
		        this.initialItemY = padding - 5; // 5 is pixels above the text
		        this.symbolWidth = pick(options.symbolWidth, 16);
		        this.pages = [];
		        this.proximate = options.layout === 'proximate' && !this.chart.inverted;

		    },

		    /**
		     * Update the legend with new options. Equivalent to running `chart.update`
		     * with a legend configuration option.
		     *
		     * @sample highcharts/legend/legend-update/
		     *         Legend update
		     *
		     * @function Highcharts.Legend#update
		     *
		     * @param {Highcharts.LegendOptions} options
		     *        Legend options.
		     *
		     * @param {boolean} [redraw=true]
		     *        Whether to redraw the chart after the axis is altered. If doing
		     *        more operations on the chart, it is a good idea to set redraw to
		     *        false and call {@link Chart#redraw} after.
		     *        Whether to redraw the chart.
		     *
		     * @fires Highcharts.Legends#event:afterUpdate
		     */
		    update: function (options, redraw) {
		        var chart = this.chart;

		        this.setOptions(merge(true, this.options, options));
		        this.destroy();
		        chart.isDirtyLegend = chart.isDirtyBox = true;
		        if (pick(redraw, true)) {
		            chart.redraw();
		        }

		        fireEvent(this, 'afterUpdate');
		    },

		    /**
		     * Set the colors for the legend item.
		     *
		     * @private
		     * @function Highcharts.Legend#colorizeItem
		     *
		     * @param {Highcharts.Point|Highcharts.Series} item
		     *        A Series or Point instance
		     *
		     * @param {boolean} [visible=false]
		     *        Dimmed or colored
		     *
		     * @todo
		     * Make events official: Fires the event `afterColorizeItem`.
		     */
		    colorizeItem: function (item, visible) {
		        item.legendGroup[visible ? 'removeClass' : 'addClass'](
		            'highcharts-legend-item-hidden'
		        );

		        if (!this.chart.styledMode) {
		            var legend = this,
		                options = legend.options,
		                legendItem = item.legendItem,
		                legendLine = item.legendLine,
		                legendSymbol = item.legendSymbol,
		                hiddenColor = legend.itemHiddenStyle.color,
		                textColor = visible ? options.itemStyle.color : hiddenColor,
		                symbolColor = visible ?
		                    (item.color || hiddenColor) :
		                    hiddenColor,
		                markerOptions = item.options && item.options.marker,
		                symbolAttr = { fill: symbolColor };

		            if (legendItem) {
		                legendItem.css({
		                    fill: textColor,
		                    color: textColor // #1553, oldIE
		                });
		            }
		            if (legendLine) {
		                legendLine.attr({ stroke: symbolColor });
		            }

		            if (legendSymbol) {

		                // Apply marker options
		                if (markerOptions && legendSymbol.isMarker) { // #585
		                    symbolAttr = item.pointAttribs();
		                    if (!visible) {
		                        // #6769
		                        symbolAttr.stroke = symbolAttr.fill = hiddenColor;
		                    }
		                }

		                legendSymbol.attr(symbolAttr);
		            }
		        }

		        fireEvent(this, 'afterColorizeItem', { item: item, visible: visible });
		    },

		    /**
		     * @private
		     * @function Highcharts.Legend#positionItems
		     */
		    positionItems: function () {

		        // Now that the legend width and height are established, put the items
		        // in the final position
		        this.allItems.forEach(this.positionItem, this);

		        if (!this.chart.isResizing) {
		            this.positionCheckboxes();
		        }
		    },

		    /**
		     * Position the legend item.
		     *
		     * @private
		     * @function Highcharts.Legend#positionItem
		     *
		     * @param {Highcharts.Point|Highcharts.Series} item
		     *        The item to position
		     */
		    positionItem: function (item) {
		        var legend = this,
		            options = legend.options,
		            symbolPadding = options.symbolPadding,
		            ltr = !options.rtl,
		            legendItemPos = item._legendItemPos,
		            itemX = legendItemPos[0],
		            itemY = legendItemPos[1],
		            checkbox = item.checkbox,
		            legendGroup = item.legendGroup;

		        if (legendGroup && legendGroup.element) {
		            legendGroup[defined(legendGroup.translateY) ? 'animate' : 'attr']({
		                translateX: ltr ?
		                    itemX :
		                    legend.legendWidth - itemX - 2 * symbolPadding - 4,
		                translateY: itemY
		            });
		        }

		        if (checkbox) {
		            checkbox.x = itemX;
		            checkbox.y = itemY;
		        }
		    },

		    /**
		     * Destroy a single legend item, used internally on removing series items.
		     *
		     * @private
		     * @function Highcharts.Legend#destroyItem
		     *
		     * @param {Highcharts.Point|Highcharts.Series} item
		     *        The item to remove
		     */
		    destroyItem: function (item) {
		        var checkbox = item.checkbox;

		        // destroy SVG elements
		        ['legendItem', 'legendLine', 'legendSymbol', 'legendGroup'].forEach(
		            function (key) {
		                if (item[key]) {
		                    item[key] = item[key].destroy();
		                }
		            }
		        );

		        if (checkbox) {
		            discardElement(item.checkbox);
		        }
		    },

		    /**
		     * Destroy the legend. Used internally. To reflow objects, `chart.redraw`
		     * must be called after destruction.
		     *
		     * @private
		     * @function Highcharts.Legend#destroy
		     */
		    destroy: function () {
		        function destroyItems(key) {
		            if (this[key]) {
		                this[key] = this[key].destroy();
		            }
		        }

		        // Destroy items
		        this.getAllItems().forEach(function (item) {
		            ['legendItem', 'legendGroup'].forEach(destroyItems, item);
		        });

		        // Destroy legend elements
		        [
		            'clipRect',
		            'up',
		            'down',
		            'pager',
		            'nav',
		            'box',
		            'title',
		            'group'
		        ].forEach(destroyItems, this);
		        this.display = null; // Reset in .render on update.
		    },

		    /**
		     * Position the checkboxes after the width is determined.
		     *
		     * @private
		     * @function Highcharts.Legend#positionCheckboxes
		     */
		    positionCheckboxes: function () {
		        var alignAttr = this.group && this.group.alignAttr,
		            translateY,
		            clipHeight = this.clipHeight || this.legendHeight,
		            titleHeight = this.titleHeight;

		        if (alignAttr) {
		            translateY = alignAttr.translateY;
		            this.allItems.forEach(function (item) {
		                var checkbox = item.checkbox,
		                    top;

		                if (checkbox) {
		                    top = translateY + titleHeight + checkbox.y +
		                        (this.scrollOffset || 0) + 3;
		                    css(checkbox, {
		                        left: (alignAttr.translateX + item.checkboxOffset +
		                            checkbox.x - 20) + 'px',
		                        top: top + 'px',
		                        display: this.proximate || (
		                            top > translateY - 6 &&
		                            top < translateY + clipHeight - 6
		                        ) ?
		                            '' :
		                            'none'
		                    });
		                }
		            }, this);
		        }
		    },

		    /**
		     * Render the legend title on top of the legend.
		     *
		     * @private
		     * @function Highcharts.Legend#renderTitle
		     */
		    renderTitle: function () {
		        var options = this.options,
		            padding = this.padding,
		            titleOptions = options.title,
		            titleHeight = 0,
		            bBox;

		        if (titleOptions.text) {
		            if (!this.title) {
		                /**
		                 * SVG element of the legend title.
		                 *
		                 * @readonly
		                 * @name Highcharts.Legend#title
		                 * @type {Highcharts.SVGElement}
		                 */
		                this.title = this.chart.renderer.label(
		                        titleOptions.text,
		                        padding - 3,
		                        padding - 4,
		                        null,
		                        null,
		                        null,
		                        options.useHTML,
		                        null,
		                        'legend-title'
		                    )
		                    .attr({ zIndex: 1 });

		                if (!this.chart.styledMode) {
		                    this.title.css(titleOptions.style);
		                }

		                this.title.add(this.group);
		            }
		            bBox = this.title.getBBox();
		            titleHeight = bBox.height;
		            this.offsetWidth = bBox.width; // #1717
		            this.contentGroup.attr({ translateY: titleHeight });
		        }
		        this.titleHeight = titleHeight;
		    },

		    /**
		     * Set the legend item text.
		     *
		     * @function Highcharts.Legend#setText
		     *
		     * @param {Highcharts.Point|Highcharts.Series} item
		     *        The item for which to update the text in the legend.
		     */
		    setText: function (item) {
		        var options = this.options;
		        item.legendItem.attr({
		            text: options.labelFormat ?
		                H.format(options.labelFormat, item, this.chart.time) :
		                options.labelFormatter.call(item)
		        });
		    },

		    /**
		     * Render a single specific legend item. Called internally from the `render`
		     * function.
		     *
		     * @private
		     * @function Highcharts.Legend#renderItem
		     *
		     * @param {Highcharts.Point|Highcharts.Series} item
		     *        The item to render.
		     */
		    renderItem: function (item) {
		        var legend = this,
		            chart = legend.chart,
		            renderer = chart.renderer,
		            options = legend.options,
		            horizontal = options.layout === 'horizontal',
		            symbolWidth = legend.symbolWidth,
		            symbolPadding = options.symbolPadding,
		            itemStyle = legend.itemStyle,
		            itemHiddenStyle = legend.itemHiddenStyle,
		            itemDistance = horizontal ? pick(options.itemDistance, 20) : 0,
		            ltr = !options.rtl,
		            bBox,
		            li = item.legendItem,
		            isSeries = !item.series,
		            series = !isSeries && item.series.drawLegendSymbol ?
		                item.series :
		                item,
		            seriesOptions = series.options,
		            showCheckbox = legend.createCheckboxForItem &&
		                seriesOptions &&
		                seriesOptions.showCheckbox,
		            // full width minus text width
		            itemExtraWidth = symbolWidth + symbolPadding + itemDistance +
		                (showCheckbox ? 20 : 0),
		            useHTML = options.useHTML,
		            itemClassName = item.options.className;

		        if (!li) { // generate it once, later move it

		            // Generate the group box, a group to hold the symbol and text. Text
		            // is to be appended in Legend class.
		            item.legendGroup = renderer.g('legend-item')
		                .addClass(
		                    'highcharts-' + series.type + '-series ' +
		                    'highcharts-color-' + item.colorIndex +
		                    (itemClassName ? ' ' + itemClassName : '') +
		                    (isSeries ? ' highcharts-series-' + item.index : '')
		                )
		                .attr({ zIndex: 1 })
		                .add(legend.scrollGroup);

		            // Generate the list item text and add it to the group
		            item.legendItem = li = renderer.text(
		                    '',
		                    ltr ? symbolWidth + symbolPadding : -symbolPadding,
		                    legend.baseline || 0,
		                    useHTML
		                );

		            if (!chart.styledMode) {
		                // merge to prevent modifying original (#1021)
		                li.css(merge(item.visible ? itemStyle : itemHiddenStyle));
		            }

		            li.attr({
		                align: ltr ? 'left' : 'right',
		                zIndex: 2
		            })
		            .add(item.legendGroup);

		            // Get the baseline for the first item - the font size is equal for
		            // all
		            if (!legend.baseline) {
		                legend.fontMetrics = renderer.fontMetrics(
		                    chart.styledMode ? 12 : itemStyle.fontSize,
		                    li
		                );
		                legend.baseline =
		                    legend.fontMetrics.f + 3 + legend.itemMarginTop;
		                li.attr('y', legend.baseline);
		            }

		            // Draw the legend symbol inside the group box
		            legend.symbolHeight = options.symbolHeight || legend.fontMetrics.f;
		            series.drawLegendSymbol(legend, item);

		            if (legend.setItemEvents) {
		                legend.setItemEvents(item, li, useHTML);
		            }

		            // add the HTML checkbox on top
		            if (showCheckbox) {
		                legend.createCheckboxForItem(item);
		            }
		        }

		        // Colorize the items
		        legend.colorizeItem(item, item.visible);

		        // Take care of max width and text overflow (#6659)
		        if (chart.styledMode || !itemStyle.width) {
		            li.css({
		                width: (
		                    options.itemWidth ||
		                    options.width ||
		                    chart.spacingBox.width
		                ) - itemExtraWidth
		            });
		        }

		        // Always update the text
		        legend.setText(item);

		        // calculate the positions for the next line
		        bBox = li.getBBox();

		        item.itemWidth = item.checkboxOffset =
		            options.itemWidth ||
		            item.legendItemWidth ||
		            bBox.width + itemExtraWidth;
		        legend.maxItemWidth = Math.max(legend.maxItemWidth, item.itemWidth);
		        legend.totalItemWidth += item.itemWidth;
		        legend.itemHeight = item.itemHeight = Math.round(
		            item.legendItemHeight || bBox.height || legend.symbolHeight
		        );
		    },

		    /**
		     * Get the position of the item in the layout. We now know the
		     * maxItemWidth from the previous loop.
		     *
		     * @private
		     * @function Highcharts.Legend#layoutItem
		     *
		     * @param {Highcharts.Point|Highcharts.Series} item
		     */
		    layoutItem: function (item) {

		        var options = this.options,
		            padding = this.padding,
		            horizontal = options.layout === 'horizontal',
		            itemHeight = item.itemHeight,
		            itemMarginBottom = options.itemMarginBottom || 0,
		            itemMarginTop = this.itemMarginTop,
		            itemDistance = horizontal ? pick(options.itemDistance, 20) : 0,
		            widthOption = options.width,
		            maxLegendWidth = widthOption || (
		                this.chart.spacingBox.width - 2 * padding - options.x
		            ),
		            itemWidth = (
		                    options.alignColumns &&
		                    this.totalItemWidth > maxLegendWidth
		                ) ?
		                this.maxItemWidth :
		                item.itemWidth;

		        // If the item exceeds the width, start a new line
		        if (
		            horizontal &&
		            this.itemX - padding + itemWidth > maxLegendWidth
		        ) {
		            this.itemX = padding;
		            this.itemY += itemMarginTop + this.lastLineHeight +
		                itemMarginBottom;
		            this.lastLineHeight = 0; // reset for next line (#915, #3976)
		        }

		        // Set the edge positions
		        this.lastItemY = itemMarginTop + this.itemY + itemMarginBottom;
		        this.lastLineHeight = Math.max( // #915
		            itemHeight,
		            this.lastLineHeight
		        );

		        // cache the position of the newly generated or reordered items
		        item._legendItemPos = [this.itemX, this.itemY];

		        // advance
		        if (horizontal) {
		            this.itemX += itemWidth;

		        } else {
		            this.itemY += itemMarginTop + itemHeight + itemMarginBottom;
		            this.lastLineHeight = itemHeight;
		        }

		        // the width of the widest item
		        this.offsetWidth = widthOption || Math.max(
		            (
		                horizontal ? this.itemX - padding - (item.checkbox ?
		                    // decrease by itemDistance only when no checkbox #4853
		                    0 :
		                    itemDistance
		                ) : itemWidth
		            ) + padding,
		            this.offsetWidth
		        );
		    },

		    /**
		     * Get all items, which is one item per series for most series and one
		     * item per point for pie series and its derivatives.
		     *
		     * @private
		     * @function Highcharts.Legend#getAllItems
		     *
		     * @return {Array<Highcharts.Point|Highcharts.Series>}
		     *         The current items in the legend.
		     *
		     * @fires Highcharts.Legend#event:afterGetAllItems
		     *
		     * @todo
		     * Make events official: Fires the event `afterGetAllItems`.
		     */
		    getAllItems: function () {
		        var allItems = [];
		        this.chart.series.forEach(function (series) {
		            var seriesOptions = series && series.options;

		            // Handle showInLegend. If the series is linked to another series,
		            // defaults to false.
		            if (series && pick(
		                seriesOptions.showInLegend,
		                !defined(seriesOptions.linkedTo) ? undefined : false, true
		            )) {

		                // Use points or series for the legend item depending on
		                // legendType
		                allItems = allItems.concat(
		                    series.legendItems ||
		                    (
		                        seriesOptions.legendType === 'point' ?
		                            series.data :
		                            series
		                    )
		                );
		            }
		        });

		        fireEvent(this, 'afterGetAllItems', { allItems: allItems });

		        return allItems;
		    },

		    /**
		     * Get a short, three letter string reflecting the alignment and layout.
		     *
		     * @private
		     * @function Highcharts.Legend#getAlignment
		     *
		     * @return {string}
		     *         The alignment, empty string if floating
		     */
		    getAlignment: function () {
		        var options = this.options;

		        // Use the first letter of each alignment option in order to detect
		        // the side. (#4189 - use charAt(x) notation instead of [x] for IE7)
		        if (this.proximate) {
		            return options.align.charAt(0) + 'tv';
		        }
		        return options.floating ? '' : (
		            options.align.charAt(0) +
		            options.verticalAlign.charAt(0) +
		            options.layout.charAt(0)
		        );
		    },

		    /**
		     * Adjust the chart margins by reserving space for the legend on only one
		     * side of the chart. If the position is set to a corner, top or bottom is
		     * reserved for horizontal legends and left or right for vertical ones.
		     *
		     * @private
		     * @function Highcharts.Legend#adjustMargins
		     *
		     * @param {Array<number>} margin
		     *
		     * @param {number} spacing
		     */
		    adjustMargins: function (margin, spacing) {
		        var chart = this.chart,
		            options = this.options,
		            alignment = this.getAlignment();

		        if (alignment) {

		            ([
		                /(lth|ct|rth)/,
		                /(rtv|rm|rbv)/,
		                /(rbh|cb|lbh)/,
		                /(lbv|lm|ltv)/
		            ]).forEach(function (alignments, side) {
		                if (alignments.test(alignment) && !defined(margin[side])) {

		                    // Now we have detected on which side of the chart we should
		                    // reserve space for the legend
		                    chart[marginNames[side]] = Math.max(
		                        chart[marginNames[side]],
		                        (
		                            chart.legend[
		                                (side + 1) % 2 ? 'legendHeight' : 'legendWidth'
		                            ] +
		                            [1, -1, -1, 1][side] * options[
		                                (side % 2) ? 'x' : 'y'
		                            ] +
		                            pick(options.margin, 12) +
		                            spacing[side] +
		                            (
		                                side === 0 &&
		                                chart.options.title.margin !== undefined ?
		                                    chart.titleOffset +
		                                        chart.options.title.margin :
		                                    0
		                            ) // #7428, #7894
		                        )
		                    );
		                }
		            });
		        }
		    },

		    /**
		     * @private
		     * @function Highcharts.Legend#proximatePositions
		     */
		    proximatePositions: function () {
		        var chart = this.chart,
		            boxes = [],
		            alignLeft = this.options.align === 'left';

		        this.allItems.forEach(function (item) {
		            var lastPoint,
		                height,
		                useFirstPoint = alignLeft;

		            if (item.xAxis && item.points) {

		                if (item.xAxis.options.reversed) {
		                    useFirstPoint = !useFirstPoint;
		                }
		                lastPoint = H.find(
		                    useFirstPoint ?
		                        item.points :
		                        item.points.slice(0).reverse(),
		                    function (item) {
		                        return H.isNumber(item.plotY);
		                    }
		                );
		                height = item.legendGroup.getBBox().height;
		                boxes.push({
		                    target: item.visible ?
		                        (lastPoint ? lastPoint.plotY : item.xAxis.height) -
		                            0.3 * height :
		                        chart.plotHeight,
		                    size: height,
		                    item: item
		                });
		            }
		        }, this);
		        H.distribute(boxes, chart.plotHeight);
		        boxes.forEach(function (box) {
		            box.item._legendItemPos[1] =
		                chart.plotTop - chart.spacing[0] + box.pos;
		        });

		    },

		    /**
		     * Render the legend. This method can be called both before and after
		     * `chart.render`. If called after, it will only rearrange items instead
		     * of creating new ones. Called internally on initial render and after
		     * redraws.
		     *
		     * @private
		     * @function Highcharts.Legend#render
		     */
		    render: function () {
		        var legend = this,
		            chart = legend.chart,
		            renderer = chart.renderer,
		            legendGroup = legend.group,
		            allItems,
		            display,
		            legendWidth,
		            legendHeight,
		            box = legend.box,
		            options = legend.options,
		            padding = legend.padding,
		            alignTo;

		        legend.itemX = padding;
		        legend.itemY = legend.initialItemY;
		        legend.offsetWidth = 0;
		        legend.lastItemY = 0;

		        if (!legendGroup) {
		            /**
		             * SVG group of the legend.
		             *
		             * @readonly
		             * @name Highcharts.Legend#group
		             * @type {Highcharts.SVGElement}
		             */
		            legend.group = legendGroup = renderer.g('legend')
		                .attr({ zIndex: 7 })
		                .add();
		            legend.contentGroup = renderer.g()
		                .attr({ zIndex: 1 }) // above background
		                .add(legendGroup);
		            legend.scrollGroup = renderer.g()
		                .add(legend.contentGroup);
		        }

		        legend.renderTitle();

		        // add each series or point
		        allItems = legend.getAllItems();

		        // sort by legendIndex
		        stableSort(allItems, function (a, b) {
		            return ((a.options && a.options.legendIndex) || 0) -
		                ((b.options && b.options.legendIndex) || 0);
		        });

		        // reversed legend
		        if (options.reversed) {
		            allItems.reverse();
		        }

		        /**
		         * All items for the legend, which is an array of series for most series
		         * and an array of points for pie series and its derivatives.
		         *
		         * @readonly
		         * @name Highcharts.Legend#allItems
		         * @type {Array<Highcharts.Point|Highcharts.Series>}
		         */
		        legend.allItems = allItems;
		        legend.display = display = !!allItems.length;

		        // Render the items. First we run a loop to set the text and properties
		        // and read all the bounding boxes. The next loop computes the item
		        // positions based on the bounding boxes.
		        legend.lastLineHeight = 0;
		        legend.maxItemWidth = 0;
		        legend.totalItemWidth = 0;
		        legend.itemHeight = 0;
		        allItems.forEach(legend.renderItem, legend);
		        allItems.forEach(legend.layoutItem, legend);

		        // Get the box
		        legendWidth = (options.width || legend.offsetWidth) + padding;
		        legendHeight = legend.lastItemY + legend.lastLineHeight +
		            legend.titleHeight;
		        legendHeight = legend.handleOverflow(legendHeight);
		        legendHeight += padding;

		        // Draw the border and/or background
		        if (!box) {
		            /**
		             * SVG element of the legend box.
		             *
		             * @readonly
		             * @name Highcharts.Legend#box
		             * @type {Highcharts.SVGElement}
		             */
		            legend.box = box = renderer.rect()
		                .addClass('highcharts-legend-box')
		                .attr({
		                    r: options.borderRadius
		                })
		                .add(legendGroup);
		            box.isNew = true;
		        }

		        // Presentational
		        if (!chart.styledMode) {
		            box
		                .attr({
		                    stroke: options.borderColor,
		                    'stroke-width': options.borderWidth || 0,
		                    fill: options.backgroundColor || 'none'
		                })
		                .shadow(options.shadow);
		        }

		        if (legendWidth > 0 && legendHeight > 0) {
		            box[box.isNew ? 'attr' : 'animate'](
		                box.crisp.call({}, { // #7260
		                    x: 0,
		                    y: 0,
		                    width: legendWidth,
		                    height: legendHeight
		                }, box.strokeWidth())
		            );
		            box.isNew = false;
		        }

		        // hide the border if no items
		        box[display ? 'show' : 'hide']();

		        // Open for responsiveness
		        if (chart.styledMode && legendGroup.getStyle('display') === 'none') {
		            legendWidth = legendHeight = 0;
		        }

		        legend.legendWidth = legendWidth;
		        legend.legendHeight = legendHeight;

		        if (display) {
		            // If aligning to the top and the layout is horizontal, adjust for
		            // the title (#7428)
		            alignTo = chart.spacingBox;
		            if (/(lth|ct|rth)/.test(legend.getAlignment())) {
		                alignTo = merge(alignTo, {
		                    y: alignTo.y + chart.titleOffset +
		                        chart.options.title.margin
		                });
		            }

		            legendGroup.align(merge(options, {
		                width: legendWidth,
		                height: legendHeight,
		                verticalAlign: this.proximate ? 'top' : options.verticalAlign
		            }), true, alignTo);
		        }

		        if (!this.proximate) {
		            this.positionItems();
		        }
		    },

		    /**
		     * Set up the overflow handling by adding navigation with up and down arrows
		     * below the legend.
		     *
		     * @private
		     * @function Highcharts.Legend#handleOverflow
		     *
		     * @param {number} legendHeight
		     *
		     * @return {number}
		     */
		    handleOverflow: function (legendHeight) {
		        var legend = this,
		            chart = this.chart,
		            renderer = chart.renderer,
		            options = this.options,
		            optionsY = options.y,
		            alignTop = options.verticalAlign === 'top',
		            padding = this.padding,
		            spaceHeight = chart.spacingBox.height +
		                (alignTop ? -optionsY : optionsY) - padding,
		            maxHeight = options.maxHeight,
		            clipHeight,
		            clipRect = this.clipRect,
		            navOptions = options.navigation,
		            animation = pick(navOptions.animation, true),
		            arrowSize = navOptions.arrowSize || 12,
		            nav = this.nav,
		            pages = this.pages,
		            lastY,
		            allItems = this.allItems,
		            clipToHeight = function (height) {
		                if (typeof height === 'number') {
		                    clipRect.attr({
		                        height: height
		                    });
		                } else if (clipRect) { // Reset (#5912)
		                    legend.clipRect = clipRect.destroy();
		                    legend.contentGroup.clip();
		                }

		                // useHTML
		                if (legend.contentGroup.div) {
		                    legend.contentGroup.div.style.clip = height ?
		                        'rect(' + padding + 'px,9999px,' +
		                            (padding + height) + 'px,0)' :
		                        'auto';
		                }
		            };


		        // Adjust the height
		        if (
		            options.layout === 'horizontal' &&
		            options.verticalAlign !== 'middle' &&
		            !options.floating
		        ) {
		            spaceHeight /= 2;
		        }
		        if (maxHeight) {
		            spaceHeight = Math.min(spaceHeight, maxHeight);
		        }

		        // Reset the legend height and adjust the clipping rectangle
		        pages.length = 0;
		        if (legendHeight > spaceHeight && navOptions.enabled !== false) {

		            this.clipHeight = clipHeight =
		                Math.max(spaceHeight - 20 - this.titleHeight - padding, 0);
		            this.currentPage = pick(this.currentPage, 1);
		            this.fullHeight = legendHeight;

		            // Fill pages with Y positions so that the top of each a legend item
		            // defines the scroll top for each page (#2098)
		            allItems.forEach(function (item, i) {
		                var y = item._legendItemPos[1],
		                    h = Math.round(item.legendItem.getBBox().height),
		                    len = pages.length;

		                if (!len || (y - pages[len - 1] > clipHeight &&
		                        (lastY || y) !== pages[len - 1])) {
		                    pages.push(lastY || y);
		                    len++;
		                }

		                // Keep track of which page each item is on
		                item.pageIx = len - 1;
		                if (lastY) {
		                    allItems[i - 1].pageIx = len - 1;
		                }

		                if (
		                    i === allItems.length - 1 &&
		                    y + h - pages[len - 1] > clipHeight &&
		                    y !== lastY // #2617
		                ) {
		                    pages.push(y);
		                    item.pageIx = len;
		                }

		                if (y !== lastY) {
		                    lastY = y;
		                }
		            });

		            // Only apply clipping if needed. Clipping causes blurred legend in
		            // PDF export (#1787)
		            if (!clipRect) {
		                clipRect = legend.clipRect =
		                    renderer.clipRect(0, padding, 9999, 0);
		                legend.contentGroup.clip(clipRect);
		            }

		            clipToHeight(clipHeight);

		            // Add navigation elements
		            if (!nav) {
		                this.nav = nav = renderer.g()
		                    .attr({ zIndex: 1 })
		                    .add(this.group);

		                this.up = renderer
		                    .symbol(
		                        'triangle',
		                        0,
		                        0,
		                        arrowSize,
		                        arrowSize
		                    )
		                    .on('click', function () {
		                        legend.scroll(-1, animation);
		                    })
		                    .add(nav);

		                this.pager = renderer.text('', 15, 10)
		                    .addClass('highcharts-legend-navigation');

		                if (!chart.styledMode) {
		                    this.pager.css(navOptions.style);
		                }
		                this.pager.add(nav);

		                this.down = renderer
		                    .symbol(
		                        'triangle-down',
		                        0,
		                        0,
		                        arrowSize,
		                        arrowSize
		                    )
		                    .on('click', function () {
		                        legend.scroll(1, animation);
		                    })
		                    .add(nav);
		            }

		            // Set initial position
		            legend.scroll(0);

		            legendHeight = spaceHeight;

		        // Reset
		        } else if (nav) {
		            clipToHeight();
		            this.nav = nav.destroy(); // #6322
		            this.scrollGroup.attr({
		                translateY: 1
		            });
		            this.clipHeight = 0; // #1379
		        }

		        return legendHeight;
		    },

		    /**
		     * Scroll the legend by a number of pages.
		     *
		     * @private
		     * @function Highcharts.Legend#scroll
		     *
		     * @param {number} scrollBy
		     *        The number of pages to scroll.
		     *
		     * @param {Highcharts.AnimationOptionsObject} animation
		     *        Whether and how to apply animation.
		     */
		    scroll: function (scrollBy, animation) {
		        var pages = this.pages,
		            pageCount = pages.length,
		            currentPage = this.currentPage + scrollBy,
		            clipHeight = this.clipHeight,
		            navOptions = this.options.navigation,
		            pager = this.pager,
		            padding = this.padding;

		        // When resizing while looking at the last page
		        if (currentPage > pageCount) {
		            currentPage = pageCount;
		        }

		        if (currentPage > 0) {

		            if (animation !== undefined) {
		                setAnimation(animation, this.chart);
		            }

		            this.nav.attr({
		                translateX: padding,
		                translateY: clipHeight + this.padding + 7 + this.titleHeight,
		                visibility: 'visible'
		            });
		            this.up.attr({
		                'class': currentPage === 1 ?
		                    'highcharts-legend-nav-inactive' :
		                    'highcharts-legend-nav-active'
		            });
		            pager.attr({
		                text: currentPage + '/' + pageCount
		            });
		            this.down.attr({
		                'x': 18 + this.pager.getBBox().width, // adjust to text width
		                'class': currentPage === pageCount ?
		                    'highcharts-legend-nav-inactive' :
		                    'highcharts-legend-nav-active'
		            });

		            if (!this.chart.styledMode) {
		                this.up
		                    .attr({
		                        fill: currentPage === 1 ?
		                            navOptions.inactiveColor :
		                            navOptions.activeColor
		                    })
		                    .css({
		                        cursor: currentPage === 1 ? 'default' : 'pointer'
		                    });
		                this.down
		                    .attr({
		                        fill: currentPage === pageCount ?
		                            navOptions.inactiveColor :
		                            navOptions.activeColor
		                    })
		                    .css({
		                        cursor: currentPage === pageCount ?
		                            'default' :
		                            'pointer'
		                    });
		            }

		            this.scrollOffset = -pages[currentPage - 1] + this.initialItemY;

		            this.scrollGroup.animate({
		                translateY: this.scrollOffset
		            });

		            this.currentPage = currentPage;
		            this.positionCheckboxes();
		        }

		    }

		};

		/**
		 * Legend symbol mixin.
		 *
		 * @private
		 * @mixin Highcharts.LegendSymbolMixin
		 */
		H.LegendSymbolMixin = {

		    /**
		     * Get the series' symbol in the legend
		     *
		     * @private
		     * @function Highcharts.LegendSymbolMixin.drawRectangle
		     *
		     * @param {Highcharts.Legend} legend
		     *        The legend object
		     *
		     * @param {Highcharts.Point|Highcharts.Series} item
		     *        The series (this) or point
		     */
		    drawRectangle: function (legend, item) {
		        var options = legend.options,
		            symbolHeight = legend.symbolHeight,
		            square = options.squareSymbol,
		            symbolWidth = square ? symbolHeight : legend.symbolWidth;

		        item.legendSymbol = this.chart.renderer.rect(
		            square ? (legend.symbolWidth - symbolHeight) / 2 : 0,
		            legend.baseline - symbolHeight + 1, // #3988
		            symbolWidth,
		            symbolHeight,
		            pick(legend.options.symbolRadius, symbolHeight / 2)
		        )
		        .addClass('highcharts-point')
		        .attr({
		            zIndex: 3
		        }).add(item.legendGroup);

		    },

		    /**
		     * Get the series' symbol in the legend. This method should be overridable
		     * to create custom symbols through
		     * Highcharts.seriesTypes[type].prototype.drawLegendSymbols.
		     *
		     * @private
		     * @function Highcharts.LegendSymbolMixin.drawLineMarker
		     *
		     * @param {Highcharts.Legend} legend
		     *        The legend object.
		     */
		    drawLineMarker: function (legend) {

		        var options = this.options,
		            markerOptions = options.marker,
		            radius,
		            legendSymbol,
		            symbolWidth = legend.symbolWidth,
		            symbolHeight = legend.symbolHeight,
		            generalRadius = symbolHeight / 2,
		            renderer = this.chart.renderer,
		            legendItemGroup = this.legendGroup,
		            verticalCenter = legend.baseline -
		                Math.round(legend.fontMetrics.b * 0.3),
		            attr = {};

		        // Draw the line
		        if (!this.chart.styledMode) {
		            attr = {
		                'stroke-width': options.lineWidth || 0
		            };
		            if (options.dashStyle) {
		                attr.dashstyle = options.dashStyle;
		            }
		        }

		        this.legendLine = renderer.path([
		            'M',
		            0,
		            verticalCenter,
		            'L',
		            symbolWidth,
		            verticalCenter
		        ])
		        .addClass('highcharts-graph')
		        .attr(attr)
		        .add(legendItemGroup);

		        // Draw the marker
		        if (markerOptions && markerOptions.enabled !== false && symbolWidth) {

		            // Do not allow the marker to be larger than the symbolHeight
		            radius = Math.min(
		                pick(markerOptions.radius, generalRadius),
		                generalRadius
		            );

		            // Restrict symbol markers size
		            if (this.symbol.indexOf('url') === 0) {
		                markerOptions = merge(markerOptions, {
		                    width: symbolHeight,
		                    height: symbolHeight
		                });
		                radius = 0;
		            }

		            this.legendSymbol = legendSymbol = renderer.symbol(
		                this.symbol,
		                (symbolWidth / 2) - radius,
		                verticalCenter - radius,
		                2 * radius,
		                2 * radius,
		                markerOptions
		            )
		            .addClass('highcharts-point')
		            .add(legendItemGroup);
		            legendSymbol.isMarker = true;
		        }
		    }
		};

		// Workaround for #2030, horizontal legend items not displaying in IE11 Preview,
		// and for #2580, a similar drawing flaw in Firefox 26.
		// Explore if there's a general cause for this. The problem may be related
		// to nested group elements, as the legend item texts are within 4 group
		// elements.
		if (/Trident\/7\.0/.test(win.navigator.userAgent) || isFirefox) {
		    wrap(Highcharts.Legend.prototype, 'positionItem', function (proceed, item) {
		        var legend = this,
		            // If chart destroyed in sync, this is undefined (#2030)
		            runPositionItem = function () {
		                if (item._legendItemPos) {
		                    proceed.call(legend, item);
		                }
		            };

		        // Do it now, for export and to get checkbox placement
		        runPositionItem();

		        // Do it after to work around the core issue
		        if (!legend.bubbleLegend) {
		            setTimeout(runPositionItem);
		        }
		    });
		}

	}(Highcharts));
	(function (H) {
		/**
		 * (c) 2010-2018 Torstein Honsi
		 *
		 * License: www.highcharts.com/license
		 */



		var doc = H.doc,
		    extend = H.extend,
		    format = H.format,
		    isNumber = H.isNumber,
		    merge = H.merge,
		    pick = H.pick,
		    splat = H.splat,
		    syncTimeout = H.syncTimeout,
		    timeUnits = H.timeUnits;

		/**
		 * Tooltip of a chart.
		 *
		 * @class
		 * @name Highcharts.Tooltip
		 *
		 * @param {Highcharts.Chart} chart
		 *        The chart instance.
		 *
		 * @param {Highcharts.TooltipOptions} options
		 *        Tooltip options.
		 */
		H.Tooltip = function () {
		    this.init.apply(this, arguments);
		};

		H.Tooltip.prototype = {

		    /**
		     * @private
		     * @function Highcharts.Tooltip#init
		     *
		     * @param {Highcharts.Chart} chart
		     *        The chart instance.
		     *
		     * @param {Highcharts.TooltipOptions} options
		     *        Tooltip options.
		     */
		    init: function (chart, options) {

		        /**
		         * Chart of the tooltip.
		         *
		         * @readonly
		         * @name Highcharts.Tooltip#chart
		         * @type {Highcharts.Chart}
		         */
		        this.chart = chart;

		        /**
		         * Used tooltip options.
		         *
		         * @readonly
		         * @name Highcharts.Tooltip#options
		         * @type {Highcharts.TooltipOptions}
		         */
		        this.options = options;

		        /**
		         * List of crosshairs.
		         *
		         * @private
		         * @readonly
		         * @name Highcharts.Tooltip#crosshairs
		         * @type {Array<*>}
		         */
		        this.crosshairs = [];

		        /**
		         * Current values of x and y when animating.
		         *
		         * @private
		         * @readonly
		         * @name Highcharts.Tooltip#now
		         * @type {*}
		         */
		        this.now = { x: 0, y: 0 };

		        /**
		         * Tooltips are initially hidden.
		         *
		         * @readonly
		         * @name Highcharts.Tooltip#isHidden
		         * @type {boolean}
		         */
		        this.isHidden = true;

		        /**
		         * True, if the tooltip is splitted into one label per series, with the
		         * header close to the axis.
		         *
		         * @readonly
		         * @name Highcharts.Tooltip#split
		         * @type {boolean}
		         */
		        this.split = options.split && !chart.inverted;

		        /**
		         * When the tooltip is shared, the entire plot area will capture mouse
		         * movement or touch events.
		         *
		         * @readonly
		         * @name Highcharts.Tooltip#shared
		         * @type {boolean}
		         */
		        this.shared = options.shared || this.split;

		        /**
		         * Whether to allow the tooltip to render outside the chart's SVG
		         * element box. By default (false), the tooltip is rendered within the
		         * chart's SVG element, which results in the tooltip being aligned
		         * inside the chart area.
		         *
		         * @readonly
		         * @name Highcharts.Tooltip#outside
		         * @type {boolean}
		         *
		         * @todo
		         * Split tooltip does not support outside in the first iteration. Should
		         * not be too complicated to implement.
		         */
		        this.outside = options.outside && !this.split;

		    },

		    /**
		     * Destroy the single tooltips in a split tooltip.
		     * If the tooltip is active then it is not destroyed, unless forced to.
		     *
		     * @private
		     * @function Highcharts.Tooltip#cleanSplit
		     *
		     * @param {boolean} force
		     *        Force destroy all tooltips.
		     */
		    cleanSplit: function (force) {
		        this.chart.series.forEach(function (series) {
		            var tt = series && series.tt;
		            if (tt) {
		                if (!tt.isActive || force) {
		                    series.tt = tt.destroy();
		                } else {
		                    tt.isActive = false;
		                }
		            }
		        });
		    },

		    /**
		     * In styled mode, apply the default filter for the tooltip drop-shadow. It
		     * needs to have an id specific to the chart, otherwise there will be issues
		     * when one tooltip adopts the filter of a different chart, specifically one
		     * where the container is hidden.
		     *
		     * @private
		     * @function Highcharts.Tooltip#applyFilter
		     */
		    applyFilter: function () {

		        var chart = this.chart;
		        chart.renderer.definition({
		            tagName: 'filter',
		            id: 'drop-shadow-' + chart.index,
		            opacity: 0.5,
		            children: [{
		                tagName: 'feGaussianBlur',
		                'in': 'SourceAlpha',
		                stdDeviation: 1
		            }, {
		                tagName: 'feOffset',
		                dx: 1,
		                dy: 1
		            }, {
		                tagName: 'feComponentTransfer',
		                children: [{
		                    tagName: 'feFuncA',
		                    type: 'linear',
		                    slope: 0.3
		                }]
		            }, {
		                tagName: 'feMerge',
		                children: [{
		                    tagName: 'feMergeNode'
		                }, {
		                    tagName: 'feMergeNode',
		                    'in': 'SourceGraphic'
		                }]
		            }]
		        });
		        chart.renderer.definition({
		            tagName: 'style',
		            textContent: '.highcharts-tooltip-' + chart.index + '{' +
		                'filter:url(#drop-shadow-' + chart.index + ')' +
		            '}'
		        });
		    },


		    /**
		     * Creates the Tooltip label element if it does not exist, then returns it.
		     *
		     * @function Highcharts.Tooltip#getLabel
		     *
		     * @return {Highcharts.SVGElement}
		     */
		    getLabel: function () {

		        var renderer = this.chart.renderer,
		            styledMode = this.chart.styledMode,
		            options = this.options,
		            container;

		        if (!this.label) {

		            if (this.outside) {
		                this.container = container = H.doc.createElement('div');
		                container.className = 'highcharts-tooltip-container';
		                H.css(container, {
		                    position: 'absolute',
		                    top: '1px',
		                    pointerEvents: options.style && options.style.pointerEvents
		                });
		                H.doc.body.appendChild(container);

		                this.renderer = renderer = new H.Renderer(container, 0, 0);
		            }


		            // Create the label
		            if (this.split) {
		                this.label = renderer.g('tooltip');
		            } else {
		                this.label = renderer.label(
		                        '',
		                        0,
		                        0,
		                        options.shape || 'callout',
		                        null,
		                        null,
		                        options.useHTML,
		                        null,
		                        'tooltip'
		                    )
		                    .attr({
		                        padding: options.padding,
		                        r: options.borderRadius
		                    });

		                if (!styledMode) {
		                    this.label
		                        .attr({
		                            'fill': options.backgroundColor,
		                            'stroke-width': options.borderWidth
		                        })
		                        // #2301, #2657
		                        .css(options.style)
		                        .shadow(options.shadow);
		                }
		            }

		            if (styledMode) {
		                // Apply the drop-shadow filter
		                this.applyFilter();
		                this.label.addClass('highcharts-tooltip-' + this.chart.index);
		            }

		            if (this.outside) {
		                this.label.attr({
		                    x: this.distance,
		                    y: this.distance
		                });
		                this.label.xSetter = function (value) {
		                    container.style.left = value + 'px';
		                };
		                this.label.ySetter = function (value) {
		                    container.style.top = value + 'px';
		                };
		            }

		            this.label
		                .attr({
		                    zIndex: 8
		                })
		                .add();
		        }
		        return this.label;
		    },

		    /**
		     * Updates the tooltip with the provided tooltip options.
		     *
		     * @function Highcharts.Tooltip#update
		     *
		     * @param {Highcharts.TooltipOptions} options
		     *        The tooltip options to update.
		     */
		    update: function (options) {
		        this.destroy();
		        // Update user options (#6218)
		        merge(true, this.chart.options.tooltip.userOptions, options);
		        this.init(this.chart, merge(true, this.options, options));
		    },

		    /**
		     * Removes and destroys the tooltip and its elements.
		     *
		     * @function Highcharts.Tooltip#destroy
		     */
		    destroy: function () {
		        // Destroy and clear local variables
		        if (this.label) {
		            this.label = this.label.destroy();
		        }
		        if (this.split && this.tt) {
		            this.cleanSplit(this.chart, true);
		            this.tt = this.tt.destroy();
		        }
		        if (this.renderer) {
		            this.renderer = this.renderer.destroy();
		            H.discardElement(this.container);
		        }
		        H.clearTimeout(this.hideTimer);
		        H.clearTimeout(this.tooltipTimeout);
		    },

		    /**
		     * Moves the tooltip with a soft animation to a new position.
		     *
		     * @function Highcharts.Tooltip#move
		     *
		     * @param {number} x
		     *
		     * @param {number} y
		     *
		     * @param {number} anchorX
		     *
		     * @param {number} anchorY
		     */
		    move: function (x, y, anchorX, anchorY) {
		        var tooltip = this,
		            now = tooltip.now,
		            animate = tooltip.options.animation !== false &&
		                !tooltip.isHidden &&
		                // When we get close to the target position, abort animation and
		                // land on the right place (#3056)
		                (Math.abs(x - now.x) > 1 || Math.abs(y - now.y) > 1),
		            skipAnchor = tooltip.followPointer || tooltip.len > 1;

		        // Get intermediate values for animation
		        extend(now, {
		            x: animate ? (2 * now.x + x) / 3 : x,
		            y: animate ? (now.y + y) / 2 : y,
		            anchorX: skipAnchor ?
		                undefined :
		                animate ? (2 * now.anchorX + anchorX) / 3 : anchorX,
		            anchorY: skipAnchor ?
		                undefined :
		                animate ? (now.anchorY + anchorY) / 2 : anchorY
		        });

		        // Move to the intermediate value
		        tooltip.getLabel().attr(now);


		        // Run on next tick of the mouse tracker
		        if (animate) {

		            // Never allow two timeouts
		            H.clearTimeout(this.tooltipTimeout);

		            // Set the fixed interval ticking for the smooth tooltip
		            this.tooltipTimeout = setTimeout(function () {
		                // The interval function may still be running during destroy,
		                // so check that the chart is really there before calling.
		                if (tooltip) {
		                    tooltip.move(x, y, anchorX, anchorY);
		                }
		            }, 32);

		        }
		    },

		    /**
		     * Hides the tooltip with a fade out animation.
		     *
		     * @function Highcharts.Tooltip#hide
		     *
		     * @param {number} [delay]
		     *        The fade out in milliseconds. If no value is provided the value
		     *        of the tooltip.hideDelay option is used. A value of 0 disables
		     *        the fade out animation.
		     */
		    hide: function (delay) {
		        var tooltip = this;
		        // disallow duplicate timers (#1728, #1766)
		        H.clearTimeout(this.hideTimer);
		        delay = pick(delay, this.options.hideDelay, 500);
		        if (!this.isHidden) {
		            this.hideTimer = syncTimeout(function () {
		                tooltip.getLabel()[delay ? 'fadeOut' : 'hide']();
		                tooltip.isHidden = true;
		            }, delay);
		        }
		    },

		    /**
		     * Extendable method to get the anchor position of the tooltip
		     * from a point or set of points
		     *
		     * @private
		     * @function Highcharts.Tooltip#getAnchor
		     *
		     * @param {Array<Highchart.Points>} points
		     *
		     * @param {global.Event} [mouseEvent]
		     */
		    getAnchor: function (points, mouseEvent) {
		        var ret,
		            chart = this.chart,
		            pointer = chart.pointer,
		            inverted = chart.inverted,
		            plotTop = chart.plotTop,
		            plotLeft = chart.plotLeft,
		            plotX = 0,
		            plotY = 0,
		            yAxis,
		            xAxis;

		        points = splat(points);

		        // When tooltip follows mouse, relate the position to the mouse
		        if (this.followPointer && mouseEvent) {
		            if (mouseEvent.chartX === undefined) {
		                mouseEvent = pointer.normalize(mouseEvent);
		            }
		            ret = [
		                mouseEvent.chartX - chart.plotLeft,
		                mouseEvent.chartY - plotTop
		            ];
		        // Pie uses a special tooltipPos
		        } else if (points[0].tooltipPos) {
		            ret = points[0].tooltipPos;
		        // When shared, use the average position
		        } else {
		            points.forEach(function (point) {
		                yAxis = point.series.yAxis;
		                xAxis = point.series.xAxis;
		                plotX += point.plotX +
		                    (!inverted && xAxis ? xAxis.left - plotLeft : 0);
		                plotY +=
		                    (
		                        point.plotLow ?
		                            (point.plotLow + point.plotHigh) / 2 :
		                            point.plotY
		                    ) +
		                    (!inverted && yAxis ? yAxis.top - plotTop : 0); // #1151
		            });

		            plotX /= points.length;
		            plotY /= points.length;

		            ret = [
		                inverted ? chart.plotWidth - plotY : plotX,
		                this.shared && !inverted && points.length > 1 && mouseEvent ?
		                    // place shared tooltip next to the mouse (#424)
		                    mouseEvent.chartY - plotTop :
		                    inverted ? chart.plotHeight - plotX : plotY
		            ];
		        }

		        return ret.map(Math.round);
		    },

		    /**
		     * Place the tooltip in a chart without spilling over
		     * and not covering the point it self.
		     *
		     * @private
		     * @function Highcharts.Tooltip#getPosition
		     *
		     * @param {number} boxWidth
		     *
		     * @param {number} boxHeight
		     *
		     * @param {Highcharts.Point} point
		     *
		     * @return {*}
		     */
		    getPosition: function (boxWidth, boxHeight, point) {

		        var chart = this.chart,
		            distance = this.distance,
		            ret = {},
		            // Don't use h if chart isn't inverted (#7242)
		            h = (chart.inverted && point.h) || 0, // #4117
		            swapped,
		            outside = this.outside,
		            outerWidth = outside ?
		                // substract distance to prevent scrollbars
		                doc.documentElement.clientWidth - 2 * distance :
		                chart.chartWidth,
		            outerHeight = outside ?
		                Math.max(
		                    doc.body.scrollHeight,
		                    doc.documentElement.scrollHeight,
		                    doc.body.offsetHeight,
		                    doc.documentElement.offsetHeight,
		                    doc.documentElement.clientHeight
		                ) :
		                chart.chartHeight,
		            chartPosition = chart.pointer.chartPosition,
		            first = [
		                'y',
		                outerHeight,
		                boxHeight,
		                (outside ? chartPosition.top - distance : 0) +
		                    point.plotY + chart.plotTop,
		                outside ? 0 : chart.plotTop,
		                outside ? outerHeight : chart.plotTop + chart.plotHeight
		            ],
		            second = [
		                'x',
		                outerWidth,
		                boxWidth,
		                (outside ? chartPosition.left - distance : 0) +
		                    point.plotX + chart.plotLeft,
		                outside ? 0 : chart.plotLeft,
		                outside ? outerWidth : chart.plotLeft + chart.plotWidth
		            ],
		            // The far side is right or bottom
		            preferFarSide = !this.followPointer && pick(
		                point.ttBelow,
		                !chart.inverted === !!point.negative
		            ), // #4984

		            /*
		             * Handle the preferred dimension. When the preferred dimension is
		             * tooltip on top or bottom of the point, it will look for space
		             * there.
		             *
		             * @private
		             */
		            firstDimension = function (
		                dim,
		                outerSize,
		                innerSize,
		                point,
		                min,
		                max
		            ) {
		                var roomLeft = innerSize < point - distance,
		                    roomRight = point + distance + innerSize < outerSize,
		                    alignedLeft = point - distance - innerSize,
		                    alignedRight = point + distance;

		                if (preferFarSide && roomRight) {
		                    ret[dim] = alignedRight;
		                } else if (!preferFarSide && roomLeft) {
		                    ret[dim] = alignedLeft;
		                } else if (roomLeft) {
		                    ret[dim] = Math.min(
		                        max - innerSize,
		                        alignedLeft - h < 0 ? alignedLeft : alignedLeft - h
		                    );
		                } else if (roomRight) {
		                    ret[dim] = Math.max(
		                        min,
		                        alignedRight + h + innerSize > outerSize ?
		                            alignedRight :
		                            alignedRight + h
		                    );
		                } else {
		                    return false;
		                }
		            },

		            /*
		             * Handle the secondary dimension. If the preferred dimension is
		             * tooltip on top or bottom of the point, the second dimension is to
		             * align the tooltip above the point, trying to align center but
		             * allowing left or right align within the chart box.
		             *
		             * @private
		             */
		            secondDimension = function (dim, outerSize, innerSize, point) {
		                var retVal;

		                // Too close to the edge, return false and swap dimensions
		                if (point < distance || point > outerSize - distance) {
		                    retVal = false;
		                // Align left/top
		                } else if (point < innerSize / 2) {
		                    ret[dim] = 1;
		                // Align right/bottom
		                } else if (point > outerSize - innerSize / 2) {
		                    ret[dim] = outerSize - innerSize - 2;
		                // Align center
		                } else {
		                    ret[dim] = point - innerSize / 2;
		                }
		                return retVal;
		            },

		            /*
		             * Swap the dimensions
		             */
		            swap = function (count) {
		                var temp = first;
		                first = second;
		                second = temp;
		                swapped = count;
		            },
		            run = function () {
		                if (firstDimension.apply(0, first) !== false) {
		                    if (
		                        secondDimension.apply(0, second) === false &&
		                        !swapped
		                    ) {
		                        swap(true);
		                        run();
		                    }
		                } else if (!swapped) {
		                    swap(true);
		                    run();
		                } else {
		                    ret.x = ret.y = 0;
		                }
		            };

		        // Under these conditions, prefer the tooltip on the side of the point
		        if (chart.inverted || this.len > 1) {
		            swap();
		        }
		        run();

		        return ret;

		    },

		    /**
		     * In case no user defined formatter is given, this will be used. Note that
		     * the context here is an object holding point, series, x, y etc.
		     *
		     * @private
		     * @function Highcharts.Tooltip#defaultFormatter
		     *
		     * @param {Highcharts.Tooltip} tooltip
		     *
		     * @return {Array<string>}
		     */
		    defaultFormatter: function (tooltip) {
		        var items = this.points || splat(this),
		            s;

		        // Build the header
		        s = [tooltip.tooltipFooterHeaderFormatter(items[0])];

		        // build the values
		        s = s.concat(tooltip.bodyFormatter(items));

		        // footer
		        s.push(tooltip.tooltipFooterHeaderFormatter(items[0], true));

		        return s;
		    },

		    /**
		     * Refresh the tooltip's text and position.
		     *
		     * @function Highcharts.Tooltip#refresh
		     *
		     * @param {Highcharts.Point|Array<Highcharts.Point>} pointOrPoints
		     *        Either a point or an array of points.
		     *
		     * @param {global.Event} [mouseEvent]
		     *        Mouse event, that is responsible for the refresh and should be
		     *        used for the tooltip update.
		     */
		    refresh: function (pointOrPoints, mouseEvent) {
		        var tooltip = this,
		            label,
		            options = tooltip.options,
		            x,
		            y,
		            point = pointOrPoints,
		            anchor,
		            textConfig = {},
		            text,
		            pointConfig = [],
		            formatter = options.formatter || tooltip.defaultFormatter,
		            shared = tooltip.shared,
		            currentSeries,
		            styledMode = this.chart.styledMode;

		        if (!options.enabled) {
		            return;
		        }

		        H.clearTimeout(this.hideTimer);

		        // get the reference point coordinates (pie charts use tooltipPos)
		        tooltip.followPointer = splat(point)[0].series.tooltipOptions
		            .followPointer;
		        anchor = tooltip.getAnchor(point, mouseEvent);
		        x = anchor[0];
		        y = anchor[1];

		        // shared tooltip, array is sent over
		        if (shared && !(point.series && point.series.noSharedTooltip)) {
		            point.forEach(function (item) {
		                item.setState('hover');

		                pointConfig.push(item.getLabelConfig());
		            });

		            textConfig = {
		                x: point[0].category,
		                y: point[0].y
		            };
		            textConfig.points = pointConfig;
		            point = point[0];

		        // single point tooltip
		        } else {
		            textConfig = point.getLabelConfig();
		        }
		        this.len = pointConfig.length; // #6128
		        text = formatter.call(textConfig, tooltip);

		        // register the current series
		        currentSeries = point.series;
		        this.distance = pick(currentSeries.tooltipOptions.distance, 16);

		        // update the inner HTML
		        if (text === false) {
		            this.hide();
		        } else {

		            label = tooltip.getLabel();

		            // show it
		            if (tooltip.isHidden) {
		                label.attr({
		                    opacity: 1
		                }).show();
		            }

		            // update text
		            if (tooltip.split) {
		                this.renderSplit(text, splat(pointOrPoints));
		            } else {

		                // Prevent the tooltip from flowing over the chart box (#6659)
		                if (!options.style.width || styledMode) {
		                    label.css({
		                        width: this.chart.spacingBox.width
		                    });
		                }

		                label.attr({
		                    text: text && text.join ? text.join('') : text
		                });

		                // Set the stroke color of the box to reflect the point
		                label.removeClass(/highcharts-color-[\d]+/g)
		                    .addClass(
		                        'highcharts-color-' +
		                        pick(point.colorIndex, currentSeries.colorIndex)
		                    );

		                if (!styledMode) {
		                    label.attr({
		                        stroke: (
		                            options.borderColor ||
		                            point.color ||
		                            currentSeries.color ||
		                            '#666666'
		                        )
		                    });
		                }

		                tooltip.updatePosition({
		                    plotX: x,
		                    plotY: y,
		                    negative: point.negative,
		                    ttBelow: point.ttBelow,
		                    h: anchor[2] || 0
		                });
		            }

		            this.isHidden = false;
		        }
		    },

		    /**
		     * Render the split tooltip. Loops over each point's text and adds
		     * a label next to the point, then uses the distribute function to
		     * find best non-overlapping positions.
		     *
		     * @private
		     * @function Highcharts.Tooltip#renderSplit
		     *
		     * @param {Array<Highcharts.Label>} labels
		     *
		     * @param {Array<Highcharts.Point>} points
		     */
		    renderSplit: function (labels, points) {
		        var tooltip = this,
		            boxes = [],
		            chart = this.chart,
		            ren = chart.renderer,
		            rightAligned = true,
		            options = this.options,
		            headerHeight = 0,
		            headerTop,
		            tooltipLabel = this.getLabel(),
		            distributionBoxTop = chart.plotTop;

		        // Graceful degradation for legacy formatters
		        if (H.isString(labels)) {
		            labels = [false, labels];
		        }
		        // Create the individual labels for header and points, ignore footer
		        labels.slice(0, points.length + 1).forEach(function (str, i) {
		            if (str !== false && str !== '') {
		                var point = points[i - 1] ||
		                    {
		                        // Item 0 is the header. Instead of this, we could also
		                        // use the crosshair label
		                        isHeader: true,
		                        plotX: points[0].plotX,
		                        plotY: chart.plotHeight
		                    },
		                    owner = point.series || tooltip,
		                    tt = owner.tt,
		                    series = point.series || {},
		                    colorClass = 'highcharts-color-' + pick(
		                        point.colorIndex,
		                        series.colorIndex,
		                        'none'
		                    ),
		                    target,
		                    x,
		                    bBox,
		                    boxWidth,
		                    attribs;

		                // Store the tooltip referance on the series
		                if (!tt) {

		                    attribs = {
		                        padding: options.padding,
		                        r: options.borderRadius
		                    };

		                    if (!chart.styledMode) {
		                        attribs.fill = options.backgroundColor;
		                        attribs.stroke = (
		                            options.borderColor ||
		                            point.color ||
		                            series.color ||
		                            '#333333'
		                        );
		                        attribs['stroke-width'] = options.borderWidth;
		                    }

		                    owner.tt = tt = ren.label(
		                            null,
		                            null,
		                            null,
		                            (
		                                point.isHeader ? options.headerShape :
		                                    options.shape
		                            ) || 'callout',
		                            null,
		                            null,
		                            options.useHTML
		                        )
		                        .addClass('highcharts-tooltip-box ' + colorClass)
		                        .attr(attribs)
		                        .add(tooltipLabel);
		                }

		                tt.isActive = true;
		                tt.attr({
		                    text: str
		                });
		                if (!chart.styledMode) {
		                    tt.css(options.style)
		                        .shadow(options.shadow);
		                }

		                // Get X position now, so we can move all to the other side in
		                // case of overflow
		                bBox = tt.getBBox();
		                boxWidth = bBox.width + tt.strokeWidth();
		                if (point.isHeader) {
		                    headerHeight = bBox.height;
		                    if (chart.xAxis[0].opposite) {
		                        headerTop = true;
		                        distributionBoxTop -= headerHeight;
		                    }
		                    x = Math.max(
		                        0, // No left overflow
		                        Math.min(
		                            point.plotX + chart.plotLeft - boxWidth / 2,
		                            // No right overflow (#5794)
		                            chart.chartWidth +
		                            (
		                                // Scrollable plot area
		                                chart.scrollablePixels ?
		                                    chart.scrollablePixels - chart.marginRight :
		                                    0
		                            ) -
		                            boxWidth
		                        )
		                    );
		                } else {
		                    x = point.plotX + chart.plotLeft -
		                        pick(options.distance, 16) - boxWidth;
		                }


		                // If overflow left, we don't use this x in the next loop
		                if (x < 0) {
		                    rightAligned = false;
		                }

		                // Prepare for distribution
		                target = (point.series && point.series.yAxis &&
		                    point.series.yAxis.pos) + (point.plotY || 0);
		                target -= distributionBoxTop;

		                if (point.isHeader) {
		                    target = headerTop ?
		                        -headerHeight :
		                        chart.plotHeight + headerHeight;
		                }
		                boxes.push({
		                    target: target,
		                    rank: point.isHeader ? 1 : 0,
		                    size: owner.tt.getBBox().height + 1,
		                    point: point,
		                    x: x,
		                    tt: tt
		                });
		            }
		        });

		        // Clean previous run (for missing points)
		        this.cleanSplit();

		        if (options.positioner) {
		            boxes.forEach(function (box) {
		                var boxPosition = options.positioner.call(
		                    tooltip,
		                    box.tt.getBBox().width,
		                    box.size,
		                    box.point
		                );
		                box.x = boxPosition.x;
		                box.align = 0; // 0-align to the top, 1-align to the bottom
		                box.target = boxPosition.y;
		                box.rank = pick(boxPosition.rank, box.rank);
		            });
		        }

		        // Distribute and put in place
		        H.distribute(boxes, chart.plotHeight + headerHeight);
		        boxes.forEach(function (box) {
		            var point = box.point,
		                series = point.series;

		            // Put the label in place
		            box.tt.attr({
		                visibility: box.pos === undefined ? 'hidden' : 'inherit',
		                x: (rightAligned || point.isHeader || options.positioner ?
		                    box.x :
		                    point.plotX + chart.plotLeft + pick(options.distance, 16)),
		                y: box.pos + distributionBoxTop,
		                anchorX: point.isHeader ?
		                    point.plotX + chart.plotLeft :
		                    point.plotX + series.xAxis.pos,
		                anchorY: point.isHeader ?
		                    chart.plotTop + chart.plotHeight / 2 :
		                    point.plotY + series.yAxis.pos
		            });
		        });
		    },

		    /**
		     * Find the new position and perform the move
		     *
		     * @private
		     * @function Highcharts.Tooltip#updatePosition
		     *
		     * @param {Highcharts.Point} point
		     */
		    updatePosition: function (point) {
		        var chart = this.chart,
		            label = this.getLabel(),
		            pos = (this.options.positioner || this.getPosition).call(
		                this,
		                label.width,
		                label.height,
		                point
		            ),
		            anchorX = point.plotX + chart.plotLeft,
		            anchorY = point.plotY + chart.plotTop,
		            pad;

		        // Set the renderer size dynamically to prevent document size to change
		        if (this.outside) {
		            pad = (this.options.borderWidth || 0) + 2 * this.distance;
		            this.renderer.setSize(
		                label.width + pad,
		                label.height + pad,
		                false
		            );
		            anchorX += chart.pointer.chartPosition.left - pos.x;
		            anchorY += chart.pointer.chartPosition.top - pos.y;
		        }

		        // do the move
		        this.move(
		            Math.round(pos.x),
		            Math.round(pos.y || 0), // can be undefined (#3977)
		            anchorX,
		            anchorY
		        );
		    },

		    /**
		     * Get the optimal date format for a point, based on a range.
		     *
		     * @private
		     * @function Highcharts.Tooltip#getDateFormat
		     *
		     * @param {number} range
		     *        The time range
		     *
		     * @param {number|Date} date
		     *        The date of the point in question
		     *
		     * @param {number} startOfWeek
		     *        An integer representing the first day of the week, where 0 is
		     *        Sunday.
		     *
		     * @param {Highcharts.Dictionary<string>} dateTimeLabelFormats
		     *        A map of time units to formats.
		     *
		     * @return {string}
		     *         The optimal date format for a point.
		     */
		    getDateFormat: function (range, date, startOfWeek, dateTimeLabelFormats) {
		        var time = this.chart.time,
		            dateStr = time.dateFormat('%m-%d %H:%M:%S.%L', date),
		            format,
		            n,
		            blank = '01-01 00:00:00.000',
		            strpos = {
		                millisecond: 15,
		                second: 12,
		                minute: 9,
		                hour: 6,
		                day: 3
		            },
		            lastN = 'millisecond'; // for sub-millisecond data, #4223
		        for (n in timeUnits) {

		            // If the range is exactly one week and we're looking at a
		            // Sunday/Monday, go for the week format
		            if (
		                range === timeUnits.week &&
		                +time.dateFormat('%w', date) === startOfWeek &&
		                dateStr.substr(6) === blank.substr(6)
		            ) {
		                n = 'week';
		                break;
		            }

		            // The first format that is too great for the range
		            if (timeUnits[n] > range) {
		                n = lastN;
		                break;
		            }

		            // If the point is placed every day at 23:59, we need to show
		            // the minutes as well. #2637.
		            if (
		                strpos[n] &&
		                dateStr.substr(strpos[n]) !== blank.substr(strpos[n])
		            ) {
		                break;
		            }

		            // Weeks are outside the hierarchy, only apply them on
		            // Mondays/Sundays like in the first condition
		            if (n !== 'week') {
		                lastN = n;
		            }
		        }

		        if (n) {
		            format = time.resolveDTLFormat(dateTimeLabelFormats[n]).main;
		        }

		        return format;
		    },

		    /**
		     * Get the best X date format based on the closest point range on the axis.
		     *
		     * @private
		     * @function Highcharts.Tooltip#getXDateFormat
		     *
		     * @param {Highcharts.Point} point
		     *
		     * @param {Highcharts.TooltipOptions} options
		     *
		     * @param {Highcharts.Axis} xAxis
		     *
		     * @return {string}
		     */
		    getXDateFormat: function (point, options, xAxis) {
		        var xDateFormat,
		            dateTimeLabelFormats = options.dateTimeLabelFormats,
		            closestPointRange = xAxis && xAxis.closestPointRange;

		        if (closestPointRange) {
		            xDateFormat = this.getDateFormat(
		                closestPointRange,
		                point.x,
		                xAxis.options.startOfWeek,
		                dateTimeLabelFormats
		            );
		        } else {
		            xDateFormat = dateTimeLabelFormats.day;
		        }

		        return xDateFormat || dateTimeLabelFormats.year; // #2546, 2581
		    },

		    /**
		     * Format the footer/header of the tooltip
		     * #3397: abstraction to enable formatting of footer and header
		     *
		     * @private
		     * @function Highcharts.Tooltip#tooltipFooterHeaderFormatter
		     *
		     * @param {*} labelConfig
		     *
		     * @param {boolean} isFooter
		     *
		     * @return {string}
		     */
		    tooltipFooterHeaderFormatter: function (labelConfig, isFooter) {
		        var footOrHead = isFooter ? 'footer' : 'header',
		            series = labelConfig.series,
		            tooltipOptions = series.tooltipOptions,
		            xDateFormat = tooltipOptions.xDateFormat,
		            xAxis = series.xAxis,
		            isDateTime = (
		                xAxis &&
		                xAxis.options.type === 'datetime' &&
		                isNumber(labelConfig.key)
		            ),
		            formatString = tooltipOptions[footOrHead + 'Format'];

		        // Guess the best date format based on the closest point distance (#568,
		        // #3418)
		        if (isDateTime && !xDateFormat) {
		            xDateFormat = this.getXDateFormat(
		                labelConfig,
		                tooltipOptions,
		                xAxis
		            );
		        }

		        // Insert the footer date format if any
		        if (isDateTime && xDateFormat) {
		            ((labelConfig.point && labelConfig.point.tooltipDateKeys) ||
		                    ['key']).forEach(
		                function (key) {
		                    formatString = formatString.replace(
		                        '{point.' + key + '}',
		                        '{point.' + key + ':' + xDateFormat + '}'
		                    );
		                }
		            );
		        }

		        // Replace default header style with class name
		        if (series.chart.styledMode) {
		            formatString = this.styledModeFormat(formatString);
		        }

		        return format(formatString, {
		            point: labelConfig,
		            series: series
		        }, this.chart.time);
		    },

		    /**
		     * Build the body (lines) of the tooltip by iterating over the items and
		     * returning one entry for each item, abstracting this functionality allows
		     * to easily overwrite and extend it.
		     *
		     * @private
		     * @function Highcharts.Tooltip#bodyFormatter
		     *
		     * @param {Array<Highcharts.Point>} items
		     *
		     * @return {string}
		     */
		    bodyFormatter: function (items) {
		        return items.map(function (item) {
		            var tooltipOptions = item.series.tooltipOptions;
		            return (
		                tooltipOptions[
		                    (item.point.formatPrefix || 'point') + 'Formatter'
		                ] ||
		                item.point.tooltipFormatter
		            ).call(
		                item.point,
		                tooltipOptions[
		                    (item.point.formatPrefix || 'point') + 'Format'
		                ] || ''
		            );
		        });
		    },

		    styledModeFormat: function (formatString) {
		        return formatString
		            .replace(
		                'style="font-size: 10px"',
		                'class="highcharts-header"'
		            )
		            .replace(
		                /style="color:{(point|series)\.color}"/g,
		                'class="highcharts-color-{$1.colorIndex}"'
		            );
		    }

		};

	}(Highcharts));
	(function (Highcharts) {
		/**
		 * (c) 2010-2018 Torstein Honsi
		 *
		 * License: www.highcharts.com/license
		 */

		/**
		 * One position in relation to an axis.
		 *
		 * @interface Highcharts.PointerAxisCoordinateObject
		 *//**
		 * Related axis.
		 *
		 * @name Highcharts.PointerAxisCoordinateObject#axis
		 * @type {Highcharts.Axis}
		 *//**
		 * Axis value.
		 *
		 * @name Highcharts.PointerAxisCoordinateObject#value
		 * @type {number}
		 */

		/**
		 * Positions in terms of axis values.
		 *
		 * @interface Highcharts.PointerAxisCoordinatesObject
		 *//**
		 * Positions on the x-axis.
		 * @name Highcharts.PointerAxisCoordinatesObject#xAxis
		 * @type {Array<Highcharts.PointerAxisCoordinateObject>}
		 *//**
		 * Positions on the y-axis.
		 * @name Highcharts.PointerAxisCoordinatesObject#yAxis
		 * @type {Array<Highcharts.PointerAxisCoordinateObject>}
		 */

		/**
		 * Pointer coordinates.
		 *
		 * @interface Highcharts.PointerCoordinatesObject
		 *//**
		 * @name Highcharts.PointerCoordinatesObject#chartX
		 * @type {number}
		 *//**
		 * @name Highcharts.PointerCoordinatesObject#chartY
		 * @type {number}
		 */

		/**
		 * A native browser mouse or touch event, extended with position information
		 * relative to the {@link Chart.container}.
		 *
		 * @interface Highcharts.PointerEventObject
		 * @extends global.PointerEvent
		 *//**
		 * The X coordinate of the pointer interaction relative to the chart.
		 *
		 * @name Highcharts.PointerEventObject#chartX
		 * @type {number}
		 *//**
		 * The Y coordinate of the pointer interaction relative to the chart.
		 *
		 * @name Highcharts.PointerEventObject#chartY
		 * @type {number}
		 */

		/**
		 * Axis-specific data of a selection.
		 *
		 * @interface Highcharts.SelectDataObject
		 *//**
		 * @name Highcharts.SelectDataObject#axis
		 * @type {Highcharts.Axis}
		 *//**
		 * @name Highcharts.SelectDataObject#min
		 * @type {number}
		 *//**
		 * @name Highcharts.SelectDataObject#max
		 * @type {number}
		 */

		/**
		 * Object for select events.
		 *
		 * @interface Highcharts.SelectEventObject
		 *//**
		 * @name Highcharts.SelectEventObject#originalEvent
		 * @type {global.Event}
		 *//**
		 * @name Highcharts.SelectEventObject#xAxis
		 * @type {Array<Highcharts.SelectDataObject>}
		 *//**
		 * @name Highcharts.SelectEventObject#yAxis
		 * @type {Array<Highcharts.SelectDataObject>}
		 */



		var H = Highcharts,
		    addEvent = H.addEvent,
		    attr = H.attr,
		    charts = H.charts,
		    color = H.color,
		    css = H.css,
		    defined = H.defined,
		    extend = H.extend,
		    find = H.find,
		    fireEvent = H.fireEvent,
		    isNumber = H.isNumber,
		    isObject = H.isObject,
		    offset = H.offset,
		    pick = H.pick,
		    splat = H.splat,
		    Tooltip = H.Tooltip;

		/**
		 * The mouse and touch tracker object. Each {@link Chart} item has one
		 * assosiated Pointer item that can be accessed from the  {@link Chart.pointer}
		 * property.
		 *
		 * @class
		 * @name Highcharts.Pointer
		 *
		 * @param {Highcharts.Chart} chart
		 *        The Chart instance.
		 *
		 * @param {Highcharts.Options} options
		 *        The root options object. The pointer uses options from the chart and
		 *        tooltip structures.
		 */
		Highcharts.Pointer = function (chart, options) {
		    this.init(chart, options);
		};

		Highcharts.Pointer.prototype = {
		    /**
		     * Initialize the Pointer.
		     *
		     * @private
		     * @function Highcharts.Pointer#init
		     *
		     * @param {Highcharts.Chart} chart
		     *        The Chart instance.
		     *
		     * @param {Highcharts.Options} options
		     *        The root options object. The pointer uses options from the chart
		     *        and tooltip structures.
		     */
		    init: function (chart, options) {

		        // Store references
		        this.options = options;
		        this.chart = chart;

		        // Do we need to handle click on a touch device?
		        this.runChartClick =
		            options.chart.events && !!options.chart.events.click;

		        this.pinchDown = [];
		        this.lastValidTouch = {};

		        if (Tooltip) {
		            /**
		             * Tooltip object for points of series.
		             *
		             * @name Highcharts.Chart#tooltip
		             * @type {Highcharts.Tooltip}
		             */
		            chart.tooltip = new Tooltip(chart, options.tooltip);
		            this.followTouchMove = pick(options.tooltip.followTouchMove, true);
		        }

		        this.setDOMEvents();
		    },

		    /**
		     * Resolve the zoomType option, this is reset on all touch start and mouse
		     * down events.
		     *
		     * @private
		     * @function Highcharts.Pointer#zoomOption
		     *
		     * @param {global.Event} e
		     *        Event object.
		     */
		    zoomOption: function (e) {
		        var chart = this.chart,
		            options = chart.options.chart,
		            zoomType = options.zoomType || '',
		            inverted = chart.inverted,
		            zoomX,
		            zoomY;

		        // Look for the pinchType option
		        if (/touch/.test(e.type)) {
		            zoomType = pick(options.pinchType, zoomType);
		        }

		        this.zoomX = zoomX = /x/.test(zoomType);
		        this.zoomY = zoomY = /y/.test(zoomType);
		        this.zoomHor = (zoomX && !inverted) || (zoomY && inverted);
		        this.zoomVert = (zoomY && !inverted) || (zoomX && inverted);
		        this.hasZoom = zoomX || zoomY;
		    },

		    /**
		     * Takes a browser event object and extends it with custom Highcharts
		     * properties `chartX` and `chartY` in order to work on the internal
		     * coordinate system.
		     *
		     * @function Highcharts.Pointer#normalize
		     *
		     * @param {global.Event} e
		     *        Event object in standard browsers.
		     *
		     * @return {Highcharts.PointerEventObject}
		     *         A browser event with extended properties `chartX` and `chartY`.
		     */
		    normalize: function (e, chartPosition) {
		        var ePos;

		        // iOS (#2757)
		        ePos = e.touches ?
		            (e.touches.length ? e.touches.item(0) : e.changedTouches[0]) :
		            e;

		        // Get mouse position
		        if (!chartPosition) {
		            this.chartPosition = chartPosition = offset(this.chart.container);
		        }

		        return extend(e, {
		            chartX: Math.round(ePos.pageX - chartPosition.left),
		            chartY: Math.round(ePos.pageY - chartPosition.top)
		        });
		    },

		    /**
		     * Get the click position in terms of axis values.
		     *
		     * @function Highcharts.Pointer#getCoordinates
		     *
		     * @param {Highcharts.PointerEventObject} e
		     *        Pointer event, extended with `chartX` and `chartY` properties.
		     *
		     * @return {Highcharts.PointerAxisCoordinatesObject}
		     */
		    getCoordinates: function (e) {

		        var coordinates = {
		            xAxis: [],
		            yAxis: []
		        };

		        this.chart.axes.forEach(function (axis) {
		            coordinates[axis.isXAxis ? 'xAxis' : 'yAxis'].push({
		                axis: axis,
		                value: axis.toValue(e[axis.horiz ? 'chartX' : 'chartY'])
		            });
		        });

		        return coordinates;
		    },

		    /**
		     * Finds the closest point to a set of coordinates, using the k-d-tree
		     * algorithm.
		     *
		     * @function Highcharts.Pointer#findNearestKDPoints
		     *
		     * @param {Array<Highcharts.Series>} series
		     *        All the series to search in.
		     *
		     * @param {boolean} shared
		     *        Whether it is a shared tooltip or not.
		     *
		     * @param {Highcharts.PointerCoordinatesObject} coordinates
		     *        Chart coordinates of the pointer.
		     *
		     * @return {Point|undefined}
		     *         The point closest to given coordinates.
		     */
		    findNearestKDPoint: function (series, shared, coordinates) {
		        var closest,
		            sort = function (p1, p2) {
		                var isCloserX = p1.distX - p2.distX,
		                    isCloser = p1.dist - p2.dist,
		                    isAbove =
		                        (p2.series.group && p2.series.group.zIndex) -
		                        (p1.series.group && p1.series.group.zIndex),
		                    result;

		                // We have two points which are not in the same place on xAxis
		                // and shared tooltip:
		                if (isCloserX !== 0 && shared) { // #5721
		                    result = isCloserX;
		                // Points are not exactly in the same place on x/yAxis:
		                } else if (isCloser !== 0) {
		                    result = isCloser;
		                // The same xAxis and yAxis position, sort by z-index:
		                } else if (isAbove !== 0) {
		                    result = isAbove;
		                // The same zIndex, sort by array index:
		                } else {
		                    result = p1.series.index > p2.series.index ? -1 : 1;
		                }
		                return result;
		            };
		        series.forEach(function (s) {
		            var noSharedTooltip = s.noSharedTooltip && shared,
		                compareX = (
		                    !noSharedTooltip &&
		                    s.options.findNearestPointBy.indexOf('y') < 0
		                ),
		                point = s.searchPoint(
		                    coordinates,
		                    compareX
		                );
		            if (
		                // Check that we actually found a point on the series.
		                isObject(point, true) &&
		                // Use the new point if it is closer.
		                (!isObject(closest, true) || (sort(closest, point) > 0))
		            ) {
		                closest = point;
		            }
		        });
		        return closest;
		    },

		    /**
		     * @private
		     * @function Highcharts.Pointer#getPointFromEvent
		     *
		     * @param {global.Event} e
		     *
		     * @return {Highcharts.Point|undefined}
		     */
		    getPointFromEvent: function (e) {
		        var target = e.target,
		            point;

		        while (target && !point) {
		            point = target.point;
		            target = target.parentNode;
		        }
		        return point;
		    },

		    /**
		     * @private
		     * @function Highcharts.Pointer#getChartCoordinatesFromPoint
		     *
		     * @param {Highcharts.Point} point
		     *
		     * @param {boolean} inverted
		     *
		     * @return {Highcharts.PointerCoordinatesObject}
		     */
		    getChartCoordinatesFromPoint: function (point, inverted) {
		        var series = point.series,
		            xAxis = series.xAxis,
		            yAxis = series.yAxis,
		            plotX = pick(point.clientX, point.plotX),
		            shapeArgs = point.shapeArgs;

		        if (xAxis && yAxis) {
		            return inverted ? {
		                chartX: xAxis.len + xAxis.pos - plotX,
		                chartY: yAxis.len + yAxis.pos - point.plotY
		            } : {
		                chartX: plotX + xAxis.pos,
		                chartY: point.plotY + yAxis.pos
		            };
		        } else if (shapeArgs && shapeArgs.x && shapeArgs.y) {
		            // E.g. pies do not have axes
		            return {
		                chartX: shapeArgs.x,
		                chartY: shapeArgs.y
		            };
		        }
		    },

		    /**
		     * Calculates what is the current hovered point/points and series.
		     *
		     * @private
		     * @function Highcharts.Pointer#getHoverData
		     *
		     * @param {Highcharts.Point|undefined} existingHoverPoint
		     *        The point currrently beeing hovered.
		     *
		     * @param {Highcharts.Series|undefined} existingHoverSeries
		     *        The series currently beeing hovered.
		     *
		     * @param {Array<Highcharts.Series>} series
		     *        All the series in the chart.
		     *
		     * @param {boolean} isDirectTouch
		     *        Is the pointer directly hovering the point.
		     *
		     * @param {boolean} shared
		     *        Whether it is a shared tooltip or not.
		     *
		     * @param {Highcharts.PointerCoordinatesObject} coordinates
		     *        Chart coordinates of the pointer.
		     *
		     * @return {*}
		     *         Object containing resulting hover data: hoverPoint, hoverSeries,
		     *         and hoverPoints.
		     */
		    getHoverData: function (
		        existingHoverPoint,
		        existingHoverSeries,
		        series,
		        isDirectTouch,
		        shared,
		        coordinates,
		        params
		    ) {
		        var hoverPoint,
		            hoverPoints = [],
		            hoverSeries = existingHoverSeries,
		            isBoosting = params && params.isBoosting,
		            useExisting = !!(isDirectTouch && existingHoverPoint),
		            notSticky = hoverSeries && !hoverSeries.stickyTracking,
		            filter = function (s) {
		                return (
		                    s.visible &&
		                    !(!shared && s.directTouch) && // #3821
		                    pick(s.options.enableMouseTracking, true)
		                );
		            },
		            // Which series to look in for the hover point
		            searchSeries = notSticky ?
		                // Only search on hovered series if it has stickyTracking false
		                [hoverSeries] :
		                // Filter what series to look in.
		                series.filter(function (s) {
		                    return filter(s) && s.stickyTracking;
		                });

		        // Use existing hovered point or find the one closest to coordinates.
		        hoverPoint = useExisting ?
		            existingHoverPoint :
		            this.findNearestKDPoint(searchSeries, shared, coordinates);

		        // Assign hover series
		        hoverSeries = hoverPoint && hoverPoint.series;

		        // If we have a hoverPoint, assign hoverPoints.
		        if (hoverPoint) {
		            // When tooltip is shared, it displays more than one point
		            if (shared && !hoverSeries.noSharedTooltip) {
		                searchSeries = series.filter(function (s) {
		                    return filter(s) && !s.noSharedTooltip;
		                });

		                // Get all points with the same x value as the hoverPoint
		                searchSeries.forEach(function (s) {
		                    var point = find(s.points, function (p) {
		                        return p.x === hoverPoint.x && !p.isNull;
		                    });
		                    if (isObject(point)) {
		                        /*
		                        * Boost returns a minimal point. Convert it to a usable
		                        * point for tooltip and states.
		                        */
		                        if (isBoosting) {
		                            point = s.getPoint(point);
		                        }
		                        hoverPoints.push(point);
		                    }
		                });
		            } else {
		                hoverPoints.push(hoverPoint);
		            }
		        }
		        return {
		            hoverPoint: hoverPoint,
		            hoverSeries: hoverSeries,
		            hoverPoints: hoverPoints
		        };
		    },

		    /**
		     * With line type charts with a single tracker, get the point closest to the
		     * mouse. Run Point.onMouseOver and display tooltip for the point or points.
		     *
		     * @private
		     * @function Highcharts.Pointer#runPointActions
		     *
		     * @param {global.Event} e
		     *
		     * @param {Highcharts.Point} p
		     *
		     * @fires Highcharts.Point#event:mouseOut
		     * @fires Highcharts.Point#event:mouseOver
		     */
		    runPointActions: function (e, p) {
		        var pointer = this,
		            chart = pointer.chart,
		            series = chart.series,
		            tooltip = chart.tooltip && chart.tooltip.options.enabled ?
		                chart.tooltip :
		                undefined,
		            shared = tooltip ? tooltip.shared : false,
		            hoverPoint = p || chart.hoverPoint,
		            hoverSeries = hoverPoint && hoverPoint.series || chart.hoverSeries,
		            // onMouseOver or already hovering a series with directTouch
		            isDirectTouch = e.type !== 'touchmove' && (
		                !!p || (
		                    (hoverSeries && hoverSeries.directTouch) &&
		                    pointer.isDirectTouch
		                )
		            ),
		            hoverData = this.getHoverData(
		                hoverPoint,
		                hoverSeries,
		                series,
		                isDirectTouch,
		                shared,
		                e,
		                { isBoosting: chart.isBoosting }
		            ),
		            useSharedTooltip,
		            followPointer,
		            anchor,
		            points;

		        // Update variables from hoverData.
		        hoverPoint = hoverData.hoverPoint;
		        points = hoverData.hoverPoints;
		        hoverSeries = hoverData.hoverSeries;
		        followPointer = hoverSeries && hoverSeries.tooltipOptions.followPointer;
		        useSharedTooltip = (
		            shared &&
		            hoverSeries &&
		            !hoverSeries.noSharedTooltip
		        );

		        // Refresh tooltip for kdpoint if new hover point or tooltip was hidden
		        // #3926, #4200
		        if (
		            hoverPoint &&
		            // !(hoverSeries && hoverSeries.directTouch) &&
		            (hoverPoint !== chart.hoverPoint || (tooltip && tooltip.isHidden))
		        ) {
		            (chart.hoverPoints || []).forEach(function (p) {
		                if (points.indexOf(p) === -1) {
		                    p.setState();
		                }
		            });
		            // Do mouseover on all points (#3919, #3985, #4410, #5622)
		            (points || []).forEach(function (p) {
		                p.setState('hover');
		            });
		            // set normal state to previous series
		            if (chart.hoverSeries !== hoverSeries) {
		                hoverSeries.onMouseOver();
		            }

		            // If tracking is on series in stead of on each point,
		            // fire mouseOver on hover point. // #4448
		            if (chart.hoverPoint) {
		                chart.hoverPoint.firePointEvent('mouseOut');
		            }

		            // Hover point may have been destroyed in the event handlers (#7127)
		            if (!hoverPoint.series) {
		                return;
		            }

		            hoverPoint.firePointEvent('mouseOver');
		            chart.hoverPoints = points;
		            chart.hoverPoint = hoverPoint;
		            // Draw tooltip if necessary
		            if (tooltip) {
		                tooltip.refresh(useSharedTooltip ? points : hoverPoint, e);
		            }
		        // Update positions (regardless of kdpoint or hoverPoint)
		        } else if (followPointer && tooltip && !tooltip.isHidden) {
		            anchor = tooltip.getAnchor([{}], e);
		            tooltip.updatePosition({ plotX: anchor[0], plotY: anchor[1] });
		        }

		        // Start the event listener to pick up the tooltip and crosshairs
		        if (!pointer.unDocMouseMove) {
		            pointer.unDocMouseMove = addEvent(
		                chart.container.ownerDocument,
		                'mousemove',
		                function (e) {
		                    var chart = charts[H.hoverChartIndex];
		                    if (chart) {
		                        chart.pointer.onDocumentMouseMove(e);
		                    }
		                }
		            );
		        }

		        // Issues related to crosshair #4927, #5269 #5066, #5658
		        chart.axes.forEach(function drawAxisCrosshair(axis) {
		            var snap = pick(axis.crosshair.snap, true),
		                point = !snap ?
		                    undefined :
		                    H.find(points, function (p) {
		                        return p.series[axis.coll] === axis;
		                    });

		            // Axis has snapping crosshairs, and one of the hover points belongs
		            // to axis. Always call drawCrosshair when it is not snap.
		            if (point || !snap) {
		                axis.drawCrosshair(e, point);
		            // Axis has snapping crosshairs, but no hover point belongs to axis
		            } else {
		                axis.hideCrosshair();
		            }
		        });
		    },

		    /**
		     * Reset the tracking by hiding the tooltip, the hover series state and the
		     * hover point
		     *
		     * @function Highcharts.Pointer#reset
		     *
		     * @param {boolean} allowMove
		     *        Instead of destroying the tooltip altogether, allow moving it if
		     *        possible.
		     *
		     * @param {number} delay
		     */
		    reset: function (allowMove, delay) {
		        var pointer = this,
		            chart = pointer.chart,
		            hoverSeries = chart.hoverSeries,
		            hoverPoint = chart.hoverPoint,
		            hoverPoints = chart.hoverPoints,
		            tooltip = chart.tooltip,
		            tooltipPoints = tooltip && tooltip.shared ?
		                hoverPoints :
		                hoverPoint;

		        // Check if the points have moved outside the plot area (#1003, #4736,
		        // #5101)
		        if (allowMove && tooltipPoints) {
		            splat(tooltipPoints).forEach(function (point) {
		                if (point.series.isCartesian && point.plotX === undefined) {
		                    allowMove = false;
		                }
		            });
		        }

		        // Just move the tooltip, #349
		        if (allowMove) {
		            if (tooltip && tooltipPoints && tooltipPoints.length) {
		                tooltip.refresh(tooltipPoints);
		                if (tooltip.shared && hoverPoints) { // #8284
		                    hoverPoints.forEach(function (point) {
		                        point.setState(point.state, true);
		                        if (point.series.isCartesian) {
		                            if (point.series.xAxis.crosshair) {
		                                point.series.xAxis.drawCrosshair(null, point);
		                            }
		                            if (point.series.yAxis.crosshair) {
		                                point.series.yAxis.drawCrosshair(null, point);
		                            }
		                        }
		                    });
		                } else if (hoverPoint) { // #2500
		                    hoverPoint.setState(hoverPoint.state, true);
		                    chart.axes.forEach(function (axis) {
		                        if (axis.crosshair) {
		                            axis.drawCrosshair(null, hoverPoint);
		                        }
		                    });
		                }
		            }

		        // Full reset
		        } else {

		            if (hoverPoint) {
		                hoverPoint.onMouseOut();
		            }

		            if (hoverPoints) {
		                hoverPoints.forEach(function (point) {
		                    point.setState();
		                });
		            }

		            if (hoverSeries) {
		                hoverSeries.onMouseOut();
		            }

		            if (tooltip) {
		                tooltip.hide(delay);
		            }

		            if (pointer.unDocMouseMove) {
		                pointer.unDocMouseMove = pointer.unDocMouseMove();
		            }

		            // Remove crosshairs
		            chart.axes.forEach(function (axis) {
		                axis.hideCrosshair();
		            });

		            pointer.hoverX = chart.hoverPoints = chart.hoverPoint = null;
		        }
		    },

		    /**
		     * Scale series groups to a certain scale and translation.
		     *
		     * @private
		     * @function Highcharts.Pointer#scaleGroups
		     *
		     * @param {Highcharts.SeriesPlotBoxObject} attribs
		     *
		     * @param {boolean} clip
		     */
		    scaleGroups: function (attribs, clip) {

		        var chart = this.chart,
		            seriesAttribs;

		        // Scale each series
		        chart.series.forEach(function (series) {
		            seriesAttribs = attribs || series.getPlotBox(); // #1701
		            if (series.xAxis && series.xAxis.zoomEnabled && series.group) {
		                series.group.attr(seriesAttribs);
		                if (series.markerGroup) {
		                    series.markerGroup.attr(seriesAttribs);
		                    series.markerGroup.clip(clip ? chart.clipRect : null);
		                }
		                if (series.dataLabelsGroup) {
		                    series.dataLabelsGroup.attr(seriesAttribs);
		                }
		            }
		        });

		        // Clip
		        chart.clipRect.attr(clip || chart.clipBox);
		    },

		    /**
		     * Start a drag operation.
		     *
		     * @private
		     * @function Highcharts.Pointer#dragStart
		     *
		     * @param {Highcharts.PointerEventObject} e
		     */
		    dragStart: function (e) {
		        var chart = this.chart;

		        // Record the start position
		        chart.mouseIsDown = e.type;
		        chart.cancelClick = false;
		        chart.mouseDownX = this.mouseDownX = e.chartX;
		        chart.mouseDownY = this.mouseDownY = e.chartY;
		    },

		    /**
		     * Perform a drag operation in response to a mousemove event while the mouse
		     * is down.
		     *
		     * @private
		     * @function Highcharts.Pointer#drag
		     *
		     * @param {Highcharts.PointerEventObject} e
		     */
		    drag: function (e) {

		        var chart = this.chart,
		            chartOptions = chart.options.chart,
		            chartX = e.chartX,
		            chartY = e.chartY,
		            zoomHor = this.zoomHor,
		            zoomVert = this.zoomVert,
		            plotLeft = chart.plotLeft,
		            plotTop = chart.plotTop,
		            plotWidth = chart.plotWidth,
		            plotHeight = chart.plotHeight,
		            clickedInside,
		            size,
		            selectionMarker = this.selectionMarker,
		            mouseDownX = this.mouseDownX,
		            mouseDownY = this.mouseDownY,
		            panKey = chartOptions.panKey && e[chartOptions.panKey + 'Key'];

		        // If the device supports both touch and mouse (like IE11), and we are
		        // touch-dragging inside the plot area, don't handle the mouse event.
		        // #4339.
		        if (selectionMarker && selectionMarker.touch) {
		            return;
		        }

		        // If the mouse is outside the plot area, adjust to cooordinates
		        // inside to prevent the selection marker from going outside
		        if (chartX < plotLeft) {
		            chartX = plotLeft;
		        } else if (chartX > plotLeft + plotWidth) {
		            chartX = plotLeft + plotWidth;
		        }

		        if (chartY < plotTop) {
		            chartY = plotTop;
		        } else if (chartY > plotTop + plotHeight) {
		            chartY = plotTop + plotHeight;
		        }

		        // determine if the mouse has moved more than 10px
		        this.hasDragged = Math.sqrt(
		            Math.pow(mouseDownX - chartX, 2) +
		            Math.pow(mouseDownY - chartY, 2)
		        );

		        if (this.hasDragged > 10) {
		            clickedInside = chart.isInsidePlot(
		                mouseDownX - plotLeft,
		                mouseDownY - plotTop
		            );

		            // make a selection
		            if (
		                chart.hasCartesianSeries &&
		                (this.zoomX || this.zoomY) &&
		                clickedInside &&
		                !panKey
		            ) {
		                if (!selectionMarker) {
		                    this.selectionMarker = selectionMarker =
		                        chart.renderer.rect(
		                            plotLeft,
		                            plotTop,
		                            zoomHor ? 1 : plotWidth,
		                            zoomVert ? 1 : plotHeight,
		                            0
		                        )
		                        .attr({
		                            'class': 'highcharts-selection-marker',
		                            'zIndex': 7
		                        })
		                        .add();

		                    if (!chart.styledMode) {
		                        selectionMarker.attr({
		                            fill: (
		                                chartOptions.selectionMarkerFill ||
		                                color('#335cad')
		                                    .setOpacity(0.25).get()
		                            )
		                        });
		                    }
		                }
		            }

		            // adjust the width of the selection marker
		            if (selectionMarker && zoomHor) {
		                size = chartX - mouseDownX;
		                selectionMarker.attr({
		                    width: Math.abs(size),
		                    x: (size > 0 ? 0 : size) + mouseDownX
		                });
		            }
		            // adjust the height of the selection marker
		            if (selectionMarker && zoomVert) {
		                size = chartY - mouseDownY;
		                selectionMarker.attr({
		                    height: Math.abs(size),
		                    y: (size > 0 ? 0 : size) + mouseDownY
		                });
		            }

		            // panning
		            if (clickedInside && !selectionMarker && chartOptions.panning) {
		                chart.pan(e, chartOptions.panning);
		            }
		        }
		    },

		    /**
		     * On mouse up or touch end across the entire document, drop the selection.
		     *
		     * @private
		     * @function Highcharts.Pointer#drop
		     *
		     * @param {global.Event} e
		     */
		    drop: function (e) {
		        var pointer = this,
		            chart = this.chart,
		            hasPinched = this.hasPinched;

		        if (this.selectionMarker) {
		            var selectionData = {
		                    originalEvent: e, // #4890
		                    xAxis: [],
		                    yAxis: []
		                },
		                selectionBox = this.selectionMarker,
		                selectionLeft = selectionBox.attr ?
		                    selectionBox.attr('x') :
		                    selectionBox.x,
		                selectionTop = selectionBox.attr ?
		                    selectionBox.attr('y') :
		                    selectionBox.y,
		                selectionWidth = selectionBox.attr ?
		                    selectionBox.attr('width') :
		                    selectionBox.width,
		                selectionHeight = selectionBox.attr ?
		                    selectionBox.attr('height') :
		                    selectionBox.height,
		                runZoom;

		            // a selection has been made
		            if (this.hasDragged || hasPinched) {

		                // record each axis' min and max
		                chart.axes.forEach(function (axis) {
		                    if (
		                        axis.zoomEnabled &&
		                        defined(axis.min) &&
		                        (
		                            hasPinched ||
		                            pointer[{
		                                xAxis: 'zoomX',
		                                yAxis: 'zoomY'
		                            }[axis.coll]]
		                        )
		                    ) { // #859, #3569
		                        var horiz = axis.horiz,
		                            minPixelPadding = e.type === 'touchend' ?
		                                axis.minPixelPadding :
		                                0, // #1207, #3075
		                            selectionMin = axis.toValue(
		                                (horiz ? selectionLeft : selectionTop) +
		                                minPixelPadding
		                            ),
		                            selectionMax = axis.toValue(
		                                (
		                                    horiz ?
		                                        selectionLeft + selectionWidth :
		                                        selectionTop + selectionHeight
		                                ) - minPixelPadding
		                                );

		                        selectionData[axis.coll].push({
		                            axis: axis,
		                            // Min/max for reversed axes
		                            min: Math.min(selectionMin, selectionMax),
		                            max: Math.max(selectionMin, selectionMax)
		                        });
		                        runZoom = true;
		                    }
		                });
		                if (runZoom) {
		                    fireEvent(
		                        chart,
		                        'selection',
		                        selectionData,
		                        function (args) {
		                            chart.zoom(
		                                extend(
		                                    args,
		                                    hasPinched ? { animation: false } : null
		                                )
		                            );
		                        }
		                    );
		                }

		            }

		            if (isNumber(chart.index)) {
		                this.selectionMarker = this.selectionMarker.destroy();
		            }

		            // Reset scaling preview
		            if (hasPinched) {
		                this.scaleGroups();
		            }
		        }

		        // Reset all. Check isNumber because it may be destroyed on mouse up
		        // (#877)
		        if (chart && isNumber(chart.index)) {
		            css(chart.container, { cursor: chart._cursor });
		            chart.cancelClick = this.hasDragged > 10; // #370
		            chart.mouseIsDown = this.hasDragged = this.hasPinched = false;
		            this.pinchDown = [];
		        }
		    },

		    /**
		     * @private
		     * @function Highcharts.Pointer#onContainerMouseDown
		     *
		     * @param {global.Event} e
		     */
		    onContainerMouseDown: function (e) {
		        // Normalize before the 'if' for the legacy IE (#7850)
		        e = this.normalize(e);

		        if (e.button !== 2) {

		            this.zoomOption(e);

		            // issue #295, dragging not always working in Firefox
		            if (e.preventDefault) {
		                e.preventDefault();
		            }

		            this.dragStart(e);
		        }
		    },

		    /**
		     * @private
		     * @function Highcharts.Pointer#onDocumentMouseUp
		     *
		     * @param {global.Event} e
		     */
		    onDocumentMouseUp: function (e) {
		        if (charts[H.hoverChartIndex]) {
		            charts[H.hoverChartIndex].pointer.drop(e);
		        }
		    },

		    /**
		     * Special handler for mouse move that will hide the tooltip when the mouse
		     * leaves the plotarea. Issue #149 workaround. The mouseleave event does not
		     * always fire.
		     *
		     * @private
		     * @function Highcharts.Pointer#onDocumentMouseMove
		     *
		     * @param {Highcharts.PointerEventObject} e
		     */
		    onDocumentMouseMove: function (e) {
		        var chart = this.chart,
		            chartPosition = this.chartPosition;

		        e = this.normalize(e, chartPosition);

		        // If we're outside, hide the tooltip
		        if (
		            chartPosition &&
		            !this.inClass(e.target, 'highcharts-tracker') &&
		            !chart.isInsidePlot(
		                e.chartX - chart.plotLeft,
		                e.chartY - chart.plotTop
		            )
		        ) {
		            this.reset();
		        }
		    },

		    /**
		     * When mouse leaves the container, hide the tooltip.
		     *
		     * @private
		     * @function Highcharts.Pointer#onContainerMouseLeave
		     *
		     * @param {global.Event} e
		     */
		    onContainerMouseLeave: function (e) {
		        var chart = charts[H.hoverChartIndex];
		        // #4886, MS Touch end fires mouseleave but with no related target
		        if (chart && (e.relatedTarget || e.toElement)) {
		            chart.pointer.reset();
		            // Also reset the chart position, used in #149 fix
		            chart.pointer.chartPosition = null;
		        }
		    },

		    /**
		     * The mousemove, touchmove and touchstart event handler
		     *
		     * @private
		     * @function Highcharts.Pointer#onContainerMouseMove
		     *
		     * @param {Highcharts.PointerEventObject} e
		     */
		    onContainerMouseMove: function (e) {

		        var chart = this.chart;

		        if (
		            !defined(H.hoverChartIndex) ||
		            !charts[H.hoverChartIndex] ||
		            !charts[H.hoverChartIndex].mouseIsDown
		        ) {
		            H.hoverChartIndex = chart.index;
		        }

		        e = this.normalize(e);
		        e.returnValue = false; // #2251, #3224

		        if (chart.mouseIsDown === 'mousedown') {
		            this.drag(e);
		        }

		        // Show the tooltip and run mouse over events (#977)
		        if (
		            (
		                this.inClass(e.target, 'highcharts-tracker') ||
		                chart.isInsidePlot(
		                    e.chartX - chart.plotLeft,
		                    e.chartY - chart.plotTop
		                )
		            ) &&
		            !chart.openMenu
		        ) {
		            this.runPointActions(e);
		        }
		    },

		    /**
		     * Utility to detect whether an element has, or has a parent with, a
		     * specificclass name. Used on detection of tracker objects and on deciding
		     * whether hovering the tooltip should cause the active series to mouse out.
		     *
		     * @function Highcharts.Pointer#inClass
		     *
		     * @param {Highcharts.SVGDOMElement|Highcharts.HTMLDOMElement} element
		     *        The element to investigate.
		     *
		     * @param {string} className
		     *        The class name to look for.
		     *
		     * @return {boolean}
		     *         True if either the element or one of its parents has the given
		     *         class name.
		     */
		    inClass: function (element, className) {
		        var elemClassName;
		        while (element) {
		            elemClassName = attr(element, 'class');
		            if (elemClassName) {
		                if (elemClassName.indexOf(className) !== -1) {
		                    return true;
		                }
		                if (elemClassName.indexOf('highcharts-container') !== -1) {
		                    return false;
		                }
		            }
		            element = element.parentNode;
		        }
		    },

		    /**
		     * @private
		     * @function Highcharts.Pointer#onTrackerMouseOut
		     *
		     * @param {global.Event} e
		     */
		    onTrackerMouseOut: function (e) {
		        var series = this.chart.hoverSeries,
		            relatedTarget = e.relatedTarget || e.toElement;

		        this.isDirectTouch = false;

		        if (
		            series &&
		            relatedTarget &&
		            !series.stickyTracking &&
		            !this.inClass(relatedTarget, 'highcharts-tooltip') &&
		            (
		                !this.inClass(
		                    relatedTarget,
		                    'highcharts-series-' + series.index
		                ) || // #2499, #4465
		                !this.inClass(relatedTarget, 'highcharts-tracker') // #5553
		            )
		        ) {
		            series.onMouseOut();
		        }
		    },

		    /**
		     * @private
		     * @function Highcharts.Pointer#onContainerClick
		     *
		     * @param {Highcharts.PointerEventObject} e
		     */
		    onContainerClick: function (e) {
		        var chart = this.chart,
		            hoverPoint = chart.hoverPoint,
		            plotLeft = chart.plotLeft,
		            plotTop = chart.plotTop;

		        e = this.normalize(e);

		        if (!chart.cancelClick) {

		            // On tracker click, fire the series and point events. #783, #1583
		            if (hoverPoint && this.inClass(e.target, 'highcharts-tracker')) {

		                // the series click event
		                fireEvent(hoverPoint.series, 'click', extend(e, {
		                    point: hoverPoint
		                }));

		                // the point click event
		                if (chart.hoverPoint) { // it may be destroyed (#1844)
		                    hoverPoint.firePointEvent('click', e);
		                }

		            // When clicking outside a tracker, fire a chart event
		            } else {
		                extend(e, this.getCoordinates(e));

		                // fire a click event in the chart
		                if (
		                    chart.isInsidePlot(e.chartX - plotLeft, e.chartY - plotTop)
		                ) {
		                    fireEvent(chart, 'click', e);
		                }
		            }


		        }
		    },

		    /**
		     * Set the JS DOM events on the container and document. This method should
		     * contain a one-to-one assignment between methods and their handlers. Any
		     * advanced logic should be moved to the handler reflecting the event's
		     * name.
		     *
		     * @private
		     * @function Highcharts.Pointer#setDOMEvents
		     */
		    setDOMEvents: function () {

		        var pointer = this,
		            container = pointer.chart.container,
		            ownerDoc = container.ownerDocument;

		        container.onmousedown = function (e) {
		            pointer.onContainerMouseDown(e);
		        };
		        container.onmousemove = function (e) {
		            pointer.onContainerMouseMove(e);
		        };
		        container.onclick = function (e) {
		            pointer.onContainerClick(e);
		        };
		        this.unbindContainerMouseLeave = addEvent(
		            container,
		            'mouseleave',
		            pointer.onContainerMouseLeave
		        );
		        if (!H.unbindDocumentMouseUp) {
		            H.unbindDocumentMouseUp = addEvent(
		                ownerDoc,
		                'mouseup',
		                pointer.onDocumentMouseUp
		            );
		        }
		        if (H.hasTouch) {
		            container.ontouchstart = function (e) {
		                pointer.onContainerTouchStart(e);
		            };
		            container.ontouchmove = function (e) {
		                pointer.onContainerTouchMove(e);
		            };
		            if (!H.unbindDocumentTouchEnd) {
		                H.unbindDocumentTouchEnd = addEvent(
		                    ownerDoc,
		                    'touchend',
		                    pointer.onDocumentTouchEnd
		                );
		            }
		        }

		    },

		    /**
		     * Destroys the Pointer object and disconnects DOM events.
		     *
		     * @function Highcharts.Pointer#destroy
		     */
		    destroy: function () {
		        var pointer = this;

		        if (pointer.unDocMouseMove) {
		            pointer.unDocMouseMove();
		        }

		        this.unbindContainerMouseLeave();

		        if (!H.chartCount) {
		            if (H.unbindDocumentMouseUp) {
		                H.unbindDocumentMouseUp = H.unbindDocumentMouseUp();
		            }
		            if (H.unbindDocumentTouchEnd) {
		                H.unbindDocumentTouchEnd = H.unbindDocumentTouchEnd();
		            }
		        }

		        // memory and CPU leak
		        clearInterval(pointer.tooltipTimeout);

		        H.objectEach(pointer, function (val, prop) {
		            pointer[prop] = null;
		        });
		    }
		};

	}(Highcharts));
	(function (H) {
		/**
		 * (c) 2010-2018 Torstein Honsi
		 *
		 * License: www.highcharts.com/license
		 */

		/**
		 * Callback for chart constructors.
		 *
		 * @callback Highcharts.ChartCallbackFunction
		 *
		 * @param {Highcharts.Chart} chart
		 *        Created chart.
		 */

		/**
		 * The chart title. The title has an `update` method that allows modifying the
		 * options directly or indirectly via `chart.update`.
		 *
		 * @interface Highcharts.TitleObject
		 * @extends Highcharts.SVGElement
		 *//**
		 * Modify options for the title.
		 *
		 * @function Highcharts.TitleObject#update
		 *
		 * @param {Highcharts.TitleOptions} titleOptions
		 *        Options to modify.
		 *
		 * @param {boolean} [redraw=true]
		 *        Whether to redraw the chart after the title is altered. If doing more
		 *        operations on the chart, it is a good idea to set redraw to false and
		 *        call {@link Chart#redraw} after.
		 */

		/**
		 * The chart subtitle. The subtitle has an `update` method that
		 * allows modifying the options directly or indirectly via
		 * `chart.update`.
		 *
		 * @interface Highcharts.SubtitleObject
		 * @extends Highcharts.SVGElement
		 *//**
		 * Modify options for the subtitle.
		 *
		 * @function Highcharts.SubtitleObject#update
		 *
		 * @param {Highcharts.SubtitleOptions} subtitleOptions
		 *        Options to modify.
		 *
		 * @param {boolean} [redraw=true]
		 *        Whether to redraw the chart after the subtitle is altered. If doing
		 *        more operations on the chart, it is a good idea to set redraw to false
		 *        and call {@link Chart#redraw} after.
		 */



		var addEvent = H.addEvent,
		    animate = H.animate,
		    animObject = H.animObject,
		    attr = H.attr,
		    doc = H.doc,
		    Axis = H.Axis, // @todo add as requirement
		    createElement = H.createElement,
		    defaultOptions = H.defaultOptions,
		    discardElement = H.discardElement,
		    charts = H.charts,
		    css = H.css,
		    defined = H.defined,
		    extend = H.extend,
		    find = H.find,
		    fireEvent = H.fireEvent,
		    isNumber = H.isNumber,
		    isObject = H.isObject,
		    isString = H.isString,
		    Legend = H.Legend, // @todo add as requirement
		    marginNames = H.marginNames,
		    merge = H.merge,
		    objectEach = H.objectEach,
		    Pointer = H.Pointer, // @todo add as requirement
		    pick = H.pick,
		    pInt = H.pInt,
		    removeEvent = H.removeEvent,
		    seriesTypes = H.seriesTypes,
		    splat = H.splat,
		    syncTimeout = H.syncTimeout,
		    win = H.win;

		/**
		 * The Chart class. The recommended constructor is {@link Highcharts#chart}.
		 *
		 * @example
		 * var chart = Highcharts.chart('container', {
		 *        title: {
		 *               text: 'My chart'
		 *        },
		 *        series: [{
		 *            data: [1, 3, 2, 4]
		 *        }]
		 * })
		 *
		 * @class
		 * @name Highcharts.Chart
		 *
		 * @param {string|Highcharts.HTMLDOMElement} [renderTo]
		 *        The DOM element to render to, or its id.
		 *
		 * @param {Highcharts.Options} options
		 *        The chart options structure.
		 *
		 * @param {Highcharts.ChartCallbackFunction} [callback]
		 *        Function to run when the chart has loaded and and all external images
		 *        are loaded. Defining a
		 *        [chart.event.load](https://api.highcharts.com/highcharts/chart.events.load)
		 *        handler is equivalent.
		 */
		var Chart = H.Chart = function () {
		    this.getArgs.apply(this, arguments);
		};

		/**
		 * Factory function for basic charts.
		 *
		 * @example
		 * // Render a chart in to div#container
		 * var chart = Highcharts.chart('container', {
		 *     title: {
		 *         text: 'My chart'
		 *     },
		 *     series: [{
		 *         data: [1, 3, 2, 4]
		 *     }]
		 * });
		 *
		 * @function Highcharts.chart
		 *
		 * @param {string|Highcharts.HTMLDOMElement} [renderTo]
		 *        The DOM element to render to, or its id.
		 *
		 * @param {Highcharts.Options} options
		 *        The chart options structure.
		 *
		 * @param {Highcharts.ChartCallbackFunction} [callback]
		 *        Function to run when the chart has loaded and and all external images
		 *        are loaded. Defining a
		 *        [chart.event.load](https://api.highcharts.com/highcharts/chart.events.load)
		 *        handler is equivalent.
		 *
		 * @return {Highcharts.Chart}
		 *         Returns the Chart object.
		 */
		H.chart = function (a, b, c) {
		    return new Chart(a, b, c);
		};

		extend(Chart.prototype, /** @lends Highcharts.Chart.prototype */ {

		    // Hook for adding callbacks in modules
		    callbacks: [],

		    /**
		     * Handle the arguments passed to the constructor.
		     *
		     * @private
		     * @function Highcharts.Chart#getArgs
		     *
		     * @param {...Array<*>} arguments
		     *        All arguments for the constructor.
		     *
		     * @return {Array<*>}
		     *         Passed arguments without renderTo.
		     *
		     * @fires Highcharts.Chart#event:init
		     * @fires Highcharts.Chart#event:afterInit
		     */
		    getArgs: function () {
		        var args = [].slice.call(arguments);

		        // Remove the optional first argument, renderTo, and
		        // set it on this.
		        if (isString(args[0]) || args[0].nodeName) {
		            this.renderTo = args.shift();
		        }
		        this.init(args[0], args[1]);
		    },

		    /**
		     * Overridable function that initializes the chart. The constructor's
		     * arguments are passed on directly.
		     *
		     * @function Highcharts.Chart#init
		     *
		     * @param {Highcharts.Options} userOptions
		     *        Custom options.
		     *
		     * @param {Function} [callback]
		     *        Function to run when the chart has loaded and and all external
		     *        images are loaded.
		     *
		     * @fires Highcharts.Chart#event:init
		     * @fires Highcharts.Chart#event:afterInit
		     */
		    init: function (userOptions, callback) {

		        // Handle regular options
		        var options,
		            type,
		            // skip merging data points to increase performance
		            seriesOptions = userOptions.series,
		            userPlotOptions = userOptions.plotOptions || {};

		        // Fire the event with a default function
		        fireEvent(this, 'init', { args: arguments }, function () {

		            userOptions.series = null;
		            options = merge(defaultOptions, userOptions); // do the merge

		            // Override (by copy of user options) or clear tooltip options
		            // in chart.options.plotOptions (#6218)
		            for (type in options.plotOptions) {
		                options.plotOptions[type].tooltip = (
		                    userPlotOptions[type] &&
		                    merge(userPlotOptions[type].tooltip) // override by copy
		                ) || undefined; // or clear
		            }
		            // User options have higher priority than default options
		            // (#6218). In case of exporting: path is changed
		            options.tooltip.userOptions = (
		                userOptions.chart &&
		                userOptions.chart.forExport &&
		                userOptions.tooltip.userOptions
		            ) || userOptions.tooltip;

		            // set back the series data
		            options.series = userOptions.series = seriesOptions;
		            this.userOptions = userOptions;

		            var optionsChart = options.chart;

		            var chartEvents = optionsChart.events;

		            this.margin = [];
		            this.spacing = [];

		            // Pixel data bounds for touch zoom
		            this.bounds = { h: {}, v: {} };

		            // An array of functions that returns labels that should be
		            // considered for anti-collision
		            this.labelCollectors = [];

		            this.callback = callback;
		            this.isResizing = 0;

		            /**
		             * The options structure for the chart. It contains members for
		             * the sub elements like series, legend, tooltip etc.
		             *
		             * @name Highcharts.Chart#options
		             * @type {Highcharts.Options}
		             */
		            this.options = options;

		            /**
		             * All the axes in the chart.
		             *
		             * @see  Highcharts.Chart.xAxis
		             * @see  Highcharts.Chart.yAxis
		             *
		             * @name Highcharts.Chart#axes
		             * @type {Array<Highcharts.Axis>}
		             */
		            this.axes = [];

		            /**
		             * All the current series in the chart.
		             *
		             * @name Highcharts.Chart#series
		             * @type {Array<Highcharts.Series>}
		             */
		            this.series = [];

		            /**
		             * The `Time` object associated with the chart. Since v6.0.5,
		             * time settings can be applied individually for each chart. If
		             * no individual settings apply, the `Time` object is shared by
		             * all instances.
		             *
		             * @name Highcharts.Chart#time
		             * @type {Highcharts.Time}
		             */
		            this.time =
		                userOptions.time && Object.keys(userOptions.time).length ?
		                    new H.Time(userOptions.time) :
		                    H.time;

		            /**
		             * Whether the chart is in styled mode, meaning all presentatinoal
		             * attributes are avoided.
		             *
		             * @name Highcharts.Chart#styledMode
		             * @type {boolean}
		             */
		            this.styledMode = optionsChart.styledMode;
		            this.hasCartesianSeries = optionsChart.showAxes;

		            var chart = this;

		            // Add the chart to the global lookup
		            chart.index = charts.length;

		            charts.push(chart);
		            H.chartCount++;

		            // Chart event handlers
		            if (chartEvents) {
		                objectEach(chartEvents, function (event, eventType) {
		                    addEvent(chart, eventType, event);
		                });
		            }

		            /**
		             * A collection of the X axes in the chart.
		             *
		             * @name Highcharts.Chart#xAxis
		             * @type {Array<Highcharts.Axis>}
		             */
		            chart.xAxis = [];

		            /**
		             * A collection of the Y axes in the chart.
		             *
		             * @name Highcharts.Chart#yAxis
		             * @type {Array<Highcharts.Axis>}
		             *
		             * @todo
		             * Make events official: Fire the event `afterInit`.
		             */
		            chart.yAxis = [];

		            chart.pointCount = chart.colorCounter = chart.symbolCounter = 0;

		            // Fire after init but before first render, before axes and series
		            // have been initialized.
		            fireEvent(chart, 'afterInit');

		            chart.firstRender();
		        });
		    },

		    /**
		     * Internal function to unitialize an individual series.
		     *
		     * @private
		     * @function Highcharts.Chart#initSeries
		     *
		     * @param {Highcharts.ChartOptions} options
		     *
		     * @return {Highcharts.Series}
		     */
		    initSeries: function (options) {
		        var chart = this,
		            optionsChart = chart.options.chart,
		            type = (
		                options.type ||
		                optionsChart.type ||
		                optionsChart.defaultSeriesType
		            ),
		            series,
		            Constr = seriesTypes[type];

		        // No such series type
		        if (!Constr) {
		            H.error(17, true, chart);
		        }

		        series = new Constr();
		        series.init(this, options);
		        return series;
		    },

		    /**
		     * Order all series above a given index. When series are added and ordered
		     * by configuration, only the last series is handled (#248, #1123, #2456,
		     * #6112). This function is called on series initialization and destroy.
		     *
		     * @private
		     * @function Highcharts.Series#orderSeries
		     *
		     * @param {number} fromIndex
		     *        If this is given, only the series above this index are handled.
		     */
		    orderSeries: function (fromIndex) {
		        var series = this.series,
		            i = fromIndex || 0;
		        for (; i < series.length; i++) {
		            if (series[i]) {
		                series[i].index = i;
		                series[i].name = series[i].getName();
		            }
		        }
		    },

		    /**
		     * Check whether a given point is within the plot area.
		     *
		     * @function Highcharts.Chart#isInsidePlot
		     *
		     * @param {number} plotX
		     *        Pixel x relative to the plot area.
		     *
		     * @param {number} plotY
		     *        Pixel y relative to the plot area.
		     *
		     * @param {boolean} inverted
		     *        Whether the chart is inverted.
		     *
		     * @return {boolean}
		     *         Returns true if the given point is inside the plot area.
		     */
		    isInsidePlot: function (plotX, plotY, inverted) {
		        var x = inverted ? plotY : plotX,
		            y = inverted ? plotX : plotY;

		        return x >= 0 &&
		            x <= this.plotWidth &&
		            y >= 0 &&
		            y <= this.plotHeight;
		    },

		    /**
		     * Redraw the chart after changes have been done to the data, axis extremes
		     * chart size or chart elements. All methods for updating axes, series or
		     * points have a parameter for redrawing the chart. This is `true` by
		     * default. But in many cases you want to do more than one operation on the
		     * chart before redrawing, for example add a number of points. In those
		     * cases it is a waste of resources to redraw the chart for each new point
		     * added. So you add the points and call `chart.redraw()` after.
		     *
		     * @function Highcharts.Chart#redraw
		     *
		     * @param {boolean|Highcharts.AnimationOptionsObject} [animation]
		     *        If or how to apply animation to the redraw.
		     *
		     * @fires Highcharts.Chart#event:afterSetExtremes
		     * @fires Highcharts.Chart#event:beforeRedraw
		     * @fires Highcharts.Chart#event:predraw
		     * @fires Highcharts.Chart#event:redraw
		     * @fires Highcharts.Chart#event:render
		     * @fires Highcharts.Chart#event:updatedData
		     */
		    redraw: function (animation) {

		        fireEvent(this, 'beforeRedraw');

		        var chart = this,
		            axes = chart.axes,
		            series = chart.series,
		            pointer = chart.pointer,
		            legend = chart.legend,
		            legendUserOptions = chart.userOptions.legend,
		            redrawLegend = chart.isDirtyLegend,
		            hasStackedSeries,
		            hasDirtyStacks,
		            hasCartesianSeries = chart.hasCartesianSeries,
		            isDirtyBox = chart.isDirtyBox,
		            i,
		            serie,
		            renderer = chart.renderer,
		            isHiddenChart = renderer.isHidden(),
		            afterRedraw = [];

		        // Handle responsive rules, not only on resize (#6130)
		        if (chart.setResponsive) {
		            chart.setResponsive(false);
		        }

		        H.setAnimation(animation, chart);

		        if (isHiddenChart) {
		            chart.temporaryDisplay();
		        }

		        // Adjust title layout (reflow multiline text)
		        chart.layOutTitles();

		        // link stacked series
		        i = series.length;
		        while (i--) {
		            serie = series[i];

		            if (serie.options.stacking) {
		                hasStackedSeries = true;

		                if (serie.isDirty) {
		                    hasDirtyStacks = true;
		                    break;
		                }
		            }
		        }
		        if (hasDirtyStacks) { // mark others as dirty
		            i = series.length;
		            while (i--) {
		                serie = series[i];
		                if (serie.options.stacking) {
		                    serie.isDirty = true;
		                }
		            }
		        }

		        // Handle updated data in the series
		        series.forEach(function (serie) {
		            if (serie.isDirty) {
		                if (serie.options.legendType === 'point') {
		                    if (serie.updateTotals) {
		                        serie.updateTotals();
		                    }
		                    redrawLegend = true;
		                } else if (
		                    legendUserOptions &&
		                    (
		                        legendUserOptions.labelFormatter ||
		                        legendUserOptions.labelFormat
		                    )
		                ) {
		                    redrawLegend = true; // #2165
		                }
		            }
		            if (serie.isDirtyData) {
		                fireEvent(serie, 'updatedData');
		            }
		        });

		        // handle added or removed series
		        if (redrawLegend && legend && legend.options.enabled) {
		            // draw legend graphics
		            legend.render();

		            chart.isDirtyLegend = false;
		        }

		        // reset stacks
		        if (hasStackedSeries) {
		            chart.getStacks();
		        }


		        if (hasCartesianSeries) {
		            // set axes scales
		            axes.forEach(function (axis) {
		                axis.updateNames();
		                // Update categories in a Gantt chart
		                if (axis.updateYNames) {
		                    axis.updateYNames();
		                }
		                axis.setScale();
		            });
		        }

		        chart.getMargins(); // #3098

		        if (hasCartesianSeries) {
		            // If one axis is dirty, all axes must be redrawn (#792, #2169)
		            axes.forEach(function (axis) {
		                if (axis.isDirty) {
		                    isDirtyBox = true;
		                }
		            });

		            // redraw axes
		            axes.forEach(function (axis) {

		                // Fire 'afterSetExtremes' only if extremes are set
		                var key = axis.min + ',' + axis.max;
		                if (axis.extKey !== key) { // #821, #4452
		                    axis.extKey = key;

		                    // prevent a recursive call to chart.redraw() (#1119)
		                    afterRedraw.push(function () {
		                        fireEvent(
		                            axis,
		                            'afterSetExtremes',
		                            extend(axis.eventArgs, axis.getExtremes())
		                        ); // #747, #751
		                        delete axis.eventArgs;
		                    });
		                }
		                if (isDirtyBox || hasStackedSeries) {
		                    axis.redraw();
		                }
		            });
		        }

		        // the plot areas size has changed
		        if (isDirtyBox) {
		            chart.drawChartBox();
		        }

		        // Fire an event before redrawing series, used by the boost module to
		        // clear previous series renderings.
		        fireEvent(chart, 'predraw');

		        // redraw affected series
		        series.forEach(function (serie) {
		            if ((isDirtyBox || serie.isDirty) && serie.visible) {
		                serie.redraw();
		            }
		            // Set it here, otherwise we will have unlimited 'updatedData' calls
		            // for a hidden series after setData(). Fixes #6012
		            serie.isDirtyData = false;
		        });

		        // move tooltip or reset
		        if (pointer) {
		            pointer.reset(true);
		        }

		        // redraw if canvas
		        renderer.draw();

		        // Fire the events
		        fireEvent(chart, 'redraw');
		        fireEvent(chart, 'render');

		        if (isHiddenChart) {
		            chart.temporaryDisplay(true);
		        }

		        // Fire callbacks that are put on hold until after the redraw
		        afterRedraw.forEach(function (callback) {
		            callback.call();
		        });
		    },

		    /**
		     * Get an axis, series or point object by `id` as given in the configuration
		     * options. Returns `undefined` if no item is found.
		     *
		     * @sample highcharts/plotoptions/series-id/
		     *         Get series by id
		     *
		     * @function Highcharts.Chart#get
		     *
		     * @param {string} id
		     *        The id as given in the configuration options.
		     *
		     * @return {Highcharts.Axis|Highcharts.Series|Highcharts.Point|undefined}
		     *         The retrieved item.
		     */
		    get: function (id) {

		        var ret,
		            series = this.series,
		            i;

		        function itemById(item) {
		            return item.id === id || (item.options && item.options.id === id);
		        }

		        ret =
		            // Search axes
		            find(this.axes, itemById) ||

		            // Search series
		            find(this.series, itemById);

		        // Search points
		        for (i = 0; !ret && i < series.length; i++) {
		            ret = find(series[i].points || [], itemById);
		        }

		        return ret;
		    },

		    /**
		     * Create the Axis instances based on the config options.
		     *
		     * @private
		     * @function Highcharts.Chart#getAxes
		     *
		     * @fires Highcharts.Chart#event:afterGetAxes
		     * @fires Highcharts.Chart#event:getAxes
		     */
		    getAxes: function () {
		        var chart = this,
		            options = this.options,
		            xAxisOptions = options.xAxis = splat(options.xAxis || {}),
		            yAxisOptions = options.yAxis = splat(options.yAxis || {}),
		            optionsArray;

		        fireEvent(this, 'getAxes');

		        // make sure the options are arrays and add some members
		        xAxisOptions.forEach(function (axis, i) {
		            axis.index = i;
		            axis.isX = true;
		        });

		        yAxisOptions.forEach(function (axis, i) {
		            axis.index = i;
		        });

		        // concatenate all axis options into one array
		        optionsArray = xAxisOptions.concat(yAxisOptions);

		        optionsArray.forEach(function (axisOptions) {
		            new Axis(chart, axisOptions); // eslint-disable-line no-new
		        });

		        fireEvent(this, 'afterGetAxes');
		    },


		    /**
		     * Returns an array of all currently selected points in the chart. Points
		     * can be selected by clicking or programmatically by the
		     * {@link Highcharts.Point#select}
		     * function.
		     *
		     * @sample highcharts/plotoptions/series-allowpointselect-line/
		     *         Get selected points
		     *
		     * @function Highcharts.Chart#getSelectedPoints
		     *
		     * @return {Array<Highcharts.Point>}
		     *         The currently selected points.
		     */
		    getSelectedPoints: function () {
		        var points = [];
		        this.series.forEach(function (serie) {
		            // series.data - for points outside of viewed range (#6445)
		            points = points.concat((serie.data || []).filter(function (point) {
		                return point.selected;
		            }));
		        });
		        return points;
		    },

		    /**
		     * Returns an array of all currently selected series in the chart. Series
		     * can be selected either programmatically by the
		     * {@link Highcharts.Series#select}
		     * function or by checking the checkbox next to the legend item if
		     * [series.showCheckBox](https://api.highcharts.com/highcharts/plotOptions.series.showCheckbox)
		     * is true.
		     *
		     * @sample highcharts/members/chart-getselectedseries/
		     *         Get selected series
		     *
		     * @function Highcharts.Chart#getSelectedSeries
		     *
		     * @return {Array<Highcharts.Series>}
		     *         The currently selected series.
		     */
		    getSelectedSeries: function () {
		        return this.series.filter(function (serie) {
		            return serie.selected;
		        });
		    },

		    /**
		     * Set a new title or subtitle for the chart.
		     *
		     * @sample highcharts/members/chart-settitle/
		     *         Set title text and styles
		     *
		     * @function Highcharts.Chart#setTitle
		     *
		     * @param {Highcharts.TitleOptions} titleOptions
		     *        New title options. The title text itself is set by the
		     *        `titleOptions.text` property.
		     *
		     * @param {Highcharts.SubtitleOptions} subtitleOptions
		     *        New subtitle options. The subtitle text itself is set by the
		     *        `subtitleOptions.text` property.
		     *
		     * @param {boolean} redraw
		     *        Whether to redraw the chart or wait for a later call to
		     *        `chart.redraw()`.
		     */
		    setTitle: function (titleOptions, subtitleOptions, redraw) {
		        var chart = this,
		            options = chart.options,
		            styledMode = chart.styledMode,
		            chartTitleOptions,
		            chartSubtitleOptions;

		        chartTitleOptions = options.title = merge(
		            // Default styles
		            !styledMode && {
		                style: {
		                    color: '#333333',
		                    fontSize: options.isStock ? '16px' : '18px' // #2944
		                }
		            },
		            options.title,
		            titleOptions
		        );
		        chartSubtitleOptions = options.subtitle = merge(
		            // Default styles
		            !styledMode && {
		                style: {
		                    color: '#666666'
		                }
		            },
		            options.subtitle,
		            subtitleOptions
		        );


		        // add title and subtitle

		        /**
		         * The chart title. The title has an `update` method that allows
		         * modifying the options directly or indirectly via
		         * `chart.update`.
		         *
		         * @sample highcharts/members/title-update/
		         *         Updating titles
		         *
		         * @name Highcharts.Chart#title
		         * @type {Highcharts.TitleObject}
		         */

		        /**
		         * The chart subtitle. The subtitle has an `update` method that
		         * allows modifying the options directly or indirectly via
		         * `chart.update`.
		         *
		         * @name Highcharts.Chart#subtitle
		         * @type {Highcharts.SubtitleObject}
		         */

		        [
		            ['title', titleOptions, chartTitleOptions],
		            ['subtitle', subtitleOptions, chartSubtitleOptions]
		        ].forEach(function (arr, i) {
		            var name = arr[0],
		                title = chart[name],
		                titleOptions = arr[1],
		                chartTitleOptions = arr[2];

		            if (title && titleOptions) {
		                chart[name] = title = title.destroy(); // remove old
		            }

		            if (chartTitleOptions && !title) {
		                chart[name] = chart.renderer.text(
		                    chartTitleOptions.text,
		                    0,
		                    0,
		                    chartTitleOptions.useHTML
		                )
		                .attr({
		                    align: chartTitleOptions.align,
		                    'class': 'highcharts-' + name,
		                    zIndex: chartTitleOptions.zIndex || 4
		                })
		                .add();

		                // Update methods, shortcut to Chart.setTitle
		                chart[name].update = function (o) {
		                    chart.setTitle(!i && o, i && o);
		                };

		                // Presentational
		                if (!styledMode) {
		                    chart[name].css(chartTitleOptions.style);
		                }

		            }
		        });
		        chart.layOutTitles(redraw);
		    },

		    /**
		     * Internal function to lay out the chart titles and cache the full offset
		     * height for use in `getMargins`. The result is stored in
		     * `this.titleOffset`.
		     *
		     * @private
		     * @function Highcharts.Chart#layOutTitles
		     *
		     * @param {boolean} [redraw=true]
		     */
		    layOutTitles: function (redraw) {
		        var titleOffset = 0,
		            requiresDirtyBox,
		            renderer = this.renderer,
		            spacingBox = this.spacingBox;

		        // Lay out the title and the subtitle respectively
		        ['title', 'subtitle'].forEach(function (key) {
		            var title = this[key],
		                titleOptions = this.options[key],
		                offset = key === 'title' ? -3 :
		                    // Floating subtitle (#6574)
		                    titleOptions.verticalAlign ? 0 : titleOffset + 2,
		                titleSize;

		            if (title) {

		                if (!this.styledMode) {
		                    titleSize = titleOptions.style.fontSize;
		                }
		                titleSize = renderer.fontMetrics(titleSize, title).b;
		                title
		                    .css({
		                        width: (titleOptions.width ||
		                            spacingBox.width + titleOptions.widthAdjust) + 'px'
		                    })
		                    .align(extend({
		                        y: offset + titleSize
		                    }, titleOptions), false, 'spacingBox');

		                if (!titleOptions.floating && !titleOptions.verticalAlign) {
		                    titleOffset = Math.ceil(
		                        titleOffset +
		                        // Skip the cache for HTML (#3481)
		                        title.getBBox(titleOptions.useHTML).height
		                    );
		                }
		            }
		        }, this);

		        requiresDirtyBox = this.titleOffset !== titleOffset;
		        this.titleOffset = titleOffset; // used in getMargins

		        if (!this.isDirtyBox && requiresDirtyBox) {
		            this.isDirtyBox = this.isDirtyLegend = requiresDirtyBox;
		            // Redraw if necessary (#2719, #2744)
		            if (this.hasRendered && pick(redraw, true) && this.isDirtyBox) {
		                this.redraw();
		            }
		        }
		    },

		    /**
		     * Internal function to get the chart width and height according to options
		     * and container size. Sets
		     * {@link Chart.chartWidth} and
		     * {@link Chart.chartHeight}.
		     *
		     * @function Highcharts.Chart#getChartSize
		     */
		    getChartSize: function () {
		        var chart = this,
		            optionsChart = chart.options.chart,
		            widthOption = optionsChart.width,
		            heightOption = optionsChart.height,
		            renderTo = chart.renderTo;

		        // Get inner width and height
		        if (!defined(widthOption)) {
		            chart.containerWidth = H.getStyle(renderTo, 'width');
		        }
		        if (!defined(heightOption)) {
		            chart.containerHeight = H.getStyle(renderTo, 'height');
		        }

		        /**
		         * The current pixel width of the chart.
		         *
		         * @name Highcharts.Chart#chartWidth
		         * @type {number}
		         */
		        chart.chartWidth = Math.max( // #1393
		            0,
		            widthOption || chart.containerWidth || 600 // #1460
		        );
		        /**
		         * The current pixel height of the chart.
		         *
		         * @name Highcharts.Chart#chartHeight
		         * @type {number}
		         */
		        chart.chartHeight = Math.max(
		            0,
		            H.relativeLength(
		                heightOption,
		                chart.chartWidth
		            ) ||
		            (chart.containerHeight > 1 ? chart.containerHeight : 400)
		        );
		    },

		    /**
		     * If the renderTo element has no offsetWidth, most likely one or more of
		     * its parents are hidden. Loop up the DOM tree to temporarily display the
		     * parents, then save the original display properties, and when the true
		     * size is retrieved, reset them. Used on first render and on redraws.
		     *
		     * @private
		     * @function Highcharts.Chart#temporaryDisplay
		     *
		     * @param {boolean} revert
		     *        Revert to the saved original styles.
		     */
		    temporaryDisplay: function (revert) {
		        var node = this.renderTo,
		            tempStyle;
		        if (!revert) {
		            while (node && node.style) {

		                // When rendering to a detached node, it needs to be temporarily
		                // attached in order to read styling and bounding boxes (#5783,
		                // #7024).
		                if (!doc.body.contains(node) && !node.parentNode) {
		                    node.hcOrigDetached = true;
		                    doc.body.appendChild(node);
		                }
		                if (
		                    H.getStyle(node, 'display', false) === 'none' ||
		                    node.hcOricDetached
		                ) {
		                    node.hcOrigStyle = {
		                        display: node.style.display,
		                        height: node.style.height,
		                        overflow: node.style.overflow
		                    };
		                    tempStyle = {
		                        display: 'block',
		                        overflow: 'hidden'
		                    };
		                    if (node !== this.renderTo) {
		                        tempStyle.height = 0;
		                    }

		                    H.css(node, tempStyle);

		                    // If it still doesn't have an offset width after setting
		                    // display to block, it probably has an !important priority
		                    // #2631, 6803
		                    if (!node.offsetWidth) {
		                        node.style.setProperty('display', 'block', 'important');
		                    }
		                }
		                node = node.parentNode;

		                if (node === doc.body) {
		                    break;
		                }
		            }
		        } else {
		            while (node && node.style) {
		                if (node.hcOrigStyle) {
		                    H.css(node, node.hcOrigStyle);
		                    delete node.hcOrigStyle;
		                }
		                if (node.hcOrigDetached) {
		                    doc.body.removeChild(node);
		                    node.hcOrigDetached = false;
		                }
		                node = node.parentNode;
		            }
		        }
		    },

		    /**
		     * Set the {@link Chart.container|chart container's} class name, in
		     * addition to `highcharts-container`.
		     *
		     * @function Highcharts.Chart#setClassName
		     *
		     * @param {string} className
		     */
		    setClassName: function (className) {
		        this.container.className = 'highcharts-container ' + (className || '');
		    },

		    /**
		     * Get the containing element, determine the size and create the inner
		     * container div to hold the chart.
		     *
		     * @private
		     * @function Highcharts.Chart#afterGetContainer
		     *
		     * @fires Highcharts.Chart#event:afterGetContainer
		     */
		    getContainer: function () {
		        var chart = this,
		            container,
		            options = chart.options,
		            optionsChart = options.chart,
		            chartWidth,
		            chartHeight,
		            renderTo = chart.renderTo,
		            indexAttrName = 'data-highcharts-chart',
		            oldChartIndex,
		            Ren,
		            containerId = H.uniqueKey(),
		            containerStyle,
		            key;

		        if (!renderTo) {
		            chart.renderTo = renderTo = optionsChart.renderTo;
		        }

		        if (isString(renderTo)) {
		            chart.renderTo = renderTo = doc.getElementById(renderTo);
		        }

		        // Display an error if the renderTo is wrong
		        if (!renderTo) {
		            H.error(13, true, chart);
		        }

		        // If the container already holds a chart, destroy it. The check for
		        // hasRendered is there because web pages that are saved to disk from
		        // the browser, will preserve the data-highcharts-chart attribute and
		        // the SVG contents, but not an interactive chart. So in this case,
		        // charts[oldChartIndex] will point to the wrong chart if any (#2609).
		        oldChartIndex = pInt(attr(renderTo, indexAttrName));
		        if (
		            isNumber(oldChartIndex) &&
		            charts[oldChartIndex] &&
		            charts[oldChartIndex].hasRendered
		        ) {
		            charts[oldChartIndex].destroy();
		        }

		        // Make a reference to the chart from the div
		        attr(renderTo, indexAttrName, chart.index);

		        // remove previous chart
		        renderTo.innerHTML = '';

		        // If the container doesn't have an offsetWidth, it has or is a child of
		        // a node that has display:none. We need to temporarily move it out to a
		        // visible state to determine the size, else the legend and tooltips
		        // won't render properly. The skipClone option is used in sparklines as
		        // a micro optimization, saving about 1-2 ms each chart.
		        if (!optionsChart.skipClone && !renderTo.offsetWidth) {
		            chart.temporaryDisplay();
		        }

		        // get the width and height
		        chart.getChartSize();
		        chartWidth = chart.chartWidth;
		        chartHeight = chart.chartHeight;

		        // Allow table cells and flex-boxes to shrink without the chart blocking
		        // them out (#6427)
		        css(renderTo, { overflow: 'hidden' });

		        // Create the inner container
		        if (!chart.styledMode) {
		            containerStyle = extend({
		                position: 'relative',
		                // needed for context menu (avoidscrollbars) and content
		                // overflow in IE
		                overflow: 'hidden',
		                width: chartWidth + 'px',
		                height: chartHeight + 'px',
		                textAlign: 'left',
		                lineHeight: 'normal', // #427
		                zIndex: 0, // #1072
		                '-webkit-tap-highlight-color': 'rgba(0,0,0,0)'
		            }, optionsChart.style);
		        }

		        /**
		         * The containing HTML element of the chart. The container is
		         * dynamically inserted into the element given as the `renderTo`
		         * parameter in the {@link Highcharts#chart} constructor.
		         *
		         * @name Highcharts.Chart#container
		         * @type {Highcharts.HTMLDOMElement}
		         */
		        container = createElement(
		            'div',
		            {
		                id: containerId
		            },
		            containerStyle,
		            renderTo
		        );
		        chart.container = container;

		        // cache the cursor (#1650)
		        chart._cursor = container.style.cursor;

		        // Initialize the renderer
		        Ren = H[optionsChart.renderer] || H.Renderer;

		        /**
		         * The renderer instance of the chart. Each chart instance has only one
		         * associated renderer.
		         *
		         * @name Highcharts.Chart#renderer
		         * @type {Highcharts.SVGRenderer}
		         */
		        chart.renderer = new Ren(
		            container,
		            chartWidth,
		            chartHeight,
		            null,
		            optionsChart.forExport,
		            options.exporting && options.exporting.allowHTML,
		            chart.styledMode
		        );


		        chart.setClassName(optionsChart.className);
		        if (!chart.styledMode) {
		            chart.renderer.setStyle(optionsChart.style);
		        } else {
		            // Initialize definitions
		            for (key in options.defs) {
		                this.renderer.definition(options.defs[key]);
		            }
		        }

		        // Add a reference to the charts index
		        chart.renderer.chartIndex = chart.index;

		        fireEvent(this, 'afterGetContainer');
		    },

		    /**
		     * Calculate margins by rendering axis labels in a preliminary position.
		     * Title, subtitle and legend have already been rendered at this stage, but
		     * will be moved into their final positions.
		     *
		     * @private
		     * @function Highcharts.Chart#getMargins
		     *
		     * @param {boolean} skipAxes
		     *
		     * @fires Highcharts.Chart#event:getMargins
		     */
		    getMargins: function (skipAxes) {
		        var chart = this,
		            spacing = chart.spacing,
		            margin = chart.margin,
		            titleOffset = chart.titleOffset;

		        chart.resetMargins();

		        // Adjust for title and subtitle
		        if (titleOffset && !defined(margin[0])) {
		            chart.plotTop = Math.max(
		                chart.plotTop,
		                titleOffset + chart.options.title.margin + spacing[0]
		            );
		        }

		        // Adjust for legend
		        if (chart.legend && chart.legend.display) {
		            chart.legend.adjustMargins(margin, spacing);
		        }

		        fireEvent(this, 'getMargins');

		        if (!skipAxes) {
		            this.getAxisMargins();
		        }
		    },

		    /**
		     * @private
		     * @function Highcharts.Chart#getAxisMargins
		     */
		    getAxisMargins: function () {

		        var chart = this,
		            // [top, right, bottom, left]
		            axisOffset = chart.axisOffset = [0, 0, 0, 0],
		            margin = chart.margin;

		        // pre-render axes to get labels offset width
		        if (chart.hasCartesianSeries) {
		            chart.axes.forEach(function (axis) {
		                if (axis.visible) {
		                    axis.getOffset();
		                }
		            });
		        }

		        // Add the axis offsets
		        marginNames.forEach(function (m, side) {
		            if (!defined(margin[side])) {
		                chart[m] += axisOffset[side];
		            }
		        });

		        chart.setChartSize();

		    },

		    /**
		     * Reflows the chart to its container. By default, the chart reflows
		     * automatically to its container following a `window.resize` event, as per
		     * the [chart.reflow](https://api.highcharts/highcharts/chart.reflow)
		     * option. However, there are no reliable events for div resize, so if the
		     * container is resized without a window resize event, this must be called
		     * explicitly.
		     *
		     * @sample highcharts/members/chart-reflow/
		     *         Resize div and reflow
		     * @sample highcharts/chart/events-container/
		     *         Pop up and reflow
		     *
		     * @function Highcharts.Chart#reflow
		     *
		     * @param {global.Event} [e]
		     *        Event arguments. Used primarily when the function is called
		     *        internally as a response to window resize.
		     */
		    reflow: function (e) {
		        var chart = this,
		            optionsChart = chart.options.chart,
		            renderTo = chart.renderTo,
		            hasUserSize = (
		                defined(optionsChart.width) &&
		                defined(optionsChart.height)
		            ),
		            width = optionsChart.width || H.getStyle(renderTo, 'width'),
		            height = optionsChart.height || H.getStyle(renderTo, 'height'),
		            target = e ? e.target : win;

		        // Width and height checks for display:none. Target is doc in IE8 and
		        // Opera, win in Firefox, Chrome and IE9.
		        if (
		            !hasUserSize &&
		            !chart.isPrinting &&
		            width &&
		            height &&
		            (target === win || target === doc)
		        ) {
		            if (
		                width !== chart.containerWidth ||
		                height !== chart.containerHeight
		            ) {
		                H.clearTimeout(chart.reflowTimeout);
		                // When called from window.resize, e is set, else it's called
		                // directly (#2224)
		                chart.reflowTimeout = syncTimeout(function () {
		                    // Set size, it may have been destroyed in the meantime
		                    // (#1257)
		                    if (chart.container) {
		                        chart.setSize(undefined, undefined, false);
		                    }
		                }, e ? 100 : 0);
		            }
		            chart.containerWidth = width;
		            chart.containerHeight = height;
		        }
		    },

		    /**
		     * Toggle the event handlers necessary for auto resizing, depending on the
		     * `chart.reflow` option.
		     *
		     * @private
		     * @function Highcharts.Chart#setReflow
		     *
		     * @param {boolean} reflow
		     */
		    setReflow: function (reflow) {

		        var chart = this;

		        if (reflow !== false && !this.unbindReflow) {
		            this.unbindReflow = addEvent(win, 'resize', function (e) {
		                chart.reflow(e);
		            });
		            addEvent(this, 'destroy', this.unbindReflow);

		        } else if (reflow === false && this.unbindReflow) {

		            // Unbind and unset
		            this.unbindReflow = this.unbindReflow();
		        }

		        // The following will add listeners to re-fit the chart before and after
		        // printing (#2284). However it only works in WebKit. Should have worked
		        // in Firefox, but not supported in IE.
		        /*
		        if (win.matchMedia) {
		            win.matchMedia('print').addListener(function reflow() {
		                chart.reflow();
		            });
		        }
		        //*/
		    },

		    /**
		     * Resize the chart to a given width and height. In order to set the width
		     * only, the height argument may be skipped. To set the height only, pass
		     * `undefined` for the width.
		     *
		     * @sample highcharts/members/chart-setsize-button/
		     *         Test resizing from buttons
		     * @sample highcharts/members/chart-setsize-jquery-resizable/
		     *         Add a jQuery UI resizable
		     * @sample stock/members/chart-setsize/
		     *         Highstock with UI resizable
		     *
		     * @function Highcharts.Chart#setSize
		     *
		     * @param {number|null} [width]
		     *        The new pixel width of the chart. Since v4.2.6, the argument can
		     *        be `undefined` in order to preserve the current value (when
		     *        setting height only), or `null` to adapt to the width of the
		     *        containing element.
		     *
		     * @param {number|null} [height]
		     *        The new pixel height of the chart. Since v4.2.6, the argument can
		     *        be `undefined` in order to preserve the current value, or `null`
		     *        in order to adapt to the height of the containing element.
		     *
		     * @param {Highcharts.AnimationOptionsObject} [animation=true]
		     *        Whether and how to apply animation.
		     *
		     * @fires Highcharts.Chart#event:endResize
		     * @fires Highcharts.Chart#event:resize
		     */
		    setSize: function (width, height, animation) {
		        var chart = this,
		            renderer = chart.renderer,
		            globalAnimation;

		        // Handle the isResizing counter
		        chart.isResizing += 1;

		        // set the animation for the current process
		        H.setAnimation(animation, chart);

		        chart.oldChartHeight = chart.chartHeight;
		        chart.oldChartWidth = chart.chartWidth;
		        if (width !== undefined) {
		            chart.options.chart.width = width;
		        }
		        if (height !== undefined) {
		            chart.options.chart.height = height;
		        }
		        chart.getChartSize();

		        // Resize the container with the global animation applied if enabled
		        // (#2503)
		        if (!chart.styledMode) {
		            globalAnimation = renderer.globalAnimation;
		            (globalAnimation ? animate : css)(chart.container, {
		                width: chart.chartWidth + 'px',
		                height: chart.chartHeight + 'px'
		            }, globalAnimation);
		        }

		        chart.setChartSize(true);
		        renderer.setSize(chart.chartWidth, chart.chartHeight, animation);

		        // handle axes
		        chart.axes.forEach(function (axis) {
		            axis.isDirty = true;
		            axis.setScale();
		        });

		        chart.isDirtyLegend = true; // force legend redraw
		        chart.isDirtyBox = true; // force redraw of plot and chart border

		        chart.layOutTitles(); // #2857
		        chart.getMargins();

		        chart.redraw(animation);


		        chart.oldChartHeight = null;
		        fireEvent(chart, 'resize');

		        // Fire endResize and set isResizing back. If animation is disabled,
		        // fire without delay
		        syncTimeout(function () {
		            if (chart) {
		                fireEvent(chart, 'endResize', null, function () {
		                    chart.isResizing -= 1;
		                });
		            }
		        }, animObject(globalAnimation).duration);
		    },

		    /**
		     * Set the public chart properties. This is done before and after the
		     * pre-render to determine margin sizes.
		     *
		     * @private
		     * @function Highcharts.Chart#setChartSize
		     *
		     * @param {boolean} skipAxes
		     *
		     * @fires Highcharts.Chart#event:afterSetChartSize
		     */
		    setChartSize: function (skipAxes) {
		        var chart = this,
		            inverted = chart.inverted,
		            renderer = chart.renderer,
		            chartWidth = chart.chartWidth,
		            chartHeight = chart.chartHeight,
		            optionsChart = chart.options.chart,
		            spacing = chart.spacing,
		            clipOffset = chart.clipOffset,
		            clipX,
		            clipY,
		            plotLeft,
		            plotTop,
		            plotWidth,
		            plotHeight,
		            plotBorderWidth;

		        /**
		         * The current left position of the plot area in pixels.
		         *
		         * @name Highcharts.Chart#plotLeft
		         * @type {number}
		         */
		        chart.plotLeft = plotLeft = Math.round(chart.plotLeft);

		        /**
		         * The current top position of the plot area in pixels.
		         *
		         * @name Highcharts.Chart#plotTop
		         * @type {number}
		         */
		        chart.plotTop = plotTop = Math.round(chart.plotTop);

		        /**
		         * The current width of the plot area in pixels.
		         *
		         * @name Highcharts.Chart#plotWidth
		         * @type {number}
		         */
		        chart.plotWidth = plotWidth = Math.max(
		            0,
		            Math.round(chartWidth - plotLeft - chart.marginRight)
		        );

		        /**
		         * The current height of the plot area in pixels.
		         *
		         * @name Highcharts.Chart#plotHeight
		         * @type {number}
		         */
		        chart.plotHeight = plotHeight = Math.max(
		            0,
		            Math.round(chartHeight - plotTop - chart.marginBottom)
		        );

		        chart.plotSizeX = inverted ? plotHeight : plotWidth;
		        chart.plotSizeY = inverted ? plotWidth : plotHeight;

		        chart.plotBorderWidth = optionsChart.plotBorderWidth || 0;

		        // Set boxes used for alignment
		        chart.spacingBox = renderer.spacingBox = {
		            x: spacing[3],
		            y: spacing[0],
		            width: chartWidth - spacing[3] - spacing[1],
		            height: chartHeight - spacing[0] - spacing[2]
		        };
		        chart.plotBox = renderer.plotBox = {
		            x: plotLeft,
		            y: plotTop,
		            width: plotWidth,
		            height: plotHeight
		        };

		        plotBorderWidth = 2 * Math.floor(chart.plotBorderWidth / 2);
		        clipX = Math.ceil(Math.max(plotBorderWidth, clipOffset[3]) / 2);
		        clipY = Math.ceil(Math.max(plotBorderWidth, clipOffset[0]) / 2);
		        chart.clipBox = {
		            x: clipX,
		            y: clipY,
		            width: Math.floor(
		                chart.plotSizeX -
		                Math.max(plotBorderWidth, clipOffset[1]) / 2 -
		                clipX
		            ),
		            height: Math.max(
		                0,
		                Math.floor(
		                    chart.plotSizeY -
		                    Math.max(plotBorderWidth, clipOffset[2]) / 2 -
		                    clipY
		                )
		            )
		        };

		        if (!skipAxes) {
		            chart.axes.forEach(function (axis) {
		                axis.setAxisSize();
		                axis.setAxisTranslation();
		            });
		        }

		        fireEvent(chart, 'afterSetChartSize', { skipAxes: skipAxes });
		    },

		    /**
		     * Initial margins before auto size margins are applied.
		     *
		     * @private
		     * @function Highcharts.Chart#resetMargins
		     */
		    resetMargins: function () {

		        fireEvent(this, 'resetMargins');

		        var chart = this,
		            chartOptions = chart.options.chart;

		        // Create margin and spacing array
		        ['margin', 'spacing'].forEach(function splashArrays(target) {
		            var value = chartOptions[target],
		                values = isObject(value) ? value : [value, value, value, value];

		            [
		                'Top',
		                'Right',
		                'Bottom',
		                'Left'
		            ].forEach(function (sideName, side) {
		                chart[target][side] = pick(
		                    chartOptions[target + sideName],
		                    values[side]
		                );
		            });
		        });

		        // Set margin names like chart.plotTop, chart.plotLeft,
		        // chart.marginRight, chart.marginBottom.
		        marginNames.forEach(function (m, side) {
		            chart[m] = pick(chart.margin[side], chart.spacing[side]);
		        });
		        chart.axisOffset = [0, 0, 0, 0]; // top, right, bottom, left
		        chart.clipOffset = [0, 0, 0, 0];
		    },

		    /**
		     * Internal function to draw or redraw the borders and backgrounds for chart
		     * and plot area.
		     *
		     * @private
		     * @function Highcharts.Chart#drawChartBox
		     *
		     * @fires Highcharts.Chart#event:afterDrawChartBox
		     */
		    drawChartBox: function () {
		        var chart = this,
		            optionsChart = chart.options.chart,
		            renderer = chart.renderer,
		            chartWidth = chart.chartWidth,
		            chartHeight = chart.chartHeight,
		            chartBackground = chart.chartBackground,
		            plotBackground = chart.plotBackground,
		            plotBorder = chart.plotBorder,
		            chartBorderWidth,
		            styledMode = chart.styledMode,
		            plotBGImage = chart.plotBGImage,
		            chartBackgroundColor = optionsChart.backgroundColor,
		            plotBackgroundColor = optionsChart.plotBackgroundColor,
		            plotBackgroundImage = optionsChart.plotBackgroundImage,
		            mgn,
		            bgAttr,
		            plotLeft = chart.plotLeft,
		            plotTop = chart.plotTop,
		            plotWidth = chart.plotWidth,
		            plotHeight = chart.plotHeight,
		            plotBox = chart.plotBox,
		            clipRect = chart.clipRect,
		            clipBox = chart.clipBox,
		            verb = 'animate';

		        // Chart area
		        if (!chartBackground) {
		            chart.chartBackground = chartBackground = renderer.rect()
		                .addClass('highcharts-background')
		                .add();
		            verb = 'attr';
		        }

		        if (!styledMode) {
		            // Presentational
		            chartBorderWidth = optionsChart.borderWidth || 0;
		            mgn = chartBorderWidth + (optionsChart.shadow ? 8 : 0);

		            bgAttr = {
		                fill: chartBackgroundColor || 'none'
		            };

		            if (chartBorderWidth || chartBackground['stroke-width']) { // #980
		                bgAttr.stroke = optionsChart.borderColor;
		                bgAttr['stroke-width'] = chartBorderWidth;
		            }
		            chartBackground
		                .attr(bgAttr)
		                .shadow(optionsChart.shadow);
		        } else {
		            chartBorderWidth = mgn = chartBackground.strokeWidth();
		        }


		        chartBackground[verb]({
		            x: mgn / 2,
		            y: mgn / 2,
		            width: chartWidth - mgn - chartBorderWidth % 2,
		            height: chartHeight - mgn - chartBorderWidth % 2,
		            r: optionsChart.borderRadius
		        });

		        // Plot background
		        verb = 'animate';
		        if (!plotBackground) {
		            verb = 'attr';
		            chart.plotBackground = plotBackground = renderer.rect()
		                .addClass('highcharts-plot-background')
		                .add();
		        }
		        plotBackground[verb](plotBox);

		        if (!styledMode) {
		            // Presentational attributes for the background
		            plotBackground
		                .attr({
		                    fill: plotBackgroundColor || 'none'
		                })
		                .shadow(optionsChart.plotShadow);

		            // Create the background image
		            if (plotBackgroundImage) {
		                if (!plotBGImage) {
		                    chart.plotBGImage = renderer.image(
		                        plotBackgroundImage,
		                        plotLeft,
		                        plotTop,
		                        plotWidth,
		                        plotHeight
		                    ).add();
		                } else {
		                    plotBGImage.animate(plotBox);
		                }
		            }
		        }

		        // Plot clip
		        if (!clipRect) {
		            chart.clipRect = renderer.clipRect(clipBox);
		        } else {
		            clipRect.animate({
		                width: clipBox.width,
		                height: clipBox.height
		            });
		        }

		        // Plot area border
		        verb = 'animate';
		        if (!plotBorder) {
		            verb = 'attr';
		            chart.plotBorder = plotBorder = renderer.rect()
		                .addClass('highcharts-plot-border')
		                .attr({
		                    zIndex: 1 // Above the grid
		                })
		                .add();
		        }

		        if (!styledMode) {
		            // Presentational
		            plotBorder.attr({
		                stroke: optionsChart.plotBorderColor,
		                'stroke-width': optionsChart.plotBorderWidth || 0,
		                fill: 'none'
		            });
		        }

		        plotBorder[verb](plotBorder.crisp({
		            x: plotLeft,
		            y: plotTop,
		            width: plotWidth,
		            height: plotHeight
		        }, -plotBorder.strokeWidth())); // #3282 plotBorder should be negative;

		        // reset
		        chart.isDirtyBox = false;

		        fireEvent(this, 'afterDrawChartBox');
		    },

		    /**
		     * Detect whether a certain chart property is needed based on inspecting its
		     * options and series. This mainly applies to the chart.inverted property,
		     * and in extensions to the chart.angular and chart.polar properties.
		     *
		     * @private
		     * @function Highcharts.Chart#propFromSeries
		     */
		    propFromSeries: function () {
		        var chart = this,
		            optionsChart = chart.options.chart,
		            klass,
		            seriesOptions = chart.options.series,
		            i,
		            value;


		        ['inverted', 'angular', 'polar'].forEach(function (key) {

		            // The default series type's class
		            klass = seriesTypes[optionsChart.type ||
		                optionsChart.defaultSeriesType];

		            // Get the value from available chart-wide properties
		            value =
		                optionsChart[key] || // It is set in the options
		                (klass && klass.prototype[key]); // The default series class
		                    // requires it

		            // 4. Check if any the chart's series require it
		            i = seriesOptions && seriesOptions.length;
		            while (!value && i--) {
		                klass = seriesTypes[seriesOptions[i].type];
		                if (klass && klass.prototype[key]) {
		                    value = true;
		                }
		            }

		            // Set the chart property
		            chart[key] = value;
		        });

		    },

		    /**
		     * Internal function to link two or more series together, based on the
		     * `linkedTo` option. This is done from `Chart.render`, and after
		     * `Chart.addSeries` and `Series.remove`.
		     *
		     * @private
		     * @function Highcharts.Chart#linkSeries
		     *
		     * @fires Highcharts.Chart#event:afterLinkSeries
		     */
		    linkSeries: function () {
		        var chart = this,
		            chartSeries = chart.series;

		        // Reset links
		        chartSeries.forEach(function (series) {
		            series.linkedSeries.length = 0;
		        });

		        // Apply new links
		        chartSeries.forEach(function (series) {
		            var linkedTo = series.options.linkedTo;
		            if (isString(linkedTo)) {
		                if (linkedTo === ':previous') {
		                    linkedTo = chart.series[series.index - 1];
		                } else {
		                    linkedTo = chart.get(linkedTo);
		                }
		                // #3341 avoid mutual linking
		                if (linkedTo && linkedTo.linkedParent !== series) {
		                    linkedTo.linkedSeries.push(series);
		                    series.linkedParent = linkedTo;
		                    series.visible = pick(
		                        series.options.visible,
		                        linkedTo.options.visible,
		                        series.visible
		                    ); // #3879
		                }
		            }
		        });

		        fireEvent(this, 'afterLinkSeries');
		    },

		    /**
		     * Render series for the chart.
		     *
		     * @private
		     * @function Highcharts.Chart#renderSeries
		     */
		    renderSeries: function () {
		        this.series.forEach(function (serie) {
		            serie.translate();
		            serie.render();
		        });
		    },

		    /**
		     * Render labels for the chart.
		     *
		     * @private
		     * @function Highcharts.Chart#renderLabels
		     */
		    renderLabels: function () {
		        var chart = this,
		            labels = chart.options.labels;
		        if (labels.items) {
		            labels.items.forEach(function (label) {
		                var style = extend(labels.style, label.style),
		                    x = pInt(style.left) + chart.plotLeft,
		                    y = pInt(style.top) + chart.plotTop + 12;

		                // delete to prevent rewriting in IE
		                delete style.left;
		                delete style.top;

		                chart.renderer.text(
		                    label.html,
		                    x,
		                    y
		                )
		                .attr({ zIndex: 2 })
		                .css(style)
		                .add();

		            });
		        }
		    },

		    /**
		     * Render all graphics for the chart. Runs internally on initialization.
		     *
		     * @private
		     * @function Highcharts.Chart#render
		     */
		    render: function () {
		        var chart = this,
		            axes = chart.axes,
		            renderer = chart.renderer,
		            options = chart.options,
		            tempWidth,
		            tempHeight,
		            redoHorizontal,
		            redoVertical;

		        // Title
		        chart.setTitle();

		        /**
		         * The overview of the chart's series.
		         *
		         * @name Highcharts.Chart#legend
		         * @type {Highcharts.Legend}
		         */
		        chart.legend = new Legend(chart, options.legend);

		        // Get stacks
		        if (chart.getStacks) {
		            chart.getStacks();
		        }

		        // Get chart margins
		        chart.getMargins(true);
		        chart.setChartSize();

		        // Record preliminary dimensions for later comparison
		        tempWidth = chart.plotWidth;
		        // 21 is the most common correction for X axis labels
		        // use Math.max to prevent negative plotHeight
		        tempHeight = chart.plotHeight = Math.max(chart.plotHeight - 21, 0);

		        // Get margins by pre-rendering axes
		        axes.forEach(function (axis) {
		            axis.setScale();
		        });
		        chart.getAxisMargins();

		        // If the plot area size has changed significantly, calculate tick
		        // positions again
		        redoHorizontal = tempWidth / chart.plotWidth > 1.1;
		        // Height is more sensitive, use lower threshold
		        redoVertical = tempHeight / chart.plotHeight > 1.05;

		        if (redoHorizontal || redoVertical) {

		            axes.forEach(function (axis) {
		                if (
		                    (axis.horiz && redoHorizontal) ||
		                    (!axis.horiz && redoVertical)
		                ) {
		                    // update to reflect the new margins
		                    axis.setTickInterval(true);
		                }
		            });
		            chart.getMargins(); // second pass to check for new labels
		        }

		        // Draw the borders and backgrounds
		        chart.drawChartBox();


		        // Axes
		        if (chart.hasCartesianSeries) {
		            axes.forEach(function (axis) {
		                if (axis.visible) {
		                    axis.render();
		                }
		            });
		        }

		        // The series
		        if (!chart.seriesGroup) {
		            chart.seriesGroup = renderer.g('series-group')
		                .attr({ zIndex: 3 })
		                .add();
		        }
		        chart.renderSeries();

		        // Labels
		        chart.renderLabels();

		        // Credits
		        chart.addCredits();

		        // Handle responsiveness
		        if (chart.setResponsive) {
		            chart.setResponsive();
		        }

		        // Set flag
		        chart.hasRendered = true;

		    },

		    /**
		     * Set a new credits label for the chart.
		     *
		     * @sample highcharts/credits/credits-update/
		     *         Add and update credits
		     *
		     * @function Highcharts.Chart#addCredits
		     *
		     * @param {Highcharts.CreditsOptions} options
		     *        A configuration object for the new credits.
		     */
		    addCredits: function (credits) {
		        var chart = this;

		        credits = merge(true, this.options.credits, credits);
		        if (credits.enabled && !this.credits) {

		            /**
		             * The chart's credits label. The label has an `update` method that
		             * allows setting new options as per the
		             * [credits options set](https://api.highcharts.com/highcharts/credits).
		             *
		             * @name Highcharts.Chart#credits
		             * @type {Highcharts.SVGElement}
		             */
		            this.credits = this.renderer.text(
		                credits.text + (this.mapCredits || ''),
		                0,
		                0
		            )
		            .addClass('highcharts-credits')
		            .on('click', function () {
		                if (credits.href) {
		                    win.location.href = credits.href;
		                }
		            })
		            .attr({
		                align: credits.position.align,
		                zIndex: 8
		            });


		            if (!chart.styledMode) {
		                this.credits.css(credits.style);
		            }

		            this.credits
		                .add()
		                .align(credits.position);

		            // Dynamically update
		            this.credits.update = function (options) {
		                chart.credits = chart.credits.destroy();
		                chart.addCredits(options);
		            };
		        }
		    },

		    /**
		     * Remove the chart and purge memory. This method is called internally
		     * before adding a second chart into the same container, as well as on
		     * window unload to prevent leaks.
		     *
		     * @sample highcharts/members/chart-destroy/
		     *         Destroy the chart from a button
		     * @sample stock/members/chart-destroy/
		     *         Destroy with Highstock
		     *
		     * @function Highcharts.Chart#destroy
		     *
		     * @fires Highcharts.Chart#event:destroy
		     */
		    destroy: function () {
		        var chart = this,
		            axes = chart.axes,
		            series = chart.series,
		            container = chart.container,
		            i,
		            parentNode = container && container.parentNode;

		        // fire the chart.destoy event
		        fireEvent(chart, 'destroy');

		        // Delete the chart from charts lookup array
		        if (chart.renderer.forExport) {
		            H.erase(charts, chart); // #6569
		        } else {
		            charts[chart.index] = undefined;
		        }
		        H.chartCount--;
		        chart.renderTo.removeAttribute('data-highcharts-chart');

		        // remove events
		        removeEvent(chart);

		        // ==== Destroy collections:
		        // Destroy axes
		        i = axes.length;
		        while (i--) {
		            axes[i] = axes[i].destroy();
		        }

		        // Destroy scroller & scroller series before destroying base series
		        if (this.scroller && this.scroller.destroy) {
		            this.scroller.destroy();
		        }

		        // Destroy each series
		        i = series.length;
		        while (i--) {
		            series[i] = series[i].destroy();
		        }

		        // ==== Destroy chart properties:
		        [
		            'title', 'subtitle', 'chartBackground', 'plotBackground',
		            'plotBGImage', 'plotBorder', 'seriesGroup', 'clipRect', 'credits',
		            'pointer', 'rangeSelector', 'legend', 'resetZoomButton', 'tooltip',
		            'renderer'
		        ].forEach(function (name) {
		            var prop = chart[name];

		            if (prop && prop.destroy) {
		                chart[name] = prop.destroy();
		            }
		        });

		        // Remove container and all SVG, check container as it can break in IE
		        // when destroyed before finished loading
		        if (container) {
		            container.innerHTML = '';
		            removeEvent(container);
		            if (parentNode) {
		                discardElement(container);
		            }

		        }

		        // clean it all up
		        objectEach(chart, function (val, key) {
		            delete chart[key];
		        });

		    },

		    /**
		     * Prepare for first rendering after all data are loaded.
		     *
		     * @private
		     * @function Highcharts.Chart#firstRender
		     *
		     * @fires Highcharts.Chart#event:beforeRender
		     */
		    firstRender: function () {
		        var chart = this,
		            options = chart.options;

		        // Hook for oldIE to check whether the chart is ready to render
		        if (chart.isReadyToRender && !chart.isReadyToRender()) {
		            return;
		        }

		        // Create the container
		        chart.getContainer();

		        chart.resetMargins();
		        chart.setChartSize();

		        // Set the common chart properties (mainly invert) from the given series
		        chart.propFromSeries();

		        // get axes
		        chart.getAxes();

		        // Initialize the series
		        (H.isArray(options.series) ? options.series : []).forEach( // #9680
		            function (serieOptions) {
		                chart.initSeries(serieOptions);
		            }
		        );

		        chart.linkSeries();

		        // Run an event after axes and series are initialized, but before
		        // render. At this stage, the series data is indexed and cached in the
		        // xData and yData arrays, so we can access those before rendering. Used
		        // in Highstock.
		        fireEvent(chart, 'beforeRender');

		        // depends on inverted and on margins being set
		        if (Pointer) {

		            /**
		             * The Pointer that keeps track of mouse and touch interaction.
		             *
		             * @memberof Highcharts.Chart
		             * @name pointer
		             * @type {Highcharts.Pointer}
		             * @instance
		             */
		            chart.pointer = new Pointer(chart, options);
		        }

		        chart.render();

		        // Fire the load event if there are no external images
		        if (!chart.renderer.imgCount && chart.onload) {
		            chart.onload();
		        }

		        // If the chart was rendered outside the top container, put it back in
		        // (#3679)
		        chart.temporaryDisplay(true);

		    },

		    /**
		     * Internal function that runs on chart load, async if any images are loaded
		     * in the chart. Runs the callbacks and triggers the `load` and `render`
		     * events.
		     *
		     * @private
		     * @function Highcharts.Chart#onload
		     *
		     * @fires Highcharts.Chart#event:load
		     * @fires Highcharts.Chart#event:render
		     */
		    onload: function () {

		        // Run callbacks
		        [this.callback].concat(this.callbacks).forEach(function (fn) {
		            // Chart destroyed in its own callback (#3600)
		            if (fn && this.index !== undefined) {
		                fn.apply(this, [this]);
		            }
		        }, this);

		        fireEvent(this, 'load');
		        fireEvent(this, 'render');


		        // Set up auto resize, check for not destroyed (#6068)
		        if (defined(this.index)) {
		            this.setReflow(this.options.chart.reflow);
		        }

		        // Don't run again
		        this.onload = null;
		    }

		}); // end Chart

	}(Highcharts));
	(function (H) {
		/* *
		 *
		 *  (c) 2010-2018 Torstein Honsi
		 *
		 *  License: www.highcharts.com/license
		 *
		 * */



		var addEvent = H.addEvent,
		    Axis = H.Axis,
		    Chart = H.Chart,
		    color = H.color,
		    ColorAxis,
		    extend = H.extend,
		    isNumber = H.isNumber,
		    Legend = H.Legend,
		    LegendSymbolMixin = H.LegendSymbolMixin,
		    noop = H.noop,
		    merge = H.merge,
		    pick = H.pick;

		// If ColorAxis already exists, we may be loading the heatmap module on top of
		// Highmaps.
		if (!H.ColorAxis) {

		    /**
		     * The ColorAxis object for inclusion in gradient legends.
		     *
		     * @private
		     * @class
		     * @name Highcharts.ColorAxis
		     *
		     * @augments Highcharts.Axis
		     */
		    ColorAxis = H.ColorAxis = function () {
		        this.init.apply(this, arguments);
		    };

		    extend(ColorAxis.prototype, Axis.prototype);

		    extend(ColorAxis.prototype, {

		        /**
		         * A color axis for choropleth maps and heat maps. Visually, the color
		         * axis will appear as a gradient or as separate items inside the
		         * legend, depending on whether the axis is scalar or based on data
		         * classes.
		         *
		         * For supported color formats, see the
		         * [docs article about colors](https://www.highcharts.com/docs/chart-design-and-style/colors).
		         *
		         * A scalar color axis is represented by a gradient. The colors either
		         * range between the [minColor](#colorAxis.minColor) and the
		         * [maxColor](#colorAxis.maxColor), or for more fine grained control the
		         * colors can be defined in [stops](#colorAxis.stops). Often times, the
		         * color axis needs to be adjusted to get the right color spread for the
		         * data. In addition to stops, consider using a logarithmic
		         * [axis type](#colorAxis.type), or setting [min](#colorAxis.min) and
		         * [max](#colorAxis.max) to avoid the colors being determined by
		         * outliers.
		         *
		         * When [dataClasses](#colorAxis.dataClasses) are used, the ranges are
		         * subdivided into separate classes like categories based on their
		         * values. This can be used for ranges between two values, but also for
		         * a true category. However, when your data is categorized, it may be as
		         * convenient to add each category to a separate series.
		         *
		         * See [the Axis object](/class-reference/Highcharts.Axis) for
		         * programmatic access to the axis.
		         *
		         * @extends      xAxis
		         * @excluding    allowDecimals, alternateGridColor, breaks, categories,
		         *               crosshair, dateTimeLabelFormats, lineWidth, linkedTo,
		         *               maxZoom, minRange, minTickInterval, offset, opposite,
		         *               plotBands, plotLines, showEmpty, title
		         * @product      highcharts highmaps
		         * @optionparent colorAxis
		         */
		        defaultColorAxisOptions: {

		            /**
		             * Whether to allow decimals on the color axis.
		             * @type      {boolean}
		             * @default   true
		             * @product   highcharts highmaps
		             * @apioption colorAxis.allowDecimals
		             */

		            /**
		             * Determines how to set each data class' color if no individual
		             * color is set. The default value, `tween`, computes intermediate
		             * colors between `minColor` and `maxColor`. The other possible
		             * value, `category`, pulls colors from the global or chart specific
		             * [colors](#colors) array.
		             *
		             * @sample {highmaps} maps/coloraxis/dataclasscolor/
		             *         Category colors
		             *
		             * @type       {string}
		             * @default    tween
		             * @product    highcharts highmaps
		             * @validvalue ["tween", "category"]
		             * @apioption  colorAxis.dataClassColor
		             */

		            /**
		             * An array of data classes or ranges for the choropleth map. If
		             * none given, the color axis is scalar and values are distributed
		             * as a gradient between the minimum and maximum colors.
		             *
		             * @sample {highmaps} maps/demo/data-class-ranges/
		             *         Multiple ranges
		             *
		             * @sample {highmaps} maps/demo/data-class-two-ranges/
		             *         Two ranges
		             *
		             * @type      {Array<*>}
		             * @product   highcharts highmaps
		             * @apioption colorAxis.dataClasses
		             */

		            /**
		             * The color of each data class. If not set, the color is pulled
		             * from the global or chart-specific [colors](#colors) array. In
		             * styled mode, this option is ignored. Instead, use colors defined
		             * in CSS.
		             *
		             * @sample {highmaps} maps/demo/data-class-two-ranges/
		             *         Explicit colors
		             *
		             * @type      {Highcharts.ColorString}
		             * @product   highcharts highmaps
		             * @apioption colorAxis.dataClasses.color
		             */

		            /**
		             * The start of the value range that the data class represents,
		             * relating to the point value.
		             *
		             * The range of each `dataClass` is closed in both ends, but can be
		             * overridden by the next `dataClass`.
		             *
		             * @type      {number}
		             * @product   highcharts highmaps
		             * @apioption colorAxis.dataClasses.from
		             */

		            /**
		             * The name of the data class as it appears in the legend.
		             * If no name is given, it is automatically created based on the
		             * `from` and `to` values. For full programmatic control,
		             * [legend.labelFormatter](#legend.labelFormatter) can be used.
		             * In the formatter, `this.from` and `this.to` can be accessed.
		             *
		             * @sample {highmaps} maps/coloraxis/dataclasses-name/
		             *         Named data classes
		             *
		             * @sample {highmaps} maps/coloraxis/dataclasses-labelformatter/
		             *         Formatted data classes
		             *
		             * @type      {string}
		             * @product   highcharts highmaps
		             * @apioption colorAxis.dataClasses.name
		             */

		            /**
		             * The end of the value range that the data class represents,
		             * relating to the point value.
		             *
		             * The range of each `dataClass` is closed in both ends, but can be
		             * overridden by the next `dataClass`.
		             *
		             * @type      {number}
		             * @product   highcharts highmaps
		             * @apioption colorAxis.dataClasses.to
		             */

		            /** @ignore-option */
		            lineWidth: 0,

		            /**
		             * Padding of the min value relative to the length of the axis. A
		             * padding of 0.05 will make a 100px axis 5px longer.
		             *
		             * @product highcharts highmaps
		             */
		            minPadding: 0,

		            /**
		             * The maximum value of the axis in terms of map point values. If
		             * `null`, the max value is automatically calculated. If the
		             * `endOnTick` option is true, the max value might be rounded up.
		             *
		             * @sample {highmaps} maps/coloraxis/gridlines/
		             *         Explicit min and max to reduce the effect of outliers
		             *
		             * @type      {number}
		             * @product   highcharts highmaps
		             * @apioption colorAxis.max
		             */

		            /**
		             * The minimum value of the axis in terms of map point values. If
		             * `null`, the min value is automatically calculated. If the
		             * `startOnTick` option is true, the min value might be rounded
		             * down.
		             *
		             * @sample {highmaps} maps/coloraxis/gridlines/
		             *         Explicit min and max to reduce the effect of outliers
		             *
		             * @type      {number}
		             * @product   highcharts highmaps
		             * @apioption colorAxis.min
		             */

		            /**
		             * Padding of the max value relative to the length of the axis. A
		             * padding of 0.05 will make a 100px axis 5px longer.
		             *
		             * @product highcharts highmaps
		             */
		            maxPadding: 0,

		            /**
		             * Color of the grid lines extending from the axis across the
		             * gradient.
		             *
		             * @sample {highmaps} maps/coloraxis/gridlines/
		             *         Grid lines demonstrated
		             *
		             * @type      {Highcharts.ColorString}
		             * @default   #e6e6e6
		             * @product   highcharts highmaps
		             * @apioption colorAxis.gridLineColor
		             */

		            /**
		             * The width of the grid lines extending from the axis across the
		             * gradient of a scalar color axis.
		             *
		             * @sample {highmaps} maps/coloraxis/gridlines/
		             *         Grid lines demonstrated
		             *
		             * @product highcharts highmaps
		             */
		            gridLineWidth: 1,

		            /**
		             * The interval of the tick marks in axis units. When `null`, the
		             * tick interval is computed to approximately follow the
		             * `tickPixelInterval`.
		             *
		             * @type      {number}
		             * @product   highcharts highmaps
		             * @apioption colorAxis.tickInterval
		             */

		            /**
		             * If [tickInterval](#colorAxis.tickInterval) is `null` this option
		             * sets the approximate pixel interval of the tick marks.
		             *
		             * @product highcharts highmaps
		             */
		            tickPixelInterval: 72,

		            /**
		             * Whether to force the axis to start on a tick. Use this option
		             * with the `maxPadding` option to control the axis start.
		             *
		             * @product highcharts highmaps
		             */
		            startOnTick: true,

		            /**
		             * Whether to force the axis to end on a tick. Use this option with
		             * the [maxPadding](#colorAxis.maxPadding) option to control the
		             * axis end.
		             *
		             * @product highcharts highmaps
		             */
		            endOnTick: true,

		            /** @ignore */
		            offset: 0,

		            /**
		             * The triangular marker on a scalar color axis that points to the
		             * value of the hovered area. To disable the marker, set
		             * `marker: null`.
		             *
		             * @sample {highmaps} maps/coloraxis/marker/
		             *         Black marker
		             *
		             * @product highcharts highmaps
		             */
		            marker: {

		                /**
		                 * Animation for the marker as it moves between values. Set to
		                 * `false` to disable animation. Defaults to `{ duration: 50 }`.
		                 *
		                 * @type    {boolean|Highcharts.AnimationOptionsObject}
		                 * @default {"duration": 50}
		                 * @product highcharts highmaps
		                 */
		                animation: {
		                    /** @ignore */
		                    duration: 50
		                },

		                /** @ignore */
		                width: 0.01,

		                /**
		                 * The color of the marker.
		                 *
		                 * @type    {Highcharts.ColorString}
		                 * @product highcharts highmaps
		                 */
		                color: '#999999'
		            },

		            /**
		             * The axis labels show the number for each tick.
		             *
		             * For more live examples on label options, see [xAxis.labels in the
		             * Highcharts API.](/highcharts#xAxis.labels)
		             *
		             * @extends xAxis.labels
		             * @product highcharts highmaps
		             */
		            labels: {

		                /**
		                 * How to handle overflowing labels on horizontal color axis.
		                 * Can be undefined or "justify". If "justify", labels will not
		                 * render outside the legend area. If there is room to move it,
		                 * it will be aligned to the edge, else it will be removed.
		                 *
		                 * @validvalue ["allow", "justify"]
		                 * @product    highcharts highmaps
		                 */
		                overflow: 'justify',

		                rotation: 0

		            },

		            /**
		             * The color to represent the minimum of the color axis. Unless
		             * [dataClasses](#colorAxis.dataClasses) or
		             * [stops](#colorAxis.stops) are set, the gradient starts at this
		             * value.
		             *
		             * If dataClasses are set, the color is based on minColor and
		             * maxColor unless a color is set for each data class, or the
		             * [dataClassColor](#colorAxis.dataClassColor) is set.
		             *
		             * @sample {highmaps} maps/coloraxis/mincolor-maxcolor/
		             *         Min and max colors on scalar (gradient) axis
		             * @sample {highmaps} maps/coloraxis/mincolor-maxcolor-dataclasses/
		             *         On data classes
		             *
		             * @type    {Highcharts.ColorString}
		             * @product highcharts highmaps
		             */
		            minColor: '#e6ebf5',

		            /**
		             * The color to represent the maximum of the color axis. Unless
		             * [dataClasses](#colorAxis.dataClasses) or
		             * [stops](#colorAxis.stops) are set, the gradient ends at this
		             * value.
		             *
		             * If dataClasses are set, the color is based on minColor and
		             * maxColor unless a color is set for each data class, or the
		             * [dataClassColor](#colorAxis.dataClassColor) is set.
		             *
		             * @sample {highmaps} maps/coloraxis/mincolor-maxcolor/
		             *         Min and max colors on scalar (gradient) axis
		             * @sample {highmaps} maps/coloraxis/mincolor-maxcolor-dataclasses/
		             *         On data classes
		             *
		             * @type    {Highcharts.ColorString}
		             * @product highcharts highmaps
		             */
		            maxColor: '#003399',

		            /**
		             * Color stops for the gradient of a scalar color axis. Use this in
		             * cases where a linear gradient between a `minColor` and `maxColor`
		             * is not sufficient. The stops is an array of tuples, where the
		             * first item is a float between 0 and 1 assigning the relative
		             * position in the gradient, and the second item is the color.
		             *
		             * @sample {highmaps} maps/demo/heatmap/
		             *         Heatmap with three color stops
		             *
		             * @type      {Array<Array<number,Highcharts.ColorString>>}
		             * @product   highcharts highmaps
		             * @apioption colorAxis.stops
		             */

		            /**
		             * The pixel length of the main tick marks on the color axis.
		             */
		            tickLength: 5,

		            /**
		             * The type of interpolation to use for the color axis. Can be
		             * `linear` or `logarithmic`.
		             *
		             * @type       {string}
		             * @default    linear
		             * @product    highcharts highmaps
		             * @validvalue ["linear", "logarithmic"]
		             * @apioption  colorAxis.type
		             */

		            /**
		             * Whether to reverse the axis so that the highest number is closest
		             * to the origin. Defaults to `false` in a horizontal legend and
		             * `true` in a vertical legend, where the smallest value starts on
		             * top.
		             *
		             * @type      {boolean}
		             * @product   highcharts highmaps
		             * @apioption colorAxis.reversed
		             */

		            /**
		             * @product   highcharts highmaps
		             * @excluding afterBreaks, pointBreak, pointInBreak
		             * @apioption colorAxis.events
		             */

		            /**
		             * Fires when the legend item belonging to the colorAxis is clicked.
		             * One parameter, `event`, is passed to the function.
		             *
		             * @type      {Function}
		             * @product   highcharts highmaps
		             * @apioption colorAxis.events.legendItemClick
		             */

		            /**
		             * Whether to display the colorAxis in the legend.
		             *
		             * @see [heatmap.showInLegend](#series.heatmap.showInLegend)
		             *
		             * @since   4.2.7
		             * @product highcharts highmaps
		             */
		            showInLegend: true
		        },

		        // Properties to preserve after destroy, for Axis.update (#5881, #6025)
		        keepProps: [
		            'legendGroup',
		            'legendItemHeight',
		            'legendItemWidth',
		            'legendItem',
		            'legendSymbol'
		        ].concat(Axis.prototype.keepProps),

		        /**
		         * Initialize the color axis
		         *
		         * @private
		         * @function Highcharts.ColorAxis#init
		         *
		         * @param {Highcharts.Chart} chart
		         *
		         * @param {Highcharts.ColorAxisOptions} userOptions
		         */
		        init: function (chart, userOptions) {
		            var horiz = chart.options.legend.layout !== 'vertical',
		                options;

		            this.coll = 'colorAxis';

		            // Build the options
		            options = merge(this.defaultColorAxisOptions, {
		                side: horiz ? 2 : 1,
		                reversed: !horiz
		            }, userOptions, {
		                opposite: !horiz,
		                showEmpty: false,
		                title: null,
		                visible: chart.options.legend.enabled
		            });

		            Axis.prototype.init.call(this, chart, options);

		            // Base init() pushes it to the xAxis array, now pop it again
		            // chart[this.isXAxis ? 'xAxis' : 'yAxis'].pop();

		            // Prepare data classes
		            if (userOptions.dataClasses) {
		                this.initDataClasses(userOptions);
		            }
		            this.initStops();

		            // Override original axis properties
		            this.horiz = horiz;
		            this.zoomEnabled = false;

		            // Add default values
		            this.defaultLegendLength = 200;
		        },

		        initDataClasses: function (userOptions) {
		            var chart = this.chart,
		                dataClasses,
		                colorCounter = 0,
		                colorCount = chart.options.chart.colorCount,
		                options = this.options,
		                len = userOptions.dataClasses.length;
		            this.dataClasses = dataClasses = [];
		            this.legendItems = [];

		            userOptions.dataClasses.forEach(function (dataClass, i) {
		                var colors;

		                dataClass = merge(dataClass);
		                dataClasses.push(dataClass);

		                if (!chart.styledMode && dataClass.color) {
		                    return;
		                }

		                if (options.dataClassColor === 'category') {
		                    if (!chart.styledMode) {
		                        colors = chart.options.colors;
		                        colorCount = colors.length;
		                        dataClass.color = colors[colorCounter];
		                    }

		                    dataClass.colorIndex = colorCounter;

		                    // increase and loop back to zero
		                    colorCounter++;
		                    if (colorCounter === colorCount) {
		                        colorCounter = 0;
		                    }
		                } else {
		                    dataClass.color = color(options.minColor).tweenTo(
		                        color(options.maxColor),
		                        len < 2 ? 0.5 : i / (len - 1) // #3219
		                    );
		                }
		            });
		        },

		        /**
		         * Override so that ticks are not added in data class axes (#6914)
		         *
		         * @private
		         * @function Highcharts.ColorAxis#setTickPositions
		         */
		        setTickPositions: function () {
		            if (!this.dataClasses) {
		                return Axis.prototype.setTickPositions.call(this);
		            }
		        },

		        initStops: function () {
		            this.stops = this.options.stops || [
		                [0, this.options.minColor],
		                [1, this.options.maxColor]
		            ];
		            this.stops.forEach(function (stop) {
		                stop.color = color(stop[1]);
		            });
		        },

		        /**
		         * Extend the setOptions method to process extreme colors and color
		         * stops.
		         *
		         * @private
		         * @function Highcharts.ColorAxis#setOptions
		         *
		         * @param {Highcharts.ColorAxisOptions} userOptions
		         */
		        setOptions: function (userOptions) {
		            Axis.prototype.setOptions.call(this, userOptions);

		            this.options.crosshair = this.options.marker;
		        },

		        setAxisSize: function () {
		            var symbol = this.legendSymbol,
		                chart = this.chart,
		                legendOptions = chart.options.legend || {},
		                x,
		                y,
		                width,
		                height;

		            if (symbol) {
		                this.left = x = symbol.attr('x');
		                this.top = y = symbol.attr('y');
		                this.width = width = symbol.attr('width');
		                this.height = height = symbol.attr('height');
		                this.right = chart.chartWidth - x - width;
		                this.bottom = chart.chartHeight - y - height;

		                this.len = this.horiz ? width : height;
		                this.pos = this.horiz ? x : y;
		            } else {
		                // Fake length for disabled legend to avoid tick issues
		                // and such (#5205)
		                this.len = (
		                        this.horiz ?
		                            legendOptions.symbolWidth :
		                            legendOptions.symbolHeight
		                    ) || this.defaultLegendLength;
		            }
		        },

		        normalizedValue: function (value) {
		            if (this.isLog) {
		                value = this.val2lin(value);
		            }
		            return 1 - ((this.max - value) / ((this.max - this.min) || 1));
		        },

		        /**
		         * Translate from a value to a color.
		         *
		         * @private
		         * @function Highcharts.ColorAxis#toColor
		         *
		         * @param {number} value
		         *
		         * @param {Highcharts.Point} point
		         */
		        toColor: function (value, point) {
		            var pos,
		                stops = this.stops,
		                from,
		                to,
		                color,
		                dataClasses = this.dataClasses,
		                dataClass,
		                i;

		            if (dataClasses) {
		                i = dataClasses.length;
		                while (i--) {
		                    dataClass = dataClasses[i];
		                    from = dataClass.from;
		                    to = dataClass.to;
		                    if (
		                        (from === undefined || value >= from) &&
		                        (to === undefined || value <= to)
		                    ) {

		                        color = dataClass.color;

		                        if (point) {
		                            point.dataClass = i;
		                            point.colorIndex = dataClass.colorIndex;
		                        }
		                        break;
		                    }
		                }

		            } else {

		                pos = this.normalizedValue(value);
		                i = stops.length;
		                while (i--) {
		                    if (pos > stops[i][0]) {
		                        break;
		                    }
		                }
		                from = stops[i] || stops[i + 1];
		                to = stops[i + 1] || from;

		                // The position within the gradient
		                pos = 1 - (to[0] - pos) / ((to[0] - from[0]) || 1);

		                color = from.color.tweenTo(
		                    to.color,
		                    pos
		                );
		            }
		            return color;
		        },

		        /**
		         * Override the getOffset method to add the whole axis groups inside
		         * the legend.
		         *
		         * @private
		         * @function Highcharts.ColorAxis#getOffset
		         */
		        getOffset: function () {
		            var group = this.legendGroup,
		                sideOffset = this.chart.axisOffset[this.side];

		            if (group) {

		                // Hook for the getOffset method to add groups to this parent
		                // group
		                this.axisParent = group;

		                // Call the base
		                Axis.prototype.getOffset.call(this);

		                // First time only
		                if (!this.added) {

		                    this.added = true;

		                    this.labelLeft = 0;
		                    this.labelRight = this.width;
		                }
		                // Reset it to avoid color axis reserving space
		                this.chart.axisOffset[this.side] = sideOffset;
		            }
		        },

		        /**
		         * Create the color gradient.
		         *
		         * @private
		         * @function Highcharts.ColorAxis#setLegendColor
		         */
		        setLegendColor: function () {
		            var grad,
		                horiz = this.horiz,
		                reversed = this.reversed,
		                one = reversed ? 1 : 0,
		                zero = reversed ? 0 : 1;

		            grad = horiz ? [one, 0, zero, 0] : [0, zero, 0, one]; // #3190
		            this.legendColor = {
		                linearGradient: {
		                    x1: grad[0], y1: grad[1],
		                    x2: grad[2], y2: grad[3]
		                },
		                stops: this.stops
		            };
		        },

		        /**
		         * The color axis appears inside the legend and has its own legend
		         * symbol.
		         *
		         * @private
		         * @function Highcharts.ColorAxis#drawLegendSymbol
		         *
		         * @param {Highcharts.Legend} legend
		         *
		         * @param {*} item
		         */
		        drawLegendSymbol: function (legend, item) {
		            var padding = legend.padding,
		                legendOptions = legend.options,
		                horiz = this.horiz,
		                width = pick(
		                    legendOptions.symbolWidth,
		                    horiz ? this.defaultLegendLength : 12
		                ),
		                height = pick(
		                    legendOptions.symbolHeight,
		                    horiz ? 12 : this.defaultLegendLength
		                ),
		                labelPadding = pick(
		                    legendOptions.labelPadding,
		                    horiz ? 16 : 30
		                ),
		                itemDistance = pick(legendOptions.itemDistance, 10);

		            this.setLegendColor();

		            // Create the gradient
		            item.legendSymbol = this.chart.renderer.rect(
		                0,
		                legend.baseline - 11,
		                width,
		                height
		            ).attr({
		                zIndex: 1
		            }).add(item.legendGroup);

		            // Set how much space this legend item takes up
		            this.legendItemWidth = width + padding +
		                (horiz ? itemDistance : labelPadding);
		            this.legendItemHeight = height + padding +
		                (horiz ? labelPadding : 0);
		        },

		        /**
		         * Fool the legend
		         *
		         * @private
		         * @function Highcharts.ColorAxis#setState
		         *
		         * @param {*} state
		         */
		        setState: function (state) {
		            this.series.forEach(function (series) {
		                series.setState(state);
		            });
		        },

		        visible: true,

		        setVisible: noop,

		        getSeriesExtremes: function () {
		            var series = this.series,
		                i = series.length;
		            this.dataMin = Infinity;
		            this.dataMax = -Infinity;
		            while (i--) {
		                series[i].getExtremes();
		                if (series[i].valueMin !== undefined) {
		                    this.dataMin = Math.min(this.dataMin, series[i].valueMin);
		                    this.dataMax = Math.max(this.dataMax, series[i].valueMax);
		                }
		            }
		        },

		        drawCrosshair: function (e, point) {
		            var plotX = point && point.plotX,
		                plotY = point && point.plotY,
		                crossPos,
		                axisPos = this.pos,
		                axisLen = this.len;

		            if (point) {
		                crossPos = this.toPixels(point[point.series.colorKey]);
		                if (crossPos < axisPos) {
		                    crossPos = axisPos - 2;
		                } else if (crossPos > axisPos + axisLen) {
		                    crossPos = axisPos + axisLen + 2;
		                }

		                point.plotX = crossPos;
		                point.plotY = this.len - crossPos;
		                Axis.prototype.drawCrosshair.call(this, e, point);
		                point.plotX = plotX;
		                point.plotY = plotY;

		                if (
		                    this.cross &&
		                    !this.cross.addedToColorAxis &&
		                    this.legendGroup
		                ) {
		                    this.cross
		                        .addClass('highcharts-coloraxis-marker')
		                        .add(this.legendGroup);

		                    this.cross.addedToColorAxis = true;

		                    if (!this.chart.styledMode) {
		                        this.cross.attr({
		                            fill: this.crosshair.color
		                        });
		                    }

		                }
		            }
		        },

		        getPlotLinePath: function (a, b, c, d, pos) {
		            // crosshairs only
		            return isNumber(pos) ? // pos can be 0 (#3969)
		                (
		                    this.horiz ? [
		                        'M',
		                        pos - 4, this.top - 6,
		                        'L',
		                        pos + 4, this.top - 6,
		                        pos, this.top,
		                        'Z'
		                    ] : [
		                        'M',
		                        this.left, pos,
		                        'L',
		                        this.left - 6, pos + 6,
		                        this.left - 6, pos - 6,
		                        'Z'
		                    ]
		                ) :
		                Axis.prototype.getPlotLinePath.call(this, a, b, c, d);
		        },

		        update: function (newOptions, redraw) {
		            var chart = this.chart,
		                legend = chart.legend;

		            this.series.forEach(function (series) {
		                // Needed for Axis.update when choropleth colors change
		                series.isDirtyData = true;
		            });

		            // When updating data classes, destroy old items and make sure new
		            // ones are created (#3207)
		            if (newOptions.dataClasses && legend.allItems) {
		                legend.allItems.forEach(function (item) {
		                    if (item.isDataClass && item.legendGroup) {
		                        item.legendGroup.destroy();
		                    }
		                });
		                chart.isDirtyLegend = true;
		            }

		            // Keep the options structure updated for export. Unlike xAxis and
		            // yAxis, the colorAxis is not an array. (#3207)
		            chart.options[this.coll] = merge(this.userOptions, newOptions);

		            Axis.prototype.update.call(this, newOptions, redraw);
		            if (this.legendItem) {
		                this.setLegendColor();
		                legend.colorizeItem(this, true);
		            }
		        },

		        /**
		         * Extend basic axis remove by also removing the legend item.
		         *
		         * @private
		         * @function Highcharts.ColorAxis#remove
		         */
		        remove: function () {
		            if (this.legendItem) {
		                this.chart.legend.destroyItem(this);
		            }
		            Axis.prototype.remove.call(this);
		        },

		        /**
		         * Get the legend item symbols for data classes.
		         *
		         * @private
		         * @function Highcharts.ColorAxis#getDataClassLegendSymbols
		         *
		         * @return {*}
		         */
		        getDataClassLegendSymbols: function () {
		            var axis = this,
		                chart = this.chart,
		                legendItems = this.legendItems,
		                legendOptions = chart.options.legend,
		                valueDecimals = legendOptions.valueDecimals,
		                valueSuffix = legendOptions.valueSuffix || '',
		                name;

		            if (!legendItems.length) {
		                this.dataClasses.forEach(function (dataClass, i) {
		                    var vis = true,
		                        from = dataClass.from,
		                        to = dataClass.to;

		                    // Assemble the default name. This can be overridden
		                    // by legend.options.labelFormatter
		                    name = '';
		                    if (from === undefined) {
		                        name = '< ';
		                    } else if (to === undefined) {
		                        name = '> ';
		                    }
		                    if (from !== undefined) {
		                        name += H.numberFormat(from, valueDecimals) +
		                            valueSuffix;
		                    }
		                    if (from !== undefined && to !== undefined) {
		                        name += ' - ';
		                    }
		                    if (to !== undefined) {
		                        name += H.numberFormat(to, valueDecimals) + valueSuffix;
		                    }
		                    // Add a mock object to the legend items
		                    legendItems.push(extend({
		                        chart: chart,
		                        name: name,
		                        options: {},
		                        drawLegendSymbol: LegendSymbolMixin.drawRectangle,
		                        visible: true,
		                        setState: noop,
		                        isDataClass: true,
		                        setVisible: function () {
		                            vis = this.visible = !vis;
		                            axis.series.forEach(function (series) {
		                                series.points.forEach(function (point) {
		                                    if (point.dataClass === i) {
		                                        point.setVisible(vis);
		                                    }
		                                });
		                            });
		                            chart.legend.colorizeItem(this, vis);
		                        }
		                    }, dataClass));
		                });
		            }
		            return legendItems;
		        },
		        name: '' // Prevents 'undefined' in legend in IE8
		    });

		    /**
		     * Handle animation of the color attributes directly
		     *
		     * @private
		     * @function Highcharts.Fx#fillSetter
		     *//**
		     * Handle animation of the color attributes directly
		     *
		     * @private
		     * @function Highcharts.Fx#strokeSetter
		     */
		    ['fill', 'stroke'].forEach(function (prop) {
		        H.Fx.prototype[prop + 'Setter'] = function () {
		            this.elem.attr(
		                prop,
		                color(this.start).tweenTo(
		                    color(this.end),
		                    this.pos
		                ),
		                null,
		                true
		            );
		        };
		    });

		    // Extend the chart getAxes method to also get the color axis
		    addEvent(Chart, 'afterGetAxes', function () {

		        var options = this.options,
		            colorAxisOptions = options.colorAxis;

		        this.colorAxis = [];
		        if (colorAxisOptions) {
		            new ColorAxis(this, colorAxisOptions); // eslint-disable-line no-new
		        }
		    });


		    // Add the color axis. This also removes the axis' own series to prevent
		    // them from showing up individually.
		    addEvent(Legend, 'afterGetAllItems', function (e) {
		        var colorAxisItems = [],
		            colorAxis = this.chart.colorAxis[0],
		            i;

		        if (colorAxis && colorAxis.options) {
		            if (colorAxis.options.showInLegend) {
		                // Data classes
		                if (colorAxis.options.dataClasses) {
		                    colorAxisItems = colorAxis.getDataClassLegendSymbols();
		                // Gradient legend
		                } else {
		                    // Add this axis on top
		                    colorAxisItems.push(colorAxis);
		                }

		                // Don't add the color axis' series
		                colorAxis.series.forEach(function (series) {
		                    H.erase(e.allItems, series);
		                });
		            }
		        }

		        i = colorAxisItems.length;
		        while (i--) {
		            e.allItems.unshift(colorAxisItems[i]);
		        }
		    });

		    addEvent(Legend, 'afterColorizeItem', function (e) {
		        if (e.visible && e.item.legendColor) {
		            e.item.legendSymbol.attr({
		                fill: e.item.legendColor
		            });
		        }
		    });

		    // Updates in the legend need to be reflected in the color axis (6888)
		    addEvent(Legend, 'afterUpdate', function () {
		        if (this.chart.colorAxis[0]) {
		            this.chart.colorAxis[0].update({}, arguments[2]);
		        }
		    });
		}

	}(Highcharts));
	(function (H) {
		/**
		 * (c) 2010-2018 Torstein Honsi
		 *
		 * License: www.highcharts.com/license
		 */



		var defined = H.defined,
		    noop = H.noop,
		    seriesTypes = H.seriesTypes;

		/**
		 * Mixin for maps and heatmaps
		 *
		 * @private
		 * @mixin Highcharts.colorPointMixin
		 */
		H.colorPointMixin = {
		    /**
		     * Color points have a value option that determines whether or not it is
		     * a null point
		     *
		     * @function Highcharts.colorPointMixin.isValid
		     *
		     * @return {boolean}
		     */
		    isValid: function () {
		        // undefined is allowed
		        return (
		            this.value !== null &&
		            this.value !== Infinity &&
		            this.value !== -Infinity
		        );
		    },

		    /**
		     * Set the visibility of a single point
		     *
		     * @function Highcharts.colorPointMixin.setVisible
		     *
		     * @param {boolean} visible
		     */
		    setVisible: function (vis) {
		        var point = this,
		            method = vis ? 'show' : 'hide';

		        point.visible = Boolean(vis);

		        // Show and hide associated elements
		        ['graphic', 'dataLabel'].forEach(function (key) {
		            if (point[key]) {
		                point[key][method]();
		            }
		        });
		    },
		    /**
		     * @function Highcharts.colorPointMixin.setState
		     *
		     * @param {string} state
		     */
		    setState: function (state) {
		        H.Point.prototype.setState.call(this, state);
		        if (this.graphic) {
		            this.graphic.attr({
		                zIndex: state === 'hover' ? 1 : 0
		            });
		        }
		    }
		};

		/**
		 * @private
		 * @mixin Highcharts.colorSeriesMixin
		 */
		H.colorSeriesMixin = {
		    pointArrayMap: ['value'],
		    axisTypes: ['xAxis', 'yAxis', 'colorAxis'],
		    optionalAxis: 'colorAxis',
		    trackerGroups: ['group', 'markerGroup', 'dataLabelsGroup'],
		    getSymbol: noop,
		    parallelArrays: ['x', 'y', 'value'],
		    colorKey: 'value',

		    pointAttribs: seriesTypes.column.prototype.pointAttribs,

		    /**
		     * In choropleth maps, the color is a result of the value, so this needs
		     * translation too
		     *
		     * @function Highcharts.colorSeriesMixin.translateColors
		     */
		    translateColors: function () {
		        var series = this,
		            nullColor = this.options.nullColor,
		            colorAxis = this.colorAxis,
		            colorKey = this.colorKey;

		        this.data.forEach(function (point) {
		            var value = point[colorKey],
		                color;

		            color = point.options.color ||
		                (
		                    point.isNull ?
		                        nullColor :
		                        (colorAxis && value !== undefined) ?
		                            colorAxis.toColor(value, point) :
		                            point.color || series.color
		                );

		            if (color) {
		                point.color = color;
		            }
		        });
		    },

		    /**
		     * Get the color attibutes to apply on the graphic
		     *
		     * @function Highcharts.colorSeriesMixin.colorAttribs
		     *
		     * @param {Highcharts.Point} point
		     *
		     * @return {Highcharts.Dictionary<Highcharts.ColorString>}
		     */
		    colorAttribs: function (point) {
		        var ret = {};
		        if (defined(point.color)) {
		            ret[this.colorProp || 'fill'] = point.color;
		        }
		        return ret;
		    }
		};

	}(Highcharts));
	(function (Highcharts) {
		/**
		 * (c) 2010-2018 Torstein Honsi
		 *
		 * License: www.highcharts.com/license
		 */

		/**
		 * Configuration hash for the data label and tooltip formatters.
		 *
		 * @interface Highcharts.PointLabelObject
		 *//**
		 * The point's current color.
		 * @name Highcharts.PointLabelObject#color
		 * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
		 *//**
		 * The point's current color index, used in styled mode instead of `color`. The
		 * color index is inserted in class names used for styling.
		 * @name Highcharts.PointLabelObject#colorIndex
		 * @type {number}
		 *//**
		 * The name of the related point.
		 * @name Highcharts.PointLabelObject#key
		 * @type {number|string}
		 *//**
		 * The percentage for related points in a stacked series or pies.
		 * @name Highcharts.PointLabelObject#percentage
		 * @type {number}
		 *//**
		 * The related point.
		 * @name Highcharts.PointLabelObject#point
		 * @type {Highcharts.Point}
		 *//**
		 * The related series.
		 * @name Highcharts.PointLabelObject#series
		 * @type {Highcharts.Series}
		 *//**
		 * The total of values in either a stack for stacked series, or a pie in a pie
		 * series.
		 * @name Highcharts.PointLabelObject#total
		 * @type {number}
		 *//**
		 * For categorized axes this property holds the category name for the point. For
		 * other axes it holds the X value.
		 * @name Highcharts.PointLabelObject#x
		 * @type {number|string}
		 *//**
		 * The y value of the point.
		 * @name Highcharts.PointLabelObject#y
		 * @type {number|undefined}
		 */



		var Point,
		    H = Highcharts,
		    extend = H.extend,
		    erase = H.erase,
		    fireEvent = H.fireEvent,
		    format = H.format,
		    isArray = H.isArray,
		    isNumber = H.isNumber,
		    pick = H.pick,
		    uniqueKey = H.uniqueKey,
		    defined = H.defined,
		    removeEvent = H.removeEvent;

		/**
		 * The Point object. The point objects are generated from the `series.data`
		 * configuration objects or raw numbers. They can be accessed from the
		 * `Series.points` array. Other ways to instantiate points are through {@link
		 * Highcharts.Series#addPoint} or {@link Highcharts.Series#setData}.
		 *
		 * @class
		 * @name Highcharts.Point
		 */
		Highcharts.Point = Point = function () {};
		Highcharts.Point.prototype = {

		    /**
		     * Initialize the point. Called internally based on the `series.data`
		     * option.
		     *
		     * @function Highcharts.Point#init
		     *
		     * @param {Highcharts.Series} series
		     *        The series object containing this point.
		     *
		     * @param {number|object|Array<number|string>|null} options
		     *        The data in either number, array or object format.
		     *
		     * @param {number} [x]
		     *        Optionally, the X value of the point.
		     *
		     * @return {Highcharts.Point}
		     *         The Point instance.
		     *
		     * @fires Highcharts.Point#event:afterInit
		     */
		    init: function (series, options, x) {

		        var point = this,
		            colors,
		            optionsChart = series.chart.options.chart,
		            colorCount = optionsChart.colorCount,
		            styledMode = series.chart.styledMode,
		            colorIndex;

		        /**
		         * The series object associated with the point.
		         *
		         * @name Highcharts.Point#series
		         * @type {Highcharts.Series}
		         */
		        point.series = series;

		        /**
		         * The point's current color.
		         *
		         * @name Highcharts.Point#color
		         * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
		         */
		        if (!styledMode) {
		            point.color = series.color; // #3445
		        }
		        point.applyOptions(options, x);

		        // Add a unique ID to the point if none is assigned
		        point.id = defined(point.id) ? point.id : uniqueKey();

		        if (series.options.colorByPoint) {
		            if (!styledMode) {
		                colors = series.options.colors || series.chart.options.colors;
		                point.color = point.color || colors[series.colorCounter];
		                colorCount = colors.length;
		            }
		            colorIndex = series.colorCounter;
		            series.colorCounter++;
		            // loop back to zero
		            if (series.colorCounter === colorCount) {
		                series.colorCounter = 0;
		            }
		        } else {
		            colorIndex = series.colorIndex;
		        }

		        /**
		         * The point's current color index, used in styled mode instead of
		         * `color`. The color index is inserted in class names used for styling.
		         *
		         * @name Highcharts.Point#colorIndex
		         * @type {number}
		         */
		        point.colorIndex = pick(point.colorIndex, colorIndex);

		        series.chart.pointCount++;

		        fireEvent(point, 'afterInit');

		        return point;
		    },
		    /**
		     * Apply the options containing the x and y data and possible some extra
		     * properties. Called on point init or from point.update.
		     *
		     * @private
		     * @function Highcharts.Point#applyOptions
		     *
		     * @param {number|object|Array<number|string>|null} options
		     *        The point options as defined in series.data.
		     *
		     * @param {number} [x]
		     *        Optionally, the x value.
		     *
		     * @return {Highcharts.Point}
		     *         The Point instance.
		     */
		    applyOptions: function (options, x) {
		        var point = this,
		            series = point.series,
		            pointValKey = series.options.pointValKey || series.pointValKey;

		        options = Point.prototype.optionsToObject.call(this, options);

		        // copy options directly to point
		        extend(point, options);

		        /**
		         * The point's options as applied in the initial configuration, or
		         * extended through `Point.update`.
		         * @name Highcharts.Point#options
		         * @type {object}
		         */
		        point.options = point.options ?
		            extend(point.options, options) :
		            options;

		        // Since options are copied into the Point instance, some accidental
		        // options must be shielded (#5681)
		        if (options.group) {
		            delete point.group;
		        }
		        if (options.dataLabels) {
		            delete point.dataLabels;
		        }

		        /**
		         * The y value of the point.
		         * @name Highcharts.Point#y
		         * @type {number|undefined}
		         */
		        // For higher dimension series types. For instance, for ranges, point.y
		        // is mapped to point.low.
		        if (pointValKey) {
		            point.y = point[pointValKey];
		        }
		        point.isNull = pick(
		            point.isValid && !point.isValid(),
		            point.x === null || !isNumber(point.y, true)
		        ); // #3571, check for NaN

		        // The point is initially selected by options (#5777)
		        if (point.selected) {
		            point.state = 'select';
		        }

		        /**
		         * The x value of the point.
		         * @name Highcharts.Point#x
		         * @type {number}
		         */
		        // If no x is set by now, get auto incremented value. All points must
		        // have an x value, however the y value can be null to create a gap in
		        // the series
		        if (
		            'name' in point &&
		            x === undefined &&
		            series.xAxis &&
		            series.xAxis.hasNames
		        ) {
		            point.x = series.xAxis.nameToX(point);
		        }
		        if (point.x === undefined && series) {
		            if (x === undefined) {
		                point.x = series.autoIncrement(point);
		            } else {
		                point.x = x;
		            }
		        }

		        return point;
		    },

		    /**
		     * Set a value in an object, on the property defined by key. The key
		     * supports nested properties using dot notation. The function modifies the
		     * input object and does not make a copy.
		     *
		     * @function Highcharts.Point#setNestedProperty
		     *
		     * @param {object} object
		     *        The object to set the value on.
		     *
		     * @param {*} value
		     *        The value to set.
		     *
		     * @param {string} key
		     *        Key to the property to set.
		     *
		     * @return {object}
		     *         The modified object.
		     */
		    setNestedProperty: function (object, value, key) {
		        var nestedKeys = key.split('.');
		        nestedKeys.reduce(function (result, key, i, arr) {
		            var isLastKey = arr.length - 1 === i;
		            result[key] = (
		                isLastKey ?
		                value :
		                (H.isObject(result[key], true) ? result[key] : {})
		            );
		            return result[key];
		        }, object);
		        return object;
		    },

		    /**
		     * Transform number or array configs into objects. Used internally to unify
		     * the different configuration formats for points. For example, a simple
		     * number `10` in a line series will be transformed to `{ y: 10 }`, and an
		     * array config like `[1, 10]` in a scatter series will be transformed to
		     * `{ x: 1, y: 10 }`.
		     *
		     * @function Highcharts.Point#optionsToObject
		     *
		     * @param {number|object|Array<number|string>|null} options
		     *        The input option.
		     *
		     * @return {object}
		     *         Transformed options.
		     */
		    optionsToObject: function (options) {
		        var ret = {},
		            series = this.series,
		            keys = series.options.keys,
		            pointArrayMap = keys || series.pointArrayMap || ['y'],
		            valueCount = pointArrayMap.length,
		            firstItemType,
		            i = 0,
		            j = 0;

		        if (isNumber(options) || options === null) {
		            ret[pointArrayMap[0]] = options;

		        } else if (isArray(options)) {
		            // with leading x value
		            if (!keys && options.length > valueCount) {
		                firstItemType = typeof options[0];
		                if (firstItemType === 'string') {
		                    ret.name = options[0];
		                } else if (firstItemType === 'number') {
		                    ret.x = options[0];
		                }
		                i++;
		            }
		            while (j < valueCount) {
		                // Skip undefined positions for keys
		                if (!keys || options[i] !== undefined) {
		                    if (pointArrayMap[j].indexOf('.') > 0) {
		                        // Handle nested keys, e.g. ['color.pattern.image']
		                        // Avoid function call unless necessary.
		                        H.Point.prototype.setNestedProperty(
		                            ret, options[i], pointArrayMap[j]
		                        );
		                    } else {
		                        ret[pointArrayMap[j]] = options[i];
		                    }
		                }
		                i++;
		                j++;
		            }
		        } else if (typeof options === 'object') {
		            ret = options;

		            // This is the fastest way to detect if there are individual point
		            // dataLabels that need to be considered in drawDataLabels. These
		            // can only occur in object configs.
		            if (options.dataLabels) {
		                series._hasPointLabels = true;
		            }

		            // Same approach as above for markers
		            if (options.marker) {
		                series._hasPointMarkers = true;
		            }
		        }
		        return ret;
		    },

		    /**
		     * Get the CSS class names for individual points. Used internally where the
		     * returned value is set on every point.
		     *
		     * @function Highcharts.Point#getClassName
		     *
		     * @return {string}
		     *         The class names.
		     */
		    getClassName: function () {
		        return 'highcharts-point' +
		            (this.selected ? ' highcharts-point-select' : '') +
		            (this.negative ? ' highcharts-negative' : '') +
		            (this.isNull ? ' highcharts-null-point' : '') +
		            (this.colorIndex !== undefined ? ' highcharts-color-' +
		                this.colorIndex : '') +
		            (this.options.className ? ' ' + this.options.className : '') +
		            (this.zone && this.zone.className ? ' ' +
		                this.zone.className.replace('highcharts-negative', '') : '');
		    },

		    /**
		     * In a series with `zones`, return the zone that the point belongs to.
		     *
		     * @function Highcharts.Point#getZone
		     *
		     * @return {Highcharts.PlotSeriesZonesOptions}
		     *         The zone item.
		     */
		    getZone: function () {
		        var series = this.series,
		            zones = series.zones,
		            zoneAxis = series.zoneAxis || 'y',
		            i = 0,
		            zone;

		        zone = zones[i];
		        while (this[zoneAxis] >= zone.value) {
		            zone = zones[++i];
		        }

		        // For resetting or reusing the point (#8100)
		        if (!this.nonZonedColor) {
		            this.nonZonedColor = this.color;
		        }

		        if (zone && zone.color && !this.options.color) {
		            this.color = zone.color;
		        } else {
		            this.color = this.nonZonedColor;
		        }

		        return zone;
		    },

		    /**
		     * Destroy a point to clear memory. Its reference still stays in
		     * `series.data`.
		     *
		     * @private
		     * @function Highcharts.Point#destroy
		     */
		    destroy: function () {
		        var point = this,
		            series = point.series,
		            chart = series.chart,
		            hoverPoints = chart.hoverPoints,
		            prop;

		        chart.pointCount--;

		        if (hoverPoints) {
		            point.setState();
		            erase(hoverPoints, point);
		            if (!hoverPoints.length) {
		                chart.hoverPoints = null;
		            }

		        }
		        if (point === chart.hoverPoint) {
		            point.onMouseOut();
		        }

		        // Remove all events and elements
		        if (point.graphic || point.dataLabel || point.dataLabels) {
		            removeEvent(point);
		            point.destroyElements();
		        }

		        if (point.legendItem) { // pies have legend items
		            chart.legend.destroyItem(point);
		        }

		        for (prop in point) {
		            point[prop] = null;
		        }
		    },

		    /**
		     * Destroy SVG elements associated with the point.
		     *
		     * @private
		     * @function Highcharts.Point#destroyElements
		     */
		    destroyElements: function () {
		        var point = this,
		            props = [
		                'graphic',
		                'dataLabel',
		                'dataLabelUpper',
		                'connector',
		                'shadowGroup'
		            ],
		            prop,
		            i = 6;
		        while (i--) {
		            prop = props[i];
		            if (point[prop]) {
		                point[prop] = point[prop].destroy();
		            }
		        }
		        // Handle point.dataLabels and point.connectors
		        if (point.dataLabels) {
		            point.dataLabels.forEach(function (label) {
		                if (label.element) {
		                    label.destroy();
		                }
		            });
		            delete point.dataLabels;
		        }
		        if (point.connectors) {
		            point.connectors.forEach(function (connector) {
		                if (connector.element) {
		                    connector.destroy();
		                }
		            });
		            delete point.connectors;
		        }
		    },

		    /**
		     * Return the configuration hash needed for the data label and tooltip
		     * formatters.
		     *
		     * @function Highcharts.Point#getLabelConfig
		     *
		     * @return {Highcharts.PointLabelObject}
		     *         Abstract object used in formatters and formats.
		     */
		    getLabelConfig: function () {
		        return {
		            x: this.category,
		            y: this.y,
		            color: this.color,
		            colorIndex: this.colorIndex,
		            key: this.name || this.category,
		            series: this.series,
		            point: this,
		            percentage: this.percentage,
		            total: this.total || this.stackTotal
		        };
		    },

		    /**
		     * Extendable method for formatting each point's tooltip line.
		     *
		     * @function Highcharts.Point#tooltipFormatter
		     *
		     * @param {string} pointFormat
		     *        The point format.
		     *
		     * @return {string}
		     *         A string to be concatenated in to the common tooltip text.
		     */
		    tooltipFormatter: function (pointFormat) {

		        // Insert options for valueDecimals, valuePrefix, and valueSuffix
		        var series = this.series,
		            seriesTooltipOptions = series.tooltipOptions,
		            valueDecimals = pick(seriesTooltipOptions.valueDecimals, ''),
		            valuePrefix = seriesTooltipOptions.valuePrefix || '',
		            valueSuffix = seriesTooltipOptions.valueSuffix || '';

		        // Replace default point style with class name
		        if (series.chart.styledMode) {
		            pointFormat = series.chart.tooltip.styledModeFormat(pointFormat);
		        }

		        // Loop over the point array map and replace unformatted values with
		        // sprintf formatting markup
		        (series.pointArrayMap || ['y']).forEach(function (key) {
		            key = '{point.' + key; // without the closing bracket
		            if (valuePrefix || valueSuffix) {
		                pointFormat = pointFormat.replace(
		                    RegExp(key + '}', 'g'),
		                    valuePrefix + key + '}' + valueSuffix
		                );
		            }
		            pointFormat = pointFormat.replace(
		                RegExp(key + '}', 'g'),
		                key + ':,.' + valueDecimals + 'f}'
		            );
		        });

		        return format(pointFormat, {
		            point: this,
		            series: this.series
		        }, series.chart.time);
		    },

		    /**
		     * Fire an event on the Point object.
		     *
		     * @private
		     * @function Highcharts.Point#firePointEvent
		     *
		     * @param {string} eventType
		     *        Type of the event.
		     *
		     * @param {object} eventArgs
		     *        Additional event arguments.
		     *
		     * @param {Function} defaultFunction
		     *        Default event handler.
		     *
		     * @fires Highcharts.Point#event:*
		     */
		    firePointEvent: function (eventType, eventArgs, defaultFunction) {
		        var point = this,
		            series = this.series,
		            seriesOptions = series.options;

		        // load event handlers on demand to save time on mouseover/out
		        if (
		            seriesOptions.point.events[eventType] ||
		            (
		                point.options &&
		                point.options.events &&
		                point.options.events[eventType]
		            )
		        ) {
		            this.importEvents();
		        }

		        // add default handler if in selection mode
		        if (eventType === 'click' && seriesOptions.allowPointSelect) {
		            defaultFunction = function (event) {
		                // Control key is for Windows, meta (= Cmd key) for Mac, Shift
		                // for Opera.
		                if (point.select) { // #2911
		                    point.select(
		                        null,
		                        event.ctrlKey || event.metaKey || event.shiftKey
		                    );
		                }
		            };
		        }

		        fireEvent(this, eventType, eventArgs, defaultFunction);
		    },

		    /**
		     * For certain series types, like pie charts, where individual points can
		     * be shown or hidden.
		     *
		     * @name Highcharts.Point#visible
		     * @type {boolean}
		     */
		    visible: true
		};

		/**
		 * For categorized axes this property holds the category name for the
		 * point. For other axes it holds the X value.
		 *
		 * @name Highcharts.Point#category
		 * @type {number|string}
		 */

		/**
		 * The name of the point. The name can be given as the first position of the
		 * point configuration array, or as a `name` property in the configuration:
		 *
		 * @example
		 * // Array config
		 * data: [
		 *     ['John', 1],
		 *     ['Jane', 2]
		 * ]
		 *
		 * // Object config
		 * data: [{
		 *        name: 'John',
		 *        y: 1
		 * }, {
		 *     name: 'Jane',
		 *     y: 2
		 * }]
		 *
		 * @name Highcharts.Point#name
		 * @type {string}
		 */


		/**
		 * The percentage for points in a stacked series or pies.
		 *
		 * @name Highcharts.Point#percentage
		 * @type {number}
		 */

		/**
		 * The total of values in either a stack for stacked series, or a pie in a pie
		 * series.
		 *
		 * @name Highcharts.Point#total
		 * @type {number}
		 */

	}(Highcharts));
	(function (H) {
		/* *
		 *
		 *  (c) 2010-2018 Torstein Honsi
		 *
		 *  License: www.highcharts.com/license
		 *
		 * */

		/**
		 * Options to align the element relative to the chart or another box.
		 *
		 * @interface Highcharts.AlignObject
		 *//**
		 * Horizontal alignment. Can be one of `left`, `center` and `right`.
		 *
		 * @name Highcharts.AlignObject#align
		 * @type {string|undefined}
		 *
		 * @default left
		 *//**
		 * Vertical alignment. Can be one of `top`, `middle` and `bottom`.
		 *
		 * @name Highcharts.AlignObject#verticalAlign
		 * @type {string|undefined}
		 *
		 * @default top
		 *//**
		 * Horizontal pixel offset from alignment.
		 *
		 * @name Highcharts.AlignObject#x
		 * @type {number|undefined}
		 *
		 * @default 0
		 *//**
		 * Vertical pixel offset from alignment.
		 *
		 * @name Highcharts.AlignObject#y
		 * @type {number|undefined}
		 *
		 * @default 0
		 *//**
		 * Use the `transform` attribute with translateX and translateY custom
		 * attributes to align this elements rather than `x` and `y` attributes.
		 *
		 * @name Highcharts.AlignObject#alignByTranslate
		 * @type {boolean|undefined}
		 *
		 * @default false
		 */

		/**
		 * Bounding box of an element.
		 *
		 * @interface Highcharts.BBoxObject
		 *//**
		 * Height of the bounding box.
		 *
		 * @name Highcharts.BBoxObject#height
		 * @type {number}
		 *//**
		 * Width of the bounding box.
		 *
		 * @name Highcharts.BBoxObject#width
		 * @type {number}
		 *//**
		 * Horizontal position of the bounding box.
		 *
		 * @name Highcharts.BBoxObject#x
		 * @type {number}
		 *//**
		 * Vertical position of the bounding box.
		 *
		 * @name Highcharts.BBoxObject#y
		 * @type {number}
		 */

		/**
		 * A clipping rectangle that can be applied to one or more {@link SVGElement}
		 * instances. It is instanciated with the {@link SVGRenderer#clipRect} function
		 * and applied with the {@link SVGElement#clip} function.
		 *
		 * @example
		 * var circle = renderer.circle(100, 100, 100)
		 *     .attr({ fill: 'red' })
		 *     .add();
		 * var clipRect = renderer.clipRect(100, 100, 100, 100);
		 *
		 * // Leave only the lower right quarter visible
		 * circle.clip(clipRect);
		 *
		 * @typedef {Highcharts.SVGElement} Highcharts.ClipRectElement
		 */

		/**
		 * The font metrics.
		 *
		 * @interface Highcharts.FontMetricsObject
		 *//**
		 * The baseline relative to the top of the box.
		 *
		 * @name Highcharts.FontMetricsObject#b
		 * @type {number}
		 *//**
		 * The line height.
		 *
		 * @name Highcharts.FontMetricsObject#h
		 * @type {number}
		 *//**
		 * The font size.
		 *
		 * @name Highcharts.FontMetricsObject#f
		 * @type {number}
		 */

		/**
		 * Gradient options instead of a solid color.
		 *
		 * @example
		 * // Linear gradient used as a color option
		 * color: {
		 *     linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
		 *         stops: [
		 *             [0, '#003399'], // start
		 *             [0.5, '#ffffff'], // middle
		 *             [1, '#3366AA'] // end
		 *         ]
		 *     }
		 * }
		 *
		 * @interface Highcharts.GradientColorObject
		 *//**
		 * Holds an object that defines the start position and the end position relative
		 * to the shape.
		 *
		 * @name Highcharts.GradientColorObject#linearGradient
		 * @type {Highcharts.LinearGradientColorObject|undefined}
		 *//**
		 * Holds an object that defines the center position and the radius.
		 *
		 * @name Highcharts.GradientColorObject#radialGradient
		 * @type {Highcharts.RadialGradientColorObject|undefined}
		 *//**
		 * The first item in each tuple is the position in the gradient, where 0 is the
		 * start of the gradient and 1 is the end of the gradient. Multiple stops can be
		 * applied. The second item is the color for each stop. This color can also be
		 * given in the rgba format.
		 *
		 * @name Highcharts.GradientColorObject#stops
		 * @type {Array<Array<number,Highcharts.ColorString>>|undefined}
		 */

		/**
		 * Defines the start position and the end position for a gradient relative
		 * to the shape. Start position (x1, y1) and end position (x2, y2) are relative
		 * to the shape, where 0 means top/left and 1 is bottom/right.
		 *
		 * @interface Highcharts.LinearGradientColorObject
		 *//**
		 * Start horizontal position of the gradient. Float ranges 0-1.
		 *
		 * @name Highcharts.LinearGradientColorObject#x1
		 * @type {number}
		 *//**
		 * End horizontal position of the gradient. Float ranges 0-1.
		 *
		 * @name Highcharts.LinearGradientColorObject#x2
		 * @type {number}
		 *//**
		 * Start vertical position of the gradient. Float ranges 0-1.
		 *
		 * @name Highcharts.LinearGradientColorObject#y1
		 * @type {number}
		 *//**
		 * End vertical position of the gradient. Float ranges 0-1.
		 *
		 * @name Highcharts.LinearGradientColorObject#y2
		 * @type {number}
		 */

		/**
		 * Defines the center position and the radius for a gradient.
		 *
		 * @interface Highcharts.RadialGradientColorObject
		 *//**
		 * Center horizontal position relative to the shape. Float ranges 0-1.
		 *
		 * @name Highcharts.RadialGradientColorObject#cx
		 * @type {number}
		 *//**
		 * Center vertical position relative to the shape. Float ranges 0-1.
		 *
		 * @name Highcharts.RadialGradientColorObject#cy
		 * @type {number}
		 *//**
		 * Radius relative to the shape. Float ranges 0-1.
		 *
		 * @name Highcharts.RadialGradientColorObject#r
		 * @type {number}
		 */

		/**
		 * A rectangle.
		 *
		 * @interface Highcharts.RectangleObject
		 *//**
		 * Height of the rectangle.
		 *
		 * @name Highcharts.RectangleObject#height
		 * @type {number}
		 *//**
		 * Width of the rectangle.
		 *
		 * @name Highcharts.RectangleObject#width
		 * @type {number}
		 *//**
		 * Horizontal position of the rectangle.
		 *
		 * @name Highcharts.RectangleObject#x
		 * @type {number}
		 *//**
		 * Vertical position of the rectangle.
		 *
		 * @name Highcharts.RectangleObject#y
		 * @type {number}
		 */

		/**
		 * The shadow options.
		 *
		 * @interface Highcharts.ShadowOptionsObject
		 *//**
		 * The shadow color.
		 *
		 * @name Highcharts.ShadowOptionsObject#color
		 * @type {string|undefined}
		 *
		 * @default #000000
		 *//**
		 * The horizontal offset from the element.
		 *
		 * @name Highcharts.ShadowOptionsObject#offsetX
		 * @type {number|undefined}
		 *
		 * @default 1
		 *//**
		 * The vertical offset from the element.
		 *
		 * @name Highcharts.ShadowOptionsObject#offsetY
		 * @type {number|undefined}
		 *
		 * @default 1
		 *//**
		 * The shadow opacity.
		 *
		 * @name Highcharts.ShadowOptionsObject#opacity
		 * @type {number|undefined}
		 *
		 * @default 0.15
		 *//**
		 * The shadow width or distance from the element.
		 *
		 * @name Highcharts.ShadowOptionsObject#width
		 * @type {number|undefined}
		 *
		 * @default 3
		 */

		/**
		 * Serialized form of an SVG definition, including children. Some key
		 * property names are reserved: tagName, textContent, and children.
		 *
		 * @interface Highcharts.SVGDefinitionObject
		 *//**
		 * @name Highcharts.SVGDefinitionObject#[key:string]
		 * @type {number|string|Array<Highcharts.SVGDefinitionObject>|undefined}
		 *//**
		 * @name Highcharts.SVGDefinitionObject#children
		 * @type {Array<Highcharts.SVGDefinitionObject>|undefined}
		 *//**
		 * @name Highcharts.SVGDefinitionObject#tagName
		 * @type {string|undefined}
		 *//**
		 * @name Highcharts.SVGDefinitionObject#textContent
		 * @type {string|undefined}
		 */

		/**
		 * An extendable collection of functions for defining symbol paths.
		 *
		 * @typedef Highcharts.SymbolDictionary
		 *
		 * @property {Function|undefined} [key:Highcharts.SymbolKey]
		 */

		/**
		 * Can be one of `arc`, `callout`, `circle`, `diamond`, `square`,
		 * `triangle`, `triangle-down`. Symbols are used internally for point
		 * markers, button and label borders and backgrounds, or custom shapes.
		 * Extendable by adding to {@link SVGRenderer#symbols}.
		 *
		 * @typedef {string} Highcharts.SymbolKey
		 * @validvalue ["arc", "callout", "circle", "diamond", "square", "triangle",
		 *             "triangle-down"]
		 */

		/**
		 * Additional options, depending on the actual symbol drawn.
		 *
		 * @interface Highcharts.SymbolOptionsObject
		 *//**
		 * The anchor X position for the `callout` symbol. This is where the chevron
		 * points to.
		 *
		 * @name Highcharts.SymbolOptionsObject#anchorX
		 * @type {number}
		 *//**
		 * The anchor Y position for the `callout` symbol. This is where the chevron
		 * points to.
		 *
		 * @name Highcharts.SymbolOptionsObject#anchorY
		 * @type {number}
		 *//**
		 * The end angle of an `arc` symbol.
		 *
		 * @name Highcharts.SymbolOptionsObject#end
		 * @type {number}
		 *//**
		 * Whether to draw `arc` symbol open or closed.
		 *
		 * @name Highcharts.SymbolOptionsObject#open
		 * @type {boolean}
		 *//**
		 * The radius of an `arc` symbol, or the border radius for the `callout` symbol.
		 *
		 * @name Highcharts.SymbolOptionsObject#r
		 * @type {number}
		 *//**
		 * The start angle of an `arc` symbol.
		 *
		 * @name Highcharts.SymbolOptionsObject#start
		 * @type {number}
		 */



		var SVGElement,
		    SVGRenderer,

		    addEvent = H.addEvent,
		    animate = H.animate,
		    attr = H.attr,
		    charts = H.charts,
		    color = H.color,
		    css = H.css,
		    createElement = H.createElement,
		    defined = H.defined,
		    deg2rad = H.deg2rad,
		    destroyObjectProperties = H.destroyObjectProperties,
		    doc = H.doc,
		    extend = H.extend,
		    erase = H.erase,
		    hasTouch = H.hasTouch,
		    isArray = H.isArray,
		    isFirefox = H.isFirefox,
		    isMS = H.isMS,
		    isObject = H.isObject,
		    isString = H.isString,
		    isWebKit = H.isWebKit,
		    merge = H.merge,
		    noop = H.noop,
		    objectEach = H.objectEach,
		    pick = H.pick,
		    pInt = H.pInt,
		    removeEvent = H.removeEvent,
		    splat = H.splat,
		    stop = H.stop,
		    svg = H.svg,
		    SVG_NS = H.SVG_NS,
		    symbolSizes = H.symbolSizes,
		    win = H.win;

		/**
		 * The SVGElement prototype is a JavaScript wrapper for SVG elements used in the
		 * rendering layer of Highcharts. Combined with the {@link
		 * Highcharts.SVGRenderer} object, these prototypes allow freeform annotation
		 * in the charts or even in HTML pages without instanciating a chart. The
		 * SVGElement can also wrap HTML labels, when `text` or `label` elements are
		 * created with the `useHTML` parameter.
		 *
		 * The SVGElement instances are created through factory functions on the {@link
		 * Highcharts.SVGRenderer} object, like {@link Highcharts.SVGRenderer#rect|
		 * rect}, {@link Highcharts.SVGRenderer#path|path}, {@link
		 * Highcharts.SVGRenderer#text|text}, {@link Highcharts.SVGRenderer#label|
		 * label}, {@link Highcharts.SVGRenderer#g|g} and more.
		 *
		 * @class
		 * @name Highcharts.SVGElement
		 */
		SVGElement = H.SVGElement = function () {
		    return this;
		};
		extend(SVGElement.prototype, /** @lends Highcharts.SVGElement.prototype */ {

		    // Default base for animation
		    opacity: 1,
		    SVG_NS: SVG_NS,

		    /**
		     * For labels, these CSS properties are applied to the `text` node directly.
		     *
		     * @private
		     * @name Highcharts.SVGElement#textProps
		     * @type {Array<string>}
		     */
		    textProps: ['direction', 'fontSize', 'fontWeight', 'fontFamily',
		        'fontStyle', 'color', 'lineHeight', 'width', 'textAlign',
		        'textDecoration', 'textOverflow', 'textOutline', 'cursor'],

		    /**
		     * Initialize the SVG element. This function only exists to make the
		     * initiation process overridable. It should not be called directly.
		     *
		     * @function Highcharts.SVGElement#init
		     *
		     * @param {Highcharts.SVGRenderer} renderer
		     *        The SVGRenderer instance to initialize to.
		     *
		     * @param {string} nodeName
		     *        The SVG node name.
		     */
		    init: function (renderer, nodeName) {

		        /**
		         * The primary DOM node. Each `SVGElement` instance wraps a main DOM
		         * node, but may also represent more nodes.
		         *
		         * @name Highcharts.SVGElement#element
		         * @type {Highcharts.SVGDOMElement|Highcharts.HTMLDOMElement}
		         */
		        this.element = nodeName === 'span' ?
		            createElement(nodeName) :
		            doc.createElementNS(this.SVG_NS, nodeName);

		        /**
		         * The renderer that the SVGElement belongs to.
		         *
		         * @name Highcharts.SVGElement#renderer
		         * @type {Highcharts.SVGRenderer}
		         */
		        this.renderer = renderer;
		    },

		    /**
		     * Animate to given attributes or CSS properties.
		     *
		     * @sample highcharts/members/element-on/
		     *         Setting some attributes by animation
		     *
		     * @function Highcharts.SVGElement#animate
		     *
		     * @param {Highcharts.SVGAttributes} params
		     *        SVG attributes or CSS to animate.
		     *
		     * @param {Highcharts.AnimationOptionsObject} [options]
		     *        Animation options.
		     *
		     * @param {Function} [complete]
		     *        Function to perform at the end of animation.
		     *
		     * @return {Highcharts.SVGElement}
		     *         Returns the SVGElement for chaining.
		     */
		    animate: function (params, options, complete) {
		        var animOptions = H.animObject(
		            pick(options, this.renderer.globalAnimation, true)
		        );
		        if (animOptions.duration !== 0) {
		            // allows using a callback with the global animation without
		            // overwriting it
		            if (complete) {
		                animOptions.complete = complete;
		            }
		            animate(this, params, animOptions);
		        } else {
		            this.attr(params, null, complete);
		            if (animOptions.step) {
		                animOptions.step.call(this);
		            }
		        }
		        return this;
		    },

		    /**
		     * Build and apply an SVG gradient out of a common JavaScript configuration
		     * object. This function is called from the attribute setters. An event
		     * hook is added for supporting other complex color types.
		     *
		     * @private
		     * @function Highcharts.SVGElement#complexColor
		     *
		     * @param {Highcharts.GradientColorObject} color
		     *        The gradient options structure.
		     *
		     * @param {string} prop
		     *        The property to apply, can either be `fill` or `stroke`.
		     *
		     * @param {Highcharts.SVGDOMElement} elem
		     *        SVG DOM element to apply the gradient on.
		     */
		    complexColor: function (color, prop, elem) {
		        var renderer = this.renderer,
		            colorObject,
		            gradName,
		            gradAttr,
		            radAttr,
		            gradients,
		            gradientObject,
		            stops,
		            stopColor,
		            stopOpacity,
		            radialReference,
		            id,
		            key = [],
		            value;

		        H.fireEvent(this.renderer, 'complexColor', {
		            args: arguments
		        }, function () {
		            // Apply linear or radial gradients
		            if (color.radialGradient) {
		                gradName = 'radialGradient';
		            } else if (color.linearGradient) {
		                gradName = 'linearGradient';
		            }

		            if (gradName) {
		                gradAttr = color[gradName];
		                gradients = renderer.gradients;
		                stops = color.stops;
		                radialReference = elem.radialReference;

		                // Keep < 2.2 kompatibility
		                if (isArray(gradAttr)) {
		                    color[gradName] = gradAttr = {
		                        x1: gradAttr[0],
		                        y1: gradAttr[1],
		                        x2: gradAttr[2],
		                        y2: gradAttr[3],
		                        gradientUnits: 'userSpaceOnUse'
		                    };
		                }

		                // Correct the radial gradient for the radial reference system
		                if (
		                    gradName === 'radialGradient' &&
		                    radialReference &&
		                    !defined(gradAttr.gradientUnits)
		                ) {
		                    // Save the radial attributes for updating
		                    radAttr = gradAttr;
		                    gradAttr = merge(
		                        gradAttr,
		                        renderer.getRadialAttr(radialReference, radAttr),
		                        { gradientUnits: 'userSpaceOnUse' }
		                    );
		                }

		                // Build the unique key to detect whether we need to create a
		                // new element (#1282)
		                objectEach(gradAttr, function (val, n) {
		                    if (n !== 'id') {
		                        key.push(n, val);
		                    }
		                });
		                objectEach(stops, function (val) {
		                    key.push(val);
		                });
		                key = key.join(',');

		                // Check if a gradient object with the same config object is
		                // created within this renderer
		                if (gradients[key]) {
		                    id = gradients[key].attr('id');

		                } else {

		                    // Set the id and create the element
		                    gradAttr.id = id = H.uniqueKey();
		                    gradients[key] = gradientObject =
		                        renderer.createElement(gradName)
		                            .attr(gradAttr)
		                            .add(renderer.defs);

		                    gradientObject.radAttr = radAttr;

		                    // The gradient needs to keep a list of stops to be able to
		                    // destroy them
		                    gradientObject.stops = [];
		                    stops.forEach(function (stop) {
		                        var stopObject;
		                        if (stop[1].indexOf('rgba') === 0) {
		                            colorObject = H.color(stop[1]);
		                            stopColor = colorObject.get('rgb');
		                            stopOpacity = colorObject.get('a');
		                        } else {
		                            stopColor = stop[1];
		                            stopOpacity = 1;
		                        }
		                        stopObject = renderer.createElement('stop').attr({
		                            offset: stop[0],
		                            'stop-color': stopColor,
		                            'stop-opacity': stopOpacity
		                        }).add(gradientObject);

		                        // Add the stop element to the gradient
		                        gradientObject.stops.push(stopObject);
		                    });
		                }

		                // Set the reference to the gradient object
		                value = 'url(' + renderer.url + '#' + id + ')';
		                elem.setAttribute(prop, value);
		                elem.gradient = key;

		                // Allow the color to be concatenated into tooltips formatters
		                // etc. (#2995)
		                color.toString = function () {
		                    return value;
		                };
		            }
		        });
		    },

		    /**
		     * Apply a text outline through a custom CSS property, by copying the text
		     * element and apply stroke to the copy. Used internally. Contrast checks at
		     * [example](https://jsfiddle.net/highcharts/43soe9m1/2/).
		     *
		     * @example
		     * // Specific color
		     * text.css({
		     *    textOutline: '1px black'
		     * });
		     * // Automatic contrast
		     * text.css({
		     *    color: '#000000', // black text
		     *    textOutline: '1px contrast' // => white outline
		     * });
		     *
		     * @private
		     * @function Highcharts.SVGElement#applyTextOutline
		     *
		     * @param {string} textOutline
		     *        A custom CSS `text-outline` setting, defined by `width color`.
		     */
		    applyTextOutline: function (textOutline) {
		        var elem = this.element,
		            tspans,
		            tspan,
		            hasContrast = textOutline.indexOf('contrast') !== -1,
		            styles = {},
		            color,
		            strokeWidth,
		            firstRealChild,
		            i;

		        // When the text shadow is set to contrast, use dark stroke for light
		        // text and vice versa.
		        if (hasContrast) {
		            styles.textOutline = textOutline = textOutline.replace(
		                /contrast/g,
		                this.renderer.getContrast(elem.style.fill)
		            );
		        }

		        // Extract the stroke width and color
		        textOutline = textOutline.split(' ');
		        color = textOutline[textOutline.length - 1];
		        strokeWidth = textOutline[0];

		        if (strokeWidth && strokeWidth !== 'none' && H.svg) {

		            this.fakeTS = true; // Fake text shadow

		            tspans = [].slice.call(elem.getElementsByTagName('tspan'));

		            // In order to get the right y position of the clone,
		            // copy over the y setter
		            this.ySetter = this.xSetter;

		            // Since the stroke is applied on center of the actual outline, we
		            // need to double it to get the correct stroke-width outside the
		            // glyphs.
		            strokeWidth = strokeWidth.replace(
		                /(^[\d\.]+)(.*?)$/g,
		                function (match, digit, unit) {
		                    return (2 * digit) + unit;
		                }
		            );

		            // Remove shadows from previous runs. Iterate from the end to
		            // support removing items inside the cycle (#6472).
		            i = tspans.length;
		            while (i--) {
		                tspan = tspans[i];
		                if (tspan.getAttribute('class') === 'highcharts-text-outline') {
		                    // Remove then erase
		                    erase(tspans, elem.removeChild(tspan));
		                }
		            }

		            // For each of the tspans, create a stroked copy behind it.
		            firstRealChild = elem.firstChild;
		            tspans.forEach(function (tspan, y) {
		                var clone;

		                // Let the first line start at the correct X position
		                if (y === 0) {
		                    tspan.setAttribute('x', elem.getAttribute('x'));
		                    y = elem.getAttribute('y');
		                    tspan.setAttribute('y', y || 0);
		                    if (y === null) {
		                        elem.setAttribute('y', 0);
		                    }
		                }

		                // Create the clone and apply outline properties
		                clone = tspan.cloneNode(1);
		                attr(clone, {
		                    'class': 'highcharts-text-outline',
		                    'fill': color,
		                    'stroke': color,
		                    'stroke-width': strokeWidth,
		                    'stroke-linejoin': 'round'
		                });
		                elem.insertBefore(clone, firstRealChild);
		            });
		        }
		    },

		    // Custom attributes used for symbols, these should be filtered out when
		    // setting SVGElement attributes (#9375).
		    symbolCustomAttribs: [
		        'x',
		        'y',
		        'width',
		        'height',
		        'r',
		        'start',
		        'end',
		        'innerR',
		        'anchorX',
		        'anchorY',
		        'rounded'
		    ],

		    /**
		     * Apply native and custom attributes to the SVG elements.
		     *
		     * In order to set the rotation center for rotation, set x and y to 0 and
		     * use `translateX` and `translateY` attributes to position the element
		     * instead.
		     *
		     * Attributes frequently used in Highcharts are `fill`, `stroke`,
		     * `stroke-width`.
		     *
		     * @sample highcharts/members/renderer-rect/
		     *         Setting some attributes
		     *
		     * @example
		     * // Set multiple attributes
		     * element.attr({
		     *     stroke: 'red',
		     *     fill: 'blue',
		     *     x: 10,
		     *     y: 10
		     * });
		     *
		     * // Set a single attribute
		     * element.attr('stroke', 'red');
		     *
		     * // Get an attribute
		     * element.attr('stroke'); // => 'red'
		     *
		     * @function Highcharts.SVGElement#attr
		     *
		     * @param {string|Highcharts.SVGAttributes} [hash]
		     *        The native and custom SVG attributes.
		     *
		     * @param {string} [val]
		     *        If the type of the first argument is `string`, the second can be a
		     *        value, which will serve as a single attribute setter. If the first
		     *        argument is a string and the second is undefined, the function
		     *        serves as a getter and the current value of the property is
		     *        returned.
		     *
		     * @param {Function} [complete]
		     *        A callback function to execute after setting the attributes. This
		     *        makes the function compliant and interchangeable with the
		     *        {@link SVGElement#animate} function.
		     *
		     * @param {boolean} [continueAnimation=true]
		     *        Used internally when `.attr` is called as part of an animation
		     *        step. Otherwise, calling `.attr` for an attribute will stop
		     *        animation for that attribute.
		     *
		     * @return {number|string|Highcharts.SVGElement}
		     *         If used as a setter, it returns the current
		     *         {@link Highcharts.SVGElement} so the calls can be chained. If
		     *         used as a getter, the current value of the attribute is returned.
		     */
		    attr: function (hash, val, complete, continueAnimation) {
		        var key,
		            element = this.element,
		            hasSetSymbolSize,
		            ret = this,
		            skipAttr,
		            setter,
		            symbolCustomAttribs = this.symbolCustomAttribs;

		        // single key-value pair
		        if (typeof hash === 'string' && val !== undefined) {
		            key = hash;
		            hash = {};
		            hash[key] = val;
		        }

		        // used as a getter: first argument is a string, second is undefined
		        if (typeof hash === 'string') {
		            ret = (this[hash + 'Getter'] || this._defaultGetter).call(
		                this,
		                hash,
		                element
		            );

		        // setter
		        } else {

		            objectEach(hash, function eachAttribute(val, key) {
		                skipAttr = false;

		                // Unless .attr is from the animator update, stop current
		                // running animation of this property
		                if (!continueAnimation) {
		                    stop(this, key);
		                }

		                // Special handling of symbol attributes
		                if (
		                    this.symbolName &&
		                    H.inArray(key, symbolCustomAttribs) !== -1
		                ) {
		                    if (!hasSetSymbolSize) {
		                        this.symbolAttr(hash);
		                        hasSetSymbolSize = true;
		                    }
		                    skipAttr = true;
		                }

		                if (this.rotation && (key === 'x' || key === 'y')) {
		                    this.doTransform = true;
		                }

		                if (!skipAttr) {
		                    setter = this[key + 'Setter'] || this._defaultSetter;
		                    setter.call(this, val, key, element);

		                    // Let the shadow follow the main element
		                    if (
		                        !this.styledMode &&
		                        this.shadows &&
		                        /^(width|height|visibility|x|y|d|transform|cx|cy|r)$/
		                            .test(key)
		                    ) {
		                        this.updateShadows(key, val, setter);
		                    }
		                }
		            }, this);

		            this.afterSetters();
		        }

		        // In accordance with animate, run a complete callback
		        if (complete) {
		            complete.call(this);
		        }

		        return ret;
		    },

		    /**
		     * This method is executed in the end of `attr()`, after setting all
		     * attributes in the hash. In can be used to efficiently consolidate
		     * multiple attributes in one SVG property -- e.g., translate, rotate and
		     * scale are merged in one "transform" attribute in the SVG node.
		     *
		     * @private
		     * @function Highcharts.SVGElement#afterSetters
		     */
		    afterSetters: function () {
		        // Update transform. Do this outside the loop to prevent redundant
		        // updating for batch setting of attributes.
		        if (this.doTransform) {
		            this.updateTransform();
		            this.doTransform = false;
		        }
		    },

		    /**
		     * Update the shadow elements with new attributes.
		     *
		     * @private
		     * @function Highcharts.SVGElement#updateShadows
		     *
		     * @param {string} key
		     *        The attribute name.
		     *
		     * @param {string|number} value
		     *        The value of the attribute.
		     *
		     * @param {Function} setter
		     *        The setter function, inherited from the parent wrapper.
		     */
		    updateShadows: function (key, value, setter) {
		        var shadows = this.shadows,
		            i = shadows.length;

		        while (i--) {
		            setter.call(
		                shadows[i],
		                key === 'height' ?
		                    Math.max(value - (shadows[i].cutHeight || 0), 0) :
		                    key === 'd' ? this.d : value,
		                key,
		                shadows[i]
		            );
		        }
		    },

		    /**
		     * Add a class name to an element.
		     *
		     * @function Highcharts.SVGElement#addClass
		     *
		     * @param {string} className
		     *        The new class name to add.
		     *
		     * @param {boolean} [replace=false]
		     *        When true, the existing class name(s) will be overwritten with
		     *        the new one. When false, the new one is added.
		     *
		     * @return {Highcharts.SVGElement}
		     *         Return the SVG element for chainability.
		     */
		    addClass: function (className, replace) {
		        var currentClassName = this.attr('class') || '';
		        if (currentClassName.indexOf(className) === -1) {
		            if (!replace) {
		                className =
		                    (currentClassName + (currentClassName ? ' ' : '') +
		                    className).replace('  ', ' ');
		            }
		            this.attr('class', className);
		        }

		        return this;
		    },

		    /**
		     * Check if an element has the given class name.
		     *
		     * @function Highcharts.SVGElement#hasClass
		     *
		     * @param {string} className
		     *        The class name to check for.
		     *
		     * @return {boolean}
		     *         Whether the class name is found.
		     */
		    hasClass: function (className) {
		        return (this.attr('class') || '').split(' ').indexOf(className) !== -1;
		    },

		    /**
		     * Remove a class name from the element.
		     *
		     * @function Highcharts.SVGElement#removeClass
		     *
		     * @param {string|RegExp} className
		     *        The class name to remove.
		     *
		     * @return {Highcharts.SVGElement} Returns the SVG element for chainability.
		     */
		    removeClass: function (className) {
		        return this.attr(
		            'class',
		            (this.attr('class') || '').replace(className, '')
		        );
		    },

		    /**
		     * If one of the symbol size affecting parameters are changed,
		     * check all the others only once for each call to an element's
		     * .attr() method
		     *
		     * @private
		     * @function Highcharts.SVGElement#symbolAttr
		     *
		     * @param {Highcharts.Dictionary<number|string>} hash
		     *        The attributes to set.
		     */
		    symbolAttr: function (hash) {
		        var wrapper = this;

		        [
		            'x',
		            'y',
		            'r',
		            'start',
		            'end',
		            'width',
		            'height',
		            'innerR',
		            'anchorX',
		            'anchorY'
		        ].forEach(function (key) {
		            wrapper[key] = pick(hash[key], wrapper[key]);
		        });

		        wrapper.attr({
		            d: wrapper.renderer.symbols[wrapper.symbolName](
		                wrapper.x,
		                wrapper.y,
		                wrapper.width,
		                wrapper.height,
		                wrapper
		            )
		        });
		    },

		    /**
		     * Apply a clipping rectangle to this element.
		     *
		     * @function Highcharts.SVGElement#clip
		     *
		     * @param {Highcharts.ClipRectElement} [clipRect]
		     *        The clipping rectangle. If skipped, the current clip is removed.
		     *
		     * @return {Highcharts.SVGElement}
		     *         Returns the SVG element to allow chaining.
		     */
		    clip: function (clipRect) {
		        return this.attr(
		            'clip-path',
		            clipRect ?
		                'url(' + this.renderer.url + '#' + clipRect.id + ')' :
		                'none'
		        );
		    },

		    /**
		     * Calculate the coordinates needed for drawing a rectangle crisply and
		     * return the calculated attributes.
		     *
		     * @function Highcharts.SVGElement#crisp
		     *
		     * @param {Highcharts.RectangleObject} rect
		     *        Rectangle to crisp.
		     *
		     * @param {number} [strokeWidth]
		     *        The stroke width to consider when computing crisp positioning. It
		     *        can also be set directly on the rect parameter.
		     *
		     * @return {Highcharts.RectangleObject}
		     *         The modified rectangle arguments.
		     */
		    crisp: function (rect, strokeWidth) {

		        var wrapper = this,
		            normalizer;

		        strokeWidth = strokeWidth || rect.strokeWidth || 0;
		        // Math.round because strokeWidth can sometimes have roundoff errors
		        normalizer = Math.round(strokeWidth) % 2 / 2;

		        // normalize for crisp edges
		        rect.x = Math.floor(rect.x || wrapper.x || 0) + normalizer;
		        rect.y = Math.floor(rect.y || wrapper.y || 0) + normalizer;
		        rect.width = Math.floor(
		            (rect.width || wrapper.width || 0) - 2 * normalizer
		        );
		        rect.height = Math.floor(
		            (rect.height || wrapper.height || 0) - 2 * normalizer
		        );
		        if (defined(rect.strokeWidth)) {
		            rect.strokeWidth = strokeWidth;
		        }
		        return rect;
		    },

		    /**
		     * Set styles for the element. In addition to CSS styles supported by
		     * native SVG and HTML elements, there are also some custom made for
		     * Highcharts, like `width`, `ellipsis` and `textOverflow` for SVG text
		     * elements.
		     *
		     * @sample highcharts/members/renderer-text-on-chart/
		     *         Styled text
		     *
		     * @function Highcharts.SVGElement#css
		     *
		     * @param {Highcharts.CSSObject} styles
		     *        The new CSS styles.
		     *
		     * @return {Highcharts.SVGElement}
		     *         Return the SVG element for chaining.
		     */
		    css: function (styles) {
		        var oldStyles = this.styles,
		            newStyles = {},
		            elem = this.element,
		            textWidth,
		            serializedCss = '',
		            hyphenate,
		            hasNew = !oldStyles,
		            // These CSS properties are interpreted internally by the SVG
		            // renderer, but are not supported by SVG and should not be added to
		            // the DOM. In styled mode, no CSS should find its way to the DOM
		            // whatsoever (#6173, #6474).
		            svgPseudoProps = ['textOutline', 'textOverflow', 'width'];

		        // convert legacy
		        if (styles && styles.color) {
		            styles.fill = styles.color;
		        }

		        // Filter out existing styles to increase performance (#2640)
		        if (oldStyles) {
		            objectEach(styles, function (style, n) {
		                if (style !== oldStyles[n]) {
		                    newStyles[n] = style;
		                    hasNew = true;
		                }
		            });
		        }
		        if (hasNew) {

		            // Merge the new styles with the old ones
		            if (oldStyles) {
		                styles = extend(
		                    oldStyles,
		                    newStyles
		                );
		            }

		            // Get the text width from style
		            if (styles) {
		                // Previously set, unset it (#8234)
		                if (styles.width === null || styles.width === 'auto') {
		                    delete this.textWidth;

		                // Apply new
		                } else if (
		                    elem.nodeName.toLowerCase() === 'text' &&
		                    styles.width
		                ) {
		                    textWidth = this.textWidth = pInt(styles.width);
		                }
		            }

		            // store object
		            this.styles = styles;

		            if (textWidth && (!svg && this.renderer.forExport)) {
		                delete styles.width;
		            }

		            // Serialize and set style attribute
		            if (elem.namespaceURI === this.SVG_NS) { // #7633
		                hyphenate = function (a, b) {
		                    return '-' + b.toLowerCase();
		                };
		                objectEach(styles, function (style, n) {
		                    if (svgPseudoProps.indexOf(n) === -1) {
		                        serializedCss +=
		                        n.replace(/([A-Z])/g, hyphenate) + ':' +
		                        style + ';';
		                    }
		                });
		                if (serializedCss) {
		                    attr(elem, 'style', serializedCss); // #1881
		                }
		            } else {
		                css(elem, styles);
		            }


		            if (this.added) {

		                // Rebuild text after added. Cache mechanisms in the buildText
		                // will prevent building if there are no significant changes.
		                if (this.element.nodeName === 'text') {
		                    this.renderer.buildText(this);
		                }

		                // Apply text outline after added
		                if (styles && styles.textOutline) {
		                    this.applyTextOutline(styles.textOutline);
		                }
		            }
		        }

		        return this;
		    },

		    /**
		     * Get the computed style. Only in styled mode.
		     *
		     * @example
		     * chart.series[0].points[0].graphic.getStyle('stroke-width'); // => '1px'
		     *
		     * @function Highcharts.SVGElement#getStyle
		     *
		     * @param {string} prop
		     *        The property name to check for.
		     *
		     * @return {string}
		     *         The current computed value.
		     */
		    getStyle: function (prop) {
		        return win.getComputedStyle(this.element || this, '')
		            .getPropertyValue(prop);
		    },

		    /**
		     * Get the computed stroke width in pixel values. This is used extensively
		     * when drawing shapes to ensure the shapes are rendered crisp and
		     * positioned correctly relative to each other. Using
		     * `shape-rendering: crispEdges` leaves us less control over positioning,
		     * for example when we want to stack columns next to each other, or position
		     * things pixel-perfectly within the plot box.
		     *
		     * The common pattern when placing a shape is:
		     * - Create the SVGElement and add it to the DOM. In styled mode, it will
		     *   now receive a stroke width from the style sheet. In classic mode we
		     *   will add the `stroke-width` attribute.
		     * - Read the computed `elem.strokeWidth()`.
		     * - Place it based on the stroke width.
		     *
		     * @function Highcharts.SVGElement#strokeWidth
		     *
		     * @return {number}
		     *         The stroke width in pixels. Even if the given stroke widtch (in
		     *         CSS or by attributes) is based on `em` or other units, the pixel
		     *         size is returned.
		     */
		    strokeWidth: function () {

		        // In non-styled mode, read the stroke width as set by .attr
		        if (!this.renderer.styledMode) {
		            return this['stroke-width'] || 0;
		        }

		        // In styled mode, read computed stroke width
		        var val = this.getStyle('stroke-width'),
		            ret,
		            dummy;

		        // Read pixel values directly
		        if (val.indexOf('px') === val.length - 2) {
		            ret = pInt(val);

		        // Other values like em, pt etc need to be measured
		        } else {
		            dummy = doc.createElementNS(SVG_NS, 'rect');
		            attr(dummy, {
		                'width': val,
		                'stroke-width': 0
		            });
		            this.element.parentNode.appendChild(dummy);
		            ret = dummy.getBBox().width;
		            dummy.parentNode.removeChild(dummy);
		        }
		        return ret;
		    },

		    /**
		     * Add an event listener. This is a simple setter that replaces all other
		     * events of the same type, opposed to the {@link Highcharts#addEvent}
		     * function.
		     *
		     * @sample highcharts/members/element-on/
		     *         A clickable rectangle
		     *
		     * @function Highcharts.SVGElement#on
		     *
		     * @param {string} eventType
		     *        The event type. If the type is `click`, Highcharts will internally
		     *        translate it to a `touchstart` event on touch devices, to prevent
		     *        the browser from waiting for a click event from firing.
		     *
		     * @param {Function} handler
		     *        The handler callback.
		     *
		     * @return {Highcharts.SVGElement}
		     *         The SVGElement for chaining.
		     */
		    on: function (eventType, handler) {
		        var svgElement = this,
		            element = svgElement.element;

		        // touch
		        if (hasTouch && eventType === 'click') {
		            element.ontouchstart = function (e) {
		                svgElement.touchEventFired = Date.now(); // #2269
		                e.preventDefault();
		                handler.call(element, e);
		            };
		            element.onclick = function (e) {
		                if (win.navigator.userAgent.indexOf('Android') === -1 ||
		                        Date.now() - (svgElement.touchEventFired || 0) > 1100) {
		                    handler.call(element, e);
		                }
		            };
		        } else {
		            // simplest possible event model for internal use
		            element['on' + eventType] = handler;
		        }
		        return this;
		    },

		    /**
		     * Set the coordinates needed to draw a consistent radial gradient across
		     * a shape regardless of positioning inside the chart. Used on pie slices
		     * to make all the slices have the same radial reference point.
		     *
		     * @function Highcharts.SVGElement#setRadialReference
		     *
		     * @param {Array<number>} coordinates
		     *        The center reference. The format is `[centerX, centerY, diameter]`
		     *        in pixels.
		     *
		     * @return {Highcharts.SVGElement}
		     *         Returns the SVGElement for chaining.
		     */
		    setRadialReference: function (coordinates) {
		        var existingGradient = this.renderer.gradients[this.element.gradient];

		        this.element.radialReference = coordinates;

		        // On redrawing objects with an existing gradient, the gradient needs
		        // to be repositioned (#3801)
		        if (existingGradient && existingGradient.radAttr) {
		            existingGradient.animate(
		                this.renderer.getRadialAttr(
		                    coordinates,
		                    existingGradient.radAttr
		                )
		            );
		        }

		        return this;
		    },

		    /**
		     * Move an object and its children by x and y values.
		     *
		     * @function Highcharts.SVGElement#translate
		     *
		     * @param {number} x
		     *        The x value.
		     *
		     * @param {number} y
		     *        The y value.
		     */
		    translate: function (x, y) {
		        return this.attr({
		            translateX: x,
		            translateY: y
		        });
		    },

		    /**
		     * Invert a group, rotate and flip. This is used internally on inverted
		     * charts, where the points and graphs are drawn as if not inverted, then
		     * the series group elements are inverted.
		     *
		     * @function Highcharts.SVGElement#invert
		     *
		     * @param {boolean} inverted
		     *        Whether to invert or not. An inverted shape can be un-inverted by
		     *        setting it to false.
		     *
		     * @return {Highcharts.SVGElement}
		     *         Return the SVGElement for chaining.
		     */
		    invert: function (inverted) {
		        var wrapper = this;
		        wrapper.inverted = inverted;
		        wrapper.updateTransform();
		        return wrapper;
		    },

		    /**
		     * Update the transform attribute based on internal properties. Deals with
		     * the custom `translateX`, `translateY`, `rotation`, `scaleX` and `scaleY`
		     * attributes and updates the SVG `transform` attribute.
		     *
		     * @private
		     * @function Highcharts.SVGElement#updateTransform
		     */
		    updateTransform: function () {
		        var wrapper = this,
		            translateX = wrapper.translateX || 0,
		            translateY = wrapper.translateY || 0,
		            scaleX = wrapper.scaleX,
		            scaleY = wrapper.scaleY,
		            inverted = wrapper.inverted,
		            rotation = wrapper.rotation,
		            matrix = wrapper.matrix,
		            element = wrapper.element,
		            transform;

		        // Flipping affects translate as adjustment for flipping around the
		        // group's axis
		        if (inverted) {
		            translateX += wrapper.width;
		            translateY += wrapper.height;
		        }

		        // Apply translate. Nearly all transformed elements have translation,
		        // so instead of checking for translate = 0, do it always (#1767,
		        // #1846).
		        transform = ['translate(' + translateX + ',' + translateY + ')'];

		        // apply matrix
		        if (defined(matrix)) {
		            transform.push(
		                'matrix(' + matrix.join(',') + ')'
		            );
		        }

		        // apply rotation
		        if (inverted) {
		            transform.push('rotate(90) scale(-1,1)');
		        } else if (rotation) { // text rotation
		            transform.push(
		                'rotate(' + rotation + ' ' +
		                pick(this.rotationOriginX, element.getAttribute('x'), 0) +
		                ' ' +
		                pick(this.rotationOriginY, element.getAttribute('y') || 0) + ')'
		            );
		        }

		        // apply scale
		        if (defined(scaleX) || defined(scaleY)) {
		            transform.push(
		                'scale(' + pick(scaleX, 1) + ' ' + pick(scaleY, 1) + ')'
		            );
		        }

		        if (transform.length) {
		            element.setAttribute('transform', transform.join(' '));
		        }
		    },

		    /**
		     * Bring the element to the front. Alternatively, a new zIndex can be set.
		     *
		     * @sample highcharts/members/element-tofront/
		     *         Click an element to bring it to front
		     *
		     * @function Highcharts.SVGElement#toFront
		     *
		     * @return {Highcharts.SVGElement}
		     *         Returns the SVGElement for chaining.
		     */
		    toFront: function () {
		        var element = this.element;
		        element.parentNode.appendChild(element);
		        return this;
		    },


		    /**
		     * Align the element relative to the chart or another box.
		     *
		     * @function Highcharts.SVGElement#align
		     *
		     * @param {Highcharts.AlignObject} [alignOptions]
		     *        The alignment options. The function can be called without this
		     *        parameter in order to re-align an element after the box has been
		     *        updated.
		     *
		     * @param {boolean} [alignByTranslate]
		     *        Align element by translation.
		     *
		     * @param {string|Highcharts.BBoxObject} [box]
		     *        The box to align to, needs a width and height. When the box is a
		     *        string, it refers to an object in the Renderer. For example, when
		     *        box is `spacingBox`, it refers to `Renderer.spacingBox` which
		     *        holds `width`, `height`, `x` and `y` properties.
		     *
		     * @return {Highcharts.SVGElement} Returns the SVGElement for chaining.
		     */
		    align: function (alignOptions, alignByTranslate, box) {
		        var align,
		            vAlign,
		            x,
		            y,
		            attribs = {},
		            alignTo,
		            renderer = this.renderer,
		            alignedObjects = renderer.alignedObjects,
		            alignFactor,
		            vAlignFactor;

		        // First call on instanciate
		        if (alignOptions) {
		            this.alignOptions = alignOptions;
		            this.alignByTranslate = alignByTranslate;
		            if (!box || isString(box)) {
		                this.alignTo = alignTo = box || 'renderer';
		                // prevent duplicates, like legendGroup after resize
		                erase(alignedObjects, this);
		                alignedObjects.push(this);
		                box = null; // reassign it below
		            }

		        // When called on resize, no arguments are supplied
		        } else {
		            alignOptions = this.alignOptions;
		            alignByTranslate = this.alignByTranslate;
		            alignTo = this.alignTo;
		        }

		        box = pick(box, renderer[alignTo], renderer);

		        // Assign variables
		        align = alignOptions.align;
		        vAlign = alignOptions.verticalAlign;
		        x = (box.x || 0) + (alignOptions.x || 0); // default: left align
		        y = (box.y || 0) + (alignOptions.y || 0); // default: top align

		        // Align
		        if (align === 'right') {
		            alignFactor = 1;
		        } else if (align === 'center') {
		            alignFactor = 2;
		        }
		        if (alignFactor) {
		            x += (box.width - (alignOptions.width || 0)) / alignFactor;
		        }
		        attribs[alignByTranslate ? 'translateX' : 'x'] = Math.round(x);


		        // Vertical align
		        if (vAlign === 'bottom') {
		            vAlignFactor = 1;
		        } else if (vAlign === 'middle') {
		            vAlignFactor = 2;
		        }
		        if (vAlignFactor) {
		            y += (box.height - (alignOptions.height || 0)) / vAlignFactor;
		        }
		        attribs[alignByTranslate ? 'translateY' : 'y'] = Math.round(y);

		        // Animate only if already placed
		        this[this.placed ? 'animate' : 'attr'](attribs);
		        this.placed = true;
		        this.alignAttr = attribs;

		        return this;
		    },

		    /**
		     * Get the bounding box (width, height, x and y) for the element. Generally
		     * used to get rendered text size. Since this is called a lot in charts,
		     * the results are cached based on text properties, in order to save DOM
		     * traffic. The returned bounding box includes the rotation, so for example
		     * a single text line of rotation 90 will report a greater height, and a
		     * width corresponding to the line-height.
		     *
		     * @sample highcharts/members/renderer-on-chart/
		     *         Draw a rectangle based on a text's bounding box
		     *
		     * @function Highcharts.SVGElement#getBBox
		     *
		     * @param {boolean} [reload]
		     *        Skip the cache and get the updated DOM bouding box.
		     *
		     * @param {number} [rot]
		     *        Override the element's rotation. This is internally used on axis
		     *        labels with a value of 0 to find out what the bounding box would
		     *        be have been if it were not rotated.
		     *
		     * @return {Highcharts.BBoxObject}
		     *         The bounding box with `x`, `y`, `width` and `height` properties.
		     */
		    getBBox: function (reload, rot) {
		        var wrapper = this,
		            bBox, // = wrapper.bBox,
		            renderer = wrapper.renderer,
		            width,
		            height,
		            rotation,
		            rad,
		            element = wrapper.element,
		            styles = wrapper.styles,
		            fontSize,
		            textStr = wrapper.textStr,
		            toggleTextShadowShim,
		            cache = renderer.cache,
		            cacheKeys = renderer.cacheKeys,
		            isSVG = element.namespaceURI === wrapper.SVG_NS,
		            cacheKey;

		        rotation = pick(rot, wrapper.rotation);
		        rad = rotation * deg2rad;

		        fontSize = renderer.styledMode ? (
		                element &&
		                SVGElement.prototype.getStyle.call(element, 'font-size')
		            ) : (
		                styles && styles.fontSize
		            );

		        // Avoid undefined and null (#7316)
		        if (defined(textStr)) {

		            cacheKey = textStr.toString();

		            // Since numbers are monospaced, and numerical labels appear a lot
		            // in a chart, we assume that a label of n characters has the same
		            // bounding box as others of the same length. Unless there is inner
		            // HTML in the label. In that case, leave the numbers as is (#5899).
		            if (cacheKey.indexOf('<') === -1) {
		                cacheKey = cacheKey.replace(/[0-9]/g, '0');
		            }

		            // Properties that affect bounding box
		            cacheKey += [
		                '',
		                rotation || 0,
		                fontSize,
		                wrapper.textWidth, // #7874, also useHTML
		                styles && styles.textOverflow // #5968
		            ]
		            .join(',');

		        }

		        if (cacheKey && !reload) {
		            bBox = cache[cacheKey];
		        }

		        // No cache found
		        if (!bBox) {

		            // SVG elements
		            if (isSVG || renderer.forExport) {
		                try { // Fails in Firefox if the container has display: none.

		                    // When the text shadow shim is used, we need to hide the
		                    // fake shadows to get the correct bounding box (#3872)
		                    toggleTextShadowShim = this.fakeTS && function (display) {
		                        [].forEach.call(
		                            element.querySelectorAll(
		                                '.highcharts-text-outline'
		                            ),
		                            function (tspan) {
		                                tspan.style.display = display;
		                            }
		                        );
		                    };

		                    // Workaround for #3842, Firefox reporting wrong bounding
		                    // box for shadows
		                    if (toggleTextShadowShim) {
		                        toggleTextShadowShim('none');
		                    }

		                    bBox = element.getBBox ?
		                        // SVG: use extend because IE9 is not allowed to change
		                        // width and height in case of rotation (below)
		                        extend({}, element.getBBox()) : {

		                            // Legacy IE in export mode
		                            width: element.offsetWidth,
		                            height: element.offsetHeight
		                        };

		                    // #3842
		                    if (toggleTextShadowShim) {
		                        toggleTextShadowShim('');
		                    }
		                } catch (e) {}

		                // If the bBox is not set, the try-catch block above failed. The
		                // other condition is for Opera that returns a width of
		                // -Infinity on hidden elements.
		                if (!bBox || bBox.width < 0) {
		                    bBox = { width: 0, height: 0 };
		                }


		            // VML Renderer or useHTML within SVG
		            } else {

		                bBox = wrapper.htmlGetBBox();

		            }

		            // True SVG elements as well as HTML elements in modern browsers
		            // using the .useHTML option need to compensated for rotation
		            if (renderer.isSVG) {
		                width = bBox.width;
		                height = bBox.height;

		                // Workaround for wrong bounding box in IE, Edge and Chrome on
		                // Windows. With Highcharts' default font, IE and Edge report
		                // a box height of 16.899 and Chrome rounds it to 17. If this
		                // stands uncorrected, it results in more padding added below
		                // the text than above when adding a label border or background.
		                // Also vertical positioning is affected.
		                // https://jsfiddle.net/highcharts/em37nvuj/
		                // (#1101, #1505, #1669, #2568, #6213).
		                if (isSVG) {
		                    bBox.height = height = (
		                        {
		                            '11px,17': 14,
		                            '13px,20': 16
		                        }[
		                            styles && styles.fontSize + ',' + Math.round(height)
		                        ] ||
		                        height
		                    );
		                }

		                // Adjust for rotated text
		                if (rotation) {
		                    bBox.width = Math.abs(height * Math.sin(rad)) +
		                        Math.abs(width * Math.cos(rad));
		                    bBox.height = Math.abs(height * Math.cos(rad)) +
		                        Math.abs(width * Math.sin(rad));
		                }
		            }

		            // Cache it. When loading a chart in a hidden iframe in Firefox and
		            // IE/Edge, the bounding box height is 0, so don't cache it (#5620).
		            if (cacheKey && bBox.height > 0) {

		                // Rotate (#4681)
		                while (cacheKeys.length > 250) {
		                    delete cache[cacheKeys.shift()];
		                }

		                if (!cache[cacheKey]) {
		                    cacheKeys.push(cacheKey);
		                }
		                cache[cacheKey] = bBox;
		            }
		        }
		        return bBox;
		    },

		    /**
		     * Show the element after it has been hidden.
		     *
		     * @function Highcharts.SVGElement#show
		     *
		     * @param {boolean} [inherit=false]
		     *        Set the visibility attribute to `inherit` rather than `visible`.
		     *        The difference is that an element with `visibility="visible"`
		     *        will be visible even if the parent is hidden.
		     *
		     * @return {Highcharts.SVGElement}
		     *         Returns the SVGElement for chaining.
		     */
		    show: function (inherit) {
		        return this.attr({ visibility: inherit ? 'inherit' : 'visible' });
		    },

		    /**
		     * Hide the element, equivalent to setting the `visibility` attribute to
		     * `hidden`.
		     *
		     * @function Highcharts.SVGElement#hide
		     *
		     * @return {Highcharts.SVGElement}
		     *         Returns the SVGElement for chaining.
		     */
		    hide: function () {
		        return this.attr({ visibility: 'hidden' });
		    },

		    /**
		     * Fade out an element by animating its opacity down to 0, and hide it on
		     * complete. Used internally for the tooltip.
		     *
		     * @function Highcharts.SVGElement#fadeOut
		     *
		     * @param {number} [duration=150]
		     *        The fade duration in milliseconds.
		     */
		    fadeOut: function (duration) {
		        var elemWrapper = this;
		        elemWrapper.animate({
		            opacity: 0
		        }, {
		            duration: duration || 150,
		            complete: function () {
		                // #3088, assuming we're only using this for tooltips
		                elemWrapper.attr({ y: -9999 });
		            }
		        });
		    },

		    /**
		     * Add the element to the DOM. All elements must be added this way.
		     *
		     * @sample highcharts/members/renderer-g
		     *         Elements added to a group
		     *
		     * @function Highcharts.SVGElement#add
		     *
		     * @param {Highcharts.SVGElement|Highcharts.SVGDOMElement} [parent]
		     *        The parent item to add it to. If undefined, the element is added
		     *        to the {@link Highcharts.SVGRenderer.box}.
		     *
		     * @return {Highcharts.SVGElement}
		     *         Returns the SVGElement for chaining.
		     */
		    add: function (parent) {

		        var renderer = this.renderer,
		            element = this.element,
		            inserted;

		        if (parent) {
		            this.parentGroup = parent;
		        }

		        // mark as inverted
		        this.parentInverted = parent && parent.inverted;

		        // build formatted text
		        if (this.textStr !== undefined) {
		            renderer.buildText(this);
		        }

		        // Mark as added
		        this.added = true;

		        // If we're adding to renderer root, or other elements in the group
		        // have a z index, we need to handle it
		        if (!parent || parent.handleZ || this.zIndex) {
		            inserted = this.zIndexSetter();
		        }

		        // If zIndex is not handled, append at the end
		        if (!inserted) {
		            (parent ? parent.element : renderer.box).appendChild(element);
		        }

		        // fire an event for internal hooks
		        if (this.onAdd) {
		            this.onAdd();
		        }

		        return this;
		    },

		    /**
		     * Removes an element from the DOM.
		     *
		     * @private
		     * @function Highcharts.SVGElement#safeRemoveChild
		     *
		     * @param {Highcharts.SVGDOMElement|Highcharts.HTMLDOMElement} element
		     *        The DOM node to remove.
		     */
		    safeRemoveChild: function (element) {
		        var parentNode = element.parentNode;
		        if (parentNode) {
		            parentNode.removeChild(element);
		        }
		    },

		    /**
		     * Destroy the element and element wrapper and clear up the DOM and event
		     * hooks.
		     *
		     * @function Highcharts.SVGElement#destroy
		     */
		    destroy: function () {
		        var wrapper = this,
		            element = wrapper.element || {},
		            renderer = wrapper.renderer,
		            parentToClean =
		                renderer.isSVG &&
		                element.nodeName === 'SPAN' &&
		                wrapper.parentGroup,
		            grandParent,
		            ownerSVGElement = element.ownerSVGElement,
		            i,
		            clipPath = wrapper.clipPath;

		        // remove events
		        element.onclick = element.onmouseout = element.onmouseover =
		            element.onmousemove = element.point = null;
		        stop(wrapper); // stop running animations

		        if (clipPath && ownerSVGElement) {
		            // Look for existing references to this clipPath and remove them
		            // before destroying the element (#6196).
		            // The upper case version is for Edge
		            [].forEach.call(
		                ownerSVGElement.querySelectorAll('[clip-path],[CLIP-PATH]'),
		                function (el) {
		                    var clipPathAttr = el.getAttribute('clip-path'),
		                        clipPathId = clipPath.element.id;
		                    // Include the closing paranthesis in the test to rule out
		                    // id's from 10 and above (#6550). Edge puts quotes inside
		                    // the url, others not.
		                    if (
		                        clipPathAttr.indexOf('(#' + clipPathId + ')') > -1 ||
		                        clipPathAttr.indexOf('("#' + clipPathId + '")') > -1
		                    ) {
		                        el.removeAttribute('clip-path');
		                    }
		                }
		            );
		            wrapper.clipPath = clipPath.destroy();
		        }

		        // Destroy stops in case this is a gradient object
		        if (wrapper.stops) {
		            for (i = 0; i < wrapper.stops.length; i++) {
		                wrapper.stops[i] = wrapper.stops[i].destroy();
		            }
		            wrapper.stops = null;
		        }

		        // remove element
		        wrapper.safeRemoveChild(element);

		        if (!renderer.styledMode) {
		            wrapper.destroyShadows();
		        }

		        // In case of useHTML, clean up empty containers emulating SVG groups
		        // (#1960, #2393, #2697).
		        while (
		            parentToClean &&
		            parentToClean.div &&
		            parentToClean.div.childNodes.length === 0
		        ) {
		            grandParent = parentToClean.parentGroup;
		            wrapper.safeRemoveChild(parentToClean.div);
		            delete parentToClean.div;
		            parentToClean = grandParent;
		        }

		        // remove from alignObjects
		        if (wrapper.alignTo) {
		            erase(renderer.alignedObjects, wrapper);
		        }

		        objectEach(wrapper, function (val, key) {
		            delete wrapper[key];
		        });

		        return null;
		    },

		    /**
		     * Add a shadow to the element. Must be called after the element is added to
		     * the DOM. In styled mode, this method is not used, instead use `defs` and
		     * filters.
		     *
		     * @example
		     * renderer.rect(10, 100, 100, 100)
		     *     .attr({ fill: 'red' })
		     *     .shadow(true);
		     *
		     * @function Highcharts.SVGElement#shadow
		     *
		     * @param {boolean|Highcharts.ShadowOptionsObject} shadowOptions
		     *        The shadow options. If `true`, the default options are applied. If
		     *        `false`, the current shadow will be removed.
		     *
		     * @param {Highcharts.SVGElement} [group]
		     *        The SVG group element where the shadows will be applied. The
		     *        default is to add it to the same parent as the current element.
		     *        Internally, this is ised for pie slices, where all the shadows are
		     *        added to an element behind all the slices.
		     *
		     * @param {boolean} [cutOff]
		     *        Used internally for column shadows.
		     *
		     * @return {Highcharts.SVGElement}
		     *         Returns the SVGElement for chaining.
		     */
		    shadow: function (shadowOptions, group, cutOff) {
		        var shadows = [],
		            i,
		            shadow,
		            element = this.element,
		            strokeWidth,
		            shadowWidth,
		            shadowElementOpacity,

		            // compensate for inverted plot area
		            transform;

		        if (!shadowOptions) {
		            this.destroyShadows();

		        } else if (!this.shadows) {
		            shadowWidth = pick(shadowOptions.width, 3);
		            shadowElementOpacity = (shadowOptions.opacity || 0.15) /
		                shadowWidth;
		            transform = this.parentInverted ?
		                    '(-1,-1)' :
		                    '(' + pick(shadowOptions.offsetX, 1) + ', ' +
		                        pick(shadowOptions.offsetY, 1) + ')';
		            for (i = 1; i <= shadowWidth; i++) {
		                shadow = element.cloneNode(0);
		                strokeWidth = (shadowWidth * 2) + 1 - (2 * i);
		                attr(shadow, {
		                    'stroke':
		                        shadowOptions.color || '#000000',
		                    'stroke-opacity': shadowElementOpacity * i,
		                    'stroke-width': strokeWidth,
		                    'transform': 'translate' + transform,
		                    'fill': 'none'
		                });
		                shadow.setAttribute(
		                    'class',
		                    (shadow.getAttribute('class') || '') + ' highcharts-shadow'
		                );
		                if (cutOff) {
		                    attr(
		                        shadow,
		                        'height',
		                        Math.max(attr(shadow, 'height') - strokeWidth, 0)
		                    );
		                    shadow.cutHeight = strokeWidth;
		                }

		                if (group) {
		                    group.element.appendChild(shadow);
		                } else if (element.parentNode) {
		                    element.parentNode.insertBefore(shadow, element);
		                }

		                shadows.push(shadow);
		            }

		            this.shadows = shadows;
		        }
		        return this;

		    },

		    /**
		     * Destroy shadows on the element.
		     *
		     * @private
		     * @function Highcharts.SVGElement#destroyShadows
		     */
		    destroyShadows: function () {
		        (this.shadows || []).forEach(function (shadow) {
		            this.safeRemoveChild(shadow);
		        }, this);
		        this.shadows = undefined;
		    },

		    /**
		     * @private
		     * @function Highcharts.SVGElement#xGetter
		     *
		     * @param {string} key
		     *
		     * @return {number|string|null}
		     */
		    xGetter: function (key) {
		        if (this.element.nodeName === 'circle') {
		            if (key === 'x') {
		                key = 'cx';
		            } else if (key === 'y') {
		                key = 'cy';
		            }
		        }
		        return this._defaultGetter(key);
		    },

		    /**
		     * Get the current value of an attribute or pseudo attribute,
		     * used mainly for animation. Called internally from
		     * the {@link Highcharts.SVGRenderer#attr} function.
		     *
		     * @private
		     * @function Highcharts.SVGElement#_defaultGetter
		     *
		     * @param {string} key
		     *        Property key.
		     *
		     * @return {number|string|null}
		     *         Property value.
		     */
		    _defaultGetter: function (key) {
		        var ret = pick(
		            this[key + 'Value'], // align getter
		            this[key],
		            this.element ? this.element.getAttribute(key) : null,
		            0
		        );

		        if (/^[\-0-9\.]+$/.test(ret)) { // is numerical
		            ret = parseFloat(ret);
		        }
		        return ret;
		    },

		    /**
		     * @private
		     * @function Highcharts.SVGElement#dSettter
		     *
		     * @param {number|string|Highcharts.SVGPathArray} value
		     *
		     * @param {string} key
		     *
		     * @param {Highcharts.SVGDOMElement} element
		     */
		    dSetter: function (value, key, element) {
		        if (value && value.join) { // join path
		            value = value.join(' ');
		        }
		        if (/(NaN| {2}|^$)/.test(value)) {
		            value = 'M 0 0';
		        }

		        // Check for cache before resetting. Resetting causes disturbance in the
		        // DOM, causing flickering in some cases in Edge/IE (#6747). Also
		        // possible performance gain.
		        if (this[key] !== value) {
		            element.setAttribute(key, value);
		            this[key] = value;
		        }

		    },

		    /**
		     * @private
		     * @function Highcharts.SVGElement#dashstyleSetter
		     *
		     * @param {string} value
		     */
		    dashstyleSetter: function (value) {
		        var i,
		            strokeWidth = this['stroke-width'];

		        // If "inherit", like maps in IE, assume 1 (#4981). With HC5 and the new
		        // strokeWidth function, we should be able to use that instead.
		        if (strokeWidth === 'inherit') {
		            strokeWidth = 1;
		        }
		        value = value && value.toLowerCase();
		        if (value) {
		            value = value
		                .replace('shortdashdotdot', '3,1,1,1,1,1,')
		                .replace('shortdashdot', '3,1,1,1')
		                .replace('shortdot', '1,1,')
		                .replace('shortdash', '3,1,')
		                .replace('longdash', '8,3,')
		                .replace(/dot/g, '1,3,')
		                .replace('dash', '4,3,')
		                .replace(/,$/, '')
		                .split(','); // ending comma

		            i = value.length;
		            while (i--) {
		                value[i] = pInt(value[i]) * strokeWidth;
		            }
		            value = value.join(',')
		                .replace(/NaN/g, 'none'); // #3226
		            this.element.setAttribute('stroke-dasharray', value);
		        }
		    },

		    /**
		     * @private
		     * @function Highcharts.SVGElement#alignSetter
		     *
		     * @param {"start"|"middle"|"end"} value
		     */
		    alignSetter: function (value) {
		        var convert = { left: 'start', center: 'middle', right: 'end' };
		        this.alignValue = value;
		        this.element.setAttribute('text-anchor', convert[value]);
		    },
		    /**
		     * @private
		     * @function Highcharts.SVGElement#opacitySetter
		     *
		     * @param {string} value
		     *
		     * @param {string} key
		     *
		     * @param {Highcharts.SVGDOMElement} element
		     */
		    opacitySetter: function (value, key, element) {
		        this[key] = value;
		        element.setAttribute(key, value);
		    },
		    /**
		     * @private
		     * @function Highcharts.SVGElement#titleSetter
		     *
		     * @param {string} value
		     */
		    titleSetter: function (value) {
		        var titleNode = this.element.getElementsByTagName('title')[0];
		        if (!titleNode) {
		            titleNode = doc.createElementNS(this.SVG_NS, 'title');
		            this.element.appendChild(titleNode);
		        }

		        // Remove text content if it exists
		        if (titleNode.firstChild) {
		            titleNode.removeChild(titleNode.firstChild);
		        }

		        titleNode.appendChild(
		            doc.createTextNode(
		                // #3276, #3895
		                (String(pick(value), ''))
		                    .replace(/<[^>]*>/g, '')
		                    .replace(/&lt;/g, '<')
		                    .replace(/&gt;/g, '>')
		            )
		        );
		    },
		    /**
		     * @private
		     * @function Highcharts.SVGElement#textSetter
		     *
		     * @param {string} value
		     */
		    textSetter: function (value) {
		        if (value !== this.textStr) {
		            // Delete bBox memo when the text changes
		            delete this.bBox;

		            this.textStr = value;
		            if (this.added) {
		                this.renderer.buildText(this);
		            }
		        }
		    },
		    /**
		     * @private
		     * @function Highcharts.SVGElement#fillSetter
		     *
		     * @param {Highcharts.Color|Highcharts.ColorString} value
		     *
		     * @param {string} key
		     *
		     * @param {Highcharts.SVGDOMElement} element
		     */
		    fillSetter: function (value, key, element) {
		        if (typeof value === 'string') {
		            element.setAttribute(key, value);
		        } else if (value) {
		            this.complexColor(value, key, element);
		        }
		    },
		    /**
		     * @private
		     * @function Highcharts.SVGElement#visibilitySetter
		     *
		     * @param {string} value
		     *
		     * @param {string} key
		     *
		     * @param {Highcharts.SVGDOMElement} element
		     */
		    visibilitySetter: function (value, key, element) {
		        // IE9-11 doesn't handle visibilty:inherit well, so we remove the
		        // attribute instead (#2881, #3909)
		        if (value === 'inherit') {
		            element.removeAttribute(key);
		        } else if (this[key] !== value) { // #6747
		            element.setAttribute(key, value);
		        }
		        this[key] = value;
		    },
		    /**
		     * @private
		     * @function Highcharts.SVGElement#zIndexSetter
		     *
		     * @param {string} value
		     *
		     * @param {string} key
		     *
		     * @return {boolean}
		     */
		    zIndexSetter: function (value, key) {
		        var renderer = this.renderer,
		            parentGroup = this.parentGroup,
		            parentWrapper = parentGroup || renderer,
		            parentNode = parentWrapper.element || renderer.box,
		            childNodes,
		            otherElement,
		            otherZIndex,
		            element = this.element,
		            inserted,
		            undefinedOtherZIndex,
		            svgParent = parentNode === renderer.box,
		            run = this.added,
		            i;

		        if (defined(value)) {
		            // So we can read it for other elements in the group
		            element.setAttribute('data-z-index', value);

		            value = +value;
		            if (this[key] === value) { // Only update when needed (#3865)
		                run = false;
		            }
		        } else if (defined(this[key])) {
		            element.removeAttribute('data-z-index');
		        }

		        this[key] = value;

		        // Insert according to this and other elements' zIndex. Before .add() is
		        // called, nothing is done. Then on add, or by later calls to
		        // zIndexSetter, the node is placed on the right place in the DOM.
		        if (run) {
		            value = this.zIndex;

		            if (value && parentGroup) {
		                parentGroup.handleZ = true;
		            }

		            childNodes = parentNode.childNodes;
		            for (i = childNodes.length - 1; i >= 0 && !inserted; i--) {
		                otherElement = childNodes[i];
		                otherZIndex = otherElement.getAttribute('data-z-index');
		                undefinedOtherZIndex = !defined(otherZIndex);

		                if (otherElement !== element) {
		                    if (
		                        // Negative zIndex versus no zIndex:
		                        // On all levels except the highest. If the parent is
		                        // <svg>, then we don't want to put items before <desc>
		                        // or <defs>
		                        (value < 0 && undefinedOtherZIndex && !svgParent && !i)
		                    ) {
		                        parentNode.insertBefore(element, childNodes[i]);
		                        inserted = true;
		                    } else if (
		                        // Insert after the first element with a lower zIndex
		                        pInt(otherZIndex) <= value ||
		                        // If negative zIndex, add this before first undefined
		                        // zIndex element
		                        (
		                            undefinedOtherZIndex &&
		                            (!defined(value) || value >= 0)
		                        )
		                    ) {
		                        parentNode.insertBefore(
		                            element,
		                            childNodes[i + 1] || null // null for oldIE export
		                        );
		                        inserted = true;
		                    }
		                }
		            }

		            if (!inserted) {
		                parentNode.insertBefore(
		                    element,
		                    childNodes[svgParent ? 3 : 0] || null // null for oldIE
		                );
		                inserted = true;
		            }
		        }
		        return inserted;
		    },
		    /**
		     * @private
		     * @function Highcharts.SVGElement#_defaultSetter
		     *
		     * @param {string} value
		     *
		     * @param {string} key
		     *
		     * @param {Highcharts.SVGDOMElement} element
		     */
		    _defaultSetter: function (value, key, element) {
		        element.setAttribute(key, value);
		    }
		});

		// Some shared setters and getters
		SVGElement.prototype.yGetter =
		SVGElement.prototype.xGetter;
		SVGElement.prototype.translateXSetter =
		SVGElement.prototype.translateYSetter =
		SVGElement.prototype.rotationSetter =
		SVGElement.prototype.verticalAlignSetter =
		SVGElement.prototype.rotationOriginXSetter =
		SVGElement.prototype.rotationOriginYSetter =
		SVGElement.prototype.scaleXSetter =
		SVGElement.prototype.scaleYSetter =
		SVGElement.prototype.matrixSetter = function (value, key) {
		    this[key] = value;
		    this.doTransform = true;
		};

		// WebKit and Batik have problems with a stroke-width of zero, so in this case
		// we remove the stroke attribute altogether. #1270, #1369, #3065, #3072.
		SVGElement.prototype['stroke-widthSetter'] =
		/**
		 * @private
		 * @function Highcharts.SVGElement#strokeSetter
		 *
		 * @param {number|string} value
		 *
		 * @param {string} key
		 *
		 * @param {Highcharts.SVGDOMElement} element
		 */
		SVGElement.prototype.strokeSetter = function (value, key, element) {
		    this[key] = value;
		    // Only apply the stroke attribute if the stroke width is defined and larger
		    // than 0
		    if (this.stroke && this['stroke-width']) {
		        // Use prototype as instance may be overridden
		        SVGElement.prototype.fillSetter.call(
		            this,
		            this.stroke,
		            'stroke',
		            element
		        );

		        element.setAttribute('stroke-width', this['stroke-width']);
		        this.hasStroke = true;
		    } else if (key === 'stroke-width' && value === 0 && this.hasStroke) {
		        element.removeAttribute('stroke');
		        this.hasStroke = false;
		    }
		};

		/**
		 * Allows direct access to the Highcharts rendering layer in order to draw
		 * primitive shapes like circles, rectangles, paths or text directly on a chart,
		 * or independent from any chart. The SVGRenderer represents a wrapper object
		 * for SVG in modern browsers. Through the VMLRenderer, part of the `oldie.js`
		 * module, it also brings vector graphics to IE <= 8.
		 *
		 * An existing chart's renderer can be accessed through {@link Chart.renderer}.
		 * The renderer can also be used completely decoupled from a chart.
		 *
		 * @sample highcharts/members/renderer-on-chart
		 *         Annotating a chart programmatically.
		 * @sample highcharts/members/renderer-basic
		 *         Independent SVG drawing.
		 *
		 * @example
		 * // Use directly without a chart object.
		 * var renderer = new Highcharts.Renderer(parentNode, 600, 400);
		 *
		 * @class
		 * @name Highcharts.SVGRenderer
		 *
		 * @param {Highcharts.HTMLDOMElement} container
		 *        Where to put the SVG in the web page.
		 *
		 * @param {number} width
		 *        The width of the SVG.
		 *
		 * @param {number} height
		 *        The height of the SVG.
		 *
		 * @param {boolean} [forExport=false]
		 *        Whether the rendered content is intended for export.
		 *
		 * @param {boolean} [allowHTML=true]
		 *        Whether the renderer is allowed to include HTML text, which will be
		 *        projected on top of the SVG.
		 */
		SVGRenderer = H.SVGRenderer = function () {
		    this.init.apply(this, arguments);
		};
		extend(SVGRenderer.prototype, /** @lends Highcharts.SVGRenderer.prototype */ {
		    /**
		     * A pointer to the renderer's associated Element class. The VMLRenderer
		     * will have a pointer to VMLElement here.
		     *
		     * @name Highcharts.SVGRenderer#Element
		     * @type {Highcharts.SVGElement}
		     */
		    Element: SVGElement,

		    SVG_NS: SVG_NS,

		    /**
		     * Initialize the SVGRenderer. Overridable initiator function that takes
		     * the same parameters as the constructor.
		     *
		     * @function Highcharts.SVGRenderer#init
		     *
		     * @param {Highcharts.HTMLDOMElement} container
		     *        Where to put the SVG in the web page.
		     *
		     * @param {number} width
		     *        The width of the SVG.
		     *
		     * @param {number} height
		     *        The height of the SVG.
		     *
		     * @param {boolean} [forExport=false]
		     *        Whether the rendered content is intended for export.
		     *
		     * @param {boolean} [allowHTML=true]
		     *        Whether the renderer is allowed to include HTML text, which will
		     *        be projected on top of the SVG.
		     *
		     * @param {boolean} [styledMode=false]
		     *        Whether the renderer belongs to a chart that is in styled mode.
		     *        If it does, it will avoid setting presentational attributes in
		     *        some cases, but not when set explicitly through `.attr` and `.css`
		     *        etc.
		     *
		     * @return {void}
		     */
		    init: function (
		        container,
		        width,
		        height,
		        style,
		        forExport,
		        allowHTML,
		        styledMode
		    ) {
		        var renderer = this,
		            boxWrapper,
		            element,
		            desc;

		        boxWrapper = renderer.createElement('svg')
		            .attr({
		                'version': '1.1',
		                'class': 'highcharts-root'
		            });

		        if (!styledMode) {
		            boxWrapper.css(this.getStyle(style));
		        }

		        element = boxWrapper.element;
		        container.appendChild(element);

		        // Always use ltr on the container, otherwise text-anchor will be
		        // flipped and text appear outside labels, buttons, tooltip etc (#3482)
		        attr(container, 'dir', 'ltr');

		        // For browsers other than IE, add the namespace attribute (#1978)
		        if (container.innerHTML.indexOf('xmlns') === -1) {
		            attr(element, 'xmlns', this.SVG_NS);
		        }

		        // object properties
		        renderer.isSVG = true;

		        /**
		         * The root `svg` node of the renderer.
		         *
		         * @name Highcharts.SVGRenderer#box
		         * @type {Highcharts.SVGDOMElement}
		         */
		        this.box = element;
		        /**
		         * The wrapper for the root `svg` node of the renderer.
		         *
		         * @name Highcharts.SVGRenderer#boxWrapper
		         * @type {Highcharts.SVGElement}
		         */
		        this.boxWrapper = boxWrapper;
		        renderer.alignedObjects = [];

		        /**
		         * Page url used for internal references.
		         *
		         * @private
		         * @name Highcharts.SVGRenderer#url
		         * @type {string}
		         */
		        // #24, #672, #1070
		        this.url = (
		                (isFirefox || isWebKit) &&
		                doc.getElementsByTagName('base').length
		            ) ?
		                win.location.href
		                    .split('#')[0] // remove the hash
		                    .replace(/<[^>]*>/g, '') // wing cut HTML
		                    // escape parantheses and quotes
		                    .replace(/([\('\)])/g, '\\$1')
		                    // replace spaces (needed for Safari only)
		                    .replace(/ /g, '%20') :
		                '';

		        // Add description
		        desc = this.createElement('desc').add();
		        desc.element.appendChild(
		            doc.createTextNode('Created with Highcharts v7.0.1 custom build')
		        );

		        /**
		         * A pointer to the `defs` node of the root SVG.
		         *
		         * @name Highcharts.SVGRenderer#defs
		         * @type {Highcharts.SVGElement}
		         */
		        renderer.defs = this.createElement('defs').add();
		        renderer.allowHTML = allowHTML;
		        renderer.forExport = forExport;
		        renderer.styledMode = styledMode;
		        renderer.gradients = {}; // Object where gradient SvgElements are stored
		        renderer.cache = {}; // Cache for numerical bounding boxes
		        renderer.cacheKeys = [];
		        renderer.imgCount = 0;

		        renderer.setSize(width, height, false);



		        // Issue 110 workaround:
		        // In Firefox, if a div is positioned by percentage, its pixel position
		        // may land between pixels. The container itself doesn't display this,
		        // but an SVG element inside this container will be drawn at subpixel
		        // precision. In order to draw sharp lines, this must be compensated
		        // for. This doesn't seem to work inside iframes though (like in
		        // jsFiddle).
		        var subPixelFix, rect;
		        if (isFirefox && container.getBoundingClientRect) {
		            subPixelFix = function () {
		                css(container, { left: 0, top: 0 });
		                rect = container.getBoundingClientRect();
		                css(container, {
		                    left: (Math.ceil(rect.left) - rect.left) + 'px',
		                    top: (Math.ceil(rect.top) - rect.top) + 'px'
		                });
		            };

		            // run the fix now
		            subPixelFix();

		            // run it on resize
		            renderer.unSubPixelFix = addEvent(win, 'resize', subPixelFix);
		        }
		    },

		    /**
		     * General method for adding a definition to the SVG `defs` tag. Can be used
		     * for gradients, fills, filters etc. Styled mode only. A hook for adding
		     * general definitions to the SVG's defs tag. Definitions can be referenced
		     * from the CSS by its `id`. Read more in
		     * [gradients, shadows and patterns](https://www.highcharts.com/docs/chart-design-and-style/gradients-shadows-and-patterns).
		     * Styled mode only.
		     *
		     * @function Highcharts.SVGRenderer#definition
		     *
		     * @param {Highcharts.SVGDefinitionObject} def
		     *        A serialized form of an SVG definition, including children.
		     *
		     * @return {Highcharts.SVGElement}
		     *         The inserted node.
		     */
		    definition: function (def) {
		        var ren = this;

		        function recurse(config, parent) {
		            var ret;
		            splat(config).forEach(function (item) {
		                var node = ren.createElement(item.tagName),
		                    attr = {};

		                // Set attributes
		                objectEach(item, function (val, key) {
		                    if (
		                        key !== 'tagName' &&
		                        key !== 'children' &&
		                        key !== 'textContent'
		                    ) {
		                        attr[key] = val;
		                    }
		                });
		                node.attr(attr);

		                // Add to the tree
		                node.add(parent || ren.defs);

		                // Add text content
		                if (item.textContent) {
		                    node.element.appendChild(
		                        doc.createTextNode(item.textContent)
		                    );
		                }

		                // Recurse
		                recurse(item.children || [], node);

		                ret = node;
		            });

		            // Return last node added (on top level it's the only one)
		            return ret;
		        }
		        return recurse(def);
		    },


		    /**
		     * Get the global style setting for the renderer.
		     *
		     * @private
		     * @function Highcharts.SVGRenderer#getStyle
		     *
		     * @param {Highcharts.CSSObject} style
		     *        Style settings.
		     *
		     * @return {Highcharts.CSSObject}
		     *         The style settings mixed with defaults.
		     */
		    getStyle: function (style) {
		        this.style = extend({

		            fontFamily: '"Lucida Grande", "Lucida Sans Unicode", ' +
		                'Arial, Helvetica, sans-serif',
		            fontSize: '12px'

		        }, style);
		        return this.style;
		    },

		    /**
		     * Apply the global style on the renderer, mixed with the default styles.
		     *
		     * @function Highcharts.SVGRenderer#setStyle
		     *
		     * @param {Highcharts.CSSObject} style
		     *        CSS to apply.
		     */
		    setStyle: function (style) {
		        this.boxWrapper.css(this.getStyle(style));
		    },

		    /**
		     * Detect whether the renderer is hidden. This happens when one of the
		     * parent elements has `display: none`. Used internally to detect when we
		     * needto render preliminarily in another div to get the text bounding boxes
		     * right.
		     *
		     * @function Highcharts.SVGRenderer#isHidden
		     *
		     * @return {boolean}
		     *         True if it is hidden.
		     */
		    isHidden: function () { // #608
		        return !this.boxWrapper.getBBox().width;
		    },

		    /**
		     * Destroys the renderer and its allocated members.
		     *
		     * @function Highcharts.SVGRenderer#destroy
		     */
		    destroy: function () {
		        var renderer = this,
		            rendererDefs = renderer.defs;
		        renderer.box = null;
		        renderer.boxWrapper = renderer.boxWrapper.destroy();

		        // Call destroy on all gradient elements
		        destroyObjectProperties(renderer.gradients || {});
		        renderer.gradients = null;

		        // Defs are null in VMLRenderer
		        // Otherwise, destroy them here.
		        if (rendererDefs) {
		            renderer.defs = rendererDefs.destroy();
		        }

		        // Remove sub pixel fix handler (#982)
		        if (renderer.unSubPixelFix) {
		            renderer.unSubPixelFix();
		        }

		        renderer.alignedObjects = null;

		        return null;
		    },

		    /**
		     * Create a wrapper for an SVG element. Serves as a factory for
		     * {@link SVGElement}, but this function is itself mostly called from
		     * primitive factories like {@link SVGRenderer#path}, {@link
		     * SVGRenderer#rect} or {@link SVGRenderer#text}.
		     *
		     * @function Highcharts.SVGRenderer#createElement
		     *
		     * @param {string} nodeName
		     *        The node name, for example `rect`, `g` etc.
		     *
		     * @return {Highcharts.SVGElement}
		     *         The generated SVGElement.
		     */
		    createElement: function (nodeName) {
		        var wrapper = new this.Element();
		        wrapper.init(this, nodeName);
		        return wrapper;
		    },

		    /**
		     * Dummy function for plugins, called every time the renderer is updated.
		     * Prior to Highcharts 5, this was used for the canvg renderer.
		     *
		     * @deprecated
		     * @function Highcharts.SVGRenderer#draw
		     */
		    draw: noop,

		    /**
		     * Get converted radial gradient attributes according to the radial
		     * reference. Used internally from the {@link SVGElement#colorGradient}
		     * function.
		     *
		     * @private
		     * @function Highcharts.SVGRenderer#getRadialAttr
		     *
		     * @param {Array<number>} radialReference
		     *
		     * @param {Highcharts.SVGAttributes} gradAttr
		     *
		     * @return {Highcharts.SVGAttributes}
		     */
		    getRadialAttr: function (radialReference, gradAttr) {
		        return {
		            cx: (radialReference[0] - radialReference[2] / 2) +
		                gradAttr.cx * radialReference[2],
		            cy: (radialReference[1] - radialReference[2] / 2) +
		                gradAttr.cy * radialReference[2],
		            r: gradAttr.r * radialReference[2]
		        };
		    },

		    /**
		     * Truncate the text node contents to a given length. Used when the css
		     * width is set. If the `textOverflow` is `ellipsis`, the text is truncated
		     * character by character to the given length. If not, the text is
		     * word-wrapped line by line.
		     *
		     * @private
		     * @function Highcharts.SVGRenderer#truncate
		     *
		     * @param {Highcharts.SVGElement} wrapper
		     *
		     * @param {Highcharts.SVGDOMElement} tspan
		     *
		     * @param {string} text
		     *
		     * @param {Array.<string>} words
		     *
		     * @param {number} width
		     *
		     * @param {Function} getString
		     *
		     * @return {boolean}
		     *         True if tspan is too long.
		     */
		    truncate: function (
		        wrapper,
		        tspan,
		        text,
		        words,
		        startAt,
		        width,
		        getString
		    ) {
		        var renderer = this,
		            rotation = wrapper.rotation,
		            str,
		            // Word wrap can not be truncated to shorter than one word, ellipsis
		            // text can be completely blank.
		            minIndex = words ? 1 : 0,
		            maxIndex = (text || words).length,
		            currentIndex = maxIndex,
		            // Cache the lengths to avoid checking the same twice
		            lengths = [],
		            updateTSpan = function (s) {
		                if (tspan.firstChild) {
		                    tspan.removeChild(tspan.firstChild);
		                }
		                if (s) {
		                    tspan.appendChild(doc.createTextNode(s));
		                }
		            },
		            getSubStringLength = function (charEnd, concatenatedEnd) {
		                // charEnd is useed when finding the character-by-character
		                // break for ellipsis, concatenatedEnd is used for word-by-word
		                // break for word wrapping.
		                var end = concatenatedEnd || charEnd;
		                if (lengths[end] === undefined) {
		                    // Modern browsers
		                    if (tspan.getSubStringLength) {
		                        // Fails with DOM exception on unit-tests/legend/members
		                        // of unknown reason. Desired width is 0, text content
		                        // is "5" and end is 1.
		                        try {
		                            lengths[end] = startAt + tspan.getSubStringLength(
		                                0,
		                                words ? end + 1 : end
		                            );

		                        } catch (e) {}

		                    // Legacy
		                    } else if (renderer.getSpanWidth) { // #9058 jsdom
		                        updateTSpan(getString(text || words, charEnd));
		                        lengths[end] = startAt +
		                            renderer.getSpanWidth(wrapper, tspan);
		                    }
		                }
		                return lengths[end];
		            },
		            actualWidth,
		            truncated;

		        wrapper.rotation = 0; // discard rotation when computing box
		        actualWidth = getSubStringLength(tspan.textContent.length);
		        truncated = startAt + actualWidth > width;
		        if (truncated) {

		            // Do a binary search for the index where to truncate the text
		            while (minIndex <= maxIndex) {
		                currentIndex = Math.ceil((minIndex + maxIndex) / 2);

		                // When checking words for word-wrap, we need to build the
		                // string and measure the subStringLength at the concatenated
		                // word length.
		                if (words) {
		                    str = getString(words, currentIndex);
		                }
		                actualWidth = getSubStringLength(
		                    currentIndex,
		                    str && str.length - 1
		                );

		                if (minIndex === maxIndex) {
		                    // Complete
		                    minIndex = maxIndex + 1;
		                } else if (actualWidth > width) {
		                    // Too large. Set max index to current.
		                    maxIndex = currentIndex - 1;
		                } else {
		                    // Within width. Set min index to current.
		                    minIndex = currentIndex;
		                }
		            }
		            // If max index was 0 it means the shortest possible text was also
		            // too large. For ellipsis that means only the ellipsis, while for
		            // word wrap it means the whole first word.
		            if (maxIndex === 0) {
		                // Remove ellipsis
		                updateTSpan('');

		            // If the new text length is one less than the original, we don't
		            // need the ellipsis
		            } else if (!(text && maxIndex === text.length - 1)) {
		                updateTSpan(str || getString(text || words, currentIndex));
		            }
		        }

		        // When doing line wrapping, prepare for the next line by removing the
		        // items from this line.
		        if (words) {
		            words.splice(0, currentIndex);
		        }

		        wrapper.actualWidth = actualWidth;
		        wrapper.rotation = rotation; // Apply rotation again.
		        return truncated;
		    },

		    /**
		     * A collection of characters mapped to HTML entities. When `useHTML` on an
		     * element is true, these entities will be rendered correctly by HTML. In
		     * the SVG pseudo-HTML, they need to be unescaped back to simple characters,
		     * so for example `&lt;` will render as `<`.
		     *
		     * @example
		     * // Add support for unescaping quotes
		     * Highcharts.SVGRenderer.prototype.escapes['"'] = '&quot;';
		     *
		     * @name Highcharts.SVGRenderer#escapes
		     * @type {Highcharts.Dictionary<string>}
		     */
		    escapes: {
		        '&': '&amp;',
		        '<': '&lt;',
		        '>': '&gt;',
		        "'": '&#39;', // eslint-disable-line quotes
		        '"': '&quot;'
		    },

		    /**
		     * Parse a simple HTML string into SVG tspans. Called internally when text
		     * is set on an SVGElement. The function supports a subset of HTML tags, CSS
		     * text features like `width`, `text-overflow`, `white-space`, and also
		     * attributes like `href` and `style`.
		     *
		     * @private
		     * @function Highcharts.SVGRenderer#buildText
		     *
		     * @param {Highcharts.SVGElement} wrapper
		     *        The parent SVGElement.
		     */
		    buildText: function (wrapper) {
		        var textNode = wrapper.element,
		            renderer = this,
		            forExport = renderer.forExport,
		            textStr = pick(wrapper.textStr, '').toString(),
		            hasMarkup = textStr.indexOf('<') !== -1,
		            lines,
		            childNodes = textNode.childNodes,
		            truncated,
		            parentX = attr(textNode, 'x'),
		            textStyles = wrapper.styles,
		            width = wrapper.textWidth,
		            textLineHeight = textStyles && textStyles.lineHeight,
		            textOutline = textStyles && textStyles.textOutline,
		            ellipsis = textStyles && textStyles.textOverflow === 'ellipsis',
		            noWrap = textStyles && textStyles.whiteSpace === 'nowrap',
		            fontSize = textStyles && textStyles.fontSize,
		            textCache,
		            isSubsequentLine,
		            i = childNodes.length,
		            tempParent = width && !wrapper.added && this.box,
		            getLineHeight = function (tspan) {
		                var fontSizeStyle;

		                if (!renderer.styledMode) {
		                    fontSizeStyle =
		                        /(px|em)$/.test(tspan && tspan.style.fontSize) ?
		                            tspan.style.fontSize :
		                            (fontSize || renderer.style.fontSize || 12);
		                }

		                return textLineHeight ?
		                    pInt(textLineHeight) :
		                    renderer.fontMetrics(
		                        fontSizeStyle,
		                        // Get the computed size from parent if not explicit
		                        tspan.getAttribute('style') ? tspan : textNode
		                    ).h;
		            },
		            unescapeEntities = function (inputStr, except) {
		                objectEach(renderer.escapes, function (value, key) {
		                    if (!except || except.indexOf(value) === -1) {
		                        inputStr = inputStr.toString().replace(
		                            new RegExp(value, 'g'), // eslint-disable-line security/detect-non-literal-regexp
		                            key
		                        );
		                    }
		                });
		                return inputStr;
		            },
		            parseAttribute = function (s, attr) {
		                var start,
		                    delimiter;

		                start = s.indexOf('<');
		                s = s.substring(start, s.indexOf('>') - start);

		                start = s.indexOf(attr + '=');
		                if (start !== -1) {
		                    start = start + attr.length + 1;
		                    delimiter = s.charAt(start);
		                    if (delimiter === '"' || delimiter === "'") { // eslint-disable-line quotes
		                        s = s.substring(start + 1);
		                        return s.substring(0, s.indexOf(delimiter));
		                    }
		                }
		            };

		        // The buildText code is quite heavy, so if we're not changing something
		        // that affects the text, skip it (#6113).
		        textCache = [
		            textStr,
		            ellipsis,
		            noWrap,
		            textLineHeight,
		            textOutline,
		            fontSize,
		            width
		        ].join(',');
		        if (textCache === wrapper.textCache) {
		            return;
		        }
		        wrapper.textCache = textCache;

		        // Remove old text
		        while (i--) {
		            textNode.removeChild(childNodes[i]);
		        }

		        // Skip tspans, add text directly to text node. The forceTSpan is a hook
		        // used in text outline hack.
		        if (
		            !hasMarkup &&
		            !textOutline &&
		            !ellipsis &&
		            !width &&
		            textStr.indexOf(' ') === -1
		        ) {
		            textNode.appendChild(doc.createTextNode(unescapeEntities(textStr)));

		        // Complex strings, add more logic
		        } else {

		            if (tempParent) {
		                // attach it to the DOM to read offset width
		                tempParent.appendChild(textNode);
		            }

		            if (hasMarkup) {
		                lines = renderer.styledMode ? (
		                    textStr.replace(
		                            /<(b|strong)>/g,
		                            '<span class="highcharts-strong">'
		                        )
		                        .replace(
		                            /<(i|em)>/g,
		                            '<span class="highcharts-emphasized">'
		                        )
		                    ) : (
		                    textStr
		                        .replace(
		                            /<(b|strong)>/g,
		                            '<span style="font-weight:bold">'
		                        )
		                        .replace(
		                            /<(i|em)>/g,
		                            '<span style="font-style:italic">'
		                        )
		                    );

		                lines = lines
		                    .replace(/<a/g, '<span')
		                    .replace(/<\/(b|strong|i|em|a)>/g, '</span>')
		                    .split(/<br.*?>/g);

		            } else {
		                lines = [textStr];
		            }


		            // Trim empty lines (#5261)
		            lines = lines.filter(function (line) {
		                return line !== '';
		            });


		            // build the lines
		            lines.forEach(function buildTextLines(line, lineNo) {
		                var spans,
		                    spanNo = 0,
		                    lineLength = 0;
		                line = line
		                    // Trim to prevent useless/costly process on the spaces
		                    // (#5258)
		                    .replace(/^\s+|\s+$/g, '')
		                    .replace(/<span/g, '|||<span')
		                    .replace(/<\/span>/g, '</span>|||');
		                spans = line.split('|||');

		                spans.forEach(function buildTextSpans(span) {
		                    if (span !== '' || spans.length === 1) {
		                        var attributes = {},
		                            tspan = doc.createElementNS(
		                                renderer.SVG_NS,
		                                'tspan'
		                            ),
		                            classAttribute,
		                            styleAttribute, // #390
		                            hrefAttribute;

		                        classAttribute = parseAttribute(span, 'class');
		                        if (classAttribute) {
		                            attr(tspan, 'class', classAttribute);
		                        }

		                        styleAttribute = parseAttribute(span, 'style');
		                        if (styleAttribute) {
		                            styleAttribute = styleAttribute.replace(
		                                /(;| |^)color([ :])/,
		                                '$1fill$2'
		                            );
		                            attr(tspan, 'style', styleAttribute);
		                        }

		                        // Not for export - #1529
		                        hrefAttribute = parseAttribute(span, 'href');
		                        if (hrefAttribute && !forExport) {
		                            attr(
		                                tspan,
		                                'onclick',
		                                'location.href=\"' + hrefAttribute + '\"'
		                            );
		                            attr(tspan, 'class', 'highcharts-anchor');

		                            if (!renderer.styledMode) {
		                                css(tspan, { cursor: 'pointer' });
		                            }
		                        }

		                        // Strip away unsupported HTML tags (#7126)
		                        span = unescapeEntities(
		                            span.replace(/<[a-zA-Z\/](.|\n)*?>/g, '') || ' '
		                        );

		                        // Nested tags aren't supported, and cause crash in
		                        // Safari (#1596)
		                        if (span !== ' ') {

		                            // add the text node
		                            tspan.appendChild(doc.createTextNode(span));

		                            // First span in a line, align it to the left
		                            if (!spanNo) {
		                                if (lineNo && parentX !== null) {
		                                    attributes.x = parentX;
		                                }
		                            } else {
		                                attributes.dx = 0; // #16
		                            }

		                            // add attributes
		                            attr(tspan, attributes);

		                            // Append it
		                            textNode.appendChild(tspan);

		                            // first span on subsequent line, add the line
		                            // height
		                            if (!spanNo && isSubsequentLine) {

		                                // allow getting the right offset height in
		                                // exporting in IE
		                                if (!svg && forExport) {
		                                    css(tspan, { display: 'block' });
		                                }

		                                // Set the line height based on the font size of
		                                // either the text element or the tspan element
		                                attr(
		                                    tspan,
		                                    'dy',
		                                    getLineHeight(tspan)
		                                );
		                            }

		                            // Check width and apply soft breaks or ellipsis
		                            if (width) {
		                                var words = span.replace(
		                                        /([^\^])-/g,
		                                        '$1- '
		                                    ).split(' '), // #1273
		                                    hasWhiteSpace = !noWrap && (
		                                        spans.length > 1 ||
		                                        lineNo ||
		                                        words.length > 1
		                                    ),
		                                    wrapLineNo = 0,
		                                    dy = getLineHeight(tspan);

		                                if (ellipsis) {
		                                    truncated = renderer.truncate(
		                                        wrapper,
		                                        tspan,
		                                        span,
		                                        undefined,
		                                        0,
		                                        // Target width
		                                        Math.max(
		                                            0,
		                                            // Substract the font face to make
		                                            // room for the ellipsis itself
		                                            width - parseInt(fontSize || 12, 10)
		                                        ),
		                                        // Build the text to test for
		                                        function (text, currentIndex) {
		                                            return text.substring(
		                                                0,
		                                                currentIndex
		                                            ) + '\u2026';
		                                        }
		                                    );
		                                } else if (hasWhiteSpace) {

		                                    while (words.length) {

		                                        // For subsequent lines, create tspans
		                                        // with the same style attributes as the
		                                        // parent text node.
		                                        if (
		                                            words.length &&
		                                            !noWrap &&
		                                            wrapLineNo > 0
		                                        ) {

		                                            tspan = doc.createElementNS(
		                                                SVG_NS,
		                                                'tspan'
		                                            );
		                                            attr(tspan, {
		                                                dy: dy,
		                                                x: parentX
		                                            });
		                                            if (styleAttribute) { // #390
		                                                attr(
		                                                    tspan,
		                                                    'style',
		                                                    styleAttribute
		                                                );
		                                            }
		                                            // Start by appending the full
		                                            // remaining text
		                                            tspan.appendChild(
		                                                doc.createTextNode(
		                                                    words.join(' ')
		                                                        .replace(/- /g, '-')
		                                                )
		                                            );
		                                            textNode.appendChild(tspan);
		                                        }

		                                        // For each line, truncate the remaining
		                                        // words into the line length.
		                                        renderer.truncate(
		                                            wrapper,
		                                            tspan,
		                                            null,
		                                            words,
		                                            wrapLineNo === 0 ? lineLength : 0,
		                                            width,
		                                            // Build the text to test for
		                                            function (text, currentIndex) {
		                                                return words
		                                                    .slice(0, currentIndex)
		                                                    .join(' ')
		                                                    .replace(/- /g, '-');
		                                            }
		                                        );

		                                        lineLength = wrapper.actualWidth;
		                                        wrapLineNo++;
		                                    }
		                                }
		                            }

		                            spanNo++;
		                        }

		                    }

		                });

		                // To avoid beginning lines that doesn't add to the textNode
		                // (#6144)
		                isSubsequentLine = (
		                    isSubsequentLine ||
		                    textNode.childNodes.length
		                );
		            });

		            if (ellipsis && truncated) {
		                wrapper.attr(
		                    'title',
		                    unescapeEntities(wrapper.textStr, ['&lt;', '&gt;']) // #7179
		                );
		            }
		            if (tempParent) {
		                tempParent.removeChild(textNode);
		            }

		            // Apply the text outline
		            if (textOutline && wrapper.applyTextOutline) {
		                wrapper.applyTextOutline(textOutline);
		            }
		        }
		    },

		    /**
		     * Returns white for dark colors and black for bright colors.
		     *
		     * @function Highcharts.SVGRenderer#getContrast
		     *
		     * @param {Highcharts.ColorString} rgba
		     *        The color to get the contrast for.
		     *
		     * @return {string}
		     *         The contrast color, either `#000000` or `#FFFFFF`.
		     */
		    getContrast: function (rgba) {
		        rgba = color(rgba).rgba;

		        // The threshold may be discussed. Here's a proposal for adding
		        // different weight to the color channels (#6216)
		        rgba[0] *= 1; // red
		        rgba[1] *= 1.2; // green
		        rgba[2] *= 0.5; // blue

		        return rgba[0] + rgba[1] + rgba[2] > 1.8 * 255 ? '#000000' : '#FFFFFF';
		    },

		    /**
		     * Create a button with preset states.
		     *
		     * @function Highcharts.SVGRenderer#button
		     *
		     * @param {string} text
		     *        The text or HTML to draw.
		     *
		     * @param {number} x
		     *        The x position of the button's left side.
		     *
		     * @param {number} y
		     *        The y position of the button's top side.
		     *
		     * @param {Function} callback
		     *        The function to execute on button click or touch.
		     *
		     * @param {Highcharts.SVGAttributes} [normalState]
		     *        SVG attributes for the normal state.
		     *
		     * @param {Highcharts.SVGAttributes} [hoverState]
		     *        SVG attributes for the hover state.
		     *
		     * @param {Highcharts.SVGAttributes} [pressedState]
		     *        SVG attributes for the pressed state.
		     *
		     * @param {Highcharts.SVGAttributes} [disabledState]
		     *        SVG attributes for the disabled state.
		     *
		     * @param {Highcharts.SymbolKey} [shape=rect]
		     *        The shape type.
		     *
		     * @return {Highcharts.SVGElement}
		     *         The button element.
		     */
		    button: function (
		        text,
		        x,
		        y,
		        callback,
		        normalState,
		        hoverState,
		        pressedState,
		        disabledState,
		        shape
		    ) {
		        var label = this.label(
		                text,
		                x,
		                y,
		                shape,
		                null,
		                null,
		                null,
		                null,
		                'button'
		            ),
		            curState = 0,
		            styledMode = this.styledMode;

		        // Default, non-stylable attributes
		        label.attr(merge({
		            'padding': 8,
		            'r': 2
		        }, normalState));

		        if (!styledMode) {
		            // Presentational
		            var normalStyle,
		                hoverStyle,
		                pressedStyle,
		                disabledStyle;

		            // Normal state - prepare the attributes
		            normalState = merge({
		                fill: '#f7f7f7',
		                stroke: '#cccccc',
		                'stroke-width': 1,
		                style: {
		                    color: '#333333',
		                    cursor: 'pointer',
		                    fontWeight: 'normal'
		                }
		            }, normalState);
		            normalStyle = normalState.style;
		            delete normalState.style;

		            // Hover state
		            hoverState = merge(normalState, {
		                fill: '#e6e6e6'
		            }, hoverState);
		            hoverStyle = hoverState.style;
		            delete hoverState.style;

		            // Pressed state
		            pressedState = merge(normalState, {
		                fill: '#e6ebf5',
		                style: {
		                    color: '#000000',
		                    fontWeight: 'bold'
		                }
		            }, pressedState);
		            pressedStyle = pressedState.style;
		            delete pressedState.style;

		            // Disabled state
		            disabledState = merge(normalState, {
		                style: {
		                    color: '#cccccc'
		                }
		            }, disabledState);
		            disabledStyle = disabledState.style;
		            delete disabledState.style;
		        }

		        // Add the events. IE9 and IE10 need mouseover and mouseout to funciton
		        // (#667).
		        addEvent(label.element, isMS ? 'mouseover' : 'mouseenter', function () {
		            if (curState !== 3) {
		                label.setState(1);
		            }
		        });
		        addEvent(label.element, isMS ? 'mouseout' : 'mouseleave', function () {
		            if (curState !== 3) {
		                label.setState(curState);
		            }
		        });

		        label.setState = function (state) {
		            // Hover state is temporary, don't record it
		            if (state !== 1) {
		                label.state = curState = state;
		            }
		            // Update visuals
		            label.removeClass(
		                    /highcharts-button-(normal|hover|pressed|disabled)/
		                )
		                .addClass(
		                    'highcharts-button-' +
		                    ['normal', 'hover', 'pressed', 'disabled'][state || 0]
		                );

		            if (!styledMode) {
		                label.attr([
		                    normalState,
		                    hoverState,
		                    pressedState,
		                    disabledState
		                ][state || 0])
		                .css([
		                    normalStyle,
		                    hoverStyle,
		                    pressedStyle,
		                    disabledStyle
		                ][state || 0]);
		            }
		        };


		        // Presentational attributes
		        if (!styledMode) {
		            label
		                .attr(normalState)
		                .css(extend({ cursor: 'default' }, normalStyle));
		        }

		        return label
		            .on('click', function (e) {
		                if (curState !== 3) {
		                    callback.call(label, e);
		                }
		            });
		    },

		    /**
		     * Make a straight line crisper by not spilling out to neighbour pixels.
		     *
		     * @function Highcharts.SVGRenderer#crispLine
		     *
		     * @param {Highcharts.SVGPathArray} points
		     *        The original points on the format `['M', 0, 0, 'L', 100, 0]`.
		     *
		     * @param {number} width
		     *        The width of the line.
		     *
		     * @return {Highcharts.SVGPathArray}
		     *         The original points array, but modified to render crisply.
		     */
		    crispLine: function (points, width) {
		        // normalize to a crisp line
		        if (points[1] === points[4]) {
		            // Substract due to #1129. Now bottom and left axis gridlines behave
		            // the same.
		            points[1] = points[4] = Math.round(points[1]) - (width % 2 / 2);
		        }
		        if (points[2] === points[5]) {
		            points[2] = points[5] = Math.round(points[2]) + (width % 2 / 2);
		        }
		        return points;
		    },


		    /**
		     * Draw a path, wraps the SVG `path` element.
		     *
		     * @sample highcharts/members/renderer-path-on-chart/
		     *         Draw a path in a chart
		     * @sample highcharts/members/renderer-path/
		     *         Draw a path independent from a chart
		     *
		     * @example
		     * var path = renderer.path(['M', 10, 10, 'L', 30, 30, 'z'])
		     *     .attr({ stroke: '#ff00ff' })
		     *     .add();
		     *
		     * @function Highcharts.SVGRenderer#path
		     *
		     * @param {Highcharts.SVGPathArray} [path]
		     *        An SVG path definition in array form.
		     *
		     * @return {Highcharts.SVGElement}
		     *         The generated wrapper element.
		     *
		     *//**
		     * Draw a path, wraps the SVG `path` element.
		     *
		     * @function Highcharts.SVGRenderer#path
		     *
		     * @param {Highcharts.SVGAttributes} [attribs]
		     *        The initial attributes.
		     *
		     * @return {Highcharts.SVGElement}
		     *         The generated wrapper element.
		     */
		    path: function (path) {
		        var attribs = this.styledMode ? {} : {
		            fill: 'none'
		        };
		        if (isArray(path)) {
		            attribs.d = path;
		        } else if (isObject(path)) { // attributes
		            extend(attribs, path);
		        }
		        return this.createElement('path').attr(attribs);
		    },

		    /**
		     * Draw a circle, wraps the SVG `circle` element.
		     *
		     * @sample highcharts/members/renderer-circle/
		     *         Drawing a circle
		     *
		     * @function Highcharts.SVGRenderer#circle
		     *
		     * @param {number} [x]
		     *        The center x position.
		     *
		     * @param {number} [y]
		     *        The center y position.
		     *
		     * @param {number} [r]
		     *        The radius.
		     *
		     * @return {Highcharts.SVGElement}
		     *         The generated wrapper element.
		     *//**
		     * Draw a circle, wraps the SVG `circle` element.
		     *
		     * @function Highcharts.SVGRenderer#circle
		     *
		     * @param {Highcharts.SVGAttributes} [attribs]
		     *        The initial attributes.
		     *
		     * @return {Highcharts.SVGElement}
		     *         The generated wrapper element.
		     */
		    circle: function (x, y, r) {
		        var attribs = (
		                isObject(x) ?
		                x :
		                x === undefined ? {} : { x: x, y: y, r: r }
		            ),
		            wrapper = this.createElement('circle');

		        // Setting x or y translates to cx and cy
		        wrapper.xSetter = wrapper.ySetter = function (value, key, element) {
		            element.setAttribute('c' + key, value);
		        };

		        return wrapper.attr(attribs);
		    },

		    /**
		     * Draw and return an arc.
		     *
		     * @sample highcharts/members/renderer-arc/
		     *         Drawing an arc
		     *
		     * @function Highcharts.SVGRenderer#arc
		     *
		     * @param {number} [x=0]
		     *        Center X position.
		     *
		     * @param {number} [y=0]
		     *        Center Y position.
		     *
		     * @param {number} [r=0]
		     *        The outer radius of the arc.
		     *
		     * @param {number} [innerR=0]
		     *        Inner radius like used in donut charts.
		     *
		     * @param {number} [start=0]
		     *        The starting angle of the arc in radians, where 0 is to the right
		     *         and `-Math.PI/2` is up.
		     *
		     * @param {number} [end=0]
		     *        The ending angle of the arc in radians, where 0 is to the right
		     *        and `-Math.PI/2` is up.
		     *
		     * @return {Highcharts.SVGElement}
		     *         The generated wrapper element.
		     *//**
		     * Draw and return an arc. Overloaded function that takes arguments object.
		     *
		     * @function Highcharts.SVGRenderer#arc
		     *
		     * @param {Highcharts.SVGAttributes} attribs
		     *        Initial SVG attributes.
		     *
		     * @return {Highcharts.SVGElement}
		     *         The generated wrapper element.
		     */
		    arc: function (x, y, r, innerR, start, end) {
		        var arc,
		            options;

		        if (isObject(x)) {
		            options = x;
		            y = options.y;
		            r = options.r;
		            innerR = options.innerR;
		            start = options.start;
		            end = options.end;
		            x = options.x;
		        } else {
		            options = {
		                innerR: innerR,
		                start: start,
		                end: end
		            };
		        }

		        // Arcs are defined as symbols for the ability to set
		        // attributes in attr and animate
		        arc = this.symbol('arc', x, y, r, r, options);
		        arc.r = r; // #959
		        return arc;
		    },

		    /**
		     * Draw and return a rectangle.
		     *
		     * @function Highcharts.SVGRenderer#rect
		     *
		     * @param {number} [x]
		     *        Left position.
		     *
		     * @param {number} [y]
		     *        Top position.
		     *
		     * @param {number} [width]
		     *        Width of the rectangle.
		     *
		     * @param {number} [height]
		     *        Height of the rectangle.
		     *
		     * @param {number} [r]
		     *        Border corner radius.
		     *
		     * @param {number} [strokeWidth]
		     *        A stroke width can be supplied to allow crisp drawing.
		     *
		     * @return {Highcharts.SVGElement}
		     *         The generated wrapper element.
		     *//**
		     * Draw and return a rectangle.
		     *
		     * @sample highcharts/members/renderer-rect-on-chart/
		     *         Draw a rectangle in a chart
		     * @sample highcharts/members/renderer-rect/
		     *         Draw a rectangle independent from a chart
		     *
		     * @function Highcharts.SVGRenderer#rect
		     *
		     * @param {Highcharts.SVGAttributes} [attributes]
		     *        General SVG attributes for the rectangle.
		     *
		     * @return {Highcharts.SVGElement}
		     *         The generated wrapper element.
		     */
		    rect: function (x, y, width, height, r, strokeWidth) {

		        r = isObject(x) ? x.r : r;

		        var wrapper = this.createElement('rect'),
		            attribs = isObject(x) ? x : x === undefined ? {} : {
		                x: x,
		                y: y,
		                width: Math.max(width, 0),
		                height: Math.max(height, 0)
		            };

		        if (!this.styledMode) {
		            if (strokeWidth !== undefined) {
		                attribs.strokeWidth = strokeWidth;
		                attribs = wrapper.crisp(attribs);
		            }
		            attribs.fill = 'none';
		        }

		        if (r) {
		            attribs.r = r;
		        }

		        wrapper.rSetter = function (value, key, element) {
		            attr(element, {
		                rx: value,
		                ry: value
		            });
		        };

		        return wrapper.attr(attribs);
		    },

		    /**
		     * Resize the {@link SVGRenderer#box} and re-align all aligned child
		     * elements.
		     *
		     * @sample highcharts/members/renderer-g/
		     *         Show and hide grouped objects
		     *
		     * @function Highcharts.SVGRenderer#setSize
		     *
		     * @param {number} width
		     *        The new pixel width.
		     *
		     * @param {number} height
		     *        The new pixel height.
		     *
		     * @param {boolean|Highcharts.AnimationOptionsObject} [animate=true]
		     *        Whether and how to animate.
		     */
		    setSize: function (width, height, animate) {
		        var renderer = this,
		            alignedObjects = renderer.alignedObjects,
		            i = alignedObjects.length;

		        renderer.width = width;
		        renderer.height = height;

		        renderer.boxWrapper.animate({
		            width: width,
		            height: height
		        }, {
		            step: function () {
		                this.attr({
		                    viewBox: '0 0 ' + this.attr('width') + ' ' +
		                        this.attr('height')
		                });
		            },
		            duration: pick(animate, true) ? undefined : 0
		        });

		        while (i--) {
		            alignedObjects[i].align();
		        }
		    },

		    /**
		     * Create and return an svg group element. Child
		     * {@link Highcharts.SVGElement} objects are added to the group by using the
		     * group as the first parameter in {@link Highcharts.SVGElement#add|add()}.
		     *
		     * @function Highcharts.SVGRenderer#g
		     *
		     * @param {string} [name]
		     *        The group will be given a class name of `highcharts-{name}`. This
		     *        can be used for styling and scripting.
		     *
		     * @return {Highcharts.SVGElement}
		     *         The generated wrapper element.
		     */
		    g: function (name) {
		        var elem = this.createElement('g');
		        return name ? elem.attr({ 'class': 'highcharts-' + name }) : elem;
		    },

		    /**
		     * Display an image.
		     *
		     * @sample highcharts/members/renderer-image-on-chart/
		     *         Add an image in a chart
		     * @sample highcharts/members/renderer-image/
		     *         Add an image independent of a chart
		     *
		     * @function Highcharts.SVGRenderer#image
		     *
		     * @param {string} src
		     *        The image source.
		     *
		     * @param {number} [x]
		     *        The X position.
		     *
		     * @param {number} [y]
		     *        The Y position.
		     *
		     * @param {number} [width]
		     *        The image width. If omitted, it defaults to the image file width.
		     *
		     * @param {number} [height]
		     *        The image height. If omitted it defaults to the image file
		     *        height.
		     *
		     * @param {Function} [onload]
		     *        Event handler for image load.
		     *
		     * @return {Highcharts.SVGElement}
		     *         The generated wrapper element.
		     */
		    image: function (src, x, y, width, height, onload) {
		        var attribs = {
		                preserveAspectRatio: 'none'
		            },
		            elemWrapper,
		            dummy,
		            setSVGImageSource = function (el, src) {
		                // Set the href in the xlink namespace
		                if (el.setAttributeNS) {
		                    el.setAttributeNS(
		                        'http://www.w3.org/1999/xlink', 'href', src
		                    );
		                } else {
		                    // could be exporting in IE
		                    // using href throws "not supported" in ie7 and under,
		                    // requries regex shim to fix later
		                    el.setAttribute('hc-svg-href', src);
		                }
		            },
		            onDummyLoad = function (e) {
		                setSVGImageSource(elemWrapper.element, src);
		                onload.call(elemWrapper, e);
		            };

		        // optional properties
		        if (arguments.length > 1) {
		            extend(attribs, {
		                x: x,
		                y: y,
		                width: width,
		                height: height
		            });
		        }

		        elemWrapper = this.createElement('image').attr(attribs);

		        // Add load event if supplied
		        if (onload) {
		            // We have to use a dummy HTML image since IE support for SVG image
		            // load events is very buggy. First set a transparent src, wait for
		            // dummy to load, and then add the real src to the SVG image.
		            setSVGImageSource(
		                elemWrapper.element,
		                'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' /* eslint-disable-line */
		            );
		            dummy = new win.Image();
		            addEvent(dummy, 'load', onDummyLoad);
		            dummy.src = src;
		            if (dummy.complete) {
		                onDummyLoad({});
		            }
		        } else {
		            setSVGImageSource(elemWrapper.element, src);
		        }

		        return elemWrapper;
		    },

		    /**
		     * Draw a symbol out of pre-defined shape paths from
		     * {@link SVGRenderer#symbols}.
		     * It is used in Highcharts for point makers, which cake a `symbol` option,
		     * and label and button backgrounds like in the tooltip and stock flags.
		     *
		     * @function Highcharts.SVGRenderer#symbol
		     *
		     * @param {symbol} symbol
		     *        The symbol name.
		     *
		     * @param {number} x
		     *        The X coordinate for the top left position.
		     *
		     * @param {number} y
		     *        The Y coordinate for the top left position.
		     *
		     * @param {number} width
		     *        The pixel width.
		     *
		     * @param {number} height
		     *        The pixel height.
		     *
		     * @param {Highcharts.SymbolOptionsObject} [options]
		     *        Additional options, depending on the actual symbol drawn.
		     *
		     * @return {Highcharts.SVGElement}
		     */
		    symbol: function (symbol, x, y, width, height, options) {

		        var ren = this,
		            obj,
		            imageRegex = /^url\((.*?)\)$/,
		            isImage = imageRegex.test(symbol),
		            sym = !isImage && (this.symbols[symbol] ? symbol : 'circle'),


		            // get the symbol definition function
		            symbolFn = sym && this.symbols[sym],

		            // check if there's a path defined for this symbol
		            path = defined(x) && symbolFn && symbolFn.call(
		                this.symbols,
		                Math.round(x),
		                Math.round(y),
		                width,
		                height,
		                options
		            ),
		            imageSrc,
		            centerImage;

		        if (symbolFn) {
		            obj = this.path(path);

		            if (!ren.styledMode) {
		                obj.attr('fill', 'none');
		            }

		            // expando properties for use in animate and attr
		            extend(obj, {
		                symbolName: sym,
		                x: x,
		                y: y,
		                width: width,
		                height: height
		            });
		            if (options) {
		                extend(obj, options);
		            }


		        // Image symbols
		        } else if (isImage) {


		            imageSrc = symbol.match(imageRegex)[1];

		            // Create the image synchronously, add attribs async
		            obj = this.image(imageSrc);

		            // The image width is not always the same as the symbol width. The
		            // image may be centered within the symbol, as is the case when
		            // image shapes are used as label backgrounds, for example in flags.
		            obj.imgwidth = pick(
		                symbolSizes[imageSrc] && symbolSizes[imageSrc].width,
		                options && options.width
		            );
		            obj.imgheight = pick(
		                symbolSizes[imageSrc] && symbolSizes[imageSrc].height,
		                options && options.height
		            );
		            /**
		             * Set the size and position
		             */
		            centerImage = function () {
		                obj.attr({
		                    width: obj.width,
		                    height: obj.height
		                });
		            };

		            /**
		             * Width and height setters that take both the image's physical size
		             * and the label size into consideration, and translates the image
		             * to center within the label.
		             */
		            ['width', 'height'].forEach(function (key) {
		                obj[key + 'Setter'] = function (value, key) {
		                    var attribs = {},
		                        imgSize = this['img' + key],
		                        trans = key === 'width' ? 'translateX' : 'translateY';
		                    this[key] = value;
		                    if (defined(imgSize)) {
		                        if (this.element) {
		                            this.element.setAttribute(key, imgSize);
		                        }
		                        if (!this.alignByTranslate) {
		                            attribs[trans] = ((this[key] || 0) - imgSize) / 2;
		                            this.attr(attribs);
		                        }
		                    }
		                };
		            });


		            if (defined(x)) {
		                obj.attr({
		                    x: x,
		                    y: y
		                });
		            }
		            obj.isImg = true;

		            if (defined(obj.imgwidth) && defined(obj.imgheight)) {
		                centerImage();
		            } else {
		                // Initialize image to be 0 size so export will still function
		                // if there's no cached sizes.
		                obj.attr({ width: 0, height: 0 });

		                // Create a dummy JavaScript image to get the width and height.
		                createElement('img', {
		                    onload: function () {

		                        var chart = charts[ren.chartIndex];

		                        // Special case for SVGs on IE11, the width is not
		                        // accessible until the image is part of the DOM
		                        // (#2854).
		                        if (this.width === 0) {
		                            css(this, {
		                                position: 'absolute',
		                                top: '-999em'
		                            });
		                            doc.body.appendChild(this);
		                        }

		                        // Center the image
		                        symbolSizes[imageSrc] = { // Cache for next
		                            width: this.width,
		                            height: this.height
		                        };
		                        obj.imgwidth = this.width;
		                        obj.imgheight = this.height;

		                        if (obj.element) {
		                            centerImage();
		                        }

		                        // Clean up after #2854 workaround.
		                        if (this.parentNode) {
		                            this.parentNode.removeChild(this);
		                        }

		                        // Fire the load event when all external images are
		                        // loaded
		                        ren.imgCount--;
		                        if (!ren.imgCount && chart && chart.onload) {
		                            chart.onload();
		                        }
		                    },
		                    src: imageSrc
		                });
		                this.imgCount++;
		            }
		        }

		        return obj;
		    },

		    /**
		     * An extendable collection of functions for defining symbol paths.
		     *
		     * @name Highcharts.SVGRenderer#symbols
		     * @type {Highcharts.SymbolDictionary}
		     */
		    symbols: {
		        'circle': function (x, y, w, h) {
		            // Return a full arc
		            return this.arc(x + w / 2, y + h / 2, w / 2, h / 2, {
		                start: 0,
		                end: Math.PI * 2,
		                open: false
		            });
		        },

		        'square': function (x, y, w, h) {
		            return [
		                'M', x, y,
		                'L', x + w, y,
		                x + w, y + h,
		                x, y + h,
		                'Z'
		            ];
		        },

		        'triangle': function (x, y, w, h) {
		            return [
		                'M', x + w / 2, y,
		                'L', x + w, y + h,
		                x, y + h,
		                'Z'
		            ];
		        },

		        'triangle-down': function (x, y, w, h) {
		            return [
		                'M', x, y,
		                'L', x + w, y,
		                x + w / 2, y + h,
		                'Z'
		            ];
		        },
		        'diamond': function (x, y, w, h) {
		            return [
		                'M', x + w / 2, y,
		                'L', x + w, y + h / 2,
		                x + w / 2, y + h,
		                x, y + h / 2,
		                'Z'
		            ];
		        },
		        'arc': function (x, y, w, h, options) {
		            var start = options.start,
		                rx = options.r || w,
		                ry = options.r || h || w,
		                proximity = 0.001,
		                fullCircle =
		                    Math.abs(options.end - options.start - 2 * Math.PI) <
		                    proximity,
		                // Substract a small number to prevent cos and sin of start and
		                // end from becoming equal on 360 arcs (related: #1561)
		                end = options.end - proximity,
		                innerRadius = options.innerR,
		                open = pick(options.open, fullCircle),
		                cosStart = Math.cos(start),
		                sinStart = Math.sin(start),
		                cosEnd = Math.cos(end),
		                sinEnd = Math.sin(end),
		                // Proximity takes care of rounding errors around PI (#6971)
		                longArc = options.end - start - Math.PI < proximity ? 0 : 1,
		                arc;

		            arc = [
		                'M',
		                x + rx * cosStart,
		                y + ry * sinStart,
		                'A', // arcTo
		                rx, // x radius
		                ry, // y radius
		                0, // slanting
		                longArc, // long or short arc
		                1, // clockwise
		                x + rx * cosEnd,
		                y + ry * sinEnd
		            ];

		            if (defined(innerRadius)) {
		                arc.push(
		                    open ? 'M' : 'L',
		                    x + innerRadius * cosEnd,
		                    y + innerRadius * sinEnd,
		                    'A', // arcTo
		                    innerRadius, // x radius
		                    innerRadius, // y radius
		                    0, // slanting
		                    longArc, // long or short arc
		                    0, // clockwise
		                    x + innerRadius * cosStart,
		                    y + innerRadius * sinStart
		                );
		            }

		            arc.push(open ? '' : 'Z'); // close
		            return arc;
		        },

		        /**
		         * Callout shape used for default tooltips, also used for rounded
		         * rectangles in VML
		         */
		        'callout': function (x, y, w, h, options) {
		            var arrowLength = 6,
		                halfDistance = 6,
		                r = Math.min((options && options.r) || 0, w, h),
		                safeDistance = r + halfDistance,
		                anchorX = options && options.anchorX,
		                anchorY = options && options.anchorY,
		                path;

		            path = [
		                'M', x + r, y,
		                'L', x + w - r, y, // top side
		                'C', x + w, y, x + w, y, x + w, y + r, // top-right corner
		                'L', x + w, y + h - r, // right side
		                'C', x + w, y + h, x + w, y + h, x + w - r, y + h, // bottom-rgt
		                'L', x + r, y + h, // bottom side
		                'C', x, y + h, x, y + h, x, y + h - r, // bottom-left corner
		                'L', x, y + r, // left side
		                'C', x, y, x, y, x + r, y // top-left corner
		            ];

		            // Anchor on right side
		            if (anchorX && anchorX > w) {

		                // Chevron
		                if (
		                    anchorY > y + safeDistance &&
		                    anchorY < y + h - safeDistance
		                ) {
		                    path.splice(13, 3,
		                        'L', x + w, anchorY - halfDistance,
		                        x + w + arrowLength, anchorY,
		                        x + w, anchorY + halfDistance,
		                        x + w, y + h - r
		                    );

		                // Simple connector
		                } else {
		                    path.splice(13, 3,
		                        'L', x + w, h / 2,
		                        anchorX, anchorY,
		                        x + w, h / 2,
		                        x + w, y + h - r
		                    );
		                }

		            // Anchor on left side
		            } else if (anchorX && anchorX < 0) {

		                // Chevron
		                if (
		                    anchorY > y + safeDistance &&
		                    anchorY < y + h - safeDistance
		                ) {
		                    path.splice(33, 3,
		                        'L', x, anchorY + halfDistance,
		                        x - arrowLength, anchorY,
		                        x, anchorY - halfDistance,
		                        x, y + r
		                    );

		                // Simple connector
		                } else {
		                    path.splice(33, 3,
		                        'L', x, h / 2,
		                        anchorX, anchorY,
		                        x, h / 2,
		                        x, y + r
		                    );
		                }

		            } else if ( // replace bottom
		                anchorY &&
		                anchorY > h &&
		                anchorX > x + safeDistance &&
		                anchorX < x + w - safeDistance
		            ) {
		                path.splice(23, 3,
		                    'L', anchorX + halfDistance, y + h,
		                    anchorX, y + h + arrowLength,
		                    anchorX - halfDistance, y + h,
		                    x + r, y + h
		                    );

		            } else if ( // replace top
		                anchorY &&
		                anchorY < 0 &&
		                anchorX > x + safeDistance &&
		                anchorX < x + w - safeDistance
		            ) {
		                path.splice(3, 3,
		                    'L', anchorX - halfDistance, y,
		                    anchorX, y - arrowLength,
		                    anchorX + halfDistance, y,
		                    w - r, y
		                );
		            }

		            return path;
		        }
		    },

		    /**
		     * Define a clipping rectangle. The clipping rectangle is later applied
		     * to {@link SVGElement} objects through the {@link SVGElement#clip}
		     * function.
		     *
		     * @example
		     * var circle = renderer.circle(100, 100, 100)
		     *     .attr({ fill: 'red' })
		     *     .add();
		     * var clipRect = renderer.clipRect(100, 100, 100, 100);
		     *
		     * // Leave only the lower right quarter visible
		     * circle.clip(clipRect);
		     *
		     * @function Highcharts.SVGRenderer#clipRect
		     *
		     * @param {string} id
		     *
		     * @param {number} x
		     *
		     * @param {number} y
		     *
		     * @param {number} width
		     *
		     * @param {number} height
		     *
		     * @return {Highcharts.ClipRectElement}
		     *         A clipping rectangle.
		     */
		    clipRect: function (x, y, width, height) {
		        var wrapper,
		            id = H.uniqueKey(),

		            clipPath = this.createElement('clipPath').attr({
		                id: id
		            }).add(this.defs);

		        wrapper = this.rect(x, y, width, height, 0).add(clipPath);
		        wrapper.id = id;
		        wrapper.clipPath = clipPath;
		        wrapper.count = 0;

		        return wrapper;
		    },





		    /**
		     * Draw text. The text can contain a subset of HTML, like spans and anchors
		     * and some basic text styling of these. For more advanced features like
		     * border and background, use {@link Highcharts.SVGRenderer#label} instead.
		     * To update the text after render, run `text.attr({ text: 'New text' })`.
		     *
		     * @sample highcharts/members/renderer-text-on-chart/
		     *         Annotate the chart freely
		     * @sample highcharts/members/renderer-on-chart/
		     *         Annotate with a border and in response to the data
		     * @sample highcharts/members/renderer-text/
		     *         Formatted text
		     *
		     * @function Highcharts.SVGRenderer#text
		     *
		     * @param {string} str
		     *        The text of (subset) HTML to draw.
		     *
		     * @param {number} x
		     *        The x position of the text's lower left corner.
		     *
		     * @param {number} y
		     *        The y position of the text's lower left corner.
		     *
		     * @param {boolean} [useHTML=false]
		     *        Use HTML to render the text.
		     *
		     * @return {Highcharts.SVGElement}
		     *         The text object.
		     */
		    text: function (str, x, y, useHTML) {

		        // declare variables
		        var renderer = this,
		            wrapper,
		            attribs = {};

		        if (useHTML && (renderer.allowHTML || !renderer.forExport)) {
		            return renderer.html(str, x, y);
		        }

		        attribs.x = Math.round(x || 0); // X always needed for line-wrap logic
		        if (y) {
		            attribs.y = Math.round(y);
		        }
		        if (defined(str)) {
		            attribs.text = str;
		        }

		        wrapper = renderer.createElement('text')
		            .attr(attribs);

		        if (!useHTML) {
		            wrapper.xSetter = function (value, key, element) {
		                var tspans = element.getElementsByTagName('tspan'),
		                    tspan,
		                    parentVal = element.getAttribute(key),
		                    i;
		                for (i = 0; i < tspans.length; i++) {
		                    tspan = tspans[i];
		                    // If the x values are equal, the tspan represents a
		                    // linebreak
		                    if (tspan.getAttribute(key) === parentVal) {
		                        tspan.setAttribute(key, value);
		                    }
		                }
		                element.setAttribute(key, value);
		            };
		        }

		        return wrapper;
		    },

		    /**
		     * Utility to return the baseline offset and total line height from the font
		     * size.
		     *
		     * @function Highcharts.SVGRenderer#fontMetrics
		     *
		     * @param {string} [fontSize]
		     *        The current font size to inspect. If not given, the font size
		     *        will be found from the DOM element.
		     *
		     * @param {Highcharts.SVGElement|Highcharts.SVGDOMElement} [elem]
		     *        The element to inspect for a current font size.
		     *
		     * @return {Highcharts.FontMetricsObject}
		     *         The font metrics.
		     */
		    fontMetrics: function (fontSize, elem) {
		        var lineHeight,
		            baseline;

		        if (this.styledMode) {
		            fontSize = elem && SVGElement.prototype.getStyle.call(
		                elem,
		                'font-size'
		            );
		        } else {
		            fontSize = fontSize ||
		                // When the elem is a DOM element (#5932)
		                (elem && elem.style && elem.style.fontSize) ||
		                // Fall back on the renderer style default
		                (this.style && this.style.fontSize);
		        }

		        // Handle different units
		        if (/px/.test(fontSize)) {
		            fontSize = pInt(fontSize);
		        } else if (/em/.test(fontSize)) {
		            // The em unit depends on parent items
		            fontSize = parseFloat(fontSize) *
		                (elem ? this.fontMetrics(null, elem.parentNode).f : 16);
		        } else {
		            fontSize = 12;
		        }

		        // Empirical values found by comparing font size and bounding box
		        // height. Applies to the default font family.
		        // https://jsfiddle.net/highcharts/7xvn7/
		        lineHeight = fontSize < 24 ? fontSize + 3 : Math.round(fontSize * 1.2);
		        baseline = Math.round(lineHeight * 0.8);

		        return {
		            h: lineHeight,
		            b: baseline,
		            f: fontSize
		        };
		    },

		    /**
		     * Correct X and Y positioning of a label for rotation (#1764).
		     *
		     * @private
		     * @function Highcharts.SVGRenderer#rotCorr
		     *
		     * @param {number} baseline
		     *
		     * @param {number} rotation
		     *
		     * @param {boolean} alterY
		     */
		    rotCorr: function (baseline, rotation, alterY) {
		        var y = baseline;
		        if (rotation && alterY) {
		            y = Math.max(y * Math.cos(rotation * deg2rad), 4);
		        }
		        return {
		            x: (-baseline / 3) * Math.sin(rotation * deg2rad),
		            y: y
		        };
		    },

		    /**
		     * Draw a label, which is an extended text element with support for border
		     * and background. Highcharts creates a `g` element with a text and a `path`
		     * or `rect` inside, to make it behave somewhat like a HTML div. Border and
		     * background are set through `stroke`, `stroke-width` and `fill` attributes
		     * using the {@link Highcharts.SVGElement#attr|attr} method. To update the
		     * text after render, run `label.attr({ text: 'New text' })`.
		     *
		     * @sample highcharts/members/renderer-label-on-chart/
		     *         A label on the chart
		     *
		     * @function Highcharts.SVGRenderer#label
		     *
		     * @param {string} str
		     *        The initial text string or (subset) HTML to render.
		     *
		     * @param {number} x
		     *        The x position of the label's left side.
		     *
		     * @param {number} y
		     *        The y position of the label's top side or baseline, depending on
		     *        the `baseline` parameter.
		     *
		     * @param {string} [shape='rect']
		     *        The shape of the label's border/background, if any. Defaults to
		     *        `rect`. Other possible values are `callout` or other shapes
		     *        defined in {@link Highcharts.SVGRenderer#symbols}.
		     *
		     * @param {string} [shape='rect']
		     *        The shape of the label's border/background, if any. Defaults to
		     *        `rect`. Other possible values are `callout` or other shapes
		     *        defined in {@link Highcharts.SVGRenderer#symbols}.
		     *
		     * @param {number} [anchorX]
		     *        In case the `shape` has a pointer, like a flag, this is the
		     *        coordinates it should be pinned to.
		     *
		     * @param {number} [anchorY]
		     *        In case the `shape` has a pointer, like a flag, this is the
		     *        coordinates it should be pinned to.
		     *
		     * @param {boolean} [useHTML=false]
		     *        Wether to use HTML to render the label.
		     *
		     * @param {boolean} [baseline=false]
		     *        Whether to position the label relative to the text baseline,
		     *        like {@link Highcharts.SVGRenderer#text|renderer.text}, or to the
		     *        upper border of the rectangle.
		     *
		     * @param {string} [className]
		     *        Class name for the group.
		     *
		     * @return {Highcharts.SVGElement}
		     *         The generated label.
		     */
		    label: function (
		        str,
		        x,
		        y,
		        shape,
		        anchorX,
		        anchorY,
		        useHTML,
		        baseline,
		        className
		    ) {

		        var renderer = this,
		            styledMode = renderer.styledMode,
		            wrapper = renderer.g(className !== 'button' && 'label'),
		            text = wrapper.text = renderer.text('', 0, 0, useHTML)
		                .attr({
		                    zIndex: 1
		                }),
		            box,
		            bBox,
		            alignFactor = 0,
		            padding = 3,
		            paddingLeft = 0,
		            width,
		            height,
		            wrapperX,
		            wrapperY,
		            textAlign,
		            deferredAttr = {},
		            strokeWidth,
		            baselineOffset,
		            hasBGImage = /^url\((.*?)\)$/.test(shape),
		            needsBox = styledMode || hasBGImage,
		            getCrispAdjust = function () {
		                return styledMode ?
		                    box.strokeWidth() % 2 / 2 :
		                    (strokeWidth ? parseInt(strokeWidth, 10) : 0) % 2 / 2;
		            },
		            updateBoxSize,
		            updateTextPadding,
		            boxAttr;

		        if (className) {
		            wrapper.addClass('highcharts-' + className);
		        }

		        /* This function runs after the label is added to the DOM (when the
		           bounding box is available), and after the text of the label is
		           updated to detect the new bounding box and reflect it in the border
		           box. */
		        updateBoxSize = function () {
		            var style = text.element.style,
		                crispAdjust,
		                attribs = {};

		            bBox = (
		                (width === undefined || height === undefined || textAlign) &&
		                defined(text.textStr) &&
		                text.getBBox()
		            ); // #3295 && 3514 box failure when string equals 0

		            wrapper.width = (
		                (width || bBox.width || 0) +
		                2 * padding +
		                paddingLeft
		            );
		            wrapper.height = (height || bBox.height || 0) + 2 * padding;

		            // Update the label-scoped y offset
		            baselineOffset = padding + Math.min(
		                renderer.fontMetrics(style && style.fontSize, text).b,
		                // Math.min because of inline style (#9400)
		                bBox ? bBox.height : Infinity
		            );

		            if (needsBox) {

		                // Create the border box if it is not already present
		                if (!box) {
		                    // Symbol definition exists (#5324)
		                    wrapper.box = box = renderer.symbols[shape] || hasBGImage ?
		                        renderer.symbol(shape) :
		                        renderer.rect();

		                    box.addClass( // Don't use label className for buttons
		                        (className === 'button' ? '' : 'highcharts-label-box') +
		                        (className ? ' highcharts-' + className + '-box' : '')
		                    );

		                    box.add(wrapper);

		                    crispAdjust = getCrispAdjust();
		                    attribs.x = crispAdjust;
		                    attribs.y = (baseline ? -baselineOffset : 0) + crispAdjust;
		                }

		                // Apply the box attributes
		                attribs.width = Math.round(wrapper.width);
		                attribs.height = Math.round(wrapper.height);

		                box.attr(extend(attribs, deferredAttr));
		                deferredAttr = {};
		            }
		        };

		        /*
		         * This function runs after setting text or padding, but only if padding
		         * is changed.
		         */
		        updateTextPadding = function () {
		            var textX = paddingLeft + padding,
		                textY;

		            // determin y based on the baseline
		            textY = baseline ? 0 : baselineOffset;

		            // compensate for alignment
		            if (
		                defined(width) &&
		                bBox &&
		                (textAlign === 'center' || textAlign === 'right')
		            ) {
		                textX += { center: 0.5, right: 1 }[textAlign] *
		                    (width - bBox.width);
		            }

		            // update if anything changed
		            if (textX !== text.x || textY !== text.y) {
		                text.attr('x', textX);
		                // #8159 - prevent misplaced data labels in treemap
		                // (useHTML: true)
		                if (text.hasBoxWidthChanged) {
		                    bBox = text.getBBox(true);
		                    updateBoxSize();
		                }
		                if (textY !== undefined) {
		                    text.attr('y', textY);
		                }
		            }

		            // record current values
		            text.x = textX;
		            text.y = textY;
		        };

		        /*
		         * Set a box attribute, or defer it if the box is not yet created
		         */
		        boxAttr = function (key, value) {
		            if (box) {
		                box.attr(key, value);
		            } else {
		                deferredAttr[key] = value;
		            }
		        };

		        /*
		         * After the text element is added, get the desired size of the border
		         * box and add it before the text in the DOM.
		         */
		        wrapper.onAdd = function () {
		            text.add(wrapper);
		            wrapper.attr({
		                // Alignment is available now  (#3295, 0 not rendered if given
		                // as a value)
		                text: (str || str === 0) ? str : '',
		                x: x,
		                y: y
		            });

		            if (box && defined(anchorX)) {
		                wrapper.attr({
		                    anchorX: anchorX,
		                    anchorY: anchorY
		                });
		            }
		        };

		        /*
		         * Add specific attribute setters.
		         */

		        // only change local variables
		        wrapper.widthSetter = function (value) {
		            width = H.isNumber(value) ? value : null; // width:auto => null
		        };
		        wrapper.heightSetter = function (value) {
		            height = value;
		        };
		        wrapper['text-alignSetter'] = function (value) {
		            textAlign = value;
		        };
		        wrapper.paddingSetter = function (value) {
		            if (defined(value) && value !== padding) {
		                padding = wrapper.padding = value;
		                updateTextPadding();
		            }
		        };
		        wrapper.paddingLeftSetter = function (value) {
		            if (defined(value) && value !== paddingLeft) {
		                paddingLeft = value;
		                updateTextPadding();
		            }
		        };


		        // change local variable and prevent setting attribute on the group
		        wrapper.alignSetter = function (value) {
		            value = { left: 0, center: 0.5, right: 1 }[value];
		            if (value !== alignFactor) {
		                alignFactor = value;
		                // Bounding box exists, means we're dynamically changing
		                if (bBox) {
		                    wrapper.attr({ x: wrapperX }); // #5134
		                }
		            }
		        };

		        // apply these to the box and the text alike
		        wrapper.textSetter = function (value) {
		            if (value !== undefined) {
		                text.textSetter(value);
		            }
		            updateBoxSize();
		            updateTextPadding();
		        };

		        // apply these to the box but not to the text
		        wrapper['stroke-widthSetter'] = function (value, key) {
		            if (value) {
		                needsBox = true;
		            }
		            strokeWidth = this['stroke-width'] = value;
		            boxAttr(key, value);
		        };

		        if (styledMode) {
		            wrapper.rSetter = function (value, key) {
		                boxAttr(key, value);
		            };
		        } else {
		            wrapper.strokeSetter =
		            wrapper.fillSetter =
		            wrapper.rSetter = function (value, key) {
		                if (key !== 'r') {
		                    if (key === 'fill' && value) {
		                        needsBox = true;
		                    }
		                    // for animation getter (#6776)
		                    wrapper[key] = value;
		                }
		                boxAttr(key, value);
		            };
		        }

		        wrapper.anchorXSetter = function (value, key) {
		            anchorX = wrapper.anchorX = value;
		            boxAttr(key, Math.round(value) - getCrispAdjust() - wrapperX);
		        };
		        wrapper.anchorYSetter = function (value, key) {
		            anchorY = wrapper.anchorY = value;
		            boxAttr(key, value - wrapperY);
		        };

		        // rename attributes
		        wrapper.xSetter = function (value) {
		            wrapper.x = value; // for animation getter
		            if (alignFactor) {
		                value -= alignFactor * ((width || bBox.width) + 2 * padding);

		                // Force animation even when setting to the same value (#7898)
		                wrapper['forceAnimate:x'] = true;
		            }
		            wrapperX = Math.round(value);
		            wrapper.attr('translateX', wrapperX);
		        };
		        wrapper.ySetter = function (value) {
		            wrapperY = wrapper.y = Math.round(value);
		            wrapper.attr('translateY', wrapperY);
		        };

		        // Redirect certain methods to either the box or the text
		        var baseCss = wrapper.css;
		        var wrapperExtension = {
		            /**
		             * Pick up some properties and apply them to the text instead of the
		             * wrapper.
		             */
		            css: function (styles) {
		                if (styles) {
		                    var textStyles = {};
		                    // Create a copy to avoid altering the original object
		                    // (#537)
		                    styles = merge(styles);
		                    wrapper.textProps.forEach(function (prop) {
		                        if (styles[prop] !== undefined) {
		                            textStyles[prop] = styles[prop];
		                            delete styles[prop];
		                        }
		                    });
		                    text.css(textStyles);

		                    // Update existing text and box
		                    if ('width' in textStyles) {
		                        updateBoxSize();
		                    }

		                    // Keep updated (#9400)
		                    if ('fontSize' in textStyles) {
		                        updateBoxSize();
		                        updateTextPadding();
		                    }
		                }
		                return baseCss.call(wrapper, styles);
		            },
		            /*
		             * Return the bounding box of the box, not the group.
		             */
		            getBBox: function () {
		                return {
		                    width: bBox.width + 2 * padding,
		                    height: bBox.height + 2 * padding,
		                    x: bBox.x - padding,
		                    y: bBox.y - padding
		                };
		            },
		            /**
		             * Destroy and release memory.
		             */
		            destroy: function () {

		                // Added by button implementation
		                removeEvent(wrapper.element, 'mouseenter');
		                removeEvent(wrapper.element, 'mouseleave');

		                if (text) {
		                    text = text.destroy();
		                }
		                if (box) {
		                    box = box.destroy();
		                }
		                // Call base implementation to destroy the rest
		                SVGElement.prototype.destroy.call(wrapper);

		                // Release local pointers (#1298)
		                wrapper =
		                renderer =
		                updateBoxSize =
		                updateTextPadding =
		                boxAttr = null;
		            }
		        };
		        if (!styledMode) {
		            /**
		             * Apply the shadow to the box.
		             *
		             * @ignore
		             * @function Highcharts.SVGElement#shadow
		             *
		             * @return {Highcharts.SVGElement}
		             */
		            wrapperExtension.shadow = function (b) {
		                if (b) {
		                    updateBoxSize();
		                    if (box) {
		                        box.shadow(b);
		                    }
		                }
		                return wrapper;
		            };
		        }

		        return extend(wrapper, wrapperExtension);
		    }
		}); // end SVGRenderer


		// general renderer
		H.Renderer = SVGRenderer;

	}(Highcharts));
	(function (H) {
		/* *
		 * (c) 2010-2018 Torstein Honsi
		 *
		 * License: www.highcharts.com/license
		 */

		/**
		 * Function callback when a series has been animated.
		 *
		 * @callback Highcharts.SeriesAfterAnimateCallbackFunction
		 *
		 * @param {Highcharts.SeriesAfterAnimateEventObject} e
		 *        Event arguments.
		 */

		/**
		 * Event information regarding completed animation of a series.
		 *
		 * @interface Highcharts.SeriesAfterAnimateEventObject
		 *//**
		 * Animated series.
		 * @name Highcharts.SeriesAfterAnimateEventObject#target
		 * @type {Highcharts.Series}
		 *//**
		 * Event type.
		 * @name Highcharts.SeriesAfterAnimateEventObject#type
		 * @type {"afterAnimate"}
		 */

		/**
		 * Function callback when the checkbox next to the series' name in the legend is
		 * clicked.
		 *
		 * @callback Highcharts.SeriesCheckboxClickCallbackFunction
		 *
		 * @param {Highcharts.SeriesCheckboxClickEventObject} e
		 *        Event arguments.
		 */

		/**
		 * Event information regarding check of a series box.
		 *
		 * @interface Highcharts.SeriesCheckboxClickEventObject
		 *//**
		 * Whether the box has been checked.
		 * @name Highcharts.SeriesCheckboxClickEventObject#checked
		 * @type {boolean}
		 *//**
		 * Related series.
		 * @name Highcharts.SeriesCheckboxClickEventObject#item
		 * @type {Highcharts.Series}
		 *//**
		 * Related series.
		 * @name Highcharts.SeriesCheckboxClickEventObject#target
		 * @type {Highcharts.Series}
		 *//**
		 * Event type.
		 * @name Highcharts.SeriesCheckboxClickEventObject#type
		 * @type {"checkboxClick"}
		 */

		/**
		 * Common information for a click event on a series.
		 *
		 * @interface Highcharts.SeriesClickEventObject
		 *
		 * @implements {global.Event}
		 *//**
		 * Nearest point on the graph.
		 * @name Highcharts.SeriesClickEventObject#point
		 * @type {Highcharts.Point}
		 */

		/**
		 * Function callback when a series is clicked. Return false to cancel toogle
		 * actions.
		 *
		 * @callback Highcharts.SeriesClickCallbackFunction
		 *
		 * @param {Highcharts.SeriesClickEventObject} e
		 *        Event arguments.
		 */

		/**
		 * @interface Highcharts.SeriesDataLabelsFormatterContextObject
		 *//**
		 * @name Highcharts.SeriesDataLabelsFormatterContextObject#point
		 * @type {Highcharts.Point}
		 */

		/**
		 * Translation and scale for the plot area of a series.
		 *
		 * @interface Highcharts.SeriesPlotBoxObject
		 *//**
		 * @name Highcharts.SeriesPlotBoxObject#translateX
		 * @type {number}
		 *//**
		 * @name Highcharts.SeriesPlotBoxObject#translateY
		 * @type {number}
		 *//**
		 * @name Highcharts.SeriesPlotBoxObject#scaleX
		 * @type {number}
		 *//**
		 * @name Highcharts.SeriesPlotBoxObject#scaleY
		 * @type {number}
		 */

		/**
		 * Function callback when a series point is clicked. Return false to cancel the
		 * action.
		 *
		 * @callback Highcharts.SeriesPointClickCallbackFunction
		 *
		 * @param {Highcharts.SeriesPointClickEventObject} e
		 *        Event arguments.
		 */

		/**
		 * Common information for a click event on a series point.
		 *
		 * @interface Highcharts.SeriesPointClickEventObject
		 *
		 * @implements {global.Event}
		 *//**
		 * Clicked point.
		 * @name Highcharts.SeriesPointClickEventObject#point
		 * @type {Highcharts.Point}
		 */



		var addEvent = H.addEvent,
		    animObject = H.animObject,
		    arrayMax = H.arrayMax,
		    arrayMin = H.arrayMin,
		    correctFloat = H.correctFloat,
		    defaultOptions = H.defaultOptions,
		    defaultPlotOptions = H.defaultPlotOptions,
		    defined = H.defined,
		    erase = H.erase,
		    extend = H.extend,
		    fireEvent = H.fireEvent,
		    isArray = H.isArray,
		    isNumber = H.isNumber,
		    isString = H.isString,
		    LegendSymbolMixin = H.LegendSymbolMixin, // @todo add as a requirement
		    merge = H.merge,
		    objectEach = H.objectEach,
		    pick = H.pick,
		    Point = H.Point, // @todo  add as a requirement
		    removeEvent = H.removeEvent,
		    splat = H.splat,
		    SVGElement = H.SVGElement,
		    syncTimeout = H.syncTimeout,
		    win = H.win;

		/**
		 * This is the base series prototype that all other series types inherit from.
		 * A new series is initialized either through the
		 * [series](https://api.highcharts.com/highcharts/series)
		 * option structure, or after the chart is initialized, through
		 * {@link Highcharts.Chart#addSeries}.
		 *
		 * The object can be accessed in a number of ways. All series and point event
		 * handlers give a reference to the `series` object. The chart object has a
		 * {@link Highcharts.Chart#series|series} property that is a collection of all
		 * the chart's series. The point objects and axis objects also have the same
		 * reference.
		 *
		 * Another way to reference the series programmatically is by `id`. Add an id
		 * in the series configuration options, and get the series object by
		 * {@link Highcharts.Chart#get}.
		 *
		 * Configuration options for the series are given in three levels. Options for
		 * all series in a chart are given in the
		 * [plotOptions.series](https://api.highcharts.com/highcharts/plotOptions.series)
		 * object. Then options for all series of a specific type
		 * are given in the plotOptions of that type, for example `plotOptions.line`.
		 * Next, options for one single series are given in the series array, or as
		 * arguments to `chart.addSeries`.
		 *
		 * The data in the series is stored in various arrays.
		 *
		 * - First, `series.options.data` contains all the original config options for
		 *   each point whether added by options or methods like `series.addPoint`.
		 *
		 * - Next, `series.data` contains those values converted to points, but in case
		 *   the series data length exceeds the `cropThreshold`, or if the data is
		 *   grouped, `series.data` doesn't contain all the points. It only contains the
		 *   points that have been created on demand.
		 *
		 * - Then there's `series.points` that contains all currently visible point
		 *   objects. In case of cropping, the cropped-away points are not part of this
		 *   array. The `series.points` array starts at `series.cropStart` compared to
		 *   `series.data` and `series.options.data`. If however the series data is
		 *   grouped, these can't be correlated one to one.
		 *
		 * - `series.xData` and `series.processedXData` contain clean x values,
		 *   equivalent to `series.data` and `series.points`.
		 *
		 * - `series.yData` and `series.processedYData` contain clean y values,
		 *   equivalent to `series.data` and `series.points`.
		 *
		 * @class
		 * @name Highcharts.Series
		 *
		 * @param {Highcharts.Chart} chart
		 *        The chart instance.
		 *
		 * @param {Highcharts.SeriesOptionsType|object} options
		 *        The series options.
		 *//**
		 * The line series is the base type and is therefor the series base prototype.
		 *
		 * @private
		 * @class
		 * @name Highcharts.seriesTypes.line
		 *
		 * @augments Highcharts.Series
		 */
		H.Series = H.seriesType('line',

		/**
		 * Series options for specific data and the data itself. In TypeScript you
		 * have to cast the series options to specific series types, to get all
		 * possible options for a series.
		 *
		 * @example
		 * // TypeScript example
		 * Highcharts.chart('container', {
		 *     series: [{
		 *         color: '#06C',
		 *         data: [[0, 1], [2, 3]]
		 *     } as Highcharts.SeriesLineOptions ]
		 * });
		 *
		 * @type      {Array<*>}
		 * @apioption series
		 */

		/**
		 * An id for the series. This can be used after render time to get a pointer
		 * to the series object through `chart.get()`.
		 *
		 * @sample {highcharts} highcharts/plotoptions/series-id/
		 *         Get series by id
		 *
		 * @type      {string}
		 * @since     1.2.0
		 * @apioption series.id
		 */

		/**
		 * The index of the series in the chart, affecting the internal index in the
		 * `chart.series` array, the visible Z index as well as the order in the
		 * legend.
		 *
		 * @type      {number}
		 * @since     2.3.0
		 * @apioption series.index
		 */

		/**
		 * The sequential index of the series in the legend.
		 *
		 * @see [legend.reversed](#legend.reversed),
		 *      [yAxis.reversedStacks](#yAxis.reversedStacks)
		 *
		 * @sample {highcharts|highstock} highcharts/series/legendindex/
		 *         Legend in opposite order
		 *
		 * @type      {number}
		 * @apioption series.legendIndex
		 */
		/**
		 * The name of the series as shown in the legend, tooltip etc.
		 *
		 * @sample {highcharts} highcharts/series/name/
		 *         Series name
		 * @sample {highmaps} maps/demo/category-map/
		 *         Series name
		 *
		 * @type      {string}
		 * @apioption series.name
		 */

		/**
		 * This option allows grouping series in a stacked chart. The stack option
		 * can be a string or anything else, as long as the grouped series' stack
		 * options match each other after conversion into a string.
		 *
		 * @sample {highcharts} highcharts/series/stack/
		 *         Stacked and grouped columns
		 *
		 * @type      {string|object}
		 * @since     2.1
		 * @product   highcharts highstock
		 * @apioption series.stack
		 */

		/**
		 * The type of series, for example `line` or `column`. By default, the
		 * series type is inherited from [chart.type](#chart.type), so unless the
		 * chart is a combination of series types, there is no need to set it on the
		 * series level.
		 *
		 * @sample {highcharts} highcharts/series/type/
		 *         Line and column in the same chart
		 * @sample {highmaps} maps/demo/mapline-mappoint/
		 *         Multiple types in the same map
		 *
		 * @type      {string}
		 * @apioption series.type
		 */

		/**
		 * When using dual or multiple x axes, this number defines which xAxis the
		 * particular series is connected to. It refers to either the
		 * {@link #xAxis.id|axis id}
		 * or the index of the axis in the xAxis array, with 0 being the first.
		 *
		 * @type      {number|string}
		 * @default   0
		 * @product   highcharts highstock
		 * @apioption series.xAxis
		 */

		/**
		 * When using dual or multiple y axes, this number defines which yAxis the
		 * particular series is connected to. It refers to either the
		 * {@link #yAxis.id|axis id}
		 * or the index of the axis in the yAxis array, with 0 being the first.
		 *
		 * @sample {highcharts} highcharts/series/yaxis/
		 *         Apply the column series to the secondary Y axis
		 *
		 * @type      {number|string}
		 * @default   0
		 * @product   highcharts highstock
		 * @apioption series.yAxis
		 */

		/**
		 * Define the visual z index of the series.
		 *
		 * @sample {highcharts} highcharts/plotoptions/series-zindex-default/
		 *         With no z index, the series defined last are on top
		 * @sample {highcharts} highcharts/plotoptions/series-zindex/
		 *         With a z index, the series with the highest z index is on top
		 * @sample {highstock} highcharts/plotoptions/series-zindex-default/
		 *         With no z index, the series defined last are on top
		 * @sample {highstock} highcharts/plotoptions/series-zindex/
		 *         With a z index, the series with the highest z index is on top
		 *
		 * @type      {number}
		 * @product   highcharts highstock
		 * @apioption series.zIndex
		 */

		null

		/**
		 * General options for all series types.
		 *
		 * @optionparent plotOptions.series
		 */
		, { // base series options
		    /**
		     * The SVG value used for the `stroke-linecap` and `stroke-linejoin`
		     * of a line graph. Round means that lines are rounded in the ends and
		     * bends.
		     *
		     * @type       {string}
		     * @validvalue ["round", "butt", "square"]
		     * @default    round
		     * @since      3.0.7
		     * @apioption  plotOptions.line.linecap
		     */

		    /**
		     * Pixel width of the graph line.
		     *
		     * @see In styled mode, the line stroke-width can be set with the
		     *      `.highcharts-graph` class name.
		     *
		     * @sample {highcharts} highcharts/plotoptions/series-linewidth-general/
		     *         On all series
		     * @sample {highcharts} highcharts/plotoptions/series-linewidth-specific/
		     *         On one single series
		     *
		     * @product highcharts highstock
		     */
		    lineWidth: 2,

		    /**
		     * For some series, there is a limit that shuts down initial animation
		     * by default when the total number of points in the chart is too high.
		     * For example, for a column chart and its derivatives, animation doesn't
		     * run if there is more than 250 points totally. To disable this cap, set
		     * `animationLimit` to `Infinity`.
		     *
		     * @type      {number}
		     * @apioption plotOptions.series.animationLimit
		     */

		    /**
		     * Allow this series' points to be selected by clicking on the graphic
		     * (columns, point markers, pie slices, map areas etc).
		     *
		     * @see {@link Highcharts.Chart#getSelectedPoints}.
		     *
		     * @sample {highcharts} highcharts/plotoptions/series-allowpointselect-line/
		     *         Line
		     * @sample {highcharts} highcharts/plotoptions/series-allowpointselect-column/
		     *         Column
		     * @sample {highcharts} highcharts/plotoptions/series-allowpointselect-pie/
		     *         Pie
		     * @sample {highmaps} maps/plotoptions/series-allowpointselect/
		     *         Map area
		     * @sample {highmaps} maps/plotoptions/mapbubble-allowpointselect/
		     *         Map bubble
		     *
		     * @since 1.2.0
		     */
		    allowPointSelect: false,

		    /**
		     * If true, a checkbox is displayed next to the legend item to allow
		     * selecting the series. The state of the checkbox is determined by
		     * the `selected` option.
		     *
		     * @productdesc {highmaps}
		     * Note that if a `colorAxis` is defined, the color axis is represented in
		     * the legend, not the series.
		     *
		     * @sample {highcharts} highcharts/plotoptions/series-showcheckbox-true/
		     *         Show select box
		     *
		     * @since 1.2.0
		     */
		    showCheckbox: false,

		    /**
		     * Enable or disable the initial animation when a series is displayed.
		     * The animation can also be set as a configuration object. Please
		     * note that this option only applies to the initial animation of the
		     * series itself. For other animations, see [chart.animation](
		     * #chart.animation) and the animation parameter under the API methods. The
		     * following properties are supported:
		     *
		     * <dl>
		     *
		     * <dt>duration</dt>
		     *
		     * <dd>The duration of the animation in milliseconds.</dd>
		     *
		     * <dt>easing</dt>
		     *
		     * <dd>Can be a string reference to an easing function set on the `Math`
		     * object or a function. See the _Custom easing function_ demo below.</dd>
		     *
		     * </dl>
		     *
		     * Due to poor performance, animation is disabled in old IE browsers
		     * for several chart types.
		     *
		     * @sample {highcharts} highcharts/plotoptions/series-animation-disabled/
		     *         Animation disabled
		     * @sample {highcharts} highcharts/plotoptions/series-animation-slower/
		     *         Slower animation
		     * @sample {highcharts} highcharts/plotoptions/series-animation-easing/
		     *         Custom easing function
		     * @sample {highstock} stock/plotoptions/animation-slower/
		     *         Slower animation
		     * @sample {highstock} stock/plotoptions/animation-easing/
		     *         Custom easing function
		     * @sample {highmaps} maps/plotoptions/series-animation-true/
		     *         Animation enabled on map series
		     * @sample {highmaps} maps/plotoptions/mapbubble-animation-false/
		     *         Disabled on mapbubble series
		     *
		     * @type    {boolean|Highcharts.AnimationOptionsObject}
		     * @default {highcharts} true
		     * @default {highstock} true
		     * @default {highmaps} false
		     */
		    animation: {

		        /**
		         * @type      {number}
		         * @default   1000
		         * @apioption plotOptions.series.animation.duration
		         */
		        duration: 1000
		    },

		    /**
		     * An additional class name to apply to the series' graphical elements. This
		     * option does not replace default class names of the graphical element.
		     *
		     * @type      {string}
		     * @since     5.0.0
		     * @apioption plotOptions.series.className
		     */

		    /**
		     * Disable this option to allow series rendering in the whole plotting
		     * area.
		     *
		     * **Note:** Clipping should be always enabled when
		     * [chart.zoomType](#chart.zoomType) is set
		     *
		     * @sample {highcharts} highcharts/plotoptions/series-clip/
		     *         Disabled clipping
		     *
		     * @default   true
		     * @type      {boolean}
		     * @since     3.0.0
		     * @apioption plotOptions.series.clip
		     */

		    /**
		     * The main color of the series. In line type series it applies to the
		     * line and the point markers unless otherwise specified. In bar type
		     * series it applies to the bars unless a color is specified per point.
		     * The default value is pulled from the `options.colors` array.
		     *
		     * In styled mode, the color can be defined by the
		     * [colorIndex](#plotOptions.series.colorIndex) option. Also, the series
		     * color can be set with the `.highcharts-series`, `.highcharts-color-{n}`,
		     * `.highcharts-{type}-series` or `.highcharts-series-{n}` class, or
		     * individual classes given by the `className` option.
		     *
		     * @productdesc {highmaps}
		     * In maps, the series color is rarely used, as most choropleth maps use the
		     * color to denote the value of each point. The series color can however be
		     * used in a map with multiple series holding categorized data.
		     *
		     * @sample {highcharts} highcharts/plotoptions/series-color-general/
		     *         General plot option
		     * @sample {highcharts} highcharts/plotoptions/series-color-specific/
		     *         One specific series
		     * @sample {highcharts} highcharts/plotoptions/series-color-area/
		     *         Area color
		     * @sample {highcharts} highcharts/series/infographic/
		     *         Pattern fill
		     * @sample {highmaps} maps/demo/category-map/
		     *         Category map by multiple series
		     *
		     * @type      {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
		     * @apioption plotOptions.series.color
		     */

		    /**
		     * Styled mode only. A specific color index to use for the series, so its
		     * graphic representations are given the class name `highcharts-color-{n}`.
		     *
		     * @type      {number}
		     * @since     5.0.0
		     * @apioption plotOptions.series.colorIndex
		     */


		    /**
		     * Whether to connect a graph line across null points, or render a gap
		     * between the two points on either side of the null.
		     *
		     * @sample {highcharts} highcharts/plotoptions/series-connectnulls-false/
		     *         False by default
		     * @sample {highcharts} highcharts/plotoptions/series-connectnulls-true/
		     *         True
		     *
		     * @type      {boolean}
		     * @default   false
		     * @product   highcharts highstock
		     * @apioption plotOptions.series.connectNulls
		     */


		    /**
		     * You can set the cursor to "pointer" if you have click events attached
		     * to the series, to signal to the user that the points and lines can
		     * be clicked.
		     *
		     * In styled mode, the series cursor can be set with the same classes
		     * as listed under [series.color](#plotOptions.series.color).
		     *
		     * @sample {highcharts} highcharts/plotoptions/series-cursor-line/
		     *         On line graph
		     * @sample {highcharts} highcharts/plotoptions/series-cursor-column/
		     *         On columns
		     * @sample {highcharts} highcharts/plotoptions/series-cursor-scatter/
		     *         On scatter markers
		     * @sample {highstock} stock/plotoptions/cursor/
		     *         Pointer on a line graph
		     * @sample {highmaps} maps/plotoptions/series-allowpointselect/
		     *         Map area
		     * @sample {highmaps} maps/plotoptions/mapbubble-allowpointselect/
		     *         Map bubble
		     *
		     * @type      {string|Highcharts.CursorType}
		     * @apioption plotOptions.series.cursor
		     */


		    /**
		     * A name for the dash style to use for the graph, or for some series types
		     * the outline of each shape.
		     *
		     * In styled mode, the [stroke dash-array](https://jsfiddle.net/gh/get/
		     * library/pure/highcharts/highcharts/tree/master/samples/highcharts/css/
		     * series-dashstyle/) can be set with the same classes as listed under
		     * [series.color](#plotOptions.series.color).
		     *
		     * @sample {highcharts} highcharts/plotoptions/series-dashstyle-all/
		     *         Possible values demonstrated
		     * @sample {highcharts} highcharts/plotoptions/series-dashstyle/
		     *         Chart suitable for printing in black and white
		     * @sample {highstock} highcharts/plotoptions/series-dashstyle-all/
		     *         Possible values demonstrated
		     * @sample {highmaps} highcharts/plotoptions/series-dashstyle-all/
		     *         Possible values demonstrated
		     * @sample {highmaps} maps/plotoptions/series-dashstyle/
		     *         Dotted borders on a map
		     *
		     * @type       {string}
		     * @default    Solid
		     * @since      2.1
		     * @validvalue ["Dash","DashDot","Dot","LongDash","LongDashDot",
		     *             "LongDashDotDot","ShortDash","ShortDashDot",
		     *             "ShortDashDotDot","ShortDot","Solid"]
		     * @apioption  plotOptions.series.dashStyle
		     */

		    /**
		     * Requires the Accessibility module.
		     *
		     * A description of the series to add to the screen reader information
		     * about the series.
		     *
		     * @type      {string}
		     * @since     5.0.0
		     * @apioption plotOptions.series.description
		     */

		    /**
		     * Enable or disable the mouse tracking for a specific series. This
		     * includes point tooltips and click events on graphs and points. For
		     * large datasets it improves performance.
		     *
		     * @sample {highcharts} highcharts/plotoptions/series-enablemousetracking-false/
		     *         No mouse tracking
		     * @sample {highmaps} maps/plotoptions/series-enablemousetracking-false/
		     *         No mouse tracking
		     *
		     * @type      {boolean}
		     * @default   true
		     * @apioption plotOptions.series.enableMouseTracking
		     */

		    /**
		     * By default, series are exposed to screen readers as regions. By enabling
		     * this option, the series element itself will be exposed in the same
		     * way as the data points. This is useful if the series is not used
		     * as a grouping entity in the chart, but you still want to attach a
		     * description to the series.
		     *
		     * Requires the Accessibility module.
		     *
		     * @sample highcharts/accessibility/art-grants/
		     *         Accessible data visualization
		     *
		     * @type      {boolean}
		     * @since     5.0.12
		     * @apioption plotOptions.series.exposeElementToA11y
		     */

		    /**
		     * Whether to use the Y extremes of the total chart width or only the
		     * zoomed area when zooming in on parts of the X axis. By default, the
		     * Y axis adjusts to the min and max of the visible data. Cartesian
		     * series only.
		     *
		     * @type      {boolean}
		     * @default   false
		     * @since     4.1.6
		     * @product   highcharts highstock gantt
		     * @apioption plotOptions.series.getExtremesFromAll
		     */

		    /**
		     * An array specifying which option maps to which key in the data point
		     * array. This makes it convenient to work with unstructured data arrays
		     * from different sources.
		     *
		     * @see [series.data](#series.line.data)
		     *
		     * @sample {highcharts|highstock} highcharts/series/data-keys/
		     *         An extended data array with keys
		     * @sample {highcharts|highstock} highcharts/series/data-nested-keys/
		     *         Nested keys used to access object properties
		     *
		     * @type      {Array<string>}
		     * @since     4.1.6
		     * @apioption plotOptions.series.keys
		     */

		    /**
		     * The line cap used for line ends and line joins on the graph.
		     *
		     * @type       {string}
		     * @default    round
		     * @product    highcharts highstock
		     * @validvalue ["round", "square"]
		     * @apioption  plotOptions.series.linecap
		     */

		    /**
		     * The [id](#series.id) of another series to link to. Additionally,
		     * the value can be ":previous" to link to the previous series. When
		     * two series are linked, only the first one appears in the legend.
		     * Toggling the visibility of this also toggles the linked series.
		     *
		     * @sample {highcharts|highstock} highcharts/demo/arearange-line/
		     *         Linked series
		     *
		     * @type      {string}
		     * @since     3.0
		     * @product   highcharts highstock gantt
		     * @apioption plotOptions.series.linkedTo
		     */

		    /**
		     * 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.
		     *
		     * @see [navigator.series](#navigator.series)
		     *
		     * @type      {Highcharts.PlotSeriesOptions}
		     * @since     5.0.0
		     * @product   highstock
		     * @apioption plotOptions.series.navigatorOptions
		     */

		    /**
		     * The color for the parts of the graph or points that are below the
		     * [threshold](#plotOptions.series.threshold).
		     *
		     * @see In styled mode, a negative color is applied by setting this option
		     *      to `true` combined with the `.highcharts-negative` class name.
		     *
		     * @sample {highcharts} highcharts/plotoptions/series-negative-color/
		     *         Spline, area and column
		     * @sample {highcharts} highcharts/plotoptions/arearange-negativecolor/
		     *         Arearange
		     * @sample {highcharts} highcharts/css/series-negative-color/
		     *         Styled mode
		     * @sample {highstock} highcharts/plotoptions/series-negative-color/
		     *         Spline, area and column
		     * @sample {highstock} highcharts/plotoptions/arearange-negativecolor/
		     *         Arearange
		     * @sample {highmaps} highcharts/plotoptions/series-negative-color/
		     *         Spline, area and column
		     * @sample {highmaps} highcharts/plotoptions/arearange-negativecolor/
		     *         Arearange
		     *
		     * @type      {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
		     * @since     3.0
		     * @apioption plotOptions.series.negativeColor
		     */

		    /**
		     * Same as [accessibility.pointDescriptionFormatter](
		     * #accessibility.pointDescriptionFormatter), but for an individual series.
		     * Overrides the chart wide configuration.
		     *
		     * @type      {Function}
		     * @since     5.0.12
		     * @apioption plotOptions.series.pointDescriptionFormatter
		     */

		    /**
		     * If no x values are given for the points in a series, `pointInterval`
		     * defines the interval of the x values. For example, if a series contains
		     * one value every decade starting from year 0, set `pointInterval` to
		     * `10`. In true `datetime` axes, the `pointInterval` is set in
		     * milliseconds.
		     *
		     * It can be also be combined with `pointIntervalUnit` to draw irregular
		     * time intervals.
		     *
		     * Please note that this options applies to the _series data_, not the
		     * interval of the axis ticks, which is independent.
		     *
		     * @sample {highcharts} highcharts/plotoptions/series-pointstart-datetime/
		     *         Datetime X axis
		     * @sample {highstock} stock/plotoptions/pointinterval-pointstart/
		     *         Using pointStart and pointInterval
		     *
		     * @type      {number}
		     * @default   1
		     * @product   highcharts highstock gantt
		     * @apioption plotOptions.series.pointInterval
		     */

		    /**
		     * On datetime series, this allows for setting the
		     * [pointInterval](#plotOptions.series.pointInterval) to irregular time
		     * units, `day`, `month` and `year`. A day is usually the same as 24 hours,
		     * but `pointIntervalUnit` also takes the DST crossover into consideration
		     * when dealing with local time. Combine this option with `pointInterval`
		     * to draw weeks, quarters, 6 months, 10 years etc.
		     *
		     * Please note that this options applies to the _series data_, not the
		     * interval of the axis ticks, which is independent.
		     *
		     * @sample {highcharts} highcharts/plotoptions/series-pointintervalunit/
		     *         One point a month
		     * @sample {highstock} highcharts/plotoptions/series-pointintervalunit/
		     *         One point a month
		     *
		     * @type       {string}
		     * @since      4.1.0
		     * @product    highcharts highstock gantt
		     * @validvalue ["day", "month", "year"]
		     * @apioption  plotOptions.series.pointIntervalUnit
		     */

		    /**
		     * Possible values: `"on"`, `"between"`, `number`.
		     *
		     * In a column chart, when pointPlacement is `"on"`, the point will
		     * not create any padding of the X axis. In a polar column chart this
		     * means that the first column points directly north. If the pointPlacement
		     * is `"between"`, the columns will be laid out between ticks. This
		     * is useful for example for visualising an amount between two points
		     * in time or in a certain sector of a polar chart.
		     *
		     * Since Highcharts 3.0.2, the point placement can also be numeric,
		     * where 0 is on the axis value, -0.5 is between this value and the
		     * previous, and 0.5 is between this value and the next. Unlike the
		     * textual options, numeric point placement options won't affect axis
		     * padding.
		     *
		     * Note that pointPlacement needs a [pointRange](
		     * #plotOptions.series.pointRange) to work. For column series this is
		     * computed, but for line-type series it needs to be set.
		     *
		     * For the `xrange` series type and gantt charts, if the Y axis is a
		     * category axis, the `pointPlacement` applies to the Y axis rather than
		     * the (typically datetime) X axis.
		     *
		     * Defaults to `undefined` in cartesian charts, `"between"` in polar charts.
		     *
		     * @see [xAxis.tickmarkPlacement](#xAxis.tickmarkPlacement)
		     *
		     * @sample {highcharts|highstock} highcharts/plotoptions/series-pointplacement-between/
		     *         Between in a column chart
		     * @sample {highcharts|highstock} highcharts/plotoptions/series-pointplacement-numeric/
		     *         Numeric placement for custom layout
		     *
		     * @type      {string|number}
		     * @since     2.3.0
		     * @product   highcharts highstock gantt
		     * @apioption plotOptions.series.pointPlacement
		     */

		    /**
		     * If no x values are given for the points in a series, pointStart defines
		     * on what value to start. For example, if a series contains one yearly
		     * value starting from 1945, set pointStart to 1945.
		     *
		     * @sample {highcharts} highcharts/plotoptions/series-pointstart-linear/
		     *         Linear
		     * @sample {highcharts} highcharts/plotoptions/series-pointstart-datetime/
		     *         Datetime
		     * @sample {highstock} stock/plotoptions/pointinterval-pointstart/
		     *         Using pointStart and pointInterval
		     *
		     * @type      {number}
		     * @default   0
		     * @product   highcharts highstock gantt
		     * @apioption plotOptions.series.pointStart
		     */

		    /**
		     * Whether to select the series initially. If `showCheckbox` is true,
		     * the checkbox next to the series name in the legend will be checked for a
		     * selected series.
		     *
		     * @sample {highcharts} highcharts/plotoptions/series-selected/
		     *         One out of two series selected
		     *
		     * @type      {boolean}
		     * @default   false
		     * @since     1.2.0
		     * @apioption plotOptions.series.selected
		     */

		    /**
		     * Whether to apply a drop shadow to the graph line. Since 2.3 the shadow
		     * can be an object configuration containing `color`, `offsetX`, `offsetY`,
		     * `opacity` and `width`.
		     *
		     * @sample {highcharts} highcharts/plotoptions/series-shadow/
		     *         Shadow enabled
		     *
		     * @type      {boolean|Highcharts.ShadowOptionsObject}
		     * @default   false
		     * @apioption plotOptions.series.shadow
		     */

		    /**
		     * Whether to display this particular series or series type in the legend.
		     * The default value is `true` for standalone series, `false` for linked
		     * series.
		     *
		     * @sample {highcharts} highcharts/plotoptions/series-showinlegend/
		     *         One series in the legend, one hidden
		     *
		     * @type      {boolean}
		     * @default   true
		     * @apioption plotOptions.series.showInLegend
		     */

		    /**
		     * Whether or not to show the series in the navigator. Takes precedence
		     * over [navigator.baseSeries](#navigator.baseSeries) if defined.
		     *
		     * @type      {boolean}
		     * @since     5.0.0
		     * @product   highstock
		     * @apioption plotOptions.series.showInNavigator
		     */

		    /**
		     * If set to `true`, the accessibility module will skip past the points
		     * in this series for keyboard navigation.
		     *
		     * @type      {boolean}
		     * @since     5.0.12
		     * @apioption plotOptions.series.skipKeyboardNavigation
		     */

		    /**
		     * Whether to stack the values of each series on top of each other. Possible
		     * values are `undefined` to disable, `"normal"` to stack by value or
		     * `"percent"`. When stacking is enabled, data must be sorted in ascending
		     * X order. A special stacking option is with the streamgraph series type,
		     * where the stacking option is set to `"stream"`.
		     *
		     * @see [yAxis.reversedStacks](#yAxis.reversedStacks)
		     *
		     * @sample {highcharts} highcharts/plotoptions/series-stacking-line/
		     *         Line
		     * @sample {highcharts} highcharts/plotoptions/series-stacking-column/
		     *         Column
		     * @sample {highcharts} highcharts/plotoptions/series-stacking-bar/
		     *         Bar
		     * @sample {highcharts} highcharts/plotoptions/series-stacking-area/
		     *         Area
		     * @sample {highcharts} highcharts/plotoptions/series-stacking-percent-line/
		     *         Line
		     * @sample {highcharts} highcharts/plotoptions/series-stacking-percent-column/
		     *         Column
		     * @sample {highcharts} highcharts/plotoptions/series-stacking-percent-bar/
		     *         Bar
		     * @sample {highcharts} highcharts/plotoptions/series-stacking-percent-area/
		     *         Area
		     * @sample {highstock} stock/plotoptions/stacking/
		     *         Area
		     *
		     * @type       {string}
		     * @product    highcharts highstock
		     * @validvalue ["normal", "percent"]
		     * @apioption  plotOptions.series.stacking
		     */

		    /**
		     * Whether to apply steps to the line. Possible values are `left`, `center`
		     * and `right`.
		     *
		     * @sample {highcharts} highcharts/plotoptions/line-step/
		     *         Different step line options
		     * @sample {highcharts} highcharts/plotoptions/area-step/
		     *         Stepped, stacked area
		     * @sample {highstock} stock/plotoptions/line-step/
		     *         Step line
		     *
		     * @type       {string}
		     * @since      1.2.5
		     * @product    highcharts highstock
		     * @validvalue ["left", "center", "right"]
		     * @apioption  plotOptions.series.step
		     */

		    /**
		     * The threshold, also called zero level or base level. For line type
		     * series this is only used in conjunction with
		     * [negativeColor](#plotOptions.series.negativeColor).
		     *
		     * @see [softThreshold](#plotOptions.series.softThreshold).
		     *
		     * @type      {number}
		     * @default   0
		     * @since     3.0
		     * @product   highcharts highstock
		     * @apioption plotOptions.series.threshold
		     */

		    /**
		     * Set the initial visibility of the series.
		     *
		     * @sample {highcharts} highcharts/plotoptions/series-visible/
		     *         Two series, one hidden and one visible
		     * @sample {highstock} stock/plotoptions/series-visibility/
		     *         Hidden series
		     *
		     * @type      {boolean}
		     * @default   true
		     * @apioption plotOptions.series.visible
		     */

		    /**
		     * Defines the Axis on which the zones are applied.
		     *
		     * @see [zones](#plotOptions.series.zones)
		     *
		     * @sample {highcharts} highcharts/series/color-zones-zoneaxis-x/
		     *         Zones on the X-Axis
		     * @sample {highstock} highcharts/series/color-zones-zoneaxis-x/
		     *         Zones on the X-Axis
		     *
		     * @type      {string}
		     * @default   y
		     * @since     4.1.0
		     * @product   highcharts highstock
		     * @apioption plotOptions.series.zoneAxis
		     */

		    /**
		     * General event handlers for the series items. These event hooks can also
		     * be attached to the series at run time using the `Highcharts.addEvent`
		     * function.
		     */
		    events: {},

		    /**
		     * Fires after the series has finished its initial animation, or in case
		     * animation is disabled, immediately as the series is displayed.
		     *
		     * @sample {highcharts} highcharts/plotoptions/series-events-afteranimate/
		     *         Show label after animate
		     * @sample {highstock} highcharts/plotoptions/series-events-afteranimate/
		     *         Show label after animate
		     *
		     * @type      {Highcharts.SeriesAfterAnimateCallbackFunction}
		     * @since     4.0
		     * @product   highcharts highstock gantt
		     * @context   Highcharts.Series
		     * @apioption plotOptions.series.events.afterAnimate
		     */

		    /**
		     * Fires when the checkbox next to the series' name in the legend is
		     * clicked. One parameter, `event`, is passed to the function. The state of
		     * the checkbox is found by `event.checked`. The checked item is found by
		     * `event.item`. Return `false` to prevent the default action which is to
		     * toggle the select state of the series.
		     *
		     * @sample {highcharts} highcharts/plotoptions/series-events-checkboxclick/
		     *         Alert checkbox status
		     *
		     * @type      {Highcharts.SeriesCheckboxClickCallbackFunction}
		     * @since     1.2.0
		     * @context   Highcharts.Series
		     * @apioption plotOptions.series.events.checkboxClick
		     */

		    /**
		     * Fires when the series is clicked. One parameter, `event`, is passed to
		     * the function, containing common event information. Additionally,
		     * `event.point` holds a pointer to the nearest point on the graph.
		     *
		     * @sample {highcharts} highcharts/plotoptions/series-events-click/
		     *         Alert click info
		     * @sample {highstock} stock/plotoptions/series-events-click/
		     *         Alert click info
		     * @sample {highmaps} maps/plotoptions/series-events-click/
		     *         Display click info in subtitle
		     *
		     * @type      {Highcharts.SeriesClickCallbackFunction}
		     * @context   Highcharts.Series
		     * @apioption plotOptions.series.events.click
		     */

		    /**
		     * Fires when the series is hidden after chart generation time, either
		     * by clicking the legend item or by calling `.hide()`.
		     *
		     * @sample {highcharts} highcharts/plotoptions/series-events-hide/
		     *         Alert when the series is hidden by clicking the legend item
		     *
		     * @type      {Function}
		     * @since     1.2.0
		     * @context   Highcharts.Series
		     * @apioption plotOptions.series.events.hide
		     */

		    /**
		     * Fires when the legend item belonging to the series is clicked. One
		     * parameter, `event`, is passed to the function. The default action
		     * is to toggle the visibility of the series. This can be prevented
		     * by returning `false` or calling `event.preventDefault()`.
		     *
		     * @sample {highcharts} highcharts/plotoptions/series-events-legenditemclick/
		     *         Confirm hiding and showing
		     *
		     * @type      {Function}
		     * @context   Highcharts.Series
		     * @apioption plotOptions.series.events.legendItemClick
		     */

		    /**
		     * Fires when the mouse leaves the graph. One parameter, `event`, is
		     * passed to the function, containing common event information. If the
		     * [stickyTracking](#plotOptions.series) option is true, `mouseOut`
		     * doesn't happen before the mouse enters another graph or leaves the
		     * plot area.
		     *
		     * @sample {highcharts} highcharts/plotoptions/series-events-mouseover-sticky/
		     *         With sticky tracking by default
		     * @sample {highcharts} highcharts/plotoptions/series-events-mouseover-no-sticky/
		     *         Without sticky tracking
		     *
		     * @type      {Function}
		     * @context   Highcharts.Series
		     * @apioption plotOptions.series.events.mouseOut
		     */

		    /**
		     * Fires when the mouse enters the graph. One parameter, `event`, is
		     * passed to the function, containing common event information.
		     *
		     * @sample {highcharts} highcharts/plotoptions/series-events-mouseover-sticky/
		     *         With sticky tracking by default
		     * @sample {highcharts} highcharts/plotoptions/series-events-mouseover-no-sticky/
		     *         Without sticky tracking
		     *
		     * @type      {Function}
		     * @context   Highcharts.Series
		     * @apioption plotOptions.series.events.mouseOver
		     */

		    /**
		     * Fires when the series is shown after chart generation time, either
		     * by clicking the legend item or by calling `.show()`.
		     *
		     * @sample {highcharts} highcharts/plotoptions/series-events-show/
		     *         Alert when the series is shown by clicking the legend item.
		     *
		     * @type      {Function}
		     * @since     1.2.0
		     * @context   Highcharts.Series
		     * @apioption plotOptions.series.events.show
		     */

		    /**
		     * Options for the point markers of line-like series. Properties like
		     * `fillColor`, `lineColor` and `lineWidth` define the visual appearance
		     * of the markers. Other series types, like column series, don't have
		     * markers, but have visual options on the series level instead.
		     *
		     * In styled mode, the markers can be styled with the `.highcharts-point`,
		     * `.highcharts-point-hover` and `.highcharts-point-select`
		     * class names.
		     */
		    marker: {

		        /**
		         * The width of the point marker's outline.
		         *
		         * @sample {highcharts} highcharts/plotoptions/series-marker-fillcolor/
		         *         2px blue marker
		         */
		        lineWidth: 0,

		        /**
		         * The color of the point marker's outline. When `undefined`, the
		         * series' or point's color is used.
		         *
		         * @sample {highcharts} highcharts/plotoptions/series-marker-fillcolor/
		         *         Inherit from series color (undefined)
		         *
		         * @type {Highcharts.ColorString}
		         */
		        lineColor: '#ffffff',

		        /**
		         * The fill color of the point marker. When `undefined`, the series' or
		         * point's color is used.
		         *
		         * @sample {highcharts} highcharts/plotoptions/series-marker-fillcolor/
		         *         White fill
		         *
		         * @type      {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
		         * @apioption plotOptions.series.marker.fillColor
		         */

		        /**
		         * Enable or disable the point marker. If `undefined`, the markers are
		         * hidden when the data is dense, and shown for more widespread data
		         * points.
		         *
		         * @sample {highcharts} highcharts/plotoptions/series-marker-enabled/
		         *         Disabled markers
		         * @sample {highcharts} highcharts/plotoptions/series-marker-enabled-false/
		         *         Disabled in normal state but enabled on hover
		         * @sample {highstock} stock/plotoptions/series-marker/
		         *         Enabled markers
		         *
		         * @type      {boolean}
		         * @default   {highcharts} undefined
		         * @default   {highstock} false
		         * @apioption plotOptions.series.marker.enabled
		         */

		        /**
		         * Image markers only. Set the image width explicitly. When using this
		         * option, a `width` must also be set.
		         *
		         * @sample {highcharts} highcharts/plotoptions/series-marker-width-height/
		         *         Fixed width and height
		         * @sample {highstock} highcharts/plotoptions/series-marker-width-height/
		         *         Fixed width and height
		         *
		         * @type      {number}
		         * @since     4.0.4
		         * @apioption plotOptions.series.marker.height
		         */

		        /**
		         * A predefined shape or symbol for the marker. When undefined, the
		         * symbol is pulled from options.symbols. Other possible values are
		         * "circle", "square", "diamond", "triangle" and "triangle-down".
		         *
		         * Additionally, the URL to a graphic can be given on this form:
		         * "url(graphic.png)". Note that for the image to be applied to exported
		         * charts, its URL needs to be accessible by the export server.
		         *
		         * Custom callbacks for symbol path generation can also be added to
		         * `Highcharts.SVGRenderer.prototype.symbols`. The callback is then
		         * used by its method name, as shown in the demo.
		         *
		         * @sample {highcharts} highcharts/plotoptions/series-marker-symbol/
		         *         Predefined, graphic and custom markers
		         * @sample {highstock} highcharts/plotoptions/series-marker-symbol/
		         *         Predefined, graphic and custom markers
		         *
		         * @type      {string}
		         * @apioption plotOptions.series.marker.symbol
		         */

		        /**
		         * The threshold for how dense the point markers should be before they
		         * are hidden, given that `enabled` is not defined. The number indicates
		         * the horizontal distance between the two closest points in the series,
		         * as multiples of the `marker.radius`. In other words, the default
		         * value of 2 means points are hidden if overlapping horizontally.
		         *
		         * @sample highcharts/plotoptions/series-marker-enabledthreshold
		         *         A higher threshold
		         *
		         * @since 6.0.5
		         */
		        enabledThreshold: 2,

		        /**
		         * The radius of the point marker.
		         *
		         * @sample {highcharts} highcharts/plotoptions/series-marker-radius/
		         *         Bigger markers
		         *
		         * @default  {highstock} 2
		         */
		        radius: 4,

		        /**
		         * Image markers only. Set the image width explicitly. When using this
		         * option, a `height` must also be set.
		         *
		         * @sample {highcharts} highcharts/plotoptions/series-marker-width-height/
		         *         Fixed width and height
		         * @sample {highstock} highcharts/plotoptions/series-marker-width-height/
		         *         Fixed width and height
		         *
		         * @type      {number}
		         * @since     4.0.4
		         * @apioption plotOptions.series.marker.width
		         */

		        /**
		         * States for a single point marker.
		         */
		        states: {

		            /**
		             * The normal state of a single point marker. Currently only used
		             * for setting animation when returning to normal state from hover.
		             */
		            normal: {
		                /**
		                 * Animation when returning to normal state after hovering.
		                 *
		                 * @type {boolean|Highcharts.AnimationOptionsObject}
		                 */
		                animation: true
		            },

		            /**
		             * The hover state for a single point marker.
		             */
		            hover: {

		                /**
		                 * Animation when hovering over the marker.
		                 *
		                 * @type {boolean|Highcharts.AnimationOptionsObject}
		                 */
		                animation: {

		                    duration: 50

		                },

		                /**
		                 * Enable or disable the point marker.
		                 *
		                 * @sample {highcharts} highcharts/plotoptions/series-marker-states-hover-enabled/
		                 *         Disabled hover state
		                 */
		                enabled: true,

		                /**
		                 * The fill color of the marker in hover state. When
		                 * `undefined`, the series' or point's fillColor for normal
		                 * state is used.
		                 *
		                 * @type      {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
		                 * @apioption plotOptions.series.marker.states.hover.fillColor
		                 */

		                /**
		                 * The color of the point marker's outline. When `undefined`,
		                 * the series' or point's lineColor for normal state is used.
		                 *
		                 * @sample {highcharts} highcharts/plotoptions/series-marker-states-hover-linecolor/
		                 *         White fill color, black line color
		                 *
		                 * @type      {Highcharts.ColorString}
		                 * @apioption plotOptions.series.marker.states.hover.lineColor
		                 */

		                /**
		                 * The width of the point marker's outline. When `undefined`,
		                 * the series' or point's lineWidth for normal state is used.
		                 *
		                 * @sample {highcharts} highcharts/plotoptions/series-marker-states-hover-linewidth/
		                 *         3px line width
		                 *
		                 * @type      {number}
		                 * @apioption plotOptions.series.marker.states.hover.lineWidth
		                 */

		                /**
		                 * The radius of the point marker. In hover state, it defaults
		                 * to the normal state's radius + 2 as per the [radiusPlus](
		                 * #plotOptions.series.marker.states.hover.radiusPlus)
		                 * option.
		                 *
		                 * @sample {highcharts} highcharts/plotoptions/series-marker-states-hover-radius/
		                 *         10px radius
		                 *
		                 * @type      {number}
		                 * @apioption plotOptions.series.marker.states.hover.radius
		                 */

		                /**
		                 * The number of pixels to increase the radius of the hovered
		                 * point.
		                 *
		                 * @sample {highcharts} highcharts/plotoptions/series-states-hover-linewidthplus/
		                 *         5 pixels greater radius on hover
		                 * @sample {highstock} highcharts/plotoptions/series-states-hover-linewidthplus/
		                 *         5 pixels greater radius on hover
		                 *
		                 * @since 4.0.3
		                 */
		                radiusPlus: 2,

		                /**
		                 * The additional line width for a hovered point.
		                 *
		                 * @sample {highcharts} highcharts/plotoptions/series-states-hover-linewidthplus/
		                 *         2 pixels wider on hover
		                 * @sample {highstock} highcharts/plotoptions/series-states-hover-linewidthplus/
		                 *         2 pixels wider on hover
		                 *
		                 * @since 4.0.3
		                 */
		                lineWidthPlus: 1
		            },

		            /**
		             * The appearance of the point marker when selected. In order to
		             * allow a point to be selected, set the `series.allowPointSelect`
		             * option to true.
		             */
		            select: {

		                /**
		                 * The radius of the point marker. In hover state, it defaults
		                 * to the normal state's radius + 2.
		                 *
		                 * @sample {highcharts} highcharts/plotoptions/series-marker-states-select-radius/
		                 *         10px radius for selected points
		                 *
		                 * @type      {number}
		                 * @apioption plotOptions.series.marker.states.select.radius
		                 */

		                /**
		                 * Enable or disable visible feedback for selection.
		                 *
		                 * @sample {highcharts} highcharts/plotoptions/series-marker-states-select-enabled/
		                 *         Disabled select state
		                 *
		                 * @type      {boolean}
		                 * @default   true
		                 * @apioption plotOptions.series.marker.states.select.enabled
		                 */

		                /**
		                 * The fill color of the point marker.
		                 *
		                 * @sample {highcharts} highcharts/plotoptions/series-marker-states-select-fillcolor/
		                 *         Solid red discs for selected points
		                 *
		                 * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
		                 */
		                fillColor: '#cccccc',

		                /**
		                 * The color of the point marker's outline. When `undefined`,
		                 * the series' or point's color is used.
		                 *
		                 * @sample {highcharts} highcharts/plotoptions/series-marker-states-select-linecolor/
		                 *         Red line color for selected points
		                 *
		                 * @type {Highcharts.ColorString}
		                 */
		                lineColor: '#000000',

		                /**
		                 * The width of the point marker's outline.
		                 *
		                 * @sample {highcharts} highcharts/plotoptions/series-marker-states-select-linewidth/
		                 *         3px line width for selected points
		                 */
		                lineWidth: 2
		            }
		        }
		    },

		    /**
		     * Properties for each single point.
		     */
		    point: {

		        /**
		         * Fires when a point is clicked. One parameter, `event`, is passed
		         * to the function, containing common event information.
		         *
		         * If the `series.allowPointSelect` option is true, the default
		         * action for the point's click event is to toggle the point's
		         * select state. Returning `false` cancels this action.
		         *
		         * @sample {highcharts} highcharts/plotoptions/series-point-events-click/
		         *         Click marker to alert values
		         * @sample {highcharts} highcharts/plotoptions/series-point-events-click-column/
		         *         Click column
		         * @sample {highcharts} highcharts/plotoptions/series-point-events-click-url/
		         *         Go to URL
		         * @sample {highmaps} maps/plotoptions/series-point-events-click/
		         *         Click marker to display values
		         * @sample {highmaps} maps/plotoptions/series-point-events-click-url/
		         *         Go to URL
		         *
		         * @type      {Highcharts.SeriesPointClickCallbackFunction}
		         * @context   Highcharts.Point
		         * @apioption plotOptions.series.point.events.click
		         */

		        /**
		         * Fires when the mouse leaves the area close to the point. One
		         * parameter, `event`, is passed to the function, containing common
		         * event information.
		         *
		         * @sample {highcharts} highcharts/plotoptions/series-point-events-mouseover/
		         *         Show values in the chart's corner on mouse over
		         *
		         * @type      {Function}
		         * @context   Highcharts.Point
		         * @apioption plotOptions.series.point.events.mouseOut
		         */

		        /**
		         * Fires when the mouse enters the area close to the point. One
		         * parameter, `event`, is passed to the function, containing common
		         * event information.
		         *
		         * @sample {highcharts} highcharts/plotoptions/series-point-events-mouseover/
		         *         Show values in the chart's corner on mouse over
		         *
		         * @type      {Function}
		         * @context   Highcharts.Point
		         * @apioption plotOptions.series.point.events.mouseOver
		         */

		        /**
		         * Fires when the point is removed using the `.remove()` method. One
		         * parameter, `event`, is passed to the function. Returning `false`
		         * cancels the operation.
		         *
		         * @sample {highcharts} highcharts/plotoptions/series-point-events-remove/
		         *         Remove point and confirm
		         *
		         * @type      {Function}
		         * @since     1.2.0
		         * @context   Highcharts.Point
		         * @apioption plotOptions.series.point.events.remove
		         */

		        /**
		         * Fires when the point is selected either programmatically or
		         * following a click on the point. One parameter, `event`, is passed
		         * to the function. Returning `false` cancels the operation.
		         *
		         * @sample {highcharts} highcharts/plotoptions/series-point-events-select/
		         *         Report the last selected point
		         * @sample {highmaps} maps/plotoptions/series-allowpointselect/
		         *         Report select and unselect
		         *
		         * @type      {Function}
		         * @since     1.2.0
		         * @context   Highcharts.Point
		         * @apioption plotOptions.series.point.events.select
		         */

		        /**
		         * Fires when the point is unselected either programmatically or
		         * following a click on the point. One parameter, `event`, is passed
		         * to the function.
		         *  Returning `false` cancels the operation.
		         *
		         * @sample {highcharts} highcharts/plotoptions/series-point-events-unselect/
		         *         Report the last unselected point
		         * @sample {highmaps} maps/plotoptions/series-allowpointselect/
		         *         Report select and unselect
		         *
		         * @type      {Function}
		         * @since     1.2.0
		         * @context   Highcharts.Point
		         * @apioption plotOptions.series.point.events.unselect
		         */

		        /**
		         * Fires when the point is updated programmatically through the
		         * `.update()` method. One parameter, `event`, is passed to the
		         * function. The new point options can be accessed through
		         * `event.options`. Returning `false` cancels the operation.
		         *
		         * @sample {highcharts} highcharts/plotoptions/series-point-events-update/
		         *         Confirm point updating
		         *
		         * @type      {Function}
		         * @since     1.2.0
		         * @context   Highcharts.Point
		         * @apioption plotOptions.series.point.events.update
		         */

		        /**
		         * Events for each single point.
		         */
		        events: {}
		    },



		    /**
		     * Options for the series data labels, appearing next to each data point.
		     *
		     * Since v6.2.0, multiple data labels can be applied to each single point by
		     * defining them as an array of configs.
		     *
		     * In styled mode, the data labels can be styled with the
		     * `.highcharts-data-label-box` and `.highcharts-data-label` class names
		     * ([see example](https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/css/series-datalabels)).
		     *
		     * @sample highcharts/plotoptions/series-datalabels-enabled
		     *         Data labels enabled
		     * @sample highcharts/plotoptions/series-datalabels-multiple
		     *         Multiple data labels on a bar series
		     */
		    dataLabels: {


		        /**
		         * The alignment of the data label compared to the point. If `right`,
		         * the right side of the label should be touching the point. For
		         * points with an extent, like columns, the alignments also dictates
		         * how to align it inside the box, as given with the
		         * [inside](#plotOptions.column.dataLabels.inside) option. Can be one of
		         * `left`, `center` or `right`.
		         *
		         * @sample {highcharts} highcharts/plotoptions/series-datalabels-align-left/
		         *         Left aligned
		         *
		         * @validvalue ["left", "center", "right"]
		         */
		        align: 'center',


		        /**
		         * Whether to allow data labels to overlap. To make the labels less
		         * sensitive for overlapping, the [dataLabels.padding](
		         * #plotOptions.series.dataLabels.padding) can be set to 0.
		         *
		         * @sample highcharts/plotoptions/series-datalabels-allowoverlap-false/
		         *         Don't allow overlap
		         *
		         * @type      {boolean}
		         * @default   false
		         * @since     4.1.0
		         * @apioption plotOptions.series.dataLabels.allowOverlap
		         */


		        /**
		         * The border radius in pixels for the data label.
		         *
		         * @sample {highcharts} highcharts/plotoptions/series-datalabels-box/
		         *         Data labels box options
		         * @sample {highstock} highcharts/plotoptions/series-datalabels-box/
		         *         Data labels box options
		         * @sample {highmaps} maps/plotoptions/series-datalabels-box/
		         *         Data labels box options
		         *
		         * @type      {number}
		         * @default   0
		         * @since     2.2.1
		         * @apioption plotOptions.series.dataLabels.borderRadius
		         */


		        /**
		         * The border width in pixels for the data label.
		         *
		         * @sample {highcharts} highcharts/plotoptions/series-datalabels-box/
		         *         Data labels box options
		         * @sample {highstock} highcharts/plotoptions/series-datalabels-box/
		         *         Data labels box options
		         *
		         * @type      {number}
		         * @default   0
		         * @since     2.2.1
		         * @apioption plotOptions.series.dataLabels.borderWidth
		         */

		        /**
		         * A class name for the data label. Particularly in styled mode, this
		         * can be used to give each series' or point's data label unique
		         * styling. In addition to this option, a default color class name is
		         * added so that we can give the labels a
		         * [contrast text shadow](https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/css/data-label-contrast/).
		         *
		         * @sample {highcharts} highcharts/css/series-datalabels/
		         *         Styling by CSS
		         * @sample {highstock} highcharts/css/series-datalabels/
		         *         Styling by CSS
		         * @sample {highmaps} highcharts/css/series-datalabels/
		         *         Styling by CSS
		         *
		         * @type      {string}
		         * @since     5.0.0
		         * @apioption plotOptions.series.dataLabels.className
		         */

		        /**
		         * The text color for the data labels. Defaults to `undefined`. For
		         * certain series types, like column or map, the data labels can be
		         * drawn inside the points. In this case the data label will be drawn
		         * with maximum contrast by default. Additionally, it will be given a
		         * `text-outline` style with the opposite color, to further increase the
		         * contrast. This can be overridden by setting the `text-outline` style
		         * to `none` in the `dataLabels.style` option.
		         *
		         * @sample {highcharts} highcharts/plotoptions/series-datalabels-color/
		         *         Red data labels
		         * @sample {highmaps} maps/demo/color-axis/
		         *         White data labels
		         *
		         * @type      {Highcharts.ColorString}
		         * @apioption plotOptions.series.dataLabels.color
		         */

		        /**
		         * Whether to hide data labels that are outside the plot area. By
		         * default, the data label is moved inside the plot area according to
		         * the [overflow](#plotOptions.series.dataLabels.overflow) option.
		         *
		         * @type      {boolean}
		         * @default   true
		         * @since     2.3.3
		         * @apioption plotOptions.series.dataLabels.crop
		         */

		        /**
		         * Whether to defer displaying the data labels until the initial series
		         * animation has finished.
		         *
		         * @type      {boolean}
		         * @default   true
		         * @since     4.0
		         * @product   highcharts highstock gantt
		         * @apioption plotOptions.series.dataLabels.defer
		         */

		        /**
		         * Enable or disable the data labels.
		         *
		         * @sample {highcharts} highcharts/plotoptions/series-datalabels-enabled/
		         *         Data labels enabled
		         * @sample {highmaps} maps/demo/color-axis/
		         *         Data labels enabled
		         *
		         * @type      {boolean}
		         * @default   false
		         * @apioption plotOptions.series.dataLabels.enabled
		         */

		        /**
		         * A [format string](https://www.highcharts.com/docs/chart-concepts/labels-and-string-formatting)
		         * for the data label. Available variables are the same as for
		         * `formatter`.
		         *
		         * @sample {highcharts|highstock} highcharts/plotoptions/series-datalabels-format/
		         *         Add a unit
		         * @sample {highmaps} maps/plotoptions/series-datalabels-format/
		         *         Formatted value in the data label
		         *
		         * @type      {string}
		         * @default   {highcharts} {y}
		         * @default   {highstock} {y}
		         * @default   {highmaps} {point.value}
		         * @since     3.0
		         * @apioption plotOptions.series.dataLabels.format
		         */

		        /**
		         * Callback JavaScript function to format the data label. Note that if a
		         * `format` is defined, the format takes precedence and the formatter is
		         * ignored. Available data are:
		         *
		         * <table>
		         *
		         * <tbody>
		         *
		         * <tr>
		         *
		         * <td>`this.percentage`</td>
		         *
		         * <td>Stacked series and pies only. The point's percentage of the
		         * total.</td>
		         *
		         * </tr>
		         *
		         * <tr>
		         *
		         * <td>`this.point`</td>
		         *
		         * <td>The point object. The point name, if defined, is available
		         * through `this.point.name`.</td>
		         *
		         * </tr>
		         *
		         * <tr>
		         *
		         * <td>`this.series`:</td>
		         *
		         * <td>The series object. The series name is available through
		         * `this.series.name`.</td>
		         *
		         * </tr>
		         *
		         * <tr>
		         *
		         * <td>`this.total`</td>
		         *
		         * <td>Stacked series only. The total value at this point's x value.
		         * </td>
		         *
		         * </tr>
		         *
		         * <tr>
		         *
		         * <td>`this.x`:</td>
		         *
		         * <td>The x value.</td>
		         *
		         * </tr>
		         *
		         * <tr>
		         *
		         * <td>`this.y`:</td>
		         *
		         * <td>The y value.</td>
		         *
		         * </tr>
		         *
		         * </tbody>
		         *
		         * </table>
		         *
		         * @sample {highmaps} maps/plotoptions/series-datalabels-format/
		         *         Formatted value
		         *
		         * @type    {Highcharts.FormatterCallbackFunction<Highcharts.SeriesDataLabelsFormatterContextObject>}
		         * @default function () { return this.y; }
		         */
		        formatter: function () {
		            return this.y === null ? '' : H.numberFormat(this.y, -1);
		        },

		        /**
		         * Styles for the label. The default `color` setting is `"contrast"`,
		         * which is a pseudo color that Highcharts picks up and applies the
		         * maximum contrast to the underlying point item, for example the
		         * bar in a bar chart.
		         *
		         * The `textOutline` is a pseudo property that
		         * applies an outline of the given width with the given color, which
		         * by default is the maximum contrast to the text. So a bright text
		         * color will result in a black text outline for maximum readability
		         * on a mixed background. In some cases, especially with grayscale
		         * text, the text outline doesn't work well, in which cases it can
		         * be disabled by setting it to `"none"`. When `useHTML` is true, the
		         * `textOutline` will not be picked up. In this, case, the same effect
		         * can be acheived through the `text-shadow` CSS property.
		         *
		         * For some series types, where each point has an extent, like for
		         * example tree maps, the data label may overflow the point. There are
		         * two strategies for handling overflow. By default, the text will wrap
		         * to multiple lines. The other strategy is to set
		         * `style.textOverflow` to `ellipsis`, which will keep the text on one
		         * line plus it will break inside long words.
		         *
		         * @sample {highcharts} highcharts/plotoptions/series-datalabels-style/
		         *         Bold labels
		         * @sample {highmaps} maps/demo/color-axis/
		         *         Bold labels
		         *
		         * @type    {Highcharts.CSSObject}
		         * @default {"color": "contrast", "fontSize": "11px", "fontWeight": "bold", "textOutline": "1px contrast" }
		         * @since   4.1.0
		         */
		        style: {
		            /** @ignore */
		            fontSize: '11px',
		            /** @ignore */
		            fontWeight: 'bold',
		            /** @ignore */
		            color: 'contrast',
		            /** @ignore */
		            textOutline: '1px contrast'
		        },

		        /**
		         * The name of a symbol to use for the border around the label. Symbols
		         * are predefined functions on the Renderer object.
		         *
		         * @sample highcharts/plotoptions/series-datalabels-shape/
		         *         A callout for annotations
		         *
		         * @type      {string}
		         * @default   square
		         * @since     4.1.2
		         * @apioption plotOptions.series.dataLabels.shape
		         */

		        /**
		         * The Z index of the data labels. The default Z index puts it above
		         * the series. Use a Z index of 2 to display it behind the series.
		         *
		         * @type      {number}
		         * @default   6
		         * @since     2.3.5
		         * @apioption plotOptions.series.dataLabels.zIndex
		         */

		        /**
		         * A declarative filter for which data labels to display. The
		         * declarative filter is designed for use when callback functions are
		         * not available, like when the chart options require a pure JSON
		         * structure or for use with graphical editors. For programmatic
		         * control, use the `formatter` instead, and return `undefined` to
		         * disable a single data label.
		         *
		         * @example
		         * filter: {
		         *     property: 'percentage',
		         *     operator: '>',
		         *     value: 4
		         * }
		         *
		         * @sample highcharts/demo/pie-monochrome
		         *         Data labels filtered by percentage
		         *
		         * @since     6.0.3
		         * @apioption plotOptions.series.dataLabels.filter
		         */

		        /**
		         * The point property to filter by. Point options are passed directly to
		         * properties, additionally there are `y` value, `percentage` and others
		         * listed under [Point](https://api.highcharts.com/class-reference/Highcharts.Point)
		         * members.
		         *
		         * @type      {string}
		         * @apioption plotOptions.series.dataLabels.filter.property
		         */

		        /**
		         * The operator to compare by. Can be one of `>`, `<`, `>=`, `<=`, `==`,
		         * and `===`.
		         *
		         * @type       {string}
		         * @validvalue [">", "<", ">=", "<=", "==", "==="]
		         * @apioption  plotOptions.series.dataLabels.filter.operator
		         */

		        /**
		         * The value to compare against.
		         *
		         * @type      {*}
		         * @apioption plotOptions.series.dataLabels.filter.value
		         */

		        /**
		         * The background color or gradient for the data label.
		         *
		         * @sample {highcharts} highcharts/plotoptions/series-datalabels-box/
		         *         Data labels box options
		         * @sample {highmaps} maps/plotoptions/series-datalabels-box/
		         *         Data labels box options
		         *
		         * @type      {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
		         * @since     2.2.1
		         * @apioption plotOptions.series.dataLabels.backgroundColor
		         */

		        /**
		         * The border color for the data label. Defaults to `undefined`.
		         *
		         * @sample {highcharts|highstock} highcharts/plotoptions/series-datalabels-box/
		         *         Data labels box options
		         *
		         * @type      {Highcharts.ColorString}
		         * @since     2.2.1
		         * @apioption plotOptions.series.dataLabels.borderColor
		         */

		        /**
		         * The shadow of the box. Works best with `borderWidth` or
		         * `backgroundColor`. Since 2.3 the shadow can be an object
		         * configuration containing `color`, `offsetX`, `offsetY`, `opacity` and
		         * `width`.
		         *
		         * @sample {highcharts|highstock} highcharts/plotoptions/series-datalabels-box/
		         *         Data labels box options
		         *
		         * @type      {boolean|Highcharts.ShadowOptionsObject}
		         * @default   false
		         * @since     2.2.1
		         * @apioption plotOptions.series.dataLabels.shadow
		         */

		        /**
		         * For points with an extent, like columns or map areas, whether to
		         * align the data label inside the box or to the actual value point.
		         * Defaults to `false` in most cases, `true` in stacked columns.
		         *
		         * @type      {boolean}
		         * @since     3.0
		         * @apioption plotOptions.series.dataLabels.inside
		         */

		        /**
		         * How to handle data labels that flow outside the plot area. The
		         * default is `"justify"`, which aligns them inside the plot area. For
		         * columns and bars, this means it will be moved inside the bar. To
		         * display data labels outside the plot area, set `crop` to `false` and
		         * `overflow` to `"allow"`.
		         *
		         * @type       {string}
		         * @default    justify
		         * @since      3.0.6
		         * @validvalue ["allow", "justify"]
		         * @apioption  plotOptions.series.dataLabels.overflow
		         */

		        /**
		         * Text rotation in degrees. Note that due to a more complex structure,
		         * backgrounds, borders and padding will be lost on a rotated data
		         * label.
		         *
		         * @sample {highcharts} highcharts/plotoptions/series-datalabels-rotation/
		         *         Vertical labels
		         *
		         * @type      {number}
		         * @default   0
		         * @apioption plotOptions.series.dataLabels.rotation
		         */

		        /**
		         * Whether to
		         * [use HTML](https://www.highcharts.com/docs/chart-concepts/labels-and-string-formatting#html)
		         * to render the labels.
		         *
		         * @type      {boolean}
		         * @default   false
		         * @apioption plotOptions.series.dataLabels.useHTML
		         */

		        /**
		         * The vertical alignment of a data label. Can be one of `top`, `middle`
		         * or `bottom`. The default value depends on the data, for instance
		         * in a column chart, the label is above positive values and below
		         * negative values.
		         *
		         * @since      2.3.3
		         * @validvalue ["top", "middle", "bottom"]
		         */
		        verticalAlign: 'bottom', // above singular point


		        /**
		         * The x position offset of the label relative to the point in pixels.
		         *
		         * @sample {highcharts} highcharts/plotoptions/series-datalabels-rotation/
		         *         Vertical and positioned
		         */
		        x: 0,


		        /**
		         * The y position offset of the label relative to the point in pixels.
		         *
		         * @sample {highcharts} highcharts/plotoptions/series-datalabels-rotation/
		         *         Vertical and positioned
		         */
		        y: 0,


		        /**
		         * When either the `borderWidth` or the `backgroundColor` is set,
		         * this is the padding within the box.
		         *
		         * @sample {highcharts|highstock} highcharts/plotoptions/series-datalabels-box/
		         *         Data labels box options
		         * @sample {highmaps} maps/plotoptions/series-datalabels-box/
		         *         Data labels box options
		         *
		         * @default {highcharts} 5
		         * @default {highstock} 5
		         * @default {highmaps} 0
		         * @since   2.2.1
		         */
		        padding: 5
		    },

		    /**
		     * When the series contains less points than the crop threshold, all
		     * points are drawn, even if the points fall outside the visible plot
		     * area at the current zoom. The advantage of drawing all points (including
		     * markers and columns), is that animation is performed on updates.
		     * On the other hand, when the series contains more points than the
		     * crop threshold, the series data is cropped to only contain points
		     * that fall within the plot area. The advantage of cropping away invisible
		     * points is to increase performance on large series.
		     *
		     * @since   2.2
		     * @product highcharts highstock
		     */
		    cropThreshold: 300,



		    /**
		     * The width of each point on the x axis. For example in a column chart
		     * with one value each day, the pointRange would be 1 day (= 24 * 3600
		     * * 1000 milliseconds). This is normally computed automatically, but
		     * this option can be used to override the automatic value.
		     *
		     * @product highstock
		     */
		    pointRange: 0,

		    /**
		     * When this is true, the series will not cause the Y axis to cross
		     * the zero plane (or [threshold](#plotOptions.series.threshold) option)
		     * unless the data actually crosses the plane.
		     *
		     * For example, if `softThreshold` is `false`, a series of 0, 1, 2,
		     * 3 will make the Y axis show negative values according to the `minPadding`
		     * option. If `softThreshold` is `true`, the Y axis starts at 0.
		     *
		     * @since   4.1.9
		     * @product highcharts highstock
		     */
		    softThreshold: true,



		    /**
		     * A wrapper object for all the series options in specific states.
		     */
		    states: {

		        /**
		         * The normal state of a series, or for point items in column, pie and
		         * similar series. Currently only used for setting animation when
		         * returning to normal state from hover.
		         */
		        normal: {
		            /**
		             * Animation when returning to normal state after hovering.
		             *
		             * @type {boolean|Highcharts.AnimationOptionsObject}
		             */
		            animation: true
		        },

		        /**
		         * Options for the hovered series. These settings override the normal
		         * state options when a series is moused over or touched.
		         */
		        hover: {

		            /**
		             * Enable separate styles for the hovered series to visualize that
		             * the user hovers either the series itself or the legend. .
		             *
		             * @sample {highcharts} highcharts/plotoptions/series-states-hover-enabled/
		             *         Line
		             * @sample {highcharts} highcharts/plotoptions/series-states-hover-enabled-column/
		             *         Column
		             * @sample {highcharts} highcharts/plotoptions/series-states-hover-enabled-pie/
		             *         Pie
		             *
		             * @type      {boolean}
		             * @default   true
		             * @since     1.2
		             * @apioption plotOptions.series.states.hover.enabled
		             */


		            /**
		             * Animation setting for hovering the graph in line-type series.
		             *
		             * @type    {boolean|Highcharts.AnimationOptionsObject}
		             * @since   5.0.8
		             * @product highcharts
		             */
		            animation: {

		                /**
		                 * The duration of the hover animation in milliseconds. By
		                 * default the hover state animates quickly in, and slowly back
		                 * to normal.
		                 */
		                duration: 50
		            },

		            /**
		             * Pixel width of the graph line. By default this property is
		             * undefined, and the `lineWidthPlus` property dictates how much
		             * to increase the linewidth from normal state.
		             *
		             * @sample {highcharts} highcharts/plotoptions/series-states-hover-linewidth/
		             *         5px line on hover
		             *
		             * @type      {number}
		             * @product   highcharts highstock
		             * @apioption plotOptions.series.states.hover.lineWidth
		             */


		            /**
		             * The additional line width for the graph of a hovered series.
		             *
		             * @sample {highcharts} highcharts/plotoptions/series-states-hover-linewidthplus/
		             *         5 pixels wider
		             * @sample {highstock} highcharts/plotoptions/series-states-hover-linewidthplus/
		             *         5 pixels wider
		             *
		             * @since   4.0.3
		             * @product highcharts highstock
		             */
		            lineWidthPlus: 1,

		            /**
		             * In Highcharts 1.0, the appearance of all markers belonging to the
		             * hovered series. For settings on the hover state of the individual
		             * point, see
		             * [marker.states.hover](#plotOptions.series.marker.states.hover).
		             *
		             * @deprecated
		             *
		             * @extends plotOptions.series.marker
		             * @product highcharts highstock
		             */
		            marker: {
		                // lineWidth: base + 1,
		                // radius: base + 1
		            },

		            /**
		             * Options for the halo appearing around the hovered point in line-
		             * type series as well as outside the hovered slice in pie charts.
		             * By default the halo is filled by the current point or series
		             * color with an opacity of 0.25\. The halo can be disabled by
		             * setting the `halo` option to `false`.
		             *
		             * In styled mode, the halo is styled with the `.highcharts-halo`
		             * class, with colors inherited from `.highcharts-color-{n}`.
		             *
		             * @sample {highcharts} highcharts/plotoptions/halo/
		             *         Halo options
		             * @sample {highstock} highcharts/plotoptions/halo/
		             *         Halo options
		             *
		             * @since   4.0
		             * @product highcharts highstock
		             */
		            halo: {

		                /**
		                 * A collection of SVG attributes to override the appearance of
		                 * the halo, for example `fill`, `stroke` and `stroke-width`.
		                 *
		                 * @type      {Highcharts.SVGAttributes}
		                 * @since     4.0
		                 * @product   highcharts highstock
		                 * @apioption plotOptions.series.states.hover.halo.attributes
		                 */


		                /**
		                 * The pixel size of the halo. For point markers this is the
		                 * radius of the halo. For pie slices it is the width of the
		                 * halo outside the slice. For bubbles it defaults to 5 and is
		                 * the width of the halo outside the bubble.
		                 *
		                 * @since   4.0
		                 * @product highcharts highstock
		                 */
		                size: 10,

		                /**
		                 * Opacity for the halo unless a specific fill is overridden
		                 * using the `attributes` setting. Note that Highcharts is only
		                 * able to apply opacity to colors of hex or rgb(a) formats.
		                 *
		                 * @since   4.0
		                 * @product highcharts highstock
		                 */
		                opacity: 0.25
		            }
		        },


		        /**
		         * Specific options for point in selected states, after being selected
		         * by [allowPointSelect](#plotOptions.series.allowPointSelect) or
		         * programmatically.
		         *
		         * @sample {highmaps} maps/plotoptions/series-allowpointselect/
		         *         Allow point select demo
		         *
		         * @extends   plotOptions.series.states.hover
		         * @excluding brightness
		         * @product   highmaps
		         */
		        select: {
		            // marker: {}
		        }
		    },



		    /**
		     * Sticky tracking of mouse events. When true, the `mouseOut` event
		     * on a series isn't triggered until the mouse moves over another series,
		     * or out of the plot area. When false, the `mouseOut` event on a
		     * series is triggered when the mouse leaves the area around the series'
		     * graph or markers. This also implies the tooltip when not shared. When
		     * `stickyTracking` is false and `tooltip.shared` is false, the tooltip will
		     * be hidden when moving the mouse between series. Defaults to true for line
		     * and area type series, but to false for columns, pies etc.
		     *
		     * @sample {highcharts} highcharts/plotoptions/series-stickytracking-true/
		     *         True by default
		     * @sample {highcharts} highcharts/plotoptions/series-stickytracking-false/
		     *         False
		     *
		     * @default {highcharts} true
		     * @default {highstock} true
		     * @default {highmaps} false
		     * @since   2.0
		     */
		    stickyTracking: true,

		    /**
		     * A configuration object for the tooltip rendering of each single series.
		     * Properties are inherited from [tooltip](#tooltip), but only the
		     * following properties can be defined on a series level.
		     *
		     * @since     2.3
		     * @extends   tooltip
		     * @excluding animation, backgroundColor, borderColor, borderRadius,
		     *            borderWidth, crosshairs, enabled, formatter, positioner,
		     *            shadow, shape, shared, snap, style, useHTML
		     * @apioption plotOptions.series.tooltip
		     */

		    /**
		     * When a series contains a data array that is longer than this, only
		     * one dimensional arrays of numbers, or two dimensional arrays with
		     * x and y values are allowed. Also, only the first point is tested,
		     * and the rest are assumed to be the same format. This saves expensive
		     * data checking and indexing in long series. Set it to `0` disable.
		     *
		     * @since   2.2
		     * @product highcharts highstock gantt
		     */
		    turboThreshold: 1000,

		    /**
		     * An array defining zones within a series. Zones can be applied to
		     * the X axis, Y axis or Z axis for bubbles, according to the `zoneAxis`
		     * option. The zone definitions have to be in ascending order regarding to
		     * the value.
		     *
		     * In styled mode, the color zones are styled with the
		     * `.highcharts-zone-{n}` class, or custom classed from the `className`
		     * option
		     * ([view live demo](https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/css/color-zones/)).
		     *
		     * @see [zoneAxis](#plotOptions.series.zoneAxis)
		     *
		     * @sample {highcharts} highcharts/series/color-zones-simple/
		     *         Color zones
		     * @sample {highstock} highcharts/series/color-zones-simple/
		     *         Color zones
		     *
		     * @type      {Array<*>}
		     * @since     4.1.0
		     * @product   highcharts highstock
		     * @apioption plotOptions.series.zones
		     */

		    /**
		     * Styled mode only. A custom class name for the zone.
		     *
		     * @sample highcharts/css/color-zones/
		     *         Zones styled by class name
		     *
		     * @type      {string}
		     * @since     5.0.0
		     * @apioption plotOptions.series.zones.className
		     */

		    /**
		     * Defines the color of the series.
		     *
		     * @see [series color](#plotOptions.series.color)
		     *
		     * @type      {Highcharts.ColorString}
		     * @since     4.1.0
		     * @product   highcharts highstock
		     * @apioption plotOptions.series.zones.color
		     */

		    /**
		     * A name for the dash style to use for the graph.
		     *
		     * @see [series.dashStyle](#plotOptions.series.dashStyle)
		     *
		     * @sample {highcharts|highstock} highcharts/series/color-zones-dashstyle-dot/
		     *         Dashed line indicates prognosis
		     *
		     * @type      {string}
		     * @since     4.1.0
		     * @product   highcharts highstock
		     * @apioption plotOptions.series.zones.dashStyle
		     */

		    /**
		     * Defines the fill color for the series (in area type series)
		     *
		     * @see [fillColor](#plotOptions.area.fillColor)
		     *
		     * @type      {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
		     * @since     4.1.0
		     * @product   highcharts highstock
		     * @apioption plotOptions.series.zones.fillColor
		     */

		    /**
		     * The value up to where the zone extends, if undefined the zones stretches
		     * to the last value in the series.
		     *
		     * @type      {number}
		     * @since     4.1.0
		     * @product   highcharts highstock
		     * @apioption plotOptions.series.zones.value
		     */

		    /**
		     * Determines whether the series should look for the nearest point
		     * in both dimensions or just the x-dimension when hovering the series.
		     * Defaults to `'xy'` for scatter series and `'x'` for most other
		     * series. If the data has duplicate x-values, it is recommended to
		     * set this to `'xy'` to allow hovering over all points.
		     *
		     * Applies only to series types using nearest neighbor search (not
		     * direct hover) for tooltip.
		     *
		     * @sample {highcharts} highcharts/series/findnearestpointby/
		     *         Different hover behaviors
		     * @sample {highstock} highcharts/series/findnearestpointby/
		     *         Different hover behaviors
		     * @sample {highmaps} highcharts/series/findnearestpointby/
		     *         Different hover behaviors
		     *
		     * @since      5.0.10
		     * @validvalue ["x", "xy"]
		     */
		    findNearestPointBy: 'x'

		}, /** @lends Highcharts.Series.prototype */ {

		    isCartesian: true,
		    pointClass: Point,
		    sorted: true, // requires the data to be sorted
		    requireSorting: true,
		    directTouch: false,
		    axisTypes: ['xAxis', 'yAxis'],
		    colorCounter: 0,
		    // each point's x and y values are stored in this.xData and this.yData
		    parallelArrays: ['x', 'y'],
		    coll: 'series',
		    init: function (chart, options) {

		        fireEvent(this, 'init', { options: options });

		        var series = this,
		            events,
		            chartSeries = chart.series,
		            lastSeries;

		        /**
		         * Read only. The chart that the series belongs to.
		         *
		         * @name Highcharts.Series#chart
		         * @type {Highcharts.Chart}
		         */
		        series.chart = chart;

		        /**
		         * Read only. The series' type, like "line", "area", "column" etc. The
		         * type in the series options anc can be altered using
		         * {@link Series#update}.
		         *
		         * @name Highcharts.Series#type
		         * @type {string}
		         */

		        /**
		         * Read only. The series' current options. To update, use
		         * {@link Series#update}.
		         *
		         * @name Highcharts.Series#options
		         * @type {Highcharts.SeriesOptionsType}
		         */
		        series.options = options = series.setOptions(options);
		        series.linkedSeries = [];
		        // bind the axes
		        series.bindAxes();

		        // set some variables
		        extend(series, {
		            /**
		             * The series name as given in the options. Defaults to
		             * "Series {n}".
		             *
		             * @name Highcharts.Series#name
		             * @type {string}
		             */
		            name: options.name,
		            state: '',
		            /**
		             * Read only. The series' visibility state as set by {@link
		             * Series#show}, {@link Series#hide}, or in the initial
		             * configuration.
		             *
		             * @name Highcharts.Series#visible
		             * @type {boolean}
		             */
		            visible: options.visible !== false, // true by default
		            /**
		             * Read only. The series' selected state as set by {@link
		             * Highcharts.Series#select}.
		             *
		             * @name Highcharts.Series#selected
		             * @type {boolean}
		             */
		            selected: options.selected === true // false by default
		        });

		        // register event listeners
		        events = options.events;

		        objectEach(events, function (event, eventType) {
		            addEvent(series, eventType, event);
		        });
		        if (
		            (events && events.click) ||
		            (
		                options.point &&
		                options.point.events &&
		                options.point.events.click
		            ) ||
		            options.allowPointSelect
		        ) {
		            chart.runTrackerClick = true;
		        }

		        series.getColor();
		        series.getSymbol();

		        // Set the data
		        series.parallelArrays.forEach(function (key) {
		            series[key + 'Data'] = [];
		        });
		        series.setData(options.data, false);

		        // Mark cartesian
		        if (series.isCartesian) {
		            chart.hasCartesianSeries = true;
		        }

		        // Get the index and register the series in the chart. The index is one
		        // more than the current latest series index (#5960).
		        if (chartSeries.length) {
		            lastSeries = chartSeries[chartSeries.length - 1];
		        }
		        series._i = pick(lastSeries && lastSeries._i, -1) + 1;

		        // Insert the series and re-order all series above the insertion point.
		        chart.orderSeries(this.insert(chartSeries));

		        fireEvent(this, 'afterInit');
		    },

		    /**
		     * Insert the series in a collection with other series, either the chart
		     * series or yAxis series, in the correct order according to the index
		     * option. Used internally when adding series.
		     *
		     * @private
		     * @function Highcharts.Series#insert
		     *
		     * @param {Array<Highcharts.Series>} collection
		     *        A collection of series, like `chart.series` or `xAxis.series`.
		     *
		     * @return {number}
		     *         The index of the series in the collection.
		     */
		    insert: function (collection) {
		        var indexOption = this.options.index,
		            i;

		        // Insert by index option
		        if (isNumber(indexOption)) {
		            i = collection.length;
		            while (i--) {
		                // Loop down until the interted element has higher index
		                if (indexOption >=
		                        pick(collection[i].options.index, collection[i]._i)) {
		                    collection.splice(i + 1, 0, this);
		                    break;
		                }
		            }
		            if (i === -1) {
		                collection.unshift(this);
		            }
		            i = i + 1;

		        // Or just push it to the end
		        } else {
		            collection.push(this);
		        }
		        return pick(i, collection.length - 1);
		    },

		    /**
		     * Set the xAxis and yAxis properties of cartesian series, and register the
		     * series in the `axis.series` array.
		     *
		     * @private
		     * @function Highcharts.Series#bindAxes
		     *
		     * @exception 18
		     */
		    bindAxes: function () {
		        var series = this,
		            seriesOptions = series.options,
		            chart = series.chart,
		            axisOptions;

		        // repeat for xAxis and yAxis
		        (series.axisTypes || []).forEach(function (AXIS) {

		            // loop through the chart's axis objects
		            chart[AXIS].forEach(function (axis) {
		                axisOptions = axis.options;

		                // apply if the series xAxis or yAxis option mathches the number
		                // of the axis, or if undefined, use the first axis
		                if (
		                    seriesOptions[AXIS] === axisOptions.index ||
		                    (
		                        seriesOptions[AXIS] !== undefined &&
		                        seriesOptions[AXIS] === axisOptions.id
		                    ) ||
		                    (
		                        seriesOptions[AXIS] === undefined &&
		                        axisOptions.index === 0
		                    )
		                ) {

		                    // register this series in the axis.series lookup
		                    series.insert(axis.series);

		                    // set this series.xAxis or series.yAxis reference
		                    /**
		                     * Read only. The unique xAxis object associated with the
		                     * series.
		                     *
		                     * @name Highcharts.Series#xAxis
		                     * @type {Highcharts.Axis}
		                     */
		                    /**
		                     * Read only. The unique yAxis object associated with the
		                     * series.
		                     *
		                     * @name Highcharts.Series#yAxis
		                     * @type {Highcharts.Axis}
		                     */
		                    series[AXIS] = axis;

		                    // mark dirty for redraw
		                    axis.isDirty = true;
		                }
		            });

		            // The series needs an X and an Y axis
		            if (!series[AXIS] && series.optionalAxis !== AXIS) {
		                H.error(18, true, chart);
		            }

		        });
		    },

		    /**
		     * For simple series types like line and column, the data values are held in
		     * arrays like xData and yData for quick lookup to find extremes and more.
		     * For multidimensional series like bubble and map, this can be extended
		     * with arrays like zData and valueData by adding to the
		     * `series.parallelArrays` array.
		     *
		     * @private
		     * @function Highcharts.Series#updateParallelArrays
		     *
		     * @param {Highcharts.Point} point
		     *
		     * @param {number|string} i
		     */
		    updateParallelArrays: function (point, i) {
		        var series = point.series,
		            args = arguments,
		            fn = isNumber(i) ?
		                // Insert the value in the given position
		                function (key) {
		                    var val = key === 'y' && series.toYData ?
		                        series.toYData(point) :
		                        point[key];
		                    series[key + 'Data'][i] = val;
		                } :
		                // Apply the method specified in i with the following arguments
		                // as arguments
		                function (key) {
		                    Array.prototype[i].apply(
		                        series[key + 'Data'],
		                        Array.prototype.slice.call(args, 2)
		                    );
		                };

		        series.parallelArrays.forEach(fn);
		    },

		    /**
		     * Return an auto incremented x value based on the pointStart and
		     * pointInterval options. This is only used if an x value is not given for
		     * the point that calls autoIncrement.
		     *
		     * @private
		     * @function Highcharts.Series#autoIncrement
		     *
		     * @return {number}
		     */
		    autoIncrement: function () {

		        var options = this.options,
		            xIncrement = this.xIncrement,
		            date,
		            pointInterval,
		            pointIntervalUnit = options.pointIntervalUnit,
		            time = this.chart.time;

		        xIncrement = pick(xIncrement, options.pointStart, 0);

		        this.pointInterval = pointInterval = pick(
		            this.pointInterval,
		            options.pointInterval,
		            1
		        );

		        // Added code for pointInterval strings
		        if (pointIntervalUnit) {
		            date = new time.Date(xIncrement);

		            if (pointIntervalUnit === 'day') {
		                time.set(
		                    'Date',
		                    date,
		                    time.get('Date', date) + pointInterval
		                );
		            } else if (pointIntervalUnit === 'month') {
		                time.set(
		                    'Month',
		                    date,
		                    time.get('Month', date) + pointInterval
		                );
		            } else if (pointIntervalUnit === 'year') {
		                time.set(
		                    'FullYear',
		                    date,
		                    time.get('FullYear', date) + pointInterval
		                );
		            }

		            pointInterval = date.getTime() - xIncrement;

		        }

		        this.xIncrement = xIncrement + pointInterval;
		        return xIncrement;
		    },

		    /**
		     * Set the series options by merging from the options tree. Called
		     * internally on initiating and updating series. This function will not
		     * redraw the series. For API usage, use {@link Series#update}.
		     *
		     * @function Highcharts.Series#setOptions
		     *
		     * @param {Highcharts.SeriesOptionsType} itemOptions
		     *        The series options.
		     *
		     * @return {Highcharts.SeriesOptionsType}
		     *
		     * @fires Highcharts.Series#event:afterSetOptions
		     */
		    setOptions: function (itemOptions) {
		        var chart = this.chart,
		            chartOptions = chart.options,
		            plotOptions = chartOptions.plotOptions,
		            userOptions = chart.userOptions || {},
		            userPlotOptions = userOptions.plotOptions || {},
		            typeOptions = plotOptions[this.type],
		            options,
		            zones,
		            zone,
		            styledMode = chart.styledMode;

		        this.userOptions = itemOptions;

		        // General series options take precedence over type options because
		        // otherwise, default type options like column.animation would be
		        // overwritten by the general option. But issues have been raised here
		        // (#3881), and the solution may be to distinguish between default
		        // option and userOptions like in the tooltip below.
		        options = merge(
		            typeOptions,
		            plotOptions.series,
		            itemOptions
		        );

		        // The tooltip options are merged between global and series specific
		        // options. Importance order asscendingly:
		        // globals: (1)tooltip, (2)plotOptions.series, (3)plotOptions[this.type]
		        // init userOptions with possible later updates: 4-6 like 1-3 and
		        // (7)this series options
		        this.tooltipOptions = merge(
		            defaultOptions.tooltip, // 1
		            defaultOptions.plotOptions.series &&
		                defaultOptions.plotOptions.series.tooltip, // 2
		            defaultOptions.plotOptions[this.type].tooltip, // 3
		            chartOptions.tooltip.userOptions, // 4
		            plotOptions.series && plotOptions.series.tooltip, // 5
		            plotOptions[this.type].tooltip, // 6
		            itemOptions.tooltip // 7
		        );

		        // When shared tooltip, stickyTracking is true by default,
		        // unless user says otherwise.
		        this.stickyTracking = pick(
		            itemOptions.stickyTracking,
		            userPlotOptions[this.type] &&
		                userPlotOptions[this.type].stickyTracking,
		            userPlotOptions.series && userPlotOptions.series.stickyTracking,
		            (
		                this.tooltipOptions.shared && !this.noSharedTooltip ?
		                true :
		                options.stickyTracking
		            )
		        );

		        // Delete marker object if not allowed (#1125)
		        if (typeOptions.marker === null) {
		            delete options.marker;
		        }

		        // Handle color zones
		        this.zoneAxis = options.zoneAxis;
		        zones = this.zones = (options.zones || []).slice();
		        if (
		            (options.negativeColor || options.negativeFillColor) &&
		            !options.zones
		        ) {
		            zone = {
		                value:
		                    options[this.zoneAxis + 'Threshold'] ||
		                    options.threshold ||
		                    0,
		                className: 'highcharts-negative'
		            };
		            if (!styledMode) {
		                zone.color = options.negativeColor;
		                zone.fillColor = options.negativeFillColor;
		            }
		            zones.push(zone);
		        }
		        if (zones.length) { // Push one extra zone for the rest
		            if (defined(zones[zones.length - 1].value)) {
		                zones.push(styledMode ? {} : {
		                    color: this.color,
		                    fillColor: this.fillColor
		                });
		            }
		        }

		        fireEvent(this, 'afterSetOptions', { options: options });

		        return options;
		    },

		    /**
		     * Return series name in "Series {Number}" format or the one defined by a
		     * user. This method can be simply overridden as series name format can
		     * vary (e.g. technical indicators).
		     *
		     * @function Highcharts.Series#getName
		     *
		     * @return {string}
		     *         The series name.
		     */
		    getName: function () {
		        return pick(this.options.name, 'Series ' + (this.index + 1)); // #4119
		    },

		    /**
		     * @private
		     * @function Highcharts.Series#getCyclic
		     *
		     * @param {string} prop
		     *
		     * @param {*} value
		     *
		     * @param {*} [defaults]
		     */
		    getCyclic: function (prop, value, defaults) {
		        var i,
		            chart = this.chart,
		            userOptions = this.userOptions,
		            indexName = prop + 'Index',
		            counterName = prop + 'Counter',
		            len = defaults ? defaults.length : pick(
		                chart.options.chart[prop + 'Count'],
		                chart[prop + 'Count']
		            ),
		            setting;

		        if (!value) {
		            // Pick up either the colorIndex option, or the _colorIndex after
		            // Series.update()
		            setting = pick(
		                userOptions[indexName],
		                userOptions['_' + indexName]
		            );
		            if (defined(setting)) { // after Series.update()
		                i = setting;
		            } else {
		                // #6138
		                if (!chart.series.length) {
		                    chart[counterName] = 0;
		                }
		                userOptions['_' + indexName] = i = chart[counterName] % len;
		                chart[counterName] += 1;
		            }
		            if (defaults) {
		                value = defaults[i];
		            }
		        }
		        // Set the colorIndex
		        if (i !== undefined) {
		            this[indexName] = i;
		        }
		        this[prop] = value;
		    },

		    /**
		     * Get the series' color based on either the options or pulled from global
		     * options.
		     *
		     * @function Highcharts.Series#getColor
		     */
		    getColor: function () {
		        if (this.chart.styledMode) {
		            this.getCyclic('color');

		        } else if (this.options.colorByPoint) {
		            // #4359, selected slice got series.color even when colorByPoint was
		            // set.
		            this.options.color = null;
		        } else {
		            this.getCyclic(
		                'color',
		                this.options.color || defaultPlotOptions[this.type].color,
		                this.chart.options.colors
		            );
		        }
		    },

		    /**
		     * Get the series' symbol based on either the options or pulled from global
		     * options.
		     *
		     * @function Highcharts.Series#getSymbol
		     */
		    getSymbol: function () {
		        var seriesMarkerOption = this.options.marker;
		        this.getCyclic(
		            'symbol',
		            seriesMarkerOption.symbol,
		            this.chart.options.symbols
		        );
		    },

		    /**
		     * @private
		     * @borrows LegendSymbolMixin.drawLineMarker as Highcharts.Series#drawLegendSymbol
		     */
		    drawLegendSymbol: LegendSymbolMixin.drawLineMarker,

		    /**
		     * Internal function called from setData. If the point count is the same as
		     * is was, or if there are overlapping X values, just run Point.update which
		     * is cheaper, allows animation, and keeps references to points. This also
		     * allows adding or removing points if the X-es don't match.
		     *
		     * @private
		     * @function Highcharts.Series#updateData
		     *
		     * @param {Array<*>} data
		     *
		     * @return {boolean}
		     */
		    updateData: function (data) {
		        var options = this.options,
		            oldData = this.points,
		            pointsToAdd = [],
		            hasUpdatedByKey,
		            i,
		            point,
		            lastIndex,
		            requireSorting = this.requireSorting;

		        this.xIncrement = null;

		        // Iterate the new data
		        data.forEach(function (pointOptions) {
		            var id,
		                matchingPoint,
		                x,
		                pointIndex,
		                optionsObject = (
		                    H.defined(pointOptions) &&
		                    this.pointClass.prototype.optionsToObject.call(
		                        { series: this },
		                        pointOptions
		                    )
		                ) || {};

		            // Get the x of the new data point
		            x = optionsObject.x;
		            id = optionsObject.id;

		            if (id || isNumber(x)) {
		                if (id) {
		                    matchingPoint = this.chart.get(id);
		                    pointIndex = matchingPoint && matchingPoint.x;
		                }

		                // Search for the same X in the existing data set
		                if (pointIndex === undefined && isNumber(x)) {
		                    pointIndex = this.xData.indexOf(x, lastIndex);
		                }

		                // Matching X not found
		                // or used already due to ununique x values (#8995),
		                // add point (but later)
		                if (
		                    pointIndex === -1 ||
		                    pointIndex === undefined ||
		                    oldData[pointIndex].touched
		                ) {
		                    pointsToAdd.push(pointOptions);

		                // Matching X found, update
		                } else if (pointOptions !== options.data[pointIndex]) {
		                    oldData[pointIndex].update(
		                        pointOptions,
		                        false,
		                        null,
		                        false
		                    );

		                    // Mark it touched, below we will remove all points that
		                    // are not touched.
		                    oldData[pointIndex].touched = true;

		                    // Speed optimize by only searching after last known index.
		                    // Performs ~20% bettor on large data sets.
		                    if (requireSorting) {
		                        lastIndex = pointIndex + 1;
		                    }
		                // Point exists, no changes, don't remove it
		                } else if (oldData[pointIndex]) {
		                    oldData[pointIndex].touched = true;
		                }
		                hasUpdatedByKey = true;
		            }
		        }, this);

		        // Remove points that don't exist in the updated data set
		        if (hasUpdatedByKey) {
		            i = oldData.length;
		            while (i--) {
		                point = oldData[i];
		                if (!point.touched) {
		                    point.remove(false);
		                }
		                point.touched = false;
		            }

		        // If we did not find keys (x-values), and the length is the same,
		        // update one-to-one
		        } else if (data.length === oldData.length) {
		            data.forEach(function (point, i) {
		                // .update doesn't exist on a linked, hidden series (#3709)
		                if (oldData[i].update && point !== options.data[i]) {
		                    oldData[i].update(point, false, null, false);
		                }
		            });

		        // Did not succeed in updating data
		        } else {
		            return false;
		        }

		        // Add new points
		        pointsToAdd.forEach(function (point) {
		            this.addPoint(point, false);
		        }, this);

		        return true;
		    },

		    /**
		     * Apply a new set of data to the series and optionally redraw it. The new
		     * data array is passed by reference (except in case of `updatePoints`), and
		     * may later be mutated when updating the chart data.
		     *
		     * Note the difference in behaviour when setting the same amount of points,
		     * or a different amount of points, as handled by the `updatePoints`
		     * parameter.
		     *
		     * @sample highcharts/members/series-setdata/
		     *         Set new data from a button
		     * @sample highcharts/members/series-setdata-pie/
		     *         Set data in a pie
		     * @sample stock/members/series-setdata/
		     *         Set new data in Highstock
		     * @sample maps/members/series-setdata/
		     *         Set new data in Highmaps
		     *
		     * @function Highcharts.Series#setData
		     *
		     * @param {Array<*>} data
		     *        Takes an array of data in the same format as described under
		     *        `series.{type}.data` for the given series type, for example a
		     *        line series would take data in the form described under
		     *        [series.line.data](https://api.highcharts.com/highcharts/series.line.data).
		     *
		     * @param {boolean} [redraw=true]
		     *        Whether to redraw the chart after the series is altered. If doing
		     *        more operations on the chart, it is a good idea to set redraw to
		     *        false and call {@link Chart#redraw} after.
		     *
		     * @param {Highcharts.AnimationOptionsObject} [animation]
		     *        When the updated data is the same length as the existing data,
		     *        points will be updated by default, and animation visualizes how
		     *        the points are changed. Set false to disable animation, or a
		     *        configuration object to set duration or easing.
		     *
		     * @param {boolean} [updatePoints=true]
		     *        When this is true, points will be updated instead of replaced
		     *        whenever possible. This occurs a) when the updated data is the
		     *        same length as the existing data, b) when points are matched by
		     *        their id's, or c) when points can be matched by X values. This
		     *        allows updating with animation and performs better. In this case,
		     *        the original array is not passed by reference. Set `false` to
		     *        prevent.
		     */
		    setData: function (data, redraw, animation, updatePoints) {
		        var series = this,
		            oldData = series.points,
		            oldDataLength = (oldData && oldData.length) || 0,
		            dataLength,
		            options = series.options,
		            chart = series.chart,
		            firstPoint = null,
		            xAxis = series.xAxis,
		            i,
		            turboThreshold = options.turboThreshold,
		            pt,
		            xData = this.xData,
		            yData = this.yData,
		            pointArrayMap = series.pointArrayMap,
		            valueCount = pointArrayMap && pointArrayMap.length,
		            updatedData;

		        data = data || [];
		        dataLength = data.length;
		        redraw = pick(redraw, true);

		        // If the point count is the same as is was, just run Point.update which
		        // is cheaper, allows animation, and keeps references to points.
		        if (
		            updatePoints !== false &&
		            dataLength &&
		            oldDataLength &&
		            !series.cropped &&
		            !series.hasGroupedData &&
		            series.visible &&
		            // Soft updating has no benefit in boost, and causes JS error
		            // (#8355)
		            !series.isSeriesBoosting
		        ) {
		            updatedData = this.updateData(data);
		        }

		        if (!updatedData) {

		            // Reset properties
		            series.xIncrement = null;

		            series.colorCounter = 0; // for series with colorByPoint (#1547)

		            // Update parallel arrays
		            this.parallelArrays.forEach(function (key) {
		                series[key + 'Data'].length = 0;
		            });

		            // In turbo mode, only one- or twodimensional arrays of numbers are
		            // allowed. The first value is tested, and we assume that all the
		            // rest are defined the same way. Although the 'for' loops are
		            // similar, they are repeated inside each if-else conditional for
		            // max performance.
		            if (turboThreshold && dataLength > turboThreshold) {

		                // find the first non-null point
		                i = 0;
		                while (firstPoint === null && i < dataLength) {
		                    firstPoint = data[i];
		                    i++;
		                }


		                if (isNumber(firstPoint)) { // assume all points are numbers
		                    for (i = 0; i < dataLength; i++) {
		                        xData[i] = this.autoIncrement();
		                        yData[i] = data[i];
		                    }

		                // Assume all points are arrays when first point is
		                } else if (isArray(firstPoint)) {
		                    if (valueCount) { // [x, low, high] or [x, o, h, l, c]
		                        for (i = 0; i < dataLength; i++) {
		                            pt = data[i];
		                            xData[i] = pt[0];
		                            yData[i] = pt.slice(1, valueCount + 1);
		                        }
		                    } else { // [x, y]
		                        for (i = 0; i < dataLength; i++) {
		                            pt = data[i];
		                            xData[i] = pt[0];
		                            yData[i] = pt[1];
		                        }
		                    }
		                } else {
		                    // Highcharts expects configs to be numbers or arrays in
		                    // turbo mode
		                    H.error(12, false, chart);
		                }
		            } else {
		                for (i = 0; i < dataLength; i++) {
		                    if (data[i] !== undefined) { // stray commas in oldIE
		                        pt = { series: series };
		                        series.pointClass.prototype.applyOptions.apply(
		                            pt,
		                            [data[i]]
		                        );
		                        series.updateParallelArrays(pt, i);
		                    }
		                }
		            }

		            // Forgetting to cast strings to numbers is a common caveat when
		            // handling CSV or JSON
		            if (yData && isString(yData[0])) {
		                H.error(14, true, chart);
		            }

		            series.data = [];
		            series.options.data = series.userOptions.data = data;

		            // destroy old points
		            i = oldDataLength;
		            while (i--) {
		                if (oldData[i] && oldData[i].destroy) {
		                    oldData[i].destroy();
		                }
		            }

		            // reset minRange (#878)
		            if (xAxis) {
		                xAxis.minRange = xAxis.userMinRange;
		            }

		            // redraw
		            series.isDirty = chart.isDirtyBox = true;
		            series.isDirtyData = !!oldData;
		            animation = false;
		        }

		        // Typically for pie series, points need to be processed and generated
		        // prior to rendering the legend
		        if (options.legendType === 'point') {
		            this.processData();
		            this.generatePoints();
		        }

		        if (redraw) {
		            chart.redraw(animation);
		        }
		    },

		    /**
		     * Internal function to process the data by cropping away unused data points
		     * if the series is longer than the crop threshold. This saves computing
		     * time for large series. In Highstock, this function is extended to
		     * provide data grouping.
		     *
		     * @private
		     * @function Highcharts.Series#processData
		     *
		     * @param {boolean} force
		     *        Force data grouping.
		     *
		     * @return {boolean|undefined}
		     */
		    processData: function (force) {
		        var series = this,
		            processedXData = series.xData, // copied during slice operation
		            processedYData = series.yData,
		            dataLength = processedXData.length,
		            croppedData,
		            cropStart = 0,
		            cropped,
		            distance,
		            closestPointRange,
		            xAxis = series.xAxis,
		            i, // loop variable
		            options = series.options,
		            cropThreshold = options.cropThreshold,
		            getExtremesFromAll =
		                series.getExtremesFromAll ||
		                options.getExtremesFromAll, // #4599
		            isCartesian = series.isCartesian,
		            xExtremes,
		            val2lin = xAxis && xAxis.val2lin,
		            isLog = xAxis && xAxis.isLog,
		            throwOnUnsorted = series.requireSorting,
		            min,
		            max;

		        // If the series data or axes haven't changed, don't go through this.
		        // Return false to pass the message on to override methods like in data
		        // grouping.
		        if (
		            isCartesian &&
		            !series.isDirty &&
		            !xAxis.isDirty &&
		            !series.yAxis.isDirty &&
		            !force
		        ) {
		            return false;
		        }

		        if (xAxis) {
		            xExtremes = xAxis.getExtremes(); // corrected for log axis (#3053)
		            min = xExtremes.min;
		            max = xExtremes.max;
		        }

		        // optionally filter out points outside the plot area
		        if (
		            isCartesian &&
		            series.sorted &&
		            !getExtremesFromAll &&
		            (!cropThreshold || dataLength > cropThreshold || series.forceCrop)
		        ) {

		            // it's outside current extremes
		            if (
		                processedXData[dataLength - 1] < min ||
		                processedXData[0] > max
		            ) {
		                processedXData = [];
		                processedYData = [];

		            // only crop if it's actually spilling out
		            } else if (
		                series.yData && (
		                    processedXData[0] < min ||
		                    processedXData[dataLength - 1] > max
		                )
		            ) {
		                croppedData = this.cropData(
		                    series.xData,
		                    series.yData,
		                    min,
		                    max
		                );
		                processedXData = croppedData.xData;
		                processedYData = croppedData.yData;
		                cropStart = croppedData.start;
		                cropped = true;
		            }
		        }


		        // Find the closest distance between processed points
		        i = processedXData.length || 1;
		        while (--i) {
		            distance = isLog ?
		                val2lin(processedXData[i]) - val2lin(processedXData[i - 1]) :
		                processedXData[i] - processedXData[i - 1];

		            if (
		                distance > 0 &&
		                (
		                    closestPointRange === undefined ||
		                    distance < closestPointRange
		                )
		            ) {
		                closestPointRange = distance;

		            // Unsorted data is not supported by the line tooltip, as well as
		            // data grouping and navigation in Stock charts (#725) and width
		            // calculation of columns (#1900)
		            } else if (distance < 0 && throwOnUnsorted) {
		                H.error(15, false, series.chart);
		                throwOnUnsorted = false; // Only once
		            }
		        }

		        // Record the properties
		        series.cropped = cropped; // undefined or true
		        series.cropStart = cropStart;
		        series.processedXData = processedXData;
		        series.processedYData = processedYData;

		        series.closestPointRange = closestPointRange;

		    },

		    /**
		     * Iterate over xData and crop values between min and max. Returns object
		     * containing crop start/end cropped xData with corresponding part of yData,
		     * dataMin and dataMax within the cropped range.
		     *
		     * @private
		     * @function Highcharts.Series#cropData
		     *
		     * @param {Array<number>} xData
		     *
		     * @param {Array<number>} yData
		     *
		     * @param {number} min
		     *
		     * @param {number} max
		     *
		     * @param {number} [cropShoulder]
		     *
		     * @return {*}
		     */
		    cropData: function (xData, yData, min, max, cropShoulder) {
		        var dataLength = xData.length,
		            cropStart = 0,
		            cropEnd = dataLength,
		            i,
		            j;

		        // line-type series need one point outside
		        cropShoulder = pick(cropShoulder, this.cropShoulder, 1);

		        // iterate up to find slice start
		        for (i = 0; i < dataLength; i++) {
		            if (xData[i] >= min) {
		                cropStart = Math.max(0, i - cropShoulder);
		                break;
		            }
		        }

		        // proceed to find slice end
		        for (j = i; j < dataLength; j++) {
		            if (xData[j] > max) {
		                cropEnd = j + cropShoulder;
		                break;
		            }
		        }

		        return {
		            xData: xData.slice(cropStart, cropEnd),
		            yData: yData.slice(cropStart, cropEnd),
		            start: cropStart,
		            end: cropEnd
		        };
		    },


		    /**
		     * Generate the data point after the data has been processed by cropping
		     * away unused points and optionally grouped in Highcharts Stock.
		     *
		     * @private
		     * @function Highcharts.Series#generatePoints
		     */
		    generatePoints: function () {
		        var series = this,
		            options = series.options,
		            dataOptions = options.data,
		            data = series.data,
		            dataLength,
		            processedXData = series.processedXData,
		            processedYData = series.processedYData,
		            PointClass = series.pointClass,
		            processedDataLength = processedXData.length,
		            cropStart = series.cropStart || 0,
		            cursor,
		            hasGroupedData = series.hasGroupedData,
		            keys = options.keys,
		            point,
		            points = [],
		            i;

		        if (!data && !hasGroupedData) {
		            var arr = [];
		            arr.length = dataOptions.length;
		            data = series.data = arr;
		        }

		        if (keys && hasGroupedData) {
		            // grouped data has already applied keys (#6590)
		            series.options.keys = false;
		        }

		        for (i = 0; i < processedDataLength; i++) {
		            cursor = cropStart + i;
		            if (!hasGroupedData) {
		                point = data[cursor];
		                if (!point && dataOptions[cursor] !== undefined) { // #970
		                    data[cursor] = point = (new PointClass()).init(
		                        series,
		                        dataOptions[cursor],
		                        processedXData[i]
		                    );
		                }
		            } else {
		                // splat the y data in case of ohlc data array
		                point = (new PointClass()).init(
		                    series,
		                    [processedXData[i]].concat(splat(processedYData[i]))
		                );

		                /**
		                 * Highstock only. If a point object is created by data
		                 * grouping, it doesn't reflect actual points in the raw data.
		                 * In this case, the `dataGroup` property holds information
		                 * that points back to the raw data.
		                 *
		                 * - `dataGroup.start` is the index of the first raw data point
		                 * in the group.
		                 * - `dataGroup.length` is the amount of points in the group.
		                 *
		                 * @product highstock
		                 *
		                 * @name Highcharts.Point#dataGroup
		                 * @type {Highcharts.SVGElement|undefined}
		                 */
		                point.dataGroup = series.groupMap[i];
		                if (point.dataGroup.options) {
		                    point.options = point.dataGroup.options;
		                    extend(point, point.dataGroup.options);
		                }
		            }
		            if (point) { // #6279
		                point.index = cursor; // For faster access in Point.update
		                points[i] = point;
		            }
		        }

		        // restore keys options (#6590)
		        series.options.keys = keys;

		        // Hide cropped-away points - this only runs when the number of points
		        // is above cropThreshold, or when swithching view from non-grouped
		        // data to grouped data (#637)
		        if (
		            data &&
		            (
		                processedDataLength !== (dataLength = data.length) ||
		                hasGroupedData
		            )
		        ) {
		            for (i = 0; i < dataLength; i++) {
		                // when has grouped data, clear all points
		                if (i === cropStart && !hasGroupedData) {
		                    i += processedDataLength;
		                }
		                if (data[i]) {
		                    data[i].destroyElements();
		                    data[i].plotX = undefined; // #1003
		                }
		            }
		        }

		        /**
		         * Read only. An array containing those values converted to points.
		         * In case the series data length exceeds the `cropThreshold`, or if the
		         * data is grouped, `series.data` doesn't contain all the points. Also,
		         * in case a series is hidden, the `data` array may be empty. To access
		         * raw values, `series.options.data` will always be up to date.
		         * `Series.data` only contains the points that have been created on
		         * demand. To modify the data, use {@link Highcharts.Series#setData} or
		         * {@link Highcharts.Point#update}.
		         *
		         * @see Series.points
		         *
		         * @name Highcharts.Series#data
		         * @type {Array<Highcharts.Point>}
		         */
		        series.data = data;

		        /**
		         * An array containing all currently visible point objects. In case of
		         * cropping, the cropped-away points are not part of this array. The
		         * `series.points` array starts at `series.cropStart` compared to
		         * `series.data` and `series.options.data`. If however the series data
		         * is grouped, these can't be correlated one to one. To
		         * modify the data, use {@link Highcharts.Series#setData} or {@link
		         * Highcharts.Point#update}.
		         *
		         * @name Highcharts.Series#points
		         * @type {Array<Highcharts.Point>}
		         */
		        series.points = points;
		    },

		    /**
		     * Calculate Y extremes for the visible data. The result is set as
		     * `dataMin` and `dataMax` on the Series item.
		     *
		     * @function Highcharts.Series#getExtremes
		     *
		     * @param {Array<number>} [yData]
		     *        The data to inspect. Defaults to the current data within the
		     *        visible range.
		     */
		    getExtremes: function (yData) {
		        var xAxis = this.xAxis,
		            yAxis = this.yAxis,
		            xData = this.processedXData,
		            yDataLength,
		            activeYData = [],
		            activeCounter = 0,
		            // #2117, need to compensate for log X axis
		            xExtremes = xAxis.getExtremes(),
		            xMin = xExtremes.min,
		            xMax = xExtremes.max,
		            validValue,
		            withinRange,
		            // Handle X outside the viewed area. This does not work with non-
		            // sorted data like scatter (#7639).
		            shoulder = this.requireSorting ? 1 : 0,
		            x,
		            y,
		            i,
		            j;

		        yData = yData || this.stackedYData || this.processedYData || [];
		        yDataLength = yData.length;

		        for (i = 0; i < yDataLength; i++) {

		            x = xData[i];
		            y = yData[i];

		            // For points within the visible range, including the first point
		            // outside the visible range (#7061), consider y extremes.
		            validValue = (
		                (isNumber(y, true) || isArray(y)) &&
		                (!yAxis.positiveValuesOnly || (y.length || y > 0))
		            );
		            withinRange = (
		                this.getExtremesFromAll ||
		                this.options.getExtremesFromAll ||
		                this.cropped ||
		                (
		                    (xData[i + shoulder] || x) >= xMin &&
		                    (xData[i - shoulder] || x) <= xMax
		                )
		            );

		            if (validValue && withinRange) {

		                j = y.length;
		                if (j) { // array, like ohlc or range data
		                    while (j--) {
		                        if (typeof y[j] === 'number') { // #7380
		                            activeYData[activeCounter++] = y[j];
		                        }
		                    }
		                } else {
		                    activeYData[activeCounter++] = y;
		                }
		            }
		        }

		        this.dataMin = arrayMin(activeYData);
		        this.dataMax = arrayMax(activeYData);
		    },

		    /**
		     * Translate data points from raw data values to chart specific positioning
		     * data needed later in the `drawPoints` and `drawGraph` functions. This
		     * function can be overridden in plugins and custom series type
		     * implementations.
		     *
		     * @function Highcharts.Series#translate
		     *
		     * @fires Highcharts.Series#events:translate
		     */
		    translate: function () {
		        if (!this.processedXData) { // hidden series
		            this.processData();
		        }
		        this.generatePoints();
		        var series = this,
		            options = series.options,
		            stacking = options.stacking,
		            xAxis = series.xAxis,
		            categories = xAxis.categories,
		            yAxis = series.yAxis,
		            points = series.points,
		            dataLength = points.length,
		            hasModifyValue = !!series.modifyValue,
		            i,
		            pointPlacement = options.pointPlacement,
		            dynamicallyPlaced =
		                pointPlacement === 'between' ||
		                isNumber(pointPlacement),
		            threshold = options.threshold,
		            stackThreshold = options.startFromThreshold ? threshold : 0,
		            plotX,
		            plotY,
		            lastPlotX,
		            stackIndicator,
		            closestPointRangePx = Number.MAX_VALUE;

		        // Plotted coordinates need to be within a limited range. Drawing too
		        // far outside the viewport causes various rendering issues (#3201,
		        // #3923, #7555).
		        function limitedRange(val) {
		            return Math.min(Math.max(-1e5, val), 1e5);
		        }

		        // Point placement is relative to each series pointRange (#5889)
		        if (pointPlacement === 'between') {
		            pointPlacement = 0.5;
		        }
		        if (isNumber(pointPlacement)) {
		            pointPlacement *= pick(options.pointRange || xAxis.pointRange);
		        }

		        // Translate each point
		        for (i = 0; i < dataLength; i++) {
		            var point = points[i],
		                xValue = point.x,
		                yValue = point.y,
		                yBottom = point.low,
		                stack = stacking && yAxis.stacks[(
		                    series.negStacks &&
		                    yValue < (stackThreshold ? 0 : threshold) ? '-' : ''
		                ) + series.stackKey],
		                pointStack,
		                stackValues;

		            // Discard disallowed y values for log axes (#3434)
		            if (yAxis.positiveValuesOnly && yValue !== null && yValue <= 0) {
		                point.isNull = true;
		            }

		            // Get the plotX translation
		            point.plotX = plotX = correctFloat( // #5236
		                limitedRange(xAxis.translate( // #3923
		                    xValue,
		                    0,
		                    0,
		                    0,
		                    1,
		                    pointPlacement,
		                    this.type === 'flags'
		                )) // #3923
		            );

		            // Calculate the bottom y value for stacked series
		            if (
		                stacking &&
		                series.visible &&
		                !point.isNull &&
		                stack &&
		                stack[xValue]
		            ) {
		                stackIndicator = series.getStackIndicator(
		                    stackIndicator,
		                    xValue,
		                    series.index
		                );
		                pointStack = stack[xValue];
		                stackValues = pointStack.points[stackIndicator.key];
		                yBottom = stackValues[0];
		                yValue = stackValues[1];

		                if (
		                    yBottom === stackThreshold &&
		                    stackIndicator.key === stack[xValue].base
		                ) {
		                    yBottom = pick(isNumber(threshold) && threshold, yAxis.min);
		                }
		                if (yAxis.positiveValuesOnly && yBottom <= 0) { // #1200, #1232
		                    yBottom = null;
		                }

		                point.total = point.stackTotal = pointStack.total;
		                point.percentage =
		                    pointStack.total &&
		                    (point.y / pointStack.total * 100);
		                point.stackY = yValue;

		                // Place the stack label
		                pointStack.setOffset(
		                    series.pointXOffset || 0,
		                    series.barW || 0
		                );

		            }

		            // Set translated yBottom or remove it
		            point.yBottom = defined(yBottom) ?
		                limitedRange(yAxis.translate(yBottom, 0, 1, 0, 1)) :
		                null;

		            // general hook, used for Highstock compare mode
		            if (hasModifyValue) {
		                yValue = series.modifyValue(yValue, point);
		            }

		            // Set the the plotY value, reset it for redraws
		            point.plotY = plotY =
		                (typeof yValue === 'number' && yValue !== Infinity) ?
		                    limitedRange(yAxis.translate(yValue, 0, 1, 0, 1)) : // #3201
		                    undefined;

		            point.isInside =
		                plotY !== undefined &&
		                plotY >= 0 &&
		                plotY <= yAxis.len && // #3519
		                plotX >= 0 &&
		                plotX <= xAxis.len;


		            // Set client related positions for mouse tracking
		            point.clientX = dynamicallyPlaced ?
		                correctFloat(
		                    xAxis.translate(xValue, 0, 0, 0, 1, pointPlacement)
		                ) :
		                plotX; // #1514, #5383, #5518

		            point.negative = point.y < (threshold || 0);

		            // some API data
		            point.category = categories && categories[point.x] !== undefined ?
		                categories[point.x] : point.x;

		            // Determine auto enabling of markers (#3635, #5099)
		            if (!point.isNull) {
		                if (lastPlotX !== undefined) {
		                    closestPointRangePx = Math.min(
		                        closestPointRangePx,
		                        Math.abs(plotX - lastPlotX)
		                    );
		                }
		                lastPlotX = plotX;
		            }

		            // Find point zone
		            point.zone = this.zones.length && point.getZone();
		        }
		        series.closestPointRangePx = closestPointRangePx;

		        fireEvent(this, 'afterTranslate');
		    },

		    /**
		     * Return the series points with null points filtered out.
		     *
		     * @param {Array<Highcharts.Point>} [points]
		     *        The points to inspect, defaults to {@link Series.points}.
		     *
		     * @param {boolean} [insideOnly=false]
		     *        Whether to inspect only the points that are inside the visible
		     *        view.
		     *
		     * @return {Array<Highcharts.Point>}
		     *         The valid points.
		     */
		    getValidPoints: function (points, insideOnly) {
		        var chart = this.chart;
		        // #3916, #5029, #5085
		        return (points || this.points || []).filter(
		            function isValidPoint(point) {
		                if (insideOnly && !chart.isInsidePlot(
		                    point.plotX,
		                    point.plotY,
		                    chart.inverted
		                )) {
		                    return false;
		                }
		                return !point.isNull;
		            }
		        );
		    },

		    /**
		     * Set the clipping for the series. For animated series it is called twice,
		     * first to initiate animating the clip then the second time without the
		     * animation to set the final clip.
		     *
		     * @private
		     * @function Highcharts.Series#setClip
		     *
		     * @param {boolean} [animation]
		     */
		    setClip: function (animation) {
		        var chart = this.chart,
		            options = this.options,
		            renderer = chart.renderer,
		            inverted = chart.inverted,
		            seriesClipBox = this.clipBox,
		            clipBox = seriesClipBox || chart.clipBox,
		            sharedClipKey =
		                this.sharedClipKey ||
		                [
		                    '_sharedClip',
		                    animation && animation.duration,
		                    animation && animation.easing,
		                    clipBox.height,
		                    options.xAxis,
		                    options.yAxis
		                ].join(','), // #4526
		            clipRect = chart[sharedClipKey],
		            markerClipRect = chart[sharedClipKey + 'm'];

		        // If a clipping rectangle with the same properties is currently present
		        // in the chart, use that.
		        if (!clipRect) {

		            // When animation is set, prepare the initial positions
		            if (animation) {
		                clipBox.width = 0;
		                if (inverted) {
		                    clipBox.x = chart.plotSizeX;
		                }

		                chart[sharedClipKey + 'm'] = markerClipRect = renderer.clipRect(
		                    // include the width of the first marker
		                    inverted ? chart.plotSizeX + 99 : -99,
		                    inverted ? -chart.plotLeft : -chart.plotTop,
		                    99,
		                    inverted ? chart.chartWidth : chart.chartHeight
		                );
		            }
		            chart[sharedClipKey] = clipRect = renderer.clipRect(clipBox);
		            // Create hashmap for series indexes
		            clipRect.count = { length: 0 };

		        }
		        if (animation) {
		            if (!clipRect.count[this.index]) {
		                clipRect.count[this.index] = true;
		                clipRect.count.length += 1;
		            }
		        }

		        if (options.clip !== false) {
		            this.group.clip(
		                animation || seriesClipBox ? clipRect : chart.clipRect
		            );
		            this.markerGroup.clip(markerClipRect);
		            this.sharedClipKey = sharedClipKey;
		        }

		        // Remove the shared clipping rectangle when all series are shown
		        if (!animation) {
		            if (clipRect.count[this.index]) {
		                delete clipRect.count[this.index];
		                clipRect.count.length -= 1;
		            }

		            if (
		                clipRect.count.length === 0 &&
		                sharedClipKey &&
		                chart[sharedClipKey]
		            ) {
		                if (!seriesClipBox) {
		                    chart[sharedClipKey] = chart[sharedClipKey].destroy();
		                }
		                if (chart[sharedClipKey + 'm']) {
		                    chart[sharedClipKey + 'm'] =
		                        chart[sharedClipKey + 'm'].destroy();
		                }
		            }
		        }
		    },

		    /**
		     * Animate in the series. Called internally twice. First with the `init`
		     * parameter set to true, which sets up the initial state of the animation.
		     * Then when ready, it is called with the `init` parameter undefined, in
		     * order to perform the actual animation. After the second run, the function
		     * is removed.
		     *
		     * @function Highcharts.Series#animate
		     *
		     * @param {boolean} init
		     *        Initialize the animation.
		     */
		    animate: function (init) {
		        var series = this,
		            chart = series.chart,
		            clipRect,
		            animation = animObject(series.options.animation),
		            sharedClipKey;

		        // Initialize the animation. Set up the clipping rectangle.
		        if (init) {

		            series.setClip(animation);

		        // Run the animation
		        } else {
		            sharedClipKey = this.sharedClipKey;
		            clipRect = chart[sharedClipKey];
		            if (clipRect) {
		                clipRect.animate({
		                    width: chart.plotSizeX,
		                    x: 0
		                }, animation);
		            }
		            if (chart[sharedClipKey + 'm']) {
		                chart[sharedClipKey + 'm'].animate({
		                    width: chart.plotSizeX + 99,
		                    x: 0
		                }, animation);
		            }

		            // Delete this function to allow it only once
		            series.animate = null;

		        }
		    },

		    /**
		     * This runs after animation to land on the final plot clipping.
		     *
		     * @private
		     * @function Highcharts.Series#afterAnimate
		     *
		     * @fires Highcharts.Series#event:afterAnimate
		     */
		    afterAnimate: function () {
		        this.setClip();
		        fireEvent(this, 'afterAnimate');
		        this.finishedAnimating = true;
		    },

		    /**
		     * Draw the markers for line-like series types, and columns or other
		     * graphical representation for {@link Point} objects for other series
		     * types. The resulting element is typically stored as
		     * {@link Point.graphic}, and is created on the first call and updated and
		     * moved on subsequent calls.
		     *
		     * @function Highcharts.Series#drawPoints
		     */
		    drawPoints: function () {
		        var series = this,
		            points = series.points,
		            chart = series.chart,
		            i,
		            point,
		            symbol,
		            graphic,
		            options = series.options,
		            seriesMarkerOptions = options.marker,
		            pointMarkerOptions,
		            hasPointMarker,
		            enabled,
		            isInside,
		            markerGroup = series[series.specialGroup] || series.markerGroup,
		            xAxis = series.xAxis,
		            markerAttribs,
		            globallyEnabled = pick(
		                seriesMarkerOptions.enabled,
		                !xAxis || xAxis.isRadial ? true : null,
		                // Use larger or equal as radius is null in bubbles (#6321)
		                series.closestPointRangePx >= (
		                    seriesMarkerOptions.enabledThreshold *
		                    seriesMarkerOptions.radius
		                )
		            );

		        if (seriesMarkerOptions.enabled !== false || series._hasPointMarkers) {

		            for (i = 0; i < points.length; i++) {
		                point = points[i];
		                graphic = point.graphic;
		                pointMarkerOptions = point.marker || {};
		                hasPointMarker = !!point.marker;
		                enabled = (
		                    globallyEnabled &&
		                    pointMarkerOptions.enabled === undefined
		                ) || pointMarkerOptions.enabled;
		                isInside = point.isInside !== false;

		                // only draw the point if y is defined
		                if (enabled && !point.isNull) {

		                    // Shortcuts
		                    symbol = pick(pointMarkerOptions.symbol, series.symbol);

		                    markerAttribs = series.markerAttribs(
		                        point,
		                        point.selected && 'select'
		                    );

		                    if (graphic) { // update
		                        // Since the marker group isn't clipped, each individual
		                        // marker must be toggled
		                        graphic[isInside ? 'show' : 'hide'](true)
		                            .animate(markerAttribs);

		                    } else if (
		                        isInside &&
		                        (markerAttribs.width > 0 || point.hasImage)
		                    ) {

		                        /**
		                         * The graphic representation of the point. Typically
		                         * this is a simple shape, like a `rect` for column
		                         * charts or `path` for line markers, but for some
		                         * complex series types like boxplot or 3D charts, the
		                         * graphic may be a `g` element containing other shapes.
		                         * The graphic is generated the first time {@link
		                         * Series#drawPoints} runs, and updated and moved on
		                         * subsequent runs.
		                         *
		                         * @memberof Point
		                         * @name graphic
		                         * @type {SVGElement}
		                         */
		                        point.graphic = graphic = chart.renderer.symbol(
		                            symbol,
		                            markerAttribs.x,
		                            markerAttribs.y,
		                            markerAttribs.width,
		                            markerAttribs.height,
		                            hasPointMarker ?
		                                pointMarkerOptions :
		                                seriesMarkerOptions
		                        )
		                        .add(markerGroup);
		                    }

		                    // Presentational attributes
		                    if (graphic && !chart.styledMode) {
		                        graphic.attr(
		                            series.pointAttribs(
		                                point,
		                                point.selected && 'select'
		                            )
		                        );
		                    }

		                    if (graphic) {
		                        graphic.addClass(point.getClassName(), true);
		                    }

		                } else if (graphic) {
		                    point.graphic = graphic.destroy(); // #1269
		                }
		            }
		        }

		    },

		    /**
		     * Get non-presentational attributes for a point. Used internally for both
		     * styled mode and classic. Can be overridden for different series types.
		     *
		     * @see Series#pointAttribs
		     *
		     * @function Highcharts.Series#markerAttribs
		     *
		     * @param {Highcharts.Point} point
		     *        The Point to inspect.
		     *
		     * @param {string} [state]
		     *        The state, can be either `hover`, `select` or undefined.
		     *
		     * @return {Highcharts.SVGAttributes}
		     *         A hash containing those attributes that are not settable from
		     *         CSS.
		     */
		    markerAttribs: function (point, state) {
		        var seriesMarkerOptions = this.options.marker,
		            seriesStateOptions,
		            pointMarkerOptions = point.marker || {},
		            symbol = pointMarkerOptions.symbol || seriesMarkerOptions.symbol,
		            pointStateOptions,
		            radius = pick(
		                pointMarkerOptions.radius,
		                seriesMarkerOptions.radius
		            ),
		            attribs;

		        // Handle hover and select states
		        if (state) {
		            seriesStateOptions = seriesMarkerOptions.states[state];
		            pointStateOptions = pointMarkerOptions.states &&
		                pointMarkerOptions.states[state];

		            radius = pick(
		                pointStateOptions && pointStateOptions.radius,
		                seriesStateOptions && seriesStateOptions.radius,
		                radius + (
		                    seriesStateOptions && seriesStateOptions.radiusPlus ||
		                    0
		                )
		            );
		        }

		        point.hasImage = symbol && symbol.indexOf('url') === 0;

		        if (point.hasImage) {
		            radius = 0; // and subsequently width and height is not set
		        }

		        attribs = {
		            x: Math.floor(point.plotX) - radius, // Math.floor for #1843
		            y: point.plotY - radius
		        };

		        if (radius) {
		            attribs.width = attribs.height = 2 * radius;
		        }

		        return attribs;

		    },

		    /**
		     * Internal function to get presentational attributes for each point. Unlike
		     * {@link Series#markerAttribs}, this function should return those
		     * attributes that can also be set in CSS. In styled mode, `pointAttribs`
		     * won't be called.
		     *
		     * @private
		     * @function Highcharts.Series#pointAttribs
		     *
		     * @param {Highcharts.Point} point
		     *        The point instance to inspect.
		     *
		     * @param {string} [state]
		     *        The point state, can be either `hover`, `select` or undefined for
		     *        normal state.
		     *
		     * @return {Highcharts.SVGAttributes}
		     *         The presentational attributes to be set on the point.
		     */
		    pointAttribs: function (point, state) {
		        var seriesMarkerOptions = this.options.marker,
		            seriesStateOptions,
		            pointOptions = point && point.options,
		            pointMarkerOptions = (pointOptions && pointOptions.marker) || {},
		            pointStateOptions,
		            color = this.color,
		            pointColorOption = pointOptions && pointOptions.color,
		            pointColor = point && point.color,
		            strokeWidth = pick(
		                pointMarkerOptions.lineWidth,
		                seriesMarkerOptions.lineWidth
		            ),
		            zoneColor = point && point.zone && point.zone.color,
		            fill,
		            stroke;

		        color = (
		            pointColorOption ||
		            zoneColor ||
		            pointColor ||
		            color
		        );
		        fill = (
		            pointMarkerOptions.fillColor ||
		            seriesMarkerOptions.fillColor ||
		            color
		        );
		        stroke = (
		            pointMarkerOptions.lineColor ||
		            seriesMarkerOptions.lineColor ||
		            color
		        );

		        // Handle hover and select states
		        if (state) {
		            seriesStateOptions = seriesMarkerOptions.states[state];
		            pointStateOptions = (
		                pointMarkerOptions.states && pointMarkerOptions.states[state]
		            ) || {};
		            strokeWidth = pick(
		                pointStateOptions.lineWidth,
		                seriesStateOptions.lineWidth,
		                strokeWidth + pick(
		                    pointStateOptions.lineWidthPlus,
		                    seriesStateOptions.lineWidthPlus,
		                    0
		                )
		            );
		            fill = (
		                pointStateOptions.fillColor ||
		                seriesStateOptions.fillColor ||
		                fill
		            );
		            stroke = (
		                pointStateOptions.lineColor ||
		                seriesStateOptions.lineColor ||
		                stroke
		            );
		        }

		        return {
		            'stroke': stroke,
		            'stroke-width': strokeWidth,
		            'fill': fill
		        };
		    },

		    /**
		     * Clear DOM objects and free up memory.
		     *
		     * @private
		     * @function Highcharts.Series#destroy
		     *
		     * @fires Highcharts.Series#event:destroy
		     */
		    destroy: function () {
		        var series = this,
		            chart = series.chart,
		            issue134 = /AppleWebKit\/533/.test(win.navigator.userAgent),
		            destroy,
		            i,
		            data = series.data || [],
		            point,
		            axis;

		        // add event hook
		        fireEvent(series, 'destroy');

		        // remove all events
		        removeEvent(series);

		        // erase from axes
		        (series.axisTypes || []).forEach(function (AXIS) {
		            axis = series[AXIS];
		            if (axis && axis.series) {
		                erase(axis.series, series);
		                axis.isDirty = axis.forceRedraw = true;
		            }
		        });

		        // remove legend items
		        if (series.legendItem) {
		            series.chart.legend.destroyItem(series);
		        }

		        // destroy all points with their elements
		        i = data.length;
		        while (i--) {
		            point = data[i];
		            if (point && point.destroy) {
		                point.destroy();
		            }
		        }
		        series.points = null;

		        // Clear the animation timeout if we are destroying the series during
		        // initial animation
		        H.clearTimeout(series.animationTimeout);

		        // Destroy all SVGElements associated to the series
		        objectEach(series, function (val, prop) {
		            // Survive provides a hook for not destroying
		            if (val instanceof SVGElement && !val.survive) {

		                // issue 134 workaround
		                destroy = issue134 && prop === 'group' ?
		                'hide' :
		                'destroy';

		                val[destroy]();
		            }
		        });

		        // remove from hoverSeries
		        if (chart.hoverSeries === series) {
		            chart.hoverSeries = null;
		        }
		        erase(chart.series, series);
		        chart.orderSeries();

		        // clear all members
		        objectEach(series, function (val, prop) {
		            delete series[prop];
		        });
		    },

		    /**
		     * Get the graph path.
		     *
		     * @private
		     * @function Highcharts.Series#getGraphPath
		     *
		     * @param {Array<*>} points
		     *
		     * @param {boolean} nullsAsZeroes
		     *
		     * @param {boolean} connectCliffs
		     *
		     * @return {Array<number|string>}
		     */
		    getGraphPath: function (points, nullsAsZeroes, connectCliffs) {
		        var series = this,
		            options = series.options,
		            step = options.step,
		            reversed,
		            graphPath = [],
		            xMap = [],
		            gap;

		        points = points || series.points;

		        // Bottom of a stack is reversed
		        reversed = points.reversed;
		        if (reversed) {
		            points.reverse();
		        }
		        // Reverse the steps (#5004)
		        step = { right: 1, center: 2 }[step] || (step && 3);
		        if (step && reversed) {
		            step = 4 - step;
		        }

		        // Remove invalid points, especially in spline (#5015)
		        if (options.connectNulls && !nullsAsZeroes && !connectCliffs) {
		            points = this.getValidPoints(points);
		        }

		        // Build the line
		        points.forEach(function (point, i) {

		            var plotX = point.plotX,
		                plotY = point.plotY,
		                lastPoint = points[i - 1],
		                pathToPoint; // the path to this point from the previous

		            if (
		                (point.leftCliff || (lastPoint && lastPoint.rightCliff)) &&
		                !connectCliffs
		            ) {
		                gap = true; // ... and continue
		            }

		            // Line series, nullsAsZeroes is not handled
		            if (point.isNull && !defined(nullsAsZeroes) && i > 0) {
		                gap = !options.connectNulls;

		            // Area series, nullsAsZeroes is set
		            } else if (point.isNull && !nullsAsZeroes) {
		                gap = true;

		            } else {

		                if (i === 0 || gap) {
		                    pathToPoint = ['M', point.plotX, point.plotY];

		                // Generate the spline as defined in the SplineSeries object
		                } else if (series.getPointSpline) {

		                    pathToPoint = series.getPointSpline(points, point, i);

		                } else if (step) {

		                    if (step === 1) { // right
		                        pathToPoint = [
		                            'L',
		                            lastPoint.plotX,
		                            plotY
		                        ];

		                    } else if (step === 2) { // center
		                        pathToPoint = [
		                            'L',
		                            (lastPoint.plotX + plotX) / 2,
		                            lastPoint.plotY,
		                            'L',
		                            (lastPoint.plotX + plotX) / 2,
		                            plotY
		                        ];

		                    } else {
		                        pathToPoint = [
		                            'L',
		                            plotX,
		                            lastPoint.plotY
		                        ];
		                    }
		                    pathToPoint.push('L', plotX, plotY);

		                } else {
		                    // normal line to next point
		                    pathToPoint = [
		                        'L',
		                        plotX,
		                        plotY
		                    ];
		                }

		                // Prepare for animation. When step is enabled, there are two
		                // path nodes for each x value.
		                xMap.push(point.x);
		                if (step) {
		                    xMap.push(point.x);
		                    if (step === 2) { // step = center (#8073)
		                        xMap.push(point.x);
		                    }
		                }

		                graphPath.push.apply(graphPath, pathToPoint);
		                gap = false;
		            }
		        });

		        graphPath.xMap = xMap;
		        series.graphPath = graphPath;

		        return graphPath;

		    },

		    /**
		     * Draw the graph. Called internally when rendering line-like series types.
		     * The first time it generates the `series.graph` item and optionally other
		     * series-wide items like `series.area` for area charts. On subsequent calls
		     * these items are updated with new positions and attributes.
		     *
		     * @function Highcharts.Series#drawGraph
		     */
		    drawGraph: function () {
		        var series = this,
		            options = this.options,
		            graphPath = (this.gappedPath || this.getGraphPath).call(this),
		            styledMode = this.chart.styledMode,
		            props = [[
		                'graph',
		                'highcharts-graph'
		            ]];

		        // Presentational properties
		        if (!styledMode) {
		            props[0].push(
		                options.lineColor || this.color,
		                options.dashStyle
		            );
		        }

		        props = series.getZonesGraphs(props);

		        // Draw the graph
		        props.forEach(function (prop, i) {
		            var graphKey = prop[0],
		                graph = series[graphKey],
		                attribs;

		            if (graph) {
		                graph.endX = series.preventGraphAnimation ?
		                    null :
		                    graphPath.xMap;
		                graph.animate({ d: graphPath });

		            } else if (graphPath.length) { // #1487

		                series[graphKey] = series.chart.renderer.path(graphPath)
		                    .addClass(prop[1])
		                    .attr({ zIndex: 1 }) // #1069
		                    .add(series.group);


		                if (!styledMode) {
		                    attribs = {
		                        'stroke': prop[2],
		                        'stroke-width': options.lineWidth,
		                        // Polygon series use filled graph
		                        'fill': (series.fillGraph && series.color) || 'none'
		                    };

		                    if (prop[3]) {
		                        attribs.dashstyle = prop[3];
		                    } else if (options.linecap !== 'square') {
		                        attribs['stroke-linecap'] = attribs['stroke-linejoin'] =
		                            'round';
		                    }

		                    graph = series[graphKey]
		                        .attr(attribs)
		                        // Add shadow to normal series (0) or to first zone (1)
		                        // #3932
		                        .shadow((i < 2) && options.shadow);
		                }
		            }

		            // Helpers for animation
		            if (graph) {
		                graph.startX = graphPath.xMap;
		                graph.isArea = graphPath.isArea; // For arearange animation
		            }
		        });
		    },

		    /**
		     * Get zones properties for building graphs. Extendable by series with
		     * multiple lines within one series.
		     *
		     * @private
		     * @function Highcharts.Series#getZonesGraphs
		     *
		     * @param {Array<Array<string>>} props
		     *
		     * @return {Array<Array<string>>}
		     */
		    getZonesGraphs: function (props) {
		        // Add the zone properties if any
		        this.zones.forEach(function (zone, i) {
		            var propset = [
		                'zone-graph-' + i,
		                'highcharts-graph highcharts-zone-graph-' + i + ' ' +
		                    (zone.className || '')
		            ];
		            if (!this.chart.styledMode) {
		                propset.push(
		                    zone.color || this.color,
		                    zone.dashStyle || this.options.dashStyle
		                );
		            }
		            props.push(propset);
		        }, this);

		        return props;
		    },

		    /**
		     * Clip the graphs into zones for colors and styling.
		     *
		     * @private
		     * @function Highcharts.Series#applyZones
		     */
		    applyZones: function () {
		        var series = this,
		            chart = this.chart,
		            renderer = chart.renderer,
		            zones = this.zones,
		            translatedFrom,
		            translatedTo,
		            clips = this.clips || [],
		            clipAttr,
		            graph = this.graph,
		            area = this.area,
		            chartSizeMax = Math.max(chart.chartWidth, chart.chartHeight),
		            axis = this[(this.zoneAxis || 'y') + 'Axis'],
		            extremes,
		            reversed,
		            inverted = chart.inverted,
		            horiz,
		            pxRange,
		            pxPosMin,
		            pxPosMax,
		            ignoreZones = false;

		        if (zones.length && (graph || area) && axis && axis.min !== undefined) {
		            reversed = axis.reversed;
		            horiz = axis.horiz;
		            // The use of the Color Threshold assumes there are no gaps
		            // so it is safe to hide the original graph and area
		            // unless it is not waterfall series, then use showLine property to
		            // set lines between columns to be visible (#7862)
		            if (graph && !this.showLine) {
		                graph.hide();
		            }
		            if (area) {
		                area.hide();
		            }

		            // Create the clips
		            extremes = axis.getExtremes();
		            zones.forEach(function (threshold, i) {

		                translatedFrom = reversed ?
		                    (horiz ? chart.plotWidth : 0) :
		                    (horiz ? 0 : (axis.toPixels(extremes.min) || 0));

		                translatedFrom = Math.min(
		                    Math.max(
		                        pick(translatedTo, translatedFrom), 0
		                    ),
		                    chartSizeMax
		                );
		                translatedTo = Math.min(
		                    Math.max(
		                        Math.round(
		                            axis.toPixels(
		                                pick(threshold.value, extremes.max),
		                                true
		                            ) || 0
		                        ),
		                        0
		                    ),
		                    chartSizeMax
		                );

		                if (ignoreZones) {
		                    translatedFrom = translatedTo = axis.toPixels(extremes.max);
		                }

		                pxRange = Math.abs(translatedFrom - translatedTo);
		                pxPosMin = Math.min(translatedFrom, translatedTo);
		                pxPosMax = Math.max(translatedFrom, translatedTo);
		                if (axis.isXAxis) {
		                    clipAttr = {
		                        x: inverted ? pxPosMax : pxPosMin,
		                        y: 0,
		                        width: pxRange,
		                        height: chartSizeMax
		                    };
		                    if (!horiz) {
		                        clipAttr.x = chart.plotHeight - clipAttr.x;
		                    }
		                } else {
		                    clipAttr = {
		                        x: 0,
		                        y: inverted ? pxPosMax : pxPosMin,
		                        width: chartSizeMax,
		                        height: pxRange
		                    };
		                    if (horiz) {
		                        clipAttr.y = chart.plotWidth - clipAttr.y;
		                    }
		                }

		                // VML SUPPPORT
		                if (inverted && renderer.isVML) {
		                    if (axis.isXAxis) {
		                        clipAttr = {
		                            x: 0,
		                            y: reversed ? pxPosMin : pxPosMax,
		                            height: clipAttr.width,
		                            width: chart.chartWidth
		                        };
		                    } else {
		                        clipAttr = {
		                            x: clipAttr.y - chart.plotLeft - chart.spacingBox.x,
		                            y: 0,
		                            width: clipAttr.height,
		                            height: chart.chartHeight
		                        };
		                    }
		                }
		                // END OF VML SUPPORT

		                if (clips[i]) {
		                    clips[i].animate(clipAttr);
		                } else {
		                    clips[i] = renderer.clipRect(clipAttr);

		                    if (graph) {
		                        series['zone-graph-' + i].clip(clips[i]);
		                    }

		                    if (area) {
		                        series['zone-area-' + i].clip(clips[i]);
		                    }
		                }
		                // if this zone extends out of the axis, ignore the others
		                ignoreZones = threshold.value > extremes.max;

		                // Clear translatedTo for indicators
		                if (series.resetZones && translatedTo === 0) {
		                    translatedTo = undefined;
		                }
		            });
		            this.clips = clips;
		        }
		    },

		    /**
		     * Initialize and perform group inversion on series.group and
		     * series.markerGroup.
		     *
		     * @private
		     * @function Highcharts.Series#invertGroups
		     *
		     * @param {boolean} inverted
		     */
		    invertGroups: function (inverted) {
		        var series = this,
		            chart = series.chart,
		            remover;

		        function setInvert() {
		            ['group', 'markerGroup'].forEach(function (groupName) {
		                if (series[groupName]) {

		                    // VML/HTML needs explicit attributes for flipping
		                    if (chart.renderer.isVML) {
		                        series[groupName].attr({
		                            width: series.yAxis.len,
		                            height: series.xAxis.len
		                        });
		                    }

		                    series[groupName].width = series.yAxis.len;
		                    series[groupName].height = series.xAxis.len;
		                    series[groupName].invert(inverted);
		                }
		            });
		        }

		        // Pie, go away (#1736)
		        if (!series.xAxis) {
		            return;
		        }

		        // A fixed size is needed for inversion to work
		        remover = addEvent(chart, 'resize', setInvert);
		        addEvent(series, 'destroy', remover);

		        // Do it now
		        setInvert(inverted); // do it now

		        // On subsequent render and redraw, just do setInvert without setting up
		        // events again
		        series.invertGroups = setInvert;
		    },

		    /**
		     * General abstraction for creating plot groups like series.group,
		     * series.dataLabelsGroup and series.markerGroup. On subsequent calls, the
		     * group will only be adjusted to the updated plot size.
		     *
		     * @private
		     * @function Highcharts.Series#plotGroup
		     *
		     * @param {string} prop
		     *
		     * @param {string} name
		     *
		     * @param {string} visibility
		     *
		     * @param {number} zIndex
		     *
		     * @param {Highcharts.SVGElement} parent
		     *
		     * @return {Highcharts.SVGElement}
		     */
		    plotGroup: function (prop, name, visibility, zIndex, parent) {
		        var group = this[prop],
		            isNew = !group;

		        // Generate it on first call
		        if (isNew) {
		            this[prop] = group = this.chart.renderer.g()
		                .attr({
		                    zIndex: zIndex || 0.1 // IE8 and pointer logic use this
		                })
		                .add(parent);

		        }

		        // Add the class names, and replace existing ones as response to
		        // Series.update (#6660)
		        group.addClass(
		            (
		                'highcharts-' + name +
		                ' highcharts-series-' + this.index +
		                ' highcharts-' + this.type + '-series ' +
		                (
		                    defined(this.colorIndex) ?
		                        'highcharts-color-' + this.colorIndex + ' ' :
		                        ''
		                ) +
		                (this.options.className || '') +
		                (
		                    group.hasClass('highcharts-tracker') ?
		                        ' highcharts-tracker' :
		                        ''
		                )
		            ),
		            true
		        );

		        // Place it on first and subsequent (redraw) calls
		        group.attr({ visibility: visibility })[isNew ? 'attr' : 'animate'](
		            this.getPlotBox()
		        );
		        return group;
		    },

		    /**
		     * Get the translation and scale for the plot area of this series.
		     *
		     * @function Highcharts.Series#getPlotBox
		     *
		     * @return {Highcharts.SeriesPlotBoxObject}
		     */
		    getPlotBox: function () {
		        var chart = this.chart,
		            xAxis = this.xAxis,
		            yAxis = this.yAxis;

		        // Swap axes for inverted (#2339)
		        if (chart.inverted) {
		            xAxis = yAxis;
		            yAxis = this.xAxis;
		        }
		        return {
		            translateX: xAxis ? xAxis.left : chart.plotLeft,
		            translateY: yAxis ? yAxis.top : chart.plotTop,
		            scaleX: 1, // #1623
		            scaleY: 1
		        };
		    },

		    /**
		     * Render the graph and markers. Called internally when first rendering and
		     * later when redrawing the chart. This function can be extended in plugins,
		     * but normally shouldn't be called directly.
		     *
		     * @function Highcharts.Series#render
		     *
		     * @fires Highcharts.Series#event:afterRender
		     */
		    render: function () {
		        var series = this,
		            chart = series.chart,
		            group,
		            options = series.options,
		            // Animation doesn't work in IE8 quirks when the group div is
		            // hidden, and looks bad in other oldIE
		            animDuration = (
		                !!series.animate &&
		                chart.renderer.isSVG &&
		                animObject(options.animation).duration
		            ),
		            visibility = series.visible ? 'inherit' : 'hidden', // #2597
		            zIndex = options.zIndex,
		            hasRendered = series.hasRendered,
		            chartSeriesGroup = chart.seriesGroup,
		            inverted = chart.inverted;

		        // the group
		        group = series.plotGroup(
		            'group',
		            'series',
		            visibility,
		            zIndex,
		            chartSeriesGroup
		        );

		        series.markerGroup = series.plotGroup(
		            'markerGroup',
		            'markers',
		            visibility,
		            zIndex,
		            chartSeriesGroup
		        );

		        // initiate the animation
		        if (animDuration) {
		            series.animate(true);
		        }

		        // SVGRenderer needs to know this before drawing elements (#1089, #1795)
		        group.inverted = series.isCartesian ? inverted : false;

		        // draw the graph if any
		        if (series.drawGraph) {
		            series.drawGraph();
		            series.applyZones();
		        }

		        /* series.points.forEach(function (point) {
		            if (point.redraw) {
		                point.redraw();
		            }
		        }); */

		        // draw the data labels (inn pies they go before the points)
		        if (series.drawDataLabels) {
		            series.drawDataLabels();
		        }

		        // draw the points
		        if (series.visible) {
		            series.drawPoints();
		        }


		        // draw the mouse tracking area
		        if (
		            series.drawTracker &&
		            series.options.enableMouseTracking !== false
		        ) {
		            series.drawTracker();
		        }

		        // Handle inverted series and tracker groups
		        series.invertGroups(inverted);

		        // Initial clipping, must be defined after inverting groups for VML.
		        // Applies to columns etc. (#3839).
		        if (options.clip !== false && !series.sharedClipKey && !hasRendered) {
		            group.clip(chart.clipRect);
		        }

		        // Run the animation
		        if (animDuration) {
		            series.animate();
		        }

		        // Call the afterAnimate function on animation complete (but don't
		        // overwrite the animation.complete option which should be available to
		        // the user).
		        if (!hasRendered) {
		            series.animationTimeout = syncTimeout(function () {
		                series.afterAnimate();
		            }, animDuration);
		        }

		        series.isDirty = false; // means data is in accordance with what you see
		        // (See #322) series.isDirty = series.isDirtyData = false; // means
		        // data is in accordance with what you see
		        series.hasRendered = true;

		        fireEvent(series, 'afterRender');
		    },

		    /**
		     * Redraw the series. This function is called internally from `chart.redraw`
		     * and normally shouldn't be called directly.
		     *
		     * @private
		     * @function Highcharts.Series#redraw
		     */
		    redraw: function () {
		        var series = this,
		            chart = series.chart,
		            // cache it here as it is set to false in render, but used after
		            wasDirty = series.isDirty || series.isDirtyData,
		            group = series.group,
		            xAxis = series.xAxis,
		            yAxis = series.yAxis;

		        // reposition on resize
		        if (group) {
		            if (chart.inverted) {
		                group.attr({
		                    width: chart.plotWidth,
		                    height: chart.plotHeight
		                });
		            }

		            group.animate({
		                translateX: pick(xAxis && xAxis.left, chart.plotLeft),
		                translateY: pick(yAxis && yAxis.top, chart.plotTop)
		            });
		        }

		        series.translate();
		        series.render();
		        if (wasDirty) { // #3868, #3945
		            delete this.kdTree;
		        }
		    },

		    kdAxisArray: ['clientX', 'plotY'],

		    /**
		     * @private
		     * @function Highcharts.Series#searchPoint
		     *
		     * @param {object} e
		     *
		     * @param {boolean} [compareX]
		     *
		     * @return {Highcharts.Point}
		     */
		    searchPoint: function (e, compareX) {
		        var series = this,
		            xAxis = series.xAxis,
		            yAxis = series.yAxis,
		            inverted = series.chart.inverted;

		        return this.searchKDTree({
		            clientX: inverted ?
		                xAxis.len - e.chartY + xAxis.pos :
		                e.chartX - xAxis.pos,
		            plotY: inverted ?
		                yAxis.len - e.chartX + yAxis.pos :
		                e.chartY - yAxis.pos
		        }, compareX);
		    },

		    /**
		     * Build the k-d-tree that is used by mouse and touch interaction to get the
		     * closest point. Line-like series typically have a one-dimensional tree
		     * where points are searched along the X axis, while scatter-like series
		     * typically search in two dimensions, X and Y.
		     *
		     * @private
		     * @function Highcharts.Series#buildKDTree
		     */
		    buildKDTree: function () {

		        // Prevent multiple k-d-trees from being built simultaneously (#6235)
		        this.buildingKdTree = true;

		        var series = this,
		            dimensions = series.options.findNearestPointBy.indexOf('y') > -1 ?
		                            2 : 1;

		        // Internal function
		        function _kdtree(points, depth, dimensions) {
		            var axis,
		                median,
		                length = points && points.length;

		            if (length) {

		                // alternate between the axis
		                axis = series.kdAxisArray[depth % dimensions];

		                // sort point array
		                points.sort(function (a, b) {
		                    return a[axis] - b[axis];
		                });

		                median = Math.floor(length / 2);

		                // build and return nod
		                return {
		                    point: points[median],
		                    left: _kdtree(
		                        points.slice(0, median), depth + 1, dimensions
		                    ),
		                    right: _kdtree(
		                        points.slice(median + 1), depth + 1, dimensions
		                    )
		                };

		            }
		        }

		        // Start the recursive build process with a clone of the points array
		        // and null points filtered out (#3873)
		        function startRecursive() {
		            series.kdTree = _kdtree(
		                series.getValidPoints(
		                    null,
		                    // For line-type series restrict to plot area, but
		                    // column-type series not (#3916, #4511)
		                    !series.directTouch
		                ),
		                dimensions,
		                dimensions
		            );
		            series.buildingKdTree = false;
		        }
		        delete series.kdTree;

		        // For testing tooltips, don't build async
		        syncTimeout(startRecursive, series.options.kdNow ? 0 : 1);
		    },

		    /**
		     * @private
		     * @function Highcharts.Series#searchKDTree
		     *
		     * @param {object} point
		     *
		     * @param {boolean} [compareX]
		     *
		     * @return {Highcharts.Point}
		     */
		    searchKDTree: function (point, compareX) {
		        var series = this,
		            kdX = this.kdAxisArray[0],
		            kdY = this.kdAxisArray[1],
		            kdComparer = compareX ? 'distX' : 'dist',
		            kdDimensions = series.options.findNearestPointBy.indexOf('y') > -1 ?
		                            2 : 1;

		        // Set the one and two dimensional distance on the point object
		        function setDistance(p1, p2) {
		            var x = (defined(p1[kdX]) && defined(p2[kdX])) ?
		                    Math.pow(p1[kdX] - p2[kdX], 2) :
		                    null,
		                y = (defined(p1[kdY]) && defined(p2[kdY])) ?
		                    Math.pow(p1[kdY] - p2[kdY], 2) :
		                    null,
		                r = (x || 0) + (y || 0);

		            p2.dist = defined(r) ? Math.sqrt(r) : Number.MAX_VALUE;
		            p2.distX = defined(x) ? Math.sqrt(x) : Number.MAX_VALUE;
		        }
		        function _search(search, tree, depth, dimensions) {
		            var point = tree.point,
		                axis = series.kdAxisArray[depth % dimensions],
		                tdist,
		                sideA,
		                sideB,
		                ret = point,
		                nPoint1,
		                nPoint2;

		            setDistance(search, point);

		            // Pick side based on distance to splitting point
		            tdist = search[axis] - point[axis];
		            sideA = tdist < 0 ? 'left' : 'right';
		            sideB = tdist < 0 ? 'right' : 'left';

		            // End of tree
		            if (tree[sideA]) {
		                nPoint1 = _search(search, tree[sideA], depth + 1, dimensions);

		                ret = (nPoint1[kdComparer] < ret[kdComparer] ? nPoint1 : point);
		            }
		            if (tree[sideB]) {
		                // compare distance to current best to splitting point to decide
		                // wether to check side B or not
		                if (Math.sqrt(tdist * tdist) < ret[kdComparer]) {
		                    nPoint2 = _search(
		                        search,
		                        tree[sideB],
		                        depth + 1,
		                        dimensions
		                    );
		                    ret = nPoint2[kdComparer] < ret[kdComparer] ?
		                        nPoint2 :
		                        ret;
		                }
		            }

		            return ret;
		        }

		        if (!this.kdTree && !this.buildingKdTree) {
		            this.buildKDTree();
		        }

		        if (this.kdTree) {
		            return _search(point, this.kdTree, kdDimensions, kdDimensions);
		        }
		    }

		}); // end Series prototype

		/**
		 * A line series displays information as a series of data points connected by
		 * straight line segments.
		 *
		 * @sample {highcharts} highcharts/demo/line-basic/
		 *         Line chart
		 * @sample {highstock} stock/demo/basic-line/
		 *         Line chart
		 *
		 * @extends   plotOptions.series
		 * @product   highcharts highstock
		 * @apioption plotOptions.line
		 */

		/**
		 * The SVG value used for the `stroke-linecap` and `stroke-linejoin`
		 * of a line graph. Round means that lines are rounded in the ends and
		 * bends.
		 *
		 * @type       {string}
		 * @validvalue ["round", "butt", "square"]
		 * @default    round
		 * @since      3.0.7
		 * @apioption  plotOptions.line.linecap
		 */

		/**
		 * A `line` series. If the [type](#series.line.type) option is not
		 * specified, it is inherited from [chart.type](#chart.type).
		 *
		 * @extends   series,plotOptions.line
		 * @excluding dataParser,dataURL
		 * @product   highcharts highstock
		 * @apioption series.line
		 */

		/**
		 * An array of data points for the series. For the `line` series type,
		 * points can be given in the following ways:
		 *
		 * 1. An array of numerical values. In this case, the numerical values will be
		 *    interpreted as `y` options. The `x` values will be automatically
		 *    calculated, either starting at 0 and incremented by 1, or from
		 *    `pointStart` and `pointInterval` given in the series options. If the axis
		 *    has categories, these will be used. Example:
		 *    ```js
		 *    data: [0, 5, 3, 5]
		 *    ```
		 *
		 * 2. An array of arrays with 2 values. In this case, the values correspond to
		 *    `x,y`. If the first value is a string, it is applied as the name of the
		 *    point, and the `x` value is inferred.
		 *    ```js
		 *    data: [
		 *        [0, 1],
		 *        [1, 2],
		 *        [2, 8]
		 *    ]
		 *    ```
		 *
		 * 3. 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.line.turboThreshold), this option is not
		 *    available.
		 *    ```js
		 *    data: [{
		 *        x: 1,
		 *        y: 9,
		 *        name: "Point2",
		 *        color: "#00FF00"
		 *    }, {
		 *        x: 1,
		 *        y: 6,
		 *        name: "Point1",
		 *        color: "#FF00FF"
		 *    }]
		 *    ```
		 *
		 * @sample {highcharts} highcharts/chart/reflow-true/
		 *         Numerical values
		 * @sample {highcharts} highcharts/series/data-array-of-arrays/
		 *         Arrays of numeric x and y
		 * @sample {highcharts} highcharts/series/data-array-of-arrays-datetime/
		 *         Arrays of datetime x and y
		 * @sample {highcharts} highcharts/series/data-array-of-name-value/
		 *         Arrays of point.name and y
		 * @sample {highcharts} highcharts/series/data-array-of-objects/
		 *         Config objects
		 *
		 * @type      {Array<number|Array<(number|string),number>|*>}
		 * @apioption series.line.data
		 */

		/**
		 * An additional, individual class name for the data point's graphic
		 * representation.
		 *
		 * @type      {string}
		 * @since     5.0.0
		 * @product   highcharts gantt
		 * @apioption series.line.data.className
		 */

		/**
		 * Individual color for the point. By default the color is pulled from
		 * the global `colors` array.
		 *
		 * In styled mode, the `color` option doesn't take effect. Instead, use
		 * `colorIndex`.
		 *
		 * @sample {highcharts} highcharts/point/color/
		 *         Mark the highest point
		 *
		 * @type      {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
		 * @product   highcharts highstock gantt
		 * @apioption series.line.data.color
		 */

		/**
		 * A specific color index to use for the point, so its graphic representations
		 * are given the class name `highcharts-color-{n}`. In styled mode this will
		 * change the color of the graphic. In non-styled mode, the color by is set by
		 * the `fill` attribute, so the change in class name won't have a visual effect
		 * by default.
		 *
		 * @type      {number}
		 * @since     5.0.0
		 * @product   highcharts gantt
		 * @apioption series.line.data.colorIndex
		 */

		/**
		 * Individual data label for each point. The options are the same as
		 * the ones for [plotOptions.series.dataLabels](
		 * #plotOptions.series.dataLabels).
		 *
		 * @sample highcharts/point/datalabels/
		 *         Show a label for the last value
		 *
		 * @type      {Highcharts.PlotSeriesDataLabelsOptions}
		 * @product   highcharts highstock gantt
		 * @apioption series.line.data.dataLabels
		 */

		/**
		 * A description of the point to add to the screen reader information
		 * about the point. Requires the Accessibility module.
		 *
		 * @type      {string}
		 * @since     5.0.0
		 * @apioption series.line.data.description
		 */

		/**
		 * An id for the point. This can be used after render time to get a
		 * pointer to the point object through `chart.get()`.
		 *
		 * @sample {highcharts} highcharts/point/id/
		 *         Remove an id'd point
		 *
		 * @type      {string}
		 * @since     1.2.0
		 * @product   highcharts highstock gantt
		 * @apioption series.line.data.id
		 */

		/**
		 * The rank for this point's data label in case of collision. If two
		 * data labels are about to overlap, only the one with the highest `labelrank`
		 * will be drawn.
		 *
		 * @type      {number}
		 * @apioption series.line.data.labelrank
		 */

		/**
		 * The name of the point as shown in the legend, tooltip, dataLabel
		 * etc.
		 *
		 * @see [xAxis.uniqueNames](#xAxis.uniqueNames)
		 *
		 * @sample {highcharts} highcharts/series/data-array-of-objects/
		 *         Point names
		 *
		 * @type      {string}
		 * @apioption series.line.data.name
		 */

		/**
		 * Whether the data point is selected initially.
		 *
		 * @type      {boolean}
		 * @default   false
		 * @product   highcharts highstock gantt
		 * @apioption series.line.data.selected
		 */

		/**
		 * The x value of the point. For datetime axes, the X value is the timestamp
		 * in milliseconds since 1970.
		 *
		 * @type      {number}
		 * @product   highcharts highstock
		 * @apioption series.line.data.x
		 */

		/**
		 * The y value of the point.
		 *
		 * @type      {number}
		 * @product   highcharts highstock
		 * @apioption series.line.data.y
		 */

		/**
		 * Individual point events
		 *
		 * @extends   plotOptions.series.point.events
		 * @product   highcharts highstock gantt
		 * @apioption series.line.data.events
		 */

		/**
		 * @extends   plotOptions.series.marker
		 * @product   highcharts highstock
		 * @apioption series.line.data.marker
		 */

	}(Highcharts));
	(function (H) {
		/**
		 * (c) 2010-2018 Torstein Honsi
		 *
		 * License: www.highcharts.com/license
		 */



		var colorPointMixin = H.colorPointMixin,
		    colorSeriesMixin = H.colorSeriesMixin,
		    LegendSymbolMixin = H.LegendSymbolMixin,
		    merge = H.merge,
		    noop = H.noop,
		    pick = H.pick,
		    Series = H.Series,
		    seriesType = H.seriesType,
		    seriesTypes = H.seriesTypes;

		/**
		 * @private
		 * @class
		 * @name Highcharts.seriesTypes.heatmap
		 *
		 * @augments Highcharts.Series
		 */
		seriesType('heatmap', 'scatter'

		/**
		 * A heatmap is a graphical representation of data where the individual values
		 * contained in a matrix are represented as colors.
		 *
		 * @sample highcharts/demo/heatmap/
		 *         Simple heatmap
		 * @sample highcharts/demo/heatmap-canvas/
		 *         Heavy heatmap
		 *
		 * @extends      plotOptions.scatter
		 * @excluding    animationLimit, connectEnds, connectNulls, dashStyle,
		 *               findNearestPointBy, getExtremesFromAll, linecap, lineWidth,
		 *               marker, pointInterval, pointIntervalUnit, pointRange,
		 *               pointStart, shadow, softThreshold, stacking, step,
		 *               threshold
		 * @product      highcharts highmaps
		 * @optionparent plotOptions.heatmap
		 */
		, {

		    /**
		     * Animation is disabled by default on the heatmap series.
		     */
		    animation: false,

		    /**
		     * The border width for each heat map item.
		     */
		    borderWidth: 0,

		    /**
		     * Padding between the points in the heatmap.
		     *
		     * @type      {number}
		     * @default   0
		     * @since     6.0
		     * @apioption plotOptions.heatmap.pointPadding
		     */

		    /**
		     * The main color of the series. In heat maps this color is rarely used,
		     * as we mostly use the color to denote the value of each point. Unless
		     * options are set in the [colorAxis](#colorAxis), the default value
		     * is pulled from the [options.colors](#colors) array.
		     *
		     * @type      {Highcharts.ColorString}
		     * @since     4.0
		     * @product   highcharts
		     * @apioption plotOptions.heatmap.color
		     */

		    /**
		     * The column size - how many X axis units each column in the heatmap
		     * should span.
		     *
		     * @sample {highcharts} maps/demo/heatmap/
		     *         One day
		     * @sample {highmaps} maps/demo/heatmap/
		     *         One day
		     *
		     * @type      {number}
		     * @default   1
		     * @since     4.0
		     * @product   highcharts highmaps
		     * @apioption plotOptions.heatmap.colsize
		     */

		    /**
		     * The row size - how many Y axis units each heatmap row should span.
		     *
		     * @sample {highcharts} maps/demo/heatmap/
		     *         1 by default
		     * @sample {highmaps} maps/demo/heatmap/
		     *         1 by default
		     *
		     * @type      {number}
		     * @default   1
		     * @since     4.0
		     * @product   highcharts highmaps
		     * @apioption plotOptions.heatmap.rowsize
		     */

		    /**
		     * The color applied to null points. In styled mode, a general CSS class is
		     * applied instead.
		     *
		     * @type {Highcharts.ColorString}
		     */
		    nullColor: '#f7f7f7',

		    dataLabels: {
		        formatter: function () { // #2945
		            return this.point.value;
		        },
		        inside: true,
		        verticalAlign: 'middle',
		        crop: false,
		        overflow: false,
		        padding: 0 // #3837
		    },

		    /** @ignore */
		    marker: null,

		    /**
		     * @ignore
		     */
		    pointRange: null, // dynamically set to colsize by default

		    tooltip: {
		        pointFormat: '{point.x}, {point.y}: {point.value}<br/>'
		    },

		    states: {

		        hover: {

		            /** @ignore */
		            halo: false, // #3406, halo is disabled on heatmaps by default

		            /**
		             * How much to brighten the point on interaction. Requires the main
		             * color to be defined in hex or rgb(a) format.
		             *
		             * In styled mode, the hover brightening is by default replaced with
		             * a fill-opacity set in the `.highcharts-point:hover` rule.
		             */
		            brightness: 0.2
		        }

		    }

		}, merge(colorSeriesMixin, {

		    pointArrayMap: ['y', 'value'],
		    hasPointSpecificOptions: true,
		    getExtremesFromAll: true,
		    directTouch: true,

		    /**
		     * Override the init method to add point ranges on both axes.
		     *
		     * @private
		     * @function Highcharts.seriesTypes.heatmap#init
		     */
		    init: function () {
		        var options;
		        seriesTypes.scatter.prototype.init.apply(this, arguments);

		        options = this.options;
		        // #3758, prevent resetting in setData
		        options.pointRange = pick(options.pointRange, options.colsize || 1);
		        // general point range
		        this.yAxis.axisPointRange = options.rowsize || 1;
		    },

		    /**
		     * @private
		     * @function Highcharts.seriesTypes.heatmap#translate
		     */
		    translate: function () {
		        var series = this,
		            options = series.options,
		            xAxis = series.xAxis,
		            yAxis = series.yAxis,
		            seriesPointPadding = options.pointPadding || 0,
		            between = function (x, a, b) {
		                return Math.min(Math.max(a, x), b);
		            };

		        series.generatePoints();

		        series.points.forEach(function (point) {
		            var xPad = (options.colsize || 1) / 2,
		                yPad = (options.rowsize || 1) / 2,
		                x1 = between(
		                    Math.round(
		                        xAxis.len -
		                        xAxis.translate(point.x - xPad, 0, 1, 0, 1)
		                    ),
		                    -xAxis.len, 2 * xAxis.len
		                ),
		                x2 = between(
		                    Math.round(
		                        xAxis.len -
		                        xAxis.translate(point.x + xPad, 0, 1, 0, 1)
		                    ),
		                    -xAxis.len, 2 * xAxis.len
		                ),
		                y1 = between(
		                    Math.round(yAxis.translate(point.y - yPad, 0, 1, 0, 1)),
		                    -yAxis.len, 2 * yAxis.len
		                ),
		                y2 = between(
		                    Math.round(yAxis.translate(point.y + yPad, 0, 1, 0, 1)),
		                    -yAxis.len, 2 * yAxis.len
		                ),
		                pointPadding = pick(point.pointPadding, seriesPointPadding);

		            // Set plotX and plotY for use in K-D-Tree and more
		            point.plotX = point.clientX = (x1 + x2) / 2;
		            point.plotY = (y1 + y2) / 2;

		            point.shapeType = 'rect';
		            point.shapeArgs = {
		                x: Math.min(x1, x2) + pointPadding,
		                y: Math.min(y1, y2) + pointPadding,
		                width: Math.abs(x2 - x1) - pointPadding * 2,
		                height: Math.abs(y2 - y1) - pointPadding * 2
		            };
		        });

		        series.translateColors();
		    },

		    /**
		     * @private
		     * @function Highcharts.seriesTypes.heatmap#drawPoints
		     */
		    drawPoints: function () {

		        // In styled mode, use CSS, otherwise the fill used in the style sheet
		        // will take precedence over the fill attribute.
		        var func = this.chart.styledMode ? 'css' : 'attr';

		        seriesTypes.column.prototype.drawPoints.call(this);

		        this.points.forEach(function (point) {
		            point.graphic[func](this.colorAttribs(point));
		        }, this);
		    },

		    /**
		     * @ignore
		     * @deprecated
		     * @function Highcharts.seriesTypes.heatmap#animate
		     */
		    animate: noop,

		    /**
		     * @ignore
		     * @deprecated
		     * @function Highcharts.seriesTypes.heatmap#getBox
		     */
		    getBox: noop,

		    /**
		     * @private
		     * @borrows Highcharts.LegendSymbolMixin.drawRectangle as Highcharts.seriesTypes.heatmap#drawLegendSymbol
		     */
		    drawLegendSymbol: LegendSymbolMixin.drawRectangle,

		    /**
		     * @private
		     * @borrows Highcharts.seriesTypes.column#alignDataLabel as Highcharts.seriesTypes.heatmap#alignDataLabel
		     */
		    alignDataLabel: seriesTypes.column.prototype.alignDataLabel,

		    /**
		     * @private
		     * @function Highcharts.seriesTypes.heatmap#getExtremes
		     */
		    getExtremes: function () {
		        // Get the extremes from the value data
		        Series.prototype.getExtremes.call(this, this.valueData);
		        this.valueMin = this.dataMin;
		        this.valueMax = this.dataMax;

		        // Get the extremes from the y data
		        Series.prototype.getExtremes.call(this);
		    }

		}), H.extend({

		    /**
		     * @private
		     * @function Highcharts.Point#haloPath
		     *
		     * @param {number} size
		     *
		     * @return {Highcharts.SVGPathArray}
		     */
		    haloPath: function (size) {
		        if (!size) {
		            return [];
		        }
		        var rect = this.shapeArgs;
		        return [
		            'M', rect.x - size, rect.y - size,
		            'L', rect.x - size, rect.y + rect.height + size,
		            rect.x + rect.width + size, rect.y + rect.height + size,
		            rect.x + rect.width + size, rect.y - size,
		            'Z'
		        ];
		    }
		}, colorPointMixin));

		/**
		 * A `heatmap` series. If the [type](#series.heatmap.type) option is
		 * not specified, it is inherited from [chart.type](#chart.type).
		 *
		 * @extends   series,plotOptions.heatmap
		 * @excluding dataParser, dataURL, marker, pointRange, stack
		 * @product   highcharts highmaps
		 * @apioption series.heatmap
		 */

		/**
		 * An array of data points for the series. For the `heatmap` series
		 * type, points can be given in the following ways:
		 *
		 * 1.  An array of arrays with 3 or 2 values. In this case, the values
		 * correspond to `x,y,value`. If the first value is a string, it is
		 * applied as the name of the point, and the `x` value is inferred.
		 * The `x` value can also be omitted, in which case the inner arrays
		 * should be of length 2\. Then the `x` value is automatically calculated,
		 * either starting at 0 and incremented by 1, or from `pointStart`
		 * and `pointInterval` given in the series options.
		 *
		 *  ```js
		 *     data: [
		 *         [0, 9, 7],
		 *         [1, 10, 4],
		 *         [2, 6, 3]
		 *     ]
		 *  ```
		 *
		 * 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.heatmap.turboThreshold),
		 * this option is not available.
		 *
		 *  ```js
		 *     data: [{
		 *         x: 1,
		 *         y: 3,
		 *         value: 10,
		 *         name: "Point2",
		 *         color: "#00FF00"
		 *     }, {
		 *         x: 1,
		 *         y: 7,
		 *         value: 10,
		 *         name: "Point1",
		 *         color: "#FF00FF"
		 *     }]
		 *  ```
		 *
		 * @sample {highcharts} highcharts/chart/reflow-true/
		 *         Numerical values
		 * @sample {highcharts} highcharts/series/data-array-of-arrays/
		 *         Arrays of numeric x and y
		 * @sample {highcharts} highcharts/series/data-array-of-arrays-datetime/
		 *         Arrays of datetime x and y
		 * @sample {highcharts} highcharts/series/data-array-of-name-value/
		 *         Arrays of point.name and y
		 * @sample {highcharts} highcharts/series/data-array-of-objects/
		 *         Config objects
		 *
		 * @type      {Array<Array<number>|*>}
		 * @extends   series.line.data
		 * @excluding marker
		 * @product   highcharts highmaps
		 * @apioption series.heatmap.data
		 */

		/**
		 * The color of the point. In heat maps the point color is rarely set
		 * explicitly, as we use the color to denote the `value`. Options for
		 * this are set in the [colorAxis](#colorAxis) configuration.
		 *
		 * @type      {Highcharts.ColorString}
		 * @product   highcharts highmaps
		 * @apioption series.heatmap.data.color
		 */

		/**
		 * The value of the point, resulting in a color controled by options
		 * as set in the [colorAxis](#colorAxis) configuration.
		 *
		 * @type      {number}
		 * @product   highcharts highmaps
		 * @apioption series.heatmap.data.value
		 */

		/**
		 * The x value of the point. For datetime axes,
		 * the X value is the timestamp in milliseconds since 1970.
		 *
		 * @type      {number}
		 * @product   highcharts highmaps
		 * @apioption series.heatmap.data.x
		 */

		/**
		 * The y value of the point.
		 *
		 * @type      {number}
		 * @product   highcharts highmaps
		 * @apioption series.heatmap.data.y
		 */

		/**
		 * Point padding for a single point.
		 *
		 * @sample maps/plotoptions/tilemap-pointpadding
		 *         Point padding on tiles
		 *
		 * @type      {number}
		 * @product   highcharts highmaps
		 * @apioption series.heatmap.data.pointPadding
		 */


	}(Highcharts));
	(function () {


	}());
	(function (H) {
		/* *
		 * Tilemaps module
		 *
		 * (c) 2010-2017 Highsoft AS
		 * Author: Øystein Moseng
		 *
		 * License: www.highcharts.com/license
		 */



		var seriesType = H.seriesType,
		    pick = H.pick,
		    // Utility func to get the middle number of 3
		    between = function (x, a, b) {
		        return Math.min(Math.max(a, x), b);
		    },
		    // Utility func to get padding definition from tile size division
		    tilePaddingFromTileSize = function (series, xDiv, yDiv) {
		        var options = series.options;
		        return {
		            xPad: (options.colsize || 1) / -xDiv,
		            yPad: (options.rowsize || 1) / -yDiv
		        };
		    };

		// Map of shape types.
		H.tileShapeTypes = {

		    // Hexagon shape type.
		    hexagon: {
		        alignDataLabel: H.seriesTypes.scatter.prototype.alignDataLabel,
		        getSeriesPadding: function (series) {
		            return tilePaddingFromTileSize(series, 3, 2);
		        },
		        haloPath: function (size) {
		            if (!size) {
		                return [];
		            }
		            var hexagon = this.tileEdges;
		            return [
		                'M', hexagon.x2 - size, hexagon.y1 + size,
		                'L', hexagon.x3 + size, hexagon.y1 + size,
		                hexagon.x4 + size * 1.5, hexagon.y2,
		                hexagon.x3 + size, hexagon.y3 - size,
		                hexagon.x2 - size, hexagon.y3 - size,
		                hexagon.x1 - size * 1.5, hexagon.y2,
		                'Z'
		            ];
		        },
		        translate: function () {
		            var series = this,
		                options = series.options,
		                xAxis = series.xAxis,
		                yAxis = series.yAxis,
		                seriesPointPadding = options.pointPadding || 0,
		                xPad = (options.colsize || 1) / 3,
		                yPad = (options.rowsize || 1) / 2,
		                yShift;

		            series.generatePoints();

		            series.points.forEach(function (point) {
		                var x1 = between(
		                        Math.floor(
		                            xAxis.len -
		                            xAxis.translate(point.x - xPad * 2, 0, 1, 0, 1)
		                        ), -xAxis.len, 2 * xAxis.len
		                    ),
		                    x2 = between(
		                        Math.floor(
		                            xAxis.len -
		                            xAxis.translate(point.x - xPad, 0, 1, 0, 1)
		                        ), -xAxis.len, 2 * xAxis.len
		                    ),
		                    x3 = between(
		                        Math.floor(
		                            xAxis.len -
		                            xAxis.translate(point.x + xPad, 0, 1, 0, 1)
		                        ), -xAxis.len, 2 * xAxis.len
		                    ),
		                    x4 = between(
		                        Math.floor(
		                            xAxis.len -
		                            xAxis.translate(point.x + xPad * 2, 0, 1, 0, 1)
		                        ), -xAxis.len, 2 * xAxis.len
		                    ),
		                    y1 = between(
		                        Math.floor(yAxis.translate(point.y - yPad, 0, 1, 0, 1)),
		                        -yAxis.len,
		                        2 * yAxis.len
		                    ),
		                    y2 = between(
		                        Math.floor(yAxis.translate(point.y, 0, 1, 0, 1)),
		                        -yAxis.len,
		                        2 * yAxis.len
		                    ),
		                    y3 = between(
		                        Math.floor(yAxis.translate(point.y + yPad, 0, 1, 0, 1)),
		                        -yAxis.len,
		                        2 * yAxis.len
		                    ),
		                    pointPadding = pick(point.pointPadding, seriesPointPadding),
		                    // We calculate the point padding of the midpoints to
		                    // preserve the angles of the shape.
		                    midPointPadding = pointPadding *
		                        Math.abs(x2 - x1) / Math.abs(y3 - y2),
		                    xMidPadding = xAxis.reversed ?
		                        -midPointPadding : midPointPadding,
		                    xPointPadding = xAxis.reversed ?
		                        -pointPadding : pointPadding,
		                    yPointPadding = yAxis.reversed ?
		                        -pointPadding : pointPadding;

		                // Shift y-values for every second grid column
		                if (point.x % 2) {
		                    yShift = yShift || Math.round(Math.abs(y3 - y1) / 2) *
		                        // We have to reverse the shift for reversed y-axes
		                        (yAxis.reversed ? -1 : 1);
		                    y1 += yShift;
		                    y2 += yShift;
		                    y3 += yShift;
		                }

		                // Set plotX and plotY for use in K-D-Tree and more
		                point.plotX = point.clientX = (x2 + x3) / 2;
		                point.plotY = y2;

		                // Apply point padding to translated coordinates
		                x1 += xMidPadding + xPointPadding;
		                x2 += xPointPadding;
		                x3 -= xPointPadding;
		                x4 -= xMidPadding + xPointPadding;
		                y1 -= yPointPadding;
		                y3 += yPointPadding;

		                // Store points for halo creation
		                point.tileEdges = {
		                    x1: x1, x2: x2, x3: x3, x4: x4, y1: y1, y2: y2, y3: y3
		                };

		                // Finally set the shape for this point
		                point.shapeType = 'path';
		                point.shapeArgs = {
		                    d: [
		                        'M', x2, y1,
		                        'L', x3, y1,
		                        x4, y2,
		                        x3, y3,
		                        x2, y3,
		                        x1, y2,
		                        'Z'
		                    ]
		                };
		            });

		            series.translateColors();
		        }
		    },


		    // Diamond shape type.
		    diamond: {
		        alignDataLabel: H.seriesTypes.scatter.prototype.alignDataLabel,
		        getSeriesPadding: function (series) {
		            return tilePaddingFromTileSize(series, 2, 2);
		        },
		        haloPath: function (size) {
		            if (!size) {
		                return [];
		            }
		            var diamond = this.tileEdges;
		            return [
		                'M', diamond.x2, diamond.y1 + size,
		                'L', diamond.x3 + size, diamond.y2,
		                diamond.x2, diamond.y3 - size,
		                diamond.x1 - size, diamond.y2,
		                'Z'
		            ];
		        },
		        translate: function () {
		            var series = this,
		                options = series.options,
		                xAxis = series.xAxis,
		                yAxis = series.yAxis,
		                seriesPointPadding = options.pointPadding || 0,
		                xPad = (options.colsize || 1),
		                yPad = (options.rowsize || 1) / 2,
		                yShift;

		            series.generatePoints();

		            series.points.forEach(function (point) {
		                var x1 = between(
		                        Math.round(
		                            xAxis.len -
		                            xAxis.translate(point.x - xPad, 0, 1, 0, 0)
		                        ), -xAxis.len, 2 * xAxis.len
		                    ),
		                    x2 = between(
		                        Math.round(
		                            xAxis.len -
		                            xAxis.translate(point.x, 0, 1, 0, 0)
		                        ), -xAxis.len, 2 * xAxis.len
		                    ),
		                    x3 = between(
		                        Math.round(
		                            xAxis.len -
		                            xAxis.translate(point.x + xPad, 0, 1, 0, 0)
		                        ), -xAxis.len, 2 * xAxis.len
		                    ),
		                    y1 = between(
		                        Math.round(yAxis.translate(point.y - yPad, 0, 1, 0, 0)),
		                        -yAxis.len,
		                        2 * yAxis.len
		                    ),
		                    y2 = between(
		                        Math.round(yAxis.translate(point.y, 0, 1, 0, 0)),
		                        -yAxis.len,
		                        2 * yAxis.len
		                    ),
		                    y3 = between(
		                        Math.round(yAxis.translate(point.y + yPad, 0, 1, 0, 0)),
		                        -yAxis.len,
		                        2 * yAxis.len
		                    ),
		                    pointPadding = pick(point.pointPadding, seriesPointPadding),
		                    // We calculate the point padding of the midpoints to
		                    // preserve the angles of the shape.
		                    midPointPadding = pointPadding *
		                        Math.abs(x2 - x1) / Math.abs(y3 - y2),
		                    xPointPadding = xAxis.reversed ?
		                        -midPointPadding : midPointPadding,
		                    yPointPadding = yAxis.reversed ?
		                        -pointPadding : pointPadding;

		                // Shift y-values for every second grid column
		                // We have to reverse the shift for reversed y-axes
		                if (point.x % 2) {
		                    yShift = Math.abs(y3 - y1) / 2 * (yAxis.reversed ? -1 : 1);
		                    y1 += yShift;
		                    y2 += yShift;
		                    y3 += yShift;
		                }

		                // Set plotX and plotY for use in K-D-Tree and more
		                point.plotX = point.clientX = x2;
		                point.plotY = y2;

		                // Apply point padding to translated coordinates
		                x1 += xPointPadding;
		                x3 -= xPointPadding;
		                y1 -= yPointPadding;
		                y3 += yPointPadding;

		                // Store points for halo creation
		                point.tileEdges = {
		                    x1: x1, x2: x2, x3: x3, y1: y1, y2: y2, y3: y3
		                };

		                // Set this point's shape parameters
		                point.shapeType = 'path';
		                point.shapeArgs = {
		                    d: [
		                        'M', x2, y1,
		                        'L', x3, y2,
		                        x2, y3,
		                        x1, y2,
		                        'Z'
		                    ]
		                };
		            });

		            series.translateColors();
		        }
		    },


		    // Circle shape type.
		    circle: {
		        alignDataLabel: H.seriesTypes.scatter.prototype.alignDataLabel,
		        getSeriesPadding: function (series) {
		            return tilePaddingFromTileSize(series, 2, 2);
		        },
		        haloPath: function (size) {
		            return H.seriesTypes.scatter.prototype.pointClass.prototype.haloPath
		                .call(this,
		                    size + (size && this.radius)
		                );
		        },
		        translate: function () {
		            var series = this,
		                options = series.options,
		                xAxis = series.xAxis,
		                yAxis = series.yAxis,
		                seriesPointPadding = options.pointPadding || 0,
		                yRadius = (options.rowsize || 1) / 2,
		                colsize = (options.colsize || 1),
		                colsizePx,
		                yRadiusPx,
		                xRadiusPx,
		                radius,
		                forceNextRadiusCompute = false;

		            series.generatePoints();

		            series.points.forEach(function (point) {
		                var x = between(
		                        Math.round(
		                            xAxis.len -
		                            xAxis.translate(point.x, 0, 1, 0, 0)
		                        ), -xAxis.len, 2 * xAxis.len
		                    ),
		                    y = between(
		                        Math.round(yAxis.translate(point.y, 0, 1, 0, 0)),
		                        -yAxis.len,
		                        2 * yAxis.len
		                    ),
		                    pointPadding = seriesPointPadding,
		                    hasPerPointPadding = false;

		                // If there is point padding defined on a single point, add it
		                if (point.pointPadding !== undefined) {
		                    pointPadding = point.pointPadding;
		                    hasPerPointPadding = true;
		                    forceNextRadiusCompute = true;
		                }

		                // Find radius if not found already.
		                // Use the smallest one (x vs y) to avoid overlap.
		                // Note that the radius will be recomputed for each series.
		                // Ideal (max) x radius is dependent on y radius:
		                /*
		                                * (circle 2)

		                                        * (circle 3)
		                                        |    yRadiusPx
		                    (circle 1)    *-------|
		                                 colsizePx

		                    The distance between circle 1 and 3 (and circle 2 and 3) is
		                    2r, which is the hypotenuse of the triangle created by
		                    colsizePx and yRadiusPx. If the distance between circle 2
		                    and circle 1 is less than 2r, we use half of that distance
		                    instead (yRadiusPx).
		                */
		                if (!radius || forceNextRadiusCompute) {
		                    colsizePx = Math.abs(
		                        between(
		                            Math.floor(
		                                xAxis.len -
		                                xAxis.translate(point.x + colsize, 0, 1, 0, 0)
		                            ), -xAxis.len, 2 * xAxis.len
		                        ) - x
		                    );
		                    yRadiusPx = Math.abs(
		                        between(
		                            Math.floor(
		                                yAxis.translate(point.y + yRadius, 0, 1, 0, 0)
		                            ), -yAxis.len, 2 * yAxis.len
		                        ) - y
		                    );
		                    xRadiusPx = Math.floor(
		                        Math.sqrt(
		                            (colsizePx * colsizePx + yRadiusPx * yRadiusPx)
		                        ) / 2
		                    );
		                    radius = Math.min(
		                        colsizePx, xRadiusPx, yRadiusPx
		                    ) - pointPadding;

		                    // If we have per point padding we need to always compute
		                    // the radius for this point and the next. If we used to
		                    // have per point padding but don't anymore, don't force
		                    // compute next radius.
		                    if (forceNextRadiusCompute && !hasPerPointPadding) {
		                        forceNextRadiusCompute = false;
		                    }
		                }

		                // Shift y-values for every second grid column.
		                // Note that we always use the optimal y axis radius for this.
		                // Also note: We have to reverse the shift for reversed y-axes.
		                if (point.x % 2) {
		                    y += yRadiusPx * (yAxis.reversed ? -1 : 1);
		                }

		                // Set plotX and plotY for use in K-D-Tree and more
		                point.plotX = point.clientX = x;
		                point.plotY = y;

		                // Save radius for halo
		                point.radius = radius;

		                // Set this point's shape parameters
		                point.shapeType = 'circle';
		                point.shapeArgs = {
		                    x: x,
		                    y: y,
		                    r: radius
		                };
		            });

		            series.translateColors();
		        }
		    },


		    // Square shape type.
		    square: {
		        alignDataLabel: H.seriesTypes.heatmap.prototype.alignDataLabel,
		        translate: H.seriesTypes.heatmap.prototype.translate,
		        getSeriesPadding: function () {
		            return;
		        },
		        haloPath: H.seriesTypes.heatmap.prototype.pointClass.prototype.haloPath
		    }
		};


		// Extension to add pixel padding for series. Uses getSeriesPixelPadding on each
		// series and adds the largest padding required. If no series has this function
		// defined, we add nothing.
		H.wrap(H.Axis.prototype, 'setAxisTranslation', function (proceed) {

		    // We need to run the original func first, so that we know the translation
		    // formula to use for computing the padding
		    proceed.apply(this, Array.prototype.slice.call(arguments, 1));

		    var axis = this,
		        // Find which series' padding to use
		        seriesPadding = axis.series
		            .map(function (series) {
		                return series.getSeriesPixelPadding &&
		                    series.getSeriesPixelPadding(axis);
		            })
		            .reduce(function (a, b) {
		                return (a && a.padding) > (b && b.padding) ? a : b;
		            }, undefined) ||
		            {
		                padding: 0,
		                axisLengthFactor: 1
		            },
		        lengthPadding = Math.round(
		            seriesPadding.padding * seriesPadding.axisLengthFactor
		        );

		    // Don't waste time on this if we're not adding extra padding
		    if (seriesPadding.padding) {
		        // Recompute translation with new axis length now (minus padding)
		        axis.len -= lengthPadding;
		        proceed.apply(axis, Array.prototype.slice.call(arguments, 1));
		        axis.minPixelPadding += seriesPadding.padding;
		        axis.len += lengthPadding;
		    }
		});

		/**
		 * @private
		 * @class
		 * @name Highcharts.seriesTypes.tilemap
		 *
		 * @augments Highcharts.Series
		 */
		seriesType('tilemap', 'heatmap'

		/**
		 * A tilemap series is a type of heatmap where the tile shapes are configurable.
		 *
		 * @sample highcharts/demo/honeycomb-usa/
		 *         Honeycomb tilemap, USA
		 * @sample maps/plotoptions/honeycomb-brazil/
		 *         Honeycomb tilemap, Brazil
		 * @sample maps/plotoptions/honeycomb-china/
		 *         Honeycomb tilemap, China
		 * @sample maps/plotoptions/honeycomb-europe/
		 *         Honeycomb tilemap, Europe
		 * @sample maps/demo/circlemap-africa/
		 *         Circlemap tilemap, Africa
		 * @sample maps/demo/diamondmap
		 *         Diamondmap tilemap
		 *
		 * @extends      plotOptions.heatmap
		 * @since        6.0.0
		 * @excluding    joinBy, shadow, allAreas, mapData, data
		 * @product      highcharts highmaps
		 * @optionparent plotOptions.tilemap
		 */
		, { // Default options

		    states: {

		        hover: {

		            halo: {

		                enabled: true,

		                size: 2,

		                opacity: 0.5,

		                attributes: {

		                    zIndex: 3
		                }
		            }
		        }
		    },

		    /**
		     * The padding between points in the tilemap.
		     *
		     * @sample maps/plotoptions/tilemap-pointpadding
		     *         Point padding on tiles
		     */
		    pointPadding: 2,

		    /**
		     * The column size - how many X axis units each column in the tilemap
		     * should span. Works as in [Heatmaps](#plotOptions.heatmap.colsize).
		     *
		     * @sample {highcharts} maps/demo/heatmap/
		     *         One day
		     * @sample {highmaps} maps/demo/heatmap/
		     *         One day
		     *
		     * @type      {number}
		     * @default   1
		     * @product   highcharts highmaps
		     * @apioption plotOptions.tilemap.colsize
		     */

		    /**
		     * The row size - how many Y axis units each tilemap row should span.
		     * Analogous to [colsize](#plotOptions.tilemap.colsize).
		     *
		     * @sample {highcharts} maps/demo/heatmap/
		     *         1 by default
		     * @sample {highmaps} maps/demo/heatmap/
		     *         1 by default
		     *
		     * @type      {number}
		     * @default   1
		     * @product   highcharts highmaps
		     * @apioption plotOptions.tilemap.rowsize
		     */

		    /**
		     * The shape of the tiles in the tilemap. Possible values are `hexagon`,
		     * `circle`, `diamond`, and `square`.
		     *
		     * @sample maps/demo/circlemap-africa
		     *         Circular tile shapes
		     * @sample maps/demo/diamondmap
		     *         Diamond tile shapes
		     *
		     * @validvalue ["circle", "diamond", "hexagon", "square"]
		     */
		    tileShape: 'hexagon'

		}, { // Prototype functions

		    // Set tile shape object on series
		    setOptions: function () {
		        // Call original function
		        var ret = H.seriesTypes.heatmap.prototype.setOptions.apply(this,
		            Array.prototype.slice.call(arguments)
		        );

		        this.tileShape = H.tileShapeTypes[ret.tileShape];
		        return ret;
		    },

		    // Use the shape's defined data label alignment function
		    alignDataLabel: function () {
		        return this.tileShape.alignDataLabel.apply(this,
		            Array.prototype.slice.call(arguments)
		        );
		    },

		    // Get metrics for padding of axis for this series
		    getSeriesPixelPadding: function (axis) {
		        var isX = axis.isXAxis,
		            padding = this.tileShape.getSeriesPadding(this),
		            coord1,
		            coord2;

		        // If the shape type does not require padding, return no-op padding
		        if (!padding) {
		            return {
		                padding: 0,
		                axisLengthFactor: 1
		            };
		        }

		        // Use translate to compute how far outside the points we
		        // draw, and use this difference as padding.
		        coord1 = Math.round(
		            axis.translate(
		                isX ?
		                    padding.xPad * 2 :
		                    padding.yPad,
		                0, 1, 0, 1
		            )
		        );
		        coord2 = Math.round(
		            axis.translate(
		                isX ? padding.xPad : 0,
		                0, 1, 0, 1
		            )
		        );

		        return {
		            padding: Math.abs(coord1 - coord2) || 0,

		            // Offset the yAxis length to compensate for shift.
		            // Setting the length factor to 2 would add the same margin to max
		            // as min. Now we only add a slight bit of the min margin to max, as
		            // we don't actually draw outside the max bounds. For the xAxis we
		            // draw outside on both sides so we add the same margin to min and
		            // max.
		            axisLengthFactor: isX ? 2 : 1.1
		        };
		    },

		    // Use translate from tileShape
		    translate: function () {
		        return this.tileShape.translate.apply(this,
		            Array.prototype.slice.call(arguments)
		        );
		    }

		}, H.extend({

		    /**
		     * @private
		     * @function Highcharts.Point#haloPath
		     *
		     * @return {Highcharts.SVGPathArray}
		     */
		    haloPath: function () {
		        return this.series.tileShape.haloPath.apply(this,
		            Array.prototype.slice.call(arguments)
		        );
		    }
		}, H.colorPointMixin));

		/**
		 * A `tilemap` series. If the [type](#series.tilemap.type) option is
		 * not specified, it is inherited from [chart.type](#chart.type).
		 *
		 * @extends   series,plotOptions.tilemap
		 * @excluding allAreas, dataParser, dataURL, joinBy, mapData, marker,
		 *            pointRange, shadow, stack
		 * @product   highcharts highmaps
		 * @apioption series.tilemap
		 */

		/**
		 * An array of data points for the series. For the `tilemap` series
		 * type, points can be given in the following ways:
		 *
		 * 1. An array of arrays with 3 or 2 values. In this case, the values correspond
		 *    to `x,y,value`. If the first value is a string, it is applied as the name
		 *    of the point, and the `x` value is inferred. The `x` value can also be
		 *    omitted, in which case the inner arrays should be of length 2\. Then the
		 *    `x` value is automatically calculated, either starting at 0 and
		 *    incremented by 1, or from `pointStart` and `pointInterval` given in the
		 *    series options.
		 *    ```js
		 *    data: [
		 *        [0, 9, 7],
		 *        [1, 10, 4],
		 *        [2, 6, 3]
		 *    ]
		 *    ```
		 *
		 * 2. An array of objects with named values. The objects are point configuration
		 *    objects as seen below. If the total number of data points exceeds the
		 *    series' [turboThreshold](#series.tilemap.turboThreshold), this option is
		 *    not available.
		 *    ```js
		 *    data: [{
		 *        x: 1,
		 *        y: 3,
		 *        value: 10,
		 *        name: "Point2",
		 *        color: "#00FF00"
		 *    }, {
		 *        x: 1,
		 *        y: 7,
		 *        value: 10,
		 *        name: "Point1",
		 *        color: "#FF00FF"
		 *    }]
		 *    ```
		 *
		 * Note that for some [tileShapes](#plotOptions.tilemap.tileShape) the grid
		 * coordinates are offset.
		 *
		 * @sample maps/series/tilemap-gridoffset
		 *         Offset grid coordinates
		 * @sample {highcharts} highcharts/series/data-array-of-arrays/
		 *         Arrays of numeric x and y
		 * @sample {highcharts} highcharts/series/data-array-of-arrays-datetime/
		 *         Arrays of datetime x and y
		 * @sample {highcharts} highcharts/series/data-array-of-name-value/
		 *         Arrays of point.name and y
		 * @sample {highcharts} highcharts/series/data-array-of-objects/
		 *         Config objects
		 *
		 * @type      {Array<Array<(number|string),number>|Array<(number|string),number,number>|*>}
		 * @extends   series.heatmap.data
		 * @excluding marker
		 * @product   highcharts highmaps
		 * @apioption series.tilemap.data
		 */

		/**
		 * The color of the point. In tilemaps the point color is rarely set
		 * explicitly, as we use the color to denote the `value`. Options for
		 * this are set in the [colorAxis](#colorAxis) configuration.
		 *
		 * @type      {Highcharts.ColorString}
		 * @product   highcharts highmaps
		 * @apioption series.tilemap.data.color
		 */

		/**
		 * The x coordinate of the point.
		 *
		 * Note that for some [tileShapes](#plotOptions.tilemap.tileShape) the grid
		 * coordinates are offset.
		 *
		 * @sample maps/series/tilemap-gridoffset
		 *         Offset grid coordinates
		 *
		 * @type      {number}
		 * @product   highcharts highmaps
		 * @apioption series.tilemap.data.x
		 */

		/**
		 * The y coordinate of the point.
		 *
		 * Note that for some [tileShapes](#plotOptions.tilemap.tileShape) the grid
		 * coordinates are offset.
		 *
		 * @sample maps/series/tilemap-gridoffset
		 *         Offset grid coordinates
		 *
		 * @type      {number}
		 * @product   highcharts highmaps
		 * @apioption series.tilemap.data.y
		 */

	}(Highcharts));
	(function () {


	}());
	var derivedSeriesMixin = (function (H) {


		var Series = H.Series,
		    addEvent = H.addEvent,
		    noop = H.noop;


		/* ************************************************************************** *
		 *
		 * DERIVED SERIES MIXIN
		 *
		 * ************************************************************************** */

		/**
		 * Provides methods for auto setting/updating series data based on the based
		 * series data.
		 *
		 * @private
		 * @mixin derivedSeriesMixin
		 */
		var derivedSeriesMixin = {
		    /**
		     * Initialise series
		     *
		     * @private
		     * @function derivedSeriesMixin.init
		     */
		    init: function () {
		        Series.prototype.init.apply(this, arguments);

		        this.initialised = false;
		        this.baseSeries = null;
		        this.eventRemovers = [];

		        this.addEvents();
		    },

		    /**
		     * Method to be implemented - inside the method the series has already
		     * access to the base series via m `this.baseSeries` and the bases data is
		     * initialised. It should return data in the format accepted by
		     * `Series.setData()` method
		     *
		     * @private
		     * @function derivedSeriesMixin.setDerivedData
		     *
		     * @return {Array<*>}
		     *         An array of data
		     */
		    setDerivedData: noop,

		    /**
		     * Sets base series for the series
		     *
		     * @private
		     * @function derivedSeriesMixin.setBaseSeries
		     */
		    setBaseSeries: function () {
		        var chart = this.chart,
		            baseSeriesOptions = this.options.baseSeries,
		            baseSeries =
		        baseSeriesOptions &&
		        (chart.series[baseSeriesOptions] || chart.get(baseSeriesOptions));

		        this.baseSeries = baseSeries || null;
		    },

		    /**
		     * Adds events for the series
		     *
		     * @private
		     * @function derivedSeriesMixin.addEvents
		     */
		    addEvents: function () {
		        var derivedSeries = this,
		            chartSeriesLinked;

		        chartSeriesLinked = addEvent(
		            this.chart,
		            'afterLinkSeries',
		            function () {
		                derivedSeries.setBaseSeries();

		                if (derivedSeries.baseSeries && !derivedSeries.initialised) {
		                    derivedSeries.setDerivedData();
		                    derivedSeries.addBaseSeriesEvents();
		                    derivedSeries.initialised = true;
		                }
		            }
		        );

		        this.eventRemovers.push(
		            chartSeriesLinked
		        );
		    },

		    /**
		     * Adds events to the base series - it required for recalculating the data
		     * in the series if the base series is updated / removed / etc.
		     *
		     * @private
		     * @function derivedSeriesMixin.addBaseSeriesEvents
		     */
		    addBaseSeriesEvents: function () {
		        var derivedSeries = this,
		            updatedDataRemover,
		            destroyRemover;

		        updatedDataRemover = addEvent(
		            derivedSeries.baseSeries,
		            'updatedData',
		            function () {
		                derivedSeries.setDerivedData();
		            }
		        );

		        destroyRemover = addEvent(
		            derivedSeries.baseSeries,
		            'destroy',
		            function () {
		                derivedSeries.baseSeries = null;
		                derivedSeries.initialised = false;
		            }
		        );

		        derivedSeries.eventRemovers.push(
		        updatedDataRemover,
		        destroyRemover
		      );
		    },

		    /**
		     * Destroys the series
		     *
		     * @private
		     * @function derivedSeriesMixin.destroy
		     */
		    destroy: function () {
		        this.eventRemovers.forEach(function (remover) {
		            remover();
		        });

		        Series.prototype.destroy.apply(this, arguments);
		    }
		};


		return derivedSeriesMixin;
	}(Highcharts));
	(function (H, derivedSeriesMixin) {
		/* *
		 * (c) 2010-2018 Highsoft AS
		 *
		 * Author: Sebastian Domas
		 *
		 * License: www.highcharts.com/license
		 */



		var seriesType = H.seriesType,
		    correctFloat = H.correctFloat,
		    isNumber = H.isNumber,
		    merge = H.merge;


		/* ************************************************************************** *
		 *  BELL CURVE                                                                *
		 * ************************************************************************** */

		function mean(data) {
		    var length = data.length,
		        sum = data.reduce(function (sum, value) {
		            return (sum += value);
		        }, 0);

		    return length > 0 && sum / length;
		}

		function standardDeviation(data, average) {
		    var len = data.length,
		        sum;

		    average = isNumber(average) ? average : mean(data);

		    sum = data.reduce(function (sum, value) {
		        var diff = value - average;
		        return (sum += diff * diff);
		    }, 0);

		    return len > 1 && Math.sqrt(sum / (len - 1));
		}

		function normalDensity(x, mean, standardDeviation) {
		    var translation = x - mean;
		    return Math.exp(
		        -(translation * translation) /
		        (2 * standardDeviation * standardDeviation)
		    ) / (standardDeviation * Math.sqrt(2 * Math.PI));
		}


		/**
		 * Bell curve class
		 *
		 * @private
		 * @class
		 * @name Highcharts.seriesTypes.bellcurve
		 *
		 * @augments Highcharts.Series
		 *
		 * @mixes DerivedSeriesMixin
		 */
		seriesType('bellcurve', 'areaspline'

		/**
		 * A bell curve is an areaspline series which represents the probability density
		 * function of the normal distribution. It calculates mean and standard
		 * deviation of the base series data and plots the curve according to the
		 * calculated parameters.
		 *
		 * @sample {highcharts} highcharts/demo/bellcurve/
		 *         Bell curve
		 *
		 * @extends      plotOptions.areaspline
		 * @since        6.0.0
		 * @product      highcharts
		 * @excluding    boostThreshold, connectNulls, stacking, pointInterval,
		 *               pointIntervalUnit
		 * @optionparent plotOptions.bellcurve
		 */
		, {
		   /**
		    * This option allows to define the length of the bell curve. A unit of the
		    * length of the bell curve is standard deviation.
		    *
		    * @sample highcharts/plotoptions/bellcurve-intervals-pointsininterval
		    *         Intervals and points in interval
		    */
		    intervals: 3,

		   /**
		    * Defines how many points should be plotted within 1 interval. See
		    * `plotOptions.bellcurve.intervals`.
		    *
		    * @sample highcharts/plotoptions/bellcurve-intervals-pointsininterval
		    *         Intervals and points in interval
		    */
		    pointsInInterval: 3,

		    marker: {
		        enabled: false
		    }

		}, merge(derivedSeriesMixin, {
		    setMean: function () {
		        this.mean = correctFloat(mean(this.baseSeries.yData));
		    },

		    setStandardDeviation: function () {
		        this.standardDeviation = correctFloat(
		            standardDeviation(this.baseSeries.yData, this.mean)
		        );
		    },

		    setDerivedData: function () {
		        if (this.baseSeries.yData.length > 1) {
		            this.setMean();
		            this.setStandardDeviation();
		            this.setData(
		                this.derivedData(this.mean, this.standardDeviation), false
		            );
		        }
		    },

		    derivedData: function (mean, standardDeviation) {
		        var intervals = this.options.intervals,
		            pointsInInterval = this.options.pointsInInterval,
		            x = mean - intervals * standardDeviation,
		            stop = intervals * pointsInInterval * 2 + 1,
		            increment = standardDeviation / pointsInInterval,
		            data = [],
		            i;

		        for (i = 0; i < stop; i++) {
		            data.push([x, normalDensity(x, mean, standardDeviation)]);
		            x += increment;
		        }

		        return data;
		    }
		}));


		/**
		 * A `bellcurve` series. If the [type](#series.bellcurve.type) option is not
		 * specified, it is inherited from [chart.type](#chart.type).
		 *
		 * For options that apply to multiple series, it is recommended to add
		 * them to the [plotOptions.series](#plotOptions.series) options structure.
		 * To apply to all series of this specific type, apply it to
		 * [plotOptions.bellcurve](#plotOptions.bellcurve).
		 *
		 * @extends   series,plotOptions.bellcurve
		 * @since     6.0.0
		 * @product   highcharts
		 * @excluding dataParser, dataURL, data
		 * @apioption series.bellcurve
		 */

		/**
		 * An integer identifying the index to use for the base series, or a string
		 * representing the id of the series.
		 *
		 * @type      {number|string}
		 * @apioption series.bellcurve.baseSeries
		 */

	}(Highcharts, derivedSeriesMixin));
	(function (H) {
		/**
		 * (c) 2009-2018 Torstein Honsi
		 *
		 * License: www.highcharts.com/license
		 */



		var addEvent = H.addEvent,
		    pick = H.pick,
		    wrap = H.wrap,
		    extend = H.extend,
		    isArray = H.isArray,
		    fireEvent = H.fireEvent,
		    Axis = H.Axis,
		    Series = H.Series;

		function stripArguments() {
		    return Array.prototype.slice.call(arguments, 1);
		}

		extend(Axis.prototype, {
		    isInBreak: function (brk, val) {
		        var ret,
		            repeat = brk.repeat || Infinity,
		            from = brk.from,
		            length = brk.to - brk.from,
		            test = (
		                val >= from ?
		                    (val - from) % repeat :
		                    repeat - ((from - val) % repeat)
		            );

		        if (!brk.inclusive) {
		            ret = test < length && test !== 0;
		        } else {
		            ret = test <= length;
		        }
		        return ret;
		    },

		    isInAnyBreak: function (val, testKeep) {

		        var breaks = this.options.breaks,
		            i = breaks && breaks.length,
		            inbrk,
		            keep,
		            ret;


		        if (i) {

		            while (i--) {
		                if (this.isInBreak(breaks[i], val)) {
		                    inbrk = true;
		                    if (!keep) {
		                        keep = pick(
		                            breaks[i].showPoints,
		                            this.isXAxis ? false : true
		                        );
		                    }
		                }
		            }

		            if (inbrk && testKeep) {
		                ret = inbrk && !keep;
		            } else {
		                ret = inbrk;
		            }
		        }
		        return ret;
		    }
		});

		addEvent(Axis, 'afterInit', function () {
		    if (typeof this.setBreaks === 'function') {
		        this.setBreaks(this.options.breaks, false);
		    }
		});

		addEvent(Axis, 'afterSetTickPositions', function () {
		    if (this.isBroken) {
		        var axis = this,
		            tickPositions = this.tickPositions,
		            info = this.tickPositions.info,
		            newPositions = [],
		            i;

		        for (i = 0; i < tickPositions.length; i++) {
		            if (!axis.isInAnyBreak(tickPositions[i])) {
		                newPositions.push(tickPositions[i]);
		            }
		        }

		        this.tickPositions = newPositions;
		        this.tickPositions.info = info;
		    }
		});

		// Force Axis to be not-ordinal when breaks are defined
		addEvent(Axis, 'afterSetOptions', function () {
		    if (this.isBroken) {
		        this.options.ordinal = false;
		    }
		});

		/**
		 * Dynamically set or unset breaks in an axis. This function in lighter than
		 * usin Axis.update, and it also preserves animation.
		 *
		 * @private
		 * @function Highcharts.Axis#setBreaks
		 *
		 * @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,
		        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;
		    }

		    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;
		            }
		        }
		        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,
		            newMax,
		            redraw,
		            animation,
		            eventArguments
		        ) {
		            // If trying to set extremes inside a break, extend it to before and
		            // after the break ( #3857 )
		            if (this.isBroken) {
		                while (this.isInAnyBreak(newMin)) {
		                    newMin -= this.closestPointRange;
		                }
		                while (this.isInAnyBreak(newMax)) {
		                    newMax -= this.closestPointRange;
		                }
		            }
		            Axis.prototype.setExtremes.call(
		                this,
		                newMin,
		                newMax,
		                redraw,
		                animation,
		                eventArguments
		            );
		        };

		        axis.setAxisTranslation = function (saveOld) {
		            Axis.prototype.setAxisTranslation.call(this, saveOld);

		            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)
		                breaks.forEach(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
		                breaks.forEach(function (brk) {
		                    start = brk.from;
		                    repeat = brk.repeat || Infinity;

		                    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
		                        });
		                    }
		                });

		                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;

		                breakArrayT.forEach(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);
		                    }
		                });

		                axis.breakArray = breakArray;

		                // Used with staticScale, and below, the actual axis length when
		                // breaks are substracted.
		                axis.unitLength = max - min - length + pointRangePadding;

		                fireEvent(axis, 'afterBreaks');

		                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;
		                }

		                axis.min = min;
		                axis.max = max;
		            }
		        };
		    }

		    if (pick(redraw, true)) {
		        this.chart.redraw();
		    }
		};

		wrap(Series.prototype, 'generatePoints', function (proceed) {

		    proceed.apply(this, stripArguments(arguments));

		    var series = this,
		        xAxis = series.xAxis,
		        yAxis = series.yAxis,
		        points = series.points,
		        point,
		        i = points.length,
		        connectNulls = series.options.connectNulls,
		        nullGap;


		    if (xAxis && yAxis && (xAxis.options.breaks || yAxis.options.breaks)) {
		        while (i--) {
		            point = points[i];

		            // Respect nulls inside the break (#4275)
		            nullGap = point.y === null && connectNulls === false;
		            if (
		                !nullGap &&
		                (
		                    xAxis.isInAnyBreak(point.x, true) ||
		                    yAxis.isInAnyBreak(point.y, true)
		                )
		            ) {
		                points.splice(i, 1);
		                if (this.data[i]) {
		                    // Removes the graphics for this point if they exist
		                    this.data[i].destroyElements();
		                }
		            }
		        }
		    }

		});

		function drawPointsWrapped(proceed) {
		    proceed.apply(this);
		    this.drawBreaks(this.xAxis, ['x']);
		    this.drawBreaks(this.yAxis, pick(this.pointArrayMap, ['y']));
		}

		H.Series.prototype.drawBreaks = function (axis, keys) {
		    var series = this,
		        points = series.points,
		        breaks,
		        threshold,
		        eventName,
		        y;

		    if (!axis) {
		        return; // #5950
		    }

		    keys.forEach(function (key) {
		        breaks = axis.breakArray || [];
		        threshold = axis.isXAxis ?
		            axis.min :
		            pick(series.options.threshold, axis.min);
		        points.forEach(function (point) {
		            y = pick(point['stack' + key.toUpperCase()], point[key]);
		            breaks.forEach(function (brk) {
		                eventName = false;

		                if (
		                    (threshold < brk.from && y > brk.to) ||
		                    (threshold > brk.from && y < brk.from)
		                ) {
		                    eventName = 'pointBreak';

		                } else if (
		                    (threshold < brk.from && y > brk.from && y < brk.to) ||
		                    (threshold > brk.from && y > brk.to && y < brk.from)
		                ) {
		                    eventName = 'pointInBreak';
		                }
		                if (eventName) {
		                    fireEvent(axis, eventName, { point: point, brk: brk });
		                }
		            });
		        });
		    });
		};


		/**
		 * Extend getGraphPath by identifying gaps in the data so that we can draw a gap
		 * in the line or area. This was moved from ordinal axis module to broken axis
		 * module as of #5045.
		 *
		 * @private
		 * @function Highcharts.Series#gappedPath
		 */
		H.Series.prototype.gappedPath = function () {
		    var currentDataGrouping = this.currentDataGrouping,
		        groupingSize = currentDataGrouping && currentDataGrouping.totalRange,
		        gapSize = this.options.gapSize,
		        points = this.points.slice(),
		        i = points.length - 1,
		        yAxis = this.yAxis,
		        xRange,
		        stack;

		    /**
		     * Defines when to display a gap in the graph, together with the
		     * [gapUnit](plotOptions.series.gapUnit) option.
		     *
		     * In case when `dataGrouping` is enabled, points can be grouped into a
		     * larger time span. This can make the grouped points to have a greater
		     * distance than the absolute value of `gapSize` property, which will result
		     * in disappearing graph completely. To prevent this situation the mentioned
		     * distance between grouped points is used instead of previously defined
		     * `gapSize`.
		     *
		     * In practice, this option is most often used to visualize gaps in
		     * time series. In a stock chart, intraday data is available for daytime
		     * hours, while gaps will appear in nights and weekends.
		     *
		     * @see [gapUnit](plotOptions.series.gapUnit)
		     * @see [xAxis.breaks](#xAxis.breaks)
		     *
		     * @sample {highstock} stock/plotoptions/series-gapsize/
		     *         Setting the gap size to 2 introduces gaps for weekends in daily
		     *         datasets.
		     *
		     * @type      {number}
		     * @default   0
		     * @product   highstock
		     * @apioption plotOptions.series.gapSize
		     */

		    /**
		     * Together with [gapSize](plotOptions.series.gapSize), this option defines
		     * where to draw gaps in the graph.
		     *
		     * When the `gapUnit` is `relative` (default), a gap size of 5 means
		     * that if the distance between two points is greater than five times
		     * that of the two closest points, the graph will be broken.
		     *
		     * When the `gapUnit` is `value`, the gap is based on absolute axis values,
		     * which on a datetime axis is milliseconds. This also applies to the
		     * navigator series that inherits gap options from the base series.
		     *
		     * @see [gapSize](plotOptions.series.gapSize)
		     *
		     * @type       {string}
		     * @default    relative
		     * @since      5.0.13
		     * @product    highstock
		     * @validvalue ["relative", "value"]
		     * @apioption  plotOptions.series.gapUnit
		     */

		    if (gapSize && i > 0) { // #5008

		        // Gap unit is relative
		        if (this.options.gapUnit !== 'value') {
		            gapSize *= this.closestPointRange;
		        }

		        // Setting a new gapSize in case dataGrouping is enabled (#7686)
		        if (groupingSize && groupingSize > gapSize) {
		            gapSize = groupingSize;
		        }

		        // extension for ordinal breaks
		        while (i--) {
		            if (points[i + 1].x - points[i].x > gapSize) {
		                xRange = (points[i].x + points[i + 1].x) / 2;

		                points.splice( // insert after this one
		                    i + 1,
		                    0,
		                    {
		                        isNull: true,
		                        x: xRange
		                    }
		                );

		                // For stacked chart generate empty stack items, #6546
		                if (this.options.stacking) {
		                    stack = yAxis.stacks[this.stackKey][xRange] =
		                        new H.StackItem(
		                            yAxis,
		                            yAxis.options.stackLabels,
		                            false,
		                            xRange,
		                            this.stack
		                        );
		                    stack.total = 0;
		                }
		            }
		        }
		    }

		    // Call base method
		    return this.getGraphPath(points);
		};

		wrap(H.seriesTypes.column.prototype, 'drawPoints', drawPointsWrapped);
		wrap(H.Series.prototype, 'drawPoints', drawPointsWrapped);

	}(Highcharts));
	(function (H) {
		/* *
		 * (c) 2010-2018 Kacper Madej
		 *
		 * License: www.highcharts.com/license
		 */



		var pick = H.pick,
		    isNumber = H.isNumber,
		    relativeLength = H.relativeLength,
		    seriesType = H.seriesType,
		    columnProto = H.seriesTypes.column.prototype;

		/**
		 * The bullet series type.
		 *
		 * @private
		 * @class
		 * @name Highcharts.seriesTypes.bullet
		 *
		 * @augments Highcharts.Series
		 */
		seriesType('bullet', 'column'

		/**
		 * A bullet graph is a variation of a bar graph. The bullet graph features a
		 * single measure, compares it to a target, and displays it in the context of
		 * qualitative ranges of performance that could be set using
		 * [plotBands](#yAxis.plotBands) on [yAxis](#yAxis).
		 *
		 * @sample {highcharts} highcharts/demo/bullet-graph/
		 *         Bullet graph
		 *
		 * @extends      plotOptions.column
		 * @since        6.0.0
		 * @product      highcharts
		 * @excluding    allAreas, boostThreshold, colorAxis, compare, compareBase
		 * @optionparent plotOptions.bullet
		 */
		, {
		    /**
		     * All options related with look and positiong of targets.
		     *
		     * @since 6.0.0
		     */
		    targetOptions: {
		        /**
		         * The width of the rectangle representing the target. Could be set
		         * as a pixel value or as a percentage of a column width.
		         *
		         * @type  {number|string}
		         * @since 6.0.0
		         */
		        width: '140%',

		        /**
		         * The height of the rectangle representing the target.
		         *
		         * @since 6.0.0
		         */
		        height: 3,

		        /**
		         * The border color of the rectangle representing the target. When
		         * not set, the  point's border color is used.
		         *
		         * In styled mode, use class `highcharts-bullet-target` instead.
		         *
		         * @type      {Highcharts.ColorString}
		         * @since     6.0.0
		         * @product   highcharts
		         * @apioption plotOptions.bullet.targetOptions.borderColor
		         */

		        /**
		         * The color of the rectangle representing the target. When not set,
		         * point's color (if set in point's options -
		         * [`color`](#series.bullet.data.color)) or zone of the target value
		         * (if [`zones`](#plotOptions.bullet.zones) or
		         * [`negativeColor`](#plotOptions.bullet.negativeColor) are set)
		         * or the same color as the point has is used.
		         *
		         * In styled mode, use class `highcharts-bullet-target` instead.
		         *
		         * @type      {Highcharts.ColorString|Highcharts.GradientColorObject}
		         * @since     6.0.0
		         * @product   highcharts
		         * @apioption plotOptions.bullet.targetOptions.color
		         */

		        /**
		         * The border width of the rectangle representing the target.
		         *
		         * In styled mode, use class `highcharts-bullet-target` instead.
		         *
		         * @since   6.0.0
		         */
		        borderWidth: 0
		    },

		    tooltip: {
		        pointFormat: '<span style="color:{series.color}">\u25CF</span>' +
		            ' {series.name}: <b>{point.y}</b>. Target: <b>{point.target}' +
		            '</b><br/>'
		    }
		}, {
		    pointArrayMap: ['y', 'target'],
		    parallelArrays: ['x', 'y', 'target'],

		    /**
		     * Draws the targets. For inverted chart, the `series.group` is rotated, so
		     * the same coordinates apply. This method is based on column series
		     * drawPoints function.
		     *
		     * @ignore
		     * @function Highcharts.Series#drawPoints
		     */
		    drawPoints: function () {
		        var series = this,
		            chart = series.chart,
		            options = series.options,
		            animationLimit = options.animationLimit || 250;

		        columnProto.drawPoints.apply(this);

		        series.points.forEach(function (point) {
		            var pointOptions = point.options,
		                shapeArgs,
		                targetGraphic = point.targetGraphic,
		                targetShapeArgs,
		                targetVal = point.target,
		                pointVal = point.y,
		                width,
		                height,
		                targetOptions,
		                y;

		            if (isNumber(targetVal) && targetVal !== null) {
		                targetOptions = H.merge(
		                    options.targetOptions,
		                    pointOptions.targetOptions
		                );
		                height = targetOptions.height;

		                shapeArgs = point.shapeArgs;
		                width = relativeLength(
		                    targetOptions.width,
		                    shapeArgs.width
		                );
		                y = series.yAxis.translate(
		                        targetVal,
		                        false,
		                        true,
		                        false,
		                        true
		                    ) - targetOptions.height / 2 - 0.5;

		                targetShapeArgs = series.crispCol.apply({
		                    // Use fake series object to set borderWidth of target
		                    chart: chart,
		                    borderWidth: targetOptions.borderWidth,
		                    options: {
		                        crisp: options.crisp
		                    }
		                }, [
		                    shapeArgs.x + shapeArgs.width / 2 - width / 2,
		                    y,
		                    width,
		                    height
		                ]);

		                if (targetGraphic) {
		                    // Update
		                    targetGraphic[
		                        chart.pointCount < animationLimit ?
		                            'animate' :
		                            'attr'
		                    ](targetShapeArgs);

		                    // Add or remove tooltip reference
		                    if (isNumber(pointVal) && pointVal !== null) {
		                        targetGraphic.element.point = point;
		                    } else {
		                        targetGraphic.element.point = undefined;
		                    }
		                } else {
		                    point.targetGraphic = targetGraphic = chart.renderer
		                        .rect()
		                        .attr(targetShapeArgs)
		                        .add(series.group);
		                }

		                // Presentational
		                if (!chart.styledMode) {
		                    targetGraphic.attr({
		                        fill: pick(
		                            targetOptions.color,
		                            pointOptions.color,
		                            (series.zones.length && (point.getZone.call({
		                                series: series,
		                                x: point.x,
		                                y: targetVal,
		                                options: {}
		                            }).color || series.color)) || undefined,
		                            point.color,
		                            series.color
		                        ),
		                        stroke: pick(
		                            targetOptions.borderColor,
		                            point.borderColor,
		                            series.options.borderColor
		                        ),
		                        'stroke-width': targetOptions.borderWidth
		                    });
		                }

		                // Add tooltip reference
		                if (isNumber(pointVal) && pointVal !== null) {
		                    targetGraphic.element.point = point;
		                }

		                targetGraphic.addClass(point.getClassName() +
		                    ' highcharts-bullet-target', true);
		            } else if (targetGraphic) {
		                point.targetGraphic = targetGraphic.destroy(); // #1269
		            }
		        });
		    },

		    /**
		     * Includes target values to extend extremes from y values.
		     *
		     * @ignore
		     * @function Highcharts.Series#getExtremes
		     */
		    getExtremes: function (yData) {
		        var series = this,
		            targetData = series.targetData,
		            yMax,
		            yMin;

		        columnProto.getExtremes.call(this, yData);

		        if (targetData && targetData.length) {
		            yMax = series.dataMax;
		            yMin = series.dataMin;
		            columnProto.getExtremes.call(this, targetData);
		            series.dataMax = Math.max(series.dataMax, yMax);
		            series.dataMin = Math.min(series.dataMin, yMin);
		        }
		    }
		}, /** @lends Highcharts.seriesTypes.ohlc.prototype.pointClass.prototype */ {

		    /**
		     * Destroys target graphic.
		     *
		     * @private
		     * @function
		     */
		    destroy: function () {
		        if (this.targetGraphic) {
		            this.targetGraphic = this.targetGraphic.destroy();
		        }
		        columnProto.pointClass.prototype.destroy.apply(this, arguments);
		    }
		});


		/**
		 * A `bullet` series. If the [type](#series.bullet.type) option is not
		 * specified, it is inherited from [chart.type](#chart.type).
		 *
		 * @extends   series,plotOptions.bullet
		 * @since     6.0.0
		 * @product   highcharts
		 * @excluding dataParser, dataURL, marker
		 * @apioption series.bullet
		 */

		/**
		 * An array of data points for the series. For the `bullet` series type,
		 * points can be given in the following ways:
		 *
		 * 1. An array of arrays with 3 or 2 values. In this case, the values correspond
		 *    to `x,y,target`. If the first value is a string, it is applied as the name
		 *    of the point, and the `x` value is inferred. The `x` value can also be
		 *    omitted, in which case the inner arrays should be of length 2\. Then the
		 *    `x` value is automatically calculated, either starting at 0 and
		 *    incremented by 1, or from `pointStart` and `pointInterval` given in the
		 *    series options.
		 *    ```js
		 *    data: [
		 *        [0, 40, 75],
		 *        [1, 50, 50],
		 *        [2, 60, 40]
		 *    ]
		 *    ```
		 *
		 * 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.bullet.turboThreshold), this option is not
		 *    available.
		 *    ```js
		 *    data: [{
		 *        x: 0,
		 *        y: 40,
		 *        target: 75,
		 *        name: "Point1",
		 *        color: "#00FF00"
		 *    }, {
		 *         x: 1,
		 *        y: 60,
		 *        target: 40,
		 *        name: "Point2",
		 *        color: "#FF00FF"
		 *    }]
		 *    ```
		 *
		 * @type      {Array<Array<(number|string),number>|Array<(number|string),number,number>|*>}
		 * @extends   series.column.data
		 * @since     6.0.0
		 * @product   highcharts
		 * @apioption series.bullet.data
		 */

		/**
		 * The target value of a point.
		 *
		 * @type      {number}
		 * @since     6.0.0
		 * @product   highcharts
		 * @apioption series.bullet.data.target
		 */

		/**
		 * Individual target options for each point.
		 *
		 * @extends   plotOptions.bullet.targetOptions
		 * @product   highcharts
		 * @apioption series.bullet.data.targetOptions
		 */

		 /**
		 * @product   highcharts
		 * @excluding halo, lineWidth, lineWidthPlus, marker
		 * @apioption series.bullet.states.hover
		 */

		/**
		 * @product   highcharts
		 * @excluding halo, lineWidth, lineWidthPlus, marker
		 * @apioption series.bullet.states.select
		 */

	}(Highcharts));
	(function (H) {
		/* *
		 * (c) 2010-2017 Christer Vasseng, Torstein Honsi
		 *
		 * License: www.highcharts.com/license
		 */



		/**
		 * @interface Highcharts.AjaxSettings
		 *//**
		 * The URL to call.
		 *
		 * @name Highcharts.AjaxSettings#url
		 * @type {string}
		 *//**
		 * The verb to use.
		 *
		 * @name Highcharts.AjaxSettings#type
		 * @type {"get"|"post"|"update"|"delete"}
		 *//**
		 * The data type expected.
		 *
		 * @name Highcharts.AjaxSettings#dataType
		 * @type {"json"|"xml"|"text"|"octet"}
		 *//**
		 * Function to call on success.
		 *
		 * @name Highcharts.AjaxSettings#success
		 * @type {Function}
		 *//**
		 * Function to call on error.
		 *
		 * @name Highcharts.AjaxSettings#error
		 * @type {Function}
		 *//**
		 * The payload to send.
		 *
		 * @name Highcharts.AjaxSettings#data
		 * @type {object}
		 *//**
		 * The headers; keyed on header name.
		 *
		 * @name Highcharts.AjaxSettings#headers
		 * @type {object}
		 */

		/**
		 * Perform an Ajax call.
		 *
		 * @function Highcharts.ajax
		 *
		 * @param {Highcharts.AjaxSettings} attr
		 *        The Ajax settings to use.
		 */
		H.ajax = function (attr) {
		    var options = H.merge(true, {
		            url: false,
		            type: 'GET',
		            dataType: 'json',
		            success: false,
		            error: false,
		            data: false,
		            headers: {}
		        }, attr),
		        headers = {
		            json: 'application/json',
		            xml: 'application/xml',
		            text: 'text/plain',
		            octet: 'application/octet-stream'
		        },
		        r = new XMLHttpRequest();

		    function handleError(xhr, err) {
		        if (options.error) {
		            options.error(xhr, err);
		        } else {
		            // Maybe emit a highcharts error event here
		        }
		    }

		    if (!options.url) {
		        return false;
		    }

		    r.open(options.type.toUpperCase(), options.url, true);
		    r.setRequestHeader(
		        'Content-Type',
		        headers[options.dataType] || headers.text
		    );

		    H.objectEach(options.headers, function (val, key) {
		        r.setRequestHeader(key, val);
		    });

		    r.onreadystatechange = function () {
		        var res;

		        if (r.readyState === 4) {
		            if (r.status === 200) {
		                res = r.responseText;
		                if (options.dataType === 'json') {
		                    try {
		                        res = JSON.parse(res);
		                    } catch (e) {
		                        return handleError(r, e);
		                    }
		                }
		                return options.success && options.success(res);
		            }

		            handleError(r, r.responseText);
		        }
		    };

		    try {
		        options.data = JSON.stringify(options.data);
		    } catch (e) {}

		    r.send(options.data || true);
		};

	}(Highcharts));
	(function (Highcharts) {
		/**
		 * Data module
		 *
		 * (c) 2012-2018 Torstein Honsi
		 *
		 * License: www.highcharts.com/license
		 */

		/**
		 * Callback function to modify the CSV before parsing it by the data module.
		 *
		 * @callback Highcharts.DataBeforeParseCallbackFunction
		 *
		 * @param {string} csv
		 *        The CSV to modify.
		 *
		 * @return {string}
		 *         The CSV to parse.
		 */

		/**
		 * Callback function that gets called after parsing data.
		 *
		 * @callback Highcharts.DataCompleteCallbackFunction
		 *
		 * @param {Highcharts.ChartOptions} chartOptions
		 *        The chart options that were used.
		 */

		/**
		 * Callback function that returns the correspondig Date object to a match.
		 *
		 * @callback Highcharts.DataDateFormatCallbackFunction
		 *
		 * @param {Array<number>} match
		 *
		 * @return {global.Date}
		 */

		/**
		 * Structure for alternative date formats to parse.
		 *
		 * @interface Highcharts.DataDateFormatObject
		 *//**
		 * @name Highcharts.DataDateFormatObject#alternative
		 * @type {string|undefined}
		 *//**
		 * @name Highcharts.DataDateFormatObject#parser
		 * @type {Highcharts.DataDateFormatCallbackFunction}
		 *//**
		 * @name Highcharts.DataDateFormatObject#regex
		 * @type {global.RegExp}
		 */

		/**
		 * Callback function to parse string representations of dates into
		 * JavaScript timestamps (milliseconds since 1.1.1970).
		 *
		 * @callback Highcharts.DataParseDateCallbackFunction
		 *
		 * @param {string} dateValue
		 *
		 * @return {number}
		 *         Timestamp (milliseconds since 1.1.1970) as integer for Date class.
		 */

		/**
		 * Callback function to access the parsed columns, the two-dimentional
		 * input data array directly, before they are interpreted into series
		 * data and categories.
		 *
		 * @callback Highcharts.DataParsedCallbackFunction
		 *
		 * @param {Array<Array<*>>} columns
		 *        The parsed columns by the data module.
		 *
		 * @return {boolean|undefined}
		 *         Return `false` to stop completion, or call `this.complete()` to
		 *         continue async.
		 */



		// Utilities
		var addEvent = Highcharts.addEvent,
		    Chart = Highcharts.Chart,
		    win = Highcharts.win,
		    doc = win.document,
		    objectEach = Highcharts.objectEach,
		    pick = Highcharts.pick,
		    isNumber = Highcharts.isNumber,
		    merge = Highcharts.merge,
		    splat = Highcharts.splat,
		    fireEvent = Highcharts.fireEvent,
		    SeriesBuilder;

		/**
		 * The Data module provides a simplified interface for adding data to
		 * a chart from sources like CVS, HTML tables or grid views. See also
		 * the [tutorial article on the Data module](
		 * https://www.highcharts.com/docs/working-with-data/data-module).
		 *
		 * It requires the `modules/data.js` file to be loaded.
		 *
		 * Please note that the default way of adding data in Highcharts, without
		 * the need of a module, is through the [series.data](#series.data)
		 * option.
		 *
		 * @sample {highcharts} highcharts/demo/column-parsed/
		 *         HTML table
		 * @sample {highcharts} highcharts/data/csv/
		 *         CSV
		 *
		 * @since     4.0
		 * @apioption data
		 */

		/**
		 * A callback function to modify the CSV before parsing it. Return the modified
		 * string.
		 *
		 * @sample {highcharts} highcharts/demo/line-ajax/
		 *         Modify CSV before parse
		 *
		 * @type      {Highcharts.DataBeforeParseCallbackFunction}
		 * @since     6.1
		 * @apioption data.beforeParse
		 */

		/**
		 * A two-dimensional array representing the input data on tabular form.
		 * This input can be used when the data is already parsed, for example
		 * from a grid view component. Each cell can be a string or number.
		 * If not switchRowsAndColumns is set, the columns are interpreted as
		 * series.
		 *
		 * @see [data.rows](#data.rows)
		 *
		 * @sample {highcharts} highcharts/data/columns/
		 *         Columns
		 *
		 * @type      {Array<Array<*>>}
		 * @since     4.0
		 * @apioption data.columns
		 */

		/**
		 * The callback that is evaluated when the data is finished loading,
		 * optionally from an external source, and parsed. The first argument
		 * passed is a finished chart options object, containing the series.
		 * These options can be extended with additional options and passed
		 * directly to the chart constructor.
		 *
		 * @see [data.parsed](#data.parsed)
		 *
		 * @sample {highcharts} highcharts/data/complete/
		 *         Modify data on complete
		 *
		 * @type      {Highcharts.DataCompleteCallbackFunction}
		 * @since     4.0
		 * @apioption data.complete
		 */

		/**
		 * A comma delimited string to be parsed. Related options are [startRow](
		 * #data.startRow), [endRow](#data.endRow), [startColumn](#data.startColumn)
		 * and [endColumn](#data.endColumn) to delimit what part of the table
		 * is used. The [lineDelimiter](#data.lineDelimiter) and [itemDelimiter](
		 * #data.itemDelimiter) options define the CSV delimiter formats.
		 *
		 * The built-in CSV parser doesn't support all flavours of CSV, so in
		 * some cases it may be necessary to use an external CSV parser. See
		 * [this example](https://jsfiddle.net/highcharts/u59176h4/) of parsing
		 * CSV through the MIT licensed [Papa Parse](http://papaparse.com/)
		 * library.
		 *
		 * @sample {highcharts} highcharts/data/csv/
		 *         Data from CSV
		 *
		 * @type      {string}
		 * @since     4.0
		 * @apioption data.csv
		 */

		/**
		 * Which of the predefined date formats in Date.prototype.dateFormats
		 * to use to parse date values. Defaults to a best guess based on what
		 * format gives valid and ordered dates. Valid options include: `YYYY/mm/dd`,
		 * `dd/mm/YYYY`, `mm/dd/YYYY`, `dd/mm/YY`, `mm/dd/YY`.
		 *
		 * @see [data.parseDate](#data.parseDate)
		 *
		 * @sample {highcharts} highcharts/data/dateformat-auto/
		 *         Best guess date format
		 *
		 * @type       {string}
		 * @since      4.0
		 * @validvalue ["YYYY/mm/dd", "dd/mm/YYYY", "mm/dd/YYYY", "dd/mm/YYYY",
		 *             "dd/mm/YY", "mm/dd/YY"]
		 * @apioption  data.dateFormat
		 */

		/**
		 * The decimal point used for parsing numbers in the CSV.
		 *
		 * If both this and data.delimiter is set to `undefined`, the parser will
		 * attempt to deduce the decimal point automatically.
		 *
		 * @sample {highcharts} highcharts/data/delimiters/
		 *         Comma as decimal point
		 *
		 * @type      {string}
		 * @default   .
		 * @since     4.1.0
		 * @apioption data.decimalPoint
		 */

		/**
		 * In tabular input data, the last column (indexed by 0) to use. Defaults
		 * to the last column containing data.
		 *
		 * @sample {highcharts} highcharts/data/start-end/
		 *         Limited data
		 *
		 * @type      {number}
		 * @since     4.0
		 * @apioption data.endColumn
		 */

		/**
		 * In tabular input data, the last row (indexed by 0) to use. Defaults
		 * to the last row containing data.
		 *
		 * @sample {highcharts} highcharts/data/start-end/
		 *         Limited data
		 *
		 * @type      {number}
		 * @since     4.0.4
		 * @apioption data.endRow
		 */

		/**
		 * Whether to use the first row in the data set as series names.
		 *
		 * @sample {highcharts} highcharts/data/start-end/
		 *         Don't get series names from the CSV
		 * @sample {highstock} highcharts/data/start-end/
		 *         Don't get series names from the CSV
		 *
		 * @type      {boolean}
		 * @default   true
		 * @since     4.1.0
		 * @product   highcharts highstock gantt
		 * @apioption data.firstRowAsNames
		 */

		/**
		 * The key for a Google Spreadsheet to load. See [general information
		 * on GS](https://developers.google.com/gdata/samples/spreadsheet_sample).
		 *
		 * @sample {highcharts} highcharts/data/google-spreadsheet/
		 *         Load a Google Spreadsheet
		 *
		 * @type      {string}
		 * @since     4.0
		 * @apioption data.googleSpreadsheetKey
		 */

		/**
		 * The Google Spreadsheet worksheet to use in combination with
		 * [googleSpreadsheetKey](#data.googleSpreadsheetKey). The available id's from
		 * your sheet can be read from `https://spreadsheets.google.com/feeds/worksheets/{key}/public/basic`.
		 *
		 * @sample {highcharts} highcharts/data/google-spreadsheet/
		 *         Load a Google Spreadsheet
		 *
		 * @type      {string}
		 * @since     4.0
		 * @apioption data.googleSpreadsheetWorksheet
		 */

		/**
		 * Item or cell delimiter for parsing CSV. Defaults to the tab character
		 * `\t` if a tab character is found in the CSV string, if not it defaults
		 * to `,`.
		 *
		 * If this is set to false or undefined, the parser will attempt to deduce
		 * the delimiter automatically.
		 *
		 * @sample {highcharts} highcharts/data/delimiters/
		 *         Delimiters
		 *
		 * @type      {string}
		 * @since     4.0
		 * @apioption data.itemDelimiter
		 */

		/**
		 * Line delimiter for parsing CSV.
		 *
		 * @sample {highcharts} highcharts/data/delimiters/
		 *         Delimiters
		 *
		 * @type      {string}
		 * @default   \n
		 * @since     4.0
		 * @apioption data.lineDelimiter
		 */

		/**
		 * A callback function to parse string representations of dates into
		 * JavaScript timestamps. Should return an integer timestamp on success.
		 *
		 * @see [dateFormat](#data.dateFormat)
		 *
		 * @type      {Highcharts.DataParseDateCallbackFunction}
		 * @since     4.0
		 * @apioption data.parseDate
		 */

		/**
		 * A callback function to access the parsed columns, the two-dimentional
		 * input data array directly, before they are interpreted into series
		 * data and categories. Return `false` to stop completion, or call
		 * `this.complete()` to continue async.
		 *
		 * @see [data.complete](#data.complete)
		 *
		 * @sample {highcharts} highcharts/data/parsed/
		 *         Modify data after parse
		 *
		 * @type      {Highcharts.DataParsedCallbackFunction}
		 * @since     4.0
		 * @apioption data.parsed
		 */

		/**
		 * The same as the columns input option, but defining rows intead of
		 * columns.
		 *
		 * @see [data.columns](#data.columns)
		 *
		 * @sample {highcharts} highcharts/data/rows/
		 *         Data in rows
		 *
		 * @type      {Array<Array<*>>}
		 * @since     4.0
		 * @apioption data.rows
		 */

		/**
		 * An array containing dictionaries for each series. A dictionary exists of
		 * Point property names as the key and the CSV column index as the value.
		 *
		 * @sample {highcharts} highcharts/data/seriesmapping-label/
		 *         Label from data set
		 *
		 * @type      {Array<Highcharts.Dictionary<number>>}
		 * @since     4.0.4
		 * @apioption data.seriesMapping
		 */

		/**
		 * In tabular input data, the first column (indexed by 0) to use.
		 *
		 * @sample {highcharts} highcharts/data/start-end/
		 *         Limited data
		 *
		 * @type      {number}
		 * @default   0
		 * @since     4.0
		 * @apioption data.startColumn
		 */

		/**
		 * In tabular input data, the first row (indexed by 0) to use.
		 *
		 * @sample {highcharts} highcharts/data/start-end/
		 *         Limited data
		 *
		 * @type      {number}
		 * @default   0
		 * @since     4.0
		 * @apioption data.startRow
		 */

		/**
		 * Switch rows and columns of the input data, so that `this.columns`
		 * effectively becomes the rows of the data set, and the rows are interpreted
		 * as series.
		 *
		 * @sample {highcharts} highcharts/data/switchrowsandcolumns/
		 *         Switch rows and columns
		 *
		 * @type      {boolean}
		 * @default   false
		 * @since     4.0
		 * @apioption data.switchRowsAndColumns
		 */

		/**
		 * An HTML table or the id of such to be parsed as input data. Related
		 * options are `startRow`, `endRow`, `startColumn` and `endColumn` to
		 * delimit what part of the table is used.
		 *
		 * @sample {highcharts} highcharts/demo/column-parsed/
		 *         Parsed table
		 *
		 * @type      {string|global.HTMLElement}
		 * @since     4.0
		 * @apioption data.table
		 */

		/**
		 * An URL to a remote CSV dataset. Will be fetched when the chart is created
		 * using Ajax.
		 *
		 * @sample highcharts/data/livedata-columns
		 *         Categorized bar chart with CSV and live polling
		 * @sample highcharts/data/livedata-csv
		 *         Time based line chart with CSV and live polling
		 *
		 * @type      {string}
		 * @apioption data.csvURL
		 */

		/**
		 * A URL to a remote JSON dataset, structured as a row array.
		 * Will be fetched when the chart is created using Ajax.
		 *
		 * @sample highcharts/data/livedata-rows
		 *         Rows with live polling
		 *
		 * @type      {string}
		 * @apioption data.rowsURL
		 */

		/**
		 * A URL to a remote JSON dataset, structured as a column array.
		 * Will be fetched when the chart is created using Ajax.
		 *
		 * @sample highcharts/data/livedata-columns
		 *         Columns with live polling
		 *
		 * @type      {string}
		 * @apioption data.columnsURL
		 */

		/**
		 * Sets the refresh rate for data polling when importing remote dataset by
		 * setting [data.csvURL](data.csvURL), [data.rowsURL](data.rowsURL),
		 * [data.columnsURL](data.columnsURL), or
		 * [data.googleSpreadsheetKey](data.googleSpreadsheetKey).
		 *
		 * Note that polling must be enabled by setting
		 * [data.enablePolling](data.enablePolling) to true.
		 *
		 * The value is the number of seconds between pollings.
		 * It cannot be set to less than 1 second.
		 *
		 * @sample highcharts/demo/live-data
		 *         Live data with user set refresh rate
		 *
		 * @default   1
		 * @type      {number}
		 * @apioption data.dataRefreshRate
		 */

		/**
		 * Enables automatic refetching of remote datasets every _n_ seconds (defined by
		 * setting [data.dataRefreshRate](data.dataRefreshRate)).
		 *
		 * Only works when either [data.csvURL](data.csvURL),
		 * [data.rowsURL](data.rowsURL), [data.columnsURL](data.columnsURL), or
		 * [data.googleSpreadsheetKey](data.googleSpreadsheetKey).
		 *
		 * @sample highcharts/demo/live-data
		 *         Live data
		 * @sample highcharts/data/livedata-columns
		 *         Categorized bar chart with CSV and live polling
		 *
		 * @type      {boolean}
		 * @default   false
		 * @apioption data.enablePolling
		 */

		/**
		 * The Data class
		 *
		 * @requires module:modules/data
		 *
		 * @class
		 * @name Highcharts.Data
		 *
		 * @param {Highcharts.DataOptions} dataOptions
		 *
		 * @param {Highcharts.Options} [chartOptions]
		 *
		 * @param {Highcharts.Chart} [chart]
		 */
		var Data = function (dataOptions, chartOptions, chart) {
		    this.init(dataOptions, chartOptions, chart);
		};

		// Set the prototype properties
		Highcharts.extend(Data.prototype, {

		    /**
		     * Initialize the Data object with the given options
		     *
		     * @private
		     * @function Highcharts.Data#init
		     *
		     * @param {Highcharts.DataOptions} options
		     *
		     * @param {Highcharts.Options} [chartOptions]
		     *
		     * @param {Highcharts.Chart} [chart]
		     */
		    init: function (options, chartOptions, chart) {

		        var decimalPoint = options.decimalPoint,
		            hasData;

		        if (chartOptions) {
		            this.chartOptions = chartOptions;
		        }
		        if (chart) {
		            this.chart = chart;
		        }

		        if (decimalPoint !== '.' && decimalPoint !== ',') {
		            decimalPoint = undefined;
		        }

		        this.options = options;
		        this.columns = (
		            options.columns ||
		            this.rowsToColumns(options.rows) ||
		            []
		        );

		        this.firstRowAsNames = pick(
		            options.firstRowAsNames,
		            this.firstRowAsNames,
		            true
		        );

		        this.decimalRegex = (
		            decimalPoint &&
		            new RegExp('^(-?[0-9]+)' + decimalPoint + '([0-9]+)$') // eslint-disable-line security/detect-non-literal-regexp
		        );

		        // This is a two-dimensional array holding the raw, trimmed string
		        // values with the same organisation as the columns array. It makes it
		        // possible for example to revert from interpreted timestamps to
		        // string-based categories.
		        this.rawColumns = [];

		        // No need to parse or interpret anything
		        if (this.columns.length) {
		            this.dataFound();
		            hasData = true;
		        }

		        if (!hasData) {
		            // Fetch live data
		            hasData = this.fetchLiveData();
		        }

		        if (!hasData) {
		            // Parse a CSV string if options.csv is given. The parseCSV function
		            // returns a columns array, if it has no length, we have no data
		            hasData = Boolean(this.parseCSV().length);
		        }

		        if (!hasData) {
		            // Parse a HTML table if options.table is given
		            hasData = Boolean(this.parseTable().length);
		        }

		        if (!hasData) {
		            // Parse a Google Spreadsheet
		            hasData = this.parseGoogleSpreadsheet();
		        }

		        if (!hasData && options.afterComplete) {
		            options.afterComplete();
		        }
		    },

		    /**
		     * Get the column distribution. For example, a line series takes a single
		     * column for Y values. A range series takes two columns for low and high
		     * values respectively, and an OHLC series takes four columns.
		     *
		     * @function Highcharts.Data#getColumnDistribution
		     */
		    getColumnDistribution: function () {
		        var chartOptions = this.chartOptions,
		            options = this.options,
		            xColumns = [],
		            getValueCount = function (type) {
		                return (
		                    Highcharts.seriesTypes[type || 'line'].prototype
		                        .pointArrayMap ||
		                    [0]
		                ).length;
		            },
		            getPointArrayMap = function (type) {
		                return Highcharts.seriesTypes[type || 'line']
		                    .prototype.pointArrayMap;
		            },
		            globalType = (
		                chartOptions &&
		                chartOptions.chart &&
		                chartOptions.chart.type
		            ),
		            individualCounts = [],
		            seriesBuilders = [],
		            seriesIndex = 0,

		            // If no series mapping is defined, check if the series array is
		            // defined with types.
		            seriesMapping = (
		                (options && options.seriesMapping) ||
		                (
		                    chartOptions &&
		                    chartOptions.series &&
		                    chartOptions.series.map(function () {
		                        return { x: 0 };
		                    })
		                ) ||
		                []
		            ),
		            i;

		        ((chartOptions && chartOptions.series) || []).forEach(
		            function (series) {
		                individualCounts.push(getValueCount(series.type || globalType));
		            }
		        );

		        // Collect the x-column indexes from seriesMapping
		        seriesMapping.forEach(function (mapping) {
		            xColumns.push(mapping.x || 0);
		        });

		        // If there are no defined series with x-columns, use the first column
		        // as x column
		        if (xColumns.length === 0) {
		            xColumns.push(0);
		        }

		        // Loop all seriesMappings and constructs SeriesBuilders from
		        // the mapping options.
		        seriesMapping.forEach(function (mapping) {
		            var builder = new SeriesBuilder(),
		                numberOfValueColumnsNeeded = individualCounts[seriesIndex] ||
		                    getValueCount(globalType),
		                seriesArr = (chartOptions && chartOptions.series) || [],
		                series = seriesArr[seriesIndex] || {},
		                pointArrayMap = getPointArrayMap(series.type || globalType) ||
		                    ['y'];

		            // Add an x reader from the x property or from an undefined column
		            // if the property is not set. It will then be auto populated later.
		            builder.addColumnReader(mapping.x, 'x');

		            // Add all column mappings
		            objectEach(mapping, function (val, name) {
		                if (name !== 'x') {
		                    builder.addColumnReader(val, name);
		                }
		            });

		            // Add missing columns
		            for (i = 0; i < numberOfValueColumnsNeeded; i++) {
		                if (!builder.hasReader(pointArrayMap[i])) {
		                    // Create and add a column reader for the next free column
		                    // index
		                    builder.addColumnReader(undefined, pointArrayMap[i]);
		                }
		            }

		            seriesBuilders.push(builder);
		            seriesIndex++;
		        });

		        var globalPointArrayMap = getPointArrayMap(globalType);
		        if (globalPointArrayMap === undefined) {
		            globalPointArrayMap = ['y'];
		        }

		        this.valueCount = {
		            global: getValueCount(globalType),
		            xColumns: xColumns,
		            individual: individualCounts,
		            seriesBuilders: seriesBuilders,
		            globalPointArrayMap: globalPointArrayMap
		        };
		    },

		    /**
		     * When the data is parsed into columns, either by CSV, table, GS or direct
		     * input, continue with other operations.
		     *
		     * @private
		     * @function Highcharts.Data#dataFound
		     */
		    dataFound: function () {
		        if (this.options.switchRowsAndColumns) {
		            this.columns = this.rowsToColumns(this.columns);
		        }

		        // Interpret the info about series and columns
		        this.getColumnDistribution();

		        // Interpret the values into right types
		        this.parseTypes();

		        // Handle columns if a handleColumns callback is given
		        if (this.parsed() !== false) {

		            // Complete if a complete callback is given
		            this.complete();
		        }

		    },

		    /**
		     * Parse a CSV input string
		     *
		     * @function Highcharts.Data#parseCSV
		     *
		     * @param {Highcharts.DataOptions} inOptions
		     *
		     * @return {Array<Array<*>>}
		     */
		    parseCSV: function (inOptions) {
		        var self = this,
		            options = inOptions || this.options,
		            csv = options.csv,
		            columns,
		            startRow = (
		                typeof options.startRow !== 'undefined' && options.startRow ?
		                    options.startRow :
		                    0
		            ),
		            endRow = options.endRow || Number.MAX_VALUE,
		            startColumn = (
		                typeof options.startColumn !== 'undefined' &&
		                options.startColumn
		            ) ? options.startColumn : 0,
		            endColumn = options.endColumn || Number.MAX_VALUE,
		            itemDelimiter,
		            lines,
		            rowIt = 0,
		            // activeRowNo = 0,
		            dataTypes = [],
		            // We count potential delimiters in the prepass, and use the
		            // result as the basis of half-intelligent guesses.
		            potDelimiters = {
		                ',': 0,
		                ';': 0,
		                '\t': 0
		            };

		        columns = this.columns = [];

		        /*
		            This implementation is quite verbose. It will be shortened once
		            it's stable and passes all the test.

		            It's also not written with speed in mind, instead everything is
		            very seggregated, and there a several redundant loops.
		            This is to make it easier to stabilize the code initially.

		            We do a pre-pass on the first 4 rows to make some intelligent
		            guesses on the set. Guessed delimiters are in this pass counted.

		            Auto detecting delimiters
		                - If we meet a quoted string, the next symbol afterwards
		                  (that's not \s, \t) is the delimiter
		                - If we meet a date, the next symbol afterwards is the delimiter

		            Date formats
		                - If we meet a column with date formats, check all of them to
		                  see if one of the potential months crossing 12. If it does,
		                  we now know the format

		            It would make things easier to guess the delimiter before
		            doing the actual parsing.

		            General rules:
		                - Quoting is allowed, e.g: "Col 1",123,321
		                - Quoting is optional, e.g.: Col1,123,321
		                - Doubble quoting is escaping, e.g. "Col ""Hello world""",123
		                - Spaces are considered part of the data: Col1 ,123
		                - New line is always the row delimiter
		                - Potential column delimiters are , ; \t
		                - First row may optionally contain headers
		                - The last row may or may not have a row delimiter
		                - Comments are optionally supported, in which case the comment
		                  must start at the first column, and the rest of the line will
		                  be ignored
		        */

		        // Parse a single row
		        function parseRow(columnStr, rowNumber, noAdd, callbacks) {
		            var i = 0,
		                c = '',
		                cl = '',
		                cn = '',
		                token = '',
		                actualColumn = 0,
		                column = 0;

		            function read(j) {
		                c = columnStr[j];
		                cl = columnStr[j - 1];
		                cn = columnStr[j + 1];
		            }

		            function pushType(type) {
		                if (dataTypes.length < column + 1) {
		                    dataTypes.push([type]);
		                }
		                if (dataTypes[column][dataTypes[column].length - 1] !== type) {
		                    dataTypes[column].push(type);
		                }
		            }

		            function push() {
		                if (startColumn > actualColumn || actualColumn > endColumn) {
		                    // Skip this column, but increment the column count (#7272)
		                    ++actualColumn;
		                    token = '';
		                    return;
		                }

		                if (!isNaN(parseFloat(token)) && isFinite(token)) {
		                    token = parseFloat(token);
		                    pushType('number');
		                } else if (!isNaN(Date.parse(token))) {
		                    token = token.replace(/\//g, '-');
		                    pushType('date');
		                } else {
		                    pushType('string');
		                }

		                if (columns.length < column + 1) {
		                    columns.push([]);
		                }

		                if (!noAdd) {
		                    // Don't push - if there's a varrying amount of columns
		                    // for each row, pushing will skew everything down n slots
		                    columns[column][rowNumber] = token;
		                }

		                token = '';
		                ++column;
		                ++actualColumn;
		            }

		            if (!columnStr.trim().length) {
		                return;
		            }

		            if (columnStr.trim()[0] === '#') {
		                return;
		            }

		            for (; i < columnStr.length; i++) {
		                read(i);

		                // Quoted string
		                if (c === '#') {
		                    // The rest of the row is a comment
		                    push();
		                    return;
		                } else if (c === '"') {
		                    read(++i);

		                    while (i < columnStr.length) {
		                        if (c === '"' && cl !== '"' && cn !== '"') {
		                            break;
		                        }

		                        if (c !== '"' || (c === '"' && cl !== '"')) {
		                            token += c;
		                        }

		                        read(++i);
		                    }

		                // Perform "plugin" handling
		                } else if (callbacks && callbacks[c]) {
		                    if (callbacks[c](c, token)) {
		                        push();
		                    }

		                // Delimiter - push current token
		                } else if (c === itemDelimiter) {
		                    push();

		                // Actual column data
		                } else {
		                    token += c;
		                }
		            }

		            push();

		        }

		        // Attempt to guess the delimiter
		        // We do a separate parse pass here because we need
		        // to count potential delimiters softly without making any assumptions.
		        function guessDelimiter(lines) {
		            var points = 0,
		                commas = 0,
		                guessed = false;

		            lines.some(function (columnStr, i) {
		                var inStr = false,
		                    c,
		                    cn,
		                    cl,
		                    token = ''
		                    ;


		                // We should be able to detect dateformats within 13 rows
		                if (i > 13) {
		                    return true;
		                }

		                for (var j = 0; j < columnStr.length; j++) {
		                    c = columnStr[j];
		                    cn = columnStr[j + 1];
		                    cl = columnStr[j - 1];

		                    if (c === '#') {
		                        // Skip the rest of the line - it's a comment
		                        return;
		                    } else if (c === '"') {
		                        if (inStr) {
		                            if (cl !== '"' && cn !== '"') {
		                                while (cn === ' ' && j < columnStr.length) {
		                                    cn = columnStr[++j];
		                                }

		                                // After parsing a string, the next non-blank
		                                // should be a delimiter if the CSV is properly
		                                // formed.

		                                if (typeof potDelimiters[cn] !== 'undefined') {
		                                    potDelimiters[cn]++;
		                                }

		                                inStr = false;
		                            }
		                        } else {
		                            inStr = true;
		                        }
		                    } else if (typeof potDelimiters[c] !== 'undefined') {

		                        token = token.trim();

		                        if (!isNaN(Date.parse(token))) {
		                            potDelimiters[c]++;
		                        } else if (isNaN(token) || !isFinite(token)) {
		                            potDelimiters[c]++;
		                        }

		                        token = '';

		                    } else {
		                        token += c;
		                    }

		                    if (c === ',') {
		                        commas++;
		                    }

		                    if (c === '.') {
		                        points++;
		                    }
		                }
		            });

		            // Count the potential delimiters.
		            // This could be improved by checking if the number of delimiters
		            // equals the number of columns - 1

		            if (potDelimiters[';'] > potDelimiters[',']) {
		                guessed = ';';
		            } else if (potDelimiters[','] > potDelimiters[';']) {
		                guessed = ',';
		            } else {
		                // No good guess could be made..
		                guessed = ',';
		            }

		            // Try to deduce the decimal point if it's not explicitly set.
		            // If both commas or points is > 0 there is likely an issue
		            if (!options.decimalPoint) {
		                if (points > commas) {
		                    options.decimalPoint = '.';
		                } else {
		                    options.decimalPoint = ',';
		                }

		                // Apply a new decimal regex based on the presumed decimal sep.
		                self.decimalRegex = new RegExp( // eslint-disable-line security/detect-non-literal-regexp
		                    '^(-?[0-9]+)' +
		                    options.decimalPoint +
		                    '([0-9]+)$'
		                );
		            }

		            return guessed;
		        }

		        /* Tries to guess the date format
		         *  - Check if either month candidate exceeds 12
		         *  - Check if year is missing (use current year)
		         *  - Check if a shortened year format is used (e.g. 1/1/99)
		         *  - If no guess can be made, the user must be prompted
		         * data is the data to deduce a format based on
		         */
		        function deduceDateFormat(data, limit) {
		            var format = 'YYYY/mm/dd',
		                thing,
		                guessedFormat,
		                calculatedFormat,
		                i = 0,
		                madeDeduction = false,
		                // candidates = {},
		                stable = [],
		                max = [],
		                j;

		            if (!limit || limit > data.length) {
		                limit = data.length;
		            }

		            for (; i < limit; i++) {
		                if (
		                    typeof data[i] !== 'undefined' &&
		                    data[i] && data[i].length
		                ) {
		                    thing = data[i]
		                            .trim()
		                            .replace(/\//g, ' ')
		                            .replace(/\-/g, ' ')
		                            .replace(/\./g, ' ')
		                            .split(' ');

		                    guessedFormat = [
		                        '',
		                        '',
		                        ''
		                    ];


		                    for (j = 0; j < thing.length; j++) {
		                        if (j < guessedFormat.length) {
		                            thing[j] = parseInt(thing[j], 10);

		                            if (thing[j]) {

		                                max[j] = (!max[j] || max[j] < thing[j]) ?
		                                    thing[j] :
		                                    max[j];

		                                if (typeof stable[j] !== 'undefined') {
		                                    if (stable[j] !== thing[j]) {
		                                        stable[j] = false;
		                                    }
		                                } else {
		                                    stable[j] = thing[j];
		                                }

		                                if (thing[j] > 31) {
		                                    if (thing[j] < 100) {
		                                        guessedFormat[j] = 'YY';
		                                    } else {
		                                        guessedFormat[j] = 'YYYY';
		                                    }
		                                    // madeDeduction = true;
		                                } else if (thing[j] > 12 && thing[j] <= 31) {
		                                    guessedFormat[j] = 'dd';
		                                    madeDeduction = true;
		                                } else if (!guessedFormat[j].length) {
		                                    guessedFormat[j] = 'mm';
		                                }
		                            }
		                        }
		                    }
		                }
		            }

		            if (madeDeduction) {

		                // This handles a few edge cases with hard to guess dates
		                for (j = 0; j < stable.length; j++) {
		                    if (stable[j] !== false) {
		                        if (
		                            max[j] > 12 &&
		                            guessedFormat[j] !== 'YY' &&
		                            guessedFormat[j] !== 'YYYY'
		                        ) {
		                            guessedFormat[j] = 'YY';
		                        }
		                    } else if (max[j] > 12 && guessedFormat[j] === 'mm') {
		                        guessedFormat[j] = 'dd';
		                    }
		                }

		                // If the middle one is dd, and the last one is dd,
		                // the last should likely be year.
		                if (guessedFormat.length === 3 &&
		                    guessedFormat[1] === 'dd' &&
		                    guessedFormat[2] === 'dd') {
		                    guessedFormat[2] = 'YY';
		                }

		                calculatedFormat = guessedFormat.join('/');

		                // If the caculated format is not valid, we need to present an
		                // error.

		                if (
		                    !(options.dateFormats || self.dateFormats)[calculatedFormat]
		                ) {
		                    // This should emit an event instead
		                    fireEvent('deduceDateFailed');
		                    return format;
		                }

		                return calculatedFormat;
		            }

		            return format;
		        }

		        /* Figure out the best axis types for the data
		         * - If the first column is a number, we're good
		         * - If the first column is a date, set to date/time
		         * - If the first column is a string, set to categories
		         */
		        function deduceAxisTypes() {

		        }

		        if (csv && options.beforeParse) {
		            csv = options.beforeParse.call(this, csv);
		        }

		        if (csv) {

		            lines = csv
		                .replace(/\r\n/g, '\n') // Unix
		                .replace(/\r/g, '\n') // Mac
		                .split(options.lineDelimiter || '\n');

		            if (!startRow || startRow < 0) {
		                startRow = 0;
		            }

		            if (!endRow || endRow >= lines.length) {
		                endRow = lines.length - 1;
		            }

		            if (options.itemDelimiter) {
		                itemDelimiter = options.itemDelimiter;
		            } else {
		                itemDelimiter = null;
		                itemDelimiter = guessDelimiter(lines);
		            }

		            var offset = 0;

		            for (rowIt = startRow; rowIt <= endRow; rowIt++) {
		                if (lines[rowIt][0] === '#') {
		                    offset++;
		                } else {
		                    parseRow(lines[rowIt], rowIt - startRow - offset);
		                }
		            }

		            // //Make sure that there's header columns for everything
		            // columns.forEach(function (col) {

		            // });

		            deduceAxisTypes();

		            if ((!options.columnTypes || options.columnTypes.length === 0) &&
		                dataTypes.length &&
		                dataTypes[0].length &&
		                dataTypes[0][1] === 'date' &&
		                !options.dateFormat) {
		                options.dateFormat = deduceDateFormat(columns[0]);
		            }


		            // lines.forEach(function (line, rowNo) {
		            //    var trimmed = self.trim(line),
		            //        isComment = trimmed.indexOf('#') === 0,
		            //        isBlank = trimmed === '',
		            //        items;

		            //    if (
		            //        rowNo >= startRow &&
		            //        rowNo <= endRow &&
		            //        !isComment && !isBlank
		            //    ) {
		            //        items = line.split(itemDelimiter);
		            //        items.forEach(function (item, colNo) {
		            //            if (colNo >= startColumn && colNo <= endColumn) {
		            //                if (!columns[colNo - startColumn]) {
		            //                    columns[colNo - startColumn] = [];
		            //                }

		            //                columns[colNo - startColumn][activeRowNo] = item;
		            //            }
		            //        });
		            //        activeRowNo += 1;
		            //    }
		            // });
		            //

		            this.dataFound();
		        }

		        return columns;
		    },

		    /**
		     * Parse a HTML table
		     *
		     * @function Highcharts.Data#parseTable
		     *
		     * @return {Array<Array<*>>}
		     */
		    parseTable: function () {
		        var options = this.options,
		            table = options.table,
		            columns = this.columns,
		            startRow = options.startRow || 0,
		            endRow = options.endRow || Number.MAX_VALUE,
		            startColumn = options.startColumn || 0,
		            endColumn = options.endColumn || Number.MAX_VALUE;

		        if (table) {

		            if (typeof table === 'string') {
		                table = doc.getElementById(table);
		            }

		            [].forEach.call(
		                table.getElementsByTagName('tr'),
		                function (tr, rowNo) {
		                    if (rowNo >= startRow && rowNo <= endRow) {
		                        [].forEach.call(tr.children, function (item, colNo) {
		                            if (
		                                (
		                                    item.tagName === 'TD' ||
		                                    item.tagName === 'TH'
		                                ) &&
		                                colNo >= startColumn &&
		                                colNo <= endColumn
		                            ) {
		                                if (!columns[colNo - startColumn]) {
		                                    columns[colNo - startColumn] = [];
		                                }

		                                columns[colNo - startColumn][rowNo - startRow] =
		                                    item.innerHTML;
		                            }
		                        });
		                    }
		                }
		            );

		            this.dataFound(); // continue
		        }
		        return columns;
		    },


		    /**
		     * Fetch or refetch live data
		     *
		     * @function Highcharts.Data#fetchLiveData
		     *
		     * @return {string}
		     *         The first URL that was tried.
		     */
		    fetchLiveData: function () {
		        var chart = this.chart,
		            options = this.options,
		            maxRetries = 3,
		            currentRetries = 0,
		            pollingEnabled = options.enablePolling,
		            updateIntervalMs = (options.dataRefreshRate || 2) * 1000,
		            originalOptions = merge(options);

		        if (!options ||
		            (!options.csvURL && !options.rowsURL && !options.columnsURL)
		        ) {
		            return false;
		        }

		        // Do not allow polling more than once a second
		        if (updateIntervalMs < 1000) {
		            updateIntervalMs = 1000;
		        }

		        delete options.csvURL;
		        delete options.rowsURL;
		        delete options.columnsURL;

		        function performFetch(initialFetch) {

		            // Helper function for doing the data fetch + polling
		            function request(url, done, tp) {
		                if (!url || url.indexOf('http') !== 0) {
		                    if (url && options.error) {
		                        options.error('Invalid URL');
		                    }
		                    return false;
		                }

		                if (initialFetch) {
		                    clearTimeout(chart.liveDataTimeout);
		                    chart.liveDataURL = url;
		                }

		                function poll() {
		                    // Poll
		                    if (pollingEnabled && chart.liveDataURL === url) {
		                        // We need to stop doing this if the URL has changed
		                        chart.liveDataTimeout =
		                            setTimeout(performFetch, updateIntervalMs);
		                    }
		                }

		                Highcharts.ajax({
		                    url: url,
		                    dataType: tp || 'json',
		                    success: function (res) {
		                        if (chart && chart.series) {
		                            done(res);
		                        }

		                        poll();

		                    },
		                    error: function (xhr, text) {
		                        if (++currentRetries < maxRetries) {
		                            poll();
		                        }

		                        return options.error && options.error(text, xhr);
		                    }
		                });

		                return true;
		            }

		            if (!request(originalOptions.csvURL, function (res) {
		                chart.update({
		                    data: {
		                        csv: res
		                    }
		                });
		            }, 'text')) {
		                if (!request(originalOptions.rowsURL, function (res) {
		                    chart.update({
		                        data: {
		                            rows: res
		                        }
		                    });
		                })) {
		                    request(originalOptions.columnsURL, function (res) {
		                        chart.update({
		                            data: {
		                                columns: res
		                            }
		                        });
		                    });
		                }
		            }
		        }

		        performFetch(true);

		        return (options &&
		            (options.csvURL || options.rowsURL || options.columnsURL)
		        );
		    },


		    /**
		     * Parse a Google spreadsheet.
		     *
		     * @function Highcharts.Data#parseGoogleSpreadsheet
		     *
		     * @return {boolean}
		     *         Always returns false, because it is an intermediate fetch.
		     */
		    parseGoogleSpreadsheet: function () {
		        var data = this,
		            options = this.options,
		            googleSpreadsheetKey = options.googleSpreadsheetKey,
		            chart = this.chart,
		            // use sheet 1 as the default rather than od6
		            // as the latter sometimes cause issues (it looks like it can
		            // be renamed in some cases, ref. a fogbugz case).
		            worksheet = options.googleSpreadsheetWorksheet || 1,
		            startRow = options.startRow || 0,
		            endRow = options.endRow || Number.MAX_VALUE,
		            startColumn = options.startColumn || 0,
		            endColumn = options.endColumn || Number.MAX_VALUE,
		            refreshRate = (options.dataRefreshRate || 2) * 1000;

		        if (refreshRate < 4000) {
		            refreshRate = 4000;
		        }

		        /*
		         * Fetch the actual spreadsheet using XMLHttpRequest
		         */
		        function fetchSheet(fn) {
		            var url = [
		                'https://spreadsheets.google.com/feeds/cells',
		                googleSpreadsheetKey,
		                worksheet,
		                'public/values?alt=json'
		            ].join('/');

		            Highcharts.ajax({
		                url: url,
		                dataType: 'json',
		                success: function (json) {
		                    fn(json);

		                    if (options.enablePolling) {
		                        setTimeout(function () {
		                            fetchSheet(fn);
		                        }, options.dataRefreshRate);
		                    }
		                },
		                error: function (xhr, text) {
		                    return options.error && options.error(text, xhr);
		                }
		            });
		        }

		        if (googleSpreadsheetKey) {

		            delete options.googleSpreadsheetKey;

		            fetchSheet(function (json) {
		                // Prepare the data from the spreadsheat
		                var columns = [],
		                    cells = json.feed.entry,
		                    cell,
		                    cellCount = (cells || []).length,
		                    colCount = 0,
		                    rowCount = 0,
		                    val,
		                    gr,
		                    gc,
		                    cellInner,
		                    i;

		                if (!cells || cells.length === 0) {
		                    return false;
		                }

		                // First, find the total number of columns and rows that
		                // are actually filled with data
		                for (i = 0; i < cellCount; i++) {
		                    cell = cells[i];
		                    colCount = Math.max(colCount, cell.gs$cell.col);
		                    rowCount = Math.max(rowCount, cell.gs$cell.row);
		                }

		                // Set up arrays containing the column data
		                for (i = 0; i < colCount; i++) {
		                    if (i >= startColumn && i <= endColumn) {
		                        // Create new columns with the length of either
		                        // end-start or rowCount
		                        columns[i - startColumn] = [];
		                    }
		                }

		                // Loop over the cells and assign the value to the right
		                // place in the column arrays
		                for (i = 0; i < cellCount; i++) {
		                    cell = cells[i];
		                    gr = cell.gs$cell.row - 1; // rows start at 1
		                    gc = cell.gs$cell.col - 1; // columns start at 1

		                    // If both row and col falls inside start and end set the
		                    // transposed cell value in the newly created columns
		                    if (gc >= startColumn && gc <= endColumn &&
		                        gr >= startRow && gr <= endRow) {

		                        cellInner = cell.gs$cell || cell.content;

		                        val = null;

		                        if (cellInner.numericValue) {
		                            if (cellInner.$t.indexOf('/') >= 0 ||
		                                cellInner.$t.indexOf('-') >= 0) {
		                                // This is a date - for future reference.
		                                val = cellInner.$t;
		                            } else if (cellInner.$t.indexOf('%') > 0) {
		                                // Percentage
		                                val = parseFloat(cellInner.numericValue) * 100;
		                            } else {
		                                val = parseFloat(cellInner.numericValue);
		                            }
		                        } else if (cellInner.$t && cellInner.$t.length) {
		                            val = cellInner.$t;
		                        }

		                        columns[gc - startColumn][gr - startRow] = val;
		                    }
		                }

		                // Insert null for empty spreadsheet cells (#5298)
		                columns.forEach(function (column) {
		                    for (i = 0; i < column.length; i++) {
		                        if (column[i] === undefined) {
		                            column[i] = null;
		                        }
		                    }
		                });

		                if (chart && chart.series) {
		                    chart.update({
		                        data: {
		                            columns: columns
		                        }
		                    });
		                } else { // #8245
		                    data.columns = columns;
		                    data.dataFound();
		                }
		            });
		        }

		        // This is an intermediate fetch, so always return false.
		        return false;
		    },

		    /**
		     * Trim a string from whitespaces.
		     *
		     * @function Highcharts.Data#trim
		     *
		     * @param {string} str
		     *        String to trim
		     *
		     * @param {boolean} [inside=false]
		     *        Remove all spaces between numbers.
		     *
		     * @return {string}
		     *         Trimed string
		     */
		    trim: function (str, inside) {
		        if (typeof str === 'string') {
		            str = str.replace(/^\s+|\s+$/g, '');

		            // Clear white space insdie the string, like thousands separators
		            if (inside && /^[0-9\s]+$/.test(str)) {
		                str = str.replace(/\s/g, '');
		            }

		            if (this.decimalRegex) {
		                str = str.replace(this.decimalRegex, '$1.$2');
		            }
		        }
		        return str;
		    },

		    /**
		     * Parse numeric cells in to number types and date types in to true dates.
		     *
		     * @function Highcharts.Data#parseTypes
		     */
		    parseTypes: function () {
		        var columns = this.columns,
		            col = columns.length;

		        while (col--) {
		            this.parseColumn(columns[col], col);
		        }

		    },

		    /**
		     * Parse a single column. Set properties like .isDatetime and .isNumeric.
		     *
		     * @function Highcharts.Data#parseColumn
		     *
		     * @param {Array<*>} column
		     *        Column to parse
		     *
		     * @param {number} col
		     *        Column index
		     */
		    parseColumn: function (column, col) {
		        var rawColumns = this.rawColumns,
		            columns = this.columns,
		            row = column.length,
		            val,
		            floatVal,
		            trimVal,
		            trimInsideVal,
		            firstRowAsNames = this.firstRowAsNames,
		            isXColumn = this.valueCount.xColumns.indexOf(col) !== -1,
		            dateVal,
		            backup = [],
		            diff,
		            chartOptions = this.chartOptions,
		            descending,
		            columnTypes = this.options.columnTypes || [],
		            columnType = columnTypes[col],
		            forceCategory = isXColumn && ((
		                chartOptions &&
		                chartOptions.xAxis &&
		                splat(chartOptions.xAxis)[0].type === 'category'
		            ) || columnType === 'string');

		        if (!rawColumns[col]) {
		            rawColumns[col] = [];
		        }
		        while (row--) {
		            val = backup[row] || column[row];

		            trimVal = this.trim(val);
		            trimInsideVal = this.trim(val, true);
		            floatVal = parseFloat(trimInsideVal);

		            // Set it the first time
		            if (rawColumns[col][row] === undefined) {
		                rawColumns[col][row] = trimVal;
		            }

		            // Disable number or date parsing by setting the X axis type to
		            // category
		            if (forceCategory || (row === 0 && firstRowAsNames)) {
		                column[row] = '' + trimVal;

		            } else if (+trimInsideVal === floatVal) { // is numeric

		                column[row] = floatVal;

		                // If the number is greater than milliseconds in a year, assume
		                // datetime
		                if (
		                    floatVal > 365 * 24 * 3600 * 1000 &&
		                    columnType !== 'float'
		                ) {
		                    column.isDatetime = true;
		                } else {
		                    column.isNumeric = true;
		                }

		                if (column[row + 1] !== undefined) {
		                    descending = floatVal > column[row + 1];
		                }

		            // String, continue to determine if it is a date string or really a
		            // string
		            } else {
		                if (trimVal && trimVal.length) {
		                    dateVal = this.parseDate(val);
		                }

		                // Only allow parsing of dates if this column is an x-column
		                if (isXColumn && isNumber(dateVal) && columnType !== 'float') {
		                    backup[row] = val;
		                    column[row] = dateVal;
		                    column.isDatetime = true;

		                    // Check if the dates are uniformly descending or ascending.
		                    // If they are not, chances are that they are a different
		                    // time format, so check for alternative.
		                    if (column[row + 1] !== undefined) {
		                        diff = dateVal > column[row + 1];
		                        if (diff !== descending && descending !== undefined) {
		                            if (this.alternativeFormat) {
		                                this.dateFormat = this.alternativeFormat;
		                                row = column.length;
		                                this.alternativeFormat =
		                                    this.dateFormats[this.dateFormat]
		                                        .alternative;
		                            } else {
		                                column.unsorted = true;
		                            }
		                        }
		                        descending = diff;
		                    }

		                } else { // string
		                    column[row] = trimVal === '' ? null : trimVal;
		                    if (row !== 0 && (column.isDatetime || column.isNumeric)) {
		                        column.mixed = true;
		                    }
		                }
		            }
		        }

		        // If strings are intermixed with numbers or dates in a parsed column,
		        // it is an indication that parsing went wrong or the data was not
		        // intended to display as numbers or dates and parsing is too
		        // aggressive. Fall back to categories. Demonstrated in the
		        // highcharts/demo/column-drilldown sample.
		        if (isXColumn && column.mixed) {
		            columns[col] = rawColumns[col];
		        }

		        // If the 0 column is date or number and descending, reverse all
		        // columns.
		        if (isXColumn && descending && this.options.sort) {
		            for (col = 0; col < columns.length; col++) {
		                columns[col].reverse();
		                if (firstRowAsNames) {
		                    columns[col].unshift(columns[col].pop());
		                }
		            }
		        }
		    },

		    /**
		     * A collection of available date formats, extendable from the outside to
		     * support custom date formats.
		     *
		     * @name Highcharts.Data#dateFormats
		     * @type {Highcharts.Dictionary<Highcharts.DataDateFormatObject>}
		     */
		    dateFormats: {
		        'YYYY/mm/dd': {
		            regex: /^([0-9]{4})[\-\/\.]([0-9]{1,2})[\-\/\.]([0-9]{1,2})$/,
		            parser: function (match) {
		                return Date.UTC(+match[1], match[2] - 1, +match[3]);
		            }
		        },
		        'dd/mm/YYYY': {
		            regex: /^([0-9]{1,2})[\-\/\.]([0-9]{1,2})[\-\/\.]([0-9]{4})$/,
		            parser: function (match) {
		                return Date.UTC(+match[3], match[2] - 1, +match[1]);
		            },
		            alternative: 'mm/dd/YYYY' // different format with the same regex
		        },
		        'mm/dd/YYYY': {
		            regex: /^([0-9]{1,2})[\-\/\.]([0-9]{1,2})[\-\/\.]([0-9]{4})$/,
		            parser: function (match) {
		                return Date.UTC(+match[3], match[1] - 1, +match[2]);
		            }
		        },
		        'dd/mm/YY': {
		            regex: /^([0-9]{1,2})[\-\/\.]([0-9]{1,2})[\-\/\.]([0-9]{2})$/,
		            parser: function (match) {
		                var year = +match[3],
		                    d = new Date()
		                ;

		                if (year > (d.getFullYear() - 2000)) {
		                    year += 1900;
		                } else {
		                    year += 2000;
		                }

		                return Date.UTC(year, match[2] - 1, +match[1]);
		            },
		            alternative: 'mm/dd/YY' // different format with the same regex
		        },
		        'mm/dd/YY': {
		            regex: /^([0-9]{1,2})[\-\/\.]([0-9]{1,2})[\-\/\.]([0-9]{2})$/,
		            parser: function (match) {
		                return Date.UTC(+match[3] + 2000, match[1] - 1, +match[2]);
		            }
		        }
		    },

		    /**
		     * Parse a date and return it as a number. Overridable through
		     * `options.parseDate`.
		     *
		     * @function Highcharts.Data#parseDate
		     *
		     * @param {string} val
		     *
		     * @return {global.Date}
		     */
		    parseDate: function (val) {
		        var parseDate = this.options.parseDate,
		            ret,
		            key,
		            format,
		            dateFormat = this.options.dateFormat || this.dateFormat,
		            match;

		        if (parseDate) {
		            ret = parseDate(val);

		        } else if (typeof val === 'string') {
		            // Auto-detect the date format the first time
		            if (!dateFormat) {
		                for (key in this.dateFormats) {
		                    format = this.dateFormats[key];
		                    match = val.match(format.regex);
		                    if (match) {
		                        this.dateFormat = dateFormat = key;
		                        this.alternativeFormat = format.alternative;
		                        ret = format.parser(match);
		                        break;
		                    }
		                }
		            // Next time, use the one previously found
		            } else {
		                format = this.dateFormats[dateFormat];


		                if (!format) {
		                    // The selected format is invalid
		                    format = this.dateFormats['YYYY/mm/dd'];
		                }

		                match = val.match(format.regex);
		                if (match) {
		                    ret = format.parser(match);
		                }

		            }
		            // Fall back to Date.parse
		            if (!match) {
		                match = Date.parse(val);
		                // External tools like Date.js and MooTools extend Date object
		                // and returns a date.
		                if (
		                    typeof match === 'object' &&
		                    match !== null &&
		                    match.getTime
		                ) {
		                    ret = match.getTime() - match.getTimezoneOffset() * 60000;

		                // Timestamp
		                } else if (isNumber(match)) {
		                    ret = match - (new Date(match)).getTimezoneOffset() * 60000;
		                }
		            }
		        }
		        return ret;
		    },

		    /**
		     * Reorganize rows into columns.
		     *
		     * @function Highcharts.Data#rowsToColumns
		     *
		     * @param {Array<Array<*>>} rows
		     *
		     * @return {Array<Array<*>>}
		     */
		    rowsToColumns: function (rows) {
		        var row,
		            rowsLength,
		            col,
		            colsLength,
		            columns;

		        if (rows) {
		            columns = [];
		            rowsLength = rows.length;
		            for (row = 0; row < rowsLength; row++) {
		                colsLength = rows[row].length;
		                for (col = 0; col < colsLength; col++) {
		                    if (!columns[col]) {
		                        columns[col] = [];
		                    }
		                    columns[col][row] = rows[row][col];
		                }
		            }
		        }
		        return columns;
		    },

		    /**
		     * A hook for working directly on the parsed columns
		     *
		     * @function Highcharts.Data#parsed
		     *
		     * @return {*}
		     */
		    parsed: function () {
		        if (this.options.parsed) {
		            return this.options.parsed.call(this, this.columns);
		        }
		    },

		    /**
		     * @private
		     * @function Highcharts.Data#getFreeIndexes
		     */
		    getFreeIndexes: function (numberOfColumns, seriesBuilders) {
		        var s,
		            i,
		            freeIndexes = [],
		            freeIndexValues = [],
		            referencedIndexes;

		        // Add all columns as free
		        for (i = 0; i < numberOfColumns; i = i + 1) {
		            freeIndexes.push(true);
		        }

		        // Loop all defined builders and remove their referenced columns
		        for (s = 0; s < seriesBuilders.length; s = s + 1) {
		            referencedIndexes = seriesBuilders[s].getReferencedColumnIndexes();

		            for (i = 0; i < referencedIndexes.length; i = i + 1) {
		                freeIndexes[referencedIndexes[i]] = false;
		            }
		        }

		        // Collect the values for the free indexes
		        for (i = 0; i < freeIndexes.length; i = i + 1) {
		            if (freeIndexes[i]) {
		                freeIndexValues.push(i);
		            }
		        }

		        return freeIndexValues;
		    },

		    /**
		     * If a complete callback function is provided in the options, interpret the
		     * columns into a Highcharts options object.
		     *
		     * @function Highcharts.Data#complete
		     */
		    complete: function () {

		        var columns = this.columns,
		            xColumns = [],
		            type,
		            options = this.options,
		            series,
		            data,
		            i,
		            j,
		            r,
		            seriesIndex,
		            chartOptions,
		            allSeriesBuilders = [],
		            builder,
		            freeIndexes,
		            typeCol,
		            index;

		        xColumns.length = columns.length;
		        if (options.complete || options.afterComplete) {

		            // Get the names and shift the top row
		            if (this.firstRowAsNames) {
		                for (i = 0; i < columns.length; i++) {
		                    columns[i].name = columns[i].shift();
		                }
		            }

		            // Use the next columns for series
		            series = [];
		            freeIndexes = this.getFreeIndexes(
		                columns.length,
		                this.valueCount.seriesBuilders
		            );

		            // Populate defined series
		            for (
		                seriesIndex = 0;
		                seriesIndex < this.valueCount.seriesBuilders.length;
		                seriesIndex++
		            ) {
		                builder = this.valueCount.seriesBuilders[seriesIndex];

		                // If the builder can be populated with remaining columns, then
		                // add it to allBuilders
		                if (builder.populateColumns(freeIndexes)) {
		                    allSeriesBuilders.push(builder);
		                }
		            }

		            // Populate dynamic series
		            while (freeIndexes.length > 0) {
		                builder = new SeriesBuilder();
		                builder.addColumnReader(0, 'x');

		                // Mark index as used (not free)
		                index = freeIndexes.indexOf(0);
		                if (index !== -1) {
		                    freeIndexes.splice(index, 1);
		                }

		                for (i = 0; i < this.valueCount.global; i++) {
		                    // Create and add a column reader for the next free column
		                    // index
		                    builder.addColumnReader(
		                        undefined,
		                        this.valueCount.globalPointArrayMap[i]
		                    );
		                }

		                // If the builder can be populated with remaining columns, then
		                // add it to allBuilders
		                if (builder.populateColumns(freeIndexes)) {
		                    allSeriesBuilders.push(builder);
		                }
		            }

		            // Get the data-type from the first series x column
		            if (
		                allSeriesBuilders.length > 0 &&
		                allSeriesBuilders[0].readers.length > 0
		            ) {
		                typeCol = columns[allSeriesBuilders[0].readers[0].columnIndex];
		                if (typeCol !== undefined) {
		                    if (typeCol.isDatetime) {
		                        type = 'datetime';
		                    } else if (!typeCol.isNumeric) {
		                        type = 'category';
		                    }
		                }
		            }
		            // Axis type is category, then the "x" column should be called
		            // "name"
		            if (type === 'category') {
		                for (
		                    seriesIndex = 0;
		                    seriesIndex < allSeriesBuilders.length;
		                    seriesIndex++
		                ) {
		                    builder = allSeriesBuilders[seriesIndex];
		                    for (r = 0; r < builder.readers.length; r++) {
		                        if (builder.readers[r].configName === 'x') {
		                            builder.readers[r].configName = 'name';
		                        }
		                    }
		                }
		            }

		            // Read data for all builders
		            for (
		                seriesIndex = 0;
		                seriesIndex < allSeriesBuilders.length;
		                seriesIndex++
		            ) {
		                builder = allSeriesBuilders[seriesIndex];

		                // Iterate down the cells of each column and add data to the
		                // series
		                data = [];
		                for (j = 0; j < columns[0].length; j++) {
		                    data[j] = builder.read(columns, j);
		                }

		                // Add the series
		                series[seriesIndex] = {
		                    data: data
		                };
		                if (builder.name) {
		                    series[seriesIndex].name = builder.name;
		                }
		                if (type === 'category') {
		                    series[seriesIndex].turboThreshold = 0;
		                }
		            }



		            // Do the callback
		            chartOptions = {
		                series: series
		            };
		            if (type) {
		                chartOptions.xAxis = {
		                    type: type
		                };
		                if (type === 'category') {
		                    chartOptions.xAxis.uniqueNames = false;
		                }
		            }

		            if (options.complete) {
		                options.complete(chartOptions);
		            }

		            // The afterComplete hook is used internally to avoid conflict with
		            // the externally available complete option.
		            if (options.afterComplete) {
		                options.afterComplete(chartOptions);
		            }
		        }

		    },

		    /**
		     * Updates the chart with new data options.
		     *
		     * @function Highcharts.Data#update
		     *
		     * @param {Highcharts.DataOptions} options
		     *
		     * @param {boolean} [redraw=true]
		     */
		    update: function (options, redraw) {
		        var chart = this.chart;
		        if (options) {
		            // Set the complete handler
		            options.afterComplete = function (dataOptions) {
		                // Avoid setting axis options unless the type changes. Running
		                // Axis.update will cause the whole structure to be destroyed
		                // and rebuilt, and animation is lost.
		                if (
		                    dataOptions.xAxis &&
		                    chart.xAxis[0] &&
		                    dataOptions.xAxis.type === chart.xAxis[0].options.type
		                ) {
		                    delete dataOptions.xAxis;
		                }

		                chart.update(dataOptions, redraw, true);
		            };
		            // Apply it
		            merge(true, this.options, options);
		            this.init(this.options);
		        }
		    }
		});

		// Register the Data prototype and data function on Highcharts
		Highcharts.Data = Data;

		/**
		 * Creates a data object to parse data for a chart.
		 *
		 * @function Highcharts.data
		 *
		 * @param {Highcharts.DataOptions} dataOptions
		 *
		 * @param {Highcharts.Options} [chartOptions]
		 *
		 * @param {Highcharts.Chart} [chart]
		 *
		 * @return {Highcharts.Data}
		 */
		Highcharts.data = function (dataOptions, chartOptions, chart) {
		    return new Data(dataOptions, chartOptions, chart);
		};

		// Extend Chart.init so that the Chart constructor accepts a new configuration
		// option group, data.
		addEvent(
		    Chart,
		    'init',
		    function (e) {
		        var chart = this,
		            userOptions = e.args[0],
		            callback = e.args[1];

		        if (userOptions && userOptions.data && !chart.hasDataDef) {
		            chart.hasDataDef = true;
		            /**
		             * The data parser for this chart.
		             *
		             * @name Highcharts.Chart#data
		             * @type {Highcharts.Data|undefined}
		             */
		            chart.data = new Data(Highcharts.extend(userOptions.data, {

		                afterComplete: function (dataOptions) {
		                    var i, series;

		                    // Merge series configs
		                    if (userOptions.hasOwnProperty('series')) {
		                        if (typeof userOptions.series === 'object') {
		                            i = Math.max(
		                                userOptions.series.length,
		                                dataOptions && dataOptions.series ?
		                                    dataOptions.series.length :
		                                    0
		                            );
		                            while (i--) {
		                                series = userOptions.series[i] || {};
		                                userOptions.series[i] = merge(
		                                    series,
		                                    dataOptions && dataOptions.series ?
		                                        dataOptions.series[i] :
		                                        {}
		                                );
		                            }
		                        } else { // Allow merging in dataOptions.series (#2856)
		                            delete userOptions.series;
		                        }
		                    }

		                    // Do the merge
		                    userOptions = merge(dataOptions, userOptions);

		                    // Run chart.init again
		                    chart.init(userOptions, callback);
		                }
		            }), userOptions, chart);

		            e.preventDefault();
		        }
		    }
		);

		/**
		 * Creates a new SeriesBuilder. A SeriesBuilder consists of a number
		 * of ColumnReaders that reads columns and give them a name.
		 * Ex: A series builder can be constructed to read column 3 as 'x' and
		 * column 7 and 8 as 'y1' and 'y2'.
		 * The output would then be points/rows of the form {x: 11, y1: 22, y2: 33}
		 *
		 * The name of the builder is taken from the second column. In the above
		 * example it would be the column with index 7.
		 *
		 * @private
		 * @class
		 * @name SeriesBuilder
		 */
		SeriesBuilder = function () {
		    this.readers = [];
		    this.pointIsArray = true;
		};

		/**
		 * Populates readers with column indexes. A reader can be added without
		 * a specific index and for those readers the index is taken sequentially
		 * from the free columns (this is handled by the ColumnCursor instance).
		 *
		 * @function SeriesBuilder#populateColumns
		 *
		 * @param {Array<number>} freeIndexes
		 *
		 * @returns {boolean}
		 */
		SeriesBuilder.prototype.populateColumns = function (freeIndexes) {
		    var builder = this,
		        enoughColumns = true;

		    // Loop each reader and give it an index if its missing.
		    // The freeIndexes.shift() will return undefined if there
		    // are no more columns.
		    builder.readers.forEach(function (reader) {
		        if (reader.columnIndex === undefined) {
		            reader.columnIndex = freeIndexes.shift();
		        }
		    });

		    // Now, all readers should have columns mapped. If not
		    // then return false to signal that this series should
		    // not be added.
		    builder.readers.forEach(function (reader) {
		        if (reader.columnIndex === undefined) {
		            enoughColumns = false;
		        }
		    });

		    return enoughColumns;
		};

		/**
		 * Reads a row from the dataset and returns a point or array depending
		 * on the names of the readers.
		 *
		 * @function SeriesBuilder#read
		 *
		 * @param {Array<Array<*>>} columns
		 *
		 * @param {number} rowIndex
		 *
		 * @returns {Array<*>|*}
		 */
		SeriesBuilder.prototype.read = function (columns, rowIndex) {
		    var builder = this,
		        pointIsArray = builder.pointIsArray,
		        point = pointIsArray ? [] : {},
		        columnIndexes;

		    // Loop each reader and ask it to read its value.
		    // Then, build an array or point based on the readers names.
		    builder.readers.forEach(function (reader) {
		        var value = columns[reader.columnIndex][rowIndex];
		        if (pointIsArray) {
		            point.push(value);
		        } else {
		            if (reader.configName.indexOf('.') > 0) {
		                // Handle nested property names
		                Highcharts.Point.prototype.setNestedProperty(
		                    point, value, reader.configName
		                );
		            } else {
		                point[reader.configName] = value;
		            }
		        }
		    });

		    // The name comes from the first column (excluding the x column)
		    if (this.name === undefined && builder.readers.length >= 2) {
		        columnIndexes = builder.getReferencedColumnIndexes();
		        if (columnIndexes.length >= 2) {
		            // remove the first one (x col)
		            columnIndexes.shift();

		            // Sort the remaining
		            columnIndexes.sort(function (a, b) {
		                return a - b;
		            });

		            // Now use the lowest index as name column
		            this.name = columns[columnIndexes.shift()].name;
		        }
		    }

		    return point;
		};

		/**
		 * Creates and adds ColumnReader from the given columnIndex and configName.
		 * ColumnIndex can be undefined and in that case the reader will be given
		 * an index when columns are populated.
		 *
		 * @function SeriesBuilder#addColumnReader
		 *
		 * @param {number} columnIndex
		 *
		 * @param {string} configName
		 */
		SeriesBuilder.prototype.addColumnReader = function (columnIndex, configName) {
		    this.readers.push({
		        columnIndex: columnIndex,
		        configName: configName
		    });

		    if (
		        !(configName === 'x' || configName === 'y' || configName === undefined)
		    ) {
		        this.pointIsArray = false;
		    }
		};

		/**
		 * Returns an array of column indexes that the builder will use when
		 * reading data.
		 *
		 * @function SeriesBuilder#getReferencedColumnIndexes
		 *
		 * @returns {Array<number>}
		 */
		SeriesBuilder.prototype.getReferencedColumnIndexes = function () {
		    var i,
		        referencedColumnIndexes = [],
		        columnReader;

		    for (i = 0; i < this.readers.length; i = i + 1) {
		        columnReader = this.readers[i];
		        if (columnReader.columnIndex !== undefined) {
		            referencedColumnIndexes.push(columnReader.columnIndex);
		        }
		    }

		    return referencedColumnIndexes;
		};

		/**
		 * Returns true if the builder has a reader for the given configName.
		 *
		 * @function SeriesBuider#hasReader
		 *
		 * @param {string} configName
		 *
		 * @returns {boolean}
		 */
		SeriesBuilder.prototype.hasReader = function (configName) {
		    var i, columnReader;
		    for (i = 0; i < this.readers.length; i = i + 1) {
		        columnReader = this.readers[i];
		        if (columnReader.configName === configName) {
		            return true;
		        }
		    }
		    // Else return undefined
		};

	}(Highcharts));
	(function (H) {
		/* *
		 * Plugin for resizing axes / panes in a chart.
		 *
		 * (c) 2010-2017 Highsoft AS
		 * Author: Kacper Madej
		 *
		 * License: www.highcharts.com/license
		 */



		var hasTouch = H.hasTouch,
		    merge = H.merge,
		    wrap = H.wrap,
		    isNumber = H.isNumber,
		    addEvent = H.addEvent,
		    relativeLength = H.relativeLength,
		    objectEach = H.objectEach,
		    Axis = H.Axis,
		    Pointer = H.Pointer,

		    // Default options for AxisResizer.
		    resizerOptions = {
		        /**
		         * Minimal size of a resizable axis. Could be set as a percent
		         * of plot area or pixel size.
		         *
		         * This feature requires the `drag-panes.js` module.
		         *
		         * @type      {Number|String}
		         * @product   highstock
		         * @sample    {highstock} stock/yaxis/resize-min-max-length
		         *            minLength and maxLength
		         * @apioption yAxis.minLength
		         */
		        minLength: '10%',

		        /**
		         * Maximal size of a resizable axis. Could be set as a percent
		         * of plot area or pixel size.
		         *
		         * This feature requires the `drag-panes.js` module.
		         *
		         * @type      {String|Number}
		         * @product   highstock
		         * @sample    {highstock} stock/yaxis/resize-min-max-length
		         *            minLength and maxLength
		         * @apioption yAxis.maxLength
		         */
		        maxLength: '100%',

		        /**
		         * Options for axis resizing. This feature requires the
		         * `drag-panes.js` -
		         * [classic](http://code.highcharts.com/stock/modules/drag-panes.js) or
		         * [styled](http://code.highcharts.com/stock/js/modules/drag-panes.js)
		         * mode - module.
		         *
		         * @product highstock
		         * @sample    {highstock} stock/demo/candlestick-and-volume
		         *          Axis resizing enabled
		         * @optionparent yAxis.resize
		         */
		        resize: {

		            /**
		             * Contains two arrays of axes that are controlled by control line
		             * of the axis.
		             *
		             * This feature requires the `drag-panes.js` module.
		             */
		            controlledAxis: {

		                /**
		                 * Array of axes that should move out of the way of resizing
		                 * being done for the current axis. If not set, the next axis
		                 * will be used.
		                 *
		                 * This feature requires the `drag-panes.js` module.
		                 *
		                 * @type    {Array<String|Number>}
		                 * @default []
		                 * @sample  {highstock} stock/yaxis/multiple-resizers
		                 *          Three panes with resizers
		                 * @sample  {highstock} stock/yaxis/resize-multiple-axes
		                 *          One resizer controlling multiple axes
		                 */
		                next: [],

		                /**
		                 * Array of axes that should move with the current axis
		                 * while resizing.
		                 *
		                 * This feature requires the `drag-panes.js` module.
		                 *
		                 * @type    {Array<String|Number>}
		                 * @sample  {highstock} stock/yaxis/multiple-resizers
		                 *          Three panes with resizers
		                 * @sample  {highstock} stock/yaxis/resize-multiple-axes
		                 *          One resizer controlling multiple axes
		                 */
		                prev: []
		            },

		            /**
		             * Enable or disable resize by drag for the axis.
		             *
		             * This feature requires the `drag-panes.js` module.
		             *
		             * @sample {highstock} stock/demo/candlestick-and-volume
		             *         Enabled resizer
		             */
		            enabled: false,

		            /**
		             * Cursor style for the control line.
		             *
		             * In styled mode use class `highcharts-axis-resizer` instead.
		             *
		             * This feature requires the `drag-panes.js` module.
		             */
		            cursor: 'ns-resize',

		            /**
		             * Color of the control line.
		             *
		             * In styled mode use class `highcharts-axis-resizer` instead.
		             *
		             * This feature requires the `drag-panes.js` module.
		             *
		             * @type   {Color}
		             * @sample {highstock} stock/yaxis/styled-resizer Styled resizer
		             */
		            lineColor: '#cccccc',

		            /**
		             * Dash style of the control line.
		             *
		             * In styled mode use class `highcharts-axis-resizer` instead.
		             *
		             * This feature requires the `drag-panes.js` module.
		             *
		             * @sample {highstock} stock/yaxis/styled-resizer Styled resizer
		             * @see    For supported options check
		             *         [dashStyle](#plotOptions.series.dashStyle)
		             */
		            lineDashStyle: 'Solid',

		            /**
		             * Width of the control line.
		             *
		             * In styled mode use class `highcharts-axis-resizer` instead.
		             *
		             * This feature requires the `drag-panes.js` module.
		             *
		             * @sample {highstock} stock/yaxis/styled-resizer Styled resizer
		             */
		            lineWidth: 4,

		            /**
		             * Horizontal offset of the control line.
		             *
		             * This feature requires the `drag-panes.js` module.
		             *
		             * @sample {highstock} stock/yaxis/styled-resizer Styled resizer
		             */
		            x: 0,

		            /**
		             * Vertical offset of the control line.
		             *
		             * This feature requires the `drag-panes.js` module.
		             *
		             * @sample {highstock} stock/yaxis/styled-resizer Styled resizer
		             */
		            y: 0
		        }
		    };
		merge(true, Axis.prototype.defaultYAxisOptions, resizerOptions);

		/**
		 * The AxisResizer class.
		 *
		 * @private
		 * @class
		 * @name Highcharts.AxisResizer
		 *
		 * @param {Highcharts.Axis} axis
		 *        Main axis for the AxisResizer.
		 */
		H.AxisResizer = function (axis) {
		    this.init(axis);
		};

		H.AxisResizer.prototype = {
		    /**
		     * Initiate the AxisResizer object.
		     *
		     * @function Highcharts.AxisResizer#init
		     *
		     * @param {Highcharts.Axis} axis
		     *        Main axis for the AxisResizer.
		     */
		    init: function (axis, update) {
		        this.axis = axis;
		        this.options = axis.options.resize;
		        this.render();

		        if (!update) {
		            // Add mouse events.
		            this.addMouseEvents();
		        }
		    },

		    /**
		     * Render the AxisResizer
		     *
		     * @function Highcharts.AxisResizer#render
		     */
		    render: function () {
		        var resizer = this,
		            axis = resizer.axis,
		            chart = axis.chart,
		            options = resizer.options,
		            x = options.x,
		            y = options.y,
		            // Normalize control line position according to the plot area
		            pos = Math.min(
		                Math.max(
		                    axis.top + axis.height + y,
		                    chart.plotTop
		                ),
		                chart.plotTop + chart.plotHeight
		            ),
		            attr = {},
		            lineWidth;

		        if (!chart.styledMode) {
		            attr = {
		                cursor: options.cursor,
		                stroke: options.lineColor,
		                'stroke-width': options.lineWidth,
		                dashstyle: options.lineDashStyle
		            };
		        }

		        // Register current position for future reference.
		        resizer.lastPos = pos - y;

		        if (!resizer.controlLine) {
		            resizer.controlLine = chart.renderer.path()
		                .addClass('highcharts-axis-resizer');
		        }

		        // Add to axisGroup after axis update, because the group is recreated
		        // Do .add() before path is calculated because strokeWidth() needs it.
		        resizer.controlLine.add(axis.axisGroup);

		        lineWidth = chart.styledMode ?
		            resizer.controlLine.strokeWidth() :
		            options.lineWidth;

		        attr.d = chart.renderer.crispLine(
		            [
		                'M', axis.left + x, pos,
		                'L', axis.left + axis.width + x, pos
		            ],
		            lineWidth
		        );

		        resizer.controlLine.attr(attr);
		    },

		    /**
		     * Set up the mouse and touch events for the control line.
		     *
		     * @function Highcharts.AxisResizer#addMouseEvents
		     */
		    addMouseEvents: function () {
		        var resizer = this,
		            ctrlLineElem = resizer.controlLine.element,
		            container = resizer.axis.chart.container,
		            eventsToUnbind = [],
		            mouseMoveHandler,
		            mouseUpHandler,
		            mouseDownHandler;

		        /**
		         * Create mouse events' handlers.
		         * Make them as separate functions to enable wrapping them:
		         */
		        resizer.mouseMoveHandler = mouseMoveHandler = function (e) {
		            resizer.onMouseMove(e);
		        };
		        resizer.mouseUpHandler = mouseUpHandler = function (e) {
		            resizer.onMouseUp(e);
		        };
		        resizer.mouseDownHandler = mouseDownHandler = function (e) {
		            resizer.onMouseDown(e);
		        };

		        /**
		         * Add mouse move and mouseup events. These are bind to doc/container,
		         * because resizer.grabbed flag is stored in mousedown events.
		        */
		        eventsToUnbind.push(
		            addEvent(container, 'mousemove', mouseMoveHandler),
		            addEvent(container.ownerDocument, 'mouseup', mouseUpHandler),
		            addEvent(ctrlLineElem, 'mousedown', mouseDownHandler)
		        );

		        // Touch events.
		        if (hasTouch) {
		            eventsToUnbind.push(
		                addEvent(container, 'touchmove', mouseMoveHandler),
		                addEvent(container.ownerDocument, 'touchend', mouseUpHandler),
		                addEvent(ctrlLineElem, 'touchstart', mouseDownHandler)
		            );
		        }

		        resizer.eventsToUnbind = eventsToUnbind;
		    },

		    /**
		     * Mouse move event based on x/y mouse position.
		     *
		     * @function Highcharts.AxisResizer#onMouseMove
		     *
		     * @param {global.PointerEvent} e
		     *        Mouse event.
		     */
		    onMouseMove: function (e) {
		        /*
		         * In iOS, a mousemove event with e.pageX === 0 is fired when holding
		         * the finger down in the center of the scrollbar. This should
		         * be ignored. Borrowed from Navigator.
		         */
		        if (!e.touches || e.touches[0].pageX !== 0) {
		            // Drag the control line
		            if (this.grabbed) {
		                this.hasDragged = true;
		                this.updateAxes(this.axis.chart.pointer.normalize(e).chartY -
		                    this.options.y);
		            }
		        }
		    },

		    /**
		     * Mouse up event based on x/y mouse position.
		     *
		     * @function Highcharts.AxisResizer#onMouseUp
		     *
		     * @param {global.PointerEvent} e
		     *        Mouse event.
		     */
		    onMouseUp: function (e) {
		        if (this.hasDragged) {
		            this.updateAxes(this.axis.chart.pointer.normalize(e).chartY -
		                this.options.y);
		        }

		        // Restore runPointActions.
		        this.grabbed = this.hasDragged = this.axis.chart.activeResizer = null;
		    },

		    /**
		     * Mousedown on a control line.
		     * Will store necessary information for drag&drop.
		     *
		     * @function Highcharts.AxisResizer#onMouseDown
		     */
		    onMouseDown: function () {
		        // Clear all hover effects.
		        this.axis.chart.pointer.reset(false, 0);

		        // Disable runPointActions.
		        this.grabbed = this.axis.chart.activeResizer = true;
		    },

		    /**
		     * Update all connected axes after a change of control line position
		     *
		     * @function Highcharts.AxisResizer#updateAxes
		     *
		     * @param {number} chartY
		     */
		    updateAxes: function (chartY) {
		        var resizer = this,
		            chart = resizer.axis.chart,
		            axes = resizer.options.controlledAxis,
		            nextAxes = axes.next.length === 0 ?
		                [chart.yAxis.indexOf(resizer.axis) + 1] : axes.next,
		            // Main axis is included in the prev array by default
		            prevAxes = [resizer.axis].concat(axes.prev),
		            axesConfigs = [], // prev and next configs
		            stopDrag = false,
		            plotTop = chart.plotTop,
		            plotHeight = chart.plotHeight,
		            plotBottom = plotTop + plotHeight,
		            yDelta,
		            normalize = function (val, min, max) {
		                return Math.round(Math.min(Math.max(val, min), max));
		            };

		        // Normalize chartY to plot area limits
		        chartY = Math.max(Math.min(chartY, plotBottom), plotTop);

		        yDelta = chartY - resizer.lastPos;

		        // Update on changes of at least 1 pixel in the desired direction
		        if (yDelta * yDelta < 1) {
		            return;
		        }

		        // First gather info how axes should behave
		        [prevAxes, nextAxes].forEach(function (axesGroup, isNext) {
		            axesGroup.forEach(function (axisInfo, i) {
		                // Axes given as array index, axis object or axis id
		                var axis = isNumber(axisInfo) ?
		                        // If it's a number - it's an index
		                        chart.yAxis[axisInfo] :
		                        (
		                            // If it's first elem. in first group
		                            (!isNext && !i) ?
		                                // then it's an Axis object
		                                axisInfo :
		                                // else it should be an id
		                                chart.get(axisInfo)
		                        ),
		                    axisOptions = axis && axis.options,
		                    optionsToUpdate = {},
		                    hDelta = 0,
		                    height, top,
		                    minLength, maxLength;

		                // Skip if axis is not found
		                // or it is navigator's yAxis (#7732)
		                if (
		                    !axisOptions ||
		                    axisOptions.id === 'navigator-y-axis'
		                ) {
		                    return;
		                }

		                top = axis.top;

		                minLength = Math.round(
		                    relativeLength(
		                        axisOptions.minLength,
		                        plotHeight
		                    )
		                );
		                maxLength = Math.round(
		                    relativeLength(
		                        axisOptions.maxLength,
		                        plotHeight
		                    )
		                );

		                if (isNext) {
		                    // Try to change height first. yDelta could had changed
		                    yDelta = chartY - resizer.lastPos;

		                    // Normalize height to option limits
		                    height = normalize(axis.len - yDelta, minLength, maxLength);

		                    // Adjust top, so the axis looks like shrinked from top
		                    top = axis.top + yDelta;

		                    // Check for plot area limits
		                    if (top + height > plotBottom) {
		                        hDelta = plotBottom - height - top;
		                        chartY += hDelta;
		                        top += hDelta;
		                    }

		                    // Fit to plot - when overflowing on top
		                    if (top < plotTop) {
		                        top = plotTop;
		                        if (top + height > plotBottom) {
		                            height = plotHeight;
		                        }
		                    }

		                    // If next axis meets min length, stop dragging:
		                    if (height === minLength) {
		                        stopDrag = true;
		                    }

		                    axesConfigs.push({
		                        axis: axis,
		                        options: {
		                            top: Math.round(top),
		                            height: height
		                        }
		                    });
		                } else {
		                    // Normalize height to option limits
		                    height = normalize(chartY - top, minLength, maxLength);

		                    // If prev axis meets max length, stop dragging:
		                    if (height === maxLength) {
		                        stopDrag = true;
		                    }

		                    // Check axis size limits
		                    chartY = top + height;
		                    axesConfigs.push({
		                        axis: axis,
		                        options: {
		                            height: height
		                        }
		                    });
		                }

		                optionsToUpdate.height = height;
		            });
		        });

		        // If we hit the min/maxLength with dragging, don't do anything:
		        if (!stopDrag) {
		            // Now update axes:
		            axesConfigs.forEach(function (config) {
		                config.axis.update(config.options, false);
		            });

		            chart.redraw(false);
		        }
		    },

		    /**
		     * Destroy AxisResizer. Clear outside references, clear events,
		     * destroy elements, nullify properties.
		     *
		     * @function Highcharts.AxisResizer#destroy
		     */
		    destroy: function () {
		        var resizer = this,
		            axis = resizer.axis;

		        // Clear resizer in axis
		        delete axis.resizer;

		        // Clear control line events
		        if (this.eventsToUnbind) {
		            this.eventsToUnbind.forEach(function (unbind) {
		                unbind();
		            });
		        }

		        // Destroy AxisResizer elements
		        resizer.controlLine.destroy();

		        // Nullify properties
		        objectEach(resizer, function (val, key) {
		            resizer[key] = null;
		        });
		    }
		};

		// Keep resizer reference on axis update
		Axis.prototype.keepProps.push('resizer');

		// Add new AxisResizer, update or remove it
		addEvent(Axis, 'afterRender', function () {
		    var axis = this,
		        resizer = axis.resizer,
		        resizerOptions = axis.options.resize,
		        enabled;

		    if (resizerOptions) {
		        enabled = resizerOptions.enabled !== false;

		        if (resizer) {
		            // Resizer present and enabled
		            if (enabled) {
		                // Update options
		                resizer.init(axis, true);

		            // Resizer present, but disabled
		            } else {
		                // Destroy the resizer
		                resizer.destroy();
		            }
		        } else {
		            // Resizer not present and enabled
		            if (enabled) {
		                // Add new resizer
		                axis.resizer = new H.AxisResizer(axis);
		            }
		            // Resizer not present and disabled, so do nothing
		        }
		    }
		});

		// Clear resizer on axis remove.
		addEvent(Axis, 'destroy', function (e) {
		    if (!e.keepEvents && this.resizer) {
		        this.resizer.destroy();
		    }
		});

		// Prevent any hover effects while dragging a control line of AxisResizer.
		wrap(Pointer.prototype, 'runPointActions', function (proceed) {
		    if (!this.chart.activeResizer) {
		        proceed.apply(this, Array.prototype.slice.call(arguments, 1));
		    }
		});

		// Prevent default drag action detection while dragging a control line of
		// AxisResizer. (#7563)
		wrap(Pointer.prototype, 'drag', function (proceed) {
		    if (!this.chart.activeResizer) {
		        proceed.apply(this, Array.prototype.slice.call(arguments, 1));
		    }
		});

	}(Highcharts));
	(function (H) {
		/* *
		 * (c) 2010-2018 Torstein Honsi
		 *
		 * License: www.highcharts.com/license
		 */

		/**
		 * Adjusted width and x offset of the columns for grouping.
		 *
		 * @private
		 * @interface Highcharts.ColumnMetricsObject
		 *//**
		 * Width of the columns.
		 *
		 * @name Highcharts.ColumnMetricsObject#width
		 * @type {number}
		 *//**
		 * Offset of the columns.
		 *
		 * @name Highcharts.ColumnMetricsObject#offset
		 * @type {number}
		 */



		var animObject = H.animObject,
		    color = H.color,
		    extend = H.extend,
		    defined = H.defined,
		    isNumber = H.isNumber,
		    LegendSymbolMixin = H.LegendSymbolMixin,
		    merge = H.merge,
		    noop = H.noop,
		    pick = H.pick,
		    Series = H.Series,
		    seriesType = H.seriesType,
		    svg = H.svg;

		/**
		 * The column series type.
		 *
		 * @private
		 * @class
		 * @name Highcharts.seriesTypes.column
		 *
		 * @augments Highcharts.Series
		 */
		seriesType('column', 'line'

		/**
		 * Column series display one column per value along an X axis.
		 *
		 * @sample {highcharts} highcharts/demo/column-basic/
		 *         Column chart
		 * @sample {highstock} stock/demo/column/
		 *         Column chart
		 *
		 * @extends      plotOptions.line
		 * @excluding    connectNulls, dashStyle, gapSize, gapUnit, linecap,
		 *               lineWidth, marker, connectEnds, step, useOhlcData
		 * @product      highcharts highstock
		 * @optionparent plotOptions.column
		 */
		, {

		    /**
		     * The corner radius of the border surrounding each column or bar.
		     *
		     * @sample {highcharts} highcharts/plotoptions/column-borderradius/
		     *         Rounded columns
		     *
		     * @product highcharts highstock gantt
		     */
		    borderRadius: 0,

		    /**
		     * When using automatic point colors pulled from the global [colors](colors)
		     * or series-specific [plotOptions.column.colors](series.colors)
		     * collections, this option determines whether the chart should receive
		     * one color per series or one color per point.
		     *
		     * In styled mode, the `colors` or `series.colors` arrays are not supported,
		     * and instead this option gives the points individual color class names on
		     * the form `highcharts-color-{n}`.
		     *
		     * @see [series colors](#plotOptions.column.colors)
		     *
		     * @sample {highcharts} highcharts/plotoptions/column-colorbypoint-false/
		     *         False by default
		     * @sample {highcharts} highcharts/plotoptions/column-colorbypoint-true/
		     *         True
		     *
		     * @type      {boolean}
		     * @default   false
		     * @since     2.0
		     * @product   highcharts highstock gantt
		     * @apioption plotOptions.column.colorByPoint
		     */

		    /**
		     * A series specific or series type specific color set to apply instead
		     * of the global [colors](#colors) when [colorByPoint](
		     * #plotOptions.column.colorByPoint) is true.
		     *
		     * @type      {Array<Highcharts.ColorString>}
		     * @since     3.0
		     * @product   highcharts highstock gantt
		     * @apioption plotOptions.column.colors
		     */

		    /**
		     * When true, each column edge is rounded to its nearest pixel in order
		     * to render sharp on screen. In some cases, when there are a lot of
		     * densely packed columns, this leads to visible difference in column
		     * widths or distance between columns. In these cases, setting `crisp`
		     * to `false` may look better, even though each column is rendered
		     * blurry.
		     *
		     * @sample {highcharts} highcharts/plotoptions/column-crisp-false/
		     *         Crisp is false
		     *
		     * @since   5.0.10
		     * @product highcharts highstock gantt
		     */
		    crisp: true,

		    /**
		     * Padding between each value groups, in x axis units.
		     *
		     * @sample {highcharts} highcharts/plotoptions/column-grouppadding-default/
		     *         0.2 by default
		     * @sample {highcharts} highcharts/plotoptions/column-grouppadding-none/
		     *         No group padding - all columns are evenly spaced
		     *
		     * @product highcharts highstock gantt
		     */
		    groupPadding: 0.2,

		    /**
		     * Whether to group non-stacked columns or to let them render independent
		     * of each other. Non-grouped columns will be laid out individually
		     * and overlap each other.
		     *
		     * @sample {highcharts} highcharts/plotoptions/column-grouping-false/
		     *         Grouping disabled
		     * @sample {highstock} highcharts/plotoptions/column-grouping-false/
		     *         Grouping disabled
		     *
		     * @type      {boolean}
		     * @default   true
		     * @since     2.3.0
		     * @product   highcharts highstock gantt
		     * @apioption plotOptions.column.grouping
		     */

		    /**
		     * @ignore-option
		     */
		    marker: null, // point options are specified in the base options

		    /**
		     * The maximum allowed pixel width for a column, translated to the height
		     * of a bar in a bar chart. This prevents the columns from becoming
		     * too wide when there is a small number of points in the chart.
		     *
		     * @see [pointWidth](#plotOptions.column.pointWidth)
		     *
		     * @sample {highcharts} highcharts/plotoptions/column-maxpointwidth-20/
		     *         Limited to 50
		     * @sample {highstock} highcharts/plotoptions/column-maxpointwidth-20/
		     *         Limited to 50
		     *
		     * @type      {number}
		     * @since     4.1.8
		     * @product   highcharts highstock gantt
		     * @apioption plotOptions.column.maxPointWidth
		     */

		    /**
		     * Padding between each column or bar, in x axis units.
		     *
		     * @sample {highcharts} highcharts/plotoptions/column-pointpadding-default/
		     *         0.1 by default
		     * @sample {highcharts} highcharts/plotoptions/column-pointpadding-025/
		     *          0.25
		     * @sample {highcharts} highcharts/plotoptions/column-pointpadding-none/
		     *         0 for tightly packed columns
		     *
		     * @product highcharts highstock gantt
		     */
		    pointPadding: 0.1,

		    /**
		     * A pixel value specifying a fixed width for each column or bar. When
		     * `null`, the width is calculated from the `pointPadding` and
		     * `groupPadding`.
		     *
		     * @see [maxPointWidth](#plotOptions.column.maxPointWidth)
		     *
		     * @sample {highcharts} highcharts/plotoptions/column-pointwidth-20/
		     *         20px wide columns regardless of chart width or the amount of data
		     *         points
		     *
		     * @type      {number}
		     * @since     1.2.5
		     * @product   highcharts highstock gantt
		     * @apioption plotOptions.column.pointWidth
		     */

		    /**
		     * A pixel value specifying a fixed width for the column or bar. Overrides
		     * pointWidth on the series.
		     *
		     * @type      {Number}
		     * @see       [series.pointWidth](#plotOptions.column.pointWidth)
		     * @default   undefined
		     * @since     7.0.0
		     * @product   highcharts highstock gantt
		     * @apioption series.column.data.pointWidth
		     */

		    /**
		     * The minimal height for a column or width for a bar. By default,
		     * 0 values are not shown. To visualize a 0 (or close to zero) point,
		     * set the minimal point length to a pixel value like 3\. In stacked
		     * column charts, minPointLength might not be respected for tightly
		     * packed values.
		     *
		     * @sample {highcharts} highcharts/plotoptions/column-minpointlength/
		     *         Zero base value
		     * @sample {highcharts} highcharts/plotoptions/column-minpointlength-pos-and-neg/
		     *         Positive and negative close to zero values
		     *
		     * @product highcharts highstock gantt
		     */
		    minPointLength: 0,

		    /**
		     * When the series contains less points than the crop threshold, all
		     * points are drawn, event if the points fall outside the visible plot
		     * area at the current zoom. The advantage of drawing all points (including
		     * markers and columns), is that animation is performed on updates.
		     * On the other hand, when the series contains more points than the
		     * crop threshold, the series data is cropped to only contain points
		     * that fall within the plot area. The advantage of cropping away invisible
		     * points is to increase performance on large series.
		     *
		     * @product highcharts highstock gantt
		     */
		    cropThreshold: 50,

		    /**
		     * The X axis range that each point is valid for. This determines the
		     * width of the column. On a categorized axis, the range will be 1
		     * by default (one category unit). On linear and datetime axes, the
		     * range will be computed as the distance between the two closest data
		     * points.
		     *
		     * The default `null` means it is computed automatically, but this option
		     * can be used to override the automatic value.
		     *
		     * @sample {highcharts} highcharts/plotoptions/column-pointrange/
		     *         Set the point range to one day on a data set with one week
		     *         between the points
		     *
		     * @type    {number|null}
		     * @since   2.3
		     * @product highcharts highstock gantt
		     */
		    pointRange: null,

		    states: {

		        /**
		         * Options for the hovered point. These settings override the normal
		         * state options when a point is moused over or touched.
		         *
		         * @extends   plotOptions.series.states.hover
		         * @excluding halo, lineWidth, lineWidthPlus, marker
		         * @product   highcharts highstock gantt
		         */
		        hover: {

		            /**
		             * @ignore-option
		             */
		            halo: false,

		            /**
		             * A specific border color for the hovered point. Defaults to
		             * inherit the normal state border color.
		             *
		             * @type      {Highcharts.ColorString}
		             * @product   highcharts gantt
		             * @apioption plotOptions.column.states.hover.borderColor
		             */

		            /**
		             * A specific color for the hovered point.
		             *
		             * @type      {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
		             * @product   highcharts gantt
		             * @apioption plotOptions.column.states.hover.color
		             */

		            /**
		             * How much to brighten the point on interaction. Requires the main
		             * color to be defined in hex or rgb(a) format.
		             *
		             * In styled mode, the hover brightening is by default replaced
		             * with a fill-opacity set in the `.highcharts-point:hover` rule.
		             *
		             * @sample {highcharts} highcharts/plotoptions/column-states-hover-brightness/
		             *         Brighten by 0.5
		             *
		             * @product highcharts highstock gantt
		             */
		            brightness: 0.1
		        },

		        /**
		         * Options for the selected point. These settings override the normal
		         * state options when a point is selected.
		         *
		         * @extends   plotOptions.series.states.select
		         * @excluding halo, lineWidth, lineWidthPlus, marker
		         * @product   highcharts highstock gantt
		         */
		        select: {

		            /**
		             * A specific color for the selected point.
		             *
		             * @type    {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
		             * @default #cccccc
		             * @product highcharts highstock gantt
		             */
		            color: '#cccccc',

		            /**
		             * A specific border color for the selected point.
		             *
		             * @type    {Highcharts.ColorString}
		             * @default #000000
		             * @product highcharts highstock gantt
		             */
		            borderColor: '#000000'
		        }
		    },

		    dataLabels: {

		        /**
		         * @type       {string|null}
		         */
		        align: null, // auto

		        /**
		         * @type       {string|null}
		         */
		        verticalAlign: null, // auto

		        /**
		         * @type       {number|null}
		         */
		        y: null
		    },

		    /**
		     * When this is true, the series will not cause the Y axis to cross
		     * the zero plane (or [threshold](#plotOptions.series.threshold) option)
		     * unless the data actually crosses the plane.
		     *
		     * For example, if `softThreshold` is `false`, a series of 0, 1, 2,
		     * 3 will make the Y axis show negative values according to the `minPadding`
		     * option. If `softThreshold` is `true`, the Y axis starts at 0.
		     *
		     * @since   4.1.9
		     * @product highcharts highstock
		     */
		    softThreshold: false,

		    // false doesn't work well: https://jsfiddle.net/highcharts/hz8fopan/14/
		    /**
		     * @ignore-option
		     */
		    startFromThreshold: true,

		    stickyTracking: false,

		    tooltip: {
		        distance: 6
		    },

		    /**
		     * The Y axis value to serve as the base for the columns, for distinguishing
		     * between values above and below a threshold. If `null`, the columns
		     * extend from the padding Y axis minimum.
		     *
		     * @since   2.0
		     * @product highcharts
		     */
		    threshold: 0,

		    /**
		     * The width of the border surrounding each column or bar. Defaults to `1`
		     * when there is room for a border, but to `0` when the columns are so dense
		     * that a border would cover the next column.
		     *
		     * In styled mode, the stroke width can be set with the `.highcharts-point`
		     * rule.
		     *
		     * @sample {highcharts} highcharts/plotoptions/column-borderwidth/
		     *         2px black border
		     *
		     * @type      {number}
		     * @default   undefined
		     * @product   highcharts highstock gantt
		     * @apioption plotOptions.column.borderWidth
		     */

		    /**
		     * The color of the border surrounding each column or bar.
		     *
		     * In styled mode, the border stroke can be set with the `.highcharts-point`
		     * rule.
		     *
		     * @sample {highcharts} highcharts/plotoptions/column-bordercolor/
		     *         Dark gray border
		     *
		     * @type      {Highcharts.ColorString}
		     * @default   #ffffff
		     * @product   highcharts highstock gantt
		     */
		    borderColor: '#ffffff'

		}, /** @lends seriesTypes.column.prototype */ {
		    cropShoulder: 0,
		    // When tooltip is not shared, this series (and derivatives) requires direct
		    // touch/hover. KD-tree does not apply.
		    directTouch: true,
		    trackerGroups: ['group', 'dataLabelsGroup'],
		    // use separate negative stacks, unlike area stacks where a negative point
		    // is substracted from previous (#1910)
		    negStacks: true,

		    /**
		     * Initialize the series. Extends the basic Series.init method by
		     * marking other series of the same type as dirty.
		     *
		     * @private
		     * @function Highcharts.seriesTypes.column#init
		     */
		    init: function () {
		        Series.prototype.init.apply(this, arguments);

		        var series = this,
		            chart = series.chart;

		        // if the series is added dynamically, force redraw of other
		        // series affected by a new column
		        if (chart.hasRendered) {
		            chart.series.forEach(function (otherSeries) {
		                if (otherSeries.type === series.type) {
		                    otherSeries.isDirty = true;
		                }
		            });
		        }
		    },

		    /**
		     * Return the width and x offset of the columns adjusted for grouping,
		     * groupPadding, pointPadding, pointWidth etc.
		     *
		     * @private
		     * @function Highcharts.seriesTypes.column#getColumnMetrics
		     *
		     * @return {Highcharts.ColumnMetricsObject}
		     */
		    getColumnMetrics: function () {

		        var series = this,
		            options = series.options,
		            xAxis = series.xAxis,
		            yAxis = series.yAxis,
		            reversedStacks = xAxis.options.reversedStacks,
		            // Keep backward compatibility: reversed xAxis had reversed stacks
		            reverseStacks = (xAxis.reversed && !reversedStacks) ||
		                (!xAxis.reversed && reversedStacks),
		            stackKey,
		            stackGroups = {},
		            columnCount = 0;

		        // Get the total number of column type series. This is called on every
		        // series. Consider moving this logic to a chart.orderStacks() function
		        // and call it on init, addSeries and removeSeries
		        if (options.grouping === false) {
		            columnCount = 1;
		        } else {
		            series.chart.series.forEach(function (otherSeries) {
		                var otherOptions = otherSeries.options,
		                    otherYAxis = otherSeries.yAxis,
		                    columnIndex;
		                if (
		                    otherSeries.type === series.type &&
		                    (
		                        otherSeries.visible ||
		                        !series.chart.options.chart.ignoreHiddenSeries
		                    ) &&
		                    yAxis.len === otherYAxis.len &&
		                    yAxis.pos === otherYAxis.pos
		                ) {  // #642, #2086
		                    if (otherOptions.stacking) {
		                        stackKey = otherSeries.stackKey;
		                        if (stackGroups[stackKey] === undefined) {
		                            stackGroups[stackKey] = columnCount++;
		                        }
		                        columnIndex = stackGroups[stackKey];
		                    } else if (otherOptions.grouping !== false) { // #1162
		                        columnIndex = columnCount++;
		                    }
		                    otherSeries.columnIndex = columnIndex;
		                }
		            });
		        }

		        var categoryWidth = Math.min(
		                Math.abs(xAxis.transA) * (
		                    xAxis.ordinalSlope ||
		                    options.pointRange ||
		                    xAxis.closestPointRange ||
		                    xAxis.tickInterval ||
		                    1
		                ), // #2610
		                xAxis.len // #1535
		            ),
		            groupPadding = categoryWidth * options.groupPadding,
		            groupWidth = categoryWidth - 2 * groupPadding,
		            pointOffsetWidth = groupWidth / (columnCount || 1),
		            pointWidth = Math.min(
		                options.maxPointWidth || xAxis.len,
		                pick(
		                    options.pointWidth,
		                    pointOffsetWidth * (1 - 2 * options.pointPadding)
		                )
		            ),
		            pointPadding = (pointOffsetWidth - pointWidth) / 2,
		            // #1251, #3737
		            colIndex = (series.columnIndex || 0) + (reverseStacks ? 1 : 0),
		            pointXOffset =
		                pointPadding +
		                (
		                    groupPadding +
		                    colIndex * pointOffsetWidth -
		                    (categoryWidth / 2)
		                ) * (reverseStacks ? -1 : 1);

		        // Save it for reading in linked series (Error bars particularly)
		        series.columnMetrics = {
		            width: pointWidth,
		            offset: pointXOffset
		        };
		        return series.columnMetrics;

		    },

		    /**
		     * Make the columns crisp. The edges are rounded to the nearest full pixel.
		     *
		     * @private
		     * @function Highcharts.seriesTypes.column#crispCol
		     *
		     * @param {number} x
		     *
		     * @param {number} y
		     *
		     * @param {number} w
		     *
		     * @param {number} h
		     *
		     * @return {*}
		     */
		    crispCol: function (x, y, w, h) {
		        var chart = this.chart,
		            borderWidth = this.borderWidth,
		            xCrisp = -(borderWidth % 2 ? 0.5 : 0),
		            yCrisp = borderWidth % 2 ? 0.5 : 1,
		            right,
		            bottom,
		            fromTop;

		        if (chart.inverted && chart.renderer.isVML) {
		            yCrisp += 1;
		        }

		        // Horizontal. We need to first compute the exact right edge, then round
		        // it and compute the width from there.
		        if (this.options.crisp) {
		            right = Math.round(x + w) + xCrisp;
		            x = Math.round(x) + xCrisp;
		            w = right - x;
		        }

		        // Vertical
		        bottom = Math.round(y + h) + yCrisp;
		        fromTop = Math.abs(y) <= 0.5 && bottom > 0.5; // #4504, #4656
		        y = Math.round(y) + yCrisp;
		        h = bottom - y;

		        // Top edges are exceptions
		        if (fromTop && h) { // #5146
		            y -= 1;
		            h += 1;
		        }

		        return {
		            x: x,
		            y: y,
		            width: w,
		            height: h
		        };
		    },

		    /**
		     * Translate each point to the plot area coordinate system and find shape
		     * positions
		     *
		     * @private
		     * @function Highcharts.seriesTypes.column#translate
		     */
		    translate: function () {
		        var series = this,
		            chart = series.chart,
		            options = series.options,
		            dense = series.dense =
		                series.closestPointRange * series.xAxis.transA < 2,
		            borderWidth = series.borderWidth = pick(
		                options.borderWidth,
		                dense ? 0 : 1  // #3635
		            ),
		            yAxis = series.yAxis,
		            threshold = options.threshold,
		            translatedThreshold = series.translatedThreshold =
		                yAxis.getThreshold(threshold),
		            minPointLength = pick(options.minPointLength, 5),
		            metrics = series.getColumnMetrics(),
		            seriesPointWidth = metrics.width,
		            // postprocessed for border width
		            seriesBarW = series.barW =
		                Math.max(seriesPointWidth, 1 + 2 * borderWidth),
		            seriesXOffset = series.pointXOffset = metrics.offset;

		        if (chart.inverted) {
		            translatedThreshold -= 0.5; // #3355
		        }

		        // When the pointPadding is 0, we want the columns to be packed tightly,
		        // so we allow individual columns to have individual sizes. When
		        // pointPadding is greater, we strive for equal-width columns (#2694).
		        if (options.pointPadding) {
		            seriesBarW = Math.ceil(seriesBarW);
		        }

		        Series.prototype.translate.apply(series);

		        // Record the new values
		        series.points.forEach(function (point) {
		            var yBottom = pick(point.yBottom, translatedThreshold),
		                safeDistance = 999 + Math.abs(yBottom),
		                pointWidth = seriesPointWidth,
		                plotY = Math.min(
		                    Math.max(-safeDistance, point.plotY),
		                    yAxis.len + safeDistance
		                ), // Don't draw too far outside plot area (#1303, #2241, #4264)
		                barX = point.plotX + seriesXOffset,
		                barW = seriesBarW,
		                barY = Math.min(plotY, yBottom),
		                up,
		                barH = Math.max(plotY, yBottom) - barY;

		            // Handle options.minPointLength
		            if (minPointLength && Math.abs(barH) < minPointLength) {
		                barH = minPointLength;
		                up = (!yAxis.reversed && !point.negative) ||
		                    (yAxis.reversed && point.negative);

		                // Reverse zeros if there's no positive value in the series
		                // in visible range (#7046)
		                if (
		                    point.y === threshold &&
		                    series.dataMax <= threshold &&
		                    yAxis.min < threshold // and if there's room for it (#7311)
		                ) {
		                    up = !up;
		                }

		                // If stacked...
		                barY = Math.abs(barY - translatedThreshold) > minPointLength ?
		                        // ...keep position
		                        yBottom - minPointLength :
		                        // #1485, #4051
		                        translatedThreshold - (up ? minPointLength : 0);
		            }

		            // Handle point.options.pointWidth
		            // TODO: Handle grouping/stacking as well. Calculate offset properly
		            if (defined(point.options.pointWidth)) {
		                pointWidth = barW = Math.ceil(point.options.pointWidth);
		                barX -= Math.round((pointWidth - seriesPointWidth) / 2);
		            }

		            // Cache for access in polar
		            point.barX = barX;
		            point.pointWidth = pointWidth;

		            // Fix the tooltip on center of grouped columns (#1216, #424, #3648)
		            point.tooltipPos = chart.inverted ?
		            [
		                yAxis.len + yAxis.pos - chart.plotLeft - plotY,
		                series.xAxis.len - barX - barW / 2, barH
		            ] :
		            [barX + barW / 2, plotY + yAxis.pos - chart.plotTop, barH];

		            // Register shape type and arguments to be used in drawPoints
		            // Allow shapeType defined on pointClass level
		            point.shapeType = point.shapeType || 'rect';
		            point.shapeArgs = series.crispCol.apply(
		                series,
		                point.isNull ?
		                    // #3169, drilldown from null must have a position to work
		                    // from #6585, dataLabel should be placed on xAxis, not
		                    // floating in the middle of the chart
		                    [barX, translatedThreshold, barW, 0] :
		                    [barX, barY, barW, barH]
		            );
		        });

		    },

		    getSymbol: noop,

		    /**
		     * Use a solid rectangle like the area series types
		     *
		     * @private
		     * @function Highcharts.seriesTypes.column#drawLegendSymbol
		     *
		     * @param {Highcharts.Legend} legend
		     *        The legend object
		     *
		     * @param {Highcharts.Series|Highcharts.Point} item
		     *        The series (this) or point
		     */
		    drawLegendSymbol: LegendSymbolMixin.drawRectangle,


		    /**
		     * Columns have no graph
		     *
		     * @private
		     * @function Highcharts.seriesTypes.column#drawGraph
		     */
		    drawGraph: function () {
		        this.group[
		            this.dense ? 'addClass' : 'removeClass'
		        ]('highcharts-dense-data');
		    },

		    /**
		     * Get presentational attributes
		     *
		     * @private
		     * @function Highcharts.seriesTypes.column#pointAttribs
		     *
		     * @param {Highcharts.Point} point
		     *
		     * @param {string} state
		     *
		     * @return {Highcharts.Dictionary<any>}
		     */
		    pointAttribs: function (point, state) {
		        var options = this.options,
		            stateOptions,
		            ret,
		            p2o = this.pointAttrToOptions || {},
		            strokeOption = p2o.stroke || 'borderColor',
		            strokeWidthOption = p2o['stroke-width'] || 'borderWidth',
		            fill = (point && point.color) || this.color,
		            stroke = (point && point[strokeOption]) || options[strokeOption] ||
		                this.color || fill, // set to fill when borderColor null
		            strokeWidth = (point && point[strokeWidthOption]) ||
		                options[strokeWidthOption] || this[strokeWidthOption] || 0,
		            dashstyle = options.dashStyle,
		            zone,
		            brightness;

		        // Handle zone colors
		        if (point && this.zones.length) {
		            zone = point.getZone();
		            // When zones are present, don't use point.color (#4267). Changed
		            // order (#6527)
		            fill = point.options.color || (zone && zone.color) || this.color;
		        }

		        // Select or hover states
		        if (state) {
		            stateOptions = merge(
		                options.states[state],
		                // #6401
		                point.options.states && point.options.states[state] || {}
		            );
		            brightness = stateOptions.brightness;
		            fill = stateOptions.color ||
		                (
		                    brightness !== undefined &&
		                    color(fill).brighten(stateOptions.brightness).get()
		                ) ||
		                fill;
		            stroke = stateOptions[strokeOption] || stroke;
		            strokeWidth = stateOptions[strokeWidthOption] || strokeWidth;
		            dashstyle = stateOptions.dashStyle || dashstyle;
		        }

		        ret = {
		            'fill': fill,
		            'stroke': stroke,
		            'stroke-width': strokeWidth
		        };

		        if (dashstyle) {
		            ret.dashstyle = dashstyle;
		        }

		        return ret;
		    },

		    /**
		     * Draw the columns. For bars, the series.group is rotated, so the same
		     * coordinates apply for columns and bars. This method is inherited by
		     * scatter series.
		     *
		     * @private
		     * @function Highcharts.seriesTypes.column#drawPoints
		     */
		    drawPoints: function () {
		        var series = this,
		            chart = this.chart,
		            options = series.options,
		            renderer = chart.renderer,
		            animationLimit = options.animationLimit || 250,
		            shapeArgs;

		        // draw the columns
		        series.points.forEach(function (point) {
		            var plotY = point.plotY,
		                graphic = point.graphic,
		                verb = graphic && chart.pointCount < animationLimit ?
		                    'animate' : 'attr';

		            if (isNumber(plotY) && point.y !== null) {
		                shapeArgs = point.shapeArgs;

		                if (graphic) { // update
		                    graphic[verb](
		                        merge(shapeArgs)
		                    );

		                } else {
		                    point.graphic = graphic =
		                        renderer[point.shapeType](shapeArgs)
		                            .add(point.group || series.group);
		                }

		                // Border radius is not stylable (#6900)
		                if (options.borderRadius) {
		                    graphic.attr({
		                        r: options.borderRadius
		                    });
		                }

		                // Presentational
		                if (!chart.styledMode) {
		                    graphic[verb](series.pointAttribs(
		                            point,
		                            point.selected && 'select'
		                        ))
		                        .shadow(
		                            options.shadow,
		                            null,
		                            options.stacking && !options.borderRadius
		                        );
		                }

		                graphic.addClass(point.getClassName(), true);


		            } else if (graphic) {
		                point.graphic = graphic.destroy(); // #1269
		            }
		        });
		    },

		    /**
		     * Animate the column heights one by one from zero.
		     *
		     * @private
		     * @function Highcharts.seriesTypes.column#animate
		     *
		     * @param {boolean} init
		     *        Whether to initialize the animation or run it
		     */
		    animate: function (init) {
		        var series = this,
		            yAxis = this.yAxis,
		            options = series.options,
		            inverted = this.chart.inverted,
		            attr = {},
		            translateProp = inverted ? 'translateX' : 'translateY',
		            translateStart,
		            translatedThreshold;

		        if (svg) { // VML is too slow anyway
		            if (init) {
		                attr.scaleY = 0.001;
		                translatedThreshold = Math.min(
		                    yAxis.pos + yAxis.len,
		                    Math.max(yAxis.pos, yAxis.toPixels(options.threshold))
		                );
		                if (inverted) {
		                    attr.translateX = translatedThreshold - yAxis.len;
		                } else {
		                    attr.translateY = translatedThreshold;
		                }
		                series.group.attr(attr);

		            } else { // run the animation
		                translateStart = series.group.attr(translateProp);
		                series.group.animate(
		                    { scaleY: 1 },
		                    extend(animObject(series.options.animation
		                ), {
		                    // Do the scale synchronously to ensure smooth updating
		                    // (#5030, #7228)
		                    step: function (val, fx) {

		                        attr[translateProp] =
		                            translateStart +
		                            fx.pos * (yAxis.pos - translateStart);
		                        series.group.attr(attr);
		                    }
		                }));

		                // delete this function to allow it only once
		                series.animate = null;
		            }
		        }
		    },

		    /**
		     * Remove this series from the chart
		     *
		     * @private
		     * @function Highcharts.seriesTypes.column#remove
		     */
		    remove: function () {
		        var series = this,
		            chart = series.chart;

		        // column and bar series affects other series of the same type
		        // as they are either stacked or grouped
		        if (chart.hasRendered) {
		            chart.series.forEach(function (otherSeries) {
		                if (otherSeries.type === series.type) {
		                    otherSeries.isDirty = true;
		                }
		            });
		        }

		        Series.prototype.remove.apply(series, arguments);
		    }
		});


		/**
		 * A `column` series. If the [type](#series.column.type) option is
		 * not specified, it is inherited from [chart.type](#chart.type).
		 *
		 * @extends   series,plotOptions.column
		 * @excluding connectNulls, dashStyle, dataParser, dataURL, gapSize, gapUnit,
		 *            linecap, lineWidth, marker, connectEnds, step
		 * @product   highcharts highstock
		 * @apioption series.column
		 */

		/**
		 * An array of data points for the series. For the `column` series type,
		 * points can be given in the following ways:
		 *
		 * 1. An array of numerical values. In this case, the numerical values will be
		 *    interpreted as `y` options. The `x` values will be automatically
		 *    calculated, either starting at 0 and incremented by 1, or from
		 *    `pointStart` and `pointInterval` given in the series options. If the axis
		 *    has categories, these will be used. Example:
		 *    ```js
		 *    data: [0, 5, 3, 5]
		 *    ```
		 *
		 * 2. An array of arrays with 2 values. In this case, the values correspond to
		 *    `x,y`. If the first value is a string, it is applied as the name of the
		 *    point, and the `x` value is inferred.
		 *    ```js
		 *    data: [
		 *        [0, 6],
		 *        [1, 2],
		 *        [2, 6]
		 *    ]
		 *    ```
		 *
		 * 3. 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.column.turboThreshold), this option is not
		 *    available.
		 *    ```js
		 *    data: [{
		 *        x: 1,
		 *        y: 9,
		 *        name: "Point2",
		 *        color: "#00FF00"
		 *    }, {
		 *        x: 1,
		 *        y: 6,
		 *        name: "Point1",
		 *        color: "#FF00FF"
		 *    }]
		 *    ```
		 *
		 * @sample {highcharts} highcharts/chart/reflow-true/
		 *         Numerical values
		 * @sample {highcharts} highcharts/series/data-array-of-arrays/
		 *         Arrays of numeric x and y
		 * @sample {highcharts} highcharts/series/data-array-of-arrays-datetime/
		 *         Arrays of datetime x and y
		 * @sample {highcharts} highcharts/series/data-array-of-name-value/
		 *         Arrays of point.name and y
		 * @sample {highcharts} highcharts/series/data-array-of-objects/
		 *         Config objects
		 *
		 * @type      {Array<number|Array<(number|string),number>|*>}
		 * @extends   series.line.data
		 * @excluding marker
		 * @product   highcharts highstock
		 * @apioption series.column.data
		 */

		/**
		 * The color of the border surrounding the column or bar.
		 *
		 * In styled mode, the border stroke can be set with the `.highcharts-point`
		 * rule.
		 *
		 * @sample {highcharts} highcharts/plotoptions/column-bordercolor/
		 *         Dark gray border
		 *
		 * @type      {Highcharts.ColorString}
		 * @product   highcharts highstock
		 * @apioption series.column.data.borderColor
		 */

		/**
		 * The width of the border surrounding the column or bar.
		 *
		 * In styled mode, the stroke width can be set with the `.highcharts-point`
		 * rule.
		 *
		 * @sample {highcharts} highcharts/plotoptions/column-borderwidth/
		 *         2px black border
		 *
		 * @type      {number}
		 * @product   highcharts highstock
		 * @apioption series.column.data.borderWidth
		 */

		/**
		 * @excluding halo, lineWidth, lineWidthPlus, marker
		 * @product   highcharts highstock
		 * @apioption series.column.states.hover
		 */

		/**
		 * @excluding halo, lineWidth, lineWidthPlus, marker
		 * @product   highcharts highstock
		 * @apioption series.column.states.select
		 */

	}(Highcharts));
	(function (H) {
		/* *
		 * Highcharts Drilldown module
		 *
		 * Author: Torstein Honsi
		 * License: www.highcharts.com/license
		 *
		 */

		/**
		 * Gets fired when a drilldown point is clicked, before the new series is added.
		 * Note that when clicking a category label to trigger multiple series
		 * drilldown, one `drilldown` event is triggered per point in the category.
		 *
		 * @callback Highcharts.DrilldownCallbackFunction
		 *
		 * @param {Highcharts.Chart} this
		 *        The chart where the event occurs.
		 *
		 * @param {Highcharts.DrilldownEventObject} e
		 *        The drilldown event.
		 */

		/**
		 * The event arguments when a drilldown point is clicked.
		 *
		 * @interface Highcharts.DrilldownEventObject
		 *//**
		 * If a category label was clicked, which index.
		 * @name Highcharts.DrilldownEventObject#category
		 * @type {number|undefined}
		 *//**
		 * The original browser event (usually click) that triggered the drilldown.
		 * @name Highcharts.DrilldownEventObject#originalEvent
		 * @type {global.Event|undefined}
		 *//**
		 * Prevents the default behaviour of the event.
		 * @name Highcharts.DrilldownEventObject#preventDefault
		 * @type {Function}
		 *//**
		 * The originating point.
		 * @name Highcharts.DrilldownEventObject#point
		 * @type {Highcharts.Point}
		 *//**
		 * If a category label was clicked, this array holds all points corresponing to
		 * the category. Otherwise it is set to false.
		 * @name Highcharts.DrilldownEventObject#points
		 * @type {boolean|Array<Highcharts.Point>|undefined}
		 *//**
		 * Options for the new series. If the event is utilized for async drilldown, the
		 * seriesOptions are not added, but rather loaded async.
		 * @name Highcharts.DrilldownEventObject#seriesOptions
		 * @type {Highcharts.SeriesOptionsType|undefined}
		 *//**
		 * The event target.
		 * @name Highcharts.DrilldownEventObject#target
		 * @type {Highcharts.Chart}
		 *//**
		 * The event type.
		 * @name Highcharts.DrilldownEventObject#type
		 * @type {"drilldown"}
		 */

		/**
		 * This gets fired after all the series have been drilled up. This is especially
		 * usefull in a chart with multiple drilldown series.
		 *
		 * @callback Highcharts.DrillupAllCallbackFunction
		 *
		 * @param {Highcharts.Chart} this
		 *        The chart where the event occurs.
		 *
		 * @param {Highcharts.DrillupAllEventObject} e
		 *        The final drillup event.
		 */

		/**
		 * The event arguments when all the series have been drilled up.
		 *
		 * @interface Highcharts.DrillupAllEventObject
		 *//**
		 * Prevents the default behaviour of the event.
		 * @name Highcharts.DrillupAllEventObject#preventDefault
		 * @type {Function}
		 *//**
		 * The event target.
		 * @name Highcharts.DrillupAllEventObject#target
		 * @type {Highcharts.Chart}
		 *//**
		 * The event type.
		 * @name Highcharts.DrillupAllEventObject#type
		 * @type {"drillupall"}
		 */

		/**
		 * Gets fired when drilling up from a drilldown series.
		 *
		 * @callback Highcharts.DrillupCallbackFunction
		 *
		 * @param {Highcharts.Chart} this
		 *        The chart where the event occurs.
		 *
		 * @param {Highcharts.DrillupEventObject} e
		 *        The drillup event.
		 */

		/**
		 * The event arguments when drilling up from a drilldown series.
		 *
		 * @interface Highcharts.DrillupEventObject
		 *//**
		 * Prevents the default behaviour of the event.
		 * @name Highcharts.DrillupEventObject#preventDefault
		 * @type {Function}
		 *//**
		 * Options for the new series.
		 * @name Highcharts.DrillupEventObject#seriesOptions
		 * @type {Highcharts.SeriesOptionsType|undefined}
		 *//**
		 * The event target.
		 * @name Highcharts.DrillupEventObject#target
		 * @type {Highcharts.Chart}
		 *//**
		 * The event type.
		 * @name Highcharts.DrillupEventObject#type
		 * @type {"drillup"}
		 */



		var animObject = H.animObject,
		    noop = H.noop,
		    color = H.color,
		    defaultOptions = H.defaultOptions,
		    extend = H.extend,
		    format = H.format,
		    objectEach = H.objectEach,
		    pick = H.pick,
		    Chart = H.Chart,
		    seriesTypes = H.seriesTypes,
		    PieSeries = seriesTypes.pie,
		    ColumnSeries = seriesTypes.column,
		    Tick = H.Tick,
		    fireEvent = H.fireEvent,
		    ddSeriesId = 1;

		// Add language
		extend(defaultOptions.lang,
		    /**
		     * @optionparent lang
		     */
		    {
		        /**
		         * The text for the button that appears when drilling down, linking back
		         * to the parent series. The parent series' name is inserted for
		         * `{series.name}`.
		         *
		         * @since   3.0.8
		         * @product highcharts highmaps
		         */
		        drillUpText: '◁ Back to {series.name}'
		    }
		);

		/**
		 * Options for drill down, the concept of inspecting increasingly high
		 * resolution data through clicking on chart items like columns or pie slices.
		 *
		 * The drilldown feature requires the drilldown.js file to be loaded,
		 * found in the modules directory of the download package, or online at
		 * [code.highcharts.com/modules/drilldown.js
		 * ](code.highcharts.com/modules/drilldown.js).
		 *
		 * @product      highcharts highstock highmaps
		 * @optionparent drilldown
		 */
		defaultOptions.drilldown = {

		    /**
		     * When this option is false, clicking a single point will drill down
		     * all points in the same category, equivalent to clicking the X axis
		     * label.
		     *
		     * @sample {highcharts} highcharts/drilldown/allowpointdrilldown-false/
		     *         Don't allow point drilldown
		     *
		     * @type      {boolean}
		     * @default   true
		     * @since     4.1.7
		     * @product   highcharts
		     * @apioption drilldown.allowPointDrilldown
		     */

		    /**
		     * An array of series configurations for the drill down. Each series
		     * configuration uses the same syntax as the [series](#series) option set.
		     * These drilldown series are hidden by default. The drilldown series is
		     * linked to the parent series' point by its `id`.
		     *
		     * @type      {Array<Highcharts.SeriesOptionsType>}
		     * @since     3.0.8
		     * @product   highcharts highmaps
		     * @apioption drilldown.series
		     */

		    /**
		     * Additional styles to apply to the X axis label for a point that
		     * has drilldown data. By default it is underlined and blue to invite
		     * to interaction.
		     *
		     * In styled mode, active label styles can be set with the
		     * `.highcharts-drilldown-axis-label` class.
		     *
		     * @sample {highcharts} highcharts/drilldown/labels/
		     *         Label styles
		     *
		     * @type    {Highcharts.CSSObject}
		     * @default { "cursor": "pointer", "color": "#003399", "fontWeight": "bold", "textDecoration": "underline" }
		     * @since   3.0.8
		     * @product highcharts highmaps
		     */
		    activeAxisLabelStyle: {
		        /** @ignore-option */
		        cursor: 'pointer',
		        /** @ignore-option */
		        color: '#003399',
		        /** @ignore-option */
		        fontWeight: 'bold',
		        /** @ignore-option */
		        textDecoration: 'underline'
		    },

		    /**
		     * Additional styles to apply to the data label of a point that has
		     * drilldown data. By default it is underlined and blue to invite to
		     * interaction.
		     *
		     * In styled mode, active data label styles can be applied with the
		     * `.highcharts-drilldown-data-label` class.
		     *
		     * @sample {highcharts} highcharts/drilldown/labels/
		     *         Label styles
		     *
		     * @type    {Highcharts.CSSObject}
		     * @default { "cursor": "pointer", "color": "#003399", "fontWeight": "bold", "textDecoration": "underline" }
		     * @since   3.0.8
		     * @product highcharts highmaps
		     */
		    activeDataLabelStyle: {
		        cursor: 'pointer',
		        color: '#003399',
		        fontWeight: 'bold',
		        textDecoration: 'underline'
		    },

		    /**
		     * Set the animation for all drilldown animations. Animation of a drilldown
		     * occurs when drilling between a column point and a column series,
		     * or a pie slice and a full pie series. Drilldown can still be used
		     * between series and points of different types, but animation will
		     * not occur.
		     *
		     * The animation can either be set as a boolean or a configuration
		     * object. If `true`, it will use the 'swing' jQuery easing and a duration
		     * of 500 ms. If used as a configuration object, the following properties
		     * are supported:
		     *
		     * - `duration`: The duration of the animation in milliseconds.
		     *
		     * - `easing`: A string reference to an easing function set on the `Math`
		     *   object. See
		     *   [the easing demo](https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/series-animation-easing/).
		     *
		     * @type    {boolean|Highcharts.AnimationOptionsObject}
		     * @default { "duration": 500 }
		     * @since   3.0.8
		     * @product highcharts highmaps
		     */
		    animation: {
		        /** @ignore-option */
		        duration: 500
		    },

		    /**
		     * Options for the drill up button that appears when drilling down on a
		     * series. The text for the button is defined in
		     * [lang.drillUpText](#lang.drillUpText).
		     *
		     * @sample {highcharts} highcharts/drilldown/drillupbutton/
		     *         Drill up button
		     * @sample {highmaps} highcharts/drilldown/drillupbutton/
		     *         Drill up button
		     *
		     * @since   3.0.8
		     * @product highcharts highmaps
		     */
		    drillUpButton: {
		        /**
		         * What box to align the button to. Can be either `plotBox` or
		         * `spacingBox`.
		         *
		         * @type       {string}
		         * @default    plotBox
		         * @since      3.0.8
		         * @product    highcharts highmaps
		         * @validvalue ["plotBox", "spacingBox"]
		         * @apioption  drilldown.drillUpButton.relativeTo
		         */

		        /**
		         * A collection of attributes for the button. The object takes SVG
		         * attributes like `fill`, `stroke`, `stroke-width` or `r`, the border
		         * radius. The theme also supports `style`, a collection of CSS
		         * properties for the text. Equivalent attributes for the hover state
		         * are given in `theme.states.hover`.
		         *
		         * In styled mode, drill-up button styles can be applied with the
		         * `.highcharts-drillup-button` class.
		         *
		         * @sample {highcharts} highcharts/drilldown/drillupbutton/
		         *         Button theming
		         * @sample {highmaps} highcharts/drilldown/drillupbutton/
		         *         Button theming
		         *
		         * @type      {object}
		         * @since     3.0.8
		         * @product   highcharts highmaps
		         * @apioption drilldown.drillUpButton.theme
		         */

		        /**
		         * Positioning options for the button within the `relativeTo` box.
		         * Available properties are `x`, `y`, `align` and `verticalAlign`.
		         *
		         * @since   3.0.8
		         * @product highcharts highmaps
		         */
		        position: {

		            /**
		             * Vertical alignment of the button.
		             *
		             * @type       {string}
		             * @default    top
		             * @product    highcharts highmaps
		             * @validvalue ["top", "middle", "bottom"]
		             * @apioption  drilldown.drillUpButton.position.verticalAlign
		             */

		            /**
		             * Horizontal alignment.
		             *
		             * @type       {string}
		             * @validvalue ["left", "center", "right"]
		             */
		            align: 'right',

		            /**
		             * The X offset of the button.
		             */
		            x: -10,

		            /**
		             * The Y offset of the button.
		             */
		            y: 10
		        }
		    }
		};



		/**
		 * Fires when a drilldown point is clicked, before the new series is added. This
		 * event is also utilized for async drilldown, where the seriesOptions are not
		 * added by option, but rather loaded async. Note that when clicking a category
		 * label to trigger multiple series drilldown, one `drilldown` event is
		 * triggered per point in the category.
		 *
		 * Event arguments:
		 *
		 * - `category`: If a category label was clicked, which index.</dd>
		 *
		 * - `originalEvent`: The original browser event (usually click) that triggered
		 *   the drilldown.
		 *
		 * - `point`: The originating point.
		 *
		 * - `points`: If a category label was clicked, this array holds all points
		 *   corresponing to the category.</dd>
		 *
		 * - `seriesOptions`: Options for the new series.
		 *
		 * @sample {highcharts} highcharts/drilldown/async/
		 *         Async drilldown
		 *
		 * @type      {Highcharts.DrilldownCallbackFunction}
		 * @since     3.0.8
		 * @product   highcharts highmaps
		 * @context   Highcharts.Chart
		 * @apioption chart.events.drilldown
		 */

		 /**
		 * Fires when drilling up from a drilldown series.
		 *
		 * @type      {Highcharts.DrillupCallbackFunction}
		 * @since     3.0.8
		 * @product   highcharts highmaps
		 * @context   Highcharts.Chart
		 * @apioption chart.events.drillup
		 */

		/**
		 * In a chart with multiple drilldown series, this event fires after all the
		 * series have been drilled up.
		 *
		 * @type      {Highcharts.DrillupAllCallbackFunction}
		 * @since     4.2.4
		 * @product   highcharts highmaps
		 * @context   Highcharts.Chart
		 * @apioption chart.events.drillupall
		 */

		/**
		 * The `id` of a series in the [drilldown.series](#drilldown.series) array to
		 * use for a drilldown for this point.
		 *
		 * @sample {highcharts} highcharts/drilldown/basic/
		 *         Basic drilldown
		 *
		 * @type      {string}
		 * @since     3.0.8
		 * @product   highcharts
		 * @apioption series.line.data.drilldown
		 */

		/**
		 * A general fadeIn method.
		 *
		 * @requires module:modules/drilldown
		 *
		 * @function Highcharts.SVGElement#fadeIn
		 *
		 * @param {Highcharts.AnimationOptionsObject} [animation]
		 */
		H.SVGRenderer.prototype.Element.prototype.fadeIn = function (animation) {
		    this
		    .attr({
		        opacity: 0.1,
		        visibility: 'inherit'
		    })
		    .animate({
		        opacity: pick(this.newOpacity, 1) // newOpacity used in maps
		    }, animation || {
		        duration: 250
		    });
		};

		/**
		 * Add a series to the chart as drilldown from a specific point in the parent
		 * series. This method is used for async drilldown, when clicking a point in a
		 * series should result in loading and displaying a more high-resolution series.
		 * When not async, the setup is simpler using the
		 * [drilldown.series](https://api.highcharts.com/highcharts/drilldown.series)
		 * options structure.
		 *
		 * @sample highcharts/drilldown/async/
		 *         Async drilldown
		 *
		 * @function Highcharts.Chart#addSeriesAsDrilldown
		 *
		 * @param {Highcharts.Point} point
		 *        The point from which the drilldown will start.
		 *
		 * @param {Highcharts.SeriesOptionsType} options
		 *        The series options for the new, detailed series.
		 */
		Chart.prototype.addSeriesAsDrilldown = function (point, options) {
		    this.addSingleSeriesAsDrilldown(point, options);
		    this.applyDrilldown();
		};
		Chart.prototype.addSingleSeriesAsDrilldown = function (point, ddOptions) {
		    var oldSeries = point.series,
		        xAxis = oldSeries.xAxis,
		        yAxis = oldSeries.yAxis,
		        newSeries,
		        pointIndex,
		        levelSeries = [],
		        levelSeriesOptions = [],
		        level,
		        levelNumber,
		        last,
		        colorProp;


		    colorProp = this.styledMode ?
		        { colorIndex: pick(point.colorIndex, oldSeries.colorIndex) } :
		        { color: point.color || oldSeries.color };

		    if (!this.drilldownLevels) {
		        this.drilldownLevels = [];
		    }

		    levelNumber = oldSeries.options._levelNumber || 0;

		    // See if we can reuse the registered series from last run
		    last = this.drilldownLevels[this.drilldownLevels.length - 1];
		    if (last && last.levelNumber !== levelNumber) {
		        last = undefined;
		    }

		    ddOptions = extend(extend({
		        _ddSeriesId: ddSeriesId++
		    }, colorProp), ddOptions);
		    pointIndex = oldSeries.points.indexOf(point);

		    // Record options for all current series
		    oldSeries.chart.series.forEach(function (series) {
		        if (series.xAxis === xAxis && !series.isDrilling) {
		            series.options._ddSeriesId =
		                series.options._ddSeriesId || ddSeriesId++;
		            series.options._colorIndex = series.userOptions._colorIndex;
		            series.options._levelNumber =
		                series.options._levelNumber || levelNumber; // #3182

		            if (last) {
		                levelSeries = last.levelSeries;
		                levelSeriesOptions = last.levelSeriesOptions;
		            } else {
		                levelSeries.push(series);
		                levelSeriesOptions.push(series.options);
		            }
		        }
		    });

		    // Add a record of properties for each drilldown level
		    level = extend({
		        levelNumber: levelNumber,
		        seriesOptions: oldSeries.options,
		        levelSeriesOptions: levelSeriesOptions,
		        levelSeries: levelSeries,
		        shapeArgs: point.shapeArgs,
		        // no graphic in line series with markers disabled
		        bBox: point.graphic ? point.graphic.getBBox() : {},
		        color: point.isNull ? new H.Color(color).setOpacity(0).get() : color,
		        lowerSeriesOptions: ddOptions,
		        pointOptions: oldSeries.options.data[pointIndex],
		        pointIndex: pointIndex,
		        oldExtremes: {
		            xMin: xAxis && xAxis.userMin,
		            xMax: xAxis && xAxis.userMax,
		            yMin: yAxis && yAxis.userMin,
		            yMax: yAxis && yAxis.userMax
		        },
		        resetZoomButton: this.resetZoomButton
		    }, colorProp);

		    // Push it to the lookup array
		    this.drilldownLevels.push(level);

		    // Reset names to prevent extending (#6704)
		    if (xAxis && xAxis.names) {
		        xAxis.names.length = 0;
		    }

		    newSeries = level.lowerSeries = this.addSeries(ddOptions, false);
		    newSeries.options._levelNumber = levelNumber + 1;
		    if (xAxis) {
		        xAxis.oldPos = xAxis.pos;
		        xAxis.userMin = xAxis.userMax = null;
		        yAxis.userMin = yAxis.userMax = null;
		    }

		    // Run fancy cross-animation on supported and equal types
		    if (oldSeries.type === newSeries.type) {
		        newSeries.animate = newSeries.animateDrilldown || noop;
		        newSeries.options.animation = true;
		    }
		};

		Chart.prototype.applyDrilldown = function () {
		    var drilldownLevels = this.drilldownLevels,
		        levelToRemove;

		    if (drilldownLevels && drilldownLevels.length > 0) { // #3352, async loading
		        levelToRemove = drilldownLevels[drilldownLevels.length - 1].levelNumber;
		        this.drilldownLevels.forEach(function (level) {
		            if (level.levelNumber === levelToRemove) {
		                level.levelSeries.forEach(function (series) {
		                    // Not removed, not added as part of a multi-series
		                    // drilldown
		                    if (
		                        series.options &&
		                        series.options._levelNumber === levelToRemove
		                    ) {
		                        series.remove(false);
		                    }
		                });
		            }
		        });
		    }

		    // We have a reset zoom button. Hide it and detatch it from the chart. It
		    // is preserved to the layer config above.
		    if (this.resetZoomButton) {
		        this.resetZoomButton.hide();
		        delete this.resetZoomButton;
		    }

		    this.pointer.reset();
		    this.redraw();
		    this.showDrillUpButton();
		};

		Chart.prototype.getDrilldownBackText = function () {
		    var drilldownLevels = this.drilldownLevels,
		        lastLevel;
		    if (drilldownLevels && drilldownLevels.length > 0) { // #3352, async loading
		        lastLevel = drilldownLevels[drilldownLevels.length - 1];
		        lastLevel.series = lastLevel.seriesOptions;
		        return format(this.options.lang.drillUpText, lastLevel);
		    }

		};

		Chart.prototype.showDrillUpButton = function () {
		    var chart = this,
		        backText = this.getDrilldownBackText(),
		        buttonOptions = chart.options.drilldown.drillUpButton,
		        attr,
		        states;


		    if (!this.drillUpButton) {
		        attr = buttonOptions.theme;
		        states = attr && attr.states;

		        this.drillUpButton = this.renderer.button(
		            backText,
		            null,
		            null,
		            function () {
		                chart.drillUp();
		            },
		            attr,
		            states && states.hover,
		            states && states.select
		        )
		        .addClass('highcharts-drillup-button')
		        .attr({
		            align: buttonOptions.position.align,
		            zIndex: 7
		        })
		        .add()
		        .align(
		            buttonOptions.position,
		            false,
		            buttonOptions.relativeTo || 'plotBox'
		        );
		    } else {
		        this.drillUpButton.attr({
		            text: backText
		        })
		        .align();
		    }
		};

		/**
		 * When the chart is drilled down to a child series, calling `chart.drillUp()`
		 * will drill up to the parent series. Requires the drilldown module.
		 *
		 * @function Highcharts.Chart#drillUp
		 */
		Chart.prototype.drillUp = function () {
		    if (!this.drilldownLevels || this.drilldownLevels.length === 0) {
		        return;
		    }

		    var chart = this,
		        drilldownLevels = chart.drilldownLevels,
		        levelNumber = drilldownLevels[drilldownLevels.length - 1].levelNumber,
		        i = drilldownLevels.length,
		        chartSeries = chart.series,
		        seriesI,
		        level,
		        oldSeries,
		        newSeries,
		        oldExtremes,
		        addSeries = function (seriesOptions) {
		            var addedSeries;
		            chartSeries.forEach(function (series) {
		                if (series.options._ddSeriesId === seriesOptions._ddSeriesId) {
		                    addedSeries = series;
		                }
		            });

		            addedSeries = addedSeries || chart.addSeries(seriesOptions, false);
		            if (
		                addedSeries.type === oldSeries.type &&
		                addedSeries.animateDrillupTo
		            ) {
		                addedSeries.animate = addedSeries.animateDrillupTo;
		            }
		            if (seriesOptions === level.seriesOptions) {
		                newSeries = addedSeries;
		            }
		        };

		    while (i--) {

		        level = drilldownLevels[i];
		        if (level.levelNumber === levelNumber) {
		            drilldownLevels.pop();

		            // Get the lower series by reference or id
		            oldSeries = level.lowerSeries;
		            if (!oldSeries.chart) {  // #2786
		                seriesI = chartSeries.length; // #2919
		                while (seriesI--) {
		                    if (
		                        chartSeries[seriesI].options.id ===
		                            level.lowerSeriesOptions.id &&
		                        chartSeries[seriesI].options._levelNumber ===
		                            levelNumber + 1
		                    ) { // #3867
		                        oldSeries = chartSeries[seriesI];
		                        break;
		                    }
		                }
		            }
		            oldSeries.xData = []; // Overcome problems with minRange (#2898)

		            level.levelSeriesOptions.forEach(addSeries);

		            fireEvent(chart, 'drillup', { seriesOptions: level.seriesOptions });

		            if (newSeries.type === oldSeries.type) {
		                newSeries.drilldownLevel = level;
		                newSeries.options.animation = chart.options.drilldown.animation;

		                if (oldSeries.animateDrillupFrom && oldSeries.chart) { // #2919
		                    oldSeries.animateDrillupFrom(level);
		                }
		            }
		            newSeries.options._levelNumber = levelNumber;

		            oldSeries.remove(false);

		            // Reset the zoom level of the upper series
		            if (newSeries.xAxis) {
		                oldExtremes = level.oldExtremes;
		                newSeries.xAxis.setExtremes(
		                    oldExtremes.xMin,
		                    oldExtremes.xMax,
		                    false
		                );
		                newSeries.yAxis.setExtremes(
		                    oldExtremes.yMin,
		                    oldExtremes.yMax,
		                    false
		                );
		            }

		            // We have a resetZoomButton tucked away for this level. Attatch
		            // it to the chart and show it.
		            if (level.resetZoomButton) {
		                chart.resetZoomButton = level.resetZoomButton;
		                chart.resetZoomButton.show();
		            }
		        }
		    }

		    // Fire a once-off event after all series have been drilled up (#5158)
		    fireEvent(chart, 'drillupall');

		    this.redraw();

		    if (this.drilldownLevels.length === 0) {
		        this.drillUpButton = this.drillUpButton.destroy();
		    } else {
		        this.drillUpButton.attr({
		            text: this.getDrilldownBackText()
		        })
		        .align();
		    }

		    this.ddDupes.length = []; // #3315
		};

		// Add update function to be called internally from Chart.update (#7600)
		Chart.prototype.callbacks.push(function () {
		    var chart = this;
		    chart.drilldown = {
		        update: function (options, redraw) {
		            H.merge(true, chart.options.drilldown, options);
		            if (pick(redraw, true)) {
		                chart.redraw();
		            }
		        }
		    };
		});

		// Don't show the reset button if we already are displaying the drillUp button.
		H.addEvent(Chart, 'beforeShowResetZoom', function () {
		    if (this.drillUpButton) {
		        return false;
		    }
		});
		H.addEvent(Chart, 'render', function setDDPoints() {
		    (this.xAxis || []).forEach(function (axis) {
		        axis.ddPoints = {};
		        axis.series.forEach(function (series) {
		            var i,
		                xData = series.xData || [],
		                points = series.points,
		                p;

		            for (i = 0; i < xData.length; i++) {
		                p = series.options.data[i];

		                // The `drilldown` property can only be set on an array or an
		                // object
		                if (typeof p !== 'number') {

		                    // Convert array to object (#8008)
		                    p = series.pointClass.prototype.optionsToObject
		                        .call({ series: series }, p);

		                    if (p.drilldown) {
		                        if (!axis.ddPoints[xData[i]]) {
		                            axis.ddPoints[xData[i]] = [];
		                        }
		                        axis.ddPoints[xData[i]].push(points ? points[i] : true);
		                    }
		                }
		            }
		        });

		        // Add drillability to ticks, and always keep it drillability updated
		        // (#3951)
		        objectEach(axis.ticks, Tick.prototype.drillable);
		    });
		});


		/**
		 * When drilling up, keep the upper series invisible until the lower series has
		 * moved into place.
		 *
		 * @private
		 * @function Highcharts.ColumnSeries#animateDrillupTo
		 *
		 * @param {boolean} [init=false]
		 */
		ColumnSeries.prototype.animateDrillupTo = function (init) {
		    if (!init) {
		        var newSeries = this,
		            level = newSeries.drilldownLevel;

		        // First hide all items before animating in again
		        this.points.forEach(function (point) {
		            var dataLabel = point.dataLabel;

		            if (point.graphic) { // #3407
		                point.graphic.hide();
		            }

		            if (dataLabel) {
		                // The data label is initially hidden, make sure it is not faded
		                // in (#6127)
		                dataLabel.hidden = dataLabel.attr('visibility') === 'hidden';

		                if (!dataLabel.hidden) {
		                    dataLabel.hide();
		                    if (point.connector) {
		                        point.connector.hide();
		                    }
		                }
		            }
		        });


		        // Do dummy animation on first point to get to complete
		        H.syncTimeout(function () {
		            if (newSeries.points) { // May be destroyed in the meantime, #3389
		                newSeries.points.forEach(function (point, i) {
		                    // Fade in other points
		                    var verb =
		                        i === (level && level.pointIndex) ? 'show' : 'fadeIn',
		                        inherit = verb === 'show' ? true : undefined,
		                        dataLabel = point.dataLabel;


		                    if (point.graphic) { // #3407
		                        point.graphic[verb](inherit);
		                    }

		                    if (dataLabel && !dataLabel.hidden) { // #6127
		                        dataLabel.fadeIn(); // #7384
		                        if (point.connector) {
		                            point.connector.fadeIn();
		                        }
		                    }
		                });
		            }
		        }, Math.max(this.chart.options.drilldown.animation.duration - 50, 0));

		        // Reset
		        this.animate = noop;
		    }

		};

		ColumnSeries.prototype.animateDrilldown = function (init) {
		    var series = this,
		        chart = this.chart,
		        drilldownLevels = chart.drilldownLevels,
		        animateFrom,
		        animationOptions = animObject(chart.options.drilldown.animation),
		        xAxis = this.xAxis,
		        styledMode = chart.styledMode;

		    if (!init) {
		        drilldownLevels.forEach(function (level) {
		            if (
		                series.options._ddSeriesId ===
		                    level.lowerSeriesOptions._ddSeriesId
		            ) {
		                animateFrom = level.shapeArgs;
		                if (!styledMode) {
		                    // Add the point colors to animate from
		                    animateFrom.fill = level.color;
		                }
		            }
		        });

		        animateFrom.x += (pick(xAxis.oldPos, xAxis.pos) - xAxis.pos);

		        this.points.forEach(function (point) {
		            var animateTo = point.shapeArgs;

		            if (!styledMode) {
		                // Add the point colors to animate to
		                animateTo.fill = point.color;
		            }

		            if (point.graphic) {
		                point.graphic
		                    .attr(animateFrom)
		                    .animate(
		                        extend(
		                            point.shapeArgs,
		                            { fill: point.color || series.color }
		                        ),
		                        animationOptions
		                    );
		            }
		            if (point.dataLabel) {
		                point.dataLabel.fadeIn(animationOptions);
		            }
		        });
		        this.animate = null;
		    }

		};

		/**
		 * When drilling up, pull out the individual point graphics from the lower
		 * series and animate them into the origin point in the upper series.
		 *
		 * @private
		 * @function Highcharts.ColumnSeries#animateDrillupFrom
		 *
		 * @param {object} level
		 */
		ColumnSeries.prototype.animateDrillupFrom = function (level) {
		    var animationOptions = animObject(this.chart.options.drilldown.animation),
		        group = this.group,
		        // For 3d column series all columns are added to one group
		        // so we should not delete the whole group. #5297
		        removeGroup = group !== this.chart.columnGroup,
		        series = this;

		    // Cancel mouse events on the series group (#2787)
		    series.trackerGroups.forEach(function (key) {
		        if (series[key]) { // we don't always have dataLabelsGroup
		            series[key].on('mouseover');
		        }
		    });

		    if (removeGroup) {
		        delete this.group;
		    }

		    this.points.forEach(function (point) {
		        var graphic = point.graphic,
		            animateTo = level.shapeArgs,
		            complete = function () {
		                graphic.destroy();
		                if (group && removeGroup) {
		                    group = group.destroy();
		                }
		            };

		        if (graphic) {

		            delete point.graphic;

		            if (!series.chart.styledMode) {
		                animateTo.fill = level.color;
		            }

		            if (animationOptions.duration) {
		                graphic.animate(
		                    animateTo,
		                    H.merge(animationOptions, { complete: complete })
		                );
		            } else {
		                graphic.attr(animateTo);
		                complete();
		            }
		        }
		    });
		};

		if (PieSeries) {
		    extend(PieSeries.prototype, {
		        animateDrillupTo: ColumnSeries.prototype.animateDrillupTo,
		        animateDrillupFrom: ColumnSeries.prototype.animateDrillupFrom,

		        animateDrilldown: function (init) {
		            var level = this.chart.drilldownLevels[
		                    this.chart.drilldownLevels.length - 1
		                ],
		                animationOptions = this.chart.options.drilldown.animation,
		                animateFrom = level.shapeArgs,
		                start = animateFrom.start,
		                angle = animateFrom.end - start,
		                startAngle = angle / this.points.length,
		                styledMode = this.chart.styledMode;

		            if (!init) {
		                this.points.forEach(function (point, i) {
		                    var animateTo = point.shapeArgs;

		                    if (!styledMode) {
		                        animateFrom.fill = level.color;
		                        animateTo.fill = point.color;
		                    }

		                    if (point.graphic) {
		                        point.graphic
		                            .attr(H.merge(animateFrom, {
		                                start: start + i * startAngle,
		                                end: start + (i + 1) * startAngle
		                            }))[animationOptions ? 'animate' : 'attr'](
		                                animateTo,
		                                animationOptions
		                            );
		                    }
		                });
		                this.animate = null;
		            }
		        }
		    });
		}

		H.Point.prototype.doDrilldown = function (
		    _holdRedraw,
		    category,
		    originalEvent
		) {
		    var series = this.series,
		        chart = series.chart,
		        drilldown = chart.options.drilldown,
		        i = (drilldown.series || []).length,
		        seriesOptions;

		    if (!chart.ddDupes) {
		        chart.ddDupes = [];
		    }

		    while (i-- && !seriesOptions) {
		        if (
		            drilldown.series[i].id === this.drilldown &&
		            chart.ddDupes.indexOf(this.drilldown) === -1
		        ) {
		            seriesOptions = drilldown.series[i];
		            chart.ddDupes.push(this.drilldown);
		        }
		    }

		    // Fire the event. If seriesOptions is undefined, the implementer can check
		    // for  seriesOptions, and call addSeriesAsDrilldown async if necessary.
		    fireEvent(chart, 'drilldown', {
		        point: this,
		        seriesOptions: seriesOptions,
		        category: category,
		        originalEvent: originalEvent,
		        points: (
		            category !== undefined &&
		            this.series.xAxis.getDDPoints(category).slice(0)
		        )
		    }, function (e) {
		        var chart = e.point.series && e.point.series.chart,
		            seriesOptions = e.seriesOptions;
		        if (chart && seriesOptions) {
		            if (_holdRedraw) {
		                chart.addSingleSeriesAsDrilldown(e.point, seriesOptions);
		            } else {
		                chart.addSeriesAsDrilldown(e.point, seriesOptions);
		            }
		        }
		    });


		};

		/**
		 * Drill down to a given category. This is the same as clicking on an axis
		 * label.
		 *
		 * @private
		 * @function Highcharts.Axis#drilldownCategory
		 */
		H.Axis.prototype.drilldownCategory = function (x, e) {
		    objectEach(this.getDDPoints(x), function (point) {
		        if (
		            point &&
		            point.series &&
		            point.series.visible &&
		            point.doDrilldown
		        ) { // #3197
		            point.doDrilldown(true, x, e);
		        }
		    });
		    this.chart.applyDrilldown();
		};

		/**
		 * Return drillable points for this specific X value.
		 *
		 * @private
		 * @function Highcharts.Axis#getDDPoints
		 */
		H.Axis.prototype.getDDPoints = function (x) {
		    return this.ddPoints && this.ddPoints[x];
		};


		/**
		 * Make a tick label drillable, or remove drilling on update.
		 *
		 * @private
		 * @function Highcharts.Axis#drillable
		 */
		Tick.prototype.drillable = function () {
		    var pos = this.pos,
		        label = this.label,
		        axis = this.axis,
		        isDrillable = axis.coll === 'xAxis' && axis.getDDPoints,
		        ddPointsX = isDrillable && axis.getDDPoints(pos),
		        styledMode = axis.chart.styledMode;

		    if (isDrillable) {
		        if (label && ddPointsX && ddPointsX.length) {
		            label.drillable = true;

		            if (!label.basicStyles && !styledMode) {
		                label.basicStyles = H.merge(label.styles);
		            }

		            label
		                .addClass('highcharts-drilldown-axis-label')
		                .on('click', function (e) {
		                    axis.drilldownCategory(pos, e);
		                });

		            if (!styledMode) {
		                label.css(axis.chart.options.drilldown.activeAxisLabelStyle);
		            }

		        } else if (label && label.drillable) {

		            if (!styledMode) {
		                label.styles = {}; // reset for full overwrite of styles
		                label.css(label.basicStyles);
		            }

		            label.on('click', null); // #3806
		            label.removeClass('highcharts-drilldown-axis-label');
		        }
		    }
		};


		// On initialization of each point, identify its label and make it clickable.
		// Also, provide a list of points associated to that label.
		H.addEvent(H.Point, 'afterInit', function () {
		    var point = this,
		        series = point.series;

		    if (point.drilldown) {

		        // Add the click event to the point
		        H.addEvent(point, 'click', function (e) {
		            if (
		                series.xAxis &&
		                series.chart.options.drilldown.allowPointDrilldown === false
		            ) {
		                series.xAxis.drilldownCategory(point.x, e); // #5822, x changed
		            } else {
		                point.doDrilldown(undefined, undefined, e);
		            }
		        });

		    }

		    return point;
		});

		H.addEvent(H.Series, 'afterDrawDataLabels', function () {
		    var css = this.chart.options.drilldown.activeDataLabelStyle,
		        renderer = this.chart.renderer,
		        styledMode = this.chart.styledMode;

		    this.points.forEach(function (point) {
		        var dataLabelsOptions = point.options.dataLabels,
		            pointCSS = pick(
		                point.dlOptions,
		                dataLabelsOptions && dataLabelsOptions.style,
		                {}
		            );

		        if (point.drilldown && point.dataLabel) {

		            if (css.color === 'contrast' && !styledMode) {
		                pointCSS.color = renderer.getContrast(
		                    point.color || this.color
		                );
		            }

		            if (dataLabelsOptions && dataLabelsOptions.color) {
		                pointCSS.color = dataLabelsOptions.color;
		            }
		            point.dataLabel
		                .addClass('highcharts-drilldown-data-label');

		            if (!styledMode) {
		                point.dataLabel
		                    .css(css)
		                    .css(pointCSS);
		            }
		        }
		    }, this);
		});


		var applyCursorCSS = function (element, cursor, addClass, styledMode) {
		    element[addClass ? 'addClass' : 'removeClass'](
		        'highcharts-drilldown-point'
		    );

		    if (!styledMode) {
		        element.css({ cursor: cursor });
		    }
		};

		// Mark the trackers with a pointer
		H.addEvent(H.Series, 'afterDrawTracker', function () {
		    var styledMode = this.chart.styledMode;
		    this.points.forEach(function (point) {
		        if (point.drilldown && point.graphic) {
		            applyCursorCSS(point.graphic, 'pointer', true, styledMode);
		        }
		    });
		});


		H.addEvent(H.Point, 'afterSetState', function () {
		    var styledMode = this.series.chart.styledMode;
		    if (this.drilldown && this.series.halo && this.state === 'hover') {
		        applyCursorCSS(this.series.halo, 'pointer', true, styledMode);
		    } else if (this.series.halo) {
		        applyCursorCSS(this.series.halo, 'auto', false, styledMode);
		    }
		});

	}(Highcharts));
	(function (H) {
		/**
		 * Exporting module
		 *
		 * (c) 2010-2018 Torstein Honsi
		 *
		 * License: www.highcharts.com/license
		 */

		/**
		 * Function to call if the offline-exporting module fails to export a chart on
		 * the client side.
		 *
		 * @callback Highcharts.ExportingErrorCallbackFunction
		 *
		 * @param {Highcharts.ExportingOptions} options
		 *        The exporting options.
		 *
		 * @param {global.Error} err
		 *        The error from the module.
		 */

		/**
		 * Definition for a menu item in the context menu.
		 *
		 * @interface Highcharts.ExportingMenuObject
		 *//**
		 * The text for the menu item.
		 *
		 * @name Highcharts.ExportingMenuObject#text
		 * @type {string|undefined}
		 *//**
		 * If internationalization is required, the key to a language string.
		 *
		 * @name Highcharts.ExportingMenuObject#textKey
		 * @type {string|undefined}
		 *//**
		 * The click handler for the menu item.
		 *
		 * @name Highcharts.ExportingMenuObject#onclick
		 * @type {Function|undefined}
		 *//**
		 * Indicates a separator line instead of an item.
		 *
		 * @name Highcharts.ExportingMenuObject#separator
		 * @type {boolean|undefined}
		 */



		// create shortcuts
		var defaultOptions = H.defaultOptions,
		    doc = H.doc,
		    Chart = H.Chart,
		    addEvent = H.addEvent,
		    removeEvent = H.removeEvent,
		    fireEvent = H.fireEvent,
		    createElement = H.createElement,
		    discardElement = H.discardElement,
		    css = H.css,
		    merge = H.merge,
		    pick = H.pick,
		    objectEach = H.objectEach,
		    extend = H.extend,
		    isTouchDevice = H.isTouchDevice,
		    win = H.win,
		    userAgent = win.navigator.userAgent,
		    SVGRenderer = H.SVGRenderer,
		    symbols = H.Renderer.prototype.symbols,
		    isMSBrowser = /Edge\/|Trident\/|MSIE /.test(userAgent),
		    isFirefoxBrowser = /firefox/i.test(userAgent);

		// Add language
		extend(defaultOptions.lang
		/**
		 * @optionparent lang
		 */
		, {

		    /**
		     * Exporting module only. The text for the menu item to print the chart.
		     *
		     * @since 3.0.1
		     */
		    printChart: 'Print chart',

		    /**
		     * Exporting module only. The text for the PNG download menu item.
		     *
		     * @since 2.0
		     */
		    downloadPNG: 'Download PNG image',

		    /**
		     * Exporting module only. The text for the JPEG download menu item.
		     *
		     * @since 2.0
		     */
		    downloadJPEG: 'Download JPEG image',

		    /**
		     * Exporting module only. The text for the PDF download menu item.
		     *
		     * @since 2.0
		     */
		    downloadPDF: 'Download PDF document',

		    /**
		     * Exporting module only. The text for the SVG download menu item.
		     *
		     * @since 2.0
		     */
		    downloadSVG: 'Download SVG vector image',

		    /**
		     * Exporting module menu. The tooltip title for the context menu holding
		     * print and export menu items.
		     *
		     * @since 3.0
		     */
		    contextButtonTitle: 'Chart context menu'

		});

		if (!defaultOptions.navigation) {
		    // Buttons and menus are collected in a separate config option set called
		    // 'navigation'. This can be extended later to add control buttons like
		    // zoom and pan right click menus.
		    /**
		     * A collection of options for buttons and menus appearing in the exporting
		     * module.
		     *
		     * @optionparent navigation
		     */
		    defaultOptions.navigation = {};
		}
		merge(true, defaultOptions.navigation, {

		    buttonOptions: {

		        theme: {},

		        /**
		         * Whether to enable buttons.
		         *
		         * @sample highcharts/navigation/buttonoptions-enabled/
		         *         Exporting module loaded but buttons disabled
		         *
		         * @type      {boolean}
		         * @default   true
		         * @since     2.0
		         * @apioption navigation.buttonOptions.enabled
		         */

		        /**
		         * The pixel size of the symbol on the button.
		         *
		         * @sample highcharts/navigation/buttonoptions-height/
		         *         Bigger buttons
		         *
		         * @since 2.0
		         */
		        symbolSize: 14,

		        /**
		         * The x position of the center of the symbol inside the button.
		         *
		         * @sample highcharts/navigation/buttonoptions-height/
		         *         Bigger buttons
		         *
		         * @since 2.0
		         */
		        symbolX: 12.5,

		        /**
		         * The y position of the center of the symbol inside the button.
		         *
		         * @sample highcharts/navigation/buttonoptions-height/
		         *         Bigger buttons
		         *
		         * @since 2.0
		         */
		        symbolY: 10.5,

		        /**
		         * Alignment for the buttons.
		         *
		         * @sample highcharts/navigation/buttonoptions-align/
		         *         Center aligned
		         *
		         * @since      2.0
		         * @validvalue ["left", "center", "right"]
		         */
		        align: 'right',

		        /**
		         * The pixel spacing between buttons.
		         *
		         * @since 2.0
		         */
		        buttonSpacing: 3,

		        /**
		         * Pixel height of the buttons.
		         *
		         * @sample highcharts/navigation/buttonoptions-height/
		         *         Bigger buttons
		         *
		         * @since 2.0
		         */
		        height: 22,

		        /**
		         * A text string to add to the individual button.
		         *
		         * @sample highcharts/exporting/buttons-text/
		         *         Full text button
		         * @sample highcharts/exporting/buttons-text-symbol/
		         *         Combined symbol and text
		         *
		         * @type      {string}
		         * @default   null
		         * @since     3.0
		         * @apioption navigation.buttonOptions.text
		         */

		        /**
		         * The vertical offset of the button's position relative to its
		         * `verticalAlign`.
		         *
		         * @sample highcharts/navigation/buttonoptions-verticalalign/
		         *         Buttons at lower right
		         *
		         * @type      {number}
		         * @default   0
		         * @since     2.0
		         * @apioption navigation.buttonOptions.y
		         */

		        /**
		         * The vertical alignment of the buttons. Can be one of "top", "middle"
		         * or "bottom".
		         *
		         * @sample highcharts/navigation/buttonoptions-verticalalign/
		         *         Buttons at lower right
		         *
		         * @since      2.0
		         * @validvalue ["top", "middle", "bottom"]
		         */
		        verticalAlign: 'top',

		        /**
		         * The pixel width of the button.
		         *
		         * @sample highcharts/navigation/buttonoptions-height/
		         *         Bigger buttons
		         *
		         * @since 2.0
		         */
		        width: 24

		    }

		});

		// Presentational attributes
		merge(true, defaultOptions.navigation

		/**
		 * A collection of options for buttons and menus appearing in the exporting
		 * module.
		 *
		 * @optionparent navigation
		 */
		, {

		    /**
		     * CSS styles for the popup menu appearing by default when the export icon
		     * is clicked. This menu is rendered in HTML.
		     *
		     * @see In styled mode, the menu is styled with the `.highcharts-menu`
		     *      class.
		     *
		     * @sample highcharts/navigation/menustyle/
		     *         Light gray menu background
		     *
		     * @type    {Highcharts.CSSObject}
		     * @default {"border": "1px solid #999999", "background": "#ffffff", "padding": "5px 0"}
		     * @since   2.0
		     */
		    menuStyle: {

		        /**
		         * @ignore
		         */
		        border: '1px solid #999999',

		        /**
		         * @ignore
		         */
		        background: '#ffffff',

		        /**
		         * @ignore
		         */
		        padding: '5px 0'
		    },

		    /**
		     * CSS styles for the individual items within the popup menu appearing by
		     * default when the export icon is clicked. The menu items are rendered in
		     * HTML. Font size defaults to `11px` on desktop and `14px` on touch
		     * devices.
		     *
		     * @see In styled mode, the menu items are styled with the
		     *      `.highcharts-menu-item` class.
		     *
		     * @sample {highcharts} highcharts/navigation/menuitemstyle/
		     *         Add a grey stripe to the left
		     *
		     * @type    {Highcharts.CSSObject}
		     * @default {"padding": "0.5em 1em", "color": "#333333", "background": "none", "fontSize": "11px/14px", "transition": "background 250ms, color 250ms"}
		     * @since   2.0
		     */
		    menuItemStyle: {

		        /**
		         * @ignore
		         */
		        padding: '0.5em 1em',

		        /**
		         * @ignore
		         */
		        color: '#333333',

		        /**
		         * @ignore
		         */
		        background: 'none',

		        /**
		         * @ignore
		         */
		        fontSize: isTouchDevice ? '14px' : '11px',

		        /**
		         * @ignore
		         */
		        transition: 'background 250ms, color 250ms'
		    },

		    /**
		     * CSS styles for the hover state of the individual items within the popup
		     * menu appearing by default when the export icon is clicked. The menu items
		     * are rendered in HTML.
		     *
		     * @see In styled mode, the menu items are styled with the
		     *      `.highcharts-menu-item` class.
		     *
		     * @sample highcharts/navigation/menuitemhoverstyle/
		     *         Bold text on hover
		     *
		     * @type    {Highcharts.CSSObject}
		     * @default {"background": "#335cad", "color": "#ffffff"}
		     * @since   2.0
		     */
		    menuItemHoverStyle: {

		        /**
		         * @ignore
		         */
		        background: '#335cad',

		        /**
		         * @ignore
		         */
		        color: '#ffffff'
		    },

		    /**
		     * A collection of options for buttons appearing in the exporting module.
		     *
		     * In styled mode, the buttons are styled with the
		     * `.highcharts-contextbutton` and `.highcharts-button-symbol` classes.
		     */
		    buttonOptions: {

		        /**
		         * Fill color for the symbol within the button.
		         *
		         * @sample highcharts/navigation/buttonoptions-symbolfill/
		         *         Blue symbol stroke for one of the buttons
		         *
		         * @type  {Highcharts.ColorString}
		         * @since 2.0
		         */
		        symbolFill: '#666666',

		        /**
		         * The color of the symbol's stroke or line.
		         *
		         * @sample highcharts/navigation/buttonoptions-symbolstroke/
		         *         Blue symbol stroke
		         *
		         * @type  {Highcharts.ColorString}
		         * @since 2.0
		         */
		        symbolStroke: '#666666',

		        /**
		         * The pixel stroke width of the symbol on the button.
		         *
		         * @sample highcharts/navigation/buttonoptions-height/
		         *         Bigger buttons
		         *
		         * @since 2.0
		         */
		        symbolStrokeWidth: 3,

		        /**
		         * A configuration object for the button theme. The object accepts
		         * SVG properties like `stroke-width`, `stroke` and `fill`. Tri-state
		         * button styles are supported by the `states.hover` and `states.select`
		         * objects.
		         *
		         * @sample highcharts/navigation/buttonoptions-theme/
		         *         Theming the buttons
		         *
		         * @since 3.0
		         */
		        theme: {

		            /**
		             * The default fill exists only to capture hover events.
		             * @type {Highcharts.ColorString}
		             * @apioption navigation.buttonOptions.theme.fill
		             * @default #ffffff
		             */

		            /**
		             * Default stroke for the buttons.
		             * @type {Highcharts.ColorString}
		             * @apioption navigation.buttonOptions.theme.stroke
		             * @default none
		             */

		            /**
		             * Padding for the button.
		             */
		            padding: 5

		        }

		    }

		});


		// Add the export related options

		/**
		 * Options for the exporting module. For an overview on the matter, see
		 * [the docs](https://www.highcharts.com/docs/export-module/export-module-overview).
		 *
		 * @optionparent exporting
		 */
		defaultOptions.exporting = {

		    /**
		     * Experimental setting to allow HTML inside the chart (added through
		     * the `useHTML` options), directly in the exported image. This allows
		     * you to preserve complicated HTML structures like tables or bi-directional
		     * text in exported charts.
		     *
		     * Disclaimer: The HTML is rendered in a `foreignObject` tag in the
		     * generated SVG. The official export server is based on PhantomJS,
		     * which supports this, but other SVG clients, like Batik, does not
		     * support it. This also applies to downloaded SVG that you want to
		     * open in a desktop client.
		     *
		     * @type      {boolean}
		     * @default   false
		     * @since     4.1.8
		     * @apioption exporting.allowHTML
		     */

		    /**
		     * Additional chart options to be merged into an exported chart. For
		     * example, a common use case is to add data labels to improve readability
		     * of the exported chart, or to add a printer-friendly color scheme.
		     *
		     * @sample {highcharts} highcharts/exporting/chartoptions-data-labels/
		     *         Added data labels
		     * @sample {highstock} highcharts/exporting/chartoptions-data-labels/
		     *         Added data labels
		     *
		     * @type      {Highcharts.Options}
		     * @apioption exporting.chartOptions
		     */

		    /**
		     * Whether to enable the exporting module. Disabling the module will
		     * hide the context button, but API methods will still be available.
		     *
		     * @sample {highcharts} highcharts/exporting/enabled-false/
		     *         Exporting module is loaded but disabled
		     * @sample {highstock} highcharts/exporting/enabled-false/
		     *         Exporting module is loaded but disabled
		     *
		     * @type      {boolean}
		     * @default   true
		     * @since     2.0
		     * @apioption exporting.enabled
		     */

		    /**
		     * Function to call if the offline-exporting module fails to export
		     * a chart on the client side, and [fallbackToExportServer](
		     * #exporting.fallbackToExportServer) is disabled. If left undefined, an
		     * exception is thrown instead. Receives two parameters, the exporting
		     * options, and the error from the module.
		     *
		     * @see [fallbackToExportServer](#exporting.fallbackToExportServer)
		     *
		     * @type      {Highcharts.ExportingErrorCallbackFunction}
		     * @since     5.0.0
		     * @apioption exporting.error
		     */

		    /**
		     * Whether or not to fall back to the export server if the offline-exporting
		     * module is unable to export the chart on the client side. This happens for
		     * certain browsers, and certain features (e.g.
		     * [allowHTML](#exporting.allowHTML)), depending on the image type exporting
		     * to. For very complex charts, it is possible that export can fail in
		     * browsers that don't support Blob objects, due to data URL length limits.
		     * It is recommended to define the [exporting.error](#exporting.error)
		     * handler if disabling fallback, in order to notify users in case export
		     * fails.
		     *
		     * @type      {boolean}
		     * @default   true
		     * @since     4.1.8
		     * @apioption exporting.fallbackToExportServer
		     */

		    /**
		     * The filename, without extension, to use for the exported chart.
		     *
		     * @sample {highcharts} highcharts/exporting/filename/
		     *         Custom file name
		     * @sample {highstock} highcharts/exporting/filename/
		     *         Custom file name
		     *
		     * @type      {string}
		     * @default   chart
		     * @since     2.0
		     * @apioption exporting.filename
		     */

		    /**
		     * An object containing additional key value data for the POST form that
		     * sends the SVG to the export server. For example, a `target` can be set to
		     * make sure the generated image is received in another frame, or a custom
		     * `enctype` or `encoding` can be set.
		     *
		     * @type      {*}
		     * @since     3.0.8
		     * @apioption exporting.formAttributes
		     */

		    /**
		     * Path where Highcharts will look for export module dependencies to
		     * load on demand if they don't already exist on `window`. Should currently
		     * point to location of [CanVG](https://github.com/canvg/canvg) library,
		     * [RGBColor.js](https://github.com/canvg/canvg),
		     * [jsPDF](https://github.com/yWorks/jsPDF) and
		     * [svg2pdf.js](https://github.com/yWorks/svg2pdf.js), required for client
		     * side export in certain browsers.
		     *
		     * @type      {string}
		     * @default   https://code.highcharts.com/{version}/lib
		     * @since     5.0.0
		     * @apioption exporting.libURL
		     */

		    /**
		     * Analogous to [sourceWidth](#exporting.sourceWidth).
		     *
		     * @type      {number}
		     * @since     3.0
		     * @apioption exporting.sourceHeight
		     */

		    /**
		     * The width of the original chart when exported, unless an explicit
		     * [chart.width](#chart.width) is set, or a pixel width is set on the
		     * container. The width exported raster image is then multiplied by
		     * [scale](#exporting.scale).
		     *
		     * @sample {highcharts} highcharts/exporting/sourcewidth/
		     *         Source size demo
		     * @sample {highstock} highcharts/exporting/sourcewidth/
		     *         Source size demo
		     * @sample {highmaps} maps/exporting/sourcewidth/
		     *         Source size demo
		     *
		     * @type      {number}
		     * @since     3.0
		     * @apioption exporting.sourceWidth
		     */

		    /**
		     * The pixel width of charts exported to PNG or JPG. As of Highcharts
		     * 3.0, the default pixel width is a function of the [chart.width](
		     * #chart.width) or [exporting.sourceWidth](#exporting.sourceWidth) and the
		     * [exporting.scale](#exporting.scale).
		     *
		     * @sample {highcharts} highcharts/exporting/width/
		     *         Export to 200px wide images
		     * @sample {highstock} highcharts/exporting/width/
		     *         Export to 200px wide images
		     *
		     * @type      {number}
		     * @since     2.0
		     * @apioption exporting.width
		     */

		    /**
		     * Default MIME type for exporting if `chart.exportChart()` is called
		     * without specifying a `type` option. Possible values are `image/png`,
		     *  `image/jpeg`, `application/pdf` and `image/svg+xml`.
		     *
		     * @since      2.0
		     * @validvalue ["image/png", "image/jpeg", "application/pdf", "image/svg+xml"]
		     */
		    type: 'image/png',

		    /**
		     * The URL for the server module converting the SVG string to an image
		     * format. By default this points to Highchart's free web service.
		     *
		     * @since 2.0
		     */
		    url: 'https://export.highcharts.com/',

		    /**
		     * When printing the chart from the menu item in the burger menu, if
		     * the on-screen chart exceeds this width, it is resized. After printing
		     * or cancelled, it is restored. The default width makes the chart
		     * fit into typical paper format. Note that this does not affect the
		     * chart when printing the web page as a whole.
		     *
		     * @since 4.2.5
		     */
		    printMaxWidth: 780,

		    /**
		     * Defines the scale or zoom factor for the exported image compared
		     * to the on-screen display. While for instance a 600px wide chart
		     * may look good on a website, it will look bad in print. The default
		     * scale of 2 makes this chart export to a 1200px PNG or JPG.
		     *
		     * @see [chart.width](#chart.width)
		     * @see [exporting.sourceWidth](#exporting.sourceWidth)
		     *
		     * @sample {highcharts} highcharts/exporting/scale/
		     *         Scale demonstrated
		     * @sample {highstock} highcharts/exporting/scale/
		     *         Scale demonstrated
		     * @sample {highmaps} maps/exporting/scale/
		     *         Scale demonstrated
		     *
		     * @since 3.0
		     */
		    scale: 2,

		    /**
		     * Options for the export related buttons, print and export. In addition
		     * to the default buttons listed here, custom buttons can be added.
		     * See [navigation.buttonOptions](#navigation.buttonOptions) for general
		     * options.
		     *
		     * @type {Highcharts.Dictionary<Highcharts.ExportingButtonsContextButtonOptions>}
		     */
		    buttons: {

		        /**
		         * Options for the export button.
		         *
		         * In styled mode, export button styles can be applied with the
		         * `.highcharts-contextbutton` class.
		         *
		         * @extends navigation.buttonOptions
		         */
		        contextButton: {

		            /**
		             * A click handler callback to use on the button directly instead of
		             * the popup menu.
		             *
		             * @sample highcharts/exporting/buttons-contextbutton-onclick/
		             *         Skip the menu and export the chart directly
		             *
		             * @type      {Function}
		             * @since     2.0
		             * @apioption exporting.buttons.contextButton.onclick
		             */

		            /**
		             * See [navigation.buttonOptions.symbolFill](
		             * #navigation.buttonOptions.symbolFill).
		             *
		             * @type      {Highcharts.ColorString}
		             * @default   #666666
		             * @since     2.0
		             * @apioption exporting.buttons.contextButton.symbolFill
		             */

		            /**
		             * The horizontal position of the button relative to the `align`
		             * option.
		             *
		             * @type      {number}
		             * @default   -10
		             * @since     2.0
		             * @apioption exporting.buttons.contextButton.x
		             */

		            /**
		             * The class name of the context button.
		             */
		            className: 'highcharts-contextbutton',

		            /**
		             * The class name of the menu appearing from the button.
		             */
		            menuClassName: 'highcharts-contextmenu',

		            /**
		             * The symbol for the button. Points to a definition function in
		             * the `Highcharts.Renderer.symbols` collection. The default
		             * `exportIcon` function is part of the exporting module. Possible
		             * values are "circle", "square", "diamond", "triangle",
		             * "triangle-down", "menu", "menuball" or custom shape.
		             *
		             * @sample highcharts/exporting/buttons-contextbutton-symbol/
		             *         Use a circle for symbol
		             * @sample highcharts/exporting/buttons-contextbutton-symbol-custom/
		             *         Custom shape as symbol
		             *
		             * @since      2.0
		             * @validvalue ["menu", "menuball", "exportIcon", "circle", "square", "diamond", "triangle", "triangle-down"]
		             */
		            symbol: 'menu',

		            /**
		             * The key to a [lang](#lang) option setting that is used for the
		             * button's title tooltip. When the key is `contextButtonTitle`, it
		             * refers to [lang.contextButtonTitle](#lang.contextButtonTitle)
		             * that defaults to "Chart context menu".
		             *
		             * @since 6.1.4
		             */
		            titleKey: 'contextButtonTitle',

		            /**
		             * This option is deprecated, use
		             * [titleKey](#exporting.buttons.contextButton.titleKey) instead.
		             *
		             * @deprecated
		             * @type      {string}
		             * @apioption exporting.buttons.contextButton._titleKey
		             */

		            /**
		             * A collection of strings pointing to config options for the menu
		             * items. The config options are defined in the
		             * `menuItemDefinitions` option.
		             *
		             * By default, there is the "Print" menu item plus one menu item
		             * for each of the available export types.
		             *
		             * @sample {highcharts} highcharts/exporting/menuitemdefinitions/
		             *         Menu item definitions
		             * @sample {highstock} highcharts/exporting/menuitemdefinitions/
		             *         Menu item definitions
		             * @sample {highmaps} highcharts/exporting/menuitemdefinitions/
		             *         Menu item definitions
		             *
		             * @type    {Array<string>}
		             * @default ["printChart", "separator", "downloadPNG", "downloadJPEG", "downloadPDF", "downloadSVG"]
		             * @since   2.0
		             */
		            menuItems: [
		                'printChart',
		                'separator',
		                'downloadPNG',
		                'downloadJPEG',
		                'downloadPDF',
		                'downloadSVG'
		            ]

		        }

		    },
		    /**
		     * An object consisting of definitions for the menu items in the context
		     * menu. Each key value pair has a `key` that is referenced in the
		     * [menuItems](#exporting.buttons.contextButton.menuItems) setting,
		     * and a `value`, which is an object with the following properties:
		     *
		     * - **onclick:** The click handler for the menu item
		     *
		     * - **text:** The text for the menu item
		     *
		     * - **textKey:** If internationalization is required, the key to a language
		     *   string
		     *
		     * @sample {highcharts} highcharts/exporting/menuitemdefinitions/
		     *         Menu item definitions
		     * @sample {highstock} highcharts/exporting/menuitemdefinitions/
		     *         Menu item definitions
		     * @sample {highmaps} highcharts/exporting/menuitemdefinitions/
		     *         Menu item definitions
		     *
		     * @type    {Highcharts.Dictionary<Highcharts.ExportingMenuObject>}
		     * @default {"printChart": {}, "separator": {}, "downloadPNG": {}, "downloadJPEG": {}, "downloadPDF": {}, "downloadSVG": {}}
		     * @since   5.0.13
		     */
		    menuItemDefinitions: {

		        /**
		         * @ignore
		         */
		        printChart: {
		            textKey: 'printChart',
		            onclick: function () {
		                this.print();
		            }
		        },

		        /**
		         * @ignore
		         */
		        separator: {
		            separator: true
		        },

		        /**
		         * @ignore
		         */
		        downloadPNG: {
		            textKey: 'downloadPNG',
		            onclick: function () {
		                this.exportChart();
		            }
		        },

		        /**
		         * @ignore
		         */
		        downloadJPEG: {
		            textKey: 'downloadJPEG',
		            onclick: function () {
		                this.exportChart({
		                    type: 'image/jpeg'
		                });
		            }
		        },

		        /**
		         * @ignore
		         */
		        downloadPDF: {
		            textKey: 'downloadPDF',
		            onclick: function () {
		                this.exportChart({
		                    type: 'application/pdf'
		                });
		            }
		        },

		        /**
		         * @ignore
		         */
		        downloadSVG: {
		            textKey: 'downloadSVG',
		            onclick: function () {
		                this.exportChart({
		                    type: 'image/svg+xml'
		                });
		            }
		        }

		    }

		};

		/**
		 * Fires after a chart is printed through the context menu item or the
		 * `Chart.print` method. Requires the exporting module.
		 *
		 * @sample highcharts/chart/events-beforeprint-afterprint/
		 *         Rescale the chart to print
		 *
		 * @type      {Function}
		 * @since     4.1.0
		 * @context   Highcharts.Chart
		 * @apioption chart.events.afterPrint
		 */

		/**
		 * Fires before a chart is printed through the context menu item or
		 * the `Chart.print` method. Requires the exporting module.
		 *
		 * @sample highcharts/chart/events-beforeprint-afterprint/
		 *         Rescale the chart to print
		 *
		 * @type      {Function}
		 * @since     4.1.0
		 * @context   Highcharts.Chart
		 * @apioption chart.events.beforePrint
		 */

		/**
		 * The post utility
		 *
		 * @private
		 * @function Highcharts.post
		 *
		 * @param {string} url
		 *
		 * @param {*} data
		 *
		 * @param {*} formAttributes
		 */
		H.post = function (url, data, formAttributes) {
		    // create the form
		    var form = createElement('form', merge({
		        method: 'post',
		        action: url,
		        enctype: 'multipart/form-data'
		    }, formAttributes), {
		        display: 'none'
		    }, doc.body);

		    // add the data
		    objectEach(data, function (val, name) {
		        createElement('input', {
		            type: 'hidden',
		            name: name,
		            value: val
		        }, null, form);
		    });

		    // submit
		    form.submit();

		    // clean up
		    discardElement(form);
		};

		extend(Chart.prototype, /** @lends Highcharts.Chart.prototype */ {

		    /**
		     * Exporting module only. A collection of fixes on the produced SVG to
		     * account for expando properties, browser bugs, VML problems and other.
		     * Returns a cleaned SVG.
		     *
		     * @private
		     * @function Highcharts.Chart#sanitizeSVG
		     *
		     * @param {string} svg
		     *
		     * @param {Highcharts.Options} options
		     *
		     * @return {string}
		     */
		    sanitizeSVG: function (svg, options) {
		        // Move HTML into a foreignObject
		        if (options && options.exporting && options.exporting.allowHTML) {
		            var html = svg.match(/<\/svg>(.*?$)/);
		            if (html && html[1]) {
		                html = '<foreignObject x="0" y="0" ' +
		                            'width="' + options.chart.width + '" ' +
		                            'height="' + options.chart.height + '">' +
		                    '<body xmlns="http://www.w3.org/1999/xhtml">' +
		                    html[1] +
		                    '</body>' +
		                    '</foreignObject>';
		                svg = svg.replace('</svg>', html + '</svg>');
		            }
		        }

		        svg = svg
		            .replace(/zIndex="[^"]+"/g, '')
		            .replace(/symbolName="[^"]+"/g, '')
		            .replace(/jQuery[0-9]+="[^"]+"/g, '')
		            .replace(/url\(("|&quot;)(\S+)("|&quot;)\)/g, 'url($2)')
		            .replace(/url\([^#]+#/g, 'url(#')
		            .replace(
		                /<svg /,
		                '<svg xmlns:xlink="http://www.w3.org/1999/xlink" '
		            )
		            .replace(/ (|NS[0-9]+\:)href=/g, ' xlink:href=') // #3567
		            .replace(/\n/, ' ')
		            // Any HTML added to the container after the SVG (#894)
		            .replace(/<\/svg>.*?$/, '</svg>')
		            // Batik doesn't support rgba fills and strokes (#3095)
		            .replace(
		                /(fill|stroke)="rgba\(([ 0-9]+,[ 0-9]+,[ 0-9]+),([ 0-9\.]+)\)"/g, // eslint-disable-line max-len
		                '$1="rgb($2)" $1-opacity="$3"'
		            )

		            // Replace HTML entities, issue #347
		            .replace(/&nbsp;/g, '\u00A0') // no-break space
		            .replace(/&shy;/g, '\u00AD'); // soft hyphen

		        // Further sanitize for oldIE
		        if (this.ieSanitizeSVG) {
		            svg = this.ieSanitizeSVG(svg);
		        }

		        return svg;
		    },

		    /**
		     * Return the unfiltered innerHTML of the chart container. Used as hook for
		     * plugins. In styled mode, it also takes care of inlining CSS style rules.
		     *
		     * @see Chart#getSVG
		     *
		     * @function Highcharts.Chart#getChartHTML
		     *
		     * @returns {string}
		     *          The unfiltered SVG of the chart.
		     */
		    getChartHTML: function () {
		        if (this.styledMode) {
		            this.inlineStyles();
		        }

		        return this.container.innerHTML;
		    },

		    /**
		     * Return an SVG representation of the chart.
		     *
		     * @sample highcharts/members/chart-getsvg/
		     *         View the SVG from a button
		     *
		     * @function Highcharts.Chart#getSVG
		     *
		     * @param {Highcharts.Options} chartOptions
		     *        Additional chart options for the generated SVG representation. For
		     *        collections like `xAxis`, `yAxis` or `series`, the additional
		     *        options is either merged in to the orininal item of the same
		     *        `id`, or to the first item if a common id is not found.
		     *
		     * @return {string}
		     *         The SVG representation of the rendered chart.
		     *
		     * @fires Highcharts.Chart#event:getSVG
		     */
		    getSVG: function (chartOptions) {
		        var chart = this,
		            chartCopy,
		            sandbox,
		            svg,
		            seriesOptions,
		            sourceWidth,
		            sourceHeight,
		            cssWidth,
		            cssHeight,
		            // Copy the options and add extra options
		            options = merge(chart.options, chartOptions);


		        // create a sandbox where a new chart will be generated
		        sandbox = createElement('div', null, {
		            position: 'absolute',
		            top: '-9999em',
		            width: chart.chartWidth + 'px',
		            height: chart.chartHeight + 'px'
		        }, doc.body);

		        // get the source size
		        cssWidth = chart.renderTo.style.width;
		        cssHeight = chart.renderTo.style.height;
		        sourceWidth = options.exporting.sourceWidth ||
		            options.chart.width ||
		            (/px$/.test(cssWidth) && parseInt(cssWidth, 10)) ||
		            (options.isGantt ? 800 : 600);
		        sourceHeight = options.exporting.sourceHeight ||
		            options.chart.height ||
		            (/px$/.test(cssHeight) && parseInt(cssHeight, 10)) ||
		            400;

		        // override some options
		        extend(options.chart, {
		            animation: false,
		            renderTo: sandbox,
		            forExport: true,
		            renderer: 'SVGRenderer',
		            width: sourceWidth,
		            height: sourceHeight
		        });
		        options.exporting.enabled = false; // hide buttons in print
		        delete options.data; // #3004

		        // prepare for replicating the chart
		        options.series = [];
		        chart.series.forEach(function (serie) {
		            seriesOptions = merge(serie.userOptions, { // #4912
		                animation: false, // turn off animation
		                enableMouseTracking: false,
		                showCheckbox: false,
		                visible: serie.visible
		            });

		            // Used for the navigator series that has its own option set
		            if (!seriesOptions.isInternal) {
		                options.series.push(seriesOptions);
		            }
		        });

		        // Assign an internal key to ensure a one-to-one mapping (#5924)
		        chart.axes.forEach(function (axis) {
		            if (!axis.userOptions.internalKey) { // #6444
		                axis.userOptions.internalKey = H.uniqueKey();
		            }
		        });

		        // generate the chart copy
		        chartCopy = new H.Chart(options, chart.callback);

		        // Axis options and series options  (#2022, #3900, #5982)
		        if (chartOptions) {
		            ['xAxis', 'yAxis', 'series'].forEach(function (coll) {
		                var collOptions = {};
		                if (chartOptions[coll]) {
		                    collOptions[coll] = chartOptions[coll];
		                    chartCopy.update(collOptions);
		                }
		            });
		        }

		        // Reflect axis extremes in the export (#5924)
		        chart.axes.forEach(function (axis) {
		            var axisCopy = H.find(chartCopy.axes, function (copy) {
		                    return copy.options.internalKey ===
		                        axis.userOptions.internalKey;
		                }),
		                extremes = axis.getExtremes(),
		                userMin = extremes.userMin,
		                userMax = extremes.userMax;

		            if (
		                axisCopy &&
		                (
		                    (userMin !== undefined && userMin !== axisCopy.min) ||
		                    (userMax !== undefined && userMax !== axisCopy.max)
		                )
		            ) {
		                axisCopy.setExtremes(userMin, userMax, true, false);
		            }
		        });

		        // Get the SVG from the container's innerHTML
		        svg = chartCopy.getChartHTML();
		        fireEvent(this, 'getSVG', { chartCopy: chartCopy });

		        svg = chart.sanitizeSVG(svg, options);

		        // free up memory
		        options = null;
		        chartCopy.destroy();
		        discardElement(sandbox);

		        return svg;
		    },

		    /**
		     * @private
		     * @function Highcharts.Chart#getSVGForExport
		     *
		     * @param {Highcharts.ExportingOptions} options
		     *
		     * @param {Highcharts.Options} chartOptions
		     *
		     * @return {string}
		     */
		    getSVGForExport: function (options, chartOptions) {
		        var chartExportingOptions = this.options.exporting;

		        return this.getSVG(merge(
		            { chart: { borderRadius: 0 } },
		            chartExportingOptions.chartOptions,
		            chartOptions,
		            {
		                exporting: {
		                    sourceWidth: (
		                        (options && options.sourceWidth) ||
		                        chartExportingOptions.sourceWidth
		                    ),
		                    sourceHeight: (
		                        (options && options.sourceHeight) ||
		                        chartExportingOptions.sourceHeight
		                    )
		                }
		            }
		        ));
		    },

		    /**
		     * Get the default file name used for exported charts. By default it creates
		     * a file name based on the chart title.
		     *
		     * @function Highcharts.Chart#getFilename
		     *
		     * @return {string} A file name without extension.
		     */
		    getFilename: function () {
		        var s = this.userOptions.title && this.userOptions.title.text,
		            filename = this.options.exporting.filename;

		        if (filename) {
		            return filename;
		        }

		        if (typeof s === 'string') {
		            filename = s
		                .toLowerCase()
		                .replace(/<\/?[^>]+(>|$)/g, '') // strip HTML tags
		                .replace(/[\s_]+/g, '-')
		                .replace(/[^a-z0-9\-]/g, '') // preserve only latin
		                .replace(/^[\-]+/g, '') // dashes in the start
		                .replace(/[\-]+/g, '-') // dashes in a row
		                .substr(0, 24)
		                .replace(/[\-]+$/g, ''); // dashes in the end;
		        }

		        if (!filename || filename.length < 5) {
		            filename = 'chart';
		        }
		        return filename;
		    },

		    /**
		     * Exporting module required. Submit an SVG version of the chart to a server
		     * along with some parameters for conversion.
		     *
		     * @sample highcharts/members/chart-exportchart/
		     *         Export with no options
		     * @sample highcharts/members/chart-exportchart-filename/
		     *         PDF type and custom filename
		     * @sample highcharts/members/chart-exportchart-custom-background/
		     *         Different chart background in export
		     * @sample stock/members/chart-exportchart/
		     *         Export with Highstock
		     *
		     * @function Highcharts.Chart#exportChart
		     *
		     * @param {Highcharts.ExportingOptions} exportingOptions
		     *        Exporting options in addition to those defined in
		     *        [exporting](https://api.highcharts.com/highcharts/exporting).
		     *
		     * @param {Highcharts.Options} chartOptions
		     *        Additional chart options for the exported chart. For example a
		     *        different background color can be added here, or `dataLabels` for
		     *        export only.
		     */
		    exportChart: function (exportingOptions, chartOptions) {

		        var svg = this.getSVGForExport(exportingOptions, chartOptions);

		        // merge the options
		        exportingOptions = merge(this.options.exporting, exportingOptions);

		        // do the post
		        H.post(exportingOptions.url, {
		            filename: exportingOptions.filename || this.getFilename(),
		            type: exportingOptions.type,
		            // IE8 fails to post undefined correctly, so use 0
		            width: exportingOptions.width || 0,
		            scale: exportingOptions.scale,
		            svg: svg
		        }, exportingOptions.formAttributes);

		    },

		    /**
		     * Exporting module required. Clears away other elements in the page and
		     * prints the chart as it is displayed. By default, when the exporting
		     * module is enabled, a context button with a drop down menu in the upper
		     * right corner accesses this function.
		     *
		     * @sample highcharts/members/chart-print/
		     *         Print from a HTML button
		     *
		     * @function Highcharts.Chart#print
		     *
		     * @fires Highcharts.Chart#event:beforePrint
		     * @fires Highcharts.Chart#event:afterPrint
		     */
		    print: function () {

		        var chart = this,
		            origDisplay = [],
		            body = doc.body,
		            childNodes = body.childNodes,
		            printMaxWidth = chart.options.exporting.printMaxWidth,
		            resetParams,
		            handleMaxWidth;

		        // Move the chart container(s) to another div
		        function moveContainers(moveTo) {
		            (
		                chart.fixedDiv ? // When scrollablePlotArea is active (#9533)
		                    [chart.fixedDiv, chart.scrollingContainer] :
		                    [chart.container]

		            ).forEach(function (div) {
		                moveTo.appendChild(div);
		            });
		        }

		        if (chart.isPrinting) { // block the button while in printing mode
		            return;
		        }

		        chart.isPrinting = true;
		        chart.pointer.reset(null, 0);

		        fireEvent(chart, 'beforePrint');

		        // Handle printMaxWidth
		        handleMaxWidth = printMaxWidth && chart.chartWidth > printMaxWidth;
		        if (handleMaxWidth) {
		            resetParams = [chart.options.chart.width, undefined, false];
		            chart.setSize(printMaxWidth, undefined, false);
		        }

		        // hide all body content
		        childNodes.forEach(function (node, i) {
		            if (node.nodeType === 1) {
		                origDisplay[i] = node.style.display;
		                node.style.display = 'none';
		            }
		        });

		        // pull out the chart
		        moveContainers(body);

		        // Give the browser time to draw WebGL content, an issue that randomly
		        // appears (at least) in Chrome ~67 on the Mac (#8708).
		        setTimeout(function () {

		            win.focus(); // #1510
		            win.print();

		            // allow the browser to prepare before reverting
		            setTimeout(function () {

		                // put the chart back in
		                moveContainers(chart.renderTo);

		                // restore all body content
		                childNodes.forEach(function (node, i) {
		                    if (node.nodeType === 1) {
		                        node.style.display = origDisplay[i];
		                    }
		                });

		                chart.isPrinting = false;

		                // Reset printMaxWidth
		                if (handleMaxWidth) {
		                    chart.setSize.apply(chart, resetParams);
		                }

		                fireEvent(chart, 'afterPrint');

		            }, 1000);
		        }, 1);

		    },

		    /**
		     * Display a popup menu for choosing the export type.
		     *
		     * @private
		     * @function Highcharts.Chart#contextMenu
		     *
		     * @param {string} className
		     *        An identifier for the menu.
		     *
		     * @param {Array<string|Highcharts.ExportingMenuObject>} items
		     *        A collection with text and onclicks for the items.
		     *
		     * @param {number} x
		     *        The x position of the opener button
		     *
		     * @param {number} y
		     *        The y position of the opener button
		     *
		     * @param {number} width
		     *        The width of the opener button
		     *
		     * @param {number} height
		     *        The height of the opener button
		     */
		    contextMenu: function (className, items, x, y, width, height, button) {
		        var chart = this,
		            navOptions = chart.options.navigation,
		            chartWidth = chart.chartWidth,
		            chartHeight = chart.chartHeight,
		            cacheName = 'cache-' + className,
		            menu = chart[cacheName],
		            menuPadding = Math.max(width, height), // for mouse leave detection
		            innerMenu,
		            menuStyle;

		        // create the menu only the first time
		        if (!menu) {

		            // create a HTML element above the SVG
		            chart.exportContextMenu = chart[cacheName] = menu =
		            createElement('div', {
		                className: className
		            }, {
		                position: 'absolute',
		                zIndex: 1000,
		                padding: menuPadding + 'px',
		                pointerEvents: 'auto'
		            }, chart.fixedDiv || chart.container);

		            innerMenu = createElement(
		                'div',
		                { className: 'highcharts-menu' },
		                null,
		                menu
		            );

		            // Presentational CSS
		            if (!chart.styledMode) {
		                css(innerMenu, extend({
		                    MozBoxShadow: '3px 3px 10px #888',
		                    WebkitBoxShadow: '3px 3px 10px #888',
		                    boxShadow: '3px 3px 10px #888'
		                }, navOptions.menuStyle));
		            }

		            // hide on mouse out
		            menu.hideMenu = function () {
		                css(menu, { display: 'none' });
		                if (button) {
		                    button.setState(0);
		                }
		                chart.openMenu = false;
		                H.clearTimeout(menu.hideTimer);
		            };

		            // Hide the menu some time after mouse leave (#1357)
		            chart.exportEvents.push(
		                addEvent(menu, 'mouseleave', function () {
		                    menu.hideTimer = setTimeout(menu.hideMenu, 500);
		                }),
		                addEvent(menu, 'mouseenter', function () {
		                    H.clearTimeout(menu.hideTimer);
		                }),

		                // Hide it on clicking or touching outside the menu (#2258,
		                // #2335, #2407)
		                addEvent(doc, 'mouseup', function (e) {
		                    if (!chart.pointer.inClass(e.target, className)) {
		                        menu.hideMenu();
		                    }
		                }),

		                addEvent(menu, 'click', function () {
		                    if (chart.openMenu) {
		                        menu.hideMenu();
		                    }
		                })
		            );

		            // create the items
		            items.forEach(function (item) {

		                if (typeof item === 'string') {
		                    item = chart.options.exporting.menuItemDefinitions[item];
		                }

		                if (H.isObject(item, true)) {
		                    var element;

		                    if (item.separator) {
		                        element = createElement('hr', null, null, innerMenu);

		                    } else {
		                        element = createElement('div', {
		                            className: 'highcharts-menu-item',
		                            onclick: function (e) {
		                                if (e) { // IE7
		                                    e.stopPropagation();
		                                }
		                                menu.hideMenu();
		                                if (item.onclick) {
		                                    item.onclick.apply(chart, arguments);
		                                }
		                            },
		                            innerHTML: (
		                                item.text ||
		                                chart.options.lang[item.textKey]
		                            )
		                        }, null, innerMenu);

		                        if (!chart.styledMode) {
		                            element.onmouseover = function () {
		                                css(this, navOptions.menuItemHoverStyle);
		                            };
		                            element.onmouseout = function () {
		                                css(this, navOptions.menuItemStyle);
		                            };
		                            css(element, extend({
		                                cursor: 'pointer'
		                            }, navOptions.menuItemStyle));
		                        }
		                    }

		                    // Keep references to menu divs to be able to destroy them
		                    chart.exportDivElements.push(element);
		                }
		            });

		            // Keep references to menu and innerMenu div to be able to destroy
		            // them
		            chart.exportDivElements.push(innerMenu, menu);

		            chart.exportMenuWidth = menu.offsetWidth;
		            chart.exportMenuHeight = menu.offsetHeight;
		        }

		        menuStyle = { display: 'block' };

		        // if outside right, right align it
		        if (x + chart.exportMenuWidth > chartWidth) {
		            menuStyle.right = (chartWidth - x - width - menuPadding) + 'px';
		        } else {
		            menuStyle.left = (x - menuPadding) + 'px';
		        }
		        // if outside bottom, bottom align it
		        if (
		            y + height + chart.exportMenuHeight > chartHeight &&
		            button.alignOptions.verticalAlign !== 'top'
		        ) {
		            menuStyle.bottom = (chartHeight - y - menuPadding) + 'px';
		        } else {
		            menuStyle.top = (y + height - menuPadding) + 'px';
		        }

		        css(menu, menuStyle);
		        chart.openMenu = true;
		    },

		    /**
		     * Add the export button to the chart, with options.
		     *
		     * @private
		     * @function Highcharts.Chart#addButton
		     *
		     * @param {Highcharts.NavigationButtonOptions} options
		     */
		    addButton: function (options) {
		        var chart = this,
		            renderer = chart.renderer,
		            btnOptions = merge(chart.options.navigation.buttonOptions, options),
		            onclick = btnOptions.onclick,
		            menuItems = btnOptions.menuItems,
		            symbol,
		            button,
		            symbolSize = btnOptions.symbolSize || 12;
		        if (!chart.btnCount) {
		            chart.btnCount = 0;
		        }

		        // Keeps references to the button elements
		        if (!chart.exportDivElements) {
		            chart.exportDivElements = [];
		            chart.exportSVGElements = [];
		        }

		        if (btnOptions.enabled === false) {
		            return;
		        }


		        var attr = btnOptions.theme,
		            states = attr.states,
		            hover = states && states.hover,
		            select = states && states.select,
		            callback;

		        if (!chart.styledMode) {
		            attr.fill = pick(attr.fill, '#ffffff');
		            attr.stroke = pick(attr.stroke, 'none');
		        }

		        delete attr.states;

		        if (onclick) {
		            callback = function (e) {
		                if (e) {
		                    e.stopPropagation();
		                }
		                onclick.call(chart, e);
		            };

		        } else if (menuItems) {
		            callback = function (e) {
		                // consistent with onclick call (#3495)
		                if (e) {
		                    e.stopPropagation();
		                }
		                chart.contextMenu(
		                    button.menuClassName,
		                    menuItems,
		                    button.translateX,
		                    button.translateY,
		                    button.width,
		                    button.height,
		                    button
		                );
		                button.setState(2);
		            };
		        }


		        if (btnOptions.text && btnOptions.symbol) {
		            attr.paddingLeft = pick(attr.paddingLeft, 25);

		        } else if (!btnOptions.text) {
		            extend(attr, {
		                width: btnOptions.width,
		                height: btnOptions.height,
		                padding: 0
		            });
		        }


		        if (!chart.styledMode) {
		            attr['stroke-linecap'] = 'round';
		            attr.fill = pick(attr.fill, '#ffffff');
		            attr.stroke = pick(attr.stroke, 'none');
		        }

		        button = renderer
		            .button(btnOptions.text, 0, 0, callback, attr, hover, select)
		            .addClass(options.className)
		            .attr({
		                title: pick(chart.options.lang[
		                    btnOptions._titleKey || btnOptions.titleKey
		                ], '')
		            });

		        button.menuClassName = (
		            options.menuClassName ||
		            'highcharts-menu-' + chart.btnCount++
		        );

		        if (btnOptions.symbol) {
		            symbol = renderer
		                .symbol(
		                    btnOptions.symbol,
		                    btnOptions.symbolX - (symbolSize / 2),
		                    btnOptions.symbolY - (symbolSize / 2),
		                    symbolSize,
		                    symbolSize
		                    // If symbol is an image, scale it (#7957)
		                    , {
		                        width: symbolSize,
		                        height: symbolSize
		                    }
		                )
		                .addClass('highcharts-button-symbol')
		                .attr({
		                    zIndex: 1
		                })
		                .add(button);

		            if (!chart.styledMode) {
		                symbol.attr({
		                    stroke: btnOptions.symbolStroke,
		                    fill: btnOptions.symbolFill,
		                    'stroke-width': btnOptions.symbolStrokeWidth || 1
		                });
		            }
		        }

		        button.add(chart.exportingGroup)
		            .align(extend(btnOptions, {
		                width: button.width,
		                x: pick(btnOptions.x, chart.buttonOffset) // #1654
		            }), true, 'spacingBox');

		        chart.buttonOffset += (
		            (button.width + btnOptions.buttonSpacing) *
		            (btnOptions.align === 'right' ? -1 : 1)
		        );

		        chart.exportSVGElements.push(button, symbol);

		    },

		    /**
		     * Destroy the export buttons.
		     *
		     * @private
		     * @function Highcharts.Chart#destroyExport
		     *
		     * @param {global.Event} e
		     */
		    destroyExport: function (e) {
		        var chart = e ? e.target : this,
		            exportSVGElements = chart.exportSVGElements,
		            exportDivElements = chart.exportDivElements,
		            exportEvents = chart.exportEvents,
		            cacheName;

		        // Destroy the extra buttons added
		        if (exportSVGElements) {
		            exportSVGElements.forEach(function (elem, i) {

		                // Destroy and null the svg elements
		                if (elem) { // #1822
		                    elem.onclick = elem.ontouchstart = null;
		                    cacheName = 'cache-' + elem.menuClassName;

		                    if (chart[cacheName]) {
		                        delete chart[cacheName];
		                    }

		                    chart.exportSVGElements[i] = elem.destroy();
		                }
		            });
		            exportSVGElements.length = 0;
		        }

		        // Destroy the exporting group
		        if (chart.exportingGroup) {
		            chart.exportingGroup.destroy();
		            delete chart.exportingGroup;
		        }

		        // Destroy the divs for the menu
		        if (exportDivElements) {
		            exportDivElements.forEach(function (elem, i) {

		                // Remove the event handler
		                H.clearTimeout(elem.hideTimer); // #5427
		                removeEvent(elem, 'mouseleave');

		                // Remove inline events
		                chart.exportDivElements[i] =
		                    elem.onmouseout =
		                    elem.onmouseover =
		                    elem.ontouchstart =
		                    elem.onclick = null;

		                // Destroy the div by moving to garbage bin
		                discardElement(elem);
		            });
		            exportDivElements.length = 0;
		        }

		        if (exportEvents) {
		            exportEvents.forEach(function (unbind) {
		                unbind();
		            });
		            exportEvents.length = 0;
		        }
		    }
		});

		// These ones are translated to attributes rather than styles
		SVGRenderer.prototype.inlineToAttributes = [
		    'fill',
		    'stroke',
		    'strokeLinecap',
		    'strokeLinejoin',
		    'strokeWidth',
		    'textAnchor',
		    'x',
		    'y'
		];

		// These CSS properties are not inlined. Remember camelCase.
		SVGRenderer.prototype.inlineBlacklist = [
		    /-/, // In Firefox, both hyphened and camelCased names are listed
		    /^(clipPath|cssText|d|height|width)$/, // Full words
		    /^font$/, // more specific props are set
		    /[lL]ogical(Width|Height)$/,
		    /perspective/,
		    /TapHighlightColor/,
		    /^transition/,
		    /^length$/ // #7700
		    // /^text (border|color|cursor|height|webkitBorder)/
		];

		SVGRenderer.prototype.unstyledElements = [
		    'clipPath',
		    'defs',
		    'desc'
		];

		/**
		 * Analyze inherited styles from stylesheets and add them inline
		 *
		 * @private
		 * @function Highcharts.Chart#inlineStyles
		 *
		 * @todo: What are the border styles for text about? In general, text has a lot
		 * of properties.
		 * @todo: Make it work with IE9 and IE10.
		 */
		Chart.prototype.inlineStyles = function () {
		    var renderer = this.renderer,
		        inlineToAttributes = renderer.inlineToAttributes,
		        blacklist = renderer.inlineBlacklist,
		        whitelist = renderer.inlineWhitelist, // For IE
		        unstyledElements = renderer.unstyledElements,
		        defaultStyles = {},
		        dummySVG,
		        iframe,
		        iframeDoc;

		    // Create an iframe where we read default styles without pollution from this
		    // body
		    iframe = doc.createElement('iframe');
		    css(iframe, {
		        width: '1px',
		        height: '1px',
		        visibility: 'hidden'
		    });
		    doc.body.appendChild(iframe);
		    iframeDoc = iframe.contentWindow.document;
		    iframeDoc.open();
		    iframeDoc.write('<svg xmlns="http://www.w3.org/2000/svg"></svg>');
		    iframeDoc.close();


		    /**
		     * Make hyphenated property names out of camelCase
		     */
		    function hyphenate(prop) {
		        return prop.replace(
		            /([A-Z])/g,
		            function (a, b) {
		                return '-' + b.toLowerCase();
		            }
		        );
		    }

		    /**
		     * Call this on all elements and recurse to children
		     */
		    function recurse(node) {
		        var styles,
		            parentStyles,
		            cssText = '',
		            dummy,
		            styleAttr,
		            blacklisted,
		            whitelisted,
		            i;

		        // Check computed styles and whether they are in the white/blacklist for
		        // styles or atttributes
		        function filterStyles(val, prop) {

		            // Check against whitelist & blacklist
		            blacklisted = whitelisted = false;
		            if (whitelist) {
		                // Styled mode in IE has a whitelist instead.
		                // Exclude all props not in this list.
		                i = whitelist.length;
		                while (i-- && !whitelisted) {
		                    whitelisted = whitelist[i].test(prop);
		                }
		                blacklisted = !whitelisted;
		            }

		            // Explicitly remove empty transforms
		            if (prop === 'transform' && val === 'none') {
		                blacklisted = true;
		            }

		            i = blacklist.length;
		            while (i-- && !blacklisted) {
		                blacklisted = (
		                    blacklist[i].test(prop) ||
		                    typeof val === 'function'
		                );
		            }

		            if (!blacklisted) {
		                // If parent node has the same style, it gets inherited, no need
		                // to inline it. Top-level props should be diffed against parent
		                // (#7687).
		                if (
		                    (parentStyles[prop] !== val || node.nodeName === 'svg') &&
		                    defaultStyles[node.nodeName][prop] !== val
		                ) {
		                    // Attributes
		                    if (inlineToAttributes.indexOf(prop) !== -1) {
		                        node.setAttribute(hyphenate(prop), val);
		                    // Styles
		                    } else {
		                        cssText += hyphenate(prop) + ':' + val + ';';
		                    }
		                }
		            }
		        }

		        if (
		            node.nodeType === 1 &&
		            unstyledElements.indexOf(node.nodeName) === -1
		        ) {
		            styles = win.getComputedStyle(node, null);
		            parentStyles = node.nodeName === 'svg' ?
		                {} :
		                win.getComputedStyle(node.parentNode, null);

		            // Get default styles from the browser so that we don't have to add
		            // these
		            if (!defaultStyles[node.nodeName]) {
		                /*
		                if (!dummySVG) {
		                    dummySVG = doc.createElementNS(H.SVG_NS, 'svg');
		                    dummySVG.setAttribute('version', '1.1');
		                    doc.body.appendChild(dummySVG);
		                }
		                */
		                dummySVG = iframeDoc.getElementsByTagName('svg')[0];
		                dummy = iframeDoc.createElementNS(
		                    node.namespaceURI,
		                    node.nodeName
		                );
		                dummySVG.appendChild(dummy);
		                // Copy, so we can remove the node
		                defaultStyles[node.nodeName] = merge(
		                    win.getComputedStyle(dummy, null)
		                );
		                // Remove default fill, otherwise text disappears when exported
		                if (node.nodeName === 'text') {
		                    delete defaultStyles.text.fill;
		                }
		                dummySVG.removeChild(dummy);
		            }

		            // Loop through all styles and add them inline if they are ok
		            if (isFirefoxBrowser || isMSBrowser) {
		                // Some browsers put lots of styles on the prototype
		                for (var p in styles) {
		                    filterStyles(styles[p], p);
		                }
		            } else {
		                objectEach(styles, filterStyles);
		            }

		            // Apply styles
		            if (cssText) {
		                styleAttr = node.getAttribute('style');
		                node.setAttribute(
		                    'style',
		                    (styleAttr ? styleAttr + ';' : '') + cssText
		                );
		            }

		            // Set default stroke width (needed at least for IE)
		            if (node.nodeName === 'svg') {
		                node.setAttribute('stroke-width', '1px');
		            }

		            if (node.nodeName === 'text') {
		                return;
		            }

		            // Recurse
		            [].forEach.call(node.children || node.childNodes, recurse);
		        }
		    }

		    /**
		     * Remove the dummy objects used to get defaults
		     */
		    function tearDown() {
		        dummySVG.parentNode.removeChild(dummySVG);
		    }

		    recurse(this.container.querySelector('svg'));
		    tearDown();

		};


		symbols.menu = function (x, y, width, height) {
		    var arr = [
		        'M', x, y + 2.5,
		        'L', x + width, y + 2.5,
		        'M', x, y + height / 2 + 0.5,
		        'L', x + width, y + height / 2 + 0.5,
		        'M', x, y + height - 1.5,
		        'L', x + width, y + height - 1.5
		    ];
		    return arr;
		};

		symbols.menuball = function (x, y, width, height) {
		    var path = [],
		        h = (height / 3) - 2;

		    path = path.concat(
		                this.circle(width - h, y, h, h),
		                this.circle(width - h, y + h + 4, h, h),
		                this.circle(width - h, y + 2 * (h + 4), h, h)
		            );
		    return path;
		};

		/**
		 * Add the buttons on chart load
		 *
		 * @private
		 * @function Highcharts.Chart#renderExporting
		 */
		Chart.prototype.renderExporting = function () {
		    var chart = this,
		        exportingOptions = chart.options.exporting,
		        buttons = exportingOptions.buttons,
		        isDirty = chart.isDirtyExporting || !chart.exportSVGElements;

		    chart.buttonOffset = 0;
		    if (chart.isDirtyExporting) {
		        chart.destroyExport();
		    }

		    if (isDirty && exportingOptions.enabled !== false) {
		        chart.exportEvents = [];

		        chart.exportingGroup = chart.exportingGroup ||
		            chart.renderer.g('exporting-group').attr({
		                zIndex: 3 // #4955, // #8392
		            }).add();

		        objectEach(buttons, function (button) {
		            chart.addButton(button);
		        });

		        chart.isDirtyExporting = false;
		    }

		    // Destroy the export elements at chart destroy
		    addEvent(chart, 'destroy', chart.destroyExport);
		};

		// Add update methods to handle chart.update and chart.exporting.update and
		// chart.navigation.update. These must be added to the chart instance rather
		// than the Chart prototype in order to use the chart instance inside the update
		// function.
		addEvent(Chart, 'init', function () {
		    var chart = this;
		    function update(prop, options, redraw) {
		        chart.isDirtyExporting = true;
		        merge(true, chart.options[prop], options);
		        if (pick(redraw, true)) {
		            chart.redraw();
		        }
		    }
		    ['exporting', 'navigation'].forEach(function (prop) {
		        chart[prop] = {
		            update: function (options, redraw) {
		                update(prop, options, redraw);
		            }
		        };
		    });
		});

		Chart.prototype.callbacks.push(function (chart) {

		    chart.renderExporting();

		    addEvent(chart, 'redraw', chart.renderExporting);


		    // Uncomment this to see a button directly below the chart, for quick
		    // testing of export
		    /*
		    var button, viewImage, viewSource;
		    if (!chart.renderer.forExport) {
		        viewImage = function () {
		            var div = doc.createElement('div');
		            div.innerHTML = chart.getSVGForExport();
		            chart.renderTo.parentNode.appendChild(div);
		        };

		        viewSource = function () {
		            var pre = doc.createElement('pre');
		            pre.innerHTML = chart.getSVGForExport()
		                .replace(/</g, '\n&lt;')
		                .replace(/>/g, '&gt;');
		            chart.renderTo.parentNode.appendChild(pre);
		        };

		        viewImage();

		        // View SVG Image
		        button = doc.createElement('button');
		        button.innerHTML = 'View SVG Image';
		        chart.renderTo.parentNode.appendChild(button);
		        button.onclick = viewImage;

		        // View SVG Source
		        button = doc.createElement('button');
		        button.innerHTML = 'View SVG Source';
		        chart.renderTo.parentNode.appendChild(button);
		        button.onclick = viewSource;
		    }
		    //*/
		});

	}(Highcharts));
	(function (Highcharts) {
		/* *
		 * Highcharts funnel module
		 *
		 * (c) 2010-2018 Torstein Honsi
		 *
		 * License: www.highcharts.com/license
		 */

		/* eslint indent: 0 */



		// create shortcuts
		var seriesType = Highcharts.seriesType,
		    seriesTypes = Highcharts.seriesTypes,
		    noop = Highcharts.noop,
		    pick = Highcharts.pick;

		/**
		 * @private
		 * @class
		 * @name Highcharts.seriesTypes.funnel
		 *
		 * @augments Highcharts.Series
		 */
		seriesType('funnel', 'pie',
		/**
		 * Funnel charts are a type of chart often used to visualize stages in a sales
		 * project, where the top are the initial stages with the most clients.
		 * It requires that the modules/funnel.js file is loaded.
		 *
		 * @sample highcharts/demo/funnel/
		 *         Funnel demo
		 *
		 * @extends      plotOptions.pie
		 * @excluding    size
		 * @product      highcharts
		 * @optionparent plotOptions.funnel
		 */
		{

		    /**
		     * Initial animation is by default disabled for the funnel chart.
		     */
		    animation: false,

		    /**
		     * The center of the series. By default, it is centered in the middle
		     * of the plot area, so it fills the plot area height.
		     *
		     * @type    {Array<number|string>}
		     * @default ["50%", "50%"]
		     * @since   3.0
		     */
		    center: ['50%', '50%'],

		    /**
		     * The width of the funnel compared to the width of the plot area,
		     * or the pixel width if it is a number.
		     *
		     * @type  {number|string}
		     * @since 3.0
		     */
		    width: '90%',

		    /**
		     * The width of the neck, the lower part of the funnel. A number defines
		     * pixel width, a percentage string defines a percentage of the plot
		     * area width.
		     *
		     * @sample {highcharts} highcharts/demo/funnel/
		     *         Funnel demo
		     *
		     * @type  {number|string}
		     * @since 3.0
		     */
		    neckWidth: '30%',

		    /**
		     * The height of the funnel or pyramid. If it is a number it defines
		     * the pixel height, if it is a percentage string it is the percentage
		     * of the plot area height.
		     *
		     * @sample {highcharts} highcharts/demo/funnel/
		     *         Funnel demo
		     *
		     * @type  {number|string}
		     * @since 3.0
		     */
		    height: '100%',

		    /**
		     * The height of the neck, the lower part of the funnel. A number defines
		     * pixel width, a percentage string defines a percentage of the plot
		     * area height.
		     *
		     * @type {number|string}
		     */
		    neckHeight: '25%',

		    /**
		     * A reversed funnel has the widest area down. A reversed funnel with
		     * no neck width and neck height is a pyramid.
		     *
		     * @since 3.0.10
		     */
		    reversed: false,

		    /** @ignore */
		    size: true, // to avoid adapting to data label size in Pie.drawDataLabels

		    dataLabels: {
		        connectorWidth: 1
		    },

		    /**
		     * Options for the series states.
		     */
		    states: {
		        /**
		         * @excluding halo, marker, lineWidth, lineWidthPlus
		         * @apioption plotOptions.funnel.states.hover
		         */

		        /**
		         * Options for a selected funnel item.
		         *
		         * @excluding halo, marker, lineWidth, lineWidthPlus
		         */
		        select: {
		            /**
		             * A specific color for the selected point.
		             *
		             * @type {Highcharts.ColorString|Highcharts.GradientColorObject}
		             */
		            color: '#cccccc',

		            /**
		             * A specific border color for the selected point.
		             *
		             * @type {Highcharts.ColorString}
		             */
		            borderColor: '#000000'
		        }
		    }
		},

		// Properties
		{
		    animate: noop,

		    // Overrides the pie translate method
		    translate: function () {

		        var
		            // Get positions - either an integer or a percentage string
		            // must be given
		            getLength = function (length, relativeTo) {
		                return (/%$/).test(length) ?
		                    relativeTo * parseInt(length, 10) / 100 :
		                    parseInt(length, 10);
		            },

		            sum = 0,
		            series = this,
		            chart = series.chart,
		            options = series.options,
		            reversed = options.reversed,
		            ignoreHiddenPoint = options.ignoreHiddenPoint,
		            plotWidth = chart.plotWidth,
		            plotHeight = chart.plotHeight,
		            cumulative = 0, // start at top
		            center = options.center,
		            centerX = getLength(center[0], plotWidth),
		            centerY = getLength(center[1], plotHeight),
		            width = getLength(options.width, plotWidth),
		            tempWidth,
		            getWidthAt,
		            height = getLength(options.height, plotHeight),
		            neckWidth = getLength(options.neckWidth, plotWidth),
		            neckHeight = getLength(options.neckHeight, plotHeight),
		            neckY = (centerY - height / 2) + height - neckHeight,
		            data = series.data,
		            path,
		            fraction,
		            half = options.dataLabels.position === 'left' ? 1 : 0,

		            x1,
		            y1,
		            x2,
		            x3,
		            y3,
		            x4,
		            y5;

		        // Return the width at a specific y coordinate
		        series.getWidthAt = getWidthAt = function (y) {
		            var top = (centerY - height / 2);

		            return (y > neckY || height === neckHeight) ?
		                neckWidth :
		                neckWidth + (width - neckWidth) *
		                    (1 - (y - top) / (height - neckHeight));
		        };
		        series.getX = function (y, half, point) {
		            return centerX + (half ? -1 : 1) *
		                ((getWidthAt(reversed ? 2 * centerY - y : y) / 2) +
		                point.labelDistance);
		        };

		        // Expose
		        series.center = [centerX, centerY, height];
		        series.centerX = centerX;

		        /*
		           Individual point coordinate naming:

		           x1,y1 _________________ x2,y1
		            \                         /
		             \                       /
		              \                     /
		               \                   /
		                \                 /
		               x3,y3 _________ x4,y3

		           Additional for the base of the neck:

		                 |               |
		                 |               |
		                 |               |
		               x3,y5 _________ x4,y5

		         */

		        // get the total sum
		        data.forEach(function (point) {
		            if (!ignoreHiddenPoint || point.visible !== false) {
		                sum += point.y;
		            }
		        });

		        data.forEach(function (point) {
		            // set start and end positions
		            y5 = null;
		            fraction = sum ? point.y / sum : 0;
		            y1 = centerY - height / 2 + cumulative * height;
		            y3 = y1 + fraction * height;
		            tempWidth = getWidthAt(y1);
		            x1 = centerX - tempWidth / 2;
		            x2 = x1 + tempWidth;
		            tempWidth = getWidthAt(y3);
		            x3 = centerX - tempWidth / 2;
		            x4 = x3 + tempWidth;

		            // the entire point is within the neck
		            if (y1 > neckY) {
		                x1 = x3 = centerX - neckWidth / 2;
		                x2 = x4 = centerX + neckWidth / 2;

		            // the base of the neck
		            } else if (y3 > neckY) {
		                y5 = y3;

		                tempWidth = getWidthAt(neckY);
		                x3 = centerX - tempWidth / 2;
		                x4 = x3 + tempWidth;

		                y3 = neckY;
		            }

		            if (reversed) {
		                y1 = 2 * centerY - y1;
		                y3 = 2 * centerY - y3;
		                if (y5 !== null) {
		                    y5 = 2 * centerY - y5;
		                }
		            }

		            // save the path
		            path = [
		                'M',
		                x1, y1,
		                'L',
		                x2, y1,
		                x4, y3
		            ];
		            if (y5 !== null) {
		                path.push(x4, y5, x3, y5);
		            }
		            path.push(x3, y3, 'Z');

		            // prepare for using shared dr
		            point.shapeType = 'path';
		            point.shapeArgs = { d: path };


		            // for tooltips and data labels
		            point.percentage = fraction * 100;
		            point.plotX = centerX;
		            point.plotY = (y1 + (y5 || y3)) / 2;

		            // Placement of tooltips and data labels
		            point.tooltipPos = [
		                centerX,
		                point.plotY
		            ];

		            // Slice is a noop on funnel points
		            point.slice = noop;

		            // Mimicking pie data label placement logic
		            point.half = half;

		            if (!ignoreHiddenPoint || point.visible !== false) {
		                cumulative += fraction;
		            }
		        });
		    },

		    // Funnel items don't have angles (#2289)
		    sortByAngle: function (points) {
		        points.sort(function (a, b) {
		            return a.plotY - b.plotY;
		        });
		    },

		    // Extend the pie data label method
		    drawDataLabels: function () {
		        var series = this,
		            data = series.data,
		            labelDistance = series.options.dataLabels.distance,
		            leftSide,
		            sign,
		            point,
		            i = data.length,
		            x,
		            y;

		        // In the original pie label anticollision logic, the slots are
		        // distributed from one labelDistance above to one labelDistance below
		        // the pie. In funnels we don't want this.
		        series.center[2] -= 2 * labelDistance;

		        // Set the label position array for each point.
		        while (i--) {
		            point = data[i];
		            leftSide = point.half;
		            sign = leftSide ? 1 : -1;
		            y = point.plotY;
		            point.labelDistance = pick(
		                point.options.dataLabels && point.options.dataLabels.distance,
		                labelDistance
		            );

		            series.maxLabelDistance = Math.max(
		                point.labelDistance,
		                series.maxLabelDistance || 0
		            );
		            x = series.getX(y, leftSide, point);

		            // set the anchor point for data labels
		            point.labelPosition = {
		                // initial position of the data label - it's utilized for
		                // finding the final position for the label
		                natural: {
		                    x: 0,
		                    y: y
		                },
		                'final': {
		                    // used for generating connector path -
		                    // initialized later in drawDataLabels function
		                    // x: undefined,
		                    // y: undefined
		                },
		                // left - funnel on the left side of the data label
		                // right - funnel on the right side of the data label
		                alignment: leftSide ? 'right' : 'left',
		                connectorPosition: {
		                    breakAt: { // used in connectorShapes.fixedOffset
		                        x: x + (point.labelDistance - 5) * sign,
		                        y: y
		                    },
		                    touchingSliceAt: {
		                        x: x + point.labelDistance * sign,
		                        y: y
		                    }
		                }
		            };
		        }

		        seriesTypes.pie.prototype.drawDataLabels.call(this);
		    }

		});


		/**
		 * A `funnel` series. If the [type](#series.funnel.type) option is
		 * not specified, it is inherited from [chart.type](#chart.type).
		 *
		 * @extends   series,plotOptions.funnel
		 * @excluding dataParser, dataURL, stack, xAxis, yAxis
		 * @product   highcharts
		 * @apioption series.funnel
		 */

		/**
		 * An array of data points for the series. For the `funnel` series type,
		 * points can be given in the following ways:
		 *
		 * 1.  An array of numerical values. In this case, the numerical values
		 * will be interpreted as `y` options. Example:
		 *
		 *  ```js
		 *  data: [0, 5, 3, 5]
		 *  ```
		 *
		 * 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.funnel.turboThreshold),
		 * this option is not available.
		 *
		 *  ```js
		 *     data: [{
		 *         y: 3,
		 *         name: "Point2",
		 *         color: "#00FF00"
		 *     }, {
		 *         y: 1,
		 *         name: "Point1",
		 *         color: "#FF00FF"
		 *     }]
		 *  ```
		 *
		 * @sample {highcharts} highcharts/chart/reflow-true/
		 *         Numerical values
		 * @sample {highcharts} highcharts/series/data-array-of-arrays/
		 *         Arrays of numeric x and y
		 * @sample {highcharts} highcharts/series/data-array-of-arrays-datetime/
		 *         Arrays of datetime x and y
		 * @sample {highcharts} highcharts/series/data-array-of-name-value/
		 *         Arrays of point.name and y
		 * @sample {highcharts} highcharts/series/data-array-of-objects/
		 *         Config objects
		 *
		 * @type      {Array<number|*>}
		 * @extends   series.pie.data
		 * @excluding sliced
		 * @product   highcharts
		 * @apioption series.funnel.data
		 */

		/**
		 * Pyramid series type.
		 *
		 * @private
		 * @class
		 * @name Highcharts.seriesTypes.pyramid
		 *
		 * @augments Highcharts.Series
		 */
		seriesType('pyramid', 'funnel',
		/**
		 * A pyramid series is a special type of funnel, without neck and reversed by
		 * default. Requires the funnel module.
		 *
		 * @sample highcharts/demo/pyramid/
		 *         Pyramid chart
		 *
		 * @extends      plotOptions.funnel
		 * @product      highcharts
		 * @optionparent plotOptions.pyramid
		 */
		{
		    /**
		     * The pyramid neck width is zero by default, as opposed to the funnel,
		     * which shares the same layout logic.
		     *
		     * @since 3.0.10
		     */
		    neckWidth: '0%',

		    /**
		     * The pyramid neck width is zero by default, as opposed to the funnel,
		     * which shares the same layout logic.
		     *
		     * @since 3.0.10
		     */
		    neckHeight: '0%',

		    /**
		     * The pyramid is reversed by default, as opposed to the funnel, which
		     * shares the layout engine, and is not reversed.
		     *
		     * @since 3.0.10
		     */
		    reversed: true
		});

		/**
		 * A `pyramid` series. If the [type](#series.pyramid.type) option is
		 * not specified, it is inherited from [chart.type](#chart.type).
		 *
		 * @extends   series,plotOptions.pyramid
		 * @excluding dataParser, dataURL, stack, xAxis, yAxis
		 * @product   highcharts
		 * @apioption series.pyramid
		 */

		/**
		 * An array of data points for the series. For the `pyramid` series
		 * type, points can be given in the following ways:
		 *
		 * 1. An array of numerical values. In this case, the numerical values will be
		 *    interpreted as `y` options. Example:
		 *    ```js
		 *    data: [0, 5, 3, 5]
		 *    ```
		 *
		 * 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.pyramid.turboThreshold), this option is not
		 *    available.
		 *    ```js
		 *    data: [{
		 *        y: 9,
		 *        name: "Point2",
		 *        color: "#00FF00"
		 *    }, {
		 *        y: 6,
		 *        name: "Point1",
		 *        color: "#FF00FF"
		 *    }]
		 *    ```
		 *
		 * @sample {highcharts} highcharts/chart/reflow-true/
		 *         Numerical values
		 * @sample {highcharts} highcharts/series/data-array-of-objects/
		 *         Config objects
		 *
		 * @type      {Array<number|*>}
		 * @extends   series.pie.data
		 * @excluding sliced
		 * @product   highcharts
		 * @apioption series.pyramid.data
		 */

	}(Highcharts));
	(function (H, derivedSeriesMixin) {



		var objectEach = H.objectEach,
		    seriesType = H.seriesType,
		    correctFloat = H.correctFloat,
		    isNumber = H.isNumber,
		    arrayMax = H.arrayMax,
		    arrayMin = H.arrayMin,
		    merge = H.merge;

		/* ***************************************************************************
		 *
		 * HISTOGRAM
		 *
		 **************************************************************************** */

		/**
		 * A dictionary with formulas for calculating number of bins based on the
		 * base series
		 **/
		var binsNumberFormulas = {
		    'square-root': function (baseSeries) {
		        return Math.round(Math.sqrt(baseSeries.options.data.length));
		    },

		    'sturges': function (baseSeries) {
		        return Math.ceil(Math.log(baseSeries.options.data.length) * Math.LOG2E);
		    },

		    'rice': function (baseSeries) {
		        return Math.ceil(2 * Math.pow(baseSeries.options.data.length, 1 / 3));
		    }
		};

		/**
		 * Returns a function for mapping number to the closed (right opened) bins
		 *
		 * @param {number} binWidth - width of the bin
		 * @returns {function}
		 **/
		function fitToBinLeftClosed(bins) {
		    return function (y) {
		        var i = 1;
		        while (bins[i] <= y) {
		            i++;
		        }
		        return bins[--i];
		    };
		}

		/**
		 * Histogram class
		 *
		 * @constructor seriesTypes.histogram
		 * @augments seriesTypes.column
		 * @mixes DerivedSeriesMixin
		 **/

		/**
		 * A histogram is a column series which represents the distribution of the data
		 * set in the base series. Histogram splits data into bins and shows their
		 * frequencies.
		 *
		 * @product highcharts
		 * @sample {highcharts} highcharts/demo/histogram/ Histogram
		 * @since 6.0.0
		 * @extends plotOptions.column
		 * @excluding boostThreshold, pointInterval, pointIntervalUnit, stacking
		 * @optionparent plotOptions.histogram
		 **/
		seriesType('histogram', 'column', {
		    /**
		      * A preferable number of bins. It is a suggestion, so a histogram may have
		      * a different number of bins. By default it is set to the square root
		      * of the base series' data length. Available options are: `square-root`,
		      * `sturges`, `rice`. You can also define a function which takes a
		      * `baseSeries` as a parameter and should return a positive integer.
		     *
		     * @type {String|Number|Function}
		     * @validvalue ["square-root", "sturges", "rice"]
		     */
		    binsNumber: 'square-root',

		    /**
		     * Width of each bin. By default the bin's width is calculated as
		     * `(max - min) / number of bins`. This option takes precedence over
		     * [binsNumber](#plotOptions.histogram.binsNumber).
		     *
		     * @type {Number}
		     */
		    binWidth: undefined,
		    pointPadding: 0,
		    groupPadding: 0,
		    grouping: false,
		    pointPlacement: 'between',
		    tooltip: {
		        headerFormat: '',
		        pointFormat: '<span style="font-size: 10px">{point.x} - {point.x2}' +
		            '</span><br/>' +
		            '<span style="color:{point.color}">\u25CF</span>' +
		            ' {series.name} <b>{point.y}</b><br/>'
		    }

		}, merge(derivedSeriesMixin, {
		    setDerivedData: function () {
		        var data = this.derivedData(
		            this.baseSeries.yData,
		            this.binsNumber(),
		            this.options.binWidth
		        );

		        this.setData(data, false);
		    },

		    derivedData: function (baseData, binsNumber, binWidth) {
		        var max = arrayMax(baseData),
		            min = arrayMin(baseData),
		            frequencies = [],
		            bins = {},
		            data = [],
		            x,
		            fitToBin;

		        binWidth = this.binWidth = correctFloat(
		            isNumber(binWidth) ?
		                (binWidth || 1) :
		                (max - min) / binsNumber
		        );

		        // If binWidth is 0 then max and min are equaled,
		        // increment the x with some positive value to quit the loop
		        for (x = min; x < max; x = correctFloat(x + binWidth)) {
		            frequencies.push(x);
		            bins[x] = 0;
		        }

		        if (bins[min] !== 0) {
		            frequencies.push(correctFloat(min));
		            bins[correctFloat(min)] = 0;
		        }

		        fitToBin = fitToBinLeftClosed(
		            frequencies.map(function (elem) {
		                return parseFloat(elem);
		            }));

		        baseData.forEach(function (y) {
		            var x = correctFloat(fitToBin(y));
		            bins[x]++;
		        });

		        objectEach(bins, function (frequency, x) {
		            data.push({
		                x: Number(x),
		                y: frequency,
		                x2: correctFloat(Number(x) + binWidth)
		            });
		        });

		        data.sort(function (a, b) {
		            return a.x - b.x;
		        });

		        return data;
		    },

		    binsNumber: function () {
		        var binsNumberOption = this.options.binsNumber;
		        var binsNumber = binsNumberFormulas[binsNumberOption] ||
		            // #7457
		            (typeof binsNumberOption === 'function' && binsNumberOption);

		        return Math.ceil(
		            (binsNumber && binsNumber(this.baseSeries)) ||
		            (
		                isNumber(binsNumberOption) ?
		                    binsNumberOption :
		                    binsNumberFormulas['square-root'](this.baseSeries)
		            )
		        );
		    }
		}));

		/**
		 * A `histogram` series. If the [type](#series.histogram.type) option is not
		 * specified, it is inherited from [chart.type](#chart.type).
		 *
		 * @type {Object}
		 * @since 6.0.0
		 * @extends series,plotOptions.histogram
		 * @excluding dataParser,dataURL,data
		 * @product highcharts
		 * @apioption series.histogram
		 */

		/**
		 * An integer identifying the index to use for the base series, or a string
		 * representing the id of the series.
		 *
		 * @type {Number|String}
		 * @default undefined
		 * @apioption series.histogram.baseSeries
		 */

		/**
		 * An array of data points for the series. For the `histogram` series type,
		 * points are calculated dynamically. See
		 * [histogram.baseSeries](#series.histogram.baseSeries).
		 *
		 * @type {Array<Object|Array>}
		 * @since 6.0.0
		 * @extends series.column.data
		 * @product highcharts
		 * @apioption series.histogram.data
		 */

	}(Highcharts, derivedSeriesMixin));
	(function (H) {
		/* *
		 *
		 *  (c) 2009-2018 Torstein Honsi
		 *
		 *  Item series type for Highcharts
		 *
		 *  License: www.highcharts.com/license
		 *
		 * */

		/**
		 * @private
		 * @todo
		 * - Check update, remove etc.
		 * - Custom icons like persons, carts etc. Either as images, font icons or
		 *   Highcharts symbols.
		 */



		var extend = H.extend,
		    pick = H.pick,
		    seriesType = H.seriesType;

		/**
		 * @private
		 * @class
		 * @name Highcharts.seriesTypes.item
		 *
		 * @augments Highcharts.Series
		 */
		seriesType('item', 'column', {
		    itemPadding: 0.2,
		    marker: {
		        symbol: 'circle',
		        states: {
		            hover: {},
		            select: {}
		        }
		    }
		}, {
		    drawPoints: function () {
		        var series = this,
		            renderer = series.chart.renderer,
		            seriesMarkerOptions = this.options.marker,
		            itemPaddingTranslated = this.yAxis.transA *
		                series.options.itemPadding,
		            borderWidth = this.borderWidth,
		            crisp = borderWidth % 2 ? 0.5 : 1;

		        this.points.forEach(function (point) {
		            var yPos,
		                attr,
		                graphics,
		                itemY,
		                pointAttr,
		                pointMarkerOptions = point.marker || {},
		                symbol = (
		                    pointMarkerOptions.symbol ||
		                    seriesMarkerOptions.symbol
		                ),
		                radius = pick(
		                    pointMarkerOptions.radius,
		                    seriesMarkerOptions.radius
		                ),
		                size,
		                yTop,
		                isSquare = symbol !== 'rect',
		                x,
		                y;

		            point.graphics = graphics = point.graphics || {};
		            pointAttr = point.pointAttr ?
		                (
		                    point.pointAttr[point.selected ? 'selected' : ''] ||
		                    series.pointAttr['']
		                ) :
		                series.pointAttribs(point, point.selected && 'select');
		            delete pointAttr.r;

		            if (series.chart.styledMode) {
		                delete pointAttr.stroke;
		                delete pointAttr['stroke-width'];
		            }

		            if (point.y !== null) {

		                if (!point.graphic) {
		                    point.graphic = renderer.g('point').add(series.group);
		                }

		                itemY = point.y;
		                yTop = pick(point.stackY, point.y);
		                size = Math.min(
		                    point.pointWidth,
		                    series.yAxis.transA - itemPaddingTranslated
		                );
		                for (yPos = yTop; yPos > yTop - point.y; yPos--) {

		                    x = point.barX + (
		                        isSquare ?
		                            point.pointWidth / 2 - size / 2 :
		                            0
		                    );
		                    y = series.yAxis.toPixels(yPos, true) +
		                        itemPaddingTranslated / 2;

		                    if (series.options.crisp) {
		                        x = Math.round(x) - crisp;
		                        y = Math.round(y) + crisp;
		                    }
		                    attr = {
		                        x: x,
		                        y: y,
		                        width: Math.round(isSquare ? size : point.pointWidth),
		                        height: Math.round(size),
		                        r: radius
		                    };

		                    if (graphics[itemY]) {
		                        graphics[itemY].animate(attr);
		                    } else {
		                        graphics[itemY] = renderer.symbol(symbol)
		                            .attr(extend(attr, pointAttr))
		                            .add(point.graphic);
		                    }
		                    graphics[itemY].isActive = true;
		                    itemY--;
		                }
		            }
		            H.objectEach(graphics, function (graphic, key) {
		                if (!graphic.isActive) {
		                    graphic.destroy();
		                    delete graphic[key];
		                } else {
		                    graphic.isActive = false;
		                }
		            });
		        });

		    }
		});

		H.SVGRenderer.prototype.symbols.rect = function (x, y, w, h, options) {
		    return H.SVGRenderer.prototype.symbols.callout(x, y, w, h, options);
		};


	}(Highcharts));
	(function (H) {
		/* *
		 *
		 *  Plugin for displaying a message when there is no data visible in chart.
		 *
		 *  (c) 2010-2018 Highsoft AS
		 *
		 *  Author: Oystein Moseng
		 *
		 *  License: www.highcharts.com/license
		 *
		 * */



		var seriesTypes = H.seriesTypes,
		    chartPrototype = H.Chart.prototype,
		    defaultOptions = H.getOptions(),
		    extend = H.extend;

		// Add language option
		extend(defaultOptions.lang,
		    /**
		     * @optionparent lang
		     */
		    {
		        /**
		         * The text to display when the chart contains no data. Requires the
		         * no-data module, see [noData](#noData).
		         *
		         * @sample highcharts/no-data-to-display/no-data-line
		         *         No-data text
		         *
		         * @since   3.0.8
		         * @product highcharts highstock
		         */
		        noData: 'No data to display'
		    }
		);

		// Add default display options for message

		/**
		 * Options for displaying a message like "No data to display".
		 * This feature requires the file no-data-to-display.js to be loaded in the
		 * page. The actual text to display is set in the lang.noData option.
		 *
		 * @sample highcharts/no-data-to-display/no-data-line
		 *         Line chart with no-data module
		 * @sample highcharts/no-data-to-display/no-data-pie
		 *         Pie chart with no-data module
		 *
		 * @product      highcharts highstock gantt
		 * @optionparent noData
		 */
		defaultOptions.noData = {

		    /**
		     * An object of additional SVG attributes for the no-data label.
		     *
		     * @type      {Highcharts.SVGAttributes}
		     * @since     3.0.8
		     * @product   highcharts highstock gantt
		     * @apioption noData.attr
		     */

		    /**
		     * Whether to insert the label as HTML, or as pseudo-HTML rendered with
		     * SVG.
		     *
		     * @type      {boolean}
		     * @default   false
		     * @since     4.1.10
		     * @product   highcharts highstock gantt
		     * @apioption noData.useHTML
		     */

		    /**
		     * The position of the no-data label, relative to the plot area.
		     *
		     * @since 3.0.8
		     */
		    position: {

		        /**
		         * Horizontal offset of the label, in pixels.
		         */
		        x: 0,

		        /**
		         * Vertical offset of the label, in pixels.
		         */
		        y: 0,

		        /**
		         * Horizontal alignment of the label.
		         *
		         * @validvalue ["left", "center", "right"]
		         */
		        align: 'center',

		        /**
		         * Vertical alignment of the label.
		         *
		         * @validvalue ["top", "middle", "bottom"]
		         */
		        verticalAlign: 'middle'
		    },

		    /**
		     * CSS styles for the no-data label.
		     *
		     * @sample highcharts/no-data-to-display/no-data-line
		     *         Styled no-data text
		     *
		     * @type {Highcharts.CSSObject}
		     */
		    style: {
		        /** @ignore */
		        fontWeight: 'bold',
		        /** @ignore */
		        fontSize: '12px',
		        /** @ignore */
		        color: '#666666'
		    }

		};

		// Define hasData function for non-cartesian seris. Returns true if the series
		// has points at all.
		[
		    'bubble',
		    'gauge',
		    'heatmap',
		    'pie',
		    'sankey',
		    'treemap',
		    'waterfall'
		].forEach(function (type) {
		    if (seriesTypes[type]) {
		        seriesTypes[type].prototype.hasData = function () {
		            return !!this.points.length; // != 0
		        };
		    }
		});

		/**
		 * Define hasData functions for series. These return true if there are data
		 * points on this series within the plot area.
		 *
		 * @private
		 * @function Highcharts.Series#hasData
		 *
		 * @return {boolean}
		 */
		H.Series.prototype.hasData = function () {
		    return (
		        this.visible &&
		        this.dataMax !== undefined &&
		        this.dataMin !== undefined // #3703
		    );
		};

		/**
		 * Display a no-data message.
		 *
		 * @private
		 * @function Highcharts.Chart#showNoData
		 *
		 * @param {string} str
		 *        An optional message to show in place of the default one
		 */
		chartPrototype.showNoData = function (str) {
		    var chart = this,
		        options = chart.options,
		        text = str || (options && options.lang.noData),
		        noDataOptions = options && options.noData;

		    if (!chart.noDataLabel && chart.renderer) {
		        chart.noDataLabel = chart.renderer
		            .label(
		                text,
		                0,
		                0,
		                null,
		                null,
		                null,
		                noDataOptions.useHTML,
		                null,
		                'no-data'
		            );

		        if (!chart.styledMode) {
		            chart.noDataLabel
		                .attr(noDataOptions.attr)
		                .css(noDataOptions.style);
		        }

		        chart.noDataLabel.add();

		        chart.noDataLabel.align(
		            extend(chart.noDataLabel.getBBox(), noDataOptions.position),
		            false,
		            'plotBox'
		        );
		    }
		};

		/**
		 * Hide no-data message.
		 *
		 * @private
		 * @function Highcharts.Chart#hideNoData
		 */
		chartPrototype.hideNoData = function () {
		    var chart = this;
		    if (chart.noDataLabel) {
		        chart.noDataLabel = chart.noDataLabel.destroy();
		    }
		};

		/**
		 * Returns true if there are data points within the plot area now.
		 *
		 * @private
		 * @function Highcharts.Chart#hasData
		 */
		chartPrototype.hasData = function () {
		    var chart = this,
		        series = chart.series || [],
		        i = series.length;

		    while (i--) {
		        if (series[i].hasData() && !series[i].options.isInternal) {
		            return true;
		        }
		    }

		    return chart.loadingShown; // #4588
		};

		// Add event listener to handle automatic show or hide no-data message.
		H.addEvent(H.Chart, 'render', function handleNoData() {
		    if (this.hasData()) {
		        this.hideNoData();
		    } else {
		        this.showNoData();
		    }
		});

	}(Highcharts));
	(function (Highcharts) {
		/* *
		 * Mixin for downloading content in the browser
		 *
		 * (c) 2018 Oystein Moseng
		 *
		 * License: www.highcharts.com/license
		 */



		var win = Highcharts.win,
		    nav = win.navigator,
		    doc = win.document,
		    domurl = win.URL || win.webkitURL || win,
		    isEdgeBrowser = /Edge\/\d+/.test(nav.userAgent);

		// Convert base64 dataURL to Blob if supported, otherwise returns undefined
		Highcharts.dataURLtoBlob = function (dataURL) {
		    var parts = dataURL.match(/data:([^;]*)(;base64)?,([0-9A-Za-z+/]+)/);
		    if (
		        parts &&
		        parts.length > 3 &&
		        win.atob &&
		        win.ArrayBuffer &&
		        win.Uint8Array &&
		        win.Blob &&
		        domurl.createObjectURL
		    ) {
		        // Try to convert data URL to Blob
		        var binStr = win.atob(parts[3]),
		            buf = new win.ArrayBuffer(binStr.length),
		            binary = new win.Uint8Array(buf),
		            blob;

		        for (var i = 0; i < binary.length; ++i) {
		            binary[i] = binStr.charCodeAt(i);
		        }

		        blob = new win.Blob([binary], { 'type': parts[1] });
		        return domurl.createObjectURL(blob);
		    }
		};


		/**
		 * Download a data URL in the browser. Can also take a blob as first param.
		 *
		 * @private
		 * @function Highcharts.downloadURL
		 *
		 * @param {string|object} dataURL
		 *        The dataURL/Blob to download
		 *
		 * @param {string} filename
		 *        The name of the resulting file (w/extension)
		 */
		Highcharts.downloadURL = function (dataURL, filename) {
		    var a = doc.createElement('a'),
		        windowRef;

		    // IE specific blob implementation
		    // Don't use for normal dataURLs
		    if (
		        typeof dataURL !== 'string' &&
		        !(dataURL instanceof String) &&
		        nav.msSaveOrOpenBlob
		    ) {
		        nav.msSaveOrOpenBlob(dataURL, filename);
		        return;
		    }

		    // Some browsers have limitations for data URL lengths. Try to convert to
		    // Blob or fall back. Edge always needs that blob.
		    if (isEdgeBrowser || dataURL.length > 2000000) {
		        dataURL = Highcharts.dataURLtoBlob(dataURL);
		        if (!dataURL) {
		            throw 'Failed to convert to blob';
		        }
		    }

		    // Try HTML5 download attr if supported
		    if (a.download !== undefined) {
		        a.href = dataURL;
		        a.download = filename; // HTML5 download attribute
		        doc.body.appendChild(a);
		        a.click();
		        doc.body.removeChild(a);
		    } else {
		        // No download attr, just opening data URI
		        try {
		            windowRef = win.open(dataURL, 'chart');
		            if (windowRef === undefined || windowRef === null) {
		                throw 'Failed to open window';
		            }
		        } catch (e) {
		            // window.open failed, trying location.href
		            win.location.href = dataURL;
		        }
		    }
		};

	}(Highcharts));
	(function (Highcharts) {
		/**
		 * Client side exporting module
		 *
		 * (c) 2015 Torstein Honsi / Oystein Moseng
		 *
		 * License: www.highcharts.com/license
		 */


		/* global MSBlobBuilder */


		var addEvent = Highcharts.addEvent,
		    merge = Highcharts.merge,
		    win = Highcharts.win,
		    nav = win.navigator,
		    doc = win.document,
		    domurl = win.URL || win.webkitURL || win,
		    isMSBrowser = /Edge\/|Trident\/|MSIE /.test(nav.userAgent),
		    // Milliseconds to defer image load event handlers to offset IE bug
		    loadEventDeferDelay = isMSBrowser ? 150 : 0;

		// Dummy object so we can reuse our canvas-tools.js without errors
		Highcharts.CanVGRenderer = {};


		/**
		 * Downloads a script and executes a callback when done.
		 *
		 * @private
		 * @function getScript
		 *
		 * @param {string} scriptLocation
		 *
		 * @param {Function} callback
		 */
		function getScript(scriptLocation, callback) {
		    var head = doc.getElementsByTagName('head')[0],
		        script = doc.createElement('script');

		    script.type = 'text/javascript';
		    script.src = scriptLocation;
		    script.onload = callback;
		    script.onerror = function () {
		        Highcharts.error('Error loading script ' + scriptLocation);
		    };

		    head.appendChild(script);
		}

		/**
		 * Get blob URL from SVG code. Falls back to normal data URI.
		 *
		 * @private
		 * @function Highcharts.svgToDataURL
		 *
		 * @param {string} svg
		 *
		 * @return {string}
		 */
		Highcharts.svgToDataUrl = function (svg) {
		    // Webkit and not chrome
		    var webKit = (
		        nav.userAgent.indexOf('WebKit') > -1 &&
		        nav.userAgent.indexOf('Chrome') < 0
		    );
		    try {
		        // Safari requires data URI since it doesn't allow navigation to blob
		        // URLs. Firefox has an issue with Blobs and internal references,
		        // leading to gradients not working using Blobs (#4550)
		        if (!webKit && nav.userAgent.toLowerCase().indexOf('firefox') < 0) {
		            return domurl.createObjectURL(new win.Blob([svg], {
		                type: 'image/svg+xml;charset-utf-16'
		            }));
		        }
		    } catch (e) {
		        // Ignore
		    }
		    return 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(svg);
		};

		/**
		 * Get data:URL from image URL. Pass in callbacks to handle results.
		 *
		 * @private
		 * @function Highcharts.imageToDataUrl
		 *
		 * @param {string} imageURL
		 *
		 * @param {string} imageType
		 *
		 * @param {*} callbackArgs
		 *        callbackArgs is used only by callbacks.
		 *
		 * @param {number} scale
		 *
		 * @param {Function} successCallback
		 *        Receives four arguments: imageURL, imageType, callbackArgs, and scale.
		 *
		 * @param {Function} taintedCallback
		 *        Receives four arguments: imageURL, imageType, callbackArgs, and scale.
		 *
		 * @param {Function} noCanvasSupportCallback
		 *        Receives four arguments: imageURL, imageType, callbackArgs, and scale.
		 *
		 * @param {Function} failedLoadCallback
		 *        Receives four arguments: imageURL, imageType, callbackArgs, and scale.
		 *
		 * @param {Function} [finallyCallback]
		 *        finallyCallback is always called at the end of the process. All
		 *        callbacks receive four arguments: imageURL, imageType, callbackArgs,
		 *        and scale.
		 */
		Highcharts.imageToDataUrl = function (
		    imageURL,
		    imageType,
		    callbackArgs,
		    scale,
		    successCallback,
		    taintedCallback,
		    noCanvasSupportCallback,
		    failedLoadCallback,
		    finallyCallback
		) {
		    var img = new win.Image(),
		        taintedHandler,
		        loadHandler = function () {
		            setTimeout(function () {
		                var canvas = doc.createElement('canvas'),
		                    ctx = canvas.getContext && canvas.getContext('2d'),
		                    dataURL;
		                try {
		                    if (!ctx) {
		                        noCanvasSupportCallback(
		                            imageURL,
		                            imageType,
		                            callbackArgs,
		                            scale
		                        );
		                    } else {
		                        canvas.height = img.height * scale;
		                        canvas.width = img.width * scale;
		                        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

		                        // Now we try to get the contents of the canvas.
		                        try {
		                            dataURL = canvas.toDataURL(imageType);
		                            successCallback(
		                                dataURL,
		                                imageType,
		                                callbackArgs,
		                                scale
		                            );
		                        } catch (e) {
		                            taintedHandler(
		                                imageURL,
		                                imageType,
		                                callbackArgs,
		                                scale
		                            );
		                        }
		                    }
		                } finally {
		                    if (finallyCallback) {
		                        finallyCallback(
		                            imageURL,
		                            imageType,
		                            callbackArgs,
		                            scale
		                        );
		                    }
		                }
		            // IE bug where image is not always ready despite calling load
		            // event.
		            }, loadEventDeferDelay);
		        },
		        // Image load failed (e.g. invalid URL)
		        errorHandler = function () {
		            failedLoadCallback(imageURL, imageType, callbackArgs, scale);
		            if (finallyCallback) {
		                finallyCallback(imageURL, imageType, callbackArgs, scale);
		            }
		        };

		    // This is called on load if the image drawing to canvas failed with a
		    // security error. We retry the drawing with crossOrigin set to Anonymous.
		    taintedHandler = function () {
		        img = new win.Image();
		        taintedHandler = taintedCallback;
		        // Must be set prior to loading image source
		        img.crossOrigin = 'Anonymous';
		        img.onload = loadHandler;
		        img.onerror = errorHandler;
		        img.src = imageURL;
		    };

		    img.onload = loadHandler;
		    img.onerror = errorHandler;
		    img.src = imageURL;
		};

		/**
		 * Get data URL to an image of an SVG and call download on it options object:
		 *
		 * - **filename:** Name of resulting downloaded file without extension. Default
		 *   is `chart`.
		 *
		 * - **type:** File type of resulting download. Default is `image/png`.
		 *
		 * - **scale:** Scaling factor of downloaded image compared to source. Default
		 *   is `1`.
		 *
		 * - **libURL:** URL pointing to location of dependency scripts to download on
		 *   demand. Default is the exporting.libURL option of the global Highcharts
		 *   options pointing to our server.
		 *
		 * @function Highcharts.downloadSVGLocal
		 *
		 * @param {string} svg
		 *
		 * @param {Highcharts.ExportingOptions} options
		 *
		 * @param {Function} failCallback
		 *
		 * @param {Function} successCallback
		 */
		Highcharts.downloadSVGLocal = function (
		    svg,
		    options,
		    failCallback,
		    successCallback
		) {
		    var svgurl,
		        blob,
		        objectURLRevoke = true,
		        finallyHandler,
		        libURL = options.libURL || Highcharts.getOptions().exporting.libURL,
		        dummySVGContainer = doc.createElement('div'),
		        imageType = options.type || 'image/png',
		        filename = (
		            (options.filename || 'chart') +
		            '.' +
		            (imageType === 'image/svg+xml' ? 'svg' : imageType.split('/')[1])
		        ),
		        scale = options.scale || 1;

		    // Allow libURL to end with or without fordward slash
		    libURL = libURL.slice(-1) !== '/' ? libURL + '/' : libURL;

		    function svgToPdf(svgElement, margin) {
		        var width = svgElement.width.baseVal.value + 2 * margin,
		            height = svgElement.height.baseVal.value + 2 * margin,
		            pdf = new win.jsPDF( // eslint-disable-line new-cap
		                'l',
		                'pt',
		                [width, height]
		            );

		        // Workaround for #7090, hidden elements were drawn anyway. It comes
		        // down to https://github.com/yWorks/svg2pdf.js/issues/28. Check this
		        // later.
		        [].forEach.call(
		            svgElement.querySelectorAll('*[visibility="hidden"]'),
		            function (node) {
		                node.parentNode.removeChild(node);
		            }
		        );

		        win.svg2pdf(svgElement, pdf, { removeInvalid: true });
		        return pdf.output('datauristring');
		    }

		    function downloadPDF() {
		        dummySVGContainer.innerHTML = svg;
		        var textElements = dummySVGContainer.getElementsByTagName('text'),
		            titleElements,
		            svgData,
		            // Copy style property to element from parents if it's not there.
		            // Searches up hierarchy until it finds prop, or hits the chart
		            // container.
		            setStylePropertyFromParents = function (el, propName) {
		                var curParent = el;
		                while (curParent && curParent !== dummySVGContainer) {
		                    if (curParent.style[propName]) {
		                        el.style[propName] = curParent.style[propName];
		                        break;
		                    }
		                    curParent = curParent.parentNode;
		                }
		            };

		        // Workaround for the text styling. Making sure it does pick up settings
		        // for parent elements.
		        [].forEach.call(textElements, function (el) {
		            // Workaround for the text styling. making sure it does pick up the
		            // root element
		            ['font-family', 'font-size'].forEach(function (property) {
		                setStylePropertyFromParents(el, property);
		            });
		            el.style['font-family'] = (
		                el.style['font-family'] &&
		                el.style['font-family'].split(' ').splice(-1)
		            );

		            // Workaround for plotband with width, removing title from text
		            // nodes
		            titleElements = el.getElementsByTagName('title');
		            [].forEach.call(titleElements, function (titleElement) {
		                el.removeChild(titleElement);
		            });
		        });
		        svgData = svgToPdf(dummySVGContainer.firstChild, 0);
		        try {
		            Highcharts.downloadURL(svgData, filename);
		            if (successCallback) {
		                successCallback();
		            }
		        } catch (e) {
		            failCallback(e);
		        }
		    }

		    // Initiate download depending on file type
		    if (imageType === 'image/svg+xml') {
		        // SVG download. In this case, we want to use Microsoft specific Blob if
		        // available
		        try {
		            if (nav.msSaveOrOpenBlob) {
		                blob = new MSBlobBuilder();
		                blob.append(svg);
		                svgurl = blob.getBlob('image/svg+xml');
		            } else {
		                svgurl = Highcharts.svgToDataUrl(svg);
		            }
		            Highcharts.downloadURL(svgurl, filename);
		            if (successCallback) {
		                successCallback();
		            }
		        } catch (e) {
		            failCallback(e);
		        }
		    } else if (imageType === 'application/pdf') {
		        if (win.jsPDF && win.svg2pdf) {
		            downloadPDF();
		        } else {
		            // Must load pdf libraries first. // Don't destroy the object URL
		            // yet since we are doing things asynchronously. A cleaner solution
		            // would be nice, but this will do for now.
		            objectURLRevoke = true;
		            getScript(libURL + 'jspdf.js', function () {
		                getScript(libURL + 'svg2pdf.js', function () {
		                    downloadPDF();
		                });
		            });
		        }
		    } else {
		        // PNG/JPEG download - create bitmap from SVG

		        svgurl = Highcharts.svgToDataUrl(svg);
		        finallyHandler = function () {
		            try {
		                domurl.revokeObjectURL(svgurl);
		            } catch (e) {
		                // Ignore
		            }
		        };
		        // First, try to get PNG by rendering on canvas
		        Highcharts.imageToDataUrl(
		            svgurl,
		            imageType,
		            {},
		            scale,
		            function (imageURL) {
		                // Success
		                try {
		                    Highcharts.downloadURL(imageURL, filename);
		                    if (successCallback) {
		                        successCallback();
		                    }
		                } catch (e) {
		                    failCallback(e);
		                }
		            }, function () {
		                // Failed due to tainted canvas
		                // Create new and untainted canvas
		                var canvas = doc.createElement('canvas'),
		                    ctx = canvas.getContext('2d'),
		                    imageWidth = svg.match(
		                        /^<svg[^>]*width\s*=\s*\"?(\d+)\"?[^>]*>/
		                    )[1] * scale,
		                    imageHeight = svg.match(
		                        /^<svg[^>]*height\s*=\s*\"?(\d+)\"?[^>]*>/
		                    )[1] * scale,
		                    downloadWithCanVG = function () {
		                        ctx.drawSvg(svg, 0, 0, imageWidth, imageHeight);
		                        try {
		                            Highcharts.downloadURL(
		                                nav.msSaveOrOpenBlob ?
		                                    canvas.msToBlob() :
		                                    canvas.toDataURL(imageType),
		                                filename
		                            );
		                            if (successCallback) {
		                                successCallback();
		                            }
		                        } catch (e) {
		                            failCallback(e);
		                        } finally {
		                            finallyHandler();
		                        }
		                    };

		                canvas.width = imageWidth;
		                canvas.height = imageHeight;
		                if (win.canvg) {
		                    // Use preloaded canvg
		                    downloadWithCanVG();
		                } else {
		                    // Must load canVG first. // Don't destroy the object URL
		                    // yet since we are doing things asynchronously. A cleaner
		                    // solution would be nice, but this will do for now.
		                    objectURLRevoke = true;
		                    // Get RGBColor.js first, then canvg
		                    getScript(libURL + 'rgbcolor.js', function () {
		                        getScript(libURL + 'canvg.js', function () {
		                            downloadWithCanVG();
		                        });
		                    });
		                }
		            },
		            // No canvas support
		            failCallback,
		            // Failed to load image
		            failCallback,
		            // Finally
		            function () {
		                if (objectURLRevoke) {
		                    finallyHandler();
		                }
		            }
		        );
		    }
		};

		/**
		 * Get SVG of chart prepared for client side export. This converts embedded
		 * images in the SVG to data URIs. It requires the regular exporting module. The
		 * options and chartOptions arguments are passed to the getSVGForExport
		 * function.
		 *
		 * @private
		 * @function Highcharts.Chart#getSVGForLocalExport
		 *
		 * @param {Highcharts.ExportingOptions} options
		 *
		 * @param {Highcharts.Options} chartOptions
		 *
		 * @param {Function} failCallback
		 *
		 * @param {Function} successCallback
		 */
		Highcharts.Chart.prototype.getSVGForLocalExport = function (
		    options,
		    chartOptions,
		    failCallback,
		    successCallback
		) {
		    var chart = this,
		        images,
		        imagesEmbedded = 0,
		        chartCopyContainer,
		        chartCopyOptions,
		        el,
		        i,
		        l,
		        // After grabbing the SVG of the chart's copy container we need to do
		        // sanitation on the SVG
		        sanitize = function (svg) {
		            return chart.sanitizeSVG(svg, chartCopyOptions);
		        },
		        // Success handler, we converted image to base64!
		        embeddedSuccess = function (imageURL, imageType, callbackArgs) {
		            ++imagesEmbedded;

		            // Change image href in chart copy
		            callbackArgs.imageElement.setAttributeNS(
		                'http://www.w3.org/1999/xlink',
		                'href',
		                imageURL
		            );

		            // When done with last image we have our SVG
		            if (imagesEmbedded === images.length) {
		                successCallback(sanitize(chartCopyContainer.innerHTML));
		            }
		        };

		    // Hook into getSVG to get a copy of the chart copy's container (#8273)
		    chart.unbindGetSVG = addEvent(chart, 'getSVG', function (e) {
		        chartCopyOptions = e.chartCopy.options;
		        chartCopyContainer = e.chartCopy.container.cloneNode(true);
		    });

		    // Trigger hook to get chart copy
		    chart.getSVGForExport(options, chartOptions);
		    images = chartCopyContainer.getElementsByTagName('image');

		    try {
		        // If there are no images to embed, the SVG is okay now.
		        if (!images.length) {
		            // Use SVG of chart copy
		            successCallback(sanitize(chartCopyContainer.innerHTML));
		            return;
		        }

		        // Go through the images we want to embed
		        for (i = 0, l = images.length; i < l; ++i) {
		            el = images[i];
		            Highcharts.imageToDataUrl(el.getAttributeNS(
		                'http://www.w3.org/1999/xlink',
		                'href'
		            ), 'image/png', { imageElement: el }, options.scale,
		                embeddedSuccess,
		                // Tainted canvas
		                failCallback,
		                // No canvas support
		                failCallback,
		                // Failed to load source
		                failCallback
		            );
		        }
		    } catch (e) {
		        failCallback(e);
		    }

		    // Clean up
		    chart.unbindGetSVG();
		};

		/**
		 * Exporting and offline-exporting modules required. Export a chart to an image
		 * locally in the user's browser. Requires the regular exporting module.
		 *
		 * @function Highcharts.Chart#exportChartLocal
		 *
		 * @param  {Highcharts.ExportingOptions} exportingOptions
		 *         Exporting options, the same as in
		 *         {@link Highcharts.Chart#exportChart}.
		 *
		 * @param  {Highcharts.Options} chartOptions
		 *         Additional chart options for the exported chart. For example a
		 *         different background color can be added here, or `dataLabels`
		 *         for export only.
		 */
		Highcharts.Chart.prototype.exportChartLocal = function (
		    exportingOptions,
		    chartOptions
		) {
		    var chart = this,
		        options = Highcharts.merge(chart.options.exporting, exportingOptions),
		        fallbackToExportServer = function (err) {
		            if (options.fallbackToExportServer === false) {
		                if (options.error) {
		                    options.error(options, err);
		                } else {
		                    Highcharts.error(28, true); // Fallback disabled
		                }
		            } else {
		                chart.exportChart(options);
		            }
		        },
		        svgSuccess = function (svg) {
		            // If SVG contains foreignObjects all exports except SVG will fail,
		            // as both CanVG and svg2pdf choke on this. Gracefully fall back.
		            if (
		                svg.indexOf('<foreignObject') > -1 &&
		                options.type !== 'image/svg+xml'
		            ) {
		                fallbackToExportServer(
		                    'Image type not supported for charts with embedded HTML'
		                );
		            } else {
		                Highcharts.downloadSVGLocal(
		                    svg,
		                    Highcharts.extend(
		                        { filename: chart.getFilename() },
		                        options
		                    ),
		                    fallbackToExportServer
		                );
		            }
		        };

		    // If we are on IE and in styled mode, add a whitelist to the renderer for
		    // inline styles that we want to pass through. There are so many styles by
		    // default in IE that we don't want to blacklist them all.
		    if (isMSBrowser && chart.styledMode) {
		        Highcharts.SVGRenderer.prototype.inlineWhitelist = [
		            /^blockSize/,
		            /^border/,
		            /^caretColor/,
		            /^color/,
		            /^columnRule/,
		            /^columnRuleColor/,
		            /^cssFloat/,
		            /^cursor/,
		            /^fill$/,
		            /^fillOpacity/,
		            /^font/,
		            /^inlineSize/,
		            /^length/,
		            /^lineHeight/,
		            /^opacity/,
		            /^outline/,
		            /^parentRule/,
		            /^rx$/,
		            /^ry$/,
		            /^stroke/,
		            /^textAlign/,
		            /^textAnchor/,
		            /^textDecoration/,
		            /^transform/,
		            /^vectorEffect/,
		            /^visibility/,
		            /^x$/,
		            /^y$/
		        ];
		    }

		    // Always fall back on:
		    // - MS browsers: Embedded images JPEG/PNG, or any PDF
		    // - Embedded images and PDF
		    if (
		        (
		            isMSBrowser &&
		            (
		                options.type === 'application/pdf' ||
		                chart.container.getElementsByTagName('image').length &&
		                options.type !== 'image/svg+xml'
		            )
		        ) || (
		            options.type === 'application/pdf' &&
		            chart.container.getElementsByTagName('image').length
		        )
		    ) {
		        fallbackToExportServer(
		            'Image type not supported for this chart/browser.'
		        );
		        return;
		    }

		    chart.getSVGForLocalExport(
		        options,
		        chartOptions,
		        fallbackToExportServer,
		        svgSuccess
		    );
		};

		// Extend the default options to use the local exporter logic
		merge(true, Highcharts.getOptions().exporting, {
		    libURL: 'https://code.highcharts.com/v7.0.1 custom build/lib/',

		    // When offline-exporting is loaded, redefine the menu item definitions
		    // related to download.
		    menuItemDefinitions: {
		        downloadPNG: {
		            textKey: 'downloadPNG',
		            onclick: function () {
		                this.exportChartLocal();
		            }
		        },
		        downloadJPEG: {
		            textKey: 'downloadJPEG',
		            onclick: function () {
		                this.exportChartLocal({
		                    type: 'image/jpeg'
		                });
		            }
		        },
		        downloadSVG: {
		            textKey: 'downloadSVG',
		            onclick: function () {
		                this.exportChartLocal({
		                    type: 'image/svg+xml'
		                });
		            }
		        },
		        downloadPDF: {
		            textKey: 'downloadPDF',
		            onclick: function () {
		                this.exportChartLocal({
		                    type: 'application/pdf'
		                });
		            }
		        }

		    }
		});

	}(Highcharts));
	(function (H, derivedSeriesMixin) {
		/* *
		 * (c) 2010-2017 Sebastian Bochan
		 *
		 * License: www.highcharts.com/license
		 */



		var correctFloat = H.correctFloat,
		    seriesType = H.seriesType,
		    merge = H.merge;


		/**
		 * The pareto series type.
		 *
		 * @private
		 * @class
		 * @name Highcharts.seriesTypes.pareto
		 *
		 * @augments Highcharts.Series
		 */
		seriesType('pareto', 'line'

		/**
		 * A pareto diagram is a type of chart that contains both bars and a line graph,
		 * where individual values are represented in descending order by bars, and the
		 * cumulative total is represented by the line.
		 *
		 * @sample {highcharts} highcharts/demo/pareto/
		 *         Pareto diagram
		 *
		 * @extends      plotOptions.line
		 * @since        6.0.0
		 * @product      highcharts
		 * @excluding    allAreas, boostThreshold, borderColor, borderRadius,
		 *               borderWidth, crisp, colorAxis, depth, data, edgeColor,
		 *               edgeWidth, findNearestPointBy, gapSize, gapUnit, grouping,
		 *               groupPadding, groupZPadding, maxPointWidth, keys,
		 *               negativeColor, pointInterval, pointIntervalUnit, pointPadding,
		 *               pointPlacement, pointRange, pointStart, pointWidth, shadow,
		 *               step, softThreshold, stacking, threshold, zoneAxis, zones
		 * @optionparent plotOptions.pareto
		 */
		, {
		    /**
		     * Higher zIndex than column series to draw line above shapes.
		     */
		    zIndex: 3
		}, merge(derivedSeriesMixin, {
		    /**
		     * Calculate sum and return percent points.
		     *
		     * @private
		     * @function Highcharts.Series#setDerivedData
		     *
		     * @return {Array<Array<number,number>>}
		     *         Returns array of points [x,y]
		     */
		    setDerivedData: function () {
		        if (this.baseSeries.yData.length > 1) {
		            var xValues = this.baseSeries.xData,
		                yValues = this.baseSeries.yData,
		                sum = this.sumPointsPercents(yValues, xValues, null, true);

		            this.setData(
		                this.sumPointsPercents(yValues, xValues, sum, false),
		                false
		            );
		        }
		    },
		    /**
		     * Calculate y sum and each percent point.
		     *
		     * @private
		     * @function Highcharts.Series#sumPointsPercents
		     *
		     * @param {Array<number>} yValues
		     *        Y values
		     *
		     * @param {Array<number>} xValues
		     *        X values
		     *
		     * @param {number} sum
		     *        Sum of all y values
		     *
		     * @param {boolean} [isSum]
		     *        Declares if calculate sum of all points
		     *
		     * @return {number|Array<number,number>}
		     *         Returns sum of points or array of points [x,sum]
		     */
		    sumPointsPercents: function (yValues, xValues, sum, isSum) {
		        var sumY = 0,
		            sumPercent = 0,
		            percentPoints = [],
		            percentPoint;

		        yValues.forEach(function (point, i) {
		            if (point !== null) {
		                if (isSum) {
		                    sumY += point;
		                } else {
		                    percentPoint = (point / sum) * 100;
		                    percentPoints.push(
		                        [xValues[i], correctFloat(sumPercent + percentPoint)]
		                    );
		                    sumPercent += percentPoint;
		                }
		            }
		        });

		        return isSum ? sumY : percentPoints;
		    }
		}));

		/**
		 * A `pareto` series. If the [type](#series.pareto.type) option is not
		 * specified, it is inherited from [chart.type](#chart.type).
		 *
		 * @extends   series,plotOptions.pareto
		 * @since     6.0.0
		 * @product   highcharts
		 * @excluding data, dataParser, dataURL
		 * @apioption series.pareto
		 */

		/**
		 * An integer identifying the index to use for the base series, or a string
		 * representing the id of the series.
		 *
		 * @type      {number|string}
		 * @default   undefined
		 * @apioption series.pareto.baseSeries
		 */

		/**
		 * An array of data points for the series. For the `pareto` series type,
		 * points are calculated dynamically.
		 *
		 * @type      {Array<Array<number|string>|*>}
		 * @extends   series.column.data
		 * @since     6.0.0
		 * @product   highcharts
		 * @apioption series.pareto.data
		 */

	}(Highcharts, derivedSeriesMixin));
	(function (H) {

		H.NodesMixin = {
		    // Create a single node that holds information on incoming and outgoing
		    // links.
		    createNode: function (id) {

		        function findById(nodes, id) {
		            return H.find(nodes, function (node) {
		                return node.id === id;
		            });
		        }

		        var node = findById(this.nodes, id),
		            PointClass = this.pointClass,
		            options;

		        if (!node) {
		            options = this.options.nodes && findById(this.options.nodes, id);
		            node = (new PointClass()).init(
		                this,
		                H.extend({
		                    className: 'highcharts-node',
		                    isNode: true,
		                    id: id,
		                    y: 1 // Pass isNull test
		                }, options)
		            );
		            node.linksTo = [];
		            node.linksFrom = [];
		            node.formatPrefix = 'node';
		            node.name = node.name || node.options.id; // for use in formats

		            // Return the largest sum of either the incoming or outgoing links.
		            node.getSum = function () {
		                var sumTo = 0,
		                    sumFrom = 0;
		                node.linksTo.forEach(function (link) {
		                    sumTo += link.weight;
		                });
		                node.linksFrom.forEach(function (link) {
		                    sumFrom += link.weight;
		                });
		                return Math.max(sumTo, sumFrom);
		            };
		            // Get the offset in weight values of a point/link.
		            node.offset = function (point, coll) {
		                var offset = 0;
		                for (var i = 0; i < node[coll].length; i++) {
		                    if (node[coll][i] === point) {
		                        return offset;
		                    }
		                    offset += node[coll][i].weight;
		                }
		            };

		            // Return true if the node has a shape, otherwise all links are
		            // outgoing.
		            node.hasShape = function () {
		                var outgoing = 0;
		                node.linksTo.forEach(function (link) {
		                    if (link.outgoing) {
		                        outgoing++;
		                    }
		                });
		                return !node.linksTo.length || outgoing !== node.linksTo.length;
		            };

		            this.nodes.push(node);
		        }
		        return node;
		    }
		};

	}(Highcharts));
	(function (H) {
		/* *
		 * Sankey diagram module
		 *
		 * (c) 2010-2018 Torstein Honsi
		 *
		 * License: www.highcharts.com/license
		 */



		var defined = H.defined,
		    seriesType = H.seriesType,
		    pick = H.pick,
		    Point = H.Point;

		/**
		 * @private
		 * @class
		 * @name Highcharts.seriesTypes.sankey
		 *
		 * @augments Highcharts.Series
		 */
		seriesType('sankey', 'column'

		/**
		 * A sankey diagram is a type of flow diagram, in which the width of the
		 * link between two nodes is shown proportionally to the flow quantity.
		 *
		 * @sample highcharts/demo/sankey-diagram/
		 *         Sankey diagram
		 * @sample highcharts/plotoptions/sankey-inverted/
		 *         Inverted sankey diagram
		 * @sample highcharts/plotoptions/sankey-outgoing
		 *         Sankey diagram with outgoing links
		 *
		 * @extends      plotOptions.column
		 * @since        6.0.0
		 * @product      highcharts
		 * @excluding    animationLimit, boostThreshold, borderColor, borderRadius,
		 *               borderWidth, crisp, cropThreshold, depth, edgeColor, edgeWidth,
		 *               findNearestPointBy, grouping, groupPadding, groupZPadding,
		 *               maxPointWidth, negativeColor, pointInterval, pointIntervalUnit,
		 *               pointPadding, pointPlacement, pointRange, pointStart,
		 *               pointWidth, shadow, softThreshold, stacking, threshold,
		 *               zoneAxis, zones
		 * @optionparent plotOptions.sankey
		 */
		, {
		    colorByPoint: true,
		    /**
		     * Higher numbers makes the links in a sankey diagram render more curved.
		     * A `curveFactor` of 0 makes the lines straight.
		     */
		    curveFactor: 0.33,
		    /**
		     * Options for the data labels appearing on top of the nodes and links. For
		     * sankey charts, data labels are visible for the nodes by default, but
		     * hidden for links. This is controlled by modifying the `nodeFormat`, and
		     * the `format` that applies to links and is an empty string by default.
		     */
		    dataLabels: {
		        enabled: true,
		        backgroundColor: 'none', // enable padding
		        crop: false,
		        /**
		         * The
		         * [format string](https://www.highcharts.com/docs/chart-concepts/labels-and-string-formatting)
		         * specifying what to show for _nodes_ in the sankey diagram. By default
		         * the `nodeFormatter` returns `{point.name}`.
		         *
		         * @type {string}
		         */
		        nodeFormat: undefined,

		        /**
		         * Callback to format data labels for _nodes_ in the sankey diagram.
		         * The `nodeFormat` option takes precedence over the `nodeFormatter`.
		         *
		         * @type  {Highcharts.FormatterCallbackFunction<object>}
		         * @since 6.0.2
		         */
		        nodeFormatter: function () {
		            return this.point.name;
		        },
		        /**
		         * The
		         * [format string](https://www.highcharts.com/docs/chart-concepts/labels-and-string-formatting)
		         * specifying what to show for _links_ in the sankey diagram. Defaults
		         * to an empty string returned from the `formatter`, in effect disabling
		         * the labels.
		         *
		         * @type {string}
		         */
		        format: undefined,
		        /**
		         * Callback to format data labels for _links_ in the sankey diagram.
		         * The `format` option takes precedence over the `formatter`.
		         *
		         * @type  {Highcharts.FormatterCallbackFunction<Highcharts.SeriesDataLabelsFormatterContextObject>}
		         * @since 6.0.2
		         */
		        formatter: function () {
		            return '';
		        },
		        inside: true
		    },
		    /**
		     * Opacity for the links between nodes in the sankey diagram.
		     */
		    linkOpacity: 0.5,
		    /**
		     * The pixel width of each node in a sankey diagram, or the height in case
		     * the chart is inverted.
		     */
		    nodeWidth: 20,
		    /**
		     * The padding between nodes in a sankey diagram, in pixels.
		     */
		    nodePadding: 10,
		    showInLegend: false,
		    states: {
		        hover: {
		            /**
		             * Opacity for the links between nodes in the sankey diagram in
		             * hover mode.
		             */
		            linkOpacity: 1
		        }
		    },
		    tooltip: {
		        /**
		         * A callback for defining the format for _nodes_ in the sankey chart's
		         * tooltip, as opposed to links.
		         *
		         * @type      {Highcharts.FormatterCallbackFunction<object>}
		         * @since     6.0.2
		         * @apioption plotOptions.sankey.tooltip.nodeFormatter
		         */

		        /**
		         * Whether the tooltip should follow the pointer or stay fixed on the
		         * item.
		         */
		        followPointer: true,

		        headerFormat:
		            '<span style="font-size: 10px">{series.name}</span><br/>',
		        pointFormat: '{point.fromNode.name} \u2192 {point.toNode.name}: <b>{point.weight}</b><br/>',
		        /**
		         * The
		         * [format string](https://www.highcharts.com/docs/chart-concepts/labels-and-string-formatting)
		         * specifying what to show for _nodes_ in tooltip of a sankey diagram
		         * series, as opposed to links.
		         */
		        nodeFormat: '{point.name}: <b>{point.sum}</b><br/>'
		    }

		}, {
		    isCartesian: false,
		    forceDL: true,
		    // Create a single node that holds information on incoming and outgoing
		    // links.
		    createNode: H.NodesMixin.createNode,

		    // Create a node column.
		    createNodeColumn: function () {
		        var chart = this.chart,
		            column = [],
		            nodePadding = this.options.nodePadding;

		        column.sum = function () {
		            var sum = 0;
		            this.forEach(function (node) {
		                sum += node.getSum();
		            });
		            return sum;
		        };
		        // Get the offset in pixels of a node inside the column.
		        column.offset = function (node, factor) {
		            var offset = 0;
		            for (var i = 0; i < column.length; i++) {
		                if (column[i] === node) {
		                    return offset + (node.options.offset || 0);
		                }
		                offset += column[i].getSum() * factor + nodePadding;
		            }
		        };

		        // Get the column height in pixels.
		        column.top = function (factor) {
		            var height = 0;
		            for (var i = 0; i < column.length; i++) {
		                if (i > 0) {
		                    height += nodePadding;
		                }
		                height += column[i].getSum() * factor;
		            }
		            return (chart.plotSizeY - height) / 2;
		        };

		        return column;
		    },

		    // Create node columns by analyzing the nodes and the relations between
		    // incoming and outgoing links.
		    createNodeColumns: function () {
		        var columns = [];
		        this.nodes.forEach(function (node) {
		            var fromColumn = -1,
		                i,
		                point;

		            if (!H.defined(node.options.column)) {
		                // No links to this node, place it left
		                if (node.linksTo.length === 0) {
		                    node.column = 0;

		                // There are incoming links, place it to the right of the
		                // highest order column that links to this one.
		                } else {
		                    for (i = 0; i < node.linksTo.length; i++) {
		                        point = node.linksTo[0];
		                        if (point.fromNode.column > fromColumn) {
		                            fromColumn = point.fromNode.column;
		                        }
		                    }
		                    node.column = fromColumn + 1;
		                }
		            }

		            if (!columns[node.column]) {
		                columns[node.column] = this.createNodeColumn();
		            }

		            columns[node.column].push(node);

		        }, this);

		        // Fill in empty columns (#8865)
		        for (var i = 0; i < columns.length; i++) {
		            if (columns[i] === undefined) {
		                columns[i] = this.createNodeColumn();
		            }
		        }

		        return columns;
		    },


		    // Return the presentational attributes.
		    pointAttribs: function (point, state) {

		        var opacity = this.options.linkOpacity,
		            color = point.color;

		        if (state) {
		            opacity = this.options.states[state].linkOpacity || opacity;
		            color = this.options.states[state].color || point.color;
		        }

		        return {
		            fill: point.isNode ?
		                color :
		                H.color(color).setOpacity(opacity).get()
		        };
		    },

		    // Extend generatePoints by adding the nodes, which are Point objects but
		    // pushed to the this.nodes array.
		    generatePoints: function () {

		        var nodeLookup = {},
		            chart = this.chart;

		        H.Series.prototype.generatePoints.call(this);

		        if (!this.nodes) {
		            this.nodes = []; // List of Point-like node items
		        }
		        this.colorCounter = 0;

		        // Reset links from previous run
		        this.nodes.forEach(function (node) {
		            node.linksFrom.length = 0;
		            node.linksTo.length = 0;
		        });

		        // Create the node list and set up links
		        this.points.forEach(function (point) {
		            if (defined(point.from)) {
		                if (!nodeLookup[point.from]) {
		                    nodeLookup[point.from] = this.createNode(point.from);
		                }
		                nodeLookup[point.from].linksFrom.push(point);
		                point.fromNode = nodeLookup[point.from];

		                // Point color defaults to the fromNode's color
		                if (chart.styledMode) {
		                    point.colorIndex = pick(
		                        point.options.colorIndex,
		                        nodeLookup[point.from].colorIndex
		                    );
		                } else {
		                    point.color =
		                        point.options.color || nodeLookup[point.from].color;
		                }

		            }
		            if (defined(point.to)) {
		                if (!nodeLookup[point.to]) {
		                    nodeLookup[point.to] = this.createNode(point.to);
		                }
		                nodeLookup[point.to].linksTo.push(point);
		                point.toNode = nodeLookup[point.to];
		            }

		            point.name = point.name || point.options.id; // for use in formats

		        }, this);
		    },

		    // Run pre-translation by generating the nodeColumns.
		    translate: function () {
		        if (!this.processedXData) {
		            this.processData();
		        }
		        this.generatePoints();

		        this.nodeColumns = this.createNodeColumns();

		        var chart = this.chart,
		            inverted = chart.inverted,
		            options = this.options,
		            left = 0,
		            nodeWidth = options.nodeWidth,
		            nodeColumns = this.nodeColumns,
		            colDistance = (chart.plotSizeX - nodeWidth) /
		                (nodeColumns.length - 1),
		            curvy = (
		                (inverted ? -colDistance : colDistance) *
		                options.curveFactor
		            ),
		            factor = Infinity;

		        // Find out how much space is needed. Base it on the translation
		        // factor of the most spaceous column.
		        this.nodeColumns.forEach(function (column) {
		            var height = chart.plotSizeY -
		                (column.length - 1) * options.nodePadding;

		            factor = Math.min(factor, height / column.sum());
		        });

		        this.nodeColumns.forEach(function (column) {
		            column.forEach(function (node) {
		                var sum = node.getSum(),
		                    height = sum * factor,
		                    fromNodeTop = (
		                        column.top(factor) +
		                        column.offset(node, factor)
		                    ),
		                    nodeLeft = inverted ?
		                        chart.plotSizeX - left :
		                        left;

		                node.sum = sum;

		                // Draw the node
		                node.shapeType = 'rect';
		                if (!inverted) {
		                    node.shapeArgs = {
		                        x: nodeLeft,
		                        y: fromNodeTop,
		                        width: nodeWidth,
		                        height: height
		                    };
		                } else {
		                    node.shapeArgs = {
		                        x: nodeLeft - nodeWidth,
		                        y: chart.plotSizeY - fromNodeTop - height,
		                        width: nodeWidth,
		                        height: height
		                    };
		                }
		                node.shapeArgs.display = node.hasShape() ? '' : 'none';

		                // Pass test in drawPoints
		                node.plotY = 1;

		                // Draw the links from this node
		                node.linksFrom.forEach(function (point) {
		                    var linkHeight = point.weight * factor,
		                        fromLinkTop = node.offset(point, 'linksFrom') *
		                            factor,
		                        fromY = fromNodeTop + fromLinkTop,
		                        toNode = point.toNode,
		                        toColTop = nodeColumns[toNode.column].top(factor),
		                        toY = (
		                            toColTop +
		                            (toNode.offset(point, 'linksTo') * factor) +
		                            nodeColumns[toNode.column].offset(
		                                toNode,
		                                factor
		                            )
		                        ),
		                        nodeW = nodeWidth,
		                        right = toNode.column * colDistance,
		                        outgoing = point.outgoing,
		                        straight = right > nodeLeft;

		                    if (inverted) {
		                        fromY = chart.plotSizeY - fromY;
		                        toY = chart.plotSizeY - toY;
		                        right = chart.plotSizeX - right;
		                        nodeW = -nodeW;
		                        linkHeight = -linkHeight;
		                        straight = nodeLeft > right;
		                    }

		                    point.shapeType = 'path';

		                    // Links going from left to right
		                    if (straight) {
		                        point.shapeArgs = {
		                            d: [
		                                'M', nodeLeft + nodeW, fromY,
		                                'C', nodeLeft + nodeW + curvy, fromY,
		                                right - curvy, toY,
		                                right, toY,
		                                'L',
		                                right + (outgoing ? nodeW : 0),
		                                toY + linkHeight / 2,
		                                'L',
		                                right,
		                                toY + linkHeight,
		                                'C', right - curvy, toY + linkHeight,
		                                nodeLeft + nodeW + curvy, fromY + linkHeight,
		                                nodeLeft + nodeW, fromY + linkHeight,
		                                'z'
		                            ]
		                        };

		                    // Experimental: Circular links pointing backwards. In
		                    // v6.1.0 this breaks the rendering completely, so even this
		                    // experimental rendering is an improvement. #8218.
		                    // @todo
		                    // - Make room for the link in the layout
		                    // - Automatically determine if the link should go up or
		                    //   down.
		                    } else {
		                        var bend = 20,
		                            vDist = chart.plotHeight - fromY - linkHeight,
		                            x1 = right - bend - linkHeight,
		                            x2 = right - bend,
		                            x3 = right,
		                            x4 = nodeLeft + nodeW,
		                            x5 = x4 + bend,
		                            x6 = x5 + linkHeight,
		                            fy1 = fromY,
		                            fy2 = fromY + linkHeight,
		                            fy3 = fy2 + bend,
		                            y4 = fy3 + vDist,
		                            y5 = y4 + bend,
		                            y6 = y5 + linkHeight,
		                            ty1 = toY,
		                            ty2 = ty1 + linkHeight,
		                            ty3 = ty2 + bend,
		                            cfy1 = fy2 - linkHeight * 0.7,
		                            cy2 = y5 + linkHeight * 0.7,
		                            cty1 = ty2 - linkHeight * 0.7,
		                            cx1 = x3 - linkHeight * 0.7,
		                            cx2 = x4 + linkHeight * 0.7;

		                        point.shapeArgs = {
		                            d: [
		                                'M', x4, fy1,
		                                'C', cx2, fy1, x6, cfy1, x6, fy3,
		                                'L', x6, y4,
		                                'C', x6, cy2, cx2, y6, x4, y6,
		                                'L', x3, y6,
		                                'C', cx1, y6, x1, cy2, x1, y4,
		                                'L', x1, ty3,
		                                'C', x1, cty1, cx1, ty1, x3, ty1,
		                                'L', x3, ty2,
		                                'C', x2, ty2, x2, ty2, x2, ty3,
		                                'L', x2, y4,
		                                'C', x2, y5, x2, y5, x3, y5,
		                                'L', x4, y5,
		                                'C', x5, y5, x5, y5, x5, y4,
		                                'L', x5, fy3,
		                                'C', x5, fy2, x5, fy2, x4, fy2,
		                                'z'
		                            ]
		                        };

		                    }

		                    // Place data labels in the middle
		                    point.dlBox = {
		                        x: nodeLeft + (right - nodeLeft + nodeW) / 2,
		                        y: fromY + (toY - fromY) / 2,
		                        height: linkHeight,
		                        width: 0
		                    };
		                    // Pass test in drawPoints
		                    point.y = point.plotY = 1;

		                    if (!point.color) {
		                        point.color = node.color;
		                    }
		                });
		            });
		            left += colDistance;

		        }, this);
		    },
		    // Extend the render function to also render this.nodes together with the
		    // points.
		    render: function () {
		        var points = this.points;
		        this.points = this.points.concat(this.nodes);
		        H.seriesTypes.column.prototype.render.call(this);
		        this.points = points;
		    },
		    animate: H.Series.prototype.animate,


		    destroy: function () {
		        // Nodes must also be destroyed (#8682, #9300)
		        this.data = [].concat(this.points, this.nodes);
		        H.Series.prototype.destroy.call(this);
		    }
		}, {
		    getClassName: function () {
		        return (this.isNode ? 'highcharts-node ' : 'highcharts-link ') +
		            Point.prototype.getClassName.call(this);
		    },
		    isValid: function () {
		        return this.isNode || typeof this.weight === 'number';
		    }
		});


		/**
		 * A `sankey` series. If the [type](#series.sankey.type) option is not
		 * specified, it is inherited from [chart.type](#chart.type).
		 *
		 * @extends   series,plotOptions.sankey
		 * @excluding animationLimit, boostThreshold, borderColor, borderRadius,
		 *            borderWidth, crisp, cropThreshold, dataParser, dataURL, depth,
		 *            edgeColor, edgeWidth, findNearestPointBy, grouping, groupPadding,
		 *            groupZPadding, maxPointWidth, negativeColor, pointInterval,
		 *            pointIntervalUnit, pointPadding, pointPlacement, pointRange,
		 *            pointStart, pointWidth, shadow, softThreshold, stacking,
		 *            threshold, zoneAxis, zones
		 * @product   highcharts
		 * @apioption series.sankey
		 */


		/**
		 * A collection of options for the individual nodes. The nodes in a sankey
		 * diagram are auto-generated instances of `Highcharts.Point`, but options can
		 * be applied here and linked by the `id`.
		 *
		 * @sample highcharts/css/sankey/
		 *         Sankey diagram with node options
		 *
		 * @type      {Array<*>}
		 * @product   highcharts
		 * @apioption series.sankey.nodes
		 */

		/**
		 * The id of the auto-generated node, refering to the `from` or `to` setting of
		 * the link.
		 *
		 * @type      {string}
		 * @product   highcharts
		 * @apioption series.sankey.nodes.id
		 */

		/**
		 * The color of the auto generated node.
		 *
		 * @type      {Highcharts.ColorString}
		 * @product   highcharts
		 * @apioption series.sankey.nodes.color
		 */

		/**
		 * The color index of the auto generated node, especially for use in styled
		 * mode.
		 *
		 * @type      {number}
		 * @product   highcharts
		 * @apioption series.sankey.nodes.colorIndex
		 */

		/**
		 * An optional column index of where to place the node. The default behaviour is
		 * to place it next to the preceding node.
		 *
		 * @sample highcharts/plotoptions/sankey-node-column/
		 *         Specified node column
		 *
		 * @type      {number}
		 * @since     6.0.5
		 * @product   highcharts
		 * @apioption series.sankey.nodes.column
		 */

		/**
		 * The name to display for the node in data labels and tooltips. Use this when
		 * the name is different from the `id`. Where the id must be unique for each
		 * node, this is not necessary for the name.
		 *
		 * @sample highcharts/css/sankey/
		 *         Sankey diagram with node options
		 *
		 * @type      {string}
		 * @product   highcharts
		 * @apioption series.sankey.nodes.name
		 */

		/**
		 * The vertical offset of a node in terms of weight. Positive values shift the
		 * node downwards, negative shift it upwards.
		 *
		 * @sample highcharts/plotoptions/sankey-node-column/
		 *         Specified node offset
		 *
		 * @type      {number}
		 * @default   0
		 * @since     6.0.5
		 * @product   highcharts
		 * @apioption series.sankey.nodes.offset
		 */

		/**
		 * An array of data points for the series. For the `sankey` series type,
		 * points can be given in the following way:
		 *
		 * 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.area.turboThreshold),
		 * this option is not available.
		 *
		 *  ```js
		 *     data: [{
		 *         from: 'Category1',
		 *         to: 'Category2',
		 *         weight: 2
		 *     }, {
		 *         from: 'Category1',
		 *         to: 'Category3',
		 *         weight: 5
		 *     }]
		 *  ```
		 *
		 * @sample {highcharts} highcharts/series/data-array-of-objects/
		 *         Config objects
		 *
		 * @type      {Array<*>}
		 * @extends   series.line.data
		 * @excluding drilldown, marker, x, y
		 * @product   highcharts
		 * @apioption series.sankey.data
		 */

		/**
		 * The color for the individual _link_. By default, the link color is the same
		 * as the node it extends from. The `series.fillOpacity` option also applies to
		 * the points, so when setting a specific link color, consider setting the
		 * `fillOpacity` to 1.
		 *
		 * @type      {Highcharts.ColorString}
		 * @product   highcharts
		 * @apioption series.sankey.data.color
		 */

		/**
		 * The node that the link runs from.
		 *
		 * @type      {string}
		 * @product   highcharts
		 * @apioption series.sankey.data.from
		 */

		/**
		 * The node that the link runs to.
		 *
		 * @type      {string}
		 * @product   highcharts
		 * @apioption series.sankey.data.to
		 */

		/**
		 * Whether the link goes out of the system.
		 *
		 * @sample highcharts/plotoptions/sankey-outgoing
		 *         Sankey chart with outgoing links
		 *
		 * @type      {boolean}
		 * @default   false
		 * @product   highcharts
		 * @apioption series.sankey.data.outgoing
		 */

		/**
		 * The weight of the link.
		 *
		 * @type      {number}
		 * @product   highcharts
		 * @apioption series.sankey.data.weight
		 */

	}(Highcharts));
	(function (H) {
		/**
		 * (c) 2010-2018 Torstein Honsi
		 *
		 * License: www.highcharts.com/license
		 */



		var addEvent = H.addEvent,
		    Chart = H.Chart,
		    createElement = H.createElement,
		    css = H.css,
		    defaultOptions = H.defaultOptions,
		    defaultPlotOptions = H.defaultPlotOptions,
		    extend = H.extend,
		    fireEvent = H.fireEvent,
		    hasTouch = H.hasTouch,
		    isObject = H.isObject,
		    Legend = H.Legend,
		    merge = H.merge,
		    pick = H.pick,
		    Point = H.Point,
		    Series = H.Series,
		    seriesTypes = H.seriesTypes,
		    svg = H.svg,
		    TrackerMixin;

		/**
		 * TrackerMixin for points and graphs.
		 *
		 * @private
		 * @mixin Highcharts.TrackerMixin
		 */
		TrackerMixin = H.TrackerMixin = {

		    /**
		     * Draw the tracker for a point.
		     *
		     * @private
		     * @function Highcharts.TrackerMixin.drawTrackerPoint
		     *
		     * @fires Highcharts.Series#event:afterDrawTracker
		     */
		    drawTrackerPoint: function () {
		        var series = this,
		            chart = series.chart,
		            pointer = chart.pointer,
		            onMouseOver = function (e) {
		                var point = pointer.getPointFromEvent(e);
		                // undefined on graph in scatterchart
		                if (point !== undefined) {
		                    pointer.isDirectTouch = true;
		                    point.onMouseOver(e);
		                }
		            };

		        // Add reference to the point
		        series.points.forEach(function (point) {
		            if (point.graphic) {
		                point.graphic.element.point = point;
		            }
		            if (point.dataLabel) {
		                if (point.dataLabel.div) {
		                    point.dataLabel.div.point = point;
		                } else {
		                    point.dataLabel.element.point = point;
		                }
		            }
		        });

		        // Add the event listeners, we need to do this only once
		        if (!series._hasTracking) {
		            series.trackerGroups.forEach(function (key) {
		                if (series[key]) { // we don't always have dataLabelsGroup
		                    series[key]
		                        .addClass('highcharts-tracker')
		                        .on('mouseover', onMouseOver)
		                        .on('mouseout', function (e) {
		                            pointer.onTrackerMouseOut(e);
		                        });
		                    if (hasTouch) {
		                        series[key].on('touchstart', onMouseOver);
		                    }

		                    if (!chart.styledMode && series.options.cursor) {
		                        series[key]
		                            .css(css)
		                            .css({ cursor: series.options.cursor });
		                    }
		                }
		            });
		            series._hasTracking = true;
		        }

		        fireEvent(this, 'afterDrawTracker');
		    },

		    /**
		     * Draw the tracker object that sits above all data labels and markers to
		     * track mouse events on the graph or points. For the line type charts
		     * the tracker uses the same graphPath, but with a greater stroke width
		     * for better control.
		     *
		     * @private
		     * @function Highcharts.TrackerMixin.drawTrackerGraph
		     *
		     * @fires Highcharts.Series#event:afterDrawTracker
		     */
		    drawTrackerGraph: function () {
		        var series = this,
		            options = series.options,
		            trackByArea = options.trackByArea,
		            trackerPath = [].concat(
		                trackByArea ? series.areaPath : series.graphPath
		            ),
		            trackerPathLength = trackerPath.length,
		            chart = series.chart,
		            pointer = chart.pointer,
		            renderer = chart.renderer,
		            snap = chart.options.tooltip.snap,
		            tracker = series.tracker,
		            i,
		            onMouseOver = function () {
		                if (chart.hoverSeries !== series) {
		                    series.onMouseOver();
		                }
		            },
		            /*
		             * Empirical lowest possible opacities for TRACKER_FILL for an
		             * element to stay invisible but clickable
		             * IE6: 0.002
		             * IE7: 0.002
		             * IE8: 0.002
		             * IE9: 0.00000000001 (unlimited)
		             * IE10: 0.0001 (exporting only)
		             * FF: 0.00000000001 (unlimited)
		             * Chrome: 0.000001
		             * Safari: 0.000001
		             * Opera: 0.00000000001 (unlimited)
		             */
		            TRACKER_FILL = 'rgba(192,192,192,' + (svg ? 0.0001 : 0.002) + ')';

		        // Extend end points. A better way would be to use round linecaps,
		        // but those are not clickable in VML.
		        if (trackerPathLength && !trackByArea) {
		            i = trackerPathLength + 1;
		            while (i--) {
		                if (trackerPath[i] === 'M') { // extend left side
		                    trackerPath.splice(
		                        i + 1, 0,
		                        trackerPath[i + 1] - snap,
		                        trackerPath[i + 2],
		                        'L'
		                    );
		                }
		                if (
		                    (i && trackerPath[i] === 'M') ||
		                    i === trackerPathLength
		                ) { // extend right side
		                    trackerPath.splice(
		                        i,
		                        0,
		                        'L',
		                        trackerPath[i - 2] + snap,
		                        trackerPath[i - 1]
		                    );
		                }
		            }
		        }

		        // draw the tracker
		        if (tracker) {
		            tracker.attr({ d: trackerPath });
		        } else if (series.graph) { // create

		            series.tracker = renderer.path(trackerPath)
		            .attr({
		                visibility: series.visible ? 'visible' : 'hidden',
		                zIndex: 2
		            })
		            .addClass(
		                trackByArea ?
		                    'highcharts-tracker-area' :
		                    'highcharts-tracker-line'
		            )
		            .add(series.group);

		            if (!chart.styledMode) {
		                series.tracker.attr({
		                    'stroke-linejoin': 'round', // #1225
		                    stroke: TRACKER_FILL,
		                    fill: trackByArea ? TRACKER_FILL : 'none',
		                    'stroke-width': series.graph.strokeWidth() +
		                        (trackByArea ? 0 : 2 * snap)
		                });
		            }

		            // The tracker is added to the series group, which is clipped, but
		            // is covered by the marker group. So the marker group also needs to
		            // capture events.
		            [series.tracker, series.markerGroup].forEach(function (tracker) {
		                tracker.addClass('highcharts-tracker')
		                    .on('mouseover', onMouseOver)
		                    .on('mouseout', function (e) {
		                        pointer.onTrackerMouseOut(e);
		                    });

		                if (options.cursor && !chart.styledMode) {
		                    tracker.css({ cursor: options.cursor });
		                }

		                if (hasTouch) {
		                    tracker.on('touchstart', onMouseOver);
		                }
		            });
		        }
		        fireEvent(this, 'afterDrawTracker');
		    }
		};
		/* End TrackerMixin */


		/*
		 * Add tracking event listener to the series group, so the point graphics
		 * themselves act as trackers
		 */

		if (seriesTypes.column) {
		    /**
		     * @private
		     * @borrows Highcharts.TrackerMixin.drawTrackerPoint as Highcharts.seriesTypes.column#drawTracker
		     */
		    seriesTypes.column.prototype.drawTracker = TrackerMixin.drawTrackerPoint;
		}

		if (seriesTypes.pie) {
		    /**
		     * @private
		     * @borrows Highcharts.TrackerMixin.drawTrackerPoint as Highcharts.seriesTypes.pie#drawTracker
		     */
		    seriesTypes.pie.prototype.drawTracker = TrackerMixin.drawTrackerPoint;
		}

		if (seriesTypes.scatter) {
		    /**
		     * @private
		     * @borrows Highcharts.TrackerMixin.drawTrackerPoint as Highcharts.seriesTypes.scatter#drawTracker
		     */
		    seriesTypes.scatter.prototype.drawTracker = TrackerMixin.drawTrackerPoint;
		}

		// Extend Legend for item events.
		extend(Legend.prototype, {

		    /**
		     * @private
		     * @function Highcharts.Legend#setItemEvents
		     *
		     * @param {Highcharts.Point|Highcharts.Series} item
		     *
		     * @param {Highcharts.SVGElement} legendItem
		     *
		     * @param {boolean} [useHTML=false]
		     *
		     * @fires Highcharts.Point#event:legendItemClick
		     * @fires Highcharts.Series#event:legendItemClick
		     */
		    setItemEvents: function (item, legendItem, useHTML) {
		        var legend = this,
		            boxWrapper = legend.chart.renderer.boxWrapper,
		            activeClass = 'highcharts-legend-' +
		                (item instanceof Point ? 'point' : 'series') + '-active',
		            styledMode = legend.chart.styledMode;

		        // Set the events on the item group, or in case of useHTML, the item
		        // itself (#1249)
		        (useHTML ? legendItem : item.legendGroup).on('mouseover', function () {
		            item.setState('hover');

		            // A CSS class to dim or hide other than the hovered series
		            boxWrapper.addClass(activeClass);

		            if (!styledMode) {
		                legendItem.css(legend.options.itemHoverStyle);
		            }
		        })
		        .on('mouseout', function () {
		            if (!legend.styledMode) {
		                legendItem.css(
		                    merge(
		                        item.visible ?
		                            legend.itemStyle :
		                            legend.itemHiddenStyle
		                    )
		                );
		            }

		            // A CSS class to dim or hide other than the hovered series
		            boxWrapper.removeClass(activeClass);

		            item.setState();
		        })
		        .on('click', function (event) {
		            var strLegendItemClick = 'legendItemClick',
		                fnLegendItemClick = function () {
		                    if (item.setVisible) {
		                        item.setVisible();
		                    }
		                };

		            // A CSS class to dim or hide other than the hovered series. Event
		            // handling in iOS causes the activeClass to be added prior to click
		            // in some cases (#7418).
		            boxWrapper.removeClass(activeClass);

		            // Pass over the click/touch event. #4.
		            event = {
		                browserEvent: event
		            };

		            // click the name or symbol
		            if (item.firePointEvent) { // point
		                item.firePointEvent(
		                    strLegendItemClick,
		                    event,
		                    fnLegendItemClick
		                );
		            } else {
		                fireEvent(item, strLegendItemClick, event, fnLegendItemClick);
		            }
		        });
		    },

		    /**
		     * @private
		     * @function Highcharts.Legend#createCheckboxForItem
		     *
		     * @param {Highcharts.Point|Highcharts.Series} item
		     *
		     * @fires Highcharts.Series#event:checkboxClick
		     */
		    createCheckboxForItem: function (item) {
		        var legend = this;

		        item.checkbox = createElement('input', {
		            type: 'checkbox',
		            className: 'highcharts-legend-checkbox',
		            checked: item.selected,
		            defaultChecked: item.selected // required by IE7
		        }, legend.options.itemCheckboxStyle, legend.chart.container);

		        addEvent(item.checkbox, 'click', function (event) {
		            var target = event.target;
		            fireEvent(
		                item.series || item,
		                'checkboxClick',
		                { // #3712
		                    checked: target.checked,
		                    item: item
		                },
		                function () {
		                    item.select();
		                }
		            );
		        });
		    }
		});

		/*
		 * Extend the Chart object with interaction
		 */

		extend(Chart.prototype, /** @lends Chart.prototype */ {

		    /**
		     * Display the zoom button.
		     *
		     * @private
		     * @function Highcharts.Chart#showResetZoom
		     *
		     * @fires Highcharts.Chart#event:beforeShowResetZoom
		     */
		    showResetZoom: function () {
		        var chart = this,
		            lang = defaultOptions.lang,
		            btnOptions = chart.options.chart.resetZoomButton,
		            theme = btnOptions.theme,
		            states = theme.states,
		            alignTo = btnOptions.relativeTo === 'chart' ? null : 'plotBox';

		        function zoomOut() {
		            chart.zoomOut();
		        }

		        fireEvent(this, 'beforeShowResetZoom', null, function () {
		            chart.resetZoomButton = chart.renderer.button(
		                    lang.resetZoom,
		                    null,
		                    null,
		                    zoomOut,
		                    theme,
		                    states && states.hover
		                )
		                .attr({
		                    align: btnOptions.position.align,
		                    title: lang.resetZoomTitle
		                })
		                .addClass('highcharts-reset-zoom')
		                .add()
		                .align(btnOptions.position, false, alignTo);
		        });

		    },

		    /**
		     * Zoom the chart out after a user has zoomed in. See also
		     * [Axis.setExtremes](/class-reference/Highcharts.Axis#setExtremes).
		     *
		     * @function Highcharts.Chart#zoomOut
		     *
		     * @fires Highcharts.Chart#event:selection
		     */
		    zoomOut: function () {
		        fireEvent(this, 'selection', { resetSelection: true }, this.zoom);
		    },

		    /**
		     * Zoom into a given portion of the chart given by axis coordinates.
		     *
		     * @private
		     * @function Highcharts.Chart#zoom
		     *
		     * @param {Highcharts.SelectEventObject} event
		     */
		    zoom: function (event) {
		        var chart = this,
		            hasZoomed,
		            pointer = chart.pointer,
		            displayButton = false,
		            resetZoomButton;

		        // If zoom is called with no arguments, reset the axes
		        if (!event || event.resetSelection) {
		            chart.axes.forEach(function (axis) {
		                hasZoomed = axis.zoom();
		            });
		            pointer.initiated = false; // #6804

		        } else { // else, zoom in on all axes
		            event.xAxis.concat(event.yAxis).forEach(function (axisData) {
		                var axis = axisData.axis,
		                    isXAxis = axis.isXAxis;

		                // don't zoom more than minRange
		                if (pointer[isXAxis ? 'zoomX' : 'zoomY']) {
		                    hasZoomed = axis.zoom(axisData.min, axisData.max);
		                    if (axis.displayBtn) {
		                        displayButton = true;
		                    }
		                }
		            });
		        }

		        // Show or hide the Reset zoom button
		        resetZoomButton = chart.resetZoomButton;
		        if (displayButton && !resetZoomButton) {
		            chart.showResetZoom();
		        } else if (!displayButton && isObject(resetZoomButton)) {
		            chart.resetZoomButton = resetZoomButton.destroy();
		        }


		        // Redraw
		        if (hasZoomed) {
		            chart.redraw(
		                pick(
		                    chart.options.chart.animation,
		                    event && event.animation,
		                    chart.pointCount < 100
		                )
		            );
		        }
		    },

		    /**
		     * Pan the chart by dragging the mouse across the pane. This function is
		     * called on mouse move, and the distance to pan is computed from chartX
		     * compared to the first chartX position in the dragging operation.
		     *
		     * @private
		     * @function Highcharts.Chart#pan
		     *
		     * @param {Highcharts.PointerEventObject} e
		     *
		     * @param {string} panning
		     */
		    pan: function (e, panning) {

		        var chart = this,
		            hoverPoints = chart.hoverPoints,
		            doRedraw;

		        // remove active points for shared tooltip
		        if (hoverPoints) {
		            hoverPoints.forEach(function (point) {
		                point.setState();
		            });
		        }

		        // xy is used in maps
		        (panning === 'xy' ? [1, 0] : [1]).forEach(function (isX) {
		            var axis = chart[isX ? 'xAxis' : 'yAxis'][0],
		                horiz = axis.horiz,
		                mousePos = e[horiz ? 'chartX' : 'chartY'],
		                mouseDown = horiz ? 'mouseDownX' : 'mouseDownY',
		                startPos = chart[mouseDown],
		                halfPointRange = (axis.pointRange || 0) / 2,
		                pointRangeDirection =
		                    (axis.reversed && !chart.inverted) ||
		                    (!axis.reversed && chart.inverted) ?
		                        -1 :
		                        1,
		                extremes = axis.getExtremes(),
		                panMin = axis.toValue(startPos - mousePos, true) +
		                    halfPointRange * pointRangeDirection,
		                panMax = axis.toValue(startPos + axis.len - mousePos, true) -
		                    halfPointRange * pointRangeDirection,
		                flipped = panMax < panMin,
		                newMin = flipped ? panMax : panMin,
		                newMax = flipped ? panMin : panMax,
		                paddedMin = Math.min(
		                    extremes.dataMin,
		                    halfPointRange ?
		                        extremes.min :
		                        axis.toValue(
		                            axis.toPixels(extremes.min) - axis.minPixelPadding
		                        )
		                ),
		                paddedMax = Math.max(
		                    extremes.dataMax,
		                    halfPointRange ?
		                        extremes.max :
		                        axis.toValue(
		                            axis.toPixels(extremes.max) + axis.minPixelPadding
		                        )
		                ),
		                spill;

		            // If the new range spills over, either to the min or max, adjust
		            // the new range.
		            spill = paddedMin - newMin;
		            if (spill > 0) {
		                newMax += spill;
		                newMin = paddedMin;
		            }
		            spill = newMax - paddedMax;
		            if (spill > 0) {
		                newMax = paddedMax;
		                newMin -= spill;
		            }

		            // Set new extremes if they are actually new
		            if (
		                axis.series.length &&
		                newMin !== extremes.min &&
		                newMax !== extremes.max
		            ) {
		                axis.setExtremes(
		                    newMin,
		                    newMax,
		                    false,
		                    false,
		                    { trigger: 'pan' }
		                );
		                doRedraw = true;
		            }

		            chart[mouseDown] = mousePos; // set new reference for next run
		        });

		        if (doRedraw) {
		            chart.redraw(false);
		        }
		        css(chart.container, { cursor: 'move' });
		    }
		});

		// Extend the Point object with interaction
		extend(Point.prototype, /** @lends Highcharts.Point.prototype */ {

		    /**
		     * Toggle the selection status of a point.
		     *
		     * @see Highcharts.Chart#getSelectedPoints
		     *
		     * @sample highcharts/members/point-select/
		     *         Select a point from a button
		     * @sample highcharts/chart/events-selection-points/
		     *         Select a range of points through a drag selection
		     * @sample maps/series/data-id/
		     *         Select a point in Highmaps
		     *
		     * @function Highcharts.Point#select
		     *
		     * @param {boolean} [selected]
		     *        When `true`, the point is selected. When `false`, the point is
		     *        unselected. When `null` or `undefined`, the selection state is
		     *        toggled.
		     *
		     * @param {boolean} [accumulate=false]
		     *        When `true`, the selection is added to other selected points.
		     *        When `false`, other selected points are deselected. Internally in
		     *        Highcharts, when
		     *        [allowPointSelect](http://api.highcharts.com/highcharts/plotOptions.series.allowPointSelect)
		     *        is `true`, selected points are accumulated on Control, Shift or
		     *        Cmd clicking the point.
		     *
		     * @fires Highcharts.Point#event:select
		     * @fires Highcharts.Point#event:unselect
		     */
		    select: function (selected, accumulate) {
		        var point = this,
		            series = point.series,
		            chart = series.chart;

		        selected = pick(selected, !point.selected);

		        // fire the event with the default handler
		        point.firePointEvent(
		            selected ? 'select' : 'unselect',
		            { accumulate: accumulate },
		            function () {

		                /**
		                 * Whether the point is selected or not.
		                 *
		                 * @see Point#select
		                 * @see Chart#getSelectedPoints
		                 *
		                 * @name Highcharts.Point#selected
		                 * @type {boolean}
		                 */
		                point.selected = point.options.selected = selected;
		                series.options.data[series.data.indexOf(point)] =
		                    point.options;

		                point.setState(selected && 'select');

		                // unselect all other points unless Ctrl or Cmd + click
		                if (!accumulate) {
		                    chart.getSelectedPoints().forEach(function (loopPoint) {
		                        if (loopPoint.selected && loopPoint !== point) {
		                            loopPoint.selected = loopPoint.options.selected =
		                                false;
		                            series.options.data[
		                                series.data.indexOf(loopPoint)
		                            ] = loopPoint.options;
		                            loopPoint.setState('');
		                            loopPoint.firePointEvent('unselect');
		                        }
		                    });
		                }
		            }
		        );
		    },

		    /**
		     * Runs on mouse over the point. Called internally from mouse and touch
		     * events.
		     *
		     * @function Highcharts.Point#onMouseOver
		     *
		     * @param {Highcharts.PointerEventObject} e
		     *        The event arguments.
		     */
		    onMouseOver: function (e) {
		        var point = this,
		            series = point.series,
		            chart = series.chart,
		            pointer = chart.pointer;
		        e = e ?
		            pointer.normalize(e) :
		            // In cases where onMouseOver is called directly without an event
		            pointer.getChartCoordinatesFromPoint(point, chart.inverted);
		        pointer.runPointActions(e, point);
		    },

		    /**
		     * Runs on mouse out from the point. Called internally from mouse and touch
		     * events.
		     *
		     * @function Highcharts.Point#onMouseOut
		     *
		     * @fires Highcharts.Point#event:mouseOut
		     */
		    onMouseOut: function () {
		        var point = this,
		            chart = point.series.chart;
		        point.firePointEvent('mouseOut');
		        (chart.hoverPoints || []).forEach(function (p) {
		            p.setState();
		        });
		        chart.hoverPoints = chart.hoverPoint = null;
		    },

		    /**
		     * Import events from the series' and point's options. Only do it on
		     * demand, to save processing time on hovering.
		     *
		     * @private
		     * @function Highcharts.Point#importEvents
		     */
		    importEvents: function () {
		        if (!this.hasImportedEvents) {
		            var point = this,
		                options = merge(point.series.options.point, point.options),
		                events = options.events;

		            point.events = events;

		            H.objectEach(events, function (event, eventType) {
		                addEvent(point, eventType, event);
		            });
		            this.hasImportedEvents = true;

		        }
		    },

		    /**
		     * Set the point's state.
		     *
		     * @function Highcharts.Point#setState
		     *
		     * @param {string} [state]
		     *        The new state, can be one of `''` (an empty string), `hover` or
		     *        `select`.
		     *
		     * @param {boolean} [move]
		     *        State for animation.
		     *
		     * @fires Highcharts.Point#event:afterSetState
		     */
		    setState: function (state, move) {
		        var point = this,
		            plotX = Math.floor(point.plotX), // #4586
		            plotY = point.plotY,
		            series = point.series,
		            stateOptions = series.options.states[state || 'normal'] || {},
		            markerOptions = defaultPlotOptions[series.type].marker &&
		                series.options.marker,
		            normalDisabled = markerOptions && markerOptions.enabled === false,
		            markerStateOptions = (
		                markerOptions &&
		                markerOptions.states &&
		                markerOptions.states[state || 'normal']
		            ) || {},
		            stateDisabled = markerStateOptions.enabled === false,
		            stateMarkerGraphic = series.stateMarkerGraphic,
		            pointMarker = point.marker || {},
		            chart = series.chart,
		            halo = series.halo,
		            haloOptions,
		            markerAttribs,
		            hasMarkers = markerOptions && series.markerAttribs,
		            newSymbol;

		        state = state || ''; // empty string

		        if (
		            // already has this state
		            (state === point.state && !move) ||

		            // selected points don't respond to hover
		            (point.selected && state !== 'select') ||

		            // series' state options is disabled
		            (stateOptions.enabled === false) ||

		            // general point marker's state options is disabled
		            (state && (
		                stateDisabled ||
		                (normalDisabled && markerStateOptions.enabled === false)
		            )) ||

		            // individual point marker's state options is disabled
		            (
		                state &&
		                pointMarker.states &&
		                pointMarker.states[state] &&
		                pointMarker.states[state].enabled === false
		            ) // #1610

		        ) {
		            return;
		        }

		        if (hasMarkers) {
		            markerAttribs = series.markerAttribs(point, state);
		        }

		        // Apply hover styles to the existing point
		        if (point.graphic) {

		            if (point.state) {
		                point.graphic.removeClass('highcharts-point-' + point.state);
		            }
		            if (state) {
		                point.graphic.addClass('highcharts-point-' + state);
		            }

		            if (!chart.styledMode) {
		                point.graphic.animate(
		                    series.pointAttribs(point, state),
		                    pick(
		                        chart.options.chart.animation,
		                        stateOptions.animation
		                    )
		                );
		            }

		            if (markerAttribs) {
		                point.graphic.animate(
		                    markerAttribs,
		                    pick(
		                        chart.options.chart.animation, // Turn off globally
		                        markerStateOptions.animation,
		                        markerOptions.animation
		                    )
		                );
		            }

		            // Zooming in from a range with no markers to a range with markers
		            if (stateMarkerGraphic) {
		                stateMarkerGraphic.hide();
		            }
		        } else {
		            // if a graphic is not applied to each point in the normal state,
		            // create a shared graphic for the hover state
		            if (state && markerStateOptions) {
		                newSymbol = pointMarker.symbol || series.symbol;

		                // If the point has another symbol than the previous one, throw
		                // away the state marker graphic and force a new one (#1459)
		                if (
		                    stateMarkerGraphic &&
		                    stateMarkerGraphic.currentSymbol !== newSymbol
		                ) {
		                    stateMarkerGraphic = stateMarkerGraphic.destroy();
		                }

		                // Add a new state marker graphic
		                if (!stateMarkerGraphic) {
		                    if (newSymbol) {
		                        series.stateMarkerGraphic = stateMarkerGraphic =
		                            chart.renderer.symbol(
		                                newSymbol,
		                                markerAttribs.x,
		                                markerAttribs.y,
		                                markerAttribs.width,
		                                markerAttribs.height
		                            )
		                            .add(series.markerGroup);
		                        stateMarkerGraphic.currentSymbol = newSymbol;
		                    }

		                // Move the existing graphic
		                } else {
		                    stateMarkerGraphic[move ? 'animate' : 'attr']({ // #1054
		                        x: markerAttribs.x,
		                        y: markerAttribs.y
		                    });
		                }

		                if (!chart.styledMode && stateMarkerGraphic) {
		                    stateMarkerGraphic.attr(series.pointAttribs(point, state));
		                }
		            }

		            if (stateMarkerGraphic) {
		                stateMarkerGraphic[
		                    state && chart.isInsidePlot(plotX, plotY, chart.inverted) ?
		                        'show' :
		                        'hide'
		                ](); // #2450
		                stateMarkerGraphic.element.point = point; // #4310
		            }
		        }

		        // Show me your halo
		        haloOptions = stateOptions.halo;
		        if (haloOptions && haloOptions.size) {
		            if (!halo) {
		                series.halo = halo = chart.renderer.path()
		                    // #5818, #5903, #6705
		                    .add((point.graphic || stateMarkerGraphic).parentGroup);
		            }
		            halo.show()[move ? 'animate' : 'attr']({
		                d: point.haloPath(haloOptions.size)
		            });
		            halo.attr({
		                'class': 'highcharts-halo highcharts-color-' +
		                    pick(point.colorIndex, series.colorIndex) +
		                    (point.className ? ' ' + point.className : ''),
		                'zIndex': -1 // #4929, #8276
		            });
		            halo.point = point; // #6055

		            if (!chart.styledMode) {
		                halo.attr(extend({
		                    'fill': point.color || series.color,
		                    'fill-opacity': haloOptions.opacity
		                }, haloOptions.attributes));
		            }

		        } else if (halo && halo.point && halo.point.haloPath) {
		            // Animate back to 0 on the current halo point (#6055)
		            halo.animate(
		                { d: halo.point.haloPath(0) },
		                null,
		                // Hide after unhovering. The `complete` callback runs in the
		                // halo's context (#7681).
		                halo.hide
		            );
		        }

		        point.state = state;

		        fireEvent(point, 'afterSetState');
		    },

		    /**
		     * Get the path definition for the halo, which is usually a shadow-like
		     * circle around the currently hovered point.
		     *
		     * @function Highcharts.Point#haloPath
		     *
		     * @param {number} size
		     *        The radius of the circular halo.
		     *
		     * @return {Highcharts.SVGPathArray}
		     *         The path definition.
		     */
		    haloPath: function (size) {
		        var series = this.series,
		            chart = series.chart;

		        return chart.renderer.symbols.circle(
		            Math.floor(this.plotX) - size,
		            this.plotY - size,
		            size * 2,
		            size * 2
		        );
		    }
		});

		// Extend the Series object with interaction
		extend(Series.prototype, /** @lends Highcharts.Series.prototype */ {

		    /**
		     * Runs on mouse over the series graphical items.
		     *
		     * @function Highcharts.Series#onMouseOver
		     *
		     * @fires Highcharts.Series#event:mouseOver
		     */
		    onMouseOver: function () {
		        var series = this,
		            chart = series.chart,
		            hoverSeries = chart.hoverSeries;

		        // set normal state to previous series
		        if (hoverSeries && hoverSeries !== series) {
		            hoverSeries.onMouseOut();
		        }

		        // trigger the event, but to save processing time,
		        // only if defined
		        if (series.options.events.mouseOver) {
		            fireEvent(series, 'mouseOver');
		        }

		        // hover this
		        series.setState('hover');
		        chart.hoverSeries = series;
		    },

		    /**
		     * Runs on mouse out of the series graphical items.
		     *
		     * @function Highcharts.Series#onMouseOut
		     *
		     * @fires Highcharts.Series#event:mouseOut
		     */
		    onMouseOut: function () {
		        // trigger the event only if listeners exist
		        var series = this,
		            options = series.options,
		            chart = series.chart,
		            tooltip = chart.tooltip,
		            hoverPoint = chart.hoverPoint;

		        // #182, set to null before the mouseOut event fires
		        chart.hoverSeries = null;

		        // trigger mouse out on the point, which must be in this series
		        if (hoverPoint) {
		            hoverPoint.onMouseOut();
		        }

		        // fire the mouse out event
		        if (series && options.events.mouseOut) {
		            fireEvent(series, 'mouseOut');
		        }


		        // hide the tooltip
		        if (
		            tooltip &&
		            !series.stickyTracking &&
		            (!tooltip.shared || series.noSharedTooltip)
		        ) {
		            tooltip.hide();
		        }

		        // set normal state
		        series.setState();
		    },

		    /**
		     * Set the state of the series. Called internally on mouse interaction
		     * operations, but it can also be called directly to visually
		     * highlight a series.
		     *
		     * @function Highcharts.Series#setState
		     *
		     * @param {string} [state]
		     *        Can be either `hover` or undefined to set to normal state.
		     */
		    setState: function (state) {
		        var series = this,
		            options = series.options,
		            graph = series.graph,
		            stateOptions = options.states,
		            lineWidth = options.lineWidth,
		            attribs,
		            i = 0;

		        state = state || '';

		        if (series.state !== state) {

		            // Toggle class names
		            [
		                series.group,
		                series.markerGroup,
		                series.dataLabelsGroup
		            ].forEach(function (group) {
		                if (group) {
		                    // Old state
		                    if (series.state) {
		                        group.removeClass('highcharts-series-' + series.state);
		                    }
		                    // New state
		                    if (state) {
		                        group.addClass('highcharts-series-' + state);
		                    }
		                }
		            });

		            series.state = state;

		            if (!series.chart.styledMode) {

		                if (
		                    stateOptions[state] &&
		                    stateOptions[state].enabled === false
		                ) {
		                    return;
		                }

		                if (state) {
		                    lineWidth = (
		                        stateOptions[state].lineWidth ||
		                        lineWidth + (stateOptions[state].lineWidthPlus || 0)
		                    ); // #4035
		                }

		                if (graph && !graph.dashstyle) {
		                    attribs = {
		                        'stroke-width': lineWidth
		                    };

		                    // Animate the graph stroke-width. By default a quick
		                    // animation to hover, slower to un-hover.
		                    graph.animate(
		                        attribs,
		                        pick(
		                            (
		                                stateOptions[state || 'normal'] &&
		                                stateOptions[state || 'normal'].animation
		                            ),
		                            series.chart.options.chart.animation
		                        )
		                    );
		                    while (series['zone-graph-' + i]) {
		                        series['zone-graph-' + i].attr(attribs);
		                        i = i + 1;
		                    }
		                }
		            }
		        }
		    },

		    /**
		     * Show or hide the series.
		     *
		     * @function Highcharts.Series#setVisible
		     *
		     * @param {boolean} [visible]
		     *        True to show the series, false to hide. If undefined, the
		     *        visibility is toggled.
		     *
		     * @param {boolean} [redraw=true]
		     *        Whether to redraw the chart after the series is altered. If doing
		     *        more operations on the chart, it is a good idea to set redraw to
		     *        false and call {@link Chart#redraw|chart.redraw()} after.
		     *
		     * @fires Highcharts.Series#event:hide
		     * @fires Highcharts.Series#event:show
		     */
		    setVisible: function (vis, redraw) {
		        var series = this,
		            chart = series.chart,
		            legendItem = series.legendItem,
		            showOrHide,
		            ignoreHiddenSeries = chart.options.chart.ignoreHiddenSeries,
		            oldVisibility = series.visible;

		        // if called without an argument, toggle visibility
		        series.visible =
		            vis =
		            series.options.visible =
		            series.userOptions.visible =
		            vis === undefined ? !oldVisibility : vis; // #5618
		        showOrHide = vis ? 'show' : 'hide';

		        // show or hide elements
		        [
		            'group',
		            'dataLabelsGroup',
		            'markerGroup',
		            'tracker',
		            'tt'
		        ].forEach(function (key) {
		            if (series[key]) {
		                series[key][showOrHide]();
		            }
		        });


		        // hide tooltip (#1361)
		        if (
		            chart.hoverSeries === series ||
		            (chart.hoverPoint && chart.hoverPoint.series) === series
		        ) {
		            series.onMouseOut();
		        }


		        if (legendItem) {
		            chart.legend.colorizeItem(series, vis);
		        }


		        // rescale or adapt to resized chart
		        series.isDirty = true;
		        // in a stack, all other series are affected
		        if (series.options.stacking) {
		            chart.series.forEach(function (otherSeries) {
		                if (otherSeries.options.stacking && otherSeries.visible) {
		                    otherSeries.isDirty = true;
		                }
		            });
		        }

		        // show or hide linked series
		        series.linkedSeries.forEach(function (otherSeries) {
		            otherSeries.setVisible(vis, false);
		        });

		        if (ignoreHiddenSeries) {
		            chart.isDirtyBox = true;
		        }

		        fireEvent(series, showOrHide);

		        if (redraw !== false) {
		            chart.redraw();
		        }
		    },

		    /**
		     * Show the series if hidden.
		     *
		     * @sample highcharts/members/series-hide/
		     *         Toggle visibility from a button
		     *
		     * @function Highcharts.Series#show
		     *
		     * @fires Highcharts.Series#event:show
		     */
		    show: function () {
		        this.setVisible(true);
		    },

		    /**
		     * Hide the series if visible. If the {@link
		     * https://api.highcharts.com/highcharts/chart.ignoreHiddenSeries|
		     * chart.ignoreHiddenSeries} option is true, the chart is redrawn without
		     * this series.
		     *
		     * @sample highcharts/members/series-hide/
		     *         Toggle visibility from a button
		     *
		     * @function Highcharts.Series#hide
		     *
		     * @fires Highcharts.Series#event:hide
		     */
		    hide: function () {
		        this.setVisible(false);
		    },


		    /**
		     * Select or unselect the series. This means its
		     * {@link Highcharts.Series.selected|selected}
		     * property is set, the checkbox in the legend is toggled and when selected,
		     * the series is returned by the
		     * {@link Highcharts.Chart#getSelectedSeries}
		     * function.
		     *
		     * @sample highcharts/members/series-select/
		     *         Select a series from a button
		     *
		     * @function Highcharts.Series#select
		     *
		     * @param {boolean} [selected]
		     *        True to select the series, false to unselect. If undefined, the
		     *        selection state is toggled.
		     *
		     * @fires Highcharts.Series#event:select
		     * @fires Highcharts.Series#event:unselect
		     */
		    select: function (selected) {
		        var series = this;

		        series.selected =
		        selected =
		        this.options.selected = (
		            selected === undefined ?
		                !series.selected :
		                selected
		        );

		        if (series.checkbox) {
		            series.checkbox.checked = selected;
		        }

		        fireEvent(series, selected ? 'select' : 'unselect');
		    },

		    /**
		     * @private
		     * @borrows Highcharts.TrackerMixin.drawTrackerGraph as Highcharts.Series#drawTracker
		     */
		    drawTracker: TrackerMixin.drawTrackerGraph
		});

	}(Highcharts));
	(function (H) {
		/* *
		 * (c) 2010-2018 Torstein Honsi
		 *
		 * License: www.highcharts.com/license
		 */



		var isNumber = H.isNumber,
		    merge = H.merge,
		    noop = H.noop,
		    pick = H.pick,
		    pInt = H.pInt,
		    Series = H.Series,
		    seriesType = H.seriesType,
		    TrackerMixin = H.TrackerMixin;

		/**
		 * Gauges are circular plots displaying one or more values with a dial pointing
		 * to values along the perimeter.
		 *
		 * @sample highcharts/demo/gauge-speedometer/
		 *         Gauge chart
		 *
		 * @extends      plotOptions.line
		 * @excluding    animationLimit, boostThreshold, connectEnds, connectNulls,
		 *               cropThreshold, dashStyle, findNearestPointBy,
		 *               getExtremesFromAll, marker, negativeColor, pointPlacement,
		 *               shadow, softThreshold, stacking, states, step, threshold,
		 *               turboThreshold, xAxis, zoneAxis, zones
		 * @product      highcharts
		 * @optionparent plotOptions.gauge
		 */
		seriesType('gauge', 'line', {

		    /**
		     * When this option is `true`, the dial will wrap around the axes. For
		     * instance, in a full-range gauge going from 0 to 360, a value of 400
		     * will point to 40\. When `wrap` is `false`, the dial stops at 360.
		     *
		     * @see [overshoot](#plotOptions.gauge.overshoot)
		     *
		     * @type      {boolean}
		     * @default   true
		     * @since     3.0
		     * @product   highcharts
		     * @apioption plotOptions.gauge.wrap
		     */

		    /**
		     * Data labels for the gauge. For gauges, the data labels are enabled
		     * by default and shown in a bordered box below the point.
		     *
		     * @extends plotOptions.series.dataLabels
		     * @since   2.3.0
		     * @product highcharts
		     */
		    dataLabels: {

		        /**
		         * Enable or disable the data labels.
		         *
		         * @since   2.3.0
		         * @product highcharts highmaps
		         */
		        enabled: true,

		        defer: false,

		        /**
		         * The y position offset of the label relative to the center of the
		         * gauge.
		         *
		         * @since   2.3.0
		         * @product highcharts highmaps
		         */
		        y: 15,

		        /**
		         * The border radius in pixels for the gauge's data label.
		         *
		         * @since   2.3.0
		         * @product highcharts highmaps
		         */
		        borderRadius: 3,

		        crop: false,

		        /**
		         * The vertical alignment of the data label.
		         *
		         * @product highcharts highmaps
		         */
		        verticalAlign: 'top',

		        /**
		         * The Z index of the data labels. A value of 2 display them behind
		         * the dial.
		         *
		         * @since   2.1.5
		         * @product highcharts highmaps
		         */
		        zIndex: 2,

		        /**
		         * The border width in pixels for the gauge data label.
		         *
		         * @since   2.3.0
		         * @product highcharts highmaps
		         */
		        borderWidth: 1,

		        /**
		         * The border color for the data label.
		         *
		         * @type    {Highcharts.ColorString}
		         * @default #cccccc
		         * @since   2.3.0
		         * @product highcharts highmaps
		         */
		        borderColor: '#cccccc'

		    },

		    /**
		     * Options for the dial or arrow pointer of the gauge.
		     *
		     * In styled mode, the dial is styled with the
		     * `.highcharts-gauge-series .highcharts-dial` rule.
		     *
		     * @sample {highcharts} highcharts/css/gauge/
		     *         Styled mode
		     *
		     * @since   2.3.0
		     * @product highcharts
		     */
		    dial: {},

		    /**
		     * The length of the dial's base part, relative to the total radius
		     * or length of the dial.
		     *
		     * @sample {highcharts} highcharts/plotoptions/gauge-dial/
		     *         Dial options demonstrated
		     *
		     * @type      {string}
		     * @default   70%
		     * @since     2.3.0
		     * @product   highcharts
		     * @apioption plotOptions.gauge.dial.baseLength
		     */

		    /**
		     * The pixel width of the base of the gauge dial. The base is the part
		     * closest to the pivot, defined by baseLength.
		     *
		     * @sample {highcharts} highcharts/plotoptions/gauge-dial/
		     *         Dial options demonstrated
		     *
		     * @type      {number}
		     * @default   3
		     * @since     2.3.0
		     * @product   highcharts
		     * @apioption plotOptions.gauge.dial.baseWidth
		     */

		    /**
		     * The radius or length of the dial, in percentages relative to the
		     * radius of the gauge itself.
		     *
		     * @sample {highcharts} highcharts/plotoptions/gauge-dial/
		     *         Dial options demonstrated
		     *
		     * @type      {string}
		     * @default   80%
		     * @since     2.3.0
		     * @product   highcharts
		     * @apioption plotOptions.gauge.dial.radius
		     */

		    /**
		     * The length of the dial's rear end, the part that extends out on the
		     * other side of the pivot. Relative to the dial's length.
		     *
		     * @sample {highcharts} highcharts/plotoptions/gauge-dial/
		     *         Dial options demonstrated
		     *
		     * @type      {string}
		     * @default   10%
		     * @since     2.3.0
		     * @product   highcharts
		     * @apioption plotOptions.gauge.dial.rearLength
		     */

		    /**
		     * The width of the top of the dial, closest to the perimeter. The pivot
		     * narrows in from the base to the top.
		     *
		     * @sample {highcharts} highcharts/plotoptions/gauge-dial/
		     *         Dial options demonstrated
		     *
		     * @type      {number}
		     * @default   1
		     * @since     2.3.0
		     * @product   highcharts
		     * @apioption plotOptions.gauge.dial.topWidth
		     */

		    /**
		     * The background or fill color of the gauge's dial.
		     *
		     * @sample {highcharts} highcharts/plotoptions/gauge-dial/
		     *         Dial options demonstrated
		     *
		     * @type      {Highcharts.ColorString|Highcharts.GradientColorObject}
		     * @default   #000000
		     * @since     2.3.0
		     * @product   highcharts
		     * @apioption plotOptions.gauge.dial.backgroundColor
		     */

		    /**
		     * The border color or stroke of the gauge's dial. By default, the
		     * borderWidth is 0, so this must be set in addition to a custom border
		     * color.
		     *
		     * @sample {highcharts} highcharts/plotoptions/gauge-dial/
		     *         Dial options demonstrated
		     *
		     * @type      {Highcharts.ColorString}
		     * @default   #cccccc
		     * @since     2.3.0
		     * @product   highcharts
		     * @apioption plotOptions.gauge.dial.borderColor
		     */

		    /**
		     * The width of the gauge dial border in pixels.
		     *
		     * @sample {highcharts} highcharts/plotoptions/gauge-dial/
		     *         Dial options demonstrated
		     *
		     * @type      {number}
		     * @default   0
		     * @since     2.3.0
		     * @product   highcharts
		     * @apioption plotOptions.gauge.dial.borderWidth
		     */

		    /**
		     * Allow the dial to overshoot the end of the perimeter axis by this
		     * many degrees. Say if the gauge axis goes from 0 to 60, a value of
		     * 100, or 1000, will show 5 degrees beyond the end of the axis when this
		     * option is set to 5.
		     *
		     * @see [wrap](#plotOptions.gauge.wrap)
		     *
		     * @sample {highcharts} highcharts/plotoptions/gauge-overshoot/
		     *         Allow 5 degrees overshoot
		     *
		     * @type      {number}
		     * @default   0
		     * @since     3.0.10
		     * @product   highcharts
		     * @apioption plotOptions.gauge.overshoot
		     */

		    /**
		     * Options for the pivot or the center point of the gauge.
		     *
		     * In styled mode, the pivot is styled with the
		     * `.highcharts-gauge-series .highcharts-pivot` rule.
		     *
		     * @sample {highcharts} highcharts/css/gauge/
		     *         Styled mode
		     *
		     * @since   2.3.0
		     * @product highcharts
		     */
		    pivot: {},

		    /**
		     * The pixel radius of the pivot.
		     *
		     * @sample {highcharts} highcharts/plotoptions/gauge-pivot/
		     *         Pivot options demonstrated
		     *
		     * @type      {number}
		     * @default   5
		     * @since     2.3.0
		     * @product   highcharts
		     * @apioption plotOptions.gauge.pivot.radius
		     */

		    /**
		     * The border or stroke width of the pivot.
		     *
		     * @sample {highcharts} highcharts/plotoptions/gauge-pivot/
		     *         Pivot options demonstrated
		     *
		     * @type      {number}
		     * @default   0
		     * @since     2.3.0
		     * @product   highcharts
		     * @apioption plotOptions.gauge.pivot.borderWidth
		     */

		    /**
		     * The border or stroke color of the pivot. In able to change this,
		     * the borderWidth must also be set to something other than the default
		     * 0.
		     *
		     * @sample {highcharts} highcharts/plotoptions/gauge-pivot/
		     *         Pivot options demonstrated
		     *
		     * @type      {Highcharts.ColorString}
		     * @default   #cccccc
		     * @since     2.3.0
		     * @product   highcharts
		     * @apioption plotOptions.gauge.pivot.borderColor
		     */

		    /**
		     * The background color or fill of the pivot.
		     *
		     * @sample {highcharts} highcharts/plotoptions/gauge-pivot/
		     *         Pivot options demonstrated
		     *
		     * @type      {Highcharts.ColorString|Highcharts.GradientColorObject}
		     * @default   #000000
		     * @since     2.3.0
		     * @product   highcharts
		     * @apioption plotOptions.gauge.pivot.backgroundColor
		     */

		    tooltip: {
		        headerFormat: ''
		    },

		    /**
		     * Whether to display this particular series or series type in the
		     * legend. Defaults to false for gauge series.
		     *
		     * @since   2.3.0
		     * @product highcharts
		     */
		    showInLegend: false

		// Prototype members
		}, {
		    // chart.angular will be set to true when a gauge series is present,
		    // and this will be used on the axes
		    angular: true,
		    directTouch: true, // #5063
		    drawGraph: noop,
		    fixedBox: true,
		    forceDL: true,
		    noSharedTooltip: true,
		    trackerGroups: ['group', 'dataLabelsGroup'],

		    // Calculate paths etc
		    translate: function () {

		        var series = this,
		            yAxis = series.yAxis,
		            options = series.options,
		            center = yAxis.center;

		        series.generatePoints();

		        series.points.forEach(function (point) {

		            var dialOptions = merge(options.dial, point.dial),
		                radius = (pInt(pick(dialOptions.radius, 80)) * center[2]) /
		                    200,
		                baseLength = (pInt(pick(dialOptions.baseLength, 70)) * radius) /
		                    100,
		                rearLength = (pInt(pick(dialOptions.rearLength, 10)) * radius) /
		                    100,
		                baseWidth = dialOptions.baseWidth || 3,
		                topWidth = dialOptions.topWidth || 1,
		                overshoot = options.overshoot,
		                rotation = yAxis.startAngleRad +
		                    yAxis.translate(point.y, null, null, null, true);

		            // Handle the wrap and overshoot options
		            if (isNumber(overshoot)) {
		                overshoot = overshoot / 180 * Math.PI;
		                rotation = Math.max(
		                    yAxis.startAngleRad - overshoot,
		                    Math.min(yAxis.endAngleRad + overshoot, rotation)
		                );

		            } else if (options.wrap === false) {
		                rotation = Math.max(
		                    yAxis.startAngleRad,
		                    Math.min(yAxis.endAngleRad, rotation)
		                );
		            }

		            rotation = rotation * 180 / Math.PI;

		            point.shapeType = 'path';
		            point.shapeArgs = {
		                d: dialOptions.path || [
		                    'M',
		                    -rearLength, -baseWidth / 2,
		                    'L',
		                    baseLength, -baseWidth / 2,
		                    radius, -topWidth / 2,
		                    radius, topWidth / 2,
		                    baseLength, baseWidth / 2,
		                    -rearLength, baseWidth / 2,
		                    'z'
		                ],
		                translateX: center[0],
		                translateY: center[1],
		                rotation: rotation
		            };

		            // Positions for data label
		            point.plotX = center[0];
		            point.plotY = center[1];
		        });
		    },

		    // Draw the points where each point is one needle
		    drawPoints: function () {

		        var series = this,
		            chart = series.chart,
		            center = series.yAxis.center,
		            pivot = series.pivot,
		            options = series.options,
		            pivotOptions = options.pivot,
		            renderer = chart.renderer;

		        series.points.forEach(function (point) {

		            var graphic = point.graphic,
		                shapeArgs = point.shapeArgs,
		                d = shapeArgs.d,
		                dialOptions = merge(options.dial, point.dial); // #1233

		            if (graphic) {
		                graphic.animate(shapeArgs);
		                shapeArgs.d = d; // animate alters it
		            } else {
		                point.graphic = renderer[point.shapeType](shapeArgs)
		                    .attr({
		                        // required by VML when animation is false
		                        rotation: shapeArgs.rotation,
		                        zIndex: 1
		                    })
		                    .addClass('highcharts-dial')
		                    .add(series.group);

		                // Presentational attributes
		                if (!chart.styledMode) {
		                    point.graphic.attr({
		                        stroke: dialOptions.borderColor || 'none',
		                        'stroke-width': dialOptions.borderWidth || 0,
		                        fill: dialOptions.backgroundColor ||
		                            '#000000'
		                    });
		                }
		            }
		        });

		        // Add or move the pivot
		        if (pivot) {
		            pivot.animate({ // #1235
		                translateX: center[0],
		                translateY: center[1]
		            });
		        } else {
		            series.pivot = renderer.circle(0, 0, pick(pivotOptions.radius, 5))
		                .attr({
		                    zIndex: 2
		                })
		                .addClass('highcharts-pivot')
		                .translate(center[0], center[1])
		                .add(series.group);

		            // Presentational attributes
		            if (!chart.styledMode) {
		                series.pivot.attr({
		                    'stroke-width': pivotOptions.borderWidth || 0,
		                    stroke: pivotOptions.borderColor ||
		                        '#cccccc',
		                    fill: pivotOptions.backgroundColor ||
		                        '#000000'
		                });
		            }
		        }
		    },

		    // Animate the arrow up from startAngle
		    animate: function (init) {
		        var series = this;

		        if (!init) {
		            series.points.forEach(function (point) {
		                var graphic = point.graphic;

		                if (graphic) {
		                    // start value
		                    graphic.attr({
		                        rotation: series.yAxis.startAngleRad * 180 / Math.PI
		                    });

		                    // animate
		                    graphic.animate({
		                        rotation: point.shapeArgs.rotation
		                    }, series.options.animation);
		                }
		            });

		            // delete this function to allow it only once
		            series.animate = null;
		        }
		    },

		    render: function () {
		        this.group = this.plotGroup(
		            'group',
		            'series',
		            this.visible ? 'visible' : 'hidden',
		            this.options.zIndex,
		            this.chart.seriesGroup
		        );
		        Series.prototype.render.call(this);
		        this.group.clip(this.chart.clipRect);
		    },

		    // Extend the basic setData method by running processData and generatePoints
		    // immediately, in order to access the points from the legend.
		    setData: function (data, redraw) {
		        Series.prototype.setData.call(this, data, false);
		        this.processData();
		        this.generatePoints();
		        if (pick(redraw, true)) {
		            this.chart.redraw();
		        }
		    },

		    // If the tracking module is loaded, add the point tracker
		    drawTracker: TrackerMixin && TrackerMixin.drawTrackerPoint

		// Point members
		}, {
		    // Don't do any hover colors or anything
		    setState: function (state) {
		        this.state = state;
		    }
		});

		/**
		 * A `gauge` series. If the [type](#series.gauge.type) option is not
		 * specified, it is inherited from [chart.type](#chart.type).
		 *
		 * @extends   series,plotOptions.gauge
		 * @excluding animationLimit, boostThreshold, connectEnds, connectNulls,
		 *            cropThreshold, dashStyle, dataParser, dataURL, findNearestPointBy,
		 *            getExtremesFromAll, marker, negativeColor, pointPlacement, shadow,
		 *            softThreshold, stack, stacking, states, step, threshold,
		 *            turboThreshold, zoneAxis, zones
		 * @product   highcharts
		 * @apioption series.gauge
		 */

		/**
		 * An array of data points for the series. For the `gauge` series type,
		 * points can be given in the following ways:
		 *
		 * 1. An array of numerical values. In this case, the numerical values will be
		 *    interpreted as `y` options. Example:
		 *    ```js
		 *    data: [0, 5, 3, 5]
		 *    ```
		 *
		 * 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.gauge.turboThreshold), this option is not
		 *    available.
		 *    ```js
		 *    data: [{
		 *        y: 6,
		 *        name: "Point2",
		 *        color: "#00FF00"
		 *    }, {
		 *        y: 8,
		 *        name: "Point1",
		 *       color: "#FF00FF"
		 *    }]
		 *    ```
		 *
		 * The typical gauge only contains a single data value.
		 *
		 * @sample {highcharts} highcharts/chart/reflow-true/
		 *         Numerical values
		 * @sample {highcharts} highcharts/series/data-array-of-objects/
		 *         Config objects
		 *
		 * @type      {Array<number|*>}
		 * @extends   series.line.data
		 * @excluding drilldown, marker, x
		 * @product   highcharts
		 * @apioption series.gauge.data
		 */

	}(Highcharts));
	(function (H) {
		/* *
		 * Solid angular gauge module
		 *
		 * (c) 2010-2018 Torstein Honsi
		 *
		 * License: www.highcharts.com/license
		 */

		/**
		 * Additional options, depending on the actual symbol drawn.
		 *
		 * @interface Highcharts.SymbolOptionsObject
		 *//**
		 * Whether to draw rounded edges.
		 * @name Highcharts.SymbolOptionsObject#rounded
		 * @type {boolean|undefined}
		 */



		var pInt = H.pInt,
		    pick = H.pick,
		    isNumber = H.isNumber,
		    wrap = H.wrap,
		    Renderer = H.Renderer,
		    colorAxisMethods;

		/**
		 * Symbol definition of an arc with round edges.
		 *
		 * @private
		 * @function Highcharts.Renderer#symbols.arc
		 *
		 * @param {number} x
		 *        The X coordinate for the top left position.
		 *
		 * @param {number} y
		 *        The Y coordinate for the top left position.
		 *
		 * @param {number} w
		 *        The pixel width.
		 *
		 * @param {number} h
		 *        The pixel height.
		 *
		 * @param {Highcharts.SymbolOptionsObject} [options]
		 *        Additional options, depending on the actual symbol drawn.
		 *
		 * @return {Highcharts.SVGPathArray}
		 *         Path of the created arc.
		 */
		wrap(
		    Renderer.prototype.symbols,
		    'arc',
		    function (proceed, x, y, w, h, options) {
		        var arc = proceed,
		            path = arc(x, y, w, h, options);
		        if (options.rounded) {
		            var r = options.r || w,
		                smallR = (r - options.innerR) / 2,
		                x1 = path[1],
		                y1 = path[2],
		                x2 = path[12],
		                y2 = path[13],
		                roundStart = ['A', smallR, smallR, 0, 1, 1, x1, y1],
		                roundEnd = ['A', smallR, smallR, 0, 1, 1, x2, y2];
		            // Insert rounded edge on end, and remove line.
		            path.splice.apply(path, [path.length - 1, 0].concat(roundStart));
		            // Insert rounded edge on end, and remove line.
		            path.splice.apply(path, [11, 3].concat(roundEnd));
		        }

		        return path;
		    }
		);

		// These methods are defined in the ColorAxis object, and copied here.
		// If we implement an AMD system we should make ColorAxis a dependency.
		colorAxisMethods = {


		    initDataClasses: function (userOptions) {
		        var chart = this.chart,
		            dataClasses,
		            colorCounter = 0,
		            options = this.options;
		        this.dataClasses = dataClasses = [];

		        userOptions.dataClasses.forEach(function (dataClass, i) {
		            var colors;

		            dataClass = H.merge(dataClass);
		            dataClasses.push(dataClass);
		            if (!dataClass.color) {
		                if (options.dataClassColor === 'category') {
		                    colors = chart.options.colors;
		                    dataClass.color = colors[colorCounter++];
		                    // loop back to zero
		                    if (colorCounter === colors.length) {
		                        colorCounter = 0;
		                    }
		                } else {
		                    dataClass.color = H.color(options.minColor).tweenTo(
		                        H.color(options.maxColor),
		                        i / (userOptions.dataClasses.length - 1)
		                    );
		                }
		            }
		        });
		    },

		    initStops: function (userOptions) {
		        this.stops = userOptions.stops || [
		            [0, this.options.minColor],
		            [1, this.options.maxColor]
		        ];
		        this.stops.forEach(function (stop) {
		            stop.color = H.color(stop[1]);
		        });
		    },
		    // Translate from a value to a color
		    toColor: function (value, point) {
		        var pos,
		            stops = this.stops,
		            from,
		            to,
		            color,
		            dataClasses = this.dataClasses,
		            dataClass,
		            i;

		        if (dataClasses) {
		            i = dataClasses.length;
		            while (i--) {
		                dataClass = dataClasses[i];
		                from = dataClass.from;
		                to = dataClass.to;
		                if (
		                    (from === undefined || value >= from) &&
		                    (to === undefined || value <= to)
		                ) {
		                    color = dataClass.color;
		                    if (point) {
		                        point.dataClass = i;
		                    }
		                    break;
		                }
		            }

		        } else {

		            if (this.isLog) {
		                value = this.val2lin(value);
		            }
		            pos = 1 - ((this.max - value) / (this.max - this.min));
		            i = stops.length;
		            while (i--) {
		                if (pos > stops[i][0]) {
		                    break;
		                }
		            }
		            from = stops[i] || stops[i + 1];
		            to = stops[i + 1] || from;

		            // The position within the gradient
		            pos = 1 - (to[0] - pos) / ((to[0] - from[0]) || 1);

		            color = from.color.tweenTo(
		                to.color,
		                pos
		            );
		        }
		        return color;
		    }
		};

		/**
		 * A solid gauge is a circular gauge where the value is indicated by a filled
		 * arc, and the color of the arc may variate with the value.
		 *
		 * @sample highcharts/demo/gauge-solid/
		 *         Solid gauges
		 *
		 * @extends      plotOptions.gauge
		 * @excluding    dial, pivot, wrap
		 * @product      highcharts
		 * @optionparent plotOptions.solidgauge
		 */
		var solidGaugeOptions = {
		    /**
		     * Whether the strokes of the solid gauge should be `round` or `square`.
		     *
		     * @sample {highcharts} highcharts/demo/gauge-activity/
		     *         Rounded gauge
		     *
		     * @type       {string}
		     * @default    round
		     * @since      4.2.2
		     * @product    highcharts
		     * @validvalue ["square", "round"]
		     * @apioption  plotOptions.solidgauge.linecap
		     */

		    /**
		     * Allow the gauge to overshoot the end of the perimeter axis by this
		     * many degrees. Say if the gauge axis goes from 0 to 60, a value of
		     * 100, or 1000, will show 5 degrees beyond the end of the axis when this
		     * option is set to 5.
		     *
		     * @type      {number}
		     * @default   0
		     * @since     3.0.10
		     * @product   highcharts
		     * @apioption plotOptions.solidgauge.overshoot
		     */

		    /**
		     * Wether to draw rounded edges on the gauge.
		     *
		     * @sample {highcharts} highcharts/demo/gauge-activity/
		     *         Activity Gauge
		     *
		     * @type      {boolean}
		     * @default   false
		     * @since     5.0.8
		     * @product   highcharts
		     * @apioption plotOptions.solidgauge.rounded
		     */

		    /**
		     * The threshold or base level for the gauge.
		     *
		     * @sample {highcharts} highcharts/plotoptions/solidgauge-threshold/
		     *         Zero threshold with negative and positive values
		     *
		     * @type      {number}
		     * @since     5.0.3
		     * @product   highcharts
		     * @apioption plotOptions.solidgauge.threshold
		     */

		    /**
		     * Whether to give each point an individual color.
		     */
		    colorByPoint: true

		};


		// The solidgauge series type
		H.seriesType('solidgauge', 'gauge', solidGaugeOptions, {

		    // Extend the translate function to extend the Y axis with the necessary
		    // decoration (#5895).
		    translate: function () {
		        var axis = this.yAxis;
		        H.extend(axis, colorAxisMethods);

		        // Prepare data classes
		        if (!axis.dataClasses && axis.options.dataClasses) {
		            axis.initDataClasses(axis.options);
		        }
		        axis.initStops(axis.options);

		        // Generate points and inherit data label position
		        H.seriesTypes.gauge.prototype.translate.call(this);
		    },

		    // Draw the points where each point is one needle.
		    drawPoints: function () {
		        var series = this,
		            yAxis = series.yAxis,
		            center = yAxis.center,
		            options = series.options,
		            renderer = series.chart.renderer,
		            overshoot = options.overshoot,
		            overshootVal = isNumber(overshoot) ? overshoot / 180 * Math.PI : 0,
		            thresholdAngleRad;

		        // Handle the threshold option
		        if (isNumber(options.threshold)) {
		            thresholdAngleRad = yAxis.startAngleRad + yAxis.translate(
		                options.threshold,
		                null,
		                null,
		                null,
		                true
		            );
		        }
		        this.thresholdAngleRad = pick(thresholdAngleRad, yAxis.startAngleRad);


		        series.points.forEach(function (point) {
		            var graphic = point.graphic,
		                rotation = yAxis.startAngleRad +
		                    yAxis.translate(point.y, null, null, null, true),
		                radius = (
		                    pInt(
		                        pick(point.options.radius, options.radius, 100)
		                    ) * center[2]
		                ) / 200,
		                innerRadius = (
		                    pInt(
		                        pick(point.options.innerRadius, options.innerRadius, 60)
		                    ) * center[2]
		                ) / 200,
		                shapeArgs,
		                d,
		                toColor = yAxis.toColor(point.y, point),
		                axisMinAngle = Math.min(yAxis.startAngleRad, yAxis.endAngleRad),
		                axisMaxAngle = Math.max(yAxis.startAngleRad, yAxis.endAngleRad),
		                minAngle,
		                maxAngle;

		            if (toColor === 'none') { // #3708
		                toColor = point.color || series.color || 'none';
		            }
		            if (toColor !== 'none') {
		                point.color = toColor;
		            }

		            // Handle overshoot and clipping to axis max/min
		            rotation = Math.max(
		                axisMinAngle - overshootVal,
		                Math.min(axisMaxAngle + overshootVal, rotation)
		            );

		            // Handle the wrap option
		            if (options.wrap === false) {
		                rotation = Math.max(
		                    axisMinAngle,
		                    Math.min(axisMaxAngle, rotation)
		                );
		            }

		            minAngle = Math.min(rotation, series.thresholdAngleRad);
		            maxAngle = Math.max(rotation, series.thresholdAngleRad);

		            if (maxAngle - minAngle > 2 * Math.PI) {
		                maxAngle = minAngle + 2 * Math.PI;
		            }

		            point.shapeArgs = shapeArgs = {
		                x: center[0],
		                y: center[1],
		                r: radius,
		                innerR: innerRadius,
		                start: minAngle,
		                end: maxAngle,
		                rounded: options.rounded
		            };
		            point.startR = radius; // For PieSeries.animate

		            if (graphic) {
		                d = shapeArgs.d;
		                graphic.animate(H.extend({ fill: toColor }, shapeArgs));
		                if (d) {
		                    shapeArgs.d = d; // animate alters it
		                }
		            } else {
		                point.graphic = graphic = renderer.arc(shapeArgs)
		                    .attr({
		                        fill: toColor,
		                        'sweep-flag': 0
		                    })
		                    .add(series.group);

		                if (!series.chart.styledMode) {
		                    if (options.linecap !== 'square') {
		                        graphic.attr({
		                            'stroke-linecap': 'round',
		                            'stroke-linejoin': 'round'
		                        });
		                    }
		                    graphic.attr({
		                        stroke: options.borderColor || 'none',
		                        'stroke-width': options.borderWidth || 0
		                    });
		                }
		            }

		            if (graphic) {
		                graphic.addClass(point.getClassName(), true);
		            }
		        });
		    },

		    // Extend the pie slice animation by animating from start angle and up.
		    animate: function (init) {

		        if (!init) {
		            this.startAngleRad = this.thresholdAngleRad;
		            H.seriesTypes.pie.prototype.animate.call(this, init);
		        }
		    }
		});

		/**
		 * A `solidgauge` series. If the [type](#series.solidgauge.type) option is not
		 * specified, it is inherited from [chart.type](#chart.type).
		 *
		 *
		 * @extends   series,plotOptions.solidgauge
		 * @excluding animationLimit, boostThreshold, connectEnds, connectNulls,
		 *            cropThreshold, dashStyle, dataParser, dataURL, dial,
		 *            findNearestPointBy, getExtremesFromAll, marker, negativeColor,
		 *            pointPlacement, pivot, shadow, softThreshold, stack, stacking,
		 *            states, step, threshold, turboThreshold, wrap, zoneAxis, zones
		 * @product   highcharts
		 * @apioption series.solidgauge
		 */

		/**
		 * An array of data points for the series. For the `solidgauge` series
		 * type, points can be given in the following ways:
		 *
		 * 1. An array of numerical values. In this case, the numerical values will be
		 *    interpreted as `y` options. Example:
		 *    ```js
		 *    data: [0, 5, 3, 5]
		 *    ```
		 *
		 * 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.solidgauge.turboThreshold), this option is not
		 *    available.
		 *    ```js
		 *    data: [{
		 *        y: 5,
		 *        name: "Point2",
		 *        color: "#00FF00"
		 *    }, {
		 *        y: 7,
		 *        name: "Point1",
		 *        color: "#FF00FF"
		 *    }]
		 *    ```
		 *
		 * The typical gauge only contains a single data value.
		 *
		 * @sample {highcharts} highcharts/chart/reflow-true/
		 *         Numerical values
		 * @sample {highcharts} highcharts/series/data-array-of-objects/
		 *         Config objects
		 *
		 * @type      {Array<number|*>}
		 * @extends   series.gauge.data
		 * @product   highcharts
		 * @apioption series.solidgauge.data
		 */

		/**
		 * The inner radius of an individual point in a solid gauge. Can be given as a
		 * number (pixels) or percentage string.
		 *
		 * @sample {highcharts} highcharts/plotoptions/solidgauge-radius/
		 *         Individual radius and innerRadius
		 *
		 * @type      {number|string}
		 * @since     4.1.6
		 * @product   highcharts
		 * @apioption series.solidgauge.data.innerRadius
		 */

		/**
		 * The outer radius of an individual point in a solid gauge. Can be
		 * given as a number (pixels) or percentage string.
		 *
		 * @sample {highcharts} highcharts/plotoptions/solidgauge-radius/
		 *         Individual radius and innerRadius
		 *
		 * @type      {number|string}
		 * @since     4.1.6
		 * @product   highcharts
		 * @apioption series.solidgauge.data.radius
		 */

	}(Highcharts));
	(function (H) {
		/* *
		 * (c) 2010-2018 Torstein Honsi
		 *
		 * License: www.highcharts.com/license
		 */



		var color = H.color,
		    LegendSymbolMixin = H.LegendSymbolMixin,
		    pick = H.pick,
		    Series = H.Series,
		    seriesType = H.seriesType;

		/**
		 * Area series type.
		 *
		 * @private
		 * @class
		 * @name Highcharts.seriesTypes.area
		 *
		 * @augments Highcharts.Series
		 */
		seriesType('area', 'line'

		/**
		 * The area series type.
		 *
		 * @sample {highcharts} highcharts/demo/area-basic/
		 *         Area chart
		 * @sample {highstock} stock/demo/area/
		 *         Area chart
		 *
		 * @extends      plotOptions.line
		 * @excluding    useOhlcData
		 * @product      highcharts highstock
		 * @optionparent plotOptions.area
		 */
		, {

		    /**
		     * Fill color or gradient for the area. When `null`, the series' `color`
		     * is used with the series' `fillOpacity`.
		     *
		     * In styled mode, the fill color can be set with the `.highcharts-area`
		     * class name.
		     *
		     * @sample {highcharts} highcharts/plotoptions/area-fillcolor-default/
		     *         Null by default
		     * @sample {highcharts} highcharts/plotoptions/area-fillcolor-gradient/
		     *         Gradient
		     *
		     * @type      {Highcharts.ColorString}
		     * @product   highcharts highstock
		     * @apioption plotOptions.area.fillColor
		     */

		    /**
		     * Fill opacity for the area. When you set an explicit `fillColor`,
		     * the `fillOpacity` is not applied. Instead, you should define the
		     * opacity in the `fillColor` with an rgba color definition. The
		     * `fillOpacity` setting, also the default setting, overrides the alpha
		     * component of the `color` setting.
		     *
		     * In styled mode, the fill opacity can be set with the `.highcharts-area`
		     * class name.
		     *
		     * @sample {highcharts} highcharts/plotoptions/area-fillopacity/
		     *         Automatic fill color and fill opacity of 0.1
		     *
		     * @type      {number}
		     * @default   {highcharts} 0.75
		     * @default   {highstock} 0.75
		     * @product   highcharts highstock
		     * @apioption plotOptions.area.fillOpacity
		     */

		    /**
		     * A separate color for the graph line. By default the line takes the
		     * `color` of the series, but the lineColor setting allows setting a
		     * separate color for the line without altering the `fillColor`.
		     *
		     * In styled mode, the line stroke can be set with the `.highcharts-graph`
		     * class name.
		     *
		     * @sample {highcharts} highcharts/plotoptions/area-linecolor/
		     *         Dark gray line
		     *
		     * @type      {Highcharts.ColorString}
		     * @product   highcharts highstock
		     * @apioption plotOptions.area.lineColor
		     */

		    /**
		     * A separate color for the negative part of the area.
		     *
		     * In styled mode, a negative color is set with the `.highcharts-negative`
		     * class name.
		     *
		     * @see [negativeColor](#plotOptions.area.negativeColor)
		     *
		     * @sample {highcharts} highcharts/css/series-negative-color/
		     *         Negative color in styled mode
		     *
		     * @type      {Highcharts.ColorString}
		     * @since     3.0
		     * @product   highcharts
		     * @apioption plotOptions.area.negativeFillColor
		     */

		    /**
		     * Whether the whole area or just the line should respond to mouseover
		     * tooltips and other mouse or touch events.
		     *
		     * @sample {highcharts|highstock} highcharts/plotoptions/area-trackbyarea/
		     *         Display the tooltip when the area is hovered
		     *
		     * @type      {boolean}
		     * @default   false
		     * @since     1.1.6
		     * @product   highcharts highstock
		     * @apioption plotOptions.area.trackByArea
		     */

		    /**
		     * When this is true, the series will not cause the Y axis to cross
		     * the zero plane (or [threshold](#plotOptions.series.threshold) option)
		     * unless the data actually crosses the plane.
		     *
		     * For example, if `softThreshold` is `false`, a series of 0, 1, 2,
		     * 3 will make the Y axis show negative values according to the `minPadding`
		     * option. If `softThreshold` is `true`, the Y axis starts at 0.
		     *
		     * @since   4.1.9
		     * @product highcharts highstock
		     */
		    softThreshold: false,

		    /**
		     * The Y axis value to serve as the base for the area, for distinguishing
		     * between values above and below a threshold. The area between the graph
		     * and the threshold is filled.
		     *
		     * * If a number is given, the Y axis will scale to the threshold.
		     * * If `null`, the scaling behaves like a line series with fill between the
		     *   graph and the Y axis minimum.
		     * * If `Infinity` or `-Infinity`, the area between the graph and the
		     *   corresponing Y axis extreme is filled (since v6.1.0).
		     *
		     * @sample {highcharts} highcharts/plotoptions/area-threshold/
		     *         A threshold of 100
		     * @sample {highcharts} highcharts/plotoptions/area-threshold-infinity/
		     *         A threshold of Infinity
		     *
		     * @since   2.0
		     * @product highcharts highstock
		     */
		    threshold: 0


		}, /** @lends seriesTypes.area.prototype */ {

		    singleStacks: false,

		    // Return an array of stacked points, where null and missing points are
		    // replaced by dummy points in order for gaps to be drawn correctly in
		    // stacks.
		    getStackPoints: function (points) {
		        var series = this,
		            segment = [],
		            keys = [],
		            xAxis = this.xAxis,
		            yAxis = this.yAxis,
		            stack = yAxis.stacks[this.stackKey],
		            pointMap = {},
		            seriesIndex = series.index,
		            yAxisSeries = yAxis.series,
		            seriesLength = yAxisSeries.length,
		            visibleSeries,
		            upOrDown = pick(yAxis.options.reversedStacks, true) ? 1 : -1,
		            i;


		        points = points || this.points;

		        if (this.options.stacking) {

		            for (i = 0; i < points.length; i++) {
		                // Reset after point update (#7326)
		                points[i].leftNull = points[i].rightNull = null;

		                // Create a map where we can quickly look up the points by their
		                // X values.
		                pointMap[points[i].x] = points[i];
		            }

		            // Sort the keys (#1651)
		            H.objectEach(stack, function (stackX, x) {
		                // nulled after switching between
		                // grouping and not (#1651, #2336)
		                if (stackX.total !== null) {
		                    keys.push(x);
		                }
		            });
		            keys.sort(function (a, b) {
		                return a - b;
		            });

		            visibleSeries = yAxisSeries.map(function (s) {
		                return s.visible;
		            });

		            keys.forEach(function (x, idx) {
		                var y = 0,
		                    stackPoint,
		                    stackedValues;

		                if (pointMap[x] && !pointMap[x].isNull) {
		                    segment.push(pointMap[x]);

		                    // Find left and right cliff. -1 goes left, 1 goes right.
		                    [-1, 1].forEach(function (direction) {
		                        var nullName = direction === 1 ?
		                                'rightNull' :
		                                'leftNull',
		                            cliffName = direction === 1 ?
		                                'rightCliff' :
		                                'leftCliff',
		                            cliff = 0,
		                            otherStack = stack[keys[idx + direction]];

		                        // If there is a stack next to this one,
		                        // to the left or to the right...
		                        if (otherStack) {
		                            i = seriesIndex;
		                            // Can go either up or down,
		                            // depending on reversedStacks
		                            while (i >= 0 && i < seriesLength) {
		                                stackPoint = otherStack.points[i];
		                                if (!stackPoint) {
		                                    // If the next point in this series
		                                    // is missing, mark the point
		                                    // with point.leftNull or
		                                    // point.rightNull = true.
		                                    if (i === seriesIndex) {
		                                        pointMap[x][nullName] = true;

		                                    // If there are missing points in
		                                    // the next stack in any of the
		                                    // series below this one, we need
		                                    // to substract the missing values
		                                    // and add a hiatus to the left or right.
		                                    } else if (visibleSeries[i]) {
		                                        stackedValues = stack[x].points[i];
		                                        if (stackedValues) {
		                                            cliff -= stackedValues[1] -
		                                                stackedValues[0];
		                                        }
		                                    }
		                                }
		                                // When reversedStacks is true, loop up,
		                                // else loop down
		                                i += upOrDown;
		                            }
		                        }
		                        pointMap[x][cliffName] = cliff;
		                    });


		                // There is no point for this X value in this series, so we
		                // insert a dummy point in order for the areas to be drawn
		                // correctly.
		                } else {

		                    // Loop down the stack to find the series below this
		                    // one that has a value (#1991)
		                    i = seriesIndex;
		                    while (i >= 0 && i < seriesLength) {
		                        stackPoint = stack[x].points[i];
		                        if (stackPoint) {
		                            y = stackPoint[1];
		                            break;
		                        }
		                        // When reversedStacks is true, loop up, else loop down
		                        i += upOrDown;
		                    }
		                    y = yAxis.translate(y, 0, 1, 0, 1); // #6272
		                    segment.push({
		                        isNull: true,
		                        plotX: xAxis.translate(x, 0, 0, 0, 1), // #6272
		                        x: x,
		                        plotY: y,
		                        yBottom: y
		                    });
		                }
		            });

		        }

		        return segment;
		    },

		    getGraphPath: function (points) {
		        var getGraphPath = Series.prototype.getGraphPath,
		            graphPath,
		            options = this.options,
		            stacking = options.stacking,
		            yAxis = this.yAxis,
		            topPath,
		            bottomPath,
		            bottomPoints = [],
		            graphPoints = [],
		            seriesIndex = this.index,
		            i,
		            areaPath,
		            plotX,
		            stacks = yAxis.stacks[this.stackKey],
		            threshold = options.threshold,
		            translatedThreshold = yAxis.getThreshold(options.threshold),
		            isNull,
		            yBottom,
		            connectNulls = options.connectNulls || stacking === 'percent',

		            // To display null points in underlying stacked series, this series
		            // graph must be broken, and the area also fall down to fill the gap
		            // left by the null point. #2069
		            addDummyPoints = function (i, otherI, side) {
		                var point = points[i],
		                    stackedValues = stacking &&
		                        stacks[point.x].points[seriesIndex],
		                    nullVal = point[side + 'Null'] || 0,
		                    cliffVal = point[side + 'Cliff'] || 0,
		                    top,
		                    bottom,
		                    isNull = true;

		                if (cliffVal || nullVal) {

		                    top = (nullVal ? stackedValues[0] : stackedValues[1]) +
		                        cliffVal;
		                    bottom = stackedValues[0] + cliffVal;
		                    isNull = !!nullVal;

		                } else if (
		                    !stacking &&
		                    points[otherI] &&
		                    points[otherI].isNull
		                ) {
		                    top = bottom = threshold;
		                }

		                // Add to the top and bottom line of the area
		                if (top !== undefined) {
		                    graphPoints.push({
		                        plotX: plotX,
		                        plotY: top === null ?
		                            translatedThreshold :
		                            yAxis.getThreshold(top),
		                        isNull: isNull,
		                        isCliff: true
		                    });
		                    bottomPoints.push({
		                        plotX: plotX,
		                        plotY: bottom === null ?
		                            translatedThreshold :
		                            yAxis.getThreshold(bottom),
		                        doCurve: false // #1041, gaps in areaspline areas
		                    });
		                }
		            };

		        // Find what points to use
		        points = points || this.points;

		        // Fill in missing points
		        if (stacking) {
		            points = this.getStackPoints(points);
		        }

		        for (i = 0; i < points.length; i++) {
		            isNull = points[i].isNull;
		            plotX = pick(points[i].rectPlotX, points[i].plotX);
		            yBottom = pick(points[i].yBottom, translatedThreshold);

		            if (!isNull || connectNulls) {

		                if (!connectNulls) {
		                    addDummyPoints(i, i - 1, 'left');
		                }
		                // Skip null point when stacking is false and connectNulls true
		                if (!(isNull && !stacking && connectNulls)) {
		                    graphPoints.push(points[i]);
		                    bottomPoints.push({
		                        x: i,
		                        plotX: plotX,
		                        plotY: yBottom
		                    });
		                }

		                if (!connectNulls) {
		                    addDummyPoints(i, i + 1, 'right');
		                }
		            }
		        }

		        topPath = getGraphPath.call(this, graphPoints, true, true);

		        bottomPoints.reversed = true;
		        bottomPath = getGraphPath.call(this, bottomPoints, true, true);
		        if (bottomPath.length) {
		            bottomPath[0] = 'L';
		        }

		        areaPath = topPath.concat(bottomPath);
		        // TODO: don't set leftCliff and rightCliff when connectNulls?
		        graphPath = getGraphPath.call(this, graphPoints, false, connectNulls);
		        areaPath.xMap = topPath.xMap;
		        this.areaPath = areaPath;

		        return graphPath;
		    },

		    // Draw the graph and the underlying area. This method calls the Series base
		    // function and adds the area. The areaPath is calculated in the
		    // getSegmentPath method called from Series.prototype.drawGraph.
		    drawGraph: function () {

		        // Define or reset areaPath
		        this.areaPath = [];

		        // Call the base method
		        Series.prototype.drawGraph.apply(this);

		        // Define local variables
		        var series = this,
		            areaPath = this.areaPath,
		            options = this.options,
		            zones = this.zones,
		            props = [[
		                'area',
		                'highcharts-area',
		                this.color,
		                options.fillColor
		            ]]; // area name, main color, fill color

		        zones.forEach(function (zone, i) {
		            props.push([
		                'zone-area-' + i,
		                'highcharts-area highcharts-zone-area-' + i + ' ' +
		                    zone.className,
		                zone.color || series.color,
		                zone.fillColor || options.fillColor
		            ]);
		        });

		        props.forEach(function (prop) {
		            var areaKey = prop[0],
		                area = series[areaKey],
		                attribs;

		            // Create or update the area
		            if (area) { // update
		                area.endX = series.preventGraphAnimation ? null : areaPath.xMap;
		                area.animate({ d: areaPath });

		            } else { // create

		                attribs = {
		                    zIndex: 0 // #1069
		                };

		                if (!series.chart.styledMode) {
		                    attribs.fill = pick(
		                        prop[3],
		                        color(prop[2])
		                            .setOpacity(pick(options.fillOpacity, 0.75))
		                            .get()
		                    );
		                }

		                area = series[areaKey] = series.chart.renderer.path(areaPath)
		                    .addClass(prop[1])
		                    .attr(attribs)
		                    .add(series.group);
		                area.isArea = true;
		            }
		            area.startX = areaPath.xMap;
		            area.shiftUnit = options.step ? 2 : 1;
		        });
		    },

		    drawLegendSymbol: LegendSymbolMixin.drawRectangle
		});

		/**
		 * A `area` series. If the [type](#series.area.type) option is not
		 * specified, it is inherited from [chart.type](#chart.type).
		 *
		 * @extends   series,plotOptions.area
		 * @excluding dataParser, dataURL, useOhlcData
		 * @product   highcharts highstock
		 * @apioption series.area
		 */

		/**
		 * An array of data points for the series. For the `area` series type,
		 * points can be given in the following ways:
		 *
		 * 1. An array of numerical values. In this case, the numerical values will be
		 *    interpreted as `y` options. The `x` values will be automatically
		 *    calculated, either starting at 0 and incremented by 1, or from
		 *    `pointStart` * and `pointInterval` given in the series options. If the
		 *    axis has categories, these will be used. Example:
		 *    ```js
		 *    data: [0, 5, 3, 5]
		 *    ```
		 *
		 * 2. An array of arrays with 2 values. In this case, the values correspond to
		 *    `x,y`. If the first value is a string, it is applied as the name of the
		 *    point, and the `x` value is inferred.
		 *    ```js
		 *    data: [
		 *        [0, 9],
		 *        [1, 7],
		 *        [2, 6]
		 *    ]
		 *    ```
		 *
		 * 3. 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.area.turboThreshold), this option is not
		 *    available.
		 *    ```js
		 *    data: [{
		 *        x: 1,
		 *        y: 9,
		 *        name: "Point2",
		 *        color: "#00FF00"
		 *    }, {
		 *        x: 1,
		 *        y: 6,
		 *        name: "Point1",
		 *        color: "#FF00FF"
		 *    }]
		 *    ```
		 *
		 * @sample {highcharts} highcharts/chart/reflow-true/
		 *         Numerical values
		 * @sample {highcharts} highcharts/series/data-array-of-arrays/
		 *         Arrays of numeric x and y
		 * @sample {highcharts} highcharts/series/data-array-of-arrays-datetime/
		 *         Arrays of datetime x and y
		 * @sample {highcharts} highcharts/series/data-array-of-name-value/
		 *         Arrays of point.name and y
		 * @sample {highcharts} highcharts/series/data-array-of-objects/
		 *         Config objects
		 *
		 * @type      {Array<number|Array<(number|string),number>|*>}
		 * @extends   series.line.data
		 * @product   highcharts highstock
		 * @apioption series.area.data
		 */

	}(Highcharts));
	(function (H) {
		/* *
		 * Streamgraph module
		 *
		 * (c) 2010-2018 Torstein Honsi
		 *
		 * License: www.highcharts.com/license
		 */



		var seriesType = H.seriesType;

		/**
		 * @private
		 * @class
		 * @name Highcharts.seriesTypes.streamgraph
		 *
		 * @augments Highcharts.Series
		 */
		seriesType('streamgraph', 'areaspline'

		/**
		 * A streamgraph is a type of stacked area graph which is displaced around a
		 * central axis, resulting in a flowing, organic shape.
		 *
		 * @sample {highcharts|highstock} highcharts/demo/streamgraph/
		 *         Streamgraph
		 *
		 * @extends      plotOptions.areaspline
		 * @since        6.0.0
		 * @product      highcharts highstock
		 * @optionparent plotOptions.streamgraph
		 */
		, {
		    fillOpacity: 1,
		    lineWidth: 0,
		    marker: {
		        enabled: false
		    },
		    stacking: 'stream'
		// Prototype functions
		}, {
		    negStacks: false,

		    // Modifier function for stream stacks. It simply moves the point up or down
		    // in order to center the full stack vertically.
		    streamStacker: function (pointExtremes, stack, i) {
		        // Y bottom value
		        pointExtremes[0] -= stack.total / 2;
		        // Y value
		        pointExtremes[1] -= stack.total / 2;

		        // Record the Y data for use when getting axis extremes
		        this.stackedYData[i] = pointExtremes;
		    }
		});


		/**
		 * A `streamgraph` series. If the [type](#series.streamgraph.type) option is not
		 * specified, it is inherited from [chart.type](#chart.type).
		 *
		 * @extends   series,plotOptions.streamgraph
		 * @excluding dataParser, dataURL
		 * @product   highcharts highstock
		 * @apioption series.streamgraph
		 */

		/**
		 * An array of data points for the series. For the `streamgraph` series type,
		 * points can be given in the following ways:
		 *
		 * 1.  An array of numerical values. In this case, the numerical values
		 * will be interpreted as `y` options. The `x` values will be automatically
		 * calculated, either starting at 0 and incremented by 1, or from `pointStart`
		 * and `pointInterval` given in the series options. If the axis has
		 * categories, these will be used. Example:
		 *
		 *  ```js
		 *  data: [0, 5, 3, 5]
		 *  ```
		 *
		 * 2.  An array of arrays with 2 values. In this case, the values correspond
		 * to `x,y`. If the first value is a string, it is applied as the name
		 * of the point, and the `x` value is inferred.
		 *
		 *  ```js
		 *     data: [
		 *         [0, 9],
		 *         [1, 7],
		 *         [2, 6]
		 *     ]
		 *  ```
		 *
		 * 3.  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.area.turboThreshold),
		 * this option is not available.
		 *
		 *  ```js
		 *     data: [{
		 *         x: 1,
		 *         y: 9,
		 *         name: "Point2",
		 *         color: "#00FF00"
		 *     }, {
		 *         x: 1,
		 *         y: 6,
		 *         name: "Point1",
		 *         color: "#FF00FF"
		 *     }]
		 *  ```
		 *
		 * @sample {highcharts} highcharts/chart/reflow-true/
		 *         Numerical values
		 * @sample {highcharts} highcharts/series/data-array-of-arrays/
		 *         Arrays of numeric x and y
		 * @sample {highcharts} highcharts/series/data-array-of-arrays-datetime/
		 *         Arrays of datetime x and y
		 * @sample {highcharts} highcharts/series/data-array-of-name-value/
		 *         Arrays of point.name and y
		 * @sample {highcharts} highcharts/series/data-array-of-objects/
		 *         Config objects
		 *
		 * @type      {Array<number|Array<(number|string),number>|*>}
		 * @extends   series.line.data
		 * @product   highcharts highstock
		 * @apioption series.streamgraph.data
		 */

	}(Highcharts));
	(function (H) {
		/* *
		 * (c) 2010-2018 Torstein Honsi
		 *
		 * License: www.highcharts.com/license
		 */

		/**
		 * @private
		 * @typedef Highcharts.RadianAngles
		 *
		 * @property {number} start
		 *
		 * @property {number} end
		 */



		var deg2rad = H.deg2rad,
		    isNumber = H.isNumber,
		    pick = H.pick,
		    relativeLength = H.relativeLength;

		/**
		 * @private
		 * @mixin Highcharts.CenteredSeriesMixin
		 */
		H.CenteredSeriesMixin = {

		    /**
		     * Get the center of the pie based on the size and center options relative
		     * to the plot area. Borrowed by the polar and gauge series types.
		     *
		     * @private
		     * @function Highcharts.CenteredSeriesMixin.getCenter
		     *
		     * @return {Array<number>}
		     */
		    getCenter: function () {

		        var options = this.options,
		            chart = this.chart,
		            slicingRoom = 2 * (options.slicedOffset || 0),
		            handleSlicingRoom,
		            plotWidth = chart.plotWidth - 2 * slicingRoom,
		            plotHeight = chart.plotHeight - 2 * slicingRoom,
		            centerOption = options.center,
		            positions = [
		                pick(centerOption[0], '50%'),
		                pick(centerOption[1], '50%'),
		                options.size || '100%',
		                options.innerSize || 0
		            ],
		            smallestSize = Math.min(plotWidth, plotHeight),
		            i,
		            value;

		        for (i = 0; i < 4; ++i) {
		            value = positions[i];
		            handleSlicingRoom = i < 2 || (i === 2 && /%$/.test(value));

		            // i == 0: centerX, relative to width
		            // i == 1: centerY, relative to height
		            // i == 2: size, relative to smallestSize
		            // i == 3: innerSize, relative to size
		            positions[i] = relativeLength(
		                value,
		                [plotWidth, plotHeight, smallestSize, positions[2]][i]
		            ) + (handleSlicingRoom ? slicingRoom : 0);

		        }
		        // innerSize cannot be larger than size (#3632)
		        if (positions[3] > positions[2]) {
		            positions[3] = positions[2];
		        }
		        return positions;
		    },

		    /**
		     * getStartAndEndRadians - Calculates start and end angles in radians.
		     * Used in series types such as pie and sunburst.
		     *
		     * @private
		     * @function Highcharts.CenteredSeriesMixin.getStartAndEndRadians
		     *
		     * @param {number} start
		     *        Start angle in degrees.
		     *
		     * @param {number} end
		     *        Start angle in degrees.
		     *
		     * @return {Highcharts.RadianAngles}
		     *         Returns an object containing start and end angles as radians.
		     */
		    getStartAndEndRadians: function getStartAndEndRadians(start, end) {
		        var startAngle = isNumber(start) ? start : 0, // must be a number
		            endAngle = (
		                (
		                    isNumber(end) && // must be a number
		                    end > startAngle && // must be larger than the start angle
		                    // difference must be less than 360 degrees
		                    (end - startAngle) < 360
		                ) ?
		                end :
		                startAngle + 360
		            ),
		            correction = -90;
		        return {
		            start: deg2rad * (startAngle + correction),
		            end: deg2rad * (endAngle + correction)
		        };
		    }
		};

	}(Highcharts));
	var draw = (function () {
		var isFn = function (x) {
		    return typeof x === 'function';
		};

		/**
		 * Handles the drawing of a point.
		 *
		 * @private
		 * @function draw
		 *
		 * @param {object} params
		 *        Parameters.
		 *
		 * @todo
		 * - add type checking.
		 */
		var draw = function draw(params) {
		    var point = this,
		        graphic = point.graphic,
		        animatableAttribs = params.animatableAttribs,
		        onComplete = params.onComplete,
		        css = params.css,
		        renderer = params.renderer;

		    if (point.shouldDraw()) {
		        if (!graphic) {
		            point.graphic = graphic =
		                renderer[params.shapeType](params.shapeArgs).add(params.group);
		        }
		        graphic
		            .css(css)
		            .attr(params.attribs)
		            .animate(
		                animatableAttribs,
		                params.isNew ? false : undefined,
		                onComplete
		            );
		    } else if (graphic) {
		        graphic.animate(animatableAttribs, undefined, function () {
		            point.graphic = graphic = graphic.destroy();
		            if (isFn(onComplete)) {
		                onComplete();
		            }
		        });
		    }
		    if (graphic) {
		        graphic.addClass(point.getClassName(), true);
		    }
		};


		return draw;
	}());
	var result = (function (H) {

		var extend = H.extend,
		    isArray = H.isArray,
		    isBoolean = function (x) {
		        return typeof x === 'boolean';
		    },
		    isFn = function (x) {
		        return typeof x === 'function';
		    },
		    isObject = H.isObject,
		    isNumber = H.isNumber,
		    merge = H.merge,
		    pick = H.pick;

		// TODO Combine buildTree and buildNode with setTreeValues
		// TODO Remove logic from Treemap and make it utilize this mixin.
		var setTreeValues = function setTreeValues(tree, options) {
		    var before = options.before,
		        idRoot = options.idRoot,
		        mapIdToNode = options.mapIdToNode,
		        nodeRoot = mapIdToNode[idRoot],
		        levelIsConstant = (
		            isBoolean(options.levelIsConstant) ?
		            options.levelIsConstant :
		            true
		        ),
		        points = options.points,
		        point = points[tree.i],
		        optionsPoint = point && point.options || {},
		        childrenTotal = 0,
		        children = [],
		        value;
		    extend(tree, {
		        levelDynamic: tree.level - (levelIsConstant ? 0 : nodeRoot.level),
		        name: pick(point && point.name, ''),
		        visible: (
		            idRoot === tree.id ||
		            (isBoolean(options.visible) ? options.visible : false)
		        )
		    });
		    if (isFn(before)) {
		        tree = before(tree, options);
		    }
		    // First give the children some values
		    tree.children.forEach(function (child, i) {
		        var newOptions = extend({}, options);
		        extend(newOptions, {
		            index: i,
		            siblings: tree.children.length,
		            visible: tree.visible
		        });
		        child = setTreeValues(child, newOptions);
		        children.push(child);
		        if (child.visible) {
		            childrenTotal += child.val;
		        }
		    });
		    tree.visible = childrenTotal > 0 || tree.visible;
		    // Set the values
		    value = pick(optionsPoint.value, childrenTotal);
		    extend(tree, {
		        children: children,
		        childrenTotal: childrenTotal,
		        isLeaf: tree.visible && !childrenTotal,
		        val: value
		    });
		    return tree;
		};

		var getColor = function getColor(node, options) {
		    var index = options.index,
		        mapOptionsToLevel = options.mapOptionsToLevel,
		        parentColor = options.parentColor,
		        parentColorIndex = options.parentColorIndex,
		        series = options.series,
		        colors = options.colors,
		        siblings = options.siblings,
		        points = series.points,
		        getColorByPoint,
		        chartOptionsChart = series.chart.options.chart,
		        point,
		        level,
		        colorByPoint,
		        colorIndexByPoint,
		        color,
		        colorIndex;
		    function variation(color) {
		        var colorVariation = level && level.colorVariation;
		        if (colorVariation) {
		            if (colorVariation.key === 'brightness') {
		                return H.color(color).brighten(
		                    colorVariation.to * (index / siblings)
		                ).get();
		            }
		        }

		        return color;
		    }

		    if (node) {
		        point = points[node.i];
		        level = mapOptionsToLevel[node.level] || {};
		        getColorByPoint = point && level.colorByPoint;

		        if (getColorByPoint) {
		            colorIndexByPoint = point.index % (colors ?
		                colors.length :
		                chartOptionsChart.colorCount
		            );
		            colorByPoint = colors && colors[colorIndexByPoint];
		        }

		        // Select either point color, level color or inherited color.
		        if (!series.chart.styledMode) {
		            color = pick(
		                point && point.options.color,
		                level && level.color,
		                colorByPoint,
		                parentColor && variation(parentColor),
		                series.color
		            );
		        }

		        colorIndex = pick(
		            point && point.options.colorIndex,
		            level && level.colorIndex,
		            colorIndexByPoint,
		            parentColorIndex,
		            options.colorIndex
		        );
		    }
		    return {
		        color: color,
		        colorIndex: colorIndex
		    };
		};

		/**
		 * Creates a map from level number to its given options.
		 *
		 * @private
		 * @function getLevelOptions
		 *
		 * @param {object} params
		 *        Object containing parameters.
		 *        - `defaults` Object containing default options. The default options
		 *           are merged with the userOptions to get the final options for a
		 *           specific level.
		 *        - `from` The lowest level number.
		 *        - `levels` User options from series.levels.
		 *        - `to` The highest level number.
		 *
		 * @return {Highcharts.Dictionary<object>}
		 *         Returns a map from level number to its given options.
		 */
		var getLevelOptions = function getLevelOptions(params) {
		    var result = null,
		        defaults,
		        converted,
		        i,
		        from,
		        to,
		        levels;
		    if (isObject(params)) {
		        result = {};
		        from = isNumber(params.from) ? params.from : 1;
		        levels = params.levels;
		        converted = {};
		        defaults = isObject(params.defaults) ? params.defaults : {};
		        if (isArray(levels)) {
		            converted = levels.reduce(function (obj, item) {
		                var level,
		                    levelIsConstant,
		                    options;
		                if (isObject(item) && isNumber(item.level)) {
		                    options = merge({}, item);
		                    levelIsConstant = (
		                        isBoolean(options.levelIsConstant) ?
		                        options.levelIsConstant :
		                        defaults.levelIsConstant
		                    );
		                    // Delete redundant properties.
		                    delete options.levelIsConstant;
		                    delete options.level;
		                    // Calculate which level these options apply to.
		                    level = item.level + (levelIsConstant ? 0 : from - 1);
		                    if (isObject(obj[level])) {
		                        extend(obj[level], options);
		                    } else {
		                        obj[level] = options;
		                    }
		                }
		                return obj;
		            }, {});
		        }
		        to = isNumber(params.to) ? params.to : 1;
		        for (i = 0; i <= to; i++) {
		            result[i] = merge(
		                {},
		                defaults,
		                isObject(converted[i]) ? converted[i] : {}
		            );
		        }
		    }
		    return result;
		};

		/**
		 * Update the rootId property on the series. Also makes sure that it is
		 * accessible to exporting.
		 *
		 * @private
		 * @function updateRootId
		 *
		 * @param {object} series
		 *        The series to operate on.
		 *
		 * @return {string}
		 *         Returns the resulting rootId after update.
		 */
		var updateRootId = function (series) {
		    var rootId,
		        options;
		    if (isObject(series)) {
		        // Get the series options.
		        options = isObject(series.options) ? series.options : {};

		        // Calculate the rootId.
		        rootId = pick(series.rootNode, options.rootId, '');

		        // Set rootId on series.userOptions to pick it up in exporting.
		        if (isObject(series.userOptions)) {
		            series.userOptions.rootId = rootId;
		        }
		        // Set rootId on series to pick it up on next update.
		        series.rootNode = rootId;
		    }
		    return rootId;
		};

		var result = {
		    getColor: getColor,
		    getLevelOptions: getLevelOptions,
		    setTreeValues: setTreeValues,
		    updateRootId: updateRootId
		};


		return result;
	}(Highcharts));
	(function (H, mixinTreeSeries) {
		/* *
		 * (c) 2014-2018 Highsoft AS
		 *
		 * Authors: Jon Arild Nygard / Oystein Moseng
		 *
		 * License: www.highcharts.com/license
		 */



		var seriesType = H.seriesType,
		    seriesTypes = H.seriesTypes,
		    merge = H.merge,
		    extend = H.extend,
		    noop = H.noop,
		    getColor = mixinTreeSeries.getColor,
		    getLevelOptions = mixinTreeSeries.getLevelOptions,
		    isArray = H.isArray,
		    isBoolean = function (x) {
		        return typeof x === 'boolean';
		    },
		    isNumber = H.isNumber,
		    isObject = H.isObject,
		    isString = H.isString,
		    pick = H.pick,
		    Series = H.Series,
		    stableSort = H.stableSort,
		    color = H.Color,
		    eachObject = function (list, func, context) {
		        context = context || this;
		        H.objectEach(list, function (val, key) {
		            func.call(context, val, key, list);
		        });
		    },
		    // @todo find correct name for this function.
		    // @todo Similar to reduce, this function is likely redundant
		    recursive = function (item, func, context) {
		        var next;
		        context = context || this;
		        next = func.call(context, item);
		        if (next !== false) {
		            recursive(next, func, context);
		        }
		    },
		    updateRootId = mixinTreeSeries.updateRootId;

		/**
		 * @private
		 * @class
		 * @name Highcharts.seriesTypes.treemap
		 *
		 * @augments Highcharts.Series
		 */
		seriesType('treemap', 'scatter'

		/**
		 * A treemap displays hierarchical data using nested rectangles. The data can be
		 * laid out in varying ways depending on options.
		 *
		 * @sample highcharts/demo/treemap-large-dataset/
		 *         Treemap
		 *
		 * @extends      plotOptions.scatter
		 * @excluding    marker
		 * @product      highcharts
		 * @optionparent plotOptions.treemap
		 */
		, {

		    /**
		     * When enabled the user can click on a point which is a parent and
		     * zoom in on its children.
		     *
		     * @sample {highcharts} highcharts/plotoptions/treemap-allowdrilltonode/
		     *         Enabled
		     *
		     * @type      {boolean}
		     * @default   false
		     * @since     4.1.0
		     * @product   highcharts
		     * @apioption plotOptions.treemap.allowDrillToNode
		     */

		    /**
		     * When the series contains less points than the crop threshold, all
		     * points are drawn, event if the points fall outside the visible plot
		     * area at the current zoom. The advantage of drawing all points (including
		     * markers and columns), is that animation is performed on updates.
		     * On the other hand, when the series contains more points than the
		     * crop threshold, the series data is cropped to only contain points
		     * that fall within the plot area. The advantage of cropping away invisible
		     * points is to increase performance on large series.
		     *
		     * @type      {number}
		     * @default   300
		     * @since     4.1.0
		     * @product   highcharts
		     * @apioption plotOptions.treemap.cropThreshold
		     */

		    /**
		     * This option decides if the user can interact with the parent nodes
		     * or just the leaf nodes. When this option is undefined, it will be
		     * true by default. However when allowDrillToNode is true, then it will
		     * be false by default.
		     *
		     * @sample {highcharts} highcharts/plotoptions/treemap-interactbyleaf-false/
		     *         False
		     * @sample {highcharts} highcharts/plotoptions/treemap-interactbyleaf-true-and-allowdrilltonode/
		     *         InteractByLeaf and allowDrillToNode is true
		     *
		     * @type      {boolean}
		     * @since     4.1.2
		     * @product   highcharts
		     * @apioption plotOptions.treemap.interactByLeaf
		     */

		    /**
		     * The sort index of the point inside the treemap level.
		     *
		     * @sample {highcharts} highcharts/plotoptions/treemap-sortindex/
		     *         Sort by years
		     *
		     * @type      {number}
		     * @since     4.1.10
		     * @product   highcharts
		     * @apioption plotOptions.treemap.sortIndex
		     */

		    /**
		     * When using automatic point colors pulled from the `options.colors`
		     * collection, this option determines whether the chart should receive
		     * one color per series or one color per point.
		     *
		     * @see [series colors](#plotOptions.treemap.colors)
		     *
		     * @type      {boolean}
		     * @default   false
		     * @since     2.0
		     * @product   highcharts
		     * @apioption plotOptions.treemap.colorByPoint
		     */

		    /**
		     * A series specific or series type specific color set to apply instead
		     * of the global [colors](#colors) when
		     * [colorByPoint](#plotOptions.treemap.colorByPoint) is true.
		     *
		     * @type      {Array<Highcharts.ColorString>}
		     * @since     3.0
		     * @product   highcharts
		     * @apioption plotOptions.treemap.colors
		     */

		    /**
		     * Whether to display this series type or specific series item in the
		     * legend.
		     */
		    showInLegend: false,

		    /**
		     * @ignore
		     */
		    marker: false,

		    colorByPoint: false,

		    /**
		     * @extends plotOptions.heatmap.dataLabels
		     * @since   4.1.0
		     */
		    dataLabels: {
		        enabled: true,
		        defer: false,
		        verticalAlign: 'middle',
		        formatter: function () {
		            var point = this && this.point ? this.point : {},
		                name = isString(point.name) ? point.name : '';
		            return name;
		        },
		        inside: true
		    },

		    tooltip: {
		        headerFormat: '',
		        pointFormat: '<b>{point.name}</b>: {point.value}<br/>'
		    },

		    /**
		     * Whether to ignore hidden points when the layout algorithm runs.
		     * If `false`, hidden points will leave open spaces.
		     *
		     * @since 5.0.8
		     */
		    ignoreHiddenPoint: true,

		    /**
		     * This option decides which algorithm is used for setting position
		     * and dimensions of the points.
		     *
		     * @see [How to write your own algorithm](https://www.highcharts.com/docs/chart-and-series-types/treemap)
		     *
		     * @sample {highcharts} highcharts/plotoptions/treemap-layoutalgorithm-sliceanddice/
		     *         SliceAndDice by default
		     * @sample {highcharts} highcharts/plotoptions/treemap-layoutalgorithm-stripes/
		     *         Stripes
		     * @sample {highcharts} highcharts/plotoptions/treemap-layoutalgorithm-squarified/
		     *         Squarified
		     * @sample {highcharts} highcharts/plotoptions/treemap-layoutalgorithm-strip/
		     *         Strip
		     *
		     * @since      4.1.0
		     * @validvalue ["sliceAndDice", "stripes", "squarified", "strip"]
		     */
		    layoutAlgorithm: 'sliceAndDice',

		    /**
		     * Defines which direction the layout algorithm will start drawing.
		     *
		     * @since       4.1.0
		     * @validvalue ["vertical", "horizontal"]
		     */
		    layoutStartingDirection: 'vertical',

		    /**
		     * Enabling this option will make the treemap alternate the drawing
		     * direction between vertical and horizontal. The next levels starting
		     * direction will always be the opposite of the previous.
		     *
		     * @sample {highcharts} highcharts/plotoptions/treemap-alternatestartingdirection-true/
		     *         Enabled
		     *
		     * @since 4.1.0
		     */
		    alternateStartingDirection: false,

		    /**
		     * Used together with the levels and allowDrillToNode options. When
		     * set to false the first level visible when drilling is considered
		     * to be level one. Otherwise the level will be the same as the tree
		     * structure.
		     *
		     * @since 4.1.0
		     */
		    levelIsConstant: true,

		    /**
		     * Options for the button appearing when drilling down in a treemap.
		     */
		    drillUpButton: {

		        /**
		         * The position of the button.
		         */
		        position: {

		            /**
		             * Vertical alignment of the button.
		             *
		             * @default    top
		             * @validvalue ["top", "middle", "bottom"]
		             * @product    highcharts
		             * @apioption  plotOptions.treemap.drillUpButton.position.verticalAlign
		             */

		            /**
		             * Horizontal alignment of the button.
		             *
		             * @validvalue ["left", "center", "right"]
		             */
		            align: 'right',

		            /**
		             * Horizontal offset of the button.
		             */
		            x: -10,

		            /**
		             * Vertical offset of the button.
		             */
		            y: 10
		        }
		    },


		    /**
		     * Set options on specific levels. Takes precedence over series options,
		     * but not point options.
		     *
		     * @sample {highcharts} highcharts/plotoptions/treemap-levels/
		     *         Styling dataLabels and borders
		     * @sample {highcharts} highcharts/demo/treemap-with-levels/
		     *         Different layoutAlgorithm
		     *
		     * @type      {Array<*>}
		     * @since     4.1.0
		     * @product   highcharts
		     * @apioption plotOptions.treemap.levels
		     */

		    /**
		     * Can set a `borderColor` on all points which lies on the same level.
		     *
		     * @type      {Highcharts.ColorString}
		     * @since     4.1.0
		     * @product   highcharts
		     * @apioption plotOptions.treemap.levels.borderColor
		     */

		    /**
		     * Set the dash style of the border of all the point which lies on the
		     * level. See <a href"#plotoptions.scatter.dashstyle">
		     * plotOptions.scatter.dashStyle</a> for possible options.
		     *
		     * @type      {string}
		     * @since     4.1.0
		     * @product   highcharts
		     * @apioption plotOptions.treemap.levels.borderDashStyle
		     */

		    /**
		     * Can set the borderWidth on all points which lies on the same level.
		     *
		     * @type      {number}
		     * @since     4.1.0
		     * @product   highcharts
		     * @apioption plotOptions.treemap.levels.borderWidth
		     */

		    /**
		     * Can set a color on all points which lies on the same level.
		     *
		     * @type      {Highcharts.ColorString}
		     * @since     4.1.0
		     * @product   highcharts
		     * @apioption plotOptions.treemap.levels.color
		     */

		    /**
		     * A configuration object to define how the color of a child varies from the
		     * parent's color. The variation is distributed among the children of node.
		     * For example when setting brightness, the brightness change will range
		     * from the parent's original brightness on the first child, to the amount
		     * set in the `to` setting on the last node. This allows a gradient-like
		     * color scheme that sets children out from each other while highlighting
		     * the grouping on treemaps and sectors on sunburst charts.
		     *
		     * @sample highcharts/demo/sunburst/
		     *         Sunburst with color variation
		     *
		     * @since     6.0.0
		     * @product   highcharts
		     * @apioption plotOptions.treemap.levels.colorVariation
		     */

		    /**
		     * The key of a color variation. Currently supports `brightness` only.
		     *
		     * @type       {string}
		     * @since      6.0.0
		     * @product    highcharts
		     * @validvalue ["brightness"]
		     * @apioption  plotOptions.treemap.levels.colorVariation.key
		     */

		    /**
		     * The ending value of a color variation. The last sibling will receive this
		     * value.
		     *
		     * @type      {number}
		     * @since     6.0.0
		     * @product   highcharts
		     * @apioption plotOptions.treemap.levels.colorVariation.to
		     */

		    /**
		     * Can set the options of dataLabels on each point which lies on the
		     * level. [plotOptions.treemap.dataLabels](#plotOptions.treemap.dataLabels)
		     * for possible values.
		     *
		     * @type      {object}
		     * @since     4.1.0
		     * @product   highcharts
		     * @apioption plotOptions.treemap.levels.dataLabels
		     */

		    /**
		     * Can set the layoutAlgorithm option on a specific level.
		     *
		     * @type       {string}
		     * @since      4.1.0
		     * @product    highcharts
		     * @validvalue ["sliceAndDice", "stripes", "squarified", "strip"]
		     * @apioption  plotOptions.treemap.levels.layoutAlgorithm
		     */

		    /**
		     * Can set the layoutStartingDirection option on a specific level.
		     *
		     * @type       {string}
		     * @since      4.1.0
		     * @product    highcharts
		     * @validvalue ["vertical", "horizontal"]
		     * @apioption  plotOptions.treemap.levels.layoutStartingDirection
		     */

		    /**
		     * Decides which level takes effect from the options set in the levels
		     * object.
		     *
		     * @sample {highcharts} highcharts/plotoptions/treemap-levels/
		     *         Styling of both levels
		     *
		     * @type      {number}
		     * @since     4.1.0
		     * @product   highcharts
		     * @apioption plotOptions.treemap.levels.level
		     */


		    // Presentational options

		    /**
		     * The color of the border surrounding each tree map item.
		     *
		     * @type {Highcharts.ColorString}
		     */
		    borderColor: '#e6e6e6',

		    /**
		     * The width of the border surrounding each tree map item.
		     */
		    borderWidth: 1,

		    /**
		     * The opacity of a point in treemap. When a point has children, the
		     * visibility of the children is determined by the opacity.
		     *
		     * @since 4.2.4
		     */
		    opacity: 0.15,

		    /**
		     * A wrapper object for all the series options in specific states.
		     *
		     * @extends plotOptions.heatmap.states
		     */
		    states: {

		        /**
		         * Options for the hovered series
		         *
		         * @extends   plotOptions.heatmap.states.hover
		         * @excluding halo
		         */
		        hover: {

		            /**
		             * The border color for the hovered state.
		             */
		            borderColor: '#999999',

		            /**
		             * Brightness for the hovered point. Defaults to 0 if the heatmap
		             * series is loaded first, otherwise 0.1.
		             *
		             * @type    {number}
		             * @default undefined
		             */
		            brightness: seriesTypes.heatmap ? 0 : 0.1,
		            /**
		             * @extends plotOptions.heatmap.states.hover.halo
		             */
		            halo: false,
		            /**
		             * The opacity of a point in treemap. When a point has children,
		             * the visibility of the children is determined by the opacity.
		             *
		             * @since 4.2.4
		             */
		            opacity: 0.75,

		            /**
		             * The shadow option for hovered state.
		             */
		            shadow: false
		        }
		    }



		// Prototype members
		}, {
		    pointArrayMap: ['value'],
		    directTouch: true,
		    optionalAxis: 'colorAxis',
		    getSymbol: noop,
		    parallelArrays: ['x', 'y', 'value', 'colorValue'],
		    colorKey: 'colorValue', // Point color option key
		    trackerGroups: ['group', 'dataLabelsGroup'],
		    /**
		     * Creates an object map from parent id to childrens index.
		     *
		     * @private
		     * @function Highcharts.Series#getListOfParents
		     *
		     * @param {Highcharts.SeriesTreemapDataOptions} data
		     *        List of points set in options.
		     *
		     * @param {Array<string>} existingIds
		     *        List of all point ids.
		     *
		     * @return {object}
		     *         Map from parent id to children index in data.
		     */
		    getListOfParents: function (data, existingIds) {
		        var arr = isArray(data) ? data : [],
		            ids = isArray(existingIds) ? existingIds : [],
		            listOfParents = arr.reduce(function (prev, curr, i) {
		                var parent = pick(curr.parent, '');
		                if (prev[parent] === undefined) {
		                    prev[parent] = [];
		                }
		                prev[parent].push(i);
		                return prev;
		            }, {
		                '': [] // Root of tree
		            });

		        // If parent does not exist, hoist parent to root of tree.
		        eachObject(listOfParents, function (children, parent, list) {
		            if ((parent !== '') && (ids.indexOf(parent) === -1)) {
		                children.forEach(function (child) {
		                    list[''].push(child);
		                });
		                delete list[parent];
		            }
		        });
		        return listOfParents;
		    },
		    // Creates a tree structured object from the series points
		    getTree: function () {
		        var series = this,
		            allIds = this.data.map(function (d) {
		                return d.id;
		            }),
		            parentList = series.getListOfParents(this.data, allIds);

		        series.nodeMap = [];
		        return series.buildNode('', -1, 0, parentList, null);
		    },
		    init: function (chart, options) {
		        var series = this,
		            colorSeriesMixin = H.colorSeriesMixin;

		        // If color series logic is loaded, add some properties
		        if (H.colorSeriesMixin) {
		            this.translateColors = colorSeriesMixin.translateColors;
		            this.colorAttribs = colorSeriesMixin.colorAttribs;
		            this.axisTypes = colorSeriesMixin.axisTypes;
		        }

		        Series.prototype.init.call(series, chart, options);
		        if (series.options.allowDrillToNode) {
		            H.addEvent(series, 'click', series.onClickDrillToNode);
		        }
		    },
		    buildNode: function (id, i, level, list, parent) {
		        var series = this,
		            children = [],
		            point = series.points[i],
		            height = 0,
		            node,
		            child;

		        // Actions
		        ((list[id] || [])).forEach(function (i) {
		            child = series.buildNode(
		                series.points[i].id,
		                i,
		                (level + 1),
		                list,
		                id
		            );
		            height = Math.max(child.height + 1, height);
		            children.push(child);
		        });
		        node = {
		            id: id,
		            i: i,
		            children: children,
		            height: height,
		            level: level,
		            parent: parent,
		            visible: false // @todo move this to better location
		        };
		        series.nodeMap[node.id] = node;
		        if (point) {
		            point.node = node;
		        }
		        return node;
		    },
		    setTreeValues: function (tree) {
		        var series = this,
		            options = series.options,
		            idRoot = series.rootNode,
		            mapIdToNode = series.nodeMap,
		            nodeRoot = mapIdToNode[idRoot],
		            levelIsConstant = (
		                isBoolean(options.levelIsConstant) ?
		                options.levelIsConstant :
		                true
		            ),
		            childrenTotal = 0,
		            children = [],
		            val,
		            point = series.points[tree.i];

		        // First give the children some values
		        tree.children.forEach(function (child) {
		            child = series.setTreeValues(child);
		            children.push(child);
		            if (!child.ignore) {
		                childrenTotal += child.val;
		            }
		        });
		        // Sort the children
		        stableSort(children, function (a, b) {
		            return a.sortIndex - b.sortIndex;
		        });
		        // Set the values
		        val = pick(point && point.options.value, childrenTotal);
		        if (point) {
		            point.value = val;
		        }
		        extend(tree, {
		            children: children,
		            childrenTotal: childrenTotal,
		            // Ignore this node if point is not visible
		            ignore: !(pick(point && point.visible, true) && (val > 0)),
		            isLeaf: tree.visible && !childrenTotal,
		            levelDynamic: tree.level - (levelIsConstant ? 0 : nodeRoot.level),
		            name: pick(point && point.name, ''),
		            sortIndex: pick(point && point.sortIndex, -val),
		            val: val
		        });
		        return tree;
		    },
		    /**
		     * Recursive function which calculates the area for all children of a node.
		     *
		     * @private
		     * @function Highcharts.Series#calculateChildrenAreas
		     *
		     * @param {object} node
		     *        The node which is parent to the children.
		     *
		     * @param {object} area
		     *        The rectangular area of the parent.
		     */
		    calculateChildrenAreas: function (parent, area) {
		        var series = this,
		            options = series.options,
		            mapOptionsToLevel = series.mapOptionsToLevel,
		            level = mapOptionsToLevel[parent.level + 1],
		            algorithm = pick(
		                (
		                    series[level &&
		                    level.layoutAlgorithm] &&
		                    level.layoutAlgorithm
		                ),
		                options.layoutAlgorithm
		            ),
		            alternate = options.alternateStartingDirection,
		            childrenValues = [],
		            children;

		        // Collect all children which should be included
		        children = parent.children.filter(function (n) {
		            return !n.ignore;
		        });

		        if (level && level.layoutStartingDirection) {
		            area.direction = level.layoutStartingDirection === 'vertical' ?
		                0 :
		                1;
		        }
		        childrenValues = series[algorithm](area, children);
		        children.forEach(function (child, index) {
		            var values = childrenValues[index];
		            child.values = merge(values, {
		                val: child.childrenTotal,
		                direction: (alternate ? 1 - area.direction : area.direction)
		            });
		            child.pointValues = merge(values, {
		                x: (values.x / series.axisRatio),
		                width: (values.width / series.axisRatio)
		            });
		            // If node has children, then call method recursively
		            if (child.children.length) {
		                series.calculateChildrenAreas(child, child.values);
		            }
		        });
		    },
		    setPointValues: function () {
		        var series = this,
		            xAxis = series.xAxis,
		            yAxis = series.yAxis;
		        series.points.forEach(function (point) {
		            var node = point.node,
		                values = node.pointValues,
		                x1,
		                x2,
		                y1,
		                y2,
		                crispCorr = 0;

		            // Get the crisp correction in classic mode. For this to work in
		            // styled mode, we would need to first add the shape (without x, y,
		            // width and height), then read the rendered stroke width using
		            // point.graphic.strokeWidth(), then modify and apply the shapeArgs.
		            // This applies also to column series, but the downside is
		            // performance and code complexity.
		            if (!series.chart.styledMode) {
		                crispCorr = (
		                    (series.pointAttribs(point)['stroke-width'] || 0) % 2
		                ) / 2;
		            }

		            // Points which is ignored, have no values.
		            if (values && node.visible) {
		                x1 = Math.round(
		                    xAxis.translate(values.x, 0, 0, 0, 1)
		                ) - crispCorr;
		                x2 = Math.round(
		                    xAxis.translate(values.x + values.width, 0, 0, 0, 1)
		                ) - crispCorr;
		                y1 = Math.round(
		                    yAxis.translate(values.y, 0, 0, 0, 1)
		                ) - crispCorr;
		                y2 = Math.round(
		                    yAxis.translate(values.y + values.height, 0, 0, 0, 1)
		                ) - crispCorr;
		                // Set point values
		                point.shapeType = 'rect';
		                point.shapeArgs = {
		                    x: Math.min(x1, x2),
		                    y: Math.min(y1, y2),
		                    width: Math.abs(x2 - x1),
		                    height: Math.abs(y2 - y1)
		                };
		                point.plotX = point.shapeArgs.x + (point.shapeArgs.width / 2);
		                point.plotY = point.shapeArgs.y + (point.shapeArgs.height / 2);
		            } else {
		                // Reset visibility
		                delete point.plotX;
		                delete point.plotY;
		            }
		        });
		    },

		    // Set the node's color recursively, from the parent down.
		    setColorRecursive: function (
		        node,
		        parentColor,
		        colorIndex,
		        index,
		        siblings
		    ) {
		        var series = this,
		            chart = series && series.chart,
		            colors = chart && chart.options && chart.options.colors,
		            colorInfo,
		            point;

		        if (node) {
		            colorInfo = getColor(node, {
		                colors: colors,
		                index: index,
		                mapOptionsToLevel: series.mapOptionsToLevel,
		                parentColor: parentColor,
		                parentColorIndex: colorIndex,
		                series: series,
		                siblings: siblings
		            });

		            point = series.points[node.i];
		            if (point) {
		                point.color = colorInfo.color;
		                point.colorIndex = colorInfo.colorIndex;
		            }

		            // Do it all again with the children
		            (node.children || []).forEach(function (child, i) {
		                series.setColorRecursive(
		                    child,
		                    colorInfo.color,
		                    colorInfo.colorIndex,
		                    i,
		                    node.children.length
		                );
		            });
		        }
		    },
		    algorithmGroup: function (h, w, d, p) {
		        this.height = h;
		        this.width = w;
		        this.plot = p;
		        this.direction = d;
		        this.startDirection = d;
		        this.total = 0;
		        this.nW = 0;
		        this.lW = 0;
		        this.nH = 0;
		        this.lH = 0;
		        this.elArr = [];
		        this.lP = {
		            total: 0,
		            lH: 0,
		            nH: 0,
		            lW: 0,
		            nW: 0,
		            nR: 0,
		            lR: 0,
		            aspectRatio: function (w, h) {
		                return Math.max((w / h), (h / w));
		            }
		        };
		        this.addElement = function (el) {
		            this.lP.total = this.elArr[this.elArr.length - 1];
		            this.total = this.total + el;
		            if (this.direction === 0) {
		                // Calculate last point old aspect ratio
		                this.lW = this.nW;
		                this.lP.lH = this.lP.total / this.lW;
		                this.lP.lR = this.lP.aspectRatio(this.lW, this.lP.lH);
		                // Calculate last point new aspect ratio
		                this.nW = this.total / this.height;
		                this.lP.nH = this.lP.total / this.nW;
		                this.lP.nR = this.lP.aspectRatio(this.nW, this.lP.nH);
		            } else {
		                // Calculate last point old aspect ratio
		                this.lH = this.nH;
		                this.lP.lW = this.lP.total / this.lH;
		                this.lP.lR = this.lP.aspectRatio(this.lP.lW, this.lH);
		                // Calculate last point new aspect ratio
		                this.nH = this.total / this.width;
		                this.lP.nW = this.lP.total / this.nH;
		                this.lP.nR = this.lP.aspectRatio(this.lP.nW, this.nH);
		            }
		            this.elArr.push(el);
		        };
		        this.reset = function () {
		            this.nW = 0;
		            this.lW = 0;
		            this.elArr = [];
		            this.total = 0;
		        };
		    },
		    algorithmCalcPoints: function (directionChange, last, group, childrenArea) {
		        var pX,
		            pY,
		            pW,
		            pH,
		            gW = group.lW,
		            gH = group.lH,
		            plot = group.plot,
		            keep,
		            i = 0,
		            end = group.elArr.length - 1;
		        if (last) {
		            gW = group.nW;
		            gH = group.nH;
		        } else {
		            keep = group.elArr[group.elArr.length - 1];
		        }
		        group.elArr.forEach(function (p) {
		            if (last || (i < end)) {
		                if (group.direction === 0) {
		                    pX = plot.x;
		                    pY = plot.y;
		                    pW = gW;
		                    pH = p / pW;
		                } else {
		                    pX = plot.x;
		                    pY = plot.y;
		                    pH = gH;
		                    pW = p / pH;
		                }
		                childrenArea.push({
		                    x: pX,
		                    y: pY,
		                    width: pW,
		                    height: pH
		                });
		                if (group.direction === 0) {
		                    plot.y = plot.y + pH;
		                } else {
		                    plot.x = plot.x + pW;
		                }
		            }
		            i = i + 1;
		        });
		        // Reset variables
		        group.reset();
		        if (group.direction === 0) {
		            group.width = group.width - gW;
		        } else {
		            group.height = group.height - gH;
		        }
		        plot.y = plot.parent.y + (plot.parent.height - group.height);
		        plot.x = plot.parent.x + (plot.parent.width - group.width);
		        if (directionChange) {
		            group.direction = 1 - group.direction;
		        }
		        // If not last, then add uncalculated element
		        if (!last) {
		            group.addElement(keep);
		        }
		    },
		    algorithmLowAspectRatio: function (directionChange, parent, children) {
		        var childrenArea = [],
		            series = this,
		            pTot,
		            plot = {
		                x: parent.x,
		                y: parent.y,
		                parent: parent
		            },
		            direction = parent.direction,
		            i = 0,
		            end = children.length - 1,
		            group = new this.algorithmGroup( // eslint-disable-line new-cap
		                parent.height,
		                parent.width,
		                direction,
		                plot
		            );
		        // Loop through and calculate all areas
		        children.forEach(function (child) {
		            pTot = (parent.width * parent.height) * (child.val / parent.val);
		            group.addElement(pTot);
		            if (group.lP.nR > group.lP.lR) {
		                series.algorithmCalcPoints(
		                    directionChange,
		                    false,
		                    group,
		                    childrenArea,
		                    plot
		                );
		            }
		            // If last child, then calculate all remaining areas
		            if (i === end) {
		                series.algorithmCalcPoints(
		                    directionChange,
		                    true,
		                    group,
		                    childrenArea,
		                    plot
		                );
		            }
		            i = i + 1;
		        });
		        return childrenArea;
		    },
		    algorithmFill: function (directionChange, parent, children) {
		        var childrenArea = [],
		            pTot,
		            direction = parent.direction,
		            x = parent.x,
		            y = parent.y,
		            width = parent.width,
		            height = parent.height,
		            pX,
		            pY,
		            pW,
		            pH;
		        children.forEach(function (child) {
		            pTot = (parent.width * parent.height) * (child.val / parent.val);
		            pX = x;
		            pY = y;
		            if (direction === 0) {
		                pH = height;
		                pW = pTot / pH;
		                width = width - pW;
		                x = x + pW;
		            } else {
		                pW = width;
		                pH = pTot / pW;
		                height = height - pH;
		                y = y + pH;
		            }
		            childrenArea.push({
		                x: pX,
		                y: pY,
		                width: pW,
		                height: pH
		            });
		            if (directionChange) {
		                direction = 1 - direction;
		            }
		        });
		        return childrenArea;
		    },
		    strip: function (parent, children) {
		        return this.algorithmLowAspectRatio(false, parent, children);
		    },
		    squarified: function (parent, children) {
		        return this.algorithmLowAspectRatio(true, parent, children);
		    },
		    sliceAndDice: function (parent, children) {
		        return this.algorithmFill(true, parent, children);
		    },
		    stripes: function (parent, children) {
		        return this.algorithmFill(false, parent, children);
		    },
		    translate: function () {
		        var series = this,
		            options = series.options,
		            // NOTE: updateRootId modifies series.
		            rootId = updateRootId(series),
		            rootNode,
		            pointValues,
		            seriesArea,
		            tree,
		            val;

		        // Call prototype function
		        Series.prototype.translate.call(series);

		        // @todo Only if series.isDirtyData is true
		        tree = series.tree = series.getTree();
		        rootNode = series.nodeMap[rootId];
		        series.mapOptionsToLevel = getLevelOptions({
		            from: rootNode.level + 1,
		            levels: options.levels,
		            to: tree.height,
		            defaults: {
		                levelIsConstant: series.options.levelIsConstant,
		                colorByPoint: options.colorByPoint
		            }
		        });
		        if (
		            rootId !== '' &&
		            (!rootNode || !rootNode.children.length)
		        ) {
		            series.drillToNode('', false);
		            rootId = series.rootNode;
		            rootNode = series.nodeMap[rootId];
		        }
		        // Parents of the root node is by default visible
		        recursive(series.nodeMap[series.rootNode], function (node) {
		            var next = false,
		                p = node.parent;
		            node.visible = true;
		            if (p || p === '') {
		                next = series.nodeMap[p];
		            }
		            return next;
		        });
		        // Children of the root node is by default visible
		        recursive(
		            series.nodeMap[series.rootNode].children,
		            function (children) {
		                var next = false;
		                children.forEach(function (child) {
		                    child.visible = true;
		                    if (child.children.length) {
		                        next = (next || []).concat(child.children);
		                    }
		                });
		                return next;
		            }
		        );
		        series.setTreeValues(tree);

		        // Calculate plotting values.
		        series.axisRatio = (series.xAxis.len / series.yAxis.len);
		        series.nodeMap[''].pointValues = pointValues =
		            { x: 0, y: 0, width: 100, height: 100 };
		        series.nodeMap[''].values = seriesArea = merge(pointValues, {
		            width: (pointValues.width * series.axisRatio),
		            direction: (options.layoutStartingDirection === 'vertical' ? 0 : 1),
		            val: tree.val
		        });
		        series.calculateChildrenAreas(tree, seriesArea);

		        // Logic for point colors
		        if (series.colorAxis) {
		            series.translateColors();
		        } else if (!options.colorByPoint) {
		            series.setColorRecursive(series.tree);
		        }

		        // Update axis extremes according to the root node.
		        if (options.allowDrillToNode) {
		            val = rootNode.pointValues;
		            series.xAxis.setExtremes(val.x, val.x + val.width, false);
		            series.yAxis.setExtremes(val.y, val.y + val.height, false);
		            series.xAxis.setScale();
		            series.yAxis.setScale();
		        }

		        // Assign values to points.
		        series.setPointValues();
		    },
		    /**
		     * Extend drawDataLabels with logic to handle custom options related to the
		     * treemap series:
		     *
		     * - Points which is not a leaf node, has dataLabels disabled by default.
		     *
		     * - Options set on series.levels is merged in.
		     *
		     * - Width of the dataLabel is set to match the width of the point shape.
		     *
		     * @private
		     * @function Highcharts.Series#drawDataLabels
		     */
		    drawDataLabels: function () {
		        var series = this,
		            mapOptionsToLevel = series.mapOptionsToLevel,
		            points = series.points.filter(function (n) {
		                return n.node.visible;
		            }),
		            options,
		            level;
		        points.forEach(function (point) {
		            level = mapOptionsToLevel[point.node.level];
		            // Set options to new object to avoid problems with scope
		            options = { style: {} };

		            // If not a leaf, then label should be disabled as default
		            if (!point.node.isLeaf) {
		                options.enabled = false;
		            }

		            // If options for level exists, include them as well
		            if (level && level.dataLabels) {
		                options = merge(options, level.dataLabels);
		                series._hasPointLabels = true;
		            }

		            // Set dataLabel width to the width of the point shape.
		            if (point.shapeArgs) {
		                options.style.width = point.shapeArgs.width;
		                if (point.dataLabel) {
		                    point.dataLabel.css({
		                        width: point.shapeArgs.width + 'px'
		                    });
		                }
		            }

		            // Merge custom options with point options
		            point.dlOptions = merge(options, point.options.dataLabels);
		        });
		        Series.prototype.drawDataLabels.call(this);
		    },

		    // Over the alignment method by setting z index
		    alignDataLabel: function (point) {
		        seriesTypes.column.prototype.alignDataLabel.apply(this, arguments);
		        if (point.dataLabel) {
		            // point.node.zIndex could be undefined (#6956)
		            point.dataLabel.attr({ zIndex: (point.node.zIndex || 0) + 1 });
		        }
		    },

		    // Get presentational attributes
		    pointAttribs: function (point, state) {
		        var series = this,
		            mapOptionsToLevel = (
		                isObject(series.mapOptionsToLevel) ?
		                series.mapOptionsToLevel :
		                {}
		            ),
		            level = point && mapOptionsToLevel[point.node.level] || {},
		            options = this.options,
		            attr,
		            stateOptions = (state && options.states[state]) || {},
		            className = (point && point.getClassName()) || '',
		            opacity;

		        // Set attributes by precedence. Point trumps level trumps series.
		        // Stroke width uses pick because it can be 0.
		        attr = {
		            'stroke':
		                (point && point.borderColor) ||
		                level.borderColor ||
		                stateOptions.borderColor ||
		                options.borderColor,
		            'stroke-width': pick(
		                point && point.borderWidth,
		                level.borderWidth,
		                stateOptions.borderWidth,
		                options.borderWidth
		            ),
		            'dashstyle':
		                (point && point.borderDashStyle) ||
		                level.borderDashStyle ||
		                stateOptions.borderDashStyle ||
		                options.borderDashStyle,
		            'fill': (point && point.color) || this.color
		        };

		        // Hide levels above the current view
		        if (className.indexOf('highcharts-above-level') !== -1) {
		            attr.fill = 'none';
		            attr['stroke-width'] = 0;

		        // Nodes with children that accept interaction
		        } else if (
		            className.indexOf('highcharts-internal-node-interactive') !== -1
		        ) {
		            opacity = pick(stateOptions.opacity, options.opacity);
		            attr.fill = color(attr.fill).setOpacity(opacity).get();
		            attr.cursor = 'pointer';
		        // Hide nodes that have children
		        } else if (className.indexOf('highcharts-internal-node') !== -1) {
		            attr.fill = 'none';

		        } else if (state) {
		            // Brighten and hoist the hover nodes
		            attr.fill = color(attr.fill)
		                .brighten(stateOptions.brightness)
		                .get();
		        }
		        return attr;
		    },

		    // Extending ColumnSeries drawPoints
		    drawPoints: function () {
		        var series = this,
		            points = series.points.filter(function (n) {
		                return n.node.visible;
		            });

		        points.forEach(function (point) {
		            var groupKey = 'level-group-' + point.node.levelDynamic;
		            if (!series[groupKey]) {
		                series[groupKey] = series.chart.renderer.g(groupKey)
		                    .attr({
		                        // @todo Set the zIndex based upon the number of levels,
		                        // instead of using 1000
		                        zIndex: 1000 - point.node.levelDynamic
		                    })
		                    .add(series.group);
		            }
		            point.group = series[groupKey];

		        });
		        // Call standard drawPoints
		        seriesTypes.column.prototype.drawPoints.call(this);

		        // In styled mode apply point.color. Use CSS, otherwise the fill
		        // used in the style sheet will take precedence over the fill
		        // attribute.
		        if (this.colorAttribs && series.chart.styledMode) { // Heatmap is loaded
		            this.points.forEach(function (point) {
		                if (point.graphic) {
		                    point.graphic.css(this.colorAttribs(point));
		                }
		            }, this);
		        }

		        // If drillToNode is allowed, set a point cursor on clickables & add
		        // drillId to point
		        if (series.options.allowDrillToNode) {
		            points.forEach(function (point) {
		                if (point.graphic) {
		                    point.drillId = series.options.interactByLeaf ?
		                        series.drillToByLeaf(point) :
		                        series.drillToByGroup(point);
		                }
		            });
		        }
		    },
		    // Add drilling on the suitable points
		    onClickDrillToNode: function (event) {
		        var series = this,
		            point = event.point,
		            drillId = point && point.drillId;
		        // If a drill id is returned, add click event and cursor.
		        if (isString(drillId)) {
		            point.setState(''); // Remove hover
		            series.drillToNode(drillId);
		        }
		    },
		    /**
		     * Finds the drill id for a parent node. Returns false if point should not
		     * have a click event.
		     *
		     * @private
		     * @function Highcharts.Series#drillToByGroup
		     *
		     * @param {object} point
		     *
		     * @return {boolean|string}
		     *         Drill to id or false when point should not have a click event.
		     */
		    drillToByGroup: function (point) {
		        var series = this,
		            drillId = false;
		        if (
		            (point.node.level - series.nodeMap[series.rootNode].level) === 1 &&
		            !point.node.isLeaf
		        ) {
		            drillId = point.id;
		        }
		        return drillId;
		    },
		    /**
		    * Finds the drill id for a leaf node. Returns false if point should not have
		    * a click event
		    *
		    * @private
		    * @function Highcharts.Series#drillToByLeaf
		    *
		    * @param {object} point
		    *
		    * @return {boolean|string}
		    *         Drill to id or false when point should not have a click event.
		    */
		    drillToByLeaf: function (point) {
		        var series = this,
		            drillId = false,
		            nodeParent;
		        if ((point.node.parent !== series.rootNode) && (point.node.isLeaf)) {
		            nodeParent = point.node;
		            while (!drillId) {
		                nodeParent = series.nodeMap[nodeParent.parent];
		                if (nodeParent.parent === series.rootNode) {
		                    drillId = nodeParent.id;
		                }
		            }
		        }
		        return drillId;
		    },
		    drillUp: function () {
		        var series = this,
		            node = series.nodeMap[series.rootNode];
		        if (node && isString(node.parent)) {
		            series.drillToNode(node.parent);
		        }
		    },
		    drillToNode: function (id, redraw) {
		        var series = this,
		            nodeMap = series.nodeMap,
		            node = nodeMap[id];
		        series.idPreviousRoot = series.rootNode;
		        series.rootNode = id;
		        if (id === '') {
		            series.drillUpButton = series.drillUpButton.destroy();
		        } else {
		            series.showDrillUpButton((node && node.name || id));
		        }
		        this.isDirty = true; // Force redraw
		        if (pick(redraw, true)) {
		            this.chart.redraw();
		        }
		    },
		    showDrillUpButton: function (name) {
		        var series = this,
		            backText = (name || '< Back'),
		            buttonOptions = series.options.drillUpButton,
		            attr,
		            states;

		        if (buttonOptions.text) {
		            backText = buttonOptions.text;
		        }
		        if (!this.drillUpButton) {
		            attr = buttonOptions.theme;
		            states = attr && attr.states;

		            this.drillUpButton = this.chart.renderer.button(
		                backText,
		                null,
		                null,
		                function () {
		                    series.drillUp();
		                },
		                attr,
		                states && states.hover,
		                states && states.select
		            )
		            .addClass('highcharts-drillup-button')
		            .attr({
		                align: buttonOptions.position.align,
		                zIndex: 7
		            })
		            .add()
		            .align(
		                buttonOptions.position,
		                false,
		                buttonOptions.relativeTo || 'plotBox'
		            );
		        } else {
		            this.drillUpButton.placed = false;
		            this.drillUpButton.attr({
		                text: backText
		            })
		            .align();
		        }
		    },
		    buildKDTree: noop,
		    drawLegendSymbol: H.LegendSymbolMixin.drawRectangle,
		    getExtremes: function () {
		        // Get the extremes from the value data
		        Series.prototype.getExtremes.call(this, this.colorValueData);
		        this.valueMin = this.dataMin;
		        this.valueMax = this.dataMax;

		        // Get the extremes from the y data
		        Series.prototype.getExtremes.call(this);
		    },
		    getExtremesFromAll: true,
		    bindAxes: function () {
		        var treeAxis = {
		            endOnTick: false,
		            gridLineWidth: 0,
		            lineWidth: 0,
		            min: 0,
		            dataMin: 0,
		            minPadding: 0,
		            max: 100,
		            dataMax: 100,
		            maxPadding: 0,
		            startOnTick: false,
		            title: null,
		            tickPositions: []
		        };
		        Series.prototype.bindAxes.call(this);
		        H.extend(this.yAxis.options, treeAxis);
		        H.extend(this.xAxis.options, treeAxis);
		    },
		    utils: {
		        recursive: recursive
		    }

		// Point class
		}, {
		    getClassName: function () {
		        var className = H.Point.prototype.getClassName.call(this),
		            series = this.series,
		            options = series.options;

		        // Above the current level
		        if (this.node.level <= series.nodeMap[series.rootNode].level) {
		            className += ' highcharts-above-level';

		        } else if (
		            !this.node.isLeaf &&
		            !pick(options.interactByLeaf, !options.allowDrillToNode)
		        ) {
		            className += ' highcharts-internal-node-interactive';

		        } else if (!this.node.isLeaf) {
		            className += ' highcharts-internal-node';
		        }
		        return className;
		    },

		    /**
		     * A tree point is valid if it has han id too, assume it may be a parent
		     * item.
		     *
		     * @private
		     * @function Highcharts.Point#isValid
		     */
		    isValid: function () {
		        return this.id || isNumber(this.value);
		    },
		    setState: function (state) {
		        H.Point.prototype.setState.call(this, state);

		        // Graphic does not exist when point is not visible.
		        if (this.graphic) {
		            this.graphic.attr({
		                zIndex: state === 'hover' ? 1 : 0
		            });
		        }
		    },
		    setVisible: seriesTypes.pie.prototype.pointClass.prototype.setVisible
		});


		/**
		 * A `treemap` series. If the [type](#series.treemap.type) option is
		 * not specified, it is inherited from [chart.type](#chart.type).
		 *
		 * @extends   series,plotOptions.treemap
		 * @excluding dataParser, dataURL, stack
		 * @product   highcharts
		 * @apioption series.treemap
		 */

		/**
		 * An array of data points for the series. For the `treemap` series
		 * type, points can be given in the following ways:
		 *
		 * 1.  An array of numerical values. In this case, the numerical values
		 * will be interpreted as `value` options. Example:
		 *
		 *  ```js
		 *  data: [0, 5, 3, 5]
		 *  ```
		 *
		 * 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.treemap.turboThreshold),
		 * this option is not available.
		 *
		 *  ```js
		 *     data: [{
		 *         value: 9,
		 *         name: "Point2",
		 *         color: "#00FF00"
		 *     }, {
		 *         value: 6,
		 *         name: "Point1",
		 *         color: "#FF00FF"
		 *     }]
		 *  ```
		 *
		 * @sample {highcharts} highcharts/chart/reflow-true/
		 *         Numerical values
		 * @sample {highcharts} highcharts/series/data-array-of-objects/
		 *         Config objects
		 *
		 * @type      {Array<number|*>}
		 * @extends   series.heatmap.data
		 * @excluding x, y
		 * @product   highcharts
		 * @apioption series.treemap.data
		 */

		/**
		 * The value of the point, resulting in a relative area of the point
		 * in the treemap.
		 *
		 * @type      {number}
		 * @product   highcharts
		 * @apioption series.treemap.data.value
		 */

		/**
		 * Serves a purpose only if a `colorAxis` object is defined in the chart
		 * options. This value will decide which color the point gets from the
		 * scale of the colorAxis.
		 *
		 * @type      {number}
		 * @since     4.1.0
		 * @product   highcharts
		 * @apioption series.treemap.data.colorValue
		 */

		/**
		 * Only for treemap. Use this option to build a tree structure. The
		 * value should be the id of the point which is the parent. If no points
		 * has a matching id, or this option is undefined, then the parent will
		 * be set to the root.
		 *
		 * @sample {highcharts} highcharts/point/parent/
		 *         Point parent
		 * @sample {highcharts} highcharts/demo/treemap-with-levels/
		 *         Example where parent id is not matching
		 *
		 * @type      {string}
		 * @since     4.1.0
		 * @product   highcharts
		 * @apioption series.treemap.data.parent
		 */

	}(Highcharts, result));
	(function (H, drawPoint, mixinTreeSeries) {
		/* *
		 *
		 *  This module implements sunburst charts in Highcharts.
		 *
		 *  (c) 2016-2018 Highsoft AS
		 *
		 *  Authors: Jon Arild Nygard
		 *
		 *  License: www.highcharts.com/license
		 *
		 * */



		var CenteredSeriesMixin = H.CenteredSeriesMixin,
		    Series = H.Series,
		    extend = H.extend,
		    getCenter = CenteredSeriesMixin.getCenter,
		    getColor = mixinTreeSeries.getColor,
		    getLevelOptions = mixinTreeSeries.getLevelOptions,
		    getStartAndEndRadians = CenteredSeriesMixin.getStartAndEndRadians,
		    isBoolean = function (x) {
		        return typeof x === 'boolean';
		    },
		    isNumber = H.isNumber,
		    isObject = H.isObject,
		    isString = H.isString,
		    merge = H.merge,
		    noop = H.noop,
		    rad2deg = 180 / Math.PI,
		    seriesType = H.seriesType,
		    seriesTypes = H.seriesTypes,
		    setTreeValues = mixinTreeSeries.setTreeValues,
		    updateRootId = mixinTreeSeries.updateRootId;

		// TODO introduce step, which should default to 1.
		var range = function range(from, to) {
		    var result = [],
		        i;
		    if (isNumber(from) && isNumber(to) && from <= to) {
		        for (i = from; i <= to; i++) {
		            result.push(i);
		        }
		    }
		    return result;
		};

		/**
		 * @private
		 * @function calculateLevelSizes
		 *
		 * @param {object} levelOptions
		 *        Map of level to its options.
		 *
		 * @param {object} params
		 *        Object containing number parameters `innerRadius` and `outerRadius`.
		 */
		var calculateLevelSizes = function calculateLevelSizes(levelOptions, params) {
		    var result,
		        p = isObject(params) ? params : {},
		        totalWeight = 0,
		        diffRadius,
		        levels,
		        levelsNotIncluded,
		        remainingSize,
		        from,
		        to;

		    if (isObject(levelOptions)) {
		        result = merge({}, levelOptions); // Copy levelOptions
		        from = isNumber(p.from) ? p.from : 0;
		        to = isNumber(p.to) ? p.to : 0;
		        levels = range(from, to);
		        levelsNotIncluded = Object.keys(result).filter(function (k) {
		            return levels.indexOf(+k) === -1;
		        });
		        diffRadius = remainingSize = isNumber(p.diffRadius) ? p.diffRadius : 0;

		        // Convert percentage to pixels.
		        // Calculate the remaining size to divide between "weight" levels.
		        // Calculate total weight to use in convertion from weight to pixels.
		        levels.forEach(function (level) {
		            var options = result[level],
		                unit = options.levelSize.unit,
		                value = options.levelSize.value;
		            if (unit === 'weight') {
		                totalWeight += value;
		            } else if (unit === 'percentage') {
		                options.levelSize = {
		                    unit: 'pixels',
		                    value: (value / 100) * diffRadius
		                };
		                remainingSize -= options.levelSize.value;
		            } else if (unit === 'pixels') {
		                remainingSize -= value;
		            }
		        });

		        // Convert weight to pixels.
		        levels.forEach(function (level) {
		            var options = result[level],
		                weight;
		            if (options.levelSize.unit === 'weight') {
		                weight = options.levelSize.value;
		                result[level].levelSize = {
		                    unit: 'pixels',
		                    value: (weight / totalWeight) * remainingSize
		                };
		            }
		        });

		        // Set all levels not included in interval [from,to] to have 0 pixels.
		        levelsNotIncluded.forEach(function (level) {
		            result[level].levelSize = {
		                value: 0,
		                unit: 'pixels'
		            };
		        });
		    }
		    return result;
		};

		/**
		 * Find a set of coordinates given a start coordinates, an angle, and a
		 * distance.
		 *
		 * @private
		 * @function getEndPoint
		 *
		 * @param {number} x
		 *        Start coordinate x
		 *
		 * @param {number} y
		 *        Start coordinate y
		 *
		 * @param {number} angle
		 *        Angle in radians
		 *
		 * @param {number} distance
		 *        Distance from start to end coordinates
		 *
		 * @return {Highcharts.SVGAttributes}
		 *         Returns the end coordinates, x and y.
		 */
		var getEndPoint = function getEndPoint(x, y, angle, distance) {
		    return {
		        x: x + (Math.cos(angle) * distance),
		        y: y + (Math.sin(angle) * distance)
		    };
		};

		var layoutAlgorithm = function layoutAlgorithm(parent, children, options) {
		    var startAngle = parent.start,
		        range = parent.end - startAngle,
		        total = parent.val,
		        x = parent.x,
		        y = parent.y,
		        radius = (
		            (
		                options &&
		                isObject(options.levelSize) &&
		                isNumber(options.levelSize.value)
		            ) ?
		            options.levelSize.value :
		            0
		        ),
		        innerRadius = parent.r,
		        outerRadius = innerRadius + radius,
		        slicedOffset = options && isNumber(options.slicedOffset) ?
		            options.slicedOffset :
		            0;

		    return (children || []).reduce(function (arr, child) {
		        var percentage = (1 / total) * child.val,
		            radians = percentage * range,
		            radiansCenter = startAngle + (radians / 2),
		            offsetPosition = getEndPoint(x, y, radiansCenter, slicedOffset),
		            values = {
		                x: child.sliced ? offsetPosition.x : x,
		                y: child.sliced ? offsetPosition.y : y,
		                innerR: innerRadius,
		                r: outerRadius,
		                radius: radius,
		                start: startAngle,
		                end: startAngle + radians
		            };
		        arr.push(values);
		        startAngle = values.end;
		        return arr;
		    }, []);
		};

		var getDlOptions = function getDlOptions(params) {
		    // Set options to new object to avoid problems with scope
		    var point = params.point,
		        shape = isObject(params.shapeArgs) ? params.shapeArgs : {},
		        optionsPoint = (
		            isObject(params.optionsPoint) ?
		            params.optionsPoint.dataLabels :
		            {}
		        ),
		        optionsLevel = (
		            isObject(params.level) ?
		            params.level.dataLabels :
		            {}
		        ),
		        options = merge({
		            style: {}
		        }, optionsLevel, optionsPoint),
		        rotationRad,
		        rotation,
		        rotationMode = options.rotationMode;

		    if (!isNumber(options.rotation)) {
		        if (rotationMode === 'auto') {
		            if (
		                point.innerArcLength < 1 &&
		                point.outerArcLength > shape.radius
		            ) {
		                rotationRad = 0;
		            } else if (
		                point.innerArcLength > 1 &&
		                point.outerArcLength > 1.5 * shape.radius
		            ) {
		                rotationMode = 'parallel';
		            } else {
		                rotationMode = 'perpendicular';
		            }
		        }

		        if (rotationMode !== 'auto') {
		            rotationRad = (shape.end - (shape.end - shape.start) / 2);
		        }

		        if (rotationMode === 'parallel') {
		            options.style.width = Math.min(
		                shape.radius * 2.5,
		                (point.outerArcLength + point.innerArcLength) / 2
		            );
		        } else {
		            options.style.width = shape.radius;
		        }

		        if (
		            rotationMode === 'perpendicular' &&
		            point.series.chart.renderer.fontMetrics(options.style.fontSize).h >
		            point.outerArcLength
		        ) {
		            options.style.width = 1;
		        }

		        // Apply padding (#8515)
		        options.style.width = Math.max(
		            options.style.width - 2 * (options.padding || 0),
		            1
		        );

		        rotation = (rotationRad * rad2deg) % 180;
		        if (rotationMode === 'parallel') {
		            rotation -= 90;
		        }

		        // Prevent text from rotating upside down
		        if (rotation > 90) {
		            rotation -= 180;
		        } else if (rotation < -90) {
		            rotation += 180;
		        }

		        options.rotation = rotation;
		    }
		    // NOTE: alignDataLabel positions the data label differntly when rotation is
		    // 0. Avoiding this by setting rotation to a small number.
		    if (options.rotation === 0) {
		        options.rotation = 0.001;
		    }
		    return options;
		};

		var getAnimation = function getAnimation(shape, params) {
		    var point = params.point,
		        radians = params.radians,
		        innerR = params.innerR,
		        idRoot = params.idRoot,
		        idPreviousRoot = params.idPreviousRoot,
		        shapeExisting = params.shapeExisting,
		        shapeRoot = params.shapeRoot,
		        shapePreviousRoot = params.shapePreviousRoot,
		        visible = params.visible,
		        from = {},
		        to = {
		            end: shape.end,
		            start: shape.start,
		            innerR: shape.innerR,
		            r: shape.r,
		            x: shape.x,
		            y: shape.y
		        };
		    if (visible) {
		        // Animate points in
		        if (!point.graphic && shapePreviousRoot) {
		            if (idRoot === point.id) {
		                from = {
		                    start: radians.start,
		                    end: radians.end
		                };
		            } else {
		                from = (shapePreviousRoot.end <= shape.start) ? {
		                    start: radians.end,
		                    end: radians.end
		                } : {
		                    start: radians.start,
		                    end: radians.start
		                };
		            }
		            // Animate from center and outwards.
		            from.innerR = from.r = innerR;
		        }
		    } else {
		        // Animate points out
		        if (point.graphic) {
		            if (idPreviousRoot === point.id) {
		                to = {
		                    innerR: innerR,
		                    r: innerR
		                };
		            } else if (shapeRoot) {
		                to = (shapeRoot.end <= shapeExisting.start) ?
		                {
		                    innerR: innerR,
		                    r: innerR,
		                    start: radians.end,
		                    end: radians.end
		                } : {
		                    innerR: innerR,
		                    r: innerR,
		                    start: radians.start,
		                    end: radians.start
		                };
		            }
		        }
		    }
		    return {
		        from: from,
		        to: to
		    };
		};

		var getDrillId = function getDrillId(point, idRoot, mapIdToNode) {
		    var drillId,
		        node = point.node,
		        nodeRoot;
		    if (!node.isLeaf) {
		        // When it is the root node, the drillId should be set to parent.
		        if (idRoot === point.id) {
		            nodeRoot = mapIdToNode[idRoot];
		            drillId = nodeRoot.parent;
		        } else {
		            drillId = point.id;
		        }
		    }
		    return drillId;
		};

		var cbSetTreeValuesBefore = function before(node, options) {
		    var mapIdToNode = options.mapIdToNode,
		        nodeParent = mapIdToNode[node.parent],
		        series = options.series,
		        chart = series.chart,
		        points = series.points,
		        point = points[node.i],
		        colorInfo = getColor(node, {
		            colors: chart && chart.options && chart.options.colors,
		            colorIndex: series.colorIndex,
		            index: options.index,
		            mapOptionsToLevel: options.mapOptionsToLevel,
		            parentColor: nodeParent && nodeParent.color,
		            parentColorIndex: nodeParent && nodeParent.colorIndex,
		            series: options.series,
		            siblings: options.siblings
		        });
		    node.color = colorInfo.color;
		    node.colorIndex = colorInfo.colorIndex;
		    if (point) {
		        point.color = node.color;
		        point.colorIndex = node.colorIndex;
		        // Set slicing on node, but avoid slicing the top node.
		        node.sliced = (node.id !== options.idRoot) ? point.sliced : false;
		    }
		    return node;
		};

		/**
		 * A Sunburst displays hierarchical data, where a level in the hierarchy is
		 * represented by a circle. The center represents the root node of the tree.
		 * The visualization bears a resemblance to both treemap and pie charts.
		 *
		 * @sample highcharts/demo/sunburst
		 *         Sunburst chart
		 *
		 * @extends      plotOptions.pie
		 * @excluding    allAreas, clip, colorAxis, compare, compareBase, dataGrouping,
		 *               depth, endAngle, gapSize, gapUnit, ignoreHiddenPoint,
		 *               innerSize, joinBy, legendType, linecap, minSize,
		 *               navigatorOptions, pointRange
		 * @product      highcharts
		 * @optionparent plotOptions.sunburst
		 */
		var sunburstOptions = {

		    /**
		     * Set options on specific levels. Takes precedence over series options,
		     * but not point options.
		     *
		     * @sample highcharts/demo/sunburst
		     *         Sunburst chart
		     *
		     * @type      {Array<*>}
		     * @apioption plotOptions.sunburst.levels
		     */

		    /**
		     * Can set a `borderColor` on all points which lies on the same level.
		     *
		     * @type      {Highcharts.ColorString}
		     * @apioption plotOptions.sunburst.levels.borderColor
		     */

		    /**
		     * Can set a `borderWidth` on all points which lies on the same level.
		     *
		     * @type      {number}
		     * @apioption plotOptions.sunburst.levels.borderWidth
		     */

		    /**
		     * Can set a `borderDashStyle` on all points which lies on the same level.
		     *
		     * @type      {string}
		     * @apioption plotOptions.sunburst.levels.borderDashStyle
		     */

		    /**
		     * Can set a `color` on all points which lies on the same level.
		     *
		     * @type      {Highcharts.ColorString}
		     * @apioption plotOptions.sunburst.levels.color
		     */

		    /**
		     * Can set a `colorVariation` on all points which lies on the same level.
		     *
		     * @apioption plotOptions.sunburst.levels.colorVariation
		     */

		    /**
		     * The key of a color variation. Currently supports `brightness` only.
		     *
		     * @type      {string}
		     * @apioption plotOptions.sunburst.levels.colorVariation.key
		     */

		    /**
		     * The ending value of a color variation. The last sibling will receive this
		     * value.
		     *
		     * @type      {number}
		     * @apioption plotOptions.sunburst.levels.colorVariation.to
		     */

		    /**
		     * Can set `dataLabels` on all points which lies on the same level.
		     *
		     * @type      {object}
		     * @apioption plotOptions.sunburst.levels.dataLabels
		     */

		    /**
		     * Can set a `levelSize` on all points which lies on the same level.
		     *
		     * @type      {object}
		     * @apioption plotOptions.sunburst.levels.levelSize
		     */

		    /**
		     * Can set a `rotation` on all points which lies on the same level.
		     *
		     * @type      {number}
		     * @apioption plotOptions.sunburst.levels.rotation
		     */

		    /**
		     * Can set a `rotationMode` on all points which lies on the same level.
		     *
		     * @type      {string}
		     * @apioption plotOptions.sunburst.levels.rotationMode
		     */

		    /**
		     * When enabled the user can click on a point which is a parent and
		     * zoom in on its children.
		     *
		     * @sample highcharts/demo/sunburst
		     *         Allow drill to node
		     *
		     * @type      {boolean}
		     * @default   false
		     * @apioption plotOptions.sunburst.allowDrillToNode
		     */

		    /**
		     * The center of the sunburst chart relative to the plot area. Can be
		     * percentages or pixel values.
		     *
		     * @sample {highcharts} highcharts/plotoptions/pie-center/
		     *         Centered at 100, 100
		     *
		     * @type    {Array<number|string>}
		     * @default ["50%", "50%"]
		     * @product highcharts
		     */
		    center: ['50%', '50%'],
		    colorByPoint: false,
		    /**
		     * @extends   plotOptions.series.dataLabels
		     * @excluding align, allowOverlap, distance, staggerLines, step
		     */
		    dataLabels: {
		        allowOverlap: true,
		        defer: true,
		        style: {
		            textOverflow: 'ellipsis'
		        },
		        /**
		         * Decides how the data label will be rotated relative to the perimeter
		         * of the sunburst. Valid values are `auto`, `parallel` and
		         * `perpendicular`. When `auto`, the best fit will be computed for the
		         * point.
		         *
		         * The `series.rotation` option takes precedence over `rotationMode`.
		         *
		         * @since      6.0.0
		         * @validvalue ["auto", "perpendicular", "parallel"]
		         */
		        rotationMode: 'auto'
		    },
		    /**
		     * Which point to use as a root in the visualization.
		     *
		     * @type {string}
		     */
		    rootId: undefined,

		    /**
		     * Used together with the levels and `allowDrillToNode` options. When
		     * set to false the first level visible when drilling is considered
		     * to be level one. Otherwise the level will be the same as the tree
		     * structure.
		     */
		    levelIsConstant: true,

		    /**
		     * Determines the width of the ring per level.
		     *
		     * @sample {highcharts} highcharts/plotoptions/sunburst-levelsize/
		     *         Sunburst with various sizes per level
		     *
		     * @since 6.0.5
		     */
		    levelSize: {
		        /**
		         * The value used for calculating the width of the ring. Its' affect is
		         * determined by `levelSize.unit`.
		         *
		         * @sample {highcharts} highcharts/plotoptions/sunburst-levelsize/
		         *         Sunburst with various sizes per level
		         */
		        value: 1,
		        /**
		         * How to interpret `levelSize.value`.
		         *
		         * - `percentage` gives a width relative to result of outer radius minus
		         *   inner radius.
		         *
		         * - `pixels` gives the ring a fixed width in pixels.
		         *
		         * - `weight` takes the remaining width after percentage and pixels, and
		         *   distributes it accross all "weighted" levels. The value relative to
		         *   the sum of all weights determines the width.
		         *
		         * @sample {highcharts} highcharts/plotoptions/sunburst-levelsize/
		         *         Sunburst with various sizes per level
		         *
		         * @validvalue ["percentage", "pixels", "weight"]
		         */
		        unit: 'weight'
		    },
		    /**
		     * If a point is sliced, moved out from the center, how many pixels
		     * should it be moved?.
		     *
		     * @sample highcharts/plotoptions/sunburst-sliced
		     *         Sliced sunburst
		     *
		     * @since 6.0.4
		     */
		    slicedOffset: 10
		};

		// Properties of the Sunburst series.
		var sunburstSeries = {
		    drawDataLabels: noop, // drawDataLabels is called in drawPoints
		    drawPoints: function drawPoints() {
		        var series = this,
		            mapOptionsToLevel = series.mapOptionsToLevel,
		            shapeRoot = series.shapeRoot,
		            group = series.group,
		            hasRendered = series.hasRendered,
		            idRoot = series.rootNode,
		            idPreviousRoot = series.idPreviousRoot,
		            nodeMap = series.nodeMap,
		            nodePreviousRoot = nodeMap[idPreviousRoot],
		            shapePreviousRoot = nodePreviousRoot && nodePreviousRoot.shapeArgs,
		            points = series.points,
		            radians = series.startAndEndRadians,
		            chart = series.chart,
		            optionsChart = chart && chart.options && chart.options.chart || {},
		            animation = (
		                isBoolean(optionsChart.animation) ?
		                optionsChart.animation :
		                true
		            ),
		            positions = series.center,
		            center = {
		                x: positions[0],
		                y: positions[1]
		            },
		            innerR = positions[3] / 2,
		            renderer = series.chart.renderer,
		            animateLabels,
		            animateLabelsCalled = false,
		            addedHack = false,
		            hackDataLabelAnimation = !!(
		                animation &&
		                hasRendered &&
		                idRoot !== idPreviousRoot &&
		                series.dataLabelsGroup
		            );

		        if (hackDataLabelAnimation) {
		            series.dataLabelsGroup.attr({ opacity: 0 });
		            animateLabels = function () {
		                var s = series;
		                animateLabelsCalled = true;
		                if (s.dataLabelsGroup) {
		                    s.dataLabelsGroup.animate({
		                        opacity: 1,
		                        visibility: 'visible'
		                    });
		                }
		            };
		        }
		        points.forEach(function (point) {
		            var node = point.node,
		                level = mapOptionsToLevel[node.level],
		                shapeExisting = point.shapeExisting || {},
		                shape = node.shapeArgs || {},
		                animationInfo,
		                onComplete,
		                visible = !!(node.visible && node.shapeArgs);
		            if (hasRendered && animation) {
		                animationInfo = getAnimation(shape, {
		                    center: center,
		                    point: point,
		                    radians: radians,
		                    innerR: innerR,
		                    idRoot: idRoot,
		                    idPreviousRoot: idPreviousRoot,
		                    shapeExisting: shapeExisting,
		                    shapeRoot: shapeRoot,
		                    shapePreviousRoot: shapePreviousRoot,
		                    visible: visible
		                });
		            } else {
		                // When animation is disabled, attr is called from animation.
		                animationInfo = {
		                    to: shape,
		                    from: {}
		                };
		            }
		            extend(point, {
		                shapeExisting: shape, // Store for use in animation
		                tooltipPos: [shape.plotX, shape.plotY],
		                drillId: getDrillId(point, idRoot, nodeMap),
		                name: '' + (point.name || point.id || point.index),
		                plotX: shape.plotX, // used for data label position
		                plotY: shape.plotY, // used for data label position
		                value: node.val,
		                isNull: !visible // used for dataLabels & point.draw
		            });
		            point.dlOptions = getDlOptions({
		                point: point,
		                level: level,
		                optionsPoint: point.options,
		                shapeArgs: shape
		            });
		            if (!addedHack && visible) {
		                addedHack = true;
		                onComplete = animateLabels;
		            }
		            point.draw({
		                animatableAttribs: animationInfo.to,
		                attribs: extend(
		                    animationInfo.from,
		                    !chart.styledMode && series.pointAttribs(
		                        point,
		                        point.selected && 'select'
		                    )
		                ),
		                onComplete: onComplete,
		                group: group,
		                renderer: renderer,
		                shapeType: 'arc',
		                shapeArgs: shape
		            });
		        });
		        // Draw data labels after points
		        // TODO draw labels one by one to avoid addtional looping
		        if (hackDataLabelAnimation && addedHack) {
		            series.hasRendered = false;
		            series.options.dataLabels.defer = true;
		            Series.prototype.drawDataLabels.call(series);
		            series.hasRendered = true;
		            // If animateLabels is called before labels were hidden, then call
		            // it again.
		            if (animateLabelsCalled) {
		                animateLabels();
		            }
		        } else {
		            Series.prototype.drawDataLabels.call(series);
		        }
		    },

		    pointAttribs: seriesTypes.column.prototype.pointAttribs,

		    // The layout algorithm for the levels
		    layoutAlgorithm: layoutAlgorithm,

		    // Set the shape arguments on the nodes. Recursive from root down.
		    setShapeArgs: function (parent, parentValues, mapOptionsToLevel) {
		        var childrenValues = [],
		            level = parent.level + 1,
		            options = mapOptionsToLevel[level],
		            // Collect all children which should be included
		            children = parent.children.filter(function (n) {
		                return n.visible;
		            }),
		            twoPi = 6.28; // Two times Pi.
		        childrenValues = this.layoutAlgorithm(parentValues, children, options);
		        children.forEach(function (child, index) {
		            var values = childrenValues[index],
		                angle = values.start + ((values.end - values.start) / 2),
		                radius = values.innerR + ((values.r - values.innerR) / 2),
		                radians = (values.end - values.start),
		                isCircle = (values.innerR === 0 && radians > twoPi),
		                center = (
		                    isCircle ?
		                    { x: values.x, y: values.y } :
		                    getEndPoint(values.x, values.y, angle, radius)
		                ),
		                val = (
		                    child.val ?
		                    (
		                        child.childrenTotal > child.val ?
		                        child.childrenTotal :
		                        child.val
		                    ) :
		                    child.childrenTotal
		                );
		            // The inner arc length is a convenience for data label filters.
		            if (this.points[child.i]) {
		                this.points[child.i].innerArcLength = radians * values.innerR;
		                this.points[child.i].outerArcLength = radians * values.r;
		            }

		            child.shapeArgs = merge(values, {
		                plotX: center.x,
		                plotY: center.y + 4 * Math.abs(Math.cos(angle))
		            });
		            child.values = merge(values, {
		                val: val
		            });
		            // If node has children, then call method recursively
		            if (child.children.length) {
		                this.setShapeArgs(child, child.values, mapOptionsToLevel);
		            }
		        }, this);
		    },


		    translate: function translate() {
		        var series = this,
		            options = series.options,
		            positions = series.center = getCenter.call(series),
		            radians = series.startAndEndRadians = getStartAndEndRadians(
		                options.startAngle,
		                options.endAngle
		            ),
		            innerRadius = positions[3] / 2,
		            outerRadius = positions[2] / 2,
		            diffRadius = outerRadius - innerRadius,
		            // NOTE: updateRootId modifies series.
		            rootId = updateRootId(series),
		            mapIdToNode = series.nodeMap,
		            mapOptionsToLevel,
		            idTop,
		            nodeRoot = mapIdToNode && mapIdToNode[rootId],
		            nodeTop,
		            tree,
		            values;
		        series.shapeRoot = nodeRoot && nodeRoot.shapeArgs;
		        // Call prototype function
		        Series.prototype.translate.call(series);
		        // @todo Only if series.isDirtyData is true
		        tree = series.tree = series.getTree();
		        mapIdToNode = series.nodeMap;
		        nodeRoot = mapIdToNode[rootId];
		        idTop = isString(nodeRoot.parent) ? nodeRoot.parent : '';
		        nodeTop = mapIdToNode[idTop];
		        mapOptionsToLevel = getLevelOptions({
		            from: nodeRoot.level > 0 ? nodeRoot.level : 1,
		            levels: series.options.levels,
		            to: tree.height,
		            defaults: {
		                colorByPoint: options.colorByPoint,
		                dataLabels: options.dataLabels,
		                levelIsConstant: options.levelIsConstant,
		                levelSize: options.levelSize,
		                slicedOffset: options.slicedOffset
		            }
		        });
		        // NOTE consider doing calculateLevelSizes in a callback to
		        // getLevelOptions
		        mapOptionsToLevel = calculateLevelSizes(mapOptionsToLevel, {
		            diffRadius: diffRadius,
		            from: nodeRoot.level > 0 ? nodeRoot.level : 1,
		            to: tree.height
		        });
		        // TODO Try to combine setTreeValues & setColorRecursive to avoid
		        //  unnecessary looping.
		        setTreeValues(tree, {
		            before: cbSetTreeValuesBefore,
		            idRoot: rootId,
		            levelIsConstant: options.levelIsConstant,
		            mapOptionsToLevel: mapOptionsToLevel,
		            mapIdToNode: mapIdToNode,
		            points: series.points,
		            series: series
		        });
		        values = mapIdToNode[''].shapeArgs = {
		            end: radians.end,
		            r: innerRadius,
		            start: radians.start,
		            val: nodeRoot.val,
		            x: positions[0],
		            y: positions[1]
		        };
		        this.setShapeArgs(nodeTop, values, mapOptionsToLevel);
		        // Set mapOptionsToLevel on series for use in drawPoints.
		        series.mapOptionsToLevel = mapOptionsToLevel;
		    },

		    // Animate the slices in. Similar to the animation of polar charts.
		    animate: function (init) {
		        var chart = this.chart,
		            center = [
		                chart.plotWidth / 2,
		                chart.plotHeight / 2
		            ],
		            plotLeft = chart.plotLeft,
		            plotTop = chart.plotTop,
		            attribs,
		            group = this.group;

		        // Initialize the animation
		        if (init) {

		            // Scale down the group and place it in the center
		            attribs = {
		                translateX: center[0] + plotLeft,
		                translateY: center[1] + plotTop,
		                scaleX: 0.001, // #1499
		                scaleY: 0.001,
		                rotation: 10,
		                opacity: 0.01
		            };

		            group.attr(attribs);

		        // Run the animation
		        } else {
		            attribs = {
		                translateX: plotLeft,
		                translateY: plotTop,
		                scaleX: 1,
		                scaleY: 1,
		                rotation: 0,
		                opacity: 1
		            };
		            group.animate(attribs, this.options.animation);

		            // Delete this function to allow it only once
		            this.animate = null;
		        }
		    },
		    utils: {
		        calculateLevelSizes: calculateLevelSizes,
		        range: range
		    }
		};

		// Properties of the Sunburst series.
		var sunburstPoint = {
		    draw: drawPoint,
		    shouldDraw: function shouldDraw() {
		        var point = this;
		        return !point.isNull;
		    }
		};

		/**
		 * A `sunburst` series. If the [type](#series.sunburst.type) option is
		 * not specified, it is inherited from [chart.type](#chart.type).
		 *
		 * @extends   series,plotOptions.sunburst
		 * @excluding dataParser, dataURL, stack
		 * @product   highcharts
		 * @apioption series.sunburst
		 */

		/**
		 * @type      {Array<number|*>}
		 * @extends   series.treemap.data
		 * @excluding x, y
		 * @product   highcharts
		 * @apioption series.sunburst.data
		 */

		/**
		 * The value of the point, resulting in a relative area of the point
		 * in the sunburst.
		 *
		 * @type      {number}
		 * @since     6.0.0
		 * @product   highcharts
		 * @apioption series.sunburst.data.value
		 */

		/**
		 * Use this option to build a tree structure. The value should be the id of the
		 * point which is the parent. If no points has a matching id, or this option is
		 * undefined, then the parent will be set to the root.
		 *
		 * @type      {string}
		 * @since     6.0.0
		 * @product   highcharts
		 * @apioption series.treemap.data.parent
		 */

		 /**
		  * Whether to display a slice offset from the center. When a sunburst point is
		  * sliced, its children are also offset.
		  *
		  * @sample highcharts/plotoptions/sunburst-sliced
		  *         Sliced sunburst
		  *
		  * @type      {boolean}
		  * @default   false
		  * @since     6.0.4
		  * @product   highcharts
		  * @apioption series.sunburst.data.sliced
		  */

		/**
		 * @private
		 * @class
		 * @name Highcharts.seriesTypes.sunburst
		 *
		 * @augments Highcharts.Series
		 */
		seriesType(
		    'sunburst',
		    'treemap',
		    sunburstOptions,
		    sunburstSeries,
		    sunburstPoint
		);

	}(Highcharts, draw, result));
	(function (H) {
		/* *
		 * Variable Pie module for Highcharts
		 *
		 * (c) 2010-2017 Grzegorz Blachliński
		 *
		 * License: www.highcharts.com/license
		 */



		var pick = H.pick,
		    arrayMin = H.arrayMin,
		    arrayMax = H.arrayMax,
		    seriesType = H.seriesType,
		    pieProto = H.seriesTypes.pie.prototype;

		/**
		 * The variablepie series type.
		 *
		 * @private
		 * @class
		 * @name Highcharts.seriesTypes.variablepie
		 *
		 * @augments Highcharts.Series
		 */
		seriesType('variablepie', 'pie',
		    /**
		     * A variable pie series is a two dimensional series type, where each point
		     * renders an Y and Z value.  Each point is drawn as a pie slice where the
		     * size (arc) of the slice relates to the Y value and the radius of pie
		     * slice relates to the Z value. Requires `highcharts-more.js`.
		     *
		     * @sample {highcharts} highcharts/demo/variable-radius-pie/
		     *         Variable-radius pie chart
		     *
		     * @extends      plotOptions.pie
		     * @since        6.0.0
		     * @product      highcharts
		     * @optionparent plotOptions.variablepie
		     */
		    {
		        /**
		         * The minimum size of the points' radius related to chart's `plotArea`.
		         * If a number is set, it applies in pixels.
		         *
		         * @sample {highcharts} highcharts/variable-radius-pie/min-max-point-size/
		         *         Example of minPointSize and maxPointSize
		         * @sample {highcharts} highcharts/variable-radius-pie/min-point-size-100/
		         *         minPointSize set to 100
		         *
		         * @type  {number|string}
		         * @since 6.0.0
		         */
		        minPointSize: '10%',
		        /**
		         * The maximum size of the points' radius related to chart's `plotArea`.
		         * If a number is set, it applies in pixels.
		         *
		         * @sample {highcharts} highcharts/variable-radius-pie/min-max-point-size/
		         *         Example of minPointSize and maxPointSize
		         *
		         * @type  {number|string}
		         * @since 6.0.0
		         */
		        maxPointSize: '100%',
		        /**
		         * The minimum possible z value for the point's radius calculation. If
		         * the point's Z value is smaller than zMin, the slice will be drawn
		         * according to the zMin value.
		         *
		         * @sample {highcharts} highcharts/variable-radius-pie/zmin-5/
		         *         zMin set to 5, smaller z values are treated as 5
		         * @sample {highcharts} highcharts/variable-radius-pie/zmin-zmax/
		         *         Series limited by both zMin and zMax
		         *
		         * @type  {number}
		         * @since 6.0.0
		         */
		        zMin: undefined,
		        /**
		         * The maximum possible z value for the point's radius calculation. If
		         * the point's Z value is bigger than zMax, the slice will be drawn
		         * according to the zMax value
		         *
		         * @sample {highcharts} highcharts/variable-radius-pie/zmin-zmax/
		         *         Series limited by both zMin and zMax
		         *
		         * @type  {number}
		         * @since 6.0.0
		         */
		        zMax: undefined,
		        /**
		         * Whether the pie slice's value should be represented by the area or
		         * the radius of the slice. Can be either `area` or `radius`. The
		         * default, `area`, corresponds best to the human perception of the size
		         * of each pie slice.
		         *
		         * @sample {highcharts} highcharts/variable-radius-pie/sizeby/
		         *         Difference between area and radius sizeBy
		         *
		         * @since      6.0.0
		         * @validvalue ["area", "radius"]
		         */
		        sizeBy: 'area',

		        tooltip: {
		            pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}<br/>Value: {point.y}<br/>Size: {point.z}<br/>'
		        }
		    }, {
		        pointArrayMap: ['y', 'z'],
		        parallelArrays: ['x', 'y', 'z'],

		        // It is needed to null series.center on chart redraw. Probably good
		        // idea will be to add this option in directly in pie series.
		        redraw: function () {
		            this.center = null;
		            pieProto.redraw.call(this, arguments);
		        },

		        // For arrayMin and arrayMax calculations array shouldn't have
		        // null/undefined/string values. In this case it is needed to check if
		        // points Z value is a Number.
		        zValEval: function (zVal) {
		            if (typeof zVal === 'number' && !isNaN(zVal)) {
		                return true;
		            }
		            return null;
		        },

		        // Before standard translate method for pie chart it is needed to
		        // calculate min/max radius of each pie slice based on its Z value.
		        calculateExtremes: function () {
		            var series = this,
		                chart = series.chart,
		                plotWidth = chart.plotWidth,
		                plotHeight = chart.plotHeight,
		                seriesOptions = series.options,
		                slicingRoom = 2 * (seriesOptions.slicedOffset || 0),
		                zMin,
		                zMax,
		                zData = series.zData,
		                smallestSize = Math.min(plotWidth, plotHeight) - slicingRoom,
		                extremes = {}, // Min and max size of pie slice.
		                // In pie charts size of a pie is changed to make space for
		                // dataLabels, then series.center is changing.
		                positions = series.center || series.getCenter();

		            ['minPointSize', 'maxPointSize'].forEach(function (prop) {
		                var length = seriesOptions[prop],
		                    isPercent = /%$/.test(length);
		                length = parseInt(length, 10);
		                extremes[prop] = isPercent ?
		                    smallestSize * length / 100 :
		                    length * 2; // Because it should be radius, not diameter.
		            });

		            series.minPxSize = positions[3] + extremes.minPointSize;
		            series.maxPxSize = Math.max(
		                Math.min(positions[2], extremes.maxPointSize),
		                positions[3] + extremes.minPointSize
		            );

		            if (zData.length) {
		                zMin = pick(
		                    seriesOptions.zMin,
		                    arrayMin(zData.filter(series.zValEval))
		                );
		                zMax = pick(
		                    seriesOptions.zMax,
		                    arrayMax(zData.filter(series.zValEval))
		                );
		                this.getRadii(zMin, zMax, series.minPxSize, series.maxPxSize);
		            }
		        },

		        /**
		         * Finding radius of series points based on their Z value and min/max Z
		         * value for all series.
		         *
		         * @private
		         * @function Highcharts.Series#getRadii
		         *
		         * @param {number} zMin
		         *        Min threshold for Z value. If point's Z value is smaller that
		         *        zMin, point will have the smallest possible radius.
		         *
		         * @param {number} zMax
		         *        Max threshold for Z value. If point's Z value is bigger that
		         *        zMax, point will have the biggest possible radius.
		         *
		         * @param {number} minSize
		         *        Minimal pixel size possible for radius.
		         *
		         * @param {numbner} maxSize
		         *        Minimal pixel size possible for radius.
		         */
		        getRadii: function (zMin, zMax, minSize, maxSize) {
		            var i = 0,
		                pos,
		                zData = this.zData,
		                len = zData.length,
		                radii = [],
		                options = this.options,
		                sizeByArea = options.sizeBy !== 'radius',
		                zRange = zMax - zMin,
		                value,
		                radius;


		            // Calculate radius for all pie slice's based on their Z values
		            for (i; i < len; i++) {
		                // if zData[i] is null/undefined/string we need to take zMin for
		                // smallest radius.
		                value = this.zValEval(zData[i]) ? zData[i] : zMin;

		                if (value <= zMin) {
		                    radius = minSize / 2;
		                } else if (value >= zMax) {
		                    radius = maxSize / 2;
		                } else {
		                    // Relative size, a number between 0 and 1
		                    pos = zRange > 0 ? (value - zMin) / zRange : 0.5;

		                    if (sizeByArea) {
		                        pos = Math.sqrt(pos);
		                    }

		                    radius = Math.ceil(minSize + pos * (maxSize - minSize)) / 2;
		                }
		                radii.push(radius);
		            }
		            this.radii = radii;
		        },


		        // Extend translate by updating radius for each pie slice instead of
		        // using one global radius.
		        translate: function (positions) {

		            this.generatePoints();

		            var series = this,
		                cumulative = 0,
		                precision = 1000, // issue #172
		                options = series.options,
		                slicedOffset = options.slicedOffset,
		                connectorOffset = slicedOffset + (options.borderWidth || 0),
		                finalConnectorOffset,
		                start,
		                end,
		                angle,
		                startAngle = options.startAngle || 0,
		                startAngleRad = Math.PI / 180 * (startAngle - 90),
		                endAngleRad = Math.PI / 180 * (pick(
		                    options.endAngle,
		                    startAngle + 360) - 90),
		                circ = endAngleRad - startAngleRad, // 2 * Math.PI,
		                points = series.points,
		                // the x component of the radius vector for a given point
		                radiusX,
		                radiusY,
		                labelDistance = options.dataLabels.distance,
		                ignoreHiddenPoint = options.ignoreHiddenPoint,
		                i,
		                len = points.length,
		                point,
		                pointRadii,
		                pointRadiusX,
		                pointRadiusY;

		            series.startAngleRad = startAngleRad;
		            series.endAngleRad = endAngleRad;
		            // Use calculateExtremes to get series.radii array.
		            series.calculateExtremes();

		            // Get positions - either an integer or a percentage string must be
		            // given. If positions are passed as a parameter, we're in a
		            // recursive loop for adjusting space for data labels.
		            if (!positions) {
		                series.center = positions = series.getCenter();
		            }

		            // Calculate the geometry for each point
		            for (i = 0; i < len; i++) {

		                point = points[i];
		                pointRadii = series.radii[i];

		                // Used for distance calculation for specific point.
		                point.labelDistance = pick(
		                    point.options.dataLabels &&
		                    point.options.dataLabels.distance,
		                    labelDistance
		                );

		                // Saved for later dataLabels distance calculation.
		                series.maxLabelDistance = Math.max(
		                    series.maxLabelDistance || 0,
		                    point.labelDistance
		                );

		                // set start and end angle
		                start = startAngleRad + (cumulative * circ);
		                if (!ignoreHiddenPoint || point.visible) {
		                    cumulative += point.percentage / 100;
		                }
		                end = startAngleRad + (cumulative * circ);

		                // set the shape
		                point.shapeType = 'arc';
		                point.shapeArgs = {
		                    x: positions[0],
		                    y: positions[1],
		                    r: pointRadii,
		                    innerR: positions[3] / 2,
		                    start: Math.round(start * precision) / precision,
		                    end: Math.round(end * precision) / precision
		                };

		                // The angle must stay within -90 and 270 (#2645)
		                angle = (end + start) / 2;
		                if (angle > 1.5 * Math.PI) {
		                    angle -= 2 * Math.PI;
		                } else if (angle < -Math.PI / 2) {
		                    angle += 2 * Math.PI;
		                }

		                // Center for the sliced out slice
		                point.slicedTranslation = {
		                    translateX: Math.round(Math.cos(angle) * slicedOffset),
		                    translateY: Math.round(Math.sin(angle) * slicedOffset)
		                };

		                // set the anchor point for tooltips
		                radiusX = Math.cos(angle) * positions[2] / 2;
		                radiusY = Math.sin(angle) * positions[2] / 2;
		                pointRadiusX = Math.cos(angle) * pointRadii;
		                pointRadiusY = Math.sin(angle) * pointRadii;
		                point.tooltipPos = [
		                    positions[0] + radiusX * 0.7,
		                    positions[1] + radiusY * 0.7
		                ];

		                point.half = angle < -Math.PI / 2 || angle > Math.PI / 2 ?
		                    1 :
		                    0;
		                point.angle = angle;

		                // Set the anchor point for data labels. Use point.labelDistance
		                // instead of labelDistance // #1174
		                // finalConnectorOffset - not override connectorOffset value.
		                finalConnectorOffset = Math.min(
		                    connectorOffset,
		                    point.labelDistance / 5
		                ); // #1678

		                point.labelPosition = {
		                    natural: {
		                        // initial position of the data label - it's utilized
		                        // for finding the final position for the label
		                        x: positions[0] + pointRadiusX +
		                            Math.cos(angle) * point.labelDistance,
		                        y: positions[1] + pointRadiusY +
		                            Math.sin(angle) * point.labelDistance
		                    },
		                    'final': {
		                        // used for generating connector path -
		                        // initialized later in drawDataLabels function
		                        // x: undefined,
		                        // y: undefined
		                    },
		                    // left - pie on the left side of the data label
		                    // right - pie on the right side of the data label
		                    alignment: point.half ? 'right' : 'left',
		                    connectorPosition: {
		                        breakAt: { // used in connectorShapes.fixedOffset
		                            x: positions[0] + pointRadiusX +
		                                Math.cos(angle) * finalConnectorOffset,
		                            y: positions[1] + pointRadiusY +
		                                Math.sin(angle) * finalConnectorOffset
		                        },
		                        touchingSliceAt: { // middle of the arc
		                            x: positions[0] + pointRadiusX,
		                            y: positions[1] + pointRadiusY
		                        }
		                    }
		                };

		            }
		        }
		    }
		);

		/**
		 * A `variablepie` series. If the [type](#series.variablepie.type) option is not
		 * specified, it is inherited from [chart.type](#chart.type).
		 *
		 * @extends   series,plotOptions.variablepie
		 * @excluding dataParser, dataURL, stack, xAxis, yAxis
		 * @product   highcharts
		 * @apioption series.variablepie
		 */

		/**
		 * An array of data points for the series. For the `variablepie` series type,
		 * points can be given in the following ways:
		 *
		 * 1. An array of arrays with 2 values. In this case, the numerical values will
		 *    be interpreted as `y, z` options. Example:
		 *    ```js
		 *    data: [
		 *        [40, 75],
		 *        [50, 50],
		 *        [60, 40]
		 *    ]
		 *    ```
		 *
		 * 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.variablepie.turboThreshold), this option is not
		 *    available.
		 *    ```js
		 *    data: [{
		 *        y: 1,
		 *        z: 4,
		 *        name: "Point2",
		 *        color: "#00FF00"
		 *    }, {
		 *        y: 7,
		 *        z: 10,
		 *        name: "Point1",
		 *        color: "#FF00FF"
		 *    }]
		 *    ```
		 *
		 * @sample {highcharts} highcharts/series/data-array-of-arrays/
		 *         Arrays of numeric x and y
		 * @sample {highcharts} highcharts/series/data-array-of-arrays-datetime/
		 *         Arrays of datetime x and y
		 * @sample {highcharts} highcharts/series/data-array-of-name-value/
		 *         Arrays of point.name and y
		 * @sample {highcharts} highcharts/series/data-array-of-objects/
		 *         Config objects
		 *
		 * @type      {Array<Array<(number|string),number>|*>}
		 * @extends   series.pie.data
		 * @excluding marker, x
		 * @product   highcharts
		 * @apioption series.variablepie.data
		 */

	}(Highcharts));
	(function (H) {
		/* *
		 * Highcharts variwide module
		 *
		 * (c) 2010-2018 Torstein Honsi
		 *
		 * License: www.highcharts.com/license
		 */



		var addEvent = H.addEvent,
		    seriesType = H.seriesType,
		    seriesTypes = H.seriesTypes,
		    pick = H.pick;

		/**
		 * @private
		 * @class
		 * @name Highcharts.seriesTypes.variwide
		 *
		 * @augments Highcharts.Series
		 */
		seriesType('variwide', 'column'

		/**
		 * A variwide chart (related to marimekko chart) is a column chart with a
		 * variable width expressing a third dimension.
		 *
		 * @sample {highcharts} highcharts/demo/variwide/
		 *         Variwide chart
		 * @sample {highcharts} highcharts/series-variwide/inverted/
		 *         Inverted variwide chart
		 * @sample {highcharts} highcharts/series-variwide/datetime/
		 *         Variwide columns on a datetime axis
		 *
		 * @extends      plotOptions.column
		 * @since        6.0.0
		 * @product      highcharts
		 * @excluding    boostThreshold, crisp, depth, edgeColor, edgeWidth,
		 *               groupZPadding
		 * @optionparent plotOptions.variwide
		 */
		, {
		    /**
		     * In a variwide chart, the point padding is 0 in order to express the
		     * horizontal stacking of items.
		     */
		    pointPadding: 0,
		    /**
		     * In a variwide chart, the group padding is 0 in order to express the
		     * horizontal stacking of items.
		     */
		    groupPadding: 0
		}, {
		    pointArrayMap: ['y', 'z'],
		    parallelArrays: ['x', 'y', 'z'],
		    processData: function (force) {
		        this.totalZ = 0;
		        this.relZ = [];
		        seriesTypes.column.prototype.processData.call(this, force);

		        (this.xAxis.reversed ?
		                this.zData.slice().reverse() :
		                this.zData).forEach(
		            function (z, i) {
		                this.relZ[i] = this.totalZ;
		                this.totalZ += z;
		            },
		            this
		        );

		        if (this.xAxis.categories) {
		            this.xAxis.variwide = true;
		            this.xAxis.zData = this.zData; // Used for label rank
		        }
		    },

		    /**
		     * Translate an x value inside a given category index into the distorted
		     * axis translation.
		     *
		     * @private
		     * @function Highcharts.Series#postTranslate
		     *
		     * @param {number} index
		     *        The category index
		     *
		     * @param {number} x
		     *        The X pixel position in undistorted axis pixels
		     *
		     * @return {number}
		     *         Distorted X position
		     */
		    postTranslate: function (index, x, point) {

		        var axis = this.xAxis,
		            relZ = this.relZ,
		            i = axis.reversed ? relZ.length - index : index,
		            goRight = axis.reversed ? -1 : 1,
		            len = axis.len,
		            totalZ = this.totalZ,
		            linearSlotLeft = i / relZ.length * len,
		            linearSlotRight = (i + goRight) / relZ.length * len,
		            slotLeft = (pick(relZ[i], totalZ) / totalZ) * len,
		            slotRight = (pick(relZ[i + goRight], totalZ) / totalZ) * len,
		            xInsideLinearSlot = x - linearSlotLeft,
		            ret;

		        // Set crosshairWidth for every point (#8173)
		        if (point) {
		            point.crosshairWidth = slotRight - slotLeft;
		        }

		        ret = slotLeft +
		            xInsideLinearSlot * (slotRight - slotLeft) /
		            (linearSlotRight - linearSlotLeft);

		        return ret;
		    },

		    // Extend translation by distoring X position based on Z.
		    translate: function () {

		        // Temporarily disable crisping when computing original shapeArgs
		        var crispOption = this.options.crisp,
		            xAxis = this.xAxis;
		        this.options.crisp = false;

		        seriesTypes.column.prototype.translate.call(this);

		        // Reset option
		        this.options.crisp = crispOption;

		        var inverted = this.chart.inverted,
		            crisp = this.borderWidth % 2 / 2;

		        // Distort the points to reflect z dimension
		        this.points.forEach(function (point, i) {
		            var left, right;

		            if (xAxis.variwide) {
		                left = this.postTranslate(
		                    i,
		                    point.shapeArgs.x,
		                    point
		                );

		                right = this.postTranslate(
		                    i,
		                    point.shapeArgs.x + point.shapeArgs.width
		                );

		            // For linear or datetime axes, the variwide column should start
		            // with X and extend Z units, without modifying the axis.
		            } else {
		                left = point.plotX;
		                right = xAxis.translate(
		                    point.x + point.z,
		                    0,
		                    0,
		                    0,
		                    1
		                );
		            }

		            if (this.options.crisp) {
		                left = Math.round(left) - crisp;
		                right = Math.round(right) - crisp;
		            }

		            point.shapeArgs.x = left;
		            point.shapeArgs.width = right - left;

		            // Crosshair position (#8083)
		            point.plotX = (left + right) / 2;

		            // Adjust the tooltip position
		            if (!inverted) {
		                point.tooltipPos[0] =
		                    point.shapeArgs.x + point.shapeArgs.width / 2;
		            } else {
		                point.tooltipPos[1] =
		                    xAxis.len - point.shapeArgs.x - point.shapeArgs.width / 2;
		            }
		        }, this);
		    }

		// Point functions
		}, {
		    isValid: function () {
		        return H.isNumber(this.y, true) && H.isNumber(this.z, true);
		    }
		});

		H.Tick.prototype.postTranslate = function (xy, xOrY, index) {
		    var axis = this.axis,
		        pos = xy[xOrY] - axis.pos;

		    if (!axis.horiz) {
		        pos = axis.len - pos;
		    }
		    pos = axis.series[0].postTranslate(index, pos);

		    if (!axis.horiz) {
		        pos = axis.len - pos;
		    }
		    xy[xOrY] = axis.pos + pos;
		};

		// Same width as the category (#8083)
		addEvent(H.Axis, 'afterDrawCrosshair', function (e) {
		    if (this.variwide && this.cross) {
		        this.cross.attr('stroke-width', e.point && e.point.crosshairWidth);
		    }
		});

		// On a vertical axis, apply anti-collision logic to the labels.
		addEvent(H.Axis, 'afterRender', function () {
		    var axis = this;
		    if (!this.horiz && this.variwide) {
		        this.chart.labelCollectors.push(function () {
		            return axis.tickPositions.map(function (pos, i) {
		                var label = axis.ticks[pos].label;
		                label.labelrank = axis.zData[i];
		                return label;
		            });
		        });
		    }
		});

		addEvent(H.Tick, 'afterGetPosition', function (e) {
		    var axis = this.axis,
		        xOrY = axis.horiz ? 'x' : 'y';

		    if (axis.variwide) {
		        this[xOrY + 'Orig'] = e.pos[xOrY];
		        this.postTranslate(e.pos, xOrY, this.pos);
		    }
		});

		H.wrap(H.Tick.prototype, 'getLabelPosition', function (
		    proceed,
		    x,
		    y,
		    label,
		    horiz,
		    labelOptions,
		    tickmarkOffset,
		    index
		) {
		    var args = Array.prototype.slice.call(arguments, 1),
		        xy,
		        xOrY = horiz ? 'x' : 'y';

		    // Replace the x with the original x
		    if (this.axis.variwide && typeof this[xOrY + 'Orig'] === 'number') {
		        args[horiz ? 0 : 1] = this[xOrY + 'Orig'];
		    }

		    xy = proceed.apply(this, args);

		    // Post-translate
		    if (this.axis.variwide && this.axis.categories) {
		        this.postTranslate(xy, xOrY, index);
		    }
		    return xy;
		});



		/**
		 * A `variwide` series. If the [type](#series.variwide.type) option is not
		 * specified, it is inherited from [chart.type](#chart.type).
		 *
		 * @extends   series,plotOptions.variwide
		 * @product   highcharts
		 * @apioption series.variwide
		 */

		/**
		 * An array of data points for the series. For the `variwide` series type,
		 * points can be given in the following ways:
		 *
		 * 1. An array of arrays with 3 or 2 values. In this case, the values correspond
		 *    to `x,y,z`. If the first value is a string, it is applied as the name of
		 *    the point, and the `x` value is inferred. The `x` value can also be
		 *    omitted, in which case the inner arrays should be of length 2. Then the
		 *    `x` value is automatically calculated, either starting at 0 and
		 *    incremented by 1, or from `pointStart` and `pointInterval` given in the
		 *    series options.
		 *    ```js
		 *       data: [
		 *           [0, 1, 2],
		 *           [1, 5, 5],
		 *           [2, 0, 2]
		 *       ]
		 *    ```
		 *
		 * 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.variwide.turboThreshold), this option is not
		 *    available.
		 *    ```js
		 *       data: [{
		 *           x: 1,
		 *           y: 1,
		 *           z: 1,
		 *           name: "Point2",
		 *           color: "#00FF00"
		 *       }, {
		 *           x: 1,
		 *           y: 5,
		 *           z: 4,
		 *           name: "Point1",
		 *           color: "#FF00FF"
		 *       }]
		 *    ```
		 *
		 * @sample {highcharts} highcharts/series/data-array-of-arrays/
		 *         Arrays of numeric x and y
		 * @sample {highcharts} highcharts/series/data-array-of-arrays-datetime/
		 *         Arrays of datetime x and y
		 * @sample {highcharts} highcharts/series/data-array-of-name-value/
		 *         Arrays of point.name and y
		 * @sample {highcharts} highcharts/series/data-array-of-objects/
		 *         Config objects
		 *
		 * @type      {Array<Array<(number|string),number>|Array<(number|string),number,number>|*>}
		 * @extends   series.line.data
		 * @excluding marker
		 * @product   highcharts
		 * @apioption series.variwide.data
		 */

		/**
		 * The relative width for each column. On a category axis, the widths are
		 * distributed so they sum up to the X axis length. On linear and datetime axes,
		 * the columns will be laid out from the X value and Z units along the axis.
		 *
		 * @type      {number}
		 * @product   highcharts
		 * @apioption series.variwide.data.z
		 */

	}(Highcharts));
	var onSeriesMixin = (function (H) {
		/* *
		 * (c) 2010-2018 Torstein Honsi
		 *
		 * License: www.highcharts.com/license
		 */



		var defined = H.defined,
		    seriesTypes = H.seriesTypes,
		    stableSort = H.stableSort;

		/**
		 * @private
		 * @mixin onSeriesMixin
		 */
		var onSeriesMixin = {

		    /**
		     * Override getPlotBox. If the onSeries option is valid, return the plot box
		     * of the onSeries, otherwise proceed as usual.
		     *
		     * @private
		     * @function onSeriesMixin.getPlotBox
		     *
		     * @return {Highcharts.SeriesPlotBoxObject}
		     */
		    getPlotBox: function () {
		        return H.Series.prototype.getPlotBox.call(
		            (
		                this.options.onSeries &&
		                this.chart.get(this.options.onSeries)
		            ) || this
		        );
		    },

		    /**
		     * Extend the translate method by placing the point on the related series
		     *
		     * @private
		     * @function onSeriesMixin.translate
		     */
		    translate: function () {

		        seriesTypes.column.prototype.translate.apply(this);

		        var series = this,
		            options = series.options,
		            chart = series.chart,
		            points = series.points,
		            cursor = points.length - 1,
		            point,
		            lastPoint,
		            optionsOnSeries = options.onSeries,
		            onSeries = optionsOnSeries && chart.get(optionsOnSeries),
		            onKey = options.onKey || 'y',
		            step = onSeries && onSeries.options.step,
		            onData = onSeries && onSeries.points,
		            i = onData && onData.length,
		            inverted = chart.inverted,
		            xAxis = series.xAxis,
		            yAxis = series.yAxis,
		            xOffset = 0,
		            leftPoint,
		            lastX,
		            rightPoint,
		            currentDataGrouping,
		            distanceRatio;

		        // relate to a master series
		        if (onSeries && onSeries.visible && i) {
		            xOffset = (onSeries.pointXOffset || 0) + (onSeries.barW || 0) / 2;
		            currentDataGrouping = onSeries.currentDataGrouping;
		            lastX = (
		                onData[i - 1].x +
		                (currentDataGrouping ? currentDataGrouping.totalRange : 0)
		            ); // #2374

		            // sort the data points
		            stableSort(points, function (a, b) {
		                return (a.x - b.x);
		            });

		            onKey = 'plot' + onKey[0].toUpperCase() + onKey.substr(1);
		            while (i-- && points[cursor]) {
		                leftPoint = onData[i];
		                point = points[cursor];
		                point.y = leftPoint.y;

		                if (leftPoint.x <= point.x && leftPoint[onKey] !== undefined) {
		                    if (point.x <= lastX) { // #803

		                        point.plotY = leftPoint[onKey];

		                        // interpolate between points, #666
		                        if (leftPoint.x < point.x && !step) {
		                            rightPoint = onData[i + 1];
		                            if (rightPoint && rightPoint[onKey] !== undefined) {
		                                // the distance ratio, between 0 and 1
		                                distanceRatio = (point.x - leftPoint.x) /
		                                    (rightPoint.x - leftPoint.x);
		                                point.plotY +=
		                                    distanceRatio *
		                                    // the plotY distance
		                                    (rightPoint[onKey] - leftPoint[onKey]);
		                                point.y +=
		                                    distanceRatio *
		                                    (rightPoint.y - leftPoint.y);
		                            }
		                        }
		                    }
		                    cursor--;
		                    i++; // check again for points in the same x position
		                    if (cursor < 0) {
		                        break;
		                    }
		                }
		            }
		        }

		        // Add plotY position and handle stacking
		        points.forEach(function (point, i) {

		            var stackIndex;

		            point.plotX += xOffset; // #2049

		            // Undefined plotY means the point is either on axis, outside series
		            // range or hidden series. If the series is outside the range of the
		            // x axis it should fall through with an undefined plotY, but then
		            // we must remove the shapeArgs (#847). For inverted charts, we need
		            // to calculate position anyway, because series.invertGroups is not
		            // defined
		            if (point.plotY === undefined || inverted) {
		                if (point.plotX >= 0 && point.plotX <= xAxis.len) {
		                    // We're inside xAxis range
		                    if (inverted) {
		                        point.plotY = xAxis.translate(point.x, 0, 1, 0, 1);
		                        point.plotX = defined(point.y) ?
		                            yAxis.translate(point.y, 0, 0, 0, 1) : 0;
		                    } else {
		                        point.plotY = chart.chartHeight - xAxis.bottom -
		                            (xAxis.opposite ? xAxis.height : 0) +
		                            xAxis.offset - yAxis.top; // #3517
		                    }
		                } else {
		                    point.shapeArgs = {}; // 847
		                }
		            }

		            // if multiple flags appear at the same x, order them into a stack
		            lastPoint = points[i - 1];
		            if (lastPoint && lastPoint.plotX === point.plotX) {
		                if (lastPoint.stackIndex === undefined) {
		                    lastPoint.stackIndex = 0;
		                }
		                stackIndex = lastPoint.stackIndex + 1;
		            }
		            point.stackIndex = stackIndex; // #3639
		        });

		        this.onSeries = onSeries;
		    }
		};

		return onSeriesMixin;
	}(Highcharts));
	(function (H, onSeriesMixin) {
		/* *
		 * Wind barb series module
		 *
		 * (c) 2010-2018 Torstein Honsi
		 *
		 * License: www.highcharts.com/license
		 */



		var noop = H.noop,
		    seriesType = H.seriesType;

		/**
		 * @private
		 * @class
		 * @name Highcharts.seriesTypes.windbarb
		 *
		 * @augments Highcharts.Series
		 */
		seriesType('windbarb', 'column'

		/**
		 * Wind barbs are a convenient way to represent wind speed and direction in one
		 * graphical form. Wind direction is given by the stem direction, and wind speed
		 * by the number and shape of barbs.
		 *
		 * @sample {highcharts|highstock} highcharts/demo/windbarb-series/
		 *         Wind barb series
		 *
		 * @extends      plotOptions.column
		 * @excluding    boostThreshold, marker, connectEnds, connectNulls,
		 *               cropThreshold, dashStyle, gapSize, gapUnit, dataGrouping,
		 *               linecap, shadow, stacking, step
		 * @since        6.0.0
		 * @product      highcharts highstock
		 * @optionparent plotOptions.windbarb
		 */
		, {
		    /**
		     * The line width of the wind barb symbols.
		     */
		    lineWidth: 2,
		    /**
		     * The id of another series in the chart that the wind barbs are projected
		     * on. When `null`, the wind symbols are drawn on the X axis, but offset up
		     * or down by the `yOffset` setting.
		     *
		     * @sample {highcharts|highstock} highcharts/plotoptions/windbarb-onseries
		     *         Projected on area series
		     *
		     * @type {string|null}
		     */
		    onSeries: null,
		    states: {
		        hover: {
		            lineWidthPlus: 0
		        }
		    },
		    tooltip: {
		        /**
		         * The default point format for the wind barb tooltip. Note the
		         * `point.beaufort` property that refers to the Beaufort wind scale. The
		         * names can be internationalized by modifying
		         * `Highcharts.seriesTypes.windbarb.prototype.beaufortNames`.
		         */
		        pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.value}</b> ({point.beaufort})<br/>'
		    },
		    /**
		     * Pixel length of the stems.
		     */
		    vectorLength: 20,
		    /**
		     * Vertical offset from the cartesian position, in pixels. The default value
		     * makes sure the symbols don't overlap the X axis when `onSeries` is
		     * `null`, and that they don't overlap the linked series when `onSeries` is
		     * given.
		     */
		    yOffset: -20,
		    /**
		     * Horizontal offset from the cartesian position, in pixels. When the chart
		     * is inverted, this option allows translation like
		     * [yOffset](#plotOptions.windbarb.yOffset) in non inverted charts.
		     *
		     * @since 6.1.0
		     */
		    xOffset: 0
		}, {
		    pointArrayMap: ['value', 'direction'],
		    parallelArrays: ['x', 'value', 'direction'],
		    beaufortName: ['Calm', 'Light air', 'Light breeze',
		        'Gentle breeze', 'Moderate breeze', 'Fresh breeze',
		        'Strong breeze', 'Near gale', 'Gale', 'Strong gale', 'Storm',
		        'Violent storm', 'Hurricane'],
		    beaufortFloor: [0, 0.3, 1.6, 3.4, 5.5, 8.0, 10.8, 13.9, 17.2, 20.8,
		        24.5, 28.5, 32.7],
		    trackerGroups: ['markerGroup'],

		    // Get presentational attributes.
		    pointAttribs: function (point, state) {
		        var options = this.options,
		            stroke = point.color || this.color,
		            strokeWidth = this.options.lineWidth;

		        if (state) {
		            stroke = options.states[state].color || stroke;
		            strokeWidth =
		                (options.states[state].lineWidth || strokeWidth) +
		                (options.states[state].lineWidthPlus || 0);
		        }

		        return {
		            'stroke': stroke,
		            'stroke-width': strokeWidth
		        };
		    },
		    markerAttribs: function () {
		        return undefined;
		    },
		    getPlotBox: onSeriesMixin.getPlotBox,
		    // Create a single wind arrow. It is later rotated around the zero
		    // centerpoint.
		    windArrow: function (point) {
		        var knots = point.value * 1.943844,
		            level = point.beaufortLevel,
		            path,
		            barbs,
		            u = this.options.vectorLength / 20,
		            pos = -10;

		        if (point.isNull) {
		            return [];
		        }

		        if (level === 0) {
		            return this.chart.renderer.symbols.circle(
		                -10 * u,
		                -10 * u,
		                20 * u,
		                20 * u
		            );
		        }

		        // The stem and the arrow head
		        path = [
		            'M', 0, 7 * u, // base of arrow
		            'L', -1.5 * u, 7 * u,
		            0, 10 * u,
		            1.5 * u, 7 * u,
		            0, 7 * u,
		            0, -10 * u// top
		        ];

		        // For each full 50 knots, add a pennant
		        barbs = (knots - knots % 50) / 50; // pennants
		        if (barbs > 0) {
		            while (barbs--) {
		                path.push(
		                    pos === -10 ? 'L' : 'M',
		                    0,
		                    pos * u,
		                    'L',
		                    5 * u,
		                    pos * u + 2,
		                    'L',
		                    0,
		                    pos * u + 4

		                );

		                // Substract from the rest and move position for next
		                knots -= 50;
		                pos += 7;
		            }
		        }

		        // For each full 10 knots, add a full barb
		        barbs = (knots - knots % 10) / 10;
		        if (barbs > 0) {
		            while (barbs--) {
		                path.push(
		                    pos === -10 ? 'L' : 'M',
		                    0,
		                    pos * u,
		                    'L',
		                    7 * u,
		                    pos * u
		                );
		                knots -= 10;
		                pos += 3;
		            }
		        }

		        // For each full 5 knots, add a half barb
		        barbs = (knots - knots % 5) / 5; // half barbs
		        if (barbs > 0) {
		            while (barbs--) {
		                path.push(
		                    pos === -10 ? 'L' : 'M',
		                    0,
		                    pos * u,
		                    'L',
		                    4 * u,
		                    pos * u
		                );
		                knots -= 5;
		                pos += 3;
		            }
		        }
		        return path;
		    },

		    translate: function () {
		        var beaufortFloor = this.beaufortFloor,
		            beaufortName = this.beaufortName;

		        onSeriesMixin.translate.call(this);

		        this.points.forEach(function (point) {
		            var level = 0;
		            // Find the beaufort level (zero based)
		            for (; level < beaufortFloor.length; level++) {
		                if (beaufortFloor[level] > point.value) {
		                    break;
		                }
		            }
		            point.beaufortLevel = level - 1;
		            point.beaufort = beaufortName[level - 1];

		        });

		    },

		    drawPoints: function () {
		        var chart = this.chart,
		            yAxis = this.yAxis,
		            inverted = chart.inverted,
		            shapeOffset = this.options.vectorLength / 2;

		        this.points.forEach(function (point) {
		            var plotX = point.plotX,
		                plotY = point.plotY;

		            // Check if it's inside the plot area, but only for the X dimension.
		            if (chart.isInsidePlot(plotX, 0, false)) {

		                // Create the graphic the first time
		                if (!point.graphic) {
		                    point.graphic = this.chart.renderer
		                        .path()
		                        .add(this.markerGroup);
		                }

		                // Position the graphic
		                point.graphic
		                    .attr({
		                        d: this.windArrow(point),
		                        translateX: plotX + this.options.xOffset,
		                        translateY: plotY + this.options.yOffset,
		                        rotation: point.direction
		                    })
		                    .attr(this.pointAttribs(point));

		            } else if (point.graphic) {
		                point.graphic = point.graphic.destroy();
		            }

		            // Set the tooltip anchor position
		            point.tooltipPos = [
		                plotX + this.options.xOffset + (inverted && !this.onSeries ?
		                    shapeOffset : 0),
		                plotY + this.options.yOffset - (inverted ? 0 :
		                    shapeOffset + yAxis.pos - chart.plotTop)
		            ]; // #6327
		        }, this);
		    },

		    // Fade in the arrows on initiating series.
		    animate: function (init) {
		        if (init) {
		            this.markerGroup.attr({
		                opacity: 0.01
		            });
		        } else {
		            this.markerGroup.animate({
		                opacity: 1
		            }, H.animObject(this.options.animation));

		            this.animate = null;
		        }
		    },

		    // Don't invert the marker group (#4960)
		    invertGroups: noop
		}, {
		    isValid: function () {
		        return H.isNumber(this.value) && this.value >= 0;
		    }
		});



		/**
		 * A `windbarb` series. If the [type](#series.windbarb.type) option is not
		 * specified, it is inherited from [chart.type](#chart.type).
		 *
		 * @extends   series,plotOptions.windbarb
		 * @excluding dataParser, dataURL
		 * @product   highcharts highstock
		 * @apioption series.windbarb
		 */

		/**
		 * An array of data points for the series. For the `windbarb` series type,
		 * points can be given in the following ways:
		 *
		 * 1. An array of arrays with 3 values. In this case, the values correspond to
		 *    `x,value,direction`. If the first value is a string, it is applied as the
		 *    name of the point, and the `x` value is inferred.
		 *    ```js
		 *       data: [
		 *           [Date.UTC(2017, 0, 1, 0), 3.3, 90],
		 *           [Date.UTC(2017, 0, 1, 1), 12.1, 180],
		 *           [Date.UTC(2017, 0, 1, 2), 11.1, 270]
		 *       ]
		 *    ```
		 *
		 * 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.area.turboThreshold), this option is not
		 *    available.
		 *    ```js
		 *       data: [{
		 *           x: Date.UTC(2017, 0, 1, 0),
		 *           value: 12.1,
		 *           direction: 90
		 *       }, {
		 *           x: Date.UTC(2017, 0, 1, 1),
		 *           value: 11.1,
		 *           direction: 270
		 *       }]
		 *    ```
		 *
		 * @sample {highcharts} highcharts/chart/reflow-true/
		 *         Numerical values
		 * @sample {highcharts} highcharts/series/data-array-of-arrays/
		 *         Arrays of numeric x and y
		 * @sample {highcharts} highcharts/series/data-array-of-arrays-datetime/
		 *         Arrays of datetime x and y
		 * @sample {highcharts} highcharts/series/data-array-of-name-value/
		 *         Arrays of point.name and y
		 * @sample {highcharts} highcharts/series/data-array-of-objects/
		 *         Config objects
		 *
		 * @type      {Array<Array<(number|string),number,number>|*>}
		 * @extends   series.line.data
		 * @product   highcharts highstock
		 * @apioption series.windbarb.data
		 */

		/**
		 * The wind speed in meters per second.
		 *
		 * @type      {number}
		 * @product   highcharts highstock
		 * @apioption series.windbarb.data.value
		 */

		/**
		 * The wind direction in degrees, where 0 is north (pointing towards south).
		 *
		 * @type      {number}
		 * @product   highcharts highstock
		 * @apioption series.windbarb.data.direction
		 */

	}(Highcharts, onSeriesMixin));
	var collision = (function (H) {

		var deg2rad = H.deg2rad,
		    find = H.find,
		    isArray = H.isArray,
		    isNumber = H.isNumber;

		/**
		 * Alternative solution to correctFloat.
		 * E.g H.correctFloat(123, 2) returns 120, when it should be 123.
		 *
		 * @private
		 * @function correctFloat
		 *
		 * @param {number} number
		 *
		 * @param {number} precision
		 *
		 * @return {number}
		 */
		var correctFloat = function (number, precision) {
		    var p = isNumber(precision) ? precision : 14,
		        magnitude = Math.pow(10, p);
		    return Math.round(number * magnitude) / magnitude;
		};

		/**
		 * Calculates the normals to a line between two points.
		 *
		 * @private
		 * @function getNormals
		 *
		 * @param {Array<number,number>} p1
		 *        Start point for the line. Array of x and y value.
		 *
		 * @param {Array<number,number>} p2
		 *        End point for the line. Array of x and y value.
		 *
		 * @return {Array<Array<number,number>>}
		 *         Returns the two normals in an array.
		 */
		var getNormals = function getNormal(p1, p2) {
		    var dx = p2[0] - p1[0], // x2 - x1
		        dy = p2[1] - p1[1]; // y2 - y1
		    return [
		        [-dy, dx],
		        [dy, -dx]
		    ];
		};

		/**
		 * Calculates the dot product of two coordinates. The result is a scalar value.
		 *
		 * @private
		 * @function dotProduct
		 *
		 * @param {Array<number,number>} a
		 *        The x and y coordinates of the first point.
		 *
		 * @param {Array<number,number>} b
		 *        The x and y coordinates of the second point.
		 *
		 * @return {number}
		 *         Returns the dot product of a and b.
		 */
		var dotProduct = function dotProduct(a, b) {
		    var ax = a[0],
		        ay = a[1],
		        bx = b[0],
		        by = b[1];
		    return ax * bx + ay * by;
		};

		/**
		 * Projects a polygon onto a coordinate.
		 *
		 * @private
		 * @function project
		 *
		 * @param {Array<Array<number,number>>} polygon
		 *        Array of points in a polygon.
		 *
		 * @param {Array<number,number>} target
		 *        The coordinate of pr
		 *
		 * @return {object}
		 */
		var project = function project(polygon, target) {
		    var products = polygon.map(function (point) {
		        return dotProduct(point, target);
		    });
		    return {
		        min: Math.min.apply(this, products),
		        max: Math.max.apply(this, products)
		    };
		};

		/**
		 * Rotates a point clockwise around the origin.
		 *
		 * @private
		 * @function rotate2DToOrigin
		 *
		 * @param {Array<number,number>} point
		 *        The x and y coordinates for the point.
		 *
		 * @param {number} angle
		 *        The angle of rotation.
		 *
		 * @return {Array<number,number>}
		 *         The x and y coordinate for the rotated point.
		 */
		var rotate2DToOrigin = function (point, angle) {
		    var x = point[0],
		        y = point[1],
		        rad = deg2rad * -angle,
		        cosAngle = Math.cos(rad),
		        sinAngle = Math.sin(rad);
		    return [
		        correctFloat(x * cosAngle - y * sinAngle),
		        correctFloat(x * sinAngle + y * cosAngle)
		    ];
		};

		/**
		 * Rotate a point clockwise around another point.
		 *
		 * @private
		 * @function rotate2DToPoint
		 *
		 * @param {Array<number,number>} point
		 *        The x and y coordinates for the point.
		 *
		 * @param {Array<number,numbner>} origin
		 *        The point to rotate around.
		 *
		 * @param {number} angle
		 *        The angle of rotation.
		 *
		 * @return {Array<number,number>}
		 *         The x and y coordinate for the rotated point.
		 */
		var rotate2DToPoint = function (point, origin, angle) {
		    var x = point[0] - origin[0],
		        y = point[1] - origin[1],
		        rotated = rotate2DToOrigin([x, y], angle);
		    return [
		        rotated[0] + origin[0],
		        rotated[1] + origin[1]
		    ];
		};

		var isAxesEqual = function (axis1, axis2) {
		    return (
		        axis1[0] === axis2[0] &&
		        axis1[1] === axis2[1]
		    );
		};

		var getAxesFromPolygon = function (polygon) {
		    var points,
		        axes = polygon.axes;
		    if (!isArray(axes)) {
		        axes = [];
		        points = points = polygon.concat([polygon[0]]);
		        points.reduce(
		            function findAxis(p1, p2) {
		                var normals = getNormals(p1, p2),
		                    axis = normals[0]; // Use the left normal as axis.

		                // Check that the axis is unique.
		                if (!find(axes, function (existing) {
		                    return isAxesEqual(existing, axis);
		                })) {
		                    axes.push(axis);
		                }

		                // Return p2 to be used as p1 in next iteration.
		                return p2;
		            }
		        );
		        polygon.axes = axes;
		    }
		    return axes;
		};

		var getAxes = function (polygon1, polygon2) {
		    // Get the axis from both polygons.
		    var axes1 = getAxesFromPolygon(polygon1),
		        axes2 = getAxesFromPolygon(polygon2);
		    return axes1.concat(axes2);
		};

		var getPolygon = function (x, y, width, height, rotation) {
		    var origin = [x, y],
		        left = x - (width / 2),
		        right = x + (width / 2),
		        top = y - (height / 2),
		        bottom = y + (height / 2),
		        polygon = [
		            [left, top],
		            [right, top],
		            [right, bottom],
		            [left, bottom]
		        ];
		    return polygon.map(function (point) {
		        return rotate2DToPoint(point, origin, -rotation);
		    });
		};

		var getBoundingBoxFromPolygon = function (points) {
		    return points.reduce(function (obj, point) {
		        var x = point[0],
		            y = point[1];
		        obj.left = Math.min(x, obj.left);
		        obj.right = Math.max(x, obj.right);
		        obj.bottom = Math.max(y, obj.bottom);
		        obj.top = Math.min(y, obj.top);
		        return obj;
		    }, {
		        left: Number.MAX_VALUE,
		        right: -Number.MAX_VALUE,
		        bottom: -Number.MAX_VALUE,
		        top: Number.MAX_VALUE
		    });
		};

		var isPolygonsOverlappingOnAxis = function (axis, polygon1, polygon2) {
		    var projection1 = project(polygon1, axis),
		        projection2 = project(polygon2, axis),
		        isOverlapping = !(
		            projection2.min > projection1.max ||
		            projection2.max < projection1.min
		        );
		    return !isOverlapping;
		};

		/**
		 * Checks wether two convex polygons are colliding by using the Separating Axis
		 * Theorem.
		 *
		 * @private
		 * @function isPolygonsColliding
		 *
		 * @param {Array<Array<number,number>>} polygon1
		 *        First polygon.
		 *
		 * @param {Array<Array<number,number>>} polygon2
		 *        Second polygon.
		 *
		 * @return {boolean}
		 *         Returns true if they are colliding, otherwise false.
		 */
		var isPolygonsColliding = function isPolygonsColliding(polygon1, polygon2) {
		    var axes = getAxes(polygon1, polygon2),
		        overlappingOnAllAxes = !find(axes, function (axis) {
		            return isPolygonsOverlappingOnAxis(axis, polygon1, polygon2);
		        });
		    return overlappingOnAllAxes;
		};

		var movePolygon = function (deltaX, deltaY, polygon) {
		    return polygon.map(function (point) {
		        return [
		            point[0] + deltaX,
		            point[1] + deltaY
		        ];
		    });
		};

		var collision = {
		    getBoundingBoxFromPolygon: getBoundingBoxFromPolygon,
		    getPolygon: getPolygon,
		    isPolygonsColliding: isPolygonsColliding,
		    movePolygon: movePolygon,
		    rotate2DToOrigin: rotate2DToOrigin,
		    rotate2DToPoint: rotate2DToPoint
		};


		return collision;
	}(Highcharts));
	(function (H, drawPoint, polygon) {
		/* *
		 * Experimental Highcharts module which enables visualization of a word cloud.
		 *
		 * (c) 2016-2018 Highsoft AS
		 *
		 * Authors: Jon Arild Nygard
		 *
		 * License: www.highcharts.com/license
		 */



		var extend = H.extend,
		    isArray = H.isArray,
		    isNumber = H.isNumber,
		    isObject = H.isObject,
		    merge = H.merge,
		    noop = H.noop,
		    find = H.find,
		    getBoundingBoxFromPolygon = polygon.getBoundingBoxFromPolygon,
		    getPolygon = polygon.getPolygon,
		    isPolygonsColliding = polygon.isPolygonsColliding,
		    movePolygon = polygon.movePolygon,
		    Series = H.Series;

		/**
		 * Detects if there is a collision between two rectangles.
		 *
		 * @private
		 * @function isRectanglesIntersecting
		 *
		 * @param {object} r1
		 *        First rectangle.
		 *
		 * @param {object} r2
		 *        Second rectangle.
		 *
		 * @return {boolean}
		 *         Returns true if the rectangles overlap.
		 */
		function isRectanglesIntersecting(r1, r2) {
		    return !(
		        r2.left > r1.right ||
		        r2.right < r1.left ||
		        r2.top > r1.bottom ||
		        r2.bottom < r1.top
		    );
		}

		/**
		 * Detects if a word collides with any previously placed words.
		 *
		 * @private
		 * @function intersectsAnyWord
		 *
		 * @param {Highcharts.Point} point
		 *        Point which the word is connected to.
		 *
		 * @param {Array<Highcharts.Point>} points
		 *        Previously placed points to check against.
		 *
		 * @return {boolean}
		 *         Returns true if there is collision.
		 */
		function intersectsAnyWord(point, points) {
		    var intersects = false,
		        rect = point.rect,
		        polygon = point.polygon,
		        lastCollidedWith = point.lastCollidedWith,
		        isIntersecting = function (p) {
		            var result = isRectanglesIntersecting(rect, p.rect);
		            if (result && (point.rotation % 90 || p.roation % 90)) {
		                result = isPolygonsColliding(
		                    polygon,
		                    p.polygon
		                );
		            }
		            return result;
		        };

		    // If the point has already intersected a different point, chances are they
		    // are still intersecting. So as an enhancement we check this first.
		    if (lastCollidedWith) {
		        intersects = isIntersecting(lastCollidedWith);
		        // If they no longer intersects, remove the cache from the point.
		        if (!intersects) {
		            delete point.lastCollidedWith;
		        }
		    }

		    // If not already found, then check if we can find a point that is
		    // intersecting.
		    if (!intersects) {
		        intersects = !!find(points, function (p) {
		            var result = isIntersecting(p);
		            if (result) {
		                point.lastCollidedWith = p;
		            }
		            return result;
		        });
		    }
		    return intersects;
		}

		/**
		 * Gives a set of cordinates for an Archimedian Spiral.
		 *
		 * @private
		 * @function archimedeanSpiral
		 *
		 * @param {number} attempt
		 *        How far along the spiral we have traversed.
		 *
		 * @param {object} params
		 *        Additional parameters.
		 *
		 * @param {object} params.field
		 *        Size of field.
		 *
		 * @return {boolean|object}
		 *         Resulting coordinates, x and y. False if the word should be dropped
		 *         from the visualization.
		 */
		function archimedeanSpiral(attempt, params) {
		    var field = params.field,
		        result = false,
		        maxDelta = (field.width * field.width) + (field.height * field.height),
		        t = attempt * 0.8; // 0.2 * 4 = 0.8. Enlarging the spiral.
		    // Emergency brake. TODO make spiralling logic more foolproof.
		    if (attempt <= 10000) {
		        result = {
		            x: t * Math.cos(t),
		            y: t * Math.sin(t)
		        };
		        if (!(Math.min(Math.abs(result.x), Math.abs(result.y)) < maxDelta)) {
		            result = false;
		        }
		    }
		    return result;
		}

		/**
		 * Gives a set of cordinates for an rectangular spiral.
		 *
		 * @private
		 * @function squareSpiral
		 *
		 * @param {number} attempt
		 *        How far along the spiral we have traversed.
		 *
		 * @param {object} params
		 *        Additional parameters.
		 *
		 * @return {boolean|object}
		 *         Resulting coordinates, x and y. False if the word should be dropped
		 *         from the visualization.
		 */
		function squareSpiral(attempt) {
		    var a = attempt * 4,
		        k = Math.ceil((Math.sqrt(a) - 1) / 2),
		        t = 2 * k + 1,
		        m = Math.pow(t, 2),
		        isBoolean = function (x) {
		            return typeof x === 'boolean';
		        },
		        result = false;
		    t -= 1;
		    if (attempt <= 10000) {
		        if (isBoolean(result) && a >= m - t) {
		            result = {
		                x: k - (m - a),
		                y: -k
		            };
		        }
		        m -= t;
		        if (isBoolean(result) && a >= m - t) {
		            result = {
		                x: -k,
		                y: -k + (m - a)
		            };
		        }

		        m -= t;
		        if (isBoolean(result)) {
		            if (a >= m - t) {
		                result = {
		                    x: -k + (m - a),
		                    y: k
		                };
		            } else {
		                result = {
		                    x: k,
		                    y: k - (m - a - t)
		                };
		            }
		        }
		        result.x *= 5;
		        result.y *= 5;
		    }
		    return result;
		}

		/**
		 * Gives a set of cordinates for an rectangular spiral.
		 *
		 * @private
		 * @function rectangularSpiral
		 *
		 * @param {number} attempt
		 *        How far along the spiral we have traversed.
		 *
		 * @param {object} params
		 *        Additional parameters.
		 *
		 * @return {boolean|object}
		 *         Resulting coordinates, x and y. False if the word should be dropped
		 *         from the visualization.
		 */
		function rectangularSpiral(attempt, params) {
		    var result = squareSpiral(attempt, params),
		        field = params.field;
		    if (result) {
		        result.x *= field.ratioX;
		        result.y *= field.ratioY;
		    }
		    return result;
		}

		/**
		 * @private
		 * @function getRandomPosition
		 *
		 * @param {number} size
		 *
		 * @return {number}
		 */
		function getRandomPosition(size) {
		    return Math.round((size * (Math.random() + 0.5)) / 2);
		}

		/**
		 * Calculates the proper scale to fit the cloud inside the plotting area.
		 *
		 * @private
		 * @function getScale
		 *
		 * @param {number} targetWidth
		 *        Width of target area.
		 *
		 * @param {number} targetHeight
		 *        Height of target area.
		 *
		 * @param {object} field
		 *        The playing field.
		 *
		 * @param {Highcharts.Series} series
		 *        Series object.
		 *
		 * @return {number}
		 *         Returns the value to scale the playing field up to the size of the
		 *         target area.
		 */
		function getScale(targetWidth, targetHeight, field) {
		    var height = Math.max(Math.abs(field.top), Math.abs(field.bottom)) * 2,
		        width = Math.max(Math.abs(field.left), Math.abs(field.right)) * 2,
		        scaleX = width > 0 ? 1 / width * targetWidth : 1,
		        scaleY = height > 0 ? 1 / height * targetHeight : 1;
		    return Math.min(scaleX, scaleY);
		}

		/**
		 * Calculates what is called the playing field. The field is the area which all
		 * the words are allowed to be positioned within. The area is proportioned to
		 * match the target aspect ratio.
		 *
		 * @private
		 * @function getPlayingField
		 *
		 * @param {number} targetWidth
		 *        Width of the target area.
		 *
		 * @param {number} targetHeight
		 *        Height of the target area.
		 *
		 * @param {Array<Highcharts.Point>} data
		 *        Array of points.
		 *
		 * @param {object} data.dimensions
		 *        The height and width of the word.
		 *
		 * @return {object}
		 *         The width and height of the playing field.
		 */
		function getPlayingField(
		    targetWidth,
		    targetHeight,
		    data
		) {
		    var info = data.reduce(function (obj, point) {
		            var dimensions = point.dimensions,
		                x = Math.max(dimensions.width, dimensions.height);
		            // Find largest height.
		            obj.maxHeight = Math.max(obj.maxHeight, dimensions.height);
		            // Find largest width.
		            obj.maxWidth = Math.max(obj.maxWidth, dimensions.width);
		            // Sum up the total maximum area of all the words.
		            obj.area += x * x;
		            return obj;
		        }, {
		            maxHeight: 0,
		            maxWidth: 0,
		            area: 0
		        }),
		        /**
		         * Use largest width, largest height, or root of total area to give size
		         * to the playing field.
		         */
		        x = Math.max(
		            info.maxHeight, // Have enough space for the tallest word
		            info.maxWidth, // Have enough space for the broadest word
		            // Adjust 15% to account for close packing of words
		            Math.sqrt(info.area) * 0.85
		        ),
		        ratioX = targetWidth > targetHeight ? targetWidth / targetHeight : 1,
		        ratioY = targetHeight > targetWidth ? targetHeight / targetWidth : 1;
		    return {
		        width: x * ratioX,
		        height: x * ratioY,
		        ratioX: ratioX,
		        ratioY: ratioY
		    };
		}


		/**
		 * Calculates a number of degrees to rotate, based upon a number of orientations
		 * within a range from-to.
		 *
		 * @private
		 * @function getRotation
		 *
		 * @param {number} orientations
		 *        Number of orientations.
		 *
		 * @param {number} index
		 *        Index of point, used to decide orientation.
		 *
		 * @param {number} from
		 *        The smallest degree of rotation.
		 *
		 * @param {number} to
		 *        The largest degree of rotation.
		 *
		 * @return {boolean|number}
		 *         Returns the resulting rotation for the word. Returns false if invalid
		 *         input parameters.
		 */
		function getRotation(orientations, index, from, to) {
		    var result = false, // Default to false
		        range,
		        intervals,
		        orientation;

		    // Check if we have valid input parameters.
		    if (
		        isNumber(orientations) &&
		        isNumber(index) &&
		        isNumber(from) &&
		        isNumber(to) &&
		        orientations > -1 &&
		        index > -1 &&
		        to > from
		    ) {
		        range = to - from;
		        intervals = range / (orientations - 1);
		        orientation = index % orientations;
		        result = from + (orientation * intervals);
		    }
		    return result;
		}

		/**
		 * Calculates the spiral positions and store them in scope for quick access.
		 *
		 * @private
		 * @function getSpiral
		 *
		 * @param {Function} fn
		 *        The spiral function.
		 *
		 * @param {object} params
		 *        Additional parameters for the spiral.
		 *
		 * @return {Function}
		 *         Function with access to spiral positions.
		 */
		function getSpiral(fn, params) {
		    var length = 10000,
		        i,
		        arr = [];

		    for (i = 1; i < length; i++) {
		        arr.push(fn(i, params));
		    }

		    return function (attempt) {
		        return attempt <= length ? arr[attempt - 1] : false;
		    };
		}

		/**
		 * Detects if a word is placed outside the playing field.
		 *
		 * @private
		 * @function outsidePlayingField
		 *
		 * @param {Highcharts.Point} point
		 *        Point which the word is connected to.
		 *
		 * @param {object} field
		 *        The width and height of the playing field.
		 *
		 * @return {boolean}
		 *         Returns true if the word is placed outside the field.
		 */
		function outsidePlayingField(rect, field) {
		    var playingField = {
		        left: -(field.width / 2),
		        right: field.width / 2,
		        top: -(field.height / 2),
		        bottom: field.height / 2
		    };
		    return !(
		        playingField.left < rect.left &&
		        playingField.right > rect.right &&
		        playingField.top < rect.top &&
		        playingField.bottom > rect.bottom
		    );
		}

		/**
		 * Check if a point intersects with previously placed words, or if it goes
		 * outside the field boundaries. If a collision, then try to adjusts the
		 * position.
		 *
		 * @private
		 * @function intersectionTesting
		 *
		 * @param {Highcharts.Point} point
		 *        Point to test for intersections.
		 *
		 * @param {object} options
		 *        Options object.
		 *
		 * @return {boolean|object}
		 *         Returns an object with how much to correct the positions. Returns
		 *         false if the word should not be placed at all.
		 */
		function intersectionTesting(point, options) {
		    var placed = options.placed,
		        field = options.field,
		        rectangle = options.rectangle,
		        polygon = options.polygon,
		        spiral = options.spiral,
		        attempt = 1,
		        delta = {
		            x: 0,
		            y: 0
		        },
		        // Make a copy to update values during intersection testing.
		        rect = point.rect = extend({}, rectangle);
		    point.polygon = polygon;
		    point.rotation = options.rotation;

		    /* while w intersects any previously placed words:
		         do {
		           move w a little bit along a spiral path
		         } while any part of w is outside the playing field and
		                 the spiral radius is still smallish */
		    while (
		        delta !== false &&
		        (
		            intersectsAnyWord(point, placed) ||
		            outsidePlayingField(rect, field)
		        )
		    ) {
		        delta = spiral(attempt);
		        if (isObject(delta)) {
		            // Update the DOMRect with new positions.
		            rect.left = rectangle.left + delta.x;
		            rect.right = rectangle.right + delta.x;
		            rect.top = rectangle.top + delta.y;
		            rect.bottom = rectangle.bottom + delta.y;
		            point.polygon = movePolygon(delta.x, delta.y, polygon);
		        }
		        attempt++;
		    }
		    return delta;
		}

		/**
		 * Extends the playing field to have enough space to fit a given word.
		 *
		 * @private
		 * @function extendPlayingField
		 *
		 * @param {object} field
		 *        The width, height and ratios of a playing field.
		 *
		 * @param {object} rectangle
		 *        The bounding box of the word to add space for.
		 *
		 * @return {object}
		 *         Returns the extended playing field with updated height and width.
		 */
		function extendPlayingField(field, rectangle) {
		    var height, width, ratioX, ratioY, x, extendWidth, extendHeight, result;

		    if (isObject(field) && isObject(rectangle)) {
		        height = (rectangle.bottom - rectangle.top);
		        width = (rectangle.right - rectangle.left);
		        ratioX = field.ratioX;
		        ratioY = field.ratioY;

		        // Use the same variable to extend both the height and width.
		        x = ((width * ratioX) > (height * ratioY)) ? width : height;

		        // Multiply variable with ratios to preserve aspect ratio.
		        extendWidth = x * ratioX;
		        extendHeight = x * ratioY;

		        // Calculate the size of the new field after adding space for the word.
		        result = merge(field, {
		            // Add space on the left and right.
		            width: field.width + (extendWidth * 2),
		            // Add space on the top and bottom.
		            height: field.height + (extendHeight * 2)
		        });
		    } else {
		        result = field;
		    }

		    // Return the new extended field.
		    return result;
		}

		/**
		 * If a rectangle is outside a give field, then the boundaries of the field is
		 * adjusted accordingly. Modifies the field object which is passed as the first
		 * parameter.
		 *
		 * @private
		 * @function updateFieldBoundaries
		 *
		 * @param {object} field
		 *        The bounding box of a playing field.
		 *
		 * @param {object} placement
		 *        The bounding box for a placed point.
		 *
		 * @return {object}
		 *         Returns a modified field object.
		 */
		function updateFieldBoundaries(field, rectangle) {
		    // TODO improve type checking.
		    if (!isNumber(field.left) || field.left > rectangle.left) {
		        field.left = rectangle.left;
		    }
		    if (!isNumber(field.right) || field.right < rectangle.right) {
		        field.right = rectangle.right;
		    }
		    if (!isNumber(field.top) || field.top > rectangle.top) {
		        field.top = rectangle.top;
		    }
		    if (!isNumber(field.bottom) || field.bottom < rectangle.bottom) {
		        field.bottom = rectangle.bottom;
		    }
		    return field;
		}

		/**
		 * A word cloud is a visualization of a set of words, where the size and
		 * placement of a word is determined by how it is weighted.
		 *
		 * @sample highcharts/demo/wordcloud
		 *         Word Cloud chart
		 *
		 * @extends      plotOptions.column
		 * @excluding    allAreas, boostThreshold, clip, colorAxis, compare,
		 *               compareBase, crisp, cropTreshold, dataGrouping, dataLabels,
		 *               depth, edgeColor, findNearestPointBy, getExtremesFromAll,
		 *               grouping, groupPadding, groupZPadding, joinBy, maxPointWidth,
		 *               minPointLength, navigatorOptions, negativeColor, pointInterval,
		 *               pointIntervalUnit, pointPadding, pointPlacement, pointRange,
		 *               pointStart, pointWidth, pointStart, pointWidth, shadow,
		 *               showCheckbox, showInNavigator, softThreshold, stacking,
		 *               threshold, zoneAxis, zones
		 * @product      highcharts
		 * @since        6.0.0
		 * @optionparent plotOptions.wordcloud
		 */
		var wordCloudOptions = {
		    /**
		     * If there is no space for a word on the playing field, then this option
		     * will allow the playing field to be extended to fit the word. If false
		     * then the word will be dropped from the visualization.
		     *
		     * NB! This option is currently not decided to be published in the API, and
		     * is therefore marked as private.
		     *
		     * @private
		     */
		    allowExtendPlayingField: true,
		    animation: {
		        duration: 500
		    },
		    borderWidth: 0,
		    clip: false, // Something goes wrong with clip. // @todo fix this
		    colorByPoint: true,
		    /**
		     * A threshold determining the minimum font size that can be applied to a
		     * word.
		     */
		    minFontSize: 1,
		    /**
		     * The word with the largest weight will have a font size equal to this
		     * value. The font size of a word is the ratio between its weight and the
		     * largest occuring weight, multiplied with the value of maxFontSize.
		     */
		    maxFontSize: 25,
		    /**
		     * This option decides which algorithm is used for placement, and rotation
		     * of a word. The choice of algorith is therefore a crucial part of the
		     * resulting layout of the wordcloud. It is possible for users to add their
		     * own custom placement strategies for use in word cloud. Read more about it
		     * in our
		     * [documentation](https://www.highcharts.com/docs/chart-and-series-types/word-cloud-series#custom-placement-strategies)
		     *
		     * @validvalue: ["center", "random"]
		     */
		    placementStrategy: 'center',
		    /**
		     * Rotation options for the words in the wordcloud.
		     *
		     * @sample highcharts/plotoptions/wordcloud-rotation
		     *         Word cloud with rotation
		     */
		    rotation: {
		        /**
		         * The smallest degree of rotation for a word.
		         */
		        from: 0,
		        /**
		         * The number of possible orientations for a word, within the range of
		         * `rotation.from` and `rotation.to`.
		         */
		        orientations: 2,
		        /**
		         * The largest degree of rotation for a word.
		         */
		        to: 90
		    },
		    showInLegend: false,
		    /**
		     * Spiral used for placing a word after the initial position experienced a
		     * collision with either another word or the borders.
		     * It is possible for users to add their own custom spiralling algorithms
		     * for use in word cloud. Read more about it in our
		     * [documentation](https://www.highcharts.com/docs/chart-and-series-types/word-cloud-series#custom-spiralling-algorithm)
		     *
		     * @validvalue: ["archimedean", "rectangular", "square"]
		     */
		    spiral: 'rectangular',
		    /**
		     * CSS styles for the words.
		     *
		     * @type    {Highcharts.CSSObject}
		     * @default {"fontFamily":"sans-serif", "fontWeight": "900"}
		     */
		    style: {
		        /** @ignore-option */
		        fontFamily: 'sans-serif',
		        /** @ignore-option */
		        fontWeight: '900'
		    },
		    tooltip: {
		        followPointer: true,
		        pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.weight}</b><br/>'
		    }
		};

		// Properties of the WordCloud series.
		var wordCloudSeries = {
		    animate: Series.prototype.animate,
		    animateDrilldown: noop,
		    animateDrillupFrom: noop,
		    bindAxes: function () {
		        var wordcloudAxis = {
		            endOnTick: false,
		            gridLineWidth: 0,
		            lineWidth: 0,
		            maxPadding: 0,
		            startOnTick: false,
		            title: null,
		            tickPositions: []
		        };
		        Series.prototype.bindAxes.call(this);
		        extend(this.yAxis.options, wordcloudAxis);
		        extend(this.xAxis.options, wordcloudAxis);
		    },
		    /**
		     * Calculates the fontSize of a word based on its weight.
		     *
		     * @private
		     * @function Highcharts.Series#deriveFontSize
		     *
		     * @param {number} [relativeWeight=0]
		     *        The weight of the word, on a scale 0-1.
		     *
		     * @param {number} [maxFontSize=1]
		     *        The maximum font size of a word.
		     *
		     * @param {number} [minFontSize=1]
		     *        The minimum font size of a word.
		     *
		     * @return {number}
		     *         Returns the resulting fontSize of a word. If minFontSize is
		     *         larger then maxFontSize the result will equal minFontSize.
		     */
		    deriveFontSize: function deriveFontSize(
		        relativeWeight,
		        maxFontSize,
		        minFontSize
		    ) {
		        var weight = isNumber(relativeWeight) ? relativeWeight : 0,
		            max = isNumber(maxFontSize) ? maxFontSize : 1,
		            min = isNumber(minFontSize) ? minFontSize : 1;
		        return Math.floor(Math.max(min, weight * max));
		    },
		    drawPoints: function () {
		        var series = this,
		            hasRendered = series.hasRendered,
		            xAxis = series.xAxis,
		            yAxis = series.yAxis,
		            chart = series.chart,
		            group = series.group,
		            options = series.options,
		            animation = options.animation,
		            allowExtendPlayingField = options.allowExtendPlayingField,
		            renderer = chart.renderer,
		            testElement = renderer.text().add(group),
		            placed = [],
		            placementStrategy = series.placementStrategy[
		                options.placementStrategy
		            ],
		            spiral,
		            rotation = options.rotation,
		            scale,
		            weights = series.points
		                .map(function (p) {
		                    return p.weight;
		                }),
		            maxWeight = Math.max.apply(null, weights),
		            data = series.points
		                .sort(function (a, b) {
		                    return b.weight - a.weight; // Sort descending
		                }),
		            field;

		        // Get the dimensions for each word.
		        // Used in calculating the playing field.
		        data.forEach(function (point) {
		            var relativeWeight = 1 / maxWeight * point.weight,
		                fontSize = series.deriveFontSize(
		                    relativeWeight,
		                    options.maxFontSize,
		                    options.minFontSize
		                ),
		                css = extend({
		                    fontSize: fontSize + 'px'
		                }, options.style),
		                bBox;

		            testElement.css(css).attr({
		                x: 0,
		                y: 0,
		                text: point.name
		            });
		            bBox = testElement.getBBox(true);
		            point.dimensions = {
		                height: bBox.height,
		                width: bBox.width
		            };
		        });

		        // Calculate the playing field.
		        field = getPlayingField(xAxis.len, yAxis.len, data);
		        spiral = getSpiral(series.spirals[options.spiral], {
		            field: field
		        });
		        // Draw all the points.
		        data.forEach(function (point) {
		            var relativeWeight = 1 / maxWeight * point.weight,
		                fontSize = series.deriveFontSize(
		                    relativeWeight,
		                    options.maxFontSize,
		                    options.minFontSize
		                ),
		                css = extend({
		                    fontSize: fontSize + 'px',
		                    fill: point.color
		                }, options.style),
		                placement = placementStrategy(point, {
		                    data: data,
		                    field: field,
		                    placed: placed,
		                    rotation: rotation
		                }),
		                attr = {
		                    align: 'center',
		                    'alignment-baseline': 'middle',
		                    x: placement.x,
		                    y: placement.y,
		                    text: point.name,
		                    rotation: placement.rotation
		                },
		                polygon = getPolygon(
		                    placement.x,
		                    placement.y,
		                    point.dimensions.width,
		                    point.dimensions.height,
		                    placement.rotation
		                ),
		                rectangle = getBoundingBoxFromPolygon(polygon),
		                delta = intersectionTesting(point, {
		                    rectangle: rectangle,
		                    polygon: polygon,
		                    field: field,
		                    placed: placed,
		                    spiral: spiral,
		                    rotation: placement.rotation
		                }),
		                animate;

		            // If there is no space for the word, extend the playing field.
		            if (!delta && allowExtendPlayingField) {
		                // Extend the playing field to fit the word.
		                field = extendPlayingField(field, rectangle);

		                // Run intersection testing one more time to place the word.
		                delta = intersectionTesting(point, {
		                    rectangle: rectangle,
		                    polygon: polygon,
		                    field: field,
		                    placed: placed,
		                    spiral: spiral,
		                    rotation: placement.rotation
		                });
		            }
		            // Check if point was placed, if so delete it, otherwise place it on
		            // the correct positions.
		            if (isObject(delta)) {
		                attr.x += delta.x;
		                attr.y += delta.y;
		                rectangle.left += delta.x;
		                rectangle.right += delta.x;
		                rectangle.top += delta.y;
		                rectangle.bottom += delta.y;
		                field = updateFieldBoundaries(field, rectangle);
		                placed.push(point);
		                point.isNull = false;
		            } else {
		                point.isNull = true;
		            }

		            if (animation) {
		                // Animate to new positions
		                animate = {
		                    x: attr.x,
		                    y: attr.y
		                };
		                // Animate from center of chart
		                if (!hasRendered) {
		                    attr.x = 0;
		                    attr.y = 0;
		                // or animate from previous position
		                } else {
		                    delete attr.x;
		                    delete attr.y;
		                }
		            }

		            point.draw({
		                animatableAttribs: animate,
		                attribs: attr,
		                css: css,
		                group: group,
		                renderer: renderer,
		                shapeArgs: undefined,
		                shapeType: 'text'
		            });
		        });

		        // Destroy the element after use.
		        testElement = testElement.destroy();

		        // Scale the series group to fit within the plotArea.
		        scale = getScale(xAxis.len, yAxis.len, field);
		        series.group.attr({
		            scaleX: scale,
		            scaleY: scale
		        });
		    },
		    hasData: function () {
		        var series = this;
		        return (
		            isObject(series) &&
		            series.visible === true &&
		            isArray(series.points) &&
		            series.points.length > 0
		        );
		    },
		    // Strategies used for deciding rotation and initial position of a word. To
		    // implement a custom strategy, have a look at the function random for
		    // example.
		    placementStrategy: {
		        random: function (point, options) {
		            var field = options.field,
		                r = options.rotation;
		            return {
		                x: getRandomPosition(field.width) - (field.width / 2),
		                y: getRandomPosition(field.height) - (field.height / 2),
		                rotation: getRotation(r.orientations, point.index, r.from, r.to)
		            };
		        },
		        center: function (point, options) {
		            var r = options.rotation;
		            return {
		                x: 0,
		                y: 0,
		                rotation: getRotation(r.orientations, point.index, r.from, r.to)
		            };
		        }
		    },
		    pointArrayMap: ['weight'],
		    // Spirals used for placing a word after the initial position experienced a
		    // collision with either another word or the borders. To implement a custom
		    // spiral, look at the function archimedeanSpiral for example.
		    spirals: {
		        'archimedean': archimedeanSpiral,
		        'rectangular': rectangularSpiral,
		        'square': squareSpiral
		    },
		    utils: {
		        extendPlayingField: extendPlayingField,
		        getRotation: getRotation,
		        isPolygonsColliding: isPolygonsColliding,
		        rotate2DToOrigin: polygon.rotate2DToOrigin,
		        rotate2DToPoint: polygon.rotate2DToPoint
		    },
		    getPlotBox: function () {
		        var series = this,
		            chart = series.chart,
		            inverted = chart.inverted,
		            // Swap axes for inverted (#2339)
		            xAxis = series[(inverted ? 'yAxis' : 'xAxis')],
		            yAxis = series[(inverted ? 'xAxis' : 'yAxis')],
		            width = xAxis ? xAxis.len : chart.plotWidth,
		            height = yAxis ? yAxis.len : chart.plotHeight,
		            x = xAxis ? xAxis.left : chart.plotLeft,
		            y = yAxis ? yAxis.top : chart.plotTop;
		        return {
		            translateX: x + (width / 2),
		            translateY: y + (height / 2),
		            scaleX: 1, // #1623
		            scaleY: 1
		        };
		    }
		};

		// Properties of the Sunburst series.
		var wordCloudPoint = {
		    draw: drawPoint,
		    shouldDraw: function shouldDraw() {
		        var point = this;
		        return !point.isNull;
		    },
		    weight: 1
		};

		/**
		 * A `wordcloud` series. If the [type](#series.wordcloud.type) option is not
		 * specified, it is inherited from [chart.type](#chart.type).
		 *
		 * @extends   series,plotOptions.wordcloud
		 * @product   highcharts
		 * @apioption series.wordcloud
		 */

		/**
		 * An array of data points for the series. For the `wordcloud` series type,
		 * points can be given in the following ways:
		 *
		 * 1. An array of arrays with 2 values. In this case, the values correspond to
		 *    `name,weight`.
		 *    ```js
		 *    data: [
		 *        ['Lorem', 4],
		 *        ['Ipsum', 1]
		 *    ]
		 *    ```
		 *
		 * 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.arearange.turboThreshold), this option is not
		 *    available.
		 *    ```js
		 *    data: [{
		 *        name: "Lorem",
		 *        weight: 4
		 *    }, {
		 *        name: "Ipsum",
		 *        weight: 1
		 *    }]
		 *    ```
		 *
		 * @type      {Array<Array<string,number>|*>}
		 * @extends   series.line.data
		 * @excluding drilldown, marker, x, y
		 * @product   highcharts
		 * @apioption series.wordcloud.data
		 */

		/**
		 * The name decides the text for a word.
		 *
		 * @type      {string}
		 * @since     6.0.0
		 * @product   highcharts
		 * @apioption series.sunburst.data.name
		 */

		/**
		 * The weighting of a word. The weight decides the relative size of a word
		 * compared to the rest of the collection.
		 *
		 * @type      {number}
		 * @since     6.0.0
		 * @product   highcharts
		 * @apioption series.sunburst.data.weight
		 */

		/**
		 * @private
		 * @class
		 * @name Highcharts.seriesTypes.wordcloud
		 *
		 * @augments Highcharts.Series
		 */
		H.seriesType(
		    'wordcloud',
		    'column',
		    wordCloudOptions,
		    wordCloudSeries,
		    wordCloudPoint
		);

	}(Highcharts, draw, collision));
	(function (H) {
		/* *
		 * X-range series module
		 *
		 * (c) 2010-2018 Torstein Honsi, Lars A. V. Cabrera
		 *
		 * License: www.highcharts.com/license
		 */



		var addEvent = H.addEvent,
		    defined = H.defined,
		    color = H.Color,
		    columnType = H.seriesTypes.column,
		    correctFloat = H.correctFloat,
		    isNumber = H.isNumber,
		    isObject = H.isObject,
		    merge = H.merge,
		    pick = H.pick,
		    seriesType = H.seriesType,
		    seriesTypes = H.seriesTypes,
		    Axis = H.Axis,
		    Point = H.Point,
		    Series = H.Series;

		/**
		 * Return color of a point based on its category.
		 *
		 * @private
		 * @function getColorByCategory
		 *
		 * @param {object} series
		 *        The series which the point belongs to.
		 *
		 * @param {object} point
		 *        The point to calculate its color for.
		 *
		 * @return {object}
		 *         Returns an object containing the properties color and colorIndex.
		 */
		function getColorByCategory(series, point) {
		    var colors = series.options.colors || series.chart.options.colors,
		        colorCount = colors ?
		            colors.length :
		            series.chart.options.chart.colorCount,
		        colorIndex = point.y % colorCount,
		        color = colors && colors[colorIndex];

		    return {
		        colorIndex: colorIndex,
		        color: color
		    };
		}

		/**
		 * @private
		 * @class
		 * @name Highcharts.seriesTypes.xrange
		 *
		 * @augments Highcharts.Series
		 */
		seriesType('xrange', 'column'

		/**
		 * The X-range series displays ranges on the X axis, typically time intervals
		 * with a start and end date.
		 *
		 * @sample {highcharts} highcharts/demo/x-range/
		 *         X-range
		 * @sample {highcharts} highcharts/css/x-range/
		 *         Styled mode X-range
		 * @sample {highcharts} highcharts/chart/inverted-xrange/
		 *         Inverted X-range
		 *
		 * @extends      plotOptions.column
		 * @since        6.0.0
		 * @product      highcharts highstock gantt
		 * @excluding    boostThreshold, crisp, cropThreshold, depth, edgeColor,
		 *               edgeWidth, findNearestPointBy, getExtremesFromAll,
		 *               negativeColor, pointInterval, pointIntervalUnit,
		 *               pointPlacement, pointRange, pointStart, softThreshold,
		 *               stacking, threshold, data
		 * @optionparent plotOptions.xrange
		 */
		, {

		    /**
		     * A partial fill for each point, typically used to visualize how much of
		     * a task is performed. The partial fill object can be set either on series
		     * or point level.
		     *
		     * @sample {highcharts} highcharts/demo/x-range
		     *         X-range with partial fill
		     *
		     * @product   highcharts highstock gantt
		     * @apioption plotOptions.xrange.partialFill
		     */

		    /**
		     * The fill color to be used for partial fills. Defaults to a darker shade
		     * of the point color.
		     *
		     * @type      {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
		     * @product   highcharts highstock gantt
		     * @apioption plotOptions.xrange.partialFill.fill
		     */

		    /**
		     * A partial fill for each point, typically used to visualize how much of
		     * a task is performed. See [completed](series.gantt.data.completed).
		     *
		     * @sample gantt/demo/progress-indicator
		     *         Gantt with progress indicator
		     *
		     * @product   gantt
		     * @apioption plotOptions.gantt.partialFill
		     */

		    /**
		     * In an X-range series, this option makes all points of the same Y-axis
		     * category the same color.
		     */
		    colorByPoint: true,

		    dataLabels: {

		        verticalAlign: 'middle',

		        inside: true,

		        /**
		         * The default formatter for X-range data labels displays the percentage
		         * of the partial fill amount.
		         *
		         * @type    {Highcharts.FormatterCallbackFunction<Highcharts.SeriesDataLabelsFormatterContextObject>}
		         * @default function () { return (amount * 100) + '%'; }
		         */
		        formatter: function () {
		            var point = this.point,
		                amount = point.partialFill;
		            if (isObject(amount)) {
		                amount = amount.amount;
		            }
		            if (!defined(amount)) {
		                amount = 0;
		            }
		            return correctFloat(amount * 100) + '%';
		        }
		    },

		    tooltip: {

		        headerFormat: '<span style="font-size: 10px">{point.x} - {point.x2}</span><br/>',

		        pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.yCategory}</b><br/>'
		    },

		    borderRadius: 3,

		    pointRange: 0

		}, {

		    type: 'xrange',
		    parallelArrays: ['x', 'x2', 'y'],
		    requireSorting: false,
		    animate: seriesTypes.line.prototype.animate,
		    cropShoulder: 1,
		    getExtremesFromAll: true,
		    autoIncrement: H.noop,
		    /**
		     * Borrow the column series metrics, but with swapped axes. This gives free
		     * access to features like groupPadding, grouping, pointWidth etc.
		     *
		     * @private
		     * @function Higcharts.Series#getColumnMetrics
		     *
		     * @return {Highcharts.ColumnMetricsObject}
		     */
		    getColumnMetrics: function () {
		        var metrics,
		            chart = this.chart;

		        function swapAxes() {
		            chart.series.forEach(function (s) {
		                var xAxis = s.xAxis;
		                s.xAxis = s.yAxis;
		                s.yAxis = xAxis;
		            });
		        }

		        swapAxes();

		        metrics = columnType.prototype.getColumnMetrics.call(this);

		        swapAxes();

		        return metrics;
		    },

		    /**
		     * Override cropData to show a point where x or x2 is outside visible range,
		     * but one of them is inside.
		     *
		     * @private
		     * @function Highcharts.Series#cropData
		     *
		     * @param {Array<number>} xData
		     *
		     * @param {Array<number>} yData
		     *
		     * @param {number} min
		     *
		     * @param {number} max
		     *
		     * @param {number} [cropShoulder]
		     *
		     * @return {*}
		     */
		    cropData: function (xData, yData, min, max) {

		        // Replace xData with x2Data to find the appropriate cropStart
		        var cropData = Series.prototype.cropData,
		            crop = cropData.call(this, this.x2Data, yData, min, max);

		        // Re-insert the cropped xData
		        crop.xData = xData.slice(crop.start, crop.end);

		        return crop;
		    },

		    /**
		     * @private
		     * @function Highcharts.Series#translatePoint
		     *
		     * @param {Highcharts.Point} point
		     */
		    translatePoint: function (point) {
		        var series = this,
		            xAxis = series.xAxis,
		            yAxis = series.yAxis,
		            metrics = series.columnMetrics,
		            options = series.options,
		            minPointLength = options.minPointLength || 0,
		            plotX = point.plotX,
		            posX = pick(point.x2, point.x + (point.len || 0)),
		            plotX2 = xAxis.translate(posX, 0, 0, 0, 1),
		            length = Math.abs(plotX2 - plotX),
		            widthDifference,
		            shapeArgs,
		            partialFill,
		            inverted = this.chart.inverted,
		            borderWidth = pick(options.borderWidth, 1),
		            crisper = borderWidth % 2 / 2,
		            yOffset = metrics.offset,
		            pointHeight = Math.round(metrics.width),
		            dlLeft,
		            dlRight,
		            dlWidth;

		        if (minPointLength) {
		            widthDifference = minPointLength - length;
		            if (widthDifference < 0) {
		                widthDifference = 0;
		            }
		            plotX -= widthDifference / 2;
		            plotX2 += widthDifference / 2;
		        }

		        plotX = Math.max(plotX, -10);
		        plotX2 = Math.min(Math.max(plotX2, -10), xAxis.len + 10);

		        // Handle individual pointWidth
		        if (defined(point.options.pointWidth)) {
		            yOffset -= (Math.ceil(point.options.pointWidth) - pointHeight) / 2;
		            pointHeight = Math.ceil(point.options.pointWidth);
		        }

		        // Apply pointPlacement to the Y axis
		        if (
		            options.pointPlacement &&
		            isNumber(point.plotY) &&
		            yAxis.categories
		        ) {
		            point.plotY = yAxis
		                .translate(point.y, 0, 1, 0, 1, options.pointPlacement);
		        }

		        point.shapeArgs = {
		            x: Math.floor(Math.min(plotX, plotX2)) + crisper,
		            y: Math.floor(point.plotY + yOffset) + crisper,
		            width: Math.round(Math.abs(plotX2 - plotX)),
		            height: pointHeight,
		            r: series.options.borderRadius
		        };

		        // Align data labels inside the shape and inside the plot area
		        dlLeft = point.shapeArgs.x;
		        dlRight = dlLeft + point.shapeArgs.width;
		        if (dlLeft < 0 || dlRight > xAxis.len) {
		            dlLeft = Math.min(xAxis.len, Math.max(0, dlLeft));
		            dlRight = Math.max(0, Math.min(dlRight, xAxis.len));
		            dlWidth = dlRight - dlLeft;
		            point.dlBox = merge(point.shapeArgs, {
		                x: dlLeft,
		                width: dlRight - dlLeft,
		                centerX: dlWidth ? dlWidth / 2 : null
		            });

		        } else {
		            point.dlBox = null;
		        }

		        // Tooltip position
		        point.tooltipPos[0] += inverted ? 0 : length / 2;
		        point.tooltipPos[1] -= inverted ? -length / 2 : metrics.width / 2;

		        // Add a partShapeArgs to the point, based on the shapeArgs property
		        partialFill = point.partialFill;
		        if (partialFill) {
		            // Get the partial fill amount
		            if (isObject(partialFill)) {
		                partialFill = partialFill.amount;
		            }
		            // If it was not a number, assume 0
		            if (!isNumber(partialFill)) {
		                partialFill = 0;
		            }
		            shapeArgs = point.shapeArgs;
		            point.partShapeArgs = {
		                x: shapeArgs.x,
		                y: shapeArgs.y,
		                width: shapeArgs.width,
		                height: shapeArgs.height,
		                r: series.options.borderRadius
		            };
		            point.clipRectArgs = {
		                x: shapeArgs.x,
		                y: shapeArgs.y,
		                width: Math.max(
		                    Math.round(
		                        length * partialFill +
		                        (point.plotX - plotX)
		                    ),
		                    0
		                ),
		                height: shapeArgs.height
		            };
		        }
		    },

		    /**
		     * @private
		     * @function Highcharts.Series#translate
		     */
		    translate: function () {
		        columnType.prototype.translate.apply(this, arguments);
		        this.points.forEach(function (point) {
		            this.translatePoint(point);
		        }, this);
		    },

		    /**
		     * Draws a single point in the series. Needed for partial fill.
		     *
		     * This override turns point.graphic into a group containing the original
		     * graphic and an overlay displaying the partial fill.
		     *
		     * @private
		     * @function Highcharts.Series#drawPoint
		     *
		     * @param {Highcharts.Point} point
		     *        An instance of Point in the series.
		     *
		     * @param {"animate"|"attr"} verb
		     *        'animate' (animates changes) or 'attr' (sets options)
		     */
		    drawPoint: function (point, verb) {
		        var series = this,
		            seriesOpts = series.options,
		            renderer = series.chart.renderer,
		            graphic = point.graphic,
		            type = point.shapeType,
		            shapeArgs = point.shapeArgs,
		            partShapeArgs = point.partShapeArgs,
		            clipRectArgs = point.clipRectArgs,
		            pfOptions = point.partialFill,
		            fill,
		            state = point.selected && 'select',
		            cutOff = seriesOpts.stacking && !seriesOpts.borderRadius;

		        if (!point.isNull) {

		            // Original graphic
		            if (graphic) { // update
		                point.graphicOriginal[verb](
		                    merge(shapeArgs)
		                );

		            } else {
		                point.graphic = graphic = renderer.g('point')
		                    .addClass(point.getClassName())
		                    .add(point.group || series.group);

		                point.graphicOriginal = renderer[type](shapeArgs)
		                    .addClass(point.getClassName())
		                    .addClass('highcharts-partfill-original')
		                    .add(graphic);
		            }

		            // Partial fill graphic
		            if (partShapeArgs) {
		                if (point.graphicOverlay) {
		                    point.graphicOverlay[verb](
		                        merge(partShapeArgs)
		                    );
		                    point.clipRect.animate(
		                        merge(clipRectArgs)
		                    );

		                } else {

		                    point.clipRect = renderer.clipRect(
		                        clipRectArgs.x,
		                        clipRectArgs.y,
		                        clipRectArgs.width,
		                        clipRectArgs.height
		                    );

		                    point.graphicOverlay = renderer[type](partShapeArgs)
		                        .addClass('highcharts-partfill-overlay')
		                        .add(graphic)
		                        .clip(point.clipRect);
		                }
		            }


		            // Presentational
		            if (!series.chart.styledMode) {
		                point.graphicOriginal
		                    .attr(series.pointAttribs(point, state))
		                    .shadow(seriesOpts.shadow, null, cutOff);
		                if (partShapeArgs) {
		                    // Ensure pfOptions is an object
		                    if (!isObject(pfOptions)) {
		                        pfOptions = {};
		                    }
		                    if (isObject(seriesOpts.partialFill)) {
		                        pfOptions = merge(pfOptions, seriesOpts.partialFill);
		                    }

		                    fill = (
		                        pfOptions.fill ||
		                        color(point.color || series.color).brighten(-0.3).get()
		                    );

		                    point.graphicOverlay
		                        .attr(series.pointAttribs(point, state))
		                        .attr({
		                            'fill': fill
		                        })
		                        .shadow(seriesOpts.shadow, null, cutOff);
		                }
		            }

		        } else if (graphic) {
		            point.graphic = graphic.destroy(); // #1269
		        }
		    },

		    /**
		     * @private
		     * @function Highcharts.Series#drawPoints
		     */
		    drawPoints: function () {
		        var series = this,
		            verb = series.getAnimationVerb();

		        // Draw the columns
		        series.points.forEach(function (point) {
		            series.drawPoint(point, verb);
		        });
		    },


		    /**
		     * Returns "animate", or "attr" if the number of points is above the
		     * animation limit.
		     *
		     * @private
		     * @function Highcharts.Series#getAnimationVerb
		     *
		     * @return {string}
		     */
		    getAnimationVerb: function () {
		        return this.chart.pointCount < (this.options.animationLimit || 250) ?
		             'animate' : 'attr';
		    }

		    /*
		    // Override to remove stroke from points. For partial fill.
		    pointAttribs: function () {
		        var series = this,
		            retVal = columnType.prototype.pointAttribs.apply(series, arguments);

		        //retVal['stroke-width'] = 0;
		        return retVal;
		    }
		    //*/

		}, { // Point class properties
		    /**
		     * Extend applyOptions so that `colorByPoint` for x-range means that one
		     * color is applied per Y axis category.
		     *
		     * @private
		     * @function Highcharts.Point#applyOptions
		     *
		     * @return {Highcharts.Series}
		     */
		    applyOptions: function () {
		        var point = Point.prototype.applyOptions.apply(this, arguments),
		            series = point.series,
		            colorByPoint;

		        if (series.options.colorByPoint && !point.options.color) {
		            colorByPoint = getColorByCategory(series, point);

		            if (!series.chart.styledMode) {
		                point.color = colorByPoint.color;
		            }

		            if (!point.options.colorIndex) {
		                point.colorIndex = colorByPoint.colorIndex;
		            }
		        }

		        return point;
		    },
		    /**
		     * Extend init to have y default to 0.
		     *
		     * @private
		     * @function Highcharts.Point#init
		     *
		     * @return {Highcharts.Series}
		     */
		    init: function () {
		        Point.prototype.init.apply(this, arguments);

		        if (!this.y) {
		            this.y = 0;
		        }

		        return this;
		    },

		    /**
		     * @private
		     * @function Highcharts.Point#setState
		     */
		    setState: function () {
		        Point.prototype.setState.apply(this, arguments);

		        this.series.drawPoint(this, this.series.getAnimationVerb());
		    },

		    /**
		     * @private
		     * @function Highcharts.Point#getLabelConfig
		     *
		     * @return {Highcharts.PointLabelObject}
		     */
		    // Add x2 and yCategory to the available properties for tooltip formats
		    getLabelConfig: function () {
		        var point = this,
		            cfg = Point.prototype.getLabelConfig.call(point),
		            yCats = point.series.yAxis.categories;

		        cfg.x2 = point.x2;
		        cfg.yCategory = point.yCategory = yCats && yCats[point.y];
		        return cfg;
		    },
		    tooltipDateKeys: ['x', 'x2'],

		    /**
		     * @private
		     * @function Highcharts.Point#isValid
		     *
		     * @return {boolean}
		     */
		    isValid: function () {
		        return typeof this.x === 'number' &&
		            typeof this.x2 === 'number';
		    }
		});

		// Max x2 should be considered in xAxis extremes
		addEvent(Axis, 'afterGetSeriesExtremes', function () {
		    var axis = this,
		        axisSeries = axis.series,
		        dataMax,
		        modMax;

		    if (axis.isXAxis) {
		        dataMax = pick(axis.dataMax, -Number.MAX_VALUE);
		        axisSeries.forEach(function (series) {
		            if (series.x2Data) {
		                series.x2Data.forEach(function (val) {
		                    if (val > dataMax) {
		                        dataMax = val;
		                        modMax = true;
		                    }
		                });
		            }
		        });
		        if (modMax) {
		            axis.dataMax = dataMax;
		        }
		    }
		});


		/**
		 * An `xrange` series. If the [type](#series.xrange.type) option is not
		 * specified, it is inherited from [chart.type](#chart.type).
		 *
		 * @extends   series,plotOptions.xrange
		 * @excluding boostThreshold, crisp, cropThreshold, depth, edgeColor, edgeWidth,
		 *            findNearestPointBy, getExtremesFromAll, negativeColor,
		 *            pointInterval, pointIntervalUnit, pointPlacement, pointRange,
		 *            pointStart, softThreshold, stacking, threshold
		 * @product   highcharts highstock gantt
		 * @apioption series.xrange
		 */

		/**
		 * An array of data points for the series. For the `xrange` 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.
		 *    ```js
		 *    data: [{
		 *        x: Date.UTC(2017, 0, 1),
		 *        x2: Date.UTC(2017, 0, 3),
		 *        name: "Test",
		 *        y: 0,
		 *        color: "#00FF00"
		 *    }, {
		 *        x: Date.UTC(2017, 0, 4),
		 *        x2: Date.UTC(2017, 0, 5),
		 *        name: "Deploy",
		 *        y: 1,
		 *        color: "#FF0000"
		 *    }]
		 *    ```
		 *
		 * @sample {highcharts} highcharts/series/data-array-of-objects/
		 *         Config objects
		 *
		 * @type      {Array<*>}
		 * @extends   series.line.data
		 * @product   highcharts highstock gantt
		 * @apioption series.xrange.data
		 */

		/**
		 * The starting X value of the range point.
		 *
		 * @sample {highcharts} highcharts/demo/x-range
		 *         X-range
		 *
		 * @type      {number}
		 * @product   highcharts highstock gantt
		 * @apioption series.xrange.data.x
		 */

		/**
		 * The ending X value of the range point.
		 *
		 * @sample {highcharts} highcharts/demo/x-range
		 *         X-range
		 *
		 * @type      {number}
		 * @product   highcharts highstock gantt
		 * @apioption series.xrange.data.x2
		 */

		/**
		 * The Y value of the range point.
		 *
		 * @sample {highcharts} highcharts/demo/x-range
		 *         X-range
		 *
		 * @type      {number}
		 * @product   highcharts highstock gantt
		 * @apioption series.xrange.data.y
		 */

		/**
		 * A partial fill for each point, typically used to visualize how much of
		 * a task is performed. The partial fill object can be set either on series
		 * or point level.
		 *
		 * @sample {highcharts} highcharts/demo/x-range
		 *         X-range with partial fill
		 *
		 * @product   highcharts highstock gantt
		 * @apioption series.xrange.data.partialFill
		 */

		/**
		 * The amount of the X-range point to be filled. Values can be 0-1 and are
		 * converted to percentages in the default data label formatter.
		 *
		 * @type      {number}
		 * @product   highcharts highstock gantt
		 * @apioption series.xrange.data.partialFill.amount
		 */

		/**
		 * The fill color to be used for partial fills. Defaults to a darker shade
		 * of the point color.
		 *
		 * @type      {Highcharts.ColorString}
		 * @product   highcharts highstock gantt
		 * @apioption series.xrange.data.partialFill.fill
		 */

	}(Highcharts));
	(function (H) {
		/* *
		 * (c) 2010-2018 Torstein Honsi
		 *
		 * License: www.highcharts.com/license
		 */



		var Series = H.Series,
		    seriesType = H.seriesType;

		/**
		 * Scatter series type.
		 *
		 * @private
		 * @class
		 * @name Highcharts.seriesTypes.scatter
		 *
		 * @augments Highcharts.Series
		 */
		seriesType('scatter', 'line'

		/**
		 * A scatter plot uses cartesian coordinates to display values for two
		 * variables for a set of data.
		 *
		 * @sample {highcharts} highcharts/demo/scatter/
		 *         Scatter plot
		 *
		 * @extends      plotOptions.line
		 * @excluding    pointPlacement, shadow, useOhlcData
		 * @product      highcharts highstock
		 * @optionparent plotOptions.scatter
		 */
		, {

		    /**
		     * The width of the line connecting the data points.
		     *
		     * @sample {highcharts} highcharts/plotoptions/scatter-linewidth-none/
		     *         0 by default
		     * @sample {highcharts} highcharts/plotoptions/scatter-linewidth-1/
		     *         1px
		     *
		     * @product highcharts highstock
		     */
		    lineWidth: 0,

		    findNearestPointBy: 'xy',

		    marker: {

		        enabled: true // Overrides auto-enabling in line series (#3647)
		    },

		    /**
		     * Sticky tracking of mouse events. When true, the `mouseOut` event
		     * on a series isn't triggered until the mouse moves over another series,
		     * or out of the plot area. When false, the `mouseOut` event on a series
		     * is triggered when the mouse leaves the area around the series' graph
		     * or markers. This also implies the tooltip. When `stickyTracking`
		     * is false and `tooltip.shared` is false, the tooltip will be hidden
		     * when moving the mouse between series.
		     *
		     * @type      {boolean}
		     * @default   false
		     * @product   highcharts highstock
		     * @apioption plotOptions.scatter.stickyTracking
		     */

		    /**
		     * A configuration object for the tooltip rendering of each single
		     * series. Properties are inherited from [tooltip](#tooltip).
		     * Overridable properties are `headerFormat`, `pointFormat`, `yDecimals`,
		     * `xDateFormat`, `yPrefix` and `ySuffix`. Unlike other series, in
		     * a scatter plot the series.name by default shows in the headerFormat
		     * and point.x and point.y in the pointFormat.
		     *
		     * @product highcharts highstock
		     */
		    tooltip: {
		        headerFormat:
		            '<span style="color:{point.color}">\u25CF</span> ' +
		            '<span style="font-size: 10px"> {series.name}</span><br/>',
		        pointFormat: 'x: <b>{point.x}</b><br/>y: <b>{point.y}</b><br/>'
		    }

		// Prototype members
		}, {
		    sorted: false,
		    requireSorting: false,
		    noSharedTooltip: true,
		    trackerGroups: ['group', 'markerGroup', 'dataLabelsGroup'],
		    takeOrdinalPosition: false, // #2342

		    /**
		     * @private
		     * @function Highcharts.seriesTypes.scatter#drawGraph
		     */
		    drawGraph: function () {
		        if (this.options.lineWidth) {
		            Series.prototype.drawGraph.call(this);
		        }
		    }
		});

		/**
		 * A `scatter` series. If the [type](#series.scatter.type) option is
		 * not specified, it is inherited from [chart.type](#chart.type).
		 *
		 * @extends   series,plotOptions.scatter
		 * @excluding dataParser, dataURL, useOhlcData
		 * @product   highcharts highstock
		 * @apioption series.scatter
		 */

		/**
		 * An array of data points for the series. For the `scatter` series
		 * type, points can be given in the following ways:
		 *
		 * 1. An array of numerical values. In this case, the numerical values will be
		 *    interpreted as `y` options. The `x` values will be automatically
		 *    calculated, either starting at 0 and incremented by 1, or from
		 *    `pointStart` and `pointInterval` given in the series options. If the axis
		 *    has categories, these will be used. Example:
		 *    ```js
		 *    data: [0, 5, 3, 5]
		 *    ```
		 *
		 * 2. An array of arrays with 2 values. In this case, the values correspond to
		 *    `x,y`. If the first value is a string, it is applied as the name of the
		 *    point, and the `x` value is inferred.
		 *    ```js
		 *    data: [
		 *        [0, 0],
		 *        [1, 8],
		 *        [2, 9]
		 *    ]
		 *    ```
		 *
		 * 3. 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.scatter.turboThreshold), this option is not
		 *    available.
		 *    ```js
		 *    data: [{
		 *        x: 1,
		 *        y: 2,
		 *        name: "Point2",
		 *        color: "#00FF00"
		 *    }, {
		 *        x: 1,
		 *        y: 4,
		 *        name: "Point1",
		 *        color: "#FF00FF"
		 *    }]
		 *    ```
		 *
		 * @sample {highcharts} highcharts/chart/reflow-true/
		 *         Numerical values
		 * @sample {highcharts} highcharts/series/data-array-of-arrays/
		 *         Arrays of numeric x and y
		 * @sample {highcharts} highcharts/series/data-array-of-arrays-datetime/
		 *         Arrays of datetime x and y
		 * @sample {highcharts} highcharts/series/data-array-of-name-value/
		 *         Arrays of point.name and y
		 * @sample {highcharts} highcharts/series/data-array-of-objects/
		 *         Config objects
		 *
		 * @type      {Array<number|Array<(number|string),number>|*>}
		 * @extends   series.line.data
		 * @product   highcharts highstock
		 * @apioption series.scatter.data
		 */

	}(Highcharts));
	(function (H) {
		/* *
		 * (c) 2010-2018 Highsoft AS
		 *
		 * Author: Paweł Potaczek
		 *
		 * License: www.highcharts.com/license
		 */

		/**
		 * @interface Highcharts.LegendBubbleLegendFormatterContextObject
		 *//**
		 * The center y position of the range.
		 * @name Highcharts.LegendBubbleLegendFormatterContextObject#center
		 * @type {number}
		 *//**
		 * The radius of the bubble range.
		 * @name Highcharts.LegendBubbleLegendFormatterContextObject#radius
		 * @type {number}
		 *//**
		 * The bubble value.
		 * @name Highcharts.LegendBubbleLegendFormatterContextObject#value
		 * @type {number}
		 */



		var Series = H.Series,
		    Legend = H.Legend,
		    Chart = H.Chart,

		    addEvent = H.addEvent,
		    wrap = H.wrap,
		    color = H.color,
		    isNumber = H.isNumber,
		    numberFormat = H.numberFormat,
		    objectEach = H.objectEach,
		    merge = H.merge,
		    noop = H.noop,
		    pick = H.pick,
		    stableSort = H.stableSort,
		    setOptions = H.setOptions,
		    arrayMin = H.arrayMin,
		    arrayMax = H.arrayMax;

		setOptions({  // Set default bubble legend options
		    legend: {
		        /**
		         * The bubble legend is an additional element in legend which presents
		         * the scale of the bubble series. Individual bubble ranges can be
		         * defined by user or calculated from series. In the case of
		         * automatically calculated ranges, a 1px margin of error is permitted.
		         * Requires `highcharts-more.js`.
		         *
		         * @since        7.0.0
		         * @product      highcharts highstock highmaps
		         * @optionparent legend.bubbleLegend
		         */
		        bubbleLegend: {
		            /**
		             * The color of the ranges borders, can be also defined for an
		             * individual range.
		             *
		             * @sample highcharts/bubble-legend/similartoseries/
		             *         Similat look to the bubble series
		             * @sample highcharts/bubble-legend/bordercolor/
		             *         Individual bubble border color
		             *
		             * @type {Highcharts.ColorString}
		             */
		            borderColor: undefined,
		            /**
		             * The width of the ranges borders in pixels, can be also defined
		             * for an individual range.
		             */
		            borderWidth: 2,
		            /**
		             * An additional class name to apply to the bubble legend' circle
		             * graphical elements. This option does not replace default class
		             * names of the graphical element.
		             *
		             * @sample {highcharts} highcharts/css/bubble-legend/
		             *         Styling by CSS
		             *
		             * @type {string}
		             */
		            className: undefined,
		            /**
		             * The main color of the bubble legend. Applies to ranges, if
		             * individual color is not defined.
		             *
		             * @sample highcharts/bubble-legend/similartoseries/
		             *         Similat look to the bubble series
		             * @sample highcharts/bubble-legend/color/
		             *         Individual bubble color
		             *
		             * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
		             */
		            color: undefined,
		            /**
		             * An additional class name to apply to the bubble legend's
		             * connector graphical elements. This option does not replace
		             * default class names of the graphical element.
		             *
		             * @sample {highcharts} highcharts/css/bubble-legend/
		             *         Styling by CSS
		             *
		             * @type {string}
		             */
		            connectorClassName: undefined,
		            /**
		             * The color of the connector, can be also defined
		             * for an individual range.
		             *
		             * @type {Highcharts.ColorString}
		             */
		            connectorColor: undefined,
		            /**
		             * The length of the connectors in pixels. If labels are centered,
		             * the distance is reduced to 0.
		             *
		             * @sample highcharts/bubble-legend/connectorandlabels/
		             *         Increased connector length
		             */
		            connectorDistance: 60,
		            /**
		             * The width of the connectors in pixels.
		             *
		             * @sample highcharts/bubble-legend/connectorandlabels/
		             *         Increased connector width
		             */
		            connectorWidth: 1,
		            /**
		             * Enable or disable the bubble legend.
		             */
		            enabled: false,
		            /**
		             * Options for the bubble legend labels.
		             */
		            labels: {
		                /**
		                 * An additional class name to apply to the bubble legend
		                 * label graphical elements. This option does not replace
		                 * default class names of the graphical element.
		                 *
		                 * @sample {highcharts} highcharts/css/bubble-legend/
		                 *         Styling by CSS
		                 *
		                 * @type {string}
		                 */
		                className: undefined,
		                /**
		                 * Whether to allow data labels to overlap.
		                 */
		                allowOverlap: false,
		                /**
		                 * A [format string](http://docs.highcharts.com/#formatting)
		                 * for the bubble legend labels. Available variables are the
		                 * same as for `formatter`.
		                 *
		                 * @sample highcharts/bubble-legend/format/
		                 *         Add a unit
		                 *
		                 * @type {string}
		                 */
		                format: '',
		                /**
		                 * Available `this` properties are:
		                 *
		                 * - `this.value`: The bubble value.
		                 *
		                 * - `this.radius`: The radius of the bubble range.
		                 *
		                 * - `this.center`: The center y position of the range.
		                 *
		                 * @type {Highcharts.FormatterCallbackFunction<Highcharts.LegendBubbleLegendFormatterContextObject>}
		                 */
		                formatter: undefined,
		                /**
		                 * The alignment of the labels compared to the bubble legend.
		                 * Can be one of `left`, `center` or `right`.
		                 * @validvalue ["left", "center", "right"]
		                 *
		                 * @sample highcharts/bubble-legend/connectorandlabels/
		                 *         Labels on left
		                 *
		                 * @validvalue ["left", "center", "right"]
		                 */
		                align: 'right',
		                /**
		                 * CSS styles for the labels.
		                 *
		                 * @type {Highcharts.CSSObject}
		                 */
		                style: {
		                    /** @ignore-option */
		                    fontSize: 10,
		                    /** @ignore-option */
		                    color: undefined
		                },
		                /**
		                 * The x position offset of the label relative to the
		                 * connector.
		                 */
		                x: 0,
		                /**
		                 * The y position offset of the label relative to the
		                 * connector.
		                 */
		                y: 0
		            },
		            /**
		             * Miximum bubble legend range size. If values for ranges are not
		             * specified, the `minSize` and the `maxSize` are calculated from
		             * bubble series.
		             */
		            maxSize: 60,  // Number
		            /**
		             * Minimum bubble legend range size. If values for ranges are not
		             * specified, the `minSize` and the `maxSize` are calculated from
		             * bubble series.
		             */
		            minSize: 10,  // Number
		            /**
		             * The position of the bubble legend in the legend.
		             * @sample highcharts/bubble-legend/connectorandlabels/
		             *         Bubble legend as last item in legend
		             */
		            legendIndex: 0, // Number
		            /**
		             * Options for specific range. One range consists of bubble, label
		             * and connector.
		             *
		             * @sample highcharts/bubble-legend/ranges/
		             *         Manually defined ranges
		             * @sample highcharts/bubble-legend/autoranges/
		             *         Auto calculated ranges
		             *
		             * @type {Array<*>}
		             */
		            ranges: {
		               /**
		                * Range size value, similar to bubble Z data.
		                */
		                value: undefined,
		                /**
		                 * The color of the border for individual range.
		                 * @type {Highcharts.ColorString}
		                 */
		                borderColor: undefined,
		                /**
		                 * The color of the bubble for individual range.
		                 * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
		                 */
		                color: undefined,
		                /**
		                 * The color of the connector for individual range.
		                 * @type {Highcharts.ColorString}
		                 */
		                connectorColor: undefined
		            },
		            /**
		             * Whether the bubble legend range value should be represented by
		             * the area or the width of the bubble. The default, area,
		             * corresponds best to the human perception of the size of each
		             * bubble.
		             *
		             * @sample highcharts/bubble-legend/ranges/
		             *         Size by width
		             *
		             * @validvalue ["area", "width"]
		             */
		            sizeBy: 'area',
		            /**
		             * When this is true, the absolute value of z determines the size of
		             * the bubble. This means that with the default zThreshold of 0, a
		             * bubble of value -1 will have the same size as a bubble of value
		             * 1, while a bubble of value 0 will have a smaller size according
		             * to minSize.
		             */
		            sizeByAbsoluteValue: false,
		            /**
		             * Define the visual z index of the bubble legend.
		             */
		            zIndex: 1,
		            /**
		             * Ranges with with lower value than zThreshold, are skipped.
		             */
		            zThreshold: 0
		        }
		    }
		});

		/**
		 * BubbleLegend class.
		 *
		 * @private
		 * @class
		 * @name Highcharts.BubbleLegend
		 *
		 * @param {Highcharts.LegendBubbleLegendOptions} config
		 *        Bubble legend options
		 *
		 * @param {Highcharts.LegendOptions} config
		 *        Legend options
		 */
		H.BubbleLegend = function (options, legend) {
		    this.init(options, legend);
		};

		H.BubbleLegend.prototype = {
		    /**
		     * Create basic bubbleLegend properties similar to item in legend.
		     *
		     * @private
		     * @function Highcharts.BubbleLegend#init
		     *
		     * @param {Highcharts.LegendBubbleLegendOptions} config
		     *        Bubble legend options
		     *
		     * @param {Highcharts.LegendOptions} config
		     *        Legend options
		     */
		    init: function (options, legend) {
		        this.options = options;
		        this.visible = true;
		        this.chart = legend.chart;
		        this.legend = legend;
		    },

		    setState: noop,

		    /**
		     * Depending on the position option, add bubbleLegend to legend items.
		     *
		     * @private
		     * @function Highcharts.BubbleLegend#addToLegend
		     *
		     * @param {Array<*>}
		     *        All legend items
		     */
		    addToLegend: function (items) {
		        // Insert bubbleLegend into legend items
		        items.splice(this.options.legendIndex, 0, this);
		    },

		    /**
		     * Calculate ranges, sizes and call the next steps of bubbleLegend creation.
		     *
		     * @private
		     * @function Highcharts.BubbleLegend#drawLegendSymbol
		     *
		     * @param {Highcharts.Legend} legend
		     *        Legend instance
		     */
		    drawLegendSymbol: function (legend) {
		        var bubbleLegend = this,
		            chart = bubbleLegend.chart,
		            options = bubbleLegend.options,
		            size,
		            itemDistance = pick(legend.options.itemDistance, 20),
		            connectorSpace,
		            ranges = options.ranges,
		            radius,
		            maxLabel,
		            connectorDistance = options.connectorDistance;

		        // Predict label dimensions
		        bubbleLegend.fontMetrics = chart.renderer.fontMetrics(
		            options.labels.style.fontSize.toString() + 'px'
		        );

		        // Do not create bubbleLegend now if ranges or ranges valeus are not
		        // specified or if are empty array.
		        if (!ranges || !ranges.length || !isNumber(ranges[0].value)) {
		            legend.options.bubbleLegend.autoRanges = true;
		            return;
		        }

		        // Sort ranges to right render order
		        stableSort(ranges, function (a, b) {
		            return b.value - a.value;
		        });

		        bubbleLegend.ranges = ranges;

		        bubbleLegend.setOptions();
		        bubbleLegend.render();

		        // Get max label size
		        maxLabel = bubbleLegend.getMaxLabelSize();
		        radius = bubbleLegend.ranges[0].radius;
		        size = radius * 2;

		        // Space for connectors and labels.
		        connectorSpace = connectorDistance - radius + maxLabel.width;
		        connectorSpace = connectorSpace > 0 ? connectorSpace : 0;

		        bubbleLegend.maxLabel = maxLabel;
		        bubbleLegend.movementX = options.labels.align === 'left' ?
		            connectorSpace : 0;

		        bubbleLegend.legendItemWidth = size + connectorSpace + itemDistance;
		        bubbleLegend.legendItemHeight = size + bubbleLegend.fontMetrics.h / 2;
		    },

		    /**
		     * Set style options for each bubbleLegend range.
		     *
		     * @private
		     * @function Highcharts.BubbleLegend#setOptions
		     */
		    setOptions: function () {
		        var bubbleLegend = this,
		            ranges = bubbleLegend.ranges,
		            options = bubbleLegend.options,
		            series = bubbleLegend.chart.series[options.seriesIndex],
		            baseline = bubbleLegend.legend.baseline,
		            bubbleStyle = {
		                'z-index': options.zIndex,
		                'stroke-width': options.borderWidth
		            },
		            connectorStyle = {
		                'z-index': options.zIndex,
		                'stroke-width': options.connectorWidth
		            },
		            labelStyle = bubbleLegend.getLabelStyles(),
		            fillOpacity = series.options.marker.fillOpacity,
		            styledMode = bubbleLegend.chart.styledMode;

		        // Allow to parts of styles be used individually for range
		        ranges.forEach(function (range, i) {
		            if (!styledMode) {
		                bubbleStyle.stroke = pick(
		                    range.borderColor,
		                    options.borderColor,
		                    series.color
		                );
		                bubbleStyle.fill = pick(
		                    range.color,
		                    options.color,
		                    fillOpacity !== 1 ?
		                        color(series.color).setOpacity(fillOpacity)
		                            .get('rgba') :
		                        series.color
		                );
		                connectorStyle.stroke = pick(
		                    range.connectorColor,
		                    options.connectorColor,
		                    series.color
		                );
		            }

		            // Set options needed for rendering each range
		            ranges[i].radius = bubbleLegend.getRangeRadius(range.value);
		            ranges[i] = merge(ranges[i], {
		                center: ranges[0].radius - ranges[i].radius + baseline
		            });

		            if (!styledMode) {
		                merge(true, ranges[i], {
		                    bubbleStyle: merge(false, bubbleStyle),
		                    connectorStyle: merge(false, connectorStyle),
		                    labelStyle: labelStyle
		                });
		            }
		        });
		    },

		    /**
		     * Merge options for bubbleLegend labels.
		     *
		     * @private
		     * @function Highcharts.BubbleLegend#getLabelStyles
		     */
		    getLabelStyles: function () {
		        var options = this.options,
		            additionalLabelsStyle = {},
		            labelsOnLeft = options.labels.align === 'left',
		            rtl = this.legend.options.rtl;

		        // To separate additional style options
		        objectEach(options.labels.style, function (value, key) {
		            if (key !== 'color' && key !== 'fontSize' && key !== 'z-index') {
		                additionalLabelsStyle[key] = value;
		            }
		        });

		        return merge(false, additionalLabelsStyle, {
		            'font-size': options.labels.style.fontSize,
		            fill: pick(
		                options.labels.style.color,
		                '#000000'
		            ),
		            'z-index': options.zIndex,
		            align: rtl || labelsOnLeft ? 'right' : 'left'
		        });
		    },


		    /**
		     * Calculate radius for each bubble range,
		     * used code from BubbleSeries.js 'getRadius' method.
		     *
		     * @private
		     * @function Highcharts.BubbleLegend#getRangeRadius
		     *
		     * @param {number} value
		     *        Range value
		     *
		     * @return {number}
		     *         Radius for one range
		     */
		    getRangeRadius: function (value) {
		        var bubbleLegend = this,
		            options = bubbleLegend.options,
		            seriesIndex = bubbleLegend.options.seriesIndex,
		            bubbleSeries = bubbleLegend.chart.series[seriesIndex],
		            zMax = options.ranges[0].value,
		            zMin = options.ranges[options.ranges.length - 1].value,
		            minSize = options.minSize,
		            maxSize = options.maxSize;

		        return bubbleSeries.getRadius.call(
		            this,
		            zMin,
		            zMax,
		            minSize,
		            maxSize,
		            value
		        );
		    },

		    /**
		     * Render the legendSymbol group.
		     *
		     * @private
		     * @function Highcharts.BubbleLegend#render
		     */
		    render: function () {
		        var bubbleLegend = this,
		            renderer = bubbleLegend.chart.renderer,
		            zThreshold = bubbleLegend.options.zThreshold;


		        if (!bubbleLegend.symbols) {
		            bubbleLegend.symbols = {
		                connectors: [],
		                bubbleItems: [],
		                labels: []
		            };
		        }
		        // Nesting SVG groups to enable handleOverflow
		        bubbleLegend.legendSymbol = renderer.g('bubble-legend');
		        bubbleLegend.legendItem = renderer.g('bubble-legend-item');

		        // To enable default 'hideOverlappingLabels' method
		        bubbleLegend.legendSymbol.translateX = 0;
		        bubbleLegend.legendSymbol.translateY = 0;

		        bubbleLegend.ranges.forEach(function (range) {
		            if (range.value >= zThreshold) {
		                bubbleLegend.renderRange(range);
		            }
		        });
		        // To use handleOverflow method
		        bubbleLegend.legendSymbol.add(bubbleLegend.legendItem);
		        bubbleLegend.legendItem.add(bubbleLegend.legendGroup);

		        bubbleLegend.hideOverlappingLabels();
		    },

		    /**
		     * Render one range, consisting of bubble symbol, connector and label.
		     *
		     * @private
		     * @function Highcharts.BubbleLegend#renderRange
		     *
		     * @param {Highcharts.LegendBubbleLegendRangesOptions} config
		     *        Range options
		     *
		     * @private
		     */
		    renderRange: function (range) {
		        var bubbleLegend = this,
		            mainRange = bubbleLegend.ranges[0],
		            legend = bubbleLegend.legend,
		            options = bubbleLegend.options,
		            labelsOptions = options.labels,
		            chart = bubbleLegend.chart,
		            renderer = chart.renderer,
		            symbols = bubbleLegend.symbols,
		            labels = symbols.labels,
		            label,
		            elementCenter = range.center,
		            absoluteRadius = Math.abs(range.radius),
		            connectorDistance = options.connectorDistance,
		            labelsAlign = labelsOptions.align,
		            rtl = legend.options.rtl,
		            fontSize = labelsOptions.style.fontSize,
		            connectorLength = rtl || labelsAlign === 'left' ?
		                -connectorDistance : connectorDistance,
		            borderWidth = options.borderWidth,
		            connectorWidth = options.connectorWidth,
		            posX = mainRange.radius,
		            posY = elementCenter - absoluteRadius - borderWidth / 2 +
		                connectorWidth / 2,
		            labelY,
		            labelX,
		            fontMetrics = bubbleLegend.fontMetrics,
		            labelMovement = fontSize / 2 - (fontMetrics.h - fontSize) / 2,
		            crispMovement = (posY % 1 ? 1 : 0.5) -
		                (connectorWidth % 2 ? 0 : 0.5),
		            styledMode = renderer.styledMode;

		        // Set options for centered labels
		        if (labelsAlign === 'center') {
		            connectorLength = 0;  // do not use connector
		            options.connectorDistance = 0;
		            range.labelStyle.align = 'center';
		        }

		        labelY = posY + options.labels.y;
		        labelX = posX + connectorLength + options.labels.x;

		        // Render bubble symbol
		        symbols.bubbleItems.push(
		            renderer
		                .circle(
		                    posX,
		                    elementCenter + crispMovement,
		                    absoluteRadius
		                )
		                .attr(
		                    styledMode ? {} : range.bubbleStyle
		                )
		                .addClass(
		                    (
		                        styledMode ?
		                            'highcharts-color-' +
		                                bubbleLegend.options.seriesIndex + ' ' :
		                            ''
		                    ) +
		                    'highcharts-bubble-legend-symbol ' +
		                    (options.className || '')
		                ).add(
		                    bubbleLegend.legendSymbol
		                )
		        );

		        // Render connector
		        symbols.connectors.push(
		            renderer
		                .path(renderer.crispLine(
		                    ['M', posX, posY, 'L', posX + connectorLength, posY],
		                     options.connectorWidth)
		                )
		                .attr(
		                    styledMode ? {} : range.connectorStyle
		                )
		                .addClass(
		                    (
		                        styledMode ?
		                            'highcharts-color-' +
		                                bubbleLegend.options.seriesIndex + ' ' :
		                            ''
		                    ) +
		                    'highcharts-bubble-legend-connectors ' +
		                    (options.connectorClassName || '')
		                ).add(
		                    bubbleLegend.legendSymbol
		                )
		        );

		        // Render label
		        label = renderer
		            .text(
		                bubbleLegend.formatLabel(range),
		                labelX,
		                labelY + labelMovement
		            )
		            .attr(
		                styledMode ? {} : range.labelStyle
		            )
		            .addClass(
		                'highcharts-bubble-legend-labels ' +
		                (options.labels.className || '')
		            ).add(
		                bubbleLegend.legendSymbol
		            );

		        labels.push(label);
		        // To enable default 'hideOverlappingLabels' method
		        label.placed = true;
		        label.alignAttr = {
		            x: labelX,
		            y: labelY + labelMovement
		        };
		    },

		    /**
		     * Get the label which takes up the most space.
		     *
		     * @private
		     * @function Highcharts.BubbleLegend#getMaxLabelSize
		     */
		    getMaxLabelSize: function () {
		        var labels = this.symbols.labels,
		            maxLabel,
		            labelSize;

		        labels.forEach(function (label) {
		            labelSize = label.getBBox(true);

		            if (maxLabel) {
		                maxLabel = labelSize.width > maxLabel.width ?
		                    labelSize : maxLabel;

		            } else {
		                maxLabel = labelSize;
		            }
		        });
		        return maxLabel || {};
		    },

		    /**
		     * Get formatted label for range.
		     *
		     * @private
		     * @function Highcharts.BubbleLegend#formatLabel
		     *
		     * @param {Highcharts.LegendBubbleLegendRangesOptions} range
		     *        Range options
		     *
		     * @return {string}
		     *         Range label text
		     */
		    formatLabel: function (range) {
		        var options = this.options,
		            formatter = options.labels.formatter,
		            format = options.labels.format;

		        return format ? H.format(format, range) :
		            formatter ? formatter.call(range) :
		            numberFormat(range.value, 1);
		    },

		    /**
		     * By using default chart 'hideOverlappingLabels' method, hide or show
		     * labels and connectors.
		     *
		     * @private
		     * @function Highcharts.BubbleLegend#hideOverlappingLabels
		     */
		    hideOverlappingLabels: function () {
		        var bubbleLegend = this,
		            chart = this.chart,
		            allowOverlap = bubbleLegend.options.labels.allowOverlap,
		            symbols = bubbleLegend.symbols;

		        if (!allowOverlap && symbols) {
		            chart.hideOverlappingLabels(symbols.labels);

		            // Hide or show connectors
		            symbols.labels.forEach(function (label, index) {
		                if (!label.newOpacity) {
		                    symbols.connectors[index].hide();
		                } else if (label.newOpacity !== label.oldOpacity) {
		                    symbols.connectors[index].show();
		                }
		            });
		        }
		    },

		    /**
		     * Calculate ranges from created series.
		     *
		     * @private
		     * @function Highcharts.BubbleLegend#getRanges
		     *
		     * @return {Array<Highcharts.LegendBubbleLegendRangesOptions>}
		     *         Array of range objects
		     */
		    getRanges: function () {
		        var bubbleLegend = this.legend.bubbleLegend,
		            series = bubbleLegend.chart.series,
		            ranges,
		            rangesOptions = bubbleLegend.options.ranges,
		            zData,
		            minZ = Number.MAX_VALUE,
		            maxZ = -Number.MAX_VALUE;

		        series.forEach(function (s) {
		            // Find the min and max Z, like in bubble series
		            if (s.isBubble && !s.ignoreSeries) {
		                zData = s.zData.filter(isNumber);

		                if (zData.length) {
		                    minZ = pick(s.options.zMin, Math.min(
		                        minZ,
		                        Math.max(
		                            arrayMin(zData),
		                            s.options.displayNegative === false ?
		                                s.options.zThreshold :
		                                -Number.MAX_VALUE
		                        )
		                    ));
		                    maxZ = pick(
		                        s.options.zMax,
		                        Math.max(maxZ, arrayMax(zData))
		                    );
		                }
		            }
		        });

		        // Set values for ranges
		        if (minZ === maxZ) {
		            // Only one range if min and max values are the same.
		            ranges = [{ value: maxZ }];
		        } else {
		            ranges = [
		                { value: minZ },
		                { value: (minZ + maxZ) / 2 },
		                { value: maxZ, autoRanges: true }
		            ];
		        }
		        // Prevent reverse order of ranges after redraw
		        if (rangesOptions.length && rangesOptions[0].radius) {
		            ranges.reverse();
		        }

		        // Merge ranges values with user options
		        ranges.forEach(function (range, i) {
		            if (rangesOptions && rangesOptions[i]) {
		                ranges[i] = merge(false, rangesOptions[i], range);
		            }
		        });

		        return ranges;
		    },

		    /**
		     * Calculate bubble legend sizes from rendered series.
		     *
		     * @private
		     * @function Highcharts.BubbleLegend#predictBubbleSizes
		     *
		     * @return {Array<number,number>}
		     *         Calculated min and max bubble sizes
		     */
		    predictBubbleSizes: function () {
		        var chart = this.chart,
		            fontMetrics = this.fontMetrics,
		            legendOptions = chart.legend.options,
		            floating = legendOptions.floating,
		            horizontal = legendOptions.layout === 'horizontal',
		            lastLineHeight = horizontal ? chart.legend.lastLineHeight : 0,
		            plotSizeX = chart.plotSizeX,
		            plotSizeY = chart.plotSizeY,
		            bubbleSeries = chart.series[this.options.seriesIndex],
		            minSize = Math.ceil(bubbleSeries.minPxSize),
		            maxPxSize = Math.ceil(bubbleSeries.maxPxSize),
		            maxSize = bubbleSeries.options.maxSize,
		            plotSize = Math.min(plotSizeY, plotSizeX),
		            calculatedSize;

		        // Calculate prediceted max size of bubble
		        if (floating || !(/%$/.test(maxSize))) {
		            calculatedSize = maxPxSize;

		        } else {
		            maxSize = parseFloat(maxSize);

		            calculatedSize = ((plotSize + lastLineHeight - fontMetrics.h / 2) *
		               maxSize / 100) / (maxSize / 100 + 1);

		           // Get maxPxSize from bubble series if calculated bubble legend
		           // size will not affect to bubbles series.
		            if (
		               (horizontal && plotSizeY - calculatedSize >=
		               plotSizeX) || (!horizontal && plotSizeX -
		               calculatedSize >= plotSizeY)
		           ) {
		                calculatedSize = maxPxSize;
		            }
		        }

		        return [minSize, Math.ceil(calculatedSize)];
		    },

		    /**
		     * Correct ranges with calculated sizes.
		     *
		     * @private
		     * @function Highcharts.BubbleLegend#updateRanges
		     *
		     * @param {number} min
		     *
		     * @param {number} max
		     */
		    updateRanges: function (min, max) {
		        var bubbleLegendOptions = this.legend.options.bubbleLegend;

		        bubbleLegendOptions.minSize = min;
		        bubbleLegendOptions.maxSize = max;
		        bubbleLegendOptions.ranges = this.getRanges();
		    },

		    /**
		     * Because of the possibility of creating another legend line, predicted
		     * bubble legend sizes may differ by a few pixels, so it is necessary to
		     * correct them.
		     *
		     * @private
		     * @function Highcharts.BubbleLegend#correctSizes
		     */
		    correctSizes: function () {
		        var legend = this.legend,
		            chart = this.chart,
		            bubbleSeries = chart.series[this.options.seriesIndex],
		            bubbleSeriesSize = bubbleSeries.maxPxSize,
		            bubbleLegendSize = this.options.maxSize;

		        if (Math.abs(Math.ceil(bubbleSeriesSize) - bubbleLegendSize) > 1) {
		            this.updateRanges(this.options.minSize, bubbleSeries.maxPxSize);
		            legend.render();
		        }
		    }
		};

		// Start the bubble legend creation process.
		addEvent(H.Legend, 'afterGetAllItems', function (e) {
		    var legend = this,
		        bubbleLegend = legend.bubbleLegend,
		        legendOptions = legend.options,
		        options = legendOptions.bubbleLegend,
		        bubbleSeriesIndex = legend.chart.getVisibleBubbleSeriesIndex();

		    // Remove unnecessary element
		    if (bubbleLegend && bubbleLegend.ranges && bubbleLegend.ranges.length) {
		        // Allow change the way of calculating ranges in update
		        if (options.ranges.length) {
		            options.autoRanges = options.ranges[0].autoRanges ? true : false;
		        }
		        // Update bubbleLegend dimensions in each redraw
		        legend.destroyItem(bubbleLegend);
		    }
		    // Create bubble legend
		    if (bubbleSeriesIndex >= 0 &&
		            legendOptions.enabled &&
		            options.enabled
		    ) {
		        options.seriesIndex = bubbleSeriesIndex;
		        legend.bubbleLegend = new H.BubbleLegend(options, legend);
		        legend.bubbleLegend.addToLegend(e.allItems);
		    }
		});

		/**
		 * Check if there is at least one visible bubble series.
		 *
		 * @private
		 * @function Highcharts.Chart#getVisibleBubbleSeriesIndex
		 *
		 * @return {number}
		 *         First visible bubble series index
		 */
		Chart.prototype.getVisibleBubbleSeriesIndex = function () {
		    var series = this.series,
		        i = 0;

		    while (i < series.length) {
		        if (
		            series[i] &&
		            series[i].isBubble &&
		            series[i].visible &&
		            series[i].zData.length
		        ) {
		            return i;
		        }
		        i++;
		    }
		    return -1;
		};

		/**
		 * Calculate height for each row in legend.
		 *
		 * @private
		 * @function Highcharts.Legend#getLinesHeights
		 *
		 * @return {Array<object>}
		 *         Informations about line height and items amount
		 */
		Legend.prototype.getLinesHeights = function () {
		    var items = this.allItems,
		        lines = [],
		        lastLine,
		        length = items.length,
		        i = 0,
		        j = 0;

		    for (i = 0; i < length; i++) {
		        if (items[i].legendItemHeight) {
		            // for bubbleLegend
		            items[i].itemHeight = items[i].legendItemHeight;
		        }
		        if (  // Line break
		            items[i] === items[length - 1] ||
		            items[i + 1] &&
		            items[i]._legendItemPos[1] !==
		            items[i + 1]._legendItemPos[1]
		        ) {
		            lines.push({ height: 0 });
		            lastLine = lines[lines.length - 1];
		            // Find the highest item in line
		            for (j; j <= i; j++) {
		                if (items[j].itemHeight > lastLine.height) {
		                    lastLine.height = items[j].itemHeight;
		                }
		            }
		            lastLine.step = i;
		        }
		    }
		    return lines;
		};

		/**
		 * Correct legend items translation in case of different elements heights.
		 *
		 * @private
		 * @function Highcharts.Legend#retranslateItems
		 *
		 * @param {Array<object>} lines
		 *        Informations about line height and items amount
		 */
		Legend.prototype.retranslateItems = function (lines) {
		    var items = this.allItems,
		        orgTranslateX,
		        orgTranslateY,
		        movementX,
		        rtl = this.options.rtl,
		        actualLine = 0;

		    items.forEach(function (item, index) {
		        orgTranslateX = item.legendGroup.translateX;
		        orgTranslateY = item._legendItemPos[1];

		        movementX = item.movementX;

		        if (movementX || (rtl && item.ranges)) {
		            movementX = rtl ? orgTranslateX - item.options.maxSize / 2 :
		            orgTranslateX + movementX;

		            item.legendGroup.attr({ translateX: movementX });
		        }
		        if (index > lines[actualLine].step) {
		            actualLine++;
		        }

		        item.legendGroup.attr({
		            translateY: Math.round(
		                orgTranslateY + lines[actualLine].height / 2
		            )
		        });
		        item._legendItemPos[1] = orgTranslateY + lines[actualLine].height / 2;
		    });
		};

		// Hide or show bubble legend depending on the visible status of bubble series.
		addEvent(Series, 'legendItemClick', function () {
		    var series = this,
		        chart = series.chart,
		        visible = series.visible,
		        legend = series.chart.legend,
		        status;

		    if (legend && legend.bubbleLegend) {
		        // Visible property is not set correctly yet, so temporary correct it
		        series.visible = !visible;
		        // Save future status for getRanges method
		        series.ignoreSeries = visible;
		        // Check if at lest one bubble series is visible
		        status = chart.getVisibleBubbleSeriesIndex() >= 0;

		        // Hide bubble legend if all bubble series are disabled
		        if (legend.bubbleLegend.visible !== status) {
		            // Show or hide bubble legend
		            legend.update({
		                bubbleLegend: { enabled: status }
		            });

		            legend.bubbleLegend.visible = status; // Restore default status
		        }
		        series.visible = visible;
		    }
		});

		// If ranges are not specified, determine ranges from rendered bubble series and
		// render legend again.
		wrap(Chart.prototype, 'drawChartBox', function (proceed, options, callback) {
		    var chart = this,
		        legend = chart.legend,
		        bubbleSeries = chart.getVisibleBubbleSeriesIndex() >= 0,
		        bubbleLegendOptions,
		        bubbleSizes;

		    if (
		        legend && legend.options.enabled && legend.bubbleLegend &&
		        legend.options.bubbleLegend.autoRanges && bubbleSeries
		    ) {
		        bubbleLegendOptions = legend.bubbleLegend.options;
		        bubbleSizes = legend.bubbleLegend.predictBubbleSizes();

		        legend.bubbleLegend.updateRanges(bubbleSizes[0], bubbleSizes[1]);
		        // Disable animation on init
		        if (!bubbleLegendOptions.placed) {
		            legend.group.placed = false;

		            legend.allItems.forEach(function (item) {
		                item.legendGroup.translateY = null;
		            });
		        }

		        // Create legend with bubbleLegend
		        legend.render();

		        chart.getMargins();

		        chart.axes.forEach(function (axis) {
		            axis.render();

		            if (!bubbleLegendOptions.placed) {
		                axis.setScale();
		                axis.updateNames();
		                // Disable axis animation on init
		                objectEach(axis.ticks, function (tick) {
		                    tick.isNew = true;
		                    tick.isNewLabel = true;
		                });
		            }
		        });
		        bubbleLegendOptions.placed = true;

		        // After recalculate axes, calculate margins again.
		        chart.getMargins();

		        // Call default 'drawChartBox' method.
		        proceed.call(chart, options, callback);

		        // Check bubble legend sizes and correct them if necessary.
		        legend.bubbleLegend.correctSizes();

		        // Correct items positions with different dimensions in legend.
		        legend.retranslateItems(legend.getLinesHeights());

		    } else {
		        proceed.call(chart, options, callback);

		        if (legend && legend.options.enabled && legend.bubbleLegend) {
		            // Allow color change after click in legend on static bubble legend
		            legend.render();
		            legend.retranslateItems(legend.getLinesHeights());
		        }
		    }
		});

	}(Highcharts));
	(function (H) {
		/* *
		 * (c) 2010-2018 Torstein Honsi
		 *
		 * License: www.highcharts.com/license
		 */



		var arrayMax = H.arrayMax,
		    arrayMin = H.arrayMin,
		    Axis = H.Axis,
		    color = H.color,
		    isNumber = H.isNumber,
		    noop = H.noop,
		    pick = H.pick,
		    pInt = H.pInt,
		    Point = H.Point,
		    Series = H.Series,
		    seriesType = H.seriesType,
		    seriesTypes = H.seriesTypes;


		/**
		 * A bubble series is a three dimensional series type where each point renders
		 * an X, Y and Z value. Each points is drawn as a bubble where the position
		 * along the X and Y axes mark the X and Y values, and the size of the bubble
		 * relates to the Z value. Requires `highcharts-more.js`.
		 *
		 * @sample {highcharts} highcharts/demo/bubble/
		 *         Bubble chart
		 *
		 * @extends      plotOptions.scatter
		 * @product      highcharts highstock
		 * @optionparent plotOptions.bubble
		 */
		seriesType('bubble', 'scatter', {

		    dataLabels: {
		        formatter: function () { // #2945
		            return this.point.z;
		        },
		        inside: true,
		        verticalAlign: 'middle'
		    },

		    /**
		     * If there are more points in the series than the `animationLimit`, the
		     * animation won't run. Animation affects overall performance and doesn't
		     * work well with heavy data series.
		     *
		     * @since 6.1.0
		     */
		    animationLimit: 250,

		    /**
		     * Whether to display negative sized bubbles. The threshold is given
		     * by the [zThreshold](#plotOptions.bubble.zThreshold) option, and negative
		     * bubbles can be visualized by setting
		     * [negativeColor](#plotOptions.bubble.negativeColor).
		     *
		     * @sample {highcharts} highcharts/plotoptions/bubble-negative/
		     *         Negative bubbles
		     *
		     * @type      {boolean}
		     * @default   true
		     * @since     3.0
		     * @apioption plotOptions.bubble.displayNegative
		     */

		    /**
		     * @extends   plotOptions.series.marker
		     * @excluding enabled, enabledThreshold, height, radius, width
		     */
		    marker: {

		        lineColor: null, // inherit from series.color

		        lineWidth: 1,

		        /**
		         * The fill opacity of the bubble markers.
		         */
		        fillOpacity: 0.5,

		        /**
		         * In bubble charts, the radius is overridden and determined based on
		         * the point's data value.
		         *
		         * @ignore
		         */
		        radius: null,

		        states: {
		            hover: {
		                radiusPlus: 0
		            }
		        },

		        /**
		         * A predefined shape or symbol for the marker. Possible values are
		         * "circle", "square", "diamond", "triangle" and "triangle-down".
		         *
		         * Additionally, the URL to a graphic can be given on the form
		         * `url(graphic.png)`. Note that for the image to be applied to exported
		         * charts, its URL needs to be accessible by the export server.
		         *
		         * Custom callbacks for symbol path generation can also be added to
		         * `Highcharts.SVGRenderer.prototype.symbols`. The callback is then
		         * used by its method name, as shown in the demo.
		         *
		         * @sample     {highcharts} highcharts/plotoptions/bubble-symbol/
		         *             Bubble chart with various symbols
		         * @sample     {highcharts} highcharts/plotoptions/series-marker-symbol/
		         *             General chart with predefined, graphic and custom markers
		         *
		         * @since      5.0.11
		         * @validvalue ["circle", "square", "diamond", "triangle",
		         *             "triangle-down"]
		         */
		        symbol: 'circle'

		    },

		    /**
		     * Minimum bubble size. Bubbles will automatically size between the
		     * `minSize` and `maxSize` to reflect the `z` value of each bubble.
		     * Can be either pixels (when no unit is given), or a percentage of
		     * the smallest one of the plot width and height.
		     *
		     * @sample {highcharts} highcharts/plotoptions/bubble-size/
		     *         Bubble size
		     *
		     * @type    {number|string}
		     * @since   3.0
		     * @product highcharts highstock
		     */
		    minSize: 8,

		    /**
		     * Maximum bubble size. Bubbles will automatically size between the
		     * `minSize` and `maxSize` to reflect the `z` value of each bubble.
		     * Can be either pixels (when no unit is given), or a percentage of
		     * the smallest one of the plot width and height.
		     *
		     * @sample {highcharts} highcharts/plotoptions/bubble-size/
		     *         Bubble size
		     *
		     * @type    {number|string}
		     * @since   3.0
		     * @product highcharts highstock
		     */
		    maxSize: '20%',

		    /**
		     * When a point's Z value is below the
		     * [zThreshold](#plotOptions.bubble.zThreshold) setting, this color is used.
		     *
		     * @sample {highcharts} highcharts/plotoptions/bubble-negative/
		     *         Negative bubbles
		     *
		     * @type      {Highcharts.ColorString|Highcharts.GradientColorObject}
		     * @since     3.0
		     * @product   highcharts
		     * @apioption plotOptions.bubble.negativeColor
		     */

		    /**
		     * Whether the bubble's value should be represented by the area or the
		     * width of the bubble. The default, `area`, corresponds best to the
		     * human perception of the size of each bubble.
		     *
		     * @sample {highcharts} highcharts/plotoptions/bubble-sizeby/
		     *         Comparison of area and size
		     *
		     * @type       {string}
		     * @default    area
		     * @since      3.0.7
		     * @validvalue ["area", "width"]
		     * @apioption  plotOptions.bubble.sizeBy
		     */

		    /**
		     * When this is true, the absolute value of z determines the size of
		     * the bubble. This means that with the default `zThreshold` of 0, a
		     * bubble of value -1 will have the same size as a bubble of value 1,
		     * while a bubble of value 0 will have a smaller size according to
		     * `minSize`.
		     *
		     * @sample    {highcharts} highcharts/plotoptions/bubble-sizebyabsolutevalue/
		     *            Size by absolute value, various thresholds
		     *
		     * @type      {boolean}
		     * @default   false
		     * @since     4.1.9
		     * @product   highcharts
		     * @apioption plotOptions.bubble.sizeByAbsoluteValue
		     */

		    /**
		     * When this is true, the series will not cause the Y axis to cross
		     * the zero plane (or [threshold](#plotOptions.series.threshold) option)
		     * unless the data actually crosses the plane.
		     *
		     * For example, if `softThreshold` is `false`, a series of 0, 1, 2,
		     * 3 will make the Y axis show negative values according to the `minPadding`
		     * option. If `softThreshold` is `true`, the Y axis starts at 0.
		     *
		     * @since   4.1.9
		     * @product highcharts
		     */
		    softThreshold: false,

		    states: {
		        hover: {
		            halo: {
		                size: 5
		            }
		        }
		    },

		    tooltip: {
		        pointFormat: '({point.x}, {point.y}), Size: {point.z}'
		    },

		    turboThreshold: 0,

		    /**
		     * The minimum for the Z value range. Defaults to the highest Z value
		     * in the data.
		     *
		     * @see [zMin](#plotOptions.bubble.zMin)
		     *
		     * @sample {highcharts} highcharts/plotoptions/bubble-zmin-zmax/
		     *         Z has a possible range of 0-100
		     *
		     * @type      {number}
		     * @since     4.0.3
		     * @product   highcharts
		     * @apioption plotOptions.bubble.zMax
		     */

		    /**
		     * The minimum for the Z value range. Defaults to the lowest Z value
		     * in the data.
		     *
		     * @see [zMax](#plotOptions.bubble.zMax)
		     *
		     * @sample {highcharts} highcharts/plotoptions/bubble-zmin-zmax/
		     *         Z has a possible range of 0-100
		     *
		     * @type      {number}
		     * @since     4.0.3
		     * @product   highcharts
		     * @apioption plotOptions.bubble.zMin
		     */

		    /**
		     * When [displayNegative](#plotOptions.bubble.displayNegative) is `false`,
		     * bubbles with lower Z values are skipped. When `displayNegative`
		     * is `true` and a [negativeColor](#plotOptions.bubble.negativeColor)
		     * is given, points with lower Z is colored.
		     *
		     * @sample {highcharts} highcharts/plotoptions/bubble-negative/
		     *         Negative bubbles
		     *
		     * @since   3.0
		     * @product highcharts
		     */
		    zThreshold: 0,

		    zoneAxis: 'z'

		// Prototype members
		}, {
		    pointArrayMap: ['y', 'z'],
		    parallelArrays: ['x', 'y', 'z'],
		    trackerGroups: ['group', 'dataLabelsGroup'],
		    specialGroup: 'group', // To allow clipping (#6296)
		    bubblePadding: true,
		    zoneAxis: 'z',
		    directTouch: true,
		    isBubble: true,

		    pointAttribs: function (point, state) {
		        var markerOptions = this.options.marker,
		            fillOpacity = markerOptions.fillOpacity,
		            attr = Series.prototype.pointAttribs.call(this, point, state);

		        if (fillOpacity !== 1) {
		            attr.fill = color(attr.fill).setOpacity(fillOpacity).get('rgba');
		        }

		        return attr;
		    },

		    // Get the radius for each point based on the minSize, maxSize and each
		    // point's Z value. This must be done prior to Series.translate because
		    // the axis needs to add padding in accordance with the point sizes.
		    getRadii: function (zMin, zMax, series) {
		        var len,
		            i,
		            zData = this.zData,
		            minSize = series.minPxSize,
		            maxSize = series.maxPxSize,
		            radii = [],
		            value;

		        // Set the shape type and arguments to be picked up in drawPoints
		        for (i = 0, len = zData.length; i < len; i++) {
		            value = zData[i];
		            // Separate method to get individual radius for bubbleLegend
		            radii.push(this.getRadius(zMin, zMax, minSize, maxSize, value));
		        }
		        this.radii = radii;
		    },

		    // Get the individual radius for one point.
		    getRadius: function (zMin, zMax, minSize, maxSize, value) {
		        var options = this.options,
		            sizeByArea = options.sizeBy !== 'width',
		            zThreshold = options.zThreshold,
		            pos,
		            zRange = zMax - zMin,
		            radius;

		        // When sizing by threshold, the absolute value of z determines
		        // the size of the bubble.
		        if (options.sizeByAbsoluteValue && value !== null) {
		            value = Math.abs(value - zThreshold);
		            zMax = zRange = Math.max(
		                zMax - zThreshold,
		                Math.abs(zMin - zThreshold)
		            );
		            zMin = 0;
		        }

		        if (!isNumber(value)) {
		            radius = null;
		        // Issue #4419 - if value is less than zMin, push a radius that's
		        // always smaller than the minimum size
		        } else if (value < zMin) {
		            radius = minSize / 2 - 1;
		        } else {
		            // Relative size, a number between 0 and 1
		            pos = zRange > 0 ? (value - zMin) / zRange : 0.5;

		            if (sizeByArea && pos >= 0) {
		                pos = Math.sqrt(pos);
		            }
		            radius = Math.ceil(minSize + pos * (maxSize - minSize)) / 2;
		        }
		        return radius;
		    },

		    // Perform animation on the bubbles
		    animate: function (init) {
		        if (
		            !init &&
		            this.points.length < this.options.animationLimit // #8099
		        ) {
		            this.points.forEach(function (point) {
		                var graphic = point.graphic,
		                    animationTarget;

		                if (graphic && graphic.width) { // URL symbols don't have width
		                    animationTarget = {
		                        x: graphic.x,
		                        y: graphic.y,
		                        width: graphic.width,
		                        height: graphic.height
		                    };

		                    // Start values
		                    graphic.attr({
		                        x: point.plotX,
		                        y: point.plotY,
		                        width: 1,
		                        height: 1
		                    });

		                    // Run animation
		                    graphic.animate(animationTarget, this.options.animation);
		                }
		            }, this);

		            // delete this function to allow it only once
		            this.animate = null;
		        }
		    },

		    // Extend the base translate method to handle bubble size
		    translate: function () {

		        var i,
		            data = this.data,
		            point,
		            radius,
		            radii = this.radii;

		        // Run the parent method
		        seriesTypes.scatter.prototype.translate.call(this);

		        // Set the shape type and arguments to be picked up in drawPoints
		        i = data.length;

		        while (i--) {
		            point = data[i];
		            radius = radii ? radii[i] : 0; // #1737

		            if (isNumber(radius) && radius >= this.minPxSize / 2) {
		                // Shape arguments
		                point.marker = H.extend(point.marker, {
		                    radius: radius,
		                    width: 2 * radius,
		                    height: 2 * radius
		                });

		                // Alignment box for the data label
		                point.dlBox = {
		                    x: point.plotX - radius,
		                    y: point.plotY - radius,
		                    width: 2 * radius,
		                    height: 2 * radius
		                };
		            } else { // below zThreshold
		                // #1691
		                point.shapeArgs = point.plotY = point.dlBox = undefined;
		            }
		        }
		    },

		    alignDataLabel: seriesTypes.column.prototype.alignDataLabel,
		    buildKDTree: noop,
		    applyZones: noop

		// Point class
		}, {
		    haloPath: function (size) {
		        return Point.prototype.haloPath.call(
		            this,
		            // #6067
		            size === 0 ? 0 : (this.marker ? this.marker.radius || 0 : 0) + size
		        );
		    },
		    ttBelow: false
		});

		// Add logic to pad each axis with the amount of pixels necessary to avoid the
		// bubbles to overflow.
		Axis.prototype.beforePadding = function () {
		    var axis = this,
		        axisLength = this.len,
		        chart = this.chart,
		        pxMin = 0,
		        pxMax = axisLength,
		        isXAxis = this.isXAxis,
		        dataKey = isXAxis ? 'xData' : 'yData',
		        min = this.min,
		        extremes = {},
		        smallestSize = Math.min(chart.plotWidth, chart.plotHeight),
		        zMin = Number.MAX_VALUE,
		        zMax = -Number.MAX_VALUE,
		        range = this.max - min,
		        transA = axisLength / range,
		        activeSeries = [];

		    // Handle padding on the second pass, or on redraw
		    this.series.forEach(function (series) {

		        var seriesOptions = series.options,
		            zData;

		        if (
		            series.bubblePadding &&
		            (series.visible || !chart.options.chart.ignoreHiddenSeries)
		        ) {

		            // Correction for #1673
		            axis.allowZoomOutside = true;

		            // Cache it
		            activeSeries.push(series);

		            if (isXAxis) { // because X axis is evaluated first

		                // For each series, translate the size extremes to pixel values
		                ['minSize', 'maxSize'].forEach(function (prop) {
		                    var length = seriesOptions[prop],
		                        isPercent = /%$/.test(length);

		                    length = pInt(length);
		                    extremes[prop] = isPercent ?
		                        smallestSize * length / 100 :
		                        length;

		                });
		                series.minPxSize = extremes.minSize;
		                // Prioritize min size if conflict to make sure bubbles are
		                // always visible. #5873
		                series.maxPxSize = Math.max(extremes.maxSize, extremes.minSize);

		                // Find the min and max Z
		                zData = series.zData.filter(H.isNumber);
		                if (zData.length) { // #1735
		                    zMin = pick(seriesOptions.zMin, Math.min(
		                        zMin,
		                        Math.max(
		                            arrayMin(zData),
		                            seriesOptions.displayNegative === false ?
		                                seriesOptions.zThreshold :
		                                -Number.MAX_VALUE
		                        )
		                    ));
		                    zMax = pick(
		                        seriesOptions.zMax,
		                        Math.max(zMax, arrayMax(zData))
		                    );
		                }
		            }
		        }
		    });

		    activeSeries.forEach(function (series) {

		        var data = series[dataKey],
		            i = data.length,
		            radius;

		        if (isXAxis) {
		            series.getRadii(zMin, zMax, series);
		        }

		        if (range > 0) {
		            while (i--) {
		                if (
		                    isNumber(data[i]) &&
		                    axis.dataMin <= data[i] &&
		                    data[i] <= axis.dataMax
		                ) {
		                    radius = series.radii[i];
		                    pxMin = Math.min(
		                        ((data[i] - min) * transA) - radius,
		                        pxMin
		                    );
		                    pxMax = Math.max(
		                        ((data[i] - min) * transA) + radius,
		                        pxMax
		                    );
		                }
		            }
		        }
		    });

		    // Apply the padding to the min and max properties
		    if (activeSeries.length && range > 0 && !this.isLog) {
		        pxMax -= axisLength;
		        transA *= (
		            axisLength +
		            Math.max(0, pxMin) - // #8901
		            Math.min(pxMax, axisLength)
		        ) / axisLength;
		        [['min', 'userMin', pxMin], ['max', 'userMax', pxMax]].forEach(
		            function (keys) {
		                if (pick(axis.options[keys[0]], axis[keys[1]]) === undefined) {
		                    axis[keys[0]] += keys[2] / transA;
		                }
		            }
		        );
		    }
		};


		/**
		 * A `bubble` series. If the [type](#series.bubble.type) option is
		 * not specified, it is inherited from [chart.type](#chart.type).
		 *
		 * @extends   series,plotOptions.bubble
		 * @excluding dataParser, dataURL, stack
		 * @product   highcharts highstock
		 * @apioption series.bubble
		 */

		/**
		 * An array of data points for the series. For the `bubble` series type,
		 * points can be given in the following ways:
		 *
		 * 1. An array of arrays with 3 or 2 values. In this case, the values correspond
		 *    to `x,y,z`. If the first value is a string, it is applied as the name of
		 *    the point, and the `x` value is inferred. The `x` value can also be
		 *    omitted, in which case the inner arrays should be of length 2\. Then the
		 *    `x` value is automatically calculated, either starting at 0 and
		 *    incremented by 1, or from `pointStart` and `pointInterval` given in the
		 *    series options.
		 *    ```js
		 *    data: [
		 *        [0, 1, 2],
		 *        [1, 5, 5],
		 *        [2, 0, 2]
		 *    ]
		 *    ```
		 *
		 * 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.bubble.turboThreshold), this option is not
		 *    available.
		 *    ```js
		 *    data: [{
		 *        x: 1,
		 *        y: 1,
		 *        z: 1,
		 *        name: "Point2",
		 *        color: "#00FF00"
		 *    }, {
		 *        x: 1,
		 *        y: 5,
		 *        z: 4,
		 *        name: "Point1",
		 *        color: "#FF00FF"
		 *    }]
		 *    ```
		 *
		 * @sample {highcharts} highcharts/series/data-array-of-arrays/
		 *         Arrays of numeric x and y
		 * @sample {highcharts} highcharts/series/data-array-of-arrays-datetime/
		 *         Arrays of datetime x and y
		 * @sample {highcharts} highcharts/series/data-array-of-name-value/
		 *         Arrays of point.name and y
		 * @sample {highcharts} highcharts/series/data-array-of-objects/
		 *         Config objects
		 *
		 * @type      {Array<Array<(number|string),number>|Array<(number|string),number,number>|*>}
		 * @extends   series.line.data
		 * @excluding marker
		 * @product   highcharts
		 * @apioption series.bubble.data
		 */

		/**
		 * The size value for each bubble. The bubbles' diameters are computed
		 * based on the `z`, and controlled by series options like `minSize`,
		 * `maxSize`, `sizeBy`, `zMin` and `zMax`.
		 *
		 * @type      {number}
		 * @product   highcharts
		 * @apioption series.bubble.data.z
		 */

		/**
		 * @excluding enabled, enabledThreshold, height, radius, width
		 * @apioption series.bubble.marker
		 */

	}(Highcharts));
	(function (H) {
		/**
		 * (c) 2010-2018 Torstein Honsi
		 *
		 * License: www.highcharts.com/license
		 */



		var merge = H.merge,
		    Point = H.Point,
		    seriesType = H.seriesType,
		    seriesTypes = H.seriesTypes;

		// The mapbubble series type
		if (seriesTypes.bubble) {

		    /**
		     * @private
		     * @class
		     * @name Highcharts.seriesTypes.mapbubble
		     *
		     * @augments Highcharts.Series
		     */
		    seriesType('mapbubble', 'bubble'

		    /**
		     * A map bubble series is a bubble series laid out on top of a map series,
		     * where each bubble is tied to a specific map area.
		     *
		     * @sample maps/demo/map-bubble/
		     *         Map bubble chart
		     *
		     * @extends      plotOptions.bubble
		     * @product      highmaps
		     * @optionparent plotOptions.mapbubble
		     */
		    , {

		        /**
		         * The main color of the series. This color affects both the fill and
		         * the stroke of the bubble. For enhanced control, use `marker` options.
		         *
		         * @sample {highmaps} maps/plotoptions/mapbubble-color/
		         *         Pink bubbles
		         *
		         * @type      {Highcharts.ColorString}
		         * @apioption plotOptions.mapbubble.color
		         */

		        /**
		         * Whether to display negative sized bubbles. The threshold is given
		         * by the [zThreshold](#plotOptions.mapbubble.zThreshold) option, and
		         * negative bubbles can be visualized by setting [negativeColor](
		         * #plotOptions.bubble.negativeColor).
		         *
		         * @type      {boolean}
		         * @default   true
		         * @apioption plotOptions.mapbubble.displayNegative
		         */

		        /**
		         * @sample {highmaps} maps/demo/map-bubble/
		         *         Bubble size
		         *
		         * @apioption plotOptions.mapbubble.maxSize
		         */

		        /**
		         * @sample {highmaps} maps/demo/map-bubble/
		         *         Bubble size
		         *
		         * @apioption plotOptions.mapbubble.minSize
		         */

		        /**
		         * When a point's Z value is below the
		         * [zThreshold](#plotOptions.mapbubble.zThreshold) setting, this color
		         * is used.
		         *
		         * @sample {highmaps} maps/plotoptions/mapbubble-negativecolor/
		         *         Negative color below a threshold
		         *
		         * @type      {Highcharts.ColorString}
		         * @apioption plotOptions.mapbubble.negativeColor
		         */

		        /**
		         * Whether the bubble's value should be represented by the area or the
		         * width of the bubble. The default, `area`, corresponds best to the
		         * human perception of the size of each bubble.
		         *
		         * @type       {string}
		         * @default    area
		         * @validvalue ["area", "width"]
		         * @apioption  plotOptions.mapbubble.sizeBy
		         */

		        /**
		         * When this is true, the absolute value of z determines the size of
		         * the bubble. This means that with the default `zThreshold` of 0, a
		         * bubble of value -1 will have the same size as a bubble of value 1,
		         * while a bubble of value 0 will have a smaller size according to
		         * `minSize`.
		         *
		         * @sample {highmaps} highcharts/plotoptions/bubble-sizebyabsolutevalue/
		         *         Size by absolute value, various thresholds
		         *
		         * @type      {boolean}
		         * @default   false
		         * @since     1.1.9
		         * @apioption plotOptions.mapbubble.sizeByAbsoluteValue
		         */

		        /**
		         * The minimum for the Z value range. Defaults to the highest Z value
		         * in the data.
		         *
		         * @see [zMax](#plotOptions.mapbubble.zMin)
		         *
		         * @sample {highmaps} highcharts/plotoptions/bubble-zmin-zmax/
		         *         Z has a possible range of 0-100
		         *
		         * @type      {number}
		         * @since     1.0.3
		         * @apioption plotOptions.mapbubble.zMax
		         */

		        /**
		         * The minimum for the Z value range. Defaults to the lowest Z value
		         * in the data.
		         *
		         * @see [zMax](#plotOptions.mapbubble.zMax)
		         *
		         * @sample {highmaps} highcharts/plotoptions/bubble-zmin-zmax/
		         *         Z has a possible range of 0-100
		         *
		         * @type      {number}
		         * @since     1.0.3
		         * @apioption plotOptions.mapbubble.zMin
		         */

		        /**
		         * When [displayNegative](#plotOptions.mapbubble.displayNegative) is
		         * `false`, bubbles with lower Z values are skipped. When
		         * `displayNegative` is `true` and a [negativeColor](
		         * #plotOptions.mapbubble.negativeColor) is given, points with lower Z
		         * is colored.
		         *
		         * @sample {highmaps} maps/plotoptions/mapbubble-negativecolor/
		         *         Negative color below a threshold
		         *
		         * @type      {number}
		         * @default   0
		         * @apioption plotOptions.mapbubble.zThreshold
		         */

		        animationLimit: 500,

		        tooltip: {
		            pointFormat: '{point.name}: {point.z}'
		        }

		    // Prototype members
		    }, {
		        xyFromShape: true,
		        type: 'mapbubble',
		        // If one single value is passed, it is interpreted as z
		        pointArrayMap: ['z'],
		        // Return the map area identified by the dataJoinBy option
		        getMapData: seriesTypes.map.prototype.getMapData,
		        getBox: seriesTypes.map.prototype.getBox,
		        setData: seriesTypes.map.prototype.setData

		    // Point class
		    }, {
		        applyOptions: function (options, x) {
		            var point;
		            if (
		                options &&
		                options.lat !== undefined &&
		                options.lon !== undefined
		            ) {
		                point = Point.prototype.applyOptions.call(
		                    this,
		                    merge(
		                        options,
		                        this.series.chart.fromLatLonToPoint(options)
		                    ),
		                    x
		                );
		            } else {
		                point = seriesTypes.map.prototype.pointClass.prototype
		                    .applyOptions.call(this, options, x);
		            }
		            return point;
		        },
		        isValid: function () {
		            return typeof this.z === 'number';
		        },
		        ttBelow: false
		    });
		}


		/**
		 * A `mapbubble` series. If the [type](#series.mapbubble.type) option
		 * is not specified, it is inherited from [chart.type](#chart.type).
		 *
		 * @extends   series,plotOptions.mapbubble
		 * @excluding dataParser, dataURL
		 * @product   highmaps
		 * @apioption series.mapbubble
		 */

		/**
		 * An array of data points for the series. For the `mapbubble` series
		 * type, points can be given in the following ways:
		 *
		 * 1.  An array of numerical values. In this case, the numerical values
		 * will be interpreted as `z` options. Example:
		 *
		 *  ```js
		 *  data: [0, 5, 3, 5]
		 *  ```
		 *
		 * 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.mapbubble.turboThreshold),
		 * this option is not available.
		 *
		 *  ```js
		 *     data: [{
		 *         z: 9,
		 *         name: "Point2",
		 *         color: "#00FF00"
		 *     }, {
		 *         z: 10,
		 *         name: "Point1",
		 *         color: "#FF00FF"
		 *     }]
		 *  ```
		 *
		 * @type      {Array<number|*>}
		 * @extends   series.mappoint.data
		 * @excluding labelrank, middleX, middleY, path, value, x, y, lat, lon
		 * @product   highmaps
		 * @apioption series.mapbubble.data
		 */

		/**
		 * While the `x` and `y` values of the bubble are determined by the
		 * underlying map, the `z` indicates the actual value that gives the
		 * size of the bubble.
		 *
		 * @sample {highmaps} maps/demo/map-bubble/
		 *         Bubble
		 *
		 * @type      {number}
		 * @product   highmaps
		 * @apioption series.mapbubble.data.z
		 */

		/**
		 * @excluding enabled, enabledThreshold, height, radius, width
		 * @apioption series.mapbubble.marker
		 */

	}(Highcharts));
	(function (H) {
		/**
		 * (c) 2010-2018 Torstein Honsi
		 *
		 * License: www.highcharts.com/license
		 */



		var seriesType = H.seriesType,
		    seriesTypes = H.seriesTypes;

		/**
		 * @private
		 * @class
		 * @name Highcharts.seriesTypes.mapline
		 *
		 * @augments Highcharts.Series
		 */
		seriesType('mapline', 'map'

		/**
		 * A mapline series is a special case of the map series where the value colors
		 * are applied to the strokes rather than the fills. It can also be used for
		 * freeform drawing, like dividers, in the map.
		 *
		 * @sample maps/demo/mapline-mappoint/
		 *         Mapline and map-point chart
		 *
		 * @extends      plotOptions.map
		 * @product      highmaps
		 * @optionparent plotOptions.mapline
		 */
		, {
		    /**
		     * The width of the map line.
		     */
		    lineWidth: 1,

		    /**
		     * Fill color for the map line shapes
		     *
		     * @type {Highcharts.ColorString}
		     */
		    fillColor: 'none'
		}, {

		    type: 'mapline',

		    colorProp: 'stroke',

		    pointAttrToOptions: {
		        'stroke': 'color',
		        'stroke-width': 'lineWidth'
		    },

		    /**
		     * Get presentational attributes
		     *
		     * @private
		     * @function Highcharts.seriesTypes.mapline#pointAttribs
		     *
		     * @param {Highcharts.Point} point
		     *
		     * @param {string} state
		     *
		     * @return {Highcharts.Dictionary<*>}
		     */
		    pointAttribs: function (point, state) {
		        var attr = seriesTypes.map.prototype.pointAttribs.call(
		            this,
		            point,
		            state
		        );

		        // The difference from a map series is that the stroke takes the point
		        // color
		        attr.fill = this.options.fillColor;

		        return attr;
		    },

		    drawLegendSymbol: seriesTypes.line.prototype.drawLegendSymbol

		});

		/**
		 * A `mapline` series. If the [type](#series.mapline.type) option is
		 * not specified, it is inherited from [chart.type](#chart.type).
		 *
		 * @extends   series,plotOptions.mapline
		 * @excluding dataParser, dataURL, marker
		 * @product   highmaps
		 * @apioption series.mapline
		 */

		/**
		 * An array of data points for the series. For the `mapline` series type,
		 * points can be given in the following ways:
		 *
		 * 1.  An array of numerical values. In this case, the numerical values
		 * will be interpreted as `value` options. Example:
		 *
		 *  ```js
		 *  data: [0, 5, 3, 5]
		 *  ```
		 *
		 * 2.  An array of arrays with 2 values. In this case, the values correspond
		 * to `[hc-key, value]`. Example:
		 *
		 *  ```js
		 *     data: [
		 *         ['us-ny', 0],
		 *         ['us-mi', 5],
		 *         ['us-tx', 3],
		 *         ['us-ak', 5]
		 *     ]
		 *  ```
		 *
		 * 3.  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.map.turboThreshold),
		 * this option is not available.
		 *
		 *  ```js
		 *     data: [{
		 *         value: 6,
		 *         name: "Point2",
		 *         color: "#00FF00"
		 *     }, {
		 *         value: 6,
		 *         name: "Point1",
		 *         color: "#FF00FF"
		 *     }]
		 *  ```
		 *
		 * @type      {Array<number|Array<string,number>|object>}
		 * @product   highmaps
		 * @apioption series.mapline.data
		 */

	}(Highcharts));
	(function (H) {
		/**
		 * (c) 2010-2018 Torstein Honsi
		 *
		 * License: www.highcharts.com/license
		 */



		var merge = H.merge,
		    Point = H.Point,
		    seriesType = H.seriesType;

		/**
		 * @private
		 * @class
		 * @name Highcharts.seriesTypes.mappoint
		 *
		 * @augments Highcharts.Series
		 */
		seriesType('mappoint', 'scatter',
		    /**
		     * A mappoint series is a special form of scatter series where the points
		     * can be laid out in map coordinates on top of a map.
		     *
		     * @sample maps/demo/mapline-mappoint/
		     *         Map-line and map-point series.
		     *
		     * @extends      plotOptions.scatter
		     * @product      highmaps
		     * @optionparent plotOptions.mappoint
		     */
		    {
		        dataLabels: {
		            /**
		             * @default   {point.name}
		             * @apioption plotOptions.mappoint.dataLabels.format
		             */
		            enabled: true,
		            formatter: function () { // #2945
		                return this.point.name;
		            },
		            crop: false,
		            defer: false,
		            overflow: false,
		            style: {
		                color: '#000000'
		            }
		        }
		    // Prototype members
		    }, {
		        type: 'mappoint',
		        forceDL: true
		    // Point class
		    }, {
		        applyOptions: function (options, x) {
		            var mergedOptions = (
		                options.lat !== undefined &&
		                options.lon !== undefined ?
		                merge(options, this.series.chart.fromLatLonToPoint(options)) :
		                options
		            );
		            return Point.prototype.applyOptions.call(this, mergedOptions, x);
		        }
		    }
		);

		/**
		 * A `mappoint` series. If the [type](#series.mappoint.type) option
		 * is not specified, it is inherited from [chart.type](#chart.type).
		 *
		 *
		 * @extends   series,plotOptions.mappoint
		 * @excluding dataParser, dataURL
		 * @product   highmaps
		 * @apioption series.mappoint
		 */

		/**
		 * An array of data points for the series. For the `mappoint` series
		 * type, points can be given in the following ways:
		 *
		 * 1.  An array of numerical values. In this case, the numerical values
		 * will be interpreted as `y` options. The `x` values will be automatically
		 * calculated, either starting at 0 and incremented by 1, or from `pointStart`
		 * and `pointInterval` given in the series options. If the axis has
		 * categories, these will be used. Example:
		 *
		 *  ```js
		 *  data: [0, 5, 3, 5]
		 *  ```
		 *
		 * 2.  An array of arrays with 2 values. In this case, the values correspond
		 * to `x,y`. If the first value is a string, it is applied as the name
		 * of the point, and the `x` value is inferred.
		 *
		 *  ```js
		 *     data: [
		 *         [0, 1],
		 *         [1, 8],
		 *         [2, 7]
		 *     ]
		 *  ```
		 *
		 * 3.  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.mappoint.turboThreshold),
		 * this option is not available.
		 *
		 *  ```js
		 *     data: [{
		 *         x: 1,
		 *         y: 7,
		 *         name: "Point2",
		 *         color: "#00FF00"
		 *     }, {
		 *         x: 1,
		 *         y: 4,
		 *         name: "Point1",
		 *         color: "#FF00FF"
		 *     }]
		 *  ```
		 *
		 * @type      {Array<number|Array<number,number>|*>}
		 * @extends   series.map.data
		 * @excluding labelrank, middleX, middleY, path, value
		 * @product   highmaps
		 * @apioption series.mappoint.data
		 */

		/**
		 * The latitude of the point. Must be combined with the `lon` option
		 * to work. Overrides `x` and `y` values.
		 *
		 * @sample {highmaps} maps/demo/mappoint-latlon/
		 *         Point position by lat/lon
		 *
		 * @type      {number}
		 * @since     1.1.0
		 * @product   highmaps
		 * @apioption series.mappoint.data.lat
		 */

		/**
		 * The longitude of the point. Must be combined with the `lon` option
		 * to work. Overrides `x` and `y` values.
		 *
		 * @sample {highmaps} maps/demo/mappoint-latlon/
		 *         Point position by lat/lon
		 *
		 * @type      {number}
		 * @since     1.1.0
		 * @product   highmaps
		 * @apioption series.mappoint.data.lon
		 */

		/**
		 * The x coordinate of the point in terms of the map path coordinates.
		 *
		 * @sample {highmaps} maps/demo/mapline-mappoint/
		 *         Map point demo
		 *
		 * @type      {number}
		 * @product   highmaps
		 * @apioption series.mappoint.data.x
		 */

		/**
		 * The x coordinate of the point in terms of the map path coordinates.
		 *
		 * @sample {highmaps} maps/demo/mapline-mappoint/
		 *         Map point demo
		 *
		 * @type      {number}
		 * @product   highmaps
		 * @apioption series.mappoint.data.y
		 */

	}(Highcharts));
	(function (H) {
		/* *
		 * (c) 2010-2018 Torstein Honsi
		 *
		 * License: www.highcharts.com/license
		 */

		/**
		 * Map data object.
		 *
		 * @interface Highcharts.MapDataObject
		 *//**
		 * The SVG path.
		 * @name Highcharts.MapDataObject#path
		 * @type {Highcharts.SVGPathArray}
		 *//**
		 * The name of the data.
		 * @name Highcharts.MapDataObject#name
		 * @type {string|undefined}
		 *//**
		 * The GeoJSON meta data.
		 * @name Highcharts.MapDataObject#properties
		 * @type {object|undefined}
		 */



		var colorPointMixin = H.colorPointMixin,
		    colorSeriesMixin = H.colorSeriesMixin,
		    extend = H.extend,
		    isNumber = H.isNumber,
		    LegendSymbolMixin = H.LegendSymbolMixin,
		    merge = H.merge,
		    noop = H.noop,
		    pick = H.pick,
		    isArray = H.isArray,
		    Point = H.Point,
		    Series = H.Series,
		    seriesType = H.seriesType,
		    seriesTypes = H.seriesTypes,
		    splat = H.splat;

		/**
		 * @private
		 * @class
		 * @name Highcharts.seriesTypes.map
		 *
		 * @augments Highcharts.Series
		 */
		seriesType('map', 'scatter',
		    /**
		     * The map series is used for basic choropleth maps, where each map area has
		     * a color based on its value.
		     *
		     * @sample maps/demo/all-maps/
		     *         Choropleth map
		     *
		     * @extends      plotOptions.scatter
		     * @excluding    marker
		     * @product      highmaps
		     * @optionparent plotOptions.map
		     */
		    {

		        animation: false, // makes the complex shapes slow

		        dataLabels: {
		            crop: false,
		            formatter: function () { // #2945
		                return this.point.value;
		            },
		            inside: true, // for the color
		            overflow: false,
		            padding: 0,
		            verticalAlign: 'middle'
		        },

		        /** @ignore-option */
		        marker: null,

		        /**
		         * The color to apply to null points.
		         *
		         * In styled mode, the null point fill is set in the
		         * `.highcharts-null-point` class.
		         *
		         * @sample maps/demo/all-areas-as-null/
		         *         Null color
		         *
		         * @type {Highcharts.ColorString}
		         */
		        nullColor: '#f7f7f7',

		        /**
		         * Whether to allow pointer interaction like tooltips and mouse events
		         * on null points.
		         *
		         * @type      {boolean}
		         * @since     4.2.7
		         * @apioption plotOptions.map.nullInteraction
		         */

		        stickyTracking: false,

		        tooltip: {
		            followPointer: true,
		            pointFormat: '{point.name}: {point.value}<br/>'
		        },

		        /** @ignore-option */
		        turboThreshold: 0,

		        /**
		         * Whether all areas of the map defined in `mapData` should be rendered.
		         * If `true`, areas which don't correspond to a data point, are rendered
		         * as `null` points. If `false`, those areas are skipped.
		         *
		         * @sample maps/plotoptions/series-allareas-false/
		         *         All areas set to false
		         *
		         * @type      {boolean}
		         * @default   true
		         * @product   highmaps
		         * @apioption plotOptions.series.allAreas
		         */
		        allAreas: true,

		        /**
		         * The border color of the map areas.
		         *
		         * In styled mode, the border stroke is given in the `.highcharts-point`
		         * class.
		         *
		         * @sample {highmaps} maps/plotoptions/series-border/
		         *         Borders demo
		         *
		         * @type      {Highcharts.ColorString}
		         * @default   '#cccccc'
		         * @product   highmaps
		         * @apioption plotOptions.series.borderColor
		         */
		        borderColor: '#cccccc',

		        /**
		         * The border width of each map area.
		         *
		         * In styled mode, the border stroke width is given in the
		         * `.highcharts-point` class.
		         *
		         * @sample maps/plotoptions/series-border/
		         *         Borders demo
		         *
		         * @type      {number}
		         * @default   1
		         * @product   highmaps
		         * @apioption plotOptions.series.borderWidth
		         */
		        borderWidth: 1,

		        /**
		         * Set this option to `false` to prevent a series from connecting to
		         * the global color axis. This will cause the series to have its own
		         * legend item.
		         *
		         * @type      {boolean}
		         * @product   highmaps
		         * @apioption plotOptions.series.colorAxis
		         */

		        /**
		         * What property to join the `mapData` to the value data. For example,
		         * if joinBy is "code", the mapData items with a specific code is merged
		         * into the data with the same code. For maps loaded from GeoJSON, the
		         * keys may be held in each point's `properties` object.
		         *
		         * The joinBy option can also be an array of two values, where the first
		         * points to a key in the `mapData`, and the second points to another
		         * key in the `data`.
		         *
		         * When joinBy is `null`, the map items are joined by their position in
		         * the array, which performs much better in maps with many data points.
		         * This is the recommended option if you are printing more than a
		         * thousand data points and have a backend that can preprocess the data
		         * into a parallel array of the mapData.
		         *
		         * @sample maps/plotoptions/series-border/
		         *         Joined by "code"
		         * @sample maps/demo/geojson/
		         *         GeoJSON joined by an array
		         * @sample maps/series/joinby-null/
		         *         Simple data joined by null
		         *
		         * @type      {string|Array<string>}
		         * @default   hc-key
		         * @product   highmaps
		         * @apioption plotOptions.series.joinBy
		         */
		        joinBy: 'hc-key',

		        /**
		         * Define the z index of the series.
		         *
		         * @type      {number}
		         * @product   highmaps
		         * @apioption plotOptions.series.zIndex
		         */

		        states: {

		            hover: {

		                halo: null,

		                /**
		                 * The color of the shape in this state.
		                 *
		                 * @sample maps/plotoptions/series-states-hover/
		                 *         Hover options
		                 *
		                 * @type      {Highcharts.ColorString}
		                 * @product   highmaps
		                 * @apioption plotOptions.series.states.hover.color
		                 */

		                /**
		                 * The border color of the point in this state.
		                 *
		                 * @type      {Highcharts.ColorString}
		                 * @product   highmaps
		                 * @apioption plotOptions.series.states.hover.borderColor
		                 */

		                /**
		                 * The border width of the point in this state
		                 *
		                 * @type      {number}
		                 * @product   highmaps
		                 * @apioption plotOptions.series.states.hover.borderWidth
		                 */

		                /**
		                 * The relative brightness of the point when hovered, relative
		                 * to the normal point color.
		                 *
		                 * @type      {number}
		                 * @product   highmaps
		                 * @default   0.2
		                 * @apioption plotOptions.series.states.hover.brightness
		                 */
		                brightness: 0.2

		            },

		            /**
		             * Overrides for the normal state.
		             *
		             * @product   highmaps
		             * @apioption plotOptions.series.states.normal
		             */
		            normal: {

		                /**
		                 * Animation options for the fill color when returning from
		                 * hover state to normal state. The animation adds some latency
		                 * in order to reduce the effect of flickering when hovering in
		                 * and out of for example an uneven coastline.
		                 *
		                 * @sample maps/plotoptions/series-states-animation-false/
		                 *         No animation of fill color
		                 *
		                 * @type      {boolean|Highcharts.AnimationOptionsObject}
		                 * @default   true
		                 * @product   highmaps
		                 * @apioption plotOptions.series.states.normal.animation
		                 */
		                animation: true
		            },

		            select: {
		                color: '#cccccc'
		            }
		        }

		    // Prototype members
		    }, merge(colorSeriesMixin, {
		        type: 'map',
		        getExtremesFromAll: true,
		        useMapGeometry: true, // get axis extremes from paths, not values
		        forceDL: true,
		        searchPoint: noop,
		        // When tooltip is not shared, this series (and derivatives) requires
		        // direct touch/hover. KD-tree does not apply.
		        directTouch: true,
		        // X axis and Y axis must have same translation slope
		        preserveAspectRatio: true,
		        pointArrayMap: ['value'],

		        // Get the bounding box of all paths in the map combined.
		        getBox: function (paths) {
		            var MAX_VALUE = Number.MAX_VALUE,
		                maxX = -MAX_VALUE,
		                minX = MAX_VALUE,
		                maxY = -MAX_VALUE,
		                minY = MAX_VALUE,
		                minRange = MAX_VALUE,
		                xAxis = this.xAxis,
		                yAxis = this.yAxis,
		                hasBox;

		            // Find the bounding box
		            (paths || []).forEach(function (point) {

		                if (point.path) {
		                    if (typeof point.path === 'string') {
		                        point.path = H.splitPath(point.path);
		                    }

		                    var path = point.path || [],
		                        i = path.length,
		                        even = false, // while loop reads from the end
		                        pointMaxX = -MAX_VALUE,
		                        pointMinX = MAX_VALUE,
		                        pointMaxY = -MAX_VALUE,
		                        pointMinY = MAX_VALUE,
		                        properties = point.properties;

		                    // The first time a map point is used, analyze its box
		                    if (!point._foundBox) {
		                        while (i--) {
		                            if (isNumber(path[i])) {
		                                if (even) { // even = x
		                                    pointMaxX = Math.max(pointMaxX, path[i]);
		                                    pointMinX = Math.min(pointMinX, path[i]);
		                                } else { // odd = Y
		                                    pointMaxY = Math.max(pointMaxY, path[i]);
		                                    pointMinY = Math.min(pointMinY, path[i]);
		                                }
		                                even = !even;
		                            }
		                        }
		                        // Cache point bounding box for use to position data
		                        // labels, bubbles etc
		                        point._midX = (
		                            pointMinX + (pointMaxX - pointMinX) * pick(
		                                point.middleX,
		                                properties && properties['hc-middle-x'],
		                                0.5
		                            )
		                        );
		                        point._midY = (
		                            pointMinY + (pointMaxY - pointMinY) * pick(
		                                point.middleY,
		                                properties && properties['hc-middle-y'],
		                                0.5
		                            )
		                        );
		                        point._maxX = pointMaxX;
		                        point._minX = pointMinX;
		                        point._maxY = pointMaxY;
		                        point._minY = pointMinY;
		                        point.labelrank = pick(
		                            point.labelrank,
		                            (pointMaxX - pointMinX) * (pointMaxY - pointMinY)
		                        );
		                        point._foundBox = true;
		                    }

		                    maxX = Math.max(maxX, point._maxX);
		                    minX = Math.min(minX, point._minX);
		                    maxY = Math.max(maxY, point._maxY);
		                    minY = Math.min(minY, point._minY);
		                    minRange = Math.min(
		                        point._maxX - point._minX,
		                        point._maxY - point._minY, minRange
		                    );
		                    hasBox = true;
		                }
		            });

		            // Set the box for the whole series
		            if (hasBox) {
		                this.minY = Math.min(minY, pick(this.minY, MAX_VALUE));
		                this.maxY = Math.max(maxY, pick(this.maxY, -MAX_VALUE));
		                this.minX = Math.min(minX, pick(this.minX, MAX_VALUE));
		                this.maxX = Math.max(maxX, pick(this.maxX, -MAX_VALUE));

		                // If no minRange option is set, set the default minimum zooming
		                // range to 5 times the size of the smallest element
		                if (xAxis && xAxis.options.minRange === undefined) {
		                    xAxis.minRange = Math.min(
		                        5 * minRange,
		                        (this.maxX - this.minX) / 5,
		                        xAxis.minRange || MAX_VALUE
		                    );
		                }
		                if (yAxis && yAxis.options.minRange === undefined) {
		                    yAxis.minRange = Math.min(
		                        5 * minRange,
		                        (this.maxY - this.minY) / 5,
		                        yAxis.minRange || MAX_VALUE
		                    );
		                }
		            }
		        },

		        getExtremes: function () {
		            // Get the actual value extremes for colors
		            Series.prototype.getExtremes.call(this, this.valueData);

		            // Recalculate box on updated data
		            if (this.chart.hasRendered && this.isDirtyData) {
		                this.getBox(this.options.data);
		            }

		            this.valueMin = this.dataMin;
		            this.valueMax = this.dataMax;

		            // Extremes for the mock Y axis
		            this.dataMin = this.minY;
		            this.dataMax = this.maxY;
		        },

		        // Translate the path, so it automatically fits into the plot area box
		        translatePath: function (path) {

		            var series = this,
		                even = false, // while loop reads from the end
		                xAxis = series.xAxis,
		                yAxis = series.yAxis,
		                xMin = xAxis.min,
		                xTransA = xAxis.transA,
		                xMinPixelPadding = xAxis.minPixelPadding,
		                yMin = yAxis.min,
		                yTransA = yAxis.transA,
		                yMinPixelPadding = yAxis.minPixelPadding,
		                i,
		                ret = []; // Preserve the original

		            // Do the translation
		            if (path) {
		                i = path.length;
		                while (i--) {
		                    if (isNumber(path[i])) {
		                        ret[i] = even ?
		                            (path[i] - xMin) * xTransA + xMinPixelPadding :
		                            (path[i] - yMin) * yTransA + yMinPixelPadding;
		                        even = !even;
		                    } else {
		                        ret[i] = path[i];
		                    }
		                }
		            }

		            return ret;
		        },

		        // Extend setData to join in mapData. If the allAreas option is true,
		        // all areas from the mapData are used, and those that don't correspond
		        // to a data value are given null values.
		        setData: function (data, redraw, animation, updatePoints) {
		            var options = this.options,
		                chartOptions = this.chart.options.chart,
		                globalMapData = chartOptions && chartOptions.map,
		                mapData = options.mapData,
		                joinBy = options.joinBy,
		                joinByNull = joinBy === null,
		                pointArrayMap = options.keys || this.pointArrayMap,
		                dataUsed = [],
		                mapMap = {},
		                mapPoint,
		                mapTransforms = this.chart.mapTransforms,
		                props,
		                i;

		            // Collect mapData from chart options if not defined on series
		            if (!mapData && globalMapData) {
		                mapData = typeof globalMapData === 'string' ?
		                    H.maps[globalMapData] :
		                    globalMapData;
		            }

		            if (joinByNull) {
		                joinBy = '_i';
		            }
		            joinBy = this.joinBy = splat(joinBy);
		            if (!joinBy[1]) {
		                joinBy[1] = joinBy[0];
		            }

		            // Pick up numeric values, add index
		            // Convert Array point definitions to objects using pointArrayMap
		            if (data) {
		                data.forEach(function (val, i) {
		                    var ix = 0;
		                    if (isNumber(val)) {
		                        data[i] = {
		                            value: val
		                        };
		                    } else if (isArray(val)) {
		                        data[i] = {};
		                        // Automatically copy first item to hc-key if there is
		                        // an extra leading string
		                        if (
		                            !options.keys &&
		                            val.length > pointArrayMap.length &&
		                            typeof val[0] === 'string'
		                        ) {
		                            data[i]['hc-key'] = val[0];
		                            ++ix;
		                        }
		                        // Run through pointArrayMap and what's left of the
		                        // point data array in parallel, copying over the values
		                        for (var j = 0; j < pointArrayMap.length; ++j, ++ix) {
		                            if (pointArrayMap[j] && val[ix] !== undefined) {
		                                if (pointArrayMap[j].indexOf('.') > 0) {
		                                    H.Point.prototype.setNestedProperty(
		                                        data[i], val[ix], pointArrayMap[j]
		                                    );
		                                } else {
		                                    data[i][pointArrayMap[j]] = val[ix];
		                                }
		                            }
		                        }
		                    }
		                    if (joinByNull) {
		                        data[i]._i = i;
		                    }
		                });
		            }

		            this.getBox(data);

		            // Pick up transform definitions for chart
		            this.chart.mapTransforms = mapTransforms =
		                chartOptions && chartOptions.mapTransforms ||
		                mapData && mapData['hc-transform'] ||
		                mapTransforms;

		            // Cache cos/sin of transform rotation angle
		            if (mapTransforms) {
		                H.objectEach(mapTransforms, function (transform) {
		                    if (transform.rotation) {
		                        transform.cosAngle = Math.cos(transform.rotation);
		                        transform.sinAngle = Math.sin(transform.rotation);
		                    }
		                });
		            }

		            if (mapData) {
		                if (mapData.type === 'FeatureCollection') {
		                    this.mapTitle = mapData.title;
		                    mapData = H.geojson(mapData, this.type, this);
		                }

		                this.mapData = mapData;
		                this.mapMap = {};

		                for (i = 0; i < mapData.length; i++) {
		                    mapPoint = mapData[i];
		                    props = mapPoint.properties;

		                    mapPoint._i = i;
		                    // Copy the property over to root for faster access
		                    if (joinBy[0] && props && props[joinBy[0]]) {
		                        mapPoint[joinBy[0]] = props[joinBy[0]];
		                    }
		                    mapMap[mapPoint[joinBy[0]]] = mapPoint;
		                }
		                this.mapMap = mapMap;

		                // Registered the point codes that actually hold data
		                if (data && joinBy[1]) {
		                    data.forEach(function (point) {
		                        if (mapMap[point[joinBy[1]]]) {
		                            dataUsed.push(mapMap[point[joinBy[1]]]);
		                        }
		                    });
		                }

		                if (options.allAreas) {
		                    this.getBox(mapData);
		                    data = data || [];

		                    // Registered the point codes that actually hold data
		                    if (joinBy[1]) {
		                        data.forEach(function (point) {
		                            dataUsed.push(point[joinBy[1]]);
		                        });
		                    }

		                    // Add those map points that don't correspond to data, which
		                    // will be drawn as null points
		                    dataUsed = '|' + dataUsed.map(function (point) {
		                        return point && point[joinBy[0]];
		                    }).join('|') + '|'; // Faster than array.indexOf

		                    mapData.forEach(function (mapPoint) {
		                        if (
		                            !joinBy[0] ||
		                            dataUsed.indexOf(
		                                '|' + mapPoint[joinBy[0]] + '|'
		                            ) === -1
		                        ) {
		                            data.push(merge(mapPoint, { value: null }));
		                            // #5050 - adding all areas causes the update
		                            // optimization of setData to kick in, even though
		                            // the point order has changed
		                            updatePoints = false;
		                        }
		                    });
		                } else {
		                    this.getBox(dataUsed); // Issue #4784
		                }
		            }
		            Series.prototype.setData.call(
		                this,
		                data,
		                redraw,
		                animation,
		                updatePoints
		            );
		        },

		        // No graph for the map series
		        drawGraph: noop,

		        // We need the points' bounding boxes in order to draw the data labels,
		        // so we skip it now and call it from drawPoints instead.
		        drawDataLabels: noop,

		        // Allow a quick redraw by just translating the area group. Used for
		        // zooming and panning in capable browsers.
		        doFullTranslate: function () {
		            return (
		                this.isDirtyData ||
		                this.chart.isResizing ||
		                this.chart.renderer.isVML ||
		                !this.baseTrans
		            );
		        },

		        // Add the path option for data points. Find the max value for color
		        // calculation.
		        translate: function () {
		            var series = this,
		                xAxis = series.xAxis,
		                yAxis = series.yAxis,
		                doFullTranslate = series.doFullTranslate();

		            series.generatePoints();

		            series.data.forEach(function (point) {

		                // Record the middle point (loosely based on centroid),
		                // determined by the middleX and middleY options.
		                point.plotX = xAxis.toPixels(point._midX, true);
		                point.plotY = yAxis.toPixels(point._midY, true);

		                if (doFullTranslate) {

		                    point.shapeType = 'path';
		                    point.shapeArgs = {
		                        d: series.translatePath(point.path)
		                    };
		                }
		            });

		            series.translateColors();
		        },

		        // Get presentational attributes. In the maps series this runs in both
		        // styled and non-styled mode, because colors hold data when a colorAxis
		        // is used.
		        pointAttribs: function (point, state) {
		            var attr = point.series.chart.styledMode ?
		                this.colorAttribs(point) :
		                seriesTypes.column.prototype.pointAttribs.call(
		                    this, point, state
		                );

		            // Set the stroke-width on the group element and let all point
		            // graphics inherit. That way we don't have to iterate over all
		            // points to update the stroke-width on zooming.
		            attr['stroke-width'] = pick(
		                point.options[
		                    (
		                        this.pointAttrToOptions &&
		                        this.pointAttrToOptions['stroke-width']
		                    ) || 'borderWidth'
		                ],
		                'inherit'
		            );

		            return attr;
		        },

		        // Use the drawPoints method of column, that is able to handle simple
		        // shapeArgs. Extend it by assigning the tooltip position.
		        drawPoints: function () {
		            var series = this,
		                xAxis = series.xAxis,
		                yAxis = series.yAxis,
		                group = series.group,
		                chart = series.chart,
		                renderer = chart.renderer,
		                scaleX,
		                scaleY,
		                translateX,
		                translateY,
		                baseTrans = this.baseTrans,
		                transformGroup,
		                startTranslateX,
		                startTranslateY,
		                startScaleX,
		                startScaleY;

		            // Set a group that handles transform during zooming and panning in
		            // order to preserve clipping on series.group
		            if (!series.transformGroup) {
		                series.transformGroup = renderer.g()
		                    .attr({
		                        scaleX: 1,
		                        scaleY: 1
		                    })
		                    .add(group);
		                series.transformGroup.survive = true;
		            }

		            // Draw the shapes again
		            if (series.doFullTranslate()) {

		                // Individual point actions.
		                if (chart.hasRendered && !chart.styledMode) {
		                    series.points.forEach(function (point) {

		                        // Restore state color on update/redraw (#3529)
		                        if (point.shapeArgs) {
		                            point.shapeArgs.fill = series.pointAttribs(
		                                point,
		                                point.state
		                            ).fill;
		                        }
		                    });
		                }

		                // Draw them in transformGroup
		                series.group = series.transformGroup;
		                seriesTypes.column.prototype.drawPoints.apply(series);
		                series.group = group; // Reset

		                // Add class names
		                series.points.forEach(function (point) {
		                    if (point.graphic) {
		                        if (point.name) {
		                            point.graphic.addClass(
		                                'highcharts-name-' +
		                                point.name.replace(/ /g, '-').toLowerCase()
		                            );
		                        }
		                        if (point.properties && point.properties['hc-key']) {
		                            point.graphic.addClass(
		                                'highcharts-key-' +
		                                point.properties['hc-key'].toLowerCase()
		                            );
		                        }

		                        // In styled mode, apply point colors by CSS
		                        if (chart.styledMode) {
		                            point.graphic.css(
		                                series.pointAttribs(
		                                    point,
		                                    point.selected && 'select'
		                                )
		                            );
		                        }
		                    }
		                });

		                // Set the base for later scale-zooming. The originX and originY
		                // properties are the axis values in the plot area's upper left
		                // corner.
		                this.baseTrans = {
		                    originX: xAxis.min - xAxis.minPixelPadding / xAxis.transA,
		                    originY: (
		                        yAxis.min -
		                        yAxis.minPixelPadding / yAxis.transA +
		                        (yAxis.reversed ? 0 : yAxis.len / yAxis.transA)
		                    ),
		                    transAX: xAxis.transA,
		                    transAY: yAxis.transA
		                };

		                // Reset transformation in case we're doing a full translate
		                // (#3789)
		                this.transformGroup.animate({
		                    translateX: 0,
		                    translateY: 0,
		                    scaleX: 1,
		                    scaleY: 1
		                });

		            // Just update the scale and transform for better performance
		            } else {
		                scaleX = xAxis.transA / baseTrans.transAX;
		                scaleY = yAxis.transA / baseTrans.transAY;
		                translateX = xAxis.toPixels(baseTrans.originX, true);
		                translateY = yAxis.toPixels(baseTrans.originY, true);

		                // Handle rounding errors in normal view (#3789)
		                if (
		                    scaleX > 0.99 &&
		                    scaleX < 1.01 &&
		                    scaleY > 0.99 &&
		                    scaleY < 1.01
		                ) {
		                    scaleX = 1;
		                    scaleY = 1;
		                    translateX = Math.round(translateX);
		                    translateY = Math.round(translateY);
		                }

		                /* Animate or move to the new zoom level. In order to prevent
		                   flickering as the different transform components are set out
		                   of sync (#5991), we run a fake animator attribute and set
		                   scale and translation synchronously in the same step.

		                   A possible improvement to the API would be to handle this in
		                   the renderer or animation engine itself, to ensure that when
		                   we are animating multiple properties, we make sure that each
		                   step for each property is performed in the same step. Also,
		                   for symbols and for transform properties, it should induce a
		                   single updateTransform and symbolAttr call. */
		                transformGroup = this.transformGroup;
		                if (chart.renderer.globalAnimation) {
		                    startTranslateX = transformGroup.attr('translateX');
		                    startTranslateY = transformGroup.attr('translateY');
		                    startScaleX = transformGroup.attr('scaleX');
		                    startScaleY = transformGroup.attr('scaleY');
		                    transformGroup
		                        .attr({ animator: 0 })
		                        .animate({
		                            animator: 1
		                        }, {
		                            step: function (now, fx) {
		                                transformGroup.attr({
		                                    translateX: startTranslateX +
		                                        (translateX - startTranslateX) * fx.pos,
		                                    translateY: startTranslateY +
		                                        (translateY - startTranslateY) * fx.pos,
		                                    scaleX: startScaleX +
		                                        (scaleX - startScaleX) * fx.pos,
		                                    scaleY: startScaleY +
		                                        (scaleY - startScaleY) * fx.pos
		                                });

		                            }
		                        });

		                // When dragging, animation is off.
		                } else {
		                    transformGroup.attr({
		                        translateX: translateX,
		                        translateY: translateY,
		                        scaleX: scaleX,
		                        scaleY: scaleY
		                    });
		                }

		            }

		            /* Set the stroke-width directly on the group element so the
		               children inherit it. We need to use setAttribute directly,
		               because the stroke-widthSetter method expects a stroke color also
		               to be set. */
		            if (!chart.styledMode) {
		                group.element.setAttribute(
		                    'stroke-width',
		                    (
		                        series.options[
		                            (
		                                series.pointAttrToOptions &&
		                                series.pointAttrToOptions['stroke-width']
		                            ) || 'borderWidth'
		                        ] ||
		                        1 // Styled mode
		                    ) / (scaleX || 1)
		                );
		            }

		            this.drawMapDataLabels();

		        },

		        // Draw the data labels. Special for maps is the time that the data
		        // labels are drawn (after points), and the clipping of the
		        // dataLabelsGroup.
		        drawMapDataLabels: function () {

		            Series.prototype.drawDataLabels.call(this);
		            if (this.dataLabelsGroup) {
		                this.dataLabelsGroup.clip(this.chart.clipRect);
		            }
		        },

		        // Override render to throw in an async call in IE8. Otherwise it chokes
		        // on the US counties demo.
		        render: function () {
		            var series = this,
		                render = Series.prototype.render;

		            // Give IE8 some time to breathe.
		            if (series.chart.renderer.isVML && series.data.length > 3000) {
		                setTimeout(function () {
		                    render.call(series);
		                });
		            } else {
		                render.call(series);
		            }
		        },

		        // The initial animation for the map series. By default, animation is
		        // disabled. Animation of map shapes is not at all supported in VML
		        // browsers.
		        animate: function (init) {
		            var chart = this.chart,
		                animation = this.options.animation,
		                group = this.group,
		                xAxis = this.xAxis,
		                yAxis = this.yAxis,
		                left = xAxis.pos,
		                top = yAxis.pos;

		            if (chart.renderer.isSVG) {

		                if (animation === true) {
		                    animation = {
		                        duration: 1000
		                    };
		                }

		                // Initialize the animation
		                if (init) {

		                    // Scale down the group and place it in the center
		                    group.attr({
		                        translateX: left + xAxis.len / 2,
		                        translateY: top + yAxis.len / 2,
		                        scaleX: 0.001, // #1499
		                        scaleY: 0.001
		                    });

		                // Run the animation
		                } else {
		                    group.animate({
		                        translateX: left,
		                        translateY: top,
		                        scaleX: 1,
		                        scaleY: 1
		                    }, animation);

		                    // Delete this function to allow it only once
		                    this.animate = null;
		                }
		            }
		        },

		        // Animate in the new series from the clicked point in the old series.
		        // Depends on the drilldown.js module
		        animateDrilldown: function (init) {
		            var toBox = this.chart.plotBox,
		                level = this.chart.drilldownLevels[
		                    this.chart.drilldownLevels.length - 1
		                ],
		                fromBox = level.bBox,
		                animationOptions = this.chart.options.drilldown.animation,
		                scale;

		            if (!init) {

		                scale = Math.min(
		                    fromBox.width / toBox.width,
		                    fromBox.height / toBox.height
		                );
		                level.shapeArgs = {
		                    scaleX: scale,
		                    scaleY: scale,
		                    translateX: fromBox.x,
		                    translateY: fromBox.y
		                };

		                this.points.forEach(function (point) {
		                    if (point.graphic) {
		                        point.graphic
		                            .attr(level.shapeArgs)
		                            .animate({
		                                scaleX: 1,
		                                scaleY: 1,
		                                translateX: 0,
		                                translateY: 0
		                            }, animationOptions);
		                    }
		                });

		                this.animate = null;
		            }

		        },

		        drawLegendSymbol: LegendSymbolMixin.drawRectangle,

		        // When drilling up, pull out the individual point graphics from the
		        // lower series and animate them into the origin point in the upper
		        // series.
		        animateDrillupFrom: function (level) {
		            seriesTypes.column.prototype.animateDrillupFrom.call(this, level);
		        },


		        // When drilling up, keep the upper series invisible until the lower
		        // series has moved into place
		        animateDrillupTo: function (init) {
		            seriesTypes.column.prototype.animateDrillupTo.call(this, init);
		        }

		    // Point class
		    }), extend({

		        // Extend the Point object to split paths
		        applyOptions: function (options, x) {

		            var point = Point.prototype.applyOptions.call(this, options, x),
		                series = this.series,
		                joinBy = series.joinBy,
		                mapPoint;

		            if (series.mapData) {
		                mapPoint = point[joinBy[1]] !== undefined &&
		                    series.mapMap[point[joinBy[1]]];
		                if (mapPoint) {
		                    // This applies only to bubbles
		                    if (series.xyFromShape) {
		                        point.x = mapPoint._midX;
		                        point.y = mapPoint._midY;
		                    }
		                    extend(point, mapPoint); // copy over properties
		                } else {
		                    point.value = point.value || null;
		                }
		            }

		            return point;
		        },

		        // Stop the fade-out
		        onMouseOver: function (e) {
		            H.clearTimeout(this.colorInterval);
		            if (this.value !== null || this.series.options.nullInteraction) {
		                Point.prototype.onMouseOver.call(this, e);
		            } else {
		                // #3401 Tooltip doesn't hide when hovering over null points
		                this.series.onMouseOut(e);
		            }
		        },

		        /**
		         * Highmaps only. Zoom in on the point using the global animation.
		         *
		         * @sample maps/members/point-zoomto/
		         *         Zoom to points from butons
		         *
		         * @requires module:modules/map
		         *
		         * @function Highcharts.Point#zoomTo
		         */
		        zoomTo: function () {
		            var point = this,
		                series = point.series;

		            series.xAxis.setExtremes(
		                point._minX,
		                point._maxX,
		                false
		            );
		            series.yAxis.setExtremes(
		                point._minY,
		                point._maxY,
		                false
		            );
		            series.chart.redraw();
		        }
		    }, colorPointMixin)
		);

		/**
		 * A map data object containing a `path` definition and optionally additional
		 * properties to join in the data as per the `joinBy` option.
		 *
		 * @sample maps/demo/category-map/
		 *         Map data and joinBy
		 *
		 * @type      {Highcharts.MapDataObject|Array<Highcharts.MapDataObject>}
		 * @product   highmaps
		 * @apioption series.mapData
		 */

		/**
		 * A `map` series. If the [type](#series.map.type) option is not specified, it
		 * is inherited from [chart.type](#chart.type).
		 *
		 * @extends   series,plotOptions.map
		 * @excluding dataParser, dataURL, marker
		 * @product   highmaps
		 * @apioption series.map
		 */

		/**
		 * An array of data points for the series. For the `map` series type, points can
		 * be given in the following ways:
		 *
		 * 1.  An array of numerical values. In this case, the numerical values will be
		 * interpreted as `value` options. Example:
		 *
		 *  ```js
		 *  data: [0, 5, 3, 5]
		 *  ```
		 *
		 * 2.  An array of arrays with 2 values. In this case, the values correspond to
		 * `[hc-key, value]`. Example:
		 *
		 *  ```js
		 *     data: [
		 *         ['us-ny', 0],
		 *         ['us-mi', 5],
		 *         ['us-tx', 3],
		 *         ['us-ak', 5]
		 *     ]
		 *  ```
		 *
		 * 3.  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.map.turboThreshold), this
		 * option is not available.
		 *
		 *  ```js
		 *     data: [{
		 *         value: 6,
		 *         name: "Point2",
		 *         color: "#00FF00"
		 *     }, {
		 *         value: 6,
		 *         name: "Point1",
		 *         color: "#FF00FF"
		 *     }]
		 *  ```
		 *
		 * @type      {Array<number|Array<string,number>|*>}
		 * @apioption series.map.data
		 */

		/**
		 * Individual color for the point. By default the color is either used
		 * to denote the value, or pulled from the global `colors` array.
		 *
		 * @type      {Highcharts.ColorString}
		 * @product   highmaps
		 * @apioption series.map.data.color
		 */

		/**
		 * Individual data label for each point. The options are the same as
		 * the ones for [plotOptions.series.dataLabels](
		 * #plotOptions.series.dataLabels).
		 *
		 * @sample maps/series/data-datalabels/
		 *         Disable data labels for individual areas
		 *
		 * @type {Object}
		 * @product highmaps
		 * @apioption series.map.data.dataLabels
		 */

		/**
		 * The `id` of a series in the [drilldown.series](#drilldown.series)
		 * array to use for a drilldown for this point.
		 *
		 * @sample maps/demo/map-drilldown/
		 *         Basic drilldown
		 *
		 * @type      {string}
		 * @product   highmaps
		 * @apioption series.map.data.drilldown
		 */

		/**
		 * An id for the point. This can be used after render time to get a
		 * pointer to the point object through `chart.get()`.
		 *
		 * @sample maps/series/data-id/
		 *         Highlight a point by id
		 *
		 * @type      {string}
		 * @product   highmaps
		 * @apioption series.map.data.id
		 */

		/**
		 * When data labels are laid out on a map, Highmaps runs a simplified
		 * algorithm to detect collision. When two labels collide, the one with
		 * the lowest rank is hidden. By default the rank is computed from the
		 * area.
		 *
		 * @type      {number}
		 * @product   highmaps
		 * @apioption series.map.data.labelrank
		 */

		 /**
		 * The relative mid point of an area, used to place the data label.
		 * Ranges from 0 to 1\. When `mapData` is used, middleX can be defined
		 * there.
		 *
		 * @type      {number}
		 * @default   0.5
		 * @product   highmaps
		 * @apioption series.map.data.middleX
		 */

		/**
		 * The relative mid point of an area, used to place the data label.
		 * Ranges from 0 to 1\. When `mapData` is used, middleY can be defined
		 * there.
		 *
		 * @type      {number}
		 * @default   0.5
		 * @product   highmaps
		 * @apioption series.map.data.middleY
		 */

		/**
		 * The name of the point as shown in the legend, tooltip, dataLabel
		 * etc.
		 *
		 * @sample maps/series/data-datalabels/
		 *         Point names
		 *
		 * @type      {string}
		 * @product   highmaps
		 * @apioption series.map.data.name
		 */

		/**
		 * For map and mapline series types, the SVG path for the shape. For
		 * compatibily with old IE, not all SVG path definitions are supported,
		 * but M, L and C operators are safe.
		 *
		 * To achieve a better separation between the structure and the data,
		 * it is recommended to use `mapData` to define that paths instead
		 * of defining them on the data points themselves.
		 *
		 * @sample maps/series/data-path/
		 *         Paths defined in data
		 *
		 * @type      {string}
		 * @product   highmaps
		 * @apioption series.map.data.path
		 */

		/**
		 * The numeric value of the data point.
		 *
		 * @type      {number}
		 * @product   highmaps
		 * @apioption series.map.data.value
		 */


		/**
		 * Individual point events
		 *
		 * @extends   plotOptions.series.point.events
		 * @product   highmaps
		 * @apioption series.map.data.events
		 */

	}(Highcharts));
	(function (H) {
		/* *
		 * (c) 2010-2018 Torstein Honsi
		 *
		 * License: www.highcharts.com/license
		 */



		var noop = H.noop,
		    pick = H.pick,
		    extend = H.extend,
		    isArray = H.isArray,
		    defined = H.defined,
		    Series = H.Series,
		    seriesType = H.seriesType,
		    seriesTypes = H.seriesTypes,
		    seriesProto = Series.prototype,
		    pointProto = H.Point.prototype;

		/**
		 * The area range series is a carteseian series with higher and lower values for
		 * each point along an X axis, where the area between the values is shaded.
		 * Requires `highcharts-more.js`.
		 *
		 * @sample {highcharts} highcharts/demo/arearange/
		 *         Area range chart
		 * @sample {highstock} stock/demo/arearange/
		 *         Area range chart
		 *
		 * @extends      plotOptions.area
		 * @product      highcharts highstock
		 * @excluding    stack, stacking
		 * @optionparent plotOptions.arearange
		 */
		seriesType('arearange', 'area', {

		    /**
		     * Whether to apply a drop shadow to the graph line. Since 2.3 the shadow
		     * can be an object configuration containing `color`, `offsetX`, `offsetY`,
		     * `opacity` and `width`.
		     *
		     * @type      {boolean|Highcharts.ShadowOptionsObject}
		     * @product   highcharts
		     * @apioption plotOptions.arearange.shadow
		     */

		    /**
		     * Pixel width of the arearange graph line.
		     *
		     * @since   2.3.0
		     * @product highcharts highstock
		     */
		    lineWidth: 1,

		    threshold: null,

		    tooltip: {
		        pointFormat: '<span style="color:{series.color}">\u25CF</span> ' +
		            '{series.name}: <b>{point.low}</b> - <b>{point.high}</b><br/>'
		    },

		    /**
		     * Whether the whole area or just the line should respond to mouseover
		     * tooltips and other mouse or touch events.
		     *
		     * @since   2.3.0
		     * @product highcharts highstock
		     */
		    trackByArea: true,

		    /**
		     * Extended data labels for range series types. Range series data labels
		     * have no `x` and `y` options. Instead, they have `xLow`, `xHigh`, `yLow`
		     * and `yHigh` options to allow the higher and lower data label sets
		     * individually.
		     *
		     * @extends   plotOptions.series.dataLabels
		     * @since     2.3.0
		     * @excluding x, y
		     * @product   highcharts highstock
		     */
		    dataLabels: {

		        align: null,
		        verticalAlign: null,

		        /**
		         * X offset of the lower data labels relative to the point value.
		         *
		         * @sample {highcharts} highcharts/plotoptions/arearange-datalabels/
		         *         Data labels on range series
		         * @sample {highstock} highcharts/plotoptions/arearange-datalabels/
		         *         Data labels on range series
		         *
		         * @since   2.3.0
		         * @product highcharts highstock
		         */
		        xLow: 0,

		        /**
		         * X offset of the higher data labels relative to the point value.
		         *
		         * @sample {highcharts|highstock} highcharts/plotoptions/arearange-datalabels/
		         *         Data labels on range series
		         *
		         * @since   2.3.0
		         * @product highcharts highstock
		         */
		        xHigh: 0,

		        /**
		         * Y offset of the lower data labels relative to the point value.
		         *
		         * @sample {highcharts|highstock} highcharts/plotoptions/arearange-datalabels/
		         *         Data labels on range series
		         *
		         * @since   2.3.0
		         * @product highcharts highstock
		         */
		        yLow: 0,

		        /**
		         * Y offset of the higher data labels relative to the point value.
		         *
		         * @sample {highcharts|highstock} highcharts/plotoptions/arearange-datalabels/
		         *         Data labels on range series
		         *
		         * @since   2.3.0
		         * @product highcharts highstock
		         */
		        yHigh: 0
		    }

		// Prototype members
		}, {
		    pointArrayMap: ['low', 'high'],
		    toYData: function (point) {
		        return [point.low, point.high];
		    },
		    pointValKey: 'low',
		    deferTranslatePolar: true,

		    // Translate a point's plotHigh from the internal angle and radius measures
		    // to true plotHigh coordinates. This is an addition of the toXY method
		    // found in Polar.js, because it runs too early for arearanges to be
		    // considered (#3419).
		    highToXY: function (point) {
		        // Find the polar plotX and plotY
		        var chart = this.chart,
		            xy = this.xAxis.postTranslate(
		                point.rectPlotX,
		                this.yAxis.len - point.plotHigh
		            );
		        point.plotHighX = xy.x - chart.plotLeft;
		        point.plotHigh = xy.y - chart.plotTop;
		        point.plotLowX = point.plotX;
		    },

		    // Translate data points from raw values x and y to plotX and plotY.
		    translate: function () {
		        var series = this,
		            yAxis = series.yAxis,
		            hasModifyValue = !!series.modifyValue;

		        seriesTypes.area.prototype.translate.apply(series);

		        // Set plotLow and plotHigh
		        series.points.forEach(function (point) {

		            var low = point.low,
		                high = point.high,
		                plotY = point.plotY;

		            if (high === null || low === null) {
		                point.isNull = true;
		                point.plotY = null;
		            } else {
		                point.plotLow = plotY;
		                point.plotHigh = yAxis.translate(
		                    hasModifyValue ? series.modifyValue(high, point) : high,
		                    0,
		                    1,
		                    0,
		                    1
		                );
		                if (hasModifyValue) {
		                    point.yBottom = point.plotHigh;
		                }
		            }
		        });

		        // Postprocess plotHigh
		        if (this.chart.polar) {
		            this.points.forEach(function (point) {
		                series.highToXY(point);
		                point.tooltipPos = [
		                    (point.plotHighX + point.plotLowX) / 2,
		                    (point.plotHigh + point.plotLow) / 2
		                ];
		            });
		        }
		    },

		    // Extend the line series' getSegmentPath method by applying the segment
		    // path to both lower and higher values of the range.
		    getGraphPath: function (points) {

		        var highPoints = [],
		            highAreaPoints = [],
		            i,
		            getGraphPath = seriesTypes.area.prototype.getGraphPath,
		            point,
		            pointShim,
		            linePath,
		            lowerPath,
		            options = this.options,
		            connectEnds = this.chart.polar && options.connectEnds !== false,
		            connectNulls = options.connectNulls,
		            step = options.step,
		            higherPath,
		            higherAreaPath;

		        points = points || this.points;
		        i = points.length;

		        // Create the top line and the top part of the area fill. The area fill
		        // compensates for null points by drawing down to the lower graph,
		        // moving across the null gap and starting again at the lower graph.
		        i = points.length;
		        while (i--) {
		            point = points[i];

		            if (
		                !point.isNull &&
		                !connectEnds &&
		                !connectNulls &&
		                (!points[i + 1] || points[i + 1].isNull)
		            ) {
		                highAreaPoints.push({
		                    plotX: point.plotX,
		                    plotY: point.plotY,
		                    doCurve: false // #5186, gaps in areasplinerange fill
		                });
		            }

		            pointShim = {
		                polarPlotY: point.polarPlotY,
		                rectPlotX: point.rectPlotX,
		                yBottom: point.yBottom,
		                // plotHighX is for polar charts
		                plotX: pick(point.plotHighX, point.plotX),
		                plotY: point.plotHigh,
		                isNull: point.isNull
		            };

		            highAreaPoints.push(pointShim);

		            highPoints.push(pointShim);

		            if (
		                !point.isNull &&
		                !connectEnds &&
		                !connectNulls &&
		                (!points[i - 1] || points[i - 1].isNull)
		            ) {
		                highAreaPoints.push({
		                    plotX: point.plotX,
		                    plotY: point.plotY,
		                    doCurve: false // #5186, gaps in areasplinerange fill
		                });
		            }
		        }

		        // Get the paths
		        lowerPath = getGraphPath.call(this, points);
		        if (step) {
		            if (step === true) {
		                step = 'left';
		            }
		            options.step = {
		                left: 'right',
		                center: 'center',
		                right: 'left'
		            }[step]; // swap for reading in getGraphPath
		        }
		        higherPath = getGraphPath.call(this, highPoints);
		        higherAreaPath = getGraphPath.call(this, highAreaPoints);
		        options.step = step;

		        // Create a line on both top and bottom of the range
		        linePath = [].concat(lowerPath, higherPath);

		        // For the area path, we need to change the 'move' statement
		        // into 'lineTo' or 'curveTo'
		        if (!this.chart.polar && higherAreaPath[0] === 'M') {
		            higherAreaPath[0] = 'L'; // this probably doesn't work for spline
		        }

		        this.graphPath = linePath;
		        this.areaPath = lowerPath.concat(higherAreaPath);

		        // Prepare for sideways animation
		        linePath.isArea = true;
		        linePath.xMap = lowerPath.xMap;
		        this.areaPath.xMap = lowerPath.xMap;

		        return linePath;
		    },

		    // Extend the basic drawDataLabels method by running it for both lower and
		    // higher values.
		    drawDataLabels: function () {

		        var data = this.points,
		            length = data.length,
		            i,
		            originalDataLabels = [],
		            dataLabelOptions = this.options.dataLabels,
		            point,
		            up,
		            inverted = this.chart.inverted,
		            upperDataLabelOptions,
		            lowerDataLabelOptions;

		        // Split into upper and lower options. If data labels is an array, the
		        // first element is the upper label, the second is the lower.
		        //
		        // TODO: We want to change this and allow multiple labels for both upper
		        // and lower values in the future - introducing some options for which
		        // point value to use as Y for the dataLabel, so that this could be
		        // handled in Series.drawDataLabels. This would also improve performance
		        // since we now have to loop over all the points multiple times to work
		        // around the data label logic.
		        if (isArray(dataLabelOptions)) {
		            if (dataLabelOptions.length > 1) {
		                upperDataLabelOptions = dataLabelOptions[0];
		                lowerDataLabelOptions = dataLabelOptions[1];
		            } else {
		                upperDataLabelOptions = dataLabelOptions[0];
		                lowerDataLabelOptions = { enabled: false };
		            }
		        } else {
		            upperDataLabelOptions = extend({}, dataLabelOptions); // Make copy;
		            upperDataLabelOptions.x = dataLabelOptions.xHigh;
		            upperDataLabelOptions.y = dataLabelOptions.yHigh;
		            lowerDataLabelOptions = extend({}, dataLabelOptions); // Make copy
		            lowerDataLabelOptions.x = dataLabelOptions.xLow;
		            lowerDataLabelOptions.y = dataLabelOptions.yLow;
		        }

		        // Draw upper labels
		        if (upperDataLabelOptions.enabled || this._hasPointLabels) {
		            // Set preliminary values for plotY and dataLabel
		            // and draw the upper labels
		            i = length;
		            while (i--) {
		                point = data[i];
		                if (point) {
		                    up = upperDataLabelOptions.inside ?
		                        point.plotHigh < point.plotLow :
		                        point.plotHigh > point.plotLow;

		                    point.y = point.high;
		                    point._plotY = point.plotY;
		                    point.plotY = point.plotHigh;

		                    // Store original data labels and set preliminary label
		                    // objects to be picked up in the uber method
		                    originalDataLabels[i] = point.dataLabel;
		                    point.dataLabel = point.dataLabelUpper;

		                    // Set the default offset
		                    point.below = up;
		                    if (inverted) {
		                        if (!upperDataLabelOptions.align) {
		                            upperDataLabelOptions.align = up ? 'right' : 'left';
		                        }
		                    } else {
		                        if (!upperDataLabelOptions.verticalAlign) {
		                            upperDataLabelOptions.verticalAlign = up ?
		                                'top' :
		                                'bottom';
		                        }
		                    }
		                }
		            }

		            this.options.dataLabels = upperDataLabelOptions;

		            if (seriesProto.drawDataLabels) {
		                seriesProto.drawDataLabels.apply(this, arguments); // #1209
		            }

		            // Reset state after the upper labels were created. Move
		            // it to point.dataLabelUpper and reassign the originals.
		            // We do this here to support not drawing a lower label.
		            i = length;
		            while (i--) {
		                point = data[i];
		                if (point) {
		                    point.dataLabelUpper = point.dataLabel;
		                    point.dataLabel = originalDataLabels[i];
		                    delete point.dataLabels;
		                    point.y = point.low;
		                    point.plotY = point._plotY;
		                }
		            }
		        }

		        // Draw lower labels
		        if (lowerDataLabelOptions.enabled || this._hasPointLabels) {
		            i = length;
		            while (i--) {
		                point = data[i];
		                if (point) {
		                    up = lowerDataLabelOptions.inside ?
		                        point.plotHigh < point.plotLow :
		                        point.plotHigh > point.plotLow;

		                    // Set the default offset
		                    point.below = !up;
		                    if (inverted) {
		                        if (!lowerDataLabelOptions.align) {
		                            lowerDataLabelOptions.align = up ? 'left' : 'right';
		                        }
		                    } else {
		                        if (!lowerDataLabelOptions.verticalAlign) {
		                            lowerDataLabelOptions.verticalAlign = up ?
		                                'bottom' :
		                                'top';
		                        }
		                    }
		                }
		            }

		            this.options.dataLabels = lowerDataLabelOptions;

		            if (seriesProto.drawDataLabels) {
		                seriesProto.drawDataLabels.apply(this, arguments);
		            }
		        }

		        // Merge upper and lower into point.dataLabels for later destroying
		        if (upperDataLabelOptions.enabled) {
		            i = length;
		            while (i--) {
		                point = data[i];
		                if (point) {
		                    point.dataLabels = [point.dataLabel, point.dataLabelUpper]
		                        .filter(function (label) {
		                            return !!label;
		                        });
		                }
		            }
		        }

		        // Reset options
		        this.options.dataLabels = dataLabelOptions;
		    },

		    alignDataLabel: function () {
		        seriesTypes.column.prototype.alignDataLabel.apply(this, arguments);
		    },

		    drawPoints: function () {
		        var series = this,
		            pointLength = series.points.length,
		            point,
		            i;

		        // Draw bottom points
		        seriesProto.drawPoints.apply(series, arguments);

		        // Prepare drawing top points
		        i = 0;
		        while (i < pointLength) {
		            point = series.points[i];

		            // Save original props to be overridden by temporary props for top
		            // points
		            point.origProps = {
		                plotY: point.plotY,
		                plotX: point.plotX,
		                isInside: point.isInside,
		                negative: point.negative,
		                zone: point.zone,
		                y: point.y
		            };

		            point.lowerGraphic = point.graphic;
		            point.graphic = point.upperGraphic;
		            point.plotY = point.plotHigh;
		            if (defined(point.plotHighX)) {
		                point.plotX = point.plotHighX;
		            }
		            point.y = point.high;
		            point.negative = point.high < (series.options.threshold || 0);
		            point.zone = series.zones.length && point.getZone();

		            if (!series.chart.polar) {
		                point.isInside = point.isTopInside = (
		                    point.plotY !== undefined &&
		                    point.plotY >= 0 &&
		                    point.plotY <= series.yAxis.len && // #3519
		                    point.plotX >= 0 &&
		                    point.plotX <= series.xAxis.len
		                );
		            }
		            i++;
		        }

		        // Draw top points
		        seriesProto.drawPoints.apply(series, arguments);

		        // Reset top points preliminary modifications
		        i = 0;
		        while (i < pointLength) {
		            point = series.points[i];
		            point.upperGraphic = point.graphic;
		            point.graphic = point.lowerGraphic;
		            H.extend(point, point.origProps);
		            delete point.origProps;
		            i++;
		        }
		    },

		    setStackedPoints: noop
		}, {
		    setState: function () {
		        var prevState = this.state,
		            series = this.series,
		            isPolar = series.chart.polar;


		        if (!defined(this.plotHigh)) {
		            // Boost doesn't calculate plotHigh
		            this.plotHigh = series.yAxis.toPixels(this.high, true);
		        }

		        if (!defined(this.plotLow)) {
		            // Boost doesn't calculate plotLow
		            this.plotLow = this.plotY = series.yAxis.toPixels(this.low, true);
		        }

		        if (series.stateMarkerGraphic) {
		            series.lowerStateMarkerGraphic = series.stateMarkerGraphic;
		            series.stateMarkerGraphic = series.upperStateMarkerGraphic;
		        }

		        // Change state also for the top marker
		        this.graphic = this.upperGraphic;
		        this.plotY = this.plotHigh;

		        if (isPolar) {
		            this.plotX = this.plotHighX;
		        }

		        // Top state:
		        pointProto.setState.apply(this, arguments);

		        this.state = prevState;

		        // Now restore defaults
		        this.plotY = this.plotLow;
		        this.graphic = this.lowerGraphic;

		        if (isPolar) {
		            this.plotX = this.plotLowX;
		        }

		        if (series.stateMarkerGraphic) {
		            series.upperStateMarkerGraphic = series.stateMarkerGraphic;
		            series.stateMarkerGraphic = series.lowerStateMarkerGraphic;
		            // Lower marker is stored at stateMarkerGraphic
		            // to avoid reference duplication (#7021)
		            series.lowerStateMarkerGraphic = undefined;
		        }

		        pointProto.setState.apply(this, arguments);

		    },
		    haloPath: function () {
		        var isPolar = this.series.chart.polar,
		            path = [];

		        // Bottom halo
		        this.plotY = this.plotLow;
		        if (isPolar) {
		            this.plotX = this.plotLowX;
		        }

		        if (this.isInside) {
		            path = pointProto.haloPath.apply(this, arguments);
		        }

		        // Top halo
		        this.plotY = this.plotHigh;
		        if (isPolar) {
		            this.plotX = this.plotHighX;
		        }
		        if (this.isTopInside) {
		            path = path.concat(
		                pointProto.haloPath.apply(this, arguments)
		            );
		        }

		        return path;
		    },
		    destroyElements: function () {
		        var graphics = ['lowerGraphic', 'upperGraphic'];

		        graphics.forEach(function (graphicName) {
		            if (this[graphicName]) {
		                this[graphicName] = this[graphicName].destroy();
		            }
		        }, this);

		        // Clear graphic for states, removed in the above each:
		        this.graphic = null;

		        return pointProto.destroyElements.apply(this, arguments);
		    }
		});


		/**
		 * A `arearange` series. If the [type](#series.arearange.type) option is not
		 * specified, it is inherited from [chart.type](#chart.type).
		 *
		 *
		 * @extends   series,plotOptions.arearange
		 * @excluding dataParser, dataURL, stack, stacking
		 * @product   highcharts highstock
		 * @apioption series.arearange
		 */

		/**
		 * An array of data points for the series. For the `arearange` series type,
		 * points can be given in the following ways:
		 *
		 * 1.  An array of arrays with 3 or 2 values. In this case, the values
		 *     correspond to `x,low,high`. If the first value is a string, it is
		 *     applied as the name of the point, and the `x` value is inferred.
		 *     The `x` value can also be omitted, in which case the inner arrays
		 *     should be of length 2\. Then the `x` value is automatically calculated,
		 *     either starting at 0 and incremented by 1, or from `pointStart`
		 *     and `pointInterval` given in the series options.
		 *     ```js
		 *     data: [
		 *         [0, 8, 3],
		 *         [1, 1, 1],
		 *         [2, 6, 8]
		 *     ]
		 *     ```
		 *
		 * 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.arearange.turboThreshold),
		 *     this option is not available.
		 *     ```js
		 *     data: [{
		 *         x: 1,
		 *         low: 9,
		 *         high: 0,
		 *         name: "Point2",
		 *         color: "#00FF00"
		 *     }, {
		 *         x: 1,
		 *         low: 3,
		 *         high: 4,
		 *         name: "Point1",
		 *         color: "#FF00FF"
		 *     }]
		 *     ```
		 *
		 * @sample {highcharts} highcharts/series/data-array-of-arrays/
		 *         Arrays of numeric x and y
		 * @sample {highcharts} highcharts/series/data-array-of-arrays-datetime/
		 *         Arrays of datetime x and y
		 * @sample {highcharts} highcharts/series/data-array-of-name-value/
		 *         Arrays of point.name and y
		 * @sample {highcharts} highcharts/series/data-array-of-objects/
		 *         Config objects
		 *
		 * @type      {Array<Array<(number|string),number>|Array<(number|string),number,number>|*>}
		 * @extends   series.line.data
		 * @excluding marker, y
		 * @product   highcharts highstock
		 * @apioption series.arearange.data
		 */

		/**
		 * The high or maximum value for each data point.
		 *
		 * @type      {number}
		 * @product   highcharts highstock
		 * @apioption series.arearange.data.high
		 */

		/**
		 * The low or minimum value for each data point.
		 *
		 * @type      {number}
		 * @product   highcharts highstock
		 * @apioption series.arearange.data.low
		 */

		 /**
		 * @excluding x, y
		 * @product   highcharts highstock
		 * @apioption series.arearange.dataLabels
		 */

	}(Highcharts));
	(function (H) {
		/* *
		 * (c) 2010-2018 Torstein Honsi
		 *
		 * License: www.highcharts.com/license
		 */



		var seriesType = H.seriesType,
		    seriesTypes = H.seriesTypes;

		/**
		 * The area spline range is a cartesian series type with higher and
		 * lower Y values along an X axis. The area inside the range is colored, and
		 * the graph outlining the area is a smoothed spline. Requires
		 * `highcharts-more.js`.
		 *
		 * @sample {highstock|highstock} stock/demo/areasplinerange/
		 *         Area spline range
		 *
		 * @extends   plotOptions.arearange
		 * @since     2.3.0
		 * @excluding step
		 * @product   highcharts highstock
		 * @apioption plotOptions.areasplinerange
		 */
		seriesType('areasplinerange', 'arearange', null, {
		    getPointSpline: seriesTypes.spline.prototype.getPointSpline
		});

		/**
		 * A `areasplinerange` series. If the [type](#series.areasplinerange.type)
		 * option is not specified, it is inherited from [chart.type](#chart.type).
		 *
		 * @extends   series,plotOptions.areasplinerange
		 * @excluding dataParser, dataURL, stack
		 * @product   highcharts highstock
		 * @apioption series.areasplinerange
		 */

		/**
		 * An array of data points for the series. For the `areasplinerange`
		 * series type, points can be given in the following ways:
		 *
		 * 1. An array of arrays with 3 or 2 values. In this case, the values correspond
		 *    to `x,low,high`. If the first value is a string, it is applied as the name
		 *    of the point, and the `x` value is inferred. The `x` value can also be
		 *    omitted, in which case the inner arrays should be of length 2\. Then the
		 *    `x` value is automatically calculated, either starting at 0 and
		 *    incremented by 1, or from `pointStart` and `pointInterval` given in the
		 *    series options.
		 *    ```js
		 *    data: [
		 *        [0, 0, 5],
		 *        [1, 9, 1],
		 *        [2, 5, 2]
		 *    ]
		 *    ```
		 *
		 * 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.areasplinerange.turboThreshold), this option is
		 *    not available.
		 *    ```js
		 *    data: [{
		 *        x: 1,
		 *        low: 5,
		 *        high: 0,
		 *        name: "Point2",
		 *        color: "#00FF00"
		 *    }, {
		 *        x: 1,
		 *        low: 4,
		 *        high: 1,
		 *        name: "Point1",
		 *        color: "#FF00FF"
		 *    }]
		 *    ```
		 *
		 * @sample {highcharts} highcharts/series/data-array-of-arrays/
		 *         Arrays of numeric x and y
		 * @sample {highcharts} highcharts/series/data-array-of-arrays-datetime/
		 *         Arrays of datetime x and y
		 * @sample {highcharts} highcharts/series/data-array-of-name-value/
		 *         Arrays of point.name and y
		 * @sample {highcharts} highcharts/series/data-array-of-objects/
		 *         Config objects
		 *
		 * @type      {Array<Array<(number|string),number>|Array<(number|string),number,number>|*>}
		 * @extends   series.arearange.data
		 * @product   highcharts highstock
		 * @apioption series.areasplinerange.data
		 */

	}(Highcharts));
	(function (H) {
		/* *
		 * (c) 2010-2018 Torstein Honsi
		 *
		 * License: www.highcharts.com/license
		 */



		var noop = H.noop,
		    pick = H.pick,
		    seriesType = H.seriesType,
		    seriesTypes = H.seriesTypes;

		/**
		 * The boxplot series type.
		 *
		 * @private
		 * @class
		 * @name Highcharts.seriesTypes#boxplot
		 *
		 * @augments Highcharts.Series
		 */

		/**
		 * A box plot is a convenient way of depicting groups of data through their
		 * five-number summaries: the smallest observation (sample minimum), lower
		 * quartile (Q1), median (Q2), upper quartile (Q3), and largest observation
		 * (sample maximum).
		 *
		 * @sample highcharts/demo/box-plot/
		 *         Box plot
		 *
		 * @extends      plotOptions.column
		 * @excluding    borderColor, borderRadius, borderWidth, groupZPadding, states
		 * @product      highcharts
		 * @optionparent plotOptions.boxplot
		 */
		seriesType('boxplot', 'column', {

		    threshold: null,

		    tooltip: {
		        pointFormat:
		            '<span style="color:{point.color}">\u25CF</span> <b> ' +
		            '{series.name}</b><br/>' +
		            'Maximum: {point.high}<br/>' +
		            'Upper quartile: {point.q3}<br/>' +
		            'Median: {point.median}<br/>' +
		            'Lower quartile: {point.q1}<br/>' +
		            'Minimum: {point.low}<br/>'
		    },

		    /**
		     * The length of the whiskers, the horizontal lines marking low and
		     * high values. It can be a numerical pixel value, or a percentage
		     * value of the box width. Set `0` to disable whiskers.
		     *
		     * @sample {highcharts} highcharts/plotoptions/box-plot-styling/
		     *         True by default
		     *
		     * @type    {number|string}
		     * @since   3.0
		     * @product highcharts
		     */
		    whiskerLength: '50%',

		    /**
		     * The fill color of the box.
		     *
		     * In styled mode, the fill color can be set with the
		     * `.highcharts-boxplot-box` class.
		     *
		     * @sample {highcharts} highcharts/plotoptions/box-plot-styling/
		     *         Box plot styling
		     *
		     * @type    {Highcharts.ColorString|Highcharts.GradientColorObject}
		     * @default #ffffff
		     * @since   3.0
		     * @product highcharts
		     */
		    fillColor: '#ffffff',

		    /**
		     * The width of the line surrounding the box. If any of
		     * [stemWidth](#plotOptions.boxplot.stemWidth),
		     * [medianWidth](#plotOptions.boxplot.medianWidth)
		     * or [whiskerWidth](#plotOptions.boxplot.whiskerWidth) are `null`,
		     * the lineWidth also applies to these lines.
		     *
		     * @sample {highcharts} highcharts/plotoptions/box-plot-styling/
		     *         Box plot styling
		     * @sample {highcharts} highcharts/plotoptions/error-bar-styling/
		     *         Error bar styling
		     *
		     * @since   3.0
		     * @product highcharts
		     */
		    lineWidth: 1,

		    /**
		     * The color of the median line. If `undefined`, the general series color
		     * applies.
		     *
		     * In styled mode, the median stroke width can be set with the
		     * `.highcharts-boxplot-median` class.
		     *
		     * @sample {highcharts} highcharts/plotoptions/box-plot-styling/
		     *         Box plot styling
		     * @sample {highcharts} highcharts/css/boxplot/
		     *         Box plot in styled mode
		     * @sample {highcharts} highcharts/plotoptions/error-bar-styling/
		     *         Error bar styling
		     *
		     * @type      {Highcharts.ColorString|Highcharts.GradientColorObject}
		     * @since     3.0
		     * @product   highcharts
		     * @apioption plotOptions.boxplot.medianColor
		     */

		    /**
		     * The pixel width of the median line. If `null`, the
		     * [lineWidth](#plotOptions.boxplot.lineWidth) is used.
		     *
		     * In styled mode, the median stroke width can be set with the
		     * `.highcharts-boxplot-median` class.
		     *
		     * @sample {highcharts} highcharts/plotoptions/box-plot-styling/
		     *         Box plot styling
		     * @sample {highcharts} highcharts/css/boxplot/
		     *         Box plot in styled mode
		     *
		     * @since   3.0
		     * @product highcharts
		     */
		    medianWidth: 2,

		    /*
		    // States are not working and are removed from docs.
		    // Refer to: #2340
		    states: {
		        hover: {
		            brightness: -0.3
		        }
		    },

		    /**
		     * The color of the stem, the vertical line extending from the box to
		     * the whiskers. If `undefined`, the series color is used.
		     *
		     * In styled mode, the stem stroke can be set with the
		     * `.highcharts-boxplot-stem` class.
		     *
		     * @sample {highcharts} highcharts/plotoptions/box-plot-styling/
		     *         Box plot styling
		     * @sample {highcharts} highcharts/css/boxplot/
		     *         Box plot in styled mode
		     * @sample {highcharts} highcharts/plotoptions/error-bar-styling/
		     *         Error bar styling
		     *
		     * @type      {Highcharts.ColorString}
		     * @since     3.0
		     * @product   highcharts
		     * @apioption plotOptions.boxplot.stemColor
		     */

		    /**
		     * The dash style of the stem, the vertical line extending from the
		     * box to the whiskers.
		     *
		     * @sample {highcharts} highcharts/plotoptions/box-plot-styling/
		     *         Box plot styling
		     * @sample {highcharts} highcharts/css/boxplot/
		     *         Box plot in styled mode
		     * @sample {highcharts} highcharts/plotoptions/error-bar-styling/
		     *         Error bar styling
		     *
		     * @type       {string}
		     * @default    Solid
		     * @since      3.0
		     * @product    highcharts
		     * @validvalue ["Solid", "ShortDash", "ShortDot", "ShortDashDot",
		     *              "ShortDashDotDot", "Dot", "Dash" ,"LongDash", "DashDot",
		     *              "LongDashDot", "LongDashDotDot"]
		     * @apioption  plotOptions.boxplot.stemDashStyle
		     */

		    /**
		     * The width of the stem, the vertical line extending from the box to
		     * the whiskers. If `undefined`, the width is inherited from the
		     * [lineWidth](#plotOptions.boxplot.lineWidth) option.
		     *
		     * In styled mode, the stem stroke width can be set with the
		     * `.highcharts-boxplot-stem` class.
		     *
		     * @sample {highcharts} highcharts/plotoptions/box-plot-styling/
		     *         Box plot styling
		     * @sample {highcharts} highcharts/css/boxplot/
		     *         Box plot in styled mode
		     * @sample {highcharts} highcharts/plotoptions/error-bar-styling/
		     *         Error bar styling
		     *
		     * @type      {number}
		     * @since     3.0
		     * @product   highcharts
		     * @apioption plotOptions.boxplot.stemWidth
		     */

		    /**
		     * The color of the whiskers, the horizontal lines marking low and high
		     * values. When `undefined`, the general series color is used.
		     *
		     * In styled mode, the whisker stroke can be set with the
		     * `.highcharts-boxplot-whisker` class .
		     *
		     * @sample {highcharts} highcharts/plotoptions/box-plot-styling/
		     *         Box plot styling
		     * @sample {highcharts} highcharts/css/boxplot/
		     *         Box plot in styled mode
		     *
		     * @type      {Highcharts.ColorString}
		     * @since     3.0
		     * @product   highcharts
		     * @apioption plotOptions.boxplot.whiskerColor
		     */

		    /**
		     * The line width of the whiskers, the horizontal lines marking low and
		     * high values. When `undefined`, the general
		     * [lineWidth](#plotOptions.boxplot.lineWidth) applies.
		     *
		     * In styled mode, the whisker stroke width can be set with the
		     * `.highcharts-boxplot-whisker` class.
		     *
		     * @sample {highcharts} highcharts/plotoptions/box-plot-styling/
		     *         Box plot styling
		     * @sample {highcharts} highcharts/css/boxplot/
		     *         Box plot in styled mode
		     *
		     * @since   3.0
		     * @product highcharts
		     */
		    whiskerWidth: 2

		}, /** @lends Highcharts.seriesTypes.boxplot */ {

		    // array point configs are mapped to this
		    pointArrayMap: ['low', 'q1', 'median', 'q3', 'high'],
		    toYData: function (point) { // return a plain array for speedy calculation
		        return [point.low, point.q1, point.median, point.q3, point.high];
		    },

		    // defines the top of the tracker
		    pointValKey: 'high',

		    // Get presentational attributes
		    pointAttribs: function () {
		        // No attributes should be set on point.graphic which is the group
		        return {};
		    },

		    // Disable data labels for box plot
		    drawDataLabels: noop,

		    // Translate data points from raw values x and y to plotX and plotY
		    translate: function () {
		        var series = this,
		            yAxis = series.yAxis,
		            pointArrayMap = series.pointArrayMap;

		        seriesTypes.column.prototype.translate.apply(series);

		        // do the translation on each point dimension
		        series.points.forEach(function (point) {
		            pointArrayMap.forEach(function (key) {
		                if (point[key] !== null) {
		                    point[key + 'Plot'] = yAxis.translate(
		                        point[key], 0, 1, 0, 1
		                    );
		                }
		            });
		        });
		    },

		    // Draw the data points
		    drawPoints: function () {
		        var series = this,
		            points = series.points,
		            options = series.options,
		            chart = series.chart,
		            renderer = chart.renderer,
		            q1Plot,
		            q3Plot,
		            highPlot,
		            lowPlot,
		            medianPlot,
		            medianPath,
		            crispCorr,
		            crispX = 0,
		            boxPath,
		            width,
		            left,
		            right,
		            halfWidth,
		            // error bar inherits this series type but doesn't do quartiles
		            doQuartiles = series.doQuartiles !== false,
		            pointWiskerLength,
		            whiskerLength = series.options.whiskerLength;


		        points.forEach(function (point) {

		            var graphic = point.graphic,
		                verb = graphic ? 'animate' : 'attr',
		                shapeArgs = point.shapeArgs,
		                boxAttr = {},
		                stemAttr = {},
		                whiskersAttr = {},
		                medianAttr = {},
		                color = point.color || series.color;

		            if (point.plotY !== undefined) {

		                // crisp vector coordinates
		                width = shapeArgs.width;
		                left = Math.floor(shapeArgs.x);
		                right = left + width;
		                halfWidth = Math.round(width / 2);
		                q1Plot = Math.floor(doQuartiles ? point.q1Plot : point.lowPlot);
		                q3Plot = Math.floor(doQuartiles ? point.q3Plot : point.lowPlot);
		                highPlot = Math.floor(point.highPlot);
		                lowPlot = Math.floor(point.lowPlot);

		                if (!graphic) {
		                    point.graphic = graphic = renderer.g('point')
		                        .add(series.group);

		                    point.stem = renderer.path()
		                        .addClass('highcharts-boxplot-stem')
		                        .add(graphic);

		                    if (whiskerLength) {
		                        point.whiskers = renderer.path()
		                            .addClass('highcharts-boxplot-whisker')
		                            .add(graphic);
		                    }
		                    if (doQuartiles) {
		                        point.box = renderer.path(boxPath)
		                            .addClass('highcharts-boxplot-box')
		                            .add(graphic);
		                    }
		                    point.medianShape = renderer.path(medianPath)
		                        .addClass('highcharts-boxplot-median')
		                        .add(graphic);
		                }

		                if (!chart.styledMode) {

		                    // Stem attributes
		                    stemAttr.stroke =
		                        point.stemColor || options.stemColor || color;
		                    stemAttr['stroke-width'] = pick(
		                        point.stemWidth,
		                        options.stemWidth,
		                        options.lineWidth
		                    );
		                    stemAttr.dashstyle =
		                        point.stemDashStyle || options.stemDashStyle;
		                    point.stem.attr(stemAttr);

		                    // Whiskers attributes
		                    if (whiskerLength) {
		                        whiskersAttr.stroke =
		                            point.whiskerColor || options.whiskerColor || color;
		                        whiskersAttr['stroke-width'] = pick(
		                            point.whiskerWidth,
		                            options.whiskerWidth,
		                            options.lineWidth
		                        );
		                        point.whiskers.attr(whiskersAttr);
		                    }

		                    if (doQuartiles) {
		                        boxAttr.fill = (
		                            point.fillColor ||
		                            options.fillColor ||
		                            color
		                        );
		                        boxAttr.stroke = options.lineColor || color;
		                        boxAttr['stroke-width'] = options.lineWidth || 0;
		                        point.box.attr(boxAttr);
		                    }


		                    // Median attributes
		                    medianAttr.stroke =
		                        point.medianColor || options.medianColor || color;
		                    medianAttr['stroke-width'] = pick(
		                        point.medianWidth,
		                        options.medianWidth,
		                        options.lineWidth
		                    );
		                    point.medianShape.attr(medianAttr);

		                }


		                // The stem
		                crispCorr = (point.stem.strokeWidth() % 2) / 2;
		                crispX = left + halfWidth + crispCorr;
		                point.stem[verb]({ d: [
		                    // stem up
		                    'M',
		                    crispX, q3Plot,
		                    'L',
		                    crispX, highPlot,

		                    // stem down
		                    'M',
		                    crispX, q1Plot,
		                    'L',
		                    crispX, lowPlot
		                ] });

		                // The box
		                if (doQuartiles) {
		                    crispCorr = (point.box.strokeWidth() % 2) / 2;
		                    q1Plot = Math.floor(q1Plot) + crispCorr;
		                    q3Plot = Math.floor(q3Plot) + crispCorr;
		                    left += crispCorr;
		                    right += crispCorr;
		                    point.box[verb]({ d: [
		                        'M',
		                        left, q3Plot,
		                        'L',
		                        left, q1Plot,
		                        'L',
		                        right, q1Plot,
		                        'L',
		                        right, q3Plot,
		                        'L',
		                        left, q3Plot,
		                        'z'
		                    ] });
		                }

		                // The whiskers
		                if (whiskerLength) {
		                    crispCorr = (point.whiskers.strokeWidth() % 2) / 2;
		                    highPlot = highPlot + crispCorr;
		                    lowPlot = lowPlot + crispCorr;
		                    pointWiskerLength = (/%$/).test(whiskerLength) ?
		                        halfWidth * parseFloat(whiskerLength) / 100 :
		                        whiskerLength / 2;
		                    point.whiskers[verb]({ d: [
		                        // High whisker
		                        'M',
		                        crispX - pointWiskerLength,
		                        highPlot,
		                        'L',
		                        crispX + pointWiskerLength,
		                        highPlot,

		                        // Low whisker
		                        'M',
		                        crispX - pointWiskerLength,
		                        lowPlot,
		                        'L',
		                        crispX + pointWiskerLength,
		                        lowPlot
		                    ] });
		                }

		                // The median
		                medianPlot = Math.round(point.medianPlot);
		                crispCorr = (point.medianShape.strokeWidth() % 2) / 2;
		                medianPlot = medianPlot + crispCorr;

		                point.medianShape[verb]({ d: [
		                    'M',
		                    left,
		                    medianPlot,
		                    'L',
		                    right,
		                    medianPlot
		                ] });
		            }
		        });

		    },
		    setStackedPoints: noop // #3890

		});

		/**
		 * A `boxplot` series. If the [type](#series.boxplot.type) option is
		 * not specified, it is inherited from [chart.type](#chart.type).
		 *
		 * @extends   series,plotOptions.boxplot
		 * @excluding dataParser, dataURL, marker, stack, stacking, states
		 * @product   highcharts
		 * @apioption series.boxplot
		 */

		/**
		 * An array of data points for the series. For the `boxplot` series
		 * type, points can be given in the following ways:
		 *
		 * 1. An array of arrays with 6 or 5 values. In this case, the values correspond
		 *    to `x,low,q1,median,q3,high`. If the first value is a string, it is
		 *    applied as the name of the point, and the `x` value is inferred. The `x`
		 *    value can also be omitted, in which case the inner arrays should be of
		 *    length 5. Then the `x` value is automatically calculated, either starting
		 *    at 0 and incremented by 1, or from `pointStart` and `pointInterval` given
		 *    in the series options.
		 *    ```js
		 *    data: [
		 *        [0, 3, 0, 10, 3, 5],
		 *        [1, 7, 8, 7, 2, 9],
		 *        [2, 6, 9, 5, 1, 3]
		 *    ]
		 *    ```
		 *
		 * 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.boxplot.turboThreshold), this option is not
		 *    available.
		 *    ```js
		 *    data: [{
		 *        x: 1,
		 *        low: 4,
		 *        q1: 9,
		 *        median: 9,
		 *        q3: 1,
		 *        high: 10,
		 *        name: "Point2",
		 *        color: "#00FF00"
		 *    }, {
		 *        x: 1,
		 *        low: 5,
		 *        q1: 7,
		 *        median: 3,
		 *        q3: 6,
		 *        high: 2,
		 *        name: "Point1",
		 *        color: "#FF00FF"
		 *    }]
		 *    ```
		 *
		 * @sample {highcharts} highcharts/series/data-array-of-arrays/
		 *         Arrays of numeric x and y
		 * @sample {highcharts} highcharts/series/data-array-of-arrays-datetime/
		 *         Arrays of datetime x and y
		 * @sample {highcharts} highcharts/series/data-array-of-name-value/
		 *         Arrays of point.name and y
		 * @sample {highcharts} highcharts/series/data-array-of-objects/
		 *         Config objects
		 *
		 * @type      {Array<Array<(number|string),number,number,number,number>|Array<(number|string),number,number,number,number,number>|*>}
		 * @extends   series.line.data
		 * @excluding marker
		 * @product   highcharts
		 * @apioption series.boxplot.data
		 */

		/**
		 * The `high` value for each data point, signifying the highest value
		 * in the sample set. The top whisker is drawn here.
		 *
		 * @type      {number}
		 * @product   highcharts
		 * @apioption series.boxplot.data.high
		 */

		/**
		 * The `low` value for each data point, signifying the lowest value
		 * in the sample set. The bottom whisker is drawn here.
		 *
		 * @type      {number}
		 * @product   highcharts
		 * @apioption series.boxplot.data.low
		 */

		/**
		 * The median for each data point. This is drawn as a line through the
		 * middle area of the box.
		 *
		 * @type      {number}
		 * @product   highcharts
		 * @apioption series.boxplot.data.median
		 */

		/**
		 * The lower quartile for each data point. This is the bottom of the
		 * box.
		 *
		 * @type      {number}
		 * @product   highcharts
		 * @apioption series.boxplot.data.q1
		 */

		/**
		 * The higher quartile for each data point. This is the top of the box.
		 *
		 * @type      {number}
		 * @product   highcharts
		 * @apioption series.boxplot.data.q3
		 */

	}(Highcharts));
	(function (H) {
		/* *
		 * (c) 2010-2018 Torstein Honsi
		 *
		 * License: www.highcharts.com/license
		 */



		var defaultPlotOptions = H.defaultPlotOptions,
		    merge = H.merge,
		    noop = H.noop,
		    pick = H.pick,
		    seriesType = H.seriesType,
		    seriesTypes = H.seriesTypes;

		var colProto = seriesTypes.column.prototype;

		/**
		 * The column range is a cartesian series type with higher and lower
		 * Y values along an X axis. Requires `highcharts-more.js`. To display
		 * horizontal bars, set [chart.inverted](#chart.inverted) to `true`.
		 *
		 * @sample {highcharts|highstock} highcharts/demo/columnrange/
		 *         Inverted column range
		 *
		 * @extends      plotOptions.column
		 * @since        2.3.0
		 * @excluding    negativeColor, stacking, softThreshold, threshold
		 * @product      highcharts highstock
		 * @optionparent plotOptions.columnrange
		 */
		var columnRangeOptions = {

		    /**
		     * Extended data labels for range series types. Range series data labels
		     * have no `x` and `y` options. Instead, they have `xLow`, `xHigh`,
		     * `yLow` and `yHigh` options to allow the higher and lower data label
		     * sets individually.
		     *
		     * @extends   plotOptions.arearange.dataLabels
		     * @since     2.3.0
		     * @excluding x, y
		     * @product   highcharts highstock
		     * @apioption plotOptions.columnrange.dataLabels
		     */

		    pointRange: null,

		    /** @ignore-option */
		    marker: null,

		    states: {
		        hover: {
		            /** @ignore-option */
		            halo: false
		        }
		    }
		};
		/**
		 * The ColumnRangeSeries class
		 *
		 * @private
		 * @class
		 * @name Highcharts.seriesTypes.columnrange
		 *
		 * @augments Highcharts.Series
		 */
		seriesType('columnrange', 'arearange', merge(
		    defaultPlotOptions.column,
		    defaultPlotOptions.arearange,
		    columnRangeOptions

		), {

		    // Translate data points from raw values x and y to plotX and plotY
		    translate: function () {
		        var series = this,
		            yAxis = series.yAxis,
		            xAxis = series.xAxis,
		            startAngleRad = xAxis.startAngleRad,
		            start,
		            chart = series.chart,
		            isRadial = series.xAxis.isRadial,
		            safeDistance = Math.max(chart.chartWidth, chart.chartHeight) + 999,
		            plotHigh;

		        // Don't draw too far outside plot area (#6835)
		        function safeBounds(pixelPos) {
		            return Math.min(Math.max(
		                -safeDistance,
		                pixelPos
		            ), safeDistance);
		        }


		        colProto.translate.apply(series);

		        // Set plotLow and plotHigh
		        series.points.forEach(function (point) {
		            var shapeArgs = point.shapeArgs,
		                minPointLength = series.options.minPointLength,
		                heightDifference,
		                height,
		                y;

		            point.plotHigh = plotHigh = safeBounds(
		                yAxis.translate(point.high, 0, 1, 0, 1)
		            );
		            point.plotLow = safeBounds(point.plotY);

		            // adjust shape
		            y = plotHigh;
		            height = pick(point.rectPlotY, point.plotY) - plotHigh;

		            // Adjust for minPointLength
		            if (Math.abs(height) < minPointLength) {
		                heightDifference = (minPointLength - height);
		                height += heightDifference;
		                y -= heightDifference / 2;

		            // Adjust for negative ranges or reversed Y axis (#1457)
		            } else if (height < 0) {
		                height *= -1;
		                y -= height;
		            }

		            if (isRadial) {

		                start = point.barX + startAngleRad;
		                point.shapeType = 'path';
		                point.shapeArgs = {
		                    d: series.polarArc(
		                        y + height,
		                        y,
		                        start,
		                        start + point.pointWidth
		                    )
		                };
		            } else {

		                shapeArgs.height = height;
		                shapeArgs.y = y;

		                point.tooltipPos = chart.inverted ?
		                [
		                    yAxis.len + yAxis.pos - chart.plotLeft - y - height / 2,
		                    xAxis.len + xAxis.pos - chart.plotTop - shapeArgs.x -
		                        shapeArgs.width / 2,
		                    height
		                ] : [
		                    xAxis.left - chart.plotLeft + shapeArgs.x +
		                        shapeArgs.width / 2,
		                    yAxis.pos - chart.plotTop + y + height / 2,
		                    height
		                ]; // don't inherit from column tooltip position - #3372
		            }
		        });
		    },
		    directTouch: true,
		    trackerGroups: ['group', 'dataLabelsGroup'],
		    drawGraph: noop,
		    getSymbol: noop,

		    // Overrides from modules that may be loaded after this module
		    crispCol: function () {
		        return colProto.crispCol.apply(this, arguments);
		    },
		    drawPoints: function () {
		        return colProto.drawPoints.apply(this, arguments);
		    },
		    drawTracker: function () {
		        return colProto.drawTracker.apply(this, arguments);
		    },
		    getColumnMetrics: function () {
		        return colProto.getColumnMetrics.apply(this, arguments);
		    },
		    pointAttribs: function () {
		        return colProto.pointAttribs.apply(this, arguments);
		    },
		    animate: function () {
		        return colProto.animate.apply(this, arguments);
		    },
		    polarArc: function () {
		        return colProto.polarArc.apply(this, arguments);
		    },
		    translate3dPoints: function () {
		        return colProto.translate3dPoints.apply(this, arguments);
		    },
		    translate3dShapes: function () {
		        return colProto.translate3dShapes.apply(this, arguments);
		    }
		}, {
		    setState: colProto.pointClass.prototype.setState
		});


		/**
		 * A `columnrange` series. If the [type](#series.columnrange.type)
		 * option is not specified, it is inherited from
		 * [chart.type](#chart.type).
		 *
		 * @extends   series,plotOptions.columnrange
		 * @excluding dataParser, dataURL, stack, stacking
		 * @product   highcharts highstock
		 * @apioption series.columnrange
		 */

		/**
		 * An array of data points for the series. For the `columnrange` series
		 * type, points can be given in the following ways:
		 *
		 * 1. An array of arrays with 3 or 2 values. In this case, the values correspond
		 *    to `x,low,high`. If the first value is a string, it is applied as the name
		 *    of the point, and the `x` value is inferred. The `x` value can also be
		 *    omitted, in which case the inner arrays should be of length 2\. Then the
		 *    `x` value is automatically calculated, either starting at 0 and
		 *    incremented by 1, or from `pointStart` and `pointInterval` given in the
		 *    series options.
		 *    ```js
		 *    data: [
		 *        [0, 4, 2],
		 *        [1, 2, 1],
		 *        [2, 9, 10]
		 *    ]
		 *    ```
		 *
		 * 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.columnrange.turboThreshold), this option is not
		 *    available.
		 *    ```js
		 *    data: [{
		 *        x: 1,
		 *        low: 0,
		 *        high: 4,
		 *        name: "Point2",
		 *        color: "#00FF00"
		 *    }, {
		 *        x: 1,
		 *        low: 5,
		 *        high: 3,
		 *        name: "Point1",
		 *        color: "#FF00FF"
		 *    }]
		 *    ```
		 *
		 * @sample {highcharts} highcharts/series/data-array-of-arrays/
		 *         Arrays of numeric x and y
		 * @sample {highcharts} highcharts/series/data-array-of-arrays-datetime/
		 *         Arrays of datetime x and y
		 * @sample {highcharts} highcharts/series/data-array-of-name-value/
		 *         Arrays of point.name and y
		 * @sample {highcharts} highcharts/series/data-array-of-objects/
		 *         Config objects
		 *
		 * @type      {Array<Array<(number|string),number>|Array<(number|string),number,number>|*>}
		 * @extends   series.arearange.data
		 * @excluding marker
		 * @product   highcharts highstock
		 * @apioption series.columnrange.data
		 */

		/**
		 * @excluding halo, lineWidth, lineWidthPlus, marker
		 * @product   highcharts highstock
		 * @apioption series.columnrange.states.hover
		 */

		/**
		 * @excluding halo, lineWidth, lineWidthPlus, marker
		 * @product   highcharts highstock
		 * @apioption series.columnrange.states.select
		 */

	}(Highcharts));
	(function (H) {
		/* *
		 * (c) 2010-2018 Torstein Honsi
		 *
		 * License: www.highcharts.com/license
		 */



		var noop = H.noop,
		    seriesType = H.seriesType,
		    seriesTypes = H.seriesTypes;

		/**
		 * Error bars are a graphical representation of the variability of data and are
		 * used on graphs to indicate the error, or uncertainty in a reported
		 * measurement.
		 *
		 * @sample highcharts/demo/error-bar/
		 *         Error bars on a column series
		 * @sample highcharts/series-errorbar/on-scatter/
		 *         Error bars on a scatter series
		 *
		 * @extends      plotOptions.boxplot
		 * @product      highcharts highstock
		 * @optionparent plotOptions.errorbar
		 */
		seriesType('errorbar', 'boxplot', {

		    /**
		     * The main color of the bars. This can be overridden by
		     * [stemColor](#plotOptions.errorbar.stemColor) and
		     * [whiskerColor](#plotOptions.errorbar.whiskerColor) individually.
		     *
		     * @sample {highcharts} highcharts/plotoptions/error-bar-styling/
		     *         Error bar styling
		     *
		     * @type    {Highcharts.ColorString|Highcharts.GradientColorObject}
		     * @default #000000
		     * @since   3.0
		     * @product highcharts
		     */
		    color: '#000000',

		    grouping: false,

		    /**
		     * The parent series of the error bar. The default value links it to
		     * the previous series. Otherwise, use the id of the parent series.
		     *
		     * @since   3.0
		     * @product highcharts
		     */
		    linkedTo: ':previous',

		    tooltip: {
		        pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.low}</b> - <b>{point.high}</b><br/>'
		    },

		    /**
		     * The line width of the whiskers, the horizontal lines marking low
		     * and high values. When `null`, the general
		     * [lineWidth](#plotOptions.errorbar.lineWidth) applies.
		     *
		     * @sample {highcharts} highcharts/plotoptions/error-bar-styling/
		     *         Error bar styling
		     *
		     * @type    {number}
		     * @since   3.0
		     * @product highcharts
		     */
		    whiskerWidth: null

		// Prototype members
		}, {
		    type: 'errorbar',
		    pointArrayMap: ['low', 'high'], // array point configs are mapped to this
		    toYData: function (point) { // return a plain array for speedy calculation
		        return [point.low, point.high];
		    },
		    pointValKey: 'high', // defines the top of the tracker
		    doQuartiles: false,
		    drawDataLabels: seriesTypes.arearange ?
		        function () {
		            var valKey = this.pointValKey;
		            seriesTypes.arearange.prototype.drawDataLabels.call(this);
		            // Arearange drawDataLabels does not reset point.y to high,
		            // but to low after drawing (#4133)
		            this.data.forEach(function (point) {
		                point.y = point[valKey];
		            });
		        } :
		        noop,

		    // Get the width and X offset, either on top of the linked series column or
		    // standalone
		    getColumnMetrics: function () {
		        return (this.linkedParent && this.linkedParent.columnMetrics) ||
		            seriesTypes.column.prototype.getColumnMetrics.call(this);
		    }
		});

		/**
		 * A `errorbar` series. If the [type](#series.errorbar.type) option
		 * is not specified, it is inherited from [chart.type](#chart.type).
		 *
		 * @extends   series,plotOptions.errorbar
		 * @excluding dataParser, dataURL, stack, stacking
		 * @product   highcharts
		 * @apioption series.errorbar
		 */

		/**
		 * An array of data points for the series. For the `errorbar` series
		 * type, points can be given in the following ways:
		 *
		 * 1. An array of arrays with 3 or 2 values. In this case, the values correspond
		 *    to `x,low,high`. If the first value is a string, it is applied as the name
		 *    of the point, and the `x` value is inferred. The `x` value can also be
		 *    omitted, in which case the inner arrays should be of length 2\. Then the
		 *    `x` value is automatically calculated, either starting at 0 and
		 *    incremented by 1, or from `pointStart` and `pointInterval` given in the
		 *    series options.
		 *    ```js
		 *    data: [
		 *        [0, 10, 2],
		 *        [1, 1, 8],
		 *        [2, 4, 5]
		 *    ]
		 *    ```
		 *
		 * 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.errorbar.turboThreshold), this option is not
		 *    available.
		 *    ```js
		 *    data: [{
		 *        x: 1,
		 *        low: 0,
		 *        high: 0,
		 *        name: "Point2",
		 *        color: "#00FF00"
		 *    }, {
		 *        x: 1,
		 *        low: 5,
		 *        high: 5,
		 *        name: "Point1",
		 *        color: "#FF00FF"
		 *    }]
		 *    ```
		 *
		 * @sample {highcharts} highcharts/series/data-array-of-arrays/
		 *         Arrays of numeric x and y
		 * @sample {highcharts} highcharts/series/data-array-of-arrays-datetime/
		 *         Arrays of datetime x and y
		 * @sample {highcharts} highcharts/series/data-array-of-name-value/
		 *         Arrays of point.name and y
		 * @sample {highcharts} highcharts/series/data-array-of-objects/
		 *         Config objects
		 *
		 * @type      {Array<Array<(number|string),number>|Array<(number|string),number,number>|*>}
		 * @extends   series.arearange.data
		 * @excluding dataLabels, drilldown, marker, states
		 * @product   highcharts
		 * @apioption series.errorbar.data
		 */

	}(Highcharts));
	(function (H) {
		/* *
		 * (c) 2010-2018 Torstein Honsi
		 *
		 * License: www.highcharts.com/license
		 */



		// Extensions for polar charts. Additionally, much of the geometry required for
		// polar charts is gathered in RadialAxes.js.

		var pick = H.pick,
		    Pointer = H.Pointer,
		    Series = H.Series,
		    seriesTypes = H.seriesTypes,
		    wrap = H.wrap,

		    seriesProto = Series.prototype,
		    pointerProto = Pointer.prototype,
		    colProto;

		if (!H.polarExtended) {
		    H.polarExtended = true;


		    /**
		     * Search a k-d tree by the point angle, used for shared tooltips in polar
		     * charts
		     */
		    seriesProto.searchPointByAngle = function (e) {
		        var series = this,
		            chart = series.chart,
		            xAxis = series.xAxis,
		            center = xAxis.pane.center,
		            plotX = e.chartX - center[0] - chart.plotLeft,
		            plotY = e.chartY - center[1] - chart.plotTop;

		        return this.searchKDTree({
		            clientX: 180 + (Math.atan2(plotX, plotY) * (-180 / Math.PI))
		        });

		    };

		    /**
		     * #6212 Calculate connectors for spline series in polar chart.
		     * @param {boolean} calculateNeighbours
		     *        Check if connectors should be calculated for neighbour points as
		     *        well allows short recurence
		     */
		    seriesProto.getConnectors = function (
		        segment,
		        index,
		        calculateNeighbours,
		        connectEnds
		    ) {

		        var i,
		            prevPointInd,
		            nextPointInd,
		            previousPoint,
		            nextPoint,
		            previousX,
		            previousY,
		            nextX,
		            nextY,
		            plotX,
		            plotY,
		            ret,
		            // 1 means control points midway between points, 2 means 1/3 from
		            // the point, 3 is 1/4 etc;
		            smoothing = 1.5,
		            denom = smoothing + 1,
		            leftContX,
		            leftContY,
		            rightContX,
		            rightContY,
		            dLControlPoint, // distance left control point
		            dRControlPoint,
		            leftContAngle,
		            rightContAngle,
		            jointAngle,
		            addedNumber = connectEnds ? 1 : 0;

		        // Calculate final index of points depending on the initial index value.
		        // Because of calculating neighbours, index may be outisde segment
		        // array.
		        if (index >= 0 && index <= segment.length - 1) {
		            i = index;
		        } else if (index < 0) {
		            i = segment.length - 1 + index;
		        } else {
		            i = 0;
		        }

		        prevPointInd = (i - 1 < 0) ? segment.length - (1 + addedNumber) : i - 1;
		        nextPointInd = (i + 1 > segment.length - 1) ? addedNumber : i + 1;
		        previousPoint = segment[prevPointInd];
		        nextPoint = segment[nextPointInd];
		        previousX = previousPoint.plotX;
		        previousY = previousPoint.plotY;
		        nextX = nextPoint.plotX;
		        nextY = nextPoint.plotY;
		        plotX = segment[i].plotX; // actual point
		        plotY = segment[i].plotY;
		        leftContX = (smoothing * plotX + previousX) / denom;
		        leftContY = (smoothing * plotY + previousY) / denom;
		        rightContX = (smoothing * plotX + nextX) / denom;
		        rightContY = (smoothing * plotY + nextY) / denom;
		        dLControlPoint = Math.sqrt(
		            Math.pow(leftContX - plotX, 2) + Math.pow(leftContY - plotY, 2)
		        );
		        dRControlPoint = Math.sqrt(
		            Math.pow(rightContX - plotX, 2) + Math.pow(rightContY - plotY, 2)
		        );
		        leftContAngle = Math.atan2(leftContY - plotY, leftContX - plotX);
		        rightContAngle = Math.atan2(rightContY - plotY, rightContX - plotX);
		        jointAngle = (Math.PI / 2) + ((leftContAngle + rightContAngle) / 2);
		        // Ensure the right direction, jointAngle should be in the same quadrant
		        // as leftContAngle
		        if (Math.abs(leftContAngle - jointAngle) > Math.PI / 2) {
		            jointAngle -= Math.PI;
		        }
		        // Find the corrected control points for a spline straight through the
		        // point
		        leftContX = plotX + Math.cos(jointAngle) * dLControlPoint;
		        leftContY = plotY + Math.sin(jointAngle) * dLControlPoint;
		        rightContX = plotX + Math.cos(Math.PI + jointAngle) * dRControlPoint;
		        rightContY = plotY + Math.sin(Math.PI + jointAngle) * dRControlPoint;

		        // push current point's connectors into returned object

		        ret = {
		            rightContX: rightContX,
		            rightContY: rightContY,
		            leftContX: leftContX,
		            leftContY: leftContY,
		            plotX: plotX,
		            plotY: plotY
		        };

		        // calculate connectors for previous and next point and push them inside
		        // returned object
		        if (calculateNeighbours) {
		            ret.prevPointCont = this.getConnectors(
		                segment,
		                prevPointInd,
		                false,
		                connectEnds
		            );
		        }
		        return ret;
		    };

		    /**
		     * Wrap the buildKDTree function so that it searches by angle (clientX) in
		     * case of shared tooltip, and by two dimensional distance in case of
		     * non-shared.
		     */
		    wrap(seriesProto, 'buildKDTree', function (proceed) {
		        if (this.chart.polar) {
		            if (this.kdByAngle) {
		                this.searchPoint = this.searchPointByAngle;
		            } else {
		                this.options.findNearestPointBy = 'xy';
		            }
		        }
		        proceed.apply(this);
		    });

		    /**
		     * Translate a point's plotX and plotY from the internal angle and radius
		     * measures to true plotX, plotY coordinates
		     */
		    seriesProto.toXY = function (point) {
		        var xy,
		            chart = this.chart,
		            plotX = point.plotX,
		            plotY = point.plotY,
		            clientX;

		        // Save rectangular plotX, plotY for later computation
		        point.rectPlotX = plotX;
		        point.rectPlotY = plotY;

		        // Find the polar plotX and plotY
		        xy = this.xAxis.postTranslate(point.plotX, this.yAxis.len - plotY);
		        point.plotX = point.polarPlotX = xy.x - chart.plotLeft;
		        point.plotY = point.polarPlotY = xy.y - chart.plotTop;

		        // If shared tooltip, record the angle in degrees in order to align X
		        // points. Otherwise, use a standard k-d tree to get the nearest point
		        // in two dimensions.
		        if (this.kdByAngle) {
		            clientX = (
		                (plotX / Math.PI * 180) + this.xAxis.pane.options.startAngle
		            ) % 360;
		            if (clientX < 0) { // #2665
		                clientX += 360;
		            }
		            point.clientX = clientX;
		        } else {
		            point.clientX = point.plotX;
		        }
		    };

		    if (seriesTypes.spline) {
		        /**
		         * Overridden method for calculating a spline from one point to the next
		         */
		        wrap(
		            seriesTypes.spline.prototype,
		            'getPointSpline',
		            function (proceed, segment, point, i) {
		                var ret,
		                    connectors;

		                if (this.chart.polar) {
		                    // moveTo or lineTo
		                    if (!i) {
		                        ret = ['M', point.plotX, point.plotY];
		                    } else { // curve from last point to this
		                        connectors = this.getConnectors(
		                            segment,
		                            i,
		                            true,
		                            this.connectEnds
		                        );
		                        ret = [
		                            'C',
		                            connectors.prevPointCont.rightContX,
		                            connectors.prevPointCont.rightContY,
		                            connectors.leftContX,
		                            connectors.leftContY,
		                            connectors.plotX,
		                            connectors.plotY
		                        ];
		                    }
		                } else {
		                    ret = proceed.call(this, segment, point, i);
		                }
		                return ret;
		            }
		        );

		        // #6430 Areasplinerange series use unwrapped getPointSpline method, so
		        // we need to set this method again.
		        if (seriesTypes.areasplinerange) {
		            seriesTypes.areasplinerange.prototype.getPointSpline =
		                seriesTypes.spline.prototype.getPointSpline;
		        }
		    }

		    /**
		     * Extend translate. The plotX and plotY values are computed as if the polar
		     * chart were a cartesian plane, where plotX denotes the angle in radians
		     * and (yAxis.len - plotY) is the pixel distance from center.
		     */
		    H.addEvent(Series, 'afterTranslate', function () {
		        var chart = this.chart,
		            points,
		            i;

		        if (chart.polar) {
		            // Postprocess plot coordinates
		            this.kdByAngle = chart.tooltip && chart.tooltip.shared;

		            if (!this.preventPostTranslate) {
		                points = this.points;
		                i = points.length;

		                while (i--) {
		                    // Translate plotX, plotY from angle and radius to true plot
		                    // coordinates
		                    this.toXY(points[i]);
		                }
		            }

		            // Perform clip after render
		            if (!this.hasClipCircleSetter) {
		                this.hasClipCircleSetter = Boolean(
		                    H.addEvent(this, 'afterRender', function () {
		                        var circ;
		                        if (chart.polar) {
		                            circ = this.yAxis.center;
		                            this.group.clip(
		                                chart.renderer.clipCircle(
		                                    circ[0],
		                                    circ[1],
		                                    circ[2] / 2
		                                )
		                            );
		                            this.setClip = H.noop;
		                        }
		                    })
		                );
		            }
		        }
		    }, { order: 2 }); // Run after translation of ||-coords

		    /**
		     * Extend getSegmentPath to allow connecting ends across 0 to provide a
		     * closed circle in line-like series.
		     */
		    wrap(seriesProto, 'getGraphPath', function (proceed, points) {
		        var series = this,
		            i,
		            firstValid,
		            popLastPoint;

		        // Connect the path
		        if (this.chart.polar) {
		            points = points || this.points;

		            // Append first valid point in order to connect the ends
		            for (i = 0; i < points.length; i++) {
		                if (!points[i].isNull) {
		                    firstValid = i;
		                    break;
		                }
		            }


		            /**
		             * Polar charts only. Whether to connect the ends of a line series
		             * plot across the extremes.
		             *
		             * @sample {highcharts} highcharts/plotoptions/line-connectends-false/
		             *         Do not connect
		             *
		             * @type      {boolean}
		             * @since     2.3.0
		             * @product   highcharts
		             * @apioption plotOptions.series.connectEnds
		             */
		            if (this.options.connectEnds !== false &&
		                firstValid !== undefined
		            ) {
		                this.connectEnds = true; // re-used in splines
		                points.splice(points.length, 0, points[firstValid]);
		                popLastPoint = true;
		            }

		            // For area charts, pseudo points are added to the graph, now we
		            // need to translate these
		            points.forEach(function (point) {
		                if (point.polarPlotY === undefined) {
		                    series.toXY(point);
		                }
		            });
		        }

		        // Run uber method
		        var ret = proceed.apply(this, [].slice.call(arguments, 1));

		        // #6212 points.splice method is adding points to an array. In case of
		        // areaspline getGraphPath method is used two times and in both times
		        // points are added to an array. That is why points.pop is used, to get
		        // unmodified points.
		        if (popLastPoint) {
		            points.pop();
		        }
		        return ret;
		    });


		    var polarAnimate = function (proceed, init) {
		        var chart = this.chart,
		            animation = this.options.animation,
		            group = this.group,
		            markerGroup = this.markerGroup,
		            center = this.xAxis.center,
		            plotLeft = chart.plotLeft,
		            plotTop = chart.plotTop,
		            attribs;

		        // Specific animation for polar charts
		        if (chart.polar) {

		            // Enable animation on polar charts only in SVG. In VML, the scaling
		            // is different, plus animation would be so slow it would't matter.
		            if (chart.renderer.isSVG) {

		                if (animation === true) {
		                    animation = {};
		                }

		                // Initialize the animation
		                if (init) {

		                    // Scale down the group and place it in the center
		                    attribs = {
		                        translateX: center[0] + plotLeft,
		                        translateY: center[1] + plotTop,
		                        scaleX: 0.001, // #1499
		                        scaleY: 0.001
		                    };

		                    group.attr(attribs);
		                    if (markerGroup) {
		                        markerGroup.attr(attribs);
		                    }

		                // Run the animation
		                } else {
		                    attribs = {
		                        translateX: plotLeft,
		                        translateY: plotTop,
		                        scaleX: 1,
		                        scaleY: 1
		                    };
		                    group.animate(attribs, animation);
		                    if (markerGroup) {
		                        markerGroup.animate(attribs, animation);
		                    }

		                    // Delete this function to allow it only once
		                    this.animate = null;
		                }
		            }

		        // For non-polar charts, revert to the basic animation
		        } else {
		            proceed.call(this, init);
		        }
		    };

		    // Define the animate method for regular series
		    wrap(seriesProto, 'animate', polarAnimate);


		    if (seriesTypes.column) {

		        colProto = seriesTypes.column.prototype;

		        colProto.polarArc = function (low, high, start, end) {
		            var center = this.xAxis.center,
		                len = this.yAxis.len;

		            return this.chart.renderer.symbols.arc(
		                center[0],
		                center[1],
		                len - high,
		                null,
		                {
		                    start: start,
		                    end: end,
		                    innerR: len - pick(low, len)
		                }
		            );
		        };

		        /**
		        * Define the animate method for columnseries
		        */
		        wrap(colProto, 'animate', polarAnimate);


		        /**
		         * Extend the column prototype's translate method
		         */
		        wrap(colProto, 'translate', function (proceed) {

		            var xAxis = this.xAxis,
		                startAngleRad = xAxis.startAngleRad,
		                start,
		                points,
		                point,
		                i;

		            this.preventPostTranslate = true;

		            // Run uber method
		            proceed.call(this);

		            // Postprocess plot coordinates
		            if (xAxis.isRadial) {
		                points = this.points;
		                i = points.length;
		                while (i--) {
		                    point = points[i];
		                    start = point.barX + startAngleRad;
		                    point.shapeType = 'path';
		                    point.shapeArgs = {
		                        d: this.polarArc(
		                            point.yBottom,
		                            point.plotY,
		                            start,
		                            start + point.pointWidth
		                        )
		                    };
		                    // Provide correct plotX, plotY for tooltip
		                    this.toXY(point);
		                    point.tooltipPos = [point.plotX, point.plotY];
		                    point.ttBelow = point.plotY > xAxis.center[1];
		                }
		            }
		        });


		        /**
		         * Align column data labels outside the columns. #1199.
		         */
		        wrap(colProto, 'alignDataLabel', function (
		            proceed,
		            point,
		            dataLabel,
		            options,
		            alignTo,
		            isNew
		        ) {

		            if (this.chart.polar) {
		                var angle = point.rectPlotX / Math.PI * 180,
		                    align,
		                    verticalAlign;

		                // Align nicely outside the perimeter of the columns
		                if (options.align === null) {
		                    if (angle > 20 && angle < 160) {
		                        align = 'left'; // right hemisphere
		                    } else if (angle > 200 && angle < 340) {
		                        align = 'right'; // left hemisphere
		                    } else {
		                        align = 'center'; // top or bottom
		                    }
		                    options.align = align;
		                }
		                if (options.verticalAlign === null) {
		                    if (angle < 45 || angle > 315) {
		                        verticalAlign = 'bottom'; // top part
		                    } else if (angle > 135 && angle < 225) {
		                        verticalAlign = 'top'; // bottom part
		                    } else {
		                        verticalAlign = 'middle'; // left or right
		                    }
		                    options.verticalAlign = verticalAlign;
		                }

		                seriesProto.alignDataLabel.call(
		                    this,
		                    point,
		                    dataLabel,
		                    options,
		                    alignTo,
		                    isNew
		                );
		            } else {
		                proceed.call(this, point, dataLabel, options, alignTo, isNew);
		            }

		        });
		    }

		    /**
		     * Extend getCoordinates to prepare for polar axis values
		     */
		    wrap(pointerProto, 'getCoordinates', function (proceed, e) {
		        var chart = this.chart,
		            ret = {
		                xAxis: [],
		                yAxis: []
		            };

		        if (chart.polar) {

		            chart.axes.forEach(function (axis) {
		                var isXAxis = axis.isXAxis,
		                    center = axis.center,
		                    x = e.chartX - center[0] - chart.plotLeft,
		                    y = e.chartY - center[1] - chart.plotTop;

		                ret[isXAxis ? 'xAxis' : 'yAxis'].push({
		                    axis: axis,
		                    value: axis.translate(
		                        isXAxis ?
		                            Math.PI - Math.atan2(x, y) : // angle
		                            // distance from center
		                            Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2)),
		                        true
		                    )
		                });
		            });

		        } else {
		            ret = proceed.call(this, e);
		        }

		        return ret;
		    });

		    H.SVGRenderer.prototype.clipCircle = function (x, y, r) {
		        var wrapper,
		            id = H.uniqueKey(),

		            clipPath = this.createElement('clipPath').attr({
		                id: id
		            }).add(this.defs);

		        wrapper = this.circle(x, y, r).add(clipPath);
		        wrapper.id = id;
		        wrapper.clipPath = clipPath;

		        return wrapper;
		    };

		    H.addEvent(H.Chart, 'getAxes', function () {

		        if (!this.pane) {
		            this.pane = [];
		        }
		        H.splat(this.options.pane).forEach(function (paneOptions) {
		            new H.Pane( // eslint-disable-line no-new
		                paneOptions,
		                this
		            );
		        }, this);
		    });

		    H.addEvent(H.Chart, 'afterDrawChartBox', function () {
		        this.pane.forEach(function (pane) {
		            pane.render();
		        });
		    });

		    /**
		     * Extend chart.get to also search in panes. Used internally in
		     * responsiveness and chart.update.
		     */
		    wrap(H.Chart.prototype, 'get', function (proceed, id) {
		        return H.find(this.pane, function (pane) {
		            return pane.options.id === id;
		        }) || proceed.call(this, id);
		    });
		}

	}(Highcharts));
	(function (H) {
		/* *
		 * (c) 2010-2018 Torstein Honsi
		 *
		 * License: www.highcharts.com/license
		 */



		var CenteredSeriesMixin = H.CenteredSeriesMixin,
		    extend = H.extend,
		    merge = H.merge,
		    splat = H.splat;

		/**
		 * The Pane object allows options that are common to a set of X and Y axes.
		 *
		 * In the future, this can be extended to basic Highcharts and Highstock.
		 *
		 * @private
		 * @class
		 * @name Highcharts.Pane
		 *
		 * @param {Highcharts.PaneOptions} options
		 *
		 * @param {Highcharts.Chart} chart
		 */
		function Pane(options, chart) {
		    this.init(options, chart);
		}

		// Extend the Pane prototype
		extend(Pane.prototype, {

		    coll: 'pane', // Member of chart.pane

		    /**
		     * Initiate the Pane object
		     *
		     * @private
		     * @function Highcharts.Pane#init
		     *
		     * @param {Highcharts.PaneOptions} options
		     *
		     * @param {Highcharts.Chart} chart
		     */
		    init: function (options, chart) {
		        this.chart = chart;
		        this.background = [];

		        chart.pane.push(this);

		        this.setOptions(options);
		    },

		    /**
		     * @private
		     * @function Highcharts.Pane#setOptions
		     *
		     * @param {Highcharts.PaneOptions} options
		     */
		    setOptions: function (options) {

		        // Set options. Angular charts have a default background (#3318)
		        this.options = options = merge(
		            this.defaultOptions,
		            this.chart.angular ? { background: {} } : undefined,
		            options
		        );
		    },

		    /**
		     * Render the pane with its backgrounds.
		     *
		     * @private
		     * @function Highcharts.Pane#render
		     */
		    render: function () {

		        var options = this.options,
		            backgroundOption = this.options.background,
		            renderer = this.chart.renderer,
		            len,
		            i;

		        if (!this.group) {
		            this.group = renderer.g('pane-group')
		                .attr({ zIndex: options.zIndex || 0 })
		                .add();
		        }

		        this.updateCenter();

		        // Render the backgrounds
		        if (backgroundOption) {
		            backgroundOption = splat(backgroundOption);

		            len = Math.max(
		                backgroundOption.length,
		                this.background.length || 0
		            );

		            for (i = 0; i < len; i++) {
		                // #6641 - if axis exists, chart is circular and apply
		                // background
		                if (backgroundOption[i] && this.axis) {
		                    this.renderBackground(
		                        merge(
		                            this.defaultBackgroundOptions,
		                            backgroundOption[i]
		                        ),
		                        i
		                    );
		                } else if (this.background[i]) {
		                    this.background[i] = this.background[i].destroy();
		                    this.background.splice(i, 1);
		                }
		            }
		        }
		    },

		    /**
		     * Render an individual pane background.
		     *
		     * @private
		     * @function Highcharts.Pane#renderBackground
		     *
		     * @param {Highcharts.PaneBackgroundOptions} backgroundOptions
		     *        Background options
		     *
		     * @param {number} i
		     *        The index of the background in this.backgrounds
		     */
		    renderBackground: function (backgroundOptions, i) {
		        var method = 'animate',
		            attribs = {
		                'class':
		                    'highcharts-pane ' + (backgroundOptions.className || '')
		            };

		        if (!this.chart.styledMode) {
		            extend(attribs, {
		                'fill': backgroundOptions.backgroundColor,
		                'stroke': backgroundOptions.borderColor,
		                'stroke-width': backgroundOptions.borderWidth
		            });
		        }

		        if (!this.background[i]) {
		            this.background[i] = this.chart.renderer.path()
		                .add(this.group);
		            method = 'attr';
		        }

		        this.background[i][method]({
		            'd': this.axis.getPlotBandPath(
		                backgroundOptions.from,
		                backgroundOptions.to,
		                backgroundOptions
		            )
		        }).attr(attribs);

		    },

		    /**
		     * The pane serves as a container for axes and backgrounds for circular
		     * gauges and polar charts.
		     *
		     * @since        2.3.0
		     * @product      highcharts
		     * @optionparent pane
		     */
		    defaultOptions: {

		        /**
		         * The end angle of the polar X axis or gauge value axis, given in
		         * degrees where 0 is north. Defaults to [startAngle](#pane.startAngle)
		         * + 360.
		         *
		         * @sample {highcharts} highcharts/demo/gauge-vu-meter/
		         *         VU-meter with custom start and end angle
		         *
		         * @type      {number}
		         * @since     2.3.0
		         * @product   highcharts
		         * @apioption pane.endAngle
		         */

		        /**
		         * The center of a polar chart or angular gauge, given as an array
		         * of [x, y] positions. Positions can be given as integers that
		         * transform to pixels, or as percentages of the plot area size.
		         *
		         * @sample {highcharts} highcharts/demo/gauge-vu-meter/
		         *         Two gauges with different center
		         *
		         * @type    {Array<string|number>}
		         * @default ["50%", "50%"]
		         * @since   2.3.0
		         * @product highcharts
		         */
		        center: ['50%', '50%'],

		        /**
		         * The size of the pane, either as a number defining pixels, or a
		         * percentage defining a percentage of the plot are.
		         *
		         * @sample {highcharts} highcharts/demo/gauge-vu-meter/
		         *         Smaller size
		         *
		         * @type    {number|string}
		         * @product highcharts
		         */
		        size: '85%',

		        /**
		         * The start angle of the polar X axis or gauge axis, given in degrees
		         * where 0 is north. Defaults to 0.
		         *
		         * @sample {highcharts} highcharts/demo/gauge-vu-meter/
		         *         VU-meter with custom start and end angle
		         *
		         * @since   2.3.0
		         * @product highcharts
		         */
		        startAngle: 0
		    },

		    /**
		     * An array of background items for the pane.
		     *
		     * @sample {highcharts} highcharts/demo/gauge-speedometer/
		     *         Speedometer gauge with multiple backgrounds
		     *
		     * @type         {Array<*>}
		     * @optionparent pane.background
		     */
		    defaultBackgroundOptions: {

		        /**
		         * The class name for this background.
		         *
		         * @sample {highcharts} highcharts/css/pane/
		         *         Panes styled by CSS
		         * @sample {highstock} highcharts/css/pane/
		         *         Panes styled by CSS
		         * @sample {highmaps} highcharts/css/pane/
		         *         Panes styled by CSS
		         *
		         * @type      {string}
		         * @default   highcharts-pane
		         * @since     5.0.0
		         * @apioption pane.background.className
		         */

		        /**
		         * The shape of the pane background. When `solid`, the background
		         * is circular. When `arc`, the background extends only from the min
		         * to the max of the value axis.
		         *
		         * @type       {string}
		         * @since      2.3.0
		         * @validvalue ["arc", "circle", "solid"]
		         * @product    highcharts
		         */
		        shape: 'circle',

		        /**
		         * The pixel border width of the pane background.
		         *
		         * @since 2.3.0
		         * @product highcharts
		         */
		        borderWidth: 1,

		        /**
		         * The pane background border color.
		         *
		         * @type    {Highcharts.ColorString}
		         * @since   2.3.0
		         * @product highcharts
		         */
		        borderColor: '#cccccc',

		        /**
		         * The background color or gradient for the pane.
		         *
		         * @type    {Highcharts.GradientColorObject}
		         * @default { linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, stops: [[0, #ffffff], [1, #e6e6e6]] }
		         * @since   2.3.0
		         * @product highcharts
		         */
		        backgroundColor: {

		            /**
		             * @ignore
		             */
		            linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },

		            /**
		             * @ignore
		             */
		            stops: [
		                [0, '#ffffff'],
		                [1, '#e6e6e6']
		            ]

		        },

		        /** @ignore-option */
		        from: -Number.MAX_VALUE, // corrected to axis min

		        /**
		         * The inner radius of the pane background. Can be either numeric
		         * (pixels) or a percentage string.
		         *
		         * @type    {number|string}
		         * @since   2.3.0
		         * @product highcharts
		         */
		        innerRadius: 0,

		        /**
		         * @ignore-option
		         */
		        to: Number.MAX_VALUE, // corrected to axis max

		        /**
		         * The outer radius of the circular pane background. Can be either
		         * numeric (pixels) or a percentage string.
		         *
		         * @type     {number|string}
		         * @since    2.3.0
		         * @product  highcharts
		         */
		        outerRadius: '105%'

		    },

		    /**
		     * Gets the center for the pane and its axis.
		     *
		     * @private
		     * @function Highcharts.Pane#updateCenter
		     *
		     * @param {Highcharts.RadialAxis} axis
		     */
		    updateCenter: function (axis) {
		        this.center = (axis || this.axis || {}).center =
		            CenteredSeriesMixin.getCenter.call(this);
		    },

		    /**
		     * Destroy the pane item
		     *
		     * @ignore
		     * @private
		     * @function Highcharts.Pane#destroy
		     * /
		    destroy: function () {
		        H.erase(this.chart.pane, this);
		        this.background.forEach(function (background) {
		            background.destroy();
		        });
		        this.background.length = 0;
		        this.group = this.group.destroy();
		    },
		    */

		    /**
		     * Update the pane item with new options
		     *
		     * @private
		     * @function Highcharts.Pane#update
		     *
		     * @param {Highcharts.PaneOptions} options
		     *        New pane options
		     *
		     * @param {boolean} redraw
		     */
		    update: function (options, redraw) {

		        merge(true, this.options, options);
		        this.setOptions(this.options);
		        this.render();
		        this.chart.axes.forEach(function (axis) {
		            if (axis.pane === this) {
		                axis.pane = null;
		                axis.update({}, redraw);
		            }
		        }, this);
		    }

		});

		H.Pane = Pane;

	}(Highcharts));
	(function (H) {
		/* *
		 * (c) 2010-2018 Torstein Honsi
		 *
		 * License: www.highcharts.com/license
		 */



		var addEvent = H.addEvent,
		    Axis = H.Axis,
		    extend = H.extend,
		    merge = H.merge,
		    noop = H.noop,
		    pick = H.pick,
		    pInt = H.pInt,
		    Tick = H.Tick,
		    wrap = H.wrap,
		    correctFloat = H.correctFloat,


		    hiddenAxisMixin, // @todo Extract this to a new file
		    radialAxisMixin, // @todo Extract this to a new file
		    axisProto = Axis.prototype,
		    tickProto = Tick.prototype;

		if (!H.radialAxisExtended) {
		    H.radialAxisExtended = true;

		    // Augmented methods for the x axis in order to hide it completely, used for
		    // the X axis in gauges
		    hiddenAxisMixin = {
		        getOffset: noop,
		        redraw: function () {
		            this.isDirty = false; // prevent setting Y axis dirty
		        },
		        render: function () {
		            this.isDirty = false; // prevent setting Y axis dirty
		        },
		        setScale: noop,
		        setCategories: noop,
		        setTitle: noop
		    };

		    // Augmented methods for the value axis
		    radialAxisMixin = {

		        // The default options extend defaultYAxisOptions
		        defaultRadialGaugeOptions: {
		            labels: {
		                align: 'center',
		                x: 0,
		                y: null // auto
		            },
		            minorGridLineWidth: 0,
		            minorTickInterval: 'auto',
		            minorTickLength: 10,
		            minorTickPosition: 'inside',
		            minorTickWidth: 1,
		            tickLength: 10,
		            tickPosition: 'inside',
		            tickWidth: 2,
		            title: {
		                rotation: 0
		            },
		            zIndex: 2 // behind dials, points in the series group
		        },

		        // Circular axis around the perimeter of a polar chart
		        defaultRadialXOptions: {
		            gridLineWidth: 1, // spokes
		            labels: {
		                align: null, // auto
		                distance: 15,
		                x: 0,
		                y: null, // auto
		                style: {
		                    textOverflow: 'none' // wrap lines by default (#7248)
		                }
		            },
		            maxPadding: 0,
		            minPadding: 0,
		            showLastLabel: false,
		            tickLength: 0
		        },

		        // Radial axis, like a spoke in a polar chart
		        defaultRadialYOptions: {
		            gridLineInterpolation: 'circle',
		            labels: {
		                align: 'right',
		                x: -3,
		                y: -2
		            },
		            showLastLabel: false,
		            title: {
		                x: 4,
		                text: null,
		                rotation: 90
		            }
		        },

		        // Merge and set options
		        setOptions: function (userOptions) {

		            var options = this.options = merge(
		                this.defaultOptions,
		                this.defaultRadialOptions,
		                userOptions
		            );

		            // Make sure the plotBands array is instanciated for each Axis
		            // (#2649)
		            if (!options.plotBands) {
		                options.plotBands = [];
		            }

		            H.fireEvent(this, 'afterSetOptions');

		        },

		        // Wrap the getOffset method to return zero offset for title or labels
		        // in a radial axis
		        getOffset: function () {
		            // Call the Axis prototype method (the method we're in now is on the
		            // instance)
		            axisProto.getOffset.call(this);

		            // Title or label offsets are not counted
		            this.chart.axisOffset[this.side] = 0;

		        },


		        // Get the path for the axis line. This method is also referenced in the
		        // getPlotLinePath method.
		        getLinePath: function (lineWidth, radius) {
		            var center = this.center,
		                end,
		                chart = this.chart,
		                r = pick(radius, center[2] / 2 - this.offset),
		                path;

		            if (this.isCircular || radius !== undefined) {
		                path = this.chart.renderer.symbols.arc(
		                    this.left + center[0],
		                    this.top + center[1],
		                    r,
		                    r,
		                    {
		                        start: this.startAngleRad,
		                        end: this.endAngleRad,
		                        open: true,
		                        innerR: 0
		                    }
		                );

		                // Bounds used to position the plotLine label next to the line
		                // (#7117)
		                path.xBounds = [this.left + center[0]];
		                path.yBounds = [this.top + center[1] - r];

		            } else {
		                end = this.postTranslate(this.angleRad, r);
		                path = [
		                    'M',
		                    center[0] + chart.plotLeft,
		                    center[1] + chart.plotTop,
		                    'L',
		                    end.x,
		                    end.y
		                ];
		            }
		            return path;
		        },

		        /* *
		         * Override setAxisTranslation by setting the translation to the
		         * difference in rotation. This allows the translate method to return
		         * angle for any given value.
		         */
		        setAxisTranslation: function () {

		            // Call uber method
		            axisProto.setAxisTranslation.call(this);

		            // Set transA and minPixelPadding
		            if (this.center) { // it's not defined the first time
		                if (this.isCircular) {

		                    this.transA = (this.endAngleRad - this.startAngleRad) /
		                        ((this.max - this.min) || 1);


		                } else {
		                    this.transA = (
		                        (this.center[2] / 2) /
		                        ((this.max - this.min) || 1)
		                    );
		                }

		                if (this.isXAxis) {
		                    this.minPixelPadding = this.transA * this.minPointOffset;
		                } else {
		                    // This is a workaround for regression #2593, but categories
		                    // still don't position correctly.
		                    this.minPixelPadding = 0;
		                }
		            }
		        },

		        /* *
		         * In case of auto connect, add one closestPointRange to the max value
		         * right before tickPositions are computed, so that ticks will extend
		         * passed the real max.
		         */
		        beforeSetTickPositions: function () {
		            // If autoConnect is true, polygonal grid lines are connected, and
		            // one closestPointRange is added to the X axis to prevent the last
		            // point from overlapping the first.
		            this.autoConnect = (
		                this.isCircular &&
		                pick(this.userMax, this.options.max) === undefined &&
		                correctFloat(this.endAngleRad - this.startAngleRad) ===
		                correctFloat(2 * Math.PI)
		            );

		            if (this.autoConnect) {
		                this.max += (
		                    (this.categories && 1) ||
		                    this.pointRange ||
		                    this.closestPointRange ||
		                    0
		                ); // #1197, #2260
		            }
		        },

		        /* *
		         * Override the setAxisSize method to use the arc's circumference as
		         * length. This allows tickPixelInterval to apply to pixel lengths along
		         * the perimeter
		         */
		        setAxisSize: function () {

		            axisProto.setAxisSize.call(this);

		            if (this.isRadial) {

		                // Set the center array
		                this.pane.updateCenter(this);

		                // The sector is used in Axis.translate to compute the
		                // translation of reversed axis points (#2570)
		                if (this.isCircular) {
		                    this.sector = this.endAngleRad - this.startAngleRad;
		                }

		                // Axis len is used to lay out the ticks
		                this.len = this.width = this.height =
		                    this.center[2] * pick(this.sector, 1) / 2;

		            }
		        },

		        /* *
		         * Returns the x, y coordinate of a point given by a value and a pixel
		         * distance from center
		         */
		        getPosition: function (value, length) {
		            return this.postTranslate(
		                this.isCircular ?
		                    this.translate(value) :
		                    this.angleRad, // #2848
		                pick(
		                    this.isCircular ? length : this.translate(value),
		                    this.center[2] / 2
		                ) - this.offset
		            );
		        },

		        /* *
		         * Translate from intermediate plotX (angle), plotY (axis.len - radius)
		         * to final chart coordinates.
		         */
		        postTranslate: function (angle, radius) {

		            var chart = this.chart,
		                center = this.center;

		            angle = this.startAngleRad + angle;

		            return {
		                x: chart.plotLeft + center[0] + Math.cos(angle) * radius,
		                y: chart.plotTop + center[1] + Math.sin(angle) * radius
		            };

		        },

		        /* *
		         * Find the path for plot bands along the radial axis
		         */
		        getPlotBandPath: function (from, to, options) {
		            var center = this.center,
		                startAngleRad = this.startAngleRad,
		                fullRadius = center[2] / 2,
		                radii = [
		                    pick(options.outerRadius, '100%'),
		                    options.innerRadius,
		                    pick(options.thickness, 10)
		                ],
		                offset = Math.min(this.offset, 0),
		                percentRegex = /%$/,
		                start,
		                end,
		                open,
		                isCircular = this.isCircular, // X axis in a polar chart
		                ret;

		            // Polygonal plot bands
		            if (this.options.gridLineInterpolation === 'polygon') {
		                ret = this.getPlotLinePath(from).concat(
		                    this.getPlotLinePath(to, true)
		                );

		            // Circular grid bands
		            } else {

		                // Keep within bounds
		                from = Math.max(from, this.min);
		                to = Math.min(to, this.max);

		                // Plot bands on Y axis (radial axis) - inner and outer radius
		                // depend on to and from
		                if (!isCircular) {
		                    radii[0] = this.translate(from);
		                    radii[1] = this.translate(to);
		                }

		                // Convert percentages to pixel values
		                radii = radii.map(function (radius) {
		                    if (percentRegex.test(radius)) {
		                        radius = (pInt(radius, 10) * fullRadius) / 100;
		                    }
		                    return radius;
		                });

		                // Handle full circle
		                if (options.shape === 'circle' || !isCircular) {
		                    start = -Math.PI / 2;
		                    end = Math.PI * 1.5;
		                    open = true;
		                } else {
		                    start = startAngleRad + this.translate(from);
		                    end = startAngleRad + this.translate(to);
		                }

		                radii[0] -= offset; // #5283
		                radii[2] -= offset; // #5283

		                ret = this.chart.renderer.symbols.arc(
		                    this.left + center[0],
		                    this.top + center[1],
		                    radii[0],
		                    radii[0],
		                    {
		                        // Math is for reversed yAxis (#3606)
		                        start: Math.min(start, end),
		                        end: Math.max(start, end),
		                        innerR: pick(radii[1], radii[0] - radii[2]),
		                        open: open
		                    }
		                );
		            }

		            return ret;
		        },

		        /* *
		         * Find the path for plot lines perpendicular to the radial axis.
		         */
		        getPlotLinePath: function (value, reverse) {
		            var axis = this,
		                center = axis.center,
		                chart = axis.chart,
		                end = axis.getPosition(value),
		                xAxis,
		                xy,
		                tickPositions,
		                ret;

		            // Spokes
		            if (axis.isCircular) {
		                ret = [
		                    'M',
		                    center[0] + chart.plotLeft,
		                    center[1] + chart.plotTop,
		                    'L',
		                    end.x,
		                    end.y
		                ];

		            // Concentric circles
		            } else if (axis.options.gridLineInterpolation === 'circle') {
		                value = axis.translate(value);

		                // a value of 0 is in the center, so it won't be visible,
		                // but draw it anyway for update and animation (#2366)
		                ret = axis.getLinePath(0, value);
		            // Concentric polygons
		            } else {
		                // Find the X axis in the same pane
		                chart.xAxis.forEach(function (a) {
		                    if (a.pane === axis.pane) {
		                        xAxis = a;
		                    }
		                });
		                ret = [];
		                value = axis.translate(value);
		                tickPositions = xAxis.tickPositions;
		                if (xAxis.autoConnect) {
		                    tickPositions = tickPositions.concat([tickPositions[0]]);
		                }
		                // Reverse the positions for concatenation of polygonal plot
		                // bands
		                if (reverse) {
		                    tickPositions = [].concat(tickPositions).reverse();
		                }

		                tickPositions.forEach(function (pos, i) {
		                    xy = xAxis.getPosition(pos, value);
		                    ret.push(i ? 'L' : 'M', xy.x, xy.y);
		                });

		            }
		            return ret;
		        },

		        /* *
		         * Find the position for the axis title, by default inside the gauge
		         */
		        getTitlePosition: function () {
		            var center = this.center,
		                chart = this.chart,
		                titleOptions = this.options.title;

		            return {
		                x: chart.plotLeft + center[0] + (titleOptions.x || 0),
		                y: (
		                    chart.plotTop +
		                    center[1] -
		                    (
		                        {
		                            high: 0.5,
		                            middle: 0.25,
		                            low: 0
		                        }[titleOptions.align] * center[2]
		                    ) +
		                    (titleOptions.y || 0)
		                )
		            };
		        }

		    };

		    // Actions before axis init.
		    addEvent(Axis, 'init', function (e) {
		        var chart = this.chart,
		            angular = chart.angular,
		            polar = chart.polar,
		            isX = this.isXAxis,
		            isHidden = angular && isX,
		            isCircular,
		            chartOptions = chart.options,
		            paneIndex = e.userOptions.pane || 0,
		            pane = this.pane = chart.pane && chart.pane[paneIndex];

		        // Before prototype.init
		        if (angular) {
		            extend(this, isHidden ? hiddenAxisMixin : radialAxisMixin);
		            isCircular = !isX;
		            if (isCircular) {
		                this.defaultRadialOptions = this.defaultRadialGaugeOptions;
		            }

		        } else if (polar) {
		            extend(this, radialAxisMixin);
		            isCircular = isX;
		            this.defaultRadialOptions = isX ?
		                this.defaultRadialXOptions :
		                merge(this.defaultYAxisOptions, this.defaultRadialYOptions);

		        }

		        // Disable certain features on angular and polar axes
		        if (angular || polar) {
		            this.isRadial = true;
		            chart.inverted = false;
		            chartOptions.chart.zoomType = null;
		        } else {
		            this.isRadial = false;
		        }

		        // A pointer back to this axis to borrow geometry
		        if (pane && isCircular) {
		            pane.axis = this;
		        }

		        this.isCircular = isCircular;

		    });

		    addEvent(Axis, 'afterInit', function () {

		        var chart = this.chart,
		            options = this.options,
		            isHidden = chart.angular && this.isXAxis,
		            pane = this.pane,
		            paneOptions = pane && pane.options;

		        if (!isHidden && pane && (chart.angular || chart.polar)) {

		            // Start and end angle options are
		            // given in degrees relative to top, while internal computations are
		            // in radians relative to right (like SVG).

		            // Y axis in polar charts
		            this.angleRad = (options.angle || 0) * Math.PI / 180;
		            // Gauges
		            this.startAngleRad = (paneOptions.startAngle - 90) * Math.PI / 180;
		            this.endAngleRad = (
		                pick(paneOptions.endAngle, paneOptions.startAngle + 360) - 90
		            ) * Math.PI / 180; // Gauges
		            this.offset = options.offset || 0;

		        }

		    });

		    /* *
		     * Wrap auto label align to avoid setting axis-wide rotation on radial axes
		     * (#4920)
		     * @param   {Function} proceed
		     * @returns {String} Alignment
		     */
		    wrap(axisProto, 'autoLabelAlign', function (proceed) {
		        if (!this.isRadial) {
		            return proceed.apply(this, [].slice.call(arguments, 1));
		        } // else return undefined
		    });

		    // Add special cases within the Tick class' methods for radial axes.
		    addEvent(Tick, 'afterGetPosition', function (e) {
		        if (this.axis.getPosition) {
		            extend(e.pos, this.axis.getPosition(this.pos));
		        }
		    });

		    // Find the center position of the label based on the distance option.
		    addEvent(Tick, 'afterGetLabelPosition', function (e) {
		        var axis = this.axis,
		            label = this.label,
		            labelOptions = axis.options.labels,
		            optionsY = labelOptions.y,
		            ret,
		            centerSlot = 20, // 20 degrees to each side at the top and bottom
		            align = labelOptions.align,
		            angle = (
		                (axis.translate(this.pos) + axis.startAngleRad + Math.PI / 2) /
		                Math.PI * 180
		            ) % 360;

		        if (axis.isRadial) { // Both X and Y axes in a polar chart
		            ret = axis.getPosition(this.pos, (axis.center[2] / 2) +
		                pick(labelOptions.distance, -25));

		            // Automatically rotated
		            if (labelOptions.rotation === 'auto') {
		                label.attr({
		                    rotation: angle
		                });

		            // Vertically centered
		            } else if (optionsY === null) {
		                optionsY = (
		                    axis.chart.renderer
		                        .fontMetrics(label.styles && label.styles.fontSize).b -
		                    label.getBBox().height / 2
		                );
		            }

		            // Automatic alignment
		            if (align === null) {
		                if (axis.isCircular) { // Y axis
		                    if (
		                        this.label.getBBox().width >
		                        axis.len * axis.tickInterval / (axis.max - axis.min)
		                    ) { // #3506
		                        centerSlot = 0;
		                    }
		                    if (angle > centerSlot && angle < 180 - centerSlot) {
		                        align = 'left'; // right hemisphere
		                    } else if (
		                        angle > 180 + centerSlot &&
		                        angle < 360 - centerSlot
		                    ) {
		                        align = 'right'; // left hemisphere
		                    } else {
		                        align = 'center'; // top or bottom
		                    }
		                } else {
		                    align = 'center';
		                }
		                label.attr({
		                    align: align
		                });
		            }

		            e.pos.x = ret.x + labelOptions.x;
		            e.pos.y = ret.y + optionsY;

		        }
		    });

		    // Wrap the getMarkPath function to return the path of the radial marker
		    wrap(tickProto, 'getMarkPath', function (
		        proceed,
		        x,
		        y,
		        tickLength,
		        tickWidth,
		        horiz,
		        renderer
		    ) {
		        var axis = this.axis,
		            endPoint,
		            ret;

		        if (axis.isRadial) {
		            endPoint = axis.getPosition(
		                this.pos,
		                axis.center[2] / 2 + tickLength
		            );
		            ret = [
		                'M',
		                x,
		                y,
		                'L',
		                endPoint.x,
		                endPoint.y
		            ];
		        } else {
		            ret = proceed.call(
		                this,
		                x,
		                y,
		                tickLength,
		                tickWidth,
		                horiz,
		                renderer
		            );
		        }
		        return ret;
		    });
		}

	}(Highcharts));
	(function (H) {
		/* *
		 * (c) 2010-2018 Torstein Honsi
		 *
		 * License: www.highcharts.com/license
		 */



		var correctFloat = H.correctFloat,
		    isNumber = H.isNumber,
		    pick = H.pick,
		    Point = H.Point,
		    Series = H.Series,
		    seriesType = H.seriesType,
		    seriesTypes = H.seriesTypes;

		/**
		 * A waterfall chart displays sequentially introduced positive or negative
		 * values in cumulative columns.
		 *
		 * @sample highcharts/demo/waterfall/
		 *         Waterfall chart
		 * @sample highcharts/plotoptions/waterfall-inverted/
		 *         Horizontal (inverted) waterfall
		 * @sample highcharts/plotoptions/waterfall-stacked/
		 *         Stacked waterfall chart
		 *
		 * @extends      plotOptions.column
		 * @product      highcharts
		 * @optionparent plotOptions.waterfall
		 */
		seriesType('waterfall', 'column', {

		    /**
		     * The color used specifically for positive point columns. When not
		     * specified, the general series color is used.
		     *
		     * In styled mode, the waterfall colors can be set with the
		     * `.highcharts-point-negative`, `.highcharts-sum` and
		     * `.highcharts-intermediate-sum` classes.
		     *
		     * @sample {highcharts} highcharts/demo/waterfall/
		     *         Waterfall
		     *
		     * @type      {Highcharts.ColorString|Highcharts.GradientColorObject}
		     * @product   highcharts
		     * @apioption plotOptions.waterfall.upColor
		     */

		    dataLabels: {
		        inside: true
		    },

		    /**
		     * The width of the line connecting waterfall columns.
		     *
		     * @product highcharts
		     */
		    lineWidth: 1,

		    /**
		     * The color of the line that connects columns in a waterfall series.
		     *
		     * In styled mode, the stroke can be set with the `.highcharts-graph` class.
		     *
		     * @type    {Highcharts.ColorString}
		     * @since   3.0
		     * @product highcharts
		     */
		    lineColor: '#333333',

		    /**
		     * A name for the dash style to use for the line connecting the columns
		     * of the waterfall series. Possible values: Dash, DashDot, Dot, LongDash,
		     * LongDashDot, LongDashDotDot, ShortDash, ShortDashDot, ShortDashDotDot,
		     * ShortDot, Solid
		     *
		     * In styled mode, the stroke dash-array can be set with the
		     * `.highcharts-graph` class.
		     *
		     * @type       {string}
		     * @since      3.0
		     * @validvalue ["Dash", "DashDot", "Dot", "LongDash", "LongDashDot",
		     *             "LongDashDotDot", "ShortDash", "ShortDashDot",
		     *             "ShortDashDotDot", "ShortDot", "Solid"]
		     * @product    highcharts
		     */
		    dashStyle: 'Dot',

		    /**
		     * The color of the border of each waterfall column.
		     *
		     * In styled mode, the border stroke can be set with the
		     * `.highcharts-point` class.
		     *
		     * @type    {Highcharts.ColorString}
		     * @since   3.0
		     * @product highcharts
		     */
		    borderColor: '#333333',

		    states: {
		        hover: {
		            lineWidthPlus: 0 // #3126
		        }
		    }

		// Prototype members
		}, {
		    pointValKey: 'y',

		    // Property needed to prevent lines between the columns from disappearing
		    // when negativeColor is used.
		    showLine: true,

		    // After generating points, set y-values for all sums.
		    generatePoints: function () {
		        var previousIntermediate = this.options.threshold,
		            point,
		            len,
		            i,
		            y;
		        // Parent call:
		        seriesTypes.column.prototype.generatePoints.apply(this);

		        for (i = 0, len = this.points.length; i < len; i++) {
		            point = this.points[i];
		            y = this.processedYData[i];
		            // override point value for sums
		            // #3710 Update point does not propagate to sum
		            if (point.isSum) {
		                point.y = correctFloat(y);
		            } else if (point.isIntermediateSum) {
		                point.y = correctFloat(y - previousIntermediate); // #3840
		                previousIntermediate = y;
		            }
		        }
		    },

		    // Translate data points from raw values
		    translate: function () {
		        var series = this,
		            options = series.options,
		            yAxis = series.yAxis,
		            len,
		            i,
		            points,
		            point,
		            shapeArgs,
		            stack,
		            y,
		            yValue,
		            previousY,
		            previousIntermediate,
		            range,
		            minPointLength = pick(options.minPointLength, 5),
		            halfMinPointLength = minPointLength / 2,
		            threshold = options.threshold,
		            stacking = options.stacking,
		            stackIndicator,
		            tooltipY;

		        // run column series translate
		        seriesTypes.column.prototype.translate.apply(series);

		        previousY = previousIntermediate = threshold;
		        points = series.points;

		        for (i = 0, len = points.length; i < len; i++) {
		            // cache current point object
		            point = points[i];
		            yValue = series.processedYData[i];
		            shapeArgs = point.shapeArgs;

		            // get current stack
		            stack = stacking &&
		                yAxis.stacks[
		                    (series.negStacks && yValue < threshold ? '-' : '') +
		                        series.stackKey
		                ];
		            stackIndicator = series.getStackIndicator(
		                stackIndicator,
		                point.x,
		                series.index
		            );
		            range = pick(
		                stack && stack[point.x].points[stackIndicator.key],
		                [0, yValue]
		            );

		            // up points
		            y = Math.max(previousY, previousY + point.y) + range[0];
		            shapeArgs.y = yAxis.translate(y, 0, 1, 0, 1);

		            // sum points
		            if (point.isSum) {
		                shapeArgs.y = yAxis.translate(range[1], 0, 1, 0, 1);
		                shapeArgs.height = Math.min(
		                        yAxis.translate(range[0], 0, 1, 0, 1),
		                        yAxis.len
		                    ) - shapeArgs.y; // #4256

		            } else if (point.isIntermediateSum) {
		                shapeArgs.y = yAxis.translate(range[1], 0, 1, 0, 1);
		                shapeArgs.height = Math.min(
		                        yAxis.translate(previousIntermediate, 0, 1, 0, 1),
		                        yAxis.len
		                    ) - shapeArgs.y;
		                previousIntermediate = range[1];

		            // If it's not the sum point, update previous stack end position
		            // and get shape height (#3886)
		            } else {
		                shapeArgs.height = yValue > 0 ?
		                    yAxis.translate(previousY, 0, 1, 0, 1) - shapeArgs.y :
		                    yAxis.translate(previousY, 0, 1, 0, 1) -
		                        yAxis.translate(previousY - yValue, 0, 1, 0, 1);

		                previousY += stack && stack[point.x] ?
		                    stack[point.x].total :
		                    yValue;

		                point.below = previousY < pick(threshold, 0);
		            }

		            // #3952 Negative sum or intermediate sum not rendered correctly
		            if (shapeArgs.height < 0) {
		                shapeArgs.y += shapeArgs.height;
		                shapeArgs.height *= -1;
		            }

		            point.plotY = shapeArgs.y = Math.round(shapeArgs.y) -
		                (series.borderWidth % 2) / 2;
		            // #3151
		            shapeArgs.height = Math.max(Math.round(shapeArgs.height), 0.001);
		            point.yBottom = shapeArgs.y + shapeArgs.height;

		            if (shapeArgs.height <= minPointLength && !point.isNull) {
		                shapeArgs.height = minPointLength;
		                shapeArgs.y -= halfMinPointLength;
		                point.plotY = shapeArgs.y;
		                if (point.y < 0) {
		                    point.minPointLengthOffset = -halfMinPointLength;
		                } else {
		                    point.minPointLengthOffset = halfMinPointLength;
		                }
		            } else {
		                if (point.isNull) {
		                    shapeArgs.width = 0;
		                }
		                point.minPointLengthOffset = 0;
		            }

		            // Correct tooltip placement (#3014)
		            tooltipY = point.plotY + (point.negative ? shapeArgs.height : 0);

		            if (series.chart.inverted) {
		                point.tooltipPos[0] = yAxis.len - tooltipY;
		            } else {
		                point.tooltipPos[1] = tooltipY;
		            }
		        }
		    },

		    // Call default processData then override yData to reflect waterfall's
		    // extremes on yAxis
		    processData: function (force) {
		        var series = this,
		            options = series.options,
		            yData = series.yData,
		            // #3710 Update point does not propagate to sum
		            points = series.options.data,
		            point,
		            dataLength = yData.length,
		            threshold = options.threshold || 0,
		            subSum,
		            sum,
		            dataMin,
		            dataMax,
		            y,
		            i;

		        sum = subSum = dataMin = dataMax = threshold;

		        for (i = 0; i < dataLength; i++) {
		            y = yData[i];
		            point = points && points[i] ? points[i] : {};

		            if (y === 'sum' || point.isSum) {
		                yData[i] = correctFloat(sum);
		            } else if (y === 'intermediateSum' || point.isIntermediateSum) {
		                yData[i] = correctFloat(subSum);
		            } else {
		                sum += y;
		                subSum += y;
		            }
		            dataMin = Math.min(sum, dataMin);
		            dataMax = Math.max(sum, dataMax);
		        }

		        Series.prototype.processData.call(this, force);

		        // Record extremes only if stacking was not set:
		        if (!series.options.stacking) {
		            series.dataMin = dataMin;
		            series.dataMax = dataMax;
		        }
		    },

		    // Return y value or string if point is sum
		    toYData: function (pt) {
		        if (pt.isSum) {
		            // #3245 Error when first element is Sum or Intermediate Sum
		            return (pt.x === 0 ? null : 'sum');
		        }
		        if (pt.isIntermediateSum) {
		            return (pt.x === 0 ? null : 'intermediateSum'); // #3245
		        }
		        return pt.y;
		    },

		    // Postprocess mapping between options and SVG attributes
		    pointAttribs: function (point, state) {

		        var upColor = this.options.upColor,
		            attr;

		        // Set or reset up color (#3710, update to negative)
		        if (upColor && !point.options.color) {
		            point.color = point.y > 0 ? upColor : null;
		        }

		        attr = seriesTypes.column.prototype.pointAttribs.call(
		                this,
		                point,
		                state
		            );

		        // The dashStyle option in waterfall applies to the graph, not
		        // the points
		        delete attr.dashstyle;

		        return attr;
		    },

		    // Return an empty path initially, because we need to know the stroke-width
		    // in order to set the final path.
		    getGraphPath: function () {
		        return ['M', 0, 0];
		    },

		    // Draw columns' connector lines
		    getCrispPath: function () {

		        var data = this.data,
		            length = data.length,
		            lineWidth = this.graph.strokeWidth() + this.borderWidth,
		            normalizer = Math.round(lineWidth) % 2 / 2,
		            reversedXAxis = this.xAxis.reversed,
		            reversedYAxis = this.yAxis.reversed,
		            path = [],
		            prevArgs,
		            pointArgs,
		            i,
		            d;

		        for (i = 1; i < length; i++) {
		            pointArgs = data[i].shapeArgs;
		            prevArgs = data[i - 1].shapeArgs;

		            d = [
		                'M',
		                prevArgs.x + (reversedXAxis ? 0 : prevArgs.width),
		                prevArgs.y + data[i - 1].minPointLengthOffset + normalizer,
		                'L',
		                pointArgs.x + (reversedXAxis ? prevArgs.width : 0),
		                prevArgs.y + data[i - 1].minPointLengthOffset + normalizer
		            ];

		            if (
		                (data[i - 1].y < 0 && !reversedYAxis) ||
		                (data[i - 1].y > 0 && reversedYAxis)
		            ) {
		                d[2] += prevArgs.height;
		                d[5] += prevArgs.height;
		            }

		            path = path.concat(d);
		        }

		        return path;
		    },

		    // The graph is initially drawn with an empty definition, then updated with
		    // crisp rendering.
		    drawGraph: function () {
		        Series.prototype.drawGraph.call(this);
		        this.graph.attr({
		            d: this.getCrispPath()
		        });
		    },

		    // Waterfall has stacking along the x-values too.
		    setStackedPoints: function () {
		        var series = this,
		            options = series.options,
		            stackedYLength,
		            i;

		        Series.prototype.setStackedPoints.apply(series, arguments);

		        stackedYLength = series.stackedYData ? series.stackedYData.length : 0;

		        // Start from the second point:
		        for (i = 1; i < stackedYLength; i++) {
		            if (
		                !options.data[i].isSum &&
		                !options.data[i].isIntermediateSum
		            ) {
		                // Sum previous stacked data as waterfall can grow up/down:
		                series.stackedYData[i] += series.stackedYData[i - 1];
		            }
		        }
		    },

		    // Extremes for a non-stacked series are recorded in processData.
		    // In case of stacking, use Series.stackedYData to calculate extremes.
		    getExtremes: function () {
		        if (this.options.stacking) {
		            return Series.prototype.getExtremes.apply(this, arguments);
		        }
		    }


		// Point members
		}, {
		    getClassName: function () {
		        var className = Point.prototype.getClassName.call(this);

		        if (this.isSum) {
		            className += ' highcharts-sum';
		        } else if (this.isIntermediateSum) {
		            className += ' highcharts-intermediate-sum';
		        }
		        return className;
		    },
		    // Pass the null test in ColumnSeries.translate.
		    isValid: function () {
		        return isNumber(this.y, true) || this.isSum || this.isIntermediateSum;
		    }

		});

		/**
		 * A `waterfall` series. If the [type](#series.waterfall.type) option
		 * is not specified, it is inherited from [chart.type](#chart.type).
		 *
		 * @extends   series,plotOptions.waterfall
		 * @excluding dataParser, dataURL
		 * @product   highcharts
		 * @apioption series.waterfall
		 */

		/**
		 * An array of data points for the series. For the `waterfall` series
		 * type, points can be given in the following ways:
		 *
		 * 1. An array of numerical values. In this case, the numerical values will be
		 *    interpreted as `y` options. The `x` values will be automatically
		 *    calculated, either starting at 0 and incremented by 1, or from
		 *    `pointStart` and `pointInterval` given in the series options. If the axis
		 *    has categories, these will be used. Example:
		 *    ```js
		 *    data: [0, 5, 3, 5]
		 *    ```
		 *
		 * 2. An array of arrays with 2 values. In this case, the values correspond to
		 *    `x,y`. If the first value is a string, it is applied as the name of the
		 *    point, and the `x` value is inferred.
		 *    ```js
		 *    data: [
		 *        [0, 7],
		 *        [1, 8],
		 *        [2, 3]
		 *    ]
		 *    ```
		 *
		 * 3. 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.waterfall.turboThreshold), this option is not
		 *    available.
		 *    ```js
		 *    data: [{
		 *        x: 1,
		 *        y: 8,
		 *        name: "Point2",
		 *        color: "#00FF00"
		 *    }, {
		 *        x: 1,
		 *        y: 8,
		 *        name: "Point1",
		 *        color: "#FF00FF"
		 *    }]
		 *    ```
		 *
		 * @sample {highcharts} highcharts/chart/reflow-true/
		 *         Numerical values
		 * @sample {highcharts} highcharts/series/data-array-of-arrays/
		 *         Arrays of numeric x and y
		 * @sample {highcharts} highcharts/series/data-array-of-arrays-datetime/
		 *         Arrays of datetime x and y
		 * @sample {highcharts} highcharts/series/data-array-of-name-value/
		 *         Arrays of point.name and y
		 * @sample {highcharts} highcharts/series/data-array-of-objects/
		 *         Config objects
		 *
		 * @type      {Array<number|Array<(number|string),number>|*>}
		 * @extends   series.line.data
		 * @excluding marker
		 * @product   highcharts
		 * @apioption series.waterfall.data
		 */


		/**
		 * When this property is true, the points acts as a summary column for
		 * the values added or substracted since the last intermediate sum,
		 * or since the start of the series. The `y` value is ignored.
		 *
		 * @sample {highcharts} highcharts/demo/waterfall/
		 *         Waterfall
		 *
		 * @type      {boolean}
		 * @default   false
		 * @product   highcharts
		 * @apioption series.waterfall.data.isIntermediateSum
		 */

		/**
		 * When this property is true, the point display the total sum across
		 * the entire series. The `y` value is ignored.
		 *
		 * @sample {highcharts} highcharts/demo/waterfall/
		 *         Waterfall
		 *
		 * @type      {boolean}
		 * @default   false
		 * @product   highcharts
		 * @apioption series.waterfall.data.isSum
		 */

	}(Highcharts));
	(function (H) {
		/* *
		 * (c) 2010-2018 Torstein Honsi
		 *
		 * License: www.highcharts.com/license
		 */



		var pick = H.pick,
		    seriesType = H.seriesType;

		/**
		 * Spline series type.
		 *
		 * @private
		 * @class
		 * @name Highcharts.seriesTypes.spline
		 *
		 * @augments Highcarts.Series
		 */
		seriesType('spline', 'line'

		/**
		 * A spline series is a special type of line series, where the segments
		 * between the data points are smoothed.
		 *
		 * @sample {highcharts} highcharts/demo/spline-irregular-time/
		 *         Spline chart
		 * @sample {highstock} stock/demo/spline/
		 *         Spline chart
		 *
		 * @extends      plotOptions.series
		 * @excluding    step
		 * @product      highcharts highstock
		 * @optionparent plotOptions.spline
		 */
		, {

		}, /** @lends seriesTypes.spline.prototype */ {

		    /**
		     * Get the spline segment from a given point's previous neighbour to the
		     * given point.
		     *
		     * @private
		     * @function Highcharts.seriesTypes.spline#getPointSpline
		     *
		     * @param {Array<Highcharts.Point>}
		     *
		     * @param {Highcharts.Point} point
		     *
		     * @param {number} i
		     *
		     * @return {Highcharts.SVGPathArray}
		     */
		    getPointSpline: function (points, point, i) {
		        var
		            // 1 means control points midway between points, 2 means 1/3 from
		            // the point, 3 is 1/4 etc
		            smoothing = 1.5,
		            denom = smoothing + 1,
		            plotX = point.plotX,
		            plotY = point.plotY,
		            lastPoint = points[i - 1],
		            nextPoint = points[i + 1],
		            leftContX,
		            leftContY,
		            rightContX,
		            rightContY,
		            ret;

		        function doCurve(otherPoint) {
		            return otherPoint &&
		                !otherPoint.isNull &&
		                otherPoint.doCurve !== false &&
		                !point.isCliff; // #6387, area splines next to null
		        }

		        // Find control points
		        if (doCurve(lastPoint) && doCurve(nextPoint)) {
		            var lastX = lastPoint.plotX,
		                lastY = lastPoint.plotY,
		                nextX = nextPoint.plotX,
		                nextY = nextPoint.plotY,
		                correction = 0;

		            leftContX = (smoothing * plotX + lastX) / denom;
		            leftContY = (smoothing * plotY + lastY) / denom;
		            rightContX = (smoothing * plotX + nextX) / denom;
		            rightContY = (smoothing * plotY + nextY) / denom;

		            // Have the two control points make a straight line through main
		            // point
		            if (rightContX !== leftContX) { // #5016, division by zero
		                correction = ((rightContY - leftContY) * (rightContX - plotX)) /
		                    (rightContX - leftContX) + plotY - rightContY;
		            }

		            leftContY += correction;
		            rightContY += correction;

		            // to prevent false extremes, check that control points are between
		            // neighbouring points' y values
		            if (leftContY > lastY && leftContY > plotY) {
		                leftContY = Math.max(lastY, plotY);
		                // mirror of left control point
		                rightContY = 2 * plotY - leftContY;
		            } else if (leftContY < lastY && leftContY < plotY) {
		                leftContY = Math.min(lastY, plotY);
		                rightContY = 2 * plotY - leftContY;
		            }
		            if (rightContY > nextY && rightContY > plotY) {
		                rightContY = Math.max(nextY, plotY);
		                leftContY = 2 * plotY - rightContY;
		            } else if (rightContY < nextY && rightContY < plotY) {
		                rightContY = Math.min(nextY, plotY);
		                leftContY = 2 * plotY - rightContY;
		            }

		            // record for drawing in next point
		            point.rightContX = rightContX;
		            point.rightContY = rightContY;


		        }

		        // Visualize control points for debugging
		        /*
		        if (leftContX) {
		            this.chart.renderer.circle(
		                    leftContX + this.chart.plotLeft,
		                    leftContY + this.chart.plotTop,
		                    2
		                )
		                .attr({
		                    stroke: 'red',
		                    'stroke-width': 2,
		                    fill: 'none',
		                    zIndex: 9
		                })
		                .add();
		            this.chart.renderer.path(['M', leftContX + this.chart.plotLeft,
		                leftContY + this.chart.plotTop,
		                'L', plotX + this.chart.plotLeft, plotY + this.chart.plotTop])
		                .attr({
		                    stroke: 'red',
		                    'stroke-width': 2,
		                    zIndex: 9
		                })
		                .add();
		        }
		        if (rightContX) {
		            this.chart.renderer.circle(
		                    rightContX + this.chart.plotLeft,
		                    rightContY + this.chart.plotTop,
		                    2
		                )
		                .attr({
		                    stroke: 'green',
		                    'stroke-width': 2,
		                    fill: 'none',
		                    zIndex: 9
		                })
		                .add();
		            this.chart.renderer.path(['M', rightContX + this.chart.plotLeft,
		                rightContY + this.chart.plotTop,
		                'L', plotX + this.chart.plotLeft, plotY + this.chart.plotTop])
		                .attr({
		                    stroke: 'green',
		                    'stroke-width': 2,
		                    zIndex: 9
		                })
		                .add();
		        }
		        // */
		        ret = [
		            'C',
		            pick(lastPoint.rightContX, lastPoint.plotX),
		            pick(lastPoint.rightContY, lastPoint.plotY),
		            pick(leftContX, plotX),
		            pick(leftContY, plotY),
		            plotX,
		            plotY
		        ];
		        // reset for updating series later
		        lastPoint.rightContX = lastPoint.rightContY = null;
		        return ret;
		    }
		});

		/**
		 * A `spline` series. If the [type](#series.spline.type) option is
		 * not specified, it is inherited from [chart.type](#chart.type).
		 *
		 * @extends   series,plotOptions.spline
		 * @excluding dataParser, dataURL, step
		 * @product   highcharts highstock
		 * @apioption series.spline
		 */

		/**
		 * An array of data points for the series. For the `spline` series type,
		 * points can be given in the following ways:
		 *
		 * 1. An array of numerical values. In this case, the numerical values will be
		 *    interpreted as `y` options. The `x` values will be automatically
		 *    calculated, either starting at 0 and incremented by 1, or from
		 *    `pointStart` and `pointInterval` given in the series options. If the axis
		 *    has categories, these will be used. Example:
		 *    ```js
		 *    data: [0, 5, 3, 5]
		 *    ```
		 *
		 * 2. An array of arrays with 2 values. In this case, the values correspond to
		 *    `x,y`. If the first value is a string, it is applied as the name of the
		 *    point, and the `x` value is inferred.
		 *    ```js
		 *    data: [
		 *        [0, 9],
		 *        [1, 2],
		 *        [2, 8]
		 *    ]
		 *    ```
		 *
		 * 3. 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.spline.turboThreshold), this option is not
		 *    available.
		 *    ```js
		 *    data: [{
		 *        x: 1,
		 *        y: 9,
		 *        name: "Point2",
		 *        color: "#00FF00"
		 *    }, {
		 *        x: 1,
		 *        y: 0,
		 *        name: "Point1",
		 *        color: "#FF00FF"
		 *    }]
		 *    ```
		 *
		 * @sample {highcharts} highcharts/chart/reflow-true/
		 *         Numerical values
		 * @sample {highcharts} highcharts/series/data-array-of-arrays/
		 *         Arrays of numeric x and y
		 * @sample {highcharts} highcharts/series/data-array-of-arrays-datetime/
		 *         Arrays of datetime x and y
		 * @sample {highcharts} highcharts/series/data-array-of-name-value/
		 *         Arrays of point.name and y
		 * @sample {highcharts} highcharts/series/data-array-of-objects/
		 *         Config objects
		 *
		 * @type      {Array<number|Array<(number|string),number>|*>}
		 * @extends   series.line.data
		 * @product   highcharts highstock
		 * @apioption series.spline.data
		 */

	}(Highcharts));
	(function (H) {
		/* *
		 * (c) 2010-2018 Torstein Honsi
		 *
		 * License: www.highcharts.com/license
		 */



		var areaProto = H.seriesTypes.area.prototype,
		    defaultPlotOptions = H.defaultPlotOptions,
		    LegendSymbolMixin = H.LegendSymbolMixin,
		    seriesType = H.seriesType;

		/**
		 * AreaSpline series type.
		 *
		 * @private
		 * @class
		 * @name Highcharts.seriesTypes.areaspline
		 *
		 * @augments Highcharts.Series
		 */
		seriesType('areaspline', 'spline',

		    /**
		     * The area spline series is an area series where the graph between the
		     * points is smoothed into a spline.
		     *
		     * @sample {highcharts} highcharts/demo/areaspline/
		     *         Area spline chart
		     * @sample {highstock} stock/demo/areaspline/
		     *         Area spline chart
		     *
		     * @extends   plotOptions.area
		     * @excluding step
		     * @product   highcharts highstock
		     * @apioption plotOptions.areaspline
		     */
		    defaultPlotOptions.area
		, {
		    getStackPoints: areaProto.getStackPoints,
		    getGraphPath: areaProto.getGraphPath,
		    drawGraph: areaProto.drawGraph,
		    drawLegendSymbol: LegendSymbolMixin.drawRectangle
		});

		/**
		 * A `areaspline` series. If the [type](#series.areaspline.type) option
		 * is not specified, it is inherited from [chart.type](#chart.type).
		 *
		 *
		 * @extends   series,plotOptions.areaspline
		 * @excluding dataParser, dataURL
		 * @product   highcharts highstock
		 * @apioption series.areaspline
		 */

		/**
		 * An array of data points for the series. For the `areaspline` series
		 * type, points can be given in the following ways:
		 *
		 * 1. An array of numerical values. In this case, the numerical values will be
		 *    interpreted as `y` options. The `x` values will be automatically
		 *    calculated, either starting at 0 and incremented by 1, or from
		 *    `pointStart` and `pointInterval` given in the series options. If the axis
		 *    has categories, these will be used. Example:
		 *    ```js
		 *    data: [0, 5, 3, 5]
		 *    ```
		 *
		 * 2. An array of arrays with 2 values. In this case, the values correspond to
		 *    `x,y`. If the first value is a string, it is applied as the name of the
		 *    point, and the `x` value is inferred.
		 *    ```js
		 *    data: [
		 *        [0, 10],
		 *        [1, 9],
		 *        [2, 3]
		 *    ]
		 *    ```
		 *
		 * 3. 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.areaspline.turboThreshold), this option is not
		 *    available.
		 *    ```js
		 *    data: [{
		 *        x: 1,
		 *        y: 4,
		 *        name: "Point2",
		 *        color: "#00FF00"
		 *    }, {
		 *        x: 1,
		 *        y: 4,
		 *        name: "Point1",
		 *        color: "#FF00FF"
		 *    }]
		 *    ```
		 *
		 * @sample {highcharts} highcharts/chart/reflow-true/
		 *         Numerical values
		 * @sample {highcharts} highcharts/series/data-array-of-arrays/
		 *         Arrays of numeric x and y
		 * @sample {highcharts} highcharts/series/data-array-of-arrays-datetime/
		 *         Arrays of datetime x and y
		 * @sample {highcharts} highcharts/series/data-array-of-name-value/
		 *         Arrays of point.name and y
		 * @sample {highcharts} highcharts/series/data-array-of-objects/
		 *         Config objects
		 *
		 * @type      {Array<number|Array<(number|string),number>|*>}
		 * @extends   series.line.data
		 * @product   highcharts highstock
		 * @apioption series.areaspline.data
		 */

	}(Highcharts));
	(function (H) {
		/* *
		 * (c) 2010-2018 Torstein Honsi
		 *
		 * License: www.highcharts.com/license
		 */



		var seriesType = H.seriesType;

		/**
		 * Bar series type.
		 *
		 * @private
		 * @class
		 * @name Highcharts.seriesTypes.bar
		 *
		 * @augments Highcharts.Series
		 */
		seriesType('bar', 'column',

		    /**
		     * A bar series is a special type of column series where the columns are
		     * horizontal.
		     *
		     * @sample highcharts/demo/bar-basic/
		     *         Bar chart
		     *
		     * @extends   plotOptions.column
		     * @product   highcharts
		     * @apioption plotOptions.bar
		     */

		    /**
		     * Alignment of the data label relative to the data point.
		     *
		     * @sample {highcharts} highcharts/plotoptions/bar-datalabels-align-inside-bar/
		     *         Data labels inside the bar
		     *
		     * @type      {string}
		     * @default   left
		     * @product   highcharts
		     * @apioption plotOptions.bar.dataLabels.align
		     */

		    /**
		     * The x position of the data label relative to the data point.
		     *
		     * @sample {highcharts} highcharts/plotoptions/bar-datalabels-align-inside-bar/
		     *         Data labels inside the bar
		     *
		     * @type      {number}
		     * @default   5
		     * @product   highcharts
		     * @apioption plotOptions.bar.dataLabels.x
		     */

		    /**
		     * @ignore
		     */
		    null

		, {
		    inverted: true
		});


		/**
		 * A `bar` series. If the [type](#series.bar.type) option is not specified,
		 * it is inherited from [chart.type](#chart.type).
		 *
		 * @extends   series,plotOptions.bar
		 * @excluding connectNulls, dashStyle, dataParser, dataURL, gapSize, gapUnit,
		 *            linecap, lineWidth, marker, connectEnds, step
		 * @product   highcharts
		 * @apioption series.bar
		 */

		/**
		 * An array of data points for the series. For the `bar` series type,
		 * points can be given in the following ways:
		 *
		 * 1. An array of numerical values. In this case, the numerical values will be
		 *    interpreted as `y` options. The `x` values will be automatically
		 *    calculated, either starting at 0 and incremented by 1, or from
		 *    `pointStart` and `pointInterval` given in the series options. If the axis
		 *    has categories, these will be used. Example:
		 *    ```js
		 *    data: [0, 5, 3, 5]
		 *    ```
		 *
		 * 2. An array of arrays with 2 values. In this case, the values correspond to
		 *    `x,y`. If the first value is a string, it is applied as the name of the
		 *    point, and the `x` value is inferred.
		 *    ```js
		 *    data: [
		 *        [0, 5],
		 *        [1, 10],
		 *        [2, 3]
		 *    ]
		 *    ```
		 *
		 * 3. 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.bar.turboThreshold), this option is not
		 *    available.
		 *    ```js
		 *    data: [{
		 *        x: 1,
		 *        y: 1,
		 *        name: "Point2",
		 *        color: "#00FF00"
		 *    }, {
		 *        x: 1,
		 *        y: 10,
		 *        name: "Point1",
		 *        color: "#FF00FF"
		 *    }]
		 *    ```
		 *
		 * @sample {highcharts} highcharts/chart/reflow-true/
		 *         Numerical values
		 * @sample {highcharts} highcharts/series/data-array-of-arrays/
		 *         Arrays of numeric x and y
		 * @sample {highcharts} highcharts/series/data-array-of-arrays-datetime/
		 *         Arrays of datetime x and y
		 * @sample {highcharts} highcharts/series/data-array-of-name-value/
		 *         Arrays of point.name and y
		 * @sample {highcharts} highcharts/series/data-array-of-objects/
		 *         Config objects
		 *
		 * @type      {Array<number|Array<(number|string),number>|*>}
		 * @extends   series.column.data
		 * @product   highcharts
		 * @apioption series.bar.data
		 */

		/**
		 * @excluding halo,lineWidth,lineWidthPlus,marker
		 * @product   highcharts highstock
		 * @apioption series.bar.states.hover
		 */

		/**
		 * @excluding halo,lineWidth,lineWidthPlus,marker
		 * @product   highcharts highstock
		 * @apioption series.bar.states.select
		 */

	}(Highcharts));
	(function (H) {
		/* *
		 * (c) 2010-2018 Torstein Honsi
		 *
		 * License: www.highcharts.com/license
		 */



		var defaultPlotOptions = H.defaultPlotOptions,
		    merge = H.merge,
		    seriesType = H.seriesType,
		    seriesTypes = H.seriesTypes;

		/**
		 * A candlestick chart is a style of financial chart used to describe price
		 * movements over time.
		 *
		 * @sample stock/demo/candlestick/
		 *         Candlestick chart
		 *
		 * @extends      plotOptions.ohlc
		 * @excluding    borderColor,borderRadius,borderWidth
		 * @product      highstock
		 * @optionparent plotOptions.candlestick
		 */
		var candlestickOptions = {

		    /**
		     * The specific line color for up candle sticks. The default is to inherit
		     * the general `lineColor` setting.
		     *
		     * @sample {highstock} stock/plotoptions/candlestick-linecolor/
		     *         Candlestick line colors
		     *
		     * @type      {Highcharts.ColorString}
		     * @since     1.3.6
		     * @product   highstock
		     * @apioption plotOptions.candlestick.upLineColor
		     */

		    /**
		     * @type      {string|Function}
		     * @default   ohlc
		     * @product   highstock
		     * @apioption plotOptions.candlestick.dataGrouping.approximation
		     */

		    states: {

		        /**
		         * @extends plotOptions.column.states.hover
		         * @product highstock
		         */
		        hover: {

		            /**
		             * The pixel width of the line/border around the candlestick.
		             *
		             * @product highstock
		             */
		            lineWidth: 2
		        }
		    },

		    /**
		     * @extends plotOptions.ohlc.tooltip
		     */
		    tooltip: defaultPlotOptions.ohlc.tooltip,

		    /**
		     * @type    {number|null}
		     * @product highstock
		     */
		    threshold: null,

		    /**
		     * The color of the line/border of the candlestick.
		     *
		     * In styled mode, the line stroke can be set with the
		     * `.highcharts-candlestick-series .highcahrts-point` rule.
		     *
		     * @see [upLineColor](#plotOptions.candlestick.upLineColor)
		     *
		     * @sample {highstock} stock/plotoptions/candlestick-linecolor/
		     *         Candlestick line colors
		     *
		     * @type    {Highcharts.ColorString}
		     * @default #000000
		     * @product highstock
		     */
		    lineColor: '#000000',

		    /**
		     * The pixel width of the candlestick line/border. Defaults to `1`.
		     *
		     *
		     * In styled mode, the line stroke width can be set with the
		     * `.highcharts-candlestick-series .highcahrts-point` rule.
		     *
		     * @product highstock
		     */
		    lineWidth: 1,

		    /**
		     * The fill color of the candlestick when values are rising.
		     *
		     * In styled mode, the up color can be set with the
		     * `.highcharts-candlestick-series .highcharts-point-up` rule.
		     *
		     * @sample {highstock} stock/plotoptions/candlestick-color/
		     *         Custom colors
		     * @sample {highstock} highcharts/css/candlestick/
		     *         Colors in styled mode
		     *
		     * @type    {Highcharts.ColorString}
		     * @default #ffffff
		     * @product highstock
		     */
		    upColor: '#ffffff',

		    /**
		     * @product highstock
		     */
		    stickyTracking: true

		};

		/**
		 * The candlestick series type.
		 *
		 * @private
		 * @class
		 * @name Highcharts.seriesTypes.candlestick
		 *
		 * @augments Highcharts.seriesTypes.ohlc
		 */
		seriesType('candlestick', 'ohlc', merge(
		    defaultPlotOptions.column,
		    candlestickOptions
		), /** @lends seriesTypes.candlestick */ {

		    /**
		     * Postprocess mapping between options and SVG attributes
		     *
		     * @private
		     * @function Highcharts.seriesTypes.candlestick#pointAttribs
		     *
		     * @param {Highcharts.Point} point
		     *
		     * @param {string} [state]
		     *
		     * @return {Highcharts.SVGAttributes}
		     */
		    pointAttribs: function (point, state) {
		        var attribs = seriesTypes.column.prototype.pointAttribs.call(
		                this,
		                point,
		                state
		            ),
		            options = this.options,
		            isUp = point.open < point.close,
		            stroke = options.lineColor || this.color,
		            stateOptions;

		        attribs['stroke-width'] = options.lineWidth;

		        attribs.fill = point.options.color ||
		            (isUp ? (options.upColor || this.color) : this.color);
		        attribs.stroke = point.lineColor ||
		            (isUp ? (options.upLineColor || stroke) : stroke);

		        // Select or hover states
		        if (state) {
		            stateOptions = options.states[state];
		            attribs.fill = stateOptions.color || attribs.fill;
		            attribs.stroke = stateOptions.lineColor || attribs.stroke;
		            attribs['stroke-width'] =
		                stateOptions.lineWidth || attribs['stroke-width'];
		        }


		        return attribs;
		    },

		    /**
		     * Draw the data points.
		     *
		     * @private
		     * @function Highcharts.seriesTypes.candlestick#drawPoints
		     */
		    drawPoints: function () {
		        var series = this,
		            points = series.points,
		            chart = series.chart,
		            reversedYAxis = series.yAxis.reversed;


		        points.forEach(function (point) {

		            var graphic = point.graphic,
		                plotOpen,
		                plotClose,
		                topBox,
		                bottomBox,
		                hasTopWhisker,
		                hasBottomWhisker,
		                crispCorr,
		                crispX,
		                path,
		                halfWidth,
		                isNew = !graphic;

		            if (point.plotY !== undefined) {

		                if (!graphic) {
		                    point.graphic = graphic = chart.renderer.path()
		                        .add(series.group);
		                }

		                if (!series.chart.styledMode) {
		                    graphic
		                        .attr(
		                            series.pointAttribs(
		                                point,
		                                point.selected && 'select'
		                            )
		                        ) // #3897
		                        .shadow(series.options.shadow);
		                }

		                // Crisp vector coordinates
		                crispCorr = (graphic.strokeWidth() % 2) / 2;
		                crispX = Math.round(point.plotX) - crispCorr; // #2596
		                plotOpen = point.plotOpen;
		                plotClose = point.plotClose;
		                topBox = Math.min(plotOpen, plotClose);
		                bottomBox = Math.max(plotOpen, plotClose);
		                halfWidth = Math.round(point.shapeArgs.width / 2);
		                hasTopWhisker = reversedYAxis ?
		                    bottomBox !== point.yBottom :
		                    Math.round(topBox) !== Math.round(point.plotHigh);
		                hasBottomWhisker = reversedYAxis ?
		                    Math.round(topBox) !== Math.round(point.plotHigh) :
		                    bottomBox !== point.yBottom;
		                topBox = Math.round(topBox) + crispCorr;
		                bottomBox = Math.round(bottomBox) + crispCorr;

		                // Create the path. Due to a bug in Chrome 49, the path is first
		                // instanciated with no values, then the values pushed. For
		                // unknown reasons, instanciating the path array with all the
		                // values would lead to a crash when updating frequently
		                // (#5193).
		                path = [];
		                path.push(
		                    'M',
		                    crispX - halfWidth, bottomBox,
		                    'L',
		                    crispX - halfWidth, topBox,
		                    'L',
		                    crispX + halfWidth, topBox,
		                    'L',
		                    crispX + halfWidth, bottomBox,
		                    'Z', // Ensure a nice rectangle #2602
		                    'M',
		                    crispX, topBox,
		                    'L',
		                    // #460, #2094
		                    crispX, hasTopWhisker ?
		                        Math.round(
		                            reversedYAxis ? point.yBottom : point.plotHigh
		                        ) :
		                        topBox,
		                    'M',
		                    crispX, bottomBox,
		                    'L',
		                    // #460, #2094
		                    crispX, hasBottomWhisker ?
		                        Math.round(
		                            reversedYAxis ? point.plotHigh : point.yBottom
		                        ) :
		                        bottomBox
		                );

		                graphic[isNew ? 'attr' : 'animate']({ d: path })
		                    .addClass(point.getClassName(), true);

		            }
		        });
		    }


		});

		/**
		 * A `candlestick` series. If the [type](#series.candlestick.type)
		 * option is not specified, it is inherited from [chart.type](
		 * #chart.type).
		 *
		 * @type      {*}
		 * @extends   series,plotOptions.candlestick
		 * @excluding dataParser, dataURL
		 * @product   highstock
		 * @apioption series.candlestick
		 */

		/**
		 * An array of data points for the series. For the `candlestick` series
		 * type, points can be given in the following ways:
		 *
		 * 1. An array of arrays with 5 or 4 values. In this case, the values correspond
		 *    to `x,open,high,low,close`. If the first value is a string, it is applied
		 *    as the name of the point, and the `x` value is inferred. The `x` value can
		 *    also be omitted, in which case the inner arrays should be of length 4.
		 *    Then the `x` value is automatically calculated, either starting at 0 and
		 *    incremented by 1, or from `pointStart` and `pointInterval` given in the
		 *    series options.
		 *    ```js
		 *    data: [
		 *        [0, 7, 2, 0, 4],
		 *        [1, 1, 4, 2, 8],
		 *        [2, 3, 3, 9, 3]
		 *    ]
		 *    ```
		 *
		 * 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.
		 *    ```js
		 *    data: [{
		 *        x: 1,
		 *        open: 9,
		 *        high: 2,
		 *        low: 4,
		 *        close: 6,
		 *        name: "Point2",
		 *        color: "#00FF00"
		 *    }, {
		 *        x: 1,
		 *        open: 1,
		 *        high: 4,
		 *        low: 7,
		 *        close: 7,
		 *        name: "Point1",
		 *        color: "#FF00FF"
		 *    }]
		 *    ```
		 *
		 * @type      {Array<Array<(number|string),number,number,number>|Array<(number|string),number,number,number,number>|*>}
		 * @extends   series.ohlc.data
		 * @excluding y
		 * @product   highstock
		 * @apioption series.candlestick.data
		 */

	}(Highcharts));
	(function (H) {
		/* *
		 *
		 *  (c) 2010-2018 Torstein Honsi
		 *
		 *  License: www.highcharts.com/license
		 *
		 * */



		var addEvent = H.addEvent,
		    arrayMax = H.arrayMax,
		    arrayMin = H.arrayMin,
		    Axis = H.Axis,
		    defaultPlotOptions = H.defaultPlotOptions,
		    defined = H.defined,
		    extend = H.extend,
		    format = H.format,
		    isNumber = H.isNumber,
		    merge = H.merge,
		    pick = H.pick,
		    Point = H.Point,
		    Series = H.Series,
		    Tooltip = H.Tooltip,
		    wrap = H.wrap;

		/* ************************************************************************** *
		 *  Start data grouping module                                                *
		 * ************************************************************************** */

		/**
		 * Data grouping is the concept of sampling the data values into larger
		 * blocks in order to ease readability and increase performance of the
		 * JavaScript charts. Highstock by default applies data grouping when
		 * the points become closer than a certain pixel value, determined by
		 * the `groupPixelWidth` option.
		 *
		 * If data grouping is applied, the grouping information of grouped
		 * points can be read from the [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
		 */

		/**
		 * The method of approximation inside a group. When for example 30 days
		 * are grouped into one month, this determines what value should represent
		 * the group. Possible values are "average", "averages", "open", "high",
		 * "low", "close" and "sum". For OHLC and candlestick series the approximation
		 * is "ohlc" by default, which finds the open, high, low and close values
		 * within all the grouped data. For ranges, the approximation is "range",
		 * which finds the low and high values. For multi-dimensional data,
		 * like ranges and OHLC, "averages" will compute the average for each
		 * dimension.
		 *
		 * Custom aggregate methods can be added by assigning a callback function
		 * as the approximation. This function takes a numeric array as the
		 * argument and should return a single numeric value or `null`. Note
		 * that the numeric array will never contain null values, only true
		 * numbers. Instead, if null values are present in the raw data, the
		 * numeric array will have an `.hasNulls` property set to `true`. For
		 * single-value data sets the data is available in the first argument
		 * of the callback function. For OHLC data sets, all the open values
		 * are in the first argument, all high values in the second etc.
		 *
		 * Since v4.2.7, grouping meta data is available in the approximation
		 * callback from `this.dataGroupInfo`. It can be used to extract information
		 * from the raw data.
		 *
		 * Defaults to `average` for line-type series, `sum` for columns, `range`
		 * for range series and `ohlc` for OHLC and candlestick.
		 *
		 * @sample {highstock} stock/plotoptions/series-datagrouping-approximation
		 *         Approximation callback with custom data
		 *
		 * @type       {string|Function}
		 * @validvalue ["average", "averages", "open", "high", "low", "close", "sum"]
		 * @product    highstock
		 * @apioption  plotOptions.series.dataGrouping.approximation
		 */

		/**
		 * Datetime formats for the header of the tooltip in a stock chart.
		 * The format can vary within a chart depending on the currently selected
		 * time range and the current data grouping.
		 *
		 * The default formats are:
		 *
		 * <pre>{
		 *     millisecond: [
		 *         '%A, %b %e, %H:%M:%S.%L', '%A, %b %e, %H:%M:%S.%L', '-%H:%M:%S.%L'
		 *     ],
		 *     second: ['%A, %b %e, %H:%M:%S', '%A, %b %e, %H:%M:%S', '-%H:%M:%S'],
		 *     minute: ['%A, %b %e, %H:%M', '%A, %b %e, %H:%M', '-%H:%M'],
		 *     hour: ['%A, %b %e, %H:%M', '%A, %b %e, %H:%M', '-%H:%M'],
		 *     day: ['%A, %b %e, %Y', '%A, %b %e', '-%A, %b %e, %Y'],
		 *     week: ['Week from %A, %b %e, %Y', '%A, %b %e', '-%A, %b %e, %Y'],
		 *     month: ['%B %Y', '%B', '-%B %Y'],
		 *     year: ['%Y', '%Y', '-%Y']
		 * }</pre>
		 *
		 * For each of these array definitions, the first item is the format
		 * used when the active time span is one unit. For instance, if the
		 * current data applies to one week, the first item of the week array
		 * is used. The second and third items are used when the active time
		 * span is more than two units. For instance, if the current data applies
		 * to two weeks, the second and third item of the week array are used,
		 *  and applied to the start and end date of the time span.
		 *
		 * @type      {object}
		 * @product   highstock
		 * @apioption plotOptions.series.dataGrouping.dateTimeLabelFormats
		 */

		/**
		 * Enable or disable data grouping.
		 *
		 * @type      {boolean}
		 * @default   true
		 * @product   highstock
		 * @apioption plotOptions.series.dataGrouping.enabled
		 */

		/**
		 * When data grouping is forced, it runs no matter how small the intervals
		 * are. This can be handy for example when the sum should be calculated
		 * for values appearing at random times within each hour.
		 *
		 * @type      {boolean}
		 * @default   false
		 * @product   highstock
		 * @apioption plotOptions.series.dataGrouping.forced
		 */

		/**
		 * The approximate pixel width of each group. If for example a series
		 * with 30 points is displayed over a 600 pixel wide plot area, no grouping
		 * is performed. If however the series contains so many points that
		 * the spacing is less than the groupPixelWidth, Highcharts will try
		 * to group it into appropriate groups so that each is more or less
		 * two pixels wide. If multiple series with different group pixel widths
		 * are drawn on the same x axis, all series will take the greatest width.
		 * For example, line series have 2px default group width, while column
		 * series have 10px. If combined, both the line and the column will
		 * have 10px by default.
		 *
		 * @type      {number}
		 * @default   2
		 * @product   highstock
		 * @apioption plotOptions.series.dataGrouping.groupPixelWidth
		 */

		 /**
		 * By default only points within the visible range are grouped. Enabling this
		 * option will force data grouping to calculate all grouped points for a given
		 * dataset. That option prevents for example a column series from calculating
		 * a grouped point partially. The effect is similar to
		 * [Series.getExtremesFromAll](#plotOptions.series.getExtremesFromAll) but does
		 * not affect yAxis extremes.
		 *
		 * @sample {highstock} stock/plotoptions/series-datagrouping-groupall/
		 *         Two series with the same data but different groupAll setting
		 *
		 * @type      {boolean}
		 * @default   false
		 * @since     6.1.0
		 * @product   highstock
		 * @apioption plotOptions.series.dataGrouping.groupAll
		 */

		/**
		 * Normally, a group is indexed by the start of that group, so for example
		 * when 30 daily values are grouped into one month, that month's x value
		 * will be the 1st of the month. This apparently shifts the data to
		 * the left. When the smoothed option is true, this is compensated for.
		 * The data is shifted to the middle of the group, and min and max
		 * values are preserved. Internally, this is used in the Navigator series.
		 *
		 * @type      {boolean}
		 * @default   false
		 * @product   highstock
		 * @apioption plotOptions.series.dataGrouping.smoothed
		 */

		/**
		 * An array determining what time intervals the data is allowed to be
		 * grouped to. Each array item is an array where the first value is
		 * the time unit and the second value another array of allowed multiples.
		 * Defaults to:
		 *
		 * <pre>units: [[
		 *     'millisecond', // unit name
		 *     [1, 2, 5, 10, 20, 25, 50, 100, 200, 500] // allowed multiples
		 * ], [
		 *     'second',
		 *     [1, 2, 5, 10, 15, 30]
		 * ], [
		 *     'minute',
		 *     [1, 2, 5, 10, 15, 30]
		 * ], [
		 *     'hour',
		 *     [1, 2, 3, 4, 6, 8, 12]
		 * ], [
		 *     'day',
		 *     [1]
		 * ], [
		 *     'week',
		 *     [1]
		 * ], [
		 *     'month',
		 *     [1, 3, 6]
		 * ], [
		 *     'year',
		 *     null
		 * ]]</pre>
		 *
		 * @type      {Array<Array<string,(Array<number>|null)>>}
		 * @product   highstock
		 * @apioption plotOptions.series.dataGrouping.units
		 */

		/**
		 * The approximate pixel width of each group. If for example a series
		 * with 30 points is displayed over a 600 pixel wide plot area, no grouping
		 * is performed. If however the series contains so many points that
		 * the spacing is less than the groupPixelWidth, Highcharts will try
		 * to group it into appropriate groups so that each is more or less
		 * two pixels wide. Defaults to `10`.
		 *
		 * @sample {highstock} stock/plotoptions/series-datagrouping-grouppixelwidth/
		 *         Two series with the same data density but different groupPixelWidth
		 *
		 * @type      {number}
		 * @default   10
		 * @product   highstock
		 * @apioption plotOptions.column.dataGrouping.groupPixelWidth
		 */

		var seriesProto = Series.prototype,
		    baseProcessData = seriesProto.processData,
		    baseGeneratePoints = seriesProto.generatePoints,

		    /**
		     * @ignore
		     */
		    commonOptions = {
		        approximation: 'average', // average, open, high, low, close, sum
		        // enabled: null, // (true for stock charts, false for basic),
		        // forced: undefined,
		        groupPixelWidth: 2,
		        // the first one is the point or start value, the second is the start
		        // value if we're dealing with range, the third one is the end value if
		        // dealing with a range
		        dateTimeLabelFormats: {
		            millisecond: [
		                '%A, %b %e, %H:%M:%S.%L',
		                '%A, %b %e, %H:%M:%S.%L',
		                '-%H:%M:%S.%L'
		            ],
		            second: [
		                '%A, %b %e, %H:%M:%S',
		                '%A, %b %e, %H:%M:%S',
		                '-%H:%M:%S'
		            ],
		            minute: [
		                '%A, %b %e, %H:%M',
		                '%A, %b %e, %H:%M',
		                '-%H:%M'
		            ],
		            hour: [
		                '%A, %b %e, %H:%M',
		                '%A, %b %e, %H:%M',
		                '-%H:%M'
		            ],
		            day: [
		                '%A, %b %e, %Y',
		                '%A, %b %e',
		                '-%A, %b %e, %Y'
		            ],
		            week: [
		                'Week from %A, %b %e, %Y',
		                '%A, %b %e',
		                '-%A, %b %e, %Y'
		            ],
		            month: [
		                '%B %Y',
		                '%B',
		                '-%B %Y'
		            ],
		            year: [
		                '%Y',
		                '%Y',
		                '-%Y'
		            ]
		        }
		        // smoothed = false, // enable this for navigator series only
		    },

		    specificOptions = { // extends common options
		        line: {},
		        spline: {},
		        area: {},
		        areaspline: {},
		        column: {
		            approximation: 'sum',
		            groupPixelWidth: 10
		        },
		        arearange: {
		            approximation: 'range'
		        },
		        areasplinerange: {
		            approximation: 'range'
		        },
		        columnrange: {
		            approximation: 'range',
		            groupPixelWidth: 10
		        },
		        candlestick: {
		            approximation: 'ohlc',
		            groupPixelWidth: 10
		        },
		        ohlc: {
		            approximation: 'ohlc',
		            groupPixelWidth: 5
		        }
		    },

		    // units are defined in a separate array to allow complete overriding in
		    // case of a user option
		    defaultDataGroupingUnits = H.defaultDataGroupingUnits = [
		        [
		            'millisecond', // unit name
		            [1, 2, 5, 10, 20, 25, 50, 100, 200, 500] // allowed multiples
		        ], [
		            'second',
		            [1, 2, 5, 10, 15, 30]
		        ], [
		            'minute',
		            [1, 2, 5, 10, 15, 30]
		        ], [
		            'hour',
		            [1, 2, 3, 4, 6, 8, 12]
		        ], [
		            'day',
		            [1]
		        ], [
		            'week',
		            [1]
		        ], [
		            'month',
		            [1, 3, 6]
		        ], [
		            'year',
		            null
		        ]
		    ],


		    /**
		     * Define the available approximation types. The data grouping
		     * approximations takes an array or numbers as the first parameter. In case
		     * of ohlc, four arrays are sent in as four parameters. Each array consists
		     * only of numbers. In case null values belong to the group, the property
		     * .hasNulls will be set to true on the array.
		     *
		     * @product highstock
		     *
		     * @private
		     * @name Highcharts.approximations
		     * @type {Highcharts.Dictionary<Function>}
		     */
		    approximations = H.approximations = {
		        sum: function (arr) {
		            var len = arr.length,
		                ret;

		            // 1. it consists of nulls exclusively
		            if (!len && arr.hasNulls) {
		                ret = null;
		            // 2. it has a length and real values
		            } else if (len) {
		                ret = 0;
		                while (len--) {
		                    ret += arr[len];
		                }
		            }
		            // 3. it has zero length, so just return undefined
		            // => doNothing()

		            return ret;
		        },
		        average: function (arr) {
		            var len = arr.length,
		                ret = approximations.sum(arr);

		            // If we have a number, return it divided by the length. If not,
		            // return null or undefined based on what the sum method finds.
		            if (isNumber(ret) && len) {
		                ret = ret / len;
		            }

		            return ret;
		        },
		        // The same as average, but for series with multiple values, like area
		        // ranges.
		        averages: function () { // #5479
		            var ret = [];

		            [].forEach.call(arguments, function (arr) {
		                ret.push(approximations.average(arr));
		            });

		            // Return undefined when first elem. is undefined and let
		            // sum method handle null (#7377)
		            return ret[0] === undefined ? undefined : ret;
		        },
		        open: function (arr) {
		            return arr.length ? arr[0] : (arr.hasNulls ? null : undefined);
		        },
		        high: function (arr) {
		            return arr.length ?
		                arrayMax(arr) :
		                (arr.hasNulls ? null : undefined);
		        },
		        low: function (arr) {
		            return arr.length ?
		                arrayMin(arr) :
		                (arr.hasNulls ? null : undefined);
		        },
		        close: function (arr) {
		            return arr.length ?
		                arr[arr.length - 1] :
		                (arr.hasNulls ? null : undefined);
		        },
		        // ohlc and range are special cases where a multidimensional array is
		        // input and an array is output
		        ohlc: function (open, high, low, close) {
		            open = approximations.open(open);
		            high = approximations.high(high);
		            low = approximations.low(low);
		            close = approximations.close(close);

		            if (
		                isNumber(open) ||
		                isNumber(high) ||
		                isNumber(low) ||
		                isNumber(close)
		            ) {
		                return [open, high, low, close];
		            }
		            // else, return is undefined
		        },
		        range: function (low, high) {
		            low = approximations.low(low);
		            high = approximations.high(high);

		            if (isNumber(low) || isNumber(high)) {
		                return [low, high];
		            } else if (low === null && high === null) {
		                return null;
		            }
		            // else, return is undefined
		        }
		    };

		/**
		 * Takes parallel arrays of x and y data and groups the data into intervals
		 * defined by groupPositions, a collection of starting x values for each group.
		 *
		 * @private
		 * @function Highcharts.Series#groupData
		 *
		 * @param {Array<number>} xData
		 *
		 * @param {Array<number>} yData
		 *
		 * @param {boolean} groupPositions
		 *
		 * @param {string|Function} approximation
		 *
		 * @return {Array<Array<number>,Array<number>,Array<object>>}
		 */
		seriesProto.groupData = function (xData, yData, groupPositions, approximation) {
		    var series = this,
		        data = series.data,
		        dataOptions = series.options.data,
		        groupedXData = [],
		        groupedYData = [],
		        groupMap = [],
		        dataLength = xData.length,
		        pointX,
		        pointY,
		        groupedY,
		        // when grouping the fake extended axis for panning,
		        // we don't need to consider y
		        handleYData = !!yData,
		        values = [],
		        approximationFn = typeof approximation === 'function' ?
		            approximation :
		            approximations[approximation] ||
		                // if the approximation is not found use default series type
		                // approximation (#2914)
		                (
		                    specificOptions[series.type] &&
		                    approximations[specificOptions[series.type].approximation]
		                ) || approximations[commonOptions.approximation],
		        pointArrayMap = series.pointArrayMap,
		        pointArrayMapLength = pointArrayMap && pointArrayMap.length,
		        extendedPointArrayMap = ['x'].concat(pointArrayMap || ['y']),
		        pos = 0,
		        start = 0,
		        valuesLen,
		        i, j;

		    // Calculate values array size from pointArrayMap length
		    if (pointArrayMapLength) {
		        pointArrayMap.forEach(function () {
		            values.push([]);
		        });
		    } else {
		        values.push([]);
		    }
		    valuesLen = pointArrayMapLength || 1;

		    // Start with the first point within the X axis range (#2696)
		    for (i = 0; i <= dataLength; i++) {
		        if (xData[i] >= groupPositions[0]) {
		            break;
		        }
		    }

		    for (i; i <= dataLength; i++) {

		        // when a new group is entered, summarize and initiate
		        // the previous group
		        while ((
		                    groupPositions[pos + 1] !== undefined &&
		                    xData[i] >= groupPositions[pos + 1]
		                ) || i === dataLength) { // get the last group

		            // get group x and y
		            pointX = groupPositions[pos];
		            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.
		                extendedPointArrayMap.forEach(function (key) {
		                    delete series.dataGroupInfo.options[key];
		                });
		            }

		            // push the grouped data
		            if (groupedY !== undefined) {
		                groupedXData.push(pointX);
		                groupedYData.push(groupedY);
		                groupMap.push(series.dataGroupInfo);
		            }

		            // reset the aggregate arrays
		            start = i;
		            for (j = 0; j < valuesLen; j++) {
		                values[j].length = 0; // faster than values[j] = []
		                values[j].hasNulls = false;
		            }

		            // Advance on the group positions
		            pos += 1;

		            // don't loop beyond the last group
		            if (i === dataLength) {
		                break;
		            }
		        }

		        // break out
		        if (i === dataLength) {
		            break;
		        }

		        // for each raw data point, push it to an array that contains all values
		        // for this specific group
		        if (pointArrayMap) {

		            var index = series.cropStart + i,
		                point = (data && data[index]) ||
		                    series.pointClass.prototype.applyOptions.apply({
		                        series: series
		                    }, [dataOptions[index]]),
		                val;

		            for (j = 0; j < pointArrayMapLength; j++) {
		                val = point[pointArrayMap[j]];
		                if (isNumber(val)) {
		                    values[j].push(val);
		                } else if (val === null) {
		                    values[j].hasNulls = true;
		                }
		            }

		        } else {
		            pointY = handleYData ? yData[i] : null;

		            if (isNumber(pointY)) {
		                values[0].push(pointY);
		            } else if (pointY === null) {
		                values[0].hasNulls = true;
		            }
		        }
		    }

		    return [groupedXData, groupedYData, groupMap];
		};

		// Extend the basic processData method, that crops the data to the current zoom
		// range, with data grouping logic.
		seriesProto.processData = function () {
		    var series = this,
		        chart = series.chart,
		        options = series.options,
		        dataGroupingOptions = options.dataGrouping,
		        groupingEnabled = series.allowDG !== false && dataGroupingOptions &&
		            pick(dataGroupingOptions.enabled, chart.options.isStock),
		        visible = series.visible || !chart.options.chart.ignoreHiddenSeries,
		        hasGroupedData,
		        skip,
		        lastDataGrouping = this.currentDataGrouping,
		        currentDataGrouping,
		        croppedData;

		    // Run base method
		    series.forceCrop = groupingEnabled; // #334
		    series.groupPixelWidth = null; // #2110
		    series.hasProcessed = true; // #2692

		    // Skip if processData returns false or if grouping is disabled (in that
		    // order)
		    skip = (
		        baseProcessData.apply(series, arguments) === false ||
		        !groupingEnabled
		    );
		    if (!skip) {
		        series.destroyGroupedData();

		        var i,
		            processedXData = dataGroupingOptions.groupAll ? series.xData :
		                series.processedXData,
		            processedYData = dataGroupingOptions.groupAll ? series.yData :
		                series.processedYData,
		            plotSizeX = chart.plotSizeX,
		            xAxis = series.xAxis,
		            ordinal = xAxis.options.ordinal,
		            groupPixelWidth = series.groupPixelWidth =
		                xAxis.getGroupPixelWidth && xAxis.getGroupPixelWidth();

		        // Execute grouping if the amount of points is greater than the limit
		        // defined in groupPixelWidth
		        if (groupPixelWidth) {
		            hasGroupedData = true;

		            // Force recreation of point instances in series.translate, #5699
		            series.isDirty = true;
		            series.points = null; // #6709

		            var extremes = xAxis.getExtremes(),
		                xMin = extremes.min,
		                xMax = extremes.max,
		                groupIntervalFactor = (
		                    ordinal &&
		                    xAxis.getGroupIntervalFactor(xMin, xMax, series)
		                ) || 1,
		                interval =
		                    (groupPixelWidth * (xMax - xMin) / plotSizeX) *
		                    groupIntervalFactor,
		                groupPositions = xAxis.getTimeTicks(
		                    xAxis.normalizeTimeTickInterval(
		                        interval,
		                        dataGroupingOptions.units || defaultDataGroupingUnits
		                    ),
		                    // Processed data may extend beyond axis (#4907)
		                    Math.min(xMin, processedXData[0]),
		                    Math.max(xMax, processedXData[processedXData.length - 1]),
		                    xAxis.options.startOfWeek,
		                    processedXData,
		                    series.closestPointRange
		                ),
		                groupedData = seriesProto.groupData.apply(
		                    series,
		                    [
		                        processedXData,
		                        processedYData,
		                        groupPositions,
		                        dataGroupingOptions.approximation
		                    ]),
		                groupedXData = groupedData[0],
		                groupedYData = groupedData[1];

		            // Prevent the smoothed data to spill out left and right, and make
		            // sure data is not shifted to the left
		            if (dataGroupingOptions.smoothed && groupedXData.length) {
		                i = groupedXData.length - 1;
		                groupedXData[i] = Math.min(groupedXData[i], xMax);
		                while (i-- && i > 0) {
		                    groupedXData[i] += interval / 2;
		                }
		                groupedXData[0] = Math.max(groupedXData[0], xMin);
		            }

		            // Record what data grouping values were used
		            currentDataGrouping = groupPositions.info;
		            series.closestPointRange = groupPositions.info.totalRange;
		            series.groupMap = groupedData[2];

		            // Make sure the X axis extends to show the first group (#2533)
		            // But only for visible series (#5493, #6393)
		            if (
		                defined(groupedXData[0]) &&
		                groupedXData[0] < xAxis.dataMin &&
		                visible
		            ) {
		                if (
		                    (
		                        !defined(xAxis.options.min) &&
		                        xAxis.min <= xAxis.dataMin
		                    ) ||
		                    xAxis.min === xAxis.dataMin
		                ) {
		                    xAxis.min = groupedXData[0];
		                }
		                xAxis.dataMin = groupedXData[0];
		            }

		            // We calculated all group positions but we should render
		            // only the ones within the visible range
		            if (dataGroupingOptions.groupAll) {
		                croppedData = series.cropData(
		                    groupedXData,
		                    groupedYData,
		                    xAxis.min,
		                    xAxis.max,
		                    1 // Ordinal xAxis will remove left-most points otherwise
		                );
		                groupedXData = croppedData.xData;
		                groupedYData = croppedData.yData;
		            }
		            // Set series props
		            series.processedXData = groupedXData;
		            series.processedYData = groupedYData;
		        } else {
		            series.groupMap = null;
		        }
		        series.hasGroupedData = hasGroupedData;
		        series.currentDataGrouping = currentDataGrouping;

		        series.preventGraphAnimation =
		            (lastDataGrouping && lastDataGrouping.totalRange) !==
		            (currentDataGrouping && currentDataGrouping.totalRange);
		    }
		};

		// Destroy the grouped data points. #622, #740
		seriesProto.destroyGroupedData = function () {

		    var groupedData = this.groupedData;

		    // clear previous groups
		    (groupedData || []).forEach(function (point, i) {
		        if (point) {
		            groupedData[i] = point.destroy ? point.destroy() : null;
		        }
		    });
		    this.groupedData = null;
		};

		// Override the generatePoints method by adding a reference to grouped data
		seriesProto.generatePoints = function () {

		    baseGeneratePoints.apply(this);

		    // Record grouped data in order to let it be destroyed the next time
		    // processData runs
		    this.destroyGroupedData(); // #622
		    this.groupedData = this.hasGroupedData ? this.points : null;
		};

		// Override point prototype to throw a warning when trying to update grouped
		// points.
		addEvent(Point, 'update', function () {
		    if (this.dataGroup) {
		        H.error(24, false, this.series.chart);
		        return false;
		    }
		});

		// Extend the original method, make the tooltip's header reflect the grouped
		// range.
		wrap(Tooltip.prototype, 'tooltipFooterHeaderFormatter', function (
		    proceed,
		    labelConfig,
		    isFooter
		) {
		    var tooltip = this,
		        time = this.chart.time,
		        series = labelConfig.series,
		        options = series.options,
		        tooltipOptions = series.tooltipOptions,
		        dataGroupingOptions = options.dataGrouping,
		        xDateFormat = tooltipOptions.xDateFormat,
		        xDateFormatEnd,
		        xAxis = series.xAxis,
		        currentDataGrouping,
		        dateTimeLabelFormats,
		        labelFormats,
		        formattedKey,
		        formatString = tooltipOptions[
		            (isFooter ? 'footer' : 'header') + 'Format'
		        ];

		    // apply only to grouped series
		    if (
		        xAxis &&
		        xAxis.options.type === 'datetime' &&
		        dataGroupingOptions &&
		        isNumber(labelConfig.key)
		    ) {

		        // set variables
		        currentDataGrouping = series.currentDataGrouping;
		        dateTimeLabelFormats = dataGroupingOptions.dateTimeLabelFormats;

		        // if we have grouped data, use the grouping information to get the
		        // right format
		        if (currentDataGrouping) {
		            labelFormats = dateTimeLabelFormats[currentDataGrouping.unitName];
		            if (currentDataGrouping.count === 1) {
		                xDateFormat = labelFormats[0];
		            } else {
		                xDateFormat = labelFormats[1];
		                xDateFormatEnd = labelFormats[2];
		            }
		        // if not grouped, and we don't have set the xDateFormat option, get the
		        // best fit, so if the least distance between points is one minute, show
		        // it, but if the least distance is one day, skip hours and minutes etc.
		        } else if (!xDateFormat && dateTimeLabelFormats) {
		            xDateFormat = tooltip.getXDateFormat(
		                labelConfig,
		                tooltipOptions,
		                xAxis
		            );
		        }

		        // now format the key
		        formattedKey = time.dateFormat(xDateFormat, labelConfig.key);
		        if (xDateFormatEnd) {
		            formattedKey += time.dateFormat(
		                xDateFormatEnd,
		                labelConfig.key + currentDataGrouping.totalRange - 1
		            );
		        }

		        // Replace default header style with class name
		        if (series.chart.styledMode) {
		            formatString = this.styledModeFormat(formatString);
		        }

		        // return the replaced format
		        return format(
		            formatString, {
		                point: extend(labelConfig.point, { key: formattedKey }),
		                series: series
		            },
		            time
		        );

		    }

		    // else, fall back to the regular formatter
		    return proceed.call(tooltip, labelConfig, isFooter);
		});

		// Destroy grouped data on series destroy
		addEvent(Series, 'destroy', seriesProto.destroyGroupedData);


		// Handle default options for data grouping. This must be set at runtime because
		// some series types are defined after this.
		addEvent(Series, 'afterSetOptions', function (e) {

		    var options = e.options,
		        type = this.type,
		        plotOptions = this.chart.options.plotOptions,
		        defaultOptions = defaultPlotOptions[type].dataGrouping,
		        // External series, for example technical indicators should also
		        // inherit commonOptions which are not available outside this module
		        baseOptions = this.useCommonDataGrouping && commonOptions;

		    if (specificOptions[type] || baseOptions) { // #1284
		        if (!defaultOptions) {
		            defaultOptions = merge(commonOptions, specificOptions[type]);
		        }

		        options.dataGrouping = merge(
		            baseOptions,
		            defaultOptions,
		            plotOptions.series && plotOptions.series.dataGrouping, // #1228
		            plotOptions[type].dataGrouping, // Set by the StockChart constructor
		            this.userOptions.dataGrouping
		        );
		    }

		    if (this.chart.options.isStock) {
		        this.requireSorting = true;
		    }
		});


		// When resetting the scale reset the hasProccessed flag to avoid taking
		// previous data grouping of neighbour series into accound when determining
		// group pixel width (#2692).
		addEvent(Axis, 'afterSetScale', function () {
		    this.series.forEach(function (series) {
		        series.hasProcessed = false;
		    });
		});

		// Get the data grouping pixel width based on the greatest defined individual
		// width of the axis' series, and if whether one of the axes need grouping.
		Axis.prototype.getGroupPixelWidth = function () {

		    var series = this.series,
		        len = series.length,
		        i,
		        groupPixelWidth = 0,
		        doGrouping = false,
		        dataLength,
		        dgOptions;

		    // If multiple series are compared on the same x axis, give them the same
		    // group pixel width (#334)
		    i = len;
		    while (i--) {
		        dgOptions = series[i].options.dataGrouping;
		        if (dgOptions) {
		            groupPixelWidth = Math.max(
		                groupPixelWidth,
		                dgOptions.groupPixelWidth
		            );

		        }
		    }

		    // If one of the series needs grouping, apply it to all (#1634)
		    i = len;
		    while (i--) {
		        dgOptions = series[i].options.dataGrouping;

		        if (dgOptions && series[i].hasProcessed) { // #2692

		            dataLength = (series[i].processedXData || series[i].data).length;

		            // Execute grouping if the amount of points is greater than the
		            // limit defined in groupPixelWidth
		            if (
		                series[i].groupPixelWidth ||
		                dataLength > (this.chart.plotSizeX / groupPixelWidth) ||
		                (dataLength && dgOptions.forced)
		            ) {
		                doGrouping = true;
		            }
		        }
		    }

		    return doGrouping ? groupPixelWidth : 0;
		};

		/**
		 * Highstock only. Force data grouping on all the axis' series.
		 *
		 * @product highstock
		 *
		 * @function Highcharts.Axis#setDataGrouping
		 *
		 * @param {boolean|Highcharts.PlotSeriesDataGroupingOptions} [dataGrouping]
		 *        A `dataGrouping` configuration. Use `false` to disable data grouping
		 *        dynamically.
		 *
		 * @param {boolean} [redraw=true]
		 *        Whether to redraw the chart or wait for a later call to
		 *        {@link Chart#redraw}.
		 */
		Axis.prototype.setDataGrouping = function (dataGrouping, redraw) {
		    var i;

		    redraw = pick(redraw, true);

		    if (!dataGrouping) {
		        dataGrouping = {
		            forced: false,
		            units: null
		        };
		    }

		    // Axis is instantiated, update all series
		    if (this instanceof Axis) {
		        i = this.series.length;
		        while (i--) {
		            this.series[i].update({
		                dataGrouping: dataGrouping
		            }, false);
		        }

		    // Axis not yet instanciated, alter series options
		    } else {
		        this.chart.options.series.forEach(function (seriesOptions) {
		            seriesOptions.dataGrouping = dataGrouping;
		        }, false);
		    }

		    // Clear ordinal slope, so we won't accidentaly use the old one (#7827)
		    this.ordinalSlope = null;

		    if (redraw) {
		        this.chart.redraw();
		    }
		};



		/* ************************************************************************** *
		 *  End data grouping module                                                  *
		 * ************************************************************************** */

	}(Highcharts));
	(function (H) {
		/**
		 * (c) 2010-2018 Torstein Honsi
		 *
		 * License: www.highcharts.com/license
		 */



		var addEvent = H.addEvent,
		    arrayMax = H.arrayMax,
		    defined = H.defined,
		    extend = H.extend,
		    format = H.format,
		    merge = H.merge,
		    noop = H.noop,
		    pick = H.pick,
		    relativeLength = H.relativeLength,
		    Series = H.Series,
		    seriesTypes = H.seriesTypes,
		    stableSort = H.stableSort,
		    isArray = H.isArray,
		    splat = H.splat;

		/**
		 * General distribution algorithm for distributing labels of differing size
		 * along a confined length in two dimensions. The algorithm takes an array of
		 * objects containing a size, a target and a rank. It will place the labels as
		 * close as possible to their targets, skipping the lowest ranked labels if
		 * necessary.
		 *
		 * @private
		 * @function Highcharts.distribute
		 *
		 * @param {Array<object>} boxes
		 *
		 * @param {number} len
		 *
		 * @param {number} maxDistance
		 */
		H.distribute = function (boxes, len, maxDistance) {

		    var i,
		        overlapping = true,
		        origBoxes = boxes, // Original array will be altered with added .pos
		        restBoxes = [], // The outranked overshoot
		        box,
		        target,
		        total = 0,
		        reducedLen = origBoxes.reducedLen || len;

		    function sortByTarget(a, b) {
		        return a.target - b.target;
		    }

		    // If the total size exceeds the len, remove those boxes with the lowest
		    // rank
		    i = boxes.length;
		    while (i--) {
		        total += boxes[i].size;
		    }

		    // Sort by rank, then slice away overshoot
		    if (total > reducedLen) {
		        stableSort(boxes, function (a, b) {
		            return (b.rank || 0) - (a.rank || 0);
		        });
		        i = 0;
		        total = 0;
		        while (total <= reducedLen) {
		            total += boxes[i].size;
		            i++;
		        }
		        restBoxes = boxes.splice(i - 1, boxes.length);
		    }

		    // Order by target
		    stableSort(boxes, sortByTarget);


		    // So far we have been mutating the original array. Now
		    // create a copy with target arrays
		    boxes = boxes.map(function (box) {
		        return {
		            size: box.size,
		            targets: [box.target],
		            align: pick(box.align, 0.5)
		        };
		    });

		    while (overlapping) {
		        // Initial positions: target centered in box
		        i = boxes.length;
		        while (i--) {
		            box = boxes[i];
		            // Composite box, average of targets
		            target = (
		                Math.min.apply(0, box.targets) +
		                Math.max.apply(0, box.targets)
		            ) / 2;
		            box.pos = Math.min(
		                Math.max(0, target - box.size * box.align),
		                len - box.size
		            );
		        }

		        // Detect overlap and join boxes
		        i = boxes.length;
		        overlapping = false;
		        while (i--) {
		            // Overlap
		            if (i > 0 && boxes[i - 1].pos + boxes[i - 1].size > boxes[i].pos) {
		                // Add this size to the previous box
		                boxes[i - 1].size += boxes[i].size;
		                boxes[i - 1].targets = boxes[i - 1]
		                    .targets
		                    .concat(boxes[i].targets);
		                boxes[i - 1].align = 0.5;

		                // Overlapping right, push left
		                if (boxes[i - 1].pos + boxes[i - 1].size > len) {
		                    boxes[i - 1].pos = len - boxes[i - 1].size;
		                }
		                boxes.splice(i, 1); // Remove this item
		                overlapping = true;
		            }
		        }
		    }

		    // Add the rest (hidden boxes)
		    origBoxes.push.apply(origBoxes, restBoxes);


		    // Now the composite boxes are placed, we need to put the original boxes
		    // within them
		    i = 0;
		    boxes.some(function (box) {
		        var posInCompositeBox = 0;
		        if (box.targets.some(function () {
		            origBoxes[i].pos = box.pos + posInCompositeBox;

		            // If the distance between the position and the target exceeds
		            // maxDistance, abort the loop and decrease the length in increments
		            // of 10% to recursively reduce the  number of visible boxes by
		            // rank. Once all boxes are within the maxDistance, we're good.
		            if (
		                Math.abs(origBoxes[i].pos - origBoxes[i].target) >
		                maxDistance
		            ) {
		                // Reset the positions that are already set
		                origBoxes.slice(0, i + 1).forEach(function (box) {
		                    delete box.pos;
		                });

		                // Try with a smaller length
		                origBoxes.reducedLen =
		                    (origBoxes.reducedLen || len) - (len * 0.1);

		                // Recurse
		                if (origBoxes.reducedLen > len * 0.1) {
		                    H.distribute(origBoxes, len, maxDistance);
		                }

		                // Exceeded maxDistance => abort
		                return true;
		            }

		            posInCompositeBox += origBoxes[i].size;
		            i++;

		        })) {
		            // Exceeded maxDistance => abort
		            return true;
		        }
		    });

		    // Add the rest (hidden) boxes and sort by target
		    stableSort(origBoxes, sortByTarget);
		};


		/**
		 * Draw the data labels
		 *
		 * @private
		 * @function Highcharts.Series#drawDataLabels
		 *
		 * @fires Highcharts.Series#event:afterDrawDataLabels
		 */
		Series.prototype.drawDataLabels = function () {
		    var series = this,
		        chart = series.chart,
		        seriesOptions = series.options,
		        seriesDlOptions = seriesOptions.dataLabels,
		        points = series.points,
		        pointOptions,
		        hasRendered = series.hasRendered || 0,
		        dataLabelsGroup,
		        defer = pick(seriesDlOptions.defer, !!seriesOptions.animation),
		        renderer = chart.renderer;

		    /*
		     * Handle the dataLabels.filter option.
		     */
		    function applyFilter(point, options) {
		        var filter = options.filter,
		            op,
		            prop,
		            val;
		        if (filter) {
		            op = filter.operator;
		            prop = point[filter.property];
		            val = filter.value;
		            if (
		                (op === '>' && prop > val) ||
		                (op === '<' && prop < val) ||
		                (op === '>=' && prop >= val) ||
		                (op === '<=' && prop <= val) ||
		                (op === '==' && prop == val) || // eslint-disable-line eqeqeq
		                (op === '===' && prop === val)
		            ) {
		                return true;
		            }
		            return false;
		        }
		        return true;
		    }

		    /*
		     * Merge two objects that can be arrays. If one of them is an array, the
		     * other is merged into each element. If both are arrays, each element is
		     * merged by index. If neither are arrays, we use normal merge.
		     */
		    function mergeArrays(one, two) {
		        var res = [],
		            i;
		        if (isArray(one) && !isArray(two)) {
		            res = one.map(function (el) {
		                return merge(el, two);
		            });
		        } else if (isArray(two) && !isArray(one)) {
		            res = two.map(function (el) {
		                return merge(one, el);
		            });
		        } else if (!isArray(one) && !isArray(two)) {
		            res = merge(one, two);
		        } else {
		            i = Math.max(one.length, two.length);
		            while (i--) {
		                res[i] = merge(one[i], two[i]);
		            }
		        }
		        return res;
		    }


		    // Merge in plotOptions.dataLabels for series
		    seriesDlOptions = mergeArrays(
		        mergeArrays(
		            chart.options.plotOptions &&
		            chart.options.plotOptions.series &&
		            chart.options.plotOptions.series.dataLabels,
		            chart.options.plotOptions &&
		            chart.options.plotOptions[series.type] &&
		            chart.options.plotOptions[series.type].dataLabels
		        ),
		        seriesDlOptions
		    );

		    H.fireEvent(this, 'drawDataLabels');

		    if (
		        isArray(seriesDlOptions) ||
		        seriesDlOptions.enabled ||
		        series._hasPointLabels
		    ) {

		        // Create a separate group for the data labels to avoid rotation
		        dataLabelsGroup = series.plotGroup(
		            'dataLabelsGroup',
		            'data-labels',
		            defer && !hasRendered ? 'hidden' : 'visible', // #5133
		            seriesDlOptions.zIndex || 6
		        );

		        if (defer) {
		            dataLabelsGroup.attr({ opacity: +hasRendered }); // #3300
		            if (!hasRendered) {
		                addEvent(series, 'afterAnimate', function () {
		                    if (series.visible) { // #2597, #3023, #3024
		                        dataLabelsGroup.show(true);
		                    }
		                    dataLabelsGroup[
		                        seriesOptions.animation ? 'animate' : 'attr'
		                    ]({ opacity: 1 }, { duration: 200 });
		                });
		            }
		        }

		        // Make the labels for each point
		        points.forEach(function (point) {

		            // Merge in series options for the point.
		            // @note dataLabelAttribs (like pointAttribs) would eradicate
		            // the need for dlOptions, and simplify the section below.
		            pointOptions = splat(
		                mergeArrays(
		                    seriesDlOptions,
		                    point.dlOptions || // dlOptions is used in treemaps
		                        (point.options && point.options.dataLabels)
		                )
		            );

		            // Handle each individual data label for this point
		            pointOptions.forEach(function (labelOptions, i) {
		                // Options for one datalabel
		                var labelEnabled = labelOptions.enabled &&
		                        !point.isNull && // #2282, #4641, #7112
		                        applyFilter(point, labelOptions),
		                    labelConfig,
		                    formatString,
		                    labelText,
		                    style,
		                    rotation,
		                    attr,
		                    dataLabel = point.dataLabels ? point.dataLabels[i] :
		                        point.dataLabel,
		                    connector = point.connectors ? point.connectors[i] :
		                        point.connector,
		                    isNew = !dataLabel;

		                if (labelEnabled) {
		                    // Create individual options structure that can be extended
		                    // without affecting others
		                    labelConfig = point.getLabelConfig();
		                    formatString = (
		                        labelOptions[point.formatPrefix + 'Format'] ||
		                        labelOptions.format
		                    );

		                    labelText = defined(formatString) ?
		                        format(formatString, labelConfig, chart.time) :
		                        (
		                            labelOptions[point.formatPrefix + 'Formatter'] ||
		                            labelOptions.formatter
		                        ).call(labelConfig, labelOptions);

		                    style = labelOptions.style;
		                    rotation = labelOptions.rotation;

		                    if (!chart.styledMode) {
		                        // Determine the color
		                        style.color = pick(
		                            labelOptions.color,
		                            style.color,
		                            series.color,
		                            '#000000'
		                        );
		                        // Get automated contrast color
		                        if (style.color === 'contrast') {
		                            point.contrastColor = renderer.getContrast(
		                                point.color || series.color
		                            );
		                            style.color = labelOptions.inside ||
		                                pick(
		                                    labelOptions.distance,
		                                    point.labelDistance
		                                ) < 0 ||
		                                !!seriesOptions.stacking ?
		                                    point.contrastColor :
		                                    '#000000';
		                        }
		                        if (seriesOptions.cursor) {
		                            style.cursor = seriesOptions.cursor;
		                        }
		                    }

		                    attr = {
		                        r: labelOptions.borderRadius || 0,
		                        rotation: rotation,
		                        padding: labelOptions.padding,
		                        zIndex: 1
		                    };

		                    if (!chart.styledMode) {
		                        attr.fill = labelOptions.backgroundColor;
		                        attr.stroke = labelOptions.borderColor;
		                        attr['stroke-width'] = labelOptions.borderWidth;
		                    }

		                    // Remove unused attributes (#947)
		                    H.objectEach(attr, function (val, name) {
		                        if (val === undefined) {
		                            delete attr[name];
		                        }
		                    });
		                }

		                // If the point is outside the plot area, destroy it. #678, #820
		                if (dataLabel && (!labelEnabled || !defined(labelText))) {
		                    point.dataLabel =
		                        point.dataLabel && point.dataLabel.destroy();
		                    if (point.dataLabels) {
		                        // Remove point.dataLabels if this was the last one
		                        if (point.dataLabels.length === 1) {
		                            delete point.dataLabels;
		                        } else {
		                            delete point.dataLabels[i];
		                        }
		                    }
		                    if (!i) {
		                        delete point.dataLabel;
		                    }
		                    if (connector) {
		                        point.connector = point.connector.destroy();
		                        if (point.connectors) {
		                            // Remove point.connectors if this was the last one
		                            if (point.connectors.length === 1) {
		                                delete point.connectors;
		                            } else {
		                                delete point.connectors[i];
		                            }
		                        }
		                    }

		                // Individual labels are disabled if the are explicitly disabled
		                // in the point options, or if they fall outside the plot area.
		                } else if (labelEnabled && defined(labelText)) {

		                    if (!dataLabel) {
		                        // Create new label element
		                        point.dataLabels = point.dataLabels || [];
		                        dataLabel = point.dataLabels[i] = rotation ?

		                            // Labels don't rotate, use text element
		                            renderer.text(labelText, 0, -9999)
		                                .addClass('highcharts-data-label') :

		                            // We can use label
		                            renderer.label(
		                                labelText,
		                                0,
		                                -9999,
		                                labelOptions.shape,
		                                null,
		                                null,
		                                labelOptions.useHTML,
		                                null,
		                                'data-label'
		                            );

		                        // Store for backwards compatibility
		                        if (!i) {
		                            point.dataLabel = dataLabel;
		                        }

		                        dataLabel.addClass(
		                            ' highcharts-data-label-color-' + point.colorIndex +
		                            ' ' + (labelOptions.className || '') +
		                            (   // #3398
		                                labelOptions.useHTML ?
		                                    ' highcharts-tracker' :
		                                    ''
		                            )
		                        );
		                    } else {
		                        // Use old element and just update text
		                        attr.text = labelText;
		                    }

		                    // Store data label options for later access
		                    dataLabel.options = labelOptions;

		                    dataLabel.attr(attr);

		                    if (!chart.styledMode) {
		                        // Styles must be applied before add in order to read
		                        // text bounding box
		                        dataLabel.css(style).shadow(labelOptions.shadow);
		                    }

		                    if (!dataLabel.added) {
		                        dataLabel.add(dataLabelsGroup);
		                    }

		                    // Now the data label is created and placed at 0,0, so we
		                    // need to align it
		                    series.alignDataLabel(
		                        point, dataLabel, labelOptions, null, isNew
		                    );
		                }
		            });
		        });
		    }

		    H.fireEvent(this, 'afterDrawDataLabels');
		};

		/**
		 * Align each individual data label.
		 *
		 * @private
		 * @function Highcharts.Series#alignDataLabel
		 *
		 * @param {Highcharts.Point} point
		 *
		 * @param {Highcharts.SVGElement} dataLabel
		 *
		 * @param {Highcharts.PlotSeriesDataLabelsOptions} options
		 *
		 * @param {Highcharts.BBoxObject} alignTo
		 *
		 * @param {boolean} isNew
		 */
		Series.prototype.alignDataLabel = function (
		    point,
		    dataLabel,
		    options,
		    alignTo,
		    isNew
		) {
		    var chart = this.chart,
		        inverted = this.isCartesian && chart.inverted,
		        plotX = pick(point.dlBox && point.dlBox.centerX, point.plotX, -9999),
		        plotY = pick(point.plotY, -9999),
		        bBox = dataLabel.getBBox(),
		        baseline,
		        rotation = options.rotation,
		        normRotation,
		        negRotation,
		        align = options.align,
		        rotCorr, // rotation correction
		        // Math.round for rounding errors (#2683), alignTo to allow column
		        // labels (#2700)
		        visible =
		            this.visible &&
		            (
		                point.series.forceDL ||
		                chart.isInsidePlot(plotX, Math.round(plotY), inverted) ||
		                (
		                    alignTo && chart.isInsidePlot(
		                        plotX,
		                        inverted ?
		                            alignTo.x + 1 :
		                            alignTo.y + alignTo.height - 1,
		                        inverted
		                    )
		                )
		            ),
		        alignAttr, // the final position;
		        justify = pick(options.overflow, 'justify') === 'justify';

		    if (visible) {

		        baseline = chart.renderer.fontMetrics(
		            chart.styledMode ? undefined : options.style.fontSize,
		            dataLabel
		        ).b;

		        // The alignment box is a singular point
		        alignTo = extend({
		            x: inverted ? this.yAxis.len - plotY : plotX,
		            y: Math.round(inverted ? this.xAxis.len - plotX : plotY),
		            width: 0,
		            height: 0
		        }, alignTo);

		        // Add the text size for alignment calculation
		        extend(options, {
		            width: bBox.width,
		            height: bBox.height
		        });

		        // Allow a hook for changing alignment in the last moment, then do the
		        // alignment
		        if (rotation) {
		            justify = false; // Not supported for rotated text
		            rotCorr = chart.renderer.rotCorr(baseline, rotation); // #3723
		            alignAttr = {
		                x: alignTo.x + options.x + alignTo.width / 2 + rotCorr.x,
		                y: (
		                    alignTo.y +
		                    options.y +
		                    { top: 0, middle: 0.5, bottom: 1 }[options.verticalAlign] *
		                        alignTo.height
		                )
		            };
		            dataLabel[isNew ? 'attr' : 'animate'](alignAttr)
		                .attr({ // #3003
		                    align: align
		                });

		            // Compensate for the rotated label sticking out on the sides
		            normRotation = (rotation + 720) % 360;
		            negRotation = normRotation > 180 && normRotation < 360;

		            if (align === 'left') {
		                alignAttr.y -= negRotation ? bBox.height : 0;
		            } else if (align === 'center') {
		                alignAttr.x -= bBox.width / 2;
		                alignAttr.y -= bBox.height / 2;
		            } else if (align === 'right') {
		                alignAttr.x -= bBox.width;
		                alignAttr.y -= negRotation ? 0 : bBox.height;
		            }
		            dataLabel.placed = true;
		            dataLabel.alignAttr = alignAttr;

		        } else {
		            dataLabel.align(options, null, alignTo);
		            alignAttr = dataLabel.alignAttr;
		        }

		        // Handle justify or crop
		        if (justify && alignTo.height >= 0) { // #8830
		            point.isLabelJustified = this.justifyDataLabel(
		                dataLabel,
		                options,
		                alignAttr,
		                bBox,
		                alignTo,
		                isNew
		            );

		        // Now check that the data label is within the plot area
		        } else if (pick(options.crop, true)) {
		            visible =
		                chart.isInsidePlot(
		                    alignAttr.x,
		                    alignAttr.y
		                ) &&
		                chart.isInsidePlot(
		                    alignAttr.x + bBox.width,
		                    alignAttr.y + bBox.height
		                );
		        }

		        // When we're using a shape, make it possible with a connector or an
		        // arrow pointing to thie point
		        if (options.shape && !rotation) {
		            dataLabel[isNew ? 'attr' : 'animate']({
		                anchorX: inverted ? chart.plotWidth - point.plotY : point.plotX,
		                anchorY: inverted ? chart.plotHeight - point.plotX : point.plotY
		            });
		        }
		    }

		    // Show or hide based on the final aligned position
		    if (!visible) {
		        dataLabel.attr({ y: -9999 });
		        dataLabel.placed = false; // don't animate back in
		    }

		};

		/**
		 * If data labels fall partly outside the plot area, align them back in, in a
		 * way that doesn't hide the point.
		 *
		 * @private
		 * @function Highcharts.Series#justifyDataLabel
		 *
		 * @param {Highcharts.SVGElement} dataLabel
		 *
		 * @param {Highcharts.PlotSeriesDataLabelsOptions} options
		 *
		 * @param {*} alignAttr
		 *
		 * @param {Highcharts.BBoxObject} bBox
		 *
		 * @param {boolean} isNew
		 *
		 * @return {boolean}
		 */
		Series.prototype.justifyDataLabel = function (
		    dataLabel,
		    options,
		    alignAttr,
		    bBox,
		    alignTo,
		    isNew
		) {
		    var chart = this.chart,
		        align = options.align,
		        verticalAlign = options.verticalAlign,
		        off,
		        justified,
		        padding = dataLabel.box ? 0 : (dataLabel.padding || 0);

		    // Off left
		    off = alignAttr.x + padding;
		    if (off < 0) {
		        if (align === 'right') {
		            options.align = 'left';
		        } else {
		            options.x = -off;
		        }
		        justified = true;
		    }

		    // Off right
		    off = alignAttr.x + bBox.width - padding;
		    if (off > chart.plotWidth) {
		        if (align === 'left') {
		            options.align = 'right';
		        } else {
		            options.x = chart.plotWidth - off;
		        }
		        justified = true;
		    }

		    // Off top
		    off = alignAttr.y + padding;
		    if (off < 0) {
		        if (verticalAlign === 'bottom') {
		            options.verticalAlign = 'top';
		        } else {
		            options.y = -off;
		        }
		        justified = true;
		    }

		    // Off bottom
		    off = alignAttr.y + bBox.height - padding;
		    if (off > chart.plotHeight) {
		        if (verticalAlign === 'top') {
		            options.verticalAlign = 'bottom';
		        } else {
		            options.y = chart.plotHeight - off;
		        }
		        justified = true;
		    }

		    if (justified) {
		        dataLabel.placed = !isNew;
		        dataLabel.align(options, null, alignTo);
		    }

		    return justified;
		};

		if (seriesTypes.pie) {
		    seriesTypes.pie.prototype.dataLabelPositioners = {

		        // Based on the value computed in Highcharts' distribute algorithm.
		        radialDistributionY: function (point) {
		            return point.top + point.distributeBox.pos;
		        },
		        // get the x - use the natural x position for labels near the
		        // top and bottom, to prevent the top and botton slice
		        // connectors from touching each other on either side

		        // Based on the value computed in Highcharts' distribute algorithm.
		        radialDistributionX: function (series, point, y, naturalY) {
		            return series.getX(
		                y < point.top + 2 || y > point.bottom - 2 ?
		                    naturalY :
		                    y,
		                point.half,
		                point
		            );
		        },

		        // dataLabels.distance determines the x position of the label
		        justify: function (point, radius, seriesCenter) {
		            return seriesCenter[0] + (point.half ? -1 : 1) *
		            (radius + point.labelDistance);
		        },

		        // Left edges of the left-half labels touch the left edge of the plot
		        // area. Right edges of the right-half labels touch the right edge of
		        // the plot area.
		        alignToPlotEdges: function (
		            dataLabel,
		            half,
		            plotWidth,
		            plotLeft
		        ) {
		            var dataLabelWidth = dataLabel.getBBox().width;
		            return half ? dataLabelWidth + plotLeft :
		                    plotWidth - dataLabelWidth - plotLeft;
		        },

		        // Connectors of each side end in the same x position. Labels are
		        // aligned to them. Left edge of the widest left-half label touches the
		        // left edge of the plot area. Right edge of the widest right-half label
		        // touches the right edge of the plot area.
		        alignToConnectors: function (
		            points,
		            half,
		            plotWidth,
		            plotLeft
		        ) {
		            var maxDataLabelWidth = 0,
		                dataLabelWidth;

		            // find widest data label
		            points.forEach(function (point) {
		                dataLabelWidth = point.dataLabel.getBBox().width;
		                if (dataLabelWidth > maxDataLabelWidth) {
		                    maxDataLabelWidth = dataLabelWidth;
		                }
		            });
		            return half ? maxDataLabelWidth + plotLeft :
		                plotWidth - maxDataLabelWidth - plotLeft;
		        }
		    };

		    /**
		     * Override the base drawDataLabels method by pie specific functionality
		     *
		     * @private
		     * @function Highcharts.seriesTypes.pie#drawDataLabels
		     */
		    seriesTypes.pie.prototype.drawDataLabels = function () {
		        var series = this,
		            data = series.data,
		            point,
		            chart = series.chart,
		            options = series.options.dataLabels,
		            connectorPadding = options.connectorPadding,
		            connectorWidth = pick(options.connectorWidth, 1),
		            plotWidth = chart.plotWidth,
		            plotHeight = chart.plotHeight,
		            plotLeft = chart.plotLeft,
		            maxWidth = Math.round(chart.chartWidth / 3),
		            connector,
		            seriesCenter = series.center,
		            radius = seriesCenter[2] / 2,
		            centerY = seriesCenter[1],
		            dataLabel,
		            dataLabelWidth,
		            // labelPos,
		            labelPosition,
		            labelHeight,
		            // divide the points into right and left halves for anti collision
		            halves = [
		                [], // right
		                []  // left
		            ],
		            x,
		            y,
		            visibility,
		            j,
		            overflow = [0, 0, 0, 0], // top, right, bottom, left
		            dataLabelPositioners = series.dataLabelPositioners;

		        // get out if not enabled
		        if (!series.visible || (!options.enabled && !series._hasPointLabels)) {
		            return;
		        }

		        // Reset all labels that have been shortened
		        data.forEach(function (point) {
		            if (point.dataLabel && point.visible && point.dataLabel.shortened) {
		                point.dataLabel
		                    .attr({
		                        width: 'auto'
		                    }).css({
		                        width: 'auto',
		                        textOverflow: 'clip'
		                    });
		                point.dataLabel.shortened = false;
		            }
		        });


		        // run parent method
		        Series.prototype.drawDataLabels.apply(series);

		        data.forEach(function (point) {
		            if (point.dataLabel) {

		                if (point.visible) { // #407, #2510

		                    // Arrange points for detection collision
		                    halves[point.half].push(point);

		                    // Reset positions (#4905)
		                    point.dataLabel._pos = null;

		                    // Avoid long labels squeezing the pie size too far down
		                    if (
		                        !defined(options.style.width) &&
		                        !defined(
		                            point.options.dataLabels &&
		                            point.options.dataLabels.style &&
		                            point.options.dataLabels.style.width
		                        )
		                    ) {
		                        if (point.dataLabel.getBBox().width > maxWidth) {
		                            point.dataLabel.css({
		                                // Use a fraction of the maxWidth to avoid
		                                // wrapping close to the end of the string.
		                                width: maxWidth * 0.7
		                            });
		                            point.dataLabel.shortened = true;
		                        }
		                    }
		                } else {
		                    point.dataLabel = point.dataLabel.destroy();
		                    // Workaround to make pies destroy multiple datalabels
		                    // correctly. This logic needs rewriting to support multiple
		                    // datalabels fully.
		                    if (point.dataLabels && point.dataLabels.length === 1) {
		                        delete point.dataLabels;
		                    }
		                }
		            }
		        });

		        /* Loop over the points in each half, starting from the top and bottom
		         * of the pie to detect overlapping labels.
		         */
		        halves.forEach(function (points, i) {

		            var top,
		                bottom,
		                length = points.length,
		                positions = [],
		                naturalY,
		                sideOverflow,
		                size,
		                distributionLength;

		            if (!length) {
		                return;
		            }

		            // Sort by angle
		            series.sortByAngle(points, i - 0.5);
		            // Only do anti-collision when we have dataLabels outside the pie
		            // and have connectors. (#856)
		            if (series.maxLabelDistance > 0) {
		                top = Math.max(
		                    0,
		                    centerY - radius - series.maxLabelDistance
		                );
		                bottom = Math.min(
		                    centerY + radius + series.maxLabelDistance,
		                    chart.plotHeight
		                );
		                points.forEach(function (point) {
		                    // check if specific points' label is outside the pie
		                    if (point.labelDistance > 0 && point.dataLabel) {
		                        // point.top depends on point.labelDistance value
		                        // Used for calculation of y value in getX method
		                        point.top = Math.max(
		                            0,
		                            centerY - radius - point.labelDistance
		                        );
		                        point.bottom = Math.min(
		                            centerY + radius + point.labelDistance,
		                            chart.plotHeight
		                        );
		                        size = point.dataLabel.getBBox().height || 21;

		                        // point.positionsIndex is needed for getting index of
		                        // parameter related to specific point inside positions
		                        // array - not every point is in positions array.
		                        point.distributeBox = {
		                            target: point.labelPosition.natural.y -
		                                point.top + size / 2,
		                            size: size,
		                            rank: point.y
		                        };
		                        positions.push(point.distributeBox);
		                    }
		                });
		                distributionLength = bottom + size - top;
		                H.distribute(
		                    positions,
		                    distributionLength,
		                    distributionLength / 5
		                );
		            }

		            // Now the used slots are sorted, fill them up sequentially
		            for (j = 0; j < length; j++) {

		                point = points[j];
		                // labelPos = point.labelPos;
		                labelPosition = point.labelPosition;
		                dataLabel = point.dataLabel;
		                visibility = point.visible === false ? 'hidden' : 'inherit';
		                naturalY = labelPosition.natural.y;
		                y = naturalY;

		                if (positions && defined(point.distributeBox)) {
		                    if (point.distributeBox.pos === undefined) {
		                        visibility = 'hidden';
		                    } else {
		                        labelHeight = point.distributeBox.size;
		                        // Find label's y position
		                        y = dataLabelPositioners.radialDistributionY(point);
		                    }
		                }

		                // It is needed to delete point.positionIndex for
		                // dynamically added points etc.

		                delete point.positionIndex;

		                // Find label's x position
		                // justify is undocumented in the API - preserve support for it
		                if (options.justify) {
		                    x = dataLabelPositioners.justify(point, radius,
		                        seriesCenter);
		                } else {
		                    switch (options.alignTo) {
		                    case 'connectors':
		                        x = dataLabelPositioners.alignToConnectors(points,
		                            i, plotWidth, plotLeft);
		                        break;
		                    case 'plotEdges':
		                        x = dataLabelPositioners.alignToPlotEdges(dataLabel,
		                             i, plotWidth, plotLeft);
		                        break;
		                    default:
		                        x = dataLabelPositioners.radialDistributionX(series,
		                            point, y, naturalY);
		                    }
		                }

		                // Record the placement and visibility
		                dataLabel._attr = {
		                    visibility: visibility,
		                    align: labelPosition.alignment
		                };

		                dataLabel._pos = {
		                    x: (
		                        x +
		                        options.x +
		                        ({
		                            left: connectorPadding,
		                            right: -connectorPadding
		                        }[labelPosition.alignment] || 0)
		                    ),

		                    // 10 is for the baseline (label vs text)
		                    y: y + options.y - 10
		                };
		                // labelPos.x = x;
		                // labelPos.y = y;
		                labelPosition.final.x = x;
		                labelPosition.final.y = y;

		                // Detect overflowing data labels
		                if (pick(options.crop, true)) {
		                    dataLabelWidth = dataLabel.getBBox().width;

		                    sideOverflow = null;
		                    // Overflow left
		                    if (
		                        x - dataLabelWidth < connectorPadding &&
		                        i === 1 // left half
		                    ) {
		                        sideOverflow = Math.round(
		                            dataLabelWidth - x + connectorPadding
		                        );
		                        overflow[3] = Math.max(sideOverflow, overflow[3]);

		                    // Overflow right
		                    } else if (
		                        x + dataLabelWidth > plotWidth - connectorPadding &&
		                        i === 0 // right half
		                    ) {
		                        sideOverflow = Math.round(
		                            x + dataLabelWidth - plotWidth + connectorPadding
		                        );
		                        overflow[1] = Math.max(sideOverflow, overflow[1]);
		                    }

		                    // Overflow top
		                    if (y - labelHeight / 2 < 0) {
		                        overflow[0] = Math.max(
		                            Math.round(-y + labelHeight / 2),
		                            overflow[0]
		                        );

		                    // Overflow left
		                    } else if (y + labelHeight / 2 > plotHeight) {
		                        overflow[2] = Math.max(
		                            Math.round(y + labelHeight / 2 - plotHeight),
		                            overflow[2]
		                        );
		                    }
		                    dataLabel.sideOverflow = sideOverflow;
		                }
		            } // for each point
		        }); // for each half

		        // Do not apply the final placement and draw the connectors until we
		        // have verified that labels are not spilling over.
		        if (
		            arrayMax(overflow) === 0 ||
		            this.verifyDataLabelOverflow(overflow)
		        ) {

		            // Place the labels in the final position
		            this.placeDataLabels();

		            // Draw the connectors
		            if (connectorWidth) {
		                this.points.forEach(function (point) {
		                    var isNew;

		                    connector = point.connector;
		                    dataLabel = point.dataLabel;

		                    if (
		                        dataLabel &&
		                        dataLabel._pos &&
		                        point.visible &&
		                        point.labelDistance > 0
		                    ) {
		                        visibility = dataLabel._attr.visibility;

		                        isNew = !connector;

		                        if (isNew) {
		                            point.connector = connector = chart.renderer.path()
		                                .addClass('highcharts-data-label-connector ' +
		                                    ' highcharts-color-' + point.colorIndex +
		                                    (
		                                        point.className ?
		                                            ' ' + point.className :
		                                            ''
		                                    )
		                                )
		                                .add(series.dataLabelsGroup);

		                            if (!chart.styledMode) {
		                                connector.attr({
		                                    'stroke-width': connectorWidth,
		                                    'stroke': (
		                                        options.connectorColor ||
		                                        point.color ||
		                                        '#666666'
		                                    )
		                                });
		                            }
		                        }
		                        connector[isNew ? 'attr' : 'animate']({
		                            d: point.getConnectorPath()
		                        });
		                        connector.attr('visibility', visibility);

		                    } else if (connector) {
		                        point.connector = connector.destroy();
		                    }
		                });
		            }
		        }
		    };

		    /**
		     * Extendable method for getting the path of the connector between the data
		     * label and the pie slice.
		     *
		     * @private
		     * @function Highcharts.seriesTypes.pie#connectorPath
		     *
		     * @param {*} labelPos
		     *
		     * @return {Highcharts.PathObject}
		     */
		     // TODO: depracated - remove it
		     /*
		    seriesTypes.pie.prototype.connectorPath = function (labelPos) {
		        var x = labelPos.x,
		            y = labelPos.y;
		        return pick(this.options.dataLabels.softConnector, true) ? [
		            'M',
		            // end of the string at the label
		            x + (labelPos[6] === 'left' ? 5 : -5), y,
		            'C',
		            x, y, // first break, next to the label
		            2 * labelPos[2] - labelPos[4], 2 * labelPos[3] - labelPos[5],
		            labelPos[2], labelPos[3], // second break
		            'L',
		            labelPos[4], labelPos[5] // base
		        ] : [
		            'M',
		            // end of the string at the label
		            x + (labelPos[6] === 'left' ? 5 : -5), y,
		            'L',
		            labelPos[2], labelPos[3], // second break
		            'L',
		            labelPos[4], labelPos[5] // base
		        ];
		    };
		    */


		    /**
		     * Perform the final placement of the data labels after we have verified
		     * that they fall within the plot area.
		     *
		     * @private
		     * @function Highcharts.seriesTypes.pie#placeDataLabels
		     */
		    seriesTypes.pie.prototype.placeDataLabels = function () {
		        this.points.forEach(function (point) {
		            var dataLabel = point.dataLabel,
		                _pos;
		            if (dataLabel && point.visible) {
		                _pos = dataLabel._pos;
		                if (_pos) {

		                    // Shorten data labels with ellipsis if they still overflow
		                    // after the pie has reached minSize (#223).
		                    if (dataLabel.sideOverflow) {
		                        dataLabel._attr.width =
		                            dataLabel.getBBox().width - dataLabel.sideOverflow;

		                        dataLabel.css({
		                            width: dataLabel._attr.width + 'px',
		                            textOverflow: (
		                                (this.options.dataLabels.style || {})
		                                    .textOverflow ||
		                                'ellipsis'
		                            )
		                        });
		                        dataLabel.shortened = true;
		                    }

		                    dataLabel.attr(dataLabel._attr);
		                    dataLabel[dataLabel.moved ? 'animate' : 'attr'](_pos);
		                    dataLabel.moved = true;
		                } else if (dataLabel) {
		                    dataLabel.attr({ y: -9999 });
		                }
		            }
		        }, this);
		    };

		    seriesTypes.pie.prototype.alignDataLabel = noop;

		    /**
		     * Verify whether the data labels are allowed to draw, or we should run more
		     * translation and data label positioning to keep them inside the plot area.
		     * Returns true when data labels are ready to draw.
		     *
		     * @private
		     * @function Highcharts.seriesTypes.pie#verifyDataLabelOverflow
		     *
		     * @param {boolean} overflow
		     *
		     * @return {boolean}
		     */
		    seriesTypes.pie.prototype.verifyDataLabelOverflow = function (overflow) {

		        var center = this.center,
		            options = this.options,
		            centerOption = options.center,
		            minSize = options.minSize || 80,
		            newSize = minSize,
		            // If a size is set, return true and don't try to shrink the pie
		            // to fit the labels.
		            ret = options.size !== null;

		        if (!ret) {
		            // Handle horizontal size and center
		            if (centerOption[0] !== null) { // Fixed center
		                newSize = Math.max(center[2] -
		                    Math.max(overflow[1], overflow[3]), minSize);

		            } else { // Auto center
		                newSize = Math.max(
		                    // horizontal overflow
		                    center[2] - overflow[1] - overflow[3],
		                    minSize
		                );
		                // horizontal center
		                center[0] += (overflow[3] - overflow[1]) / 2;
		            }

		            // Handle vertical size and center
		            if (centerOption[1] !== null) { // Fixed center
		                newSize = Math.max(Math.min(newSize, center[2] -
		                    Math.max(overflow[0], overflow[2])), minSize);

		            } else { // Auto center
		                newSize = Math.max(
		                    Math.min(
		                        newSize,
		                        // vertical overflow
		                        center[2] - overflow[0] - overflow[2]
		                    ),
		                    minSize
		                );
		                // vertical center
		                center[1] += (overflow[0] - overflow[2]) / 2;
		            }

		            // If the size must be decreased, we need to run translate and
		            // drawDataLabels again
		            if (newSize < center[2]) {
		                center[2] = newSize;
		                center[3] = Math.min( // #3632
		                    relativeLength(options.innerSize || 0, newSize),
		                    newSize
		                );
		                this.translate(center);

		                if (this.drawDataLabels) {
		                    this.drawDataLabels();
		                }
		            // Else, return true to indicate that the pie and its labels is
		            // within the plot area
		            } else {
		                ret = true;
		            }
		        }
		        return ret;
		    };
		}

		if (seriesTypes.column) {

		    /**
		     * Override the basic data label alignment by adjusting for the position of
		     * the column.
		     *
		     * @private
		     * @function Highcharts.seriesTypes.column#alignDataLabel
		     *
		     * @param {Highcharts.Point} point
		     *
		     * @param {Highcharts.SVGElement} dataLabel
		     *
		     * @param {Highcharts.PlotSeriesDataLabelsOptions} options
		     *
		     * @param {Highcharts.BBoxObject} alignTo
		     *
		     * @param {boolean} isNew
		     */
		    seriesTypes.column.prototype.alignDataLabel = function (
		        point,
		        dataLabel,
		        options,
		        alignTo,
		        isNew
		    ) {
		        var inverted = this.chart.inverted,
		            series = point.series,
		            // data label box for alignment
		            dlBox = point.dlBox || point.shapeArgs,
		            below = pick(
		                point.below, // range series
		                point.plotY > pick(this.translatedThreshold, series.yAxis.len)
		            ),
		            // draw it inside the box?
		            inside = pick(options.inside, !!this.options.stacking),
		            overshoot;

		        // Align to the column itself, or the top of it
		        if (dlBox) { // Area range uses this method but not alignTo
		            alignTo = merge(dlBox);

		            if (alignTo.y < 0) {
		                alignTo.height += alignTo.y;
		                alignTo.y = 0;
		            }
		            overshoot = alignTo.y + alignTo.height - series.yAxis.len;
		            if (overshoot > 0) {
		                alignTo.height -= overshoot;
		            }

		            if (inverted) {
		                alignTo = {
		                    x: series.yAxis.len - alignTo.y - alignTo.height,
		                    y: series.xAxis.len - alignTo.x - alignTo.width,
		                    width: alignTo.height,
		                    height: alignTo.width
		                };
		            }

		            // Compute the alignment box
		            if (!inside) {
		                if (inverted) {
		                    alignTo.x += below ? 0 : alignTo.width;
		                    alignTo.width = 0;
		                } else {
		                    alignTo.y += below ? alignTo.height : 0;
		                    alignTo.height = 0;
		                }
		            }
		        }


		        // When alignment is undefined (typically columns and bars), display the
		        // individual point below or above the point depending on the threshold
		        options.align = pick(
		            options.align,
		            !inverted || inside ? 'center' : below ? 'right' : 'left'
		        );
		        options.verticalAlign = pick(
		            options.verticalAlign,
		            inverted || inside ? 'middle' : below ? 'top' : 'bottom'
		        );

		        // Call the parent method
		        Series.prototype.alignDataLabel.call(
		            this,
		            point,
		            dataLabel,
		            options,
		            alignTo,
		            isNew
		        );

		        // If label was justified and we have contrast, set it:
		        if (point.isLabelJustified && point.contrastColor) {
		            dataLabel.css({
		                color: point.contrastColor
		            });
		        }
		    };
		}

	}(Highcharts));
	(function (H) {
		/**
		 * (c) 2010-2018 Torstein Honsi
		 *
		 * License: www.highcharts.com/license
		 */



		var Axis = H.Axis,
		    getMagnitude = H.getMagnitude,
		    normalizeTickInterval = H.normalizeTickInterval,
		    timeUnits = H.timeUnits;

		/**
		 * Set the tick positions to a time unit that makes sense, for example
		 * on the first of each month or on every Monday. Return an array
		 * with the time positions. Used in datetime axes as well as for grouping
		 * data on a datetime axis.
		 *
		 * @private
		 * @function Highcharts.Axis#getTimeTicks
		 *
		 * @param {*} normalizedInterval
		 *        The interval in axis values (ms) and thecount
		 *
		 * @param {number} min
		 *        The minimum in axis values
		 *
		 * @param {number} max
		 *        The maximum in axis values
		 *
		 * @param {number} startOfWeek
		 *
		 * @return {number}
		 */
		Axis.prototype.getTimeTicks = function () {
		    return this.chart.time.getTimeTicks.apply(this.chart.time, arguments);
		};

		/**
		 * Get a normalized tick interval for dates. Returns a configuration object with
		 * unit range (interval), count and name. Used to prepare data for getTimeTicks.
		 * Previously this logic was part of getTimeTicks, but as getTimeTicks now runs
		 * of segments in stock charts, the normalizing logic was extracted in order to
		 * prevent it for running over again for each segment having the same interval.
		 * #662, #697.
		 *
		 * @private
		 * @function Highcharts.Axis#normalizeTimeTickInterval
		 *
		 * @param {number} tickInterval
		 *
		 * @param {Array<Array<number|string>>} [unitsOption]
		 *
		 * @return {*}
		 */
		Axis.prototype.normalizeTimeTickInterval = function (
		    tickInterval,
		    unitsOption
		) {
		    var units = unitsOption || [[
		            'millisecond', // unit name
		            [1, 2, 5, 10, 20, 25, 50, 100, 200, 500] // allowed multiples
		        ], [
		            'second',
		            [1, 2, 5, 10, 15, 30]
		        ], [
		            'minute',
		            [1, 2, 5, 10, 15, 30]
		        ], [
		            'hour',
		            [1, 2, 3, 4, 6, 8, 12]
		        ], [
		            'day',
		            [1, 2]
		        ], [
		            'week',
		            [1, 2]
		        ], [
		            'month',
		            [1, 2, 3, 4, 6]
		        ], [
		            'year',
		            null
		        ]],
		        unit = units[units.length - 1], // default unit is years
		        interval = timeUnits[unit[0]],
		        multiples = unit[1],
		        count,
		        i;

		    // loop through the units to find the one that best fits the tickInterval
		    for (i = 0; i < units.length; i++) {
		        unit = units[i];
		        interval = timeUnits[unit[0]];
		        multiples = unit[1];


		        if (units[i + 1]) {
		            // lessThan is in the middle between the highest multiple and the
		            // next unit.
		            var lessThan = (interval * multiples[multiples.length - 1] +
		                        timeUnits[units[i + 1][0]]) / 2;

		            // break and keep the current unit
		            if (tickInterval <= lessThan) {
		                break;
		            }
		        }
		    }

		    // prevent 2.5 years intervals, though 25, 250 etc. are allowed
		    if (interval === timeUnits.year && tickInterval < 5 * interval) {
		        multiples = [1, 2, 5];
		    }

		    // get the count
		    count = normalizeTickInterval(
		        tickInterval / interval,
		        multiples,
		        unit[0] === 'year' ?
		            Math.max(getMagnitude(tickInterval / interval), 1) : // #1913, #2360
		            1
		    );

		    return {
		        unitRange: interval,
		        count: count,
		        unitName: unit[0]
		    };
		};

	}(Highcharts));
	(function (H) {
		/**
		 * (c) 2010-2018 Torstein Honsi
		 *
		 * License: www.highcharts.com/license
		 */



		var addEvent = H.addEvent,
		    animate = H.animate,
		    Axis = H.Axis,
		    Chart = H.Chart,
		    createElement = H.createElement,
		    css = H.css,
		    defined = H.defined,
		    erase = H.erase,
		    extend = H.extend,
		    fireEvent = H.fireEvent,
		    isNumber = H.isNumber,
		    isObject = H.isObject,
		    isArray = H.isArray,
		    merge = H.merge,
		    objectEach = H.objectEach,
		    pick = H.pick,
		    Point = H.Point,
		    Series = H.Series,
		    seriesTypes = H.seriesTypes,
		    setAnimation = H.setAnimation,
		    splat = H.splat;


		// Remove settings that have not changed, to avoid unnecessary rendering or
		// computing (#9197)
		H.cleanRecursively = function (newer, older) {
		    var result = {};
		    objectEach(newer, function (val, key) {
		        var ob;

		        // Dive into objects
		        if (isObject(newer[key], true) && older[key]) {
		            ob = H.cleanRecursively(newer[key], older[key]);
		            if (Object.keys(ob).length) {
		                result[key] = ob;
		            }

		        // Arrays or primitives are copied directly
		        } else if (isObject(newer[key]) || newer[key] !== older[key]) {
		            result[key] = newer[key];
		        }
		    });

		    return result;
		};

		// Extend the Chart prototype for dynamic methods
		extend(Chart.prototype, /** @lends Highcharts.Chart.prototype */ {

		    /**
		     * Add a series to the chart after render time. Note that this method should
		     * never be used when adding data synchronously at chart render time, as it
		     * adds expense to the calculations and rendering. When adding data at the
		     * same time as the chart is initialized, add the series as a configuration
		     * option instead. With multiple axes, the `offset` is dynamically adjusted.
		     *
		     * @sample highcharts/members/chart-addseries/
		     *         Add a series from a button
		     * @sample stock/members/chart-addseries/
		     *         Add a series in Highstock
		     *
		     * @function Highcharts.Chart#addSeries
		     *
		     * @param {Highcharts.SeriesOptionsType} options
		     *        The config options for the series.
		     *
		     * @param {boolean} [redraw=true]
		     *        Whether to redraw the chart after adding.
		     *
		     * @param {boolean|Highcharts.AnimationOptionsObject} [animation]
		     *        Whether to apply animation, and optionally animation
		     *        configuration.
		     *
		     * @return {Highcharts.Series}
		     *         The newly created series object.
		     *
		     * @fires Highcharts.Chart#event:addSeries
		     * @fires Highcharts.Chart#event:afterAddSeries
		     */
		    addSeries: function (options, redraw, animation) {
		        var series,
		            chart = this;

		        if (options) {
		            redraw = pick(redraw, true); // defaults to true

		            fireEvent(chart, 'addSeries', { options: options }, function () {
		                series = chart.initSeries(options);

		                chart.isDirtyLegend = true;
		                chart.linkSeries();

		                fireEvent(chart, 'afterAddSeries');

		                if (redraw) {
		                    chart.redraw(animation);
		                }
		            });
		        }

		        return series;
		    },

		    /**
		     * Add an axis to the chart after render time. Note that this method should
		     * never be used when adding data synchronously at chart render time, as it
		     * adds expense to the calculations and rendering. When adding data at the
		     * same time as the chart is initialized, add the axis as a configuration
		     * option instead.
		     *
		     * @sample highcharts/members/chart-addaxis/
		     *         Add and remove axes
		     *
		     * @function Highcharts.Chart#addAxis
		     *
		     * @param {Highcharts.XAxisOptions|Highcharts.YAxisOptions|Highcharts.ZAxisOptions} options
		     *        The axis options.
		     *
		     * @param {boolean} [isX=false]
		     *        Whether it is an X axis or a value axis.
		     *
		     * @param {boolean} [redraw=true]
		     *        Whether to redraw the chart after adding.
		     *
		     * @param {boolean|Highcharts.AnimationOptionsObject} [animation=true]
		     *        Whether and how to apply animation in the redraw.
		     *
		     * @return {Highcharts.Axis}
		     *         The newly generated Axis object.
		     */
		    addAxis: function (options, isX, redraw, animation) {
		        var key = isX ? 'xAxis' : 'yAxis',
		            chartOptions = this.options,
		            userOptions = merge(options, {
		                index: this[key].length,
		                isX: isX
		            }),
		            axis;

		        axis = new Axis(this, userOptions);

		        // Push the new axis options to the chart options
		        chartOptions[key] = splat(chartOptions[key] || {});
		        chartOptions[key].push(userOptions);

		        if (pick(redraw, true)) {
		            this.redraw(animation);
		        }

		        return axis;
		    },

		    /**
		     * Dim the chart and show a loading text or symbol. Options for the loading
		     * screen are defined in {@link
		     * https://api.highcharts.com/highcharts/loading|the loading options}.
		     *
		     * @sample highcharts/members/chart-hideloading/
		     *         Show and hide loading from a button
		     * @sample highcharts/members/chart-showloading/
		     *         Apply different text labels
		     * @sample stock/members/chart-show-hide-loading/
		     *         Toggle loading in Highstock
		     *
		     * @function Highcharts.Chart#showLoading
		     *
		     * @param {string} str
		     *        An optional text to show in the loading label instead of the
		     *        default one. The default text is set in
		     *        [lang.loading](http://api.highcharts.com/highcharts/lang.loading).
		     */
		    showLoading: function (str) {
		        var chart = this,
		            options = chart.options,
		            loadingDiv = chart.loadingDiv,
		            loadingOptions = options.loading,
		            setLoadingSize = function () {
		                if (loadingDiv) {
		                    css(loadingDiv, {
		                        left: chart.plotLeft + 'px',
		                        top: chart.plotTop + 'px',
		                        width: chart.plotWidth + 'px',
		                        height: chart.plotHeight + 'px'
		                    });
		                }
		            };

		        // create the layer at the first call
		        if (!loadingDiv) {
		            chart.loadingDiv = loadingDiv = createElement('div', {
		                className: 'highcharts-loading highcharts-loading-hidden'
		            }, null, chart.container);

		            chart.loadingSpan = createElement(
		                'span',
		                { className: 'highcharts-loading-inner' },
		                null,
		                loadingDiv
		            );
		            addEvent(chart, 'redraw', setLoadingSize); // #1080
		        }

		        loadingDiv.className = 'highcharts-loading';

		        // Update text
		        chart.loadingSpan.innerHTML = str || options.lang.loading;

		        if (!chart.styledMode) {
		            // Update visuals
		            css(loadingDiv, extend(loadingOptions.style, {
		                zIndex: 10
		            }));
		            css(chart.loadingSpan, loadingOptions.labelStyle);

		            // Show it
		            if (!chart.loadingShown) {
		                css(loadingDiv, {
		                    opacity: 0,
		                    display: ''
		                });
		                animate(loadingDiv, {
		                    opacity: loadingOptions.style.opacity || 0.5
		                }, {
		                    duration: loadingOptions.showDuration || 0
		                });
		            }
		        }

		        chart.loadingShown = true;
		        setLoadingSize();
		    },

		    /**
		     * Hide the loading layer.
		     *
		     * @see Highcharts.Chart#showLoading
		     *
		     * @sample highcharts/members/chart-hideloading/
		     *         Show and hide loading from a button
		     * @sample stock/members/chart-show-hide-loading/
		     *         Toggle loading in Highstock
		     *
		     * @function Highcharts.Chart#hideLoading
		     */
		    hideLoading: function () {

		        var options = this.options,
		            loadingDiv = this.loadingDiv;

		        if (loadingDiv) {
		            loadingDiv.className =
		                'highcharts-loading highcharts-loading-hidden';

		            if (!this.styledMode) {
		                animate(loadingDiv, {
		                    opacity: 0
		                }, {
		                    duration: options.loading.hideDuration || 100,
		                    complete: function () {
		                        css(loadingDiv, { display: 'none' });
		                    }
		                });
		            }
		        }

		        this.loadingShown = false;
		    },

		    /**
		     * These properties cause isDirtyBox to be set to true when updating. Can be
		     * extended from plugins.
		     */
		    propsRequireDirtyBox: [
		        'backgroundColor',
		        'borderColor',
		        'borderWidth',
		        'margin',
		        'marginTop',
		        'marginRight',
		        'marginBottom',
		        'marginLeft',
		        'spacing',
		        'spacingTop',
		        'spacingRight',
		        'spacingBottom',
		        'spacingLeft',
		        'borderRadius',
		        'plotBackgroundColor',
		        'plotBackgroundImage',
		        'plotBorderColor',
		        'plotBorderWidth',
		        'plotShadow',
		        'shadow'
		    ],

		    /**
		     * These properties cause all series to be updated when updating. Can be
		     * extended from plugins.
		     */
		    propsRequireUpdateSeries: [
		        'chart.inverted',
		        'chart.polar',
		        'chart.ignoreHiddenSeries',
		        'chart.type',
		        'colors',
		        'plotOptions',
		        'time',
		        'tooltip'
		    ],

		    /**
		     * These collections (arrays) implement update() methods with support for
		     * one-to-one option.
		     */
		    collectionsWithUpdate: [
		        'xAxis',
		        'yAxis',
		        'zAxis',
		        'series',
		        'colorAxis',
		        'pane'
		    ],

		    /**
		     * A generic function to update any element of the chart. Elements can be
		     * enabled and disabled, moved, re-styled, re-formatted etc.
		     *
		     * A special case is configuration objects that take arrays, for example
		     * [xAxis](https://api.highcharts.com/highcharts/xAxis),
		     * [yAxis](https://api.highcharts.com/highcharts/yAxis) or
		     * [series](https://api.highcharts.com/highcharts/series). For these
		     * collections, an `id` option is used to map the new option set to an
		     * existing object. If an existing object of the same id is not found, the
		     * corresponding item is updated. So for example, running `chart.update`
		     * with a series item without an id, will cause the existing chart's series
		     * with the same index in the series array to be updated. When the
		     * `oneToOne` parameter is true, `chart.update` will also take care of
		     * adding and removing items from the collection. Read more under the
		     * parameter description below.
		     *
		     * See also the
		     * [responsive option set](https://api.highcharts.com/highcharts/responsive).
		     * Switching between `responsive.rules` basically runs `chart.update` under
		     * the hood.
		     *
		     * @sample highcharts/members/chart-update/
		     *         Update chart geometry
		     *
		     * @function Highcharts.Chart#update
		     *
		     * @param {Highcharts.Options} options
		     *        A configuration object for the new chart options.
		     *
		     * @param {boolean} [redraw=true]
		     *        Whether to redraw the chart.
		     *
		     * @param {boolean} [oneToOne=false]
		     *        When `true`, the `series`, `xAxis` and `yAxis` collections will
		     *        be updated one to one, and items will be either added or removed
		     *        to match the new updated options. For example, if the chart has
		     *        two series and we call `chart.update` with a configuration
		     *        containing three series, one will be added. If we call
		     *        `chart.update` with one series, one will be removed. Setting an
		     *        empty `series` array will remove all series, but leaving out the
		     *        `series` property will leave all series untouched. If the series
		     *        have id's, the new series options will be matched by id, and the
		     *        remaining ones removed.
		     *
		     * @param {boolean|Highcharts.AnimationOptionsObject} [animation=true]
		     *        Whether to apply animation, and optionally animation
		     *        configuration.
		     *
		     * @fires Highcharts.Chart#event:update
		     * @fires Highcharts.Chart#event:afterUpdate
		     */
		    update: function (options, redraw, oneToOne, animation) {
		        var chart = this,
		            adders = {
		                credits: 'addCredits',
		                title: 'setTitle',
		                subtitle: 'setSubtitle'
		            },
		            optionsChart,
		            updateAllAxes,
		            updateAllSeries,
		            newWidth,
		            newHeight,
		            itemsForRemoval = [];

		        fireEvent(chart, 'update', { options: options });

		        options = H.cleanRecursively(options, chart.options);

		        // If the top-level chart option is present, some special updates are
		        // required
		        optionsChart = options.chart;
		        if (optionsChart) {

		            merge(true, chart.options.chart, optionsChart);

		            // Setter function
		            if ('className' in optionsChart) {
		                chart.setClassName(optionsChart.className);
		            }

		            if ('reflow' in optionsChart) {
		                chart.setReflow(optionsChart.reflow);
		            }

		            if (
		                'inverted' in optionsChart ||
		                'polar' in optionsChart ||
		                'type' in optionsChart
		            ) {
		                // Parse options.chart.inverted and options.chart.polar together
		                // with the available series.
		                chart.propFromSeries();
		                updateAllAxes = true;
		            }

		            if ('alignTicks' in optionsChart) { // #6452
		                updateAllAxes = true;
		            }

		            objectEach(optionsChart, function (val, key) {
		                if (
		                    chart.propsRequireUpdateSeries.indexOf('chart.' + key) !==
		                    -1
		                ) {
		                    updateAllSeries = true;
		                }
		                // Only dirty box
		                if (chart.propsRequireDirtyBox.indexOf(key) !== -1) {
		                    chart.isDirtyBox = true;
		                }
		            });

		            if (!chart.styledMode && 'style' in optionsChart) {
		                chart.renderer.setStyle(optionsChart.style);
		            }
		        }

		        // Moved up, because tooltip needs updated plotOptions (#6218)
		        if (!chart.styledMode && options.colors) {
		            this.options.colors = options.colors;
		        }

		        if (options.plotOptions) {
		            merge(true, this.options.plotOptions, options.plotOptions);
		        }

		        // Some option stuctures correspond one-to-one to chart objects that
		        // have update methods, for example
		        // options.credits => chart.credits
		        // options.legend => chart.legend
		        // options.title => chart.title
		        // options.tooltip => chart.tooltip
		        // options.subtitle => chart.subtitle
		        // options.mapNavigation => chart.mapNavigation
		        // options.navigator => chart.navigator
		        // options.scrollbar => chart.scrollbar
		        objectEach(options, function (val, key) {
		            if (chart[key] && typeof chart[key].update === 'function') {
		                chart[key].update(val, false);

		            // If a one-to-one object does not exist, look for an adder function
		            } else if (typeof chart[adders[key]] === 'function') {
		                chart[adders[key]](val);
		            }

		            if (
		                key !== 'chart' &&
		                chart.propsRequireUpdateSeries.indexOf(key) !== -1
		            ) {
		                updateAllSeries = true;
		            }
		        });

		        // Setters for collections. For axes and series, each item is referred
		        // by an id. If the id is not found, it defaults to the corresponding
		        // item in the collection, so setting one series without an id, will
		        // update the first series in the chart. Setting two series without
		        // an id will update the first and the second respectively (#6019)
		        // chart.update and responsive.
		        this.collectionsWithUpdate.forEach(function (coll) {
		            var indexMap;

		            if (options[coll]) {

		                // In stock charts, the navigator series are also part of the
		                // chart.series array, but those series should not be handled
		                // here (#8196).
		                if (coll === 'series') {
		                    indexMap = [];
		                    chart[coll].forEach(function (s, i) {
		                        if (!s.options.isInternal) {
		                            indexMap.push(pick(s.options.index, i));
		                        }
		                    });
		                }


		                splat(options[coll]).forEach(function (newOptions, i) {
		                    var item = (
		                        defined(newOptions.id) &&
		                        chart.get(newOptions.id)
		                    ) || chart[coll][indexMap ? indexMap[i] : i];
		                    if (item && item.coll === coll) {
		                        item.update(newOptions, false);

		                        if (oneToOne) {
		                            item.touched = true;
		                        }
		                    }

		                    // If oneToOne and no matching item is found, add one
		                    if (!item && oneToOne) {
		                        if (coll === 'series') {
		                            chart.addSeries(newOptions, false)
		                                .touched = true;
		                        } else if (coll === 'xAxis' || coll === 'yAxis') {
		                            chart.addAxis(newOptions, coll === 'xAxis', false)
		                                .touched = true;
		                        }
		                    }

		                });

		                // Add items for removal
		                if (oneToOne) {
		                    chart[coll].forEach(function (item) {
		                        if (!item.touched && !item.options.isInternal) {
		                            itemsForRemoval.push(item);
		                        } else {
		                            delete item.touched;
		                        }
		                    });
		                }


		            }
		        });

		        itemsForRemoval.forEach(function (item) {
		            if (item.remove) {
		                item.remove(false);
		            }
		        });

		        if (updateAllAxes) {
		            chart.axes.forEach(function (axis) {
		                axis.update({}, false);
		            });
		        }

		        // Certain options require the whole series structure to be thrown away
		        // and rebuilt
		        if (updateAllSeries) {
		            chart.series.forEach(function (series) {
		                series.update({}, false);
		            });
		        }

		        // For loading, just update the options, do not redraw
		        if (options.loading) {
		            merge(true, chart.options.loading, options.loading);
		        }

		        // Update size. Redraw is forced.
		        newWidth = optionsChart && optionsChart.width;
		        newHeight = optionsChart && optionsChart.height;
		        if ((isNumber(newWidth) && newWidth !== chart.chartWidth) ||
		                (isNumber(newHeight) && newHeight !== chart.chartHeight)) {
		            chart.setSize(newWidth, newHeight, animation);
		        } else if (pick(redraw, true)) {
		            chart.redraw(animation);
		        }

		        fireEvent(chart, 'afterUpdate', { options: options });

		    },

		    /**
		     * Shortcut to set the subtitle options. This can also be done from {@link
		     * Chart#update} or {@link Chart#setTitle}.
		     *
		     * @function Highcharts.Chart#setSubtitle
		     *
		     * @param {Highcharts.SubtitleOptions} options
		     *        New subtitle options. The subtitle text itself is set by the
		     *        `options.text` property.
		     */
		    setSubtitle: function (options) {
		        this.setTitle(undefined, options);
		    }


		});

		// extend the Point prototype for dynamic methods
		extend(Point.prototype, /** @lends Highcharts.Point.prototype */ {
		    /**
		     * Update point with new options (typically x/y data) and optionally redraw
		     * the series.
		     *
		     * @sample highcharts/members/point-update-column/
		     *         Update column value
		     * @sample highcharts/members/point-update-pie/
		     *         Update pie slice
		     * @sample maps/members/point-update/
		     *         Update map area value in Highmaps
		     *
		     * @function Highcharts.Point#update
		     *
		     * @param {number|object|Array<number|string>|null} options
		     *        The point options. Point options are handled as described under
		     *        the `series.type.data` item for each series type. For example
		     *        for a line series, if options is a single number, the point will
		     *        be given that number as the marin y value. If it is an array, it
		     *        will be interpreted as x and y values respectively. If it is an
		     *        object, advanced options are applied.
		     *
		     * @param {boolean} [redraw=true]
		     *        Whether to redraw the chart after the point is updated. If doing
		     *        more operations on the chart, it is best practice to set
		     *        `redraw` to false and call `chart.redraw()` after.
		     *
		     * @param {boolean|Highcharts.AnimationOptionsObject} [animation=true]
		     *        Whether to apply animation, and optionally animation
		     *        configuration.
		     *
		     * @fires Highcharts.Point#event:update
		     */
		    update: function (options, redraw, animation, runEvent) {
		        var point = this,
		            series = point.series,
		            graphic = point.graphic,
		            i,
		            chart = series.chart,
		            seriesOptions = series.options;

		        redraw = pick(redraw, true);

		        function update() {

		            point.applyOptions(options);

		            // Update visuals
		            if (point.y === null && graphic) { // #4146
		                point.graphic = graphic.destroy();
		            }
		            if (isObject(options, true)) {
		                // Destroy so we can get new elements
		                if (graphic && graphic.element) {
		                    // "null" is also a valid symbol
		                    if (
		                        options &&
		                        options.marker &&
		                        options.marker.symbol !== undefined
		                    ) {
		                        point.graphic = graphic.destroy();
		                    }
		                }
		                if (options && options.dataLabels && point.dataLabel) { // #2468
		                    point.dataLabel = point.dataLabel.destroy();
		                }
		                if (point.connector) {
		                    point.connector = point.connector.destroy(); // #7243
		                }
		            }

		            // record changes in the parallel arrays
		            i = point.index;
		            series.updateParallelArrays(point, i);

		            // Record the options to options.data. If the old or the new config
		            // is an object, use point options, otherwise use raw options
		            // (#4701, #4916).
		            seriesOptions.data[i] = (
		                    isObject(seriesOptions.data[i], true) ||
		                    isObject(options, true)
		                ) ?
		                point.options :
		                pick(options, seriesOptions.data[i]);

		            // redraw
		            series.isDirty = series.isDirtyData = true;
		            if (!series.fixedBox && series.hasCartesianSeries) { // #1906, #2320
		                chart.isDirtyBox = true;
		            }

		            if (seriesOptions.legendType === 'point') { // #1831, #1885
		                chart.isDirtyLegend = true;
		            }
		            if (redraw) {
		                chart.redraw(animation);
		            }
		        }

		        // Fire the event with a default handler of doing the update
		        if (runEvent === false) { // When called from setData
		            update();
		        } else {
		            point.firePointEvent('update', { options: options }, update);
		        }
		    },

		    /**
		     * Remove a point and optionally redraw the series and if necessary the axes
		     *
		     * @sample highcharts/plotoptions/series-point-events-remove/
		     *         Remove point and confirm
		     * @sample highcharts/members/point-remove/
		     *         Remove pie slice
		     * @sample maps/members/point-remove/
		     *         Remove selected points in Highmaps
		     *
		     * @function Highcharts.Point#remove
		     *
		     * @param {boolean} redraw
		     *        Whether to redraw the chart or wait for an explicit call. When
		     *        doing more operations on the chart, for example running
		     *        `point.remove()` in a loop, it is best practice to set `redraw`
		     *        to false and call `chart.redraw()` after.
		     *
		     * @param {boolean|Highcharts.AnimationOptionsObject} [animation=false]
		     *        Whether to apply animation, and optionally animation
		     *        configuration.
		     */
		    remove: function (redraw, animation) {
		        this.series.removePoint(
		            this.series.data.indexOf(this),
		            redraw,
		            animation
		        );
		    }
		});

		// Extend the series prototype for dynamic methods
		extend(Series.prototype, /** @lends Series.prototype */ {
		    /**
		     * Add a point to the series after render time. The point can be added at
		     * the end, or by giving it an X value, to the start or in the middle of the
		     * series.
		     *
		     * @sample highcharts/members/series-addpoint-append/
		     *         Append point
		     * @sample highcharts/members/series-addpoint-append-and-shift/
		     *         Append and shift
		     * @sample highcharts/members/series-addpoint-x-and-y/
		     *         Both X and Y values given
		     * @sample highcharts/members/series-addpoint-pie/
		     *         Append pie slice
		     * @sample stock/members/series-addpoint/
		     *         Append 100 points in Highstock
		     * @sample stock/members/series-addpoint-shift/
		     *         Append and shift in Highstock
		     * @sample maps/members/series-addpoint/
		     *         Add a point in Highmaps
		     *
		     * @function Highcharts.Series#addPoint
		     *
		     * @param {number|object|Array<number|string>|null} options
		     *        The point options. If options is a single number, a point with
		     *        that y value is appended to the series. If it is an array, it will
		     *        be interpreted as x and y values respectively. If it is an
		     *        object, advanced options as outlined under `series.data` are
		     *        applied.
		     *
		     * @param {boolean} [redraw=true]
		     *        Whether to redraw the chart after the point is added. When adding
		     *        more than one point, it is highly recommended that the redraw
		     *        option be set to false, and instead {@link Chart#redraw} is
		     *        explicitly called after the adding of points is finished.
		     *        Otherwise, the chart will redraw after adding each point.
		     *
		     * @param {boolean} [shift=false]
		     *        If true, a point is shifted off the start of the series as one is
		     *        appended to the end.
		     *
		     * @param {boolean|Highcharts.AnimationOptionsObject} [animation]
		     *        Whether to apply animation, and optionally animation
		     *        configuration.
		     */
		    addPoint: function (options, redraw, shift, animation) {
		        var series = this,
		            seriesOptions = series.options,
		            data = series.data,
		            chart = series.chart,
		            xAxis = series.xAxis,
		            names = xAxis && xAxis.hasNames && xAxis.names,
		            dataOptions = seriesOptions.data,
		            point,
		            isInTheMiddle,
		            xData = series.xData,
		            i,
		            x;

		        // Optional redraw, defaults to true
		        redraw = pick(redraw, true);

		        // Get options and push the point to xData, yData and series.options. In
		        // series.generatePoints the Point instance will be created on demand
		        // and pushed to the series.data array.
		        point = { series: series };
		        series.pointClass.prototype.applyOptions.apply(point, [options]);
		        x = point.x;

		        // Get the insertion point
		        i = xData.length;
		        if (series.requireSorting && x < xData[i - 1]) {
		            isInTheMiddle = true;
		            while (i && xData[i - 1] > x) {
		                i--;
		            }
		        }

		        // Insert undefined item
		        series.updateParallelArrays(point, 'splice', i, 0, 0);
		        // Update it
		        series.updateParallelArrays(point, i);

		        if (names && point.name) {
		            names[x] = point.name;
		        }
		        dataOptions.splice(i, 0, options);

		        if (isInTheMiddle) {
		            series.data.splice(i, 0, null);
		            series.processData();
		        }

		        // Generate points to be added to the legend (#1329)
		        if (seriesOptions.legendType === 'point') {
		            series.generatePoints();
		        }

		        // Shift the first point off the parallel arrays
		        if (shift) {
		            if (data[0] && data[0].remove) {
		                data[0].remove(false);
		            } else {
		                data.shift();
		                series.updateParallelArrays(point, 'shift');

		                dataOptions.shift();
		            }
		        }

		        // redraw
		        series.isDirty = true;
		        series.isDirtyData = true;

		        if (redraw) {
		            chart.redraw(animation); // Animation is set anyway on redraw, #5665
		        }
		    },

		    /**
		     * Remove a point from the series. Unlike the
		     * {@link Highcharts.Point#remove} method, this can also be done on a point
		     * that is not instanciated because it is outside the view or subject to
		     * Highstock data grouping.
		     *
		     * @sample highcharts/members/series-removepoint/
		     *         Remove cropped point
		     *
		     * @function Highcharts.Series#removePoint
		     *
		     * @param {number} i
		     *        The index of the point in the {@link Highcharts.Series.data|data}
		     *        array.
		     *
		     * @param {boolean} [redraw=true]
		     *        Whether to redraw the chart after the point is added. When
		     *        removing more than one point, it is highly recommended that the
		     *        `redraw` option be set to `false`, and instead {@link
		     *        Highcharts.Chart#redraw} is explicitly called after the adding of
		     *        points is finished.
		     *
		     * @param {boolean|Highcharts.AnimationOptionsObject} [animation]
		     *        Whether and optionally how the series should be animated.
		     *
		     * @fires Highcharts.Point#event:remove
		     */
		    removePoint: function (i, redraw, animation) {

		        var series = this,
		            data = series.data,
		            point = data[i],
		            points = series.points,
		            chart = series.chart,
		            remove = function () {

		                if (points && points.length === data.length) { // #4935
		                    points.splice(i, 1);
		                }
		                data.splice(i, 1);
		                series.options.data.splice(i, 1);
		                series.updateParallelArrays(
		                    point || { series: series },
		                    'splice',
		                    i,
		                    1
		                );

		                if (point) {
		                    point.destroy();
		                }

		                // redraw
		                series.isDirty = true;
		                series.isDirtyData = true;
		                if (redraw) {
		                    chart.redraw();
		                }
		            };

		        setAnimation(animation, chart);
		        redraw = pick(redraw, true);

		        // Fire the event with a default handler of removing the point
		        if (point) {
		            point.firePointEvent('remove', null, remove);
		        } else {
		            remove();
		        }
		    },

		    /**
		     * Remove a series and optionally redraw the chart.
		     *
		     * @sample highcharts/members/series-remove/
		     *         Remove first series from a button
		     *
		     * @function Highcharts.Series#remove
		     *
		     * @param {boolean} [redraw=true]
		     *        Whether to redraw the chart or wait for an explicit call to
		     *        {@link Highcharts.Chart#redraw}.
		     *
		     * @param {boolean|Highcharts.AnimationOptionsObject} [animation]
		     *        Whether to apply animation, and optionally animation
		     *        configuration.
		     *
		     * @param {boolean} [withEvent=true]
		     *        Used internally, whether to fire the series `remove` event.
		     *
		     * @fires Highcharts.Series#event:remove
		     */
		    remove: function (redraw, animation, withEvent) {
		        var series = this,
		            chart = series.chart;

		        function remove() {

		            // Destroy elements
		            series.destroy();
		            series.remove = null; // Prevent from doing again (#9097)

		            // Redraw
		            chart.isDirtyLegend = chart.isDirtyBox = true;
		            chart.linkSeries();

		            if (pick(redraw, true)) {
		                chart.redraw(animation);
		            }
		        }

		        // Fire the event with a default handler of removing the point
		        if (withEvent !== false) {
		            fireEvent(series, 'remove', null, remove);
		        } else {
		            remove();
		        }
		    },

		    /**
		     * Update the series with a new set of options. For a clean and precise
		     * handling of new options, all methods and elements from the series are
		     * removed, and it is initiated from scratch. Therefore, this method is more
		     * performance expensive than some other utility methods like {@link
		     * Series#setData} or {@link Series#setVisible}.
		     *
		     * @sample highcharts/members/series-update/
		     *         Updating series options
		     * @sample maps/members/series-update/
		     *         Update series options in Highmaps
		     *
		     * @function Highcharts.Series#update
		     *
		     * @param {Highcharts.SeriesOptionsType} options
		     *        New options that will be merged with the series' existing options.
		     *
		     * @param {boolean} [redraw=true]
		     *        Whether to redraw the chart after the series is altered. If doing
		     *        more operations on the chart, it is a good idea to set redraw to
		     *        false and call {@link Chart#redraw} after.
		     *
		     * @fires Highcharts.Series#event:afterUpdate
		     */
		    update: function (newOptions, redraw) {

		        newOptions = H.cleanRecursively(newOptions, this.userOptions);

		        var series = this,
		            chart = series.chart,
		            // must use user options when changing type because series.options
		            // is merged in with type specific plotOptions
		            oldOptions = series.userOptions,
		            oldType = series.oldType || series.type,
		            newType = (
		                newOptions.type ||
		                oldOptions.type ||
		                chart.options.chart.type
		            ),
		            proto = seriesTypes[oldType].prototype,
		            n,
		            groups = [
		                'group',
		                'markerGroup',
		                'dataLabelsGroup'
		            ],
		            preserve = [
		                'navigatorSeries',
		                'baseSeries'
		            ],

		            // Animation must be enabled when calling update before the initial
		            // animation has first run. This happens when calling update
		            // directly after chart initialization, or when applying responsive
		            // rules (#6912).
		            animation = series.finishedAnimating && { animation: false },
		            allowSoftUpdate = [
		                'data',
		                'name',
		                'turboThreshold'
		            ],
		            keys = Object.keys(newOptions),
		            doSoftUpdate = keys.length > 0;

		        // Running Series.update to update the data only is an intuitive usage,
		        // so we want to make sure that when used like this, we run the
		        // cheaper setData function and allow animation instead of completely
		        // recreating the series instance. This includes sideways animation when
		        // adding points to the data set. The `name` should also support soft
		        // update because the data module sets name and data when setting new
		        // data by `chart.update`.
		        keys.forEach(function (key) {
		            if (allowSoftUpdate.indexOf(key) === -1) {
		                doSoftUpdate = false;
		            }
		        });
		        if (doSoftUpdate) {
		            if (newOptions.data) {
		                this.setData(newOptions.data, false);
		            }
		            if (newOptions.name) {
		                this.setName(newOptions.name, false);
		            }
		        } else {

		            // Make sure preserved properties are not destroyed (#3094)
		            preserve = groups.concat(preserve);
		            preserve.forEach(function (prop) {
		                preserve[prop] = series[prop];
		                delete series[prop];
		            });

		            // Do the merge, with some forced options
		            newOptions = merge(oldOptions, animation, {
		                index: series.index,
		                pointStart: pick(
		                    oldOptions.pointStart, // when updating from blank (#7933)
		                    series.xData[0] // when updating after addPoint
		                )
		            }, { data: series.options.data }, newOptions);

		            // Destroy the series and delete all properties. Reinsert all
		            // methods and properties from the new type prototype (#2270,
		            // #3719).
		            series.remove(false, null, false);
		            for (n in proto) {
		                series[n] = undefined;
		            }
		            if (seriesTypes[newType || oldType]) {
		                extend(series, seriesTypes[newType || oldType].prototype);
		            } else {
		                H.error(17, true, chart);
		            }

		            // Re-register groups (#3094) and other preserved properties
		            preserve.forEach(function (prop) {
		                series[prop] = preserve[prop];
		            });

		            series.init(chart, newOptions);

		            // Update the Z index of groups (#3380, #7397)
		            if (newOptions.zIndex !== oldOptions.zIndex) {
		                groups.forEach(function (groupName) {
		                    if (series[groupName]) {
		                        series[groupName].attr({
		                            zIndex: newOptions.zIndex
		                        });
		                    }
		                });
		            }


		            series.oldType = oldType;
		            chart.linkSeries(); // Links are lost in series.remove (#3028)

		        }
		        fireEvent(this, 'afterUpdate');

		        if (pick(redraw, true)) {
		            chart.redraw(doSoftUpdate ? undefined : false);
		        }
		    },

		    /**
		     * Used from within series.update
		     *
		     * @private
		     * @function Highcharts.Series#setName
		     *
		     * @param {string} name
		     */
		    setName: function (name) {
		        this.name = this.options.name = this.userOptions.name = name;
		        this.chart.isDirtyLegend = true;
		    }
		});

		// Extend the Axis.prototype for dynamic methods
		extend(Axis.prototype, /** @lends Highcharts.Axis.prototype */ {

		    /**
		     * Update an axis object with a new set of options. The options are merged
		     * with the existing options, so only new or altered options need to be
		     * specified.
		     *
		     * @sample highcharts/members/axis-update/
		     *         Axis update demo
		     *
		     * @function Highcharts.Axis#update
		     *
		     * @param {Highcharts.XAxisOptions|Highcharts.YAxisOptions|Highcharts.ZAxisOptions} options
		     *        The new options that will be merged in with existing options on
		     *        the axis.
		     *
		     * @param {boolean} [redraw=true]
		     *        Whether to redraw the chart after the axis is altered. If doing
		     *        more operations on the chart, it is a good idea to set redraw to
		     *        false and call {@link Chart#redraw} after.
		     */
		    update: function (options, redraw) {
		        var chart = this.chart,
		            newEvents = ((options && options.events) || {});

		        options = merge(this.userOptions, options);

		        // Color Axis is not an array,
		        // This change is applied in the ColorAxis wrapper
		        if (chart.options[this.coll].indexOf) {
		            // Don't use this.options.index,
		            // StockChart has Axes in navigator too
		            chart.options[this.coll][
		                chart.options[this.coll].indexOf(this.userOptions)
		            ] = options;
		        }

		        // Remove old events, if no new exist (#8161)
		        objectEach(chart.options[this.coll].events, function (fn, ev) {
		            if (typeof newEvents[ev] === 'undefined') {
		                newEvents[ev] = undefined;
		            }
		        });

		        this.destroy(true);
		        this.init(chart, extend(options, { events: newEvents }));

		        chart.isDirtyBox = true;
		        if (pick(redraw, true)) {
		            chart.redraw();
		        }
		    },

		    /**
		     * Remove the axis from the chart.
		     *
		     * @sample highcharts/members/chart-addaxis/
		     *         Add and remove axes
		     *
		     * @function Highcharts.Axis#remove
		     *
		     * @param {boolean} [redraw=true]
		     *        Whether to redraw the chart following the remove.
		     */
		    remove: function (redraw) {
		        var chart = this.chart,
		            key = this.coll, // xAxis or yAxis
		            axisSeries = this.series,
		            i = axisSeries.length;

		        // Remove associated series (#2687)
		        while (i--) {
		            if (axisSeries[i]) {
		                axisSeries[i].remove(false);
		            }
		        }

		        // Remove the axis
		        erase(chart.axes, this);
		        erase(chart[key], this);

		        if (isArray(chart.options[key])) {
		            chart.options[key].splice(this.options.index, 1);
		        } else { // color axis, #6488
		            delete chart.options[key];
		        }

		        chart[key].forEach(function (axis, i) { // Re-index, #1706, #8075
		            axis.options.index = axis.userOptions.index = i;
		        });
		        this.destroy();
		        chart.isDirtyBox = true;

		        if (pick(redraw, true)) {
		            chart.redraw();
		        }
		    },

		    /**
		     * Update the axis title by options after render time.
		     *
		     * @sample highcharts/members/axis-settitle/
		     *         Set a new Y axis title
		     *
		     * @function Highcharts.Axis#setTitle
		     *
		     * @param {Highcharts.XAxisTitleOptions|Highcharts.YAxisTitleOptions|Highcharts.ZAxisTitleOptions} titleOptions
		     *        The additional title options.
		     *
		     * @param {boolean} [redraw=true]
		     *        Whether to redraw the chart after setting the title.
		     */
		    setTitle: function (titleOptions, redraw) {
		        this.update({ title: titleOptions }, redraw);
		    },

		    /**
		     * Set new axis categories and optionally redraw.
		     *
		     * @sample highcharts/members/axis-setcategories/
		     *         Set categories by click on a button
		     *
		     * @function Highcharts.Axis#setCategories
		     *
		     * @param {Array<string>} categories
		     *        The new categories.
		     *
		     * @param {boolean} [redraw=true]
		     *        Whether to redraw the chart.
		     */
		    setCategories: function (categories, redraw) {
		        this.update({ categories: categories }, redraw);
		    }

		});

	}(Highcharts));
	(function (H, onSeriesMixin) {
		/* *
		 * (c) 2010-2018 Torstein Honsi
		 *
		 * License: www.highcharts.com/license
		 */



		var addEvent = H.addEvent,
		    merge = H.merge,
		    noop = H.noop,
		    defined = H.defined,
		    Renderer = H.Renderer,
		    Series = H.Series,
		    seriesType = H.seriesType,
		    SVGRenderer = H.SVGRenderer,
		    TrackerMixin = H.TrackerMixin,
		    VMLRenderer = H.VMLRenderer,
		    symbols = SVGRenderer.prototype.symbols;

		/**
		 * The Flags series.
		 *
		 * @private
		 * @class
		 * @name Highcharts.seriesTypes.flags
		 *
		 * @augments Highcharts.Series
		 */
		seriesType('flags', 'column'

		/**
		 * Flags are used to mark events in stock charts. They can be added on the
		 * timeline, or attached to a specific series.
		 *
		 * @sample stock/demo/flags-general/
		 *         Flags on a line series
		 *
		 * @extends      plotOptions.column
		 * @excluding    animation, borderColor, borderRadius, borderWidth,
		 *               colorByPoint, dataGrouping, pointPadding, pointWidth,
		 *               turboThreshold
		 * @product      highstock
		 * @optionparent plotOptions.flags
		 */
		, {

		    /**
		     * In case the flag is placed on a series, on what point key to place
		     * it. Line and columns have one key, `y`. In range or OHLC-type series,
		     * however, the flag can optionally be placed on the `open`, `high`,
		     *  `low` or `close` key.
		     *
		     * @sample {highstock} stock/plotoptions/flags-onkey/
		     *         Range series, flag on high
		     *
		     * @type       {string}
		     * @default    y
		     * @since      4.2.2
		     * @product    highstock
		     * @validvalue ["y", "open", "high", "low", "close"]
		     * @apioption  plotOptions.flags.onKey
		     */

		    /**
		     * The id of the series that the flags should be drawn on. If no id
		     * is given, the flags are drawn on the x axis.
		     *
		     * @sample {highstock} stock/plotoptions/flags/
		     *         Flags on series and on x axis
		     *
		     * @type      {string}
		     * @product   highstock
		     * @apioption plotOptions.flags.onSeries
		     */

		    pointRange: 0, // #673

		    /**
		     * Whether the flags are allowed to overlap sideways. If `false`, the flags
		     * are moved sideways using an algorithm that seeks to place every flag as
		     * close as possible to its original position.
		     *
		     * @sample {highstock} stock/plotoptions/flags-allowoverlapx
		     *         Allow sideways overlap
		     *
		     * @since 6.0.4
		     */
		    allowOverlapX: false,

		    /**
		     * The shape of the marker. Can be one of "flag", "circlepin", "squarepin",
		     * or an image of the format `url(/path-to-image.jpg)`. Individual
		     * shapes can also be set for each point.
		     *
		     * @sample {highstock} stock/plotoptions/flags/
		     *         Different shapes
		     *
		     * @product    highstock
		     * @validvalue ["flag", "circlepin", "squarepin"]
		     */
		    shape: 'flag',

		    /**
		     * When multiple flags in the same series fall on the same value, this
		     * number determines the vertical offset between them.
		     *
		     * @sample {highstock} stock/plotoptions/flags-stackdistance/
		     *         A greater stack distance
		     *
		     * @product highstock
		     */
		    stackDistance: 12,

		    /**
		     * Text alignment for the text inside the flag.
		     *
		     * @since      5.0.0
		     * @product    highstock
		     * @validvalue ["left", "center", "right"]
		     */
		    textAlign: 'center',

		    /**
		     * Specific tooltip options for flag series. Flag series tooltips are
		     * different from most other types in that a flag doesn't have a data
		     * value, so the tooltip rather displays the `text` option for each
		     * point.
		     *
		     * @extends   plotOptions.series.tooltip
		     * @excluding changeDecimals, valueDecimals, valuePrefix, valueSuffix
		     * @product   highstock
		     */
		    tooltip: {
		        pointFormat: '{point.text}<br/>'
		    },

		    threshold: null,

		    /**
		     * The text to display on each flag. This can be defined on series level,
		     *  or individually for each point. Defaults to `"A"`.
		     *
		     * @type      {string}
		     * @default   A
		     * @product   highstock
		     * @apioption plotOptions.flags.title
		     */

		    /**
		     * The y position of the top left corner of the flag relative to either
		     * the series (if onSeries is defined), or the x axis. Defaults to
		     * `-30`.
		     *
		     * @product highstock
		     */
		    y: -30,

		    /**
		     * Whether to use HTML to render the flag texts. Using HTML allows for
		     * advanced formatting, images and reliable bi-directional text rendering.
		     * Note that exported images won't respect the HTML, and that HTML
		     * won't respect Z-index settings.
		     *
		     * @type      {boolean}
		     * @default   false
		     * @since     1.3
		     * @product   highstock
		     * @apioption plotOptions.flags.useHTML
		     */

		    /**
		     * Fixed width of the flag's shape. By default, width is autocalculated
		     * according to the flag's title.
		     *
		     * @sample {highstock} stock/demo/flags-shapes/
		     *         Flags with fixed width
		     *
		     * @type      {number}
		     * @product   highstock
		     * @apioption plotOptions.flags.width
		     */

		     /**
		     * Fixed height of the flag's shape. By default, height is autocalculated
		     * according to the flag's title.
		     *
		     * @type      {number}
		     * @product   highstock
		     * @apioption plotOptions.flags.height
		     */

		    /**
		     * The fill color for the flags.
		     *
		     * @type    {Highcharts.ColorString|Highcharts.GradientColorObject}
		     * @product highstock
		     */
		    fillColor: '#ffffff',

		    /**
		     * The color of the line/border of the flag.
		     *
		     * In styled mode, the stroke is set in the
		     * `.highcharts-flag-series.highcharts-point` rule.
		     *
		     * @type      {Highcharts.ColorString}
		     * @default   #000000
		     * @product   highstock
		     * @apioption plotOptions.flags.lineColor
		     */

		    /**
		     * The pixel width of the flag's line/border.
		     *
		     * @product highstock
		     */
		    lineWidth: 1,

		    states: {

		        /**
		         * @extends plotOptions.column.states.hover
		         * @product highstock
		         */
		        hover: {

		            /**
		             * The color of the line/border of the flag.
		             *
		             * @type    {Highcharts.ColorString}
		             * @product highstock
		             */
		            lineColor: '#000000',

		            /**
		             * The fill or background color of the flag.
		             *
		             * @type    {Highcharts.ColorString|Highcharts.GradientColorObject}
		             * @product highstock
		             */
		            fillColor: '#ccd6eb'
		        }
		    },

		    /**
		     * The text styles of the flag.
		     *
		     * In styled mode, the styles are set in the
		     * `.highcharts-flag-series .highcharts-point` rule.
		     *
		     * @type    {Highcharts.CSSObject}
		     * @default {"fontSize": "11px", "fontWeight": "bold"}
		     * @product highstock
		     */
		    style: {
		        /** @ignore */
		        fontSize: '11px',
		        /** @ignore */
		        fontWeight: 'bold'
		    }

		}, /** @lends seriesTypes.flags.prototype */ {
		    sorted: false,
		    noSharedTooltip: true,
		    allowDG: false,
		    takeOrdinalPosition: false, // #1074
		    trackerGroups: ['markerGroup'],
		    forceCrop: true,

		    /**
		     * Inherit the initialization from base Series.
		     *
		     * @private
		     * @borrows Highcharts.Series#init as Highcharts.seriesTypes.flags#init
		     */
		    init: Series.prototype.init,

		    /**
		     * Get presentational attributes
		     *
		     * @private
		     * @function Highcharts.seriesTypes.flags#pointAttribs
		     *
		     * @param {Highcharts.Point} point
		     *
		     * @param {string} [state]
		     *
		     * @return {Highcharts.SVGAttributes}
		     */
		    pointAttribs: function (point, state) {
		        var options = this.options,
		            color = (point && point.color) || this.color,
		            lineColor = options.lineColor,
		            lineWidth = (point && point.lineWidth),
		            fill = (point && point.fillColor) || options.fillColor;

		        if (state) {
		            fill = options.states[state].fillColor;
		            lineColor = options.states[state].lineColor;
		            lineWidth = options.states[state].lineWidth;
		        }

		        return {
		            'fill': fill || color,
		            'stroke': lineColor || color,
		            'stroke-width': lineWidth || options.lineWidth || 0
		        };
		    },

		    translate: onSeriesMixin.translate,
		    getPlotBox: onSeriesMixin.getPlotBox,

		    /**
		     * Draw the markers.
		     *
		     * @private
		     * @function Highcharts.seriesTypes.flags#drawPoints
		     */
		    drawPoints: function () {
		        var series = this,
		            points = series.points,
		            chart = series.chart,
		            renderer = chart.renderer,
		            plotX,
		            plotY,
		            inverted = chart.inverted,
		            options = series.options,
		            optionsY = options.y,
		            shape,
		            i,
		            point,
		            graphic,
		            stackIndex,
		            anchorY,
		            attribs,
		            outsideRight,
		            yAxis = series.yAxis,
		            boxesMap = {},
		            boxes = [];

		        i = points.length;
		        while (i--) {
		            point = points[i];
		            outsideRight =
		                (inverted ? point.plotY : point.plotX) > series.xAxis.len;
		            plotX = point.plotX;
		            stackIndex = point.stackIndex;
		            shape = point.options.shape || options.shape;
		            plotY = point.plotY;

		            if (plotY !== undefined) {
		                plotY = point.plotY + optionsY -
		                    (
		                        stackIndex !== undefined &&
		                        stackIndex * options.stackDistance
		                    );
		            }
		            // skip connectors for higher level stacked points
		            point.anchorX = stackIndex ? undefined : point.plotX;
		            anchorY = stackIndex ? undefined : point.plotY;

		            graphic = point.graphic;

		            // Only draw the point if y is defined and the flag is within
		            // the visible area
		            if (plotY !== undefined && plotX >= 0 && !outsideRight) {

		                // Create the flag
		                if (!graphic) {
		                    graphic = point.graphic = renderer.label(
		                        '',
		                        null,
		                        null,
		                        shape,
		                        null,
		                        null,
		                        options.useHTML
		                    );

		                    if (!chart.styledMode) {
		                        graphic
		                            .attr(series.pointAttribs(point))
		                            .css(merge(options.style, point.style));
		                    }

		                    graphic.attr({
		                        align: shape === 'flag' ? 'left' : 'center',
		                        width: options.width,
		                        height: options.height,
		                        'text-align': options.textAlign
		                    })
		                    .addClass('highcharts-point')
		                    .add(series.markerGroup);

		                    // Add reference to the point for tracker (#6303)
		                    if (point.graphic.div) {
		                        point.graphic.div.point = point;
		                    }

		                    if (!chart.styledMode) {
		                        graphic.shadow(options.shadow);
		                    }

		                    graphic.isNew = true;
		                }

		                if (plotX > 0) { // #3119
		                    plotX -= graphic.strokeWidth() % 2; // #4285
		                }

		                // Plant the flag
		                attribs = {
		                    y: plotY,
		                    anchorY: anchorY
		                };
		                if (options.allowOverlapX) {
		                    attribs.x = plotX;
		                    attribs.anchorX = point.anchorX;
		                }
		                graphic.attr({
		                    text: point.options.title || options.title || 'A'
		                })[graphic.isNew ? 'attr' : 'animate'](attribs);

		                // Rig for the distribute function
		                if (!options.allowOverlapX) {
		                    if (!boxesMap[point.plotX]) {
		                        boxesMap[point.plotX] = {
		                            align: 0,
		                            size: graphic.width,
		                            target: plotX,
		                            anchorX: plotX
		                        };
		                    } else {
		                        boxesMap[point.plotX].size = Math.max(
		                            boxesMap[point.plotX].size,
		                            graphic.width
		                        );
		                    }
		                }

		                // Set the tooltip anchor position
		                point.tooltipPos = [
		                    plotX,
		                    plotY + yAxis.pos - chart.plotTop
		                ]; // #6327

		            } else if (graphic) {
		                point.graphic = graphic.destroy();
		            }

		        }

		        // Handle X-dimension overlapping
		        if (!options.allowOverlapX) {
		            H.objectEach(boxesMap, function (box) {
		                box.plotX = box.anchorX;
		                boxes.push(box);
		            });

		            H.distribute(boxes, inverted ? yAxis.len : this.xAxis.len, 100);

		            points.forEach(function (point) {
		                var box = point.graphic && boxesMap[point.plotX];
		                if (box) {
		                    point.graphic[point.graphic.isNew ? 'attr' : 'animate']({
		                        x: box.pos,
		                        anchorX: point.anchorX
		                    });
		                    // Hide flag when its box position is not specified
		                    // (#8573, #9299)
		                    if (!defined(box.pos)) {
		                        point.graphic.attr({
		                            x: -9999,
		                            anchorX: -9999
		                        });
		                        point.graphic.isNew = true;
		                    } else {
		                        point.graphic.isNew = false;
		                    }
		                }
		            });
		        }

		        // Might be a mix of SVG and HTML and we need events for both (#6303)
		        if (options.useHTML) {
		            H.wrap(series.markerGroup, 'on', function (proceed) {
		                return H.SVGElement.prototype.on.apply(
		                    // for HTML
		                    proceed.apply(this, [].slice.call(arguments, 1)),
		                    // and for SVG
		                    [].slice.call(arguments, 1));
		            });
		        }

		    },

		    /**
		     * Extend the column trackers with listeners to expand and contract stacks.
		     *
		     * @private
		     * @function Highcharts.seriesTypes.flags#drawTracker
		     */
		    drawTracker: function () {
		        var series = this,
		            points = series.points;

		        TrackerMixin.drawTrackerPoint.apply(this);

		        /* *
		         * Bring each stacked flag up on mouse over, this allows readability of
		         * vertically stacked elements as well as tight points on the x axis.
		         * #1924.
		         */
		        points.forEach(function (point) {
		            var graphic = point.graphic;
		            if (graphic) {
		                addEvent(graphic.element, 'mouseover', function () {

		                    // Raise this point
		                    if (point.stackIndex > 0 && !point.raised) {
		                        point._y = graphic.y;
		                        graphic.attr({
		                            y: point._y - 8
		                        });
		                        point.raised = true;
		                    }

		                    // Revert other raised points
		                    points.forEach(function (otherPoint) {
		                        if (
		                            otherPoint !== point &&
		                            otherPoint.raised &&
		                            otherPoint.graphic
		                        ) {
		                            otherPoint.graphic.attr({
		                                y: otherPoint._y
		                            });
		                            otherPoint.raised = false;
		                        }
		                    });
		                });
		            }
		        });
		    },

		    /**
		     * Disable animation, but keep clipping (#8546).
		     *
		     * @private
		     * @function Highcharts.seriesTypes.flags#animate
		     *
		     * @param {boolean} [init]
		     */
		    animate: function (init) {
		        if (init) {
		            this.setClip();
		        } else {
		            this.animate = null;
		        }
		    },

		    /**
		     * @private
		     * @function Highcharts.seriesTypes.flags#setClip
		     */
		    setClip: function () {
		        Series.prototype.setClip.apply(this, arguments);
		        if (this.options.clip !== false && this.sharedClipKey) {
		            this.markerGroup.clip(this.chart[this.sharedClipKey]);
		        }
		    },

		    /**
		     * @private
		     * @function Highcharts.seriesTypes.flags#buildKDTree
		     */
		    buildKDTree: noop,

		    /**
		     * Don't invert the flag marker group (#4960).
		     *
		     * @private
		     * @function Highcharts.seriesTypes.flags#invertGroups
		     */
		    invertGroups: noop

		});

		// create the flag icon with anchor
		symbols.flag = function (x, y, w, h, options) {
		    var anchorX = (options && options.anchorX) || x,
		        anchorY = (options && options.anchorY) || y;

		    return symbols.circle(anchorX - 1, anchorY - 1, 2, 2).concat(
		        [
		            'M', anchorX, anchorY,
		            'L', x, y + h,
		            x, y,
		            x + w, y,
		            x + w, y + h,
		            x, y + h,
		            'Z'
		        ]
		    );
		};

		/*
		 * Create the circlepin and squarepin icons with anchor
		 */
		function createPinSymbol(shape) {
		    symbols[shape + 'pin'] = function (x, y, w, h, options) {

		        var anchorX = options && options.anchorX,
		            anchorY = options && options.anchorY,
		            path,
		            labelTopOrBottomY;

		        // For single-letter flags, make sure circular flags are not taller
		        // than their width
		        if (shape === 'circle' && h > w) {
		            x -= Math.round((h - w) / 2);
		            w = h;
		        }

		        path = symbols[shape](x, y, w, h);

		        if (anchorX && anchorY) {
		            /**
		             * If the label is below the anchor, draw the connecting line
		             * from the top edge of the label
		             * otherwise start drawing from the bottom edge
		             */
		            labelTopOrBottomY = (y > anchorY) ? y : y + h;
		            path.push(
		                'M',
		                shape === 'circle' ? path[1] - path[4] : path[1] + path[4] / 2,
		                labelTopOrBottomY,
		                'L',
		                anchorX,
		                anchorY
		            );
		            path = path.concat(
		                symbols.circle(anchorX - 1, anchorY - 1, 2, 2)
		            );
		        }

		        return path;
		    };
		}
		createPinSymbol('circle');
		createPinSymbol('square');

		/**
		 * The symbol callbacks are generated on the SVGRenderer object in all browsers.
		 * Even VML browsers need this in order to generate shapes in export. Now share
		 * them with the VMLRenderer.
		 */
		if (Renderer === VMLRenderer) {
		    ['flag', 'circlepin', 'squarepin'].forEach(function (shape) {
		        VMLRenderer.prototype.symbols[shape] = symbols[shape];
		    });
		}

		/**
		 * A `flags` series. If the [type](#series.flags.type) option is not
		 * specified, it is inherited from [chart.type](#chart.type).
		 *
		 * @extends   series,plotOptions.flags
		 * @excluding dataParser, dataURL
		 * @product   highstock
		 * @apioption series.flags
		 */

		/**
		 * 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 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.
		 *    ```js
		 *    data: [{
		 *        x: 1,
		 *        title: "A",
		 *        text: "First event"
		 *    }, {
		 *        x: 1,
		 *        title: "B",
		 *        text: "Second event"
		 *    }]
		 *    ```
		 *
		 * @type      {Array<*>}
		 * @extends   series.line.data
		 * @excluding dataLabels, marker, name, y
		 * @product   highstock
		 * @apioption series.flags.data
		 */

		/**
		 * The fill color of an individual flag. By default it inherits from
		 * the series color.
		 *
		 * @type      {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
		 * @product   highstock
		 * @apioption series.flags.data.fillColor
		 */

		/**
		 * The longer text to be shown in the flag's tooltip.
		 *
		 * @type      {string}
		 * @product   highstock
		 * @apioption series.flags.data.text
		 */

		/**
		 * The short text to be shown on the flag.
		 *
		 * @type      {string}
		 * @product   highstock
		 * @apioption series.flags.data.title
		 */

	}(Highcharts, onSeriesMixin));
	(function (H) {
		/**
		 * (c) 2010-2018 Torstein Honsi
		 *
		 * License: www.highcharts.com/license
		 */



		var attr = H.attr,
		    createElement = H.createElement,
		    css = H.css,
		    defined = H.defined,
		    extend = H.extend,
		    isFirefox = H.isFirefox,
		    isMS = H.isMS,
		    isWebKit = H.isWebKit,
		    pick = H.pick,
		    pInt = H.pInt,
		    SVGElement = H.SVGElement,
		    SVGRenderer = H.SVGRenderer,
		    win = H.win,
		    wrap = H.wrap;

		// Extend SvgElement for useHTML option.
		extend(SVGElement.prototype, /** @lends SVGElement.prototype */ {

		    /**
		     * Apply CSS to HTML elements. This is used in text within SVG rendering and
		     * by the VML renderer
		     *
		     * @private
		     * @function Highcharts.SVGElement#htmlCss
		     *
		     * @param {Highcharts.CSSObject} styles
		     *
		     * @return {Highcharts.SVGElement}
		     */
		    htmlCss: function (styles) {
		        var wrapper = this,
		            element = wrapper.element,
		            // When setting or unsetting the width style, we need to update
		            // transform (#8809)
		            isSettingWidth = (
		                element.tagName === 'SPAN' &&
		                styles &&
		                'width' in styles
		            ),
		            textWidth = pick(
		                isSettingWidth && styles.width,
		                undefined
		            ),
		            doTransform;

		        if (isSettingWidth) {
		            delete styles.width;
		            wrapper.textWidth = textWidth;
		            doTransform = true;
		        }

		        if (styles && styles.textOverflow === 'ellipsis') {
		            styles.whiteSpace = 'nowrap';
		            styles.overflow = 'hidden';
		        }
		        wrapper.styles = extend(wrapper.styles, styles);
		        css(wrapper.element, styles);

		        // Now that all styles are applied, to the transform
		        if (doTransform) {
		            wrapper.htmlUpdateTransform();
		        }

		        return wrapper;
		    },

		    /**
		     * VML and useHTML method for calculating the bounding box based on offsets.
		     *
		     * @private
		     * @function Highcharts.SVGElement#htmlGetBBox
		     *
		     * @param {boolean} refresh
		     *        Whether to force a fresh value from the DOM or to use the cached
		     *        value.
		     *
		     * @return {Highcharts.BBoxObject}
		     *         A hash containing values for x, y, width and height.
		     */
		    htmlGetBBox: function () {
		        var wrapper = this,
		            element = wrapper.element;

		        return {
		            x: element.offsetLeft,
		            y: element.offsetTop,
		            width: element.offsetWidth,
		            height: element.offsetHeight
		        };
		    },

		    /**
		     * VML override private method to update elements based on internal
		     * properties based on SVG transform.
		     *
		     * @private
		     * @function Highcharts.SVGElement#htmlUpdateTransform
		     */
		    htmlUpdateTransform: function () {
		        // aligning non added elements is expensive
		        if (!this.added) {
		            this.alignOnAdd = true;
		            return;
		        }

		        var wrapper = this,
		            renderer = wrapper.renderer,
		            elem = wrapper.element,
		            translateX = wrapper.translateX || 0,
		            translateY = wrapper.translateY || 0,
		            x = wrapper.x || 0,
		            y = wrapper.y || 0,
		            align = wrapper.textAlign || 'left',
		            alignCorrection = { left: 0, center: 0.5, right: 1 }[align],
		            styles = wrapper.styles,
		            whiteSpace = styles && styles.whiteSpace;

		        function getTextPxLength() {
		            // Reset multiline/ellipsis in order to read width (#4928,
		            // #5417)
		            css(elem, {
		                width: '',
		                whiteSpace: whiteSpace || 'nowrap'
		            });
		            return elem.offsetWidth;
		        }

		        // apply translate
		        css(elem, {
		            marginLeft: translateX,
		            marginTop: translateY
		        });

		        if (!renderer.styledMode && wrapper.shadows) { // used in labels/tooltip
		            wrapper.shadows.forEach(function (shadow) {
		                css(shadow, {
		                    marginLeft: translateX + 1,
		                    marginTop: translateY + 1
		                });
		            });
		        }

		        // apply inversion
		        if (wrapper.inverted) { // wrapper is a group
		            elem.childNodes.forEach(function (child) {
		                renderer.invertChild(child, elem);
		            });
		        }

		        if (elem.tagName === 'SPAN') {

		            var rotation = wrapper.rotation,
		                baseline,
		                textWidth = wrapper.textWidth && pInt(wrapper.textWidth),
		                currentTextTransform = [
		                    rotation,
		                    align,
		                    elem.innerHTML,
		                    wrapper.textWidth,
		                    wrapper.textAlign
		                ].join(',');

		            // Update textWidth. Use the memoized textPxLength if possible, to
		            // avoid the getTextPxLength function using elem.offsetWidth.
		            // Calling offsetWidth affects rendering time as it forces layout
		            // (#7656).
		            if (
		                textWidth !== wrapper.oldTextWidth &&
		                (
		                    (textWidth > wrapper.oldTextWidth) ||
		                    (wrapper.textPxLength || getTextPxLength()) > textWidth
		                ) && (
		                    // Only set the width if the text is able to word-wrap, or
		                    // text-overflow is ellipsis (#9537)
		                    /[ \-]/.test(elem.textContent || elem.innerText) ||
		                    elem.style.textOverflow === 'ellipsis'
		                )
		            ) { // #983, #1254
		                css(elem, {
		                    width: textWidth + 'px',
		                    display: 'block',
		                    whiteSpace: whiteSpace || 'normal' // #3331
		                });
		                wrapper.oldTextWidth = textWidth;
		                wrapper.hasBoxWidthChanged = true; // #8159
		            } else {
		                wrapper.hasBoxWidthChanged = false; // #8159
		            }

		            // Do the calculations and DOM access only if properties changed
		            if (currentTextTransform !== wrapper.cTT) {
		                baseline = renderer.fontMetrics(elem.style.fontSize, elem).b;

		                // Renderer specific handling of span rotation, but only if we
		                // have something to update.
		                if (
		                    defined(rotation) &&
		                    (
		                        (rotation !== (wrapper.oldRotation || 0)) ||
		                        (align !== wrapper.oldAlign)
		                    )
		                ) {
		                    wrapper.setSpanRotation(
		                        rotation,
		                        alignCorrection,
		                        baseline
		                    );
		                }

		                wrapper.getSpanCorrection(
		                    // Avoid elem.offsetWidth if we can, it affects rendering
		                    // time heavily (#7656)
		                    (
		                        (!defined(rotation) && wrapper.textPxLength) || // #7920
		                        elem.offsetWidth
		                    ),
		                    baseline,
		                    alignCorrection,
		                    rotation,
		                    align
		                );
		            }

		            // apply position with correction
		            css(elem, {
		                left: (x + (wrapper.xCorr || 0)) + 'px',
		                top: (y + (wrapper.yCorr || 0)) + 'px'
		            });

		            // record current text transform
		            wrapper.cTT = currentTextTransform;
		            wrapper.oldRotation = rotation;
		            wrapper.oldAlign = align;
		        }
		    },

		    /**
		     * Set the rotation of an individual HTML span.
		     *
		     * @private
		     * @function Highcharts.SVGElement#setSpanRotation
		     *
		     * @param {number} rotation
		     *
		     * @param {number} alignCorrection
		     *
		     * @param {number} baseline
		     */
		    setSpanRotation: function (rotation, alignCorrection, baseline) {
		        var rotationStyle = {},
		            cssTransformKey = this.renderer.getTransformKey();

		        rotationStyle[cssTransformKey] = rotationStyle.transform =
		            'rotate(' + rotation + 'deg)';
		        rotationStyle[cssTransformKey + (isFirefox ? 'Origin' : '-origin')] =
		        rotationStyle.transformOrigin =
		            (alignCorrection * 100) + '% ' + baseline + 'px';
		        css(this.element, rotationStyle);
		    },

		    /**
		     * Get the correction in X and Y positioning as the element is rotated.
		     *
		     * @private
		     * @function Highcharts.SVGElement#getSpanCorrection
		     *
		     * @param {number} width
		     *
		     * @param {number} baseline
		     *
		     * @param {number} alignCorrection
		     */
		    getSpanCorrection: function (width, baseline, alignCorrection) {
		        this.xCorr = -width * alignCorrection;
		        this.yCorr = -baseline;
		    }
		});

		// Extend SvgRenderer for useHTML option.
		extend(SVGRenderer.prototype, /** @lends SVGRenderer.prototype */ {

		    /**
		     * @private
		     * @function Highcharts.SVGRenderer#getTransformKey
		     *
		     * @return {string}
		     */
		    getTransformKey: function () {
		        return isMS && !/Edge/.test(win.navigator.userAgent) ?
		            '-ms-transform' :
		            isWebKit ?
		                '-webkit-transform' :
		                isFirefox ?
		                    'MozTransform' :
		                    win.opera ?
		                        '-o-transform' :
		                        '';
		    },

		    /**
		     * Create HTML text node. This is used by the VML renderer as well as the
		     * SVG renderer through the useHTML option.
		     *
		     * @private
		     * @function Highcharts.SVGRenderer#html
		     *
		     * @param {string} str
		     *        The text of (subset) HTML to draw.
		     *
		     * @param {number} x
		     *        The x position of the text's lower left corner.
		     *
		     * @param {number} y
		     *        The y position of the text's lower left corner.
		     *
		     * @return {Highcharts.HTMLDOMElement}
		     */
		    html: function (str, x, y) {
		        var wrapper = this.createElement('span'),
		            element = wrapper.element,
		            renderer = wrapper.renderer,
		            isSVG = renderer.isSVG,
		            addSetters = function (element, style) {
		                // These properties are set as attributes on the SVG group, and
		                // as identical CSS properties on the div. (#3542)
		                ['opacity', 'visibility'].forEach(function (prop) {
		                    wrap(element, prop + 'Setter', function (
		                        proceed,
		                        value,
		                        key,
		                        elem
		                    ) {
		                        proceed.call(this, value, key, elem);
		                        style[key] = value;
		                    });
		                });
		                element.addedSetters = true;
		            },
		            chart = H.charts[renderer.chartIndex],
		            styledMode = chart && chart.styledMode;

		        // Text setter
		        wrapper.textSetter = function (value) {
		            if (value !== element.innerHTML) {
		                delete this.bBox;
		            }
		            this.textStr = value;
		            element.innerHTML = pick(value, '');
		            wrapper.doTransform = true;
		        };

		        // Add setters for the element itself (#4938)
		        if (isSVG) { // #4938, only for HTML within SVG
		            addSetters(wrapper, wrapper.element.style);
		        }

		        // Various setters which rely on update transform
		        wrapper.xSetter =
		        wrapper.ySetter =
		        wrapper.alignSetter =
		        wrapper.rotationSetter =
		        function (value, key) {
		            if (key === 'align') {
		                // Do not overwrite the SVGElement.align method. Same as VML.
		                key = 'textAlign';
		            }
		            wrapper[key] = value;
		            wrapper.doTransform = true;
		        };

		        // Runs at the end of .attr()
		        wrapper.afterSetters = function () {
		            // Update transform. Do this outside the loop to prevent redundant
		            // updating for batch setting of attributes.
		            if (this.doTransform) {
		                this.htmlUpdateTransform();
		                this.doTransform = false;
		            }
		        };

		        // Set the default attributes
		        wrapper
		            .attr({
		                text: str,
		                x: Math.round(x),
		                y: Math.round(y)
		            })
		            .css({
		                position: 'absolute'
		            });

		        if (!styledMode) {
		            wrapper.css({
		                fontFamily: this.style.fontFamily,
		                fontSize: this.style.fontSize
		            });
		        }

		        // Keep the whiteSpace style outside the wrapper.styles collection
		        element.style.whiteSpace = 'nowrap';

		        // Use the HTML specific .css method
		        wrapper.css = wrapper.htmlCss;

		        // This is specific for HTML within SVG
		        if (isSVG) {
		            wrapper.add = function (svgGroupWrapper) {

		                var htmlGroup,
		                    container = renderer.box.parentNode,
		                    parentGroup,
		                    parents = [];

		                this.parentGroup = svgGroupWrapper;

		                // Create a mock group to hold the HTML elements
		                if (svgGroupWrapper) {
		                    htmlGroup = svgGroupWrapper.div;
		                    if (!htmlGroup) {

		                        // Read the parent chain into an array and read from top
		                        // down
		                        parentGroup = svgGroupWrapper;
		                        while (parentGroup) {

		                            parents.push(parentGroup);

		                            // Move up to the next parent group
		                            parentGroup = parentGroup.parentGroup;
		                        }

		                        // Ensure dynamically updating position when any parent
		                        // is translated
		                        parents.reverse().forEach(function (parentGroup) {
		                            var htmlGroupStyle,
		                                cls = attr(parentGroup.element, 'class');

		                            // Common translate setter for X and Y on the HTML
		                            // group. Reverted the fix for #6957 du to
		                            // positioning problems and offline export (#7254,
		                            // #7280, #7529)
		                            function translateSetter(value, key) {
		                                parentGroup[key] = value;

		                                if (key === 'translateX') {
		                                    htmlGroupStyle.left = value + 'px';
		                                } else {
		                                    htmlGroupStyle.top = value + 'px';
		                                }

		                                parentGroup.doTransform = true;
		                            }

		                            if (cls) {
		                                cls = { className: cls };
		                            } // else null

		                            // Create a HTML div and append it to the parent div
		                            // to emulate the SVG group structure
		                            htmlGroup =
		                            parentGroup.div =
		                            parentGroup.div || createElement('div', cls, {
		                                position: 'absolute',
		                                left: (parentGroup.translateX || 0) + 'px',
		                                top: (parentGroup.translateY || 0) + 'px',
		                                display: parentGroup.display,
		                                opacity: parentGroup.opacity, // #5075
		                                pointerEvents: (
		                                    parentGroup.styles &&
		                                    parentGroup.styles.pointerEvents
		                                ) // #5595

		                            // the top group is appended to container
		                            }, htmlGroup || container);

		                            // Shortcut
		                            htmlGroupStyle = htmlGroup.style;

		                            // Set listeners to update the HTML div's position
		                            // whenever the SVG group position is changed.
		                            extend(parentGroup, {
		                                // (#7287) Pass htmlGroup to use
		                                // the related group
		                                classSetter: (function (htmlGroup) {
		                                    return function (value) {
		                                        this.element.setAttribute(
		                                            'class',
		                                            value
		                                        );
		                                        htmlGroup.className = value;
		                                    };
		                                }(htmlGroup)),
		                                on: function () {
		                                    if (parents[0].div) { // #6418
		                                        wrapper.on.apply(
		                                            { element: parents[0].div },
		                                            arguments
		                                        );
		                                    }
		                                    return parentGroup;
		                                },
		                                translateXSetter: translateSetter,
		                                translateYSetter: translateSetter
		                            });
		                            if (!parentGroup.addedSetters) {
		                                addSetters(parentGroup, htmlGroupStyle);
		                            }
		                        });

		                    }
		                } else {
		                    htmlGroup = container;
		                }

		                htmlGroup.appendChild(element);

		                // Shared with VML:
		                wrapper.added = true;
		                if (wrapper.alignOnAdd) {
		                    wrapper.htmlUpdateTransform();
		                }

		                return wrapper;
		            };
		        }
		        return wrapper;
		    }
		});

	}(Highcharts));
	(function (H) {
		/**
		 * (c) 2010-2018 Torstein Honsi
		 *
		 * License: www.highcharts.com/license
		 */



		var Axis = H.Axis,
		    getMagnitude = H.getMagnitude,
		    normalizeTickInterval = H.normalizeTickInterval,
		    pick = H.pick;

		/*
		 * Methods defined on the Axis prototype
		 */

		/**
		 * Set the tick positions of a logarithmic axis.
		 *
		 * @private
		 * @function Highcharts.Axis#getLogTickPositions
		 *
		 * @param {number} interval
		 *
		 * @param {number} min
		 *
		 * @param {number} max
		 *
		 * @param {number} minor
		 *
		 * @return {Array<number>}
		 */
		Axis.prototype.getLogTickPositions = function (interval, min, max, minor) {
		    var axis = this,
		        options = axis.options,
		        axisLength = axis.len,
		        // Since we use this method for both major and minor ticks,
		        // use a local variable and return the result
		        positions = [];

		    // Reset
		    if (!minor) {
		        axis._minorAutoInterval = null;
		    }

		    // First case: All ticks fall on whole logarithms: 1, 10, 100 etc.
		    if (interval >= 0.5) {
		        interval = Math.round(interval);
		        positions = axis.getLinearTickPositions(interval, min, max);

		    // Second case: We need intermediary ticks. For example
		    // 1, 2, 4, 6, 8, 10, 20, 40 etc.
		    } else if (interval >= 0.08) {
		        var roundedMin = Math.floor(min),
		            intermediate,
		            i,
		            j,
		            len,
		            pos,
		            lastPos,
		            break2;

		        if (interval > 0.3) {
		            intermediate = [1, 2, 4];

		        // 0.2 equals five minor ticks per 1, 10, 100 etc
		        } else if (interval > 0.15) {
		            intermediate = [1, 2, 4, 6, 8];
		        } else { // 0.1 equals ten minor ticks per 1, 10, 100 etc
		            intermediate = [1, 2, 3, 4, 5, 6, 7, 8, 9];
		        }

		        for (i = roundedMin; i < max + 1 && !break2; i++) {
		            len = intermediate.length;
		            for (j = 0; j < len && !break2; j++) {
		                pos = axis.log2lin(axis.lin2log(i) * intermediate[j]);
		                // #1670, lastPos is #3113
		                if (
		                    pos > min &&
		                    (!minor || lastPos <= max) &&
		                    lastPos !== undefined
		                ) {
		                    positions.push(lastPos);
		                }

		                if (lastPos > max) {
		                    break2 = true;
		                }
		                lastPos = pos;
		            }
		        }

		    // Third case: We are so deep in between whole logarithmic values that
		    // we might as well handle the tick positions like a linear axis. For
		    // example 1.01, 1.02, 1.03, 1.04.
		    } else {
		        var realMin = axis.lin2log(min),
		            realMax = axis.lin2log(max),
		            tickIntervalOption = minor ?
		                this.getMinorTickInterval() :
		                options.tickInterval,
		            filteredTickIntervalOption = tickIntervalOption === 'auto' ?
		                null :
		                tickIntervalOption,
		            tickPixelIntervalOption =
		                options.tickPixelInterval / (minor ? 5 : 1),
		            totalPixelLength = minor ?
		                axisLength / axis.tickPositions.length :
		                axisLength;

		        interval = pick(
		            filteredTickIntervalOption,
		            axis._minorAutoInterval,
		            (realMax - realMin) *
		                tickPixelIntervalOption / (totalPixelLength || 1)
		        );

		        interval = normalizeTickInterval(
		            interval,
		            null,
		            getMagnitude(interval)
		        );

		        positions = axis.getLinearTickPositions(
		            interval,
		            realMin,
		            realMax
		        ).map(axis.log2lin);

		        if (!minor) {
		            axis._minorAutoInterval = interval / 5;
		        }
		    }

		    // Set the axis-level tickInterval variable
		    if (!minor) {
		        axis.tickInterval = interval;
		    }
		    return positions;
		};

		/**
		 * @private
		 * @function Highcharts.Axis#log2lin
		 *
		 * @param {number} num
		 *
		 * @return {number}
		 */
		Axis.prototype.log2lin = function (num) {
		    return Math.log(num) / Math.LN10;
		};

		/**
		 * @private
		 * @function Highcharts.Axis#lin2log
		 *
		 * @param {number} num
		 *
		 * @return {number}
		 */
		Axis.prototype.lin2log = function (num) {
		    return Math.pow(10, num);
		};

	}(Highcharts));
	(function (H) {
		/**
		 * (c) 2010-2018 Torstein Honsi
		 *
		 * License: www.highcharts.com/license
		 */



		var addEvent = H.addEvent,
		    charts = H.charts,
		    css = H.css,
		    doc = H.doc,
		    extend = H.extend,
		    hasTouch = H.hasTouch,
		    noop = H.noop,
		    Pointer = H.Pointer,
		    removeEvent = H.removeEvent,
		    win = H.win,
		    wrap = H.wrap;

		if (!hasTouch && (win.PointerEvent || win.MSPointerEvent)) {

		    // The touches object keeps track of the points being touched at all times
		    var touches = {},
		        hasPointerEvent = !!win.PointerEvent,
		        getWebkitTouches = function () {
		            var fake = [];
		            fake.item = function (i) {
		                return this[i];
		            };
		            H.objectEach(touches, function (touch) {
		                fake.push({
		                    pageX: touch.pageX,
		                    pageY: touch.pageY,
		                    target: touch.target
		                });
		            });
		            return fake;
		        },
		        translateMSPointer = function (e, method, wktype, func) {
		            var p;
		            if (
		                (
		                    e.pointerType === 'touch' ||
		                    e.pointerType === e.MSPOINTER_TYPE_TOUCH
		                ) && charts[H.hoverChartIndex]
		            ) {
		                func(e);
		                p = charts[H.hoverChartIndex].pointer;
		                p[method]({
		                    type: wktype,
		                    target: e.currentTarget,
		                    preventDefault: noop,
		                    touches: getWebkitTouches()
		                });
		            }
		        };

		    // Extend the Pointer prototype with methods for each event handler and more
		    extend(Pointer.prototype, /** @lends Pointer.prototype */ {

		        /**
		         * @private
		         * @function Highcharts.Pointer#onContainerPointerDown
		         *
		         * @param {Highcharts.PointerEventObject} e
		         */
		        onContainerPointerDown: function (e) {
		            translateMSPointer(
		                e,
		                'onContainerTouchStart',
		                'touchstart',
		                function (e) {
		                    touches[e.pointerId] = {
		                        pageX: e.pageX,
		                        pageY: e.pageY,
		                        target: e.currentTarget
		                    };
		                }
		            );
		        },

		        /**
		         * @private
		         * @function Highcharts.Pointer#onContainerPointerMove
		         *
		         * @param {Highcharts.PointerEventObject} e
		         */
		        onContainerPointerMove: function (e) {
		            translateMSPointer(
		                e,
		                'onContainerTouchMove',
		                'touchmove',
		                function (e) {
		                    touches[e.pointerId] = { pageX: e.pageX, pageY: e.pageY };
		                    if (!touches[e.pointerId].target) {
		                        touches[e.pointerId].target = e.currentTarget;
		                    }
		                }
		            );
		        },

		        /**
		         * @private
		         * @function Highcharts.Pointer#onDocumentPointerUp
		         *
		         * @param {Highcharts.PointerEventObject} e
		         */
		        onDocumentPointerUp: function (e) {
		            translateMSPointer(
		                e,
		                'onDocumentTouchEnd',
		                'touchend',
		                function (e) {
		                    delete touches[e.pointerId];
		                }
		            );
		        },

		        /**
		         * Add or remove the MS Pointer specific events
		         *
		         * @private
		         * @function Highcharts.Pointer#batchMSEvents
		         *
		         * @param {Function} fn
		         */
		        batchMSEvents: function (fn) {
		            fn(
		                this.chart.container,
		                hasPointerEvent ? 'pointerdown' : 'MSPointerDown',
		                this.onContainerPointerDown
		            );
		            fn(
		                this.chart.container,
		                hasPointerEvent ? 'pointermove' : 'MSPointerMove',
		                this.onContainerPointerMove
		            );
		            fn(
		                doc,
		                hasPointerEvent ? 'pointerup' : 'MSPointerUp',
		                this.onDocumentPointerUp
		            );
		        }
		    });

		    // Disable default IE actions for pinch and such on chart element
		    wrap(Pointer.prototype, 'init', function (proceed, chart, options) {
		        proceed.call(this, chart, options);
		        if (this.hasZoom) { // #4014
		            css(chart.container, {
		                '-ms-touch-action': 'none',
		                'touch-action': 'none'
		            });
		        }
		    });

		    // Add IE specific touch events to chart
		    wrap(Pointer.prototype, 'setDOMEvents', function (proceed) {
		        proceed.apply(this);
		        if (this.hasZoom || this.followTouchMove) {
		            this.batchMSEvents(addEvent);
		        }
		    });
		    // Destroy MS events also
		    wrap(Pointer.prototype, 'destroy', function (proceed) {
		        this.batchMSEvents(removeEvent);
		        proceed.call(this);
		    });
		}

	}(Highcharts));
	(function (H) {
		/**
		 * (c) 2010-2018 Torstein Honsi
		 *
		 * License: www.highcharts.com/license
		 */



		var addEvent = H.addEvent,
		    Axis = H.Axis,
		    correctFloat = H.correctFloat,
		    defaultOptions = H.defaultOptions,
		    defined = H.defined,
		    destroyObjectProperties = H.destroyObjectProperties,
		    fireEvent = H.fireEvent,
		    hasTouch = H.hasTouch,
		    isTouchDevice = H.isTouchDevice,
		    merge = H.merge,
		    pick = H.pick,
		    removeEvent = H.removeEvent,
		    swapXY;

		/**
		 *
		 * The scrollbar is a means of panning over the X axis of a stock chart.
		 * Scrollbars can  also be applied to other types of axes.
		 *
		 * Another approach to scrollable charts is the [chart.scrollablePlotArea](
		 * https://api.highcharts.com/highcharts/chart.scrollablePlotArea) option that
		 * is especially suitable for simpler cartesian charts on mobile.
		 *
		 * In styled mode, all the presentational options for the
		 * scrollbar are replaced by the classes `.highcharts-scrollbar-thumb`,
		 * `.highcharts-scrollbar-arrow`, `.highcharts-scrollbar-button`,
		 * `.highcharts-scrollbar-rifles` and `.highcharts-scrollbar-track`.
		 *
		 * @sample stock/yaxis/inverted-bar-scrollbar/
		 *         A scrollbar on a simple bar chart
		 *
		 * @product highstock
		 * @optionparent scrollbar
		 */
		var defaultScrollbarOptions = {

		    /**
		     * The height of the scrollbar. The height also applies to the width
		     * of the scroll arrows so that they are always squares. Defaults to
		     * 20 for touch devices and 14 for mouse devices.
		     *
		     * @sample stock/scrollbar/height/
		     *         A 30px scrollbar
		     *
		     * @type    {number}
		     * @default 20/14
		     */
		    height: isTouchDevice ? 20 : 14,

		    /**
		     * The border rounding radius of the bar.
		     *
		     * @sample stock/scrollbar/style/
		     *         Scrollbar styling
		     */
		    barBorderRadius: 0,

		    /**
		     * The corner radius of the scrollbar buttons.
		     *
		     * @sample stock/scrollbar/style/
		     *         Scrollbar styling
		     */
		    buttonBorderRadius: 0,

		    /**
		     * Enable or disable the scrollbar.
		     *
		     * @sample stock/scrollbar/enabled/
		     *         Disable the scrollbar, only use navigator
		     *
		     * @type      {boolean}
		     * @default   true
		     * @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.
		     *
		     * @sample stock/scrollbar/liveredraw
		     *         Setting live redraw to false
		     *
		     * @type  {boolean}
		     * @since 1.3
		     */
		    liveRedraw: undefined,

		    /**
		     * The margin between the scrollbar and its axis when the scrollbar is
		     * applied directly to an axis.
		     */
		    margin: 10,

		    /**
		     * The minimum width of the scrollbar.
		     *
		     * @since 1.2.5
		     */
		    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
		     */

		    step: 0.2,

		    /**
		     * The z index of the scrollbar group.
		     */
		    zIndex: 3,

		    /**
		     * The background color of the scrollbar itself.
		     *
		     * @sample stock/scrollbar/style/
		     *         Scrollbar styling
		     *
		     * @type {Highcharts.ColorString}
		     */
		    barBackgroundColor: '#cccccc',

		    /**
		     * The width of the bar's border.
		     *
		     * @sample stock/scrollbar/style/
		     *         Scrollbar styling
		     */
		    barBorderWidth: 1,

		    /**
		     * The color of the scrollbar's border.
		     *
		     * @type {Highcharts.ColorString}
		     */
		    barBorderColor: '#cccccc',

		    /**
		     * The color of the small arrow inside the scrollbar buttons.
		     *
		     * @sample stock/scrollbar/style/
		     *         Scrollbar styling
		     *
		     * @type {Highcharts.ColorString}
		     */
		    buttonArrowColor: '#333333',

		    /**
		     * The color of scrollbar buttons.
		     *
		     * @sample stock/scrollbar/style/
		     *         Scrollbar styling
		     *
		     * @type {Highcharts.ColorString}
		     */
		    buttonBackgroundColor: '#e6e6e6',

		    /**
		     * The color of the border of the scrollbar buttons.
		     *
		     * @sample stock/scrollbar/style/
		     *         Scrollbar styling
		     *
		     * @type {Highcharts.ColorString}
		     */
		    buttonBorderColor: '#cccccc',

		    /**
		     * The border width of the scrollbar buttons.
		     *
		     * @sample stock/scrollbar/style/
		     *         Scrollbar styling
		     */
		    buttonBorderWidth: 1,

		    /**
		     * The color of the small rifles in the middle of the scrollbar.
		     *
		     * @type {Highcharts.ColorString}
		     */
		    rifleColor: '#333333',

		    /**
		     * The color of the track background.
		     *
		     * @sample stock/scrollbar/style/
		     *         Scrollbar styling
		     *
		     * @type {Highcharts.ColorString}
		     */
		    trackBackgroundColor: '#f2f2f2',

		    /**
		     * The color of the border of the scrollbar track.
		     *
		     * @sample stock/scrollbar/style/
		     *         Scrollbar styling
		     *
		     * @type {Highcharts.ColorString}
		     */
		    trackBorderColor: '#f2f2f2',

		    /**
		     * The corner radius of the border of the scrollbar track.
		     *
		     * @sample stock/scrollbar/style/
		     *         Scrollbar styling
		     *
		     * @type      {number}
		     * @default   0
		     * @apioption scrollbar.trackBorderRadius
		     */

		    /**
		     * The width of the border of the scrollbar track.
		     *
		     * @sample stock/scrollbar/style/
		     *         Scrollbar styling
		     */
		    trackBorderWidth: 1
		};

		defaultOptions.scrollbar = merge(
		    true,
		    defaultScrollbarOptions,
		    defaultOptions.scrollbar
		);

		/**
		 * 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,
		        temp;

		    if (vertical) {
		        for (i = 0; i < len; i += 3) {
		            temp = path[i + 1];
		            path[i + 1] = path[i + 2];
		            path[i + 2] = temp;
		        }
		    }

		    return path;
		};

		/**
		 * A reusable scrollbar, internally used in Highstock's navigator and optionally
		 * on individual axes.
		 *
		 * @private
		 * @class
		 * @name 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);
		}

		Scrollbar.prototype = {

		    /**
		     * @private
		     * @function Highcharts.Scrollbar#init
		     *
		     * @param {Highcharts.SVGRenderer} renderer
		     *
		     * @param {Highcharts.ScrollbarOptions} options
		     *
		     * @param {Highcharts.Chart} chart
		     */
		    init: function (renderer, options, chart) {

		        this.scrollbarButtons = [];

		        this.renderer = renderer;

		        this.userOptions = options;
		        this.options = merge(defaultScrollbarOptions, options);

		        this.chart = chart;

		        // backward compatibility
		        this.size = pick(this.options.size, this.options.height);

		        // Init
		        if (options.enabled) {
		            this.render();
		            this.initEvents();
		            this.addEvents();
		        }
		    },

		    /**
		     * Render scrollbar with all required items.
		     *
		     * @private
		     * @function Highcharts.Scrollbar#render
		     */
		    render: function () {
		        var scroller = this,
		            renderer = scroller.renderer,
		            options = scroller.options,
		            size = scroller.size,
		            styledMode = this.chart.styledMode,
		            group;

		        // Draw the scrollbar group
		        scroller.group = group = renderer.g('scrollbar').attr({
		            zIndex: options.zIndex,
		            translateY: -99999
		        }).add();

		        // Draw the scrollbar track:
		        scroller.track = renderer.rect()
		            .addClass('highcharts-scrollbar-track')
		            .attr({
		                x: 0,
		                r: options.trackBorderRadius || 0,
		                height: size,
		                width: size
		            }).add(group);

		        if (!styledMode) {
		            scroller.track.attr({
		                fill: options.trackBackgroundColor,
		                stroke: options.trackBorderColor,
		                'stroke-width': options.trackBorderWidth
		            });
		        }

		        this.trackBorderWidth = scroller.track.strokeWidth();
		        scroller.track.attr({
		            y: -this.trackBorderWidth % 2 / 2
		        });


		        // Draw the scrollbar itself
		        scroller.scrollbarGroup = renderer.g().add(group);

		        scroller.scrollbar = renderer.rect()
		            .addClass('highcharts-scrollbar-thumb')
		            .attr({
		                height: size,
		                width: size,
		                r: options.barBorderRadius || 0
		            }).add(scroller.scrollbarGroup);

		        scroller.scrollbarRifles = renderer.path(
		            swapXY([
		                'M',
		                -3, size / 4,
		                'L',
		                -3, 2 * size / 3,
		                'M',
		                0, size / 4,
		                'L',
		                0, 2 * size / 3,
		                'M',
		                3, size / 4,
		                'L',
		                3, 2 * size / 3
		            ], options.vertical))
		            .addClass('highcharts-scrollbar-rifles')
		            .add(scroller.scrollbarGroup);

		        if (!styledMode) {
		            scroller.scrollbar.attr({
		                fill: options.barBackgroundColor,
		                stroke: options.barBorderColor,
		                'stroke-width': options.barBorderWidth
		            });
		            scroller.scrollbarRifles.attr({
		                stroke: options.rifleColor,
		                'stroke-width': 1
		            });
		        }

		        scroller.scrollbarStrokeWidth = scroller.scrollbar.strokeWidth();
		        scroller.scrollbarGroup.translate(
		            -scroller.scrollbarStrokeWidth % 2 / 2,
		            -scroller.scrollbarStrokeWidth % 2 / 2
		        );

		        // Draw the buttons:
		        scroller.drawScrollbarButton(0);
		        scroller.drawScrollbarButton(1);
		    },

		    /**
		     * Position the scrollbar, method called from a parent with defined
		     * dimensions.
		     *
		     * @private
		     * @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
		     */
		    position: function (x, y, width, height) {
		        var scroller = this,
		            options = scroller.options,
		            vertical = options.vertical,
		            xOffset = height,
		            yOffset = 0,
		            method = scroller.rendered ? 'animate' : 'attr';

		        scroller.x = x;
		        scroller.y = y + this.trackBorderWidth;
		        scroller.width = width; // width with buttons
		        scroller.height = height;
		        scroller.xOffset = xOffset;
		        scroller.yOffset = yOffset;

		        // If Scrollbar is a vertical type, swap options:
		        if (vertical) {
		            scroller.width = scroller.yOffset = width = yOffset = scroller.size;
		            scroller.xOffset = xOffset = 0;
		            scroller.barWidth = height - width * 2; // width without buttons
		            scroller.x = x = x + scroller.options.margin;
		        } else {
		            scroller.height = scroller.xOffset = height = xOffset =
		                scroller.size;
		            scroller.barWidth = width - height * 2; // width without buttons
		            scroller.y = scroller.y + scroller.options.margin;
		        }

		        // Set general position for a group:
		        scroller.group[method]({
		            translateX: x,
		            translateY: scroller.y
		        });

		        // Resize background/track:
		        scroller.track[method]({
		            width: width,
		            height: height
		        });

		        // Move right/bottom button ot it's place:
		        scroller.scrollbarButtons[1][method]({
		            translateX: vertical ? 0 : width - xOffset,
		            translateY: vertical ? height - yOffset : 0
		        });
		    },

		    /**
		     * Draw the scrollbar buttons with arrows
		     *
		     * @private
		     * @function Highcharts.Scrollbar#drawScrollbarButton
		     *
		     * @param {number} index
		     *        0 is left, 1 is right
		     */
		    drawScrollbarButton: function (index) {
		        var scroller = this,
		            renderer = scroller.renderer,
		            scrollbarButtons = scroller.scrollbarButtons,
		            options = scroller.options,
		            size = scroller.size,
		            group,
		            tempElem;

		        group = renderer.g().add(scroller.group);
		        scrollbarButtons.push(group);

		        // Create a rectangle for the scrollbar button
		        tempElem = renderer.rect()
		            .addClass('highcharts-scrollbar-button')
		            .add(group);

		        // Presentational attributes
		        if (!this.chart.styledMode) {
		            tempElem.attr({
		                stroke: options.buttonBorderColor,
		                'stroke-width': options.buttonBorderWidth,
		                fill: options.buttonBackgroundColor
		            });
		        }

		        // Place the rectangle based on the rendered stroke width
		        tempElem.attr(tempElem.crisp({
		            x: -0.5,
		            y: -0.5,
		            width: size + 1, // +1 to compensate for crispifying in rect method
		            height: size + 1,
		            r: options.buttonBorderRadius
		        }, tempElem.strokeWidth()));

		        // Button arrow
		        tempElem = renderer
		            .path(swapXY([
		                'M',
		                size / 2 + (index ? -1 : 1),
		                size / 2 - 3,
		                'L',
		                size / 2 + (index ? -1 : 1),
		                size / 2 + 3,
		                'L',
		                size / 2 + (index ? 2 : -2),
		                size / 2
		            ], options.vertical))
		            .addClass('highcharts-scrollbar-arrow')
		            .add(scrollbarButtons[index]);

		        if (!this.chart.styledMode) {
		            tempElem.attr({
		                fill: options.buttonArrowColor
		            });
		        }
		    },

		    /**
		     * Set scrollbar size, with a given scale.
		     *
		     * @private
		     * @function Highcharts.Scrollbar#setRange
		     *
		     * @param {number} from
		     *        scale (0-1) where bar should start
		     *
		     * @param {number} to
		     *        scale (0-1) where bar should end
		     */
		    setRange: function (from, to) {
		        var scroller = this,
		            options = scroller.options,
		            vertical = options.vertical,
		            minWidth = options.minWidth,
		            fullWidth = scroller.barWidth,
		            fromPX,
		            toPX,
		            newPos,
		            newSize,
		            newRiflesPos,
		            method = (
		                this.rendered &&
		                !this.hasDragged &&
		                !(this.chart.navigator && this.chart.navigator.hasDragged)
		            ) ? 'animate' : 'attr';

		        if (!defined(fullWidth)) {
		            return;
		        }

		        from = Math.max(from, 0);
		        fromPX = Math.ceil(fullWidth * from);
		        toPX = fullWidth * Math.min(to, 1);
		        scroller.calculatedWidth = newSize = correctFloat(toPX - fromPX);

		        // We need to recalculate position, if minWidth is used
		        if (newSize < minWidth) {
		            fromPX = (fullWidth - minWidth + newSize) * from;
		            newSize = minWidth;
		        }
		        newPos = Math.floor(fromPX + scroller.xOffset + scroller.yOffset);
		        newRiflesPos = newSize / 2 - 0.5; // -0.5 -> rifle line width / 2

		        // Store current position:
		        scroller.from = from;
		        scroller.to = to;

		        if (!vertical) {
		            scroller.scrollbarGroup[method]({
		                translateX: newPos
		            });
		            scroller.scrollbar[method]({
		                width: newSize
		            });
		            scroller.scrollbarRifles[method]({
		                translateX: newRiflesPos
		            });
		            scroller.scrollbarLeft = newPos;
		            scroller.scrollbarTop = 0;
		        } else {
		            scroller.scrollbarGroup[method]({
		                translateY: newPos
		            });
		            scroller.scrollbar[method]({
		                height: newSize
		            });
		            scroller.scrollbarRifles[method]({
		                translateY: newRiflesPos
		            });
		            scroller.scrollbarTop = newPos;
		            scroller.scrollbarLeft = 0;
		        }

		        if (newSize <= 12) {
		            scroller.scrollbarRifles.hide();
		        } else {
		            scroller.scrollbarRifles.show(true);
		        }

		        // Show or hide the scrollbar based on the showFull setting
		        if (options.showFull === false) {
		            if (from <= 0 && to >= 1) {
		                scroller.group.hide();
		            } else {
		                scroller.group.show();
		            }
		        }

		        scroller.rendered = true;
		    },

		    /**
		     * Init events methods, so we have an access to the Scrollbar itself
		     *
		     * @private
		     * @function Highcharts.Scrollbar#initEvents
		     *
		     * @fires Highcharts.Scrollbar#event:changed
		     */
		    initEvents: function () {
		        var scroller = this;
		        /**
		         * Event handler for the mouse move event.
		         */
		        scroller.mouseMoveHandler = function (e) {
		            var normalizedEvent = scroller.chart.pointer.normalize(e),
		                options = scroller.options,
		                direction = options.vertical ? 'chartY' : 'chartX',
		                initPositions = scroller.initPositions,
		                scrollPosition,
		                chartPosition,
		                change;

		            // In iOS, a mousemove event with e.pageX === 0 is fired when
		            // holding the finger down in the center of the scrollbar. This
		            // should be ignored.
		            if (
		                scroller.grabbedCenter &&
		                // #4696, scrollbar failed on Android
		                (!e.touches || e.touches[0][direction] !== 0)
		            ) {
		                chartPosition = scroller.cursorToScrollbarPosition(
		                    normalizedEvent
		                )[direction];
		                scrollPosition = scroller[direction];

		                change = chartPosition - scrollPosition;

		                scroller.hasDragged = true;
		                scroller.updatePosition(
		                    initPositions[0] + change,
		                    initPositions[1] + change
		                );

		                if (scroller.hasDragged) {
		                    fireEvent(scroller, 'changed', {
		                        from: scroller.from,
		                        to: scroller.to,
		                        trigger: 'scrollbar',
		                        DOMType: e.type,
		                        DOMEvent: e
		                    });
		                }
		            }
		        };

		        /**
		         * Event handler for the mouse up event.
		         */
		        scroller.mouseUpHandler = function (e) {
		            if (scroller.hasDragged) {
		                fireEvent(scroller, 'changed', {
		                    from: scroller.from,
		                    to: scroller.to,
		                    trigger: 'scrollbar',
		                    DOMType: e.type,
		                    DOMEvent: e
		                });
		            }
		            scroller.grabbedCenter =
		                scroller.hasDragged =
		                scroller.chartX =
		                scroller.chartY = null;
		        };

		        scroller.mouseDownHandler = function (e) {
		            var normalizedEvent = scroller.chart.pointer.normalize(e),
		                mousePosition = scroller.cursorToScrollbarPosition(
		                    normalizedEvent
		                );

		            scroller.chartX = mousePosition.chartX;
		            scroller.chartY = mousePosition.chartY;
		            scroller.initPositions = [scroller.from, scroller.to];

		            scroller.grabbedCenter = true;
		        };

		        scroller.buttonToMinClick = function (e) {
		            var range = correctFloat(scroller.to - scroller.from) *
		                scroller.options.step;
		            scroller.updatePosition(
		                correctFloat(scroller.from - range),
		                correctFloat(scroller.to - range)
		            );
		            fireEvent(scroller, 'changed', {
		                from: scroller.from,
		                to: scroller.to,
		                trigger: 'scrollbar',
		                DOMEvent: e
		            });
		        };

		        scroller.buttonToMaxClick = function (e) {
		            var range = (scroller.to - scroller.from) * scroller.options.step;
		            scroller.updatePosition(scroller.from + range, scroller.to + range);
		            fireEvent(scroller, 'changed', {
		                from: scroller.from,
		                to: scroller.to,
		                trigger: 'scrollbar',
		                DOMEvent: e
		            });
		        };

		        scroller.trackClick = function (e) {
		            var normalizedEvent = scroller.chart.pointer.normalize(e),
		                range = scroller.to - scroller.from,
		                top = scroller.y + scroller.scrollbarTop,
		                left = scroller.x + scroller.scrollbarLeft;

		            if (
		                (scroller.options.vertical && normalizedEvent.chartY > top) ||
		                (!scroller.options.vertical && normalizedEvent.chartX > left)
		            ) {
		                // On the top or on the left side of the track:
		                scroller.updatePosition(
		                    scroller.from + range,
		                    scroller.to + range
		                );
		            } else {
		                // On the bottom or the right side of the track:
		                scroller.updatePosition(
		                    scroller.from - range,
		                    scroller.to - range
		                );
		            }

		            fireEvent(scroller, 'changed', {
		                from: scroller.from,
		                to: scroller.to,
		                trigger: 'scrollbar',
		                DOMEvent: e
		            });
		        };
		    },

		    /**
		     * Get normalized (0-1) cursor position over the scrollbar
		     *
		     * @private
		     * @function Highcharts.Scrollbar#cursorToScrollbarPosition
		     *
		     * @param  {*} normalizedEvent
		     *         normalized event, with chartX and chartY values
		     *
		     * @return {*}
		     *         Local position {chartX, chartY}
		     */
		    cursorToScrollbarPosition: function (normalizedEvent) {
		        var scroller = this,
		            options = scroller.options,
		            minWidthDifference = options.minWidth > scroller.calculatedWidth ?
		                options.minWidth :
		                0; // minWidth distorts translation

		        return {
		            chartX: (normalizedEvent.chartX - scroller.x - scroller.xOffset) /
		                (scroller.barWidth - minWidthDifference),
		            chartY: (normalizedEvent.chartY - scroller.y - scroller.yOffset) /
		                (scroller.barWidth - minWidthDifference)
		        };
		    },

		    /**
		     * Update position option in the Scrollbar, with normalized 0-1 scale
		     *
		     * @private
		     * @function Highcharts.Scrollbar#updatePosition
		     *
		     * @param  {number} from
		     *
		     * @param  {number} to
		     */
		    updatePosition: function (from, to) {
		        if (to > 1) {
		            from = correctFloat(1 - correctFloat(to - from));
		            to = 1;
		        }

		        if (from < 0) {
		            to = correctFloat(to - from);
		            from = 0;
		        }

		        this.from = from;
		        this.to = to;
		    },

		    /**
		     * Update the scrollbar with new options
		     *
		     * @private
		     * @function Highcharts.Scrollbar#update
		     *
		     * @param  {Highcharts.ScrollbarOptions} options
		     */
		    update: function (options) {
		        this.destroy();
		        this.init(
		            this.chart.renderer,
		            merge(true, this.options, options),
		            this.chart
		        );
		    },

		    /**
		     * Set up the mouse and touch events for the Scrollbar
		     *
		     * @private
		     * @function Highcharts.Scrollbar#addEvents
		     */
		    addEvents: function () {
		        var buttonsOrder = this.options.inverted ? [1, 0] : [0, 1],
		            buttons = this.scrollbarButtons,
		            bar = this.scrollbarGroup.element,
		            track = this.track.element,
		            mouseDownHandler = this.mouseDownHandler,
		            mouseMoveHandler = this.mouseMoveHandler,
		            mouseUpHandler = this.mouseUpHandler,
		            _events;

		        // Mouse events
		        _events = [
		            [buttons[buttonsOrder[0]].element, 'click', this.buttonToMinClick],
		            [buttons[buttonsOrder[1]].element, 'click', this.buttonToMaxClick],
		            [track, 'click', this.trackClick],
		            [bar, 'mousedown', mouseDownHandler],
		            [bar.ownerDocument, 'mousemove', mouseMoveHandler],
		            [bar.ownerDocument, 'mouseup', mouseUpHandler]
		        ];

		        // Touch events
		        if (hasTouch) {
		            _events.push(
		                [bar, 'touchstart', mouseDownHandler],
		                [bar.ownerDocument, 'touchmove', mouseMoveHandler],
		                [bar.ownerDocument, 'touchend', mouseUpHandler]
		            );
		        }

		        // Add them all
		        _events.forEach(function (args) {
		            addEvent.apply(null, args);
		        });
		        this._events = _events;
		    },

		    /**
		     * Removes the event handlers attached previously with addEvents.
		     *
		     * @private
		     * @function Highcharts.Scrollbar#removeEvents
		     */
		    removeEvents: function () {
		        this._events.forEach(function (args) {
		            removeEvent.apply(null, args);
		        });
		        this._events.length = 0;
		    },

		    /**
		     * Destroys allocated elements.
		     *
		     * @private
		     * @function Highcharts.Scrollbar#destroy
		     */
		    destroy: function () {

		        var scroller = this.chart.scroller;

		        // Disconnect events added in addEvents
		        this.removeEvents();

		        // Destroy properties
		        [
		            'track',
		            'scrollbarRifles',
		            'scrollbar',
		            'scrollbarGroup',
		            'group'
		        ].forEach(
		            function (prop) {
		                if (this[prop] && this[prop].destroy) {
		                    this[prop] = this[prop].destroy();
		                }
		            },
		            this
		        );

		        // #6421, chart may have more scrollbars
		        if (scroller && this === scroller.scrollbar) {
		            scroller.scrollbar = null;

		            // Destroy elements in collection
		            destroyObjectProperties(scroller.scrollbarButtons);
		        }
		    }
		};

		/* *
		 * Wrap axis initialization and create scrollbar if enabled:
		 */
		addEvent(Axis, 'afterInit', function () {
		    var axis = this;

		    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;

		        axis.scrollbar = new Scrollbar(
		            axis.chart.renderer,
		            axis.options.scrollbar,
		            axis.chart
		        );

		        addEvent(axis.scrollbar, 'changed', function (e) {
		            var unitedMin = Math.min(
		                    pick(axis.options.min, axis.min),
		                    axis.min,
		                    axis.dataMin
		                ),
		                unitedMax = Math.max(
		                    pick(axis.options.max, axis.max),
		                    axis.max,
		                    axis.dataMax
		                ),
		                range = unitedMax - unitedMin,
		                to,
		                from;

		            if (
		                (axis.horiz && !axis.reversed) ||
		                (!axis.horiz && axis.reversed)
		            ) {
		                to = unitedMin + range * this.to;
		                from = unitedMin + range * this.from;
		            } else {
		                // y-values in browser are reversed, but this also applies for
		                // reversed horizontal axis:
		                to = unitedMin + range * (1 - this.from);
		                from = unitedMin + range * (1 - this.to);
		            }

		            axis.setExtremes(from, to, true, false, e);
		        });
		    }
		});

		/* *
		 * 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),
		            axis.min,
		            pick(axis.dataMin, axis.min) // #6930
		        ),
		        scrollMax = Math.max(
		            pick(axis.options.max, axis.max),
		            axis.max,
		            pick(axis.dataMax, axis.max) // #6930
		        ),
		        scrollbar = axis.scrollbar,
		        titleOffset = axis.titleOffset || 0,
		        offsetsIndex,
		        from,
		        to;

		    if (scrollbar) {

		        if (axis.horiz) {
		            scrollbar.position(
		                axis.left,
		                axis.top + axis.height + 2 + axis.chart.scrollbarsOffsets[1] +
		                    (axis.opposite ?
		                        0 :
		                        titleOffset + axis.axisTitleMargin + axis.offset
		                    ),
		                axis.width,
		                axis.height
		            );
		            offsetsIndex = 1;
		        } else {
		            scrollbar.position(
		                axis.left + axis.width + 2 + axis.chart.scrollbarsOffsets[0] +
		                    (axis.opposite ?
		                        titleOffset + axis.axisTitleMargin + axis.offset :
		                        0
		                    ),
		                axis.top,
		                axis.width,
		                axis.height
		            );
		            offsetsIndex = 0;
		        }

		        if ((!axis.opposite && !axis.horiz) || (axis.opposite && axis.horiz)) {
		            axis.chart.scrollbarsOffsets[offsetsIndex] +=
		                axis.scrollbar.size + axis.scrollbar.options.margin;
		        }

		        if (
		            isNaN(scrollMin) ||
		            isNaN(scrollMax) ||
		            !defined(axis.min) ||
		            !defined(axis.max)
		        ) {
		            // default action: when there is not extremes on the axis, but
		            // scrollbar exists, make it full size
		            scrollbar.setRange(0, 0);
		        } else {
		            from = (axis.min - scrollMin) / (scrollMax - scrollMin);
		            to = (axis.max - scrollMin) / (scrollMax - scrollMin);

		            if (
		                (axis.horiz && !axis.reversed) ||
		                (!axis.horiz && axis.reversed)
		            ) {
		                scrollbar.setRange(from, to);
		            } else {
		                scrollbar.setRange(1 - to, 1 - from); // inverse vertical axis
		            }
		        }
		    }
		});

		/* *
		 * Make space for a scrollbar
		 */
		addEvent(Axis, 'afterGetOffset', function () {
		    var axis = this,
		        index = axis.horiz ? 2 : 1,
		        scrollbar = axis.scrollbar;

		    if (scrollbar) {
		        axis.chart.scrollbarsOffsets = [0, 0]; // reset scrollbars offsets
		        axis.chart.axisOffset[index] +=
		            scrollbar.size + scrollbar.options.margin;
		    }
		});

		H.Scrollbar = Scrollbar;

	}(Highcharts));
	(function (H) {
		/**
		 * (c) 2010-2018 Torstein Honsi
		 *
		 * License: www.highcharts.com/license
		 */



		var addEvent = H.addEvent,
		    Axis = H.Axis,
		    Chart = H.Chart,
		    color = H.color,
		    defaultDataGroupingUnits = H.defaultDataGroupingUnits,
		    defaultOptions = H.defaultOptions,
		    defined = H.defined,
		    destroyObjectProperties = H.destroyObjectProperties,
		    erase = H.erase,
		    error = H.error,
		    extend = H.extend,
		    hasTouch = H.hasTouch,
		    isArray = H.isArray,
		    isNumber = H.isNumber,
		    isObject = H.isObject,
		    isTouchDevice = H.isTouchDevice,
		    merge = H.merge,
		    pick = H.pick,
		    removeEvent = H.removeEvent,
		    Scrollbar = H.Scrollbar,
		    Series = H.Series,
		    seriesTypes = H.seriesTypes,
		    wrap = H.wrap,

		    units = [].concat(defaultDataGroupingUnits), // copy
		    defaultSeriesType,

		    // Finding the min or max of a set of variables where we don't know if they
		    // are defined, is a pattern that is repeated several places in Highcharts.
		    // Consider making this a global utility method.
		    numExt = function (extreme) {
		        var numbers = [].filter.call(arguments, isNumber);
		        if (numbers.length) {
		            return Math[extreme].apply(0, numbers);
		        }
		    };

		// add more resolution to units
		units[4] = ['day', [1, 2, 3, 4]]; // allow more days
		units[5] = ['week', [1, 2, 3]]; // allow more weeks

		defaultSeriesType = seriesTypes.areaspline === undefined ?
		    'line' :
		    'areaspline';

		extend(defaultOptions, {

		    /**
		     * Maximum range which can be set using the navigator's handles.
		     * Opposite of [xAxis.minRange](#xAxis.minRange).
		     *
		     * @sample {highstock} stock/navigator/maxrange/
		     *         Defined max and min range
		     *
		     * @type      {number}
		     * @since     6.0.0
		     * @product   highstock
		     * @apioption xAxis.maxRange
		     */

		    /**
		     * The navigator is a small series below the main series, displaying
		     * a view of the entire data set. It provides tools to zoom in and
		     * out on parts of the data as well as panning across the dataset.
		     *
		     * @product      highstock
		     * @optionparent navigator
		     */
		    navigator: {

		        /**
		         * Whether the navigator and scrollbar should adapt to updated data
		         * in the base X axis. When loading data async, as in the demo below,
		         * this should be `false`. Otherwise new data will trigger navigator
		         * redraw, which will cause unwanted looping. In the demo below, the
		         * data in the navigator is set only once. On navigating, only the main
		         * chart content is updated.
		         *
		         * @sample {highstock} stock/demo/lazy-loading/
		         *         Set to false with async data loading
		         *
		         * @type      {boolean}
		         * @default   true
		         * @product   highstock
		         * @apioption navigator.adaptToUpdatedData
		         */

		        /**
		         * An integer identifying the index to use for the base series, or a
		         * string representing the id of the series.
		         *
		         * **Note**: As of Highcharts 5.0, this is now a deprecated option.
		         * Prefer [series.showInNavigator](#plotOptions.series.showInNavigator).
		         *
		         * @see [series.showInNavigator](#plotOptions.series.showInNavigator)
		         *
		         * @deprecated
		         * @type      {*}
		         * @default   0
		         * @product   highstock
		         * @apioption navigator.baseSeries
		         */

		        /**
		         * Enable or disable the navigator.
		         *
		         * @sample {highstock} stock/navigator/enabled/
		         *         Disable the navigator
		         *
		         * @type      {boolean}
		         * @default   true
		         * @product   highstock
		         * @apioption navigator.enabled
		         */

		        /**
		         * When the chart is inverted, whether to draw the navigator on the
		         * opposite side.
		         *
		         * @type      {boolean}
		         * @default   false
		         * @since     5.0.8
		         * @product   highstock
		         * @apioption navigator.opposite
		         */

		        /**
		         * The height of the navigator.
		         *
		         * @sample {highstock} stock/navigator/height/
		         *         A higher navigator
		         *
		         * @product highstock
		         */
		        height: 40,

		        /**
		         * The distance from the nearest element, the X axis or X axis labels.
		         *
		         * @sample {highstock} stock/navigator/margin/
		         *         A margin of 2 draws the navigator closer to the X axis labels
		         *
		         * @product highstock
		         */
		        margin: 25,

		        /**
		         * Whether the mask should be inside the range marking the zoomed
		         * range, or outside. In Highstock 1.x it was always `false`.
		         *
		         * @sample {highstock} stock/navigator/maskinside-false/
		         *         False, mask outside
		         *
		         * @since   2.0
		         * @product highstock
		         */
		        maskInside: true,

		        /**
		         * Options for the handles for dragging the zoomed area.
		         *
		         * @sample {highstock} stock/navigator/handles/
		         *         Colored handles
		         *
		         * @product highstock
		         */
		        handles: {
		            /**
		             * Width for handles.
		             *
		             * @sample {highstock} stock/navigator/styled-handles/
		             *         Styled handles
		             *
		             * @since   6.0.0
		             * @product highstock
		             */
		            width: 7,

		            /**
		             * Height for handles.
		             *
		             * @sample {highstock} stock/navigator/styled-handles/
		             *         Styled handles
		             *
		             * @since   6.0.0
		             * @product highstock
		             */
		            height: 15,

		            /**
		             * Array to define shapes of handles. 0-index for left, 1-index for
		             * right.
		             *
		             * Additionally, the URL to a graphic can be given on this form:
		             * `url(graphic.png)`. Note that for the image to be applied to
		             * exported charts, its URL needs to be accessible by the export
		             * server.
		             *
		             * Custom callbacks for symbol path generation can also be added to
		             * `Highcharts.SVGRenderer.prototype.symbols`. The callback is then
		             * used by its method name, as shown in the demo.
		             *
		             * @sample {highstock} stock/navigator/styled-handles/
		             *         Styled handles
		             *
		             * @type    {Array<string>}
		             * @default ["navigator-handle", "navigator-handle"]
		             * @since   6.0.0
		             * @product highstock
		             */
		            symbols: ['navigator-handle', 'navigator-handle'],

		            /**
		             * Allows to enable/disable handles.
		             *
		             * @since   6.0.0
		             * @product highstock
		             */
		            enabled: true,

		            /**
		             * The width for the handle border and the stripes inside.
		             *
		             * @sample {highstock} stock/navigator/styled-handles/
		             *         Styled handles
		             *
		             * @since     6.0.0
		             * @product   highstock
		             * @apioption navigator.handles.lineWidth
		             */
		            lineWidth: 1,

		            /**
		             * The fill for the handle.
		             *
		             * @type    {Highcharts.ColorString}
		             * @product highstock
		             */
		            backgroundColor: '#f2f2f2',

		            /**
		             * The stroke for the handle border and the stripes inside.
		             *
		             * @type    {Highcharts.ColorString}
		             * @product highstock
		             */
		            borderColor: '#999999'
		        },

		        /**
		         * The color of the mask covering the areas of the navigator series
		         * that are currently not visible in the main series. The default
		         * color is bluish with an opacity of 0.3 to see the series below.
		         *
		         * @see In styled mode, the mask is styled with the
		         *      `.highcharts-navigator-mask` and
		         *      `.highcharts-navigator-mask-inside` classes.
		         *
		         * @sample {highstock} stock/navigator/maskfill/
		         *         Blue, semi transparent mask
		         *
		         * @type    {Highcharts.ColorString}
		         * @default rgba(102,133,194,0.3)
		         * @product highstock
		         */
		        maskFill: color('#6685c2').setOpacity(0.3).get(),

		        /**
		         * The color of the line marking the currently zoomed area in the
		         * navigator.
		         *
		         * @sample {highstock} stock/navigator/outline/
		         *         2px blue outline
		         *
		         * @type    {Highcharts.ColorString}
		         * @default #cccccc
		         * @product highstock
		         */
		        outlineColor: '#cccccc',

		        /**
		         * The width of the line marking the currently zoomed area in the
		         * navigator.
		         *
		         * @see In styled mode, the outline stroke width is set with the
		         *      `.highcharts-navigator-outline` class.
		         *
		         * @sample {highstock} stock/navigator/outline/
		         *         2px blue outline
		         *
		         * @type    {number}
		         * @product highstock
		         */
		        outlineWidth: 1,

		        /**
		         * Options for the navigator series. Available options are the same
		         * as any series, documented at [plotOptions](#plotOptions.series)
		         * and [series](#series).
		         *
		         * Unless data is explicitly defined on navigator.series, the data
		         * is borrowed from the first series in the chart.
		         *
		         * Default series options for the navigator series are:
		         *
		         * <pre>series: {
		         *     type: 'areaspline',
		         *     fillOpacity: 0.05,
		         *     dataGrouping: {
		         *         smoothed: true
		         *     },
		         *     lineWidth: 1,
		         *     marker: {
		         *         enabled: false
		         *     }
		         * }</pre>
		         *
		         * @see In styled mode, the navigator series is styled with the
		         *      `.highcharts-navigator-series` class.
		         *
		         * @sample {highstock} stock/navigator/series-data/
		         *         Using a separate data set for the navigator
		         * @sample {highstock} stock/navigator/series/
		         *         A green navigator series
		         *
		         * @product highstock
		         */
		        series: {

		            /**
		             * The type of the navigator series. Defaults to `areaspline` if
		             * defined, otherwise `line`.
		             *
		             * @type    {string}
		             * @default areaspline
		             */
		            type: defaultSeriesType,

		            /**
		             * The fill opacity of the navigator series.
		             */
		            fillOpacity: 0.05,

		            /**
		             * The pixel line width of the navigator series.
		             */
		            lineWidth: 1,

		            /**
		             * @ignore-option
		             */
		            compare: null,

		            /**
		             * Data grouping options for the navigator series.
		             *
		             * @extends plotOptions.series.dataGrouping
		             */
		            dataGrouping: {
		                approximation: 'average',
		                enabled: true,
		                groupPixelWidth: 2,
		                smoothed: true,
		                units: units
		            },

		            /**
		             * Data label options for the navigator series. Data labels are
		             * disabled by default on the navigator series.
		             *
		             * @extends plotOptions.series.dataLabels
		             */
		            dataLabels: {
		                enabled: false,
		                zIndex: 2 // #1839
		            },

		            id: 'highcharts-navigator-series',

		            className: 'highcharts-navigator-series',

		            /**
		             * Line color for the navigator series. Allows setting the color
		             * while disallowing the default candlestick setting.
		             *
		             * @type {Highcharts.ColorString|null}
		             */
		            lineColor: null, // #4602

		            marker: {
		                enabled: false
		            },

		            pointRange: 0,

		            /**
		             * The threshold option. Setting it to 0 will make the default
		             * navigator area series draw its area from the 0 value and up.
		             *
		             * @type {number|null}
		             */
		            threshold: null
		        },

		        /**
		         * Options for the navigator X axis. Default series options
		         * for the navigator xAxis are:
		         *
		         * <pre>xAxis: {
		         *     tickWidth: 0,
		         *     lineWidth: 0,
		         *     gridLineWidth: 1,
		         *     tickPixelInterval: 200,
		         *     labels: {
		         *            align: 'left',
		         *         style: {
		         *             color: '#888'
		         *         },
		         *         x: 3,
		         *         y: -4
		         *     }
		         * }</pre>
		         *
		         * @extends   xAxis
		         * @excluding linkedTo, maxZoom, minRange, opposite, range, scrollbar,
		         *            showEmpty, maxRange
		         * @product   highstock
		         */
		        xAxis: {
		            /**
		             * Additional range on the right side of the xAxis. Works similar to
		             * xAxis.maxPadding, but value is set in milliseconds.
		             * Can be set for both, main xAxis and navigator's xAxis.
		             *
		             * @since   6.0.0
		             * @product highstock
		             */
		            overscroll: 0,

		            className: 'highcharts-navigator-xaxis',

		            tickLength: 0,

		            lineWidth: 0,

		            gridLineColor: '#e6e6e6',

		            gridLineWidth: 1,

		            tickPixelInterval: 200,

		            labels: {

		                align: 'left',

		                /**
		                 * @type {Highcharts.CSSObject}
		                 */
		                style: {
		                    /** @ignore */
		                    color: '#999999'
		                },

		                x: 3,

		                y: -4

		            },

		            crosshair: false

		        },

		        /**
		         * Options for the navigator Y axis. Default series options
		         * for the navigator yAxis are:
		         *
		         * <pre>yAxis: {
		         *     gridLineWidth: 0,
		         *     startOnTick: false,
		         *     endOnTick: false,
		         *     minPadding: 0.1,
		         *     maxPadding: 0.1,
		         *     labels: {
		         *         enabled: false
		         *     },
		         *     title: {
		         *         text: null
		         *     },
		         *     tickWidth: 0
		         * }</pre>
		         *
		         * @extends   yAxis
		         * @excluding height, linkedTo, maxZoom, minRange, ordinal, range,
		         *            showEmpty, scrollbar, top, units, maxRange, minLength,
		         *            maxLength, resize
		         * @product   highstock
		         */
		        yAxis: {

		            className: 'highcharts-navigator-yaxis',

		            gridLineWidth: 0,

		            startOnTick: false,

		            endOnTick: false,

		            minPadding: 0.1,

		            maxPadding: 0.1,

		            labels: {
		                enabled: false
		            },

		            crosshair: false,

		            title: {
		                text: null
		            },

		            tickLength: 0,

		            tickWidth: 0

		        }

		    }

		});

		/**
		 * Draw one of the handles on the side of the zoomed range in the navigator
		 *
		 * @function Highcharts.Renderer#symbols.navigator-handle
		 *
		 * @param {boolean} inverted
		 *        flag for chart.inverted
		 *
		 * @return {Highcharts.SVGPathArray}
		 *         Path to be used in a handle
		 */
		H.Renderer.prototype.symbols['navigator-handle'] = function (
		    x,
		    y,
		    w,
		    h,
		    options
		) {
		    var halfWidth = options.width / 2,
		        markerPosition = Math.round(halfWidth / 3) + 0.5,
		        height = options.height;

		    return [
		        'M',
		        -halfWidth - 1, 0.5,
		        'L',
		        halfWidth, 0.5,
		        'L',
		        halfWidth, height + 0.5,
		        'L',
		        -halfWidth - 1, height + 0.5,
		        'L',
		        -halfWidth - 1, 0.5,
		        'M',
		        -markerPosition, 4,
		        'L',
		        -markerPosition, height - 3,
		        'M',
		        markerPosition - 1, 4,
		        'L',
		        markerPosition - 1, height - 3
		    ];
		};

		/**
		 * The Navigator class
		 *
		 * @private
		 * @class
		 * @name Highcharts.Navigator
		 *
		 * @param {Highcharts.Chart} chart
		 *        Chart object
		 */
		function Navigator(chart) {
		    this.init(chart);
		}

		Navigator.prototype = {

		    /**
		     * Draw one of the handles on the side of the zoomed range in the navigator
		     *
		     * @private
		     * @function Highcharts.Navigator#drawHandle
		     *
		     * @param {number} x
		     *        The x center for the handle
		     *
		     * @param {number} index
		     *        0 for left and 1 for right
		     *
		     * @param {boolean} inverted
		     *        flag for chart.inverted
		     *
		     * @param {string} verb
		     *        use 'animate' or 'attr'
		     */
		    drawHandle: function (x, index, inverted, verb) {
		        var navigator = this,
		            height = navigator.navigatorOptions.handles.height;

		        // Place it
		        navigator.handles[index][verb](inverted ? {
		            translateX: Math.round(navigator.left + navigator.height / 2),
		            translateY: Math.round(
		                navigator.top + parseInt(x, 10) + 0.5 - height
		            )
		        } : {
		            translateX: Math.round(navigator.left + parseInt(x, 10)),
		            translateY: Math.round(
		                navigator.top + navigator.height / 2 - height / 2 - 1
		            )
		        });
		    },

		    /**
		     * Render outline around the zoomed range
		     *
		     * @private
		     * @function Highcharts.Navigator#drawOutline
		     *
		     * @param {number} zoomedMin
		     *        in pixels position where zoomed range starts
		     *
		     * @param {number} zoomedMax
		     *        in pixels position where zoomed range ends
		     *
		     * @param {boolean} inverted
		     *        flag if chart is inverted
		     *
		     * @param {string} verb
		     *        use 'animate' or 'attr'
		     */
		    drawOutline: function (zoomedMin, zoomedMax, inverted, verb) {
		        var navigator = this,
		            maskInside = navigator.navigatorOptions.maskInside,
		            outlineWidth = navigator.outline.strokeWidth(),
		            halfOutline = outlineWidth / 2,
		            outlineCorrection = (outlineWidth % 2) / 2, // #5800
		            outlineHeight = navigator.outlineHeight,
		            scrollbarHeight = navigator.scrollbarHeight,
		            navigatorSize = navigator.size,
		            left = navigator.left - scrollbarHeight,
		            navigatorTop = navigator.top,
		            verticalMin,
		            path;

		        if (inverted) {
		            left -= halfOutline;
		            verticalMin = navigatorTop + zoomedMax + outlineCorrection;
		            zoomedMax = navigatorTop + zoomedMin + outlineCorrection;

		            path = [
		                'M',
		                left + outlineHeight,
		                navigatorTop - scrollbarHeight - outlineCorrection, // top edge
		                'L',
		                left + outlineHeight,
		                verticalMin, // top right of zoomed range
		                'L',
		                left,
		                verticalMin, // top left of z.r.
		                'L',
		                left,
		                zoomedMax, // bottom left of z.r.
		                'L',
		                left + outlineHeight,
		                zoomedMax, // bottom right of z.r.
		                'L',
		                left + outlineHeight,
		                navigatorTop + navigatorSize + scrollbarHeight // bottom edge
		            ].concat(maskInside ? [
		                'M',
		                left + outlineHeight,
		                verticalMin - halfOutline, // upper left of zoomed range
		                'L',
		                left + outlineHeight,
		                zoomedMax + halfOutline // upper right of z.r.
		            ] : []);
		        } else {
		            zoomedMin += left + scrollbarHeight - outlineCorrection;
		            zoomedMax += left + scrollbarHeight - outlineCorrection;
		            navigatorTop += halfOutline;

		            path = [
		                'M',
		                left,
		                navigatorTop, // left
		                'L',
		                zoomedMin,
		                navigatorTop, // upper left of zoomed range
		                'L',
		                zoomedMin,
		                navigatorTop + outlineHeight, // lower left of z.r.
		                'L',
		                zoomedMax,
		                navigatorTop + outlineHeight, // lower right of z.r.
		                'L',
		                zoomedMax,
		                navigatorTop, // upper right of z.r.
		                'L',
		                left + navigatorSize + scrollbarHeight * 2,
		                navigatorTop // right
		            ].concat(maskInside ? [
		                'M',
		                zoomedMin - halfOutline,
		                navigatorTop, // upper left of zoomed range
		                'L',
		                zoomedMax + halfOutline,
		                navigatorTop // upper right of z.r.
		            ] : []);
		        }
		        navigator.outline[verb]({
		            d: path
		        });
		    },

		    /**
		     * Render outline around the zoomed range
		     *
		     * @private
		     * @function Highcharts.Navigator#drawMasks
		     *
		     * @param {number} zoomedMin
		     *        in pixels position where zoomed range starts
		     *
		     * @param {number} zoomedMax
		     *        in pixels position where zoomed range ends
		     *
		     * @param {boolean} inverted
		     *        flag if chart is inverted
		     *
		     * @param {string} verb
		     *        use 'animate' or 'attr'
		     */
		    drawMasks: function (zoomedMin, zoomedMax, inverted, verb) {
		        var navigator = this,
		            left = navigator.left,
		            top = navigator.top,
		            navigatorHeight = navigator.height,
		            height,
		            width,
		            x,
		            y;

		        // Determine rectangle position & size
		        // According to (non)inverted position:
		        if (inverted) {
		            x = [left, left, left];
		            y = [top, top + zoomedMin, top + zoomedMax];
		            width = [navigatorHeight, navigatorHeight, navigatorHeight];
		            height = [
		                zoomedMin,
		                zoomedMax - zoomedMin,
		                navigator.size - zoomedMax
		            ];
		        } else {
		            x = [left, left + zoomedMin, left + zoomedMax];
		            y = [top, top, top];
		            width = [
		                zoomedMin,
		                zoomedMax - zoomedMin,
		                navigator.size - zoomedMax
		            ];
		            height = [navigatorHeight, navigatorHeight, navigatorHeight];
		        }
		        navigator.shades.forEach(function (shade, i) {
		            shade[verb]({
		                x: x[i],
		                y: y[i],
		                width: width[i],
		                height: height[i]
		            });
		        });
		    },

		    /**
		     * Generate DOM elements for a navigator:
		     *
		     * - main navigator group
		     *
		     * - all shades
		     *
		     * - outline
		     *
		     * - handles
		     *
		     * @private
		     * @function Highcharts.Navigator#renderElements
		     */
		    renderElements: function () {
		        var navigator = this,
		            navigatorOptions = navigator.navigatorOptions,
		            maskInside = navigatorOptions.maskInside,
		            chart = navigator.chart,
		            inverted = chart.inverted,
		            renderer = chart.renderer,
		            navigatorGroup,
		            mouseCursor = {
		                cursor: inverted ? 'ns-resize' : 'ew-resize'
		            };

		        // Create the main navigator group
		        navigator.navigatorGroup = navigatorGroup = renderer.g('navigator')
		            .attr({
		                zIndex: 8,
		                visibility: 'hidden'
		            })
		            .add();

		        // Create masks, each mask will get events and fill:
		        [
		            !maskInside,
		            maskInside,
		            !maskInside
		        ].forEach(function (hasMask, index) {
		            navigator.shades[index] = renderer.rect()
		                .addClass('highcharts-navigator-mask' +
		                    (index === 1 ? '-inside' : '-outside'))
		                .add(navigatorGroup);

		            if (!chart.styledMode) {
		                navigator.shades[index]
		                    .attr({
		                        fill: hasMask ?
		                            navigatorOptions.maskFill :
		                            'rgba(0,0,0,0)'
		                    })
		                    .css(index === 1 && mouseCursor);
		            }
		        });

		        // Create the outline:
		        navigator.outline = renderer.path()
		            .addClass('highcharts-navigator-outline')
		            .add(navigatorGroup);

		        if (!chart.styledMode) {
		            navigator.outline.attr({
		                'stroke-width': navigatorOptions.outlineWidth,
		                stroke: navigatorOptions.outlineColor
		            });
		        }

		        // Create the handlers:
		        if (navigatorOptions.handles.enabled) {
		            [0, 1].forEach(function (index) {
		                navigatorOptions.handles.inverted = chart.inverted;
		                navigator.handles[index] = renderer.symbol(
		                    navigatorOptions.handles.symbols[index],
		                    -navigatorOptions.handles.width / 2 - 1,
		                    0,
		                    navigatorOptions.handles.width,
		                    navigatorOptions.handles.height,
		                    navigatorOptions.handles
		                );
		                // zIndex = 6 for right handle, 7 for left.
		                // Can't be 10, because of the tooltip in inverted chart #2908
		                navigator.handles[index].attr({ zIndex: 7 - index })
		                    .addClass(
		                        'highcharts-navigator-handle ' +
		                        'highcharts-navigator-handle-' +
		                        ['left', 'right'][index]
		                    ).add(navigatorGroup);

		                if (!chart.styledMode) {
		                    var handlesOptions = navigatorOptions.handles;
		                    navigator.handles[index]
		                        .attr({
		                            fill: handlesOptions.backgroundColor,
		                            stroke: handlesOptions.borderColor,
		                            'stroke-width': handlesOptions.lineWidth
		                        })
		                        .css(mouseCursor);
		                }
		            });
		        }
		    },

		    /**
		     * Update navigator
		     *
		     * @private
		     * @function Highcharts.Navigator#update
		     *
		     * @param {Highcharts.NavigatorOptions} options
		     *        Options to merge in when updating navigator
		     */
		    update: function (options) {
		        // Remove references to old navigator series in base series
		        (this.series || []).forEach(function (series) {
		            if (series.baseSeries) {
		                delete series.baseSeries.navigatorSeries;
		            }
		        });
		        // Destroy and rebuild navigator
		        this.destroy();
		        var chartOptions = this.chart.options;
		        merge(true, chartOptions.navigator, this.options, options);
		        this.init(this.chart);
		    },

		    /**
		     * Render the navigator
		     *
		     * @private
		     * @function Highcharts.Navigator#render
		     *
		     * @param {number} min
		     *        X axis value minimum
		     *
		     * @param {number} max
		     *        X axis value maximum
		     *
		     * @param {number} pxMin
		     *        Pixel value minimum
		     *
		     * @param {number} pxMax
		     *        Pixel value maximum
		     */
		    render: function (min, max, pxMin, pxMax) {

		        var navigator = this,
		            chart = navigator.chart,
		            navigatorWidth,
		            scrollbarLeft,
		            scrollbarTop,
		            scrollbarHeight = navigator.scrollbarHeight,
		            navigatorSize,
		            xAxis = navigator.xAxis,
		            scrollbarXAxis = xAxis.fake ? chart.xAxis[0] : xAxis,
		            navigatorEnabled = navigator.navigatorEnabled,
		            zoomedMin,
		            zoomedMax,
		            rendered = navigator.rendered,
		            inverted = chart.inverted,
		            verb,
		            newMin,
		            newMax,
		            currentRange,
		            minRange = chart.xAxis[0].minRange,
		            maxRange = chart.xAxis[0].options.maxRange;

		        // Don't redraw while moving the handles (#4703).
		        if (this.hasDragged && !defined(pxMin)) {
		            return;
		        }

		        // Don't render the navigator until we have data (#486, #4202, #5172).
		        if (!isNumber(min) || !isNumber(max)) {
		            // However, if navigator was already rendered, we may need to resize
		            // it. For example hidden series, but visible navigator (#6022).
		            if (rendered) {
		                pxMin = 0;
		                pxMax = pick(xAxis.width, scrollbarXAxis.width);
		            } else {
		                return;
		            }
		        }

		        navigator.left = pick(
		            xAxis.left,
		            // in case of scrollbar only, without navigator
		            chart.plotLeft + scrollbarHeight + (inverted ? chart.plotWidth : 0)
		        );

		        navigator.size = zoomedMax = navigatorSize = pick(
		            xAxis.len,
		            (inverted ? chart.plotHeight : chart.plotWidth) -
		                2 * scrollbarHeight
		        );

		        if (inverted) {
		            navigatorWidth = scrollbarHeight;
		        } else {
		            navigatorWidth = navigatorSize + 2 * scrollbarHeight;
		        }

		        // Get the pixel position of the handles
		        pxMin = pick(pxMin, xAxis.toPixels(min, true));
		        pxMax = pick(pxMax, xAxis.toPixels(max, true));

		        // Verify (#1851, #2238)
		        if (!isNumber(pxMin) || Math.abs(pxMin) === Infinity) {
		            pxMin = 0;
		            pxMax = navigatorWidth;
		        }

		        // Are we below the minRange? (#2618, #6191)
		        newMin = xAxis.toValue(pxMin, true);
		        newMax = xAxis.toValue(pxMax, true);
		        currentRange = Math.abs(H.correctFloat(newMax - newMin));
		        if (currentRange < minRange) {
		            if (this.grabbedLeft) {
		                pxMin = xAxis.toPixels(newMax - minRange, true);
		            } else if (this.grabbedRight) {
		                pxMax = xAxis.toPixels(newMin + minRange, true);
		            }
		        } else if (defined(maxRange) && currentRange > maxRange) {
		            if (this.grabbedLeft) {
		                pxMin = xAxis.toPixels(newMax - maxRange, true);
		            } else if (this.grabbedRight) {
		                pxMax = xAxis.toPixels(newMin + maxRange, true);
		            }
		        }

		        // Handles are allowed to cross, but never exceed the plot area
		        navigator.zoomedMax = Math.min(Math.max(pxMin, pxMax, 0), zoomedMax);
		        navigator.zoomedMin = Math.min(
		            Math.max(
		                navigator.fixedWidth ?
		                    navigator.zoomedMax - navigator.fixedWidth :
		                    Math.min(pxMin, pxMax),
		                0
		            ),
		            zoomedMax
		        );

		        navigator.range = navigator.zoomedMax - navigator.zoomedMin;

		        zoomedMax = Math.round(navigator.zoomedMax);
		        zoomedMin = Math.round(navigator.zoomedMin);

		        if (navigatorEnabled) {
		            navigator.navigatorGroup.attr({
		                visibility: 'visible'
		            });
		            // Place elements
		            verb = rendered && !navigator.hasDragged ? 'animate' : 'attr';

		            navigator.drawMasks(zoomedMin, zoomedMax, inverted, verb);
		            navigator.drawOutline(zoomedMin, zoomedMax, inverted, verb);

		            if (navigator.navigatorOptions.handles.enabled) {
		                navigator.drawHandle(zoomedMin, 0, inverted, verb);
		                navigator.drawHandle(zoomedMax, 1, inverted, verb);
		            }
		        }

		        if (navigator.scrollbar) {
		            if (inverted) {
		                scrollbarTop = navigator.top - scrollbarHeight;
		                scrollbarLeft = navigator.left - scrollbarHeight +
		                    (navigatorEnabled || !scrollbarXAxis.opposite ? 0 :
		                        // Multiple axes has offsets:
		                        (scrollbarXAxis.titleOffset || 0) +
		                        // Self margin from the axis.title
		                        scrollbarXAxis.axisTitleMargin
		                    );
		                scrollbarHeight = navigatorSize + 2 * scrollbarHeight;
		            } else {
		                scrollbarTop = navigator.top +
		                    (navigatorEnabled ? navigator.height : -scrollbarHeight);
		                scrollbarLeft = navigator.left - scrollbarHeight;
		            }
		            // Reposition scrollbar
		            navigator.scrollbar.position(
		                scrollbarLeft,
		                scrollbarTop,
		                navigatorWidth,
		                scrollbarHeight
		            );
		            // Keep scale 0-1
		            navigator.scrollbar.setRange(
		                // Use real value, not rounded because range can be very small
		                // (#1716)
		                navigator.zoomedMin / (navigatorSize || 1),
		                navigator.zoomedMax / (navigatorSize || 1)
		            );
		        }
		        navigator.rendered = true;
		    },

		    /**
		     * Set up the mouse and touch events for the navigator
		     *
		     * @private
		     * @function Highcharts.Navigator#addMouseEvents
		     */
		    addMouseEvents: function () {
		        var navigator = this,
		            chart = navigator.chart,
		            container = chart.container,
		            eventsToUnbind = [],
		            mouseMoveHandler,
		            mouseUpHandler;

		        /**
		         * Create mouse events' handlers.
		         * Make them as separate functions to enable wrapping them:
		         */
		        navigator.mouseMoveHandler = mouseMoveHandler = function (e) {
		            navigator.onMouseMove(e);
		        };
		        navigator.mouseUpHandler = mouseUpHandler = function (e) {
		            navigator.onMouseUp(e);
		        };

		        // Add shades and handles mousedown events
		        eventsToUnbind = navigator.getPartsEvents('mousedown');
		        // Add mouse move and mouseup events. These are bind to doc/container,
		        // because Navigator.grabbedSomething flags are stored in mousedown
		        // events
		        eventsToUnbind.push(
		            addEvent(container, 'mousemove', mouseMoveHandler),
		            addEvent(container.ownerDocument, 'mouseup', mouseUpHandler)
		        );

		        // Touch events
		        if (hasTouch) {
		            eventsToUnbind.push(
		                addEvent(container, 'touchmove', mouseMoveHandler),
		                addEvent(container.ownerDocument, 'touchend', mouseUpHandler)
		            );
		            eventsToUnbind.concat(navigator.getPartsEvents('touchstart'));
		        }

		        navigator.eventsToUnbind = eventsToUnbind;

		        // Data events
		        if (navigator.series && navigator.series[0]) {
		            eventsToUnbind.push(
		                addEvent(
		                    navigator.series[0].xAxis,
		                    'foundExtremes',
		                    function () {
		                        chart.navigator.modifyNavigatorAxisExtremes();
		                    }
		                )
		            );
		        }
		    },

		    /**
		     * Generate events for handles and masks
		     *
		     * @private
		     * @function Highcharts.Navigator#getPartsEvents
		     *
		     * @param {string} eventName
		     *        Event name handler, 'mousedown' or 'touchstart'
		     *
		     * @return {Array<Function>}
		     *         An array of functions to remove navigator functions from the
		     *         events again.
		     */
		    getPartsEvents: function (eventName) {
		        var navigator = this,
		            events = [];
		        ['shades', 'handles'].forEach(function (name) {
		            navigator[name].forEach(function (navigatorItem, index) {
		                events.push(
		                    addEvent(
		                        navigatorItem.element,
		                        eventName,
		                        function (e) {
		                            navigator[name + 'Mousedown'](e, index);
		                        }
		                    )
		                );
		            });
		        });
		        return events;
		    },

		    /**
		     * Mousedown on a shaded mask, either:
		     *
		     * - will be stored for future drag&drop
		     *
		     * - will directly shift to a new range
		     *
		     * @private
		     * @function Highcharts.Navigator#shadesMousedown
		     *
		     * @param {global.PointerEventObject} e
		     *        Mouse event
		     *
		     * @param {number} index
		     *        Index of a mask in Navigator.shades array
		     */
		    shadesMousedown: function (e, index) {
		        e = this.chart.pointer.normalize(e);

		        var navigator = this,
		            chart = navigator.chart,
		            xAxis = navigator.xAxis,
		            zoomedMin = navigator.zoomedMin,
		            navigatorPosition = navigator.left,
		            navigatorSize = navigator.size,
		            range = navigator.range,
		            chartX = e.chartX,
		            fixedMax,
		            fixedMin,
		            ext,
		            left;

		        // For inverted chart, swap some options:
		        if (chart.inverted) {
		            chartX = e.chartY;
		            navigatorPosition = navigator.top;
		        }

		        if (index === 1) {
		            // Store information for drag&drop
		            navigator.grabbedCenter = chartX;
		            navigator.fixedWidth = range;
		            navigator.dragOffset = chartX - zoomedMin;
		        } else {
		            // Shift the range by clicking on shaded areas
		            left = chartX - navigatorPosition - range / 2;
		            if (index === 0) {
		                left = Math.max(0, left);
		            } else if (index === 2 && left + range >= navigatorSize) {
		                left = navigatorSize - range;
		                if (navigator.reversedExtremes) {
		                    // #7713
		                    left -= range;
		                    fixedMin = navigator.getUnionExtremes().dataMin;
		                } else {
		                    // #2293, #3543
		                    fixedMax = navigator.getUnionExtremes().dataMax;
		                }
		            }
		            if (left !== zoomedMin) { // it has actually moved
		                navigator.fixedWidth = range; // #1370

		                ext = xAxis.toFixedRange(
		                    left,
		                    left + range,
		                    fixedMin,
		                    fixedMax
		                );
		                if (defined(ext.min)) { // #7411
		                    chart.xAxis[0].setExtremes(
		                        Math.min(ext.min, ext.max),
		                        Math.max(ext.min, ext.max),
		                        true,
		                        null, // auto animation
		                        { trigger: 'navigator' }
		                    );
		                }
		            }
		        }
		    },

		    /**
		     * Mousedown on a handle mask.
		     * Will store necessary information for drag&drop.
		     *
		     * @private
		     * @function Highcharts.Navigator#handlesMousedown
		     *
		     * @param {Highcharts.PointerEventObject} e
		     *        Mouse event
		     *
		     * @param {number} index
		     *        Index of a handle in Navigator.handles array
		     */
		    handlesMousedown: function (e, index) {
		        e = this.chart.pointer.normalize(e);

		        var navigator = this,
		            chart = navigator.chart,
		            baseXAxis = chart.xAxis[0],
		            // For reversed axes, min and max are changed,
		            // so the other extreme should be stored
		            reverse = navigator.reversedExtremes;

		        if (index === 0) {
		            // Grab the left handle
		            navigator.grabbedLeft = true;
		            navigator.otherHandlePos = navigator.zoomedMax;
		            navigator.fixedExtreme = reverse ? baseXAxis.min : baseXAxis.max;
		        } else {
		            // Grab the right handle
		            navigator.grabbedRight = true;
		            navigator.otherHandlePos = navigator.zoomedMin;
		            navigator.fixedExtreme = reverse ? baseXAxis.max : baseXAxis.min;
		        }

		        chart.fixedRange = null;
		    },
		    /**
		     * Mouse move event based on x/y mouse position.
		     *
		     * @private
		     * @function Highcharts.Navigator#onMouseMove
		     *
		     * @param {Highcharts.PointerEventObject} e
		     *        Mouse event
		     */
		    onMouseMove: function (e) {
		        var navigator = this,
		            chart = navigator.chart,
		            left = navigator.left,
		            navigatorSize = navigator.navigatorSize,
		            range = navigator.range,
		            dragOffset = navigator.dragOffset,
		            inverted = chart.inverted,
		            chartX;


		        // In iOS, a mousemove event with e.pageX === 0 is fired when holding
		        // the finger down in the center of the scrollbar. This should be
		        // ignored.
		        if (!e.touches || e.touches[0].pageX !== 0) { // #4696

		            e = chart.pointer.normalize(e);
		            chartX = e.chartX;

		            // Swap some options for inverted chart
		            if (inverted) {
		                left = navigator.top;
		                chartX = e.chartY;
		            }

		            // Drag left handle or top handle
		            if (navigator.grabbedLeft) {
		                navigator.hasDragged = true;
		                navigator.render(
		                    0,
		                    0,
		                    chartX - left,
		                    navigator.otherHandlePos
		                );
		            // Drag right handle or bottom handle
		            } else if (navigator.grabbedRight) {
		                navigator.hasDragged = true;
		                navigator.render(
		                    0,
		                    0,
		                    navigator.otherHandlePos,
		                    chartX - left
		                );
		            // Drag scrollbar or open area in navigator
		            } else if (navigator.grabbedCenter) {
		                navigator.hasDragged = true;
		                if (chartX < dragOffset) { // outside left
		                    chartX = dragOffset;
		                // outside right
		                } else if (chartX > navigatorSize + dragOffset - range) {
		                    chartX = navigatorSize + dragOffset - range;
		                }

		                navigator.render(
		                    0,
		                    0,
		                    chartX - dragOffset,
		                    chartX - dragOffset + range
		                );
		            }
		            if (
		                navigator.hasDragged &&
		                navigator.scrollbar &&
		                pick(
		                    navigator.scrollbar.options.liveRedraw,

		                    // By default, don't run live redraw on VML, on touch
		                    // devices or if the chart is in boost.
		                    H.svg && !isTouchDevice && !this.chart.isBoosting
		                )
		            ) {
		                e.DOMType = e.type; // DOMType is for IE8
		                setTimeout(function () {
		                    navigator.onMouseUp(e);
		                }, 0);
		            }
		        }
		    },

		    /**
		     * Mouse up event based on x/y mouse position.
		     *
		     * @private
		     * @function Highcharts.Navigator#onMouseUp
		     *
		     * @param {Highcharts.PointerEventObject} e
		     *        Mouse event
		     */
		    onMouseUp: function (e) {
		        var navigator = this,
		            chart = navigator.chart,
		            xAxis = navigator.xAxis,
		            scrollbar = navigator.scrollbar,
		            unionExtremes,
		            fixedMin,
		            fixedMax,
		            ext,
		            DOMEvent = e.DOMEvent || e;

		        if (
		            // MouseUp is called for both, navigator and scrollbar (that order),
		            // which causes calling afterSetExtremes twice. Prevent first call
		            // by checking if scrollbar is going to set new extremes (#6334)
		            (navigator.hasDragged && (!scrollbar || !scrollbar.hasDragged)) ||
		            e.trigger === 'scrollbar'
		        ) {
		            unionExtremes = navigator.getUnionExtremes();

		            // When dragging one handle, make sure the other one doesn't change
		            if (navigator.zoomedMin === navigator.otherHandlePos) {
		                fixedMin = navigator.fixedExtreme;
		            } else if (navigator.zoomedMax === navigator.otherHandlePos) {
		                fixedMax = navigator.fixedExtreme;
		            }
		            // Snap to right edge (#4076)
		            if (navigator.zoomedMax === navigator.size) {
		                fixedMax = navigator.reversedExtremes ?
		                    unionExtremes.dataMin : unionExtremes.dataMax;
		            }

		            // Snap to left edge (#7576)
		            if (navigator.zoomedMin === 0) {
		                fixedMin = navigator.reversedExtremes ?
		                    unionExtremes.dataMax : unionExtremes.dataMin;
		            }

		            ext = xAxis.toFixedRange(
		                navigator.zoomedMin,
		                navigator.zoomedMax,
		                fixedMin,
		                fixedMax
		            );

		            if (defined(ext.min)) {
		                chart.xAxis[0].setExtremes(
		                    Math.min(ext.min, ext.max),
		                    Math.max(ext.min, ext.max),
		                    true,
		                    // Run animation when clicking buttons, scrollbar track etc,
		                    // but not when dragging handles or scrollbar
		                    navigator.hasDragged ? false : null,
		                    {
		                        trigger: 'navigator',
		                        triggerOp: 'navigator-drag',
		                        DOMEvent: DOMEvent // #1838
		                    }
		                );
		            }
		        }

		        if (e.DOMType !== 'mousemove') {
		            navigator.grabbedLeft = navigator.grabbedRight =
		                navigator.grabbedCenter = navigator.fixedWidth =
		                navigator.fixedExtreme = navigator.otherHandlePos =
		                navigator.hasDragged = navigator.dragOffset = null;
		        }
		    },

		    /**
		     * Removes the event handlers attached previously with addEvents.
		     *
		     * @private
		     * @function Highcharts.Navigator#removeEvents
		     */
		    removeEvents: function () {
		        if (this.eventsToUnbind) {
		            this.eventsToUnbind.forEach(function (unbind) {
		                unbind();
		            });
		            this.eventsToUnbind = undefined;
		        }
		        this.removeBaseSeriesEvents();
		    },

		    /**
		     * Remove data events.
		     *
		     * @private
		     * @function Highcharts.Navigator#removeBaseSeriesEvents
		     */
		    removeBaseSeriesEvents: function () {
		        var baseSeries = this.baseSeries || [];
		        if (this.navigatorEnabled && baseSeries[0]) {
		            if (this.navigatorOptions.adaptToUpdatedData !== false) {
		                baseSeries.forEach(function (series) {
		                    removeEvent(series, 'updatedData', this.updatedDataHandler);
		                }, this);
		            }

		            // We only listen for extremes-events on the first baseSeries
		            if (baseSeries[0].xAxis) {
		                removeEvent(
		                    baseSeries[0].xAxis,
		                    'foundExtremes',
		                    this.modifyBaseAxisExtremes
		                );
		            }
		        }
		    },

		    /**
		     * Initiate the Navigator object
		     *
		     * @private
		     * @function Highcharts.Navigator#init
		     *
		     * @param {Highcharts.Chart} chart
		     */
		    init: function (chart) {
		        var chartOptions = chart.options,
		            navigatorOptions = chartOptions.navigator,
		            navigatorEnabled = navigatorOptions.enabled,
		            scrollbarOptions = chartOptions.scrollbar,
		            scrollbarEnabled = scrollbarOptions.enabled,
		            height = navigatorEnabled ? navigatorOptions.height : 0,
		            scrollbarHeight = scrollbarEnabled ? scrollbarOptions.height : 0;

		        this.handles = [];
		        this.shades = [];

		        this.chart = chart;
		        this.setBaseSeries();

		        this.height = height;
		        this.scrollbarHeight = scrollbarHeight;
		        this.scrollbarEnabled = scrollbarEnabled;
		        this.navigatorEnabled = navigatorEnabled;
		        this.navigatorOptions = navigatorOptions;
		        this.scrollbarOptions = scrollbarOptions;
		        this.outlineHeight = height + scrollbarHeight;

		        this.opposite = pick(
		            navigatorOptions.opposite,
		            !navigatorEnabled && chart.inverted
		        ); // #6262

		        var navigator = this,
		            baseSeries = navigator.baseSeries,
		            xAxisIndex = chart.xAxis.length,
		            yAxisIndex = chart.yAxis.length,
		            baseXaxis = baseSeries && baseSeries[0] && baseSeries[0].xAxis ||
		                chart.xAxis[0] || { options: {} };

		        chart.isDirtyBox = true;

		        if (navigator.navigatorEnabled) {
		            // an x axis is required for scrollbar also
		            navigator.xAxis = new Axis(chart, merge({
		                // inherit base xAxis' break and ordinal options
		                breaks: baseXaxis.options.breaks,
		                ordinal: baseXaxis.options.ordinal
		            }, navigatorOptions.xAxis, {
		                id: 'navigator-x-axis',
		                yAxis: 'navigator-y-axis',
		                isX: true,
		                type: 'datetime',
		                index: xAxisIndex,
		                isInternal: true,
		                offset: 0,
		                keepOrdinalPadding: true, // #2436
		                startOnTick: false,
		                endOnTick: false,
		                minPadding: 0,
		                maxPadding: 0,
		                zoomEnabled: false
		            }, chart.inverted ? {
		                offsets: [scrollbarHeight, 0, -scrollbarHeight, 0],
		                width: height
		            } : {
		                offsets: [0, -scrollbarHeight, 0, scrollbarHeight],
		                height: height
		            }));

		            navigator.yAxis = new Axis(chart, merge(navigatorOptions.yAxis, {
		                id: 'navigator-y-axis',
		                alignTicks: false,
		                offset: 0,
		                index: yAxisIndex,
		                isInternal: true,
		                zoomEnabled: false
		            }, chart.inverted ? {
		                width: height
		            } : {
		                height: height
		            }));

		            // If we have a base series, initialize the navigator series
		            if (baseSeries || navigatorOptions.series.data) {
		                navigator.updateNavigatorSeries(false);

		            // If not, set up an event to listen for added series
		            } else if (chart.series.length === 0) {

		                navigator.unbindRedraw = addEvent(
		                    chart,
		                    'beforeRedraw',
		                    function () {
		                        // We've got one, now add it as base
		                        if (chart.series.length > 0 && !navigator.series) {
		                            navigator.setBaseSeries();
		                            navigator.unbindRedraw(); // reset
		                        }
		                    }
		                );
		            }

		            navigator.reversedExtremes = (
		                chart.inverted && !navigator.xAxis.reversed
		            ) || (
		                !chart.inverted && navigator.xAxis.reversed
		            );

		            // Render items, so we can bind events to them:
		            navigator.renderElements();
		            // Add mouse events
		            navigator.addMouseEvents();

		        // in case of scrollbar only, fake an x axis to get translation
		        } else {
		            navigator.xAxis = {
		                translate: function (value, reverse) {
		                    var axis = chart.xAxis[0],
		                        ext = axis.getExtremes(),
		                        scrollTrackWidth = axis.len - 2 * scrollbarHeight,
		                        min = numExt('min', axis.options.min, ext.dataMin),
		                        valueRange = numExt(
		                            'max',
		                            axis.options.max,
		                            ext.dataMax
		                        ) - min;

		                    return reverse ?
		                        // from pixel to value
		                        (value * valueRange / scrollTrackWidth) + min :
		                        // from value to pixel
		                        scrollTrackWidth * (value - min) / valueRange;
		                },
		                toPixels: function (value) {
		                    return this.translate(value);
		                },
		                toValue: function (value) {
		                    return this.translate(value, true);
		                },
		                toFixedRange: Axis.prototype.toFixedRange,
		                fake: true
		            };
		        }


		        // Initialize the scrollbar
		        if (chart.options.scrollbar.enabled) {
		            chart.scrollbar = navigator.scrollbar = new Scrollbar(
		                chart.renderer,
		                merge(chart.options.scrollbar, {
		                    margin: navigator.navigatorEnabled ? 0 : 10,
		                    vertical: chart.inverted
		                }),
		                chart
		            );
		            addEvent(navigator.scrollbar, 'changed', function (e) {
		                var range = navigator.size,
		                    to = range * this.to,
		                    from = range * this.from;

		                navigator.hasDragged = navigator.scrollbar.hasDragged;
		                navigator.render(0, 0, from, to);

		                if (
		                    chart.options.scrollbar.liveRedraw ||
		                    (
		                        e.DOMType !== 'mousemove' &&
		                        e.DOMType !== 'touchmove'
		                    )
		                ) {
		                    setTimeout(function () {
		                        navigator.onMouseUp(e);
		                    });
		                }
		            });
		        }

		        // Add data events
		        navigator.addBaseSeriesEvents();
		        // Add redraw events
		        navigator.addChartEvents();
		    },

		    /**
		     * Get the union data extremes of the chart - the outer data extremes of the
		     * base X axis and the navigator axis.
		     *
		     * @private
		     * @function Highcharts.Navigator#getUnionExtremes
		     *
		     * @param {boolean} returnFalseOnNoBaseSeries
		     *        as the param says.
		     *
		     * @return {*}
		     */
		    getUnionExtremes: function (returnFalseOnNoBaseSeries) {
		        var baseAxis = this.chart.xAxis[0],
		            navAxis = this.xAxis,
		            navAxisOptions = navAxis.options,
		            baseAxisOptions = baseAxis.options,
		            ret;

		        if (!returnFalseOnNoBaseSeries || baseAxis.dataMin !== null) {
		            ret = {
		                dataMin: pick( // #4053
		                    navAxisOptions && navAxisOptions.min,
		                    numExt(
		                        'min',
		                        baseAxisOptions.min,
		                        baseAxis.dataMin,
		                        navAxis.dataMin,
		                        navAxis.min
		                    )
		                ),
		                dataMax: pick(
		                    navAxisOptions && navAxisOptions.max,
		                    numExt(
		                        'max',
		                        baseAxisOptions.max,
		                        baseAxis.dataMax,
		                        navAxis.dataMax,
		                        navAxis.max
		                    )
		                )
		            };
		        }
		        return ret;
		    },

		    /**
		     * Set the base series and update the navigator series from this. With a bit
		     * of modification we should be able to make this an API method to be called
		     * from the outside
		     *
		     * @private
		     * @function Highcharts.Navigator#setBaseSeries
		     *
		     * @param {*} baseSeriesOptions
		     *        Additional series options for a navigator
		     *
		     * @param {boolean} [redraw]
		     *        Whether to redraw after update.
		     */
		    setBaseSeries: function (baseSeriesOptions, redraw) {
		        var chart = this.chart,
		            baseSeries = this.baseSeries = [];

		        baseSeriesOptions = (
		            baseSeriesOptions ||
		            chart.options && chart.options.navigator.baseSeries ||
		            0
		        );

		        // Iterate through series and add the ones that should be shown in
		        // navigator.
		        (chart.series || []).forEach(function (series, i) {
		            if (
		                // Don't include existing nav series
		                !series.options.isInternal &&
		                (
		                    series.options.showInNavigator ||
		                    (
		                        i === baseSeriesOptions ||
		                        series.options.id === baseSeriesOptions
		                    ) &&
		                    series.options.showInNavigator !== false
		                )
		            ) {
		                baseSeries.push(series);
		            }
		        });

		        // When run after render, this.xAxis already exists
		        if (this.xAxis && !this.xAxis.fake) {
		            this.updateNavigatorSeries(true, redraw);
		        }
		    },

		    /**
		     * Update series in the navigator from baseSeries, adding new if does not
		     * exist.
		     *
		     * @private
		     * @function Highcharts.Navigator.updateNavigatorSeries
		     *
		     * @param {boolean} addEvents
		     *
		     * @param {boolean} redraw
		     */
		    updateNavigatorSeries: function (addEvents, redraw) {
		        var navigator = this,
		            chart = navigator.chart,
		            baseSeries = navigator.baseSeries,
		            baseOptions,
		            mergedNavSeriesOptions,
		            chartNavigatorSeriesOptions = navigator.navigatorOptions.series,
		            baseNavigatorOptions,
		            navSeriesMixin = {
		                enableMouseTracking: false,
		                index: null, // #6162
		                linkedTo: null, // #6734
		                group: 'nav', // for columns
		                padXAxis: false,
		                xAxis: 'navigator-x-axis',
		                yAxis: 'navigator-y-axis',
		                showInLegend: false,
		                stacking: false, // #4823
		                isInternal: true
		            },
		            // Remove navigator series that are no longer in the baseSeries
		            navigatorSeries = navigator.series =
		                (navigator.series || []).filter(function (navSeries) {
		                    var base = navSeries.baseSeries;
		                    if (baseSeries.indexOf(base) < 0) { // Not in array
		                        // If there is still a base series connected to this
		                        // series, remove event handler and reference.
		                        if (base) {
		                            removeEvent(
		                                base,
		                                'updatedData',
		                                navigator.updatedDataHandler
		                            );
		                            delete base.navigatorSeries;
		                        }
		                        // Kill the nav series. It may already have been
		                        // destroyed (#8715).
		                        if (navSeries.chart) {
		                            navSeries.destroy();
		                        }
		                        return false;
		                    }
		                    return true;
		                }
		            );

		        // Go through each base series and merge the options to create new
		        // series
		        if (baseSeries && baseSeries.length) {
		            baseSeries.forEach(function eachBaseSeries(base) {
		                var linkedNavSeries = base.navigatorSeries,
		                    userNavOptions = extend(
		                        // Grab color and visibility from base as default
		                        {
		                            color: base.color,
		                            visible: base.visible
		                        },
		                        !isArray(chartNavigatorSeriesOptions) ?
		                            chartNavigatorSeriesOptions :
		                            defaultOptions.navigator.series
		                    );

		                // Don't update if the series exists in nav and we have disabled
		                // adaptToUpdatedData.
		                if (
		                    linkedNavSeries &&
		                    navigator.navigatorOptions.adaptToUpdatedData === false
		                ) {
		                    return;
		                }

		                navSeriesMixin.name = 'Navigator ' + baseSeries.length;

		                baseOptions = base.options || {};
		                baseNavigatorOptions = baseOptions.navigatorOptions || {};
		                mergedNavSeriesOptions = merge(
		                    baseOptions,
		                    navSeriesMixin,
		                    userNavOptions,
		                    baseNavigatorOptions
		                );

		                // Merge data separately. Do a slice to avoid mutating the
		                // navigator options from base series (#4923).
		                var navigatorSeriesData =
		                    baseNavigatorOptions.data || userNavOptions.data;
		                navigator.hasNavigatorData =
		                    navigator.hasNavigatorData || !!navigatorSeriesData;
		                mergedNavSeriesOptions.data =
		                    navigatorSeriesData ||
		                    baseOptions.data && baseOptions.data.slice(0);

		                // Update or add the series
		                if (linkedNavSeries && linkedNavSeries.options) {
		                    linkedNavSeries.update(mergedNavSeriesOptions, redraw);
		                } else {
		                    base.navigatorSeries = chart.initSeries(
		                        mergedNavSeriesOptions
		                    );
		                    base.navigatorSeries.baseSeries = base; // Store ref
		                    navigatorSeries.push(base.navigatorSeries);
		                }
		            });
		        }

		        // If user has defined data (and no base series) or explicitly defined
		        // navigator.series as an array, we create these series on top of any
		        // base series.
		        if (
		            chartNavigatorSeriesOptions.data &&
		            !(baseSeries && baseSeries.length) ||
		            isArray(chartNavigatorSeriesOptions)
		        ) {
		            navigator.hasNavigatorData = false;
		            // Allow navigator.series to be an array
		            chartNavigatorSeriesOptions = H.splat(chartNavigatorSeriesOptions);
		            chartNavigatorSeriesOptions
		            .forEach(function (userSeriesOptions, i) {
		                navSeriesMixin.name =
		                    'Navigator ' + (navigatorSeries.length + 1);
		                mergedNavSeriesOptions = merge(
		                    defaultOptions.navigator.series,
		                    {
		                        // Since we don't have a base series to pull color from,
		                        // try to fake it by using color from series with same
		                        // index. Otherwise pull from the colors array. We need
		                        // an explicit color as otherwise updates will increment
		                        // color counter and we'll get a new color for each
		                        // update of the nav series.
		                        color: chart.series[i] &&
		                            !chart.series[i].options.isInternal &&
		                            chart.series[i].color ||
		                            chart.options.colors[i] ||
		                            chart.options.colors[0]
		                    },
		                    navSeriesMixin,
		                    userSeriesOptions
		                );
		                mergedNavSeriesOptions.data = userSeriesOptions.data;
		                if (mergedNavSeriesOptions.data) {
		                    navigator.hasNavigatorData = true;
		                    navigatorSeries.push(
		                        chart.initSeries(mergedNavSeriesOptions)
		                    );
		                }
		            });
		        }

		        if (addEvents) {
		            this.addBaseSeriesEvents();
		        }
		    },

		    /**
		     * Add data events.
		     * For example when main series is updated we need to recalculate extremes
		     *
		     * @private
		     * @function Highcharts.Navigator#addBaseSeriesEvent
		     */
		    addBaseSeriesEvents: function () {
		        var navigator = this,
		            baseSeries = navigator.baseSeries || [];

		        // Bind modified extremes event to first base's xAxis only.
		        // In event of > 1 base-xAxes, the navigator will ignore those.
		        // Adding this multiple times to the same axis is no problem, as
		        // duplicates should be discarded by the browser.
		        if (baseSeries[0] && baseSeries[0].xAxis) {
		            addEvent(
		                baseSeries[0].xAxis,
		                'foundExtremes',
		                this.modifyBaseAxisExtremes
		            );
		        }

		        baseSeries.forEach(function (base) {
		            // Link base series show/hide to navigator series visibility
		            addEvent(base, 'show', function () {
		                if (this.navigatorSeries) {
		                    this.navigatorSeries.setVisible(true, false);
		                }
		            });
		            addEvent(base, 'hide', function () {
		                if (this.navigatorSeries) {
		                    this.navigatorSeries.setVisible(false, false);
		                }
		            });

		            // Respond to updated data in the base series, unless explicitily
		            // not adapting to data changes.
		            if (this.navigatorOptions.adaptToUpdatedData !== false) {
		                if (base.xAxis) {
		                    addEvent(base, 'updatedData', this.updatedDataHandler);
		                }
		            }

		            // Handle series removal
		            addEvent(base, 'remove', function () {
		                if (this.navigatorSeries) {
		                    erase(navigator.series, this.navigatorSeries);
		                    if (defined(this.navigatorSeries.options)) {
		                        this.navigatorSeries.remove(false);
		                    }
		                    delete this.navigatorSeries;
		                }
		            });
		        }, this);
		    },

		    /**
		     * Get minimum from all base series connected to the navigator
		     *
		     * @param  {number} currentSeriesMin
		     *         Minium from the current series
		     *
		     * @return {number} Minimum from all series
		     */
		    getBaseSeriesMin: function (currentSeriesMin) {
		        return this.baseSeries.reduce(
		            function (min, series) {
		                return Math.min(min, series.xData[0]);
		            },
		            currentSeriesMin
		        );
		    },

		    /**
		     * Set the navigator x axis extremes to reflect the total. The navigator
		     * extremes should always be the extremes of the union of all series in the
		     * chart as well as the navigator series.
		     *
		     * @private
		     * @function Highcharts.Navigator#modifyNavigatorAxisExtremes
		     */
		    modifyNavigatorAxisExtremes: function () {
		        var xAxis = this.xAxis,
		            unionExtremes;

		        if (xAxis.getExtremes) {
		            unionExtremes = this.getUnionExtremes(true);
		            if (
		                unionExtremes &&
		                (
		                    unionExtremes.dataMin !== xAxis.min ||
		                    unionExtremes.dataMax !== xAxis.max
		                )
		            ) {
		                xAxis.min = unionExtremes.dataMin;
		                xAxis.max = unionExtremes.dataMax;
		            }
		        }
		    },

		    /**
		     * Hook to modify the base axis extremes with information from the Navigator
		     *
		     * @private
		     * @function Highcharts.Navigator#modifyBaseAxisExtremes
		     */
		    modifyBaseAxisExtremes: function () {
		        var baseXAxis = this,
		            navigator = baseXAxis.chart.navigator,
		            baseExtremes = baseXAxis.getExtremes(),
		            baseMin = baseExtremes.min,
		            baseMax = baseExtremes.max,
		            baseDataMin = baseExtremes.dataMin,
		            baseDataMax = baseExtremes.dataMax,
		            range = baseMax - baseMin,
		            stickToMin = navigator.stickToMin,
		            stickToMax = navigator.stickToMax,
		            overscroll = pick(baseXAxis.options.overscroll, 0),
		            newMax,
		            newMin,
		            navigatorSeries = navigator.series && navigator.series[0],
		            hasSetExtremes = !!baseXAxis.setExtremes,

		            // When the extremes have been set by range selector button, don't
		            // stick to min or max. The range selector buttons will handle the
		            // extremes. (#5489)
		            unmutable = baseXAxis.eventArgs &&
		                baseXAxis.eventArgs.trigger === 'rangeSelectorButton';

		        if (!unmutable) {

		            // If the zoomed range is already at the min, move it to the right
		            // as new data comes in
		            if (stickToMin) {
		                newMin = baseDataMin;
		                newMax = newMin + range;
		            }

		            // If the zoomed range is already at the max, move it to the right
		            // as new data comes in
		            if (stickToMax) {
		                newMax = baseDataMax + overscroll;

		                // if stickToMin is true, the new min value is set above
		                if (!stickToMin) {
		                    newMin = Math.max(
		                        newMax - range,
		                        navigator.getBaseSeriesMin(
		                            navigatorSeries && navigatorSeries.xData ?
		                                navigatorSeries.xData[0] :
		                                -Number.MAX_VALUE
		                        )
		                    );
		                }
		            }

		            // Update the extremes
		            if (hasSetExtremes && (stickToMin || stickToMax)) {
		                if (isNumber(newMin)) {
		                    baseXAxis.min = baseXAxis.userMin = newMin;
		                    baseXAxis.max = baseXAxis.userMax = newMax;
		                }
		            }
		        }

		        // Reset
		        navigator.stickToMin = navigator.stickToMax = null;
		    },

		    /**
		     * Handler for updated data on the base series. When data is modified, the
		     * navigator series must reflect it. This is called from the Chart.redraw
		     * function before axis and series extremes are computed.
		     *
		     * @private
		     * @function Highcharts.Navigator#updateDataHandler
		     */
		    updatedDataHandler: function () {
		        var navigator = this.chart.navigator,
		            baseSeries = this,
		            navigatorSeries = this.navigatorSeries,
		            xDataMin = navigator.getBaseSeriesMin(baseSeries.xData[0]);

		        // If the scrollbar is scrolled all the way to the right, keep right as
		        // new data  comes in.
		        navigator.stickToMax = navigator.reversedExtremes ?
		            Math.round(navigator.zoomedMin) === 0 :
		            Math.round(navigator.zoomedMax) >= Math.round(navigator.size);

		        // Detect whether the zoomed area should stick to the minimum or
		        // maximum. If the current axis minimum falls outside the new updated
		        // dataset, we must adjust.
		        navigator.stickToMin = isNumber(baseSeries.xAxis.min) &&
		            (baseSeries.xAxis.min <= xDataMin) &&
		            (!this.chart.fixedRange || !navigator.stickToMax);

		        // Set the navigator series data to the new data of the base series
		        if (navigatorSeries && !navigator.hasNavigatorData) {
		            navigatorSeries.options.pointStart = baseSeries.xData[0];
		            navigatorSeries.setData(
		                baseSeries.options.data,
		                false,
		                null,
		                false
		            ); // #5414
		        }
		    },

		    /**
		     * Add chart events, like redrawing navigator, when chart requires that.
		     *
		     * @private
		     * @function Highcharts.Navigator#addChartEvents
		     */
		    addChartEvents: function () {
		        if (!this.eventsToUnbind) {
		            this.eventsToUnbind = [];
		        }

		        this.eventsToUnbind.push(
		            // Move the scrollbar after redraw, like after data updata even if
		            // axes don't redraw
		            addEvent(
		                this.chart,
		                'redraw',
		                function () {
		                    var navigator = this.navigator,
		                        xAxis = navigator && (
		                            navigator.baseSeries &&
		                            navigator.baseSeries[0] &&
		                            navigator.baseSeries[0].xAxis ||
		                            navigator.scrollbar && this.xAxis[0]
		                        ); // #5709

		                    if (xAxis) {
		                        navigator.render(xAxis.min, xAxis.max);
		                    }
		                }
		            ),
		            // Make room for the navigator, can be placed around the chart:
		            addEvent(
		                this.chart,
		                'getMargins',
		                function () {
		                    var chart = this,
		                        navigator = chart.navigator,
		                        marginName = navigator.opposite ?
		                            'plotTop' : 'marginBottom';
		                    if (chart.inverted) {
		                        marginName = navigator.opposite ?
		                            'marginRight' : 'plotLeft';
		                    }

		                    chart[marginName] = (chart[marginName] || 0) + (
		                        navigator.navigatorEnabled || !chart.inverted ?
		                            navigator.outlineHeight :
		                            0
		                    ) + navigator.navigatorOptions.margin;
		                }
		            )
		        );
		    },

		    /**
		     * Destroys allocated elements.
		     *
		     * @private
		     * @function Highcharts.Navigator#destroy
		     */
		    destroy: function () {

		        // Disconnect events added in addEvents
		        this.removeEvents();

		        if (this.xAxis) {
		            erase(this.chart.xAxis, this.xAxis);
		            erase(this.chart.axes, this.xAxis);
		        }
		        if (this.yAxis) {
		            erase(this.chart.yAxis, this.yAxis);
		            erase(this.chart.axes, this.yAxis);
		        }
		        // Destroy series
		        (this.series || []).forEach(function (s) {
		            if (s.destroy) {
		                s.destroy();
		            }
		        });

		        // Destroy properties
		        [
		            'series', 'xAxis', 'yAxis', 'shades', 'outline', 'scrollbarTrack',
		            'scrollbarRifles', 'scrollbarGroup', 'scrollbar', 'navigatorGroup',
		            'rendered'
		        ].forEach(function (prop) {
		            if (this[prop] && this[prop].destroy) {
		                this[prop].destroy();
		            }
		            this[prop] = null;
		        }, this);

		        // Destroy elements in collection
		        [this.handles].forEach(function (coll) {
		            destroyObjectProperties(coll);
		        }, this);
		    }
		};

		H.Navigator = Navigator;

		/*
		 * For Stock charts, override selection zooming with some special features
		 * because X axis zooming is already allowed by the Navigator and Range
		 * selector.
		 */
		wrap(Axis.prototype, 'zoom', function (proceed, newMin, newMax) {
		    var chart = this.chart,
		        chartOptions = chart.options,
		        zoomType = chartOptions.chart.zoomType,
		        pinchType = chartOptions.chart.pinchType,
		        previousZoom,
		        navigator = chartOptions.navigator,
		        rangeSelector = chartOptions.rangeSelector,
		        ret;

		    if (this.isXAxis && ((navigator && navigator.enabled) ||
		            (rangeSelector && rangeSelector.enabled))) {

		        // For y only zooming, ignore the X axis completely
		        if (zoomType === 'y') {
		            ret = false;

		        // For xy zooming, record the state of the zoom before zoom selection,
		        // then when the reset button is pressed, revert to this state. This
		        // should apply only if the chart is initialized with a range (#6612),
		        // otherwise zoom all the way out.
		        } else if (
		            (
		                (!isTouchDevice && zoomType === 'xy') ||
		                (isTouchDevice && pinchType === 'xy')
		            ) &&
		            this.options.range
		        ) {

		            previousZoom = this.previousZoom;
		            if (defined(newMin)) {
		                this.previousZoom = [this.min, this.max];
		            } else if (previousZoom) {
		                newMin = previousZoom[0];
		                newMax = previousZoom[1];
		                delete this.previousZoom;
		            }
		        }

		    }
		    return ret !== undefined ? ret : proceed.call(this, newMin, newMax);
		});

		/**
		 * For Stock charts. For x only zooming, do not to create the zoom button
		 * because X axis zooming is already allowed by the Navigator and Range
		 * selector. (#9285)
		 */
		addEvent(Chart, 'beforeShowResetZoom', function () {
		    var chartOptions = this.options,
		        navigator = chartOptions.navigator,
		        rangeSelector = chartOptions.rangeSelector;

		    if (
		        (
		            (navigator && navigator.enabled) ||
		            (rangeSelector && rangeSelector.enabled)
		        ) && (
		            (!isTouchDevice && chartOptions.chart.zoomType === 'x') ||
		            (isTouchDevice && chartOptions.chart.pinchType === 'x')
		        )
		    ) {
		        return false;
		    }
		});

		// Initialize navigator for stock charts
		addEvent(Chart, 'beforeRender', function () {
		    var options = this.options;
		    if (options.navigator.enabled || options.scrollbar.enabled) {
		        this.scroller = this.navigator = new Navigator(this);
		    }
		});

		/*
		 * For stock charts, extend the Chart.setChartSize method so that we can set the
		 * final top position of the navigator once the height of the chart, including
		 * the legend, is determined. #367. We can't use Chart.getMargins, because
		 * labels offsets are not calculated yet.
		 */
		addEvent(Chart, 'afterSetChartSize', function () {

		    var legend = this.legend,
		        navigator = this.navigator,
		        scrollbarHeight,
		        legendOptions,
		        xAxis,
		        yAxis;

		    if (navigator) {
		        legendOptions = legend && legend.options;
		        xAxis = navigator.xAxis;
		        yAxis = navigator.yAxis;
		        scrollbarHeight = navigator.scrollbarHeight;

		        // Compute the top position
		        if (this.inverted) {
		            navigator.left = navigator.opposite ?
		                this.chartWidth - scrollbarHeight - navigator.height :
		                this.spacing[3] + scrollbarHeight;
		            navigator.top = this.plotTop + scrollbarHeight;
		        } else {
		            navigator.left = this.plotLeft + scrollbarHeight;
		            navigator.top = navigator.navigatorOptions.top ||
		                this.chartHeight -
		                navigator.height -
		                scrollbarHeight -
		                this.spacing[2] -
		                (
		                    this.rangeSelector && this.extraBottomMargin ?
		                        this.rangeSelector.getHeight() :
		                        0
		                ) -
		                (
		                    (
		                        legendOptions &&
		                        legendOptions.verticalAlign === 'bottom' &&
		                        legendOptions.enabled &&
		                        !legendOptions.floating
		                    ) ?
		                        legend.legendHeight + pick(legendOptions.margin, 10) :
		                        0
		                );
		        }

		        if (xAxis && yAxis) { // false if navigator is disabled (#904)

		            if (this.inverted) {
		                xAxis.options.left = yAxis.options.left = navigator.left;
		            } else {
		                xAxis.options.top = yAxis.options.top = navigator.top;
		            }

		            xAxis.setAxisSize();
		            yAxis.setAxisSize();
		        }
		    }
		});

		// Merge options, if no scrolling exists yet
		addEvent(Chart, 'update', function (e) {

		    var navigatorOptions = (e.options.navigator || {}),
		        scrollbarOptions = (e.options.scrollbar || {});

		    if (!this.navigator && !this.scroller &&
		        (navigatorOptions.enabled || scrollbarOptions.enabled)
		    ) {
		        merge(true, this.options.navigator, navigatorOptions);
		        merge(true, this.options.scrollbar, scrollbarOptions);
		        delete e.options.navigator;
		        delete e.options.scrollbar;
		    }

		});

		// Initiate navigator, if no scrolling exists yet
		addEvent(Chart, 'afterUpdate', function () {

		    if (!this.navigator && !this.scroller &&
		        (this.options.navigator.enabled || this.options.scrollbar.enabled)
		    ) {
		        this.scroller = this.navigator = new Navigator(this);
		    }

		});

		// Pick up badly formatted point options to addPoint
		wrap(Series.prototype, 'addPoint', function (
		    proceed,
		    options,
		    redraw,
		    shift,
		    animation
		) {
		    var turboThreshold = this.options.turboThreshold;
		    if (
		        turboThreshold &&
		        this.xData.length > turboThreshold &&
		        isObject(options, true) &&
		        this.chart.navigator
		    ) {
		        error(20, true, this.chart);
		    }
		    proceed.call(this, options, redraw, shift, animation);
		});

		// Handle adding new series
		addEvent(Chart, 'afterAddSeries', function () {
		    if (this.navigator) {
		        // Recompute which series should be shown in navigator, and add them
		        this.navigator.setBaseSeries(null, false);
		    }
		});

		// Handle updating series
		addEvent(Series, 'afterUpdate', function () {
		    if (this.chart.navigator && !this.options.isInternal) {
		        this.chart.navigator.setBaseSeries(null, false);
		    }
		});

		Chart.prototype.callbacks.push(function (chart) {
		    var extremes,
		        navigator = chart.navigator;

		    // Initiate the navigator
		    if (navigator && chart.xAxis[0]) {
		        extremes = chart.xAxis[0].getExtremes();
		        navigator.render(extremes.min, extremes.max);
		    }
		});

	}(Highcharts));
	(function (H) {
		/* *
		 * (c) 2010-2018 Torstein Honsi
		 *
		 * License: www.highcharts.com/license
		 */



		var Point = H.Point,
		    seriesType = H.seriesType,
		    seriesTypes = H.seriesTypes;

		/**
		 * The ohlc series type.
		 *
		 * @private
		 * @class
		 * @name Highcharts.seriesTypes.ohlc
		 *
		 * @augments Highcharts.seriesTypes.column
		 */

		seriesType('ohlc', 'column'

		/**
		 * An OHLC chart is a style of financial chart used to describe price
		 * movements over time. It displays open, high, low and close values per data
		 * point.
		 *
		 * @sample stock/demo/ohlc/
		 *         OHLC chart
		 *
		 * @extends      plotOptions.column
		 * @excluding    borderColor, borderRadius, borderWidth, crisp, stacking, stack
		 * @product      highstock
		 * @optionparent plotOptions.ohlc
		 */
		, {

		    /**
		     * The approximate pixel width of each group. If for example a series
		     * with 30 points is displayed over a 600 pixel wide plot area, no grouping
		     * is performed. If however the series contains so many points that
		     * the spacing is less than the groupPixelWidth, Highcharts will try
		     * to group it into appropriate groups so that each is more or less
		     * two pixels wide. Defaults to `5`.
		     *
		     * @type      {number}
		     * @default   5
		     * @product   highstock
		     * @apioption plotOptions.ohlc.dataGrouping.groupPixelWidth
		     */

		    /**
		     * The pixel width of the line/border. Defaults to `1`.
		     *
		     * @sample {highstock} stock/plotoptions/ohlc-linewidth/
		     *         A greater line width
		     *
		     * @type    {number}
		     * @default 1
		     * @product highstock
		     */
		    lineWidth: 1,

		    tooltip: {
		        pointFormat: '<span style="color:{point.color}">\u25CF</span> ' +
		            '<b> {series.name}</b><br/>' +
		            'Open: {point.open}<br/>' +
		            'High: {point.high}<br/>' +
		            'Low: {point.low}<br/>' +
		            'Close: {point.close}<br/>'
		    },

		    threshold: null,

		    states: {

		        /**
		         * @extends plotOptions.column.states.hover
		         * @product highstock
		         */
		        hover: {

		            /**
		             * The pixel width of the line representing the OHLC point.
		             *
		             * @type    {number}
		             * @default 3
		             * @product highstock
		             */
		            lineWidth: 3
		        }
		    },

		    /**
		     * Determines which one of `open`, `high`, `low`, `close` values should be
		     * represented as `point.y`, which is later used to set dataLabel position.
		     *
		     * @sample {highstock} stock/plotoptions/ohlc-pointvalkey/
		     *         Possible values
		     *
		     * @type       {string}
		     * @default    close
		     * @validvalue ["open", "high", "low", "close"]
		     * @product    highstock
		     * @apioption  plotOptions.ohlc.pointValKey
		     */

		    /**
		     * Line color for up points.
		     *
		     * @type      {Highcharts.ColorString}
		     * @product   highstock
		     * @apioption plotOptions.ohlc.upColor
		     */

		    stickyTracking: true

		}, /** @lends Highcharts.seriesTypes.ohlc */ {
		    directTouch: false,
		    pointArrayMap: ['open', 'high', 'low', 'close'],
		    toYData: function (point) { // return a plain array for speedy calculation
		        return [point.open, point.high, point.low, point.close];
		    },
		    pointValKey: 'close',

		    pointAttrToOptions: {
		        'stroke': 'color',
		        'stroke-width': 'lineWidth'
		    },

		    /**
		     * @private
		     * @function Highcarts.seriesTypes.ohlc#init
		     */
		    init: function () {
		        seriesTypes.column.prototype.init.apply(this, arguments);

		        this.options.stacking = false; // #8817
		    },

		    /**
		     * Postprocess mapping between options and SVG attributes
		     *
		     * @private
		     * @function Highcharts.seriesTypes.ohlc#pointAttribs
		     *
		     * @param {Highcharts.Point} point
		     *
		     * @param {string} state
		     *
		     * @return {Highcharts.Dictionary<*>}
		     */
		    pointAttribs: function (point, state) {
		        var attribs = seriesTypes.column.prototype.pointAttribs.call(
		                this,
		                point,
		                state
		            ),
		            options = this.options;

		        delete attribs.fill;

		        if (
		            !point.options.color &&
		            options.upColor &&
		            point.open < point.close
		        ) {
		            attribs.stroke = options.upColor;
		        }

		        return attribs;
		    },

		    /**
		     * Translate data points from raw values x and y to plotX and plotY
		     *
		     * @private
		     * @function Highcharts.seriesTypes.ohlc#translate
		     */
		    translate: function () {
		        var series = this,
		            yAxis = series.yAxis,
		            hasModifyValue = !!series.modifyValue,
		            translated = [
		                'plotOpen',
		                'plotHigh',
		                'plotLow',
		                'plotClose',
		                'yBottom'
		            ]; // translate OHLC for

		        seriesTypes.column.prototype.translate.apply(series);

		        // Do the translation
		        series.points.forEach(function (point) {
		            [point.open, point.high, point.low, point.close, point.low].forEach(
		                function (value, i) {
		                    if (value !== null) {
		                        if (hasModifyValue) {
		                            value = series.modifyValue(value);
		                        }
		                        point[translated[i]] = yAxis.toPixels(value, true);
		                    }
		                }
		            );

		            // Align the tooltip to the high value to avoid covering the point
		            point.tooltipPos[1] =
		                point.plotHigh + yAxis.pos - series.chart.plotTop;
		        });
		    },

		    /**
		     * Draw the data points
		     *
		     * @private
		     * @function Highcharts.seriesTypes.ohlc#drawPoints
		     */
		    drawPoints: function () {
		        var series = this,
		            points = series.points,
		            chart = series.chart;


		        points.forEach(function (point) {
		            var plotOpen,
		                plotClose,
		                crispCorr,
		                halfWidth,
		                path,
		                graphic = point.graphic,
		                crispX,
		                isNew = !graphic;

		            if (point.plotY !== undefined) {

		                // Create and/or update the graphic
		                if (!graphic) {
		                    point.graphic = graphic = chart.renderer.path()
		                        .add(series.group);
		                }

		                if (!chart.styledMode) {
		                    graphic.attr(
		                        series.pointAttribs(point, point.selected && 'select')
		                    ); // #3897
		                }

		                // crisp vector coordinates
		                crispCorr = (graphic.strokeWidth() % 2) / 2;
		                crispX = Math.round(point.plotX) - crispCorr;  // #2596
		                halfWidth = Math.round(point.shapeArgs.width / 2);

		                // the vertical stem
		                path = [
		                    'M',
		                    crispX, Math.round(point.yBottom),
		                    'L',
		                    crispX, Math.round(point.plotHigh)
		                ];

		                // open
		                if (point.open !== null) {
		                    plotOpen = Math.round(point.plotOpen) + crispCorr;
		                    path.push(
		                        'M',
		                        crispX,
		                        plotOpen,
		                        'L',
		                        crispX - halfWidth,
		                        plotOpen
		                    );
		                }

		                // close
		                if (point.close !== null) {
		                    plotClose = Math.round(point.plotClose) + crispCorr;
		                    path.push(
		                        'M',
		                        crispX,
		                        plotClose,
		                        'L',
		                        crispX + halfWidth,
		                        plotClose
		                    );
		                }

		                graphic[isNew ? 'attr' : 'animate']({ d: path })
		                    .addClass(point.getClassName(), true);

		            }


		        });

		    },

		    animate: null // Disable animation

		}, /** @lends Highcharts.seriesTypes.ohlc.prototype.pointClass.prototype */ {

		    /**
		     * Extend the parent method by adding up or down to the class name.
		     *
		     * @private
		     * @function Highcharts.seriesTypes.ohlc#getClassName
		     */
		    getClassName: function () {
		        return Point.prototype.getClassName.call(this) +
		            (
		                this.open < this.close ?
		                    ' highcharts-point-up' :
		                    ' highcharts-point-down'
		            );
		    }

		});

		/**
		 * A `ohlc` series. If the [type](#series.ohlc.type) option is not
		 * specified, it is inherited from [chart.type](#chart.type).
		 *
		 * @extends   series,plotOptions.ohlc
		 * @excluding dataParser, dataURL
		 * @product   highstock
		 * @apioption series.ohlc
		 */

		/**
		 * An array of data points for the series. For the `ohlc` series type,
		 * points can be given in the following ways:
		 *
		 * 1. An array of arrays with 5 or 4 values. In this case, the values correspond
		 *    to `x,open,high,low,close`. If the first value is a string, it is applied
		 *    as the name of the point, and the `x` value is inferred. The `x` value can
		 *    also be omitted, in which case the inner arrays should be of length 4\.
		 *    Then the `x` value is automatically calculated, either starting at 0 and
		 *    incremented by 1, or from `pointStart` and `pointInterval` given in the
		 *    series options.
		 *    ```js
		 *    data: [
		 *        [0, 6, 5, 6, 7],
		 *        [1, 9, 4, 8, 2],
		 *        [2, 6, 3, 4, 10]
		 *    ]
		 *    ```
		 *
		 * 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.
		 *    ```js
		 *    data: [{
		 *        x: 1,
		 *        open: 3,
		 *        high: 4,
		 *        low: 5,
		 *        close: 2,
		 *        name: "Point2",
		 *        color: "#00FF00"
		 *    }, {
		 *        x: 1,
		 *        open: 4,
		 *        high: 3,
		 *        low: 6,
		 *        close: 7,
		 *        name: "Point1",
		 *        color: "#FF00FF"
		 *    }]
		 *    ```
		 *
		 * @type      {Array<Array<(number|string),number,number,number>|Array<(number|string),number,number,number,number>|*>}
		 * @extends   series.arearange.data
		 * @excluding y, marker
		 * @product   highstock
		 * @apioption series.ohlc.data
		 */

		/**
		 * The closing value of each data point.
		 *
		 * @type      {number}
		 * @product   highstock
		 * @apioption series.ohlc.data.close
		 */

		/**
		 * The opening value of each data point.
		 *
		 * @type      {number}
		 * @product   highstock
		 * @apioption series.ohlc.data.open
		 */

	}(Highcharts));
	(function (H) {
		/**
		 * (c) 2010-2018 Torstein Honsi
		 *
		 * License: www.highcharts.com/license
		 */
		/* eslint max-len: 0 */



		var addEvent = H.addEvent,
		    Axis = H.Axis,
		    Chart = H.Chart,
		    css = H.css,
		    defined = H.defined,
		    extend = H.extend,
		    noop = H.noop,
		    pick = H.pick,
		    Series = H.Series,
		    timeUnits = H.timeUnits,
		    wrap = H.wrap;

		/* ****************************************************************************
		 * Start ordinal axis logic                                                   *
		 *****************************************************************************/

		wrap(Series.prototype, 'init', function (proceed) {
		    var series = this,
		        xAxis;

		    // call the original function
		    proceed.apply(this, Array.prototype.slice.call(arguments, 1));

		    xAxis = series.xAxis;

		    // Destroy the extended ordinal index on updated data
		    if (xAxis && xAxis.options.ordinal) {
		        addEvent(series, 'updatedData', function () {
		            delete xAxis.ordinalIndex;
		        });
		    }
		});

		/* *
		 * In an ordinal axis, there might be areas with dense consentrations of points,
		 * then large gaps between some. Creating equally distributed ticks over this
		 * entire range may lead to a huge number of ticks that will later be removed.
		 * So instead, break the positions up in segments, find the tick positions for
		 * each segment then concatenize them. This method is used from both data
		 * grouping logic and X axis tick position logic.
		 */
		wrap(Axis.prototype, 'getTimeTicks', function (
		    proceed,
		    normalizedInterval,
		    min,
		    max,
		    startOfWeek,
		    positions,
		    closestDistance,
		    findHigherRanks
		) {

		    var start = 0,
		        end,
		        segmentPositions,
		        higherRanks = {},
		        hasCrossedHigherRank,
		        info,
		        posLength,
		        outsideMax,
		        groupPositions = [],
		        lastGroupPosition = -Number.MAX_VALUE,
		        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
		    ) {
		        return proceed.call(this, normalizedInterval, min, max, startOfWeek);
		    }

		    // Analyze the positions array to split it into segments on gaps larger than 5 times
		    // the closest distance. The closest distance is already found at this point, so
		    // we reuse that instead of computing it again.
		    posLength = positions.length;

		    for (end = 0; end < posLength; end++) {

		        outsideMax = end && positions[end - 1] > max;

		        if (positions[end] < min) { // Set the last position before min
		            start = end;
		        }

		        if (end === posLength - 1 || positions[end + 1] - positions[end] > closestDistance * 5 || outsideMax) {

		            // For each segment, calculate the tick positions from the getTimeTicks utility
		            // function. The interval will be the same regardless of how long the segment is.
		            if (positions[end] > lastGroupPosition) { // #1475

		                segmentPositions = proceed.call(this, normalizedInterval, positions[start], positions[end], startOfWeek);

		                // Prevent duplicate groups, for example for multiple segments within one larger time frame (#1475)
		                while (segmentPositions.length && segmentPositions[0] <= lastGroupPosition) {
		                    segmentPositions.shift();
		                }
		                if (segmentPositions.length) {
		                    lastGroupPosition = segmentPositions[segmentPositions.length - 1];
		                }

		                groupPositions = groupPositions.concat(segmentPositions);
		            }
		            // Set start of next segment
		            start = end + 1;
		        }

		        if (outsideMax) {
		            break;
		        }
		    }

		    // Get the grouping info from the last of the segments. The info is the same for
		    // all segments.
		    info = segmentPositions.info;

		    // Optionally identify ticks with higher rank, for example when the ticks
		    // have crossed midnight.
		    if (findHigherRanks && info.unitRange <= timeUnits.hour) {
		        end = groupPositions.length - 1;

		        // Compare points two by two
		        for (start = 1; start < end; start++) {
		            if (
		                time.dateFormat('%d', groupPositions[start]) !==
		                time.dateFormat('%d', groupPositions[start - 1])
		            ) {
		                higherRanks[groupPositions[start]] = 'day';
		                hasCrossedHigherRank = true;
		            }
		        }

		        // If the complete array has crossed midnight, we want to mark the first
		        // positions also as higher rank
		        if (hasCrossedHigherRank) {
		            higherRanks[groupPositions[0]] = 'day';
		        }
		        info.higherRanks = higherRanks;
		    }

		    // Save the info
		    groupPositions.info = info;



		    // Don't show ticks within a gap in the ordinal axis, where the space between
		    // two points is greater than a portion of the tick pixel interval
		    if (findHigherRanks && defined(tickPixelIntervalOption)) { // check for squashed ticks

		        var length = groupPositions.length,
		            i = length,
		            itemToRemove,
		            translated,
		            translatedArr = [],
		            lastTranslated,
		            medianDistance,
		            distance,
		            distances = [];

		        // Find median pixel distance in order to keep a reasonably even distance between
		        // ticks (#748)
		        while (i--) {
		            translated = this.translate(groupPositions[i]);
		            if (lastTranslated) {
		                distances[i] = lastTranslated - translated;
		            }
		            translatedArr[i] = lastTranslated = translated;
		        }
		        distances.sort();
		        medianDistance = distances[Math.floor(distances.length / 2)];
		        if (medianDistance < tickPixelIntervalOption * 0.6) {
		            medianDistance = null;
		        }

		        // Now loop over again and remove ticks where needed
		        i = groupPositions[length - 1] > max ? length - 1 : length; // #817
		        lastTranslated = undefined;
		        while (i--) {
		            translated = translatedArr[i];
		            distance = Math.abs(lastTranslated - translated);
		            // #4175 - when axis is reversed, the distance, is negative but
		            // tickPixelIntervalOption positive, so we need to compare the same values

		            // Remove ticks that are closer than 0.6 times the pixel interval from the one to the right,
		            // but not if it is close to the median distance (#748).
		            if (lastTranslated && distance < tickPixelIntervalOption * 0.8 &&
		                    (medianDistance === null || distance < medianDistance * 0.8)) {

		                // Is this a higher ranked position with a normal position to the right?
		                if (higherRanks[groupPositions[i]] && !higherRanks[groupPositions[i + 1]]) {

		                    // Yes: remove the lower ranked neighbour to the right
		                    itemToRemove = i + 1;
		                    lastTranslated = translated; // #709

		                } else {

		                    // No: remove this one
		                    itemToRemove = i;
		                }

		                groupPositions.splice(itemToRemove, 1);

		            } else {
		                lastTranslated = translated;
		            }
		        }
		    }
		    return groupPositions;
		});

		// Extend the Axis prototype
		extend(Axis.prototype, /** @lends Axis.prototype */ {

		    /**
		     * Calculate the ordinal positions before tick positions are calculated.
		     *
		     * @private
		     * @function Highcharts.Axis#beforeSetTickPositions
		     */
		    beforeSetTickPositions: function () {
		        var axis = this,
		            len,
		            ordinalPositions = [],
		            uniqueOrdinalPositions,
		            useOrdinal = false,
		            dist,
		            extremes = axis.getExtremes(),
		            min = extremes.min,
		            max = extremes.max,
		            minIndex,
		            maxIndex,
		            slope,
		            hasBreaks = axis.isXAxis && !!axis.options.breaks,
		            isOrdinal = axis.options.ordinal,
		            overscrollPointsRange = Number.MAX_VALUE,
		            ignoreHiddenSeries = axis.chart.options.chart.ignoreHiddenSeries,
		            i,
		            hasBoostedSeries;

		        // Apply the ordinal logic
		        if (isOrdinal || hasBreaks) { // #4167 YAxis is never ordinal ?

		            axis.series.forEach(function (series, i) {
		                uniqueOrdinalPositions = [];

		                if (
		                    (!ignoreHiddenSeries || series.visible !== false) &&
		                    (series.takeOrdinalPosition !== false || hasBreaks)
		                ) {

		                    // concatenate the processed X data into the existing positions, or the empty array
		                    ordinalPositions = ordinalPositions.concat(series.processedXData);
		                    len = ordinalPositions.length;

		                    // remove duplicates (#1588)
		                    ordinalPositions.sort(function (a, b) {
		                        return a - b; // without a custom function it is sorted as strings
		                    });

		                    overscrollPointsRange = Math.min(
		                        overscrollPointsRange,
		                        pick(
		                            // Check for a single-point series:
		                            series.closestPointRange,
		                            overscrollPointsRange
		                        )
		                    );

		                    if (len) {

		                        i = 0;
		                        while (i < len - 1) {
		                            if (
		                                ordinalPositions[i] !== ordinalPositions[i + 1]
		                            ) {
		                                uniqueOrdinalPositions.push(
		                                    ordinalPositions[i + 1]
		                                );
		                            }
		                            i++;
		                        }

		                        // Check first item:
		                        if (
		                            uniqueOrdinalPositions[0] !== ordinalPositions[0]
		                        ) {
		                            uniqueOrdinalPositions.unshift(
		                                ordinalPositions[0]
		                            );
		                        }

		                        ordinalPositions = uniqueOrdinalPositions;
		                    }
		                }

		                if (series.isSeriesBoosting) {
		                    hasBoostedSeries = true;
		                }

		            });

		            if (hasBoostedSeries) {
		                ordinalPositions.length = 0;
		            }

		            // cache the length
		            len = ordinalPositions.length;

		            // Check if we really need the overhead of mapping axis data against the ordinal positions.
		            // If the series consist of evenly spaced data any way, we don't need any ordinal logic.
		            if (len > 2) { // two points have equal distance by default
		                dist = ordinalPositions[1] - ordinalPositions[0];
		                i = len - 1;
		                while (i-- && !useOrdinal) {
		                    if (ordinalPositions[i + 1] - ordinalPositions[i] !== dist) {
		                        useOrdinal = true;
		                    }
		                }

		                // When zooming in on a week, prevent axis padding for weekends even though the data within
		                // the week is evenly spaced.
		                if (
		                    !axis.options.keepOrdinalPadding &&
		                    (
		                        ordinalPositions[0] - min > dist ||
		                        max - ordinalPositions[ordinalPositions.length - 1] > dist
		                    )
		                ) {
		                    useOrdinal = true;
		                }
		            } else if (axis.options.overscroll) {
		                if (len === 2) {
		                    // Exactly two points, distance for overscroll is fixed:
		                    overscrollPointsRange = ordinalPositions[1] - ordinalPositions[0];
		                } else if (len === 1) {
		                    // We have just one point, closest distance is unknown.
		                    // Assume then it is last point and overscrolled range:
		                    overscrollPointsRange = axis.options.overscroll;
		                    ordinalPositions = [ordinalPositions[0], ordinalPositions[0] + overscrollPointsRange];
		                } else {
		                    // In case of zooming in on overscrolled range, stick to the old range:
		                    overscrollPointsRange = axis.overscrollPointsRange;
		                }
		            }

		            // Record the slope and offset to compute the linear values from the array index.
		            // Since the ordinal positions may exceed the current range, get the start and
		            // end positions within it (#719, #665b)
		            if (useOrdinal) {

		                if (axis.options.overscroll) {
		                    axis.overscrollPointsRange = overscrollPointsRange;
		                    ordinalPositions = ordinalPositions.concat(axis.getOverscrollPositions());
		                }

		                // Register
		                axis.ordinalPositions = ordinalPositions;

		                // This relies on the ordinalPositions being set. Use Math.max
		                // and Math.min to prevent padding on either sides of the data.
		                minIndex = axis.ordinal2lin( // #5979
		                    Math.max(
		                        min,
		                        ordinalPositions[0]
		                    ),
		                    true
		                );
		                maxIndex = Math.max(axis.ordinal2lin(
		                    Math.min(
		                        max,
		                        ordinalPositions[ordinalPositions.length - 1]
		                    ),
		                    true
		                ), 1); // #3339

		                // Set the slope and offset of the values compared to the indices in the ordinal positions
		                axis.ordinalSlope = slope = (max - min) / (maxIndex - minIndex);
		                axis.ordinalOffset = min - (minIndex * slope);

		            } else {
		                axis.overscrollPointsRange = pick(axis.closestPointRange, axis.overscrollPointsRange);
		                axis.ordinalPositions = axis.ordinalSlope = axis.ordinalOffset = undefined;
		            }
		        }

		        axis.isOrdinal = isOrdinal && useOrdinal; // #3818, #4196, #4926
		        axis.groupIntervalFactor = null; // reset for next run
		    },

		    /**
		     * Translate from a linear axis value to the corresponding ordinal axis
		     * position. If there are no gaps in the ordinal axis this will be the same.
		     * The translated value is the value that the point would have if the axis
		     * were linear, using the same min and max.
		     *
		     * @private
		     * @function Highcharts.Axis#val2lin
		     *
		     * @param {number} val
		     *        The axis value.
		     *
		     * @param {boolean} toIndex
		     *        Whether to return the index in the ordinalPositions or the new
		     *        value.
		     *
		     * @return {number}
		     */
		    val2lin: function (val, toIndex) {
		        var axis = this,
		            ordinalPositions = axis.ordinalPositions,
		            ret;

		        if (!ordinalPositions) {
		            ret = val;

		        } else {

		            var ordinalLength = ordinalPositions.length,
		                i,
		                distance,
		                ordinalIndex;

		            // first look for an exact match in the ordinalpositions array
		            i = ordinalLength;
		            while (i--) {
		                if (ordinalPositions[i] === val) {
		                    ordinalIndex = i;
		                    break;
		                }
		            }

		            // if that failed, find the intermediate position between the two nearest values
		            i = ordinalLength - 1;
		            while (i--) {
		                if (val > ordinalPositions[i] || i === 0) { // interpolate
		                    distance = (val - ordinalPositions[i]) / (ordinalPositions[i + 1] - ordinalPositions[i]); // something between 0 and 1
		                    ordinalIndex = i + distance;
		                    break;
		                }
		            }
		            ret = toIndex ?
		                ordinalIndex :
		                axis.ordinalSlope * (ordinalIndex || 0) + axis.ordinalOffset;
		        }
		        return ret;
		    },
		    /**
		     * Translate from linear (internal) to axis value.
		     *
		     * @private
		     * @function Highcharts.Axis#lin2val
		     *
		     * @param {number} val
		     *        The linear abstracted value.
		     *
		     * @param {boolean} fromIndex
		     *        Translate from an index in the ordinal positions rather than a
		     *        value.
		     *
		     * @return {number}
		     */
		    lin2val: function (val, fromIndex) {
		        var axis = this,
		            ordinalPositions = axis.ordinalPositions,
		            ret;

		        if (!ordinalPositions) { // the visible range contains only equally spaced values
		            ret = val;

		        } else {

		            var ordinalSlope = axis.ordinalSlope,
		                ordinalOffset = axis.ordinalOffset,
		                i = ordinalPositions.length - 1,
		                linearEquivalentLeft,
		                linearEquivalentRight,
		                distance;


		            // Handle the case where we translate from the index directly, used only
		            // when panning an ordinal axis
		            if (fromIndex) {

		                if (val < 0) { // out of range, in effect panning to the left
		                    val = ordinalPositions[0];
		                } else if (val > i) { // out of range, panning to the right
		                    val = ordinalPositions[i];
		                } else { // split it up
		                    i = Math.floor(val);
		                    distance = val - i; // the decimal
		                }

		            // Loop down along the ordinal positions. When the linear equivalent of i matches
		            // an ordinal position, interpolate between the left and right values.
		            } else {
		                while (i--) {
		                    linearEquivalentLeft = (ordinalSlope * i) + ordinalOffset;
		                    if (val >= linearEquivalentLeft) {
		                        linearEquivalentRight = (ordinalSlope * (i + 1)) + ordinalOffset;
		                        distance = (val - linearEquivalentLeft) / (linearEquivalentRight - linearEquivalentLeft); // something between 0 and 1
		                        break;
		                    }
		                }
		            }

		            // If the index is within the range of the ordinal positions, return the associated
		            // or interpolated value. If not, just return the value
		            return distance !== undefined && ordinalPositions[i] !== undefined ?
		                ordinalPositions[i] + (distance ? distance * (ordinalPositions[i + 1] - ordinalPositions[i]) : 0) :
		                val;
		        }
		        return ret;
		    },
		    /**
		     * Get the ordinal positions for the entire data set. This is necessary in
		     * chart panning because we need to find out what points or data groups are
		     * available outside the visible range. When a panning operation starts, if
		     * an index for the given grouping does not exists, it is created and
		     * cached. This index is deleted on updated data, so it will be regenerated
		     * the next time a panning operation starts.
		     *
		     * @private
		     * @function Highcharts.Axis#getExtendedPositions
		     *
		     * @return {Array<number>}
		     */
		    getExtendedPositions: function () {
		        var axis = this,
		            chart = axis.chart,
		            grouping = axis.series[0].currentDataGrouping,
		            ordinalIndex = axis.ordinalIndex,
		            key = grouping ? grouping.count + grouping.unitName : 'raw',
		            overscroll = axis.options.overscroll,
		            extremes = axis.getExtremes(),
		            fakeAxis,
		            fakeSeries;

		        // If this is the first time, or the ordinal index is deleted by updatedData,
		        // create it.
		        if (!ordinalIndex) {
		            ordinalIndex = axis.ordinalIndex = {};
		        }


		        if (!ordinalIndex[key]) {

		            // Create a fake axis object where the extended ordinal positions are emulated
		            fakeAxis = {
		                series: [],
		                chart: chart,
		                getExtremes: function () {
		                    return {
		                        min: extremes.dataMin,
		                        max: extremes.dataMax + overscroll
		                    };
		                },
		                options: {
		                    ordinal: true
		                },
		                val2lin: Axis.prototype.val2lin, // #2590
		                ordinal2lin: Axis.prototype.ordinal2lin // #6276
		            };

		            // Add the fake series to hold the full data, then apply processData to it
		            axis.series.forEach(function (series) {
		                fakeSeries = {
		                    xAxis: fakeAxis,
		                    xData: series.xData.slice(),
		                    chart: chart,
		                    destroyGroupedData: noop
		                };

		                fakeSeries.xData = fakeSeries.xData.concat(axis.getOverscrollPositions());

		                fakeSeries.options = {
		                    dataGrouping: grouping ? {
		                        enabled: true,
		                        forced: true,
		                        approximation: 'open', // doesn't matter which, use the fastest
		                        units: [[grouping.unitName, [grouping.count]]]
		                    } : {
		                        enabled: false
		                    }
		                };
		                series.processData.apply(fakeSeries);


		                fakeAxis.series.push(fakeSeries);
		            });

		            // Run beforeSetTickPositions to compute the ordinalPositions
		            axis.beforeSetTickPositions.apply(fakeAxis);

		            // Cache it
		            ordinalIndex[key] = fakeAxis.ordinalPositions;
		        }
		        return ordinalIndex[key];
		    },

		    /**
		     * Get ticks for an ordinal axis within a range where points don't exist.
		     * It is required when overscroll is enabled. We can't base on points,
		     * because we may not have any, so we use approximated pointRange and
		     * generate these ticks between Axis.dataMax, Axis.dataMax + Axis.overscroll
		     * evenly spaced. Used in panning and navigator scrolling.
		     *
		     * @private
		     * @function Highcharts.Axis#getOverscrollPositions
		     *
		     * @returns {Array<number>}
		     *          Generated ticks
		     */
		    getOverscrollPositions: function () {
		        var axis = this,
		            extraRange = axis.options.overscroll,
		            distance = axis.overscrollPointsRange,
		            positions = [],
		            max = axis.dataMax;

		        if (H.defined(distance)) {
		            // Max + pointRange because we need to scroll to the last

		            positions.push(max);

		            while (max <= axis.dataMax + extraRange) {
		                max += distance;
		                positions.push(max);
		            }

		        }

		        return positions;
		    },

		    /**
		     * Find the factor to estimate how wide the plot area would have been if
		     * ordinal gaps were included. This value is used to compute an imagined
		     * plot width in order to establish the data grouping interval.
		     *
		     * A real world case is the intraday-candlestick example. Without this
		     * logic, it would show the correct data grouping when viewing a range
		     * within each day, but once moving the range to include the gap between two
		     * days, the interval would include the cut-away night hours and the data
		     * grouping would be wrong. So the below method tries to compensate by
		     * identifying the most common point interval, in this case days.
		     *
		     * An opposite case is presented in issue #718. We have a long array of
		     * daily data, then one point is appended one hour after the last point. We
		     * expect the data grouping not to change.
		     *
		     * In the future, if we find cases where this estimation doesn't work
		     * optimally, we might need to add a second pass to the data grouping logic,
		     * where we do another run with a greater interval if the number of data
		     * groups is more than a certain fraction of the desired group count.
		     *
		     * @private
		     * @function Highcharts.Axis#getGroupIntervalFactor
		     *
		     * @param {number} xMin
		     *
		     * @param {number} xMax
		     *
		     * @param {Highcharts.Series} series
		     *
		     * @return {number}
		     */
		    getGroupIntervalFactor: function (xMin, xMax, series) {
		        var i,
		            processedXData = series.processedXData,
		            len = processedXData.length,
		            distances = [],
		            median,
		            groupIntervalFactor = this.groupIntervalFactor;

		        // Only do this computation for the first series, let the other inherit it (#2416)
		        if (!groupIntervalFactor) {

		            // Register all the distances in an array
		            for (i = 0; i < len - 1; i++) {
		                distances[i] = processedXData[i + 1] - processedXData[i];
		            }

		            // Sort them and find the median
		            distances.sort(function (a, b) {
		                return a - b;
		            });
		            median = distances[Math.floor(len / 2)];

		            // Compensate for series that don't extend through the entire axis extent. #1675.
		            xMin = Math.max(xMin, processedXData[0]);
		            xMax = Math.min(xMax, processedXData[len - 1]);

		            this.groupIntervalFactor = groupIntervalFactor = (len * median) / (xMax - xMin);
		        }

		        // Return the factor needed for data grouping
		        return groupIntervalFactor;
		    },

		    /**
		     * Make the tick intervals closer because the ordinal gaps make the ticks
		     * spread out or cluster.
		     *
		     * @private
		     * @function Highcharts.Axis#postProcessTickInterval
		     *
		     * @param {number} tickInterval
		     *
		     * @return {number}
		     */
		    postProcessTickInterval: function (tickInterval) {
		        // 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
		        // thus the tick interval should not be altered
		        var ordinalSlope = this.ordinalSlope,
		            ret;


		        if (ordinalSlope) {
		            if (!this.options.breaks) {
		                ret = tickInterval / (ordinalSlope / this.closestPointRange);
		            } else {
		                ret = this.closestPointRange || tickInterval; // #7275
		            }
		        } else {
		            ret = tickInterval;
		        }
		        return ret;
		    }
		});

		// Record this to prevent overwriting by broken-axis module (#5979)
		Axis.prototype.ordinal2lin = Axis.prototype.val2lin;

		// Extending the Chart.pan method for ordinal axes
		wrap(Chart.prototype, 'pan', function (proceed, e) {
		    var chart = this,
		        xAxis = chart.xAxis[0],
		        overscroll = xAxis.options.overscroll,
		        chartX = e.chartX,
		        runBase = false;

		    if (xAxis.options.ordinal && xAxis.series.length) {

		        var mouseDownX = chart.mouseDownX,
		            extremes = xAxis.getExtremes(),
		            dataMax = extremes.dataMax,
		            min = extremes.min,
		            max = extremes.max,
		            trimmedRange,
		            hoverPoints = chart.hoverPoints,
		            closestPointRange = xAxis.closestPointRange || xAxis.overscrollPointsRange,
		            pointPixelWidth = xAxis.translationSlope * (xAxis.ordinalSlope || closestPointRange),
		            movedUnits = (mouseDownX - chartX) / pointPixelWidth, // how many ordinal units did we move?
		            extendedAxis = { ordinalPositions: xAxis.getExtendedPositions() }, // get index of all the chart's points
		            ordinalPositions,
		            searchAxisLeft,
		            lin2val = xAxis.lin2val,
		            val2lin = xAxis.val2lin,
		            searchAxisRight;

		        if (!extendedAxis.ordinalPositions) { // we have an ordinal axis, but the data is equally spaced
		            runBase = true;

		        } else if (Math.abs(movedUnits) > 1) {

		            // Remove active points for shared tooltip
		            if (hoverPoints) {
		                hoverPoints.forEach(function (point) {
		                    point.setState();
		                });
		            }

		            if (movedUnits < 0) {
		                searchAxisLeft = extendedAxis;
		                searchAxisRight = xAxis.ordinalPositions ? xAxis : extendedAxis;
		            } else {
		                searchAxisLeft = xAxis.ordinalPositions ? xAxis : extendedAxis;
		                searchAxisRight = extendedAxis;
		            }

		            // In grouped data series, the last ordinal position represents the grouped data, which is
		            // to the left of the real data max. If we don't compensate for this, we will be allowed
		            // to pan grouped data series passed the right of the plot area.
		            ordinalPositions = searchAxisRight.ordinalPositions;
		            if (dataMax > ordinalPositions[ordinalPositions.length - 1]) {
		                ordinalPositions.push(dataMax);
		            }

		            // Get the new min and max values by getting the ordinal index for the current extreme,
		            // then add the moved units and translate back to values. This happens on the
		            // extended ordinal positions if the new position is out of range, else it happens
		            // on the current x axis which is smaller and faster.
		            chart.fixedRange = max - min;
		            trimmedRange = xAxis.toFixedRange(null, null,
		                lin2val.apply(searchAxisLeft, [
		                    val2lin.apply(searchAxisLeft, [min, true]) + movedUnits, // the new index
		                    true // translate from index
		                ]),
		                lin2val.apply(searchAxisRight, [
		                    val2lin.apply(searchAxisRight, [max, true]) + movedUnits, // the new index
		                    true // translate from index
		                ])
		            );

		            // Apply it if it is within the available data range
		            if (
		                trimmedRange.min >= Math.min(extremes.dataMin, min) &&
		                trimmedRange.max <= Math.max(dataMax, max) + overscroll
		            ) {
		                xAxis.setExtremes(trimmedRange.min, trimmedRange.max, true, false, { trigger: 'pan' });
		            }

		            chart.mouseDownX = chartX; // set new reference for next run
		            css(chart.container, { cursor: 'move' });
		        }

		    } else {
		        runBase = true;
		    }

		    // revert to the linear chart.pan version
		    if (runBase) {
		        if (overscroll) {
		            xAxis.max = xAxis.dataMax + overscroll;
		        }
		        // call the original function
		        proceed.apply(this, Array.prototype.slice.call(arguments, 1));
		    }
		});

		addEvent(Axis, 'foundExtremes', function () {
		    var axis = this;

		    if (
		        axis.isXAxis &&
		        defined(axis.options.overscroll) &&
		        axis.max === axis.dataMax &&
		        (
		            // Panning is an execption,
		            // We don't want to apply overscroll when panning over the dataMax
		            !axis.chart.mouseIsDown ||
		            axis.isInternal
		        ) && (
		            // Scrollbar buttons are the other execption:
		            !axis.eventArgs ||
		            axis.eventArgs && axis.eventArgs.trigger !== 'navigator'
		        )
		    ) {
		        axis.max += axis.options.overscroll;

		        // Live data and buttons require translation for the min:
		        if (!axis.isInternal && defined(axis.userMin)) {
		            axis.min += axis.options.overscroll;
		        }
		    }
		});

		/* ****************************************************************************
		 * End ordinal axis logic                                                   *
		 *****************************************************************************/

	}(Highcharts));
	(function (H) {
		/* *
		 * (c) 2010-2018 Torstein Honsi
		 *
		 * License: www.highcharts.com/license
		 */



		var addEvent = H.addEvent,
		    CenteredSeriesMixin = H.CenteredSeriesMixin,
		    defined = H.defined,
		    extend = H.extend,
		    getStartAndEndRadians = CenteredSeriesMixin.getStartAndEndRadians,
		    LegendSymbolMixin = H.LegendSymbolMixin,
		    noop = H.noop,
		    pick = H.pick,
		    Point = H.Point,
		    Series = H.Series,
		    seriesType = H.seriesType,
		    seriesTypes = H.seriesTypes,
		    setAnimation = H.setAnimation;

		/**
		 * Pie series type.
		 *
		 * @private
		 * @class
		 * @name Highcharts.seriesTypes.pie
		 *
		 * @augments Highcharts.Series
		 */
		seriesType('pie', 'line'

		/**
		 * A pie chart is a circular graphic which is divided into slices to illustrate
		 * numerical proportion.
		 *
		 * @sample highcharts/demo/pie-basic/
		 *         Pie chart
		 *
		 * @extends      plotOptions.line
		 * @excluding    animationLimit, boostThreshold, connectEnds, connectNulls,
		 *               cropThreshold, dashStyle, findNearestPointBy,
		 *               getExtremesFromAll, lineWidth, marker, negativeColor,
		 *               pointInterval, pointIntervalUnit, pointPlacement,
		 *               pointStart, softThreshold, stacking, step, threshold,
		 *               turboThreshold, zoneAxis, zones
		 * @product      highcharts
		 * @optionparent plotOptions.pie
		 */
		, {

		    /**
		     * @excluding legendItemClick
		     * @apioption plotOptions.pie.events
		     */

		    /**
		     * Fires when the checkbox next to the point name in the legend is clicked.
		     * One parameter, event, is passed to the function. The state of the
		     * checkbox is found by event.checked. The checked item is found by
		     * event.item. Return false to prevent the default action which is to
		     * toggle the select state of the series.
		     *
		     * @sample {highcharts} highcharts/plotoptions/series-events-checkboxclick/
		     *         Alert checkbox status
		     *
		     * @type      {Function}
		     * @since     1.2.0
		     * @product   highcharts
		     * @context   Highcharts.Point
		     * @apioption plotOptions.pie.events.checkboxClick
		     */

		    /**
		     * The center of the pie chart relative to the plot area. Can be percentages
		     * or pixel values. The default behaviour (as of 3.0) is to center
		     * the pie so that all slices and data labels are within the plot area.
		     * As a consequence, the pie may actually jump around in a chart with
		     * dynamic values, as the data labels move. In that case, the center
		     * should be explicitly set, for example to `["50%", "50%"]`.
		     *
		     * @sample {highcharts} highcharts/plotoptions/pie-center/
		     *         Centered at 100, 100
		     *
		     * @type    {Array<number|string|null>}
		     * @default [null, null]
		     * @product highcharts
		     */
		    center: [null, null],

		    /**
		     * @product highcharts
		     */
		    clip: false,

		    /**
		     * @ignore
		     */
		    colorByPoint: true, // always true for pies

		    /**
		     * A series specific or series type specific color set to use instead
		     * of the global [colors](#colors).
		     *
		     * @sample {highcharts} highcharts/demo/pie-monochrome/
		     *         Set default colors for all pies
		     *
		     * @type      {Array<Highcharts.ColorString>}
		     * @since     3.0
		     * @product   highcharts
		     * @apioption plotOptions.pie.colors
		     */

		    /**
		     * @extends   plotOptions.series.dataLabels
		     * @excluding align, allowOverlap, staggerLines, step
		     * @product   highcharts
		     */
		    dataLabels: {

		        allowOverlap: true,

		        /**
		         * The color of the line connecting the data label to the pie slice.
		         * The default color is the same as the point's color.
		         *
		         * In styled mode, the connector stroke is given in the
		         * `.highcharts-data-label-connector` class.
		         *
		         * @sample {highcharts} highcharts/plotoptions/pie-datalabels-connectorcolor/
		         *         Blue connectors
		         * @sample {highcharts} highcharts/css/pie-point/
		         *         Styled connectors
		         *
		         * @type      {Highcharts.ColorString}
		         * @since     2.1
		         * @product   highcharts
		         * @apioption plotOptions.pie.dataLabels.connectorColor
		         */

		        /**
		         * The distance from the data label to the connector. Note that data
		         * labels also have a default `padding`, so in order for the connector
		         * to touch the text, the `padding` must also be 0.
		         *
		         * @sample {highcharts} highcharts/plotoptions/pie-datalabels-connectorpadding/
		         *         No padding
		         *
		         * @since     2.1
		         * @product   highcharts
		         * @apioption plotOptions.pie.dataLabels.connectorPadding
		         */
		        connectorPadding: 5,

		        /**
		         * The width of the line connecting the data label to the pie slice.
		         *
		         *
		         * In styled mode, the connector stroke width is given in the
		         * `.highcharts-data-label-connector` class.
		         *
		         * @sample {highcharts} highcharts/plotoptions/pie-datalabels-connectorwidth-disabled/
		         *         Disable the connector
		         * @sample {highcharts} highcharts/css/pie-point/
		         *         Styled connectors
		         *
		         * @type      {number}
		         * @default   1
		         * @since     2.1
		         * @product   highcharts
		         * @apioption plotOptions.pie.dataLabels.connectorWidth
		         */

		        /**
		         * @sample {highcharts} highcharts/plotOptions/pie-datalabels-overflow
		         *         Long labels truncated with an ellipsis
		         * @sample {highcharts} highcharts/plotOptions/pie-datalabels-overflow-wrap
		         *         Long labels are wrapped
		         *
		         * @type      {Highcharts.CSSObject}
		         * @apioption plotOptions.pie.dataLabels.style
		         */

		        /**
		         * The distance of the data label from the pie's edge. Negative numbers
		         * put the data label on top of the pie slices. Connectors are only
		         * shown for data labels outside the pie.
		         *
		         * @sample {highcharts} highcharts/plotoptions/pie-datalabels-distance/
		         *         Data labels on top of the pie
		         *
		         * @since   2.1
		         * @product highcharts
		         */
		        distance: 30,

		        /**
		         * Enable or disable the data labels.
		         *
		         * @since   2.1
		         * @product highcharts
		         */
		        enabled: true,

		        /**
		         * @type      {Highcharts.FormatterCallbackFunction<Highcharts.SeriesDataLabelsFormatterContextObject>}
		         * @default   function () { return this.point.name; }
		         * @apioption plotOptions.pie.dataLabels.formatter
		         */
		        formatter: function () { // #2945
		            return this.point.isNull ? undefined : this.point.name;
		        },

		        /**
		         * Whether to render the connector as a soft arc or a line with sharp
		         * break. Works only if `connectorShape` equals to `fixedOffset`.
		         *
		         * @sample {highcharts} highcharts/plotoptions/pie-datalabels-softconnector-true/
		         *         Soft
		         * @sample {highcharts} highcharts/plotoptions/pie-datalabels-softconnector-false/
		         *         Non soft
		         *
		         * @type      {number}
		         * @since     2.1.7
		         * @product   highcharts
		         * @apioption plotOptions.pie.dataLabels.softConnector
		         */
		        softConnector: true,

		         /**
		          * Alignment method for data labels. Possible values are:
		          * `'toPlotEdges'` (each label touches the nearest vertical edge of
		          * the plot area) or `'connectors'` (connectors have the same x
		          * position and the widest label of each half (left & right) touches
		          * the nearest vertical edge of the plot area).
		          *
		          * @type {String}
		          * @sample {highcharts} highcharts/plotoptions/pie-datalabels-alignto-connectors/ alignTo: connectors
		          * @sample {highcharts} highcharts/plotoptions/pie-datalabels-alignto-plotedges/ alignTo: plotEdges
		          * @since 7.0.0
		          * @default undefined
		          * @product highcharts
		          * @apioption plotOptions.pie.dataLabels.alignTo
		          */

		        x: 0,

		        /**
		         * Specifies the method that is used to generate the connector path.
		         * Highcharts provides 3 built-in connector shapes: `'fixedOffset'`
		         * (default), `'straight'` and `'crookedLine'`. Using `'crookedLine'`
		         * has the most sense (in most of the cases) when `'alignTo'` is set.
		         *
		         * Users can provide their own method by passing a function instead of
		         * a String. 3 arguments are passed to the callback:
		         *
		         * <ol>
		         *  <li>
		         *   Object that holds the information about the coordinates of the
		         *   label (`x` & `y` properties) and how the label is located in
		         *   relation to the pie (`alignment` property). `alignment` can by one
		         *   of the following:
		         *   `'left'` (pie on the left side of the data label),
		         *   `'right'` (pie on the right side of the data label) or
		         *   `'center'` (data label overlaps the pie).
		         *  </li>
		         *  <li>
		         *   Object that holds the information about the position of the
		         *   connector. Its `touchingSliceAt`  porperty tells the position of
		         *   the place where the connector touches the slice.
		         *  </li>
		         *  <li>
		         *   Data label options
		         *  </li>
		         * </ol>
		         *
		         * The function has to return an SVG path definition in array form
		         * (see the example).
		         *
		         * @type {String|Function}
		         * @since 7.0.0
		         * @sample {highcharts} highcharts/plotoptions/pie-datalabels-connectorshape-string/ connectorShape is a String
		         * @sample {highcharts} highcharts/plotoptions/pie-datalabels-connectorshape-function/ connectorShape is a function
		         * @product highcharts
		         * @apioption plotOptions.pie.dataLabels.connectorShape
		         */
		        connectorShape: 'fixedOffset',

		        /**
		         * Works only if `connectorShape` is `'crookedLine'`. It defines how far
		         * from the vertical plot edge the coonnector path should be crooked.
		         *
		         * @type {String}
		         * @since 7.0.0
		         * @sample {highcharts} highcharts/plotoptions/pie-datalabels-crookdistance/ crookDistance set to 90%
		         * @product highcharts
		         * @apioption plotOptions.pie.dataLabels.crookDistance
		         */
		        crookDistance: '70%'
		    },

		    /**
		     * The end angle of the pie in degrees where 0 is top and 90 is right.
		     * Defaults to `startAngle` plus 360.
		     *
		     * @sample {highcharts} highcharts/demo/pie-semi-circle/
		     *         Semi-circle donut
		     *
		     * @type      {number}
		     * @since     1.3.6
		     * @product   highcharts
		     * @apioption plotOptions.pie.endAngle
		     */

		    /**
		     * Equivalent to [chart.ignoreHiddenSeries](#chart.ignoreHiddenSeries),
		     * this option tells whether the series shall be redrawn as if the
		     * hidden point were `null`.
		     *
		     * The default value changed from `false` to `true` with Highcharts
		     * 3.0.
		     *
		     * @sample {highcharts} highcharts/plotoptions/pie-ignorehiddenpoint/
		     *         True, the hiddden point is ignored
		     *
		     * @since   2.3.0
		     * @product highcharts
		     */
		    ignoreHiddenPoint: true,

		    /**
		     * The size of the inner diameter for the pie. A size greater than 0
		     * renders a donut chart. Can be a percentage or pixel value. Percentages
		     * are relative to the pie size. Pixel values are given as integers.
		     *
		     *
		     * Note: in Highcharts < 4.1.2, the percentage was relative to the plot
		     * area, not the pie size.
		     *
		     * @sample {highcharts} highcharts/plotoptions/pie-innersize-80px/
		     *         80px inner size
		     * @sample {highcharts} highcharts/plotoptions/pie-innersize-50percent/
		     *         50% of the plot area
		     * @sample {highcharts} highcharts/demo/3d-pie-donut/
		     *         3D donut
		     *
		     * @type      {number|string}
		     * @default   0
		     * @since     2.0
		     * @product   highcharts
		     * @apioption plotOptions.pie.innerSize
		     */

		    /**
		     * @ignore
		     */
		    legendType: 'point',

		    /**
		     * @ignore
		     */
		    marker: null, // point options are specified in the base options

		    /**
		     * The minimum size for a pie in response to auto margins. The pie will
		     * try to shrink to make room for data labels in side the plot area,
		     *  but only to this size.
		     *
		     * @type      {number}
		     * @default   80
		     * @since     3.0
		     * @product   highcharts
		     * @apioption plotOptions.pie.minSize
		     */

		    /**
		     * The diameter of the pie relative to the plot area. Can be a percentage
		     * or pixel value. Pixel values are given as integers. The default
		     * behaviour (as of 3.0) is to scale to the plot area and give room
		     * for data labels within the plot area.
		     * [slicedOffset](#plotOptions.pie.slicedOffset) is also included
		     * in the default size calculation. As a consequence, the size
		     * of the pie may vary when points are updated and data labels more
		     * around. In that case it is best to set a fixed value, for example
		     * `"75%"`.
		     *
		     * @sample {highcharts} highcharts/plotoptions/pie-size/
		     *         Smaller pie
		     *
		     * @type    {number|string|null}
		     * @product highcharts
		     */
		    size: null,

		    /**
		     * Whether to display this particular series or series type in the
		     * legend. Since 2.1, pies are not shown in the legend by default.
		     *
		     * @sample {highcharts} highcharts/plotoptions/series-showinlegend/
		     *         One series in the legend, one hidden
		     *
		     * @product highcharts
		     */
		    showInLegend: false,

		    /**
		     * If a point is sliced, moved out from the center, how many pixels
		     * should it be moved?.
		     *
		     * @sample {highcharts} highcharts/plotoptions/pie-slicedoffset-20/
		     *         20px offset
		     *
		     * @product highcharts
		     */
		    slicedOffset: 10,

		    /**
		     * The start angle of the pie slices in degrees where 0 is top and 90
		     * right.
		     *
		     * @sample {highcharts} highcharts/plotoptions/pie-startangle-90/
		     *         Start from right
		     *
		     * @type      {number}
		     * @default   0
		     * @since     2.3.4
		     * @product   highcharts
		     * @apioption plotOptions.pie.startAngle
		     */

		    /**
		     * Sticky tracking of mouse events. When true, the `mouseOut` event
		     * on a series isn't triggered until the mouse moves over another series,
		     * or out of the plot area. When false, the `mouseOut` event on a
		     * series is triggered when the mouse leaves the area around the series'
		     * graph or markers. This also implies the tooltip. When `stickyTracking`
		     * is false and `tooltip.shared` is false, the tooltip will be hidden
		     * when moving the mouse between series.
		     *
		     * @product highcharts
		     */
		    stickyTracking: false,

		    tooltip: {
		        followPointer: true
		    },

		    /**
		     * The color of the border surrounding each slice. When `null`, the
		     * border takes the same color as the slice fill. This can be used
		     * together with a `borderWidth` to fill drawing gaps created by
		     * antialiazing artefacts in borderless pies.
		     *
		     * In styled mode, the border stroke is given in the `.highcharts-point`
		     * class.
		     *
		     * @sample {highcharts} highcharts/plotoptions/pie-bordercolor-black/
		     *         Black border
		     *
		     * @type    {Highcharts.ColorString}
		     * @default #ffffff
		     * @product highcharts
		     */
		    borderColor: '#ffffff',

		    /**
		     * The width of the border surrounding each slice.
		     *
		     * When setting the border width to 0, there may be small gaps between
		     * the slices due to SVG antialiasing artefacts. To work around this,
		     * keep the border width at 0.5 or 1, but set the `borderColor` to
		     * `null` instead.
		     *
		     * In styled mode, the border stroke width is given in the
		     * `.highcharts-point` class.
		     *
		     * @sample {highcharts} highcharts/plotoptions/pie-borderwidth/
		     *         3px border
		     *
		     * @product highcharts
		     */
		    borderWidth: 1,

		    states: {

		        /**
		         * @extends   plotOptions.series.states.hover
		         * @excluding marker, lineWidth, lineWidthPlus
		         * @product   highcharts
		         */
		        hover: {

		            /**
		             * How much to brighten the point on interaction. Requires the main
		             * color to be defined in hex or rgb(a) format.
		             *
		             * In styled mode, the hover brightness is by default replaced
		             * by a fill-opacity given in the `.highcharts-point-hover` class.
		             *
		             * @sample {highcharts} highcharts/plotoptions/pie-states-hover-brightness/
		             *         Brightened by 0.5
		             *
		             * @product highcharts
		             */
		            brightness: 0.1
		        }
		    }

		}, /** @lends seriesTypes.pie.prototype */ {

		    isCartesian: false,
		    requireSorting: false,
		    directTouch: true,
		    noSharedTooltip: true,
		    trackerGroups: ['group', 'dataLabelsGroup'],
		    axisTypes: [],
		    pointAttribs: seriesTypes.column.prototype.pointAttribs,

		    /**
		     * Animate the pies in
		     *
		     * @private
		     * @function Highcharts.seriesTypes.pie#animate
		     *
		     * @param {boolean} [init=false]
		     */
		    animate: function (init) {
		        var series = this,
		            points = series.points,
		            startAngleRad = series.startAngleRad;

		        if (!init) {
		            points.forEach(function (point) {
		                var graphic = point.graphic,
		                    args = point.shapeArgs;

		                if (graphic) {
		                    // start values
		                    graphic.attr({
		                        // animate from inner radius (#779)
		                        r: point.startR || (series.center[3] / 2),
		                        start: startAngleRad,
		                        end: startAngleRad
		                    });

		                    // animate
		                    graphic.animate({
		                        r: args.r,
		                        start: args.start,
		                        end: args.end
		                    }, series.options.animation);
		                }
		            });

		            // delete this function to allow it only once
		            series.animate = null;
		        }
		    },

		    /**
		     * Recompute total chart sum and update percentages of points.
		     *
		     * @private
		     * @function Highcharts.seriesTypes.pie#updateTotals
		     */
		    updateTotals: function () {
		        var i,
		            total = 0,
		            points = this.points,
		            len = points.length,
		            point,
		            ignoreHiddenPoint = this.options.ignoreHiddenPoint;

		        // Get the total sum
		        for (i = 0; i < len; i++) {
		            point = points[i];
		            total += (ignoreHiddenPoint && !point.visible) ?
		                0 :
		                point.isNull ? 0 : point.y;
		        }
		        this.total = total;

		        // Set each point's properties
		        for (i = 0; i < len; i++) {
		            point = points[i];
		            point.percentage =
		                (total > 0 && (point.visible || !ignoreHiddenPoint)) ?
		                    point.y / total * 100 :
		                    0;
		            point.total = total;
		        }
		    },

		    /**
		     * Extend the generatePoints method by adding total and percentage
		     * properties to each point
		     *
		     * @private
		     * @function Highcharts.seriesTypes.pie#generatePoints
		     */
		    generatePoints: function () {
		        Series.prototype.generatePoints.call(this);
		        this.updateTotals();
		    },

		    // Utility for getting the x value from a given y, used for anticollision
		    // logic in data labels. Added point for using specific points' label
		    // distance.
		    getX: function (y, left, point) {
		        var center = this.center,
		            // Variable pie has individual radius
		            radius = this.radii ? this.radii[point.index] : center[2] / 2,
		            angle,
		            x;

		        angle = Math.asin(
		            Math.max(
		                Math.min(
		                    (
		                        (y - center[1]) /
		                        (radius + point.labelDistance)
		                    ),
		                    1
		                ),
		                -1
		            )
		        );
		        x = center[0] +
		            (left ? -1 : 1) *
		            (Math.cos(angle) * (radius + point.labelDistance)) +
		            (
		                point.labelDistance > 0 ?
		                    (left ? -1 : 1) * this.options.dataLabels.padding :
		                0
		            );

		        return x;
		    },

		    /**
		     * Do translation for pie slices
		     *
		     * @private
		     * @function Highcharts.seriesTypes.pie#translate
		     *
		     * @param {Array<number>} positions
		     */
		    translate: function (positions) {
		        this.generatePoints();

		        var series = this,
		            cumulative = 0,
		            precision = 1000, // issue #172
		            options = series.options,
		            slicedOffset = options.slicedOffset,
		            connectorOffset = slicedOffset + (options.borderWidth || 0),
		            finalConnectorOffset,
		            start,
		            end,
		            angle,
		            radians = getStartAndEndRadians(
		                options.startAngle,
		                options.endAngle
		            ),
		            startAngleRad = series.startAngleRad = radians.start,
		            endAngleRad = series.endAngleRad = radians.end,
		            circ = endAngleRad - startAngleRad, // 2 * Math.PI,
		            points = series.points,
		            radiusX, // the x component of the radius vector for a given point
		            radiusY,
		            labelDistance = options.dataLabels.distance,
		            ignoreHiddenPoint = options.ignoreHiddenPoint,
		            i,
		            len = points.length,
		            point;

		        // Get positions - either an integer or a percentage string must be
		        // given. If positions are passed as a parameter, we're in a recursive
		        // loop for adjusting space for data labels.
		        if (!positions) {
		            series.center = positions = series.getCenter();
		        }

		        // Calculate the geometry for each point
		        for (i = 0; i < len; i++) {

		            point = points[i];

		            // Used for distance calculation for specific point.
		            point.labelDistance = pick(
		                point.options.dataLabels && point.options.dataLabels.distance,
		                labelDistance
		            );

		            // Saved for later dataLabels distance calculation.
		            series.maxLabelDistance = Math.max(
		                series.maxLabelDistance || 0,
		                point.labelDistance
		            );

		            // set start and end angle
		            start = startAngleRad + (cumulative * circ);
		            if (!ignoreHiddenPoint || point.visible) {
		                cumulative += point.percentage / 100;
		            }
		            end = startAngleRad + (cumulative * circ);

		            // set the shape
		            point.shapeType = 'arc';
		            point.shapeArgs = {
		                x: positions[0],
		                y: positions[1],
		                r: positions[2] / 2,
		                innerR: positions[3] / 2,
		                start: Math.round(start * precision) / precision,
		                end: Math.round(end * precision) / precision
		            };

		            // The angle must stay within -90 and 270 (#2645)
		            angle = (end + start) / 2;
		            if (angle > 1.5 * Math.PI) {
		                angle -= 2 * Math.PI;
		            } else if (angle < -Math.PI / 2) {
		                angle += 2 * Math.PI;
		            }

		            // Center for the sliced out slice
		            point.slicedTranslation = {
		                translateX: Math.round(Math.cos(angle) * slicedOffset),
		                translateY: Math.round(Math.sin(angle) * slicedOffset)
		            };

		            // set the anchor point for tooltips
		            radiusX = Math.cos(angle) * positions[2] / 2;
		            radiusY = Math.sin(angle) * positions[2] / 2;
		            point.tooltipPos = [
		                positions[0] + radiusX * 0.7,
		                positions[1] + radiusY * 0.7
		            ];

		            point.half = angle < -Math.PI / 2 || angle > Math.PI / 2 ? 1 : 0;
		            point.angle = angle;

		            // Set the anchor point for data labels. Use point.labelDistance
		            // instead of labelDistance // #1174
		            // finalConnectorOffset - not override connectorOffset value.

		            finalConnectorOffset = Math.min(
		                connectorOffset,
		                point.labelDistance / 5
		            ); // #1678

		            point.labelPosition = {
		                natural: {
		                    // initial position of the data label - it's utilized for
		                    // finding the final position for the label
		                    x: positions[0] + radiusX + Math.cos(angle) *
		                      point.labelDistance,
		                    y: positions[1] + radiusY + Math.sin(angle) *
		                      point.labelDistance
		                },
		                'final': {
		                    // used for generating connector path -
		                    // initialized later in drawDataLabels function
		                    // x: undefined,
		                    // y: undefined
		                },
		                // left - pie on the left side of the data label
		                // right - pie on the right side of the data label
		                // center - data label overlaps the pie
		                alignment: point.labelDistance < 0 ?
		                    'center' : point.half ? 'right' : 'left',
		                connectorPosition: {
		                    breakAt: { // used in connectorShapes.fixedOffset
		                        x: positions[0] + radiusX + Math.cos(angle) *
		                            finalConnectorOffset,
		                        y: positions[1] + radiusY + Math.sin(angle) *
		                            finalConnectorOffset
		                    },
		                    touchingSliceAt: { // middle of the arc
		                        x: positions[0] + radiusX,
		                        y: positions[1] + radiusY
		                    }
		                }
		            };
		        }
		    },

		    /**
		     * @private
		     * @deprecated
		     * @name Highcharts.seriesTypes.pie#drawGraph
		     * @type {null}
		     */
		    drawGraph: null,

		    /**
		     * Draw the data points
		     *
		     * @private
		     * @function Highcharts.seriesTypes.pie#drawPoints
		     */
		    drawPoints: function () {
		        var series = this,
		            chart = series.chart,
		            renderer = chart.renderer,
		            groupTranslation,
		            graphic,
		            pointAttr,
		            shapeArgs,
		            shadow = series.options.shadow;

		        if (shadow && !series.shadowGroup && !chart.styledMode) {
		            series.shadowGroup = renderer.g('shadow')
		                .add(series.group);
		        }

		        // draw the slices
		        series.points.forEach(function (point) {
		            graphic = point.graphic;
		            if (!point.isNull) {
		                shapeArgs = point.shapeArgs;


		                // If the point is sliced, use special translation, else use
		                // plot area traslation
		                groupTranslation = point.getTranslate();

		                if (!chart.styledMode) {
		                    // Put the shadow behind all points
		                    var shadowGroup = point.shadowGroup;
		                    if (shadow && !shadowGroup) {
		                        shadowGroup = point.shadowGroup = renderer.g('shadow')
		                            .add(series.shadowGroup);
		                    }

		                    if (shadowGroup) {
		                        shadowGroup.attr(groupTranslation);
		                    }
		                    pointAttr = series.pointAttribs(
		                        point,
		                        point.selected && 'select'
		                    );
		                }

		                // Draw the slice
		                if (graphic) {
		                    graphic
		                        .setRadialReference(series.center);

		                    if (!chart.styledMode) {
		                        graphic.attr(pointAttr);
		                    }
		                    graphic.animate(extend(shapeArgs, groupTranslation));
		                } else {

		                    point.graphic = graphic = renderer[point.shapeType](
		                            shapeArgs
		                        )
		                        .setRadialReference(series.center)
		                        .attr(groupTranslation)
		                        .add(series.group);

		                    if (!chart.styledMode) {
		                        graphic
		                            .attr(pointAttr)
		                            .attr({ 'stroke-linejoin': 'round' })
		                            .shadow(shadow, shadowGroup);
		                    }
		                }

		                graphic.attr({
		                    visibility: point.visible ? 'inherit' : 'hidden'
		                });

		                graphic.addClass(point.getClassName());

		            } else if (graphic) {
		                point.graphic = graphic.destroy();
		            }
		        });

		    },

		    /**
		     * @private
		     * @deprecated
		     * @function Highcharts.seriesTypes.pie#searchPoint
		     */
		    searchPoint: noop,

		    /**
		     * Utility for sorting data labels
		     *
		     * @private
		     * @function Highcharts.seriesTypes.pie#sortByAngle
		     *
		     * @param {Array<Highcharts.Point>} points
		     *
		     * @param {number} sign
		     */
		    sortByAngle: function (points, sign) {
		        points.sort(function (a, b) {
		            return a.angle !== undefined && (b.angle - a.angle) * sign;
		        });
		    },

		    /**
		     * Use a simple symbol from LegendSymbolMixin.
		     *
		     * @private
		     * @borrows Highcharts.LegendSymbolMixin.drawRectangle as Highcharts.seriesTypes.pie#drawLegendSymbol
		     */
		    drawLegendSymbol: LegendSymbolMixin.drawRectangle,

		    /**
		     * Use the getCenter method from drawLegendSymbol.
		     *
		     * @private
		     * @borrows Highcharts.CenteredSeriesMixin.getCenter as Highcharts.seriesTypes.pie#getCenter
		     */
		    getCenter: CenteredSeriesMixin.getCenter,

		    /**
		     * Pies don't have point marker symbols.
		     *
		     * @deprecated
		     * @private
		     * @function Highcharts.seriesTypes.pie#getSymbol
		     */
		    getSymbol: noop


		}, /** @lends seriesTypes.pie.prototype.pointClass.prototype */ {

		    /**
		     * Initiate the pie slice
		     *
		     * @private
		     * @function Highcharts.seriesTypes.pie#pointClass#init
		     *
		     * @return {Highcharts.Point}
		     */
		    init: function () {

		        Point.prototype.init.apply(this, arguments);

		        var point = this,
		            toggleSlice;

		        point.name = pick(point.name, 'Slice');

		        // add event listener for select
		        toggleSlice = function (e) {
		            point.slice(e.type === 'select');
		        };
		        addEvent(point, 'select', toggleSlice);
		        addEvent(point, 'unselect', toggleSlice);

		        return point;
		    },

		    /**
		     * Negative points are not valid (#1530, #3623, #5322)
		     *
		     * @private
		     * @function Highcharts.seriesTypes.pie#pointClass#isValid
		     *
		     * @return {boolean}
		     */
		    isValid: function () {
		        return H.isNumber(this.y, true) && this.y >= 0;
		    },

		    /**
		     * Toggle the visibility of the pie slice
		     *
		     * @private
		     * @function Highcharts.seriesTypes.pie#pointClass#setVisible
		     *
		     * @param {boolean} vis
		     *        Whether to show the slice or not. If undefined, the visibility is
		     *        toggled.
		     *
		     * @param {boolean} [redraw=false]
		     */
		    setVisible: function (vis, redraw) {
		        var point = this,
		            series = point.series,
		            chart = series.chart,
		            ignoreHiddenPoint = series.options.ignoreHiddenPoint;

		        redraw = pick(redraw, ignoreHiddenPoint);

		        if (vis !== point.visible) {

		            // If called without an argument, toggle visibility
		            point.visible = point.options.visible = vis =
		                vis === undefined ? !point.visible : vis;
		            // update userOptions.data
		            series.options.data[series.data.indexOf(point)] = point.options;

		            // Show and hide associated elements. This is performed regardless
		            // of redraw or not, because chart.redraw only handles full series.
		            ['graphic', 'dataLabel', 'connector', 'shadowGroup'].forEach(
		                function (key) {
		                    if (point[key]) {
		                        point[key][vis ? 'show' : 'hide'](true);
		                    }
		                }
		            );

		            if (point.legendItem) {
		                chart.legend.colorizeItem(point, vis);
		            }

		            // #4170, hide halo after hiding point
		            if (!vis && point.state === 'hover') {
		                point.setState('');
		            }

		            // Handle ignore hidden slices
		            if (ignoreHiddenPoint) {
		                series.isDirty = true;
		            }

		            if (redraw) {
		                chart.redraw();
		            }
		        }
		    },

		    /**
		     * Set or toggle whether the slice is cut out from the pie
		     *
		     * @private
		     * @function Highcharts.seriesTypes.pie#pointClass#slice
		     *
		     * @param {boolean} sliced
		     *        When undefined, the slice state is toggled.
		     *
		     * @param {boolean} redraw
		     *        Whether to redraw the chart. True by default.
		     */
		    slice: function (sliced, redraw, animation) {
		        var point = this,
		            series = point.series,
		            chart = series.chart;

		        setAnimation(animation, chart);

		        // redraw is true by default
		        redraw = pick(redraw, true);

		        // if called without an argument, toggle
		        point.sliced = point.options.sliced = sliced =
		            defined(sliced) ? sliced : !point.sliced;
		        // update userOptions.data
		        series.options.data[series.data.indexOf(point)] = point.options;

		        point.graphic.animate(this.getTranslate());

		        if (point.shadowGroup) {
		            point.shadowGroup.animate(this.getTranslate());
		        }
		    },

		    /**
		     * @private
		     * @function Highcharts.seriesTypes.pie#pointClass#getTranslate
		     *
		     * @return {*}
		     */
		    getTranslate: function () {
		        return this.sliced ? this.slicedTranslation : {
		            translateX: 0,
		            translateY: 0
		        };
		    },

		    /**
		     * @private
		     * @function Highcharts.seriesTypes.pie#pointClass#haloPath
		     *
		     * @param {number} size
		     *
		     * @return {Highcharts.SVGPathArray}
		     */
		    haloPath: function (size) {
		        var shapeArgs = this.shapeArgs;

		        return this.sliced || !this.visible ?
		            [] :
		            this.series.chart.renderer.symbols.arc(
		                shapeArgs.x,
		                shapeArgs.y,
		                shapeArgs.r + size,
		                shapeArgs.r + size, {
		                    // Substract 1px to ensure the background is not bleeding
		                    // through between the halo and the slice (#7495).
		                    innerR: this.shapeArgs.r - 1,
		                    start: shapeArgs.start,
		                    end: shapeArgs.end
		                }
		            );
		    },

		    connectorShapes: {
		        // only one available before v7.0.0
		        fixedOffset: function (labelPosition, connectorPosition, options) {
		            var breakAt = connectorPosition.breakAt,
		                touchingSliceAt = connectorPosition.touchingSliceAt,
		                linePath = options.softConnector ? [
		                    'C', // soft break
		                     // 1st control point (of the curve)
		                    labelPosition.x +
		                        // 5 gives the connector a little horizontal bend
		                        (labelPosition.alignment === 'left' ? -5 : 5),
		                    labelPosition.y, //
		                    2 * breakAt.x - touchingSliceAt.x, // 2nd control point
		                    2 * breakAt.y - touchingSliceAt.y, //
		                    breakAt.x, // end of the curve
		                    breakAt.y //
		                ] : [
		                    'L', // pointy break
		                    breakAt.x,
		                    breakAt.y
		                ];

		            // assemble the path
		            return [
		                'M',
		                labelPosition.x,
		                labelPosition.y
		            ].concat(linePath).concat([
		                'L',
		                touchingSliceAt.x,
		                touchingSliceAt.y
		            ]);
		        },

		        straight: function (labelPosition, connectorPosition) {
		            var touchingSliceAt = connectorPosition.touchingSliceAt;

		            // direct line to the slice
		            return [
		                'M',
		                labelPosition.x,
		                labelPosition.y,
		                'L',
		                touchingSliceAt.x,
		                touchingSliceAt.y
		            ];
		        },

		        crookedLine: function (labelPosition, connectorPosition,
		            options) {

		            var touchingSliceAt = connectorPosition.touchingSliceAt,
		                series = this.series,
		                pieCenterX = series.center[0],
		                plotWidth = series.chart.plotWidth,
		                plotLeft = series.chart.plotLeft,
		                alignment = labelPosition.alignment,
		                radius = this.shapeArgs.r,
		                crookDistance =
		                    H.relativeLength(options.crookDistance, 1), // % to fraction
		                crookX = alignment === 'left' ?
		                    pieCenterX + radius + (plotWidth + plotLeft - pieCenterX -
		                        radius) * (1 - crookDistance) :
		                    plotLeft + (pieCenterX - radius) * crookDistance,
		                segmentWithCrook = ['L',
		                    crookX,
		                    labelPosition.y];

		            // crookedLine formula doesn't make sense if the path overlaps
		            // the label - use straight line instead in that case
		            if (alignment === 'left' ?
		                (crookX > labelPosition.x || crookX < touchingSliceAt.x) :
		                (crookX < labelPosition.x || crookX > touchingSliceAt.x)) {
		                segmentWithCrook = []; // remove the crook
		            }

		            // assemble the path
		            return [
		                'M',
		                labelPosition.x,
		                labelPosition.y
		            ].concat(segmentWithCrook).concat(['L',
		                touchingSliceAt.x,
		                touchingSliceAt.y
		            ]);

		        }
		    },

		    /**
		     * Extendable method for getting the path of the connector between the data
		     * label and the pie slice.
		     */
		    getConnectorPath: function () {
		        var labelPosition = this.labelPosition,
		            options = this.series.options.dataLabels,
		            connectorShape = options.connectorShape,
		            predefinedShapes = this.connectorShapes;

		        // find out whether to use the predefined shape
		        if (predefinedShapes[connectorShape]) {
		            connectorShape = predefinedShapes[connectorShape];
		        }

		        return connectorShape.call(this, {
		            // pass simplified label position object for user's convenience
		            x: labelPosition.final.x,
		            y: labelPosition.final.y,
		            alignment: labelPosition.alignment
		        }, labelPosition.connectorPosition, options);
		    }
		});

		/**
		 * A `pie` series. If the [type](#series.pie.type) option is not specified,
		 * it is inherited from [chart.type](#chart.type).
		 *
		 * @extends   series,plotOptions.pie
		 * @excluding dataParser, dataURL, stack, xAxis, yAxis
		 * @product   highcharts
		 * @apioption series.pie
		 */

		/**
		 * An array of data points for the series. For the `pie` series type,
		 * points can be given in the following ways:
		 *
		 * 1.  An array of numerical values. In this case, the numerical values
		 * will be interpreted as `y` options. Example:
		 *
		 *  ```js
		 *  data: [0, 5, 3, 5]
		 *  ```
		 *
		 * 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.pie.turboThreshold),
		 * this option is not available.
		 *
		 *  ```js
		 *     data: [{
		 *     y: 1,
		 *     name: "Point2",
		 *     color: "#00FF00"
		 * }, {
		 *     y: 7,
		 *     name: "Point1",
		 *     color: "#FF00FF"
		 * }]</pre>
		 *
		 * @sample {highcharts} highcharts/chart/reflow-true/
		 *         Numerical values
		 * @sample {highcharts} highcharts/series/data-array-of-arrays/
		 *         Arrays of numeric x and y
		 * @sample {highcharts} highcharts/series/data-array-of-arrays-datetime/
		 *         Arrays of datetime x and y
		 * @sample {highcharts} highcharts/series/data-array-of-name-value/
		 *         Arrays of point.name and y
		 * @sample {highcharts} highcharts/series/data-array-of-objects/
		 *         Config objects
		 *
		 * @type      {Array<number|Array<string,number>|*>}
		 * @extends   series.line.data
		 * @excluding marker, x
		 * @product   highcharts
		 * @apioption series.pie.data
		 */

		/**
		 * The sequential index of the data point in the legend.
		 *
		 * @type      {number}
		 * @product   highcharts
		 * @apioption series.pie.data.legendIndex
		 */

		/**
		 * Fires when the legend item belonging to the pie point (slice) is
		 * clicked. The `this` keyword refers to the point itself. One parameter,
		 * `event`, is passed to the function, containing common event information. The
		 * default action is to toggle the visibility of the point. This can be
		 * prevented by calling `event.preventDefault()`.
		 *
		 * @sample {highcharts} highcharts/plotoptions/pie-point-events-legenditemclick/
		 *         Confirm toggle visibility
		 *
		 * @type      {Function}
		 * @since     1.2.0
		 * @product   highcharts
		 * @apioption plotOptions.pie.point.events.legendItemClick
		 */

		/**
		 * Whether to display a slice offset from the center.
		 *
		 * @sample {highcharts} highcharts/point/sliced/
		 *         One sliced point
		 *
		 * @type      {boolean}
		 * @product   highcharts
		 * @apioption series.pie.data.sliced
		 */

		/**
		 * @excluding legendItemClick
		 * @apioption series.pie.events
		 */

	}(Highcharts));
	(function (H, Axis) {
		/* *
		 * (c) 2010-2018 Torstein Honsi
		 *
		 * License: www.highcharts.com/license
		 */

		/**
		 * Options for plot bands on axes.
		 *
		 * @typedef {Highcharts.XAxisPlotBandsOptions|Highcharts.YAxisPlotBandsOptions|Highcharts.ZAxisPlotBandsOptions} Highcharts.AxisPlotBandsOptions
		 */

		/**
		 * Options for plot band labels on axes.
		 *
		 * @typedef {Highcharts.XAxisPlotBandsLabelOptions|Highcharts.YAxisPlotBandsLabelOptions|Highcharts.ZAxisPlotBandsLabelOptions} Highcharts.AxisPlotBandsLabelOptions
		 */

		/**
		 * Options for plot lines on axes.
		 *
		 * @typedef {Highcharts.XAxisPlotLinesOptions|Highcharts.YAxisPlotLinesOptions|Highcharts.ZAxisPlotLinesOptions} Highcharts.AxisPlotLinesOptions
		 */

		/**
		 * Options for plot line labels on axes.
		 *
		 * @typedef {Highcharts.XAxisPlotLinesLabelOptions|Highcharts.YAxisPlotLinesLabelOptions|Highcharts.ZAxisPlotLinesLabelOptions} Highcharts.AxisPlotLinesLabelOptions
		 */



		var arrayMax = H.arrayMax,
		    arrayMin = H.arrayMin,
		    defined = H.defined,
		    destroyObjectProperties = H.destroyObjectProperties,
		    erase = H.erase,
		    merge = H.merge,
		    pick = H.pick;

		/**
		 * The object wrapper for plot lines and plot bands
		 *
		 * @class
		 * @name Highcharts.PlotLineOrBand
		 *
		 * @param {Highcharts.Axis} axis
		 *
		 * @param {Highcharts.AxisPlotLinesOptions|Highcharts.AxisPlotBandsOptions} options
		 */
		H.PlotLineOrBand = function (axis, options) {
		    this.axis = axis;

		    if (options) {
		        this.options = options;
		        this.id = options.id;
		    }
		};

		H.PlotLineOrBand.prototype = {

		    /**
		     * Render the plot line or plot band. If it is already existing,
		     * move it.
		     *
		     * @private
		     * @function Highcharts.PlotLineOrBand#render
		     *
		     * @return {Highcharts.PlotLineOrBand|undefined}
		     */
		    render: function () {

		        H.fireEvent(this, 'render');

		        var plotLine = this,
		            axis = plotLine.axis,
		            horiz = axis.horiz,
		            options = plotLine.options,
		            optionsLabel = options.label,
		            label = plotLine.label,
		            to = options.to,
		            from = options.from,
		            value = options.value,
		            isBand = defined(from) && defined(to),
		            isLine = defined(value),
		            svgElem = plotLine.svgElem,
		            isNew = !svgElem,
		            path = [],
		            color = options.color,
		            zIndex = pick(options.zIndex, 0),
		            events = options.events,
		            attribs = {
		                'class': 'highcharts-plot-' + (isBand ? 'band ' : 'line ') +
		                    (options.className || '')
		            },
		            groupAttribs = {},
		            renderer = axis.chart.renderer,
		            groupName = isBand ? 'bands' : 'lines',
		            group;

		        // logarithmic conversion
		        if (axis.isLog) {
		            from = axis.log2lin(from);
		            to = axis.log2lin(to);
		            value = axis.log2lin(value);
		        }

		        // Set the presentational attributes
		        if (!axis.chart.styledMode) {
		            if (isLine) {
		                attribs.stroke = color;
		                attribs['stroke-width'] = options.width;
		                if (options.dashStyle) {
		                    attribs.dashstyle = options.dashStyle;
		                }

		            } else if (isBand) { // plot band
		                if (color) {
		                    attribs.fill = color;
		                }
		                if (options.borderWidth) {
		                    attribs.stroke = options.borderColor;
		                    attribs['stroke-width'] = options.borderWidth;
		                }
		            }
		        }

		        // Grouping and zIndex
		        groupAttribs.zIndex = zIndex;
		        groupName += '-' + zIndex;

		        group = axis.plotLinesAndBandsGroups[groupName];
		        if (!group) {
		            axis.plotLinesAndBandsGroups[groupName] = group =
		                renderer.g('plot-' + groupName)
		                    .attr(groupAttribs).add();
		        }

		        // Create the path
		        if (isNew) {
		            /**
		             * SVG element of the plot line or band.
		             *
		             * @name Highcharts.PlotLineOrBand#svgElement
		             * @type {Highcharts.SVGElement}
		             */
		            plotLine.svgElem = svgElem =
		                renderer
		                    .path()
		                    .attr(attribs).add(group);
		        }


		        // Set the path or return
		        if (isLine) {
		            path = axis.getPlotLinePath(value, svgElem.strokeWidth());
		        } else if (isBand) { // plot band
		            path = axis.getPlotBandPath(from, to, options);
		        } else {
		            return;
		        }


		        // common for lines and bands
		        if (isNew && path && path.length) {
		            svgElem.attr({ d: path });

		            // events
		            if (events) {
		                H.objectEach(events, function (event, eventType) {
		                    svgElem.on(eventType, function (e) {
		                        events[eventType].apply(plotLine, [e]);
		                    });
		                });
		            }
		        } else if (svgElem) {
		            if (path) {
		                svgElem.show();
		                svgElem.animate({ d: path });
		            } else {
		                svgElem.hide();
		                if (label) {
		                    plotLine.label = label = label.destroy();
		                }
		            }
		        }

		        // the plot band/line label
		        if (
		            optionsLabel &&
		            defined(optionsLabel.text) &&
		            path &&
		            path.length &&
		            axis.width > 0 &&
		            axis.height > 0 &&
		            !path.isFlat
		        ) {
		            // apply defaults
		            optionsLabel = merge({
		                align: horiz && isBand && 'center',
		                x: horiz ? !isBand && 4 : 10,
		                verticalAlign: !horiz && isBand && 'middle',
		                y: horiz ? isBand ? 16 : 10 : isBand ? 6 : -4,
		                rotation: horiz && !isBand && 90
		            }, optionsLabel);

		            this.renderLabel(optionsLabel, path, isBand, zIndex);

		        } else if (label) { // move out of sight
		            label.hide();
		        }

		        // chainable
		        return plotLine;
		    },

		    /**
		     * Render and align label for plot line or band.
		     *
		     * @private
		     * @function Highcharts.PlotLineOrBand#renderLabel
		     *
		     * @param {Highcharts.AxisPlotLinesLabelOptions|Highcharts.AxisPlotBandsLabelOptions} optionsLabel
		     *
		     * @param {Highcharts.SVGPathArray} path
		     *
		     * @param {boolean} [isBand]
		     *
		     * @param {number} [zIndex]
		     */
		    renderLabel: function (optionsLabel, path, isBand, zIndex) {
		        var plotLine = this,
		            label = plotLine.label,
		            renderer = plotLine.axis.chart.renderer,
		            attribs,
		            xBounds,
		            yBounds,
		            x,
		            y;

		        // add the SVG element
		        if (!label) {
		            attribs = {
		                align: optionsLabel.textAlign || optionsLabel.align,
		                rotation: optionsLabel.rotation,
		                'class': 'highcharts-plot-' + (isBand ? 'band' : 'line') +
		                    '-label ' + (optionsLabel.className || '')
		            };

		            attribs.zIndex = zIndex;

		            /**
		             * SVG element of the label.
		             *
		             * @name Highcharts.PlotLineOrBand#label
		             * @type {Highcharts.SVGElement}
		             */
		            plotLine.label = label = renderer.text(
		                    optionsLabel.text,
		                    0,
		                    0,
		                    optionsLabel.useHTML
		                )
		                .attr(attribs)
		                .add();

		            if (!this.axis.chart.styledMode) {
		                label.css(optionsLabel.style);
		            }
		        }

		        // get the bounding box and align the label
		        // #3000 changed to better handle choice between plotband or plotline
		        xBounds = path.xBounds ||
		            [path[1], path[4], (isBand ? path[6] : path[1])];
		        yBounds = path.yBounds ||
		            [path[2], path[5], (isBand ? path[7] : path[2])];

		        x = arrayMin(xBounds);
		        y = arrayMin(yBounds);

		        label.align(optionsLabel, false, {
		            x: x,
		            y: y,
		            width: arrayMax(xBounds) - x,
		            height: arrayMax(yBounds) - y
		        });
		        label.show();
		    },

		    /**
		     * Remove the plot line or band.
		     *
		     * @function Highcharts.PlotLineOrBand#destroy
		     */
		    destroy: function () {
		        // remove it from the lookup
		        erase(this.axis.plotLinesAndBands, this);

		        delete this.axis;
		        destroyObjectProperties(this);
		    }
		};

		// Object with members for extending the Axis prototype
		H.extend(Axis.prototype, /** @lends Highcharts.Axis.prototype */ {

		    /**
		     * An array of colored bands stretching across the plot area marking an
		     * interval on the axis.
		     *
		     * In styled mode, the plot bands are styled by the `.highcharts-plot-band`
		     * class in addition to the `className` option.
		     *
		     * @productdesc {highcharts}
		     * In a gauge, a plot band on the Y axis (value axis) will stretch along the
		     * perimeter of the gauge.
		     *
		     * @type      {Array<*>}
		     * @product   highcharts highstock gantt
		     * @apioption xAxis.plotBands
		     */

		    /**
		     * Border color for the plot band. Also requires `borderWidth` to be set.
		     *
		     * @type      {Highcharts.ColorString}
		     * @apioption xAxis.plotBands.borderColor
		     */

		    /**
		     * Border width for the plot band. Also requires `borderColor` to be set.
		     *
		     * @type      {number}
		     * @default   0
		     * @apioption xAxis.plotBands.borderWidth
		     */

		    /**
		     * A custom class name, in addition to the default `highcharts-plot-band`,
		     * to apply to each individual band.
		     *
		     * @type      {string}
		     * @since     5.0.0
		     * @apioption xAxis.plotBands.className
		     */

		    /**
		     * The color of the plot band.
		     *
		     * @sample {highcharts} highcharts/xaxis/plotbands-color/
		     *         Color band
		     * @sample {highstock} stock/xaxis/plotbands/
		     *         Plot band on Y axis
		     *
		     * @type      {Highcharts.ColorString}
		     * @apioption xAxis.plotBands.color
		     */

		    /**
		     * An object defining mouse events for the plot band. Supported properties
		     * are `click`, `mouseover`, `mouseout`, `mousemove`.
		     *
		     * @sample {highcharts} highcharts/xaxis/plotbands-events/
		     *         Mouse events demonstrated
		     *
		     * @since     1.2
		     * @context   PlotLineOrBand
		     * @apioption xAxis.plotBands.events
		     */

		    /**
		     * The start position of the plot band in axis units.
		     *
		     * @sample {highcharts} highcharts/xaxis/plotbands-color/
		     *         Datetime axis
		     * @sample {highcharts} highcharts/xaxis/plotbands-from/
		     *         Categorized axis
		     * @sample {highstock} stock/xaxis/plotbands/
		     *         Plot band on Y axis
		     *
		     * @type      {number}
		     * @apioption xAxis.plotBands.from
		     */

		    /**
		     * An id used for identifying the plot band in Axis.removePlotBand.
		     *
		     * @sample {highcharts} highcharts/xaxis/plotbands-id/
		     *         Remove plot band by id
		     * @sample {highstock} highcharts/xaxis/plotbands-id/
		     *         Remove plot band by id
		     *
		     * @type      {string}
		     * @apioption xAxis.plotBands.id
		     */

		    /**
		     * The end position of the plot band in axis units.
		     *
		     * @sample {highcharts} highcharts/xaxis/plotbands-color/
		     *         Datetime axis
		     * @sample {highcharts} highcharts/xaxis/plotbands-from/
		     *         Categorized axis
		     * @sample {highstock} stock/xaxis/plotbands/
		     *         Plot band on Y axis
		     *
		     * @type      {number}
		     * @apioption xAxis.plotBands.to
		     */

		    /**
		     * The z index of the plot band within the chart, relative to other
		     * elements. Using the same z index as another element may give
		     * unpredictable results, as the last rendered element will be on top.
		     * Values from 0 to 20 make sense.
		     *
		     * @sample {highcharts} highcharts/xaxis/plotbands-color/
		     *         Behind plot lines by default
		     * @sample {highcharts} highcharts/xaxis/plotbands-zindex/
		     *         Above plot lines
		     * @sample {highcharts} highcharts/xaxis/plotbands-zindex-above-series/
		     *         Above plot lines and series
		     *
		     * @type      {number}
		     * @since     1.2
		     * @apioption xAxis.plotBands.zIndex
		     */

		    /**
		     * Text labels for the plot bands
		     *
		     * @product   highcharts highstock gantt
		     * @apioption xAxis.plotBands.label
		     */

		    /**
		     * Horizontal alignment of the label. Can be one of "left", "center" or
		     * "right".
		     *
		     * @sample {highcharts} highcharts/xaxis/plotbands-label-align/
		     *         Aligned to the right
		     * @sample {highstock} stock/xaxis/plotbands-label/
		     *         Plot band with labels
		     *
		     * @type      {string}
		     * @default   center
		     * @since     2.1
		     * @apioption xAxis.plotBands.label.align
		     */

		    /**
		     * Rotation of the text label in degrees .
		     *
		     * @sample {highcharts} highcharts/xaxis/plotbands-label-rotation/
		     *         Vertical text
		     *
		     * @type      {number}
		     * @default   0
		     * @since     2.1
		     * @apioption xAxis.plotBands.label.rotation
		     */

		    /**
		     * CSS styles for the text label.
		     *
		     * In styled mode, the labels are styled by the
		     * `.highcharts-plot-band-label` class.
		     *
		     * @sample {highcharts} highcharts/xaxis/plotbands-label-style/
		     *         Blue and bold label
		     *
		     * @type      {Highcharts.CSSObject}
		     * @since     2.1
		     * @apioption xAxis.plotBands.label.style
		     */

		    /**
		     * The string text itself. A subset of HTML is supported.
		     *
		     * @type      {string}
		     * @since     2.1
		     * @apioption xAxis.plotBands.label.text
		     */

		    /**
		     * The text alignment for the label. While `align` determines where the
		     * texts anchor point is placed within the plot band, `textAlign` determines
		     * how the text is aligned against its anchor point. Possible values are
		     * "left", "center" and "right". Defaults to the same as the `align` option.
		     *
		     * @sample {highcharts} highcharts/xaxis/plotbands-label-rotation/
		     *         Vertical text in center position but text-aligned left
		     *
		     * @type       {string}
		     * @since      2.1
		     * @validvalue ["center", "left", "right"]
		     * @apioption  xAxis.plotBands.label.textAlign
		     */

		    /**
		     * Whether to [use HTML](https://www.highcharts.com/docs/chart-concepts/labels-and-string-formatting#html)
		     * to render the labels.
		     *
		     * @type      {boolean}
		     * @default   false
		     * @since     3.0.3
		     * @apioption xAxis.plotBands.label.useHTML
		     */

		    /**
		     * Vertical alignment of the label relative to the plot band. Can be one of
		     * "top", "middle" or "bottom".
		     *
		     * @sample {highcharts} highcharts/xaxis/plotbands-label-verticalalign/
		     *         Vertically centered label
		     * @sample {highstock} stock/xaxis/plotbands-label/
		     *         Plot band with labels
		     *
		     * @type       {string}
		     * @default    top
		     * @since      2.1
		     * @validvalue ["bottom", "middle",  "top"]
		     * @apioption  xAxis.plotBands.label.verticalAlign
		     */

		    /**
		     * Horizontal position relative the alignment. Default varies by
		     * orientation.
		     *
		     * @sample {highcharts} highcharts/xaxis/plotbands-label-align/
		     *         Aligned 10px from the right edge
		     * @sample {highstock} stock/xaxis/plotbands-label/
		     *         Plot band with labels
		     *
		     * @type      {number}
		     * @since     2.1
		     * @apioption xAxis.plotBands.label.x
		     */

		    /**
		     * Vertical position of the text baseline relative to the alignment. Default
		     * varies by orientation.
		     *
		     * @sample {highcharts} highcharts/xaxis/plotbands-label-y/
		     *         Label on x axis
		     * @sample {highstock} stock/xaxis/plotbands-label/
		     *         Plot band with labels
		     *
		     * @type      {number}
		     * @since     2.1
		     * @apioption xAxis.plotBands.label.y
		     */

		    /**
		     * An array of lines stretching across the plot area, marking a specific
		     * value on one of the axes.
		     *
		     * In styled mode, the plot lines are styled by the
		     * `.highcharts-plot-line` class in addition to the `className` option.
		     *
		     * @type      {Array<*>}
		     * @product   highcharts highstock gantt
		     * @apioption xAxis.plotLines
		     */

		    /**
		     * A custom class name, in addition to the default `highcharts-plot-line`,
		     * to apply to each individual line.
		     *
		     * @type      {string}
		     * @since     5.0.0
		     * @apioption xAxis.plotLines.className
		     */

		    /**
		     * The color of the line.
		     *
		     * @sample {highcharts} highcharts/xaxis/plotlines-color/
		     *         A red line from X axis
		     * @sample {highstock} stock/xaxis/plotlines/
		     *         Plot line on Y axis
		     *
		     * @type      {Highcharts.ColorString}
		     * @apioption xAxis.plotLines.color
		     */

		    /**
		     * The dashing or dot style for the plot line. For possible values see
		     * [this overview](https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/series-dashstyle-all/).
		     *
		     * @sample {highcharts} highcharts/xaxis/plotlines-dashstyle/
		     *         Dash and dot pattern
		     * @sample {highstock} stock/xaxis/plotlines/
		     *         Plot line on Y axis
		     *
		     * @type       {string}
		     * @default    Solid
		     * @since      1.2
		     * @validvalue ["Solid", "ShortDash", "ShortDot", "ShortDashDot",
		     *             "ShortDashDotDot", "Dot", "Dash" ,"LongDash", "DashDot",
		     *             "LongDashDot", "LongDashDotDot"]
		     * @apioption  xAxis.plotLines.dashStyle
		     */

		    /**
		     * An object defining mouse events for the plot line. Supported
		     * properties are `click`, `mouseover`, `mouseout`, `mousemove`.
		     *
		     * @sample {highcharts} highcharts/xaxis/plotlines-events/
		     *         Mouse events demonstrated
		     *
		     * @type      {*}
		     * @since     1.2
		     * @context   PlotLineOrBand
		     * @apioption xAxis.plotLines.events
		     */

		    /**
		     * An id used for identifying the plot line in Axis.removePlotLine.
		     *
		     * @sample {highcharts} highcharts/xaxis/plotlines-id/
		     *         Remove plot line by id
		     *
		     * @type      {string}
		     * @apioption xAxis.plotLines.id
		     */

		    /**
		     * The position of the line in axis units.
		     *
		     * @sample {highcharts} highcharts/xaxis/plotlines-color/
		     *         Between two categories on X axis
		     * @sample {highstock} stock/xaxis/plotlines/
		     *         Plot line on Y axis
		     *
		     * @type      {number}
		     * @apioption xAxis.plotLines.value
		     */

		    /**
		     * The width or thickness of the plot line.
		     *
		     * @sample {highcharts} highcharts/xaxis/plotlines-color/
		     *         2px wide line from X axis
		     * @sample {highstock} stock/xaxis/plotlines/
		     *         Plot line on Y axis
		     *
		     * @type      {number}
		     * @apioption xAxis.plotLines.width
		     */

		    /**
		     * The z index of the plot line within the chart.
		     *
		     * @sample {highcharts} highcharts/xaxis/plotlines-zindex-behind/
		     *         Behind plot lines by default
		     * @sample {highcharts} highcharts/xaxis/plotlines-zindex-above/
		     *         Above plot lines
		     * @sample {highcharts} highcharts/xaxis/plotlines-zindex-above-all/
		     *         Above plot lines and series
		     *
		     * @type      {number}
		     * @since     1.2
		     * @apioption xAxis.plotLines.zIndex
		     */

		    /**
		     * Text labels for the plot bands
		     *
		     * @apioption xAxis.plotLines.label
		     */

		    /**
		     * Horizontal alignment of the label. Can be one of "left", "center" or
		     * "right".
		     *
		     * @sample {highcharts} highcharts/xaxis/plotlines-label-align-right/
		     *         Aligned to the right
		     * @sample {highstock} stock/xaxis/plotlines/
		     *         Plot line on Y axis
		     *
		     * @type       {string}
		     * @default    left
		     * @since      2.1
		     * @validvalue ["center", "left", "right"]
		     * @apioption  xAxis.plotLines.label.align
		     */

		    /**
		     * Rotation of the text label in degrees. Defaults to 0 for horizontal plot
		     * lines and 90 for vertical lines.
		     *
		     * @sample {highcharts} highcharts/xaxis/plotlines-label-verticalalign-middle/
		     *         Slanted text
		     *
		     * @type      {number}
		     * @since     2.1
		     * @apioption xAxis.plotLines.label.rotation
		     */

		    /**
		     * CSS styles for the text label.
		     *
		     * In styled mode, the labels are styled by the
		     * `.highcharts-plot-line-label` class.
		     *
		     * @sample {highcharts} highcharts/xaxis/plotlines-label-style/
		     *         Blue and bold label
		     *
		     * @type      {Highcharts.CSSObject}
		     * @since     2.1
		     * @apioption xAxis.plotLines.label.style
		     */

		    /**
		     * The text itself. A subset of HTML is supported.
		     *
		     * @type      {string}
		     * @since     2.1
		     * @apioption xAxis.plotLines.label.text
		     */

		    /**
		     * The text alignment for the label. While `align` determines where the
		     * texts anchor point is placed within the plot band, `textAlign` determines
		     * how the text is aligned against its anchor point. Possible values are
		     * "left", "center" and "right". Defaults to the same as the `align` option.
		     *
		     * @sample {highcharts} highcharts/xaxis/plotlines-label-textalign/
		     *         Text label in bottom position
		     *
		     * @type      {string}
		     * @since     2.1
		     * @apioption xAxis.plotLines.label.textAlign
		     */

		    /**
		     * Whether to [use HTML](https://www.highcharts.com/docs/chart-concepts/labels-and-string-formatting#html)
		     * to render the labels.
		     *
		     * @type      {boolean}
		     * @default   false
		     * @since     3.0.3
		     * @apioption xAxis.plotLines.label.useHTML
		     */

		    /**
		     * Vertical alignment of the label relative to the plot line. Can be
		     * one of "top", "middle" or "bottom".
		     *
		     * @sample {highcharts} highcharts/xaxis/plotlines-label-verticalalign-middle/
		     *         Vertically centered label
		     *
		     * @type       {string}
		     * @default    {highcharts} top
		     * @default    {highstock} top
		     * @since      2.1
		     * @validvalue ["top", "middle", "bottom"]
		     * @apioption  xAxis.plotLines.label.verticalAlign
		     */

		    /**
		     * Horizontal position relative the alignment. Default varies by
		     * orientation.
		     *
		     * @sample {highcharts} highcharts/xaxis/plotlines-label-align-right/
		     *         Aligned 10px from the right edge
		     * @sample {highstock} stock/xaxis/plotlines/
		     *         Plot line on Y axis
		     *
		     * @type      {number}
		     * @since     2.1
		     * @apioption xAxis.plotLines.label.x
		     */

		    /**
		     * Vertical position of the text baseline relative to the alignment. Default
		     * varies by orientation.
		     *
		     * @sample {highcharts} highcharts/xaxis/plotlines-label-y/
		     *         Label below the plot line
		     * @sample {highstock} stock/xaxis/plotlines/
		     *         Plot line on Y axis
		     *
		     * @type      {number}
		     * @since     2.1
		     * @apioption xAxis.plotLines.label.y
		     */

		    /**
		     * An array of objects defining plot bands on the Y axis.
		     *
		     * @type      {Array<*>}
		     * @extends   xAxis.plotBands
		     * @apioption yAxis.plotBands
		     */

		    /**
		     * In a gauge chart, this option determines the inner radius of the
		     * plot band that stretches along the perimeter. It can be given as
		     * a percentage string, like `"100%"`, or as a pixel number, like `100`.
		     * By default, the inner radius is controlled by the [thickness](
		     * #yAxis.plotBands.thickness) option.
		     *
		     * @sample {highcharts} highcharts/xaxis/plotbands-gauge
		     *         Gauge plot band
		     *
		     * @type      {number|string}
		     * @since     2.3
		     * @product   highcharts
		     * @apioption yAxis.plotBands.innerRadius
		     */

		    /**
		     * In a gauge chart, this option determines the outer radius of the
		     * plot band that stretches along the perimeter. It can be given as
		     * a percentage string, like `"100%"`, or as a pixel number, like `100`.
		     *
		     * @sample {highcharts} highcharts/xaxis/plotbands-gauge
		     *         Gauge plot band
		     *
		     * @type      {number|string}
		     * @default   100%
		     * @since     2.3
		     * @product   highcharts
		     * @apioption yAxis.plotBands.outerRadius
		     */

		    /**
		     * In a gauge chart, this option sets the width of the plot band
		     * stretching along the perimeter. It can be given as a percentage
		     * string, like `"10%"`, or as a pixel number, like `10`. The default
		     * value 10 is the same as the default [tickLength](#yAxis.tickLength),
		     * thus making the plot band act as a background for the tick markers.
		     *
		     * @sample {highcharts} highcharts/xaxis/plotbands-gauge
		     *         Gauge plot band
		     *
		     * @type      {number|string}
		     * @default   10
		     * @since     2.3
		     * @product   highcharts
		     * @apioption yAxis.plotBands.thickness
		     */

		    /**
		     * An array of objects representing plot lines on the X axis
		     *
		     * @type      {Array<*>}
		     * @extends   xAxis.plotLines
		     * @apioption yAxis.plotLines
		     */

		    /**
		     * Internal function to create the SVG path definition for a plot band.
		     *
		     * @function Highcharts.Axis#getPlotBandPath
		     *
		     * @param {number} from
		     *        The axis value to start from.
		     *
		     * @param {number} to
		     *        The axis value to end on.
		     *
		     * @return {Highcharts.SVGPathArray}
		     *         The SVG path definition in array form.
		     */
		    getPlotBandPath: function (from, to) {
		        var toPath = this.getPlotLinePath(to, null, null, true),
		            path = this.getPlotLinePath(from, null, null, true),
		            result = [],
		            i,
		            // #4964 check if chart is inverted or plotband is on yAxis
		            horiz = this.horiz,
		            plus = 1,
		            isFlat,
		            outside =
		                (from < this.min && to < this.min) ||
		                (from > this.max && to > this.max);

		        if (path && toPath) {

		            // Flat paths don't need labels (#3836)
		            if (outside) {
		                isFlat = path.toString() === toPath.toString();
		                plus = 0;
		            }

		            // Go over each subpath - for panes in Highstock
		            for (i = 0; i < path.length; i += 6) {

		                // Add 1 pixel when coordinates are the same
		                if (horiz && toPath[i + 1] === path[i + 1]) {
		                    toPath[i + 1] += plus;
		                    toPath[i + 4] += plus;
		                } else if (!horiz && toPath[i + 2] === path[i + 2]) {
		                    toPath[i + 2] += plus;
		                    toPath[i + 5] += plus;
		                }

		                result.push(
		                    'M',
		                    path[i + 1],
		                    path[i + 2],
		                    'L',
		                    path[i + 4],
		                    path[i + 5],
		                    toPath[i + 4],
		                    toPath[i + 5],
		                    toPath[i + 1],
		                    toPath[i + 2],
		                    'z'
		                );
		                result.isFlat = isFlat;
		            }

		        } else { // outside the axis area
		            path = null;
		        }

		        return result;
		    },

		    /**
		     * Add a plot band after render time.
		     *
		     * @sample highcharts/members/axis-addplotband/
		     *         Toggle the plot band from a button
		     *
		     * @function Highcharts.Axis#addPlotBand
		     *
		     * @param {Highcharts.AxisPlotBandsOptions} options
		     *        A configuration object for the plot band, as defined in
		     *        [xAxis.plotBands](https://api.highcharts.com/highcharts/xAxis.plotBands).
		     *
		     * @return {Highcharts.PlotLineOrBand|undefined}
		     *         The added plot band.
		     */
		    addPlotBand: function (options) {
		        return this.addPlotBandOrLine(options, 'plotBands');
		    },

		    /**
		     * Add a plot line after render time.
		     *
		     * @sample highcharts/members/axis-addplotline/
		     *         Toggle the plot line from a button
		     *
		     * @function Highcharts.Axis#addPlotLine
		     *
		     * @param {Highcharts.AxisPlotLinesOptions} options
		     *        A configuration object for the plot line, as defined in
		     *        [xAxis.plotLines](https://api.highcharts.com/highcharts/xAxis.plotLines).
		     *
		     * @return {Highcharts.PlotLineOrBand|undefined}
		     *         The added plot line.
		     */
		    addPlotLine: function (options) {
		        return this.addPlotBandOrLine(options, 'plotLines');
		    },

		    /**
		     * Add a plot band or plot line after render time. Called from addPlotBand
		     * and addPlotLine internally.
		     *
		     * @private
		     * @function Highcharts.Axis#addPlotBandOrLine
		     *
		     * @param {Highcharts.AxisPlotLinesOptions|Highcharts.AxisPlotBandsOptions} options
		     *        The plotBand or plotLine configuration object.
		     *
		     * @param {"plotBands"|"plotLines"} [coll]
		     *
		     * @return {Highcharts.PlotLineOrBand|undefined}
		     */
		    addPlotBandOrLine: function (options, coll) {
		        var obj = new H.PlotLineOrBand(this, options).render(),
		            userOptions = this.userOptions;

		        if (obj) { // #2189
		            // Add it to the user options for exporting and Axis.update
		            if (coll) {
		                userOptions[coll] = userOptions[coll] || [];
		                userOptions[coll].push(options);
		            }
		            this.plotLinesAndBands.push(obj);
		        }

		        return obj;
		    },

		    /**
		     * Remove a plot band or plot line from the chart by id. Called internally
		     * from `removePlotBand` and `removePlotLine`.
		     *
		     * @private
		     * @function Highcharts.Axis#removePlotBandOrLine
		     *
		     * @param {string} id
		     */
		    removePlotBandOrLine: function (id) {
		        var plotLinesAndBands = this.plotLinesAndBands,
		            options = this.options,
		            userOptions = this.userOptions,
		            i = plotLinesAndBands.length;
		        while (i--) {
		            if (plotLinesAndBands[i].id === id) {
		                plotLinesAndBands[i].destroy();
		            }
		        }
		        ([
		            options.plotLines || [],
		            userOptions.plotLines || [],
		            options.plotBands || [],
		            userOptions.plotBands || []
		        ]).forEach(function (arr) {
		            i = arr.length;
		            while (i--) {
		                if (arr[i].id === id) {
		                    erase(arr, arr[i]);
		                }
		            }
		        });
		    },

		    /**
		     * Remove a plot band by its id.
		     *
		     * @sample highcharts/members/axis-removeplotband/
		     *         Remove plot band by id
		     * @sample highcharts/members/axis-addplotband/
		     *         Toggle the plot band from a button
		     *
		     * @function Highcharts.Axis#removePlotBand
		     *
		     * @param {string} id
		     *        The plot band's `id` as given in the original configuration
		     *        object or in the `addPlotBand` option.
		     */
		    removePlotBand: function (id) {
		        this.removePlotBandOrLine(id);
		    },

		    /**
		     * Remove a plot line by its id.
		     *
		     * @sample highcharts/xaxis/plotlines-id/
		     *         Remove plot line by id
		     * @sample highcharts/members/axis-addplotline/
		     *         Toggle the plot line from a button
		     *
		     * @function Highcharts.Axis#removePlotLine
		     *
		     * @param {string} id
		     *        The plot line's `id` as given in the original configuration
		     *        object or in the `addPlotLine` option.
		     */
		    removePlotLine: function (id) {
		        this.removePlotBandOrLine(id);
		    }
		});

	}(Highcharts, Axis));
	(function (H) {
		/**
		 * (c) 2010-2018 Torstein Honsi
		 *
		 * License: www.highcharts.com/license
		 */

		/**
		 * Callback function to react on button clicks.
		 *
		 * @callback Highcharts.RangeSelectorClickCallbackFunction
		 *
		 * @param {global.Event} e
		 *        Event arguments.
		 *
		 * @param {boolean|undefined}
		 *        Return false to cancel the default button event.
		 */

		/**
		 * Callback function to parse values entered in the input boxes and return a
		 * valid JavaScript time as milliseconds since 1970.
		 *
		 * @callback Highcharts.RangeSelectorParseCallbackFunction
		 *
		 * @param {string} value
		 *        Input value to parse.
		 *
		 * @return {number}
		 *         Parsed JavaScript time value.
		 */



		var addEvent = H.addEvent,
		    Axis = H.Axis,
		    Chart = H.Chart,
		    css = H.css,
		    createElement = H.createElement,
		    defaultOptions = H.defaultOptions,
		    defined = H.defined,
		    destroyObjectProperties = H.destroyObjectProperties,
		    discardElement = H.discardElement,
		    extend = H.extend,
		    fireEvent = H.fireEvent,
		    isNumber = H.isNumber,
		    merge = H.merge,
		    pick = H.pick,
		    pInt = H.pInt,
		    splat = H.splat,
		    wrap = H.wrap;

		/* ****************************************************************************
		 * Start Range Selector code                                                  *
		 *****************************************************************************/
		extend(defaultOptions, {

		    /**
		     * The range selector is a tool for selecting ranges to display within
		     * the chart. It provides buttons to select preconfigured ranges in
		     * the chart, like 1 day, 1 week, 1 month etc. It also provides input
		     * boxes where min and max dates can be manually input.
		     *
		     * @product      highstock
		     * @optionparent rangeSelector
		     */
		    rangeSelector: {

		        /**
		         * 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
		         * @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<*>}
		         * @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
		         * @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      {Highcharts.RangeSelectorClickCallbackFunction}
		         * @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
		         * @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
		         * @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}
		         * @default   false
		         * @since     6.1.2
		         * @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
		         * @apioption rangeSelector.buttons.dataGrouping
		         */

		        /**
		         * The text for the button itself.
		         *
		         * @type      {string}
		         * @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}
		         * @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
		         * @apioption rangeSelector.buttonSpacing
		         */

		        /**
		         * Enable or disable the range selector.
		         *
		         * @sample {highstock} stock/rangeselector/enabled/
		         *         Disable the range selector
		         *
		         * @type      {boolean}
		         * @default   true
		         * @apioption rangeSelector.enabled
		         */

		        /**
		         * The vertical alignment of the rangeselector box. Allowed properties
		         * are `top`, `middle`, `bottom`.
		         *
		         * @sample {highstock} stock/rangeselector/vertical-align-middle/
		         *         Middle
		         * @sample {highstock} stock/rangeselector/vertical-align-bottom/
		         *         Bottom
		         *
		         * @since      6.0.0
		         * @validvalue ["top", "middle", "bottom"]
		         */
		        verticalAlign: 'top',

		        /**
		         * A collection of attributes for the buttons. The object takes SVG
		         * attributes like `fill`, `stroke`, `stroke-width`, as well as `style`,
		         * a collection of CSS properties for the text.
		         *
		         * The object can also be extended with states, so you can set
		         * presentational options for `hover`, `select` or `disabled` button
		         * states.
		         *
		         * CSS styles for the text label.
		         *
		         * In styled mode, the buttons are styled by the
		         * `.highcharts-range-selector-buttons .highcharts-button` rule with its
		         * different states.
		         *
		         * @sample {highstock} stock/rangeselector/styling/
		         *         Styling the buttons and inputs
		         *
		         * @type {Highcharts.CSSObject}
		         */
		        buttonTheme: {
		            /** @ignore */
		            width: 28,
		            /** @ignore */
		            height: 18,
		            /** @ignore */
		            padding: 2,
		            /** @ignore */
		            zIndex: 7 // #484, #852
		        },

		        /**
		         * When the rangeselector is floating, the plot area does not reserve
		         * space for it. This opens for positioning anywhere on the chart.
		         *
		         * @sample {highstock} stock/rangeselector/floating/
		         *         Placing the range selector between the plot area and the
		         *         navigator
		         *
		         * @since 6.0.0
		         */
		        floating: false,

		        /**
		         * The x offset of the range selector relative to its horizontal
		         * alignment within `chart.spacingLeft` and `chart.spacingRight`.
		         *
		         * @since 6.0.0
		         */
		        x: 0,

		        /**
		         * The y offset of the range selector relative to its horizontal
		         * alignment within `chart.spacingLeft` and `chart.spacingRight`.
		         *
		         * @since 6.0.0
		         */
		        y: 0,

		        /**
		         * Deprecated. The height of the range selector. Currently it is
		         * calculated dynamically.
		         *
		         * @deprecated
		         * @type  {number|undefined}
		         * @since 2.1.9
		         */
		        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
		         * @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
		         * @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}
		         * @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
		         * @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
		         * @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      {Highcharts.RangeSelectorParseCallbackFunction}
		         * @since     1.3.3
		         * @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
		         * @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
		         * @apioption rangeSelector.inputEnabled
		         */

		        /**
		         * Positioning for the input boxes. Allowed properties are `align`,
		         *  `x` and `y`.
		         *
		         * @since 1.2.4
		         */
		        inputPosition: {

		            /**
		             * The alignment of the input box. Allowed properties are `left`,
		             * `center`, `right`.
		             *
		             * @sample {highstock} stock/rangeselector/input-button-position/
		             *         Alignment
		             *
		             * @since      6.0.0
		             * @validvalue ["left", "center", "right"]
		             */
		            align: 'right',

		            /**
		             * X offset of the input row.
		             */
		            x: 0,

		            /**
		             * Y offset of the input row.
		             */
		            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
		         */
		        buttonPosition: {

		            /**
		             * The alignment of the input box. Allowed properties are `left`,
		             * `center`, `right`.
		             *
		             * @sample {highstock} stock/rangeselector/input-button-position/
		             *         Alignment
		             *
		             * @since      6.0.0
		             * @validvalue ["left", "center", "right"]
		             */
		            align: 'left',

		            /**
		             * X offset of the button row.
		             */
		            x: 0,

		            /**
		             * Y offset of the button row.
		             */
		            y: 0
		        },

		        /**
		         * 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}
		         * @apioption rangeSelector.inputStyle
		         */

		        /**
		         * CSS styles for the labels - the Zoom, From and To texts.
		         *
		         * In styled mode, the labels are styled by the
		         * `.highcharts-range-label` class.
		         *
		         * @sample {highstock} stock/rangeselector/styling/
		         *         Styling the buttons and inputs
		         *
		         * @type {Highcharts.CSSObject}
		         */
		        labelStyle: {
		            /** @ignore */
		            color: '#666666'
		        }
		    }
		});

		defaultOptions.lang = merge(

		    defaultOptions.lang,

		    /**
		     * Language object. The language object is global and it can't be set
		     * on each chart initiation. Instead, use `Highcharts.setOptions` to
		     * set it before any chart is initialized.
		     *
		     * <pre>Highcharts.setOptions({
		     *     lang: {
		     *         months: [
		     *             'Janvier', 'Février', 'Mars', 'Avril',
		     *             'Mai', 'Juin', 'Juillet', 'Août',
		     *             'Septembre', 'Octobre', 'Novembre', 'Décembre'
		     *         ],
		     *         weekdays: [
		     *             'Dimanche', 'Lundi', 'Mardi', 'Mercredi',
		     *             'Jeudi', 'Vendredi', 'Samedi'
		     *         ]
		     *     }
		     * });</pre>
		     *
		     * @optionparent lang
		     */
		    {

		        /**
		         * The text for the label for the range selector buttons.
		         *
		         * @product highstock
		         */
		        rangeSelectorZoom: 'Zoom',

		        /**
		         * The text for the label for the "from" input box in the range
		         * selector.
		         *
		         * @product highstock
		         */
		        rangeSelectorFrom: 'From',

		        /**
		         * The text for the label for the "to" input box in the range selector.
		         *
		         * @product highstock
		         */
		        rangeSelectorTo: 'To'
		    }
		);

		/**
		 * The range selector.
		 *
		 * @private
		 * @class
		 * @name Highcharts.RangeSelector
		 *
		 * @param {Highcharts.Chart} chart
		 */
		function RangeSelector(chart) {

		    // Run RangeSelector
		    this.init(chart);
		}

		RangeSelector.prototype = {
		    /**
		     * The method to run when one of the buttons in the range selectors is
		     * clicked
		     *
		     * @private
		     * @function Highcharts.RangeSelector#clickButton
		     *
		     * @param {number} i
		     *        The index of the button
		     *
		     * @param {boolean} redraw
		     */
		    clickButton: function (i, redraw) {
		        var rangeSelector = this,
		            chart = rangeSelector.chart,
		            rangeOptions = rangeSelector.buttonOptions[i],
		            baseAxis = chart.xAxis[0],
		            unionExtremes = (
		                    chart.scroller && chart.scroller.getUnionExtremes()
		                ) || baseAxis || {},
		            dataMin = unionExtremes.dataMin,
		            dataMax = unionExtremes.dataMax,
		            newMin,
		            newMax = baseAxis && Math.round(
		                Math.min(baseAxis.max, pick(dataMax, baseAxis.max))
		            ), // #1568
		            type = rangeOptions.type,
		            baseXAxisOptions,
		            range = rangeOptions._range,
		            rangeMin,
		            minSetting,
		            rangeSetting,
		            ctx,
		            ytdExtremes,
		            dataGrouping = rangeOptions.dataGrouping;

		        // chart has no data, base series is removed
		        if (dataMin === null || dataMax === null) {
		            return;
		        }

		        // Set the fixed range before range is altered
		        chart.fixedRange = range;

		        // Apply dataGrouping associated to button
		        if (dataGrouping) {
		            this.forcedDataGrouping = true;
		            Axis.prototype.setDataGrouping.call(
		                baseAxis || { chart: this.chart },
		                dataGrouping,
		                false
		            );

		            this.frozenStates = rangeOptions.preserveDataGrouping;
		        }

		        // Apply range
		        if (type === 'month' || type === 'year') {
		            if (!baseAxis) {
		                // This is set to the user options and picked up later when the
		                // axis is instantiated so that we know the min and max.
		                range = rangeOptions;
		            } else {
		                ctx = {
		                    range: rangeOptions,
		                    max: newMax,
		                    chart: chart,
		                    dataMin: dataMin,
		                    dataMax: dataMax
		                };
		                newMin = baseAxis.minFromRange.call(ctx);
		                if (isNumber(ctx.newMax)) {
		                    newMax = ctx.newMax;
		                }
		            }

		        // Fixed times like minutes, hours, days
		        } else if (range) {
		            newMin = Math.max(newMax - range, dataMin);
		            newMax = Math.min(newMin + range, dataMax);

		        } else if (type === 'ytd') {

		            // On user clicks on the buttons, or a delayed action running from
		            // the beforeRender event (below), the baseAxis is defined.
		            if (baseAxis) {
		                // When "ytd" is the pre-selected button for the initial view,
		                // its calculation is delayed and rerun in the beforeRender
		                // event (below). When the series are initialized, but before
		                // the chart is rendered, we have access to the xData array
		                // (#942).
		                if (dataMax === undefined) {
		                    dataMin = Number.MAX_VALUE;
		                    dataMax = Number.MIN_VALUE;
		                    chart.series.forEach(function (series) {
		                        // reassign it to the last item
		                        var xData = series.xData;
		                        dataMin = Math.min(xData[0], dataMin);
		                        dataMax = Math.max(xData[xData.length - 1], dataMax);
		                    });
		                    redraw = false;
		                }
		                ytdExtremes = rangeSelector.getYTDExtremes(
		                    dataMax,
		                    dataMin,
		                    chart.time.useUTC
		                );
		                newMin = rangeMin = ytdExtremes.min;
		                newMax = ytdExtremes.max;

		            // "ytd" is pre-selected. We don't yet have access to processed
		            // point and extremes data (things like pointStart and pointInterval
		            // are missing), so we delay the process (#942)
		            } else {
		                addEvent(chart, 'beforeRender', function () {
		                    rangeSelector.clickButton(i);
		                });
		                return;
		            }
		        } else if (type === 'all' && baseAxis) {
		            newMin = dataMin;
		            newMax = dataMax;
		        }

		        newMin += rangeOptions._offsetMin;
		        newMax += rangeOptions._offsetMax;

		        rangeSelector.setSelected(i);

		        // Update the chart
		        if (!baseAxis) {
		            // Axis not yet instanciated. Temporarily set min and range
		            // options and remove them on chart load (#4317).
		            baseXAxisOptions = splat(chart.options.xAxis)[0];
		            rangeSetting = baseXAxisOptions.range;
		            baseXAxisOptions.range = range;
		            minSetting = baseXAxisOptions.min;
		            baseXAxisOptions.min = rangeMin;
		            addEvent(chart, 'load', function resetMinAndRange() {
		                baseXAxisOptions.range = rangeSetting;
		                baseXAxisOptions.min = minSetting;
		            });
		        } else {
		            // Existing axis object. Set extremes after render time.
		            baseAxis.setExtremes(
		                newMin,
		                newMax,
		                pick(redraw, 1),
		                null, // auto animation
		                {
		                    trigger: 'rangeSelectorButton',
		                    rangeSelectorButton: rangeOptions
		                }
		            );
		        }
		    },

		    /**
		     * Set the selected option. This method only sets the internal flag, it
		     * doesn't update the buttons or the actual zoomed range.
		     *
		     * @private
		     * @function Highcharts.RangeSelector#setSelected
		     *
		     * @param {boolean} selected
		     */
		    setSelected: function (selected) {
		        this.selected = this.options.selected = selected;
		    },

		    /**
		     * The default buttons for pre-selecting time frames
		     */
		    defaultButtons: [{
		        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'
		    }],

		    /**
		     * Initialize the range selector
		     *
		     * @private
		     * @function Highcharts.RangeSelector#init
		     *
		     * @param {Highcharts.Chart} chart
		     */
		    init: function (chart) {
		        var rangeSelector = this,
		            options = chart.options.rangeSelector,
		            buttonOptions = options.buttons ||
		                [].concat(rangeSelector.defaultButtons),
		            selectedOption = options.selected,
		            blurInputs = function () {
		                var minInput = rangeSelector.minInput,
		                    maxInput = rangeSelector.maxInput;

		                // #3274 in some case blur is not defined
		                if (minInput && minInput.blur) {
		                    fireEvent(minInput, 'blur');
		                }
		                if (maxInput && maxInput.blur) {
		                    fireEvent(maxInput, 'blur');
		                }
		            };

		        rangeSelector.chart = chart;
		        rangeSelector.options = options;
		        rangeSelector.buttons = [];

		        chart.extraTopMargin = options.height;
		        rangeSelector.buttonOptions = buttonOptions;

		        this.unMouseDown = addEvent(chart.container, 'mousedown', blurInputs);
		        this.unResize = addEvent(chart, 'resize', blurInputs);

		        // Extend the buttonOptions with actual range
		        buttonOptions.forEach(rangeSelector.computeButtonRange);

		        // zoomed range based on a pre-selected button index
		        if (selectedOption !== undefined && buttonOptions[selectedOption]) {
		            this.clickButton(selectedOption, false);
		        }


		        addEvent(chart, 'load', function () {
		            // If a data grouping is applied to the current button, release it
		            // when extremes change
		            if (chart.xAxis && chart.xAxis[0]) {
		                addEvent(chart.xAxis[0], 'setExtremes', function (e) {
		                    if (
		                        this.max - this.min !== chart.fixedRange &&
		                        e.trigger !== 'rangeSelectorButton' &&
		                        e.trigger !== 'updatedData' &&
		                        rangeSelector.forcedDataGrouping &&
		                        !rangeSelector.frozenStates
		                    ) {
		                        this.setDataGrouping(false, false);
		                    }
		                });
		            }
		        });
		    },

		    /**
		     * Dynamically update the range selector buttons after a new range has been
		     * set
		     *
		     * @private
		     * @function Highcharts.RangeSelector#updateButtonStates
		     */
		    updateButtonStates: function () {
		        var rangeSelector = this,
		            chart = this.chart,
		            baseAxis = chart.xAxis[0],
		            actualRange = Math.round(baseAxis.max - baseAxis.min),
		            hasNoData = !baseAxis.hasVisibleSeries,
		            day = 24 * 36e5, // A single day in milliseconds
		            unionExtremes = (
		                chart.scroller &&
		                chart.scroller.getUnionExtremes()
		            ) || baseAxis,
		            dataMin = unionExtremes.dataMin,
		            dataMax = unionExtremes.dataMax,
		            ytdExtremes = rangeSelector.getYTDExtremes(
		                dataMax,
		                dataMin,
		                chart.time.useUTC
		            ),
		            ytdMin = ytdExtremes.min,
		            ytdMax = ytdExtremes.max,
		            selected = rangeSelector.selected,
		            selectedExists = isNumber(selected),
		            allButtonsEnabled = rangeSelector.options.allButtonsEnabled,
		            buttons = rangeSelector.buttons;

		        rangeSelector.buttonOptions.forEach(function (rangeOptions, i) {
		            var range = rangeOptions._range,
		                type = rangeOptions.type,
		                count = rangeOptions.count || 1,
		                button = buttons[i],
		                state = 0,
		                disable,
		                select,
		                offsetRange = rangeOptions._offsetMax - rangeOptions._offsetMin,
		                isSelected = i === selected,
		                // Disable buttons where the range exceeds what is allowed in
		                // the current view
		                isTooGreatRange = range > dataMax - dataMin,
		                // Disable buttons where the range is smaller than the minimum
		                // range
		                isTooSmallRange = range < baseAxis.minRange,
		                // Do not select the YTD button if not explicitly told so
		                isYTDButNotSelected = false,
		                // Disable the All button if we're already showing all
		                isAllButAlreadyShowingAll = false,
		                isSameRange = range === actualRange;
		            // Months and years have a variable range so we check the extremes
		            if (
		                (type === 'month' || type === 'year') &&
		                (
		                    actualRange + 36e5 >=
		                    { month: 28, year: 365 }[type] * day * count - offsetRange
		                ) &&
		                (
		                    actualRange - 36e5 <=
		                    { month: 31, year: 366 }[type] * day * count + offsetRange
		                )
		            ) {
		                isSameRange = true;
		            } else if (type === 'ytd') {
		                isSameRange = (ytdMax - ytdMin + offsetRange) === actualRange;
		                isYTDButNotSelected = !isSelected;
		            } else if (type === 'all') {
		                isSameRange = baseAxis.max - baseAxis.min >= dataMax - dataMin;
		                isAllButAlreadyShowingAll = (
		                    !isSelected &&
		                    selectedExists &&
		                    isSameRange
		                );
		            }

		            // The new zoom area happens to match the range for a button - mark
		            // it selected. This happens when scrolling across an ordinal gap.
		            // It can be seen in the intraday demos when selecting 1h and scroll
		            // across the night gap.
		            disable = (
		                !allButtonsEnabled &&
		                (
		                    isTooGreatRange ||
		                    isTooSmallRange ||
		                    isAllButAlreadyShowingAll ||
		                    hasNoData
		                )
		            );
		            select = (
		                (isSelected && isSameRange) ||
		                (isSameRange && !selectedExists && !isYTDButNotSelected) ||
		                (isSelected && rangeSelector.frozenStates)
		            );

		            if (disable) {
		                state = 3;
		            } else if (select) {
		                selectedExists = true; // Only one button can be selected
		                state = 2;
		            }

		            // If state has changed, update the button
		            if (button.state !== state) {
		                button.setState(state);
		            }
		        });
		    },

		    /**
		     * Compute and cache the range for an individual button
		     *
		     * @private
		     * @function Highcharts.RangeSelector#computeButtonRange
		     *
		     * @param {Highcharts.RangeSelectorOptions} rangeOptions
		     */
		    computeButtonRange: function (rangeOptions) {
		        var type = rangeOptions.type,
		            count = rangeOptions.count || 1,

		            // these time intervals have a fixed number of milliseconds, as
		            // opposed to month, ytd and year
		            fixedTimes = {
		                millisecond: 1,
		                second: 1000,
		                minute: 60 * 1000,
		                hour: 3600 * 1000,
		                day: 24 * 3600 * 1000,
		                week: 7 * 24 * 3600 * 1000
		            };

		        // Store the range on the button object
		        if (fixedTimes[type]) {
		            rangeOptions._range = fixedTimes[type] * count;
		        } else if (type === 'month' || type === 'year') {
		            rangeOptions._range =
		                { month: 30, year: 365 }[type] * 24 * 36e5 * count;
		        }

		        rangeOptions._offsetMin = pick(rangeOptions.offsetMin, 0);
		        rangeOptions._offsetMax = pick(rangeOptions.offsetMax, 0);
		        rangeOptions._range +=
		            rangeOptions._offsetMax - rangeOptions._offsetMin;
		    },

		    /**
		     * Set the internal and displayed value of a HTML input for the dates
		     *
		     * @private
		     * @function Highcharts.RangeSelector#setInputValue
		     *
		     * @param {string} name
		     *
		     * @param {number} inputTime
		     */
		    setInputValue: function (name, inputTime) {
		        var options = this.chart.options.rangeSelector,
		            time = this.chart.time,
		            input = this[name + 'Input'];

		        if (defined(inputTime)) {
		            input.previousValue = input.HCTime;
		            input.HCTime = inputTime;
		        }

		        input.value = time.dateFormat(
		            options.inputEditDateFormat || '%Y-%m-%d',
		            input.HCTime
		        );
		        this[name + 'DateBox'].attr({
		            text: time.dateFormat(
		                options.inputDateFormat || '%b %e, %Y',
		                input.HCTime
		            )
		        });
		    },

		    /**
		     * @private
		     * @function Highcharts.RangeSelector#showInput
		     *
		     * @param {string} name
		     */
		    showInput: function (name) {
		        var inputGroup = this.inputGroup,
		            dateBox = this[name + 'DateBox'];

		        css(this[name + 'Input'], {
		            left: (inputGroup.translateX + dateBox.x) + 'px',
		            top: inputGroup.translateY + 'px',
		            width: (dateBox.width - 2) + 'px',
		            height: (dateBox.height - 2) + 'px',
		            border: '2px solid silver'
		        });
		    },

		    /**
		     * @private
		     * @function Highcharts.RangeSelector#hideInput
		     *
		     * @param {string} name
		     */
		    hideInput: function (name) {
		        css(this[name + 'Input'], {
		            border: 0,
		            width: '1px',
		            height: '1px'
		        });
		        this.setInputValue(name);
		    },

		    /**
		     * Draw either the 'from' or the 'to' HTML input box of the range selector
		     *
		     * @private
		     * @function Highcharts.RangeSelector#drawInput
		     *
		     * @param {string} name
		     */
		    drawInput: function (name) {
		        var rangeSelector = this,
		            chart = rangeSelector.chart,
		            chartStyle = chart.renderer.style || {},
		            renderer = chart.renderer,
		            options = chart.options.rangeSelector,
		            lang = defaultOptions.lang,
		            div = rangeSelector.div,
		            isMin = name === 'min',
		            input,
		            label,
		            dateBox,
		            inputGroup = this.inputGroup;

		        function updateExtremes() {
		            var inputValue = input.value,
		                value = (options.inputDateParser || Date.parse)(inputValue),
		                chartAxis = chart.xAxis[0],
		                dataAxis = chart.scroller && chart.scroller.xAxis ?
		                    chart.scroller.xAxis :
		                    chartAxis,
		                dataMin = dataAxis.dataMin,
		                dataMax = dataAxis.dataMax;
		            if (value !== input.previousValue) {
		                input.previousValue = value;
		                // If the value isn't parsed directly to a value by the
		                // browser's Date.parse method, like YYYY-MM-DD in IE, try
		                // parsing it a different way
		                if (!isNumber(value)) {
		                    value = inputValue.split('-');
		                    value = Date.UTC(
		                        pInt(value[0]),
		                        pInt(value[1]) - 1,
		                        pInt(value[2])
		                    );
		                }

		                if (isNumber(value)) {

		                    // Correct for timezone offset (#433)
		                    if (!chart.time.useUTC) {
		                        value =
		                            value + new Date().getTimezoneOffset() * 60 * 1000;
		                    }

		                    // Validate the extremes. If it goes beyound the data min or
		                    // max, use the actual data extreme (#2438).
		                    if (isMin) {
		                        if (value > rangeSelector.maxInput.HCTime) {
		                            value = undefined;
		                        } else if (value < dataMin) {
		                            value = dataMin;
		                        }
		                    } else {
		                        if (value < rangeSelector.minInput.HCTime) {
		                            value = undefined;
		                        } else if (value > dataMax) {
		                            value = dataMax;
		                        }
		                    }

		                    // Set the extremes
		                    if (value !== undefined) {
		                        chartAxis.setExtremes(
		                            isMin ? value : chartAxis.min,
		                            isMin ? chartAxis.max : value,
		                            undefined,
		                            undefined,
		                            { trigger: 'rangeSelectorInput' }
		                        );
		                    }
		                }
		            }
		        }

		        // Create the text label
		        this[name + 'Label'] = label = renderer.label(
		                lang[isMin ? 'rangeSelectorFrom' : 'rangeSelectorTo'],
		                this.inputGroup.offset
		            )
		            .addClass('highcharts-range-label')
		            .attr({
		                padding: 2
		            })
		            .add(inputGroup);
		        inputGroup.offset += label.width + 5;

		        // Create an SVG label that shows updated date ranges and and records
		        // click events that bring in the HTML input.
		        this[name + 'DateBox'] = dateBox = renderer.label('', inputGroup.offset)
		            .addClass('highcharts-range-input')
		            .attr({
		                padding: 2,
		                width: options.inputBoxWidth || 90,
		                height: options.inputBoxHeight || 17,
		                'text-align': 'center'
		            })
		            .on('click', function () {
		                // If it is already focused, the onfocus event doesn't fire
		                // (#3713)
		                rangeSelector.showInput(name);
		                rangeSelector[name + 'Input'].focus();
		            });

		        if (!chart.styledMode) {
		            dateBox.attr({
		                stroke:
		                    options.inputBoxBorderColor || '#cccccc',
		                'stroke-width': 1
		            });
		        }

		        dateBox.add(inputGroup);

		        inputGroup.offset += dateBox.width + (isMin ? 10 : 0);


		        // Create the HTML input element. This is rendered as 1x1 pixel then set
		        // to the right size when focused.
		        this[name + 'Input'] = input = createElement('input', {
		            name: name,
		            className: 'highcharts-range-selector',
		            type: 'text'
		        }, {
		            top: chart.plotTop + 'px' // prevent jump on focus in Firefox
		        }, div);

		        if (!chart.styledMode) {
		            // Styles
		            label.css(merge(chartStyle, options.labelStyle));

		            dateBox.css(merge({
		                color: '#333333'
		            }, chartStyle, options.inputStyle));

		            css(input, extend({
		                position: 'absolute',
		                border: 0,
		                width: '1px', // Chrome needs a pixel to see it
		                height: '1px',
		                padding: 0,
		                textAlign: 'center',
		                fontSize: chartStyle.fontSize,
		                fontFamily: chartStyle.fontFamily,
		                top: '-9999em' // #4798
		            }, options.inputStyle));
		        }

		        // Blow up the input box
		        input.onfocus = function () {
		            rangeSelector.showInput(name);
		        };
		        // Hide away the input box
		        input.onblur = function () {
		            if (input === H.doc.activeElement) { // Only when focused
		                // Update also when no `change` event is triggered, like when
		                // clicking inside the SVG (#4710)
		                updateExtremes();
		                rangeSelector.hideInput(name);
		            }
		        };

		        // handle changes in the input boxes
		        input.onchange = updateExtremes;

		        input.onkeypress = function (event) {
		            // IE does not fire onchange on enter
		            if (event.keyCode === 13) {
		                updateExtremes();
		            }
		        };
		    },

		    /**
		     * Get the position of the range selector buttons and inputs. This can be
		     * overridden from outside for custom positioning.
		     *
		     * @private
		     * @function Highcharts.RangeSelector#getPosition
		     *
		     * @return {Highcharts.Dictionary<number>}
		     */
		    getPosition: function () {
		        var chart = this.chart,
		            options = chart.options.rangeSelector,
		            top = options.verticalAlign === 'top' ?
		                chart.plotTop - chart.axisOffset[0] :
		                0; // set offset only for varticalAlign top

		        return {
		            buttonTop: top + options.buttonPosition.y,
		            inputTop: top + options.inputPosition.y - 10
		        };
		    },
		    /**
		     * 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.
		     *
		     * @private
		     * @function Highcharts.RangeSelector#getYTDExtremes
		     *
		     * @param {number} dataMax
		     *
		     * @param {number} dataMin
		     *
		     * @return {*}
		     *         Returns min and max for the YTD
		     */
		    getYTDExtremes: function (dataMax, dataMin, useUTC) {
		        var time = this.chart.time,
		            min,
		            now = new time.Date(dataMax),
		            year = time.get('FullYear', now),
		            startOfYear = useUTC ?
		                time.Date.UTC(year, 0, 1) : // eslint-disable-line new-cap
		                +new time.Date(year, 0, 1);
		        min = Math.max(dataMin || 0, startOfYear);
		        now = now.getTime();
		        return {
		            max: Math.min(dataMax || now, now),
		            min: min
		        };
		    },

		    /**
		     * 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.
		     *
		     * @private
		     * @function Highcharts.RangeSelector#render
		     *
		     * @param {number} min
		     *        X axis minimum
		     *
		     * @param {number} max
		     *        X axis maximum
		     */
		    render: function (min, max) {

		        var rangeSelector = this,
		            chart = rangeSelector.chart,
		            renderer = chart.renderer,
		            container = chart.container,
		            chartOptions = chart.options,
		            navButtonOptions = (
		                chartOptions.exporting &&
		                chartOptions.exporting.enabled !== false &&
		                chartOptions.navigation &&
		                chartOptions.navigation.buttonOptions
		            ),
		            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,
		            buttonTheme = options.buttonTheme,
		            buttonPosition = options.buttonPosition,
		            inputPosition = options.inputPosition,
		            inputEnabled = options.inputEnabled,
		            states = buttonTheme && buttonTheme.states,
		            plotLeft = chart.plotLeft,
		            buttonLeft,
		            buttonGroup = rangeSelector.buttonGroup,
		            group,
		            groupHeight,
		            rendered = rangeSelector.rendered,
		            verticalAlign = rangeSelector.options.verticalAlign,
		            legend = chart.legend,
		            legendOptions = legend && legend.options,
		            buttonPositionY = buttonPosition.y,
		            inputPositionY = inputPosition.y,
		            animate = rendered || false,
		            verb = animate ? 'animate' : 'attr',
		            exportingX = 0,
		            alignTranslateY,
		            legendHeight,
		            minPosition,
		            translateY = 0,
		            translateX;

		        if (options.enabled === false) {
		            return;
		        }

		        // create the elements
		        if (!rendered) {

		            rangeSelector.group = group = renderer.g('range-selector-group')
		                .attr({
		                    zIndex: 7
		                })
		                .add();

		            rangeSelector.buttonGroup = buttonGroup =
		                renderer.g('range-selector-buttons').add(group);

		            rangeSelector.zoomText = renderer.text(
		                    lang.rangeSelectorZoom,
		                    0,
		                    15
		                )
		                .add(buttonGroup);

		            if (!chart.styledMode) {

		                rangeSelector.zoomText.css(options.labelStyle);

		                buttonTheme['stroke-width'] =
		                    pick(buttonTheme['stroke-width'], 0);
		            }

		            rangeSelector.buttonOptions.forEach(function (rangeOptions, i) {

		                buttons[i] = renderer.button(
		                        rangeOptions.text,
		                        0,
		                        0,
		                        function () {

		                            // extract events from button object and call
		                            var buttonEvents = (
		                                    rangeOptions.events &&
		                                    rangeOptions.events.click
		                                ),
		                                callDefaultEvent;

		                            if (buttonEvents) {
		                                callDefaultEvent =
		                                    buttonEvents.call(rangeOptions);
		                            }

		                            if (callDefaultEvent !== false) {
		                                rangeSelector.clickButton(i);
		                            }

		                            rangeSelector.isActive = true;
		                        },
		                        buttonTheme,
		                        states && states.hover,
		                        states && states.select,
		                        states && states.disabled
		                    )
		                    .attr({
		                        'text-align': 'center'
		                    })
		                    .add(buttonGroup);
		            });

		            // first create a wrapper outside the container in order to make
		            // the inputs work and make export correct
		            if (inputEnabled !== false) {
		                rangeSelector.div = div = createElement('div', null, {
		                    position: 'relative',
		                    height: 0,
		                    zIndex: inputsZIndex
		                });

		                container.parentNode.insertBefore(div, container);

		                // Create the group to keep the inputs
		                rangeSelector.inputGroup = inputGroup =
		                    renderer.g('input-group').add(group);
		                inputGroup.offset = 0;

		                rangeSelector.drawInput('min');
		                rangeSelector.drawInput('max');
		            }
		        }

		        // #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;
		        rangeSelector.buttonOptions.forEach(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();

		        // detect collisiton with exporting
		        if
		            (
		                navButtonOptions &&
		                this.titleCollision(chart) &&
		                verticalAlign === 'top' &&
		                buttonPosition.align === 'right' &&
		                (
		                    (buttonPosition.y + buttonGroup.getBBox().height - 12) <
		                    ((navButtonOptions.y || 0) + navButtonOptions.height)
		                )
		            ) {
		            exportingX = -40;
		        }

		        if (buttonPosition.align === 'left') {
		            translateX = buttonPosition.x - chart.spacing[3];
		        } else if (buttonPosition.align === 'right') {
		            translateX = buttonPosition.x + exportingX - chart.spacing[1];
		        }

		        // align button group
		        buttonGroup.align({
		            y: buttonPosition.y,
		            width: buttonGroup.getBBox().width,
		            align: buttonPosition.align,
		            x: translateX
		        }, true, chart.spacingBox);

		        // skip animation
		        rangeSelector.group.placed = animate;
		        rangeSelector.buttonGroup.placed = animate;

		        if (inputEnabled !== false) {

		            var inputGroupX,
		                inputGroupWidth,
		                buttonGroupX,
		                buttonGroupWidth;

		            // detect collision with exporting
		            if
		                (
		                    navButtonOptions &&
		                    this.titleCollision(chart) &&
		                    verticalAlign === 'top' &&
		                    inputPosition.align === 'right' &&
		                    (
		                        (inputPosition.y - inputGroup.getBBox().height - 12) <
		                        (
		                            (navButtonOptions.y || 0) +
		                            navButtonOptions.height +
		                            chart.spacing[0]
		                        )
		                    )
		                ) {
		                exportingX = -40;
		            } else {
		                exportingX = 0;
		            }

		            if (inputPosition.align === 'left') {
		                translateX = plotLeft;
		            } else if (inputPosition.align === 'right') {
		                translateX = -Math.max(chart.axisOffset[1], -exportingX);
		            }

		            // Update the alignment to the updated spacing box
		            inputGroup.align({
		                y: inputPosition.y,
		                width: inputGroup.getBBox().width,
		                align: inputPosition.align,
		                // fix wrong getBBox() value on right align
		                x: inputPosition.x + translateX - 2
		            }, true, chart.spacingBox);

		            // detect collision
		            inputGroupX = (
		                inputGroup.alignAttr.translateX +
		                inputGroup.alignOptions.x -
		                exportingX +
		                // getBBox for detecing left margin
		                inputGroup.getBBox().x +
		                // 2px padding to not overlap input and label
		                2
		            );

		            inputGroupWidth = inputGroup.alignOptions.width;

		            buttonGroupX = buttonGroup.alignAttr.translateX +
		                buttonGroup.getBBox().x;
		            // 20 is minimal spacing between elements
		            buttonGroupWidth = buttonGroup.getBBox().width + 20;

		            if (
		                    (inputPosition.align === buttonPosition.align) ||
		                    (
		                        (buttonGroupX + buttonGroupWidth > inputGroupX) &&
		                        (inputGroupX + inputGroupWidth > buttonGroupX) &&
		                        (
		                            buttonPositionY <
		                            (inputPositionY + inputGroup.getBBox().height)
		                        )
		                    )
		                ) {

		                inputGroup.attr({
		                    translateX: inputGroup.alignAttr.translateX +
		                        (chart.axisOffset[1] >= -exportingX ? 0 : -exportingX),
		                    translateY: inputGroup.alignAttr.translateY +
		                        buttonGroup.getBBox().height + 10
		                });

		            }

		            // Set or reset the input values
		            rangeSelector.setInputValue('min', min);
		            rangeSelector.setInputValue('max', max);

		            // skip animation
		            rangeSelector.inputGroup.placed = animate;
		        }

		        // vertical align
		        rangeSelector.group.align({
		            verticalAlign: verticalAlign
		        }, true, chart.spacingBox);

		        // set position
		        groupHeight = rangeSelector.group.getBBox().height + 20; // # 20 padding
		        alignTranslateY = rangeSelector.group.alignAttr.translateY;

		        // calculate bottom position
		        if (verticalAlign === 'bottom') {
		            legendHeight = (
		                legendOptions &&
		                legendOptions.verticalAlign === 'bottom' &&
		                legendOptions.enabled &&
		                !legendOptions.floating ?
		                    legend.legendHeight + pick(legendOptions.margin, 10) :
		                    0
		            );

		            groupHeight = groupHeight + legendHeight - 20;
		            translateY = (
		                alignTranslateY -
		                groupHeight -
		                (floating ? 0 : options.y) -
		                10 // 10 spacing
		            );

		        }

		        if (verticalAlign === 'top') {
		            if (floating) {
		                translateY = 0;
		            }

		            if (chart.titleOffset) {
		                translateY = chart.titleOffset + chart.options.title.margin;
		            }

		            translateY += ((chart.margin[0] - chart.spacing[0]) || 0);

		        } else if (verticalAlign === 'middle') {
		            if (inputPositionY === buttonPositionY) {
		                if (inputPositionY < 0) {
		                    translateY = alignTranslateY + minPosition;
		                } else {
		                    translateY = alignTranslateY;
		                }
		            } else if (inputPositionY || buttonPositionY) {
		                if (inputPositionY < 0 || buttonPositionY < 0) {
		                    translateY -= Math.min(inputPositionY, buttonPositionY);
		                } else {
		                    translateY = alignTranslateY - groupHeight + minPosition;
		                }
		            }
		        }

		        rangeSelector.group.translate(
		            options.x,
		            options.y + Math.floor(translateY)
		        );

		        // translate HTML inputs
		        if (inputEnabled !== false) {
		            rangeSelector.minInput.style.marginTop =
		                rangeSelector.group.translateY + 'px';
		            rangeSelector.maxInput.style.marginTop =
		                rangeSelector.group.translateY + 'px';
		        }

		        rangeSelector.rendered = true;
		    },

		    /**
		     * Extracts height of range selector
		     *
		     * @private
		     * @function Highcharts.RangeSelector#getHeight
		     *
		     * @return {number}
		     *         Returns rangeSelector height
		     */
		    getHeight: function () {
		        var rangeSelector = this,
		            options = rangeSelector.options,
		            rangeSelectorGroup = rangeSelector.group,
		            inputPosition = options.inputPosition,
		            buttonPosition = options.buttonPosition,
		            yPosition = options.y,
		            buttonPositionY = buttonPosition.y,
		            inputPositionY = inputPosition.y,
		            rangeSelectorHeight = 0,
		            minPosition;

		        rangeSelectorHeight = rangeSelectorGroup ?
		            // 13px to keep back compatibility
		            (rangeSelectorGroup.getBBox(true).height) + 13 + yPosition :
		            0;

		        minPosition = Math.min(inputPositionY, buttonPositionY);

		        if (
		            (inputPositionY < 0 && buttonPositionY < 0) ||
		            (inputPositionY > 0 && buttonPositionY > 0)
		        ) {
		            rangeSelectorHeight += Math.abs(minPosition);
		        }

		        return rangeSelectorHeight;
		    },

		    /**
		     * Detect collision with title or subtitle
		     *
		     * @private
		     * @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);
		    },

		    /**
		     * Update the range selector with new options
		     *
		     * @private
		     * @function Highcharts.RangeSelector#update
		     *
		     * @param {Highcharts.RangeSelectorOptions} options
		     */
		    update: function (options) {
		        var chart = this.chart;

		        merge(true, chart.options.rangeSelector, options);
		        this.destroy();
		        this.init(chart);
		        chart.rangeSelector.render();
		    },

		    /**
		     * Destroys allocated elements.
		     *
		     * @private
		     * @function Highcharts.RangeSelector#destroy
		     */
		    destroy: function () {
		        var rSelector = this,
		            minInput = rSelector.minInput,
		            maxInput = rSelector.maxInput;

		        rSelector.unMouseDown();
		        rSelector.unResize();

		        // Destroy elements in collections
		        destroyObjectProperties(rSelector.buttons);

		        // Clear input element events
		        if (minInput) {
		            minInput.onfocus = minInput.onblur = minInput.onchange = null;
		        }
		        if (maxInput) {
		            maxInput.onfocus = maxInput.onblur = maxInput.onchange = null;
		        }

		        // Destroy HTML and SVG elements
		        H.objectEach(rSelector, function (val, key) {
		            if (val && key !== 'chart') {
		                if (val.destroy) { // SVGElement
		                    val.destroy();
		                } else if (val.nodeType) { // HTML element
		                    discardElement(this[key]);
		                }
		            }
		            if (val !== RangeSelector.prototype[key]) {
		                rSelector[key] = null;
		            }
		        }, this);
		    }
		};

		/**
		 * Add logic to normalize the zoomed range in order to preserve the pressed
		 * state of range selector buttons
		 *
		 * @private
		 * @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,
		        newMin = pick(fixedMin, this.translate(pxMin, true, !this.horiz)),
		        newMax = pick(fixedMax, this.translate(pxMax, true, !this.horiz)),
		        changeRatio = fixedRange && (newMax - newMin) / fixedRange;

		    // If the difference between the fixed range and the actual requested range
		    // is too great, the user is dragging across an ordinal gap, and we need to
		    // release the range selector button.
		    if (changeRatio > 0.7 && changeRatio < 1.3) {
		        if (fixedMax) {
		            newMin = newMax - fixedRange;
		        } else {
		            newMax = newMin + fixedRange;
		        }
		    }
		    if (!isNumber(newMin) || !isNumber(newMax)) { // #1195, #7411
		        newMin = newMax = undefined;
		    }

		    return {
		        min: newMin,
		        max: newMax
		    };
		};

		/**
		 * Get the axis min value based on the range option and the current max. For
		 * stock charts this is extended via the {@link RangeSelector} so that if the
		 * selected range is a multiple of months or years, it is compensated for
		 * various month lengths.
		 *
		 * @private
		 * @function Highcharts.Axis#minFromRange
		 *
		 * @return {number}
		 *         The new minimum value.
		 */
		Axis.prototype.minFromRange = function () {
		    var rangeOptions = this.range,
		        type = rangeOptions.type,
		        timeName = { month: 'Month', year: 'FullYear' }[type],
		        min,
		        max = this.max,
		        dataMin,
		        range,
		        // Get the true range from a start date
		        getTrueRange = function (base, count) {
		            var date = new Date(base),
		                basePeriod = date['get' + timeName]();

		            date['set' + timeName](basePeriod + count);

		            if (basePeriod === date['get' + timeName]()) {
		                date.setDate(0); // #6537
		            }

		            return date.getTime() - base;
		        };

		    if (isNumber(rangeOptions)) {
		        min = max - rangeOptions;
		        range = rangeOptions;
		    } else {
		        min = max + getTrueRange(max, -rangeOptions.count);

		        // Let the fixedRange reflect initial settings (#5930)
		        if (this.chart) {
		            this.chart.fixedRange = max - min;
		        }
		    }

		    dataMin = pick(this.dataMin, Number.MIN_VALUE);
		    if (!isNumber(min)) {
		        min = dataMin;
		    }
		    if (min <= dataMin) {
		        min = dataMin;
		        if (range === undefined) { // #4501
		            range = getTrueRange(min, rangeOptions.count);
		        }
		        this.newMax = Math.min(min + range, this.dataMax);
		    }
		    if (!isNumber(max)) {
		        min = undefined;
		    }
		    return min;

		};

		// Initialize rangeselector for stock charts
		addEvent(Chart, 'afterGetContainer', function () {
		    if (this.options.rangeSelector.enabled) {
		        this.rangeSelector = new RangeSelector(this);
		    }
		});

		wrap(Chart.prototype, 'render', function (proceed, options, callback) {

		    var chart = this,
		        axes = chart.axes,
		        rangeSelector = chart.rangeSelector,
		        verticalAlign;

		    if (rangeSelector) {

		        axes.forEach(function (axis) {
		            axis.updateNames();
		            axis.setScale();
		        });

		        chart.getAxisMargins();

		        rangeSelector.render();
		        verticalAlign = rangeSelector.options.verticalAlign;

		        if (!rangeSelector.options.floating) {
		            if (verticalAlign === 'bottom') {
		                this.extraBottomMargin = true;
		            } else if (verticalAlign !== 'middle') {
		                this.extraTopMargin = true;
		            }
		        }
		    }

		    proceed.call(this, options, callback);

		});

		addEvent(Chart, 'update', function (e) {

		    var chart = this,
		        options = e.options,
		        optionsRangeSelector = options.rangeSelector,
		        rangeSelector = chart.rangeSelector,
		        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;

		    if (rangeSelector) {

		        rangeSelector.render();

		        verticalAlign = (
		            optionsRangeSelector &&
		            optionsRangeSelector.verticalAlign
		        ) || (
		            rangeSelector.options && rangeSelector.options.verticalAlign
		        );

		        if (!rangeSelector.options.floating) {
		            if (verticalAlign === 'bottom') {
		                this.extraBottomMargin = true;
		            } else if (verticalAlign !== 'middle') {
		                this.extraTopMargin = true;
		            }
		        }

		        if (
		            this.extraBottomMargin !== extraBottomMarginWas ||
		            this.extraTopMargin !== extraTopMarginWas
		        ) {
		            this.isDirtyBox = true;
		        }

		    }

		});

		wrap(Chart.prototype, 'redraw', function (proceed, options, callback) {
		    var chart = this,
		        rangeSelector = chart.rangeSelector,
		        verticalAlign;

		    if (rangeSelector && !rangeSelector.options.floating) {

		        rangeSelector.render();
		        verticalAlign = rangeSelector.options.verticalAlign;

		        if (verticalAlign === 'bottom') {
		            this.extraBottomMargin = true;
		        } else if (verticalAlign !== 'middle') {
		            this.extraTopMargin = true;
		        }
		    }

		    proceed.call(this, options, callback);
		});

		addEvent(Chart, 'getMargins', function () {
		    var rangeSelector = this.rangeSelector,
		        rangeSelectorHeight;

		    if (rangeSelector) {
		        rangeSelectorHeight = rangeSelector.getHeight();

		        if (this.extraTopMargin) {
		            this.plotTop += rangeSelectorHeight;
		        }

		        if (this.extraBottomMargin) {
		            this.marginBottom += rangeSelectorHeight;
		        }
		    }
		});

		Chart.prototype.callbacks.push(function (chart) {
		    var extremes,
		        rangeSelector = chart.rangeSelector,
		        unbindRender,
		        unbindSetExtremes;

		    function renderRangeSelector() {
		        extremes = chart.xAxis[0].getExtremes();
		        if (isNumber(extremes.min)) {
		            rangeSelector.render(extremes.min, extremes.max);
		        }
		    }

		    if (rangeSelector) {
		        // redraw the scroller on setExtremes
		        unbindSetExtremes = addEvent(
		            chart.xAxis[0],
		            'afterSetExtremes',
		            function (e) {
		                rangeSelector.render(e.min, e.max);
		            }
		        );

		        // redraw the scroller chart resize
		        unbindRender = addEvent(chart, 'redraw', renderRangeSelector);

		        // do it now
		        renderRangeSelector();
		    }

		    // Remove resize/afterSetExtremes at chart destroy
		    addEvent(chart, 'destroy', function destroyEvents() {
		        if (rangeSelector) {
		            unbindRender();
		            unbindSetExtremes();
		        }
		    });
		});


		H.RangeSelector = RangeSelector;

		/* ****************************************************************************
		 * End Range Selector code                                                     *
		 *****************************************************************************/

	}(Highcharts));
	(function (H) {
		/**
		 * (c) 2010-2018 Torstein Honsi
		 *
		 * License: www.highcharts.com/license
		 */



		var Axis = H.Axis,
		    Chart = H.Chart,
		    correctFloat = H.correctFloat,
		    defined = H.defined,
		    destroyObjectProperties = H.destroyObjectProperties,
		    format = H.format,
		    objectEach = H.objectEach,
		    pick = H.pick,
		    Series = H.Series;

		/**
		 * The class for stacks. Each stack, on a specific X value and either negative
		 * or positive, has its own stack item.
		 *
		 * @private
		 * @class
		 * @name Highcharts.StackItem
		 *
		 * @param {Highcharts.Axis} axis
		 *
		 * @param {Highcharts.Options} options
		 *
		 * @param {boolean} isNegative
		 *
		 * @param {number} x
		 *
		 * @param {string|*} stackOption
		 */
		H.StackItem = function (axis, options, isNegative, x, stackOption) {

		    var inverted = axis.chart.inverted;

		    this.axis = axis;

		    // Tells if the stack is negative
		    this.isNegative = isNegative;

		    // Save the options to be able to style the label
		    this.options = options;

		    // Save the x value to be able to position the label later
		    this.x = x;

		    // Initialize total value
		    this.total = null;

		    // This will keep each points' extremes stored by series.index and point
		    // index
		    this.points = {};

		    // Save the stack option on the series configuration object, and whether to
		    // treat it as percent
		    this.stack = stackOption;
		    this.leftCliff = 0;
		    this.rightCliff = 0;

		    // The align options and text align varies on whether the stack is negative
		    // and if the chart is inverted or not.
		    // First test the user supplied value, then use the dynamic.
		    this.alignOptions = {
		        align: options.align ||
		            (inverted ? (isNegative ? 'left' : 'right') : 'center'),
		        verticalAlign: options.verticalAlign ||
		            (inverted ? 'middle' : (isNegative ? 'bottom' : 'top')),
		        y: pick(options.y, inverted ? 4 : (isNegative ? 14 : -6)),
		        x: pick(options.x, inverted ? (isNegative ? -6 : 6) : 0)
		    };

		    this.textAlign = options.textAlign ||
		        (inverted ? (isNegative ? 'right' : 'left') : 'center');
		};

		H.StackItem.prototype = {

		    /**
		     * @private
		     * @function Highcharts.StackItem#destroy
		     */
		    destroy: function () {
		        destroyObjectProperties(this, this.axis);
		    },

		    /**
		     * Renders the stack total label and adds it to the stack label group.
		     *
		     * @private
		     * @function Highcharts.StackItem#render
		     *
		     * @param {Highcharts.SVGElement} group
		     */
		    render: function (group) {
		        var chart = this.axis.chart,
		            options = this.options,
		            formatOption = options.format,
		            str = formatOption ?
		                format(formatOption, this, chart.time) :
		                options.formatter.call(this);  // format the text in the label

		        // Change the text to reflect the new total and set visibility to hidden
		        // in case the serie is hidden
		        if (this.label) {
		            this.label.attr({ text: str, visibility: 'hidden' });
		        // Create new label
		        } else {
		            this.label =
		                chart.renderer.text(str, null, null, options.useHTML)
		                    .css(options.style)
		                    .attr({
		                        align: this.textAlign,
		                        rotation: options.rotation,
		                        visibility: 'hidden' // hidden until setOffset is called
		                    })
		                    .add(group); // add to the labels-group
		        }

		        // Rank it higher than data labels (#8742)
		        this.label.labelrank = chart.plotHeight;
		    },

		    /**
		     * Sets the offset that the stack has from the x value and repositions the
		     * label.
		     *
		     * @private
		     * @function Highcarts.StackItem#setOffset
		     *
		     * @param {number} xOffset
		     *
		     * @param {number} xWidth
		     */
		    setOffset: function (xOffset, xWidth) {
		        var stackItem = this,
		            axis = stackItem.axis,
		            chart = axis.chart,
		            // stack value translated mapped to chart coordinates
		            y = axis.translate(
		                axis.usePercentage ? 100 : stackItem.total,
		                0,
		                0,
		                0,
		                1
		            ),
		            yZero = axis.translate(0), // stack origin
		            h = defined(y) && Math.abs(y - yZero), // stack height
		            x = chart.xAxis[0].translate(stackItem.x) + xOffset, // x position
		            stackBox = defined(y) && stackItem.getStackBox(
		                chart,
		                stackItem,
		                x,
		                y,
		                xWidth,
		                h,
		                axis
		            ),
		            label = stackItem.label,
		            alignAttr;

		        if (label && stackBox) {
		            // Align the label to the box
		            label.align(stackItem.alignOptions, null, stackBox);

		            // Set visibility (#678)
		            alignAttr = label.alignAttr;
		            label[
		                stackItem.options.crop === false || chart.isInsidePlot(
		                    alignAttr.x,
		                    alignAttr.y
		                ) ? 'show' : 'hide'](true);
		        }
		    },

		    /**
		     * @private
		     * @function Highcharts.StackItem#getStackBox
		     *
		     * @param {Highcharts.Chart} chart
		     *
		     * @param {Highcharts.StackItem} stackItem
		     *
		     * @param {number} x
		     *
		     * @param {number} y
		     *
		     * @param {number} xWidth
		     *
		     * @param {number} h
		     *
		     * @param {Highcharts.Axis} axis
		     *
		     * @return {*}
		     */
		    getStackBox: function (chart, stackItem, x, y, xWidth, h, axis) {
		        var reversed = stackItem.axis.reversed,
		            inverted = chart.inverted,
		            axisPos = axis.height + axis.pos - (inverted ? chart.plotLeft :
		                chart.plotTop),
		            neg = (stackItem.isNegative && !reversed) ||
		                (!stackItem.isNegative && reversed); // #4056

		        return { // this is the box for the complete stack
		            x: inverted ? (neg ? y : y - h) : x,
		            y: inverted ?
		                    axisPos - x - xWidth :
		                    (neg ?
		                        (axisPos - y - h) :
		                        axisPos - y
		                    ),
		            width: inverted ? h : xWidth,
		            height: inverted ? xWidth : h
		        };
		    }
		};

		/**
		 * Generate stacks for each series and calculate stacks total values
		 *
		 * @private
		 * @function Highcharts.Chart#getStacks
		 */
		Chart.prototype.getStacks = function () {
		    var chart = this;

		    // reset stacks for each yAxis
		    chart.yAxis.forEach(function (axis) {
		        if (axis.stacks && axis.hasVisibleSeries) {
		            axis.oldStacks = axis.stacks;
		        }
		    });

		    chart.series.forEach(function (series) {
		        if (series.options.stacking && (series.visible === true ||
		                chart.options.chart.ignoreHiddenSeries === false)) {
		            series.stackKey = series.type + pick(series.options.stack, '');
		        }
		    });
		};


		// Stacking methods defined on the Axis prototype

		/**
		 * Build the stacks from top down
		 *
		 * @private
		 * @function Highcharts.Axis#buildStacks
		 */
		Axis.prototype.buildStacks = function () {
		    var axisSeries = this.series,
		        reversedStacks = pick(this.options.reversedStacks, true),
		        len = axisSeries.length,
		        i;
		    if (!this.isXAxis) {
		        this.usePercentage = false;
		        i = len;
		        while (i--) {
		            axisSeries[reversedStacks ? i : len - i - 1].setStackedPoints();
		        }

		        // Loop up again to compute percent and stream stack
		        for (i = 0; i < len; i++) {
		            axisSeries[i].modifyStacks();
		        }
		    }
		};

		/**
		 * @private
		 * @function Highcharts.Axis#renderStackTotals
		 */
		Axis.prototype.renderStackTotals = function () {
		    var axis = this,
		        chart = axis.chart,
		        renderer = chart.renderer,
		        stacks = axis.stacks,
		        stackTotalGroup = axis.stackTotalGroup;

		    // Create a separate group for the stack total labels
		    if (!stackTotalGroup) {
		        axis.stackTotalGroup = stackTotalGroup =
		            renderer.g('stack-labels')
		                .attr({
		                    visibility: 'visible',
		                    zIndex: 6
		                })
		                .add();
		    }

		    // plotLeft/Top will change when y axis gets wider so we need to translate
		    // the stackTotalGroup at every render call. See bug #506 and #516
		    stackTotalGroup.translate(chart.plotLeft, chart.plotTop);

		    // Render each stack total
		    objectEach(stacks, function (type) {
		        objectEach(type, function (stack) {
		            stack.render(stackTotalGroup);
		        });
		    });
		};

		/**
		 * Set all the stacks to initial states and destroy unused ones.
		 *
		 * @private
		 * @function Highcharts.Axis#resetStacks
		 */
		Axis.prototype.resetStacks = function () {
		    var axis = this,
		        stacks = axis.stacks;
		    if (!axis.isXAxis) {
		        objectEach(stacks, function (type) {
		            objectEach(type, function (stack, key) {
		                // Clean up memory after point deletion (#1044, #4320)
		                if (stack.touched < axis.stacksTouched) {
		                    stack.destroy();
		                    delete type[key];

		                // Reset stacks
		                } else {
		                    stack.total = null;
		                    stack.cumulative = null;
		                }
		            });
		        });
		    }
		};

		/**
		 * @private
		 * @function Highcharts.Axis#cleanStacks
		 */
		Axis.prototype.cleanStacks = function () {
		    var stacks;

		    if (!this.isXAxis) {
		        if (this.oldStacks) {
		            stacks = this.stacks = this.oldStacks;
		        }

		        // reset stacks
		        objectEach(stacks, function (type) {
		            objectEach(type, function (stack) {
		                stack.cumulative = stack.total;
		            });
		        });
		    }
		};


		// Stacking methods defnied for Series prototype

		/**
		 * Adds series' points value to corresponding stack
		 *
		 * @private
		 * @function Highcharts.Series#setStackedPoints
		 */
		Series.prototype.setStackedPoints = function () {
		    if (!this.options.stacking || (this.visible !== true &&
		            this.chart.options.chart.ignoreHiddenSeries !== false)) {
		        return;
		    }

		    var series = this,
		        xData = series.processedXData,
		        yData = series.processedYData,
		        stackedYData = [],
		        yDataLength = yData.length,
		        seriesOptions = series.options,
		        threshold = seriesOptions.threshold,
		        stackThreshold = pick(seriesOptions.startFromThreshold && threshold, 0),
		        stackOption = seriesOptions.stack,
		        stacking = seriesOptions.stacking,
		        stackKey = series.stackKey,
		        negKey = '-' + stackKey,
		        negStacks = series.negStacks,
		        yAxis = series.yAxis,
		        stacks = yAxis.stacks,
		        oldStacks = yAxis.oldStacks,
		        stackIndicator,
		        isNegative,
		        stack,
		        other,
		        key,
		        pointKey,
		        i,
		        x,
		        y;


		    yAxis.stacksTouched += 1;

		    // loop over the non-null y values and read them into a local array
		    for (i = 0; i < yDataLength; i++) {
		        x = xData[i];
		        y = yData[i];
		        stackIndicator = series.getStackIndicator(
		            stackIndicator,
		            x,
		            series.index
		        );
		        pointKey = stackIndicator.key;
		        // Read stacked values into a stack based on the x value,
		        // the sign of y and the stack key. Stacking is also handled for null
		        // values (#739)
		        isNegative = negStacks && y < (stackThreshold ? 0 : threshold);
		        key = isNegative ? negKey : stackKey;

		        // Create empty object for this stack if it doesn't exist yet
		        if (!stacks[key]) {
		            stacks[key] = {};
		        }

		        // Initialize StackItem for this x
		        if (!stacks[key][x]) {
		            if (oldStacks[key] && oldStacks[key][x]) {
		                stacks[key][x] = oldStacks[key][x];
		                stacks[key][x].total = null;
		            } else {
		                stacks[key][x] = new H.StackItem(
		                    yAxis,
		                    yAxis.options.stackLabels,
		                    isNegative,
		                    x,
		                    stackOption
		                );
		            }
		        }

		        // If the StackItem doesn't exist, create it first
		        stack = stacks[key][x];
		        if (y !== null) {
		            stack.points[pointKey] = stack.points[series.index] =
		                [pick(stack.cumulative, stackThreshold)];

		            // Record the base of the stack
		            if (!defined(stack.cumulative)) {
		                stack.base = pointKey;
		            }
		            stack.touched = yAxis.stacksTouched;


		            // In area charts, if there are multiple points on the same X value,
		            // let the area fill the full span of those points
		            if (stackIndicator.index > 0 && series.singleStacks === false) {
		                stack.points[pointKey][0] =
		                    stack.points[series.index + ',' + x + ',0'][0];
		            }

		        // When updating to null, reset the point stack (#7493)
		        } else {
		            stack.points[pointKey] = stack.points[series.index] = null;
		        }

		        // Add value to the stack total
		        if (stacking === 'percent') {

		            // Percent stacked column, totals are the same for the positive and
		            // negative stacks
		            other = isNegative ? stackKey : negKey;
		            if (negStacks && stacks[other] && stacks[other][x]) {
		                other = stacks[other][x];
		                stack.total = other.total =
		                    Math.max(other.total, stack.total) + Math.abs(y) || 0;

		            // Percent stacked areas
		            } else {
		                stack.total = correctFloat(stack.total + (Math.abs(y) || 0));
		            }
		        } else {
		            stack.total = correctFloat(stack.total + (y || 0));
		        }

		        stack.cumulative = pick(stack.cumulative, stackThreshold) + (y || 0);

		        if (y !== null) {
		            stack.points[pointKey].push(stack.cumulative);
		            stackedYData[i] = stack.cumulative;
		        }

		    }

		    if (stacking === 'percent') {
		        yAxis.usePercentage = true;
		    }

		    this.stackedYData = stackedYData; // To be used in getExtremes

		    // Reset old stacks
		    yAxis.oldStacks = {};
		};

		/**
		 * Iterate over all stacks and compute the absolute values to percent
		 *
		 * @private
		 * @function Highcharts.Series#modifyStacks
		 */
		Series.prototype.modifyStacks = function () {
		    var series = this,
		        stackKey = series.stackKey,
		        stacks = series.yAxis.stacks,
		        processedXData = series.processedXData,
		        stackIndicator,
		        stacking = series.options.stacking;

		    if (series[stacking + 'Stacker']) { // Modifier function exists
		        [stackKey, '-' + stackKey].forEach(function (key) {
		            var i = processedXData.length,
		                x,
		                stack,
		                pointExtremes;

		            while (i--) {
		                x = processedXData[i];
		                stackIndicator = series.getStackIndicator(
		                    stackIndicator,
		                    x,
		                    series.index,
		                    key
		                );
		                stack = stacks[key] && stacks[key][x];
		                pointExtremes = stack && stack.points[stackIndicator.key];
		                if (pointExtremes) {
		                    series[stacking + 'Stacker'](pointExtremes, stack, i);
		                }
		            }
		        });
		    }
		};

		/**
		 * Modifier function for percent stacks. Blows up the stack to 100%.
		 *
		 * @private
		 * @function Highcharts.Series#percentStacker
		 *
		 * @param {Array<number>} pointExtremes
		 *
		 * @param {Highcharts.StackItem} stack
		 *
		 * @param {number} i
		 */
		Series.prototype.percentStacker = function (pointExtremes, stack, i) {
		    var totalFactor = stack.total ? 100 / stack.total : 0;
		    // Y bottom value
		    pointExtremes[0] = correctFloat(pointExtremes[0] * totalFactor);
		    // Y value
		    pointExtremes[1] = correctFloat(pointExtremes[1] * totalFactor);
		    this.stackedYData[i] = pointExtremes[1];
		};

		/**
		 * Get stack indicator, according to it's x-value, to determine points with the
		 * same x-value
		 *
		 * @private
		 * @function Highcharts.Series#getStackIndicator
		 *
		 * @param {*} stackIndicator
		 *
		 * @param {number} x
		 *
		 * @param {number} index
		 *
		 * @param {string} key
		 *
		 * @return {*}
		 */
		Series.prototype.getStackIndicator = function (stackIndicator, x, index, key) {
		    // Update stack indicator, when:
		    // first point in a stack || x changed || stack type (negative vs positive)
		    // changed:
		    if (!defined(stackIndicator) || stackIndicator.x !== x ||
		            (key && stackIndicator.key !== key)) {
		        stackIndicator = {
		            x: x,
		            index: 0,
		            key: key
		        };
		    } else {
		        stackIndicator.index++;
		    }

		    stackIndicator.key = [index, x, stackIndicator.index].join(',');

		    return stackIndicator;
		};

	}(Highcharts));
	(function (H) {
		/* *
		 *
		 *  (c) 2010-2018 Torstein Honsi
		 *
		 *  License: www.highcharts.com/license
		 *
		 * */



		var addEvent = H.addEvent,
		    arrayMax = H.arrayMax,
		    arrayMin = H.arrayMin,
		    Axis = H.Axis,
		    Chart = H.Chart,
		    defined = H.defined,
		    extend = H.extend,
		    format = H.format,
		    isNumber = H.isNumber,
		    isString = H.isString,
		    merge = H.merge,
		    pick = H.pick,
		    Point = H.Point,
		    Renderer = H.Renderer,
		    Series = H.Series,
		    splat = H.splat,
		    SVGRenderer = H.SVGRenderer,
		    VMLRenderer = H.VMLRenderer,
		    wrap = H.wrap,

		    seriesProto = Series.prototype,
		    seriesInit = seriesProto.init,
		    seriesProcessData = seriesProto.processData,
		    pointTooltipFormatter = Point.prototype.tooltipFormatter;


		/**
		 * Compare the values of the series against the first non-null, non-
		 * 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. Adds
		 * a `change` field to every point object.
		 *
		 * @see [compareBase](#plotOptions.series.compareBase)
		 * @see [Axis.setCompare()](/class-reference/Highcharts.Axis#setCompare)
		 *
		 * @sample {highstock} stock/plotoptions/series-compare-percent/
		 *         Percent
		 * @sample {highstock} stock/plotoptions/series-compare-value/
		 *         Value
		 *
		 * @type      {string}
		 * @since     1.0.1
		 * @product   highstock
		 * @apioption plotOptions.series.compare
		 */

		/**
		 * 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
		 * according to the previous point (`compareStart=false`).
		 *
		 * @sample {highstock} stock/plotoptions/series-comparestart/
		 *         Calculate compare within visible range
		 *
		 * @type      {boolean}
		 * @default   false
		 * @since     6.0.0
		 * @product   highstock
		 * @apioption plotOptions.series.compareStart
		 */

		/**
		 * When [compare](#plotOptions.series.compare) is `percent`, this option
		 * dictates whether to use 0 or 100 as the base of comparison.
		 *
		 * @sample {highstock} stock/plotoptions/series-comparebase/
		 *         Compare base is 100
		 *
		 * @type       {number}
		 * @default    0
		 * @since      5.0.6
		 * @product    highstock
		 * @validvalue [0, 100]
		 * @apioption  plotOptions.series.compareBase
		 */

		/**
		 * Factory function for creating new stock charts. Creates a new
		 * {@link Highcharts.Chart|Chart} object with different default options than the
		 * basic Chart.
		 *
		 * @example
		 * var chart = Highcharts.stockChart('container', {
		 *     series: [{
		 *         data: [1, 2, 3, 4, 5, 6, 7, 8, 9],
		 *         pointInterval: 24 * 60 * 60 * 1000
		 *     }]
		 * });
		 *
		 * @function Highcharts.stockChart
		 *
		 * @param {string|Highcharts.HTMLDOMElement} [renderTo]
		 *        The DOM element to render to, or its id.
		 *
		 * @param {Highcharts.Options} options
		 *        The chart options structure as described in the
		 *        [options reference](https://api.highcharts.com/highstock).
		 *
		 * @param {Highcharts.ChartCallbackFunction} [callback]
		 *        A function to execute when the chart object is finished loading and
		 *        rendering. In most cases the chart is built in one thread, but in
		 *        Internet Explorer version 8 or less the chart is sometimes
		 *        initialized before the document is ready, and in these cases the
		 *        chart object will not be finished synchronously. As a consequence,
		 *        code that relies on the newly built Chart object should always run in
		 *        the callback. Defining a
		 *        [chart.event.load](https://api.highcharts.com/highstock/chart.events.load)
		 *        handler is equivalent.
		 *
		 * @return {Highcharts.Chart}
		 *         The chart object.
		 */
		H.StockChart = H.stockChart = function (a, b, c) {
		    var hasRenderToArg = isString(a) || a.nodeName,
		        options = arguments[hasRenderToArg ? 1 : 0],
		        userOptions = options,
		        // to increase performance, don't merge the data
		        seriesOptions = options.series,
		        defaultOptions = H.getOptions(),
		        opposite,

		        // Always disable startOnTick:true on the main axis when the navigator
		        // is enabled (#1090)
		        navigatorEnabled = pick(
		            options.navigator && options.navigator.enabled,
		            defaultOptions.navigator.enabled,
		            true
		        ),
		        disableStartOnTick = navigatorEnabled ? {
		            startOnTick: false,
		            endOnTick: false
		        } : null,

		        lineOptions = {

		            marker: {
		                enabled: false,
		                radius: 2
		            }
		            // gapSize: 0
		        },
		        columnOptions = {
		            shadow: false,
		            borderWidth: 0
		        };

		    // apply X axis options to both single and multi y axes
		    options.xAxis = splat(options.xAxis || {}).map(function (xAxisOptions, i) {
		        return merge(
		            { // defaults
		                minPadding: 0,
		                maxPadding: 0,
		                overscroll: 0,
		                ordinal: true,
		                title: {
		                    text: null
		                },
		                labels: {
		                    overflow: 'justify'
		                },
		                showLastLabel: true
		            },
		            defaultOptions.xAxis, // #3802
		            defaultOptions.xAxis && defaultOptions.xAxis[i], // #7690
		            xAxisOptions, // user options
		            { // forced options
		                type: 'datetime',
		                categories: null
		            },
		            disableStartOnTick
		        );
		    });

		    // apply Y axis options to both single and multi y axes
		    options.yAxis = splat(options.yAxis || {}).map(function (yAxisOptions, i) {
		        opposite = pick(yAxisOptions.opposite, true);
		        return merge({ // defaults
		            labels: {
		                y: -2
		            },
		            opposite: opposite,

		            /**
		             * @default {highcharts} true
		             * @default {highstock} false
		             * @apioption yAxis.showLastLabel
		             */
		            showLastLabel: !!(
		                // #6104, show last label by default for category axes
		                yAxisOptions.categories ||
		                yAxisOptions.type === 'category'
		            ),

		            title: {
		                text: null
		            }
		        },
		        defaultOptions.yAxis, // #3802
		        defaultOptions.yAxis && defaultOptions.yAxis[i], // #7690
		        yAxisOptions // user options
		        );
		    });

		    options.series = null;

		    options = merge(
		        {
		            chart: {
		                panning: true,
		                pinchType: 'x'
		            },
		            navigator: {
		                enabled: navigatorEnabled
		            },
		            scrollbar: {
		                // #4988 - check if setOptions was called
		                enabled: pick(defaultOptions.scrollbar.enabled, true)
		            },
		            rangeSelector: {
		                // #4988 - check if setOptions was called
		                enabled: pick(defaultOptions.rangeSelector.enabled, true)
		            },
		            title: {
		                text: null
		            },
		            tooltip: {
		                split: pick(defaultOptions.tooltip.split, true),
		                crosshairs: true
		            },
		            legend: {
		                enabled: false
		            },

		            plotOptions: {
		                line: lineOptions,
		                spline: lineOptions,
		                area: lineOptions,
		                areaspline: lineOptions,
		                arearange: lineOptions,
		                areasplinerange: lineOptions,
		                column: columnOptions,
		                columnrange: columnOptions,
		                candlestick: columnOptions,
		                ohlc: columnOptions
		            }

		        },

		        options, // user's options

		        { // forced options
		            isStock: true // internal flag
		        }
		    );

		    options.series = userOptions.series = seriesOptions;

		    return hasRenderToArg ?
		        new Chart(a, options, c) :
		        new Chart(options, b);
		};

		// Override the automatic label alignment so that the first Y axis' labels
		// are drawn on top of the grid line, and subsequent axes are drawn outside
		wrap(Axis.prototype, 'autoLabelAlign', function (proceed) {
		    var chart = this.chart,
		        options = this.options,
		        panes = chart._labelPanes = chart._labelPanes || {},
		        key,
		        labelOptions = this.options.labels;
		    if (this.chart.options.isStock && this.coll === 'yAxis') {
		        key = options.top + ',' + options.height;
		        // do it only for the first Y axis of each pane
		        if (!panes[key] && labelOptions.enabled) {
		            if (labelOptions.x === 15) { // default
		                labelOptions.x = 0;
		            }
		            if (labelOptions.align === undefined) {
		                labelOptions.align = 'right';
		            }
		            panes[key] = this;
		            return 'right';
		        }
		    }
		    return proceed.apply(this, [].slice.call(arguments, 1));
		});

		// Clear axis from label panes (#6071)
		addEvent(Axis, 'destroy', function () {
		    var chart = this.chart,
		        key = this.options && (this.options.top + ',' + this.options.height);

		    if (key && chart._labelPanes && chart._labelPanes[key] === this) {
		        delete chart._labelPanes[key];
		    }
		});

		// Override getPlotLinePath to allow for multipane charts
		wrap(Axis.prototype, 'getPlotLinePath', function (
		    proceed,
		    value,
		    lineWidth,
		    old,
		    force,
		    translatedValue
		) {
		    var axis = this,
		        series = (
		            this.isLinked && !this.series ?
		                this.linkedParent.series :
		                this.series
		        ),
		        chart = axis.chart,
		        renderer = chart.renderer,
		        axisLeft = axis.left,
		        axisTop = axis.top,
		        x1,
		        y1,
		        x2,
		        y2,
		        result = [],
		        axes = [], // #3416 need a default array
		        axes2,
		        uniqueAxes,
		        transVal;

		    // Return the other axis based on either the axis option or on related
		    // series.
		    function getAxis(coll) {
		        var otherColl = coll === 'xAxis' ? 'yAxis' : 'xAxis',
		            opt = axis.options[otherColl];

		        // Other axis indexed by number
		        if (isNumber(opt)) {
		            return [chart[otherColl][opt]];
		        }

		        // Other axis indexed by id (like navigator)
		        if (isString(opt)) {
		            return [chart.get(opt)];
		        }

		        // Auto detect based on existing series
		        return series.map(function (s) {
		            return s[otherColl];
		        });
		    }

		    // Ignore in case of colorAxis or zAxis. #3360, #3524, #6720
		    if (axis.coll !== 'xAxis' && axis.coll !== 'yAxis') {
		        return proceed.apply(this, [].slice.call(arguments, 1));
		    }

		    // Get the related axes based on series
		    axes = getAxis(axis.coll);

		    // Get the related axes based options.*Axis setting #2810
		    axes2 = (axis.isXAxis ? chart.yAxis : chart.xAxis);
		    axes2.forEach(function (A) {
		        if (
		            defined(A.options.id) ?
		                A.options.id.indexOf('navigator') === -1 :
		                true
		        ) {
		            var a = (A.isXAxis ? 'yAxis' : 'xAxis'),
		                rax = (
		                    defined(A.options[a]) ?
		                        chart[a][A.options[a]] :
		                        chart[a][0]
		                );

		            if (axis === rax) {
		                axes.push(A);
		            }
		        }
		    });


		    // Remove duplicates in the axes array. If there are no axes in the axes
		    // array, we are adding an axis without data, so we need to populate this
		    // with grid lines (#2796).
		    uniqueAxes = axes.length ?
		        [] :
		        [axis.isXAxis ? chart.yAxis[0] : chart.xAxis[0]]; // #3742
		    axes.forEach(function (axis2) {
		        if (
		            uniqueAxes.indexOf(axis2) === -1 &&
		            // Do not draw on axis which overlap completely. #5424
		            !H.find(uniqueAxes, function (unique) {
		                return unique.pos === axis2.pos && unique.len === axis2.len;
		            })
		        ) {
		            uniqueAxes.push(axis2);
		        }
		    });

		    transVal = pick(translatedValue, axis.translate(value, null, null, old));
		    if (isNumber(transVal)) {
		        if (axis.horiz) {
		            uniqueAxes.forEach(function (axis2) {
		                var skip;

		                y1 = axis2.pos;
		                y2 = y1 + axis2.len;
		                x1 = x2 = Math.round(transVal + axis.transB);

		                // outside plot area
		                if (
		                    force !== 'pass' &&
		                    (x1 < axisLeft || x1 > axisLeft + axis.width)
		                ) {
		                    if (force) {
		                        x1 = x2 = Math.min(
		                            Math.max(axisLeft, x1),
		                            axisLeft + axis.width
		                        );
		                    } else {
		                        skip = true;
		                    }
		                }
		                if (!skip) {
		                    result.push('M', x1, y1, 'L', x2, y2);
		                }
		            });
		        } else {
		            uniqueAxes.forEach(function (axis2) {
		                var skip;

		                x1 = axis2.pos;
		                x2 = x1 + axis2.len;
		                y1 = y2 = Math.round(axisTop + axis.height - transVal);

		                // outside plot area
		                if (
		                    force !== 'pass' &&
		                    (y1 < axisTop || y1 > axisTop + axis.height)
		                ) {
		                    if (force) {
		                        y1 = y2 = Math.min(
		                            Math.max(axisTop, y1),
		                            axis.top + axis.height
		                        );
		                    } else {
		                        skip = true;
		                    }
		                }
		                if (!skip) {
		                    result.push('M', x1, y1, 'L', x2, y2);
		                }
		            });
		        }
		    }
		    return result.length > 0 ?
		        renderer.crispPolyLine(result, lineWidth || 1) :
		        null; // #3557 getPlotLinePath in regular Highcharts also returns null
		});

		/**
		 * Function to crisp a line with multiple segments
		 *
		 * @private
		 * @function Highcharts.SVGRenderer#crispPolyLine
		 *
		 * @param {Array<number>} points
		 *
		 * @param {number} width
		 *
		 * @return {Array<number>}
		 */
		SVGRenderer.prototype.crispPolyLine = function (points, width) {
		    // points format: ['M', 0, 0, 'L', 100, 0]
		    // normalize to a crisp line
		    var i;
		    for (i = 0; i < points.length; i = i + 6) {
		        if (points[i + 1] === points[i + 4]) {
		            // Substract due to #1129. Now bottom and left axis gridlines behave
		            // the same.
		            points[i + 1] = points[i + 4] =
		                Math.round(points[i + 1]) - (width % 2 / 2);
		        }
		        if (points[i + 2] === points[i + 5]) {
		            points[i + 2] = points[i + 5] =
		                Math.round(points[i + 2]) + (width % 2 / 2);
		        }
		    }
		    return points;
		};
		if (Renderer === VMLRenderer) {
		    VMLRenderer.prototype.crispPolyLine = SVGRenderer.prototype.crispPolyLine;
		}

		// Wrapper to hide the label
		wrap(Axis.prototype, 'hideCrosshair', function (proceed, i) {

		    proceed.call(this, i);

		    if (this.crossLabel) {
		        this.crossLabel = this.crossLabel.hide();
		    }
		});

		// Extend crosshairs to also draw the label
		addEvent(Axis, 'afterDrawCrosshair', function (event) {

		    // Check if the label has to be drawn
		    if (
		        !defined(this.crosshair.label) ||
		        !this.crosshair.label.enabled ||
		        !this.cross
		    ) {
		        return;
		    }

		    var chart = this.chart,
		        options = this.options.crosshair.label,        // the label's options
		        horiz = this.horiz,                            // axis orientation
		        opposite = this.opposite,                    // axis position
		        left = this.left,                            // left position
		        top = this.top,                                // top position
		        crossLabel = this.crossLabel,                // the svgElement
		        posx,
		        posy,
		        crossBox,
		        formatOption = options.format,
		        formatFormat = '',
		        limit,
		        align,
		        tickInside = this.options.tickPosition === 'inside',
		        snap = this.crosshair.snap !== false,
		        value,
		        offset = 0,
		        // Use last available event (#5287)
		        e = event.e || (this.cross && this.cross.e),
		        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') :
		        (this.labelAlign === 'left' ? 'left' : 'center'));

		    // If the label does not exist yet, create it.
		    if (!crossLabel) {
		        crossLabel = this.crossLabel = chart.renderer.label(
		                null,
		                null,
		                null,
		                options.shape || 'callout'
		            )
		            .addClass('highcharts-crosshair-label' + (
		                this.series[0] &&
		                ' highcharts-color-' + this.series[0].colorIndex)
		            )
		            .attr({
		                align: options.align || align,
		                padding: pick(options.padding, 8),
		                r: pick(options.borderRadius, 3),
		                zIndex: 2
		            })
		            .add(this.labelGroup);

		        // Presentational
		        if (!chart.styledMode) {
		            crossLabel
		                .attr({
		                    fill: options.backgroundColor ||
		                        (this.series[0] && this.series[0].color) ||
		                        '#666666',
		                    stroke: options.borderColor || '',
		                    'stroke-width': options.borderWidth || 0
		                })
		                .css(extend({
		                    color: '#ffffff',
		                    fontWeight: 'normal',
		                    fontSize: '11px',
		                    textAlign: 'center'
		                }, options.style));
		        }
		    }

		    if (horiz) {
		        posx = snap ? point.plotX + left : e.chartX;
		        posy = top + (opposite ? 0 : this.height);
		    } else {
		        posx = opposite ? this.width + left : 0;
		        posy = snap ? point.plotY + top : e.chartY;
		    }

		    if (!formatOption && !options.formatter) {
		        if (this.isDatetimeAxis) {
		            formatFormat = '%b %d, %Y';
		        }
		        formatOption =
		            '{value' + (formatFormat ? ':' + formatFormat : '') + '}';
		    }

		    // Show the label
		    value = snap ?
		        point[this.isXAxis ? 'x' : 'y'] :
		        this.toValue(horiz ? e.chartX : e.chartY);

		    crossLabel.attr({
		        text: formatOption ?
		            format(formatOption, { value: value }, chart.time) :
		            options.formatter.call(this, value),
		        x: posx,
		        y: posy,
		        // Crosshair should be rendered within Axis range (#7219)
		        visibility: value < min || value > max ? 'hidden' : 'visible'
		    });

		    crossBox = crossLabel.getBBox();

		    // now it is placed we can correct its position
		    if (horiz) {
		        if ((tickInside && !opposite) || (!tickInside && opposite)) {
		            posy = crossLabel.y - crossBox.height;
		        }
		    } else {
		        posy = crossLabel.y - (crossBox.height / 2);
		    }

		    // check the edges
		    if (horiz) {
		        limit = {
		            left: left - crossBox.x,
		            right: left + this.width - crossBox.x
		        };
		    } else {
		        limit = {
		            left: this.labelAlign === 'left' ? left : 0,
		            right: this.labelAlign === 'right' ?
		                left + this.width :
		                chart.chartWidth
		        };
		    }

		    // left edge
		    if (crossLabel.translateX < limit.left) {
		        offset = limit.left - crossLabel.translateX;
		    }
		    // right edge
		    if (crossLabel.translateX + crossBox.width >= limit.right) {
		        offset = -(crossLabel.translateX + crossBox.width - limit.right);
		    }

		    // show the crosslabel
		    crossLabel.attr({
		        x: posx + offset,
		        y: posy,
		        // First set x and y, then anchorX and anchorY, when box is actually
		        // calculated, #5702
		        anchorX: horiz ?
		            posx :
		            (this.opposite ? 0 : chart.chartWidth),
		        anchorY: horiz ?
		            (this.opposite ? chart.chartHeight : 0) :
		            posy + crossBox.height / 2
		    });
		});

		/* ************************************************************************** *
		 *  Start value compare logic                                                 *
		 * ************************************************************************** */

		/**
		 * Extend series.init by adding a method to modify the y value used for plotting
		 * on the y axis. This method is called both from the axis when finding dataMin
		 * and dataMax, and from the series.translate method.
		 *
		 * @ignore
		 * @function Highcharts.Series#init
		 */
		seriesProto.init = function () {

		    // Call base method
		    seriesInit.apply(this, arguments);

		    // Set comparison mode
		    this.setCompare(this.options.compare);
		};

		/**
		 * Highstock only. Set the
		 * [compare](https://api.highcharts.com/highstock/plotOptions.series.compare)
		 * mode of the series after render time. In most cases it is more useful running
		 * {@link Axis#setCompare} on the X axis to update all its series.
		 *
		 * @function Highcharts.Series#setCompare
		 *
		 * @param {string} compare
		 *        Can be one of `null`, `"percent"` or `"value"`.
		 */
		seriesProto.setCompare = function (compare) {

		    // Set or unset the modifyValue method
		    this.modifyValue = (compare === 'value' || compare === 'percent') ?
		        function (value, point) {
		            var compareValue = this.compareValue;

		            if (
		                value !== undefined &&
		                compareValue !== undefined
		            ) { // #2601, #5814

		                // Get the modified value
		                if (compare === 'value') {
		                    value -= compareValue;

		                // Compare percent
		                } else {
		                    value = 100 * (value / compareValue) -
		                        (this.options.compareBase === 100 ? 0 : 100);
		                }

		                // record for tooltip etc.
		                if (point) {
		                    point.change = value;
		                }

		                return value;
		            }
		        } :
		        null;

		    // Survive to export, #5485
		    this.userOptions.compare = compare;

		    // Mark dirty
		    if (this.chart.hasRendered) {
		        this.isDirty = true;
		    }

		};

		/**
		 * Extend series.processData by finding the first y value in the plot area,
		 * used for comparing the following values
		 *
		 * @ignore
		 * @function Highcharts.Series#processData
		 */
		seriesProto.processData = function () {
		    var series = this,
		        i,
		        keyIndex = -1,
		        processedXData,
		        processedYData,
		        compareStart = series.options.compareStart === true ? 0 : 1,
		        length,
		        compareValue;

		    // call base method
		    seriesProcessData.apply(this, arguments);

		    if (series.xAxis && series.processedYData) { // not pies

		        // local variables
		        processedXData = series.processedXData;
		        processedYData = series.processedYData;
		        length = processedYData.length;

		        // For series with more than one value (range, OHLC etc), compare
		        // against close or the pointValKey (#4922, #3112)
		        if (series.pointArrayMap) {
		            // Use close if present (#3112)
		            keyIndex = series.pointArrayMap.indexOf('close');
		            if (keyIndex === -1) {
		                keyIndex = series.pointArrayMap.indexOf(
		                    series.pointValKey || 'y');
		            }
		        }

		        // find the first value for comparison
		        for (i = 0; i < length - compareStart; i++) {
		            compareValue = processedYData[i] && keyIndex > -1 ?
		                processedYData[i][keyIndex] :
		                processedYData[i];
		            if (
		                isNumber(compareValue) &&
		                processedXData[i + compareStart] >= series.xAxis.min &&
		                compareValue !== 0
		            ) {
		                series.compareValue = compareValue;
		                break;
		            }
		        }
		    }
		};

		// Modify series extremes
		wrap(seriesProto, 'getExtremes', function (proceed) {
		    var extremes;

		    proceed.apply(this, [].slice.call(arguments, 1));

		    if (this.modifyValue) {
		        extremes = [
		            this.modifyValue(this.dataMin),
		            this.modifyValue(this.dataMax)
		        ];
		        this.dataMin = arrayMin(extremes);
		        this.dataMax = arrayMax(extremes);
		    }
		});

		/**
		 * Highstock only. Set the compare mode on all series belonging to an Y axis
		 * after render time.
		 *
		 * @see [series.plotOptions.compare](https://api.highcharts.com/highstock/series.plotOptions.compare)
		 *
		 * @sample stock/members/axis-setcompare/
		 *         Set compoare
		 *
		 * @function Highcharts.Axis#setCompare
		 *
		 * @param {string} compare
		 *        The compare mode. Can be one of `null`, `"value"` or `"percent"`.
		 *
		 * @param {boolean} [redraw=true]
		 *        Whether to redraw the chart or to wait for a later call to
		 *        {@link Chart#redraw}.
		 */
		Axis.prototype.setCompare = function (compare, redraw) {
		    if (!this.isXAxis) {
		        this.series.forEach(function (series) {
		            series.setCompare(compare);
		        });
		        if (pick(redraw, true)) {
		            this.chart.redraw();
		        }
		    }
		};

		/**
		 * Extend the tooltip formatter by adding support for the point.change variable
		 * as well as the changeDecimals option.
		 *
		 * @ignore
		 * @function Highcharts.Point#tooltipFormatter
		 *
		 * @param {string} pointFormat
		 */
		Point.prototype.tooltipFormatter = function (pointFormat) {
		    var point = this;

		    pointFormat = pointFormat.replace(
		        '{point.change}',
		        (point.change > 0 ? '+' : '') + H.numberFormat(
		            point.change,
		            pick(point.series.tooltipOptions.changeDecimals, 2)
		        )
		    );

		    return pointTooltipFormatter.apply(this, [pointFormat]);
		};

		/* ************************************************************************** *
		 *  End value compare logic                                                   *
		 * ************************************************************************** */


		// Extend the Series prototype to create a separate series clip box. This is
		// related to using multiple panes, and a future pane logic should incorporate
		// this feature (#2754).
		wrap(Series.prototype, 'render', function (proceed) {
		    var clipHeight;
		    // Only do this on not 3d (#2939, #5904) nor polar (#6057) charts, and only
		    // if the series type handles clipping in the animate method (#2975).
		    if (
		        !(this.chart.is3d && this.chart.is3d()) &&
		        !this.chart.polar &&
		        this.xAxis &&
		        !this.xAxis.isRadial // Gauge, #6192
		    ) {
		        // Include xAxis line width, #8031
		        clipHeight = this.yAxis.len - (this.xAxis.axisLine ?
		            Math.floor(this.xAxis.axisLine.strokeWidth() / 2) :
		            0);

		        // First render, initial clip box
		        if (!this.clipBox && this.animate) {
		            this.clipBox = merge(this.chart.clipBox);
		            this.clipBox.width = this.xAxis.len;
		            this.clipBox.height = clipHeight;

		        // On redrawing, resizing etc, update the clip rectangle
		        } else if (this.chart[this.sharedClipKey]) {
		            this.chart[this.sharedClipKey].attr({
		                width: this.xAxis.len,
		                height: clipHeight
		            });
		        // #3111
		        } else if (this.clipBox) {
		            this.clipBox.width = this.xAxis.len;
		            this.clipBox.height = clipHeight;
		        }
		    }
		    proceed.call(this);
		});

		wrap(Chart.prototype, 'getSelectedPoints', function (proceed) {
		    var points = proceed.call(this);

		    this.series.forEach(function (serie) {
		        // series.points - for grouped points (#6445)
		        if (serie.hasGroupedData) {
		            points = points.concat((serie.points || []).filter(
		                function (point) {
		                    return point.selected;
		                }
		            ));
		        }
		    });
		    return points;
		});

		addEvent(Chart, 'update', function (e) {
		    var options = e.options;
		    // Use case: enabling scrollbar from a disabled state.
		    // Scrollbar needs to be initialized from a controller, Navigator in this
		    // case (#6615)
		    if ('scrollbar' in options && this.navigator) {
		        merge(true, this.options.scrollbar, options.scrollbar);
		        this.navigator.update({}, false);
		        delete options.scrollbar;
		    }
		});

	}(Highcharts));
	(function (H) {
		/**
		 * (c) 2010-2018 Torstein Honsi
		 *
		 * License: www.highcharts.com/license
		 */



		var charts = H.charts,
		    extend = H.extend,
		    noop = H.noop,
		    pick = H.pick,
		    Pointer = H.Pointer;

		// Support for touch devices
		extend(Pointer.prototype, /** @lends Pointer.prototype */ {

		    /**
		     * Run translation operations
		     *
		     * @private
		     * @function Highcharts.Pointer#pinchTranslate
		     *
		     * @param {Array<*>} pinchDown
		     *
		     * @param {Array<*>} touches
		     *
		     * @param {*} transform
		     *
		     * @param {*} selectionMarker
		     *
		     * @param {*} clip
		     *
		     * @param {*} lastValidTouch
		     */
		    pinchTranslate: function (
		        pinchDown,
		        touches,
		        transform,
		        selectionMarker,
		        clip,
		        lastValidTouch
		    ) {
		        if (this.zoomHor) {
		            this.pinchTranslateDirection(
		                true,
		                pinchDown,
		                touches,
		                transform,
		                selectionMarker,
		                clip,
		                lastValidTouch
		            );
		        }
		        if (this.zoomVert) {
		            this.pinchTranslateDirection(
		                false,
		                pinchDown,
		                touches,
		                transform,
		                selectionMarker,
		                clip,
		                lastValidTouch
		            );
		        }
		    },

		    /**
		     * Run translation operations for each direction (horizontal and vertical)
		     * independently.
		     *
		     * @private
		     * @function Highcharts.Pointer#pinchTranslateDirection
		     *
		     * @param {boolean} horiz
		     *
		     * @param {Array<*>} pinchDown
		     *
		     * @param {Array<*>} touches
		     *
		     * @param {*} transform
		     *
		     * @param {*} selectionMarker
		     *
		     * @param {*} clip
		     *
		     * @param {*} lastValidTouch
		     *
		     * @param {number|undefined} [forcedScale=1]
		     */
		    pinchTranslateDirection: function (
		        horiz,
		        pinchDown,
		        touches,
		        transform,
		        selectionMarker,
		        clip,
		        lastValidTouch,
		        forcedScale
		    ) {
		        var chart = this.chart,
		            xy = horiz ? 'x' : 'y',
		            XY = horiz ? 'X' : 'Y',
		            sChartXY = 'chart' + XY,
		            wh = horiz ? 'width' : 'height',
		            plotLeftTop = chart['plot' + (horiz ? 'Left' : 'Top')],
		            selectionWH,
		            selectionXY,
		            clipXY,
		            scale = forcedScale || 1,
		            inverted = chart.inverted,
		            bounds = chart.bounds[horiz ? 'h' : 'v'],
		            singleTouch = pinchDown.length === 1,
		            touch0Start = pinchDown[0][sChartXY],
		            touch0Now = touches[0][sChartXY],
		            touch1Start = !singleTouch && pinchDown[1][sChartXY],
		            touch1Now = !singleTouch && touches[1][sChartXY],
		            outOfBounds,
		            transformScale,
		            scaleKey,
		            setScale = function () {
		                // Don't zoom if fingers are too close on this axis
		                if (!singleTouch && Math.abs(touch0Start - touch1Start) > 20) {
		                    scale = forcedScale ||
		                        Math.abs(touch0Now - touch1Now) /
		                        Math.abs(touch0Start - touch1Start);
		                }

		                clipXY = ((plotLeftTop - touch0Now) / scale) + touch0Start;
		                selectionWH = chart['plot' + (horiz ? 'Width' : 'Height')] /
		                    scale;
		            };

		        // Set the scale, first pass
		        setScale();

		        // The clip position (x or y) is altered if out of bounds, the selection
		        // position is not
		        selectionXY = clipXY;

		        // Out of bounds
		        if (selectionXY < bounds.min) {
		            selectionXY = bounds.min;
		            outOfBounds = true;
		        } else if (selectionXY + selectionWH > bounds.max) {
		            selectionXY = bounds.max - selectionWH;
		            outOfBounds = true;
		        }

		        // Is the chart dragged off its bounds, determined by dataMin and
		        // dataMax?
		        if (outOfBounds) {

		            // Modify the touchNow position in order to create an elastic drag
		            // movement. This indicates to the user that the chart is responsive
		            // but can't be dragged further.
		            touch0Now -= 0.8 * (touch0Now - lastValidTouch[xy][0]);
		            if (!singleTouch) {
		                touch1Now -= 0.8 * (touch1Now - lastValidTouch[xy][1]);
		            }

		            // Set the scale, second pass to adapt to the modified touchNow
		            // positions
		            setScale();

		        } else {
		            lastValidTouch[xy] = [touch0Now, touch1Now];
		        }

		        // Set geometry for clipping, selection and transformation
		        if (!inverted) {
		            clip[xy] = clipXY - plotLeftTop;
		            clip[wh] = selectionWH;
		        }
		        scaleKey = inverted ? (horiz ? 'scaleY' : 'scaleX') : 'scale' + XY;
		        transformScale = inverted ? 1 / scale : scale;

		        selectionMarker[wh] = selectionWH;
		        selectionMarker[xy] = selectionXY;
		        transform[scaleKey] = scale;
		        transform['translate' + XY] = (transformScale * plotLeftTop) +
		            (touch0Now - (transformScale * touch0Start));
		    },

		    /**
		     * Handle touch events with two touches
		     *
		     * @private
		     * @function Highcharts.Pointer#pinch
		     *
		     * @param {Highcharts.PointerEvent} e
		     */
		    pinch: function (e) {

		        var self = this,
		            chart = self.chart,
		            pinchDown = self.pinchDown,
		            touches = e.touches,
		            touchesLength = touches.length,
		            lastValidTouch = self.lastValidTouch,
		            hasZoom = self.hasZoom,
		            selectionMarker = self.selectionMarker,
		            transform = {},
		            fireClickEvent = touchesLength === 1 && (
		                (
		                    self.inClass(e.target, 'highcharts-tracker') &&
		                    chart.runTrackerClick
		                ) ||
		                self.runChartClick
		            ),
		            clip = {};

		        // Don't initiate panning until the user has pinched. This prevents us
		        // from blocking page scrolling as users scroll down a long page
		        // (#4210).
		        if (touchesLength > 1) {
		            self.initiated = true;
		        }

		        // On touch devices, only proceed to trigger click if a handler is
		        // defined
		        if (hasZoom && self.initiated && !fireClickEvent) {
		            e.preventDefault();
		        }

		        // Normalize each touch
		        [].map.call(touches, function (e) {
		            return self.normalize(e);
		        });

		        // Register the touch start position
		        if (e.type === 'touchstart') {
		            [].forEach.call(touches, function (e, i) {
		                pinchDown[i] = { chartX: e.chartX, chartY: e.chartY };
		            });
		            lastValidTouch.x = [pinchDown[0].chartX, pinchDown[1] &&
		                pinchDown[1].chartX];
		            lastValidTouch.y = [pinchDown[0].chartY, pinchDown[1] &&
		                pinchDown[1].chartY];

		            // Identify the data bounds in pixels
		            chart.axes.forEach(function (axis) {
		                if (axis.zoomEnabled) {
		                    var bounds = chart.bounds[axis.horiz ? 'h' : 'v'],
		                        minPixelPadding = axis.minPixelPadding,
		                        min = axis.toPixels(
		                            pick(axis.options.min, axis.dataMin)
		                        ),
		                        max = axis.toPixels(
		                            pick(axis.options.max, axis.dataMax)
		                        ),
		                        absMin = Math.min(min, max),
		                        absMax = Math.max(min, max);

		                    // Store the bounds for use in the touchmove handler
		                    bounds.min = Math.min(axis.pos, absMin - minPixelPadding);
		                    bounds.max = Math.max(
		                        axis.pos + axis.len,
		                        absMax + minPixelPadding
		                    );
		                }
		            });
		            self.res = true; // reset on next move

		        // Optionally move the tooltip on touchmove
		        } else if (self.followTouchMove && touchesLength === 1) {
		            this.runPointActions(self.normalize(e));

		        // Event type is touchmove, handle panning and pinching
		        } else if (pinchDown.length) { // can be 0 when releasing, if touchend
		                // fires first


		            // Set the marker
		            if (!selectionMarker) {
		                self.selectionMarker = selectionMarker = extend({
		                    destroy: noop,
		                    touch: true
		                }, chart.plotBox);
		            }

		            self.pinchTranslate(
		                pinchDown,
		                touches,
		                transform,
		                selectionMarker,
		                clip,
		                lastValidTouch
		            );

		            self.hasPinched = hasZoom;

		            // Scale and translate the groups to provide visual feedback during
		            // pinching
		            self.scaleGroups(transform, clip);

		            if (self.res) {
		                self.res = false;
		                this.reset(false, 0);
		            }
		        }
		    },

		    /**
		     * General touch handler shared by touchstart and touchmove.
		     *
		     * @private
		     * @function Highcharts.Pointer#touch
		     *
		     * @param {Highcharts.PointerEvent} e
		     *
		     * @param {boolean} start
		     */
		    touch: function (e, start) {
		        var chart = this.chart,
		            hasMoved,
		            pinchDown,
		            isInside;

		        if (chart.index !== H.hoverChartIndex) {
		            this.onContainerMouseLeave({ relatedTarget: true });
		        }
		        H.hoverChartIndex = chart.index;

		        if (e.touches.length === 1) {

		            e = this.normalize(e);

		            isInside = chart.isInsidePlot(
		                e.chartX - chart.plotLeft,
		                e.chartY - chart.plotTop
		            );
		            if (isInside && !chart.openMenu) {

		                // Run mouse events and display tooltip etc
		                if (start) {
		                    this.runPointActions(e);
		                }

		                // Android fires touchmove events after the touchstart even if
		                // the finger hasn't moved, or moved only a pixel or two. In iOS
		                // however, the touchmove doesn't fire unless the finger moves
		                // more than ~4px. So we emulate this behaviour in Android by
		                // checking how much it moved, and cancelling on small
		                // distances. #3450.
		                if (e.type === 'touchmove') {
		                    pinchDown = this.pinchDown;
		                    hasMoved = pinchDown[0] ? Math.sqrt( // #5266
		                        Math.pow(pinchDown[0].chartX - e.chartX, 2) +
		                        Math.pow(pinchDown[0].chartY - e.chartY, 2)
		                    ) >= 4 : false;
		                }

		                if (pick(hasMoved, true)) {
		                    this.pinch(e);
		                }

		            } else if (start) {
		                // Hide the tooltip on touching outside the plot area (#1203)
		                this.reset();
		            }

		        } else if (e.touches.length === 2) {
		            this.pinch(e);
		        }
		    },

		    /**
		     * @private
		     * @function Highcharts.Pointer#onContainerTouchStart
		     *
		     * @param {Highcharts.PointerEvent} e
		     */
		    onContainerTouchStart: function (e) {
		        this.zoomOption(e);
		        this.touch(e, true);
		    },

		    /**
		     * @private
		     * @function Highcharts.Pointer#onContainerTouchMove
		     *
		     * @param {Highcharts.PointerEvent} e
		     */
		    onContainerTouchMove: function (e) {
		        this.touch(e);
		    },

		    /**
		     * @private
		     * @function Highcharts.Pointer#onDocumentTouchEnd
		     *
		     * @param {Highcharts.PointerEvent} e
		     */
		    onDocumentTouchEnd: function (e) {
		        if (charts[H.hoverChartIndex]) {
		            charts[H.hoverChartIndex].pointer.drop(e);
		        }
		    }

		});

	}(Highcharts));
	return (function (Highcharts) {


		return Highcharts;
	}(Highcharts));
}));