highcharts 9.1.1 → 9.2.2

package/modules/map.src.js

@@ -1,5 +1,5 @@
 /**
- * @license Highmaps JS v9.1.1 (2021-06-04)
+ * @license Highmaps JS v9.2.2 (2021-08-24)
  *
  * Highmaps as a plugin for Highcharts or Highcharts Stock.
  *
@@ -238,7 +238,6 @@
          */
         var colorSeriesMixin = {
                 optionalAxis: 'colorAxis',
-                colorAxis: 0,
                 /* eslint-disable valid-jsdoc */
                 /**
                  * In choropleth maps,
@@ -281,7 +280,7 @@
 
         return exports;
     });
-    _registerModule(_modules, 'Core/Axis/ColorAxis.js', [_modules['Core/Axis/Axis.js'], _modules['Core/Chart/Chart.js'], _modules['Core/Color/Color.js'], _modules['Mixins/ColorSeries.js'], _modules['Core/Animation/Fx.js'], _modules['Core/Globals.js'], _modules['Core/Legend.js'], _modules['Mixins/LegendSymbol.js'], _modules['Core/Color/Palette.js'], _modules['Core/Series/Point.js'], _modules['Core/Series/Series.js'], _modules['Core/Utilities.js']], function (Axis, Chart, Color, ColorSeriesModule, Fx, H, Legend, LegendSymbolMixin, palette, Point, Series, U) {
+    _registerModule(_modules, 'Core/Axis/Color/ColorAxisComposition.js', [_modules['Core/Color/Color.js'], _modules['Mixins/ColorSeries.js'], _modules['Core/Utilities.js']], function (Color, ColorSeriesMixins, U) {
         /* *
          *
          *  (c) 2010-2021 Torstein Honsi
@@ -291,715 +290,310 @@
          *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
          *
          * */
-        var __extends = (this && this.__extends) || (function () {
-                var extendStatics = function (d,
-            b) {
-                    extendStatics = Object.setPrototypeOf ||
-                        ({ __proto__: [] } instanceof Array && function (d,
-            b) { d.__proto__ = b; }) ||
-                        function (d,
-            b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-                return extendStatics(d, b);
-            };
-            return function (d, b) {
-                extendStatics(d, b);
-                function __() { this.constructor = d; }
-                d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-            };
-        })();
         var color = Color.parse;
-        var colorPointMixin = ColorSeriesModule.colorPointMixin,
-            colorSeriesMixin = ColorSeriesModule.colorSeriesMixin;
-        var noop = H.noop;
+        var colorPointMixin = ColorSeriesMixins.colorPointMixin,
+            colorSeriesMixin = ColorSeriesMixins.colorSeriesMixin;
         var addEvent = U.addEvent,
-            erase = U.erase,
             extend = U.extend,
-            isNumber = U.isNumber,
             merge = U.merge,
             pick = U.pick,
             splat = U.splat;
-        /**
-         * Color axis types
-         *
-         * @typedef {"linear"|"logarithmic"} Highcharts.ColorAxisTypeValue
-         */
-        ''; // detach doclet above
-        extend(Series.prototype, colorSeriesMixin);
-        extend(Point.prototype, colorPointMixin);
-        Chart.prototype.collectionsWithUpdate.push('colorAxis');
-        Chart.prototype.collectionsWithInit.colorAxis = [Chart.prototype.addColorAxis];
-        /* eslint-disable no-invalid-this, valid-jsdoc */
-        /**
-         * The ColorAxis object for inclusion in gradient legends.
-         *
-         * @class
-         * @name Highcharts.ColorAxis
-         * @augments Highcharts.Axis
+        /* *
          *
-         * @param {Highcharts.Chart} chart
-         * The related chart of the color axis.
+         *  Composition
          *
-         * @param {Highcharts.ColorAxisOptions} userOptions
-         * The color axis options for initialization.
-         */
-        var ColorAxis = /** @class */ (function (_super) {
-                __extends(ColorAxis, _super);
+         * */
+        var ColorAxisComposition;
+        (function (ColorAxisComposition) {
             /* *
              *
-             *  Constructors
+             *  Constants
              *
              * */
-            /**
-             * @private
-             */
-            function ColorAxis(chart, userOptions) {
-                var _this = _super.call(this,
-                    chart,
-                    userOptions) || this;
-                _this.beforePadding = false; // Prevents unnecessary padding with `hc-more`
-                _this.chart = void 0;
-                _this.coll = 'colorAxis';
-                _this.dataClasses = void 0;
-                _this.legendItem = void 0;
-                _this.legendItems = void 0;
-                _this.name = ''; // Prevents 'undefined' in legend in IE8
-                _this.options = void 0;
-                _this.stops = void 0;
-                _this.visible = true;
-                _this.init(chart, userOptions);
-                return _this;
-            }
+            var composedClasses = [];
             /* *
              *
-             *  Functions
+             *  Variables
              *
              * */
-            /**
-             * Initializes the color axis.
-             *
-             * @function Highcharts.ColorAxis#init
+            var ColorAxisClass;
+            /* *
              *
-             * @param {Highcharts.Chart} chart
-             * The related chart of the color axis.
+             *  Functions
              *
-             * @param {Highcharts.ColorAxisOptions} userOptions
-             * The color axis options for initialization.
+             * */
+            /* eslint-disable valid-jsdoc */
+            /**
+             * @private
              */
-            ColorAxis.prototype.init = function (chart, userOptions) {
-                var axis = this;
-                var legend = chart.options.legend || {},
-                    horiz = userOptions.layout ?
-                        userOptions.layout !== 'vertical' :
-                        legend.layout !== 'vertical';
-                var options = merge(ColorAxis.defaultColorAxisOptions,
-                    userOptions, {
-                        showEmpty: false,
-                        title: null,
-                        visible: legend.enabled &&
-                            (userOptions ? userOptions.visible !== false : true)
+            function compose(ColorAxisType, ChartClass, FxClass, LegendClass, SeriesClass) {
+                if (!ColorAxisClass) {
+                    ColorAxisClass = ColorAxisType;
+                }
+                if (composedClasses.indexOf(ChartClass) === -1) {
+                    composedClasses.push(ChartClass);
+                    var chartProto = ChartClass.prototype;
+                    chartProto.collectionsWithUpdate.push('colorAxis');
+                    chartProto.collectionsWithInit.colorAxis = [chartProto.addColorAxis];
+                    addEvent(ChartClass, 'afterGetAxes', onChartAfterGetAxes);
+                    wrapChartCreateAxis(ChartClass);
+                }
+                if (composedClasses.indexOf(FxClass) === -1) {
+                    composedClasses.push(FxClass);
+                    var fxProto = FxClass.prototype;
+                    fxProto.fillSetter = wrapFxFillSetter;
+                    fxProto.strokeSetter = wrapFxStrokeSetter;
+                }
+                if (composedClasses.indexOf(LegendClass) === -1) {
+                    composedClasses.push(LegendClass);
+                    addEvent(LegendClass, 'afterGetAllItems', onLegendAfterGetAllItems);
+                    addEvent(LegendClass, 'afterColorizeItem', onLegendAfterColorizeItem);
+                    addEvent(LegendClass, 'afterUpdate', onLegendAfterUpdate);
+                }
+                if (composedClasses.indexOf(SeriesClass) === -1) {
+                    composedClasses.push(SeriesClass);
+                    extend(SeriesClass.prototype, colorSeriesMixin);
+                    extend(SeriesClass.prototype.pointClass.prototype, colorPointMixin);
+                    addEvent(SeriesClass, 'afterTranslate', onSeriesAfterTranslate);
+                    addEvent(SeriesClass, 'bindAxes', onSeriesBindAxes);
+                }
+            }
+            ColorAxisComposition.compose = compose;
+            /**
+             * Extend the chart getAxes method to also get the color axis.
+             * @private
+             */
+            function onChartAfterGetAxes() {
+                var _this = this;
+                var options = this.options;
+                this.colorAxis = [];
+                if (options.colorAxis) {
+                    options.colorAxis = splat(options.colorAxis);
+                    options.colorAxis.forEach(function (axisOptions, i) {
+                        axisOptions.index = i;
+                        new ColorAxisClass(_this, axisOptions); // eslint-disable-line no-new
                     });
-                axis.coll = 'colorAxis';
-                axis.side = userOptions.side || horiz ? 2 : 1;
-                axis.reversed = userOptions.reversed || !horiz;
-                axis.opposite = !horiz;
-                _super.prototype.init.call(this, chart, options);
-                // Base init() pushes it to the xAxis array, now pop it again
-                // chart[this.isXAxis ? 'xAxis' : 'yAxis'].pop();
-                // Prepare data classes
-                if (userOptions.dataClasses) {
-                    axis.initDataClasses(userOptions);
                 }
-                axis.initStops();
-                // Override original axis properties
-                axis.horiz = horiz;
-                axis.zoomEnabled = false;
-            };
+            }
             /**
+             * Add the color axis. This also removes the axis' own series to prevent
+             * them from showing up individually.
              * @private
              */
-            ColorAxis.prototype.initDataClasses = function (userOptions) {
-                var axis = this;
-                var chart = axis.chart,
-                    dataClasses,
-                    colorCounter = 0,
-                    colorCount = chart.options.chart.colorCount,
-                    options = axis.options,
-                    len = userOptions.dataClasses.length;
-                axis.dataClasses = dataClasses = [];
-                axis.legendItems = [];
-                userOptions.dataClasses.forEach(function (dataClass, i) {
-                    var colors;
-                    dataClass = merge(dataClass);
-                    dataClasses.push(dataClass);
-                    if (!chart.styledMode && dataClass.color) {
-                        return;
+            function onLegendAfterGetAllItems(e) {
+                var _this = this;
+                var colorAxes = this.chart.colorAxis || [],
+                    destroyItem = function (item) {
+                        var i = e.allItems.indexOf(item);
+                    if (i !== -1) {
+                        // #15436
+                        _this.destroyItem(e.allItems[i]);
+                        e.allItems.splice(i, 1);
                     }
-                    if (options.dataClassColor === 'category') {
-                        if (!chart.styledMode) {
-                            colors = chart.options.colors;
-                            colorCount = colors.length;
-                            dataClass.color = colors[colorCounter];
+                };
+                var colorAxisItems = [],
+                    options,
+                    i;
+                colorAxes.forEach(function (colorAxis) {
+                    options = colorAxis.options;
+                    if (options && options.showInLegend) {
+                        // Data classes
+                        if (options.dataClasses && options.visible) {
+                            colorAxisItems = colorAxisItems.concat(colorAxis.getDataClassLegendSymbols());
+                            // Gradient legend
                         }
-                        dataClass.colorIndex = colorCounter;
-                        // increase and loop back to zero
-                        colorCounter++;
-                        if (colorCounter === colorCount) {
-                            colorCounter = 0;
+                        else if (options.visible) {
+                            // Add this axis on top
+                            colorAxisItems.push(colorAxis);
                         }
-                    }
-                    else {
-                        dataClass.color = color(options.minColor).tweenTo(color(options.maxColor), len < 2 ? 0.5 : i / (len - 1) // #3219
-                        );
+                        // If dataClasses are defined or showInLegend option is not set
+                        // to true, do not add color axis' series to legend.
+                        colorAxis.series.forEach(function (series) {
+                            if (!series.options.showInLegend || options.dataClasses) {
+                                if (series.options.legendType === 'point') {
+                                    series.points.forEach(function (point) {
+                                        destroyItem(point);
+                                    });
+                                }
+                                else {
+                                    destroyItem(series);
+                                }
+                            }
+                        });
                     }
                 });
-            };
-            /**
-             * Returns true if the series has points at all.
-             *
-             * @function Highcharts.ColorAxis#hasData
-             *
-             * @return {boolean}
-             * True, if the series has points, otherwise false.
-             */
-            ColorAxis.prototype.hasData = function () {
-                return !!(this.tickPositions || []).length;
-            };
+                i = colorAxisItems.length;
+                while (i--) {
+                    e.allItems.unshift(colorAxisItems[i]);
+                }
+            }
             /**
-             * Override so that ticks are not added in data class axes (#6914)
              * @private
              */
-            ColorAxis.prototype.setTickPositions = function () {
-                if (!this.dataClasses) {
-                    return _super.prototype.setTickPositions.call(this);
+            function onLegendAfterColorizeItem(e) {
+                if (e.visible && e.item.legendColor) {
+                    e.item.legendSymbol.attr({
+                        fill: e.item.legendColor
+                    });
                 }
-            };
+            }
             /**
+             * Updates in the legend need to be reflected in the color axis. (#6888)
              * @private
              */
-            ColorAxis.prototype.initStops = function () {
-                var axis = this;
-                axis.stops = axis.options.stops || [
-                    [0, axis.options.minColor],
-                    [1, axis.options.maxColor]
-                ];
-                axis.stops.forEach(function (stop) {
-                    stop.color = color(stop[1]);
-                });
-            };
+            function onLegendAfterUpdate() {
+                var colorAxes = this.chart.colorAxis;
+                if (colorAxes) {
+                    colorAxes.forEach(function (colorAxis) {
+                        colorAxis.update({}, arguments[2]);
+                    });
+                }
+            }
             /**
-             * Extend the setOptions method to process extreme colors and color stops.
+             * Calculate and set colors for points.
              * @private
              */
-            ColorAxis.prototype.setOptions = function (userOptions) {
-                var axis = this;
-                _super.prototype.setOptions.call(this, userOptions);
-                axis.options.crosshair = axis.options.marker;
-            };
+            function onSeriesAfterTranslate() {
+                if (this.chart.colorAxis &&
+                    this.chart.colorAxis.length ||
+                    this.colorAttribs) {
+                    this.translateColors();
+                }
+            }
             /**
+             * Add colorAxis to series axisTypes.
              * @private
              */
-            ColorAxis.prototype.setAxisSize = function () {
-                var axis = this;
-                var symbol = axis.legendSymbol;
-                var chart = axis.chart;
-                var legendOptions = chart.options.legend || {};
-                var x,
-                    y,
-                    width,
-                    height;
-                if (symbol) {
-                    this.left = x = symbol.attr('x');
-                    this.top = y = symbol.attr('y');
-                    this.width = width = symbol.attr('width');
-                    this.height = height = symbol.attr('height');
-                    this.right = chart.chartWidth - x - width;
-                    this.bottom = chart.chartHeight - y - height;
-                    this.len = this.horiz ? width : height;
-                    this.pos = this.horiz ? x : y;
+            function onSeriesBindAxes() {
+                var axisTypes = this.axisTypes;
+                if (!axisTypes) {
+                    this.axisTypes = ['colorAxis'];
                 }
-                else {
-                    // Fake length for disabled legend to avoid tick issues
-                    // and such (#5205)
-                    this.len = (this.horiz ?
-                        legendOptions.symbolWidth :
-                        legendOptions.symbolHeight) || ColorAxis.defaultLegendLength;
+                else if (axisTypes.indexOf('colorAxis') === -1) {
+                    axisTypes.push('colorAxis');
                 }
-            };
+            }
             /**
              * @private
              */
-            ColorAxis.prototype.normalizedValue = function (value) {
-                var axis = this;
-                if (axis.logarithmic) {
-                    value = axis.logarithmic.log2lin(value);
-                }
-                return 1 - ((axis.max - value) /
-                    ((axis.max - axis.min) || 1));
-            };
+            function wrapChartCreateAxis(ChartClass) {
+                var superCreateAxis = ChartClass.prototype.createAxis;
+                ChartClass.prototype.createAxis = function (type, options) {
+                    if (type !== 'colorAxis') {
+                        return superCreateAxis.apply(this, arguments);
+                    }
+                    var axis = new ColorAxisClass(this,
+                        merge(options.axis, {
+                            index: this[type].length,
+                            isX: false
+                        }));
+                    this.isDirtyLegend = true;
+                    // Clear before 'bindAxes' (#11924)
+                    this.axes.forEach(function (axis) {
+                        axis.series = [];
+                    });
+                    this.series.forEach(function (series) {
+                        series.bindAxes();
+                        series.isDirtyData = true;
+                    });
+                    if (pick(options.redraw, true)) {
+                        this.redraw(options.animation);
+                    }
+                    return axis;
+                };
+            }
             /**
-             * Translate from a value to a color.
+             * Handle animation of the color attributes directly.
              * @private
              */
-            ColorAxis.prototype.toColor = function (value, point) {
-                var axis = this;
-                var dataClasses = axis.dataClasses;
-                var stops = axis.stops;
-                var pos,
-                    from,
-                    to,
-                    color,
-                    dataClass,
-                    i;
-                if (dataClasses) {
-                    i = dataClasses.length;
-                    while (i--) {
-                        dataClass = dataClasses[i];
-                        from = dataClass.from;
-                        to = dataClass.to;
-                        if ((typeof from === 'undefined' || value >= from) &&
-                            (typeof to === 'undefined' || value <= to)) {
-                            color = dataClass.color;
-                            if (point) {
-                                point.dataClass = i;
-                                point.colorIndex = dataClass.colorIndex;
-                            }
-                            break;
-                        }
-                    }
-                }
-                else {
-                    pos = axis.normalizedValue(value);
-                    i = stops.length;
-                    while (i--) {
-                        if (pos > stops[i][0]) {
-                            break;
-                        }
-                    }
-                    from = stops[i] || stops[i + 1];
-                    to = stops[i + 1] || from;
-                    // The position within the gradient
-                    pos = 1 - (to[0] - pos) / ((to[0] - from[0]) || 1);
-                    color = from.color.tweenTo(to.color, pos);
-                }
-                return color;
-            };
-            /**
-             * Override the getOffset method to add the whole axis groups inside the
-             * legend.
-             * @private
-             */
-            ColorAxis.prototype.getOffset = function () {
-                var axis = this;
-                var group = axis.legendGroup;
-                var sideOffset = axis.chart.axisOffset[axis.side];
-                if (group) {
-                    // Hook for the getOffset method to add groups to this parent
-                    // group
-                    axis.axisParent = group;
-                    // Call the base
-                    _super.prototype.getOffset.call(this);
-                    // First time only
-                    if (!axis.added) {
-                        axis.added = true;
-                        axis.labelLeft = 0;
-                        axis.labelRight = axis.width;
-                    }
-                    // Reset it to avoid color axis reserving space
-                    axis.chart.axisOffset[axis.side] = sideOffset;
-                }
-            };
-            /**
-             * Create the color gradient.
-             * @private
-             */
-            ColorAxis.prototype.setLegendColor = function () {
-                var axis = this;
-                var horiz = axis.horiz;
-                var reversed = axis.reversed;
-                var one = reversed ? 1 : 0;
-                var zero = reversed ? 0 : 1;
-                var grad = horiz ? [one, 0,
-                    zero, 0] : [0,
-                    zero, 0,
-                    one]; // #3190
-                    axis.legendColor = {
-                        linearGradient: {
-                            x1: grad[0],
-                            y1: grad[1],
-                            x2: grad[2],
-                            y2: grad[3]
-                        },
-                        stops: axis.stops
-                    };
-            };
-            /**
-             * The color axis appears inside the legend and has its own legend symbol.
-             * @private
-             */
-            ColorAxis.prototype.drawLegendSymbol = function (legend, item) {
-                var axis = this;
-                var padding = legend.padding;
-                var legendOptions = legend.options;
-                var horiz = axis.horiz;
-                var width = pick(legendOptions.symbolWidth,
-                    horiz ? ColorAxis.defaultLegendLength : 12);
-                var height = pick(legendOptions.symbolHeight,
-                    horiz ? 12 : ColorAxis.defaultLegendLength);
-                var labelPadding = pick(legendOptions.labelPadding,
-                    horiz ? 16 : 30);
-                var itemDistance = pick(legendOptions.itemDistance, 10);
-                this.setLegendColor();
-                // Create the gradient
-                item.legendSymbol = this.chart.renderer.rect(0, legend.baseline - 11, width, height).attr({
-                    zIndex: 1
-                }).add(item.legendGroup);
-                // Set how much space this legend item takes up
-                axis.legendItemWidth = width + padding + (horiz ? itemDistance : labelPadding);
-                axis.legendItemHeight = height + padding + (horiz ? labelPadding : 0);
-            };
-            /**
-             * Fool the legend.
-             * @private
-             */
-            ColorAxis.prototype.setState = function (state) {
-                this.series.forEach(function (series) {
-                    series.setState(state);
-                });
-            };
-            /**
-             * @private
-             */
-            ColorAxis.prototype.setVisible = function () {
-            };
-            /**
-             * @private
-             */
-            ColorAxis.prototype.getSeriesExtremes = function () {
-                var axis = this;
-                var series = axis.series;
-                var colorValArray,
-                    colorKey,
-                    colorValIndex,
-                    pointArrayMap,
-                    calculatedExtremes,
-                    cSeries,
-                    i = series.length,
-                    yData,
-                    j;
-                this.dataMin = Infinity;
-                this.dataMax = -Infinity;
-                while (i--) { // x, y, value, other
-                    cSeries = series[i];
-                    colorKey = cSeries.colorKey = pick(cSeries.options.colorKey, cSeries.colorKey, cSeries.pointValKey, cSeries.zoneAxis, 'y');
-                    pointArrayMap = cSeries.pointArrayMap;
-                    calculatedExtremes = cSeries[colorKey + 'Min'] &&
-                        cSeries[colorKey + 'Max'];
-                    if (cSeries[colorKey + 'Data']) {
-                        colorValArray = cSeries[colorKey + 'Data'];
-                    }
-                    else {
-                        if (!pointArrayMap) {
-                            colorValArray = cSeries.yData;
-                        }
-                        else {
-                            colorValArray = [];
-                            colorValIndex = pointArrayMap.indexOf(colorKey);
-                            yData = cSeries.yData;
-                            if (colorValIndex >= 0 && yData) {
-                                for (j = 0; j < yData.length; j++) {
-                                    colorValArray.push(pick(yData[j][colorValIndex], yData[j]));
-                                }
-                            }
-                        }
-                    }
-                    // If color key extremes are already calculated, use them.
-                    if (calculatedExtremes) {
-                        cSeries.minColorValue = cSeries[colorKey + 'Min'];
-                        cSeries.maxColorValue = cSeries[colorKey + 'Max'];
-                    }
-                    else {
-                        var cExtremes = Series.prototype.getExtremes.call(cSeries,
-                            colorValArray);
-                        cSeries.minColorValue = cExtremes.dataMin;
-                        cSeries.maxColorValue = cExtremes.dataMax;
-                    }
-                    if (typeof cSeries.minColorValue !== 'undefined') {
-                        this.dataMin =
-                            Math.min(this.dataMin, cSeries.minColorValue);
-                        this.dataMax =
-                            Math.max(this.dataMax, cSeries.maxColorValue);
-                    }
-                    if (!calculatedExtremes) {
-                        Series.prototype.applyExtremes.call(cSeries);
-                    }
-                }
-            };
-            /**
-             * Internal function to draw a crosshair.
-             *
-             * @function Highcharts.ColorAxis#drawCrosshair
-             *
-             * @param {Highcharts.PointerEventObject} [e]
-             *        The event arguments from the modified pointer event, extended with
-             *        `chartX` and `chartY`
-             *
-             * @param {Highcharts.Point} [point]
-             *        The Point object if the crosshair snaps to points.
-             *
-             * @fires Highcharts.ColorAxis#event:afterDrawCrosshair
-             * @fires Highcharts.ColorAxis#event:drawCrosshair
-             */
-            ColorAxis.prototype.drawCrosshair = function (e, point) {
-                var axis = this;
-                var plotX = point && point.plotX;
-                var plotY = point && point.plotY;
-                var axisPos = axis.pos;
-                var axisLen = axis.len;
-                var crossPos;
-                if (point) {
-                    crossPos = axis.toPixels(point.getNestedProperty(point.series.colorKey));
-                    if (crossPos < axisPos) {
-                        crossPos = axisPos - 2;
-                    }
-                    else if (crossPos > axisPos + axisLen) {
-                        crossPos = axisPos + axisLen + 2;
-                    }
-                    point.plotX = crossPos;
-                    point.plotY = axis.len - crossPos;
-                    _super.prototype.drawCrosshair.call(this, e, point);
-                    point.plotX = plotX;
-                    point.plotY = plotY;
-                    if (axis.cross &&
-                        !axis.cross.addedToColorAxis &&
-                        axis.legendGroup) {
-                        axis.cross
-                            .addClass('highcharts-coloraxis-marker')
-                            .add(axis.legendGroup);
-                        axis.cross.addedToColorAxis = true;
-                        if (!axis.chart.styledMode &&
-                            typeof axis.crosshair === 'object') {
-                            axis.cross.attr({
-                                fill: axis.crosshair.color
-                            });
-                        }
-                    }
-                }
-            };
+            function wrapFxFillSetter() {
+                this.elem.attr('fill', color(this.start).tweenTo(color(this.end), this.pos), void 0, true);
+            }
             /**
+             * Handle animation of the color attributes directly.
              * @private
              */
-            ColorAxis.prototype.getPlotLinePath = function (options) {
-                var axis = this,
-                    left = axis.left,
-                    pos = options.translatedValue,
-                    top = axis.top;
-                // crosshairs only
-                return isNumber(pos) ? // pos can be 0 (#3969)
-                    (axis.horiz ? [
-                        ['M', pos - 4, top - 6],
-                        ['L', pos + 4, top - 6],
-                        ['L', pos, top],
-                        ['Z']
-                    ] : [
-                        ['M', left, pos],
-                        ['L', left - 6, pos + 6],
-                        ['L', left - 6, pos - 6],
-                        ['Z']
-                    ]) :
-                    _super.prototype.getPlotLinePath.call(this, options);
-            };
-            /**
-             * Updates a color axis instance with a new set of options. The options are
-             * merged with the existing options, so only new or altered options need to
-             * be specified.
-             *
-             * @function Highcharts.ColorAxis#update
-             *
-             * @param {Highcharts.ColorAxisOptions} newOptions
-             * The new options that will be merged in with existing options on the color
-             * axis.
-             *
-             * @param {boolean} [redraw]
-             * Whether to redraw the chart after the color axis is altered. If doing
-             * more operations on the chart, it is a good idea to set redraw to `false`
-             * and call {@link Highcharts.Chart#redraw} after.
-             */
-            ColorAxis.prototype.update = function (newOptions, redraw) {
-                var axis = this,
-                    chart = axis.chart,
-                    legend = chart.legend;
-                this.series.forEach(function (series) {
-                    // Needed for Axis.update when choropleth colors change
-                    series.isDirtyData = true;
-                });
-                // When updating data classes, destroy old items and make sure new
-                // ones are created (#3207)
-                if (newOptions.dataClasses && legend.allItems || axis.dataClasses) {
-                    axis.destroyItems();
-                }
-                _super.prototype.update.call(this, newOptions, redraw);
-                if (axis.legendItem) {
-                    axis.setLegendColor();
-                    legend.colorizeItem(this, true);
-                }
-            };
-            /**
-             * Destroy color axis legend items.
-             * @private
-             */
-            ColorAxis.prototype.destroyItems = function () {
-                var axis = this;
-                var chart = axis.chart;
-                if (axis.legendItem) {
-                    chart.legend.destroyItem(axis);
-                }
-                else if (axis.legendItems) {
-                    axis.legendItems.forEach(function (item) {
-                        chart.legend.destroyItem(item);
-                    });
-                }
-                chart.isDirtyLegend = true;
-            };
-            //   Removing the whole axis (#14283)
-            ColorAxis.prototype.destroy = function () {
-                this.chart.isDirtyLegend = true;
-                this.destroyItems();
-                _super.prototype.destroy.apply(this, [].slice.call(arguments));
-            };
-            /**
-             * Removes the color axis and the related legend item.
-             *
-             * @function Highcharts.ColorAxis#remove
-             *
-             * @param {boolean} [redraw=true]
-             *        Whether to redraw the chart following the remove.
-             */
-            ColorAxis.prototype.remove = function (redraw) {
-                this.destroyItems();
-                _super.prototype.remove.call(this, redraw);
-            };
-            /**
-             * Get the legend item symbols for data classes.
-             * @private
-             */
-            ColorAxis.prototype.getDataClassLegendSymbols = function () {
-                var axis = this;
-                var chart = axis.chart;
-                var legendItems = axis.legendItems;
-                var legendOptions = chart.options.legend;
-                var valueDecimals = legendOptions.valueDecimals;
-                var valueSuffix = legendOptions.valueSuffix || '';
-                var name;
-                if (!legendItems.length) {
-                    axis.dataClasses.forEach(function (dataClass, i) {
-                        var vis = true,
-                            from = dataClass.from,
-                            to = dataClass.to;
-                        var numberFormatter = chart.numberFormatter;
-                        // Assemble the default name. This can be overridden
-                        // by legend.options.labelFormatter
-                        name = '';
-                        if (typeof from === 'undefined') {
-                            name = '< ';
-                        }
-                        else if (typeof to === 'undefined') {
-                            name = '> ';
-                        }
-                        if (typeof from !== 'undefined') {
-                            name += numberFormatter(from, valueDecimals) + valueSuffix;
-                        }
-                        if (typeof from !== 'undefined' && typeof to !== 'undefined') {
-                            name += ' - ';
-                        }
-                        if (typeof to !== 'undefined') {
-                            name += numberFormatter(to, valueDecimals) + valueSuffix;
-                        }
-                        // Add a mock object to the legend items
-                        legendItems.push(extend({
-                            chart: chart,
-                            name: name,
-                            options: {},
-                            drawLegendSymbol: LegendSymbolMixin.drawRectangle,
-                            visible: true,
-                            setState: noop,
-                            isDataClass: true,
-                            setVisible: function () {
-                                vis = axis.visible = !vis;
-                                axis.series.forEach(function (series) {
-                                    series.points.forEach(function (point) {
-                                        if (point.dataClass === i) {
-                                            point.setVisible(vis);
-                                        }
-                                    });
-                                });
-                                chart.legend.colorizeItem(this, vis);
-                            }
-                        }, dataClass));
-                    });
-                }
-                return legendItems;
-            };
-            /* *
-             *
-             *  Static Functions
-             *
-             * */
-            ColorAxis.defaultLegendLength = 200;
-            /**
-             * A color axis for series. Visually, the color
-             * axis will appear as a gradient or as separate items inside the
-             * legend, depending on whether the axis is scalar or based on data
-             * classes.
-             *
-             * For supported color formats, see the
-             * [docs article about colors](https://www.highcharts.com/docs/chart-design-and-style/colors).
-             *
-             * A scalar color axis is represented by a gradient. The colors either
-             * range between the [minColor](#colorAxis.minColor) and the
-             * [maxColor](#colorAxis.maxColor), or for more fine grained control the
-             * colors can be defined in [stops](#colorAxis.stops). Often times, the
-             * color axis needs to be adjusted to get the right color spread for the
-             * data. In addition to stops, consider using a logarithmic
-             * [axis type](#colorAxis.type), or setting [min](#colorAxis.min) and
-             * [max](#colorAxis.max) to avoid the colors being determined by
-             * outliers.
-             *
-             * When [dataClasses](#colorAxis.dataClasses) are used, the ranges are
-             * subdivided into separate classes like categories based on their
-             * values. This can be used for ranges between two values, but also for
-             * a true category. However, when your data is categorized, it may be as
-             * convenient to add each category to a separate series.
-             *
-             * Color axis does not work with: `sankey`, `sunburst`, `dependencywheel`,
-             * `networkgraph`, `wordcloud`, `venn`, `gauge` and `solidgauge` series
-             * types.
-             *
-             * Since v7.2.0 `colorAxis` can also be an array of options objects.
-             *
-             * See [the Axis object](/class-reference/Highcharts.Axis) for
-             * programmatic access to the axis.
-             *
-             * @sample       {highcharts} highcharts/coloraxis/custom-color-key
-             *               Column chart with color axis
-             * @sample       {highcharts} highcharts/coloraxis/horizontal-layout
-             *               Horizontal layout
-             * @sample       {highmaps} maps/coloraxis/dataclasscolor
-             *               With data classes
-             * @sample       {highmaps} maps/coloraxis/mincolor-maxcolor
-             *               Min color and max color
-             *
-             * @extends      xAxis
-             * @excluding    alignTicks, allowDecimals, alternateGridColor, breaks,
-             *               categories, crosshair, dateTimeLabelFormats, height, left,
-             *               lineWidth, linkedTo, maxZoom, minRange, minTickInterval,
-             *               offset, opposite, pane, plotBands, plotLines,
-             *               reversedStacks, showEmpty, title, top, width, zoomEnabled
-             * @product      highcharts highstock highmaps
-             * @type         {*|Array<*>}
-             * @optionparent colorAxis
-             * @ignore
-             */
-            ColorAxis.defaultColorAxisOptions = {
+            function wrapFxStrokeSetter() {
+                this.elem.attr('stroke', color(this.start).tweenTo(color(this.end), this.pos), void 0, true);
+            }
+        })(ColorAxisComposition || (ColorAxisComposition = {}));
+        /* *
+         *
+         *  Default Export
+         *
+         * */
+
+        return ColorAxisComposition;
+    });
+    _registerModule(_modules, 'Core/Axis/Color/ColorAxisDefaults.js', [_modules['Core/Color/Palette.js']], function (Palette) {
+        /* *
+         *
+         *  (c) 2010-2021 Torstein Honsi
+         *
+         *  License: www.highcharts.com/license
+         *
+         *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
+         *
+         * */
+        /* *
+         *
+         *  API Options
+         *
+         * */
+        /**
+         * A color axis for series. Visually, the color
+         * axis will appear as a gradient or as separate items inside the
+         * legend, depending on whether the axis is scalar or based on data
+         * classes.
+         *
+         * For supported color formats, see the
+         * [docs article about colors](https://www.highcharts.com/docs/chart-design-and-style/colors).
+         *
+         * A scalar color axis is represented by a gradient. The colors either
+         * range between the [minColor](#colorAxis.minColor) and the
+         * [maxColor](#colorAxis.maxColor), or for more fine grained control the
+         * colors can be defined in [stops](#colorAxis.stops). Often times, the
+         * color axis needs to be adjusted to get the right color spread for the
+         * data. In addition to stops, consider using a logarithmic
+         * [axis type](#colorAxis.type), or setting [min](#colorAxis.min) and
+         * [max](#colorAxis.max) to avoid the colors being determined by
+         * outliers.
+         *
+         * When [dataClasses](#colorAxis.dataClasses) are used, the ranges are
+         * subdivided into separate classes like categories based on their
+         * values. This can be used for ranges between two values, but also for
+         * a true category. However, when your data is categorized, it may be as
+         * convenient to add each category to a separate series.
+         *
+         * Color axis does not work with: `sankey`, `sunburst`, `dependencywheel`,
+         * `networkgraph`, `wordcloud`, `venn`, `gauge` and `solidgauge` series
+         * types.
+         *
+         * Since v7.2.0 `colorAxis` can also be an array of options objects.
+         *
+         * See [the Axis object](/class-reference/Highcharts.Axis) for
+         * programmatic access to the axis.
+         *
+         * @sample       {highcharts} highcharts/coloraxis/custom-color-key
+         *               Column chart with color axis
+         * @sample       {highcharts} highcharts/coloraxis/horizontal-layout
+         *               Horizontal layout
+         * @sample       {highmaps} maps/coloraxis/dataclasscolor
+         *               With data classes
+         * @sample       {highmaps} maps/coloraxis/mincolor-maxcolor
+         *               Min color and max color
+         *
+         * @extends      xAxis
+         * @excluding    alignTicks, allowDecimals, alternateGridColor, breaks,
+         *               categories, crosshair, dateTimeLabelFormats, height, left,
+         *               lineWidth, linkedTo, maxZoom, minRange, minTickInterval,
+         *               offset, opposite, pane, plotBands, plotLines,
+         *               reversedStacks, showEmpty, title, top, width, zoomEnabled
+         * @product      highcharts highstock highmaps
+         * @type         {*|Array<*>}
+         * @optionparent colorAxis
+         */
+        var colorAxisDefaults = {
                 /**
                  * Whether to allow decimals on the color axis.
                  * @type      {boolean}
@@ -1229,7 +823,7 @@
                      * @type    {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
                      * @product highcharts highstock highmaps
                      */
-                    color: palette.neutralColor40
+                    color: Palette.neutralColor40
                 },
                 /**
                  * The axis labels show the number for each tick.
@@ -1271,7 +865,7 @@
                  * @type    {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
                  * @product highcharts highstock highmaps
                  */
-                minColor: palette.highlightColor10,
+                minColor: Palette.highlightColor10,
                 /**
                  * The color to represent the maximum of the color axis. Unless
                  * [dataClasses](#colorAxis.dataClasses) or
@@ -1290,7 +884,7 @@
                  * @type    {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
                  * @product highcharts highstock highmaps
                  */
-                maxColor: palette.highlightColor100,
+                maxColor: 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`
@@ -1358,6 +952,681 @@
                  */
                 showInLegend: true
             };
+        /* *
+         *
+         *  Default Export
+         *
+         * */
+
+        return colorAxisDefaults;
+    });
+    _registerModule(_modules, 'Core/Axis/Color/ColorAxis.js', [_modules['Core/Axis/Axis.js'], _modules['Core/Color/Color.js'], _modules['Core/Axis/Color/ColorAxisComposition.js'], _modules['Core/Axis/Color/ColorAxisDefaults.js'], _modules['Core/Globals.js'], _modules['Core/Legend/LegendSymbol.js'], _modules['Core/Series/SeriesRegistry.js'], _modules['Core/Utilities.js']], function (Axis, Color, ColorAxisComposition, ColorAxisDefaults, H, LegendSymbol, SeriesRegistry, U) {
+        /* *
+         *
+         *  (c) 2010-2021 Torstein Honsi
+         *
+         *  License: www.highcharts.com/license
+         *
+         *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
+         *
+         * */
+        var __extends = (this && this.__extends) || (function () {
+                var extendStatics = function (d,
+            b) {
+                    extendStatics = Object.setPrototypeOf ||
+                        ({ __proto__: [] } instanceof Array && function (d,
+            b) { d.__proto__ = b; }) ||
+                        function (d,
+            b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+                return extendStatics(d, b);
+            };
+            return function (d, b) {
+                extendStatics(d, b);
+                function __() { this.constructor = d; }
+                d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+            };
+        })();
+        var color = Color.parse;
+        var noop = H.noop;
+        var Series = SeriesRegistry.series;
+        var extend = U.extend,
+            isNumber = U.isNumber,
+            merge = U.merge,
+            pick = U.pick;
+        /* *
+         *
+         *  Class
+         *
+         * */
+        /* eslint-disable no-invalid-this, valid-jsdoc */
+        /**
+         * The ColorAxis object for inclusion in gradient legends.
+         *
+         * @class
+         * @name Highcharts.ColorAxis
+         * @augments Highcharts.Axis
+         *
+         * @param {Highcharts.Chart} chart
+         * The related chart of the color axis.
+         *
+         * @param {Highcharts.ColorAxisOptions} userOptions
+         * The color axis options for initialization.
+         */
+        var ColorAxis = /** @class */ (function (_super) {
+                __extends(ColorAxis, _super);
+            /* *
+             *
+             *  Constructors
+             *
+             * */
+            /**
+             * @private
+             */
+            function ColorAxis(chart, userOptions) {
+                var _this = _super.call(this,
+                    chart,
+                    userOptions) || this;
+                _this.beforePadding = false; // Prevents unnecessary padding with `hc-more`
+                _this.chart = void 0;
+                _this.coll = 'colorAxis';
+                _this.dataClasses = void 0;
+                _this.legendItem = void 0;
+                _this.legendItems = void 0;
+                _this.name = ''; // Prevents 'undefined' in legend in IE8
+                _this.options = void 0;
+                _this.stops = void 0;
+                _this.visible = true;
+                _this.init(chart, userOptions);
+                return _this;
+            }
+            /* *
+             *
+             *  Static Functions
+             *
+             * */
+            ColorAxis.compose = function (ChartClass, FxClass, LegendClass, SeriesClass) {
+                ColorAxisComposition.compose(ColorAxis, ChartClass, FxClass, LegendClass, SeriesClass);
+            };
+            /* *
+             *
+             *  Functions
+             *
+             * */
+            /**
+             * Initializes the color axis.
+             *
+             * @function Highcharts.ColorAxis#init
+             *
+             * @param {Highcharts.Chart} chart
+             * The related chart of the color axis.
+             *
+             * @param {Highcharts.ColorAxisOptions} userOptions
+             * The color axis options for initialization.
+             */
+            ColorAxis.prototype.init = function (chart, userOptions) {
+                var axis = this;
+                var legend = chart.options.legend || {},
+                    horiz = userOptions.layout ?
+                        userOptions.layout !== 'vertical' :
+                        legend.layout !== 'vertical',
+                    visible = userOptions.visible;
+                var options = merge(ColorAxis.defaultColorAxisOptions,
+                    userOptions, {
+                        showEmpty: false,
+                        title: null,
+                        visible: legend.enabled && visible !== false
+                    });
+                axis.coll = 'colorAxis';
+                axis.side = userOptions.side || horiz ? 2 : 1;
+                axis.reversed = userOptions.reversed || !horiz;
+                axis.opposite = !horiz;
+                _super.prototype.init.call(this, chart, options);
+                // #16053: Restore the actual userOptions.visible so the color axis
+                // doesnt stay hidden forever when hiding and showing legend
+                axis.userOptions.visible = visible;
+                // Base init() pushes it to the xAxis array, now pop it again
+                // chart[this.isXAxis ? 'xAxis' : 'yAxis'].pop();
+                // Prepare data classes
+                if (userOptions.dataClasses) {
+                    axis.initDataClasses(userOptions);
+                }
+                axis.initStops();
+                // Override original axis properties
+                axis.horiz = horiz;
+                axis.zoomEnabled = false;
+            };
+            /**
+             * @private
+             */
+            ColorAxis.prototype.initDataClasses = function (userOptions) {
+                var axis = this,
+                    chart = axis.chart,
+                    options = axis.options,
+                    len = userOptions.dataClasses.length;
+                var dataClasses,
+                    colorCounter = 0,
+                    colorCount = chart.options.chart.colorCount;
+                axis.dataClasses = dataClasses = [];
+                axis.legendItems = [];
+                (userOptions.dataClasses || []).forEach(function (dataClass, i) {
+                    var colors;
+                    dataClass = merge(dataClass);
+                    dataClasses.push(dataClass);
+                    if (!chart.styledMode && dataClass.color) {
+                        return;
+                    }
+                    if (options.dataClassColor === 'category') {
+                        if (!chart.styledMode) {
+                            colors = chart.options.colors;
+                            colorCount = colors.length;
+                            dataClass.color = colors[colorCounter];
+                        }
+                        dataClass.colorIndex = colorCounter;
+                        // increase and loop back to zero
+                        colorCounter++;
+                        if (colorCounter === colorCount) {
+                            colorCounter = 0;
+                        }
+                    }
+                    else {
+                        dataClass.color = color(options.minColor).tweenTo(color(options.maxColor), len < 2 ? 0.5 : i / (len - 1) // #3219
+                        );
+                    }
+                });
+            };
+            /**
+             * Returns true if the series has points at all.
+             *
+             * @function Highcharts.ColorAxis#hasData
+             *
+             * @return {boolean}
+             * True, if the series has points, otherwise false.
+             */
+            ColorAxis.prototype.hasData = function () {
+                return !!(this.tickPositions || []).length;
+            };
+            /**
+             * Override so that ticks are not added in data class axes (#6914)
+             * @private
+             */
+            ColorAxis.prototype.setTickPositions = function () {
+                if (!this.dataClasses) {
+                    return _super.prototype.setTickPositions.call(this);
+                }
+            };
+            /**
+             * @private
+             */
+            ColorAxis.prototype.initStops = function () {
+                var axis = this;
+                axis.stops = axis.options.stops || [
+                    [0, axis.options.minColor],
+                    [1, axis.options.maxColor]
+                ];
+                axis.stops.forEach(function (stop) {
+                    stop.color = color(stop[1]);
+                });
+            };
+            /**
+             * Extend the setOptions method to process extreme colors and color stops.
+             * @private
+             */
+            ColorAxis.prototype.setOptions = function (userOptions) {
+                var axis = this;
+                _super.prototype.setOptions.call(this, userOptions);
+                axis.options.crosshair = axis.options.marker;
+            };
+            /**
+             * @private
+             */
+            ColorAxis.prototype.setAxisSize = function () {
+                var axis = this;
+                var symbol = axis.legendSymbol;
+                var chart = axis.chart;
+                var legendOptions = chart.options.legend || {};
+                var x,
+                    y,
+                    width,
+                    height;
+                if (symbol) {
+                    this.left = x = symbol.attr('x');
+                    this.top = y = symbol.attr('y');
+                    this.width = width = symbol.attr('width');
+                    this.height = height = symbol.attr('height');
+                    this.right = chart.chartWidth - x - width;
+                    this.bottom = chart.chartHeight - y - height;
+                    this.len = this.horiz ? width : height;
+                    this.pos = this.horiz ? x : y;
+                }
+                else {
+                    // Fake length for disabled legend to avoid tick issues
+                    // and such (#5205)
+                    this.len = (this.horiz ?
+                        legendOptions.symbolWidth :
+                        legendOptions.symbolHeight) || ColorAxis.defaultLegendLength;
+                }
+            };
+            /**
+             * @private
+             */
+            ColorAxis.prototype.normalizedValue = function (value) {
+                var axis = this;
+                if (axis.logarithmic) {
+                    value = axis.logarithmic.log2lin(value);
+                }
+                return 1 - ((axis.max - value) /
+                    ((axis.max - axis.min) || 1));
+            };
+            /**
+             * Translate from a value to a color.
+             * @private
+             */
+            ColorAxis.prototype.toColor = function (value, point) {
+                var axis = this;
+                var dataClasses = axis.dataClasses;
+                var stops = axis.stops;
+                var pos,
+                    from,
+                    to,
+                    color,
+                    dataClass,
+                    i;
+                if (dataClasses) {
+                    i = dataClasses.length;
+                    while (i--) {
+                        dataClass = dataClasses[i];
+                        from = dataClass.from;
+                        to = dataClass.to;
+                        if ((typeof from === 'undefined' || value >= from) &&
+                            (typeof to === 'undefined' || value <= to)) {
+                            color = dataClass.color;
+                            if (point) {
+                                point.dataClass = i;
+                                point.colorIndex = dataClass.colorIndex;
+                            }
+                            break;
+                        }
+                    }
+                }
+                else {
+                    pos = axis.normalizedValue(value);
+                    i = stops.length;
+                    while (i--) {
+                        if (pos > stops[i][0]) {
+                            break;
+                        }
+                    }
+                    from = stops[i] || stops[i + 1];
+                    to = stops[i + 1] || from;
+                    // The position within the gradient
+                    pos = 1 - (to[0] - pos) / ((to[0] - from[0]) || 1);
+                    color = from.color.tweenTo(to.color, pos);
+                }
+                return color;
+            };
+            /**
+             * Override the getOffset method to add the whole axis groups inside the
+             * legend.
+             * @private
+             */
+            ColorAxis.prototype.getOffset = function () {
+                var axis = this;
+                var group = axis.legendGroup;
+                var sideOffset = axis.chart.axisOffset[axis.side];
+                if (group) {
+                    // Hook for the getOffset method to add groups to this parent
+                    // group
+                    axis.axisParent = group;
+                    // Call the base
+                    _super.prototype.getOffset.call(this);
+                    // First time only
+                    if (!axis.added) {
+                        axis.added = true;
+                        axis.labelLeft = 0;
+                        axis.labelRight = axis.width;
+                    }
+                    // Reset it to avoid color axis reserving space
+                    axis.chart.axisOffset[axis.side] = sideOffset;
+                }
+            };
+            /**
+             * Create the color gradient.
+             * @private
+             */
+            ColorAxis.prototype.setLegendColor = function () {
+                var axis = this;
+                var horiz = axis.horiz;
+                var reversed = axis.reversed;
+                var one = reversed ? 1 : 0;
+                var zero = reversed ? 0 : 1;
+                var grad = horiz ? [one, 0,
+                    zero, 0] : [0,
+                    zero, 0,
+                    one]; // #3190
+                    axis.legendColor = {
+                        linearGradient: {
+                            x1: grad[0],
+                            y1: grad[1],
+                            x2: grad[2],
+                            y2: grad[3]
+                        },
+                        stops: axis.stops
+                    };
+            };
+            /**
+             * The color axis appears inside the legend and has its own legend symbol.
+             * @private
+             */
+            ColorAxis.prototype.drawLegendSymbol = function (legend, item) {
+                var axis = this;
+                var padding = legend.padding;
+                var legendOptions = legend.options;
+                var horiz = axis.horiz;
+                var width = pick(legendOptions.symbolWidth,
+                    horiz ? ColorAxis.defaultLegendLength : 12);
+                var height = pick(legendOptions.symbolHeight,
+                    horiz ? 12 : ColorAxis.defaultLegendLength);
+                var labelPadding = pick(legendOptions.labelPadding,
+                    horiz ? 16 : 30);
+                var itemDistance = pick(legendOptions.itemDistance, 10);
+                this.setLegendColor();
+                // Create the gradient
+                item.legendSymbol = this.chart.renderer.rect(0, legend.baseline - 11, width, height).attr({
+                    zIndex: 1
+                }).add(item.legendGroup);
+                // Set how much space this legend item takes up
+                axis.legendItemWidth = width + padding + (horiz ? itemDistance : labelPadding);
+                axis.legendItemHeight = height + padding + (horiz ? labelPadding : 0);
+            };
+            /**
+             * Fool the legend.
+             * @private
+             */
+            ColorAxis.prototype.setState = function (state) {
+                this.series.forEach(function (series) {
+                    series.setState(state);
+                });
+            };
+            /**
+             * @private
+             */
+            ColorAxis.prototype.setVisible = function () {
+            };
+            /**
+             * @private
+             */
+            ColorAxis.prototype.getSeriesExtremes = function () {
+                var axis = this;
+                var series = axis.series;
+                var colorValArray,
+                    colorKey,
+                    colorValIndex,
+                    pointArrayMap,
+                    calculatedExtremes,
+                    cSeries,
+                    i = series.length,
+                    yData,
+                    j;
+                this.dataMin = Infinity;
+                this.dataMax = -Infinity;
+                while (i--) { // x, y, value, other
+                    cSeries = series[i];
+                    colorKey = cSeries.colorKey = pick(cSeries.options.colorKey, cSeries.colorKey, cSeries.pointValKey, cSeries.zoneAxis, 'y');
+                    pointArrayMap = cSeries.pointArrayMap;
+                    calculatedExtremes = cSeries[colorKey + 'Min'] &&
+                        cSeries[colorKey + 'Max'];
+                    if (cSeries[colorKey + 'Data']) {
+                        colorValArray = cSeries[colorKey + 'Data'];
+                    }
+                    else {
+                        if (!pointArrayMap) {
+                            colorValArray = cSeries.yData;
+                        }
+                        else {
+                            colorValArray = [];
+                            colorValIndex = pointArrayMap.indexOf(colorKey);
+                            yData = cSeries.yData;
+                            if (colorValIndex >= 0 && yData) {
+                                for (j = 0; j < yData.length; j++) {
+                                    colorValArray.push(pick(yData[j][colorValIndex], yData[j]));
+                                }
+                            }
+                        }
+                    }
+                    // If color key extremes are already calculated, use them.
+                    if (calculatedExtremes) {
+                        cSeries.minColorValue = cSeries[colorKey + 'Min'];
+                        cSeries.maxColorValue = cSeries[colorKey + 'Max'];
+                    }
+                    else {
+                        var cExtremes = Series.prototype.getExtremes.call(cSeries,
+                            colorValArray);
+                        cSeries.minColorValue = cExtremes.dataMin;
+                        cSeries.maxColorValue = cExtremes.dataMax;
+                    }
+                    if (typeof cSeries.minColorValue !== 'undefined') {
+                        this.dataMin =
+                            Math.min(this.dataMin, cSeries.minColorValue);
+                        this.dataMax =
+                            Math.max(this.dataMax, cSeries.maxColorValue);
+                    }
+                    if (!calculatedExtremes) {
+                        Series.prototype.applyExtremes.call(cSeries);
+                    }
+                }
+            };
+            /**
+             * Internal function to draw a crosshair.
+             *
+             * @function Highcharts.ColorAxis#drawCrosshair
+             *
+             * @param {Highcharts.PointerEventObject} [e]
+             *        The event arguments from the modified pointer event, extended with
+             *        `chartX` and `chartY`
+             *
+             * @param {Highcharts.Point} [point]
+             *        The Point object if the crosshair snaps to points.
+             *
+             * @fires Highcharts.ColorAxis#event:afterDrawCrosshair
+             * @fires Highcharts.ColorAxis#event:drawCrosshair
+             */
+            ColorAxis.prototype.drawCrosshair = function (e, point) {
+                var axis = this;
+                var plotX = point && point.plotX;
+                var plotY = point && point.plotY;
+                var axisPos = axis.pos;
+                var axisLen = axis.len;
+                var crossPos;
+                if (point) {
+                    crossPos = axis.toPixels(point.getNestedProperty(point.series.colorKey));
+                    if (crossPos < axisPos) {
+                        crossPos = axisPos - 2;
+                    }
+                    else if (crossPos > axisPos + axisLen) {
+                        crossPos = axisPos + axisLen + 2;
+                    }
+                    point.plotX = crossPos;
+                    point.plotY = axis.len - crossPos;
+                    _super.prototype.drawCrosshair.call(this, e, point);
+                    point.plotX = plotX;
+                    point.plotY = plotY;
+                    if (axis.cross &&
+                        !axis.cross.addedToColorAxis &&
+                        axis.legendGroup) {
+                        axis.cross
+                            .addClass('highcharts-coloraxis-marker')
+                            .add(axis.legendGroup);
+                        axis.cross.addedToColorAxis = true;
+                        if (!axis.chart.styledMode &&
+                            typeof axis.crosshair === 'object') {
+                            axis.cross.attr({
+                                fill: axis.crosshair.color
+                            });
+                        }
+                    }
+                }
+            };
+            /**
+             * @private
+             */
+            ColorAxis.prototype.getPlotLinePath = function (options) {
+                var axis = this,
+                    left = axis.left,
+                    pos = options.translatedValue,
+                    top = axis.top;
+                // crosshairs only
+                return isNumber(pos) ? // pos can be 0 (#3969)
+                    (axis.horiz ? [
+                        ['M', pos - 4, top - 6],
+                        ['L', pos + 4, top - 6],
+                        ['L', pos, top],
+                        ['Z']
+                    ] : [
+                        ['M', left, pos],
+                        ['L', left - 6, pos + 6],
+                        ['L', left - 6, pos - 6],
+                        ['Z']
+                    ]) :
+                    _super.prototype.getPlotLinePath.call(this, options);
+            };
+            /**
+             * Updates a color axis instance with a new set of options. The options are
+             * merged with the existing options, so only new or altered options need to
+             * be specified.
+             *
+             * @function Highcharts.ColorAxis#update
+             *
+             * @param {Highcharts.ColorAxisOptions} newOptions
+             * The new options that will be merged in with existing options on the color
+             * axis.
+             *
+             * @param {boolean} [redraw]
+             * Whether to redraw the chart after the color axis is altered. If doing
+             * more operations on the chart, it is a good idea to set redraw to `false`
+             * and call {@link Highcharts.Chart#redraw} after.
+             */
+            ColorAxis.prototype.update = function (newOptions, redraw) {
+                var axis = this,
+                    chart = axis.chart,
+                    legend = chart.legend;
+                this.series.forEach(function (series) {
+                    // Needed for Axis.update when choropleth colors change
+                    series.isDirtyData = true;
+                });
+                // When updating data classes, destroy old items and make sure new
+                // ones are created (#3207)
+                if (newOptions.dataClasses && legend.allItems || axis.dataClasses) {
+                    axis.destroyItems();
+                }
+                _super.prototype.update.call(this, newOptions, redraw);
+                if (axis.legendItem) {
+                    axis.setLegendColor();
+                    legend.colorizeItem(this, true);
+                }
+            };
+            /**
+             * Destroy color axis legend items.
+             * @private
+             */
+            ColorAxis.prototype.destroyItems = function () {
+                var axis = this;
+                var chart = axis.chart;
+                if (axis.legendItem) {
+                    chart.legend.destroyItem(axis);
+                }
+                else if (axis.legendItems) {
+                    axis.legendItems.forEach(function (item) {
+                        chart.legend.destroyItem(item);
+                    });
+                }
+                chart.isDirtyLegend = true;
+            };
+            //   Removing the whole axis (#14283)
+            ColorAxis.prototype.destroy = function () {
+                this.chart.isDirtyLegend = true;
+                this.destroyItems();
+                _super.prototype.destroy.apply(this, [].slice.call(arguments));
+            };
+            /**
+             * Removes the color axis and the related legend item.
+             *
+             * @function Highcharts.ColorAxis#remove
+             *
+             * @param {boolean} [redraw=true]
+             *        Whether to redraw the chart following the remove.
+             */
+            ColorAxis.prototype.remove = function (redraw) {
+                this.destroyItems();
+                _super.prototype.remove.call(this, redraw);
+            };
+            /**
+             * Get the legend item symbols for data classes.
+             * @private
+             */
+            ColorAxis.prototype.getDataClassLegendSymbols = function () {
+                var axis = this;
+                var chart = axis.chart;
+                var legendItems = axis.legendItems;
+                var legendOptions = chart.options.legend;
+                var valueDecimals = legendOptions.valueDecimals;
+                var valueSuffix = legendOptions.valueSuffix || '';
+                var name;
+                if (!legendItems.length) {
+                    axis.dataClasses.forEach(function (dataClass, i) {
+                        var from = dataClass.from,
+                            to = dataClass.to,
+                            numberFormatter = chart.numberFormatter;
+                        var vis = true;
+                        // Assemble the default name. This can be overridden
+                        // by legend.options.labelFormatter
+                        name = '';
+                        if (typeof from === 'undefined') {
+                            name = '< ';
+                        }
+                        else if (typeof to === 'undefined') {
+                            name = '> ';
+                        }
+                        if (typeof from !== 'undefined') {
+                            name += numberFormatter(from, valueDecimals) + valueSuffix;
+                        }
+                        if (typeof from !== 'undefined' && typeof to !== 'undefined') {
+                            name += ' - ';
+                        }
+                        if (typeof to !== 'undefined') {
+                            name += numberFormatter(to, valueDecimals) + valueSuffix;
+                        }
+                        // Add a mock object to the legend items
+                        legendItems.push(extend({
+                            chart: chart,
+                            name: name,
+                            options: {},
+                            drawLegendSymbol: LegendSymbol.drawRectangle,
+                            visible: true,
+                            setState: noop,
+                            isDataClass: true,
+                            setVisible: function () {
+                                vis = axis.visible = !vis;
+                                axis.series.forEach(function (series) {
+                                    series.points.forEach(function (point) {
+                                        if (point.dataClass === i) {
+                                            point.setVisible(vis);
+                                        }
+                                    });
+                                });
+                                chart.legend.colorizeItem(this, vis);
+                            }
+                        }, dataClass));
+                    });
+                }
+                return legendItems;
+            };
+            /* *
+             *
+             *  Static Properties
+             *
+             * */
+            ColorAxis.defaultColorAxisOptions = ColorAxisDefaults;
+            ColorAxis.defaultLegendLength = 200;
             /**
              * @private
              */
@@ -1370,121 +1639,29 @@
             ];
             return ColorAxis;
         }(Axis));
+        /* *
+         *
+         *  Registry
+         *
+         * */
         // Properties to preserve after destroy, for Axis.update (#5881, #6025).
         Array.prototype.push.apply(Axis.keepProps, ColorAxis.keepProps);
-        H.ColorAxis = ColorAxis;
-        /**
-         * Handle animation of the color attributes directly
+        /* *
          *
-         * @private
-         * @function Highcharts.Fx#fillSetter
-         */ /**
-        * Handle animation of the color attributes directly
-        *
-        * @private
-        * @function Highcharts.Fx#strokeSetter
-        */
-        ['fill', 'stroke'].forEach(function (prop) {
-            Fx.prototype[prop + 'Setter'] = function () {
-                this.elem.attr(prop, color(this.start).tweenTo(color(this.end), this.pos), null, true);
-            };
-        });
-        // Extend the chart getAxes method to also get the color axis
-        addEvent(Chart, 'afterGetAxes', function () {
-            var chart = this,
-                options = chart.options;
-            this.colorAxis = [];
-            if (options.colorAxis) {
-                options.colorAxis = splat(options.colorAxis);
-                options.colorAxis.forEach(function (axisOptions, i) {
-                    axisOptions.index = i;
-                    new ColorAxis(chart, axisOptions); // eslint-disable-line no-new
-                });
-            }
-        });
-        // Add colorAxis to series axisTypes
-        addEvent(Series, 'bindAxes', function () {
-            var axisTypes = this.axisTypes;
-            if (!axisTypes) {
-                this.axisTypes = ['colorAxis'];
-            }
-            else if (axisTypes.indexOf('colorAxis') === -1) {
-                axisTypes.push('colorAxis');
-            }
-        });
-        // Add the color axis. This also removes the axis' own series to prevent
-        // them from showing up individually.
-        addEvent(Legend, 'afterGetAllItems', function (e) {
-            var _this = this;
-            var colorAxisItems = [],
-                colorAxes = this.chart.colorAxis || [],
-                options,
-                i;
-            var destroyItem = function (item) {
-                    var i = e.allItems.indexOf(item);
-                if (i !== -1) {
-                    // #15436
-                    _this.destroyItem(e.allItems[i]);
-                    e.allItems.splice(i, 1);
-                }
-            };
-            colorAxes.forEach(function (colorAxis) {
-                options = colorAxis.options;
-                if (options && options.showInLegend) {
-                    // Data classes
-                    if (options.dataClasses && options.visible) {
-                        colorAxisItems = colorAxisItems.concat(colorAxis.getDataClassLegendSymbols());
-                        // Gradient legend
-                    }
-                    else if (options.visible) {
-                        // Add this axis on top
-                        colorAxisItems.push(colorAxis);
-                    }
-                    // If dataClasses are defined or showInLegend option is not set to
-                    // true, do not add color axis' series to legend.
-                    colorAxis.series.forEach(function (series) {
-                        if (!series.options.showInLegend || options.dataClasses) {
-                            if (series.options.legendType === 'point') {
-                                series.points.forEach(function (point) {
-                                    destroyItem(point);
-                                });
-                            }
-                            else {
-                                destroyItem(series);
-                            }
-                        }
-                    });
-                }
-            });
-            i = colorAxisItems.length;
-            while (i--) {
-                e.allItems.unshift(colorAxisItems[i]);
-            }
-        });
-        addEvent(Legend, 'afterColorizeItem', function (e) {
-            if (e.visible && e.item.legendColor) {
-                e.item.legendSymbol.attr({
-                    fill: e.item.legendColor
-                });
-            }
-        });
-        // Updates in the legend need to be reflected in the color axis (6888)
-        addEvent(Legend, 'afterUpdate', function () {
-            var colorAxes = this.chart.colorAxis;
-            if (colorAxes) {
-                colorAxes.forEach(function (colorAxis) {
-                    colorAxis.update({}, arguments[2]);
-                });
-            }
-        });
-        // Calculate and set colors for points
-        addEvent(Series, 'afterTranslate', function () {
-            if (this.chart.colorAxis &&
-                this.chart.colorAxis.length ||
-                this.colorAttribs) {
-                this.translateColors();
-            }
-        });
+         *  Default Export
+         *
+         * */
+        /* *
+         *
+         *  API Declarations
+         *
+         * */
+        /**
+         * Color axis types
+         *
+         * @typedef {"linear"|"logarithmic"} Highcharts.ColorAxisTypeValue
+         */
+        ''; // detach doclet above
 
         return ColorAxis;
     });
@@ -2647,7 +2824,7 @@
 
         return MapPoint;
     });
-    _registerModule(_modules, 'Series/Map/MapSeries.js', [_modules['Mixins/ColorMapSeries.js'], _modules['Core/Globals.js'], _modules['Mixins/LegendSymbol.js'], _modules['Core/Chart/MapChart.js'], _modules['Series/Map/MapPoint.js'], _modules['Core/Color/Palette.js'], _modules['Core/Series/Series.js'], _modules['Core/Series/SeriesRegistry.js'], _modules['Core/Renderer/SVG/SVGRenderer.js'], _modules['Core/Utilities.js']], function (ColorMapMixin, H, LegendSymbolMixin, MapChart, MapPoint, palette, Series, SeriesRegistry, SVGRenderer, U) {
+    _registerModule(_modules, 'Series/Map/MapSeries.js', [_modules['Mixins/ColorMapSeries.js'], _modules['Core/Globals.js'], _modules['Core/Legend/LegendSymbol.js'], _modules['Core/Chart/MapChart.js'], _modules['Series/Map/MapPoint.js'], _modules['Core/Color/Palette.js'], _modules['Core/Series/Series.js'], _modules['Core/Series/SeriesRegistry.js'], _modules['Core/Renderer/SVG/SVGRenderer.js'], _modules['Core/Utilities.js']], function (ColorMapMixin, H, LegendSymbol, MapChart, MapPoint, palette, Series, SeriesRegistry, SVGRenderer, U) {
         /* *
          *
          *  (c) 2010-2021 Torstein Honsi
@@ -3421,7 +3598,9 @@
                 dataLabels: {
                     crop: false,
                     formatter: function () {
-                        return this.point.value;
+                        var numberFormatter = this.series.chart.numberFormatter;
+                        var value = this.point.value;
+                        return isNumber(value) ? numberFormatter(value, -1) : '';
                     },
                     inside: true,
                     overflow: false,
@@ -3658,7 +3837,7 @@
             drawDataLabels: noop,
             // No graph for the map series
             drawGraph: noop,
-            drawLegendSymbol: LegendSymbolMixin.drawRectangle,
+            drawLegendSymbol: LegendSymbol.drawRectangle,
             forceDL: true,
             getExtremesFromAll: true,
             getSymbol: colorMapSeriesMixin.getSymbol,
@@ -4348,156 +4527,125 @@
 
         return MapPointSeries;
     });
-    _registerModule(_modules, 'Series/Bubble/BubblePoint.js', [_modules['Core/Series/Point.js'], _modules['Core/Series/SeriesRegistry.js'], _modules['Core/Utilities.js']], function (Point, SeriesRegistry, U) {
+    _registerModule(_modules, 'Series/Bubble/BubbleLegendDefaults.js', [_modules['Core/Color/Palette.js']], function (Palette) {
         /* *
          *
-         *  (c) 2010-2021 Torstein Honsi
+         *  (c) 2010-2021 Highsoft AS
+         *
+         *  Author: Paweł Potaczek
          *
          *  License: www.highcharts.com/license
          *
          *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
          *
          * */
-        var __extends = (this && this.__extends) || (function () {
-                var extendStatics = function (d,
-            b) {
-                    extendStatics = Object.setPrototypeOf ||
-                        ({ __proto__: [] } instanceof Array && function (d,
-            b) { d.__proto__ = b; }) ||
-                        function (d,
-            b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-                return extendStatics(d, b);
-            };
-            return function (d, b) {
-                extendStatics(d, b);
-                function __() { this.constructor = d; }
-                d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-            };
-        })();
-        var ScatterPoint = SeriesRegistry.seriesTypes.scatter.prototype.pointClass;
-        var extend = U.extend;
         /* *
          *
-         *  Class
+         *  Constants
          *
          * */
-        var BubblePoint = /** @class */ (function (_super) {
-                __extends(BubblePoint, _super);
-            function BubblePoint() {
-                /* *
+        /**
+         * The bubble legend is an additional element in legend which
+         * presents the scale of the bubble series. Individual bubble ranges
+         * can be defined by user or calculated from series. In the case of
+         * automatically calculated ranges, a 1px margin of error is
+         * permitted.
+         *
+         * @since        7.0.0
+         * @product      highcharts highstock highmaps
+         * @requires     highcharts-more
+         * @optionparent legend.bubbleLegend
+         */
+        var BubbleLegendDefaults = {
+                /**
+                 * The color of the ranges borders,
+            can be also defined for an
+                 * individual range.
                  *
-                 *  Properties
+                 * @sample highcharts/bubble-legend/similartoseries/
+                 *         Similar look to the bubble series
+                 * @sample highcharts/bubble-legend/bordercolor/
+                 *         Individual bubble border color
                  *
-                 * */
-                var _this = _super !== null && _super.apply(this,
-                    arguments) || this;
-                _this.options = void 0;
-                _this.series = void 0;
-                return _this;
-                /* eslint-enable valid-jsdoc */
-            }
-            /* *
-             *
-             *  Functions
-             *
-             * */
-            /* eslint-disable valid-jsdoc */
-            /**
-             * @private
-             */
-            BubblePoint.prototype.haloPath = function (size) {
-                return Point.prototype.haloPath.call(this, 
-                // #6067
-                size === 0 ? 0 : (this.marker ? this.marker.radius || 0 : 0) + size);
-            };
-            return BubblePoint;
-        }(ScatterPoint));
-        extend(BubblePoint.prototype, {
-            ttBelow: false
-        });
-        /* *
-         *
-         *  Default Export
-         *
-         * */
-
-        return BubblePoint;
-    });
-    _registerModule(_modules, 'Series/Bubble/BubbleLegend.js', [_modules['Core/Chart/Chart.js'], _modules['Core/Color/Color.js'], _modules['Core/FormatUtilities.js'], _modules['Core/Globals.js'], _modules['Core/Legend.js'], _modules['Core/DefaultOptions.js'], _modules['Core/Color/Palette.js'], _modules['Core/Series/Series.js'], _modules['Core/Utilities.js']], function (Chart, Color, F, H, Legend, D, palette, Series, U) {
-        /* *
-         *
-         *  (c) 2010-2021 Highsoft AS
-         *
-         *  Author: Paweł Potaczek
-         *
-         *  License: www.highcharts.com/license
-         *
-         *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
-         *
-         * */
-        var color = Color.parse;
-        var noop = H.noop;
-        var setOptions = D.setOptions;
-        var addEvent = U.addEvent,
-            arrayMax = U.arrayMax,
-            arrayMin = U.arrayMin,
-            isNumber = U.isNumber,
-            merge = U.merge,
-            objectEach = U.objectEach,
-            pick = U.pick,
-            stableSort = U.stableSort,
-            wrap = U.wrap;
-        /**
-         * @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
-        setOptions({
-            legend: {
+                 * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
+                 */
+                borderColor: void 0,
                 /**
-                 * The bubble legend is an additional element in legend which
-                 * presents the scale of the bubble series. Individual bubble ranges
-                 * can be defined by user or calculated from series. In the case of
-                 * automatically calculated ranges, a 1px margin of error is
-                 * permitted.
-                 *
-                 * @since        7.0.0
-                 * @product      highcharts highstock highmaps
-                 * @requires     highcharts-more
-                 * @optionparent legend.bubbleLegend
+                 * The width of the ranges borders in pixels,
+            can be also
+                 * defined for an individual range.
                  */
-                bubbleLegend: {
-                    /**
-                     * The color of the ranges borders, can be also defined for an
-                     * individual range.
-                     *
-                     * @sample highcharts/bubble-legend/similartoseries/
-                     *         Similar look to the bubble series
-                     * @sample highcharts/bubble-legend/bordercolor/
-                     *         Individual bubble border color
-                     *
-                     * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
-                     */
-                    borderColor: void 0,
-                    /**
-                     * The width of the ranges borders in pixels, can be also
-                     * defined for an individual range.
-                     */
-                    borderWidth: 2,
+                borderWidth: 2,
+                /**
+                 * An additional class name to apply to the bubble legend'
+                 * circle graphical elements. This option does not replace
+                 * default class names of the graphical element.
+                 *
+                 * @sample {highcharts} highcharts/css/bubble-legend/
+                 *         Styling by CSS
+                 *
+                 * @type {string}
+                 */
+                className: void 0,
+                /**
+                 * The main color of the bubble legend. Applies to ranges,
+            if
+                 * individual color is not defined.
+                 *
+                 * @sample highcharts/bubble-legend/similartoseries/
+                 *         Similar look to the bubble series
+                 * @sample highcharts/bubble-legend/color/
+                 *         Individual bubble color
+                 *
+                 * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
+                 */
+                color: void 0,
+                /**
+                 * An additional class name to apply to the bubble legend's
+                 * connector graphical elements. This option does not replace
+                 * default class names of the graphical element.
+                 *
+                 * @sample {highcharts} highcharts/css/bubble-legend/
+                 *         Styling by CSS
+                 *
+                 * @type {string}
+                 */
+                connectorClassName: void 0,
+                /**
+                 * The color of the connector,
+            can be also defined
+                 * for an individual range.
+                 *
+                 * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
+                 */
+                connectorColor: void 0,
+                /**
+                 * The length of the connectors in pixels. If labels are
+                 * centered,
+            the distance is reduced to 0.
+                 *
+                 * @sample highcharts/bubble-legend/connectorandlabels/
+                 *         Increased connector length
+                 */
+                connectorDistance: 60,
+                /**
+                 * The width of the connectors in pixels.
+                 *
+                 * @sample highcharts/bubble-legend/connectorandlabels/
+                 *         Increased connector width
+                 */
+                connectorWidth: 1,
+                /**
+                 * Enable or disable the bubble legend.
+                 */
+                enabled: false,
+                /**
+                 * Options for the bubble legend labels.
+                 */
+                labels: {
                     /**
-                     * An additional class name to apply to the bubble legend'
-                     * circle graphical elements. This option does not replace
+                     * An additional class name to apply to the bubble legend
+                     * label graphical elements. This option does not replace
                      * default class names of the graphical element.
                      *
                      * @sample {highcharts} highcharts/css/bubble-legend/
@@ -4507,209 +4655,201 @@
                      */
                     className: void 0,
                     /**
-                     * The main color of the bubble legend. Applies to ranges, if
-                     * individual color is not defined.
-                     *
-                     * @sample highcharts/bubble-legend/similartoseries/
-                     *         Similar look to the bubble series
-                     * @sample highcharts/bubble-legend/color/
-                     *         Individual bubble color
-                     *
-                     * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
+                     * Whether to allow data labels to overlap.
                      */
-                    color: void 0,
+                    allowOverlap: false,
                     /**
-                     * An additional class name to apply to the bubble legend's
-                     * connector graphical elements. This option does not replace
-                     * default class names of the graphical element.
+                     * A format string for the bubble legend labels. Available
+                     * variables are the same as for `formatter`.
                      *
-                     * @sample {highcharts} highcharts/css/bubble-legend/
-                     *         Styling by CSS
+                     * @sample highcharts/bubble-legend/format/
+                     *         Add a unit
                      *
                      * @type {string}
                      */
-                    connectorClassName: void 0,
+                    format: '',
                     /**
-                     * The color of the connector, can be also defined
-                     * for an individual range.
+                     * Available `this` properties are:
                      *
-                     * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
-                     */
-                    connectorColor: void 0,
-                    /**
-                     * The length of the connectors in pixels. If labels are
-                     * centered, the distance is reduced to 0.
+                     * - `this.value`: The bubble value.
                      *
-                     * @sample highcharts/bubble-legend/connectorandlabels/
-                     *         Increased connector length
+                     * - `this.radius`: The radius of the bubble range.
+                     *
+                     * - `this.center`: The center y position of the range.
+                     *
+                     * @type {Highcharts.FormatterCallbackFunction<Highcharts.BubbleLegendFormatterContextObject>}
                      */
-                    connectorDistance: 60,
+                    formatter: void 0,
                     /**
-                     * The width of the connectors in pixels.
+                     * The alignment of the labels compared to the bubble
+                     * legend. Can be one of `left`,
+            `center` or `right`.
                      *
                      * @sample highcharts/bubble-legend/connectorandlabels/
-                     *         Increased connector width
-                     */
-                    connectorWidth: 1,
-                    /**
-                     * Enable or disable the bubble legend.
+                     *         Labels on left
+                     *
+                     * @type {Highcharts.AlignValue}
                      */
-                    enabled: false,
+                    align: 'right',
                     /**
-                     * Options for the bubble legend labels.
+                     * CSS styles for the labels.
+                     *
+                     * @type {Highcharts.CSSObject}
                      */
-                    labels: {
-                        /**
-                         * An additional class name to apply to the bubble legend
-                         * label graphical elements. This option does not replace
-                         * default class names of the graphical element.
-                         *
-                         * @sample {highcharts} highcharts/css/bubble-legend/
-                         *         Styling by CSS
-                         *
-                         * @type {string}
-                         */
-                        className: void 0,
-                        /**
-                         * Whether to allow data labels to overlap.
-                         */
-                        allowOverlap: false,
-                        /**
-                         * A format string for the bubble legend labels. Available
-                         * variables are the same as for `formatter`.
-                         *
-                         * @sample highcharts/bubble-legend/format/
-                         *         Add a unit
-                         *
-                         * @type {string}
-                         */
-                        format: '',
-                        /**
-                         * Available `this` properties are:
-                         *
-                         * - `this.value`: The bubble value.
-                         *
-                         * - `this.radius`: The radius of the bubble range.
-                         *
-                         * - `this.center`: The center y position of the range.
-                         *
-                         * @type {Highcharts.FormatterCallbackFunction<Highcharts.BubbleLegendFormatterContextObject>}
-                         */
-                        formatter: void 0,
-                        /**
-                         * The alignment of the labels compared to the bubble
-                         * legend. Can be one of `left`, `center` or `right`.
-                         *
-                         * @sample highcharts/bubble-legend/connectorandlabels/
-                         *         Labels on left
-                         *
-                         * @type {Highcharts.AlignValue}
-                         */
-                        align: 'right',
-                        /**
-                         * CSS styles for the labels.
-                         *
-                         * @type {Highcharts.CSSObject}
-                         */
-                        style: {
-                            /** @ignore-option */
-                            fontSize: '10px',
-                            /** @ignore-option */
-                            color: palette.neutralColor100
-                        },
-                        /**
-                         * The x position offset of the label relative to the
-                         * connector.
-                         */
-                        x: 0,
-                        /**
-                         * The y position offset of the label relative to the
-                         * connector.
-                         */
-                        y: 0
+                    style: {
+                        /** @ignore-option */
+                        fontSize: '10px',
+                        /** @ignore-option */
+                        color: Palette.neutralColor100
                     },
                     /**
-                     * Miximum bubble legend range size. If values for ranges are
-                     * not specified, the `minSize` and the `maxSize` are calculated
-                     * from bubble series.
-                     */
-                    maxSize: 60,
-                    /**
-                     * Minimum bubble legend range size. If values for ranges are
-                     * not specified, the `minSize` and the `maxSize` are calculated
-                     * from bubble series.
-                     */
-                    minSize: 10,
-                    /**
-                     * The position of the bubble legend in the legend.
-                     * @sample highcharts/bubble-legend/connectorandlabels/
-                     *         Bubble legend as last item in legend
+                     * The x position offset of the label relative to the
+                     * connector.
                      */
-                    legendIndex: 0,
+                    x: 0,
                     /**
-                     * Options for specific range. One range consists of bubble,
-                     * label and connector.
-                     *
-                     * @sample highcharts/bubble-legend/ranges/
-                     *         Manually defined ranges
-                     * @sample highcharts/bubble-legend/autoranges/
-                     *         Auto calculated ranges
-                     *
-                     * @type {Array<*>}
+                     * The y position offset of the label relative to the
+                     * connector.
                      */
-                    ranges: {
-                        /**
-                         * Range size value, similar to bubble Z data.
-                         * @type {number}
-                         */
-                        value: void 0,
-                        /**
-                         * The color of the border for individual range.
-                         * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
-                         */
-                        borderColor: void 0,
-                        /**
-                         * The color of the bubble for individual range.
-                         * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
-                         */
-                        color: void 0,
-                        /**
-                         * The color of the connector for individual range.
-                         * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
-                         */
-                        connectorColor: void 0
-                    },
+                    y: 0
+                },
+                /**
+                 * Miximum bubble legend range size. If values for ranges are
+                 * not specified,
+            the `minSize` and the `maxSize` are calculated
+                 * from bubble series.
+                 */
+                maxSize: 60,
+                /**
+                 * Minimum bubble legend range size. If values for ranges are
+                 * not specified,
+            the `minSize` and the `maxSize` are calculated
+                 * from bubble series.
+                 */
+                minSize: 10,
+                /**
+                 * The position of the bubble legend in the legend.
+                 * @sample highcharts/bubble-legend/connectorandlabels/
+                 *         Bubble legend as last item in legend
+                 */
+                legendIndex: 0,
+                /**
+                 * Options for specific range. One range consists of bubble,
+                 * label and connector.
+                 *
+                 * @sample highcharts/bubble-legend/ranges/
+                 *         Manually defined ranges
+                 * @sample highcharts/bubble-legend/autoranges/
+                 *         Auto calculated ranges
+                 *
+                 * @type {Array<*>}
+                 */
+                ranges: {
                     /**
-                     * Whether the bubble legend range value should be represented
-                     * by the area or the width of the bubble. The default, area,
-                     * corresponds best to the human perception of the size of each
-                     * bubble.
-                     *
-                     * @sample highcharts/bubble-legend/ranges/
-                     *         Size by width
-                     *
-                     * @type {Highcharts.BubbleSizeByValue}
+                     * Range size value,
+            similar to bubble Z data.
+                     * @type {number}
                      */
-                    sizeBy: 'area',
+                    value: void 0,
                     /**
-                     * When this is true, the absolute value of z determines the
-                     * size of the bubble. This means that with the default
-                     * zThreshold of 0, a bubble of value -1 will have the same size
-                     * as a bubble of value 1, while a bubble of value 0 will have a
-                     * smaller size according to minSize.
+                     * The color of the border for individual range.
+                     * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
                      */
-                    sizeByAbsoluteValue: false,
+                    borderColor: void 0,
                     /**
-                     * Define the visual z index of the bubble legend.
+                     * The color of the bubble for individual range.
+                     * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
                      */
-                    zIndex: 1,
+                    color: void 0,
                     /**
-                     * Ranges with with lower value than zThreshold, are skipped.
+                     * The color of the connector for individual range.
+                     * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
                      */
-                    zThreshold: 0
-                }
-            }
-        });
+                    connectorColor: void 0
+                },
+                /**
+                 * Whether the bubble legend range value should be represented
+                 * by the area or the width of the bubble. The default,
+            area,
+                 * corresponds best to the human perception of the size of each
+                 * bubble.
+                 *
+                 * @sample highcharts/bubble-legend/ranges/
+                 *         Size by width
+                 *
+                 * @type {Highcharts.BubbleSizeByValue}
+                 */
+                sizeBy: 'area',
+                /**
+                 * When this is true,
+            the absolute value of z determines the
+                 * size of the bubble. This means that with the default
+                 * zThreshold of 0,
+            a bubble of value -1 will have the same size
+                 * as a bubble of value 1,
+            while a bubble of value 0 will have a
+                 * smaller size according to minSize.
+                 */
+                sizeByAbsoluteValue: false,
+                /**
+                 * Define the visual z index of the bubble legend.
+                 */
+                zIndex: 1,
+                /**
+                 * Ranges with with lower value than zThreshold,
+            are skipped.
+                 */
+                zThreshold: 0
+            };
+        /* *
+         *
+         *  Default Export
+         *
+         * */
+
+        return BubbleLegendDefaults;
+    });
+    _registerModule(_modules, 'Series/Bubble/BubbleLegendItem.js', [_modules['Core/Color/Color.js'], _modules['Core/FormatUtilities.js'], _modules['Core/Globals.js'], _modules['Core/Utilities.js']], function (Color, F, H, U) {
+        /* *
+         *
+         *  (c) 2010-2021 Highsoft AS
+         *
+         *  Author: Paweł Potaczek
+         *
+         *  License: www.highcharts.com/license
+         *
+         *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
+         *
+         * */
+        var color = Color.parse;
+        var noop = H.noop;
+        var arrayMax = U.arrayMax,
+            arrayMin = U.arrayMin,
+            isNumber = U.isNumber,
+            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.
@@ -4718,12 +4858,13 @@
          * @class
          * @name Highcharts.BubbleLegend
          * @param {Highcharts.LegendBubbleLegendOptions} options
-         *        Bubble legend options
+         * Options of BubbleLegendItem.
+         *
          * @param {Highcharts.Legend} legend
-         *        Legend
+         * Legend of item.
          */
-        var BubbleLegend = /** @class */ (function () {
-                function BubbleLegend(options, legend) {
+        var BubbleLegendItem = /** @class */ (function () {
+                function BubbleLegendItem(options, legend) {
                     this.chart = void 0;
                 this.fontMetrics = void 0;
                 this.legend = void 0;
@@ -4735,6 +4876,7 @@
                 this.maxLabel = void 0;
                 this.movementX = void 0;
                 this.ranges = void 0;
+                this.selected = void 0;
                 this.visible = void 0;
                 this.symbols = void 0;
                 this.options = void 0;
@@ -4752,7 +4894,7 @@
              *        Legend
              * @return {void}
              */
-            BubbleLegend.prototype.init = function (options, legend) {
+            BubbleLegendItem.prototype.init = function (options, legend) {
                 this.options = options;
                 this.visible = true;
                 this.chart = legend.chart;
@@ -4767,7 +4909,7 @@
              *        All legend items
              * @return {void}
              */
-            BubbleLegend.prototype.addToLegend = function (items) {
+            BubbleLegendItem.prototype.addToLegend = function (items) {
                 // Insert bubbleLegend into legend items
                 items.splice(this.options.legendIndex, 0, this);
             };
@@ -4781,16 +4923,13 @@
              *        Legend instance
              * @return {void}
              */
-            BubbleLegend.prototype.drawLegendSymbol = function (legend) {
+            BubbleLegendItem.prototype.drawLegendSymbol = function (legend) {
                 var chart = this.chart,
                     options = this.options,
-                    size,
                     itemDistance = pick(legend.options.itemDistance, 20),
-                    connectorSpace,
                     ranges = options.ranges,
-                    radius,
-                    maxLabel,
                     connectorDistance = options.connectorDistance;
+                var connectorSpace;
                 // Predict label dimensions
                 this.fontMetrics = chart.renderer.fontMetrics(options.labels.style.fontSize);
                 // Do not create bubbleLegend now if ranges or ranges valeus are not
@@ -4807,9 +4946,9 @@
                 this.setOptions();
                 this.render();
                 // Get max label size
-                maxLabel = this.getMaxLabelSize();
-                radius = this.ranges[0].radius;
-                size = radius * 2;
+                var maxLabel = this.getMaxLabelSize(),
+                    radius = this.ranges[0].radius,
+                    size = radius * 2;
                 // Space for connectors and labels.
                 connectorSpace =
                     connectorDistance - radius + maxLabel.width;
@@ -4827,7 +4966,7 @@
              * @function Highcharts.BubbleLegend#setOptions
              * @return {void}
              */
-            BubbleLegend.prototype.setOptions = function () {
+            BubbleLegendItem.prototype.setOptions = function () {
                 var ranges = this.ranges,
                     options = this.options,
                     series = this.chart.series[options.seriesIndex],
@@ -4883,7 +5022,7 @@
              * @return {number|null}
              *         Radius for one range
              */
-            BubbleLegend.prototype.getRangeRadius = function (value) {
+            BubbleLegendItem.prototype.getRangeRadius = function (value) {
                 var options = this.options,
                     seriesIndex = this.options.seriesIndex,
                     bubbleSeries = this.chart.series[seriesIndex],
@@ -4900,7 +5039,7 @@
              * @function Highcharts.BubbleLegend#render
              * @return {void}
              */
-            BubbleLegend.prototype.render = function () {
+            BubbleLegendItem.prototype.render = function () {
                 var renderer = this.chart.renderer,
                     zThreshold = this.options.zThreshold;
                 if (!this.symbols) {
@@ -4935,7 +5074,7 @@
              *        Range options
              * @return {void}
              */
-            BubbleLegend.prototype.renderRange = function (range) {
+            BubbleLegendItem.prototype.renderRange = function (range) {
                 var mainRange = this.ranges[0],
                     legend = this.legend,
                     options = this.options,
@@ -4945,35 +5084,32 @@
                     renderer = chart.renderer,
                     symbols = this.symbols,
                     labels = symbols.labels,
-                    label,
                     elementCenter = range.center,
                     absoluteRadius = Math.abs(range.radius),
                     connectorDistance = options.connectorDistance || 0,
                     labelsAlign = labelsOptions.align,
                     rtl = legend.options.rtl,
-                    connectorLength = rtl || labelsAlign === 'left' ?
-                        -connectorDistance : connectorDistance,
                     borderWidth = options.borderWidth,
                     connectorWidth = options.connectorWidth,
                     posX = mainRange.radius || 0,
                     posY = elementCenter - absoluteRadius -
                         borderWidth / 2 + connectorWidth / 2,
-                    labelY,
-                    labelX,
                     fontMetrics = this.fontMetrics,
                     labelMovement = fontMetrics.f / 2 -
                         (fontMetrics.h - fontMetrics.f) / 2,
                     crispMovement = (posY % 1 ? 1 : 0.5) -
                         (connectorWidth % 2 ? 0 : 0.5),
                     styledMode = renderer.styledMode;
+                var connectorLength = rtl || labelsAlign === 'left' ?
+                        -connectorDistance : connectorDistance;
                 // Set options for centered labels
                 if (labelsAlign === 'center') {
                     connectorLength = 0; // do not use connector
                     options.connectorDistance = 0;
                     range.labelAttribs.align = 'center';
                 }
-                labelY = posY + options.labels.y;
-                labelX = posX + connectorLength + options.labels.x;
+                var labelY = posY + options.labels.y,
+                    labelX = posX + connectorLength + options.labels.x;
                 // Render bubble symbol
                 symbols.bubbleItems.push(renderer
                     .circle(posX, elementCenter + crispMovement, absoluteRadius)
@@ -4997,12 +5133,14 @@
                     'highcharts-bubble-legend-connectors ' +
                     (options.connectorClassName || '')).add(this.legendSymbol));
                 // Render label
-                label = renderer
-                    .text(this.formatLabel(range), labelX, labelY + labelMovement)
-                    .attr((styledMode ? {} : range.labelAttribs))
-                    .css(styledMode ? {} : labelsOptions.style)
-                    .addClass('highcharts-bubble-legend-labels ' +
-                    (options.labels.className || '')).add(this.legendSymbol);
+                var label = renderer
+                        .text(this.formatLabel(range),
+                    labelX,
+                    labelY + labelMovement)
+                        .attr((styledMode ? {} : range.labelAttribs))
+                        .css(styledMode ? {} : labelsOptions.style)
+                        .addClass('highcharts-bubble-legend-labels ' +
+                        (options.labels.className || '')).add(this.legendSymbol);
                 labels.push(label);
                 // To enable default 'hideOverlappingLabels' method
                 label.placed = true;
@@ -5018,9 +5156,9 @@
              * @function Highcharts.BubbleLegend#getMaxLabelSize
              * @return {Highcharts.BBoxObject}
              */
-            BubbleLegend.prototype.getMaxLabelSize = function () {
-                var labels = this.symbols.labels,
-                    maxLabel,
+            BubbleLegendItem.prototype.getMaxLabelSize = function () {
+                var labels = this.symbols.labels;
+                var maxLabel,
                     labelSize;
                 labels.forEach(function (label) {
                     labelSize = label.getBBox(true);
@@ -5044,7 +5182,7 @@
              * @return {string}
              *         Range label text
              */
-            BubbleLegend.prototype.formatLabel = function (range) {
+            BubbleLegendItem.prototype.formatLabel = function (range) {
                 var options = this.options,
                     formatter = options.labels.formatter,
                     format = options.labels.format;
@@ -5061,7 +5199,7 @@
              * @function Highcharts.BubbleLegend#hideOverlappingLabels
              * @return {void}
              */
-            BubbleLegend.prototype.hideOverlappingLabels = function () {
+            BubbleLegendItem.prototype.hideOverlappingLabels = function () {
                 var chart = this.chart,
                     allowOverlap = this.options.labels.allowOverlap,
                     symbols = this.symbols;
@@ -5086,11 +5224,11 @@
              * @return {Array<Highcharts.LegendBubbleLegendRangesOptions>}
              *         Array of range objects
              */
-            BubbleLegend.prototype.getRanges = function () {
+            BubbleLegendItem.prototype.getRanges = function () {
                 var bubbleLegend = this.legend.bubbleLegend,
                     series = bubbleLegend.chart.series,
-                    ranges,
-                    rangesOptions = bubbleLegend.options.ranges,
+                    rangesOptions = bubbleLegend.options.ranges;
+                var ranges,
                     zData,
                     minZ = Number.MAX_VALUE,
                     maxZ = -Number.MAX_VALUE;
@@ -5138,7 +5276,7 @@
              * @return {Array<number,number>}
              *         Calculated min and max bubble sizes
              */
-            BubbleLegend.prototype.predictBubbleSizes = function () {
+            BubbleLegendItem.prototype.predictBubbleSizes = function () {
                 var chart = this.chart,
                     fontMetrics = this.fontMetrics,
                     legendOptions = chart.legend.options,
@@ -5150,10 +5288,10 @@
                     bubbleSeries = chart.series[this.options.seriesIndex],
                     minSize = Math.ceil(bubbleSeries.minPxSize),
                     maxPxSize = Math.ceil(bubbleSeries.maxPxSize),
-                    maxSize = bubbleSeries.options.maxSize,
                     plotSize = Math.min(plotSizeY,
-                    plotSizeX),
-                    calculatedSize;
+                    plotSizeX);
+                var calculatedSize,
+                    maxSize = bubbleSeries.options.maxSize;
                 // Calculate prediceted max size of bubble
                 if (floating || !(/%$/.test(maxSize))) {
                     calculatedSize = maxPxSize;
@@ -5181,7 +5319,7 @@
              * @param {number} max
              * @return {void}
              */
-            BubbleLegend.prototype.updateRanges = function (min, max) {
+            BubbleLegendItem.prototype.updateRanges = function (min, max) {
                 var bubbleLegendOptions = this.legend.options.bubbleLegend;
                 bubbleLegendOptions.minSize = min;
                 bubbleLegendOptions.maxSize = max;
@@ -5196,7 +5334,7 @@
              * @function Highcharts.BubbleLegend#correctSizes
              * @return {void}
              */
-            BubbleLegend.prototype.correctSizes = function () {
+            BubbleLegendItem.prototype.correctSizes = function () {
                 var legend = this.legend,
                     chart = this.chart,
                     bubbleSeries = chart.series[this.options.seriesIndex],
@@ -5208,216 +5346,389 @@
                     legend.render();
                 }
             };
-            return BubbleLegend;
+            return BubbleLegendItem;
         }());
-        // Start the bubble legend creation process.
-        addEvent(Legend, 'afterGetAllItems', function (e) {
-            var legend = this,
-                bubbleLegend = legend.bubbleLegend,
-                legendOptions = legend.options,
-                options = legendOptions.bubbleLegend,
-                bubbleSeriesIndex = legend.chart.getVisibleBubbleSeriesIndex();
-            // 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;
+        /* *
+         *
+         *  Default Export
+         *
+         * */
+
+        return BubbleLegendItem;
+    });
+    _registerModule(_modules, 'Series/Bubble/BubbleLegendComposition.js', [_modules['Series/Bubble/BubbleLegendDefaults.js'], _modules['Series/Bubble/BubbleLegendItem.js'], _modules['Core/DefaultOptions.js'], _modules['Core/Utilities.js']], function (BubbleLegendDefaults, BubbleLegendItem, D, U) {
+        /* *
+         *
+         *  (c) 2010-2021 Highsoft AS
+         *
+         *  Author: Paweł Potaczek
+         *
+         *  License: www.highcharts.com/license
+         *
+         *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
+         *
+         * */
+        var setOptions = D.setOptions;
+        var addEvent = U.addEvent,
+            objectEach = U.objectEach,
+            wrap = U.wrap;
+        /* *
+         *
+         *  Namespace
+         *
+         * */
+        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
+                    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) {
+                            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));
+                    }
                 }
-                // 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 H.BubbleLegend(options, legend);
-                legend.bubbleLegend.addToLegend(e.allItems);
             }
-        });
-        /**
-         * Check if there is at least one visible bubble series.
-         *
-         * @private
-         * @function Highcharts.Chart#getVisibleBubbleSeriesIndex
-         * @return {number}
-         *         First visible bubble series index
-         */
-        Chart.prototype.getVisibleBubbleSeriesIndex = function () {
-            var series = this.series,
-                i = 0;
-            while (i < series.length) {
-                if (series[i] &&
-                    series[i].isBubble &&
-                    series[i].visible &&
-                    series[i].zData.length) {
-                    return i;
+            /**
+             * 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);
                 }
-                i++;
             }
-            return -1;
-        };
-        /**
-         * Calculate height for each row in legend.
-         *
-         * @private
-         * @function Highcharts.Legend#getLinesHeights
-         * @return {Array<Highcharts.Dictionary<number>>}
-         *         Informations about line height and items amount
-         */
-        Legend.prototype.getLinesHeights = function () {
-            var items = this.allItems,
-                lines = [],
-                lastLine,
-                length = items.length,
-                i = 0,
-                j = 0;
-            for (i = 0; i < length; i++) {
-                if (items[i].legendItemHeight) {
-                    // for bubbleLegend
-                    items[i].itemHeight = items[i].legendItemHeight;
+            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++;
                 }
-                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;
+                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;
             }
-            return lines;
-        };
-        /**
-         * Correct legend items translation in case of different elements heights.
-         *
-         * @private
-         * @function Highcharts.Legend#retranslateItems
-         * @param {Array<Highcharts.Dictionary<number>>} lines
-         *        Informations about line height and items amount
-         * @return {void}
-         */
-        Legend.prototype.retranslateItems = function (lines) {
-            var items = this.allItems,
-                orgTranslateX,
-                orgTranslateY,
-                movementX,
-                rtl = this.options.rtl,
-                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++;
+            /**
+             * 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);
                 }
-                item.legendGroup.attr({
-                    translateY: Math.round(orgTranslateY + lines[actualLine].height / 2)
-                });
-                item._legendItemPos[1] = orgTranslateY +
-                    lines[actualLine].height / 2;
-            });
-        };
-        // Toggle bubble legend depending on the visible status of bubble series.
-        addEvent(Series, 'legendItemClick', function () {
-            var series = this,
-                chart = series.chart,
-                visible = series.visible,
-                legend = series.chart.legend,
-                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 = chart.getVisibleBubbleSeriesIndex() >= 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
+                // Create bubble legend
+                if (bubbleSeriesIndex >= 0 &&
+                    legendOptions.enabled &&
+                    options.enabled) {
+                    options.seriesIndex = bubbleSeriesIndex;
+                    legend.bubbleLegend = new BubbleLegendItem(options, legend);
+                    legend.bubbleLegend.addToLegend(e.allItems);
                 }
-                series.visible = visible;
             }
-        });
-        // If ranges are not specified, determine ranges from rendered bubble series
-        // and render legend again.
-        wrap(Chart.prototype, 'drawChartBox', function (proceed, options, callback) {
-            var chart = this,
-                legend = chart.legend,
-                bubbleSeries = chart.getVisibleBubbleSeriesIndex() >= 0,
-                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;
-                    });
+            /**
+             * 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 legend with bubbleLegend
-                legend.render();
-                chart.getMargins();
-                chart.axes.forEach(function (axis) {
-                    if (axis.visible) { // #11448
-                        axis.render();
+            }
+            /**
+             * 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 (!bubbleLegendOptions.placed) {
-                        axis.setScale();
-                        axis.updateNames();
-                        // Disable axis animation on init
-                        objectEach(axis.ticks, function (tick) {
-                            tick.isNew = true;
-                            tick.isNewLabel = true;
-                        });
+                    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;
                 });
-                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.
-                legend.retranslateItems(legend.getLinesHeights());
             }
-            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();
-                    legend.retranslateItems(legend.getLinesHeights());
-                }
+            /* eslint-disable valid-jsdoc */
+        })(BubbleLegendComposition || (BubbleLegendComposition = {}));
+        /* *
+         *
+         *  Default Export
+         *
+         * */
+
+        return BubbleLegendComposition;
+    });
+    _registerModule(_modules, 'Series/Bubble/BubblePoint.js', [_modules['Core/Series/Point.js'], _modules['Core/Series/SeriesRegistry.js'], _modules['Core/Utilities.js']], function (Point, SeriesRegistry, U) {
+        /* *
+         *
+         *  (c) 2010-2021 Torstein Honsi
+         *
+         *  License: www.highcharts.com/license
+         *
+         *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
+         *
+         * */
+        var __extends = (this && this.__extends) || (function () {
+                var extendStatics = function (d,
+            b) {
+                    extendStatics = Object.setPrototypeOf ||
+                        ({ __proto__: [] } instanceof Array && function (d,
+            b) { d.__proto__ = b; }) ||
+                        function (d,
+            b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+                return extendStatics(d, b);
+            };
+            return function (d, b) {
+                extendStatics(d, b);
+                function __() { this.constructor = d; }
+                d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+            };
+        })();
+        var ScatterPoint = SeriesRegistry.seriesTypes.scatter.prototype.pointClass;
+        var extend = U.extend;
+        /* *
+         *
+         *  Class
+         *
+         * */
+        var BubblePoint = /** @class */ (function (_super) {
+                __extends(BubblePoint, _super);
+            function BubblePoint() {
+                /* *
+                 *
+                 *  Properties
+                 *
+                 * */
+                var _this = _super !== null && _super.apply(this,
+                    arguments) || this;
+                _this.options = void 0;
+                _this.series = void 0;
+                return _this;
+                /* eslint-enable valid-jsdoc */
             }
+            /* *
+             *
+             *  Functions
+             *
+             * */
+            /* eslint-disable valid-jsdoc */
+            /**
+             * @private
+             */
+            BubblePoint.prototype.haloPath = function (size) {
+                return Point.prototype.haloPath.call(this, 
+                // #6067
+                size === 0 ? 0 : (this.marker ? this.marker.radius || 0 : 0) + size);
+            };
+            return BubblePoint;
+        }(ScatterPoint));
+        extend(BubblePoint.prototype, {
+            ttBelow: false
         });
-        H.BubbleLegend = BubbleLegend;
+        /* *
+         *
+         *  Default Export
+         *
+         * */
 
-        return H.BubbleLegend;
+        return BubblePoint;
     });
-    _registerModule(_modules, 'Series/Bubble/BubbleSeries.js', [_modules['Core/Axis/Axis.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, BubblePoint, Color, H, Series, SeriesRegistry, U) {
+    _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) {
         /* *
          *
          *  (c) 2010-2021 Torstein Honsi
@@ -5641,6 +5952,7 @@
                     }
                 }
             };
+            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
@@ -5659,7 +5971,9 @@
             BubbleSeries.defaultOptions = merge(ScatterSeries.defaultOptions, {
                 dataLabels: {
                     formatter: function () {
-                        return this.point.z;
+                        var numberFormatter = this.series.chart.numberFormatter;
+                        var z = this.point.z;
+                        return isNumber(z) ? numberFormatter(z, -1) : '';
                     },
                     inside: true,
                     verticalAlign: 'middle'
@@ -6217,11 +6531,6 @@
         var MapBubbleSeries = /** @class */ (function (_super) {
                 __extends(MapBubbleSeries, _super);
             function MapBubbleSeries() {
-                /* *
-                 *
-                 *  Static Properties
-                 *
-                 * */
                 var _this = _super !== null && _super.apply(this,
                     arguments) || this;
                 /* *
@@ -6234,6 +6543,12 @@
                 _this.points = void 0;
                 return _this;
             }
+            /* *
+             *
+             *  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.
@@ -6627,7 +6942,7 @@
 
         return HeatmapPoint;
     });
-    _registerModule(_modules, 'Series/Heatmap/HeatmapSeries.js', [_modules['Core/Color/Color.js'], _modules['Mixins/ColorMapSeries.js'], _modules['Series/Heatmap/HeatmapPoint.js'], _modules['Mixins/LegendSymbol.js'], _modules['Core/Color/Palette.js'], _modules['Core/Series/SeriesRegistry.js'], _modules['Core/Renderer/SVG/SVGRenderer.js'], _modules['Core/Utilities.js']], function (Color, ColorMapMixin, HeatmapPoint, LegendSymbolMixin, palette, SeriesRegistry, SVGRenderer, U) {
+    _registerModule(_modules, 'Series/Heatmap/HeatmapSeries.js', [_modules['Core/Color/Color.js'], _modules['Mixins/ColorMapSeries.js'], _modules['Series/Heatmap/HeatmapPoint.js'], _modules['Core/Legend/LegendSymbol.js'], _modules['Core/Color/Palette.js'], _modules['Core/Series/SeriesRegistry.js'], _modules['Core/Renderer/SVG/SVGRenderer.js'], _modules['Core/Utilities.js']], function (Color, ColorMapMixin, HeatmapPoint, LegendSymbol, palette, SeriesRegistry, SVGRenderer, U) {
         /* *
          *
          *  (c) 2010-2021 Torstein Honsi
@@ -6834,10 +7149,12 @@
                     stateOptions,
                     brightness, 
                     // Get old properties in order to keep backward compatibility
-                    borderColor = seriesOptions.borderColor ||
+                    borderColor = (point && point.options.borderColor) ||
+                        seriesOptions.borderColor ||
                         heatmapPlotOptions.borderColor ||
                         seriesPlotOptions.borderColor,
-                    borderWidth = seriesOptions.borderWidth ||
+                    borderWidth = (point && point.options.borderWidth) ||
+                        seriesOptions.borderWidth ||
                         heatmapPlotOptions.borderWidth ||
                         seriesPlotOptions.borderWidth ||
                         attr['stroke-width'];
@@ -7020,7 +7337,9 @@
                 nullColor: palette.neutralColor3,
                 dataLabels: {
                     formatter: function () {
-                        return this.point.value;
+                        var numberFormatter = this.series.chart.numberFormatter;
+                        var value = this.point.value;
+                        return isNumber(value) ? numberFormatter(value, -1) : '';
                     },
                     inside: true,
                     verticalAlign: 'middle',
@@ -7207,7 +7526,7 @@
             /**
              * @private
              */
-            drawLegendSymbol: LegendSymbolMixin.drawRectangle,
+            drawLegendSymbol: LegendSymbol.drawRectangle,
             getExtremesFromAll: true,
             getSymbol: Series.prototype.getSymbol,
             parallelArrays: colorMapSeriesMixin.parallelArrays,
@@ -8072,11 +8391,15 @@
         });
 
     });
-    _registerModule(_modules, 'masters/modules/map.src.js', [_modules['Core/Globals.js'], _modules['Core/Chart/MapChart.js']], function (Highcharts, MapChart) {
+    _registerModule(_modules, 'masters/modules/map.src.js', [_modules['Core/Globals.js'], _modules['Core/Axis/Color/ColorAxis.js'], _modules['Series/MapBubble/MapBubbleSeries.js'], _modules['Core/Chart/MapChart.js']], function (Highcharts, ColorAxis, MapBubbleSeries, MapChart) {
 
-        Highcharts.MapChart = MapChart;
-        Highcharts.mapChart = Highcharts.Map = MapChart.mapChart;
-        Highcharts.maps = MapChart.maps;
+        var G = Highcharts;
+        G.ColorAxis = ColorAxis;
+        G.MapChart = MapChart;
+        G.mapChart = G.Map = MapChart.mapChart;
+        G.maps = MapChart.maps;
+        ColorAxis.compose(G.Chart, G.Fx, G.Legend, G.Series);
+        MapBubbleSeries.compose(G.Chart, G.Legend, G.Series);
 
     });
 }));