@devexperts/dxcharts-lite 2.5.6 → 2.5.8

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;
@@ -180,8 +180,8 @@ export default class ChartBootstrap {
         this.volumesComponent = new VolumesComponent(this.dynamicObjectsCanvasModel, chartComponent, scaleModel, canvasBoundsContainer, drawingManager, config, paneManager, this.dynamicObjects);
         this.chartComponents.push(this.volumesComponent);
         // grid component
-        const mainChartGridComponent = new GridComponent(mainCanvasModel, scaleModel, config, this.yAxisComponent.state, 'GRID', drawingManager, () => this.canvasBoundsContainer.getBounds(CanvasElement.ALL_PANES), () => this.canvasBoundsContainer.getBounds(chartPaneId), () => this.xAxisComponent.xAxisLabelsGenerator.labels, () => this.yAxisComponent.model.baseLabelsModel.labels, () => mainPane.mainExtent.toY(mainPane.mainExtent.getBaseline()), () => config.components.grid.visible);
-        this.chartComponents.push(mainChartGridComponent);
+        const verticalGridComponent = new GridComponent(mainCanvasModel, scaleModel, config, this.yAxisComponent.state, 'GRID', drawingManager, () => this.canvasBoundsContainer.getBounds(CanvasElement.ALL_PANES), () => this.canvasBoundsContainer.getBounds(chartPaneId), () => this.xAxisComponent.xAxisLabelsGenerator.labels, () => [], undefined, () => config.components.grid.visible);
+        this.chartComponents.push(verticalGridComponent);
         this.hoverProducer = new HoverProducerComponent(this.crossEventProducer, scaleModel, config, chartModel, canvasInputListener, this.canvasBoundsContainer, this.paneManager, timeZoneModel, formatterFactory);
         this.chartComponents.push(this.hoverProducer);
         this.crossToolComponent = new CrossToolComponent(config, crossToolCanvasModel, canvasBoundsContainer, drawingManager, paneManager, this.crossEventProducer, this.hoverProducer);

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

@@ -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.d.ts

@@ -7,12 +7,16 @@ import { ScaleModel } from '../../model/scale.model';
 import VisualCandle from '../../model/visual-candle';
 import { Timestamp } from '../../model/scaling/viewport.model';
 import { ChartModel } from './chart.model';
+export interface BasicScaleOptions {
+    xScale?: boolean;
+    yScale?: boolean;
+}
 /**
  * Calculates the initial viewport.
  * @param scaleModel
  * @doc-tags scaling,viewport
  */
-export declare const createBasicScaleViewportTransformer: (scale: ScaleModel) => (visualCandleSource: VisualCandle[]) => void;
+export declare const createBasicScaleViewportTransformer: (scale: ScaleModel) => (visualCandleSource: VisualCandle[], scaleOptions?: BasicScaleOptions) => void;
 /**
  * Moves the viewport between 2 timestamps.
  * @param scaleModel

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

@@ -8,13 +8,17 @@
  * @param scaleModel
  * @doc-tags scaling,viewport
  */
-export const createBasicScaleViewportTransformer = (scale) => (visualCandleSource) => {
+export const createBasicScaleViewportTransformer = (scale) => (visualCandleSource, scaleOptions = { xScale: true, yScale: true }) => {
     if (visualCandleSource.length !== 0) {
-        const vCandles = visualCandleSource.slice(Math.max(visualCandleSource.length - scale.state.defaultViewportItems, 0));
-        const startCandle = vCandles[0];
-        const endCandle = vCandles[vCandles.length - 1];
-        scale.setXScale(startCandle.startUnit, endCandle.startUnit + endCandle.width + scale.offsets.right);
-        scale.doAutoScale(true);
+        if (scaleOptions.xScale) {
+            const vCandles = visualCandleSource.slice(Math.max(visualCandleSource.length - scale.state.defaultViewportItems, 0));
+            const startCandle = vCandles[0];
+            const endCandle = vCandles[vCandles.length - 1];
+            scale.setXScale(startCandle.startUnit, endCandle.startUnit + endCandle.width + scale.offsets.right);
+        }
+        if (scaleOptions.yScale) {
+            scale.doAutoScale(true);
+        }
         scale.fireChanged();
     }
 };

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

@@ -54,7 +54,7 @@ export declare class ChartModel extends ChartBaseElement {
     private candleWidthByChartType;
     secondaryChartColors: SecondaryChartColorsPool;
     lastTimeFrame: TimeFrameRange;
-    basicScaleViewportTransformer: (visualCandleSource: VisualCandle[]) => void;
+    basicScaleViewportTransformer: (visualCandleSource: VisualCandle[], scaleOptions?: import("./basic-scale").BasicScaleOptions) => void;
     timeFrameViewportTransformer: (timeframe: [number, number], zoomIn?: boolean | null) => void;
     private FAKE_CANDLES_DEFAULT;
     readonly pane: PaneComponent;
@@ -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

@@ -64,7 +64,9 @@ export class ChartModel extends ChartBaseElement {
         const candleSeries = new MainCandleSeriesModel(this.chartBaseModel, this.paneManager.panes[CHART_UUID].mainExtent, uuid(), this.paneManager.hitTestController.getNewDataSeriesHitTestId(), this.bus, this.scale, new ChartInstrument(), this.candlesTransformersByChartType, this.candleWidthByChartType, Object.assign({}, this.config.colors));
         candleSeries.config.type = this.config.components.chart.type;
         this.candleSeries.push(candleSeries);
-        scale.addXConstraint((_, state) => candleEdgesConstrait(state, this.mainCandleSeries.visualPoints, this.config.components.chart.minCandlesOffset, scale.getBounds()));
+        if (this.config.components.chart.minCandlesOffset > 0) {
+            scale.addXConstraint((_, state) => candleEdgesConstrait(state, this.mainCandleSeries.visualPoints, this.config.components.chart.minCandlesOffset, scale.getBounds()));
+        }
         this.basicScaleViewportTransformer = createBasicScaleViewportTransformer(scale);
         this.timeFrameViewportTransformer = createTimeFrameViewportTransformer(scale, this);
         this.pane = this.paneManager.panes[CHART_UUID];
@@ -103,8 +105,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;
@@ -217,7 +219,9 @@ export class ChartModel extends ChartBaseElement {
         });
         this.chartBaseModel.recalculatePeriod();
         this.autoScaleOnCandles();
-        this.scale.doAutoScale();
+        if (this.config.scale.auto) {
+            this.scale.doAutoScale();
+        }
         this.candlesSetSubject.next();
         this.canvasModel.fireDraw();
     }
@@ -420,36 +424,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 +656,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.
@@ -809,7 +783,9 @@ export class ChartModel extends ChartBaseElement {
                 series.recalculateVisualPoints();
             }
         });
-        this.scale.doAutoScale();
+        if (this.config.scale.auto) {
+            this.scale.doAutoScale();
+        }
         this.candlesUpdatedSubject.next();
     }
     /**

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));
@@ -87,9 +88,9 @@ export class PaneComponent extends ChartBaseElement {
      * @param {NumericYAxisLabelsGenerator} yAxisLabelsGenerator - The generator used to create the labels for the y-axis.
      * @returns {GridComponent} - The newly created GridComponent instance.
      */
-    createGridComponent(uuid, scale, yAxisLabelsGenerator, yAxisState) {
+    createGridComponent(uuid, scale, yAxisState, yAxisLabelsGetter, yAxisBaselineGetter) {
         const chartPaneId = CanvasElement.PANE_UUID(uuid);
-        const gridComponent = new GridComponent(this.mainCanvasModel, scale, this.config, yAxisState, `PANE_${uuid}_grid_drawer`, this.drawingManager, () => this.canvasBoundsContainer.getBounds(chartPaneId), () => this.canvasBoundsContainer.getBounds(chartPaneId), () => [], () => yAxisLabelsGenerator.generateNumericLabels());
+        const gridComponent = new GridComponent(this.mainCanvasModel, scale, this.config, yAxisState, `PANE_${uuid}_grid_drawer`, this.drawingManager, () => this.canvasBoundsContainer.getBounds(chartPaneId), () => this.canvasBoundsContainer.getBounds(chartPaneId), () => [], yAxisLabelsGetter, yAxisBaselineGetter, () => this.config.components.grid.visible);
         return gridComponent;
     }
     /**
@@ -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));
@@ -134,7 +135,7 @@ export class PaneComponent extends ChartBaseElement {
         if (useDefaultHighLow) {
             scaleModel.autoScaleModel.setHighLowProvider('default', createCandlesOffsetProvider(() => ({ top: 10, bottom: 10, left: 0, right: 0, visible: true }), createDefaultYExtentHighLowProvider(yExtentComponent)));
         }
-        const gridComponent = this.createGridComponent(this.uuid, scaleModel, yExtentComponent.yAxis.model.labelsGenerator, yExtentComponent.yAxis.state);
+        const gridComponent = this.createGridComponent(this.uuid, scaleModel, yExtentComponent.yAxis.state, () => yExtentComponent.yAxis.model.baseLabelsModel.labels, () => yExtentComponent.toY(yExtentComponent.getBaseline()));
         yExtentComponent.addChildEntity(gridComponent);
         yExtentComponent.activate();
         this.yExtentComponents.push(yExtentComponent);

package/dist/chart/components/x_axis/x-axis-labels.generator.d.ts

@@ -18,7 +18,7 @@ export interface XAxisLabelsGenerator {
     /**
      * Generates x-axis labels from scratch. Heavy operation.
      */
-    generateLabels(): void;
+    generateLabels(prependedCandles?: VisualCandle[]): void;
     /**
      * Updates current labels state (x-position). Lightweight operation.
      */
@@ -107,7 +107,7 @@ export declare class XAxisTimeLabelsGenerator implements XAxisLabelsGenerator {
      * Calls the method generateWeightedLabels to generate labels.
      * @returns {void}
      */
-    generateLabels(): void;
+    generateLabels(prependedCandles?: VisualCandle[]): void;
     /**
      * Recalculates the labels by calling the method recalculateCachedLabels.
      * @returns {void}

package/dist/chart/components/x_axis/x-axis-labels.generator.js

@@ -86,14 +86,14 @@ export class XAxisTimeLabelsGenerator {
     /**
      * Make a prediction(750) about how many candles we need to fake to fill all X axis by labels
      */
-    getAllCandlesWithFake() {
+    getAllCandlesWithFake(prependedCandles = []) {
         const visualCandles = this.chartModel.mainCandleSeries.visualPoints;
         if (visualCandles.length === 0) {
             return [];
         }
         const fakeCandlesForSides = Array.from({ length: 750 });
         const appendFakeCandle = fakeCandlesForSides.map((_, idx) => fakeVisualCandle(this.chartModel.mainCandleSeries.dataPoints, this.chartModel.mainCandleSeries.visualPoints, this.chartModel.mainCandleSeries.meanCandleWidth, visualCandles.length + idx, this.chartModel.getPeriod()));
-        return [...visualCandles, ...appendFakeCandle];
+        return [...prependedCandles, ...visualCandles, ...appendFakeCandle];
     }
     /**
      * Maps an array of weighted points to an array of XAxisLabelWeighted objects.
@@ -139,8 +139,8 @@ export class XAxisTimeLabelsGenerator {
      * @function
      * @returns {void}
      */
-    generateWeightedLabels() {
-        const allCandlesWithFake = this.getAllCandlesWithFake();
+    generateWeightedLabels(prependedCandles = []) {
+        const allCandlesWithFake = this.getAllCandlesWithFake(prependedCandles);
         const weightedPoints = mapCandlesToWeightedPoints(allCandlesWithFake, this.weightToTimeFormatMatcherArray, this.timeZoneModel.tzOffset(this.config.timezone));
         const weightedLabels = this.mapWeightedPointsToLabels(weightedPoints, allCandlesWithFake);
         this.labelsGroupedByWeight = groupLabelsByWeight(weightedLabels);
@@ -253,8 +253,8 @@ export class XAxisTimeLabelsGenerator {
      * Calls the method generateWeightedLabels to generate labels.
      * @returns {void}
      */
-    generateLabels() {
-        this.generateWeightedLabels();
+    generateLabels(prependedCandles) {
+        this.generateWeightedLabels(prependedCandles);
     }
     /**
      * Recalculates the labels by calling the method recalculateCachedLabels.

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();
         }));
     }