@devexperts/dxcharts-lite 2.5.4 → 2.5.6

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 => {

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/candle.functions.d.ts

@@ -10,10 +10,11 @@ import { PartialCandle } from './chart.component';
  * so there is not enough information to build a candle: only Open/Close value available.
  * In this case Daily candle, which we receive, must be completed to full OHLC with equal values.
  */
-export declare const prepareCandle: (candle: PartialCandle) => Candle;
+export declare const prepareCandle: (candle: PartialCandle) => Candle | undefined;
 /**
  * Adds index to candles according to their array index.
  * @param candles
  */
 export declare const reindexCandles: (candles: Array<Candle>) => void;
 export declare const deleteCandlesIndex: (candles: Array<Candle>) => void;
+export declare const isCandle: (value: Candle | undefined) => value is Candle;

package/dist/chart/components/chart/candle.functions.js

@@ -11,27 +11,33 @@ import { finite } from '../../utils/math.utils';
  */
 export const prepareCandle = (candle) => {
     var _a;
-    const settlementPrice = finite(candle.close, candle.open, candle.hi, candle.lo);
-    if (!isFinite(settlementPrice)) {
-        throw new Error('Received candle without any price');
+    try {
+        const settlementPrice = finite(candle.close, candle.open, candle.hi, candle.lo);
+        if (!isFinite(settlementPrice)) {
+            throw new Error('Received candle without any price');
+        }
+        // @ts-ignore
+        const preparedCandleHi = finite(candle.hi, Math.max(candle.open, candle.close), settlementPrice);
+        // @ts-ignore
+        const preparedCandleLo = finite(candle.lo, Math.min(candle.open, candle.close), settlementPrice);
+        const preparedCandleOpen = finite(candle.open, candle.lo, settlementPrice);
+        const preparedCandleClose = finite(candle.close, candle.hi, settlementPrice);
+        return {
+            hi: preparedCandleHi,
+            lo: preparedCandleLo,
+            open: preparedCandleOpen,
+            close: preparedCandleClose,
+            timestamp: candle.timestamp,
+            volume: (_a = candle.volume) !== null && _a !== void 0 ? _a : 0,
+            expansion: candle.expansion,
+            idx: candle.idx,
+            impVolatility: candle.impVolatility,
+        };
+    }
+    catch (e) {
+        console.warn(e);
+        return;
     }
-    // @ts-ignore
-    const preparedCandleHi = finite(candle.hi, Math.max(candle.open, candle.close), settlementPrice);
-    // @ts-ignore
-    const preparedCandleLo = finite(candle.lo, Math.min(candle.open, candle.close), settlementPrice);
-    const preparedCandleOpen = finite(candle.open, candle.lo, settlementPrice);
-    const preparedCandleClose = finite(candle.close, candle.hi, settlementPrice);
-    return {
-        hi: preparedCandleHi,
-        lo: preparedCandleLo,
-        open: preparedCandleOpen,
-        close: preparedCandleClose,
-        timestamp: candle.timestamp,
-        volume: (_a = candle.volume) !== null && _a !== void 0 ? _a : 0,
-        expansion: candle.expansion,
-        idx: candle.idx,
-        impVolatility: candle.impVolatility,
-    };
 };
 /**
  * Adds index to candles according to their array index.
@@ -47,3 +53,4 @@ export const deleteCandlesIndex = (candles) => {
         candle.idx = undefined;
     });
 };
+export const isCandle = (value) => value !== undefined;

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

@@ -100,6 +100,7 @@ export class ChartComponent extends ChartBaseElement {
             this.dynamicObjects.model.addObject({
                 id: series.id,
                 paneId: series.extentComponent.paneUUID,
+                parentId: series.parentId,
                 model: series,
                 drawer: this.dataSeriesDrawer,
             });

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

@@ -20,7 +20,7 @@ import { floor, round } from '../../utils/math.utils';
 import { merge as mergeObj } from '../../utils/merge.utils';
 import { createBasicScaleViewportTransformer, createTimeFrameViewportTransformer } from './basic-scale';
 import { calculateCandleWidth } from './candle-width-calculator.functions';
-import { deleteCandlesIndex, prepareCandle, reindexCandles } from './candle.functions';
+import { deleteCandlesIndex, isCandle, prepareCandle, reindexCandles } from './candle.functions';
 import { ChartInstrument } from './chart.component';
 import { fakeCandle } from './fake-candles';
 import { SecondaryChartColorsPool } from './secondary-chart-colors-pool';
@@ -162,9 +162,9 @@ export class ChartModel extends ChartBaseElement {
      * @returns {CandleSeriesModel | undefined} - The newly created secondary candle series model or undefined if it could not be created.
      */
     setSecondaryCandleSeries(candles, instrument = this.mainCandleSeries.instrument, recalculateAndUpdate = true) {
-        const prepareCandleCandles = sortCandles(candles.map(prepareCandle));
+        const preparedCandles = prepareCandles(candles);
         // set correct indexes based on main candles timestamp
-        const reindexCandles = this.reindexCandlesBasedOnSeries(this.mainCandleSeries.dataPoints, prepareCandleCandles);
+        const reindexCandles = this.reindexCandlesBasedOnSeries(this.mainCandleSeries.dataPoints, preparedCandles);
         // ensure there are no gaps in new candles
         const secondaryCandles = this.secondarySeriesAdjustments(this.mainCandleSeries.dataPoints, reindexCandles);
         // create a new secondary series model if it doesn't already exist
@@ -198,10 +198,10 @@ export class ChartModel extends ChartBaseElement {
             this.mainInstrumentChangedSubject.next(mainSeries.instrument);
         }
         this.rememberCurrentTimeframe();
-        const prepareCandleCandles = sortCandles(mainSeries.candles.map(prepareCandle));
+        const preparedCandles = prepareCandles(mainSeries.candles);
         this.mainCandleSeries.clearData();
-        reindexCandles(prepareCandleCandles);
-        this.mainCandleSeries.dataPoints = prepareCandleCandles;
+        reindexCandles(preparedCandles);
+        this.mainCandleSeries.dataPoints = preparedCandles;
         // deactivate deleted series
         this.secondaryCandleSeries
             .filter(series => {
@@ -282,7 +282,7 @@ export class ChartModel extends ChartBaseElement {
             console.error('All series update failed. Instruments for series are different.');
             return;
         }
-        const preparedCandles = sortCandles(mainSeries.candles.map(prepareCandle));
+        const preparedCandles = prepareCandles(mainSeries.candles);
         const updateResult = updateCandles(this.mainCandleSeries.dataPoints, preparedCandles);
         const updatedCandles = updateResult.candles;
         reindexCandles(updatedCandles);
@@ -290,7 +290,7 @@ export class ChartModel extends ChartBaseElement {
         // re-create series
         secondarySeries.map(series => {
             var _a, _b, _c, _d;
-            const preparedCandles = sortCandles(series.candles.map(prepareCandle));
+            const preparedCandles = prepareCandles(series.candles);
             const updatedCandles = updateCandles((_d = (_c = this.findSecondarySeriesBySymbol((_b = (_a = series.instrument) === null || _a === void 0 ? void 0 : _a.symbol) !== null && _b !== void 0 ? _b : '')) === null || _c === void 0 ? void 0 : _c.dataPoints) !== null && _d !== void 0 ? _d : [], preparedCandles).candles;
             return this.setSecondaryCandleSeries(updatedCandles, series.instrument, false);
         });
@@ -932,6 +932,7 @@ export class ChartModel extends ChartBaseElement {
     }
 }
 const sortCandles = (candles) => candles.slice().sort((a, b) => (a.timestamp === b.timestamp ? 0 : a.timestamp > b.timestamp ? 1 : -1));
+const prepareCandles = (candles) => sortCandles(candles.map(prepareCandle).filter(isCandle));
 const findFirstNotEmptyCandle = (candles, startIdx, iterateStep) => {
     if (startIdx >= candles.length) {
         return candles[candles.length - 1];

package/dist/chart/components/dynamic-objects/dynamic-objects.model.d.ts

@@ -14,17 +14,19 @@ export interface DynamicObject<T = unknown> {
     readonly drawer: DynamicModelDrawer<T>;
     readonly paneId: PaneId;
     readonly model?: T;
+    readonly parentId?: DynamicObjectId;
 }
 export declare class DynamicObjectsModel extends ChartBaseElement {
     private canvasModel;
     private _objects;
     private modelIdToObjectMap;
+    private _uniqueObjects;
     constructor(canvasModel: CanvasModel);
     /**
      * @returns the `DynamicObject` itself and pane `LinkedList` where the object is stored.
      *
      */
-    private getObjectInfoById;
+    getObjectInfoById(id: DynamicObjectId): [DynamicObject, LinkedList<DynamicObject>] | undefined;
     /**
      * @returns `DynamicObject` position in associated pane `LinkedList`
      * @returns `-1` if an object was not found
@@ -78,6 +80,10 @@ export declare class DynamicObjectsModel extends ChartBaseElement {
      * Getter for the objects
      */
     get objects(): Record<string, LinkedList<DynamicObject<unknown>>>;
+    /**
+     * Getter for the unique objects, unique object is an entity which is either dynamic object itself, or its parent
+     */
+    get uniqueObjects(): Record<string, Set<DynamicObjectId>>;
     /**
      * Sets the objects
      * @param objects

package/dist/chart/components/dynamic-objects/dynamic-objects.model.js

@@ -11,6 +11,7 @@ export class DynamicObjectsModel extends ChartBaseElement {
         super();
         this.canvasModel = canvasModel;
         this.modelIdToObjectMap = new Map();
+        this._uniqueObjects = {};
         this._objects = new BehaviorSubject({});
     }
     /**
@@ -49,7 +50,7 @@ export class DynamicObjectsModel extends ChartBaseElement {
      * @param obj
      */
     addObject(obj) {
-        var _a;
+        var _a, _b;
         const paneId = obj.paneId;
         const objects = this.objects;
         const paneList = (_a = objects[paneId]) !== null && _a !== void 0 ? _a : new LinkedList();
@@ -58,6 +59,10 @@ export class DynamicObjectsModel extends ChartBaseElement {
         }
         paneList.insertAtEnd(obj);
         this.modelIdToObjectMap.set(obj.id, obj);
+        if (!this.uniqueObjects[paneId]) {
+            this.uniqueObjects[paneId] = new Set();
+        }
+        this.uniqueObjects[paneId].add((_b = obj.parentId) !== null && _b !== void 0 ? _b : obj.id);
         this.setDynamicObjects(objects);
     }
     /**
@@ -65,6 +70,7 @@ export class DynamicObjectsModel extends ChartBaseElement {
      * @param id
      */
     removeObject(id) {
+        var _a;
         const objInfo = this.getObjectInfoById(id);
         if (!objInfo) {
             return;
@@ -74,6 +80,9 @@ export class DynamicObjectsModel extends ChartBaseElement {
         const targetPos = paneList.getNodePosition(targetNode);
         paneList.removeAt(targetPos);
         this.modelIdToObjectMap.delete(id);
+        if (this.uniqueObjects[obj.paneId]) {
+            this.uniqueObjects[obj.paneId].delete((_a = obj.parentId) !== null && _a !== void 0 ? _a : obj.id);
+        }
         if (paneList.size() === 0) {
             delete this.objects[obj.paneId];
         }
@@ -198,6 +207,12 @@ export class DynamicObjectsModel extends ChartBaseElement {
     get objects() {
         return this._objects.getValue();
     }
+    /**
+     * Getter for the unique objects, unique object is an entity which is either dynamic object itself, or its parent
+     */
+    get uniqueObjects() {
+        return this._uniqueObjects;
+    }
     /**
      * Sets the objects
      * @param objects

package/dist/chart/model/data-series.model.d.ts

@@ -47,6 +47,7 @@ export declare class DataSeriesModel<D extends DataSeriesPoint = DataSeriesPoint
     extentComponent: YExtentComponent;
     id: string;
     htId: number;
+    parentId?: string | number | undefined;
     name: string;
     highlighted: boolean;
     yAxisLabelProvider: DataSeriesYAxisLabelsProvider;
@@ -71,7 +72,7 @@ export declare class DataSeriesModel<D extends DataSeriesPoint = DataSeriesPoint
     get visualPoints(): V[];
     get visualPoints2D(): V[][];
     set visualPoints(points: V[][] | V[]);
-    constructor(extentComponent: YExtentComponent, id: string, htId: number, _config?: AtLeastOne<DataSeriesConfig>);
+    constructor(extentComponent: YExtentComponent, id: string, htId: number, parentId?: string | number | undefined, _config?: AtLeastOne<DataSeriesConfig>);
     protected doActivate(): void;
     /**
      * Sets the data points and recalculates internal state

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

@@ -65,12 +65,13 @@ export class DataSeriesModel extends ChartBaseElement {
         this._visualPoints = create2DArray(points);
         this._visualPointsFlat = this._visualPoints.flat();
     }
-    constructor(extentComponent, id, htId, _config = cloneUnsafe(DEFAULT_DATA_SERIES_CONFIG)) {
+    constructor(extentComponent, id, htId, parentId, _config = cloneUnsafe(DEFAULT_DATA_SERIES_CONFIG)) {
         var _a;
         super();
         this.extentComponent = extentComponent;
         this.id = id;
         this.htId = htId;
+        this.parentId = parentId;
         this.name = '';
         this.highlighted = false;
         this._dataPoints = [];

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

@@ -7,7 +7,6 @@ import { Subject } from 'rxjs';
 import { ChartConfigComponentsOffsets, ChartScale, FullChartConfig } from '../chart.config';
 import { CanvasAnimation } from '../animation/canvas-animation';
 import { AutoScaleViewportSubModel } from './scaling/auto-scale.model';
-import { ZoomXToZoomYRatio } from './scaling/lock-ratio.model';
 import { Price, Unit, ViewportModel, ViewportModelState, Zoom } from './scaling/viewport.model';
 import { BoundsProvider } from './bounds.model';
 export interface HighLowWithIndex {
@@ -46,7 +45,6 @@ export declare class ScaleModel extends ViewportModel {
     scaleInversedSubject: Subject<boolean>;
     beforeStartAnimationSubject: Subject<void>;
     autoScaleModel: AutoScaleViewportSubModel;
-    zoomXYRatio: ZoomXToZoomYRatio;
     zoomReached: ZoomReached;
     readonly state: ChartScale;
     history: ScaleHistoryItem[];
@@ -101,6 +99,7 @@ export declare class ScaleModel extends ViewportModel {
      */
     setXScale(xStart: Unit, xEnd: Unit, forceNoAnimation?: boolean): void;
     setYScale(yStart: Unit, yEnd: Unit, fire?: boolean): void;
+    private setLockedYScale;
     /**
      * Moves both xStart and xEnd without changing the viewport width (zoom).
      * Works without animation.
@@ -165,10 +164,6 @@ export declare class ScaleModel extends ViewportModel {
      * @param value - If true, the price-to-bar ratio will be locked. If false, it will not be locked.
      */
     setLockPriceToBarRatio(value?: boolean): void;
-    /**
-     * Recalculates the zoom X/Y ratio based on the current zoom levels.
-     */
-    recalculateZoomXYRatio(): void;
 }
 /**
  * The SyncedByXScaleModel class extends the ScaleModel class and adds support for synchronization with other ScaleModel instance, so both instances maintain the same X-axis bounds.

package/dist/chart/model/scale.model.js

@@ -7,7 +7,7 @@ import { Subject } from 'rxjs';
 import { startViewportModelAnimation } from '../animation/viewport-model-animation';
 import { cloneUnsafe } from '../utils/object.utils';
 import { AutoScaleViewportSubModel } from './scaling/auto-scale.model';
-import { changeXToKeepRatio, changeYToKeepRatio, ratioFromZoomXY } from './scaling/lock-ratio.model';
+import { changeXToKeepRatio, changeYToKeepRatio } from './scaling/lock-ratio.model';
 import { moveXStart, moveYStart } from './scaling/move-chart.functions';
 import { ViewportModel, calculateZoom, compareStates, } from './scaling/viewport.model';
 import { zoomXToEndViewportCalculator, zoomXToPercentViewportCalculator } from './scaling/x-zooming.functions';
@@ -36,7 +36,6 @@ export class ScaleModel extends ViewportModel {
         this.scaleInversedSubject = new Subject();
         // y-axis component needs this subject in order to halt prev animation if axis type is percent
         this.beforeStartAnimationSubject = new Subject();
-        this.zoomXYRatio = 0;
         this.zoomReached = { min: false, max: false };
         // TODO rework, make a new history based on units
         this.history = [];
@@ -133,7 +132,7 @@ export class ScaleModel extends ViewportModel {
             return;
         }
         if (this.state.lockPriceToBarRatio) {
-            changeYToKeepRatio(constrainedState, this.zoomXYRatio);
+            changeYToKeepRatio(initialStateCopy, constrainedState);
         }
         if (this.state.auto) {
             this.autoScaleModel.doAutoYScale(constrainedState);
@@ -181,7 +180,7 @@ export class ScaleModel extends ViewportModel {
             return;
         }
         if (this.state.lockPriceToBarRatio) {
-            changeYToKeepRatio(constrainedState, this.zoomXYRatio);
+            changeYToKeepRatio(initialState, constrainedState);
         }
         if (this.state.auto) {
             this.autoScaleModel.doAutoYScale(constrainedState);
@@ -199,21 +198,30 @@ export class ScaleModel extends ViewportModel {
         if (initialState.yStart === yStart && initialState.yEnd === yEnd && initialState.zoomY > 0) {
             return;
         }
+        if (this.state.lockPriceToBarRatio) {
+            this.setLockedYScale(yStart, yEnd, fire, initialState);
+            return;
+        }
         super.setYScale(yStart, yEnd, fire);
         const state = this.export();
         const constrainedState = this.scalePostProcessor(initialState, state);
-        if (this.state.lockPriceToBarRatio) {
-            changeXToKeepRatio(constrainedState, this.zoomXYRatio);
-            this.setXScale(constrainedState.xStart, constrainedState.xEnd);
-            // TODO: rewrite logic for applying constraints to consider both axes, now constraints on Y may not work correctly
-            return;
+        if (this.state.auto) {
+            this.autoScaleModel.doAutoYScale(constrainedState);
         }
-        else {
-            if (this.state.auto) {
-                this.autoScaleModel.doAutoYScale(constrainedState);
-            }
-            this.apply(constrainedState);
+        this.apply(constrainedState);
+    }
+    setLockedYScale(yStart, yEnd, fire = false, initialState) {
+        const zoomIn = yEnd < initialState.yEnd;
+        if ((this.zoomReached.min && zoomIn === false) || (this.zoomReached.max && zoomIn === true)) {
+            return;
         }
+        super.setYScale(yStart, yEnd, fire);
+        const state = this.export();
+        const constrainedState = this.scalePostProcessor(initialState, state);
+        changeXToKeepRatio(initialState, constrainedState);
+        this.zoomReached = this.calculateZoomReached(constrainedState.zoomX, zoomIn);
+        this.apply(constrainedState);
+        this.fireChanged();
     }
     /**
      * Moves both xStart and xEnd without changing the viewport width (zoom).
@@ -342,17 +350,8 @@ export class ScaleModel extends ViewportModel {
             this.state.lockPriceToBarRatio = false;
             return;
         }
-        if (value) {
-            this.recalculateZoomXYRatio();
-        }
         this.state.lockPriceToBarRatio = value;
     }
-    /**
-     * Recalculates the zoom X/Y ratio based on the current zoom levels.
-     */
-    recalculateZoomXYRatio() {
-        this.zoomXYRatio = ratioFromZoomXY(this.zoomX, this.zoomY);
-    }
 }
 /**
  * The SyncedByXScaleModel class extends the ScaleModel class and adds support for synchronization with other ScaleModel instance, so both instances maintain the same X-axis bounds.

package/dist/chart/model/scaling/lock-ratio.model.d.ts

@@ -10,13 +10,13 @@ export declare const zoomXToZoomY: (zoomX: Zoom, ratio: ZoomXToZoomYRatio) => Zo
 export declare const zoomYToZoomX: (zoomY: Zoom, ratio: ZoomXToZoomYRatio) => Zoom;
 /**
  * Locks the zoomY with zoomX and zooms y-scale depending on x-scale.
- * @param state
- * @param zoomXYRatio
+ * @param prevState
+ * @param newState
  */
-export declare const changeYToKeepRatio: (state: ViewportModelState, zoomXYRatio: ZoomXToZoomYRatio) => void;
+export declare const changeYToKeepRatio: (prevState: ViewportModelState, newState: ViewportModelState) => void;
 /**
  *  Locks the zoomY with zoomX and zooms x-scale depending on y-scale.
- * @param state
- * @param zoomXYRatio
+ * @param prevState
+ * @param newState
  */
-export declare const changeXToKeepRatio: (state: ViewportModelState, zoomXYRatio: ZoomXToZoomYRatio) => void;
+export declare const changeXToKeepRatio: (prevState: ViewportModelState, newState: ViewportModelState) => void;

package/dist/chart/model/scaling/lock-ratio.model.js

@@ -8,30 +8,36 @@ export const zoomXToZoomY = (zoomX, ratio) => zoomX / ratio;
 export const zoomYToZoomX = (zoomY, ratio) => zoomY * ratio;
 /**
  * Locks the zoomY with zoomX and zooms y-scale depending on x-scale.
- * @param state
- * @param zoomXYRatio
+ * @param prevState
+ * @param newState
  */
-export const changeYToKeepRatio = (state, zoomXYRatio) => {
-    const prevZoomY = state.zoomY;
-    state.zoomY = zoomXToZoomY(state.zoomX, zoomXYRatio);
-    const zoomYMult = state.zoomY / prevZoomY;
-    const lastYHeight = state.yEnd - state.yStart;
-    const newYHeight = lastYHeight * zoomYMult;
-    const delta = newYHeight - lastYHeight;
-    state.yEnd = state.yEnd + delta / 2;
-    state.yStart = state.yStart - delta / 2;
+export const changeYToKeepRatio = (prevState, newState) => {
+    const prevZoomX = prevState.zoomX;
+    const prevZoomY = prevState.zoomY;
+    const prevZoomXY = ratioFromZoomXY(prevZoomX, prevZoomY);
+    const prevYHeight = prevState.yEnd - prevState.yStart;
+    // recalculate zoomY
+    newState.zoomY = zoomXToZoomY(newState.zoomX, prevZoomXY);
+    const zoomYMult = newState.zoomY / prevZoomY;
+    const newYHeight = prevYHeight * zoomYMult;
+    const delta = newYHeight - prevYHeight;
+    newState.yEnd = newState.yEnd + delta / 2;
+    newState.yStart = newState.yStart - delta / 2;
 };
 /**
  *  Locks the zoomY with zoomX and zooms x-scale depending on y-scale.
- * @param state
- * @param zoomXYRatio
+ * @param prevState
+ * @param newState
  */
-export const changeXToKeepRatio = (state, zoomXYRatio) => {
-    const prevZoomX = state.zoomX;
-    state.zoomX = zoomYToZoomX(state.zoomY, zoomXYRatio);
-    const zoomXMult = state.zoomX / prevZoomX;
-    const lastXWidth = state.xEnd - state.xStart;
-    const newXWidth = lastXWidth * zoomXMult;
-    const delta = newXWidth - lastXWidth;
-    state.xStart = state.xStart - delta;
+export const changeXToKeepRatio = (prevState, newState) => {
+    const prevZoomX = prevState.zoomX;
+    const prevZoomY = prevState.zoomY;
+    const prevZoomXY = ratioFromZoomXY(prevZoomX, prevZoomY);
+    const prevXWidth = prevState.xEnd - prevState.xStart;
+    // recalculate zoomX
+    newState.zoomX = zoomYToZoomX(newState.zoomY, prevZoomXY);
+    const zoomXMult = newState.zoomX / prevZoomX;
+    const newXWidth = prevXWidth * zoomXMult;
+    const delta = newXWidth - prevXWidth;
+    newState.xStart = newState.xStart - delta;
 };

package/dist/chart/model/scaling/viewport.model.js

@@ -287,7 +287,12 @@ export class ViewportModel extends ChartBaseElement {
      * @returns {boolean} - Returns true if the viewport is valid, false otherwise.
      */
     isViewportValid() {
-        return this.xStart !== this.xEnd && this.yStart !== this.yEnd && isFinite(this.yStart) && isFinite(this.yEnd) && this.zoomX > 0 && this.zoomY > 0;
+        return (this.xStart !== this.xEnd &&
+            this.yStart !== this.yEnd &&
+            isFinite(this.yStart) &&
+            isFinite(this.yEnd) &&
+            this.zoomX > 0 &&
+            this.zoomY > 0);
     }
 }
 export const compareStates = (a, b) => !keys(a).some(k => a[k] !== b[k]);