highcharts 9.2.2 → 9.3.3

package/modules/gantt.src.js

@@ -1,5 +1,5 @@
 /**
- * @license Highcharts Gantt JS v9.2.2 (2021-08-24)
+ * @license Highcharts Gantt JS v9.3.3 (2022-02-01)
  *
  * Gantt series
  *
@@ -89,14 +89,14 @@
              * @private
              * @function getColorByCategory
              *
-             * @param {object} series
-             *        The series which the point belongs to.
+             * @param {Object} series
+             * The series which the point belongs to.
              *
-             * @param {object} point
-             *        The point to calculate its color for.
+             * @param {Object} point
+             * The point to calculate its color for.
              *
-             * @return {object}
-             *         Returns an object containing the properties color and colorIndex.
+             * @return {Object}
+             * Returns an object containing the properties color and colorIndex.
              */
             XRangePoint.getColorByCategory = function (series, point) {
                 var colors = series.options.colors || series.chart.options.colors,
@@ -155,8 +155,6 @@
              *
              * @private
              * @function Highcharts.Point#init
-             *
-             * @return {Highcharts.Point}
              */
             XRangePoint.prototype.init = function () {
                 Point.prototype.init.apply(this, arguments);
@@ -176,8 +174,6 @@
             /**
              * @private
              * @function Highcharts.Point#getLabelConfig
-             *
-             * @return {Highcharts.PointLabelObject}
              */
             // Add x2 and yCategory to the available properties for tooltip formats
             XRangePoint.prototype.getLabelConfig = function () {
@@ -191,8 +187,6 @@
             /**
              * @private
              * @function Highcharts.Point#isValid
-             *
-             * @return {boolean}
              */
             XRangePoint.prototype.isValid = function () {
                 return typeof this.x === 'number' &&
@@ -201,6 +195,7 @@
             return XRangePoint;
         }(ColumnSeries.prototype.pointClass));
         extend(XRangePoint.prototype, {
+            ttBelow: false,
             tooltipDateKeys: ['x', 'x2']
         });
         /* *
@@ -355,7 +350,6 @@
             /**
              * @private
              * @function Highcarts.seriesTypes.xrange#init
-             * @return {void}
              */
             XRangeSeries.prototype.init = function () {
                 ColumnSeries.prototype.init.apply(this, arguments);
@@ -367,8 +361,6 @@
              *
              * @private
              * @function Highcharts.Series#getColumnMetrics
-             *
-             * @return {Highcharts.ColumnMetricsObject}
              */
             XRangeSeries.prototype.getColumnMetrics = function () {
                 var metrics,
@@ -394,18 +386,6 @@
              *
              * @private
              * @function Highcharts.Series#cropData
-             *
-             * @param {Array<number>} xData
-             *
-             * @param {Array<number>} yData
-             *
-             * @param {number} min
-             *
-             * @param {number} max
-             *
-             * @param {number} [cropShoulder]
-             *
-             * @return {*}
              */
             XRangeSeries.prototype.cropData = function (xData, yData, min, max) {
                 // Replace xData with x2Data to find the appropriate cropStart
@@ -425,9 +405,10 @@
              *
              * @private
              * @function Highcharts.Series#findPointIndex
-             * @param {object} options The options of the point.
-             * @returns {number|undefined} Returns index of a matching point,
-             * returns undefined if no match is found.
+             * @param {Object} options
+             * The options of the point.
+             * @return {number|undefined}
+             * Returns index of a matching point, or undefined if no match is found.
              */
             XRangeSeries.prototype.findPointIndex = function (options) {
                 var _a = this,
@@ -713,8 +694,6 @@
              *
              * @private
              * @function Highcharts.Series#getAnimationVerb
-             *
-             * @return {string}
              */
             XRangeSeries.prototype.getAnimationVerb = function () {
                 return (this.chart.pointCount < (this.options.animationLimit || 250) ?
@@ -1035,7 +1014,7 @@
              * @private
              * @function Highcharts.Point#applyOptions
              *
-             * @param {object} options
+             * @param {Object} options
              *        The point options
              *
              * @param {number} x
@@ -1251,8 +1230,11 @@
                                         (threshold > brk.from && y < brk.from)) {
                                         eventName = 'pointBreak';
                                     }
-                                    else if ((threshold < brk.from && y > brk.from && y < brk.to) ||
-                                        (threshold > brk.from && y > brk.to && y < brk.from)) {
+                                    else if ((threshold < brk.from &&
+                                        y > brk.from &&
+                                        y < brk.to) || (threshold > brk.from &&
+                                        y > brk.to &&
+                                        y < brk.from)) {
                                         eventName = 'pointInBreak';
                                     }
                                     if (eventName) {
@@ -1371,12 +1353,9 @@
                                 isNull: true,
                                 x: xRange
                             });
-                            // For stacked chart generate empty stack items,
-                            // #6546
+                            // For stacked chart generate empty stack items, #6546
                             if (yAxis.stacking && this.options.stacking) {
-                                stack = yAxis.stacking.stacks[this.stackKey][xRange] =
-                                    new StackItem(yAxis, yAxis.options
-                                        .stackLabels, false, xRange, this.stack);
+                                stack = yAxis.stacking.stacks[this.stackKey][xRange] = new StackItem(yAxis, yAxis.options.stackLabels, false, xRange, this.stack);
                                 stack.total = 0;
                             }
                         }
@@ -1613,10 +1592,12 @@
                                     repeat_1 = brk.repeat || Infinity;
                                     if (isNumber(min_1) && isNumber(max_1)) {
                                         if (Additions.isInBreak(brk, min_1)) {
-                                            min_1 += (brk.to % repeat_1) - (min_1 % repeat_1);
+                                            min_1 += ((brk.to % repeat_1) -
+                                                (min_1 % repeat_1));
                                         }
                                         if (Additions.isInBreak(brk, max_1)) {
-                                            max_1 -= (max_1 % repeat_1) - (brk.from % repeat_1);
+                                            max_1 -= ((max_1 % repeat_1) -
+                                                (brk.from % repeat_1));
                                         }
                                     }
                                 });
@@ -1664,13 +1645,17 @@
                                             to: brk.value,
                                             len: brk.value - start_1 - (brk.size || 0)
                                         });
-                                        length_1 += brk.value - start_1 - (brk.size || 0);
+                                        length_1 += (brk.value -
+                                            start_1 -
+                                            (brk.size || 0));
                                     }
                                 });
                                 brokenAxis.breakArray = breakArray_1;
                                 // Used with staticScale, and below the actual axis
                                 // length, when breaks are substracted.
-                                if (isNumber(min_1) && isNumber(max_1) && isNumber(axis.min)) {
+                                if (isNumber(min_1) &&
+                                    isNumber(max_1) &&
+                                    isNumber(axis.min)) {
                                     brokenAxis.unitLength = max_1 - min_1 - length_1 +
                                         pointRangePadding;
                                     fireEvent(axis, 'afterBreaks');
@@ -1876,7 +1861,8 @@
                     this.treeGrid &&
                     this.treeGrid.mapOfPosToGridNode) {
                     var treeDepth = this.treeGrid.mapOfPosToGridNode[-1].height || 0;
-                    dimensions.width += this.options.labels.indentation * (treeDepth - 1);
+                    dimensions.width += (this.options.labels.indentation *
+                        (treeDepth - 1));
                 }
                 return dimensions;
             }
@@ -2042,8 +2028,10 @@
                                         axis.left,
                                         startPoint[2] || 0
                                     ],
-                                    upperBorderPath = [upperBorderStartPoint,
-                                    upperBorderEndPoint],
+                                    upperBorderPath = [
+                                        upperBorderStartPoint,
+                                        upperBorderEndPoint
+                                    ],
                                     lowerBorderEndPoint = [
                                         'L',
                                         axis.chart.chartWidth - axis.chart.marginRight,
@@ -2054,8 +2042,10 @@
                                         endPoint[1] || 0,
                                         axis.toPixels(max + axis.tickmarkOffset)
                                     ],
-                                    lowerBorderPath = [lowerBorderStartPoint,
-                                    lowerBorderEndPoint];
+                                    lowerBorderPath = [
+                                        lowerBorderStartPoint,
+                                        lowerBorderEndPoint
+                                    ];
                                 if (!axis.grid.upperBorder && min % 1 !== 0) {
                                     axis.grid.upperBorder = axis.grid.renderBorder(upperBorderPath);
                                 }
@@ -2081,8 +2071,8 @@
                                     });
                                 }
                             }
-                            // Render an extra line parallel to the existing axes,
-                            // to close the grid.
+                            // Render an extra line parallel to the existing axes, to
+                            // close the grid.
                             if (!axis.grid.axisLineExtra) {
                                 axis.grid.axisLineExtra = axis.grid.renderBorder(linePath);
                             }
@@ -2095,8 +2085,7 @@
                                     d: linePath
                                 });
                             }
-                            // show or hide the line depending on
-                            // options.showEmpty
+                            // show or hide the line depending on options.showEmpty
                             axis.axisLine[axis.showAxis ? 'show' : 'hide'](true);
                         }
                     }
@@ -2138,7 +2127,8 @@
                         }
                         var mark = axis.ticks[lastTick].mark;
                         if (mark) {
-                            if (lastTick - max < tickmarkOffset && lastTick - max > 0 && axis.ticks[lastTick].isLast) {
+                            if (lastTick - max < tickmarkOffset &&
+                                lastTick - max > 0 && axis.ticks[lastTick].isLast) {
                                 mark.hide();
                             }
                             else if (axis.ticks[lastTick - 1]) {
@@ -2171,7 +2161,8 @@
                             options.dateTimeLabelFormats &&
                             options.labels &&
                             !defined(userLabels.align) &&
-                            (options.dateTimeLabelFormats[tickInfo.unitName].range === false ||
+                            (options.dateTimeLabelFormats[tickInfo.unitName]
+                                .range === false ||
                                 tickInfo.count > 1 // years
                             )) {
                             options.labels.align = 'left';
@@ -2385,7 +2376,8 @@
                 if (gridOptions.enabled && maxLabelDimensions) {
                     var labelPadding = (Math.abs(defaultLeftAxisOptions.labels.x) * 2);
                     var distance = horiz ?
-                            gridOptions.cellHeight || labelPadding + maxLabelDimensions.height :
+                            (gridOptions.cellHeight ||
+                                labelPadding + maxLabelDimensions.height) :
                             labelPadding + maxLabelDimensions.width;
                     if (isArray(e.tickSize)) {
                         e.tickSize[0] = distance;
@@ -2425,7 +2417,7 @@
                 var userOptions = e.userOptions || {};
                 var gridOptions = userOptions.grid || {};
                 if (gridOptions.enabled && defined(gridOptions.borderColor)) {
-                    userOptions.tickColor = userOptions.lineColor = gridOptions.borderColor;
+                    userOptions.tickColor = userOptions.lineColor = (gridOptions.borderColor);
                 }
                 if (!axis.grid) {
                     axis.grid = new Additions(axis);
@@ -2672,7 +2664,8 @@
                     var thisIndex = -1,
                         lastIndex = 0;
                     chart[axis.coll].forEach(function (otherAxis, index) {
-                        if (otherAxis.side === axis.side && !otherAxis.options.isInternal) {
+                        if (otherAxis.side === axis.side &&
+                            !otherAxis.options.isInternal) {
                             lastIndex = index;
                             if (otherAxis === parentAxis) {
                                 // Get the index of the axis in question
@@ -2681,17 +2674,17 @@
                         }
                     });
                     return (lastIndex === thisIndex &&
-                        (isNumber(columnIndex) ? columns.length === columnIndex : true));
+                        (isNumber(columnIndex) ?
+                            columns.length === columnIndex :
+                            true));
                 };
                 /**
                  * Add extra border based on the provided path.
-                 *  *
                  * @private
-                 *
                  * @param {SVGPath} path
                  * The path of the border.
-                 *
                  * @return {Highcharts.SVGElement}
+                 * Border
                  */
                 Additions.prototype.renderBorder = function (path) {
                     var axis = this.axis,
@@ -2956,7 +2949,7 @@
 
         return Tree;
     });
-    _registerModule(_modules, 'Core/Axis/TreeGridTick.js', [_modules['Core/Color/Palette.js'], _modules['Core/Utilities.js']], function (palette, U) {
+    _registerModule(_modules, 'Core/Axis/TreeGridTick.js', [_modules['Core/Utilities.js']], function (U) {
         /* *
          *
          *  (c) 2016 Highsoft AS
@@ -3077,7 +3070,7 @@
                     icon
                         .attr({
                         cursor: 'pointer',
-                        'fill': pick(params.color, palette.neutralColor60),
+                        'fill': pick(params.color, "#666666" /* neutralColor60 */),
                         'stroke-width': 1,
                         stroke: options.lineColor,
                         strokeWidth: options.lineWidth || 0
@@ -3160,7 +3153,10 @@
                     node.descendants > 0) {
                     collapsed = axis.treeGrid.isCollapsed(node);
                     renderLabelIcon(tick, {
-                        color: !styledMode && label.styles && label.styles.color || '',
+                        color: (!styledMode &&
+                            label.styles &&
+                            label.styles.color ||
+                            ''),
                         collapsed: collapsed,
                         group: label.parentGroup,
                         options: symbolOptions,
@@ -3306,8 +3302,14 @@
 
         return TreeGridTick;
     });
-    _registerModule(_modules, 'Mixins/TreeSeries.js', [_modules['Core/Color/Color.js'], _modules['Core/Utilities.js']], function (Color, U) {
+    _registerModule(_modules, 'Series/TreeUtilities.js', [_modules['Core/Color/Color.js'], _modules['Core/Utilities.js']], function (Color, U) {
         /* *
+         *
+         *  (c) 2014-2021 Highsoft AS
+         *
+         *  Authors: Jon Arild Nygard / Oystein Moseng
+         *
+         *  License: www.highcharts.com/license
          *
          *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
          *
@@ -3318,96 +3320,45 @@
             isObject = U.isObject,
             merge = U.merge,
             pick = U.pick;
-        var isBoolean = function (x) {
-                return typeof x === 'boolean';
-        }, isFn = function (x) {
-            return typeof x === 'function';
-        };
+        /* *
+         *
+         *  Functions
+         *
+         * */
         /* eslint-disable valid-jsdoc */
         /**
-         * @todo Combine buildTree and buildNode with setTreeValues
-         * @todo Remove logic from Treemap and make it utilize this mixin.
          * @private
          */
-        var setTreeValues = function setTreeValues(tree,
-            options) {
-                var before = options.before,
-            idRoot = options.idRoot,
-            mapIdToNode = options.mapIdToNode,
-            nodeRoot = mapIdToNode[idRoot],
-            levelIsConstant = (isBoolean(options.levelIsConstant) ?
-                    options.levelIsConstant :
-                    true),
-            points = options.points,
-            point = points[tree.i],
-            optionsPoint = point && point.options || {},
-            childrenTotal = 0,
-            children = [],
-            value;
-            tree.levelDynamic = tree.level - (levelIsConstant ? 0 : nodeRoot.level);
-            tree.name = pick(point && point.name, '');
-            tree.visible = (idRoot === tree.id ||
-                (isBoolean(options.visible) ? options.visible : false));
-            if (isFn(before)) {
-                tree = before(tree, options);
-            }
-            // First give the children some values
-            tree.children.forEach(function (child, i) {
-                var newOptions = extend({},
-                    options);
-                extend(newOptions, {
-                    index: i,
-                    siblings: tree.children.length,
-                    visible: tree.visible
-                });
-                child = setTreeValues(child, newOptions);
-                children.push(child);
-                if (child.visible) {
-                    childrenTotal += child.val;
-                }
-            });
-            // Set the values
-            value = pick(optionsPoint.value, childrenTotal);
-            tree.visible = value >= 0 && (childrenTotal > 0 || tree.visible);
-            tree.children = children;
-            tree.childrenTotal = childrenTotal;
-            tree.isLeaf = tree.visible && !childrenTotal;
-            tree.val = value;
-            return tree;
-        };
-        /**
-         * @private
-         */
-        var getColor = function getColor(node,
-            options) {
-                var index = options.index,
-            mapOptionsToLevel = options.mapOptionsToLevel,
-            parentColor = options.parentColor,
-            parentColorIndex = options.parentColorIndex,
-            series = options.series,
-            colors = options.colors,
-            siblings = options.siblings,
-            points = series.points,
-            getColorByPoint,
-            chartOptionsChart = series.chart.options.chart,
-            point,
-            level,
-            colorByPoint,
-            colorIndexByPoint,
-            color,
-            colorIndex;
-            /**
-             * @private
-             */
-            function variation(color) {
-                var colorVariation = level && level.colorVariation;
-                if (colorVariation) {
-                    if (colorVariation.key === 'brightness') {
-                        return Color.parse(color).brighten(colorVariation.to * (index / siblings)).get();
-                    }
+        function getColor(node, options) {
+            var index = options.index,
+                mapOptionsToLevel = options.mapOptionsToLevel,
+                parentColor = options.parentColor,
+                parentColorIndex = options.parentColorIndex,
+                series = options.series,
+                colors = options.colors,
+                siblings = options.siblings,
+                points = series.points,
+                chartOptionsChart = series.chart.options.chart;
+            var getColorByPoint,
+                point,
+                level,
+                colorByPoint,
+                colorIndexByPoint,
+                color,
+                colorIndex;
+            /**
+             * @private
+             */
+            var variateColor = function (color) {
+                    var colorVariation = level && level.colorVariation;
+                if (colorVariation &&
+                    colorVariation.key === 'brightness' &&
+                    index &&
+                    siblings) {
+                    return Color.parse(color).brighten(colorVariation.to * (index / siblings)).get();
                 }
                 return color;
-            }
+            };
             if (node) {
                 point = points[node.i];
                 level = mapOptionsToLevel[node.level] || {};
@@ -3420,7 +3371,7 @@
                 }
                 // Select either point color, level color or inherited color.
                 if (!series.chart.styledMode) {
-                    color = pick(point && point.options.color, level && level.color, colorByPoint, parentColor && variation(parentColor), series.color);
+                    color = pick(point && point.options.color, level && level.color, colorByPoint, parentColor && variateColor(parentColor), series.color);
                 }
                 colorIndex = pick(point && point.options.colorIndex, level && level.colorIndex, colorIndexByPoint, parentColorIndex, options.colorIndex);
             }
@@ -3428,31 +3379,32 @@
                 color: color,
                 colorIndex: colorIndex
             };
-        };
+        }
         /**
          * Creates a map from level number to its given options.
          *
          * @private
-         * @function getLevelOptions
-         * @param {object} params
-         *        Object containing parameters.
-         *        - `defaults` Object containing default options. The default options
-         *           are merged with the userOptions to get the final options for a
-         *           specific level.
-         *        - `from` The lowest level number.
-         *        - `levels` User options from series.levels.
-         *        - `to` The highest level number.
+         *
+         * @param {Object} params
+         * Object containing parameters.
+         * - `defaults` Object containing default options. The default options are
+         *   merged with the userOptions to get the final options for a specific
+         *   level.
+         * - `from` The lowest level number.
+         * - `levels` User options from series.levels.
+         * - `to` The highest level number.
+         *
          * @return {Highcharts.Dictionary<object>|null}
-         *         Returns a map from level number to its given options.
+         * Returns a map from level number to its given options.
          */
-        var getLevelOptions = function getLevelOptions(params) {
-                var result = null,
-            defaults,
-            converted,
-            i,
-            from,
-            to,
-            levels;
+        function getLevelOptions(params) {
+            var result = null,
+                defaults,
+                converted,
+                i,
+                from,
+                to,
+                levels;
             if (isObject(params)) {
                 result = {};
                 from = isNumber(params.from) ? params.from : 1;
@@ -3466,16 +3418,14 @@
                             options;
                         if (isObject(item) && isNumber(item.level)) {
                             options = merge({}, item);
-                            levelIsConstant = (isBoolean(options.levelIsConstant) ?
-                                options.levelIsConstant :
-                                defaults.levelIsConstant);
+                            levelIsConstant = pick(options.levelIsConstant, defaults.levelIsConstant);
                             // Delete redundant properties.
                             delete options.levelIsConstant;
                             delete options.level;
                             // Calculate which level these options apply to.
                             level = item.level + (levelIsConstant ? 0 : from - 1);
                             if (isObject(obj[level])) {
-                                extend(obj[level], options);
+                                merge(true, obj[level], options); // #16329
                             }
                             else {
                                 obj[level] = options;
@@ -3490,23 +3440,70 @@
                 }
             }
             return result;
-        };
+        }
+        /**
+         * @private
+         * @todo Combine buildTree and buildNode with setTreeValues
+         * @todo Remove logic from Treemap and make it utilize this mixin.
+         */
+        function setTreeValues(tree, options) {
+            var before = options.before,
+                idRoot = options.idRoot,
+                mapIdToNode = options.mapIdToNode,
+                nodeRoot = mapIdToNode[idRoot],
+                levelIsConstant = (options.levelIsConstant !== false),
+                points = options.points,
+                point = points[tree.i],
+                optionsPoint = point && point.options || {},
+                children = [];
+            var childrenTotal = 0;
+            tree.levelDynamic = tree.level - (levelIsConstant ? 0 : nodeRoot.level);
+            tree.name = pick(point && point.name, '');
+            tree.visible = (idRoot === tree.id ||
+                options.visible === true);
+            if (typeof before === 'function') {
+                tree = before(tree, options);
+            }
+            // First give the children some values
+            tree.children.forEach(function (child, i) {
+                var newOptions = extend({},
+                    options);
+                extend(newOptions, {
+                    index: i,
+                    siblings: tree.children.length,
+                    visible: tree.visible
+                });
+                child = setTreeValues(child, newOptions);
+                children.push(child);
+                if (child.visible) {
+                    childrenTotal += child.val;
+                }
+            });
+            // Set the values
+            var value = pick(optionsPoint.value,
+                childrenTotal);
+            tree.visible = value >= 0 && (childrenTotal > 0 || tree.visible);
+            tree.children = children;
+            tree.childrenTotal = childrenTotal;
+            tree.isLeaf = tree.visible && !childrenTotal;
+            tree.val = value;
+            return tree;
+        }
         /**
          * Update the rootId property on the series. Also makes sure that it is
          * accessible to exporting.
          *
          * @private
-         * @function updateRootId
          *
-         * @param {object} series
-         *        The series to operate on.
+         * @param {Object} series
+         * The series to operate on.
          *
          * @return {string}
-         *         Returns the resulting rootId after update.
+         * Returns the resulting rootId after update.
          */
-        var updateRootId = function (series) {
-                var rootId,
-            options;
+        function updateRootId(series) {
+            var rootId,
+                options;
             if (isObject(series)) {
                 // Get the series options.
                 options = isObject(series.options) ? series.options : {};
@@ -3520,17 +3517,22 @@
                 series.rootNode = rootId;
             }
             return rootId;
-        };
-        var result = {
+        }
+        /* *
+         *
+         *  Default Export
+         *
+         * */
+        var TreeUtilities = {
                 getColor: getColor,
                 getLevelOptions: getLevelOptions,
                 setTreeValues: setTreeValues,
                 updateRootId: updateRootId
             };
 
-        return result;
+        return TreeUtilities;
     });
-    _registerModule(_modules, 'Core/Axis/TreeGridAxis.js', [_modules['Core/Axis/BrokenAxis.js'], _modules['Core/Axis/GridAxis.js'], _modules['Gantt/Tree.js'], _modules['Core/Axis/TreeGridTick.js'], _modules['Mixins/TreeSeries.js'], _modules['Core/Utilities.js']], function (BrokenAxis, GridAxis, Tree, TreeGridTick, mixinTreeSeries, U) {
+    _registerModule(_modules, 'Core/Axis/TreeGridAxis.js', [_modules['Core/Axis/BrokenAxis.js'], _modules['Core/Axis/GridAxis.js'], _modules['Gantt/Tree.js'], _modules['Core/Axis/TreeGridTick.js'], _modules['Series/TreeUtilities.js'], _modules['Core/Utilities.js']], function (BrokenAxis, GridAxis, Tree, TreeGridTick, TU, U) {
         /* *
          *
          *  (c) 2016 Highsoft AS
@@ -3541,7 +3543,7 @@
          *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
          *
          * */
-        var getLevelOptions = mixinTreeSeries.getLevelOptions;
+        var getLevelOptions = TU.getLevelOptions;
         var addEvent = U.addEvent,
             find = U.find,
             fireEvent = U.fireEvent,
@@ -3629,7 +3631,7 @@
              *
              * @param {number} numberOfSeries
              *
-             * @return {object}
+             * @return {Object}
              * Returns an object containing categories, mapOfIdToNode,
              * mapOfPosToGridNode, and tree.
              *
@@ -3642,7 +3644,8 @@
                 var categories = [],
                     collapsedNodes = [],
                     mapOfIdToNode = {},
-                    uniqueNamesEnabled = typeof uniqueNames === 'boolean' ? uniqueNames : false;
+                    uniqueNamesEnabled = typeof uniqueNames === 'boolean' ?
+                        uniqueNames : false;
                 var mapOfPosToGridNode = {},
                     posIterator = -1;
                 // Build the tree from the series data.
@@ -3665,7 +3668,9 @@
                     // Before the children has been created.
                     before: function (node) {
                         var data = isObject(node.data,
-                            true) ? node.data : {},
+                            true) ?
+                                node.data :
+                                {},
                             name = isString(data.name) ? data.name : '',
                             parentNode = mapOfIdToNode[node.parent],
                             parentGridNode = (isObject(parentNode,
@@ -3774,8 +3779,8 @@
             /**
              * Builds the tree of categories and calculates its positions.
              * @private
-             * @param {object} e Event object
-             * @param {object} e.target The chart instance which the event was fired on.
+             * @param {Object} e Event object
+             * @param {Object} e.target The chart instance which the event was fired on.
              * @param {object[]} e.target.axes The axes of the chart.
              */
             function onBeforeRender(e) {
@@ -3790,8 +3795,8 @@
                         max = options.max, 
                         // Check whether any of series is rendering for the first
                         // time, visibility has changed, or its data is dirty, and
-                        // only then update. #10570, #10580
-                        // Also check if mapOfPosToGridNode exists. #10887
+                        // only then update. #10570, #10580. Also check if
+                        // mapOfPosToGridNode exists. #10887
                         isDirty = (!axis.treeGrid.mapOfPosToGridNode ||
                             axis.series.some(function (series) {
                                 return !series.hasRendered ||
@@ -3809,13 +3814,15 @@
                                 (s.options.data || []).forEach(function (data) {
                                     // For using keys - rebuild the data structure
                                     if (s.options.keys && s.options.keys.length) {
-                                        data = s.pointClass.prototype.optionsToObject.call({ series: s }, data);
+                                        data = s.pointClass.prototype
+                                            .optionsToObject
+                                            .call({ series: s }, data);
                                         s.pointClass.setGanttPointAliases(data);
                                     }
                                     if (isObject(data, true)) {
                                         // Set series index on data. Removed again
                                         // after use.
-                                        data.seriesIndex = numberOfSeries;
+                                        data.seriesIndex = (numberOfSeries);
                                         arr.push(data);
                                     }
                                 });
@@ -3842,17 +3849,20 @@
                         treeGrid = getTreeGridFromData(data, uniqueNames || false, (uniqueNames === true) ? numberOfSeries : 1);
                         // Assign values to the axis.
                         axis.categories = treeGrid.categories;
-                        axis.treeGrid.mapOfPosToGridNode = treeGrid.mapOfPosToGridNode;
+                        axis.treeGrid.mapOfPosToGridNode = (treeGrid.mapOfPosToGridNode);
                         axis.hasNames = true;
                         axis.treeGrid.tree = treeGrid.tree;
                         // Update yData now that we have calculated the y values
                         axis.series.forEach(function (series) {
                             var axisData = (series.options.data || []).map(function (d) {
-                                    if (isArray(d) && series.options.keys && series.options.keys.length) {
+                                    if (isArray(d) &&
+                                        series.options.keys &&
+                                        series.options.keys.length) {
                                         // Get the axisData from the data array used to
                                         // build the treeGrid where has been modified
                                         data.forEach(function (point) {
-                                            if (d.indexOf(point.x) >= 0 && d.indexOf(point.x2) >= 0) {
+                                            if (d.indexOf(point.x) >= 0 &&
+                                                d.indexOf(point.x2) >= 0) {
                                                 d = point;
                                         }
                                     });
@@ -3962,10 +3972,11 @@
                                     axis.brokenAxis.setBreaks(breaks, false);
                                     // remove the node from the axis collapsedNodes
                                     if (axis.treeGrid.collapsedNodes) {
-                                        axis.treeGrid.collapsedNodes = axis.treeGrid.collapsedNodes.filter(function (n) {
-                                            return node.collapseStart !== n.collapseStart ||
-                                                node.collapseEnd !== n.collapseEnd;
-                                        });
+                                        axis.treeGrid.collapsedNodes = axis.treeGrid
+                                            .collapsedNodes
+                                            .filter(function (n) { return ((node.collapseStart !==
+                                            n.collapseStart) ||
+                                            node.collapseEnd !== n.collapseEnd); });
                                     }
                                 }
                             });
@@ -4246,7 +4257,7 @@
                  * @param {Highcharts.Axis} axis
                  * The axis to check against.
                  *
-                 * @param {object} node
+                 * @param {Object} node
                  * The node to check if is collapsed.
                  *
                  * @param {number} pos
@@ -4292,7 +4303,7 @@
 
         return TreeGridAxis;
     });
-    _registerModule(_modules, 'Extensions/CurrentDateIndication.js', [_modules['Core/Axis/Axis.js'], _modules['Core/Color/Palette.js'], _modules['Core/Axis/PlotLineOrBand/PlotLineOrBand.js'], _modules['Core/Utilities.js']], function (Axis, Palette, PlotLineOrBand, U) {
+    _registerModule(_modules, 'Extensions/CurrentDateIndication.js', [_modules['Core/Axis/Axis.js'], _modules['Core/Axis/PlotLineOrBand/PlotLineOrBand.js'], _modules['Core/Utilities.js']], function (Axis, PlotLineOrBand, U) {
         /* *
          *
          *  (c) 2016-2021 Highsoft AS
@@ -4326,7 +4337,7 @@
          * @apioption xAxis.currentDateIndicator
          */
         var defaultOptions = {
-                color: Palette.highlightColor20,
+                color: "#ccd6eb" /* highlightColor20 */,
                 width: 2,
                 /**
                  * @declare Highcharts.AxisCurrentDateIndicatorLabelOptions
@@ -4334,7 +4345,7 @@
                 label: {
                     /**
                      * Format of the label. This options is passed as the fist argument to
-                     * [dateFormat](/class-reference/Highcharts#.dateFormat) function.
+                     * [dateFormat](/class-reference/Highcharts.Time#dateFormat) function.
                      *
                      * @type      {string}
                      * @default   %a, %b %d %Y, %H:%M
@@ -5454,11 +5465,11 @@
              *        The radius of the marker, to calculate the additional distance to
              *        the center of the marker.
              *
-             * @param {object} anchor
+             * @param {Object} anchor
              *        The anchor point of the path and marker as an object with x/y
              *        properties.
              *
-             * @return {object}
+             * @return {Object}
              *         The marker vector as an object with x/y properties.
              */
             getMarkerVector: function (radians, markerRadius, anchor) {
@@ -5611,7 +5622,7 @@
          * @private
          * @function pointWithinObstacle
          *
-         * @param {object} obstacle
+         * @param {Object} obstacle
          *        Obstacle to test.
          *
          * @param {Highcharts.Point} point
@@ -5683,10 +5694,10 @@
          * @private
          * @function limitObstacleToBounds
          *
-         * @param {object} obstacle
+         * @param {Object} obstacle
          *        Obstacle to limit.
          *
-         * @param {object} bounds
+         * @param {Object} bounds
          *        Bounds to use as limit.
          *
          * @return {void}
@@ -5709,7 +5720,7 @@
          * @param {Highcharts.PositionObject} end
          *        Ending coordinate, object with x/y props.
          *
-         * @return {object}
+         * @return {Object}
          *         An object with the SVG path in Array form as accepted by the SVG
          *         renderer, as well as an array of new obstacles making up this
          *         path.
@@ -5736,14 +5747,14 @@
          * @param {Highcharts.PositionObject} end
          *        Ending coordinate, object with x/y props.
          *
-         * @param {object} options
+         * @param {Object} options
          *        Options for the algorithm:
          *        - chartObstacles: Array of chart obstacles to avoid
          *        - startDirectionX: Optional. True if starting in the X direction.
          *          If not provided, the algorithm starts in the direction that is
          *          the furthest between start/end.
          *
-         * @return {object}
+         * @return {Object}
          *         An object with the SVG path in Array form as accepted by the SVG
          *         renderer, as well as an array of new obstacles making up this
          *         path.
@@ -5868,7 +5879,7 @@
          * @param {Highcharts.PositionObject} end
          *        Ending coordinate, object with x/y props.
          *
-         * @param {object} options
+         * @param {Object} options
          *        Options for the algorithm.
          *        - chartObstacles:  Array of chart obstacles to avoid
          *        - lineObstacles:   Array of line obstacles to jump over
@@ -5880,7 +5891,7 @@
          *                           direction that is the furthest between
          *                           start/end.
          *
-         * @return {object}
+         * @return {Object}
          *         An object with the SVG path in Array form as accepted by the SVG
          *         renderer, as well as an array of new obstacles making up this
          *         path.
@@ -6015,19 +6026,19 @@
              * @private
              * @function
              *
-             * @param {object} obstacle
+             * @param {Object} obstacle
              *        Obstacle to dodge/escape.
              *
-             * @param {object} fromPoint
+             * @param {Object} fromPoint
              *        Point with x/y props that's dodging/escaping.
              *
-             * @param {object} toPoint
+             * @param {Object} toPoint
              *        Goal point.
              *
              * @param {boolean} dirIsX
              *        Dodge in X dimension.
              *
-             * @param {object} bounds
+             * @param {Object} bounds
              *        Hard and soft boundaries.
              *
              * @return {boolean}
@@ -6739,7 +6750,8 @@
                             // For Gantt series the connect could be
                             // defined as a dependency
                             if (ganttPointOptions && ganttPointOptions.dependency) {
-                                ganttPointOptions.connect = ganttPointOptions.dependency;
+                                ganttPointOptions.connect = ganttPointOptions
+                                    .dependency;
                             }
                             var to,
                                 connects = (point.options &&
@@ -6841,7 +6853,7 @@
              *
              * @function Highcharts.Pathfinder#getChartObstacles
              *
-             * @param {object} options
+             * @param {Object} options
              *        Options for the calculation. Currenlty only
              *        options.algorithmMargin.
              *
@@ -6900,7 +6912,7 @@
              * @param {Array<object>} obstacles
              *        An array of obstacles to inspect.
              *
-             * @return {object}
+             * @return {Object}
              *         The calculated metrics, as an object with maxHeight and maxWidth
              *         properties.
              */
@@ -7030,11 +7042,11 @@
              *        The radius of the marker, to calculate the additional distance to
              *        the center of the marker.
              *
-             * @param {object} anchor
+             * @param {Object} anchor
              *        The anchor point of the path and marker as an object with x/y
              *        properties.
              *
-             * @return {object}
+             * @return {Object}
              *         The marker vector as an object with x/y properties.
              */
             getMarkerVector: function (radians, markerRadius, anchor) {
@@ -7231,7 +7243,9 @@
                     cutOff = seriesOpts.stacking && !seriesOpts.borderRadius,
                     diamondShape;
                 if (point.options.milestone) {
-                    if (isNumber(plotY) && point.y !== null && point.visible !== false) {
+                    if (isNumber(plotY) &&
+                        point.y !== null &&
+                        point.visible !== false) {
                         diamondShape = renderer.symbols.diamond(shapeArgs.x || 0, shapeArgs.y || 0, shapeArgs.width || 0, shapeArgs.height || 0);
                         if (graphic) {
                             graphic[verb]({
@@ -7351,8 +7365,6 @@
             return GanttSeries;
         }(XRangeSeries));
         extend(GanttSeries.prototype, {
-            // Keyboard navigation, don't use nearest vertical mode
-            keyboardMoveVertical: false,
             pointArrayMap: ['start', 'end', 'y'],
             pointClass: GanttPoint,
             setData: Series.prototype.setData
@@ -7570,10 +7582,9 @@
              *        Function to run when the chart has loaded and and all external
              *        images are loaded.
              *
-             * @return {void}
              *
-             * @fires Highcharts.GanttChart#event:init
-             * @fires Highcharts.GanttChart#event:afterInit
+             * @emits Highcharts.GanttChart#event:init
+             * @emits Highcharts.GanttChart#event:afterInit
              */
             GanttChart.prototype.init = function (userOptions, callback) {
                 var defaultOptions = getOptions(),
@@ -7638,7 +7649,8 @@
                         reversed: true,
                         // Set default type treegrid, but only if 'categories' is
                         // undefined
-                        type: yAxisOptions.categories ? yAxisOptions.type : 'treegrid'
+                        type: yAxisOptions.categories ?
+                            yAxisOptions.type : 'treegrid'
                     }, yAxisOptions // user options
                     );
                 });
@@ -7782,7 +7794,8 @@
                                 from = unitedMin + range * (1 - this.to);
                             }
                             if (this.shouldUpdateExtremes(e.DOMType)) {
-                                axis.setExtremes(from, to, true, e.DOMType !== 'mousemove' && e.DOMType !== 'touchmove', e);
+                                axis.setExtremes(from, to, true, (e.DOMType !== 'mousemove' &&
+                                    e.DOMType !== 'touchmove'), e);
                             }
                             else {
                                 // When live redraw is disabled, don't change extremes
@@ -7799,7 +7812,7 @@
                         scrollMin = _a.scrollMin,
                         scrollMax = _a.scrollMax,
                         scrollbar = axis.scrollbar,
-                        offset = axis.axisTitleMargin + (axis.titleOffset || 0),
+                        offset = (axis.axisTitleMargin + (axis.titleOffset || 0)),
                         scrollbarsOffsets = axis.chart.scrollbarsOffsets,
                         axisMargin = axis.options.margin || 0,
                         offsetsIndex,
@@ -7811,8 +7824,11 @@
                             if (!axis.opposite) {
                                 scrollbarsOffsets[1] += offset;
                             }
-                            scrollbar.position(axis.left, axis.top + axis.height + 2 + scrollbarsOffsets[1] -
-                                (axis.opposite ? axisMargin : 0), axis.width, axis.height);
+                            scrollbar.position(axis.left, (axis.top +
+                                axis.height +
+                                2 +
+                                scrollbarsOffsets[1] -
+                                (axis.opposite ? axisMargin : 0)), axis.width, axis.height);
                             // Next scrollbar should reserve space for margin (if set)
                             if (!axis.opposite) {
                                 scrollbarsOffsets[1] += axisMargin;
@@ -7824,8 +7840,18 @@
                             if (axis.opposite) {
                                 scrollbarsOffsets[0] += offset;
                             }
-                            scrollbar.position(axis.left + axis.width + 2 + scrollbarsOffsets[0] -
-                                (axis.opposite ? 0 : axisMargin), axis.top, axis.width, axis.height);
+                            var xPosition = void 0;
+                            if (!scrollbar.options.opposite) {
+                                xPosition = axis.opposite ? 0 : axisMargin;
+                            }
+                            else {
+                                xPosition = axis.left +
+                                    axis.width +
+                                    2 +
+                                    scrollbarsOffsets[0] -
+                                    (axis.opposite ? 0 : axisMargin);
+                            }
+                            scrollbar.position(xPosition, axis.top, axis.width, axis.height);
                             // Next scrollbar should reserve space for margin (if set)
                             if (axis.opposite) {
                                 scrollbarsOffsets[0] += axisMargin;
@@ -7846,10 +7872,10 @@
                             scrollbar.setRange(0, 1);
                         }
                         else {
-                            from =
-                                (axis.min - scrollMin) / (scrollMax - scrollMin);
-                            to =
-                                (axis.max - scrollMin) / (scrollMax - scrollMin);
+                            from = ((axis.min - scrollMin) /
+                                (scrollMax - scrollMin));
+                            to = ((axis.max - scrollMin) /
+                                (scrollMax - scrollMin));
                             if ((axis.horiz && !axis.reversed) ||
                                 (!axis.horiz && axis.reversed)) {
                                 scrollbar.setRange(from, to);
@@ -7864,10 +7890,12 @@
                 // Make space for a scrollbar:
                 addEvent(AxisClass, 'afterGetOffset', function () {
                     var axis = this,
-                        index = axis.horiz ? 2 : 1,
+                        opposite = axis.scrollbar && !axis.scrollbar.options.opposite,
+                        index = axis.horiz ? 2 : opposite ? 3 : 1,
                         scrollbar = axis.scrollbar;
                     if (scrollbar) {
-                        axis.chart.scrollbarsOffsets = [0, 0]; // reset scrollbars offsets
+                        // reset scrollbars offsets
+                        axis.chart.scrollbarsOffsets = [0, 0];
                         axis.chart.axisOffset[index] +=
                             scrollbar.size + scrollbar.options.margin;
                     }
@@ -7880,7 +7908,7 @@
 
         return ScrollbarAxis;
     });
-    _registerModule(_modules, 'Core/ScrollbarDefaults.js', [_modules['Core/Globals.js'], _modules['Core/Color/Palette.js']], function (H, Palette) {
+    _registerModule(_modules, 'Core/ScrollbarDefaults.js', [_modules['Core/Globals.js']], function (H) {
         /* *
          *
          *  (c) 2010-2021 Torstein Honsi
@@ -7979,6 +8007,8 @@
                  * @since 1.2.5
                  */
                 minWidth: 6,
+                /** @ignore-option */
+                opposite: true,
                 /**
                  * Whether to show or hide the scrollbar when the scrolled content is
                  * zoomed out to it full extent.
@@ -8000,7 +8030,7 @@
                  *
                  * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
                  */
-                barBackgroundColor: Palette.neutralColor20,
+                barBackgroundColor: "#cccccc" /* neutralColor20 */,
                 /**
                  * The width of the bar's border.
                  *
@@ -8013,7 +8043,7 @@
                  *
                  * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
                  */
-                barBorderColor: Palette.neutralColor20,
+                barBorderColor: "#cccccc" /* neutralColor20 */,
                 /**
                  * The color of the small arrow inside the scrollbar buttons.
                  *
@@ -8022,7 +8052,7 @@
                  *
                  * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
                  */
-                buttonArrowColor: Palette.neutralColor80,
+                buttonArrowColor: "#333333" /* neutralColor80 */,
                 /**
                  * The color of scrollbar buttons.
                  *
@@ -8031,7 +8061,7 @@
                  *
                  * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
                  */
-                buttonBackgroundColor: Palette.neutralColor10,
+                buttonBackgroundColor: "#e6e6e6" /* neutralColor10 */,
                 /**
                  * The color of the border of the scrollbar buttons.
                  *
@@ -8040,7 +8070,7 @@
                  *
                  * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
                  */
-                buttonBorderColor: Palette.neutralColor20,
+                buttonBorderColor: "#cccccc" /* neutralColor20 */,
                 /**
                  * The border width of the scrollbar buttons.
                  *
@@ -8053,7 +8083,7 @@
                  *
                  * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
                  */
-                rifleColor: Palette.neutralColor80,
+                rifleColor: "#333333" /* neutralColor80 */,
                 /**
                  * The color of the track background.
                  *
@@ -8062,7 +8092,7 @@
                  *
                  * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
                  */
-                trackBackgroundColor: Palette.neutralColor5,
+                trackBackgroundColor: "#f2f2f2" /* neutralColor5 */,
                 /**
                  * The color of the border of the scrollbar track.
                  *
@@ -8071,7 +8101,7 @@
                  *
                  * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
                  */
-                trackBorderColor: Palette.neutralColor5,
+                trackBorderColor: "#f2f2f2" /* neutralColor5 */,
                 /**
                  * The corner radius of the border of the scrollbar track.
                  *
@@ -8232,10 +8262,16 @@
                     mouseUpHandler = this.mouseUpHandler.bind(this);
                 // Mouse events
                 var _events = [
-                        [buttons[buttonsOrder[0]].element, 'click',
-                    this.buttonToMinClick.bind(this)],
-                        [buttons[buttonsOrder[1]].element, 'click',
-                    this.buttonToMaxClick.bind(this)],
+                        [
+                            buttons[buttonsOrder[0]].element,
+                            'click',
+                            this.buttonToMinClick.bind(this)
+                        ],
+                        [
+                            buttons[buttonsOrder[1]].element,
+                            'click',
+                            this.buttonToMaxClick.bind(this)
+                        ],
                         [track, 'click',
                     this.trackClick.bind(this)],
                         [bar, 'mousedown',
@@ -8257,7 +8293,8 @@
             };
             Scrollbar.prototype.buttonToMaxClick = function (e) {
                 var scroller = this;
-                var range = (scroller.to - scroller.from) * pick(scroller.options.step, 0.2);
+                var range = ((scroller.to - scroller.from) *
+                        pick(scroller.options.step, 0.2));
                 scroller.updatePosition(scroller.from + range, scroller.to + range);
                 fireEvent(scroller, 'changed', {
                     from: scroller.from,
@@ -8310,7 +8347,6 @@
              *
              * @private
              * @function Highcharts.Scrollbar#destroy
-             * @return {void}
              */
             Scrollbar.prototype.destroy = function () {
                 var scroller = this,
@@ -8343,7 +8379,6 @@
              * @function Highcharts.Scrollbar#drawScrollbarButton
              * @param {number} index
              *        0 is left, 1 is right
-             * @return {void}
              */
             Scrollbar.prototype.drawScrollbarButton = function (index) {
                 var scroller = this,
@@ -8436,7 +8471,8 @@
                 var scroller = this,
                     normalizedEvent = scroller.chart.pointer.normalize(e),
                     options = scroller.options,
-                    direction = options.vertical ? 'chartY' : 'chartX',
+                    direction = options.vertical ?
+                        'chartY' : 'chartX',
                     initPositions = scroller.initPositions || [];
                 var scrollPosition,
                     chartPosition,
@@ -8497,7 +8533,6 @@
              *        width of the scrollbar
              * @param {number} height
              *        height of the scorllbar
-             * @return {void}
              */
             Scrollbar.prototype.position = function (x, y, width, height) {
                 var scroller = this,
@@ -8546,7 +8581,6 @@
              *
              * @private
              * @function Highcharts.Scrollbar#removeEvents
-             * @return {void}
              */
             Scrollbar.prototype.removeEvents = function () {
                 this._events.forEach(function (args) {
@@ -8638,7 +8672,6 @@
              *        scale (0-1) where bar should start
              * @param {number} to
              *        scale (0-1) where bar should end
-             * @return {void}
              */
             Scrollbar.prototype.setRange = function (from, to) {
                 var scroller = this,
@@ -8717,8 +8750,6 @@
              *
              * @private
              * @function Highcharts.Scrollbar#shouldUpdateExtremes
-             * @param {string} [eventType]
-             * @return {boolean}
              */
             Scrollbar.prototype.shouldUpdateExtremes = function (eventType) {
                 return (pick(this.options.liveRedraw, H.svg && !H.isTouchDevice && !this.chart.isBoosting) ||
@@ -8768,7 +8799,6 @@
              * @function Highcharts.Scrollbar#updatePosition
              * @param  {number} from
              * @param  {number} to
-             * @return {void}
              */
             Scrollbar.prototype.updatePosition = function (from, to) {
                 if (to > 1) {
@@ -8804,7 +8834,7 @@
 
         return Scrollbar;
     });
-    _registerModule(_modules, 'Extensions/RangeSelector.js', [_modules['Core/Axis/Axis.js'], _modules['Core/Chart/Chart.js'], _modules['Core/Globals.js'], _modules['Core/DefaultOptions.js'], _modules['Core/Color/Palette.js'], _modules['Core/Renderer/SVG/SVGElement.js'], _modules['Core/Utilities.js']], function (Axis, Chart, H, D, palette, SVGElement, U) {
+    _registerModule(_modules, 'Extensions/RangeSelector.js', [_modules['Core/Axis/Axis.js'], _modules['Core/Chart/Chart.js'], _modules['Core/Globals.js'], _modules['Core/DefaultOptions.js'], _modules['Core/Renderer/SVG/SVGElement.js'], _modules['Core/Utilities.js']], function (Axis, Chart, H, D, SVGElement, U) {
         /* *
          *
          *  (c) 2010-2021 Torstein Honsi
@@ -9294,7 +9324,7 @@
                  */
                 inputStyle: {
                     /** @ignore */
-                    color: palette.highlightColor80,
+                    color: "#335cad" /* highlightColor80 */,
                     /** @ignore */
                     cursor: 'pointer'
                 },
@@ -9311,7 +9341,7 @@
                  */
                 labelStyle: {
                     /** @ignore */
-                    color: palette.neutralColor60
+                    color: "#666666" /* neutralColor60 */
                 }
             }
         });
@@ -9394,7 +9424,6 @@
              * @param {number} i
              *        The index of the button
              * @param {boolean} [redraw]
-             * @return {void}
              */
             RangeSelector.prototype.clickButton = function (i, redraw) {
                 var rangeSelector = this,
@@ -9492,7 +9521,8 @@
                     // If the navigator exist and the axis range is declared reset that
                     // range and from now on only use the range set by a user, #14742.
                     if (chart.navigator && chart.navigator.baseSeries[0]) {
-                        chart.navigator.baseSeries[0].xAxis.options.range = void 0;
+                        chart.navigator.baseSeries[0].xAxis.options
+                            .range = void 0;
                     }
                     newMin = dataMin;
                     newMax = dataMax;
@@ -9537,7 +9567,6 @@
              * @private
              * @function Highcharts.RangeSelector#setSelected
              * @param {number} [selected]
-             * @return {void}
              */
             RangeSelector.prototype.setSelected = function (selected) {
                 this.selected = this.options.selected = selected;
@@ -9548,12 +9577,11 @@
              * @private
              * @function Highcharts.RangeSelector#init
              * @param {Highcharts.Chart} chart
-             * @return {void}
              */
             RangeSelector.prototype.init = function (chart) {
                 var rangeSelector = this,
                     options = chart.options.rangeSelector,
-                    buttonOptions = options.buttons || rangeSelector.defaultButtons.slice(),
+                    buttonOptions = (options.buttons || rangeSelector.defaultButtons.slice()),
                     selectedOption = options.selected,
                     blurInputs = function () {
                         var minInput = rangeSelector.minInput,
@@ -9603,7 +9631,6 @@
              *
              * @private
              * @function Highcharts.RangeSelector#updateButtonStates
-             * @return {void}
              */
             RangeSelector.prototype.updateButtonStates = function () {
                 var rangeSelector = this,
@@ -9709,7 +9736,6 @@
              * @private
              * @function Highcharts.RangeSelector#computeButtonRange
              * @param {Highcharts.RangeSelectorButtonsOptions} rangeOptions
-             * @return {void}
              */
             RangeSelector.prototype.computeButtonRange = function (rangeOptions) {
                 var type = rangeOptions.type,
@@ -9744,12 +9770,11 @@
              *
              * @private
              * @function Highcharts.RangeSelector#getInputValue
-             * @param {string} name
-             * @return {number}
              */
             RangeSelector.prototype.getInputValue = function (name) {
                 var input = name === 'min' ? this.minInput : this.maxInput;
-                var options = this.chart.options.rangeSelector;
+                var options = this.chart.options
+                        .rangeSelector;
                 var time = this.chart.time;
                 if (input) {
                     return ((input.type === 'text' && options.inputDateParser) ||
@@ -9762,9 +9787,6 @@
              *
              * @private
              * @function Highcharts.RangeSelector#setInputValue
-             * @param {string} name
-             * @param {number} [inputTime]
-             * @return {void}
              */
             RangeSelector.prototype.setInputValue = function (name, inputTime) {
                 var options = this.options, time = this.chart.time, input = name === 'min' ? this.minInput : this.maxInput, dateBox = name === 'min' ? this.minDateBox : this.maxDateBox;
@@ -9779,7 +9801,8 @@
                         input.setAttribute('data-hc-time', inputTime);
                         updatedTime = inputTime;
                     }
-                    input.value = time.dateFormat(this.inputTypeFormats[input.type] || options.inputEditDateFormat, updatedTime);
+                    input.value = time.dateFormat((this.inputTypeFormats[input.type] ||
+                        options.inputEditDateFormat), updatedTime);
                     if (dateBox) {
                         dateBox.attr({
                             text: time.dateFormat(options.inputDateFormat, updatedTime)
@@ -9792,10 +9815,6 @@
              *
              * @private
              * @function Highcharts.RangeSelector#setInputExtremes
-             * @param {string} name
-             * @param {number} min
-             * @param {number} max
-             * @return {void}
              */
             RangeSelector.prototype.setInputExtremes = function (name, min, max) {
                 var input = name === 'min' ? this.minInput : this.maxInput;
@@ -9820,7 +9839,6 @@
              * @private
              * @function Highcharts.RangeSelector#showInput
              * @param {string} name
-             * @return {void}
              */
             RangeSelector.prototype.showInput = function (name) {
                 var dateBox = name === 'min' ? this.minDateBox : this.maxDateBox;
@@ -9832,7 +9850,9 @@
                         translateY = _a.translateY;
                     var inputBoxWidth = this.options.inputBoxWidth;
                     css(input, {
-                        width: isTextInput ? ((dateBox.width + (inputBoxWidth ? -2 : 20)) + 'px') : 'auto',
+                        width: isTextInput ?
+                            ((dateBox.width + (inputBoxWidth ? -2 : 20)) + 'px') :
+                            'auto',
                         height: isTextInput ? ((dateBox.height - 2) + 'px') : 'auto',
                         border: '2px solid silver'
                     });
@@ -9858,7 +9878,6 @@
              * @private
              * @function Highcharts.RangeSelector#hideInput
              * @param {string} name
-             * @return {void}
              */
             RangeSelector.prototype.hideInput = function (name) {
                 var input = name === 'min' ? this.minInput : this.maxInput;
@@ -9910,8 +9929,6 @@
              *
              * @private
              * @function Highcharts.RangeSelector#drawInput
-             * @param {string} name
-             * @return {RangeSelectorInputElements}
              */
             RangeSelector.prototype.drawInput = function (name) {
                 var _a = this,
@@ -10014,7 +10031,7 @@
                     // Styles
                     label.css(merge(chartStyle, options.labelStyle));
                     dateBox.css(merge({
-                        color: palette.neutralColor80
+                        color: "#333333" /* neutralColor80 */
                     }, chartStyle, options.inputStyle));
                     css(input, extend({
                         position: 'absolute',
@@ -10080,8 +10097,6 @@
              *
              * @private
              * @function Highcharts.RangeSelector#getPosition
-             *
-             * @return {Highcharts.Dictionary<number>}
              */
             RangeSelector.prototype.getPosition = function () {
                 var chart = this.chart,
@@ -10101,13 +10116,8 @@
              *
              * @private
              * @function Highcharts.RangeSelector#getYTDExtremes
-             *
-             * @param {number} dataMax
-             *
-             * @param {number} dataMin
-             *
              * @return {*}
-             *         Returns min and max for the YTD
+             * Returns min and max for the YTD
              */
             RangeSelector.prototype.getYTDExtremes = function (dataMax, dataMin, useUTC) {
                 var time = this.chart.time,
@@ -10136,7 +10146,6 @@
              *        X axis minimum
              * @param {number} [max]
              *        X axis maximum
-             * @return {void}
              */
             RangeSelector.prototype.render = function (min, max) {
                 var chart = this.chart,
@@ -10190,7 +10199,8 @@
                     this.setInputValue('min', min);
                     this.setInputValue('max', max);
                     var unionExtremes = (chart.scroller && chart.scroller.getUnionExtremes()) || chart.xAxis[0] || {};
-                    if (defined(unionExtremes.dataMin) && defined(unionExtremes.dataMax)) {
+                    if (defined(unionExtremes.dataMin) &&
+                        defined(unionExtremes.dataMax)) {
                         var minRange = chart.xAxis[0].minRange || 0;
                         this.setInputExtremes('min', unionExtremes.dataMin, Math.min(unionExtremes.dataMax, this.getInputValue('max')) - minRange);
                         this.setInputExtremes('max', Math.max(unionExtremes.dataMin, this.getInputValue('min')) + minRange, unionExtremes.dataMax);
@@ -10223,7 +10233,6 @@
              *
              * @private
              * @function Highcharts.RangeSelector#renderButtons
-             * @return {void}
              */
             RangeSelector.prototype.renderButtons = function () {
                 var _this = this;
@@ -10324,7 +10333,6 @@
              *
              * @private
              * @function Highcharts.RangeSelector#alignElements
-             * @return {void}
              */
             RangeSelector.prototype.alignElements = function () {
                 var _this = this;
@@ -10480,7 +10488,6 @@
              * @function Highcharts.RangeSelector#alignButtonGroup
              * @param {number} xOffsetForExportButton
              * @param {number} [width]
-             * @return {void}
              */
             RangeSelector.prototype.alignButtonGroup = function (xOffsetForExportButton, width) {
                 var _a = this,
@@ -10510,7 +10517,6 @@
             /**
              * @private
              * @function Highcharts.RangeSelector#positionButtons
-             * @return {void}
              */
             RangeSelector.prototype.positionButtons = function () {
                 var _a = this,
@@ -10551,7 +10557,6 @@
              * @param  {number} xOffsetForExportButton
              *                  The X offset of the group required to make room for the
              *                  exporting button
-             * @return {void}
              */
             RangeSelector.prototype.handleCollision = function (xOffsetForExportButton) {
                 var _this = this;
@@ -10652,7 +10657,6 @@
              * @private
              * @function Highcharts.RangeSelector#collapseButtons
              * @param {number} xOffsetForExportButton
-             * @return {void}
              */
             RangeSelector.prototype.collapseButtons = function (xOffsetForExportButton) {
                 var _a = this,
@@ -10706,7 +10710,6 @@
              *
              * @private
              * @function Highcharts.RangeSelector#expandButtons
-             * @return {void}
              */
             RangeSelector.prototype.expandButtons = function () {
                 var _a = this,
@@ -10738,7 +10741,6 @@
              *
              * @private
              * @function Highcharts.RangeSelector#currentButtonIndex
-             * @return {number}
              */
             RangeSelector.prototype.currentButtonIndex = function () {
                 var dropdown = this.dropdown;
@@ -10752,7 +10754,6 @@
              *
              * @private
              * @function Highcharts.RangeSelector#showDropdown
-             * @return {void}
              */
             RangeSelector.prototype.showDropdown = function () {
                 var _a = this,
@@ -10776,7 +10777,6 @@
             /**
              * @private
              * @function Highcharts.RangeSelector#hideDropdown
-             * @return {void}
              */
             RangeSelector.prototype.hideDropdown = function () {
                 var dropdown = this.dropdown;
@@ -10795,7 +10795,7 @@
              * @private
              * @function Highcharts.RangeSelector#getHeight
              * @return {number}
-             *         Returns rangeSelector height
+             * Returns rangeSelector height
              */
             RangeSelector.prototype.getHeight = function () {
                 var rangeSelector = this,
@@ -10831,11 +10831,8 @@
              *
              * @private
              * @function Highcharts.RangeSelector#titleCollision
-             *
-             * @param {Highcharts.Chart} chart
-             *
              * @return {boolean}
-             *         Returns collision status
+             * Returns collision status
              */
             RangeSelector.prototype.titleCollision = function (chart) {
                 return !(chart.options.title.text ||
@@ -10847,7 +10844,6 @@
              * @private
              * @function Highcharts.RangeSelector#update
              * @param {Highcharts.RangeSelectorOptions} options
-             * @return {void}
              */
             RangeSelector.prototype.update = function (options) {
                 var chart = this.chart;
@@ -10943,17 +10939,14 @@
          *
          * @private
          * @function preferredInputType
-         * @param {string} format
-         * @return {string}
          */
         function preferredInputType(format) {
             var ms = format.indexOf('%L') !== -1;
             if (ms) {
                 return 'text';
             }
-            var date = ['a', 'A', 'd', 'e', 'w', 'b', 'B', 'm', 'o', 'y', 'Y'].some(function (char) {
-                    return format.indexOf('%' + char) !== -1;
-            });
+            var date = ['a', 'A', 'd', 'e', 'w', 'b', 'B', 'm', 'o', 'y', 'Y']
+                    .some(function (char) { return format.indexOf('%' + char) !== -1; });
             var time = ['H', 'k', 'I', 'l', 'M', 'S'].some(function (char) {
                     return format.indexOf('%' + char) !== -1;
             });
@@ -10990,7 +10983,8 @@
                 // Get the true range from a start date
                 getTrueRange = function (base,
                 count) {
-                    var timeName = type === 'year' ? 'FullYear' : 'Month';
+                    var timeName = type === 'year' ?
+                        'FullYear' : 'Month';
                 var date = new time.Date(base);
                 var basePeriod = time.get(timeName,
                     date);
@@ -11244,11 +11238,6 @@
              *
              * @private
              * @function Highcharts.Axis#toFixedRange
-             * @param {number} [pxMin]
-             * @param {number} [pxMax]
-             * @param {number} [fixedMin]
-             * @param {number} [fixedMax]
-             * @return {*}
              */
             NavigatorAxisAdditions.prototype.toFixedRange = function (pxMin, pxMax, fixedMin, fixedMax) {
                 var navigator = this;
@@ -11373,7 +11362,7 @@
 
         return NavigatorAxis;
     });
-    _registerModule(_modules, 'Core/Navigator.js', [_modules['Core/Axis/Axis.js'], _modules['Core/Chart/Chart.js'], _modules['Core/Color/Color.js'], _modules['Core/Globals.js'], _modules['Core/Axis/NavigatorAxis.js'], _modules['Core/DefaultOptions.js'], _modules['Core/Color/Palette.js'], _modules['Core/Renderer/RendererRegistry.js'], _modules['Core/Scrollbar.js'], _modules['Core/Series/Series.js'], _modules['Core/Series/SeriesRegistry.js'], _modules['Core/Utilities.js']], function (Axis, Chart, Color, H, NavigatorAxis, D, Palette, RendererRegistry, Scrollbar, Series, SeriesRegistry, U) {
+    _registerModule(_modules, 'Core/Navigator.js', [_modules['Core/Axis/Axis.js'], _modules['Core/Chart/Chart.js'], _modules['Core/Color/Color.js'], _modules['Core/Globals.js'], _modules['Core/Axis/NavigatorAxis.js'], _modules['Core/DefaultOptions.js'], _modules['Core/Renderer/RendererRegistry.js'], _modules['Core/Scrollbar.js'], _modules['Core/Series/Series.js'], _modules['Core/Series/SeriesRegistry.js'], _modules['Core/Utilities.js']], function (Axis, Chart, Color, H, NavigatorAxis, D, RendererRegistry, Scrollbar, Series, SeriesRegistry, U) {
         /* *
          *
          *  (c) 2010-2021 Torstein Honsi
@@ -11581,13 +11570,13 @@
                      *
                      * @type    {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
                      */
-                    backgroundColor: Palette.neutralColor5,
+                    backgroundColor: "#f2f2f2" /* neutralColor5 */,
                     /**
                      * The stroke for the handle border and the stripes inside.
                      *
                      * @type    {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
                      */
-                    borderColor: Palette.neutralColor40
+                    borderColor: "#999999" /* neutralColor40 */
                 },
                 /**
                  * The color of the mask covering the areas of the navigator series
@@ -11604,7 +11593,7 @@
                  * @type    {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
                  * @default rgba(102,133,194,0.3)
                  */
-                maskFill: color(Palette.highlightColor60).setOpacity(0.3).get(),
+                maskFill: color("#6685c2" /* highlightColor60 */).setOpacity(0.3).get(),
                 /**
                  * The color of the line marking the currently zoomed area in the
                  * navigator.
@@ -11615,7 +11604,7 @@
                  * @type    {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
                  * @default #cccccc
                  */
-                outlineColor: Palette.neutralColor20,
+                outlineColor: "#cccccc" /* neutralColor20 */,
                 /**
                  * The width of the line marking the currently zoomed area in the
                  * navigator.
@@ -11806,7 +11795,7 @@
                     className: 'highcharts-navigator-xaxis',
                     tickLength: 0,
                     lineWidth: 0,
-                    gridLineColor: Palette.neutralColor10,
+                    gridLineColor: "#e6e6e6" /* neutralColor10 */,
                     gridLineWidth: 1,
                     tickPixelInterval: 200,
                     labels: {
@@ -11816,7 +11805,7 @@
                          */
                         style: {
                             /** @ignore */
-                            color: Palette.neutralColor40
+                            color: "#999999" /* neutralColor40 */
                         },
                         x: 3,
                         y: -4
@@ -11999,17 +11988,32 @@
                     verticalMin = navigatorTop + zoomedMax + outlineCorrection;
                     zoomedMax = navigatorTop + zoomedMin + outlineCorrection;
                     path = [
-                        ['M', left + outlineHeight, navigatorTop - scrollbarHeight - outlineCorrection],
+                        [
+                            'M',
+                            left + outlineHeight,
+                            navigatorTop - scrollbarHeight - outlineCorrection
+                        ],
+                        // top right of zoomed range
                         ['L', left + outlineHeight, verticalMin],
                         ['L', left, verticalMin],
                         ['L', left, zoomedMax],
                         ['L', left + outlineHeight, zoomedMax],
-                        ['L', left + outlineHeight, navigatorTop + navigatorSize + scrollbarHeight]
+                        [
+                            'L',
+                            left + outlineHeight,
+                            navigatorTop + navigatorSize + scrollbarHeight
+                        ]
                     ];
                     if (maskInside) {
-                        path.push(['M', left + outlineHeight, verticalMin - halfOutline], // upper left of zoomed range
-                        ['L', left + outlineHeight, zoomedMax + halfOutline] // upper right of z.r.
-                        );
+                        path.push(
+                        // upper left of zoomed range
+                        ['M', left + outlineHeight, verticalMin - halfOutline], 
+                        // upper right of z.r.
+                        [
+                            'L',
+                            left + outlineHeight,
+                            zoomedMax + halfOutline
+                        ]);
                     }
                 }
                 else {
@@ -12017,17 +12021,25 @@
                     zoomedMax += left + scrollbarHeight - outlineCorrection;
                     navigatorTop += halfOutline;
                     path = [
+                        // left
                         ['M', left, navigatorTop],
+                        // upper left of zoomed range
                         ['L', zoomedMin, navigatorTop],
+                        // lower left of z.r.
                         ['L', zoomedMin, navigatorTop + outlineHeight],
+                        // lower right of z.r.
                         ['L', zoomedMax, navigatorTop + outlineHeight],
+                        // upper right of z.r.
                         ['L', zoomedMax, navigatorTop],
-                        ['L', left + navigatorSize + scrollbarHeight * 2, navigatorTop] // right
+                        // right
+                        ['L', left + navigatorSize + scrollbarHeight * 2, navigatorTop]
                     ];
                     if (maskInside) {
-                        path.push(['M', zoomedMin - halfOutline, navigatorTop], // upper left of zoomed range
-                        ['L', zoomedMax + halfOutline, navigatorTop] // upper right of z.r.
-                        );
+                        path.push(
+                        // upper left of zoomed range
+                        ['M', zoomedMin - halfOutline, navigatorTop], 
+                        // upper right of z.r.
+                        ['L', zoomedMax + halfOutline, navigatorTop]);
                     }
                 }
                 navigator.outline[verb]({
@@ -12213,7 +12225,6 @@
              *        Pixel value minimum
              * @param {number} [pxMax]
              *        Pixel value maximum
-             * @return {void}
              */
             Navigator.prototype.render = function (min, max, pxMin, pxMax) {
                 var navigator = this,
@@ -12490,7 +12501,6 @@
              *        Mouse event
              * @param {number} index
              *        Index of a handle in Navigator.handles array
-             * @return {void}
              */
             Navigator.prototype.handlesMousedown = function (e, index) {
                 e = this.chart.pointer.normalize(e);
@@ -12586,7 +12596,6 @@
              * @function Highcharts.Navigator#onMouseUp
              * @param {Highcharts.PointerEventObject} e
              *        Mouse event
-             * @return {void}
              */
             Navigator.prototype.onMouseUp = function (e) {
                 var navigator = this,
@@ -12673,7 +12682,6 @@
              *
              * @private
              * @function Highcharts.Navigator#removeEvents
-             * @return {void}
              */
             Navigator.prototype.removeEvents = function () {
                 if (this.eventsToUnbind) {
@@ -12689,7 +12697,6 @@
              *
              * @private
              * @function Highcharts.Navigator#removeBaseSeriesEvents
-             * @return {void}
              */
             Navigator.prototype.removeBaseSeriesEvents = function () {
                 var baseSeries = this.baseSeries || [];
@@ -12775,7 +12782,8 @@
                         offset: 0,
                         index: yAxisIndex,
                         isInternal: true,
-                        reversed: pick((navigatorOptions.yAxis && navigatorOptions.yAxis.reversed), (chart.yAxis[0] && chart.yAxis[0].reversed), false),
+                        reversed: pick((navigatorOptions.yAxis &&
+                            navigatorOptions.yAxis.reversed), (chart.yAxis[0] && chart.yAxis[0].reversed), false),
                         zoomEnabled: false
                     }, chart.inverted ? {
                         width: height
@@ -12857,9 +12865,6 @@
              *
              * @private
              * @function Highcharts.Navigator#getUnionExtremes
-             * @param {boolean} [returnFalseOnNoBaseSeries]
-             *        as the param says.
-             * @return {Highcharts.Dictionary<(number|undefined)>|undefined}
              */
             Navigator.prototype.getUnionExtremes = function (returnFalseOnNoBaseSeries) {
                 var baseAxis = this.chart.xAxis[0],
@@ -12887,7 +12892,6 @@
              *        Additional series options for a navigator
              * @param {boolean} [redraw]
              *        Whether to redraw after update.
-             * @return {void}
              */
             Navigator.prototype.setBaseSeries = function (baseSeriesOptions, redraw) {
                 var chart = this.chart,
@@ -12926,7 +12930,6 @@
              * @function Highcharts.Navigator.updateNavigatorSeries
              * @param {boolean} addEvents
              * @param {boolean} [redraw]
-             * @return {void}
              */
             Navigator.prototype.updateNavigatorSeries = function (addEvents, redraw) {
                 var navigator = this,
@@ -13067,7 +13070,6 @@
              *
              * @private
              * @function Highcharts.Navigator#addBaseSeriesEvent
-             * @return {void}
              */
             Navigator.prototype.addBaseSeriesEvents = function () {
                 var navigator = this,
@@ -13243,7 +13245,7 @@
                     // If range declared, stick to the minimum only if the range
                     // is smaller than the data set range.
                     if (range && max - xDataMin > 0) {
-                        stickToMin = max - xDataMin < range && (!this.chart.fixedRange);
+                        stickToMin = max - xDataMin < range;
                     }
                     else {
                         // If the current axis minimum falls outside the new
@@ -13261,7 +13263,6 @@
              *
              * @private
              * @function Highcharts.Navigator#addChartEvents
-             * @return {void}
              */
             Navigator.prototype.addChartEvents = function () {
                 if (!this.eventsToUnbind) {