highcharts-rails 5.0.14 → 6.0.0

data/app/assets/javascripts/highcharts/modules/annotations.js

@@ -1,5 +1,6 @@
 /**
- * @license Highcharts JS v5.0.14 (2017-07-28)
+ * @license Highcharts JS v6.0.0 (2017-10-04)
+ * Annotations module
  *
  * (c) 2009-2017 Torstein Honsi
  *
@@ -15,393 +16,1670 @@
 }(function(Highcharts) {
     (function(H) {
         /**
-         * (c) 2009-2017 Torstein Honsi
+         * (c) 2009-2017 Highsoft, Black Label
          *
          * License: www.highcharts.com/license
          */
 
-        var defined = H.defined,
+        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,
-            isArray = H.isArray,
-            merge = H.merge,
-            Chart = H.Chart,
-            extend = H.extend,
-            each = H.each;
+            erase = H.erase,
+            find = H.find,
+            format = H.format,
+            pick = H.pick,
+            destroyObjectProperties = H.destroyObjectProperties,
+
+            tooltipPrototype = H.Tooltip.prototype,
+            seriesPrototype = H.Series.prototype,
+            chartPrototype = H.Chart.prototype;
 
-        var ALIGN_FACTOR,
-            ALLOWED_SHAPES;
 
-        ALLOWED_SHAPES = ['path', 'rect', 'circle'];
+        /* ***************************************************************************
+         *
+         * MARKER SECTION
+         * Contains objects and functions for adding a marker element to a path element
+         *
+         **************************************************************************** */
 
-        ALIGN_FACTOR = {
-            top: 0,
-            left: 0,
-            center: 0.5,
-            middle: 0.5,
-            bottom: 1,
-            right: 1
+        /**
+         * Options for configuring markers for annotations.
+         *
+         * An example of the arrow marker:
+         * <pre>
+         * {
+         *   arrow: {
+         *     id: 'arrow',
+         *     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
+         * @since 6.0.0
+         * @apioption defs.markers
+         */
+        var defaultMarkers = {
+            arrow: {
+                render: false,
+                id: 'arrow',
+                refY: 5,
+                refX: 5,
+                markerWidth: 10,
+                markerHeight: 10,
+                children: [{
+                    tagName: 'path',
+                    attrs: {
+                        d: 'M 0 0 L 10 5 L 0 10 Z', // triangle (used as an arrow)
+                        strokeWidth: 0
+                    }
+                }]
+            }
         };
 
-        function defaultOptions(shapeType) {
-            var shapeOptions,
-                options;
+        var MarkerMixin = {
+            markerSetter: function(markerType) {
+                return function(value) {
+                    this.attr(markerType, 'url(#' + value + ')');
+                };
+            }
+        };
 
-            options = {
-                xAxis: 0,
-                yAxis: 0,
-                title: {
-                    style: {},
-                    text: '',
-                    x: 0,
-                    y: 0
+        extend(MarkerMixin, {
+            markerEndSetter: MarkerMixin.markerSetter('marker-end'),
+            markerStartSetter: MarkerMixin.markerSetter('marker-start')
+        });
+
+
+        H.SVGRenderer.prototype.addMarker = function(id, markerOptions) {
+            var markerId = pick(id, H.uniqueKey()),
+                marker = this.createElement('marker').attr({
+                    id: markerId,
+                    markerWidth: pick(markerOptions.markerWidth, 20),
+                    markerHeight: pick(markerOptions.markerHeight, 20),
+                    refX: markerOptions.refX || 0,
+                    refY: markerOptions.refY || 0,
+                    orient: markerOptions.orient || 'auto'
+                }).add(this.defs),
+
+                attrs = {
+                    stroke: markerOptions.color || 'none',
+                    fill: markerOptions.color || 'rgba(0, 0, 0, 0.75)'
                 },
-                shape: {
-                    params: {
-                        stroke: '#000000',
-                        fill: 'transparent',
-                        strokeWidth: 2
-                    }
-                }
-            };
+                children = markerOptions.children;
 
-            shapeOptions = {
-                circle: {
-                    params: {
-                        x: 0,
-                        y: 0
-                    }
-                }
-            };
+            marker.id = markerId;
 
-            if (shapeOptions[shapeType]) {
-                options.shape = merge(options.shape, shapeOptions[shapeType]);
-            }
+            each(children, function(child) {
+                this.createElement(child.tagName)
+                    .attr(merge(attrs, child.attrs))
+                    .add(marker);
+            }, this);
 
-            return options;
-        }
+            return marker;
+        };
 
-        function translatePath(d, xAxis, yAxis, xOffset, yOffset) {
-            var len = d.length,
-                i = 0;
 
-            while (i < len) {
-                if (isNumber(d[i]) && isNumber(d[i + 1])) {
-                    d[i] = xAxis.toPixels(d[i]) - xOffset;
-                    d[i + 1] = yAxis.toPixels(d[i + 1]) - yOffset;
-                    i += 2;
-                } else {
-                    i += 1;
-                }
-            }
+        /* ***************************************************************************
+         *
+         * 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
+         *
+         * @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
+            };
 
-            return d;
-        }
+            // this.plotX
+            // this.plotY
 
+            /* Those might not exist if a specific axis was not found/defined */
+            // this.x? 
+            // this.y?
 
-        // Define annotation prototype
-        var Annotation = function() {
-            this.init.apply(this, arguments);
+            this.init(chart, options);
         };
-        Annotation.prototype = {
-            /* 
-             * Initialize the annotation
+
+        /**
+         * 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 shapeType = options.shape && options.shape.type;
+                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;
 
-                this.chart = chart;
-                this.options = merge({}, defaultOptions(shapeType), options);
+
+                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;
+                }
             },
 
-            /*
-             * Render the annotation
+            /**
+             * Update of the point's coordinates (plotX/plotY)
+             * 
+             * @function #translate
+             * @memberOf Highcharts.MockPoint#
+             *
+             * @return {undefined}
              */
-            render: function(redraw) {
-                var annotation = this,
-                    chart = this.chart,
-                    renderer = annotation.chart.renderer,
-                    group = annotation.group,
-                    title = annotation.title,
-                    shape = annotation.shape,
-                    options = annotation.options,
-                    titleOptions = options.title,
-                    shapeOptions = options.shape;
-
-                if (!group) {
-                    group = annotation.group = renderer.g();
+            translate: function() {
+                var series = this.series,
+                    xAxis = series.xAxis,
+                    yAxis = series.yAxis,
+                    plotX = this.plotX,
+                    plotY = this.plotY,
+                    isInside = true;
+
+                if (xAxis) {
+                    this.plotX = plotX = xAxis.toPixels(this.x, true);
+
+                    isInside = plotX >= 0 && plotX <= xAxis.len;
                 }
 
+                if (yAxis) {
+                    this.plotY = plotY = yAxis.toPixels(this.y, true);
 
-                if (!shape && shapeOptions && inArray(shapeOptions.type, ALLOWED_SHAPES) !== -1) {
-                    shape = annotation.shape = renderer[options.shape.type](shapeOptions.params);
-                    shape.add(group);
+                    isInside = isInside && plotY >= 0 && plotY <= yAxis.len;
                 }
 
-                if (!title && titleOptions) {
-                    title = annotation.title = renderer.label(titleOptions);
-                    title.add(group);
+                this.isInside = isInside;
+            },
+
+            /**
+             * 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();
                 }
 
-                group.add(chart.annotations.group);
+                var x = this.plotX,
+                    y = this.plotY,
+                    temp;
 
-                // link annotations to point or series
-                annotation.linkObjects();
 
-                if (redraw !== false) {
-                    annotation.redraw();
+                if (this.series.chart.inverted) {
+                    temp = x;
+                    x = y;
+                    y = temp;
                 }
+
+                return [x, y, 0, 0];
             },
 
-            /*
-             * Redraw the annotation title or shape after options update
+            /**
+             * 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
+                };
+            }
+        };
+
+
+        /* ***************************************************************************
+         *
+         * 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 {Highcharts.Chart} - the chart object
+         * @param {AnnotationOptions} - the options object
+         */
+        var Annotation = H.Annotation = function(chart, userOptions) {
+            this.chart = chart;
+
+            this.labels = [];
+            this.shapes = [];
+
+            this.options = merge(this.defaultOptions, userOptions);
+
+            this.init(chart, userOptions);
+        };
+
+        Annotation.prototype = {
+            /**
+             * Shapes which do not have background - the object is used for proper
+             * setting of the contrast color
+             *
+             * @memberOf Highcharts.Annotation#
+             * @type {Array.<String>}
              */
+            shapesWithoutBackground: ['connector'],
+
+            /**
+             * A map object which allows to map options attributes to element attributes
+             *
+             * @memberOf Highcharts.Annotation#
+             * @type {Object}
+             */
+            attrsMap: {
+                backgroundColor: 'fill',
+                borderColor: 'stroke',
+                borderWidth: 'stroke-width',
+                strokeWidth: 'stroke-width',
+                stroke: 'stroke',
+                fill: 'fill',
+                zIndex: 'zIndex',
+                width: 'width',
+                height: 'height',
+                borderRadius: 'r',
+                r: 'r',
+                padding: 'padding',
+                dashStyle: 'dashstyle'
+            },
+
+            /**
+             * Options for configuring annotations, for example labels, arrows or 
+             * shapes. Annotations can be tied to points, axis coordinates or chart
+             * pixel coordinates.
+             *
+             * @type {Array<Object>}
+             * @sample highcharts/annotations/basic/
+             *         Basic annotations
+             * @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: 1,
+
+                    /**
+                     * The border width in pixels for the annotation's label
+                     *
+                     * @sample highcharts/annotations/label-presentation/
+                     *         Set labels graphic options
+                     */
+                    borderWidth: 1,
+
+                    /**
+                     * 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,
+
+                    /**
+                     * 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',
+                        fontWeigth: 'bold',
+                        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
+
+                    /**
+                     * The label's pixel distance from the point.
+                     *
+                     * @type {Number}
+                     * @sample highcharts/annotations/label-position/
+                     *         Set labels position
+                     * @default undefined
+                     * @apioption annotations.labelOptions.distance
+                     **/
+                },
+
+                /**
+                 * 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
+                 */
+
+
+                /**
+                 * 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 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 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 Z index of the annotation.
+                 *
+                 * @type {Number}
+                 * @default 6
+                 **/
+                zIndex: 6
+
+                /**
+                 * 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
+                 **/
+            },
+
+            /**
+             * Annotation initialisation
+             *
+             * @function #init
+             * @memberOf Highcharts.Annotation#
+             *
+             * @return {undefined}
+             **/
+            init: function() {
+                var anno = this;
+                each(this.options.labels || [], this.initLabel, this);
+                each(this.options.shapes || [], this.initShape, this);
+
+                // Push the callback that reports to the overlapping-labels module which
+                // labels it should account for.
+                this.chart.labelCollectors.push(function() {
+                    var labels = [];
+                    each(anno.labels, function(label) {
+                        if (!label.options.allowOverlap) {
+                            labels.push(label);
+                        }
+                    });
+                    return labels;
+                });
+            },
+
+            /**
+             * Main method for drawing an annotation, it is called everytime on chart redraw
+             * and once on chart's load
+             *
+             * @function #redraw
+             * @memberOf Highcharts.Annotation#
+             *
+             * @return {undefined}
+             **/
             redraw: function() {
-                var options = this.options,
-                    chart = this.chart,
-                    group = this.group,
-                    title = this.title,
-                    shape = this.shape,
-                    linkedTo = this.linkedObject,
-                    xAxis = chart.xAxis[options.xAxis],
-                    yAxis = chart.yAxis[options.yAxis],
-                    width = options.width,
-                    height = options.height,
-                    anchorY = ALIGN_FACTOR[options.anchorY],
-                    anchorX = ALIGN_FACTOR[options.anchorX],
-                    shapeParams,
-                    linkType,
-                    series,
-                    bbox,
-                    x,
-                    y;
-
-                if (linkedTo) {
-                    linkType = (linkedTo instanceof H.Point) ? 'point' :
-                        (linkedTo instanceof H.Series) ? 'series' : null;
-
-                    if (linkType === 'point') {
-                        options.xValue = linkedTo.x;
-                        options.yValue = linkedTo.y;
-                        series = linkedTo.series;
-                    } else if (linkType === 'series') {
-                        series = linkedTo;
-                    }
+                if (!this.group) {
+                    this.render();
+                }
 
-                    if (group.visibility !== series.group.visibility) {
-                        group.attr({
-                            visibility: series.group.visibility
-                        });
-                    }
+                this.redrawItems(this.shapes);
+                this.redrawItems(this.labels);
+            },
+
+            /**
+             * @function #redrawItems
+             * @memberOf Highcharts.Annotation#
+             *
+             * @param {Array<Object>} items
+             * @return {undefined}
+             **/
+            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]);
                 }
+            },
 
+            /**
+             * @function #render
+             * @memberOf Highcharts.Annotation#
+             *
+             * @return {undefined}
+             **/
+            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);
+            },
 
-                // Based on given options find annotation pixel position
-                x = (defined(options.xValue) ? xAxis.toPixels(options.xValue + xAxis.minPointOffset) - xAxis.minPixelPadding : options.x);
-                y = defined(options.yValue) ? yAxis.toPixels(options.yValue) : options.y;
+            /**
+             * @function #setVisible
+             * @memberOf Highcharts.Annotation#
+             *
+             * @param {Boolean} [visibility] - whether to show or hide an annotation.
+             * If the param is omitted, the annotation's visibility is toggled
+             * @return {undefined}
+             **/
+            setVisible: function(visibility) {
+                var options = this.options,
+                    visible = pick(visibility, !options.visible);
+
+                this.group.attr({
+                    visibility: visible ? 'visible' : 'hidden'
+                });
 
-                if (!isNumber(x) || !isNumber(y)) {
-                    return;
+                options.visible = visible;
+            },
+
+
+            /**
+             * Destroying an annotation
+             *
+             * @function #destroy
+             * @memberOf Highcharts.Annotation#
+             *
+             * @return {undefined}
+             **/
+            destroy: function() {
+                var chart = this.chart;
+
+                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
+             *
+             * @function #initShape
+             * @memberOf Highcharts.Annotation#
+             *
+             * @param {Object} shapeOptions - a confg object for a single shape
+             * @return {undefined}
+             **/
+            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 (title) {
-                    title.attr(options.title);
-                    title.css(options.title.style);
+                this.shapes.push(shape);
+            },
+
+            /**
+             * Initialisation of a single label
+             *
+             * @function #initShape
+             * @memberOf Highcharts.Annotation#
+             *
+             * @param {Object} labelOptions
+             * @return {undefined}
+             **/
+            initLabel: function(labelOptions) {
+                var options = merge(this.options.labelOptions, labelOptions),
+                    style = options.style,
+                    attr = this.attrsFromOptions(options),
+
+                    label = this.chart.renderer.label(
+                        '',
+                        0, -9e9,
+                        options.shape,
+                        null,
+                        null,
+                        options.useHTML,
+                        null,
+                        'annotation-label'
+                    );
+
+                if (style.color === 'contrast') {
+                    style.color = this.chart.renderer.getContrast(
+                        inArray(options.shape, this.shapesWithoutBackground) > -1 ?
+                        '#FFFFFF' :
+                        options.backgroundColor
+                    );
                 }
 
-                if (shape) {
-                    shapeParams = extend({}, options.shape.params);
+                label.points = [];
+                label.options = options;
+                label.itemType = 'label';
 
-                    if (options.units === 'values') {
-                        H.objectEach(shapeParams, function(val, param) {
-                            if (inArray(param, ['width', 'x']) > -1) {
-                                shapeParams[param] = xAxis.translate(shapeParams[param]);
-                            } else if (inArray(param, ['height', 'y']) > -1) {
-                                shapeParams[param] = yAxis.translate(shapeParams[param]);
-                            }
-                        });
+                // Labelrank required for hideOverlappingLabels()
+                label.labelrank = options.labelrank;
+                label.annotation = this;
 
-                        if (shapeParams.width) {
-                            shapeParams.width -= xAxis.toPixels(0) - xAxis.left;
-                        }
+                label.attr(attr).css(style).shadow(options.shadow);
 
-                        if (shapeParams.x) {
-                            shapeParams.x += xAxis.minPixelPadding;
-                        }
+                this.labels.push(label);
+            },
 
-                        if (options.shape.type === 'path') {
-                            translatePath(shapeParams.d, xAxis, yAxis, x, y);
-                        }
+            /**
+             * Redrawing a single item
+             *
+             * @function #redrawItem
+             * @memberOf Highcharts.Annotation#
+             *
+             * @param {Object} item
+             * @return {undefined}
+             */
+            redrawItem: function(item) {
+                var points = this.linkPoints(item),
+                    itemOptions = item.options,
+                    text;
+
+                if (!points.length) {
+                    this.destroyItem(item);
+
+                } else {
+                    if (!item.parentGroup) {
+                        this.renderItem(item);
                     }
 
-                    // move the center of the circle to shape x/y
-                    if (options.shape.type === 'circle') {
-                        shapeParams.x += shapeParams.r;
-                        shapeParams.y += shapeParams.r;
+                    if (item.itemType === 'label') {
+                        text = itemOptions.format || itemOptions.text;
+                        item.attr({
+                            text: text ?
+                                format(text, points[0].getLabelConfig()) : itemOptions.formatter.call(points[0])
+                        });
                     }
 
-                    shape.attr(shapeParams);
+
+                    if (item.type === 'path') {
+                        this.redrawPath(item);
+
+                    } else {
+                        this.alignItem(item, !item.placed);
+                    }
                 }
+            },
 
-                group.bBox = null;
+            /**
+             * Destroing a single item
+             *
+             * @function #destroyItem
+             * @memberOf Highcharts.Annotation#
+             *
+             * @param {Object} item
+             * @return {undefined}
+             */
+            destroyItem: function(item) {
+                // erase from shapes or labels array
+                erase(this[item.itemType + 's'], item);
+                item.destroy();
+            },
 
-                // If annotation width or height is not defined in options use bounding box size
-                if (!isNumber(width)) {
-                    bbox = group.getBBox();
-                    width = bbox.width;
+            /**
+             * Returns a point object
+             *
+             * @function #pointItem
+             * @memberOf Highcharts.Annotation#
+             * 
+             * @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;
+                    }
                 }
 
-                if (!isNumber(height)) {
-                    // get bbox only if it wasn't set before
-                    if (!bbox) {
-                        bbox = group.getBBox();
+                return point;
+            },
+
+            /**
+             * Linking item with the point or points and returning an array of linked points
+             *
+             * @function #linkPoints
+             * @memberOf Highcharts.Annotation#
+             *
+             * @param {Object} 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 = []);
                     }
 
-                    height = bbox.height;
+                    points[i] = point;
                 }
 
-                // Calculate anchor point
-                if (!isNumber(anchorX)) {
-                    anchorX = ALIGN_FACTOR.center;
+                return points;
+            },
+
+            /**
+             * Aligning the item and setting its anchor
+             *
+             * @function #alignItem
+             * @memberOf Highcharts.Annotation#
+             *
+             * @param {Object} 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
+                    });
                 }
+            },
+
+            redrawPath: function(pathItem, isNew) {
+                var points = pathItem.points,
+                    strokeWidth = pathItem['stroke-width'],
+                    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 (!isNumber(anchorY)) {
-                    anchorY = ALIGN_FACTOR.center;
+                            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);
                 }
 
-                // Translate group according to its dimension and anchor point
-                x = x - width * anchorX;
-                y = y - height * anchorY;
 
-                if (defined(group.translateX) && defined(group.translateY)) {
-                    group.animate({
-                        translateX: x,
-                        translateY: y
+                if (showPath) {
+                    pathItem[isNew ? 'attr' : 'animate']({
+                        d: d
                     });
+
                 } else {
-                    group.translate(x, y);
+                    pathItem.attr({
+                        d: 'M 0 ' + -9e9
+                    });
                 }
+
+                pathItem.placed = showPath;
             },
 
-            /*
-             * Destroy the annotation
-             */
-            destroy: function() {
-                var annotation = this,
+            renderItem: function(item) {
+                item.add(item.itemType === 'label' ? this.labelsGroup : this.shapesGroup);
+
+                this.setItemMarkers(item);
+            },
+
+            setItemMarkers: function(item) {
+                var itemOptions = item.options,
                     chart = this.chart,
-                    allItems = chart.annotations.allItems,
-                    index = allItems.indexOf(annotation);
+                    markers = chart.options.defs.markers,
+                    fill = itemOptions.fill,
+                    color = defined(fill) && fill !== 'none' ? fill : itemOptions.stroke,
+
+
+                    setMarker = function(markerType) {
+                        var markerId = itemOptions[markerType],
+                            marker,
+                            predefinedMarker,
+                            key;
+
+                        if (markerId) {
+                            for (key in markers) {
+                                marker = markers[key];
+                                if (markerId === marker.id) {
+                                    predefinedMarker = marker;
+                                    break;
+                                }
+                            }
 
-                if (index > -1) {
-                    allItems.splice(index, 1);
-                }
+                            if (predefinedMarker) {
+                                marker = item[markerType] = chart.renderer.addMarker(
+                                    null,
+                                    merge(predefinedMarker, {
+                                        color: color
+                                    })
+                                );
 
-                each(['title', 'shape', 'group'], function(element) {
-                    if (annotation[element]) {
-                        annotation[element].destroy();
-                        annotation[element] = null;
-                    }
-                });
+                                item.attr(markerType, marker.id);
+                            }
+                        }
+                    };
 
-                annotation.group = annotation.title = annotation.shape = annotation.chart = annotation.options = null;
+                each(['markerStart', 'markerEnd'], setMarker);
             },
 
-            /*
-             * Update the annotation with a given options
+            /**
+             * 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
+             *
+             * @function #itemAnchor
+             * @memberOf Highcharts.Annotation#
+             *
+             * @param {Object} 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
              */
-            update: function(options, redraw) {
-                extend(this.options, options);
+            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
+             *
+             * @function #itemPosition
+             * @memberOf Highcharts.Annotation#
+             * 
+             * @param {Object} 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 && point.isInside !== false;
+
+                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
+                            );
+                        }
+                    }
 
-                // update link to point or series
-                this.linkObjects();
 
-                this.render(redraw);
+                    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;
             },
 
-            linkObjects: function() {
-                var annotation = this,
-                    chart = annotation.chart,
-                    linkedTo = annotation.linkedObject,
-                    linkedId = linkedTo && (linkedTo.id || linkedTo.options.id),
-                    options = annotation.options,
-                    id = options.linkedTo;
+            /**
+             * 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
+             *
+             * @function #alignedPosition
+             * @memberOf Highcharts.Annotation#
+             *
+             * @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 (!defined(id)) {
-                    annotation.linkedObject = null;
-                } else if (!defined(linkedTo) || id !== linkedId) {
-                    annotation.linkedObject = chart.get(id);
+                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)
+                };
+            },
 
-        // Add annotations methods to chart prototype
-        extend(Chart.prototype, {
-            annotations: {
-                /*
-                 * Unified method for adding annotations to the chart
-                 */
-                add: function(options, redraw) {
-                    var annotations = this.allItems,
-                        chart = this.chart,
-                        item,
-                        len;
-
-                    if (!isArray(options)) {
-                        options = [options];
+            /**
+             * 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
+             *
+             * @function #justifiedOptions
+             * @memberOf Highcharts.Annotation#
+             *
+             * @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;
                     }
+                }
 
-                    len = options.length;
+                // Off right
+                off = x + bBox.width - padding;
+                if (off > chart.plotWidth) {
+                    if (align === 'left') {
+                        options.align = 'right';
+                    } else {
+                        options.x = chart.plotWidth - off;
+                    }
+                }
 
-                    while (len--) {
-                        item = new Annotation(chart, options[len]);
-                        annotations.push(item);
-                        item.render(redraw);
+                // Off top
+                off = y + padding;
+                if (off < 0) {
+                    if (verticalAlign === 'bottom') {
+                        options.verticalAlign = 'top';
+                    } else {
+                        options.y = -off;
                     }
-                },
+                }
 
-                /**
-                 * Redraw all annotations, method used in chart events
-                 */
-                redraw: function() {
-                    each(this.allItems, function(annotation) {
-                        annotation.redraw();
+                // 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
+             *
+             * @function #attrsFromOptions
+             * @memberOf Highcharts.Annotation#
+             *
+             * @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, {
+            addAnnotation: function(userOptions, redraw) {
+                var annotation = new Annotation(this, userOptions);
+
+                this.annotations.push(annotation);
+
+                if (pick(redraw, true)) {
+                    annotation.redraw();
+                }
+
+                return annotation;
+            },
+
+            removeAnnotation: function(id) {
+                var annotations = this.annotations,
+                    annotation = find(annotations, function(annotation) {
+                        return annotation.options.id === id;
                     });
+
+                if (annotation) {
+                    erase(annotations, annotation);
+                    annotation.destroy();
+                }
+            },
+
+            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();
+                });
             }
         });
 
 
-        // Initialize on chart load
-        Chart.prototype.callbacks.push(function(chart) {
-            var options = chart.options.annotations,
-                group;
+        chartPrototype.callbacks.push(function(chart) {
+            chart.annotations = [];
 
-            group = chart.renderer.g('annotations');
-            group.attr({
-                zIndex: 7
+            each(chart.options.annotations, function(annotationOptions) {
+                chart.addAnnotation(annotationOptions, false);
             });
-            group.add();
 
-            // initialize empty array for annotations
-            chart.annotations.allItems = [];
+            chart.drawAnnotations();
+            addEvent(chart, 'redraw', chart.drawAnnotations);
+            addEvent(chart, 'destroy', function() {
+                var plotBoxClip = chart.plotBoxClip;
 
-            // link chart object to annotations
-            chart.annotations.chart = chart;
+                if (plotBoxClip && plotBoxClip.destroy) {
+                    plotBoxClip.destroy();
+                }
+            });
+        });
 
-            // link annotations group element to the chart
-            chart.annotations.group = group;
 
-            if (isArray(options) && options.length > 0) {
-                chart.annotations.add(chart.options.annotations);
-            }
+        H.wrap(chartPrototype, 'getContainer', function(p) {
+            p.call(this);
 
-            // update annotations after chart redraw
-            H.addEvent(chart, 'redraw', function() {
-                chart.annotations.redraw();
+            var renderer = this.renderer,
+                options = this.options,
+                key,
+                markers,
+                marker;
+
+            options.defs = merge(options.defs || {}, {
+                markers: defaultMarkers
             });
+            markers = options.defs.markers;
+
+            for (key in markers) {
+                marker = markers[key];
+
+                if (pick(marker.render, true)) {
+                    renderer.addMarker(marker.id, marker);
+                }
+            }
         });
 
+
+        /* ************************************************************************* */
+
+        /**
+         * 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));
 }));