@amcharts/amcharts5 5.0.0-beta.3 → 5.0.0-beta.30

package/.internal/charts/xy/XYChart.js

@@ -2,7 +2,7 @@ import { __extends, __read } from "tslib";
 import { Container } from "../../core/render/Container";
 import { Rectangle } from "../../core/render/Rectangle";
 import { SerialChart } from "../../core/render/SerialChart";
-import { List } from "../../core/util/List";
+import { ListAutoDispose } from "../../core/util/List";
 import { p100 } from "../../core/util/Percent";
 import { Color } from "../../core/util/Color";
 import { Button } from "../../core/render/Button";
@@ -28,7 +28,7 @@ var XYChart = /** @class */ (function (_super) {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: new List()
+            value: new ListAutoDispose()
         });
         /**
          * A list of vertical axes.
@@ -37,7 +37,7 @@ var XYChart = /** @class */ (function (_super) {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: new List()
+            value: new ListAutoDispose()
         });
         /**
          * A [[Container]] located on top of the chart, used to store top horizontal
@@ -95,6 +95,10 @@ var XYChart = /** @class */ (function (_super) {
          * A [[Container]] located in the middle of the chart, used to store actual
          * plots (series).
          *
+         * NOTE: `plotContainer` will automatically have its `background` preset. If
+         * you need to modify background or outline for chart's plot area, you can
+         * use `plotContainer.get("background")` for that.
+         *
          * @see {@link https://www.amcharts.com/docs/v5/charts/xy-chart/xy-chart-containers/} for more info
          * @default Container.new()
          */
@@ -176,27 +180,14 @@ var XYChart = /** @class */ (function (_super) {
             writable: true,
             value: { x: 0, y: 0 }
         });
+        Object.defineProperty(_this, "_wheelDp", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         return _this;
     }
-    /**
-     * Use this method to create an instance of this class.
-     *
-     * @see {@link https://www.amcharts.com/docs/v5/getting-started/#New_element_syntax} for more info
-     * @param   root      Root element
-     * @param   settings  Settings
-     * @param   template  Template
-     * @return            Instantiated object
-     */
-    Object.defineProperty(XYChart, "new", {
-        enumerable: false,
-        configurable: true,
-        writable: true,
-        value: function (root, settings, template) {
-            var x = new XYChart(root, settings, true, template);
-            x._afterNew();
-            return x;
-        }
-    });
     Object.defineProperty(XYChart.prototype, "_afterNew", {
         enumerable: false,
         configurable: true,
@@ -204,156 +195,190 @@ var XYChart = /** @class */ (function (_super) {
         value: function () {
             var _this = this;
             _super.prototype._afterNew.call(this);
+            this._disposers.push(this.xAxes);
+            this._disposers.push(this.yAxes);
             var root = this._root;
             var verticalLayout = this._root.verticalLayout;
-            this.zoomOutButton.events.on("click", function () {
+            var zoomOutButton = this.zoomOutButton;
+            zoomOutButton.events.on("click", function () {
                 _this.zoomOut();
             });
-            this.zoomOutButton.set("opacity", 0);
-            this.zoomOutButton.states.lookup("default").set("opacity", 1);
+            zoomOutButton.set("opacity", 0);
+            zoomOutButton.states.lookup("default").set("opacity", 1);
             this.chartContainer.set("layout", verticalLayout);
-            this.plotContainer.children.push(this.seriesContainer);
+            var plotContainer = this.plotContainer;
+            plotContainer.children.push(this.seriesContainer);
             this._disposers.push(this._processAxis(this.xAxes, this.bottomAxesContainer));
             this._disposers.push(this._processAxis(this.yAxes, this.leftAxesContainer));
-            this.plotContainer.children.push(this.bulletsContainer);
-            this.plotContainer.children.push(this.topGridContainer);
+            plotContainer.children.push(this.topGridContainer);
+            plotContainer.children.push(this.bulletsContainer);
+            plotContainer.children.moveValue(zoomOutButton);
             // Setting trasnparent background so that full body of the plot container
             // is interactive
-            this.plotContainer.set("interactive", true);
-            this.plotContainer.set("interactiveChildren", false);
-            this.plotContainer.set("background", Rectangle.new(root, {
+            plotContainer.set("interactive", true);
+            plotContainer.set("interactiveChildren", false);
+            plotContainer.set("background", Rectangle.new(root, {
                 themeTags: ["xy", "background"],
                 fill: Color.fromHex(0x000000),
                 fillOpacity: 0
             }));
-            this._disposers.push(this.plotContainer.events.on("pointerdown", function (event) {
+            this._disposers.push(plotContainer.events.on("pointerdown", function (event) {
                 _this._handlePlotDown(event.originalEvent);
             }));
-            this._disposers.push(this.plotContainer.events.on("globalpointerup", function (event) {
+            this._disposers.push(plotContainer.events.on("globalpointerup", function (event) {
                 _this._handlePlotUp(event.originalEvent);
             }));
-            this._disposers.push(this.plotContainer.events.on("globalpointermove", function (event) {
+            this._disposers.push(plotContainer.events.on("globalpointermove", function (event) {
                 _this._handlePlotMove(event.originalEvent);
             }));
-            // TODO: maybe set this on-demand only and if wheelX/wheelY are actually set
-            // TODO: also properly dispose those events if wheelX/wheelY is disabled
-            this.plotContainer.set("wheelable", true);
-            this._disposers.push(this.plotContainer.events.on("wheel", function (event) {
-                var wheelX = _this.get("wheelX");
-                var wheelY = _this.get("wheelY");
-                if (wheelX !== "none" || wheelY !== "none") {
+        }
+    });
+    Object.defineProperty(XYChart.prototype, "_removeSeries", {
+        enumerable: false,
+        configurable: true,
+        writable: true,
+        value: function (series) {
+            var xAxis = series.get("xAxis");
+            if (xAxis) {
+                $array.remove(xAxis.series, series);
+            }
+            var yAxis = series.get("yAxis");
+            if (yAxis) {
+                $array.remove(yAxis.series, series);
+            }
+            _super.prototype._removeSeries.call(this, series);
+        }
+    });
+    Object.defineProperty(XYChart.prototype, "_handleSetWheel", {
+        enumerable: false,
+        configurable: true,
+        writable: true,
+        value: function () {
+            var _this = this;
+            var wheelX = this.get("wheelX");
+            var wheelY = this.get("wheelY");
+            var plotContainer = this.plotContainer;
+            if (wheelX !== "none" || wheelY !== "none") {
+                plotContainer.set("wheelable", true);
+                this._wheelDp = plotContainer.events.on("wheel", function (event) {
                     var wheelEvent = event.originalEvent;
-                    var plotContainer_1 = _this.plotContainer;
-                    var plotPoint_1 = plotContainer_1._display.toLocal(_this._root.documentPointToRoot({ x: wheelEvent.clientX, y: wheelEvent.clientY }));
-                    var wheelStep_1 = _this.get("wheelStep", 0.2);
-                    var shiftY_1 = wheelEvent.deltaY / 100;
-                    var shiftX_1 = wheelEvent.deltaX / 100;
-                    if ((wheelX === "zoomX" || wheelX === "zoomXY") && shiftX_1 != 0) {
+                    var plotPoint = plotContainer._display.toLocal(_this._root.documentPointToRoot({ x: wheelEvent.clientX, y: wheelEvent.clientY }));
+                    var wheelStep = _this.get("wheelStep", 0.2);
+                    var shiftY = wheelEvent.deltaY / 100;
+                    var shiftX = wheelEvent.deltaX / 100;
+                    if ((wheelX === "zoomX" || wheelX === "zoomXY") && shiftX != 0) {
                         _this.xAxes.each(function (axis) {
                             if (axis.get("zoomX")) {
                                 var start = axis.get("start");
                                 var end = axis.get("end");
-                                var position = axis.fixPosition(plotPoint_1.x / plotContainer_1.width());
-                                var newStart = start - wheelStep_1 * (end - start) * shiftX_1 * position;
-                                var newEnd = end + wheelStep_1 * (end - start) * shiftX_1 * (1 - position);
+                                var position = axis.fixPosition(plotPoint.x / plotContainer.width());
+                                var newStart = start - wheelStep * (end - start) * shiftX * position;
+                                var newEnd = end + wheelStep * (end - start) * shiftX * (1 - position);
                                 if (1 / (newEnd - newStart) < axis.get("maxZoomFactor", Infinity)) {
                                     axis.zoom(newStart, newEnd);
                                 }
                             }
                         });
                     }
-                    if ((wheelY === "zoomX" || wheelY === "zoomXY") && shiftY_1 != 0) {
+                    if ((wheelY === "zoomX" || wheelY === "zoomXY") && shiftY != 0) {
                         _this.xAxes.each(function (axis) {
                             if (axis.get("zoomX")) {
                                 var start = axis.get("start");
                                 var end = axis.get("end");
-                                var position = axis.fixPosition(plotPoint_1.x / plotContainer_1.width());
-                                var newStart = start - wheelStep_1 * (end - start) * shiftY_1 * position;
-                                var newEnd = end + wheelStep_1 * (end - start) * shiftY_1 * (1 - position);
+                                var position = axis.fixPosition(plotPoint.x / plotContainer.width());
+                                var newStart = start - wheelStep * (end - start) * shiftY * position;
+                                var newEnd = end + wheelStep * (end - start) * shiftY * (1 - position);
                                 if (1 / (newEnd - newStart) < axis.get("maxZoomFactor", Infinity)) {
                                     axis.zoom(newStart, newEnd);
                                 }
                             }
                         });
                     }
-                    if ((wheelX === "zoomY" || wheelX === "zoomXY") && shiftX_1 != 0) {
+                    if ((wheelX === "zoomY" || wheelX === "zoomXY") && shiftX != 0) {
                         _this.yAxes.each(function (axis) {
                             if (axis.get("zoomY")) {
                                 var start = axis.get("start");
                                 var end = axis.get("end");
-                                var position = axis.fixPosition(plotPoint_1.y / plotContainer_1.height());
-                                var newStart = start - wheelStep_1 * (end - start) * shiftX_1 * position;
-                                var newEnd = end + wheelStep_1 * (end - start) * shiftX_1 * (1 - position);
+                                var position = axis.fixPosition(plotPoint.y / plotContainer.height());
+                                var newStart = start - wheelStep * (end - start) * shiftX * position;
+                                var newEnd = end + wheelStep * (end - start) * shiftX * (1 - position);
                                 if (1 / (newEnd - newStart) < axis.get("maxZoomFactor", Infinity)) {
                                     axis.zoom(newStart, newEnd);
                                 }
                             }
                         });
                     }
-                    if ((wheelY === "zoomY" || wheelY === "zoomXY") && shiftY_1 != 0) {
+                    if ((wheelY === "zoomY" || wheelY === "zoomXY") && shiftY != 0) {
                         _this.yAxes.each(function (axis) {
                             if (axis.get("zoomY")) {
                                 var start = axis.get("start");
                                 var end = axis.get("end");
-                                var position = axis.fixPosition(plotPoint_1.y / plotContainer_1.height());
-                                var newStart = start - wheelStep_1 * (end - start) * shiftY_1 * position;
-                                var newEnd = end + wheelStep_1 * (end - start) * shiftY_1 * (1 - position);
+                                var position = axis.fixPosition(plotPoint.y / plotContainer.height());
+                                var newStart = start - wheelStep * (end - start) * shiftY * position;
+                                var newEnd = end + wheelStep * (end - start) * shiftY * (1 - position);
                                 if (1 / (newEnd - newStart) < axis.get("maxZoomFactor", Infinity)) {
                                     axis.zoom(newStart, newEnd);
                                 }
                             }
                         });
                     }
-                    if ((wheelX === "panX" || wheelX === "panXY") && shiftX_1 != 0) {
+                    if ((wheelX === "panX" || wheelX === "panXY") && shiftX != 0) {
                         _this.xAxes.each(function (axis) {
                             if (axis.get("panX")) {
                                 var start = axis.get("start");
                                 var end = axis.get("end");
-                                var position = axis.fixPosition(plotPoint_1.x / plotContainer_1.width());
-                                var newStart = start + wheelStep_1 * (end - start) * shiftX_1 * position;
-                                var newEnd = end + wheelStep_1 * (end - start) * shiftX_1 * (1 - position);
+                                var position = axis.fixPosition(plotPoint.x / plotContainer.width());
+                                var newStart = start + wheelStep * (end - start) * shiftX * position;
+                                var newEnd = end + wheelStep * (end - start) * shiftX * (1 - position);
                                 axis.zoom(newStart, newEnd);
                             }
                         });
                     }
-                    if ((wheelY === "panX" || wheelY === "panXY") && shiftY_1 != 0) {
+                    if ((wheelY === "panX" || wheelY === "panXY") && shiftY != 0) {
                         _this.xAxes.each(function (axis) {
                             if (axis.get("panX")) {
                                 var start = axis.get("start");
                                 var end = axis.get("end");
-                                var position = axis.fixPosition(plotPoint_1.x / plotContainer_1.width());
-                                var newStart = start + wheelStep_1 * (end - start) * shiftY_1 * position;
-                                var newEnd = end + wheelStep_1 * (end - start) * shiftY_1 * (1 - position);
+                                var position = axis.fixPosition(plotPoint.x / plotContainer.width());
+                                var newStart = start + wheelStep * (end - start) * shiftY * position;
+                                var newEnd = end + wheelStep * (end - start) * shiftY * (1 - position);
                                 axis.zoom(newStart, newEnd);
                             }
                         });
                     }
-                    if ((wheelX === "panY" || wheelX === "panXY") && shiftX_1 != 0) {
+                    if ((wheelX === "panY" || wheelX === "panXY") && shiftX != 0) {
                         _this.yAxes.each(function (axis) {
                             if (axis.get("panY")) {
                                 var start = axis.get("start");
                                 var end = axis.get("end");
-                                var position = axis.fixPosition(plotPoint_1.y / plotContainer_1.height());
-                                var newStart = start + wheelStep_1 * (end - start) * shiftX_1 * position;
-                                var newEnd = end + wheelStep_1 * (end - start) * shiftX_1 * (1 - position);
+                                var position = axis.fixPosition(plotPoint.y / plotContainer.height());
+                                var newStart = start + wheelStep * (end - start) * shiftX * position;
+                                var newEnd = end + wheelStep * (end - start) * shiftX * (1 - position);
                                 axis.zoom(newStart, newEnd);
                             }
                         });
                     }
-                    if ((wheelY === "panY" || wheelY === "panXY") && shiftY_1 != 0) {
+                    if ((wheelY === "panY" || wheelY === "panXY") && shiftY != 0) {
                         _this.yAxes.each(function (axis) {
                             if (axis.get("panY")) {
                                 var start = axis.get("start");
                                 var end = axis.get("end");
-                                var position = axis.fixPosition(plotPoint_1.y / plotContainer_1.height());
-                                var newStart = start + wheelStep_1 * (end - start) * shiftY_1 * position;
-                                var newEnd = end + wheelStep_1 * (end - start) * shiftY_1 * (1 - position);
+                                var position = axis.fixPosition(plotPoint.y / plotContainer.height());
+                                var newStart = start + wheelStep * (end - start) * shiftY * position;
+                                var newEnd = end + wheelStep * (end - start) * shiftY * (1 - position);
                                 axis.zoom(newStart, newEnd);
                             }
                         });
                     }
+                });
+                this._disposers.push(this._wheelDp);
+            }
+            else {
+                plotContainer.set("wheelable", false);
+                if (this._wheelDp) {
+                    this._wheelDp.dispose();
                 }
-            }));
+            }
         }
     });
     Object.defineProperty(XYChart.prototype, "_handlePlotDown", {
@@ -392,32 +417,6 @@ var XYChart = /** @class */ (function (_super) {
         value: function (_event) {
             // TODO: handle multitouch
             this._downPoint = undefined;
-            /*
-            this.xAxes.each((axis) => {
-                let start = axis.get("start");
-                let end = axis.get("end");
-    
-                if(start < 0){
-                    axis.zoom(0, end - start);
-                }
-    
-                if(end > 1){
-                    axis.zoom(start - (end - 1), 1);
-                }
-            })
-    
-            this.yAxes.each((axis) => {
-                let start = axis.get("start");
-                let end = axis.get("end");
-    
-                if(start < 0){
-                    axis.zoom(0, end - start);
-                }
-    
-                if(end > 1){
-                    axis.zoom(start - (end - 1), 1);
-                }
-            })*/
         }
     });
     Object.defineProperty(XYChart.prototype, "_handlePlotMove", {
@@ -428,8 +427,8 @@ var XYChart = /** @class */ (function (_super) {
             // TODO: handle multitouch
             var downPoint = this._downPoint;
             if (downPoint) {
-                var plotContainer_2 = this.plotContainer;
-                var local_1 = this.plotContainer._display.toLocal(this._root.documentPointToRoot({ x: event.clientX, y: event.clientY }));
+                var plotContainer_1 = this.plotContainer;
+                var local_1 = plotContainer_1._display.toLocal(this._root.documentPointToRoot({ x: event.clientX, y: event.clientY }));
                 var panX = this.get("panX");
                 var panY = this.get("panY");
                 if (panX) {
@@ -443,7 +442,7 @@ var XYChart = /** @class */ (function (_super) {
                             var panStart = axis._panStart;
                             var panEnd = axis._panEnd;
                             var difference = (panEnd - panStart);
-                            var deltaX = difference * (downPoint.x - local_1.x) / plotContainer_2.width();
+                            var deltaX = difference * (downPoint.x - local_1.x) / plotContainer_1.width();
                             if (axis.get("renderer").get("inversed")) {
                                 deltaX *= -1;
                             }
@@ -470,7 +469,7 @@ var XYChart = /** @class */ (function (_super) {
                             var panStart = axis._panStart;
                             var panEnd = axis._panEnd;
                             var difference = (panEnd - panStart);
-                            var deltaY = difference * (downPoint.y - local_1.y) / plotContainer_2.height();
+                            var deltaY = difference * (downPoint.y - local_1.y) / plotContainer_1.height();
                             if (axis.get("renderer").get("inversed")) {
                                 deltaY *= -1;
                             }
@@ -524,6 +523,12 @@ var XYChart = /** @class */ (function (_super) {
                             }
                         }
                     });
+                    $array.each(snapToSeries, function (series) {
+                        var tooltip = series.get("tooltip");
+                        if (tooltip) {
+                            tooltip._setDataItem(undefined);
+                        }
+                    });
                     if (closestItem_1) {
                         var series = closestItem_1.component;
                         series.showDataItemTooltip(closestItem_1);
@@ -562,32 +567,19 @@ var XYChart = /** @class */ (function (_super) {
         value: function () {
             var _this = this;
             _super.prototype._prepareChildren.call(this);
-            // this can't go to process series as theme is not know for SB chart add the moment
             this.series.each(function (series) {
-                var colorSet = _this.get("colors");
-                var color = colorSet.next();
-                if (series.get("stroke") == null) {
-                    series.set("stroke", color);
-                }
-                if (series.get("fill") == null) {
-                    series.set("fill", color);
-                }
+                _this._colorize(series);
             });
+            if (this.isDirty("wheelX") || this.isDirty("wheelY")) {
+                this._handleSetWheel();
+            }
             if (this.isDirty("cursor")) {
                 var previous = this._prevSettings.cursor;
                 var cursor = this.get("cursor");
                 if (cursor !== previous) {
                     this._disposeProperty("cursor");
                     if (previous) {
-                        if (previous.get("autoDispose")) {
-                            previous.dispose();
-                        }
-                        else {
-                            var parent_1 = previous.parent;
-                            if (parent_1) {
-                                parent_1.children.removeValue(previous);
-                            }
-                        }
+                        previous.dispose();
                     }
                     if (cursor) {
                         cursor._setChart(this);
@@ -596,7 +588,8 @@ var XYChart = /** @class */ (function (_super) {
                             _this._handleCursorSelectEnd();
                         }));
                     }
-                    this.setRaw("cursor", cursor); // to reset previous value
+                    //this.setRaw("cursor", cursor) // to reset previous value
+                    this._prevSettings.cursor = cursor;
                 }
             }
             if (this.isDirty("scrollbarX")) {
@@ -605,18 +598,12 @@ var XYChart = /** @class */ (function (_super) {
                 if (scrollbarX !== previous) {
                     this._disposeProperty("scrollbarX");
                     if (previous) {
-                        if (previous.get("autoDispose")) {
-                            previous.dispose();
-                        }
-                        else {
-                            var parent_2 = previous.parent;
-                            if (parent_2) {
-                                parent_2.children.removeValue(previous);
-                            }
-                        }
+                        previous.dispose();
                     }
                     if (scrollbarX) {
-                        this.topAxesContainer.children.push(scrollbarX);
+                        if (!scrollbarX.parent) {
+                            this.topAxesContainer.children.push(scrollbarX);
+                        }
                         this._pushPropertyDisposer("scrollbarX", scrollbarX.events.on("rangechanged", function (e) {
                             _this._handleScrollbar(_this.xAxes, e.start, e.end);
                         }));
@@ -626,7 +613,7 @@ var XYChart = /** @class */ (function (_super) {
                             return axis ? axis.getTooltipText(position) || "" : "";
                         });
                     }
-                    this.setRaw("scrollbarX", scrollbarX); // to reset previous value
+                    this._prevSettings.scrollbarX = scrollbarX;
                 }
             }
             if (this.isDirty("scrollbarY")) {
@@ -635,18 +622,12 @@ var XYChart = /** @class */ (function (_super) {
                 if (scrollbarY !== previous) {
                     this._disposeProperty("scrollbarY");
                     if (previous) {
-                        if (previous.get("autoDispose")) {
-                            previous.dispose();
-                        }
-                        else {
-                            var parent_3 = previous.parent;
-                            if (parent_3) {
-                                parent_3.children.removeValue(previous);
-                            }
-                        }
+                        previous.dispose();
                     }
                     if (scrollbarY) {
-                        this.rightAxesContainer.children.push(scrollbarY);
+                        if (!scrollbarY.parent) {
+                            this.rightAxesContainer.children.push(scrollbarY);
+                        }
                         this._pushPropertyDisposer("scrollbarY", scrollbarY.events.on("rangechanged", function (e) {
                             _this._handleScrollbar(_this.yAxes, e.start, e.end);
                         }));
@@ -656,12 +637,36 @@ var XYChart = /** @class */ (function (_super) {
                             return axis ? axis.getTooltipText(position) || "" : "";
                         });
                     }
-                    this.setRaw("scrollbarY", scrollbarY); // to reset previous value
+                    this._prevSettings.scrollbarY = scrollbarY;
                 }
             }
             this._handleZoomOut();
         }
     });
+    Object.defineProperty(XYChart.prototype, "_processSeries", {
+        enumerable: false,
+        configurable: true,
+        writable: true,
+        value: function (series) {
+            _super.prototype._processSeries.call(this, series);
+            this._colorize(series);
+        }
+    });
+    Object.defineProperty(XYChart.prototype, "_colorize", {
+        enumerable: false,
+        configurable: true,
+        writable: true,
+        value: function (series) {
+            var colorSet = this.get("colors");
+            if (colorSet) {
+                if (series.get("fill") == null) {
+                    var color = colorSet.next();
+                    series._setSoft("stroke", color);
+                    series._setSoft("fill", color);
+                }
+            }
+        }
+    });
     Object.defineProperty(XYChart.prototype, "_handleCursorSelectEnd", {
         enumerable: false,
         configurable: true,
@@ -673,20 +678,22 @@ var XYChart = /** @class */ (function (_super) {
             var downPositionY = cursor.getPrivate("downPositionY", 0);
             var positionX = cursor.getPrivate("positionX", 0.5);
             var positionY = cursor.getPrivate("positionY", 0.5);
-            if (behavior === "zoomX" || behavior === "zoomXY") {
-                this.xAxes.each(function (axis) {
+            this.xAxes.each(function (axis) {
+                if (behavior === "zoomX" || behavior === "zoomXY") {
                     var position0 = axis.toAxisPosition(downPositionX);
                     var position1 = axis.toAxisPosition(positionX);
                     axis.zoom(position0, position1);
-                });
-            }
-            if (behavior === "zoomY" || behavior === "zoomXY") {
-                this.yAxes.each(function (axis) {
+                }
+                axis.setPrivate("updateScrollbar", true);
+            });
+            this.yAxes.each(function (axis) {
+                if (behavior === "zoomY" || behavior === "zoomXY") {
                     var position0 = axis.toAxisPosition(downPositionY);
                     var position1 = axis.toAxisPosition(positionY);
                     axis.zoom(position0, position1);
-                });
-            }
+                }
+                axis.setPrivate("updateScrollbar", true);
+            });
         }
     });
     Object.defineProperty(XYChart.prototype, "_handleScrollbar", {
@@ -698,14 +705,15 @@ var XYChart = /** @class */ (function (_super) {
                 var axisStart = axis.fixPosition(start);
                 var axisEnd = axis.fixPosition(end);
                 var zoomAnimation = axis.zoom(axisStart, axisEnd);
-                axis.setPrivate("updateScrollbar", false);
+                var updateScrollbar = "updateScrollbar";
+                axis.setPrivateRaw(updateScrollbar, false);
                 if (zoomAnimation) {
                     zoomAnimation.events.on("stopped", function () {
-                        axis.setPrivate("updateScrollbar", true);
+                        axis.setPrivateRaw(updateScrollbar, true);
                     });
                 }
                 else {
-                    axis.setPrivate("updateScrollbar", true);
+                    axis.setPrivateRaw(updateScrollbar, true);
                 }
             });
         }
@@ -718,11 +726,8 @@ var XYChart = /** @class */ (function (_super) {
             var _this = this;
             return axes.events.onAll(function (change) {
                 if (change.type === "clear") {
-                    axes.each(function (axis) {
-                        var axisParent = axis.parent;
-                        if (axisParent) {
-                            axisParent.children.removeValue(axis);
-                        }
+                    $array.each(change.oldValues, function (axis) {
+                        _this._removeAxis(axis);
                     });
                 }
                 else if (change.type === "push") {
@@ -738,18 +743,7 @@ var XYChart = /** @class */ (function (_super) {
                     change.newValue.processChart(_this);
                 }
                 else if (change.type === "removeIndex") {
-                    var axis = axes.getIndex(change.index);
-                    if (axis) {
-                        var axisParent = axis.parent;
-                        if (axisParent) {
-                            axisParent.children.removeIndex(change.index);
-                        }
-                        if (axis.get("autoDispose")) {
-                            axis.dispose();
-                        }
-                        else {
-                        }
-                    }
+                    _this._removeAxis(change.oldValue);
                 }
                 else {
                     throw new Error("Unknown IListEvent type");
@@ -757,6 +751,29 @@ var XYChart = /** @class */ (function (_super) {
             });
         }
     });
+    Object.defineProperty(XYChart.prototype, "_removeAxis", {
+        enumerable: false,
+        configurable: true,
+        writable: true,
+        value: function (axis) {
+            if (!axis.isDisposed()) {
+                var axisParent = axis.parent;
+                if (axisParent) {
+                    axisParent.children.removeValue(axis);
+                }
+                var gridContainer = axis.gridContainer;
+                var gridParent = gridContainer.parent;
+                if (gridParent) {
+                    gridParent.children.removeValue(gridContainer);
+                }
+                var topGridContainer = axis.topGridContainer;
+                var topGridParent = topGridContainer.parent;
+                if (topGridParent) {
+                    topGridParent.children.removeValue(topGridContainer);
+                }
+            }
+        }
+    });
     Object.defineProperty(XYChart.prototype, "_updateChartLayout", {
         enumerable: false,
         configurable: true,
@@ -764,16 +781,12 @@ var XYChart = /** @class */ (function (_super) {
         value: function () {
             var left = this.leftAxesContainer.width();
             var right = this.rightAxesContainer.width();
-            this.bottomAxesContainer.set("paddingLeft", left);
-            this.bottomAxesContainer.set("paddingRight", right);
-            this.topAxesContainer.set("paddingLeft", left);
-            this.topAxesContainer.set("paddingRight", right);
-            this.xAxes.each(function (axis) {
-                axis._updateTooltipBounds();
-            });
-            this.yAxes.each(function (axis) {
-                axis._updateTooltipBounds();
-            });
+            var bottomAxesContainer = this.bottomAxesContainer;
+            bottomAxesContainer.set("paddingLeft", left);
+            bottomAxesContainer.set("paddingRight", right);
+            var topAxesContainer = this.topAxesContainer;
+            topAxesContainer.set("paddingLeft", left);
+            topAxesContainer.set("paddingRight", right);
         }
     });
     /**
@@ -861,7 +874,7 @@ var XYChart = /** @class */ (function (_super) {
         writable: true,
         value: function (point) {
             var plotContainer = this.plotContainer;
-            if (point.x >= 0 && point.y >= 0 && point.x <= plotContainer.width() && point.y <= plotContainer.height()) {
+            if (point.x >= -0.1 && point.y >= -0.1 && point.x <= plotContainer.width() + 0.1 && point.y <= plotContainer.height() + 0.1) {
                 return true;
             }
             return false;
@@ -903,82 +916,85 @@ var XYChart = /** @class */ (function (_super) {
                         }
                     }
                 });
-                this.series.each(function (series) {
-                    var tooltip = series.get("tooltip");
-                    if (tooltip) {
+            }
+            this.series.each(function (series) {
+                var tooltip = series.get("tooltip");
+                if (tooltip) {
+                    var hidden = false;
+                    var point = tooltip.get("pointTo");
+                    if (point) {
                         if (maxTooltipDistance >= 0) {
-                            var point = tooltip.get("pointTo");
-                            if (point) {
+                            var point_1 = tooltip.get("pointTo");
+                            if (point_1) {
                                 if (series != closest) {
-                                    var distance = Math.hypot(closestPoint.x - point.x, closestPoint.y - point.y);
+                                    var distance = Math.hypot(closestPoint.x - point_1.x, closestPoint.y - point_1.y);
                                     if (distance > maxTooltipDistance) {
-                                        tooltip.hide(0);
+                                        hidden = true;
                                     }
                                 }
                             }
                         }
+                        if (!_this.inPlot(_this._tooltipToLocal(point)) || !tooltip.dataItem) {
+                            hidden = true;
+                        }
                         else {
-                            if (series != closest) {
-                                tooltip.hide(0);
-                            }
+                            sum += point.y;
                         }
-                    }
-                });
-            }
-            this.series.each(function (series) {
-                var tooltip = series.get("tooltip");
-                if (tooltip && !tooltip.isHidden()) {
-                    var point = tooltip.get("pointTo");
-                    if (point) {
-                        var local = _this.plotContainer._display.toLocal(point);
-                        if (local.y < 0 || local.y > h || local.x < 0 || local.x > w) {
+                        if (hidden) {
                             tooltip.hide(0);
                         }
                         else {
+                            tooltip.show();
                             tooltips.push(tooltip);
-                            var pointTo = tooltip.get("pointTo");
-                            if (pointTo) {
-                                sum += pointTo.y;
-                            }
                         }
                     }
                 }
             });
-            var tooltipContainer = this._root.tooltipContainer;
-            tooltips.sort(function (a, b) { return $order.compareNumber(a.get("pointTo").y, b.get("pointTo").y); });
-            var count = tooltips.length;
-            var average = sum / count;
-            if (average > h / 2 + plotT.y) {
-                tooltips.reverse();
-                var prevY_1 = plotB.y;
-                $array.each(tooltips, function (tooltip) {
-                    var height = tooltip.height();
-                    var centerY = tooltip.get("centerY");
-                    if (centerY instanceof Percent) {
-                        height *= centerY.value;
-                    }
-                    height += tooltip.get("marginBottom", 0);
-                    tooltip.set("bounds", { left: plotT.x, top: plotT.y, right: plotB.x, bottom: prevY_1 });
-                    prevY_1 = Math.min(prevY_1 - height, tooltip._fy - height);
-                    tooltipContainer.children.moveValue(tooltip, 0);
-                });
-            }
-            else {
-                var prevY_2 = 0;
-                $array.each(tooltips, function (tooltip) {
-                    var height = tooltip.height();
-                    var centerY = tooltip.get("centerY");
-                    if (centerY instanceof Percent) {
-                        height *= centerY.value;
-                    }
-                    height += tooltip.get("marginBottom", 0);
-                    tooltip.set("bounds", { left: plotT.x, top: prevY_2, right: plotB.x, bottom: Math.max(plotT.y + h, prevY_2 + height) });
-                    tooltipContainer.children.moveValue(tooltip, 0);
-                    prevY_2 = Math.max(prevY_2 + height, tooltip._fy + height);
-                });
+            if (this.get("arrangeTooltips")) {
+                var tooltipContainer_1 = this._root.tooltipContainer;
+                tooltips.sort(function (a, b) { return $order.compareNumber(a.get("pointTo").y, b.get("pointTo").y); });
+                var count = tooltips.length;
+                var average = sum / count;
+                if (average > h / 2 + plotT.y) {
+                    tooltips.reverse();
+                    var prevY_1 = plotB.y;
+                    $array.each(tooltips, function (tooltip) {
+                        var height = tooltip.height();
+                        var centerY = tooltip.get("centerY");
+                        if (centerY instanceof Percent) {
+                            height *= centerY.value;
+                        }
+                        height += tooltip.get("marginBottom", 0);
+                        tooltip.set("bounds", { left: plotT.x, top: plotT.y, right: plotB.x, bottom: prevY_1 });
+                        prevY_1 = Math.min(prevY_1 - height, tooltip._fy - height);
+                        tooltipContainer_1.children.moveValue(tooltip, 0);
+                    });
+                }
+                else {
+                    var prevY_2 = 0;
+                    $array.each(tooltips, function (tooltip) {
+                        var height = tooltip.height();
+                        var centerY = tooltip.get("centerY");
+                        if (centerY instanceof Percent) {
+                            height *= centerY.value;
+                        }
+                        height += tooltip.get("marginBottom", 0);
+                        tooltip.set("bounds", { left: plotT.x, top: prevY_2, right: plotB.x, bottom: Math.max(plotT.y + h, prevY_2 + height) });
+                        tooltipContainer_1.children.moveValue(tooltip, 0);
+                        prevY_2 = Math.max(prevY_2 + height, tooltip._fy + height);
+                    });
+                }
             }
         }
     });
+    Object.defineProperty(XYChart.prototype, "_tooltipToLocal", {
+        enumerable: false,
+        configurable: true,
+        writable: true,
+        value: function (point) {
+            return this.plotContainer._display.toLocal(point);
+        }
+    });
     /**
      * Fully zooms out the chart.
      */
@@ -988,9 +1004,11 @@ var XYChart = /** @class */ (function (_super) {
         writable: true,
         value: function () {
             this.xAxes.each(function (axis) {
+                axis.setPrivate("updateScrollbar", true);
                 axis.zoom(0, 1);
             });
             this.yAxes.each(function (axis) {
+                axis.setPrivate("updateScrollbar", true);
                 axis.zoom(0, 1);
             });
         }