highcharts 13.0.2 → 13.1.0

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

@@ -31,14 +31,11 @@ class StackItem {
      *
      * */
     /** @internal */
-    constructor(axis, options, negativeValue, x, stackOption) {
-        const inverted = axis.chart.inverted, reversed = axis.reversed;
+    constructor(axis, negativeValue, x, stackOption) {
         this.axis = axis;
         // The stack goes to the left either if the stack has negative value
         // or when axis is reversed. XOR operator.
-        const isNegative = (this.isNegative = !!negativeValue !== !!reversed);
-        // Save the options to be able to style the label
-        this.options = options = options || {};
+        this.negativeValue = negativeValue;
         // Save the x value to be able to position the label later
         this.x = x;
         // Initialize total value
@@ -53,20 +50,6 @@ class StackItem {
         this.stack = stackOption;
         this.leftCliff = 0;
         this.rightCliff = 0;
-        // The align options and text align varies on whether the stack is
-        // negative and if the chart is inverted or not.
-        // First test the user supplied value, then use the dynamic.
-        this.alignOptions = {
-            align: options.align ||
-                (inverted ? (isNegative ? 'left' : 'right') : 'center'),
-            verticalAlign: options.verticalAlign ||
-                (inverted ? 'middle' : isNegative ? 'bottom' : 'top'),
-            y: options.y,
-            x: options.x
-        };
-        this.textAlign =
-            options.textAlign ||
-                (inverted ? (!isNegative ? 'left' : 'right') : 'center');
     }
     /* *
      *
@@ -82,39 +65,34 @@ class StackItem {
      * @internal
      */
     render(group) {
-        const chart = this.axis.chart, options = this.options, formatOption = options.format, 
+        const axis = this.axis, chart = axis.chart, options = axis.options.stackLabels || {}, formatOption = options.format, 
         // Format the text in the label.
-        str = (formatOption ?
+        text = (formatOption ?
             format(formatOption, this, chart) :
-            options.formatter?.call(this, this)) || '';
-        // Change the text to reflect the new total and set visibility to hidden
-        // in case the series is hidden
-        if (this.label) {
-            this.label.attr({ text: str, visibility: 'hidden' });
+            options.formatter?.call(this, this)) || '', verb = this.label ? 'animate' : 'attr';
+        // Create new label
+        this.label || (this.label = chart.renderer.label(text, 0, void 0, options.shape, void 0, void 0, options.useHTML, false, 'stack-labels'));
+        const label = this.label, animatableAttribs = {
+            r: options.borderRadius || 0,
+            // Set default padding to 5 as it is in dataLabels #12308
+            padding: (options.padding ?? 5)
+        };
+        if (!chart.styledMode) {
+            animatableAttribs.fill = options.backgroundColor;
+            animatableAttribs.stroke = options.borderColor;
+            animatableAttribs['stroke-width'] = options.borderWidth;
+            label.css(options.style || {});
         }
-        else {
-            // Create new label
-            this.label = chart.renderer.label(str, null, void 0, options.shape, void 0, void 0, options.useHTML, false, 'stack-labels');
-            const attr = {
-                r: options.borderRadius || 0,
-                text: str,
-                // Set default padding to 5 as it is in dataLabels #12308
-                padding: (options.padding ?? 5),
-                visibility: 'hidden' // Hidden until setOffset is called
-            };
-            if (!chart.styledMode) {
-                attr.fill = options.backgroundColor;
-                attr.stroke = options.borderColor;
-                attr['stroke-width'] = options.borderWidth;
-                this.label.css(options.style || {});
-            }
-            this.label.attr(attr);
-            if (!this.label.added) {
-                this.label.add(group); // Add to the labels-group
-            }
+        label
+            .attr({
+            text,
+            visibility: 'hidden' // Hidden until setOffset is called
+        })[verb](animatableAttribs);
+        if (!label.added) {
+            label.add(group); // Add to the labels-group
         }
         // Rank it higher than data labels (#8742)
-        this.label.labelrank = chart.plotSizeY;
+        label.labelrank = chart.plotSizeY;
         fireEvent(this, 'afterRender');
     }
     /**
@@ -123,35 +101,38 @@ class StackItem {
      * @internal
      */
     setOffset(xOffset, width, boxBottom, boxTop, defaultX, xAxis) {
-        const { alignOptions, axis, label, options, textAlign } = this, chart = axis.chart, stackBox = this.getStackBox({
-            xOffset,
-            width,
+        const { axis, label } = this, chart = axis.chart, options = axis.options.stackLabels || {}, inverted = chart.inverted, isNegative = this.negativeValue !== !!axis.reversed, stackBox = this.getStackBox({
             boxBottom,
             boxTop,
             defaultX,
-            xAxis
-        }), { verticalAlign } = alignOptions;
+            isNegative,
+            width,
+            xAxis,
+            xOffset
+        }), { align = (inverted ? (isNegative ? 'left' : 'right') : 'center'), verticalAlign = (inverted ? 'middle' : isNegative ? 'bottom' : 'top'), textAlign = (inverted ? (!isNegative ? 'left' : 'right') : 'center'), x = 0, y = 0 } = options, alignOptions = {
+            align,
+            verticalAlign,
+            x,
+            y
+        };
         if (label && stackBox) {
             const labelBox = label.getBBox(void 0, 0), padding = label.padding;
             let isJustify = (options.overflow ?? 'justify') === 'justify', visible;
-            // Reset alignOptions property after justify #12337
-            alignOptions.x = options.x || 0;
-            alignOptions.y = options.y || 0;
             // Calculate the adjusted Stack position, to take into consideration
-            // The size if the labelBox and vertical alignment as
-            // well as the text alignment. It's need to be done to work with
-            // default SVGLabel.align/justify methods.
-            const { x, y } = this.adjustStackPosition({
+            // the size if the labelBox and vertical alignment as well as the
+            // text alignment. It needs to be done to work with default
+            // SVGLabel.align/justify methods.
+            const { x: adjustX, y: adjustY } = this.adjustStackPosition({
                 labelBox,
                 verticalAlign,
                 textAlign
             });
-            stackBox.x -= x;
-            stackBox.y -= y;
+            stackBox.x -= adjustX;
+            stackBox.y -= adjustY;
             // Align the label to the adjusted box.
             label.align(alignOptions, false, stackBox);
-            // Check if label is inside the plotArea #12294
-            visible = chart.isInsidePlot(label.alignAttr.x + alignOptions.x + x, label.alignAttr.y + alignOptions.y + y);
+            // Check if the label is inside the plotArea #12294
+            visible = chart.isInsidePlot(label.alignAttr.x + x + adjustX, label.alignAttr.y + y + adjustY);
             if (!visible) {
                 isJustify = false;
             }
@@ -159,11 +140,8 @@ class StackItem {
                 // Justify stackLabel into the alignBox
                 Series.prototype.justifyDataLabel.call(axis, label, alignOptions, label.alignAttr, labelBox, stackBox);
             }
-            // Add attr to avoid the default animation of justifyDataLabel.
-            // Also add correct rotation with its rotation origin. #15129
+            // Add correct rotation with its rotation origin (#15129)
             label.attr({
-                x: label.alignAttr.x,
-                y: label.alignAttr.y,
                 rotation: options.rotation,
                 rotationOriginX: labelBox.width *
                     getAlignFactor(options.textAlign || 'center'),
@@ -202,22 +180,22 @@ class StackItem {
      * The x, y, height, width of the stack.
      */
     getStackBox(stackBoxProps) {
-        const stackItem = this, axis = this.axis, chart = axis.chart, { boxTop, defaultX, xOffset, width, boxBottom } = stackBoxProps, totalStackValue = axis.stacking.usePercentage ?
+        const axis = this.axis, chart = axis.chart, { boxBottom, boxTop, defaultX, isNegative, width, xOffset } = stackBoxProps, totalStackValue = axis.stacking.usePercentage ?
             100 :
             (boxTop ?? this.total ?? 0), y = axis.toPixels(totalStackValue), xAxis = stackBoxProps.xAxis || chart.xAxis[0], x = (defaultX ?? xAxis.translate(this.x)) + xOffset, yZero = axis.toPixels(boxBottom ||
             (isNumber(axis.min) &&
                 axis.logarithmic &&
                 axis.logarithmic.lin2log(axis.min)) ||
-            0), height = Math.abs(y - yZero), inverted = chart.inverted, neg = stackItem.isNegative;
+            0), height = Math.abs(y - yZero), inverted = chart.inverted;
         return inverted ?
             {
-                x: (neg ? y : y - height) - chart.plotLeft,
+                x: (isNegative ? y : y - height) - chart.plotLeft,
                 y: xAxis.height - x - width + xAxis.top - chart.plotTop,
                 width: height,
                 height: width
             } : {
             x: x + xAxis.transB - chart.plotLeft,
-            y: (neg ? y - height : y) - chart.plotTop,
+            y: (isNegative ? y - height : y) - chart.plotTop,
             width: width,
             height: height
         };
@@ -253,10 +231,6 @@ export default StackItem;
 * @name Highcharts.StackItemObject#cumulative
 * @type {number}
 */ /**
-* True if on the negative side
-* @name Highcharts.StackItemObject#isNegative
-* @type {boolean}
-*/ /**
 * Related SVG element
 * @name Highcharts.StackItemObject#label
 * @type {Highcharts.SVGElement}

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

@@ -195,7 +195,7 @@ function seriesSetStackedPoints(axis, stackingParam) {
                 stacks[key][x].total = null;
             }
             else {
-                stacks[key][x] = new StackItem(axis, axis.options.stackLabels, !!isNegative, x, stackOption);
+                stacks[key][x] = new StackItem(axis, !!isNegative, x, stackOption);
             }
         }
         // If the StackItem doesn't exist, create it first
@@ -352,29 +352,41 @@ class AxisAdditions {
             });
         });
     }
-    /** @internal */
+    /**
+     * Create the stack totals group and render the individual labels into it
+     * @internal
+     */
     renderStackTotals() {
-        const stacking = this, axis = stacking.axis, chart = axis.chart, renderer = chart.renderer, stacks = stacking.stacks, stackLabelsAnim = axis.options.stackLabels?.animation, animationConfig = getDeferredAnimation(chart, stackLabelsAnim || false), stackTotalGroup = stacking.stackTotalGroup = (stacking.stackTotalGroup ||
-            renderer
-                .g('stack-labels')
-                .attr({
-                zIndex: 6,
-                opacity: 0
-            })
-                .add());
-        // The plotLeft/Top will change when y axis gets wider so we need to
-        // translate the stackTotalGroup at every render call. See bug #506
-        // and #516
-        stackTotalGroup.translate(chart.plotLeft, chart.plotTop);
-        // Render each stack total
-        objectEach(stacks, (type) => {
-            objectEach(type, (stack) => {
-                stack.render(stackTotalGroup);
+        const stacking = this, axis = stacking.axis, chart = axis.chart, renderer = chart.renderer, stacks = stacking.stacks, { animation, enabled } = axis.options.stackLabels || {}, animationConfig = getDeferredAnimation(chart, animation || false), stackTotalGroup = stacking.stackTotalGroup = (stacking.stackTotalGroup ||
+            (enabled ?
+                renderer
+                    .g('stack-labels')
+                    .attr({
+                    zIndex: 6,
+                    opacity: 0
+                })
+                    .add() :
+                void 0));
+        if (stackTotalGroup) {
+            // The plotLeft/Top will change when y axis gets wider so we need to
+            // translate the stackTotalGroup at every render call. See bug #506
+            // and #516
+            stackTotalGroup.translate(chart.plotLeft, chart.plotTop);
+            // Render each stack total
+            objectEach(stacks, (type) => {
+                objectEach(type, (stack) => {
+                    if (enabled) {
+                        stack.render(stackTotalGroup);
+                    }
+                    else {
+                        stack.label = stack.label?.destroy();
+                    }
+                });
             });
-        });
-        stackTotalGroup.animate({
-            opacity: 1
-        }, animationConfig);
+            stackTotalGroup.animate({
+                opacity: 1
+            }, animationConfig);
+        }
     }
 }
 /* *

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

@@ -97,7 +97,7 @@ class Tick {
      */
     addLabel() {
         const tick = this, axis = tick.axis, options = axis.options, chart = axis.chart, categories = axis.categories, log = axis.logarithmic, names = axis.names, pos = tick.pos, labelOptions = (tick.options?.labels ?? options.labels), tickPositions = axis.tickPositions, isFirst = pos === tickPositions[0], isLast = pos === tickPositions[tickPositions.length - 1], tickPositionInfo = tickPositions.info, boundary = tickPositionInfo?.boundaryTicks[pos], DTLFormats = options.dateTimeLabelFormats;
-        let label = tick.label, dateTimeLabelFormat, dateTimeLabelFormats, i;
+        let dateTimeLabelFormat, dateTimeLabelFormats, i;
         // The context value
         let value = this.parameters.category || (categories ?
             (categories[pos] ?? names[pos] ?? pos) :
@@ -183,10 +183,15 @@ class Tick {
             }
             return axis.defaultLabelFormatter.call(ctx);
         };
-        const text = labelFormatter.call(ctx, ctx);
+        /**
+         * The rendered text label of the tick.
+         * @name Highcharts.Tick#label
+         * @type {Highcharts.SVGElement|undefined}
+         */
+        tick.label = tick.createLabel(labelFormatter.call(ctx, ctx), labelOptions);
         // Set up conditional formatting based on the format list if existing.
-        const list = dateTimeLabelFormats?.list;
-        if (list) {
+        const list = dateTimeLabelFormats?.list, label = tick.label;
+        if (list && label) {
             tick.shortenLabel = function () {
                 for (i = 0; i < list.length; i++) {
                     extend(ctx, { dateTimeLabelFormat: list[i] });
@@ -194,43 +199,17 @@ class Tick {
                         text: labelFormatter.call(ctx, ctx)
                     });
                     if (label.getBBox().width <
-                        axis.getSlotWidth(tick) - 2 *
-                            (labelOptions.padding || 0)) {
+                        axis.getSlotWidth(tick) - 2 * (labelOptions.padding || 0)) {
                         return;
                     }
                 }
-                label.attr({
-                    text: ''
-                });
+                label.attr({ text: '' });
             };
         }
         else {
             // #15692
             tick.shortenLabel = void 0;
         }
-        // First call
-        if (!label) {
-            /**
-             * The rendered text label of the tick.
-             * @name Highcharts.Tick#label
-             * @type {Highcharts.SVGElement|undefined}
-             */
-            tick.label = label = tick.createLabel(text, labelOptions);
-            // Base value to detect change for new calls to getBBox
-            tick.rotation = 0;
-            // Update
-        }
-        else if (label.textStr !== text) {
-            // When resetting text, also reset the width if dynamically set
-            // (#8809)
-            if (label.textWidth &&
-                !labelOptions.style.width &&
-                !label.styles.width) {
-                label.css({ width: void 0 });
-            }
-            label.attr({ text });
-            label.textPxLength = label.getBBox().width;
-        }
     }
     /**
      * Render and return the label of the tick.
@@ -238,18 +217,33 @@ class Tick {
      * @internal
      * @function Highcharts.Tick#createLabel
      */
-    createLabel(str, labelOptions, xy) {
-        const axis = this.axis, { renderer, styledMode } = axis.chart, whiteSpace = labelOptions.style.whiteSpace, label = defined(str) && labelOptions.enabled ?
-            renderer
-                .text(str, xy?.x, xy?.y, labelOptions.useHTML)
-                .add(axis.labelGroup) :
-            void 0;
+    createLabel(text, labelOptions, xy) {
+        const axis = this.axis, { renderer, styledMode } = axis.chart, style = labelOptions.style, whiteSpace = style.whiteSpace;
+        let label = this.label;
+        if (defined(text) && labelOptions.enabled) {
+            label || (label = renderer
+                .text(text, xy?.x, xy?.y, labelOptions.useHTML)
+                .add(axis.labelGroup));
+        }
+        else if (label) {
+            label = label.destroy();
+            // Reset so it doesn't animate when re-enabled
+            this.isNewLabel = true;
+        }
         // Un-rotated length
-        if (label) {
+        if (label && (label.labelStyle !== style || text !== label.textStr)) {
+            // Store a reference to the current style object to avoid running
+            // this block on every render call unless something actually
+            // changes.
+            label.labelStyle = style;
+            if (text !== label.textStr) {
+                label.attr({ text });
+                delete label.textPxLength;
+            }
             if (!styledMode) {
-                label.css(merge(labelOptions.style));
+                label.css(merge(style));
             }
-            label.textPxLength = label.getBBox().width;
+            label.textPxLength ?? (label.textPxLength = label.getBBox().width);
             // Apply the white-space setting after we read the full text width
             if (!styledMode && whiteSpace) {
                 label.css({ whiteSpace });
@@ -321,19 +315,27 @@ class Tick {
      * @internal
      */
     getLabelPosition(x, y, label, horiz, labelOptions, tickmarkOffset, index, step) {
-        const axis = this.axis, transA = axis.transA, reversed = ( // #7911
-        axis.isLinked && axis.linkedParent ?
+        const axis = this.axis, { labelAlign, side, staggerLines, transA } = axis, reversed = ( // #7911
+        axis.linkedParent ?
             axis.linkedParent.reversed :
-            axis.reversed), staggerLines = axis.staggerLines, rotCorr = axis.tickRotCorr || { x: 0, y: 0 }, 
+            axis.reversed), rotCorr = axis.tickRotCorr || { x: 0, y: 0 }, 
         // Adjust for label alignment if we use reserveSpace: true (#5286)
         labelOffsetCorrection = (!horiz && !axis.reserveSpaceDefault ?
-            -axis.labelOffset * (axis.labelAlign === 'center' ? 0.5 : 1) :
-            0), distance = labelOptions.distance, pos = {};
+            -(axis.labelOffset || 0) * (axis.labelAlign === 'center' ? 0.5 : 1) :
+            0), distance = labelOptions.distance ?? (
+        // If the label is aligned inside the plot area, default to 0.
+        // This is default behavior or Stock y-axis labels.
+        (side === 1 &&
+            labelAlign === 'right' &&
+            !labelOptions.reserveSpace) ? 0 :
+            (side === 3 &&
+                labelAlign === 'left' &&
+                !labelOptions.reserveSpace) ? 0 : 15), pos = {};
         let yOffset, line;
-        if (axis.side === 0) {
+        if (side === 0) {
             yOffset = label.rotation ? -distance : -label.getBBox().height;
         }
-        else if (axis.side === 2) {
+        else if (side === 2) {
             yOffset = rotCorr.y + distance;
         }
         else {
@@ -342,12 +344,12 @@ class Tick {
                 (rotCorr.y - label.getBBox(false, 0).height / 2);
         }
         if (defined(labelOptions.y)) {
-            yOffset = axis.side === 0 && axis.horiz ?
+            yOffset = side === 0 && axis.horiz ?
                 labelOptions.y + yOffset :
                 labelOptions.y;
         }
         x = x +
-            (labelOptions.x ?? [0, 1, 0, -1][axis.side] * distance) +
+            (labelOptions.x ?? [0, 1, 0, -1][side] * distance) +
             labelOffsetCorrection +
             rotCorr.x -
             (tickmarkOffset && horiz ?
@@ -402,7 +404,7 @@ class Tick {
      * @function Highcharts.Tick#handleOverflow
      */
     handleOverflow(xy) {
-        const tick = this, axis = this.axis, labelOptions = axis.options.labels, pxPos = xy.x, chartWidth = axis.chart.chartWidth, spacing = axis.chart.spacing, leftBound = axis.labelLeft ?? Math.min(axis.pos, spacing[3]), rightBound = (axis.labelRight ?? Math.max(!axis.isRadial ? axis.pos + axis.len : 0, chartWidth - spacing[1])), label = this.label, rotation = this.rotation, factor = getAlignFactor(axis.labelAlign || label.attr('align')), labelWidth = label.getBBox().width, slotWidth = axis.getSlotWidth(tick), xCorrection = factor, css = {};
+        const tick = this, { axis, label } = this, labelOptions = axis.options.labels, pxPos = xy.x, { chartWidth, spacing } = axis.chart, leftBound = axis.labelLeft ?? Math.min(axis.pos, spacing[3]), rightBound = (axis.labelRight ?? Math.max(!axis.isRadial ? axis.pos + axis.len : 0, chartWidth - spacing[1])), rotation = label?.rotation || 0, factor = getAlignFactor(axis.labelAlign || label?.attr('align')), labelWidth = label?.getBBox().width || 0, slotWidth = axis.getSlotWidth(tick), xCorrection = factor;
         let modifiedSlotWidth = slotWidth, goRight = 1, leftPos, rightPos, textWidth;
         // Check if the label overshoots the chart spacing box. If it does, move
         // it. If it now overshoots the slotWidth, add ellipsis.
@@ -450,10 +452,10 @@ class Tick {
                 tick.shortenLabel();
             }
             else {
-                label.css(extend(css, {
+                label.css({
                     width: Math.floor(textWidth) + 'px',
                     lineClamp: axis.isRadial ? 0 : 1
-                }));
+                });
             }
         }
     }
@@ -469,8 +471,11 @@ class Tick {
      * @param {number} [opacity]
      */
     render(index, old, opacity) {
-        const tick = this, axis = tick.axis, horiz = axis.horiz, pos = tick.pos, tickmarkOffset = (tick.tickmarkOffset ?? axis.tickmarkOffset), xy = tick.getPosition(horiz, pos, tickmarkOffset, old), x = xy.x, y = xy.y, axisStart = axis.pos, axisEnd = axisStart + axis.len, pxPos = horiz ? x : y;
-        const labelOpacity = (opacity ?? tick.label?.newOpacity ?? 1);
+        const tick = this, axis = tick.axis, horiz = (old ? axis.old?.horiz : void 0) ?? axis.horiz, pos = tick.pos, tickmarkOffset = (tick.tickmarkOffset ?? axis.tickmarkOffset), xy = tick.getPosition(horiz, pos, tickmarkOffset, old), x = xy.x, y = xy.y, axisStart = axis.pos, axisEnd = axisStart + axis.len, pxPos = horiz ? x : y;
+        if (!axis.visible) {
+            opacity = 0;
+        }
+        const labelOpacity = opacity ?? 1;
         // Anything that is not between `axis.pos` and `axis.pos + axis.length`
         // should not be visible (#20166). The `correctFloat` is for reversed
         // axes in Safari.
@@ -498,25 +503,21 @@ class Tick {
      * @param {number} opacity  The opacity of the grid line
      */
     renderGridLine(old, opacity) {
-        const tick = this, axis = tick.axis, options = axis.options, attribs = {}, pos = tick.pos, type = tick.type, tickmarkOffset = (tick.tickmarkOffset ?? axis.tickmarkOffset), renderer = axis.chart.renderer;
-        let gridLine = tick.gridLine, gridLinePath, gridLineWidth = options.gridLineWidth, gridLineColor = options.gridLineColor, dashStyle = options.gridLineDashStyle;
+        const tick = this, axis = tick.axis, options = axis.options, attribs = {}, pos = tick.pos, type = tick.type, tickmarkOffset = (tick.tickmarkOffset ?? axis.tickmarkOffset), { renderer, styledMode } = axis.chart;
+        let gridLine = tick.gridLine, gridLineWidth = options.gridLineWidth, gridLineColor = options.gridLineColor, dashStyle = options.gridLineDashStyle;
         if (tick.type === 'minor') {
             gridLineWidth = options.minorGridLineWidth;
             gridLineColor = options.minorGridLineColor;
             dashStyle = options.minorGridLineDashStyle;
         }
+        // Apply the stroke width initially so the crisping works
+        if (!styledMode) {
+            attribs['stroke-width'] = gridLineWidth || 0;
+        }
         if (!gridLine) {
-            if (!axis.chart.styledMode) {
-                attribs.stroke = gridLineColor;
-                attribs['stroke-width'] = gridLineWidth || 0;
-                attribs.dashstyle = dashStyle;
-            }
             if (!type) {
                 attribs.zIndex = 1;
             }
-            if (old) {
-                opacity = 0;
-            }
             /**
              * The rendered grid line of the tick.
              * @name Highcharts.Tick#gridLine
@@ -527,22 +528,24 @@ class Tick {
                 .addClass('highcharts-' + (type ? type + '-' : '') + 'grid-line')
                 .add(axis.gridGroup);
         }
-        if (gridLine) {
-            gridLinePath = axis.getPlotLinePath({
-                value: pos + tickmarkOffset,
-                lineWidth: gridLine.strokeWidth(),
-                force: 'pass',
-                old: old,
-                acrossPanes: false // #18025
-            });
+        // Grid line path
+        const d = axis.getPlotLinePath({
+            value: pos + tickmarkOffset,
+            lineWidth: gridLine.strokeWidth(),
+            force: 'pass',
+            old: old,
+            acrossPanes: false // #18025
+        });
+        if (d) {
+            attribs.d = d;
+            attribs.opacity = old ? 0 : opacity;
+            if (!styledMode) {
+                attribs.stroke = gridLineColor;
+                attribs.dashstyle = dashStyle;
+            }
             // If the parameter 'old' is set, the current call will be followed
             // by another call, therefore do not do any animations this time
-            if (gridLinePath) {
-                gridLine[old || tick.isNew ? 'attr' : 'animate']({
-                    d: gridLinePath,
-                    opacity: opacity
-                });
-            }
+            gridLine[old || tick.isNew ? 'attr' : 'animate'](attribs);
         }
     }
     /**
@@ -554,13 +557,13 @@ class Tick {
      * @param {number} opacity  The opacity of the mark
      */
     renderMark(xy, opacity) {
-        const tick = this, axis = tick.axis, options = axis.options, renderer = axis.chart.renderer, type = tick.type, tickSize = axis.tickSize(type ? type + 'Tick' : 'tick'), x = xy.x, y = xy.y, tickWidth = options[type !== 'minor' ? 'tickWidth' : 'minorTickWidth'] ?? (!type && axis.isXAxis ? 1 : 0), // X axis defaults to 1
+        const tick = this, axis = tick.axis, { chart, options } = axis, renderer = chart.renderer, type = tick.type, tickSize = axis.tickSize(type ? type + 'Tick' : 'tick'), x = xy.x, y = xy.y, tickWidth = options[type !== 'minor' ? 'tickWidth' : 'minorTickWidth'] ?? (!type && axis.isXAxis ? 1 : 0), // X axis defaults to 1
         tickColor = options[type !== 'minor' ? 'tickColor' : 'minorTickColor'];
         let mark = tick.mark;
-        const isNewMark = !mark;
-        if (tickSize) {
+        const verb = mark ? 'animate' : 'attr';
+        if (tickSize || mark) {
             // Negate the length
-            if (axis.opposite) {
+            if (axis.opposite && tickSize) {
                 tickSize[0] = -tickSize[0];
             }
             // First time, create it
@@ -573,16 +576,16 @@ class Tick {
                 tick.mark = mark = renderer.path()
                     .addClass('highcharts-' + (type ? type + '-' : '') + 'tick')
                     .add(axis.axisGroup);
-                if (!axis.chart.styledMode) {
-                    mark.attr({
-                        stroke: tickColor,
-                        'stroke-width': tickWidth
-                    });
-                }
             }
-            mark[isNewMark ? 'attr' : 'animate']({
-                d: tick.getMarkPath(x, y, tickSize[0], mark.strokeWidth(), axis.horiz, renderer),
-                opacity: opacity
+            if (!chart.styledMode) {
+                mark[verb]({
+                    stroke: tickColor,
+                    'stroke-width': tickWidth
+                });
+            }
+            mark[verb]({
+                d: tick.getMarkPath(x, y, tickSize?.[0] || 0, mark.strokeWidth(), axis.horiz, renderer),
+                opacity: tickSize ? opacity : 0
             });
         }
     }

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

@@ -12,11 +12,13 @@
 'use strict';
 import BrokenAxis from '../BrokenAxis.js';
 import GridAxis from '../GridAxis.js';
+import H from '../../Globals.js';
+const { composed } = H;
 import Tree from '../../../Gantt/Tree.js';
 import TreeGridTick from './TreeGridTick.js';
 import TU from '../../../Series/TreeUtilities.js';
 const { getLevelOptions } = TU;
-import { addEvent, find, fireEvent, isObject, isString, merge, removeEvent, wrap } from '../../../Shared/Utilities.js';
+import { addEvent, find, fireEvent, isObject, isString, merge, pushUnique, removeEvent, wrap } from '../../../Shared/Utilities.js';
 /* *
  *
  *  Variables
@@ -302,19 +304,16 @@ function onBeforeRender(e) {
  * The tick position in axis values.
  */
 function wrapGenerateTick(proceed, pos) {
-    const axis = this, mapOptionsToLevel = axis.treeGrid.mapOptionsToLevel || {}, isTreeGrid = axis.type === 'treegrid', ticks = axis.ticks;
-    let tick = ticks[pos], levelOptions, options, gridNode;
-    if (isTreeGrid &&
-        axis.treeGrid.mapOfPosToGridNode) {
-        gridNode = axis.treeGrid.mapOfPosToGridNode[pos];
+    const axis = this, mapOptionsToLevel = axis.treeGrid.mapOptionsToLevel || {}, isTreeGrid = axis.type === 'treegrid', ticks = axis.ticks, gridNode = axis.treeGrid.mapOfPosToGridNode?.[pos];
+    let tick = ticks[pos], levelOptions, options;
+    if (isTreeGrid && gridNode) {
         levelOptions = mapOptionsToLevel[gridNode.depth];
         if (levelOptions) {
             options = {
                 labels: levelOptions
             };
         }
-        if (!tick &&
-            TickConstructor) {
+        if (!tick && TickConstructor) {
             ticks[pos] = tick =
                 new TickConstructor(axis, pos, void 0, void 0, {
                     category: gridNode.name,
@@ -471,9 +470,7 @@ function wrapInit(proceed, chart, userOptions, coll) {
  * The original setTickInterval function.
  */
 function wrapSetTickInterval(proceed) {
-    const axis = this, options = axis.options, time = axis.chart.time, linkedParent = typeof options.linkedTo === 'number' ?
-        this.chart[axis.coll]?.[options.linkedTo] :
-        void 0, isTreeGrid = axis.type === 'treegrid';
+    const axis = this, options = axis.options, time = axis.chart.time, linkedParent = axis.linkedParent, isTreeGrid = axis.type === 'treegrid';
     if (isTreeGrid) {
         axis.min = axis.userMin ?? time.parse(options.min) ?? axis.dataMin;
         axis.max = axis.userMax ?? time.parse(options.max) ?? axis.dataMax;
@@ -537,9 +534,8 @@ class TreeGridAxisAdditions {
      * */
     /** @internal */
     static compose(AxisClass, ChartClass, SeriesClass, TickClass) {
-        if (!AxisClass.keepProps.includes('treeGrid')) {
+        if (pushUnique(composed, 'Axis.TreeGrid')) {
             const axisProps = AxisClass.prototype;
-            AxisClass.keepProps.push('treeGrid');
             wrap(axisProps, 'generateTick', wrapGenerateTick);
             wrap(axisProps, 'init', wrapInit);
             wrap(axisProps, 'setTickInterval', wrapSetTickInterval);