highcharts 9.2.2 → 9.3.3

package/modules/stock.src.js

@@ -1,5 +1,5 @@
 /**
- * @license Highstock JS v9.2.2 (2021-08-24)
+ * @license Highstock JS v9.3.3 (2022-02-01)
  *
  * Highcharts Stock as a plugin for Highcharts
  *
@@ -250,12 +250,12 @@
                     while (i--) {
                         translated = translatedArr[i];
                         distance = Math.abs(lastTranslated - translated);
-                        // #4175 - when axis is reversed, the distance, is negative
-                        // but tickPixelIntervalOption positive, so we need to
-                        // compare the same values
+                        // #4175 - when axis is reversed, the distance, is negative but
+                        // tickPixelIntervalOption positive, so we need to compare the
+                        // same values
                         // Remove ticks that are closer than 0.6 times the pixel
-                        // interval from the one to the right, but not if it is
-                        // close to the median distance (#748).
+                        // interval from the one to the right, but not if it is close to
+                        // the median distance (#748).
                         if (lastTranslated &&
                             distance < tickPixelIntervalOption * 0.8 &&
                             (medianDistance === null || distance < medianDistance * 0.8)) {
@@ -287,11 +287,8 @@
              *
              * @private
              * @function Highcharts.Axis#index2val
-             *
              * @param {number} index
-             *        The index value of searched point
-             *
-             * @return {number}
+             * The index value of searched point
              */
             function index2val(index) {
                 var axis = this,
@@ -328,11 +325,8 @@
              *
              * @private
              * @function Highcharts.Axis#lin2val
-             *
              * @param {number} val
-             *        The linear abstracted value.
-             *
-             * @return {number}
+             * The linear abstracted value.
              */
             function lin2val(val) {
                 var axis = this,
@@ -345,37 +339,37 @@
                         return val;
                 }
                 // Convert back from modivied value to pixels. // #15970
-                var pixelVal = (val - localMin) * localA + axis.minPixelPadding,
+                var pixelVal = (val - localMin) * localA +
+                        axis.minPixelPadding,
                     isInside = pixelVal > 0 && pixelVal < axis.left + axis.len;
-                // If the value is not inside the plot area,
-                // use the extended positions.
+                // If the value is not inside the plot area, use the extended positions.
                 // (array contains also points that are outside of the plotArea).
                 if (!isInside) {
                     // When iterating for the first time,
                     // get the extended ordinal positional and assign them.
                     if (!ordinal.extendedOrdinalPositions) {
-                        ordinal.extendedOrdinalPositions = ordinal.getExtendedPositions();
+                        ordinal.extendedOrdinalPositions = (ordinal.getExtendedPositions());
                     }
                     positions = ordinal.extendedOrdinalPositions;
                 }
-                // In some cases (especially in early stages of the chart creation)
-                // the getExtendedPositions might return undefined.
+                // In some cases (especially in early stages of the chart creation) the
+                // getExtendedPositions might return undefined.
                 if (positions && positions.length) {
                     var index = ordinal.getIndexOfPoint(pixelVal,
                         positions),
                         mantissa = correctFloat(index % 1);
-                    // Check if the index is inside position array.
-                    // If true, read/approximate value for that exact index.
-                    if (index >= 0 && index < positions.length) {
+                    // Check if the index is inside position array. If true,
+                    // read/approximate value for that exact index.
+                    if (index >= 0 && index < positions.length - 1) {
                         var leftNeighbour = positions[Math.floor(index)],
                             rightNeighbour = positions[Math.ceil(index)],
                             distance = rightNeighbour - leftNeighbour;
                         return positions[Math.floor(index)] + mantissa * distance;
                     }
-                    // For cases when the index is not in the extended ordinal
-                    // position array, like when the value we are looking
-                    // for exceed the available data,
-                    // approximate that value based on the calculated slope.
+                    // For cases when the index is not in the extended ordinal position
+                    // array, like when the value we are looking for exceed the
+                    // available data, approximate that value based on the calculated
+                    // slope.
                     var positionsLength = positions.length,
                         firstPositionsValue = positions[0],
                         lastPositionsValue = positions[positionsLength - 1],
@@ -388,8 +382,8 @@
                 return val;
             }
             /**
-             * Internal function to calculate the precise index
-             * in ordinalPositions array.
+             * Internal function to calculate the precise index in ordinalPositions
+             * array.
              * @private
              */
             function getIndexInArray(ordinalPositions, val) {
@@ -460,9 +454,8 @@
                 }
             }
             /**
-             * @private
-             *
              * Extending the Chart.pan method for ordinal axes
+             * @private
              */
             function onChartPan(e) {
                 var chart = this,
@@ -488,7 +481,11 @@
                         // how many ordinal units did we move?
                         movedUnits = (mouseDownX - chartX) / pointPixelWidth, 
                         // get index of all the chart's points
-                        extendedAxis = { ordinal: { positions: xAxis.ordinal.getExtendedPositions() } },
+                        extendedAxis = {
+                            ordinal: {
+                                positions: xAxis.ordinal.getExtendedPositions()
+                            }
+                        },
                         index2val_1 = xAxis.index2val,
                         val2lin_1 = xAxis.val2lin;
                     var trimmedRange = void 0,
@@ -508,37 +505,41 @@
                         }
                         if (movedUnits < 0) {
                             searchAxisLeft = extendedAxis;
-                            searchAxisRight = xAxis.ordinal.positions ? xAxis : extendedAxis;
+                            searchAxisRight = xAxis.ordinal.positions ?
+                                xAxis : extendedAxis;
                         }
                         else {
-                            searchAxisLeft = xAxis.ordinal.positions ? xAxis : extendedAxis;
+                            searchAxisLeft = xAxis.ordinal.positions ?
+                                xAxis : extendedAxis;
                             searchAxisRight = extendedAxis;
                         }
-                        // In grouped data series, the last ordinal position
-                        // represents the grouped data, which is to the left of the
-                        // real data max. If we don't compensate for this, we will
-                        // be allowed to pan grouped data series passed the right of
-                        // the plot area.
+                        // In grouped data series, the last ordinal position represents
+                        // the grouped data, which is to the left of the real data max.
+                        // If we don't compensate for this, we will be allowed to pan
+                        // grouped data series passed the right of the plot area.
                         ordinalPositions = searchAxisRight.ordinal.positions;
                         if (dataMax >
                             ordinalPositions[ordinalPositions.length - 1]) {
                             ordinalPositions.push(dataMax);
                         }
-                        // Get the new min and max values by getting the ordinal
-                        // index for the current extreme, then add the moved units
-                        // and translate back to values. This happens on the
-                        // extended ordinal positions if the new position is out of
-                        // range, else it happens on the current x axis which is
-                        // smaller and faster.
+                        // Get the new min and max values by getting the ordinal index
+                        // for the current extreme, then add the moved units and
+                        // translate back to values. This happens on the extended
+                        // ordinal positions if the new position is out of range, else
+                        // it happens on the current x axis which is smaller and faster.
                         chart.fixedRange = max - min;
-                        trimmedRange = xAxis.navigatorAxis.toFixedRange(null, null, index2val_1.apply(searchAxisLeft, [
-                            val2lin_1.apply(searchAxisLeft, [min, true]) + movedUnits
+                        trimmedRange = xAxis.navigatorAxis
+                            .toFixedRange(void 0, void 0, index2val_1.apply(searchAxisLeft, [
+                            val2lin_1.apply(searchAxisLeft, [min, true]) +
+                                movedUnits
                         ]), index2val_1.apply(searchAxisRight, [
-                            val2lin_1.apply(searchAxisRight, [max, true]) + movedUnits
+                            val2lin_1.apply(searchAxisRight, [max, true]) +
+                                movedUnits
                         ]));
                         // Apply it if it is within the available data range
                         if (trimmedRange.min >= Math.min(extremes.dataMin, min) &&
-                            trimmedRange.max <= Math.max(dataMax, max) + overscroll) {
+                            trimmedRange.max <= Math.max(dataMax, max) +
+                                overscroll) {
                             xAxis.setExtremes(trimmedRange.min, trimmedRange.max, true, false, { trigger: 'pan' });
                         }
                         chart.mouseDownX = chartX; // set new reference for next run
@@ -578,14 +579,10 @@
              *
              * @private
              * @function Highcharts.Axis#val2lin
-             *
              * @param {number} val
              * The axis value.
-             *
              * @param {boolean} [toIndex]
              * Whether to return the index in the ordinalPositions or the new value.
-             *
-             * @return {number}
              */
             function val2lin(val, toIndex) {
                 var axis = this,
@@ -632,7 +629,8 @@
                         val <=
                             extendedOrdinalPositions[length_2 - 1]) {
                         // Return Value
-                        ordinalIndex = getIndexInArray(extendedOrdinalPositions, val) - originalPositionsReference;
+                        ordinalIndex = getIndexInArray(extendedOrdinalPositions, val) -
+                            originalPositionsReference;
                     }
                     else {
                         // Since ordinal.slope is the average distance between 2
@@ -706,7 +704,6 @@
                         maxIndex,
                         slope,
                         i,
-                        hasBoostedSeries,
                         ordinalPositions = [],
                         overscrollPointsRange = Number.MAX_VALUE,
                         useOrdinal = false;
@@ -715,7 +712,9 @@
                         axis.series.forEach(function (series, i) {
                             uniqueOrdinalPositions = [];
                             if ((!ignoreHiddenSeries || series.visible !== false) &&
-                                (series.takeOrdinalPosition !== false || hasBreaks)) {
+                                (series
+                                    .takeOrdinalPosition !== false ||
+                                    hasBreaks)) {
                                 // concatenate the processed X data into the existing
                                 // positions, or the empty array
                                 ordinalPositions = ordinalPositions.concat(series.processedXData);
@@ -731,25 +730,21 @@
                                 if (len) {
                                     i = 0;
                                     while (i < len - 1) {
-                                        if (ordinalPositions[i] !== ordinalPositions[i + 1]) {
+                                        if (ordinalPositions[i] !==
+                                            ordinalPositions[i + 1]) {
                                             uniqueOrdinalPositions.push(ordinalPositions[i + 1]);
                                         }
                                         i++;
                                     }
                                     // Check first item:
-                                    if (uniqueOrdinalPositions[0] !== ordinalPositions[0]) {
+                                    if (uniqueOrdinalPositions[0] !==
+                                        ordinalPositions[0]) {
                                         uniqueOrdinalPositions.unshift(ordinalPositions[0]);
                                     }
                                     ordinalPositions = uniqueOrdinalPositions;
                                 }
                             }
-                            if (series.isSeriesBoosting) {
-                                hasBoostedSeries = true;
-                            }
                         });
-                        if (hasBoostedSeries) {
-                            ordinalPositions.length = 0;
-                        }
                         // cache the length
                         len = ordinalPositions.length;
                         // Check if we really need the overhead of mapping axis data
@@ -759,7 +754,8 @@
                             dist = ordinalPositions[1] - ordinalPositions[0];
                             i = len - 1;
                             while (i-- && !useOrdinal) {
-                                if (ordinalPositions[i + 1] - ordinalPositions[i] !== dist) {
+                                if (ordinalPositions[i + 1] - ordinalPositions[i] !==
+                                    dist) {
                                     useOrdinal = true;
                                 }
                             }
@@ -768,8 +764,8 @@
                             // spaced.
                             if (!axis.options.keepOrdinalPadding &&
                                 (ordinalPositions[0] - min > dist ||
-                                    max - ordinalPositions[ordinalPositions.length - 1] >
-                                        dist)) {
+                                    (max -
+                                        ordinalPositions[ordinalPositions.length - 1]) > dist)) {
                                 useOrdinal = true;
                             }
                         }
@@ -947,11 +943,10 @@
                             fakeAxis.series.push(fakeSeries);
                             series.processData.apply(fakeSeries);
                         });
-                        // Apply grouping if needed.
-                        axis.applyGrouping.call(fakeAxis);
-                        // Force to use the ordinal when points are evenly spaced
-                        // (e.g. weeks), #3825.
-                        if (fakeSeries.closestPointRange !== fakeSeries.basePointRange &&
+                        // Force to use the ordinal when points are evenly spaced (e.g.
+                        // weeks), #3825.
+                        if ((fakeSeries.closestPointRange !==
+                            fakeSeries.basePointRange) &&
                             fakeSeries.currentDataGrouping) {
                             fakeAxis.forceOrdinal = true;
                         }
@@ -999,8 +994,8 @@
                     if (!groupIntervalFactor) {
                         // Register all the distances in an array
                         for (i = 0; i < len - 1; i++) {
-                            distances[i] =
-                                processedXData[i + 1] - processedXData[i];
+                            distances[i] = (processedXData[i + 1] -
+                                processedXData[i]);
                         }
                         // Sort them and find the median
                         distances.sort(function (a, b) {
@@ -1022,15 +1017,12 @@
                  *
                  * @private
                  * @param {number} val
-                 *        The pixel value of a point.
+                 * The pixel value of a point.
                  *
                  * @param {Array<number>} [ordinallArray]
-                 *        An array of all points available on the axis
-                 *        for the given data set.
-                 *        Either ordinalPositions if the value is inside the plotArea
-                 *        or extendedOrdinalPositions if not.
-                 *
-                 * @return {number}
+                 * An array of all points available on the axis for the given data set.
+                 * Either ordinalPositions if the value is inside the plotArea or
+                 * extendedOrdinalPositions if not.
                  */
                 Additions.prototype.getIndexOfPoint = function (val, ordinalArray) {
                     var ordinal = this,
@@ -1043,17 +1035,19 @@
                         // When more series assign to axis, find the smallest one, #15987.
                         if (axis.series.length > 1) {
                             axis.series.forEach(function (series) {
-                                if (defined(series.points[0]) &&
+                                if (series.points &&
+                                    defined(series.points[0]) &&
                                     defined(series.points[0].plotX) &&
                                     series.points[0].plotX < firstPointX) {
                                     firstPointX = series.points[0].plotX;
                             }
                         });
                     }
-                    // Distance in pixels between two points
-                    // on the ordinal axis in the current zoom.
-                    var ordinalPointPixelInterval = axis.translationSlope *
-                            (ordinal.slope || axis.closestPointRange || ordinal.overscrollPointsRange), 
+                    // Distance in pixels between two points on the ordinal axis in the
+                    // current zoom.
+                    var ordinalPointPixelInterval = axis.translationSlope * (ordinal.slope ||
+                            axis.closestPointRange ||
+                            ordinal.overscrollPointsRange), 
                         // toValue for the first point.
                         shiftIndex = (val - firstPointX) / ordinalPointPixelInterval;
                     return Additions.findIndexOf(ordinalArray, firstPointVal) + shiftIndex;
@@ -1089,19 +1083,20 @@
                  * @private
                  */
                 Additions.prototype.postProcessTickInterval = function (tickInterval) {
-                    // Problem: https://jsfiddle.net/highcharts/FQm4E/1/
-                    // This is a case where this algorithm doesn't work optimally. In
-                    // this case, the tick labels are spread out per week, but all the
-                    // gaps reside within weeks. So we have a situation where the labels
-                    // are courser than the ordinal gaps, and thus the tick interval
-                    // should not be altered.
+                    // Problem: https://jsfiddle.net/highcharts/FQm4E/1/. This is a case
+                    // where this algorithm doesn't work optimally. In this case, the
+                    // tick labels are spread out per week, but all the gaps reside
+                    // within weeks. So we have a situation where the labels are courser
+                    // than the ordinal gaps, and thus the tick interval should not be
+                    // altered.
                     var ordinal = this,
                         axis = ordinal.axis,
                         ordinalSlope = ordinal.slope;
                     var ret;
                     if (ordinalSlope) {
                         if (!axis.options.breaks) {
-                            ret = tickInterval / (ordinalSlope / axis.closestPointRange);
+                            ret = (tickInterval /
+                                (ordinalSlope / axis.closestPointRange));
                         }
                         else {
                             ret = axis.closestPointRange || tickInterval; // #7275
@@ -1124,33 +1119,33 @@
 
         return OrdinalAxis;
     });
-    _registerModule(_modules, 'Core/Axis/BrokenAxis.js', [_modules['Extensions/Stacking.js'], _modules['Core/Utilities.js']], function (StackItem, U) {
+    _registerModule(_modules, 'Series/DataModifyComposition.js', [_modules['Core/Axis/Axis.js'], _modules['Core/Series/Point.js'], _modules['Core/Series/Series.js'], _modules['Core/Utilities.js']], function (Axis, Point, Series, U) {
         /* *
          *
-         *  (c) 2009-2021 Torstein Honsi
+         *  (c) 2010-2021 Torstein Honsi
          *
          *  License: www.highcharts.com/license
          *
          *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
          *
          * */
+        var pointTooltipFormatter = Point.prototype.tooltipFormatter;
         var addEvent = U.addEvent,
-            find = U.find,
-            fireEvent = U.fireEvent,
+            arrayMax = U.arrayMax,
+            arrayMin = U.arrayMin,
+            correctFloat = U.correctFloat,
+            defined = U.defined,
             isArray = U.isArray,
             isNumber = U.isNumber,
+            isString = U.isString,
             pick = U.pick;
         /* *
          *
          *  Composition
          *
          * */
-        /**
-         * Axis with support of broken data rows.
-         * @private
-         */
-        var BrokenAxis;
-        (function (BrokenAxis) {
+        var DataModifyComposition;
+        (function (DataModifyComposition) {
             /* *
              *
              *  Declarations
@@ -1169,331 +1164,882 @@
              * */
             /* eslint-disable valid-jsdoc */
             /**
-             * Adds support for broken axes.
+             * Extends the series, axis and point classes with
+             * compare and cumulative support.
+             *
              * @private
+             *
+             * @param SeriesClass
+             * Series class to use.
+             *
+             * @param AxisClass
+             * Axis class to extend.
+             *
+             * @param PointClass
+             * Point class to use.
              */
-            function compose(AxisClass, SeriesClass) {
-                if (composedClasses.indexOf(AxisClass) === -1) {
-                    composedClasses.push(AxisClass);
-                    AxisClass.keepProps.push('brokenAxis');
-                    addEvent(AxisClass, 'init', onAxisInit);
-                    addEvent(AxisClass, 'afterInit', onAxisAfterInit);
-                    addEvent(AxisClass, 'afterSetTickPositions', onAxisAfterSetTickPositions);
-                    addEvent(AxisClass, 'afterSetOptions', onAxisAfterSetOptions);
-                }
+            function compose(SeriesClass, AxisClass, PointClass) {
                 if (composedClasses.indexOf(SeriesClass) === -1) {
                     composedClasses.push(SeriesClass);
                     var seriesProto = SeriesClass.prototype;
-                    seriesProto.drawBreaks = seriesDrawBreaks;
-                    seriesProto.gappedPath = seriesGappedPath;
-                    addEvent(SeriesClass, 'afterGeneratePoints', onSeriesAfterGeneratePoints);
-                    addEvent(SeriesClass, 'afterRender', onSeriesAfterRender);
+                    seriesProto.setCompare = seriesSetCompare;
+                    seriesProto.setCumulative = seriesSetCumulative;
+                    addEvent(SeriesClass, 'afterInit', afterInit);
+                    addEvent(SeriesClass, 'afterGetExtremes', afterGetExtremes);
+                    addEvent(SeriesClass, 'afterProcessData', afterProcessData);
                 }
-                return AxisClass;
+                if (composedClasses.indexOf(AxisClass) === -1) {
+                    composedClasses.push(AxisClass);
+                    var axisProto = AxisClass.prototype;
+                    axisProto.setCompare = axisSetCompare;
+                    axisProto.setModifier = setModifier;
+                    axisProto.setCumulative = axisSetCumulative;
+                }
+                if (composedClasses.indexOf(PointClass) === -1) {
+                    composedClasses.push(PointClass);
+                    var pointProto = PointClass.prototype;
+                    pointProto.tooltipFormatter = tooltipFormatter;
+                }
+                return SeriesClass;
             }
-            BrokenAxis.compose = compose;
+            DataModifyComposition.compose = compose;
+            /* ********************************************************************** *
+             *  Start shared compare and cumulative logic                             *
+             * ********************************************************************** */
             /**
+             * Shared code for the axis.setCompare() and the axis.setCumulative()
+             * methods. Inits the 'compare' or the 'cumulative' mode.
              * @private
              */
-            function onAxisAfterInit() {
-                if (typeof this.brokenAxis !== 'undefined') {
-                    this.brokenAxis.setBreaks(this.options.breaks, false);
+            function setModifier(mode, modeState, redraw) {
+                if (!this.isXAxis) {
+                    this.series.forEach(function (series) {
+                        if (mode === 'compare' &&
+                            typeof modeState !== 'boolean') {
+                            series.setCompare(modeState, false);
+                        }
+                        else if (mode === 'cumulative' &&
+                            !isString(modeState)) {
+                            series.setCumulative(modeState, false);
+                        }
+                    });
+                    if (pick(redraw, true)) {
+                        this.chart.redraw();
+                    }
                 }
             }
             /**
-             * Force Axis to be not-ordinal when breaks are defined.
-             * @private
+             * Extend the tooltip formatter by adding support for the point.change
+             * variable as well as the changeDecimals option.
+             *
+             * @ignore
+             * @function Highcharts.Point#tooltipFormatter
+             *
+             * @param {string} pointFormat
              */
-            function onAxisAfterSetOptions() {
-                var axis = this;
-                if (axis.brokenAxis && axis.brokenAxis.hasBreaks) {
-                    axis.options.ordinal = false;
+            function tooltipFormatter(pointFormat) {
+                var point = this, numberFormatter = point.series.chart.numberFormatter, replace = function (value) {
+                        pointFormat = pointFormat.replace('{point.' + value + '}', (point[value] > 0 && value === 'change' ? '+' : '') +
+                            numberFormatter(point[value], pick(point.series.tooltipOptions.changeDecimals, 2)));
+                };
+                if (defined(point.change)) {
+                    replace('change');
                 }
+                if (defined(point.cumulativeSum)) {
+                    replace('cumulativeSum');
+                }
+                return pointTooltipFormatter.apply(this, [pointFormat]);
             }
             /**
-             * @private
-             */
-            function onAxisAfterSetTickPositions() {
-                var axis = this,
-                    brokenAxis = axis.brokenAxis;
-                if (brokenAxis &&
-                    brokenAxis.hasBreaks) {
-                    var tickPositions = axis.tickPositions,
-                        info = axis.tickPositions.info,
-                        newPositions = [];
-                    for (var i = 0; i < tickPositions.length; i++) {
-                        if (!brokenAxis.isInAnyBreak(tickPositions[i])) {
-                            newPositions.push(tickPositions[i]);
-                        }
+             * Extend series.init by adding a methods to modify the y values used
+             * for plotting on the y axis. For compare mode, this method is called both
+             * from the axis when finding dataMin and dataMax,
+             * and from the series.translate method.
+             *
+             * @ignore
+             * @function Highcharts.Series#init
+             */
+            function afterInit() {
+                var compare = this.options.compare;
+                var dataModify;
+                if (compare === 'percent' ||
+                    compare === 'value' ||
+                    this.options.cumulative) {
+                    dataModify = new Additions(this);
+                    if (compare === 'percent' || compare === 'value') {
+                        // Set comparison mode
+                        dataModify.initCompare(compare);
+                    }
+                    else {
+                        // Set Cumulative Sum mode
+                        dataModify.initCumulative();
                     }
-                    axis.tickPositions = newPositions;
-                    axis.tickPositions.info = info;
                 }
+                this.dataModify = dataModify;
             }
             /**
+             * Adjust the extremes (compare and cumulative modify the data).
              * @private
              */
-            function onAxisInit() {
-                var axis = this;
-                if (!axis.brokenAxis) {
-                    axis.brokenAxis = new Additions(axis);
+            function afterGetExtremes(e) {
+                var dataExtremes = e.dataExtremes,
+                    activeYData = dataExtremes.activeYData;
+                if (this.dataModify && dataExtremes) {
+                    var extremes = void 0;
+                    if (this.options.compare) {
+                        extremes = [
+                            this.dataModify.modifyValue(dataExtremes.dataMin),
+                            this.dataModify.modifyValue(dataExtremes.dataMax)
+                        ];
+                    }
+                    else if (this.options.cumulative &&
+                        isArray(activeYData) &&
+                        // If only one y visible, sum doesn't change
+                        // so no need to change extremes
+                        activeYData.length >= 2) {
+                        extremes = Additions.getCumulativeExtremes(activeYData);
+                    }
+                    if (extremes) {
+                        dataExtremes.dataMin = arrayMin(extremes);
+                        dataExtremes.dataMax = arrayMax(extremes);
+                    }
+                }
+            }
+            /* ********************************************************************** *
+             *  End shared compare and cumulative logic                               *
+             * ********************************************************************** */
+            /* ********************************************************************** *
+             *  Start value compare logic                                             *
+             * ********************************************************************** */
+            /**
+             * Highcharts Stock only. Set the
+             * [compare](https://api.highcharts.com/highstock/plotOptions.series.compare)
+             * mode of the series after render time.
+             * In most cases it is more useful running
+             * {@link Axis#setCompare} on the X axis to update all its series.
+             *
+             * @function Highcharts.Series#setCompare
+             *
+             * @param {string|null} [compare]
+             *        Can be one of `undefined` (default), `null`, `"percent"`
+             *        or `"value"`.
+             *
+             * @param {boolean} [redraw=true]
+             *        Whether to redraw the chart or to wait for a later call to
+             *        {@link Chart#redraw}.
+             */
+            function seriesSetCompare(compare, redraw) {
+                // Survive to export, #5485 (and for options generally)
+                this.options.compare = this.userOptions.compare = compare;
+                // Fire series.init() that will set or delete series.dataModify
+                this.update({}, pick(redraw, true));
+                if (this.dataModify && (compare === 'value' || compare === 'percent')) {
+                    this.dataModify.initCompare(compare);
+                }
+                else {
+                    // When disabling, clear the points
+                    this.points.forEach(function (point) {
+                        delete point.change;
+                    });
                 }
             }
             /**
-             * @private
-             */
-            function onSeriesAfterGeneratePoints() {
-                var _a = this,
-                    isDirty = _a.isDirty,
-                    connectNulls = _a.options.connectNulls,
-                    points = _a.points,
-                    xAxis = _a.xAxis,
-                    yAxis = _a.yAxis;
-                // Set, or reset visibility of the points. Axis.setBreaks marks
-                // the series as isDirty
-                if (isDirty) {
-                    var i = points.length;
-                    while (i--) {
-                        var point = points[i];
-                        // Respect nulls inside the break (#4275)
-                        var nullGap = point.y === null && connectNulls === false;
-                        var isPointInBreak = (!nullGap && ((xAxis &&
-                                xAxis.brokenAxis &&
-                                xAxis.brokenAxis.isInAnyBreak(point.x,
-                            true)) || (yAxis &&
-                                yAxis.brokenAxis &&
-                                yAxis.brokenAxis.isInAnyBreak(point.y,
-                            true))));
-                        // Set point.visible if in any break.
-                        // If not in break, reset visible to original value.
-                        point.visible = isPointInBreak ?
-                            false :
-                            point.options.visible !== false;
+             * Extend series.processData by finding the first y value in the plot area,
+             * used for comparing the following values
+             *
+             * @ignore
+             * @function Highcharts.Series#processData
+             */
+            function afterProcessData() {
+                var series = this;
+                if (series.xAxis && // not pies
+                    series.processedYData &&
+                    series.dataModify) {
+                    var processedXData = series.processedXData,
+                        processedYData = series.processedYData,
+                        length_1 = processedYData.length,
+                        compareStart = series.options.compareStart === true ? 0 : 1;
+                    var keyIndex = -1,
+                        i = void 0;
+                    // For series with more than one value (range, OHLC etc), compare
+                    // against close or the pointValKey (#4922, #3112, #9854)
+                    if (series.pointArrayMap) {
+                        keyIndex = series.pointArrayMap.indexOf(series.options.pointValKey || series.pointValKey || 'y');
+                    }
+                    // find the first value for comparison
+                    for (i = 0; i < length_1 - compareStart; i++) {
+                        var compareValue = processedYData[i] && keyIndex > -1 ?
+                                processedYData[i][keyIndex] : processedYData[i];
+                        if (isNumber(compareValue) &&
+                            compareValue !== 0 &&
+                            processedXData[i + compareStart] >= (series.xAxis.min || 0)) {
+                            series.dataModify.compareValue = compareValue;
+                            break;
+                        }
                     }
                 }
             }
             /**
-             * @private
+             * Highcharts Stock only. Set the compare mode on all series
+             * belonging to a Y axis.
+             *
+             * @see [plotOptions.series.compare](https://api.highcharts.com/highstock/plotOptions.series.compare)
+             *
+             * @sample stock/members/axis-setcompare/
+             *         Set compare
+             *
+             * @function Highcharts.Axis#setCompare
+             *
+             * @param {string|null} [compare]
+             *        The compare mode. Can be one of `undefined` (default), `null`,
+             *        `"value"` or `"percent"`.
+             *
+             * @param {boolean} [redraw=true]
+             *        Whether to redraw the chart or to wait for a later call to
+             *        {@link Chart#redraw}.
              */
-            function onSeriesAfterRender() {
-                this.drawBreaks(this.xAxis, ['x']);
-                this.drawBreaks(this.yAxis, pick(this.pointArrayMap, ['y']));
+            function axisSetCompare(compare, redraw) {
+                this.setModifier('compare', compare, redraw);
             }
-            /**
-             * @private
-             */
-            function seriesDrawBreaks(axis, keys) {
-                var series = this,
-                    points = series.points;
-                var breaks,
-                    threshold,
-                    eventName,
-                    y;
-                if (axis && // #5950
-                    axis.brokenAxis &&
-                    axis.brokenAxis.hasBreaks) {
-                    var brokenAxis_1 = axis.brokenAxis;
-                    keys.forEach(function (key) {
-                        breaks = brokenAxis_1 && brokenAxis_1.breakArray || [];
-                        threshold = axis.isXAxis ?
-                            axis.min :
-                            pick(series.options.threshold, axis.min);
-                        points.forEach(function (point) {
-                            y = pick(point['stack' + key.toUpperCase()], point[key]);
-                            breaks.forEach(function (brk) {
-                                if (isNumber(threshold) && isNumber(y)) {
-                                    eventName = false;
-                                    if ((threshold < brk.from && y > brk.to) ||
-                                        (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)) {
-                                        eventName = 'pointInBreak';
-                                    }
-                                    if (eventName) {
-                                        fireEvent(axis, eventName, { point: point, brk: brk });
-                                    }
-                                }
-                            });
-                        });
+            /* ********************************************************************** *
+             *  End value compare logic                                               *
+             * ********************************************************************** */
+            /* ********************************************************************** *
+             *  Start Cumulative Sum logic, author: Rafal Sebestjanski                *
+             * ********************************************************************** */
+            /**
+             * Highcharts Stock only. Set the
+             * [cumulative](https://api.highcharts.com/highstock/plotOptions.series.cumulative)
+             * mode of the series after render time.
+             * In most cases it is more useful running
+             * {@link Axis#setCumulative} on the Y axis to update all its series.
+             *
+             * @function Highcharts.Series#setCumulative
+             *
+             * @param {boolean} [cumulative=false]
+             *        Either enable or disable Cumulative Sum mode.
+             *        Can be one of `false` (default) or `true`.
+             *
+             * @param {boolean} [redraw=true]
+             *        Whether to redraw the chart or to wait for a later call to
+             *        {@link Chart#redraw}.
+             */
+            function seriesSetCumulative(cumulative, redraw) {
+                // Set default value to false
+                cumulative = pick(cumulative, false);
+                // Survive to export, #5485 (and for options generally)
+                this.options.cumulative = this.userOptions.cumulative = cumulative;
+                // Fire series.init() that will set or delete series.dataModify
+                this.update({}, pick(redraw, true));
+                // If should, turn on the Cumulative Sum mode
+                if (this.dataModify) {
+                    this.dataModify.initCumulative();
+                }
+                else {
+                    // When disabling, clear the points
+                    this.points.forEach(function (point) {
+                        delete point.cumulativeSum;
                     });
                 }
             }
             /**
-             * Extend getGraphPath by identifying gaps in the data so that we
-             * can draw a gap in the line or area. This was moved from ordinal
-             * axis module to broken axis module as of #5045.
+             * Highcharts Stock only. Set the cumulative mode on all series
+             * belonging to a Y axis.
              *
-             * @private
-             * @function Highcharts.Series#gappedPath
+             * @see [plotOptions.series.cumulative](https://api.highcharts.com/highstock/plotOptions.series.cumulative)
              *
-             * @return {Highcharts.SVGPathArray}
-             * Gapped path
+             * @sample stock/members/axis-setcumulative/
+             *         Set cumulative
+             *
+             * @function Highcharts.Axis#setCumulative
+             *
+             * @param {boolean} [cumulative]
+             *        Whether to disable or enable the cumulative mode.
+             *        Can be one of `undefined` (default, treated as `false`),
+             *        `false` or `true`.
+             *
+             * @param {boolean} [redraw=true]
+             *        Whether to redraw the chart or to wait for a later call to
+             *        {@link Chart#redraw}.
              */
-            function seriesGappedPath() {
-                var currentDataGrouping = this.currentDataGrouping,
-                    groupingSize = currentDataGrouping && currentDataGrouping.gapSize,
-                    points = this.points.slice(),
-                    yAxis = this.yAxis;
-                var gapSize = this.options.gapSize,
-                    i = points.length - 1,
-                    stack;
+            function axisSetCumulative(cumulative, redraw) {
+                this.setModifier('cumulative', cumulative, redraw);
+            }
+            /* *
+             *
+             *  Classes
+             *
+             * */
+            /**
+             * @private
+             */
+            var Additions = /** @class */ (function () {
+                    /* *
+                     *
+                     *  Constructors
+                     *
+                     * */
+                    /**
+                     * @private
+                     */
+                    function Additions(series) {
+                        this.series = series;
+                }
+                /* *
+                *
+                *  Functions
+                *
+                * */
                 /**
-                 * Defines when to display a gap in the graph, together with the
-                 * [gapUnit](plotOptions.series.gapUnit) option.
+                 * @private
+                 */
+                Additions.prototype.modifyValue = function () {
+                    return 0;
+                };
+                /**
+                 * @ignore
+                 * @function Highcharts.Series#getCumulativeExtremes
                  *
-                 * In case when `dataGrouping` is enabled, points can be grouped
-                 * into a larger time span. This can make the grouped points to
-                 * have a greater distance than the absolute value of `gapSize`
-                 * property, which will result in disappearing graph completely.
-                 * To prevent this situation the mentioned distance between
-                 * grouped points is used instead of previously defined
-                 * `gapSize`.
+                 * @param {Array} [activeYData]
+                 *        An array cointaining all the points' y values
+                 *        in a visible range.
+                 */
+                Additions.getCumulativeExtremes = function (activeYData) {
+                    var cumulativeDataMin = Infinity,
+                        cumulativeDataMax = -Infinity;
+                    activeYData.reduce(function (prev, cur) {
+                        var sum = prev + cur;
+                        cumulativeDataMin = Math.min(cumulativeDataMin, sum, prev);
+                        cumulativeDataMax = Math.max(cumulativeDataMax, sum, prev);
+                        return sum;
+                    });
+                    return [cumulativeDataMin, cumulativeDataMax];
+                };
+                /**
+                 * @ignore
+                 * @function Highcharts.Series#initCompare
                  *
-                 * In practice, this option is most often used to visualize gaps
-                 * in time series. In a stock chart, intraday data is available
-                 * for daytime hours, while gaps will appear in nights and
-                 * weekends.
-                 *
-                 * @see [gapUnit](plotOptions.series.gapUnit)
-                 * @see [xAxis.breaks](#xAxis.breaks)
-                 *
-                 * @sample {highstock} stock/plotoptions/series-gapsize/
-                 * Setting the gap size to 2 introduces gaps for weekends in
-                 * daily datasets.
-                 *
-                 * @type      {number}
-                 * @default   0
-                 * @product   highstock
-                 * @requires  modules/broken-axis
-                 * @apioption plotOptions.series.gapSize
+                 * @param {string} [compare]
+                 *        Can be one of `"percent"` or `"value"`.
                  */
+                Additions.prototype.initCompare = function (compare) {
+                    // Set the modifyValue method
+                    this.modifyValue = function (value, index) {
+                        if (value === null) {
+                            value = 0;
+                        }
+                        var compareValue = this.compareValue;
+                        if (typeof value !== 'undefined' &&
+                            typeof compareValue !== 'undefined') { // #2601, #5814
+                            // Get the modified value
+                            if (compare === 'value') {
+                                value -= compareValue;
+                                // Compare percent
+                            }
+                            else {
+                                var compareBase = this.series.options.compareBase;
+                                value = 100 * (value / compareValue) -
+                                    (compareBase === 100 ? 0 : 100);
+                            }
+                            // record for tooltip etc.
+                            if (typeof index !== 'undefined') {
+                                var point = this.series.points[index];
+                                if (point) {
+                                    point.change = value;
+                                }
+                            }
+                            return value;
+                        }
+                        return 0;
+                    };
+                };
                 /**
-                 * Together with [gapSize](plotOptions.series.gapSize), this
-                 * option defines where to draw gaps in the graph.
-                 *
-                 * When the `gapUnit` is `"relative"` (default), a gap size of 5
-                 * means that if the distance between two points is greater than
-                 * 5 times that of the two closest points, the graph will be
-                 * broken.
-                 *
-                 * When the `gapUnit` is `"value"`, the gap is based on absolute
-                 * axis values, which on a datetime axis is milliseconds. This
-                 * also applies to the navigator series that inherits gap
-                 * options from the base series.
-                 *
-                 * @see [gapSize](plotOptions.series.gapSize)
-                 *
-                 * @type       {string}
-                 * @default    relative
-                 * @since      5.0.13
-                 * @product    highstock
-                 * @validvalue ["relative", "value"]
-                 * @requires   modules/broken-axis
-                 * @apioption  plotOptions.series.gapUnit
+                 * @ignore
+                 * @function Highcharts.Series#initCumulative
                  */
-                if (gapSize && i > 0) { // #5008
-                    // Gap unit is relative
-                    if (this.options.gapUnit !== 'value') {
-                        gapSize *= this.basePointRange;
-                    }
-                    // Setting a new gapSize in case dataGrouping is enabled
-                    // (#7686)
-                    if (groupingSize &&
-                        groupingSize > gapSize &&
-                        // Except when DG is forced (e.g. from other series)
-                        // and has lower granularity than actual points (#11351)
-                        groupingSize >= this.basePointRange) {
-                        gapSize = groupingSize;
-                    }
-                    // extension for ordinal breaks
-                    var current = void 0,
-                        next = void 0;
-                    while (i--) {
-                        // Reassign next if it is not visible
-                        if (!(next && next.visible !== false)) {
-                            next = points[i + 1];
-                        }
-                        current = points[i];
-                        // Skip iteration if one of the points is not visible
-                        if (next.visible === false || current.visible === false) {
-                            continue;
-                        }
-                        if (next.x - current.x > gapSize) {
-                            var xRange = (current.x + next.x) / 2;
-                            points.splice(// insert after this one
-                            i + 1, 0, {
-                                isNull: true,
-                                x: xRange
-                            });
-                            // 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.total = 0;
+                Additions.prototype.initCumulative = function () {
+                    // Set the modifyValue method
+                    this.modifyValue = function (value, index) {
+                        if (value === null) {
+                            value = 0;
+                        }
+                        if (value !== void 0 && index !== void 0) {
+                            var prevPoint = index > 0 ?
+                                    this.series.points[index - 1] : null;
+                            // Get the modified value
+                            if (prevPoint && prevPoint.cumulativeSum) {
+                                value = correctFloat(prevPoint.cumulativeSum + value);
+                            }
+                            // Record for tooltip etc.
+                            var point = this.series.points[index];
+                            if (point) {
+                                point.cumulativeSum = value;
                             }
+                            return value;
                         }
-                        // Assign current to next for the upcoming iteration
-                        next = current;
-                    }
-                }
-                // Call base method
-                return this.getGraphPath(points);
-            }
+                        return 0;
+                    };
+                };
+                return Additions;
+            }());
+            DataModifyComposition.Additions = Additions;
+        })(DataModifyComposition || (DataModifyComposition = {}));
+        /* *
+         *
+         *  Default Export
+         *
+         * */
+        /* *
+         *
+         *  API Options
+         *
+         * */
+        /**
+         * Compare the values of the series against the first non-null, non-
+         * zero value in the visible range. The y axis will show percentage
+         * or absolute change depending on whether `compare` is set to `"percent"`
+         * or `"value"`. When this is applied to multiple series, it allows
+         * comparing the development of the series against each other. Adds
+         * a `change` field to every point object.
+         *
+         * @see [compareBase](#plotOptions.series.compareBase)
+         * @see [Axis.setCompare()](/class-reference/Highcharts.Axis#setCompare)
+         * @see [Series.setCompare()](/class-reference/Highcharts.Series#setCompare)
+         *
+         * @sample {highstock} stock/plotoptions/series-compare-percent/
+         *         Percent
+         * @sample {highstock} stock/plotoptions/series-compare-value/
+         *         Value
+         *
+         * @type      {string}
+         * @since     1.0.1
+         * @product   highstock
+         * @apioption plotOptions.series.compare
+         */
+        /**
+         * Defines if comparison should start from the first point within the visible
+         * range or should start from the first point **before** the range.
+         *
+         * In other words, this flag determines if first point within the visible range
+         * will have 0% (`compareStart=true`) or should have been already calculated
+         * according to the previous point (`compareStart=false`).
+         *
+         * @sample {highstock} stock/plotoptions/series-comparestart/
+         *         Calculate compare within visible range
+         *
+         * @type      {boolean}
+         * @default   false
+         * @since     6.0.0
+         * @product   highstock
+         * @apioption plotOptions.series.compareStart
+         */
+        /**
+         * When [compare](#plotOptions.series.compare) is `percent`, this option
+         * dictates whether to use 0 or 100 as the base of comparison.
+         *
+         * @sample {highstock} stock/plotoptions/series-comparebase/
+         *         Compare base is 100
+         *
+         * @type       {number}
+         * @default    0
+         * @since      5.0.6
+         * @product    highstock
+         * @validvalue [0, 100]
+         * @apioption  plotOptions.series.compareBase
+         */
+        /**
+         * Cumulative Sum feature replaces points' values with the following formula:
+         * `sum of all previous points' values + current point's value`.
+         * Works only for points in a visible range.
+         * Adds the `cumulativeSum` field to each point object that can be accessed
+         * e.g. in the [tooltip.pointFormat](https://api.highcharts.com/highstock/tooltip.pointFormat).
+         *
+         * @see [Axis.setCumulative()](/class-reference/Highcharts.Axis#setCumulative)
+         * @see [Series.setCumulative()](/class-reference/Highcharts.Series#setCumulative)
+         *
+         * @sample {highstock} stock/plotoptions/series-cumulative-sum/
+         *         Cumulative Sum
+         *
+         * @type      {boolean}
+         * @default   false
+         * @since 9.3.0
+         * @product   highstock
+         * @apioption plotOptions.series.cumulative
+         */
+        ''; // keeps doclets above in transpiled file
+
+        return DataModifyComposition;
+    });
+    _registerModule(_modules, 'Core/Axis/BrokenAxis.js', [_modules['Extensions/Stacking.js'], _modules['Core/Utilities.js']], function (StackItem, U) {
+        /* *
+         *
+         *  (c) 2009-2021 Torstein Honsi
+         *
+         *  License: www.highcharts.com/license
+         *
+         *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
+         *
+         * */
+        var addEvent = U.addEvent,
+            find = U.find,
+            fireEvent = U.fireEvent,
+            isArray = U.isArray,
+            isNumber = U.isNumber,
+            pick = U.pick;
+        /* *
+         *
+         *  Composition
+         *
+         * */
+        /**
+         * Axis with support of broken data rows.
+         * @private
+         */
+        var BrokenAxis;
+        (function (BrokenAxis) {
             /* *
              *
-             *  Class
+             *  Declarations
+             *
+             * */
+            /* *
+             *
+             *  Constants
+             *
+             * */
+            var composedClasses = [];
+            /* *
+             *
+             *  Functions
              *
              * */
+            /* eslint-disable valid-jsdoc */
             /**
-             * Provides support for broken axes.
+             * Adds support for broken axes.
              * @private
-             * @class
              */
-            var Additions = /** @class */ (function () {
-                    /* *
-                     *
-                     *  Constructors
-                     *
-                     * */
-                    function Additions(axis) {
-                        this.hasBreaks = false;
-                    this.axis = axis;
+            function compose(AxisClass, SeriesClass) {
+                if (composedClasses.indexOf(AxisClass) === -1) {
+                    composedClasses.push(AxisClass);
+                    AxisClass.keepProps.push('brokenAxis');
+                    addEvent(AxisClass, 'init', onAxisInit);
+                    addEvent(AxisClass, 'afterInit', onAxisAfterInit);
+                    addEvent(AxisClass, 'afterSetTickPositions', onAxisAfterSetTickPositions);
+                    addEvent(AxisClass, 'afterSetOptions', onAxisAfterSetOptions);
                 }
-                /* *
-                 *
-                 *  Static Functions
-                 *
-                 * */
-                /**
-                 * @private
-                 */
-                Additions.isInBreak = function (brk, val) {
-                    var repeat = brk.repeat || Infinity,
-                        from = brk.from,
-                        length = brk.to - brk.from,
-                        test = (val >= from ?
-                            (val - from) % repeat :
-                            repeat - ((from - val) % repeat));
-                    var ret;
-                    if (!brk.inclusive) {
-                        ret = test < length && test !== 0;
-                    }
-                    else {
-                        ret = test <= length;
-                    }
-                    return ret;
-                };
-                /**
-                 * @private
-                 */
-                Additions.lin2Val = function (val) {
-                    var axis = this;
-                    var brokenAxis = axis.brokenAxis;
-                    var breakArray = brokenAxis && brokenAxis.breakArray;
+                if (composedClasses.indexOf(SeriesClass) === -1) {
+                    composedClasses.push(SeriesClass);
+                    var seriesProto = SeriesClass.prototype;
+                    seriesProto.drawBreaks = seriesDrawBreaks;
+                    seriesProto.gappedPath = seriesGappedPath;
+                    addEvent(SeriesClass, 'afterGeneratePoints', onSeriesAfterGeneratePoints);
+                    addEvent(SeriesClass, 'afterRender', onSeriesAfterRender);
+                }
+                return AxisClass;
+            }
+            BrokenAxis.compose = compose;
+            /**
+             * @private
+             */
+            function onAxisAfterInit() {
+                if (typeof this.brokenAxis !== 'undefined') {
+                    this.brokenAxis.setBreaks(this.options.breaks, false);
+                }
+            }
+            /**
+             * Force Axis to be not-ordinal when breaks are defined.
+             * @private
+             */
+            function onAxisAfterSetOptions() {
+                var axis = this;
+                if (axis.brokenAxis && axis.brokenAxis.hasBreaks) {
+                    axis.options.ordinal = false;
+                }
+            }
+            /**
+             * @private
+             */
+            function onAxisAfterSetTickPositions() {
+                var axis = this,
+                    brokenAxis = axis.brokenAxis;
+                if (brokenAxis &&
+                    brokenAxis.hasBreaks) {
+                    var tickPositions = axis.tickPositions,
+                        info = axis.tickPositions.info,
+                        newPositions = [];
+                    for (var i = 0; i < tickPositions.length; i++) {
+                        if (!brokenAxis.isInAnyBreak(tickPositions[i])) {
+                            newPositions.push(tickPositions[i]);
+                        }
+                    }
+                    axis.tickPositions = newPositions;
+                    axis.tickPositions.info = info;
+                }
+            }
+            /**
+             * @private
+             */
+            function onAxisInit() {
+                var axis = this;
+                if (!axis.brokenAxis) {
+                    axis.brokenAxis = new Additions(axis);
+                }
+            }
+            /**
+             * @private
+             */
+            function onSeriesAfterGeneratePoints() {
+                var _a = this,
+                    isDirty = _a.isDirty,
+                    connectNulls = _a.options.connectNulls,
+                    points = _a.points,
+                    xAxis = _a.xAxis,
+                    yAxis = _a.yAxis;
+                // Set, or reset visibility of the points. Axis.setBreaks marks
+                // the series as isDirty
+                if (isDirty) {
+                    var i = points.length;
+                    while (i--) {
+                        var point = points[i];
+                        // Respect nulls inside the break (#4275)
+                        var nullGap = point.y === null && connectNulls === false;
+                        var isPointInBreak = (!nullGap && ((xAxis &&
+                                xAxis.brokenAxis &&
+                                xAxis.brokenAxis.isInAnyBreak(point.x,
+                            true)) || (yAxis &&
+                                yAxis.brokenAxis &&
+                                yAxis.brokenAxis.isInAnyBreak(point.y,
+                            true))));
+                        // Set point.visible if in any break.
+                        // If not in break, reset visible to original value.
+                        point.visible = isPointInBreak ?
+                            false :
+                            point.options.visible !== false;
+                    }
+                }
+            }
+            /**
+             * @private
+             */
+            function onSeriesAfterRender() {
+                this.drawBreaks(this.xAxis, ['x']);
+                this.drawBreaks(this.yAxis, pick(this.pointArrayMap, ['y']));
+            }
+            /**
+             * @private
+             */
+            function seriesDrawBreaks(axis, keys) {
+                var series = this,
+                    points = series.points;
+                var breaks,
+                    threshold,
+                    eventName,
+                    y;
+                if (axis && // #5950
+                    axis.brokenAxis &&
+                    axis.brokenAxis.hasBreaks) {
+                    var brokenAxis_1 = axis.brokenAxis;
+                    keys.forEach(function (key) {
+                        breaks = brokenAxis_1 && brokenAxis_1.breakArray || [];
+                        threshold = axis.isXAxis ?
+                            axis.min :
+                            pick(series.options.threshold, axis.min);
+                        points.forEach(function (point) {
+                            y = pick(point['stack' + key.toUpperCase()], point[key]);
+                            breaks.forEach(function (brk) {
+                                if (isNumber(threshold) && isNumber(y)) {
+                                    eventName = false;
+                                    if ((threshold < brk.from && y > brk.to) ||
+                                        (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)) {
+                                        eventName = 'pointInBreak';
+                                    }
+                                    if (eventName) {
+                                        fireEvent(axis, eventName, { point: point, brk: brk });
+                                    }
+                                }
+                            });
+                        });
+                    });
+                }
+            }
+            /**
+             * Extend getGraphPath by identifying gaps in the data so that we
+             * can draw a gap in the line or area. This was moved from ordinal
+             * axis module to broken axis module as of #5045.
+             *
+             * @private
+             * @function Highcharts.Series#gappedPath
+             *
+             * @return {Highcharts.SVGPathArray}
+             * Gapped path
+             */
+            function seriesGappedPath() {
+                var currentDataGrouping = this.currentDataGrouping,
+                    groupingSize = currentDataGrouping && currentDataGrouping.gapSize,
+                    points = this.points.slice(),
+                    yAxis = this.yAxis;
+                var gapSize = this.options.gapSize,
+                    i = points.length - 1,
+                    stack;
+                /**
+                 * Defines when to display a gap in the graph, together with the
+                 * [gapUnit](plotOptions.series.gapUnit) option.
+                 *
+                 * In case when `dataGrouping` is enabled, points can be grouped
+                 * into a larger time span. This can make the grouped points to
+                 * have a greater distance than the absolute value of `gapSize`
+                 * property, which will result in disappearing graph completely.
+                 * To prevent this situation the mentioned distance between
+                 * grouped points is used instead of previously defined
+                 * `gapSize`.
+                 *
+                 * In practice, this option is most often used to visualize gaps
+                 * in time series. In a stock chart, intraday data is available
+                 * for daytime hours, while gaps will appear in nights and
+                 * weekends.
+                 *
+                 * @see [gapUnit](plotOptions.series.gapUnit)
+                 * @see [xAxis.breaks](#xAxis.breaks)
+                 *
+                 * @sample {highstock} stock/plotoptions/series-gapsize/
+                 * Setting the gap size to 2 introduces gaps for weekends in
+                 * daily datasets.
+                 *
+                 * @type      {number}
+                 * @default   0
+                 * @product   highstock
+                 * @requires  modules/broken-axis
+                 * @apioption plotOptions.series.gapSize
+                 */
+                /**
+                 * Together with [gapSize](plotOptions.series.gapSize), this
+                 * option defines where to draw gaps in the graph.
+                 *
+                 * When the `gapUnit` is `"relative"` (default), a gap size of 5
+                 * means that if the distance between two points is greater than
+                 * 5 times that of the two closest points, the graph will be
+                 * broken.
+                 *
+                 * When the `gapUnit` is `"value"`, the gap is based on absolute
+                 * axis values, which on a datetime axis is milliseconds. This
+                 * also applies to the navigator series that inherits gap
+                 * options from the base series.
+                 *
+                 * @see [gapSize](plotOptions.series.gapSize)
+                 *
+                 * @type       {string}
+                 * @default    relative
+                 * @since      5.0.13
+                 * @product    highstock
+                 * @validvalue ["relative", "value"]
+                 * @requires   modules/broken-axis
+                 * @apioption  plotOptions.series.gapUnit
+                 */
+                if (gapSize && i > 0) { // #5008
+                    // Gap unit is relative
+                    if (this.options.gapUnit !== 'value') {
+                        gapSize *= this.basePointRange;
+                    }
+                    // Setting a new gapSize in case dataGrouping is enabled
+                    // (#7686)
+                    if (groupingSize &&
+                        groupingSize > gapSize &&
+                        // Except when DG is forced (e.g. from other series)
+                        // and has lower granularity than actual points (#11351)
+                        groupingSize >= this.basePointRange) {
+                        gapSize = groupingSize;
+                    }
+                    // extension for ordinal breaks
+                    var current = void 0,
+                        next = void 0;
+                    while (i--) {
+                        // Reassign next if it is not visible
+                        if (!(next && next.visible !== false)) {
+                            next = points[i + 1];
+                        }
+                        current = points[i];
+                        // Skip iteration if one of the points is not visible
+                        if (next.visible === false || current.visible === false) {
+                            continue;
+                        }
+                        if (next.x - current.x > gapSize) {
+                            var xRange = (current.x + next.x) / 2;
+                            points.splice(// insert after this one
+                            i + 1, 0, {
+                                isNull: true,
+                                x: xRange
+                            });
+                            // 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.total = 0;
+                            }
+                        }
+                        // Assign current to next for the upcoming iteration
+                        next = current;
+                    }
+                }
+                // Call base method
+                return this.getGraphPath(points);
+            }
+            /* *
+             *
+             *  Class
+             *
+             * */
+            /**
+             * Provides support for broken axes.
+             * @private
+             * @class
+             */
+            var Additions = /** @class */ (function () {
+                    /* *
+                     *
+                     *  Constructors
+                     *
+                     * */
+                    function Additions(axis) {
+                        this.hasBreaks = false;
+                    this.axis = axis;
+                }
+                /* *
+                 *
+                 *  Static Functions
+                 *
+                 * */
+                /**
+                 * @private
+                 */
+                Additions.isInBreak = function (brk, val) {
+                    var repeat = brk.repeat || Infinity,
+                        from = brk.from,
+                        length = brk.to - brk.from,
+                        test = (val >= from ?
+                            (val - from) % repeat :
+                            repeat - ((from - val) % repeat));
+                    var ret;
+                    if (!brk.inclusive) {
+                        ret = test < length && test !== 0;
+                    }
+                    else {
+                        ret = test <= length;
+                    }
+                    return ret;
+                };
+                /**
+                 * @private
+                 */
+                Additions.lin2Val = function (val) {
+                    var axis = this;
+                    var brokenAxis = axis.brokenAxis;
+                    var breakArray = brokenAxis && brokenAxis.breakArray;
                     if (!breakArray || !isNumber(val)) {
                         return val;
                     }
@@ -1669,10 +2215,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));
                                         }
                                     }
                                 });
@@ -1720,13 +2268,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');
@@ -1894,8 +2446,18 @@
                     arr[arr.length - 1] :
                     (arr.hasNulls ? null : void 0);
             },
-            // ohlc and range are special cases where a multidimensional array is
-            // input and an array is output
+            // HLC, OHLC and range are special cases where a multidimensional array is
+            // input and an array is output.
+            hlc: function (high, low, close) {
+                high = approximations.high(high);
+                low = approximations.low(low);
+                close = approximations.close(close);
+                if (isNumber(high) ||
+                    isNumber(low) ||
+                    isNumber(close)) {
+                    return [high, low, close];
+                }
+            },
             ohlc: function (open, high, low, close) {
                 open = approximations.open(open);
                 high = approximations.high(high);
@@ -1907,7 +2469,6 @@
                     isNumber(close)) {
                     return [open, high, low, close];
                 }
-                // else, return is undefined
             },
             range: function (low, high) {
                 low = approximations.low(low);
@@ -1921,7 +2482,7 @@
                 // else, return is undefined
             }
         };
-        var applyGrouping = function () {
+        var applyGrouping = function (hasExtemesChanged) {
                 var series = this,
             chart = series.chart,
             options = series.options,
@@ -1940,9 +2501,9 @@
             if (groupingEnabled && !series.requireSorting) {
                 series.requireSorting = revertRequireSorting = true;
             }
-            // Skip if processData returns false or if grouping is disabled (in that
-            // order)
-            skip = skipDataGrouping(series) || !groupingEnabled;
+            // Skip if skipDataGrouping method returns false or if grouping is disabled
+            // (in that order).
+            skip = skipDataGrouping(series, hasExtemesChanged) === false || !groupingEnabled;
             // Revert original requireSorting value if changed
             if (revertRequireSorting) {
                 series.requireSorting = false;
@@ -2000,13 +2561,17 @@
                         groupedXData = groupedData.groupedXData,
                         groupedYData = groupedData.groupedYData,
                         gapSize = 0;
-                    // The smoothed option is deprecated, instead,
-                    // there is a fallback to the new anchoring mechanism. #12455.
-                    if (dataGroupingOptions && dataGroupingOptions.smoothed && groupedXData.length) {
+                    // The smoothed option is deprecated, instead, there is a fallback
+                    // to the new anchoring mechanism. #12455.
+                    if (dataGroupingOptions &&
+                        dataGroupingOptions.smoothed &&
+                        groupedXData.length) {
                         dataGroupingOptions.firstAnchor = 'firstPoint';
                         dataGroupingOptions.anchor = 'middle';
                         dataGroupingOptions.lastAnchor = 'lastPoint';
-                        error(32, false, chart, { 'dataGrouping.smoothed': 'use dataGrouping.anchor' });
+                        error(32, false, chart, {
+                            'dataGrouping.smoothed': 'use dataGrouping.anchor'
+                        });
                     }
                     anchorPoints(series, groupedXData, xMax);
                     // Record what data grouping values were used
@@ -2053,13 +2618,13 @@
                         (currentDataGrouping && currentDataGrouping.totalRange);
             }
         };
-        var skipDataGrouping = function (series) {
-                if (series.isCartesian &&
+        var skipDataGrouping = function (series,
+            force) {
+                return !(series.isCartesian &&
                     !series.isDirty &&
                     !series.xAxis.isDirty &&
-                    !series.yAxis.isDirty) {
-                    return false;
-            }
+                    !series.yAxis.isDirty &&
+                    !force);
         };
         var groupData = function (xData,
             yData,
@@ -2083,7 +2648,8 @@
             pointArrayMap = series.pointArrayMap,
             pointArrayMapLength = pointArrayMap && pointArrayMap.length,
             extendedPointArrayMap = ['x'].concat(pointArrayMap || ['y']),
-            groupAll = this.options.dataGrouping && this.options.dataGrouping.groupAll,
+            groupAll = (this.options.dataGrouping &&
+                    this.options.dataGrouping.groupAll),
             pos = 0,
             start = 0,
             valuesLen,
@@ -2213,7 +2779,7 @@
             xMax) {
                 var options = series.options,
             dataGroupingOptions = options.dataGrouping,
-            totalRange = series.currentDataGrouping && series.currentDataGrouping.gapSize;
+            totalRange = (series.currentDataGrouping && series.currentDataGrouping.gapSize);
             var i;
             // DataGrouping x-coordinates.
             if (dataGroupingOptions && series.xData && totalRange && series.groupMap) {
@@ -2225,9 +2791,9 @@
                     anchor);
                 // Anchor points that are not extremes.
                 if (anchor && anchor !== 'start') {
-                    var shiftInterval = totalRange *
+                    var shiftInterval = (totalRange *
                             { middle: 0.5,
-                        end: 1 }[anchor];
+                        end: 1 }[anchor]);
                     i = groupedXData.length - 1;
                     while (i-- && i > 0) {
                         groupedXData[i] += shiftInterval;
@@ -2373,7 +2939,10 @@
                 ohlc: {
                     groupPixelWidth: 5
                 },
-                // Move to HeikinAshiSeries.ts aftre refactoring data grouping.
+                hlc: {
+                    groupPixelWidth: 5
+                    // Move to HeikinAshiSeries.ts aftre refactoring data grouping.
+                },
                 heikinashi: {
                     groupPixelWidth: 10
                 }
@@ -2416,6 +2985,9 @@
             if (this.is('ohlc')) {
                 return 'ohlc';
             }
+            if (this.is('hlc')) {
+                return 'hlc';
+            }
             if (this.is('column')) {
                 return 'sum';
             }
@@ -2481,19 +3053,20 @@
          *
          * @function Highcharts.Axis#applyGrouping
          */
-        Axis.prototype.applyGrouping = function () {
+        Axis.prototype.applyGrouping = function (e) {
             var axis = this,
                 series = axis.series;
             series.forEach(function (series) {
                 // Reset the groupPixelWidth, then calculate if needed.
                 series.groupPixelWidth = void 0; // #2110
-                series.groupPixelWidth = axis.getGroupPixelWidth && axis.getGroupPixelWidth();
+                series.groupPixelWidth = (axis.getGroupPixelWidth &&
+                    axis.getGroupPixelWidth());
                 if (series.groupPixelWidth) {
                     series.hasProcessed = true; // #2692
                 }
                 // Fire independing on series.groupPixelWidth to always set a proper
                 // dataGrouping state, (#16238)
-                series.applyGrouping();
+                series.applyGrouping(!!e.hasExtemesChanged);
             });
         };
         // Get the data grouping pixel width based on the greatest defined individual
@@ -2526,8 +3099,8 @@
                     // Execute grouping if the amount of points is greater than the
                     // limit defined in groupPixelWidth
                     if (series[i].groupPixelWidth ||
-                        dataLength >
-                            (this.chart.plotSizeX / groupPixelWidth) ||
+                        (dataLength >
+                            (this.chart.plotSizeX / groupPixelWidth)) ||
                         (dataLength && dgOptions.forced)) {
                         doGrouping = true;
                     }
@@ -2668,10 +3241,10 @@
                 type = this.type,
                 plotOptions = this.chart.options.plotOptions,
                 defaultOptions = D.defaultOptions.plotOptions[type].dataGrouping, 
-                // External series, for example technical indicators should also
-                // inherit commonOptions which are not available outside this module
-                baseOptions = this.useCommonDataGrouping && commonOptions;
-            if (specificOptions[type] || baseOptions) { // #1284
+                // External series, for example technical indicators should also inherit
+                // commonOptions which are not available outside this module
+                baseOptions = (this.useCommonDataGrouping && commonOptions);
+            if (plotOptions && (specificOptions[type] || baseOptions)) { // #1284
                 if (!defaultOptions) {
                     defaultOptions = merge(commonOptions, specificOptions[type]);
                 }
@@ -2765,7 +3338,7 @@
          * from the raw data.
          *
          * Defaults to `average` for line-type series, `sum` for columns, `range`
-         * for range series and `ohlc` for OHLC and candlestick.
+         * for range series, `hlc` for HLC, and `ohlc` for OHLC and candlestick.
          *
          * @sample {highstock} stock/plotoptions/series-datagrouping-approximation
          *         Approximation callback with custom data
@@ -2804,7 +3377,7 @@
          * to two weeks, the second and third item of the week array are used,
          *  and applied to the start and end date of the time span.
          *
-         * @type      {object}
+         * @type      {Object}
          * @apioption plotOptions.series.dataGrouping.dateTimeLabelFormats
          */
         /**
@@ -2881,113 +3454,567 @@
          * @sample {highstock} stock/plotoptions/series-datagrouping-groupall/
          *         Two series with the same data but different groupAll setting
          *
-         * @type      {boolean}
-         * @default   false
-         * @since     6.1.0
-         * @apioption plotOptions.series.dataGrouping.groupAll
-         */
-        /**
-         * Specifies how the last grouped point is positioned on the xAxis.
-         * If firstAnchor and/or lastAnchor are defined, then those options take
-         * precedence over anchor for the first and/or last grouped points.
-         * Available options:
+         * @type      {boolean}
+         * @default   false
+         * @since     6.1.0
+         * @apioption plotOptions.series.dataGrouping.groupAll
+         */
+        /**
+         * Specifies how the last grouped point is positioned on the xAxis.
+         * If firstAnchor and/or lastAnchor are defined, then those options take
+         * precedence over anchor for the first and/or last grouped points.
+         * Available options:
+         *
+         * -`start` places the point at the beginning of the group
+         * (e.g. range 00:00:00 - 23:59:59 -> 00:00:00)
+         *
+         * -`middle` places the point in the middle of the group
+         * (e.g. range 00:00:00 - 23:59:59 -> 12:00:00)
+         *
+         * -`end` places the point at the end of the group
+         * (e.g. range 00:00:00 - 23:59:59 -> 23:59:59)
+         *
+         * -`firstPoint` the first point in the group
+         * (e.g. points at 00:13, 00:35, 00:59 -> 00:13)
+         *
+         * -`lastPoint` the last point in the group
+         * (e.g. points at 00:13, 00:35, 00:59 -> 00:59)
+         *
+         * @sample {highstock} stock/plotoptions/series-datagrouping-first-anchor
+         *         Applying first and last anchor.
+         *
+         * @sample {highstock} stock/plotoptions/series-datagrouping-last-anchor
+         *         Applying the last anchor in the chart with live data.
+         *
+         * @see [dataGrouping.anchor](#plotOptions.series.dataGrouping.anchor)
+         *
+         * @type       {Highcharts.DataGroupingAnchorExtremes}
+         * @since 9.1.0
+         * @default    start
+         * @apioption  plotOptions.series.dataGrouping.lastAnchor
+         */
+        /**
+         * Normally, a group is indexed by the start of that group, so for example
+         * when 30 daily values are grouped into one month, that month's x value
+         * will be the 1st of the month. This apparently shifts the data to
+         * the left. When the smoothed option is true, this is compensated for.
+         * The data is shifted to the middle of the group, and min and max
+         * values are preserved. Internally, this is used in the Navigator series.
+         *
+         * @type      {boolean}
+         * @default   false
+         * @deprecated
+         * @apioption plotOptions.series.dataGrouping.smoothed
+         */
+        /**
+         * An array determining what time intervals the data is allowed to be
+         * grouped to. Each array item is an array where the first value is
+         * the time unit and the second value another array of allowed multiples.
+         *
+         * Defaults to:
+         * ```js
+         * units: [[
+         *     'millisecond', // unit name
+         *     [1, 2, 5, 10, 20, 25, 50, 100, 200, 500] // allowed multiples
+         * ], [
+         *     'second',
+         *     [1, 2, 5, 10, 15, 30]
+         * ], [
+         *     'minute',
+         *     [1, 2, 5, 10, 15, 30]
+         * ], [
+         *     'hour',
+         *     [1, 2, 3, 4, 6, 8, 12]
+         * ], [
+         *     'day',
+         *     [1]
+         * ], [
+         *     'week',
+         *     [1]
+         * ], [
+         *     'month',
+         *     [1, 3, 6]
+         * ], [
+         *     'year',
+         *     null
+         * ]]
+         * ```
+         *
+         * @type      {Array<Array<string,(Array<number>|null)>>}
+         * @apioption plotOptions.series.dataGrouping.units
+         */
+        /**
+         * The approximate pixel width of each group. If for example a series
+         * with 30 points is displayed over a 600 pixel wide plot area, no grouping
+         * is performed. If however the series contains so many points that
+         * the spacing is less than the groupPixelWidth, Highcharts will try
+         * to group it into appropriate groups so that each is more or less
+         * two pixels wide. Defaults to `10`.
+         *
+         * @sample {highstock} stock/plotoptions/series-datagrouping-grouppixelwidth/
+         *         Two series with the same data density but different groupPixelWidth
+         *
+         * @type      {number}
+         * @default   10
+         * @apioption plotOptions.column.dataGrouping.groupPixelWidth
+         */
+        ''; // required by JSDoc parsing
+
+        return dataGrouping;
+    });
+    _registerModule(_modules, 'Series/HLC/HLCPoint.js', [_modules['Core/Series/SeriesRegistry.js']], function (SeriesRegistry) {
+        /* *
+         *
+         *  (c) 2010-2021 Pawel Lysy
+         *
+         *  License: www.highcharts.com/license
+         *
+         *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
+         *
+         * */
+        var __extends = (this && this.__extends) || (function () {
+                var extendStatics = function (d,
+            b) {
+                    extendStatics = Object.setPrototypeOf ||
+                        ({ __proto__: [] } instanceof Array && function (d,
+            b) { d.__proto__ = b; }) ||
+                        function (d,
+            b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+                return extendStatics(d, b);
+            };
+            return function (d, b) {
+                extendStatics(d, b);
+                function __() { this.constructor = d; }
+                d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+            };
+        })();
+        var ColumnSeries = SeriesRegistry.seriesTypes.column;
+        /* *
+         *
+         *  Class
+         *
+         * */
+        var HLCPoint = /** @class */ (function (_super) {
+                __extends(HLCPoint, _super);
+            function HLCPoint() {
+                /* *
+                 *
+                 *  Properties
+                 *
+                 * */
+                var _this = _super !== null && _super.apply(this,
+                    arguments) || this;
+                _this.close = void 0;
+                _this.high = void 0;
+                _this.low = void 0;
+                _this.options = void 0;
+                _this.plotClose = void 0;
+                _this.series = void 0;
+                return _this;
+            }
+            return HLCPoint;
+        }(ColumnSeries.prototype.pointClass));
+        /* *
+         *
+         *  Default Export
          *
-         * -`start` places the point at the beginning of the group
-         * (e.g. range 00:00:00 - 23:59:59 -> 00:00:00)
+         * */
+
+        return HLCPoint;
+    });
+    _registerModule(_modules, 'Series/HLC/HLCSeries.js', [_modules['Series/HLC/HLCPoint.js'], _modules['Core/Series/SeriesRegistry.js'], _modules['Core/Utilities.js']], function (HLCPoint, SeriesRegistry, U) {
+        /* *
          *
-         * -`middle` places the point in the middle of the group
-         * (e.g. range 00:00:00 - 23:59:59 -> 12:00:00)
+         *  (c) 2010-2021 Pawel Lysy
          *
-         * -`end` places the point at the end of the group
-         * (e.g. range 00:00:00 - 23:59:59 -> 23:59:59)
+         *  License: www.highcharts.com/license
          *
-         * -`firstPoint` the first point in the group
-         * (e.g. points at 00:13, 00:35, 00:59 -> 00:13)
+         *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
          *
-         * -`lastPoint` the last point in the group
-         * (e.g. points at 00:13, 00:35, 00:59 -> 00:59)
+         * */
+        var __extends = (this && this.__extends) || (function () {
+                var extendStatics = function (d,
+            b) {
+                    extendStatics = Object.setPrototypeOf ||
+                        ({ __proto__: [] } instanceof Array && function (d,
+            b) { d.__proto__ = b; }) ||
+                        function (d,
+            b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+                return extendStatics(d, b);
+            };
+            return function (d, b) {
+                extendStatics(d, b);
+                function __() { this.constructor = d; }
+                d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+            };
+        })();
+        var ColumnSeries = SeriesRegistry.seriesTypes.column;
+        var extend = U.extend,
+            merge = U.merge;
+        /* *
          *
-         * @sample {highstock} stock/plotoptions/series-datagrouping-first-anchor
-         *         Applying first and last anchor.
+         *  Class
          *
-         * @sample {highstock} stock/plotoptions/series-datagrouping-last-anchor
-         *         Applying the last anchor in the chart with live data.
+         * */
+        /**
+         * The hlc series type.
          *
-         * @see [dataGrouping.anchor](#plotOptions.series.dataGrouping.anchor)
+         * @private
+         * @class
+         * @name Highcharts.seriesTypes.hlc
          *
-         * @type       {Highcharts.DataGroupingAnchorExtremes}
-         * @since 9.1.0
-         * @default    start
-         * @apioption  plotOptions.series.dataGrouping.lastAnchor
+         * @augments Highcharts.Series
          */
-        /**
-         * Normally, a group is indexed by the start of that group, so for example
-         * when 30 daily values are grouped into one month, that month's x value
-         * will be the 1st of the month. This apparently shifts the data to
-         * the left. When the smoothed option is true, this is compensated for.
-         * The data is shifted to the middle of the group, and min and max
-         * values are preserved. Internally, this is used in the Navigator series.
+        var HLCSeries = /** @class */ (function (_super) {
+                __extends(HLCSeries, _super);
+            function HLCSeries() {
+                /* *
+                 *
+                 *  Static Properties
+                 *
+                 * */
+                var _this = _super !== null && _super.apply(this,
+                    arguments) || this;
+                /* *
+                 *
+                 *  Properties
+                 *
+                 * */
+                _this.data = void 0;
+                _this.options = void 0;
+                _this.points = void 0;
+                _this.yData = void 0;
+                return _this;
+                /* eslint-enable valid-jsdoc */
+            }
+            /* *
+             *
+             *  Functions
+             *
+             * */
+            /* eslint-disable valid-jsdoc */
+            /**
+             * Extend the path if close is not between high and low.
+             *
+             * @param {SVGPath} path the path array of the point
+             * @param {number} halfStrokeWidth
+             * @param {number} value value of the point to which the stem should be extended
+             */
+            HLCSeries.prototype.extendStem = function (path, halfStrokeWidth, value) {
+                var start = path[0];
+                var end = path[1];
+                // We don't need to worry about crisp - close value
+                // is already crisped and halfStrokeWidth should remove it.
+                if (typeof start[2] === 'number') {
+                    start[2] = Math.max(value + halfStrokeWidth, start[2]);
+                }
+                if (typeof end[2] === 'number') {
+                    end[2] = Math.min(value - halfStrokeWidth, end[2]);
+                }
+            };
+            /**
+             * Function to create SVGPath of the point based on the
+             * plot positions of this point.
+             * @private
+             */
+            HLCSeries.prototype.getPointPath = function (point, graphic) {
+                // crisp vector coordinates
+                var strokeWidth = graphic.strokeWidth(),
+                    series = point.series,
+                    crispCorr = (strokeWidth % 2) / 2, 
+                    // #2596:
+                    crispX = Math.round(point.plotX) - crispCorr,
+                    halfWidth = Math.round(point.shapeArgs.width / 2);
+                var path,
+                    plotClose = point.plotClose;
+                // the vertical stem
+                path = [
+                    ['M', crispX, Math.round(point.yBottom)],
+                    ['L', crispX, Math.round(point.plotHigh)]
+                ];
+                // close
+                if (point.close !== null) {
+                    plotClose = Math.round(point.plotClose) + crispCorr;
+                    path.push(['M', crispX, plotClose], ['L', crispX + halfWidth, plotClose]);
+                    series.extendStem(path, strokeWidth / 2, plotClose);
+                }
+                return path;
+            };
+            /**
+             * Draw single point
+             * @private
+             */
+            HLCSeries.prototype.drawSinglePoint = function (point) {
+                var series = point.series,
+                    chart = series.chart;
+                var path,
+                    graphic = point.graphic,
+                    isNew = !graphic;
+                if (typeof point.plotY !== 'undefined') {
+                    // Create and/or update the graphic
+                    if (!graphic) {
+                        point.graphic = graphic = chart.renderer.path()
+                            .add(series.group);
+                    }
+                    if (!chart.styledMode) {
+                        graphic.attr(series.pointAttribs(point, (point.selected && 'select'))); // #3897
+                    }
+                    // crisp vector coordinates
+                    path = series.getPointPath(point, graphic);
+                    graphic[isNew ? 'attr' : 'animate']({ d: path })
+                        .addClass(point.getClassName(), true);
+                }
+            };
+            /**
+             * Draw the data points
+             * @private
+             */
+            HLCSeries.prototype.drawPoints = function () {
+                this.points.forEach(this.drawSinglePoint);
+            };
+            /**
+             * @private
+             * @function Highcharts.seriesTypes.hlc#init
+             */
+            HLCSeries.prototype.init = function () {
+                _super.prototype.init.apply(this, arguments);
+                this.options.stacking = void 0; // #8817
+            };
+            /**
+             * Postprocess mapping between options and SVG attributes
+             * @private
+             */
+            HLCSeries.prototype.pointAttribs = function (point, state) {
+                var attribs = _super.prototype.pointAttribs.call(this,
+                    point,
+                    state);
+                delete attribs.fill;
+                return attribs;
+            };
+            HLCSeries.prototype.toYData = function (point) {
+                // return a plain array for speedy calculation
+                return [point.high, point.low, point.close];
+            };
+            /**
+             * Translate data points from raw values x and y to plotX and plotY
+             *
+             * @private
+             * @function Highcharts.seriesTypes.hlc#translate
+             */
+            HLCSeries.prototype.translate = function () {
+                var series = this,
+                    yAxis = series.yAxis,
+                    names = (this.pointArrayMap && this.pointArrayMap.slice()) || [],
+                    translated = names.map(function (name) {
+                        return "plot" + (name.charAt(0).toUpperCase() + name.slice(1));
+                });
+                translated.push('yBottom');
+                names.push('low');
+                _super.prototype.translate.apply(series);
+                // Do the translation
+                series.points.forEach(function (point) {
+                    names.forEach(function (name, i) {
+                        var value = point[name];
+                        if (value !== null) {
+                            if (series.dataModify) {
+                                value = series.dataModify.modifyValue(value);
+                            }
+                            point[translated[i]] =
+                                yAxis.toPixels(value, true);
+                        }
+                    });
+                    // Align the tooltip to the high value to avoid covering the
+                    // point
+                    point.tooltipPos[1] =
+                        point.plotHigh + yAxis.pos - series.chart.plotTop;
+                });
+            };
+            /**
+             * An HLC chart is a style of financial chart used to describe price
+             * movements over time. It displays high, low and close values per
+             * data point.
+             *
+             * @sample stock/demo/hlc/
+             *         HLC chart
+             *
+             * @extends      plotOptions.column
+             * @excluding    borderColor, borderRadius, borderWidth, crisp, stacking,
+             *               stack
+             * @product      highstock
+             * @optionparent plotOptions.hlc
+             */
+            HLCSeries.defaultOptions = merge(ColumnSeries.defaultOptions, {
+                /**
+                 * The approximate pixel width of each group. If for example a series
+                 * with 30 points is displayed over a 600 pixel wide plot area, no
+                 * grouping is performed. If however the series contains so many points
+                 * that the spacing is less than the groupPixelWidth, Highcharts will
+                 * try to group it into appropriate groups so that each is more or less
+                 * two pixels wide. Defaults to `5`.
+                 *
+                 * @type      {number}
+                 * @default   5
+                 * @product   highstock
+                 * @apioption plotOptions.hlc.dataGrouping.groupPixelWidth
+                 */
+                /**
+                 * @type      {Highcharts.DataGroupingApproximationValue|Function}
+                 * @default   hlc
+                 * @product   highstock
+                 * @apioption plotOptions.hlc.dataGrouping.approximation
+                 */
+                /**
+                 * @default   close
+                 * @apioption plotOptions.hlc.colorKey
+                 */
+                /**
+                 * The pixel width of the line/border. Defaults to `1`.
+                 *
+                 * @sample {highstock} stock/plotoptions/hlc-linewidth/
+                 *         A greater line width
+                 *
+                 * @type    {number}
+                 * @default 1
+                 * @product highstock
+                 *
+                 * @public
+                 */
+                lineWidth: 1,
+                tooltip: {
+                    pointFormat: '<span style="color:{point.color}">\u25CF</span> ' +
+                        '<b> {series.name}</b><br/>' +
+                        'High: {point.high}<br/>' +
+                        'Low: {point.low}<br/>' +
+                        'Close: {point.close}<br/>'
+                },
+                threshold: null,
+                states: {
+                    /**
+                     * @extends plotOptions.column.states.hover
+                     * @product highstock
+                     */
+                    hover: {
+                        /**
+                         * The pixel width of the line representing the HLC point.
+                         *
+                         * @type    {number}
+                         * @default 3
+                         * @product highstock
+                         */
+                        lineWidth: 3
+                    }
+                },
+                /**
+                 * Determines which one of  `high`, `low`, `close` values should
+                 * be represented as `point.y`, which is later used to set dataLabel
+                 * position and [compare](#plotOptions.series.compare).
+                 *
+                 * @sample {highstock} stock/plotoptions/hlc-pointvalkey/
+                 *         Possible values
+                 *
+                 * @type       {string}
+                 * @default    close
+                 * @validvalue ["high", "low", "close"]
+                 * @product    highstock
+                 * @apioption  plotOptions.hlc.pointValKey
+                 */
+                /**
+                 * @default   close
+                 * @apioption plotOptions.hlc.colorKey
+                 */
+                stickyTracking: true
+            });
+            return HLCSeries;
+        }(ColumnSeries));
+        extend(HLCSeries.prototype, {
+            animate: null,
+            directTouch: false,
+            pointArrayMap: ['high', 'low', 'close'],
+            pointAttrToOptions: {
+                stroke: 'color',
+                'stroke-width': 'lineWidth'
+            },
+            pointValKey: 'close'
+        });
+        HLCSeries.prototype.pointClass = HLCPoint;
+        SeriesRegistry.registerSeriesType('hlc', HLCSeries);
+        /* *
+         *
+         *  Default Export
+         *
+         * */
+        /* *
+         *
+         *  API Options
          *
-         * @type      {boolean}
-         * @default   false
-         * @deprecated
-         * @apioption plotOptions.series.dataGrouping.smoothed
+         * */
+        /**
+         * A `hlc` series. If the [type](#series.hlc.type) option is not
+         * specified, it is inherited from [chart.type](#chart.type).
+         *
+         * @extends   series,plotOptions.hlc
+         * @excluding dataParser, dataURL
+         * @product   highstock
+         * @apioption series.hlc
          */
         /**
-         * An array determining what time intervals the data is allowed to be
-         * grouped to. Each array item is an array where the first value is
-         * the time unit and the second value another array of allowed multiples.
+         * An array of data points for the series. For the `hlc` series type,
+         * points can be given in the following ways:
          *
-         * Defaults to:
-         * ```js
-         * units: [[
-         *     'millisecond', // unit name
-         *     [1, 2, 5, 10, 20, 25, 50, 100, 200, 500] // allowed multiples
-         * ], [
-         *     'second',
-         *     [1, 2, 5, 10, 15, 30]
-         * ], [
-         *     'minute',
-         *     [1, 2, 5, 10, 15, 30]
-         * ], [
-         *     'hour',
-         *     [1, 2, 3, 4, 6, 8, 12]
-         * ], [
-         *     'day',
-         *     [1]
-         * ], [
-         *     'week',
-         *     [1]
-         * ], [
-         *     'month',
-         *     [1, 3, 6]
-         * ], [
-         *     'year',
-         *     null
-         * ]]
-         * ```
+         * 1. An array of arrays with 4 or 3 values. In this case, the values correspond
+         *    to `x,high,low,close`. If the first value is a string, it is applied
+         *    as the name of the point, and the `x` value is inferred. The `x` value can
+         *    also be omitted, in which case the inner arrays should be of length of 3\.
+         *    Then the `x` value is automatically calculated, either starting at 0 and
+         *    incremented by 1, or from `pointStart` and `pointInterval` given in the
+         *    series options.
+         *    ```js
+         *    data: [
+         *        [0, 5, 6, 7],
+         *        [1, 4, 8, 2],
+         *        [2, 3, 4, 10]
+         *    ]
+         *    ```
          *
-         * @type      {Array<Array<string,(Array<number>|null)>>}
-         * @apioption plotOptions.series.dataGrouping.units
+         * 2. An array of objects with named values. The following snippet shows only a
+         *    few settings, see the complete options set below. If the total number of
+         *    data points exceeds the series'
+         *    [turboThreshold](#series.hlc.turboThreshold), this option is not
+         *    available.
+         *    ```js
+         *    data: [{
+         *        x: 1,
+         *        high: 4,
+         *        low: 5,
+         *        close: 2,
+         *        name: "Point2",
+         *        color: "#00FF00"
+         *    }, {
+         *        x: 1,
+         *        high: 3,
+         *        low: 6,
+         *        close: 7,
+         *        name: "Point1",
+         *        color: "#FF00FF"
+         *    }]
+         *    ```
+         *
+         * @type      {Array<Array<(number|string),number,number>|Array<(number|string),number,number,number>|*>}
+         * @extends   series.arearange.data
+         * @excluding y, marker
+         * @product   highstock
+         * @apioption series.hlc.data
          */
         /**
-         * The approximate pixel width of each group. If for example a series
-         * with 30 points is displayed over a 600 pixel wide plot area, no grouping
-         * is performed. If however the series contains so many points that
-         * the spacing is less than the groupPixelWidth, Highcharts will try
-         * to group it into appropriate groups so that each is more or less
-         * two pixels wide. Defaults to `10`.
-         *
-         * @sample {highstock} stock/plotoptions/series-datagrouping-grouppixelwidth/
-         *         Two series with the same data density but different groupPixelWidth
+         * The closing value of each data point.
          *
          * @type      {number}
-         * @default   10
-         * @apioption plotOptions.column.dataGrouping.groupPixelWidth
+         * @product   highstock
+         * @apioption series.hlc.data.close
          */
-        ''; // required by JSDoc parsing
+        ''; // adds doclets above to transpilat
 
-        return dataGrouping;
+        return HLCSeries;
     });
     _registerModule(_modules, 'Series/OHLC/OHLCPoint.js', [_modules['Core/Series/SeriesRegistry.js']], function (SeriesRegistry) {
         /* *
@@ -3015,7 +4042,7 @@
                 d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
             };
         })();
-        var ColumnSeries = SeriesRegistry.seriesTypes.column;
+        var HLCSeries = SeriesRegistry.seriesTypes.hlc;
         /* *
          *
          *  Class
@@ -3031,12 +4058,8 @@
                  * */
                 var _this = _super !== null && _super.apply(this,
                     arguments) || this;
-                _this.close = void 0;
-                _this.high = void 0;
-                _this.low = void 0;
                 _this.open = void 0;
                 _this.options = void 0;
-                _this.plotClose = void 0;
                 _this.plotOpen = void 0;
                 _this.series = void 0;
                 return _this;
@@ -3052,7 +4075,6 @@
              * Extend the parent method by adding up or down to the class name.
              * @private
              * @function Highcharts.seriesTypes.ohlc#getClassName
-             * @return {string}
              */
             OHLCPoint.prototype.getClassName = function () {
                 return _super.prototype.getClassName.call(this) +
@@ -3106,7 +4128,7 @@
                 return this;
             };
             return OHLCPoint;
-        }(ColumnSeries.prototype.pointClass));
+        }(HLCSeries.prototype.pointClass));
         /* *
          *
          *  Default Export
@@ -3141,14 +4163,11 @@
                 d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
             };
         })();
-        var ColumnSeries = SeriesRegistry.seriesTypes.column;
-        var extend = U.extend,
+        var Series = SeriesRegistry.series,
+            HLCSeries = SeriesRegistry.seriesTypes.hlc;
+        var addEvent = U.addEvent,
+            extend = U.extend,
             merge = U.merge;
-        /* *
-         *
-         *  Class
-         *
-         * */
         /**
          * The ohlc series type.
          *
@@ -3176,97 +4195,31 @@
                 _this.data = void 0;
                 _this.options = void 0;
                 _this.points = void 0;
-                _this.yData = void 0;
                 return _this;
-                /* eslint-enable valid-jsdoc */
             }
             /* *
              *
              *  Functions
              *
              * */
-            /* eslint-disable valid-jsdoc */
-            /**
-             * Draw the data points
-             * @private
-             */
-            OHLCSeries.prototype.drawPoints = function () {
-                var series = this,
-                    points = series.points,
-                    chart = series.chart, 
-                    /**
-                     * Extend vertical stem to open and close values.
-                     */
-                    extendStem = function (path,
-                    halfStrokeWidth,
-                    openOrClose) {
-                        var start = path[0];
-                    var end = path[1];
-                    // We don't need to worry about crisp - openOrClose value
-                    // is already crisped and halfStrokeWidth should remove it.
-                    if (typeof start[2] === 'number') {
-                        start[2] = Math.max(openOrClose + halfStrokeWidth, start[2]);
-                    }
-                    if (typeof end[2] === 'number') {
-                        end[2] = Math.min(openOrClose - halfStrokeWidth, end[2]);
-                    }
-                };
-                points.forEach(function (point) {
-                    var plotOpen,
-                        plotClose,
-                        crispCorr,
-                        halfWidth,
-                        path,
-                        graphic = point.graphic,
-                        crispX,
-                        isNew = !graphic,
-                        strokeWidth;
-                    if (typeof point.plotY !== 'undefined') {
-                        // Create and/or update the graphic
-                        if (!graphic) {
-                            point.graphic = graphic = chart.renderer.path()
-                                .add(series.group);
-                        }
-                        if (!chart.styledMode) {
-                            graphic.attr(series.pointAttribs(point, (point.selected && 'select'))); // #3897
-                        }
-                        // crisp vector coordinates
-                        strokeWidth = graphic.strokeWidth();
-                        crispCorr = (strokeWidth % 2) / 2;
-                        // #2596:
-                        crispX = Math.round(point.plotX) - crispCorr;
-                        halfWidth = Math.round(point.shapeArgs.width / 2);
-                        // the vertical stem
-                        path = [
-                            ['M', crispX, Math.round(point.yBottom)],
-                            ['L', crispX, Math.round(point.plotHigh)]
-                        ];
-                        // open
-                        if (point.open !== null) {
-                            plotOpen = Math.round(point.plotOpen) + crispCorr;
-                            path.push(['M', crispX, plotOpen], ['L', crispX - halfWidth, plotOpen]);
-                            extendStem(path, strokeWidth / 2, plotOpen);
-                        }
-                        // close
-                        if (point.close !== null) {
-                            plotClose = Math.round(point.plotClose) + crispCorr;
-                            path.push(['M', crispX, plotClose], ['L', crispX + halfWidth, plotClose]);
-                            extendStem(path, strokeWidth / 2, plotClose);
-                        }
-                        graphic[isNew ? 'attr' : 'animate']({ d: path })
-                            .addClass(point.getClassName(), true);
-                    }
-                });
-            };
-            /**
-             * @private
-             * @function Highcarts.seriesTypes.ohlc#init
-             * @return {void}
-             */
-            OHLCSeries.prototype.init = function () {
-                _super.prototype.init.apply(this, arguments);
-                this.options.stacking = void 0; // #8817
+            OHLCSeries.prototype.getPointPath = function (point, graphic) {
+                var path = _super.prototype.getPointPath.call(this,
+                    point,
+                    graphic),
+                    strokeWidth = graphic.strokeWidth(),
+                    crispCorr = (strokeWidth % 2) / 2,
+                    crispX = Math.round(point.plotX) - crispCorr,
+                    halfWidth = Math.round(point.shapeArgs.width / 2);
+                var plotOpen = point.plotOpen;
+                // crisp vector coordinates
+                if (point.open !== null) {
+                    plotOpen = Math.round(point.plotOpen) + crispCorr;
+                    path.push(['M', crispX, plotOpen], ['L', crispX - halfWidth, plotOpen]);
+                    _super.prototype.extendStem.call(this, path, strokeWidth / 2, plotOpen);
+                }
+                return path;
             };
+            /* eslint-disable valid-jsdoc */
             /**
              * Postprocess mapping between options and SVG attributes
              * @private
@@ -3288,43 +4241,6 @@
                 // return a plain array for speedy calculation
                 return [point.open, point.high, point.low, point.close];
             };
-            /**
-             * Translate data points from raw values x and y to plotX and plotY
-             *
-             * @private
-             * @function Highcharts.seriesTypes.ohlc#translate
-             * @return {void}
-             */
-            OHLCSeries.prototype.translate = function () {
-                var series = this,
-                    yAxis = series.yAxis,
-                    hasModifyValue = !!series.modifyValue,
-                    translated = [
-                        'plotOpen',
-                        'plotHigh',
-                        'plotLow',
-                        'plotClose',
-                        'yBottom'
-                    ]; // translate OHLC for
-                    _super.prototype.translate.apply(series);
-                // Do the translation
-                series.points.forEach(function (point) {
-                    [point.open, point.high, point.low, point.close, point.low]
-                        .forEach(function (value, i) {
-                        if (value !== null) {
-                            if (hasModifyValue) {
-                                value = series.modifyValue(value);
-                            }
-                            point[translated[i]] =
-                                yAxis.toPixels(value, true);
-                        }
-                    });
-                    // Align the tooltip to the high value to avoid covering the
-                    // point
-                    point.tooltipPos[1] =
-                        point.plotHigh + yAxis.pos - series.chart.plotTop;
-                });
-            };
             /**
              * An OHLC chart is a style of financial chart used to describe price
              * movements over time. It displays open, high, low and close values per
@@ -3333,39 +4249,28 @@
              * @sample stock/demo/ohlc/
              *         OHLC chart
              *
-             * @extends      plotOptions.column
-             * @excluding    borderColor, borderRadius, borderWidth, crisp, stacking,
-             *               stack
+             * @extends      plotOptions.hlc
              * @product      highstock
              * @optionparent plotOptions.ohlc
              */
-            OHLCSeries.defaultOptions = merge(ColumnSeries.defaultOptions, {
+            /**
+             * The parameter allows setting line series type and use OHLC indicators.
+             * Data in OHLC format is required.
+             *
+             * @sample {highstock} stock/indicators/use-ohlc-data
+             *         Use OHLC data format to plot line chart
+             *
+             * @type      {boolean}
+             * @product   highstock
+             * @apioption plotOptions.line.useOhlcData
+             */
+            OHLCSeries.defaultOptions = merge(HLCSeries.defaultOptions, {
                 /**
-                 * The approximate pixel width of each group. If for example a series
-                 * with 30 points is displayed over a 600 pixel wide plot area, no
-                 * grouping is performed. If however the series contains so many points
-                 * that the spacing is less than the groupPixelWidth, Highcharts will
-                 * try to group it into appropriate groups so that each is more or less
-                 * two pixels wide. Defaults to `5`.
-                 *
-                 * @type      {number}
-                 * @default   5
+                 * @type      {Highcharts.DataGroupingApproximationValue|Function}
+                 * @default   ohlc
                  * @product   highstock
-                 * @apioption plotOptions.ohlc.dataGrouping.groupPixelWidth
-                 */
-                /**
-                 * The pixel width of the line/border. Defaults to `1`.
-                 *
-                 * @sample {highstock} stock/plotoptions/ohlc-linewidth/
-                 *         A greater line width
-                 *
-                 * @type    {number}
-                 * @default 1
-                 * @product highstock
-                 *
-                 * @private
+                 * @apioption plotOptions.ohlc.dataGrouping.approximation
                  */
-                lineWidth: 1,
                 tooltip: {
                     pointFormat: '<span style="color:{point.color}">\u25CF</span> ' +
                         '<b> {series.name}</b><br/>' +
@@ -3373,42 +4278,17 @@
                         'High: {point.high}<br/>' +
                         'Low: {point.low}<br/>' +
                         'Close: {point.close}<br/>'
-                },
-                threshold: null,
-                states: {
-                    /**
-                     * @extends plotOptions.column.states.hover
-                     * @product highstock
-                     */
-                    hover: {
-                        /**
-                         * The pixel width of the line representing the OHLC point.
-                         *
-                         * @type    {number}
-                         * @default 3
-                         * @product highstock
-                         */
-                        lineWidth: 3
-                    }
-                },
+                }
                 /**
-                 * Determines which one of `open`, `high`, `low`, `close` values should
+                 * Determines which one of  `open`, `high`, `low`, `close` values should
                  * be represented as `point.y`, which is later used to set dataLabel
                  * position and [compare](#plotOptions.series.compare).
                  *
-                 * @sample {highstock} stock/plotoptions/ohlc-pointvalkey/
-                 *         Possible values
-                 *
-                 * @type       {string}
                  * @default    close
                  * @validvalue ["open", "high", "low", "close"]
                  * @product    highstock
                  * @apioption  plotOptions.ohlc.pointValKey
                  */
-                /**
-                 * @default   close
-                 * @apioption plotOptions.ohlc.colorKey
-                 */
                 /**
                  * Line color for up points.
                  *
@@ -3416,19 +4296,11 @@
                  * @product   highstock
                  * @apioption plotOptions.ohlc.upColor
                  */
-                stickyTracking: true
             });
             return OHLCSeries;
-        }(ColumnSeries));
+        }(HLCSeries));
         extend(OHLCSeries.prototype, {
-            animate: null,
-            directTouch: false,
-            pointArrayMap: ['open', 'high', 'low', 'close'],
-            pointAttrToOptions: {
-                stroke: 'color',
-                'stroke-width': 'lineWidth'
-            },
-            pointValKey: 'close'
+            pointArrayMap: ['open', 'high', 'low', 'close']
         });
         OHLCSeries.prototype.pointClass = OHLCPoint;
         SeriesRegistry.registerSeriesType('ohlc', OHLCSeries);
@@ -3437,6 +4309,30 @@
          *  Default Export
          *
          * */
+        // Add useOhlcData option
+        addEvent(Series, 'init', function (eventOptions) {
+            // eslint-disable-next-line no-invalid-this
+            var series = this,
+                options = eventOptions.options;
+            if (options.useOhlcData &&
+                options.id !== 'highcharts-navigator-series') {
+                extend(series, {
+                    pointValKey: OHLCSeries.prototype.pointValKey,
+                    // keys: ohlcProto.keys, // @todo potentially nonsense
+                    pointArrayMap: OHLCSeries.prototype.pointArrayMap,
+                    toYData: OHLCSeries.prototype.toYData
+                });
+            }
+        });
+        addEvent(Series, 'afterSetOptions', function (e) {
+            var options = e.options,
+                dataGrouping = options.dataGrouping;
+            if (dataGrouping &&
+                options.useOhlcData &&
+                options.id !== 'highcharts-navigator-series') {
+                dataGrouping.approximation = 'ohlc';
+            }
+        });
         /* *
          *
          *  API Options
@@ -3497,16 +4393,9 @@
          *
          * @type      {Array<Array<(number|string),number,number,number>|Array<(number|string),number,number,number,number>|*>}
          * @extends   series.arearange.data
-         * @excluding y, marker
-         * @product   highstock
-         * @apioption series.ohlc.data
-         */
-        /**
-         * The closing value of each data point.
-         *
-         * @type      {number}
+         * @excluding y, marker
          * @product   highstock
-         * @apioption series.ohlc.data.close
+         * @apioption series.ohlc.data
          */
         /**
          * The opening value of each data point.
@@ -3519,7 +4408,7 @@
 
         return OHLCSeries;
     });
-    _registerModule(_modules, 'Series/Candlestick/CandlestickSeries.js', [_modules['Core/DefaultOptions.js'], _modules['Core/Color/Palette.js'], _modules['Core/Series/SeriesRegistry.js'], _modules['Core/Utilities.js']], function (D, palette, SeriesRegistry, U) {
+    _registerModule(_modules, 'Series/Candlestick/CandlestickSeries.js', [_modules['Core/DefaultOptions.js'], _modules['Core/Series/SeriesRegistry.js'], _modules['Core/Utilities.js']], function (D, SeriesRegistry, U) {
         /* *
          *
          *  (c) 2010-2021 Torstein Honsi
@@ -3569,7 +4458,7 @@
             function CandlestickSeries() {
                 /* *
                  *
-                 * Static properties
+                 * Static Properties
                  *
                  * */
                 var _this = _super !== null && _super.apply(this,
@@ -3625,7 +4514,6 @@
              *
              * @private
              * @function Highcharts.seriesTypes.candlestick#drawPoints
-             * @return {void}
              */
             CandlestickSeries.prototype.drawPoints = function () {
                 var series = this,
@@ -3706,9 +4594,10 @@
                 });
                 /* eslint-enable valid-jsdoc */
             };
+            CandlestickSeries.defaultOptions = merge(OHLCSeries.defaultOptions, defaultOptions.plotOptions, 
             /**
-             * A candlestick chart is a style of financial chart used to describe price
-             * movements over time.
+             * A candlestick chart is a style of financial chart used to describe
+             * price movements over time.
              *
              * @sample stock/demo/candlestick/
              *         Candlestick chart
@@ -3718,7 +4607,7 @@
              * @product      highstock
              * @optionparent plotOptions.candlestick
              */
-            CandlestickSeries.defaultOptions = merge(OHLCSeries.defaultOptions, defaultOptions.plotOptions, {
+            {
                 /**
                  * The specific line color for up candle sticks. The default is to
                  * inherit the general `lineColor` setting.
@@ -3731,12 +4620,6 @@
                  * @product   highstock
                  * @apioption plotOptions.candlestick.upLineColor
                  */
-                /**
-                 * @type      {Highcharts.DataGroupingApproximationValue|Function}
-                 * @default   ohlc
-                 * @product   highstock
-                 * @apioption plotOptions.candlestick.dataGrouping.approximation
-                 */
                 states: {
                     /**
                      * @extends plotOptions.column.states.hover
@@ -3744,16 +4627,14 @@
                      */
                     hover: {
                         /**
-                         * The pixel width of the line/border around the candlestick.
+                         * The pixel width of the line/border around the
+                         * candlestick.
                          *
                          * @product highstock
                          */
                         lineWidth: 2
                     }
                 },
-                /**
-                 * @extends plotOptions.ohlc.tooltip
-                 */
                 tooltip: defaultOptions.plotOptions.ohlc.tooltip,
                 /**
                  * @type    {number|null}
@@ -3775,7 +4656,7 @@
                  * @default #000000
                  * @product highstock
                  */
-                lineColor: palette.neutralColor100,
+                lineColor: "#000000" /* neutralColor100 */,
                 /**
                  * The pixel width of the candlestick line/border. Defaults to `1`.
                  *
@@ -3800,8 +4681,8 @@
                  * @type    {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
                  * @default #ffffff
                  * @product highstock
-                 */
-                upColor: palette.backgroundColor,
+                */
+                upColor: "#ffffff" /* backgroundColor */,
                 /**
                  * @product highstock
                  */
@@ -3963,7 +4844,7 @@
 
         return FlagsPoint;
     });
-    _registerModule(_modules, 'Mixins/OnSeries.js', [_modules['Series/Column/ColumnSeries.js'], _modules['Core/Series/Series.js'], _modules['Core/Utilities.js']], function (ColumnSeries, Series, U) {
+    _registerModule(_modules, 'Series/OnSeriesComposition.js', [_modules['Series/Column/ColumnSeries.js'], _modules['Core/Series/Series.js'], _modules['Core/Utilities.js']], function (ColumnSeries, Series, U) {
         /* *
          *
          *  (c) 2010-2021 Torstein Honsi
@@ -3977,52 +4858,78 @@
         var seriesProto = Series.prototype;
         var defined = U.defined,
             stableSort = U.stableSort;
-        /**
-         * @private
-         * @mixin onSeriesMixin
-         */
-        var onSeriesMixin = {
-                /* eslint-disable valid-jsdoc */
-                /**
-                 * Override getPlotBox. If the onSeries option is valid,
-            return the plot box
-                 * of the onSeries,
-            otherwise proceed as usual.
-                 *
-                 * @private
-                 * @function onSeriesMixin.getPlotBox
-                 * @return {Highcharts.SeriesPlotBoxObject}
-                 */
-                getPlotBox: function () {
-                    return seriesProto.getPlotBox.call((this.options.onSeries &&
-                        this.chart.get(this.options.onSeries)) || this);
-            },
+        /* *
+         *
+         *  Composition
+         *
+         * */
+        var OnSeriesComposition;
+        (function (OnSeriesComposition) {
+            /* *
+             *
+             *  Declarations
+             *
+             * */
+            /* *
+             *
+             *  Properties
+             *
+             * */
+            var composedClasses = [];
+            /* *
+             *
+             *  Functions
+             *
+             * */
+            /* eslint-disable valid-jsdoc */
+            /**
+             * @private
+             */
+            function compose(SeriesClass) {
+                if (composedClasses.indexOf(SeriesClass) === -1) {
+                    composedClasses.push(SeriesClass);
+                    var seriesProto_1 = SeriesClass.prototype;
+                    seriesProto_1.getPlotBox = getPlotBox;
+                    seriesProto_1.translate = translate;
+                }
+                return SeriesClass;
+            }
+            OnSeriesComposition.compose = compose;
+            /**
+             * Override getPlotBox. If the onSeries option is valid, return the plot box
+             * of the onSeries, otherwise proceed as usual.
+             *
+             * @private
+             */
+            function getPlotBox() {
+                return seriesProto.getPlotBox.call((this.options.onSeries &&
+                    this.chart.get(this.options.onSeries)) || this);
+            }
+            OnSeriesComposition.getPlotBox = getPlotBox;
             /**
              * Extend the translate method by placing the point on the related series
              *
              * @private
-             * @function onSeriesMixin.translate
-             * @return {void}
              */
-            translate: function () {
+            function translate() {
                 columnProto.translate.apply(this);
                 var series = this,
                     options = series.options,
                     chart = series.chart,
                     points = series.points,
-                    cursor = points.length - 1,
-                    point,
-                    lastPoint,
                     optionsOnSeries = options.onSeries,
                     onSeries = (optionsOnSeries &&
                         chart.get(optionsOnSeries)),
-                    onKey = options.onKey || 'y',
                     step = onSeries && onSeries.options.step,
                     onData = (onSeries && onSeries.points),
-                    i = onData && onData.length,
                     inverted = chart.inverted,
                     xAxis = series.xAxis,
-                    yAxis = series.yAxis,
+                    yAxis = series.yAxis;
+                var cursor = points.length - 1,
+                    point,
+                    lastPoint,
+                    onKey = options.onKey || 'y',
+                    i = onData && onData.length,
                     xOffset = 0,
                     leftPoint,
                     lastX,
@@ -4036,9 +4943,7 @@
                     lastX = (onData[i - 1].x +
                         (currentDataGrouping ? currentDataGrouping.totalRange : 0)); // #2374
                     // sort the data points
-                    stableSort(points, function (a, b) {
-                        return (a.x - b.x);
-                    });
+                    stableSort(points, function (a, b) { return (a.x - b.x); });
                     onKey = 'plot' + onKey[0].toUpperCase() + onKey.substr(1);
                     while (i-- && points[cursor]) {
                         leftPoint = onData[i];
@@ -4117,10 +5022,15 @@
                 });
                 this.onSeries = onSeries;
             }
-            /* eslint-enable valid-jsdoc */
-        };
+            OnSeriesComposition.translate = translate;
+        })(OnSeriesComposition || (OnSeriesComposition = {}));
+        /* *
+         *
+         *  Default Export
+         *
+         * */
 
-        return onSeriesMixin;
+        return OnSeriesComposition;
     });
     _registerModule(_modules, 'Series/Flags/FlagsSymbols.js', [_modules['Core/Renderer/RendererRegistry.js'], _modules['Core/Renderer/SVG/SVGRenderer.js']], function (RendererRegistry, SVGRenderer) {
         /* *
@@ -4148,8 +5058,8 @@
         /**
          * Create the circlepin and squarepin icons with anchor.
          * @private
-         * @param {string} shape - circle or square
-         * @return {void}
+         * @param {string} shape
+         * circle or square
          */
         function createPinSymbol(shape) {
             symbols[(shape + 'pin')] = function (x, y, w, h, options) {
@@ -4216,7 +5126,7 @@
 
         return symbols;
     });
-    _registerModule(_modules, 'Series/Flags/FlagsSeries.js', [_modules['Series/Flags/FlagsPoint.js'], _modules['Core/Globals.js'], _modules['Mixins/OnSeries.js'], _modules['Core/Color/Palette.js'], _modules['Core/Renderer/RendererUtilities.js'], _modules['Core/Series/SeriesRegistry.js'], _modules['Core/Renderer/SVG/SVGElement.js'], _modules['Core/Utilities.js']], function (FlagsPoint, H, OnSeriesMixin, palette, R, SeriesRegistry, SVGElement, U) {
+    _registerModule(_modules, 'Series/Flags/FlagsSeries.js', [_modules['Series/Flags/FlagsPoint.js'], _modules['Core/Globals.js'], _modules['Series/OnSeriesComposition.js'], _modules['Core/Renderer/RendererUtilities.js'], _modules['Core/Series/SeriesRegistry.js'], _modules['Core/Renderer/SVG/SVGElement.js'], _modules['Core/Utilities.js']], function (FlagsPoint, H, OnSeriesComposition, R, SeriesRegistry, SVGElement, U) {
         /* *
          *
          *  (c) 2010-2021 Torstein Honsi
@@ -4421,11 +5331,15 @@
                 }
                 // Handle X-dimension overlapping
                 if (!options.allowOverlapX) {
+                    var maxDistance_1 = 100;
                     objectEach(boxesMap, function (box) {
                         box.plotX = box.anchorX;
                         boxes.push(box);
+                        maxDistance_1 = Math.max(box.size, maxDistance_1);
                     });
-                    distribute(boxes, inverted ? yAxis.len : this.xAxis.len, 100);
+                    // If necessary (for overlapping or long labels)  distribute it
+                    // depending on the label width or a hardcoded value, #16041.
+                    distribute(boxes, inverted ? yAxis.len : this.xAxis.len, maxDistance_1);
                     points.forEach(function (point) {
                         var box = point.graphic && boxesMap[point.plotX];
                         if (box) {
@@ -4689,7 +5603,7 @@
                  * @type    {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
                  * @product highstock
                  */
-                fillColor: palette.backgroundColor,
+                fillColor: "#ffffff" /* backgroundColor */,
                 /**
                  * The color of the line/border of the flag.
                  *
@@ -4719,14 +5633,14 @@
                          * @type    {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
                          * @product highstock
                          */
-                        lineColor: palette.neutralColor100,
+                        lineColor: "#000000" /* neutralColor100 */,
                         /**
                          * The fill or background color of the flag.
                          *
                          * @type    {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
                          * @product highstock
                          */
-                        fillColor: palette.highlightColor20
+                        fillColor: "#ccd6eb" /* highlightColor20 */
                     }
                 },
                 /**
@@ -4748,37 +5662,27 @@
             });
             return FlagsSeries;
         }(ColumnSeries));
+        OnSeriesComposition.compose(FlagsSeries);
         extend(FlagsSeries.prototype, {
             allowDG: false,
-            /**
-             * @private
-             * @function Highcharts.seriesTypes.flags#buildKDTree
-             */
-            buildKDTree: noop,
             forceCrop: true,
-            getPlotBox: OnSeriesMixin.getPlotBox,
+            invertible: false,
+            noSharedTooltip: true,
+            pointClass: FlagsPoint,
+            sorted: false,
+            takeOrdinalPosition: false,
+            trackerGroups: ['markerGroup'],
+            buildKDTree: noop,
             /**
              * Inherit the initialization from base Series.
-             *
              * @private
-             * @borrows Highcharts.Series#init as Highcharts.seriesTypes.flags#init
              */
             init: Series.prototype.init,
             /**
              * Don't invert the flag marker group (#4960).
-             *
              * @private
-             * @function Highcharts.seriesTypes.flags#invertGroups
              */
-            invertGroups: noop,
-            // Flags series group should not be invertible (#14063).
-            invertible: false,
-            noSharedTooltip: true,
-            pointClass: FlagsPoint,
-            sorted: false,
-            takeOrdinalPosition: false,
-            trackerGroups: ['markerGroup'],
-            translate: OnSeriesMixin.translate
+            invertGroups: noop
         });
         SeriesRegistry.registerSeriesType('flags', FlagsSeries);
         /* *
@@ -4958,7 +5862,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
@@ -4975,7 +5880,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,
@@ -4987,8 +5892,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;
@@ -5000,8 +5908,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;
@@ -5022,10 +5940,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);
@@ -5040,10 +5958,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;
                     }
@@ -5056,7 +5976,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
@@ -5155,6 +6075,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.
@@ -5176,7 +6098,7 @@
                  *
                  * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
                  */
-                barBackgroundColor: Palette.neutralColor20,
+                barBackgroundColor: "#cccccc" /* neutralColor20 */,
                 /**
                  * The width of the bar's border.
                  *
@@ -5189,7 +6111,7 @@
                  *
                  * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
                  */
-                barBorderColor: Palette.neutralColor20,
+                barBorderColor: "#cccccc" /* neutralColor20 */,
                 /**
                  * The color of the small arrow inside the scrollbar buttons.
                  *
@@ -5198,7 +6120,7 @@
                  *
                  * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
                  */
-                buttonArrowColor: Palette.neutralColor80,
+                buttonArrowColor: "#333333" /* neutralColor80 */,
                 /**
                  * The color of scrollbar buttons.
                  *
@@ -5207,7 +6129,7 @@
                  *
                  * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
                  */
-                buttonBackgroundColor: Palette.neutralColor10,
+                buttonBackgroundColor: "#e6e6e6" /* neutralColor10 */,
                 /**
                  * The color of the border of the scrollbar buttons.
                  *
@@ -5216,7 +6138,7 @@
                  *
                  * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
                  */
-                buttonBorderColor: Palette.neutralColor20,
+                buttonBorderColor: "#cccccc" /* neutralColor20 */,
                 /**
                  * The border width of the scrollbar buttons.
                  *
@@ -5229,7 +6151,7 @@
                  *
                  * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
                  */
-                rifleColor: Palette.neutralColor80,
+                rifleColor: "#333333" /* neutralColor80 */,
                 /**
                  * The color of the track background.
                  *
@@ -5238,7 +6160,7 @@
                  *
                  * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
                  */
-                trackBackgroundColor: Palette.neutralColor5,
+                trackBackgroundColor: "#f2f2f2" /* neutralColor5 */,
                 /**
                  * The color of the border of the scrollbar track.
                  *
@@ -5247,7 +6169,7 @@
                  *
                  * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
                  */
-                trackBorderColor: Palette.neutralColor5,
+                trackBorderColor: "#f2f2f2" /* neutralColor5 */,
                 /**
                  * The corner radius of the border of the scrollbar track.
                  *
@@ -5408,10 +6330,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',
@@ -5433,7 +6361,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,
@@ -5486,7 +6415,6 @@
              *
              * @private
              * @function Highcharts.Scrollbar#destroy
-             * @return {void}
              */
             Scrollbar.prototype.destroy = function () {
                 var scroller = this,
@@ -5519,7 +6447,6 @@
              * @function Highcharts.Scrollbar#drawScrollbarButton
              * @param {number} index
              *        0 is left, 1 is right
-             * @return {void}
              */
             Scrollbar.prototype.drawScrollbarButton = function (index) {
                 var scroller = this,
@@ -5612,7 +6539,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,
@@ -5673,7 +6601,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,
@@ -5722,7 +6649,6 @@
              *
              * @private
              * @function Highcharts.Scrollbar#removeEvents
-             * @return {void}
              */
             Scrollbar.prototype.removeEvents = function () {
                 this._events.forEach(function (args) {
@@ -5814,7 +6740,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,
@@ -5893,8 +6818,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) ||
@@ -5944,7 +6867,6 @@
              * @function Highcharts.Scrollbar#updatePosition
              * @param  {number} from
              * @param  {number} to
-             * @return {void}
              */
             Scrollbar.prototype.updatePosition = function (from, to) {
                 if (to > 1) {
@@ -6027,11 +6949,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;
@@ -6156,7 +7073,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
@@ -6364,13 +7281,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
@@ -6387,7 +7304,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.
@@ -6398,7 +7315,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.
@@ -6589,7 +7506,7 @@
                     className: 'highcharts-navigator-xaxis',
                     tickLength: 0,
                     lineWidth: 0,
-                    gridLineColor: Palette.neutralColor10,
+                    gridLineColor: "#e6e6e6" /* neutralColor10 */,
                     gridLineWidth: 1,
                     tickPixelInterval: 200,
                     labels: {
@@ -6599,7 +7516,7 @@
                          */
                         style: {
                             /** @ignore */
-                            color: Palette.neutralColor40
+                            color: "#999999" /* neutralColor40 */
                         },
                         x: 3,
                         y: -4
@@ -6782,17 +7699,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 {
@@ -6800,17 +7732,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]({
@@ -6996,7 +7936,6 @@
              *        Pixel value minimum
              * @param {number} [pxMax]
              *        Pixel value maximum
-             * @return {void}
              */
             Navigator.prototype.render = function (min, max, pxMin, pxMax) {
                 var navigator = this,
@@ -7273,7 +8212,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);
@@ -7369,7 +8307,6 @@
              * @function Highcharts.Navigator#onMouseUp
              * @param {Highcharts.PointerEventObject} e
              *        Mouse event
-             * @return {void}
              */
             Navigator.prototype.onMouseUp = function (e) {
                 var navigator = this,
@@ -7456,7 +8393,6 @@
              *
              * @private
              * @function Highcharts.Navigator#removeEvents
-             * @return {void}
              */
             Navigator.prototype.removeEvents = function () {
                 if (this.eventsToUnbind) {
@@ -7472,7 +8408,6 @@
              *
              * @private
              * @function Highcharts.Navigator#removeBaseSeriesEvents
-             * @return {void}
              */
             Navigator.prototype.removeBaseSeriesEvents = function () {
                 var baseSeries = this.baseSeries || [];
@@ -7558,7 +8493,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
@@ -7640,9 +8576,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],
@@ -7670,7 +8603,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,
@@ -7709,7 +8641,6 @@
              * @function Highcharts.Navigator.updateNavigatorSeries
              * @param {boolean} addEvents
              * @param {boolean} [redraw]
-             * @return {void}
              */
             Navigator.prototype.updateNavigatorSeries = function (addEvents, redraw) {
                 var navigator = this,
@@ -7850,7 +8781,6 @@
              *
              * @private
              * @function Highcharts.Navigator#addBaseSeriesEvent
-             * @return {void}
              */
             Navigator.prototype.addBaseSeriesEvents = function () {
                 var navigator = this,
@@ -8026,7 +8956,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
@@ -8044,7 +8974,6 @@
              *
              * @private
              * @function Highcharts.Navigator#addChartEvents
-             * @return {void}
              */
             Navigator.prototype.addChartEvents = function () {
                 if (!this.eventsToUnbind) {
@@ -8253,7 +9182,7 @@
 
         return H.Navigator;
     });
-    _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
@@ -8743,7 +9672,7 @@
                  */
                 inputStyle: {
                     /** @ignore */
-                    color: palette.highlightColor80,
+                    color: "#335cad" /* highlightColor80 */,
                     /** @ignore */
                     cursor: 'pointer'
                 },
@@ -8760,7 +9689,7 @@
                  */
                 labelStyle: {
                     /** @ignore */
-                    color: palette.neutralColor60
+                    color: "#666666" /* neutralColor60 */
                 }
             }
         });
@@ -8843,7 +9772,6 @@
              * @param {number} i
              *        The index of the button
              * @param {boolean} [redraw]
-             * @return {void}
              */
             RangeSelector.prototype.clickButton = function (i, redraw) {
                 var rangeSelector = this,
@@ -8941,7 +9869,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;
@@ -8986,7 +9915,6 @@
              * @private
              * @function Highcharts.RangeSelector#setSelected
              * @param {number} [selected]
-             * @return {void}
              */
             RangeSelector.prototype.setSelected = function (selected) {
                 this.selected = this.options.selected = selected;
@@ -8997,12 +9925,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,
@@ -9052,7 +9979,6 @@
              *
              * @private
              * @function Highcharts.RangeSelector#updateButtonStates
-             * @return {void}
              */
             RangeSelector.prototype.updateButtonStates = function () {
                 var rangeSelector = this,
@@ -9158,7 +10084,6 @@
              * @private
              * @function Highcharts.RangeSelector#computeButtonRange
              * @param {Highcharts.RangeSelectorButtonsOptions} rangeOptions
-             * @return {void}
              */
             RangeSelector.prototype.computeButtonRange = function (rangeOptions) {
                 var type = rangeOptions.type,
@@ -9193,12 +10118,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) ||
@@ -9211,9 +10135,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;
@@ -9228,7 +10149,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)
@@ -9241,10 +10163,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;
@@ -9269,7 +10187,6 @@
              * @private
              * @function Highcharts.RangeSelector#showInput
              * @param {string} name
-             * @return {void}
              */
             RangeSelector.prototype.showInput = function (name) {
                 var dateBox = name === 'min' ? this.minDateBox : this.maxDateBox;
@@ -9281,7 +10198,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'
                     });
@@ -9307,7 +10226,6 @@
              * @private
              * @function Highcharts.RangeSelector#hideInput
              * @param {string} name
-             * @return {void}
              */
             RangeSelector.prototype.hideInput = function (name) {
                 var input = name === 'min' ? this.minInput : this.maxInput;
@@ -9359,8 +10277,6 @@
              *
              * @private
              * @function Highcharts.RangeSelector#drawInput
-             * @param {string} name
-             * @return {RangeSelectorInputElements}
              */
             RangeSelector.prototype.drawInput = function (name) {
                 var _a = this,
@@ -9463,7 +10379,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',
@@ -9529,8 +10445,6 @@
              *
              * @private
              * @function Highcharts.RangeSelector#getPosition
-             *
-             * @return {Highcharts.Dictionary<number>}
              */
             RangeSelector.prototype.getPosition = function () {
                 var chart = this.chart,
@@ -9550,13 +10464,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,
@@ -9585,7 +10494,6 @@
              *        X axis minimum
              * @param {number} [max]
              *        X axis maximum
-             * @return {void}
              */
             RangeSelector.prototype.render = function (min, max) {
                 var chart = this.chart,
@@ -9639,7 +10547,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);
@@ -9672,7 +10581,6 @@
              *
              * @private
              * @function Highcharts.RangeSelector#renderButtons
-             * @return {void}
              */
             RangeSelector.prototype.renderButtons = function () {
                 var _this = this;
@@ -9773,7 +10681,6 @@
              *
              * @private
              * @function Highcharts.RangeSelector#alignElements
-             * @return {void}
              */
             RangeSelector.prototype.alignElements = function () {
                 var _this = this;
@@ -9929,7 +10836,6 @@
              * @function Highcharts.RangeSelector#alignButtonGroup
              * @param {number} xOffsetForExportButton
              * @param {number} [width]
-             * @return {void}
              */
             RangeSelector.prototype.alignButtonGroup = function (xOffsetForExportButton, width) {
                 var _a = this,
@@ -9959,7 +10865,6 @@
             /**
              * @private
              * @function Highcharts.RangeSelector#positionButtons
-             * @return {void}
              */
             RangeSelector.prototype.positionButtons = function () {
                 var _a = this,
@@ -10000,7 +10905,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;
@@ -10101,7 +11005,6 @@
              * @private
              * @function Highcharts.RangeSelector#collapseButtons
              * @param {number} xOffsetForExportButton
-             * @return {void}
              */
             RangeSelector.prototype.collapseButtons = function (xOffsetForExportButton) {
                 var _a = this,
@@ -10155,7 +11058,6 @@
              *
              * @private
              * @function Highcharts.RangeSelector#expandButtons
-             * @return {void}
              */
             RangeSelector.prototype.expandButtons = function () {
                 var _a = this,
@@ -10187,7 +11089,6 @@
              *
              * @private
              * @function Highcharts.RangeSelector#currentButtonIndex
-             * @return {number}
              */
             RangeSelector.prototype.currentButtonIndex = function () {
                 var dropdown = this.dropdown;
@@ -10201,7 +11102,6 @@
              *
              * @private
              * @function Highcharts.RangeSelector#showDropdown
-             * @return {void}
              */
             RangeSelector.prototype.showDropdown = function () {
                 var _a = this,
@@ -10225,7 +11125,6 @@
             /**
              * @private
              * @function Highcharts.RangeSelector#hideDropdown
-             * @return {void}
              */
             RangeSelector.prototype.hideDropdown = function () {
                 var dropdown = this.dropdown;
@@ -10244,7 +11143,7 @@
              * @private
              * @function Highcharts.RangeSelector#getHeight
              * @return {number}
-             *         Returns rangeSelector height
+             * Returns rangeSelector height
              */
             RangeSelector.prototype.getHeight = function () {
                 var rangeSelector = this,
@@ -10280,11 +11179,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 ||
@@ -10296,7 +11192,6 @@
              * @private
              * @function Highcharts.RangeSelector#update
              * @param {Highcharts.RangeSelectorOptions} options
-             * @return {void}
              */
             RangeSelector.prototype.update = function (options) {
                 var chart = this.chart;
@@ -10392,17 +11287,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;
             });
@@ -10439,7 +11331,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);
@@ -10646,7 +11539,7 @@
 
         return RangeSelector;
     });
-    _registerModule(_modules, 'Core/Chart/StockChart.js', [_modules['Core/Animation/AnimationUtilities.js'], _modules['Core/Axis/Axis.js'], _modules['Core/Chart/Chart.js'], _modules['Core/FormatUtilities.js'], _modules['Core/DefaultOptions.js'], _modules['Core/Color/Palette.js'], _modules['Core/Series/Point.js'], _modules['Core/Series/Series.js'], _modules['Core/Renderer/SVG/SVGRenderer.js'], _modules['Core/Utilities.js']], function (A, Axis, Chart, F, D, Palette, Point, Series, SVGRenderer, U) {
+    _registerModule(_modules, 'Core/Chart/StockChart.js', [_modules['Core/Animation/AnimationUtilities.js'], _modules['Core/Axis/Axis.js'], _modules['Core/Chart/Chart.js'], _modules['Core/FormatUtilities.js'], _modules['Core/DefaultOptions.js'], _modules['Core/Series/Series.js'], _modules['Core/Renderer/SVG/SVGRenderer.js'], _modules['Core/Utilities.js']], function (A, Axis, Chart, F, D, Series, SVGRenderer, U) {
         /* *
          *
          *  (c) 2010-2021 Torstein Honsi
@@ -10675,13 +11568,7 @@
         var animObject = A.animObject;
         var format = F.format;
         var getOptions = D.getOptions;
-        var pointTooltipFormatter = Point.prototype.tooltipFormatter;
-        var _a = Series.prototype,
-            seriesInit = _a.init,
-            seriesProcessData = _a.processData;
         var addEvent = U.addEvent,
-            arrayMax = U.arrayMax,
-            arrayMin = U.arrayMin,
             clamp = U.clamp,
             defined = U.defined,
             extend = U.extend,
@@ -10729,10 +11616,9 @@
              *        Function to run when the chart has loaded and and all external
              *        images are loaded.
              *
-             * @return {void}
              *
-             * @fires Highcharts.StockChart#event:init
-             * @fires Highcharts.StockChart#event:afterInit
+             * @emits Highcharts.StockChart#event:init
+             * @emits Highcharts.StockChart#event:afterInit
              */
             StockChart.prototype.init = function (userOptions, callback) {
                 var defaultOptions = getOptions(),
@@ -10758,7 +11644,8 @@
                         },
                         scrollbar: {
                             // #4988 - check if setOptions was called
-                            enabled: pick(defaultOptions.scrollbar && defaultOptions.scrollbar.enabled,
+                            enabled: pick((defaultOptions.scrollbar &&
+                                defaultOptions.scrollbar.enabled),
                     true)
                         },
                         rangeSelector: {
@@ -10787,15 +11674,15 @@
                 // apply X axis options to both single and multi y axes
                 options.xAxis = splat(userOptions.xAxis || {}).map(function (xAxisOptions, i) {
                     return merge(getDefaultAxisOptions('xAxis', xAxisOptions), defaultOptions.xAxis, // #3802
-                    defaultOptions.xAxis && defaultOptions.xAxis[i], // #7690
-                    xAxisOptions, // user options
+                    // #7690
+                    defaultOptions.xAxis && defaultOptions.xAxis[i], xAxisOptions, // user options
                     getForcedAxisOptions('xAxis', userOptions));
                 });
                 // apply Y axis options to both single and multi y axes
                 options.yAxis = splat(userOptions.yAxis || {}).map(function (yAxisOptions, i) {
                     return merge(getDefaultAxisOptions('yAxis', yAxisOptions), defaultOptions.yAxis, // #3802
-                    defaultOptions.yAxis && defaultOptions.yAxis[i], // #7690
-                    yAxisOptions // user options
+                    // #7690
+                    defaultOptions.yAxis && defaultOptions.yAxis[i], yAxisOptions // user options
                     );
                 });
                 _super.prototype.init.call(this, options, callback);
@@ -10806,14 +11693,10 @@
              *
              * @private
              * @function Highcharts.StockChart#createAxis
-             *
              * @param {string} type
-             *        An axis type.
-             *
+             * An axis type.
              * @param {Chart.CreateAxisOptionsObject} options
-             *        The axis creation options.
-             *
-             * @return {Highcharts.Axis | Highcharts.ColorAxis}
+             * The axis creation options.
              */
             StockChart.prototype.createAxis = function (type, options) {
                 options.axis = merge(getDefaultAxisOptions(type, options.axis), options.axis, getForcedAxisOptions(type, this.userOptions));
@@ -10869,9 +11752,6 @@
          *
          * @private
          * @function getDefaultAxisOptions
-         * @param {string} type
-         * @param {Highcharts.AxisOptions} options
-         * @return {Highcharts.AxisOptions}
          */
         function getDefaultAxisOptions(type, options) {
             if (type === 'xAxis') {
@@ -10918,9 +11798,6 @@
          *
          * @private
          * @function getForcedAxisOptions
-         * @param {string} type
-         * @param {Highcharts.Options} chartOptions
-         * @return {Highcharts.AxisOptions}
          */
         function getForcedAxisOptions(type, chartOptions) {
             if (type === 'xAxis') {
@@ -11139,9 +12016,6 @@
          *
          * @private
          * @function Highcharts.SVGRenderer#crispPolyLine
-         * @param {Highcharts.SVGPathArray} points
-         * @param {number} width
-         * @return {Highcharts.SVGPathArray}
          */
         SVGRenderer.prototype.crispPolyLine = function (points, width) {
             // points format: [['M', 0, 0], ['L', 100, 0]]
@@ -11215,12 +12089,12 @@
                         .attr({
                         fill: options.backgroundColor ||
                             point && point.series && point.series.color || // #14888
-                            Palette.neutralColor60,
+                            "#666666" /* neutralColor60 */,
                         stroke: options.borderColor || '',
                         'stroke-width': options.borderWidth || 0
                     })
                         .css(extend({
-                        color: Palette.backgroundColor,
+                        color: "#ffffff" /* backgroundColor */,
                         fontWeight: 'normal',
                         fontSize: '11px',
                         textAlign: 'center'
@@ -11313,76 +12187,6 @@
                     posy + crossBox.height / 2
             });
         });
-        /* ************************************************************************** *
-         *  Start value compare logic                                                 *
-         * ************************************************************************** */
-        /**
-         * Extend series.init by adding a method to modify the y value used for plotting
-         * on the y axis. This method is called both from the axis when finding dataMin
-         * and dataMax, and from the series.translate method.
-         *
-         * @ignore
-         * @function Highcharts.Series#init
-         */
-        Series.prototype.init = function () {
-            // Call base method
-            seriesInit.apply(this, arguments);
-            // Set comparison mode
-            this.initCompare(this.options.compare);
-        };
-        /**
-         * Highcharts Stock only. Set the
-         * [compare](https://api.highcharts.com/highstock/plotOptions.series.compare)
-         * mode of the series after render time. In most cases it is more useful running
-         * {@link Axis#setCompare} on the X axis to update all its series.
-         *
-         * @function Highcharts.Series#setCompare
-         *
-         * @param {string} [compare]
-         *        Can be one of `null` (default), `"percent"` or `"value"`.
-         */
-        Series.prototype.setCompare = function (compare) {
-            this.initCompare(compare);
-            // Survive to export, #5485
-            this.userOptions.compare = compare;
-        };
-        /**
-         * @ignore
-         * @function Highcharts.Series#initCompare
-         *
-         * @param {string} [compare]
-         *        Can be one of `null` (default), `"percent"` or `"value"`.
-         */
-        Series.prototype.initCompare = function (compare) {
-            // Set or unset the modifyValue method
-            this.modifyValue = (compare === 'value' || compare === 'percent') ?
-                function (value, point) {
-                    var compareValue = this.compareValue;
-                    if (typeof value !== 'undefined' &&
-                        typeof compareValue !== 'undefined') { // #2601, #5814
-                        // Get the modified value
-                        if (compare === 'value') {
-                            value -= compareValue;
-                            // Compare percent
-                        }
-                        else {
-                            value = 100 * (value / compareValue) -
-                                (this.options.compareBase === 100 ? 0 : 100);
-                        }
-                        // record for tooltip etc.
-                        if (point) {
-                            point.change = value;
-                        }
-                        return value;
-                    }
-                    return 0;
-                } :
-                null;
-            // Mark dirty
-            if (this.chart.hasRendered) {
-                this.isDirty = true;
-            }
-        };
         /**
          * Based on the data grouping options decides whether
          * the data should be cropped while processing.
@@ -11399,173 +12203,6 @@
                 chart.options.isStock);
             return groupingEnabled;
         };
-        /**
-         * Extend series.processData by finding the first y value in the plot area,
-         * used for comparing the following values
-         *
-         * @ignore
-         * @function Highcharts.Series#processData
-         */
-        Series.prototype.processData = function (force) {
-            var series = this,
-                i,
-                keyIndex = -1,
-                processedXData,
-                processedYData,
-                compareStart = series.options.compareStart === true ? 0 : 1,
-                length,
-                compareValue;
-            // call base method
-            seriesProcessData.apply(this, arguments);
-            if (series.xAxis && series.processedYData) { // not pies
-                // local variables
-                processedXData = series.processedXData;
-                processedYData = series.processedYData;
-                length = processedYData.length;
-                // For series with more than one value (range, OHLC etc), compare
-                // against close or the pointValKey (#4922, #3112, #9854)
-                if (series.pointArrayMap) {
-                    keyIndex = series.pointArrayMap.indexOf(series.options.pointValKey || series.pointValKey || 'y');
-                }
-                // find the first value for comparison
-                for (i = 0; i < length - compareStart; i++) {
-                    compareValue = processedYData[i] && keyIndex > -1 ?
-                        processedYData[i][keyIndex] :
-                        processedYData[i];
-                    if (isNumber(compareValue) &&
-                        processedXData[i + compareStart] >=
-                            series.xAxis.min &&
-                        compareValue !== 0) {
-                        series.compareValue = compareValue;
-                        break;
-                    }
-                }
-            }
-            return;
-        };
-        // Modify series extremes
-        addEvent(Series, 'afterGetExtremes', function (e) {
-            var dataExtremes = e.dataExtremes;
-            if (this.modifyValue && dataExtremes) {
-                var extremes = [
-                        this.modifyValue(dataExtremes.dataMin),
-                        this.modifyValue(dataExtremes.dataMax)
-                    ];
-                dataExtremes.dataMin = arrayMin(extremes);
-                dataExtremes.dataMax = arrayMax(extremes);
-            }
-        });
-        /**
-         * Highcharts Stock only. Set the compare mode on all series
-         * belonging to an Y axis after render time.
-         *
-         * @see [series.plotOptions.compare](https://api.highcharts.com/highstock/series.plotOptions.compare)
-         *
-         * @sample stock/members/axis-setcompare/
-         *         Set compoare
-         *
-         * @function Highcharts.Axis#setCompare
-         *
-         * @param {string} [compare]
-         *        The compare mode. Can be one of `null` (default), `"value"` or
-         *        `"percent"`.
-         *
-         * @param {boolean} [redraw=true]
-         *        Whether to redraw the chart or to wait for a later call to
-         *        {@link Chart#redraw}.
-         */
-        Axis.prototype.setCompare = function (compare, redraw) {
-            if (!this.isXAxis) {
-                this.series.forEach(function (series) {
-                    series.setCompare(compare);
-                });
-                if (pick(redraw, true)) {
-                    this.chart.redraw();
-                }
-            }
-        };
-        /**
-         * Extend the tooltip formatter by adding support for the point.change variable
-         * as well as the changeDecimals option.
-         *
-         * @ignore
-         * @function Highcharts.Point#tooltipFormatter
-         *
-         * @param {string} pointFormat
-         */
-        Point.prototype.tooltipFormatter = function (pointFormat) {
-            var point = this;
-            var numberFormatter = point.series.chart.numberFormatter;
-            pointFormat = pointFormat.replace('{point.change}', (point.change > 0 ? '+' : '') + numberFormatter(point.change, pick(point.series.tooltipOptions.changeDecimals, 2)));
-            return pointTooltipFormatter.apply(this, [pointFormat]);
-        };
-        /* ************************************************************************** *
-         *  End value compare logic                                                   *
-         * ************************************************************************** */
-        // Extend the Series prototype to create a separate series clip box. This is
-        // related to using multiple panes, and a future pane logic should incorporate
-        // this feature (#2754).
-        addEvent(Series, 'render', function () {
-            var chart = this.chart,
-                clipHeight;
-            // Only do this on not 3d (#2939, #5904) nor polar (#6057) charts, and only
-            // if the series type handles clipping in the animate method (#2975).
-            if (!(chart.is3d && chart.is3d()) &&
-                !chart.polar &&
-                this.xAxis &&
-                !this.xAxis.isRadial && // Gauge, #6192
-                this.options.clip !== false // #15128
-            ) {
-                clipHeight = this.yAxis.len;
-                // Include xAxis line width (#8031) but only if the Y axis ends on the
-                // edge of the X axis (#11005).
-                if (this.xAxis.axisLine) {
-                    var dist = chart.plotTop + chart.plotHeight -
-                            this.yAxis.pos - this.yAxis.len,
-                        lineHeightCorrection = Math.floor(this.xAxis.axisLine.strokeWidth() / 2);
-                    if (dist >= 0) {
-                        clipHeight -= Math.max(lineHeightCorrection - dist, 0);
-                    }
-                }
-                // First render, initial clip box. clipBox also needs to be updated if
-                // the series is rendered again before starting animating, in
-                // compliance with a responsive rule (#13858).
-                if (!chart.hasLoaded || (!this.clipBox && this.isDirty && !this.isDirtyData)) {
-                    this.clipBox = this.clipBox || merge(chart.clipBox);
-                    this.clipBox.width = this.xAxis.len;
-                    this.clipBox.height = clipHeight;
-                }
-                if (chart.hasRendered) {
-                    var animation = animObject(this.options.animation);
-                    // #15435: this.sharedClipKey might not have been set yet, for
-                    // example when updating the series, so we need to use this
-                    // function instead
-                    var sharedClipKey = this.getSharedClipKey(animation);
-                    var clipRect = chart.sharedClips[sharedClipKey];
-                    // On redrawing, resizing etc, update the clip rectangle.
-                    //
-                    // #15435: Update it even when we are creating/updating clipBox,
-                    // since there could be series updating and pane size changes
-                    // happening at the same time and we dont destroy shared clips in
-                    // stock.
-                    if (clipRect) {
-                        // animate in case resize is done during initial animation
-                        clipRect.animate({
-                            width: this.xAxis.len,
-                            height: clipHeight
-                        });
-                        var markerClipRect = chart.sharedClips[sharedClipKey + 'm'];
-                        // also change markers clip animation for consistency
-                        // (marker clip rects should exist only on chart init)
-                        if (markerClipRect) {
-                            markerClipRect.animate({
-                                width: this.xAxis.len
-                            });
-                        }
-                    }
-                }
-            }
-        });
         addEvent(Chart, 'update', function (e) {
             var options = e.options;
             // Use case: enabling scrollbar from a disabled state.
@@ -11582,68 +12219,10 @@
          *  Default Export
          *
          * */
-        /* *
-         *
-         *  API Options
-         *
-         * */
-        /**
-         * Compare the values of the series against the first non-null, non-
-         * zero value in the visible range. The y axis will show percentage
-         * or absolute change depending on whether `compare` is set to `"percent"`
-         * or `"value"`. When this is applied to multiple series, it allows
-         * comparing the development of the series against each other. Adds
-         * a `change` field to every point object.
-         *
-         * @see [compareBase](#plotOptions.series.compareBase)
-         * @see [Axis.setCompare()](/class-reference/Highcharts.Axis#setCompare)
-         *
-         * @sample {highstock} stock/plotoptions/series-compare-percent/
-         *         Percent
-         * @sample {highstock} stock/plotoptions/series-compare-value/
-         *         Value
-         *
-         * @type      {string}
-         * @since     1.0.1
-         * @product   highstock
-         * @apioption plotOptions.series.compare
-         */
-        /**
-         * Defines if comparison should start from the first point within the visible
-         * range or should start from the first point **before** the range.
-         *
-         * In other words, this flag determines if first point within the visible range
-         * will have 0% (`compareStart=true`) or should have been already calculated
-         * according to the previous point (`compareStart=false`).
-         *
-         * @sample {highstock} stock/plotoptions/series-comparestart/
-         *         Calculate compare within visible range
-         *
-         * @type      {boolean}
-         * @default   false
-         * @since     6.0.0
-         * @product   highstock
-         * @apioption plotOptions.series.compareStart
-         */
-        /**
-         * When [compare](#plotOptions.series.compare) is `percent`, this option
-         * dictates whether to use 0 or 100 as the base of comparison.
-         *
-         * @sample {highstock} stock/plotoptions/series-comparebase/
-         *         Compare base is 100
-         *
-         * @type       {number}
-         * @default    0
-         * @since      5.0.6
-         * @product    highstock
-         * @validvalue [0, 100]
-         * @apioption  plotOptions.series.compareBase
-         */
-        ''; // keeps doclets above in transpiled file
 
         return StockChart;
     });
-    _registerModule(_modules, 'masters/modules/stock.src.js', [_modules['Core/Globals.js'], _modules['Core/Axis/OrdinalAxis.js'], _modules['Core/Scrollbar.js'], _modules['Core/Chart/StockChart.js']], function (Highcharts, OrdinalAxis, Scrollbar, StockChart) {
+    _registerModule(_modules, 'masters/modules/stock.src.js', [_modules['Core/Globals.js'], _modules['Core/Axis/OrdinalAxis.js'], _modules['Series/DataModifyComposition.js'], _modules['Core/Scrollbar.js'], _modules['Core/Chart/StockChart.js']], function (Highcharts, OrdinalAxis, DataModifyComposition, Scrollbar, StockChart) {
 
         var G = Highcharts;
         // Classes
@@ -11652,6 +12231,7 @@
         // Compositions
         Scrollbar.compose(G.Axis);
         OrdinalAxis.compose(G.Axis, G.Series, G.Chart);
+        DataModifyComposition.compose(G.Series, G.Axis, G.Point);
 
     });
 }));