highcharts 10.0.0 → 10.2.1

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.0.0'));
+        desc.element.appendChild(doc.createTextNode('Created with Highcharts 10.2.1'));
         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]
@@ -512,59 +516,60 @@ 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.
      */
-    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) : {};
+    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" /* neutralColor80 */,
+            color: "#333333" /* Palette.neutralColor80 */,
             cursor: 'pointer',
             fontWeight: 'normal'
-        }, normalState.style);
-        delete normalState.style;
-        // Remove stylable attributes
-        normalState = AST.filterUserAttributes(normalState);
+        }, 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. The string type is a mistake, it is just for
         // compliance with SVGAttribute and is not used in button theme.
-        var hoverStyle, pressedStyle, disabledStyle;
+        var hoverStyle, selectStyle, disabledStyle;
         if (!styledMode) {
             // Normal state - prepare the attributes
             normalState = merge({
-                fill: "#f7f7f7" /* neutralColor3 */,
-                stroke: "#cccccc" /* neutralColor20 */,
+                fill: "#f7f7f7" /* Palette.neutralColor3 */,
+                stroke: "#cccccc" /* Palette.neutralColor20 */,
                 'stroke-width': 1
             }, normalState);
             // 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;
         }
@@ -595,13 +600,13 @@ var SVGRenderer = /** @class */ (function () {
                     .attr([
                     normalState,
                     hoverState,
-                    pressedState,
+                    selectState,
                     disabledState
                 ][state || 0]);
                 var css_1 = [
                     normalStyle,
                     hoverStyle,
-                    pressedStyle,
+                    selectStyle,
                     disabledStyle
                 ][state || 0];
                 if (isObject(css_1)) {
@@ -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');
         }
@@ -1610,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

@@ -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 __());
@@ -29,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';
@@ -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, 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

@@ -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) {
@@ -579,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/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

@@ -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
@@ -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.
@@ -212,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) :
@@ -235,7 +255,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);
                 }
@@ -274,7 +294,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 +303,7 @@ var DataLabel;
                                     labelDistance < 0 ||
                                     !!seriesOptions.stacking ?
                                     point.contrastColor :
-                                    "#000000" /* neutralColor100 */;
+                                    contrastColor;
                             }
                             else {
                                 delete point.contrastColor;
@@ -360,10 +380,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;
@@ -388,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);
@@ -400,10 +417,16 @@ 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);
                     }
+                    else if (dataLabel) {
+                        dataLabel.hide();
+                    }
                 });
             });
         }

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;
         /**
@@ -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.
@@ -381,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--) {