@devexperts/dxcharts-lite 2.6.0 → 2.6.2

package/dist/chart/bootstrap.js

@@ -182,7 +182,7 @@ export default class ChartBootstrap {
         // grid component
         const verticalGridComponent = new GridComponent(mainCanvasModel, scaleModel, config, this.yAxisComponent.state, 'GRID', drawingManager, () => this.canvasBoundsContainer.getBounds(CanvasElement.ALL_PANES), () => this.canvasBoundsContainer.getBounds(chartPaneId), () => this.xAxisComponent.xAxisLabelsGenerator.labels, () => [], undefined, () => config.components.grid.visible);
         this.chartComponents.push(verticalGridComponent);
-        this.hoverProducer = new HoverProducerComponent(this.crossEventProducer, scaleModel, config, chartModel, canvasInputListener, this.canvasBoundsContainer, this.paneManager, timeZoneModel, formatterFactory);
+        this.hoverProducer = new HoverProducerComponent(this.crossEventProducer, scaleModel, config, chartModel, canvasInputListener, this.canvasBoundsContainer, this.paneManager, timeZoneModel, chartPanComponent.mainCanvasTouchHandler, formatterFactory);
         this.chartComponents.push(this.hoverProducer);
         this.crossToolComponent = new CrossToolComponent(config, crossToolCanvasModel, canvasBoundsContainer, drawingManager, paneManager, this.crossEventProducer, this.hoverProducer);
         this.chartComponents.push(this.crossToolComponent);

package/dist/chart/canvas/canvas-bounds-container.d.ts

@@ -45,6 +45,7 @@ export declare class CanvasElement {
 }
 export declare const DEFAULT_BOUNDS: Bounds;
 export declare const DEFAULT_MIN_PANE_HEIGHT = 20;
+export declare const X_AXIS_MOBILE_PADDING: number;
 /**
  * This component listens EVENT_DRAW and recalculates bounds of canvas chart elements.
  * {@link getBounds} method will always give actual placement of element you want.
@@ -240,10 +241,10 @@ export declare class CanvasBoundsContainer {
     /**
      * Gets hit-test fn for canvas element.
      * @param {string} el - CanvasElement.ELEMENT_NAME
-     * @param {boolean} reverse - reverses the hit test condition
-     * @param {number} extensionX - extended hitBoundsTest in horizontal direction
-     * @param {number} extensionY - extended hitBoundsTest in vertical direction
-     * @param wholePage
+     * @param {Object} options - An object containing options for the hit test.
+     * @param {number} [options.extensionX=0] - The amount of extension in the x-axis.
+     * @param {number} [options.extensionY=0] - The amount of extension in the y-axis.
+     * @param {boolean} [options.wholePage=false] - Whether to test against the whole page or just the bounds object.
      * @return {HitBoundsTest} hit-test fn
      */
     getBoundsHitTest(el: string, options?: AtLeastOne<HitBoundsTestOptions>): HitBoundsTest;

package/dist/chart/canvas/canvas-bounds-container.js

@@ -45,6 +45,8 @@ const N_MAP_H = 35;
 const N_MAP_BUTTON_W = 15;
 const KNOTS_W_MOBILE_MULTIPLIER = 1.5;
 const N_MAP_KNOT_W = isMobile() ? 8 * KNOTS_W_MOBILE_MULTIPLIER : 8;
+// additional x axis height padding for mobiles, used for better usability on mobile devices
+export const X_AXIS_MOBILE_PADDING = isMobile() ? 5 : 0;
 /**
  * we need to check that: heightRatios - 1 <  0.000001 after calculations between decimals
  */
@@ -390,7 +392,8 @@ export class CanvasBoundsContainer {
             this.xAxisHeight =
                 fontHeight +
                     ((_a = this.config.components.xAxis.padding.top) !== null && _a !== void 0 ? _a : 0) +
-                    ((_b = this.config.components.xAxis.padding.bottom) !== null && _b !== void 0 ? _b : 0);
+                    ((_b = this.config.components.xAxis.padding.bottom) !== null && _b !== void 0 ? _b : 0) +
+                    X_AXIS_MOBILE_PADDING;
         }
         return this.xAxisHeight;
     }
@@ -652,10 +655,10 @@ export class CanvasBoundsContainer {
     /**
      * Gets hit-test fn for canvas element.
      * @param {string} el - CanvasElement.ELEMENT_NAME
-     * @param {boolean} reverse - reverses the hit test condition
-     * @param {number} extensionX - extended hitBoundsTest in horizontal direction
-     * @param {number} extensionY - extended hitBoundsTest in vertical direction
-     * @param wholePage
+     * @param {Object} options - An object containing options for the hit test.
+     * @param {number} [options.extensionX=0] - The amount of extension in the x-axis.
+     * @param {number} [options.extensionY=0] - The amount of extension in the y-axis.
+     * @param {boolean} [options.wholePage=false] - Whether to test against the whole page or just the bounds object.
      * @return {HitBoundsTest} hit-test fn
      */
     getBoundsHitTest(el, options = DEFAULT_HIT_TEST_OPTIONS) {

package/dist/chart/chart.config.d.ts

@@ -15,6 +15,7 @@ import { DateTimeFormatter, TimeFormatterConfig } from './model/date-time.format
 import { MergeOptions } from './utils/merge.utils';
 import { DeepPartial } from './utils/object.utils';
 import { Candle } from './model/candle.model';
+import { CustomIcon } from './components/events/events-custom-icons';
 export declare const MAIN_FONT = "Open Sans Semibold, sans-serif";
 export interface DateTimeFormatConfig {
     format: string;
@@ -123,12 +124,7 @@ export interface FullChartColors {
         labelBoxColor: string;
         labelTextColor: string;
     };
-    events: {
-        earnings: EventColors;
-        dividends: EventColors;
-        splits: EventColors;
-        'conference-calls': EventColors;
-    };
+    events: ChartConfigComponentsEventsColors;
     navigationMap: {
         buttonColor: string;
         knotColor: string;
@@ -322,6 +318,10 @@ export interface ChartConfigComponentsChart {
     selectedWidth: number;
     minCandlesOffset: number;
     histogram: ChartConfigComponentsHistogram;
+    /**
+     * The maximum amount of Y axis scales on a single chart
+     */
+    maxYAxisScalesAmount: number;
     sortCandles?: (candles: Candle[]) => Candle[];
 }
 export interface ChartConfigComponentsEvents {
@@ -352,6 +352,16 @@ export interface ChartConfigComponentsEvents {
      * 	</svg>'
      */
     icons?: ChartConfigComponentsEventsIcons;
+    /**
+     * Configure the event type vertical line appearance
+     */
+    line?: ChartConfigComponentsEventsLine;
+}
+export interface ChartConfigComponentsEventsColors {
+    earnings: EventColors;
+    dividends: EventColors;
+    splits: EventColors;
+    'conference-calls': EventColors;
 }
 export interface DateTimeFormatConfig {
     format: string;
@@ -482,6 +492,10 @@ export interface ChartConfigComponentsHighLow {
      * Font config of high/low labels.
      */
     font: string;
+    prefix: {
+        high: string;
+        low: string;
+    };
 }
 export interface ChartConfigComponentsCrossTool {
     /**
@@ -660,9 +674,17 @@ export interface HighlightsColors {
     background: string;
     label: string;
 }
-export interface EventColors {
+/**
+ * @deprecated use {normal}, {hover} instead, will be removed in v6
+ */
+export interface EventColorsOld {
     color: string;
 }
+export interface EventColors extends EventColorsOld {
+    line?: string;
+    normal?: string;
+    hover?: string;
+}
 export interface HistogramColors {
     upCap: string;
     upBottom: string;
@@ -771,15 +793,29 @@ export interface YAxisLabelsColors extends Record<YAxisLabelType, Record<string,
     prePostMarket: YAxisPrePostMarketLabelColorConfig;
     prevDayClose: YAxisLabelColorConfig;
 }
-export interface CustomIcon {
-    normal: string;
-    hover: string;
-}
 export interface ChartConfigComponentsEventsIcons {
     earnings?: CustomIcon;
     dividends?: CustomIcon;
     splits?: CustomIcon;
-    conferenceCalls?: CustomIcon;
+    'conference-calls'?: CustomIcon;
+}
+export interface ChartConfigComponentsEventsLine {
+    earnings?: {
+        width: number;
+        dash: Array<number>;
+    };
+    dividends?: {
+        width: number;
+        dash: Array<number>;
+    };
+    splits?: {
+        width: number;
+        dash: Array<number>;
+    };
+    'conference-calls'?: {
+        width: number;
+        dash: Array<number>;
+    };
 }
 export type CursorType = string;
 export declare const getFontFromConfig: (config: YAxisConfig) => string;

package/dist/chart/chart.config.js

@@ -71,6 +71,7 @@ export const getDefaultConfig = () => ({
             histogram: {
                 barCapSize: 1,
             },
+            maxYAxisScalesAmount: 10,
             sortCandles: defaultSortCandles,
         },
         yAxis: {
@@ -192,7 +193,7 @@ export const getDefaultConfig = () => ({
             logoWidth: 20,
             logoHeight: 20,
         },
-        highLow: { visible: false, font: '12px sans-serif' },
+        highLow: { visible: false, font: '12px sans-serif', prefix: { high: 'H: ', low: 'L: ' } },
         highlights: {
             visible: false,
             fontFamily: 'Open Sans',
@@ -386,15 +387,35 @@ export const getDefaultConfig = () => ({
         highLowTheme: { highColor: 'rgba(223,222,223,1)', lowColor: 'rgba(223,222,223,1)' },
         instrumentInfo: { textColor: '#aeb1b3' },
         paneResizer: {
-            lineColor: 'rgba(55,55,54,1)',
+            lineColor: 'rgba(61,61,61,1)',
             bgColor: 'rgba(20,20,19,1)',
             bgHoverColor: 'rgba(55,55,54,0.6)',
         },
         events: {
-            earnings: { color: 'rgba(217,44,64,1)' },
-            dividends: { color: 'rgba(169,38,251,1)' },
-            splits: { color: 'rgba(244,187,63,1)' },
-            'conference-calls': { color: 'rgba(48,194,97,1)' },
+            earnings: {
+                color: 'rgba(217,44,64,1)',
+                normal: 'rgba(217,44,64,1)',
+                hover: 'rgba(217,44,64,1)',
+                line: 'rgba(217,44,64,1)',
+            },
+            dividends: {
+                color: 'rgba(169,38,251,1)',
+                normal: 'rgba(169,38,251,1)',
+                hover: 'rgba(169,38,251,1)',
+                line: 'rgba(169,38,251,1)',
+            },
+            splits: {
+                color: 'rgba(244,187,63,1)',
+                normal: 'rgba(244,187,63,1)',
+                hover: 'rgba(244,187,63,1)',
+                line: 'rgba(244,187,63,1)',
+            },
+            'conference-calls': {
+                color: 'rgba(48,194,97,1)',
+                normal: 'rgba(48,194,97,1)',
+                hover: 'rgba(48,194,97,1)',
+                line: 'rgba(48,194,97,1)',
+            },
         },
         secondaryChartTheme: [
             {

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

@@ -37,7 +37,7 @@ interface ChartPanningOptions {
  * @param {CanvasBoundsContainer} canvasBoundsContainer - An instance of the CanvasBoundsContainer class.
  * @param {CanvasAnimation} canvasAnimation - An instance of the CanvasAnimation class.
  * @param {ChartPanComponent} chartPanComponent - An instance of the ChartPanComponent class.
- 
+
 */
 export declare class ChartAreaPanHandler extends ChartBaseElement {
     private bus;
@@ -62,6 +62,7 @@ export declare class ChartAreaPanHandler extends ChartBaseElement {
      * If the zoomToCursor configuration is set to false, it calls the zoomXToEnd method of the scaleModel to zoom in or out based on the zoomIn parameter.
      * Finally, it fires the draw event of the bus to redraw the canvas.
      * @param {WheelEvent} e - Wheel event
+     * @param {number} zoomSensitivity - zoom sensitivity
      * @returns {void}
      */
     private zoomXHandler;
@@ -74,7 +75,7 @@ export declare class ChartAreaPanHandler extends ChartBaseElement {
     private calculateDynamicSesitivity;
     /**
      * Registers a handler for panning the chart along the Y-axis.
-     * @param {ScaleModel} scaleModel - The scale model of the extent.
+     * @param {ScaleModel} scale - The scale model of the extent.
      * @param {HitBoundsTest} hitTest - The hit test of the pane.
      * @returns {DragNDropYComponent} - The drag and drop component for panning the chart along the Y-axis.
      */

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

@@ -29,7 +29,7 @@ import { DragNDropYComponent } from '../dran-n-drop_helper/drag-n-drop-y.compone
  * @param {CanvasBoundsContainer} canvasBoundsContainer - An instance of the CanvasBoundsContainer class.
  * @param {CanvasAnimation} canvasAnimation - An instance of the CanvasAnimation class.
  * @param {ChartPanComponent} chartPanComponent - An instance of the ChartPanComponent class.
- 
+
 */
 export class ChartAreaPanHandler extends ChartBaseElement {
     constructor(bus, config, scale, canvasInputListener, canvasBoundsContainer, canvasAnimation, chartPanComponent, hitTestCanvasModel) {
@@ -56,6 +56,7 @@ export class ChartAreaPanHandler extends ChartBaseElement {
          * If the zoomToCursor configuration is set to false, it calls the zoomXToEnd method of the scaleModel to zoom in or out based on the zoomIn parameter.
          * Finally, it fires the draw event of the bus to redraw the canvas.
          * @param {WheelEvent} e - Wheel event
+         * @param {number} zoomSensitivity - zoom sensitivity
          * @returns {void}
          */
         this.zoomXHandler = (e, zoomSensitivity) => {
@@ -120,9 +121,9 @@ export class ChartAreaPanHandler extends ChartBaseElement {
             .pipe(filter(() => this.chartPanningOptions.horizontal && this.chartPanningOptions.vertical), throttleTime(this.wheelThrottleTime, animationFrameScheduler, { trailing: true, leading: true }))
             .subscribe(e => {
             const device = deviceDetector();
-            const direction = device === 'apple' || device === 'mobile' ? 1 : -1;
+            const direction = device === 'apple' || device === 'mobile' ? -1 : 1;
             const deltaX = 0 + e.deltaX * direction;
-            const deltaY = 0 + e.deltaY * -direction;
+            const deltaY = 0 + e.deltaY * direction;
             if (e.ctrlKey) {
                 const zoomSensitivity = this.calculateDynamicSesitivity(e, this.config.scale.zoomSensitivity.wheel);
                 this.zoomXHandler(e, zoomSensitivity);
@@ -162,7 +163,7 @@ export class ChartAreaPanHandler extends ChartBaseElement {
     }
     /**
      * Registers a handler for panning the chart along the Y-axis.
-     * @param {ScaleModel} scaleModel - The scale model of the extent.
+     * @param {ScaleModel} scale - The scale model of the extent.
      * @param {HitBoundsTest} hitTest - The hit test of the pane.
      * @returns {DragNDropYComponent} - The drag and drop component for panning the chart along the Y-axis.
      */

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

@@ -22,11 +22,11 @@ export class CrossToolComponent extends ChartBaseElement {
         this.drawingManager = drawingManager;
         this.paneManager = paneManager;
         this.crossToolTypeDrawers = {};
-        this.model = new CrossToolModel(config.components.crossTool, this.crossToolCanvasModel, crossEventProducer, hoverProducer);
+        this.model = new CrossToolModel(config.components.crossTool, this.crossToolCanvasModel, crossEventProducer, hoverProducer, this.canvasBoundsContainer);
         this.addChildEntity(this.model);
         const clearCanvasDrawer = new ClearCanvasDrawer(this.crossToolCanvasModel);
         this.registerDefaultDrawerTypes();
-        const crossToolDrawer = new CrossToolDrawer(this.model, this.crossToolCanvasModel, this.crossToolTypeDrawers);
+        const crossToolDrawer = new CrossToolDrawer(this.model, this.config, this.crossToolCanvasModel, this.crossToolTypeDrawers);
         const compositeDrawer = new CompositeDrawer();
         compositeDrawer.addDrawer(clearCanvasDrawer, 'CLEAR_CANVAS');
         compositeDrawer.addDrawer(crossToolDrawer, 'CROSS_TOOL_DRAWER');

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

@@ -6,14 +6,16 @@
 import { CanvasModel } from '../../model/canvas.model';
 import { Drawer } from '../../drawers/drawing-manager';
 import { CrossToolHover, CrossToolModel, CrossToolType } from './cross-tool.model';
+import { FullChartConfig } from '../../chart.config';
 export interface CrossToolTypeDrawer {
     draw: (ctx: CanvasRenderingContext2D, hover: CrossToolHover) => void;
 }
 export declare class CrossToolDrawer implements Drawer {
     private model;
+    private config;
     private crossToolCanvasModel;
     private readonly crossToolTypeDrawers;
-    constructor(model: CrossToolModel, crossToolCanvasModel: CanvasModel, crossToolTypeDrawers: Record<CrossToolType, CrossToolTypeDrawer>);
+    constructor(model: CrossToolModel, config: FullChartConfig, crossToolCanvasModel: CanvasModel, crossToolTypeDrawers: Record<CrossToolType, CrossToolTypeDrawer>);
     /**
      * Draws the cross tool on the canvas.
      * @function

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

@@ -4,8 +4,9 @@
  * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 export class CrossToolDrawer {
-    constructor(model, crossToolCanvasModel, crossToolTypeDrawers) {
+    constructor(model, config, crossToolCanvasModel, crossToolTypeDrawers) {
         this.model = model;
+        this.config = config;
         this.crossToolCanvasModel = crossToolCanvasModel;
         this.crossToolTypeDrawers = crossToolTypeDrawers;
     }
@@ -18,12 +19,12 @@ export class CrossToolDrawer {
      * @returns {void}
      */
     draw() {
-        const drawer = this.crossToolTypeDrawers[this.model.type];
+        const drawer = this.crossToolTypeDrawers[this.config.components.crossTool.type];
         if (drawer) {
             this.model.currentHover && drawer.draw(this.crossToolCanvasModel.ctx, this.model.currentHover);
         }
         else {
-            console.error(`No cross tool drawer type registered for drawer type ${this.model.type}`);
+            console.error(`No cross tool drawer type registered for drawer type ${this.config.components.crossTool.type}`);
         }
     }
     /**

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

@@ -9,6 +9,7 @@ import { CrossEventProducerComponent } from '../../inputhandlers/cross-event-pro
 import { Hover, HoverProducerComponent } from '../../inputhandlers/hover-producer.component';
 import { CanvasModel } from '../../model/canvas.model';
 import { ChartBaseElement } from '../../model/chart-base-element';
+import { CanvasBoundsContainer } from '../../canvas/canvas-bounds-container';
 export type CrossToolType = 'cross-and-labels' | 'only-labels' | 'none' | string;
 export interface CrossToolHover {
     x: number;
@@ -21,11 +22,11 @@ export declare class CrossToolModel extends ChartBaseElement {
     private crossToolCanvasModel;
     private crossEventProducer;
     private hoverProducer;
+    private canvasBoundsContainer;
     currentHoverSubject: BehaviorSubject<CrossToolHover | null>;
     get currentHover(): CrossToolHover | null;
     set currentHover(value: CrossToolHover | null);
-    type: CrossToolType;
-    constructor(config: Required<ChartConfigComponentsCrossTool>, crossToolCanvasModel: CanvasModel, crossEventProducer: CrossEventProducerComponent, hoverProducer: HoverProducerComponent);
+    constructor(config: Required<ChartConfigComponentsCrossTool>, crossToolCanvasModel: CanvasModel, crossEventProducer: CrossEventProducerComponent, hoverProducer: HoverProducerComponent, canvasBoundsContainer: CanvasBoundsContainer);
     /**
      * Sets the type of the CrossTool object.
      *
@@ -35,9 +36,7 @@ export declare class CrossToolModel extends ChartBaseElement {
     setType(type: CrossToolType): void;
     /**
      * Method to activate the cross tool.
-     * It subscribes to the canvasInputListener's mouse move event and fires the draw event.
-     * It also subscribes to the eventBus's hover and close hover events and updates the hover and fires the draw event accordingly.
-     * It also subscribes to the chartModel's candlesSetSubject and timeZoneModel's observeTimeZoneChanged events and recalculates the cross tool X formatter.
+     * It subscribes to the hoverProducer's hover event and updates the crosstool.
      */
     protected doActivate(): void;
     /**
@@ -59,5 +58,6 @@ export declare class CrossToolModel extends ChartBaseElement {
      * @param {number} hover.candleHover.closestOHLCY - The y coordinate of the closest OHLC price of the candle.
      * @returns {void}
      */
-    updateHover(hover: Hover, magnetTarget?: import("./cross-tool.component").MagnetTarget): void;
+    updateCrossTool(hover: Hover, magnetTarget?: import("./cross-tool.component").MagnetTarget): void;
+    private updateCrossToolMobile;
 }

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

@@ -5,7 +5,8 @@
  */
 import { BehaviorSubject } from 'rxjs';
 import { ChartBaseElement } from '../../model/chart-base-element';
-import { CHART_UUID } from '../../canvas/canvas-bounds-container';
+import { CanvasElement, CHART_UUID } from '../../canvas/canvas-bounds-container';
+import { isMobile } from '../../utils/device/browser.utils';
 export class CrossToolModel extends ChartBaseElement {
     get currentHover() {
         return this.currentHoverSubject.getValue();
@@ -13,16 +14,15 @@ export class CrossToolModel extends ChartBaseElement {
     set currentHover(value) {
         this.currentHoverSubject.next(value);
     }
-    constructor(config, crossToolCanvasModel, crossEventProducer, hoverProducer) {
+    constructor(config, crossToolCanvasModel, crossEventProducer, hoverProducer, canvasBoundsContainer) {
         super();
         this.config = config;
         this.crossToolCanvasModel = crossToolCanvasModel;
         this.crossEventProducer = crossEventProducer;
         this.hoverProducer = hoverProducer;
+        this.canvasBoundsContainer = canvasBoundsContainer;
         // the main hover object which will be presented on UI
         this.currentHoverSubject = new BehaviorSubject(null);
-        this.type = 'cross-and-labels';
-        this.type = config.type;
     }
     /**
      * Sets the type of the CrossTool object.
@@ -31,19 +31,17 @@ export class CrossToolModel extends ChartBaseElement {
      * @returns {void}
      */
     setType(type) {
-        this.type = type;
+        this.config.type = type;
     }
     /**
      * Method to activate the cross tool.
-     * It subscribes to the canvasInputListener's mouse move event and fires the draw event.
-     * It also subscribes to the eventBus's hover and close hover events and updates the hover and fires the draw event accordingly.
-     * It also subscribes to the chartModel's candlesSetSubject and timeZoneModel's observeTimeZoneChanged events and recalculates the cross tool X formatter.
+     * It subscribes to the hoverProducer's hover event and updates the crosstool.
      */
     doActivate() {
         super.doActivate();
         this.addRxSubscription(this.hoverProducer.hoverSubject.subscribe(hover => {
             if (this.crossEventProducer.crossSubject.getValue() !== null && hover !== null) {
-                this.updateHover(hover);
+                isMobile() ? this.updateCrossToolMobile(hover) : this.updateCrossTool(hover);
             }
             else {
                 this.currentHover = null;
@@ -56,7 +54,7 @@ export class CrossToolModel extends ChartBaseElement {
      * @private
      */
     fireDraw() {
-        if (this.type !== 'none') {
+        if (this.config.type !== 'none') {
             this.crossToolCanvasModel.fireDraw();
         }
     }
@@ -74,7 +72,7 @@ export class CrossToolModel extends ChartBaseElement {
      * @param {number} hover.candleHover.closestOHLCY - The y coordinate of the closest OHLC price of the candle.
      * @returns {void}
      */
-    updateHover(hover, magnetTarget = this.config.magnetTarget) {
+    updateCrossTool(hover, magnetTarget = this.config.magnetTarget) {
         if (this.currentHover === null) {
             this.currentHover = { x: hover.x, y: 0, time: hover.timeFormatted, paneId: hover.paneId };
         }
@@ -110,4 +108,37 @@ export class CrossToolModel extends ChartBaseElement {
         this.currentHover.paneId = hover.paneId;
         this.currentHoverSubject.next(this.currentHover);
     }
+    updateCrossToolMobile(hover) {
+        var _a;
+        // mobile crosstool works only after long touch event
+        if (!this.hoverProducer.longTouchActivatedSubject.getValue()) {
+            return;
+        }
+        const { fixed, temp, isSet } = this.crossEventProducer.crossToolTouchInfo;
+        // long touch makes crosstool fixed and the further moving will place crosstool under the current hover coordinates (ordinary logic)
+        // if crosstool is already set (long touch end event happened) the moving of chart will move crosstool according to it's initial (fixed position)
+        if (!isSet) {
+            this.updateCrossTool(hover);
+            return;
+        }
+        // additional crosstool move logic
+        const paneBounds = this.canvasBoundsContainer.getBounds(CanvasElement.PANE_UUID(hover.paneId));
+        const offset = 5;
+        // take a difference inbetween current hover and temporary crosstool coordinates
+        const xDiff = hover.x - temp.x;
+        const yDiff = hover.y - temp.y;
+        // apply the difference to the fixed coordinates
+        const rawX = fixed.x + xDiff;
+        const rawY = fixed.y + yDiff;
+        const paneYStart = paneBounds.y + offset;
+        const paneYEnd = paneBounds.y + paneBounds.height - offset;
+        // check for chart bounds and don't move crosstool outside of it
+        const x = rawX < offset ? offset : rawX > paneBounds.width - offset ? paneBounds.width - offset : rawX;
+        const y = rawY < paneYStart ? paneYStart : rawY > paneYEnd ? paneYEnd : rawY;
+        const crossToolHover = (_a = this.hoverProducer.createHover(x, y, hover.paneId)) !== null && _a !== void 0 ? _a : hover;
+        const updatedHover = Object.assign(Object.assign({}, crossToolHover), { x,
+            y });
+        this.crossEventProducer.crossToolHover = updatedHover;
+        this.updateCrossTool(updatedHover);
+    }
 }

package/dist/chart/components/cross_tool/types/cross-and-labels.drawer.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 { CanvasElement } from '../../../canvas/canvas-bounds-container';
+import { CanvasElement, X_AXIS_MOBILE_PADDING } from '../../../canvas/canvas-bounds-container';
 import { avoidAntialiasing, drawRoundedRect } from '../../../utils/canvas/canvas-drawing-functions.utils';
 import { priceLabelDrawersMap } from '../../y_axis/price_labels/price-label.drawer';
 export class CrossAndLabelsDrawerType {
@@ -98,12 +98,12 @@ export class CrossAndLabelsDrawerType {
             const boxWidth = width + xLabelPaddingLeft + xLabelPaddingRight;
             const boxHeight = fontHeight + xLabelPaddingTop + xLabelPaddingBottom;
             const xBoxPos = Math.max(x - boxWidth / 2, 0);
-            const yBoxPos = xAxis.y + xLabelMarginTop;
+            const yBoxPos = xAxis.y + xLabelMarginTop + X_AXIS_MOBILE_PADDING / 2;
             drawRoundedRect(ctx, xBoxPos, yBoxPos, boxWidth, boxHeight);
             // label
             ctx.fillStyle = crossToolColors.labelTextColor;
             const xTextPos = Math.max(x - width / 2, xLabelPaddingLeft);
-            const yTextPos = xAxis.y + xLabelMarginTop + fontHeight + xLabelPaddingTop - 1; // -1 for vertical adjustment
+            const yTextPos = xAxis.y + xLabelMarginTop + fontHeight + X_AXIS_MOBILE_PADDING / 2 + xLabelPaddingTop - 1; // -1 for vertical adjustment
             ctx.fillText(labelText, xTextPos, yTextPos);
             ctx.restore();
         }

package/dist/chart/components/events/events-custom-icons.d.ts

@@ -0,0 +1,33 @@
+/*
+ * 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 { Point } from '../../inputlisteners/canvas-input-listener.component';
+export interface CustomIcon {
+    normal: string;
+    hover: string;
+}
+export interface CustomIconImage {
+    img: HTMLImageElement;
+    svgHeight: number;
+}
+export declare const getIconHash: (type: string, state: keyof CustomIcon) => string;
+/**
+ * Creates a custom icon for a given event type.
+ * @param {string} type - The type of the event.
+ * @param {CustomIcon} [icon] - The custom icon object containing the normal and hover images.
+ * @returns {void}
+ */
+export declare const createCustomIcon: (type: string, icon?: CustomIcon) => {
+    type: string;
+    normal: CustomIconImage;
+    hover: CustomIconImage;
+} | undefined;
+/**
+ * Creates an icon image from a string containing SVG data.
+ * @param {string} iconString - The string containing SVG data.
+ * @returns {CustomIconImage} An object containing an Image object and the height of the SVG element.
+ */
+export declare const createIconImage: (iconString: string) => CustomIconImage;
+export declare const drawCustomSvgIcon: (ctx: CanvasRenderingContext2D, icons: Record<string, CustomIconImage>, point: Point, type: string, isHovered: boolean) => void;

package/dist/chart/components/events/events-custom-icons.js

@@ -0,0 +1,52 @@
+/*
+ * 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/.
+ */
+export const getIconHash = (type, state) => `${type}_${state}`;
+/**
+ * Creates a custom icon for a given event type.
+ * @param {string} type - The type of the event.
+ * @param {CustomIcon} [icon] - The custom icon object containing the normal and hover images.
+ * @returns {void}
+ */
+export const createCustomIcon = (type, icon) => {
+    if (icon) {
+        const normal = createIconImage(icon.normal);
+        const hover = createIconImage(icon.hover);
+        return { type, normal, hover };
+    }
+};
+/**
+ * Creates an icon image from a string containing SVG data.
+ * @param {string} iconString - The string containing SVG data.
+ * @returns {CustomIconImage} An object containing an Image object and the height of the SVG element.
+ */
+export const createIconImage = (iconString) => {
+    var _a;
+    const parser = new DOMParser();
+    const svgSelector = parser.parseFromString(iconString, 'text/html').querySelector('svg');
+    let svgHeight = 0;
+    if (svgSelector) {
+        svgHeight = parseInt((_a = svgSelector.getAttribute('height')) !== null && _a !== void 0 ? _a : '', 10);
+    }
+    const svg64 = btoa(iconString);
+    const b64Start = 'data:image/svg+xml;base64,';
+    const image64 = b64Start + svg64;
+    const img = new Image();
+    img.src = image64;
+    return {
+        img,
+        svgHeight,
+    };
+};
+export const drawCustomSvgIcon = (ctx, icons, point, type, isHovered) => {
+    if (isHovered) {
+        const hover = icons[getIconHash(type, 'hover')];
+        ctx.drawImage(hover.img, point.x - hover.svgHeight / 2, point.y - hover.svgHeight / 2);
+    }
+    else {
+        const normal = icons[getIconHash(type, 'normal')];
+        ctx.drawImage(normal.img, point.x - normal.svgHeight / 2, point.y - normal.svgHeight / 2);
+    }
+};