highcharts 9.2.1 → 9.3.2

package/modules/stock-tools.src.js

@@ -1,5 +1,5 @@
 /**
- * @license Highstock JS v9.2.1 (2021-08-19)
+ * @license Highstock JS v9.3.2 (2021-11-29)
  *
  * Advanced Highcharts Stock tools
  *
@@ -50,7 +50,6 @@
          *
          * @private
          * @mixin
-         * @memberOf Annotation
          */
         var eventEmitterMixin = {
                 /**
@@ -294,8 +293,7 @@
          * @param {Highcharts.AnnotationControllable} target
          * @return {Highcharts.PositionObject}
          */
-        var extend = U.extend,
-            merge = U.merge,
+        var merge = U.merge,
             pick = U.pick;
         /* eslint-disable no-invalid-this, valid-jsdoc */
         /**
@@ -363,7 +361,6 @@
              * @param {boolean} visible
              * Visibility of the control point.
              *
-             * @return {void}
              */
             ControlPoint.prototype.setVisibility = function (visible) {
                 this.graphic.attr('visibility', visible ? 'visible' : 'hidden');
@@ -413,7 +410,6 @@
              * @param {Partial<Highcharts.AnnotationControlPointOptionsObject>} userOptions
              * New options for the control point.
              *
-             * @return {void}
              */
             ControlPoint.prototype.update = function (userOptions) {
                 var chart = this.chart,
@@ -968,7 +964,8 @@
              */
             getPointsOptions: function () {
                 var options = this.options;
-                return (options.points || (options.point && splat(options.point)));
+                return (options.points ||
+                    (options.point && splat(options.point)));
             },
             /**
              * Utility function for mapping item's options
@@ -1189,8 +1186,11 @@
              *
              * @param {number} dx translation for x coordinate
              * @param {number} dy translation for y coordinate
+             * @param {boolean|undefined} translateSecondPoint If the shape has two
+             * points attached to it, this option allows you to translate also
+             * the second point
              */
-            translateShape: function (dx, dy) {
+            translateShape: function (dx, dy, translateSecondPoint) {
                 var chart = this.annotation.chart, 
                     // Annotation.options
                     shapeOptions = this.annotation.userOptions, 
@@ -1198,11 +1198,16 @@
                     annotationIndex = chart.annotations.indexOf(this.annotation),
                     chartOptions = chart.options.annotations[annotationIndex];
                 this.translatePoint(dx, dy, 0);
+                if (translateSecondPoint) {
+                    this.translatePoint(dx, dy, 1);
+                }
                 // 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;
+                chartOptions[this.collection][this.index]
+                    .point = this.options.point;
+                shapeOptions[this.collection][this.index]
+                    .point = this.options.point;
             },
             /**
              * Rotate a controllable.
@@ -1420,13 +1425,13 @@
             fill = itemOptions.fill,
             color = defined(fill) && fill !== 'none' ?
                         fill :
-                        itemOptions.stroke,
-            setMarker = function (markerType) {
+                        itemOptions.stroke;
+                var setMarker = function (markerType) {
                         var markerId = itemOptions[markerType],
-            def,
-            predefinedMarker,
-            key,
-            marker;
+                    def,
+                    predefinedMarker,
+                    key,
+                    marker;
                     if (markerId) {
                         for (key in defs) { // eslint-disable-line guard-for-in
                             def = defs[key];
@@ -1441,13 +1446,13 @@
                         }
                         if (predefinedMarker) {
                             marker = item[markerType] = chart.renderer
-                                .addMarker((itemOptions.id || uniqueKey()) + '-' +
-                                markerId, merge(predefinedMarker, { color: color }));
+                                .addMarker((itemOptions.id || uniqueKey()) + '-' + markerId, merge(predefinedMarker, { color: color }));
                             item.attr(markerType, marker.getAttribute('id'));
                         }
                     }
                 };
-                ['markerStart', 'markerEnd'].forEach(setMarker);
+                ['markerStart', 'markerEnd']
+                    .forEach(setMarker);
             }
         };
         addEvent(Chart, 'afterGetContainer', function () {
@@ -1518,7 +1523,7 @@
                 this.point = ControllableMixin.point;
                 this.rotate = ControllableMixin.rotate;
                 this.scale = ControllableMixin.scale;
-                this.setControlPointsVisibility = ControllableMixin.setControlPointsVisibility;
+                this.setControlPointsVisibility = (ControllableMixin.setControlPointsVisibility);
                 this.setMarkers = MarkerMixin.setItemMarkers;
                 this.transform = ControllableMixin.transform;
                 this.transformPoint = ControllableMixin.transformPoint;
@@ -1582,7 +1587,8 @@
                     null;
             };
             ControllablePath.prototype.shouldBeDrawn = function () {
-                return (ControllableMixin.shouldBeDrawn.call(this) || Boolean(this.options.d));
+                return (ControllableMixin.shouldBeDrawn.call(this) ||
+                    Boolean(this.options.d));
             };
             ControllablePath.prototype.render = function (parent) {
                 var options = this.options,
@@ -1709,7 +1715,7 @@
                 this.point = ControllableMixin.point;
                 this.rotate = ControllableMixin.rotate;
                 this.scale = ControllableMixin.scale;
-                this.setControlPointsVisibility = ControllableMixin.setControlPointsVisibility;
+                this.setControlPointsVisibility = (ControllableMixin.setControlPointsVisibility);
                 this.shouldBeDrawn = ControllableMixin.shouldBeDrawn;
                 this.transform = ControllableMixin.transform;
                 this.transformPoint = ControllableMixin.transformPoint;
@@ -1819,7 +1825,7 @@
                 this.point = ControllableMixin.point;
                 this.rotate = ControllableMixin.rotate;
                 this.scale = ControllableMixin.scale;
-                this.setControlPointsVisibility = ControllableMixin.setControlPointsVisibility;
+                this.setControlPointsVisibility = (ControllableMixin.setControlPointsVisibility);
                 this.shouldBeDrawn = ControllableMixin.shouldBeDrawn;
                 this.transform = ControllableMixin.transform;
                 this.transformPoint = ControllableMixin.transformPoint;
@@ -1891,6 +1897,215 @@
 
         return ControllableCircle;
     });
+    _registerModule(_modules, 'Extensions/Annotations/Controllables/ControllableEllipse.js', [_modules['Extensions/Annotations/Mixins/ControllableMixin.js'], _modules['Extensions/Annotations/Controllables/ControllablePath.js'], _modules['Core/Utilities.js']], function (ControllableMixin, ControllablePath, U) {
+        /* *
+         *
+         * Author: Pawel Lysy
+         *
+         *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
+         *
+         * */
+        var merge = U.merge,
+            defined = U.defined;
+        /**
+         * A controllable ellipse class.
+         *
+         * @requires modules/annotations
+         *
+         * @private
+         * @class
+         * @name Highcharts.AnnotationControllableEllipse
+         *
+         * @param {Highcharts.Annotation} annotation an annotation instance
+         * @param {Highcharts.AnnotationsShapeOptions} options a shape's options
+         * @param {number} index of the Ellipse
+         */
+        var ControllableEllipse = /** @class */ (function () {
+                /* *
+                 *
+                 *  Constructor
+                 *
+                 * */
+                function ControllableEllipse(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.linkPoints = ControllableMixin.linkPoints;
+                this.point = ControllableMixin.point;
+                this.scale = ControllableMixin.scale;
+                this.setControlPointsVisibility = (ControllableMixin.setControlPointsVisibility);
+                this.shouldBeDrawn = ControllableMixin.shouldBeDrawn;
+                this.transform = ControllableMixin.transform;
+                this.translatePoint = ControllableMixin.translatePoint;
+                this.transformPoint = ControllableMixin.transformPoint;
+                /**
+                 * @type 'ellipse'
+                 */
+                this.type = 'ellipse';
+                this.init(annotation, options, index);
+                this.collection = 'shapes';
+            }
+            /* *
+             *
+             *  Functions
+             *
+             * */
+            ControllableEllipse.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;
+                    });
+                }
+                ControllableMixin.init.call(this, annotation, options, index);
+            };
+            /**
+             *
+             * Render the element
+             * @param parent parent SVG element.
+             */
+            ControllableEllipse.prototype.render = function (parent) {
+                this.graphic = this.annotation.chart.renderer.createElement('ellipse')
+                    .attr(this.attrsFromOptions(this.options))
+                    .add(parent);
+                ControllableMixin.render.call(this);
+            };
+            /**
+             * Translate the points.
+             * Mostly used to handle dragging of the ellipse.
+             */
+            ControllableEllipse.prototype.translate = function (dx, dy) {
+                ControllableMixin.translateShape.call(this, dx, dy, true);
+            };
+            /**
+             * Get the distance from the line to the point.
+             * @param point1 first point which is on the line
+             * @param point2 second point
+             * @param x0 point's x value from which you want to calculate the distance from
+             * @param y0 point's y value from which you want to calculate the distance from
+             */
+            ControllableEllipse.prototype.getDistanceFromLine = function (point1, point2, x0, y0) {
+                return Math.abs((point2.y - point1.y) * x0 - (point2.x - point1.x) * y0 +
+                    point2.x * point1.y - point2.y * point1.x) / Math.sqrt((point2.y - point1.y) * (point2.y - point1.y) +
+                    (point2.x - point1.x) * (point2.x - point1.x));
+            };
+            /**
+             * The fuction calculates the svg attributes of the ellipse, and returns all
+             * parameters neccessary to draw the ellipse.
+             * @param position absolute position of the first point in points array
+             * @param position2 absolute position of the second point in points array
+             */
+            ControllableEllipse.prototype.getAttrs = function (position, position2) {
+                var x1 = position.x,
+                    y1 = position.y,
+                    x2 = position2.x,
+                    y2 = position2.y,
+                    cx = (x1 + x2) / 2,
+                    cy = (y1 + y2) / 2,
+                    rx = Math.sqrt((x1 - x2) * (x1 - x2) / 4 + (y1 - y2) * (y1 - y2) / 4),
+                    tan = (y2 - y1) / (x2 - x1);
+                var angle = Math.atan(tan) * 180 / Math.PI;
+                if (cx < x1) {
+                    angle += 180;
+                }
+                var ry = this.getRY();
+                return { cx: cx, cy: cy, rx: rx, ry: ry, angle: angle };
+            };
+            /**
+             * Get the value of minor radius of the ellipse.
+             */
+            ControllableEllipse.prototype.getRY = function () {
+                var yAxis = this.getYAxis();
+                return defined(yAxis) ?
+                    Math.abs(yAxis.toPixels(this.options.ry) - yAxis.toPixels(0)) :
+                    this.options.ry;
+            };
+            /**
+             * get the yAxis object to which the ellipse is pinned.
+             */
+            ControllableEllipse.prototype.getYAxis = function () {
+                var yAxisIndex = this.options.yAxis;
+                return this.chart.yAxis[yAxisIndex];
+            };
+            /**
+             * Get the absolute coordinates of the MockPoint
+             * @param point MockPoint that is added through options
+             */
+            ControllableEllipse.prototype.getAbsolutePosition = function (point) {
+                return this.anchor(point).absolutePosition;
+            };
+            /**
+             *
+             * Redraw the element
+             * @param animation display an annimation
+             */
+            ControllableEllipse.prototype.redraw = function (animation) {
+                var position = this.getAbsolutePosition(this.points[0]),
+                    position2 = this.getAbsolutePosition(this.points[1]),
+                    attrs = this.getAttrs(position,
+                    position2);
+                if (position) {
+                    this.graphic[animation ? 'animate' : 'attr']({
+                        cx: attrs.cx,
+                        cy: attrs.cy,
+                        rx: attrs.rx,
+                        ry: attrs.ry,
+                        rotation: attrs.angle,
+                        rotationOriginX: attrs.cx,
+                        rotationOriginY: attrs.cy
+                    });
+                }
+                else {
+                    this.graphic.attr({
+                        x: 0,
+                        y: -9e9
+                    });
+                }
+                this.graphic.placed = Boolean(position);
+                ControllableMixin.redraw.call(this, animation);
+            };
+            /**
+             * Set the radius Y.
+             *
+             * @param {number} ry a radius in y direction to be set
+             */
+            ControllableEllipse.prototype.setYRadius = function (ry) {
+                this.options.ry = ry;
+                this.annotation.userOptions.shapes[0].ry = ry;
+                this.annotation.options.shapes[0].ry = ry;
+            };
+            /* *
+             *
+             *  Static Properties
+             *
+             * */
+            /**
+             * A map object which allows to map options attributes to element
+             * attributes.
+             *
+             * @name Highcharts.AnnotationControllableEllipse.attrsMap
+             * @type {Highcharts.Dictionary<string>}
+             */
+            ControllableEllipse.attrsMap = merge(ControllablePath.attrsMap, {
+                ry: 'ry'
+            });
+            return ControllableEllipse;
+        }());
+
+        return ControllableEllipse;
+    });
     _registerModule(_modules, 'Extensions/Annotations/Controllables/ControllableLabel.js', [_modules['Extensions/Annotations/Mixins/ControllableMixin.js'], _modules['Core/FormatUtilities.js'], _modules['Extensions/Annotations/MockPoint.js'], _modules['Core/Renderer/SVG/SVGRenderer.js'], _modules['Core/Tooltip.js'], _modules['Core/Utilities.js']], function (ControllableMixin, F, MockPoint, SVGRenderer, Tooltip, U) {
         /* *
          *
@@ -1946,7 +2161,7 @@
                 this.point = ControllableMixin.point;
                 this.rotate = ControllableMixin.rotate;
                 this.scale = ControllableMixin.scale;
-                this.setControlPointsVisibility = ControllableMixin.setControlPointsVisibility;
+                this.setControlPointsVisibility = (ControllableMixin.setControlPointsVisibility);
                 this.shouldBeDrawn = ControllableMixin.shouldBeDrawn;
                 this.transform = ControllableMixin.transform;
                 this.transformPoint = ControllableMixin.transformPoint;
@@ -2179,10 +2394,6 @@
             };
             /**
              * 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,
@@ -2211,7 +2422,8 @@
                             plotY: anchorRelativePosition.y,
                             negative: point.negative,
                             ttBelow: point.ttBelow,
-                            h: (anchorRelativePosition.height || anchorRelativePosition.width)
+                            h: (anchorRelativePosition.height ||
+                                anchorRelativePosition.width)
                         });
                     }
                     else if (itemOptions.positioner) {
@@ -2359,7 +2571,7 @@
                 this.point = ControllableMixin.point;
                 this.rotate = ControllableMixin.rotate;
                 this.scale = ControllableMixin.scale;
-                this.setControlPointsVisibility = ControllableMixin.setControlPointsVisibility;
+                this.setControlPointsVisibility = (ControllableMixin.setControlPointsVisibility);
                 this.shouldBeDrawn = ControllableMixin.shouldBeDrawn;
                 this.transform = ControllableMixin.transform;
                 this.transformPoint = ControllableMixin.transformPoint;
@@ -2425,7 +2637,7 @@
 
         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'], _modules['Core/Color/Palette.js']], function (A, Chart, ControllableMixin, ControllableRect, ControllableCircle, ControllablePath, ControllableImage, ControllableLabel, ControlPoint, EventEmitterMixin, H, MockPoint, Pointer, U, palette) {
+    _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/ControllableEllipse.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, ControllableEllipse, ControllablePath, ControllableImage, ControllableLabel, ControlPoint, EventEmitterMixin, H, MockPoint, Pointer, U) {
         /* *
          *
          *  (c) 2009-2021 Highsoft, Black Label
@@ -2647,7 +2859,10 @@
             };
             Annotation.prototype.addClipPaths = function () {
                 this.setClipAxes();
-                if (this.clipXAxis && this.clipYAxis) {
+                if (this.clipXAxis &&
+                    this.clipYAxis &&
+                    this.options.crop // #15399
+                ) {
                     this.clipRect = this.chart.renderer.clipRect(this.getClipBox());
                 }
             };
@@ -2749,8 +2964,10 @@
                     .add();
                 this.shapesGroup = renderer
                     .g('annotation-shapes')
-                    .add(this.graphic)
-                    .clip(this.chart.plotBoxClip);
+                    .add(this.graphic);
+                if (this.options.crop) { // #15399
+                    this.shapesGroup.clip(this.chart.plotBoxClip);
+                }
                 this.labelsGroup = renderer
                     .g('annotation-labels')
                     .attr({
@@ -2836,7 +3053,6 @@
              * @param {Partial<Highcharts.AnnotationsOptions>} userOptions
              * New user options for the annotation.
              *
-             * @return {void}
              */
             Annotation.prototype.update = function (userOptions, redraw) {
                 var chart = this.chart,
@@ -2866,7 +3082,11 @@
             /**
              * Initialisation of a single shape
              * @private
-             * @param {Object} shapeOptions - a confg object for a single shape
+             * @param {Object} shapeOptions
+             * a confg object for a single shape
+             * @param {number} index
+             * annotation may have many shapes, this is the shape's index saved in
+             * shapes.index.
              */
             Annotation.prototype.initShape = function (shapeOptions, index) {
                 var options = merge(this.options.shapeOptions, {
@@ -2972,6 +3192,7 @@
             Annotation.shapesMap = {
                 'rect': ControllableRect,
                 'circle': ControllableCircle,
+                'ellipse': ControllableEllipse,
                 'path': ControllablePath,
                 'image': ControllableImage
             };
@@ -3048,9 +3269,18 @@
                  *          Animation defer settings
                  * @type {boolean|Partial<Highcharts.AnimationOptionsObject>}
                  * @since 8.2.0
-                 * @apioption annotations.animation
                  */
                 animation: {},
+                /**
+                 * Whether to hide the part of the annotation
+                 * that is outside the plot area.
+                 *
+                 * @sample highcharts/annotations/label-crop-overflow/
+                 *         Crop line annotation
+                 * @type  {boolean}
+                 * @since 9.3.0
+                 */
+                crop: true,
                 /**
                  * The animation delay time in milliseconds.
                  * Set to `0` renders annotation immediately.
@@ -3115,7 +3345,7 @@
                      *
                      * @type {Highcharts.ColorString}
                      */
-                    borderColor: palette.neutralColor100,
+                    borderColor: "#000000" /* neutralColor100 */,
                     /**
                      * The border radius in pixels for the annotaiton's label.
                      *
@@ -3410,6 +3640,32 @@
                  * @requires  modules/annotations
                  */
                 shapeOptions: {
+                    /**
+                     *
+                     * The radius of the shape in y direction.
+                     * Used for the ellipse.
+                     *
+                     * @sample highcharts/annotations/ellipse/
+                     *         Ellipse annotation
+                     *
+                     * @type      {number}
+                     * @apioption annotations.shapeOptions.ry
+                     **/
+                    /**
+                     *
+                     * The xAxis index to which the points should be attached.
+                     * Used for the ellipse.
+                     *
+                     * @type      {number}
+                     * @apioption annotations.shapeOptions.xAxis
+                     **/
+                    /**
+                     * The yAxis index to which the points should be attached.
+                     * Used for the ellipse.
+                     *
+                     * @type      {number}
+                     * @apioption annotations.shapeOptions.yAxis
+                     **/
                     /**
                      * The width of the shape.
                      *
@@ -3429,11 +3685,15 @@
                      * @apioption annotations.shapeOptions.height
                      */
                     /**
-                     * The type of the shape, e.g. circle or rectangle.
+                     * The type of the shape.
+                     * Avaliable options are circle, rect and ellipse.
                      *
                      * @sample highcharts/annotations/shape/
                      *         Basic shape annotation
                      *
+                     * @sample highcharts/annotations/ellipse/
+                     *         Ellipse annotation
+                     *
                      * @type      {string}
                      * @default   rect
                      * @apioption annotations.shapeOptions.type
@@ -3515,9 +3775,10 @@
                     width: 10,
                     height: 10,
                     style: {
-                        stroke: palette.neutralColor100,
-                        'stroke-width': 2,
-                        fill: palette.backgroundColor
+                        cursor: 'pointer',
+                        fill: "#ffffff" /* backgroundColor */,
+                        stroke: "#000000" /* neutralColor100 */,
+                        'stroke-width': 2
                     },
                     visible: false,
                     events: {}
@@ -3568,7 +3829,8 @@
          ******************************************************************** */
         extend(chartProto, /** @lends Highcharts.Chart# */ {
             initAnnotation: function (userOptions) {
-                var Constructor = Annotation.types[userOptions.type] || Annotation,
+                var Constructor = Annotation
+                        .types[userOptions.type] || Annotation,
                     annotation = new Constructor(this,
                     userOptions);
                 this.annotations.push(annotation);
@@ -3580,7 +3842,8 @@
              * @param  {Highcharts.AnnotationsOptions} options
              *         The annotation options for the new, detailed annotation.
              * @param {boolean} [redraw]
-             *
+             * @sample highcharts/annotations/add-annotation/
+             *         Add annotation
              * @return {Highcharts.Annotation} - The newly generated annotation.
              */
             addAnnotation: function (userOptions, redraw) {
@@ -3602,7 +3865,7 @@
              */
             removeAnnotation: function (idOrAnnotation) {
                 var annotations = this.annotations,
-                    annotation = idOrAnnotation.coll === 'annotations' ?
+                    annotation = (idOrAnnotation.coll === 'annotations') ?
                         idOrAnnotation :
                         find(annotations,
                     function (annotation) {
@@ -3721,15 +3984,15 @@
                                     // Annotation placed on a exported data point
                                     // - add new column
                                     if (!wasAdded) {
-                                        event.dataRows.forEach(function (row, rowIndex) {
+                                        event.dataRows.forEach(function (row) {
                                             if (!wasAdded &&
                                                 row.xValues &&
                                                 xAxisIndex !== void 0 &&
                                                 annotationX === row.xValues[xAxisIndex]) {
                                                 if (joinAnnotations &&
                                                     row.length > startRowLength) {
-                                                    row[row.length - 1] +=
-                                                        annotationSeparator + annotationText_1;
+                                                    row[row.length - 1] += (annotationSeparator +
+                                                        annotationText_1);
                                                 }
                                                 else {
                                                     row.push(annotationText_1);
@@ -3847,7 +4110,7 @@
 
         return Annotation;
     });
-    _registerModule(_modules, 'Mixins/Navigation.js', [], function () {
+    _registerModule(_modules, 'Core/Chart/ChartNavigationComposition.js', [], function () {
         /**
          *
          *  (c) 2010-2021 Paweł Fus
@@ -3857,56 +4120,91 @@
          *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
          *
          * */
-        var chartNavigation = {
-                /**
-                 * Initializes `chart.navigation` object which delegates `update()` methods
-                 * to all other common classes (used in exporting and navigationBindings).
-                 *
-                 * @private
-                 * @param {Highcharts.Chart} chart
-                 *        The chart instance.
-                 * @return {void}
-                 */
-                initUpdate: function (chart) {
-                    if (!chart.navigation) {
-                        chart.navigation = {
-                            updates: [],
-                            update: function (options,
-            redraw) {
-                                this.updates.forEach(function (updateConfig) {
-                                    updateConfig.update.call(updateConfig.context,
-            options,
-            redraw);
-                            });
-                        }
-                    };
-                }
-            },
-            /**
-             * Registers an `update()` method in the `chart.navigation` object.
+        /* *
+         *
+         *  Composition
+         *
+         * */
+        var ChartNavigationComposition;
+        (function (ChartNavigationComposition) {
+            /* *
+             *
+             *  Declarations
+             *
+             * */
+            /* *
              *
+             *  Functions
+             *
+             * */
+            /* eslint-disable valid-jsdoc */
+            /**
              * @private
-             * @param {Highcharts.ChartNavigationUpdateFunction} update
-             *        The `update()` method that will be called in `chart.update()`.
-             * @param {Highcharts.Chart} chart
-             *        The chart instance. `update()` will use that as a context
-             *        (`this`).
-             * @return {void}
              */
-            addUpdate: function (update, chart) {
+            function compose(chart) {
                 if (!chart.navigation) {
-                    this.initUpdate(chart);
+                    chart.navigation = new Additions(chart);
                 }
-                chart.navigation.updates.push({
-                    update: update,
-                    context: chart
-                });
+                return chart;
             }
-        };
+            ChartNavigationComposition.compose = compose;
+            /* *
+             *
+             *  Class
+             *
+             * */
+            /**
+             * Initializes `chart.navigation` object which delegates `update()` methods
+             * to all other common classes (used in exporting and navigationBindings).
+             * @private
+             */
+            var Additions = /** @class */ (function () {
+                    /* *
+                     *
+                     *  Constructor
+                     *
+                     * */
+                    function Additions(chart) {
+                        this.updates = [];
+                    this.chart = chart;
+                }
+                /* *
+                 *
+                 *  Functions
+                 *
+                 * */
+                /**
+                 * Registers an `update()` method in the `chart.navigation` object.
+                 *
+                 * @private
+                 * @param {UpdateFunction} updateFn
+                 * The `update()` method that will be called in `chart.update()`.
+                 */
+                Additions.prototype.addUpdate = function (updateFn) {
+                    this.chart.navigation.updates.push(updateFn);
+                };
+                /**
+                 * @private
+                 */
+                Additions.prototype.update = function (options, redraw) {
+                    var _this = this;
+                    this.updates.forEach(function (updateFn) {
+                        updateFn.call(_this.chart, options, redraw);
+                    });
+                };
+                return Additions;
+            }());
+            ChartNavigationComposition.Additions = Additions;
+        })(ChartNavigationComposition || (ChartNavigationComposition = {}));
+        /* *
+         *
+         *  Default Export
+         *
+         * */
 
-        return chartNavigation;
+        return ChartNavigationComposition;
     });
-    _registerModule(_modules, 'Extensions/Annotations/NavigationBindings.js', [_modules['Extensions/Annotations/Annotations.js'], _modules['Core/Chart/Chart.js'], _modules['Mixins/Navigation.js'], _modules['Core/FormatUtilities.js'], _modules['Core/Globals.js'], _modules['Core/DefaultOptions.js'], _modules['Core/Utilities.js']], function (Annotation, Chart, chartNavigationMixin, F, H, D, U) {
+    _registerModule(_modules, 'Extensions/Annotations/NavigationBindings.js', [_modules['Extensions/Annotations/Annotations.js'], _modules['Core/Chart/Chart.js'], _modules['Core/Chart/ChartNavigationComposition.js'], _modules['Core/FormatUtilities.js'], _modules['Core/Globals.js'], _modules['Core/DefaultOptions.js'], _modules['Core/Utilities.js']], function (Annotation, Chart, ChartNavigationComposition, F, H, D, U) {
         /* *
          *
          *  (c) 2009-2021 Highsoft, Black Label
@@ -4054,8 +4352,9 @@
              */
             getAssignedAxis: function (coords) {
                 return coords.filter(function (coord) {
-                    var axisMin = coord.axis.min,
-                        axisMax = coord.axis.max, 
+                    var extremes = coord.axis.getExtremes(),
+                        axisMin = extremes.min,
+                        axisMax = extremes.max, 
                         // Correct axis edges when axis has series
                         // with pointRange (like column)
                         minPointOffset = pick(coord.axis.minPointOffset, 0);
@@ -4126,7 +4425,9 @@
                     navigation.eventsToUnbind.push(addEvent(subContainer, 'click', function (event) {
                         var bindings = navigation.getButtonEvents(subContainer,
                             event);
-                        if (bindings && bindings.button.className.indexOf('highcharts-disabled-btn') === -1) {
+                        if (bindings &&
+                            bindings.button.className
+                                .indexOf('highcharts-disabled-btn') === -1) {
                             navigation.bindingsButtonClick(bindings.button, bindings.events, event);
                         }
                     }));
@@ -4156,9 +4457,11 @@
              */
             NavigationBindings.prototype.initUpdate = function () {
                 var navigation = this;
-                chartNavigationMixin.addUpdate(function (options) {
+                ChartNavigationComposition
+                    .compose(this.chart).navigation
+                    .addUpdate(function (options) {
                     navigation.update(options);
-                }, this.chart);
+                });
             };
             /**
              * Hook for click on a button, method selcts/unselects buttons,
@@ -4170,7 +4473,7 @@
              * @param {Highcharts.HTMLDOMElement} [button]
              *        Clicked button
              *
-             * @param {object} events
+             * @param {Object} events
              *        Events passed down from bindings (`init`, `start`, `step`, `end`)
              *
              * @param {Highcharts.PointerEventObject} clickEvent
@@ -4178,8 +4481,13 @@
              */
             NavigationBindings.prototype.bindingsButtonClick = function (button, events, clickEvent) {
                 var navigation = this,
-                    chart = navigation.chart;
+                    chart = navigation.chart,
+                    svgContainer = chart.renderer.boxWrapper;
+                var shouldEventBeFired = true;
                 if (navigation.selectedButtonElement) {
+                    if (navigation.selectedButtonElement.classList === button.classList) {
+                        shouldEventBeFired = false;
+                    }
                     fireEvent(navigation, 'deselectButton', { button: navigation.selectedButtonElement });
                     if (navigation.nextEvent) {
                         // Remove in-progress annotations adders:
@@ -4190,15 +4498,24 @@
                         navigation.mouseMoveEvent = navigation.nextEvent = false;
                     }
                 }
-                navigation.selectedButton = events;
-                navigation.selectedButtonElement = button;
-                fireEvent(navigation, 'selectButton', { button: button });
-                // Call "init" event, for example to open modal window
-                if (events.init) {
-                    events.init.call(navigation, button, clickEvent);
+                if (shouldEventBeFired) {
+                    navigation.selectedButton = events;
+                    navigation.selectedButtonElement = button;
+                    fireEvent(navigation, 'selectButton', { button: button });
+                    // Call "init" event, for example to open modal window
+                    if (events.init) {
+                        events.init.call(navigation, button, clickEvent);
+                    }
+                    if (events.start || events.steps) {
+                        chart.renderer.boxWrapper.addClass(PREFIX + 'draw-mode');
+                    }
                 }
-                if (events.start || events.steps) {
-                    chart.renderer.boxWrapper.addClass(PREFIX + 'draw-mode');
+                else {
+                    chart.stockTools && chart.stockTools.toggleButtonAciveClass(button);
+                    svgContainer.removeClass(PREFIX + 'draw-mode');
+                    navigation.nextEvent = false;
+                    navigation.mouseMoveEvent = false;
+                    navigation.selectedButton = null;
                 }
             };
             /**
@@ -4269,8 +4586,7 @@
                         navigation.stepIndex++;
                         if (selectedButton.steps[navigation.stepIndex]) {
                             // If we have more steps, bind them one by one:
-                            navigation.mouseMoveEvent = navigation.nextEvent =
-                                selectedButton.steps[navigation.stepIndex];
+                            navigation.mouseMoveEvent = navigation.nextEvent = selectedButton.steps[navigation.stepIndex];
                         }
                         else {
                             fireEvent(navigation, 'deselectButton', { button: navigation.selectedButtonElement });
@@ -4404,10 +4720,10 @@
                  * @param {string} key
                  *        Option name, for example "visible" or "x", "y"
                  *
-                 * @param {object} parentEditables
+                 * @param {Object} parentEditables
                  *        Editables from NavigationBindings.annotationsEditable
                  *
-                 * @param {object} parent
+                 * @param {Object} parent
                  *        Where new options will be assigned
                  */
                 function traverse(option, key, parentEditables, parent) {
@@ -4448,7 +4764,9 @@
                                 parent[key] = nextParent;
                             }
                             objectEach(option, function (nestedOption, nestedKey) {
-                                traverse(nestedOption, nestedKey, key === 0 ? parentEditables : nestedEditables[key], nextParent);
+                                traverse(nestedOption, nestedKey, key === 0 ?
+                                    parentEditables :
+                                    nestedEditables[key], nextParent);
                             });
                         }
                         else {
@@ -4487,14 +4805,14 @@
              *
              * @function Highcharts.NavigationBindings#getClickedClassNames
              *
-             * @param {Highcharts.HTMLDOMElement}
-             *        Container that event is bound to.
+             * @param {Highcharts.HTMLDOMElement} container
+             * Container that event is bound to.
              *
              * @param {global.Event} event
-             *        Browser's event.
+             * Browser's event.
              *
              * @return {Array<Array<string, Highcharts.HTMLDOMElement>>}
-             *         Array of class names with corresponding elements
+             * Array of class names with corresponding elements
              */
             NavigationBindings.prototype.getClickedClassNames = function (container, event) {
                 var element = event.target,
@@ -4532,7 +4850,7 @@
              * @param {global.Event} event
              *        Browser's event.
              *
-             * @return {object}
+             * @return {Object}
              *         Object with events (init, start, steps, and end)
              */
             NavigationBindings.prototype.getButtonEvents = function (container, event) {
@@ -4603,6 +4921,7 @@
                 },
                 // Simple shapes:
                 circle: ['shapes'],
+                ellipse: ['shapes'],
                 verticalLine: [],
                 label: ['labelOptions'],
                 // Measure
@@ -4619,7 +4938,9 @@
             // Define non editable fields per annotation, for example Rectangle inherits
             // options from Measure, but crosshairs are not available
             NavigationBindings.annotationsNonEditable = {
-                rectangle: ['crosshairX', 'crosshairY', 'label']
+                rectangle: ['crosshairX', 'crosshairY', 'labelOptions'],
+                ellipse: ['labelOptions'],
+                circle: ['labelOptions']
             };
             return NavigationBindings;
         }());
@@ -4696,10 +5017,10 @@
                                 if (annotation.options.type === 'measure') {
                                     // Manually disable crooshars according to
                                     // stroke width of the shape:
-                                    typeOptions.crosshairY.enabled =
-                                        typeOptions.crosshairY.strokeWidth !== 0;
-                                    typeOptions.crosshairX.enabled =
-                                        typeOptions.crosshairX.strokeWidth !== 0;
+                                    typeOptions.crosshairY.enabled = (typeOptions.crosshairY
+                                        .strokeWidth !== 0);
+                                    typeOptions.crosshairX.enabled = (typeOptions.crosshairX
+                                        .strokeWidth !== 0);
                                 }
                                 annotation.update(config);
                             }
@@ -4736,7 +5057,6 @@
                  * Configure the Popup strings in the chart. Requires the
                  * `annotations.js` or `annotations-advanced.src.js` module to be
                  * loaded.
-                 *
                  * @since   7.0.0
                  * @product highcharts highstock
                  */
@@ -4750,6 +5070,7 @@
                         simpleShapes: 'Simple shapes',
                         lines: 'Lines',
                         circle: 'Circle',
+                        ellipse: 'Ellipse',
                         rectangle: 'Rectangle',
                         label: 'Label',
                         shapeOptions: 'Shape options',
@@ -4810,9 +5131,16 @@
                  * - `end`: last event to be called after last step event
                  *
                  * @type         {Highcharts.Dictionary<Highcharts.NavigationBindingsOptionsObject>|*}
-                 * @sample       stock/stocktools/stocktools-thresholds
-                 *               Custom bindings in Highcharts Stock
+                 *
+                 * @sample {highstock} stock/stocktools/stocktools-thresholds
+                 *               Custom bindings
+                 * @sample {highcharts} highcharts/annotations/bindings/
+                 *               Simple binding
+                 * @sample {highcharts} highcharts/annotations/bindings-custom-annotation/
+                 *               Custom annotation binding
+                 *
                  * @since        7.0.0
+                 * @requires     modules/annotations
                  * @product      highcharts highstock
                  */
                 bindings: {
@@ -4849,10 +5177,7 @@
                                         },
                                         r: 5
                                     }]
-                            }, navigation
-                                .annotationsOptions, navigation
-                                .bindings
-                                .circleAnnotation
+                            }, navigation.annotationsOptions, navigation.bindings.circleAnnotation
                                 .annotationsOptions));
                         },
                         /** @ignore-option */
@@ -4860,16 +5185,14 @@
                             function (e, annotation) {
                                 var mockPointOpts = annotation.options.shapes[0]
                                         .point,
-                                    inverted = this.chart.inverted,
-                                    x,
-                                    y,
                                     distance;
                                 if (isNumber(mockPointOpts.xAxis) &&
                                     isNumber(mockPointOpts.yAxis)) {
-                                    x = this.chart.xAxis[mockPointOpts.xAxis]
-                                        .toPixels(mockPointOpts.x);
-                                    y = this.chart.yAxis[mockPointOpts.yAxis]
-                                        .toPixels(mockPointOpts.y);
+                                    var inverted = this.chart.inverted,
+                                        x = this.chart.xAxis[mockPointOpts.xAxis]
+                                            .toPixels(mockPointOpts.x),
+                                        y = this.chart.yAxis[mockPointOpts.yAxis]
+                                            .toPixels(mockPointOpts.y);
                                     distance = Math.max(Math.sqrt(Math.pow(inverted ? y - e.chartX : x - e.chartX, 2) +
                                         Math.pow(inverted ? x - e.chartY : y - e.chartY, 2)), 5);
                                 }
@@ -4881,6 +5204,59 @@
                             }
                         ]
                     },
+                    ellipseAnnotation: {
+                        className: 'highcharts-ellipse-annotation',
+                        start: function (e) {
+                            var coords = this.chart.pointer.getCoordinates(e),
+                                coordsX = this.utils.getAssignedAxis(coords.xAxis),
+                                coordsY = this.utils.getAssignedAxis(coords.yAxis),
+                                navigation = this.chart.options.navigation;
+                            if (!coordsX || !coordsY) {
+                                return;
+                            }
+                            return this.chart.addAnnotation(merge({
+                                langKey: 'ellipse',
+                                type: 'basicAnnotation',
+                                shapes: [
+                                    {
+                                        type: 'ellipse',
+                                        xAxis: coordsX.axis.options.index,
+                                        yAxis: coordsY.axis.options.index,
+                                        points: [{
+                                                x: coordsX.value,
+                                                y: coordsY.value
+                                            }, {
+                                                x: coordsX.value,
+                                                y: coordsY.value
+                                            }],
+                                        ry: 1
+                                    }
+                                ]
+                            }, navigation.annotationsOptions, navigation.bindings.ellipseAnnotation
+                                .annotationOptions));
+                        },
+                        steps: [
+                            function (e, annotation) {
+                                var target = annotation.shapes[0],
+                                    position = target.getAbsolutePosition(target.points[1]);
+                                target.translatePoint(e.chartX - position.x, e.chartY - position.y, 1);
+                                target.redraw(false);
+                            },
+                            function (e, annotation) {
+                                var target = annotation.shapes[0],
+                                    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);
+                            }
+                        ]
+                    },
                     /**
                      * A rectangle annotation bindings. Includes `start` and one event
                      * in `steps` array.
@@ -4914,7 +5290,8 @@
                                             { xAxis: xAxis, yAxis: yAxis, x: x, y: y },
                                             { xAxis: xAxis, yAxis: yAxis, x: x, y: y },
                                             { xAxis: xAxis, yAxis: yAxis, x: x, y: y },
-                                            { xAxis: xAxis, yAxis: yAxis, x: x, y: y }
+                                            { xAxis: xAxis, yAxis: yAxis, x: x, y: y },
+                                            { command: 'Z' }
                                         ]
                                     }]
                             }, navigation
@@ -4999,7 +5376,7 @@
                  * from a different server.
                  *
                  * @type      {string}
-                 * @default   https://code.highcharts.com/9.2.1/gfx/stock-icons/
+                 * @default   https://code.highcharts.com/9.3.2/gfx/stock-icons/
                  * @since     7.1.3
                  * @apioption navigation.iconsURL
                  */
@@ -5055,6 +5432,7 @@
                  * @extends   annotations
                  * @exclude   crookedLine, elliottWave, fibonacci, infinityLine,
                  *            measure, pitchfork, tunnel, verticalLine, basicAnnotation
+                 * @requires     modules/annotations
                  * @apioption navigation.annotationsOptions
                  */
                 annotationsOptions: {
@@ -5081,28 +5459,29 @@
                     if (chart.navigationBindings &&
                         chart.navigationBindings.container &&
                         chart.navigationBindings.container[0]) {
-                        // Get the HTML element coresponding to the
-                        // className taken from StockToolsBindings.
-                        var buttonNode = chart.navigationBindings.container[0].querySelectorAll('.' + key);
+                        // Get the HTML element coresponding to the className taken
+                        // from StockToolsBindings.
+                        var buttonNode = chart.navigationBindings.container[0]
+                                .querySelectorAll('.' + key);
                         if (buttonNode) {
                             for (var i = 0; i < buttonNode.length; i++) {
-                                var button = buttonNode[i];
+                                var button = buttonNode[i],
+                                    cls = button.className;
                                 if (value.noDataState === 'normal') {
-                                    // If button has noDataState: 'normal',
-                                    // and has disabledClassName,
-                                    // remove this className.
-                                    if (button.className.indexOf(disabledClassName) !== -1) {
+                                    // If button has noDataState: 'normal', and has
+                                    // disabledClassName, remove this className.
+                                    if (cls.indexOf(disabledClassName) !== -1) {
                                         button.classList.remove(disabledClassName);
                                     }
                                 }
                                 else if (!buttonsEnabled_1) {
-                                    if (button.className.indexOf(disabledClassName) === -1) {
+                                    if (cls.indexOf(disabledClassName) === -1) {
                                         button.className += ' ' + disabledClassName;
                                     }
                                 }
                                 else {
                                     // Enable all buttons by deleting the className.
-                                    if (button.className.indexOf(disabledClassName) !== -1) {
+                                    if (cls.indexOf(disabledClassName) !== -1) {
                                         button.classList.remove(disabledClassName);
                                     }
                                 }
@@ -5118,7 +5497,7 @@
 
         return NavigationBindings;
     });
-    _registerModule(_modules, 'Stock/StockToolsBindings.js', [_modules['Core/Globals.js'], _modules['Extensions/Annotations/NavigationBindings.js'], _modules['Core/DefaultOptions.js'], _modules['Core/Series/Series.js'], _modules['Core/Utilities.js'], _modules['Core/Color/Palette.js']], function (H, NavigationBindings, D, Series, U, palette) {
+    _registerModule(_modules, 'Stock/StockToolsBindings.js', [_modules['Core/DefaultOptions.js'], _modules['Core/Globals.js'], _modules['Extensions/Annotations/NavigationBindings.js'], _modules['Core/Series/Series.js'], _modules['Core/Utilities.js']], function (D, H, NavigationBindings, Series, U) {
         /**
          *
          *  Events generator for Stock tools
@@ -5238,34 +5617,35 @@
             };
         };
         bindingsUtils.indicatorsWithAxes = [
+            'apo',
             'ad',
+            'aroon',
+            'aroonoscillator',
             'atr',
+            'ao',
             'cci',
+            'chaikin',
             'cmf',
-            'disparityindex',
             'cmo',
+            'disparityindex',
             'dmi',
+            'dpo',
+            'linearRegressionAngle',
+            'linearRegressionIntercept',
+            'linearRegressionSlope',
+            'klinger',
             'macd',
             'mfi',
+            'momentum',
+            'natr',
+            'obv',
+            'ppo',
             'roc',
             'rsi',
-            'ao',
-            'aroon',
-            'aroonoscillator',
+            'slowstochastic',
+            'stochastic',
             'trix',
-            'apo',
-            'dpo',
-            'ppo',
-            'natr',
-            'obv',
-            'williamsr',
-            'stochastic',
-            'slowstochastic',
-            'linearRegression',
-            'linearRegressionSlope',
-            'linearRegressionIntercept',
-            'linearRegressionAngle',
-            'klinger'
+            'williamsr'
         ];
         bindingsUtils.manageIndicators = function (data) {
             var navigation = this,
@@ -5453,7 +5833,7 @@
          * @private
          * @function bindingsUtils.isLastPriceEnabled
          *
-         * @param {array} series
+         * @param {Array} series
          *        Array of series.
          *
          * @return {boolean}
@@ -5551,7 +5931,8 @@
                         if (!isNumber(height)) {
                             // Check if the previous axis is the
                             // indicator axis (every indicator inherits from sma)
-                            height = yAxes[index - 1].series.every(function (s) { return s.is('sma'); }) ?
+                            height = yAxes[index - 1].series
+                                .every(function (s) { return s.is('sma'); }) ?
                                 previousAxisHeight : defaultHeight / 100;
                         }
                         if (!isNumber(top)) {
@@ -5979,7 +6360,8 @@
                                     y: coordsY.value
                                 }]
                         }
-                    }, navigation.annotationsOptions, navigation.bindings.arrowInfinityLine.annotationsOptions);
+                    }, navigation.annotationsOptions, navigation.bindings.arrowInfinityLine
+                        .annotationsOptions);
                     return this.chart.addAnnotation(options);
                 },
                 /** @ignore-option */
@@ -6122,7 +6504,7 @@
              *
              * @type    {Highcharts.NavigationBindingsOptionsObject}
              * @product highstock
-             * @default {"className": "highcharts-crooked3", "start": function() {}, "steps": [function() {}, function() {}, function() {}, function() {}], "annotationsOptions": {}}
+             * @default {"className": "highcharts-crooked5", "start": function() {}, "steps": [function() {}, function() {}, function() {}, function() {}], "annotationsOptions": {}}
              */
             crooked5: {
                 /** @ignore-option */
@@ -6141,7 +6523,7 @@
                         y = coordsY.value,
                         navigation = this.chart.options.navigation,
                         options = merge({
-                            langKey: 'crookedLine',
+                            langKey: 'crooked5',
                             type: 'crookedLine',
                             typeOptions: {
                                 xAxis: coordsX.axis.options.index,
@@ -6215,7 +6597,7 @@
                             },
                             labelOptions: {
                                 style: {
-                                    color: palette.neutralColor60
+                                    color: "#666666" /* neutralColor60 */
                                 }
                             }
                         },
@@ -6277,7 +6659,7 @@
                             },
                             labelOptions: {
                                 style: {
-                                    color: palette.neutralColor60
+                                    color: "#666666" /* neutralColor60 */
                                 }
                             }
                         },
@@ -6329,23 +6711,23 @@
                         y: y },
                                 crosshairX: {
                                     strokeWidth: 1,
-                                    stroke: palette.neutralColor100
+                                    stroke: "#000000" /* neutralColor100 */
                                 },
                                 crosshairY: {
                                     enabled: false,
                                     strokeWidth: 0,
-                                    stroke: palette.neutralColor100
+                                    stroke: "#000000" /* neutralColor100 */
                                 },
                                 background: {
                                     width: 0,
                                     height: 0,
                                     strokeWidth: 0,
-                                    stroke: palette.backgroundColor
+                                    stroke: "#ffffff" /* backgroundColor */
                                 }
                             },
                             labelOptions: {
                                 style: {
-                                    color: palette.neutralColor60
+                                    color: "#666666" /* neutralColor60 */
                                 }
                             }
                         },
@@ -6394,22 +6776,22 @@
                                 crosshairX: {
                                     enabled: false,
                                     strokeWidth: 0,
-                                    stroke: palette.neutralColor100
+                                    stroke: "#000000" /* neutralColor100 */
                                 },
                                 crosshairY: {
                                     strokeWidth: 1,
-                                    stroke: palette.neutralColor100
+                                    stroke: "#000000" /* neutralColor100 */
                                 },
                                 background: {
                                     width: 0,
                                     height: 0,
                                     strokeWidth: 0,
-                                    stroke: palette.backgroundColor
+                                    stroke: "#ffffff" /* backgroundColor */
                                 }
                             },
                             labelOptions: {
                                 style: {
-                                    color: palette.neutralColor60
+                                    color: "#666666" /* neutralColor60 */
                                 }
                             }
                         },
@@ -6462,16 +6844,16 @@
                                 },
                                 crosshairX: {
                                     strokeWidth: 1,
-                                    stroke: palette.neutralColor100
+                                    stroke: "#000000" /* neutralColor100 */
                                 },
                                 crosshairY: {
                                     strokeWidth: 1,
-                                    stroke: palette.neutralColor100
+                                    stroke: "#000000" /* neutralColor100 */
                                 }
                             },
                             labelOptions: {
                                 style: {
-                                    color: palette.neutralColor60
+                                    color: "#666666" /* neutralColor60 */
                                 }
                             }
                         },
@@ -6524,7 +6906,7 @@
                             },
                             labelOptions: {
                                 style: {
-                                    color: palette.neutralColor60
+                                    color: "#666666" /* neutralColor60 */
                                 }
                             }
                         },
@@ -6577,7 +6959,8 @@
                             }
                         },
                         navigation.annotationsOptions,
-                        navigation.bindings.parallelChannel.annotationsOptions);
+                        navigation.bindings.parallelChannel
+                            .annotationsOptions);
                     return this.chart.addAnnotation(options);
                 },
                 /** @ignore-option */
@@ -6618,7 +7001,7 @@
                                         y: coordsY.value,
                                         controlPoint: {
                                             style: {
-                                                fill: palette.negativeColor
+                                                fill: "#f21313" /* negativeColor */
                                             }
                                         }
                                     }, { x: x, y: y },
@@ -6682,7 +7065,7 @@
                         },
                         labelOptions: {
                             style: {
-                                color: palette.neutralColor60,
+                                color: "#666666" /* neutralColor60 */,
                                 fontSize: '11px'
                             }
                         },
@@ -6705,6 +7088,44 @@
              * @product highstock
              * @default {"className": "highcharts-vertical-label", "start": function() {}, "annotationsOptions": {}}
              */
+            timeCycles: {
+                className: 'highcharts-time-cycles',
+                start: function (e) {
+                    var closestPoint = bindingsUtils.attractToPoint(e,
+                        this.chart),
+                        navigation = this.chart.options.navigation,
+                        options,
+                        annotation;
+                    // Exit if clicked out of axes area
+                    if (!closestPoint) {
+                        return;
+                    }
+                    options = merge({
+                        langKey: 'timeCycles',
+                        type: 'timeCycles',
+                        typeOptions: {
+                            xAxis: closestPoint.xAxis,
+                            yAxis: closestPoint.yAxis,
+                            points: [{
+                                    x: closestPoint.x
+                                }, {
+                                    x: closestPoint.x
+                                }],
+                            line: {
+                                stroke: 'rgba(0, 0, 0, 0.75)',
+                                fill: 'transparent',
+                                strokeWidth: 2
+                            }
+                        }
+                    }, navigation.annotationsOptions, navigation.bindings.timeCycles.annotationsOptions);
+                    annotation = this.chart.addAnnotation(options);
+                    annotation.options.events.click.call(annotation, {});
+                    return annotation;
+                },
+                steps: [
+                    bindingsUtils.updateNthPoint(1)
+                ]
+            },
             verticalLabel: {
                 /** @ignore-option */
                 className: 'highcharts-vertical-label',
@@ -6736,7 +7157,7 @@
                         },
                         labelOptions: {
                             style: {
-                                color: palette.neutralColor60,
+                                color: "#666666" /* neutralColor60 */,
                                 fontSize: '11px'
                             }
                         },
@@ -6752,8 +7173,8 @@
             /**
              * A vertical arrow annotation bindings. Includes `start` event. On click,
              * finds the closest point and marks it with an arrow.
-             * `${palette.positiveColor}` is the color of the arrow when
-             * pointing from above and `${palette.negativeColor}`
+             * `#06b535` is the color of the arrow when
+             * pointing from above and `#f21313`
              * when pointing from below the point.
              *
              * @type    {Highcharts.NavigationBindingsOptionsObject}
@@ -6792,7 +7213,7 @@
                             connector: {
                                 fill: 'none',
                                 stroke: closestPoint.below ?
-                                    palette.negativeColor : palette.positiveColor
+                                    "#f21313" /* negativeColor */ : "#06b535" /* positiveColor */
                             }
                         },
                         shapeOptions: {
@@ -6804,6 +7225,67 @@
                     annotation.options.events.click.call(annotation, {});
                 }
             },
+            /**
+             * The Fibonacci Time Zones annotation bindings. Includes `start` and one
+             * event in `steps` array.
+             *
+             * @type    {Highcharts.NavigationBindingsOptionsObject}
+             * @product highstock
+             * @default {"className": "highcharts-fibonacci-time-zones", "start": function() {}, "steps": [function() {}], "annotationsOptions": {}}
+             */
+            fibonacciTimeZones: {
+                /** @ignore-option */
+                className: 'highcharts-fibonacci-time-zones',
+                // eslint-disable-next-line valid-jsdoc
+                /** @ignore-option */
+                start: function (e) {
+                    var coords = this.chart.pointer.getCoordinates(e),
+                        coordsX = this.utils.getAssignedAxis(coords.xAxis),
+                        coordsY = this.utils.getAssignedAxis(coords.yAxis);
+                    // Exit if clicked out of axes area
+                    if (!coordsX || !coordsY) {
+                        return;
+                    }
+                    var navigation = this.chart.options.navigation,
+                        options = merge({
+                            type: 'fibonacciTimeZones',
+                            langKey: 'fibonacciTimeZones',
+                            typeOptions: {
+                                xAxis: coordsX.axis.options.index,
+                                yAxis: coordsY.axis.options.index,
+                                points: [{
+                                        x: coordsX.value
+                                    }]
+                            }
+                        },
+                        navigation.annotationsOptions,
+                        navigation.bindings.fibonacciTimeZones
+                            .annotationsOptions);
+                    return this.chart.addAnnotation(options);
+                },
+                /** @ignore-option */
+                // eslint-disable-next-line valid-jsdoc
+                steps: [
+                    function (e, annotation) {
+                        var mockPointOpts = annotation.options.typeOptions.points,
+                            x = mockPointOpts && mockPointOpts[0].x,
+                            coords = this.chart.pointer.getCoordinates(e),
+                            coordsX = this.utils.getAssignedAxis(coords.xAxis),
+                            coordsY = this.utils.getAssignedAxis(coords.yAxis);
+                        annotation.update({
+                            typeOptions: {
+                                xAxis: coordsX.axis.options.index,
+                                yAxis: coordsY.axis.options.index,
+                                points: [{
+                                        x: x
+                                    }, {
+                                        x: coordsX.value
+                                    }]
+                            }
+                        });
+                    }
+                ]
+            },
             // Flag types:
             /**
              * A flag series bindings. Includes `start` event. On click, finds the
@@ -7007,6 +7489,23 @@
                     fireEvent(this, 'deselectButton', { button: button });
                 }
             },
+            /**
+             * Change main series to `'hlc'` type.
+             *
+             * @type    {Highcharts.NavigationBindingsOptionsObject}
+             * @product highstock
+             * @default {"className": "highcharts-series-type-hlc", "init": function () {}}
+             */
+            seriesTypeHLC: {
+                className: 'highcharts-series-type-hlc',
+                init: function (button) {
+                    this.chart.series[0].update({
+                        type: 'hlc',
+                        useOhlcData: true
+                    });
+                    fireEvent(this, 'deselectButton', { button: button });
+                }
+            },
             /**
              * Changes main series to `'hollowcandlestick'` type.
              *
@@ -7069,7 +7568,10 @@
                         series.forEach(function (series) {
                             series.update({
                                 lastPrice: { enabled: !priceIndicatorEnabled },
-                                lastVisiblePrice: { enabled: !priceIndicatorEnabled, label: { enabled: true } }
+                                lastVisiblePrice: {
+                                    enabled: !priceIndicatorEnabled,
+                                    label: { enabled: true }
+                                }
                             }, false);
                         });
                         chart.redraw();
@@ -7258,10 +7760,12 @@
                         typeOHLC: 'OHLC',
                         typeLine: 'Line',
                         typeCandlestick: 'Candlestick',
+                        typeHLC: 'HLC',
                         typeHollowCandlestick: 'Hollow Candlestick',
                         typeHeikinAshi: 'Heikin Ashi',
                         // Basic shapes:
                         circle: 'Circle',
+                        ellipse: 'Ellipse',
                         label: 'Label',
                         rectangle: 'Rectangle',
                         // Flags:
@@ -7279,7 +7783,7 @@
                         ray: 'Ray',
                         arrowRay: 'Arrow ray',
                         line: 'Line',
-                        arrowLine: 'Arrow line',
+                        arrowInfinityLine: 'Arrow line',
                         horizontalLine: 'Horizontal line',
                         verticalLine: 'Vertical line',
                         infinityLine: 'Infinity line',
@@ -7294,14 +7798,17 @@
                         verticalArrow: 'Vertical arrow',
                         // Advanced:
                         fibonacci: 'Fibonacci',
+                        fibonacciTimeZones: 'Fibonacci Time Zones',
                         pitchfork: 'Pitchfork',
-                        parallelChannel: 'Parallel channel'
+                        parallelChannel: 'Parallel channel',
+                        timeCycles: 'Time Cycles'
                     }
                 },
                 navigation: {
                     popup: {
                         // Annotations:
                         circle: 'Circle',
+                        ellipse: 'Ellipse',
                         rectangle: 'Rectangle',
                         label: 'Label',
                         segment: 'Segment',
@@ -7309,7 +7816,7 @@
                         ray: 'Ray',
                         arrowRay: 'Arrow ray',
                         line: 'Line',
-                        arrowLine: 'Arrow line',
+                        arrowInfinityLine: 'Arrow line',
                         horizontalLine: 'Horizontal line',
                         verticalLine: 'Vertical line',
                         crooked3: 'Crooked 3 line',
@@ -7320,6 +7827,7 @@
                         verticalLabel: 'Vertical label',
                         verticalArrow: 'Vertical arrow',
                         fibonacci: 'Fibonacci',
+                        fibonacciTimeZones: 'Fibonacci Time Zones',
                         pitchfork: 'Pitchfork',
                         parallelChannel: 'Parallel channel',
                         infinityLine: 'Infinity line',
@@ -7327,6 +7835,7 @@
                         measureXY: 'Measure XY',
                         measureX: 'Measure X',
                         measureY: 'Measure Y',
+                        timeCycles: 'Time Cycles',
                         // Flags:
                         flags: 'Flags',
                         // GUI elements:
@@ -7344,7 +7853,11 @@
                         crosshairY: 'Crosshair Y',
                         tunnel: 'Tunnel',
                         background: 'Background',
+                        // Indicators' searchbox (#16019):
+                        noFilterMatch: 'No match',
                         // Indicators' params (#15170):
+                        searchIndicators: 'Search Indicators',
+                        clearFilter: '\u2715 clear filter',
                         index: 'Index',
                         period: 'Period',
                         periods: 'Periods',
@@ -7372,7 +7885,346 @@
                         factor: 'Factor',
                         fastAvgPeriod: 'Fast average period',
                         slowAvgPeriod: 'Slow average period',
-                        average: 'Average'
+                        average: 'Average',
+                        /**
+                         * Configure the aliases for indicator names.
+                         *
+                         * @product highstock
+                         * @since 9.3.0
+                         */
+                        indicatorAliases: {
+                            // Overlays
+                            /**
+                             * Acceleration Bands alias.
+                             *
+                             * @default ['Acceleration Bands']
+                             * @type    {Array<string>}
+                             */
+                            abands: ['Acceleration Bands'],
+                            /**
+                             * Bollinger Bands alias.
+                             *
+                             * @default ['Bollinger Bands']
+                             * @type    {Array<string>}
+                             */
+                            bb: ['Bollinger Bands'],
+                            /**
+                             * Double Exponential Moving Average alias.
+                             *
+                             * @default ['Double Exponential Moving Average']
+                             * @type    {Array<string>}
+                             */
+                            dema: ['Double Exponential Moving Average'],
+                            /**
+                             *  Exponential Moving Average alias.
+                             *
+                             * @default ['Exponential Moving Average']
+                             * @type    {Array<string>}
+                             */
+                            ema: ['Exponential Moving Average'],
+                            /**
+                             *  Ichimoku Kinko Hyo alias.
+                             *
+                             * @default ['Ichimoku Kinko Hyo']
+                             * @type    {Array<string>}
+                             */
+                            ikh: ['Ichimoku Kinko Hyo'],
+                            /**
+                             *  Keltner Channels alias.
+                             *
+                             * @default ['Keltner Channels']
+                             * @type    {Array<string>}
+                             */
+                            keltnerchannels: ['Keltner Channels'],
+                            /**
+                             *  Linear Regression alias.
+                             *
+                             * @default ['Linear Regression']
+                             * @type    {Array<string>}
+                             */
+                            linearRegression: ['Linear Regression'],
+                            /**
+                             *  Pivot Points alias.
+                             *
+                             * @default ['Pivot Points']
+                             * @type    {Array<string>}
+                             */
+                            pivotpoints: ['Pivot Points'],
+                            /**
+                             *  Price Channel alias.
+                             *
+                             * @default ['Price Channel']
+                             * @type    {Array<string>}
+                             */
+                            pc: ['Price Channel'],
+                            /**
+                             *  Price Envelopes alias.
+                             *
+                             * @default ['Price Envelopes']
+                             * @type    {Array<string>}
+                             */
+                            priceenvelopes: ['Price Envelopes'],
+                            /**
+                             *  Parabolic SAR alias.
+                             *
+                             * @default ['Parabolic SAR']
+                             * @type    {Array<string>}
+                             */
+                            psar: ['Parabolic SAR'],
+                            /**
+                             *  Simple Moving Average alias.
+                             *
+                             * @default ['Simple Moving Average']
+                             * @type    {Array<string>}
+                             */
+                            sma: ['Simple Moving Average'],
+                            /**
+                             *  Super Trend alias.
+                             *
+                             * @default ['Super Trend']
+                             * @type    {Array<string>}
+                             */
+                            supertrend: ['Super Trend'],
+                            /**
+                             *  Triple Exponential Moving Average alias.
+                             *
+                             * @default ['Triple Exponential Moving Average']
+                             * @type    {Array<string>}
+                             */
+                            tema: ['Triple Exponential Moving Average'],
+                            /**
+                             *  Volume by Price alias.
+                             *
+                             * @default ['Volume by Price']
+                             * @type    {Array<string>}
+                             */
+                            vbp: ['Volume by Price'],
+                            /**
+                             *  Volume Weighted Moving Average alias.
+                             *
+                             * @default ['Volume Weighted Moving Average']
+                             * @type    {Array<string>}
+                             */
+                            vwap: ['Volume Weighted Moving Average'],
+                            /**
+                             *  Weighted Moving Average alias.
+                             *
+                             * @default ['Weighted Moving Average']
+                             * @type    {Array<string>}
+                             */
+                            wma: ['Weighted Moving Average'],
+                            /**
+                             *  Zig Zagalias.
+                             *
+                             * @default ['Zig Zag']
+                             * @type    {Array<string>}
+                             */
+                            zigzag: ['Zig Zag'],
+                            // Oscilators
+                            /**
+                             *  Absolute price indicator alias.
+                             *
+                             * @default ['Absolute price indicator']
+                             * @type    {Array<string>}
+                             */
+                            apo: ['Absolute price indicator'],
+                            /**
+                             * Accumulation/Distribution alias.
+                             *
+                             * @default ['Accumulation/Distribution’]
+                             * @type    {Array<string>}
+                             */
+                            ad: ['Accumulation/Distribution'],
+                            /**
+                             *  Aroon alias.
+                             *
+                             * @default ['Aroon']
+                             * @type    {Array<string>}
+                             */
+                            aroon: ['Aroon'],
+                            /**
+                             *  Aroon oscillator alias.
+                             *
+                             * @default ['Aroon oscillator']
+                             * @type    {Array<string>}
+                             */
+                            aroonoscillator: ['Aroon oscillator'],
+                            /**
+                             *  Average True Range alias.
+                             *
+                             * @default ['Average True Range’]
+                             * @type    {Array<string>}
+                             */
+                            atr: ['Average True Range'],
+                            /**
+                             *  Awesome oscillator alias.
+                             *
+                             * @default ['Awesome oscillator’]
+                             * @type    {Array<string>}
+                             */
+                            ao: ['Awesome oscillator'],
+                            /**
+                             *  Commodity Channel Index alias.
+                             *
+                             * @default ['Commodity Channel Index’]
+                             * @type    {Array<string>}
+                             */
+                            cci: ['Commodity Channel Index'],
+                            /**
+                             *  Chaikin alias.
+                             *
+                             * @default ['Chaikin’]
+                             * @type    {Array<string>}
+                             */
+                            chaikin: ['Chaikin'],
+                            /**
+                             *  Chaikin Money Flow alias.
+                             *
+                             * @default ['Chaikin Money Flow’]
+                             * @type    {Array<string>}
+                             */
+                            cmf: ['Chaikin Money Flow'],
+                            /**
+                             *  Chande Momentum Oscillator alias.
+                             *
+                             * @default ['Chande Momentum Oscillator’]
+                             * @type    {Array<string>}
+                             */
+                            cmo: ['Chande Momentum Oscillator'],
+                            /**
+                             *  Disparity Index alias.
+                             *
+                             * @default ['Disparity Index’]
+                             * @type    {Array<string>}
+                             */
+                            disparityindex: ['Disparity Index'],
+                            /**
+                             *  Directional Movement Index alias.
+                             *
+                             * @default ['Directional Movement Index’]
+                             * @type    {Array<string>}
+                             */
+                            dmi: ['Directional Movement Index'],
+                            /**
+                             *  Detrended price oscillator alias.
+                             *
+                             * @default ['Detrended price oscillator’]
+                             * @type    {Array<string>}
+                             */
+                            dpo: ['Detrended price oscillator'],
+                            /**
+                             *  Klinger Oscillator alias.
+                             *
+                             * @default [‘Klinger Oscillator’]
+                             * @type    {Array<string>}
+                             */
+                            klinger: ['Klinger Oscillator'],
+                            /**
+                             *  Linear Regression Angle alias.
+                             *
+                             * @default [‘Linear Regression Angle’]
+                             * @type    {Array<string>}
+                             */
+                            linearRegressionAngle: ['Linear Regression Angle'],
+                            /**
+                             *  Linear Regression Intercept alias.
+                             *
+                             * @default [‘Linear Regression Intercept’]
+                             * @type    {Array<string>}
+                             */
+                            linearRegressionIntercept: ['Linear Regression Intercept'],
+                            /**
+                             *  Linear Regression Slope alias.
+                             *
+                             * @default [‘Linear Regression Slope’]
+                             * @type    {Array<string>}
+                             */
+                            linearRegressionSlope: ['Linear Regression Slope'],
+                            /**
+                             *  Moving Average Convergence Divergence alias.
+                             *
+                             * @default ['Moving Average Convergence Divergence’]
+                             * @type    {Array<string>}
+                             */
+                            macd: ['Moving Average Convergence Divergence'],
+                            /**
+                             *  Money Flow Index alias.
+                             *
+                             * @default ['Money Flow Index’]
+                             * @type    {Array<string>}
+                             */
+                            mfi: ['Money Flow Index'],
+                            /**
+                             *  Momentum alias.
+                             *
+                             * @default [‘Momentum’]
+                             * @type    {Array<string>}
+                             */
+                            momentum: ['Momentum'],
+                            /**
+                             *  Normalized Average True Range alias.
+                             *
+                             * @default ['Normalized Average True Range’]
+                             * @type    {Array<string>}
+                             */
+                            natr: ['Normalized Average True Range'],
+                            /**
+                             *  On-Balance Volume alias.
+                             *
+                             * @default ['On-Balance Volume’]
+                             * @type    {Array<string>}
+                             */
+                            obv: ['On-Balance Volume'],
+                            /**
+                             * Percentage Price oscillator alias.
+                             *
+                             * @default ['Percentage Price oscillator’]
+                             * @type    {Array<string>}
+                             */
+                            ppo: ['Percentage Price oscillator'],
+                            /**
+                             *  Rate of Change alias.
+                             *
+                             * @default ['Rate of Change’]
+                             * @type    {Array<string>}
+                             */
+                            roc: ['Rate of Change'],
+                            /**
+                             *  Relative Strength Index alias.
+                             *
+                             * @default ['Relative Strength Index’]
+                             * @type    {Array<string>}
+                             */
+                            rsi: ['Relative Strength Index'],
+                            /**
+                             *  Slow Stochastic alias.
+                             *
+                             * @default [‘Slow Stochastic’]
+                             * @type    {Array<string>}
+                             */
+                            slowstochastic: ['Slow Stochastic'],
+                            /**
+                             *  Stochastic alias.
+                             *
+                             * @default [‘Stochastic’]
+                             * @type    {Array<string>}
+                             */
+                            stochastic: ['Stochastic'],
+                            /**
+                             *  TRIX alias.
+                             *
+                             * @default [‘TRIX’]
+                             * @type    {Array<string>}
+                             */
+                            trix: ['TRIX'],
+                            /**
+                             *  Williams %R alias.
+                             *
+                             * @default [‘Williams %R’]
+                             * @type    {Array<string>}
+                             */
+                            williamsr: ['Williams %R']
+                        }
                     }
                 }
             },
@@ -7483,10 +8335,11 @@
                              * A collection of strings pointing to config options for
                              * the items.
                              *
-                             * @type {array}
+                             * @type {Array}
                              * @default [
                              *   'label',
                              *   'circle',
+                             *   'ellipse',
                              *   'rectangle'
                              * ]
                              *
@@ -7494,6 +8347,7 @@
                             items: [
                                 'label',
                                 'circle',
+                                'ellipse',
                                 'rectangle'
                             ],
                             circle: {
@@ -7505,6 +8359,15 @@
                                  */
                                 symbol: 'circle.svg'
                             },
+                            ellipse: {
+                                /**
+                                 * A predefined background symbol for the button.
+                                 *
+                                 * @type   {string}
+                                 *
+                                 */
+                                symbol: 'ellipse.svg'
+                            },
                             rectangle: {
                                 /**
                                  * A predefined background symbol for the button.
@@ -7529,7 +8392,7 @@
                              * A collection of strings pointing to config options for
                              * the items.
                              *
-                             * @type {array}
+                             * @type {Array}
                              * @default [
                              *   'flagCirclepin',
                              *   'flagDiamondpin',
@@ -7584,14 +8447,14 @@
                              * A collection of strings pointing to config options for
                              * the items.
                              *
-                             * @type {array}
+                             * @type {Array}
                              * @default [
                              *   'segment',
                              *   'arrowSegment',
                              *   'ray',
                              *   'arrowRay',
                              *   'line',
-                             *   'arrowLine',
+                             *   'arrowInfinityLine',
                              *   'horizontalLine',
                              *   'verticalLine'
                              * ]
@@ -7602,7 +8465,7 @@
                                 'ray',
                                 'arrowRay',
                                 'line',
-                                'arrowLine',
+                                'arrowInfinityLine',
                                 'horizontalLine',
                                 'verticalLine'
                             ],
@@ -7646,7 +8509,7 @@
                                  */
                                 symbol: 'line.svg'
                             },
-                            arrowLine: {
+                            arrowInfinityLine: {
                                 /**
                                  * A predefined background symbol for the button.
                                  *
@@ -7676,7 +8539,7 @@
                              * A collection of strings pointing to config options for
                              * the items.
                              *
-                             * @type {array}
+                             * @type {Array}
                              * @default [
                              *   'elliott3',
                              *   'elliott5',
@@ -7729,7 +8592,7 @@
                              * A collection of strings pointing to config options for
                              * the items.
                              *
-                             * @type {array}
+                             * @type {Array}
                              * @default [
                              *   'verticalCounter',
                              *   'verticalLabel',
@@ -7771,17 +8634,21 @@
                              * A collection of strings pointing to config options for
                              * the items.
                              *
-                             * @type {array}
+                             * @type {Array}
                              * @default [
                              *   'fibonacci',
+                             *   'fibonacciTimeZones',
                              *   'pitchfork',
-                             *   'parallelChannel'
+                             *   'parallelChannel',
+                             *   'timeCycles'
                              * ]
                              */
                             items: [
                                 'fibonacci',
+                                'fibonacciTimeZones',
                                 'pitchfork',
-                                'parallelChannel'
+                                'parallelChannel',
+                                'timeCycles'
                             ],
                             pitchfork: {
                                 /**
@@ -7799,6 +8666,14 @@
                                  */
                                 symbol: 'fibonacci.svg'
                             },
+                            fibonacciTimeZones: {
+                                /**
+                                 * A predefined background symbol for the button.
+                                 *
+                                 * @type   {string}
+                                 */
+                                symbol: 'fibonacci-timezone.svg'
+                            },
                             parallelChannel: {
                                 /**
                                  * A predefined background symbol for the button.
@@ -7806,6 +8681,14 @@
                                  * @type   {string}
                                  */
                                 symbol: 'parallel-channel.svg'
+                            },
+                            timeCycles: {
+                                /**
+                                 * A predefined backgroud symbol for the button.
+                                 *
+                                 * @type {string}
+                                 */
+                                symbol: 'time-cycles.svg'
                             }
                         },
                         measure: {
@@ -7813,7 +8696,7 @@
                              * A collection of strings pointing to config options for
                              * the items.
                              *
-                             * @type {array}
+                             * @type {Array}
                              * @default [
                              *   'measureXY',
                              *   'measureX',
@@ -7879,7 +8762,7 @@
                              * A collection of strings pointing to config options for
                              * the items.
                              *
-                             * @type {array}
+                             * @type {Array}
                              * @default [
                              *   'zoomX',
                              *   'zoomY',
@@ -7921,7 +8804,7 @@
                              * A collection of strings pointing to config options for
                              * the items.
                              *
-                             * @type {array}
+                             * @type {Array}
                              * @default [
                              *   'typeOHLC',
                              *   'typeLine',
@@ -7934,6 +8817,7 @@
                                 'typeLine',
                                 'typeCandlestick',
                                 'typeHollowCandlestick',
+                                'typeHLC',
                                 'typeHeikinAshi'
                             ],
                             typeOHLC: {
@@ -7960,6 +8844,14 @@
                                  */
                                 symbol: 'series-candlestick.svg'
                             },
+                            typeHLC: {
+                                /**
+                                 * A predefined background symbol for the button.
+                                 *
+                                 * @type   {string}
+                                 */
+                                symbol: 'series-hlc.svg'
+                            },
                             typeHeikinAshi: {
                                 /**
                                  * A predefined background symbol for the button.
@@ -8056,9 +8948,11 @@
         /**
          * Toolbar Class
          * @private
-         * @constructor
-         * @param {Object} - options of toolbar
-         * @param {Chart} - Reference to chart
+         * @class
+         * @param {Object}
+         * Options of toolbar
+         * @param {Highcharts.Chart}
+         * Reference to chart
          */
         var Toolbar = /** @class */ (function () {
                 function Toolbar(options, langOptions, chart) {
@@ -8118,11 +9012,14 @@
             /**
              * Create submenu (list of buttons) for the option. In example main button
              * is Line, in submenu will be buttons with types of lines.
+             *
              * @private
-             * @param {Highcharts.Dictionary<Highcharts.HTMLDOMElement>}
-             * button which has submenu
-             * @param {Highcharts.StockToolsGuiDefinitionsButtonsOptions}
-             * list of all buttons
+             *
+             * @param {Highcharts.Dictionary<Highcharts.HTMLDOMElement>} parentBtn
+             * Button which has submenu
+             *
+             * @param {Highcharts.StockToolsGuiDefinitionsButtonsOptions} button
+             * List of all buttons
              */
             Toolbar.prototype.addSubmenu = function (parentBtn, button) {
                 var _self = this,
@@ -8184,12 +9081,14 @@
             };
             /**
              * Create buttons in submenu
+             *
              * @private
-             * @param {Highcharts.HTMLDOMElement}
-             * button where submenu is placed
-             * @param {Highcharts.StockToolsGuiDefinitionsButtonsOptions}
-             * list of all buttons options
              *
+             * @param {Highcharts.HTMLDOMElement} buttonWrapper
+             * Button where submenu is placed
+             *
+             * @param {Highcharts.StockToolsGuiDefinitionsButtonsOptions} button
+             * List of all buttons options
              */
             Toolbar.prototype.addSubmenuItems = function (buttonWrapper, button) {
                 var _self = this,
@@ -8482,7 +9381,7 @@
                     button.style.backgroundImage;
                 // set active class
                 if (redraw) {
-                    this.selectButton(mainNavButton);
+                    this.toggleButtonAciveClass(mainNavButton);
                 }
             };
             /*
@@ -8491,7 +9390,7 @@
              * @param {HTMLDOMElement} - button
              *
              */
-            Toolbar.prototype.selectButton = function (button) {
+            Toolbar.prototype.toggleButtonAciveClass = function (button) {
                 if (button.className.indexOf(activeClass) >= 0) {
                     button.classList.remove(activeClass);
                 }
@@ -8557,7 +9456,7 @@
             Toolbar.prototype.getIconsURL = function () {
                 return this.chart.options.navigation.iconsURL ||
                     this.options.iconsURL ||
-                    'https://code.highcharts.com/9.2.1/gfx/stock-icons/';
+                    'https://code.highcharts.com/9.3.2/gfx/stock-icons/';
             };
             return Toolbar;
         }());
@@ -8567,6 +9466,7 @@
          */
         Toolbar.prototype.classMapping = {
             circle: PREFIX + 'circle-annotation',
+            ellipse: PREFIX + 'ellipse-annotation',
             rectangle: PREFIX + 'rectangle-annotation',
             label: PREFIX + 'label-annotation',
             segment: PREFIX + 'segment',
@@ -8574,7 +9474,7 @@
             ray: PREFIX + 'ray',
             arrowRay: PREFIX + 'arrow-ray',
             line: PREFIX + 'infinity-line',
-            arrowLine: PREFIX + 'arrow-infinity-line',
+            arrowInfinityLine: PREFIX + 'arrow-infinity-line',
             verticalLine: PREFIX + 'vertical-line',
             horizontalLine: PREFIX + 'horizontal-line',
             crooked3: PREFIX + 'crooked3',
@@ -8583,10 +9483,12 @@
             elliott5: PREFIX + 'elliott5',
             pitchfork: PREFIX + 'pitchfork',
             fibonacci: PREFIX + 'fibonacci',
+            fibonacciTimeZones: PREFIX + 'fibonacci-time-zones',
             parallelChannel: PREFIX + 'parallel-channel',
             measureX: PREFIX + 'measure-x',
             measureY: PREFIX + 'measure-y',
             measureXY: PREFIX + 'measure-xy',
+            timeCycles: PREFIX + 'time-cycles',
             verticalCounter: PREFIX + 'vertical-counter',
             verticalLabel: PREFIX + 'vertical-label',
             verticalArrow: PREFIX + 'vertical-arrow',
@@ -8601,6 +9503,7 @@
             zoomXY: PREFIX + 'zoom-xy',
             typeLine: PREFIX + 'series-type-line',
             typeOHLC: PREFIX + 'series-type-ohlc',
+            typeHLC: PREFIX + 'series-type-hlc',
             typeCandlestick: PREFIX + 'series-type-candlestick',
             typeHollowCandlestick: PREFIX + 'series-type-hollowcandlestick',
             typeHeikinAshi: PREFIX + 'series-type-heikinashi',
@@ -8640,7 +9543,7 @@
                     button = button.parentNode.parentNode;
                 }
                 // Set active class on the current button
-                gui.selectButton(button);
+                gui.toggleButtonAciveClass(button);
             }
         });
         addEvent(NavigationBindings, 'deselectButton', function (event) {
@@ -8652,7 +9555,7 @@
                 if (button.parentNode.className.indexOf(className) >= 0) {
                     button = button.parentNode.parentNode;
                 }
-                gui.selectButton(button);
+                gui.toggleButtonAciveClass(button);
             }
         });
         // Check if the correct price indicator button is displayed, #15029.
@@ -8663,8 +9566,12 @@
                     stockTools.toolbar &&
                     stockTools.toolbar.querySelector('.highcharts-current-price-indicator');
             // Change the initial button background.
-            if (stockTools && chart.navigationBindings && chart.options.series && button) {
-                if (chart.navigationBindings.constructor.prototype.utils.isPriceIndicatorEnabled(chart.series)) {
+            if (stockTools &&
+                chart.navigationBindings &&
+                chart.options.series &&
+                button) {
+                if (chart.navigationBindings.constructor.prototype.utils
+                    .isPriceIndicatorEnabled(chart.series)) {
                     button.firstChild.style['background-image'] =
                         'url("' + stockTools.getIconsURL() + 'current-price-hide.svg")';
                 }