highcharts 9.3.3 → 10.2.0

package/es-modules/Core/Axis/Axis.js

@@ -20,7 +20,13 @@ import H from '../Globals.js';
 var deg2rad = H.deg2rad;
 import Tick from './Tick.js';
 import U from '../Utilities.js';
-var arrayMax = U.arrayMax, arrayMin = U.arrayMin, clamp = U.clamp, correctFloat = U.correctFloat, defined = U.defined, destroyObjectProperties = U.destroyObjectProperties, erase = U.erase, error = U.error, extend = U.extend, fireEvent = U.fireEvent, getMagnitude = U.getMagnitude, isArray = U.isArray, isNumber = U.isNumber, isString = U.isString, merge = U.merge, normalizeTickInterval = U.normalizeTickInterval, objectEach = U.objectEach, pick = U.pick, relativeLength = U.relativeLength, removeEvent = U.removeEvent, splat = U.splat, syncTimeout = U.syncTimeout;
+var arrayMax = U.arrayMax, arrayMin = U.arrayMin, clamp = U.clamp, correctFloat = U.correctFloat, defined = U.defined, destroyObjectProperties = U.destroyObjectProperties, erase = U.erase, error = U.error, extend = U.extend, fireEvent = U.fireEvent, isArray = U.isArray, isNumber = U.isNumber, isString = U.isString, merge = U.merge, normalizeTickInterval = U.normalizeTickInterval, objectEach = U.objectEach, pick = U.pick, relativeLength = U.relativeLength, removeEvent = U.removeEvent, splat = U.splat, syncTimeout = U.syncTimeout;
+var getNormalizedTickInterval = function (axis, tickInterval) { return normalizeTickInterval(tickInterval, void 0, void 0, pick(axis.options.allowDecimals, 
+// If the tick interval is greather than 0.5, avoid decimals, as
+// linear axes are often used to render discrete values (#3363). If
+// a tick amount is set, allow decimals by default, as it increases
+// the chances for a good fit.
+tickInterval < 0.5 || axis.tickAmount !== void 0), !!axis.tickAmount); };
 /* *
  *
  *  Class
@@ -67,7 +73,6 @@ var Axis = /** @class */ (function () {
     function Axis(chart, userOptions) {
         this.alternateBands = void 0;
         this.bottom = void 0;
-        this.categories = void 0;
         this.chart = void 0;
         this.closestPointRange = void 0;
         this.coll = void 0;
@@ -228,7 +233,7 @@ var Axis = /** @class */ (function () {
          * @type {Array<string>}
          * @readonly
          */
-        axis.categories = options.categories || axis.hasNames;
+        axis.categories = options.categories || (axis.hasNames ? [] : void 0);
         if (!axis.names) { // Preserve on update (#3830)
             axis.names = [];
             axis.names.keys = {};
@@ -372,7 +377,7 @@ var Axis = /** @class */ (function () {
             axis.tickInterval;
         var i = numericSymbols && numericSymbols.length, multi, ret;
         if (categories) {
-            ret = "" + this.value;
+            ret = "".concat(this.value);
         }
         else if (dateTimeLabelFormat) { // datetime axis
             ret = time.dateFormat(dateTimeLabelFormat, value);
@@ -444,7 +449,6 @@ var Axis = /** @class */ (function () {
                     if (axis.isXAxis) {
                         xData = series.xData;
                         if (xData.length) {
-                            var isPositive = function (number) { return number > 0; };
                             xData = axis.logarithmic ?
                                 xData.filter(axis.validatePositiveValue) :
                                 xData;
@@ -513,7 +517,11 @@ var Axis = /** @class */ (function () {
      */
     Axis.prototype.translate = function (val, backwards, cvsCoord, old, handleLog, pointPlacement) {
         var axis = (this.linkedParent || this), // #1417
-        localMin = old && axis.old ? axis.old.min : axis.min, minPixelPadding = axis.minPixelPadding, doPostTranslate = (axis.isOrdinal ||
+        localMin = (old && axis.old ? axis.old.min : axis.min);
+        if (!isNumber(localMin)) {
+            return NaN;
+        }
+        var minPixelPadding = axis.minPixelPadding, doPostTranslate = (axis.isOrdinal ||
             axis.brokenAxis && axis.brokenAxis.hasBreaks ||
             (axis.logarithmic && handleLog)) && axis.lin2val;
         var sign = 1, cvsOffset = 0, localA = old && axis.old ? axis.old.transA : axis.transA, returnValue = 0;
@@ -546,14 +554,11 @@ var Axis = /** @class */ (function () {
             if (doPostTranslate) { // log, ordinal and broken axis
                 val = axis.val2lin(val);
             }
-            returnValue = isNumber(localMin) ?
-                (sign * (val - localMin) * localA +
-                    cvsOffset +
-                    (sign * minPixelPadding) +
-                    (isNumber(pointPlacement) ?
-                        localA * pointPlacement :
-                        0)) :
-                void 0;
+            var value = sign * (val - localMin) * localA;
+            returnValue = (!axis.isRadial ? correctFloat(value) : value) +
+                cvsOffset +
+                (sign * minPixelPadding) +
+                (isNumber(pointPlacement) ? localA * pointPlacement : 0);
         }
         return returnValue;
     };
@@ -573,7 +578,7 @@ var Axis = /** @class */ (function () {
      * Pixel position of the value on the chart or axis.
      */
     Axis.prototype.toPixels = function (value, paneCoordinates) {
-        return this.translate(value, false, !this.horiz, null, true) +
+        return this.translate(value, false, !this.horiz, void 0, true) +
             (paneCoordinates ? 0 : this.pos);
     };
     /**
@@ -593,7 +598,7 @@ var Axis = /** @class */ (function () {
      * The axis value.
      */
     Axis.prototype.toValue = function (pixel, paneCoordinates) {
-        return this.translate(pixel - (paneCoordinates ? 0 : this.pos), true, !this.horiz, null, true);
+        return this.translate(pixel - (paneCoordinates ? 0 : this.pos), true, !this.horiz, void 0, true);
     };
     /**
      * Create the path for a plot line that goes from the given value on
@@ -637,7 +642,7 @@ var Axis = /** @class */ (function () {
             translatedValue: translatedValue
         };
         fireEvent(this, 'getPlotLinePath', evt, function (e) {
-            translatedValue = pick(translatedValue, axis.translate(value, null, null, old));
+            translatedValue = pick(translatedValue, axis.translate(value, void 0, void 0, old));
             // Keep the translated value within sane bounds, and avoid Infinity
             // to fail the isNumber test (#7709).
             translatedValue = clamp(translatedValue, -1e5, 1e5);
@@ -902,18 +907,18 @@ var Axis = /** @class */ (function () {
      * The X value that the point is given.
      */
     Axis.prototype.nameToX = function (point) {
-        var explicitCategories = isArray(this.categories), names = explicitCategories ? this.categories : this.names;
+        var explicitCategories = isArray(this.options.categories), names = explicitCategories ? this.categories : this.names;
         var nameX = point.options.x, x;
         point.series.requireSorting = false;
         if (!defined(nameX)) {
-            nameX = this.options.uniqueNames ?
+            nameX = this.options.uniqueNames && names ?
                 (explicitCategories ?
                     names.indexOf(point.name) :
                     pick(names.keys[point.name], -1)) :
                 point.series.autoIncrement();
         }
         if (nameX === -1) { // Not found in currenct categories
-            if (!explicitCategories) {
+            if (!explicitCategories && names) {
                 x = names.length;
             }
         }
@@ -1280,15 +1285,9 @@ var Axis = /** @class */ (function () {
         if (!tickIntervalOption && axis.tickInterval < minTickInterval) {
             axis.tickInterval = minTickInterval;
         }
-        // for linear axes, get magnitude and normalize the interval
+        // For linear axes, normalize the interval
         if (!axis.dateTime && !axis.logarithmic && !tickIntervalOption) {
-            axis.tickInterval = normalizeTickInterval(axis.tickInterval, void 0, getMagnitude(axis.tickInterval), pick(options.allowDecimals, 
-            // If the tick interval is greather than 0.5, avoid
-            // decimals, as linear axes are often used to render
-            // discrete values. #3363. If a tick amount is set, allow
-            // decimals by default, as it increases the chances for a
-            // good fit.
-            axis.tickInterval < 0.5 || this.tickAmount !== void 0), !!this.tickAmount);
+            axis.tickInterval = getNormalizedTickInterval(axis, axis.tickInterval);
         }
         // Prevent ticks from getting so close that we can't draw the labels
         if (!this.tickAmount) {
@@ -1365,7 +1364,21 @@ var Axis = /** @class */ (function () {
                 tickPositions = axis.logarithmic.getLogTickPositions(this.tickInterval, this.min, this.max);
             }
             else {
-                tickPositions = this.getLinearTickPositions(this.tickInterval, this.min, this.max);
+                var startingTickInterval = this.tickInterval;
+                var adjustedTickInterval = startingTickInterval;
+                while (adjustedTickInterval <= startingTickInterval * 2) {
+                    tickPositions = this.getLinearTickPositions(this.tickInterval, this.min, this.max);
+                    // If there are more tick positions than the set tickAmount,
+                    // increase the tickInterval and continue until it fits.
+                    // (#17100)
+                    if (this.tickAmount &&
+                        tickPositions.length > this.tickAmount) {
+                        this.tickInterval = getNormalizedTickInterval(this, adjustedTickInterval *= 1.1);
+                    }
+                    else {
+                        break;
+                    }
+                }
             }
             // Too dense ticks, keep only the first and last (#4477)
             if (tickPositions.length > this.len) {
@@ -1461,38 +1474,87 @@ var Axis = /** @class */ (function () {
      * True if there are other axes.
      */
     Axis.prototype.alignToOthers = function () {
-        var axis = this, others = // Whether there is another axis to pair with this one
-         {}, options = axis.options;
+        var axis = this, alignedAxes = [this], options = axis.options, alignThresholds = (this.coll === 'yAxis' &&
+            this.chart.options.chart.alignThresholds), thresholdAlignments = [];
         var hasOther;
-        if (
-        // Only if alignTicks is true
-        this.chart.options.chart.alignTicks !== false &&
-            options.alignTicks &&
+        axis.thresholdAlignment = void 0;
+        if ((
+        // Only if alignTicks or alignThresholds is true
+        (this.chart.options.chart.alignTicks !== false &&
+            options.alignTicks) || (alignThresholds)) &&
             // Disabled when startOnTick or endOnTick are false (#7604)
             options.startOnTick !== false &&
             options.endOnTick !== false &&
             // Don't try to align ticks on a log axis, they are not evenly
             // spaced (#6021)
             !axis.logarithmic) {
-            this.chart[this.coll].forEach(function (axis) {
-                var otherOptions = axis.options, horiz = axis.horiz, key = [
-                    horiz ? otherOptions.left : otherOptions.top,
-                    otherOptions.width,
-                    otherOptions.height,
-                    otherOptions.pane
+            // Get a key identifying which pane the axis belongs to
+            var getKey_1 = function (axis) {
+                var horiz = axis.horiz, options = axis.options;
+                return [
+                    horiz ? options.left : options.top,
+                    options.width,
+                    options.height,
+                    options.pane
                 ].join(',');
-                if (axis.series.length) { // #4442
-                    if (others[key]) {
-                        hasOther = true; // #4201
-                    }
-                    else {
-                        others[key] = 1;
-                    }
+            };
+            var thisKey_1 = getKey_1(this);
+            this.chart[this.coll].forEach(function (otherAxis) {
+                var series = otherAxis.series;
+                if (
+                // #4442
+                series.length &&
+                    series.some(function (s) { return s.visible; }) &&
+                    otherAxis !== axis &&
+                    getKey_1(otherAxis) === thisKey_1) {
+                    hasOther = true; // #4201
+                    alignedAxes.push(otherAxis);
+                }
+            });
+        }
+        if (hasOther && alignThresholds) {
+            // Handle alignThresholds. The `thresholdAlignments` array keeps
+            // records of where each axis in the group wants its threshold, from
+            // 0 which is on `axis.min`, to 1 which is on `axis.max`.
+            alignedAxes.forEach(function (otherAxis) {
+                var threshAlign = otherAxis.getThresholdAlignment(axis);
+                if (isNumber(threshAlign)) {
+                    thresholdAlignments.push(threshAlign);
                 }
             });
+            // For each of the axes in the group, record the average
+            // `thresholdAlignment`.
+            var thresholdAlignment_1 = thresholdAlignments.length > 1 ?
+                thresholdAlignments.reduce(function (sum, n) { return (sum += n); }, 0) / thresholdAlignments.length :
+                void 0;
+            alignedAxes.forEach(function (axis) {
+                axis.thresholdAlignment = thresholdAlignment_1;
+            });
         }
         return hasOther;
     };
+    /**
+     * Where the axis wants its threshold, from 0 which is on `axis.min`, to 1 which
+     * is on `axis.max`.
+     *
+     * @private
+     * @function Highcharts.Axis#getThresholdAlignment
+     */
+    Axis.prototype.getThresholdAlignment = function (callerAxis) {
+        if (!isNumber(this.dataMin) ||
+            (this !== callerAxis &&
+                this.series.some(function (s) { return (s.isDirty || s.isDirtyData); }))) {
+            this.getSeriesExtremes();
+        }
+        if (isNumber(this.threshold)) {
+            var thresholdAlignment = clamp(((this.threshold - (this.dataMin || 0)) /
+                ((this.dataMax || 0) - (this.dataMin || 0))), 0, 1);
+            if (this.options.reversed) {
+                thresholdAlignment = 1 - thresholdAlignment;
+            }
+            return thresholdAlignment;
+        }
+    };
     /**
      * Find the max ticks of either the x and y axis collection, and record it
      * in `this.tickAmount`.
@@ -1534,39 +1596,89 @@ var Axis = /** @class */ (function () {
      * @function Highcharts.Axis#adjustTickAmount
      */
     Axis.prototype.adjustTickAmount = function () {
-        var axis = this, axisOptions = axis.options, tickInterval = axis.tickInterval, tickPositions = axis.tickPositions, tickAmount = axis.tickAmount, finalTickAmt = axis.finalTickAmt, currentTickAmount = tickPositions && tickPositions.length, threshold = pick(axis.threshold, axis.softThreshold ? 0 : null);
-        var len, i;
-        if (axis.hasData() &&
-            isNumber(axis.min) &&
-            isNumber(axis.max)) { // #14769
-            if (currentTickAmount < tickAmount) {
+        var axis = this, finalTickAmt = axis.finalTickAmt, max = axis.max, min = axis.min, options = axis.options, tickPositions = axis.tickPositions, tickAmount = axis.tickAmount, thresholdAlignment = axis.thresholdAlignment, currentTickAmount = tickPositions && tickPositions.length, threshold = pick(axis.threshold, axis.softThreshold ? 0 : null);
+        var len, i, tickInterval = axis.tickInterval, thresholdTickIndex;
+        var 
+        // Extend the tickPositions by appending a position
+        append = function () { return tickPositions.push(correctFloat(tickPositions[tickPositions.length - 1] +
+            tickInterval)); }, 
+        // Extend the tickPositions by prepending a position
+        prepend = function () { return tickPositions.unshift(correctFloat(tickPositions[0] - tickInterval)); };
+        // If `thresholdAlignment` is a number, it means the `alignThresholds`
+        // option is true. The `thresholdAlignment` is a scalar value between 0
+        // and 1 for where the threshold should be relative to `axis.min` and
+        // `axis.max`. Now that we know the tick amount, convert this to the
+        // tick index. Unless `thresholdAlignment` is exactly 0 or 1, avoid the
+        // first or last tick because that would lead to series being clipped.
+        if (isNumber(thresholdAlignment)) {
+            thresholdTickIndex = thresholdAlignment < 0.5 ?
+                Math.ceil(thresholdAlignment * (tickAmount - 1)) :
+                Math.floor(thresholdAlignment * (tickAmount - 1));
+            if (options.reversed) {
+                thresholdTickIndex = tickAmount - 1 - thresholdTickIndex;
+            }
+        }
+        if (axis.hasData() && isNumber(min) && isNumber(max)) { // #14769
+            // Adjust extremes and translation to the modified tick positions
+            var adjustExtremes = function () {
+                axis.transA *= (currentTickAmount - 1) / (tickAmount - 1);
+                // Do not crop when ticks are not extremes (#9841)
+                axis.min = options.startOnTick ?
+                    tickPositions[0] :
+                    Math.min(min, tickPositions[0]);
+                axis.max = options.endOnTick ?
+                    tickPositions[tickPositions.length - 1] :
+                    Math.max(max, tickPositions[tickPositions.length - 1]);
+            };
+            // When the axis is subject to the alignThresholds option. Use
+            // axis.threshold because the local threshold includes the
+            // `softThreshold`.
+            if (isNumber(thresholdTickIndex) && isNumber(axis.threshold)) {
+                // Throw away the previously computed tickPositions and start
+                // from scratch with only the threshold itself, then add ticks
+                // below the threshold first, then fill up above the threshold.
+                // If we are not able to fill up to axis.max, double the
+                // tickInterval and run again.
+                while (tickPositions[thresholdTickIndex] !== threshold ||
+                    tickPositions.length !== tickAmount ||
+                    tickPositions[0] > min ||
+                    tickPositions[tickPositions.length - 1] < max) {
+                    tickPositions.length = 0;
+                    tickPositions.push(axis.threshold);
+                    while (tickPositions.length < tickAmount) {
+                        if (
+                        // Start by prepending positions until the threshold
+                        // is at the required index...
+                        tickPositions[thresholdTickIndex] === void 0 ||
+                            tickPositions[thresholdTickIndex] > axis.threshold) {
+                            prepend();
+                        }
+                        else {
+                            // ... then append positions until we have the
+                            // required length
+                            append();
+                        }
+                    }
+                    // Safety vent
+                    if (tickInterval > axis.tickInterval * 8) {
+                        break;
+                    }
+                    tickInterval *= 2;
+                }
+                adjustExtremes();
+            }
+            else if (currentTickAmount < tickAmount) {
                 while (tickPositions.length < tickAmount) {
                     // Extend evenly for both sides unless we're on the
                     // threshold (#3965)
-                    if (tickPositions.length % 2 ||
-                        axis.min === threshold) {
-                        // to the end
-                        tickPositions.push(correctFloat(tickPositions[tickPositions.length - 1] +
-                            tickInterval));
+                    if (tickPositions.length % 2 || min === threshold) {
+                        append();
                     }
                     else {
-                        // to the start
-                        tickPositions.unshift(correctFloat(tickPositions[0] - tickInterval));
+                        prepend();
                     }
                 }
-                axis.transA *= (currentTickAmount - 1) / (tickAmount - 1);
-                // Do not crop when ticks are not extremes (#9841)
-                axis.min = axisOptions.startOnTick ?
-                    tickPositions[0] :
-                    Math.min(axis.min, tickPositions[0]);
-                axis.max = axisOptions.endOnTick ?
-                    tickPositions[tickPositions.length - 1] :
-                    Math.max(axis.max, tickPositions[tickPositions.length - 1]);
-                // We have too many ticks, run second pass to try to reduce ticks
-            }
-            else if (currentTickAmount > tickAmount) {
-                axis.tickInterval *= 2;
-                axis.setTickPositions();
+                adjustExtremes();
             }
             // The finalTickAmt property is set in getTickAmount
             if (defined(finalTickAmt)) {
@@ -1804,7 +1916,7 @@ var Axis = /** @class */ (function () {
      * @param {number} threshold
      * The threshold in axis values.
      *
-     * @return {number|undefined}
+     * @return {number}
      * The translated threshold position in terms of pixels, and corrected to
      * stay within the axis bounds.
      */
@@ -2233,8 +2345,8 @@ var Axis = /** @class */ (function () {
         if (!axis.axisGroup) {
             var createGroup = function (name, suffix, zIndex) { return renderer.g(name)
                 .attr({ zIndex: zIndex })
-                .addClass("highcharts-" + coll.toLowerCase() + suffix + " " +
-                (_this.isRadial ? "highcharts-radial-axis" + suffix + " " : '') +
+                .addClass("highcharts-".concat(coll.toLowerCase()).concat(suffix, " ") +
+                (_this.isRadial ? "highcharts-radial-axis".concat(suffix, " ") : '') +
                 (className || ''))
                 .add(axisParent); };
             axis.gridGroup = createGroup('grid', '-grid', options.gridZIndex);
@@ -2405,18 +2517,18 @@ var Axis = /** @class */ (function () {
         // The part of a multiline text that is below the baseline of the
         // first line. Subtract 1 to preserve pixel-perfectness from the
         // old behaviour (v5.0.12), where only one line was allowed.
-        textHeightOvershoot = Math.max(axisTitle.getBBox(null, 0).height - fontMetrics.h - 1, 0), 
+        textHeightOvershoot = axisTitle ? Math.max(axisTitle.getBBox(false, 0).height - fontMetrics.h - 1, 0) : 0, 
         // the position in the length direction of the axis
-        alongAxis = {
+        alongAxis = ({
             low: margin + (horiz ? 0 : axisLength),
             middle: margin + axisLength / 2,
             high: margin + (horiz ? axisLength : 0)
-        }[axisTitleOptions.align], 
+        })[axisTitleOptions.align], 
         // the position in the perpendicular direction of the axis
         offAxis = (horiz ? axisTop + this.height : axisLeft) +
             (horiz ? 1 : -1) * // horizontal axis reverses the margin
                 (opposite ? -1 : 1) * // so does opposite axes
-                this.axisTitleMargin +
+                (this.axisTitleMargin || 0) +
             [
                 -textHeightOvershoot,
                 textHeightOvershoot,
@@ -2618,14 +2730,8 @@ var Axis = /** @class */ (function () {
         }
         if (axisTitle && showAxis) {
             var titleXy = axis.getTitlePosition();
-            if (isNumber(titleXy.y)) {
-                axisTitle[axisTitle.isNew ? 'attr' : 'animate'](titleXy);
-                axisTitle.isNew = false;
-            }
-            else {
-                axisTitle.attr('y', -9999);
-                axisTitle.isNew = true;
-            }
+            axisTitle[axisTitle.isNew ? 'attr' : 'animate'](titleXy);
+            axisTitle.isNew = false;
         }
         // Stacked totals:
         if (stackLabelOptions && stackLabelOptions.enabled && axis.stacking) {
@@ -2812,10 +2918,10 @@ var Axis = /** @class */ (function () {
                         stroke: options.color ||
                             (categorized ?
                                 Color
-                                    .parse("#ccd6eb" /* highlightColor20 */)
+                                    .parse("#ccd6eb" /* Palette.highlightColor20 */)
                                     .setOpacity(0.25)
                                     .get() :
-                                "#cccccc" /* neutralColor20 */),
+                                "#cccccc" /* Palette.neutralColor20 */),
                         'stroke-width': pick(options.width, 1)
                     }).css({
                         'pointer-events': 'none'

package/es-modules/Core/Axis/AxisDefaults.js

@@ -966,7 +966,7 @@ var AxisDefaults;
              */
             style: {
                 /** @internal */
-                color: "#666666" /* neutralColor60 */,
+                color: "#666666" /* Palette.neutralColor60 */,
                 /** @internal */
                 cursor: 'default',
                 /** @internal */
@@ -1801,7 +1801,7 @@ var AxisDefaults;
              */
             style: {
                 /** @internal */
-                color: "#666666" /* neutralColor60 */
+                color: "#666666" /* Palette.neutralColor60 */
             }
         },
         /**
@@ -1918,7 +1918,7 @@ var AxisDefaults;
          * @type    {Highcharts.ColorType}
          * @default #f2f2f2
          */
-        minorGridLineColor: "#f2f2f2" /* neutralColor5 */,
+        minorGridLineColor: "#f2f2f2" /* Palette.neutralColor5 */,
         /**
          * Width of the minor, secondary grid lines.
          *
@@ -1944,7 +1944,7 @@ var AxisDefaults;
          * @type    {Highcharts.ColorType}
          * @default #999999
          */
-        minorTickColor: "#999999" /* neutralColor40 */,
+        minorTickColor: "#999999" /* Palette.neutralColor40 */,
         /**
          * The color of the line marking the axis itself.
          *
@@ -1965,7 +1965,7 @@ var AxisDefaults;
          * @type    {Highcharts.ColorType}
          * @default #ccd6eb
          */
-        lineColor: "#ccd6eb" /* highlightColor20 */,
+        lineColor: "#ccd6eb" /* Palette.highlightColor20 */,
         /**
          * The width of the line marking the axis itself.
          *
@@ -2002,7 +2002,7 @@ var AxisDefaults;
          * @type    {Highcharts.ColorType}
          * @default #e6e6e6
          */
-        gridLineColor: "#e6e6e6" /* neutralColor10 */,
+        gridLineColor: "#e6e6e6" /* Palette.neutralColor10 */,
         /**
          * The width of the grid lines extending the ticks across the plot area.
          * Defaults to 1 on the Y axis and 0 on the X axis, except for 3d
@@ -2060,7 +2060,7 @@ var AxisDefaults;
          * @type    {Highcharts.ColorType}
          * @default #ccd6eb
          */
-        tickColor: "#ccd6eb" /* highlightColor20 */
+        tickColor: "#ccd6eb" /* Palette.highlightColor20 */
         // tickWidth: 1
     };
     /**
@@ -2850,7 +2850,7 @@ var AxisDefaults;
              */
             style: {
                 /** @internal */
-                color: "#000000" /* neutralColor100 */,
+                color: "#000000" /* Palette.neutralColor100 */,
                 /** @internal */
                 fontSize: '11px',
                 /** @internal */

package/es-modules/Core/Axis/Color/ColorAxis.js

@@ -12,10 +12,12 @@ 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]; };
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
         return extendStatics(d, b);
     };
     return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
         extendStatics(d, b);
         function __() { this.constructor = d; }
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
@@ -302,6 +304,16 @@ var ColorAxis = /** @class */ (function (_super) {
             axis.axisParent = group;
             // Call the base
             _super.prototype.getOffset.call(this);
+            var legend_1 = this.chart.legend;
+            // Adds `maxLabelLength` needed for label padding corrections done
+            // by `render()` and `getMargins()` (#15551).
+            legend_1.allItems.forEach(function (item) {
+                if (item instanceof ColorAxis) {
+                    item.drawLegendSymbol(legend_1, item);
+                }
+            });
+            legend_1.render();
+            this.chart.getMargins(true);
             // First time only
             if (!axis.added) {
                 axis.added = true;
@@ -344,17 +356,24 @@ var ColorAxis = /** @class */ (function (_super) {
         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 labelPadding = pick(
+        // @todo: This option is not documented, nor implemented when
+        // vertical
+        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);
+        if (!item.legendSymbol) {
+            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));
+            (horiz ?
+                itemDistance :
+                this.options.labels.x + this.maxLabelLength));
         axis.legendItemHeight = height + padding + (horiz ? labelPadding : 0);
     };
     /**
@@ -608,7 +627,7 @@ var ColorAxis = /** @class */ (function (_super) {
                     setState: noop,
                     isDataClass: true,
                     setVisible: function () {
-                        vis = axis.visible = !vis;
+                        this.visible = vis = axis.visible = !vis;
                         axis.series.forEach(function (series) {
                             series.points.forEach(function (point) {
                                 if (point.dataClass === i) {

package/es-modules/Core/Axis/Color/ColorAxisDefaults.js

@@ -297,7 +297,7 @@ var colorAxisDefaults = {
          * @type    {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
          * @product highcharts highstock highmaps
          */
-        color: "#999999" /* neutralColor40 */
+        color: "#999999" /* Palette.neutralColor40 */
     },
     /**
      * The axis labels show the number for each tick.
@@ -339,7 +339,7 @@ var colorAxisDefaults = {
      * @type    {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
      * @product highcharts highstock highmaps
      */
-    minColor: "#e6ebf5" /* highlightColor10 */,
+    minColor: "#e6ebf5" /* Palette.highlightColor10 */,
     /**
      * The color to represent the maximum of the color axis. Unless
      * [dataClasses](#colorAxis.dataClasses) or
@@ -358,7 +358,7 @@ var colorAxisDefaults = {
      * @type    {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
      * @product highcharts highstock highmaps
      */
-    maxColor: "#003399" /* highlightColor100 */,
+    maxColor: "#003399" /* Palette.highlightColor100 */,
     /**
      * Color stops for the gradient of a scalar color axis. Use this in
      * cases where a linear gradient between a `minColor` and `maxColor`

package/es-modules/Core/Axis/DateTimeAxis.js

@@ -179,10 +179,12 @@ var DateTimeAxis;
          * @private
          */
         Additions.prototype.getXDateFormat = function (x, dateTimeLabelFormats) {
-            var axis = this.axis;
+            var axis = this.axis, time = axis.chart.time;
             return axis.closestPointRange ?
-                axis.chart.time.getDateFormat(axis.closestPointRange, x, axis.options.startOfWeek, dateTimeLabelFormats) || dateTimeLabelFormats.year : // #2546, 2581
-                dateTimeLabelFormats.day;
+                time.getDateFormat(axis.closestPointRange, x, axis.options.startOfWeek, dateTimeLabelFormats) ||
+                    // #2546, 2581
+                    time.resolveDTLFormat(dateTimeLabelFormats.year).main :
+                time.resolveDTLFormat(dateTimeLabelFormats.day).main;
         };
         return Additions;
     }());