highcharts 13.0.2 → 13.1.0

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

@@ -16,11 +16,11 @@ import Axis3DDefaults from './Axis3DDefaults.js';
 import D from '../Defaults.js';
 const { defaultOptions } = D;
 import H from '../Globals.js';
-const { deg2rad } = H;
+const { composed, deg2rad } = H;
 import Math3D from '../Math3D.js';
 const { perspective, perspective3D, shapeArea } = Math3D;
 import Tick3D from './Tick3DComposition.js';
-import { addEvent, merge, wrap } from '../../Shared/Utilities.js';
+import { addEvent, merge, pushUnique, wrap } from '../../Shared/Utilities.js';
 /* *
  *
  *  Functions
@@ -166,9 +166,8 @@ function wrapAxisGetSlotWidth(proceed, tick) {
         chart.frameShapes &&
         chart.is3d() &&
         gridGroup &&
-        tick &&
-        tick.label) {
-        const firstGridLine = (gridGroup.element.childNodes[0].getBBox()), frame3DLeft = chart.frameShapes.left.getBBox(), options3d = chart.options.chart.options3d, origin = {
+        tick?.label) {
+        const options3d = chart.options.chart.options3d, origin = {
             x: chart.plotWidth / 2,
             y: chart.plotHeight / 2,
             z: options3d.depth / 2,
@@ -200,15 +199,15 @@ function wrapAxisGetSlotWidth(proceed, tick) {
             z: null
         };
         labelPos = perspective3D(labelPos, origin, origin.vd);
-        // If tick is first one, check whether next label position is
-        // already calculated, then return difference between the first and
-        // the second label. If there is no next label position calculated,
-        // return the difference between the first grid line and left 3d
-        // frame.
+        // If the tick is the first one, check whether the next label position
+        // is already calculated, then return the difference between the first
+        // and the second label. If there is no next label position calculated,
+        // return the difference between the first grid line and left 3d frame.
         return Math.abs(prevLabelPos ?
-            labelPos.x - prevLabelPos.x : nextLabelPos ?
-            nextLabelPos.x - labelPos.x :
-            firstGridLine.x - frame3DLeft.x);
+            labelPos.x - prevLabelPos.x :
+            nextLabelPos ?
+                nextLabelPos.x - labelPos.x :
+                axis.len / (tickPositions.length + 1));
     }
     return proceed.apply(axis, [].slice.call(arguments, 1));
 }
@@ -241,9 +240,8 @@ class Axis3DAdditions {
      */
     static compose(AxisClass, TickClass) {
         Tick3D.compose(TickClass);
-        if (!AxisClass.keepProps.includes('axis3D')) {
+        if (pushUnique(composed, 'Axis.3D')) {
             merge(true, defaultOptions.xAxis, Axis3DDefaults);
-            AxisClass.keepProps.push('axis3D');
             addEvent(AxisClass, 'init', onAxisInit);
             addEvent(AxisClass, 'afterSetOptions', onAxisAfterSetOptions);
             addEvent(AxisClass, 'drawCrosshair', onAxisDrawCrosshair);

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

@@ -962,15 +962,16 @@ var AxisDefaults;
             /**
              * The label's pixel distance from the perimeter of the plot area.
              * On cartesian charts, this is overridden if the `labels.y` setting
-             * is set.
+             * is set. Defaults to 15 unless the labels are aligned inside the
+             * plot area, in which case it defaults to 0.
              *
              * @sample {highcharts} highcharts/yaxis/labels-distance/
              *         Polar chart, labels centered under the arc
              *
              * @type      {number}
              * @product   highcharts gantt
+             * @apioption xAxis.labels.distance
              */
-            distance: 15,
             /**
              * Enable or disable the axis labels.
              *
@@ -1228,18 +1229,18 @@ var AxisDefaults;
          * @apioption xAxis.top
          */
         /**
-         * Index of another axis that this axis is linked to. When an axis is
-         * linked to a master axis, it will take the same extremes as
-         * the master, but as assigned by min or max or by setExtremes.
-         * It can be used to show additional info, or to ease reading the
-         * chart by duplicating the scales.
+         * Index or [id](#xAxis.id) of another axis that this axis is linked to.
+         * When an axis is linked to a master axis, it will take the same
+         * extremes as the master, but as assigned by min or max or by
+         * `setExtremes`. It can be used to show additional info, or to ease
+         * reading the chart by duplicating the scales.
          *
          * @sample {highcharts} highcharts/xaxis/linkedto/
          *         Different string formats of the same date
          * @sample {highcharts} highcharts/yaxis/linkedto/
          *         Y values on both sides
          *
-         * @type      {number}
+         * @type      {number|string}
          * @since     2.0.2
          * @product   highcharts highstock gantt
          * @apioption xAxis.linkedTo

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

@@ -10,8 +10,10 @@
  *
  * */
 'use strict';
+import H from '../Globals.js';
+const { composed } = H;
 import StackItem from './Stacking/StackItem.js';
-import { addEvent, find, fireEvent, isArray, isNumber } from '../../Shared/Utilities.js';
+import { addEvent, find, fireEvent, isArray, isNumber, pushUnique } from '../../Shared/Utilities.js';
 /* *
  *
  *  Composition
@@ -38,8 +40,7 @@ var BrokenAxis;
      * @internal
      */
     function compose(AxisClass, SeriesClass) {
-        if (!AxisClass.keepProps.includes('brokenAxis')) {
-            AxisClass.keepProps.push('brokenAxis');
+        if (pushUnique(composed, 'Axis.Broken')) {
             addEvent(AxisClass, 'init', onAxisInit);
             addEvent(AxisClass, 'afterInit', onAxisAfterInit);
             addEvent(AxisClass, 'afterSetTickPositions', onAxisAfterSetTickPositions);
@@ -257,7 +258,7 @@ var BrokenAxis;
                     });
                     // For stacked chart generate empty stack items, #6546
                     if (yAxis.stacking && this.options.stacking) {
-                        stack = yAxis.stacking.stacks[this.stackKey][xRange] = new StackItem(yAxis, yAxis.options.stackLabels, false, xRange, this.stack ?? '');
+                        stack = yAxis.stacking.stacks[this.stackKey][xRange] = new StackItem(yAxis, false, xRange, this.stack ?? '');
                         stack.total = 0;
                     }
                 }

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

@@ -85,10 +85,10 @@ class ColorAxis extends Axis {
         const legend = chart.options.legend || {}, horiz = userOptions.layout ?
             userOptions.layout !== 'vertical' :
             legend.layout !== 'vertical';
-        axis.side = userOptions.side || horiz ? 2 : 1;
         axis.reversed = userOptions.reversed;
         axis.opposite = !horiz;
         super.init(chart, userOptions, 'colorAxis');
+        axis.side = userOptions.side || horiz ? 2 : 1;
         // `super.init` saves the extended user options, now replace it with the
         // originals
         this.userOptions = userOptions;
@@ -99,6 +99,9 @@ class ColorAxis extends Axis {
         if (userOptions.dataClasses) {
             axis.initDataClasses(userOptions);
         }
+        else {
+            delete axis.dataClasses;
+        }
         axis.initStops();
         // Override original axis properties
         axis.horiz = horiz;
@@ -145,22 +148,30 @@ class ColorAxis extends Axis {
             visible: this.chart.options.legend.enabled &&
                 userOptions.visible !== false
         });
+        const marker = options.marker || {};
         super.setOptions(options);
-        this.options.crosshair = this.options.marker;
+        // Translate marker options to crosshair options
+        this.options.crosshair = merge(marker, {
+            color: marker.lineColor,
+            width: marker.lineWidth
+        });
     }
-    /** @internal */
+    /**
+     * Set the axis sizing properties based on the legend symbol
+     * @internal
+     */
     setAxisSize() {
-        const axis = this, chart = axis.chart, symbol = axis.legendItem?.symbol;
+        const axis = this, chart = axis.chart, bBox = axis.legendItem?.symbolBBox;
         let { width, height } = axis.getSize();
-        if (symbol) {
-            this.left = +symbol.attr('x');
-            this.top = +symbol.attr('y');
-            this.width = width = +symbol.attr('width');
-            this.height = height = +symbol.attr('height');
-            this.right = chart.chartWidth - this.left - width;
-            this.bottom = chart.chartHeight - this.top - height;
-            this.pos = this.horiz ? this.left : this.top;
+        if (bBox) {
+            this.left = bBox.x;
+            this.top = bBox.y;
         }
+        this.width = width = bBox?.width ?? width;
+        this.height = height = bBox?.height ?? height;
+        this.right = chart.chartWidth - this.left - width;
+        this.bottom = chart.chartHeight - this.top - height;
+        this.pos = this.horiz ? this.left : this.top;
         // Fake length for disabled legend to avoid tick issues
         // and such (#5205)
         this.len = (this.horiz ? width : height) ||
@@ -198,6 +209,18 @@ class ColorAxis extends Axis {
             chart.clipOffset = clipOffset;
         }
     }
+    /**
+     * @internal
+     */
+    createGroups() {
+        const axisParent = this.axisParent;
+        super.createGroups();
+        if (this.axisGroup?.parentGroup !== axisParent) {
+            this.gridGroup?.add(axisParent);
+            this.axisGroup?.add(axisParent);
+            this.labelGroup?.add(axisParent);
+        }
+    }
     /**
      * Create the color gradient.
      * @internal
@@ -257,9 +280,7 @@ class ColorAxis extends Axis {
             titleHeight = titleBBox.height;
             titleWidth = titleBBox.width;
         }
-        const titleOptions = axis.options.title || {};
-        const titleMargin = axis.axisTitle ? (titleOptions.margin ?? 0) : 0;
-        const yShift = horiz ? (titleHeight + titleMargin) : 0;
+        const titleOptions = axis.options.title || {}, titleMargin = axis.axisTitle ? (titleOptions.margin ?? 0) : 0, yShift = horiz ? (titleHeight + titleMargin) : 0, verb = legendItem.symbol ? 'animate' : 'attr';
         // Create the gradient
         if (!legendItem.symbol) {
             legendItem.symbol = this.chart.renderer.symbol('roundedRect')
@@ -268,12 +289,13 @@ class ColorAxis extends Axis {
                 zIndex: 1
             }).add(legendItem.group);
         }
-        legendItem.symbol.attr({
+        legendItem.symbolBBox = {
             x: 0,
             y: (legend.baseline || 0) - 11 + yShift,
-            width: width,
-            height: height
-        });
+            width,
+            height
+        };
+        legendItem.symbol[verb](legendItem.symbolBBox);
         // Set how much space this legend item takes up
         if (horiz) {
             legendItem.labelWidth = Math.max(width + padding + itemDistance, titleWidth || 0);
@@ -282,7 +304,7 @@ class ColorAxis extends Axis {
         }
         else {
             legendItem.labelWidth = width + padding +
-                (labelOptions.x ?? labelOptions.distance ?? 0) +
+                (labelOptions.x ?? labelOptions.distance ?? 15) +
                 (this.maxLabelLength || 0) +
                 (titleWidth || 0) + titleMargin;
             legendItem.labelHeight = Math.max(height + padding, titleHeight || 0);
@@ -380,7 +402,7 @@ class ColorAxis extends Axis {
      * @emits Highcharts.ColorAxis#event:drawCrosshair
      */
     drawCrosshair(e, point) {
-        const axis = this, legendItem = axis.legendItem || {}, plotX = point?.plotX, plotY = point?.plotY, axisPos = axis.pos, axisLen = axis.len, markerOptions = axis.options.marker || {};
+        const axis = this, legendItem = axis.legendItem || {}, plotX = point?.plotX, plotY = point?.plotY, axisPos = axis.pos, axisLen = axis.len;
         let crossPos;
         if (point) {
             crossPos = axis.toPixels(point.getNestedProperty(point.series.colorKey));
@@ -395,19 +417,17 @@ class ColorAxis extends Axis {
             super.drawCrosshair(e, point);
             point.plotX = plotX;
             point.plotY = plotY;
-            if (axis.cross &&
-                !axis.cross.addedToColorAxis &&
-                legendItem.group) {
-                axis.cross
-                    .addClass('highcharts-coloraxis-marker')
-                    .add(legendItem.group);
-                axis.cross.addedToColorAxis = true;
-                if (!axis.chart.styledMode &&
-                    typeof axis.crosshair === 'object') {
+            if (axis.cross && typeof axis.crosshair === 'object') {
+                if (!axis.cross.addedToColorAxis &&
+                    legendItem.group) {
+                    axis.cross
+                        .addClass('highcharts-coloraxis-marker')
+                        .add(legendItem.group);
+                    axis.cross.addedToColorAxis = true;
+                }
+                if (!axis.chart.styledMode) {
                     axis.cross.attr({
-                        fill: markerOptions.color,
-                        stroke: markerOptions.lineColor,
-                        'stroke-width': markerOptions.lineWidth
+                        fill: axis.options.marker?.color
                     });
                 }
             }
@@ -469,6 +489,7 @@ class ColorAxis extends Axis {
         if (newOptions.dataClasses && legend.allItems || axis.dataClasses) {
             axis.destroyItems();
         }
+        delete axis.legendItem?.symbolBBox;
         super.update(newOptions, redraw);
         if (axis.legendItem?.label) {
             axis.setLegendColor();
@@ -480,16 +501,18 @@ class ColorAxis extends Axis {
      * @internal
      */
     destroyItems() {
-        const axis = this, chart = axis.chart, legendItem = axis.legendItem || {};
-        if (legendItem.label) {
-            chart.legend.destroyItem(axis);
-        }
-        else if (legendItem.labels) {
-            for (const item of legendItem.labels) {
-                chart.legend.destroyItem(item);
+        const { chart, legendItem = {} } = this;
+        if (chart) { // Means axis not destroyed yet
+            if (legendItem.label) {
+                chart.legend.destroyItem(this);
             }
+            else if (legendItem.labels) {
+                for (const item of legendItem.labels) {
+                    chart.legend.destroyItem(item);
+                }
+            }
+            chart.isDirtyLegend = true;
         }
-        chart.isDirtyLegend = true;
     }
     /**
      * Removing the whole axis (#14283)
@@ -498,7 +521,7 @@ class ColorAxis extends Axis {
     destroy() {
         this.chart.isDirtyLegend = true;
         this.destroyItems();
-        super.destroy(...[].slice.call(arguments));
+        super.destroy();
     }
     /**
      * Removes the color axis and the related legend item.
@@ -526,7 +549,7 @@ class ColorAxis extends Axis {
         }, []);
         let name;
         if (!legendItems.length) {
-            axis.dataClasses.forEach((dataClass, i) => {
+            axis.dataClasses?.forEach((dataClass, i) => {
                 const from = dataClass.from, to = dataClass.to, { numberFormatter } = chart;
                 let vis = true;
                 // Assemble the default name. This can be overridden
@@ -609,18 +632,7 @@ class ColorAxis extends Axis {
  * */
 /** @internal */
 ColorAxis.defaultLegendLength = 200;
-/** @internal */
-ColorAxis.keepProps = [
-    'legendItem'
-];
 extend(ColorAxis.prototype, ColorAxisBase);
-/* *
- *
- *  Registry
- *
- * */
-// Properties to preserve after destroy, for Axis.update (#5881, #6025).
-Array.prototype.push.apply(Axis.keepProps, ColorAxis.keepProps);
 /* *
  *
  *  Default Export

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

@@ -120,6 +120,9 @@ export var ColorAxisComposition;
                     }
                 });
             }
+            else {
+                colorAxis.destroyItems();
+            }
         });
         i = colorAxisItems.length;
         while (i--) {

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

@@ -59,11 +59,13 @@
  *               Min color and max color
  *
  * @extends      xAxis
- * @excluding    alignTicks, allowDecimals, alternateGridColor, breaks,
- *               categories, crosshair, dateTimeLabelFormats, left,
+ * @excluding    alignTicks, allowDecimals, alternateGridColor, angle, breaks,
+ *               categories, crosshair, crossing, dateTimeLabelFormats, left,
  *               lineWidth, linkedTo, maxZoom, minRange, minTickInterval,
- *               offset, opposite, pane, plotBands, plotLines,
- *               reversedStacks, scrollbar, showEmpty, top, zoomEnabled
+ *               offset, opposite, pane, panningEnabled, plotBands, plotLines,
+ *               reversedStacks, scrollbar, showEmpty, startOfWeek,
+ *               tickPlacement, title, top, uniqueNames, units,
+ *               zoomEnabled
  * @product      highcharts highstock highmaps
  * @requires     modules/coloraxis
  * @type         {*|Array<*>}

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

@@ -10,7 +10,9 @@
  *
  * */
 'use strict';
-import { addEvent, getMagnitude, normalizeTickInterval } from '../../Shared/Utilities.js';
+import H from '../Globals.js';
+const { composed } = H;
+import { addEvent, getMagnitude, normalizeTickInterval, pushUnique } from '../../Shared/Utilities.js';
 import { timeUnits } from '../Utilities.js';
 /* *
  *
@@ -34,8 +36,7 @@ var DateTimeAxis;
      * @internal
      */
     function compose(AxisClass) {
-        if (!AxisClass.keepProps.includes('dateTime')) {
-            AxisClass.keepProps.push('dateTime');
+        if (pushUnique(composed, 'Axis.DateTime')) {
             const axisProto = AxisClass.prototype;
             axisProto.getTimeTicks = getTimeTicks;
             addEvent(AxisClass, 'afterSetType', onAfterSetType);

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

@@ -12,8 +12,8 @@
 'use strict';
 import Axis from './Axis.js';
 import H from '../Globals.js';
-const { dateFormats } = H;
-import { defined, find, erase, isArray, isNumber, isObject as isObjectUtils, merge, wrap, addEvent } from '../../Shared/Utilities.js';
+const { composed, dateFormats } = H;
+import { defined, find, erase, isArray, isNumber, isObject as isObjectUtils, merge, wrap, addEvent, pushUnique } from '../../Shared/Utilities.js';
 import { timeUnits } from '../Utilities.js';
 /* *
  *
@@ -76,8 +76,7 @@ function applyGridOptions(axis) {
  * @internal
  */
 function compose(AxisClass, ChartClass, TickClass) {
-    if (!AxisClass.keepProps.includes('grid')) {
-        AxisClass.keepProps.push('grid');
+    if (pushUnique(composed, 'Axis.Grid')) {
         AxisClass.prototype.getMaxLabelDimensions = getMaxLabelDimensions;
         wrap(AxisClass.prototype, 'unsquish', wrapUnsquish);
         wrap(AxisClass.prototype, 'getOffset', wrapGetOffset);
@@ -217,13 +216,19 @@ function onAfterGetTitlePosition(e) {
 }
 /** @internal */
 function onAfterInit() {
+    var _a;
     const axis = this;
     const { chart, options: { grid: gridOptions = {} }, userOptions } = axis;
     if (gridOptions.enabled) {
         applyGridOptions(axis);
     }
     if (gridOptions.columns) {
-        const columns = axis.grid.columns = [];
+        (_a = axis.grid).columns || (_a.columns = []);
+        const columns = axis.grid.columns;
+        // Destroy existing columns. In a future update we could consider
+        // matching and updating existing columns instead of recreating all.
+        columns.forEach((column) => column.destroy());
+        columns.length = 0;
         let columnIndex = axis.grid.columnIndex = 0;
         // Handle columns, each column is a grid axis
         while (++columnIndex < gridOptions.columns.length) {
@@ -635,11 +640,10 @@ function onAfterSetScale() {
  * @internal
  */
 function onAfterTickSize(e) {
-    const { horiz, maxLabelDimensions, options: { grid: gridOptions = {} } } = this;
-    if (gridOptions.enabled && maxLabelDimensions) {
-        const labelPadding = this.options.labels.distance * 2;
-        const distance = horiz ?
-            (gridOptions.cellHeight ||
+    const { horiz, maxLabelDimensions, options } = this, { labels, grid = {} } = options;
+    if (grid.enabled && maxLabelDimensions) {
+        const labelPadding = (labels.distance ?? 15) * 2, distance = horiz ?
+            (grid.cellHeight ||
                 labelPadding + maxLabelDimensions.height) :
             labelPadding + maxLabelDimensions.width;
         if (isArray(e.tickSize)) {
@@ -660,14 +664,14 @@ function onChartAfterSetChartSize() {
     });
 }
 /** @internal */
-function onDestroy(e) {
+function onDestroy() {
     const { grid } = this;
     // Axes created before the Gantt module was loaded have no grid
     // additions to be destroyed (#24644).
     if (!grid) {
         return;
     }
-    (grid.columns || []).forEach((column) => column.destroy(e.keepEvents));
+    (grid.columns || []).forEach((column) => column.destroy());
     grid.columns = void 0;
 }
 /**
@@ -835,7 +839,7 @@ function onTrimTicks() {
         max > beforeLastPos);
     if (gridOptions.enabled === true &&
         !categoryAxis &&
-        (axis.isXAxis || axis.isLinked)) {
+        (axis.isXAxis || axis.linkedParent)) {
         if ((endMoreThanMin || startLessThanMin) && !options.startOnTick) {
             tickPositions[0] = min;
         }

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

@@ -10,7 +10,9 @@
  *
  * */
 'use strict';
-import { addEvent, normalizeTickInterval } from '../../Shared/Utilities.js';
+import H from '../Globals.js';
+const { composed } = H;
+import { addEvent, normalizeTickInterval, pushUnique } from '../../Shared/Utilities.js';
 /* *
  *
  *  Class
@@ -34,8 +36,7 @@ var LogarithmicAxis;
      * @internal
      */
     function compose(AxisClass) {
-        if (!AxisClass.keepProps.includes('logarithmic')) {
-            AxisClass.keepProps.push('logarithmic');
+        if (pushUnique(composed, 'Axis.Logarithmic')) {
             addEvent(AxisClass, 'afterSetType', onAfterSetType);
             addEvent(AxisClass, 'afterInit', onAfterInit);
         }

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

@@ -11,8 +11,8 @@
  * */
 'use strict';
 import H from '../Globals.js';
-const { isTouchDevice } = H;
-import { addEvent, correctFloat, defined, isNumber } from '../../Shared/Utilities.js';
+const { composed, isTouchDevice } = H;
+import { addEvent, correctFloat, defined, isNumber, pushUnique } from '../../Shared/Utilities.js';
 /* *
  *
  *  Functions
@@ -77,8 +77,7 @@ class NavigatorAxisAdditions {
      *
      * */
     static compose(AxisClass) {
-        if (!AxisClass.keepProps.includes('navigatorAxis')) {
-            AxisClass.keepProps.push('navigatorAxis');
+        if (pushUnique(composed, 'Axis.Navigator')) {
             addEvent(AxisClass, 'init', onAxisInit);
             addEvent(AxisClass, 'setExtremes', onAxisSetExtremes);
         }

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

@@ -51,7 +51,6 @@ var OrdinalAxis;
             axisProto.ordinal2lin = axisProto.val2lin;
             addEvent(AxisClass, 'afterInit', onAxisAfterInit);
             addEvent(AxisClass, 'foundExtremes', onAxisFoundExtremes);
-            addEvent(AxisClass, 'afterSetScale', onAxisAfterSetScale);
             addEvent(AxisClass, 'initialAxisTranslation', onAxisInitialAxisTranslation);
             addEvent(ChartClass, 'pan', onChartPan);
             addEvent(ChartClass, 'touchpan', onChartPan);
@@ -329,20 +328,6 @@ var OrdinalAxis;
             }
         }
     }
-    /**
-     * For ordinal axis, that loads data async, redraw axis after data is
-     * loaded. If we don't do that, axis will have the same extremes as
-     * previously, but ordinal positions won't be calculated. See #10290
-     * @internal
-     */
-    function onAxisAfterSetScale() {
-        const axis = this;
-        if (axis.horiz && !axis.isDirty) {
-            axis.isDirty = axis.isOrdinal &&
-                axis.chart.navigator &&
-                !axis.chart.navigator.adaptToUpdatedData;
-        }
-    }
     /** @internal */
     function onAxisInitialAxisTranslation() {
         const axis = this;