@devexperts/dxcharts-lite 2.7.28 → 2.7.30

package/dist/chart/bootstrap.js

@@ -161,7 +161,7 @@ export default class ChartBootstrap {
         this.canvasBoundsContainer.setMainCandleSeries(this.chartModel.mainCandleSeries);
         hitTestCanvasModel.addSubscriber(paneManager.hitTestController);
         // X-axis component
-        this.xAxisComponent = new XAxisComponent(eventBus, config, mainCanvasModel, chartComponent, scaleModel, canvasBoundsContainer, canvasInputListener, chartResizeHandler, this.drawingManager, timeZoneModel, chartPanComponent, this.cursorHandler, this.hitTestCanvasModel);
+        this.xAxisComponent = new XAxisComponent(eventBus, config, mainCanvasModel, chartComponent, scaleModel, canvasBoundsContainer, canvasInputListener, chartResizeHandler, this.drawingManager, timeZoneModel, chartPanComponent, this.cursorHandler, this.hitTestCanvasModel, this.mainPane.yAxis);
         this.chartComponents.push(this.xAxisComponent);
         this.userInputListenerComponents.push(this.xAxisComponent.xAxisScaleHandler);
         const mainCanvasClearDrawer = new ClearCanvasDrawer(mainCanvasModel);

package/dist/chart/components/chart/chart-area-pan.handler.d.ts

@@ -10,6 +10,7 @@ import EventBus from '../../events/event-bus';
 import { CanvasInputListenerComponent, Point } from '../../inputlisteners/canvas-input-listener.component';
 import { ChartBaseElement } from '../../model/chart-base-element';
 import { ScaleModel } from '../../model/scale.model';
+import { DragNDropXComponent } from '../dran-n-drop_helper/drag-n-drop-x.component';
 import { DragNDropYComponent } from '../dran-n-drop_helper/drag-n-drop-y.component';
 import { DragInfo } from '../dran-n-drop_helper/drag-n-drop.component';
 import { ChartPanComponent } from '../pan/chart-pan.component';
@@ -53,7 +54,12 @@ export declare class ChartAreaPanHandler extends ChartBaseElement {
     lastXStart: number;
     wheelThrottleTime: number;
     chartPanningOptions: ChartPanningOptions;
+    dragNDropXComponent: DragNDropXComponent;
     constructor(bus: EventBus, config: FullChartConfig, scale: ScaleModel, canvasInputListener: CanvasInputListenerComponent, canvasBoundsContainer: CanvasBoundsContainer, canvasAnimation: CanvasAnimation, chartPanComponent: ChartPanComponent, hitTestCanvasModel: HitTestCanvasModel);
+    /**
+     * Throttles chart-area horizontal drag to one animation frame when needed (percent Y-axis).
+     */
+    setChartAreaXDragThrottled(shouldThrottle: boolean): void;
     /**
      * It observes the wheel event on all panes of the canvas and throttles it to the specified time.
      * It then calculates the zoom sensitivity based on whether the event was triggered by a touchpad or not.

package/dist/chart/components/chart/chart-area-pan.handler.js

@@ -99,16 +99,22 @@ export class ChartAreaPanHandler extends ChartBaseElement {
         };
         const allPanesHitTest = this.canvasBoundsContainer.getBoundsHitTest(CanvasElement.ALL_PANES);
         //#region drag-n-drop logic
-        const dragNDropXComponent = new DragNDropXComponent(allPanesHitTest, {
+        this.dragNDropXComponent = new DragNDropXComponent(allPanesHitTest, {
             onDragStart: this.onXDragStart,
             onDragTick: this.onXDragTick,
             onDragEnd: this.onXDragEnd,
         }, this.canvasInputListener, this.chartPanComponent, {
             dragPredicate: () => this.chartPanningOptions.horizontal,
-        });
-        this.addChildEntity(dragNDropXComponent);
+        }, this.config.components.yAxis.type === 'percent');
+        this.addChildEntity(this.dragNDropXComponent);
         //#endregion
     }
+    /**
+     * Throttles chart-area horizontal drag to one animation frame when needed (percent Y-axis).
+     */
+    setChartAreaXDragThrottled(shouldThrottle) {
+        this.dragNDropXComponent.setShouldThrottle(shouldThrottle);
+    }
     /**
      * This method is used to activate the zoom functionality of the canvas. It extends the doActivate method of the parent class.
      * @protected

package/dist/chart/components/cross_tool/cross-tool.model.d.ts

@@ -38,6 +38,7 @@ export declare class CrossToolModel extends ChartBaseElement {
      * @returns {void}
      */
     setType(type: CrossToolType): void;
+    private shouldKeepXForMobileTouchCrosshair;
     /**
      * Method to activate the cross tool.
      * It subscribes to the hoverProducer's hover event and updates the crosstool.

package/dist/chart/components/cross_tool/cross-tool.model.js

@@ -35,6 +35,11 @@ export class CrossToolModel extends ChartBaseElement {
     setType(type) {
         this.config.type = type;
     }
+    shouldKeepXForMobileTouchCrosshair() {
+        return (isMobile() &&
+            this.hoverProducer.longTouchActivatedSubject.getValue() &&
+            this.crossEventProducer.crossSubject.getValue() !== null);
+    }
     /**
      * Method to activate the cross tool.
      * It subscribes to the hoverProducer's hover event and updates the crosstool.
@@ -100,7 +105,9 @@ export class CrossToolModel extends ChartBaseElement {
      */
     updateCrossTool(hover, magnetTarget = this.config.magnetTarget, discrete = this.config.discrete) {
         var _a;
-        const x = discrete ? this.chartModel.toX((_a = this.chartModel.candleFromX(hover.x, true).idx) !== null && _a !== void 0 ? _a : 0) : hover.x;
+        const x = discrete && !this.shouldKeepXForMobileTouchCrosshair()
+            ? this.chartModel.toX((_a = this.chartModel.candleFromX(hover.x, true).idx) !== null && _a !== void 0 ? _a : 0)
+            : hover.x;
         if (this.currentHover === null) {
             this.currentHover = { x, y: 0, time: hover.timeFormatted, paneId: hover.paneId };
         }

package/dist/chart/components/dran-n-drop_helper/drag-n-drop-x.component.d.ts

@@ -8,7 +8,12 @@ import { CanvasInputListenerComponent } from '../../inputlisteners/canvas-input-
 import { ChartPanComponent } from '../pan/chart-pan.component';
 import { DragComponentOptions, DragNDropComponent, DragNDropComponentCallbacks } from './drag-n-drop.component';
 export declare class DragNDropXComponent extends DragNDropComponent {
-    constructor(hitTest: HitBoundsTest, dragCallbacks: DragNDropComponentCallbacks, canvasInputListener: CanvasInputListenerComponent, chartPanComponent: ChartPanComponent, dragComponentOptions?: DragComponentOptions);
+    private shouldThrottleSubject;
+    constructor(hitTest: HitBoundsTest, dragCallbacks: DragNDropComponentCallbacks, canvasInputListener: CanvasInputListenerComponent, chartPanComponent: ChartPanComponent, dragComponentOptions?: DragComponentOptions, shouldThrottle?: boolean);
+    /**
+     * When true, X drag ticks are throttled to one animation frame (e.g. percent axis).
+     */
+    setShouldThrottle(value: boolean): void;
     /**
      * This method is used to activate the component and add the necessary subscriptions to the canvasInputListener.
      * It calls the super method doActivate() and then adds the following subscriptions:

package/dist/chart/components/dran-n-drop_helper/drag-n-drop-x.component.js

@@ -3,10 +3,25 @@
  * 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.
+ * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+import { animationFrameScheduler, BehaviorSubject, identity } from 'rxjs';
+import { distinctUntilChanged, switchMap, throttleTime } from 'rxjs/operators';
 import { defaultDragComponentOptions, DragNDropComponent, } from './drag-n-drop.component';
+import { ONE_FRAME_MS } from '../../utils/numeric-constants.utils';
 export class DragNDropXComponent extends DragNDropComponent {
-    constructor(hitTest, dragCallbacks, canvasInputListener, chartPanComponent, dragComponentOptions = defaultDragComponentOptions) {
+    constructor(hitTest, dragCallbacks, canvasInputListener, chartPanComponent, dragComponentOptions = defaultDragComponentOptions, shouldThrottle) {
         super(hitTest, dragCallbacks, canvasInputListener, chartPanComponent, dragComponentOptions);
+        this.shouldThrottleSubject = new BehaviorSubject(!!shouldThrottle);
+    }
+    /**
+     * When true, X drag ticks are throttled to one animation frame (e.g. percent axis).
+     */
+    setShouldThrottle(value) {
+        this.shouldThrottleSubject.next(value);
     }
     /**
      * This method is used to activate the component and add the necessary subscriptions to the canvasInputListener.
@@ -17,9 +32,17 @@ export class DragNDropXComponent extends DragNDropComponent {
      * @returns {void}
      */
     doActivate() {
+        const dragThrottleTime = ONE_FRAME_MS;
         super.doActivate();
         this.addRxSubscription(this.canvasInputListener.observeXDragStart(this.hitTest).subscribe(this.onDragStart));
-        this.addRxSubscription(this.canvasInputListener.observeXDrag().subscribe(this.onDragTick));
+        this.addRxSubscription(this.shouldThrottleSubject
+            .pipe(distinctUntilChanged(), switchMap(shouldThrottle => this.canvasInputListener.observeXDrag().pipe(shouldThrottle
+            ? throttleTime(dragThrottleTime, animationFrameScheduler, {
+                trailing: true,
+                leading: true,
+            })
+            : identity)))
+            .subscribe(this.onDragTick));
         this.addRxSubscription(this.canvasInputListener.observeXDragEnd().subscribe(this.onDragEnd));
     }
 }

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

@@ -4,8 +4,8 @@
  * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 import { Subject } from 'rxjs';
-import { distinctUntilChanged } from 'rxjs/operators';
-import { areBoundsChanged, CanvasElement, } from '../../canvas/canvas-bounds-container';
+import { distinctUntilChanged, map, startWith } from 'rxjs/operators';
+import { areBoundsChanged, CHART_UUID, CanvasElement, } from '../../canvas/canvas-bounds-container';
 import { ChartBaseElement } from '../../model/chart-base-element';
 import { SyncedByXScaleModel } from '../../model/scale.model';
 import { firstOf, flatMap, lastOf } from '../../utils/array.utils';
@@ -80,6 +80,13 @@ export class PaneComponent extends ChartBaseElement {
             this.yExtentComponents.forEach(c => c.scale.recalculateZoomY());
             this.dynamicObjectsCanvasModel.fireDraw();
         }));
+        if (this.uuid === CHART_UUID) {
+            this.addRxSubscription(this.yAxis.axisTypeSetSubject
+                .pipe(startWith(this.yAxis.getAxisType()), distinctUntilChanged(), map((axisType) => axisType === 'percent'))
+                .subscribe(shouldThrottle => {
+                this.chartPanComponent.chartAreaPanHandler.setChartAreaXDragThrottled(shouldThrottle);
+            }));
+        }
     }
     toY(price) {
         var _a, _b;

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

@@ -9,6 +9,7 @@ import { CanvasInputListenerComponent } from '../../inputlisteners/canvas-input-
 import { ScaleModel } from '../../model/scale.model';
 import { Pixel, Unit } from '../../model/scaling/viewport.model';
 import { ChartModel } from '../chart/chart.model';
+import { DragNDropXComponent } from '../dran-n-drop_helper/drag-n-drop-x.component';
 import { ChartPanComponent } from '../pan/chart-pan.component';
 import { HitTestCanvasModel } from '../../model/hit-test-canvas.model';
 /**
@@ -30,7 +31,12 @@ export declare class XAxisScaleHandler extends ChartBaseElement {
     private dblClickCallback;
     private touches;
     private dblTapCallback;
+    dragNDropXComponent: DragNDropXComponent;
     constructor(scale: ScaleModel, canvasInputListener: CanvasInputListenerComponent, canvasBoundsContainer: CanvasBoundsContainer, chartPanComponent: ChartPanComponent, chartModel: ChartModel, hitTest: HitBoundsTest, hitTestCanvasModel: HitTestCanvasModel);
+    /**
+     * Throttles chart-area horizontal drag to one animation frame when needed (percent Y-axis).
+     */
+    setChartAreaXDragThrottled(shouldThrottle: boolean): void;
     /**
      * 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

@@ -85,14 +85,22 @@ export class XAxisScaleHandler extends ChartBaseElement {
         this.setDblClickCallback = (cb) => (this.dblClickCallback = cb);
         this.dblClickCallback = () => chartModel.doBasicScale();
         this.dblTapCallback = () => chartModel.doBasicScale();
-        const dragNDropXComponent = new DragNDropXComponent(hitTest, {
+        //#region drag-n-drop logic
+        this.dragNDropXComponent = new DragNDropXComponent(hitTest, {
             onDragStart: this.onXDragStart,
             onDragTick: this.onXDragTick,
             onDragEnd: this.onXDragEnd,
         }, this.canvasInputListener, this.chartPanComponent, {
             dragPredicate: () => chartPanComponent.chartAreaPanHandler.chartPanningOptions.horizontal,
         });
-        this.addChildEntity(dragNDropXComponent);
+        this.addChildEntity(this.dragNDropXComponent);
+        //#endregion
+    }
+    /**
+     * Throttles chart-area horizontal drag to one animation frame when needed (percent Y-axis).
+     */
+    setChartAreaXDragThrottled(shouldThrottle) {
+        this.dragNDropXComponent.setShouldThrottle(shouldThrottle);
     }
     /**
      * This method is used to activate the canvas input listener and add a subscription to it.

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

@@ -23,6 +23,7 @@ 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';
+import { YAxisComponent } from '../y_axis/y-axis.component';
 /**
  * X-axis component, contains all x-axis calculation and rendering logic.
  */
@@ -34,12 +35,13 @@ export declare class XAxisComponent extends ChartBaseElement {
     private scale;
     private chartResizeHandler;
     private timeZoneModel;
+    private yAxis;
     xAxisDrawer: XAxisTimeLabelsDrawer;
     xAxisLabelsDrawer: XAxisLabelsDrawer;
     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, hitTestCanvasModel: HitTestCanvasModel);
+    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, yAxis: YAxisComponent);
     /**
      * 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

@@ -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 { merge, animationFrameScheduler } from 'rxjs';
-import { distinctUntilChanged, map, throttleTime, filter } from 'rxjs/operators';
+import { distinctUntilChanged, map, throttleTime, filter, startWith } from 'rxjs/operators';
 import { CanvasElement } from '../../canvas/canvas-bounds-container';
 import { ChartBaseElement } from '../../model/chart-base-element';
 import { CompositeDrawer } from '../../drawers/composite.drawer';
@@ -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, hitTestCanvasModel) {
+    constructor(eventBus, config, canvasModel, chartComponent, scale, canvasBoundsContainer, canvasInputListener, chartResizeHandler, drawingManager, timeZoneModel, chartPanComponent, cursorHandler, hitTestCanvasModel, yAxis) {
         super();
         this.eventBus = eventBus;
         this.config = config;
@@ -29,6 +29,7 @@ export class XAxisComponent extends ChartBaseElement {
         this.scale = scale;
         this.chartResizeHandler = chartResizeHandler;
         this.timeZoneModel = timeZoneModel;
+        this.yAxis = yAxis;
         /* This function assigns a callback to be executed when a double-click event is detected.
          * It accepts one parameter `cb`, which is a callback function.
          * When a double-click event occurs, the specified callback function `cb` will be invoked.
@@ -91,6 +92,11 @@ export class XAxisComponent extends ChartBaseElement {
         this.addRxSubscription(this.chartComponent.chartModel.candlesUpdatedSubject
             .pipe(map(() => lastOf(this.chartComponent.chartModel.mainCandleSeries.visualPoints)), distinctUntilChanged((a, b) => { var _a, _b; return ((_a = a === null || a === void 0 ? void 0 : a.candle) === null || _a === void 0 ? void 0 : _a.id) === ((_b = b === null || b === void 0 ? void 0 : b.candle) === null || _b === void 0 ? void 0 : _b.id); }), filter(notEmpty))
             .subscribe(x => { var _a, _b; return (_b = (_a = this.xAxisLabelsGenerator) === null || _a === void 0 ? void 0 : _a.updateLastLabel) === null || _b === void 0 ? void 0 : _b.call(_a, x); }));
+        this.addRxSubscription(this.yAxis.axisTypeSetSubject
+            .pipe(startWith(this.yAxis.getAxisType()), distinctUntilChanged(), map((axisType) => axisType === 'percent'))
+            .subscribe(shouldThrottle => {
+            this.xAxisScaleHandler.setChartAreaXDragThrottled(shouldThrottle);
+        }));
     }
     /**
      * Returns the xAxisDrawer object.

package/dist/chart/components/y_axis/price_labels/price-label.drawer.js

@@ -66,7 +66,7 @@ export function drawLabel(ctx, yAxisDescriptionsCtx, backgroundCtx, bounds, pane
     }
     const lineY = (_e = visualLabel.lineY) !== null && _e !== void 0 ? _e : visualLabel.y;
     const _drawLine = () => showLine &&
-        avoidAntialiasing(ctx, () => drawLine(ctx, lineXStart, lineY, lineXEnd, lineY, 1, visualLabel.lineDash));
+        avoidAntialiasing(ctx, () => { var _a; return drawLine(ctx, lineXStart, lineY, lineXEnd, lineY, 1, (_a = visualLabel.lineDash) !== null && _a !== void 0 ? _a : [], visualLabel.lineCap); });
     const _drawLabel = () => drawLabel(ctx, bounds, replaceMinusSign(text), centralY, visualLabel, config, colors.yAxis, false);
     const drawLineLabel = () => {
         _drawLine();

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

@@ -166,9 +166,12 @@ export class FancyYAxisLabelsModel extends ChartBaseElement {
      * @returns {LabelGroup} - A new LabelGroup object with updated label coordinates.
      */
     updateLabelsCoordinates(labels, points) {
-        return Object.assign(Object.assign({}, labels), { labels: labels.labels.map((label, idx) => (Object.assign(Object.assign({}, label), { 
-                // save original y
-                lineY: label.y, y: points[idx] }))) });
+        return Object.assign(Object.assign({}, labels), { labels: labels.labels.map((label, idx) => {
+                var _a;
+                return (Object.assign(Object.assign({}, label), { 
+                    // Keep connector Y at the price level when the Y-axis price label box was shifted to avoid overlap
+                    lineY: (_a = label.lineY) !== null && _a !== void 0 ? _a : label.y, y: points[idx] }));
+            }) });
     }
     /**
      * Returns an Observable that emits a void value whenever the labels position is recalculated.

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

@@ -3,13 +3,14 @@
  * 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 { YAxisConfig, FullChartColors } from '../../chart.config';
+import { YAxisConfig, FullChartColors, YAxisLabelAppearanceType, YAxisLabelMode } from '../../chart.config';
 import { Bounds } from '../../model/bounds.model';
 export interface YAxisLabelDrawProps {
     ctx: CanvasRenderingContext2D;
     bounds: Bounds;
     text: string;
     centralY: number;
+    lineY?: number;
     config: YAxisLabelDrawConfig;
     subGroupId?: number;
 }
@@ -26,6 +27,12 @@ export interface YAxisLabelDrawConfig {
     paddingStart?: number;
     rounded?: boolean;
     lineDash?: Array<number>;
+    /** When set (e.g. `round` with short dash gaps), strokes render as dotted segments. */
+    lineCap?: CanvasLineCap;
+    /** Overrides chart-wide `components.yAxis.labels.settings.drawings.mode` for this label (e.g. drawings). */
+    yAxisLabelMode?: YAxisLabelMode;
+    /** Overrides chart-wide `components.yAxis.labels.settings.drawings.type` for this label (e.g. drawings). */
+    yAxisLabelType?: YAxisLabelAppearanceType;
 }
 export declare const DEFAULT_PRICE_LABEL_PADDING = 4;
 /**

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

@@ -8,7 +8,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 { getFontFromConfig } from '../../chart.config';
+import { getFontFromConfig, } from '../../chart.config';
 import { drawPriceLabel, drawRoundedRect } from '../../utils/canvas/canvas-drawing-functions.utils';
 import { calculateSymbolHeight, calculateTextWidth } from '../../utils/canvas/canvas-font-measure-tool.utils';
 import { getLabelTextColorByBackgroundColor } from '../../utils/canvas/canvas-text-functions.utils';

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

@@ -130,6 +130,10 @@ export declare class HoverProducerComponent extends ChartBaseElement {
      */
     fireLastCross(): void;
     setLongTouchCrosshairSuppressed(value: boolean): void;
+    /**
+     * Resets the current crosshair/touch state back to the default mobile idle state.
+     */
+    resetCrossTool(clearMobile?: boolean): void;
     /**
      * Registers a hover producer part with the given id.
      *

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

@@ -134,7 +134,7 @@ export class HoverProducerComponent extends ChartBaseElement {
             this.paneManager.chartPanComponent.setChartPanningOptions(false, false);
         }));
         this.addRxSubscription(this.canvasInputListener.observeTouchEndDocument().subscribe(event => {
-            var _a, _b;
+            var _a, _b, _c, _d, _e, _f, _g, _h;
             const { clientX, clientY } = event.changedTouches[0];
             const { fixed, temp } = this.crossEventProducer.crossToolTouchInfo;
             const x = clientX - this.canvasBoundsContainer.canvasOnPageLocation.x;
@@ -142,28 +142,32 @@ export class HoverProducerComponent extends ChartBaseElement {
             // 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;
-                this.crossEventProducer.crossToolTouchInfo.isSet = false;
+                this.resetCrossTool();
                 return;
             }
             if (!this.crossEventProducer.crossToolTouchInfo.isSet) {
                 this.crossEventProducer.crossToolTouchInfo.isSet = true;
-                // previous fixed goes to temporary to prevent crosstool jumps outside the candle on candle update tick
+                const crossToolHover = this.crossEventProducer.crossToolHover;
+                const anchorX = (_a = crossToolHover === null || crossToolHover === void 0 ? void 0 : crossToolHover.x) !== null && _a !== void 0 ? _a : x;
+                const anchorY = (_b = crossToolHover === null || crossToolHover === void 0 ? void 0 : crossToolHover.y) !== null && _b !== void 0 ? _b : y;
                 this.crossEventProducer.crossToolTouchInfo.temp = {
-                    x: this.crossEventProducer.crossToolTouchInfo.fixed.x,
-                    y: this.crossEventProducer.crossToolTouchInfo.fixed.y,
+                    x: anchorX,
+                    y: anchorY,
                 };
                 this.crossEventProducer.crossToolTouchInfo.fixed = {
-                    x,
-                    y,
+                    x: anchorX,
+                    y: anchorY,
                 };
-                this.crossEventProducer.crossToolTouchInfo.isSet = true;
+                const paneId = (_e = (_c = crossToolHover === null || crossToolHover === void 0 ? void 0 : crossToolHover.paneId) !== null && _c !== void 0 ? _c : (_d = this.paneManager.getPaneIfHit({ x: anchorX, y: anchorY })) === null || _d === void 0 ? void 0 : _d.uuid) !== null && _e !== void 0 ? _e : '';
+                const hover = crossToolHover !== null && crossToolHover !== void 0 ? crossToolHover : this.hover;
+                if (!hover) {
+                    return;
+                }
+                this.crossEventProducer.crossToolHover = Object.assign(Object.assign({}, hover), { x: anchorX, y: anchorY, paneId });
+                this.crossEventProducer.crossSubject.next([anchorX, anchorY, paneId]);
             }
             else {
-                const pane = (_b = (_a = this.crossEventProducer.crossToolHover) === null || _a === void 0 ? void 0 : _a.paneId) !== null && _b !== void 0 ? _b : 'CHART';
+                const pane = (_g = (_f = this.crossEventProducer.crossToolHover) === null || _f === void 0 ? void 0 : _f.paneId) !== null && _g !== void 0 ? _g : 'CHART';
                 const paneBounds = this.canvasBoundsContainer.getBounds(CanvasElement.PANE_UUID(pane));
                 const paneYStart = paneBounds.y + 5;
                 const paneYEnd = paneBounds.y + paneBounds.height - 5;
@@ -172,6 +176,13 @@ export class HoverProducerComponent extends ChartBaseElement {
                 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.crossEventProducer.crossToolTouchInfo.temp = { x: newX, y: newY };
+                const hover = (_h = this.crossEventProducer.crossToolHover) !== null && _h !== void 0 ? _h : this.hover;
+                if (!hover) {
+                    return;
+                }
+                this.crossEventProducer.crossToolHover = Object.assign(Object.assign({}, hover), { x: newX, y: newY, paneId: pane });
+                this.crossEventProducer.crossSubject.next([newX, newY, pane]);
             }
         }));
         //#endregion
@@ -236,9 +247,16 @@ export class HoverProducerComponent extends ChartBaseElement {
      * @param {VisualCandle} candle - The VisualCandle object to create the hover from.
      */
     updateHover(candle) {
+        var _a, _b;
         const updatedHover = this.createHoverFromCandle(candle);
         if (this.hover && updatedHover) {
-            const hover = Object.assign(Object.assign({}, updatedHover), { x: this.hover.x, y: this.hover.y });
+            const shouldKeepSetTouchCrosshair = isMobile() &&
+                this.longTouchActivatedSubject.getValue() &&
+                this.crossEventProducer.crossSubject.getValue() !== null;
+            const crossToolHover = this.crossEventProducer.crossToolHover;
+            const hoverX = shouldKeepSetTouchCrosshair ? ((_a = crossToolHover === null || crossToolHover === void 0 ? void 0 : crossToolHover.x) !== null && _a !== void 0 ? _a : this.hover.x) : this.hover.x;
+            const hoverY = shouldKeepSetTouchCrosshair ? ((_b = crossToolHover === null || crossToolHover === void 0 ? void 0 : crossToolHover.y) !== null && _b !== void 0 ? _b : this.hover.y) : this.hover.y;
+            const hover = Object.assign(Object.assign({}, updatedHover), { x: hoverX, y: hoverY });
             this.fireHover(hover);
         }
     }
@@ -293,6 +311,21 @@ export class HoverProducerComponent extends ChartBaseElement {
     setLongTouchCrosshairSuppressed(value) {
         this.longTouchCrosshairSuppressed = value;
     }
+    /**
+     * Resets the current crosshair/touch state back to the default mobile idle state.
+     */
+    resetCrossTool(clearMobile = false) {
+        this.paneManager.chartPanComponent.setChartPanningOptions(true, true);
+        this.longTouchActivatedSubject.next(false);
+        this.crossEventProducer.fireCrossClose();
+        this.crossEventProducer.crossToolHover = null;
+        this.crossEventProducer.crossToolTouchInfo.isSet = false;
+        if (clearMobile) {
+            this.crossEventProducer.crossToolTouchInfo.isCommonTap = false;
+            this.crossEventProducer.crossToolTouchInfo.fixed = { x: 0, y: 0 };
+            this.crossEventProducer.crossToolTouchInfo.temp = { x: 0, y: 0 };
+        }
+    }
     /**
      * Registers a hover producer part with the given id.
      *

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

@@ -7,7 +7,7 @@ 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 { Price, Unit, ViewportModel, ViewportModelState, Zoom } from './scaling/viewport.model';
+import { Price, Unit, ViewportModel, ViewportModelState, XScale, YScale, Zoom } from './scaling/viewport.model';
 import { BoundsProvider } from './bounds.model';
 import VisualCandle from './visual-candle';
 export interface HighLowWithIndex {
@@ -16,11 +16,7 @@ export interface HighLowWithIndex {
     highIdx: number;
     lowIdx: number;
 }
-export interface ScaleHistoryItem {
-    xStart: Unit;
-    xEnd: Unit;
-    yStart: Unit;
-    yEnd: Unit;
+export interface ScaleHistoryItem extends XScale, YScale {
 }
 export declare const getDefaultHighLowWithIndex: () => HighLowWithIndex;
 export type ViewportPercent = number;

package/dist/chart/model/scaling/viewport.model.d.ts

@@ -57,6 +57,8 @@ export interface ViewportModelState {
     zoomY: Zoom;
     inverseY: boolean;
 }
+export type XScale = Pick<ViewportModelState, 'xStart' | 'xEnd'>;
+export type YScale = Pick<ViewportModelState, 'yStart' | 'yEnd'>;
 /**
  * Abstract viewport model.
  * Viewport has 4 coordinates: xStart, xEnd, yStart and yEnd - all stored in {@link Unit}.

package/dist/chart/utils/__tests__/canvas-lower-hover-strip.utils.test.d.ts

@@ -0,0 +1,6 @@
+/*
+ * Copyright (C) 2019 - 2026 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/.
+ */
+export {};

package/dist/chart/utils/__tests__/canvas-lower-hover-strip.utils.test.js

@@ -0,0 +1,34 @@
+/*
+ * Copyright (C) 2019 - 2026 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/.
+ */
+import { isCanvasPointInLowerHoverStrip } from '../canvas-lower-hover-strip.utils';
+const baseBounds = () => ({
+    x: 0,
+    y: 0,
+    pageX: 0,
+    pageY: 0,
+    width: 1000,
+    height: 1000,
+});
+describe('canvas-lower-hover-strip.utils', () => {
+    it('returns true for a point in the lower strip (bottom offset 0)', () => {
+        const b = baseBounds();
+        expect(isCanvasPointInLowerHoverStrip({ x: 500, y: 900 }, b, 0)).toBe(true);
+    });
+    it('returns false for a point in the upper area', () => {
+        const b = baseBounds();
+        expect(isCanvasPointInLowerHoverStrip({ x: 500, y: 100 }, b, 0)).toBe(false);
+    });
+    it('shifts the strip when bottomOffsetPx is non-zero', () => {
+        const b = baseBounds();
+        const yAtStripStartNoOffset = b.height * 0.85 + 10;
+        expect(isCanvasPointInLowerHoverStrip({ x: 1, y: yAtStripStartNoOffset - 1 }, b, 0)).toBe(false);
+        expect(isCanvasPointInLowerHoverStrip({ x: 1, y: yAtStripStartNoOffset }, b, 0)).toBe(true);
+        const bottomOffset = 50;
+        const yAtStripStartWithOffset = b.height * 0.85 - bottomOffset + 10;
+        expect(isCanvasPointInLowerHoverStrip({ x: 1, y: yAtStripStartWithOffset - 1 }, b, bottomOffset)).toBe(false);
+        expect(isCanvasPointInLowerHoverStrip({ x: 1, y: yAtStripStartWithOffset }, b, bottomOffset)).toBe(true);
+    });
+});

package/dist/chart/utils/canvas/canvas-drawing-functions.utils.d.ts

@@ -46,7 +46,7 @@ export declare function drawPriceLabel(ctx: CanvasRenderingContext2D, x0: number
  *
  * @returns {void}
  */
-export declare function drawLine(ctx: CanvasRenderingContext2D, x0: number, y0: number, x1: number, y1: number, thickness?: number, lineDash?: Array<number>): void;
+export declare function drawLine(ctx: CanvasRenderingContext2D, x0: number, y0: number, x1: number, y1: number, thickness?: number, lineDash?: Array<number>, lineCap?: CanvasLineCap): void;
 /**
  * Try to avoid anti-aliasing
  */

package/dist/chart/utils/canvas/canvas-drawing-functions.utils.js

@@ -109,10 +109,13 @@ export function drawPriceLabel(ctx, x0, y0, x1, y1, x2, y2, _width, rounded, ali
  *
  * @returns {void}
  */
-export function drawLine(ctx, x0, y0, x1, y1, thickness = 1, lineDash = []) {
+export function drawLine(ctx, x0, y0, x1, y1, thickness = 1, lineDash = [], lineCap) {
     ctx.save();
     ctx.setLineDash(lineDash);
     ctx.lineWidth = thickness;
+    if (lineCap !== undefined) {
+        ctx.lineCap = lineCap;
+    }
     ctx.beginPath();
     ctx.moveTo(x0, y0);
     ctx.lineTo(x1, y1);

package/dist/chart/utils/canvas-lower-hover-strip.utils.d.ts

@@ -0,0 +1,17 @@
+/*
+ * Copyright (C) 2019 - 2026 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/.
+ */
+import { Bounds } from '../model/bounds.model';
+export interface CanvasPointerPoint {
+    readonly x: number;
+    readonly y: number;
+}
+/**
+ * Canvas-space hit test for the lower band (time scale / volume strip).
+ * Reusable for any UI that should react when the pointer is near the bottom of the chart.
+ *
+ * Rectangle matches the Figma hover region (full width, lower ~15% of canvas height plus offsets).
+ */
+export declare function isCanvasPointInLowerHoverStrip(point: CanvasPointerPoint, canvasBounds: Bounds, bottomOffsetPx: number): boolean;

package/dist/chart/utils/canvas-lower-hover-strip.utils.js

@@ -0,0 +1,20 @@
+/*
+ * Copyright (C) 2019 - 2026 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/.
+ */
+/**
+ * Canvas-space hit test for the lower band (time scale / volume strip).
+ * Reusable for any UI that should react when the pointer is near the bottom of the chart.
+ *
+ * Rectangle matches the Figma hover region (full width, lower ~15% of canvas height plus offsets).
+ */
+export function isCanvasPointInLowerHoverStrip(point, canvasBounds, bottomOffsetPx) {
+    const rectX = 0;
+    const rectY = canvasBounds.height * 0.85 - bottomOffsetPx + 10;
+    const rectWidth = canvasBounds.width;
+    const rectHeight = canvasBounds.height * 0.15 + bottomOffsetPx + 10;
+    const dx = point.x - rectX;
+    const dy = point.y - rectY;
+    return dx >= 0 && dx < rectWidth && dy >= 0 && dy < rectHeight;
+}