highcharts 9.2.2 → 9.3.0

package/es-modules/Extensions/Annotations/Types/BasicAnnotation.js

@@ -47,10 +47,11 @@ var BasicAnnotation = /** @class */ (function (_super) {
         var options = this.options;
         if (options.shapes) {
             delete options.labelOptions;
-            if (options.shapes[0].type === 'circle') {
-                this.basicType = 'circle';
+            if (options.shapes[0].type) {
+                this.basicType = options.shapes[0].type;
             }
             else {
+                // Defalut shape would be rectangle.
                 this.basicType = 'rectangle';
             }
         }
@@ -169,6 +170,54 @@ var BasicAnnotation = /** @class */ (function (_super) {
                         target.redraw(false);
                     }
                 }
+            }],
+        ellipse: [{
+                positioner: function (target) {
+                    var position = target.getAbsolutePosition(target.points[0]);
+                    return {
+                        x: position.x - this.graphic.width / 2,
+                        y: position.y - this.graphic.height / 2
+                    };
+                },
+                events: {
+                    drag: function (e, target) {
+                        var position = target.getAbsolutePosition(target.points[0]);
+                        target.translatePoint(e.chartX - position.x, e.chartY - position.y, 0);
+                        target.redraw(false);
+                    }
+                }
+            }, {
+                positioner: function (target) {
+                    var position = target.getAbsolutePosition(target.points[1]);
+                    return {
+                        x: position.x - this.graphic.width / 2,
+                        y: position.y - this.graphic.height / 2
+                    };
+                },
+                events: {
+                    drag: function (e, target) {
+                        var position = target.getAbsolutePosition(target.points[1]);
+                        target.translatePoint(e.chartX - position.x, e.chartY - position.y, 1);
+                        target.redraw(false);
+                    }
+                }
+            }, {
+                positioner: function (target) {
+                    var position = target.getAbsolutePosition(target.points[0]), position2 = target.getAbsolutePosition(target.points[1]), attrs = target.getAttrs(position, position2);
+                    return {
+                        x: attrs.cx - this.graphic.width / 2 +
+                            attrs.ry * Math.sin((attrs.angle * Math.PI) / 180),
+                        y: attrs.cy - this.graphic.height / 2 -
+                            attrs.ry * Math.cos((attrs.angle * Math.PI) / 180)
+                    };
+                },
+                events: {
+                    drag: function (e, target) {
+                        var position = target.getAbsolutePosition(target.points[0]), position2 = target.getAbsolutePosition(target.points[1]), newR = target.getDistanceFromLine(position, position2, e.chartX, e.chartY), yAxis = target.getYAxis(), newRY = Math.abs(yAxis.toValue(0) - yAxis.toValue(newR));
+                        target.setYRadius(newRY);
+                        target.redraw(false);
+                    }
+                }
             }]
     };
     return BasicAnnotation;

package/es-modules/Extensions/Annotations/Types/CrookedLine.js

@@ -72,7 +72,7 @@ var CrookedLine = /** @class */ (function (_super) {
                     return target.annotation.points[i];
                 };
             })
-        }), false);
+        }), 0);
         typeOptions.line = shape.options;
     };
     return CrookedLine;

package/es-modules/Extensions/Annotations/Types/Fibonacci.js

@@ -21,7 +21,6 @@ import Annotation from '../Annotations.js';
 import MockPoint from '../MockPoint.js';
 import Tunnel from './Tunnel.js';
 import U from '../../../Core/Utilities.js';
-import palette from '../../../Core/Color/Palette.js';
 var merge = U.merge;
 /* eslint-disable no-invalid-this, valid-jsdoc */
 var createPathDGenerator = function (retracementIndex, isBackground) {
@@ -95,7 +94,7 @@ var Fibonacci = /** @class */ (function (_super) {
                 type: 'path',
                 d: createPathDGenerator(i),
                 stroke: lineColors[i] || lineColor
-            }, false);
+            }, i);
             if (i > 0) {
                 this.initShape({
                     type: 'path',
@@ -168,7 +167,7 @@ Fibonacci.prototype.defaultOptions = merge(Tunnel.prototype.defaultOptions,
         /**
          * The color of line.
          */
-        lineColor: palette.neutralColor40,
+        lineColor: "#999999" /* neutralColor40 */,
         /**
          * An array of colors for the lines.
          */

package/es-modules/Extensions/Annotations/Types/FibonacciTimeZones.js

@@ -0,0 +1,219 @@
+/* *
+ *
+ *  Author: Rafal Sebestjanski
+ *
+ *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
+ *
+ * */
+'use strict';
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import Annotation from '../Annotations.js';
+import ControlPoint from '../ControlPoint.js';
+import CrookedLine from './CrookedLine.js';
+import InfinityLine from './InfinityLine.js';
+import MockPoint from '../MockPoint.js';
+import U from '../../../Core/Utilities.js';
+var merge = U.merge;
+/* *
+ *
+ *  Class
+ *
+ * */
+/* eslint-disable no-invalid-this, valid-jsdoc */
+var FibonacciTimeZones = /** @class */ (function (_super) {
+    __extends(FibonacciTimeZones, _super);
+    function FibonacciTimeZones() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    /* *
+     *
+     *  Functions
+     *
+     * */
+    /*
+    Method taken (and slightly changed) from the InfinityLine annotation.
+
+    It uses x coordinate to create two mock points on the same x. Then,
+    it uses some logic from InfinityLine to find equation of the line passing
+    through our two points and, using that equation, it finds and returns
+    the coordinates of where the line intersects the plot area edges.
+
+    This is being done for each fibonacci time zone line.
+
+
+            this point here is found
+               |
+               v
+     |---------*--------------------------------------------------------|
+     |                                                                  |
+     |                                                                  |
+     |                                                                  |
+     |                                                                  |
+     |         *   copy of the primary point                            |
+     |                                                                  |
+     |         *   primary point (e.g. the one given in options)        |
+     |                                                                  |
+     |---------*--------------------------------------------------------|
+            and this point here is found (intersection with the plot area edge)
+
+    */
+    FibonacciTimeZones.prototype.edgePoint = function (startIndex, endIndex, fibonacciIndex) {
+        return function (target) {
+            var chart = target.annotation.chart, plotLeftOrTop = chart.inverted ? chart.plotTop : chart.plotLeft;
+            var points = target.annotation.points;
+            var xAxis = points[0].series.xAxis, 
+            // Distance between the two first lines in pixels
+            deltaX = points.length > 1 ?
+                points[1].plotX - points[0].plotX : 0, 
+            // firstLine.x + fibb * offset
+            x = xAxis.toValue(points[0].plotX + plotLeftOrTop + fibonacciIndex * deltaX);
+            // We need 2 mock points with the same x coordinate, different y
+            points = [
+                new MockPoint(chart, points[0].target, {
+                    x: x,
+                    y: 0,
+                    xAxis: points[0].options.xAxis,
+                    yAxis: points[0].options.yAxis
+                }),
+                new MockPoint(chart, points[0].target, {
+                    x: x,
+                    y: 1,
+                    xAxis: points[0].options.xAxis,
+                    yAxis: points[0].options.yAxis
+                })
+            ];
+            return InfinityLine.findEdgePoint(points[startIndex], points[endIndex]);
+        };
+    };
+    FibonacciTimeZones.prototype.addShapes = function () {
+        var numberOfLines = 11;
+        var fibb = 1, nextFibb = 1;
+        for (var i = 0; i < numberOfLines; i++) {
+            // The fibb variable equals to 1 twice - correct it in the first
+            // iteration so the lines don't overlap
+            var correctedFibb = !i ? 0 : fibb, points = [
+                this.edgePoint(1, 0, correctedFibb),
+                this.edgePoint(0, 1, correctedFibb)
+            ];
+            // Calculate fibbonacci
+            nextFibb = fibb + nextFibb;
+            fibb = nextFibb - fibb;
+            // Save the second line for the control point
+            if (i === 1) {
+                this.secondLineEdgePoints = [points[0], points[1]];
+            }
+            this.initShape(merge(this.options.typeOptions.line, {
+                type: 'path',
+                points: points
+            }), i // shape's index. Can be found in annotation.shapes[i].index
+            );
+        }
+    };
+    FibonacciTimeZones.prototype.addControlPoints = function () {
+        var options = this.options, typeOptions = options.typeOptions, controlPoint = new ControlPoint(this.chart, this, merge(options.controlPointOptions, typeOptions.controlPointOptions), 0);
+        this.controlPoints.push(controlPoint);
+        typeOptions.controlPointOptions = controlPoint.options;
+    };
+    return FibonacciTimeZones;
+}(CrookedLine));
+FibonacciTimeZones.prototype.defaultOptions = merge(CrookedLine.prototype.defaultOptions, {
+    typeOptions: {
+        // Options for showing in popup edit
+        line: {
+            /**
+             * The color of the lines.
+             *
+             * @type      {string}
+             * @since 9.3.0
+             * @default   'rgba(0, 0, 0, 0.75)'
+             * @apioption annotations.fibonacciTimeZones.typeOptions.line.stroke
+             */
+            stroke: 'rgba(0, 0, 0, 0.75)',
+            /**
+             * The width of the lines.
+             *
+             * @type      {number}
+             * @since 9.3.0
+             * @default   1
+             * @apioption annotations.fibonacciTimeZones.typeOptions.line.strokeWidth
+             */
+            strokeWidth: 1,
+            // Don't inherit fill (don't display in popup edit)
+            fill: void 0
+        },
+        controlPointOptions: {
+            positioner: function () {
+                var _a;
+                // The control point is in the middle of the second line
+                var target = this.target, graphic = this.graphic, edgePoints = target.secondLineEdgePoints, args = { annotation: target }, firstEdgePointY = edgePoints[0](args).y, secondEdgePointY = edgePoints[1](args).y, plotLeft = this.chart.plotLeft, plotTop = this.chart.plotTop;
+                var x = edgePoints[0](args).x, y = (firstEdgePointY + secondEdgePointY) / 2;
+                if (this.chart.inverted) {
+                    _a = [y, x], x = _a[0], y = _a[1];
+                }
+                return {
+                    x: plotLeft + x - graphic.width / 2,
+                    y: plotTop + y - graphic.height / 2
+                };
+            },
+            events: {
+                drag: function (e, target) {
+                    var isInsidePlot = target.chart.isInsidePlot(e.chartX - target.chart.plotLeft, e.chartY - target.chart.plotTop, {
+                        visiblePlotOnly: true
+                    });
+                    if (isInsidePlot) {
+                        var translation = this.mouseMoveToTranslation(e);
+                        target.translatePoint(translation.x, 0, 1);
+                        target.redraw(false);
+                    }
+                }
+            }
+        }
+    }
+});
+/* *
+ *
+ *  Registry
+ *
+ * */
+Annotation.types.fibonacciTimeZones = FibonacciTimeZones;
+/* *
+ *
+ *  Default Export
+ *
+ * */
+export default FibonacciTimeZones;
+/* *
+ *
+ *  API Declarations
+ *
+ * */
+/**
+ * The Fibonacci Time Zones annotation.
+ *
+ * @sample highcharts/annotations-advanced/fibonacci-time-zones/
+ *         Fibonacci Time Zones
+ *
+ * @extends   annotations.crookedLine
+ * @since 9.3.0
+ * @product   highstock
+ * @apioption annotations.fibonacciTimeZones
+ */
+/**
+ * @exclude   y
+ * @since 9.3.0
+ * @product   highstock
+ * @apioption annotations.fibonacciTimeZones.typeOptions.points
+ */
+(''); // keeps doclets above in transpiled file

package/es-modules/Extensions/Annotations/Types/InfinityLine.js

@@ -118,7 +118,7 @@ var InfinityLine = /** @class */ (function (_super) {
         var line = this.initShape(merge(typeOptions.line, {
             type: 'path',
             points: points
-        }), false);
+        }), 0);
         typeOptions.line = line.options;
     };
     /**

package/es-modules/Extensions/Annotations/Types/Measure.js

@@ -20,7 +20,7 @@ var __extends = (this && this.__extends) || (function () {
 import Annotation from '../Annotations.js';
 import ControlPoint from '../ControlPoint.js';
 import U from '../../../Core/Utilities.js';
-var extend = U.extend, isNumber = U.isNumber, merge = U.merge, pick = U.pick;
+var defined = U.defined, extend = U.extend, isNumber = U.isNumber, merge = U.merge, pick = U.pick;
 /* eslint-disable no-invalid-this, valid-jsdoc */
 var Measure = /** @class */ (function (_super) {
     __extends(Measure, _super);
@@ -102,7 +102,17 @@ var Measure = /** @class */ (function (_super) {
         ];
     };
     Measure.prototype.addControlPoints = function () {
+        var inverted = this.chart.inverted, options = this.options.controlPointOptions;
         var selectType = this.options.typeOptions.selectType, controlPoint;
+        if (!defined(this.userOptions.controlPointOptions &&
+            this.userOptions.controlPointOptions.style.cursor)) {
+            if (selectType === 'x') {
+                options.style.cursor = inverted ? 'ns-resize' : 'ew-resize';
+            }
+            else if (selectType === 'y') {
+                options.style.cursor = inverted ? 'ew-resize' : 'ns-resize';
+            }
+        }
         controlPoint = new ControlPoint(this.chart, this, this.options.controlPointOptions, 0);
         this.controlPoints.push(controlPoint);
         // add extra controlPoint for horizontal and vertical range
@@ -177,7 +187,7 @@ var Measure = /** @class */ (function (_super) {
         this.initShape(extend({
             type: 'path',
             points: this.shapePointsOptions()
-        }, this.options.typeOptions.background), false);
+        }, this.options.typeOptions.background), 2);
     };
     /**
      * Add internal crosshair shapes (on top and bottom).
@@ -229,12 +239,8 @@ var Measure = /** @class */ (function (_super) {
             // Add new crosshairs
             crosshairOptionsX = merge(defaultOptions, options.crosshairX);
             crosshairOptionsY = merge(defaultOptions, options.crosshairY);
-            this.initShape(extend({
-                d: pathH
-            }, crosshairOptionsX), false);
-            this.initShape(extend({
-                d: pathV
-            }, crosshairOptionsY), false);
+            this.initShape(extend({ d: pathH }, crosshairOptionsX), 0);
+            this.initShape(extend({ d: pathV }, crosshairOptionsY), 1);
         }
     };
     Measure.prototype.onDrag = function (e) {

package/es-modules/Extensions/Annotations/Types/Pitchfork.js

@@ -80,21 +80,21 @@ var Pitchfork = /** @class */ (function (_super) {
                 this.points[0],
                 Pitchfork.middleLineEdgePoint
             ]
-        }, false);
+        }, 0);
         this.initShape({
             type: 'path',
             points: [
                 this.points[1],
                 Pitchfork.topLineEdgePoint
             ]
-        }, false);
+        }, 1);
         this.initShape({
             type: 'path',
             points: [
                 this.points[2],
                 Pitchfork.bottomLineEdgePoint
             ]
-        }, false);
+        }, 2);
     };
     Pitchfork.prototype.addBackgrounds = function () {
         var shapes = this.shapes, typeOptions = this.options.typeOptions;
@@ -122,7 +122,7 @@ var Pitchfork = /** @class */ (function (_super) {
                     };
                 }
             ]
-        }));
+        }), 3);
         var outerBackground = this.initShape(merge(typeOptions.outerBackground, {
             type: 'path',
             points: [
@@ -131,7 +131,7 @@ var Pitchfork = /** @class */ (function (_super) {
                 shapes[2].points[1],
                 this.points[2]
             ]
-        }));
+        }), 4);
         typeOptions.innerBackground = innerBackground.options;
         typeOptions.outerBackground = outerBackground.options;
     };

package/es-modules/Extensions/Annotations/Types/TimeCycles.js

@@ -0,0 +1,207 @@
+/* *
+ *
+ *  Authors: Rafal Sebestjanski and Pawel Lysy
+ *
+ *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
+ *
+ * */
+'use strict';
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import Annotation from '../Annotations.js';
+import CrookedLine from './CrookedLine.js';
+import ControlPoint from '../ControlPoint.js';
+import U from '../../../Core/Utilities.js';
+var merge = U.merge, isNumber = U.isNumber, defined = U.defined;
+/**
+ * Function to create start of the path.
+ * @param {number} x x position of the TimeCycles
+ * @param {number} y y position of the TimeCycles
+ * @return {string} path
+ */
+function getStartingPath(x, y) {
+    return ['M', x, y];
+}
+/**
+ * Function which generates the path of the halfcircle.
+ *
+ * @param {number} pixelInterval diameter of the circle in pixels
+ * @param {number} numberOfCircles number of cricles
+ * @param {number} startX x position of the first circle
+ * @param {number} y y position of the bottom of the timeCycles
+ * @return {string} path
+ *
+ */
+function getCirclePath(pixelInterval, numberOfCircles, startX, y) {
+    var strToRepeat = function (i) { return [
+        'A',
+        pixelInterval / 2,
+        pixelInterval / 2,
+        0,
+        1,
+        1,
+        startX + i * pixelInterval,
+        y
+    ]; };
+    var path = [];
+    for (var i = 1; i <= numberOfCircles; i++) {
+        path.push(strToRepeat(i));
+    }
+    return path;
+}
+/* *
+ *
+ *  Class
+ *
+ * */
+/* eslint-disable no-invalid-this, valid-jsdoc */
+var TimeCycles = /** @class */ (function (_super) {
+    __extends(TimeCycles, _super);
+    function TimeCycles() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    TimeCycles.prototype.init = function (annotation, options, index) {
+        if (defined(options.yAxis)) {
+            options.points.forEach(function (point) {
+                point.yAxis = options.yAxis;
+            });
+        }
+        if (defined(options.xAxis)) {
+            options.points.forEach(function (point) {
+                point.xAxis = options.xAxis;
+            });
+        }
+        _super.prototype.init.call(this, annotation, options, index);
+    };
+    TimeCycles.prototype.setPath = function () {
+        this.shapes[0].options.d = this.getPath();
+    };
+    TimeCycles.prototype.getPath = function () {
+        return [getStartingPath(this.startX, this.y)].concat(getCirclePath(this.pixelInterval, this.numberOfCircles, this.startX, this.y));
+    };
+    TimeCycles.prototype.addShapes = function () {
+        var typeOptions = this.options.typeOptions;
+        this.setPathProperties();
+        var shape = this.initShape(merge(typeOptions.line, {
+            type: 'path',
+            d: this.getPath(),
+            points: this.options.points
+        }), 0);
+        typeOptions.line = shape.options;
+    };
+    TimeCycles.prototype.addControlPoints = function () {
+        var _this = this;
+        var options = this.options, typeOptions = options.typeOptions;
+        options.controlPointOptions.style.cursor = this.chart.inverted ? 'ns-resize' : 'ew-resize';
+        typeOptions.controlPointOptions.forEach(function (option) {
+            var controlPointsOptions = merge(options.controlPointOptions, option);
+            var controlPoint = new ControlPoint(_this.chart, _this, controlPointsOptions, 0);
+            _this.controlPoints.push(controlPoint);
+        });
+    };
+    TimeCycles.prototype.setPathProperties = function () {
+        var options = this.options.typeOptions, points = options.points;
+        if (!points) {
+            return;
+        }
+        var point1 = points[0], point2 = points[1], xAxisNumber = options.xAxis || 0, yAxisNumber = options.yAxis || 0, xAxis = this.chart.xAxis[xAxisNumber], yAxis = this.chart.yAxis[yAxisNumber], xValue1 = point1.x, yValue = point1.y, xValue2 = point2.x;
+        if (!xValue1 || !xValue2) {
+            return;
+        }
+        var y = isNumber(yValue) ? yAxis.toPixels(yValue) : yAxis.top + yAxis.height, x = isNumber(xValue1) ? xAxis.toPixels(xValue1) : xAxis.left, x2 = isNumber(xValue2) ? xAxis.toPixels(xValue2) : xAxis.left + 30, xAxisLength = xAxis.len, pixelInterval = Math.round(Math.max(Math.abs(x2 - x), 2)), 
+        // There can be 2 not full circles on the chart, so add 2.
+        numberOfCircles = Math.floor(xAxisLength / pixelInterval) + 2, 
+        // Calculate where the annotation should start drawing
+        // relative to first point.
+        pixelShift = (Math.floor((x - xAxis.left) / pixelInterval) + 1) * pixelInterval;
+        this.startX = x - pixelShift;
+        this.y = y;
+        this.pixelInterval = pixelInterval;
+        this.numberOfCircles = numberOfCircles;
+    };
+    TimeCycles.prototype.redraw = function (animation) {
+        this.setPathProperties();
+        this.setPath();
+        _super.prototype.redraw.call(this, animation);
+    };
+    return TimeCycles;
+}(CrookedLine));
+TimeCycles.prototype.defaultOptions = merge(CrookedLine.prototype.defaultOptions, {
+    typeOptions: {
+        controlPointOptions: [{
+                positioner: function (target) {
+                    var point = target.points[0], position = target.anchor(point).absolutePosition;
+                    return {
+                        x: position.x - this.graphic.width / 2,
+                        y: target.y - this.graphic.height
+                    };
+                },
+                events: {
+                    drag: function (e, target) {
+                        var position = target.anchor(target.points[0]).absolutePosition;
+                        target.translatePoint(e.chartX - position.x, 0, 0);
+                        target.redraw(false);
+                    }
+                }
+            }, {
+                positioner: function (target) {
+                    var point = target.points[1], position = target.anchor(point).absolutePosition;
+                    return {
+                        x: position.x - this.graphic.width / 2,
+                        y: target.y - this.graphic.height
+                    };
+                },
+                events: {
+                    drag: function (e, target) {
+                        var position = target.anchor(target.points[1]).absolutePosition;
+                        target.translatePoint(e.chartX - position.x, 0, 1);
+                        target.redraw(false);
+                    }
+                }
+            }]
+    }
+});
+/* *
+ *
+ *  Registry
+ *
+ * */
+Annotation.types.timeCycles = TimeCycles;
+/* *
+ *
+ *  Default Export
+ *
+ * */
+export default TimeCycles;
+/* *
+ *
+ *  API Declarations
+ *
+ * */
+/**
+ * The TimeCycles Annotation
+ * @sample highcharts/annotations-advanced/time-cycles/
+ *     Time Cycles annotation
+ *
+ * @extends   annotations.crookedLine
+ * @product   highstock
+ * @exclude  labelOptions
+ * @apioption annotations.timeCycles
+ */
+/**
+ * @exclude   y
+ * @product   highstock
+ * @apioption annotations.timeCycles.typeOptions.points
+ */
+(''); // keeps doclets above in transpiled file

package/es-modules/Extensions/Annotations/Types/Tunnel.js

@@ -82,14 +82,14 @@ var Tunnel = /** @class */ (function (_super) {
                 },
                 this.points[3]
             ]
-        }), false);
+        }), 0);
         this.options.typeOptions.line = line.options;
     };
     Tunnel.prototype.addBackground = function () {
         var background = this.initShape(merge(this.options.typeOptions.background, {
             type: 'path',
             points: this.points.slice()
-        }));
+        }), 1);
         this.options.typeOptions.background = background.options;
     };
     /**
@@ -128,8 +128,6 @@ Tunnel.prototype.defaultOptions = merge(CrookedLine.prototype.defaultOptions,
  */
 {
     typeOptions: {
-        xAxis: 0,
-        yAxis: 0,
         /**
          * Background options.
          *
@@ -187,7 +185,7 @@ Tunnel.prototype.defaultOptions = merge(CrookedLine.prototype.defaultOptions,
                     visiblePlotOnly: true
                 })) {
                     var translation = this.mouseMoveToTranslation(e);
-                    target.translateSide(translation.x, translation.y, this.index);
+                    target.translateSide(translation.x, translation.y, !!this.index);
                     target.redraw(false);
                 }
             }

package/es-modules/Extensions/Annotations/Types/VerticalLine.js

@@ -73,7 +73,7 @@ var VerticalLine = /** @class */ (function (_super) {
                 VerticalLine.connectorFirstPoint,
                 VerticalLine.connectorSecondPoint
             ]
-        }), false);
+        }), 0);
         typeOptions.connector = connector.options;
     };
     VerticalLine.prototype.addLabels = function () {