highcharts 12.2.0 → 12.4.0

package/esm/highcharts.src.js

@@ -1,8 +1,8 @@
 /**
- * @license Highcharts JS v12.2.0 (2025-04-07)
+ * @license Highcharts JS v12.4.0 (2025-09-04)
  * @module highcharts/highcharts
  *
- * (c) 2009-2025 Torstein Honsi
+ * (c) 2009-2025 Highsoft AS
  *
  * License: www.highcharts.com/license
  */
@@ -34,7 +34,7 @@ var Globals;
      *  Constants
      *
      * */
-    Globals.SVG_NS = 'http://www.w3.org/2000/svg', Globals.product = 'Highcharts', Globals.version = '12.2.0', Globals.win = (typeof window !== 'undefined' ?
+    Globals.SVG_NS = 'http://www.w3.org/2000/svg', Globals.product = 'Highcharts', Globals.version = '12.4.0', 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 = [
@@ -2590,6 +2590,10 @@ const ChartDefaults = {
          * panning action is finished, the axes will adjust to their actual
          * settings.
          *
+         * **Note:** For non-cartesian series, the only supported panning type
+         * is `xy`, as zooming in a single direction is not applicable due to
+         * the radial nature of the coordinate system.
+         *
          * @sample {highcharts} highcharts/chart/panning-type
          *         Zooming and xy panning
          *
@@ -2915,11 +2919,12 @@ const ChartDefaults = {
      * others series in a stack. The shadow can be an object configuration
      * containing `color`, `offsetX`, `offsetY`, `opacity` and `width`.
      *
-     * @sample highcharts/chart/seriesgroupshadow/ Shadow
+     * @sample highcharts/chart/seriesgroupshadow/
+     *         Shadow
      *
      * @type      {boolean|Highcharts.ShadowOptionsObject}
      * @default   false
-     * @apioption chart.shadow
+     * @apioption chart.seriesGroupShadow
      */
     /**
      * Whether to apply a drop shadow to the outer chart area. Requires
@@ -3129,6 +3134,11 @@ const ChartDefaults = {
     /**
      * Chart zooming options.
      * @since 10.2.1
+     *
+     * @sample     highcharts/plotoptions/sankey-node-color
+     *             Zooming in sankey series
+     * @sample     highcharts/series-treegraph/link-types
+     *             Zooming in treegraph series
      */
     zooming: {
         /**
@@ -3151,6 +3161,10 @@ const ChartDefaults = {
          * Decides in what dimensions the user can zoom by dragging the mouse.
          * Can be one of `x`, `y` or `xy`.
          *
+         * **Note:** For non-cartesian series, the only supported zooming type
+         * is `xy`, as zooming in a single direction is not applicable due to
+         * the radial nature of the coordinate system.
+         *
          * @declare    Highcharts.OptionsChartZoomingTypeValue
          * @type       {string}
          * @default    {highcharts} undefined
@@ -3570,7 +3584,7 @@ class TimeBase {
     update(options = {}) {
         this.dTLCache = {};
         this.options = options = TimeBase_merge(true, this.options, options);
-        const { timezoneOffset, useUTC } = options;
+        const { timezoneOffset, useUTC, locale } = options;
         // Allow using a different Date class
         this.Date = options.Date || TimeBase_win.Date || Date;
         // Assign the time zone. Handle the legacy, deprecated `useUTC` option.
@@ -3590,6 +3604,10 @@ class TimeBase {
         this.variableTimezone = timezone !== 'UTC' &&
             timezone?.indexOf('Etc/GMT') !== 0;
         this.timezone = timezone;
+        // Update locale.
+        if (this.lang && locale) {
+            this.lang.locale = locale;
+        }
         // Assign default time formats from locale strings
         ['months', 'shortMonths', 'weekdays', 'shortWeekdays'].forEach((name) => {
             const isMonth = /months/i.test(name), isShort = /short/.test(name), options = {
@@ -4530,6 +4548,9 @@ const defaultOptions = {
      * setup uses `Highcharts.setOptions` to make the options apply to all
      * charts in the same page.
      *
+     * Some language options, like `months` and `weekdays`, are only used
+     * with non-locale-aware date formats.
+     *
      * ```js
      * Highcharts.setOptions({
      *     lang: {
@@ -4579,7 +4600,7 @@ const defaultOptions = {
          * An array containing the months names. Corresponds to the `%B` format
          * in `Highcharts.dateFormat()`. Defaults to 'undefined',
          * meaning the default month names are used according to the
-         * `lang.locale` setting.
+         * `lang.locale` or browser settings.
          *
          * @type    {Array<string>}
          */
@@ -4594,23 +4615,25 @@ const defaultOptions = {
          * An array containing the months names in abbreviated form. Corresponds
          * to the `%b` format in `Highcharts.dateFormat()`. Defaults to
          * 'undefined', meaning the default short month names are used according
-         * to the `lang.locale` setting.
+         * to the `lang.locale` or browser settings.
          *
          * @type    {Array<string>}
          */
         shortMonths: void 0,
         /**
-         * An array containing the weekday names. Defaults to 'undefined',
-         * meaning the default weekday names are used according to the
-         * `lang.locale` setting.
+         * An array containing the weekday names. Corresponds
+         * to the `%A` format in `Highcharts.dateFormat()`. Defaults to
+         * 'undefined', meaning the default weekday names are used according to
+         * the `lang.locale` or browser settings.
          *
          * @type    {Array<string>}
          */
         weekdays: void 0,
         /**
-         * Short week days, starting Sunday. Defaults to 'undefined', meaning
+         * Short week days, starting Sunday. Corresponds to the `%a` format in
+         * `Highcharts.dateFormat()`. Defaults to 'undefined', meaning
          * the default short weekday names are used according to the
-         * `lang.locale` setting.
+         * `lang.locale` or browser settings.
          *
          * @sample highcharts/lang/shortweekdays/
          *         Finnish two-letter abbreviations
@@ -6173,6 +6196,10 @@ const defaultOptions = {
              * @since   3.0
              */
             style: {
+                /**
+                 * @ignore
+                 */
+                color: "#333333" /* Palette.neutralColor80 */,
                 /**
                  * @ignore
                  */
@@ -7441,7 +7468,7 @@ const isStringColor = (color) => Color_isString(color) && !!color && color !== '
  * @name Highcharts.Color
  *
  * @param {Highcharts.ColorType} input
- * The input color in either rgba or hex format
+ * The input color.
  */
 class Color {
     /* *
@@ -7455,7 +7482,7 @@ class Color {
      * @function Highcharts.Color.parse
      *
      * @param {Highcharts.ColorType} [input]
-     * The input color in either rgba or hex format.
+     * The input color.
      *
      * @return {Highcharts.Color}
      * Color instance.
@@ -7715,11 +7742,7 @@ Color.None = new Color('');
  *
  * */
 /**
- * A valid color to be parsed and handled by Highcharts. Highcharts internally
- * supports hex colors like `#ffffff`, rgb colors like `rgb(255,255,255)` and
- * rgba colors like `rgba(255,255,255,1)`. Other colors may be supported by the
- * browsers and displayed correctly, but Highcharts is not able to process them
- * and apply concepts like opacity and brightening.
+ * A valid color to be parsed and handled by Highcharts.
  *
  * @typedef {string} Highcharts.ColorString
  */
@@ -7823,7 +7846,7 @@ Color.None = new Color('');
  * @function Highcharts.color
  *
  * @param {Highcharts.ColorType} input
- *        The input color in either rgba or hex format
+ *        The input color.
  *
  * @return {Highcharts.Color}
  *         Color instance
@@ -8667,7 +8690,7 @@ class AST {
                 trustedTypesPolicy.createHTML(markup) :
                 markup, 'text/html');
         }
-        catch (e) {
+        catch {
             // There are two cases where this fails:
             // 1. IE9 and PhantomJS, where the DOMParser only supports parsing
             //    XML
@@ -8760,9 +8783,9 @@ AST.allowedAttributes = [
     'cx',
     'cy',
     'd',
+    'disabled',
     'dx',
     'dy',
-    'disabled',
     'fill',
     'filterUnits',
     'flood-color',
@@ -8786,22 +8809,22 @@ AST.allowedAttributes = [
     'radius',
     'refX',
     'refY',
+    'result',
     'role',
+    'rowspan',
     'scope',
     'slope',
     'src',
     'startOffset',
     'stdDeviation',
-    'stroke',
     'stroke-linecap',
     'stroke-width',
+    'stroke',
     'style',
-    'tableValues',
-    'result',
-    'rowspan',
     'summary',
-    'target',
     'tabindex',
+    'tableValues',
+    'target',
     'text-align',
     'text-anchor',
     'textAnchor',
@@ -8858,6 +8881,7 @@ AST.allowedReferences = [
  * @type    {Array<string>}
  */
 AST.allowedTags = [
+    '#text',
     'a',
     'abbr',
     'b',
@@ -8882,10 +8906,10 @@ AST.allowedTags = [
     'feFuncG',
     'feFuncR',
     'feGaussianBlur',
-    'feMorphology',
-    'feOffset',
     'feMerge',
     'feMergeNode',
+    'feMorphology',
+    'feOffset',
     'filter',
     'h1',
     'h2',
@@ -8914,18 +8938,17 @@ AST.allowedTags = [
     'sup',
     'svg',
     'table',
+    'tbody',
+    'td',
     'text',
     'textPath',
+    'th',
     'thead',
     'title',
-    'tbody',
-    'tspan',
-    'td',
-    'th',
     'tr',
+    'tspan',
     'u',
-    'ul',
-    '#text'
+    'ul'
 ];
 AST.emptyHTML = emptyHTML;
 /**
@@ -9121,7 +9144,7 @@ function format(str = '', ctx, owner) {
     // The sub expression regex is the same as the top expression regex,
     // but except parens and block helpers (#), and surrounded by parens
     // instead of curly brackets.
-    subRegex = /\(([a-zA-Z\u00C0-\u017F\d:\.,;\-\/<>\[\]%_@+"'= ]+)\)/g, matches = [], floatRegex = /f$/, decRegex = /\.(\d)/, lang = owner?.options?.lang || Templating_defaultOptions.lang, time = owner?.time || Templating_defaultTime, numberFormatter = owner?.numberFormatter || numberFormat;
+    subRegex = /\(([a-zA-Z\u00C0-\u017F\d:\.,;\-\/<>\[\]%_@+"'= ]+)\)/g, matches = [], floatRegex = /f$/, decRegex = /\.(\d)/, lang = owner?.options?.lang || Templating_defaultOptions.lang, time = owner?.time || Templating_defaultTime, numberFormatter = owner?.numberFormatter || numberFormat.bind(owner);
     /*
      * Get a literal or variable value inside a template expression. May be
      * extended with other types like string or null if needed, but keep it
@@ -9256,9 +9279,11 @@ function format(str = '', ctx, owner) {
                 [expression] : expression.split(':');
             replacement = resolveProperty(valueAndFormat.shift() || '');
             // Format the replacement
-            if (valueAndFormat.length && typeof replacement === 'number') {
+            const isFloat = replacement % 1 !== 0;
+            if (typeof replacement === 'number' &&
+                (valueAndFormat.length || isFloat)) {
                 const segment = valueAndFormat.join(':');
-                if (floatRegex.test(segment)) { // Float
+                if (floatRegex.test(segment) || isFloat) { // Float
                     const decimals = parseInt((segment.match(decRegex) || ['', '-1'])[1], 10);
                     if (replacement !== null) {
                         replacement = numberFormatter(replacement, decimals, lang.decimalPoint, segment.indexOf(',') > -1 ? lang.thousandsSep : '');
@@ -9353,8 +9378,7 @@ function numberFormat(number, decimals, decimalPoint, thousandsSep) {
         options.useGrouping = false;
     }
     const hasSeparators = thousandsSep || decimalPoint, locale = hasSeparators ?
-        'en' :
-        (this?.locale || lang.locale || Templating_pageLang), cacheKey = JSON.stringify(options) + locale, nf = numberFormatCache[cacheKey] ?? (numberFormatCache[cacheKey] = new Intl.NumberFormat(locale, options));
+        'en' : (this?.locale || lang.locale || Templating_pageLang), cacheKey = JSON.stringify(options) + locale, nf = numberFormatCache[cacheKey] ?? (numberFormatCache[cacheKey] = new Intl.NumberFormat(locale, options));
     ret = nf.format(number);
     // If thousandsSep or decimalPoint are set, fall back to using English
     // format with string replacement for the separators.
@@ -10678,8 +10702,8 @@ class SVGElement {
                         toggleTextShadowShim('');
                     }
                 }
-                catch (e) {
-                    '';
+                catch {
+                    // Ignore error
                 }
                 // If the bBox is not set, the try-catch block above failed. The
                 // other condition is for Opera that returns a width of
@@ -11584,7 +11608,8 @@ class SVGLabel extends SVG_SVGElement {
      *  Constructor
      *
      * */
-    constructor(renderer, str, x, y, shape, anchorX, anchorY, useHTML, baseline, className) {
+    constructor(renderer, str, x, y, shape, // @todo (SymbolKey|string),
+    anchorX, anchorY, useHTML, baseline, className) {
         super(renderer, 'g');
         this.paddingLeftSetter = this.paddingSetter;
         this.paddingRightSetter = this.paddingSetter;
@@ -11917,10 +11942,18 @@ class SVGLabel extends SVG_SVGElement {
             // Force animation even when setting to the same value (#7898)
             this['forceAnimate:x'] = true;
         }
+        if (this.anchorX) {
+            // #22907, force anchorX to animate after x set
+            this['forceAnimate:anchorX'] = true;
+        }
         this.xSetting = Math.round(value);
         this.attr('translateX', this.xSetting);
     }
     ySetter(value) {
+        if (this.anchorY) {
+            // #22907, force anchorY to animate after y set
+            this['forceAnimate:anchorY'] = true;
+        }
         this.ySetting = this.y = Math.round(value);
         this.attr('translateY', this.ySetting);
     }
@@ -12587,8 +12620,8 @@ class TextBuilder {
                         lengths[end] = startAt +
                             parentNode.getSubStringLength(0, words ? end + 1 : end);
                     }
-                    catch (e) {
-                        '';
+                    catch {
+                        // Ignore error
                     }
                 }
             }
@@ -12840,7 +12873,7 @@ class SVGRenderer {
         this.url = this.getReferenceURL();
         // Add description
         const desc = this.createElement('desc').add();
-        desc.element.appendChild(SVGRenderer_doc.createTextNode('Created with Highcharts 12.2.0'));
+        desc.element.appendChild(SVGRenderer_doc.createTextNode('Created with Highcharts 12.4.0'));
         this.defs = this.createElement('defs').add();
         this.allowHTML = allowHTML;
         this.forExport = forExport;
@@ -13176,6 +13209,9 @@ class SVGRenderer {
      * The contrast color, either `#000000` or `#FFFFFF`.
      */
     getContrast(color) {
+        if (color === 'transparent') {
+            return '#000000';
+        }
         // #6216, #17273
         const rgba256 = Color_Color.parse(color).rgba, 
         // For each rgb channel, compute the luminosity based on all
@@ -13976,15 +14012,15 @@ class SVGRenderer {
      *
      * @function Highcharts.SVGRenderer#fontMetrics
      *
-     * @param {Highcharts.SVGElement|Highcharts.SVGDOMElement|number} [element]
-     *        The element to inspect for a current font size. If a number is
-     *        given, it's used as a fall back for direct font size in pixels.
+     * @param {Highcharts.SVGElement|Highcharts.SVGDOMElement|number} ref
+     * The element to inspect for a current font size. If a number is given,
+     * it's used as a fall back for direct font size in pixels.
      *
      * @return {Highcharts.FontMetricsObject}
-     *         The font metrics.
+     * The font metrics.
      */
-    fontMetrics(element) {
-        const f = SVGRenderer_pInt(SVG_SVGElement.prototype.getStyle.call(element, 'font-size') || 0);
+    fontMetrics(ref) {
+        const f = SVGRenderer_isNumber(ref) ? ref : SVGRenderer_pInt((SVG_SVGElement.prototype.getStyle.call(ref, 'font-size') || 0));
         // Empirical values found by comparing font size and bounding box
         // height. Applies to the default font family.
         // https://jsfiddle.net/highcharts/7xvn7/
@@ -14597,10 +14633,10 @@ const { attr: HTMLElement_attr, css: HTMLElement_css, createElement: HTMLElement
  * @private
  */
 function commonSetter(value, key, elem) {
-    const style = this.div?.style || elem.style;
+    const style = this.div?.style;
     SVG_SVGElement.prototype[`${key}Setter`].call(this, value, key, elem);
     if (style) {
-        style[key] = value;
+        elem.style[key] = style[key] = value;
     }
 }
 /**
@@ -14645,6 +14681,10 @@ const decorateSVGGroup = (g, container) => {
             div.style[key === 'translateX' ? 'left' : 'top'] = `${value}px`;
             g.doTransform = true;
         };
+        g.scaleXSetter = g.scaleYSetter = (value, key) => {
+            g[key] = value;
+            g.doTransform = true;
+        };
         g.opacitySetter = g.visibilitySetter = commonSetter;
         // Extend the parent group's css function by updating the parallel div
         // counterpart with the same style.
@@ -14839,7 +14879,8 @@ class HTMLElement extends SVG_SVGElement {
             // Calling offsetWidth affects rendering time as it forces layout
             // (#7656).
             if (textWidth !== oldTextWidth) { // #983, #1254
-                const textPxLength = getTextPxLength(), textWidthNum = textWidth || 0, willOverWrap = element.style.textOverflow === '' &&
+                const textPxLength = getTextPxLength(), textWidthNum = textWidth || 0, willOverWrap = !renderer.styledMode &&
+                    element.style.textOverflow === '' &&
                     element.style.webkitLineClamp;
                 if ((textWidthNum > oldTextWidth ||
                     textPxLength > textWidthNum ||
@@ -15732,14 +15773,6 @@ var AxisDefaults;
          * @context   Highcharts.Axis
          * @apioption xAxis.events.pointInBreak
          */
-        /**
-         * An event fired when a point is outside a break after zoom.
-         *
-         * @type      {Highcharts.AxisPointBreakEventCallbackFunction}
-         * @product   highcharts highstock gantt
-         * @context   Highcharts.Axis
-         * @apioption xAxis.events.pointBreakOut
-         */
         /**
          * Fires when the minimum and maximum is set for the axis, either by
          * calling the `.setExtremes()` method or by selecting an area in the
@@ -16810,6 +16843,10 @@ var AxisDefaults;
          * overrides the default behaviour of [tickPixelInterval](
          * #xAxis.tickPixelInterval) and [tickInterval](#xAxis.tickInterval).
          *
+         * Note: When working with date-time axes, be aware of time zone
+         * handling. See the [documentation on time options](https://www.highcharts.com/docs/chart-concepts/axes#datetime)
+         * for best practices.
+         *
          * @see [tickPositioner](#xAxis.tickPositioner)
          *
          * @sample {highcharts} highcharts/xaxis/tickpositions-tickpositioner/
@@ -17897,6 +17934,7 @@ var AxisDefaults;
          * @default {highcharts} Values
          * @default {highstock} undefined
          * @product highcharts highstock gantt
+         * @apioption yAxis.title.text
          */
         },
         /**
@@ -18267,7 +18305,7 @@ class Tick {
         // position, use that. If not, use the general format.
         if (axis.dateTime) {
             if (tickPositionInfo) {
-                dateTimeLabelFormats = chart.time.resolveDTLFormat(options.dateTimeLabelFormats[(!options.grid &&
+                dateTimeLabelFormats = chart.time.resolveDTLFormat(options.dateTimeLabelFormats[(!options.grid?.enabled &&
                     tickPositionInfo.higherRanks[pos]) ||
                     tickPositionInfo.unitName]);
                 dateTimeLabelFormat = dateTimeLabelFormats.main;
@@ -19386,7 +19424,7 @@ class Axis {
         }
         const minPixelPadding = axis.minPixelPadding, doPostTranslate = (axis.isOrdinal ||
             axis.brokenAxis?.hasBreaks ||
-            (axis.logarithmic && handleLog)) && axis.lin2val;
+            (axis.logarithmic && handleLog)) && !!axis.lin2val;
         let sign = 1, cvsOffset = 0, localA = old && axis.old ? axis.old.transA : axis.transA, returnValue = 0;
         if (!localA) {
             localA = axis.transA;
@@ -20948,7 +20986,8 @@ class Axis {
             if (cssWidth !== void 0) {
                 return parseInt(String(cssWidth), 10);
             }
-            if (marginLeft) {
+            // Skip marginLeft for opposite axis to avoid label cutoff, #22821
+            if (!this.opposite && marginLeft) {
                 return marginLeft - chart.spacing[3];
             }
         }
@@ -21663,7 +21702,7 @@ class Axis {
                 axis.plotLinesAndBandsGroups[plotGroup].destroy();
         }
         // Delete all properties and fall back to the prototype.
-        Axis_objectEach(axis, function (val, key) {
+        Axis_objectEach(axis, function (_val, key) {
             if (axis.getKeepProps().indexOf(key) === -1) {
                 delete axis[key];
             }
@@ -22946,7 +22985,7 @@ class PlotLineOrBand {
         // Common for lines and bands. Add events only if they were not added
         // before.
         if (!this.eventsAdded && events) {
-            PlotLineOrBand_objectEach(events, (event, eventType) => {
+            PlotLineOrBand_objectEach(events, (_event, eventType) => {
                 svgElem?.on(eventType, (e) => {
                     events[eventType].apply(this, [e]);
                 });
@@ -23020,6 +23059,11 @@ class PlotLineOrBand {
             });
             if (!axis.chart.styledMode) {
                 label.css(PlotLineOrBand_merge({
+                    // To allow theming, and in lack of a general place to set
+                    // default options for plot lines and bands, default to the
+                    // title color. If we expose the palette, we should use that
+                    // instead.
+                    color: axis.chart.options.title?.style?.color,
                     fontSize: '0.8em',
                     textOverflow: (isBand && !inside) ? '' : 'ellipsis'
                 }, optionsLabel.style));
@@ -23552,7 +23596,7 @@ class PlotLineOrBand {
  * @apioption xAxis.plotLines.zIndex
  */
 /**
- * Text labels for the plot bands
+ * Text labels for the plot lines
  *
  * @apioption xAxis.plotLines.label
  */
@@ -23570,6 +23614,14 @@ class PlotLineOrBand {
  * @since      2.1
  * @apioption  xAxis.plotLines.label.align
  */
+/**
+ * Whether or not the label can be hidden if it overlaps with another label.
+ *
+ * @type      {boolean}
+ * @default   undefined
+ * @since     11.4.8
+ * @apioption xAxis.plotBands.label.allowOverlap
+ */
 /**
  * Whether to hide labels that are outside the plot area.
  *
@@ -23947,7 +23999,9 @@ class Tooltip {
             // Use the average position for multiple points
             ret = [chartX - plotLeft, chartY - plotTop];
         }
-        return ret.map(Math.round);
+        const params = { point: points[0], ret };
+        Tooltip_fireEvent(this, 'getAnchor', params);
+        return params.ret.map(Math.round);
     }
     /**
      * Get the CSS class names for the tooltip's label. Styles the label
@@ -25224,6 +25278,15 @@ class Point {
      * @name Highcharts.Point#shapeArgs
      * @type {Readonly<Highcharts.SVGAttributes>|undefined}
      */
+    /**
+     * Defines the tooltip's position for a data point in a chart. It is an
+     * array of numbers representing the coordinates for the tooltip's
+     * placement, allowing for precise control over its location.
+     *
+     * @readonly
+     * @name Highcharts.Point#tooltipPos
+     * @type {Readonly<Array<number>>|undefined}
+     */
     /**
      * The total of values in either a stack for stacked series, or a pie in a
      * pie series.
@@ -26509,17 +26572,20 @@ class Pointer {
                 activeSeries.push.apply(activeSeries, this.chart.series.filter((otherSeries) => otherSeries.markerGroup === series.markerGroup));
             }
         });
-        // Now loop over all series, filtering out active series
-        this.chart.series.forEach((series) => {
+        for (const series of this.chart.series) {
+            const seriesOptions = series.options;
+            if (seriesOptions.states?.inactive?.enabled === false) {
+                continue;
+            }
             if (activeSeries.indexOf(series) === -1) {
                 // Inactive series
                 series.setState('inactive', true);
             }
-            else if (series.options.inactiveOtherPoints) {
+            else if (seriesOptions.inactiveOtherPoints) {
                 // Active series, but other points should be inactivated
                 series.setAllPointsToState('inactive');
             }
-        });
+        }
     }
     /**
      * Destroys the Pointer object and disconnects DOM events.
@@ -26619,8 +26685,7 @@ class Pointer {
             });
             const { shapeType, attrs } = this.getSelectionMarkerAttrs(chartX, chartY);
             // Make a selection
-            if ((chart.hasCartesianSeries || chart.mapView) &&
-                this.hasZoom &&
+            if (this.hasZoom &&
                 clickedInside &&
                 !panKeyPressed) {
                 if (!selectionMarker) {
@@ -26733,6 +26798,7 @@ class Pointer {
             chart.mouseIsDown = false;
             this.hasDragged = 0;
             this.pinchDown = [];
+            this.hasPinchMoved = false;
         }
     }
     /**
@@ -27206,7 +27272,7 @@ class Pointer {
             this.drag(pEvt);
         }
         // Show the tooltip and run mouse over events (#977)
-        if (!chart.openMenu &&
+        if (!chart.exporting?.openMenu &&
             (this.inClass(pEvt.target, 'highcharts-tracker') ||
                 chart.isInsidePlot(pEvt.chartX - chart.plotLeft, pEvt.chartY - chart.plotTop, {
                     visiblePlotOnly: true
@@ -27282,6 +27348,11 @@ class Pointer {
      * @function Highcharts.Pointer#onDocumentMouseUp
      */
     onDocumentMouseUp(e) {
+        // #17852, IOS devices sometimes reverts back to previous point when
+        // dragging between points
+        if (e?.touches && this.hasPinchMoved) {
+            e?.preventDefault?.();
+        }
         Pointer_charts[Pointer_pick(Pointer.hoverChartIndex, -1)]
             ?.pointer
             ?.drop(e);
@@ -27825,7 +27896,7 @@ class Pointer {
             isInside = chart.isInsidePlot(e.chartX - chart.plotLeft, e.chartY - chart.plotTop, {
                 visiblePlotOnly: true
             });
-            if (isInside && !chart.openMenu) {
+            if (isInside && !chart.exporting?.openMenu) {
                 // Run mouse events and display tooltip etc
                 if (start) {
                     this.runPointActions(e);
@@ -27837,7 +27908,7 @@ class Pointer {
                 // checking how much it moved, and cancelling on small
                 // distances. #3450. Tested and still relevant as of 2024.
                 if (e.type === 'touchmove') {
-                    hasMoved = pinchDown[0] ? // #5266
+                    this.hasPinchMoved = hasMoved = pinchDown[0] ? // #5266
                         (Math.pow(pinchDown[0].chartX - e.chartX, 2) +
                             Math.pow(pinchDown[0].chartY - e.chartY, 2)) >= 16 :
                         false;
@@ -30765,9 +30836,7 @@ const seriesDefaults = {
                 size: 10,
                 /**
                  * Opacity for the halo unless a specific fill is overridden
-                 * using the `attributes` setting. Note that Highcharts is
-                 * only able to apply opacity to colors of hex or rgb(a)
-                 * formats.
+                 * using the `attributes` setting.
                  *
                  * @since   4.0
                  * @product highcharts highstock
@@ -31080,6 +31149,12 @@ const seriesDefaults = {
  *
  * */
 
+/* *
+ *
+ *  Imports
+ *
+ * */
+
 
 
 const { defaultOptions: SeriesRegistry_defaultOptions } = Defaults;
@@ -31163,7 +31238,8 @@ var SeriesRegistry;
         defaultPlotOptions[type] = SeriesRegistry_merge(defaultPlotOptions[parent], options);
         // Create the class
         delete SeriesRegistry.seriesTypes[type];
-        registerSeriesType(type, SeriesRegistry_extendClass(SeriesRegistry.seriesTypes[parent] || function () { }, seriesProto));
+        const parentClass = SeriesRegistry.seriesTypes[parent] || Series_Series, childClass = SeriesRegistry_extendClass(parentClass, seriesProto);
+        registerSeriesType(type, childClass);
         SeriesRegistry.seriesTypes[type].prototype.type = type;
         // Create the point class if needed
         if (pointProto) {
@@ -31995,7 +32071,9 @@ class Series {
             // all the rest are defined the same way. Although the 'for' loops
             // are similar, they are repeated inside each if-else conditional
             // for max performance.
-            let runTurbo = turboThreshold && dataLength > turboThreshold;
+            let runTurbo = (turboThreshold &&
+                !options.relativeXValue &&
+                dataLength > turboThreshold);
             if (runTurbo) {
                 const firstPoint = series.getFirstValidPoint(data), lastPoint = series.getFirstValidPoint(data, dataLength - 1, -1), isShortArray = (a) => Boolean(Series_isArray(a) && (keys || Series_isNumber(a[0])));
                 // Assume all points are numbers
@@ -33340,18 +33418,26 @@ class Series {
             horAxis = vertAxis;
             vertAxis = this.xAxis;
         }
-        return {
+        const params = {
+            scale: 1,
             translateX: horAxis ? horAxis.left : chart.plotLeft,
             translateY: vertAxis ? vertAxis.top : chart.plotTop,
+            name
+        };
+        Series_fireEvent(this, 'getPlotBox', params);
+        const { scale, translateX, translateY } = params;
+        return {
+            translateX,
+            translateY,
             rotation: inverted ? 90 : 0,
             rotationOriginX: inverted ?
-                (horAxis.len - vertAxis.len) / 2 :
+                scale * (horAxis.len - vertAxis.len) / 2 :
                 0,
             rotationOriginY: inverted ?
-                (horAxis.len + vertAxis.len) / 2 :
+                scale * (horAxis.len + vertAxis.len) / 2 :
                 0,
-            scaleX: inverted ? -1 : 1, // #1623
-            scaleY: 1
+            scaleX: inverted ? -scale : scale, // #1623
+            scaleY: scale
         };
     }
     /**
@@ -33971,7 +34057,7 @@ class Series {
             oldOptions.type ||
             chart.options.chart.type);
         const keepPoints = !(
-        // Indicators, histograms etc recalculate the data. It should be
+        // Indicators etc recalculate the data. It should be
         // possible to omit this.
         this.hasDerivedData ||
             // New type requires new point classes
@@ -35181,16 +35267,14 @@ class Legend {
      * The item to remove
      */
     destroyItem(item) {
-        const checkbox = item.checkbox, legendItem = item.legendItem || {};
+        const legendItem = item.legendItem || {};
         // Destroy SVG elements
         for (const key of ['group', 'label', 'line', 'symbol']) {
             if (legendItem[key]) {
                 legendItem[key] = legendItem[key].destroy();
             }
         }
-        if (checkbox) {
-            Legend_discardElement(checkbox);
-        }
+        item.checkbox = Legend_discardElement(item.checkbox);
         item.legendItem = void 0;
     }
     /**
@@ -35519,13 +35603,13 @@ class Legend {
                 /(rtv|rm|rbv)/,
                 /(rbh|cb|lbh)/,
                 /(lbv|lm|ltv)/
-            ]).forEach(function (alignments, side) {
+            ]).forEach((alignments, side) => {
                 if (alignments.test(alignment) && !Legend_defined(margin[side])) {
                     // Now we have detected on which side of the chart we should
                     // reserve space for the legend
                     chart[marginNames[side]] = Math.max(chart[marginNames[side]], (chart.legend[(side + 1) % 2 ? 'legendHeight' : 'legendWidth'] +
-                        [1, -1, -1, 1][side] * options[(side % 2) ? 'x' : 'y'] +
-                        Legend_pick(options.margin, 12) +
+                        [1, -1, -1, 1][side] * (options[(side % 2) ? 'x' : 'y']) +
+                        (options.margin ?? 12) +
                         spacing[side] +
                         (chart.titleOffset[side] || 0)));
                 }
@@ -36139,6 +36223,9 @@ class Legend {
 */ /**
 * @name Highcharts.LegendItemObject#symbol
 * @type {Highcharts.SVGElement|undefined}
+*/ /**
+* @name Highcharts.LegendItemObject#label
+* @type {Highcharts.SVGElement|undefined}
 */
 /**
  * Gets fired when the legend item is clicked. The default
@@ -37485,8 +37572,8 @@ class Chart {
     getAxisMargins() {
         const chart = this, 
         // [top, right, bottom, left]
-        axisOffset = chart.axisOffset = [0, 0, 0, 0], colorAxis = chart.colorAxis, margin = chart.margin, getOffset = function (axes) {
-            axes.forEach(function (axis) {
+        axisOffset = chart.axisOffset = [0, 0, 0, 0], colorAxis = chart.colorAxis, margin = chart.margin, getOffset = (axes) => {
+            axes.forEach((axis) => {
                 if (axis.visible) {
                     axis.getOffset();
                 }
@@ -37500,9 +37587,9 @@ class Chart {
             getOffset(colorAxis);
         }
         // Add the axis offsets
-        Chart_marginNames.forEach(function (m, side) {
+        Chart_marginNames.forEach((marginName, side) => {
             if (!Chart_defined(margin[side])) {
-                chart[m] += axisOffset[side];
+                chart[marginName] += axisOffset[side];
             }
         });
         chart.setChartSize();
@@ -37543,7 +37630,7 @@ class Chart {
         delete chart.pointer?.chartPosition;
         // Width and height checks for display:none. Target is doc in Opera
         // and win in Firefox, Chrome and IE9.
-        if (!chart.isPrinting &&
+        if (!chart.exporting?.isPrinting &&
             !chart.isResizing &&
             oldBox &&
             // When fired by resize observer inside hidden container
@@ -37757,21 +37844,22 @@ class Chart {
         Chart_fireEvent(this, 'resetMargins');
         const chart = this, chartOptions = chart.options.chart, plotBorderWidth = chartOptions.plotBorderWidth || 0, halfWidth = Math.round(plotBorderWidth) / 2;
         // Create margin and spacing array
-        ['margin', 'spacing'].forEach(function splashArrays(target) {
+        ['margin', 'spacing'].forEach((target) => {
             const value = chartOptions[target], values = Chart_isObject(value) ? value : [value, value, value, value];
             [
                 'Top',
                 'Right',
                 'Bottom',
                 'Left'
-            ].forEach(function (sideName, side) {
-                chart[target][side] = Chart_pick(chartOptions[target + sideName], values[side]);
+            ].forEach((sideName, side) => {
+                chart[target][side] = (chartOptions[`${target}${sideName}`] ??
+                    values[side]);
             });
         });
         // Set margin names like chart.plotTop, chart.plotLeft,
         // chart.marginRight, chart.marginBottom.
-        Chart_marginNames.forEach(function (m, side) {
-            chart[m] = Chart_pick(chart.margin[side], chart.spacing[side]);
+        Chart_marginNames.forEach((marginName, side) => {
+            chart[marginName] = chart.margin[side] ?? chart.spacing[side];
         });
         chart.axisOffset = [0, 0, 0, 0]; // Top, right, bottom, left
         chart.clipOffset = [
@@ -38082,12 +38170,13 @@ class Chart {
             renderAxes(colorAxis);
         }
         // The series
-        if (!chart.seriesGroup) {
-            chart.seriesGroup = renderer.g('series-group')
-                .attr({ zIndex: 3 })
-                .shadow(chart.options.chart.seriesGroupShadow)
-                .add();
-        }
+        chart.seriesGroup || (chart.seriesGroup = renderer.g('series-group')
+            .attr({ zIndex: 3 })
+            .shadow(chart.options.chart.seriesGroupShadow)
+            .add());
+        chart.dataLabelsGroup || (chart.dataLabelsGroup = renderer.g('datalabels-group')
+            .attr({ zIndex: 6 })
+            .add());
         chart.renderSeries();
         // Credits
         chart.addCredits();
@@ -38919,9 +39008,10 @@ class Chart {
      */
     transform(params) {
         const { axes = this.axes, event, from = {}, reset, selection, to = {}, trigger } = params, { inverted, time } = this;
-        let hasZoomed = false, displayButton, isAnyAxisPanning;
         // Remove active points for shared tooltip
         this.hoverPoints?.forEach((point) => point.setState());
+        Chart_fireEvent(this, 'transform', params);
+        let hasZoomed = params.hasZoomed || false, displayButton, isAnyAxisPanning;
         for (const axis of axes) {
             const { horiz, len, minPointOffset = 0, options, reversed } = axis, wh = horiz ? 'width' : 'height', xy = horiz ? 'x' : 'y', toLength = Chart_pick(to[wh], axis.len), fromLength = Chart_pick(from[wh], axis.len), 
             // If fingers pinched very close on this axis, treat as pan
@@ -38937,19 +39027,19 @@ class Chart {
             if (!reset && (fromCenter < 0 || fromCenter > axis.len)) {
                 continue;
             }
-            let newMin = axis.toValue(minPx, true) +
-                // Don't apply offset for selection (#20784)
-                (selection || axis.isOrdinal ?
-                    0 : minPointOffset * pointRangeDirection), newMax = axis.toValue(minPx + len / scale, true) -
-                (
-                // Don't apply offset for selection (#20784)
-                selection || axis.isOrdinal ?
-                    0 :
-                    ((minPointOffset * pointRangeDirection) ||
-                        // Polar zoom tests failed when this was not
-                        // commented:
-                        // (axis.isXAxis && axis.pointRangePadding) ||
-                        0)), allExtremes = axis.allExtremes;
+            // Adjust offset to ensure selection zoom triggers correctly
+            // (#22945)
+            const offset = (axis.chart.polar || axis.isOrdinal) ?
+                0 :
+                (minPointOffset * pointRangeDirection || 0), eventMin = axis.toValue(minPx, true), eventMax = axis.toValue(minPx + len / scale, true);
+            let newMin = eventMin + offset, newMax = eventMax - offset, allExtremes = axis.allExtremes;
+            if (selection) {
+                selection[axis.coll].push({
+                    axis,
+                    min: Math.min(eventMin, eventMax),
+                    max: Math.max(eventMin, eventMax)
+                });
+            }
             if (newMin > newMax) {
                 [newMin, newMax] = [newMax, newMin];
             }
@@ -38989,10 +39079,7 @@ class Chart {
             // It is not necessary to calculate extremes on ordinal axis,
             // because they are already calculated, so we don't want to override
             // them.
-            if (!axis.isOrdinal ||
-                axis.options.overscroll || // #21316
-                scale !== 1 ||
-                reset) {
+            if (!axis.isOrdinal || scale !== 1 || reset) {
                 // If the new range spills over, either to the min or max,
                 // adjust it.
                 if (newMin < floor) {
@@ -39037,6 +39124,13 @@ class Chart {
                     }
                     hasZoomed = true;
                 }
+                // Show the resetZoom button for non-cartesian series,
+                // except when triggered by mouse wheel zoom
+                if (!this.hasCartesianSeries &&
+                    !reset &&
+                    trigger !== 'mousewheel') {
+                    displayButton = true;
+                }
                 if (event) {
                     this[horiz ? 'mouseDownX' : 'mouseDownY'] =
                         event[horiz ? 'chartX' : 'chartY'];
@@ -39328,29 +39422,33 @@ class ScrollablePlotArea {
     static afterSetSize(chart, e) {
         const { minWidth, minHeight } = chart.options.chart.scrollablePlotArea || {}, { clipBox, plotBox, inverted, renderer } = chart;
         let scrollablePixelsX, scrollablePixelsY, recalculateHoriz;
-        if (!renderer.forExport) {
-            // The amount of pixels to scroll, the difference between chart
-            // width and scrollable width
-            if (minWidth) {
-                chart.scrollablePixelsX = scrollablePixelsX = Math.max(0, minWidth - chart.chartWidth);
-                if (scrollablePixelsX) {
-                    chart.scrollablePlotBox = ScrollablePlotArea_merge(chart.plotBox);
-                    plotBox.width = chart.plotWidth += scrollablePixelsX;
-                    clipBox[inverted ? 'height' : 'width'] += scrollablePixelsX;
-                    recalculateHoriz = true;
-                }
-                // Currently we can only do either X or Y
-            }
-            else if (minHeight) {
-                chart.scrollablePixelsY = scrollablePixelsY = Math.max(0, minHeight - chart.chartHeight);
-                if (ScrollablePlotArea_defined(scrollablePixelsY)) {
-                    chart.scrollablePlotBox = ScrollablePlotArea_merge(chart.plotBox);
-                    plotBox.height = chart.plotHeight += scrollablePixelsY;
-                    clipBox[inverted ? 'width' : 'height'] += scrollablePixelsY;
-                    recalculateHoriz = false;
-                }
-            }
-            if (ScrollablePlotArea_defined(recalculateHoriz) && !e.skipAxes) {
+        // Skip for exporting
+        if (renderer.forExport) {
+            return;
+        }
+        // The amount of pixels to scroll, the difference between chart width
+        // and scrollable width
+        if (minWidth) {
+            chart.scrollablePixelsX = scrollablePixelsX = Math.max(0, minWidth - chart.chartWidth);
+            if (scrollablePixelsX) {
+                chart.scrollablePlotBox = ScrollablePlotArea_merge(chart.plotBox);
+                plotBox.width = chart.plotWidth += scrollablePixelsX;
+                clipBox[inverted ? 'height' : 'width'] += scrollablePixelsX;
+                recalculateHoriz = true;
+            }
+            // Currently we can only do either X or Y
+        }
+        else if (minHeight) {
+            chart.scrollablePixelsY = scrollablePixelsY = Math.max(0, minHeight - chart.chartHeight);
+            if (ScrollablePlotArea_defined(scrollablePixelsY)) {
+                chart.scrollablePlotBox = ScrollablePlotArea_merge(chart.plotBox);
+                plotBox.height = chart.plotHeight += scrollablePixelsY;
+                clipBox[inverted ? 'width' : 'height'] += scrollablePixelsY;
+                recalculateHoriz = false;
+            }
+        }
+        if (ScrollablePlotArea_defined(recalculateHoriz)) {
+            if (!e.skipAxes) {
                 for (const axis of chart.axes) {
                     // Apply the corrected plot size to the axes of the other
                     // orientation than the scrolling direction
@@ -39363,6 +39461,10 @@ class ScrollablePlotArea {
                 }
             }
         }
+        else {
+            // Clear (potential) old box when a new one was not set
+            delete chart.scrollablePlotBox;
+        }
     }
     constructor(chart) {
         const chartOptions = chart.options.chart, Renderer = Renderer_RendererRegistry.getRendererType(), scrollableOptions = chartOptions.scrollablePlotArea || {}, moveFixedElements = this.moveFixedElements.bind(this), styles = {
@@ -39946,7 +40048,6 @@ class StackItem {
 
 const { getDeferredAnimation: StackingAxis_getDeferredAnimation } = AnimationUtilities;
 
-
 const { series: { prototype: seriesProto } } = Series_SeriesRegistry;
 
 
@@ -42149,8 +42250,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`
@@ -43269,7 +43369,7 @@ var DataLabel;
      */
     function initDataLabelsGroup() {
         return this.plotGroup('dataLabelsGroup', 'data-labels', this.hasRendered ? 'inherit' : 'hidden', // #5133, #10220
-        this.options.dataLabels.zIndex || 6);
+        this.options.dataLabels.zIndex || 6, this.chart.dataLabelsGroup);
     }
     /**
      * Init the data labels with the correct animation
@@ -43407,7 +43507,9 @@ var DataLabel;
                     // Individual labels are disabled if the are explicitly
                     // disabled in the point options, or if they fall outside
                     // the plot area.
-                    if (labelEnabled && DataLabel_defined(labelText)) {
+                    if (labelEnabled &&
+                        DataLabel_defined(labelText) &&
+                        labelText !== '') {
                         if (!dataLabel) {
                             // Create new label element
                             dataLabel = renderer.label(labelText, 0, 0, labelOptions.shape, void 0, void 0, labelOptions.useHTML, void 0, 'data-label');
@@ -45138,8 +45240,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`
@@ -45410,11 +45511,11 @@ class PieSeries extends Series_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
@@ -45635,7 +45736,7 @@ const { distribute: PieDataLabel_distribute } = Renderer_RendererUtilities;
 
 const { series: PieDataLabel_Series } = Series_SeriesRegistry;
 
-const { arrayMax: PieDataLabel_arrayMax, clamp: PieDataLabel_clamp, defined: PieDataLabel_defined, pick: PieDataLabel_pick, pushUnique: PieDataLabel_pushUnique, relativeLength: PieDataLabel_relativeLength } = Core_Utilities;
+const { arrayMax: PieDataLabel_arrayMax, clamp: PieDataLabel_clamp, defined: PieDataLabel_defined, isNumber: PieDataLabel_isNumber, pick: PieDataLabel_pick, pushUnique: PieDataLabel_pushUnique, relativeLength: PieDataLabel_relativeLength } = Core_Utilities;
 /* *
  *
  *  Composition
@@ -45987,7 +46088,7 @@ var PieDataLabel_ColumnDataLabel;
                     // #8864: every connector can have individual options
                     const { connectorColor, connectorWidth = 1 } = (dataLabel.options || {}), labelPosition = dataLabel.dataLabelPosition;
                     // Draw the connector
-                    if (connectorWidth) {
+                    if (PieDataLabel_isNumber(connectorWidth)) {
                         let isNew;
                         connector = dataLabel.connector;
                         if (labelPosition && labelPosition.distance > 0) {
@@ -46612,7 +46713,7 @@ function applyBorderRadius(path, i, r) {
  * @private
  */
 function BorderRadius_arc(x, y, w, h, options = {}) {
-    const path = oldArc(x, y, w, h, options), { innerR = 0, r = w, start = 0, end = 0 } = options;
+    const path = oldArc(x, y, w, h, options), { brStart = true, brEnd = true, innerR = 0, r = w, start = 0, end = 0 } = options;
     if (options.open || !options.borderRadius) {
         return path;
     }
@@ -46629,6 +46730,10 @@ function BorderRadius_arc(x, y, w, h, options = {}) {
     // splicing in arc segments.
     let i = path.length - 1;
     while (i--) {
+        if ((!brStart && (i === 0 || i === 3)) ||
+            (!brEnd && (i === 1 || i === 2))) {
+            continue;
+        }
         applyBorderRadius(path, i, i > 1 ? innerBorderRadius : borderRadius);
     }
     return path;
@@ -46703,7 +46808,7 @@ function BorderRadius_compose(SeriesClass, SVGElementClass, SVGRendererClass) {
             order: 9
         });
         BorderRadius_addEvent(PieSeriesClass, 'afterTranslate', pieSeriesOnAfterTranslate);
-        SVGElementClass.symbolCustomAttribs.push('borderRadius', 'brBoxHeight', 'brBoxY');
+        SVGElementClass.symbolCustomAttribs.push('borderRadius', 'brBoxHeight', 'brBoxY', 'brEnd', 'brStart');
         oldArc = symbols.arc;
         oldRoundedRect = symbols.roundedRect;
         symbols.arc = BorderRadius_arc;