@devexperts/dxcharts-lite 2.6.0 → 2.6.1

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.

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;
     }

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

@@ -322,6 +322,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 {
@@ -482,6 +486,10 @@ export interface ChartConfigComponentsHighLow {
      * Font config of high/low labels.
      */
     font: string;
+    prefix: {
+        high: string;
+        low: string;
+    };
 }
 export interface ChartConfigComponentsCrossTool {
     /**

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',

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/high_low/high-low.drawer.js

@@ -73,7 +73,7 @@ export class HighLowDrawer {
      */
     getMarkerText(yValue, type) {
         const formattedValue = this.chartModel.pane.regularFormatter(yValue);
-        const prefix = type === 'high' ? 'H:' : 'L:';
+        const prefix = type === 'high' ? this.config.components.highLow.prefix.high : this.config.components.highLow.prefix.low;
         return `${prefix} ${formattedValue}`;
     }
     /**

package/dist/chart/components/pane/pane-manager.component.d.ts

@@ -24,6 +24,7 @@ import { PaneComponent } from './pane.component';
 import { DataSeriesModel } from '../../model/data-series.model';
 import { HitTestCanvasModel } from '../../model/hit-test-canvas.model';
 import { ChartResizeHandler } from '../../inputhandlers/chart-resize.handler';
+export type MoveDataSeriesToPaneDirection = 'above' | 'below';
 export declare class PaneManager extends ChartBaseElement {
     private chartBaseModel;
     private dynamicObjectsCanvasModel;
@@ -107,6 +108,10 @@ export declare class PaneManager extends ChartBaseElement {
      * Shows a pane, use if the pane is hidden
      */
     showPane(paneUUID: string): void;
+    /**
+     * Move data series to a certain pane, or create a new one if no pane is found
+     */
+    moveDataSeriesToPane(dataSeries: DataSeriesModel[], initialPane: PaneComponent, initialExtent: YExtentComponent, paneUUID?: string, extent?: YExtentComponent, direction?: MoveDataSeriesToPaneDirection): void;
     /**
      * Adds cursors to the chart elements based on the provided uuid and cursor type.
      * @private

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

@@ -188,6 +188,26 @@ export class PaneManager extends ChartBaseElement {
         this.canvasBoundsContainer.showPaneBounds(paneUUID);
         this.recalculateState();
     }
+    /**
+     * Move data series to a certain pane, or create a new one if no pane is found
+     */
+    moveDataSeriesToPane(dataSeries, initialPane, initialExtent, paneUUID, extent, direction) {
+        const pane = paneUUID && this.panes[paneUUID];
+        if (!pane) {
+            const order = direction && direction === 'above' ? 0 : this.panesOrder.length;
+            const newPane = this.createPane(undefined, { order });
+            newPane.moveDataSeriesToExistingExtentComponent(dataSeries, initialPane, initialExtent, newPane.mainExtent);
+            initialPane.yExtentComponents.length === 0 && this.removePane(initialPane.uuid);
+            return;
+        }
+        if (extent) {
+            pane.moveDataSeriesToExistingExtentComponent(dataSeries, initialPane, initialExtent, extent);
+        }
+        else {
+            pane.moveDataSeriesToNewExtentComponent(dataSeries, initialPane, initialExtent);
+        }
+        initialPane.yExtentComponents.length === 0 && this.removePane(initialPane.uuid);
+    }
     /**
      * Adds cursors to the chart elements based on the provided uuid and cursor type.
      * @private

package/dist/chart/components/pane/pane.component.d.ts

@@ -7,7 +7,7 @@ import { Subject } from 'rxjs';
 import { CanvasAnimation } from '../../animation/canvas-animation';
 import { CanvasBoundsContainer, HitBoundsTest } from '../../canvas/canvas-bounds-container';
 import { CursorHandler } from '../../canvas/cursor.handler';
-import { FullChartConfig } from '../../chart.config';
+import { FullChartConfig, YAxisAlign } from '../../chart.config';
 import { DrawingManager } from '../../drawers/drawing-manager';
 import EventBus from '../../events/event-bus';
 import { CanvasInputListenerComponent } from '../../inputlisteners/canvas-input-listener.component';
@@ -84,6 +84,14 @@ export declare class PaneComponent extends ChartBaseElement {
     private addCursors;
     createExtentComponent(options?: AtLeastOne<YExtentCreationOptions>): YExtentComponent;
     removeExtentComponent(extentComponent: YExtentComponent): void;
+    /**
+     * Create new pane extent and attach data series to it
+     */
+    moveDataSeriesToNewExtentComponent(dataSeries: DataSeriesModel[], initialPane: PaneComponent, initialExtent: YExtentComponent, align?: YAxisAlign): void;
+    /**
+     * Attach data series to existing y axis extent
+     */
+    moveDataSeriesToExistingExtentComponent(dataSeries: DataSeriesModel[], initialPane: PaneComponent, initialExtent: YExtentComponent, extentComponent: YExtentComponent): void;
     /**
      * This method updates the view by calling the doAutoScale method of the scaleModel and firing the Draw event using the eventBus.
      * @private

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

@@ -149,6 +149,22 @@ export class PaneComponent extends ChartBaseElement {
         this.yExtentComponents.forEach((c, idx) => (c.idx = idx));
         this.canvasBoundsContainer.updateYAxisWidths();
     }
+    /**
+     * Create new pane extent and attach data series to it
+     */
+    moveDataSeriesToNewExtentComponent(dataSeries, initialPane, initialExtent, align = 'right') {
+        const extent = this.createExtentComponent();
+        extent.yAxis.setYAxisAlign(align);
+        dataSeries.forEach(series => series.moveToExtent(extent));
+        initialExtent.dataSeries.size === 0 && initialPane.removeExtentComponent(initialExtent);
+    }
+    /**
+     * Attach data series to existing y axis extent
+     */
+    moveDataSeriesToExistingExtentComponent(dataSeries, initialPane, initialExtent, extentComponent) {
+        dataSeries.forEach(series => series.moveToExtent(extentComponent));
+        initialExtent.dataSeries.size === 0 && initialPane.removeExtentComponent(initialExtent);
+    }
     /**
      * This method updates the view by calling the doAutoScale method of the scaleModel and firing the Draw event using the eventBus.
      * @private

package/dist/chart/components/x_axis/x-axis-draw.functions.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';
 const DEFAULT_X_LABEL_PADDING = { x: 4, y: 4 };
 /**
  * Draws the label on X axis.
@@ -50,7 +50,7 @@ export function drawXAxisLabel(ctx, canvasBoundsContainer, config, label) {
     }
     ctx.fillStyle = label.color;
     const xTextPos = boxStart + DEFAULT_X_LABEL_PADDING.x;
-    const yTextPos = xAxisBounds.y + offsetTop + fontSize; // -2 for vertical adjustment
+    const yTextPos = xAxisBounds.y + offsetTop + fontSize + X_AXIS_MOBILE_PADDING / 2;
     ctx.fillText(label.text, xTextPos, yTextPos);
     ctx.restore();
 }

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

@@ -24,6 +24,7 @@ export declare class XAxisScaleHandler extends ChartBaseElement {
     private hitTest;
     private hitTestCanvasModel;
     lastXStart: Unit;
+    lastXEnd: Unit;
     lastXWidth: Unit;
     lastXPxWidth: Pixel;
     private dblClickCallback;

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

@@ -6,6 +6,8 @@
 import { ChartBaseElement } from '../../model/chart-base-element';
 import { CanvasElement } from '../../canvas/canvas-bounds-container';
 import { DragNDropXComponent } from '../dran-n-drop_helper/drag-n-drop-x.component';
+// if you drag full X width from left to right - you will have x3 zoom, and vice-versa
+const FULL_X_WIDTH_ZOOM_FACTOR = 3;
 /**
  * Handles the mouse drag on X axis - to zoom the viewport horizontally.
  * @doc-tags scaling,zoom,viewport
@@ -21,10 +23,12 @@ export class XAxisScaleHandler extends ChartBaseElement {
         this.hitTest = hitTest;
         this.hitTestCanvasModel = hitTestCanvasModel;
         this.lastXStart = 0;
+        this.lastXEnd = 0;
         this.lastXWidth = 0;
         this.lastXPxWidth = 0;
         this.onXDragStart = () => {
             this.lastXStart = this.scale.xStart;
+            this.lastXEnd = this.scale.xEnd;
             this.lastXWidth = this.scale.xEnd - this.scale.xStart;
             const bounds = this.canvasBoundsContainer.getBounds(CanvasElement.X_AXIS);
             this.lastXPxWidth = bounds.width - this.canvasInputListener.currentPoint.x;
@@ -32,16 +36,41 @@ export class XAxisScaleHandler extends ChartBaseElement {
             this.hitTestCanvasModel.hitTestDrawersPredicateSubject.next(false);
         };
         this.onXDragTick = (dragInfo) => {
-            const { delta: absoluteXDelta } = dragInfo;
-            const newPxWidth = this.lastXPxWidth - absoluteXDelta;
-            // cursor goes beyond x-axis - maximum scale is reached
-            if (newPxWidth < 0) {
+            let { delta: absoluteXDelta } = dragInfo;
+            // mouse click or single tap drag
+            if (!this.touches || this.touches.length === 1) {
+                const newPxWidth = this.lastXPxWidth - absoluteXDelta;
+                // cursor goes beyond x-axis - maximum scale is reached
+                if (newPxWidth < 0) {
+                    return;
+                }
+                const xZoomMult = this.lastXPxWidth / newPxWidth;
+                const newWidth = this.lastXWidth * xZoomMult;
+                const newXStart = this.lastXStart + (this.lastXWidth - newWidth);
+                this.scale.setXScale(newXStart, this.scale.xEnd);
                 return;
             }
-            const xZoomMult = this.lastXPxWidth / newPxWidth;
-            const newWidth = this.lastXWidth * xZoomMult;
-            const newXStart = this.lastXStart + (this.lastXWidth - newWidth);
-            this.scale.setXScale(newXStart, this.scale.xEnd);
+            // if multitouch - take the first two touch events and apply delta the following way:
+            // the touch on the left keeps the initial delta because left => right gesture
+            // the touch on the right has the reversed delta because the gesture is right => left
+            if (this.touches.length > 1) {
+                const left = Math.min(this.touches[0].clientX, this.touches[1].clientX);
+                absoluteXDelta = left === this.touches[0].clientX ? absoluteXDelta : -absoluteXDelta;
+                let xZoomMult;
+                if (absoluteXDelta < 0) {
+                    xZoomMult = 1 / (1 + (-absoluteXDelta / this.lastXPxWidth) * (FULL_X_WIDTH_ZOOM_FACTOR - 1));
+                }
+                else {
+                    xZoomMult = 1 + (absoluteXDelta / this.lastXPxWidth) * (FULL_X_WIDTH_ZOOM_FACTOR - 1);
+                }
+                const newXWidth = this.lastXWidth * xZoomMult;
+                const delta = (newXWidth - this.lastXWidth) / 2;
+                const newXStart = this.lastXStart - delta;
+                const newXEnd = this.lastXEnd + delta;
+                if (this.lastXStart !== newXStart || this.lastXEnd !== newXEnd) {
+                    this.scale.setXScale(newXStart, newXEnd);
+                }
+            }
         };
         this.onXDragEnd = () => {
             // Continue redrawing hit test

package/dist/chart/components/x_axis/x-axis-time-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 { calculateTextWidth } from '../../utils/canvas/canvas-font-measure-tool.utils';
 /**
  * This Drawer draws regular time labels for X Axis.
@@ -38,7 +38,7 @@ export class XAxisTimeLabelsDrawer {
             ctx.fillRect(bounds.x, bounds.y, bounds.width, bounds.height);
             const color = this.config.colors.xAxis.labelTextColor;
             const labels = this.labelsProvider();
-            this.drawLabels(ctx, labels, bounds, color, fontHeight, fontFamily, offsetTop);
+            this.drawLabels(ctx, labels, bounds, color, fontHeight, fontFamily, offsetTop + X_AXIS_MOBILE_PADDING / 2);
             ctx.restore();
         }
     }

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

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

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

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