highcharts 10.2.1 → 10.3.1

package/es-modules/Core/Axis/Color/ColorAxis.js

@@ -71,8 +71,6 @@ var ColorAxis = /** @class */ (function (_super) {
         _this.chart = void 0;
         _this.coll = 'colorAxis';
         _this.dataClasses = void 0;
-        _this.legendItem = void 0;
-        _this.legendItems = void 0;
         _this.name = ''; // Prevents 'undefined' in legend in IE8
         _this.options = void 0;
         _this.stops = void 0;
@@ -137,10 +135,10 @@ var ColorAxis = /** @class */ (function (_super) {
      * @private
      */
     ColorAxis.prototype.initDataClasses = function (userOptions) {
-        var axis = this, chart = axis.chart, options = axis.options, len = userOptions.dataClasses.length;
+        var axis = this, chart = axis.chart, legendItem = axis.legendItem = axis.legendItem || {}, len = userOptions.dataClasses.length, options = axis.options;
         var dataClasses, colorCounter = 0, colorCount = chart.options.chart.colorCount;
         axis.dataClasses = dataClasses = [];
-        axis.legendItems = [];
+        legendItem.labels = [];
         (userOptions.dataClasses || []).forEach(function (dataClass, i) {
             var colors;
             dataClass = merge(dataClass);
@@ -214,7 +212,7 @@ var ColorAxis = /** @class */ (function (_super) {
      */
     ColorAxis.prototype.setAxisSize = function () {
         var axis = this;
-        var symbol = axis.legendSymbol;
+        var symbol = axis.legendItem && axis.legendItem.symbol;
         var chart = axis.chart;
         var legendOptions = chart.options.legend || {};
         var x, y, width, height;
@@ -296,7 +294,7 @@ var ColorAxis = /** @class */ (function (_super) {
      */
     ColorAxis.prototype.getOffset = function () {
         var axis = this;
-        var group = axis.legendGroup;
+        var group = axis.legendItem && axis.legendItem.group;
         var sideOffset = axis.chart.axisOffset[axis.side];
         if (group) {
             // Hook for the getOffset method to add groups to this parent
@@ -350,31 +348,24 @@ var ColorAxis = /** @class */ (function (_super) {
      * @private
      */
     ColorAxis.prototype.drawLegendSymbol = function (legend, item) {
-        var axis = this;
-        var padding = legend.padding;
-        var legendOptions = legend.options;
-        var horiz = axis.horiz;
-        var width = pick(legendOptions.symbolWidth, horiz ? ColorAxis.defaultLegendLength : 12);
-        var height = pick(legendOptions.symbolHeight, horiz ? 12 : ColorAxis.defaultLegendLength);
-        var labelPadding = pick(
+        var axis = this, legendItem = item.legendItem || {}, padding = legend.padding, legendOptions = legend.options, itemDistance = pick(legendOptions.itemDistance, 10), horiz = axis.horiz, width = pick(legendOptions.symbolWidth, horiz ? ColorAxis.defaultLegendLength : 12), height = pick(legendOptions.symbolHeight, horiz ? 12 : ColorAxis.defaultLegendLength), labelPadding = pick(
         // @todo: This option is not documented, nor implemented when
         // vertical
         legendOptions.labelPadding, horiz ? 16 : 30);
-        var itemDistance = pick(legendOptions.itemDistance, 10);
         this.setLegendColor();
         // Create the gradient
-        if (!item.legendSymbol) {
-            item.legendSymbol = this.chart.renderer.rect(0, legend.baseline - 11, width, height).attr({
+        if (!legendItem.symbol) {
+            legendItem.symbol = this.chart.renderer.rect(0, legend.baseline - 11, width, height).attr({
                 zIndex: 1
-            }).add(item.legendGroup);
+            }).add(legendItem.group);
         }
         // Set how much space this legend item takes up
-        axis.legendItemWidth = (width +
+        legendItem.labelWidth = (width +
             padding +
             (horiz ?
                 itemDistance :
                 this.options.labels.x + this.maxLabelLength));
-        axis.legendItemHeight = height + padding + (horiz ? labelPadding : 0);
+        legendItem.labelHeight = height + padding + (horiz ? labelPadding : 0);
     };
     /**
      * Fool the legend.
@@ -460,11 +451,7 @@ var ColorAxis = /** @class */ (function (_super) {
      * @emits Highcharts.ColorAxis#event:drawCrosshair
      */
     ColorAxis.prototype.drawCrosshair = function (e, point) {
-        var axis = this;
-        var plotX = point && point.plotX;
-        var plotY = point && point.plotY;
-        var axisPos = axis.pos;
-        var axisLen = axis.len;
+        var axis = this, legendItem = axis.legendItem || {}, plotX = point && point.plotX, plotY = point && point.plotY, axisPos = axis.pos, axisLen = axis.len;
         var crossPos;
         if (point) {
             crossPos = axis.toPixels(point.getNestedProperty(point.series.colorKey));
@@ -481,10 +468,10 @@ var ColorAxis = /** @class */ (function (_super) {
             point.plotY = plotY;
             if (axis.cross &&
                 !axis.cross.addedToColorAxis &&
-                axis.legendGroup) {
+                legendItem.group) {
                 axis.cross
                     .addClass('highcharts-coloraxis-marker')
-                    .add(axis.legendGroup);
+                    .add(legendItem.group);
                 axis.cross.addedToColorAxis = true;
                 if (!axis.chart.styledMode &&
                     typeof axis.crosshair === 'object') {
@@ -543,7 +530,7 @@ var ColorAxis = /** @class */ (function (_super) {
             axis.destroyItems();
         }
         _super.prototype.update.call(this, newOptions, redraw);
-        if (axis.legendItem) {
+        if (axis.legendItem && axis.legendItem.label) {
             axis.setLegendColor();
             legend.colorizeItem(this, true);
         }
@@ -553,15 +540,15 @@ var ColorAxis = /** @class */ (function (_super) {
      * @private
      */
     ColorAxis.prototype.destroyItems = function () {
-        var axis = this;
-        var chart = axis.chart;
-        if (axis.legendItem) {
+        var axis = this, chart = axis.chart, legendItem = axis.legendItem || {};
+        if (legendItem.label) {
             chart.legend.destroyItem(axis);
         }
-        else if (axis.legendItems) {
-            axis.legendItems.forEach(function (item) {
+        else if (legendItem.labels) {
+            for (var _i = 0, _a = legendItem.labels; _i < _a.length; _i++) {
+                var item = _a[_i];
                 chart.legend.destroyItem(item);
-            });
+            }
         }
         chart.isDirtyLegend = true;
     };
@@ -588,12 +575,17 @@ var ColorAxis = /** @class */ (function (_super) {
      * @private
      */
     ColorAxis.prototype.getDataClassLegendSymbols = function () {
-        var axis = this;
-        var chart = axis.chart;
-        var legendItems = axis.legendItems;
-        var legendOptions = chart.options.legend;
-        var valueDecimals = legendOptions.valueDecimals;
-        var valueSuffix = legendOptions.valueSuffix || '';
+        var axis = this, chart = axis.chart, legendItems = (axis.legendItem &&
+            axis.legendItem.labels ||
+            []), legendOptions = chart.options.legend, valueDecimals = pick(legendOptions.valueDecimals, -1), valueSuffix = pick(legendOptions.valueSuffix, '');
+        var getPointsInDataClass = function (i) {
+            return axis.series.reduce(function (points, s) {
+                points.push.apply(points, s.points.filter(function (point) {
+                    return point.dataClass === i;
+                }));
+                return points;
+            }, []);
+        };
         var name;
         if (!legendItems.length) {
             axis.dataClasses.forEach(function (dataClass, i) {
@@ -624,17 +616,23 @@ var ColorAxis = /** @class */ (function (_super) {
                     options: {},
                     drawLegendSymbol: LegendSymbol.drawRectangle,
                     visible: true,
-                    setState: noop,
                     isDataClass: true,
+                    // Override setState to set either normal or inactive
+                    // state to all points in this data class
+                    setState: function (state) {
+                        for (var _i = 0, _a = getPointsInDataClass(i); _i < _a.length; _i++) {
+                            var point = _a[_i];
+                            point.setState(state);
+                        }
+                    },
+                    // Override setState to show or hide all points in this
+                    // data class
                     setVisible: function () {
                         this.visible = vis = axis.visible = !vis;
-                        axis.series.forEach(function (series) {
-                            series.points.forEach(function (point) {
-                                if (point.dataClass === i) {
-                                    point.setVisible(vis);
-                                }
-                            });
-                        });
+                        for (var _i = 0, _a = getPointsInDataClass(i); _i < _a.length; _i++) {
+                            var point = _a[_i];
+                            point.setVisible(vis);
+                        }
                         chart.legend.colorizeItem(this, vis);
                     }
                 }, dataClass));
@@ -653,11 +651,7 @@ var ColorAxis = /** @class */ (function (_super) {
      * @private
      */
     ColorAxis.keepProps = [
-        'legendGroup',
-        'legendItemHeight',
-        'legendItemWidth',
-        'legendItem',
-        'legendSymbol'
+        'legendItem'
     ];
     return ColorAxis;
 }(Axis));

package/es-modules/Core/Axis/Color/ColorAxisComposition.js

@@ -155,7 +155,7 @@ var ColorAxisComposition;
      */
     function onLegendAfterColorizeItem(e) {
         if (e.visible && e.item.legendColor) {
-            e.item.legendSymbol.attr({
+            e.item.legendItem.symbol.attr({
                 fill: e.item.legendColor
             });
         }
@@ -230,7 +230,9 @@ var ColorAxisComposition;
                     point.color || series.color);
             if (color && point.color !== color) {
                 point.color = color;
-                if (series.options.legendType === 'point' && point.legendItem) {
+                if (series.options.legendType === 'point' &&
+                    point.legendItem &&
+                    point.legendItem.label) {
                     series.chart.legend.colorizeItem(point, point.visible);
                 }
             }

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

@@ -0,0 +1,161 @@
+/* *
+ *
+ *  (c) 2010-2021 Torstein Honsi
+ *
+ *  License: www.highcharts.com/license
+ *
+ *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
+ *
+ * */
+'use strict';
+import H from '../Globals.js';
+var isTouchDevice = H.isTouchDevice;
+import U from '../Utilities.js';
+var addEvent = U.addEvent, correctFloat = U.correctFloat, defined = U.defined, isNumber = U.isNumber, pick = U.pick;
+/* *
+ *
+ *  Constants
+ *
+ * */
+var composedClasses = [];
+/* *
+ *
+ *  Functions
+ *
+ * */
+/**
+ * @private
+ */
+function onAxisInit() {
+    var axis = this;
+    if (!axis.navigatorAxis) {
+        axis.navigatorAxis = new NavigatorAxisAdditions(axis);
+    }
+}
+/**
+ * For Stock charts, override selection zooming with some special features
+ * because X axis zooming is already allowed by the Navigator and Range
+ * selector.
+ * @private
+ */
+function onAxisZoom(e) {
+    var axis = this, chart = axis.chart, chartOptions = chart.options, navigator = chartOptions.navigator, navigatorAxis = axis.navigatorAxis, pinchType = chartOptions.chart.zooming.pinchType, rangeSelector = chartOptions.rangeSelector, zoomType = chartOptions.chart.zooming.type;
+    if (axis.isXAxis && ((navigator && navigator.enabled) ||
+        (rangeSelector && 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.
+        }
+        else if (((!isTouchDevice && zoomType === 'xy') ||
+            (isTouchDevice && pinchType === 'xy')) &&
+            axis.options.range) {
+            var previousZoom = navigatorAxis.previousZoom;
+            if (defined(e.newMin)) {
+                navigatorAxis.previousZoom = [axis.min, axis.max];
+            }
+            else if (previousZoom) {
+                e.newMin = previousZoom[0];
+                e.newMax = previousZoom[1];
+                navigatorAxis.previousZoom = void 0;
+            }
+        }
+    }
+    if (typeof e.zoomed !== 'undefined') {
+        e.preventDefault();
+    }
+}
+/* *
+ *
+ *  Class
+ *
+ * */
+/**
+ * @private
+ * @class
+ */
+var NavigatorAxisAdditions = /** @class */ (function () {
+    /* *
+     *
+     *  Constructors
+     *
+     * */
+    function NavigatorAxisAdditions(axis) {
+        this.axis = axis;
+    }
+    /* *
+     *
+     *  Static Functions
+     *
+     * */
+    /**
+     * @private
+     */
+    NavigatorAxisAdditions.compose = function (AxisClass) {
+        if (composedClasses.indexOf(AxisClass) === -1) {
+            composedClasses.push(AxisClass);
+            AxisClass.keepProps.push('navigatorAxis');
+            addEvent(AxisClass, 'init', onAxisInit);
+            addEvent(AxisClass, 'zoom', onAxisZoom);
+        }
+    };
+    /* *
+     *
+     *  Functions
+     *
+     * */
+    /**
+     * @private
+     */
+    NavigatorAxisAdditions.prototype.destroy = function () {
+        this.axis = void 0;
+    };
+    /**
+     * Add logic to normalize the zoomed range in order to preserve the pressed
+     * state of range selector buttons
+     *
+     * @private
+     * @function Highcharts.Axis#toFixedRange
+     */
+    NavigatorAxisAdditions.prototype.toFixedRange = function (pxMin, pxMax, fixedMin, fixedMax) {
+        var axis = this.axis, chart = axis.chart;
+        var newMin = pick(fixedMin, axis.translate(pxMin, true, !axis.horiz)), newMax = pick(fixedMax, axis.translate(pxMax, true, !axis.horiz));
+        var fixedRange = chart && chart.fixedRange, halfPointRange = (axis.pointRange || 0) / 2, changeRatio = fixedRange && (newMax - newMin) / fixedRange;
+        // Add/remove half point range to/from the extremes (#1172)
+        if (!defined(fixedMin)) {
+            newMin = correctFloat(newMin + halfPointRange);
+        }
+        if (!defined(fixedMax)) {
+            newMax = correctFloat(newMax - halfPointRange);
+        }
+        // If the difference between the fixed range and the actual requested
+        // range is too great, the user is dragging across an ordinal gap, and
+        // we need to release the range selector button.
+        if (changeRatio > 0.7 && changeRatio < 1.3) {
+            if (fixedMax) {
+                newMin = newMax - fixedRange;
+            }
+            else {
+                newMax = newMin + fixedRange;
+            }
+        }
+        if (!isNumber(newMin) || !isNumber(newMax)) { // #1195, #7411
+            newMin = newMax = void 0;
+        }
+        return {
+            min: newMin,
+            max: newMax
+        };
+    };
+    return NavigatorAxisAdditions;
+}());
+/* *
+ *
+ *  Default Export
+ *
+ * */
+export default NavigatorAxisAdditions;

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

@@ -615,7 +615,8 @@ var OrdinalAxis;
                     // For an axis with multiple series, check if the distance
                     // between points is identical throughout all series.
                     if (i > 0 &&
-                        series.options.id !== 'highcharts-navigator-series') {
+                        series.options.id !== 'highcharts-navigator-series' &&
+                        series.processedXData.length > 1) {
                         adjustOrdinalExtremesPoints =
                             distanceBetweenPoint_1 !== series.processedXData[1] -
                                 series.processedXData[0];

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

@@ -108,7 +108,7 @@ var PlotLineOrBand = /** @class */ (function () {
             /**
              * SVG element of the plot line or band.
              *
-             * @name Highcharts.PlotLineOrBand#svgElement
+             * @name Highcharts.PlotLineOrBand#svgElem
              * @type {Highcharts.SVGElement}
              */
             plotLine.svgElem = svgElem = renderer

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

@@ -9,7 +9,7 @@
  * */
 'use strict';
 import AxisDefaults from './AxisDefaults.js';
-import D from '../DefaultOptions.js';
+import D from '../Defaults.js';
 var defaultOptions = D.defaultOptions;
 import H from '../Globals.js';
 var noop = H.noop;
@@ -582,16 +582,31 @@ var RadialAxis;
     function onAxisAfterInit() {
         var chart = this.chart, options = this.options, isHidden = chart.angular && this.isXAxis, pane = this.pane, paneOptions = pane && pane.options;
         if (!isHidden && pane && (chart.angular || chart.polar)) {
+            var fullCircle = Math.PI * 2, 
             // Start and end angle options are given in degrees relative to
             // top, while internal computations are in radians relative to
             // right (like SVG).
+            start = (pick(paneOptions.startAngle, 0) - 90) * Math.PI / 180, end = (pick(paneOptions.endAngle, pick(paneOptions.startAngle, 0) + 360) - 90) * Math.PI / 180;
             // Y axis in polar charts
             this.angleRad = (options.angle || 0) * Math.PI / 180;
             // Gauges
-            this.startAngleRad =
-                (paneOptions.startAngle - 90) * Math.PI / 180;
-            this.endAngleRad = (pick(paneOptions.endAngle, paneOptions.startAngle + 360) - 90) * Math.PI / 180; // Gauges
+            this.startAngleRad = start;
+            this.endAngleRad = end;
             this.offset = options.offset || 0;
+            // Normalize Start and End to <0, 2*PI> range
+            // (in degrees: <0,360>)
+            var normalizedStart = (start % fullCircle + fullCircle) %
+                fullCircle, normalizedEnd = (end % fullCircle + fullCircle) % fullCircle;
+            // Move normalized angles to <-PI, PI> range (<-180, 180>)
+            // to match values returned by Math.atan2()
+            if (normalizedStart > Math.PI) {
+                normalizedStart -= fullCircle;
+            }
+            if (normalizedEnd > Math.PI) {
+                normalizedEnd -= fullCircle;
+            }
+            this.normalizedStartAngleRad = normalizedStart;
+            this.normalizedEndAngleRad = normalizedEnd;
         }
     }
     /**
@@ -661,7 +676,6 @@ var RadialAxis;
         // Disable certain features on angular and polar axes
         if (angular || polar) {
             this.isRadial = true;
-            chartOptions.chart.zooming.type = null;
             if (!this.labelCollector) {
                 this.labelCollector = this.createLabelCollector();
             }

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

@@ -156,7 +156,7 @@ var Tick = /** @class */ (function () {
                 return labelOptions.formatter.call(ctx, ctx);
             }
             if (labelOptions.format) {
-                ctx.text = axis.defaultLabelFormatter.call(ctx);
+                ctx.text = axis.defaultLabelFormatter.call(ctx, ctx);
                 return F.format(labelOptions.format, ctx, chart);
             }
             return axis.defaultLabelFormatter.call(ctx, ctx);

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

@@ -0,0 +1,71 @@
+/* *
+ *
+ *  (c) 2010-2021 Torstein Honsi
+ *
+ *  Extenstion for 3d axes
+ *
+ *  License: www.highcharts.com/license
+ *
+ *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
+ *
+ * */
+'use strict';
+import U from '../Utilities.js';
+var addEvent = U.addEvent, extend = U.extend, wrap = U.wrap;
+/* *
+ *
+ *  Constants
+ *
+ * */
+var composedClasses = [];
+/* *
+ *
+ *  Functions
+ *
+ * */
+/**
+ * @private
+ */
+function compose(TickClass) {
+    if (composedClasses.indexOf(TickClass) === -1) {
+        composedClasses.push(TickClass);
+        addEvent(TickClass, 'afterGetLabelPosition', onTickAfterGetLabelPosition);
+        wrap(TickClass.prototype, 'getMarkPath', wrapTickGetMarkPath);
+    }
+}
+/**
+ * @private
+ */
+function onTickAfterGetLabelPosition(e) {
+    var axis3D = this.axis.axis3D;
+    if (axis3D) {
+        extend(e.pos, axis3D.fix3dPosition(e.pos));
+    }
+}
+/**
+ * @private
+ */
+function wrapTickGetMarkPath(proceed) {
+    var axis3D = this.axis.axis3D, path = proceed.apply(this, [].slice.call(arguments, 1));
+    if (axis3D) {
+        var start = path[0];
+        var end = path[1];
+        if (start[0] === 'M' && end[0] === 'L') {
+            var pArr = [
+                axis3D.fix3dPosition({ x: start[1], y: start[2], z: 0 }),
+                axis3D.fix3dPosition({ x: end[1], y: end[2], z: 0 })
+            ];
+            return this.axis.chart.renderer.toLineSegments(pArr);
+        }
+    }
+    return path;
+}
+/* *
+ *
+ *  Default Export
+ *
+ * */
+var Tick3DAdditions = {
+    compose: compose
+};
+export default Tick3DAdditions;

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

@@ -11,6 +11,8 @@
 import A from '../Animation/AnimationUtilities.js';
 var animate = A.animate, animObject = A.animObject, setAnimation = A.setAnimation;
 import Axis from '../Axis/Axis.js';
+import D from '../Defaults.js';
+var defaultOptions = D.defaultOptions, defaultTime = D.defaultTime;
 import FormatUtilities from '../FormatUtilities.js';
 var numberFormat = FormatUtilities.numberFormat;
 import Foundation from '../Foundation.js';
@@ -19,8 +21,6 @@ import H from '../Globals.js';
 var charts = H.charts, doc = H.doc, marginNames = H.marginNames, svg = H.svg, win = H.win;
 import Legend from '../Legend/Legend.js';
 import MSPointer from '../MSPointer.js';
-import D from '../DefaultOptions.js';
-var defaultOptions = D.defaultOptions, defaultTime = D.defaultTime;
 import Pointer from '../Pointer.js';
 import RendererRegistry from '../Renderer/RendererRegistry.js';
 import SeriesRegistry from '../Series/SeriesRegistry.js';
@@ -426,10 +426,12 @@ var Chart = /** @class */ (function () {
         var series = options.series, box = (options.visiblePlotOnly && scrollablePlotBox) || plotBox, x = options.inverted ? plotY : plotX, y = options.inverted ? plotX : plotY, e = {
             x: x,
             y: y,
-            isInsidePlot: true
+            isInsidePlot: true,
+            options: options
         };
         if (!options.ignoreX) {
-            var xAxis = (series && (inverted ? series.yAxis : series.xAxis)) || {
+            var xAxis = (series &&
+                (inverted && !this.polar ? series.yAxis : series.xAxis)) || {
                 pos: plotLeft,
                 len: Infinity
             };
@@ -441,7 +443,7 @@ var Chart = /** @class */ (function () {
             }
         }
         if (!options.ignoreY && e.isInsidePlot) {
-            var yAxis = (series && (inverted ? series.xAxis : series.yAxis)) || {
+            var yAxis = (options.axis && !options.axis.isXAxis && options.axis) || (series && (inverted ? series.xAxis : series.yAxis)) || {
                 pos: plotTop,
                 len: Infinity
             };
@@ -2566,8 +2568,7 @@ var Chart = /** @class */ (function () {
      * @param {Highcharts.SelectEventObject} event
      */
     Chart.prototype.zoom = function (event) {
-        var chart = this, pointer = chart.pointer, mouseDownPos = chart.inverted ?
-            pointer.mouseDownX : pointer.mouseDownY;
+        var chart = this, pointer = chart.pointer;
         var displayButton = false, hasZoomed;
         // If zoom is called with no arguments, reset the axes
         if (!event || event.resetSelection) {
@@ -2578,20 +2579,12 @@ var Chart = /** @class */ (function () {
         }
         else { // else, zoom in on all axes
             event.xAxis.concat(event.yAxis).forEach(function (axisData) {
-                var axis = axisData.axis, axisStartPos = chart.inverted ? axis.left : axis.top, axisEndPos = chart.inverted ?
-                    axisStartPos + axis.width : axisStartPos + axis.height, isXAxis = axis.isXAxis;
-                var isWithinPane = false;
-                // Check if zoomed area is within the pane (#1289).
-                // In case of multiple panes only one pane should be zoomed.
-                if ((!isXAxis &&
-                    mouseDownPos >= axisStartPos &&
-                    mouseDownPos <= axisEndPos) ||
-                    isXAxis ||
-                    !defined(mouseDownPos)) {
-                    isWithinPane = true;
-                }
+                var axis = axisData.axis, isXAxis = axis.isXAxis;
                 // don't zoom more than minRange
-                if (pointer[isXAxis ? 'zoomX' : 'zoomY'] && isWithinPane) {
+                if (pointer[isXAxis ? 'zoomX' : 'zoomY'] &&
+                    (defined(pointer.mouseDownX) &&
+                        defined(pointer.mouseDownY) &&
+                        chart.isInsidePlot(pointer.mouseDownX - chart.plotLeft, pointer.mouseDownY - chart.plotTop, { axis: axis })) || !defined(chart.inverted ? pointer.mouseDownX : pointer.mouseDownY)) {
                     hasZoomed = axis.zoom(axisData.min, axisData.max);
                     if (axis.displayBtn) {
                         displayButton = true;
@@ -2921,6 +2914,9 @@ export default Chart;
 /**
  * @interface Highcharts.ChartIsInsideOptionsObject
  */ /**
+* @name Highcharts.ChartIsInsideOptionsObject#axis
+* @type {Highcharts.Axis|undefined}
+*/ /**
 * @name Highcharts.ChartIsInsideOptionsObject#ignoreX
 * @type {boolean|undefined}
 */ /**

package/es-modules/Core/Chart/Chart3D.js

@@ -12,10 +12,10 @@
 'use strict';
 import Color from '../Color/Color.js';
 var color = Color.parse;
+import D from '../Defaults.js';
+var genericDefaultOptions = D.defaultOptions;
 import Math3D from '../Math3D.js';
 var perspective = Math3D.perspective, shapeArea3D = Math3D.shapeArea3D;
-import D from '../DefaultOptions.js';
-var genericDefaultOptions = D.defaultOptions;
 import U from '../Utilities.js';
 var addEvent = U.addEvent, isArray = U.isArray, merge = U.merge, pick = U.pick, wrap = U.wrap;
 var Chart3D;
@@ -672,8 +672,8 @@ var Chart3D;
         addEvent(ChartClass, 'beforeRedraw', onBeforeRedraw);
         addEvent(ChartClass, 'beforeRender', onBeforeRender);
         wrap(chartProto, 'isInsidePlot', wrapIsInsidePlot);
-        wrap(ChartClass, 'renderSeries', wrapRenderSeries);
-        wrap(ChartClass, 'setClassName', wrapSetClassName);
+        wrap(chartProto, 'renderSeries', wrapRenderSeries);
+        wrap(chartProto, 'setClassName', wrapSetClassName);
     }
     Chart3D.compose = compose;
     /**