highcharts 8.1.0 → 8.2.2

package/modules/stock-tools.src.js

@@ -1,5 +1,5 @@
 /**
- * @license Highstock JS v8.1.0 (2020-05-05)
+ * @license Highstock JS v8.2.2 (2020-10-22)
  *
  * Advanced Highstock tools
  *
@@ -29,7 +29,3725 @@
             obj[path] = fn.apply(null, args);
         }
     }
-    _registerModule(_modules, 'mixins/navigation.js', [], function () {
+    _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. !!!!!!!
+         *
+         * */
+        var addEvent = U.addEvent,
+            fireEvent = U.fireEvent,
+            objectEach = U.objectEach,
+            pick = U.pick,
+            removeEvent = U.removeEvent;
+        /* eslint-disable valid-jsdoc */
+        /**
+         * It provides methods for:
+         * - adding and handling DOM events and a drag event,
+         * - mapping a mouse move event to the distance between two following events.
+         *   The units of the distance are specific to a transformation,
+         *   e.g. for rotation they are radians, for scaling they are scale factors.
+         *
+         * @private
+         * @mixin
+         * @memberOf Annotation
+         */
+        var eventEmitterMixin = {
+                /**
+                 * Add emitter events.
+                 */
+                addEvents: function () {
+                    var emitter = this,
+            addMouseDownEvent = function (element) {
+                        addEvent(element,
+            H.isTouchDevice ? 'touchstart' : 'mousedown',
+            function (e) {
+                            emitter.onMouseDown(e);
+                    });
+                };
+                addMouseDownEvent(this.graphic.element);
+                (emitter.labels || []).forEach(function (label) {
+                    if (label.options.useHTML && label.graphic.text) {
+                        // Mousedown event bound to HTML element (#13070).
+                        addMouseDownEvent(label.graphic.text.element);
+                    }
+                });
+                objectEach(emitter.options.events, function (event, type) {
+                    var eventHandler = function (e) {
+                            if (type !== 'click' || !emitter.cancelClick) {
+                                event.call(emitter,
+                        emitter.chart.pointer.normalize(e),
+                        emitter.target);
+                        }
+                    };
+                    if ((emitter.nonDOMEvents || []).indexOf(type) === -1) {
+                        emitter.graphic.on(type, eventHandler);
+                    }
+                    else {
+                        addEvent(emitter, type, eventHandler);
+                    }
+                });
+                if (emitter.options.draggable) {
+                    addEvent(emitter, 'drag', emitter.onDrag);
+                    if (!emitter.graphic.renderer.styledMode) {
+                        var cssPointer_1 = {
+                                cursor: {
+                                    x: 'ew-resize',
+                                    y: 'ns-resize',
+                                    xy: 'move'
+                                }[emitter.options.draggable]
+                            };
+                        emitter.graphic.css(cssPointer_1);
+                        (emitter.labels || []).forEach(function (label) {
+                            if (label.options.useHTML && label.graphic.text) {
+                                label.graphic.text.css(cssPointer_1);
+                            }
+                        });
+                    }
+                }
+                if (!emitter.isUpdating) {
+                    fireEvent(emitter, 'add');
+                }
+            },
+            /**
+             * Remove emitter document events.
+             */
+            removeDocEvents: function () {
+                if (this.removeDrag) {
+                    this.removeDrag = this.removeDrag();
+                }
+                if (this.removeMouseUp) {
+                    this.removeMouseUp = this.removeMouseUp();
+                }
+            },
+            /**
+             * Mouse down handler.
+             */
+            onMouseDown: function (e) {
+                var emitter = this,
+                    pointer = emitter.chart.pointer,
+                    prevChartX,
+                    prevChartY;
+                if (e.preventDefault) {
+                    e.preventDefault();
+                }
+                // On right click, do nothing:
+                if (e.button === 2) {
+                    return;
+                }
+                e = pointer.normalize(e);
+                prevChartX = e.chartX;
+                prevChartY = e.chartY;
+                emitter.cancelClick = false;
+                emitter.chart.hasDraggedAnnotation = true;
+                emitter.removeDrag = addEvent(H.doc, H.isTouchDevice ? 'touchmove' : 'mousemove', function (e) {
+                    emitter.hasDragged = true;
+                    e = pointer.normalize(e);
+                    e.prevChartX = prevChartX;
+                    e.prevChartY = prevChartY;
+                    fireEvent(emitter, 'drag', e);
+                    prevChartX = e.chartX;
+                    prevChartY = e.chartY;
+                });
+                emitter.removeMouseUp = addEvent(H.doc, H.isTouchDevice ? 'touchend' : 'mouseup', function (e) {
+                    emitter.cancelClick = emitter.hasDragged;
+                    emitter.hasDragged = false;
+                    emitter.chart.hasDraggedAnnotation = false;
+                    // ControlPoints vs Annotation:
+                    fireEvent(pick(emitter.target, emitter), 'afterUpdate');
+                    emitter.onMouseUp(e);
+                });
+            },
+            /**
+             * Mouse up handler.
+             */
+            onMouseUp: function (_e) {
+                var chart = this.chart,
+                    annotation = this.target || this,
+                    annotationsOptions = chart.options.annotations,
+                    index = chart.annotations.indexOf(annotation);
+                this.removeDocEvents();
+                annotationsOptions[index] = annotation.options;
+            },
+            /**
+             * Drag and drop event. All basic annotations should share this
+             * capability as well as the extended ones.
+             */
+            onDrag: function (e) {
+                if (this.chart.isInsidePlot(e.chartX - this.chart.plotLeft, e.chartY - this.chart.plotTop)) {
+                    var translation = this.mouseMoveToTranslation(e);
+                    if (this.options.draggable === 'x') {
+                        translation.y = 0;
+                    }
+                    if (this.options.draggable === 'y') {
+                        translation.x = 0;
+                    }
+                    if (this.points.length) {
+                        this.translate(translation.x, translation.y);
+                    }
+                    else {
+                        this.shapes.forEach(function (shape) {
+                            shape.translate(translation.x, translation.y);
+                        });
+                        this.labels.forEach(function (label) {
+                            label.translate(translation.x, translation.y);
+                        });
+                    }
+                    this.redraw(false);
+                }
+            },
+            /**
+             * Map mouse move event to the radians.
+             */
+            mouseMoveToRadians: function (e, cx, cy) {
+                var prevDy = e.prevChartY - cy,
+                    prevDx = e.prevChartX - cx,
+                    dy = e.chartY - cy,
+                    dx = e.chartX - cx,
+                    temp;
+                if (this.chart.inverted) {
+                    temp = prevDx;
+                    prevDx = prevDy;
+                    prevDy = temp;
+                    temp = dx;
+                    dx = dy;
+                    dy = temp;
+                }
+                return Math.atan2(dy, dx) - Math.atan2(prevDy, prevDx);
+            },
+            /**
+             * Map mouse move event to the distance between two following events.
+             */
+            mouseMoveToTranslation: function (e) {
+                var dx = e.chartX - e.prevChartX,
+                    dy = e.chartY - e.prevChartY,
+                    temp;
+                if (this.chart.inverted) {
+                    temp = dy;
+                    dy = dx;
+                    dx = temp;
+                }
+                return {
+                    x: dx,
+                    y: dy
+                };
+            },
+            /**
+             * Map mouse move to the scale factors.
+             *
+             * @param {Object} e event
+             * @param {number} cx center x
+             * @param {number} cy center y
+             **/
+            mouseMoveToScale: function (e, cx, cy) {
+                var prevDx = e.prevChartX - cx,
+                    prevDy = e.prevChartY - cy,
+                    dx = e.chartX - cx,
+                    dy = e.chartY - cy,
+                    sx = (dx || 1) / (prevDx || 1),
+                    sy = (dy || 1) / (prevDy || 1),
+                    temp;
+                if (this.chart.inverted) {
+                    temp = sy;
+                    sy = sx;
+                    sx = temp;
+                }
+                return {
+                    x: sx,
+                    y: sy
+                };
+            },
+            /**
+             * Destroy the event emitter.
+             */
+            destroy: function () {
+                this.removeDocEvents();
+                removeEvent(this);
+                this.hcEvents = null;
+            }
+        };
+
+        return 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. !!!!!!!
+         *
+         * */
+        /**
+         * Callback to modify annotation's possitioner controls.
+         *
+         * @callback Highcharts.AnnotationControlPointPositionerFunction
+         * @param {Highcharts.AnnotationControlPoint} this
+         * @param {Highcharts.AnnotationControllable} target
+         * @return {Highcharts.PositionObject}
+         */
+        var extend = U.extend,
+            merge = U.merge,
+            pick = U.pick;
+        /* eslint-disable no-invalid-this, valid-jsdoc */
+        /**
+         * A control point class which is a connection between controllable
+         * transform methods and a user actions.
+         *
+         * @requires modules/annotations
+         *
+         * @class
+         * @name Highcharts.AnnotationControlPoint
+         *
+         * @hideconstructor
+         *
+         * @param {Highcharts.Chart} chart
+         * A chart instance.
+         *
+         * @param {Highcharts.AnnotationControllable} target
+         * A controllable instance which is a target for a control point.
+         *
+         * @param {Highcharts.AnnotationControlPointOptionsObject} options
+         * An options object.
+         *
+         * @param {number} [index]
+         * Point index.
+         */
+        var ControlPoint = /** @class */ (function () {
+                function ControlPoint(chart, target, options, index) {
+                    /**
+                     *
+                     * Properties
+                     *
+                     */
+                    this.addEvents = eventEmitterMixin.addEvents;
+                this.graphic = void 0;
+                this.mouseMoveToRadians = eventEmitterMixin.mouseMoveToRadians;
+                this.mouseMoveToScale = eventEmitterMixin.mouseMoveToScale;
+                this.mouseMoveToTranslation = eventEmitterMixin.mouseMoveToTranslation;
+                this.onDrag = eventEmitterMixin.onDrag;
+                this.onMouseDown = eventEmitterMixin.onMouseDown;
+                this.onMouseUp = eventEmitterMixin.onMouseUp;
+                this.removeDocEvents = eventEmitterMixin.removeDocEvents;
+                /**
+                 *
+                 * Functions
+                 *
+                 */
+                /**
+                 * List of events for `anntation.options.events` that should not be
+                 * added to `annotation.graphic` but to the `annotation`.
+                 * @private
+                 * @name Highcharts.AnnotationControlPoint#nonDOMEvents
+                 * @type {Array<string>}
+                 */
+                this.nonDOMEvents = ['drag'];
+                this.chart = chart;
+                this.target = target;
+                this.options = options;
+                this.index = pick(options.index, index);
+            }
+            /**
+             * Set the visibility of the control point.
+             *
+             * @function Highcharts.AnnotationControlPoint#setVisibility
+             *
+             * @param {boolean} visible
+             * Visibility of the control point.
+             *
+             * @return {void}
+             */
+            ControlPoint.prototype.setVisibility = function (visible) {
+                this.graphic.attr('visibility', visible ? 'visible' : 'hidden');
+                this.options.visible = visible;
+            };
+            /**
+             * Render the control point.
+             * @private
+             */
+            ControlPoint.prototype.render = function () {
+                var chart = this.chart,
+                    options = this.options;
+                this.graphic = chart.renderer
+                    .symbol(options.symbol, 0, 0, options.width, options.height)
+                    .add(chart.controlPointsGroup)
+                    .css(options.style);
+                this.setVisibility(options.visible);
+                // npm test -- --tests "highcharts/annotations-advanced/*"
+                this.addEvents();
+            };
+            /**
+             * Redraw the control point.
+             * @private
+             * @param {boolean} [animation]
+             */
+            ControlPoint.prototype.redraw = function (animation) {
+                this.graphic[animation ? 'animate' : 'attr'](this.options.positioner.call(this, this.target));
+            };
+            /**
+             * Destroy the control point.
+             * @private
+             */
+            ControlPoint.prototype.destroy = function () {
+                eventEmitterMixin.destroy.call(this);
+                if (this.graphic) {
+                    this.graphic = this.graphic.destroy();
+                }
+                this.chart = null;
+                this.target = null;
+                this.options = null;
+            };
+            /**
+             * Update the control point.
+             *
+             * @function Highcharts.AnnotationControlPoint#update
+             *
+             * @param {Partial<Highcharts.AnnotationControlPointOptionsObject>} userOptions
+             * New options for the control point.
+             *
+             * @return {void}
+             */
+            ControlPoint.prototype.update = function (userOptions) {
+                var chart = this.chart,
+                    target = this.target,
+                    index = this.index,
+                    options = merge(true,
+                    this.options,
+                    userOptions);
+                this.destroy();
+                this.constructor(chart, target, options, index);
+                this.render(chart.controlPointsGroup);
+                this.redraw();
+            };
+            return ControlPoint;
+        }());
+
+        return ControlPoint;
+    });
+    _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. !!!!!!!
+         *
+         * */
+        /**
+         * @private
+         * @interface Highcharts.AnnotationMockLabelOptionsObject
+         */ /**
+        * Point instance of the point.
+        * @name Highcharts.AnnotationMockLabelOptionsObject#point
+        * @type {Highcharts.AnnotationMockPoint}
+        */ /**
+        * X value translated to x axis scale.
+        * @name Highcharts.AnnotationMockLabelOptionsObject#x
+        * @type {number|null}
+        */ /**
+        * Y value translated to y axis scale.
+        * @name Highcharts.AnnotationMockLabelOptionsObject#y
+        * @type {number|null}
+        */
+        /**
+         * A mock series instance imitating a real series from a real point.
+         * @private
+         * @interface Highcharts.AnnotationMockSeries
+         */ /**
+        * Whether a series is visible.
+        * @name Highcharts.AnnotationMockSeries#visible
+        * @type {boolean}
+        */ /**
+        * A chart instance.
+        * @name Highcharts.AnnotationMockSeries#chart
+        * @type {Highcharts.Chart}
+        */ /**
+        * @name Highcharts.AnnotationMockSeries#getPlotBox
+        * @type {Function}
+        */
+        /**
+         * Indicates if this is a mock point for an annotation.
+         * @name Highcharts.Point#mock
+         * @type {boolean|undefined}
+         */
+        var defined = U.defined,
+            extend = U.extend,
+            fireEvent = U.fireEvent;
+        /* eslint-disable no-invalid-this, valid-jsdoc */
+        /**
+         * A trimmed point object which imitates {@link Highchart.Point} class. It is
+         * created when there is a need of pointing to some chart's position using axis
+         * values or pixel values
+         *
+         * @requires modules/annotations
+         *
+         * @private
+         * @class
+         * @name Highcharts.AnnotationMockPoint
+         *
+         * @hideconstructor
+         *
+         * @param {Highcharts.Chart} chart
+         * The chart instance.
+         *
+         * @param {Highcharts.AnnotationControllable|null} target
+         * The related controllable.
+         *
+         * @param {Highcharts.AnnotationMockPointOptionsObject|Function} options
+         * The options object.
+         */
+        var MockPoint = /** @class */ (function () {
+                function MockPoint(chart, target, options) {
+                    this.isInside = void 0;
+                this.plotX = void 0;
+                this.plotY = void 0;
+                this.x = void 0;
+                this.y = void 0;
+                /* *
+                 *
+                 * Functions
+                 *
+                 * */
+                /**
+                 * A flag indicating that a point is not the real one.
+                 *
+                 * @type {boolean}
+                 * @default true
+                 */
+                this.mock = true;
+                /**
+                 * A mock series instance imitating a real series from a real point.
+                 *
+                 * @name Annotation.AnnotationMockPoint#series
+                 * @type {Highcharts.AnnotationMockSeries}
+                 */
+                this.series = {
+                    visible: true,
+                    chart: chart,
+                    getPlotBox: H.Series.prototype.getPlotBox
+                };
+                /**
+                 * @name Annotation.AnnotationMockPoint#target
+                 * @type {Highcharts.AnnotationControllable|null}
+                 */
+                this.target = target || null;
+                /**
+                 * Options for the mock point.
+                 *
+                 * @name Annotation.AnnotationMockPoint#options
+                 * @type {Highcharts.AnnotationsMockPointOptionsObject}
+                 */
+                this.options = options;
+                /**
+                 * If an xAxis is set it represents the point's value in terms of the
+                 * xAxis.
+                 *
+                 * @name Annotation.AnnotationMockPoint#x
+                 * @type {number|undefined}
+                 */
+                /**
+                 * If an yAxis is set it represents the point's value in terms of the
+                 * yAxis.
+                 *
+                 * @name Annotation.AnnotationMockPoint#y
+                 * @type {number|undefined}
+                 */
+                /**
+                 * It represents the point's pixel x coordinate relative to its plot
+                 * box.
+                 *
+                 * @name Annotation.AnnotationMockPoint#plotX
+                 * @type {number|undefined}
+                 */
+                /**
+                 * It represents the point's pixel y position relative to its plot box.
+                 *
+                 * @name Annotation.AnnotationMockPoint#plotY
+                 * @type {number|undefined}
+                 */
+                /**
+                 * Whether the point is inside the plot box.
+                 *
+                 * @name Annotation.AnnotationMockPoint#isInside
+                 * @type {boolean|undefined}
+                 */
+                this.applyOptions(this.getOptions());
+            }
+            /**
+             * Create a mock point from a real Highcharts point.
+             *
+             * @private
+             * @static
+             *
+             * @param {Highcharts.Point} point
+             *
+             * @return {Highcharts.AnnotationMockPoint}
+             * A mock point instance.
+             */
+            MockPoint.fromPoint = function (point) {
+                return new MockPoint(point.series.chart, null, {
+                    x: point.x,
+                    y: point.y,
+                    xAxis: point.series.xAxis,
+                    yAxis: point.series.yAxis
+                });
+            };
+            /**
+             * Get the pixel position from the point like object.
+             *
+             * @private
+             * @static
+             *
+             * @param {Highcharts.AnnotationPointType} point
+             *
+             * @param {boolean} [paneCoordinates]
+             *        whether the pixel position should be relative
+             *
+             * @return {Highcharts.PositionObject} pixel position
+             */
+            MockPoint.pointToPixels = function (point, paneCoordinates) {
+                var series = point.series,
+                    chart = series.chart,
+                    x = point.plotX,
+                    y = point.plotY,
+                    plotBox;
+                if (chart.inverted) {
+                    if (point.mock) {
+                        x = point.plotY;
+                        y = point.plotX;
+                    }
+                    else {
+                        x = chart.plotWidth - point.plotY;
+                        y = chart.plotHeight - point.plotX;
+                    }
+                }
+                if (series && !paneCoordinates) {
+                    plotBox = series.getPlotBox();
+                    x += plotBox.translateX;
+                    y += plotBox.translateY;
+                }
+                return {
+                    x: x,
+                    y: y
+                };
+            };
+            /**
+             * Get fresh mock point options from the point like object.
+             *
+             * @private
+             * @static
+             *
+             * @param {Highcharts.AnnotationPointType} point
+             *
+             * @return {Highcharts.AnnotationMockPointOptionsObject}
+             * A mock point's options.
+             */
+            MockPoint.pointToOptions = function (point) {
+                return {
+                    x: point.x,
+                    y: point.y,
+                    xAxis: point.series.xAxis,
+                    yAxis: point.series.yAxis
+                };
+            };
+            /**
+             * Check if the point has dynamic options.
+             * @private
+             * @return {boolean}
+             * A positive flag if the point has dynamic options.
+             */
+            MockPoint.prototype.hasDynamicOptions = function () {
+                return typeof this.options === 'function';
+            };
+            /**
+             * Get the point's options.
+             * @private
+             * @return {Highcharts.AnnotationMockPointOptionsObject}
+             * The mock point's options.
+             */
+            MockPoint.prototype.getOptions = function () {
+                return this.hasDynamicOptions() ?
+                    this.options(this.target) :
+                    this.options;
+            };
+            /**
+             * Apply options for the point.
+             * @private
+             * @param {Highcharts.AnnotationMockPointOptionsObject} options
+             */
+            MockPoint.prototype.applyOptions = function (options) {
+                this.command = options.command;
+                this.setAxis(options, 'x');
+                this.setAxis(options, 'y');
+                this.refresh();
+            };
+            /**
+             * Set x or y axis.
+             * @private
+             * @param {Highcharts.AnnotationMockPointOptionsObject} options
+             * @param {string} xOrY
+             * 'x' or 'y' string literal
+             */
+            MockPoint.prototype.setAxis = function (options, xOrY) {
+                var axisName = (xOrY + 'Axis'),
+                    axisOptions = options[axisName],
+                    chart = this.series.chart;
+                this.series[axisName] =
+                    axisOptions instanceof Axis ?
+                        axisOptions :
+                        defined(axisOptions) ?
+                            (chart[axisName][axisOptions] ||
+                                chart.get(axisOptions)) :
+                            null;
+            };
+            /**
+             * Transform the mock point to an anchor (relative position on the chart).
+             * @private
+             * @return {Array<number>}
+             * A quadruple of numbers which denotes x, y, width and height of the box
+             **/
+            MockPoint.prototype.toAnchor = function () {
+                var anchor = [this.plotX,
+                    this.plotY, 0, 0];
+                if (this.series.chart.inverted) {
+                    anchor[0] = this.plotY;
+                    anchor[1] = this.plotX;
+                }
+                return anchor;
+            };
+            /**
+             * Returns a label config object - the same as
+             * Highcharts.Point.prototype.getLabelConfig
+             * @private
+             * @return {Highcharts.AnnotationMockLabelOptionsObject} the point's label config
+             */
+            MockPoint.prototype.getLabelConfig = function () {
+                return {
+                    x: this.x,
+                    y: this.y,
+                    point: this
+                };
+            };
+            /**
+             * Check if the point is inside its pane.
+             * @private
+             * @return {boolean} A flag indicating whether the point is inside the pane.
+             */
+            MockPoint.prototype.isInsidePlot = function () {
+                var plotX = this.plotX,
+                    plotY = this.plotY,
+                    xAxis = this.series.xAxis,
+                    yAxis = this.series.yAxis,
+                    e = {
+                        x: plotX,
+                        y: plotY,
+                        isInsidePlot: true
+                    };
+                if (xAxis) {
+                    e.isInsidePlot = defined(plotX) && plotX >= 0 && plotX <= xAxis.len;
+                }
+                if (yAxis) {
+                    e.isInsidePlot =
+                        e.isInsidePlot &&
+                            defined(plotY) &&
+                            plotY >= 0 && plotY <= yAxis.len;
+                }
+                fireEvent(this.series.chart, 'afterIsInsidePlot', e);
+                return e.isInsidePlot;
+            };
+            /**
+             * Refresh point values and coordinates based on its options.
+             * @private
+             */
+            MockPoint.prototype.refresh = function () {
+                var series = this.series,
+                    xAxis = series.xAxis,
+                    yAxis = series.yAxis,
+                    options = this.getOptions();
+                if (xAxis) {
+                    this.x = options.x;
+                    this.plotX = xAxis.toPixels(options.x, true);
+                }
+                else {
+                    this.x = null;
+                    this.plotX = options.x;
+                }
+                if (yAxis) {
+                    this.y = options.y;
+                    this.plotY = yAxis.toPixels(options.y, true);
+                }
+                else {
+                    this.y = null;
+                    this.plotY = options.y;
+                }
+                this.isInside = this.isInsidePlot();
+            };
+            /**
+             * Translate the point.
+             *
+             * @private
+             *
+             * @param {number|undefined} cx
+             * Origin x transformation.
+             *
+             * @param {number|undefined} cy
+             * Origin y transformation.
+             *
+             * @param {number} dx
+             * Translation for x coordinate.
+             *
+             * @param {number} dy
+             * Translation for y coordinate.
+             **/
+            MockPoint.prototype.translate = function (_cx, _cy, dx, dy) {
+                if (!this.hasDynamicOptions()) {
+                    this.plotX += dx;
+                    this.plotY += dy;
+                    this.refreshOptions();
+                }
+            };
+            /**
+             * Scale the point.
+             *
+             * @private
+             *
+             * @param {number} cx
+             * Origin x transformation.
+             *
+             * @param {number} cy
+             * Origin y transformation.
+             *
+             * @param {number} sx
+             * Scale factor x.
+             *
+             * @param {number} sy
+             * Scale factor y.
+             */
+            MockPoint.prototype.scale = function (cx, cy, sx, sy) {
+                if (!this.hasDynamicOptions()) {
+                    var x = this.plotX * sx,
+                        y = this.plotY * sy,
+                        tx = (1 - sx) * cx,
+                        ty = (1 - sy) * cy;
+                    this.plotX = tx + x;
+                    this.plotY = ty + y;
+                    this.refreshOptions();
+                }
+            };
+            /**
+             * Rotate the point.
+             * @private
+             * @param {number} cx origin x rotation
+             * @param {number} cy origin y rotation
+             * @param {number} radians
+             */
+            MockPoint.prototype.rotate = function (cx, cy, radians) {
+                if (!this.hasDynamicOptions()) {
+                    var cos = Math.cos(radians),
+                        sin = Math.sin(radians),
+                        x = this.plotX,
+                        y = this.plotY,
+                        tx,
+                        ty;
+                    x -= cx;
+                    y -= cy;
+                    tx = x * cos - y * sin;
+                    ty = x * sin + y * cos;
+                    this.plotX = tx + cx;
+                    this.plotY = ty + cy;
+                    this.refreshOptions();
+                }
+            };
+            /**
+             * Refresh point options based on its plot coordinates.
+             * @private
+             */
+            MockPoint.prototype.refreshOptions = function () {
+                var series = this.series,
+                    xAxis = series.xAxis,
+                    yAxis = series.yAxis;
+                this.x = this.options.x = xAxis ?
+                    this.options.x = xAxis.toValue(this.plotX, true) :
+                    this.plotX;
+                this.y = this.options.y = yAxis ?
+                    yAxis.toValue(this.plotY, true) :
+                    this.plotY;
+            };
+            return MockPoint;
+        }());
+
+        return MockPoint;
+    });
+    _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.
+         *
+         * @private
+         * @interface Highcharts.AnnotationAnchorObject
+         */ /**
+        * Relative to the plot area position
+        * @name Highcharts.AnnotationAnchorObject#relativePosition
+        * @type {Highcharts.BBoxObject}
+        */ /**
+        * Absolute position
+        * @name Highcharts.AnnotationAnchorObject#absolutePosition
+        * @type {Highcharts.BBoxObject}
+        */
+        /**
+         * @interface Highcharts.AnnotationControllable
+         */ /**
+        * @name Highcharts.AnnotationControllable#annotation
+        * @type {Highcharts.Annotation}
+        */ /**
+        * @name Highcharts.AnnotationControllable#chart
+        * @type {Highcharts.Chart}
+        */ /**
+        * @name Highcharts.AnnotationControllable#collection
+        * @type {string}
+        */ /**
+        * @private
+        * @name Highcharts.AnnotationControllable#controlPoints
+        * @type {Array<Highcharts.AnnotationControlPoint>}
+        */ /**
+        * @name Highcharts.AnnotationControllable#points
+        * @type {Array<Highcharts.Point>}
+        */
+        /* eslint-disable no-invalid-this, valid-jsdoc */
+        /**
+         * It provides methods for handling points, control points
+         * and points transformations.
+         *
+         * @private
+         * @mixin
+         * @name Highcharts.AnnotationControllableMixin
+         */
+        var controllableMixin = {
+                /**
+                 * Init the controllable
+                 */
+                init: function (annotation,
+            options,
+            index) {
+                    this.annotation = annotation;
+                this.chart = annotation.chart;
+                this.options = options;
+                this.points = [];
+                this.controlPoints = [];
+                this.index = index;
+                this.linkPoints();
+                this.addControlPoints();
+            },
+            /**
+             * Redirect attr usage on the controllable graphic element.
+             */
+            attr: function () {
+                this.graphic.attr.apply(this.graphic, arguments);
+            },
+            /**
+             * Get the controllable's points options.
+             *
+             * @return {Array<Highcharts.PointOptionsObject>}
+             * An array of points' options.
+             */
+            getPointsOptions: function () {
+                var options = this.options;
+                return (options.points || (options.point && splat(options.point)));
+            },
+            /**
+             * Utility function for mapping item's options
+             * to element's attribute
+             *
+             * @param {Highcharts.AnnotationsLabelsOptions|Highcharts.AnnotationsShapesOptions} options
+             *
+             * @return {Highcharts.SVGAttributes}
+             * Mapped options.
+             */
+            attrsFromOptions: function (options) {
+                var map = this.constructor.attrsMap,
+                    attrs = {},
+                    key,
+                    mappedKey,
+                    styledMode = this.chart.styledMode;
+                for (key in options) { // eslint-disable-line guard-for-in
+                    mappedKey = map[key];
+                    if (mappedKey &&
+                        (!styledMode ||
+                            ['fill', 'stroke', 'stroke-width']
+                                .indexOf(mappedKey) === -1)) {
+                        attrs[mappedKey] = options[key];
+                    }
+                }
+                return attrs;
+            },
+            /**
+             * Returns object which denotes anchor position - relative and absolute.
+             *
+             * @param {Highcharts.AnnotationPointType} point
+             * A point like object.
+             *
+             * @return {Highcharts.AnnotationAnchorObject} a controllable anchor
+             */
+            anchor: function (point) {
+                var plotBox = point.series.getPlotBox(),
+                    chart = point.series.chart,
+                    box = point.mock ?
+                        point.toAnchor() :
+                        Tooltip.prototype.getAnchor.call({
+                            chart: point.series.chart
+                        },
+                    point),
+                    anchor = {
+                        x: box[0] + (this.options.x || 0),
+                        y: box[1] + (this.options.y || 0),
+                        height: box[2] || 0,
+                        width: box[3] || 0
+                    };
+                return {
+                    relativePosition: anchor,
+                    absolutePosition: merge(anchor, {
+                        x: anchor.x + (point.mock ? plotBox.translateX : chart.plotLeft),
+                        y: anchor.y + (point.mock ? plotBox.translateY : chart.plotTop)
+                    })
+                };
+            },
+            /**
+             * Map point's options to a point-like object.
+             *
+             * @param {string|Function|Highcharts.AnnotationMockPointOptionsObject|Highcharts.AnnotationPointType} pointOptions
+             * Point's options.
+             *
+             * @param {Highcharts.AnnotationPointType} point
+             * A point-like instance.
+             *
+             * @return {Highcharts.AnnotationPointType|null}
+             *         if the point is found/set returns this point, otherwise null
+             */
+            point: function (pointOptions, point) {
+                if (pointOptions && pointOptions.series) {
+                    return pointOptions;
+                }
+                if (!point || point.series === null) {
+                    if (isObject(pointOptions)) {
+                        point = new MockPoint(this.chart, this, pointOptions);
+                    }
+                    else if (isString(pointOptions)) {
+                        point = this.chart.get(pointOptions) || null;
+                    }
+                    else if (typeof pointOptions === 'function') {
+                        var pointConfig = pointOptions.call(point,
+                            this);
+                        point = pointConfig.series ?
+                            pointConfig :
+                            new MockPoint(this.chart, this, pointOptions);
+                    }
+                }
+                return point;
+            },
+            /**
+             * Find point-like objects based on points options.
+             *
+             * @return {Array<Annotation.PointLike>} an array of point-like objects
+             */
+            linkPoints: function () {
+                var pointsOptions = this.getPointsOptions(),
+                    points = this.points,
+                    len = (pointsOptions && pointsOptions.length) || 0,
+                    i,
+                    point;
+                for (i = 0; i < len; i++) {
+                    point = this.point(pointsOptions[i], points[i]);
+                    if (!point) {
+                        points.length = 0;
+                        return;
+                    }
+                    if (point.mock) {
+                        point.refresh();
+                    }
+                    points[i] = point;
+                }
+                return points;
+            },
+            /**
+             * Add control points to a controllable.
+             */
+            addControlPoints: function () {
+                var controlPointsOptions = this.options.controlPoints;
+                (controlPointsOptions || []).forEach(function (controlPointOptions, i) {
+                    var options = merge(this.options.controlPointOptions,
+                        controlPointOptions);
+                    if (!options.index) {
+                        options.index = i;
+                    }
+                    controlPointsOptions[i] = options;
+                    this.controlPoints.push(new ControlPoint(this.chart, this, options));
+                }, this);
+            },
+            /**
+             * Check if a controllable should be rendered/redrawn.
+             *
+             * @return {boolean}
+             * Whether a controllable should be drawn.
+             */
+            shouldBeDrawn: function () {
+                return Boolean(this.points.length);
+            },
+            /**
+             * Render a controllable.
+             */
+            render: function (_parentGroup) {
+                this.controlPoints.forEach(function (controlPoint) {
+                    controlPoint.render();
+                });
+            },
+            /**
+             * Redraw a controllable.
+             *
+             * @param {boolean} [animation]
+             */
+            redraw: function (animation) {
+                this.controlPoints.forEach(function (controlPoint) {
+                    controlPoint.redraw(animation);
+                });
+            },
+            /**
+             * Transform a controllable with a specific transformation.
+             *
+             * @param {string} transformation a transformation name
+             * @param {number|null} cx origin x transformation
+             * @param {number|null} cy origin y transformation
+             * @param {number} p1 param for the transformation
+             * @param {number} [p2] param for the transformation
+             */
+            transform: function (transformation, cx, cy, p1, p2) {
+                if (this.chart.inverted) {
+                    var temp = cx;
+                    cx = cy;
+                    cy = temp;
+                }
+                this.points.forEach(function (point, i) {
+                    this.transformPoint(transformation, cx, cy, p1, p2, i);
+                }, this);
+            },
+            /**
+             * Transform a point with a specific transformation
+             * If a transformed point is a real point it is replaced with
+             * the mock point.
+             *
+             * @param {string} transformation a transformation name
+             * @param {number|null} cx origin x transformation
+             * @param {number|null} cy origin y transformation
+             * @param {number} p1 param for the transformation
+             * @param {number|undefined} p2 param for the transformation
+             * @param {number} i index of the point
+             */
+            transformPoint: function (transformation, cx, cy, p1, p2, i) {
+                var point = this.points[i];
+                if (!point.mock) {
+                    point = this.points[i] = MockPoint.fromPoint(point);
+                }
+                point[transformation](cx, cy, p1, p2);
+            },
+            /**
+             * Translate a controllable.
+             *
+             * @param {number} dx translation for x coordinate
+             * @param {number} dy translation for y coordinate
+             **/
+            translate: function (dx, dy) {
+                this.transform('translate', null, null, dx, dy);
+            },
+            /**
+             * Translate a specific point within a controllable.
+             *
+             * @param {number} dx translation for x coordinate
+             * @param {number} dy translation for y coordinate
+             * @param {number} i index of the point
+             **/
+            translatePoint: function (dx, dy, i) {
+                this.transformPoint('translate', null, null, dx, dy, i);
+            },
+            /**
+             * Translate shape within controllable item.
+             * Replaces `controllable.translate` method.
+             *
+             * @param {number} dx translation for x coordinate
+             * @param {number} dy translation for y coordinate
+             */
+            translateShape: function (dx, dy) {
+                var chart = this.annotation.chart, 
+                    // Annotation.options
+                    shapeOptions = this.annotation.userOptions, 
+                    // Chart.options.annotations
+                    annotationIndex = chart.annotations.indexOf(this.annotation),
+                    chartOptions = chart.options.annotations[annotationIndex];
+                this.translatePoint(dx, dy, 0);
+                // Options stored in:
+                // - chart (for exporting)
+                // - current config (for redraws)
+                chartOptions[this.collection][this.index].point = this.options.point;
+                shapeOptions[this.collection][this.index].point = this.options.point;
+            },
+            /**
+             * Rotate a controllable.
+             *
+             * @param {number} cx origin x rotation
+             * @param {number} cy origin y rotation
+             * @param {number} radians
+             **/
+            rotate: function (cx, cy, radians) {
+                this.transform('rotate', cx, cy, radians);
+            },
+            /**
+             * Scale a controllable.
+             *
+             * @param {number} cx origin x rotation
+             * @param {number} cy origin y rotation
+             * @param {number} sx scale factor x
+             * @param {number} sy scale factor y
+             */
+            scale: function (cx, cy, sx, sy) {
+                this.transform('scale', cx, cy, sx, sy);
+            },
+            /**
+             * Set control points' visibility.
+             *
+             * @param {boolean} visible
+             */
+            setControlPointsVisibility: function (visible) {
+                this.controlPoints.forEach(function (controlPoint) {
+                    controlPoint.setVisibility(visible);
+                });
+            },
+            /**
+             * Destroy a controllable.
+             */
+            destroy: function () {
+                if (this.graphic) {
+                    this.graphic = this.graphic.destroy();
+                }
+                if (this.tracker) {
+                    this.tracker = this.tracker.destroy();
+                }
+                this.controlPoints.forEach(function (controlPoint) {
+                    controlPoint.destroy();
+                });
+                this.chart = null;
+                this.points = null;
+                this.controlPoints = null;
+                this.options = null;
+                if (this.annotation) {
+                    this.annotation = null;
+                }
+            },
+            /**
+             * Update a controllable.
+             *
+             * @param {Object} newOptions
+             */
+            update: function (newOptions) {
+                var annotation = this.annotation,
+                    options = merge(true,
+                    this.options,
+                    newOptions),
+                    parentGroup = this.graphic.parentGroup;
+                this.destroy();
+                this.constructor(annotation, options);
+                this.render(parentGroup);
+                this.redraw();
+            }
+        };
+
+        return controllableMixin;
+    });
+    _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. !!!!!!!
+         *
+         * */
+        var addEvent = U.addEvent,
+            defined = U.defined,
+            merge = U.merge,
+            objectEach = U.objectEach,
+            uniqueKey = U.uniqueKey;
+        /**
+         * Options for configuring markers for annotations.
+         *
+         * An example of the arrow marker:
+         * <pre>
+         * {
+         *   arrow: {
+         *     id: 'arrow',
+         *     tagName: 'marker',
+         *     refY: 5,
+         *     refX: 5,
+         *     markerWidth: 10,
+         *     markerHeight: 10,
+         *     children: [{
+         *       tagName: 'path',
+         *       attrs: {
+         *         d: 'M 0 0 L 10 5 L 0 10 Z',
+         *         strokeWidth: 0
+         *       }
+         *     }]
+         *   }
+         * }
+         * </pre>
+         *
+         * @sample highcharts/annotations/custom-markers/
+         *         Define a custom marker for annotations
+         *
+         * @sample highcharts/css/annotations-markers/
+         *         Define markers in a styled mode
+         *
+         * @type         {Highcharts.Dictionary<Highcharts.SVGDefinitionObject>}
+         * @since        6.0.0
+         * @optionparent defs
+         */
+        var defaultMarkers = {
+                /**
+                 * @type {Highcharts.SVGDefinitionObject}
+                 */
+                arrow: {
+                    tagName: 'marker',
+                    render: false,
+                    id: 'arrow',
+                    refY: 5,
+                    refX: 9,
+                    markerWidth: 10,
+                    markerHeight: 10,
+                    /**
+                     * @type {Array<Highcharts.DefsOptions>}
+                     */
+                    children: [{
+                            tagName: 'path',
+                            d: 'M 0 0 L 10 5 L 0 10 Z',
+                            strokeWidth: 0
+                        }]
+                },
+                /**
+                 * @type {Highcharts.SVGDefinitionObject}
+                 */
+                'reverse-arrow': {
+                    tagName: 'marker',
+                    render: false,
+                    id: 'reverse-arrow',
+                    refY: 5,
+                    refX: 1,
+                    markerWidth: 10,
+                    markerHeight: 10,
+                    children: [{
+                            tagName: 'path',
+                            // reverse triangle (used as an arrow)
+                            d: 'M 0 5 L 10 0 L 10 10 Z',
+                            strokeWidth: 0
+                        }]
+                }
+            };
+        SVGRenderer.prototype.addMarker = function (id, markerOptions) {
+            var options = { id: id };
+            var attrs = {
+                    stroke: markerOptions.color || 'none',
+                    fill: markerOptions.color || 'rgba(0, 0, 0, 0.75)'
+                };
+            options.children = markerOptions.children.map(function (child) {
+                return merge(attrs, child);
+            });
+            var marker = this.definition(merge(true, {
+                    markerWidth: 20,
+                    markerHeight: 20,
+                    refX: 0,
+                    refY: 0,
+                    orient: 'auto'
+                },
+                markerOptions,
+                options));
+            marker.id = id;
+            return marker;
+        };
+        /* eslint-disable no-invalid-this, valid-jsdoc */
+        /**
+         * @private
+         */
+        function createMarkerSetter(markerType) {
+            return function (value) {
+                this.attr(markerType, 'url(#' + value + ')');
+            };
+        }
+        /**
+         * @private
+         * @mixin
+         * @name Highcharts.AnnotaitonMarkerMixin
+         */
+        var markerMixin = {
+                markerEndSetter: createMarkerSetter('marker-end'),
+                markerStartSetter: createMarkerSetter('marker-start'),
+                /**
+                 * Set markers.
+                 * @private
+                 * @param {Highcharts.AnnotationControllablePath} item
+                 */
+                setItemMarkers: function (item) {
+                    var itemOptions = item.options,
+            chart = item.chart,
+            defs = chart.options.defs,
+            fill = itemOptions.fill,
+            color = defined(fill) && fill !== 'none' ?
+                        fill :
+                        itemOptions.stroke,
+            setMarker = function (markerType) {
+                        var markerId = itemOptions[markerType],
+            def,
+            predefinedMarker,
+            key,
+            marker;
+                    if (markerId) {
+                        for (key in defs) { // eslint-disable-line guard-for-in
+                            def = defs[key];
+                            if (markerId === def.id &&
+                                def.tagName === 'marker') {
+                                predefinedMarker = def;
+                                break;
+                            }
+                        }
+                        if (predefinedMarker) {
+                            marker = item[markerType] = chart.renderer
+                                .addMarker((itemOptions.id || uniqueKey()) + '-' +
+                                predefinedMarker.id, merge(predefinedMarker, { color: color }));
+                            item.attr(markerType, marker.attr('id'));
+                        }
+                    }
+                };
+                ['markerStart', 'markerEnd'].forEach(setMarker);
+            }
+        };
+        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) {
+                    this.renderer.addMarker(def.id, def);
+                }
+            }, this);
+        });
+
+        return 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;
+        // 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 */
+        /**
+         * A controllable path class.
+         *
+         * @requires modules/annotations
+         *
+         * @private
+         * @class
+         * @name Highcharts.AnnotationControllablePath
+         *
+         * @param {Highcharts.Annotation}
+         * Related annotation.
+         *
+         * @param {Highcharts.AnnotationsShapeOptions} options
+         * A path's options object.
+         *
+         * @param {number} index
+         * Index of the path.
+         */
+        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.
+             */
+            ControllablePath.prototype.toD = function () {
+                var dOption = this.options.d;
+                if (dOption) {
+                    return typeof dOption === 'function' ?
+                        dOption.call(this) :
+                        dOption;
+                }
+                var points = this.points,
+                    len = points.length,
+                    showPath = len,
+                    point = points[0],
+                    position = showPath && this.anchor(point).absolutePosition,
+                    pointIndex = 0,
+                    command,
+                    d = [];
+                if (position) {
+                    d.push(['M', position.x, position.y]);
+                    while (++pointIndex < len && showPath) {
+                        point = points[pointIndex];
+                        command = point.command || 'L';
+                        position = this.anchor(point).absolutePosition;
+                        if (command === 'M') {
+                            d.push([command, position.x, position.y]);
+                        }
+                        else if (command === 'L') {
+                            d.push([command, position.x, position.y]);
+                        }
+                        else if (command === 'Z') {
+                            d.push([command]);
+                        }
+                        showPath = point.series.visible;
+                    }
+                }
+                return showPath ?
+                    this.chart.renderer.crispLine(d, this.graphic.strokeWidth()) :
+                    null;
+            };
+            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
+                    .path([['M', 0, 0]])
+                    .attr(attrs)
+                    .add(parent);
+                if (options.className) {
+                    this.graphic.addClass(options.className);
+                }
+                this.tracker = this.annotation.chart.renderer
+                    .path([['M', 0, 0]])
+                    .addClass('highcharts-tracker-line')
+                    .attr({
+                    zIndex: 2
+                })
+                    .add(parent);
+                if (!this.annotation.chart.styledMode) {
+                    this.tracker.attr({
+                        'stroke-linejoin': 'round',
+                        stroke: TRACKER_FILL,
+                        fill: TRACKER_FILL,
+                        'stroke-width': this.graphic.strokeWidth() +
+                            options.snap * 2
+                    });
+                }
+                ControllableMixin.render.call(this);
+                extend(this.graphic, {
+                    markerStartSetter: MarkerMixin.markerStartSetter,
+                    markerEndSetter: MarkerMixin.markerEndSetter
+                });
+                this.setMarkers(this);
+            };
+            ControllablePath.prototype.redraw = function (animation) {
+                var d = this.toD(),
+                    action = animation ? 'animate' : 'attr';
+                if (d) {
+                    this.graphic[action]({ d: d });
+                    this.tracker[action]({ d: d });
+                }
+                else {
+                    this.graphic.attr({ d: 'M 0 ' + -9e9 });
+                    this.tracker.attr({ d: 'M 0 ' + -9e9 });
+                }
+                this.graphic.placed = this.tracker.placed = Boolean(d);
+                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, '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.
+         *
+         * @requires modules/annotations
+         *
+         * @private
+         * @class
+         * @name Highcharts.AnnotationControllableRect
+         *
+         * @param {Highcharts.Annotation} annotation
+         * An annotation instance.
+         *
+         * @param {Highcharts.AnnotationsShapeOptions} options
+         * A rect's options.
+         *
+         * @param {number} index
+         * Index of the rectangle
+         */
+        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);
+            };
+            ControllableRect.prototype.redraw = function (animation) {
+                var position = this.anchor(this.points[0]).absolutePosition;
+                if (position) {
+                    this.graphic[animation ? 'animate' : 'attr']({
+                        x: position.x,
+                        y: position.y,
+                        width: this.options.width,
+                        height: this.options.height
+                    });
+                }
+                else {
+                    this.attr({
+                        x: 0,
+                        y: -9e9
+                    });
+                }
+                this.graphic.placed = Boolean(position);
+                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, '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. !!!!!!!
+         *
+         * */
+        var merge = U.merge;
+        /* eslint-disable no-invalid-this, valid-jsdoc */
+        /**
+         * A controllable circle class.
+         *
+         * @requires modules/annotations
+         *
+         * @private
+         * @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 = /** @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);
+            };
+            ControllableCircle.prototype.redraw = function (animation) {
+                var position = this.anchor(this.points[0]).absolutePosition;
+                if (position) {
+                    this.graphic[animation ? 'animate' : 'attr']({
+                        x: position.x,
+                        y: position.y,
+                        r: this.options.r
+                    });
+                }
+                else {
+                    this.graphic.attr({
+                        x: 0,
+                        y: -9e9
+                    });
+                }
+                this.graphic.placed = Boolean(position);
+                ControllableMixin.redraw.call(this, animation);
+            };
+            /**
+             * Set the radius.
+             *
+             * @param {number} r a radius to be set
+             */
+            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, '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. !!!!!!!
+         *
+         * */
+        var extend = U.extend,
+            format = U.format,
+            isNumber = U.isNumber,
+            pick = U.pick;
+        /* eslint-disable no-invalid-this, valid-jsdoc */
+        /**
+         * A controllable label class.
+         *
+         * @requires modules/annotations
+         *
+         * @private
+         * @class
+         * @name Highcharts.AnnotationControllableLabel
+         *
+         * @param {Highcharts.Annotation} annotation
+         * An annotation instance.
+         * @param {Highcharts.AnnotationsLabelOptions} options
+         * A label's options.
+         * @param {number} index
+         * Index of the label.
+         */
+        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';
+            }
+            /* *
+             *
+             *  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') {
+                    alignFactor = 1;
+                }
+                else if (align === 'center') {
+                    alignFactor = 2;
+                }
+                if (alignFactor) {
+                    x += (box.width - (alignOptions.width || 0)) / alignFactor;
+                }
+                if (vAlign === 'bottom') {
+                    vAlignFactor = 1;
+                }
+                else if (vAlign === 'middle') {
+                    vAlignFactor = 2;
+                }
+                if (vAlignFactor) {
+                    y += (box.height - (alignOptions.height || 0)) / vAlignFactor;
+                }
+                return {
+                    x: Math.round(x),
+                    y: Math.round(y)
+                };
+            };
+            /**
+             * Returns new alignment options for a label if the label is outside the
+             * plot area. It is almost a one-to-one copy from
+             * Series.prototype.justifyDataLabel except it does not mutate the label and
+             * it works with absolute instead of relative position.
+             */
+            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;
+                    }
+                }
+                // Off right
+                off = x + bBox.width - padding;
+                if (off > chart.plotWidth) {
+                    if (align === 'left') {
+                        options.align = 'right';
+                    }
+                    else {
+                        options.x = chart.plotWidth - off;
+                    }
+                }
+                // Off top
+                off = y + padding;
+                if (off < 0) {
+                    if (verticalAlign === 'bottom') {
+                        options.verticalAlign = 'top';
+                    }
+                    else {
+                        options.y = -off;
+                    }
+                }
+                // Off bottom
+                off = y + bBox.height - padding;
+                if (off > chart.plotHeight) {
+                    if (verticalAlign === 'top') {
+                        options.verticalAlign = 'bottom';
+                    }
+                    else {
+                        options.y = chart.plotHeight - off;
+                    }
+                }
+                return options;
+            };
+            /* *
+             *
+             *  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
+             */
+            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
+             */
+            ControllableLabel.prototype.translate = function (dx, dy) {
+                var chart = this.annotation.chart, 
+                    // Annotation.options
+                    labelOptions = this.annotation.userOptions, 
+                    // Chart.options.annotations
+                    annotationIndex = chart.annotations.indexOf(this.annotation),
+                    chartAnnotations = chart.options.annotations,
+                    chartOptions = chartAnnotations[annotationIndex],
+                    temp;
+                if (chart.inverted) {
+                    temp = dx;
+                    dx = dy;
+                    dy = temp;
+                }
+                // Local options:
+                this.options.x += dx;
+                this.options.y += dy;
+                // Options stored in chart:
+                chartOptions[this.collection][this.index].x = this.options.x;
+                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;
+            };
+            ControllableLabel.prototype.render = function (parent) {
+                var options = this.options,
+                    attrs = this.attrsFromOptions(options),
+                    style = options.style;
+                this.graphic = this.annotation.chart.renderer
+                    .label('', 0, -9999, // #10055
+                options.shape, null, null, options.useHTML, null, 'annotation-label')
+                    .attr(attrs)
+                    .add(parent);
+                if (!this.annotation.chart.styledMode) {
+                    if (style.color === 'contrast') {
+                        style.color = this.annotation.chart.renderer.getContrast(ControllableLabel.shapesWithoutBackground.indexOf(options.shape) > -1 ? '#FFFFFF' : options.backgroundColor);
+                    }
+                    this.graphic
+                        .css(options.style)
+                        .shadow(options.shadow);
+                }
+                if (options.className) {
+                    this.graphic.addClass(options.className);
+                }
+                this.graphic.labelrank = options.labelrank;
+                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],
+                    anchor,
+                    attrs;
+                label.attr({
+                    text: text ?
+                        format(text, point.getLabelConfig(), this.annotation.chart) :
+                        options.formatter.call(point, this)
+                });
+                anchor = this.anchor(point);
+                attrs = this.position(anchor);
+                if (attrs) {
+                    label.alignAttr = attrs;
+                    attrs.anchorX = anchor.absolutePosition.x;
+                    attrs.anchorY = anchor.absolutePosition.y;
+                    label[animation ? 'animate' : 'attr'](attrs);
+                }
+                else {
+                    label.attr({
+                        x: 0,
+                        y: -9999 // #10055
+                    });
+                }
+                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.
+             */
+            ControllableLabel.prototype.anchor = function (_point) {
+                var anchor = ControllableMixin.anchor.apply(this,
+                    arguments),
+                    x = this.options.x || 0,
+                    y = this.options.y || 0;
+                anchor.absolutePosition.x -= x;
+                anchor.absolutePosition.y -= y;
+                anchor.relativePosition.x -= x;
+                anchor.relativePosition.y -= y;
+                return anchor;
+            };
+            /**
+             * Returns the label position relative to its anchor.
+             *
+             * @param {Highcharts.AnnotationAnchorObject} anchor
+             *
+             * @return {Highcharts.PositionObject|null}
+             */
+            ControllableLabel.prototype.position = function (anchor) {
+                var item = this.graphic,
+                    chart = this.annotation.chart,
+                    point = this.points[0],
+                    itemOptions = this.options,
+                    anchorAbsolutePosition = anchor.absolutePosition,
+                    anchorRelativePosition = anchor.relativePosition,
+                    itemPosition,
+                    alignTo,
+                    itemPosRelativeX,
+                    itemPosRelativeY,
+                    showItem = point.series.visible &&
+                        MockPoint.prototype.isInsidePlot.call(point);
+                if (showItem) {
+                    if (itemOptions.distance) {
+                        itemPosition = Tooltip.prototype.getPosition.call({
+                            chart: chart,
+                            distance: pick(itemOptions.distance, 16)
+                        }, item.width, item.height, {
+                            plotX: anchorRelativePosition.x,
+                            plotY: anchorRelativePosition.y,
+                            negative: point.negative,
+                            ttBelow: point.ttBelow,
+                            h: (anchorRelativePosition.height || anchorRelativePosition.width)
+                        });
+                    }
+                    else if (itemOptions.positioner) {
+                        itemPosition = itemOptions.positioner.call(this);
+                    }
+                    else {
+                        alignTo = {
+                            x: anchorAbsolutePosition.x,
+                            y: anchorAbsolutePosition.y,
+                            width: 0,
+                            height: 0
+                        };
+                        itemPosition = ControllableLabel.alignedPosition(extend(itemOptions, {
+                            width: item.width,
+                            height: item.height
+                        }), alignTo);
+                        if (this.options.overflow === 'justify') {
+                            itemPosition = ControllableLabel.alignedPosition(ControllableLabel.justifiedOptions(chart, item, itemOptions, itemPosition), alignTo);
+                        }
+                    }
+                    if (itemOptions.crop) {
+                        itemPosRelativeX = itemPosition.x - chart.plotLeft;
+                        itemPosRelativeY = itemPosition.y - chart.plotTop;
+                        showItem =
+                            chart.isInsidePlot(itemPosRelativeX, itemPosRelativeY) &&
+                                chart.isInsidePlot(itemPosRelativeX + item.width, itemPosRelativeY + item.height);
+                    }
+                }
+                return showItem ? itemPosition : null;
+            };
+            /* *
+             *
+             *  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;
+            if (isNumber(anchorX) && isNumber(anchorY)) {
+                path = [['M', anchorX, anchorY]];
+                // Prefer 45 deg connectors
+                yOffset = y - anchorY;
+                if (yOffset < 0) {
+                    yOffset = -h - yOffset;
+                }
+                if (yOffset < w) {
+                    lateral = anchorX < x + (w / 2) ? yOffset : w - yOffset;
+                }
+                // Anchor below label
+                if (anchorY > y + h) {
+                    path.push(['L', x + lateral, y + h]);
+                    // Anchor above label
+                }
+                else if (anchorY < y) {
+                    path.push(['L', x + lateral, y]);
+                    // Anchor left of label
+                }
+                else if (anchorX < x) {
+                    path.push(['L', x, y + h / 2]);
+                    // Anchor right of label
+                }
+                else if (anchorX > x + w) {
+                    path.push(['L', x + w, y + h / 2]);
+                }
+            }
+            return path || [];
+        };
+
+        return 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. !!!!!!!
+         *
+         * */
+        /* eslint-disable no-invalid-this, valid-jsdoc */
+        /**
+         * A controllable image class.
+         *
+         * @requires modules/annotations
+         *
+         * @private
+         * @class
+         * @name Highcharts.AnnotationControllableImage
+         *
+         * @param {Highcharts.Annotation} annotation
+         * An annotation instance.
+         *
+         * @param {Highcharts.AnnotationsShapeOptions} options
+         * A controllable's options.
+         *
+         * @param {number} index
+         * Index of the image.
+         */
+        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
+                    .image(options.src, 0, -9e9, options.width, options.height)
+                    .attr(attrs)
+                    .add(parent);
+                this.graphic.width = options.width;
+                this.graphic.height = options.height;
+                ControllableMixin.render.call(this);
+            };
+            ControllableImage.prototype.redraw = function (animation) {
+                var anchor = this.anchor(this.points[0]),
+                    position = ControllableLabel.prototype.position.call(this,
+                    anchor);
+                if (position) {
+                    this.graphic[animation ? 'animate' : 'attr']({
+                        x: position.x,
+                        y: position.y
+                    });
+                }
+                else {
+                    this.graphic.attr({
+                        x: 0,
+                        y: -9e9
+                    });
+                }
+                this.graphic.placed = Boolean(position);
+                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, '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
+         *
+         *  License: www.highcharts.com/license
+         *
+         *  !!!!!!! 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,
+            erase = U.erase,
+            extend = U.extend,
+            find = U.find,
+            fireEvent = U.fireEvent,
+            merge = U.merge,
+            pick = U.pick,
+            splat = U.splat,
+            wrap = U.wrap;
+        /* *********************************************************************
+         *
+         * ANNOTATION
+         *
+         ******************************************************************** */
+        /**
+         * Possible directions for draggable annotations. An empty string (`''`)
+         * makes the annotation undraggable.
+         *
+         * @typedef {''|'x'|'xy'|'y'} Highcharts.AnnotationDraggableValue
+         */
+        /**
+         * @private
+         * @typedef {
+         *          Highcharts.AnnotationControllableCircle|
+         *          Highcharts.AnnotationControllableImage|
+         *          Highcharts.AnnotationControllablePath|
+         *          Highcharts.AnnotationControllableRect
+         *          }
+         *          Highcharts.AnnotationShapeType
+         * @requires modules/annotations
+         */
+        /**
+         * @private
+         * @typedef {
+         *          Highcharts.AnnotationControllableLabel
+         *          }
+         *          Highcharts.AnnotationLabelType
+         * @requires modules/annotations
+         */
+        /**
+         * A point-like object, a mock point or a point used in series.
+         * @private
+         * @typedef {Highcharts.AnnotationMockPoint|Highcharts.Point} Highcharts.AnnotationPointType
+         * @requires modules/annotations
+         */
+        /* eslint-disable no-invalid-this, valid-jsdoc */
+        /**
+         * An annotation class which serves as a container for items like labels or
+         * shapes. Created items are positioned on the chart either by linking them to
+         * existing points or created mock points
+         *
+         * @class
+         * @name Highcharts.Annotation
+         *
+         * @param {Highcharts.Chart} chart a chart instance
+         * @param {Highcharts.AnnotationsOptions} userOptions the options object
+         */
+        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);
+            }
+            /**
+             * Initialize the annotation.
+             * @private
+             */
+            Annotation.prototype.init = function () {
+                var chart = this.chart,
+                    animOptions = this.options.animation;
+                this.linkPoints();
+                this.addControlPoints();
+                this.addShapes();
+                this.addLabels();
+                this.setLabelCollector();
+                this.animationConfig = getDeferredAnimation(chart, animOptions);
+            };
+            Annotation.prototype.getLabelsAndShapesOptions = function (baseOptions, newOptions) {
+                var mergedOptions = {};
+                ['labels', 'shapes'].forEach(function (name) {
+                    if (baseOptions[name]) {
+                        mergedOptions[name] = splat(newOptions[name]).map(function (basicOptions, i) {
+                            return merge(baseOptions[name][i], basicOptions);
+                        });
+                    }
+                });
+                return mergedOptions;
+            };
+            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);
+            };
+            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);
+            };
+            Annotation.prototype.addClipPaths = function () {
+                this.setClipAxes();
+                if (this.clipXAxis && this.clipYAxis) {
+                    this.clipRect = this.chart.renderer.clipRect(this.getClipBox());
+                }
+            };
+            Annotation.prototype.setClipAxes = function () {
+                var xAxes = this.chart.xAxis,
+                    yAxes = this.chart.yAxis,
+                    linkedAxes = (this.options.labels || [])
+                        .concat(this.options.shapes || [])
+                        .reduce(function (axes,
+                    labelOrShape) {
+                        return [
+                            xAxes[labelOrShape &&
+                                labelOrShape.point &&
+                                labelOrShape.point.xAxis] || axes[0],
+                            yAxes[labelOrShape &&
+                                labelOrShape.point &&
+                                labelOrShape.point.yAxis] || axes[1]
+                        ];
+                }, []);
+                this.clipXAxis = linkedAxes[0];
+                this.clipYAxis = linkedAxes[1];
+            };
+            Annotation.prototype.getClipBox = function () {
+                if (this.clipXAxis && this.clipYAxis) {
+                    return {
+                        x: this.clipXAxis.left,
+                        y: this.clipYAxis.top,
+                        width: this.clipXAxis.width,
+                        height: this.clipYAxis.height
+                    };
+                }
+            };
+            Annotation.prototype.setLabelCollector = function () {
+                var annotation = this;
+                annotation.labelCollector = function () {
+                    return annotation.labels.reduce(function (labels, label) {
+                        if (!label.options.allowOverlap) {
+                            labels.push(label.graphic);
+                        }
+                        return labels;
+                    }, []);
+                };
+                annotation.chart.labelCollectors.push(annotation.labelCollector);
+            };
+            /**
+             * Set an annotation options.
+             * @private
+             * @param {Highcharts.AnnotationsOptions} - user options for an annotation
+             */
+            Annotation.prototype.setOptions = function (userOptions) {
+                this.options = merge(this.defaultOptions, userOptions);
+            };
+            Annotation.prototype.redraw = function (animation) {
+                this.linkPoints();
+                if (!this.graphic) {
+                    this.render();
+                }
+                if (this.clipRect) {
+                    this.clipRect.animate(this.getClipBox());
+                }
+                this.redrawItems(this.shapes, animation);
+                this.redrawItems(this.labels, animation);
+                ControllableMixin.redraw.call(this, animation);
+            };
+            /**
+             * @private
+             * @param {Array<Highcharts.AnnotationControllable>} items
+             * @param {boolean} [animation]
+             */
+            Annotation.prototype.redrawItems = function (items, animation) {
+                var i = items.length;
+                // needs a backward loop
+                // labels/shapes array might be modified
+                // due to destruction of the item
+                while (i--) {
+                    this.redrawItem(items[i], animation);
+                }
+            };
+            /**
+             * @private
+             * @param {Array<Highcharts.AnnotationControllable>} items
+             */
+            Annotation.prototype.renderItems = function (items) {
+                var i = items.length;
+                while (i--) {
+                    this.renderItem(items[i]);
+                }
+            };
+            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' :
+                        'hidden'
+                })
+                    .add();
+                this.shapesGroup = renderer
+                    .g('annotation-shapes')
+                    .add(this.graphic)
+                    .clip(this.chart.plotBoxClip);
+                this.labelsGroup = renderer
+                    .g('annotation-labels')
+                    .attr({
+                    // hideOverlappingLabels requires translation
+                    translateX: 0,
+                    translateY: 0
+                })
+                    .add(this.graphic);
+                this.addClipPaths();
+                if (this.clipRect) {
+                    this.graphic.clip(this.clipRect);
+                }
+                // Render shapes and labels before adding events (#13070).
+                this.renderItems(this.shapes);
+                this.renderItems(this.labels);
+                this.addEvents();
+                ControllableMixin.render.call(this);
+            };
+            /**
+             * Set the annotation's visibility.
+             * @private
+             * @param {boolean} [visible]
+             * Whether to show or hide an annotation. If the param is omitted, the
+             * annotation's visibility is toggled.
+             */
+            Annotation.prototype.setVisibility = function (visible) {
+                var options = this.options,
+                    visibility = pick(visible, !options.visible);
+                this.graphic.attr('visibility', visibility ? 'visible' : 'hidden');
+                if (!visibility) {
+                    this.setControlPointsVisibility(false);
+                }
+                options.visible = visibility;
+            };
+            Annotation.prototype.setControlPointsVisibility = function (visible) {
+                var setItemControlPointsVisibility = function (item) {
+                        item.setControlPointsVisibility(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
+             * the chart.annotations array) - it is recommended to use
+             * {@link Highcharts.Chart#removeAnnotation} instead.
+             * @private
+             */
+            Annotation.prototype.destroy = function () {
+                var chart = this.chart,
+                    destroyItem = function (item) {
+                        item.destroy();
+                };
+                this.labels.forEach(destroyItem);
+                this.shapes.forEach(destroyItem);
+                this.clipXAxis = null;
+                this.clipYAxis = null;
+                erase(chart.labelCollectors, this.labelCollector);
+                EventEmitterMixin.destroy.call(this);
+                ControllableMixin.destroy.call(this);
+                destroyObjectProperties(this, chart);
+            };
+            /**
+             * See {@link Highcharts.Chart#removeAnnotation}.
+             * @private
+             */
+            Annotation.prototype.remove = function () {
+                // Let chart.update() remove annoations on demand
+                return this.chart.removeAnnotation(this);
+            };
+            /**
+             * Updates an annotation.
+             *
+             * @function Highcharts.Annotation#update
+             *
+             * @param {Partial<Highcharts.AnnotationsOptions>} userOptions
+             * New user options for the annotation.
+             *
+             * @return {void}
+             */
+            Annotation.prototype.update = function (userOptions, redraw) {
+                var chart = this.chart,
+                    labelsAndShapes = this.getLabelsAndShapesOptions(this.userOptions,
+                    userOptions),
+                    userOptionsIndex = chart.annotations.indexOf(this),
+                    options = merge(true,
+                    this.userOptions,
+                    userOptions);
+                options.labels = labelsAndShapes.labels;
+                options.shapes = labelsAndShapes.shapes;
+                this.destroy();
+                this.constructor(chart, options);
+                // Update options in chart options, used in exporting (#9767):
+                chart.options.annotations[userOptionsIndex] = options;
+                this.isUpdating = true;
+                if (pick(redraw, true)) {
+                    chart.redraw();
+                }
+                fireEvent(this, 'afterUpdate');
+                this.isUpdating = false;
+            };
+            /* *************************************************************
+                * 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
+             */
+            Annotation.prototype.initShape = function (shapeOptions, index) {
+                var options = merge(this.options.shapeOptions, {
+                        controlPointOptions: this.options.controlPointOptions
+                    },
+                    shapeOptions),
+                    shape = new Annotation.shapesMap[options.type](this,
+                    options,
+                    index);
+                shape.itemType = 'shape';
+                this.shapes.push(shape);
+                return shape;
+            };
+            /**
+             * Initialisation of a single label
+             * @private
+             */
+            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]
+             */
+            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
+            }
+        }));
+        H.extendAnnotation = function (Constructor, BaseConstructor, prototype, defaultOptions) {
+            BaseConstructor = BaseConstructor || Annotation;
+            merge(true, Constructor.prototype, BaseConstructor.prototype, prototype);
+            Constructor.prototype.defaultOptions = merge(Constructor.prototype.defaultOptions, defaultOptions || {});
+        };
+        /* *********************************************************************
+         *
+         * EXTENDING CHART PROTOTYPE
+         *
+         ******************************************************************** */
+        extend(chartProto, /** @lends Highcharts.Chart# */ {
+            initAnnotation: function (userOptions) {
+                var Constructor = Annotation.types[userOptions.type] || Annotation,
+                    annotation = new Constructor(this,
+                    userOptions);
+                this.annotations.push(annotation);
+                return annotation;
+            },
+            /**
+             * Add an annotation to the chart after render time.
+             *
+             * @param  {Highcharts.AnnotationsOptions} options
+             *         The annotation options for the new, detailed annotation.
+             * @param {boolean} [redraw]
+             *
+             * @return {Highcharts.Annotation} - The newly generated annotation.
+             */
+            addAnnotation: function (userOptions, redraw) {
+                var annotation = this.initAnnotation(userOptions);
+                this.options.annotations.push(annotation.options);
+                if (pick(redraw, true)) {
+                    annotation.redraw();
+                    annotation.graphic.attr({
+                        opacity: 1
+                    });
+                }
+                return annotation;
+            },
+            /**
+             * Remove an annotation from the chart.
+             *
+             * @param {number|string|Highcharts.Annotation} idOrAnnotation
+             * The annotation's id or direct annotation object.
+             */
+            removeAnnotation: function (idOrAnnotation) {
+                var annotations = this.annotations,
+                    annotation = idOrAnnotation.coll === 'annotations' ?
+                        idOrAnnotation :
+                        find(annotations,
+                    function (annotation) {
+                            return annotation.options.id === idOrAnnotation;
+                    });
+                if (annotation) {
+                    fireEvent(annotation, 'remove');
+                    erase(this.options.annotations, annotation.options);
+                    erase(annotations, annotation);
+                    annotation.destroy();
+                }
+            },
+            drawAnnotations: function () {
+                this.plotBoxClip.attr(this.plotBox);
+                this.annotations.forEach(function (annotation) {
+                    annotation.redraw();
+                    annotation.graphic.animate({
+                        opacity: 1
+                    }, annotation.animationConfig);
+                });
+            }
+        });
+        // Let chart.update() update annotations
+        chartProto.collectionsWithUpdate.push('annotations');
+        // Let chart.update() create annoations on demand
+        chartProto.collectionsWithInit.annotations = [chartProto.addAnnotation];
+        chartProto.callbacks.push(function (chart) {
+            chart.annotations = [];
+            if (!chart.options.annotations) {
+                chart.options.annotations = [];
+            }
+            chart.plotBoxClip = this.renderer.clipRect(this.plotBox);
+            chart.controlPointsGroup = chart.renderer
+                .g('control-points')
+                .attr({ zIndex: 99 })
+                .clip(chart.plotBoxClip)
+                .add();
+            chart.options.annotations.forEach(function (annotationOptions, i) {
+                var annotation = chart.initAnnotation(annotationOptions);
+                chart.options.annotations[i] = annotation.options;
+            });
+            chart.drawAnnotations();
+            addEvent(chart, 'redraw', chart.drawAnnotations);
+            addEvent(chart, 'destroy', function () {
+                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(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 () {
         /**
          *
          *  (c) 2010-2018 Paweł Fus
@@ -88,7 +3806,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
@@ -98,6 +3816,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.
          *
@@ -124,18 +3855,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-';
@@ -293,7 +4012,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);
                 }));
             };
@@ -553,6 +4272,7 @@
                 function traverse(option, key, parentEditables, parent) {
                     var nextParent;
                     if (parentEditables &&
+                        option &&
                         nonEditables.indexOf(key) === -1 &&
                         ((parentEditables.indexOf &&
                             parentEditables.indexOf(key)) >= 0 ||
@@ -753,7 +4473,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
@@ -770,7 +4490,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) {
@@ -779,10 +4499,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();
             }
@@ -790,7 +4510,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();
             }
@@ -810,7 +4530,7 @@
                     navigation = annotation.chart.navigationBindings,
                     prevAnnotation = navigation.activeAnnotation;
                 if (originalClick) {
-                    originalClick.click.call(annotation, event);
+                    originalClick.call(annotation, event);
                 }
                 if (prevAnnotation !== annotation) {
                     // Select current:
@@ -859,15 +4579,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: {
                 /**
@@ -917,6 +4639,8 @@
             /**
              * @optionparent navigation
              * @product      highcharts highstock
+             *
+             * @private
              */
             navigation: {
                 /**
@@ -1115,7 +4839,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
                  */
@@ -1173,13 +4897,17 @@
                  *            measure, pitchfork, tunnel, verticalLine, basicAnnotation
                  * @apioption navigation.annotationsOptions
                  */
-                annotationsOptions: {}
+                annotationsOptions: {
+                    animation: {
+                        defer: 0
+                    }
+                }
             }
         });
 
         return NavigationBindings;
     });
-    _registerModule(_modules, 'modules/stock-tools-bindings.js', [_modules['parts/Globals.js'], _modules['annotations/navigationBindings.js'], _modules['parts/Utilities.js']], function (H, NavigationBindings, U) {
+    _registerModule(_modules, 'Stock/StockToolsBindings.js', [_modules['Core/Globals.js'], _modules['Extensions/Annotations/NavigationBindings.js'], _modules['Core/Utilities.js']], function (H, NavigationBindings, U) {
         /**
          *
          *  Events generator for Stock tools
@@ -1195,9 +4923,11 @@
             defined = U.defined,
             extend = U.extend,
             fireEvent = U.fireEvent,
+            getOptions = U.getOptions,
             isNumber = U.isNumber,
             merge = U.merge,
             pick = U.pick,
+            setOptions = U.setOptions,
             uniqueKey = U.uniqueKey;
         var bindingsUtils = NavigationBindings.prototype.utils,
             PREFIX = 'highcharts-';
@@ -1290,6 +5020,7 @@
             };
         };
         bindingsUtils.manageIndicators = function (data) {
+            var _a;
             var navigation = this,
                 chart = navigation.chart,
                 seriesConfig = {
@@ -1329,6 +5060,8 @@
                     'linearRegressionAngle'
                 ],
                 yAxis,
+                parentSeries,
+                defaultOptions,
                 series;
             if (data.actionType === 'edit') {
                 navigation.fieldsToOptions(data.fields, seriesConfig);
@@ -1356,6 +5089,19 @@
             else {
                 seriesConfig.id = uniqueKey();
                 navigation.fieldsToOptions(data.fields, seriesConfig);
+                parentSeries = chart.get(seriesConfig.linkedTo);
+                defaultOptions = getOptions().plotOptions;
+                // Make sure that indicator uses the SUM approx if SUM approx is used
+                // by parent series (#13950).
+                if (typeof parentSeries !== 'undefined' &&
+                    parentSeries instanceof Highcharts.Series &&
+                    parentSeries.getDGApproximation() === 'sum' &&
+                    // If indicator has defined approx type, use it (e.g. "ranges")
+                    !defined(defaultOptions && defaultOptions[seriesConfig.type] && ((_a = defaultOptions.dataGrouping) === null || _a === void 0 ? void 0 : _a.approximation))) {
+                    seriesConfig.dataGrouping = {
+                        approximation: 'sum'
+                    };
+                }
                 if (indicatorsWithAxes.indexOf(data.type) >= 0) {
                     yAxis = chart.addAxis({
                         id: uniqueKey(),
@@ -1593,7 +5339,6 @@
              * @function Highcharts.NavigationBindings#resizeYAxes
              * @param {number} [defaultHeight]
              * Default height for yAxis
-             * @return {void}
              */
             resizeYAxes: function (defaultHeight) {
                 defaultHeight = defaultHeight || 20; // in %, but as a number
@@ -2826,6 +6571,8 @@
             /**
              * Displays chart in fullscreen.
              *
+             * **Note**: Fullscreen is not supported on iPhone due to iOS limitations.
+             *
              * @type    {Highcharts.NavigationBindingsOptionsObject}
              * @product highstock
              * @default {"className": "highcharts-full-screen", "init": function() {}}
@@ -3005,7 +6752,7 @@
                 }
             }
         };
-        H.setOptions({
+        setOptions({
             navigation: {
                 bindings: stockToolsBindings
             }
@@ -3013,7 +6760,7 @@
         NavigationBindings.prototype.utils = merge(bindingsUtils, NavigationBindings.prototype.utils);
 
     });
-    _registerModule(_modules, 'modules/stock-tools-gui.js', [_modules['parts/Globals.js'], _modules['parts/Utilities.js'], _modules['annotations/navigationBindings.js']], function (H, U, NavigationBindings) {
+    _registerModule(_modules, 'Stock/StockToolsGui.js', [_modules['Core/Chart/Chart.js'], _modules['Core/Globals.js'], _modules['Extensions/Annotations/NavigationBindings.js'], _modules['Core/Utilities.js']], function (Chart, H, NavigationBindings, U) {
         /* *
          *
          *  GUI generator for Stock tools
@@ -3033,9 +6780,10 @@
             getStyle = U.getStyle,
             isArray = U.isArray,
             merge = U.merge,
-            pick = U.pick;
-        var win = H.win, DIV = 'div', SPAN = 'span', UL = 'ul', LI = 'li', PREFIX = 'highcharts-', activeClass = PREFIX + 'active';
-        H.setOptions({
+            pick = U.pick,
+            setOptions = U.setOptions;
+        var DIV = 'div', SPAN = 'span', UL = 'ul', LI = 'li', PREFIX = 'highcharts-', activeClass = PREFIX + 'active';
+        setOptions({
             /**
              * @optionparent lang
              */
@@ -3204,9 +6952,10 @@
                     toolbarClassName: 'stocktools-toolbar',
                     /**
                      * A collection of strings pointing to config options for the
-                     * toolbar items. Each name refers to unique key from definitions
-                     * object.
+                     * toolbar items. Each name refers to a unique key from the
+                     * definitions object.
                      *
+                     * @type    {Array<string>}
                      * @default [
                      *   'indicators',
                      *   'separator',
@@ -3761,10 +7510,10 @@
         });
         /* eslint-disable no-invalid-this, valid-jsdoc */
         // Run HTML generator
-        addEvent(H.Chart, 'afterGetContainer', function () {
+        addEvent(Chart, 'afterGetContainer', function () {
             this.setStockTools();
         });
-        addEvent(H.Chart, 'getMargins', function () {
+        addEvent(Chart, 'getMargins', function () {
             var listWrapper = this.stockTools && this.stockTools.listWrapper,
                 offsetWidth = listWrapper && ((listWrapper.startWidth +
                     getStyle(listWrapper, 'padding-left') +
@@ -3773,12 +7522,12 @@
                 this.plotLeft += offsetWidth;
             }
         });
-        addEvent(H.Chart, 'destroy', function () {
+        addEvent(Chart, 'destroy', function () {
             if (this.stockTools) {
                 this.stockTools.destroy();
             }
         });
-        addEvent(H.Chart, 'redraw', function () {
+        addEvent(Chart, 'redraw', function () {
             if (this.stockTools && this.stockTools.guiEnabled) {
                 this.stockTools.redraw();
             }
@@ -4269,7 +8018,7 @@
             Toolbar.prototype.getIconsURL = function () {
                 return this.chart.options.navigation.iconsURL ||
                     this.options.iconsURL ||
-                    'https://code.highcharts.com/8.1.0/gfx/stock-icons/';
+                    'https://code.highcharts.com/8.2.2/gfx/stock-icons/';
             };
             return Toolbar;
         }());
@@ -4319,12 +8068,11 @@
             saveChart: PREFIX + 'save-chart',
             separator: PREFIX + 'separator'
         };
-        extend(H.Chart.prototype, {
+        extend(Chart.prototype, {
             /**
              * Verify if Toolbar should be added.
              * @private
              * @param {Highcharts.StockToolsOptions} - chart options
-             * @return {void}
              */
             setStockTools: function (options) {
                 var chartOptions = this.options,
@@ -4332,7 +8080,7 @@
                     guiOptions = merge(chartOptions.stockTools && chartOptions.stockTools.gui,
                     options && options.gui),
                     langOptions = lang.stockTools && lang.stockTools.gui;
-                this.stockTools = new H.Toolbar(guiOptions, langOptions, this);
+                this.stockTools = new Toolbar(guiOptions, langOptions, this);
                 if (this.stockTools.guiEnabled) {
                     this.isDirtyBox = true;
                 }