highcharts 10.0.0 → 10.2.1

package/modules/map.src.js

@@ -1,5 +1,5 @@
 /**
- * @license Highmaps JS v10.0.0 (2022-03-07)
+ * @license Highmaps JS v10.2.1 (2022-08-29)
  *
  * Highmaps as a plugin for Highcharts or Highcharts Stock.
  *
@@ -638,7 +638,7 @@
                      * @type    {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
                      * @product highcharts highstock highmaps
                      */
-                    color: "#999999" /* neutralColor40 */
+                    color: "#999999" /* Palette.neutralColor40 */
                 },
                 /**
                  * The axis labels show the number for each tick.
@@ -680,7 +680,7 @@
                  * @type    {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
                  * @product highcharts highstock highmaps
                  */
-                minColor: "#e6ebf5" /* highlightColor10 */,
+                minColor: "#e6ebf5" /* Palette.highlightColor10 */,
                 /**
                  * The color to represent the maximum of the color axis. Unless
                  * [dataClasses](#colorAxis.dataClasses) or
@@ -699,7 +699,7 @@
                  * @type    {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
                  * @product highcharts highstock highmaps
                  */
-                maxColor: "#003399" /* highlightColor100 */,
+                maxColor: "#003399" /* Palette.highlightColor100 */,
                 /**
                  * Color stops for the gradient of a scalar color axis. Use this in
                  * cases where a linear gradient between a `minColor` and `maxColor`
@@ -707,6 +707,10 @@
                  * first item is a float between 0 and 1 assigning the relative
                  * position in the gradient, and the second item is the color.
                  *
+                 * @sample highcharts/coloraxis/coloraxis-stops/
+                 *         Color axis stops
+                 * @sample highcharts/coloraxis/color-key-with-stops/
+                 *         Color axis stops with custom colorKey
                  * @sample {highmaps} maps/demo/heatmap/
                  *         Heatmap with three color stops
                  *
@@ -1440,7 +1444,7 @@
                             setState: noop,
                             isDataClass: true,
                             setVisible: function () {
-                                vis = axis.visible = !vis;
+                                this.visible = vis = axis.visible = !vis;
                                 axis.series.forEach(function (series) {
                                     series.points.forEach(function (point) {
                                         if (point.dataClass === i) {
@@ -1776,7 +1780,6 @@
          * */
         var doc = H.doc;
         var addEvent = U.addEvent,
-            defined = U.defined,
             extend = U.extend,
             isNumber = U.isNumber,
             merge = U.merge,
@@ -1841,9 +1844,6 @@
                 chart = this.chart,
                 o = chart.options.mapNavigation,
                 attr,
-                states,
-                hoverStates,
-                selectStates,
                 outerHandler = function (e) {
                     this.handler.call(chart,
                 e);
@@ -1872,13 +1872,9 @@
                         attr = buttonOptions.theme;
                         attr.style = merge(buttonOptions.theme.style, buttonOptions.style // #3203
                         );
-                        states = attr.states;
-                        hoverStates = states && states.hover;
-                        selectStates = states && states.select;
-                        delete attr.states;
                     }
                     var button = chart.renderer
-                            .button(buttonOptions.text || '', 0, 0, outerHandler, attr, hoverStates, selectStates, void 0, n === 'zoomIn' ? 'topbutton' : 'bottombutton')
+                            .button(buttonOptions.text || '', 0, 0, outerHandler, attr, void 0, void 0, void 0, n === 'zoomIn' ? 'topbutton' : 'bottombutton')
                             .addClass('highcharts-map-navigation highcharts-' + {
                             zoomIn: 'zoom-in',
                             zoomOut: 'zoom-out'
@@ -2188,7 +2184,7 @@
             var mapNavigation = this.chart.options.mapNavigation;
             // Pinch status
             if (pick(mapNavigation.enableTouchZoom, mapNavigation.enabled)) {
-                this.chart.options.chart.pinchType = 'xy';
+                this.chart.options.chart.zooming.pinchType = 'xy';
             }
             proceed.apply(this, [].slice.call(arguments, 1));
         });
@@ -2204,7 +2200,7 @@
         });
 
     });
-    _registerModule(_modules, 'Series/ColorMapMixin.js', [_modules['Core/Globals.js'], _modules['Core/Series/Point.js'], _modules['Core/Utilities.js']], function (H, Point, U) {
+    _registerModule(_modules, 'Series/ColorMapComposition.js', [_modules['Core/Series/SeriesRegistry.js'], _modules['Core/Utilities.js']], function (SeriesRegistry, U) {
         /* *
          *
          *  (c) 2010-2021 Torstein Honsi
@@ -2214,66 +2210,92 @@
          *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
          *
          * */
-        // @todo cleanup & reduction - consider composition
-        var noop = H.noop,
-            seriesTypes = H.seriesTypes;
-        var defined = U.defined,
-            addEvent = U.addEvent;
-        // Move points to the top of the z-index order when hovered
-        addEvent(Point, 'afterSetState', function (e) {
-            var point = this;
-            if (point.moveToTopOnHover && point.graphic) {
-                point.graphic.attr({
-                    zIndex: e && e.state === 'hover' ? 1 : 0
-                });
-            }
-        });
-        /**
-         * Mixin for maps and heatmaps
+        var columnProto = SeriesRegistry.seriesTypes.column.prototype;
+        var addEvent = U.addEvent,
+            defined = U.defined;
+        /* *
          *
-         * @private
-         * @mixin Highcharts.colorMapPointMixin
-         */
-        var PointMixin = {
+         *  Composition
+         *
+         * */
+        var ColorMapComposition;
+        (function (ColorMapComposition) {
+            /* *
+             *
+             *  Declarations
+             *
+             * */
+            /* *
+             *
+             *  Constants
+             *
+             * */
+            var composedClasses = [];
+            ColorMapComposition.pointMembers = {
                 dataLabelOnNull: true,
                 moveToTopOnHover: true,
-                /* eslint-disable valid-jsdoc */
-                /**
-                 * Color points have a value option that determines whether or not it is
-                 * a null point
-                 * @private
-                 */
-                isValid: function () {
-                    // undefined is allowed
-                    return (this.value !== null &&
-                        this.value !== Infinity &&
-                        this.value !== -Infinity);
-            }
-            /* eslint-enable valid-jsdoc */
-        };
-        /**
-         * @private
-         * @mixin Highcharts.colorMapSeriesMixin
-         */
-        var SeriesMixin = {
-                pointArrayMap: ['value'],
+                isValid: pointIsValid
+            };
+            ColorMapComposition.seriesMembers = {
+                colorKey: 'value',
                 axisTypes: ['xAxis', 'yAxis', 'colorAxis'],
-                trackerGroups: ['group', 'markerGroup', 'dataLabelsGroup'],
-                getSymbol: noop,
                 parallelArrays: ['x', 'y', 'value'],
-                colorKey: 'value',
-                pointAttribs: seriesTypes.column.prototype.pointAttribs,
-                /* eslint-disable valid-jsdoc */
-                /**
-                 * Get the color attibutes to apply on the graphic
-                 * @private
-                 * @function Highcharts.colorMapSeriesMixin.colorAttribs
-                 * @param {Highcharts.Point} point
-                 * @return {Highcharts.SVGAttributes}
-                 *         The SVG attributes
-                 */
-                colorAttribs: function (point) {
-                    var ret = {};
+                pointArrayMap: ['value'],
+                trackerGroups: ['group', 'markerGroup', 'dataLabelsGroup'],
+                colorAttribs: seriesColorAttribs,
+                pointAttribs: columnProto.pointAttribs
+            };
+            /* *
+             *
+             *  Functions
+             *
+             * */
+            /**
+             * @private
+             */
+            function compose(SeriesClass) {
+                var PointClass = SeriesClass.prototype.pointClass;
+                if (composedClasses.indexOf(PointClass) === -1) {
+                    composedClasses.push(PointClass);
+                    addEvent(PointClass, 'afterSetState', onPointAfterSetState);
+                }
+                return SeriesClass;
+            }
+            ColorMapComposition.compose = compose;
+            /**
+             * Move points to the top of the z-index order when hovered.
+             * @private
+             */
+            function onPointAfterSetState(e) {
+                var point = this;
+                if (point.moveToTopOnHover && point.graphic) {
+                    point.graphic.attr({
+                        zIndex: e && e.state === 'hover' ? 1 : 0
+                    });
+                }
+            }
+            /**
+             * Color points have a value option that determines whether or not it is
+             * a null point
+             * @private
+             */
+            function pointIsValid() {
+                return (this.value !== null &&
+                    this.value !== Infinity &&
+                    this.value !== -Infinity &&
+                    // undefined is allowed, but NaN is not (#17279)
+                    (this.value === void 0 || !isNaN(this.value)));
+            }
+            /**
+             * Get the color attibutes to apply on the graphic
+             * @private
+             * @function Highcharts.colorMapSeriesMixin.colorAttribs
+             * @param {Highcharts.Point} point
+             * @return {Highcharts.SVGAttributes}
+             *         The SVG attributes
+             */
+            function seriesColorAttribs(point) {
+                var ret = {};
                 if (defined(point.color) &&
                     (!point.state || point.state === 'normal') // #15746
                 ) {
@@ -2281,13 +2303,14 @@
                 }
                 return ret;
             }
-        };
-        var ColorMapMixin = {
-                PointMixin: PointMixin,
-                SeriesMixin: SeriesMixin
-            };
+        })(ColorMapComposition || (ColorMapComposition = {}));
+        /* *
+         *
+         *  Default Export
+         *
+         * */
 
-        return ColorMapMixin;
+        return ColorMapComposition;
     });
     _registerModule(_modules, 'Maps/MapSymbols.js', [_modules['Core/Renderer/SVG/SVGRenderer.js']], function (SVGRenderer) {
         /* *
@@ -2616,7 +2639,7 @@
 
         return MapUtilities;
     });
-    _registerModule(_modules, 'Series/Map/MapPoint.js', [_modules['Series/ColorMapMixin.js'], _modules['Maps/MapUtilities.js'], _modules['Core/Series/SeriesRegistry.js'], _modules['Core/Utilities.js']], function (ColorMapMixin, MapUtilities, SeriesRegistry, U) {
+    _registerModule(_modules, 'Series/Map/MapPoint.js', [_modules['Series/ColorMapComposition.js'], _modules['Maps/MapUtilities.js'], _modules['Core/Series/SeriesRegistry.js'], _modules['Core/Utilities.js']], function (ColorMapComposition, MapUtilities, SeriesRegistry, U) {
         /* *
          *
          *  (c) 2010-2021 Torstein Honsi
@@ -2747,7 +2770,7 @@
              */
             MapPoint.prototype.onMouseOver = function (e) {
                 U.clearTimeout(this.colorInterval);
-                if (this.value !== null || this.series.options.nullInteraction) {
+                if (!this.isNull || this.series.options.nullInteraction) {
                     _super.prototype.onMouseOver.call(this, e);
                 }
                 else {
@@ -2777,9 +2800,9 @@
             return MapPoint;
         }(ScatterSeries.prototype.pointClass));
         extend(MapPoint.prototype, {
-            dataLabelOnNull: ColorMapMixin.PointMixin.dataLabelOnNull,
-            isValid: ColorMapMixin.PointMixin.isValid,
-            moveToTopOnHover: ColorMapMixin.PointMixin.moveToTopOnHover
+            dataLabelOnNull: ColorMapComposition.pointMembers.dataLabelOnNull,
+            moveToTopOnHover: ColorMapComposition.pointMembers.moveToTopOnHover,
+            isValid: ColorMapComposition.pointMembers.isValid
         });
         /* *
          *
@@ -2872,8 +2895,10 @@
                      * @type   {string}
                      * @sample maps/mapview/projection-explorer
                      *         Projection explorer
-                     * @sample maps/mapview/projection-custom
+                     * @sample maps/mapview/projection-custom-proj4js
                      *         Custom UTM projection definition
+                     * @sample maps/mapview/projection-custom-d3geo
+                     *         Custom Robinson projection definition
                      * @sample maps/demo/topojson-projection
                      *         Orthographic projection
                      */
@@ -2962,7 +2987,7 @@
                  *         Inset border options
                  * @type {Highcharts.ColorType}
                  */
-                borderColor: "#cccccc" /* neutralColor20 */,
+                borderColor: "#cccccc" /* Palette.neutralColor20 */,
                 /**
                  * The pixel border width of the insets.
                  *
@@ -3086,7 +3111,7 @@
 
         return defaultOptions;
     });
-    _registerModule(_modules, 'Extensions/GeoJSON.js', [_modules['Core/Chart/Chart.js'], _modules['Core/FormatUtilities.js'], _modules['Core/Globals.js'], _modules['Maps/MapUtilities.js'], _modules['Core/Utilities.js']], function (Chart, F, H, MU, U) {
+    _registerModule(_modules, 'Extensions/GeoJSON.js', [_modules['Core/Chart/Chart.js'], _modules['Core/FormatUtilities.js'], _modules['Core/Globals.js'], _modules['Core/Utilities.js']], function (Chart, F, H, U) {
         /* *
          *
          *  (c) 2010-2021 Torstein Honsi
@@ -3098,7 +3123,6 @@
          * */
         var format = F.format;
         var win = H.win;
-        var pointInPolygon = MU.pointInPolygon;
         var error = U.error,
             extend = U.extend,
             merge = U.merge,
@@ -3369,7 +3393,7 @@
                 sinAngle = transform.sinAngle ||
                     (transform.rotation && Math.sin(transform.rotation)), 
                 // Note: Inverted sinAngle to reverse rotation direction
-                projected = win.proj4(transform.crs, 'WGS84',
+                projected = proj4(transform.crs, 'WGS84',
                 transform.rotation ? {
                     x: normalized.x * cosAngle + normalized.y * -sinAngle,
                     y: normalized.x * sinAngle + normalized.y * cosAngle
@@ -3484,7 +3508,8 @@
                     copyrightUrl: topology.copyrightUrl,
                     features: features,
                     'hc-recommended-mapview': object['hc-recommended-mapview'],
-                    bbox: topology.bbox
+                    bbox: topology.bbox,
+                    title: topology.title
                 };
             object['hc-decoded-geojson'] = geojson;
             return geojson;
@@ -3997,14 +4022,19 @@
          *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
          *
          * */
-        var __spreadArrays = (this && this.__spreadArrays) || function () {
-                for (var s = 0,
-            i = 0,
-            il = arguments.length; i < il; i++) s += arguments[i].length;
-            for (var r = Array(s), k = 0, i = 0; i < il; i++)
-                for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
-                    r[k] = a[j];
-            return r;
+        var __spreadArray = (this && this.__spreadArray) || function (to,
+            from,
+            pack) {
+                if (pack || arguments.length === 2) for (var i = 0,
+            l = from.length,
+            ar; i < l; i++) {
+                    if (ar || !(i in from)) {
+                        if (!ar) ar = Array.prototype.slice.call(from, 0,
+            i);
+                    ar[i] = from[i];
+                }
+            }
+            return to.concat(ar || Array.prototype.slice.call(from));
         };
         var clipLineString = PC.clipLineString,
             clipPolygon = PC.clipPolygon;
@@ -4133,7 +4163,7 @@
                         var greatCircle = Projection.greatCircle(poly[i],
                             poly[i + 1]);
                         if (greatCircle.length) {
-                            poly.splice.apply(poly, __spreadArrays([i + 1, 0], greatCircle));
+                            poly.splice.apply(poly, __spreadArray([i + 1, 0], greatCircle, false));
                         }
                     }
                 }
@@ -4300,13 +4330,14 @@
                             var lonMinus = wrapLon(antimeridian -
                                     intersections[i].direction * floatCorrection);
                             var slice = poly.splice.apply(poly,
-                                __spreadArrays([index,
+                                __spreadArray([index,
                                     intersections[i + 1].i - index],
                                 Projection.greatCircle([lonPlus,
                                 intersections[i].lat],
                                 [lonPlus,
                                 intersections[i + 1].lat],
-                                true)));
+                                true),
+                                false));
                             // Add interpolated points close to the cut
                             slice.push.apply(slice, Projection.greatCircle([lonMinus, intersections[i + 1].lat], [lonMinus, intersections[i].lat], true));
                             polygons.push(slice);
@@ -4339,8 +4370,8 @@
                                         polarSegment.push([lon, polarLatitude]);
                                     }
                                     polarSegment.push.apply(polarSegment, Projection.greatCircle([lon2, polarLatitude], [lon2, polarIntersection.lat], true));
-                                    poly_1.splice.apply(poly_1, __spreadArrays([indexOf,
-                                        0], polarSegment));
+                                    poly_1.splice.apply(poly_1, __spreadArray([indexOf,
+                                        0], polarSegment, false));
                                     break;
                                 }
                             }
@@ -4607,14 +4638,19 @@
                 d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
             };
         })();
-        var __spreadArrays = (this && this.__spreadArrays) || function () {
-                for (var s = 0,
-            i = 0,
-            il = arguments.length; i < il; i++) s += arguments[i].length;
-            for (var r = Array(s), k = 0, i = 0; i < il; i++)
-                for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
-                    r[k] = a[j];
-            return r;
+        var __spreadArray = (this && this.__spreadArray) || function (to,
+            from,
+            pack) {
+                if (pack || arguments.length === 2) for (var i = 0,
+            l = from.length,
+            ar; i < l; i++) {
+                    if (ar || !(i in from)) {
+                        if (!ar) ar = Array.prototype.slice.call(from, 0,
+            i);
+                    ar[i] = from[i];
+                }
+            }
+            return to.concat(ar || Array.prototype.slice.call(from));
         };
         var topo2geo = GeoJSONModule.topo2geo;
         var maps = MapChart.maps;
@@ -4622,7 +4658,6 @@
             pointInPolygon = MU.pointInPolygon;
         var addEvent = U.addEvent,
             clamp = U.clamp,
-            defined = U.defined,
             fireEvent = U.fireEvent,
             isArray = U.isArray,
             isNumber = U.isNumber,
@@ -4633,7 +4668,8 @@
             relativeLength = U.relativeLength;
         /**
          * The world size in terms of 10k meters in the Web Mercator projection, to
-         * match a 256 square tile to zoom level 0
+         * match a 256 square tile to zoom level 0.
+         * @private
          */
         var worldSize = 400.979322;
         var tileSize = 256;
@@ -4693,9 +4729,10 @@
                 var recommendedProjection;
                 if (!(this instanceof MapViewInset)) {
                     // Handle the global map and series-level mapData
-                    var geoMaps = __spreadArrays([
+                    var geoMaps = __spreadArray([
                             chart.options.chart.map
-                        ], (chart.options.series || []).map(function (s) { return s.mapData; })).map(function (mapData) { return _this.getGeoMap(mapData); });
+                        ], (chart.options.series || []).map(function (s) { return s.mapData; }),
+                        true).map(function (mapData) { return _this.getGeoMap(mapData); });
                     var allGeoBounds_1 = [];
                     geoMaps.forEach(function (geoMap) {
                         if (geoMap) {
@@ -4779,7 +4816,11 @@
                         _this.minZoom === _this.zoom // When resizing the chart
                     ) {
                         _this.fitToBounds(void 0, void 0, false);
-                        if (isNumber(_this.userOptions.zoom)) {
+                        if (
+                        // Set zoom only when initializing the chart
+                        // (do not overwrite when zooming in/out, #17082)
+                        !_this.chart.hasRendered &&
+                            isNumber(_this.userOptions.zoom)) {
                             _this.zoom = _this.userOptions.zoom;
                         }
                         if (_this.userOptions.center) {
@@ -4794,7 +4835,7 @@
                 var toObject = function (insets) {
                         var ob = {};
                     insets.forEach(function (inset, i) {
-                        ob[inset && inset.id || "i" + i] = inset;
+                        ob[inset && inset.id || "i".concat(i)] = inset;
                     });
                     return ob;
                 };
@@ -5097,7 +5138,10 @@
                     if (typeof this.options.maxZoom === 'number') {
                         zoom = Math.min(zoom, this.options.maxZoom);
                     }
-                    this.zoom = zoom;
+                    // Use isNumber to prevent Infinity (#17205)
+                    if (isNumber(zoom)) {
+                        this.zoom = zoom;
+                    }
                 }
                 var bounds = this.getProjectedBounds();
                 if (bounds) {
@@ -5238,7 +5282,7 @@
                     }
                     if (typeof mouseDownX === 'number' &&
                         typeof mouseDownY === 'number') {
-                        var key = mouseDownX + "," + mouseDownY, _a = e.originalEvent, chartX = _a.chartX, chartY = _a.chartY;
+                        var key = "" + mouseDownX + ",".concat(mouseDownY), _a = e.originalEvent, chartX = _a.chartX, chartY = _a.chartY;
                         // Reset starting position
                         if (key !== mouseDownKey) {
                             mouseDownKey = key;
@@ -5537,8 +5581,8 @@
                                 merge(chart.plotBox, { x: 0,
                             y: 0 });
                         polygon = polygon.map(function (xy) { return [
-                            relativeLength(xy[0] + "%", relativeTo_1.width, relativeTo_1.x),
-                            relativeLength(xy[1] + "%", relativeTo_1.height, relativeTo_1.y)
+                            relativeLength("" + xy[0] + "%", relativeTo_1.width, relativeTo_1.x),
+                            relativeLength("" + xy[1] + "%", relativeTo_1.height, relativeTo_1.y)
                         ]; });
                     }
                     return {
@@ -5603,8 +5647,8 @@
                                 var x = point[0],
                         y = point[1];
                             if (options.units === 'percent') {
-                                x = chart.plotLeft + relativeLength(x + "%", field_1.width, field_1.x);
-                                y = chart.plotTop + relativeLength(y + "%", field_1.height, field_1.y);
+                                x = chart.plotLeft + relativeLength("" + x + "%", field_1.width, field_1.x);
+                                y = chart.plotTop + relativeLength("" + y + "%", field_1.height, field_1.y);
                             }
                             x = Math.floor(x) + crisp_1;
                             y = Math.floor(y) + crisp_1;
@@ -5633,7 +5677,7 @@
 
         return MapView;
     });
-    _registerModule(_modules, 'Series/Map/MapSeries.js', [_modules['Core/Animation/AnimationUtilities.js'], _modules['Series/ColorMapMixin.js'], _modules['Series/CenteredUtilities.js'], _modules['Core/Globals.js'], _modules['Core/Legend/LegendSymbol.js'], _modules['Core/Chart/MapChart.js'], _modules['Series/Map/MapPoint.js'], _modules['Maps/MapView.js'], _modules['Core/Series/Series.js'], _modules['Core/Series/SeriesRegistry.js'], _modules['Core/Renderer/SVG/SVGRenderer.js'], _modules['Core/Utilities.js']], function (A, ColorMapMixin, CU, H, LegendSymbol, MapChart, MapPoint, MapView, Series, SeriesRegistry, SVGRenderer, U) {
+    _registerModule(_modules, 'Series/Map/MapSeries.js', [_modules['Core/Animation/AnimationUtilities.js'], _modules['Series/ColorMapComposition.js'], _modules['Series/CenteredUtilities.js'], _modules['Core/Globals.js'], _modules['Core/Legend/LegendSymbol.js'], _modules['Core/Chart/MapChart.js'], _modules['Series/Map/MapPoint.js'], _modules['Maps/MapView.js'], _modules['Core/Series/Series.js'], _modules['Core/Series/SeriesRegistry.js'], _modules['Core/Renderer/SVG/SVGRenderer.js'], _modules['Core/Utilities.js']], function (A, ColorMapComposition, CU, H, LegendSymbol, MapChart, MapPoint, MapView, Series, SeriesRegistry, SVGRenderer, U) {
         /* *
          *
          *  (c) 2010-2021 Torstein Honsi
@@ -5846,12 +5890,13 @@
              */
             MapSeries.prototype.drawPoints = function () {
                 var _this = this;
-                var _a = this,
+                var series = this,
+                    _a = this,
                     chart = _a.chart,
                     group = _a.group,
                     _b = _a.transformGroups,
-                    transformGroups = _b === void 0 ? [] : _b;
-                var mapView = chart.mapView,
+                    transformGroups = _b === void 0 ? [] : _b,
+                    mapView = chart.mapView,
                     renderer = chart.renderer;
                 if (!mapView) {
                     return;
@@ -5891,7 +5936,9 @@
                     ColumnSeries.prototype.drawPoints.apply(this);
                     // Add class names
                     this.points.forEach(function (point) {
-                        if (point.graphic) {
+                        var graphic = point.graphic;
+                        if (graphic) {
+                            var animate_1 = graphic.animate;
                             var className = '';
                             if (point.name) {
                                 className +=
@@ -5904,12 +5951,49 @@
                                         point.properties['hc-key'].toString().toLowerCase();
                             }
                             if (className) {
-                                point.graphic.addClass(className);
+                                graphic.addClass(className);
                             }
                             // In styled mode, apply point colors by CSS
                             if (chart.styledMode) {
-                                point.graphic.css(_this.pointAttribs(point, point.selected && 'select' || void 0));
+                                graphic.css(_this.pointAttribs(point, point.selected && 'select' || void 0));
                             }
+                            graphic.animate = function (params, options, complete) {
+                                var switchBack = false;
+                                // When strokeWidth is animating
+                                if (params['stroke-width']) {
+                                    var strokeWidth = pick(series.getStrokeWidth(series.options), 1 // Styled mode
+                                        ),
+                                        inheritedStrokeWidth = (strokeWidth /
+                                            (chart.mapView &&
+                                                chart.mapView.getScale() ||
+                                                1));
+                                    // For animating from inherit,
+                                    // .attr() reads the property as the starting point
+                                    if (graphic['stroke-width'] === 'inherit') {
+                                        graphic['stroke-width'] = inheritedStrokeWidth;
+                                    }
+                                    // For animating to inherit
+                                    if (params['stroke-width'] === 'inherit') {
+                                        params['stroke-width'] = inheritedStrokeWidth;
+                                        switchBack = true;
+                                    }
+                                }
+                                var ret = animate_1.call(graphic,
+                                    params,
+                                    options,
+                                    switchBack ? function () {
+                                        // Switch back to "inherit" for zooming
+                                        // to work with the existing logic + complete
+                                        graphic.attr({
+                                            'stroke-width': 'inherit'
+                                        });
+                                    // Proceed
+                                    if (complete) {
+                                        complete.apply(this, arguments);
+                                    }
+                                } : complete);
+                                return ret;
+                            };
                         }
                     });
                 }
@@ -5917,8 +6001,7 @@
                 transformGroups.forEach(function (transformGroup, i) {
                     var view = i === 0 ? mapView : mapView.insets[i - 1],
                         svgTransform = view.getSVGTransform(),
-                        strokeWidth = pick(_this.options[(_this.pointAttrToOptions &&
-                            _this.pointAttrToOptions['stroke-width']) || 'borderWidth'], 1 // Styled mode
+                        strokeWidth = pick(_this.getStrokeWidth(_this.options), 1 // Styled mode
                         );
                     /*
                     Animate or move to the new zoom level. In order to prevent
@@ -5973,8 +6056,7 @@
              */
             MapSeries.prototype.getProjectedBounds = function () {
                 if (!this.bounds && this.chart.mapView) {
-                    var MAX_VALUE = Number.MAX_VALUE,
-                        _a = this.chart.mapView,
+                    var _a = this.chart.mapView,
                         insets_1 = _a.insets,
                         projection_1 = _a.projection,
                         allBounds_1 = [];
@@ -6030,6 +6112,18 @@
                 }
                 return this.bounds;
             };
+            /**
+             * Return the stroke-width either from a series options or point options
+             * object. This function is used by both the map series where the
+             * `borderWidth` sets the stroke-width, and the mapline series where the
+             * `lineWidth` sets the stroke-width.
+             * @private
+             */
+            MapSeries.prototype.getStrokeWidth = function (options) {
+                var pointAttrToOptions = this.pointAttrToOptions;
+                return options[pointAttrToOptions &&
+                    pointAttrToOptions['stroke-width'] || 'borderWidth'];
+            };
             /**
              * Define hasData function for non-cartesian series. Returns true if the
              * series has points at all.
@@ -6054,15 +6148,25 @@
                     point,
                     state);
                 // Individual stroke width
-                var pointStrokeWidth = point.options[(this.pointAttrToOptions &&
-                        this.pointAttrToOptions['stroke-width']) || 'borderWidth'];
+                var pointStrokeWidth = this.getStrokeWidth(point.options);
+                // Handle state specific border or line width
+                if (state) {
+                    var stateOptions = merge(this.options.states[state],
+                        point.options.states &&
+                            point.options.states[state] ||
+                            {});
+                    pointStrokeWidth = this.getStrokeWidth(stateOptions);
+                }
                 if (pointStrokeWidth && mapView) {
                     pointStrokeWidth /= mapView.getScale();
                 }
                 // In order for dash style to avoid being scaled, set the transformed
                 // stroke width on the item
-                if (attr.dashstyle && mapView && this.options.borderWidth) {
-                    pointStrokeWidth = this.options.borderWidth / mapView.getScale();
+                var seriesStrokeWidth = this.getStrokeWidth(this.options);
+                if (attr.dashstyle &&
+                    mapView &&
+                    isNumber(seriesStrokeWidth)) {
+                    pointStrokeWidth = seriesStrokeWidth / mapView.getScale();
                 }
                 attr['stroke-width'] = pick(pointStrokeWidth, 
                 // By default set the stroke-width on the group element and let all
@@ -6071,14 +6175,29 @@
                 'inherit');
                 return attr;
             };
+            /**
+             * @private
+             */
+            MapSeries.prototype.updateData = function () {
+                // #16782
+                if (this.processedData) {
+                    return false;
+                }
+                return _super.prototype.updateData.apply(this, arguments);
+            };
             /**
              * Extend setData to call processData and generatePoints immediately.
              * @private
              */
-            MapSeries.prototype.setData = function () {
-                _super.prototype.setData.apply(this, arguments);
+            MapSeries.prototype.setData = function (data, redraw, animation, updatePoints) {
+                if (redraw === void 0) { redraw = true; }
+                delete this.bounds;
+                _super.prototype.setData.call(this, data, false, void 0, updatePoints);
                 this.processData();
                 this.generatePoints();
+                if (redraw) {
+                    this.chart.redraw(animation);
+                }
             };
             /**
              * Extend processData to join in mapData. If the allAreas option is true,
@@ -6263,7 +6382,17 @@
                     this.processData();
                     this.generatePoints();
                     delete this.bounds;
-                    this.getProjectedBounds();
+                    if (mapView &&
+                        !mapView.userOptions.center &&
+                        !isNumber(mapView.userOptions.zoom)) {
+                        // Not only recalculate bounds but also fit view
+                        mapView.fitToBounds(void 0, void 0, false); // #17012
+                    }
+                    else {
+                        // If center and zoom is defined in user options, get bounds but
+                        // don't change view
+                        this.getProjectedBounds();
+                    }
                 }
                 if (mapView) {
                     var mainSvgTransform_1 = mapView.getSVGTransform();
@@ -6302,6 +6431,8 @@
              * @excluding    marker, cluster
              * @product      highmaps
              * @optionparent plotOptions.map
+             *
+             * @private
              */
             MapSeries.defaultOptions = merge(ScatterSeries.defaultOptions, {
                 /**
@@ -6312,6 +6443,8 @@
                  *         US map with world map backdrop
                  *
                  * @since 10.0.0
+                 *
+                 * @private
                  */
                 affectsMapView: true,
                 animation: false,
@@ -6346,7 +6479,7 @@
                  *
                  * @private
                  */
-                nullColor: "#f7f7f7" /* neutralColor3 */,
+                nullColor: "#f7f7f7" /* Palette.neutralColor3 */,
                 /**
                  * Whether to allow pointer interaction like tooltips and mouse events
                  * on null points.
@@ -6400,7 +6533,7 @@
                  *
                  * @private
                  */
-                borderColor: "#cccccc" /* neutralColor20 */,
+                borderColor: "#cccccc" /* Palette.neutralColor20 */,
                 /**
                  * The border width of each map area.
                  *
@@ -6535,7 +6668,7 @@
                          * @product   highmaps
                          * @apioption plotOptions.series.states.select.color
                          */
-                        color: "#cccccc" /* neutralColor20 */
+                        color: "#cccccc" /* Palette.neutralColor20 */
                     },
                     inactive: {
                         opacity: 1
@@ -6546,9 +6679,9 @@
         }(ScatterSeries));
         extend(MapSeries.prototype, {
             type: 'map',
-            axisTypes: ColorMapMixin.SeriesMixin.axisTypes,
-            colorAttribs: ColorMapMixin.SeriesMixin.colorAttribs,
-            colorKey: ColorMapMixin.SeriesMixin.colorKey,
+            axisTypes: ColorMapComposition.seriesMembers.axisTypes,
+            colorAttribs: ColorMapComposition.seriesMembers.colorAttribs,
+            colorKey: ColorMapComposition.seriesMembers.colorKey,
             // When tooltip is not shared, this series (and derivatives) requires
             // direct touch/hover. KD-tree does not apply.
             directTouch: true,
@@ -6561,18 +6694,19 @@
             forceDL: true,
             getCenter: CU.getCenter,
             getExtremesFromAll: true,
-            getSymbol: ColorMapMixin.SeriesMixin.getSymbol,
+            getSymbol: noop,
             isCartesian: false,
-            parallelArrays: ColorMapMixin.SeriesMixin.parallelArrays,
-            pointArrayMap: ColorMapMixin.SeriesMixin.pointArrayMap,
+            parallelArrays: ColorMapComposition.seriesMembers.parallelArrays,
+            pointArrayMap: ColorMapComposition.seriesMembers.pointArrayMap,
             pointClass: MapPoint,
             // X axis and Y axis must have same translation slope
             preserveAspectRatio: true,
             searchPoint: noop,
-            trackerGroups: ColorMapMixin.SeriesMixin.trackerGroups,
+            trackerGroups: ColorMapComposition.seriesMembers.trackerGroups,
             // Get axis extremes from paths, not values
             useMapGeometry: true
         });
+        ColorMapComposition.compose(MapSeries);
         SeriesRegistry.registerSeriesType('map', MapSeries);
         /* *
          *
@@ -6704,8 +6838,9 @@
          * The geometry type. Can be one of `LineString`, `Polygon`, `MultiLineString`
          * or `MultiPolygon`.
          *
+         * @declare   Highcharts.MapGeometryTypeValue
          * @type      {string}
-         * @since 9.3.0
+         * @since     9.3.0
          * @product   highmaps
          * @validvalue ["LineString", "Polygon", "MultiLineString", "MultiPolygon"]
          * @apioption series.map.data.geometry.type
@@ -6992,6 +7127,21 @@
          * @product   highmaps
          * @apioption series.mapline.data
          */
+        /**
+         * Pixel width of the mapline line.
+         *
+         * @type      {number}
+         * @since 10.2.0
+         * @product   highmaps
+         * @apioption plotOptions.mapline.states.hover.lineWidth
+         */
+        /**
+         *
+         * @type      {number}
+         * @product   highmaps
+         * @excluding borderWidth
+         * @apioption plotOptions.mapline.states.hover
+         */
         ''; // adds doclets above to transpiled file
 
         return MapLineSeries;
@@ -7023,8 +7173,7 @@
             };
         })();
         var ScatterSeries = SeriesRegistry.seriesTypes.scatter;
-        var isNumber = U.isNumber,
-            merge = U.merge;
+        var isNumber = U.isNumber;
         /* *
          *
          *  Class
@@ -7177,6 +7326,10 @@
                     this.processData();
                 }
                 this.generatePoints();
+                if (this.getProjectedBounds && this.isDirtyData) {
+                    delete this.bounds;
+                    this.getProjectedBounds(); // Added point needs bounds(#16598)
+                }
                 // Create map based translation
                 if (mapView) {
                     var hasCoordinates_1 = mapView.projection.hasCoordinates;
@@ -7236,7 +7389,7 @@
                     overflow: false,
                     style: {
                         /** @internal */
-                        color: "#000000" /* neutralColor100 */
+                        color: "#000000" /* Palette.neutralColor100 */
                     }
                 }
             });
@@ -7402,6 +7555,12 @@
          * @product   highmaps
          * @apioption series.mappoint.data.y
          */
+        /**
+        * @type      {number}
+        * @product   highmaps
+        * @excluding borderColor, borderWidth
+        * @apioption plotOptions.mappoint
+        */
         ''; // adds doclets above to transpiled file
 
         return MapPointSeries;
@@ -7579,7 +7738,7 @@
                         /** @ignore-option */
                         fontSize: '10px',
                         /** @ignore-option */
-                        color: "#000000" /* neutralColor100 */
+                        color: "#000000" /* Palette.neutralColor100 */
                     },
                     /**
                      * The x position offset of the label relative to the
@@ -7708,28 +7867,11 @@
             merge = U.merge,
             pick = U.pick,
             stableSort = U.stableSort;
-        /**
-         * @interface Highcharts.BubbleLegendFormatterContextObject
-         */ /**
-        * The center y position of the range.
-        * @name Highcharts.BubbleLegendFormatterContextObject#center
-        * @type {number}
-        */ /**
-        * The radius of the bubble range.
-        * @name Highcharts.BubbleLegendFormatterContextObject#radius
-        * @type {number}
-        */ /**
-        * The bubble value.
-        * @name Highcharts.BubbleLegendFormatterContextObject#value
-        * @type {number}
-        */
-        ''; // detach doclets above
         /* *
          *
          *  Class
          *
          * */
-        /* eslint-disable no-invalid-this, valid-jsdoc */
         /**
          * BubbleLegend class.
          *
@@ -7743,7 +7885,17 @@
          * Legend of item.
          */
         var BubbleLegendItem = /** @class */ (function () {
+                /* *
+                 *
+                 *  Constructor
+                 *
+                 * */
                 function BubbleLegendItem(options, legend) {
+                    /* *
+                     *
+                     *  Properties
+                     *
+                     * */
                     this.chart = void 0;
                 this.fontMetrics = void 0;
                 this.legend = void 0;
@@ -7762,15 +7914,14 @@
                 this.setState = noop;
                 this.init(options, legend);
             }
+            /* *
+             *
+             *  Functions
+             *
+             * */
             /**
              * Create basic bubbleLegend properties similar to item in legend.
-             *
              * @private
-             * @function Highcharts.BubbleLegend#init
-             * @param {Highcharts.LegendBubbleLegendOptions} options
-             *        Bubble legend options
-             * @param {Highcharts.Legend} legend
-             *        Legend
              */
             BubbleLegendItem.prototype.init = function (options, legend) {
                 this.options = options;
@@ -7782,9 +7933,9 @@
              * Depending on the position option, add bubbleLegend to legend items.
              *
              * @private
-             * @function Highcharts.BubbleLegend#addToLegend
+             *
              * @param {Array<(Highcharts.Point|Highcharts.Series)>} items
-             * All legend items
+             *        All legend items
              */
             BubbleLegendItem.prototype.addToLegend = function (items) {
                 // Insert bubbleLegend into legend items
@@ -7795,7 +7946,7 @@
              * creation.
              *
              * @private
-             * @function Highcharts.BubbleLegend#drawLegendSymbol
+             *
              * @param {Highcharts.Legend} legend
              *        Legend instance
              */
@@ -7837,9 +7988,7 @@
             };
             /**
              * Set style options for each bubbleLegend range.
-             *
              * @private
-             * @function Highcharts.BubbleLegend#setOptions
              */
             BubbleLegendItem.prototype.setOptions = function () {
                 var ranges = this.ranges,
@@ -7891,9 +8040,10 @@
              * used code from BubbleSeries.js 'getRadius' method.
              *
              * @private
-             * @function Highcharts.BubbleLegend#getRangeRadius
+             *
              * @param {number} value
              *        Range value
+             *
              * @return {number|null}
              *         Radius for one range
              */
@@ -7909,9 +8059,7 @@
             };
             /**
              * Render the legendSymbol group.
-             *
              * @private
-             * @function Highcharts.BubbleLegend#render
              */
             BubbleLegendItem.prototype.render = function () {
                 var renderer = this.chart.renderer,
@@ -7943,7 +8091,7 @@
              * Render one range, consisting of bubble symbol, connector and label.
              *
              * @private
-             * @function Highcharts.BubbleLegend#renderRange
+             *
              * @param {Highcharts.LegendBubbleLegendRangesOptions} range
              *        Range options
              */
@@ -8024,9 +8172,7 @@
             };
             /**
              * Get the label which takes up the most space.
-             *
              * @private
-             * @function Highcharts.BubbleLegend#getMaxLabelSize
              */
             BubbleLegendItem.prototype.getMaxLabelSize = function () {
                 var labels = this.symbols.labels;
@@ -8048,9 +8194,10 @@
              * Get formatted label for range.
              *
              * @private
-             * @function Highcharts.BubbleLegend#formatLabel
+             *
              * @param {Highcharts.LegendBubbleLegendRangesOptions} range
              *        Range options
+             *
              * @return {string}
              *         Range label text
              */
@@ -8066,9 +8213,7 @@
             /**
              * By using default chart 'hideOverlappingLabels' method, hide or show
              * labels and connectors.
-             *
              * @private
-             * @function Highcharts.BubbleLegend#hideOverlappingLabels
              */
             BubbleLegendItem.prototype.hideOverlappingLabels = function () {
                 var chart = this.chart,
@@ -8091,7 +8236,7 @@
              * Calculate ranges from created series.
              *
              * @private
-             * @function Highcharts.BubbleLegend#getRanges
+             *
              * @return {Array<Highcharts.LegendBubbleLegendRangesOptions>}
              *         Array of range objects
              */
@@ -8143,7 +8288,7 @@
              * Calculate bubble legend sizes from rendered series.
              *
              * @private
-             * @function Highcharts.BubbleLegend#predictBubbleSizes
+             *
              * @return {Array<number,number>}
              *         Calculated min and max bubble sizes
              */
@@ -8184,11 +8329,7 @@
             };
             /**
              * Correct ranges with calculated sizes.
-             *
              * @private
-             * @function Highcharts.BubbleLegend#updateRanges
-             * @param {number} min
-             * @param {number} max
              */
             BubbleLegendItem.prototype.updateRanges = function (min, max) {
                 var bubbleLegendOptions = this.legend.options.bubbleLegend;
@@ -8200,9 +8341,7 @@
              * Because of the possibility of creating another legend line, predicted
              * bubble legend sizes may differ by a few pixels, so it is necessary to
              * correct them.
-             *
              * @private
-             * @function Highcharts.BubbleLegend#correctSizes
              */
             BubbleLegendItem.prototype.correctSizes = function () {
                 var legend = this.legend,
@@ -8224,6 +8363,27 @@
          *  Default Export
          *
          * */
+        /* *
+         *
+         *  API Declarations
+         *
+         * */
+        /**
+         * @interface Highcharts.BubbleLegendFormatterContextObject
+         */ /**
+        * The center y position of the range.
+        * @name Highcharts.BubbleLegendFormatterContextObject#center
+        * @type {number}
+        */ /**
+        * The radius of the bubble range.
+        * @name Highcharts.BubbleLegendFormatterContextObject#radius
+        * @type {number}
+        */ /**
+        * The bubble value.
+        * @name Highcharts.BubbleLegendFormatterContextObject#value
+        * @type {number}
+        */
+        ''; // detach doclets above
 
         return BubbleLegendItem;
     });
@@ -8245,282 +8405,274 @@
             wrap = U.wrap;
         /* *
          *
-         *  Namespace
+         *  Constants
          *
          * */
-        var BubbleLegendComposition;
-        (function (BubbleLegendComposition) {
-            /* *
-             *
-             *  Constants
-             *
-             * */
-            var composedClasses = [];
-            /* *
-             *
-             *  Functions
-             *
-             * */
-            /* eslint-disable valid-jsdoc */
-            /**
-             * If ranges are not specified, determine ranges from rendered bubble series
-             * and render legend again.
-             */
-            function chartDrawChartBox(proceed, options, callback) {
-                var chart = this,
-                    legend = chart.legend,
-                    bubbleSeries = getVisibleBubbleSeriesIndex(chart) >= 0;
-                var bubbleLegendOptions,
-                    bubbleSizes;
-                if (legend && legend.options.enabled && legend.bubbleLegend &&
-                    legend.options.bubbleLegend.autoRanges && bubbleSeries) {
-                    bubbleLegendOptions = legend.bubbleLegend.options;
-                    bubbleSizes = legend.bubbleLegend.predictBubbleSizes();
-                    legend.bubbleLegend.updateRanges(bubbleSizes[0], bubbleSizes[1]);
-                    // Disable animation on init
+        var composedClasses = [];
+        /* *
+         *
+         *  Functions
+         *
+         * */
+        /**
+         * If ranges are not specified, determine ranges from rendered bubble series
+         * and render legend again.
+         */
+        function chartDrawChartBox(proceed, options, callback) {
+            var chart = this,
+                legend = chart.legend,
+                bubbleSeries = getVisibleBubbleSeriesIndex(chart) >= 0;
+            var bubbleLegendOptions,
+                bubbleSizes;
+            if (legend && legend.options.enabled && legend.bubbleLegend &&
+                legend.options.bubbleLegend.autoRanges && bubbleSeries) {
+                bubbleLegendOptions = legend.bubbleLegend.options;
+                bubbleSizes = legend.bubbleLegend.predictBubbleSizes();
+                legend.bubbleLegend.updateRanges(bubbleSizes[0], bubbleSizes[1]);
+                // Disable animation on init
+                if (!bubbleLegendOptions.placed) {
+                    legend.group.placed = false;
+                    legend.allItems.forEach(function (item) {
+                        item.legendGroup.translateY = null;
+                    });
+                }
+                // Create legend with bubbleLegend
+                legend.render();
+                chart.getMargins();
+                chart.axes.forEach(function (axis) {
+                    if (axis.visible) { // #11448
+                        axis.render();
+                    }
                     if (!bubbleLegendOptions.placed) {
-                        legend.group.placed = false;
-                        legend.allItems.forEach(function (item) {
-                            item.legendGroup.translateY = null;
+                        axis.setScale();
+                        axis.updateNames();
+                        // Disable axis animation on init
+                        objectEach(axis.ticks, function (tick) {
+                            tick.isNew = true;
+                            tick.isNewLabel = true;
                         });
                     }
-                    // Create legend with bubbleLegend
+                });
+                bubbleLegendOptions.placed = true;
+                // After recalculate axes, calculate margins again.
+                chart.getMargins();
+                // Call default 'drawChartBox' method.
+                proceed.call(chart, options, callback);
+                // Check bubble legend sizes and correct them if necessary.
+                legend.bubbleLegend.correctSizes();
+                // Correct items positions with different dimensions in legend.
+                retranslateItems(legend, getLinesHeights(legend));
+            }
+            else {
+                proceed.call(chart, options, callback);
+                // Allow color change on static bubble legend after click on legend
+                if (legend && legend.options.enabled && legend.bubbleLegend) {
                     legend.render();
-                    chart.getMargins();
-                    chart.axes.forEach(function (axis) {
-                        if (axis.visible) { // #11448
-                            axis.render();
-                        }
-                        if (!bubbleLegendOptions.placed) {
-                            axis.setScale();
-                            axis.updateNames();
-                            // Disable axis animation on init
-                            objectEach(axis.ticks, function (tick) {
-                                tick.isNew = true;
-                                tick.isNewLabel = true;
-                            });
-                        }
-                    });
-                    bubbleLegendOptions.placed = true;
-                    // After recalculate axes, calculate margins again.
-                    chart.getMargins();
-                    // Call default 'drawChartBox' method.
-                    proceed.call(chart, options, callback);
-                    // Check bubble legend sizes and correct them if necessary.
-                    legend.bubbleLegend.correctSizes();
-                    // Correct items positions with different dimensions in legend.
                     retranslateItems(legend, getLinesHeights(legend));
                 }
-                else {
-                    proceed.call(chart, options, callback);
-                    // Allow color change on static bubble legend after click on legend
-                    if (legend && legend.options.enabled && legend.bubbleLegend) {
-                        legend.render();
-                        retranslateItems(legend, getLinesHeights(legend));
+            }
+        }
+        /**
+         * Compose classes for use with Bubble series.
+         * @private
+         *
+         * @param {Highcharts.Chart} ChartClass
+         * Core chart class to use with Bubble series.
+         *
+         * @param {Highcharts.Legend} LegendClass
+         * Core legend class to use with Bubble series.
+         *
+         * @param {Highcharts.Series} SeriesClass
+         * Core series class to use with Bubble series.
+         */
+        function compose(ChartClass, LegendClass, SeriesClass) {
+            if (composedClasses.indexOf(ChartClass) === -1) {
+                composedClasses.push(ChartClass);
+                setOptions({
+                    // Set default bubble legend options
+                    legend: {
+                        bubbleLegend: BubbleLegendDefaults
                     }
-                }
+                });
+                wrap(ChartClass.prototype, 'drawChartBox', chartDrawChartBox);
             }
-            /**
-             * Compose classes for use with Bubble series.
-             * @private
-             *
-             * @param {Highcharts.Chart} ChartClass
-             * Core chart class to use with Bubble series.
-             *
-             * @param {Highcharts.Legend} LegendClass
-             * Core legend class to use with Bubble series.
-             *
-             * @param {Highcharts.Series} SeriesClass
-             * Core series class to use with Bubble series.
-             */
-            function compose(ChartClass, LegendClass, SeriesClass) {
-                if (composedClasses.indexOf(ChartClass) === -1) {
-                    composedClasses.push(ChartClass);
-                    setOptions({
-                        // Set default bubble legend options
-                        legend: {
-                            bubbleLegend: BubbleLegendDefaults
-                        }
-                    });
-                    wrap(ChartClass.prototype, 'drawChartBox', chartDrawChartBox);
-                }
-                if (composedClasses.indexOf(LegendClass) === -1) {
-                    composedClasses.push(LegendClass);
-                    addEvent(LegendClass, 'afterGetAllItems', onLegendAfterGetAllItems);
-                }
-                if (composedClasses.indexOf(SeriesClass) === -1) {
-                    composedClasses.push(SeriesClass);
-                    addEvent(SeriesClass, 'legendItemClick', onSeriesLegendItemClick);
-                }
+            if (composedClasses.indexOf(LegendClass) === -1) {
+                composedClasses.push(LegendClass);
+                addEvent(LegendClass, 'afterGetAllItems', onLegendAfterGetAllItems);
             }
-            BubbleLegendComposition.compose = compose;
-            /**
-             * Check if there is at least one visible bubble series.
-             *
-             * @private
-             * @function getVisibleBubbleSeriesIndex
-             * @param {Highcharts.Chart} chart
-             * Chart to check.
-             * @return {number}
-             * First visible bubble series index
-             */
-            function getVisibleBubbleSeriesIndex(chart) {
-                var series = chart.series;
-                var i = 0;
-                while (i < series.length) {
-                    if (series[i] &&
-                        series[i].isBubble &&
-                        series[i].visible &&
-                        series[i].zData.length) {
-                        return i;
-                    }
-                    i++;
-                }
-                return -1;
+            if (composedClasses.indexOf(SeriesClass) === -1) {
+                composedClasses.push(SeriesClass);
+                addEvent(SeriesClass, 'legendItemClick', onSeriesLegendItemClick);
             }
-            /**
-             * Calculate height for each row in legend.
-             *
-             * @private
-             * @function getLinesHeights
-             *
-             * @param {Highcharts.Legend} legend
-             * Legend to calculate from.
-             *
-             * @return {Array<Highcharts.Dictionary<number>>}
-             * Informations about line height and items amount
-             */
-            function getLinesHeights(legend) {
-                var items = legend.allItems,
-                    lines = [],
-                    length = items.length;
-                var lastLine,
-                    i = 0,
-                    j = 0;
-                for (i = 0; i < length; i++) {
-                    if (items[i].legendItemHeight) {
-                        // for bubbleLegend
-                        items[i].itemHeight = items[i].legendItemHeight;
-                    }
-                    if ( // Line break
-                    items[i] === items[length - 1] ||
-                        items[i + 1] &&
-                            items[i]._legendItemPos[1] !==
-                                items[i + 1]._legendItemPos[1]) {
-                        lines.push({ height: 0 });
-                        lastLine = lines[lines.length - 1];
-                        // Find the highest item in line
-                        for (j; j <= i; j++) {
-                            if (items[j].itemHeight > lastLine.height) {
-                                lastLine.height = items[j].itemHeight;
-                            }
+        }
+        /**
+         * Check if there is at least one visible bubble series.
+         *
+         * @private
+         * @function getVisibleBubbleSeriesIndex
+         * @param {Highcharts.Chart} chart
+         * Chart to check.
+         * @return {number}
+         * First visible bubble series index
+         */
+        function getVisibleBubbleSeriesIndex(chart) {
+            var series = chart.series;
+            var i = 0;
+            while (i < series.length) {
+                if (series[i] &&
+                    series[i].isBubble &&
+                    series[i].visible &&
+                    series[i].zData.length) {
+                    return i;
+                }
+                i++;
+            }
+            return -1;
+        }
+        /**
+         * Calculate height for each row in legend.
+         *
+         * @private
+         * @function getLinesHeights
+         *
+         * @param {Highcharts.Legend} legend
+         * Legend to calculate from.
+         *
+         * @return {Array<Highcharts.Dictionary<number>>}
+         * Informations about line height and items amount
+         */
+        function getLinesHeights(legend) {
+            var items = legend.allItems,
+                lines = [],
+                length = items.length;
+            var lastLine,
+                i = 0,
+                j = 0;
+            for (i = 0; i < length; i++) {
+                if (items[i].legendItemHeight) {
+                    // for bubbleLegend
+                    items[i].itemHeight = items[i].legendItemHeight;
+                }
+                if ( // Line break
+                items[i] === items[length - 1] ||
+                    items[i + 1] &&
+                        items[i]._legendItemPos[1] !==
+                            items[i + 1]._legendItemPos[1]) {
+                    lines.push({ height: 0 });
+                    lastLine = lines[lines.length - 1];
+                    // Find the highest item in line
+                    for (j; j <= i; j++) {
+                        if (items[j].itemHeight > lastLine.height) {
+                            lastLine.height = items[j].itemHeight;
                         }
-                        lastLine.step = i;
                     }
+                    lastLine.step = i;
                 }
-                return lines;
             }
-            /**
-             * Start the bubble legend creation process.
-             */
-            function onLegendAfterGetAllItems(e) {
-                var legend = this,
-                    bubbleLegend = legend.bubbleLegend,
-                    legendOptions = legend.options,
-                    options = legendOptions.bubbleLegend,
-                    bubbleSeriesIndex = getVisibleBubbleSeriesIndex(legend.chart);
-                // Remove unnecessary element
-                if (bubbleLegend && bubbleLegend.ranges && bubbleLegend.ranges.length) {
-                    // Allow change the way of calculating ranges in update
-                    if (options.ranges.length) {
-                        options.autoRanges =
-                            !!options.ranges[0].autoRanges;
-                    }
-                    // Update bubbleLegend dimensions in each redraw
-                    legend.destroyItem(bubbleLegend);
-                }
-                // Create bubble legend
-                if (bubbleSeriesIndex >= 0 &&
-                    legendOptions.enabled &&
-                    options.enabled) {
-                    options.seriesIndex = bubbleSeriesIndex;
-                    legend.bubbleLegend = new BubbleLegendItem(options, legend);
-                    legend.bubbleLegend.addToLegend(e.allItems);
-                }
+            return lines;
+        }
+        /**
+         * Start the bubble legend creation process.
+         */
+        function onLegendAfterGetAllItems(e) {
+            var legend = this,
+                bubbleLegend = legend.bubbleLegend,
+                legendOptions = legend.options,
+                options = legendOptions.bubbleLegend,
+                bubbleSeriesIndex = getVisibleBubbleSeriesIndex(legend.chart);
+            // Remove unnecessary element
+            if (bubbleLegend && bubbleLegend.ranges && bubbleLegend.ranges.length) {
+                // Allow change the way of calculating ranges in update
+                if (options.ranges.length) {
+                    options.autoRanges =
+                        !!options.ranges[0].autoRanges;
+                }
+                // Update bubbleLegend dimensions in each redraw
+                legend.destroyItem(bubbleLegend);
             }
-            /**
-             * Toggle bubble legend depending on the visible status of bubble series.
-             */
-            function onSeriesLegendItemClick() {
-                var series = this,
-                    chart = series.chart,
-                    visible = series.visible,
-                    legend = series.chart.legend;
-                var status;
-                if (legend && legend.bubbleLegend) {
-                    // Temporary correct 'visible' property
-                    series.visible = !visible;
-                    // Save future status for getRanges method
-                    series.ignoreSeries = visible;
-                    // Check if at lest one bubble series is visible
-                    status = getVisibleBubbleSeriesIndex(chart) >= 0;
-                    // Hide bubble legend if all bubble series are disabled
-                    if (legend.bubbleLegend.visible !== status) {
-                        // Show or hide bubble legend
-                        legend.update({
-                            bubbleLegend: { enabled: status }
-                        });
-                        legend.bubbleLegend.visible = status; // Restore default status
-                    }
-                    series.visible = visible;
-                }
+            // Create bubble legend
+            if (bubbleSeriesIndex >= 0 &&
+                legendOptions.enabled &&
+                options.enabled) {
+                options.seriesIndex = bubbleSeriesIndex;
+                legend.bubbleLegend = new BubbleLegendItem(options, legend);
+                legend.bubbleLegend.addToLegend(e.allItems);
             }
-            /**
-             * Correct legend items translation in case of different elements heights.
-             *
-             * @private
-             * @function Highcharts.Legend#retranslateItems
-             *
-             * @param {Highcharts.Legend} legend
-             * Legend to translate in.
-             *
-             * @param {Array<Highcharts.Dictionary<number>>} lines
-             * Informations about line height and items amount
-             */
-            function retranslateItems(legend, lines) {
-                var items = legend.allItems,
-                    rtl = legend.options.rtl;
-                var orgTranslateX,
-                    orgTranslateY,
-                    movementX,
-                    actualLine = 0;
-                items.forEach(function (item, index) {
-                    orgTranslateX = item.legendGroup.translateX;
-                    orgTranslateY = item._legendItemPos[1];
-                    movementX = item.movementX;
-                    if (movementX || (rtl && item.ranges)) {
-                        movementX = rtl ?
-                            orgTranslateX - item.options.maxSize / 2 :
-                            orgTranslateX + movementX;
-                        item.legendGroup.attr({ translateX: movementX });
-                    }
-                    if (index > lines[actualLine].step) {
-                        actualLine++;
-                    }
-                    item.legendGroup.attr({
-                        translateY: Math.round(orgTranslateY + lines[actualLine].height / 2)
+        }
+        /**
+         * Toggle bubble legend depending on the visible status of bubble series.
+         */
+        function onSeriesLegendItemClick() {
+            var series = this,
+                chart = series.chart,
+                visible = series.visible,
+                legend = series.chart.legend;
+            var status;
+            if (legend && legend.bubbleLegend) {
+                // Temporary correct 'visible' property
+                series.visible = !visible;
+                // Save future status for getRanges method
+                series.ignoreSeries = visible;
+                // Check if at lest one bubble series is visible
+                status = getVisibleBubbleSeriesIndex(chart) >= 0;
+                // Hide bubble legend if all bubble series are disabled
+                if (legend.bubbleLegend.visible !== status) {
+                    // Show or hide bubble legend
+                    legend.update({
+                        bubbleLegend: { enabled: status }
                     });
-                    item._legendItemPos[1] = orgTranslateY +
-                        lines[actualLine].height / 2;
-                });
+                    legend.bubbleLegend.visible = status; // Restore default status
+                }
+                series.visible = visible;
             }
-            /* eslint-disable valid-jsdoc */
-        })(BubbleLegendComposition || (BubbleLegendComposition = {}));
+        }
+        /**
+         * Correct legend items translation in case of different elements heights.
+         *
+         * @private
+         * @function Highcharts.Legend#retranslateItems
+         *
+         * @param {Highcharts.Legend} legend
+         * Legend to translate in.
+         *
+         * @param {Array<Highcharts.Dictionary<number>>} lines
+         * Informations about line height and items amount
+         */
+        function retranslateItems(legend, lines) {
+            var items = legend.allItems,
+                rtl = legend.options.rtl;
+            var orgTranslateX,
+                orgTranslateY,
+                movementX,
+                actualLine = 0;
+            items.forEach(function (item, index) {
+                orgTranslateX = item.legendGroup.translateX;
+                orgTranslateY = item._legendItemPos[1];
+                movementX = item.movementX;
+                if (movementX || (rtl && item.ranges)) {
+                    movementX = rtl ?
+                        orgTranslateX - item.options.maxSize / 2 :
+                        orgTranslateX + movementX;
+                    item.legendGroup.attr({ translateX: movementX });
+                }
+                if (index > lines[actualLine].step) {
+                    actualLine++;
+                }
+                item.legendGroup.attr({
+                    translateY: Math.round(orgTranslateY + lines[actualLine].height / 2)
+                });
+                item._legendItemPos[1] = orgTranslateY +
+                    lines[actualLine].height / 2;
+            });
+        }
         /* *
          *
          *  Default Export
          *
          * */
+        var BubbleLegendComposition = {
+                compose: compose
+            };
 
         return BubbleLegendComposition;
     });
@@ -8604,7 +8756,7 @@
 
         return BubblePoint;
     });
-    _registerModule(_modules, 'Series/Bubble/BubbleSeries.js', [_modules['Core/Axis/Axis.js'], _modules['Series/Bubble/BubbleLegendComposition.js'], _modules['Series/Bubble/BubblePoint.js'], _modules['Core/Color/Color.js'], _modules['Core/Globals.js'], _modules['Core/Series/Series.js'], _modules['Core/Series/SeriesRegistry.js'], _modules['Core/Utilities.js']], function (Axis, BubbleLegendComposition, BubblePoint, Color, H, Series, SeriesRegistry, U) {
+    _registerModule(_modules, 'Series/Bubble/BubbleSeries.js', [_modules['Series/Bubble/BubbleLegendComposition.js'], _modules['Series/Bubble/BubblePoint.js'], _modules['Core/Color/Color.js'], _modules['Core/Globals.js'], _modules['Core/Series/SeriesRegistry.js'], _modules['Core/Utilities.js']], function (BubbleLegendComposition, BubblePoint, Color, H, SeriesRegistry, U) {
         /* *
          *
          *  (c) 2010-2021 Torstein Honsi
@@ -8632,8 +8784,9 @@
         })();
         var color = Color.parse;
         var noop = H.noop;
-        var _a = SeriesRegistry.seriesTypes,
-            ColumnSeries = _a.column,
+        var Series = SeriesRegistry.series,
+            _a = SeriesRegistry.seriesTypes,
+            columnProto = _a.column.prototype,
             ScatterSeries = _a.scatter;
         var addEvent = U.addEvent,
             arrayMax = U.arrayMax,
@@ -8643,6 +8796,77 @@
             isNumber = U.isNumber,
             merge = U.merge,
             pick = U.pick;
+        /* *
+         *
+         *  Constants
+         *
+         * */
+        var composedClasses = [];
+        /* *
+         *
+         *  Functions
+         *
+         * */
+        /**
+         * Add logic to pad each axis with the amount of pixels necessary to avoid the
+         * bubbles to overflow.
+         */
+        function axisBeforePadding() {
+            var _this = this;
+            var axisLength = this.len,
+                chart = this.chart,
+                isXAxis = this.isXAxis,
+                dataKey = isXAxis ? 'xData' : 'yData',
+                min = this.min,
+                range = this.max - min;
+            var pxMin = 0,
+                pxMax = axisLength,
+                transA = axisLength / range,
+                hasActiveSeries;
+            // Handle padding on the second pass, or on redraw
+            this.series.forEach(function (series) {
+                if (series.bubblePadding &&
+                    (series.visible || !chart.options.chart.ignoreHiddenSeries)) {
+                    // Correction for #1673
+                    _this.allowZoomOutside = true;
+                    hasActiveSeries = true;
+                    var data = series[dataKey];
+                    if (isXAxis) {
+                        (series.onPoint || series).getRadii(0, 0, series);
+                        if (series.onPoint) {
+                            series.radii = series.onPoint.radii;
+                        }
+                    }
+                    if (range > 0) {
+                        var i = data.length;
+                        while (i--) {
+                            if (isNumber(data[i]) &&
+                                _this.dataMin <= data[i] &&
+                                data[i] <= _this.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 (hasActiveSeries && range > 0 && !this.logarithmic) {
+                pxMax -= axisLength;
+                transA *= (axisLength +
+                    Math.max(0, pxMin) - // #8901
+                    Math.min(pxMax, axisLength)) / axisLength;
+                [
+                    ['min', 'userMin', pxMin],
+                    ['max', 'userMax', pxMax]
+                ].forEach(function (keys) {
+                    if (typeof pick(_this.options[keys[0]], _this[keys[1]]) === 'undefined') {
+                        _this[keys[0]] += keys[2] / transA;
+                    }
+                });
+            }
+        }
         /* *
          *
          *  Class
@@ -8672,14 +8896,24 @@
                 _this.yData = void 0;
                 _this.zData = void 0;
                 return _this;
-                /* eslint-enable valid-jsdoc */
             }
+            /* *
+             *
+             *  Static Functions
+             *
+             * */
+            BubbleSeries.compose = function (AxisClass, ChartClass, LegendClass, SeriesClass) {
+                BubbleLegendComposition.compose(ChartClass, LegendClass, SeriesClass);
+                if (composedClasses.indexOf(AxisClass) === -1) {
+                    composedClasses.push(AxisClass);
+                    AxisClass.prototype.beforePadding = axisBeforePadding;
+                }
+            };
             /* *
              *
              *  Functions
              *
              * */
-            /* eslint-disable valid-jsdoc */
             /**
              * Perform animation on the bubbles
              * @private
@@ -8714,11 +8948,11 @@
              */
             BubbleSeries.prototype.getRadii = function () {
                 var _this = this;
+                var zData = this.zData,
+                    yData = this.yData,
+                    radii = [];
                 var len,
                     i,
-                    zData = this.zData,
-                    yData = this.yData,
-                    radii = [],
                     value,
                     zExtremes = this.chart.bubbleZExtremes;
                 var _a = this.getPxExtremes(),
@@ -8734,7 +8968,7 @@
                     this.chart.series.forEach(function (otherSeries) {
                         if (otherSeries.bubblePadding && (otherSeries.visible ||
                             !_this.chart.options.chart.ignoreHiddenSeries)) {
-                            var zExtremes_1 = otherSeries.getZExtremes();
+                            var zExtremes_1 = (otherSeries.onPoint || 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);
@@ -8754,7 +8988,7 @@
                 for (i = 0, len = zData.length; i < len; i++) {
                     value = zData[i];
                     // Separate method to get individual radius for bubbleLegend
-                    radii.push(this.getRadius(zExtremes.zMin, zExtremes.zMax, minPxSize, maxPxSize, value, yData[i]));
+                    radii.push(this.getRadius(zExtremes.zMin, zExtremes.zMax, minPxSize, maxPxSize, value, yData && yData[i]));
                 }
                 this.radii = radii;
             };
@@ -8765,8 +8999,8 @@
             BubbleSeries.prototype.getRadius = function (zMin, zMax, minSize, maxSize, value, yValue) {
                 var options = this.options,
                     sizeByArea = options.sizeBy !== 'width',
-                    zThreshold = options.zThreshold,
-                    zRange = zMax - zMin,
+                    zThreshold = options.zThreshold;
+                var zRange = zMax - zMin,
                     pos = 0.5;
                 // #8608 - bubble should be visible when z is undefined
                 if (yValue === null || value === null) {
@@ -8855,8 +9089,12 @@
                         };
                     }
                     else { // below zThreshold
-                        // #1691
-                        point.shapeArgs = point.plotY = point.dlBox = void 0;
+                        point.shapeArgs = point.dlBox = void 0; // #1691
+                        point.plotY = 0; // #17281
+                        point.marker = {
+                            width: 0,
+                            height: 0
+                        };
                     }
                 }
             };
@@ -8895,7 +9133,6 @@
                     }
                 }
             };
-            BubbleSeries.compose = BubbleLegendComposition.compose;
             /**
              * A bubble series is a three dimensional series type where each point
              * renders an X, Y and Z value. Each points is drawn as a bubble where the
@@ -9134,7 +9371,7 @@
             return BubbleSeries;
         }(ScatterSeries));
         extend(BubbleSeries.prototype, {
-            alignDataLabel: ColumnSeries.prototype.alignDataLabel,
+            alignDataLabel: columnProto.alignDataLabel,
             applyZones: noop,
             bubblePadding: true,
             buildKDTree: noop,
@@ -9151,67 +9388,10 @@
         addEvent(BubbleSeries, 'updatedData', function (e) {
             delete e.target.chart.bubbleZExtremes;
         });
-        /* *
-         *
-         *  Axis ?
-         *
-         * */
-        // Add logic to pad each axis with the amount of pixels necessary to avoid the
-        // bubbles to overflow.
-        Axis.prototype.beforePadding = function () {
-            var axis = this,
-                axisLength = this.len,
-                chart = this.chart,
-                pxMin = 0,
-                pxMax = axisLength,
-                isXAxis = this.isXAxis,
-                dataKey = isXAxis ? 'xData' : 'yData',
-                min = this.min,
-                range = this.max - min,
-                transA = axisLength / range,
-                hasActiveSeries;
-            // Handle padding on the second pass, or on redraw
-            this.series.forEach(function (series) {
-                if (series.bubblePadding &&
-                    (series.visible || !chart.options.chart.ignoreHiddenSeries)) {
-                    // Correction for #1673
-                    axis.allowZoomOutside = true;
-                    hasActiveSeries = true;
-                    var data = series[dataKey];
-                    if (isXAxis) {
-                        series.getRadii(0, 0, series);
-                    }
-                    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 (hasActiveSeries && range > 0 && !this.logarithmic) {
-                pxMax -= axisLength;
-                transA *= (axisLength +
-                    Math.max(0, pxMin) - // #8901
-                    Math.min(pxMax, axisLength)) / axisLength;
-                [
-                    ['min', 'userMin', pxMin],
-                    ['max', 'userMax', pxMax]
-                ].forEach(function (keys) {
-                    if (typeof pick(axis.options[keys[0]], axis[keys[1]]) === 'undefined') {
-                        axis[keys[0]] += keys[2] / transA;
-                    }
-                });
-            }
-            /* eslint-enable valid-jsdoc */
-        };
+        // After removing series, delete the chart-level Z extremes cache, #17502.
+        addEvent(BubbleSeries, 'remove', function (e) {
+            delete e.target.chart.bubbleZExtremes;
+        });
         SeriesRegistry.registerSeriesType('bubble', BubbleSeries);
         /* *
          *
@@ -9319,7 +9499,7 @@
 
         return BubbleSeries;
     });
-    _registerModule(_modules, 'Series/MapBubble/MapBubblePoint.js', [_modules['Series/Map/MapPoint.js'], _modules['Core/Series/SeriesRegistry.js']], function (MapPoint, SeriesRegistry) {
+    _registerModule(_modules, 'Series/MapBubble/MapBubblePoint.js', [_modules['Series/Bubble/BubblePoint.js'], _modules['Core/Series/SeriesRegistry.js'], _modules['Core/Utilities.js']], function (BubblePoint, SeriesRegistry, U) {
         /* *
          *
          *  (c) 2010-2021 Torstein Honsi
@@ -9350,9 +9530,8 @@
          *  Imports
          *
          * */
-        var _a = SeriesRegistry.seriesTypes,
-            BubbleSeries = _a.bubble,
-            MapSeries = _a.map;
+        var mapPointProto = SeriesRegistry.seriesTypes.map.prototype.pointClass.prototype;
+        var extend = U.extend;
         /* *
          *
          *  Class
@@ -9361,27 +9540,22 @@
         var MapBubblePoint = /** @class */ (function (_super) {
                 __extends(MapBubblePoint, _super);
             function MapBubblePoint() {
-                /* *
-                 *
-                 *  Functions
-                 *
-                 * */
-                var _this = _super !== null && _super.apply(this,
-                    arguments) || this;
-                _this.applyOptions = MapSeries.prototype.pointClass.prototype.applyOptions;
-                _this.getProjectedBounds = MapPoint.prototype.getProjectedBounds;
-                return _this;
-                /* eslint-enable valid-jsdoc */
+                return _super !== null && _super.apply(this, arguments) || this;
             }
-            /* eslint-disable valid-jsdoc */
-            /**
-             * @private
-             */
+            /* *
+             *
+             *  Functions
+             *
+             * */
             MapBubblePoint.prototype.isValid = function () {
                 return typeof this.z === 'number';
             };
             return MapBubblePoint;
-        }(BubbleSeries.prototype.pointClass));
+        }(BubblePoint));
+        extend(MapBubblePoint.prototype, {
+            applyOptions: mapPointProto.applyOptions,
+            getProjectedBounds: mapPointProto.getProjectedBounds
+        });
         /* *
          *
          *  Default Export
@@ -9390,7 +9564,7 @@
 
         return MapBubblePoint;
     });
-    _registerModule(_modules, 'Series/MapBubble/MapBubbleSeries.js', [_modules['Series/Bubble/BubbleSeries.js'], _modules['Series/MapBubble/MapBubblePoint.js'], _modules['Series/Map/MapSeries.js'], _modules['Core/Series/SeriesRegistry.js'], _modules['Core/Globals.js'], _modules['Core/Utilities.js']], function (BubbleSeries, MapBubblePoint, MapSeries, SeriesRegistry, H, U) {
+    _registerModule(_modules, 'Series/MapBubble/MapBubbleSeries.js', [_modules['Series/Bubble/BubbleSeries.js'], _modules['Series/MapBubble/MapBubblePoint.js'], _modules['Core/Series/SeriesRegistry.js'], _modules['Core/Utilities.js']], function (BubbleSeries, MapBubblePoint, SeriesRegistry, U) {
         /* *
          *
          *  (c) 2010-2021 Torstein Honsi
@@ -9416,8 +9590,9 @@
                 d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
             };
         })();
-        var noop = H.noop;
-        var MapPointSeries = SeriesRegistry.seriesTypes.mappoint;
+        var _a = SeriesRegistry.seriesTypes,
+            mapProto = _a.map.prototype,
+            mapPointProto = _a.mappoint.prototype;
         var extend = U.extend,
             merge = U.merge;
         /* *
@@ -9431,10 +9606,18 @@
          * @name Highcharts.seriesTypes.mapbubble
          *
          * @augments Highcharts.Series
+         *
+         * @requires BubbleSeries
+         * @requires MapPointSeries
          */
         var MapBubbleSeries = /** @class */ (function (_super) {
                 __extends(MapBubbleSeries, _super);
             function MapBubbleSeries() {
+                /* *
+                 *
+                 *  Static Properties
+                 *
+                 * */
                 var _this = _super !== null && _super.apply(this,
                     arguments) || this;
                 /* *
@@ -9454,16 +9637,10 @@
                 }, compareX, e);
             };
             MapBubbleSeries.prototype.translate = function () {
-                MapPointSeries.prototype.translate.call(this);
+                mapPointProto.translate.call(this);
                 this.getRadii();
                 this.translateBubble();
             };
-            /* *
-             *
-             *  Static Properties
-             *
-             * */
-            MapBubbleSeries.compose = BubbleSeries.compose;
             /**
              * A map bubble series is a bubble series laid out on top of a map
              * series, where each bubble is tied to a specific map area.
@@ -9498,15 +9675,61 @@
                  * @apioption plotOptions.mapbubble.displayNegative
                  */
                 /**
-                 * @sample {highmaps} maps/demo/map-bubble/
+                 * Color of the line connecting bubbles. The default value is the same
+                 * as series' color.
+                 *
+                 * In styled mode, the color can be defined by the
+                 * [colorIndex](#plotOptions.series.colorIndex) option. Also, the series
+                 * color can be set with the `.highcharts-series`,
+                 * `.highcharts-color-{n}`, `.highcharts-{type}-series` or
+                 * `.highcharts-series-{n}` class, or individual classes given by the
+                 * `className` option.
+                 *
+                 *
+                 * @sample {highmaps} maps/demo/spider-map/
+                 *         Spider map
+                 * @sample {highmaps} maps/plotoptions/spider-map-line-color/
+                 *         Different line color
+                 *
+                 * @type      {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
+                 * @apioption plotOptions.mapbubble.lineColor
+                 */
+                /**
+                 * Pixel width of the line connecting bubbles.
+                 *
+                 * @sample {highmaps} maps/demo/spider-map/
+                 *         Spider map
+                 *
+                 * @product   highmaps
+                 * @apioption plotOptions.mapbubble.lineWidth
+                 */
+                lineWidth: 0,
+                /**
+                 * Maximum bubble size. Bubbles will automatically size between the
+                 * `minSize` and `maxSize` to reflect the `z` value of each bubble.
+                 * Can be either pixels (when no unit is given), or a percentage of
+                 * the smallest one of the plot width and height.
+                 *
+                 * @sample {highmaps} highcharts/plotoptions/bubble-size/
                  *         Bubble size
+                 * @sample {highmaps} maps/demo/spider-map/
+                 *         Spider map
                  *
+                 * @product   highmaps
                  * @apioption plotOptions.mapbubble.maxSize
                  */
                 /**
+                 * Minimum bubble size. Bubbles will automatically size between the
+                 * `minSize` and `maxSize` to reflect the `z` value of each bubble.
+                 * Can be either pixels (when no unit is given), or a percentage of
+                 * the smallest one of the plot width and height.
+                 *
                  * @sample {highmaps} maps/demo/map-bubble/
                  *         Bubble size
+                 * @sample {highmaps} maps/demo/spider-map/
+                 *         Spider map
                  *
+                 * @product   highmaps
                  * @apioption plotOptions.mapbubble.minSize
                  */
                 /**
@@ -9584,6 +9807,9 @@
                  * @default   0
                  * @apioption plotOptions.mapbubble.zThreshold
                  */
+                /**
+                 * @default 500
+                 */
                 animationLimit: 500,
                 joinBy: 'hc-key',
                 tooltip: {
@@ -9595,15 +9821,16 @@
         extend(MapBubbleSeries.prototype, {
             type: 'mapbubble',
             axisTypes: ['colorAxis'],
-            getProjectedBounds: MapSeries.prototype.getProjectedBounds,
+            getProjectedBounds: mapProto.getProjectedBounds,
             isCartesian: false,
             // If one single value is passed, it is interpreted as z
             pointArrayMap: ['z'],
             pointClass: MapBubblePoint,
-            processData: MapSeries.prototype.processData,
-            projectPoint: MapPointSeries.prototype.projectPoint,
-            setData: MapSeries.prototype.setData,
-            setOptions: MapSeries.prototype.setOptions,
+            processData: mapProto.processData,
+            projectPoint: mapPointProto.projectPoint,
+            setData: mapProto.setData,
+            setOptions: mapProto.setOptions,
+            updateData: mapProto.updateData,
             useMapGeometry: true,
             xyFromShape: true
         });
@@ -9767,27 +9994,27 @@
                     seriesOptions.pointPadding, 0),
                     cellAttr = {
                         x1: clamp(Math.round(xAxis.len -
-                            (xAxis.translate(point.x - xPad,
+                            xAxis.translate(point.x - xPad,
                     false,
                     true,
                     false,
-                    true, -pointPlacement) || 0)), -xAxis.len, 2 * xAxis.len),
+                    true, -pointPlacement)), -xAxis.len, 2 * xAxis.len),
                         x2: clamp(Math.round(xAxis.len -
-                            (xAxis.translate(point.x + xPad,
+                            xAxis.translate(point.x + xPad,
                     false,
                     true,
                     false,
-                    true, -pointPlacement) || 0)), -xAxis.len, 2 * xAxis.len),
-                        y1: clamp(Math.round((yAxis.translate(point.y - yPad,
+                    true, -pointPlacement)), -xAxis.len, 2 * xAxis.len),
+                        y1: clamp(Math.round(yAxis.translate(point.y - yPad,
                     false,
                     true,
                     false,
-                    true) || 0)), -yAxis.len, 2 * yAxis.len),
-                        y2: clamp(Math.round((yAxis.translate(point.y + yPad,
+                    true)), -yAxis.len, 2 * yAxis.len),
+                        y2: clamp(Math.round(yAxis.translate(point.y + yPad,
                     false,
                     true,
                     false,
-                    true) || 0)), -yAxis.len, 2 * yAxis.len)
+                    true)), -yAxis.len, 2 * yAxis.len)
                     };
                 var dimensions = [['width', 'x'], ['height', 'y']];
                 // Handle marker's fixed width, and height values including border
@@ -9865,7 +10092,7 @@
 
         return HeatmapPoint;
     });
-    _registerModule(_modules, 'Series/Heatmap/HeatmapSeries.js', [_modules['Core/Color/Color.js'], _modules['Series/ColorMapMixin.js'], _modules['Series/Heatmap/HeatmapPoint.js'], _modules['Core/Legend/LegendSymbol.js'], _modules['Core/Series/SeriesRegistry.js'], _modules['Core/Renderer/SVG/SVGRenderer.js'], _modules['Core/Utilities.js']], function (Color, ColorMapMixin, HeatmapPoint, LegendSymbol, SeriesRegistry, SVGRenderer, U) {
+    _registerModule(_modules, 'Series/Heatmap/HeatmapSeries.js', [_modules['Core/Color/Color.js'], _modules['Series/ColorMapComposition.js'], _modules['Series/Heatmap/HeatmapPoint.js'], _modules['Core/Legend/LegendSymbol.js'], _modules['Core/Series/SeriesRegistry.js'], _modules['Core/Renderer/SVG/SVGRenderer.js'], _modules['Core/Utilities.js']], function (Color, ColorMapComposition, HeatmapPoint, LegendSymbol, SeriesRegistry, SVGRenderer, U) {
         /* *
          *
          *  (c) 2010-2021 Torstein Honsi
@@ -9956,25 +10183,6 @@
                     this.points.forEach(function (point) {
                         if (point.graphic) {
                             point.graphic[_this.chart.styledMode ? 'css' : 'animate'](_this.colorAttribs(point));
-                            // @todo
-                            // Applying the border radius here is not optimal. It should
-                            // be set in the shapeArgs or returned from `markerAttribs`.
-                            // However, Series.drawPoints does not pick up markerAttribs
-                            // to be passed over to `renderer.symbol`. Also, image
-                            // symbols are not positioned by their top left corner like
-                            // other symbols are. This should be refactored, then we
-                            // could save ourselves some tests for .hasImage etc. And
-                            // the evaluation of borderRadius would be moved to
-                            // `markerAttribs`.
-                            if (_this.options.borderRadius) {
-                                point.graphic.attr({
-                                    r: _this.options.borderRadius
-                                });
-                            }
-                            // Saving option for reapplying later
-                            // when changing point's states (#16165)
-                            (point.shapeArgs || {}).r = _this.options.borderRadius;
-                            (point.shapeArgs || {}).d = point.graphic.pathArray;
                             if (point.value === null) { // #15708
                                 point.graphic.addClass('highcharts-null-point');
                             }
@@ -10031,6 +10239,18 @@
                 this.yAxis.axisPointRange = options.rowsize || 1;
                 // Bind new symbol names
                 symbols.ellipse = symbols.circle;
+                // @todo
+                //
+                // Setting the border radius here is a workaround. It should be set in
+                // the shapeArgs or returned from `markerAttribs`. However,
+                // Series.drawPoints does not pick up markerAttribs to be passed over to
+                // `renderer.symbol`. Also, image symbols are not positioned by their
+                // top left corner like other symbols are. This should be refactored,
+                // then we could save ourselves some tests for .hasImage etc. And the
+                // evaluation of borderRadius would be moved to `markerAttribs`.
+                if (options.marker) {
+                    options.marker.r = options.borderRadius;
+                }
             };
             /**
              * @private
@@ -10165,7 +10385,7 @@
                         clientX: (cellAttr.x1 + cellAttr.x2) / 2,
                         shapeType: 'path',
                         shapeArgs: merge(true, shapeArgs, {
-                            d: symbols[shape](shapeArgs.x, shapeArgs.y, shapeArgs.width, shapeArgs.height)
+                            d: symbols[shape](shapeArgs.x, shapeArgs.y, shapeArgs.width, shapeArgs.height, { r: options.borderRadius })
                         })
                     };
                     if (hasImage) {
@@ -10205,7 +10425,11 @@
                  */
                 animation: false,
                 /**
-                 * The border radius for each heatmap item.
+                 * The border radius for each heatmap item. The border's color and
+                 * width can be set in marker options.
+                 *
+                 * @see [lineColor](#plotOptions.heatmap.marker.lineColor)
+                 * @see [lineWidth](#plotOptions.heatmap.marker.lineWidth)
                  */
                 borderRadius: 0,
                 /**
@@ -10270,7 +10494,7 @@
                  *
                  * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
                  */
-                nullColor: "#f7f7f7" /* neutralColor3 */,
+                nullColor: "#f7f7f7" /* Palette.neutralColor3 */,
                 dataLabels: {
                     formatter: function () {
                         var numberFormatter = this.series.chart.numberFormatter;
@@ -10451,25 +10675,26 @@
             return HeatmapSeries;
         }(ScatterSeries));
         extend(HeatmapSeries.prototype, {
+            axisTypes: ColorMapComposition.seriesMembers.axisTypes,
+            colorKey: ColorMapComposition.seriesMembers.colorKey,
+            directTouch: true,
+            getExtremesFromAll: true,
+            parallelArrays: ColorMapComposition.seriesMembers.parallelArrays,
+            pointArrayMap: ['y', 'value'],
+            pointClass: HeatmapPoint,
+            trackerGroups: ColorMapComposition.seriesMembers.trackerGroups,
             /**
              * @private
              */
             alignDataLabel: ColumnSeries.prototype.alignDataLabel,
-            axisTypes: ColorMapMixin.SeriesMixin.axisTypes,
-            colorAttribs: ColorMapMixin.SeriesMixin.colorAttribs,
-            colorKey: ColorMapMixin.SeriesMixin.colorKey,
-            directTouch: true,
+            colorAttribs: ColorMapComposition.seriesMembers.colorAttribs,
             /**
              * @private
              */
             drawLegendSymbol: LegendSymbol.drawRectangle,
-            getExtremesFromAll: true,
-            getSymbol: Series.prototype.getSymbol,
-            parallelArrays: ColorMapMixin.SeriesMixin.parallelArrays,
-            pointArrayMap: ['y', 'value'],
-            pointClass: HeatmapPoint,
-            trackerGroups: ColorMapMixin.SeriesMixin.trackerGroups
+            getSymbol: Series.prototype.getSymbol
         });
+        ColorMapComposition.compose(HeatmapSeries);
         SeriesRegistry.registerSeriesType('heatmap', HeatmapSeries);
         /* *
          *
@@ -10851,7 +11076,7 @@
         G.maps = MapChart.maps;
         G.Projection = Projection;
         ColorAxis.compose(G.Chart, G.Fx, G.Legend, G.Series);
-        MapBubbleSeries.compose(G.Chart, G.Legend, G.Series);
+        MapBubbleSeries.compose(G.Axis, G.Chart, G.Legend, G.Series);
 
     });
 }));