highcharts 9.3.2 → 10.1.0

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

@@ -351,7 +351,7 @@ var SVGElement = /** @class */ (function () {
             }, deferTime);
         }
         else {
-            this.attr(params, void 0, complete);
+            this.attr(params, void 0, complete || animOptions.complete);
             // Call the end step synchronously
             objectEach(params, function (val, prop) {
                 if (animOptions.step) {
@@ -731,22 +731,17 @@ var SVGElement = /** @class */ (function () {
      *         Return the SVG element for chaining.
      */
     SVGElement.prototype.css = function (styles) {
-        var oldStyles = this.styles, newStyles = {}, elem = this.element, 
-        // These CSS properties are interpreted internally by the SVG
-        // renderer, but are not supported by SVG and should not be added to
-        // the DOM. In styled mode, no CSS should find its way to the DOM
-        // whatsoever (#6173, #6474).
-        svgPseudoProps = ['textOutline', 'textOverflow', 'width'];
-        var textWidth, serializedCss = '', hyphenate, hasNew = !oldStyles;
+        var oldStyles = this.styles, newStyles = {}, elem = this.element;
+        var textWidth, hasNew = !oldStyles;
         // convert legacy
-        if (styles && styles.color) {
+        if (styles.color) {
             styles.fill = styles.color;
         }
         // Filter out existing styles to increase performance (#2640)
         if (oldStyles) {
-            objectEach(styles, function (style, n) {
-                if (oldStyles && oldStyles[n] !== style) {
-                    newStyles[n] = style;
+            objectEach(styles, function (value, n) {
+                if (oldStyles && oldStyles[n] !== value) {
+                    newStyles[n] = value;
                     hasNew = true;
                 }
             });
@@ -757,41 +752,30 @@ var SVGElement = /** @class */ (function () {
                 styles = extend(oldStyles, newStyles);
             }
             // Get the text width from style
-            if (styles) {
-                // Previously set, unset it (#8234)
-                if (styles.width === null || styles.width === 'auto') {
-                    delete this.textWidth;
-                    // Apply new
-                }
-                else if (elem.nodeName.toLowerCase() === 'text' &&
-                    styles.width) {
-                    textWidth = this.textWidth = pInt(styles.width);
-                }
+            // Previously set, unset it (#8234)
+            if (styles.width === null || styles.width === 'auto') {
+                delete this.textWidth;
+                // Apply new
+            }
+            else if (elem.nodeName.toLowerCase() === 'text' &&
+                styles.width) {
+                textWidth = this.textWidth = pInt(styles.width);
             }
             // store object
             this.styles = styles;
             if (textWidth && (!svg && this.renderer.forExport)) {
                 delete styles.width;
             }
-            // Serialize and set style attribute
-            if (elem.namespaceURI === this.SVG_NS) { // #7633
-                hyphenate = function (a, b) {
-                    return '-' + b.toLowerCase();
-                };
-                objectEach(styles, function (style, n) {
-                    if (svgPseudoProps.indexOf(n) === -1) {
-                        serializedCss +=
-                            n.replace(/([A-Z])/g, hyphenate) + ':' +
-                                style + ';';
-                    }
-                });
-                if (serializedCss) {
-                    attr(elem, 'style', serializedCss); // #1881
-                }
-            }
-            else {
-                css(elem, styles);
+            var stylesToApply_1 = merge(styles);
+            if (elem.namespaceURI === this.SVG_NS) {
+                // These CSS properties are interpreted internally by the SVG
+                // renderer, but are not supported by SVG and should not be
+                // added to the DOM. In styled mode, no CSS should find its way
+                // to the DOM whatsoever (#6173, #6474).
+                ['textOutline', 'textOverflow', 'width'].forEach(function (key) { return (stylesToApply_1 &&
+                    delete stylesToApply_1[key]); });
             }
+            css(elem, stylesToApply_1);
             if (this.added) {
                 // Rebuild text after added. Cache mechanisms in the buildText
                 // will prevent building if there are no significant changes.
@@ -799,7 +783,7 @@ var SVGElement = /** @class */ (function () {
                     this.renderer.buildText(this);
                 }
                 // Apply text outline after added
-                if (styles && styles.textOutline) {
+                if (styles.textOutline) {
                     this.applyTextOutline(styles.textOutline);
                 }
             }
@@ -1048,10 +1032,9 @@ var SVGElement = /** @class */ (function () {
      *         The bounding box with `x`, `y`, `width` and `height` properties.
      */
     SVGElement.prototype.getBBox = function (reload, rot) {
-        var wrapper = this, renderer = wrapper.renderer, element = wrapper.element, styles = wrapper.styles, textStr = wrapper.textStr, cache = renderer.cache, cacheKeys = renderer.cacheKeys, isSVG = element.namespaceURI === wrapper.SVG_NS, rotation = pick(rot, wrapper.rotation, 0), fontSize = renderer.styledMode ? (element &&
+        var wrapper = this, alignValue = wrapper.alignValue, element = wrapper.element, renderer = wrapper.renderer, styles = wrapper.styles, textStr = wrapper.textStr, cache = renderer.cache, cacheKeys = renderer.cacheKeys, isSVG = element.namespaceURI === wrapper.SVG_NS, rotation = pick(rot, wrapper.rotation, 0), fontSize = renderer.styledMode ? (element &&
             SVGElement.prototype.getStyle.call(element, 'font-size')) : (styles && styles.fontSize);
-        var bBox, // = wrapper.bBox,
-        width, height, toggleTextShadowShim, cacheKey;
+        var bBox, width, height, toggleTextShadowShim, cacheKey;
         // Avoid undefined and null (#7316)
         if (defined(textStr)) {
             cacheKey = textStr.toString();
@@ -1068,6 +1051,7 @@ var SVGElement = /** @class */ (function () {
                 rotation,
                 fontSize,
                 wrapper.textWidth,
+                alignValue,
                 styles && styles.textOverflow,
                 styles && styles.fontWeight // #12163
             ].join(',');
@@ -1113,7 +1097,7 @@ var SVGElement = /** @class */ (function () {
                 // other condition is for Opera that returns a width of
                 // -Infinity on hidden elements.
                 if (!bBox || bBox.width < 0) {
-                    bBox = { width: 0, height: 0 };
+                    bBox = { x: 0, y: 0, width: 0, height: 0 };
                 }
                 // VML Renderer or useHTML within SVG
             }
@@ -1142,11 +1126,20 @@ var SVGElement = /** @class */ (function () {
                 }
                 // Adjust for rotated text
                 if (rotation) {
-                    var rad = rotation * deg2rad;
-                    bBox.width = Math.abs(height * Math.sin(rad)) +
-                        Math.abs(width * Math.cos(rad));
-                    bBox.height = Math.abs(height * Math.cos(rad)) +
-                        Math.abs(width * Math.sin(rad));
+                    var baseline = Number(element.getAttribute('y') || 0) - bBox.y, alignFactor = {
+                        'right': 1,
+                        'center': 0.5
+                    }[alignValue || 0] || 0, rad = rotation * deg2rad, rad90 = (rotation - 90) * deg2rad, wCosRad = width * Math.cos(rad), wSinRad = width * Math.sin(rad), cosRad90 = Math.cos(rad90), sinRad90 = Math.sin(rad90), 
+                    // Find the starting point on the left side baseline of
+                    // the text
+                    pX = bBox.x + alignFactor * (width - wCosRad), pY = bBox.y + baseline - alignFactor * wSinRad, 
+                    // Find all corners
+                    aX = pX + baseline * cosRad90, bX = aX + wCosRad, cX = bX - height * cosRad90, dX = cX - wCosRad, aY = pY + baseline * sinRad90, bY = aY + wSinRad, cY = bY - height * sinRad90, dY = cY - wSinRad;
+                    // Deduct the bounding box from the corners
+                    bBox.x = Math.min(aX, bX, cX, dX);
+                    bBox.y = Math.min(aY, bY, cY, dY);
+                    bBox.width = Math.max(aX, bX, cX, dX) - bBox.x;
+                    bBox.height = Math.max(aY, bY, cY, dY) - bBox.y;
                 }
             }
             // Cache it. When loading a chart in a hidden iframe in Firefox and
@@ -1205,21 +1198,11 @@ var SVGElement = /** @class */ (function () {
      *
      * @function Highcharts.SVGElement#hide
      *
-     * @param {boolean} [hideByTranslation=false]
-     *        The flag to determine if element should be hidden by moving out
-     *        of the viewport. Used for example for dataLabels.
-     *
      * @return {Highcharts.SVGElement}
      *         Returns the SVGElement for chaining.
      */
-    SVGElement.prototype.hide = function (hideByTranslation) {
-        if (hideByTranslation) {
-            this.attr({ y: -9999 });
-        }
-        else {
-            this.attr({ visibility: 'hidden' });
-        }
-        return this;
+    SVGElement.prototype.hide = function () {
+        return this.attr({ visibility: 'hidden' });
     };
     /**
      * @private
@@ -1620,7 +1603,7 @@ var SVGElement = /** @class */ (function () {
      *
      * @function Highcharts.SVGElement#show
      *
-     * @param {boolean} [inherit=false]
+     * @param {boolean} [inherit=true]
      *        Set the visibility attribute to `inherit` rather than `visible`.
      *        The difference is that an element with `visibility="visible"`
      *        will be visible even if the parent is hidden.
@@ -1629,6 +1612,7 @@ var SVGElement = /** @class */ (function () {
      *         Returns the SVGElement for chaining.
      */
     SVGElement.prototype.show = function (inherit) {
+        if (inherit === void 0) { inherit = true; }
         return this.attr({ visibility: inherit ? 'inherit' : 'visible' });
     };
     /**

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

@@ -31,10 +31,21 @@ SVGElement3D.base = {
         var elem3d = this, renderer = elem3d.renderer, paths = renderer[elem3d.pathType + 'Path'](args), zIndexes = paths.zIndexes;
         // build parts
         elem3d.parts.forEach(function (part) {
-            elem3d[part] = renderer.path(paths[part]).attr({
+            var attribs = {
                 'class': 'highcharts-3d-' + part,
                 zIndex: zIndexes[part] || 0
-            }).add(elem3d);
+            };
+            if (renderer.styledMode) {
+                if (part === 'top') {
+                    attribs.filter = 'url(#highcharts-brighter)';
+                }
+                else if (part === 'side') {
+                    attribs.filter = 'url(#highcharts-darker)';
+                }
+            }
+            elem3d[part] = renderer.path(paths[part])
+                .attr(attribs)
+                .add(elem3d);
         });
         elem3d.attr({
             'stroke-linejoin': 'round',
@@ -126,11 +137,12 @@ SVGElement3D.cuboid = merge(SVGElement3D.base, {
             this.attr({
                 zIndex: paths.zIndexes.group
             });
-            // If sides that are forced to render changed, recalculate
-            // colors.
+            // If sides that are forced to render changed, recalculate colors.
             if (forcedSides !== this.forcedSides) {
                 this.forcedSides = forcedSides;
-                SVGElement3D.cuboid.fillSetter.call(this, this.fill);
+                if (!this.renderer.styledMode) {
+                    SVGElement3D.cuboid.fillSetter.call(this, this.fill);
+                }
             }
         }
         else {

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.2'));
+        desc.element.appendChild(doc.createTextNode('Created with Highcharts 10.1.0'));
         renderer.defs = this.createElement('defs').add();
         renderer.allowHTML = allowHTML;
         renderer.forExport = forExport;
@@ -502,7 +502,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 +517,57 @@ 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;
+    SVGRenderer.prototype.button = function (text, x, y, callback, theme, hoverState, selectState, disabledState, shape, useHTML) {
+        var label = this.label(text, x, y, shape, void 0, void 0, useHTML, void 0, 'button'), styledMode = this.styledMode, states = (theme && theme.states) || {};
+        if (theme) {
+            delete theme.states;
+        }
         var curState = 0, 
         // Make a copy of normalState (#13798)
         // (reference to options.rangeSelector.buttonTheme)
         normalState = theme ? merge(theme) : {};
-        var userNormalStyle = normalState && normalState.style || {};
+        var normalStyle = merge({
+            color: "#333333" /* neutralColor80 */,
+            cursor: 'pointer',
+            fontWeight: 'normal'
+        }, normalState.style);
+        delete normalState.style;
         // Remove stylable attributes
         normalState = AST.filterUserAttributes(normalState);
         // 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
+                'stroke-width': 1
             }, normalState);
-            normalStyle = normalState.style;
-            delete normalState.style;
             // Hover state
             hoverState = merge(normalState, {
                 fill: "#e6e6e6" /* neutralColor10 */
-            }, AST.filterUserAttributes(hoverState || {}));
+            }, AST.filterUserAttributes(hoverState || states.hover || {}));
             hoverStyle = hoverState.style;
             delete hoverState.style;
             // Pressed state
-            pressedState = merge(normalState, {
+            selectState = merge(normalState, {
                 fill: "#e6ebf5" /* highlightColor10 */,
                 style: {
                     color: "#000000" /* 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 */
                 }
-            }, AST.filterUserAttributes(disabledState || {}));
+            }, AST.filterUserAttributes(disabledState || states.disabled || {}));
             disabledStyle = disabledState.style;
             delete disabledState.style;
         }
@@ -598,15 +598,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

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

@@ -165,7 +165,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/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
@@ -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();
+                    }
                 });
             });
         }