highcharts 10.2.1 → 10.3.1

package/es-modules/Core/Pointer.js

@@ -23,7 +23,7 @@ var addEvent = U.addEvent, attr = U.attr, css = U.css, defined = U.defined, exte
 /* eslint-disable no-invalid-this, valid-jsdoc */
 /**
  * The mouse and touch tracker object. Each {@link Chart} item has one
- * assosiated Pointer item that can be accessed from the  {@link Chart.pointer}
+ * associated Pointer item that can be accessed from the  {@link Chart.pointer}
  * property.
  *
  * @class
@@ -123,6 +123,41 @@ var Pointer = /** @class */ (function () {
             pointer[prop] = void 0;
         });
     };
+    /**
+     * Calculate attrs for selection marker.
+     * @private
+     * @function Highcharts.Pointer#getSelectionMarkerAttrs
+     * @emits getSelectionMarkerAttrs
+     */
+    Pointer.prototype.getSelectionMarkerAttrs = function (chartX, chartY) {
+        var _this = this;
+        var e = {
+            args: { chartX: chartX, chartY: chartY },
+            attrs: {},
+            shapeType: 'rect'
+        };
+        fireEvent(this, 'getSelectionMarkerAttrs', e, function (e) {
+            var _a = _this, chart = _a.chart, _b = _a.mouseDownX, mouseDownX = _b === void 0 ? 0 : _b, _c = _a.mouseDownY, mouseDownY = _c === void 0 ? 0 : _c, zoomHor = _a.zoomHor, zoomVert = _a.zoomVert, attrs = e.attrs;
+            var size;
+            attrs.x = chart.plotLeft;
+            attrs.y = chart.plotTop;
+            attrs.width = zoomHor ? 1 : chart.plotWidth;
+            attrs.height = zoomVert ? 1 : chart.plotHeight;
+            // Adjust the width of the selection marker
+            if (zoomHor) {
+                size = chartX - mouseDownX;
+                attrs.width = Math.abs(size);
+                attrs.x = (size > 0 ? 0 : size) + mouseDownX;
+            }
+            // Adjust the height of the selection marker
+            if (zoomVert) {
+                size = chartY - mouseDownY;
+                attrs.height = Math.abs(size);
+                attrs.y = (size > 0 ? 0 : size) + mouseDownY;
+            }
+        });
+        return e;
+    };
     /**
      * Perform a drag operation in response to a mousemove event while the mouse
      * is down.
@@ -130,17 +165,17 @@ var Pointer = /** @class */ (function () {
      * @function Highcharts.Pointer#drag
      */
     Pointer.prototype.drag = function (e) {
-        var chart = this.chart, chartOptions = chart.options.chart, zoomHor = this.zoomHor, zoomVert = this.zoomVert, plotLeft = chart.plotLeft, plotTop = chart.plotTop, plotWidth = chart.plotWidth, plotHeight = chart.plotHeight, mouseDownX = (this.mouseDownX || 0), mouseDownY = (this.mouseDownY || 0), panningEnabled = isObject(chartOptions.panning) ?
+        var chart = this.chart, chartOptions = chart.options.chart, plotLeft = chart.plotLeft, plotTop = chart.plotTop, plotWidth = chart.plotWidth, plotHeight = chart.plotHeight, mouseDownX = (this.mouseDownX || 0), mouseDownY = (this.mouseDownY || 0), panningEnabled = isObject(chartOptions.panning) ?
             chartOptions.panning && chartOptions.panning.enabled :
             chartOptions.panning, panKey = (chartOptions.panKey && e[chartOptions.panKey + 'Key']);
-        var chartX = e.chartX, chartY = e.chartY, clickedInside, size, selectionMarker = this.selectionMarker;
+        var chartX = e.chartX, chartY = e.chartY, clickedInside, selectionMarker = this.selectionMarker;
         // If the device supports both touch and mouse (like IE11), and we are
         // touch-dragging inside the plot area, don't handle the mouse event.
         // #4339.
         if (selectionMarker && selectionMarker.touch) {
             return;
         }
-        // If the mouse is outside the plot area, adjust to cooordinates
+        // If the mouse is outside the plot area, adjust to coordinates
         // inside to prevent the selection marker from going outside
         if (chartX < plotLeft) {
             chartX = plotLeft;
@@ -161,6 +196,7 @@ var Pointer = /** @class */ (function () {
             clickedInside = chart.isInsidePlot(mouseDownX - plotLeft, mouseDownY - plotTop, {
                 visiblePlotOnly: true
             });
+            var _a = this.getSelectionMarkerAttrs(chartX, chartY), shapeType = _a.shapeType, attrs = _a.attrs;
             // make a selection
             if ((chart.hasCartesianSeries || chart.mapView) &&
                 (this.zoomX || this.zoomY) &&
@@ -168,36 +204,24 @@ var Pointer = /** @class */ (function () {
                 !panKey) {
                 if (!selectionMarker) {
                     this.selectionMarker = selectionMarker =
-                        chart.renderer.rect(plotLeft, plotTop, zoomHor ? 1 : plotWidth, zoomVert ? 1 : plotHeight, 0)
-                            .attr({
-                            'class': 'highcharts-selection-marker',
-                            zIndex: 7
-                        })
-                            .add();
+                        chart.renderer[shapeType]();
+                    selectionMarker
+                        .attr({
+                        'class': 'highcharts-selection-marker',
+                        zIndex: 7
+                    })
+                        .add();
                     if (!chart.styledMode) {
                         selectionMarker.attr({
-                            fill: (chartOptions.selectionMarkerFill ||
+                            fill: chartOptions.selectionMarkerFill ||
                                 color("#335cad" /* Palette.highlightColor80 */)
-                                    .setOpacity(0.25).get())
+                                    .setOpacity(0.25).get()
                         });
                     }
                 }
             }
-            // adjust the width of the selection marker
-            if (selectionMarker && zoomHor) {
-                size = chartX - mouseDownX;
-                selectionMarker.attr({
-                    width: Math.abs(size),
-                    x: (size > 0 ? 0 : size) + mouseDownX
-                });
-            }
-            // adjust the height of the selection marker
-            if (selectionMarker && zoomVert) {
-                size = chartY - mouseDownY;
-                selectionMarker.attr({
-                    height: Math.abs(size),
-                    y: (size > 0 ? 0 : size) + mouseDownY
-                });
+            if (selectionMarker) {
+                selectionMarker.attr(attrs);
             }
             // panning
             if (clickedInside &&
@@ -220,6 +244,27 @@ var Pointer = /** @class */ (function () {
         chart.mouseDownX = this.mouseDownX = e.chartX;
         chart.mouseDownY = this.mouseDownY = e.chartY;
     };
+    /**
+     * Get selection box to calculate extremes
+     * @private
+     * @function Highcharts.Pointer#getSelectionBox
+     * @emits getSelectionBox
+     */
+    Pointer.prototype.getSelectionBox = function (marker) {
+        var e = {
+            args: { marker: marker },
+            result: {}
+        };
+        fireEvent(this, 'getSelectionBox', e, function (e) {
+            e.result = {
+                x: marker.attr ? +marker.attr('x') : marker.x,
+                y: marker.attr ? +marker.attr('y') : marker.y,
+                width: marker.attr ? marker.attr('width') : marker.width,
+                height: marker.attr ? marker.attr('height') : marker.height
+            };
+        });
+        return e.result;
+    };
     /**
      * On mouse up or touch end across the entire document, drop the selection.
      * @private
@@ -228,11 +273,8 @@ var Pointer = /** @class */ (function () {
     Pointer.prototype.drop = function (e) {
         var pointer = this, chart = this.chart, hasPinched = this.hasPinched;
         if (this.selectionMarker) {
-            var selectionBox = this.selectionMarker, x_1 = selectionBox.attr ? selectionBox.attr('x') : selectionBox.x, y_1 = selectionBox.attr ? selectionBox.attr('y') : selectionBox.y, width_1 = selectionBox.attr ?
-                selectionBox.attr('width') :
-                selectionBox.width, height_1 = selectionBox.attr ?
-                selectionBox.attr('height') :
-                selectionBox.height, selectionData_1 = {
+            var _a = this.getSelectionBox(this.selectionMarker), x_1 = _a.x, y_1 = _a.y, width_1 = _a.width, height_1 = _a.height;
+            var selectionData_1 = {
                 originalEvent: e,
                 xAxis: [],
                 yAxis: [],
@@ -256,7 +298,9 @@ var Pointer = /** @class */ (function () {
                                 yAxis: 'zoomY'
                             }[axis.coll]]) &&
                         isNumber(x_1) &&
-                        isNumber(y_1)) { // #859, #3569
+                        isNumber(y_1) &&
+                        isNumber(width_1) &&
+                        isNumber(height_1)) { // #859, #3569
                         var horiz = axis.horiz, minPixelPadding = e.type === 'touchend' ?
                             axis.minPixelPadding :
                             0, // #1207, #3075
@@ -315,14 +359,6 @@ var Pointer = /** @class */ (function () {
      * The point closest to given coordinates.
      */
     Pointer.prototype.findNearestKDPoint = function (series, shared, e) {
-        var chart = this.chart;
-        var hoverPoint = chart.hoverPoint;
-        var tooltip = chart.tooltip;
-        if (hoverPoint &&
-            tooltip &&
-            tooltip.isStickyOnContact()) {
-            return hoverPoint;
-        }
         var closest;
         /** @private */
         function sort(p1, p2) {
@@ -461,10 +497,10 @@ var Pointer = /** @class */ (function () {
      * @function Highcharts.Pointer#getHoverData
      *
      * @param {Highcharts.Point|undefined} existingHoverPoint
-     * The point currrently beeing hovered.
+     * The point currently being hovered.
      *
      * @param {Highcharts.Series|undefined} existingHoverSeries
-     * The series currently beeing hovered.
+     * The series currently being hovered.
      *
      * @param {Array<Highcharts.Series>} series
      * All the series in the chart.
@@ -582,7 +618,7 @@ var Pointer = /** @class */ (function () {
     };
     /**
      * Utility to detect whether an element has, or has a parent with, a
-     * specificclass name. Used on detection of tracker objects and on deciding
+     * specific class name. Used on detection of tracker objects and on deciding
      * whether hovering the tooltip should cause the active series to mouse out.
      *
      * @function Highcharts.Pointer#inClass
@@ -641,7 +677,6 @@ var Pointer = /** @class */ (function () {
              * @type {Highcharts.Tooltip}
              */
             chart.tooltip = new Tooltip(chart, options.tooltip);
-            this.followTouchMove = pick(options.tooltip.followTouchMove, true);
         }
         this.setDOMEvents();
     };
@@ -755,10 +790,6 @@ var Pointer = /** @class */ (function () {
     Pointer.prototype.onContainerMouseLeave = function (e) {
         var chart = charts[pick(Pointer.hoverChartIndex, -1)];
         var tooltip = this.chart.tooltip;
-        // #14434: tooltip.options.outside
-        if (tooltip && tooltip.shouldStickOnContact() && this.inClass(e.relatedTarget, 'highcharts-tooltip-container')) {
-            return;
-        }
         e = this.normalize(e);
         // #4886, MS Touch end fires mouseleave but with no related target
         if (chart &&
@@ -786,8 +817,7 @@ var Pointer = /** @class */ (function () {
      * @function Highcharts.Pointer#onContainerMouseMove
      */
     Pointer.prototype.onContainerMouseMove = function (e) {
-        var chart = this.chart;
-        var pEvt = this.normalize(e);
+        var chart = this.chart, tooltip = chart.tooltip, pEvt = this.normalize(e);
         this.setHoverChartIndex();
         // In IE8 we apparently need this returnValue set to false in order to
         // avoid text being selected. But in Chrome, e.returnValue is prevented,
@@ -805,7 +835,12 @@ var Pointer = /** @class */ (function () {
             (this.inClass(pEvt.target, 'highcharts-tracker') ||
                 chart.isInsidePlot(pEvt.chartX - chart.plotLeft, pEvt.chartY - chart.plotTop, {
                     visiblePlotOnly: true
-                }))) {
+                })) &&
+            // If the tooltip has stickOnContact enabled, do nothing. This
+            // applies regardless of any combinations of the `split` and
+            // `useHTML` options.
+            !(tooltip &&
+                tooltip.shouldStickOnContact(pEvt))) {
             if (this.inClass(pEvt.target, 'highcharts-no-tooltip')) {
                 this.reset(false, 0);
             }
@@ -858,16 +893,16 @@ var Pointer = /** @class */ (function () {
      */
     Pointer.prototype.onDocumentMouseMove = function (e) {
         var chart = this.chart;
+        var tooltip = chart.tooltip;
         var chartPosition = this.chartPosition;
         var pEvt = this.normalize(e, chartPosition);
-        var tooltip = chart.tooltip;
         // If we're outside, hide the tooltip
         if (chartPosition &&
-            (!tooltip ||
-                !tooltip.isStickyOnContact()) &&
             !chart.isInsidePlot(pEvt.chartX - chart.plotLeft, pEvt.chartY - chart.plotTop, {
                 visiblePlotOnly: true
             }) &&
+            !(tooltip &&
+                tooltip.shouldStickOnContact(pEvt)) &&
             !this.inClass(pEvt.target, 'highcharts-tracker')) {
             this.reset();
         }
@@ -890,7 +925,8 @@ var Pointer = /** @class */ (function () {
     Pointer.prototype.pinch = function (e) {
         var self = this, chart = self.chart, pinchDown = self.pinchDown, touches = (e.touches || []), touchesLength = touches.length, lastValidTouch = self.lastValidTouch, hasZoom = self.hasZoom, transform = {}, fireClickEvent = touchesLength === 1 && ((self.inClass(e.target, 'highcharts-tracker') &&
             chart.runTrackerClick) ||
-            self.runChartClick), clip = {};
+            self.runChartClick), clip = {}, tooltip = self.chart.tooltip, followTouchMove = touchesLength === 1 &&
+            pick((tooltip && tooltip.options.followTouchMove), true);
         var selectionMarker = self.selectionMarker;
         // Don't initiate panning until the user has pinched. This prevents us
         // from blocking page scrolling as users scroll down a long page
@@ -898,7 +934,7 @@ var Pointer = /** @class */ (function () {
         if (touchesLength > 1) {
             self.initiated = true;
         }
-        else if (touchesLength === 1 && this.followTouchMove) {
+        else if (followTouchMove) {
             // #16119: Prevent blocking scroll when single-finger panning is
             // not enabled
             self.initiated = false;
@@ -936,7 +972,7 @@ var Pointer = /** @class */ (function () {
             self.res = true; // reset on next move
             // Optionally move the tooltip on touchmove
         }
-        else if (self.followTouchMove && touchesLength === 1) {
+        else if (followTouchMove) {
             this.runPointActions(self.normalize(e));
             // Event type is touchmove, handle panning and pinching
         }
@@ -1416,6 +1452,23 @@ export default Pointer;
  *  API Declarations
  *
  * */
+/**
+ * Chart position and scale.
+ *
+ * @interface Highcharts.ChartPositionObject
+ */ /**
+* @name Highcharts.ChartPositionObject#left
+* @type {number}
+*/ /**
+* @name Highcharts.ChartPositionObject#scaleX
+* @type {number}
+*/ /**
+* @name Highcharts.ChartPositionObject#scaleY
+* @type {number}
+*/ /**
+* @name Highcharts.ChartPositionObject#top
+* @type {number}
+*/
 /**
  * One position in relation to an axis.
  *
@@ -1477,44 +1530,41 @@ export default Pointer;
  *
  * @interface Highcharts.SelectDataObject
  */ /**
+* The selected Axis.
 * @name Highcharts.SelectDataObject#axis
 * @type {Highcharts.Axis}
 */ /**
+* The maximum axis value, either automatic or set manually.
 * @name Highcharts.SelectDataObject#max
 * @type {number}
 */ /**
+* The minimum axis value, either automatic or set manually.
 * @name Highcharts.SelectDataObject#min
 * @type {number}
 */
 /**
  * Object for select events.
+ * The primary axes are `xAxis[0]` and `yAxis[0]`. Remember the unit of a
+ * datetime axis is milliseconds since 1970-01-01 00:00:00.
  *
  * @interface Highcharts.SelectEventObject
  */ /**
+* The related browser event.
 * @name Highcharts.SelectEventObject#originalEvent
 * @type {global.Event}
 */ /**
+* Indicates a reset event to restore default state.
+* @name Highcharts.SelectEventObject#resetSelection
+* @type {boolean|undefined}
+*/ /**
+* Arrays containing the axes of each dimension and each axis' min and max
+* values.
 * @name Highcharts.SelectEventObject#xAxis
 * @type {Array<Highcharts.SelectDataObject>}
 */ /**
+* Arrays containing the axes of each dimension and each axis' min and max
+* values.
 * @name Highcharts.SelectEventObject#yAxis
 * @type {Array<Highcharts.SelectDataObject>}
 */
-/**
- * Chart position and scale.
- *
- * @interface Highcharts.ChartPositionObject
- */ /**
-* @name Highcharts.ChartPositionObject#left
-* @type {number}
-*/ /**
-* @name Highcharts.ChartPositionObject#scaleX
-* @type {number}
-*/ /**
-* @name Highcharts.ChartPositionObject#scaleY
-* @type {number}
-*/ /**
-* @name Highcharts.ChartPositionObject#top
-* @type {number}
-*/
 ''; // keeps doclets above in JS file

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

@@ -395,9 +395,6 @@ var SVGElement = /** @class */ (function () {
         var strokeWidth = parts[0];
         if (strokeWidth && strokeWidth !== 'none' && H.svg) {
             this.fakeTS = true; // Fake text shadow
-            // In order to get the right y position of the clone,
-            // copy over the y setter
-            this.ySetter = this.xSetter;
             // Since the stroke is applied on center of the actual outline, we
             // need to double it to get the correct stroke-width outside the
             // glyphs.

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.2.1'));
+        desc.element.appendChild(doc.createTextNode('Created with Highcharts 10.3.1'));
         renderer.defs = this.createElement('defs').add();
         renderer.allowHTML = allowHTML;
         renderer.forExport = forExport;
@@ -573,7 +573,7 @@ var SVGRenderer = /** @class */ (function () {
             disabledStyle = disabledState.style;
             delete disabledState.style;
         }
-        // Add the events. IE9 and IE10 need mouseover and mouseout to funciton
+        // Add the events. IE9 and IE10 need mouseover and mouseout to function
         // (#667).
         addEvent(label.element, isMS ? 'mouseover' : 'mouseenter', function () {
             if (curState !== 3) {
@@ -619,6 +619,15 @@ var SVGRenderer = /** @class */ (function () {
             label
                 .attr(normalState)
                 .css(extend({ cursor: 'default' }, normalStyle));
+            // HTML labels don't need to handle pointer events because click and
+            // mouseenter/mouseleave is bound to the underlying <g> element.
+            // Should this be reconsidered, we need more complex logic to share
+            // events between the <g> and its <div> counterpart, and avoid
+            // triggering mouseenter/mouseleave when hovering from one to the
+            // other (#17440).
+            if (useHTML) {
+                label.text.css({ pointerEvents: 'none' });
+            }
         }
         return label
             .on('touchstart', function (e) { return e.stopPropagation(); })
@@ -1099,9 +1108,11 @@ var SVGRenderer = /** @class */ (function () {
              */
             ['width', 'height'].forEach(function (key) {
                 img_1[key + 'Setter'] = function (value, key) {
-                    var imgSize = this['img' + key];
                     this[key] = value;
+                    var _a = this, alignByTranslate = _a.alignByTranslate, element = _a.element, width = _a.width, height = _a.height, imgwidth = _a.imgwidth, imgheight = _a.imgheight;
+                    var imgSize = this['img' + key];
                     if (defined(imgSize)) {
+                        var scale = 1;
                         // Scale and center the image within its container.
                         // The name `backgroundSize` is taken from the CSS spec,
                         // but the value `within` is made up. Other possible
@@ -1109,19 +1120,22 @@ var SVGRenderer = /** @class */ (function () {
                         // implemented if needed.
                         if (options &&
                             options.backgroundSize === 'within' &&
-                            this.width &&
-                            this.height) {
-                            imgSize = Math.round(imgSize * Math.min(this.width / this.imgwidth, this.height / this.imgheight));
+                            width &&
+                            height) {
+                            scale = Math.min(width / imgwidth, height / imgheight);
+                            imgSize = Math.round(imgSize * scale);
+                            // Update both width and height to keep the ratio
+                            // correct (#17315)
+                            attr(element, {
+                                width: Math.round(imgwidth * scale),
+                                height: Math.round(imgheight * scale)
+                            });
                         }
-                        if (this.element) {
-                            this.element.setAttribute(key, imgSize);
+                        else if (element) {
+                            element.setAttribute(key, imgSize);
                         }
-                        if (!this.alignByTranslate) {
-                            var translate = ((this[key] || 0) - imgSize) / 2;
-                            var attribs = key === 'width' ?
-                                { translateX: translate } :
-                                { translateY: translate };
-                            this.attr(attribs);
+                        if (!alignByTranslate) {
+                            this.translate(((width || 0) - (imgSize * scale)) / 2, ((height || 0) - (imgSize * scale)) / 2);
                         }
                     }
                 };

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

@@ -229,8 +229,9 @@ var DataLabel;
      * Draw the data labels
      * @private
      */
-    function drawDataLabels() {
-        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) ||
+    function drawDataLabels(points) {
+        if (points === void 0) { points = this.points; }
+        var series = this, chart = series.chart, seriesOptions = series.options, 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;
@@ -408,11 +409,13 @@ var DataLabel;
                             // read text bounding box
                             dataLabel.css(style).shadow(labelOptions.shadow);
                         }
-                        if (labelOptions.textPath && !labelOptions.useHTML) {
+                        var textPathOptions = labelOptions[point.formatPrefix + 'TextPath'] ||
+                            labelOptions.textPath;
+                        if (textPathOptions && !labelOptions.useHTML) {
                             dataLabel.setTextPath((point.getDataLabelPath &&
-                                point.getDataLabelPath(dataLabel)) || point.graphic, labelOptions.textPath);
+                                point.getDataLabelPath(dataLabel)) || point.graphic, textPathOptions);
                             if (point.dataLabelPath &&
-                                !labelOptions.textPath.enabled) {
+                                !textPathOptions.enabled) {
                                 // clean the DOM
                                 point.dataLabelPath = (point.dataLabelPath.destroy());
                             }

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

@@ -11,7 +11,7 @@
 import AST from '../Renderer/HTML/AST.js';
 import A from '../Animation/AnimationUtilities.js';
 var animObject = A.animObject;
-import D from '../DefaultOptions.js';
+import D from '../Defaults.js';
 var defaultOptions = D.defaultOptions;
 import F from '../FormatUtilities.js';
 var format = F.format;
@@ -216,7 +216,7 @@ var Point = /** @class */ (function () {
         if (pointValKey) {
             point.y = Point.prototype.getNestedProperty.call(point, pointValKey);
         }
-        point.isNull = pick(point.isValid && !point.isValid(), point.x === null || !isNumber(point.y)); // #3571, check for NaN
+        point.isNull = this.isValid && !this.isValid();
         point.formatPrefix = point.isNull ? 'null' : 'point'; // #9233, #10874
         // The point is initially selected by options (#5777)
         if (point.selected) {
@@ -265,7 +265,10 @@ var Point = /** @class */ (function () {
          */
         function destroyPoint() {
             // Remove all events and elements
-            if (point.graphic || point.dataLabel || point.dataLabels) {
+            if (point.graphic ||
+                point.graphics ||
+                point.dataLabel ||
+                point.dataLabels) {
                 removeEvent(point);
                 point.destroyElements();
             }
@@ -273,7 +276,8 @@ var Point = /** @class */ (function () {
                 point[prop] = null;
             }
         }
-        if (point.legendItem) { // pies have legend items
+        if (point.legendItem) {
+            // pies have legend items
             chart.legend.destroyItem(point);
         }
         if (hoverPoints) {
@@ -387,7 +391,7 @@ var Point = /** @class */ (function () {
         var prop, i;
         kinds = kinds || { graphic: 1, dataLabel: 1 };
         if (kinds.graphic) {
-            props.push('graphic', 'upperGraphic', 'shadowGroup');
+            props.push('graphic', 'shadowGroup');
         }
         if (kinds.dataLabel) {
             props.push('dataLabel', 'dataLabelPath', 'dataLabelUpper', 'connector');
@@ -399,7 +403,11 @@ var Point = /** @class */ (function () {
                 graphicalProps.singular.push(prop);
             }
         }
-        ['dataLabel', 'connector'].forEach(function (prop) {
+        [
+            'graphic',
+            'dataLabel',
+            'connector'
+        ].forEach(function (prop) {
             var plural = prop + 's';
             if (kinds[prop] && point[plural]) {
                 graphicalProps.plural.push(plural);
@@ -510,6 +518,14 @@ var Point = /** @class */ (function () {
         fireEvent(this, 'afterInit');
         return this;
     };
+    /**
+     * Determine if point is valid.
+     * @private
+     * @function Highcharts.Point#isValid
+     */
+    Point.prototype.isValid = function () {
+        return this.x !== null && isNumber(this.y);
+    };
     /**
      * Transform number or array configs into objects. Also called for object
      * configs. Used internally to unify the different configuration formats for
@@ -644,6 +660,9 @@ var Point = /** @class */ (function () {
         }, object);
         return object;
     };
+    Point.prototype.shouldDraw = function () {
+        return !this.isNull;
+    };
     /**
      * Extendable method for formatting each point's tooltip line.
      *
@@ -719,14 +738,14 @@ var Point = /** @class */ (function () {
         function update() {
             point.applyOptions(options);
             // Update visuals, #4146
-            // Handle dummy graphic elements for a11y, #12718
-            var hasDummyGraphic = graphic && point.hasDummyGraphic;
+            // Handle mock graphic elements for a11y, #12718
+            var hasMockGraphic = graphic && point.hasMockGraphic;
             var shouldDestroyGraphic = point.y === null ?
-                !hasDummyGraphic :
-                hasDummyGraphic;
+                !hasMockGraphic :
+                hasMockGraphic;
             if (graphic && shouldDestroyGraphic) {
                 point.graphic = graphic.destroy();
-                delete point.hasDummyGraphic;
+                delete point.hasMockGraphic;
             }
             if (isObject(options, true)) {
                 // Destroy so we can get new elements
@@ -968,8 +987,8 @@ var Point = /** @class */ (function () {
             markerAttribs = series.markerAttribs(point, state);
         }
         // Apply hover styles to the existing point
-        // Prevent from dummy null points (#14966)
-        if (point.graphic && !point.hasDummyGraphic) {
+        // Prevent from mocked null points (#14966)
+        if (point.graphic && !point.hasMockGraphic) {
             if (previousState) {
                 point.graphic.removeClass('highcharts-point-' + previousState);
             }
@@ -979,21 +998,18 @@ var Point = /** @class */ (function () {
             if (!chart.styledMode) {
                 pointAttribs = series.pointAttribs(point, state);
                 pointAttribsAnimation = pick(chart.options.chart.animation, stateOptions.animation);
+                var opacity_1 = pointAttribs.opacity;
                 // Some inactive points (e.g. slices in pie) should apply
                 // opacity also for their labels
-                if (series.options.inactiveOtherPoints &&
-                    isNumber(pointAttribs.opacity)) {
+                if (isNumber(opacity_1)) {
                     (point.dataLabels || []).forEach(function (label) {
-                        if (label) {
-                            label.animate({
-                                opacity: pointAttribs.opacity
-                            }, pointAttribsAnimation);
+                        if (label &&
+                            !label.hasClass('highcharts-data-label-hidden')) {
+                            label.animate({ opacity: opacity_1 }, pointAttribsAnimation);
                         }
                     });
                     if (point.connector) {
-                        point.connector.animate({
-                            opacity: pointAttribs.opacity
-                        }, pointAttribsAnimation);
+                        point.connector.animate({ opacity: opacity_1 }, pointAttribsAnimation);
                     }
                 }
                 point.graphic.animate(pointAttribs, pointAttribsAnimation);