@devexperts/dxcharts-lite 2.6.0 → 2.6.2

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

@@ -30,10 +30,12 @@ export declare class YAxisScaleHandler extends ChartBaseElement {
     lastYEnd: Unit;
     lastYHeight: Unit;
     lastYPxHeight: Pixel;
+    private dragNDropYComponent;
     private dblClickCallback;
     private touches;
     private dblTapCallback;
     constructor(bus: EventBus, config: YAxisConfig, panning: ChartPanComponent, scale: ScaleModel, canvasInputListener: CanvasInputListenerComponent, bounds: CanvasBoundsContainer, hitTest: HitBoundsTest, hitTestCanvasModel: HitTestCanvasModel);
+    isDragging(): boolean;
     protected doActivate(): void;
     private onYDragStart;
     private onYDragTick;

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

@@ -1,3 +1,8 @@
+/*
+ * Copyright (C) 2019 - 2024 Devexperts Solutions IE Limited
+ * 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/.
+ */
 /*
  * Copyright (C) 2019 - 2024 Devexperts Solutions IE Limited
  * This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
@@ -87,7 +92,14 @@ export class YAxisScaleHandler extends ChartBaseElement {
                 dragPredicate: () => panning.chartAreaPanHandler.chartPanningOptions.vertical && config.type !== 'percent',
             });
             this.addChildEntity(dragNDropYComponent);
+            this.dragNDropYComponent = dragNDropYComponent;
+        }
+    }
+    isDragging() {
+        if (!this.dragNDropYComponent) {
+            return false;
         }
+        return Math.abs(this.dragNDropYComponent.draggedPixels) > 0;
     }
     doActivate() {
         if (this.config.customScaleDblClick) {

package/dist/chart/inputhandlers/cross-event-producer.component.d.ts

@@ -8,15 +8,36 @@ import { CanvasBoundsContainer, HitBoundsTest, HitBoundsTestOptionsPartial } fro
 import { CanvasInputListenerComponent } from '../inputlisteners/canvas-input-listener.component';
 import { ChartBaseElement } from '../model/chart-base-element';
 import { Unsubscriber } from '../utils/function.utils';
+import { Pixel } from '../model/scaling/viewport.model';
+import { Hover } from './hover-producer.component';
 /**
  * [x, y, uuid - Unique identifier for the subscription]
  */
 export type CrossEvent = [number, number, string];
+interface CrossToolTouchInfo {
+    fixed: {
+        x: Pixel;
+        y: Pixel;
+    };
+    temp: {
+        x: Pixel;
+        y: Pixel;
+    };
+    isSet: boolean;
+    /**
+     * additional flag to determine ordinary and long taps
+     * crosstool shouldn't be hidden after longtouch event even if coordinates are the same
+     * becomes true after touchStart and false after longTouchStart
+     */
+    isCommonTap: boolean;
+}
 export declare class CrossEventProducerComponent extends ChartBaseElement {
     private canvasInputListener;
     private canvasBoundsContainer;
     panesSubscriptions: Partial<Record<string, Subscription>>;
     crossSubject: BehaviorSubject<CrossEvent | null>;
+    crossToolHover: Hover | null;
+    crossToolTouchInfo: CrossToolTouchInfo;
     constructor(canvasInputListener: CanvasInputListenerComponent, canvasBoundsContainer: CanvasBoundsContainer);
     protected doActivate(): void;
     /**
@@ -45,3 +66,4 @@ export declare class CrossEventProducerComponent extends ChartBaseElement {
      */
     subscribeMouseOverHT(uuid: string, hitTest: HitBoundsTest): Unsubscriber;
 }
+export {};

package/dist/chart/inputhandlers/cross-event-producer.component.js

@@ -6,6 +6,7 @@
 import { BehaviorSubject, combineLatest } from 'rxjs';
 import { filter } from 'rxjs/operators';
 import { ChartBaseElement } from '../model/chart-base-element';
+import { isMobile } from '../utils/device/browser.utils';
 export class CrossEventProducerComponent extends ChartBaseElement {
     constructor(canvasInputListener, canvasBoundsContainer) {
         super();
@@ -13,6 +14,14 @@ export class CrossEventProducerComponent extends ChartBaseElement {
         this.canvasBoundsContainer = canvasBoundsContainer;
         this.panesSubscriptions = {};
         this.crossSubject = new BehaviorSubject(null);
+        // mobile specific crosstool hover and touch info
+        this.crossToolHover = null;
+        this.crossToolTouchInfo = {
+            fixed: { x: 0, y: 0 },
+            temp: { x: 0, y: 0 },
+            isSet: false,
+            isCommonTap: false,
+        };
     }
     doActivate() {
         super.doActivate();
@@ -62,7 +71,8 @@ export class CrossEventProducerComponent extends ChartBaseElement {
                 this.crossSubject.next(cross);
                 closeHoverFired = false;
             }
-            else {
+            // crosstool should be hidden if hovering nonpane only on desktop
+            if (!enter && !isMobile()) {
                 this.crossSubject.next(null);
                 closeHoverFired = true;
             }

package/dist/chart/inputhandlers/hover-producer.component.d.ts

@@ -17,6 +17,7 @@ import { ScaleModel } from '../model/scale.model';
 import VisualCandle from '../model/visual-candle';
 import { CrossEvent, CrossEventProducerComponent } from './cross-event-producer.component';
 import { TimeZoneModel } from '../model/time-zone.model';
+import { MainCanvasTouchHandler } from './main-canvas-touch.handler';
 export interface BaseHover {
     readonly x: number;
     readonly y: number;
@@ -52,13 +53,14 @@ export declare class HoverProducerComponent extends ChartBaseElement {
     private canvasBoundsContainer;
     private paneManager;
     private timeZoneModel;
+    private mainCanvasTouchHandler;
     private formatterFactory;
     hoverSubject: BehaviorSubject<Hover | null>;
     get hover(): Hover | null;
-    private longTouchActivatedSubject;
+    longTouchActivatedSubject: BehaviorSubject<boolean>;
     private hoverProducerParts;
     xFormatter: DateTimeFormatter;
-    constructor(crossEventProducer: CrossEventProducerComponent, scale: ScaleModel, config: FullChartConfig, chartModel: ChartModel, canvasInputListener: CanvasInputListenerComponent, canvasBoundsContainer: CanvasBoundsContainer, paneManager: PaneManager, timeZoneModel: TimeZoneModel, formatterFactory: (format: string) => (timestamp: number) => string);
+    constructor(crossEventProducer: CrossEventProducerComponent, scale: ScaleModel, config: FullChartConfig, chartModel: ChartModel, canvasInputListener: CanvasInputListenerComponent, canvasBoundsContainer: CanvasBoundsContainer, paneManager: PaneManager, timeZoneModel: TimeZoneModel, mainCanvasTouchHandler: MainCanvasTouchHandler, formatterFactory: (format: string) => (timestamp: number) => string);
     /**
      * This method is responsible for activating the chart hover functionality. It subscribes to several observables to
      * update the hover when the chart is updated or when the user interacts with it. It also handles special behavior
@@ -89,7 +91,7 @@ export declare class HoverProducerComponent extends ChartBaseElement {
      * @returns {Hover | undefined} - The hover object or undefined if there are no candles in the chart model.
      * @todo Check if uuid is still useful here.
      */
-    private createHover;
+    createHover(x: number, y: number, uuid: string): Hover | undefined;
     /**
      * Creates a hover from a VisualCandle object and fires it.
      * @param {VisualCandle} candle - The VisualCandle object to create the hover from.

package/dist/chart/inputhandlers/hover-producer.component.js

@@ -11,6 +11,7 @@ import { ChartBaseElement } from '../model/chart-base-element';
 import { CompareSeriesHoverProducerPart } from '../model/compare-series-hover';
 import { recalculateXFormatter } from '../model/date-time.formatter';
 import { isMobile } from '../utils/device/browser.utils';
+import { checkChartIsMoving } from './main-canvas-touch.handler';
 /**
  * Produces the Hover event.
  * Hover is used for displaying values in legend and NOT related to displaying cross tool.
@@ -19,7 +20,7 @@ export class HoverProducerComponent extends ChartBaseElement {
     get hover() {
         return this.hoverSubject.getValue();
     }
-    constructor(crossEventProducer, scale, config, chartModel, canvasInputListener, canvasBoundsContainer, paneManager, timeZoneModel, formatterFactory) {
+    constructor(crossEventProducer, scale, config, chartModel, canvasInputListener, canvasBoundsContainer, paneManager, timeZoneModel, mainCanvasTouchHandler, formatterFactory) {
         super();
         this.crossEventProducer = crossEventProducer;
         this.scale = scale;
@@ -29,6 +30,7 @@ export class HoverProducerComponent extends ChartBaseElement {
         this.canvasBoundsContainer = canvasBoundsContainer;
         this.paneManager = paneManager;
         this.timeZoneModel = timeZoneModel;
+        this.mainCanvasTouchHandler = mainCanvasTouchHandler;
         this.formatterFactory = formatterFactory;
         this.hoverSubject = new BehaviorSubject(null);
         this.longTouchActivatedSubject = new BehaviorSubject(false);
@@ -79,37 +81,86 @@ export class HoverProducerComponent extends ChartBaseElement {
             }
         }));
         this.addRxSubscription(this.scale.xChanged.subscribe(() => this.fireLastCross()));
+        this.addRxSubscription(merge(this.chartModel.candlesSetSubject, this.timeZoneModel.observeTimeZoneChanged()).subscribe(() => this.recalculateCrossToolXFormatter()));
+        //#region crosstool touch events, special handling for mobile
         this.addRxSubscription(this.canvasInputListener.observeTouchStart().subscribe(event => {
             var _a;
-            const x = event.touches[0].clientX - this.canvasBoundsContainer.canvasOnPageLocation.x;
-            const y = event.touches[0].clientY - this.canvasBoundsContainer.canvasOnPageLocation.y;
-            const candle = this.chartModel.candleFromX(x, true);
-            const paneId = ((_a = this.paneManager.getPaneIfHit({ x, y })) === null || _a === void 0 ? void 0 : _a.uuid) || '';
-            if (candle) {
-                this.createAndFireHover([x, y, paneId]);
+            this.crossEventProducer.crossToolTouchInfo.isCommonTap = true;
+            const { clientX, clientY } = event.touches[0];
+            // if common tap - fire hover
+            if (!this.longTouchActivatedSubject.getValue()) {
+                const paneId = ((_a = this.paneManager.getPaneIfHit({ x: clientX, y: clientY })) === null || _a === void 0 ? void 0 : _a.uuid) || '';
+                this.createAndFireHover([clientX, clientY, paneId]);
+            }
+            else {
+                // update crosstool placement coordinates
+                this.crossEventProducer.crossToolTouchInfo.temp = {
+                    x: clientX - this.canvasBoundsContainer.canvasOnPageLocation.x,
+                    y: clientY - this.canvasBoundsContainer.canvasOnPageLocation.y,
+                };
             }
         }));
-        // special handling for mobile
         // on long touch - disable panning and show cross tool
         const hitTest = this.canvasBoundsContainer.getBoundsHitTest(CanvasElement.ALL_PANES);
         this.addRxSubscription(this.canvasInputListener.observeLongTouchStart(hitTest).subscribe(event => {
             var _a;
-            this.paneManager.chartPanComponent.deactivatePanHandlers();
+            this.crossEventProducer.crossToolHover = null;
+            this.crossEventProducer.crossToolTouchInfo.isCommonTap = false;
+            // don't lock chart and show crosshair if chart is being moved, crosstool is not enabled or we do pinch event
+            const longTouchCrosshairPredicate = this.mainCanvasTouchHandler.canvasTouchInfo.isMoving ||
+                this.chartModel.config.components.crossTool.type === 'none' ||
+                event.touches.length > 1;
+            if (longTouchCrosshairPredicate) {
+                return;
+            }
             this.longTouchActivatedSubject.next(true);
+            this.crossEventProducer.crossToolTouchInfo.isSet = false;
             const x = event.touches[0].clientX - this.canvasBoundsContainer.canvasOnPageLocation.x;
             const y = event.touches[0].clientY - this.canvasBoundsContainer.canvasOnPageLocation.y;
+            this.crossEventProducer.crossToolTouchInfo.fixed = {
+                x,
+                y,
+            };
             const paneId = ((_a = this.paneManager.getPaneIfHit({ x, y })) === null || _a === void 0 ? void 0 : _a.uuid) || '';
             this.createAndFireHover([x, y, paneId]);
             this.crossEventProducer.crossSubject.next([x, y, paneId]);
+            this.paneManager.chartPanComponent.setChartPanningOptions(false, false);
         }));
-        this.addRxSubscription(this.canvasInputListener.observeTouchEndDocument().subscribe(() => {
-            this.paneManager.chartPanComponent.activateChartPanHandlers();
-            if (this.longTouchActivatedSubject.getValue()) {
+        this.addRxSubscription(this.canvasInputListener.observeTouchEndDocument().subscribe(event => {
+            var _a, _b;
+            const { clientX, clientY } = event.changedTouches[0];
+            const { fixed, temp } = this.crossEventProducer.crossToolTouchInfo;
+            const x = clientX - this.canvasBoundsContainer.canvasOnPageLocation.x;
+            const y = clientY - this.canvasBoundsContainer.canvasOnPageLocation.y;
+            // common tap without moving, hide crosstool
+            if (this.crossEventProducer.crossToolTouchInfo.isCommonTap &&
+                !checkChartIsMoving(x, temp.x, y, temp.y)) {
+                this.paneManager.chartPanComponent.setChartPanningOptions(true, true);
                 this.longTouchActivatedSubject.next(false);
                 this.crossEventProducer.fireCrossClose();
+                this.crossEventProducer.crossToolHover = null;
+            }
+            if (!this.crossEventProducer.crossToolTouchInfo.isSet) {
+                this.crossEventProducer.crossToolTouchInfo.isSet = true;
+                this.crossEventProducer.crossToolTouchInfo.fixed = {
+                    x,
+                    y,
+                };
+                this.crossEventProducer.crossToolTouchInfo.isSet = true;
+            }
+            else {
+                const pane = (_b = (_a = this.crossEventProducer.crossToolHover) === null || _a === void 0 ? void 0 : _a.paneId) !== null && _b !== void 0 ? _b : 'CHART';
+                const paneBounds = this.canvasBoundsContainer.getBounds(CanvasElement.PANE_UUID(pane));
+                const paneYStart = paneBounds.y + 5;
+                const paneYEnd = paneBounds.y + paneBounds.height - 5;
+                const xDiff = x - temp.x;
+                const yDiff = y - temp.y;
+                const newX = fixed.x < 0 ? 0 : fixed.x > paneBounds.width ? paneBounds.width : (fixed.x += xDiff);
+                const newY = fixed.y < paneYStart ? paneYStart : fixed.y > paneYEnd ? paneYEnd : (fixed.y += yDiff);
+                this.crossEventProducer.crossToolTouchInfo.fixed = { x: newX, y: newY };
             }
         }));
-        this.addRxSubscription(merge(this.chartModel.candlesSetSubject, this.timeZoneModel.observeTimeZoneChanged()).subscribe(() => this.recalculateCrossToolXFormatter()));
+        //#endregion
     }
     /**
      * Recalculates the cross tool X formatter.
@@ -198,12 +249,15 @@ export class HoverProducerComponent extends ChartBaseElement {
      * @returns {void}
      */
     fireHover(hover) {
-        var _a;
+        var _a, _b;
         if (hover) {
             // special handling for mobile
-            // set active candle + show cross tool only when long tap
+            // set active candle + show cross tool only when crosstool is active
             if (isMobile() && this.config.components.crossTool.type !== 'none') {
-                const candle = (_a = hover.candleHover) === null || _a === void 0 ? void 0 : _a.visualCandle.candle;
+                const crossToolHover = this.crossEventProducer.crossToolHover;
+                const candle = crossToolHover
+                    ? (_a = crossToolHover.candleHover) === null || _a === void 0 ? void 0 : _a.visualCandle.candle
+                    : (_b = hover.candleHover) === null || _b === void 0 ? void 0 : _b.visualCandle.candle;
                 candle && this.chartModel.mainCandleSeries.setActiveCandle(candle);
             }
             this.hoverSubject.next(hover);

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

@@ -8,6 +8,8 @@ import { CanvasInputListenerComponent } from '../inputlisteners/canvas-input-lis
 import { ScaleModel } from '../model/scale.model';
 import { ChartAreaPanHandler } from '../components/chart/chart-area-pan.handler';
 import { HitBoundsTest } from '../canvas/canvas-bounds-container';
+import { Pixel } from '../model/scaling/viewport.model';
+export declare const PIXELS_FOR_MOVE = 2;
 /**
  * Handles chart touch events.
  */
@@ -18,6 +20,13 @@ export declare class MainCanvasTouchHandler extends ChartBaseElement {
     private mainCanvasParent;
     private hitTest;
     private touchedCandleIndexes;
+    canvasTouchInfo: {
+        touchStart: {
+            x: Pixel;
+            y: Pixel;
+        };
+        isMoving?: boolean;
+    };
     constructor(chartAreaPanHandler: ChartAreaPanHandler, scale: ScaleModel, canvasInputListeners: CanvasInputListenerComponent, mainCanvasParent: Element, hitTest: HitBoundsTest);
     /**
      * Activates canvas input listeners for touch start and touch move events.
@@ -56,3 +65,4 @@ export declare class MainCanvasTouchHandler extends ChartBaseElement {
      */
     pinchHandler(candleIndexes: Array<number>, touchPositions: number[]): void;
 }
+export declare const checkChartIsMoving: (x1: Pixel, x2: Pixel, y1: Pixel, y2: Pixel, pixelsToMove?: Pixel) => boolean;

package/dist/chart/inputhandlers/main-canvas-touch.handler.js

@@ -4,6 +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';
+export const PIXELS_FOR_MOVE = 2;
 /**
  * Handles chart touch events.
  */
@@ -17,6 +18,12 @@ export class MainCanvasTouchHandler extends ChartBaseElement {
         this.hitTest = hitTest;
         // 2 candles indexes touched by 2 fingers when pinching
         this.touchedCandleIndexes = [0, 0];
+        // stores the information about touch events
+        this.canvasTouchInfo = {
+            touchStart: { x: 0, y: 0 },
+            // uses touch start to determine if chart is being moved
+            isMoving: false,
+        };
     }
     /**
      * Activates canvas input listeners for touch start and touch move events.
@@ -34,6 +41,10 @@ export class MainCanvasTouchHandler extends ChartBaseElement {
      * @returns {void}
      */
     handleTouchStartEvent(e) {
+        const { clientX, clientY } = e.touches[0];
+        if (e.touches.length === 1) {
+            this.canvasTouchInfo.touchStart = { x: clientX, y: clientY };
+        }
         if (e.touches.length === 2) {
             this.chartAreaPanHandler.deactivate();
             // @ts-ignore
@@ -47,6 +58,11 @@ export class MainCanvasTouchHandler extends ChartBaseElement {
      * @returns {void}
      */
     handleTouchMoveEvent(e) {
+        const { clientX, clientY } = e.touches[0];
+        const { touchStart } = this.canvasTouchInfo;
+        if (e.touches.length === 1) {
+            this.canvasTouchInfo.isMoving = checkChartIsMoving(clientX, touchStart.x, clientY, touchStart.y);
+        }
         if (e.touches.length === 2) {
             this.pinchHandler(this.touchedCandleIndexes, this.getXPositions(e));
         }
@@ -56,6 +72,7 @@ export class MainCanvasTouchHandler extends ChartBaseElement {
      * @returns {void}
      */
     handleTouchEndEvent(e) {
+        this.canvasTouchInfo.isMoving = false;
         // zero touches means the user stopped resizing completely (both fingers are up)
         if (e.touches.length === 0) {
             this.chartAreaPanHandler.activate();
@@ -95,3 +112,4 @@ export class MainCanvasTouchHandler extends ChartBaseElement {
         this.scale.setXScale(first, last);
     }
 }
+export const checkChartIsMoving = (x1, x2, y1, y2, pixelsToMove = PIXELS_FOR_MOVE) => Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2)) > pixelsToMove;

package/dist/chart/inputlisteners/canvas-input-listener.component.js

@@ -200,10 +200,8 @@ class CanvasInputListenerComponent extends ChartBaseElement {
             };
             this.addSubscription(subscribeListener(this.element, doubleTapListenerProducer, 'touchend'));
             // workaround to handle long touch start/end for iOS
-            const longTouchListeners = (e, delay = 700, pixelsForMoveReset = 3) => {
+            const longTouchListeners = (e, delay = 200) => {
                 e.preventDefault();
-                const initialCoords = { x: e.touches[0].clientX, y: e.touches[0].clientY };
-                let coords = { x: 0, y: 0 };
                 let longTouchStart = false;
                 let timerLongTouchStart = null;
                 // start timeout for long touch
@@ -213,11 +211,8 @@ class CanvasInputListenerComponent extends ChartBaseElement {
                 }, delay);
                 const touchMoveHandler = (e) => {
                     e.preventDefault();
-                    coords = { x: e.touches[0].clientX, y: e.touches[0].clientY };
                     // clear long touch timeout if move area is bigger than pixelsForMove
-                    if (Math.sqrt(Math.pow(coords.x - initialCoords.x, 2) + Math.pow(coords.y - initialCoords.y, 2)) >
-                        pixelsForMoveReset ||
-                        e.touches.length > 1) {
+                    if (e.touches.length > 1) {
                         timerLongTouchStart && clearTimeout(timerLongTouchStart);
                     }
                 };

package/dist/chart/model/candle-series.model.js

@@ -123,7 +123,7 @@ export class CandleSeriesModel extends DataSeriesModel {
      * @returns {HighLowWithIndex} - An object containing the high-low values along with their corresponding indexes.
      */
     recalculateZippedHighLow() {
-        return (this.zippedHighLow = calculateCandlesHighLow(this.visualPoints.slice(this.dataIdxStart, this.dataIdxEnd)));
+        return (this.zippedHighLow = calculateCandlesHighLow(this.visualPoints.slice(this.dataIdxStart, this.dataIdxEnd + 1)));
     }
     /**
      * Updates the current price and the last price movement.

package/dist/chart/model/data-series.model.js

@@ -4,6 +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 { DataSeriesYAxisLabelsProvider } from '../components/y_axis/price_labels/data-series-y-axis-labels.provider';
+import { LabelsGroups } from '../components/y_axis/price_labels/y-axis-labels.model';
 import { binarySearch, create2DArray, lastOf, slice2DArray } from '../utils/array.utils';
 import { floorToDPR } from '../utils/device/device-pixel-ratio.utils';
 import { MathUtils } from '../utils/math.utils';
@@ -141,6 +142,7 @@ export class DataSeriesModel extends ChartBaseElement {
         this.addRxSubscription(this.scale.xChanged.subscribe(() => this.recalculateDataViewportIndexes()));
         this.addRxSubscription(this.scale.scaleInversedSubject.subscribe(() => {
             this.recalculateVisualPoints();
+            this.extentComponent.dynamicObjectsCanvasModel.fireDraw();
         }));
     }
     /**
@@ -161,12 +163,28 @@ export class DataSeriesModel extends ChartBaseElement {
      */
     moveToExtent(extent) {
         var _a;
+        const prevExtent = Object.assign({}, this.extentComponent);
         this.extentComponent.removeDataSeries(this);
         this.extentComponent = extent;
         this.scale = extent.scale;
         this.view = new DataSeriesView(this, this.scale, () => this.extentComponent.yAxis.getAxisType(), this.getBaseline);
         this.yAxisLabelProvider.yAxisBoundsProvider = extent.getYAxisBounds;
         this.yAxisLabelProvider.axisState = (_a = extent.yAxis) === null || _a === void 0 ? void 0 : _a.state;
+        // move data series labels
+        const prevExtentMainLabels = prevExtent.yAxis.model.fancyLabelsModel.labelsProviders[LabelsGroups.MAIN];
+        const dataSeriesLabelsId = prevExtentMainLabels && Object.keys(prevExtentMainLabels).find(p => this.parentId && p === this.parentId);
+        const currentMainLabels = this.extentComponent.yAxis.model.fancyLabelsModel.labelsProviders[LabelsGroups.MAIN];
+        if (dataSeriesLabelsId) {
+            const labelsProvider = prevExtentMainLabels[dataSeriesLabelsId];
+            labelsProvider.yAxisBoundsProvider = extent.getYAxisBounds;
+            // main group is not created yet (new extent without labels) or main group exists but no data series labels so far
+            if (!currentMainLabels || (currentMainLabels && !currentMainLabels[dataSeriesLabelsId])) {
+                // create new data series labels group on the new extent
+                this.extentComponent.yAxis.model.fancyLabelsModel.registerYAxisLabelsProvider(LabelsGroups.MAIN, labelsProvider, dataSeriesLabelsId);
+                // remove labels from previous extent
+                prevExtent.yAxis.model.fancyLabelsModel.unregisterYAxisLabelsProvider(LabelsGroups.MAIN, dataSeriesLabelsId);
+            }
+        }
         // shut down old subscriptions
         this.deactivate();
         // and apply new ones (with updated scaleModel)