highcharts 9.1.1 → 9.2.2

package/modules/heatmap.src.js

@@ -1,5 +1,5 @@
 /**
- * @license Highmaps JS v9.1.1 (2021-06-04)
+ * @license Highmaps JS v9.2.2 (2021-08-24)
  *
  * (c) 2009-2021 Torstein Honsi
  *
@@ -71,7 +71,6 @@
          */
         var colorSeriesMixin = {
                 optionalAxis: 'colorAxis',
-                colorAxis: 0,
                 /* eslint-disable valid-jsdoc */
                 /**
                  * In choropleth maps,
@@ -114,7 +113,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
@@ -124,715 +123,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}
@@ -1062,7 +656,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.
@@ -1104,7 +698,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
@@ -1123,7 +717,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`
@@ -1191,6 +785,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
              */
@@ -1203,121 +1472,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;
+        /* *
+         *
+         *  Default Export
+         *
+         * */
+        /* *
+         *
+         *  API Declarations
+         *
+         * */
         /**
-         * Handle animation of the color attributes directly
+         * Color axis types
          *
-         * @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();
-            }
-        });
+         * @typedef {"linear"|"logarithmic"} Highcharts.ColorAxisTypeValue
+         */
+        ''; // detach doclet above
 
         return ColorAxis;
     });
@@ -1585,7 +1762,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
@@ -1792,10 +1969,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'];
@@ -1978,7 +2157,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',
@@ -2165,7 +2346,7 @@
             /**
              * @private
              */
-            drawLegendSymbol: LegendSymbolMixin.drawRectangle,
+            drawLegendSymbol: LegendSymbol.drawRectangle,
             getExtremesFromAll: true,
             getSymbol: Series.prototype.getSymbol,
             parallelArrays: colorMapSeriesMixin.parallelArrays,
@@ -2544,8 +2725,11 @@
 
         return HeatmapSeries;
     });
-    _registerModule(_modules, 'masters/modules/heatmap.src.js', [], function () {
+    _registerModule(_modules, 'masters/modules/heatmap.src.js', [_modules['Core/Globals.js'], _modules['Core/Axis/Color/ColorAxis.js']], function (Highcharts, ColorAxis) {
 
+        var G = Highcharts;
+        G.ColorAxis = ColorAxis;
+        ColorAxis.compose(G.Chart, G.Fx, G.Legend, G.Series);
 
     });
 }));