highcharts 9.2.1 → 9.3.2

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

@@ -17,7 +17,6 @@ var registerEventOptions = F.registerEventOptions;
 import H from '../Globals.js';
 var hasTouch = H.hasTouch, svg = H.svg, win = H.win;
 import LegendSymbol from '../Legend/LegendSymbol.js';
-import Palette from '../Color/Palette.js';
 import Point from './Point.js';
 import SeriesDefaults from './SeriesDefaults.js';
 import SeriesRegistry from './SeriesRegistry.js';
@@ -366,7 +365,6 @@ var Series = /** @class */ (function () {
      *
      * @private
      * @function Highcharts.Series#hasData
-     * @return {boolean}
      */
     Series.prototype.hasData = function () {
         return ((this.visible &&
@@ -384,7 +382,6 @@ var Series = /** @class */ (function () {
      *
      * @private
      * @function Highcharts.Series#autoIncrement
-     * @return {number}
      */
     Series.prototype.autoIncrement = function (x) {
         var options = this.options, pointIntervalUnit = options.pointIntervalUnit, relativeXValue = options.relativeXValue, time = this.chart.time;
@@ -440,13 +437,9 @@ var Series = /** @class */ (function () {
      * not redraw the series. For API usage, use {@link Series#update}.
      * @private
      * @function Highcharts.Series#setOptions
-     *
      * @param {Highcharts.SeriesOptionsType} itemOptions
      * The series options.
-     *
-     * @return {Highcharts.SeriesOptionsType}
-     *
-     * @fires Highcharts.Series#event:afterSetOptions
+     * @emits Highcharts.Series#event:afterSetOptions
      */
     Series.prototype.setOptions = function (itemOptions) {
         var chart = this.chart, chartOptions = chart.options, plotOptions = chartOptions.plotOptions, userOptions = chart.userOptions || {}, seriesUserOptions = merge(itemOptions), styledMode = chart.styledMode, e = {
@@ -582,7 +575,7 @@ var Series = /** @class */ (function () {
             this.getCyclic('color');
         }
         else if (this.options.colorByPoint) {
-            this.color = Palette.neutralColor20;
+            this.color = "#cccccc" /* neutralColor20 */;
         }
         else {
             this.getCyclic('color', this.options.color ||
@@ -594,7 +587,6 @@ var Series = /** @class */ (function () {
      *
      * @private
      * @function Highcharts.Series#getPointsCollection
-     * @return {Array<Highcharts.Point>}
      */
     Series.prototype.getPointsCollection = function () {
         return (this.hasGroupedData ? this.points : this.data) || [];
@@ -605,7 +597,6 @@ var Series = /** @class */ (function () {
      *
      * @private
      * @function Highcharts.Series#getSymbol
-     * @return {void}
      */
     Series.prototype.getSymbol = function () {
         var seriesMarkerOption = this.options.marker;
@@ -617,14 +608,13 @@ var Series = /** @class */ (function () {
      *
      * @private
      * @function Highcharts.Series#findPointIndex
-     * @param    {Highcharts.PointOptionsObject} optionsObject
-     *           The options of the point.
-     * @param    {number} fromIndex
-     *           The index to start searching from, used for optimizing
-     *           series with required sorting.
-     * @returns  {number|undefined}
-     *           Returns the index of a matching point, or undefined if no
-     *           match is found.
+     * @param {Highcharts.PointOptionsObject} optionsObject
+     * The options of the point.
+     * @param {number} fromIndex
+     * The index to start searching from, used for optimizing series with
+     * required sorting.
+     * @return {number|undefined}
+     * Returns the index of a matching point, or undefined if no match is found.
      */
     Series.prototype.findPointIndex = function (optionsObject, fromIndex) {
         var id = optionsObject.id, x = optionsObject.x, oldData = this.points, dataSorting = this.options.dataSorting;
@@ -880,11 +870,19 @@ var Series = /** @class */ (function () {
                 }
                 else if (isArray(firstPoint)) {
                     if (valueCount) { // [x, low, high] or [x, o, h, l, c]
-                        for (i = 0; i < dataLength; i++) {
-                            pt = data[i];
-                            xData[i] = pt[0];
-                            yData[i] =
-                                pt.slice(1, valueCount + 1);
+                        if (firstPoint.length === valueCount) {
+                            for (i = 0; i < dataLength; i++) {
+                                xData[i] = this.autoIncrement();
+                                yData[i] = data[i];
+                            }
+                        }
+                        else {
+                            for (i = 0; i < dataLength; i++) {
+                                pt = data[i];
+                                xData[i] = pt[0];
+                                yData[i] =
+                                    pt.slice(1, valueCount + 1);
+                            }
                         }
                     }
                     else { // [x, y]
@@ -894,10 +892,21 @@ var Series = /** @class */ (function () {
                             indexOfX = indexOfX >= 0 ? indexOfX : 0;
                             indexOfY = indexOfY >= 0 ? indexOfY : 1;
                         }
-                        for (i = 0; i < dataLength; i++) {
-                            pt = data[i];
-                            xData[i] = pt[indexOfX];
-                            yData[i] = pt[indexOfY];
+                        if (firstPoint.length === 1) {
+                            indexOfY = 0;
+                        }
+                        if (indexOfX === indexOfY) {
+                            for (i = 0; i < dataLength; i++) {
+                                xData[i] = this.autoIncrement();
+                                yData[i] = data[i][indexOfY];
+                            }
+                        }
+                        else {
+                            for (i = 0; i < dataLength; i++) {
+                                pt = data[i];
+                                xData[i] = pt[indexOfX];
+                                yData[i] = pt[indexOfY];
+                            }
                         }
                     }
                 }
@@ -955,11 +964,8 @@ var Series = /** @class */ (function () {
      *
      * @private
      * @function Highcharts.Series#sortData
-     *
      * @param {Array<Highcharts.PointOptionsType>} data
      * Force data grouping.
-     *
-     * @return {Array<Highcharts.PointOptionsObject>}
      */
     Series.prototype.sortData = function (data) {
         var series = this, options = series.options, dataSorting = options.dataSorting, sortKey = dataSorting.sortKey || 'y', getPointOptionsObject = function (series, pointOptions) {
@@ -1011,8 +1017,7 @@ var Series = /** @class */ (function () {
      * @private
      * @function Highcharts.Series#getProcessedData
      * @param {boolean} [forceExtremesFromAll]
-     *        Force getting extremes of a total series data range.
-     * @return {Highcharts.SeriesProcessedDataObject}
+     * Force getting extremes of a total series data range.
      */
     Series.prototype.getProcessedData = function (forceExtremesFromAll) {
         var series = this, xAxis = series.xAxis, options = series.options, cropThreshold = options.cropThreshold, getExtremesFromAll = forceExtremesFromAll ||
@@ -1092,8 +1097,7 @@ var Series = /** @class */ (function () {
      * @private
      * @function Highcharts.Series#processData
      * @param {boolean} [force]
-     *        Force data grouping.
-     * @return {boolean|undefined}
+     * Force data grouping.
      */
     Series.prototype.processData = function (force) {
         var series = this, xAxis = series.xAxis;
@@ -1113,7 +1117,8 @@ var Series = /** @class */ (function () {
         series.cropStart = processedData.cropStart;
         series.processedXData = processedData.xData;
         series.processedYData = processedData.yData;
-        series.closestPointRange = series.basePointRange = processedData.closestPointRange;
+        series.closestPointRange = (series.basePointRange = processedData.closestPointRange);
+        fireEvent(series, 'afterProcessData');
     };
     /**
      * Iterate over xData and crop values between min and max. Returns
@@ -1122,12 +1127,6 @@ var Series = /** @class */ (function () {
      *
      * @private
      * @function Highcharts.Series#cropData
-     * @param {Array<number>} xData
-     * @param {Array<number>} yData
-     * @param {number} min
-     * @param {number} max
-     * @param {number} [cropShoulder]
-     * @return {Highcharts.SeriesCropDataObject}
      */
     Series.prototype.cropData = function (xData, yData, min, max, cropShoulder) {
         var dataLength = xData.length;
@@ -1206,6 +1205,9 @@ var Series = /** @class */ (function () {
                  *
                  * @name Highcharts.Point#dataGroup
                  * @type {Highcharts.DataGroupingInfoObject|undefined}
+                 *
+                 * @sample stock/members/point-datagroup
+                 *         Click to inspect raw data points
                  */
                 point.dataGroup = series.groupMap[groupCropStartIndex + i];
                 if (point.dataGroup.options) {
@@ -1224,7 +1226,8 @@ var Series = /** @class */ (function () {
                  * @readonly
                  */
                 // For faster access in Point.update
-                point.index = hasGroupedData ? (groupCropStartIndex + i) : cursor;
+                point.index = hasGroupedData ?
+                    (groupCropStartIndex + i) : cursor;
                 points[i] = point;
             }
         }
@@ -1284,12 +1287,9 @@ var Series = /** @class */ (function () {
      *
      * @private
      * @function Highcharts.Series#getXExtremes
-     *
      * @param {Array<number>} xData
      * The data to inspect. Defaults to the current data within the visible
      * range.
-     *
-     * @return {Highcharts.RangeObject}
      */
     Series.prototype.getXExtremes = function (xData) {
         return {
@@ -1303,14 +1303,11 @@ var Series = /** @class */ (function () {
      *
      * @private
      * @function Highcharts.Series#getExtremes
-     *
      * @param {Array<number>} [yData]
      * The data to inspect. Defaults to the current data within the visible
      * range.
      * @param {boolean} [forceExtremesFromAll]
      * Force getting extremes of a total series data range.
-     *
-     * @return {Highcharts.DataExtremesObject}
      */
     Series.prototype.getExtremes = function (yData, forceExtremesFromAll) {
         var xAxis = this.xAxis, yAxis = this.yAxis, xData = this.processedXData || this.xData, activeYData = [], 
@@ -1355,6 +1352,7 @@ var Series = /** @class */ (function () {
             }
         }
         var dataExtremes = {
+            activeYData: activeYData,
             dataMin: arrayMin(activeYData),
             dataMax: arrayMax(activeYData)
         };
@@ -1396,11 +1394,8 @@ var Series = /** @class */ (function () {
      *
      * @private
      * @function Highcharts.Series.getFirstValidPoint
-     *
      * @param {Array<Highcharts.PointOptionsType>} data
      * Array of options for points
-     *
-     * @return {Highcharts.PointOptionsType}
      */
     Series.prototype.getFirstValidPoint = function (data) {
         var dataLength = data.length;
@@ -1419,14 +1414,14 @@ var Series = /** @class */ (function () {
      *
      * @function Highcharts.Series#translate
      *
-     * @fires Highcharts.Series#events:translate
+     * @emits Highcharts.Series#events:translate
      */
     Series.prototype.translate = function () {
         if (!this.processedXData) { // hidden series
             this.processData();
         }
         this.generatePoints();
-        var series = this, options = series.options, stacking = options.stacking, xAxis = series.xAxis, categories = xAxis.categories, enabledDataSorting = series.enabledDataSorting, yAxis = series.yAxis, points = series.points, dataLength = points.length, hasModifyValue = !!series.modifyValue, pointPlacement = series.pointPlacementToXValue(), // #7860
+        var series = this, options = series.options, stacking = options.stacking, xAxis = series.xAxis, categories = xAxis.categories, enabledDataSorting = series.enabledDataSorting, yAxis = series.yAxis, points = series.points, dataLength = points.length, pointPlacement = series.pointPlacementToXValue(), // #7860
         dynamicallyPlaced = Boolean(pointPlacement), threshold = options.threshold, stackThreshold = options.startFromThreshold ? threshold : 0, zoneAxis = this.zoneAxis || 'y';
         var i, plotX, lastPlotX, stackIndicator, closestPointRangePx = Number.MAX_VALUE;
         /**
@@ -1447,8 +1442,10 @@ var Series = /** @class */ (function () {
                     (stackThreshold ? 0 : threshold) ?
                 '-' :
                 '') + series.stackKey];
-            if (yAxis.positiveValuesOnly && !yAxis.validatePositiveValue(yValue) ||
-                xAxis.positiveValuesOnly && !xAxis.validatePositiveValue(xValue)) {
+            if (yAxis.positiveValuesOnly &&
+                !yAxis.validatePositiveValue(yValue) ||
+                xAxis.positiveValuesOnly &&
+                    !xAxis.validatePositiveValue(xValue)) {
                 point.isNull = true;
             }
             // Get the plotX translation
@@ -1499,9 +1496,9 @@ var Series = /** @class */ (function () {
             point.yBottom = defined(yBottom) ?
                 limitedRange(yAxis.translate(yBottom, 0, 1, 0, 1)) :
                 null;
-            // general hook, used for Highcharts Stock compare mode
-            if (hasModifyValue) {
-                yValue = series.modifyValue(yValue, point);
+            // General hook, used for Highcharts Stock compare and cumulative
+            if (series.dataModify) {
+                yValue = series.dataModify.modifyValue(yValue, i);
             }
             // Set the the plotY value, reset it for redraws
             // #3201
@@ -1535,7 +1532,7 @@ var Series = /** @class */ (function () {
                 lastPlotX = plotX;
             }
             // Find point zone
-            point.zone = (this.zones.length && point.getZone());
+            point.zone = this.zones.length ? point.getZone() : void 0;
             // Animate new points with data sorting
             if (!point.graphic && series.group && enabledDataSorting) {
                 point.isNew = true;
@@ -1579,46 +1576,20 @@ var Series = /** @class */ (function () {
      *
      * @private
      * @function Highcharts.Series#getClip
-     *
-     * @param  {boolean|Partial<Highcharts.AnimationOptionsObject>} [animation]
-     * Initialize the animation.
-     *
-     * @param  {boolean} [finalBox]
-     * Final size for the clip - end state for the animation.
-     *
-     * @return {Highcharts.Dictionary<number>}
-     */
-    Series.prototype.getClipBox = function (animation, finalBox) {
-        var series = this, options = series.options, chart = series.chart, inverted = chart.inverted, xAxis = series.xAxis, yAxis = xAxis && series.yAxis, scrollablePlotAreaOptions = chart.options.chart.scrollablePlotArea || {};
-        var clipBox;
-        if (animation && options.clip === false && yAxis) {
-            // support for not clipped series animation (#10450)
-            clipBox = inverted ? {
-                y: -chart.chartWidth + yAxis.len + yAxis.pos,
-                height: chart.chartWidth,
-                width: chart.chartHeight,
-                x: -chart.chartHeight + xAxis.len + xAxis.pos
-            } : {
-                y: -yAxis.pos,
-                height: chart.chartHeight,
-                width: chart.chartWidth,
-                x: -xAxis.pos
-            };
-            // x and width will be changed later when setting for animation
-            // initial state in Series.setClip
+     */
+    Series.prototype.getClipBox = function () {
+        var _a = this, chart = _a.chart, xAxis = _a.xAxis, yAxis = _a.yAxis;
+        // If no axes on the series, use global clipBox
+        var seriesBox = merge(chart.clipBox);
+        // Otherwise, use clipBox.width which is corrected for plotBorderWidth
+        // and clipOffset
+        if (xAxis && xAxis.len !== chart.plotSizeX) {
+            seriesBox.width = xAxis.len;
         }
-        else {
-            clipBox = series.clipBox || chart.clipBox;
-            if (finalBox) {
-                clipBox.width = chart.plotSizeX;
-                clipBox.x = (chart.scrollablePixelsX || 0) *
-                    (scrollablePlotAreaOptions.scrollPositionX || 0);
-            }
+        if (yAxis && yAxis.len !== chart.plotSizeY) {
+            seriesBox.height = yAxis.len;
         }
-        return !finalBox ? clipBox : {
-            width: clipBox.width,
-            x: clipBox.x
-        };
+        return seriesBox;
     };
     /**
      * Get the shared clip key, creating it if it doesn't exist.
@@ -1626,92 +1597,45 @@ var Series = /** @class */ (function () {
      * @private
      * @function Highcharts.Series#getSharedClipKey
      */
-    Series.prototype.getSharedClipKey = function (animation) {
-        if (this.sharedClipKey) {
-            return this.sharedClipKey;
-        }
-        var sharedClipKey = [
-            animation && animation.duration,
-            animation && animation.easing,
-            animation && animation.defer,
-            this.getClipBox(animation).height,
-            this.options.xAxis,
-            this.options.yAxis
-        ].join(',');
-        if (this.options.clip !== false || animation) {
-            this.sharedClipKey = sharedClipKey;
-        }
-        return sharedClipKey;
+    Series.prototype.getSharedClipKey = function () {
+        this.sharedClipKey = (this.options.xAxis || 0) + ',' +
+            (this.options.yAxis || 0);
+        return this.sharedClipKey;
     };
     /**
-     * Set the clipping for the series. For animated series it is called
-     * twice, first to initiate animating the clip then the second time
-     * without the animation to set the final clip.
+     * Set the clipping for the series. For animated series the clip is later
+     * modified.
      *
      * @private
      * @function Highcharts.Series#setClip
      */
-    Series.prototype.setClip = function (animation) {
-        var chart = this.chart, options = this.options, renderer = chart.renderer, inverted = chart.inverted, seriesClipBox = this.clipBox, clipBox = this.getClipBox(animation), sharedClipKey = this.getSharedClipKey(animation); // #4526
-        var clipRect = chart.sharedClips[sharedClipKey], markerClipRect = chart.sharedClips[sharedClipKey + 'm'];
-        if (animation) {
-            clipBox.width = 0;
-            if (inverted) {
-                clipBox.x = chart.plotHeight +
-                    (options.clip !== false ? 0 : chart.plotTop);
-            }
-        }
-        // If a clipping rectangle with the same properties is currently
-        // present in the chart, use that.
+    Series.prototype.setClip = function () {
+        var _a = this, chart = _a.chart, group = _a.group, markerGroup = _a.markerGroup, sharedClips = chart.sharedClips, renderer = chart.renderer, clipBox = this.getClipBox(), sharedClipKey = this.getSharedClipKey(); // #4526
+        var clipRect = sharedClips[sharedClipKey];
+        // If a clipping rectangle for the same set of axes does not exist,
+        // create it
         if (!clipRect) {
-            // When animation is set, prepare the initial positions
-            if (animation) {
-                chart.sharedClips[sharedClipKey + 'm'] = markerClipRect =
-                    renderer.clipRect(
-                    // include the width of the first marker
-                    inverted ? (chart.plotSizeX || 0) + 99 : -99, inverted ? -chart.plotLeft : -chart.plotTop, 99, inverted ? chart.chartWidth : chart.chartHeight);
-            }
-            chart.sharedClips[sharedClipKey] = clipRect = renderer.clipRect(clipBox);
-            // Create hashmap for series indexes
-            clipRect.count = { length: 0 };
-            // When the series is rendered again before starting animating, in
-            // compliance to a responsive rule
-        }
-        else if (!chart.hasLoaded) {
-            clipRect.attr(clipBox);
-        }
-        if (animation) {
-            if (!clipRect.count[this.index]) {
-                clipRect.count[this.index] = true;
-                clipRect.count.length += 1;
-            }
-        }
-        if (options.clip !== false || animation) {
-            this.group.clip(animation || seriesClipBox ? clipRect : chart.clipRect);
-            this.markerGroup.clip(markerClipRect);
-        }
-        // Remove the shared clipping rectangle when all series are shown
-        if (!animation) {
-            if (clipRect.count[this.index]) {
-                delete clipRect.count[this.index];
-                clipRect.count.length -= 1;
-            }
-            if (clipRect.count.length === 0) {
-                if (!seriesClipBox) {
-                    chart.sharedClips[sharedClipKey] = clipRect.destroy();
-                }
-                if (markerClipRect) {
-                    chart.sharedClips[sharedClipKey + 'm'] = markerClipRect.destroy();
-                }
-            }
+            sharedClips[sharedClipKey] = clipRect = renderer.clipRect(clipBox);
+            // When setting chart size, or when the series is rendered again before
+            // starting animating, in compliance to a responsive rule
+        }
+        else {
+            clipRect.animate(clipBox);
+        }
+        if (group) {
+            // When clip is false, reset to no clip after animation
+            group.clip(this.options.clip === false ? void 0 : clipRect);
+        }
+        // Unclip temporary animation clip
+        if (markerGroup) {
+            markerGroup.clip();
         }
     };
     /**
      * Animate in the series. Called internally twice. First with the `init`
      * parameter set to true, which sets up the initial state of the
      * animation. Then when ready, it is called with the `init` parameter
-     * undefined, in order to perform the actual animation. After the
-     * second run, the function is removed.
+     * undefined, in order to perform the actual animation.
      *
      * @function Highcharts.Series#animate
      *
@@ -1719,25 +1643,68 @@ var Series = /** @class */ (function () {
      * Initialize the animation.
      */
     Series.prototype.animate = function (init) {
-        var series = this, chart = series.chart, animation = animObject(series.options.animation), sharedClipKey = this.sharedClipKey;
+        var _a = this, chart = _a.chart, group = _a.group, markerGroup = _a.markerGroup, inverted = chart.inverted, animation = animObject(this.options.animation), 
+        // The key for temporary animation clips
+        animationClipKey = [
+            this.getSharedClipKey(),
+            animation.duration,
+            animation.easing,
+            animation.defer
+        ].join(',');
+        var animationClipRect = chart.sharedClips[animationClipKey], markerAnimationClipRect = chart.sharedClips[animationClipKey + 'm'];
         // Initialize the animation. Set up the clipping rectangle.
-        if (init) {
-            series.setClip(animation);
+        if (init && group) {
+            var clipBox = this.getClipBox();
+            // Create temporary animation clips
+            if (!animationClipRect) {
+                clipBox.width = 0;
+                if (inverted) {
+                    clipBox.x = chart.plotHeight;
+                }
+                animationClipRect = chart.renderer.clipRect(clipBox);
+                chart.sharedClips[animationClipKey] = animationClipRect;
+                var markerClipBox = {
+                    // Include the width of the first marker
+                    x: inverted ? (chart.plotSizeX || 0) + 99 : -99,
+                    y: inverted ? -chart.plotLeft : -chart.plotTop,
+                    width: 99,
+                    height: inverted ? chart.chartWidth : chart.chartHeight
+                };
+                markerAnimationClipRect = chart.renderer.clipRect(markerClipBox);
+                chart.sharedClips[animationClipKey + 'm'] = markerAnimationClipRect;
+            }
+            else {
+                // When height changes during animation, typically due to
+                // responsive settings
+                animationClipRect.attr('height', clipBox.height);
+            }
+            group.clip(animationClipRect);
+            if (markerGroup) {
+                markerGroup.clip(markerAnimationClipRect);
+            }
             // Run the animation
         }
-        else if (sharedClipKey) {
-            var clipRect = chart.sharedClips[sharedClipKey];
-            var markerClipRect = chart.sharedClips[sharedClipKey + 'm'];
-            var finalBox = series.getClipBox(animation, true);
-            if (clipRect) {
-                clipRect.animate(finalBox, animation);
-            }
-            if (markerClipRect) {
-                markerClipRect.animate({
-                    width: finalBox.width + 99,
-                    x: finalBox.x - (chart.inverted ? 0 : 99)
-                }, animation);
+        else if (animationClipRect &&
+            // Only first series in this pane
+            !animationClipRect.hasClass('highcharts-animating')) {
+            var finalBox = this.getClipBox(), step_1 = animation.step;
+            // Only do this when there are actually markers
+            if (markerGroup && markerGroup.element.childNodes.length) {
+                // To provide as smooth animation as possible, update the marker
+                // group clipping in steps of the main group animation
+                animation.step = function (val, fx) {
+                    if (step_1) {
+                        step_1.apply(fx, arguments);
+                    }
+                    if (markerAnimationClipRect &&
+                        markerAnimationClipRect.element) {
+                        markerAnimationClipRect.attr(fx.prop, fx.prop === 'width' ? val + 99 : val);
+                    }
+                };
             }
+            animationClipRect
+                .addClass('highcharts-animating')
+                .animate(finalBox, animation);
         }
     };
     /**
@@ -1746,12 +1713,20 @@ var Series = /** @class */ (function () {
      * @private
      * @function Highcharts.Series#afterAnimate
      *
-     * @fires Highcharts.Series#event:afterAnimate
+     * @emits Highcharts.Series#event:afterAnimate
      */
     Series.prototype.afterAnimate = function () {
+        var _this = this;
         this.setClip();
-        fireEvent(this, 'afterAnimate');
+        // Destroy temporary clip rectangles that are no longer in use
+        objectEach(this.chart.sharedClips, function (clip, key, sharedClips) {
+            if (clip && !_this.chart.container.querySelector("[clip-path=\"url(#" + clip.id + ")\"]")) {
+                clip.destroy();
+                delete sharedClips[key];
+            }
+        });
         this.finishedAnimating = true;
+        fireEvent(this, 'afterAnimate');
     };
     /**
      * Draw the markers for line-like series types, and columns or other
@@ -1927,7 +1902,7 @@ var Series = /** @class */ (function () {
         // Handle hover and select states
         state = state || 'normal';
         if (state) {
-            seriesStateOptions = seriesMarkerOptions.states[state];
+            seriesStateOptions = (seriesMarkerOptions.states[state] || {});
             pointStateOptions = (pointMarkerOptions.states &&
                 pointMarkerOptions.states[state]) || {};
             strokeWidth = pick(pointStateOptions.lineWidth, seriesStateOptions.lineWidth, strokeWidth + pick(pointStateOptions.lineWidthPlus, seriesStateOptions.lineWidthPlus, 0));
@@ -1952,7 +1927,7 @@ var Series = /** @class */ (function () {
      * @private
      * @function Highcharts.Series#destroy
      *
-     * @fires Highcharts.Series#event:destroy
+     * @emits Highcharts.Series#event:destroy
      */
     Series.prototype.destroy = function (keepEventsForUpdate) {
         var series = this, chart = series.chart, issue134 = /AppleWebKit\/533/.test(win.navigator.userAgent), data = series.data || [];
@@ -2218,8 +2193,6 @@ var Series = /** @class */ (function () {
      * Get the translation and scale for the plot area of this series.
      *
      * @function Highcharts.Series#getPlotBox
-     *
-     * @return {Highcharts.SeriesPlotBoxObject}
      */
     Series.prototype.getPlotBox = function () {
         var chart = this.chart;
@@ -2263,7 +2236,7 @@ var Series = /** @class */ (function () {
      *
      * @function Highcharts.Series#render
      *
-     * @fires Highcharts.Series#event:afterRender
+     * @emits Highcharts.Series#event:afterRender
      */
     Series.prototype.render = function () {
         var series = this, chart = series.chart, options = series.options, animOptions = animObject(options.animation), visibility = series.visible ?
@@ -2271,15 +2244,18 @@ var Series = /** @class */ (function () {
         zIndex = options.zIndex, hasRendered = series.hasRendered, chartSeriesGroup = chart.seriesGroup, inverted = chart.inverted;
         // Animation doesn't work in IE8 quirks when the group div is
         // hidden, and looks bad in other oldIE
-        var animDuration = (!series.finishedAnimating &&
-            chart.renderer.isSVG &&
-            animOptions.duration);
+        var animDuration = (!series.finishedAnimating && chart.renderer.isSVG) ?
+            animOptions.duration : 0;
         fireEvent(this, 'render');
         // the group
         var group = series.plotGroup('group', 'series', visibility, zIndex, chartSeriesGroup);
         series.markerGroup = series.plotGroup('markerGroup', 'markers', visibility, zIndex, chartSeriesGroup);
-        // initiate the animation
-        if (animDuration && series.animate) {
+        // Initial clipping, applies to columns etc. (#3839).
+        if (options.clip !== false) {
+            series.setClip();
+        }
+        // Initialize the animation
+        if (series.animate && animDuration) {
             series.animate(true);
         }
         // SVGRenderer needs to know this before drawing elements (#1089,
@@ -2295,11 +2271,6 @@ var Series = /** @class */ (function () {
         if (series.visible) {
             series.drawPoints();
         }
-        /* series.points.forEach(function (point) {
-            if (point.redraw) {
-                point.redraw();
-            }
-        }); */
         // Draw the data labels
         if (series.drawDataLabels) {
             series.drawDataLabels();
@@ -2316,15 +2287,8 @@ var Series = /** @class */ (function () {
         }
         // Handle inverted series and tracker groups
         series.invertGroups(inverted);
-        // Initial clipping, must be defined after inverting groups for VML.
-        // Applies to columns etc. (#3839).
-        if (options.clip !== false &&
-            !series.sharedClipKey &&
-            !hasRendered) {
-            group.clip(chart.clipRect);
-        }
         // Run the animation
-        if (animDuration && series.animate) {
+        if (series.animate && animDuration) {
             series.animate();
         }
         // Call the afterAnimate function on animation complete (but don't
@@ -2541,12 +2505,12 @@ var Series = /** @class */ (function () {
      * @function Highcharts.Series#isPointInside
      */
     Series.prototype.isPointInside = function (point) {
-        var isInside = typeof point.plotY !== 'undefined' &&
+        var _a = this, chart = _a.chart, xAxis = _a.xAxis, yAxis = _a.yAxis, isInside = (typeof point.plotY !== 'undefined' &&
             typeof point.plotX !== 'undefined' &&
             point.plotY >= 0 &&
-            point.plotY <= this.yAxis.len && // #3519
+            point.plotY <= (yAxis ? yAxis.len : chart.plotHeight) &&
             point.plotX >= 0 &&
-            point.plotX <= this.xAxis.len;
+            point.plotX <= (xAxis ? xAxis.len : chart.plotWidth));
         return isInside;
     };
     /**
@@ -2677,7 +2641,7 @@ var Series = /** @class */ (function () {
      * @param {boolean} [withEvent=true]
      *        Used internally, whether to fire the series `addPoint` event.
      *
-     * @fires Highcharts.Series#event:addPoint
+     * @emits Highcharts.Series#event:addPoint
      */
     Series.prototype.addPoint = function (options, redraw, shift, animation, withEvent) {
         var series = this, seriesOptions = series.options, data = series.data, chart = series.chart, xAxis = series.xAxis, names = xAxis && xAxis.hasNames && xAxis.names, dataOptions = seriesOptions.data, xData = series.xData;
@@ -2761,7 +2725,7 @@ var Series = /** @class */ (function () {
      * @param {boolean|Partial<Highcharts.AnimationOptionsObject>} [animation]
      *        Whether and optionally how the series should be animated.
      *
-     * @fires Highcharts.Point#event:remove
+     * @emits Highcharts.Point#event:remove
      */
     Series.prototype.removePoint = function (i, redraw, animation) {
         var series = this, data = series.data, point = data[i], points = series.points, chart = series.chart, remove = function () {
@@ -2810,7 +2774,7 @@ var Series = /** @class */ (function () {
      * @param {boolean} [withEvent=true]
      *        Used internally, whether to fire the series `remove` event.
      *
-     * @fires Highcharts.Series#event:remove
+     * @emits Highcharts.Series#event:remove
      */
     Series.prototype.remove = function (redraw, animation, withEvent, keepEvents) {
         var series = this, chart = series.chart;
@@ -2859,8 +2823,8 @@ var Series = /** @class */ (function () {
      *        more operations on the chart, it is a good idea to set redraw to
      *        false and call {@link Chart#redraw} after.
      *
-     * @fires Highcharts.Series#event:update
-     * @fires Highcharts.Series#event:afterUpdate
+     * @emits Highcharts.Series#event:update
+     * @emits Highcharts.Series#event:afterUpdate
      */
     Series.prototype.update = function (options, redraw) {
         options = cleanRecursively(options, this.userOptions);
@@ -2933,7 +2897,9 @@ var Series = /** @class */ (function () {
                 series.index : oldOptions.index,
             pointStart: pick(
             // when updating from blank (#7933)
-            plotOptions && plotOptions.series && plotOptions.series.pointStart, oldOptions.pointStart, 
+            (plotOptions &&
+                plotOptions.series &&
+                plotOptions.series.pointStart), oldOptions.pointStart, 
             // when updating after addPoint
             series.xData[0])
         }, (!keepPoints && { data: series.options.data }), options);
@@ -2963,8 +2929,7 @@ var Series = /** @class */ (function () {
                     // Legacy (IE < 11)
                 }
                 else {
-                    var ownEvents = Object.hasOwnProperty.call(series, 'hcEvents') &&
-                        series.hcEvents;
+                    var ownEvents = Object.hasOwnProperty.call(series, 'hcEvents') && series.hcEvents;
                     for (n in initialSeriesProto) { // eslint-disable-line guard-for-in
                         series[n] = void 0;
                     }
@@ -3058,13 +3023,17 @@ var Series = /** @class */ (function () {
             return option !== oldOption;
         }
         return option !==
-            pick(plotOptions && plotOptions[this.type] && plotOptions[this.type][optionName], plotOptions && plotOptions.series && plotOptions.series[optionName], option);
+            pick(plotOptions &&
+                plotOptions[this.type] &&
+                plotOptions[this.type][optionName], plotOptions &&
+                plotOptions.series &&
+                plotOptions.series[optionName], option);
     };
     /**
      * Runs on mouse over the series graphical items.
      *
      * @function Highcharts.Series#onMouseOver
-     * @fires Highcharts.Series#event:mouseOver
+     * @emits Highcharts.Series#event:mouseOver
      */
     Series.prototype.onMouseOver = function () {
         var series = this, chart = series.chart, hoverSeries = chart.hoverSeries, pointer = chart.pointer;
@@ -3093,7 +3062,7 @@ var Series = /** @class */ (function () {
      *
      * @function Highcharts.Series#onMouseOut
      *
-     * @fires Highcharts.Series#event:mouseOut
+     * @emits Highcharts.Series#event:mouseOut
      */
     Series.prototype.onMouseOut = function () {
         // trigger the event only if listeners exist
@@ -3236,8 +3205,8 @@ var Series = /** @class */ (function () {
      * operations on the chart, it is a good idea to set redraw to false and
      * call {@link Chart#redraw|chart.redraw()} after.
      *
-     * @fires Highcharts.Series#event:hide
-     * @fires Highcharts.Series#event:show
+     * @emits Highcharts.Series#event:hide
+     * @emits Highcharts.Series#event:show
      */
     Series.prototype.setVisible = function (vis, redraw) {
         var series = this, chart = series.chart, legendItem = series.legendItem, ignoreHiddenSeries = chart.options.chart.ignoreHiddenSeries, oldVisibility = series.visible;
@@ -3297,7 +3266,7 @@ var Series = /** @class */ (function () {
      *         Toggle visibility from a button
      *
      * @function Highcharts.Series#show
-     * @fires Highcharts.Series#event:show
+     * @emits Highcharts.Series#event:show
      */
     Series.prototype.show = function () {
         this.setVisible(true);
@@ -3311,7 +3280,7 @@ var Series = /** @class */ (function () {
      *         Toggle visibility from a button
      *
      * @function Highcharts.Series#hide
-     * @fires Highcharts.Series#event:hide
+     * @emits Highcharts.Series#event:hide
      */
     Series.prototype.hide = function () {
         this.setVisible(false);
@@ -3332,8 +3301,8 @@ var Series = /** @class */ (function () {
      * True to select the series, false to unselect. If undefined, the selection
      * state is toggled.
      *
-     * @fires Highcharts.Series#event:select
-     * @fires Highcharts.Series#event:unselect
+     * @emits Highcharts.Series#event:select
+     * @emits Highcharts.Series#event:unselect
      */
     Series.prototype.select = function (selected) {
         var series = this;
@@ -3351,10 +3320,6 @@ var Series = /** @class */ (function () {
      * Checks if a tooltip should be shown for a given point.
      *
      * @private
-     * @param {number} plotX
-     * @param {number} plotY
-     * @param {Highcharts.ChartIsInsideOptionsObject} [options]
-     * @return {boolean}
      */
     Series.prototype.shouldShowTooltip = function (plotX, plotY, options) {
         if (options === void 0) { options = {}; }