highcharts 13.0.0 → 13.0.1

package/bower.json

@@ -1,6 +1,6 @@
 {
   "name": "highcharts",
-  "version": "13.0.0",
+  "version": "13.0.1",
   "main": "highcharts.js",
   "license": "https://www.highcharts.com/license",
   "types": "highcharts.d.ts",
@@ -15,5 +15,6 @@
     "svg2pdf.js": {
       "optional": true
     }
-  }
+  },
+  "module": "esm/highcharts.js"
 }

package/css/highcharts.css

@@ -321,7 +321,7 @@
 }
 
 .highcharts-tooltip text,
-.highcharts-tooltip foreignObject div {
+.highcharts-tooltip foreignObject div:not(foreignObject > div) {
     fill: var(--highcharts-neutral-color-80);
     font-size: 0.8em;
 }
@@ -1283,6 +1283,7 @@ text.highcharts-drilldown-data-label,
     margin: 0;
     display: block;
     position: absolute;
+    pointer-events: none;
 }
 
 .highcharts-a11y-proxy-group li {

package/es-modules/Accessibility/Accessibility.js

@@ -17,7 +17,7 @@ const { defaultOptions } = D;
 import H from '../Core/Globals.js';
 const { doc } = H;
 import HU from './Utils/HTMLUtilities.js';
-const { removeElement } = HU;
+const { escapeStringForHTML, removeElement, stripHTMLTagsFromString } = HU;
 import A11yI18n from './A11yI18n.js';
 import ContainerComponent from './Components/ContainerComponent.js';
 import FocusBorderComposition from './FocusBorder.js';
@@ -261,6 +261,42 @@ class Accessibility {
             });
         }
     }
+    /**
+     * Inject the accessibility description into the exported SVG as a
+     * Dublin Core RDF metadata block. Runs on the source chart so the
+     * `linkedDescription` selector resolves against the live DOM, then
+     * mutates the export copy's `<svg>` element before its `innerHTML`
+     * is serialized.
+     * @private
+     */
+    function chartOnGetSVG(e) {
+        const a11y = this.accessibility;
+        if (!a11y || a11y.zombie) {
+            return;
+        }
+        const infoRegions = a11y.components.infoRegions;
+        const text = infoRegions && (infoRegions.getLongdescText() ||
+            infoRegions.getTypeDescriptionText());
+        if (!text) {
+            return;
+        }
+        const safe = escapeStringForHTML(stripHTMLTagsFromString(text, true));
+        if (!safe.trim()) {
+            return;
+        }
+        const box = e.chartCopy.renderer.box;
+        box.querySelector(':scope > metadata')?.remove();
+        box.insertAdjacentHTML('afterbegin', '<metadata>' +
+            '<rdf:RDF ' +
+            'xmlns:rdf="http://www.w3.org/' +
+            '1999/02/22-rdf-syntax-ns#" ' +
+            'xmlns:dc="http://purl.org/dc/elements/1.1/">' +
+            '<rdf:Description>' +
+            '<dc:description>' + safe + '</dc:description>' +
+            '</rdf:Description>' +
+            '</rdf:RDF>' +
+            '</metadata>');
+    }
     /**
      * Update with chart/series/point updates.
      * @private
@@ -348,6 +384,7 @@ class Accessibility {
             addEvent(ChartClass, 'destroy', chartOnDestroy);
             addEvent(ChartClass, 'render', chartOnRender);
             addEvent(ChartClass, 'update', chartOnUpdate);
+            addEvent(ChartClass, 'getSVG', chartOnGetSVG);
             // Mark dirty for update
             ['addSeries', 'init'].forEach((event) => {
                 addEvent(ChartClass, event, function () {

package/es-modules/Accessibility/Components/LegendComponent.js

@@ -12,8 +12,7 @@
  *
  * */
 'use strict';
-import A from '../../Core/Animation/AnimationUtilities.js';
-const { animObject } = A;
+import { animObject } from '../../Core/Animation/AnimationUtilities.js';
 import H from '../../Core/Globals.js';
 const { doc } = H;
 import Legend from '../../Core/Legend/Legend.js';

package/es-modules/Accessibility/Components/NavigatorComponent.js

@@ -21,8 +21,7 @@ import AccessibilityComponent from '../AccessibilityComponent.js';
 import Announcer from '../Utils/Announcer.js';
 import KeyboardNavigationHandler from '../KeyboardNavigationHandler.js';
 import Navigator from '../../Stock/Navigator/Navigator.js';
-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 HU from '../Utils/HTMLUtilities.js';

package/es-modules/Accessibility/Components/SeriesComponent/SeriesKeyboardNavigation.js

@@ -74,15 +74,19 @@ function isSkipSeries(series) {
  * @private
  */
 function isSkipPoint(point) {
-    const series = point.series, nullInteraction = series.options.nullInteraction, pointOptions = point.options, pointA11yOptions = pointOptions.accessibility, a11yOptions = series.chart.options.accessibility, pointA11yDisabled = pointA11yOptions?.enabled === false;
-    return a11yOptions
+    const series = point.series, nullInteraction = series.options.nullInteraction, pointOptions = point.options, pointA11yOptions = pointOptions.accessibility, a11yOptions = series.chart.options.accessibility, pointA11yDisabled = pointA11yOptions?.enabled === false, 
+    // Whether to skip null points. If the user did not set this
+    // option, use the opposite of nullInteraction as the default
+    // (#24650).
+    skipNullPoints = a11yOptions
         .keyboardNavigation
         .seriesNavigation
-        .skipNullPoints ?? (!(!point.isNull || nullInteraction) &&
+        .skipNullPoints ?? !nullInteraction;
+    return point.isNull && skipNullPoints ||
         point.visible === false ||
         point.isInside === false ||
         pointA11yDisabled ||
-        isSkipSeries(series));
+        isSkipSeries(series);
 }
 /**
  * Get the first point that is not a skip point in this series.

package/es-modules/Accessibility/Options/A11yDefaults.js

@@ -458,8 +458,11 @@ const Options = {
          * Alternatively, the HTML element to link can be passed in directly as
          * an HTML node.
          *
-         * If you need the description to be part of the exported image,
-         * consider using the [caption](#caption) feature.
+         * When the Exporting module is also loaded, the description
+         * is embedded in the exported SVG as a Dublin Core
+         * RDF `<metadata>` block, so it is preserved in downloaded images
+         * for indexers and machine readers. If you need a visible caption
+         * in the exported image, use the [caption](#caption) feature.
          *
          * If you need the description to be hidden visually, use the
          * [accessibility.description](#accessibility.description) option.
@@ -520,7 +523,13 @@ const Options = {
          *
          * If the Accessibility module is loaded, this option is included by
          * default as a long description of the chart in the hidden screen
-         * reader information region.
+         * reader information region. When the Exporting module is also loaded,
+         * it is embedded into exported SVGs as a Dublin Core RDF `<metadata>`
+         * block, so the description is preserved in downloaded images
+         * for indexers and machine readers. The embedded value falls back
+         * through [linkedDescription](#accessibility.linkedDescription),
+         * [caption.text](#caption.text), and finally the generated
+         * chart-type description.
          *
          * Note: Since Highcharts now supports captions and linked descriptions,
          * it is preferred to define the description using those methods, as a

package/es-modules/Accessibility/ProxyElement.js

@@ -174,6 +174,7 @@ class ProxyElement {
             margin: 0,
             display: 'block',
             position: 'absolute',
+            'pointer-events': 'none',
             '-ms-filter': 'progid:DXImageTransform.Microsoft.Alpha(Opacity=1)'
         });
     }

package/es-modules/Core/Animation/AnimationUtilities.js

@@ -33,7 +33,7 @@ import { defined, getStyle, isArray, isNumber, isObject, merge, objectEach, pick
  * This function always relates to a chart, and sets a property on the renderer,
  * so it should be moved to the SVGRenderer.
  */
-function setAnimation(animation, chart) {
+export function setAnimation(animation, chart) {
     chart.renderer.globalAnimation = pick(animation, chart.options.chart.animation, true);
 }
 /**
@@ -72,7 +72,7 @@ export function animObject(animation) {
  * @return {number}
  *        The numeric value.
  */
-function getDeferredAnimation(chart, animation, series) {
+export function getDeferredAnimation(chart, animation, series) {
     const labelAnimation = animObject(animation), s = series ? [series] : chart.series;
     let defer = 0, duration = 0;
     s.forEach((series) => {
@@ -95,6 +95,11 @@ function getDeferredAnimation(chart, animation, series) {
 /**
  * The global animate method, which uses Fx to create individual animators.
  *
+ * @sample highcharts/members/renderer-basic
+ *         SVG elements with animation
+ * @sample highcharts/members/animate
+ *         Animation without an owner element
+ *
  * @function Highcharts.animate
  *
  * @param {Highcharts.HTMLDOMElement|Highcharts.SVGElement} el
@@ -110,14 +115,12 @@ function getDeferredAnimation(chart, animation, series) {
  *
  * @return {void}
  */
-function animate(el, params, opt) {
-    let start, unit = '', end, fx, args;
+export function animate(el, params = { pos: 1 }, opt) {
     if (!isObject(opt)) { // Number or undefined/null
-        args = arguments;
         opt = {
-            duration: args[2],
-            easing: args[3],
-            complete: args[4]
+            duration: arguments[2],
+            easing: arguments[3],
+            complete: arguments[4]
         };
     }
     if (!isNumber(opt.duration)) {
@@ -127,22 +130,23 @@ function animate(el, params, opt) {
         opt.easing :
         (Math[opt.easing] || Math.easeInOutSine);
     opt.curAnim = merge(params);
-    objectEach(params, function (val, prop) {
+    objectEach(params, (val, prop) => {
         // Stop current running animation of this property
-        stop(el, prop);
-        fx = new Fx(el, opt, prop);
-        end = void 0;
-        if (prop === 'd' && isArray(params.d)) {
-            fx.paths = fx.initPath(el, el.pathArray, params.d);
-            fx.toD = params.d;
-            start = 0;
+        if (el) {
+            stop(el, prop);
+        }
+        const fx = new Fx(el, opt, prop), d = params.d;
+        let start = 0, end = void 0, unit = '';
+        if (prop === 'd' && isArray(d)) {
+            fx.paths = fx.initPath(el, el.pathArray, d);
+            fx.toD = d;
             end = 1;
         }
-        else if (el.attr) {
+        else if (el?.attr) {
             start = el.attr(prop);
         }
-        else {
-            start = parseFloat(getStyle(el, prop)) || 0;
+        else if (el) {
+            start = +(getStyle(el, prop) || 0);
             if (prop !== 'opacity') {
                 unit = 'px';
             }
@@ -153,7 +157,10 @@ function animate(el, params, opt) {
         if (typeof end === 'string' && end.match('px')) {
             end = end.replace(/px/g, ''); // #4351
         }
-        fx.run(start, end, unit);
+        // Empty dashstyle animation crashes treemap on hover
+        if (defined(end)) {
+            fx.run(start, end, unit);
+        }
     });
 }
 /**
@@ -177,28 +184,11 @@ function animate(el, params, opt) {
  * improvement in all cases where we stop the animation from .attr. Instead of
  * stopping everything, we can just stop the actual attributes we're setting.
  */
-function stop(el, prop) {
-    let i = Fx.timers.length;
-    // Remove timers related to this element (#4519)
-    while (i--) {
-        if (Fx.timers[i].elem === el && (!prop || prop === Fx.timers[i].prop)) {
-            Fx.timers[i].stopped = true; // #4667
-        }
+export const stop = (el, prop) => Fx.timers.forEach((timer) => {
+    if (timer.elem === el && (!prop || prop === timer.prop)) {
+        timer.stopped = true; // #4667
     }
-}
-const animationExports = {
-    animate,
-    animObject,
-    getDeferredAnimation,
-    setAnimation,
-    stop
-};
-/* *
- *
- *  Default Export
- *
- * */
-export default animationExports;
+});
 /* *
  *
  *  API Options

package/es-modules/Core/Animation/Fx.js

@@ -117,24 +117,22 @@ class Fx {
      */
     update() {
         const elem = this.elem, prop = this.prop, // If destroyed, it is null
-        now = this.now, step = this.options.step;
+        now = this.now ?? 1, step = this.options.step;
         // Animation setter defined from outside
         if (this[prop + 'Setter']) {
             this[prop + 'Setter']();
             // Other animations on SVGElement
         }
-        else if (elem.attr) {
+        else if (elem && elem.attr) {
             if (elem.element) {
-                elem.attr(prop, now, null, true);
+                elem.attr(prop, now, void 0, true);
             }
             // HTML styles, raw HTML content like container size
         }
-        else {
-            elem.style[prop] = now + this.unit;
-        }
-        if (step) {
-            step.call(elem, now, this);
+        else if (elem) {
+            elem.style[prop] = now + (this.unit || '');
         }
+        step?.call(elem, now, this);
     }
     /**
      * Run an animation.
@@ -152,12 +150,10 @@ class Fx {
      *
      */
     run(from, to, unit) {
-        const self = this, options = self.options, timer = function (gotoEnd) {
-            return timer.stopped ? false : self.step(gotoEnd);
-        }, requestAnimationFrame = win.requestAnimationFrame ||
+        const { elem, options } = this, { complete, curAnim = {} } = options, timer = (gotoEnd) => (timer.stopped ? false : this.step(gotoEnd)), requestAnimationFrame = win.requestAnimationFrame ||
             function (step) {
                 setTimeout(step, 13);
-            }, step = function () {
+            }, step = () => {
             for (let i = 0; i < Fx.timers.length; i++) {
                 if (!Fx.timers[i]()) {
                     Fx.timers.splice(i--, 1);
@@ -167,11 +163,11 @@ class Fx {
                 requestAnimationFrame(step);
             }
         };
-        if (from === to && !this.elem['forceAnimate:' + this.prop]) {
-            delete options.curAnim[this.prop];
-            if (options.complete &&
-                Object.keys(options.curAnim).length === 0) {
-                options.complete.call(this.elem);
+        if (from === to && !elem['forceAnimate:' + this.prop]) {
+            delete curAnim[this.prop];
+            if (complete &&
+                Object.keys(curAnim).length === 0) {
+                complete.call(elem);
             }
         }
         else { // #7166
@@ -181,7 +177,7 @@ class Fx {
             this.unit = unit;
             this.now = this.start;
             this.pos = 0;
-            timer.elem = this.elem;
+            timer.elem = elem;
             timer.prop = this.prop;
             if (timer() && Fx.timers.push(timer) === 1) {
                 requestAnimationFrame(step);
@@ -202,7 +198,8 @@ class Fx {
     step(gotoEnd) {
         const t = +new Date(), options = this.options, elem = this.elem, complete = options.complete, duration = options.duration, curAnim = options.curAnim;
         let ret, done;
-        if (!!elem.attr && !elem.element) { // #2616, element is destroyed
+        // #2616, element is destroyed
+        if (elem?.attr && !elem.element) {
             ret = false;
         }
         else if (gotoEnd || t >= duration + this.startTime) {

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

@@ -10,8 +10,7 @@
  *
  * */
 'use strict';
-import A from '../Animation/AnimationUtilities.js';
-const { animObject } = A;
+import { animObject } from '../Animation/AnimationUtilities.js';
 import AxisDefaults from './AxisDefaults.js';
 const { xAxis, yAxis } = AxisDefaults;
 import Color from '../Color/Color.js';

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

@@ -530,6 +530,7 @@ var AxisDefaults;
          */
         dateTimeLabelFormats: {
             /**
+             * @type {Highcharts.AxisDateTimeLabelFormatsOptionsObject|string}
              * @declare Highcharts.AxisDateTimeLabelFormatsOptionsObject
              */
             millisecond: {
@@ -555,6 +556,7 @@ var AxisDefaults;
                 range: false
             },
             /**
+             * @type {Highcharts.AxisDateTimeLabelFormatsOptionsObject|string}
              * @declare Highcharts.AxisDateTimeLabelFormatsOptionsObject
              */
             second: {
@@ -580,6 +582,7 @@ var AxisDefaults;
                 range: false
             },
             /**
+             * @type {Highcharts.AxisDateTimeLabelFormatsOptionsObject|string}
              * @declare Highcharts.AxisDateTimeLabelFormatsOptionsObject
              */
             minute: {
@@ -605,6 +608,7 @@ var AxisDefaults;
                 range: false
             },
             /**
+             * @type {Highcharts.AxisDateTimeLabelFormatsOptionsObject|string}
              * @declare Highcharts.AxisDateTimeLabelFormatsOptionsObject
              */
             hour: {
@@ -637,6 +641,7 @@ var AxisDefaults;
                 range: false
             },
             /**
+             * @type {Highcharts.AxisDateTimeLabelFormatsOptionsObject|string}
              * @declare Highcharts.AxisDateTimeLabelFormatsOptionsObject
              */
             day: {
@@ -659,6 +664,7 @@ var AxisDefaults;
                 boundary: '%[eb]'
             },
             /**
+             * @type {Highcharts.AxisDateTimeLabelFormatsOptionsObject|string}
              * @declare Highcharts.AxisDateTimeLabelFormatsOptionsObject
              */
             week: {
@@ -674,6 +680,7 @@ var AxisDefaults;
                 main: '%[eb]'
             },
             /**
+             * @type {Highcharts.AxisDateTimeLabelFormatsOptionsObject|string}
              * @declare Highcharts.AxisDateTimeLabelFormatsOptionsObject
              */
             month: {
@@ -696,6 +703,7 @@ var AxisDefaults;
                 boundary: void 0
             },
             /**
+             * @type {Highcharts.AxisDateTimeLabelFormatsOptionsObject|string}
              * @declare Highcharts.AxisDateTimeLabelFormatsOptionsObject
              */
             year: {
@@ -1511,7 +1519,7 @@ var AxisDefaults;
          * @sample {highstock} stock/xaxis/offset/
          *         Y axis offset by 70 px
          *
-         * @type {number}
+         * @type {number|string}
          */
         offset: void 0,
         /**
@@ -3161,7 +3169,9 @@ var AxisDefaults;
              * @product highcharts
              */
             style: {
-                /** @type {Highcharts.ColorType} */
+                /**
+                 * @type {Highcharts.ColorType}
+                 */
                 color: 'var(--highcharts-neutral-color-100)',
                 /**
                  * @type {number|string}

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

@@ -415,9 +415,14 @@ class ColorAxis extends Axis {
         const axis = this, left = axis.left, pos = options.translatedValue, { symbol } = this.options.marker || {}, top = axis.top;
         // Crosshairs only
         if (isNumber(pos)) {
-            const x = left, w = axis.width, y = pos - w / 2, h = w;
             if (symbol) {
-                return this.chart.renderer.symbols[symbol](x, y, w, h);
+                let w = axis.height, x = pos - w / 2, y = top;
+                if (!axis.horiz) {
+                    w = axis.width;
+                    x = left;
+                    y = pos - w / 2;
+                }
+                return this.chart.renderer.symbols[symbol](x, y, w, w);
             }
             // Default to a triangle pointing to the value
             return (axis.horiz ? [

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

@@ -241,7 +241,7 @@ export var ColorAxisComposition;
      * @internal
      */
     function wrapFxFillSetter() {
-        this.elem.attr('fill', color(this.start).tweenTo(color(this.end), this.pos), void 0, true);
+        (this.elem.attr)('fill', color(this.start).tweenTo(color(this.end), this.pos), void 0, true);
     }
     /**
      * Handle animation of the color attributes directly.

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

@@ -662,6 +662,11 @@ function onChartAfterSetChartSize() {
 /** @internal */
 function onDestroy(e) {
     const { grid } = this;
+    // Axes created before the Gantt module was loaded have no grid
+    // additions to be destroyed (#24644).
+    if (!grid) {
+        return;
+    }
     (grid.columns || []).forEach((column) => column.destroy(e.keepEvents));
     grid.columns = void 0;
 }
@@ -681,7 +686,9 @@ function onInit(e) {
     }
     axis.hiddenLabels = [];
     axis.hiddenMarks = [];
-    axis.clippable = false;
+    if (gridOptions.enabled) {
+        axis.clippable = false;
+    }
 }
 /**
  * Center tick labels in cells.

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

@@ -379,11 +379,19 @@ var OrdinalAxis;
             // Make sure panning to the edges does not decrease the zoomed range
             if ((min <= dataMin && movedUnits <= 0) ||
                 (max >= dataMax + overscroll && movedUnits >= 0)) {
-                e.preventDefault();
-                return;
+                // At the x-axis data edge, with vertical panning enabled, fall
+                // back to the base pan so the y-axis can still be panned,
+                // otherwise block panning past the edge, #24716
+                if (panning && /y/.test(panning.type)) {
+                    runBase = true;
+                }
+                else {
+                    e.preventDefault();
+                    return;
+                }
+                // We have an ordinal axis, but the data is equally spaced
             }
-            // We have an ordinal axis, but the data is equally spaced
-            if (!extendedAxis.ordinal.positions) {
+            else if (!extendedAxis.ordinal.positions) {
                 runBase = true;
             }
             else if (Math.abs(movedUnits) > 1) {

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

@@ -11,12 +11,12 @@
  * */
 'use strict';
 import RadialAxisDefaults from './RadialAxisDefaults.js';
-import { optionsToObject } from '../../Extensions/BorderRadius.js';
+import { borderRadiusObject } from '../../Extensions/BorderRadius.js';
 import D from '../Defaults.js';
 const { defaultOptions } = D;
 import H from '../Globals.js';
 const { composed, noop } = H;
-import { addEvent, correctFloat, defined, extend, fireEvent, isNumber, isObject, merge, pick, pushUnique, relativeLength, splat, wrap } from '../../Shared/Utilities.js';
+import { addEvent, clamp, correctFloat, defined, extend, fireEvent, isNumber, isObject, merge, pick, pushUnique, relativeLength, splat, wrap } from '../../Shared/Utilities.js';
 /* *
  *
  *  Composition
@@ -238,7 +238,7 @@ var RadialAxis;
                 return r;
             }
             return radius;
-        }, center = this.center, { endAngleRad, startAngleRad } = this, borderRadius = optionsToObject(options.borderRadius ??
+        }, center = this.center, { endAngleRad, startAngleRad } = this, borderRadius = borderRadiusObject(options.borderRadius ??
             this.pane.options.borderRadius), fullRadius = center[2] / 2, offset = Math.min(this.offset || 0, 0), left = this.left || 0, top = this.top || 0, percentRegex = /%$/, isCircular = this.isCircular, // X axis in a polar chart
         trueBands = this.options.plotBands || [], index = trueBands.indexOf(options);
         let start, end, angle, xOnPerimeter, open, path, outerRadius = pick(radiusToPixels(options.outerRadius), fullRadius), innerRadius = radiusToPixels(options.innerRadius), thickness = radiusToPixels(options.thickness), brStart = true, brEnd = true;
@@ -374,17 +374,12 @@ var RadialAxis;
             // Concentric circles
         }
         else {
-            // Pick the right values depending if it is grid line or crosshair
-            let transValue = this.translate(value);
-            // This is required in case when xAxis is non-circular to
-            // prevent grid lines (or crosshairs, if enabled) from
-            // rendering above the center after they supposed to be
-            // displayed below the center point
-            if (transValue) {
-                if (transValue < 0 || transValue > height) {
-                    transValue = 0;
-                }
-            }
+            // Pick the right values depending if it is grid line or crosshair.
+            // Clamp is required in case when xAxis is non-circular to prevent
+            // grid lines (or crosshairs, if enabled) from rendering above the
+            // center after they supposed to be displayed below the center
+            // point.
+            let transValue = clamp(this.translate(value), 0, height);
             if (this.options.gridLineInterpolation === 'circle') {
                 // A value of 0 is in the center, so it won't be
                 // visible, but draw it anyway for update and animation

package/es-modules/Core/Axis/Stacking/StackingAxis.js

@@ -10,8 +10,7 @@
  *
  * */
 'use strict';
-import A from '../../Animation/AnimationUtilities.js';
-const { getDeferredAnimation } = A;
+import { getDeferredAnimation } from '../../Animation/AnimationUtilities.js';
 import SeriesRegistry from '../../Series/SeriesRegistry.js';
 const { series: { prototype: seriesProto } } = SeriesRegistry;
 import StackItem from './StackItem.js';

package/es-modules/Core/Axis/TreeGrid/TreeGridAxis.js

@@ -344,7 +344,7 @@ function wrapInit(proceed, chart, userOptions, coll) {
     if (isTreeGrid) {
         // Add event for updating the categories of a treegrid.
         // NOTE Preferably these events should be set on the axis.
-        addEvent(chart, 'beforeRender', onBeforeRender);
+        addEvent(chart, 'beforeRender', onBeforeRender, { order: 0 });
         addEvent(chart, 'beforeRedraw', onBeforeRender);
         // Add new collapsed nodes on addSeries
         addEvent(chart, 'addSeries', function (e) {