highcharts 13.0.2 → 13.1.0

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

@@ -22,7 +22,7 @@ const { registerEventOptions } = F;
 import H from '../Globals.js';
 const { deg2rad } = H;
 import Tick from './Tick.js';
-import { arrayMax, arrayMin, clamp, correctFloat, defined, destroyObjectProperties, erase, extend, fireEvent, getClosestDistance, isArray, isNumber, isString, merge, normalizeTickInterval, objectEach, relativeLength, removeEvent, splat, syncTimeout } from '../../Shared/Utilities.js';
+import { arrayMax, arrayMin, clamp, correctFloat, defined, destroyObjectProperties, erase, extend, find, fireEvent, getClosestDistance, isArray, isNumber, isString, merge, normalizeTickInterval, objectEach, relativeLength, removeEvent, splat, syncTimeout } from '../../Shared/Utilities.js';
 import { error, insertItem } from '../Utilities.js';
 const getNormalizedTickInterval = (axis, tickInterval) => normalizeTickInterval(tickInterval, void 0, void 0, (axis.options.allowDecimals ?? (tickInterval < 0.5 || axis.tickAmount !== void 0)), !!axis.tickAmount);
 extend(defaultOptions, { xAxis, yAxis: merge(xAxis, yAxis) });
@@ -64,6 +64,11 @@ extend(defaultOptions, { xAxis, yAxis: merge(xAxis, yAxis) });
  * Axis options
  */
 class Axis {
+    /* *
+     *
+     *  Static Properties
+     *
+     * */
     /* *
      *
      *  Constructors
@@ -140,9 +145,11 @@ class Axis {
          * @name Highcharts.Axis#side
          * @type {number}
          */
-        axis.side = (userOptions.side ?? axis.side ?? (horiz ?
-            (axis.opposite ? 0 : 2) : // Top : bottom
-            (axis.opposite ? 1 : 3)));
+        axis.side = userOptions.side ??
+            (horiz ?
+                (axis.opposite ? 0 : 2) : // Top : bottom
+                (axis.opposite ? 1 : 3) // Right : left
+            );
         /**
          * Current options for the axis after merge of defaults and user's
          * options.
@@ -153,8 +160,8 @@ class Axis {
         axis.setOptions(userOptions);
         const options = axis.options, labelsOptions = options.labels;
         // Set the type and fire an event
-        axis.type ?? (axis.type = options.type || 'linear');
-        axis.uniqueNames ?? (axis.uniqueNames = options.uniqueNames ?? true);
+        axis.type = options.type || 'linear';
+        axis.uniqueNames = options.uniqueNames ?? true;
         fireEvent(axis, 'afterSetType');
         /**
          * User's options for this axis without defaults.
@@ -171,7 +178,7 @@ class Axis {
          * @name Highcharts.Axis#reversed
          * @type {boolean}
          */
-        axis.reversed = (options.reversed ?? axis.reversed);
+        axis.reversed = options.reversed;
         axis.visible = options.visible;
         axis.zoomEnabled = options.zoomEnabled;
         // Initial categories
@@ -193,16 +200,12 @@ class Axis {
          */
         axis.categories = (isArray(options.categories) && options.categories) ||
             (axis.hasNames ? [] : void 0);
-        // Axis names and its map for quick access. Backwards mapping is much
-        // faster than array searching (#7725). Preserve on update (#3830)
-        axis.names || (axis.names = []);
+        axis.names || (axis.names = []); // Preserve on update (#3830)
         axis.namesMap || (axis.namesMap = {});
         // Placeholder for plotLines and plotBands groups
-        axis.plotLinesAndBandsGroups = {};
+        axis.plotLinesAndBandsGroups || (axis.plotLinesAndBandsGroups = {});
         // Shorthand types
         axis.positiveValuesOnly = !!axis.logarithmic;
-        // Flag, if axis is linked to another axis
-        axis.isLinked = defined(options.linkedTo);
         /**
          * List of major ticks mapped by position on axis.
          *
@@ -211,8 +214,8 @@ class Axis {
          * @name Highcharts.Axis#ticks
          * @type {Highcharts.Dictionary<Highcharts.Tick>}
          */
-        axis.ticks = {};
-        axis.labelEdge = [];
+        axis.ticks || (axis.ticks = {});
+        axis.labelEdge || (axis.labelEdge = []);
         /**
          * List of minor ticks mapped by position on the axis.
          *
@@ -221,11 +224,9 @@ class Axis {
          * @name Highcharts.Axis#minorTicks
          * @type {Highcharts.Dictionary<Highcharts.Tick>}
          */
-        axis.minorTicks = {};
-        // List of plotLines/Bands
-        axis.plotLinesAndBands = [];
+        axis.minorTicks || (axis.minorTicks = {});
         // Alternate bands
-        axis.alternateBands = {};
+        axis.alternateBands || (axis.alternateBands = {});
         /**
          * The length of the axis in terms of pixels.
          *
@@ -259,7 +260,7 @@ class Axis {
          * @name Highcharts.Axis#crosshair
          * @type {boolean|Highcharts.AxisCrosshairOptions}
          */
-        const crosshair = options.crosshair ?? splat(chart.options.tooltip.crosshairs)[isXAxis ? 0 : 1];
+        const crosshair = options.crosshair ?? splat(chart.options.tooltip?.crosshairs)[isXAxis ? 0 : 1];
         axis.crosshair = crosshair === true ? {} : crosshair;
         // Register. Don't add it again on Axis.update().
         if (chart.axes.indexOf(axis) === -1) { //
@@ -314,14 +315,14 @@ class Axis {
                 },
                 margin: 15
             } :
-            // Left and right axis, title rotated 90 or 270 degrees
+            // Left and right axis, title rotated -90 or 90 degrees
             // respectively
             {
                 labels: {
                     padding: 1
                 },
                 title: {
-                    rotation: 90 * this.side
+                    rotation: this.side === 1 ? 90 : -90
                 }
             };
         this.options = merge(sideSpecific, 
@@ -535,6 +536,9 @@ class Axis {
             if (!axis.isRadial) {
                 returnValue = correctFloat(returnValue);
             }
+            if (Math.abs(returnValue) < 1e-9) {
+                returnValue = 0;
+            }
         }
         return returnValue;
     }
@@ -590,7 +594,7 @@ class Axis {
      * The SVG path definition for the plot line.
      */
     getPlotLinePath(options) {
-        const axis = this, chart = axis.chart, axisLeft = axis.left, axisTop = axis.top, old = options.old, value = options.value, lineWidth = options.lineWidth, cHeight = (old && chart.oldChartHeight) || chart.chartHeight, cWidth = (old && chart.oldChartWidth) || chart.chartWidth, transB = axis.transB;
+        const axis = this, { chart, left, top, transB } = axis, { lineWidth, old, value } = options, horiz = (old ? axis.old?.horiz : void 0) ?? axis.horiz, cHeight = (old && chart.oldChartHeight) || chart.chartHeight, cWidth = (old && chart.oldChartWidth) || chart.chartWidth;
         let translatedValue = options.translatedValue, force = options.force, x1, y1, x2, y2, skip;
         // eslint-disable-next-line valid-jsdoc
         /**
@@ -628,17 +632,17 @@ class Axis {
                 skip = true;
                 force = false; // #7175, don't force it when path is invalid
             }
-            else if (axis.horiz) {
-                y1 = axisTop;
+            else if (horiz) {
+                y1 = top;
                 y2 = cHeight - axis.bottom + (axis.options.isInternal ?
                     0 :
                     (chart.scrollablePixelsY || 0)); // #20354, scrollablePixelsY shouldn't be used for navigator
-                x1 = x2 = between(x1, axisLeft, axisLeft + axis.width);
+                x1 = x2 = between(x1, left, left + axis.width);
             }
             else {
-                x1 = axisLeft;
+                x1 = left;
                 x2 = cWidth - axis.right + (chart.scrollablePixelsX || 0);
-                y1 = y2 = between(y1, axisTop, axisTop + axis.height);
+                y1 = y2 = between(y1, top, top + axis.height);
             }
             e.path = skip && !force ?
                 void 0 :
@@ -1067,7 +1071,7 @@ class Axis {
      * @emits Highcharts.Axis#event:foundExtremes
      */
     setTickInterval(secondPass) {
-        const axis = this, { categories, chart, dataMax, dataMin, dateTime, isXAxis, logarithmic, options, softThreshold } = axis, time = chart.time, threshold = isNumber(axis.threshold) ? axis.threshold : void 0, minRange = axis.minRange || 0, { ceiling, floor, linkedTo, softMax, softMin } = options, linkedParent = isNumber(linkedTo) && chart[axis.coll]?.[linkedTo], tickPixelIntervalOption = options.tickPixelInterval;
+        const axis = this, { categories, chart, dataMax, dataMin, dateTime, isXAxis, logarithmic, options, softThreshold } = axis, time = chart.time, threshold = isNumber(axis.threshold) ? axis.threshold : void 0, minRange = axis.minRange || 0, { ceiling, floor, softMax, softMin } = options, linkedParent = axis.linkedParent, tickPixelIntervalOption = options.tickPixelInterval;
         let maxPadding = options.maxPadding, minPadding = options.minPadding, range = 0, linkedParentExtremes, 
         // Only non-negative tickInterval is valid, #12961
         tickIntervalOption = isNumber(options.tickInterval) && options.tickInterval >= 0 ?
@@ -1080,7 +1084,6 @@ class Axis {
         hardMax = (axis.userMax ?? time.parse(options.max));
         // Linked axis gets the extremes from the parent axis
         if (linkedParent) {
-            axis.linkedParent = linkedParent;
             linkedParentExtremes = linkedParent.getExtremes();
             axis.min =
                 linkedParentExtremes.min ?? linkedParentExtremes.dataMin;
@@ -1390,7 +1393,7 @@ class Axis {
         // Reset min/max or remove extremes based on start/end on tick
         this.paddedTicks = tickPositions.slice(0); // Used for logarithmic minor
         this.trimTicks(tickPositions, startOnTick, endOnTick);
-        if (!this.isLinked && isNumber(this.min) && isNumber(this.max)) {
+        if (!this.linkedParent && isNumber(this.min) && isNumber(this.max)) {
             // Subtract half a unit (#2619, #2846, #2515, #3390), but not in
             // case of multiple ticks (#6897)
             if (this.single &&
@@ -1425,7 +1428,7 @@ class Axis {
     trimTicks(tickPositions, startOnTick, endOnTick) {
         const roundedMin = tickPositions[0], roundedMax = tickPositions[tickPositions.length - 1], minPointOffset = (!this.isOrdinal && this.minPointOffset) || 0; // (#12716)
         fireEvent(this, 'trimTicks');
-        if (!this.isLinked ||
+        if (!this.linkedParent ||
             // Linked non-grid axes should trim ticks, #21743.
             // Grid axis has custom handling of ticks.
             !this.grid) {
@@ -1699,7 +1702,15 @@ class Axis {
      * @emits Highcharts.Axis#event:afterSetScale
      */
     setScale() {
-        const axis = this, { coll, stacking } = axis;
+        const axis = this, { chart, coll, options, stacking } = axis, { linkedTo } = options, axes = chart[coll] || [], index = axes.indexOf(axis), parent = isString(linkedTo) ?
+            find(axes, (a) => a.options.id === linkedTo) :
+            (isNumber(linkedTo) ? axes[linkedTo] : void 0), linkedParent = axis.linkedParent =
+            parent === axis ? void 0 : parent;
+        // Scale a later-ordered parent first so its extremes are ready. Skip
+        // grid column axes, which live outside the collection (#24658).
+        if (linkedParent && index > -1 && axes.indexOf(linkedParent) > index) {
+            linkedParent.setScale();
+        }
         let isDirtyData = false, isXAxisDirty = false;
         axis.series.forEach((series) => {
             isDirtyData = isDirtyData || series.isDirtyData || series.isDirty;
@@ -1716,7 +1727,7 @@ class Axis {
         if (isDirtyAxisLength ||
             isDirtyData ||
             isXAxisDirty ||
-            axis.isLinked ||
+            axis.linkedParent ||
             axis.forceRedraw ||
             axis.userMin !== axis.old?.userMin ||
             axis.userMax !== axis.old?.userMax ||
@@ -2078,7 +2089,7 @@ class Axis {
     renderUnsquish() {
         const chart = this.chart, renderer = chart.renderer, tickPositions = this.tickPositions, ticks = this.ticks, labelOptions = this.options.labels, labelStyleOptions = labelOptions.style, horiz = this.horiz, slotWidth = this.getSlotWidth(), innerWidth = Math.max(1, Math.round(slotWidth - (horiz ?
             2 * (labelOptions.padding || 0) :
-            labelOptions.distance || 0 // #21172
+            labelOptions.distance ?? 15 // #21172
         ))), attr = {}, labelMetrics = this.labelMetrics(), lineClampOption = labelStyleOptions.lineClamp;
         let commonWidth, lineClamp = lineClampOption ?? (Math.floor(this.len / (tickPositions.length * labelMetrics.h)) || 1), maxLabelLength = 0;
         // Set rotation option unless it is "auto", like in gauges
@@ -2158,7 +2169,6 @@ class Axis {
                         });
                     }
                 }
-                tick.rotation = attr.rotation;
             }
         }, this);
         // Note: Why is this not part of getLabelPosition?
@@ -2190,46 +2200,50 @@ class Axis {
      * Whether or not to display the title.
      */
     addTitle(display) {
-        const axis = this, renderer = axis.chart.renderer, horiz = axis.horiz, opposite = axis.opposite, options = axis.options, axisTitleOptions = options.title, styledMode = axis.chart.styledMode;
-        let textAlign;
-        if (!axis.axisTitle) {
-            textAlign = axisTitleOptions.textAlign;
-            if (!textAlign) {
-                textAlign = (horiz ? {
-                    low: 'left',
-                    middle: 'center',
-                    high: 'right'
-                } : {
-                    low: opposite ? 'right' : 'left',
-                    middle: 'center',
-                    high: opposite ? 'left' : 'right'
-                })[axisTitleOptions.align];
-            }
-            axis.axisTitle = renderer
-                .text(axisTitleOptions.text || '', 0, 0, axisTitleOptions.useHTML)
-                .attr({
-                zIndex: 7,
-                rotation: axisTitleOptions.rotation || 0,
-                align: textAlign
-            })
+        const axis = this, renderer = axis.chart.renderer, horiz = axis.horiz, opposite = axis.opposite, options = axis.options, axisTitleOptions = options.title, styledMode = axis.chart.styledMode, textAlign = axisTitleOptions.textAlign ||
+            (horiz ? {
+                low: 'left',
+                middle: 'center',
+                high: 'right'
+            } : {
+                low: opposite ? 'right' : 'left',
+                middle: 'center',
+                high: opposite ? 'left' : 'right'
+            })[axisTitleOptions.align], attr = {
+            text: axisTitleOptions.text || '',
+            zIndex: 7,
+            align: textAlign
+        }, animatable = {
+            rotation: axisTitleOptions.rotation || 0
+        };
+        let axisTitle = axis.axisTitle;
+        if (!axisTitle) {
+            axisTitle = renderer
+                .text('', 0, 0, axisTitleOptions.useHTML)
+                .attr(extend(attr, animatable))
                 .addClass('highcharts-axis-title');
-            // #7814, don't mutate style option
-            if (!styledMode) {
-                axis.axisTitle.css(merge(axisTitleOptions.style));
-            }
-            axis.axisTitle.add(axis.axisGroup);
-            axis.axisTitle.isNew = true;
-        }
-        // Max width defaults to the length of the axis
-        if (!styledMode &&
-            !axisTitleOptions.style.width &&
-            !axis.isRadial) {
-            axis.axisTitle.css({
-                width: axis.len + 'px'
-            });
+            axisTitle.add(axis.axisGroup);
+            axisTitle.isNew = true;
+        }
+        else {
+            axisTitle
+                .attr(attr)
+                .animate(animatable);
+        }
+        if (!styledMode) {
+            // #7814, don't mutate the style option
+            const css = merge(axisTitleOptions.style);
+            // Max width defaults to the length of the axis
+            if (!axisTitleOptions.style.width &&
+                !axis.isRadial) {
+                css.width = axis.len + 'px';
+            }
+            axisTitle.css(css);
         }
         // Hide or show the title depending on whether showEmpty is set
-        axis.axisTitle[display ? 'show' : 'hide'](display);
+        axisTitle[display ? 'show' : 'hide'](display);
+        // Register
+        axis.axisTitle = axisTitle;
     }
     /**
      * Generates a tick for initial positioning.
@@ -2257,17 +2271,18 @@ class Axis {
     createGroups() {
         const { axisParent, // Used in color axis
         chart, coll, options } = this, renderer = chart.renderer;
-        const createGroup = (name, suffix, zIndex) => renderer.g(name)
-            .attr({ zIndex })
+        const createGroup = (name, suffix) => renderer.g(name)
             .addClass(`highcharts-${coll.toLowerCase()}${suffix} ` +
             (this.isRadial ? `highcharts-radial-axis${suffix} ` : '') +
             (options.className || ''))
             .add(axisParent);
-        if (!this.axisGroup) {
-            this.gridGroup = createGroup('grid', '-grid', options.gridZIndex).clip(this.clippable ? chart.plotClipInner : void 0);
-            this.axisGroup = createGroup('axis', '', options.zIndex);
-            this.labelGroup = createGroup('axis-labels', '-labels', options.labels.zIndex);
-        }
+        (this.axisGroup || (this.axisGroup = createGroup('axis', '')))
+            .attr({ zIndex: options.zIndex });
+        (this.gridGroup || (this.gridGroup = createGroup('grid', '-grid')))
+            .clip(this.clippable ? chart.plotClipInner : void 0)
+            .attr({ zIndex: options.gridZIndex });
+        (this.labelGroup || (this.labelGroup = createGroup('axis-labels', '-labels')))
+            .attr({ zIndex: options.labels.zIndex });
     }
     /**
      * Shuffle existing category ticks, like in bar race chart
@@ -2275,8 +2290,11 @@ class Axis {
      * @internal
      */
     shuffleTicks() {
-        const ticks = this.ticks, oldNames = this.old?.names;
-        if (this.type === 'category' && oldNames) {
+        const ticks = this.ticks, oldNames = this.old?.names, hasDuplicates = (arr) => new Set(arr).size !== arr.length;
+        if (this.type === 'category' &&
+            oldNames &&
+            !hasDuplicates(oldNames) &&
+            !hasDuplicates(this.names)) {
             oldNames.forEach((name, oldPos) => {
                 const pos = this.namesMap[name];
                 if (defined(pos) && oldPos !== pos) {
@@ -2318,7 +2336,7 @@ class Axis {
      * @emits Highcharts.Axis#event:afterGetOffset
      */
     getOffset() {
-        const axis = this, { chart, horiz, options, side, ticks, tickPositions, coll } = axis, hasData = axis.hasData(), axisTitleOptions = options.title, labelOptions = options.labels, hasCrossing = isNumber(options.crossing), axisOffset = chart.axisOffset, clipOffset = chart.clipOffset, directionFactor = [-1, 1, 1, -1][side];
+        const axis = this, { chart, horiz, options, side, ticks, tickPositions, coll } = axis, hasData = axis.hasData(), axisTitleOptions = options.title, labelOptions = options.labels, hasCrossing = isNumber(options.crossing), axisOffset = chart.axisOffset, clipOffset = chart.clipOffset, directionFactor = [-1, 1, 1, -1][side], distance = labelOptions.distance ?? 15;
         let tickRotCorr = axis.tickRotCorr || { x: 0, y: 0 }, absTickRotCorrX = 0, showAxis, titleOffset = 0, titleOffsetOption, titleMargin = 0, labelOffset = 0, // Reset
         labelOffsetPadded, lineHeightCorrection, reserveSpaceDefault;
         // For reuse in Axis.render
@@ -2326,7 +2344,7 @@ class Axis {
         // Set/reset staggerLines
         axis.staggerLines = (axis.horiz && labelOptions.staggerLines) || void 0;
         axis.createGroups();
-        if (hasData || axis.isLinked) {
+        if (hasData || axis.linkedParent) {
             // Shuffle existing category ticks
             axis.shuffleTicks();
             // Generate new ticks
@@ -2378,6 +2396,9 @@ class Axis {
                     axisTitleOptions.margin ?? (horiz ? 5 : 10);
             }
         }
+        else {
+            axis.axisTitle = axis.axisTitle?.destroy();
+        }
         // Render the axis line
         axis.renderLine();
         // Handle automatic or user set offset
@@ -2401,12 +2422,10 @@ class Axis {
             labelOffsetPadded -= lineHeightCorrection;
             labelOffsetPadded += directionFactor * (horiz ?
                 (labelOptions.y ??
-                    (tickRotCorr.y +
-                        directionFactor * labelOptions.distance)) :
+                    (tickRotCorr.y + directionFactor * distance)) :
                 (labelOptions.x ?? (reserveSpaceDefault ?
-                    directionFactor * (labelOptions.distance - absTickRotCorrX) :
-                    tickRotCorr.x +
-                        directionFactor * labelOptions.distance)));
+                    directionFactor * (distance - absTickRotCorrX) :
+                    tickRotCorr.x + directionFactor * distance)));
             if (!horiz &&
                 !reserveSpaceDefault &&
                 axis.labelAlign === 'center' &&
@@ -2420,8 +2439,8 @@ class Axis {
         // has rendered.
         if (coll !== 'colorAxis' && clipOffset) {
             const tickSize = this.tickSize('tick');
-            axisOffset[side] = Math.max(axisOffset[side], (axis.axisTitleMargin || 0) + titleOffset +
-                directionFactor * axis.offset, labelOffsetPadded, // #3027
+            axisOffset[side] = Math.max(axisOffset[side], Math.max((axis.axisTitleMargin || 0) + titleOffset, labelOffsetPadded) + directionFactor * axis.offset, // #6967
+            labelOffsetPadded, // #3027
             tickPositions?.length && tickSize ?
                 tickSize[0] + directionFactor * axis.offset :
                 0 // #4866
@@ -2483,18 +2502,20 @@ class Axis {
      * @function Highcharts.Axis#renderLine
      */
     renderLine() {
-        const { chart, offset = 0, options } = this;
+        const { chart, offset = 0, options } = this, verb = this.axisLine ? 'animate' : 'attr';
         this.axisLine || (this.axisLine = chart.renderer.path()
             .addClass('highcharts-axis-line')
-            .attr(chart.styledMode ? {} : {
-            stroke: options.lineColor,
-            'stroke-width': options.lineWidth,
-            zIndex: 7
-        })
+            .attr({ zIndex: 7 })
             .clip(this.clippable && offset <= 0 ?
             chart.plotClipOuter :
             void 0)
             .add(this.axisGroup));
+        if (!chart.styledMode) {
+            this.axisLine[verb]({
+                stroke: options.lineColor,
+                'stroke-width': options.lineWidth
+            });
+        }
     }
     /**
      * Position the axis title.
@@ -2579,9 +2600,9 @@ class Axis {
      * Whether the tick should animate in from last computed position
      */
     renderTick(pos, i, slideIn) {
-        const axis = this, isLinked = axis.isLinked, ticks = axis.ticks;
+        const axis = this, ticks = axis.ticks;
         // Linked axes need an extra check to find out if
-        if (!isLinked ||
+        if (!axis.linkedParent ||
             (pos >= axis.min && pos <= axis.max) ||
             axis.grid?.isColumn) {
             if (!ticks[pos]) {
@@ -2607,11 +2628,13 @@ class Axis {
      * @emits Highcharts.Axis#event:afterRender
      */
     render() {
-        const axis = this, chart = axis.chart, log = axis.logarithmic, renderer = chart.renderer, options = axis.options, isLinked = axis.isLinked, tickPositions = axis.tickPositions, axisTitle = axis.axisTitle, ticks = axis.ticks, minorTicks = axis.minorTicks, alternateBands = axis.alternateBands, stackLabelOptions = options.stackLabels, alternateGridColor = options.alternateGridColor, crossing = options.crossing, tickmarkOffset = axis.tickmarkOffset, axisLine = axis.axisLine, showAxis = axis.showAxis, animation = animObject(renderer.globalAnimation);
+        const axis = this, chart = axis.chart, log = axis.logarithmic, renderer = chart.renderer, options = axis.options, tickPositions = axis.tickPositions, axisTitle = axis.axisTitle, ticks = axis.ticks, minorTicks = axis.minorTicks, alternateBands = axis.alternateBands, alternateGridColor = options.alternateGridColor, crossing = options.crossing, tickmarkOffset = axis.tickmarkOffset, axisLine = axis.axisLine, showAxis = axis.showAxis, opacity = +axis.visible, animation = animObject(renderer.globalAnimation);
         let from, to;
         // Reset
         axis.labelEdge.length = 0;
         axis.overlap = false;
+        // Update z-indices
+        this.createGroups();
         // Mark all elements inActive before we go over and mark the active ones
         [ticks, minorTicks, alternateBands].forEach(function (coll) {
             objectEach(coll, function (tick) {
@@ -2630,7 +2653,7 @@ class Axis {
             }
         }
         // If the series has data draw the ticks. Else only the line and title
-        if (axis.hasData() || isLinked) {
+        if (axis.hasData() || axis.linkedParent) {
             const slideInTicks = axis.chart.hasRendered &&
                 axis.old && isNumber(axis.old.min);
             // Minor ticks
@@ -2668,8 +2691,10 @@ class Axis {
                             tickmarkOffset)) { // #2248, #4660
                         if (!alternateBands[pos]) {
                             // Should be imported from PlotLineOrBand.js, but
-                            // the dependency cycle with axis is a problem
-                            alternateBands[pos] = new H.PlotLineOrBand(axis, {});
+                            // the dependency cycle with axis is a problem. Try
+                            // moving it to the PlotLineOrBand axis composition
+                            // later.
+                            alternateBands[pos] = new H.PlotLineOrBand(axis, {}, 'plotBands');
                         }
                         from = pos + tickmarkOffset; // #949
                         alternateBands[pos].options = {
@@ -2683,17 +2708,13 @@ class Axis {
                     }
                 });
             }
-            // Custom plot lines and bands
-            if (!axis._addedPlotLB) { // Only first time
-                axis._addedPlotLB = true;
-                (options.plotLines || [])
-                    .concat(options.plotBands || [])
-                    .forEach(function (plotLineOptions) {
-                    axis
-                        .addPlotBandOrLine(plotLineOptions);
-                });
-            }
         } // End if hasData
+        // Render or update rendering of plot lines and bands
+        for (const coll of ['plotBands', 'plotLines']) {
+            for (const plotItem of this[coll]) {
+                plotItem.render();
+            }
+        }
         // Remove inactive ticks
         [ticks, minorTicks, alternateBands].forEach(function (coll) {
             const forDestruction = [], delay = animation.duration, destroyInactiveItems = function () {
@@ -2727,20 +2748,22 @@ class Axis {
         // Set the axis line path
         if (axisLine) {
             axisLine[axisLine.isPlaced ? 'animate' : 'attr']({
-                d: this.getLinePath(axisLine.strokeWidth())
+                d: this.getLinePath(axisLine.strokeWidth()),
+                opacity
             });
             axisLine.isPlaced = true;
             // Show or hide the line depending on options.showEmpty
             axisLine[showAxis ? 'show' : 'hide'](showAxis);
         }
         if (axisTitle && showAxis) {
-            axisTitle[axisTitle.isNew ? 'attr' : 'animate'](axis.getTitlePosition(axisTitle));
+            axisTitle[axisTitle.isNew ? 'attr' : 'animate']({
+                opacity,
+                ...axis.getTitlePosition(axisTitle)
+            });
             axisTitle.isNew = false;
         }
         // Stacked totals
-        if (stackLabelOptions?.enabled && axis.stacking) {
-            axis.stacking.renderStackTotals();
-        }
+        axis.stacking?.renderStackTotals();
         // First time, save the existing state
         if (!this.old) {
             this.saveOld();
@@ -2756,13 +2779,11 @@ class Axis {
      * @function Highcharts.Axis#redraw
      */
     redraw() {
-        if (this.visible) {
+        // If it was initially visible, but dynamically hidden, `this.axisGroup`
+        // exists. Then render with opacity 0.
+        if (this.visible || this.axisGroup) {
             // Render the axis
             this.render();
-            // Move plot lines and bands
-            this.plotLinesAndBands.forEach(function (plotLine) {
-                plotLine.render();
-            });
         }
         // Mark associated series as dirty and ready for redraw
         this.series.forEach(function (series) {
@@ -2776,6 +2797,7 @@ class Axis {
      */
     saveOld() {
         this.old = isNumber(this.min) ? {
+            horiz: this.horiz,
             len: this.len,
             max: this.max,
             min: this.min,
@@ -2785,64 +2807,37 @@ class Axis {
             userMin: this.userMin
         } : void 0;
     }
-    /**
-     * Returns an array of axis properties, that should be untouched during
-     * reinitialization.
-     *
-     * @internal
-     * @function Highcharts.Axis#getKeepProps
-     */
-    getKeepProps() {
-        return (this.keepProps || Axis.keepProps);
-    }
     /**
      * Destroys an Axis instance. See {@link Axis#remove} for the API endpoint
      * to fully remove the axis.
      *
      * @internal
      * @function Highcharts.Axis#destroy
-     *
-     * @param {boolean} [keepEvents]
-     * Whether to preserve events, used internally in Axis.update.
      */
-    destroy(keepEvents) {
-        const axis = this, plotLinesAndBands = axis.plotLinesAndBands, eventOptions = this.eventOptions;
-        fireEvent(this, 'destroy', { keepEvents: keepEvents });
+    destroy() {
+        fireEvent(this, 'destroy');
         // Remove the events
-        if (!keepEvents) {
-            removeEvent(axis);
-        }
+        removeEvent(this);
         // Destroy collections
-        [axis.ticks, axis.minorTicks, axis.alternateBands].forEach(function (coll) {
-            destroyObjectProperties(coll);
-        });
-        if (plotLinesAndBands) {
-            let i = plotLinesAndBands.length;
-            while (i--) { // #1975
-                plotLinesAndBands[i].destroy();
-            }
-        }
-        // Destroy elements
+        [
+            this.ticks,
+            this.minorTicks,
+            this.alternateBands,
+            this.plotBands,
+            this.plotLines,
+            this.plotLinesAndBandsGroups
+        ].forEach(destroyObjectProperties);
+        // Destroy elements and clear reference
         [
             'axisLine', 'axisTitle', 'axisGroup',
             'gridGroup', 'labelGroup', 'cross', 'scrollbar'
-        ].forEach(function (prop) {
-            if (axis[prop]) {
-                axis[prop] = axis[prop].destroy();
-            }
+        ].forEach((prop) => {
+            this[prop] = this[prop]?.destroy();
         });
-        // Destroy each generated group for plotLines and plotBands
-        for (const plotGroup in axis.plotLinesAndBandsGroups) { // eslint-disable-line guard-for-in
-            axis.plotLinesAndBandsGroups[plotGroup] =
-                axis.plotLinesAndBandsGroups[plotGroup].destroy();
-        }
         // Delete all properties and fall back to the prototype.
-        objectEach(axis, function (_val, key) {
-            if (axis.getKeepProps().indexOf(key) === -1) {
-                delete axis[key];
-            }
+        objectEach(this, (_val, key) => {
+            delete this[key];
         });
-        this.eventOptions = eventOptions;
     }
     /**
      * Internal function to draw a crosshair.
@@ -2936,25 +2931,21 @@ class Axis {
                         void 0 :
                         chart.plotClipInner)
                         .add();
-                    // Presentational attributes
-                    if (!chart.styledMode) {
-                        cross.attr({
-                            stroke: options.color ||
-                                (categorized ?
-                                    color(
-                                    // eslint-disable-next-line max-len
-                                    'var(--highcharts-highlight-color-20)').setOpacity(0.25).get() :
-                                    'var(--highcharts-neutral-color-20)'),
-                            'stroke-width': (options.width ?? 1)
-                        }).css({
-                            'pointer-events': 'none'
-                        });
-                        if (options.dashStyle) {
-                            cross.attr({
-                                dashstyle: options.dashStyle
-                            });
-                        }
-                    }
+                }
+                // Presentational attributes
+                if (!chart.styledMode) {
+                    cross
+                        .attr({
+                        stroke: options.color || (categorized ?
+                            color('var(--highcharts-highlight-color-20)').setOpacity(0.25).get() :
+                            'var(--highcharts-neutral-color-20)'),
+                        'stroke-width': options.width ?? 1,
+                        // Dash style must be after stroke-width
+                        dashstyle: options.dashStyle || 'Solid'
+                    })
+                        .css({
+                        'pointer-events': 'none'
+                    });
                 }
                 cross
                     .show()
@@ -2964,9 +2955,7 @@ class Axis {
                         'stroke-width': this.transA
                     });
                 }
-                if (this.cross) {
-                    this.cross.e = e;
-                }
+                cross.e = e;
             }, 
             // Only use delay if the crosshair is currently hidden
             (!graphic || graphic.attr('visibility') === 'hidden') ?
@@ -3005,13 +2994,14 @@ class Axis {
      * operations on the chart, it is a good idea to set redraw to false and
      * call {@link Chart#redraw} after.
      */
-    update(options, redraw) {
+    update(options = {}, redraw = true) {
         const chart = this.chart;
+        fireEvent(this, 'update', { options });
         options = merge(this.userOptions, options);
-        this.destroy(true);
+        this.isDirty = this.forceRedraw = true;
         this.init(chart, options);
         chart.isDirtyBox = true;
-        if (redraw ?? true) {
+        if (redraw) {
             chart.redraw();
         }
     }
@@ -3080,26 +3070,6 @@ class Axis {
         this.update({ categories: categories }, redraw);
     }
 }
-/* *
- *
- *  Static Properties
- *
- * */
-/**
- * Properties to survive after destroy, needed for Axis.update (#4317,
- * #5773, #5881).
- * @internal
- */
-Axis.keepProps = [
-    'coll',
-    'extKey',
-    'hcEvents',
-    'len',
-    'names',
-    'series',
-    'userMax',
-    'userMin'
-];
 /* *
  *
  *  Default Export