highcharts 8.1.0 → 8.2.2

package/modules/annotations.src.js

@@ -1,5 +1,5 @@
 /**
- * @license Highcharts JS v8.1.0 (2020-05-05)
+ * @license Highcharts JS v8.2.2 (2020-10-22)
  *
  * Annotations module
  *
@@ -28,7 +28,7 @@
             obj[path] = fn.apply(null, args);
         }
     }
-    _registerModule(_modules, 'annotations/eventEmitterMixin.js', [_modules['parts/Globals.js'], _modules['parts/Utilities.js']], function (H, U) {
+    _registerModule(_modules, 'Extensions/Annotations/Mixins/EventEmitterMixin.js', [_modules['Core/Globals.js'], _modules['Core/Utilities.js']], function (H, U) {
         /* *
          *
          *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
@@ -36,7 +36,6 @@
          * */
         var addEvent = U.addEvent,
             fireEvent = U.fireEvent,
-            inArray = U.inArray,
             objectEach = U.objectEach,
             pick = U.pick,
             removeEvent = U.removeEvent;
@@ -59,7 +58,8 @@
                 addEvents: function () {
                     var emitter = this,
             addMouseDownEvent = function (element) {
-                        addEvent(element, 'mousedown',
+                        addEvent(element,
+            H.isTouchDevice ? 'touchstart' : 'mousedown',
             function (e) {
                             emitter.onMouseDown(e);
                     });
@@ -79,7 +79,7 @@
                         emitter.target);
                         }
                     };
-                    if (inArray(type, emitter.nonDOMEvents || []) === -1) {
+                    if ((emitter.nonDOMEvents || []).indexOf(type) === -1) {
                         emitter.graphic.on(type, eventHandler);
                     }
                     else {
@@ -139,7 +139,7 @@
                 prevChartY = e.chartY;
                 emitter.cancelClick = false;
                 emitter.chart.hasDraggedAnnotation = true;
-                emitter.removeDrag = addEvent(H.doc, 'mousemove', function (e) {
+                emitter.removeDrag = addEvent(H.doc, H.isTouchDevice ? 'touchmove' : 'mousemove', function (e) {
                     emitter.hasDragged = true;
                     e = pointer.normalize(e);
                     e.prevChartX = prevChartX;
@@ -148,7 +148,7 @@
                     prevChartX = e.chartX;
                     prevChartY = e.chartY;
                 });
-                emitter.removeMouseUp = addEvent(H.doc, 'mouseup', function (e) {
+                emitter.removeMouseUp = addEvent(H.doc, H.isTouchDevice ? 'touchend' : 'mouseup', function (e) {
                     emitter.cancelClick = emitter.hasDragged;
                     emitter.hasDragged = false;
                     emitter.chart.hasDraggedAnnotation = false;
@@ -268,7 +268,7 @@
 
         return eventEmitterMixin;
     });
-    _registerModule(_modules, 'annotations/ControlPoint.js', [_modules['parts/Utilities.js'], _modules['annotations/eventEmitterMixin.js']], function (U, eventEmitterMixin) {
+    _registerModule(_modules, 'Extensions/Annotations/ControlPoint.js', [_modules['Core/Utilities.js'], _modules['Extensions/Annotations/Mixins/EventEmitterMixin.js']], function (U, eventEmitterMixin) {
         /* *
          *
          *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
@@ -420,7 +420,7 @@
 
         return ControlPoint;
     });
-    _registerModule(_modules, 'annotations/MockPoint.js', [_modules['parts/Globals.js'], _modules['parts/Utilities.js']], function (H, U) {
+    _registerModule(_modules, 'Extensions/Annotations/MockPoint.js', [_modules['Core/Globals.js'], _modules['Core/Utilities.js'], _modules['Core/Axis/Axis.js']], function (H, U, Axis) {
         /* *
          *
          *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
@@ -686,7 +686,7 @@
                     axisOptions = options[axisName],
                     chart = this.series.chart;
                 this.series[axisName] =
-                    axisOptions instanceof H.Axis ?
+                    axisOptions instanceof Axis ?
                         axisOptions :
                         defined(axisOptions) ?
                             (chart[axisName][axisOptions] ||
@@ -712,7 +712,7 @@
              * Returns a label config object - the same as
              * Highcharts.Point.prototype.getLabelConfig
              * @private
-             * @return {Annotation.MockPoint.LabelConfig} the point's label config
+             * @return {Highcharts.AnnotationMockLabelOptionsObject} the point's label config
              */
             MockPoint.prototype.getLabelConfig = function () {
                 return {
@@ -871,12 +871,16 @@
 
         return MockPoint;
     });
-    _registerModule(_modules, 'annotations/controllable/controllableMixin.js', [_modules['parts/Utilities.js'], _modules['annotations/ControlPoint.js'], _modules['annotations/MockPoint.js'], _modules['parts/Tooltip.js']], function (U, ControlPoint, MockPoint, Tooltip) {
+    _registerModule(_modules, 'Extensions/Annotations/Mixins/ControllableMixin.js', [_modules['Extensions/Annotations/ControlPoint.js'], _modules['Extensions/Annotations/MockPoint.js'], _modules['Core/Tooltip.js'], _modules['Core/Utilities.js']], function (ControlPoint, MockPoint, Tooltip, U) {
         /* *
          *
          *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
          *
          * */
+        var isObject = U.isObject,
+            isString = U.isString,
+            merge = U.merge,
+            splat = U.splat;
         /**
          * An object which denots a controllable's anchor positions - relative and
          * absolute.
@@ -911,10 +915,6 @@
         * @name Highcharts.AnnotationControllable#points
         * @type {Array<Highcharts.Point>}
         */
-        var isObject = U.isObject,
-            isString = U.isString,
-            merge = U.merge,
-            splat = U.splat;
         /* eslint-disable no-invalid-this, valid-jsdoc */
         /**
          * It provides methods for handling points, control points
@@ -992,6 +992,7 @@
              */
             anchor: function (point) {
                 var plotBox = point.series.getPlotBox(),
+                    chart = point.series.chart,
                     box = point.mock ?
                         point.toAnchor() :
                         Tooltip.prototype.getAnchor.call({
@@ -1007,8 +1008,8 @@
                 return {
                     relativePosition: anchor,
                     absolutePosition: merge(anchor, {
-                        x: anchor.x + plotBox.translateX,
-                        y: anchor.y + plotBox.translateY
+                        x: anchor.x + (point.mock ? plotBox.translateX : chart.plotLeft),
+                        y: anchor.y + (point.mock ? plotBox.translateY : chart.plotTop)
                     })
                 };
             },
@@ -1261,7 +1262,7 @@
 
         return controllableMixin;
     });
-    _registerModule(_modules, 'annotations/controllable/markerMixin.js', [_modules['parts/Globals.js'], _modules['parts/Utilities.js']], function (H, U) {
+    _registerModule(_modules, 'Extensions/Annotations/Mixins/MarkerMixin.js', [_modules['Core/Chart/Chart.js'], _modules['Core/Renderer/SVG/SVGRenderer.js'], _modules['Core/Utilities.js']], function (Chart, SVGRenderer, U) {
         /* *
          *
          *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
@@ -1346,7 +1347,7 @@
                         }]
                 }
             };
-        H.SVGRenderer.prototype.addMarker = function (id, markerOptions) {
+        SVGRenderer.prototype.addMarker = function (id, markerOptions) {
             var options = { id: id };
             var attrs = {
                     stroke: markerOptions.color || 'none',
@@ -1368,11 +1369,14 @@
             return marker;
         };
         /* eslint-disable no-invalid-this, valid-jsdoc */
-        var createMarkerSetter = function (markerType) {
-                return function (value) {
-                    this.attr(markerType, 'url(#' + value + ')');
+        /**
+         * @private
+         */
+        function createMarkerSetter(markerType) {
+            return function (value) {
+                this.attr(markerType, 'url(#' + value + ')');
             };
-        };
+        }
         /**
          * @private
          * @mixin
@@ -1420,7 +1424,7 @@
                 ['markerStart', 'markerEnd'].forEach(setMarker);
             }
         };
-        addEvent(H.Chart, 'afterGetContainer', function () {
+        addEvent(Chart, 'afterGetContainer', function () {
             this.options.defs = merge(defaultMarkers, this.options.defs || {});
             objectEach(this.options.defs, function (def) {
                 if (def.tagName === 'marker' && def.render !== false) {
@@ -1431,14 +1435,13 @@
 
         return markerMixin;
     });
-    _registerModule(_modules, 'annotations/controllable/ControllablePath.js', [_modules['parts/Globals.js'], _modules['parts/Utilities.js'], _modules['annotations/controllable/controllableMixin.js'], _modules['annotations/controllable/markerMixin.js']], function (H, U, controllableMixin, markerMixin) {
+    _registerModule(_modules, 'Extensions/Annotations/Controllables/ControllablePath.js', [_modules['Extensions/Annotations/Mixins/ControllableMixin.js'], _modules['Core/Globals.js'], _modules['Extensions/Annotations/Mixins/MarkerMixin.js'], _modules['Core/Utilities.js']], function (ControllableMixin, H, MarkerMixin, U) {
         /* *
          *
          *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
          *
          * */
-        var extend = U.extend,
-            merge = U.merge;
+        var extend = U.extend;
         // See TRACKER_FILL in highcharts.src.js
         var TRACKER_FILL = 'rgba(192,192,192,' + (H.svg ? 0.0001 : 0.002) + ')';
         /* eslint-disable no-invalid-this, valid-jsdoc */
@@ -1459,41 +1462,57 @@
          *
          * @param {number} index
          * Index of the path.
-         **/
-        var ControllablePath = function (annotation,
-            options,
-            index) {
-                this.init(annotation,
-            options,
-            index);
-            this.collection = 'shapes';
-        };
-        /**
-         * A map object which allows to map options attributes to element attributes
-         *
-         * @name Highcharts.AnnotationControllablePath.attrsMap
-         * @type {Highcharts.Dictionary<string>}
          */
-        ControllablePath.attrsMap = {
-            dashStyle: 'dashstyle',
-            strokeWidth: 'stroke-width',
-            stroke: 'stroke',
-            fill: 'fill',
-            zIndex: 'zIndex'
-        };
-        merge(true, ControllablePath.prototype, controllableMixin, /** @lends Highcharts.AnnotationControllablePath# */ {
-            /**
-             * @type 'path'
-             */
-            type: 'path',
-            setMarkers: markerMixin.setItemMarkers,
+        var ControllablePath = /** @class */ (function () {
+                /* *
+                 *
+                 *  Constructors
+                 *
+                 * */
+                function ControllablePath(annotation, options, index) {
+                    /* *
+                     *
+                     *  Properties
+                     *
+                     * */
+                    this.addControlPoints = ControllableMixin.addControlPoints;
+                this.anchor = ControllableMixin.anchor;
+                this.attr = ControllableMixin.attr;
+                this.attrsFromOptions = ControllableMixin.attrsFromOptions;
+                this.destroy = ControllableMixin.destroy;
+                this.getPointsOptions = ControllableMixin.getPointsOptions;
+                this.init = ControllableMixin.init;
+                this.linkPoints = ControllableMixin.linkPoints;
+                this.point = ControllableMixin.point;
+                this.rotate = ControllableMixin.rotate;
+                this.scale = ControllableMixin.scale;
+                this.setControlPointsVisibility = ControllableMixin.setControlPointsVisibility;
+                this.setMarkers = MarkerMixin.setItemMarkers;
+                this.transform = ControllableMixin.transform;
+                this.transformPoint = ControllableMixin.transformPoint;
+                this.translate = ControllableMixin.translate;
+                this.translatePoint = ControllableMixin.translatePoint;
+                this.translateShape = ControllableMixin.translateShape;
+                this.update = ControllableMixin.update;
+                /**
+                 * @type 'path'
+                 */
+                this.type = 'path';
+                this.init(annotation, options, index);
+                this.collection = 'shapes';
+            }
+            /* *
+             *
+             *  Functions
+             *
+             * */
             /**
              * Map the controllable path to 'd' path attribute.
              *
              * @return {Highcharts.SVGPathArray|null}
              * A path's d attribute.
              */
-            toD: function () {
+            ControllablePath.prototype.toD = function () {
                 var dOption = this.options.d;
                 if (dOption) {
                     return typeof dOption === 'function' ?
@@ -1529,11 +1548,11 @@
                 return showPath ?
                     this.chart.renderer.crispLine(d, this.graphic.strokeWidth()) :
                     null;
-            },
-            shouldBeDrawn: function () {
-                return (controllableMixin.shouldBeDrawn.call(this) || Boolean(this.options.d));
-            },
-            render: function (parent) {
+            };
+            ControllablePath.prototype.shouldBeDrawn = function () {
+                return (ControllableMixin.shouldBeDrawn.call(this) || Boolean(this.options.d));
+            };
+            ControllablePath.prototype.render = function (parent) {
                 var options = this.options,
                     attrs = this.attrsFromOptions(options);
                 this.graphic = this.annotation.chart.renderer
@@ -1559,14 +1578,14 @@
                             options.snap * 2
                     });
                 }
-                controllableMixin.render.call(this);
+                ControllableMixin.render.call(this);
                 extend(this.graphic, {
-                    markerStartSetter: markerMixin.markerStartSetter,
-                    markerEndSetter: markerMixin.markerEndSetter
+                    markerStartSetter: MarkerMixin.markerStartSetter,
+                    markerEndSetter: MarkerMixin.markerEndSetter
                 });
                 this.setMarkers(this);
-            },
-            redraw: function (animation) {
+            };
+            ControllablePath.prototype.redraw = function (animation) {
                 var d = this.toD(),
                     action = animation ? 'animate' : 'attr';
                 if (d) {
@@ -1578,19 +1597,44 @@
                     this.tracker.attr({ d: 'M 0 ' + -9e9 });
                 }
                 this.graphic.placed = this.tracker.placed = Boolean(d);
-                controllableMixin.redraw.call(this, animation);
-            }
-        });
+                ControllableMixin.redraw.call(this, animation);
+            };
+            /* *
+             *
+             *  Static Properties
+             *
+             * */
+            /**
+             * A map object which allows to map options attributes to element attributes
+             *
+             * @name Highcharts.AnnotationControllablePath.attrsMap
+             * @type {Highcharts.Dictionary<string>}
+             */
+            ControllablePath.attrsMap = {
+                dashStyle: 'dashstyle',
+                strokeWidth: 'stroke-width',
+                stroke: 'stroke',
+                fill: 'fill',
+                zIndex: 'zIndex'
+            };
+            return ControllablePath;
+        }());
 
         return ControllablePath;
     });
-    _registerModule(_modules, 'annotations/controllable/ControllableRect.js', [_modules['parts/Utilities.js'], _modules['annotations/controllable/controllableMixin.js'], _modules['annotations/controllable/ControllablePath.js']], function (U, controllableMixin, ControllablePath) {
+    _registerModule(_modules, 'Extensions/Annotations/Controllables/ControllableRect.js', [_modules['Extensions/Annotations/Mixins/ControllableMixin.js'], _modules['Extensions/Annotations/Controllables/ControllablePath.js'], _modules['Core/Utilities.js']], function (ControllableMixin, ControllablePath, U) {
         /* *
          *
          *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
          *
          * */
         var merge = U.merge;
+        /**
+         * @typedef {Annotation.ControllablePath.AttrsMap}
+         *          Annotation.ControllableRect.AttrsMap
+         * @property {string} width=width
+         * @property {string} height=height
+         */
         /* eslint-disable no-invalid-this, valid-jsdoc */
         /**
          * A controllable rect class.
@@ -1610,44 +1654,58 @@
          * @param {number} index
          * Index of the rectangle
          */
-        var ControllableRect = function (annotation,
-            options,
-            index) {
-                this.init(annotation,
-            options,
-            index);
-            this.collection = 'shapes';
-        };
-        /**
-         * @typedef {Annotation.ControllablePath.AttrsMap}
-         *          Annotation.ControllableRect.AttrsMap
-         * @property {string} width=width
-         * @property {string} height=height
-         */
-        /**
-         * A map object which allows to map options attributes to element attributes
-         *
-         * @type {Annotation.ControllableRect.AttrsMap}
-         */
-        ControllableRect.attrsMap = merge(ControllablePath.attrsMap, {
-            width: 'width',
-            height: 'height'
-        });
-        merge(true, ControllableRect.prototype, controllableMixin, /** @lends Annotation.ControllableRect# */ {
-            /**
-             * @type 'rect'
-             */
-            type: 'rect',
-            translate: controllableMixin.translateShape,
-            render: function (parent) {
+        var ControllableRect = /** @class */ (function () {
+                /* *
+                 *
+                 *  Constructors
+                 *
+                 * */
+                function ControllableRect(annotation, options, index) {
+                    /* *
+                     *
+                     *  Properties
+                     *
+                     * */
+                    this.addControlPoints = ControllableMixin.addControlPoints;
+                this.anchor = ControllableMixin.anchor;
+                this.attr = ControllableMixin.attr;
+                this.attrsFromOptions = ControllableMixin.attrsFromOptions;
+                this.destroy = ControllableMixin.destroy;
+                this.getPointsOptions = ControllableMixin.getPointsOptions;
+                this.init = ControllableMixin.init;
+                this.linkPoints = ControllableMixin.linkPoints;
+                this.point = ControllableMixin.point;
+                this.rotate = ControllableMixin.rotate;
+                this.scale = ControllableMixin.scale;
+                this.setControlPointsVisibility = ControllableMixin.setControlPointsVisibility;
+                this.shouldBeDrawn = ControllableMixin.shouldBeDrawn;
+                this.transform = ControllableMixin.transform;
+                this.transformPoint = ControllableMixin.transformPoint;
+                this.translatePoint = ControllableMixin.translatePoint;
+                this.translateShape = ControllableMixin.translateShape;
+                this.update = ControllableMixin.update;
+                /**
+                 * @type 'rect'
+                 */
+                this.type = 'rect';
+                this.translate = ControllableMixin.translateShape;
+                this.init(annotation, options, index);
+                this.collection = 'shapes';
+            }
+            /* *
+             *
+             *  Functions
+             *
+             * */
+            ControllableRect.prototype.render = function (parent) {
                 var attrs = this.attrsFromOptions(this.options);
                 this.graphic = this.annotation.chart.renderer
                     .rect(0, -9e9, 0, 0)
                     .attr(attrs)
                     .add(parent);
-                controllableMixin.render.call(this);
-            },
-            redraw: function (animation) {
+                ControllableMixin.render.call(this);
+            };
+            ControllableRect.prototype.redraw = function (animation) {
                 var position = this.anchor(this.points[0]).absolutePosition;
                 if (position) {
                     this.graphic[animation ? 'animate' : 'attr']({
@@ -1664,13 +1722,28 @@
                     });
                 }
                 this.graphic.placed = Boolean(position);
-                controllableMixin.redraw.call(this, animation);
-            }
-        });
+                ControllableMixin.redraw.call(this, animation);
+            };
+            /* *
+             *
+             *  Static Properties
+             *
+             * */
+            /**
+             * A map object which allows to map options attributes to element attributes
+             *
+             * @type {Annotation.ControllableRect.AttrsMap}
+             */
+            ControllableRect.attrsMap = merge(ControllablePath.attrsMap, {
+                width: 'width',
+                height: 'height'
+            });
+            return ControllableRect;
+        }());
 
         return ControllableRect;
     });
-    _registerModule(_modules, 'annotations/controllable/ControllableCircle.js', [_modules['parts/Utilities.js'], _modules['annotations/controllable/controllableMixin.js'], _modules['annotations/controllable/ControllablePath.js']], function (U, controllableMixin, ControllablePath) {
+    _registerModule(_modules, 'Extensions/Annotations/Controllables/ControllableCircle.js', [_modules['Extensions/Annotations/Mixins/ControllableMixin.js'], _modules['Extensions/Annotations/Controllables/ControllablePath.js'], _modules['Core/Utilities.js']], function (ControllableMixin, ControllablePath, U) {
         /* *
          *
          *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
@@ -1684,45 +1757,65 @@
          * @requires modules/annotations
          *
          * @private
-         * @constructor
+         * @class
          * @name Highcharts.AnnotationControllableCircle
          *
          * @param {Highcharts.Annotation} annotation an annotation instance
          * @param {Highcharts.AnnotationsShapeOptions} options a shape's options
          * @param {number} index of the circle
-         **/
-        var ControllableCircle = function (annotation,
-            options,
-            index) {
-                this.init(annotation,
-            options,
-            index);
-            this.collection = 'shapes';
-        };
-        /**
-         * A map object which allows to map options attributes to element attributes.
-         *
-         * @name Highcharts.AnnotationControllableCircle.attrsMap
-         * @type {Highcharts.Dictionary<string>}
          */
-        ControllableCircle.attrsMap = merge(ControllablePath.attrsMap, {
-            r: 'r'
-        });
-        merge(true, ControllableCircle.prototype, controllableMixin, /** @lends Highcharts.AnnotationControllableCircle# */ {
-            /**
-             * @type 'circle'
-             */
-            type: 'circle',
-            translate: controllableMixin.translateShape,
-            render: function (parent) {
+        var ControllableCircle = /** @class */ (function () {
+                /* *
+                 *
+                 *  Constructors
+                 *
+                 * */
+                function ControllableCircle(annotation, options, index) {
+                    /* *
+                     *
+                     *  Properties
+                     *
+                     * */
+                    this.addControlPoints = ControllableMixin.addControlPoints;
+                this.anchor = ControllableMixin.anchor;
+                this.attr = ControllableMixin.attr;
+                this.attrsFromOptions = ControllableMixin.attrsFromOptions;
+                this.destroy = ControllableMixin.destroy;
+                this.getPointsOptions = ControllableMixin.getPointsOptions;
+                this.init = ControllableMixin.init;
+                this.linkPoints = ControllableMixin.linkPoints;
+                this.point = ControllableMixin.point;
+                this.rotate = ControllableMixin.rotate;
+                this.scale = ControllableMixin.scale;
+                this.setControlPointsVisibility = ControllableMixin.setControlPointsVisibility;
+                this.shouldBeDrawn = ControllableMixin.shouldBeDrawn;
+                this.transform = ControllableMixin.transform;
+                this.transformPoint = ControllableMixin.transformPoint;
+                this.translatePoint = ControllableMixin.translatePoint;
+                this.translateShape = ControllableMixin.translateShape;
+                this.update = ControllableMixin.update;
+                /**
+                 * @type 'circle'
+                 */
+                this.type = 'circle';
+                this.translate = ControllableMixin.translateShape;
+                this.init(annotation, options, index);
+                this.collection = 'shapes';
+            }
+            /* *
+             *
+             *  Functions
+             *
+             * */
+            ControllableCircle.prototype.render = function (parent) {
                 var attrs = this.attrsFromOptions(this.options);
                 this.graphic = this.annotation.chart.renderer
                     .circle(0, -9e9, 0)
                     .attr(attrs)
                     .add(parent);
-                controllableMixin.render.call(this);
-            },
-            redraw: function (animation) {
+                ControllableMixin.render.call(this);
+            };
+            ControllableCircle.prototype.redraw = function (animation) {
                 var position = this.anchor(this.points[0]).absolutePosition;
                 if (position) {
                     this.graphic[animation ? 'animate' : 'attr']({
@@ -1738,21 +1831,35 @@
                     });
                 }
                 this.graphic.placed = Boolean(position);
-                controllableMixin.redraw.call(this, animation);
-            },
+                ControllableMixin.redraw.call(this, animation);
+            };
             /**
              * Set the radius.
              *
              * @param {number} r a radius to be set
              */
-            setRadius: function (r) {
+            ControllableCircle.prototype.setRadius = function (r) {
                 this.options.r = r;
-            }
-        });
+            };
+            /* *
+             *
+             *  Static Properties
+             *
+             * */
+            /**
+             * A map object which allows to map options attributes to element
+             * attributes.
+             *
+             * @name Highcharts.AnnotationControllableCircle.attrsMap
+             * @type {Highcharts.Dictionary<string>}
+             */
+            ControllableCircle.attrsMap = merge(ControllablePath.attrsMap, { r: 'r' });
+            return ControllableCircle;
+        }());
 
         return ControllableCircle;
     });
-    _registerModule(_modules, 'annotations/controllable/ControllableLabel.js', [_modules['parts/Globals.js'], _modules['parts/Utilities.js'], _modules['annotations/controllable/controllableMixin.js'], _modules['annotations/MockPoint.js'], _modules['parts/Tooltip.js']], function (H, U, controllableMixin, MockPoint, Tooltip) {
+    _registerModule(_modules, 'Extensions/Annotations/Controllables/ControllableLabel.js', [_modules['Extensions/Annotations/Mixins/ControllableMixin.js'], _modules['Extensions/Annotations/MockPoint.js'], _modules['Core/Renderer/SVG/SVGRenderer.js'], _modules['Core/Tooltip.js'], _modules['Core/Utilities.js']], function (ControllableMixin, MockPoint, SVGRenderer, Tooltip, U) {
         /* *
          *
          *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
@@ -1761,7 +1868,6 @@
         var extend = U.extend,
             format = U.format,
             isNumber = U.isNumber,
-            merge = U.merge,
             pick = U.pick;
         /* eslint-disable no-invalid-this, valid-jsdoc */
         /**
@@ -1780,161 +1886,172 @@
          * @param {number} index
          * Index of the label.
          */
-        var ControllableLabel = function (annotation,
-            options,
-            index) {
-                this.init(annotation,
-            options,
-            index);
-            this.collection = 'labels';
-        };
-        /**
-         * Shapes which do not have background - the object is used for proper
-         * setting of the contrast color.
-         *
-         * @type {Array<string>}
-         */
-        ControllableLabel.shapesWithoutBackground = ['connector'];
-        /**
-         * 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
-         *
-         * @param {Highcharts.AnnotationAlignObject} alignOptions
-         *
-         * @param {Highcharts.BBoxObject} box
-         *
-         * @return {Highcharts.PositionObject}
-         * Aligned position.
-         */
-        ControllableLabel.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;
+        var ControllableLabel = /** @class */ (function () {
+                /* *
+                 *
+                 *  Constructors
+                 *
+                 * */
+                function ControllableLabel(annotation, options, index) {
+                    /* *
+                     *
+                     *  Properties
+                     *
+                     * */
+                    this.addControlPoints = ControllableMixin.addControlPoints;
+                this.attr = ControllableMixin.attr;
+                this.attrsFromOptions = ControllableMixin.attrsFromOptions;
+                this.destroy = ControllableMixin.destroy;
+                this.getPointsOptions = ControllableMixin.getPointsOptions;
+                this.init = ControllableMixin.init;
+                this.linkPoints = ControllableMixin.linkPoints;
+                this.point = ControllableMixin.point;
+                this.rotate = ControllableMixin.rotate;
+                this.scale = ControllableMixin.scale;
+                this.setControlPointsVisibility = ControllableMixin.setControlPointsVisibility;
+                this.shouldBeDrawn = ControllableMixin.shouldBeDrawn;
+                this.transform = ControllableMixin.transform;
+                this.transformPoint = ControllableMixin.transformPoint;
+                this.translateShape = ControllableMixin.translateShape;
+                this.update = ControllableMixin.update;
+                this.init(annotation, options, index);
+                this.collection = 'labels';
             }
-            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.
-         */
-        ControllableLabel.justifiedOptions = function (chart, label, alignOptions, alignAttr) {
-            var 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) {
+            /* *
+             *
+             *  Static Functions
+             *
+             * */
+            /**
+             * 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
+             *
+             * @param {Highcharts.AnnotationAlignObject} alignOptions
+             *
+             * @param {Highcharts.BBoxObject} box
+             *
+             * @return {Highcharts.PositionObject}
+             * Aligned position.
+             */
+            ControllableLabel.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') {
-                    options.align = 'left';
+                    alignFactor = 1;
                 }
-                else {
-                    options.x = -off;
+                else if (align === 'center') {
+                    alignFactor = 2;
                 }
-            }
-            // Off right
-            off = x + bBox.width - padding;
-            if (off > chart.plotWidth) {
-                if (align === 'left') {
-                    options.align = 'right';
+                if (alignFactor) {
+                    x += (box.width - (alignOptions.width || 0)) / alignFactor;
                 }
-                else {
-                    options.x = chart.plotWidth - off;
+                if (vAlign === 'bottom') {
+                    vAlignFactor = 1;
                 }
-            }
-            // Off top
-            off = y + padding;
-            if (off < 0) {
-                if (verticalAlign === 'bottom') {
-                    options.verticalAlign = 'top';
+                else if (vAlign === 'middle') {
+                    vAlignFactor = 2;
                 }
-                else {
-                    options.y = -off;
+                if (vAlignFactor) {
+                    y += (box.height - (alignOptions.height || 0)) / vAlignFactor;
                 }
-            }
-            // Off bottom
-            off = y + bBox.height - padding;
-            if (off > chart.plotHeight) {
-                if (verticalAlign === 'top') {
-                    options.verticalAlign = 'bottom';
+                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.
+             */
+            ControllableLabel.justifiedOptions = function (chart, label, alignOptions, alignAttr) {
+                var 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;
+                    }
                 }
-                else {
-                    options.y = chart.plotHeight - off;
+                // Off right
+                off = x + bBox.width - padding;
+                if (off > chart.plotWidth) {
+                    if (align === 'left') {
+                        options.align = 'right';
+                    }
+                    else {
+                        options.x = chart.plotWidth - off;
+                    }
                 }
-            }
-            return options;
-        };
-        /**
-         * A map object which allows to map options attributes to element attributes
-         *
-         * @type {Highcharts.Dictionary<string>}
-         */
-        ControllableLabel.attrsMap = {
-            backgroundColor: 'fill',
-            borderColor: 'stroke',
-            borderWidth: 'stroke-width',
-            zIndex: 'zIndex',
-            borderRadius: 'r',
-            padding: 'padding'
-        };
-        merge(true, ControllableLabel.prototype, controllableMixin, 
-        /** @lends Annotation.ControllableLabel# */ {
+                // 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;
+            };
+            /* *
+             *
+             *  Functions
+             *
+             * */
             /**
              * Translate the point of the label by deltaX and deltaY translations.
              * The point is the label's anchor.
              *
              * @param {number} dx translation for x coordinate
              * @param {number} dy translation for y coordinate
-             **/
-            translatePoint: function (dx, dy) {
-                controllableMixin.translatePoint.call(this, dx, dy, 0);
-            },
+             */
+            ControllableLabel.prototype.translatePoint = function (dx, dy) {
+                ControllableMixin.translatePoint.call(this, dx, dy, 0);
+            };
             /**
              * Translate x and y position relative to the label's anchor.
              *
              * @param {number} dx translation for x coordinate
              * @param {number} dy translation for y coordinate
-             **/
-            translate: function (dx, dy) {
+             */
+            ControllableLabel.prototype.translate = function (dx, dy) {
                 var chart = this.annotation.chart, 
                     // Annotation.options
                     labelOptions = this.annotation.userOptions, 
@@ -1956,8 +2073,8 @@
                 chartOptions[this.collection][this.index].y = this.options.y;
                 labelOptions[this.collection][this.index].x = this.options.x;
                 labelOptions[this.collection][this.index].y = this.options.y;
-            },
-            render: function (parent) {
+            };
+            ControllableLabel.prototype.render = function (parent) {
                 var options = this.options,
                     attrs = this.attrsFromOptions(options),
                     style = options.style;
@@ -1978,14 +2095,13 @@
                     this.graphic.addClass(options.className);
                 }
                 this.graphic.labelrank = options.labelrank;
-                controllableMixin.render.call(this);
-            },
-            redraw: function (animation) {
+                ControllableMixin.render.call(this);
+            };
+            ControllableLabel.prototype.redraw = function (animation) {
                 var options = this.options,
                     text = this.text || options.format || options.text,
                     label = this.graphic,
                     point = this.points[0],
-                    show = false,
                     anchor,
                     attrs;
                 label.attr({
@@ -1995,8 +2111,7 @@
                 });
                 anchor = this.anchor(point);
                 attrs = this.position(anchor);
-                show = attrs;
-                if (show) {
+                if (attrs) {
                     label.alignAttr = attrs;
                     attrs.anchorX = anchor.absolutePosition.x;
                     attrs.anchorY = anchor.absolutePosition.y;
@@ -2008,16 +2123,16 @@
                         y: -9999 // #10055
                     });
                 }
-                label.placed = Boolean(show);
-                controllableMixin.redraw.call(this, animation);
-            },
+                label.placed = !!attrs;
+                ControllableMixin.redraw.call(this, animation);
+            };
             /**
              * All basic shapes don't support alignTo() method except label.
              * For a controllable label, we need to subtract translation from
              * options.
              */
-            anchor: function () {
-                var anchor = controllableMixin.anchor.apply(this,
+            ControllableLabel.prototype.anchor = function (_point) {
+                var anchor = ControllableMixin.anchor.apply(this,
                     arguments),
                     x = this.options.x || 0,
                     y = this.options.y || 0;
@@ -2026,7 +2141,7 @@
                 anchor.relativePosition.x -= x;
                 anchor.relativePosition.y -= y;
                 return anchor;
-            },
+            };
             /**
              * Returns the label position relative to its anchor.
              *
@@ -2034,7 +2149,7 @@
              *
              * @return {Highcharts.PositionObject|null}
              */
-            position: function (anchor) {
+            ControllableLabel.prototype.position = function (anchor) {
                 var item = this.graphic,
                     chart = this.annotation.chart,
                     point = this.points[0],
@@ -2087,16 +2202,42 @@
                     }
                 }
                 return showItem ? itemPosition : null;
-            }
-        });
-        /* ********************************************************************** */
-        /**
-         * General symbol definition for labels with connector
-         * @private
-         */
-        H.SVGRenderer.prototype.symbols.connector = function (x, y, w, h, options) {
-            var anchorX = options && options.anchorX,
-                anchorY = options && options.anchorY,
+            };
+            /* *
+             *
+             *  Static Properties
+             *
+             * */
+            /**
+             * A map object which allows to map options attributes to element attributes
+             *
+             * @type {Highcharts.Dictionary<string>}
+             */
+            ControllableLabel.attrsMap = {
+                backgroundColor: 'fill',
+                borderColor: 'stroke',
+                borderWidth: 'stroke-width',
+                zIndex: 'zIndex',
+                borderRadius: 'r',
+                padding: 'padding'
+            };
+            /**
+             * Shapes which do not have background - the object is used for proper
+             * setting of the contrast color.
+             *
+             * @type {Array<string>}
+             */
+            ControllableLabel.shapesWithoutBackground = ['connector'];
+            return ControllableLabel;
+        }());
+        /* ********************************************************************** */
+        /**
+         * General symbol definition for labels with connector
+         * @private
+         */
+        SVGRenderer.prototype.symbols.connector = function (x, y, w, h, options) {
+            var anchorX = options && options.anchorX,
+                anchorY = options && options.anchorY,
                 path,
                 yOffset,
                 lateral = w / 2;
@@ -2132,13 +2273,12 @@
 
         return ControllableLabel;
     });
-    _registerModule(_modules, 'annotations/controllable/ControllableImage.js', [_modules['parts/Utilities.js'], _modules['annotations/controllable/controllableMixin.js'], _modules['annotations/controllable/ControllableLabel.js']], function (U, controllableMixin, ControllableLabel) {
+    _registerModule(_modules, 'Extensions/Annotations/Controllables/ControllableImage.js', [_modules['Extensions/Annotations/Controllables/ControllableLabel.js'], _modules['Extensions/Annotations/Mixins/ControllableMixin.js']], function (ControllableLabel, ControllableMixin) {
         /* *
          *
          *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
          *
          * */
-        var merge = U.merge;
         /* eslint-disable no-invalid-this, valid-jsdoc */
         /**
          * A controllable image class.
@@ -2157,33 +2297,46 @@
          *
          * @param {number} index
          * Index of the image.
-         **/
-        var ControllableImage = function (annotation,
-            options,
-            index) {
-                this.init(annotation,
-            options,
-            index);
-            this.collection = 'shapes';
-        };
-        /**
-         * A map object which allows to map options attributes to element attributes
-         *
-         * @name Highcharts.AnnotationControllableImage.attrsMap
-         * @type {Highcharts.Dictionary<string>}
          */
-        ControllableImage.attrsMap = {
-            width: 'width',
-            height: 'height',
-            zIndex: 'zIndex'
-        };
-        merge(true, ControllableImage.prototype, controllableMixin, /** @lends Annotation.ControllableImage# */ {
-            /**
-             * @type 'image'
-             */
-            type: 'image',
-            translate: controllableMixin.translateShape,
-            render: function (parent) {
+        var ControllableImage = /** @class */ (function () {
+                /* *
+                 *
+                 *  Constructors
+                 *
+                 * */
+                function ControllableImage(annotation, options, index) {
+                    /* *
+                     *
+                     *  Properties
+                     *
+                     * */
+                    this.addControlPoints = ControllableMixin.addControlPoints;
+                this.anchor = ControllableMixin.anchor;
+                this.attr = ControllableMixin.attr;
+                this.attrsFromOptions = ControllableMixin.attrsFromOptions;
+                this.destroy = ControllableMixin.destroy;
+                this.getPointsOptions = ControllableMixin.getPointsOptions;
+                this.init = ControllableMixin.init;
+                this.linkPoints = ControllableMixin.linkPoints;
+                this.point = ControllableMixin.point;
+                this.rotate = ControllableMixin.rotate;
+                this.scale = ControllableMixin.scale;
+                this.setControlPointsVisibility = ControllableMixin.setControlPointsVisibility;
+                this.shouldBeDrawn = ControllableMixin.shouldBeDrawn;
+                this.transform = ControllableMixin.transform;
+                this.transformPoint = ControllableMixin.transformPoint;
+                this.translatePoint = ControllableMixin.translatePoint;
+                this.translateShape = ControllableMixin.translateShape;
+                this.update = ControllableMixin.update;
+                /**
+                 * @type 'image'
+                 */
+                this.type = 'image';
+                this.translate = ControllableMixin.translateShape;
+                this.init(annotation, options, index);
+                this.collection = 'shapes';
+            }
+            ControllableImage.prototype.render = function (parent) {
                 var attrs = this.attrsFromOptions(this.options),
                     options = this.options;
                 this.graphic = this.annotation.chart.renderer
@@ -2192,9 +2345,9 @@
                     .add(parent);
                 this.graphic.width = options.width;
                 this.graphic.height = options.height;
-                controllableMixin.render.call(this);
-            },
-            redraw: function (animation) {
+                ControllableMixin.render.call(this);
+            };
+            ControllableImage.prototype.redraw = function (animation) {
                 var anchor = this.anchor(this.points[0]),
                     position = ControllableLabel.prototype.position.call(this,
                     anchor);
@@ -2211,13 +2364,30 @@
                     });
                 }
                 this.graphic.placed = Boolean(position);
-                controllableMixin.redraw.call(this, animation);
-            }
-        });
+                ControllableMixin.redraw.call(this, animation);
+            };
+            /* *
+             *
+             *  Static Properties
+             *
+             * */
+            /**
+             * A map object which allows to map options attributes to element attributes
+             *
+             * @name Highcharts.AnnotationControllableImage.attrsMap
+             * @type {Highcharts.Dictionary<string>}
+             */
+            ControllableImage.attrsMap = {
+                width: 'width',
+                height: 'height',
+                zIndex: 'zIndex'
+            };
+            return ControllableImage;
+        }());
 
         return ControllableImage;
     });
-    _registerModule(_modules, 'annotations/annotations.src.js', [_modules['parts/Globals.js'], _modules['parts/Utilities.js'], _modules['annotations/controllable/controllableMixin.js'], _modules['annotations/controllable/ControllableRect.js'], _modules['annotations/controllable/ControllableCircle.js'], _modules['annotations/controllable/ControllablePath.js'], _modules['annotations/controllable/ControllableImage.js'], _modules['annotations/controllable/ControllableLabel.js'], _modules['annotations/eventEmitterMixin.js'], _modules['annotations/MockPoint.js'], _modules['annotations/ControlPoint.js']], function (H, U, controllableMixin, ControllableRect, ControllableCircle, ControllablePath, ControllableImage, ControllableLabel, eventEmitterMixin, MockPoint, ControlPoint) {
+    _registerModule(_modules, 'Extensions/Annotations/Annotations.js', [_modules['Core/Animation/AnimationUtilities.js'], _modules['Core/Chart/Chart.js'], _modules['Extensions/Annotations/Mixins/ControllableMixin.js'], _modules['Extensions/Annotations/Controllables/ControllableRect.js'], _modules['Extensions/Annotations/Controllables/ControllableCircle.js'], _modules['Extensions/Annotations/Controllables/ControllablePath.js'], _modules['Extensions/Annotations/Controllables/ControllableImage.js'], _modules['Extensions/Annotations/Controllables/ControllableLabel.js'], _modules['Extensions/Annotations/ControlPoint.js'], _modules['Extensions/Annotations/Mixins/EventEmitterMixin.js'], _modules['Core/Globals.js'], _modules['Extensions/Annotations/MockPoint.js'], _modules['Core/Pointer.js'], _modules['Core/Utilities.js']], function (A, Chart, ControllableMixin, ControllableRect, ControllableCircle, ControllablePath, ControllableImage, ControllableLabel, ControlPoint, EventEmitterMixin, H, MockPoint, Pointer, U) {
         /* *
          *
          *  (c) 2009-2017 Highsoft, Black Label
@@ -2227,6 +2397,8 @@
          *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
          *
          * */
+        var getDeferredAnimation = A.getDeferredAnimation;
+        var chartProto = Chart.prototype;
         var addEvent = U.addEvent,
             defined = U.defined,
             destroyObjectProperties = U.destroyObjectProperties,
@@ -2238,7 +2410,6 @@
             pick = U.pick,
             splat = U.splat,
             wrap = U.wrap;
-        var chartProto = H.Chart.prototype;
         /* *********************************************************************
          *
          * ANNOTATION
@@ -2287,652 +2458,126 @@
          * @param {Highcharts.Chart} chart a chart instance
          * @param {Highcharts.AnnotationsOptions} userOptions the options object
          */
-        var Annotation = H.Annotation = function (chart,
-            userOptions) {
+        var Annotation = /** @class */ (function () {
+                /* *
+                 *
+                 *  Constructors
+                 *
+                 * */
+                function Annotation(chart, userOptions) {
+                    /* *
+                     *
+                     *  Properties
+                     *
+                     * */
+                    this.annotation = void 0;
+                this.coll = 'annotations';
+                this.collection = void 0;
+                this.animationConfig = void 0;
+                this.graphic = void 0;
+                this.group = void 0;
+                this.labelCollector = void 0;
+                this.labelsGroup = void 0;
+                this.shapesGroup = void 0;
                 var labelsAndShapes;
-            /**
-             * The chart that the annotation belongs to.
-             *
-             * @type {Highcharts.Chart}
-             */
-            this.chart = chart;
-            /**
-             * The array of points which defines the annotation.
-             *
-             * @type {Array<Highcharts.Point>}
-             */
-            this.points = [];
-            /**
-             * The array of control points.
-             *
-             * @private
-             * @name Highcharts.Annotation#controlPoints
-             * @type {Array<Annotation.ControlPoint>}
-             */
-            this.controlPoints = [];
-            this.coll = 'annotations';
-            /**
-             * The array of labels which belong to the annotation.
-             *
-             * @private
-             * @name Highcharts.Annotation#labels
-             * @type {Array<Highcharts.AnnotationLabelType>}
-             */
-            this.labels = [];
-            /**
-             * The array of shapes which belong to the annotation.
-             *
-             * @private
-             * @name Highcharts.Annotation#shapes
-             * @type {Array<Highcharts.AnnotationShapeType>}
-             */
-            this.shapes = [];
-            /**
-             * The options for the annotations.
-             *
-             * @name Highcharts.Annotation#options
-             * @type {Highcharts.AnnotationsOptions}
-             */
-            this.options = merge(this.defaultOptions, userOptions);
-            /**
-             * The user options for the annotations.
-             *
-             * @name Highcharts.Annotation#userOptions
-             * @type {Highcharts.AnnotationsOptions}
-             */
-            this.userOptions = userOptions;
-            // Handle labels and shapes - those are arrays
-            // Merging does not work with arrays (stores reference)
-            labelsAndShapes = this.getLabelsAndShapesOptions(this.options, userOptions);
-            this.options.labels = labelsAndShapes.labels;
-            this.options.shapes = labelsAndShapes.shapes;
-            /**
-             * The callback that reports to the overlapping-labels module which
-             * labels it should account for.
-             * @private
-             * @name Highcharts.Annotation#labelCollector
-             * @type {Function}
-             */
-            /**
-             * The group svg element.
-             *
-             * @name Highcharts.Annotation#group
-             * @type {Highcharts.SVGElement}
-             */
-            /**
-             * The group svg element of the annotation's shapes.
-             *
-             * @name Highcharts.Annotation#shapesGroup
-             * @type {Highcharts.SVGElement}
-             */
-            /**
-             * The group svg element of the annotation's labels.
-             *
-             * @name Highcharts.Annotation#labelsGroup
-             * @type {Highcharts.SVGElement}
-             */
-            this.init(chart, this.options);
-        };
-        merge(true, Annotation.prototype, controllableMixin, eventEmitterMixin, 
-        /** @lends Highcharts.Annotation# */
-        {
-            /**
-             * List of events for `annotation.options.events` that should not be
-             * added to `annotation.graphic` but to the `annotation`.
-             *
-             * @private
-             * @type {Array<string>}
-             */
-            nonDOMEvents: ['add', 'afterUpdate', 'drag', 'remove'],
-            /**
-             * A basic type of an annotation. It allows to add custom labels
-             * or shapes. The items  can be tied to points, axis coordinates
-             * or chart pixel coordinates.
-             *
-             * @sample highcharts/annotations/basic/
-             *         Basic annotations
-             * @sample highcharts/demo/annotations/
-             *         Advanced annotations
-             * @sample highcharts/css/annotations
-             *         Styled mode
-             * @sample highcharts/annotations-advanced/controllable
-             *         Controllable items
-             * @sample {highstock} stock/annotations/fibonacci-retracements
-             *         Custom annotation, Fibonacci retracement
-             *
-             * @type         {Array<*>}
-             * @since        6.0.0
-             * @requires     modules/annotations
-             * @optionparent annotations
-             *
-             * @private
-             */
-            defaultOptions: {
                 /**
-                 * Sets an ID for an annotation. Can be user later when removing an
-                 * annotation in [Chart#removeAnnotation(id)](
-                 * /class-reference/Highcharts.Chart#removeAnnotation) method.
+                 * The chart that the annotation belongs to.
                  *
-                 * @type      {number|string}
-                 * @apioption annotations.id
+                 * @type {Highcharts.Chart}
                  */
+                this.chart = chart;
                 /**
-                 * Whether the annotation is visible.
+                 * The array of points which defines the annotation.
                  *
-                 * @sample highcharts/annotations/visible/
-                 *         Set annotation visibility
+                 * @type {Array<Highcharts.Point>}
                  */
-                visible: true,
+                this.points = [];
                 /**
-                 * Allow an annotation to be draggable by a user. Possible
-                 * values are `'x'`, `'xy'`, `'y'` and `''` (disabled).
+                 * The array of control points.
                  *
-                 * @sample highcharts/annotations/draggable/
-                 *         Annotations draggable: 'xy'
+                 * @private
+                 * @name Highcharts.Annotation#controlPoints
+                 * @type {Array<Annotation.ControlPoint>}
+                 */
+                this.controlPoints = [];
+                this.coll = 'annotations';
+                /**
+                 * The array of labels which belong to the annotation.
                  *
-                 * @type {Highcharts.AnnotationDraggableValue}
+                 * @private
+                 * @name Highcharts.Annotation#labels
+                 * @type {Array<Highcharts.AnnotationLabelType>}
                  */
-                draggable: 'xy',
+                this.labels = [];
                 /**
-                 * 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.
+                 * The array of shapes which belong to the annotation.
                  *
-                 * @requires modules/annotations
-                 */
-                labelOptions: {
-                    /**
-                     * The alignment of the annotation's label. If right,
-                     * the right side of the label should be touching the point.
-                     *
-                     * @sample highcharts/annotations/label-position/
-                     *         Set labels position
-                     *
-                     * @type {Highcharts.AlignValue}
-                     */
-                    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.
-                     *
-                     * @sample highcharts/annotations/label-presentation/
-                     *         Set labels graphic options
-                     *
-                     * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
-                     */
-                    backgroundColor: 'rgba(0, 0, 0, 0.75)',
-                    /**
-                     * The border color for the annotation's label.
-                     *
-                     * @sample highcharts/annotations/label-presentation/
-                     *         Set labels graphic options
-                     *
-                     * @type {Highcharts.ColorString}
-                     */
-                    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.
-                     *
-                     * @sample highcharts/annotations/label-position/
-                     *         Set labels position
-                     *
-                     * @type      {number}
-                     * @apioption annotations.labelOptions.distance
-                     */
-                    /**
-                     * A
-                     * [format](https://www.highcharts.com/docs/chart-concepts/labels-and-string-formatting)
-                     * string for the data label.
-                     *
-                     * @see [plotOptions.series.dataLabels.format](plotOptions.series.dataLabels.format.html)
-                     *
-                     * @sample highcharts/annotations/label-text/
-                     *         Set labels text
-                     *
-                     * @type      {string}
-                     * @apioption annotations.labelOptions.format
-                     */
-                    /**
-                     * Alias for the format option.
-                     *
-                     * @see [format](annotations.labelOptions.format.html)
-                     *
-                     * @sample highcharts/annotations/label-text/
-                     *         Set labels text
-                     *
-                     * @type      {string}
-                     * @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.
-                     *
-                     * @sample highcharts/annotations/label-text/
-                     *         Set labels text
-                     *
-                     * @type    {Highcharts.FormatterCallbackFunction<Highcharts.Point>}
-                     * @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.
-                     *
-                     * @sample highcharts/annotations/label-crop-overflow/
-                     *         Crop or justify labels
-                     *
-                     * @validvalue ["allow", "justify"]
-                     */
-                    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`.
-                     *
-                     * @sample highcharts/annotations/label-presentation/
-                     *         Set labels graphic options
-                     *
-                     * @type {boolean|Highcharts.ShadowOptionsObject}
-                     */
-                    shadow: false,
-                    /**
-                     * The name of a symbol to use for the border around the label.
-                     * Symbols are predefined functions on the Renderer object.
-                     *
-                     * @sample highcharts/annotations/shapes/
-                     *         Available shapes for labels
-                     */
-                    shape: 'callout',
-                    /**
-                     * Styles for the annotation's label.
-                     *
-                     * @see [plotOptions.series.dataLabels.style](plotOptions.series.dataLabels.style.html)
-                     *
-                     * @sample highcharts/annotations/label-presentation/
-                     *         Set labels graphic options
-                     *
-                     * @type {Highcharts.CSSObject}
-                     */
-                    style: {
-                        /** @ignore */
-                        fontSize: '11px',
-                        /** @ignore */
-                        fontWeight: 'normal',
-                        /** @ignore */
-                        color: 'contrast'
-                    },
-                    /**
-                     * Whether to [use HTML](https://www.highcharts.com/docs/chart-concepts/labels-and-string-formatting#html)
-                     * to render the annotation's label.
-                     */
-                    useHTML: false,
-                    /**
-                     * The vertical alignment of the annotation's label.
-                     *
-                     * @sample highcharts/annotations/label-position/
-                     *         Set labels position
-                     *
-                     * @type {Highcharts.VerticalAlignValue}
-                     */
-                    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<*>}
-                 * @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 properties and optionally axes.
-                 *
-                 * @sample highcharts/annotations/mock-point/
-                 *         Attach annotation to a mock point
-                 *
-                 * @declare   Highcharts.AnnotationMockPointOptionsObject
-                 * @type      {string|*}
-                 * @requires  modules/annotations
-                 * @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|null}
-                 * @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|null}
-                 * @apioption annotations.labels.point.yAxis
+                 * @private
+                 * @name Highcharts.Annotation#shapes
+                 * @type {Array<Highcharts.AnnotationShapeType>}
                  */
+                this.shapes = [];
                 /**
-                 * 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<*>}
-                 * @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.
+                 * The options for the annotations.
                  *
-                 * @declare   Highcharts.AnnotationMockPointOptionsObject
-                 * @type      {string|Highcharts.AnnotationMockPointOptionsObject}
-                 * @extends   annotations.labels.point
-                 * @apioption annotations.shapes.point
+                 * @name Highcharts.Annotation#options
+                 * @type {Highcharts.AnnotationsOptions}
                  */
+                this.options = merge(this.defaultOptions, userOptions);
                 /**
-                 * 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.
-                 *
-                 * @see [annotations.shapes.point](annotations.shapes.point.html)
+                 * The user options for the annotations.
                  *
-                 * @declare   Highcharts.AnnotationMockPointOptionsObject
-                 * @type      {Array<string|*>}
-                 * @extends   annotations.labels.point
-                 * @apioption annotations.shapes.points
+                 * @name Highcharts.Annotation#userOptions
+                 * @type {Highcharts.AnnotationsOptions}
                  */
+                this.userOptions = userOptions;
+                // Handle labels and shapes - those are arrays
+                // Merging does not work with arrays (stores reference)
+                labelsAndShapes = this.getLabelsAndShapesOptions(this.options, userOptions);
+                this.options.labels = labelsAndShapes.labels;
+                this.options.shapes = labelsAndShapes.shapes;
                 /**
-                 * The URL for an image to use as the annotation shape. Note,
-                 * type has to be set to `'image'`.
-                 *
-                 * @see [annotations.shapes.type](annotations.shapes.type)
-                 * @sample highcharts/annotations/shape-src/
-                 *         Define a marker image url for annotations
-                 *
-                 * @type      {string}
-                 * @apioption annotations.shapes.src
+                 * The callback that reports to the overlapping-labels module which
+                 * labels it should account for.
+                 * @private
+                 * @name Highcharts.Annotation#labelCollector
+                 * @type {Function}
                  */
                 /**
-                 * Id of the marker which will be drawn at the final vertex of the
-                 * path. Custom markers can be defined in defs property.
-                 *
-                 * @see [defs.markers](defs.markers.html)
+                 * The group svg element.
                  *
-                 * @sample highcharts/annotations/custom-markers/
-                 *         Define a custom marker for annotations
-                 *
-                 * @type      {string}
-                 * @apioption annotations.shapes.markerEnd
+                 * @name Highcharts.Annotation#group
+                 * @type {Highcharts.SVGElement}
                  */
                 /**
-                 * Id of the marker which will be drawn at the first vertex of the
-                 * path. Custom markers can be defined in defs property.
-                 *
-                 * @see [defs.markers](defs.markers.html)
-                 *
-                 * @sample {highcharts} highcharts/annotations/custom-markers/
-                 *         Define a custom marker for annotations
+                 * The group svg element of the annotation's shapes.
                  *
-                 * @type      {string}
-                 * @apioption annotations.shapes.markerStart
+                 * @name Highcharts.Annotation#shapesGroup
+                 * @type {Highcharts.SVGElement}
                  */
                 /**
-                 * 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.
+                 * The group svg element of the annotation's labels.
                  *
-                 * @requires  modules/annotations
+                 * @name Highcharts.Annotation#labelsGroup
+                 * @type {Highcharts.SVGElement}
                  */
-                shapeOptions: {
-                    /**
-                     * The width of the shape.
-                     *
-                     * @sample highcharts/annotations/shape/
-                     *         Basic shape annotation
-                     *
-                     * @type      {number}
-                     * @apioption annotations.shapeOptions.width
-                     **/
-                    /**
-                     * The height of the shape.
-                     *
-                     * @sample highcharts/annotations/shape/
-                     *         Basic shape annotation
-                     *
-                     * @type      {number}
-                     * @apioption annotations.shapeOptions.height
-                     */
-                    /**
-                     * The type of the shape, e.g. circle or rectangle.
-                     *
-                     * @sample highcharts/annotations/shape/
-                     *         Basic shape annotation
-                     *
-                     * @type      {string}
-                     * @default   'rect'
-                     * @apioption annotations.shapeOptions.type
-                     */
-                    /**
-                     * The URL for an image to use as the annotation shape. Note,
-                     * type has to be set to `'image'`.
-                     *
-                     * @see [annotations.shapeOptions.type](annotations.shapeOptions.type)
-                     * @sample highcharts/annotations/shape-src/
-                     *         Define a marker image url for annotations
-                     *
-                     * @type      {string}
-                     * @apioption annotations.shapeOptions.src
-                     */
-                    /**
-                     * Name of the dash style to use for the shape's stroke.
-                     *
-                     * @sample {highcharts} highcharts/plotoptions/series-dashstyle-all/
-                     *         Possible values demonstrated
-                     *
-                     * @type      {Highcharts.DashStyleValue}
-                     * @apioption annotations.shapeOptions.dashStyle
-                     */
-                    /**
-                     * The color of the shape's stroke.
-                     *
-                     * @sample highcharts/annotations/shape/
-                     *         Basic shape annotation
-                     *
-                     * @type {Highcharts.ColorString}
-                     */
-                    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.
-                     *
-                     * @sample highcharts/annotations/shape/
-                     *         Basic shape annotation
-                     *
-                     * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
-                     */
-                    fill: 'rgba(0, 0, 0, 0.75)',
-                    /**
-                     * The radius of the shape.
-                     *
-                     * @sample highcharts/annotations/shape/
-                     *         Basic shape annotation
-                     */
-                    r: 0,
-                    /**
-                     * Defines additional snapping area around an annotation
-                     * making this annotation to focus. Defined in pixels.
-                     */
-                    snap: 2
-                },
-                /**
-                 * Options for annotation's control points. Each control point
-                 * inherits options from controlPointOptions object.
-                 * Options from the controlPointOptions can be overwritten
-                 * by options in a specific control point.
-                 *
-                 * @declare   Highcharts.AnnotationControlPointOptionsObject
-                 * @requires  modules/annotations
-                 * @apioption annotations.controlPointOptions
-                 */
-                controlPointOptions: {
-                    /**
-                     * @type      {Highcharts.AnnotationControlPointPositionerFunction}
-                     * @apioption annotations.controlPointOptions.positioner
-                     */
-                    symbol: 'circle',
-                    width: 10,
-                    height: 10,
-                    style: {
-                        stroke: 'black',
-                        'stroke-width': 2,
-                        fill: 'white'
-                    },
-                    visible: false,
-                    events: {}
-                },
-                /**
-                 * Event callback when annotation is added to the chart.
-                 *
-                 * @type      {Highcharts.EventCallbackFunction<Highcharts.Annotation>}
-                 * @since     7.1.0
-                 * @apioption annotations.events.add
-                 */
-                /**
-                 * Event callback when annotation is updated (e.g. drag and
-                 * droppped or resized by control points).
-                 *
-                 * @type      {Highcharts.EventCallbackFunction<Highcharts.Annotation>}
-                 * @since     7.1.0
-                 * @apioption annotations.events.afterUpdate
-                 */
-                /**
-                 * Event callback when annotation is removed from the chart.
-                 *
-                 * @type      {Highcharts.EventCallbackFunction<Highcharts.Annotation>}
-                 * @since     7.1.0
-                 * @apioption annotations.events.remove
-                 */
-                /**
-                 * Events available in annotations.
-                 *
-                 * @requires modules/annotations
-                 */
-                events: {},
-                /**
-                 * The Z index of the annotation.
-                 */
-                zIndex: 6
-            },
+                this.init(chart, this.options);
+            }
             /**
              * Initialize the annotation.
              * @private
              */
-            init: function () {
+            Annotation.prototype.init = function () {
+                var chart = this.chart,
+                    animOptions = this.options.animation;
                 this.linkPoints();
                 this.addControlPoints();
                 this.addShapes();
                 this.addLabels();
                 this.setLabelCollector();
-            },
-            getLabelsAndShapesOptions: function (baseOptions, newOptions) {
+                this.animationConfig = getDeferredAnimation(chart, animOptions);
+            };
+            Annotation.prototype.getLabelsAndShapesOptions = function (baseOptions, newOptions) {
                 var mergedOptions = {};
                 ['labels', 'shapes'].forEach(function (name) {
                     if (baseOptions[name]) {
@@ -2942,28 +2587,28 @@
                     }
                 });
                 return mergedOptions;
-            },
-            addShapes: function () {
+            };
+            Annotation.prototype.addShapes = function () {
                 (this.options.shapes || []).forEach(function (shapeOptions, i) {
                     var shape = this.initShape(shapeOptions,
                         i);
                     merge(true, this.options.shapes[i], shape.options);
                 }, this);
-            },
-            addLabels: function () {
+            };
+            Annotation.prototype.addLabels = function () {
                 (this.options.labels || []).forEach(function (labelsOptions, i) {
                     var labels = this.initLabel(labelsOptions,
                         i);
                     merge(true, this.options.labels[i], labels.options);
                 }, this);
-            },
-            addClipPaths: function () {
+            };
+            Annotation.prototype.addClipPaths = function () {
                 this.setClipAxes();
                 if (this.clipXAxis && this.clipYAxis) {
                     this.clipRect = this.chart.renderer.clipRect(this.getClipBox());
                 }
-            },
-            setClipAxes: function () {
+            };
+            Annotation.prototype.setClipAxes = function () {
                 var xAxes = this.chart.xAxis,
                     yAxes = this.chart.yAxis,
                     linkedAxes = (this.options.labels || [])
@@ -2981,8 +2626,8 @@
                 }, []);
                 this.clipXAxis = linkedAxes[0];
                 this.clipYAxis = linkedAxes[1];
-            },
-            getClipBox: function () {
+            };
+            Annotation.prototype.getClipBox = function () {
                 if (this.clipXAxis && this.clipYAxis) {
                     return {
                         x: this.clipXAxis.left,
@@ -2991,8 +2636,8 @@
                         height: this.clipYAxis.height
                     };
                 }
-            },
-            setLabelCollector: function () {
+            };
+            Annotation.prototype.setLabelCollector = function () {
                 var annotation = this;
                 annotation.labelCollector = function () {
                     return annotation.labels.reduce(function (labels, label) {
@@ -3003,16 +2648,16 @@
                     }, []);
                 };
                 annotation.chart.labelCollectors.push(annotation.labelCollector);
-            },
+            };
             /**
              * Set an annotation options.
              * @private
              * @param {Highcharts.AnnotationsOptions} - user options for an annotation
              */
-            setOptions: function (userOptions) {
+            Annotation.prototype.setOptions = function (userOptions) {
                 this.options = merge(this.defaultOptions, userOptions);
-            },
-            redraw: function (animation) {
+            };
+            Annotation.prototype.redraw = function (animation) {
                 this.linkPoints();
                 if (!this.graphic) {
                     this.render();
@@ -3022,14 +2667,14 @@
                 }
                 this.redrawItems(this.shapes, animation);
                 this.redrawItems(this.labels, animation);
-                controllableMixin.redraw.call(this, animation);
-            },
+                ControllableMixin.redraw.call(this, animation);
+            };
             /**
              * @private
              * @param {Array<Highcharts.AnnotationControllable>} items
              * @param {boolean} [animation]
              */
-            redrawItems: function (items, animation) {
+            Annotation.prototype.redrawItems = function (items, animation) {
                 var i = items.length;
                 // needs a backward loop
                 // labels/shapes array might be modified
@@ -3037,22 +2682,23 @@
                 while (i--) {
                     this.redrawItem(items[i], animation);
                 }
-            },
+            };
             /**
              * @private
              * @param {Array<Highcharts.AnnotationControllable>} items
              */
-            renderItems: function (items) {
+            Annotation.prototype.renderItems = function (items) {
                 var i = items.length;
                 while (i--) {
                     this.renderItem(items[i]);
                 }
-            },
-            render: function () {
+            };
+            Annotation.prototype.render = function () {
                 var renderer = this.chart.renderer;
                 this.graphic = renderer
                     .g('annotation')
                     .attr({
+                    opacity: 0,
                     zIndex: this.options.zIndex,
                     visibility: this.options.visible ?
                         'visible' :
@@ -3079,8 +2725,8 @@
                 this.renderItems(this.shapes);
                 this.renderItems(this.labels);
                 this.addEvents();
-                controllableMixin.render.call(this);
-            },
+                ControllableMixin.render.call(this);
+            };
             /**
              * Set the annotation's visibility.
              * @private
@@ -3088,7 +2734,7 @@
              * Whether to show or hide an annotation. If the param is omitted, the
              * annotation's visibility is toggled.
              */
-            setVisibility: function (visible) {
+            Annotation.prototype.setVisibility = function (visible) {
                 var options = this.options,
                     visibility = pick(visible, !options.visible);
                 this.graphic.attr('visibility', visibility ? 'visible' : 'hidden');
@@ -3096,15 +2742,15 @@
                     this.setControlPointsVisibility(false);
                 }
                 options.visible = visibility;
-            },
-            setControlPointsVisibility: function (visible) {
+            };
+            Annotation.prototype.setControlPointsVisibility = function (visible) {
                 var setItemControlPointsVisibility = function (item) {
                         item.setControlPointsVisibility(visible);
                 };
-                controllableMixin.setControlPointsVisibility.call(this, visible);
+                ControllableMixin.setControlPointsVisibility.call(this, visible);
                 this.shapes.forEach(setItemControlPointsVisibility);
                 this.labels.forEach(setItemControlPointsVisibility);
-            },
+            };
             /**
              * Destroy the annotation. This function does not touch the chart
              * that the annotation belongs to (all annotations are kept in
@@ -3112,7 +2758,7 @@
              * {@link Highcharts.Chart#removeAnnotation} instead.
              * @private
              */
-            destroy: function () {
+            Annotation.prototype.destroy = function () {
                 var chart = this.chart,
                     destroyItem = function (item) {
                         item.destroy();
@@ -3122,18 +2768,18 @@
                 this.clipXAxis = null;
                 this.clipYAxis = null;
                 erase(chart.labelCollectors, this.labelCollector);
-                eventEmitterMixin.destroy.call(this);
-                controllableMixin.destroy.call(this);
+                EventEmitterMixin.destroy.call(this);
+                ControllableMixin.destroy.call(this);
                 destroyObjectProperties(this, chart);
-            },
+            };
             /**
              * See {@link Highcharts.Chart#removeAnnotation}.
              * @private
              */
-            remove: function () {
+            Annotation.prototype.remove = function () {
                 // Let chart.update() remove annoations on demand
                 return this.chart.removeAnnotation(this);
-            },
+            };
             /**
              * Updates an annotation.
              *
@@ -3144,7 +2790,7 @@
              *
              * @return {void}
              */
-            update: function (userOptions, redraw) {
+            Annotation.prototype.update = function (userOptions, redraw) {
                 var chart = this.chart,
                     labelsAndShapes = this.getLabelsAndShapesOptions(this.userOptions,
                     userOptions),
@@ -3164,17 +2810,17 @@
                 }
                 fireEvent(this, 'afterUpdate');
                 this.isUpdating = false;
-            },
+            };
             /* *************************************************************
-             * ITEM SECTION
-             * Contains methods for handling a single item in an annotation
-             **************************************************************** */
+                * 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, index) {
+            Annotation.prototype.initShape = function (shapeOptions, index) {
                 var options = merge(this.options.shapeOptions, {
                         controlPointOptions: this.options.controlPointOptions
                     },
@@ -3185,98 +2831,701 @@
                 shape.itemType = 'shape';
                 this.shapes.push(shape);
                 return shape;
-            },
+            };
             /**
              * Initialisation of a single label
              * @private
              */
-            initLabel: function (labelOptions, index) {
+            Annotation.prototype.initLabel = function (labelOptions, index) {
                 var options = merge(this.options.labelOptions, {
                         controlPointOptions: this.options.controlPointOptions
                     },
-                    labelOptions),
-                    label = new ControllableLabel(this,
-                    options,
-                    index);
-                label.itemType = 'label';
-                this.labels.push(label);
-                return label;
-            },
-            /**
-             * Redraw a single item.
-             * @private
-             * @param {Annotation.Label|Annotation.Shape} item
-             * @param {boolean} [animation]
-             */
-            redrawItem: function (item, animation) {
-                item.linkPoints();
-                if (!item.shouldBeDrawn()) {
-                    this.destroyItem(item);
-                }
-                else {
-                    if (!item.graphic) {
-                        this.renderItem(item);
-                    }
-                    item.redraw(pick(animation, true) && item.graphic.placed);
-                    if (item.points.length) {
-                        this.adjustVisibility(item);
-                    }
-                }
-            },
-            /**
-             * Hide or show annotaiton attached to points.
-             * @private
-             * @param {Annotation.Label|Annotation.Shape} item
-             */
-            adjustVisibility: function (item) {
-                var hasVisiblePoints = false,
-                    label = item.graphic;
-                item.points.forEach(function (point) {
-                    if (point.series.visible !== false &&
-                        point.visible !== false) {
-                        hasVisiblePoints = true;
-                    }
-                });
-                if (!hasVisiblePoints) {
-                    label.hide();
-                }
-                else if (label.visibility === 'hidden') {
-                    label.show();
-                }
-            },
-            /**
-             * Destroy a single item.
-             * @private
-             * @param {Annotation.Label|Annotation.Shape} item
-             */
-            destroyItem: function (item) {
-                // erase from shapes or labels array
-                erase(this[item.itemType + 's'], item);
-                item.destroy();
-            },
-            /**
-             * @private
-             */
-            renderItem: function (item) {
-                item.render(item.itemType === 'label' ?
-                    this.labelsGroup :
-                    this.shapesGroup);
+                    labelOptions),
+                    label = new ControllableLabel(this,
+                    options,
+                    index);
+                label.itemType = 'label';
+                this.labels.push(label);
+                return label;
+            };
+            /**
+             * Redraw a single item.
+             * @private
+             * @param {Annotation.Label|Annotation.Shape} item
+             * @param {boolean} [animation]
+             */
+            Annotation.prototype.redrawItem = function (item, animation) {
+                item.linkPoints();
+                if (!item.shouldBeDrawn()) {
+                    this.destroyItem(item);
+                }
+                else {
+                    if (!item.graphic) {
+                        this.renderItem(item);
+                    }
+                    item.redraw(pick(animation, true) && item.graphic.placed);
+                    if (item.points.length) {
+                        this.adjustVisibility(item);
+                    }
+                }
+            };
+            /**
+             * Hide or show annotaiton attached to points.
+             * @private
+             * @param {Annotation.Label|Annotation.Shape} item
+             */
+            Annotation.prototype.adjustVisibility = function (item) {
+                var hasVisiblePoints = false,
+                    label = item.graphic;
+                item.points.forEach(function (point) {
+                    if (point.series.visible !== false &&
+                        point.visible !== false) {
+                        hasVisiblePoints = true;
+                    }
+                });
+                if (!hasVisiblePoints) {
+                    label.hide();
+                }
+                else if (label.visibility === 'hidden') {
+                    label.show();
+                }
+            };
+            /**
+             * Destroy a single item.
+             * @private
+             * @param {Annotation.Label|Annotation.Shape} item
+             */
+            Annotation.prototype.destroyItem = function (item) {
+                // erase from shapes or labels array
+                erase(this[item.itemType + 's'], item);
+                item.destroy();
+            };
+            /**
+             * @private
+             */
+            Annotation.prototype.renderItem = function (item) {
+                item.render(item.itemType === 'label' ?
+                    this.labelsGroup :
+                    this.shapesGroup);
+            };
+            /**
+             * @private
+             */
+            Annotation.ControlPoint = ControlPoint;
+            /**
+             * @private
+             */
+            Annotation.MockPoint = MockPoint;
+            /**
+             * An object uses for mapping between a shape type and a constructor.
+             * To add a new shape type extend this object with type name as a key
+             * and a constructor as its value.
+             */
+            Annotation.shapesMap = {
+                'rect': ControllableRect,
+                'circle': ControllableCircle,
+                'path': ControllablePath,
+                'image': ControllableImage
+            };
+            /**
+             * @private
+             */
+            Annotation.types = {};
+            return Annotation;
+        }());
+        merge(true, Annotation.prototype, ControllableMixin, EventEmitterMixin, 
+        // restore original Annotation implementation after mixin overwrite
+        merge(Annotation.prototype, 
+        /** @lends Highcharts.Annotation# */
+        {
+            /**
+             * List of events for `annotation.options.events` that should not be
+             * added to `annotation.graphic` but to the `annotation`.
+             *
+             * @private
+             * @type {Array<string>}
+             */
+            nonDOMEvents: ['add', 'afterUpdate', 'drag', 'remove'],
+            /**
+             * A basic type of an annotation. It allows to add custom labels
+             * or shapes. The items  can be tied to points, axis coordinates
+             * or chart pixel coordinates.
+             *
+             * @sample highcharts/annotations/basic/
+             *         Basic annotations
+             * @sample highcharts/demo/annotations/
+             *         Advanced annotations
+             * @sample highcharts/css/annotations
+             *         Styled mode
+             * @sample highcharts/annotations-advanced/controllable
+             *         Controllable items
+             * @sample {highstock} stock/annotations/fibonacci-retracements
+             *         Custom annotation, Fibonacci retracement
+             *
+             * @type         {Array<*>}
+             * @since        6.0.0
+             * @requires     modules/annotations
+             * @optionparent annotations
+             *
+             * @private
+             */
+            defaultOptions: {
+                /**
+                 * Sets an ID for an annotation. Can be user later when
+                 * removing an annotation in [Chart#removeAnnotation(id)](
+                 * /class-reference/Highcharts.Chart#removeAnnotation) method.
+                 *
+                 * @type      {number|string}
+                 * @apioption annotations.id
+                 */
+                /**
+                 * Whether the annotation is visible.
+                 *
+                 * @sample highcharts/annotations/visible/
+                 *         Set annotation visibility
+                 */
+                visible: true,
+                /**
+                 * Enable or disable the initial animation when a series is
+                 * displayed for the `annotation`. The animation can also be set
+                 * as a configuration object. Please note that this option only
+                 * applies to the initial animation.
+                 * For other animations, see [chart.animation](#chart.animation)
+                 * and the animation parameter under the API methods.
+                 * The following properties are supported:
+                 *
+                 * - `defer`: The animation delay time in milliseconds.
+                 *
+                 * @sample {highcharts} highcharts/annotations/defer/
+                 *          Animation defer settings
+                 * @type {boolean|Partial<Highcharts.AnimationOptionsObject>}
+                 * @since 8.2.0
+                 * @apioption annotations.animation
+                 */
+                animation: {},
+                /**
+                 * The animation delay time in milliseconds.
+                 * Set to `0` renders annotation immediately.
+                 * As `undefined` inherits defer time from the [series.animation.defer](#plotOptions.series.animation.defer).
+                 *
+                 * @type      {number}
+                 * @since 8.2.0
+                 * @apioption annotations.animation.defer
+                 */
+                /**
+                 * Allow an annotation to be draggable by a user. Possible
+                 * values are `'x'`, `'xy'`, `'y'` and `''` (disabled).
+                 *
+                 * @sample highcharts/annotations/draggable/
+                 *         Annotations draggable: 'xy'
+                 *
+                 * @type {Highcharts.AnnotationDraggableValue}
+                 */
+                draggable: 'xy',
+                /**
+                 * 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.
+                 *
+                 * @requires modules/annotations
+                 */
+                labelOptions: {
+                    /**
+                     * The alignment of the annotation's label. If right,
+                     * the right side of the label should be touching the point.
+                     *
+                     * @sample highcharts/annotations/label-position/
+                     *         Set labels position
+                     *
+                     * @type {Highcharts.AlignValue}
+                     */
+                    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.
+                     *
+                     * @sample highcharts/annotations/label-presentation/
+                     *         Set labels graphic options
+                     *
+                     * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
+                     */
+                    backgroundColor: 'rgba(0, 0, 0, 0.75)',
+                    /**
+                     * The border color for the annotation's label.
+                     *
+                     * @sample highcharts/annotations/label-presentation/
+                     *         Set labels graphic options
+                     *
+                     * @type {Highcharts.ColorString}
+                     */
+                    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.
+                     *
+                     * @sample highcharts/annotations/label-position/
+                     *         Set labels position
+                     *
+                     * @type      {number}
+                     * @apioption annotations.labelOptions.distance
+                     */
+                    /**
+                     * A
+                     * [format](https://www.highcharts.com/docs/chart-concepts/labels-and-string-formatting)
+                     * string for the data label.
+                     *
+                     * @see [plotOptions.series.dataLabels.format](plotOptions.series.dataLabels.format.html)
+                     *
+                     * @sample highcharts/annotations/label-text/
+                     *         Set labels text
+                     *
+                     * @type      {string}
+                     * @apioption annotations.labelOptions.format
+                     */
+                    /**
+                     * Alias for the format option.
+                     *
+                     * @see [format](annotations.labelOptions.format.html)
+                     *
+                     * @sample highcharts/annotations/label-text/
+                     *         Set labels text
+                     *
+                     * @type      {string}
+                     * @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.
+                     *
+                     * @sample highcharts/annotations/label-text/
+                     *         Set labels text
+                     *
+                     * @type    {Highcharts.FormatterCallbackFunction<Highcharts.Point>}
+                     * @default function () { return defined(this.y) ? this.y : 'Annotation label'; }
+                     */
+                    formatter: function () {
+                        return defined(this.y) ? this.y : 'Annotation label';
+                    },
+                    /**
+                     * Whether the annotation is visible in the exported data
+                     * table.
+                     *
+                     * @sample highcharts/annotations/include-in-data-export/
+                     *         Do not include in the data export
+                     *
+                     * @since 8.2.0
+                     * @requires modules/export-data
+                     */
+                    includeInDataExport: true,
+                    /**
+                     * How to handle the annotation's label that flow outside
+                     * the plot area. The justify option aligns the label inside
+                     * the plot area.
+                     *
+                     * @sample highcharts/annotations/label-crop-overflow/
+                     *         Crop or justify labels
+                     *
+                     * @validvalue ["allow", "justify"]
+                     */
+                    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`.
+                     *
+                     * @sample highcharts/annotations/label-presentation/
+                     *         Set labels graphic options
+                     *
+                     * @type {boolean|Highcharts.ShadowOptionsObject}
+                     */
+                    shadow: false,
+                    /**
+                     * The name of a symbol to use for the border around the
+                     * label. Symbols are predefined functions on the Renderer
+                     * object.
+                     *
+                     * @sample highcharts/annotations/shapes/
+                     *         Available shapes for labels
+                     */
+                    shape: 'callout',
+                    /**
+                     * Styles for the annotation's label.
+                     *
+                     * @see [plotOptions.series.dataLabels.style](plotOptions.series.dataLabels.style.html)
+                     *
+                     * @sample highcharts/annotations/label-presentation/
+                     *         Set labels graphic options
+                     *
+                     * @type {Highcharts.CSSObject}
+                     */
+                    style: {
+                        /** @ignore */
+                        fontSize: '11px',
+                        /** @ignore */
+                        fontWeight: 'normal',
+                        /** @ignore */
+                        color: 'contrast'
+                    },
+                    /**
+                     * Whether to [use HTML](https://www.highcharts.com/docs/chart-concepts/labels-and-string-formatting#html)
+                     * to render the annotation's label.
+                     */
+                    useHTML: false,
+                    /**
+                     * The vertical alignment of the annotation's label.
+                     *
+                     * @sample highcharts/annotations/label-position/
+                     *         Set labels position
+                     *
+                     * @type {Highcharts.VerticalAlignValue}
+                     */
+                    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<*>}
+                 * @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 properties and optionally axes.
+                 *
+                 * @sample highcharts/annotations/mock-point/
+                 *         Attach annotation to a mock point
+                 *
+                 * @declare   Highcharts.AnnotationMockPointOptionsObject
+                 * @type      {string|*}
+                 * @requires  modules/annotations
+                 * @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|null}
+                 * @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|null}
+                 * @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<*>}
+                 * @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.
+                 *
+                 * @declare   Highcharts.AnnotationMockPointOptionsObject
+                 * @type      {string|Highcharts.AnnotationMockPointOptionsObject}
+                 * @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.
+                 *
+                 * @see [annotations.shapes.point](annotations.shapes.point.html)
+                 *
+                 * @declare   Highcharts.AnnotationMockPointOptionsObject
+                 * @type      {Array<string|*>}
+                 * @extends   annotations.labels.point
+                 * @apioption annotations.shapes.points
+                 */
+                /**
+                 * The URL for an image to use as the annotation shape. Note,
+                 * type has to be set to `'image'`.
+                 *
+                 * @see [annotations.shapes.type](annotations.shapes.type)
+                 * @sample highcharts/annotations/shape-src/
+                 *         Define a marker image url for annotations
+                 *
+                 * @type      {string}
+                 * @apioption annotations.shapes.src
+                 */
+                /**
+                 * Id of the marker which will be drawn at the final vertex of
+                 * the path. Custom markers can be defined in defs property.
+                 *
+                 * @see [defs.markers](defs.markers.html)
+                 *
+                 * @sample highcharts/annotations/custom-markers/
+                 *         Define a custom marker for annotations
+                 *
+                 * @type      {string}
+                 * @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.
+                 *
+                 * @see [defs.markers](defs.markers.html)
+                 *
+                 * @sample {highcharts} highcharts/annotations/custom-markers/
+                 *         Define a custom marker for annotations
+                 *
+                 * @type      {string}
+                 * @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.
+                 *
+                 * @requires  modules/annotations
+                 */
+                shapeOptions: {
+                    /**
+                     * The width of the shape.
+                     *
+                     * @sample highcharts/annotations/shape/
+                     *         Basic shape annotation
+                     *
+                     * @type      {number}
+                     * @apioption annotations.shapeOptions.width
+                     **/
+                    /**
+                     * The height of the shape.
+                     *
+                     * @sample highcharts/annotations/shape/
+                     *         Basic shape annotation
+                     *
+                     * @type      {number}
+                     * @apioption annotations.shapeOptions.height
+                     */
+                    /**
+                     * The type of the shape, e.g. circle or rectangle.
+                     *
+                     * @sample highcharts/annotations/shape/
+                     *         Basic shape annotation
+                     *
+                     * @type      {string}
+                     * @default   rect
+                     * @apioption annotations.shapeOptions.type
+                     */
+                    /**
+                     * The URL for an image to use as the annotation shape.
+                     * Note, type has to be set to `'image'`.
+                     *
+                     * @see [annotations.shapeOptions.type](annotations.shapeOptions.type)
+                     * @sample highcharts/annotations/shape-src/
+                     *         Define a marker image url for annotations
+                     *
+                     * @type      {string}
+                     * @apioption annotations.shapeOptions.src
+                     */
+                    /**
+                     * Name of the dash style to use for the shape's stroke.
+                     *
+                     * @sample {highcharts} highcharts/plotoptions/series-dashstyle-all/
+                     *         Possible values demonstrated
+                     *
+                     * @type      {Highcharts.DashStyleValue}
+                     * @apioption annotations.shapeOptions.dashStyle
+                     */
+                    /**
+                     * The color of the shape's stroke.
+                     *
+                     * @sample highcharts/annotations/shape/
+                     *         Basic shape annotation
+                     *
+                     * @type {Highcharts.ColorString}
+                     */
+                    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.
+                     *
+                     * @sample highcharts/annotations/shape/
+                     *         Basic shape annotation
+                     *
+                     * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
+                     */
+                    fill: 'rgba(0, 0, 0, 0.75)',
+                    /**
+                     * The radius of the shape.
+                     *
+                     * @sample highcharts/annotations/shape/
+                     *         Basic shape annotation
+                     */
+                    r: 0,
+                    /**
+                     * Defines additional snapping area around an annotation
+                     * making this annotation to focus. Defined in pixels.
+                     */
+                    snap: 2
+                },
+                /**
+                 * Options for annotation's control points. Each control point
+                 * inherits options from controlPointOptions object.
+                 * Options from the controlPointOptions can be overwritten
+                 * by options in a specific control point.
+                 *
+                 * @declare   Highcharts.AnnotationControlPointOptionsObject
+                 * @requires  modules/annotations
+                 * @apioption annotations.controlPointOptions
+                 */
+                controlPointOptions: {
+                    /**
+                     * @type      {Highcharts.AnnotationControlPointPositionerFunction}
+                     * @apioption annotations.controlPointOptions.positioner
+                     */
+                    symbol: 'circle',
+                    width: 10,
+                    height: 10,
+                    style: {
+                        stroke: 'black',
+                        'stroke-width': 2,
+                        fill: 'white'
+                    },
+                    visible: false,
+                    events: {}
+                },
+                /**
+                 * Event callback when annotation is added to the chart.
+                 *
+                 * @type      {Highcharts.EventCallbackFunction<Highcharts.Annotation>}
+                 * @since     7.1.0
+                 * @apioption annotations.events.add
+                 */
+                /**
+                 * Event callback when annotation is updated (e.g. drag and
+                 * droppped or resized by control points).
+                 *
+                 * @type      {Highcharts.EventCallbackFunction<Highcharts.Annotation>}
+                 * @since     7.1.0
+                 * @apioption annotations.events.afterUpdate
+                 */
+                /**
+                 * Event callback when annotation is removed from the chart.
+                 *
+                 * @type      {Highcharts.EventCallbackFunction<Highcharts.Annotation>}
+                 * @since     7.1.0
+                 * @apioption annotations.events.remove
+                 */
+                /**
+                 * Events available in annotations.
+                 *
+                 * @requires modules/annotations
+                 */
+                events: {},
+                /**
+                 * The Z index of the annotation.
+                 */
+                zIndex: 6
             }
-        });
-        /**
-         * An object uses for mapping between a shape type and a constructor.
-         * To add a new shape type extend this object with type name as a key
-         * and a constructor as its value.
-         */
-        Annotation.shapesMap = {
-            'rect': ControllableRect,
-            'circle': ControllableCircle,
-            'path': ControllablePath,
-            'image': ControllableImage
-        };
-        Annotation.types = {};
-        Annotation.MockPoint = MockPoint;
-        Annotation.ControlPoint = ControlPoint;
+        }));
         H.extendAnnotation = function (Constructor, BaseConstructor, prototype, defaultOptions) {
             BaseConstructor = BaseConstructor || Annotation;
             merge(true, Constructor.prototype, BaseConstructor.prototype, prototype);
@@ -3309,6 +3558,9 @@
                 this.options.annotations.push(annotation.options);
                 if (pick(redraw, true)) {
                     annotation.redraw();
+                    annotation.graphic.attr({
+                        opacity: 1
+                    });
                 }
                 return annotation;
             },
@@ -3337,6 +3589,9 @@
                 this.plotBoxClip.attr(this.plotBox);
                 this.annotations.forEach(function (annotation) {
                     annotation.redraw();
+                    annotation.graphic.animate({
+                        opacity: 1
+                    }, annotation.animationConfig);
                 });
             }
         });
@@ -3365,15 +3620,133 @@
                 chart.plotBoxClip.destroy();
                 chart.controlPointsGroup.destroy();
             });
+            addEvent(chart, 'exportData', function (event) {
+                var _a,
+                    _b,
+                    _c,
+                    _d,
+                    _e,
+                    _f,
+                    _g,
+                    _h;
+                var annotations = chart.annotations,
+                    csvColumnHeaderFormatter = ((this.options.exporting &&
+                        this.options.exporting.csv) ||
+                        {}).columnHeaderFormatter, 
+                    // If second row doesn't have xValues
+                    // then it is a title row thus multiple level header is in use.
+                    multiLevelHeaders = !event.dataRows[1].xValues,
+                    annotationHeader = (_b = (_a = chart.options.lang) === null || _a === void 0 ? void 0 : _a.exportData) === null || _b === void 0 ? void 0 : _b.annotationHeader,
+                    columnHeaderFormatter = function (index) {
+                        var s;
+                    if (csvColumnHeaderFormatter) {
+                        s = csvColumnHeaderFormatter(index);
+                        if (s !== false) {
+                            return s;
+                        }
+                    }
+                    s = annotationHeader + ' ' + index;
+                    if (multiLevelHeaders) {
+                        return {
+                            columnTitle: s,
+                            topLevelColumnTitle: s
+                        };
+                    }
+                    return s;
+                }, startRowLength = event.dataRows[0].length, annotationSeparator = (_e = (_d = (_c = chart.options.exporting) === null || _c === void 0 ? void 0 : _c.csv) === null || _d === void 0 ? void 0 : _d.annotations) === null || _e === void 0 ? void 0 : _e.itemDelimiter, joinAnnotations = (_h = (_g = (_f = chart.options.exporting) === null || _f === void 0 ? void 0 : _f.csv) === null || _g === void 0 ? void 0 : _g.annotations) === null || _h === void 0 ? void 0 : _h.join;
+                annotations.forEach(function (annotation) {
+                    if (annotation.options.labelOptions.includeInDataExport) {
+                        annotation.labels.forEach(function (label) {
+                            if (label.options.text) {
+                                var annotationText_1 = label.options.text;
+                                label.points.forEach(function (points) {
+                                    var annotationX = points.x,
+                                        xAxisIndex = points.series.xAxis ?
+                                            points.series.xAxis.options.index :
+                                            -1;
+                                    var wasAdded = false;
+                                    // Annotation not connected to any xAxis -
+                                    // add new row.
+                                    if (xAxisIndex === -1) {
+                                        var n = event.dataRows[0].length,
+                                            newRow = new Array(n);
+                                        for (var i = 0; i < n; ++i) {
+                                            newRow[i] = '';
+                                        }
+                                        newRow.push(annotationText_1);
+                                        newRow.xValues = [];
+                                        newRow.xValues[xAxisIndex] = annotationX;
+                                        event.dataRows.push(newRow);
+                                        wasAdded = true;
+                                    }
+                                    // Annotation placed on a exported data point
+                                    // - add new column
+                                    if (!wasAdded) {
+                                        event.dataRows.forEach(function (row, rowIndex) {
+                                            if (!wasAdded &&
+                                                row.xValues &&
+                                                xAxisIndex !== void 0 &&
+                                                annotationX === row.xValues[xAxisIndex]) {
+                                                if (joinAnnotations &&
+                                                    row.length > startRowLength) {
+                                                    row[row.length - 1] +=
+                                                        annotationSeparator + annotationText_1;
+                                                }
+                                                else {
+                                                    row.push(annotationText_1);
+                                                }
+                                                wasAdded = true;
+                                            }
+                                        });
+                                    }
+                                    // Annotation not placed on any exported data point,
+                                    // but connected to the xAxis - add new row
+                                    if (!wasAdded) {
+                                        var n = event.dataRows[0].length,
+                                            newRow = new Array(n);
+                                        for (var i = 0; i < n; ++i) {
+                                            newRow[i] = '';
+                                        }
+                                        newRow[0] = annotationX;
+                                        newRow.push(annotationText_1);
+                                        newRow.xValues = [];
+                                        if (xAxisIndex !== void 0) {
+                                            newRow.xValues[xAxisIndex] = annotationX;
+                                        }
+                                        event.dataRows.push(newRow);
+                                    }
+                                });
+                            }
+                        });
+                    }
+                });
+                var maxRowLen = 0;
+                event.dataRows.forEach(function (row) {
+                    maxRowLen = Math.max(maxRowLen, row.length);
+                });
+                var newRows = maxRowLen - event.dataRows[0].length;
+                for (var i = 0; i < newRows; i++) {
+                    var header = columnHeaderFormatter(i + 1);
+                    if (multiLevelHeaders) {
+                        event.dataRows[0].push(header.topLevelColumnTitle);
+                        event.dataRows[1].push(header.columnTitle);
+                    }
+                    else {
+                        event.dataRows[0].push(header);
+                    }
+                }
+            });
         });
-        wrap(H.Pointer.prototype, 'onContainerMouseDown', function (proceed) {
+        wrap(Pointer.prototype, 'onContainerMouseDown', function (proceed) {
             if (!this.chart.hasDraggedAnnotation) {
                 proceed.apply(this, Array.prototype.slice.call(arguments, 1));
             }
         });
+        H.Annotation = Annotation;
 
+        return Annotation;
     });
-    _registerModule(_modules, 'mixins/navigation.js', [], function () {
+    _registerModule(_modules, 'Mixins/Navigation.js', [], function () {
         /**
          *
          *  (c) 2010-2018 Paweł Fus
@@ -3432,7 +3805,7 @@
 
         return chartNavigation;
     });
-    _registerModule(_modules, 'annotations/navigationBindings.js', [_modules['parts/Globals.js'], _modules['parts/Utilities.js'], _modules['mixins/navigation.js']], function (H, U, chartNavigationMixin) {
+    _registerModule(_modules, 'Extensions/Annotations/NavigationBindings.js', [_modules['Extensions/Annotations/Annotations.js'], _modules['Core/Chart/Chart.js'], _modules['Mixins/Navigation.js'], _modules['Core/Globals.js'], _modules['Core/Utilities.js']], function (Annotation, Chart, chartNavigationMixin, H, U) {
         /* *
          *
          *  (c) 2009-2017 Highsoft, Black Label
@@ -3442,6 +3815,19 @@
          *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
          *
          * */
+        var addEvent = U.addEvent,
+            attr = U.attr,
+            extend = U.extend,
+            format = U.format,
+            fireEvent = U.fireEvent,
+            isArray = U.isArray,
+            isFunction = U.isFunction,
+            isNumber = U.isNumber,
+            isObject = U.isObject,
+            merge = U.merge,
+            objectEach = U.objectEach,
+            pick = U.pick,
+            setOptions = U.setOptions;
         /**
          * A config object for navigation bindings in annotations.
          *
@@ -3468,18 +3854,6 @@
         * @name Highcharts.NavigationBindingsOptionsObject#steps
         * @type {Array<Function>|undefined}
         */
-        var addEvent = U.addEvent,
-            attr = U.attr,
-            extend = U.extend,
-            format = U.format,
-            fireEvent = U.fireEvent,
-            isArray = U.isArray,
-            isFunction = U.isFunction,
-            isNumber = U.isNumber,
-            isObject = U.isObject,
-            merge = U.merge,
-            objectEach = U.objectEach,
-            pick = U.pick;
         var doc = H.doc,
             win = H.win,
             PREFIX = 'highcharts-';
@@ -3637,7 +4011,7 @@
                         navigation.bindingsChartClick(this, e);
                     }
                 }));
-                navigation.eventsToUnbind.push(addEvent(chart.container, 'mousemove', function (e) {
+                navigation.eventsToUnbind.push(addEvent(chart.container, H.isTouchDevice ? 'touchmove' : 'mousemove', function (e) {
                     navigation.bindingsContainerMouseMove(this, e);
                 }));
             };
@@ -3897,6 +4271,7 @@
                 function traverse(option, key, parentEditables, parent) {
                     var nextParent;
                     if (parentEditables &&
+                        option &&
                         nonEditables.indexOf(key) === -1 &&
                         ((parentEditables.indexOf &&
                             parentEditables.indexOf(key)) >= 0 ||
@@ -4097,7 +4472,7 @@
                 rect: ['shapes'],
                 // Crooked lines, elliots, arrows etc:
                 crookedLine: [],
-                basicAnnotation: []
+                basicAnnotation: ['shapes', 'labelOptions']
             };
             // Define non editable fields per annotation, for example Rectangle inherits
             // options from Measure, but crosshairs are not available
@@ -4114,7 +4489,7 @@
          * @type {bindingsUtils}
          */
         NavigationBindings.prototype.utils = bindingsUtils;
-        H.Chart.prototype.initNavigationBindings = function () {
+        Chart.prototype.initNavigationBindings = function () {
             var chart = this,
                 options = chart.options;
             if (options && options.navigation && options.navigation.bindings) {
@@ -4123,10 +4498,10 @@
                 chart.navigationBindings.initUpdate();
             }
         };
-        addEvent(H.Chart, 'load', function () {
+        addEvent(Chart, 'load', function () {
             this.initNavigationBindings();
         });
-        addEvent(H.Chart, 'destroy', function () {
+        addEvent(Chart, 'destroy', function () {
             if (this.navigationBindings) {
                 this.navigationBindings.destroy();
             }
@@ -4134,7 +4509,7 @@
         addEvent(NavigationBindings, 'deselectButton', function () {
             this.selectedButtonElement = null;
         });
-        addEvent(H.Annotation, 'remove', function () {
+        addEvent(Annotation, 'remove', function () {
             if (this.chart.navigationBindings) {
                 this.chart.navigationBindings.deselectAnnotation();
             }
@@ -4154,7 +4529,7 @@
                     navigation = annotation.chart.navigationBindings,
                     prevAnnotation = navigation.activeAnnotation;
                 if (originalClick) {
-                    originalClick.click.call(annotation, event);
+                    originalClick.call(annotation, event);
                 }
                 if (prevAnnotation !== annotation) {
                     // Select current:
@@ -4203,15 +4578,17 @@
         }
         if (H.Annotation) {
             // Basic shapes:
-            selectableAnnotation(H.Annotation);
+            selectableAnnotation(Annotation);
             // Advanced annotations:
-            objectEach(H.Annotation.types, function (annotationType) {
+            objectEach(Annotation.types, function (annotationType) {
                 selectableAnnotation(annotationType);
             });
         }
-        H.setOptions({
+        setOptions({
             /**
              * @optionparent lang
+             *
+             * @private
              */
             lang: {
                 /**
@@ -4261,6 +4638,8 @@
             /**
              * @optionparent navigation
              * @product      highcharts highstock
+             *
+             * @private
              */
             navigation: {
                 /**
@@ -4459,7 +4838,7 @@
                  * from a different server.
                  *
                  * @type      {string}
-                 * @default   https://code.highcharts.com/8.1.0/gfx/stock-icons/
+                 * @default   https://code.highcharts.com/8.2.2/gfx/stock-icons/
                  * @since     7.1.3
                  * @apioption navigation.iconsURL
                  */
@@ -4517,13 +4896,17 @@
                  *            measure, pitchfork, tunnel, verticalLine, basicAnnotation
                  * @apioption navigation.annotationsOptions
                  */
-                annotationsOptions: {}
+                annotationsOptions: {
+                    animation: {
+                        defer: 0
+                    }
+                }
             }
         });
 
         return NavigationBindings;
     });
-    _registerModule(_modules, 'annotations/popup.js', [_modules['parts/Globals.js'], _modules['annotations/navigationBindings.js'], _modules['parts/Utilities.js']], function (H, NavigationBindings, U) {
+    _registerModule(_modules, 'Extensions/Annotations/Popup.js', [_modules['Core/Globals.js'], _modules['Extensions/Annotations/NavigationBindings.js'], _modules['Core/Pointer.js'], _modules['Core/Utilities.js']], function (H, NavigationBindings, Pointer, U) {
         /* *
          *
          *  Popup generator for Stock tools
@@ -4538,6 +4921,7 @@
         var addEvent = U.addEvent,
             createElement = U.createElement,
             defined = U.defined,
+            getOptions = U.getOptions,
             isArray = U.isArray,
             isObject = U.isObject,
             isString = U.isString,
@@ -4548,7 +4932,7 @@
         /* eslint-disable no-invalid-this, valid-jsdoc */
         // onContainerMouseDown blocks internal popup events, due to e.preventDefault.
         // Related issue #4606
-        wrap(H.Pointer.prototype, 'onContainerMouseDown', function (proceed, e) {
+        wrap(Pointer.prototype, 'onContainerMouseDown', function (proceed, e) {
             var popupClass = e.target && e.target.className;
             // elements is not in popup
             if (!(isString(popupClass) &&
@@ -4784,7 +5168,7 @@
              * @return {Highcharts.Dictionary<string>} - elements translations.
              */
             getLangpack: function () {
-                return H.getOptions().lang.navigation.popup;
+                return getOptions().lang.navigation.popup;
             },
             annotations: {
                 /**
@@ -5168,7 +5552,7 @@
                 getAmount: function () {
                     var series = this.series,
                         counter = 0;
-                    objectEach(series, function (serie) {
+                    series.forEach(function (serie) {
                         var seriesOptions = serie.options;
                         if (serie.params ||
                             seriesOptions && seriesOptions.params) {
@@ -5297,7 +5681,7 @@
                 this.popup = new H.Popup(this.chart.container, (this.chart.options.navigation.iconsURL ||
                     (this.chart.options.stockTools &&
                         this.chart.options.stockTools.gui.iconsURL) ||
-                    'https://code.highcharts.com/8.1.0/gfx/stock-icons/'));
+                    'https://code.highcharts.com/8.2.2/gfx/stock-icons/'));
             }
             this.popup.showForm(config.formType, this.chart, config.options, config.onSubmit);
         });