@devexperts/dxcharts-lite 2.5.5 → 2.5.7

package/dist/chart/bootstrap.js

@@ -130,7 +130,7 @@ export default class ChartBootstrap {
         const hitTestComponent = new HitTestComponent(hitTestCanvasModel, canvasAnimation, eventBus);
         this.hitTestComponent = hitTestComponent;
         this.chartComponents.push(hitTestComponent);
-        const paneManager = new PaneManager(chartBaseModel, this.dynamicObjectsCanvasModel, this.userInputListenerComponents, eventBus, scaleModel, canvasBoundsContainer, config, canvasAnimation, canvasInputListener, drawingManager, this.cursorHandler, this.crossEventProducer, chartPanComponent, mainCanvasModel, yAxisLabelsCanvasModel, this.hitTestCanvasModel);
+        const paneManager = new PaneManager(chartBaseModel, this.dynamicObjectsCanvasModel, this.userInputListenerComponents, eventBus, scaleModel, canvasBoundsContainer, config, canvasAnimation, canvasInputListener, drawingManager, this.cursorHandler, this.crossEventProducer, chartPanComponent, mainCanvasModel, yAxisLabelsCanvasModel, this.hitTestCanvasModel, this.chartResizeHandler);
         this.paneManager = paneManager;
         const mainPane = this.paneManager.panes[CHART_UUID];
         this.mainPane = mainPane;

package/dist/chart/canvas/canvas-bounds-container.d.ts

@@ -328,6 +328,27 @@ export declare class CanvasBoundsContainer {
      * @deprecated This method should be removed as candleSeries is not a part of CanvasBoundsContainer.
      */
     setMainCandleSeries(candleSeries: CandleSeriesModel): void;
+    /**
+     * Returns the effective width of the Y axis.
+     *
+     * @function
+     * @name getEffectiveYAxisWidth
+     * @returns {number} The effective width of the Y axis.
+     */
+    getEffectiveYAxisWidth(): number;
+    /**
+     * Returns the effective width of the chart.
+     *
+     * @function
+     * @returns {number} The effective width of the chart.
+     */
+    getEffectiveChartWidth(): number;
+    /**
+     * Returns the effective height of the chart.
+     *
+     * @returns {number} The effective height of the chart.
+     */
+    getEffectiveChartHeight(): number;
 }
 export declare const getHeightRatios: (pecLength: number) => [number, number];
 export declare const isInBounds: (point: Point, bounds: Bounds) => boolean;

package/dist/chart/canvas/canvas-bounds-container.js

@@ -83,7 +83,7 @@ export class CanvasBoundsContainer {
         this.rightRatio = 0;
         this.boundsChangedSubject = new Subject();
         this.barResizerChangedSubject = new Subject();
-        this._graphsHeightRatio = { chart: 1 };
+        this._graphsHeightRatio = { [CHART_UUID]: 1 };
         this.graphsHeightRatioChangedSubject = new Subject();
         this.boundsChangedSubscriptions = {};
         chartResizeHandler.canvasResized.subscribe(bcr => {
@@ -824,6 +824,36 @@ export class CanvasBoundsContainer {
     setMainCandleSeries(candleSeries) {
         this.mainCandleSeries = candleSeries;
     }
+    /**
+     * Returns the effective width of the Y axis.
+     *
+     * @function
+     * @name getEffectiveYAxisWidth
+     * @returns {number} The effective width of the Y axis.
+     */
+    getEffectiveYAxisWidth() {
+        const yAxis = this.getBounds(CanvasElement.PANE_UUID_Y_AXIS(CHART_UUID));
+        return yAxis.width;
+    }
+    /**
+     * Returns the effective width of the chart.
+     *
+     * @function
+     * @returns {number} The effective width of the chart.
+     */
+    getEffectiveChartWidth() {
+        const chart = this.getBounds(CanvasElement.PANE_UUID(CHART_UUID));
+        return chart.width;
+    }
+    /**
+     * Returns the effective height of the chart.
+     *
+     * @returns {number} The effective height of the chart.
+     */
+    getEffectiveChartHeight() {
+        const chart = this.getBounds(CanvasElement.PANE_UUID(CHART_UUID));
+        return chart.height;
+    }
 }
 // paneCounter=chartHeightRatio: 0=1, 1=0.8, 2=0.6, 3=0.5, 4=0.4, 5=0.4
 const DEFAULT_RATIOS = {

package/dist/chart/chart.js

@@ -100,7 +100,8 @@ export class Chart extends ChartBootstrap {
         this.bus.fireDraw();
     }
     setChartType(type) {
-        this.chartComponent.setChartType(type);
+        this.data.setChartType(type);
+        this.yAxis.updateOrderedLabels();
     }
     createPane() {
         return this.paneManager.createPane();

package/dist/chart/components/chart/basic-scale.js

@@ -15,7 +15,6 @@ export const createBasicScaleViewportTransformer = (scale) => (visualCandleSourc
         const endCandle = vCandles[vCandles.length - 1];
         scale.setXScale(startCandle.startUnit, endCandle.startUnit + endCandle.width + scale.offsets.right);
         scale.doAutoScale(true);
-        scale.recalculateZoomXYRatio();
         scale.fireChanged();
     }
 };

package/dist/chart/components/chart/chart.model.d.ts

@@ -173,27 +173,6 @@ export declare class ChartModel extends ChartBaseElement {
      * @returns {void}
      */
     setAutoScale(auto: boolean): void;
-    /**
-     * Returns the effective width of the Y axis.
-     *
-     * @function
-     * @name getEffectiveYAxisWidth
-     * @returns {number} The effective width of the Y axis.
-     */
-    getEffectiveYAxisWidth(): number;
-    /**
-     * Returns the effective width of the chart.
-     *
-     * @function
-     * @returns {number} The effective width of the chart.
-     */
-    getEffectiveChartWidth(): number;
-    /**
-     * Returns the effective height of the chart.
-     *
-     * @returns {number} The effective height of the chart.
-     */
-    getEffectiveChartHeight(): number;
     /**
      * Updates the offsets of the chart components and redraws the chart.
      * @param {Partial<ChartConfigComponentsOffsets>} offsets - The new offsets to be applied to the chart components.

package/dist/chart/components/chart/chart.model.js

@@ -103,8 +103,8 @@ export class ChartModel extends ChartBaseElement {
      */
     handleChartResize(nextCB) {
         if (nextCB.width > MIN_SUPPORTED_CANVAS_SIZE.width && nextCB.height > MIN_SUPPORTED_CANVAS_SIZE.height) {
-            const nextChartWidth = this.getEffectiveChartWidth();
-            const nextYAxisWidth = this.getEffectiveYAxisWidth();
+            const nextChartWidth = this.canvasBoundsContainer.getEffectiveChartWidth();
+            const nextYAxisWidth = this.canvasBoundsContainer.getEffectiveYAxisWidth();
             if (this.prevChartWidth === 0) {
                 this.scale.isViewportValid() ? this.scale.recalculateZoom() : this.doBasicScale();
                 this.prevChartWidth = nextChartWidth;
@@ -420,36 +420,6 @@ export class ChartModel extends ChartBaseElement {
     setAutoScale(auto) {
         this.scale.autoScale(auto);
     }
-    /**
-     * Returns the effective width of the Y axis.
-     *
-     * @function
-     * @name getEffectiveYAxisWidth
-     * @returns {number} The effective width of the Y axis.
-     */
-    getEffectiveYAxisWidth() {
-        const yAxis = this.canvasBoundsContainer.getBounds(CanvasElement.PANE_UUID_Y_AXIS(CHART_UUID));
-        return yAxis.width;
-    }
-    /**
-     * Returns the effective width of the chart.
-     *
-     * @function
-     * @returns {number} The effective width of the chart.
-     */
-    getEffectiveChartWidth() {
-        const chart = this.canvasBoundsContainer.getBounds(CanvasElement.PANE_UUID(CHART_UUID));
-        return chart.width;
-    }
-    /**
-     * Returns the effective height of the chart.
-     *
-     * @returns {number} The effective height of the chart.
-     */
-    getEffectiveChartHeight() {
-        const chart = this.canvasBoundsContainer.getBounds(CanvasElement.PANE_UUID(CHART_UUID));
-        return chart.height;
-    }
     /**
      * Updates the offsets of the chart components and redraws the chart.
      * @param {Partial<ChartConfigComponentsOffsets>} offsets - The new offsets to be applied to the chart components.
@@ -682,7 +652,7 @@ export class ChartModel extends ChartBaseElement {
      * @returns {number} - The maximum number of candles that can fit in the chart width
      */
     getMaxCandlesFitLength() {
-        return floor(this.getEffectiveChartWidth() / this.config.components.chart.minWidth);
+        return floor(this.canvasBoundsContainer.getEffectiveChartWidth() / this.config.components.chart.minWidth);
     }
     /**
      * Returns an array of CandleSeriesModel objects representing the secondary candle series.

package/dist/chart/components/pan/chart-pan.component.js

@@ -3,6 +3,7 @@
  * This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
+import { CanvasElement } from '../../canvas/canvas-bounds-container';
 import { ChartBaseElement } from '../../model/chart-base-element';
 import { ChartAreaPanHandler } from '../chart/chart-area-pan.handler';
 import { MainCanvasTouchHandler } from '../../inputhandlers/main-canvas-touch.handler';
@@ -20,7 +21,7 @@ export class ChartPanComponent extends ChartBaseElement {
         this.hitTestCanvasModel = hitTestCanvasModel;
         this.chartAreaPanHandler = new ChartAreaPanHandler(this.eventBus, this.config, this.mainScale, this.canvasInputListener, this.canvasBoundsContainer, this.canvasAnimation, this, this.hitTestCanvasModel);
         this.addChildEntity(this.chartAreaPanHandler);
-        this.mainCanvasTouchHandler = new MainCanvasTouchHandler(this.chartAreaPanHandler, this.mainScale, this.canvasInputListener, this.mainCanvasParent);
+        this.mainCanvasTouchHandler = new MainCanvasTouchHandler(this.chartAreaPanHandler, this.mainScale, this.canvasInputListener, this.mainCanvasParent, this.canvasBoundsContainer.getBoundsHitTest(CanvasElement.ALL_PANES));
         this.addChildEntity(this.mainCanvasTouchHandler);
     }
     /**

package/dist/chart/components/pane/pane-manager.component.d.ts

@@ -23,6 +23,7 @@ import { PaneHitTestController } from './pane-hit-test.controller';
 import { PaneComponent } from './pane.component';
 import { DataSeriesModel } from '../../model/data-series.model';
 import { HitTestCanvasModel } from '../../model/hit-test-canvas.model';
+import { ChartResizeHandler } from '../../inputhandlers/chart-resize.handler';
 export declare class PaneManager extends ChartBaseElement {
     private chartBaseModel;
     private dynamicObjectsCanvasModel;
@@ -40,6 +41,7 @@ export declare class PaneManager extends ChartBaseElement {
     private mainCanvasModel;
     private yAxisLabelsCanvasModel;
     private hitTestCanvasModel;
+    private chartResizeHandler;
     panes: Record<string, PaneComponent>;
     paneRemovedSubject: Subject<PaneComponent>;
     paneAddedSubject: Subject<Record<string, PaneComponent>>;
@@ -50,7 +52,7 @@ export declare class PaneManager extends ChartBaseElement {
      * Returns order of panes in the chart from top to bottom.
      */
     get panesOrder(): string[];
-    constructor(chartBaseModel: ChartBaseModel<'candle'>, dynamicObjectsCanvasModel: CanvasModel, userInputListenerComponents: ChartEntity[], eventBus: EventBus, mainScale: ScaleModel, canvasBoundsContainer: CanvasBoundsContainer, config: FullChartConfig, canvasAnimation: CanvasAnimation, canvasInputListener: CanvasInputListenerComponent, drawingManager: DrawingManager, cursorHandler: CursorHandler, crossEventProducer: CrossEventProducerComponent, chartPanComponent: ChartPanComponent, mainCanvasModel: CanvasModel, yAxisLabelsCanvasModel: CanvasModel, hitTestCanvasModel: HitTestCanvasModel);
+    constructor(chartBaseModel: ChartBaseModel<'candle'>, dynamicObjectsCanvasModel: CanvasModel, userInputListenerComponents: ChartEntity[], eventBus: EventBus, mainScale: ScaleModel, canvasBoundsContainer: CanvasBoundsContainer, config: FullChartConfig, canvasAnimation: CanvasAnimation, canvasInputListener: CanvasInputListenerComponent, drawingManager: DrawingManager, cursorHandler: CursorHandler, crossEventProducer: CrossEventProducerComponent, chartPanComponent: ChartPanComponent, mainCanvasModel: CanvasModel, yAxisLabelsCanvasModel: CanvasModel, hitTestCanvasModel: HitTestCanvasModel, chartResizeHandler: ChartResizeHandler);
     private addBounds;
     /**
      * Adds a resizer to the canvas bounds container for the given uuid.

package/dist/chart/components/pane/pane-manager.component.js

@@ -20,7 +20,7 @@ export class PaneManager extends ChartBaseElement {
     get panesOrder() {
         return this.canvasBoundsContainer.panesOrder;
     }
-    constructor(chartBaseModel, dynamicObjectsCanvasModel, userInputListenerComponents, eventBus, mainScale, canvasBoundsContainer, config, canvasAnimation, canvasInputListener, drawingManager, cursorHandler, crossEventProducer, chartPanComponent, mainCanvasModel, yAxisLabelsCanvasModel, hitTestCanvasModel) {
+    constructor(chartBaseModel, dynamicObjectsCanvasModel, userInputListenerComponents, eventBus, mainScale, canvasBoundsContainer, config, canvasAnimation, canvasInputListener, drawingManager, cursorHandler, crossEventProducer, chartPanComponent, mainCanvasModel, yAxisLabelsCanvasModel, hitTestCanvasModel, chartResizeHandler) {
         super();
         this.chartBaseModel = chartBaseModel;
         this.dynamicObjectsCanvasModel = dynamicObjectsCanvasModel;
@@ -38,6 +38,7 @@ export class PaneManager extends ChartBaseElement {
         this.mainCanvasModel = mainCanvasModel;
         this.yAxisLabelsCanvasModel = yAxisLabelsCanvasModel;
         this.hitTestCanvasModel = hitTestCanvasModel;
+        this.chartResizeHandler = chartResizeHandler;
         this.panes = {};
         this.paneRemovedSubject = new Subject();
         this.paneAddedSubject = new Subject();
@@ -95,7 +96,7 @@ export class PaneManager extends ChartBaseElement {
         if (this.panes[uuid] !== undefined) {
             return this.panes[uuid];
         }
-        const paneComponent = new PaneComponent(this.chartBaseModel, this.mainCanvasModel, this.yAxisLabelsCanvasModel, this.dynamicObjectsCanvasModel, this.hitTestController, this.config, this.mainScale, this.drawingManager, this.chartPanComponent, this.canvasInputListener, this.canvasAnimation, this.cursorHandler, this.eventBus, this.canvasBoundsContainer, uuid, this.dataSeriesAddedSubject, this.dataSeriesRemovedSubject, this.hitTestCanvasModel, options);
+        const paneComponent = new PaneComponent(this.chartBaseModel, this.mainCanvasModel, this.yAxisLabelsCanvasModel, this.dynamicObjectsCanvasModel, this.hitTestController, this.config, this.mainScale, this.drawingManager, this.chartPanComponent, this.canvasInputListener, this.canvasAnimation, this.cursorHandler, this.eventBus, this.canvasBoundsContainer, uuid, this.dataSeriesAddedSubject, this.dataSeriesRemovedSubject, this.hitTestCanvasModel, this.chartResizeHandler, options);
         // TODO: is resizer should be added always?
         if (this.config.components.paneResizer.visible) {
             paneComponent.addChildEntity(this.addResizer(uuid));

package/dist/chart/components/pane/pane.component.d.ts

@@ -25,6 +25,7 @@ import { YAxisComponent } from '../y_axis/y-axis.component';
 import { YExtentComponent, YExtentCreationOptions } from './extent/y-extent-component';
 import { PaneHitTestController } from './pane-hit-test.controller';
 import { HitTestCanvasModel } from '../../model/hit-test-canvas.model';
+import { ChartResizeHandler } from '../../inputhandlers/chart-resize.handler';
 export declare class PaneComponent extends ChartBaseElement {
     chartBaseModel: ChartBaseModel<'candle'>;
     private mainCanvasModel;
@@ -44,6 +45,7 @@ export declare class PaneComponent extends ChartBaseElement {
     seriesAddedSubject: Subject<DataSeriesModel>;
     seriesRemovedSubject: Subject<DataSeriesModel>;
     private hitTestCanvasModel;
+    private chartResizeHandler;
     /**
      * Pane hit test (without Y-Axis and resizer)
      */
@@ -54,7 +56,7 @@ export declare class PaneComponent extends ChartBaseElement {
     get dataSeries(): DataSeriesModel<import("../../model/data-series.model").DataSeriesPoint, import("../../model/data-series.model").VisualSeriesPoint>[];
     get visible(): boolean;
     mainExtent: YExtentComponent;
-    constructor(chartBaseModel: ChartBaseModel<'candle'>, mainCanvasModel: CanvasModel, yAxisLabelsCanvasModel: CanvasModel, dynamicObjectsCanvasModel: CanvasModel, hitTestController: PaneHitTestController, config: FullChartConfig, mainScale: ScaleModel, drawingManager: DrawingManager, chartPanComponent: ChartPanComponent, canvasInputListener: CanvasInputListenerComponent, canvasAnimation: CanvasAnimation, cursorHandler: CursorHandler, eventBus: EventBus, canvasBoundsContainer: CanvasBoundsContainer, uuid: string, seriesAddedSubject: Subject<DataSeriesModel>, seriesRemovedSubject: Subject<DataSeriesModel>, hitTestCanvasModel: HitTestCanvasModel, options?: AtLeastOne<YExtentCreationOptions>);
+    constructor(chartBaseModel: ChartBaseModel<'candle'>, mainCanvasModel: CanvasModel, yAxisLabelsCanvasModel: CanvasModel, dynamicObjectsCanvasModel: CanvasModel, hitTestController: PaneHitTestController, config: FullChartConfig, mainScale: ScaleModel, drawingManager: DrawingManager, chartPanComponent: ChartPanComponent, canvasInputListener: CanvasInputListenerComponent, canvasAnimation: CanvasAnimation, cursorHandler: CursorHandler, eventBus: EventBus, canvasBoundsContainer: CanvasBoundsContainer, uuid: string, seriesAddedSubject: Subject<DataSeriesModel>, seriesRemovedSubject: Subject<DataSeriesModel>, hitTestCanvasModel: HitTestCanvasModel, chartResizeHandler: ChartResizeHandler, options?: AtLeastOne<YExtentCreationOptions>);
     /**
      * Method that activates the canvas bounds container and recalculates the zoom Y of the scale model.
      * @protected

package/dist/chart/components/pane/pane.component.js

@@ -25,7 +25,7 @@ export class PaneComponent extends ChartBaseElement {
     get visible() {
         return this.canvasBoundsContainer.graphsHeightRatio[this.uuid] > 0;
     }
-    constructor(chartBaseModel, mainCanvasModel, yAxisLabelsCanvasModel, dynamicObjectsCanvasModel, hitTestController, config, mainScale, drawingManager, chartPanComponent, canvasInputListener, canvasAnimation, cursorHandler, eventBus, canvasBoundsContainer, uuid, seriesAddedSubject, seriesRemovedSubject, hitTestCanvasModel, options) {
+    constructor(chartBaseModel, mainCanvasModel, yAxisLabelsCanvasModel, dynamicObjectsCanvasModel, hitTestController, config, mainScale, drawingManager, chartPanComponent, canvasInputListener, canvasAnimation, cursorHandler, eventBus, canvasBoundsContainer, uuid, seriesAddedSubject, seriesRemovedSubject, hitTestCanvasModel, chartResizeHandler, options) {
         super();
         this.chartBaseModel = chartBaseModel;
         this.mainCanvasModel = mainCanvasModel;
@@ -45,6 +45,7 @@ export class PaneComponent extends ChartBaseElement {
         this.seriesAddedSubject = seriesAddedSubject;
         this.seriesRemovedSubject = seriesRemovedSubject;
         this.hitTestCanvasModel = hitTestCanvasModel;
+        this.chartResizeHandler = chartResizeHandler;
         this.yExtentComponents = [];
         this.getYAxisBounds = () => {
             return this.canvasBoundsContainer.getBounds(CanvasElement.PANE_UUID_Y_AXIS(this.uuid));
@@ -125,7 +126,7 @@ export class PaneComponent extends ChartBaseElement {
         const [unsub, dragNDrop] = this.createYPanHandler(this.uuid, scaleModel);
         // creating partially resolved constructor except formatter & dataSeriesProvider - bcs it's not possible to provide formatter
         // before y-extent is created
-        const createYAxisComponent = (formatter, dataSeriesProvider) => new YAxisComponent(this.eventBus, this.config, this.yAxisLabelsCanvasModel, scaleModel, this.canvasInputListener, this.canvasBoundsContainer, this.chartPanComponent, this.cursorHandler, formatter, dataSeriesProvider, this.uuid, extentIdx, this.hitTestCanvasModel, initialYAxisState);
+        const createYAxisComponent = (formatter, dataSeriesProvider) => new YAxisComponent(this.eventBus, this.config, this.yAxisLabelsCanvasModel, scaleModel, this.canvasInputListener, this.canvasBoundsContainer, this.chartPanComponent, this.cursorHandler, formatter, dataSeriesProvider, this.uuid, extentIdx, this.hitTestCanvasModel, this.chartResizeHandler, initialYAxisState);
         const yExtentComponent = new YExtentComponent(this.uuid, extentIdx, this, this.chartBaseModel, this.canvasBoundsContainer, this.hitTestController, this.dynamicObjectsCanvasModel, scaleModel, createYAxisComponent, dragNDrop);
         yExtentComponent.addSubscription(unsub);
         yExtentComponent.addSubscription(this.addCursors(extentIdx, yExtentComponent.yAxis));

package/dist/chart/components/x_axis/x-axis-scale.handler.d.ts

@@ -4,7 +4,7 @@
  * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 import { ChartBaseElement } from '../../model/chart-base-element';
-import { CanvasBoundsContainer } from '../../canvas/canvas-bounds-container';
+import { CanvasBoundsContainer, HitBoundsTest } from '../../canvas/canvas-bounds-container';
 import { CanvasInputListenerComponent } from '../../inputlisteners/canvas-input-listener.component';
 import { ScaleModel } from '../../model/scale.model';
 import { Pixel, Unit } from '../../model/scaling/viewport.model';
@@ -21,13 +21,15 @@ export declare class XAxisScaleHandler extends ChartBaseElement {
     private canvasBoundsContainer;
     private chartPanComponent;
     private chartModel;
+    private hitTest;
     private hitTestCanvasModel;
     lastXStart: Unit;
     lastXWidth: Unit;
     lastXPxWidth: Pixel;
     private dblClickCallback;
+    private touches;
     private dblTapCallback;
-    constructor(scale: ScaleModel, canvasInputListener: CanvasInputListenerComponent, canvasBoundsContainer: CanvasBoundsContainer, chartPanComponent: ChartPanComponent, chartModel: ChartModel, hitTestCanvasModel: HitTestCanvasModel);
+    constructor(scale: ScaleModel, canvasInputListener: CanvasInputListenerComponent, canvasBoundsContainer: CanvasBoundsContainer, chartPanComponent: ChartPanComponent, chartModel: ChartModel, hitTest: HitBoundsTest, hitTestCanvasModel: HitTestCanvasModel);
     /**
      * This method is used to activate the canvas input listener and add a subscription to it.
      * It calls the parent class's doActivate method and then subscribes to the canvasInputListener's observeDbClick method.

package/dist/chart/components/x_axis/x-axis-scale.handler.js

@@ -11,13 +11,14 @@ import { DragNDropXComponent } from '../dran-n-drop_helper/drag-n-drop-x.compone
  * @doc-tags scaling,zoom,viewport
  */
 export class XAxisScaleHandler extends ChartBaseElement {
-    constructor(scale, canvasInputListener, canvasBoundsContainer, chartPanComponent, chartModel, hitTestCanvasModel) {
+    constructor(scale, canvasInputListener, canvasBoundsContainer, chartPanComponent, chartModel, hitTest, hitTestCanvasModel) {
         super();
         this.scale = scale;
         this.canvasInputListener = canvasInputListener;
         this.canvasBoundsContainer = canvasBoundsContainer;
         this.chartPanComponent = chartPanComponent;
         this.chartModel = chartModel;
+        this.hitTest = hitTest;
         this.hitTestCanvasModel = hitTestCanvasModel;
         this.lastXStart = 0;
         this.lastXWidth = 0;
@@ -50,7 +51,7 @@ export class XAxisScaleHandler extends ChartBaseElement {
         this.setDblClickCallback = (cb) => this.dblClickCallback = cb;
         this.dblClickCallback = () => chartModel.doBasicScale();
         this.dblTapCallback = () => chartModel.doBasicScale();
-        const dragNDropXComponent = new DragNDropXComponent(this.canvasBoundsContainer.getBoundsHitTest(CanvasElement.X_AXIS), {
+        const dragNDropXComponent = new DragNDropXComponent(hitTest, {
             onDragStart: this.onXDragStart,
             onDragTick: this.onXDragTick,
             onDragEnd: this.onXDragEnd,
@@ -69,12 +70,19 @@ export class XAxisScaleHandler extends ChartBaseElement {
      */
     doActivate() {
         super.doActivate();
-        this.addRxSubscription(this.canvasInputListener
-            .observeDbClick(this.canvasBoundsContainer.getBoundsHitTest(CanvasElement.X_AXIS))
-            .subscribe(() => this.dblClickCallback()));
-        this.addRxSubscription(this.canvasInputListener
-            .observeDbTap(this.canvasBoundsContainer.getBoundsHitTest(CanvasElement.X_AXIS))
-            .subscribe(() => this.dblTapCallback()));
+        this.addRxSubscription(this.canvasInputListener.observeDbClick(this.hitTest).subscribe(() => this.dblClickCallback()));
+        this.addRxSubscription(this.canvasInputListener.observeDbTap(this.hitTest).subscribe(() => {
+            var _a;
+            // apply dbl tap only if single finger taps are made
+            if (this.touches && ((_a = this.touches) === null || _a === void 0 ? void 0 : _a.length) > 1) {
+                this.touches = undefined;
+                return;
+            }
+            this.dblTapCallback();
+        }));
+        this.addRxSubscription(this.canvasInputListener.observeTouchStart(this.hitTest).subscribe(e => {
+            this.touches = e.touches;
+        }));
         this.addRxSubscription(this.chartModel.candlesPrependSubject.subscribe(({ prependedCandlesWidth }) => (this.lastXStart += prependedCandlesWidth)));
     }
 }

package/dist/chart/components/x_axis/x-axis.component.js

@@ -50,7 +50,7 @@ export class XAxisComponent extends ChartBaseElement {
         xAxisCompositeDrawer.addDrawer(this.xAxisDrawer);
         this.xAxisLabelsDrawer = new XAxisLabelsDrawer(config, canvasModel, canvasBoundsContainer, this.xAxisLabelsModel);
         xAxisCompositeDrawer.addDrawer(this.xAxisLabelsDrawer);
-        this.xAxisScaleHandler = new XAxisScaleHandler(scale, canvasInputListener, canvasBoundsContainer, chartPanComponent, this.chartComponent.chartModel, hitTestCanvasModel);
+        this.xAxisScaleHandler = new XAxisScaleHandler(scale, canvasInputListener, canvasBoundsContainer, chartPanComponent, this.chartComponent.chartModel, canvasBoundsContainer.getBoundsHitTest(CanvasElement.X_AXIS), hitTestCanvasModel);
         this.addChildEntity(this.xAxisScaleHandler);
         cursorHandler.setCursorForCanvasEl(CanvasElement.X_AXIS, config.components.xAxis.cursor);
     }

package/dist/chart/components/y_axis/price_labels/y-axis-labels.model.d.ts

@@ -13,6 +13,7 @@ import { ChartBaseElement } from '../../../model/chart-base-element';
 import { ScaleModel } from '../../../model/scale.model';
 import { Unit } from '../../../model/scaling/viewport.model';
 import { YAxisLabelDrawConfig } from '../y-axis-labels.drawer';
+import { ChartResizeHandler } from '../../../inputhandlers/chart-resize.handler';
 export type YAxisVisualLabelType = 'badge' | 'rectangle' | 'plain';
 export interface VisualYAxisLabel extends YAxisLabelDrawConfig {
     y: Unit;
@@ -53,6 +54,7 @@ export declare class FancyYAxisLabelsModel extends ChartBaseElement {
     private canvasModel;
     private paneUUID;
     private updateYAxisWidth;
+    private chartResizeHandler;
     orderedLabels: LabelGroup[];
     /**
      * an easier way to manage custom y-axis labels, than y-axis labels providers, but doesn't support overlapping avoidance
@@ -61,7 +63,7 @@ export declare class FancyYAxisLabelsModel extends ChartBaseElement {
     private labelsProviders;
     private labelsPositionRecalculatedSubject;
     private animFrameId;
-    constructor(eventBus: EventBus, scale: ScaleModel, canvasBoundsContainer: CanvasBoundsContainer, state: YAxisConfig, canvasModel: CanvasModel, paneUUID: string, updateYAxisWidth: () => void);
+    constructor(eventBus: EventBus, scale: ScaleModel, canvasBoundsContainer: CanvasBoundsContainer, state: YAxisConfig, canvasModel: CanvasModel, paneUUID: string, updateYAxisWidth: () => void, chartResizeHandler: ChartResizeHandler);
     /**
      * This method is used to activate the chart and subscribe to the observables that will trigger the update of the labels.
      * It calls the parent method doActivate() and adds a new Rx subscription to the merge of the following observables:

package/dist/chart/components/y_axis/price_labels/y-axis-labels.model.js

@@ -3,7 +3,8 @@
  * This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
-import { merge, Subject } from 'rxjs';
+import { animationFrameScheduler, merge, Subject } from 'rxjs';
+import { throttleTime } from 'rxjs/operators';
 import { CanvasElement } from '../../../canvas/canvas-bounds-container';
 import { ChartBaseElement } from '../../../model/chart-base-element';
 import { flat } from '../../../utils/array.utils';
@@ -26,7 +27,7 @@ export const LabelsGroups = {
  * Anything but the base labels which are generated in other component {@link YAxisBaseLabelsModel}
  */
 export class FancyYAxisLabelsModel extends ChartBaseElement {
-    constructor(eventBus, scale, canvasBoundsContainer, state, canvasModel, paneUUID, updateYAxisWidth) {
+    constructor(eventBus, scale, canvasBoundsContainer, state, canvasModel, paneUUID, updateYAxisWidth, chartResizeHandler) {
         super();
         this.eventBus = eventBus;
         this.scale = scale;
@@ -35,6 +36,7 @@ export class FancyYAxisLabelsModel extends ChartBaseElement {
         this.canvasModel = canvasModel;
         this.paneUUID = paneUUID;
         this.updateYAxisWidth = updateYAxisWidth;
+        this.chartResizeHandler = chartResizeHandler;
         this.orderedLabels = [];
         /**
          * an easier way to manage custom y-axis labels, than y-axis labels providers, but doesn't support overlapping avoidance
@@ -56,7 +58,7 @@ export class FancyYAxisLabelsModel extends ChartBaseElement {
      */
     doActivate() {
         super.doActivate();
-        this.addRxSubscription(merge(this.canvasBoundsContainer.observeBoundsChanged(CanvasElement.PANE_UUID(this.paneUUID)), this.canvasBoundsContainer.barResizerChangedSubject, this.scale.changed).subscribe(() => {
+        this.addRxSubscription(merge(this.canvasBoundsContainer.barResizerChangedSubject, this.scale.changed, merge(this.canvasBoundsContainer.observeBoundsChanged(CanvasElement.PANE_UUID(this.paneUUID)), this.chartResizeHandler.canvasResized).pipe(throttleTime(50, animationFrameScheduler, { trailing: true, leading: true }))).subscribe(() => {
             this.updateLabels();
         }));
     }

package/dist/chart/components/y_axis/y-axis-scale.handler.d.ts

@@ -31,6 +31,7 @@ export declare class YAxisScaleHandler extends ChartBaseElement {
     lastYHeight: Unit;
     lastYPxHeight: Pixel;
     private dblClickCallback;
+    private touches;
     private dblTapCallback;
     constructor(bus: EventBus, config: YAxisConfig, panning: ChartPanComponent, scale: ScaleModel, canvasInputListener: CanvasInputListenerComponent, bounds: CanvasBoundsContainer, hitTest: HitBoundsTest, hitTestCanvasModel: HitTestCanvasModel);
     protected doActivate(): void;

package/dist/chart/components/y_axis/y-axis-scale.handler.js

@@ -39,7 +39,15 @@ export class YAxisScaleHandler extends ChartBaseElement {
             this.hitTestCanvasModel.hitTestDrawersPredicateSubject.next(false);
         };
         this.onYDragTick = (dragInfo) => {
-            const { delta: absoluteYDelta } = dragInfo;
+            let { delta: absoluteYDelta } = dragInfo;
+            // check how many touch events are at the axis
+            // if multitouch - take the first two and apply delta the following way:
+            // the touch above keeps the initial delta because top => bottom gesture
+            // the touch below has the reversed delta because the gesture is bottom => top
+            if (this.touches && this.touches.length > 1) {
+                const top = Math.min(this.touches[0].clientY, this.touches[1].clientY);
+                absoluteYDelta = top === this.touches[0].clientY ? absoluteYDelta : -absoluteYDelta;
+            }
             // 1/3..3
             let zoomYMult;
             if (absoluteYDelta < 0) {
@@ -88,9 +96,18 @@ export class YAxisScaleHandler extends ChartBaseElement {
                 this.bus.fireDraw();
             }));
             this.addRxSubscription(this.canvasInputListener.observeDbTap(this.hitTest).subscribe(() => {
+                var _a;
+                // apply dbl tap only if single finger taps are made
+                if (this.touches && ((_a = this.touches) === null || _a === void 0 ? void 0 : _a.length) > 1) {
+                    this.touches = undefined;
+                    return;
+                }
                 this.dblTapCallback();
                 this.bus.fireDraw();
             }));
+            this.addRxSubscription(this.canvasInputListener.observeTouchStart(this.hitTest).subscribe(e => {
+                this.touches = e.touches;
+            }));
         }
     }
 }

package/dist/chart/components/y_axis/y-axis.component.d.ts

@@ -22,6 +22,7 @@ import { VisualYAxisLabel, YAxisLabelsProvider } from './price_labels/y-axis-lab
 import { YAxisScaleHandler } from './y-axis-scale.handler';
 import { YAxisModel } from './y-axis.model';
 import { HitTestCanvasModel } from '../../model/hit-test-canvas.model';
+import { ChartResizeHandler } from '../../inputhandlers/chart-resize.handler';
 export type LabelColorResolver = (priceMovement: PriceMovement, colors: FullChartColors) => string;
 /**
  * Y axis component. Contains all Y axis related logic.
@@ -35,12 +36,13 @@ export declare class YAxisComponent extends ChartBaseElement {
     private cursors;
     paneUUID: string;
     extentIdx: number;
+    private chartResizeHandler;
     private labelsColorByChartTypeMap;
     yAxisScaleHandler: YAxisScaleHandler;
     model: YAxisModel;
     axisTypeSetSubject: Subject<PriceAxisType>;
     readonly state: YAxisConfig;
-    constructor(eventBus: EventBus, config: FullChartConfig, canvasModel: CanvasModel, scale: ScaleModel, canvasInputListeners: CanvasInputListenerComponent, canvasBoundsContainer: CanvasBoundsContainer, chartPanComponent: ChartPanComponent, cursors: CursorHandler, valueFormatter: (value: number) => string, dataSeriesProvider: () => DataSeriesModel | undefined, paneUUID: string, extentIdx: number, hitTestCanvasModel: HitTestCanvasModel, initialState?: YAxisConfig);
+    constructor(eventBus: EventBus, config: FullChartConfig, canvasModel: CanvasModel, scale: ScaleModel, canvasInputListeners: CanvasInputListenerComponent, canvasBoundsContainer: CanvasBoundsContainer, chartPanComponent: ChartPanComponent, cursors: CursorHandler, valueFormatter: (value: number) => string, dataSeriesProvider: () => DataSeriesModel | undefined, paneUUID: string, extentIdx: number, hitTestCanvasModel: HitTestCanvasModel, chartResizeHandler: ChartResizeHandler, initialState?: YAxisConfig);
     /**
      * Registers default label color resolvers for different chart types.
      * @private

package/dist/chart/components/y_axis/y-axis.component.js

@@ -17,7 +17,7 @@ import { cloneUnsafe } from '../../utils/object.utils';
  * Y axis component. Contains all Y axis related logic.
  */
 export class YAxisComponent extends ChartBaseElement {
-    constructor(eventBus, config, canvasModel, scale, canvasInputListeners, canvasBoundsContainer, chartPanComponent, cursors, valueFormatter, dataSeriesProvider, paneUUID, extentIdx, hitTestCanvasModel, initialState) {
+    constructor(eventBus, config, canvasModel, scale, canvasInputListeners, canvasBoundsContainer, chartPanComponent, cursors, valueFormatter, dataSeriesProvider, paneUUID, extentIdx, hitTestCanvasModel, chartResizeHandler, initialState) {
         super();
         this.eventBus = eventBus;
         this.config = config;
@@ -27,6 +27,7 @@ export class YAxisComponent extends ChartBaseElement {
         this.cursors = cursors;
         this.paneUUID = paneUUID;
         this.extentIdx = extentIdx;
+        this.chartResizeHandler = chartResizeHandler;
         this.labelsColorByChartTypeMap = {};
         this.axisTypeSetSubject = new Subject();
         /* This function assigns a callback to be executed when a double-click event is detected.
@@ -50,7 +51,7 @@ export class YAxisComponent extends ChartBaseElement {
         this.yAxisScaleHandler = new YAxisScaleHandler(eventBus, this.state, chartPanComponent, scale, canvasInputListeners, canvasBoundsContainer, canvasBoundsContainer.getBoundsHitTest(CanvasElement.PANE_UUID_Y_AXIS(paneUUID, extentIdx)), hitTestCanvasModel);
         this.addChildEntity(this.yAxisScaleHandler);
         //#endregion
-        this.model = new YAxisModel(this.paneUUID, eventBus, this.state, canvasBoundsContainer, canvasModel, scale, valueFormatter, dataSeriesProvider, extentIdx);
+        this.model = new YAxisModel(this.paneUUID, eventBus, this.state, canvasBoundsContainer, canvasModel, scale, valueFormatter, dataSeriesProvider, extentIdx, this.chartResizeHandler);
         this.addChildEntity(this.model);
         this.updateCursor();
         this.registerDefaultLabelColorResolvers();

package/dist/chart/components/y_axis/y-axis.model.d.ts

@@ -6,6 +6,7 @@
 import { CanvasBoundsContainer } from '../../canvas/canvas-bounds-container';
 import { YAxisConfig } from '../../chart.config';
 import EventBus from '../../events/event-bus';
+import { ChartResizeHandler } from '../../inputhandlers/chart-resize.handler';
 import { CanvasModel } from '../../model/canvas.model';
 import { ChartBaseElement } from '../../model/chart-base-element';
 import { DataSeriesModel } from '../../model/data-series.model';
@@ -21,6 +22,6 @@ export declare class YAxisModel extends ChartBaseElement {
     labelsGenerator: NumericYAxisLabelsGenerator;
     baseLabelsModel: YAxisBaseLabelsModel;
     fancyLabelsModel: FancyYAxisLabelsModel;
-    constructor(paneUUID: string, eventBus: EventBus, state: YAxisConfig, canvasBoundsContainer: CanvasBoundsContainer, canvasModel: CanvasModel, scale: ScaleModel, valueFormatter: (value: number) => string, dataSeriesProvider: () => DataSeriesModel | undefined, extentIdx: number);
+    constructor(paneUUID: string, eventBus: EventBus, state: YAxisConfig, canvasBoundsContainer: CanvasBoundsContainer, canvasModel: CanvasModel, scale: ScaleModel, valueFormatter: (value: number) => string, dataSeriesProvider: () => DataSeriesModel | undefined, extentIdx: number, chartResizeHandler: ChartResizeHandler);
     protected doActivate(): void;
 }

package/dist/chart/components/y_axis/y-axis.model.js

@@ -8,7 +8,7 @@ import { NumericYAxisLabelsGenerator } from './numeric-y-axis-labels.generator';
 import { FancyYAxisLabelsModel } from './price_labels/y-axis-labels.model';
 import { YAxisBaseLabelsModel } from './y-axis-base-labels.model';
 export class YAxisModel extends ChartBaseElement {
-    constructor(paneUUID, eventBus, state, canvasBoundsContainer, canvasModel, scale, valueFormatter, dataSeriesProvider, extentIdx) {
+    constructor(paneUUID, eventBus, state, canvasBoundsContainer, canvasModel, scale, valueFormatter, dataSeriesProvider, extentIdx, chartResizeHandler) {
         super();
         this.paneUUID = paneUUID;
         this.state = state;
@@ -17,7 +17,7 @@ export class YAxisModel extends ChartBaseElement {
         this.labelsGenerator = new NumericYAxisLabelsGenerator(null, dataSeriesProvider, scale, valueFormatter, () => this.state.type, state.labelHeight);
         this.baseLabelsModel = new YAxisBaseLabelsModel(scale, this.labelsGenerator, this.canvasBoundsContainer, paneUUID, extentIdx);
         this.addChildEntity(this.baseLabelsModel);
-        this.fancyLabelsModel = new FancyYAxisLabelsModel(eventBus, scale, canvasBoundsContainer, state, canvasModel, paneUUID, () => this.canvasBoundsContainer.updateYAxisWidths());
+        this.fancyLabelsModel = new FancyYAxisLabelsModel(eventBus, scale, canvasBoundsContainer, state, canvasModel, paneUUID, () => this.canvasBoundsContainer.updateYAxisWidths(), chartResizeHandler);
         this.addChildEntity(this.fancyLabelsModel);
     }
     doActivate() {

package/dist/chart/inputhandlers/main-canvas-touch.handler.d.ts

@@ -7,6 +7,7 @@ import { ChartBaseElement } from '../model/chart-base-element';
 import { CanvasInputListenerComponent } from '../inputlisteners/canvas-input-listener.component';
 import { ScaleModel } from '../model/scale.model';
 import { ChartAreaPanHandler } from '../components/chart/chart-area-pan.handler';
+import { HitBoundsTest } from '../canvas/canvas-bounds-container';
 /**
  * Handles chart touch events.
  */
@@ -15,8 +16,9 @@ export declare class MainCanvasTouchHandler extends ChartBaseElement {
     private scale;
     private canvasInputListeners;
     private mainCanvasParent;
+    private hitTest;
     private touchedCandleIndexes;
-    constructor(chartAreaPanHandler: ChartAreaPanHandler, scale: ScaleModel, canvasInputListeners: CanvasInputListenerComponent, mainCanvasParent: Element);
+    constructor(chartAreaPanHandler: ChartAreaPanHandler, scale: ScaleModel, canvasInputListeners: CanvasInputListenerComponent, mainCanvasParent: Element, hitTest: HitBoundsTest);
     /**
      * Activates canvas input listeners for touch start and touch move events.
      * @protected