@devexperts/dxcharts-lite 2.5.8 → 2.6.1

package/dist/chart/components/chart/fake-visual-candle.d.ts

@@ -3,10 +3,10 @@
  * 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 { Candle } from "../../model/candle.model";
-import { DataSeriesPoint, VisualSeriesPoint } from "../../model/data-series.model";
-import { Index } from "../../model/scaling/viewport.model";
-import VisualCandle from "../../model/visual-candle";
+import { Candle } from '../../model/candle.model';
+import { DataSeriesPoint, VisualSeriesPoint } from '../../model/data-series.model';
+import { Index } from '../../model/scaling/viewport.model';
+import VisualCandle from '../../model/visual-candle';
 /**
  * Generates fake candle for left and right "out of data range" zones.
  * Requires period to calculate the fake timestamp.

package/dist/chart/components/chart/fake-visual-candle.js

@@ -3,10 +3,10 @@
  * 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 { nameDirection } from "../../model/candle.model";
-import { VisualSeriesPoint } from "../../model/data-series.model";
-import VisualCandle from "../../model/visual-candle";
-import { DEFAULT_PERIOD, fakeCandle, fakeDataPoint } from "./fake-candles";
+import { nameDirection } from '../../model/candle.model';
+import { VisualSeriesPoint } from '../../model/data-series.model';
+import VisualCandle from '../../model/visual-candle';
+import { DEFAULT_PERIOD, fakeCandle, fakeDataPoint } from './fake-candles';
 /**
  * Generates fake candle for left and right "out of data range" zones.
  * Requires period to calculate the fake timestamp.

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/volumes/separate-volumes.component.d.ts

@@ -4,7 +4,6 @@
  * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 import { FullChartConfig } from '../../chart.config';
-import { DrawingManager } from '../../drawers/drawing-manager';
 import { ChartBaseElement } from '../../model/chart-base-element';
 import { Pixel, Unit } from '../../model/scaling/viewport.model';
 import { ChartComponent } from '../chart/chart.component';
@@ -13,13 +12,12 @@ import { PaneComponent } from '../pane/pane.component';
 import { VolumesModel } from './volumes.model';
 export declare class SeparateVolumesComponent extends ChartBaseElement {
     private chartComponent;
-    private drawingManager;
     config: FullChartConfig;
     private volumesModel;
     private paneManager;
     static UUID: string;
     pane: PaneComponent | undefined;
-    constructor(chartComponent: ChartComponent, drawingManager: DrawingManager, config: FullChartConfig, volumesModel: VolumesModel, paneManager: PaneManager);
+    constructor(chartComponent: ChartComponent, config: FullChartConfig, volumesModel: VolumesModel, paneManager: PaneManager);
     protected doActivate(): void;
     /**
      * Activates the separate volumes feature.

package/dist/chart/components/volumes/separate-volumes.component.js

@@ -7,10 +7,9 @@ import { ChartBaseElement } from '../../model/chart-base-element';
 import { createCandlesOffsetProvider } from '../chart/data-series.high-low-provider';
 import { volumeFormatter } from './volumes.formatter';
 class SeparateVolumesComponent extends ChartBaseElement {
-    constructor(chartComponent, drawingManager, config, volumesModel, paneManager) {
+    constructor(chartComponent, config, volumesModel, paneManager) {
         super();
         this.chartComponent = chartComponent;
-        this.drawingManager = drawingManager;
         this.config = config;
         this.volumesModel = volumesModel;
         this.paneManager = paneManager;
@@ -53,7 +52,6 @@ class SeparateVolumesComponent extends ChartBaseElement {
     deactiveSeparateVolumes() {
         this.paneManager.removePane(SeparateVolumesComponent.UUID);
         delete this.pane;
-        this.drawingManager.removeDrawerByName('UNDERLAY_VOLUMES_AREA');
     }
     /**
      * Converts a pixel value from the Y-axis of the scale model to the corresponding data value.

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

@@ -23,7 +23,7 @@ export class VolumesComponent extends ChartBaseElement {
         const volumesModel = new VolumesModel(chartComponent, scale);
         this.volumesModel = volumesModel;
         this.addChildEntity(volumesModel);
-        this.separateVolumes = new SeparateVolumesComponent(chartComponent, drawingManager, config, volumesModel, paneManager);
+        this.separateVolumes = new SeparateVolumesComponent(chartComponent, config, volumesModel, paneManager);
         this.volumesDrawer = new VolumesDrawer(config, this.volumesModel, chartComponent.chartModel, () => { var _a, _b; return (this.config.components.volumes.showSeparately ? (_b = (_a = this.separateVolumes.pane) === null || _a === void 0 ? void 0 : _a.scale) !== null && _b !== void 0 ? _b : scale : scale); }, this.volumesColorByChartTypeMap, () => true);
         config.components.volumes.visible && this.syncVolumesDynamicObject();
         this.addChildEntity(this.separateVolumes);

package/dist/chart/components/volumes/volumes.drawer.js

@@ -101,12 +101,12 @@ export class VolumesDrawer {
                 const width = nextX !== undefined ? nextX - x : floorToDPR(unitToPixels(vCandle.width, viewportModel.zoomX));
                 if (this.config.components.volumes.showSeparately) {
                     const y = floorToDPR(viewportModel.toY(vCandle.candle.volume));
-                    const height = floorToDPR(viewportModel.toY(0)) - y;
+                    const height = ceilToDPR(viewportModel.toY(0)) - y;
                     this.drawVolume(canvasModel, vCandle, x, y, width, height);
                 }
                 else {
                     const zoomY = volumeMax / (fullVHeight / OVERLAY_VOLUME_TOTAL_HEIGHT_DIVISOR);
-                    const height = Math.max(unitToPixels(vCandle.candle.volume, zoomY), 2);
+                    const height = Math.max(ceilToDPR(unitToPixels(vCandle.candle.volume, zoomY)), 2);
                     const y = floorToDPR(bounds.y + fullVHeight - height);
                     this.drawVolume(canvasModel, vCandle, x, y, width, height);
                 }
@@ -139,7 +139,7 @@ export class VolumesDrawer {
             ctx.stroke();
         }
         else {
-            ctx.fillRect(x, y, width, ceilToDPR(height));
+            ctx.fillRect(x, y, width, height);
         }
     }
 }

package/dist/chart/components/watermark/water-mark.component.d.ts

@@ -5,21 +5,12 @@
  */
 import { CanvasBoundsContainer } from '../../canvas/canvas-bounds-container';
 import { ChartBaseElement } from '../../model/chart-base-element';
-import { FullChartConfig } from '../../chart.config';
+import { ChartConfigComponentsWaterMark, FullChartConfig } from '../../chart.config';
 import { CanvasModel } from '../../model/canvas.model';
 import { DrawingManager } from '../../drawers/drawing-manager';
 import EventBus from '../../events/event-bus';
 import { ChartModel } from '../chart/chart.model';
 import { PaneManager } from '../pane/pane-manager.component';
-export interface WaterMarkConfig {
-    isVisible?: boolean;
-    fontFamily?: string;
-    firstRowFontSize?: number;
-    firstRowBottomPadding?: number;
-    secondRowFontSize?: number;
-    secondRowBottomPadding?: number;
-    thirdRowFontSize?: number;
-}
 export interface WaterMarkData {
     firstRow?: string;
     secondRow?: string;
@@ -55,11 +46,11 @@ export declare class WaterMarkComponent extends ChartBaseElement {
     private getWaterMarkData;
     /**
      * Sets the watermark configuration for the chart.
-     * @param {WaterMarkConfig} watermarkConfig - The configuration object for the watermark.
+     * @param {ChartConfigComponentsWaterMark} watermarkConfig - The configuration object for the watermark.
      * @returns {void}
      
     */
-    setWaterMarkConfig(watermarkConfig: WaterMarkConfig): void;
+    setWaterMarkConfig(watermarkConfig: ChartConfigComponentsWaterMark): void;
     /**
      * Sets the logo image to be used as a watermark.
      * @param {CanvasImageSource} img - The image to be used as a watermark.

package/dist/chart/components/watermark/water-mark.component.js

@@ -56,7 +56,7 @@ export class WaterMarkComponent extends ChartBaseElement {
     }
     /**
      * Sets the watermark configuration for the chart.
-     * @param {WaterMarkConfig} watermarkConfig - The configuration object for the watermark.
+     * @param {ChartConfigComponentsWaterMark} watermarkConfig - The configuration object for the watermark.
      * @returns {void}
      
     */

package/dist/chart/components/x_axis/time/parser/time-formats-parser.functions.js

@@ -75,7 +75,7 @@ export const parseTimeFormatsFromKey = (format) => {
         };
     }
     else {
-        console.warn(`${format} is not fit, check the documentation to see available formats https://webdev.prosp.devexperts.com:8095/docs/chart/x-axis`);
+        console.warn(`${format} is not fit, check the documentation to see available formats in dxchart-lite documentation.`);
         return null;
     }
 };

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,23 +36,48 @@ 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
             this.hitTestCanvasModel.hitTestDrawersPredicateSubject.next(true);
         };
-        this.setDblTapCallback = (cb) => this.dblTapCallback = cb;
-        this.setDblClickCallback = (cb) => this.dblClickCallback = cb;
+        this.setDblTapCallback = (cb) => (this.dblTapCallback = cb);
+        this.setDblClickCallback = (cb) => (this.dblClickCallback = cb);
         this.dblClickCallback = () => chartModel.doBasicScale();
         this.dblTapCallback = () => chartModel.doBasicScale();
         const dragNDropXComponent = new DragNDropXComponent(hitTest, {