highcharts 10.2.0 → 10.2.1

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

@@ -10,12 +10,11 @@
 'use strict';
 import A from '../../Animation/AnimationUtilities.js';
 var animate = A.animate, animObject = A.animObject, stop = A.stop;
-import AST from '../HTML/AST.js';
 import Color from '../../Color/Color.js';
 import H from '../../Globals.js';
 var deg2rad = H.deg2rad, doc = H.doc, noop = H.noop, svg = H.svg, SVG_NS = H.SVG_NS, win = H.win;
 import U from '../../Utilities.js';
-var addEvent = U.addEvent, attr = U.attr, createElement = U.createElement, css = U.css, defined = U.defined, erase = U.erase, extend = U.extend, fireEvent = U.fireEvent, isArray = U.isArray, isFunction = U.isFunction, isNumber = U.isNumber, isString = U.isString, merge = U.merge, objectEach = U.objectEach, pick = U.pick, pInt = U.pInt, syncTimeout = U.syncTimeout, uniqueKey = U.uniqueKey;
+var addEvent = U.addEvent, attr = U.attr, createElement = U.createElement, css = U.css, defined = U.defined, erase = U.erase, extend = U.extend, fireEvent = U.fireEvent, isArray = U.isArray, isFunction = U.isFunction, isNumber = U.isNumber, isString = U.isString, merge = U.merge, objectEach = U.objectEach, pick = U.pick, pInt = U.pInt, removeEvent = U.removeEvent, syncTimeout = U.syncTimeout, uniqueKey = U.uniqueKey;
 /* *
  *
  *  Class
@@ -417,27 +416,32 @@ var SVGElement = /** @class */ (function () {
             });
             // For each of the tspans and text nodes, create a copy in the
             // outline.
-            [].forEach.call(elem.childNodes, function (childNode) {
+            var parentElem = elem.querySelector('textPath') || elem;
+            [].forEach.call(parentElem.childNodes, function (childNode) {
                 var clone = childNode.cloneNode(true);
                 if (clone.removeAttribute) {
-                    ['fill', 'stroke', 'stroke-width', 'stroke'].forEach(function (prop) { return clone.removeAttribute(prop); });
+                    ['fill', 'stroke', 'stroke-width', 'stroke'].forEach(function (prop) { return clone
+                        .removeAttribute(prop); });
                 }
                 outline_1.appendChild(clone);
             });
+            // Collect the sum of dy from all children, included nested ones
+            var totalHeight_1 = 0;
+            [].forEach.call(parentElem.querySelectorAll('text tspan'), function (element) {
+                totalHeight_1 += Number(element.getAttribute('dy'));
+            });
             // Insert an absolutely positioned break before the original text
             // to keep it in place
-            var br_1 = doc.createElementNS(SVG_NS, 'tspan');
-            br_1.textContent = '\u200B';
-            // Copy x and y if not null
-            ['x', 'y'].forEach(function (key) {
-                var value = elem.getAttribute(key);
-                if (value) {
-                    br_1.setAttribute(key, value);
-                }
+            var br = doc.createElementNS(SVG_NS, 'tspan');
+            br.textContent = '\u200B';
+            // Reset the position for the following text
+            attr(br, {
+                x: Number(elem.getAttribute('x')),
+                dy: -totalHeight_1
             });
             // Insert the outline
-            outline_1.appendChild(br_1);
-            elem.insertBefore(outline_1, elem.firstChild);
+            outline_1.appendChild(br);
+            parentElem.insertBefore(outline_1, parentElem.firstChild);
         }
     };
     /**
@@ -902,42 +906,6 @@ var SVGElement = /** @class */ (function () {
         }, this);
         this.shadows = void 0;
     };
-    /**
-     * @private
-     */
-    SVGElement.prototype.destroyTextPath = function (elem, path) {
-        var textElement = elem.getElementsByTagName('text')[0];
-        var childNodes;
-        if (textElement) {
-            // Remove textPath attributes
-            textElement.removeAttribute('dx');
-            textElement.removeAttribute('dy');
-            // Remove ID's:
-            path.element.setAttribute('id', '');
-            // Check if textElement includes textPath,
-            if (this.textPathWrapper &&
-                textElement.getElementsByTagName('textPath').length) {
-                // Move nodes to <text>
-                childNodes = this.textPathWrapper.element.childNodes;
-                // Now move all <tspan>'s and text nodes to the <textPath> node
-                while (childNodes.length) {
-                    textElement.appendChild(childNodes[0]);
-                }
-                // Remove <textPath> from the DOM
-                textElement.removeChild(this.textPathWrapper.element);
-            }
-        }
-        else if (elem.getAttribute('dx') || elem.getAttribute('dy')) {
-            // Remove textPath attributes from elem
-            // to get correct text-outline position
-            elem.removeAttribute('dx');
-            elem.removeAttribute('dy');
-        }
-        if (this.textPathWrapper) {
-            // Set textPathWrapper to undefined and destroy it
-            this.textPathWrapper = this.textPathWrapper.destroy();
-        }
-    };
     /**
      * @private
      * @function Highcharts.SVGElement#dSettter
@@ -1081,9 +1049,12 @@ var SVGElement = /** @class */ (function () {
                         // SVG: use extend because IE9 is not allowed to change
                         // width and height in case of rotation (below)
                         extend({}, element.getBBox()) : {
-                        // Legacy IE in export mode
+                        // HTML elements with `exporting.allowHTML` and
+                        // legacy IE in export mode
                         width: element.offsetWidth,
-                        height: element.offsetHeight
+                        height: element.offsetHeight,
+                        x: 0,
+                        y: 0
                     };
                     // #3842
                     if (isFunction(toggleTextShadowShim)) {
@@ -1373,20 +1344,27 @@ var SVGElement = /** @class */ (function () {
         return this;
     };
     /**
-     * @private
+     * Set a text path for a `text` or `label` element, allowing the text to
+     * flow along a path.
+     *
+     * In order to unset the path for an existing element, call `setTextPath`
+     * with `{ enabled: false }` as the second argument.
+     *
+     * @sample highcharts/members/renderer-textpath/ Text path demonstrated
+     *
      * @function Highcharts.SVGElement#setTextPath
-     * @param {Highcharts.SVGElement} path
-     * Path to follow.
+     *
+     * @param {Highcharts.SVGElement|undefined} path
+     *        Path to follow. If undefined, it allows changing options for the
+     *        existing path.
+     *
      * @param {Highcharts.DataLabelsTextPathOptionsObject} textPathOptions
-     * Options.
-     * @return {Highcharts.SVGElement}
-     * Returns the SVGElement for chaining.
+     *        Options.
+     *
+     * @return {Highcharts.SVGElement} Returns the SVGElement for chaining.
      */
     SVGElement.prototype.setTextPath = function (path, textPathOptions) {
-        var elem = this.element, textNode = this.text ? this.text.element : elem, attribsMap = {
-            textAnchor: 'text-anchor'
-        };
-        var adder = false, textPathElement, textPathId, textPathWrapper = this.textPathWrapper, firstTime = !textPathWrapper;
+        var _this = this;
         // Defaults
         textPathOptions = merge(true, {
             enabled: true,
@@ -1396,109 +1374,65 @@ var SVGElement = /** @class */ (function () {
                 textAnchor: 'middle'
             }
         }, textPathOptions);
-        var attrs = AST.filterUserAttributes(textPathOptions.attributes);
-        if (path && textPathOptions && textPathOptions.enabled) {
-            // In case of fixed width for a text, string is rebuilt
-            // (e.g. ellipsis is applied), so we need to rebuild textPath too
-            if (textPathWrapper &&
-                textPathWrapper.element.parentNode === null) {
-                // When buildText functionality was triggered again
-                // and deletes textPathWrapper parentNode
-                firstTime = true;
-                textPathWrapper = textPathWrapper.destroy();
-            }
-            else if (textPathWrapper) {
-                // Case after drillup when spans were added into
-                // the DOM outside the textPathWrapper parentGroup
-                this.removeTextOutline.call(textPathWrapper.parentGroup);
-            }
-            // label() has padding, text() doesn't
-            if (this.options && this.options.padding) {
-                attrs.dx = -this.options.padding;
-            }
-            if (!textPathWrapper) {
-                // Create <textPath>, defer the DOM adder
-                this.textPathWrapper = textPathWrapper =
-                    this.renderer.createElement('textPath');
-                adder = true;
-            }
-            textPathElement = textPathWrapper.element;
-            // Set ID for the path
-            textPathId = path.element.getAttribute('id');
-            if (!textPathId) {
-                path.element.setAttribute('id', textPathId = uniqueKey());
-            }
-            // Change DOM structure, by placing <textPath> tag in <text>
-            if (firstTime) {
-                // Adjust the position
-                textNode.setAttribute('y', 0); // Firefox
-                if (isNumber(attrs.dx)) {
-                    textNode.setAttribute('x', -attrs.dx);
-                }
-                // Move all <tspan>'s and text nodes to the <textPath> node. Do
-                // not move other elements like <title> or <path>
-                var childNodes = [].slice.call(textNode.childNodes);
-                for (var i = 0; i < childNodes.length; i++) {
-                    var childNode = childNodes[i];
-                    if (childNode.nodeType === win.Node.TEXT_NODE ||
-                        childNode.nodeName === 'tspan') {
-                        textPathElement.appendChild(childNode);
+        var url = this.renderer.url, textWrapper = this.text || this, textPath = textWrapper.textPath, attributes = textPathOptions.attributes, enabled = textPathOptions.enabled;
+        path = path || (textPath && textPath.path);
+        // Remove previously added event
+        if (textPath) {
+            textPath.undo();
+        }
+        if (path && enabled) {
+            var undo = addEvent(textWrapper, 'afterModifyTree', function (e) {
+                if (path && enabled) {
+                    // Set ID for the path
+                    var textPathId = path.attr('id');
+                    if (!textPathId) {
+                        path.attr('id', textPathId = uniqueKey());
+                    }
+                    // Set attributes for the <text>
+                    var textAttribs = {
+                        // dx/dy options must by set on <text> (parent), the
+                        // rest should be set on <textPath>
+                        x: 0,
+                        y: 0
+                    };
+                    if (defined(attributes.dx)) {
+                        textAttribs.dx = attributes.dx;
+                        delete attributes.dx;
                     }
+                    if (defined(attributes.dy)) {
+                        textAttribs.dy = attributes.dy;
+                        delete attributes.dy;
+                    }
+                    textWrapper.attr(textAttribs);
+                    // Handle label properties
+                    _this.attr({ transform: '' });
+                    if (_this.box) {
+                        _this.box = _this.box.destroy();
+                    }
+                    // Wrap the nodes in a textPath
+                    var children = e.nodes.slice(0);
+                    e.nodes.length = 0;
+                    e.nodes[0] = {
+                        tagName: 'textPath',
+                        attributes: extend(attributes, {
+                            'text-anchor': attributes.textAnchor,
+                            href: "".concat(url, "#").concat(textPathId)
+                        }),
+                        children: children
+                    };
                 }
-            }
-            // Add <textPath> to the DOM
-            if (adder && textPathWrapper) {
-                textPathWrapper.add({ element: textNode });
-            }
-            // Set basic options:
-            // Use `setAttributeNS` because Safari needs this..
-            textPathElement.setAttributeNS('http://www.w3.org/1999/xlink', 'href', this.renderer.url + '#' + textPathId);
-            // Presentation attributes:
-            // dx/dy options must by set on <text> (parent),
-            // the rest should be set on <textPath>
-            if (defined(attrs.dy)) {
-                textPathElement.parentNode
-                    .setAttribute('dy', attrs.dy);
-                delete attrs.dy;
-            }
-            if (defined(attrs.dx)) {
-                textPathElement.parentNode
-                    .setAttribute('dx', attrs.dx);
-                delete attrs.dx;
-            }
-            // Additional attributes
-            objectEach(attrs, function (val, key) {
-                textPathElement.setAttribute(attribsMap[key] || key, val);
             });
-            // Remove translation, text that follows path does not need that
-            elem.removeAttribute('transform');
-            // Remove shadows and text outlines
-            this.removeTextOutline.call(textPathWrapper);
-            // Remove background and border for label(), see #10545
-            // Alternatively, we can disable setting background rects in
-            // series.drawDataLabels()
-            if (this.text && !this.renderer.styledMode) {
-                this.attr({
-                    fill: 'none',
-                    'stroke-width': 0
-                });
-            }
-            // Disable some functions
-            this.updateTransform = noop;
-            this.applyTextOutline = noop;
-        }
-        else if (textPathWrapper) {
-            // Reset to prototype
-            delete this.updateTransform;
-            delete this.applyTextOutline;
-            // Restore DOM structure:
-            this.destroyTextPath(elem, path);
-            // Bring attributes back
-            this.updateTransform();
-            // Set textOutline back for text()
-            if (this.options && this.options.rotation) {
-                this.applyTextOutline(this.options.style.textOutline);
-            }
+            // Set the reference
+            textWrapper.textPath = { path: path, undo: undo };
+        }
+        else {
+            textWrapper.attr({ dx: 0, dy: 0 });
+            delete textWrapper.textPath;
+        }
+        if (this.added) {
+            // Rebuild text after added
+            textWrapper.textCache = '';
+            this.renderer.buildText(textWrapper);
         }
         return this;
     };
@@ -1864,7 +1798,7 @@ var SVGElement = /** @class */ (function () {
         if (defined(scaleX) || defined(scaleY)) {
             transform.push('scale(' + pick(scaleX, 1) + ' ' + pick(scaleY, 1) + ')');
         }
-        if (transform.length) {
+        if (transform.length && !(wrapper.text || wrapper).textPath) {
             element.setAttribute('transform', transform.join(' '));
         }
     };
@@ -2105,6 +2039,12 @@ export default SVGElement;
 * @name Highcharts.SVGAttributes#d
 * @type {string|Highcharts.SVGPathArray|undefined}
 */ /**
+* @name Highcharts.SVGAttributes#dx
+* @type {number|undefined}
+*/ /**
+* @name Highcharts.SVGAttributes#dy
+* @type {number|undefined}
+*/ /**
 * @name Highcharts.SVGAttributes#fill
 * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject|undefined}
 */ /**

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

@@ -270,19 +270,19 @@ var SVGLabel = /** @class */ (function (_super) {
      * the new bounding box and reflect it in the border box.
      */
     SVGLabel.prototype.updateBoxSize = function () {
-        var style = this.text.element.style, attribs = {}, padding = this.padding, 
+        var text = this.text, style = text.element.style, attribs = {}, padding = this.padding, 
         // #12165 error when width is null (auto)
         // #12163 when fontweight: bold, recalculate bBox withot cache
         // #3295 && 3514 box failure when string equals 0
         bBox = this.bBox = (((!isNumber(this.widthSetting) ||
             !isNumber(this.heightSetting) ||
-            this.textAlign) && defined(this.text.textStr)) ?
-            this.text.getBBox() :
+            this.textAlign) && defined(text.textStr)) ?
+            text.getBBox() :
             SVGLabel.emptyBBox);
         var crispAdjust;
         this.width = this.getPaddedWidth();
         this.height = (this.heightSetting || bBox.height || 0) + 2 * padding;
-        var metrics = this.renderer.fontMetrics(style && style.fontSize, this.text);
+        var metrics = this.renderer.fontMetrics(style && style.fontSize, text);
         // Update the label-scoped y offset. Math.min because of inline
         // style (#9400)
         this.baselineOffset = padding + Math.min(
@@ -295,7 +295,7 @@ var SVGLabel = /** @class */ (function (_super) {
         if (this.heightSetting) {
             this.baselineOffset += (this.heightSetting - metrics.h) / 2;
         }
-        if (this.needsBox) {
+        if (this.needsBox && !text.textPath) {
             // Create the border box if it is not already present
             if (!this.box) {
                 // Symbol definition exists (#5324)
@@ -325,31 +325,33 @@ var SVGLabel = /** @class */ (function (_super) {
      */
     SVGLabel.prototype.updateTextPadding = function () {
         var text = this.text;
-        this.updateBoxSize();
-        // Determine y based on the baseline
-        var textY = this.baseline ? 0 : this.baselineOffset;
-        var textX = pick(this.paddingLeft, this.padding);
-        // compensate for alignment
-        if (defined(this.widthSetting) &&
-            this.bBox &&
-            (this.textAlign === 'center' || this.textAlign === 'right')) {
-            textX += { center: 0.5, right: 1 }[this.textAlign] * (this.widthSetting - this.bBox.width);
-        }
-        // update if anything changed
-        if (textX !== text.x || textY !== text.y) {
-            text.attr('x', textX);
-            // #8159 - prevent misplaced data labels in treemap
-            // (useHTML: true)
-            if (text.hasBoxWidthChanged) {
-                this.bBox = text.getBBox(true);
+        if (!text.textPath) {
+            this.updateBoxSize();
+            // Determine y based on the baseline
+            var textY = this.baseline ? 0 : this.baselineOffset;
+            var textX = pick(this.paddingLeft, this.padding);
+            // compensate for alignment
+            if (defined(this.widthSetting) &&
+                this.bBox &&
+                (this.textAlign === 'center' || this.textAlign === 'right')) {
+                textX += { center: 0.5, right: 1 }[this.textAlign] * (this.widthSetting - this.bBox.width);
             }
-            if (typeof textY !== 'undefined') {
-                text.attr('y', textY);
+            // update if anything changed
+            if (textX !== text.x || textY !== text.y) {
+                text.attr('x', textX);
+                // #8159 - prevent misplaced data labels in treemap
+                // (useHTML: true)
+                if (text.hasBoxWidthChanged) {
+                    this.bBox = text.getBBox(true);
+                }
+                if (typeof textY !== 'undefined') {
+                    text.attr('y', textY);
+                }
             }
+            // record current values
+            text.x = textX;
+            text.y = textY;
         }
-        // record current values
-        text.x = textX;
-        text.y = textY;
     };
     SVGLabel.prototype.widthSetter = function (value) {
         // width:auto => null

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

@@ -193,7 +193,7 @@ var SVGRenderer = /** @class */ (function () {
         this.url = this.getReferenceURL();
         // Add description
         var desc = this.createElement('desc').add();
-        desc.element.appendChild(doc.createTextNode('Created with Highcharts 10.2.0'));
+        desc.element.appendChild(doc.createTextNode('Created with Highcharts 10.2.1'));
         renderer.defs = this.createElement('defs').add();
         renderer.allowHTML = allowHTML;
         renderer.forExport = forExport;
@@ -516,7 +516,7 @@ var SVGRenderer = /** @class */ (function () {
      * The shape type.
      *
      * @param {boolean} [useHTML=false]
-     * Wether to use HTML to render the label.
+     * Whether to use HTML to render the label.
      *
      * @return {Highcharts.SVGElement}
      * The button element.
@@ -1615,7 +1615,7 @@ var SVGRenderer = /** @class */ (function () {
      *        coordinates it should be pinned to.
      *
      * @param {boolean} [useHTML=false]
-     *        Wether to use HTML to render the label.
+     *        Whether to use HTML to render the label.
      *
      * @param {boolean} [baseline=false]
      *        Whether to position the label relative to the text baseline,

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

@@ -31,7 +31,7 @@ import Color from '../../Color/Color.js';
 var color = Color.parse;
 import H from '../../Globals.js';
 var charts = H.charts, deg2rad = H.deg2rad;
-import Math3D from '../../../Extensions/Math3D.js';
+import Math3D from '../../Math3D.js';
 var perspective = Math3D.perspective, shapeArea = Math3D.shapeArea;
 import SVGElement from './SVGElement.js';
 import SVGElement3D from './SVGElement3D.js';

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

@@ -12,7 +12,7 @@ import AST from '../HTML/AST.js';
 import H from '../../Globals.js';
 var doc = H.doc, SVG_NS = H.SVG_NS, win = H.win;
 import U from '../../Utilities.js';
-var attr = U.attr, extend = U.extend, isString = U.isString, objectEach = U.objectEach, pick = U.pick;
+var attr = U.attr, extend = U.extend, fireEvent = U.fireEvent, isString = U.isString, objectEach = U.objectEach, pick = U.pick;
 /* *
  *
  *  Class
@@ -70,6 +70,7 @@ var TextBuilder = /** @class */ (function () {
         if (!hasMarkup &&
             !this.ellipsis &&
             !this.width &&
+            !wrapper.textPath &&
             (textStr.indexOf(' ') === -1 ||
                 (this.noWrap && !regexMatchBreaks.test(textStr)))) {
             textNode.appendChild(doc.createTextNode(this.unescapeEntities(textStr)));
@@ -86,7 +87,7 @@ var TextBuilder = /** @class */ (function () {
             // Step 2. Do as many as we can of the modifications to the tree
             // structure before it is added to the DOM
             this.modifyTree(ast.nodes);
-            ast.addToDOM(wrapper.element);
+            ast.addToDOM(textNode);
             // Step 3. Some modifications can't be done until the structure is
             // in the DOM, because we need to read computed metrics.
             this.modifyDOM();
@@ -336,6 +337,7 @@ var TextBuilder = /** @class */ (function () {
             }
         };
         nodes.forEach(modifyChild);
+        fireEvent(this.svgElement, 'afterModifyTree', { nodes: nodes });
     };
     /*
      * Truncate the text node contents to a given length. Used when the css
@@ -348,7 +350,7 @@ var TextBuilder = /** @class */ (function () {
         var renderer = svgElement.renderer, rotation = svgElement.rotation;
         // Cache the lengths to avoid checking the same twice
         var lengths = [];
-        // Word wrap can not be truncated to shorter than one word, ellipsis
+        // Word wrap cannot be truncated to shorter than one word, ellipsis
         // text can be completely blank.
         var minIndex = words ? 1 : 0;
         var maxIndex = (text || words || '').length;

package/es-modules/Core/Scrollbar.js

@@ -583,7 +583,9 @@ var Scrollbar = /** @class */ (function () {
      * @function Highcharts.Scrollbar#shouldUpdateExtremes
      */
     Scrollbar.prototype.shouldUpdateExtremes = function (eventType) {
-        return (pick(this.options.liveRedraw, H.svg && !H.isTouchDevice && !this.chart.isBoosting) ||
+        return (pick(this.options.liveRedraw, H.svg &&
+            !H.isTouchDevice &&
+            !this.chart.boosted) ||
             // Mouseup always should change extremes
             eventType === 'mouseup' ||
             eventType === 'touchend' ||

package/es-modules/Core/Series/DataLabel.js

@@ -13,7 +13,7 @@ var getDeferredAnimation = A.getDeferredAnimation;
 import F from '../FormatUtilities.js';
 var format = F.format;
 import U from '../Utilities.js';
-var defined = U.defined, extend = U.extend, fireEvent = U.fireEvent, isArray = U.isArray, merge = U.merge, objectEach = U.objectEach, pick = U.pick, splat = U.splat;
+var defined = U.defined, extend = U.extend, fireEvent = U.fireEvent, isArray = U.isArray, isString = U.isString, merge = U.merge, objectEach = U.objectEach, pick = U.pick, splat = U.splat;
 /* *
  *
  *  Composition
@@ -230,7 +230,9 @@ var DataLabel;
      * @private
      */
     function drawDataLabels() {
-        var series = this, chart = series.chart, seriesOptions = series.options, points = series.points, hasRendered = series.hasRendered || 0, renderer = chart.renderer;
+        var series = this, chart = series.chart, seriesOptions = series.options, points = series.points, hasRendered = series.hasRendered || 0, renderer = chart.renderer, _a = chart.options.chart, backgroundColor = _a.backgroundColor, plotBackgroundColor = _a.plotBackgroundColor, contrastColor = renderer.getContrast((isString(plotBackgroundColor) && plotBackgroundColor) ||
+            (isString(backgroundColor) && backgroundColor) ||
+            "#000000" /* Palette.neutralColor100 */);
         var seriesDlOptions = seriesOptions.dataLabels, pointOptions, dataLabelsGroup;
         var dataLabelAnim = seriesDlOptions.animation, animationConfig = seriesDlOptions.defer ?
             getDeferredAnimation(chart, dataLabelAnim, series) :
@@ -301,7 +303,7 @@ var DataLabel;
                                     labelDistance < 0 ||
                                     !!seriesOptions.stacking ?
                                     point.contrastColor :
-                                    "#000000" /* Palette.neutralColor100 */;
+                                    contrastColor;
                             }
                             else {
                                 delete point.contrastColor;
@@ -406,9 +408,6 @@ var DataLabel;
                             // read text bounding box
                             dataLabel.css(style).shadow(labelOptions.shadow);
                         }
-                        if (!dataLabel.added) {
-                            dataLabel.add(dataLabelsGroup);
-                        }
                         if (labelOptions.textPath && !labelOptions.useHTML) {
                             dataLabel.setTextPath((point.getDataLabelPath &&
                                 point.getDataLabelPath(dataLabel)) || point.graphic, labelOptions.textPath);
@@ -418,6 +417,9 @@ var DataLabel;
                                 point.dataLabelPath = (point.dataLabelPath.destroy());
                             }
                         }
+                        if (!dataLabel.added) {
+                            dataLabel.add(dataLabelsGroup);
+                        }
                         // Now the data label is created and placed at 0,0, so
                         // we need to align it
                         series.alignDataLabel(point, dataLabel, labelOptions, null, isNew);

package/es-modules/Core/Series/Point.js

@@ -44,7 +44,7 @@ var Point = /** @class */ (function () {
          * point. For other axes it holds the X value.
          *
          * @name Highcharts.Point#category
-         * @type {string}
+         * @type {number|string}
          */
         this.category = void 0;
         /**
@@ -390,7 +390,7 @@ var Point = /** @class */ (function () {
             props.push('graphic', 'upperGraphic', 'shadowGroup');
         }
         if (kinds.dataLabel) {
-            props.push('dataLabel', 'dataLabelUpper', 'connector');
+            props.push('dataLabel', 'dataLabelPath', 'dataLabelUpper', 'connector');
         }
         i = props.length;
         while (i--) {