ShWasher/src_0nline/ShwasherSys/ShwasherSys.Web/Content/Plugins/Highcharts/modules/annotations.src.js

/**
 * @license Highcharts JS v6.1.0 (2018-04-13)
 * Annotations module
 *
 * (c) 2009-2017 Torstein Honsi
 *
 * License: www.highcharts.com/license
 */
'use strict';
(function (factory) {
	if (typeof module === 'object' && module.exports) {
		module.exports = factory;
	} else {
		factory(Highcharts);
	}
}(function (Highcharts) {
	(function (H) {
		/**
		 * (c) 2009-2017 Highsoft, Black Label
		 *
		 * License: www.highcharts.com/license
		 */

		var    merge = H.merge,
		    addEvent = H.addEvent,
		    extend = H.extend,
		    each = H.each,
		    isString = H.isString,
		    isNumber = H.isNumber,
		    defined = H.defined,
		    isObject = H.isObject,
		    inArray = H.inArray,
		    erase = H.erase,
		    find = H.find,
		    format = H.format,
		    pick = H.pick,
		    objectEach = H.objectEach,
		    uniqueKey = H.uniqueKey,
		    doc = H.doc,
		    splat = H.splat,
		    destroyObjectProperties = H.destroyObjectProperties,
		    grep = H.grep,

		    tooltipPrototype = H.Tooltip.prototype,
		    seriesPrototype = H.Series.prototype,
		    chartPrototype = H.Chart.prototype;


		/* ***************************************************************************
		*
		* MARKER SECTION
		* Contains objects and functions for adding a marker element to a path element
		*
		**************************************************************************** */

		/**
		 * Options for configuring markers for annotations.
		 *
		 * An example of the arrow marker:
		 * <pre>
		 * {
		 *   arrow: {
		 *     id: 'arrow',
		 *     tagName: 'marker',
		 *     refY: 5,
		 *     refX: 5,
		 *     markerWidth: 10,
		 *     markerHeight: 10,
		 *     children: [{
		 *       tagName: 'path',
		 *       attrs: {
		 *         d: 'M 0 0 L 10 5 L 0 10 Z',
		 *         strokeWidth: 0
		 *       }
		 *     }]
		 *   }
		 * }
		 * </pre>
		 * @type {Object}
		 * @sample highcharts/annotations/custom-markers/
		 *         Define a custom marker for annotations
		 * @sample highcharts/css/annotations-markers/
		 *         Define markers in a styled mode
		 * @since 6.0.0
		 * @apioption defs
		 */
		var defaultMarkers = {
		    arrow: {
		        tagName: 'marker',
		        render: false,
		        id: 'arrow',
		        refY: 5,
		        refX: 5,
		        markerWidth: 10,
		        markerHeight: 10,
		        children: [{
		            tagName: 'path',
		            d: 'M 0 0 L 10 5 L 0 10 Z', // triangle (used as an arrow)
            
		            strokeWidth: 0
            
		        }]
		    }
		};

		var MarkerMixin = {
		    markerSetter: function (markerType) {
		        return function (value) {
		            this.attr(markerType, 'url(#' + value + ')');
		        };
		    }
		};

		extend(MarkerMixin, {
		    markerEndSetter: MarkerMixin.markerSetter('marker-end'),
		    markerStartSetter: MarkerMixin.markerSetter('marker-start')
		});


		// In a styled mode definition is implemented
		H.SVGRenderer.prototype.definition = function (def) {
		    var ren = this;

		    function recurse(config, parent) {
		        var ret;
		        each(splat(config), 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);
		};


		H.SVGRenderer.prototype.addMarker = function (id, markerOptions) {
		    var options = { id: id };

    
		    var attrs  = {
		        stroke: markerOptions.color || 'none',
		        fill: markerOptions.color || 'rgba(0, 0, 0, 0.75)'
		    };

		    options.children = H.map(markerOptions.children, function (child) {
		        return merge(attrs, child);
		    });
    

		    var marker = this.definition(merge({
		        markerWidth: 20,
		        markerHeight: 20,
		        refX: 0,
		        refY: 0,
		        orient: 'auto'
		    }, markerOptions, options));

		    marker.id = id;

		    return marker;
		};


		/* ***************************************************************************
		*
		* MOCK POINT
		*
		**************************************************************************** */

		/**
		 * A mock point configuration.
		 *
		 * @typedef {Object} MockPointOptions
		 * @property {Number} x - x value for the point in xAxis scale or pixels
		 * @property {Number} y - y value for the point in yAxis scale or pixels
		 * @property {String|Number} [xAxis] - xAxis index or id
		 * @property {String|Number} [yAxis] - yAxis index or id
		 */


		/**
		 * A trimmed point object which imitates {@link Highchart.Point} class.
		 * It is created when there is a need of pointing to some chart's position
		 * using axis values or pixel values
		 *
		 * @class MockPoint
		 * @memberOf Highcharts
		 * @private
		 *
		 * @param {Highcharts.Chart} - the chart object
		 * @param {MockPointOptions} - the options object
		 */
		var MockPoint = H.MockPoint = function (chart, options) {
		    this.mock = true;
		    this.series = {
		        visible: true,
		        chart: chart,
		        getPlotBox: seriesPrototype.getPlotBox
		    };

		    // this.plotX
		    // this.plotY

		    /* Those might not exist if a specific axis was not found/defined */
		    // this.x?
		    // this.y?

		    this.init(chart, options);
		};

		/**
		 * A factory function for creating a mock point object
		 *
		 * @function #mockPoint
		 * @memberOf Highcharts
		 *
		 * @param {MockPointOptions} mockPointOptions
		 * @return {MockPoint} a mock point
		 */
		var mockPoint = H.mockPoint = function (chart, mockPointOptions) {
		    return new MockPoint(chart, mockPointOptions);
		};

		MockPoint.prototype = {
		    /**
		     * Initialisation of the mock point
		     *
		     * @function init
		     * @memberOf Highcharts.MockPoint#
		     *
		     * @param {Highcharts.Chart} chart - a chart object to which the mock point
		     * is attached
		     * @param {MockPointOptions} options - a config for the mock point
		     */
		    init: function (chart, options) {
		        var xAxisId = options.xAxis,
		            xAxis = defined(xAxisId) ?
		                chart.xAxis[xAxisId] || chart.get(xAxisId) :
		                null,

		            yAxisId = options.yAxis,
		            yAxis = defined(yAxisId) ?
		                chart.yAxis[yAxisId] || chart.get(yAxisId) :
		                null;


		        if (xAxis) {
		            this.x = options.x;
		            this.series.xAxis = xAxis;
		        } else {
		            this.plotX = options.x;
		        }

		        if (yAxis) {
		            this.y = options.y;
		            this.series.yAxis = yAxis;
		        } else {
		            this.plotY = options.y;
		        }
		    },

		    /**
		     * Update of the point's coordinates (plotX/plotY)
		     *
		     * @function translate
		     * @memberOf Highcharts.MockPoint#
		     *
		     * @return {undefined}
		     */
		    translate: function () {
		        var series = this.series,
		            xAxis = series.xAxis,
		            yAxis = series.yAxis;

		        if (xAxis) {
		            this.plotX = xAxis.toPixels(this.x, true);
		        }

		        if (yAxis) {
		            this.plotY = yAxis.toPixels(this.y, true);
		        }

		        this.isInside = this.isInsidePane();
		    },

		    /**
		     * Returns a box to which an item can be aligned to
		     *
		     * @function #alignToBox
		     * @memberOf Highcharts.MockPoint#
		     *
		     * @param {Boolean} [forceTranslate=false] - whether to update the point's
		     * coordinates
		     * @return {Array.<Number>} A quadruple of numbers which denotes x, y,
		     * width and height of the box
		    **/
		    alignToBox: function (forceTranslate) {
		        if (forceTranslate) {
		            this.translate();
		        }

		        var x = this.plotX,
		            y = this.plotY,
		            temp;


		        if (this.series.chart.inverted) {
		            temp = x;
		            x = y;
		            y = temp;
		        }

		        return [x, y, 0, 0];
		    },

		    /**
		     * Returns a label config object -
		     * the same as Highcharts.Point.prototype.getLabelConfig
		     *
		     * @function getLabelConfig
		     * @memberOf Highcharts.MockPoint#
		     *
		     * @return {Object} labelConfig - label config object
		     * @return {Number|undefined} labelConfig.x
		     *         X value translated to x axis scale
		     * @return {Number|undefined} labelConfig.y
		     *         Y value translated to y axis scale
		     * @return {MockPoint} labelConfig.point
		     *         The instance of the point
		     */
		    getLabelConfig: function () {
		        return {
		            x: this.x,
		            y: this.y,
		            point: this
		        };
		    },

		    isInsidePane: function () {
		        var    plotX = this.plotX,
		            plotY = this.plotY,
		            xAxis = this.series.xAxis,
		            yAxis = this.series.yAxis,
		            isInside = true;

		        if (xAxis) {
		            isInside = defined(plotX) && plotX >= 0 && plotX <= xAxis.len;
		        }

		        if (yAxis) {
		            isInside =
		                isInside &&
		                defined(plotY) &&
		                plotY >= 0 && plotY <= yAxis.len;
		        }

		        return isInside;
		    }
		};


		/* ***************************************************************************
		*
		* ANNOTATION
		*
		**************************************************************************** */

		H.defaultOptions.annotations = [];

		/**
		 * An annotation class which serves as a container for items like labels or
		 * shapes. Created items are positioned on the chart either by linking them to
		 * existing points or created mock points
		 *
		 * @class Annotation
		 * @memberOf Highcharts
		 *
		 * @param {Chart} - the chart object
		 * @param {AnnotationOptions} - the options object
		 */
		var Annotation = H.Annotation = function (chart, userOptions) {

		    /**
		     * The chart that the annotation belongs to.
		     *
		     * @name chart
		     * @memberOf Highcharts.Annotation#
		     * @type {Chart}
		     */
		    this.chart = chart;

		    /**
		     * The array of labels which belong to the annotation.
		     *
		     * @name labels
		     * @memberOf Highcharts.Annotation#
		     * @type {Array<Highcharts.SVGElement>}
		     */
		    this.labels = [];

		    /**
		     * The array of shapes which belong to the annotation.
		     *
		     * @name shapes
		     * @memberOf Highcharts.Annotation#
		     * @type {Array<Highcharts.SVGElement>}
		     */
		    this.shapes = [];

		    /**
		     * The options for the annotations. It containers user defined options
		     * merged with the default options.
		     *
		     * @name options
		     * @memberOf Highcharts.Annotation#
		     * @type {AnnotationOptions}
		     */
		    this.options = merge(this.defaultOptions, userOptions);

		    /**
		     * The callback that reports to the overlapping-labels module which
		     * labels it should account for.
		     *
		     * @name labelCollector
		     * @memberOf Highcharts.Annotation#
		     * @type {Function}
		     * @private
		     */

		    /**
		     * The group element of the annotation.
		     *
		     * @name group
		     * @memberOf Highcharts.Annotation#
		     * @type {Highcharts.SVGElement}
		     * @private
		     */

		    /**
		     * The group element of the annotation's shapes.
		     *
		     * @name shapesGroup
		     * @memberOf Highcharts.Annotation#
		     * @type {Highcharts.SVGElement}
		     * @private
		     */

		    /**
		     * The group element of the annotation's labels.
		     *
		     * @name labelsGroup
		     * @memberOf Highcharts.Annotation#
		     * @type {Highcharts.SVGElement}
		     * @private
		     */

		    this.init(chart, userOptions);
		};

		Annotation.prototype = /** @lends Highcharts.Annotation# */ {
		    /**
		     * Shapes which do not have background - the object is used for proper
		     * setting of the contrast color
		     *
		     * @type {Array.<String>}
		     * @private
		     */
		    shapesWithoutBackground: ['connector'],

		    /**
		     * A map object which allows to map options attributes to element
		     * attributes.
		     *
		     * @type {Object}
		     * @private
		     */
		    attrsMap: {
        
		        backgroundColor: 'fill',
		        borderColor: 'stroke',
		        borderWidth: 'stroke-width',
		        dashStyle: 'dashstyle',
		        strokeWidth: 'stroke-width',
		        stroke: 'stroke',
		        fill: 'fill',

        
		        zIndex: 'zIndex',
		        width: 'width',
		        height: 'height',
		        borderRadius: 'r',
		        r: 'r',
		        padding: 'padding'
		    },

		    /**
		     * Options for configuring annotations, for example labels, arrows or
		     * shapes. Annotations can be tied to points, axis coordinates or chart
		     * pixel coordinates.
		     *
		     * @private
		     * @type {Array<Object>}
		     * @sample highcharts/annotations/basic/
		     *         Basic annotations
		     * @sample highcharts/demo/annotations/
		     *         Advanced annotations
		     * @sample highcharts/css/annotations
		     *         Styled mode
		     * @sample {highstock} stock/annotations/fibonacci-retracements
		     *         Custom annotation, Fibonacci retracement
		     * @since 6.0.0
		     * @optionparent annotations
		     */
		    defaultOptions: {

		        /**
		         * Whether the annotation is visible.
		         *
		         * @sample highcharts/annotations/visible/
		         *         Set annotation visibility
		         */
		        visible: true,

		        /**
		         * Options for annotation's labels. Each label inherits options
		         * from the labelOptions object. An option from the labelOptions can be
		         * overwritten by config for a specific label.
		         */
		        labelOptions: {

		            /**
		             * The alignment of the annotation's label. If right,
		             * the right side of the label should be touching the point.
		             *
		             * @validvalue ["left", "center", "right"]
		             * @sample highcharts/annotations/label-position/
		             *         Set labels position
		             */
		            align: 'center',

		            /**
		             * Whether to allow the annotation's labels to overlap.
		             * To make the labels less sensitive for overlapping,
		             * the can be set to 0.
		             *
		             * @sample highcharts/annotations/tooltip-like/
		             *         Hide overlapping labels
		             */
		            allowOverlap: false,

		            /**
		             * The background color or gradient for the annotation's label.
		             *
		             * @type {Color}
		             * @sample highcharts/annotations/label-presentation/
		             *         Set labels graphic options
		             */
		            backgroundColor: 'rgba(0, 0, 0, 0.75)',

		            /**
		             * The border color for the annotation's label.
		             *
		             * @type {Color}
		             * @sample highcharts/annotations/label-presentation/
		             *         Set labels graphic options
		             */
		            borderColor: 'black',

		            /**
		             * The border radius in pixels for the annotaiton's label.
		             *
		             * @sample highcharts/annotations/label-presentation/
		             *         Set labels graphic options
		             */
		            borderRadius: 3,

		            /**
		             * The border width in pixels for the annotation's label
		             *
		             * @sample highcharts/annotations/label-presentation/
		             *         Set labels graphic options
		             */
		            borderWidth: 1,

		            /**
		             * A class name for styling by CSS.
		             *
		             * @sample highcharts/css/annotations
		             *         Styled mode annotations
		             * @since 6.0.5
		             */
		            className: '',

		            /**
		             * Whether to hide the annotation's label that is outside the plot
		             * area.
		             *
		             * @sample highcharts/annotations/label-crop-overflow/
		             *         Crop or justify labels
		             */
		            crop: false,

		            /**
		             * The label's pixel distance from the point.
		             *
		             * @type {Number}
		             * @sample highcharts/annotations/label-position/
		             *         Set labels position
		             * @default undefined
		             * @apioption annotations.labelOptions.distance
		             */

		            /**
		             * A [format](https://www.highcharts.com/docs/chart-concepts/labels-and-string-formatting) string for the data label.
		             *
		             * @type {String}
		             * @see    [plotOptions.series.dataLabels.format](
		             *         plotOptions.series.dataLabels.format.html)
		             * @sample highcharts/annotations/label-text/
		             *         Set labels text
		             * @default undefined
		             * @apioption annotations.labelOptions.format
		             */

		            /**
		             * Alias for the format option.
		             *
		             * @type {String}
		             * @see [format](annotations.labelOptions.format.html)
		             * @sample highcharts/annotations/label-text/
		             *         Set labels text
		             * @default undefined
		             * @apioption annotations.labelOptions.text
		             */

		            /**
		             * Callback JavaScript function to format the annotation's label.
		             * Note that if a `format` or `text` are defined, the format or text
		             * take precedence and the formatter is ignored. `This` refers to a
		             * point object.
		             *
		             * @type {Function}
		             * @sample highcharts/annotations/label-text/
		             *         Set labels text
		             * @default function () {
		             *     return defined(this.y) ? this.y : 'Annotation label';
		             * }
		             */
		            formatter: function () {
		                return defined(this.y) ? this.y : 'Annotation label';
		            },

		            /**
		             * How to handle the annotation's label that flow outside the plot
		             * area. The justify option aligns the label inside the plot area.
		             *
		             * @validvalue ["none", "justify"]
		             * @sample highcharts/annotations/label-crop-overflow/
		             *         Crop or justify labels
		             **/
		            overflow: 'justify',

		            /**
		             * When either the borderWidth or the backgroundColor is set,
		             * this    is the padding within the box.
		             *
		             * @sample highcharts/annotations/label-presentation/
		             *         Set labels graphic options
		             */
		            padding: 5,

		            /**
		             * The shadow of the box. The shadow can be an object configuration
		             * containing `color`, `offsetX`, `offsetY`, `opacity` and `width`.
		             *
		             * @type {Boolean|Object}
		             * @sample highcharts/annotations/label-presentation/
		             *         Set labels graphic options
		             */
		            shadow: false,

		            /**
		             * The name of a symbol to use for the border around the label.
		             * Symbols are predefined functions on the Renderer object.
		             *
		             * @type {String}
		             * @sample highcharts/annotations/shapes/
		             *         Available shapes for labels
		             */
		            shape: 'callout',

		            /**
		             * Styles for the annotation's label.
		             *
		             * @type {CSSObject}
		             * @sample highcharts/annotations/label-presentation/
		             *         Set labels graphic options
		             * @see    [plotOptions.series.dataLabels.style](
		             *         plotOptions.series.dataLabels.style.html)
		             */
		            style: {
		                fontSize: '11px',
		                fontWeight: 'normal',
		                color: 'contrast'
		            },

		            /**
		             * Whether to [use HTML](http://www.highcharts.com/docs/chart-concepts/labels-and-string-formatting#html)
		             * to render the annotation's label.
		              *
		              * @type {Boolean}
		               * @default false
		             */
		            useHTML: false,

		            /**
		             * The vertical alignment of the annotation's label.
		             *
		             * @type {String}
		             * @validvalue ["top", "middle", "bottom"]
		             * @sample highcharts/annotations/label-position/
		             *         Set labels position
		             */
		            verticalAlign: 'bottom',

		            /**
		             * The x position offset of the label relative to the point.
		             * Note that if a `distance` is defined, the distance takes
		             * precedence over `x` and `y` options.
		             *
		             * @sample highcharts/annotations/label-position/
		             *         Set labels position
		             */
		            x: 0,

		            /**
		             * The y position offset of the label relative to the point.
		             * Note that if a `distance` is defined, the distance takes
		             * precedence over `x` and `y` options.
		             *
		             * @sample highcharts/annotations/label-position/
		             *         Set labels position
		             */
		            y: -16
		        },

		        /**
		         * An array of labels for the annotation. For options that apply to
		         * multiple labels, they can be added to the
		         * [labelOptions](annotations.labelOptions.html).
		         *
		         * @type {Array<Object>}
		         * @extends annotations.labelOptions
		         * @apioption annotations.labels
		         */

		        /**
		         * This option defines the point to which the label will be connected.
		         * It can be either the point which exists in the series - it is
		         * referenced by the point's id - or a new point with defined x, y
		         * properies and optionally axes.
		         *
		         * @type {String|Object}
		         * @sample highcharts/annotations/mock-point/
		         *         Attach annotation to a mock point
		         * @apioption annotations.labels.point
		         */

		        /**
		         * The x position of the point. Units can be either in axis
		         * or chart pixel coordinates.
		         *
		         * @type {Number}
		         * @apioption annotations.labels.point.x
		         */

		        /**
		         * The y position of the point. Units can be either in axis
		         * or chart pixel coordinates.
		         *
		         * @type {Number}
		         * @apioption annotations.labels.point.y
		         */

		        /**
		         * This number defines which xAxis the point is connected to. It refers
		         * to either the axis id or the index of the axis in the xAxis array.
		         * If the option is not configured or the axis is not found the point's
		         * x coordinate refers to the chart pixels.
		         *
		         * @type {Number|String}
		         * @apioption annotations.labels.point.xAxis
		         */

		        /**
		         * This number defines which yAxis the point is connected to. It refers
		         * to either the axis id or the index of the axis in the yAxis array.
		         * If the option is not configured or the axis is not found the point's
		         * y coordinate refers to the chart pixels.
		         *
		         * @type {Number|String}
		         * @apioption annotations.labels.point.yAxis
		         */



		        /**
		         * An array of shapes for the annotation. For options that apply to
		         * multiple shapes, then can be added to the
		         * [shapeOptions](annotations.shapeOptions.html).
		         *
		         * @type {Array<Object>}
		         * @extends annotations.shapeOptions
		         * @apioption annotations.shapes
		         */

		        /**
		         * This option defines the point to which the shape will be connected.
		         * It can be either the point which exists in the series - it is
		         * referenced by the point's id - or a new point with defined x, y
		         * properties and optionally axes.
		         *
		         * @type {String|Object}
		         * @extends annotations.labels.point
		         * @apioption annotations.shapes.point
		         */

		        /**
		         * An array of points for the shape. This option is available for shapes
		         * which can use multiple points such as path. A point can be either
		         * a point object or a point's id.
		         *
		         * @type {Array}
		         * @see [annotations.shapes.point](annotations.shapes.point.html)
		         * @apioption annotations.shapes.points
		         */

		        /**
		         * Id of the marker which will be drawn at the final vertex of the path.
		         * Custom markers can be defined in defs property.
		         *
		         * @type {String}
		         * @see [defs.markers](defs.markers.html)
		         * @sample highcharts/annotations/custom-markers/
		         *         Define a custom marker for annotations
		         * @apioption annotations.shapes.markerEnd
		         */

		        /**
		         * Id of the marker which will be drawn at the first vertex of the path.
		         * Custom markers can be defined in defs property.
		         *
		         * @type {String}
		         * @see [defs.markers](defs.markers.html)
		         * @sample {highcharts} highcharts/annotations/custom-markers/
		         *         Define a custom marker for annotations
		          * @apioption annotations.shapes.markerStart
		         */


		        /**
		         * Options for annotation's shapes. Each shape inherits options
		         * from the shapeOptions object. An option from the shapeOptions can be
		         * overwritten by config for a specific shape.
		         *
		         * @type {Object}
		         */
		        shapeOptions: {

		            /**
		             * The width of the shape.
		             *
		             * @type {Number}
		             * @sample highcharts/annotations/shape/
		             *         Basic shape annotation
		             * @apioption annotations.shapeOptions.width
		             **/

		            /**
		             * The height of the shape.
		             *
		             * @type {Number}
		             * @sample highcharts/annotations/shape/
		             *         Basic shape annotation
		             * @apioption annotations.shapeOptions.height
		             */

		            /**
		             * The color of the shape's stroke.
		             *
		             * @type {Color}
		             * @sample highcharts/annotations/shape/
		             *         Basic shape annotation
		             */
		            stroke: 'rgba(0, 0, 0, 0.75)',

		            /**
		             * The pixel stroke width of the shape.
		             *
		             * @sample highcharts/annotations/shape/
		             *         Basic shape annotation
		             */
		            strokeWidth: 1,

		            /**
		             * The color of the shape's fill.
		             *
		             * @type {Color}
		             * @sample highcharts/annotations/shape/
		             *         Basic shape annotation
		             */
		            fill: 'rgba(0, 0, 0, 0.75)',

		            /**
		             * The type of the shape, e.g. circle or rectangle.
		             *
		             * @type {String}
		             * @sample highcharts/annotations/shape/
		             *         Basic shape annotation
		             * @default 'rect'
		             * @apioption annotations.shapeOptions.type
		             */

		            /**
		             * The radius of the shape.
		             *
		             * @sample highcharts/annotations/shape/
		             *         Basic shape annotation
		             */
		            r: 0
		        },

		        /**
		         * The Z index of the annotation.
		         *
		         * @type {Number}
		         * @default 6
		         */
		        zIndex: 6
		    },

		    /**
		     * Initialize the annotation.
		     *
		     * @param {Chart} - the chart
		     * @param {AnnotationOptions} - the user options for the annotation
		     */
		    init: function () {
		        var anno = this;
		        each(this.options.labels || [], this.initLabel, this);
		        each(this.options.shapes || [], this.initShape, this);

		        this.labelCollector = function () {
		            return grep(anno.labels, function (label) {
		                return !label.options.allowOverlap;
		            });
		        };

		        this.chart.labelCollectors.push(this.labelCollector);
		    },

		    /**
		     * Main method for drawing an annotation.
		    **/
		    redraw: function () {
		        if (!this.group) {
		            this.render();
		        }

		        this.redrawItems(this.shapes);
		        this.redrawItems(this.labels);
		    },

		    /**
		     * @private
		     * @param {Array<Object>} items
		    **/
		    redrawItems: function (items) {
		        var i = items.length;

		        // needs a backward loop
		        // labels/shapes array might be modified due to destruction of the item
		        while (i--) {
		            this.redrawItem(items[i]);
		        }
		    },

		    /**
		     * Render the annotation.
		    **/
		    render: function () {
		        var renderer = this.chart.renderer;

		        var group = this.group = renderer.g('annotation')
		            .attr({
		                zIndex: this.options.zIndex,
		                visibility: this.options.visible ? 'visible' : 'hidden'
		            })
		            .add();

		        this.shapesGroup = renderer.g('annotation-shapes').add(group);

		        this.labelsGroup = renderer.g('annotation-labels').attr({
		      // hideOverlappingLabels requires translation
		            translateX: 0,
		            translateY: 0
		        }).add(group);

		        this.shapesGroup.clip(this.chart.plotBoxClip);
		    },

		    /**
		     * Set the annotation's visibility.
		     *
		     * @param {Boolean} [visibility] - Whether to show or hide an annotation.
		     * If the param is omitted, the annotation's visibility is toggled.
		     **/
		    setVisible: function (visibility) {
		        var options = this.options,
		            visible = pick(visibility, !options.visible);

		        this.group.attr({
		            visibility: visible ? 'visible' : 'hidden'
		        });

		        options.visible = visible;
		    },


		    /**
		     * Destroy the annotation. This function does not touch the chart
		     * that the annotation belongs to (all annotations are kept in
		     * the chart.annotations array) - it is recommended to use
		     * {@link Highcharts.Chart#removeAnnotation} instead.
		    **/
		    destroy: function () {
		        var chart = this.chart;

		        erase(this.chart.labelCollectors, this.labelCollector);

		        each(this.labels, function (label) {
		            label.destroy();
		        });

		        each(this.shapes, function (shape) {
		            shape.destroy();
		        });

		        destroyObjectProperties(this, chart);
		    },


		    /* ***********************************************************************
		     * ITEM SECTION
		     * Contains methods for handling a single item in an annotation
		     *********************************************************************** */

		    /**
		     * Initialisation of a single shape
		     *
		     * @private
		     * @param {Object} shapeOptions - a confg object for a single shape
		    **/
		    initShape: function (shapeOptions) {
		        var renderer = this.chart.renderer,
		            options = merge(this.options.shapeOptions, shapeOptions),
		            attr = this.attrsFromOptions(options),

		            type = renderer[options.type] ? options.type : 'rect',
		            shape = renderer[type](0, -9e9, 0, 0);

		        shape.points = [];
		        shape.type = type;
		        shape.options = options;
		        shape.itemType = 'shape';

		        if (type === 'path') {
		            extend(shape, {
		                markerStartSetter: MarkerMixin.markerStartSetter,
		                markerEndSetter: MarkerMixin.markerEndSetter,
		                markerStart: MarkerMixin.markerStart,
		                markerEnd: MarkerMixin.markerEnd
		            });
		        }

		        shape.attr(attr);


		        if (options.className) {
		            shape.addClass(options.className);
		        }

		        this.shapes.push(shape);
		    },

		    /**
		     * Initialisation of a single label
		     *
		     * @private
		     * @param {Object} labelOptions
		    **/
		    initLabel: function (labelOptions) {
		        var options = merge(this.options.labelOptions, labelOptions),
		            attr = this.attrsFromOptions(options),

		            label = this.chart.renderer.label(
		                '',
		                0, -9e9,
		                options.shape,
		                null,
		                null,
		                options.useHTML,
		                null,
		                'annotation-label'
		            );

		        label.points = [];
		        label.options = options;
		        label.itemType = 'label';

		        // Labelrank required for hideOverlappingLabels()
		        label.labelrank = options.labelrank;
		        label.annotation = this;

		        label.attr(attr);

        
		        var style = options.style;
		        if (style.color === 'contrast') {
		            style.color = this.chart.renderer.getContrast(
		                inArray(options.shape, this.shapesWithoutBackground) > -1 ?
		                '#FFFFFF' :
		                options.backgroundColor
		            );
		        }
		        label.css(style).shadow(options.shadow);
        

		        if (options.className) {
		            label.addClass(options.className);
		        }


		        this.labels.push(label);
		    },

		    /**
		     * Redrawing a single item
		     *
		     * @private
		     * @param {SVGElement} item
		     */
		    redrawItem: function (item) {
		        var points = this.linkPoints(item),
		            itemOptions = item.options,
		            text,
		            time = this.chart.time;

		        if (!points.length) {
		            this.destroyItem(item);

		        } else {
		            if (!item.parentGroup) {
		                this.renderItem(item);
		            }

		            if (item.itemType === 'label') {
		                text = itemOptions.format || itemOptions.text;
		                item.attr({
		                    text: text ?
		                        format(text, points[0].getLabelConfig(), time) :
		                        itemOptions.formatter.call(points[0])
		                });
		            }


		            if (item.type === 'path') {
		                this.redrawPath(item);

		            } else {
		                this.alignItem(item, !item.placed);
		            }
		        }
		    },

		    /**
		     * Destroing a single item
		     *
		     * @private
		     * @param {SVGElement} item
		     */
		    destroyItem: function (item) {
		        // erase from shapes or labels array
		        erase(this[item.itemType + 's'], item);
		        item.destroy();
		    },

		    /**
		     * Returns a point object
		     *
		     * @private
		     * @param {Object} pointOptions
		     * @param {Highcharts.MockPoint|Highcharts.Point} point
		     * @return {Highcharts.MockPoint|Highcharts.Point|null} if the point is
		     * found/exists returns this point, otherwise null
		     */
		    pointItem: function (pointOptions, point) {
		        if (!point || point.series === null) {
		            if (isObject(pointOptions)) {
		                point = mockPoint(this.chart, pointOptions);

		            } else if (isString(pointOptions)) {
		                point = this.chart.get(pointOptions) || null;
		            }
		        }

		        return point;
		    },

		    /**
		     * Linking item with the point or points and returning an array of linked
		     * points.
		     *
		     * @private
		     * @param {SVGElement} item
		     * @return {
		     *     Highcharts.Point|
		     *     Highcharts.MockPoint|
		     *     Array<Highcharts.Point|Highcharts.MockPoint>
		     *    }
		     */
		    linkPoints: function (item) {
		        var pointsOptions = (
		                item.options.points ||
		                (item.options.point && H.splat(item.options.point))
		            ),
		            points = item.points,
		            len = pointsOptions && pointsOptions.length,
		            i,
		            point;

		        for (i = 0; i < len; i++) {
		            point = this.pointItem(pointsOptions[i], points[i]);

		            if (!point) {
		                return (item.points = []);
		            }

		            points[i] = point;
		        }

		        return points;
		    },

		    /**
		     * Aligning the item and setting its anchor
		     *
		     * @private
		     * @param {SVGElement} item
		     * @param {Boolean} isNew
		     *        If the label is re-positioned (is not new) it is animated
		     * @return {undefined}
		     */
		    alignItem: function (item, isNew) {
		        var anchor = this.itemAnchor(item, item.points[0]),
		            attrs = this.itemPosition(item, anchor);

		        if (attrs) {
		            item.alignAttr = attrs;
		            item.placed = true;

		            attrs.anchorX = anchor.absolutePosition.x;
		            attrs.anchorY = anchor.absolutePosition.y;

		            item[isNew ? 'attr' : 'animate'](attrs);

		        } else {
		            item.placed = false;

		            item.attr({
		                x: 0,
		                y: -9e9
		            });
		        }
		    },

		    /**
		     * @private
		     */
		    redrawPath: function (pathItem, isNew) {
		        var points = pathItem.points,
		            strokeWidth = pathItem['stroke-width'] || 1,
		            d = ['M'],
		            pointIndex = 0,
		            dIndex = 0,
		            len = points && points.length,
		            crispSegmentIndex,
		            anchor,
		            point,
		            showPath;

		        if (len) {
		            do {
		                point = points[pointIndex];

		                anchor = this.itemAnchor(pathItem, point).absolutePosition;
		                d[++dIndex] = anchor.x;
		                d[++dIndex] = anchor.y;

		                // Crisping line, it might be replaced with
		                // Renderer.prototype.crispLine but it requires creating many
		                // temporary arrays
		                crispSegmentIndex = dIndex % 5;
		                if (crispSegmentIndex === 0) {
		                    if (d[crispSegmentIndex + 1] === d[crispSegmentIndex + 4]) {
		                        d[crispSegmentIndex + 1] = d[crispSegmentIndex + 4] =
		                            Math.round(d[crispSegmentIndex + 1]) -
		                            (strokeWidth % 2 / 2);
		                    }

		                    if (d[crispSegmentIndex + 2] === d[crispSegmentIndex + 5]) {
		                        d[crispSegmentIndex + 2] = d[crispSegmentIndex + 5] =
		                            Math.round(d[crispSegmentIndex + 2]) +
		                            (strokeWidth % 2 / 2);
		                    }
		                }

		                if (pointIndex < len - 1) {
		                    d[++dIndex] = 'L';
		                }

		                showPath = point.series.visible;

		            } while (++pointIndex < len && showPath);
		        }


		        if (showPath) {
		            pathItem[isNew ? 'attr' : 'animate']({
		                d: d
		            });

		        } else {
		            pathItem.attr({
		                d: 'M 0 ' + -9e9
		            });
		        }

		        pathItem.placed = showPath;
		    },

		    /*
		     * @private
		     */
		    renderItem: function (item) {
		        item.add(
		            item.itemType === 'label' ?
		                this.labelsGroup :
		                this.shapesGroup
		        );

		        this.setItemMarkers(item);
		    },

		    /*
		     * @private
		     */
		    setItemMarkers: function (item) {
		        var itemOptions = item.options,
		            chart = this.chart,
		            defs = chart.options.defs,
		            fill = itemOptions.fill,
		            color = defined(fill) && fill !== 'none' ?
		                fill :
		                itemOptions.stroke,


		            setMarker = function (markerType) {
		                var markerId = itemOptions[markerType],
		                    def,
		                    predefinedMarker,
		                    key,
		                    marker;

		                if (markerId) {
		                    for (key in defs) {
		                        def = defs[key];
		                        if (markerId === def.id && def.tagName === 'marker') {
		                            predefinedMarker = def;
		                            break;
		                        }
		                    }

		                    if (predefinedMarker) {
		                        marker = item[markerType] = chart.renderer.addMarker(
		                            (itemOptions.id || uniqueKey()) + '-' +
		                                predefinedMarker.id,
		                            merge(predefinedMarker, { color: color })
		                        );

		                        item.attr(markerType, marker.attr('id'));
		                    }
		                }
		            };

		        each(['markerStart', 'markerEnd'], setMarker);
		    },

		    /**
		     * An object which denotes an anchor position
		     *
		     * @typedef {Object} AnchorPosition
		     * @property {Number} AnchorPosition.x
		     * @property {Number} AnchorPosition.y
		     * @property {Number} AnchorPosition.height
		     * @property {Number} AnchorPosition.width
		     */

		    /**
		     * Returns object which denotes anchor position - relative and absolute
		     *
		     * @private
		     * @param {SVGElement} item
		     * @param {Highcharts.Point|Highcharts.MockPoint} point
		     * @return {Object} anchor
		     * @return {AnchorPosition} anchor.relativePosition
		     *         Relative to the plot area position
		     * @return {AnchorPosition} anchor.absolutePosition
		     *         Absolute position
		     */
		    itemAnchor: function (item, point) {
		        var plotBox = point.series.getPlotBox(),

		            box = point.mock ?
		                point.alignToBox(true) :
		                tooltipPrototype.getAnchor.call({
		                    chart: this.chart
		                }, point),

		            anchor = {
		                x: box[0],
		                y: box[1],
		                height: box[2] || 0,
		                width: box[3] || 0
		            };

		        return {
		            relativePosition: anchor,
		            absolutePosition: merge(anchor, {
		                x: anchor.x + plotBox.translateX,
		                y: anchor.y + plotBox.translateY
		            })
		        };
		    },

		    /**
		     * Returns the item position
		     *
		     * @private
		     * @param {SVGElement} item
		     * @param {AnchorPosition} anchor
		     * @return {Object|null} position
		     * @return {Number} position.x
		     * @return {Number} position.y
		     */
		    itemPosition: function (item, anchor) {
		        var chart = this.chart,
		            point = item.points[0],
		            itemOptions = item.options,
		            anchorAbsolutePosition = anchor.absolutePosition,
		            anchorRelativePosition = anchor.relativePosition,
		            itemPosition,
		            alignTo,
		            itemPosRelativeX,
		            itemPosRelativeY,

		            showItem =
		                point.series.visible &&
		                MockPoint.prototype.isInsidePane.call(point);

		        if (showItem) {

		            if (defined(itemOptions.distance) || itemOptions.positioner) {
		                itemPosition = (
		                    itemOptions.positioner ||
		                    tooltipPrototype.getPosition
		                ).call(
		                    {
		                        chart: chart,
		                        distance: pick(itemOptions.distance, 16)
		                    },
		                    item.width,
		                    item.height,
		                    {
		                        plotX: anchorRelativePosition.x,
		                        plotY: anchorRelativePosition.y,
		                        negative: point.negative,
		                        ttBelow: point.ttBelow,
		                        h: anchorRelativePosition.height ||
		                            anchorRelativePosition.width
		                    }
		                );

		            } else {
		                alignTo = {
		                    x: anchorAbsolutePosition.x,
		                    y: anchorAbsolutePosition.y,
		                    width: 0,
		                    height: 0
		                };

		                itemPosition = this.alignedPosition(
		                    extend(itemOptions, {
		                        width: item.width,
		                        height: item.height
		                    }),
		                    alignTo
		                );

		                if (item.options.overflow === 'justify') {
		                    itemPosition = this.alignedPosition(
		                        this.justifiedOptions(item, itemOptions, itemPosition),
		                        alignTo
		                    );
		                }
		            }


		            if (itemOptions.crop) {
		                itemPosRelativeX = itemPosition.x - chart.plotLeft;
		                itemPosRelativeY = itemPosition.y - chart.plotTop;

		                showItem =
		                    chart.isInsidePlot(itemPosRelativeX, itemPosRelativeY) &&
		                    chart.isInsidePlot(
		                        itemPosRelativeX + item.width,
		                        itemPosRelativeY + item.height
		                    );
		            }
		        }

		        return showItem ? itemPosition : null;
		    },

		    /**
		     * Returns new aligned position based alignment options and box to align to.
		     * It is almost a one-to-one copy from SVGElement.prototype.align
		     * except it does not use and mutate an element
		     *
		     * @private
		     * @param {Object} alignOptions
		     * @param {Object} box
		     * @return {Object} aligned position
		    **/
		    alignedPosition: function (alignOptions, box) {
		        var align = alignOptions.align,
		            vAlign = alignOptions.verticalAlign,
		            x = (box.x || 0) + (alignOptions.x || 0),
		            y = (box.y || 0) + (alignOptions.y || 0),

		            alignFactor,
		            vAlignFactor;

		        if (align === 'right') {
		            alignFactor = 1;
		        } else if (align === 'center') {
		            alignFactor = 2;
		        }
		        if (alignFactor) {
		            x += (box.width - (alignOptions.width || 0)) / alignFactor;
		        }

		        if (vAlign === 'bottom') {
		            vAlignFactor = 1;
		        } else if (vAlign === 'middle') {
		            vAlignFactor = 2;
		        }
		        if (vAlignFactor) {
		            y += (box.height - (alignOptions.height || 0)) / vAlignFactor;
		        }

		        return {
		            x: Math.round(x),
		            y: Math.round(y)
		        };
		    },

		    /**
		     * Returns new alignment options for a label if the label is outside the
		     * plot area. It is almost a one-to-one copy from
		     * Series.prototype.justifyDataLabel except it does not mutate the label and
		     * it works with absolute instead of relative position.
		     *
		     * @private
		     * @param {Object} label
		     * @param {Object} alignOptions
		     * @param {Object} alignAttr
		     * @return {Object} justified options
		    **/
		    justifiedOptions: function (label, alignOptions, alignAttr) {
		        var chart = this.chart,
		            align = alignOptions.align,
		            verticalAlign = alignOptions.verticalAlign,
		            padding = label.box ? 0 : (label.padding || 0),
		            bBox = label.getBBox(),
		            off,

		            options = {
		                align: align,
		                verticalAlign: verticalAlign,
		                x: alignOptions.x,
		                y: alignOptions.y,
		                width: label.width,
		                height: label.height
		            },

		            x = alignAttr.x - chart.plotLeft,
		            y = alignAttr.y - chart.plotTop;

		        // Off left
		        off = x + padding;
		        if (off < 0) {
		            if (align === 'right') {
		                options.align = 'left';
		            } else {
		                options.x = -off;
		            }
		        }

		        // Off right
		        off = x + bBox.width - padding;
		        if (off > chart.plotWidth) {
		            if (align === 'left') {
		                options.align = 'right';
		            } else {
		                options.x = chart.plotWidth - off;
		            }
		        }

		        // Off top
		        off = y + padding;
		        if (off < 0) {
		            if (verticalAlign === 'bottom') {
		                options.verticalAlign = 'top';
		            } else {
		                options.y = -off;
		            }
		        }

		        // Off bottom
		        off = y + bBox.height - padding;
		        if (off > chart.plotHeight) {
		            if (verticalAlign === 'top') {
		                options.verticalAlign = 'bottom';
		            } else {
		                options.y = chart.plotHeight - off;
		            }
		        }

		        return options;
		    },


		    /**
		     * Utility function for mapping item's options to element's attribute
		     *
		     * @private
		     * @param {Object} options
		     * @return {Object} mapped options
		    **/
		    attrsFromOptions: function (options) {
		        var map = this.attrsMap,
		            attrs = {},
		            key,
		            mappedKey;

		        for (key in options) {
		            mappedKey = map[key];
		            if (mappedKey) {
		                attrs[mappedKey] = options[key];
		            }
		        }

		        return attrs;
		    }
		};

		/* ***************************************************************************
		*
		* EXTENDING CHART PROTOTYPE
		*
		**************************************************************************** */

		H.extend(chartPrototype, /** @lends Chart# */ {
		    /**
		     * Add an annotation to the chart after render time.
		     *
		     * @param  {AnnotationOptions} options
		     *         The series options for the new, detailed series.
		     *
		     * @return {Highcharts.Annotation} - The newly generated annotation.
		     */
		    addAnnotation: function (userOptions, redraw) {
		        var annotation = new Annotation(this, userOptions);

		        this.annotations.push(annotation);

		        if (pick(redraw, true)) {
		            annotation.redraw();
		        }

		        return annotation;
		    },

		    /**
		     * Remove an annotation from the chart.
		     *
		     * @param {String} id - The annotation's id.
		     */
		    removeAnnotation: function (id) {
		        var annotations = this.annotations,
		            annotation = find(annotations, function (annotation) {
		                return annotation.options.id === id;
		            });

		        if (annotation) {
		            erase(annotations, annotation);
		            annotation.destroy();
		        }
		    },

		    /**
		     * @private
		     * @memberOf Highcharts.Chart#
		     * @function drawAnnotations
		     */
		    drawAnnotations: function () {
		        var clip = this.plotBoxClip,
		            plotBox = this.plotBox;

		        if (clip) {
		            clip.attr(plotBox);
		        } else {
		            this.plotBoxClip = this.renderer.clipRect(plotBox);
		        }

		        each(this.annotations, function (annotation) {
		            annotation.redraw();
		        });
		    }
		});


		chartPrototype.callbacks.push(function (chart) {
		    chart.annotations = [];

		    each(chart.options.annotations, function (annotationOptions) {
		        chart.addAnnotation(annotationOptions, false);
		    });

		    chart.drawAnnotations();
		    addEvent(chart, 'redraw', chart.drawAnnotations);
		    addEvent(chart, 'destroy', function () {
		        var plotBoxClip = chart.plotBoxClip;

		        if (plotBoxClip && plotBoxClip.destroy) {
		            plotBoxClip.destroy();
		        }
		    });
		});



		addEvent(H.Chart, 'afterGetContainer', function () {
		    this.options.defs = merge(defaultMarkers, this.options.defs || {});

    
		    objectEach(this.options.defs, function (def) {
		        if (def.tagName === 'marker' && def.render !== false) {
		            this.renderer.addMarker(def.id, def);
		        }
		    }, this);
    
		});


		/* ************************************************************************* */

		/**
		 * General symbol definition for labels with connector
		 */
		H.SVGRenderer.prototype.symbols.connector = function (x, y, w, h, options) {
		    var anchorX = options && options.anchorX,
		        anchorY = options && options.anchorY,
		        path,
		        yOffset,
		        lateral = w / 2;

		    if (isNumber(anchorX) && isNumber(anchorY)) {

		        path = ['M', anchorX, anchorY];

		        // Prefer 45 deg connectors
		        yOffset = y - anchorY;
		        if (yOffset < 0) {
		            yOffset = -h - yOffset;
		        }
		        if (yOffset < w) {
		            lateral = anchorX < x + (w / 2) ? yOffset : w - yOffset;
		        }

		        // Anchor below label
		        if (anchorY > y + h) {
		            path.push('L', x + lateral, y + h);

		        // Anchor above label
		        } else if (anchorY < y) {
		            path.push('L', x + lateral, y);

		        // Anchor left of label
		        } else if (anchorX < x) {
		            path.push('L', x, y + h / 2);

		        // Anchor right of label
		        } else if (anchorX > x + w) {
		            path.push('L', x + w, y + h / 2);
		        }
		    }
		    return path || [];
		};

	}(Highcharts));
}));