highcharts 9.2.2 → 9.3.3

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

@@ -12,7 +12,6 @@ import AST from '../HTML/AST.js';
 import Color from '../../Color/Color.js';
 import H from '../../Globals.js';
 var charts = H.charts, deg2rad = H.deg2rad, doc = H.doc, isFirefox = H.isFirefox, isMS = H.isMS, isWebKit = H.isWebKit, noop = H.noop, SVG_NS = H.SVG_NS, symbolSizes = H.symbolSizes, win = H.win;
-import Palette from '../../Color/Palette.js';
 import RendererRegistry from '../RendererRegistry.js';
 import SVGElement from './SVGElement.js';
 import SVGLabel from './SVGLabel.js';
@@ -194,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.2.2'));
+        desc.element.appendChild(doc.createTextNode('Created with Highcharts 9.3.3'));
         renderer.defs = this.createElement('defs').add();
         renderer.allowHTML = allowHTML;
         renderer.forExport = forExport;
@@ -385,6 +384,7 @@ var SVGRenderer = /** @class */ (function () {
      * @function Highcharts.SVGRenderer#destroy
      *
      * @return {null}
+     * Pass through value.
      */
     SVGRenderer.prototype.destroy = function () {
         var renderer = this, rendererDefs = renderer.defs;
@@ -533,11 +533,11 @@ var SVGRenderer = /** @class */ (function () {
         if (!styledMode) {
             // Normal state - prepare the attributes
             normalState = merge({
-                fill: Palette.neutralColor3,
-                stroke: Palette.neutralColor20,
+                fill: "#f7f7f7" /* neutralColor3 */,
+                stroke: "#cccccc" /* neutralColor20 */,
                 'stroke-width': 1,
                 style: {
-                    color: Palette.neutralColor80,
+                    color: "#333333" /* neutralColor80 */,
                     cursor: 'pointer',
                     fontWeight: 'normal'
                 }
@@ -548,15 +548,15 @@ var SVGRenderer = /** @class */ (function () {
             delete normalState.style;
             // Hover state
             hoverState = merge(normalState, {
-                fill: Palette.neutralColor10
+                fill: "#e6e6e6" /* neutralColor10 */
             }, AST.filterUserAttributes(hoverState || {}));
             hoverStyle = hoverState.style;
             delete hoverState.style;
             // Pressed state
             pressedState = merge(normalState, {
-                fill: Palette.highlightColor10,
+                fill: "#e6ebf5" /* highlightColor10 */,
                 style: {
-                    color: Palette.neutralColor100,
+                    color: "#000000" /* neutralColor100 */,
                     fontWeight: 'bold'
                 }
             }, AST.filterUserAttributes(pressedState || {}));
@@ -565,7 +565,7 @@ var SVGRenderer = /** @class */ (function () {
             // Disabled state
             disabledState = merge(normalState, {
                 style: {
-                    color: Palette.neutralColor20
+                    color: "#cccccc" /* neutralColor20 */
                 }
             }, AST.filterUserAttributes(disabledState || {}));
             disabledStyle = disabledState.style;
@@ -980,14 +980,18 @@ var SVGRenderer = /** @class */ (function () {
                 el.setAttribute('hc-svg-href', src);
             }
         };
-        // optional properties
-        if (arguments.length > 1) {
-            extend(attribs, {
-                x: x,
-                y: y,
-                width: width,
-                height: height
-            });
+        // Optional properties (#11756)
+        if (isNumber(x)) {
+            attribs.x = x;
+        }
+        if (isNumber(y)) {
+            attribs.y = y;
+        }
+        if (isNumber(width)) {
+            attribs.width = width;
+        }
+        if (isNumber(height)) {
+            attribs.height = height;
         }
         var elemWrapper = this.createElement('image').attr(attribs), onDummyLoad = function (e) {
             setSVGImageSource(elemWrapper.element, src);
@@ -1038,6 +1042,7 @@ var SVGRenderer = /** @class */ (function () {
      * Additional options, depending on the actual symbol drawn.
      *
      * @return {Highcharts.SVGElement}
+     * SVG symbol.
      */
     SVGRenderer.prototype.symbol = function (symbol, x, y, width, height, options) {
         var ren = this, imageRegex = /^url\((.*?)\)$/, isImage = imageRegex.test(symbol), sym = (!isImage && (this.symbols[symbol] ? symbol : 'circle')), 
@@ -1259,8 +1264,8 @@ var SVGRenderer = /** @class */ (function () {
                 var tspans = element.getElementsByTagName('tspan'), parentVal = element.getAttribute(key);
                 for (var i = 0, tspan = void 0; i < tspans.length; i++) {
                     tspan = tspans[i];
-                    // If the x values are equal, the tspan represents a
-                    // linebreak
+                    // If the x values are equal, the tspan represents a line
+                    // break
                     if (tspan.getAttribute(key) === parentVal) {
                         tspan.setAttribute(key, value);
                     }
@@ -1323,14 +1328,6 @@ var SVGRenderer = /** @class */ (function () {
      *
      * @private
      * @function Highcharts.SVGRenderer#rotCorr
-     *
-     * @param {number} baseline
-     *
-     * @param {number} rotation
-     *
-     * @param {boolean} [alterY]
-     *
-     * @param {Highcharts.PositionObject}
      */
     SVGRenderer.prototype.rotCorr = function (baseline, rotation, alterY) {
         var y = baseline;
@@ -1634,7 +1631,6 @@ var SVGRenderer = /** @class */ (function () {
      *
      * @private
      * @function Highcharts.SVGRenderer#alignElements
-     * @return {void}
      */
     SVGRenderer.prototype.alignElements = function () {
         this.alignedObjects.forEach(function (el) { return el.align(); });
@@ -1782,7 +1778,7 @@ export default SVGRenderer;
 * The shadow color.
 * @name    Highcharts.ShadowOptionsObject#color
 * @type    {Highcharts.ColorString|undefined}
-* @default ${palette.neutralColor100}
+* @default #000000
 */ /**
 * The horizontal offset from the element.
 *

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

@@ -164,7 +164,8 @@ var SVGRenderer3D = /** @class */ (function (_super) {
                 delete hash.insidePlotArea;
                 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';
+                hash.visibility = (this.enabled && area > 0) ?
+                    'visible' : 'hidden';
             }
             return SVGElement.prototype.attr.apply(this, arguments);
         };
@@ -179,7 +180,8 @@ var SVGRenderer3D = /** @class */ (function (_super) {
                 delete params.enabled;
                 delete params.vertexes;
                 delete params.insidePlotArea;
-                var chart = charts[renderer.chartIndex], vertexes2d = perspective(this.vertexes, chart, this.insidePlotArea), path = renderer.toLinePath(vertexes2d, true), area = shapeArea(vertexes2d), visibility = (this.enabled && area > 0) ? 'visible' : 'hidden';
+                var chart = charts[renderer.chartIndex], vertexes2d = perspective(this.vertexes, chart, this.insidePlotArea), path = renderer.toLinePath(vertexes2d, true), area = shapeArea(vertexes2d), visibility = (this.enabled && area > 0) ?
+                    'visible' : 'hidden';
                 params.d = path;
                 this.attr('visibility', visibility);
             }
@@ -584,7 +586,7 @@ var SVGRenderer3D = /** @class */ (function (_super) {
         // related to the shapes directly, and update the shapes from the
         // animation step.
         wrapper.animate = function (params, animation, complete) {
-            var paramArr, from = this.attribs, to, anim, randomProp = 'data-' + Math.random().toString(26).substring(2, 9);
+            var paramArr, from = this.attribs, to, anim, randomProp = ('data-' + Math.random().toString(26).substring(2, 9));
             // Attribute-line properties connected to 3D. These shouldn't have
             // been in the attribs collection in the first place.
             delete params.center;
@@ -763,7 +765,9 @@ var SVGRenderer3D = /** @class */ (function (_super) {
             out = out.concat(SVGRenderer3D.curveTo(cx, cy, rx, ry, end, end2, 0, 0));
         }
         out.push([
-            'L', cx + (rx * Math.cos(end2)) + dx, cy + (ry * Math.sin(end2)) + dy
+            'L',
+            cx + (rx * Math.cos(end2)) + dx,
+            cy + (ry * Math.sin(end2)) + dy
         ]);
         out = out.concat(SVGRenderer3D.curveTo(cx, cy, rx, ry, end2, start2, dx, dy));
         out.push(['Z']);
@@ -773,7 +777,9 @@ var SVGRenderer3D = /** @class */ (function (_super) {
         ];
         inn = inn.concat(SVGRenderer3D.curveTo(cx, cy, irx, iry, start, end, 0, 0));
         inn.push([
-            'L', cx + (irx * Math.cos(end)) + dx, cy + (iry * Math.sin(end)) + dy
+            'L',
+            cx + (irx * Math.cos(end)) + dx,
+            cy + (iry * Math.sin(end)) + dy
         ]);
         inn = inn.concat(SVGRenderer3D.curveTo(cx, cy, irx, iry, end, start, dx, dy));
         inn.push(['Z']);
@@ -820,6 +826,7 @@ var SVGRenderer3D = /** @class */ (function (_super) {
             inn: inn,
             zInn: Math.max(a1, a2, a3),
             side1: side1,
+            // to keep below zOut and zInn in case of same values
             zSide1: a3 * 0.99,
             side2: side2,
             zSide2: a2 * 0.99

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

@@ -10,7 +10,7 @@
 'use strict';
 import AST from '../HTML/AST.js';
 import H from '../../Globals.js';
-var doc = H.doc, SVG_NS = H.SVG_NS;
+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;
 /* *
@@ -112,7 +112,6 @@ var TextBuilder = /** @class */ (function () {
      *
      * @private
      *
-     * @return {void}
      */
     TextBuilder.prototype.modifyDOM = function () {
         var _this = this;
@@ -229,7 +228,7 @@ var TextBuilder = /** @class */ (function () {
         var modifyChildren = (function (node) {
             var childNodes = [].slice.call(node.childNodes);
             childNodes.forEach(function (childNode) {
-                if (childNode.nodeType === Node.TEXT_NODE) {
+                if (childNode.nodeType === win.Node.TEXT_NODE) {
                     modifyTextNode(childNode, node);
                 }
                 else {
@@ -255,7 +254,7 @@ var TextBuilder = /** @class */ (function () {
     TextBuilder.prototype.getLineHeight = function (node) {
         var fontSizeStyle;
         // If the node is a text node, use its parent
-        var element = node.nodeType === Node.TEXT_NODE ?
+        var element = (node.nodeType === win.Node.TEXT_NODE) ?
             node.parentElement :
             node;
         if (!this.renderer.styledMode) {
@@ -277,21 +276,18 @@ var TextBuilder = /** @class */ (function () {
      *
      * @param {ASTNode[]} nodes The AST nodes
      *
-     * @return {void}
      */
     TextBuilder.prototype.modifyTree = function (nodes) {
         var _this = this;
         var modifyChild = function (node, i) {
-            var tagName = node.tagName;
-            var styledMode = _this.renderer.styledMode;
-            var attributes = node.attributes || {};
+            var _a = node.attributes, attributes = _a === void 0 ? {} : _a, children = node.children, 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
                 }
                 else {
-                    attributes.style = 'font-weight:bold;' + (attributes.style || '');
+                    attributes.style = ('font-weight:bold;' + (attributes.style || ''));
                 }
             }
             else if (tagName === 'i' || tagName === 'em') {
@@ -299,13 +295,14 @@ var TextBuilder = /** @class */ (function () {
                     attributes['class'] = 'highcharts-emphasized'; // eslint-disable-line dot-notation
                 }
                 else {
-                    attributes.style = 'font-style:italic;' + (attributes.style || '');
+                    attributes.style = ('font-style:italic;' + (attributes.style || ''));
                 }
             }
             // Modify attributes
             if (isString(attributes.style)) {
                 attributes.style = attributes.style.replace(/(;| |^)color([ :])/, '$1fill$2');
             }
+            // Handle breaks
             if (tagName === 'br') {
                 attributes['class'] = 'highcharts-br'; // eslint-disable-line dot-notation
                 node.textContent = '\u200B'; // zero-width space
@@ -315,14 +312,23 @@ var TextBuilder = /** @class */ (function () {
                     nextNode.textContent =
                         nextNode.textContent.replace(/^ +/gm, '');
                 }
+                // If an anchor has direct text node children, the text is unable to
+                // wrap because there is no `getSubStringLength` function on the
+                // element. Therefore we need to wrap the child text node or nodes
+                // in a tspan. #16173.
+            }
+            else if (tagName === 'a' &&
+                children &&
+                children.some(function (child) { return child.tagName === '#text'; })) {
+                node.children = [{ children: children, tagName: 'tspan' }];
             }
             if (tagName !== '#text' && tagName !== 'a') {
                 node.tagName = 'tspan';
             }
             node.attributes = attributes;
             // Recurse
-            if (node.children) {
-                node.children
+            if (children) {
+                children
                     .filter(function (c) { return c.tagName !== '#text'; })
                     .forEach(modifyChild);
             }

package/es-modules/Core/Responsive.js

@@ -130,8 +130,7 @@ var Responsive;
         Additions.prototype.matchResponsiveRule = function (rule, matches) {
             var condition = rule.condition, fn = condition.callback || function () {
                 return (this.chartWidth <= pick(condition.maxWidth, Number.MAX_VALUE) &&
-                    this.chartHeight <=
-                        pick(condition.maxHeight, Number.MAX_VALUE) &&
+                    this.chartHeight <= pick(condition.maxHeight, Number.MAX_VALUE) &&
                     this.chartWidth >= pick(condition.minWidth, 0) &&
                     this.chartHeight >= pick(condition.minHeight, 0));
             };
@@ -169,7 +168,7 @@ var Responsive;
             mergedOptions.isResponsiveOptions = true;
             // Stringified key for the rules that currently apply.
             ruleIds = (ruleIds.toString() || void 0);
-            var currentRuleIds = currentResponsive && currentResponsive.ruleIds;
+            var currentRuleIds = (currentResponsive && currentResponsive.ruleIds);
             // Changes in what rules apply
             if (ruleIds !== currentRuleIds) {
                 // Undo previous rules. Before we apply a new set of rules, we

package/es-modules/Core/Scrollbar.js

@@ -124,8 +124,16 @@ var Scrollbar = /** @class */ (function () {
         var buttonsOrder = this.options.inverted ? [1, 0] : [0, 1], buttons = this.scrollbarButtons, bar = this.scrollbarGroup.element, track = this.track.element, mouseDownHandler = this.mouseDownHandler.bind(this), mouseMoveHandler = this.mouseMoveHandler.bind(this), mouseUpHandler = this.mouseUpHandler.bind(this);
         // Mouse events
         var _events = [
-            [buttons[buttonsOrder[0]].element, 'click', this.buttonToMinClick.bind(this)],
-            [buttons[buttonsOrder[1]].element, 'click', this.buttonToMaxClick.bind(this)],
+            [
+                buttons[buttonsOrder[0]].element,
+                'click',
+                this.buttonToMinClick.bind(this)
+            ],
+            [
+                buttons[buttonsOrder[1]].element,
+                'click',
+                this.buttonToMaxClick.bind(this)
+            ],
             [track, 'click', this.trackClick.bind(this)],
             [bar, 'mousedown', mouseDownHandler],
             [bar.ownerDocument, 'mousemove', mouseMoveHandler],
@@ -143,7 +151,8 @@ var Scrollbar = /** @class */ (function () {
     };
     Scrollbar.prototype.buttonToMaxClick = function (e) {
         var scroller = this;
-        var range = (scroller.to - scroller.from) * pick(scroller.options.step, 0.2);
+        var range = ((scroller.to - scroller.from) *
+            pick(scroller.options.step, 0.2));
         scroller.updatePosition(scroller.from + range, scroller.to + range);
         fireEvent(scroller, 'changed', {
             from: scroller.from,
@@ -194,7 +203,6 @@ var Scrollbar = /** @class */ (function () {
      *
      * @private
      * @function Highcharts.Scrollbar#destroy
-     * @return {void}
      */
     Scrollbar.prototype.destroy = function () {
         var scroller = this, navigator = scroller.chart.scroller;
@@ -226,7 +234,6 @@ var Scrollbar = /** @class */ (function () {
      * @function Highcharts.Scrollbar#drawScrollbarButton
      * @param {number} index
      *        0 is left, 1 is right
-     * @return {void}
      */
     Scrollbar.prototype.drawScrollbarButton = function (index) {
         var scroller = this, renderer = scroller.renderer, scrollbarButtons = scroller.scrollbarButtons, options = scroller.options, size = scroller.size, group = renderer.g().add(scroller.group);
@@ -309,7 +316,8 @@ var Scrollbar = /** @class */ (function () {
      * @private
      */
     Scrollbar.prototype.mouseMoveHandler = function (e) {
-        var scroller = this, normalizedEvent = scroller.chart.pointer.normalize(e), options = scroller.options, direction = options.vertical ? 'chartY' : 'chartX', initPositions = scroller.initPositions || [];
+        var scroller = this, normalizedEvent = scroller.chart.pointer.normalize(e), options = scroller.options, direction = options.vertical ?
+            'chartY' : 'chartX', initPositions = scroller.initPositions || [];
         var scrollPosition, chartPosition, change;
         // In iOS, a mousemove event with e.pageX === 0 is fired when
         // holding the finger down in the center of the scrollbar. This
@@ -367,7 +375,6 @@ var Scrollbar = /** @class */ (function () {
      *        width of the scrollbar
      * @param {number} height
      *        height of the scorllbar
-     * @return {void}
      */
     Scrollbar.prototype.position = function (x, y, width, height) {
         var scroller = this, options = scroller.options, vertical = options.vertical, method = scroller.rendered ? 'animate' : 'attr';
@@ -412,7 +419,6 @@ var Scrollbar = /** @class */ (function () {
      *
      * @private
      * @function Highcharts.Scrollbar#removeEvents
-     * @return {void}
      */
     Scrollbar.prototype.removeEvents = function () {
         this._events.forEach(function (args) {
@@ -499,7 +505,6 @@ var Scrollbar = /** @class */ (function () {
      *        scale (0-1) where bar should start
      * @param {number} to
      *        scale (0-1) where bar should end
-     * @return {void}
      */
     Scrollbar.prototype.setRange = function (from, to) {
         var scroller = this, options = scroller.options, vertical = options.vertical, minWidth = options.minWidth, fullWidth = scroller.barWidth, method = (this.rendered &&
@@ -572,8 +577,6 @@ var Scrollbar = /** @class */ (function () {
      *
      * @private
      * @function Highcharts.Scrollbar#shouldUpdateExtremes
-     * @param {string} [eventType]
-     * @return {boolean}
      */
     Scrollbar.prototype.shouldUpdateExtremes = function (eventType) {
         return (pick(this.options.liveRedraw, H.svg && !H.isTouchDevice && !this.chart.isBoosting) ||
@@ -620,7 +623,6 @@ var Scrollbar = /** @class */ (function () {
      * @function Highcharts.Scrollbar#updatePosition
      * @param  {number} from
      * @param  {number} to
-     * @return {void}
      */
     Scrollbar.prototype.updatePosition = function (from, to) {
         if (to > 1) {

package/es-modules/Core/ScrollbarDefaults.js

@@ -10,7 +10,6 @@
 'use strict';
 import H from './Globals.js';
 var isTouchDevice = H.isTouchDevice;
-import Palette from './Color/Palette.js';
 /* *
  *
  *  Constant
@@ -98,6 +97,8 @@ var ScrollbarDefaults = {
      * @since 1.2.5
      */
     minWidth: 6,
+    /** @ignore-option */
+    opposite: true,
     /**
      * Whether to show or hide the scrollbar when the scrolled content is
      * zoomed out to it full extent.
@@ -119,7 +120,7 @@ var ScrollbarDefaults = {
      *
      * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
      */
-    barBackgroundColor: Palette.neutralColor20,
+    barBackgroundColor: "#cccccc" /* neutralColor20 */,
     /**
      * The width of the bar's border.
      *
@@ -132,7 +133,7 @@ var ScrollbarDefaults = {
      *
      * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
      */
-    barBorderColor: Palette.neutralColor20,
+    barBorderColor: "#cccccc" /* neutralColor20 */,
     /**
      * The color of the small arrow inside the scrollbar buttons.
      *
@@ -141,7 +142,7 @@ var ScrollbarDefaults = {
      *
      * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
      */
-    buttonArrowColor: Palette.neutralColor80,
+    buttonArrowColor: "#333333" /* neutralColor80 */,
     /**
      * The color of scrollbar buttons.
      *
@@ -150,7 +151,7 @@ var ScrollbarDefaults = {
      *
      * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
      */
-    buttonBackgroundColor: Palette.neutralColor10,
+    buttonBackgroundColor: "#e6e6e6" /* neutralColor10 */,
     /**
      * The color of the border of the scrollbar buttons.
      *
@@ -159,7 +160,7 @@ var ScrollbarDefaults = {
      *
      * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
      */
-    buttonBorderColor: Palette.neutralColor20,
+    buttonBorderColor: "#cccccc" /* neutralColor20 */,
     /**
      * The border width of the scrollbar buttons.
      *
@@ -172,7 +173,7 @@ var ScrollbarDefaults = {
      *
      * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
      */
-    rifleColor: Palette.neutralColor80,
+    rifleColor: "#333333" /* neutralColor80 */,
     /**
      * The color of the track background.
      *
@@ -181,7 +182,7 @@ var ScrollbarDefaults = {
      *
      * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
      */
-    trackBackgroundColor: Palette.neutralColor5,
+    trackBackgroundColor: "#f2f2f2" /* neutralColor5 */,
     /**
      * The color of the border of the scrollbar track.
      *
@@ -190,7 +191,7 @@ var ScrollbarDefaults = {
      *
      * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
      */
-    trackBorderColor: Palette.neutralColor5,
+    trackBorderColor: "#f2f2f2" /* neutralColor5 */,
     /**
      * The corner radius of the border of the scrollbar track.
      *

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

@@ -12,7 +12,6 @@ import A from '../Animation/AnimationUtilities.js';
 var getDeferredAnimation = A.getDeferredAnimation;
 import F from '../FormatUtilities.js';
 var format = F.format;
-import Palette from '../Color/Palette.js';
 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;
 /* *
@@ -246,8 +245,10 @@ var DataLabel;
                 // Merge in series options for the point.
                 // @note dataLabelAttribs (like pointAttribs) would eradicate
                 // the need for dlOptions, and simplify the section below.
-                pointOptions = splat(mergeArrays(seriesDlOptions, point.dlOptions || // dlOptions is used in treemaps
-                    (point.options && point.options.dataLabels)));
+                pointOptions = splat(mergeArrays(seriesDlOptions, 
+                // dlOptions is used in treemaps
+                (point.dlOptions ||
+                    (point.options && point.options.dataLabels))));
                 // Handle each individual data label for this point
                 pointOptions.forEach(function (labelOptions, i) {
                     // Options for one datalabel
@@ -257,8 +258,8 @@ var DataLabel;
                         applyFilter(point, labelOptions)), connector = point.connectors ?
                         point.connectors[i] :
                         point.connector;
-                    var labelConfig, formatString, labelText, style, rotation, attr, dataLabel = point.dataLabels ? point.dataLabels[i] :
-                        point.dataLabel;
+                    var labelConfig, formatString, labelText, style, rotation, attr, dataLabel = point.dataLabels ?
+                        point.dataLabels[i] : point.dataLabel;
                     var labelDistance = pick(labelOptions.distance, point.labelDistance), isNew = !dataLabel;
                     if (labelEnabled) {
                         // Create individual options structure that can be
@@ -273,7 +274,7 @@ var DataLabel;
                         rotation = labelOptions.rotation;
                         if (!chart.styledMode) {
                             // Determine the color
-                            style.color = pick(labelOptions.color, style.color, series.color, Palette.neutralColor100);
+                            style.color = pick(labelOptions.color, style.color, series.color, "#000000" /* neutralColor100 */);
                             // Get automated contrast color
                             if (style.color === 'contrast') {
                                 point.contrastColor = renderer.getContrast((point.color || series.color));
@@ -282,7 +283,7 @@ var DataLabel;
                                     labelDistance < 0 ||
                                     !!seriesOptions.stacking ?
                                     point.contrastColor :
-                                    Palette.neutralColor100;
+                                    "#000000" /* neutralColor100 */;
                             }
                             else {
                                 delete point.contrastColor;
@@ -311,8 +312,10 @@ var DataLabel;
                     }
                     // If the point is outside the plot area, destroy it. #678,
                     // #820
-                    if (dataLabel && (!labelEnabled || !defined(labelText))) {
-                        point.dataLabel =
+                    if (dataLabel && (!labelEnabled ||
+                        !defined(labelText) ||
+                        !!dataLabel.div !== !!labelOptions.useHTML)) {
+                        point.dataLabel = dataLabel =
                             point.dataLabel && point.dataLabel.destroy();
                         if (point.dataLabels) {
                             // Remove point.dataLabels if this was the last one
@@ -339,11 +342,11 @@ var DataLabel;
                                 }
                             }
                         }
-                        // Individual labels are disabled if the are explicitly
-                        // disabled in the point options, or if they fall outside
-                        // the plot area.
                     }
-                    else if (labelEnabled && defined(labelText)) {
+                    // Individual labels are disabled if the are explicitly
+                    // disabled in the point options, or if they fall outside
+                    // the plot area.
+                    if (labelEnabled && defined(labelText)) {
                         if (!dataLabel) {
                             // Create new label element
                             point.dataLabels = point.dataLabels || [];
@@ -357,7 +360,8 @@ var DataLabel;
                             if (!i) {
                                 point.dataLabel = dataLabel;
                             }
-                            dataLabel.addClass(' highcharts-data-label-color-' + point.colorIndex +
+                            dataLabel.addClass(' highcharts-data-label-color-' +
+                                point.colorIndex +
                                 ' ' + (labelOptions.className || '') +
                                 ( // #3398
                                 labelOptions.useHTML ?
@@ -385,7 +389,7 @@ var DataLabel;
                             if (point.dataLabelPath &&
                                 !labelOptions.textPath.enabled) {
                                 // clean the DOM
-                                point.dataLabelPath = point.dataLabelPath.destroy();
+                                point.dataLabelPath = (point.dataLabelPath.destroy());
                             }
                         }
                         // Now the data label is created and placed at 0,0, so