highcharts 12.2.0 → 12.4.0

package/es-modules/Maps/MapNavigation.js

@@ -196,7 +196,7 @@ class MapNavigation {
             // Check the mapNavigation buttons collision with exporting button
             // and translate the mapNavigation button if they overlap.
             const adjustMapNavBtn = function () {
-                const expBtnBBox = chart.exportingGroup?.getBBox();
+                const expBtnBBox = chart.exporting?.group?.getBBox();
                 if (expBtnBBox) {
                     const navBtnsBBox = mapNav.navButtonsGroup.getBBox();
                     // If buttons overlap

package/es-modules/Series/Bellcurve/BellcurveSeries.js

@@ -65,6 +65,16 @@ class BellcurveSeries extends AreaSplineSeries {
      *  Functions
      *
      * */
+    setData(data, redraw = true, animation, updatePoints) {
+        let alteredData;
+        if (typeof data !== 'undefined' && data.length > 0) {
+            data = data.filter(isNumber),
+                this.setMean(data);
+            this.setStandardDeviation(data);
+            alteredData = this.derivedData(this.mean || 0, this.standardDeviation || 0);
+        }
+        super.setData.call(this, alteredData, redraw, animation, updatePoints);
+    }
     derivedData(mean, standardDeviation) {
         const options = this.options, intervals = options.intervals, pointsInInterval = options.pointsInInterval, stop = intervals * pointsInInterval * 2 + 1, increment = standardDeviation / pointsInInterval, data = [];
         let x = mean - intervals * standardDeviation;
@@ -76,20 +86,17 @@ class BellcurveSeries extends AreaSplineSeries {
     }
     setDerivedData() {
         const series = this;
-        if (series.baseSeries?.getColumn('y').length || 0 > 1) {
-            series.setMean();
-            series.setStandardDeviation();
-            series.setData(series.derivedData(series.mean || 0, series.standardDeviation || 0), false, void 0, false);
+        if (series.baseSeries?.getColumn('y').length) {
+            series.setData(series.baseSeries?.getColumn('y'), false, void 0, false);
         }
-        return (void 0);
     }
-    setMean() {
+    setMean(data) {
         const series = this;
-        series.mean = correctFloat(BellcurveSeries.mean(series.baseSeries?.getColumn('y') || []));
+        series.mean = correctFloat(BellcurveSeries.mean(data || []));
     }
-    setStandardDeviation() {
+    setStandardDeviation(data) {
         const series = this;
-        series.standardDeviation = correctFloat(BellcurveSeries.standardDeviation(series.baseSeries?.getColumn('y') || [], series.mean));
+        series.standardDeviation = correctFloat(BellcurveSeries.standardDeviation(data || [], series.mean));
     }
 }
 /* *

package/es-modules/Series/Bubble/BubblePoint.js

@@ -34,8 +34,8 @@ class BubblePoint extends ScatterPoint {
                 0 :
             0) + size;
         if (this.series.chart.inverted) {
-            const pos = this.pos() || [0, 0], { xAxis, yAxis, chart } = this.series;
-            return chart.renderer.symbols.circle(xAxis.len - pos[1] - computedSize, yAxis.len - pos[0] - computedSize, computedSize * 2, computedSize * 2);
+            const pos = this.pos() || [0, 0], { xAxis, yAxis, chart } = this.series, diameter = computedSize * 2;
+            return chart.renderer.symbols.circle((xAxis?.len || 0) - pos[1] - computedSize, (yAxis?.len || 0) - pos[0] - computedSize, diameter, diameter);
         }
         return Point.prototype.haloPath.call(this, 
         // #6067

package/es-modules/Series/Column/ColumnSeriesDefaults.js

@@ -258,8 +258,7 @@ const ColumnSeriesDefaults = {
              * @apioption plotOptions.column.states.hover.color
              */
             /**
-             * How much to brighten the point on interaction. Requires the
-             * main color to be defined in hex or rgb(a) format.
+             * How much to brighten the point on interaction.
              *
              * In styled mode, the hover brightening is by default replaced
              * with a fill-opacity set in the `.highcharts-point:hover`

package/es-modules/Series/DataModifyComposition.js

@@ -8,10 +8,8 @@
  *
  * */
 'use strict';
-import Axis from '../Core/Axis/Axis.js';
 import Point from '../Core/Series/Point.js';
 const { tooltipFormatter: pointTooltipFormatter } = Point.prototype;
-import Series from '../Core/Series/Series.js';
 import U from '../Core/Utilities.js';
 const { addEvent, arrayMax, arrayMin, correctFloat, defined, isArray, isNumber, isString, pick } = U;
 /* *

package/es-modules/Series/DragNodesComposition.js

@@ -75,6 +75,10 @@ function onChartLoad() {
  *        Browser event, before normalization.
  */
 function onMouseDown(point, event) {
+    const { panKey } = this.chart.options.chart, panKeyPressed = panKey && event[`${panKey}Key`];
+    if (panKeyPressed) {
+        return;
+    }
     const normalizedEvent = this.chart.pointer?.normalize(event) || event;
     point.fixedPosition = {
         chartX: normalizedEvent.chartX,

package/es-modules/Series/DrawPointUtilities.js

@@ -31,7 +31,7 @@ function draw(point, params) {
     params.attribs = {
         ...params.attribs,
         'class': point.getClassName()
-    } || {};
+    };
     if ((point.shouldDraw())) {
         if (!graphic) {
             if (params.shapeType === 'text') {

package/es-modules/Series/Flags/FlagsSeriesDefaults.js

@@ -225,6 +225,8 @@ const FlagsSeriesDefaults = {
      * @product highstock
      */
     style: {
+        /** @ignore-option */
+        color: "#000000" /* Palette.neutralColor100 */,
         /** @ignore-option */
         fontSize: '0.7em',
         /** @ignore-option */

package/es-modules/Series/GraphLayoutComposition.js

@@ -98,7 +98,8 @@ function onChartRender() {
             afterRender = true;
         }
     };
-    if (this.graphLayoutsLookup) {
+    // Don't animate layout when series is dragged
+    if (this.graphLayoutsLookup && !this.pointer?.hasDragged) {
         setAnimation(false, this);
         // Start simulation
         this.graphLayoutsLookup.forEach((layout) => layout.start());

package/es-modules/Series/Heatmap/HeatmapSeriesDefaults.js

@@ -291,8 +291,7 @@ const HeatmapSeriesDefaults = {
             /** @ignore-option */
             halo: false, // #3406, halo is disabled on heatmaps by default
             /**
-             * How much to brighten the point on interaction. Requires the
-             * main color to be defined in hex or rgb(a) format.
+             * How much to brighten the point on interaction.
              *
              * In styled mode, the hover brightening is by default replaced
              * with a fill-opacity set in the `.highcharts-point:hover`

package/es-modules/Series/Histogram/HistogramSeries.js

@@ -14,23 +14,22 @@ import HistogramSeriesDefaults from './HistogramSeriesDefaults.js';
 import SeriesRegistry from '../../Core/Series/SeriesRegistry.js';
 const { column: ColumnSeries } = SeriesRegistry.seriesTypes;
 import U from '../../Core/Utilities.js';
-const { arrayMax, arrayMin, correctFloat, extend, isNumber, merge } = U;
+const { arrayMax, arrayMin, correctFloat, isNumber, merge } = U;
 /* ************************************************************************** *
  *  HISTOGRAM
  * ************************************************************************** */
 /**
- * A dictionary with formulas for calculating number of bins based on the
- * base series
+ * A dictionary with formulas for calculating number of bins based on data
  **/
 const binsNumberFormulas = {
-    'square-root': function (baseSeries) {
-        return Math.ceil(Math.sqrt(baseSeries.options.data.length));
+    'square-root': function (data) {
+        return Math.ceil(Math.sqrt(data.length));
     },
-    'sturges': function (baseSeries) {
-        return Math.ceil(Math.log(baseSeries.options.data.length) * Math.LOG2E);
+    'sturges': function (data) {
+        return Math.ceil(Math.log(data.length) * Math.LOG2E);
     },
-    'rice': function (baseSeries) {
-        return Math.ceil(2 * Math.pow(baseSeries.options.data.length, 1 / 3));
+    'rice': function (data) {
+        return Math.ceil(2 * Math.pow(data.length, 1 / 3));
     }
 };
 /**
@@ -66,15 +65,22 @@ class HistogramSeries extends ColumnSeries {
      *  Functions
      *
      * */
-    binsNumber() {
+    binsNumber(data) {
         const binsNumberOption = this.options.binsNumber;
         const binsNumber = binsNumberFormulas[binsNumberOption] ||
             // #7457
             (typeof binsNumberOption === 'function' && binsNumberOption);
-        return Math.ceil((binsNumber && binsNumber(this.baseSeries)) ||
+        return Math.ceil((binsNumber && binsNumber(data)) ||
             (isNumber(binsNumberOption) ?
                 binsNumberOption :
-                binsNumberFormulas['square-root'](this.baseSeries)));
+                binsNumberFormulas['square-root'](data)));
+    }
+    setData(data, redraw = true, animation, updatePoints) {
+        let alteredData;
+        if (typeof data !== 'undefined' && data.length > 0) {
+            alteredData = this.derivedData(data.filter(isNumber), this.binsNumber(data), this.options.binWidth);
+        }
+        super.setData.call(this, alteredData, redraw, animation, updatePoints);
     }
     derivedData(baseData, binsNumber, binWidth) {
         const series = this, max = correctFloat(arrayMax(baseData)), 
@@ -131,8 +137,7 @@ class HistogramSeries extends ColumnSeries {
             this.setData([]);
             return;
         }
-        const data = this.derivedData(yData, this.binsNumber(), this.options.binWidth);
-        this.setData(data, false);
+        this.setData(yData, false, void 0, false);
     }
 }
 /* *
@@ -141,9 +146,6 @@ class HistogramSeries extends ColumnSeries {
  *
  * */
 HistogramSeries.defaultOptions = merge(ColumnSeries.defaultOptions, HistogramSeriesDefaults);
-extend(HistogramSeries.prototype, {
-    hasDerivedData: DerivedComposition.hasDerivedData
-});
 DerivedComposition.compose(HistogramSeries);
 SeriesRegistry.registerSeriesType('histogram', HistogramSeries);
 /* *

package/es-modules/Series/Item/ItemSeries.js

@@ -174,7 +174,7 @@ class ItemSeries extends PieSeries {
             rows = Math.sqrt(total);
             if (ratio > 1) {
                 rows = Math.ceil(rows);
-                while (rows > 0) {
+                while (rows > 1) {
                     cols = total / rows;
                     if (cols / rows > ratio) {
                         break;

package/es-modules/Series/PackedBubble/PackedBubblePoint.js

@@ -58,6 +58,11 @@ class PackedBubblePoint extends BubblePoint {
             Point.prototype.select.apply(this, arguments);
         }
     }
+    setState(state, move) {
+        if (this?.graphic?.parentGroup?.element) {
+            super.setState(state, move);
+        }
+    }
 }
 /* *
  *

package/es-modules/Series/Pie/PieDataLabel.js

@@ -16,7 +16,7 @@ const { distribute } = R;
 import SeriesRegistry from '../../Core/Series/SeriesRegistry.js';
 const { series: Series } = SeriesRegistry;
 import U from '../../Core/Utilities.js';
-const { arrayMax, clamp, defined, pick, pushUnique, relativeLength } = U;
+const { arrayMax, clamp, defined, isNumber, pick, pushUnique, relativeLength } = U;
 /* *
  *
  *  Composition
@@ -368,7 +368,7 @@ var ColumnDataLabel;
                     // #8864: every connector can have individual options
                     const { connectorColor, connectorWidth = 1 } = (dataLabel.options || {}), labelPosition = dataLabel.dataLabelPosition;
                     // Draw the connector
-                    if (connectorWidth) {
+                    if (isNumber(connectorWidth)) {
                         let isNew;
                         connector = dataLabel.connector;
                         if (labelPosition && labelPosition.distance > 0) {

package/es-modules/Series/Pie/PieSeries.js

@@ -158,11 +158,11 @@ class PieSeries extends Series {
     }
     /**
      * Define hasData function for non-cartesian series. Returns true if the
-     * series has points at all.
+     * series has at least one visible point (#23235)
      * @private
      */
     hasData() {
-        return !!this.dataTable.rowCount;
+        return this.points.some((point) => point.visible);
     }
     /**
      * Draw the data points

package/es-modules/Series/Pie/PieSeriesDefaults.js

@@ -563,8 +563,7 @@ const PieSeriesDefaults = {
          */
         hover: {
             /**
-             * How much to brighten the point on interaction. Requires the
-             * main color to be defined in hex or rgb(a) format.
+             * How much to brighten the point on interaction.
              *
              * In styled mode, the hover brightness is by default replaced
              * by a fill-opacity given in the `.highcharts-point-hover`

package/es-modules/Series/PolarComposition.js

@@ -10,13 +10,17 @@
 'use strict';
 import A from '../Core/Animation/AnimationUtilities.js';
 const { animObject } = A;
+import BorderRadius from '../Extensions/BorderRadius.js';
+const { optionsToObject } = BorderRadius;
+import D from '../Core/Defaults.js';
+const { defaultOptions } = D;
 import H from '../Core/Globals.js';
 const { composed } = H;
 import Series from '../Core/Series/Series.js';
 import Pane from '../Extensions/Pane/Pane.js';
 import RadialAxis from '../Core/Axis/RadialAxis.js';
 import U from '../Core/Utilities.js';
-const { addEvent, defined, find, isNumber, merge, pick, pushUnique, relativeLength, splat, uniqueKey, wrap } = U;
+const { addEvent, defined, find, isNumber, isObject, merge, pick, pushUnique, relativeLength, splat, uniqueKey, wrap } = U;
 /* *
  *
  *  Functions
@@ -161,7 +165,7 @@ function onChartCreateAxes() {
         this.pane = [];
     }
     this.options.pane = splat(this.options.pane || {});
-    this.options.pane.forEach((paneOptions) => {
+    splat(this.userOptions.pane || {}).forEach((paneOptions) => {
         new Pane(// eslint-disable-line no-new
         paneOptions, this);
     }, this);
@@ -327,6 +331,33 @@ function onSeriesAfterInit() {
         }
     }
 }
+/**
+ * Apply conditional rounding to polar bars
+ */
+function onSeriesAfterColumnTranslate() {
+    const { chart, options, yAxis } = this;
+    if (options.borderRadius &&
+        chart.polar &&
+        chart.inverted) {
+        const seriesDefault = defaultOptions.plotOptions?.[this.type]
+            ?.borderRadius, { scope, where = 'end' } = optionsToObject(options.borderRadius, isObject(seriesDefault) ? seriesDefault : {});
+        for (const point of this.points) {
+            const { shapeArgs } = point;
+            if (point.shapeType === 'arc' && shapeArgs) {
+                let brStart = where === 'all', brEnd = true;
+                if (options.stacking && scope === 'stack') {
+                    brStart = point.stackY === point.y && where === 'all',
+                        brEnd = point.stackY === point.stackTotal;
+                }
+                if (yAxis.reversed) {
+                    [brStart, brEnd] = [brEnd, brStart];
+                }
+                shapeArgs.brStart = brStart;
+                shapeArgs.brEnd = brEnd;
+            }
+        }
+    }
+}
 /**
  * Extend translate. The plotX and plotY values are computed as if the polar
  * chart were a cartesian plane, where plotX denotes the angle in radians
@@ -919,6 +950,10 @@ class PolarAdditions {
             addEvent(PointerClass, 'getSelectionMarkerAttrs', onPointerGetSelectionMarkerAttrs);
             addEvent(PointerClass, 'getSelectionBox', onPointerGetSelectionBox);
             addEvent(SeriesClass, 'afterInit', onSeriesAfterInit);
+            addEvent(SeriesClass, 'afterColumnTranslate', onSeriesAfterColumnTranslate, {
+                // After columnrange and polar column modifications
+                order: 9
+            });
             addEvent(SeriesClass, 'afterTranslate', onSeriesAfterTranslate, { order: 2 } // Run after translation of ||-coords
             );
             addEvent(SeriesClass, 'afterColumnTranslate', onAfterColumnTranslate, { order: 4 });

package/es-modules/Series/SeriesOnPointComposition.js

@@ -12,7 +12,6 @@ import DataTableCore from '../Data/DataTableCore.js';
 import H from '../Core/Globals.js';
 const { composed } = H;
 import Point from '../Core/Series/Point.js';
-import Series from '../Core/Series/Series.js';
 import SeriesRegistry from '../Core/Series/SeriesRegistry.js';
 const { bubble } = SeriesRegistry.seriesTypes;
 import SVGRenderer from '../Core/Renderer/SVG/SVGRenderer.js';

package/es-modules/Series/SimulationSeriesUtilities.js

@@ -48,6 +48,13 @@ function initDataLabels() {
         // Initialize the opacity of the group to 0 (start of animation)
         dataLabelsGroup.attr({ opacity: 0 });
         if (series.visible) { // #2597, #3023, #3024
+            // #19663, initial data labels animation
+            if (series.options.animation && dlOptions?.animation) {
+                dataLabelsGroup.animate({ opacity: 1 }, dlOptions?.animation);
+            }
+            else {
+                dataLabelsGroup.attr({ opacity: 1 });
+            }
             dataLabelsGroup.show();
         }
         return dataLabelsGroup;

package/es-modules/Series/SolidGauge/SolidGaugeSeries.js

@@ -68,7 +68,7 @@ class SolidGaugeSeries extends GaugeSeries {
                 )) * center[2]) / 200), innerRadius = ((pInt(pick(point.options.innerRadius, options.innerRadius, 60 // %
                 )) * center[2]) / 200), axisMinAngle = Math.min(yAxis.startAngleRad, yAxis.endAngleRad), axisMaxAngle = Math.max(yAxis.startAngleRad, yAxis.endAngleRad);
                 let graphic = point.graphic, rotation = (yAxis.startAngleRad +
-                    yAxis.translate(point.y, void 0, void 0, void 0, true)), shapeArgs, d, toColor = yAxis.toColor(point.y, point);
+                    yAxis.translate(point.y, void 0, void 0, void 0, true)), shapeArgs, d, toColor = yAxis.toColor(point.y, point), className = point.getClassName();
                 if (toColor === 'none') { // #3708
                     toColor = point.color || series.color || 'none';
                 }
@@ -131,8 +131,13 @@ class SolidGaugeSeries extends GaugeSeries {
                         'stroke-width': options.borderWidth || 0
                     });
                 }
+                else if (series.yAxis?.stops) {
+                    className = className
+                        .replace(/highcharts-color-\d/gm, '')
+                        .trim();
+                }
                 if (graphic) {
-                    graphic.addClass(point.getClassName(), true);
+                    graphic.addClass(className);
                 }
             }
         }

package/es-modules/Series/SolidGauge/SolidGaugeSeriesDefaults.js

@@ -29,6 +29,19 @@
  * @optionparent plotOptions.solidgauge
  */
 const SolidGaugeSeriesDefaults = {
+    /**
+     * The corner radius of the border surrounding solid gauge. A number
+     * signifies pixels and percentage string, like for example `50%`,
+     * signifies a relative size.
+     *
+     * @sample {highcharts} highcharts/series-solidgauge/pane-borderradius
+     *         Solid gauge with rounded border.
+     *
+     * @type      {number | string}
+     * @since     11.0.0
+     * @product   highcharts
+     * @apioption plotOptions.solidgauge.borderRadius
+     */
     /**
      * The inner radius for points in a solid gauge. Can be given only in
      * percentage, either as a number or a string like `"50%"`.

package/es-modules/Series/Treegraph/TreegraphLayout.js

@@ -234,8 +234,10 @@ class TreegraphLayout {
      * right outernal node or defaultAncestor.
      *
      * @param {TreegraphNode} node
+     * Treegraph node.
+     *
      * @param {TreegraphNode} defaultAncestor
-     *        The default ancestor of the passed node.
+     * The default ancestor of the passed node.
      */
     apportion(node, defaultAncestor) {
         const treeLayout = this, leftSibling = node.getLeftSibling();
@@ -284,9 +286,13 @@ class TreegraphLayout {
      * Shifts the subtree from leftNode to rightNode.
      *
      * @param {TreegraphNode} leftNode
+     * Left treegraph node.
+     *
      * @param {TreegraphNode} rightNode
+     * Right treegraph node.
+     *
      * @param {number} shift
-     *        The value, by which the subtree should be moved.
+     * The value, by which the subtree should be moved.
      */
     moveSubtree(leftNode, rightNode, shift) {
         const subtrees = rightNode.relativeXPosition - leftNode.relativeXPosition;
@@ -310,8 +316,8 @@ class TreegraphLayout {
                 node.parent = node.oldParentNode.parent;
                 node.parentNode = node.oldParentNode;
                 // Delete dummyNode
-                delete node.oldParentNode.children[node.relativeXPosition];
-                node.oldParentNode.children[node.relativeXPosition] = node;
+                node.oldParentNode.children
+                    .splice(node.relativeXPosition, 1, node);
                 node.oldParentNode = void 0;
             }
         }

package/es-modules/Series/Treegraph/TreegraphSeries.js

@@ -446,9 +446,11 @@ class TreegraphSeries extends TreemapSeries {
 }
 TreegraphSeries.defaultOptions = merge(TreemapSeries.defaultOptions, TreegraphSeriesDefaults);
 extend(TreegraphSeries.prototype, {
+    forceDL: true,
     pointClass: TreegraphPoint,
     NodeClass: TreegraphNode,
-    LinkClass: TreegraphLink
+    LinkClass: TreegraphLink,
+    isCartesian: false
 });
 SeriesRegistry.registerSeriesType('treegraph', TreegraphSeries);
 /* *

package/es-modules/Series/Treemap/TreemapSeries.js

@@ -582,7 +582,7 @@ class TreemapSeries extends ScatterSeries {
     drawPoints(points = this.points) {
         const series = this, chart = series.chart, renderer = chart.renderer, styledMode = chart.styledMode, options = series.options, shadow = styledMode ? {} : options.shadow, borderRadius = options.borderRadius, withinAnimationLimit = chart.pointCount < options.animationLimit, allowTraversingTree = options.allowTraversingTree;
         for (const point of points) {
-            const levelDynamic = point.node.levelDynamic, animatableAttribs = {}, attribs = {}, css = {}, groupKey = 'level-group-' + point.node.level, hasGraphic = !!point.graphic, shouldAnimate = withinAnimationLimit && hasGraphic, shapeArgs = point.shapeArgs;
+            const animatableAttribs = {}, attribs = {}, css = {}, groupKey = 'level-group-' + point.node.level, hasGraphic = !!point.graphic, shouldAnimate = withinAnimationLimit && hasGraphic, shapeArgs = point.shapeArgs;
             // Don't bother with calculate styling if the point is not drawn
             if (point.shouldDraw()) {
                 point.isInside = true;
@@ -608,9 +608,9 @@ class TreemapSeries extends ScatterSeries {
                 if (!series[groupKey]) {
                     series[groupKey] = renderer.g(groupKey)
                         .attr({
-                        // @todo Set the zIndex based upon the number of
-                        // levels, instead of using 1000
-                        zIndex: 1000 - (levelDynamic || 0)
+                        // Use the static level in order to retain z-index
+                        // when data is updated (#23432).
+                        zIndex: -(point.node.level || 0)
                     })
                         .add(series.group);
                     series[groupKey].survive = true;

package/es-modules/Series/Variwide/VariwideComposition.js

@@ -47,17 +47,15 @@ function onAxisAfterDrawCrosshair(e) {
  */
 function onAxisAfterRender() {
     const axis = this;
-    if (this.variwide) {
-        this.chart.labelCollectors.push(function () {
-            return axis.tickPositions
-                .filter((pos) => !!axis.ticks[pos].label)
-                .map((pos, i) => {
-                const label = axis.ticks[pos].label;
-                label.labelrank = axis.zData[i];
-                return label;
-            });
-        });
-    }
+    this.chart.labelCollectors.push(function () {
+        return axis.variwide ? axis.tickPositions
+            .filter((pos) => !!axis.ticks[pos].label)
+            .map((pos, i) => {
+            const label = axis.ticks[pos].label;
+            label.labelrank = axis.zData?.[i];
+            return label;
+        }) : [];
+    });
 }
 /**
  * @private

package/es-modules/Series/Variwide/VariwideSeries.js

@@ -16,7 +16,7 @@ import VariwideComposition from './VariwideComposition.js';
 import VariwidePoint from './VariwidePoint.js';
 import VariwideSeriesDefaults from './VariwideSeriesDefaults.js';
 import U from '../../Core/Utilities.js';
-const { addEvent, crisp, extend, merge, pick } = U;
+const { addEvent, arrayMin, arrayMax, crisp, extend, merge, pick } = U;
 /* *
  *
  *  Class
@@ -120,6 +120,13 @@ class VariwideSeries extends ColumnSeries {
             }
         }
     }
+    getXExtremes(xData) {
+        const max = arrayMax(xData), maxZ = this.getColumn('z')[xData.indexOf(max)];
+        return {
+            min: arrayMin(xData),
+            max: max + (this.xAxis.categories ? 0 : maxZ)
+        };
+    }
 }
 /* *
  *

package/es-modules/Series/Waterfall/WaterfallSeries.js

@@ -123,12 +123,12 @@ class WaterfallSeries extends ColumnSeries {
     // Return an empty path initially, because we need to know the stroke-width
     // in order to set the final path.
     getGraphPath() {
-        return [['M', 0, 0]];
+        return this.graph?.pathArray || [['M', 0, 0]];
     }
     // Draw columns' connector lines
     getCrispPath() {
         const // Skip points where Y is not a number (#18636)
-        data = this.data.filter((d) => isNumber(d.y)), yAxis = this.yAxis, length = data.length, graphLineWidth = this.graph?.strokeWidth() || 0, reversedXAxis = this.xAxis.reversed, reversedYAxis = this.yAxis.reversed, stacking = this.options.stacking, path = [];
+        data = this.points.filter((d) => isNumber(d.y)), yAxis = this.yAxis, length = data.length, graphLineWidth = this.graph?.strokeWidth() || 0, reversedXAxis = this.xAxis.reversed, reversedYAxis = this.yAxis.reversed, stacking = this.options.stacking, path = [];
         for (let i = 1; i < length; i++) {
             if (!( // Skip lines that would pass over the null point (#18636)
             this.options.connectNulls ||
@@ -139,7 +139,7 @@ class WaterfallSeries extends ColumnSeries {
             if (!box || !prevBox) {
                 continue;
             }
-            const prevStack = yAxis.waterfall.stacks[this.stackKey], isPos = prevY > 0 ? -prevBox.height : 0;
+            const prevStack = yAxis.waterfall?.stacks[this.stackKey], isPos = prevY > 0 ? -prevBox.height : 0;
             if (prevStack && prevBox && box) {
                 const prevStackX = prevStack[i - 1];
                 // Y position of the connector is different when series are
@@ -147,8 +147,7 @@ class WaterfallSeries extends ColumnSeries {
                 // value
                 let yPos;
                 if (stacking) {
-                    const connectorThreshold = prevStackX.connectorThreshold;
-                    yPos = crisp(yAxis.translate(connectorThreshold, false, true, false, true) +
+                    yPos = crisp(yAxis.translate(prevStackX.connectorThreshold || 0, false, true, false, true) +
                         (reversedYAxis ? isPos : 0), graphLineWidth);
                 }
                 else {
@@ -188,11 +187,9 @@ class WaterfallSeries extends ColumnSeries {
     // crisp rendering.
     drawGraph() {
         LineSeries.prototype.drawGraph.call(this);
-        if (this.graph) {
-            this.graph.attr({
-                d: this.getCrispPath()
-            });
-        }
+        this.graph?.animate({
+            d: this.getCrispPath()
+        });
     }
     // Waterfall has stacking along the x-values too.
     setStackedPoints(axis) {
@@ -304,11 +301,9 @@ class WaterfallSeries extends ColumnSeries {
     // Extremes for a non-stacked series are recorded in processData.
     // In case of stacking, use Series.stackedYData to calculate extremes.
     getExtremes() {
-        const stacking = this.options.stacking;
-        let yAxis, waterfallStacks, stackedYNeg, stackedYPos;
-        if (stacking) {
-            yAxis = this.yAxis;
-            waterfallStacks = yAxis.waterfall.stacks;
+        const stacking = this.options.stacking, yAxis = this.yAxis, waterfallStacks = yAxis.waterfall?.stacks;
+        let stackedYNeg, stackedYPos;
+        if (stacking && waterfallStacks) {
             stackedYNeg = this.stackedYNeg = [];
             stackedYPos = this.stackedYPos = [];
             // The visible y range can be different when stacking is set to
@@ -354,7 +349,7 @@ extend(WaterfallSeries.prototype, {
 });
 // Translate data points from raw values
 addEvent(WaterfallSeries, 'afterColumnTranslate', function () {
-    const series = this, { options, points, yAxis } = series, minPointLength = pick(options.minPointLength, 5), halfMinPointLength = minPointLength / 2, threshold = options.threshold || 0, stacking = options.stacking, actualStack = yAxis.waterfall.stacks[series.stackKey], processedYData = series.getColumn('y', true);
+    const series = this, { options, points, yAxis } = series, minPointLength = pick(options.minPointLength, 5), halfMinPointLength = minPointLength / 2, threshold = options.threshold || 0, stacking = options.stacking, actualStack = yAxis.waterfall?.stacks[series.stackKey], processedYData = series.getColumn('y', true);
     let previousIntermediate = threshold, previousY = threshold, y, total, yPos, hPos;
     for (let i = 0; i < points.length; i++) {
         const point = points[i], yValue = processedYData[i], shapeArgs = point.shapeArgs, box = extend({
@@ -430,7 +425,7 @@ addEvent(WaterfallSeries, 'afterColumnTranslate', function () {
                 box.y = yAxis.translate(yPos, false, true, false, true);
                 box.height = Math.abs(box.y -
                     yAxis.translate(hPos, false, true, false, true));
-                const dummyStackItem = yAxis.waterfall.dummyStackItem;
+                const dummyStackItem = yAxis.waterfall?.dummyStackItem;
                 if (dummyStackItem) {
                     dummyStackItem.x = i;
                     dummyStackItem.label = actualStack[i].label;