@amcharts/amcharts5 5.2.49 → 5.3.0

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

@@ -1,4 +1,3 @@
-import { __extends, __read } from "tslib";
 import { XYChartDefaultTheme } from "./XYChartDefaultTheme";
 import { Container } from "../../core/render/Container";
 import { Rectangle } from "../../core/render/Rectangle";
@@ -20,14 +19,13 @@ import * as $utils from "../../core/util/Utils";
  * @see {@link https://www.amcharts.com/docs/v5/charts/xy-chart/} for more info
  * @important
  */
-var XYChart = /** @class */ (function (_super) {
-    __extends(XYChart, _super);
-    function XYChart() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
+export class XYChart extends SerialChart {
+    constructor() {
+        super(...arguments);
         /**
          * A list of horizontal axes.
          */
-        Object.defineProperty(_this, "xAxes", {
+        Object.defineProperty(this, "xAxes", {
             enumerable: true,
             configurable: true,
             writable: true,
@@ -36,7 +34,7 @@ var XYChart = /** @class */ (function (_super) {
         /**
          * A list of vertical axes.
          */
-        Object.defineProperty(_this, "yAxes", {
+        Object.defineProperty(this, "yAxes", {
             enumerable: true,
             configurable: true,
             writable: true,
@@ -49,11 +47,11 @@ var XYChart = /** @class */ (function (_super) {
          * @see {@link https://www.amcharts.com/docs/v5/charts/xy-chart/xy-chart-containers/} for more info
          * @default Container.new()
          */
-        Object.defineProperty(_this, "topAxesContainer", {
+        Object.defineProperty(this, "topAxesContainer", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: _this.chartContainer.children.push(Container.new(_this._root, { width: p100, layout: _this._root.verticalLayout }))
+            value: this.chartContainer.children.push(Container.new(this._root, { width: p100, layout: this._root.verticalLayout }))
         });
         /**
          * A [[Container]] located in the middle the chart, used to store vertical axes
@@ -62,11 +60,11 @@ var XYChart = /** @class */ (function (_super) {
          * @see {@link https://www.amcharts.com/docs/v5/charts/xy-chart/xy-chart-containers/} for more info
          * @default Container.new()
          */
-        Object.defineProperty(_this, "yAxesAndPlotContainer", {
+        Object.defineProperty(this, "yAxesAndPlotContainer", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: _this.chartContainer.children.push(Container.new(_this._root, { width: p100, height: p100, layout: _this._root.horizontalLayout }))
+            value: this.chartContainer.children.push(Container.new(this._root, { width: p100, height: p100, layout: this._root.horizontalLayout }))
         });
         /**
          * A [[Container]] located on bottom of the chart, used to store bottom
@@ -75,11 +73,11 @@ var XYChart = /** @class */ (function (_super) {
          * @see {@link https://www.amcharts.com/docs/v5/charts/xy-chart/xy-chart-containers/} for more info
          * @default Container.new()
          */
-        Object.defineProperty(_this, "bottomAxesContainer", {
+        Object.defineProperty(this, "bottomAxesContainer", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: _this.chartContainer.children.push(Container.new(_this._root, { width: p100, layout: _this._root.verticalLayout }))
+            value: this.chartContainer.children.push(Container.new(this._root, { width: p100, layout: this._root.verticalLayout }))
         });
         /**
          * A [[Container]] located on left of the chart, used to store left-hand
@@ -88,11 +86,11 @@ var XYChart = /** @class */ (function (_super) {
          * @see {@link https://www.amcharts.com/docs/v5/charts/xy-chart/xy-chart-containers/} for more info
          * @default Container.new()
          */
-        Object.defineProperty(_this, "leftAxesContainer", {
+        Object.defineProperty(this, "leftAxesContainer", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: _this.yAxesAndPlotContainer.children.push(Container.new(_this._root, { height: p100, layout: _this._root.horizontalLayout }))
+            value: this.yAxesAndPlotContainer.children.push(Container.new(this._root, { height: p100, layout: this._root.horizontalLayout }))
         });
         /**
          * A [[Container]] located in the middle of the chart, used to store plotContainer and topPlotContainer
@@ -100,11 +98,11 @@ var XYChart = /** @class */ (function (_super) {
          * @see {@link https://www.amcharts.com/docs/v5/charts/xy-chart/xy-chart-containers/} for more info
          * @default Container.new()
          */
-        Object.defineProperty(_this, "plotsContainer", {
+        Object.defineProperty(this, "plotsContainer", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: _this.yAxesAndPlotContainer.children.push(Container.new(_this._root, { width: p100, height: p100, maskContent: false }))
+            value: this.yAxesAndPlotContainer.children.push(Container.new(this._root, { width: p100, height: p100, maskContent: false }))
         });
         /**
          * A [[Container]] located in the middle of the chart, used to store actual
@@ -117,11 +115,11 @@ var XYChart = /** @class */ (function (_super) {
          * @see {@link https://www.amcharts.com/docs/v5/charts/xy-chart/xy-chart-containers/} for more info
          * @default Container.new()
          */
-        Object.defineProperty(_this, "plotContainer", {
+        Object.defineProperty(this, "plotContainer", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: _this.plotsContainer.children.push(Container.new(_this._root, { width: p100, height: p100 }))
+            value: this.plotsContainer.children.push(Container.new(this._root, { width: p100, height: p100 }))
         });
         /**
          * A [[Container]] used for any elements that need to be displayed over
@@ -130,11 +128,11 @@ var XYChart = /** @class */ (function (_super) {
          * @see {@link https://www.amcharts.com/docs/v5/charts/xy-chart/xy-chart-containers/} for more info
          * @default Container.new()
          */
-        Object.defineProperty(_this, "topPlotContainer", {
+        Object.defineProperty(this, "topPlotContainer", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: _this.plotsContainer.children.push(Container.new(_this._root, { width: p100, height: p100 }))
+            value: this.plotsContainer.children.push(Container.new(this._root, { width: p100, height: p100 }))
         });
         /**
          * A [[Container]] axis grid elements are stored in.
@@ -142,11 +140,11 @@ var XYChart = /** @class */ (function (_super) {
          * @see {@link https://www.amcharts.com/docs/v5/charts/xy-chart/xy-chart-containers/} for more info
          * @default Container.new()
          */
-        Object.defineProperty(_this, "gridContainer", {
+        Object.defineProperty(this, "gridContainer", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: _this.plotContainer.children.push(Container.new(_this._root, { width: p100, height: p100, isMeasured: false }))
+            value: this.plotContainer.children.push(Container.new(this._root, { width: p100, height: p100, isMeasured: false }))
         });
         /**
          * A [[Container]] axis background grid elements are stored in.
@@ -154,11 +152,11 @@ var XYChart = /** @class */ (function (_super) {
          * @see {@link https://www.amcharts.com/docs/v5/charts/xy-chart/xy-chart-containers/} for more info
          * @default Container.new()
          */
-        Object.defineProperty(_this, "topGridContainer", {
+        Object.defineProperty(this, "topGridContainer", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: Container.new(_this._root, { width: p100, height: p100, isMeasured: false })
+            value: Container.new(this._root, { width: p100, height: p100, isMeasured: false })
         });
         /**
          * A [[Container]] located on right of the chart, used to store right-hand
@@ -167,11 +165,11 @@ var XYChart = /** @class */ (function (_super) {
          * @see {@link https://www.amcharts.com/docs/v5/charts/xy-chart/xy-chart-containers/} for more info
          * @default Container.new()
          */
-        Object.defineProperty(_this, "rightAxesContainer", {
+        Object.defineProperty(this, "rightAxesContainer", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: _this.yAxesAndPlotContainer.children.push(Container.new(_this._root, { height: p100, layout: _this._root.horizontalLayout }))
+            value: this.yAxesAndPlotContainer.children.push(Container.new(this._root, { height: p100, layout: this._root.horizontalLayout }))
         });
         /**
          * A [[Container]] axis headers are stored in.
@@ -179,11 +177,11 @@ var XYChart = /** @class */ (function (_super) {
          * @see {@link https://www.amcharts.com/docs/v5/charts/xy-chart/axes/axis-headers/} for more info
          * @default Container.new()
          */
-        Object.defineProperty(_this, "axisHeadersContainer", {
+        Object.defineProperty(this, "axisHeadersContainer", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: _this.plotContainer.children.push(Container.new(_this._root, {}))
+            value: this.plotContainer.children.push(Container.new(this._root, {}))
         });
         /**
          * A button that is shown when chart is not fully zoomed out.
@@ -191,169 +189,142 @@ var XYChart = /** @class */ (function (_super) {
          * @see {@link https://www.amcharts.com/docs/v5/charts/xy-chart/zoom-and-pan/#Zoom_out_button} for more info
          * @default Button.new()
          */
-        Object.defineProperty(_this, "zoomOutButton", {
+        Object.defineProperty(this, "zoomOutButton", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: _this.topPlotContainer.children.push(Button.new(_this._root, {
+            value: this.topPlotContainer.children.push(Button.new(this._root, {
                 themeTags: ["zoom"],
-                icon: Graphics.new(_this._root, {
+                icon: Graphics.new(this._root, {
                     themeTags: ["button", "icon"]
                 })
             }))
         });
-        Object.defineProperty(_this, "_movePoint", {
+        Object.defineProperty(this, "_movePoint", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: { x: 0, y: 0 }
         });
-        Object.defineProperty(_this, "_wheelDp", {
+        Object.defineProperty(this, "_wheelDp", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: void 0
         });
-        Object.defineProperty(_this, "_otherCharts", {
+        Object.defineProperty(this, "_otherCharts", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: void 0
         });
-        Object.defineProperty(_this, "_movePoints", {
+        Object.defineProperty(this, "_movePoints", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: {}
         });
-        Object.defineProperty(_this, "_downStartX", {
+        Object.defineProperty(this, "_downStartX", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: void 0
         });
-        Object.defineProperty(_this, "_downEndX", {
+        Object.defineProperty(this, "_downEndX", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: void 0
         });
-        Object.defineProperty(_this, "_downStartY", {
+        Object.defineProperty(this, "_downStartY", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: void 0
         });
-        Object.defineProperty(_this, "_downEndY", {
+        Object.defineProperty(this, "_downEndY", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: void 0
         });
-        return _this;
     }
-    Object.defineProperty(XYChart.prototype, "_afterNew", {
-        enumerable: false,
-        configurable: true,
-        writable: true,
-        value: function () {
-            var _this = this;
-            this._defaultThemes.push(XYChartDefaultTheme.new(this._root));
-            _super.prototype._afterNew.call(this);
-            this._disposers.push(this.xAxes);
-            this._disposers.push(this.yAxes);
-            var root = this._root;
-            var verticalLayout = this._root.verticalLayout;
-            var zoomOutButton = this.zoomOutButton;
-            zoomOutButton.events.on("click", function () {
-                _this.zoomOut();
-            });
-            zoomOutButton.set("opacity", 0);
-            zoomOutButton.states.lookup("default").set("opacity", 1);
-            this.chartContainer.set("layout", verticalLayout);
-            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));
-            plotContainer.children.push(this.topGridContainer);
-            plotContainer.children.push(this.bulletsContainer);
-            // Setting trasnparent background so that full body of the plot container
-            // is interactive
-            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(plotContainer.events.on("pointerdown", function (event) {
-                _this._handlePlotDown(event.originalEvent);
-            }));
-            this._disposers.push(plotContainer.events.on("globalpointerup", function (event) {
-                _this._handlePlotUp(event.originalEvent);
-            }));
-            this._disposers.push(plotContainer.events.on("globalpointermove", function (event) {
-                _this._handlePlotMove(event.originalEvent);
-            }));
-            this._maskGrid();
+    _afterNew() {
+        this._defaultThemes.push(XYChartDefaultTheme.new(this._root));
+        super._afterNew();
+        this._disposers.push(this.xAxes);
+        this._disposers.push(this.yAxes);
+        const root = this._root;
+        let verticalLayout = this._root.verticalLayout;
+        const zoomOutButton = this.zoomOutButton;
+        zoomOutButton.events.on("click", () => {
+            this.zoomOut();
+        });
+        zoomOutButton.set("opacity", 0);
+        zoomOutButton.states.lookup("default").set("opacity", 1);
+        this.chartContainer.set("layout", verticalLayout);
+        const 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));
+        plotContainer.children.push(this.topGridContainer);
+        plotContainer.children.push(this.bulletsContainer);
+        // Setting trasnparent background so that full body of the plot container
+        // is interactive
+        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(plotContainer.events.on("pointerdown", (event) => {
+            this._handlePlotDown(event.originalEvent);
+        }));
+        this._disposers.push(plotContainer.events.on("globalpointerup", (event) => {
+            this._handlePlotUp(event.originalEvent);
+        }));
+        this._disposers.push(plotContainer.events.on("globalpointermove", (event) => {
+            this._handlePlotMove(event.originalEvent);
+        }));
+        this._maskGrid();
+        this._setUpTouch();
+    }
+    _beforeChanged() {
+        super._beforeChanged();
+        if (this.isDirty("pinchZoomX") || this.isDirty("pinchZoomY") || this.get("panX") || this.get("panY")) {
             this._setUpTouch();
         }
-    });
-    Object.defineProperty(XYChart.prototype, "_beforeChanged", {
-        enumerable: false,
-        configurable: true,
-        writable: true,
-        value: function () {
-            _super.prototype._beforeChanged.call(this);
-            if (this.isDirty("pinchZoomX") || this.isDirty("pinchZoomY") || this.get("panX") || this.get("panY")) {
-                this._setUpTouch();
-            }
+    }
+    _setUpTouch() {
+        if (!this.plotContainer._display.cancelTouch) {
+            this.plotContainer._display.cancelTouch = (this.get("pinchZoomX") || this.get("pinchZoomY") || this.get("panX") || this.get("panY")) ? true : false;
         }
-    });
-    Object.defineProperty(XYChart.prototype, "_setUpTouch", {
-        enumerable: false,
-        configurable: true,
-        writable: true,
-        value: function () {
-            if (!this.plotContainer._display.cancelTouch) {
-                this.plotContainer._display.cancelTouch = (this.get("pinchZoomX") || this.get("pinchZoomY") || this.get("panX") || this.get("panY")) ? true : false;
-            }
+    }
+    _maskGrid() {
+        this.gridContainer.set("maskContent", true);
+        this.topGridContainer.set("maskContent", true);
+    }
+    _removeSeries(series) {
+        const xAxis = series.get("xAxis");
+        if (xAxis) {
+            $array.remove(xAxis.series, series);
+            xAxis.markDirtyExtremes();
         }
-    });
-    Object.defineProperty(XYChart.prototype, "_maskGrid", {
-        enumerable: false,
-        configurable: true,
-        writable: true,
-        value: function () {
-            this.gridContainer.set("maskContent", true);
-            this.topGridContainer.set("maskContent", true);
+        const yAxis = series.get("yAxis");
+        if (yAxis) {
+            $array.remove(yAxis.series, series);
+            yAxis.markDirtyExtremes();
         }
-    });
-    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);
-                xAxis.markDirtyExtremes();
-            }
-            var yAxis = series.get("yAxis");
-            if (yAxis) {
-                $array.remove(yAxis.series, series);
-                yAxis.markDirtyExtremes();
-            }
-            var cursor = this.get("cursor");
-            if (cursor) {
-                var snapToSeries = cursor.get("snapToSeries");
-                if (snapToSeries) {
-                    $array.remove(snapToSeries, series);
-                }
+        const cursor = this.get("cursor");
+        if (cursor) {
+            const snapToSeries = cursor.get("snapToSeries");
+            if (snapToSeries) {
+                $array.remove(snapToSeries, series);
             }
-            _super.prototype._removeSeries.call(this, series);
         }
-    });
+        super._removeSeries(series);
+    }
     /**
      * This method is invoked when mouse wheel is used over chart's plot
      * container, and handles zooming/pan.
@@ -361,1129 +332,978 @@ var XYChart = /** @class */ (function (_super) {
      * You can invoke this method manually, if you need to mimic chart's wheel
      * behavior over other elements of the chart.
      */
-    Object.defineProperty(XYChart.prototype, "handleWheel", {
-        enumerable: false,
-        configurable: true,
-        writable: true,
-        value: function (event) {
-            var _this = this;
-            var wheelX = this.get("wheelX");
-            var wheelY = this.get("wheelY");
-            var plotContainer = this.plotContainer;
-            var wheelEvent = event.originalEvent;
-            // Ignore wheel event if it is happening on a non-chart element, e.g. if
-            // some page element is over the chart.
-            if ($utils.isLocalEvent(wheelEvent, this)) {
-                wheelEvent.preventDefault();
-            }
-            else {
-                return;
-            }
-            var plotPoint = plotContainer.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;
-            var wheelZoomPositionX = this.get("wheelZoomPositionX");
-            var wheelZoomPositionY = this.get("wheelZoomPositionY");
-            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.x / plotContainer.width());
-                        if (wheelZoomPositionX != null) {
-                            position = wheelZoomPositionX;
-                        }
-                        var newStart = start - wheelStep * (end - start) * shiftX * position;
-                        var newEnd = end + wheelStep * (end - start) * shiftX * (1 - position);
-                        if (1 / (newEnd - newStart) < axis.getPrivate("maxZoomFactor", Infinity) / axis.get("minZoomCount", 1)) {
-                            _this._handleWheelAnimation(axis.zoom(newStart, newEnd));
-                        }
+    handleWheel(event) {
+        const wheelX = this.get("wheelX");
+        const wheelY = this.get("wheelY");
+        const plotContainer = this.plotContainer;
+        const wheelEvent = event.originalEvent;
+        // Ignore wheel event if it is happening on a non-chart element, e.g. if
+        // some page element is over the chart.
+        if ($utils.isLocalEvent(wheelEvent, this)) {
+            wheelEvent.preventDefault();
+        }
+        else {
+            return;
+        }
+        const plotPoint = plotContainer.toLocal(this._root.documentPointToRoot({ x: wheelEvent.clientX, y: wheelEvent.clientY }));
+        const wheelStep = this.get("wheelStep", 0.2);
+        const shiftY = wheelEvent.deltaY / 100;
+        const shiftX = wheelEvent.deltaX / 100;
+        const wheelZoomPositionX = this.get("wheelZoomPositionX");
+        const wheelZoomPositionY = this.get("wheelZoomPositionY");
+        if ((wheelX === "zoomX" || wheelX === "zoomXY") && shiftX != 0) {
+            this.xAxes.each((axis) => {
+                if (axis.get("zoomX")) {
+                    let start = axis.get("start");
+                    let end = axis.get("end");
+                    let position = axis.fixPosition(plotPoint.x / plotContainer.width());
+                    if (wheelZoomPositionX != null) {
+                        position = wheelZoomPositionX;
                     }
-                });
-            }
-            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.x / plotContainer.width());
-                        if (wheelZoomPositionX != null) {
-                            position = wheelZoomPositionX;
-                        }
-                        var newStart = start - wheelStep * (end - start) * shiftY * position;
-                        var newEnd = end + wheelStep * (end - start) * shiftY * (1 - position);
-                        if (1 / (newEnd - newStart) < axis.getPrivate("maxZoomFactor", Infinity) / axis.get("minZoomCount", 1)) {
-                            _this._handleWheelAnimation(axis.zoom(newStart, newEnd));
-                        }
+                    let newStart = start - wheelStep * (end - start) * shiftX * position;
+                    let newEnd = end + wheelStep * (end - start) * shiftX * (1 - position);
+                    if (1 / (newEnd - newStart) < axis.getPrivate("maxZoomFactor", Infinity) / axis.get("minZoomCount", 1)) {
+                        this._handleWheelAnimation(axis.zoom(newStart, newEnd));
                     }
-                });
-            }
-            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.y / plotContainer.height());
-                        if (wheelZoomPositionY != null) {
-                            position = wheelZoomPositionY;
-                        }
-                        var newStart = start - wheelStep * (end - start) * shiftX * position;
-                        var newEnd = end + wheelStep * (end - start) * shiftX * (1 - position);
-                        if (1 / (newEnd - newStart) < axis.getPrivate("maxZoomFactor", Infinity) / axis.get("minZoomCount", 1)) {
-                            _this._handleWheelAnimation(axis.zoom(newStart, newEnd));
-                        }
+                }
+            });
+        }
+        if ((wheelY === "zoomX" || wheelY === "zoomXY") && shiftY != 0) {
+            this.xAxes.each((axis) => {
+                if (axis.get("zoomX")) {
+                    let start = axis.get("start");
+                    let end = axis.get("end");
+                    let position = axis.fixPosition(plotPoint.x / plotContainer.width());
+                    if (wheelZoomPositionX != null) {
+                        position = wheelZoomPositionX;
                     }
-                });
-            }
-            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.y / plotContainer.height());
-                        if (wheelZoomPositionY != null) {
-                            position = wheelZoomPositionY;
-                        }
-                        var newStart = start - wheelStep * (end - start) * shiftY * position;
-                        var newEnd = end + wheelStep * (end - start) * shiftY * (1 - position);
-                        if (1 / (newEnd - newStart) < axis.getPrivate("maxZoomFactor", Infinity) / axis.get("minZoomCount", 1)) {
-                            _this._handleWheelAnimation(axis.zoom(newStart, newEnd));
-                        }
+                    let newStart = start - wheelStep * (end - start) * shiftY * position;
+                    let newEnd = end + wheelStep * (end - start) * shiftY * (1 - position);
+                    if (1 / (newEnd - newStart) < axis.getPrivate("maxZoomFactor", Infinity) / axis.get("minZoomCount", 1)) {
+                        this._handleWheelAnimation(axis.zoom(newStart, newEnd));
                     }
-                });
-            }
-            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 delta = _this._getWheelSign(axis) * wheelStep * (end - start) * shiftX;
-                        var newStart = start + delta;
-                        var newEnd = end + delta;
-                        var se = _this._fixWheel(newStart, newEnd);
-                        newStart = se[0];
-                        newEnd = se[1];
-                        _this._handleWheelAnimation(axis.zoom(newStart, newEnd));
+                }
+            });
+        }
+        if ((wheelX === "zoomY" || wheelX === "zoomXY") && shiftX != 0) {
+            this.yAxes.each((axis) => {
+                if (axis.get("zoomY")) {
+                    let start = axis.get("start");
+                    let end = axis.get("end");
+                    let position = axis.fixPosition(plotPoint.y / plotContainer.height());
+                    if (wheelZoomPositionY != null) {
+                        position = wheelZoomPositionY;
                     }
-                });
-            }
-            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 delta = _this._getWheelSign(axis) * wheelStep * (end - start) * shiftY;
-                        var newStart = start + delta;
-                        var newEnd = end + delta;
-                        var se = _this._fixWheel(newStart, newEnd);
-                        newStart = se[0];
-                        newEnd = se[1];
-                        _this._handleWheelAnimation(axis.zoom(newStart, newEnd));
+                    let newStart = start - wheelStep * (end - start) * shiftX * position;
+                    let newEnd = end + wheelStep * (end - start) * shiftX * (1 - position);
+                    if (1 / (newEnd - newStart) < axis.getPrivate("maxZoomFactor", Infinity) / axis.get("minZoomCount", 1)) {
+                        this._handleWheelAnimation(axis.zoom(newStart, newEnd));
                     }
-                });
-            }
-            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 delta = _this._getWheelSign(axis) * wheelStep * (end - start) * shiftX;
-                        var newStart = start + delta;
-                        var newEnd = end + delta;
-                        var se = _this._fixWheel(newStart, newEnd);
-                        newStart = se[0];
-                        newEnd = se[1];
-                        _this._handleWheelAnimation(axis.zoom(newStart, newEnd));
+                }
+            });
+        }
+        if ((wheelY === "zoomY" || wheelY === "zoomXY") && shiftY != 0) {
+            this.yAxes.each((axis) => {
+                if (axis.get("zoomY")) {
+                    let start = axis.get("start");
+                    let end = axis.get("end");
+                    let position = axis.fixPosition(plotPoint.y / plotContainer.height());
+                    if (wheelZoomPositionY != null) {
+                        position = wheelZoomPositionY;
                     }
-                });
-            }
-            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 delta = _this._getWheelSign(axis) * wheelStep * (end - start) * shiftY;
-                        var newStart = start - delta;
-                        var newEnd = end - delta;
-                        var se = _this._fixWheel(newStart, newEnd);
-                        newStart = se[0];
-                        newEnd = se[1];
-                        _this._handleWheelAnimation(axis.zoom(newStart, newEnd));
+                    let newStart = start - wheelStep * (end - start) * shiftY * position;
+                    let newEnd = end + wheelStep * (end - start) * shiftY * (1 - position);
+                    if (1 / (newEnd - newStart) < axis.getPrivate("maxZoomFactor", Infinity) / axis.get("minZoomCount", 1)) {
+                        this._handleWheelAnimation(axis.zoom(newStart, newEnd));
                     }
-                });
-            }
+                }
+            });
         }
-    });
-    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") {
-                this._wheelDp = plotContainer.events.on("wheel", function (event) {
-                    _this.handleWheel(event);
-                });
-                this._disposers.push(this._wheelDp);
-            }
-            else {
-                if (this._wheelDp) {
-                    this._wheelDp.dispose();
+        if ((wheelX === "panX" || wheelX === "panXY") && shiftX != 0) {
+            this.xAxes.each((axis) => {
+                if (axis.get("panX")) {
+                    let start = axis.get("start");
+                    let end = axis.get("end");
+                    let delta = this._getWheelSign(axis) * wheelStep * (end - start) * shiftX;
+                    let newStart = start + delta;
+                    let newEnd = end + delta;
+                    let se = this._fixWheel(newStart, newEnd);
+                    newStart = se[0];
+                    newEnd = se[1];
+                    this._handleWheelAnimation(axis.zoom(newStart, newEnd));
                 }
-            }
+            });
         }
-    });
-    Object.defineProperty(XYChart.prototype, "_getWheelSign", {
-        enumerable: false,
-        configurable: true,
-        writable: true,
-        value: function (axis) {
-            var sign = 1;
-            if (axis.get("renderer").get("inversed")) {
-                sign = -1;
-            }
-            return sign;
+        if ((wheelY === "panX" || wheelY === "panXY") && shiftY != 0) {
+            this.xAxes.each((axis) => {
+                if (axis.get("panX")) {
+                    let start = axis.get("start");
+                    let end = axis.get("end");
+                    let delta = this._getWheelSign(axis) * wheelStep * (end - start) * shiftY;
+                    let newStart = start + delta;
+                    let newEnd = end + delta;
+                    let se = this._fixWheel(newStart, newEnd);
+                    newStart = se[0];
+                    newEnd = se[1];
+                    this._handleWheelAnimation(axis.zoom(newStart, newEnd));
+                }
+            });
         }
-    });
-    Object.defineProperty(XYChart.prototype, "_fixWheel", {
-        enumerable: false,
-        configurable: true,
-        writable: true,
-        value: function (start, end) {
-            var diff = end - start;
-            if (start < 0) {
-                start = 0;
-                end = start + diff;
-            }
-            if (end > 1) {
-                end = 1;
-                start = end - diff;
-            }
-            return [start, end];
+        if ((wheelX === "panY" || wheelX === "panXY") && shiftX != 0) {
+            this.yAxes.each((axis) => {
+                if (axis.get("panY")) {
+                    let start = axis.get("start");
+                    let end = axis.get("end");
+                    let delta = this._getWheelSign(axis) * wheelStep * (end - start) * shiftX;
+                    let newStart = start + delta;
+                    let newEnd = end + delta;
+                    let se = this._fixWheel(newStart, newEnd);
+                    newStart = se[0];
+                    newEnd = se[1];
+                    this._handleWheelAnimation(axis.zoom(newStart, newEnd));
+                }
+            });
         }
-    });
-    Object.defineProperty(XYChart.prototype, "_handlePlotDown", {
-        enumerable: false,
-        configurable: true,
-        writable: true,
-        value: function (event) {
-            var plotContainer = this.plotContainer;
-            var local = plotContainer.toLocal(this._root.documentPointToRoot({ x: event.clientX, y: event.clientY }));
-            if (this.get("pinchZoomX") || this.get("pinchZoomY")) {
-                var touchEvent = event;
-                var pointerId = touchEvent.pointerId;
-                if (pointerId) {
-                    if ($object.keys(plotContainer._downPoints).length > 0) {
-                        var xAxis = this.xAxes.getIndex(0);
-                        var yAxis = this.yAxes.getIndex(0);
-                        if (xAxis) {
-                            this._downStartX = xAxis.get("start", 0);
-                            this._downEndX = xAxis.get("end", 1);
-                        }
-                        if (yAxis) {
-                            this._downStartY = yAxis.get("start", 0);
-                            this._downEndY = yAxis.get("end", 1);
-                        }
-                    }
+        if ((wheelY === "panY" || wheelY === "panXY") && shiftY != 0) {
+            this.yAxes.each((axis) => {
+                if (axis.get("panY")) {
+                    let start = axis.get("start");
+                    let end = axis.get("end");
+                    let delta = this._getWheelSign(axis) * wheelStep * (end - start) * shiftY;
+                    let newStart = start - delta;
+                    let newEnd = end - delta;
+                    let se = this._fixWheel(newStart, newEnd);
+                    newStart = se[0];
+                    newEnd = se[1];
+                    this._handleWheelAnimation(axis.zoom(newStart, newEnd));
                 }
+            });
+        }
+    }
+    _handleSetWheel() {
+        const wheelX = this.get("wheelX");
+        const wheelY = this.get("wheelY");
+        const plotContainer = this.plotContainer;
+        if (wheelX !== "none" || wheelY !== "none") {
+            this._wheelDp = plotContainer.events.on("wheel", (event) => {
+                this.handleWheel(event);
+            });
+            this._disposers.push(this._wheelDp);
+        }
+        else {
+            if (this._wheelDp) {
+                this._wheelDp.dispose();
             }
-            if (this.get("panX") || this.get("panY")) {
-                if (local.x >= 0 && local.y >= 0 && local.x <= plotContainer.width() && local.y <= this.height()) {
-                    //this._downPoint = local;
-                    this._downPoint = { x: event.clientX, y: event.clientY };
-                    var panX = this.get("panX");
-                    var panY = this.get("panY");
-                    if (panX) {
-                        this.xAxes.each(function (axis) {
-                            axis._panStart = axis.get("start");
-                            axis._panEnd = axis.get("end");
-                        });
-                    }
-                    if (panY) {
-                        this.yAxes.each(function (axis) {
-                            axis._panStart = axis.get("start");
-                            axis._panEnd = axis.get("end");
-                        });
+        }
+    }
+    _getWheelSign(axis) {
+        let sign = 1;
+        if (axis.get("renderer").get("inversed")) {
+            sign = -1;
+        }
+        return sign;
+    }
+    _fixWheel(start, end) {
+        const diff = end - start;
+        if (start < 0) {
+            start = 0;
+            end = start + diff;
+        }
+        if (end > 1) {
+            end = 1;
+            start = end - diff;
+        }
+        return [start, end];
+    }
+    _handlePlotDown(event) {
+        const plotContainer = this.plotContainer;
+        let local = plotContainer.toLocal(this._root.documentPointToRoot({ x: event.clientX, y: event.clientY }));
+        if (this.get("pinchZoomX") || this.get("pinchZoomY")) {
+            const touchEvent = event;
+            const pointerId = touchEvent.pointerId;
+            if (pointerId) {
+                if ($object.keys(plotContainer._downPoints).length > 0) {
+                    const xAxis = this.xAxes.getIndex(0);
+                    const yAxis = this.yAxes.getIndex(0);
+                    if (xAxis) {
+                        this._downStartX = xAxis.get("start", 0);
+                        this._downEndX = xAxis.get("end", 1);
                     }
-                    var eventType = "panstarted";
-                    if (this.events.isEnabled(eventType)) {
-                        this.events.dispatch(eventType, { type: eventType, target: this, originalEvent: event });
+                    if (yAxis) {
+                        this._downStartY = yAxis.get("start", 0);
+                        this._downEndY = yAxis.get("end", 1);
                     }
                 }
             }
         }
-    });
-    Object.defineProperty(XYChart.prototype, "_handleWheelAnimation", {
-        enumerable: false,
-        configurable: true,
-        writable: true,
-        value: function (animation) {
-            var _this = this;
-            if (animation) {
-                animation.events.on("stopped", function () {
-                    _this._dispatchWheelAnimation();
-                });
+        if (this.get("panX") || this.get("panY")) {
+            if (local.x >= 0 && local.y >= 0 && local.x <= plotContainer.width() && local.y <= this.height()) {
+                //this._downPoint = local;
+                this._downPoint = { x: event.clientX, y: event.clientY };
+                const panX = this.get("panX");
+                const panY = this.get("panY");
+                if (panX) {
+                    this.xAxes.each((axis) => {
+                        axis._panStart = axis.get("start");
+                        axis._panEnd = axis.get("end");
+                    });
+                }
+                if (panY) {
+                    this.yAxes.each((axis) => {
+                        axis._panStart = axis.get("start");
+                        axis._panEnd = axis.get("end");
+                    });
+                }
+                const eventType = "panstarted";
+                if (this.events.isEnabled(eventType)) {
+                    this.events.dispatch(eventType, { type: eventType, target: this, originalEvent: event });
+                }
             }
-            else {
+        }
+    }
+    _handleWheelAnimation(animation) {
+        if (animation) {
+            animation.events.on("stopped", () => {
                 this._dispatchWheelAnimation();
-            }
+            });
         }
-    });
-    Object.defineProperty(XYChart.prototype, "_dispatchWheelAnimation", {
-        enumerable: false,
-        configurable: true,
-        writable: true,
-        value: function () {
-            var eventType = "wheelended";
-            if (this.events.isEnabled(eventType)) {
-                this.events.dispatch(eventType, { type: eventType, target: this });
-            }
+        else {
+            this._dispatchWheelAnimation();
         }
-    });
-    Object.defineProperty(XYChart.prototype, "_handlePlotUp", {
-        enumerable: false,
-        configurable: true,
-        writable: true,
-        value: function (event) {
-            var downPoint = this._downPoint;
-            if (downPoint) {
-                if (this.get("panX") || this.get("panY")) {
-                    var local = this.plotContainer.toLocal(this._root.documentPointToRoot({ x: event.clientX, y: event.clientY }));
-                    if (local.x == downPoint.x && local.y == downPoint.y) {
-                        var eventType_1 = "pancancelled";
-                        if (this.events.isEnabled(eventType_1)) {
-                            this.events.dispatch(eventType_1, { type: eventType_1, target: this, originalEvent: event });
-                        }
-                    }
-                    var eventType = "panended";
+    }
+    _dispatchWheelAnimation() {
+        const eventType = "wheelended";
+        if (this.events.isEnabled(eventType)) {
+            this.events.dispatch(eventType, { type: eventType, target: this });
+        }
+    }
+    _handlePlotUp(event) {
+        const downPoint = this._downPoint;
+        if (downPoint) {
+            if (this.get("panX") || this.get("panY")) {
+                let local = this.plotContainer.toLocal(this._root.documentPointToRoot({ x: event.clientX, y: event.clientY }));
+                if (local.x == downPoint.x && local.y == downPoint.y) {
+                    const eventType = "pancancelled";
                     if (this.events.isEnabled(eventType)) {
                         this.events.dispatch(eventType, { type: eventType, target: this, originalEvent: event });
                     }
                 }
+                const eventType = "panended";
+                if (this.events.isEnabled(eventType)) {
+                    this.events.dispatch(eventType, { type: eventType, target: this, originalEvent: event });
+                }
             }
-            // TODO: handle multitouch
-            this._downPoint = undefined;
-            this.xAxes.each(function (xAxis) {
-                xAxis._isPanning = false;
-            });
-            this.yAxes.each(function (yAxis) {
-                yAxis._isPanning = false;
-            });
         }
-    });
-    Object.defineProperty(XYChart.prototype, "_handlePlotMove", {
-        enumerable: false,
-        configurable: true,
-        writable: true,
-        value: function (event) {
-            var plotContainer = this.plotContainer;
-            if (this.get("pinchZoomX") || this.get("pinchZoomY")) {
-                var touchEvent = event;
-                var pointerId = touchEvent.pointerId;
-                if (pointerId) {
-                    this._movePoints[pointerId] = this._root.documentPointToRoot({ x: event.clientX, y: event.clientY });
-                    if ($object.keys(plotContainer._downPoints).length > 1) {
-                        this._handlePinch();
-                        return;
-                    }
+        // TODO: handle multitouch
+        this._downPoint = undefined;
+        this.xAxes.each((xAxis) => {
+            xAxis._isPanning = false;
+        });
+        this.yAxes.each((yAxis) => {
+            yAxis._isPanning = false;
+        });
+    }
+    _handlePlotMove(event) {
+        const plotContainer = this.plotContainer;
+        if (this.get("pinchZoomX") || this.get("pinchZoomY")) {
+            const touchEvent = event;
+            const pointerId = touchEvent.pointerId;
+            if (pointerId) {
+                this._movePoints[pointerId] = this._root.documentPointToRoot({ x: event.clientX, y: event.clientY });
+                if ($object.keys(plotContainer._downPoints).length > 1) {
+                    this._handlePinch();
+                    return;
                 }
             }
-            var downPoint = this._downPoint;
-            if (downPoint) {
-                downPoint = plotContainer.toLocal(this._root.documentPointToRoot(downPoint));
-                var local_1 = plotContainer.toLocal(this._root.documentPointToRoot({ x: event.clientX, y: event.clientY }));
-                var panX = this.get("panX");
-                var panY = this.get("panY");
-                if (panX) {
-                    var scrollbarX = this.get("scrollbarX");
-                    if (scrollbarX) {
-                        scrollbarX.events.disableType("rangechanged");
-                    }
-                    this.xAxes.each(function (axis) {
-                        if (axis.get("panX")) {
-                            axis._isPanning = true;
-                            //const maxDeviation = axis.get("maxDeviation", 0);
-                            var panStart = axis._panStart;
-                            var panEnd = axis._panEnd;
-                            var difference = (panEnd - panStart);
-                            var deltaX = difference * (downPoint.x - local_1.x) / plotContainer.width();
-                            if (axis.get("renderer").get("inversed")) {
-                                deltaX *= -1;
-                            }
-                            var start = panStart + deltaX;
-                            var end = panEnd + deltaX;
-                            if (end - start < 1 + axis.get("maxDeviation", 1) * 2) {
-                                axis.set("start", start);
-                                axis.set("end", end);
-                            }
+        }
+        let downPoint = this._downPoint;
+        if (downPoint) {
+            downPoint = plotContainer.toLocal(this._root.documentPointToRoot(downPoint));
+            let local = plotContainer.toLocal(this._root.documentPointToRoot({ x: event.clientX, y: event.clientY }));
+            const panX = this.get("panX");
+            const panY = this.get("panY");
+            if (panX) {
+                let scrollbarX = this.get("scrollbarX");
+                if (scrollbarX) {
+                    scrollbarX.events.disableType("rangechanged");
+                }
+                this.xAxes.each((axis) => {
+                    if (axis.get("panX")) {
+                        axis._isPanning = true;
+                        //const maxDeviation = axis.get("maxDeviation", 0);
+                        let panStart = axis._panStart;
+                        let panEnd = axis._panEnd;
+                        let difference = (panEnd - panStart);
+                        let deltaX = difference * (downPoint.x - local.x) / plotContainer.width();
+                        if (axis.get("renderer").get("inversed")) {
+                            deltaX *= -1;
+                        }
+                        let start = panStart + deltaX;
+                        let end = panEnd + deltaX;
+                        if (end - start < 1 + axis.get("maxDeviation", 1) * 2) {
+                            axis.set("start", start);
+                            axis.set("end", end);
                         }
-                    });
-                    if (scrollbarX) {
-                        scrollbarX.events.enableType("rangechanged");
                     }
+                });
+                if (scrollbarX) {
+                    scrollbarX.events.enableType("rangechanged");
                 }
-                if (panY) {
-                    var scrollbarY = this.get("scrollbarY");
-                    if (scrollbarY) {
-                        scrollbarY.events.disableType("rangechanged");
-                    }
-                    this.yAxes.each(function (axis) {
-                        if (axis.get("panY")) {
-                            axis._isPanning = true;
-                            //const maxDeviation = axis.get("maxDeviation", 0);
-                            var panStart = axis._panStart;
-                            var panEnd = axis._panEnd;
-                            var difference = (panEnd - panStart);
-                            var deltaY = difference * (downPoint.y - local_1.y) / plotContainer.height();
-                            if (axis.get("renderer").get("inversed")) {
-                                deltaY *= -1;
-                            }
-                            var start = panStart - deltaY;
-                            var end = panEnd - deltaY;
-                            if (end - start < 1 + axis.get("maxDeviation", 1) * 2) {
-                                axis.set("start", start);
-                                axis.set("end", end);
-                            }
+            }
+            if (panY) {
+                let scrollbarY = this.get("scrollbarY");
+                if (scrollbarY) {
+                    scrollbarY.events.disableType("rangechanged");
+                }
+                this.yAxes.each((axis) => {
+                    if (axis.get("panY")) {
+                        axis._isPanning = true;
+                        //const maxDeviation = axis.get("maxDeviation", 0);
+                        let panStart = axis._panStart;
+                        let panEnd = axis._panEnd;
+                        let difference = (panEnd - panStart);
+                        let deltaY = difference * (downPoint.y - local.y) / plotContainer.height();
+                        if (axis.get("renderer").get("inversed")) {
+                            deltaY *= -1;
+                        }
+                        let start = panStart - deltaY;
+                        let end = panEnd - deltaY;
+                        if (end - start < 1 + axis.get("maxDeviation", 1) * 2) {
+                            axis.set("start", start);
+                            axis.set("end", end);
                         }
-                    });
-                    if (scrollbarY) {
-                        scrollbarY.events.enableType("rangechanged");
                     }
+                });
+                if (scrollbarY) {
+                    scrollbarY.events.enableType("rangechanged");
                 }
             }
         }
-    });
-    Object.defineProperty(XYChart.prototype, "_handlePinch", {
-        enumerable: false,
-        configurable: true,
-        writable: true,
-        value: function () {
-            var _a, _b, _c, _d;
-            var _this = this;
-            var plotContainer = this.plotContainer;
-            var i = 0;
-            var downPoints = [];
-            var movePoints = [];
-            $object.each(plotContainer._downPoints, function (k, point) {
-                downPoints[i] = point;
-                var movePoint = _this._movePoints[k];
-                if (movePoint) {
-                    movePoints[i] = movePoint;
-                }
-                i++;
-            });
-            if (downPoints.length > 1 && movePoints.length > 1) {
-                var w = plotContainer.width();
-                var h = plotContainer.height();
-                var downPoint0 = downPoints[0];
-                var downPoint1 = downPoints[1];
-                var movePoint0 = movePoints[0];
-                var movePoint1 = movePoints[1];
-                if (downPoint0 && downPoint1 && movePoint0 && movePoint1) {
-                    movePoint0 = plotContainer.toLocal(movePoint0);
-                    movePoint1 = plotContainer.toLocal(movePoint1);
-                    downPoint0 = plotContainer.toLocal(downPoint0);
-                    downPoint1 = plotContainer.toLocal(downPoint1);
-                    if (this.get("pinchZoomX")) {
-                        var downStartX = this._downStartX;
-                        var downEndX = this._downEndX;
-                        if (downStartX != null && downEndX != null) {
-                            if (downPoint0.x > downPoint1.x) {
-                                _a = __read([downPoint1, downPoint0], 2), downPoint0 = _a[0], downPoint1 = _a[1];
-                                _b = __read([movePoint1, movePoint0], 2), movePoint0 = _b[0], movePoint1 = _b[1];
-                            }
-                            var downPos0 = downStartX + (downPoint0.x / w) * (downEndX - downStartX);
-                            var downPos1 = downStartX + (downPoint1.x / w) * (downEndX - downStartX);
-                            var movePos0 = downStartX + (movePoint0.x / w) * (downEndX - downStartX);
-                            var movePos1 = downStartX + (movePoint1.x / w) * (downEndX - downStartX);
-                            var initialDistance = Math.max(0.001, downPos1 - downPos0);
-                            var currentDistance = Math.max(0.001, movePos1 - movePos0);
-                            var d = initialDistance / currentDistance;
-                            var s_1 = downStartX * d + downPos0 - movePos0 * d;
-                            var e_1 = downEndX * d + downPos1 - movePos1 * d;
-                            this.xAxes.each(function (xAxis) {
-                                var sa = xAxis.fixPosition(s_1);
-                                var ea = xAxis.fixPosition(e_1);
-                                xAxis.zoom(sa, ea, 0);
-                            });
+    }
+    _handlePinch() {
+        const plotContainer = this.plotContainer;
+        let i = 0;
+        let downPoints = [];
+        let movePoints = [];
+        $object.each(plotContainer._downPoints, (k, point) => {
+            downPoints[i] = point;
+            let movePoint = this._movePoints[k];
+            if (movePoint) {
+                movePoints[i] = movePoint;
+            }
+            i++;
+        });
+        if (downPoints.length > 1 && movePoints.length > 1) {
+            const w = plotContainer.width();
+            const h = plotContainer.height();
+            let downPoint0 = downPoints[0];
+            let downPoint1 = downPoints[1];
+            let movePoint0 = movePoints[0];
+            let movePoint1 = movePoints[1];
+            if (downPoint0 && downPoint1 && movePoint0 && movePoint1) {
+                movePoint0 = plotContainer.toLocal(movePoint0);
+                movePoint1 = plotContainer.toLocal(movePoint1);
+                downPoint0 = plotContainer.toLocal(downPoint0);
+                downPoint1 = plotContainer.toLocal(downPoint1);
+                if (this.get("pinchZoomX")) {
+                    const downStartX = this._downStartX;
+                    const downEndX = this._downEndX;
+                    if (downStartX != null && downEndX != null) {
+                        if (downPoint0.x > downPoint1.x) {
+                            [downPoint0, downPoint1] = [downPoint1, downPoint0];
+                            [movePoint0, movePoint1] = [movePoint1, movePoint0];
                         }
+                        let downPos0 = downStartX + (downPoint0.x / w) * (downEndX - downStartX);
+                        let downPos1 = downStartX + (downPoint1.x / w) * (downEndX - downStartX);
+                        let movePos0 = downStartX + (movePoint0.x / w) * (downEndX - downStartX);
+                        let movePos1 = downStartX + (movePoint1.x / w) * (downEndX - downStartX);
+                        let initialDistance = Math.max(0.001, downPos1 - downPos0);
+                        let currentDistance = Math.max(0.001, movePos1 - movePos0);
+                        let d = initialDistance / currentDistance;
+                        let s = downStartX * d + downPos0 - movePos0 * d;
+                        let e = downEndX * d + downPos1 - movePos1 * d;
+                        this.xAxes.each((xAxis) => {
+                            let sa = xAxis.fixPosition(s);
+                            let ea = xAxis.fixPosition(e);
+                            xAxis.zoom(sa, ea, 0);
+                        });
                     }
-                    if (this.get("pinchZoomY")) {
-                        var downStartY = this._downStartY;
-                        var downEndY = this._downEndY;
-                        if (downStartY != null && downEndY != null) {
-                            if (downPoint0.y < downPoint1.y) {
-                                _c = __read([downPoint1, downPoint0], 2), downPoint0 = _c[0], downPoint1 = _c[1];
-                                _d = __read([movePoint1, movePoint0], 2), movePoint0 = _d[0], movePoint1 = _d[1];
-                            }
-                            var downPos0 = downStartY + (1 - downPoint0.y / h) * (downEndY - downStartY);
-                            var downPos1 = downStartY + (1 - downPoint1.y / h) * (downEndY - downStartY);
-                            var movePos0 = downStartY + (1 - movePoint0.y / h) * (downEndY - downStartY);
-                            var movePos1 = downStartY + (1 - movePoint1.y / h) * (downEndY - downStartY);
-                            var initialDistance = Math.max(0.001, downPos1 - downPos0);
-                            var currentDistance = Math.max(0.001, movePos1 - movePos0);
-                            var d = initialDistance / currentDistance;
-                            var s_2 = downStartY * d + downPos0 - movePos0 * d;
-                            var e_2 = downEndY * d + downPos1 - movePos1 * d;
-                            this.yAxes.each(function (yAxis) {
-                                var sa = yAxis.fixPosition(s_2);
-                                var ea = yAxis.fixPosition(e_2);
-                                yAxis.zoom(sa, ea, 0);
-                            });
+                }
+                if (this.get("pinchZoomY")) {
+                    const downStartY = this._downStartY;
+                    const downEndY = this._downEndY;
+                    if (downStartY != null && downEndY != null) {
+                        if (downPoint0.y < downPoint1.y) {
+                            [downPoint0, downPoint1] = [downPoint1, downPoint0];
+                            [movePoint0, movePoint1] = [movePoint1, movePoint0];
                         }
+                        let downPos0 = downStartY + (1 - downPoint0.y / h) * (downEndY - downStartY);
+                        let downPos1 = downStartY + (1 - downPoint1.y / h) * (downEndY - downStartY);
+                        let movePos0 = downStartY + (1 - movePoint0.y / h) * (downEndY - downStartY);
+                        let movePos1 = downStartY + (1 - movePoint1.y / h) * (downEndY - downStartY);
+                        let initialDistance = Math.max(0.001, downPos1 - downPos0);
+                        let currentDistance = Math.max(0.001, movePos1 - movePos0);
+                        let d = initialDistance / currentDistance;
+                        let s = downStartY * d + downPos0 - movePos0 * d;
+                        let e = downEndY * d + downPos1 - movePos1 * d;
+                        this.yAxes.each((yAxis) => {
+                            let sa = yAxis.fixPosition(s);
+                            let ea = yAxis.fixPosition(e);
+                            yAxis.zoom(sa, ea, 0);
+                        });
                     }
                 }
             }
         }
-    });
-    Object.defineProperty(XYChart.prototype, "_handleCursorPosition", {
-        enumerable: false,
-        configurable: true,
-        writable: true,
-        value: function () {
-            var cursor = this.get("cursor");
-            if (cursor) {
-                var cursorPoint_1 = cursor.getPrivate("point");
-                var snapToSeries = cursor.get("snapToSeries");
-                if (cursor._downPoint) {
-                    snapToSeries = undefined;
-                }
-                if (snapToSeries && cursorPoint_1) {
-                    var snapToSeriesBy_1 = cursor.get("snapToSeriesBy");
-                    var dataItems_1 = [];
-                    $array.each(snapToSeries, function (series) {
-                        if (!series.isHidden() && !series.isHiding()) {
-                            if (snapToSeriesBy_1 != "x!" && snapToSeriesBy_1 != "y!") {
-                                var startIndex = series.startIndex();
-                                var endIndex = series.endIndex();
-                                for (var i = startIndex; i < endIndex; i++) {
-                                    var dataItem = series.dataItems[i];
-                                    if (dataItem && !dataItem.isHidden()) {
-                                        dataItems_1.push(dataItem);
-                                    }
-                                }
-                            }
-                            else {
-                                var tooltipDataItem = series.get("tooltipDataItem");
-                                if (tooltipDataItem) {
-                                    dataItems_1.push(tooltipDataItem);
+    }
+    _handleCursorPosition() {
+        const cursor = this.get("cursor");
+        if (cursor) {
+            const cursorPoint = cursor.getPrivate("point");
+            let snapToSeries = cursor.get("snapToSeries");
+            if (cursor._downPoint) {
+                snapToSeries = undefined;
+            }
+            if (snapToSeries && cursorPoint) {
+                const snapToSeriesBy = cursor.get("snapToSeriesBy");
+                const dataItems = [];
+                $array.each(snapToSeries, (series) => {
+                    if (!series.isHidden() && !series.isHiding()) {
+                        if (snapToSeriesBy != "x!" && snapToSeriesBy != "y!") {
+                            const startIndex = series.startIndex();
+                            const endIndex = series.endIndex();
+                            for (let i = startIndex; i < endIndex; i++) {
+                                const dataItem = series.dataItems[i];
+                                if (dataItem && !dataItem.isHidden()) {
+                                    dataItems.push(dataItem);
                                 }
                             }
                         }
-                    });
-                    var minDistance_1 = Infinity;
-                    var closestItem_1;
-                    $array.each(dataItems_1, function (dataItem) {
-                        var point = dataItem.get("point");
-                        if (point) {
-                            var distance = 0;
-                            if (snapToSeriesBy_1 == "x" || snapToSeriesBy_1 == "x!") {
-                                distance = Math.abs(cursorPoint_1.x - point.x);
-                            }
-                            else if (snapToSeriesBy_1 == "y" || snapToSeriesBy_1 == "y!") {
-                                distance = Math.abs(cursorPoint_1.y - point.y);
-                            }
-                            else {
-                                distance = Math.hypot(cursorPoint_1.x - point.x, cursorPoint_1.y - point.y);
-                            }
-                            if (distance < minDistance_1) {
-                                minDistance_1 = distance;
-                                closestItem_1 = dataItem;
+                        else {
+                            const tooltipDataItem = series.get("tooltipDataItem");
+                            if (tooltipDataItem) {
+                                dataItems.push(tooltipDataItem);
                             }
                         }
-                    });
-                    $array.each(snapToSeries, function (series) {
-                        var tooltip = series.get("tooltip");
-                        if (tooltip) {
-                            tooltip._setDataItem(undefined);
+                    }
+                });
+                let minDistance = Infinity;
+                let closestItem;
+                $array.each(dataItems, (dataItem) => {
+                    const point = dataItem.get("point");
+                    if (point) {
+                        let distance = 0;
+                        if (snapToSeriesBy == "x" || snapToSeriesBy == "x!") {
+                            distance = Math.abs(cursorPoint.x - point.x);
                         }
-                    });
-                    if (closestItem_1) {
-                        var series = closestItem_1.component;
-                        series.showDataItemTooltip(closestItem_1);
-                        var point = closestItem_1.get("point");
-                        if (point) {
-                            // removing x and y to solve #72225
-                            cursor.handleMove(series.toGlobal({ x: point.x - series.x(), y: point.y - series.y() }), true);
+                        else if (snapToSeriesBy == "y" || snapToSeriesBy == "y!") {
+                            distance = Math.abs(cursorPoint.y - point.y);
                         }
-                    }
-                }
-            }
-        }
-    });
-    Object.defineProperty(XYChart.prototype, "_updateCursor", {
-        enumerable: false,
-        configurable: true,
-        writable: true,
-        value: function () {
-            var cursor = this.get("cursor");
-            if (cursor) {
-                cursor.handleMove();
-            }
-        }
-    });
-    Object.defineProperty(XYChart.prototype, "_addCursor", {
-        enumerable: false,
-        configurable: true,
-        writable: true,
-        value: function (cursor) {
-            this.plotContainer.children.push(cursor);
-        }
-    });
-    Object.defineProperty(XYChart.prototype, "_prepareChildren", {
-        enumerable: false,
-        configurable: true,
-        writable: true,
-        value: function () {
-            var _this = this;
-            _super.prototype._prepareChildren.call(this);
-            this.series.each(function (series) {
-                _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) {
-                        previous.dispose();
-                    }
-                    if (cursor) {
-                        cursor._setChart(this);
-                        this._addCursor(cursor);
-                        this._pushPropertyDisposer("cursor", cursor.events.on("selectended", function () {
-                            _this._handleCursorSelectEnd();
-                        }));
-                    }
-                    //this.setRaw("cursor", cursor) // to reset previous value
-                    this._prevSettings.cursor = cursor;
-                }
-            }
-            if (this.isDirty("scrollbarX")) {
-                var previous = this._prevSettings.scrollbarX;
-                var scrollbarX = this.get("scrollbarX");
-                if (scrollbarX !== previous) {
-                    this._disposeProperty("scrollbarX");
-                    if (previous) {
-                        previous.dispose();
-                    }
-                    if (scrollbarX) {
-                        if (!scrollbarX.parent) {
-                            this.topAxesContainer.children.push(scrollbarX);
+                        else {
+                            distance = Math.hypot(cursorPoint.x - point.x, cursorPoint.y - point.y);
+                        }
+                        if (distance < minDistance) {
+                            minDistance = distance;
+                            closestItem = dataItem;
                         }
-                        this._pushPropertyDisposer("scrollbarX", scrollbarX.events.on("rangechanged", function (e) {
-                            _this._handleScrollbar(_this.xAxes, e.start, e.end, e.grip);
-                        }));
-                        // Used to populate `ariaLabel` with meaningful values
-                        scrollbarX.setPrivate("positionTextFunction", function (position) {
-                            var axis = _this.xAxes.getIndex(0);
-                            return axis ? axis.getTooltipText(position) || "" : "";
-                        });
                     }
-                    this._prevSettings.scrollbarX = scrollbarX;
-                }
-            }
-            if (this.isDirty("scrollbarY")) {
-                var previous = this._prevSettings.scrollbarY;
-                var scrollbarY = this.get("scrollbarY");
-                if (scrollbarY !== previous) {
-                    this._disposeProperty("scrollbarY");
-                    if (previous) {
-                        previous.dispose();
+                });
+                $array.each(snapToSeries, (series) => {
+                    const tooltip = series.get("tooltip");
+                    if (tooltip) {
+                        tooltip._setDataItem(undefined);
                     }
-                    if (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, e.grip);
-                        }));
-                        // Used to populate `ariaLabel` with meaningful values
-                        scrollbarY.setPrivate("positionTextFunction", function (position) {
-                            var axis = _this.yAxes.getIndex(0);
-                            return axis ? axis.getTooltipText(position) || "" : "";
-                        });
+                });
+                if (closestItem) {
+                    let series = closestItem.component;
+                    series.showDataItemTooltip(closestItem);
+                    const point = closestItem.get("point");
+                    if (point) {
+                        // removing x and y to solve #72225
+                        cursor.handleMove(series.toGlobal({ x: point.x - series.x(), y: point.y - series.y() }), true);
                     }
-                    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);
+    }
+    _updateCursor() {
+        let cursor = this.get("cursor");
+        if (cursor) {
+            cursor.handleMove();
+        }
+    }
+    _addCursor(cursor) {
+        this.plotContainer.children.push(cursor);
+    }
+    _prepareChildren() {
+        super._prepareChildren();
+        this.series.each((series) => {
             this._colorize(series);
+        });
+        if (this.isDirty("wheelX") || this.isDirty("wheelY")) {
+            this._handleSetWheel();
         }
-    });
-    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);
+        if (this.isDirty("cursor")) {
+            const previous = this._prevSettings.cursor;
+            const cursor = this.get("cursor");
+            if (cursor !== previous) {
+                this._disposeProperty("cursor");
+                if (previous) {
+                    previous.dispose();
                 }
+                if (cursor) {
+                    cursor._setChart(this);
+                    this._addCursor(cursor);
+                    this._pushPropertyDisposer("cursor", cursor.events.on("selectended", () => {
+                        this._handleCursorSelectEnd();
+                    }));
+                }
+                //this.setRaw("cursor", cursor) // to reset previous value
+                this._prevSettings.cursor = cursor;
             }
         }
-    });
-    Object.defineProperty(XYChart.prototype, "_handleCursorSelectEnd", {
-        enumerable: false,
-        configurable: true,
-        writable: true,
-        value: function () {
-            var cursor = this.get("cursor");
-            var behavior = cursor.get("behavior");
-            var downPositionX = cursor.getPrivate("downPositionX", 0);
-            var downPositionY = cursor.getPrivate("downPositionY", 0);
-            var positionX = cursor.getPrivate("positionX", 0.5);
-            var positionY = cursor.getPrivate("positionY", 0.5);
-            this.xAxes.each(function (axis) {
-                if (behavior === "zoomX" || behavior === "zoomXY") {
-                    var position0 = axis.toAxisPosition(downPositionX);
-                    var position1 = axis.toAxisPosition(positionX);
-                    axis.zoom(position0, position1);
-                }
-                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);
+        if (this.isDirty("scrollbarX")) {
+            const previous = this._prevSettings.scrollbarX;
+            const scrollbarX = this.get("scrollbarX");
+            if (scrollbarX !== previous) {
+                this._disposeProperty("scrollbarX");
+                if (previous) {
+                    previous.dispose();
                 }
-                axis.setPrivate("updateScrollbar", true);
-            });
-        }
-    });
-    Object.defineProperty(XYChart.prototype, "_handleScrollbar", {
-        enumerable: false,
-        configurable: true,
-        writable: true,
-        value: function (axes, start, end, priority) {
-            axes.each(function (axis) {
-                var axisStart = axis.fixPosition(start);
-                var axisEnd = axis.fixPosition(end);
-                var zoomAnimation = axis.zoom(axisStart, axisEnd, undefined, priority);
-                var updateScrollbar = "updateScrollbar";
-                axis.setPrivateRaw(updateScrollbar, false);
-                if (zoomAnimation) {
-                    zoomAnimation.events.on("stopped", function () {
-                        axis.setPrivateRaw(updateScrollbar, true);
+                if (scrollbarX) {
+                    if (!scrollbarX.parent) {
+                        this.topAxesContainer.children.push(scrollbarX);
+                    }
+                    this._pushPropertyDisposer("scrollbarX", scrollbarX.events.on("rangechanged", (e) => {
+                        this._handleScrollbar(this.xAxes, e.start, e.end, e.grip);
+                    }));
+                    // Used to populate `ariaLabel` with meaningful values
+                    scrollbarX.setPrivate("positionTextFunction", (position) => {
+                        const axis = this.xAxes.getIndex(0);
+                        return axis ? axis.getTooltipText(position) || "" : "";
                     });
                 }
-                else {
-                    axis.setPrivateRaw(updateScrollbar, true);
-                }
-            });
+                this._prevSettings.scrollbarX = scrollbarX;
+            }
         }
-    });
-    Object.defineProperty(XYChart.prototype, "_processAxis", {
-        enumerable: false,
-        configurable: true,
-        writable: true,
-        value: function (axes, container) {
-            var _this = this;
-            return axes.events.onAll(function (change) {
-                if (change.type === "clear") {
-                    $array.each(change.oldValues, function (axis) {
-                        _this._removeAxis(axis);
-                    });
-                }
-                else if (change.type === "push") {
-                    container.children.push(change.newValue);
-                    change.newValue.processChart(_this);
-                }
-                else if (change.type === "setIndex") {
-                    container.children.setIndex(change.index, change.newValue);
-                    change.newValue.processChart(_this);
-                }
-                else if (change.type === "insertIndex") {
-                    container.children.insertIndex(change.index, change.newValue);
-                    change.newValue.processChart(_this);
-                }
-                else if (change.type === "removeIndex") {
-                    _this._removeAxis(change.oldValue);
+        if (this.isDirty("scrollbarY")) {
+            const previous = this._prevSettings.scrollbarY;
+            const scrollbarY = this.get("scrollbarY");
+            if (scrollbarY !== previous) {
+                this._disposeProperty("scrollbarY");
+                if (previous) {
+                    previous.dispose();
                 }
-                else if (change.type === "moveIndex") {
-                    container.children.moveValue(change.value, change.newIndex);
-                    change.value.processChart(_this);
-                }
-                else {
-                    throw new Error("Unknown IListEvent type");
+                if (scrollbarY) {
+                    if (!scrollbarY.parent) {
+                        this.rightAxesContainer.children.push(scrollbarY);
+                    }
+                    this._pushPropertyDisposer("scrollbarY", scrollbarY.events.on("rangechanged", (e) => {
+                        this._handleScrollbar(this.yAxes, e.start, e.end, e.grip);
+                    }));
+                    // Used to populate `ariaLabel` with meaningful values
+                    scrollbarY.setPrivate("positionTextFunction", (position) => {
+                        const axis = this.yAxes.getIndex(0);
+                        return axis ? axis.getTooltipText(position) || "" : "";
+                    });
                 }
-            });
+                this._prevSettings.scrollbarY = scrollbarY;
+            }
         }
-    });
-    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);
-                }
+        this._handleZoomOut();
+    }
+    _processSeries(series) {
+        super._processSeries(series);
+        this._colorize(series);
+    }
+    _colorize(series) {
+        const colorSet = this.get("colors");
+        if (colorSet) {
+            if (series.get("fill") == null) {
+                const color = colorSet.next();
+                series._setSoft("stroke", color);
+                series._setSoft("fill", color);
             }
         }
-    });
-    Object.defineProperty(XYChart.prototype, "_updateChartLayout", {
-        enumerable: false,
-        configurable: true,
-        writable: true,
-        value: function () {
-            var left = this.leftAxesContainer.width();
-            var right = this.rightAxesContainer.width();
-            var bottomAxesContainer = this.bottomAxesContainer;
-            bottomAxesContainer.set("paddingLeft", left);
-            bottomAxesContainer.set("paddingRight", right);
-            var topAxesContainer = this.topAxesContainer;
-            topAxesContainer.set("paddingLeft", left);
-            topAxesContainer.set("paddingRight", right);
+    }
+    _handleCursorSelectEnd() {
+        const cursor = this.get("cursor");
+        const behavior = cursor.get("behavior");
+        const downPositionX = cursor.getPrivate("downPositionX", 0);
+        const downPositionY = cursor.getPrivate("downPositionY", 0);
+        const positionX = cursor.getPrivate("positionX", 0.5);
+        const positionY = cursor.getPrivate("positionY", 0.5);
+        this.xAxes.each((axis) => {
+            if (behavior === "zoomX" || behavior === "zoomXY") {
+                let position0 = axis.toAxisPosition(downPositionX);
+                let position1 = axis.toAxisPosition(positionX);
+                axis.zoom(position0, position1);
+            }
+            axis.setPrivate("updateScrollbar", true);
+        });
+        this.yAxes.each((axis) => {
+            if (behavior === "zoomY" || behavior === "zoomXY") {
+                let position0 = axis.toAxisPosition(downPositionY);
+                let position1 = axis.toAxisPosition(positionY);
+                axis.zoom(position0, position1);
+            }
+            axis.setPrivate("updateScrollbar", true);
+        });
+    }
+    _handleScrollbar(axes, start, end, priority) {
+        axes.each((axis) => {
+            let axisStart = axis.fixPosition(start);
+            let axisEnd = axis.fixPosition(end);
+            let zoomAnimation = axis.zoom(axisStart, axisEnd, undefined, priority);
+            const updateScrollbar = "updateScrollbar";
+            axis.setPrivateRaw(updateScrollbar, false);
+            if (zoomAnimation) {
+                zoomAnimation.events.on("stopped", () => {
+                    axis.setPrivateRaw(updateScrollbar, true);
+                });
+            }
+            else {
+                axis.setPrivateRaw(updateScrollbar, true);
+            }
+        });
+    }
+    _processAxis(axes, container) {
+        return axes.events.onAll((change) => {
+            if (change.type === "clear") {
+                $array.each(change.oldValues, (axis) => {
+                    this._removeAxis(axis);
+                });
+            }
+            else if (change.type === "push") {
+                container.children.push(change.newValue);
+                change.newValue.processChart(this);
+            }
+            else if (change.type === "setIndex") {
+                container.children.setIndex(change.index, change.newValue);
+                change.newValue.processChart(this);
+            }
+            else if (change.type === "insertIndex") {
+                container.children.insertIndex(change.index, change.newValue);
+                change.newValue.processChart(this);
+            }
+            else if (change.type === "removeIndex") {
+                this._removeAxis(change.oldValue);
+            }
+            else if (change.type === "moveIndex") {
+                container.children.moveValue(change.value, change.newIndex);
+                change.value.processChart(this);
+            }
+            else {
+                throw new Error("Unknown IListEvent type");
+            }
+        });
+    }
+    _removeAxis(axis) {
+        if (!axis.isDisposed()) {
+            const axisParent = axis.parent;
+            if (axisParent) {
+                axisParent.children.removeValue(axis);
+            }
+            const gridContainer = axis.gridContainer;
+            const gridParent = gridContainer.parent;
+            if (gridParent) {
+                gridParent.children.removeValue(gridContainer);
+            }
+            const topGridContainer = axis.topGridContainer;
+            const topGridParent = topGridContainer.parent;
+            if (topGridParent) {
+                topGridParent.children.removeValue(topGridContainer);
+            }
         }
-    });
+    }
+    _updateChartLayout() {
+        const left = this.leftAxesContainer.width();
+        const right = this.rightAxesContainer.width();
+        const bottomAxesContainer = this.bottomAxesContainer;
+        bottomAxesContainer.set("paddingLeft", left);
+        bottomAxesContainer.set("paddingRight", right);
+        const topAxesContainer = this.topAxesContainer;
+        topAxesContainer.set("paddingLeft", left);
+        topAxesContainer.set("paddingRight", right);
+    }
     /**
      * @ignore
      */
-    Object.defineProperty(XYChart.prototype, "processAxis", {
-        enumerable: false,
-        configurable: true,
-        writable: true,
-        value: function (_axis) { }
-    });
+    processAxis(_axis) { }
     ;
-    Object.defineProperty(XYChart.prototype, "_handleAxisSelection", {
-        enumerable: false,
-        configurable: true,
-        writable: true,
-        value: function (axis, force) {
-            var _a;
-            var start = axis.fixPosition(axis.get("start", 0));
-            var end = axis.fixPosition(axis.get("end", 1));
-            if (start > end) {
-                _a = __read([end, start], 2), start = _a[0], end = _a[1];
-            }
-            if (this.xAxes.indexOf(axis) != -1) {
-                if (force || axis.getPrivate("updateScrollbar")) {
-                    var scrollbarX = this.get("scrollbarX");
-                    if (scrollbarX && (!scrollbarX.getPrivate("isBusy") || force)) {
-                        scrollbarX.setRaw("start", start);
-                        scrollbarX.setRaw("end", end);
-                        scrollbarX.updateGrips();
-                    }
+    _handleAxisSelection(axis, force) {
+        let start = axis.fixPosition(axis.get("start", 0));
+        let end = axis.fixPosition(axis.get("end", 1));
+        if (start > end) {
+            [start, end] = [end, start];
+        }
+        if (this.xAxes.indexOf(axis) != -1) {
+            if (force || axis.getPrivate("updateScrollbar")) {
+                let scrollbarX = this.get("scrollbarX");
+                if (scrollbarX && (!scrollbarX.getPrivate("isBusy") || force)) {
+                    scrollbarX.setRaw("start", start);
+                    scrollbarX.setRaw("end", end);
+                    scrollbarX.updateGrips();
                 }
             }
-            else if (this.yAxes.indexOf(axis) != -1) {
-                if (force || axis.getPrivate("updateScrollbar")) {
-                    var scrollbarY = this.get("scrollbarY");
-                    if (scrollbarY && (!scrollbarY.getPrivate("isBusy") || force)) {
-                        scrollbarY.setRaw("start", start);
-                        scrollbarY.setRaw("end", end);
-                        scrollbarY.updateGrips();
-                    }
+        }
+        else if (this.yAxes.indexOf(axis) != -1) {
+            if (force || axis.getPrivate("updateScrollbar")) {
+                let scrollbarY = this.get("scrollbarY");
+                if (scrollbarY && (!scrollbarY.getPrivate("isBusy") || force)) {
+                    scrollbarY.setRaw("start", start);
+                    scrollbarY.setRaw("end", end);
+                    scrollbarY.updateGrips();
                 }
             }
-            this._handleZoomOut();
         }
-    });
-    Object.defineProperty(XYChart.prototype, "_handleZoomOut", {
-        enumerable: false,
-        configurable: true,
-        writable: true,
-        value: function () {
-            var zoomOutButton = this.zoomOutButton;
-            if (zoomOutButton && zoomOutButton.parent) {
-                var visible_1 = false;
-                this.xAxes.each(function (axis) {
-                    if (axis.get("start") != 0 || axis.get("end") != 1) {
-                        visible_1 = true;
-                    }
-                });
-                this.yAxes.each(function (axis) {
-                    if (axis.get("start") != 0 || axis.get("end") != 1) {
-                        visible_1 = true;
-                    }
-                });
-                if (visible_1) {
-                    if (zoomOutButton.isHidden()) {
-                        zoomOutButton.show();
-                    }
+        this._handleZoomOut();
+    }
+    _handleZoomOut() {
+        let zoomOutButton = this.zoomOutButton;
+        if (zoomOutButton && zoomOutButton.parent) {
+            let visible = false;
+            this.xAxes.each((axis) => {
+                if (axis.get("start") != 0 || axis.get("end") != 1) {
+                    visible = true;
                 }
-                else {
-                    zoomOutButton.hide();
+            });
+            this.yAxes.each((axis) => {
+                if (axis.get("start") != 0 || axis.get("end") != 1) {
+                    visible = true;
                 }
+            });
+            if (visible) {
+                if (zoomOutButton.isHidden()) {
+                    zoomOutButton.show();
+                }
+            }
+            else {
+                zoomOutButton.hide();
             }
         }
-    });
+    }
     /**
      * Checks if point is within plot area.
      *
      * @param   point  Reference point
      * @return         Is within plot area?
      */
-    Object.defineProperty(XYChart.prototype, "inPlot", {
-        enumerable: false,
-        configurable: true,
-        writable: true,
-        value: function (point) {
-            var plotContainer = this.plotContainer;
-            var otherCharts = this.getPrivate("otherCharts", this._otherCharts);
-            var global = plotContainer.toGlobal(point);
-            if (point.x >= -0.1 && point.y >= -0.1 && point.x <= plotContainer.width() + 0.1 && point.y <= plotContainer.height() + 0.1) {
-                return true;
-            }
-            if (otherCharts) {
-                for (var i = otherCharts.length - 1; i >= 0; i--) {
-                    var chart = otherCharts[i];
-                    if (chart != this) {
-                        var chartPlotContainer = chart.plotContainer;
-                        var documentPoint = this._root.rootPointToDocument(global);
-                        var chartRoot = chart._root.documentPointToRoot(documentPoint);
-                        var local = chartPlotContainer.toLocal(chartRoot);
-                        if (local.x >= -0.1 && local.y >= -0.1 && local.x <= chartPlotContainer.width() + 0.1 && local.y <= chartPlotContainer.height() + 0.1) {
-                            return true;
-                        }
+    inPlot(point) {
+        const plotContainer = this.plotContainer;
+        const otherCharts = this.getPrivate("otherCharts", this._otherCharts);
+        const global = plotContainer.toGlobal(point);
+        if (point.x >= -0.5 && point.y >= -0.5 && point.x <= plotContainer.width() + 0.5 && point.y <= plotContainer.height() + 0.5) {
+            return true;
+        }
+        if (otherCharts) {
+            for (let i = otherCharts.length - 1; i >= 0; i--) {
+                const chart = otherCharts[i];
+                if (chart != this) {
+                    const chartPlotContainer = chart.plotContainer;
+                    const documentPoint = this._root.rootPointToDocument(global);
+                    const chartRoot = chart._root.documentPointToRoot(documentPoint);
+                    const local = chartPlotContainer.toLocal(chartRoot);
+                    if (local.x >= -0.1 && local.y >= -0.1 && local.x <= chartPlotContainer.width() + 0.1 && local.y <= chartPlotContainer.height() + 0.1) {
+                        return true;
                     }
                 }
             }
-            return false;
         }
-    });
+        return false;
+    }
     /**
      * @ignore
      */
-    Object.defineProperty(XYChart.prototype, "arrangeTooltips", {
-        enumerable: false,
-        configurable: true,
-        writable: true,
-        value: function () {
-            var _this = this;
-            var plotContainer = this.plotContainer;
-            var w = plotContainer.width();
-            var h = plotContainer.height();
-            var hh = this.height();
-            var plotT = plotContainer._display.toGlobal({ x: 0, y: 0 });
-            var plotB = plotContainer._display.toGlobal({ x: w, y: h });
-            var tooltips = [];
-            var sum = 0;
-            var minDistance = Infinity;
-            var movePoint = this._movePoint;
-            var maxTooltipDistance = this.get("maxTooltipDistance");
-            var maxTooltipDistanceBy = this.get("maxTooltipDistanceBy", "xy");
-            var closest;
-            var closestPoint;
-            if ($type.isNumber(maxTooltipDistance)) {
-                this.series.each(function (series) {
-                    var tooltip = series.get("tooltip");
-                    if (tooltip) {
-                        var point = tooltip.get("pointTo");
-                        if (point) {
-                            var distance = Math.hypot(movePoint.x - point.x, movePoint.y - point.y);
-                            if (maxTooltipDistanceBy == "x") {
-                                distance = Math.abs(movePoint.x - point.x);
-                            }
-                            else if (maxTooltipDistanceBy == "y") {
-                                distance = Math.abs(movePoint.y - point.y);
-                            }
-                            if (distance < minDistance) {
-                                minDistance = distance;
-                                closest = series;
-                                closestPoint = point;
-                            }
-                        }
-                    }
-                });
-            }
-            var tooltipSeries = [];
-            this.series.each(function (series) {
-                var tooltip = series.get("tooltip");
+    arrangeTooltips() {
+        const plotContainer = this.plotContainer;
+        const w = plotContainer.width();
+        const h = plotContainer.height();
+        const hh = this.height();
+        let plotT = plotContainer._display.toGlobal({ x: 0, y: 0 });
+        let plotB = plotContainer._display.toGlobal({ x: w, y: h });
+        const tooltips = [];
+        let sum = 0;
+        let minDistance = Infinity;
+        let movePoint = this._movePoint;
+        let maxTooltipDistance = this.get("maxTooltipDistance");
+        let maxTooltipDistanceBy = this.get("maxTooltipDistanceBy", "xy");
+        let closest;
+        let closestPoint;
+        if ($type.isNumber(maxTooltipDistance)) {
+            this.series.each((series) => {
+                const tooltip = series.get("tooltip");
                 if (tooltip) {
-                    var hidden = false;
-                    var point = tooltip.get("pointTo");
+                    let point = tooltip.get("pointTo");
                     if (point) {
-                        if (maxTooltipDistance >= 0) {
-                            var point_1 = tooltip.get("pointTo");
-                            if (point_1) {
-                                if (series != closest) {
-                                    var distance = Math.hypot(closestPoint.x - point_1.x, closestPoint.y - point_1.y);
-                                    if (maxTooltipDistanceBy == "x") {
-                                        distance = Math.abs(closestPoint.x - point_1.x);
-                                    }
-                                    else if (maxTooltipDistanceBy == "y") {
-                                        distance = Math.abs(closestPoint.y - point_1.y);
-                                    }
-                                    if (distance > maxTooltipDistance) {
-                                        hidden = true;
-                                    }
-                                }
-                            }
+                        let distance = Math.hypot(movePoint.x - point.x, movePoint.y - point.y);
+                        if (maxTooltipDistanceBy == "x") {
+                            distance = Math.abs(movePoint.x - point.x);
                         }
-                        else if (maxTooltipDistance == -1) {
-                            if (series != closest) {
-                                hidden = true;
-                            }
+                        else if (maxTooltipDistanceBy == "y") {
+                            distance = Math.abs(movePoint.y - point.y);
                         }
-                        if (!_this.inPlot(_this._tooltipToLocal(point)) || !tooltip.dataItem) {
-                            hidden = true;
+                        if (distance < minDistance) {
+                            minDistance = distance;
+                            closest = series;
+                            closestPoint = point;
                         }
-                        else {
-                            if (!hidden) {
-                                sum += point.y;
+                    }
+                }
+            });
+        }
+        const tooltipSeries = [];
+        this.series.each((series) => {
+            const tooltip = series.get("tooltip");
+            if (tooltip) {
+                let hidden = false;
+                let point = tooltip.get("pointTo");
+                if (point) {
+                    if (maxTooltipDistance >= 0) {
+                        let point = tooltip.get("pointTo");
+                        if (point) {
+                            if (series != closest) {
+                                let distance = Math.hypot(closestPoint.x - point.x, closestPoint.y - point.y);
+                                if (maxTooltipDistanceBy == "x") {
+                                    distance = Math.abs(closestPoint.x - point.x);
+                                }
+                                else if (maxTooltipDistanceBy == "y") {
+                                    distance = Math.abs(closestPoint.y - point.y);
+                                }
+                                if (distance > maxTooltipDistance) {
+                                    hidden = true;
+                                }
                             }
                         }
-                        if (hidden || series.isHidden() || series.isHiding()) {
-                            tooltip.hide(0);
+                    }
+                    else if (maxTooltipDistance == -1) {
+                        if (series != closest) {
+                            hidden = true;
                         }
-                        else {
-                            tooltip.show();
-                            tooltips.push(tooltip);
-                            tooltipSeries.push(series);
+                    }
+                    if (!this.inPlot(this._tooltipToLocal(point)) || !tooltip.dataItem) {
+                        hidden = true;
+                    }
+                    else {
+                        if (!hidden) {
+                            sum += point.y;
                         }
                     }
+                    if (hidden || series.isHidden() || series.isHiding()) {
+                        tooltip.hide(0);
+                    }
+                    else {
+                        tooltip.show();
+                        tooltips.push(tooltip);
+                        tooltipSeries.push(series);
+                    }
                 }
-            });
-            this.setPrivate("tooltipSeries", tooltipSeries);
-            if (this.get("arrangeTooltips")) {
-                var tooltipContainer_1 = this._root.tooltipContainer;
-                var count = tooltips.length;
-                var average = sum / count;
-                if (average > h / 2 + plotT.y) {
-                    tooltips.sort(function (a, b) { return $order.compareNumber(b.get("pointTo").y, a.get("pointTo").y); });
-                    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 });
-                        tooltip.setPrivate("customData", { left: plotT.x, top: plotT.y, right: plotB.x, bottom: prevY_1 });
-                        prevY_1 = Math.min(prevY_1 - height, tooltip._fy - height);
-                        if (tooltip.parent == tooltipContainer_1) {
-                            tooltipContainer_1.children.moveValue(tooltip, 0);
+            }
+        });
+        this.setPrivate("tooltipSeries", tooltipSeries);
+        if (this.get("arrangeTooltips")) {
+            const tooltipContainer = this._root.tooltipContainer;
+            const count = tooltips.length;
+            const average = sum / count;
+            if (average > h / 2 + plotT.y) {
+                tooltips.sort((a, b) => $order.compareNumber(b.get("pointTo").y, a.get("pointTo").y));
+                let prevY = plotB.y;
+                $array.each(tooltips, (tooltip) => {
+                    let height = tooltip.height();
+                    let 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 });
+                    tooltip.setPrivate("customData", { left: plotT.x, top: plotT.y, right: plotB.x, bottom: prevY });
+                    prevY = Math.min(prevY - height, tooltip._fy - height);
+                    if (tooltip.parent == tooltipContainer) {
+                        tooltipContainer.children.moveValue(tooltip, 0);
+                    }
+                });
+                if (prevY < 0) {
+                    tooltips.reverse();
+                    let prevBottom = prevY;
+                    $array.each(tooltips, (tooltip) => {
+                        let bounds = tooltip.get("bounds");
+                        if (bounds) {
+                            let top = bounds.top - prevY;
+                            let bottom = bounds.bottom - prevY;
+                            if (top < prevBottom) {
+                                top = prevBottom;
+                                bottom = top + tooltip.height();
+                            }
+                            tooltip.set("bounds", { left: bounds.left, top: top, right: bounds.right, bottom: bottom });
+                            prevBottom = bounds.bottom - prevY + tooltip.get("marginBottom", 0);
                         }
                     });
-                    if (prevY_1 < 0) {
-                        tooltips.reverse();
-                        var prevBottom_1 = prevY_1;
-                        $array.each(tooltips, function (tooltip) {
-                            var bounds = tooltip.get("bounds");
-                            if (bounds) {
-                                var top_1 = bounds.top - prevY_1;
-                                var bottom = bounds.bottom - prevY_1;
-                                if (top_1 < prevBottom_1) {
-                                    top_1 = prevBottom_1;
-                                    bottom = top_1 + tooltip.height();
-                                }
-                                tooltip.set("bounds", { left: bounds.left, top: top_1, right: bounds.right, bottom: bottom });
-                                prevBottom_1 = bounds.bottom - prevY_1 + tooltip.get("marginBottom", 0);
-                            }
-                        });
-                    }
                 }
-                else {
+            }
+            else {
+                tooltips.reverse();
+                tooltips.sort((a, b) => $order.compareNumber(a.get("pointTo").y, b.get("pointTo").y));
+                let prevY = 0;
+                $array.each(tooltips, (tooltip) => {
+                    let height = tooltip.height();
+                    let centerY = tooltip.get("centerY");
+                    if (centerY instanceof Percent) {
+                        height *= centerY.value;
+                    }
+                    height += tooltip.get("marginBottom", 0);
+                    tooltip.set("bounds", { left: plotT.x, top: prevY, right: plotB.x, bottom: Math.max(plotT.y + hh, prevY + height) });
+                    if (tooltip.parent == tooltipContainer) {
+                        tooltipContainer.children.moveValue(tooltip, 0);
+                    }
+                    prevY = Math.max(prevY + height, tooltip._fy + height);
+                });
+                if (prevY > hh) {
                     tooltips.reverse();
-                    tooltips.sort(function (a, b) { return $order.compareNumber(a.get("pointTo").y, b.get("pointTo").y); });
-                    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 + hh, prevY_2 + height) });
-                        if (tooltip.parent == tooltipContainer_1) {
-                            tooltipContainer_1.children.moveValue(tooltip, 0);
+                    let prevBottom = hh;
+                    $array.each(tooltips, (tooltip) => {
+                        let bounds = tooltip.get("bounds");
+                        if (bounds) {
+                            let top = bounds.top - (hh - prevY);
+                            let bottom = bounds.bottom - (hh - prevY);
+                            if (bottom > prevBottom) {
+                                bottom = prevBottom;
+                                top = bottom - tooltip.height();
+                            }
+                            tooltip.set("bounds", { left: bounds.left, top: top, right: bounds.right, bottom: bottom });
+                            prevBottom = bottom - tooltip.height() - tooltip.get("marginBottom", 0);
                         }
-                        prevY_2 = Math.max(prevY_2 + height, tooltip._fy + height);
                     });
-                    if (prevY_2 > hh) {
-                        tooltips.reverse();
-                        var prevBottom_2 = hh;
-                        $array.each(tooltips, function (tooltip) {
-                            var bounds = tooltip.get("bounds");
-                            if (bounds) {
-                                var top_2 = bounds.top - (hh - prevY_2);
-                                var bottom = bounds.bottom - (hh - prevY_2);
-                                if (bottom > prevBottom_2) {
-                                    bottom = prevBottom_2;
-                                    top_2 = bottom - tooltip.height();
-                                }
-                                tooltip.set("bounds", { left: bounds.left, top: top_2, right: bounds.right, bottom: bottom });
-                                prevBottom_2 = bottom - tooltip.height() - tooltip.get("marginBottom", 0);
-                            }
-                        });
-                    }
                 }
             }
         }
-    });
-    Object.defineProperty(XYChart.prototype, "_tooltipToLocal", {
-        enumerable: false,
-        configurable: true,
-        writable: true,
-        value: function (point) {
-            return this.plotContainer.toLocal(point);
-        }
-    });
+    }
+    _tooltipToLocal(point) {
+        return this.plotContainer.toLocal(point);
+    }
     /**
      * Fully zooms out the chart.
      */
-    Object.defineProperty(XYChart.prototype, "zoomOut", {
-        enumerable: false,
-        configurable: true,
-        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);
-            });
-        }
-    });
-    Object.defineProperty(XYChart, "className", {
-        enumerable: true,
-        configurable: true,
-        writable: true,
-        value: "XYChart"
-    });
-    Object.defineProperty(XYChart, "classNames", {
-        enumerable: true,
-        configurable: true,
-        writable: true,
-        value: SerialChart.classNames.concat([XYChart.className])
-    });
-    return XYChart;
-}(SerialChart));
-export { XYChart };
+    zoomOut() {
+        this.xAxes.each((axis) => {
+            axis.setPrivate("updateScrollbar", true);
+            axis.zoom(0, 1);
+        });
+        this.yAxes.each((axis) => {
+            axis.setPrivate("updateScrollbar", true);
+            axis.zoom(0, 1);
+        });
+    }
+}
+Object.defineProperty(XYChart, "className", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: "XYChart"
+});
+Object.defineProperty(XYChart, "classNames", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: SerialChart.classNames.concat([XYChart.className])
+});
 //# sourceMappingURL=XYChart.js.map