highcharts 13.0.1 → 13.0.2

package/es-modules/Core/Chart/ChartDefaults.js

@@ -224,6 +224,29 @@ const ChartDefaults = {
      * @context   Highcharts.Chart
      * @apioption chart.events.load
      */
+    /**
+     * Fires while the chart is panned by mouse drag. Panning must be
+     * enabled through [chart.panning](#chart.panning). One parameter,
+     * `event`, is passed to the function, containing common event
+     * information as well as `event.originalEvent`, the underlying pointer
+     * event. Note that the event fires for every mouse move during the
+     * drag, not once per gesture.
+     *
+     * Calling `event.preventDefault()` or returning false prevents the
+     * default panning of the axes. In Highcharts Maps, and on ordinal axes
+     * in Highcharts Stock, the panning is applied outside the default
+     * action and is not prevented.
+     *
+     * Panning by touch does not fire this event, unless
+     * [chart.zooming.singleTouch](#chart.zooming.singleTouch) is enabled and
+     * no zoom type is set. Single-finger drags are then handled as mouse
+     * drags and fire this event.
+     *
+     * @type      {Highcharts.ChartPanCallbackFunction}
+     * @since     7.0.2
+     * @context   Highcharts.Chart
+     * @apioption chart.events.pan
+     */
     /**
      * Fires when the chart is redrawn, either after a call to
      * `chart.redraw()` or after an axis, series or point is modified with

package/es-modules/Core/Chart/MapChart.js

@@ -15,7 +15,7 @@ import D from '../Defaults.js';
 const { getOptions } = D;
 import SVGRenderer from '../Renderer/SVG/SVGRenderer.js';
 import '../../Maps/MapSymbols.js';
-import { isNumber, merge, pick } from '../../Shared/Utilities.js';
+import { isNumber, merge } from '../../Shared/Utilities.js';
 /* *
  *
  *  Class
@@ -65,9 +65,11 @@ class MapChart extends Chart {
                 type: 'map'
             },
             credits: {
-                mapText: pick(defaultCreditsOptions.mapText, ' \u00a9 <a href="{geojson.copyrightUrl}">' +
-                    '{geojson.copyrightShort}</a>'),
-                mapTextFull: pick(defaultCreditsOptions.mapTextFull, '{geojson.copyright}')
+                mapText: (defaultCreditsOptions.mapText ??
+                    ' \u00a9 <a href="{geojson.copyrightUrl}">' +
+                        '{geojson.copyrightShort}</a>'),
+                mapTextFull: defaultCreditsOptions.mapTextFull ??
+                    '{geojson.copyright}'
             },
             mapView: {}, // Required to enable Chart.mapView
             tooltip: {
@@ -190,7 +192,7 @@ class MapChart extends Chart {
      */
     function mapChart(a, b, c) {
         const chart = new MapChart(a, b, c);
-        return chart.promise || chart;
+        return chart.promise ?? chart;
     }
     MapChart.mapChart = mapChart;
     /* eslint-enable jsdoc/check-param-names */

package/es-modules/Core/Chart/StockChart.js

@@ -20,7 +20,7 @@ import RangeSelectorDefaults from '../../Stock/RangeSelector/RangeSelectorDefaul
 import ScrollbarDefaults from '../../Stock/Scrollbar/ScrollbarDefaults.js';
 import StockUtilities from '../../Stock/Utilities/StockUtilities.js';
 const { setFixedRange } = StockUtilities;
-import { addEvent, clamp, crisp, defined, extend, find, isNumber, isString, merge, pick, splat } from '../../Shared/Utilities.js';
+import { addEvent, clamp, crisp, defined, extend, find, isNumber, isString, merge, splat } from '../../Shared/Utilities.js';
 /* *
  *
  *  Functions
@@ -68,7 +68,9 @@ function getForcedAxisOptions(type, chartOptions) {
     if (type === 'xAxis') {
         // Always disable startOnTick:true on the main axis when the navigator
         // is enabled (#1090)
-        const navigatorEnabled = pick(chartOptions.navigator?.enabled, NavigatorDefaults.enabled, true);
+        const navigatorEnabled = chartOptions.navigator?.enabled ??
+            NavigatorDefaults.enabled ??
+            true;
         const axisOptions = {
             type: 'datetime',
             categories: void 0
@@ -122,7 +124,9 @@ class StockChart extends Chart {
         const defaultOptions = getOptions(), xAxisOptions = userOptions.xAxis, yAxisOptions = userOptions.yAxis, 
         // Always disable startOnTick:true on the main axis when the
         // navigator is enabled (#1090)
-        navigatorEnabled = pick(userOptions.navigator?.enabled, NavigatorDefaults.enabled, true);
+        navigatorEnabled = userOptions.navigator?.enabled ??
+            NavigatorDefaults.enabled ??
+            true;
         // Avoid doing these twice
         userOptions.xAxis = userOptions.yAxis = void 0;
         const options = merge({
@@ -143,17 +147,17 @@ class StockChart extends Chart {
             },
             scrollbar: {
                 // #4988 - check if setOptions was called
-                enabled: pick(ScrollbarDefaults.enabled, true)
+                enabled: (ScrollbarDefaults.enabled ?? true)
             },
             rangeSelector: {
                 // #4988 - check if setOptions was called
-                enabled: pick(RangeSelectorDefaults.rangeSelector.enabled, true)
+                enabled: RangeSelectorDefaults.rangeSelector.enabled ?? true
             },
             title: {
                 text: null
             },
             tooltip: {
-                split: pick(defaultOptions.tooltip?.split, true),
+                split: (defaultOptions.tooltip?.split ?? true),
                 crosshairs: true
             },
             legend: {
@@ -287,8 +291,8 @@ addEvent(Chart, 'update', function (e) {
                 axis.series[0] && this.series[0].colorIndex))
                 .attr({
                 align: options.align || align,
-                padding: pick(options.padding, 8),
-                r: pick(options.borderRadius, 3),
+                padding: (options.padding ?? 8),
+                r: (options.borderRadius ?? 3),
                 zIndex: 2
             })
                 .add(axis.labelGroup);
@@ -513,7 +517,7 @@ addEvent(Chart, 'update', function (e) {
                     uniqueAxes.push(axis2);
                 }
             }
-            transVal = pick(translatedValue, axis.translate(value || 0, void 0, void 0, e.old));
+            transVal = translatedValue ?? axis.translate(value || 0, void 0, void 0, e.old);
             if (isNumber(transVal)) {
                 let skip, pos = horiz ?
                     transVal + axis.pos :
@@ -592,7 +596,7 @@ addEvent(Chart, 'update', function (e) {
     function seriesForceCropping() {
         const series = this, chart = series.chart, options = series.options, dataGroupingOptions = options.dataGrouping, groupingEnabled = (series.allowDG !== false &&
             dataGroupingOptions &&
-            pick(dataGroupingOptions.enabled, chart.options.isStock));
+            (dataGroupingOptions.enabled ?? chart.options.isStock));
         return groupingEnabled;
     }
     /* eslint-disable jsdoc/check-param-names */
@@ -630,7 +634,7 @@ addEvent(Chart, 'update', function (e) {
      */
     function stockChart(a, b, c) {
         const chart = new StockChart(a, b, c);
-        return chart.promise || chart;
+        return chart.promise ?? chart;
     }
     StockChart.stockChart = stockChart;
     /* eslint-enable jsdoc/check-param-names */

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

@@ -329,7 +329,9 @@ export default Color;
  */
 /**
  * A valid color type than can be parsed and handled by Highcharts. It can be a
- * color string, a gradient object, or a pattern object.
+ * color string (including CSS expressions), a gradient object, or a pattern
+ * object. Read more about colors in the [Highcharts
+ * documentation](https://www.highcharts.com/docs/chart-design-and-style/colors).
  *
  * @typedef {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject} Highcharts.ColorType
  */

package/es-modules/Core/Defaults.js

@@ -3099,6 +3099,41 @@ export default DefaultOptions;
  * @param {global.Event} event
  *        The event that occurred.
  */
+/**
+ * Gets fired while the chart is panned by mouse drag. Calling
+ * `event.preventDefault()` or returning `false` prevents the default panning
+ * of the axes.
+ *
+ * @callback Highcharts.ChartPanCallbackFunction
+ *
+ * @param {Highcharts.Chart} this
+ *        The chart on which the event occurred.
+ *
+ * @param {Highcharts.ChartPanEventObject} event
+ *        The event that occurred.
+ */
+/**
+ * Contains common event information. Through the `originalEvent` property you
+ * can access the pointer event that triggered the panning.
+ *
+ * @interface Highcharts.ChartPanEventObject
+ */ /**
+* The pointer event that triggered the panning.
+* @name Highcharts.ChartPanEventObject#originalEvent
+* @type {Highcharts.PointerEventObject}
+*/ /**
+* Prevents the default behavior of the event.
+* @name Highcharts.ChartPanEventObject#preventDefault
+* @type {Function}
+*/ /**
+* The event target.
+* @name Highcharts.ChartPanEventObject#target
+* @type {Highcharts.Chart}
+*/ /**
+* The event type.
+* @name Highcharts.ChartPanEventObject#type
+* @type {"pan"}
+*/
 /**
  * Fires when the chart is redrawn, either after a call to `chart.redraw()` or
  * after an axis, series or point is modified with the `redraw` option set to

package/es-modules/Core/Globals.js

@@ -26,7 +26,7 @@ var Globals;
      *  Constants
      *
      * */
-    Globals.SVG_NS = 'http://www.w3.org/2000/svg', Globals.product = 'Highcharts', Globals.version = '13.0.1', Globals.win = (typeof window !== 'undefined' ?
+    Globals.SVG_NS = 'http://www.w3.org/2000/svg', Globals.product = 'Highcharts', Globals.version = '13.0.2', Globals.win = (typeof window !== 'undefined' ?
         window :
         {}), // eslint-disable-line node/no-unsupported-features/es-builtins
     Globals.doc = Globals.win.document, Globals.svg = !!Globals.doc?.createElementNS?.(Globals.SVG_NS, 'svg')?.createSVGRect, Globals.pageLang = Globals.doc?.documentElement?.closest('[lang]')?.lang, Globals.userAgent = Globals.win.navigator?.userAgent || '', Globals.isChrome = Globals.win.chrome, Globals.isFirefox = Globals.userAgent.indexOf('Firefox') !== -1, Globals.isMS = /(edge|msie|trident)/i.test(Globals.userAgent) && !Globals.win.opera, Globals.isSafari = !Globals.isChrome && Globals.userAgent.indexOf('Safari') !== -1, Globals.isTouchDevice = /(Mobile|Android|Windows Phone)/.test(Globals.userAgent), Globals.isWebKit = Globals.userAgent.indexOf('AppleWebKit') !== -1, Globals.deg2rad = Math.PI * 2 / 360, Globals.marginNames = [

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

@@ -21,7 +21,7 @@ import R from '../Renderer/RendererUtilities.js';
 const { distribute } = R;
 import T from '../Templating.js';
 const { format } = T;
-import { addEvent, createElement, css, defined, discardElement, find, fireEvent, isNumber, merge, pick, pushUnique, relativeLength, stableSort, syncTimeout } from '../../Shared/Utilities.js';
+import { addEvent, createElement, css, defined, discardElement, find, fireEvent, isNumber, merge, pushUnique, relativeLength, stableSort, syncTimeout } from '../../Shared/Utilities.js';
 /* *
  *
  *  Class
@@ -139,7 +139,7 @@ class Legend {
      * @param {Highcharts.LegendOptions} options
      */
     setOptions(options) {
-        const padding = pick(options.padding, 8);
+        const padding = (options.padding ?? 8);
         /**
          * Legend options.
          *
@@ -156,7 +156,7 @@ class Legend {
         this.itemMarginBottom = options.itemMarginBottom;
         this.padding = padding;
         this.initialItemY = padding - 5; // 5 is pixels above the text
-        this.symbolWidth = pick(options.symbolWidth, 16);
+        this.symbolWidth = (options.symbolWidth ?? 16);
         this.pages = [];
         this.proximate = options.layout === 'proximate' && !this.chart.inverted;
         // #12705: baseline has to be reset on every update
@@ -190,7 +190,7 @@ class Legend {
         }
         this.destroy();
         chart.isDirtyLegend = chart.isDirtyBox = true;
-        if (pick(redraw, true)) {
+        if (redraw ?? true) {
             chart.redraw();
         }
         fireEvent(this, 'afterUpdate', { redraw });
@@ -428,7 +428,7 @@ class Legend {
      * The item to render.
      */
     renderItem(item) {
-        const legend = this, legendItem = item.legendItem = item.legendItem || {}, chart = legend.chart, renderer = chart.renderer, options = legend.options, horizontal = options.layout === 'horizontal', symbolWidth = legend.symbolWidth, symbolPadding = options.symbolPadding || 0, itemStyle = legend.itemStyle, itemHiddenStyle = legend.itemHiddenStyle, itemDistance = horizontal ? pick(options.itemDistance, 20) : 0, ltr = !options.rtl, isSeries = !item.series, series = !isSeries && item.series.drawLegendSymbol ?
+        const legend = this, legendItem = item.legendItem = item.legendItem || {}, chart = legend.chart, renderer = chart.renderer, options = legend.options, horizontal = options.layout === 'horizontal', symbolWidth = legend.symbolWidth, symbolPadding = options.symbolPadding || 0, itemStyle = legend.itemStyle, itemHiddenStyle = legend.itemHiddenStyle, itemDistance = horizontal ? (options.itemDistance ?? 20) : 0, ltr = !options.rtl, isSeries = !item.series, series = !isSeries && item.series.drawLegendSymbol ?
             item.series :
             item, seriesOptions = series.options, showCheckbox = (!!legend.createCheckboxForItem &&
             seriesOptions &&
@@ -474,9 +474,11 @@ class Legend {
                     legend.fontMetrics.f + 3 + legend.itemMarginTop;
                 label.attr('y', legend.baseline);
                 legend.symbolHeight =
-                    pick(options.symbolHeight, legend.fontMetrics.f);
+                    (options.symbolHeight ?? legend.fontMetrics.f);
                 if (options.squareSymbol) {
-                    legend.symbolWidth = pick(options.symbolWidth, Math.max(legend.symbolHeight, 16));
+                    legend.symbolWidth =
+                        options.symbolWidth ??
+                            Math.max(legend.symbolHeight, 16);
                     itemExtraWidth = legend.symbolWidth + symbolPadding +
                         itemDistance + (showCheckbox ? 20 : 0);
                     if (ltr) {
@@ -528,7 +530,7 @@ class Legend {
      * @param {Highcharts.BubbleLegendItem|Highcharts.Point|Highcharts.Series} item
      */
     layoutItem(item) {
-        const options = this.options, padding = this.padding, horizontal = options.layout === 'horizontal', itemHeight = item.itemHeight, itemMarginBottom = this.itemMarginBottom, itemMarginTop = this.itemMarginTop, itemDistance = horizontal ? pick(options.itemDistance, 20) : 0, maxLegendWidth = this.maxLegendWidth, itemWidth = (options.alignColumns &&
+        const options = this.options, padding = this.padding, horizontal = options.layout === 'horizontal', itemHeight = item.itemHeight, itemMarginBottom = this.itemMarginBottom, itemMarginTop = this.itemMarginTop, itemDistance = horizontal ? (options.itemDistance ?? 20) : 0, maxLegendWidth = this.maxLegendWidth, itemWidth = (options.alignColumns &&
             this.totalItemWidth > maxLegendWidth) ?
             this.maxItemWidth :
             item.itemWidth, legendItem = item.legendItem || {};
@@ -582,7 +584,9 @@ class Legend {
             const seriesOptions = series?.options;
             // Handle showInLegend. If the series is linked to another series,
             // defaults to false.
-            if (series && pick(seriesOptions.showInLegend, !defined(seriesOptions.linkedTo) ? void 0 : false, true)) {
+            if (series &&
+                (seriesOptions.showInLegend ??
+                    (!defined(seriesOptions.linkedTo)))) {
                 // Use points or series for the legend item depending on
                 // legendType
                 allItems = allItems.concat(series.legendItem?.labels ||
@@ -864,7 +868,7 @@ class Legend {
      * @function Highcharts.Legend#handleOverflow
      */
     handleOverflow(legendHeight) {
-        const legend = this, chart = this.chart, renderer = chart.renderer, options = this.options, optionsY = options.y, alignTop = options.verticalAlign === 'top', padding = this.padding, maxHeight = options.maxHeight, navOptions = options.navigation, animation = pick(navOptions.animation, true), arrowSize = navOptions.arrowSize || 12, pages = this.pages, allItems = this.allItems, clipToHeight = function (height) {
+        const legend = this, chart = this.chart, renderer = chart.renderer, options = this.options, optionsY = options.y, alignTop = options.verticalAlign === 'top', padding = this.padding, maxHeight = options.maxHeight, navOptions = options.navigation, animation = (navOptions.animation ?? true), arrowSize = navOptions.arrowSize || 12, pages = this.pages, allItems = this.allItems, clipToHeight = function (height) {
             if (typeof height === 'number') {
                 clipRect.attr({
                     height: height
@@ -910,7 +914,7 @@ class Legend {
             navOptions.enabled !== false) {
             this.clipHeight = clipHeight =
                 Math.max(spaceHeight - 20 - this.titleHeight - padding, 0);
-            this.currentPage = pick(this.currentPage, 1);
+            this.currentPage = (this.currentPage ?? 1);
             this.fullHeight = legendHeight;
             // Fill pages with Y positions so that the top of each a legend item
             // defines the scroll top for each page (#2098)
@@ -1070,7 +1074,7 @@ class Legend {
             this.currentPage = currentPage;
             this.positionCheckboxes();
             // Fire event after scroll animation is complete
-            const animOptions = animObject(pick(animation, chart.renderer.globalAnimation, true));
+            const animOptions = animObject((animation ?? chart.renderer.globalAnimation ?? true));
             syncTimeout(() => {
                 fireEvent(this, 'afterScroll', { currentPage });
             }, animOptions.duration);

package/es-modules/Core/Legend/LegendSymbol.js

@@ -10,7 +10,7 @@
  *
  * */
 'use strict';
-import { extend, merge, pick } from '../../Shared/Utilities.js';
+import { extend, merge } from '../../Shared/Utilities.js';
 /* *
  *
  *  Namespace
@@ -90,7 +90,7 @@ var LegendSymbol;
         // Draw the marker
         if (markerOptions && markerOptions.enabled !== false && symbolWidth) {
             // Do not allow the marker to be larger than the symbolHeight
-            let radius = Math.min(pick(markerOptions.radius, generalRadius), generalRadius);
+            let radius = Math.min((markerOptions.radius ?? generalRadius), generalRadius);
             // Restrict symbol markers size
             if (symbol.indexOf('url') === 0) {
                 markerOptions = merge(markerOptions, {

package/es-modules/Core/MSPointer.js

@@ -13,7 +13,7 @@
 import H from './Globals.js';
 const { charts, composed, doc, noop, win } = H;
 import Pointer from './Pointer.js';
-import { addEvent, attr, css, defined, objectEach, pick, pushUnique, removeEvent } from '../Shared/Utilities.js';
+import { addEvent, attr, css, defined, objectEach, pushUnique, removeEvent } from '../Shared/Utilities.js';
 /* *
  *
  *  Constants
@@ -191,7 +191,7 @@ class MSPointer extends Pointer {
         const tooltip = this.chart.tooltip;
         super.setDOMEvents();
         if (this.hasZoom ||
-            pick((tooltip?.options.followTouchMove), true)) {
+            ((tooltip?.options.followTouchMove) ?? true)) {
             this.batchMSEvents(addEvent);
         }
     }

package/es-modules/Core/Math3D.js

@@ -11,7 +11,6 @@
  * */
 'use strict';
 import H from './Globals.js';
-import { pick } from '../Shared/Utilities.js';
 const { deg2rad } = H;
 /* *
  *
@@ -98,11 +97,11 @@ function perspective(points, chart, insidePlotArea, useInvertedPersp) {
     /* The useInvertedPersp argument is used for inverted charts with
      * already inverted elements, such as dataLabels or tooltip positions.
      */
-    inverted = pick(useInvertedPersp, insidePlotArea ? chart.inverted : false), origin = {
+    inverted = useInvertedPersp ?? (insidePlotArea ? chart.inverted : false), origin = {
         x: chart.plotWidth / 2,
         y: chart.plotHeight / 2,
         z: options3d.depth / 2,
-        vd: pick(options3d.depth, 1) * pick(options3d.viewDistance, 0)
+        vd: (options3d.depth ?? 1) * (options3d.viewDistance ?? 0)
     }, scale = chart.scale3d || 1, beta = deg2rad * options3d.beta * (inverted ? -1 : 1), alpha = deg2rad * options3d.alpha * (inverted ? -1 : 1), angles = {
         cosA: Math.cos(alpha),
         cosB: Math.cos(-beta),
@@ -181,13 +180,13 @@ function pointCameraDistance(coordinates, chart) {
     const options3d = chart.options.chart.options3d, cameraPosition = {
         x: chart.plotWidth / 2,
         y: chart.plotHeight / 2,
-        z: pick(options3d.depth, 1) * pick(options3d.viewDistance, 0) +
+        z: (options3d.depth ?? 1) * (options3d.viewDistance ?? 0) +
             options3d.depth
     }, 
     // Added support for objects with plotX or x coordinates.
-    distance = Math.sqrt(Math.pow(cameraPosition.x - pick(coordinates.plotX, coordinates.x), 2) +
-        Math.pow(cameraPosition.y - pick(coordinates.plotY, coordinates.y), 2) +
-        Math.pow(cameraPosition.z - pick(coordinates.plotZ, coordinates.z), 2));
+    distance = Math.sqrt(Math.pow(cameraPosition.x - (coordinates.plotX ?? coordinates.x), 2) +
+        Math.pow(cameraPosition.y - (coordinates.plotY ?? coordinates.y), 2) +
+        Math.pow(cameraPosition.z - (coordinates.plotZ ?? coordinates.z), 2));
     return distance;
 }
 /**

package/es-modules/Core/Pointer.js

@@ -12,7 +12,7 @@
 'use strict';
 import H from './Globals.js';
 const { charts, composed, isTouchDevice } = H;
-import { addEvent, attr, css, defined, extend, find, fireEvent, isNumber, isObject, objectEach, offset, pick, pushUnique, splat } from '../Shared/Utilities.js';
+import { addEvent, attr, css, defined, extend, find, fireEvent, isNumber, isObject, objectEach, offset, pushUnique, splat } from '../Shared/Utilities.js';
 /**
  *
  *  Functions
@@ -500,7 +500,7 @@ class Pointer {
         const hoverPoints = [], useExisting = !!(isDirectTouch && existingHoverPoint), filter = function (s) {
             return (s.visible &&
                 !(!shared && s.directTouch) && // #3821
-                pick(s.options.enableMouseTracking, true));
+                (s.options.enableMouseTracking ?? true));
         };
         let hoverSeries = existingHoverSeries, 
         // Which series to look in for the hover point
@@ -686,8 +686,8 @@ class Pointer {
         const ePos = (touches ?
             touches.length ?
                 touches.item(0) :
-                (pick(// #13534
-                touches.changedTouches, e.changedTouches))[0] :
+                (touches.changedTouches ??
+                    e.changedTouches)[0] :
             e);
         // Get mouse position
         if (!chartPosition) {
@@ -761,7 +761,7 @@ class Pointer {
      * @function Highcharts.Pointer#onContainerMouseLeave
      */
     onContainerMouseLeave(e) {
-        const { pointer } = charts[pick(Pointer.hoverChartIndex, -1)] || {};
+        const { pointer } = charts[(Pointer.hoverChartIndex ?? -1)] || {};
         e = this.normalize(e);
         this.onContainerMouseMove(e);
         // #4886, MS Touch end fires mouseleave but with no related target
@@ -861,7 +861,7 @@ class Pointer {
         if (e?.touches && this.hasPinchMoved) {
             e?.preventDefault?.();
         }
-        charts[pick(Pointer.hoverChartIndex, -1)]
+        charts[(Pointer.hoverChartIndex ?? -1)]
             ?.pointer
             ?.drop(e);
     }
@@ -1368,7 +1368,7 @@ class Pointer {
      */
     setHoverChartIndex(e) {
         const chart = this.chart;
-        const hoverChart = H.charts[pick(Pointer.hoverChartIndex, -1)];
+        const hoverChart = H.charts[(Pointer.hoverChartIndex ?? -1)];
         if (hoverChart &&
             hoverChart !== chart) {
             const relatedTargetObj = { relatedTarget: chart.container };
@@ -1414,7 +1414,7 @@ class Pointer {
                             Math.pow(pinchDown[0].chartY - e.chartY, 2)) >= 16 :
                         false;
                 }
-                if (pick(hasMoved, true)) {
+                if (hasMoved ?? true) {
                     this.pinch(e);
                 }
             }
@@ -1457,7 +1457,7 @@ class Pointer {
         let zoomType = chart.zooming.type || '', zoomX, zoomY;
         // Look for the pinchType option
         if (/touch/.test(e.type)) {
-            zoomType = pick(chart.zooming.pinchType, zoomType);
+            zoomType = (chart.zooming.pinchType ?? zoomType);
         }
         this.zoomX = zoomX = /x/.test(zoomType);
         this.zoomY = zoomY = /y/.test(zoomType);

package/es-modules/Core/Renderer/RendererUtilities.js

@@ -15,7 +15,7 @@
  *  Imports
  *
  * */
-import { clamp, pick, pushUnique, stableSort } from '../../Shared/Utilities.js';
+import { clamp, pushUnique, stableSort } from '../../Shared/Utilities.js';
 /* *
  *
  *  Namespace
@@ -104,7 +104,7 @@ var RendererUtilities;
         boxes = boxes.map((box) => ({
             size: box.size,
             targets: [box.target],
-            align: pick(box.align, 0.5)
+            align: (box.align ?? 0.5)
         }));
         while (overlapping) {
             // Initial positions: target centered in box

package/es-modules/Core/Renderer/SVG/SVGElement.js

@@ -14,7 +14,7 @@ import { animate, animObject, stop } from '../../Animation/AnimationUtilities.js
 import Color from '../../Color/Color.js';
 import H from '../../Globals.js';
 const { deg2rad, doc, svg, SVG_NS, win, isFirefox } = H;
-import { addEvent, attr, createElement, crisp, css, defined, erase, extend, fireEvent, getAlignFactor, isArray, isFunction, isNumber, isObject, isString, merge, objectEach, pInt, pick, pushUnique, replaceNested, syncTimeout } from '../../../Shared/Utilities.js';
+import { addEvent, attr, createElement, crisp, css, defined, erase, extend, fireEvent, getAlignFactor, isArray, isFunction, isNumber, isObject, isString, merge, objectEach, pInt, pushUnique, replaceNested, syncTimeout } from '../../../Shared/Utilities.js';
 import { uniqueKey } from '../../Utilities.js';
 /* *
  *
@@ -70,8 +70,10 @@ class SVGElement {
      * Property value.
      */
     _defaultGetter(key) {
-        let ret = pick(this[key + 'Value'], // Align getter
-        this[key], this.element ? this.element.getAttribute(key) : null, 0);
+        let ret = (this[key + 'Value'] ??
+            this[key] ??
+            (this.element ? this.element.getAttribute(key) : null) ??
+            0);
         if (/^-?[\d\.]+$/.test(ret)) { // Is numerical
             ret = parseFloat(ret);
         }
@@ -234,7 +236,7 @@ class SVGElement {
             }
             alignTo = void 0; // Do not use the box
         }
-        const alignToBox = pick(alignTo, renderer[alignToKey], renderer), 
+        const alignToBox = alignTo ?? renderer[alignToKey] ?? renderer, 
         // Default: left align
         x = (alignToBox.x || 0) + (alignOptions.x || 0) +
             ((alignToBox.width || 0) - (alignOptions.width || 0)) *
@@ -294,7 +296,7 @@ class SVGElement {
      * Returns the SVGElement for chaining.
      */
     animate(params, options, complete) {
-        const animOptions = animObject(pick(options, this.renderer.globalAnimation, true)), deferTime = animOptions.defer;
+        const animOptions = animObject((options ?? this.renderer.globalAnimation ?? true)), deferTime = animOptions.defer;
         // When the page is hidden save resources in the background by not
         // running animation at all (#9749).
         if (doc.hidden) {
@@ -786,7 +788,7 @@ class SVGElement {
                 .split(','); // Ending comma
             i = v.length;
             while (i--) {
-                v[i] = '' + (pInt(v[i]) * pick(strokeWidth, NaN));
+                v[i] = '' + (pInt(v[i]) * (strokeWidth ?? NaN));
             }
             value = v.join(',').replace(/NaN/g, 'none'); // #3226
             this.element.setAttribute('stroke-dasharray', value);
@@ -926,7 +928,7 @@ class SVGElement {
      *         The bounding box with `x`, `y`, `width` and `height` properties.
      */
     getBBox(reload, rot) {
-        const wrapper = this, { element, renderer, styles, textStr } = wrapper, { cache, cacheKeys } = renderer, isSVG = element.namespaceURI === wrapper.SVG_NS, rotation = pick(rot, wrapper.rotation, 0), fontSize = renderer.styledMode ? (element &&
+        const wrapper = this, { element, renderer, styles, textStr } = wrapper, { cache, cacheKeys } = renderer, isSVG = element.namespaceURI === wrapper.SVG_NS, rotation = (rot ?? wrapper.rotation ?? 0), fontSize = renderer.styledMode ? (element &&
             SVGElement.prototype.getStyle.call(element, 'font-size')) : (styles.fontSize), cacheKey = this.getBBoxCacheKey([
             renderer.rootFontSize,
             this.textWidth, // #7874, also useHTML
@@ -1452,7 +1454,7 @@ class SVGElement {
     symbolAttr(hash) {
         const wrapper = this;
         SVGElement.symbolCustomAttribs.forEach(function (key) {
-            wrapper[key] = pick(hash[key], wrapper[key]);
+            wrapper[key] = (hash[key] ?? wrapper[key]);
         });
         wrapper.attr({
             d: wrapper.renderer.symbols[wrapper.symbolName](wrapper.x, wrapper.y, wrapper.width, wrapper.height, wrapper)
@@ -1492,7 +1494,7 @@ class SVGElement {
         }
         // Replace text content and escape markup
         titleNode.textContent = replaceNested(// Scan #[73]
-        pick(value, ''), // #3276, #3895
+        (value ?? ''), // #3276, #3895
         [/<[^>]*>/g, '']).replace(/&lt;/g, '<').replace(/&gt;/g, '>');
     }
     /**

package/es-modules/Core/Renderer/SVG/SVGElement3D.js

@@ -15,7 +15,7 @@
 import Color from '../../Color/Color.js';
 const { parse: color } = Color;
 import SVGElement from './SVGElement.js';
-import { defined, pick } from '../../../Shared/Utilities.js';
+import { defined } from '../../../Shared/Utilities.js';
 /* *
  *
  *  Class
@@ -113,7 +113,7 @@ class SVGElement3D extends SVGElement {
         for (const part of elem3d.parts) {
             // If different props for different parts
             if (partsProps) {
-                props = pick(partsProps[part], false);
+                props = (partsProps[part] ?? false);
             }
             // Only if something to set, but allow undefined
             if (props !== false) {

package/es-modules/Core/Renderer/SVG/SVGLabel.js

@@ -10,7 +10,7 @@
  *
  * */
 import SVGElement from './SVGElement.js';
-import { defined, extend, getAlignFactor, isNumber, merge, pick, removeEvent } from '../../../Shared/Utilities.js';
+import { defined, extend, getAlignFactor, isNumber, merge, removeEvent } from '../../../Shared/Utilities.js';
 /* *
  *
  *  Class
@@ -180,7 +180,7 @@ class SVGLabel extends SVGElement {
         if ((this.textStr && this.bBox.width === 0 && this.bBox.height === 0) || this.rotation) {
             this.updateBoxSize();
         }
-        const { padding, height = 0, translateX = 0, translateY = 0, width = 0 } = this, paddingLeft = pick(this.paddingLeft, padding), rotation = rot ?? (this.rotation || 0);
+        const { padding, height = 0, translateX = 0, translateY = 0, width = 0 } = this, paddingLeft = (this.paddingLeft ?? padding), rotation = rot ?? (this.rotation || 0);
         let bBox = {
             width,
             height,
@@ -233,7 +233,7 @@ class SVGLabel extends SVGElement {
         this.attr({
             // Alignment is available now  (#3295, 0 not rendered if given
             // as a value)
-            text: pick(this.textStr, ''),
+            text: (this.textStr ?? ''),
             x: this.x || 0,
             y: this.y || 0
         });
@@ -389,8 +389,8 @@ class SVGLabel extends SVGElement {
     /** @internal */
     getPaddedWidth() {
         const padding = this.padding;
-        const paddingLeft = pick(this.paddingLeft, padding);
-        const paddingRight = pick(this.paddingRight, padding);
+        const paddingLeft = (this.paddingLeft ?? padding);
+        const paddingRight = (this.paddingRight ?? padding);
         return ((this.widthSetting || this.bBox.width || 0) +
             paddingLeft +
             paddingRight);