highcharts 9.2.2 → 9.3.3

package/highcharts-more.src.js

@@ -1,5 +1,5 @@
 /**
- * @license Highcharts JS v9.2.2 (2021-08-24)
+ * @license Highcharts JS v9.3.3 (2022-02-01)
  *
  * (c) 2009-2021 Torstein Honsi
  *
@@ -26,7 +26,7 @@
             obj[path] = fn.apply(null, args);
         }
     }
-    _registerModule(_modules, 'Extensions/Pane.js', [_modules['Core/Chart/Chart.js'], _modules['Core/Globals.js'], _modules['Core/Color/Palette.js'], _modules['Core/Pointer.js'], _modules['Core/Utilities.js'], _modules['Mixins/CenteredSeries.js']], function (Chart, H, palette, Pointer, U, centeredSeriesMixin) {
+    _registerModule(_modules, 'Extensions/Pane.js', [_modules['Core/Chart/Chart.js'], _modules['Series/CenteredUtilities.js'], _modules['Core/Globals.js'], _modules['Core/Pointer.js'], _modules['Core/Utilities.js']], function (Chart, CU, H, Pointer, U) {
         /* *
          *
          *  (c) 2010-2021 Torstein Honsi
@@ -185,7 +185,7 @@
                      * @since   2.3.0
                      * @product highcharts
                      */
-                    borderColor: palette.neutralColor20,
+                    borderColor: "#cccccc" /* neutralColor20 */,
                     /**
                      * The background color or gradient for the pane.
                      *
@@ -199,8 +199,8 @@
                         linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                         /** @ignore-option */
                         stops: [
-                            [0, palette.backgroundColor],
-                            [1, palette.neutralColor10]
+                            [0, "#ffffff" /* backgroundColor */],
+                            [1, "#e6e6e6" /* neutralColor10 */]
                         ]
                     },
                     /** @ignore-option */
@@ -329,12 +329,11 @@
              * @private
              * @function Highcharts.Pane#updateCenter
              * @param {Highcharts.Axis} [axis]
-             * @return {void}
              */
             Pane.prototype.updateCenter = function (axis) {
                 this.center = (axis ||
                     this.axis ||
-                    {}).center = centeredSeriesMixin.getCenter.call(this);
+                    {}).center = CU.getCenter.call(this);
             };
             /**
              * Destroy the pane item
@@ -360,7 +359,6 @@
              * @param {Highcharts.PaneOptions} options
              *        New pane options
              * @param {boolean} [redraw]
-             * @return {void}
              */
             Pane.prototype.update = function (options, redraw) {
                 merge(true, this.options, options);
@@ -378,10 +376,12 @@
         /**
          * Check whether element is inside or outside pane.
          * @private
-         * @param  {number} x Element's x coordinate
-         * @param  {number} y Element's y coordinate
-         * @param  {Array<number>} center Pane's center (x, y) and diameter
-         * @return {boolean}
+         * @param  {number} x
+         * Element's x coordinate
+         * @param  {number} y
+         * Element's y coordinate
+         * @param  {Array<number>} center
+         * Pane's center (x, y) and diameter
          */
         function isInsidePane(x, y, center) {
             return Math.sqrt(Math.pow(x - center[0], 2) + Math.pow(y - center[1], 2)) <= center[2] / 2;
@@ -645,8 +645,6 @@
              * anti-collision.
              *
              * @private
-             *
-             * @return {Highcharts.ChartLabelCollectorFunction}
              */
             function createLabelCollector() {
                 var _this = this;
@@ -724,17 +722,12 @@
              * getPlotLinePath method.
              *
              * @private
-             *
              * @param {number} _lineWidth
              * Line width is not used.
-             *
              * @param {number} [radius]
              * Radius of radial path.
-             *
              * @param {number} [innerRadius]
              * Inner radius of radial path.
-             *
-             * @return {Highcharts.RadialAxisPath}
              */
             function getLinePath(_lineWidth, radius, innerRadius) {
                 var center = this.pane.center,
@@ -767,7 +760,11 @@
                 else {
                     end = this.postTranslate(this.angleRad, r);
                     path = [
-                        ['M', this.center[0] + chart.plotLeft, this.center[1] + chart.plotTop],
+                        [
+                            'M',
+                            this.center[0] + chart.plotLeft,
+                            this.center[1] + chart.plotTop
+                        ],
                         ['L', end.x, end.y]
                     ];
                 }
@@ -789,17 +786,6 @@
              * Find the path for plot bands along the radial axis.
              *
              * @private
-             *
-             * @param {number} from
-             * From value.
-             *
-             * @param {number} to
-             * To value.
-             *
-             * @param {Highcharts.AxisPlotBandsOptions} options
-             * Band options.
-             *
-             * @return {Highcharts.RadialAxisPath}
              */
             function getPlotBandPath(from, to, options) {
                 var chart = this.chart,
@@ -994,14 +980,10 @@
              * distance from center.
              *
              * @private
-             *
              * @param {number} value
              * Point value.
-             *
              * @param {number} [length]
              * Distance from center.
-             *
-             * @return {Highcharts.PositionObject}
              */
             function getPosition(value, length) {
                 var translatedVal = this.translate(value);
@@ -1162,7 +1144,8 @@
                             AxisDefaults.defaultYAxisOptions, defaultRadialOptions);
                     // Apply the stack labels for yAxis in case of inverted chart
                     if (inverted && coll === 'yAxis') {
-                        this.defaultPolarOptions.stackLabels = AxisDefaults.defaultYAxisOptions.stackLabels;
+                        this.defaultPolarOptions.stackLabels = AxisDefaults
+                            .defaultYAxisOptions.stackLabels;
                         this.defaultPolarOptions.reversedStacks = true;
                     }
                 }
@@ -1336,14 +1319,10 @@
              * to final chart coordinates.
              *
              * @private
-             *
              * @param {number} angle
              * Translation angle.
-             *
              * @param {number} radius
              * Translation radius.
-             *
-             * @return {Highcharts.PositionObject}
              */
             function postTranslate(angle, radius) {
                 var chart = this.chart,
@@ -1716,8 +1695,7 @@
              */
             AreaRangeSeries.prototype.translate = function () {
                 var series = this,
-                    yAxis = series.yAxis,
-                    hasModifyValue = !!series.modifyValue;
+                    yAxis = series.yAxis;
                 areaProto.translate.apply(series);
                 // Set plotLow and plotHigh
                 series.points.forEach(function (point) {
@@ -1728,10 +1706,9 @@
                     }
                     else {
                         point.plotLow = plotY;
-                        point.plotHigh = yAxis.translate(hasModifyValue ?
-                            series.modifyValue(high, point) :
-                            high, 0, 1, 0, 1);
-                        if (hasModifyValue) {
+                        point.plotHigh = yAxis.translate(series.dataModify ?
+                            series.dataModify.modifyValue(high) : high, 0, 1, 0, 1);
+                        if (series.dataModify) {
                             point.yBottom = point.plotHigh;
                         }
                     }
@@ -1827,11 +1804,17 @@
                 // Create a line on both top and bottom of the range
                 linePath = []
                     .concat(lowerPath, higherPath);
-                // For the area path, we need to change the 'move' statement
-                // into 'lineTo'
-                if (!this.chart.polar && higherAreaPath[0] && higherAreaPath[0][0] === 'M') {
+                // For the area path, we need to change the 'move' statement into
+                // 'lineTo'
+                if (!this.chart.polar &&
+                    higherAreaPath[0] &&
+                    higherAreaPath[0][0] === 'M') {
                     // This probably doesn't work for spline
-                    higherAreaPath[0] = ['L', higherAreaPath[0][1], higherAreaPath[0][2]];
+                    higherAreaPath[0] = [
+                        'L',
+                        higherAreaPath[0][1],
+                        higherAreaPath[0][2]
+                    ];
                 }
                 this.graphPath = linePath;
                 this.areaPath = lowerPath.concat(higherAreaPath);
@@ -1863,13 +1846,17 @@
                     //
                     // TODO: We want to change this and allow multiple labels for both
                     // upper and lower values in the future - introducing some options
-                    // for which point value to use as Y for the dataLabel, so that
-                    // this could be handled in Series.drawDataLabels. This would also
-                    // improve performance since we now have to loop over all the
-                    // points multiple times to work around the data label logic.
+                    // for which point value to use as Y for the dataLabel, so that this
+                    // could be handled in Series.drawDataLabels. This would also
+                    // improve performance since we now have to loop over all the points
+                    // multiple times to work around the data label logic.
                     if (isArray(dataLabelOptions)) {
-                        upperDataLabelOptions = dataLabelOptions[0] || { enabled: false };
-                        lowerDataLabelOptions = dataLabelOptions[1] || { enabled: false };
+                        upperDataLabelOptions = dataLabelOptions[0] || {
+                            enabled: false
+                        };
+                        lowerDataLabelOptions = dataLabelOptions[1] || {
+                            enabled: false
+                        };
                     }
                     else {
                         // Make copies
@@ -1902,7 +1889,8 @@
                                 point.below = up;
                                 if (inverted) {
                                     if (!upperDataLabelOptions.align) {
-                                        upperDataLabelOptions.align = up ? 'right' : 'left';
+                                        upperDataLabelOptions.align = up ?
+                                            'right' : 'left';
                                     }
                                 }
                                 else {
@@ -1947,7 +1935,8 @@
                                 point.below = !up;
                                 if (inverted) {
                                     if (!lowerDataLabelOptions.align) {
-                                        lowerDataLabelOptions.align = up ? 'left' : 'right';
+                                        lowerDataLabelOptions.align = up ?
+                                            'left' : 'right';
                                     }
                                 }
                                 else {
@@ -2489,7 +2478,7 @@
 
         return AreaSplineRangeSeries;
     });
-    _registerModule(_modules, 'Series/BoxPlot/BoxPlotSeries.js', [_modules['Series/Column/ColumnSeries.js'], _modules['Core/Globals.js'], _modules['Core/Color/Palette.js'], _modules['Core/Series/SeriesRegistry.js'], _modules['Core/Utilities.js']], function (ColumnSeries, H, palette, SeriesRegistry, U) {
+    _registerModule(_modules, 'Series/BoxPlot/BoxPlotSeries.js', [_modules['Series/Column/ColumnSeries.js'], _modules['Core/Globals.js'], _modules['Core/Series/SeriesRegistry.js'], _modules['Core/Utilities.js']], function (ColumnSeries, H, SeriesRegistry, U) {
         /* *
          *
          *  (c) 2010-2021 Torstein Honsi
@@ -2805,7 +2794,7 @@
                  * @since   3.0
                  * @product highcharts
                  */
-                fillColor: palette.backgroundColor,
+                fillColor: "#ffffff" /* backgroundColor */,
                 /**
                  * The width of the line surrounding the box. If any of
                  * [stemWidth](#plotOptions.boxplot.stemWidth),
@@ -3202,7 +3191,7 @@
 
         return BoxPlotSeries;
     });
-    _registerModule(_modules, 'Series/Bubble/BubbleLegendDefaults.js', [_modules['Core/Color/Palette.js']], function (Palette) {
+    _registerModule(_modules, 'Series/Bubble/BubbleLegendDefaults.js', [], function () {
         /* *
          *
          *  (c) 2010-2021 Highsoft AS
@@ -3375,7 +3364,7 @@
                         /** @ignore-option */
                         fontSize: '10px',
                         /** @ignore-option */
-                        color: Palette.neutralColor100
+                        color: "#000000" /* neutralColor100 */
                     },
                     /**
                      * The x position offset of the label relative to the
@@ -3567,7 +3556,6 @@
              *        Bubble legend options
              * @param {Highcharts.Legend} legend
              *        Legend
-             * @return {void}
              */
             BubbleLegendItem.prototype.init = function (options, legend) {
                 this.options = options;
@@ -3580,9 +3568,8 @@
              *
              * @private
              * @function Highcharts.BubbleLegend#addToLegend
-             * @param {Array<(Highcharts.Point|Highcharts.Series)>}
-             *        All legend items
-             * @return {void}
+             * @param {Array<(Highcharts.Point|Highcharts.Series)>} items
+             * All legend items
              */
             BubbleLegendItem.prototype.addToLegend = function (items) {
                 // Insert bubbleLegend into legend items
@@ -3596,7 +3583,6 @@
              * @function Highcharts.BubbleLegend#drawLegendSymbol
              * @param {Highcharts.Legend} legend
              *        Legend instance
-             * @return {void}
              */
             BubbleLegendItem.prototype.drawLegendSymbol = function (legend) {
                 var chart = this.chart,
@@ -3639,7 +3625,6 @@
              *
              * @private
              * @function Highcharts.BubbleLegend#setOptions
-             * @return {void}
              */
             BubbleLegendItem.prototype.setOptions = function () {
                 var ranges = this.ranges,
@@ -3712,7 +3697,6 @@
              *
              * @private
              * @function Highcharts.BubbleLegend#render
-             * @return {void}
              */
             BubbleLegendItem.prototype.render = function () {
                 var renderer = this.chart.renderer,
@@ -3747,7 +3731,6 @@
              * @function Highcharts.BubbleLegend#renderRange
              * @param {Highcharts.LegendBubbleLegendRangesOptions} range
              *        Range options
-             * @return {void}
              */
             BubbleLegendItem.prototype.renderRange = function (range) {
                 var mainRange = this.ranges[0],
@@ -3829,7 +3812,6 @@
              *
              * @private
              * @function Highcharts.BubbleLegend#getMaxLabelSize
-             * @return {Highcharts.BBoxObject}
              */
             BubbleLegendItem.prototype.getMaxLabelSize = function () {
                 var labels = this.symbols.labels;
@@ -3872,7 +3854,6 @@
              *
              * @private
              * @function Highcharts.BubbleLegend#hideOverlappingLabels
-             * @return {void}
              */
             BubbleLegendItem.prototype.hideOverlappingLabels = function () {
                 var chart = this.chart,
@@ -3961,8 +3942,9 @@
                     plotSizeX = chart.plotSizeX,
                     plotSizeY = chart.plotSizeY,
                     bubbleSeries = chart.series[this.options.seriesIndex],
-                    minSize = Math.ceil(bubbleSeries.minPxSize),
-                    maxPxSize = Math.ceil(bubbleSeries.maxPxSize),
+                    pxSizes = bubbleSeries.getPxExtremes(),
+                    minSize = Math.ceil(pxSizes.minPxSize),
+                    maxPxSize = Math.ceil(pxSizes.maxPxSize),
                     plotSize = Math.min(plotSizeY,
                     plotSizeX);
                 var calculatedSize,
@@ -3992,7 +3974,6 @@
              * @function Highcharts.BubbleLegend#updateRanges
              * @param {number} min
              * @param {number} max
-             * @return {void}
              */
             BubbleLegendItem.prototype.updateRanges = function (min, max) {
                 var bubbleLegendOptions = this.legend.options.bubbleLegend;
@@ -4007,17 +3988,17 @@
              *
              * @private
              * @function Highcharts.BubbleLegend#correctSizes
-             * @return {void}
              */
             BubbleLegendItem.prototype.correctSizes = function () {
                 var legend = this.legend,
                     chart = this.chart,
                     bubbleSeries = chart.series[this.options.seriesIndex],
-                    bubbleSeriesSize = bubbleSeries.maxPxSize,
+                    pxSizes = bubbleSeries.getPxExtremes(),
+                    bubbleSeriesSize = pxSizes.maxPxSize,
                     bubbleLegendSize = this.options.maxSize;
                 if (Math.abs(Math.ceil(bubbleSeriesSize) - bubbleLegendSize) >
                     1) {
-                    this.updateRanges(this.options.minSize, bubbleSeries.maxPxSize);
+                    this.updateRanges(this.options.minSize, pxSizes.maxPxSize);
                     legend.render();
                 }
             };
@@ -4392,6 +4373,11 @@
             };
             return BubblePoint;
         }(ScatterPoint));
+        /* *
+         *
+         *  Class Prototype
+         *
+         * */
         extend(BubblePoint.prototype, {
             ttBelow: false
         });
@@ -4434,14 +4420,14 @@
         var _a = SeriesRegistry.seriesTypes,
             ColumnSeries = _a.column,
             ScatterSeries = _a.scatter;
-        var arrayMax = U.arrayMax,
+        var addEvent = U.addEvent,
+            arrayMax = U.arrayMax,
             arrayMin = U.arrayMin,
             clamp = U.clamp,
             extend = U.extend,
             isNumber = U.isNumber,
             merge = U.merge,
-            pick = U.pick,
-            pInt = U.pInt;
+            pick = U.pick;
         /* *
          *
          *  Class
@@ -4511,20 +4497,49 @@
              * the axis needs to add padding in accordance with the point sizes.
              * @private
              */
-            BubbleSeries.prototype.getRadii = function (zMin, zMax, series) {
+            BubbleSeries.prototype.getRadii = function () {
+                var _this = this;
                 var len,
                     i,
                     zData = this.zData,
                     yData = this.yData,
-                    minSize = series.minPxSize,
-                    maxSize = series.maxPxSize,
                     radii = [],
-                    value;
+                    value,
+                    zExtremes = this.chart.bubbleZExtremes;
+                var _a = this.getPxExtremes(),
+                    minPxSize = _a.minPxSize,
+                    maxPxSize = _a.maxPxSize;
+                // Get the collective Z extremes of all bubblish series. The chart-level
+                // `bubbleZExtremes` are only computed once, and reset on `updatedData`
+                // in any member series.
+                if (!zExtremes) {
+                    var zMin_1 = Number.MAX_VALUE;
+                    var zMax_1 = -Number.MAX_VALUE;
+                    var valid_1;
+                    this.chart.series.forEach(function (otherSeries) {
+                        if (otherSeries.bubblePadding && (otherSeries.visible ||
+                            !_this.chart.options.chart.ignoreHiddenSeries)) {
+                            var zExtremes_1 = otherSeries.getZExtremes();
+                            if (zExtremes_1) {
+                                zMin_1 = Math.min(zMin_1 || zExtremes_1.zMin, zExtremes_1.zMin);
+                                zMax_1 = Math.max(zMax_1 || zExtremes_1.zMax, zExtremes_1.zMax);
+                                valid_1 = true;
+                            }
+                        }
+                    });
+                    if (valid_1) {
+                        zExtremes = { zMin: zMin_1, zMax: zMax_1 };
+                        this.chart.bubbleZExtremes = zExtremes;
+                    }
+                    else {
+                        zExtremes = { zMin: 0, zMax: 0 };
+                    }
+                }
                 // Set the shape type and arguments to be picked up in drawPoints
                 for (i = 0, len = zData.length; i < len; i++) {
                     value = zData[i];
                     // Separate method to get individual radius for bubbleLegend
-                    radii.push(this.getRadius(zMin, zMax, minSize, maxSize, value, yData[i]));
+                    radii.push(this.getRadius(zExtremes.zMin, zExtremes.zMax, minPxSize, maxPxSize, value, yData[i]));
                 }
                 this.radii = radii;
             };
@@ -4594,25 +4609,28 @@
              * @private
              */
             BubbleSeries.prototype.translate = function () {
-                var i,
-                    data = this.data,
-                    point,
-                    radius,
-                    radii = this.radii;
                 // Run the parent method
                 _super.prototype.translate.call(this);
+                this.getRadii();
+                this.translateBubble();
+            };
+            BubbleSeries.prototype.translateBubble = function () {
+                var _a = this,
+                    data = _a.data,
+                    radii = _a.radii;
+                var minPxSize = this.getPxExtremes().minPxSize;
                 // Set the shape type and arguments to be picked up in drawPoints
-                i = data.length;
+                var i = data.length;
                 while (i--) {
-                    point = data[i];
-                    radius = radii ? radii[i] : 0; // #1737
-                    if (isNumber(radius) && radius >= this.minPxSize / 2) {
-                        // Shape arguments
-                        point.marker = extend(point.marker, {
-                            radius: radius,
-                            width: 2 * radius,
-                            height: 2 * radius
-                        });
+                    var point = data[i];
+                    var radius = radii ? radii[i] : 0; // #1737
+                        if (isNumber(radius) && radius >= minPxSize / 2) {
+                            // Shape arguments
+                            point.marker = extend(point.marker, {
+                                radius: radius,
+                                width: 2 * radius,
+                                height: 2 * radius
+                            });
                         // Alignment box for the data label
                         point.dlBox = {
                             x: point.plotX - radius,
@@ -4627,6 +4645,41 @@
                     }
                 }
             };
+            BubbleSeries.prototype.getPxExtremes = function () {
+                var smallestSize = Math.min(this.chart.plotWidth,
+                    this.chart.plotHeight);
+                var getPxSize = function (length) {
+                        var isPercent;
+                    if (typeof length === 'string') {
+                        isPercent = /%$/.test(length);
+                        length = parseInt(length, 10);
+                    }
+                    return isPercent ? smallestSize * length / 100 : length;
+                };
+                var minPxSize = getPxSize(pick(this.options.minSize, 8));
+                // Prioritize min size if conflict to make sure bubbles are
+                // always visible. #5873
+                var maxPxSize = Math.max(getPxSize(pick(this.options.maxSize, '20%')),
+                    minPxSize);
+                return { minPxSize: minPxSize, maxPxSize: maxPxSize };
+            };
+            BubbleSeries.prototype.getZExtremes = function () {
+                var options = this.options,
+                    zData = (this.zData || []).filter(isNumber);
+                if (zData.length) {
+                    var zMin = pick(options.zMin,
+                        clamp(arrayMin(zData),
+                        options.displayNegative === false ?
+                            (options.zThreshold || 0) :
+                            -Number.MAX_VALUE,
+                        Number.MAX_VALUE));
+                    var zMax = pick(options.zMax,
+                        arrayMax(zData));
+                    if (isNumber(zMin) && isNumber(zMax)) {
+                        return { zMin: zMin, zMax: zMax };
+                    }
+                }
+            };
             BubbleSeries.compose = BubbleLegendComposition.compose;
             /**
              * A bubble series is a three dimensional series type where each point
@@ -4879,6 +4932,10 @@
             specialGroup: 'group',
             zoneAxis: 'z'
         });
+        // On updated data in any series, delete the chart-level Z extremes cache
+        addEvent(BubbleSeries, 'updatedData', function (e) {
+            delete e.target.chart.bubbleZExtremes;
+        });
         /* *
          *
          *  Axis ?
@@ -4895,70 +4952,36 @@
                 isXAxis = this.isXAxis,
                 dataKey = isXAxis ? 'xData' : 'yData',
                 min = this.min,
-                extremes = {},
-                smallestSize = Math.min(chart.plotWidth,
-                chart.plotHeight),
-                zMin = Number.MAX_VALUE,
-                zMax = -Number.MAX_VALUE,
                 range = this.max - min,
                 transA = axisLength / range,
-                activeSeries = [];
+                hasActiveSeries;
             // Handle padding on the second pass, or on redraw
             this.series.forEach(function (series) {
-                var seriesOptions = series.options,
-                    zData;
                 if (series.bubblePadding &&
                     (series.visible || !chart.options.chart.ignoreHiddenSeries)) {
                     // Correction for #1673
                     axis.allowZoomOutside = true;
-                    // Cache it
-                    activeSeries.push(series);
-                    if (isXAxis) { // because X axis is evaluated first
-                        // For each series, translate the size extremes to pixel values
-                        ['minSize', 'maxSize'].forEach(function (prop) {
-                            var length = seriesOptions[prop],
-                                isPercent = /%$/.test(length);
-                            length = pInt(length);
-                            extremes[prop] = isPercent ?
-                                smallestSize * length / 100 :
-                                length;
-                        });
-                        series.minPxSize = extremes.minSize;
-                        // Prioritize min size if conflict to make sure bubbles are
-                        // always visible. #5873
-                        series.maxPxSize = Math.max(extremes.maxSize, extremes.minSize);
-                        // Find the min and max Z
-                        zData = series.zData.filter(isNumber);
-                        if (zData.length) { // #1735
-                            zMin = pick(seriesOptions.zMin, clamp(arrayMin(zData), seriesOptions.displayNegative === false ?
-                                seriesOptions.zThreshold :
-                                -Number.MAX_VALUE, zMin));
-                            zMax = pick(seriesOptions.zMax, Math.max(zMax, arrayMax(zData)));
-                        }
+                    hasActiveSeries = true;
+                    var data = series[dataKey];
+                    if (isXAxis) {
+                        series.getRadii(0, 0, series);
                     }
-                }
-            });
-            activeSeries.forEach(function (series) {
-                var data = series[dataKey],
-                    i = data.length,
-                    radius;
-                if (isXAxis) {
-                    series.getRadii(zMin, zMax, series);
-                }
-                if (range > 0) {
-                    while (i--) {
-                        if (isNumber(data[i]) &&
-                            axis.dataMin <= data[i] &&
-                            data[i] <= axis.max) {
-                            radius = series.radii ? series.radii[i] : 0;
-                            pxMin = Math.min(((data[i] - min) * transA) - radius, pxMin);
-                            pxMax = Math.max(((data[i] - min) * transA) + radius, pxMax);
+                    if (range > 0) {
+                        var i = data.length;
+                        while (i--) {
+                            if (isNumber(data[i]) &&
+                                axis.dataMin <= data[i] &&
+                                data[i] <= axis.max) {
+                                var radius = series.radii && series.radii[i] || 0;
+                                pxMin = Math.min(((data[i] - min) * transA) - radius, pxMin);
+                                pxMax = Math.max(((data[i] - min) * transA) + radius, pxMax);
+                            }
                         }
                     }
                 }
             });
             // Apply the padding to the min and max properties
-            if (activeSeries.length && range > 0 && !this.logarithmic) {
+            if (hasActiveSeries && range > 0 && !this.logarithmic) {
                 pxMax -= axisLength;
                 transA *= (axisLength +
                     Math.max(0, pxMin) - // #8901
@@ -5266,7 +5289,8 @@
              *
              * */
             ColumnRangeSeries.prototype.setOptions = function () {
-                merge(true, arguments[0], { stacking: void 0 }); // #14359 Prevent side-effect from stacking.
+                // #14359 Prevent side-effect from stacking.
+                merge(true, arguments[0], { stacking: void 0 });
                 return arearangeProto.setOptions.apply(this, arguments);
             };
             // eslint-disable-next-line valid-jsdoc
@@ -5644,15 +5668,18 @@
                     // topXwidth and bottomXwidth = width of lines from the center
                     // calculated from tanges proportion.
                     // Can not be a NaN #12514
-                    topXwidth = stackHeight ? (barW * (barY - topPointY)) / stackHeight : 0;
+                    topXwidth = stackHeight ?
+                        (barW * (barY - topPointY)) / stackHeight : 0;
                     // like topXwidth, but with height of point
-                    bottomXwidth = stackHeight ? (barW * (barY + barH - topPointY)) / stackHeight : 0;
+                    bottomXwidth = stackHeight ?
+                        (barW * (barY + barH - topPointY)) / stackHeight :
+                        0;
                     /*
                             /\
-                            /  \
+                           /  \
                     x1,y1,------ x2,y1
-                            /      \
-                        ----------
+                        /      \
+                       ----------
                     x4,y2        x3,y2
                     */
                     x1 = barX - topXwidth + barW;
@@ -5667,9 +5694,9 @@
                     }
                     // inverted chart
                     if (chart.inverted) {
-                        invBarPos = chart.plotWidth - barY;
-                        stackHeight = (topPointY -
-                            (chart.plotWidth - translatedThreshold));
+                        invBarPos = yAxis.width - barY;
+                        stackHeight =
+                            topPointY - (yAxis.width - translatedThreshold);
                         // proportion tanges
                         topXwidth = (barW *
                             (topPointY - invBarPos)) / stackHeight;
@@ -5826,7 +5853,7 @@
 
         return ColumnPyramidSeries;
     });
-    _registerModule(_modules, 'Series/ErrorBar/ErrorBarSeries.js', [_modules['Series/BoxPlot/BoxPlotSeries.js'], _modules['Series/Column/ColumnSeries.js'], _modules['Core/Color/Palette.js'], _modules['Core/Series/SeriesRegistry.js'], _modules['Core/Utilities.js']], function (BoxPlotSeries, ColumnSeries, palette, SeriesRegistry, U) {
+    _registerModule(_modules, 'Series/ErrorBar/ErrorBarSeries.js', [_modules['Series/BoxPlot/BoxPlotSeries.js'], _modules['Series/Column/ColumnSeries.js'], _modules['Core/Series/SeriesRegistry.js'], _modules['Core/Utilities.js']], function (BoxPlotSeries, ColumnSeries, SeriesRegistry, U) {
         /* *
          *
          *  (c) 2010-2021 Torstein Honsi
@@ -5941,7 +5968,7 @@
                  * @since   3.0
                  * @product highcharts
                  */
-                color: palette.neutralColor100,
+                color: "#000000" /* neutralColor100 */,
                 grouping: false,
                 /**
                  * The parent series of the error bar. The default value links it to
@@ -6122,13 +6149,13 @@
         }(Point));
         /* *
          *
-         *  Default export
+         *  Default Export
          *
          * */
 
         return GaugePoint;
     });
-    _registerModule(_modules, 'Series/Gauge/GaugeSeries.js', [_modules['Series/Gauge/GaugePoint.js'], _modules['Core/Globals.js'], _modules['Core/Color/Palette.js'], _modules['Core/Series/SeriesRegistry.js'], _modules['Core/Utilities.js']], function (GaugePoint, H, palette, SeriesRegistry, U) {
+    _registerModule(_modules, 'Series/Gauge/GaugeSeries.js', [_modules['Series/Gauge/GaugePoint.js'], _modules['Core/Globals.js'], _modules['Core/Series/SeriesRegistry.js'], _modules['Core/Utilities.js']], function (GaugePoint, H, SeriesRegistry, U) {
         /* *
          *
          *  (c) 2010-2021 Torstein Honsi
@@ -6226,8 +6253,8 @@
                         rearLength = ((pInt(pick(dialOptions.rearLength, '10%')) * radius) /
                             100),
                         baseWidth = dialOptions.baseWidth || 3,
-                        topWidth = dialOptions.topWidth || 1,
-                        overshoot = options.overshoot,
+                        topWidth = dialOptions.topWidth || 1;
+                    var overshoot = options.overshoot,
                         rotation = yAxis.startAngleRad + yAxis.translate(point.y,
                         null,
                         null,
@@ -6307,7 +6334,7 @@
                             stroke: dialOptions.borderColor || 'none',
                             'stroke-width': dialOptions.borderWidth || 0,
                             fill: dialOptions.backgroundColor ||
-                                palette.neutralColor100
+                                "#000000" /* neutralColor100 */
                         });
                     }
                 });
@@ -6332,9 +6359,9 @@
                         series.pivot.attr({
                             'stroke-width': pivotOptions.borderWidth || 0,
                             stroke: pivotOptions.borderColor ||
-                                palette.neutralColor20,
+                                "#cccccc" /* neutralColor20 */,
                             fill: pivotOptions.backgroundColor ||
-                                palette.neutralColor100
+                                "#000000" /* neutralColor100 */
                         });
                     }
                 }
@@ -6431,7 +6458,7 @@
                  * @product highcharts
                  */
                 dataLabels: {
-                    borderColor: palette.neutralColor20,
+                    borderColor: "#cccccc" /* neutralColor20 */,
                     borderRadius: 3,
                     borderWidth: 1,
                     crop: false,
@@ -6669,7 +6696,7 @@
         SeriesRegistry.registerSeriesType('gauge', GaugeSeries);
         /* *
          *
-         *  Default export
+         *  Default Export
          *
          * */
         /* *
@@ -6809,7 +6836,7 @@
                     seriesOptions = series.options;
                 if (this.isParentNode && seriesOptions.parentNode) {
                     var temp = seriesOptions.allowPointSelect;
-                    seriesOptions.allowPointSelect = seriesOptions.parentNode.allowPointSelect;
+                    seriesOptions.allowPointSelect = (seriesOptions.parentNode.allowPointSelect);
                     Point.prototype.firePointEvent.apply(this, arguments);
                     seriesOptions.allowPointSelect = temp;
                 }
@@ -6861,7 +6888,6 @@
              * @private
              * @param {Highcharts.Point} point The point that event occured.
              * @param {Highcharts.PointerEventObject} event Browser event, before normalization.
-             * @return {void}
              */
             onMouseDown: function (point, event) {
                 var normalizedEvent = this.chart.pointer.normalize(event);
@@ -6881,7 +6907,6 @@
              * @param {global.Event} event Browser event, before normalization.
              * @param {Highcharts.Point} point The point that event occured.
              *
-             * @return {void}
              */
             onMouseMove: function (point, event) {
                 if (point.fixedPosition && point.inDragMode) {
@@ -6914,7 +6939,6 @@
              *
              * @private
              * @param {Highcharts.Point} point The point that event occured.
-             * @return {void}
              */
             onMouseUp: function (point, event) {
                 if (point.fixedPosition) {
@@ -6938,7 +6962,6 @@
              *
              * @private
              * @param {Highcharts.Point} point The point that should show halo.
-             * @return {void}
              */
             redrawHalo: function (point) {
                 if (point && this.halo) {
@@ -7034,8 +7057,7 @@
                  * `plotX` and `plotY` position.
                  *
                  * @private
-                 * @return {void}
-                 */
+                     */
                 barycenter: function () {
                     var gravitationalConstant = this.options.gravitationalConstant,
                         xFactor = this.barycenter.xFactor,
@@ -7067,8 +7089,7 @@
                  *        Force calcualated in `repulsiveForceFunction`
                  * @param {Highcharts.PositionObject} distance
                  *        Distance between two nodes e.g. `{x, y}`
-                 * @return {void}
-                 */
+                     */
                 repulsive: function (node, force, distanceXY) {
                     var factor = force * this.diffTemperature / node.mass / node.degree;
                     if (!node.fixedPosition) {
@@ -7089,8 +7110,7 @@
                  *        Force calcualated in `repulsiveForceFunction`
                  * @param {Highcharts.PositionObject} distance
                  *        Distance between two nodes e.g. `{x, y}`
-                 * @return {void}
-                 */
+                     */
                 attractive: function (link, force, distanceXY) {
                     var massFactor = link.getMass(),
                         translatedX = -distanceXY.x * force * this.diffTemperature,
@@ -7138,8 +7158,7 @@
                  * @private
                  * @param {Highcharts.NetworkgraphLayout} layout layout object
                  * @param {Highcharts.Point} node node that should be translated
-                 * @return {void}
-                 */
+                     */
                 integrate: function (layout, node) {
                     var friction = -layout.options.friction,
                         maxSpeed = layout.options.maxSpeed,
@@ -7170,10 +7189,7 @@
                 /**
                  * Estiamte the best possible distance between two nodes, making graph
                  * readable.
-                 *
                  * @private
-                 * @param {Highcharts.NetworkgraphLayout} layout layout object
-                 * @return {number}
                  */
                 getK: function (layout) {
                     return Math.pow(layout.box.width * layout.box.height / layout.nodes.length, 0.5);
@@ -7228,8 +7244,7 @@
                  * position. Later, in `integrate()` forces are applied on nodes.
                  *
                  * @private
-                 * @return {void}
-                 */
+                     */
                 barycenter: function () {
                     var gravitationalConstant = this.options.gravitationalConstant,
                         xFactor = this.barycenter.xFactor,
@@ -7257,8 +7272,7 @@
                  *        Force calcualated in `repulsiveForceFunction`
                  * @param {Highcharts.PositionObject} distanceXY
                  *        Distance between two nodes e.g. `{x, y}`
-                 * @return {void}
-                 */
+                     */
                 repulsive: function (node, force, distanceXY, distanceR) {
                     node.dispX +=
                         (distanceXY.x / distanceR) * force / node.degree;
@@ -7279,8 +7293,7 @@
                  * @param {Highcharts.PositionObject} distanceXY
                  *        Distance between two nodes e.g. `{x, y}`
                  * @param {number} distanceR
-                 * @return {void}
-                 */
+                     */
                 attractive: function (link, force, distanceXY, distanceR) {
                     var massFactor = link.getMass(),
                         translatedX = (distanceXY.x / distanceR) * force,
@@ -7329,8 +7342,7 @@
                  *        Layout object
                  * @param {Highcharts.Point} node
                  *        Node that should be translated
-                 * @return {void}
-                 */
+                     */
                 integrate: function (layout, node) {
                     var distanceR;
                     node.dispX +=
@@ -7351,10 +7363,7 @@
                 /**
                  * Estiamte the best possible distance between two nodes, making graph
                  * readable.
-                 *
                  * @private
-                 * @param {object} layout layout object
-                 * @return {number}
                  */
                 getK: function (layout) {
                     return Math.pow(layout.box.width * layout.box.height / layout.nodes.length, 0.3);
@@ -7584,9 +7593,7 @@
             /**
              * Determine which of the quadrants should be used when placing node in
              * the QuadTree. Returned index is always in range `< 0 , 3 >`.
-             *
-             * @param {Highcharts.Point} point
-             * @return {number}
+             * @private
              */
             getBoxPosition: function (point) {
                 var left = point.plotX < this.box.left + this.box.width / 2,
@@ -8396,6 +8403,7 @@
                     });
                 }
             },
+            // #14439, new stable check.
             isStable: function () {
                 var tempDiff = Math.abs(this.prevSystemTemperature -
                         this.systemTemperature);
@@ -8730,9 +8738,6 @@
             /**
              * Check if two bubbles overlaps.
              * @private
-             * @param {Array} first bubble
-             * @param {Array} second bubble
-             * @return {Boolean} overlap or not
              */
             PackedBubbleSeries.prototype.checkOverlap = function (bubble1, bubble2) {
                 var diffX = bubble1[0] - bubble2[0], // diff of X center values
@@ -8752,7 +8757,16 @@
                     parentNodeLayout = series.parentNodeLayout,
                     nodeAdded,
                     parentNode = series.parentNode,
-                    PackedBubblePoint = series.pointClass;
+                    PackedBubblePoint = series.pointClass,
+                    layoutOptions = series.layout.options,
+                    parentMarkerOptions = {
+                        radius: series.parentNodeRadius,
+                        lineColor: series.color,
+                        fillColor: color(series.color).brighten(0.4).get()
+                    };
+                if (layoutOptions.parentNodeOptions) {
+                    parentMarkerOptions = merge(layoutOptions.parentNodeOptions.marker || {}, parentMarkerOptions);
+                }
                 series.parentNodeMass = 0;
                 series.points.forEach(function (p) {
                     series.parentNodeMass +=
@@ -8769,12 +8783,18 @@
                     if (!parentNode) {
                         parentNode = (new PackedBubblePoint()).init(this, {
                             mass: series.parentNodeRadius / 2,
-                            marker: {
-                                radius: series.parentNodeRadius
-                            },
+                            marker: parentMarkerOptions,
                             dataLabels: {
                                 inside: false
                             },
+                            states: {
+                                normal: {
+                                    marker: parentMarkerOptions
+                                },
+                                hover: {
+                                    marker: parentMarkerOptions
+                                }
+                            },
                             dataLabelOnNull: true,
                             degree: series.parentNodeRadius,
                             isParentNode: true,
@@ -8860,10 +8880,12 @@
                     parentAttribs = {},
                     nodeMarker = this.layout.options.parentNodeOptions.marker,
                     parentOptions = {
-                        fill: nodeMarker.fillColor || color(series.color).brighten(0.4).get(),
+                        fill: (nodeMarker.fillColor ||
+                            color(series.color).brighten(0.4).get()),
                         opacity: nodeMarker.fillOpacity,
                         stroke: nodeMarker.lineColor || series.color,
-                        'stroke-width': nodeMarker.lineWidth
+                        'stroke-width': pick(nodeMarker.lineWidth,
+                    series.options.lineWidth)
                     };
                 // create the group for parent Nodes if doesn't exist
                 if (!this.parentNodesGroup) {
@@ -9117,6 +9139,36 @@
                 }
                 return arr;
             };
+            /**
+             * Function that checks for a parentMarker and sets the correct opacity.
+             * @private
+             * @param {Highcharts.Pack} point
+             * Candidate point for opacity correction.
+             * @param {string} [state]
+             * The point state, can be either `hover`, `select` or 'normal'. If
+             * undefined, normal state is assumed.
+             *
+             * @return {Highcharts.SVGAttributes}
+             * The presentational attributes to be set on the point.
+             */
+            PackedBubbleSeries.prototype.pointAttribs = function (point, state) {
+                var options = this.options,
+                    hasParentMarker = point && point.isParentNode;
+                var attr,
+                    fillOpacity,
+                    markerOptions = options.marker;
+                if (hasParentMarker &&
+                    options.layoutAlgorithm &&
+                    options.layoutAlgorithm.parentNodeOptions) {
+                    markerOptions = options.layoutAlgorithm.parentNodeOptions.marker;
+                }
+                fillOpacity = markerOptions.fillOpacity;
+                attr = Series.prototype.pointAttribs.call(this, point, state);
+                if (fillOpacity !== 1) {
+                    attr['fill-opacity'] = fillOpacity;
+                }
+                return attr;
+            };
             /**
              * Function that is adding one bubble based on positions and sizes of
              * two other bubbles, lastBubble is the last added bubble, newOrigin is
@@ -9648,7 +9700,7 @@
                         marker: {
                             fillColor: null,
                             fillOpacity: 1,
-                            lineWidth: 1,
+                            lineWidth: null,
                             lineColor: null,
                             symbol: 'circle'
                         }
@@ -10119,7 +10171,7 @@
                 Composition.prototype.renderStackTotals = function () {
                     var yAxis = this.axis,
                         waterfallStacks = yAxis.waterfall.stacks,
-                        stackTotalGroup = yAxis.stacking && yAxis.stacking.stackTotalGroup,
+                        stackTotalGroup = (yAxis.stacking && yAxis.stacking.stackTotalGroup),
                         dummyStackItem = new StackItem(yAxis,
                         yAxis.options.stackLabels,
                         false, 0,
@@ -10288,7 +10340,7 @@
 
         return WaterfallPoint;
     });
-    _registerModule(_modules, 'Series/Waterfall/WaterfallSeries.js', [_modules['Core/Axis/Axis.js'], _modules['Core/Chart/Chart.js'], _modules['Core/Color/Palette.js'], _modules['Core/Series/SeriesRegistry.js'], _modules['Core/Utilities.js'], _modules['Core/Axis/WaterfallAxis.js'], _modules['Series/Waterfall/WaterfallPoint.js']], function (Axis, Chart, palette, SeriesRegistry, U, WaterfallAxis, WaterfallPoint) {
+    _registerModule(_modules, 'Series/Waterfall/WaterfallSeries.js', [_modules['Core/Axis/Axis.js'], _modules['Core/Chart/Chart.js'], _modules['Core/Series/SeriesRegistry.js'], _modules['Core/Utilities.js'], _modules['Core/Axis/WaterfallAxis.js'], _modules['Series/Waterfall/WaterfallPoint.js']], function (Axis, Chart, SeriesRegistry, U, WaterfallAxis, WaterfallPoint) {
         /* *
          *
          *  (c) 2010-2021 Torstein Honsi
@@ -10328,9 +10380,12 @@
         /**
          * Returns true if the key is a direct property of the object.
          * @private
-         * @param {*} obj - Object with property to test
-         * @param {string} key - Property key to test
-         * @return {boolean} - Whether it is a direct property
+         * @param {*} obj
+         * Object with property to test
+         * @param {string} key
+         * Property key to test
+         * @return {boolean}
+         * Whether it is a direct property
          */
         function ownProp(obj, key) {
             return Object.hasOwnProperty.call(obj, key);
@@ -10954,7 +11009,7 @@
                  * @since   3.0
                  * @product highcharts
                  */
-                lineColor: palette.neutralColor80,
+                lineColor: "#333333" /* neutralColor80 */,
                 /**
                  * A name for the dash style to use for the line connecting the columns
                  * of the waterfall series. Possible values: Dash, DashDot, Dot,
@@ -10979,7 +11034,7 @@
                  * @since   3.0
                  * @product highcharts
                  */
-                borderColor: palette.neutralColor80,
+                borderColor: "#333333" /* neutralColor80 */,
                 states: {
                     hover: {
                         lineWidthPlus: 0 // #3126
@@ -11299,8 +11354,10 @@
                     }
                     else { // curve from last point to this
                         connectors = this.getConnectors(segment, i, true, this.connectEnds);
-                        var rightContX = connectors.prevPointCont && connectors.prevPointCont.rightContX;
-                        var rightContY = connectors.prevPointCont && connectors.prevPointCont.rightContY;
+                        var rightContX = connectors.prevPointCont &&
+                                connectors.prevPointCont.rightContX;
+                        var rightContY = connectors.prevPointCont &&
+                                connectors.prevPointCont.rightContY;
                         ret = [
                             'C',
                             isNumber(rightContX) ? rightContX : connectors.plotX,
@@ -11324,7 +11381,8 @@
             // #6430 Areasplinerange series use unwrapped getPointSpline method, so
             // we need to set this method again.
             if (seriesTypes.areasplinerange) {
-                seriesTypes.areasplinerange.prototype.getPointSpline = seriesTypes.spline.prototype.getPointSpline;
+                seriesTypes.areasplinerange.prototype
+                    .getPointSpline = seriesTypes.spline.prototype.getPointSpline;
             }
         }
         /**
@@ -11454,7 +11512,7 @@
             animation = this.options.animation,
             group = this.group,
             markerGroup = this.markerGroup,
-            center = this.xAxis.center,
+            center = this.xAxis && this.xAxis.center,
             plotLeft = chart.plotLeft,
             plotTop = chart.plotTop,
             attribs,