highcharts 11.3.0 → 11.4.0

package/es-modules/Extensions/ScrollablePlotArea.js

@@ -9,13 +9,6 @@
  *  Highcharts feature to make the Y axis stay fixed when scrolling the chart
  *  horizontally on mobile devices. Supports left and right side axes.
  */
-/*
-WIP on vertical scrollable plot area (#9378). To do:
-- Bottom axis positioning
-- Test with Gantt
-- Look for size optimizing the code
-- API and demos
- */
 'use strict';
 import A from '../Core/Animation/AnimationUtilities.js';
 const { stop } = A;
@@ -23,19 +16,99 @@ import H from '../Core/Globals.js';
 const { composed } = H;
 import RendererRegistry from '../Core/Renderer/RendererRegistry.js';
 import U from '../Core/Utilities.js';
-const { addEvent, createElement, css, defined, extend, merge, pick, pushUnique } = U;
+const { addEvent, createElement, css, defined, merge, pushUnique } = U;
 /* *
  *
  *  Functions
  *
  * */
 /** @private */
-function chartApplyFixed() {
-    const { axisOffset, chartWidth, chartHeight, container, plotHeight, plotLeft, plotTop, plotWidth, scrollablePixelsX = 0, scrollablePixelsY = 0, scrollingContainer } = this, firstTime = !this.fixedDiv, chartOptions = this.options.chart, scrollableOptions = chartOptions.scrollablePlotArea, { scrollPositionX, scrollPositionY } = scrollableOptions, Renderer = RendererRegistry.getRendererType();
-    let { fixedRenderer } = this;
-    // First render
-    if (!fixedRenderer) {
-        this.fixedDiv = createElement('div', {
+function onChartRender() {
+    let scrollablePlotArea = this.scrollablePlotArea;
+    if ((this.scrollablePixelsX || this.scrollablePixelsY) &&
+        !scrollablePlotArea) {
+        this.scrollablePlotArea = scrollablePlotArea = new ScrollablePlotArea(this);
+    }
+    scrollablePlotArea?.applyFixed();
+}
+/** @private */
+function markDirty() {
+    if (this.chart.scrollablePlotArea) {
+        this.chart.scrollablePlotArea.isDirty = true;
+    }
+}
+class ScrollablePlotArea {
+    static compose(AxisClass, ChartClass, SeriesClass) {
+        if (pushUnique(composed, this.compose)) {
+            addEvent(AxisClass, 'afterInit', markDirty);
+            addEvent(ChartClass, 'afterSetChartSize', (e) => this.afterSetSize(e.target, e));
+            addEvent(ChartClass, 'render', onChartRender);
+            addEvent(SeriesClass, 'show', markDirty);
+        }
+    }
+    static afterSetSize(chart, e) {
+        const { minWidth, minHeight } = chart.options.chart.scrollablePlotArea || {}, { clipBox, plotBox, inverted, renderer } = chart;
+        let scrollablePixelsX, scrollablePixelsY, recalculateHoriz;
+        if (!renderer.forExport) {
+            // The amount of pixels to scroll, the difference between chart
+            // width and scrollable width
+            if (minWidth) {
+                chart.scrollablePixelsX = scrollablePixelsX = Math.max(0, minWidth - chart.chartWidth);
+                if (scrollablePixelsX) {
+                    chart.scrollablePlotBox = merge(chart.plotBox);
+                    plotBox.width = chart.plotWidth += scrollablePixelsX;
+                    clipBox[inverted ? 'height' : 'width'] += scrollablePixelsX;
+                    recalculateHoriz = true;
+                }
+                // Currently we can only do either X or Y
+            }
+            else if (minHeight) {
+                chart.scrollablePixelsY = scrollablePixelsY = Math.max(0, minHeight - chart.chartHeight);
+                if (defined(scrollablePixelsY)) {
+                    chart.scrollablePlotBox = merge(chart.plotBox);
+                    plotBox.height = chart.plotHeight += scrollablePixelsY;
+                    clipBox[inverted ? 'width' : 'height'] += scrollablePixelsY;
+                    recalculateHoriz = false;
+                }
+            }
+            if (defined(recalculateHoriz) && !e.skipAxes) {
+                for (const axis of chart.axes) {
+                    // Apply the corrected plot size to the axes of the other
+                    // orientation than the scrolling direction
+                    if (axis.horiz === recalculateHoriz) {
+                        axis.setAxisSize();
+                        axis.setAxisTranslation();
+                    }
+                }
+            }
+        }
+    }
+    constructor(chart) {
+        const chartOptions = chart.options.chart, Renderer = RendererRegistry.getRendererType(), scrollableOptions = chartOptions.scrollablePlotArea || {}, moveFixedElements = this.moveFixedElements.bind(this), styles = {
+            WebkitOverflowScrolling: 'touch',
+            overflowX: 'hidden',
+            overflowY: 'hidden'
+        };
+        if (chart.scrollablePixelsX) {
+            styles.overflowX = 'auto';
+        }
+        if (chart.scrollablePixelsY) {
+            styles.overflowY = 'auto';
+        }
+        this.chart = chart;
+        // Insert a container with relative position that scrolling and fixed
+        // container renders to (#10555)
+        const parentDiv = this.parentDiv = createElement('div', {
+            className: 'highcharts-scrolling-parent'
+        }, {
+            position: 'relative'
+        }, chart.renderTo), 
+        // Add the necessary divs to provide scrolling
+        scrollingContainer = this.scrollingContainer = createElement('div', {
+            'className': 'highcharts-scrolling'
+        }, styles, parentDiv), innerContainer = this.innerContainer = createElement('div', {
+            'className': 'highcharts-inner-container'
+        }, void 0, scrollingContainer), fixedDiv = this.fixedDiv = createElement('div', {
             className: 'highcharts-fixed'
         }, {
             position: 'absolute',
@@ -43,311 +116,164 @@ function chartApplyFixed() {
             pointerEvents: 'none',
             zIndex: (chartOptions.style?.zIndex || 0) + 2,
             top: 0
-        }, void 0, true);
-        scrollingContainer?.parentNode.insertBefore(this.fixedDiv, scrollingContainer);
-        css(this.renderTo, { overflow: 'visible' });
-        this.fixedRenderer = fixedRenderer = new Renderer(this.fixedDiv, chartWidth, chartHeight, chartOptions.style);
+        }, void 0, true), fixedRenderer = this.fixedRenderer = new Renderer(fixedDiv, chart.chartWidth, chart.chartHeight, chartOptions.style);
         // Mask
-        this.scrollableMask = fixedRenderer
+        this.mask = fixedRenderer
             .path()
             .attr({
             fill: chartOptions.backgroundColor || '#fff',
-            'fill-opacity': pick(scrollableOptions.opacity, 0.85),
+            'fill-opacity': scrollableOptions.opacity ?? 0.85,
             zIndex: -1
         })
             .addClass('highcharts-scrollable-mask')
             .add();
-        addEvent(this, 'afterShowResetZoom', this.moveFixedElements);
-        addEvent(this, 'afterApplyDrilldown', this.moveFixedElements);
-        addEvent(this, 'afterLayOutTitles', this.moveFixedElements);
+        scrollingContainer.parentNode.insertBefore(fixedDiv, scrollingContainer);
+        css(chart.renderTo, { overflow: 'visible' });
+        addEvent(chart, 'afterShowResetZoom', moveFixedElements);
+        addEvent(chart, 'afterApplyDrilldown', moveFixedElements);
+        addEvent(chart, 'afterLayOutTitles', moveFixedElements);
+        // On scroll, reset the chart position because it applies to the
+        // scrolled container
+        let lastHoverPoint;
+        addEvent(scrollingContainer, 'scroll', () => {
+            const { pointer, hoverPoint } = chart;
+            if (pointer) {
+                delete pointer.chartPosition;
+                if (hoverPoint) {
+                    lastHoverPoint = hoverPoint;
+                }
+                pointer.runPointActions(void 0, lastHoverPoint, true);
+            }
+        });
+        // Now move the container inside
+        innerContainer.appendChild(chart.container);
     }
-    else {
+    applyFixed() {
+        const { chart, fixedRenderer, isDirty, scrollingContainer } = this, { axisOffset, chartWidth, chartHeight, container, plotHeight, plotLeft, plotTop, plotWidth, scrollablePixelsX = 0, scrollablePixelsY = 0 } = chart, chartOptions = chart.options.chart, scrollableOptions = chartOptions.scrollablePlotArea || {}, { scrollPositionX = 0, scrollPositionY = 0 } = scrollableOptions, scrollableWidth = chartWidth + scrollablePixelsX, scrollableHeight = chartHeight + scrollablePixelsY;
         // Set the size of the fixed renderer to the visible width
         fixedRenderer.setSize(chartWidth, chartHeight);
-    }
-    if (this.scrollableDirty || firstTime) {
-        this.scrollableDirty = false;
-        this.moveFixedElements();
-    }
-    // Increase the size of the scrollable renderer and background
-    const scrollableWidth = chartWidth + scrollablePixelsX, scrollableHeight = chartHeight + scrollablePixelsY;
-    stop(this.container);
-    css(container, {
-        width: `${scrollableWidth}px`,
-        height: `${scrollableHeight}px`
-    });
-    this.renderer.boxWrapper.attr({
-        width: scrollableWidth,
-        height: scrollableHeight,
-        viewBox: [0, 0, scrollableWidth, scrollableHeight].join(' ')
-    });
-    this.chartBackground?.attr({
-        width: scrollableWidth,
-        height: scrollableHeight
-    });
-    if (scrollingContainer) {
+        if (isDirty ?? true) {
+            this.isDirty = false;
+            this.moveFixedElements();
+        }
+        // Increase the size of the scrollable renderer and background
+        stop(chart.container);
+        css(container, {
+            width: `${scrollableWidth}px`,
+            height: `${scrollableHeight}px`
+        });
+        chart.renderer.boxWrapper.attr({
+            width: scrollableWidth,
+            height: scrollableHeight,
+            viewBox: [0, 0, scrollableWidth, scrollableHeight].join(' ')
+        });
+        chart.chartBackground?.attr({
+            width: scrollableWidth,
+            height: scrollableHeight
+        });
         css(scrollingContainer, {
-            width: `${this.chartWidth}px`,
-            height: `${this.chartHeight}px`
+            width: `${chartWidth}px`,
+            height: `${chartHeight}px`
         });
-        // Set scroll position
-        if (firstTime) {
-            if (scrollPositionX) {
-                scrollingContainer.scrollLeft =
-                    scrollablePixelsX * scrollPositionX;
-            }
-            if (scrollPositionY) {
-                scrollingContainer.scrollTop =
-                    scrollablePixelsY * scrollPositionY;
-            }
+        // Set scroll position the first time (this.isDirty was undefined at
+        // the top of this function)
+        if (!defined(isDirty)) {
+            scrollingContainer.scrollLeft = scrollablePixelsX * scrollPositionX;
+            scrollingContainer.scrollTop = scrollablePixelsY * scrollPositionY;
+        }
+        // Mask behind the left and right side
+        const maskTop = plotTop - axisOffset[0] - 1, maskLeft = plotLeft - axisOffset[3] - 1, maskBottom = plotTop + plotHeight + axisOffset[2] + 1, maskRight = plotLeft + plotWidth + axisOffset[1] + 1, maskPlotRight = plotLeft + plotWidth - scrollablePixelsX, maskPlotBottom = plotTop + plotHeight - scrollablePixelsY;
+        let d = [['M', 0, 0]];
+        if (scrollablePixelsX) {
+            d = [
+                // Left side
+                ['M', 0, maskTop],
+                ['L', plotLeft - 1, maskTop],
+                ['L', plotLeft - 1, maskBottom],
+                ['L', 0, maskBottom],
+                ['Z'],
+                // Right side
+                ['M', maskPlotRight, maskTop],
+                ['L', chartWidth, maskTop],
+                ['L', chartWidth, maskBottom],
+                ['L', maskPlotRight, maskBottom],
+                ['Z']
+            ];
+        }
+        else if (scrollablePixelsY) {
+            d = [
+                // Top side
+                ['M', maskLeft, 0],
+                ['L', maskLeft, plotTop - 1],
+                ['L', maskRight, plotTop - 1],
+                ['L', maskRight, 0],
+                ['Z'],
+                // Bottom side
+                ['M', maskLeft, maskPlotBottom],
+                ['L', maskLeft, chartHeight],
+                ['L', maskRight, chartHeight],
+                ['L', maskRight, maskPlotBottom],
+                ['Z']
+            ];
+        }
+        if (chart.redrawTrigger !== 'adjustHeight') {
+            this.mask.attr({ d });
         }
     }
-    // Mask behind the left and right side
-    const maskTop = plotTop - axisOffset[0] - 1, maskLeft = plotLeft - axisOffset[3] - 1, maskBottom = plotTop + plotHeight + axisOffset[2] + 1, maskRight = plotLeft + plotWidth + axisOffset[1] + 1, maskPlotRight = plotLeft + plotWidth - scrollablePixelsX, maskPlotBottom = plotTop + plotHeight - scrollablePixelsY;
-    let d;
-    if (scrollablePixelsX) {
-        d = [
-            // Left side
-            ['M', 0, maskTop],
-            ['L', plotLeft - 1, maskTop],
-            ['L', plotLeft - 1, maskBottom],
-            ['L', 0, maskBottom],
-            ['Z'],
-            // Right side
-            ['M', maskPlotRight, maskTop],
-            ['L', chartWidth, maskTop],
-            ['L', chartWidth, maskBottom],
-            ['L', maskPlotRight, maskBottom],
-            ['Z']
-        ];
-    }
-    else if (scrollablePixelsY) {
-        d = [
-            // Top side
-            ['M', maskLeft, 0],
-            ['L', maskLeft, plotTop - 1],
-            ['L', maskRight, plotTop - 1],
-            ['L', maskRight, 0],
-            ['Z'],
-            // Bottom side
-            ['M', maskLeft, maskPlotBottom],
-            ['L', maskLeft, chartHeight],
-            ['L', maskRight, chartHeight],
-            ['L', maskRight, maskPlotBottom],
-            ['Z']
+    /**
+     * These elements are moved over to the fixed renderer and stay fixed when
+     * the user scrolls the chart
+     * @private
+     */
+    moveFixedElements() {
+        const { container, inverted, scrollablePixelsX, scrollablePixelsY } = this.chart, fixedRenderer = this.fixedRenderer, fixedSelectors = [
+            '.highcharts-breadcrumbs-group',
+            '.highcharts-contextbutton',
+            '.highcharts-caption',
+            '.highcharts-credits',
+            '.highcharts-legend',
+            '.highcharts-legend-checkbox',
+            '.highcharts-navigator-series',
+            '.highcharts-navigator-xaxis',
+            '.highcharts-navigator-yaxis',
+            '.highcharts-navigator',
+            '.highcharts-reset-zoom',
+            '.highcharts-drillup-button',
+            '.highcharts-scrollbar',
+            '.highcharts-subtitle',
+            '.highcharts-title'
         ];
-    }
-    else {
-        d = [['M', 0, 0]];
-    }
-    if (this.redrawTrigger !== 'adjustHeight') {
-        this.scrollableMask?.attr({ d });
-    }
-}
-/**
- * These elements are moved over to the fixed renderer and stay fixed when the
- * user scrolls the chart
- * @private
- */
-function chartMoveFixedElements() {
-    const container = this.container, fixedRenderer = this.fixedRenderer, fixedSelectors = [
-        '.highcharts-breadcrumbs-group',
-        '.highcharts-contextbutton',
-        '.highcharts-caption',
-        '.highcharts-credits',
-        '.highcharts-legend',
-        '.highcharts-legend-checkbox',
-        '.highcharts-navigator-series',
-        '.highcharts-navigator-xaxis',
-        '.highcharts-navigator-yaxis',
-        '.highcharts-navigator',
-        '.highcharts-reset-zoom',
-        '.highcharts-drillup-button',
-        '.highcharts-scrollbar',
-        '.highcharts-subtitle',
-        '.highcharts-title'
-    ];
-    let axisClass;
-    if (this.scrollablePixelsX && !this.inverted) {
-        axisClass = '.highcharts-yaxis';
-    }
-    else if (this.scrollablePixelsX && this.inverted) {
-        axisClass = '.highcharts-xaxis';
-    }
-    else if (this.scrollablePixelsY && !this.inverted) {
-        axisClass = '.highcharts-xaxis';
-    }
-    else if (this.scrollablePixelsY && this.inverted) {
-        axisClass = '.highcharts-yaxis';
-    }
-    if (axisClass) {
-        fixedSelectors.push(`${axisClass}:not(.highcharts-radial-axis)`, `${axisClass}-labels:not(.highcharts-radial-axis-labels)`);
-    }
-    for (const className of fixedSelectors) {
-        [].forEach.call(container.querySelectorAll(className), (elem) => {
-            (elem.namespaceURI === fixedRenderer.SVG_NS ?
-                fixedRenderer.box :
-                fixedRenderer.box.parentNode).appendChild(elem);
-            elem.style.pointerEvents = 'auto';
-        });
-    }
-}
-/** @private */
-function chartSetUpScrolling() {
-    const css = {
-        WebkitOverflowScrolling: 'touch',
-        overflowX: 'hidden',
-        overflowY: 'hidden'
-    };
-    if (this.scrollablePixelsX) {
-        css.overflowX = 'auto';
-    }
-    if (this.scrollablePixelsY) {
-        css.overflowY = 'auto';
-    }
-    // Insert a container with position relative
-    // that scrolling and fixed container renders to (#10555)
-    this.scrollingParent = createElement('div', {
-        className: 'highcharts-scrolling-parent'
-    }, {
-        position: 'relative'
-    }, this.renderTo);
-    // Add the necessary divs to provide scrolling
-    this.scrollingContainer = createElement('div', {
-        'className': 'highcharts-scrolling'
-    }, css, this.scrollingParent);
-    // On scroll, reset the chart position because it applies to the scrolled
-    // container
-    let lastHoverPoint;
-    addEvent(this.scrollingContainer, 'scroll', () => {
-        if (this.pointer) {
-            delete this.pointer.chartPosition;
-            if (this.hoverPoint) {
-                lastHoverPoint = this.hoverPoint;
-            }
-            this.pointer.runPointActions(void 0, lastHoverPoint, true);
+        let axisClass;
+        if (scrollablePixelsX && !inverted) {
+            axisClass = '.highcharts-yaxis';
         }
-    });
-    this.innerContainer = createElement('div', {
-        'className': 'highcharts-inner-container'
-    }, null, this.scrollingContainer);
-    // Now move the container inside
-    this.innerContainer.appendChild(this.container);
-    // Don't run again
-    this.setUpScrolling = null;
-}
-/** @private */
-function compose(AxisClass, ChartClass, SeriesClass) {
-    if (pushUnique(composed, compose)) {
-        addEvent(AxisClass, 'afterInit', onAxisAfterInit);
-        extend(ChartClass.prototype, {
-            applyFixed: chartApplyFixed,
-            moveFixedElements: chartMoveFixedElements,
-            setUpScrolling: chartSetUpScrolling
-        });
-        addEvent(ChartClass, 'afterSetChartSize', onChartAfterSetChartSize);
-        addEvent(ChartClass, 'render', onChartRender);
-        addEvent(SeriesClass, 'show', onSeriesShow);
-    }
-}
-/** @private */
-function onAxisAfterInit() {
-    this.chart.scrollableDirty = true;
-}
-/** @private */
-function onChartAfterSetChartSize(e) {
-    const scrollablePlotArea = this.options.chart.scrollablePlotArea, scrollableMinWidth = scrollablePlotArea && scrollablePlotArea.minWidth, scrollableMinHeight = scrollablePlotArea && scrollablePlotArea.minHeight;
-    let scrollablePixelsX, scrollablePixelsY, corrections;
-    if (!this.renderer.forExport) {
-        // The amount of pixels to scroll, the difference between chart
-        // width and scrollable width
-        if (scrollableMinWidth) {
-            this.scrollablePixelsX = scrollablePixelsX = Math.max(0, scrollableMinWidth - this.chartWidth);
-            if (scrollablePixelsX) {
-                this.scrollablePlotBox = (this.renderer.scrollablePlotBox = merge(this.plotBox));
-                this.plotBox.width = this.plotWidth += scrollablePixelsX;
-                if (this.inverted) {
-                    this.clipBox.height += scrollablePixelsX;
-                }
-                else {
-                    this.clipBox.width += scrollablePixelsX;
-                }
-                corrections = {
-                    // Corrections for right side
-                    1: { name: 'right', value: scrollablePixelsX }
-                };
-            }
-            // Currently we can only do either X or Y
+        else if (scrollablePixelsX && inverted) {
+            axisClass = '.highcharts-xaxis';
         }
-        else if (scrollableMinHeight) {
-            this.scrollablePixelsY = scrollablePixelsY = Math.max(0, scrollableMinHeight - this.chartHeight);
-            if (defined(scrollablePixelsY)) {
-                this.scrollablePlotBox = (this.renderer.scrollablePlotBox = merge(this.plotBox));
-                this.plotBox.height = this.plotHeight += scrollablePixelsY;
-                if (this.inverted) {
-                    this.clipBox.width += scrollablePixelsY;
-                }
-                else {
-                    this.clipBox.height += scrollablePixelsY;
-                }
-                corrections = {
-                    2: { name: 'bottom', value: scrollablePixelsY }
-                };
-            }
+        else if (scrollablePixelsY && !inverted) {
+            axisClass = '.highcharts-xaxis';
         }
-        if (corrections && !e.skipAxes) {
-            for (const axis of this.axes) {
-                // For right and bottom axes, only fix the plot line length
-                if (corrections[axis.side]) {
-                    const originalGetPlotLinePath = axis.getPlotLinePath;
-                    // Get the plot lines right in getPlotLinePath,
-                    // temporarily set it to the adjusted plot width.
-                    // eslint-disable-next-line no-loop-func
-                    axis.getPlotLinePath = function () {
-                        const marginName = corrections[axis.side].name, correctionValue = corrections[axis.side].value, 
-                        // axis.right or axis.bottom
-                        margin = this[marginName];
-                        // Temporarily adjust
-                        this[marginName] = margin - correctionValue;
-                        const path = originalGetPlotLinePath.apply(this, arguments);
-                        // Reset
-                        this[marginName] = margin;
-                        return path;
-                    };
-                }
-                else {
-                    // Apply the corrected plotWidth
-                    axis.setAxisSize();
-                    axis.setAxisTranslation();
-                }
-            }
+        else if (scrollablePixelsY && inverted) {
+            axisClass = '.highcharts-yaxis';
         }
-    }
-}
-/** @private */
-function onChartRender() {
-    if (this.scrollablePixelsX || this.scrollablePixelsY) {
-        if (this.setUpScrolling) {
-            this.setUpScrolling();
+        if (axisClass) {
+            fixedSelectors.push(`${axisClass}:not(.highcharts-radial-axis)`, `${axisClass}-labels:not(.highcharts-radial-axis-labels)`);
+        }
+        for (const className of fixedSelectors) {
+            [].forEach.call(container.querySelectorAll(className), (elem) => {
+                (elem.namespaceURI === fixedRenderer.SVG_NS ?
+                    fixedRenderer.box :
+                    fixedRenderer.box.parentNode).appendChild(elem);
+                elem.style.pointerEvents = 'auto';
+            });
         }
-        this.applyFixed();
-    }
-    else if (this.fixedDiv) { // Has been in scrollable mode
-        this.applyFixed();
     }
 }
-/** @private */
-function onSeriesShow() {
-    this.chart.scrollableDirty = true;
-}
 /* *
  *
  *  Default Export
  *
  * */
-const ScrollablePlotArea = {
-    compose
-};
 export default ScrollablePlotArea;
 /* *
  *
@@ -421,4 +347,4 @@ export default ScrollablePlotArea;
  * @since       7.1.1
  * @apioption   chart.scrollablePlotArea.opacity
  */
-(''); // keep doclets above in transpiled file
+(''); // Keep doclets above in transpiled file

package/es-modules/Extensions/SeriesLabel/SeriesLabel.js

@@ -157,7 +157,7 @@ function checkClearPoint(series, x, y, bBox, checkDistance) {
  * @private
  */
 function compose(ChartClass, SVGRendererClass) {
-    if (pushUnique(composed, compose)) {
+    if (pushUnique(composed, 'SeriesLabel')) {
         // Leave both events, we handle animation differently (#9815)
         addEvent(ChartClass, 'load', onChartRedraw);
         addEvent(ChartClass, 'redraw', onChartRedraw);
@@ -276,8 +276,10 @@ function drawSeriesLabels(chart) {
             for (i = points.length - 1; i > 0; i -= 1) {
                 if (onArea) {
                     // Centered
-                    x = points[i].chartX - bBox.width / 2;
-                    y = (points[i].chartCenterY || 0) - bBox.height / 2;
+                    x = (points[i].chartCenterX ?? points[i].chartX) -
+                        bBox.width / 2;
+                    y = (points[i].chartCenterY ?? points[i].chartY) -
+                        bBox.height / 2;
                     if (insidePane(x, y, bBox)) {
                         best = checkClearPoint(series, x, y, bBox);
                     }
@@ -418,7 +420,7 @@ function getPointsOnGraph(series) {
     if (!series.xAxis && !series.yAxis) {
         return;
     }
-    const distance = 16, points = series.points, interpolated = [], graph = series.graph || series.area, node = graph && graph.element, inverted = series.chart.inverted, xAxis = series.xAxis, yAxis = series.yAxis, paneLeft = inverted ? yAxis.pos : xAxis.pos, paneTop = inverted ? xAxis.pos : yAxis.pos, seriesLabelOptions = series.options.label || {}, onArea = pick(seriesLabelOptions.onArea, !!series.area), translatedThreshold = yAxis.getThreshold(series.options.threshold), grid = {};
+    const distance = 16, points = series.points, interpolated = [], graph = series.graph || series.area, node = graph && graph.element, inverted = series.chart.inverted, xAxis = series.xAxis, yAxis = series.yAxis, paneLeft = inverted ? yAxis.pos : xAxis.pos, paneTop = inverted ? xAxis.pos : yAxis.pos, paneHeight = inverted ? xAxis.len : yAxis.len, paneWidth = inverted ? yAxis.len : xAxis.len, seriesLabelOptions = series.options.label || {}, onArea = pick(seriesLabelOptions.onArea, !!series.area), translatedThreshold = yAxis.getThreshold(series.options.threshold), grid = {}, chartCenterKey = inverted ? 'chartCenterX' : 'chartCenterY';
     let i, deltaX, deltaY, delta, len, n, j;
     /**
      * Push the point to the interpolated points, but only if that position in
@@ -451,22 +453,22 @@ function getPointsOnGraph(series) {
         }
         len = node.getTotalLength();
         for (i = 0; i < len; i += distance) {
-            const domPoint = node.getPointAtLength(i);
+            const domPoint = node.getPointAtLength(i), plotX = inverted ? paneWidth - domPoint.y : domPoint.x, plotY = inverted ? paneHeight - domPoint.x : domPoint.y;
             pushDiscrete({
-                chartX: paneLeft + domPoint.x,
-                chartY: paneTop + domPoint.y,
-                plotX: domPoint.x,
-                plotY: domPoint.y
+                chartX: paneLeft + plotX,
+                chartY: paneTop + plotY,
+                plotX,
+                plotY
             });
         }
         if (d) {
             graph.attr({ d });
         }
         // Last point
-        const point = points[points.length - 1];
+        const point = points[points.length - 1], pos = point.pos();
         pushDiscrete({
-            chartX: paneLeft + (point.plotX || 0),
-            chartY: paneTop + (point.plotY || 0)
+            chartX: paneLeft + (pos?.[0] || 0),
+            chartY: paneTop + (pos?.[1] || 0)
         });
         // Interpolate
     }
@@ -474,7 +476,7 @@ function getPointsOnGraph(series) {
         len = points.length;
         let last;
         for (i = 0; i < len; i += 1) {
-            const point = points[i], { plotX, plotY, plotHigh } = point;
+            const point = points[i], [plotX, plotY] = point.pos() || [], { plotHigh } = point;
             if (isNumber(plotX) && isNumber(plotY)) {
                 const ctlPoint = {
                     plotX,
@@ -489,8 +491,14 @@ function getPointsOnGraph(series) {
                         ctlPoint.plotY = plotHigh;
                         ctlPoint.chartY = paneTop + plotHigh;
                     }
-                    ctlPoint.chartCenterY = paneTop + ((plotHigh ? plotHigh : plotY) +
-                        pick(point.yBottom, translatedThreshold)) / 2;
+                    if (inverted) {
+                        ctlPoint.chartCenterX = paneLeft + paneWidth - ((plotHigh ? plotHigh : point.plotY || 0) +
+                            pick(point.yBottom, translatedThreshold)) / 2;
+                    }
+                    else {
+                        ctlPoint.chartCenterY = paneTop + ((plotHigh ? plotHigh : plotY) +
+                            pick(point.yBottom, translatedThreshold)) / 2;
+                    }
                 }
                 // Add interpolated points
                 if (last) {
@@ -505,9 +513,9 @@ function getPointsOnGraph(series) {
                                     (ctlPoint.chartX - last.chartX) * (j / n),
                                 chartY: last.chartY +
                                     (ctlPoint.chartY - last.chartY) * (j / n),
-                                chartCenterY: (last.chartCenterY || 0) +
-                                    ((ctlPoint.chartCenterY || 0) -
-                                        (last.chartCenterY || 0)) * (j / n),
+                                [chartCenterKey]: (last[chartCenterKey] || 0) +
+                                    ((ctlPoint[chartCenterKey] || 0) -
+                                        (last[chartCenterKey] || 0)) * (j / n),
                                 plotX: (last.plotX || 0) +
                                     (plotX - (last.plotX || 0)) * (j / n),
                                 plotY: (last.plotY || 0) +