highcharts 8.1.0 → 8.2.2

package/es-modules/{parts/Series.js → Core/Series/CartesianSeries.js}

@@ -7,13 +7,17 @@
  *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
  *
  * */
-'use strict';
-import LegendSymbolMixin from '../mixins/legend-symbol.js';
-import H from './Globals.js';
-import './Options.js';
+import A from '../Animation/AnimationUtilities.js';
+var animObject = A.animObject;
+import BaseSeries from './Series.js';
+import H from '../Globals.js';
+import LegendSymbolMixin from '../../Mixins/LegendSymbol.js';
+import O from '../Options.js';
+var defaultOptions = O.defaultOptions;
 import Point from './Point.js';
-import './SvgRenderer.js';
-import U from './Utilities.js';
+import SVGElement from '../Renderer/SVG/SVGElement.js';
+import U from '../Utilities.js';
+var addEvent = U.addEvent, arrayMax = U.arrayMax, arrayMin = U.arrayMin, clamp = U.clamp, correctFloat = U.correctFloat, defined = U.defined, erase = U.erase, error = U.error, extend = U.extend, find = U.find, fireEvent = U.fireEvent, getNestedProperty = U.getNestedProperty, isArray = U.isArray, isFunction = U.isFunction, isNumber = U.isNumber, isString = U.isString, merge = U.merge, objectEach = U.objectEach, pick = U.pick, removeEvent = U.removeEvent, splat = U.splat, syncTimeout = U.syncTimeout;
 /**
  * This is a placeholder type of the possible series options for
  * [Highcharts](../highcharts/series), [Highstock](../highstock/series),
@@ -231,8 +235,7 @@ import U from './Utilities.js';
  * @typedef {"hover"|"inactive"|"normal"|"select"} Highcharts.SeriesStateValue
  */
 ''; // detach doclets above
-var addEvent = U.addEvent, animObject = U.animObject, arrayMax = U.arrayMax, arrayMin = U.arrayMin, clamp = U.clamp, correctFloat = U.correctFloat, defined = U.defined, erase = U.erase, error = U.error, extend = U.extend, find = U.find, fireEvent = U.fireEvent, getNestedProperty = U.getNestedProperty, isArray = U.isArray, isFunction = U.isFunction, isNumber = U.isNumber, isString = U.isString, merge = U.merge, objectEach = U.objectEach, pick = U.pick, removeEvent = U.removeEvent, seriesType = U.seriesType, splat = U.splat, syncTimeout = U.syncTimeout;
-var defaultOptions = H.defaultOptions, defaultPlotOptions = H.defaultPlotOptions, seriesTypes = H.seriesTypes, SVGElement = H.SVGElement, win = H.win;
+var seriesTypes = BaseSeries.seriesTypes, win = H.win;
 /**
  * This is the base series prototype that all other series types inherit from.
  * A new series is initialized either through the
@@ -297,7 +300,7 @@ var defaultOptions = H.defaultOptions, defaultPlotOptions = H.defaultPlotOptions
 *
 * @augments Highcharts.Series
 */
-H.Series = seriesType('line', 
+var CartesianSeries = BaseSeries.seriesType('line', 
 /**
  * Series options for specific data and the data itself. In TypeScript you
  * have to cast the series options to specific series types, to get all
@@ -428,7 +431,7 @@ H.Series = seriesType('line',
  * @product   highcharts highstock
  * @apioption series.zIndex
  */
-null, 
+void 0, 
 /**
  * General options for all series types.
  *
@@ -541,6 +544,8 @@ null,
      * #chart.animation) and the animation parameter under the API methods.
      * The following properties are supported:
      *
+     * - `defer`: The animation delay time in milliseconds.
+     *
      * - `duration`: The duration of the animation in milliseconds.
      *
      * - `easing`: Can be a string reference to an easing function set on
@@ -565,7 +570,7 @@ null,
      * @sample {highmaps} maps/plotoptions/mapbubble-animation-false/
      *         Disabled on mapbubble series
      *
-     * @type    {boolean|Highcharts.AnimationOptionsObject}
+     * @type    {boolean|Partial<Highcharts.AnimationOptionsObject>}
      * @default {highcharts} true
      * @default {highstock} true
      * @default {highmaps} false
@@ -576,6 +581,12 @@ null,
         /** @internal */
         duration: 1000
     },
+    /**
+     * @default   0
+     * @type      {number}
+     * @since     8.2.0
+     * @apioption plotOptions.series.animation.defer
+     */
     /**
      * An additional class name to apply to the series' graphical elements.
      * This option does not replace default class names of the graphical
@@ -1054,11 +1065,15 @@ null,
     /**
      * Whether to stack the values of each series on top of each other.
      * Possible values are `undefined` to disable, `"normal"` to stack by
-     * value or `"percent"`. When stacking is enabled, data must be sorted
-     * in ascending X order. A special stacking option is with the
-     * streamgraph series type, where the stacking option is set to
-     * `"stream"`. The second one is `"overlap"`, which only applies to
-     * waterfall series.
+     * value or `"percent"`.
+     *
+     * When stacking is enabled, data must be sorted
+     * in ascending X order.
+     *
+     * Some stacking options are related to specific series types. In the
+     * streamgraph series type, the stacking option is set to `"stream"`.
+     * The second one is `"overlap"`, which only applies to waterfall
+     * series.
      *
      * @see [yAxis.reversedStacks](#yAxis.reversedStacks)
      *
@@ -1418,7 +1433,7 @@ null,
                 /**
                  * Animation when returning to normal state after hovering.
                  *
-                 * @type {boolean|Highcharts.AnimationOptionsObject}
+                 * @type {boolean|Partial<Highcharts.AnimationOptionsObject>}
                  */
                 animation: true
             },
@@ -1431,7 +1446,7 @@ null,
                 /**
                  * Animation when hovering over the marker.
                  *
-                 * @type {boolean|Highcharts.AnimationOptionsObject}
+                 * @type {boolean|Partial<Highcharts.AnimationOptionsObject>}
                  */
                 animation: {
                     /** @internal */
@@ -1711,6 +1726,34 @@ null,
      * @private
      */
     dataLabels: {
+        /**
+         * Enable or disable the initial animation when a series is
+         * displayed for the `dataLabels`. The animation can also be set as
+         * a configuration object. Please note that this option only
+         * applies to the initial animation.
+         * For other animations, see [chart.animation](#chart.animation)
+         * and the animation parameter under the API methods.
+         * The following properties are supported:
+         *
+         * - `defer`: The animation delay time in milliseconds.
+         *
+         * @sample {highcharts} highcharts/plotoptions/animation-defer/
+         *          Animation defer settings
+         *
+         * @type      {boolean|Partial<Highcharts.AnimationOptionsObject>}
+         * @since     8.2.0
+         * @apioption plotOptions.series.dataLabels.animation
+         */
+        animation: {},
+        /**
+         * The animation delay time in milliseconds.
+         * Set to `0` renders dataLabel immediately.
+         * As `undefined` inherits defer time from the [series.animation.defer](#plotOptions.series.animation.defer).
+         *
+         * @type      {number}
+         * @since     8.2.0
+         * @apioption plotOptions.series.dataLabels.animation.defer
+         */
         /**
          * The alignment of the data label compared to the point. If
          * `right`, the right side of the label should be touching the
@@ -1834,14 +1877,17 @@ null,
          */
         /**
          * Whether to defer displaying the data labels until the initial
-         * series animation has finished.
+         * series animation has finished. Setting to `false` renders the
+         * data label immediately. If set to `true` inherits the defer
+         * time set in [plotOptions.series.animation](#plotOptions.series.animation).
+         *
+         * @sample highcharts/plotoptions/animation-defer
+         *         Set defer time
          *
-         * @type      {boolean}
-         * @default   true
          * @since     4.0.0
          * @product   highcharts highstock gantt
-         * @apioption plotOptions.series.dataLabels.defer
          */
+        defer: true,
         /**
          * Enable or disable the data labels.
          *
@@ -2226,7 +2272,7 @@ null,
             /**
              * Animation when returning to normal state after hovering.
              *
-             * @type {boolean|Highcharts.AnimationOptionsObject}
+                 * @type {boolean|Partial<Highcharts.AnimationOptionsObject>}
              */
             animation: true
         },
@@ -2256,7 +2302,7 @@ null,
             /**
              * Animation setting for hovering the graph in line-type series.
              *
-             * @type    {boolean|Highcharts.AnimationOptionsObject}
+             * @type {boolean|Partial<Highcharts.AnimationOptionsObject>}
              * @since   5.0.8
              * @product highcharts highstock
              */
@@ -2405,7 +2451,7 @@ null,
             /**
              * The animation for entering the inactive state.
              *
-             * @type {boolean|Highcharts.AnimationOptionsObject}
+             * @type {boolean|Partial<Highcharts.AnimationOptionsObject>}
              */
             animation: {
                 /** @internal */
@@ -2456,7 +2502,8 @@ null,
      * @excluding animation, backgroundColor, borderColor, borderRadius,
      *            borderWidth, className, crosshairs, enabled, formatter,
      *            headerShape, hideDelay, outside, padding, positioner,
-     *            shadow, shape, shared, snap, split, style, useHTML
+     *            shadow, shape, shared, snap, split, stickOnContact,
+     *            style, useHTML
      * @apioption plotOptions.series.tooltip
      */
     /**
@@ -2623,7 +2670,6 @@ null,
     colorCounter: 0,
     cropShoulder: 1,
     directTouch: false,
-    eventsToUnbind: [],
     isCartesian: true,
     // each point's x and y values are stored in this.xData and this.yData
     parallelArrays: ['x', 'y'],
@@ -2637,6 +2683,10 @@ null,
         // programmatically). These are updated through Series.update()
         // (#10861).
         this.eventOptions = this.eventOptions || {};
+        // The 'eventsToUnbind' property moved from prototype into the
+        // Series init to avoid reference to the same array between
+        // the different series and charts. #12959, #13937
+        this.eventsToUnbind = [];
         /**
          * Read only. The chart that the series belongs to.
          *
@@ -2732,6 +2782,7 @@ null,
             lastSeries = chartSeries[chartSeries.length - 1];
         }
         series._i = pick(lastSeries && lastSeries._i, -1) + 1;
+        series.opacity = series.options.opacity;
         // Insert the series and re-order all series above the insertion
         // point.
         chart.orderSeries(this.insert(chartSeries));
@@ -2971,6 +3022,11 @@ null,
         // These may be modified by the event
         var typeOptions = e.plotOptions[this.type], userPlotOptions = (userOptions.plotOptions || {});
         // use copy to prevent undetected changes (#9762)
+        /**
+         * Contains series options by the user without defaults.
+         * @name Highcharts.Series#userOptions
+         * @type {Highcharts.SeriesOptionsType}
+         */
         this.userOptions = e.userOptions;
         options = merge(typeOptions, plotOptions.series, 
         // #3881, chart instance plotOptions[type] should trump
@@ -3099,7 +3155,7 @@ null,
         }
         else {
             this.getCyclic('color', this.options.color ||
-                defaultPlotOptions[this.type].color, this.chart.options.colors);
+                defaultOptions.plotOptions[this.type].color, this.chart.options.colors);
         }
     },
     /**
@@ -3328,7 +3384,7 @@ null,
      *        doing more operations on the chart, it is a good idea to set
      *        redraw to false and call {@link Chart#redraw} after.
      *
-     * @param {boolean|Highcharts.AnimationOptionsObject} [animation]
+     * @param {boolean|Partial<Highcharts.AnimationOptionsObject>} [animation]
      *        When the updated data is the same length as the existing data,
      *        points will be updated by default, and animation visualizes
      *        how the points are changed. Set false to disable animation, or
@@ -3664,7 +3720,6 @@ null,
      *
      * @private
      * @function Highcharts.Series#generatePoints
-     * @return {void}
      */
     generatePoints: function () {
         var series = this, options = series.options, dataOptions = options.data, data = series.data, dataLength, processedXData = series.processedXData, processedYData = series.processedYData, PointClass = series.pointClass, processedDataLength = processedXData.length, cropStart = series.cropStart || 0, cursor, hasGroupedData = series.hasGroupedData, keys = options.keys, point, points = [], i;
@@ -3869,16 +3924,20 @@ null,
     applyExtremes: function () {
         var dataExtremes = this.getExtremes();
         /**
-         * Contains the minimum value of the series' data point.
+         * Contains the minimum value of the series' data point. Some series
+         * types like `networkgraph` do not support this property as they
+         * lack a `y`-value.
          * @name Highcharts.Series#dataMin
-         * @type {number}
+         * @type {number|undefined}
          * @readonly
          */
         this.dataMin = dataExtremes.dataMin;
-        /* *
-         * Contains the maximum value of the series' data point.
+        /**
+         * Contains the maximum value of the series' data point. Some series
+         * types like `networkgraph` do not support this property as they
+         * lack a `y`-value.
          * @name Highcharts.Series#dataMax
-         * @type {number}
+         * @type {number|undefined}
          * @readonly
          */
         this.dataMax = dataExtremes.dataMax;
@@ -3935,10 +3994,8 @@ null,
                     (stackThreshold ? 0 : threshold) ?
                 '-' :
                 '') + series.stackKey], pointStack, stackValues;
-            // Discard disallowed y values for log axes (#3434)
-            if (yAxis.positiveValuesOnly &&
-                yValue !== null &&
-                yValue <= 0) {
+            if (yAxis.positiveValuesOnly && !yAxis.validatePositiveValue(yValue) ||
+                xAxis.positiveValuesOnly && !xAxis.validatePositiveValue(xValue)) {
                 point.isNull = true;
             }
             // Get the plotX translation
@@ -4066,14 +4123,14 @@ null,
      *
      * @private
      * @function Highcharts.Series#getClip
-     * @param  {boolean|Highcharts.AnimationOptionsObject} [animation]
+     * @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>}
      */
     getClipBox: function (animation, finalBox) {
-        var series = this, options = series.options, chart = series.chart, inverted = chart.inverted, xAxis = series.xAxis, yAxis = xAxis && series.yAxis, clipBox;
+        var series = this, options = series.options, chart = series.chart, inverted = chart.inverted, xAxis = series.xAxis, yAxis = xAxis && series.yAxis, clipBox, scrollablePlotAreaOptions = chart.options.chart.scrollablePlotArea || {};
         if (animation && options.clip === false && yAxis) {
             // support for not clipped series animation (#10450)
             clipBox = inverted ? {
@@ -4094,7 +4151,8 @@ null,
             clipBox = series.clipBox || chart.clipBox;
             if (finalBox) {
                 clipBox.width = chart.plotSizeX;
-                clipBox.x = 0;
+                clipBox.x = (chart.scrollablePixelsX || 0) *
+                    (scrollablePlotAreaOptions.scrollPositionX || 0);
             }
         }
         return !finalBox ? clipBox : {
@@ -4110,7 +4168,6 @@ null,
      * @private
      * @function Highcharts.Series#setClip
      * @param {boolean|Highcharts.AnimationOptionsObject} [animation]
-     * @return {void}
      */
     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.sharedClipKey ||
@@ -4191,8 +4248,6 @@ null,
      *
      * @param {boolean} [init]
      *        Initialize the animation.
-     *
-     * @return {void}
      */
     animate: function (init) {
         var series = this, chart = series.chart, animation = animObject(series.options.animation), clipRect, sharedClipKey, finalBox;
@@ -4223,7 +4278,6 @@ null,
      *
      * @private
      * @function Highcharts.Series#afterAnimate
-     * @return {void}
      * @fires Highcharts.Series#event:afterAnimate
      */
     afterAnimate: function () {
@@ -4607,8 +4661,6 @@ null,
      * positions and attributes.
      *
      * @function Highcharts.Series#drawGraph
-     *
-     * @return {void}
      */
     drawGraph: function () {
         var series = this, options = this.options, graphPath = (this.gappedPath || this.getGraphPath).call(this), styledMode = this.chart.styledMode, props = [[
@@ -4889,14 +4941,20 @@ null,
      * @return {Highcharts.SVGElement}
      */
     plotGroup: function (prop, name, visibility, zIndex, parent) {
-        var group = this[prop], isNew = !group;
+        var group = this[prop], isNew = !group, attrs = {
+            visibility: visibility,
+            zIndex: zIndex || 0.1 // IE8 and pointer logic use this
+        };
+        // Avoid setting undefined opacity, or in styled mode
+        if (typeof this.opacity !== 'undefined' &&
+            !this.chart.styledMode && this.state !== 'inactive' // #13719
+        ) {
+            attrs.opacity = this.opacity;
+        }
         // Generate it on first call
         if (isNew) {
             this[prop] = group = this.chart.renderer
                 .g()
-                .attr({
-                zIndex: zIndex || 0.1 // IE8 and pointer logic use this
-            })
                 .add(parent);
         }
         // Add the class names, and replace existing ones as response to
@@ -4912,7 +4970,7 @@ null,
                 ' highcharts-tracker' :
                 '')), true);
         // Place it on first and subsequent (redraw) calls
-        group.attr({ visibility: visibility })[isNew ? 'attr' : 'animate'](this.getPlotBox());
+        group.attr(attrs)[isNew ? 'attr' : 'animate'](this.getPlotBox());
         return group;
     },
     /**
@@ -4971,12 +5029,12 @@ null,
      * @fires Highcharts.Series#event:afterRender
      */
     render: function () {
-        var series = this, chart = series.chart, group, options = series.options, 
+        var series = this, chart = series.chart, group, options = series.options, animOptions = animObject(options.animation), 
         // Animation doesn't work in IE8 quirks when the group div is
         // hidden, and looks bad in other oldIE
         animDuration = (!series.finishedAnimating &&
             chart.renderer.isSVG &&
-            animObject(options.animation).duration), visibility = series.visible ? 'inherit' : 'hidden', // #2597
+            animOptions.duration), visibility = series.visible ? 'inherit' : 'hidden', // #2597
         zIndex = options.zIndex, hasRendered = series.hasRendered, chartSeriesGroup = chart.seriesGroup, inverted = chart.inverted;
         fireEvent(this, 'render');
         // the group
@@ -5035,6 +5093,11 @@ null,
         // overwrite the animation.complete option which should be available
         // to the user).
         if (!hasRendered) {
+            // Additional time if defer is defined before afterAnimate
+            // will be triggered
+            if (animDuration && animOptions.defer) {
+                animDuration += animOptions.defer;
+            }
             series.animationTimeout = syncTimeout(function () {
                 series.afterAnimate();
             }, animDuration || 0);
@@ -5487,3 +5550,4 @@ null,
  * @apioption series.line.data.marker
  */
 ''; // include precedent doclets in transpilat
+export default CartesianSeries;

package/es-modules/{parts → Core/Series}/DataLabels.js

@@ -8,7 +8,13 @@
  *
  * */
 'use strict';
-import H from './Globals.js';
+import A from '../Animation/AnimationUtilities.js';
+var getDeferredAnimation = A.getDeferredAnimation;
+import H from '../Globals.js';
+var noop = H.noop, seriesTypes = H.seriesTypes;
+import CartesianSeries from './CartesianSeries.js';
+import U from '../Utilities.js';
+var arrayMax = U.arrayMax, clamp = U.clamp, defined = U.defined, extend = U.extend, fireEvent = U.fireEvent, format = U.format, isArray = U.isArray, merge = U.merge, objectEach = U.objectEach, pick = U.pick, relativeLength = U.relativeLength, splat = U.splat, stableSort = U.stableSort;
 /**
  * Callback JavaScript function to format the data label as a string. Note that
  * if a `format` is defined, the format takes precedence and the formatter is
@@ -30,10 +36,7 @@ import H from './Globals.js';
  *
  * @typedef {"allow"|"justify"} Highcharts.DataLabelsOverflowValue
  */
-import U from './Utilities.js';
-var animObject = U.animObject, arrayMax = U.arrayMax, clamp = U.clamp, defined = U.defined, extend = U.extend, fireEvent = U.fireEvent, format = U.format, isArray = U.isArray, merge = U.merge, objectEach = U.objectEach, pick = U.pick, relativeLength = U.relativeLength, splat = U.splat, stableSort = U.stableSort;
-import './Series.js';
-var noop = H.noop, Series = H.Series, seriesTypes = H.seriesTypes;
+''; // detach doclets above
 /* eslint-disable valid-jsdoc */
 /**
  * General distribution algorithm for distributing labels of differing size
@@ -169,8 +172,10 @@ H.distribute = function (boxes, len, maxDistance) {
  * @return {void}
  * @fires Highcharts.Series#event:afterDrawDataLabels
  */
-Series.prototype.drawDataLabels = function () {
-    var series = this, chart = series.chart, seriesOptions = series.options, seriesDlOptions = seriesOptions.dataLabels, points = series.points, pointOptions, hasRendered = series.hasRendered || 0, dataLabelsGroup, seriesAnimDuration = animObject(seriesOptions.animation).duration, fadeInDuration = Math.min(seriesAnimDuration, 200), defer = !chart.renderer.forExport && pick(seriesDlOptions.defer, fadeInDuration > 0), renderer = chart.renderer;
+CartesianSeries.prototype.drawDataLabels = function () {
+    var series = this, chart = series.chart, seriesOptions = series.options, seriesDlOptions = seriesOptions.dataLabels, points = series.points, pointOptions, hasRendered = series.hasRendered || 0, dataLabelsGroup, dataLabelAnim = seriesDlOptions.animation, animationConfig = seriesDlOptions.defer ?
+        getDeferredAnimation(chart, dataLabelAnim, series) :
+        { defer: 0, duration: 0 }, renderer = chart.renderer;
     /**
      * Handle the dataLabels.filter option.
      * @private
@@ -233,20 +238,16 @@ Series.prototype.drawDataLabels = function () {
         seriesDlOptions.enabled ||
         series._hasPointLabels) {
         // Create a separate group for the data labels to avoid rotation
-        dataLabelsGroup = series.plotGroup('dataLabelsGroup', 'data-labels', defer && !hasRendered ? 'hidden' : 'inherit', // #5133, #10220
+        dataLabelsGroup = series.plotGroup('dataLabelsGroup', 'data-labels', !hasRendered ? 'hidden' : 'inherit', // #5133, #10220
         seriesDlOptions.zIndex || 6);
-        if (defer) {
-            dataLabelsGroup.attr({ opacity: +hasRendered }); // #3300
-            if (!hasRendered) {
-                setTimeout(function () {
-                    var group = series.dataLabelsGroup;
-                    if (group) {
-                        if (series.visible) { // #2597, #3023, #3024
-                            dataLabelsGroup.show(true);
-                        }
-                        group[seriesOptions.animation ? 'animate' : 'attr']({ opacity: 1 }, { duration: fadeInDuration });
-                    }
-                }, seriesAnimDuration - fadeInDuration);
+        dataLabelsGroup.attr({ opacity: +hasRendered }); // #3300
+        if (!hasRendered) {
+            var group = series.dataLabelsGroup;
+            if (group) {
+                if (series.visible) { // #2597, #3023, #3024
+                    dataLabelsGroup.show(true);
+                }
+                group[seriesOptions.animation ? 'animate' : 'attr']({ opacity: 1 }, animationConfig);
             }
         }
         // Make the labels for each point
@@ -411,7 +412,7 @@ Series.prototype.drawDataLabels = function () {
  * @param {boolean} [isNew]
  * @return {void}
  */
-Series.prototype.alignDataLabel = function (point, dataLabel, options, alignTo, isNew) {
+CartesianSeries.prototype.alignDataLabel = function (point, dataLabel, options, alignTo, isNew) {
     var series = this, chart = this.chart, inverted = this.isCartesian && chart.inverted, enabledDataSorting = this.enabledDataSorting, plotX = pick(point.dlBox && point.dlBox.centerX, point.plotX, -9999), plotY = pick(point.plotY, -9999), bBox = dataLabel.getBBox(), baseline, rotation = options.rotation, normRotation, negRotation, align = options.align, rotCorr, // rotation correction
     isInsidePlot = chart.isInsidePlot(plotX, Math.round(plotY), inverted), 
     // Math.round for rounding errors (#2683), alignTo to allow column
@@ -454,11 +455,11 @@ Series.prototype.alignDataLabel = function (point, dataLabel, options, alignTo,
             rotCorr = chart.renderer.rotCorr(baseline, rotation); // #3723
             alignAttr = {
                 x: (alignTo.x +
-                    options.x +
+                    (options.x || 0) +
                     alignTo.width / 2 +
                     rotCorr.x),
                 y: (alignTo.y +
-                    options.y +
+                    (options.y || 0) +
                     { top: 0, middle: 0.5, bottom: 1 }[options.verticalAlign] *
                         alignTo.height)
             };
@@ -535,7 +536,7 @@ Series.prototype.alignDataLabel = function (point, dataLabel, options, alignTo,
  *
  * @return {void}
  */
-Series.prototype.setDataLabelStartPos = function (point, dataLabel, isNew, isInside, alignOptions) {
+CartesianSeries.prototype.setDataLabelStartPos = function (point, dataLabel, isNew, isInside, alignOptions) {
     var chart = this.chart, inverted = chart.inverted, xAxis = this.xAxis, reversed = xAxis.reversed, labelCenter = inverted ? dataLabel.height / 2 : dataLabel.width / 2, pointWidth = point.pointWidth, halfWidth = pointWidth ? pointWidth / 2 : 0, startXPos, startYPos;
     startXPos = inverted ?
         alignOptions.x :
@@ -584,59 +585,62 @@ Series.prototype.setDataLabelStartPos = function (point, dataLabel, isNew, isIns
  * @param {boolean} [isNew]
  * @return {boolean|undefined}
  */
-Series.prototype.justifyDataLabel = function (dataLabel, options, alignAttr, bBox, alignTo, isNew) {
+CartesianSeries.prototype.justifyDataLabel = function (dataLabel, options, alignAttr, bBox, alignTo, isNew) {
     var chart = this.chart, align = options.align, verticalAlign = options.verticalAlign, off, justified, padding = dataLabel.box ? 0 : (dataLabel.padding || 0);
+    var _a = options.x, x = _a === void 0 ? 0 : _a, _b = options.y, y = _b === void 0 ? 0 : _b;
     // Off left
     off = alignAttr.x + padding;
     if (off < 0) {
-        if (align === 'right') {
+        if (align === 'right' && x >= 0) {
             options.align = 'left';
             options.inside = true;
         }
         else {
-            options.x = -off;
+            x -= off;
         }
         justified = true;
     }
     // Off right
     off = alignAttr.x + bBox.width - padding;
     if (off > chart.plotWidth) {
-        if (align === 'left') {
+        if (align === 'left' && x <= 0) {
             options.align = 'right';
             options.inside = true;
         }
         else {
-            options.x = chart.plotWidth - off;
+            x += chart.plotWidth - off;
         }
         justified = true;
     }
     // Off top
     off = alignAttr.y + padding;
     if (off < 0) {
-        if (verticalAlign === 'bottom') {
+        if (verticalAlign === 'bottom' && y >= 0) {
             options.verticalAlign = 'top';
             options.inside = true;
         }
         else {
-            options.y = -off;
+            y -= off;
         }
         justified = true;
     }
     // Off bottom
     off = alignAttr.y + bBox.height - padding;
     if (off > chart.plotHeight) {
-        if (verticalAlign === 'top') {
+        if (verticalAlign === 'top' && y <= 0) {
             options.verticalAlign = 'bottom';
             options.inside = true;
         }
         else {
-            options.y = chart.plotHeight - off;
+            y += chart.plotHeight - off;
         }
         justified = true;
     }
     if (justified) {
+        options.x = x;
+        options.y = y;
         dataLabel.placed = !isNew;
-        dataLabel.align(options, null, alignTo);
+        dataLabel.align(options, void 0, alignTo);
     }
     return justified;
 };
@@ -722,7 +726,7 @@ if (seriesTypes.pie) {
             }
         });
         // run parent method
-        Series.prototype.drawDataLabels.apply(series);
+        CartesianSeries.prototype.drawDataLabels.apply(series);
         data.forEach(function (point) {
             if (point.dataLabel) {
                 if (point.visible) { // #407, #2510
@@ -1136,7 +1140,7 @@ if (seriesTypes.column) {
         options.align = pick(options.align, !inverted || inside ? 'center' : below ? 'right' : 'left');
         options.verticalAlign = pick(options.verticalAlign, inverted || inside ? 'middle' : below ? 'top' : 'bottom');
         // Call the parent method
-        Series.prototype.alignDataLabel.call(this, point, dataLabel, options, alignTo, isNew);
+        CartesianSeries.prototype.alignDataLabel.call(this, point, dataLabel, options, alignTo, isNew);
         // If label was justified and we have contrast, set it:
         if (options.inside && point.contrastColor) {
             dataLabel.css({