highcharts 10.3.1 → 10.3.2

package/bower.json

@@ -1,6 +1,6 @@
 {
   "name": "highcharts",
-  "version": "10.3.1",
+  "version": "10.3.2",
   "main": "highcharts.js",
   "license": "https://www.highcharts.com/license",
   "types": "highcharts.d.ts"

package/es-modules/Accessibility/Accessibility.js

@@ -323,7 +323,7 @@ var Accessibility = /** @class */ (function () {
     /**
      * @private
      */
-    function compose(AxisClass, ChartClass, LegendClass, PointClass, SeriesClass, SVGElementClass, RangeSelectorClass) {
+    function compose(ChartClass, LegendClass, PointClass, SeriesClass, SVGElementClass, RangeSelectorClass) {
         // ordered:
         KeyboardNavigation.compose(ChartClass);
         NewDataAnnouncer.compose(SeriesClass);

package/es-modules/Accessibility/Components/ZoomComponent.js

@@ -28,6 +28,8 @@ var __extends = (this && this.__extends) || (function () {
 import AccessibilityComponent from '../AccessibilityComponent.js';
 import CU from '../Utils/ChartUtilities.js';
 var unhideChartElementFromAT = CU.unhideChartElementFromAT;
+import HU from '../Utils/HTMLUtilities.js';
+var getFakeMouseEvent = HU.getFakeMouseEvent;
 import KeyboardNavigationHandler from '../KeyboardNavigationHandler.js';
 import U from '../../Core/Utilities.js';
 var attr = U.attr, pick = U.pick;
@@ -36,33 +38,11 @@ var attr = U.attr, pick = U.pick;
  *  Functions
  *
  * */
-/**
- * Pan along axis in a direction (1 or -1), optionally with a defined
- * granularity (number of steps it takes to walk across current view)
- * @private
- */
-function axisPanStep(axis, direction, granularity) {
-    var gran = granularity || 3;
-    var extremes = axis.getExtremes();
-    var step = (extremes.max - extremes.min) / gran * direction;
-    var newMax = extremes.max + step;
-    var newMin = extremes.min + step;
-    var size = newMax - newMin;
-    if (direction < 0 && newMin < extremes.dataMin) {
-        newMin = extremes.dataMin;
-        newMax = newMin + size;
-    }
-    else if (direction > 0 && newMax > extremes.dataMax) {
-        newMax = extremes.dataMax;
-        newMin = newMax - size;
-    }
-    axis.setExtremes(newMin, newMax);
-}
 /**
  * @private
  */
 function chartHasMapZoom(chart) {
-    return !!((chart.mapZoom) &&
+    return !!((chart.mapView) &&
         chart.mapNavigation &&
         chart.mapNavigation.navButtons.length);
 }
@@ -213,16 +193,27 @@ var ZoomComponent = /** @class */ (function (_super) {
         });
     };
     /**
+     * Arrow key panning for maps.
      * @private
-     * @param {Highcharts.KeyboardNavigationHandler} keyboardNavigationHandler
-     * @param {number} keyCode
+     * @param {Highcharts.KeyboardNavigationHandler} keyboardNavigationHandler The handler context.
+     * @param {number} keyCode Key pressed.
      * @return {number} Response code
      */
     ZoomComponent.prototype.onMapKbdArrow = function (keyboardNavigationHandler, keyCode) {
-        var keys = this.keyCodes, panAxis = (keyCode === keys.up || keyCode === keys.down) ?
-            'yAxis' : 'xAxis', stepDirection = (keyCode === keys.left || keyCode === keys.up) ?
-            -1 : 1;
-        axisPanStep(this.chart[panAxis][0], stepDirection);
+        var chart = this.chart, keys = this.keyCodes, target = chart.container, isY = keyCode === keys.up || keyCode === keys.down, stepDirection = (keyCode === keys.left || keyCode === keys.up) ?
+            1 : -1, granularity = 10, diff = (isY ? chart.plotHeight : chart.plotWidth) /
+            granularity * stepDirection, 
+        // Randomize since same mousedown coords twice is ignored in MapView
+        r = Math.random() * 10, startPos = {
+            x: target.offsetLeft + chart.plotLeft + chart.plotWidth / 2 + r,
+            y: target.offsetTop + chart.plotTop + chart.plotHeight / 2 + r
+        }, endPos = isY ? { x: startPos.x, y: startPos.y + diff } :
+            { x: startPos.x + diff, y: startPos.y };
+        [
+            getFakeMouseEvent('mousedown', startPos),
+            getFakeMouseEvent('mousemove', endPos),
+            getFakeMouseEvent('mouseup', endPos)
+        ].forEach(function (e) { return target.dispatchEvent(e); });
         return keyboardNavigationHandler.response.success;
     };
     /**
@@ -240,7 +231,9 @@ var ZoomComponent = /** @class */ (function (_super) {
         // Deselect old
         chart.mapNavigation.navButtons[this.focusedMapNavButtonIx].setState(0);
         if (isMoveOutOfRange) {
-            chart.mapZoom(); // Reset zoom
+            if (chart.mapView) {
+                chart.mapView.zoomBy(); // Reset zoom
+            }
             return response[isBackwards ? 'prev' : 'next'];
         }
         // Select other button
@@ -251,12 +244,13 @@ var ZoomComponent = /** @class */ (function (_super) {
         return response.success;
     };
     /**
+     * Called on map button click.
      * @private
-     * @param {Highcharts.KeyboardNavigationHandler} keyboardNavigationHandler
+     * @param {Highcharts.KeyboardNavigationHandler} keyboardNavigationHandler The handler context object
      * @return {number} Response code
      */
     ZoomComponent.prototype.onMapKbdClick = function (keyboardNavigationHandler) {
-        var el = this.chart.mapNavButtons[this.focusedMapNavButtonIx].element;
+        var el = this.chart.mapNavigation.navButtons[this.focusedMapNavButtonIx].element;
         this.fakeClickEvent(el);
         return keyboardNavigationHandler.response.success;
     };

package/es-modules/Accessibility/KeyboardNavigation.js

@@ -17,7 +17,7 @@ import U from '../Core/Utilities.js';
 var addEvent = U.addEvent, fireEvent = U.fireEvent;
 import EventProvider from './Utils/EventProvider.js';
 import HTMLUtilities from './Utils/HTMLUtilities.js';
-var getElement = HTMLUtilities.getElement;
+var getElement = HTMLUtilities.getElement, simulatedEventTarget = HTMLUtilities.simulatedEventTarget;
 /* *
  *
  *  Class
@@ -83,7 +83,7 @@ var KeyboardNavigation = /** @class */ (function () {
         ep.addEvent(this.tabindexContainer, 'keydown', function (e) { return _this.onKeydown(e); });
         ep.addEvent(this.tabindexContainer, 'focus', function (e) { return _this.onFocus(e); });
         ['mouseup', 'touchend'].forEach(function (eventName) {
-            return ep.addEvent(doc, eventName, function () { return _this.onMouseUp(); });
+            return ep.addEvent(doc, eventName, function (e) { return _this.onMouseUp(e); });
         });
         ['mousedown', 'touchstart'].forEach(function (eventName) {
             return ep.addEvent(chart.renderTo, eventName, function () {
@@ -209,9 +209,10 @@ var KeyboardNavigation = /** @class */ (function () {
      * indicator.
      * @private
      */
-    KeyboardNavigation.prototype.onMouseUp = function () {
+    KeyboardNavigation.prototype.onMouseUp = function (e) {
         delete this.isClickingChart;
-        if (!this.keyboardReset) {
+        if (!this.keyboardReset &&
+            e.relatedTarget !== simulatedEventTarget) {
             var chart = this.chart;
             if (!this.pointerIsOverChart) {
                 var curMod = this.modules &&

package/es-modules/Accessibility/Utils/HTMLUtilities.js

@@ -14,6 +14,12 @@ import H from '../../Core/Globals.js';
 var doc = H.doc, win = H.win;
 import U from '../../Core/Utilities.js';
 var css = U.css;
+/* *
+ *
+ *  Constants
+ *
+ * */
+var simulatedEventTarget = win.EventTarget && new win.EventTarget() || 'none';
 /* *
  *
  *  Functions
@@ -133,10 +139,12 @@ function getElement(id) {
     return doc.getElementById(id);
 }
 /**
- * Get a fake mouse event of a given type
+ * Get a fake mouse event of a given type. If relatedTarget is not given,
+ * it will point to simulatedEventTarget, as an indicator that the event
+ * is fake.
  * @private
  */
-function getFakeMouseEvent(type, position) {
+function getFakeMouseEvent(type, position, relatedTarget) {
     var pos = position || {
         x: 0,
         y: 0
@@ -146,6 +154,9 @@ function getFakeMouseEvent(type, position) {
             bubbles: true,
             cancelable: true,
             composed: true,
+            button: 0,
+            buttons: 1,
+            relatedTarget: relatedTarget || simulatedEventTarget,
             view: win,
             detail: type === 'click' ? 1 : 0,
             screenX: pos.x,
@@ -299,6 +310,7 @@ var HTMLUtilities = {
     removeClass: removeClass,
     removeElement: removeElement,
     reverseChildNodes: reverseChildNodes,
+    simulatedEventTarget: simulatedEventTarget,
     stripHTMLTagsFromString: stripHTMLTagsFromString,
     visuallyHideElement: visuallyHideElement
 };

package/es-modules/Core/Axis/Stacking/StackingAxis.js

@@ -182,12 +182,14 @@ function seriesSetGroupedPoints() {
  * @function Highcharts.Series#setStackedPoints
  */
 function seriesSetStackedPoints(stackingParam) {
-    var stacking = stackingParam || this.options.stacking;
+    var chart = this.chart, stacking = stackingParam || this.options.stacking;
     if (!stacking || (this.visible !== true &&
-        this.chart.options.chart.ignoreHiddenSeries !== false)) {
+        chart.options.chart.ignoreHiddenSeries !== false)) {
         return;
     }
-    var series = this, xData = series.processedXData, yData = series.processedYData, stackedYData = [], yDataLength = yData.length, seriesOptions = series.options, threshold = seriesOptions.threshold, stackThreshold = pick(seriesOptions.startFromThreshold && threshold, 0), stackOption = seriesOptions.stack, stackKey = stackingParam ? "".concat(series.type, ",").concat(stacking) : series.stackKey, negKey = '-' + stackKey, negStacks = series.negStacks, yAxis = series.yAxis, stacks = yAxis.stacking.stacks, oldStacks = yAxis.stacking.oldStacks;
+    var series = this, xData = series.processedXData, yData = series.processedYData, stackedYData = [], yDataLength = yData.length, seriesOptions = series.options, threshold = seriesOptions.threshold, stackThreshold = pick(seriesOptions.startFromThreshold && threshold, 0), stackOption = seriesOptions.stack, stackKey = stackingParam ? "".concat(series.type, ",").concat(stacking) : series.stackKey, negKey = '-' + stackKey, negStacks = series.negStacks, yAxis = stacking === 'group' ?
+        chart.yAxis[0] :
+        series.yAxis, stacks = yAxis.stacking.stacks, oldStacks = yAxis.stacking.oldStacks;
     var stackIndicator, isNegative, stack, other, key, pointKey, i, x, y;
     yAxis.stacking.stacksTouched += 1;
     // loop over the non-null y values and read them into a local array

package/es-modules/Core/Axis/WaterfallAxis.js

@@ -58,20 +58,23 @@ var WaterfallAxis;
          * @function Highcharts.Axis#renderWaterfallStackTotals
          */
         Composition.prototype.renderStackTotals = function () {
-            var yAxis = this.axis, waterfallStacks = yAxis.waterfall.stacks, stackTotalGroup = (yAxis.stacking && yAxis.stacking.stackTotalGroup), dummyStackItem = new StackItem(yAxis, yAxis.options.stackLabels, false, 0, void 0);
+            var yAxis = this.axis, waterfallStacks = yAxis.waterfall.stacks, stackTotalGroup = (yAxis.stacking && yAxis.stacking.stackTotalGroup), dummyStackItem = new StackItem(yAxis, yAxis.options.stackLabels || {}, false, 0, void 0);
             this.dummyStackItem = dummyStackItem;
             // Render each waterfall stack total
-            objectEach(waterfallStacks, function (type) {
-                objectEach(type, function (stackItem) {
-                    dummyStackItem.total = stackItem.stackTotal;
-                    if (stackItem.label) {
-                        dummyStackItem.label = stackItem.label;
-                    }
-                    StackItem.prototype.render.call(dummyStackItem, stackTotalGroup);
-                    stackItem.label = dummyStackItem.label;
-                    delete dummyStackItem.label;
+            if (stackTotalGroup) {
+                objectEach(waterfallStacks, function (type) {
+                    objectEach(type, function (stackItem, key) {
+                        dummyStackItem.total = stackItem.stackTotal;
+                        dummyStackItem.x = +key;
+                        if (stackItem.label) {
+                            dummyStackItem.label = stackItem.label;
+                        }
+                        StackItem.prototype.render.call(dummyStackItem, stackTotalGroup);
+                        stackItem.label = dummyStackItem.label;
+                        delete dummyStackItem.label;
+                    });
                 });
-            });
+            }
             dummyStackItem.total = null;
         };
         return Composition;

package/es-modules/Core/Chart/Chart.js

@@ -1967,7 +1967,9 @@ var Chart = /** @class */ (function () {
             // Make chart behave as an image with the title as alt text
             this.renderer.boxWrapper.attr({
                 role: 'img',
-                'aria-label': (title && title.element.textContent) || ''
+                'aria-label': ((title && title.element.textContent) || ''
+                // #17753, < is not allowed in SVG attributes
+                ).replace(/</g, '&lt;')
             });
             if (!(options.accessibility && options.accessibility.enabled === false)) {
                 error('Highcharts warning: Consider including the ' +

package/es-modules/Core/Chart/ChartDefaults.js

@@ -851,6 +851,8 @@ var ChartDefaults = {
      * Additional CSS styles to apply inline to the container `div`. Note
      * that since the default font styles are applied in the renderer, it
      * is ignorant of the individual chart options and must be set globally.
+     * Also note that changing the font size in the `chart.style` options only
+     * applies to those elements that do not have a specific `fontSize` setting.
      *
      * @see    In styled mode, general chart styles can be set with the
      *         `.highcharts-root` class.

package/es-modules/Core/Globals.js

@@ -24,7 +24,7 @@ var Globals;
      *  Constants
      *
      * */
-    Globals.SVG_NS = 'http://www.w3.org/2000/svg', Globals.product = 'Highcharts', Globals.version = '10.3.1', Globals.win = (typeof window !== 'undefined' ?
+    Globals.SVG_NS = 'http://www.w3.org/2000/svg', Globals.product = 'Highcharts', Globals.version = '10.3.2', Globals.win = (typeof window !== 'undefined' ?
         window :
         {}), // eslint-disable-line node/no-unsupported-features/es-builtins
     Globals.doc = Globals.win.document, Globals.svg = (Globals.doc &&

package/es-modules/Core/Pointer.js

@@ -1169,7 +1169,7 @@ var Pointer = /** @class */ (function () {
      * @emits Highcharts.Point#event:mouseOut
      * @emits Highcharts.Point#event:mouseOver
      */
-    Pointer.prototype.runPointActions = function (e, p) {
+    Pointer.prototype.runPointActions = function (e, p, force) {
         var pointer = this, chart = pointer.chart, series = chart.series, tooltip = (chart.tooltip && chart.tooltip.options.enabled ?
             chart.tooltip :
             void 0), shared = (tooltip ?
@@ -1190,8 +1190,9 @@ var Pointer = /** @class */ (function () {
         // Refresh tooltip for kdpoint if new hover point or tooltip was hidden
         // #3926, #4200
         if (hoverPoint &&
-            // !(hoverSeries && hoverSeries.directTouch) &&
-            (hoverPoint !== chart.hoverPoint || (tooltip && tooltip.isHidden))) {
+            (force ||
+                hoverPoint !== chart.hoverPoint ||
+                (tooltip && tooltip.isHidden))) {
             (chart.hoverPoints || []).forEach(function (p) {
                 if (points.indexOf(p) === -1) {
                     p.setState();

package/es-modules/Core/Renderer/HTML/AST.js

@@ -96,6 +96,10 @@ var AST = /** @class */ (function () {
                 });
                 delete attributes[key];
             }
+            // #17753, < is not allowed in SVG attributes
+            if (isString(val) && attributes[key]) {
+                attributes[key] = val.replace(/</g, '&lt;');
+            }
         });
         return attributes;
     };
@@ -374,6 +378,7 @@ var AST = /** @class */ (function () {
         'x',
         'x1',
         'x2',
+        'xlink:href',
         'y',
         'y1',
         'y2',
@@ -467,6 +472,7 @@ var AST = /** @class */ (function () {
         'text',
         'textPath',
         'thead',
+        'title',
         'tbody',
         'tspan',
         'td',

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

@@ -134,8 +134,6 @@ var SVGElement = /** @class */ (function () {
         if (parent) {
             this.parentGroup = parent;
         }
-        // Mark as inverted
-        this.parentInverted = parent && parent.inverted;
         // Build formatted text
         if (typeof this.textStr !== 'undefined' &&
             this.element.nodeName === 'text' // Not for SVGLabel instances
@@ -1210,25 +1208,6 @@ var SVGElement = /** @class */ (function () {
         this.renderer = renderer;
         fireEvent(this, 'afterInit');
     };
-    /**
-     * Invert a group, rotate and flip. This is used internally on inverted
-     * charts, where the points and graphs are drawn as if not inverted, then
-     * the series group elements are inverted.
-     *
-     * @function Highcharts.SVGElement#invert
-     *
-     * @param {boolean} inverted
-     *        Whether to invert or not. An inverted shape can be un-inverted by
-     *        setting it to false.
-     *
-     * @return {Highcharts.SVGElement}
-     *         Return the SVGElement for chaining.
-     */
-    SVGElement.prototype.invert = function (inverted) {
-        this.inverted = inverted;
-        this.updateTransform();
-        return this;
-    };
     /**
      * Add an event listener. This is a simple setter that replaces the
      * previous event of the same type added by this function, as opposed to
@@ -1462,10 +1441,10 @@ var SVGElement = /** @class */ (function () {
      *         Returns the SVGElement for chaining.
      */
     SVGElement.prototype.shadow = function (shadowOptions, group, cutOff) {
-        var shadows = [], element = this.element, oldShadowOptions = this.oldShadowOptions, defaultShadowOptions = {
+        var shadows = [], _a = this, element = _a.element, oldShadowOptions = _a.oldShadowOptions, parentGroup = _a.parentGroup, parentInverted = parentGroup && parentGroup.rotation === 90, defaultShadowOptions = {
             color: "#000000" /* Palette.neutralColor100 */,
-            offsetX: this.parentInverted ? -1 : 1,
-            offsetY: this.parentInverted ? -1 : 1,
+            offsetX: parentInverted ? -1 : 1,
+            offsetY: parentInverted ? -1 : 1,
             opacity: 0.15,
             width: 3
         };
@@ -1498,7 +1477,7 @@ var SVGElement = /** @class */ (function () {
         }
         else if (!this.shadows) {
             shadowElementOpacity = options.opacity / options.width;
-            transform = this.parentInverted ?
+            transform = parentInverted ?
                 "translate(".concat(options.offsetY, ", ").concat(options.offsetX, ")") :
                 "translate(".concat(options.offsetX, ", ").concat(options.offsetY, ")");
             for (i = 1; i <= options.width; i++) {
@@ -1547,9 +1526,7 @@ var SVGElement = /** @class */ (function () {
         return this.attr({ visibility: inherit ? 'inherit' : 'visible' });
     };
     /**
-     * WebKit and Batik have problems with a stroke-width of zero, so in this
-     * case we remove the stroke attribute altogether. #1270, #1369, #3065,
-     * #3072.
+     * Set the stroke-width and record it on the SVGElement
      *
      * @private
      * @function Highcharts.SVGElement#strokeSetter
@@ -1557,24 +1534,10 @@ var SVGElement = /** @class */ (function () {
      * @param {string} key
      * @param {Highcharts.SVGDOMElement} element
      */
-    SVGElement.prototype.strokeSetter = function (value, key, element) {
+    SVGElement.prototype['stroke-widthSetter'] = function (value, key, element) {
+        // Record it for quick access in getter
         this[key] = value;
-        // Only apply the stroke attribute if the stroke width is defined and
-        // larger than 0
-        if (this.stroke && this['stroke-width']) {
-            // Use prototype as instance may be overridden
-            SVGElement.prototype.fillSetter.call(this, this.stroke, 'stroke', element);
-            element.setAttribute('stroke-width', this['stroke-width']);
-            this.hasStroke = true;
-        }
-        else if (key === 'stroke-width' && value === 0 && this.hasStroke) {
-            element.removeAttribute('stroke');
-            this.hasStroke = false;
-        }
-        else if (this.renderer.styledMode && this['stroke-width']) {
-            element.setAttribute('stroke-width', this['stroke-width']);
-            this.hasStroke = true;
-        }
+        element.setAttribute(key, value);
     };
     /**
      * Get the computed stroke width in pixel values. This is used extensively
@@ -1765,14 +1728,7 @@ var SVGElement = /** @class */ (function () {
      * @function Highcharts.SVGElement#updateTransform
      */
     SVGElement.prototype.updateTransform = function () {
-        var wrapper = this, scaleX = wrapper.scaleX, scaleY = wrapper.scaleY, inverted = wrapper.inverted, rotation = wrapper.rotation, matrix = wrapper.matrix, element = wrapper.element;
-        var translateX = wrapper.translateX || 0, translateY = wrapper.translateY || 0;
-        // Flipping affects translate as adjustment for flipping around the
-        // group's axis
-        if (inverted) {
-            translateX += wrapper.width;
-            translateY += wrapper.height;
-        }
+        var _a = this, element = _a.element, matrix = _a.matrix, _b = _a.rotation, rotation = _b === void 0 ? 0 : _b, scaleX = _a.scaleX, scaleY = _a.scaleY, _c = _a.translateX, translateX = _c === void 0 ? 0 : _c, _d = _a.translateY, translateY = _d === void 0 ? 0 : _d;
         // Apply translate. Nearly all transformed elements have translation,
         // so instead of checking for translate = 0, do it always (#1767,
         // #1846).
@@ -1781,11 +1737,8 @@ var SVGElement = /** @class */ (function () {
         if (defined(matrix)) {
             transform.push('matrix(' + matrix.join(',') + ')');
         }
-        // apply rotation
-        if (inverted) {
-            transform.push('rotate(90) scale(-1,1)');
-        }
-        else if (rotation) { // text rotation
+        // Apply rotation
+        if (rotation) { // text rotation or inverted chart
             transform.push('rotate(' + rotation + ' ' +
                 pick(this.rotationOriginX, element.getAttribute('x'), 0) +
                 ' ' +
@@ -1795,7 +1748,7 @@ var SVGElement = /** @class */ (function () {
         if (defined(scaleX) || defined(scaleY)) {
             transform.push('scale(' + pick(scaleX, 1) + ' ' + pick(scaleY, 1) + ')');
         }
-        if (transform.length && !(wrapper.text || wrapper).textPath) {
+        if (transform.length && !(this.text || this).textPath) {
             element.setAttribute('transform', transform.join(' '));
         }
     };
@@ -1906,7 +1859,7 @@ var SVGElement = /** @class */ (function () {
     return SVGElement;
 }());
 // Some shared setters and getters
-SVGElement.prototype['stroke-widthSetter'] = SVGElement.prototype.strokeSetter;
+SVGElement.prototype.strokeSetter = SVGElement.prototype.fillSetter;
 SVGElement.prototype.yGetter = SVGElement.prototype.xGetter;
 SVGElement.prototype.matrixSetter =
     SVGElement.prototype.rotationOriginXSetter =

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

@@ -205,14 +205,13 @@ var SVGLabel = /** @class */ (function (_super) {
      * box and add it before the text in the DOM.
      */
     SVGLabel.prototype.onAdd = function () {
-        var str = this.textStr;
         this.text.add(this);
         this.attr({
             // Alignment is available now  (#3295, 0 not rendered if given
             // as a value)
-            text: (defined(str) ? str : ''),
-            x: this.x,
-            y: this.y
+            text: pick(this.textStr, ''),
+            x: this.x || 0,
+            y: this.y || 0
         });
         if (this.box && defined(this.anchorX)) {
             this.attr({

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.3.1'));
+        desc.element.appendChild(doc.createTextNode('Created with Highcharts 10.3.2'));
         renderer.defs = this.createElement('defs').add();
         renderer.allowHTML = allowHTML;
         renderer.forExport = forExport;

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

@@ -44,7 +44,7 @@ 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), plotY = point.plotY, rotation = options.rotation, align = options.align, isInsidePlot = defined(plotX) &&
+        var series = this, chart = this.chart, inverted = this.isCartesian && chart.inverted, enabledDataSorting = this.enabledDataSorting, plotX = point.plotX, plotY = point.plotY, rotation = options.rotation, align = options.align, isInsidePlot = defined(plotX) &&
             defined(plotY) &&
             chart.isInsidePlot(plotX, Math.round(plotY), {
                 inverted: inverted,
@@ -61,6 +61,7 @@ var DataLabel;
         alignAttr, // the final position;
         justify = pick(options.overflow, (enabledDataSorting ? 'none' : 'justify')) === 'justify', visible = this.visible &&
             point.visible !== false &&
+            defined(plotX) &&
             (point.series.forceDL ||
                 (enabledDataSorting && !justify) ||
                 isInsidePlot ||
@@ -167,12 +168,8 @@ var DataLabel;
             // arrow pointing to thie point
             if (options.shape && !rotation) {
                 dataLabel[isNew ? 'attr' : 'animate']({
-                    anchorX: inverted ?
-                        chart.plotWidth - point.plotY :
-                        point.plotX,
-                    anchorY: inverted ?
-                        chart.plotHeight - point.plotX :
-                        point.plotY
+                    anchorX: inverted ? chart.plotWidth - plotY : plotX,
+                    anchorY: inverted ? chart.plotHeight - plotX : plotY
                 });
             }
         }

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

@@ -47,14 +47,6 @@ var Point = /** @class */ (function () {
          * @type {number|string}
          */
         this.category = void 0;
-        /**
-         * The point's current color index, used in styled mode instead of
-         * `color`. The color index is inserted in class names used for styling.
-         *
-         * @name Highcharts.Point#colorIndex
-         * @type {number}
-         */
-        this.colorIndex = void 0;
         this.formatPrefix = 'point';
         this.id = void 0;
         this.isNull = false;
@@ -619,6 +611,13 @@ var Point = /** @class */ (function () {
             }
             colorIndex = series.colorIndex;
         }
+        /**
+         * The point's current color index, used in styled mode instead of
+         * `color`. The color index is inserted in class names used for styling.
+         *
+         * @name Highcharts.Point#colorIndex
+         * @type {number|undefined}
+         */
         this.colorIndex = pick(this.options.colorIndex, colorIndex);
         /**
          * The point's current color.
@@ -1001,7 +1000,7 @@ var Point = /** @class */ (function () {
                 var opacity_1 = pointAttribs.opacity;
                 // Some inactive points (e.g. slices in pie) should apply
                 // opacity also for their labels
-                if (isNumber(opacity_1)) {
+                if (series.options.inactiveOtherPoints && isNumber(opacity_1)) {
                     (point.dataLabels || []).forEach(function (label) {
                         if (label &&
                             !label.hasClass('highcharts-data-label-hidden')) {