highcharts 13.0.0 → 13.0.2

package/es-modules/Extensions/Exporting/Exporting.js

@@ -24,7 +24,7 @@ import Fullscreen from './Fullscreen.js';
 import G from '../../Core/Globals.js';
 const { composed, doc, isFirefox, isMS, isSafari, SVG_NS, win } = G;
 import HU from '../../Core/HttpUtilities.js';
-import { addEvent, createElement, css, discardElement, extend, find, fireEvent, internalClearTimeout, isObject, merge, objectEach, pick, pushUnique, removeEvent, splat } from '../../Shared/Utilities.js';
+import { addEvent, createElement, css, discardElement, extend, find, fireEvent, internalClearTimeout, isObject, merge, objectEach, pushUnique, removeEvent, splat } from '../../Shared/Utilities.js';
 import { error, uniqueKey } from '../../Core/Utilities.js';
 AST.allowedAttributes.push('data-z-index', 'fill-opacity', 'filter', 'preserveAspectRatio', 'rx', 'ry', 'stroke-dasharray', 'stroke-linejoin', 'stroke-opacity', 'text-anchor', 'transform', 'transform-origin', 'version', 'viewBox', 'visibility', 'xmlns', 'xmlns:xlink');
 AST.allowedTags.push('desc', 'clippath', 'fedropshadow', 'femorphology', 'g', 'image');
@@ -186,8 +186,8 @@ export class Exporting {
     }
     /** @internal */
     /**
-     * Collects all unique font family names used inline
-     * within <text> and <tspan> elements of an SVG by inspecting
+     * Collects all unique font family names used inline within the root
+     * SVG element and its <text> and <tspan> elements by inspecting
      * their style attributes and font-family attributes.
      *
      * @param {SVGSVGElement} svg
@@ -196,8 +196,11 @@ export class Exporting {
      * The set to store and accumulate unique font family names.
      */
     static collectSVGInlineFonts(svg, usedFontFamilies) {
-        const textNodes = svg.querySelectorAll('text, tspan');
-        for (const textNode of Array.from(textNodes)) {
+        // Include the root SVG element itself, since the chart-wide
+        // `chart.style.fontFamily` is applied there rather than on the
+        // individual text nodes (#24722).
+        const nodes = [svg, ...Array.from(svg.querySelectorAll('text, tspan'))];
+        for (const textNode of nodes) {
             const styleAttr = textNode.getAttribute('style') || '';
             const inlineFontFamily = textNode.getAttribute('font-family') || '';
             if (styleAttr.indexOf('font-family') > -1) {
@@ -220,18 +223,6 @@ export class Exporting {
                 return;
             }
             visited.add(href);
-            try {
-                const sheetOrigin = new URL(href, doc.baseURI).origin;
-                if (sheetOrigin !== win.location.origin) {
-                    // We skip all cross-origin stylesheets on purpose.
-                    // This prevents DOM SecurityErrors and unhandled network
-                    // rejections when the browser blocks cssRules access.
-                    return;
-                }
-            }
-            catch {
-                // URL parsing failed, proceed to try/catch
-            }
         }
         try {
             for (const rule of Array.from(sheet.cssRules)) {
@@ -438,6 +429,12 @@ export class Exporting {
     static sanitizeSVG(svg, 
     /* eslint-disable-next-line @typescript-eslint/no-unused-vars */
     options) {
+        // Remove any HTML added to the container after the SVG, like the
+        // Stock Tools GUI wrapper (#894, #9087, #24754)
+        const split = svg.lastIndexOf('</svg>');
+        if (split > -1) {
+            svg = svg.substr(0, split + 6);
+        }
         svg = svg
             // Some tags needs to be closed in xhtml (#13726)
             .replace(/(<(?:img|br).*?(?=\>))>/g, '$1 />')
@@ -535,7 +532,7 @@ export class Exporting {
             };
         }
         if (btnOptions.text && btnOptions.symbol) {
-            theme.paddingLeft = pick(theme.paddingLeft, 30);
+            theme.paddingLeft = (theme.paddingLeft ?? 30);
         }
         else if (!btnOptions.text) {
             extend(theme, {
@@ -548,8 +545,8 @@ export class Exporting {
             .button(btnOptions.text || '', 0, 0, callback, theme, void 0, void 0, void 0, void 0, btnOptions.useHTML)
             .addClass(options.className || '')
             .attr({
-            title: pick(chart.options.lang[(btnOptions._titleKey ||
-                btnOptions.titleKey)], '')
+            title: (chart.options.lang[(btnOptions._titleKey ||
+                btnOptions.titleKey)] ?? '')
         });
         button.menuClassName = (options.menuClassName ||
             'highcharts-menu-' + exporting.btnCount++);
@@ -578,7 +575,7 @@ export class Exporting {
             .add(exporting.group)
             .align(extend(btnOptions, {
             width: button.width,
-            x: pick(btnOptions.x, exporting.buttonOffset) // #1654
+            x: (btnOptions.x ?? exporting.buttonOffset) // #1654
         }), true, 'spacingBox');
         exporting.buttonOffset += (((button.width || 0) + (btnOptions.buttonSpacing || 0)) *
             (btnOptions.align === 'right' ? -1 : 1));
@@ -1198,6 +1195,7 @@ export class Exporting {
      * The SVG representation of the rendered chart.
      *
      * @emits Highcharts.Chart#event:getSVG
+     * @emits Highcharts.Chart#event:afterGetSVG
      *
      * @requires modules/exporting
      */
@@ -1316,11 +1314,12 @@ export class Exporting {
             if (exporting?.options.applyStyleSheets) {
                 this.applyShadowDOMStyles(chartCopy);
             }
+            fireEvent(chart, 'getSVG', { chartCopy });
             // Get the SVG from the container's innerHTML
             svg = exporting?.getChartHTML(chart.styledMode ||
                 options?.exporting?.applyStyleSheets) || '';
-            fireEvent(chart, 'getSVG', { chartCopy: chartCopy });
             svg = Exporting.sanitizeSVG(svg, options);
+            fireEvent(chart, 'afterGetSVG', { chartCopy, svg });
             // Free up memory
             options = void 0;
             chartCopy.destroy();
@@ -1373,11 +1372,11 @@ export class Exporting {
         // getComputedStyle sees them
         rootNode?.querySelectorAll('style').forEach((style) => {
             const clonedStyle = style.cloneNode(true);
-            chartCopy.container.appendChild(clonedStyle);
+            chartCopy.renderer.defs.element.appendChild(clonedStyle);
             // Store for the later removal
             shadowStyles.push(clonedStyle);
         });
-        addEvent(chart, 'getSVG', () => {
+        addEvent(chart, 'afterGetSVG', () => {
             // Remove temporary Shadow DOM styles
             shadowStyles.forEach((style) => {
                 style.remove();
@@ -1644,8 +1643,9 @@ export class Exporting {
             await this.fallbackToServer(exportingOptions, new Error('Image type not supported for this chart/browser.'));
             return;
         }
-        // Hook into getSVG to get a copy of the chart copy's container (#8273)
-        const unbindGetSVG = addEvent(chart, 'getSVG', (e) => {
+        // Hook into afterGetSVG to get a copy of the chart copy's container
+        // (#8273)
+        const unbindGetSVG = addEvent(chart, 'afterGetSVG', (e) => {
             chartCopyOptions = e.chartCopy.options;
             chartCopyContainer =
                 e.chartCopy.container.cloneNode(true);
@@ -1829,7 +1829,7 @@ export class Exporting {
     update(exportingOptions, redraw) {
         this.isDirty = true;
         merge(true, this.options, exportingOptions);
-        if (pick(redraw, true)) {
+        if (redraw ?? true) {
             this.chart.redraw();
         }
     }
@@ -2051,7 +2051,7 @@ Exporting.unstyledElements = [
                 if (chart.exporting) {
                     chart.exporting.isDirty = true;
                     merge(true, chart.options.navigation, options);
-                    if (pick(redraw, true)) {
+                    if (redraw ?? true) {
                         chart.redraw();
                     }
                 }

package/es-modules/Extensions/Exporting/ExportingDefaults.js

@@ -808,6 +808,38 @@ const navigation = {
              * Padding for the button.
              */
             padding: 5,
+            /**
+             * Tri-state button styles.
+             *
+             * @sample highcharts/navigation/buttonoptions-theme/
+             *         Theming the buttons
+             *
+             * @apioption navigation.buttonOptions.theme.states
+             */
+            /**
+             * SVG attributes for the disabled state of the button.
+             *
+             * @type      {Highcharts.SVGAttributes}
+             * @apioption navigation.buttonOptions.theme.states.disabled
+             */
+            /**
+             * SVG attributes for the hovered state of the button.
+             *
+             * @type      {Highcharts.SVGAttributes}
+             * @apioption navigation.buttonOptions.theme.states.hover
+             */
+            /**
+             * SVG attributes for the selected state of the button.
+             *
+             * @type      {Highcharts.SVGAttributes}
+             * @apioption navigation.buttonOptions.theme.states.select
+             */
+            /**
+             * CSS styling for the button's text or symbol.
+             *
+             * @type      {Highcharts.CSSObject}
+             * @apioption navigation.buttonOptions.theme.style
+             */
             /**
              * Default stroke for the buttons.
              *

package/es-modules/Extensions/MarkerClusters/MarkerClusterScatter.js

@@ -13,8 +13,7 @@
  *
  * */
 'use strict';
-import A from '../../Core/Animation/AnimationUtilities.js';
-const { animObject } = A;
+import { animObject } from '../../Core/Animation/AnimationUtilities.js';
 import DataTableCore from '../../Data/DataTableCore.js';
 import MarkerClusterDefaults from './MarkerClusterDefaults.js';
 const { cluster: clusterDefaults } = MarkerClusterDefaults;

package/es-modules/Extensions/MarkerClusters/MarkerClusters.js

@@ -13,8 +13,7 @@
  *
  * */
 'use strict';
-import A from '../../Core/Animation/AnimationUtilities.js';
-const { animObject } = A;
+import { animObject } from '../../Core/Animation/AnimationUtilities.js';
 import D from '../../Core/Defaults.js';
 const { defaultOptions } = D;
 import H from '../../Core/Globals.js';

package/es-modules/Extensions/MouseWheelZoom/MouseWheelZoom.js

@@ -11,7 +11,7 @@
  * */
 'use strict';
 import NBU from '../Annotations/NavigationBindingsUtilities.js';
-import { addEvent, defined, internalClearTimeout, isObject, merge, pick } from '../../Shared/Utilities.js';
+import { addEvent, defined, internalClearTimeout, isObject, merge } from '../../Shared/Utilities.js';
 const { getAssignedAxis } = NBU;
 /* *
  *
@@ -40,7 +40,7 @@ const optionsToObject = (options) => {
 };
 /** @internal */
 const zoomBy = function (chart, howMuch, xAxis, yAxis, mouseX, mouseY, options) {
-    const type = pick(options.type, chart.zooming.type, '');
+    const type = (options.type ?? chart.zooming.type ?? '');
     let axes = [];
     if (type === 'x') {
         axes = xAxis;

package/es-modules/Extensions/OfflineExporting/OfflineExporting.js

@@ -391,17 +391,44 @@ var OfflineExporting;
             // nodes
             titleElements = el.getElementsByTagName('title');
             [].forEach.call(titleElements, function (titleElement) {
-                el.removeChild(titleElement);
+                titleElement.remove();
             });
             // Remove all .highcharts-text-outline elements, #17170
             outlineElements =
                 el.getElementsByClassName('highcharts-text-outline');
             while (outlineElements.length > 0) {
-                const outline = outlineElements[0];
-                if (outline.parentNode) {
-                    outline.parentNode.removeChild(outline);
+                outlineElements[0].remove();
+            }
+        });
+        // Work around jsPDF's missing support for color(srgb r g b) format
+        // (#25001)
+        const srgbColorRegex = /color\(\s*srgb\s+([\d.]+)[, ]+([\d.]+)[, ]+([\d.]+)(?:\s*\/\s*([\d.]+))?\s*\)/; // eslint-disable-line max-len
+        const convertColorSRGBToRGB = (srgbColor) => {
+            if (srgbColor?.startsWith('color(srgb')) {
+                const rgba = srgbColor.match(srgbColorRegex);
+                if (rgba) {
+                    const toChannel = (value) => Math.round(Math.max(0, Math.min(1, parseFloat(value))) *
+                        255), toAlpha = (value) => Math.max(0, Math.min(1, parseFloat(value))), r = toChannel(rgba[1]), g = toChannel(rgba[2]), b = toChannel(rgba[3]), alpha = rgba[4];
+                    if (alpha !== void 0) {
+                        return `rgba(${r}, ${g}, ${b}, ${toAlpha(alpha)})`;
+                    }
+                    return `rgb(${r}, ${g}, ${b})`;
                 }
             }
+        };
+        Array.from(dummySVGContainer.querySelectorAll('*')).forEach((el) => {
+            ['color', 'fill', 'stop-color', 'stroke'].forEach((prop) => {
+                // Handle attributes
+                const attrRGB = convertColorSRGBToRGB(el.getAttribute(prop));
+                if (attrRGB) {
+                    el.setAttribute(prop, attrRGB);
+                }
+                // Handle style properties
+                const styleRGB = convertColorSRGBToRGB(el.style?.[prop]);
+                if (styleRGB) {
+                    el.style[prop] = styleRGB;
+                }
+            });
         });
         return dummySVGContainer.querySelector('svg');
     }

package/es-modules/Extensions/Pane/PaneComposition.js

@@ -3,7 +3,7 @@
  *  Imports
  *
  * */
-import { addEvent, correctFloat, defined, pick } from '../../Shared/Utilities.js';
+import { addEvent, correctFloat, defined } from '../../Shared/Utilities.js';
 /* *
  *
  *  Functions
@@ -119,7 +119,7 @@ function onPointerBeforeGetHoverData(eventArgs) {
         eventArgs.filter = function (s) {
             return (s.visible &&
                 !(!eventArgs.shared && s.directTouch) && // #3821
-                pick(s.options.enableMouseTracking, true) &&
+                (s.options.enableMouseTracking ?? true) &&
                 (!chart.hoverPane || s.xAxis.pane === chart.hoverPane));
         };
     }

package/es-modules/Extensions/Pane/PaneDefaults.js

@@ -26,7 +26,7 @@ const { defaultOptions } = D;
  * @sample {highcharts} highcharts/series-solidgauge/pane-borderradius
  *         Solid gauge with background settings
  *
- * @type         {*|Array<*>}
+ * @type         {null|*|Array<*>}
  * @requires     highcharts-more
  * @optionparent pane.background
  */

package/es-modules/Extensions/ParallelCoordinates/ParallelAxis.js

@@ -13,7 +13,7 @@
  * */
 'use strict';
 import ParallelCoordinatesDefaults from './ParallelCoordinatesDefaults.js';
-import { addEvent, arrayMax, arrayMin, isNumber, merge, pick } from '../../Shared/Utilities.js';
+import { addEvent, arrayMax, arrayMin, isNumber, merge } from '../../Shared/Utilities.js';
 /* *
  *
  *  Class
@@ -118,7 +118,7 @@ var ParallelAxis;
             else {
                 const axisIndex = chart.yAxis.indexOf(axis); // #13608
                 axis.options = merge(axis.options, axis.chart.options.chart.parallelAxes, e.userOptions);
-                parallelCoordinates.position = pick(parallelCoordinates.position, axisIndex >= 0 ? axisIndex : chart.yAxis.length);
+                parallelCoordinates.position = parallelCoordinates.position ?? (axisIndex >= 0 ? axisIndex : chart.yAxis.length);
                 parallelCoordinates.setPosition(axisPosition, axis.options);
             }
         }

package/es-modules/Extensions/ParallelCoordinates/ParallelCoordinates.js

@@ -151,6 +151,9 @@ var ParallelCoordinates;
      */
     function onChartUpdate(e) {
         const chart = this, options = e.options;
+        if (e.hasChanged === false) {
+            return;
+        }
         if (options.chart) {
             if (defined(options.chart.parallelCoordinates)) {
                 chart.hasParallelCoordinates =

package/es-modules/Extensions/PatternFill.js

@@ -15,7 +15,7 @@
 import { animObject } from '../Core/Animation/AnimationUtilities.js';
 import D from '../Core/Defaults.js';
 const { getOptions } = D;
-import { addEvent, defined, erase, extend, isObject, merge, pick, removeEvent, wrap } from '../Shared/Utilities.js';
+import { addEvent, defined, erase, extend, isObject, merge, removeEvent, wrap } from '../Shared/Utilities.js';
 /* *
  *
  *  Constants
@@ -284,7 +284,9 @@ function onRendererComplexColor(args) {
         }
         // Add it. This function does nothing if an element with this ID
         // already exists.
-        this.addPattern(pattern, !this.forExport && pick(pattern.animation, this.globalAnimation, { duration: 100 }));
+        this.addPattern(pattern, !this.forExport && (pattern.animation ??
+            this.globalAnimation ??
+            { duration: 100 }));
         value = `url(${this.url}#${pattern.id + (this.forExport ? '-export' : '')})`;
     }
     else {
@@ -448,7 +450,7 @@ function pointCalculatePatternDimensions(pattern) {
  * @requires modules/pattern-fill
  */
 function rendererAddPattern(options, animation) {
-    const animate = pick(animation, true), animationOptions = animObject(animate), color = options.color ||
+    const animate = (animation ?? true), animationOptions = animObject(animate), color = options.color ||
         'var(--highcharts-neutral-color-80)', defaultSize = 32, height = options.height ||
         (typeof options._height === 'number' ? options._height : 0) ||
         defaultSize, width = options.width ||
@@ -516,7 +518,7 @@ function rendererAddPattern(options, animation) {
         };
         if (!this.styledMode) {
             attribs.stroke = path.stroke || color;
-            attribs['stroke-width'] = pick(path.strokeWidth, 2);
+            attribs['stroke-width'] = (path.strokeWidth ?? 2);
             attribs.fill = path.fill || 'none';
         }
         if (path.transform) {
@@ -531,7 +533,7 @@ function rendererAddPattern(options, animation) {
             this.image(options.image, 0, 0, width, height, function () {
                 // Onload
                 this.animate({
-                    opacity: pick(options.opacity, 1)
+                    opacity: (options.opacity ?? 1)
                 }, animationOptions);
                 removeEvent(this.element, 'load');
             }).attr({ opacity: 0 }).add(pattern);

package/es-modules/Extensions/PriceIndication.js

@@ -13,7 +13,7 @@
 'use strict';
 import H from '../Core/Globals.js';
 const { composed } = H;
-import { addEvent, merge, pushUnique } from '../Shared/Utilities.js';
+import { addEvent, clamp, merge, pushUnique } from '../Shared/Utilities.js';
 /* *
  *
  *  Composition
@@ -56,7 +56,7 @@ function onSeriesAfterRender() {
         seriesOptions.id !== 'highcharts-navigator-series' &&
         series.visible) {
         const { points, xAxis, yAxis } = series, { cross, crosshair, crossLabel } = yAxis, pLength = points.length, dataLength = series.dataTable.rowCount, x = series.getColumn('x')[dataLength - 1], y = series.getColumn('y')[dataLength - 1] ??
-            series.getColumn('close')[dataLength - 1];
+            series.getColumn('close')[dataLength - 1], modifiedY = series.dataModify?.modifyValue(y) ?? y;
         if (lastPrice?.enabled) {
             yAxis.crosshair = yAxis.options.crosshair = seriesOptions.lastPrice;
             if (!series.chart.styledMode &&
@@ -75,8 +75,9 @@ function onSeriesAfterRender() {
             yAxis.drawCrosshair(void 0, ({
                 x: x,
                 y,
-                plotX: xAxis.toPixels(x, true),
-                plotY: yAxis.toPixels(y, true)
+                series,
+                plotX: clamp(xAxis.toPixels(x, true), 0, xAxis.len),
+                plotY: yAxis.toPixels(modifiedY, true)
             }));
             // Save price
             if (series.yAxis.cross) {

package/es-modules/Extensions/ScrollablePlotArea.js

@@ -12,8 +12,7 @@
  *  horizontally on mobile devices. Supports left and right side axes.
  */
 'use strict';
-import A from '../Core/Animation/AnimationUtilities.js';
-const { stop } = A;
+import { stop } from '../Core/Animation/AnimationUtilities.js';
 import H from '../Core/Globals.js';
 const { composed } = H;
 import SVGRenderer from '../Core/Renderer/SVG/SVGRenderer.js';
@@ -336,6 +335,13 @@ ScrollablePlotArea.fixedSelectors = [
  * vertical scrolling, depending on whether the `minWidth` or `minHeight`
  * option is set.
  *
+ * **Note:** Because native browser scrollbars are used, they may
+ * overlap with fixed chart elements such as credits or the chart
+ * border. To avoid this collision, it is recommended to manually add
+ * extra space to the corresponding side using `chart.spacingBottom`
+ * (for horizontal scrollbars) or `chart.spacingRight` (for vertical
+ * scrollbars).
+ *
  * @sample highcharts/chart/scrollable-plotarea
  *         Scrollable plot area
  * @sample highcharts/chart/scrollable-plotarea-vertical

package/es-modules/Extensions/SeriesLabel/SeriesLabel.js

@@ -22,8 +22,7 @@
  * https://jsfiddle.net/highcharts/y5A37/
  */
 'use strict';
-import A from '../../Core/Animation/AnimationUtilities.js';
-const { animObject } = A;
+import { animObject } from '../../Core/Animation/AnimationUtilities.js';
 import T from '../../Core/Templating.js';
 const { format } = T;
 import D from '../../Core/Defaults.js';
@@ -33,7 +32,7 @@ const { composed } = H;
 import SeriesLabelDefaults from './SeriesLabelDefaults.js';
 import SLU from './SeriesLabelUtilities.js';
 const { boxIntersectLine, intersectRect } = SLU;
-import { addEvent, extend, fireEvent, internalClearTimeout, isNumber, pick, pushUnique, syncTimeout } from '../../Shared/Utilities.js';
+import { addEvent, extend, fireEvent, internalClearTimeout, isNumber, pushUnique, syncTimeout } from '../../Shared/Utilities.js';
 /* *
  *
  *  Constants
@@ -50,7 +49,7 @@ const labelDistance = 3;
  * @internal
  */
 function checkClearPoint(series, x, y, bBox, checkDistance) {
-    const chart = series.chart, seriesLabelOptions = series.options.label || {}, onArea = pick(seriesLabelOptions.onArea, !!series.area), findDistanceToOthers = (onArea || seriesLabelOptions.connectorAllowed), leastDistance = 16, boxesToAvoid = chart.boxesToAvoid;
+    const chart = series.chart, seriesLabelOptions = series.options.label || {}, onArea = (seriesLabelOptions.onArea ?? !!series.area), findDistanceToOthers = (onArea || seriesLabelOptions.connectorAllowed), leastDistance = 16, boxesToAvoid = chart.boxesToAvoid;
     let distToOthersSquared = Number.MAX_VALUE, // Distance to other graphs
     distToPointSquared = Number.MAX_VALUE, dist, connectorPoint, withinRange, xDist, yDist, i, j;
     /**
@@ -197,7 +196,7 @@ function drawSeriesLabels(chart) {
         if (!labelOptions || (!series.xAxis && !series.yAxis)) {
             return;
         }
-        const colorClass = ('highcharts-color-' + pick(series.colorIndex, 'none')), isNew = !series.labelBySeries, minFontSize = labelOptions.minFontSize, maxFontSize = labelOptions.maxFontSize, inverted = chart.inverted, paneLeft = (inverted ? series.yAxis.pos : series.xAxis.pos), paneTop = (inverted ? series.xAxis.pos : series.yAxis.pos), paneWidth = chart.inverted ? series.yAxis.len : series.xAxis.len, paneHeight = chart.inverted ? series.xAxis.len : series.yAxis.len, points = series.interpolatedPoints, onArea = pick(labelOptions.onArea, !!series.area), results = [], xData = series.getColumn('x');
+        const colorClass = ('highcharts-color-' + (series.colorIndex ?? 'none')), isNew = !series.labelBySeries, minFontSize = labelOptions.minFontSize, maxFontSize = labelOptions.maxFontSize, inverted = chart.inverted, paneLeft = (inverted ? series.yAxis.pos : series.xAxis.pos), paneTop = (inverted ? series.xAxis.pos : series.yAxis.pos), paneWidth = chart.inverted ? series.yAxis.len : series.xAxis.len, paneHeight = chart.inverted ? series.xAxis.len : series.yAxis.len, points = series.interpolatedPoints, onArea = (labelOptions.onArea ?? !!series.area), results = [], xData = series.getColumn('x');
         let bBox, x, y, clearPoint, i, best, label = series.labelBySeries, dataExtremes, areaMin, areaMax;
         // Stay within the area data bounds (#10038)
         if (onArea && !inverted) {
@@ -212,7 +211,7 @@ function drawSeriesLabels(chart) {
          * @internal
          */
         function insidePane(x, y, bBox) {
-            const leftBound = Math.max(paneLeft, pick(areaMin, -Infinity)), rightBound = Math.min(paneLeft + paneWidth, pick(areaMax, Infinity));
+            const leftBound = Math.max(paneLeft, (areaMin ?? -Infinity)), rightBound = Math.min(paneLeft + paneWidth, (areaMax ?? Infinity));
             return (x > leftBound &&
                 x <= rightBound - bBox.width &&
                 y >= paneTop &&
@@ -419,7 +418,7 @@ function getPointsOnGraph(series) {
     if (!series.xAxis && !series.yAxis) {
         return;
     }
-    const distance = 16, points = series.points, interpolated = [], graph = series.graph || series.area, node = graph && graph.element, inverted = series.chart.inverted, xAxis = series.xAxis, yAxis = series.yAxis, paneLeft = inverted ? yAxis.pos : xAxis.pos, paneTop = inverted ? xAxis.pos : yAxis.pos, paneHeight = inverted ? xAxis.len : yAxis.len, paneWidth = inverted ? yAxis.len : xAxis.len, seriesLabelOptions = series.options.label || {}, onArea = pick(seriesLabelOptions.onArea, !!series.area), translatedThreshold = yAxis.getThreshold(series.options.threshold), grid = {}, chartCenterKey = inverted ? 'chartCenterX' : 'chartCenterY';
+    const distance = 16, points = series.points, interpolated = [], graph = series.graph || series.area, node = graph && graph.element, inverted = series.chart.inverted, xAxis = series.xAxis, yAxis = series.yAxis, paneLeft = inverted ? yAxis.pos : xAxis.pos, paneTop = inverted ? xAxis.pos : yAxis.pos, paneHeight = inverted ? xAxis.len : yAxis.len, paneWidth = inverted ? yAxis.len : xAxis.len, seriesLabelOptions = series.options.label || {}, onArea = (seriesLabelOptions.onArea ?? !!series.area), translatedThreshold = yAxis.getThreshold(series.options.threshold), grid = {}, chartCenterKey = inverted ? 'chartCenterX' : 'chartCenterY';
     let i, deltaX, deltaY, delta, len, n, j;
     /**
      * Push the point to the interpolated points, but only if that position in
@@ -492,11 +491,11 @@ function getPointsOnGraph(series) {
                     }
                     if (inverted) {
                         ctlPoint.chartCenterX = paneLeft + paneWidth - ((plotHigh ? plotHigh : point.plotY || 0) +
-                            pick(point.yBottom, translatedThreshold)) / 2;
+                            (point.yBottom ?? translatedThreshold)) / 2;
                     }
                     else {
                         ctlPoint.chartCenterY = paneTop + ((plotHigh ? plotHigh : plotY) +
-                            pick(point.yBottom, translatedThreshold)) / 2;
+                            (point.yBottom ?? translatedThreshold)) / 2;
                     }
                 }
                 // Add interpolated points

package/es-modules/Extensions/Sonification/MIDI.js

@@ -14,7 +14,6 @@
 /* eslint-disable no-multi-spaces */
 'use strict';
 import SonificationInstrument from './SonificationInstrument.js';
-import { pick } from '../../Shared/Utilities.js';
 const freqToNote = (f) => Math.round(12 * Math.log(f) / Math.LN2 - 48.37632), b = (byte, n) => n >>> 8 * byte & 0xFF, getHeader = (nTracks) => [
     0x4D, 0x54, 0x68, 0x64, // HD_TYPE
     0, 0, 0, 6, // HD_SIZE
@@ -49,7 +48,7 @@ varLenEnc = (n) => {
         res.splice(ix + 1, 0, el);
     };
     events.forEach((e) => {
-        const o = e.instrumentEventOptions || {}, t = e.time, dur = cachedDur = pick(o.noteDuration, cachedDur), tNOF = dur && e.time + dur, ctrl = [{
+        const o = e.instrumentEventOptions || {}, t = e.time, dur = cachedDur = (o.noteDuration ?? cachedDur), tNOF = dur && e.time + dur, ctrl = [{
                 valMap: (n) => 64 + 63 * n & 0x7F,
                 data: {
                     0x0A: o.pan, // Use MSB only, no need for fine adjust
@@ -69,7 +68,7 @@ varLenEnc = (n) => {
                     0x4C: o.highpassResonance
                 }
             }], v = cachedVel = o.volume === void 0 ?
-            pick(cachedVel, 127) : 127 * o.volume & 0x7F, freq = o.frequency, note = o.note || 0, noteVal = 12 + (freq ? freqToNote(freq) : // MIDI note #0 is C-1
+            (cachedVel ?? 127) : 127 * o.volume & 0x7F, freq = o.frequency, note = o.note || 0, noteVal = 12 + (freq ? freqToNote(freq) : // MIDI note #0 is C-1
             typeof note === 'string' ? SonificationInstrument
                 .noteStringToC0Distance(note) : note) & 0x7F;
         // CTRL_CHANGE events

package/es-modules/Extensions/Sonification/Sonification.js

@@ -27,7 +27,7 @@ import SonificationSpeaker from './SonificationSpeaker.js';
 import SynthPatch from './SynthPatch.js';
 import InstrumentPresets from './InstrumentPresets.js';
 import timelineFromChart from './TimelineFromChart.js';
-import { addEvent, extend, fireEvent, internalClearTimeout, merge, pick } from '../../Shared/Utilities.js';
+import { addEvent, extend, fireEvent, internalClearTimeout, merge } from '../../Shared/Utilities.js';
 /**
  * The Sonification class. This class represents a chart's sonification
  * capabilities. A chart automatically gets an instance of this class when
@@ -371,7 +371,7 @@ class Sonification {
         if (this.audioContext && this.audioDestination) {
             this.timeline = timelineFromChart(this.audioContext, this.audioDestination, this.chart);
             const sOpts = this.chart.options.sonification;
-            this.timeline.setMasterVolume(pick(sOpts && sOpts.masterVolume, 1));
+            this.timeline.setMasterVolume(((sOpts && sOpts.masterVolume) ?? 1));
         }
         if (events.afterUpdate) {
             events.afterUpdate({ chart: this.chart, timeline: this.timeline });

package/es-modules/Extensions/Sonification/SonificationSpeaker.js

@@ -12,7 +12,6 @@
  *
  * */
 'use strict';
-import { pick } from '../../Shared/Utilities.js';
 /**
  * The SonificationSpeaker class. This class represents an announcer using
  * speech synthesis. It allows for scheduling speech announcements, as well
@@ -59,7 +58,9 @@ class SonificationSpeaker {
             utterance.rate = options && options.rate || this.options.rate || 1;
             utterance.pitch = options && options.pitch ||
                 this.options.pitch || 1;
-            utterance.volume = pick(options && options.volume, this.options.volume, 1) * this.masterVolume;
+            utterance.volume = ((options && options.volume) ??
+                this.options.volume ??
+                1) * this.masterVolume;
             this.synthesis.speak(utterance);
         }
     }

package/es-modules/Extensions/Sonification/SynthPatch.js

@@ -13,7 +13,7 @@
  *
  * */
 'use strict';
-import { clamp, defined, pick } from '../../Shared/Utilities.js';
+import { clamp, defined } from '../../Shared/Utilities.js';
 /**
  * Get the multiplier value from a pitch tracked multiplier. The parameter
  * specifies the multiplier at ca 3200Hz. It is 1 at ca 50Hz. In between
@@ -191,7 +191,7 @@ class Oscillator {
         }
     }
     setFreqAtTime(time, frequency, glideDuration = 0) {
-        const opts = this.options, f = clamp(pick(opts.fixedFrequency, frequency) *
+        const opts = this.options, f = clamp((opts.fixedFrequency ?? frequency) *
             (opts.freqMultiplier || 1), 0, 21000), oscTarget = this.getOscTarget(), timeConstant = glideDuration / 5000;
         if (oscTarget) {
             oscTarget.cancelScheduledValues(time);
@@ -280,7 +280,7 @@ class Oscillator {
             opts.releaseEnvelope && opts.releaseEnvelope.length;
         if (needsGainNode) {
             this.gainNode = new GainNode(this.audioContext, {
-                gain: pick(opts.volume, 1)
+                gain: (opts.volume ?? 1)
             });
         }
         // We always need VM gain, so make that
@@ -544,7 +544,7 @@ export default SynthPatch;
 * @type {number|undefined}
 */
 /**
- * @typedef {Highcharts.Record<"t"|"vol",number>} Highcharts.SynthEnvelopePoint
+ * @typedef {Record<"t"|"vol",number>} Highcharts.SynthEnvelopePoint
  * @requires modules/sonification
  */
 /**