highcharts 12.2.0 → 12.4.0

package/es-modules/Accessibility/Components/MenuComponent.js

@@ -28,7 +28,7 @@ const { getFakeMouseEvent } = HTMLUtilities;
  * @private
  */
 function getExportMenuButtonElement(chart) {
-    return chart.exportSVGElements && chart.exportSVGElements[0];
+    return chart.exporting?.svgElements?.[0];
 }
 /**
  * @private
@@ -78,7 +78,7 @@ class MenuComponent extends AccessibilityComponent {
      * @private
      */
     onMenuHidden() {
-        const menu = this.chart.exportContextMenu;
+        const menu = this.chart.exporting?.contextMenuEl;
         if (menu) {
             menu.setAttribute('aria-hidden', 'true');
         }
@@ -88,7 +88,7 @@ class MenuComponent extends AccessibilityComponent {
      * @private
      */
     onMenuShown() {
-        const chart = this.chart, menu = chart.exportContextMenu;
+        const chart = this.chart, menu = chart.exporting?.contextMenuEl;
         if (menu) {
             this.addAccessibleContextMenuAttribs();
             unhideChartElementFromAT(chart, menu);
@@ -114,7 +114,7 @@ class MenuComponent extends AccessibilityComponent {
         this.proxyMenuButton();
         if (this.exportButtonProxy &&
             focusEl &&
-            focusEl === chart.exportingGroup) {
+            focusEl === chart.exporting?.group) {
             if (focusEl.focusBorder) {
                 chart.setFocusToElement(focusEl, this.exportButtonProxy.innerElement);
             }
@@ -154,7 +154,7 @@ class MenuComponent extends AccessibilityComponent {
      * @private
      */
     addAccessibleContextMenuAttribs() {
-        const chart = this.chart, exportList = chart.exportDivElements;
+        const chart = this.chart, exportList = chart.exporting?.divElements;
         if (exportList && exportList.length) {
             // Set tabindex on the menu items to allow focusing by script
             // Set role to give screen readers a chance to pick up the contents
@@ -220,13 +220,12 @@ class MenuComponent extends AccessibilityComponent {
                         ?.buttons
                         ?.contextButton.enabled !== false &&
                     chart.options.exporting.enabled !== false &&
-                    chart.options.exporting.accessibility.enabled !==
-                        false;
+                    (chart.options.exporting.accessibility?.enabled || false) !== false;
             },
             // Focus export menu button
             init: function () {
                 const proxy = component.exportButtonProxy;
-                const svgEl = component.chart.exportingGroup;
+                const svgEl = component.chart.exporting?.group;
                 if (proxy && svgEl) {
                     chart.setFocusToElement(svgEl, proxy.innerElement);
                 }
@@ -272,7 +271,7 @@ class MenuComponent extends AccessibilityComponent {
         const response = keyboardNavigationHandler.response;
         // Try to highlight next item in list. Highlighting e.g.
         // separators will fail.
-        for (let i = (chart.highlightedExportItemIx || 0) + 1; i < chart.exportDivElements.length; ++i) {
+        for (let i = (chart.highlightedExportItemIx || 0) + 1; i < (chart.exporting?.divElements?.length || 0); ++i) {
             if (chart.highlightExportItem(i)) {
                 return response.success;
             }
@@ -291,13 +290,14 @@ class MenuComponent extends AccessibilityComponent {
      */
     onKbdClick(keyboardNavigationHandler) {
         const chart = this.chart;
-        const curHighlightedItem = chart.exportDivElements[chart.highlightedExportItemIx];
-        const exportButtonElement = getExportMenuButtonElement(chart).element;
-        if (chart.openMenu) {
-            this.fakeClickEvent(curHighlightedItem);
+        const curHighlightedItem = chart.highlightedExportItemIx !== void 0 &&
+            chart.exporting?.divElements?.[chart.highlightedExportItemIx];
+        const exportButtonElement = getExportMenuButtonElement(chart)?.element;
+        if (chart.exporting?.openMenu) {
+            curHighlightedItem && this.fakeClickEvent(curHighlightedItem);
         }
         else {
-            this.fakeClickEvent(exportButtonElement);
+            exportButtonElement && this.fakeClickEvent(exportButtonElement);
             chart.highlightExportItem(0);
         }
         return keyboardNavigationHandler.response.success;
@@ -343,7 +343,9 @@ class MenuComponent extends AccessibilityComponent {
         if (exportButton) {
             const el = exportButton.element;
             if (el.onclick) {
-                el.onclick(getFakeMouseEvent('click'));
+                el.onclick = function () {
+                    getFakeMouseEvent('click');
+                };
             }
         }
     }
@@ -352,8 +354,10 @@ class MenuComponent extends AccessibilityComponent {
      * @function Highcharts.Chart#hideExportMenu
      */
     function chartHideExportMenu() {
-        const chart = this, exportList = chart.exportDivElements;
-        if (exportList && chart.exportContextMenu && chart.openMenu) {
+        const chart = this, exportList = chart.exporting?.divElements;
+        if (exportList &&
+            chart.exporting?.contextMenuEl &&
+            chart.exporting?.openMenu) {
             // Reset hover states etc.
             exportList.forEach((el) => {
                 if (el &&
@@ -364,7 +368,7 @@ class MenuComponent extends AccessibilityComponent {
             });
             chart.highlightedExportItemIx = 0;
             // Hide the menu div
-            chart.exportContextMenu.hideMenu();
+            chart.exporting.contextMenuEl.hideMenu();
             // Make sure the chart has focus and can capture keyboard events
             chart.container.focus();
         }
@@ -376,9 +380,8 @@ class MenuComponent extends AccessibilityComponent {
      * @function Highcharts.Chart#highlightExportItem
      */
     function chartHighlightExportItem(ix) {
-        const listItem = this.exportDivElements && this.exportDivElements[ix];
-        const curHighlighted = this.exportDivElements &&
-            this.exportDivElements[this.highlightedExportItemIx];
+        const listItem = this.exporting?.divElements?.[ix], curHighlighted = this.highlightedExportItemIx !== void 0 &&
+            this.exporting?.divElements?.[this.highlightedExportItemIx];
         if (listItem &&
             listItem.tagName === 'LI' &&
             !(listItem.children && listItem.children.length)) {
@@ -408,8 +411,8 @@ class MenuComponent extends AccessibilityComponent {
      */
     function chartHighlightLastExportItem() {
         const chart = this;
-        if (chart.exportDivElements) {
-            let i = chart.exportDivElements.length;
+        if (chart.exporting?.divElements) {
+            let i = chart.exporting?.divElements.length;
             while (i--) {
                 if (chart.highlightExportItem(i)) {
                     return true;

package/es-modules/Accessibility/Components/NavigatorComponent.js

@@ -181,7 +181,7 @@ class NavigatorComponent extends AccessibilityComponent {
      */
     updateNavigator(beforeAnnounce) {
         const performUpdate = (beforeAnnounce) => {
-            const chart = this.chart, { navigator, pointer } = chart;
+            const chart = this.chart, { navigator, pointer } = chart, keyboardNavigation = this.chart.accessibility?.keyboardNavigation;
             if (navigator &&
                 pointer &&
                 this.minHandleProxy &&
@@ -206,6 +206,10 @@ class NavigatorComponent extends AccessibilityComponent {
                         }, handle));
                     }
                 });
+                // If navigating by keyboard, do not reset #22122
+                if (keyboardNavigation) {
+                    keyboardNavigation.keyboardReset = false;
+                }
                 if (beforeAnnounce) {
                     beforeAnnounce();
                 }

package/es-modules/Accessibility/Components/SeriesComponent/ForcedMarkers.js

@@ -159,7 +159,9 @@ var ForcedMarkersComposition;
         else if (series.a11yMarkersForced) {
             delete series.a11yMarkersForced;
             unforceSeriesMarkerOptions(series);
-            delete series.resetA11yMarkerOptions;
+            if (options.marker && options.marker.enabled === false) { // #23329
+                delete series.resetA11yMarkerOptions; // #16624
+            }
         }
     }
     /**

package/es-modules/Accessibility/FocusBorder.js

@@ -107,6 +107,10 @@ var FocusBorderComposition;
             this.focusElement.removeFocusBorder();
         }
         this.focusElement = svgElement;
+        // #22122, focus border should re-render after window is resized
+        addEvent(this, 'endResize', function () {
+            this.renderFocusBorder();
+        });
         this.renderFocusBorder();
     }
     /**

package/es-modules/Accessibility/HighContrastMode.js

@@ -25,11 +25,6 @@ const { doc, isMS, win } = H;
  * @return {boolean} Returns true if the browser is in High Contrast mode.
  */
 function isHighContrastModeActive() {
-    // Use media query on Edge, but not on IE
-    const isEdge = /(Edg)/.test(win.navigator.userAgent);
-    if (win.matchMedia && isEdge) {
-        return win.matchMedia('(-ms-high-contrast: active)').matches;
-    }
     // Test BG image for IE
     if (isMS && win.getComputedStyle) {
         const testDiv = doc.createElement('div');

package/es-modules/Accessibility/Options/A11yDefaults.js

@@ -165,6 +165,9 @@ const Options = {
              *
              * Set to empty string to remove the region altogether.
              *
+             * @sample highcharts/accessibility/before-chart-format
+             *         beforeChartFormat
+             *
              * @since 8.0.0
              */
             beforeChartFormat: '<{headingTagName}>{chartTitle}</{headingTagName}>' +
@@ -271,6 +274,9 @@ const Options = {
              *
              * Set to `false` to disable.
              *
+             * @sample highcharts/accessibility/point-description-enabled-threshold
+             *         pointDescriptionEnabledThreshold
+             *
              * @type  {boolean|number}
              * @since 8.0.0
              */
@@ -487,6 +493,9 @@ const Options = {
          * The default option is `auto`, which applies the high contrast theme
          * the user's system has a high contrast theme active.
          *
+         * @sample highcharts/accessibility/high-contrast-mode
+         *         High contrast mode enabled
+         *
          * @since 11.4.0
          */
         highContrastMode: 'auto',
@@ -600,6 +609,9 @@ const Options = {
              * the chart container first, requiring the user to tab again to
              * enter the chart.
              *
+             * @sample highcharts/accessibility/custom-component
+             *         Custom order is set
+             *
              * @type  {Array<string>}
              * @since 7.1.0
              */

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

@@ -504,7 +504,7 @@ class Axis {
         }
         const minPixelPadding = axis.minPixelPadding, doPostTranslate = (axis.isOrdinal ||
             axis.brokenAxis?.hasBreaks ||
-            (axis.logarithmic && handleLog)) && axis.lin2val;
+            (axis.logarithmic && handleLog)) && !!axis.lin2val;
         let sign = 1, cvsOffset = 0, localA = old && axis.old ? axis.old.transA : axis.transA, returnValue = 0;
         if (!localA) {
             localA = axis.transA;
@@ -2066,7 +2066,8 @@ class Axis {
             if (cssWidth !== void 0) {
                 return parseInt(String(cssWidth), 10);
             }
-            if (marginLeft) {
+            // Skip marginLeft for opposite axis to avoid label cutoff, #22821
+            if (!this.opposite && marginLeft) {
                 return marginLeft - chart.spacing[3];
             }
         }
@@ -2781,7 +2782,7 @@ class Axis {
                 axis.plotLinesAndBandsGroups[plotGroup].destroy();
         }
         // Delete all properties and fall back to the prototype.
-        objectEach(axis, function (val, key) {
+        objectEach(axis, function (_val, key) {
             if (axis.getKeepProps().indexOf(key) === -1) {
                 delete axis[key];
             }

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

@@ -386,9 +386,6 @@ class Axis3DAdditions {
             else { // X and Z Axis
                 let sin = Math.sin(alpha);
                 const cos = Math.cos(alpha);
-                if (axis.opposite) {
-                    sin = -sin;
-                }
                 if (reverseFlap) {
                     sin = -sin;
                 }

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

@@ -689,14 +689,6 @@ var AxisDefaults;
          * @context   Highcharts.Axis
          * @apioption xAxis.events.pointInBreak
          */
-        /**
-         * An event fired when a point is outside a break after zoom.
-         *
-         * @type      {Highcharts.AxisPointBreakEventCallbackFunction}
-         * @product   highcharts highstock gantt
-         * @context   Highcharts.Axis
-         * @apioption xAxis.events.pointBreakOut
-         */
         /**
          * Fires when the minimum and maximum is set for the axis, either by
          * calling the `.setExtremes()` method or by selecting an area in the
@@ -1767,6 +1759,10 @@ var AxisDefaults;
          * overrides the default behaviour of [tickPixelInterval](
          * #xAxis.tickPixelInterval) and [tickInterval](#xAxis.tickInterval).
          *
+         * Note: When working with date-time axes, be aware of time zone
+         * handling. See the [documentation on time options](https://www.highcharts.com/docs/chart-concepts/axes#datetime)
+         * for best practices.
+         *
          * @see [tickPositioner](#xAxis.tickPositioner)
          *
          * @sample {highcharts} highcharts/xaxis/tickpositions-tickpositioner/
@@ -2854,6 +2850,7 @@ var AxisDefaults;
          * @default {highcharts} Values
          * @default {highstock} undefined
          * @product highcharts highstock gantt
+         * @apioption yAxis.title.text
          */
         },
         /**

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

@@ -66,7 +66,8 @@ var BrokenAxis;
      */
     function onAxisAfterSetOptions() {
         const axis = this;
-        if (axis.brokenAxis?.hasBreaks) {
+        // Too early for axis.brokenAxis?.hasBreaks.
+        if (Object.keys(axis.options.breaks?.[0] || {}).length) {
             axis.options.ordinal = false;
         }
     }
@@ -138,24 +139,9 @@ var BrokenAxis;
                 threshold = axis.isXAxis ?
                     axis.min :
                     pick(series.options.threshold, axis.min);
-                // Array of breaks that have been "zoomed-out" which means that
-                // they were shown previously, but now after zoom, they are not
-                // (#19885).
-                const breaksOutOfRange = axis?.options?.breaks?.filter(function (brk) {
-                    let isOut = true;
-                    // Iterate to see if "brk" is in axis range
-                    for (let i = 0; i < breaks.length; i++) {
-                        const otherBreak = breaks[i];
-                        if (otherBreak.from === brk.from &&
-                            otherBreak.to === brk.to) {
-                            isOut = false;
-                            break;
-                        }
-                    }
-                    return isOut;
-                });
                 points.forEach(function (point) {
-                    y = pick(point['stack' + key.toUpperCase()], point[key]);
+                    y = point['stack' + key.toUpperCase()] ??
+                        point[key];
                     breaks.forEach(function (brk) {
                         if (isNumber(threshold) && isNumber(y)) {
                             let eventName = '';
@@ -175,9 +161,6 @@ var BrokenAxis;
                             }
                         }
                     });
-                    breaksOutOfRange?.forEach(function (brk) {
-                        fireEvent(axis, 'pointOutsideOfBreak', { point, brk });
-                    });
                 });
             });
         }
@@ -332,23 +315,39 @@ var BrokenAxis;
          * @private
          */
         static lin2Val(val) {
-            const axis = this;
-            const brokenAxis = axis.brokenAxis;
-            const breakArray = brokenAxis?.breakArray;
-            if (!breakArray || !isNumber(val)) {
+            const axis = this, threshold = axis.min || 0, brokenAxis = axis.brokenAxis, breakArray = brokenAxis?.breakArray;
+            if (!breakArray?.length || !isNumber(val)) {
                 return val;
             }
-            let nval = val, brk, i;
-            for (i = 0; i < breakArray.length; i++) {
-                brk = breakArray[i];
-                if (brk.from >= nval) {
-                    break;
-                }
-                else if (brk.to < nval) {
-                    nval += brk.len;
+            let nval = val;
+            // Axis min is the anchor point. Above it, break gaps impact the
+            // result differently than below.
+            if (val > threshold) {
+                for (const brk of breakArray) {
+                    if (brk.from > nval) {
+                        // Skip all breaks after the nval.
+                        break;
+                    }
+                    else if (brk.to <= nval && brk.to > threshold) {
+                        nval += brk.len;
+                    }
+                    else if (Additions.isInBreak(brk, nval)) {
+                        nval += brk.len;
+                    }
                 }
-                else if (Additions.isInBreak(brk, nval)) {
-                    nval += brk.len;
+            }
+            else if (val < threshold) {
+                for (const brk of breakArray) {
+                    if (brk.from > threshold) {
+                        // Skip all breaks above the threshold.
+                        break;
+                    }
+                    else if (brk.from >= nval && brk.from < threshold) {
+                        nval -= brk.len;
+                    }
+                    else if (Additions.isInBreak(brk, nval)) {
+                        nval -= brk.len;
+                    }
                 }
             }
             return nval;
@@ -357,24 +356,41 @@ var BrokenAxis;
          * @private
          */
         static val2Lin(val) {
-            const axis = this;
-            const brokenAxis = axis.brokenAxis;
-            const breakArray = brokenAxis?.breakArray;
-            if (!breakArray || !isNumber(val)) {
+            const axis = this, threshold = axis.min || 0, brokenAxis = axis.brokenAxis, breakArray = brokenAxis?.breakArray;
+            if (!breakArray?.length || !isNumber(val)) {
                 return val;
             }
-            let nval = val, brk, i;
-            for (i = 0; i < breakArray.length; i++) {
-                brk = breakArray[i];
-                if (brk.to <= val) {
-                    nval -= brk.len;
-                }
-                else if (brk.from >= val) {
-                    break;
+            let nval = val;
+            // Axis min is the anchor point. Above it, break gaps impact the
+            // result differently than below.
+            if (val > threshold) {
+                for (const brk of breakArray) {
+                    if (brk.to <= val && brk.to > threshold) {
+                        nval -= brk.len;
+                    }
+                    else if (brk.from > val) {
+                        // Skip all breaks after the val.
+                        break;
+                    }
+                    else if (Additions.isInBreak(brk, val)) {
+                        nval -= (val - brk.from);
+                        break;
+                    }
                 }
-                else if (Additions.isInBreak(brk, val)) {
-                    nval -= (val - brk.from);
-                    break;
+            }
+            else if (val < threshold) {
+                for (const brk of breakArray) {
+                    if (brk.from >= val && brk.from < threshold) {
+                        nval += brk.len;
+                    }
+                    else if (brk.from > threshold) {
+                        // Skip all breaks before the threshold.
+                        break;
+                    }
+                    else if (Additions.isInBreak(brk, val)) {
+                        nval += (brk.to - val);
+                        break;
+                    }
                 }
             }
             return nval;
@@ -385,7 +401,6 @@ var BrokenAxis;
          *
          * */
         constructor(axis) {
-            this.hasBreaks = false;
             this.axis = axis;
         }
         /* *
@@ -451,9 +466,8 @@ var BrokenAxis;
          */
         setBreaks(breaks, redraw) {
             const brokenAxis = this, axis = brokenAxis.axis, time = axis.chart.time, hasBreaks = isArray(breaks) &&
-                !!breaks.length &&
-                !!Object.keys(breaks[0]).length; // Check for [{}], #16368.
-            axis.isDirty = brokenAxis.hasBreaks !== hasBreaks;
+                !!Object.keys(breaks?.[0] || {}).length;
+            axis.isDirty = (brokenAxis.hasBreaks ?? false) !== hasBreaks;
             brokenAxis.hasBreaks = hasBreaks;
             // Compile string dates
             breaks?.forEach((brk) => {
@@ -480,8 +494,9 @@ var BrokenAxis;
                 axis.setExtremes = function (newMin, newMax, redraw, animation, eventArguments) {
                     // If trying to set extremes inside a break, extend min to
                     // after, and max to before the break ( #3857 )
-                    if (brokenAxis.hasBreaks) {
-                        const breaks = (this.options.breaks || []);
+                    // but not for gantt (#13898);
+                    if (brokenAxis.hasBreaks && !axis.treeGrid?.tree) {
+                        const breaks = (this.brokenAxis.breakArray || []);
                         let axisBreak;
                         while ((axisBreak = brokenAxis.findBreakAt(newMin, breaks))) {
                             newMin = axisBreak.to;
@@ -500,49 +515,54 @@ var BrokenAxis;
                     axis.constructor.prototype.setAxisTranslation.call(this);
                     brokenAxis.unitLength = void 0;
                     if (brokenAxis.hasBreaks) {
-                        const breaks = axis.options.breaks || [], 
-                        // Temporary one:
-                        breakArrayT = [], breakArray = [], pointRangePadding = pick(axis.pointRangePadding, 0);
-                        let length = 0, inBrk, repeat, min = axis.userMin || axis.min, max = axis.userMax || axis.max, start, i;
-                        // Min & max check (#4247)
-                        breaks.forEach(function (brk) {
-                            repeat = brk.repeat || Infinity;
-                            if (isNumber(min) && isNumber(max)) {
-                                if (Additions.isInBreak(brk, min)) {
-                                    min += ((brk.to % repeat) -
-                                        (min % repeat));
-                                }
-                                if (Additions.isInBreak(brk, max)) {
-                                    max -= ((max % repeat) -
-                                        (brk.from % repeat));
+                        const breaks = axis.options.breaks || [], breakArrayTemp = [], breakArray = [], pointRangePadding = axis.pointRangePadding ?? 0;
+                        let length = 0, inBrk, repeat, min = axis.userMin ?? axis.min, max = axis.userMax ?? axis.max, dataMin = axis.dataMin ?? min, dataMax = axis.dataMax ?? max, start, i;
+                        if (isNumber(axis.threshold)) {
+                            dataMin = Math.min(dataMin ?? axis.threshold, axis.threshold);
+                            dataMax = Math.max(dataMax ?? axis.threshold, axis.threshold);
+                        }
+                        // Min & max check (#4247) but not for gantt (#13898)
+                        if (!axis.treeGrid?.tree) {
+                            breaks.forEach(function (brk) {
+                                repeat = brk.repeat || Infinity;
+                                if (isNumber(min) && isNumber(max)) {
+                                    if (Additions.isInBreak(brk, min)) {
+                                        min += ((brk.to % repeat) -
+                                            (min % repeat));
+                                    }
+                                    if (Additions.isInBreak(brk, max)) {
+                                        max -= ((max % repeat) -
+                                            (brk.from % repeat));
+                                    }
                                 }
-                            }
-                        });
+                            });
+                        }
                         // Construct an array holding all breaks in the axis
-                        breaks.forEach(function (brk) {
-                            start = brk.from;
-                            repeat = brk.repeat || Infinity;
-                            if (isNumber(min) && isNumber(max)) {
-                                while (start - repeat > min) {
+                        // for the current data range.
+                        if (isNumber(dataMin) && isNumber(dataMax)) {
+                            breaks.forEach(function (brk) {
+                                start = brk.from;
+                                repeat = brk.repeat || Infinity;
+                                while (start - repeat > dataMin) {
                                     start -= repeat;
                                 }
-                                while (start < min) {
+                                while (start < dataMin) {
                                     start += repeat;
                                 }
-                                for (i = start; i < max; i += repeat) {
-                                    breakArrayT.push({
+                                for (i = start; i < dataMax; i += repeat) {
+                                    breakArrayTemp.push({
                                         value: i,
                                         move: 'in'
                                     });
-                                    breakArrayT.push({
+                                    breakArrayTemp.push({
                                         value: i + brk.to - brk.from,
                                         move: 'out',
                                         size: brk.breakSize
                                     });
                                 }
-                            }
-                        });
-                        breakArrayT.sort(function (a, b) {
+                            });
+                        }
+                        breakArrayTemp.sort(function (a, b) {
                             return ((a.value === b.value) ?
                                 ((a.move === 'in' ? 0 : 1) -
                                     (b.move === 'in' ? 0 : 1)) :
@@ -550,8 +570,8 @@ var BrokenAxis;
                         });
                         // Simplify the breaks
                         inBrk = 0;
-                        start = min;
-                        breakArrayT.forEach(function (brk) {
+                        start = dataMin;
+                        breakArrayTemp.forEach((brk) => {
                             inBrk += (brk.move === 'in' ? 1 : -1);
                             if (inBrk === 1 && brk.move === 'in') {
                                 start = brk.value;
@@ -562,9 +582,13 @@ var BrokenAxis;
                                     to: brk.value,
                                     len: brk.value - start - (brk.size || 0)
                                 });
-                                length += (brk.value -
-                                    start -
-                                    (brk.size || 0));
+                                if (isNumber(min) && isNumber(max) &&
+                                    start < max && brk.value > min) {
+                                    // Sum break gaps in the visible range
+                                    length += (brk.value -
+                                        start -
+                                        (brk.size || 0));
+                                }
                             }
                         });
                         brokenAxis.breakArray = breakArray;

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

@@ -83,7 +83,7 @@ class ColorAxis extends Axis {
             userOptions.layout !== 'vertical' :
             legend.layout !== 'vertical';
         axis.side = userOptions.side || horiz ? 2 : 1;
-        axis.reversed = userOptions.reversed || !horiz;
+        axis.reversed = userOptions.reversed;
         axis.opposite = !horiz;
         super.init(chart, userOptions, 'colorAxis');
         // `super.init` saves the extended user options, now replace it with the
@@ -189,9 +189,9 @@ class ColorAxis extends Axis {
             // First time only
             if (!axis.added) {
                 axis.added = true;
-                axis.labelLeft = 0;
-                axis.labelRight = axis.width;
             }
+            axis.labelLeft = 0;
+            axis.labelRight = axis.width;
             // Reset it to avoid color axis reserving space
             axis.chart.axisOffset[axis.side] = sideOffset;
         }

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

@@ -396,11 +396,10 @@ const colorAxisDefaults = {
      */
     /**
      * Whether to reverse the axis so that the highest number is closest
-     * to the origin. Defaults to `false` in a horizontal legend and
-     * `true` in a vertical legend, where the smallest value starts on
-     * top.
+     * to the origin. Defaults to `false`.
      *
      * @type      {boolean}
+     * @default   false
      * @product   highcharts highstock highmaps
      * @apioption colorAxis.reversed
      */