highcharts 9.3.3 → 10.2.0

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 9.3.3'));
+        desc.element.appendChild(doc.createTextNode('Created with Highcharts 10.2.0'));
         renderer.defs = this.createElement('defs').add();
         renderer.allowHTML = allowHTML;
         renderer.forExport = forExport;
@@ -305,7 +305,7 @@ var SVGRenderer = /** @class */ (function () {
                                     id: 'hitme',
                                     width: 8,
                                     height: 8,
-                                    'clip-path': "url(#" + id + ")",
+                                    'clip-path': "url(#".concat(id, ")"),
                                     fill: 'rgba(0,0,0,0.001)'
                                 }
                             }]
@@ -457,27 +457,31 @@ var SVGRenderer = /** @class */ (function () {
         new TextBuilder(wrapper).buildSVG();
     };
     /**
-     * Returns white for dark colors and black for bright colors.
+     * Returns white for dark colors and black for bright colors, based on W3C's
+     * definition of [Relative luminance](
+     * https://www.w3.org/WAI/GL/wiki/Relative_luminance).
      *
      * @function Highcharts.SVGRenderer#getContrast
      *
-     * @param {Highcharts.ColorString} rgba
+     * @param {Highcharts.ColorString} color
      * The color to get the contrast for.
      *
      * @return {Highcharts.ColorString}
      * The contrast color, either `#000000` or `#FFFFFF`.
      */
-    SVGRenderer.prototype.getContrast = function (rgba) {
-        rgba = Color.parse(rgba).rgba;
-        // The threshold may be discussed. Here's a proposal for adding
-        // different weight to the color channels (#6216)
-        rgba[0] *= 1; // red
-        rgba[1] *= 1.2; // green
-        rgba[2] *= 0.5; // blue
-        return rgba[0] + rgba[1] + rgba[2] >
-            1.8 * 255 ?
-            '#000000' :
-            '#FFFFFF';
+    SVGRenderer.prototype.getContrast = function (color) {
+        // #6216, #17273
+        var rgba = Color.parse(color).rgba
+            .map(function (b8) {
+            var c = b8 / 255;
+            return c <= 0.03928 ?
+                c / 12.92 :
+                Math.pow((c + 0.055) / 1.055, 2.4);
+        });
+        // Relative luminance
+        var l = 0.2126 * rgba[0] + 0.7152 * rgba[1] + 0.0722 * rgba[2];
+        // Use white or black based on which provides more contrast
+        return 1.05 / (l + 0.05) > (l + 0.05) / 0.05 ? '#FFFFFF' : '#000000';
     };
     /**
      * Create a button with preset states.
@@ -502,7 +506,7 @@ var SVGRenderer = /** @class */ (function () {
      * @param {Highcharts.SVGAttributes} [hoverState]
      * SVG attributes for the hover state.
      *
-     * @param {Highcharts.SVGAttributes} [pressedState]
+     * @param {Highcharts.SVGAttributes} [selectState]
      * SVG attributes for the pressed state.
      *
      * @param {Highcharts.SVGAttributes} [disabledState]
@@ -517,57 +521,55 @@ var SVGRenderer = /** @class */ (function () {
      * @return {Highcharts.SVGElement}
      * The button element.
      */
-    SVGRenderer.prototype.button = function (text, x, y, callback, theme, hoverState, pressedState, disabledState, shape, useHTML) {
-        var label = this.label(text, x, y, shape, void 0, void 0, useHTML, void 0, 'button'), styledMode = this.styledMode;
-        var curState = 0, 
-        // Make a copy of normalState (#13798)
-        // (reference to options.rangeSelector.buttonTheme)
-        normalState = theme ? merge(theme) : {};
-        var userNormalStyle = normalState && normalState.style || {};
-        // Remove stylable attributes
-        normalState = AST.filterUserAttributes(normalState);
+    SVGRenderer.prototype.button = function (text, x, y, callback, theme, hoverState, selectState, disabledState, shape, useHTML) {
+        if (theme === void 0) { theme = {}; }
+        var label = this.label(text, x, y, shape, void 0, void 0, useHTML, void 0, 'button'), styledMode = this.styledMode, states = theme.states || {};
+        var curState = 0;
+        theme = merge(theme);
+        delete theme.states;
+        var normalStyle = merge({
+            color: "#333333" /* Palette.neutralColor80 */,
+            cursor: 'pointer',
+            fontWeight: 'normal'
+        }, theme.style);
+        delete theme.style;
+        // Remove stylable attributes. Pass in the ButtonThemeObject and get the
+        // SVGAttributes subset back.
+        var normalState = AST.filterUserAttributes(theme);
         // Default, non-stylable attributes
         label.attr(merge({ padding: 8, r: 2 }, normalState));
-        // Presentational
-        var normalStyle, hoverStyle, pressedStyle, disabledStyle;
+        // Presentational. The string type is a mistake, it is just for
+        // compliance with SVGAttribute and is not used in button theme.
+        var hoverStyle, selectStyle, disabledStyle;
         if (!styledMode) {
             // Normal state - prepare the attributes
             normalState = merge({
-                fill: "#f7f7f7" /* neutralColor3 */,
-                stroke: "#cccccc" /* neutralColor20 */,
-                'stroke-width': 1,
-                style: {
-                    color: "#333333" /* neutralColor80 */,
-                    cursor: 'pointer',
-                    fontWeight: 'normal'
-                }
-            }, {
-                style: userNormalStyle
+                fill: "#f7f7f7" /* Palette.neutralColor3 */,
+                stroke: "#cccccc" /* Palette.neutralColor20 */,
+                'stroke-width': 1
             }, normalState);
-            normalStyle = normalState.style;
-            delete normalState.style;
             // Hover state
             hoverState = merge(normalState, {
-                fill: "#e6e6e6" /* neutralColor10 */
-            }, AST.filterUserAttributes(hoverState || {}));
+                fill: "#e6e6e6" /* Palette.neutralColor10 */
+            }, AST.filterUserAttributes(hoverState || states.hover || {}));
             hoverStyle = hoverState.style;
             delete hoverState.style;
             // Pressed state
-            pressedState = merge(normalState, {
-                fill: "#e6ebf5" /* highlightColor10 */,
+            selectState = merge(normalState, {
+                fill: "#e6ebf5" /* Palette.highlightColor10 */,
                 style: {
-                    color: "#000000" /* neutralColor100 */,
+                    color: "#000000" /* Palette.neutralColor100 */,
                     fontWeight: 'bold'
                 }
-            }, AST.filterUserAttributes(pressedState || {}));
-            pressedStyle = pressedState.style;
-            delete pressedState.style;
+            }, AST.filterUserAttributes(selectState || states.select || {}));
+            selectStyle = selectState.style;
+            delete selectState.style;
             // Disabled state
             disabledState = merge(normalState, {
                 style: {
-                    color: "#cccccc" /* neutralColor20 */
+                    color: "#cccccc" /* Palette.neutralColor20 */
                 }
-            }, AST.filterUserAttributes(disabledState || {}));
+            }, AST.filterUserAttributes(disabledState || states.disabled || {}));
             disabledStyle = disabledState.style;
             delete disabledState.style;
         }
@@ -598,15 +600,18 @@ var SVGRenderer = /** @class */ (function () {
                     .attr([
                     normalState,
                     hoverState,
-                    pressedState,
+                    selectState,
                     disabledState
-                ][state || 0])
-                    .css([
+                ][state || 0]);
+                var css_1 = [
                     normalStyle,
                     hoverStyle,
-                    pressedStyle,
+                    selectStyle,
                     disabledStyle
-                ][state || 0]);
+                ][state || 0];
+                if (isObject(css_1)) {
+                    label.css(css_1);
+                }
             }
         };
         // Presentational attributes
@@ -1293,7 +1298,7 @@ var SVGRenderer = /** @class */ (function () {
      */
     SVGRenderer.prototype.fontMetrics = function (fontSize, elem) {
         if ((this.styledMode || !/px/.test(fontSize)) &&
-            win.getComputedStyle // old IE doesn't support it
+            (win.getComputedStyle) // old IE doesn't support it
         ) {
             fontSize = elem && SVGElement.prototype.getStyle.call(elem, 'font-size');
         }

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

@@ -14,10 +14,12 @@ var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
         return extendStatics(d, b);
     };
     return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
         extendStatics(d, b);
         function __() { this.constructor = d; }
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
@@ -165,7 +167,7 @@ var SVGRenderer3D = /** @class */ (function (_super) {
                 var chart = charts[renderer.chartIndex], vertexes2d = perspective(this.vertexes, chart, this.insidePlotArea), path = renderer.toLinePath(vertexes2d, true), area = shapeArea(vertexes2d);
                 hash.d = path;
                 hash.visibility = (this.enabled && area > 0) ?
-                    'visible' : 'hidden';
+                    'inherit' : 'hidden';
             }
             return SVGElement.prototype.attr.apply(this, arguments);
         };

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, isString = U.isString, objectEach = U.objectEach, pick = U.pick;
+var attr = U.attr, extend = U.extend, isString = U.isString, objectEach = U.objectEach, pick = U.pick;
 /* *
  *
  *  Class
@@ -280,27 +280,29 @@ var TextBuilder = /** @class */ (function () {
     TextBuilder.prototype.modifyTree = function (nodes) {
         var _this = this;
         var modifyChild = function (node, i) {
-            var _a = node.attributes, attributes = _a === void 0 ? {} : _a, children = node.children, tagName = node.tagName, styledMode = _this.renderer.styledMode;
+            var _a = node.attributes, attributes = _a === void 0 ? {} : _a, children = node.children, _b = node.style, style = _b === void 0 ? {} : _b, tagName = node.tagName, styledMode = _this.renderer.styledMode;
             // Apply styling to text tags
             if (tagName === 'b' || tagName === 'strong') {
                 if (styledMode) {
-                    attributes['class'] = 'highcharts-strong'; // eslint-disable-line dot-notation
+                    // eslint-disable-next-line dot-notation
+                    attributes['class'] = 'highcharts-strong';
                 }
                 else {
-                    attributes.style = ('font-weight:bold;' + (attributes.style || ''));
+                    style.fontWeight = 'bold';
                 }
             }
             else if (tagName === 'i' || tagName === 'em') {
                 if (styledMode) {
-                    attributes['class'] = 'highcharts-emphasized'; // eslint-disable-line dot-notation
+                    // eslint-disable-next-line dot-notation
+                    attributes['class'] = 'highcharts-emphasized';
                 }
                 else {
-                    attributes.style = ('font-style:italic;' + (attributes.style || ''));
+                    style.fontStyle = 'italic';
                 }
             }
-            // Modify attributes
-            if (isString(attributes.style)) {
-                attributes.style = attributes.style.replace(/(;| |^)color([ :])/, '$1fill$2');
+            // Modify styling
+            if (style && style.color) {
+                style.fill = style.color;
             }
             // Handle breaks
             if (tagName === 'br') {
@@ -325,7 +327,7 @@ var TextBuilder = /** @class */ (function () {
             if (tagName !== '#text' && tagName !== 'a') {
                 node.tagName = 'tspan';
             }
-            node.attributes = attributes;
+            extend(node, { attributes: attributes, style: style });
             // Recurse
             if (children) {
                 children

package/es-modules/Core/Scrollbar.js

@@ -379,6 +379,8 @@ var Scrollbar = /** @class */ (function () {
     Scrollbar.prototype.position = function (x, y, width, height) {
         var scroller = this, options = scroller.options, vertical = options.vertical, method = scroller.rendered ? 'animate' : 'attr';
         var xOffset = height, yOffset = 0;
+        // Make the scrollbar visible when it is repositioned, #15763.
+        scroller.group.show();
         scroller.x = x;
         scroller.y = y + this.trackBorderWidth;
         scroller.width = width; // width with buttons
@@ -433,10 +435,12 @@ var Scrollbar = /** @class */ (function () {
      * @function Highcharts.Scrollbar#render
      */
     Scrollbar.prototype.render = function () {
-        var scroller = this, renderer = scroller.renderer, options = scroller.options, size = scroller.size, styledMode = scroller.chart.styledMode, group = renderer.g('scrollbar').attr({
-            zIndex: options.zIndex,
-            translateY: -99999
-        }).add();
+        var scroller = this, renderer = scroller.renderer, options = scroller.options, size = scroller.size, styledMode = scroller.chart.styledMode, group = renderer.g('scrollbar')
+            .attr({
+            zIndex: options.zIndex
+        })
+            .hide() // initially hide the scrollbar #15863
+            .add();
         // Draw the scrollbar group
         scroller.group = group;
         // Draw the scrollbar track:
@@ -558,7 +562,7 @@ var Scrollbar = /** @class */ (function () {
             scroller.scrollbarRifles.hide();
         }
         else {
-            scroller.scrollbarRifles.show(true);
+            scroller.scrollbarRifles.show();
         }
         // Show or hide the scrollbar based on the showFull setting
         if (options.showFull === false) {

package/es-modules/Core/ScrollbarDefaults.js

@@ -120,7 +120,7 @@ var ScrollbarDefaults = {
      *
      * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
      */
-    barBackgroundColor: "#cccccc" /* neutralColor20 */,
+    barBackgroundColor: "#cccccc" /* Palette.neutralColor20 */,
     /**
      * The width of the bar's border.
      *
@@ -133,7 +133,7 @@ var ScrollbarDefaults = {
      *
      * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
      */
-    barBorderColor: "#cccccc" /* neutralColor20 */,
+    barBorderColor: "#cccccc" /* Palette.neutralColor20 */,
     /**
      * The color of the small arrow inside the scrollbar buttons.
      *
@@ -142,7 +142,7 @@ var ScrollbarDefaults = {
      *
      * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
      */
-    buttonArrowColor: "#333333" /* neutralColor80 */,
+    buttonArrowColor: "#333333" /* Palette.neutralColor80 */,
     /**
      * The color of scrollbar buttons.
      *
@@ -151,7 +151,7 @@ var ScrollbarDefaults = {
      *
      * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
      */
-    buttonBackgroundColor: "#e6e6e6" /* neutralColor10 */,
+    buttonBackgroundColor: "#e6e6e6" /* Palette.neutralColor10 */,
     /**
      * The color of the border of the scrollbar buttons.
      *
@@ -160,7 +160,7 @@ var ScrollbarDefaults = {
      *
      * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
      */
-    buttonBorderColor: "#cccccc" /* neutralColor20 */,
+    buttonBorderColor: "#cccccc" /* Palette.neutralColor20 */,
     /**
      * The border width of the scrollbar buttons.
      *
@@ -173,7 +173,7 @@ var ScrollbarDefaults = {
      *
      * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
      */
-    rifleColor: "#333333" /* neutralColor80 */,
+    rifleColor: "#333333" /* Palette.neutralColor80 */,
     /**
      * The color of the track background.
      *
@@ -182,7 +182,7 @@ var ScrollbarDefaults = {
      *
      * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
      */
-    trackBackgroundColor: "#f2f2f2" /* neutralColor5 */,
+    trackBackgroundColor: "#f2f2f2" /* Palette.neutralColor5 */,
     /**
      * The color of the border of the scrollbar track.
      *
@@ -191,7 +191,7 @@ var ScrollbarDefaults = {
      *
      * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
      */
-    trackBorderColor: "#f2f2f2" /* neutralColor5 */,
+    trackBorderColor: "#f2f2f2" /* Palette.neutralColor5 */,
     /**
      * The corner radius of the border of the scrollbar track.
      *

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

@@ -44,16 +44,18 @@ var DataLabel;
      * @private
      */
     function alignDataLabel(point, dataLabel, options, alignTo, isNew) {
-        var series = this, chart = this.chart, inverted = this.isCartesian && chart.inverted, enabledDataSorting = this.enabledDataSorting, plotX = pick(point.dlBox && point.dlBox.centerX, point.plotX, -9999), plotY = pick(point.plotY, -9999), bBox = dataLabel.getBBox(), rotation = options.rotation, align = options.align, isInsidePlot = chart.isInsidePlot(plotX, Math.round(plotY), {
-            inverted: inverted,
-            paneCoordinates: true,
-            series: series
-        }), setStartPos = function (alignOptions) {
+        var series = this, chart = this.chart, inverted = this.isCartesian && chart.inverted, enabledDataSorting = this.enabledDataSorting, plotX = pick(point.dlBox && point.dlBox.centerX, point.plotX), plotY = point.plotY, rotation = options.rotation, align = options.align, isInsidePlot = defined(plotX) &&
+            defined(plotY) &&
+            chart.isInsidePlot(plotX, Math.round(plotY), {
+                inverted: inverted,
+                paneCoordinates: true,
+                series: series
+            }), setStartPos = function (alignOptions) {
             if (enabledDataSorting && series.xAxis && !justify) {
                 series.setDataLabelStartPos(point, dataLabel, isNew, isInsidePlot, alignOptions);
             }
         };
-        var baseline, normRotation, negRotation, rotCorr, // rotation correction
+        var baseline, rotCorr, // rotation correction
         // Math.round for rounding errors (#2683), alignTo to allow column
         // labels (#2700)
         alignAttr, // the final position;
@@ -76,7 +78,11 @@ var DataLabel;
                         paneCoordinates: true,
                         series: series
                     })));
-        if (visible) {
+        if (visible && defined(plotX) && defined(plotY)) {
+            if (rotation) {
+                dataLabel.attr({ align: align });
+            }
+            var bBox = dataLabel.getBBox(true), bBoxCorrection = [0, 0];
             baseline = chart.renderer.fontMetrics(chart.styledMode ? void 0 : options.style.fontSize, dataLabel).b;
             // The alignment box is a singular point
             alignTo = extend({
@@ -105,27 +111,12 @@ var DataLabel;
                         { top: 0, middle: 0.5, bottom: 1 }[options.verticalAlign] *
                             alignTo.height)
                 };
+                bBoxCorrection = [
+                    bBox.x - Number(dataLabel.attr('x')),
+                    bBox.y - Number(dataLabel.attr('y'))
+                ];
                 setStartPos(alignAttr); // data sorting
-                dataLabel[isNew ? 'attr' : 'animate'](alignAttr)
-                    .attr({
-                    align: align
-                });
-                // Compensate for the rotated label sticking out on the sides
-                normRotation = (rotation + 720) % 360;
-                negRotation = normRotation > 180 && normRotation < 360;
-                if (align === 'left') {
-                    alignAttr.y -= negRotation ? bBox.height : 0;
-                }
-                else if (align === 'center') {
-                    alignAttr.x -= bBox.width / 2;
-                    alignAttr.y -= bBox.height / 2;
-                }
-                else if (align === 'right') {
-                    alignAttr.x -= bBox.width;
-                    alignAttr.y -= negRotation ? 0 : bBox.height;
-                }
-                dataLabel.placed = true;
-                dataLabel.alignAttr = alignAttr;
+                dataLabel[isNew ? 'attr' : 'animate'](alignAttr);
             }
             else {
                 setStartPos(alignTo); // data sorting
@@ -138,12 +129,36 @@ var DataLabel;
                 // Now check that the data label is within the plot area
             }
             else if (pick(options.crop, true)) {
+                var x = alignAttr.x, y = alignAttr.y;
+                x += bBoxCorrection[0];
+                y += bBoxCorrection[1];
+                // Uncomment this block to visualize the bounding boxes used for
+                // determining visibility
+                /*
+                chart.renderer.rect(
+                    chart.plotLeft + alignAttr.x + bBox.x,
+                    chart.plotTop + alignAttr.y + bBox.y + 9999,
+                    bBox.width,
+                    bBox.height
+                ).attr({
+                    stroke: 'rgba(0, 0, 0, 0.3)',
+                    'stroke-width': 0.5
+                }).add();
+                chart.renderer.circle(
+                    chart.plotLeft + alignAttr.x,
+                    chart.plotTop + alignAttr.y,
+                    2
+                ).attr({
+                    fill: 'red',
+                    zIndex: 20
+                }).add();
+                // */
                 visible =
-                    chart.isInsidePlot(alignAttr.x, alignAttr.y, {
+                    chart.isInsidePlot(x, y, {
                         paneCoordinates: true,
                         series: series
                     }) &&
-                        chart.isInsidePlot(alignAttr.x + bBox.width, alignAttr.y + bBox.height, {
+                        chart.isInsidePlot(x + bBox.width, y + bBox.height, {
                             paneCoordinates: true,
                             series: series
                         });
@@ -167,9 +182,12 @@ var DataLabel;
         }
         // Show or hide based on the final aligned position
         if (!visible && (!enabledDataSorting || justify)) {
-            dataLabel.hide(true);
+            dataLabel.hide();
             dataLabel.placed = false; // don't animate back in
         }
+        else {
+            dataLabel.show();
+        }
     }
     /**
      * Handle the dataLabels.filter option.
@@ -235,7 +253,7 @@ var DataLabel;
                 var group = series.dataLabelsGroup;
                 if (group) {
                     if (series.visible) { // #2597, #3023, #3024
-                        dataLabelsGroup.show(true);
+                        dataLabelsGroup.show();
                     }
                     group[seriesOptions.animation ? 'animate' : 'attr']({ opacity: 1 }, animationConfig);
                 }
@@ -259,8 +277,8 @@ var DataLabel;
                         point.connectors[i] :
                         point.connector;
                     var labelConfig, formatString, labelText, style, rotation, attr, dataLabel = point.dataLabels ?
-                        point.dataLabels[i] : point.dataLabel;
-                    var labelDistance = pick(labelOptions.distance, point.labelDistance), isNew = !dataLabel;
+                        point.dataLabels[i] : point.dataLabel, isNew = !dataLabel;
+                    var labelDistance = pick(labelOptions.distance, point.labelDistance);
                     if (labelEnabled) {
                         // Create individual options structure that can be
                         // extended without affecting others
@@ -274,7 +292,7 @@ var DataLabel;
                         rotation = labelOptions.rotation;
                         if (!chart.styledMode) {
                             // Determine the color
-                            style.color = pick(labelOptions.color, style.color, series.color, "#000000" /* neutralColor100 */);
+                            style.color = pick(labelOptions.color, style.color, series.color, "#000000" /* Palette.neutralColor100 */);
                             // Get automated contrast color
                             if (style.color === 'contrast') {
                                 point.contrastColor = renderer.getContrast((point.color || series.color));
@@ -283,7 +301,7 @@ var DataLabel;
                                     labelDistance < 0 ||
                                     !!seriesOptions.stacking ?
                                     point.contrastColor :
-                                    "#000000" /* neutralColor100 */;
+                                    "#000000" /* Palette.neutralColor100 */;
                             }
                             else {
                                 delete point.contrastColor;
@@ -314,7 +332,15 @@ var DataLabel;
                     // #820
                     if (dataLabel && (!labelEnabled ||
                         !defined(labelText) ||
-                        !!dataLabel.div !== !!labelOptions.useHTML)) {
+                        !!dataLabel.div !== !!labelOptions.useHTML ||
+                        (
+                        // Change from no rotation to rotation and
+                        // vice versa. Don't use defined() because
+                        // rotation = 0 means also rotation = undefined
+                        (!dataLabel.rotation ||
+                            !labelOptions.rotation) &&
+                            dataLabel.rotation !== labelOptions.rotation))) {
+                        isNew = true;
                         point.dataLabel = dataLabel =
                             point.dataLabel && point.dataLabel.destroy();
                         if (point.dataLabels) {
@@ -352,10 +378,10 @@ var DataLabel;
                             point.dataLabels = point.dataLabels || [];
                             dataLabel = point.dataLabels[i] = rotation ?
                                 // Labels don't rotate, use text element
-                                renderer.text(labelText, 0, -9999, labelOptions.useHTML)
+                                renderer.text(labelText, 0, 0, labelOptions.useHTML)
                                     .addClass('highcharts-data-label') :
                                 // We can use label
-                                renderer.label(labelText, 0, -9999, labelOptions.shape, null, null, labelOptions.useHTML, null, 'data-label');
+                                renderer.label(labelText, 0, 0, labelOptions.shape, null, null, labelOptions.useHTML, null, 'data-label');
                             // Store for backwards compatibility
                             if (!i) {
                                 point.dataLabel = dataLabel;
@@ -396,6 +422,9 @@ var DataLabel;
                         // we need to align it
                         series.alignDataLabel(point, dataLabel, labelOptions, null, isNew);
                     }
+                    else if (dataLabel) {
+                        dataLabel.hide();
+                    }
                 });
             });
         }

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

@@ -114,6 +114,15 @@ var Point = /** @class */ (function () {
          * @type {Highcharts.Series}
          */
         this.series = void 0;
+        /**
+         * The attributes of the rendered SVG shape like in `column` or `pie`
+         * series.
+         *
+         * @readonly
+         * @name Highcharts.Point#shapeArgs
+         * @type {Readonly<Highcharts.SVGAttributes>|undefined}
+         */
+        this.shapeArgs = void 0;
         /**
          * The total of values in either a stack for stacked series, or a pie in a
          * pie series.
@@ -1133,7 +1142,7 @@ export default Point;
 * @type {Highcharts.Point}
 */
 /**
- * Configuration hash for the data label and tooltip formatters.
+ * Configuration for the data label and tooltip formatters.
  *
  * @interface Highcharts.PointLabelObject
  */ /**
@@ -1175,7 +1184,7 @@ export default Point;
 */ /**
 * The y value of the point.
 * @name Highcharts.PointLabelObject#y
-* @type {number|undefined}
+* @type {number|null|undefined}
 */
 /**
  * Gets fired when the mouse leaves the area close to the point.