highcharts 11.3.0 → 11.4.0

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

@@ -8,10 +8,8 @@
  *
  * */
 'use strict';
-import H from '../Globals.js';
-const { composed } = H;
 import U from '../Utilities.js';
-const { addEvent, normalizeTickInterval, pick, pushUnique } = U;
+const { addEvent, normalizeTickInterval, pick } = U;
 /* *
  *
  *  Class
@@ -37,7 +35,7 @@ var LogarithmicAxis;
      * @private
      */
     function compose(AxisClass) {
-        if (pushUnique(composed, compose)) {
+        if (!AxisClass.keepProps.includes('logarithmic')) {
             AxisClass.keepProps.push('logarithmic');
             addEvent(AxisClass, 'init', onInit);
             addEvent(AxisClass, 'afterInit', onAfterInit);

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

@@ -9,9 +9,9 @@
  * */
 'use strict';
 import H from '../Globals.js';
-const { composed, isTouchDevice } = H;
+const { isTouchDevice } = H;
 import U from '../Utilities.js';
-const { addEvent, correctFloat, defined, isNumber, pick, pushUnique } = U;
+const { addEvent, correctFloat, defined, isNumber, pick } = U;
 /* *
  *
  *  Functions
@@ -32,34 +32,36 @@ function onAxisInit() {
  * selector.
  * @private
  */
-function onAxisZoom(e) {
+function onAxisSetExtremes(e) {
     const axis = this, chart = axis.chart, chartOptions = chart.options, navigator = chartOptions.navigator, navigatorAxis = axis.navigatorAxis, pinchType = chart.zooming.pinchType, rangeSelector = chartOptions.rangeSelector, zoomType = chart.zooming.type;
-    if (axis.isXAxis && ((navigator && navigator.enabled) ||
-        (rangeSelector && rangeSelector.enabled))) {
+    let zoomed;
+    if (axis.isXAxis &&
+        (navigator?.enabled || rangeSelector?.enabled)) {
         // For y only zooming, ignore the X axis completely
-        if (zoomType === 'y') {
-            e.zoomed = false;
-            // For xy zooming, record the state of the zoom before zoom
-            // selection, then when the reset button is pressed, revert to
-            // this state. This should apply only if the chart is
-            // initialized with a range (#6612), otherwise zoom all the way
-            // out.
+        if (zoomType === 'y' && e.trigger === 'zoom') {
+            zoomed = false;
+            // For xy zooming, record the state of the zoom before zoom selection,
+            // then when the reset button is pressed, revert to this state. This
+            // should apply only if the chart is initialized with a range (#6612),
+            // otherwise zoom all the way out.
         }
-        else if (((!isTouchDevice && zoomType === 'xy') ||
+        else if (((e.trigger === 'zoom' && zoomType === 'xy') ||
             (isTouchDevice && pinchType === 'xy')) &&
             axis.options.range) {
             const previousZoom = navigatorAxis.previousZoom;
-            if (defined(e.newMin)) {
+            // Minimum defined, zooming in
+            if (defined(e.min)) {
                 navigatorAxis.previousZoom = [axis.min, axis.max];
+                // Minimum undefined, resetting zoom
             }
             else if (previousZoom) {
-                e.newMin = previousZoom[0];
-                e.newMax = previousZoom[1];
+                e.min = previousZoom[0];
+                e.max = previousZoom[1];
                 navigatorAxis.previousZoom = void 0;
             }
         }
     }
-    if (typeof e.zoomed !== 'undefined') {
+    if (typeof zoomed !== 'undefined') {
         e.preventDefault();
     }
 }
@@ -82,10 +84,10 @@ class NavigatorAxisAdditions {
      * @private
      */
     static compose(AxisClass) {
-        if (pushUnique(composed, this.compose)) {
+        if (!AxisClass.keepProps.includes('navigatorAxis')) {
             AxisClass.keepProps.push('navigatorAxis');
             addEvent(AxisClass, 'init', onAxisInit);
-            addEvent(AxisClass, 'zoom', onAxisZoom);
+            addEvent(AxisClass, 'setExtremes', onAxisSetExtremes);
         }
     }
     /* *
@@ -115,7 +117,7 @@ class NavigatorAxisAdditions {
      * @function Highcharts.Axis#toFixedRange
      */
     toFixedRange(pxMin, pxMax, fixedMin, fixedMax) {
-        const axis = this.axis, chart = axis.chart;
+        const axis = this.axis, chart = axis.chart, overscroll = pick(axis.ordinal?.convertOverscroll(axis.options.overscroll), 0);
         let newMin = pick(fixedMin, axis.translate(pxMin, true, !axis.horiz)), newMax = pick(fixedMax, axis.translate(pxMax, true, !axis.horiz));
         const fixedRange = chart && chart.fixedRange, halfPointRange = (axis.pointRange || 0) / 2;
         // Add/remove half point range to/from the extremes (#1172)
@@ -127,8 +129,10 @@ class NavigatorAxisAdditions {
         }
         // Make sure panning to the edges does not decrease the zoomed range
         if (fixedRange && axis.dataMin && axis.dataMax) {
-            if (newMax >= axis.dataMax) {
-                newMin = correctFloat(axis.dataMax - fixedRange);
+            const maxWithOverscroll = axis.dataMax + overscroll;
+            if (newMax >= maxWithOverscroll) {
+                newMin = correctFloat(maxWithOverscroll - fixedRange);
+                newMax = correctFloat(maxWithOverscroll);
             }
             if (newMin <= axis.dataMin) {
                 newMax = correctFloat(axis.dataMin + fixedRange);

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

@@ -10,10 +10,9 @@
 'use strict';
 import Axis from './Axis.js';
 import H from '../Globals.js';
-const { composed } = H;
 import Series from '../Series/Series.js';
 import U from '../Utilities.js';
-const { addEvent, correctFloat, css, defined, error, pick, pushUnique, timeUnits } = U;
+const { addEvent, correctFloat, css, defined, error, isNumber, pick, timeUnits, isString } = U;
 /* *
  *
  *  Composition
@@ -50,8 +49,8 @@ var OrdinalAxis;
      * Series class to use.
      */
     function compose(AxisClass, SeriesClass, ChartClass) {
-        if (pushUnique(composed, compose)) {
-            const axisProto = AxisClass.prototype;
+        const axisProto = AxisClass.prototype;
+        if (!axisProto.ordinal2lin) {
             axisProto.getTimeTicks = getTimeTicks;
             axisProto.index2val = index2val;
             axisProto.lin2val = lin2val;
@@ -69,7 +68,7 @@ var OrdinalAxis;
     }
     OrdinalAxis.compose = compose;
     /**
-     * In an ordinal axis, there might be areas with dense consentrations of
+     * In an ordinal axis, there might be areas with dense concentrations of
      * points, then large gaps between some. Creating equally distributed
      * ticks over this entire range may lead to a huge number of ticks that
      * will later be removed. So instead, break the positions up in
@@ -268,7 +267,7 @@ var OrdinalAxis;
         let positions = ordinal.getExtendedPositions();
         // In some cases (especially in early stages of the chart creation) the
         // getExtendedPositions might return undefined.
-        if (positions.length) {
+        if (positions && positions.length) {
             // Convert back from modivied value to pixels. // #15970
             const pixelVal = correctFloat((val - localMin) * localA +
                 axis.minPixelPadding), index = correctFloat(ordinal.getIndexOfPoint(pixelVal, positions)), mantissa = correctFloat(index % 1);
@@ -309,22 +308,32 @@ var OrdinalAxis;
      * @private
      */
     function onAxisFoundExtremes() {
-        const axis = this;
+        const axis = this, { eventArgs, options } = axis;
         if (axis.isXAxis &&
-            defined(axis.options.overscroll) &&
-            axis.max === axis.dataMax &&
-            (
-            // Panning is an execption. We don't want to apply
-            // overscroll when panning over the dataMax
-            !axis.chart.mouseIsDown ||
-                axis.isInternal) && (
-        // Scrollbar buttons are the other execption:
-        !axis.eventArgs ||
-            axis.eventArgs && axis.eventArgs.trigger !== 'navigator')) {
-            axis.max += axis.options.overscroll;
-            // Live data and buttons require translation for the min:
-            if (!axis.isInternal && defined(axis.userMin)) {
-                axis.min += axis.options.overscroll;
+            defined(options.overscroll) &&
+            options.overscroll !== 0 &&
+            isNumber(axis.max) &&
+            isNumber(axis.min)) {
+            if (axis.options.ordinal && !axis.ordinal.originalOrdinalRange) {
+                // Calculate the original ordinal range
+                axis.ordinal.getExtendedPositions(false);
+            }
+            if (axis.max === axis.dataMax &&
+                (
+                // Panning is an exception. We don't want to apply
+                // overscroll when panning over the dataMax
+                eventArgs?.trigger !== 'pan' ||
+                    axis.isInternal) &&
+                // Scrollbar buttons are the other execption
+                eventArgs?.trigger !== 'navigator') {
+                const overscroll = axis.ordinal.convertOverscroll(options.overscroll);
+                axis.max += overscroll;
+                // Live data and buttons require translation for the min:
+                if (!axis.isInternal &&
+                    defined(axis.userMin) &&
+                    eventArgs?.trigger !== 'mousewheel') {
+                    axis.min += overscroll;
+                }
             }
         }
     }
@@ -357,7 +366,7 @@ var OrdinalAxis;
      * @private
      */
     function onChartPan(e) {
-        const chart = this, xAxis = chart.xAxis[0], overscroll = xAxis.options.overscroll, chartX = e.originalEvent.chartX, panning = chart.options.chart.panning;
+        const chart = this, xAxis = chart.xAxis[0], overscroll = xAxis.ordinal.convertOverscroll(xAxis.options.overscroll), chartX = e.originalEvent.chartX, panning = chart.options.chart.panning;
         let runBase = false;
         if (panning &&
             panning.type !== 'y' &&
@@ -375,7 +384,7 @@ var OrdinalAxis;
                     extendedOrdinalPositions: extendedOrdinalPositions
                 }
             }, index2val = xAxis.index2val, val2lin = xAxis.val2lin;
-            let trimmedRange, ordinalPositions, searchAxisLeft, searchAxisRight;
+            let trimmedRange, ordinalPositions;
             // we have an ordinal axis, but the data is equally spaced
             if (!extendedAxis.ordinal.positions) {
                 runBase = true;
@@ -387,21 +396,11 @@ var OrdinalAxis;
                         point.setState();
                     });
                 }
-                if (movedUnits < 0) {
-                    searchAxisLeft = extendedAxis;
-                    searchAxisRight = xAxis.ordinal.positions ?
-                        xAxis : extendedAxis;
-                }
-                else {
-                    searchAxisLeft = xAxis.ordinal.positions ?
-                        xAxis : extendedAxis;
-                    searchAxisRight = extendedAxis;
-                }
                 // In grouped data series, the last ordinal position represents
                 // the grouped data, which is to the left of the real data max.
                 // If we don't compensate for this, we will be allowed to pan
                 // grouped data series passed the right of the plot area.
-                ordinalPositions = searchAxisRight.ordinal.positions;
+                ordinalPositions = extendedAxis.ordinal.positions;
                 if (dataMax >
                     ordinalPositions[ordinalPositions.length - 1]) {
                     ordinalPositions.push(dataMax);
@@ -411,19 +410,18 @@ var OrdinalAxis;
                 // translate back to values. This happens on the extended
                 // ordinal positions if the new position is out of range, else
                 // it happens on the current x axis which is smaller and faster.
-                chart.fixedRange = max - min;
+                chart.setFixedRange(max - min);
                 trimmedRange = xAxis.navigatorAxis
-                    .toFixedRange(void 0, void 0, index2val.apply(searchAxisLeft, [
-                    val2lin.apply(searchAxisLeft, [min, true]) +
+                    .toFixedRange(void 0, void 0, index2val.apply(extendedAxis, [
+                    val2lin.apply(extendedAxis, [min, true]) +
                         movedUnits
-                ]), index2val.apply(searchAxisRight, [
-                    val2lin.apply(searchAxisRight, [max, true]) +
+                ]), index2val.apply(extendedAxis, [
+                    val2lin.apply(extendedAxis, [max, true]) +
                         movedUnits
                 ]));
                 // Apply it if it is within the available data range
                 if (trimmedRange.min >= Math.min(extremes.dataMin, min) &&
-                    trimmedRange.max <= Math.max(dataMax, max) +
-                        overscroll) {
+                    trimmedRange.max <= Math.max(dataMax, max) + overscroll) {
                     xAxis.setExtremes(trimmedRange.min, trimmedRange.max, true, false, { trigger: 'pan' });
                 }
                 chart.mouseDownX = chartX; // set new reference for next run
@@ -452,6 +450,7 @@ var OrdinalAxis;
         // and destroy extendedOrdinalPositions, #16055.
         if (xAxis && xAxis.options.ordinal) {
             delete xAxis.ordinal.index;
+            delete xAxis.ordinal.originalOrdinalRange;
         }
     }
     /**
@@ -515,9 +514,9 @@ var OrdinalAxis;
                     return val;
                 }
                 // Since ordinal.slope is the average distance between 2
-                // points on visible plotArea, this can be used to calculete
+                // points on visible plotArea, this can be used to calculate
                 // the approximate position of the point, which is outside
-                // the extededOrdinalPositions.
+                // the extendedOrdinalPositions.
                 if (val < extendedOrdinalPositions[0]) {
                     const diff = extendedOrdinalPositions[0] - val, approximateIndexOffset = diff / slope;
                     ordinalIndex =
@@ -622,6 +621,11 @@ var OrdinalAxis;
                         }
                     }
                 });
+                if (!axis.ordinal.originalOrdinalRange) {
+                    // Calculate current originalOrdinalRange
+                    axis.ordinal.originalOrdinalRange =
+                        (ordinalPositions.length - 1) * overscrollPointsRange;
+                }
                 // If the distance between points is not identical throughout
                 // all series, remove the first and last ordinal position to
                 // avoid enabling ordinal logic when it is not needed, #17405.
@@ -663,7 +667,7 @@ var OrdinalAxis;
                     else if (len === 1) {
                         // We have just one point, closest distance is unknown.
                         // Assume then it is last point and overscrolled range:
-                        overscrollPointsRange = axis.options.overscroll;
+                        overscrollPointsRange = axis.ordinal.convertOverscroll(axis.options.overscroll);
                         ordinalPositions = [
                             ordinalPositions[0],
                             ordinalPositions[0] + overscrollPointsRange
@@ -749,10 +753,11 @@ var OrdinalAxis;
          * it will be regenerated the next time a panning operation starts.
          * @private
          */
-        getExtendedPositions() {
-            const ordinal = this, axis = ordinal.axis, axisProto = axis.constructor.prototype, chart = axis.chart, grouping = axis.series[0].currentDataGrouping, key = grouping ?
+        getExtendedPositions(withOverscroll = true) {
+            const ordinal = this, axis = ordinal.axis, axisProto = axis.constructor.prototype, chart = axis.chart, grouping = axis.series[0]?.currentDataGrouping, key = grouping ?
                 grouping.count + grouping.unitName :
-                'raw', overscroll = axis.options.overscroll, extremes = axis.getExtremes();
+                'raw', overscroll = withOverscroll ?
+                axis.ordinal.convertOverscroll(axis.options.overscroll) : 0, extremes = axis.getExtremes();
             let fakeAxis, fakeSeries = void 0, ordinalIndex = ordinal.index;
             // If this is the first time, or the ordinal index is deleted by
             // updatedData,
@@ -801,7 +806,9 @@ var OrdinalAxis;
                         reserveSpace: Series.prototype.reserveSpace,
                         visible: series.visible
                     };
-                    fakeSeries.xData = fakeSeries.xData.concat(ordinal.getOverscrollPositions());
+                    if (withOverscroll) {
+                        fakeSeries.xData = fakeSeries.xData.concat(ordinal.getOverscrollPositions());
+                    }
                     fakeSeries.options = {
                         dataGrouping: grouping ? {
                             firstAnchor: 'firstPoint',
@@ -825,13 +832,18 @@ var OrdinalAxis;
                 fakeAxis.applyGrouping({ hasExtremesChanged: true });
                 // Force to use the ordinal when points are evenly spaced (e.g.
                 // weeks), #3825.
-                if ((fakeSeries.closestPointRange !==
-                    fakeSeries.basePointRange) &&
+                if ((fakeSeries?.closestPointRange !==
+                    fakeSeries?.basePointRange) &&
                     fakeSeries.currentDataGrouping) {
                     fakeAxis.forceOrdinal = true;
                 }
                 // Run beforeSetTickPositions to compute the ordinalPositions
                 axis.ordinal.beforeSetTickPositions.apply({ axis: fakeAxis });
+                if (!axis.ordinal.originalOrdinalRange &&
+                    fakeAxis.ordinal.originalOrdinalRange) {
+                    axis.ordinal.originalOrdinalRange =
+                        fakeAxis.ordinal.originalOrdinalRange;
+                }
                 // Cache it
                 ordinalIndex[key] = fakeAxis.ordinal.positions;
             }
@@ -861,7 +873,7 @@ var OrdinalAxis;
          * @private
          */
         getGroupIntervalFactor(xMin, xMax, series) {
-            const ordinal = this, axis = ordinal.axis, processedXData = series.processedXData, len = processedXData.length, distances = [];
+            const ordinal = this, processedXData = series.processedXData, len = processedXData.length, distances = [];
             let median, i, groupIntervalFactor = ordinal.groupIntervalFactor;
             // Only do this computation for the first series, let the other
             // inherit it (#2416)
@@ -893,7 +905,7 @@ var OrdinalAxis;
          * @param {number} val
          * The pixel value of a point.
          *
-         * @param {Array<number>} [ordinallArray]
+         * @param {Array<number>} [ordinalArray]
          * An array of all points available on the axis for the given data set.
          * Either ordinalPositions if the value is inside the plotArea or
          * extendedOrdinalPositions if not.
@@ -942,7 +954,7 @@ var OrdinalAxis;
          * @private
          */
         getOverscrollPositions() {
-            const ordinal = this, axis = ordinal.axis, extraRange = axis.options.overscroll, distance = ordinal.overscrollPointsRange, positions = [];
+            const ordinal = this, axis = ordinal.axis, extraRange = ordinal.convertOverscroll(axis.options.overscroll), distance = ordinal.overscrollPointsRange, positions = [];
             let max = axis.dataMax;
             if (defined(distance)) {
                 // Max + pointRange because we need to scroll to the last
@@ -981,6 +993,38 @@ var OrdinalAxis;
             }
             return ret;
         }
+        /**
+         * If overscroll is pixel or pecentage value, convert it to axis range.
+         *
+         * @private
+         * @param {number | string} overscroll
+         * Overscroll value in axis range, pixels or percentage value.
+         * @return {number}
+         * Overscroll value in axis range.
+         */
+        convertOverscroll(overscroll = 0) {
+            const ordinal = this, axis = ordinal.axis, calculateOverscroll = function (overscrollPercentage) {
+                return pick(ordinal.originalOrdinalRange, defined(axis.dataMax) && defined(axis.dataMin) ?
+                    axis.dataMax - axis.dataMin : 0) * overscrollPercentage;
+            };
+            if (isString(overscroll)) {
+                const overscrollValue = parseInt(overscroll, 10);
+                if (/%$/.test(overscroll)) {
+                    // If overscroll is percentage
+                    return calculateOverscroll(overscrollValue / 100);
+                }
+                if (/px/.test(overscroll)) {
+                    // If overscroll is pixels, it is limited to 90% of the axis
+                    // length to prevent division by zero
+                    const limitedOverscrollValue = Math.min(overscrollValue, axis.len * 0.9), pixelToPercent = limitedOverscrollValue / axis.len;
+                    return calculateOverscroll(pixelToPercent / (1 - pixelToPercent));
+                }
+                // If overscroll is a string but not pixels or percentage,
+                // return 0 as no overscroll
+                return 0;
+            }
+            return overscroll;
+        }
     }
     OrdinalAxis.Additions = Additions;
 })(OrdinalAxis || (OrdinalAxis = {}));

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

@@ -139,7 +139,7 @@ class PlotLineOrBand {
         // before.
         if (!this.eventsAdded && events) {
             objectEach(events, (event, eventType) => {
-                svgElem?.on(eventType, function (e) {
+                svgElem?.on(eventType, (e) => {
                     events[eventType].apply(this, [e]);
                 });
             });
@@ -353,7 +353,7 @@ export default PlotLineOrBand;
  *         Plot band on Y axis
  *
  * @type      {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
- * @default   #e6e9ff
+ * @default   ${palette.highlightColor10}
  * @apioption xAxis.plotBands.color
  */
 /**
@@ -601,7 +601,7 @@ export default PlotLineOrBand;
  *         Plot line on Y axis
  *
  * @type      {Highcharts.ColorString}
- * @default   #999999
+ * @default   ${palette.neutralColor40}
  * @apioption xAxis.plotLines.color
  */
 /**

package/es-modules/Core/Axis/PlotLineOrBand/PlotLineOrBandAxis.js

@@ -8,10 +8,8 @@
  *
  * */
 'use strict';
-import H from '../../Globals.js';
-const { composed } = H;
 import U from '../../Utilities.js';
-const { erase, extend, isNumber, pushUnique } = U;
+const { erase, extend, isNumber } = U;
 /* *
  *
  *  Composition
@@ -110,9 +108,10 @@ var PlotLineOrBandAxis;
      * @private
      */
     function compose(PlotLineOrBandType, AxisClass) {
-        if (pushUnique(composed, compose)) {
+        const axisProto = AxisClass.prototype;
+        if (!axisProto.addPlotBand) {
             PlotLineOrBandClass = PlotLineOrBandType;
-            extend(AxisClass.prototype, {
+            extend(axisProto, {
                 addPlotBand,
                 addPlotLine,
                 addPlotBandOrLine,

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

@@ -182,7 +182,7 @@ var RadialAxis;
      * Axis composition.
      */
     function compose(AxisClass, TickClass) {
-        if (pushUnique(composed, compose)) {
+        if (pushUnique(composed, 'Axis.Radial')) {
             addEvent(AxisClass, 'afterInit', onAxisAfterInit);
             addEvent(AxisClass, 'autoLabelAlign', onAxisAutoLabelAlign);
             addEvent(AxisClass, 'destroy', onAxisDestroy);
@@ -631,7 +631,7 @@ var RadialAxis;
      * Modify axis instance with radial logic before common axis init.
      */
     function onAxisInit(e) {
-        const chart = this.chart, inverted = chart.inverted, angular = chart.angular, polar = chart.polar, isX = this.isXAxis, coll = this.coll, isHidden = angular && isX, paneIndex = e.userOptions.pane || 0, pane = this.pane = chart.pane && chart.pane[paneIndex];
+        const chart = this.chart, angular = chart.angular, polar = chart.polar, isX = this.isXAxis, coll = this.coll, isHidden = angular && isX, paneIndex = e.userOptions.pane || 0, pane = this.pane = chart.pane && chart.pane[paneIndex];
         let isCircular;
         // Prevent changes for colorAxis
         if (coll === 'colorAxis') {
@@ -762,7 +762,7 @@ var RadialAxis;
                 else {
                     align = (labelDir === 'start') ? 'left' : 'right';
                 }
-                // For angles beetwen (90 + n * 180) +- 20
+                // For angles between (90 + n * 180) +- 20
                 if (reducedAngle2 > 70 && reducedAngle2 < 110) {
                     align = 'center';
                 }
@@ -859,7 +859,7 @@ var RadialAxis;
             else {
                 // When the pane's startAngle or the axis' angle is set then
                 // new x and y values for vertical axis' center must be
-                // calulated
+                // calculated
                 start = this.postTranslate(this.angleRad, center[3] / 2);
                 center[0] = start.x - this.chart.plotLeft;
                 center[1] = start.y - this.chart.plotTop;
@@ -926,7 +926,7 @@ var RadialAxis;
             defaultPolarOptions.reversedStacks = true;
         }
         const options = this.options = merge(defaultPolarOptions, userOptions);
-        // Make sure the plotBands array is instanciated for each Axis
+        // Make sure the plotBands array is instantiated for each Axis
         // (#2649)
         if (!options.plotBands) {
             options.plotBands = [];

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

@@ -42,7 +42,7 @@ var ScrollbarAxis;
      * Scrollbar class to use.
      */
     function compose(AxisClass, ScrollbarClass) {
-        if (pushUnique(composed, compose)) {
+        if (pushUnique(composed, 'Axis.Scrollbar')) {
             Scrollbar = ScrollbarClass;
             addEvent(AxisClass, 'afterGetOffset', onAxisAfterGetOffset);
             addEvent(AxisClass, 'afterInit', onAxisAfterInit);
@@ -115,7 +115,7 @@ var ScrollbarAxis;
                 }
                 else {
                     // When live redraw is disabled, don't change extremes
-                    // Only change the position of the scollbar thumb
+                    // Only change the position of the scrollbar thumb
                     this.setRange(this.from, this.to);
                 }
             });

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

@@ -89,7 +89,7 @@ class StackItem {
             format(formatOption, this, chart) :
             options.formatter.call(this);
         // Change the text to reflect the new total and set visibility to hidden
-        // in case the serie is hidden
+        // in case the series is hidden
         if (this.label) {
             this.label.attr({ text: str, visibility: 'hidden' });
         }
@@ -133,7 +133,7 @@ class StackItem {
             xAxis
         }), { verticalAlign } = alignOptions;
         if (label && stackBox) {
-            const labelBox = label.getBBox(), padding = label.padding;
+            const labelBox = label.getBBox(void 0, 0), padding = label.padding;
             let isJustify = pick(options.overflow, 'justify') === 'justify', visible;
             // Reset alignOptions property after justify #12337
             alignOptions.x = options.x || 0;
@@ -160,13 +160,17 @@ class StackItem {
                 // Justify stackLabel into the alignBox
                 Series.prototype.justifyDataLabel.call(axis, label, alignOptions, label.alignAttr, labelBox, stackBox);
             }
-            // Add attr to aviod the default animation of justifyDataLabel.
+            // Add attr to avoid the default animation of justifyDataLabel.
             // Also add correct rotation with its rotation origin. #15129
             label.attr({
                 x: label.alignAttr.x,
                 y: label.alignAttr.y,
                 rotation: options.rotation,
-                rotationOriginX: labelBox.width / 2,
+                rotationOriginX: labelBox.width * {
+                    left: 0,
+                    center: 0.5,
+                    right: 1
+                }[options.textAlign || 'center'],
                 rotationOriginY: labelBox.height / 2
             });
             // Check if the dataLabel should be visible.

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

@@ -11,13 +11,11 @@
 import A from '../../Animation/AnimationUtilities.js';
 const { getDeferredAnimation } = A;
 import Axis from '../Axis.js';
-import H from '../../Globals.js';
-const { composed } = H;
 import SeriesRegistry from '../../Series/SeriesRegistry.js';
 const { series: { prototype: seriesProto } } = SeriesRegistry;
 import StackItem from './StackItem.js';
 import U from '../../Utilities.js';
-const { addEvent, correctFloat, defined, destroyObjectProperties, fireEvent, isArray, isNumber, objectEach, pick, pushUnique } = U;
+const { addEvent, correctFloat, defined, destroyObjectProperties, fireEvent, isArray, isNumber, objectEach, pick } = U;
 /* *
  *
  *  Functions
@@ -415,8 +413,8 @@ var StackingAxis;
      * @private
      */
     function compose(AxisClass, ChartClass, SeriesClass) {
-        if (pushUnique(composed, compose)) {
-            const chartProto = ChartClass.prototype, seriesProto = SeriesClass.prototype;
+        const chartProto = ChartClass.prototype, seriesProto = SeriesClass.prototype;
+        if (!chartProto.getStacks) {
             addEvent(AxisClass, 'init', onAxisInit);
             addEvent(AxisClass, 'destroy', onAxisDestroy);
             chartProto.getStacks = chartGetStacks;