@devexperts/dxcharts-lite 2.4.2 → 2.4.4

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) {
+    constructor(scale, canvasInputListener, canvasBoundsContainer, chartPanComponent, chartModel, hitTestCanvasModel) {
         super();
         this.scale = scale;
         this.canvasInputListener = canvasInputListener;
         this.canvasBoundsContainer = canvasBoundsContainer;
         this.chartPanComponent = chartPanComponent;
         this.chartModel = chartModel;
+        this.hitTestCanvasModel = hitTestCanvasModel;
         this.lastXStart = 0;
         this.lastXWidth = 0;
         this.lastXPxWidth = 0;
@@ -26,6 +27,8 @@ export class XAxisScaleHandler extends ChartBaseElement {
             this.lastXWidth = this.scale.xEnd - this.scale.xStart;
             const bounds = this.canvasBoundsContainer.getBounds(CanvasElement.X_AXIS);
             this.lastXPxWidth = bounds.width - this.canvasInputListener.currentPoint.x;
+            // Stop redrawing hit test
+            this.hitTestCanvasModel.hitTestDrawersPredicateSubject.next(false);
         };
         this.onXDragTick = (dragInfo) => {
             const { delta: absoluteXDelta } = dragInfo;
@@ -39,9 +42,14 @@ export class XAxisScaleHandler extends ChartBaseElement {
             const newXStart = this.lastXStart + (this.lastXWidth - newWidth);
             this.scale.setXScale(newXStart, this.scale.xEnd);
         };
+        this.onXDragEnd = () => {
+            // Continue redrawing hit test
+            this.hitTestCanvasModel.hitTestDrawersPredicateSubject.next(true);
+        };
         const dragNDropXComponent = new DragNDropXComponent(this.canvasBoundsContainer.getBoundsHitTest(CanvasElement.X_AXIS), {
             onDragStart: this.onXDragStart,
             onDragTick: this.onXDragTick,
+            onDragEnd: this.onXDragEnd,
         }, this.canvasInputListener, this.chartPanComponent, {
             disableChartPanning: false,
         });

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

@@ -22,6 +22,7 @@ import { XAxisLabelsGenerator } from './x-axis-labels.generator';
 import { XAxisLabelsModel, XAxisLabelsProvider } from './x-axis-labels.model';
 import { XAxisScaleHandler } from './x-axis-scale.handler';
 import { XAxisTimeLabelsDrawer } from './x-axis-time-labels.drawer';
+import { HitTestCanvasModel } from '../../model/hit-test-canvas.model';
 /**
  * X-axis component, contains all x-axis calculation and rendering logic.
  */
@@ -38,7 +39,7 @@ export declare class XAxisComponent extends ChartBaseElement {
     xAxisLabelsGenerator: XAxisLabelsGenerator;
     readonly xAxisLabelsModel: XAxisLabelsModel;
     xAxisScaleHandler: XAxisScaleHandler;
-    constructor(eventBus: EventBus, config: FullChartConfig, canvasModel: CanvasModel, chartComponent: ChartComponent, scale: ScaleModel, canvasBoundsContainer: CanvasBoundsContainer, canvasInputListener: CanvasInputListenerComponent, chartResizeHandler: ChartResizeHandler, drawingManager: DrawingManager, timeZoneModel: TimeZoneModel, chartPanComponent: ChartPanComponent, cursorHandler: CursorHandler);
+    constructor(eventBus: EventBus, config: FullChartConfig, canvasModel: CanvasModel, chartComponent: ChartComponent, scale: ScaleModel, canvasBoundsContainer: CanvasBoundsContainer, canvasInputListener: CanvasInputListenerComponent, chartResizeHandler: ChartResizeHandler, drawingManager: DrawingManager, timeZoneModel: TimeZoneModel, chartPanComponent: ChartPanComponent, cursorHandler: CursorHandler, hitTestCanvasModel: HitTestCanvasModel);
     /**
      * This method is used to activate the chart and update the labels if there is a new data set or equivolume type.
      * It subscribes to the chart type change, candles set subject, candles updated subject, and time zone change to generate new labels.

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

@@ -20,7 +20,7 @@ import { availableBarTypes } from '../../chart.config';
  * X-axis component, contains all x-axis calculation and rendering logic.
  */
 export class XAxisComponent extends ChartBaseElement {
-    constructor(eventBus, config, canvasModel, chartComponent, scale, canvasBoundsContainer, canvasInputListener, chartResizeHandler, drawingManager, timeZoneModel, chartPanComponent, cursorHandler) {
+    constructor(eventBus, config, canvasModel, chartComponent, scale, canvasBoundsContainer, canvasInputListener, chartResizeHandler, drawingManager, timeZoneModel, chartPanComponent, cursorHandler, hitTestCanvasModel) {
         super();
         this.eventBus = eventBus;
         this.config = config;
@@ -38,7 +38,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);
+        this.xAxisScaleHandler = new XAxisScaleHandler(scale, canvasInputListener, canvasBoundsContainer, chartPanComponent, this.chartComponent.chartModel, hitTestCanvasModel);
         this.addChildEntity(this.xAxisScaleHandler);
         cursorHandler.setCursorForCanvasEl(CanvasElement.X_AXIS, config.components.xAxis.cursor);
     }

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

@@ -61,7 +61,6 @@ export declare function drawRectLabel(ctx: CanvasRenderingContext2D, bounds: Bou
  * @param yAxisState
  * @param yAxisColors
  * @param checkBoundaries
- * @param backgroundCtx
  */
 export declare function drawPlainLabel(ctx: CanvasRenderingContext2D, bounds: Bounds, text: string, centralY: number, config: YAxisLabelDrawConfig, yAxisState: YAxisConfig, yAxisColors: FullChartColors['yAxis'], checkBoundaries?: boolean): void;
 /**

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

@@ -117,7 +117,6 @@ export function drawRectLabel(ctx, bounds, text, centralY, config, yAxisState, y
  * @param yAxisState
  * @param yAxisColors
  * @param checkBoundaries
- * @param backgroundCtx
  */
 export function drawPlainLabel(ctx, bounds, text, centralY, config, yAxisState, yAxisColors, checkBoundaries = true) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;

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

@@ -12,6 +12,7 @@ import { CanvasInputListenerComponent } from '../../inputlisteners/canvas-input-
 import { Pixel, Unit } from '../../model/scaling/viewport.model';
 import { ChartPanComponent } from '../pan/chart-pan.component';
 import { ScaleModel } from '../../model/scale.model';
+import { HitTestCanvasModel } from '../../model/hit-test-canvas.model';
 /**
  * Handles the mouse drag on Y axis - to zoom the viewport vertically.
  * @doc-tags scaling,zoom,viewport
@@ -24,12 +25,13 @@ export declare class YAxisScaleHandler extends ChartBaseElement {
     private bounds;
     private hitTest;
     private autoScaleCallback;
+    private hitTestCanvasModel;
     yAxisDragEndSubject: Subject<void>;
     lastYStart: Unit;
     lastYEnd: Unit;
     lastYHeight: Unit;
     lastYPxHeight: Pixel;
-    constructor(bus: EventBus, config: YAxisConfig, panning: ChartPanComponent, scale: ScaleModel, canvasInputListener: CanvasInputListenerComponent, bounds: CanvasBoundsContainer, hitTest: HitBoundsTest, autoScaleCallback: (auto: boolean) => void);
+    constructor(bus: EventBus, config: YAxisConfig, panning: ChartPanComponent, scale: ScaleModel, canvasInputListener: CanvasInputListenerComponent, bounds: CanvasBoundsContainer, hitTest: HitBoundsTest, autoScaleCallback: (auto: boolean) => void, hitTestCanvasModel: HitTestCanvasModel);
     protected doActivate(): void;
     private onYDragStart;
     private onYDragTick;

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

@@ -14,7 +14,7 @@ const FULL_Y_HEIGHT_ZOOM_FACTOR = 10;
  * @doc-tags scaling,zoom,viewport
  */
 export class YAxisScaleHandler extends ChartBaseElement {
-    constructor(bus, config, panning, scale, canvasInputListener, bounds, hitTest, autoScaleCallback) {
+    constructor(bus, config, panning, scale, canvasInputListener, bounds, hitTest, autoScaleCallback, hitTestCanvasModel) {
         super();
         this.bus = bus;
         this.config = config;
@@ -23,6 +23,7 @@ export class YAxisScaleHandler extends ChartBaseElement {
         this.bounds = bounds;
         this.hitTest = hitTest;
         this.autoScaleCallback = autoScaleCallback;
+        this.hitTestCanvasModel = hitTestCanvasModel;
         this.yAxisDragEndSubject = new Subject();
         this.lastYStart = 0;
         this.lastYEnd = 0;
@@ -35,6 +36,8 @@ export class YAxisScaleHandler extends ChartBaseElement {
             this.lastYEnd = this.scale.yEnd;
             this.lastYHeight = this.scale.yEnd - this.scale.yStart;
             this.lastYPxHeight = this.bounds.getBounds(CanvasElement.Y_AXIS).height;
+            // Stop redrawing hit test
+            this.hitTestCanvasModel.hitTestDrawersPredicateSubject.next(false);
         };
         this.onYDragTick = (dragInfo) => {
             const { delta: absoluteYDelta } = dragInfo;
@@ -52,14 +55,16 @@ export class YAxisScaleHandler extends ChartBaseElement {
             const delta = (newYHeight - this.lastYHeight) / 2;
             const newYStart = this.lastYStart - delta;
             const newYEnd = this.lastYEnd + delta;
-            this.autoScaleCallback(false);
             if (this.lastYStart !== newYStart || this.lastYEnd !== newYEnd) {
                 this.scale.setYScale(newYStart, newYEnd);
+                this.autoScaleCallback(false);
                 this.bus.fireDraw();
             }
         };
         this.onYDragEnd = () => {
             this.yAxisDragEndSubject.next();
+            // Continue redrawing hit test
+            this.hitTestCanvasModel.hitTestDrawersPredicateSubject.next(true);
         };
         // drag to Y-scale and double click to auto scale
         if (config.customScale) {

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

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

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

@@ -8,7 +8,7 @@ import { CanvasElement } from '../../canvas/canvas-bounds-container';
 import { ChartBaseElement } from '../../model/chart-base-element';
 import { cloneUnsafe } from '../../utils/object.utils';
 import { uuid } from '../../utils/uuid.utils';
-import { resolveColorForArea, resolveColorForBar, resolveColorForBaseLine, resolveColorForCandle, resolveColorForHistogram, resolveColorForLine, resolveColorForScatterPlot, resolveColorForTrendAndHollow, resolveDefaultColorForLabel } from './label-color.functions';
+import { resolveColorForArea, resolveColorForBar, resolveColorForBaseLine, resolveColorForCandle, resolveColorForHistogram, resolveColorForLine, resolveColorForScatterPlot, resolveColorForTrendAndHollow, resolveDefaultColorForLabel, } from './label-color.functions';
 import { LabelsGroups } from './price_labels/y-axis-labels.model';
 import { YAxisScaleHandler } from './y-axis-scale.handler';
 import { YAxisModel } from './y-axis.model';
@@ -16,7 +16,7 @@ import { YAxisModel } from './y-axis.model';
  * Y axis component. Contains all Y axis related logic.
  */
 export class YAxisComponent extends ChartBaseElement {
-    constructor(eventBus, config, canvasModel, scale, canvasInputListeners, canvasBoundsContainer, chartPanComponent, cursors, valueFormatter, dataSeriesProvider, paneUUID, extentIdx) {
+    constructor(eventBus, config, canvasModel, scale, canvasInputListeners, canvasBoundsContainer, chartPanComponent, cursors, valueFormatter, dataSeriesProvider, paneUUID, extentIdx, hitTestCanvasModel) {
         super();
         this.eventBus = eventBus;
         this.config = config;
@@ -30,7 +30,7 @@ export class YAxisComponent extends ChartBaseElement {
         this.axisTypeSetSubject = new Subject();
         this.state = cloneUnsafe(config.components.yAxis);
         //#region init yAxisScaleHandler
-        this.yAxisScaleHandler = new YAxisScaleHandler(eventBus, this.state, chartPanComponent, scale, canvasInputListeners, canvasBoundsContainer, canvasBoundsContainer.getBoundsHitTest(CanvasElement.PANE_UUID_Y_AXIS(paneUUID, extentIdx)), auto => scale.autoScale(auto));
+        this.yAxisScaleHandler = new YAxisScaleHandler(eventBus, this.state, chartPanComponent, scale, canvasInputListeners, canvasBoundsContainer, canvasBoundsContainer.getBoundsHitTest(CanvasElement.PANE_UUID_Y_AXIS(paneUUID, extentIdx)), auto => scale.autoScale(auto), hitTestCanvasModel);
         this.addChildEntity(this.yAxisScaleHandler);
         //#endregion
         this.model = new YAxisModel(this.paneUUID, eventBus, this.state, canvasBoundsContainer, canvasModel, scale, valueFormatter, dataSeriesProvider, extentIdx);

package/dist/chart/drawers/chart-background.drawer.d.ts

@@ -9,8 +9,8 @@ import { FullChartConfig } from '../chart.config';
 export declare class BackgroundDrawer implements Drawer {
     private canvasModel;
     private config;
-    private backgroundDrawPredicate;
-    constructor(canvasModel: CanvasModel, config: FullChartConfig, backgroundDrawPredicate?: () => boolean);
+    private drawPredicate;
+    constructor(canvasModel: CanvasModel, config: FullChartConfig, drawPredicate?: () => boolean);
     private prevState;
     draw(): void;
     getCanvasIds(): Array<string>;

package/dist/chart/drawers/chart-background.drawer.js

@@ -7,15 +7,15 @@ import { getDPR } from '../utils/device/device-pixel-ratio.utils';
 import { floor } from '../utils/math.utils';
 import { deepEqual } from '../utils/object.utils';
 export class BackgroundDrawer {
-    constructor(canvasModel, config, backgroundDrawPredicate = () => true) {
+    constructor(canvasModel, config, drawPredicate = () => true) {
         this.canvasModel = canvasModel;
         this.config = config;
-        this.backgroundDrawPredicate = backgroundDrawPredicate;
+        this.drawPredicate = drawPredicate;
         // we need to save previous state to avoid unnecessary redraws
         this.prevState = {};
     }
     draw() {
-        if (this.backgroundDrawPredicate() || !deepEqual(this.config.colors.chartAreaTheme, this.prevState)) {
+        if (this.drawPredicate() || !deepEqual(this.config.colors.chartAreaTheme, this.prevState)) {
             this.canvasModel.clear();
             const ctx = this.canvasModel.ctx;
             if (this.config.colors.chartAreaTheme.backgroundMode === 'gradient') {

package/dist/chart/drawers/ht-data-series.drawer.d.ts

@@ -15,7 +15,8 @@ export declare class HTDataSeriesDrawer implements Drawer {
     private readonly seriesDrawers;
     private canvasModel;
     private paneManager;
-    constructor(seriesDrawers: Record<string, SeriesDrawer>, canvasModel: HitTestCanvasModel, paneManager: PaneManager);
+    private drawPredicate;
+    constructor(seriesDrawers: Record<string, SeriesDrawer>, canvasModel: HitTestCanvasModel, paneManager: PaneManager, drawPredicate?: () => boolean);
     draw(): void;
     drawSeries(ctx: CanvasRenderingContext2D, series: DataSeriesModel): void;
     getCanvasIds(): Array<string>;

package/dist/chart/drawers/ht-data-series.drawer.js

@@ -8,19 +8,22 @@ import { clipToBounds } from '../utils/canvas/canvas-drawing-functions.utils';
  * HitTest Chart drawer. It's used to draw hit test for chart types on the hit-test canvas.
  */
 export class HTDataSeriesDrawer {
-    constructor(seriesDrawers, canvasModel, paneManager) {
+    constructor(seriesDrawers, canvasModel, paneManager, drawPredicate = () => true) {
         this.seriesDrawers = seriesDrawers;
         this.canvasModel = canvasModel;
         this.paneManager = paneManager;
+        this.drawPredicate = drawPredicate;
     }
     draw() {
-        const ctx = this.canvasModel.ctx;
-        this.paneManager.yExtents.forEach(comp => {
-            ctx.save();
-            clipToBounds(ctx, comp.getBounds());
-            comp.dataSeries.forEach(series => this.drawSeries(ctx, series));
-            ctx.restore();
-        });
+        if (this.drawPredicate()) {
+            const ctx = this.canvasModel.ctx;
+            this.paneManager.yExtents.forEach(comp => {
+                ctx.save();
+                clipToBounds(ctx, comp.getBounds());
+                comp.dataSeries.forEach(series => this.drawSeries(ctx, series));
+                ctx.restore();
+            });
+        }
     }
     drawSeries(ctx, series) {
         if (series.config.visible) {

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

@@ -8,6 +8,9 @@ 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';
+/**
+ * [x, y, uuid - Unique identifier for the subscription]
+ */
 export type CrossEvent = [number, number, string];
 export declare class CrossEventProducerComponent extends ChartBaseElement {
     private canvasInputListener;

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

@@ -74,23 +74,27 @@ export class HoverProducerComponent extends ChartBaseElement {
         }));
         this.addRxSubscription(this.scale.xChanged.subscribe(() => this.fireLastCross()));
         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, '']);
+                this.createAndFireHover([x, y, paneId]);
             }
         }));
         // 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.longTouchActivatedSubject.next(true);
             const x = event.touches[0].clientX - this.canvasBoundsContainer.canvasOnPageLocation.x;
             const y = event.touches[0].clientY - this.canvasBoundsContainer.canvasOnPageLocation.y;
-            this.createAndFireHover([x, y, '']);
-            this.crossEventProducer.crossSubject.next([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.addRxSubscription(this.canvasInputListener.observeTouchEndDocument().subscribe(() => {
             this.paneManager.chartPanComponent.activateChartPanHandlers();

package/dist/chart/model/hit-test-canvas.model.d.ts

@@ -3,7 +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 { Observable } from 'rxjs';
+import { Observable, BehaviorSubject } from 'rxjs';
 import { CanvasBoundsContainer } from '../canvas/canvas-bounds-container';
 import { CursorType, FullChartConfig } from '../chart.config';
 import { CanvasModel } from './canvas.model';
@@ -28,6 +28,7 @@ export declare class HitTestCanvasModel extends CanvasModel {
     private touchStartSubject;
     private dblClickSubject;
     private rightClickSubject;
+    hitTestDrawersPredicateSubject: BehaviorSubject<boolean>;
     constructor(eventBus: EventBus, canvas: HTMLCanvasElement, canvasInputListener: CanvasInputListenerComponent, canvasBoundsContainer: CanvasBoundsContainer, drawingManager: DrawingManager, chartConfig: FullChartConfig, canvasModels: CanvasModel[], resizer?: HTMLElement);
     /**
      * Enables HitTestCanvasModel events listeners.

package/dist/chart/model/hit-test-canvas.model.js

@@ -3,7 +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 { merge, Subject, animationFrameScheduler } from 'rxjs';
+import { merge, Subject, animationFrameScheduler, BehaviorSubject } from 'rxjs';
 import { map, throttleTime } from 'rxjs/operators';
 import { CanvasElement } from '../canvas/canvas-bounds-container';
 import { CanvasModel, initCanvasWithConfig } from './canvas.model';
@@ -26,6 +26,7 @@ export class HitTestCanvasModel extends CanvasModel {
     constructor(eventBus, canvas, canvasInputListener, canvasBoundsContainer, drawingManager, chartConfig, canvasModels, resizer) {
         super(eventBus, canvas, drawingManager, canvasModels, resizer, {
             willReadFrequently: true,
+            // set to false to visually see hit test drawers objects (the canvas should also be visible)
             desynchronized: true,
         });
         this.canvasInputListener = canvasInputListener;
@@ -36,6 +37,8 @@ export class HitTestCanvasModel extends CanvasModel {
         this.touchStartSubject = new Subject();
         this.dblClickSubject = new Subject();
         this.rightClickSubject = new Subject();
+        // This predicate is used to detect whenever hit test should or shouldn't redraw hit test canvas image objects
+        this.hitTestDrawersPredicateSubject = new BehaviorSubject(true);
         this.curImgData = new Uint8ClampedArray(4);
         this.prevAnimationFrameId = -1;
         initCanvasWithConfig(this, chartConfig);

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

@@ -287,7 +287,7 @@ 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);
+        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]);