@devexperts/dxcharts-lite 2.6.0 → 2.6.2

package/dist/chart/components/events/events.drawer.d.ts

@@ -5,12 +5,12 @@
  */
 import { Bounds } from '../../model/bounds.model';
 import { CanvasBoundsContainer } from '../../canvas/canvas-bounds-container';
-import { CustomIcon, FullChartConfig } from '../../chart.config';
+import { FullChartConfig, EventColors } from '../../chart.config';
 import { CanvasModel } from '../../model/canvas.model';
 import { Drawer } from '../../drawers/drawing-manager';
 import { DateTimeFormatter } from '../../model/date-time.formatter';
 import { ChartModel } from '../chart/chart.model';
-import { EconomicEvent, EventsModel, EventType, EventWithId } from './events.model';
+import { EconomicEvent, EventsModel, EventWithId } from './events.model';
 export declare class EventsDrawer implements Drawer {
     private canvasModel;
     private chartModel;
@@ -20,22 +20,6 @@ export declare class EventsDrawer implements Drawer {
     private formatterProvider;
     private customIcons;
     constructor(canvasModel: CanvasModel, chartModel: ChartModel, config: FullChartConfig, canvasBoundsContainer: CanvasBoundsContainer, model: EventsModel, formatterProvider: () => DateTimeFormatter);
-    /**
-     * Creates a custom icon for a given event type.
-     * @param {EventType} type - The type of the event.
-     * @param {CustomIcon} [icon] - The custom icon object containing the normal and hover images.
-     * @returns {void}
-     */
-    createCustomIcon(type: EventType, icon?: CustomIcon): void;
-    /**
-     * Creates an icon image from a string containing SVG data.
-     * @param {string} iconString - The string containing SVG data.
-     * @returns {Object} An object containing an Image object and the height of the SVG element.
-     */
-    createIconImage(iconString: string): {
-        img: HTMLImageElement;
-        svgHeight: number;
-    };
     /**
      * Draws events on the chart canvas if they are visible according to the configuration.
      * The events are filtered by type and then iterated over to draw them on the chart.
@@ -44,25 +28,16 @@ export declare class EventsDrawer implements Drawer {
      * @returns {void}
      */
     draw(): void;
-    /**
-     * Draws a custom SVG event on a canvas context.
-     * @param {CanvasRenderingContext2D} ctx - The canvas context to draw on.
-     * @param {number} x - The x coordinate of the event.
-     * @param {Bounds} bounds - The bounds of the event.
-     * @param {EventWithId} event - The event to draw.
-     * @returns {void}
-     */
-    drawCustomSvgEvent(ctx: CanvasRenderingContext2D, x: number, bounds: Bounds, event: EventWithId): void;
     /**
      * Draws a default event on a canvas context.
      * @param {CanvasRenderingContext2D} ctx - The canvas context to draw on.
      * @param {number} x - The x coordinate of the event.
      * @param {Bounds} bounds - The bounds of the event.
      * @param {EventWithId} event - The event to draw.
-     * @param {string} color - The color of the event.
+     * @param {EventColors} colors - The colors of the event.
      * @returns {void}
      */
-    drawDefaultEvent(ctx: CanvasRenderingContext2D, x: number, bounds: Bounds, event: EventWithId, color: string): void;
+    drawDefaultEvent(ctx: CanvasRenderingContext2D, x: number, bounds: Bounds, event: EventWithId, colors: EventColors): void;
     /**
      * This function is responsible for drawing a label on the canvas at a given x coordinate. The label contains a formatted timestamp of a given event. The function takes two parameters: x, which is the x coordinate where the label will be drawn, and event, which is an object containing information about the event, including its timestamp and type.
      * The function first gets the canvas context and the bounds of the x-axis. It then retrieves the font family, font height, and top padding from the configuration object. The y coordinate of the label is calculated based on the font height, top padding, and the y coordinate of the x-axis bounds. The font is set using the retrieved font family and font height.
@@ -81,6 +56,6 @@ export declare class EventsDrawer implements Drawer {
  * Returns the size of an event based on its style
  * @param {EconomicEvent} event - The event to get the size of
  * @returns {number} - The size of the event
- 
+
 */
 export declare function getEventSize(event: EconomicEvent): number;

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

@@ -4,12 +4,18 @@
  * 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 { createCustomIcon, drawCustomSvgIcon, getIconHash } from './events-custom-icons';
 const eventsSizesDict = {
     'rhombus-small': 4,
     rhombus: 6,
     'rhombus-large': 8,
 };
-const getIconHash = (type, state) => `${type}_${state}`;
+const iconTypes = [
+    'earnings',
+    'dividends',
+    'splits',
+    'conference-calls',
+];
 export class EventsDrawer {
     constructor(canvasModel, chartModel, config, canvasBoundsContainer, model, formatterProvider) {
         this.canvasModel = canvasModel;
@@ -22,48 +28,14 @@ export class EventsDrawer {
         this.customIcons = {};
         const iconsConfig = this.config.components.events.icons;
         if (iconsConfig) {
-            this.createCustomIcon('earnings', iconsConfig.earnings);
-            this.createCustomIcon('dividends', iconsConfig.dividends);
-            this.createCustomIcon('splits', iconsConfig.splits);
-            this.createCustomIcon('conference-calls', iconsConfig.conferenceCalls);
-        }
-    }
-    /**
-     * Creates a custom icon for a given event type.
-     * @param {EventType} type - The type of the event.
-     * @param {CustomIcon} [icon] - The custom icon object containing the normal and hover images.
-     * @returns {void}
-     */
-    createCustomIcon(type, icon) {
-        if (icon) {
-            const normal = this.createIconImage(icon.normal);
-            const hover = this.createIconImage(icon.hover);
-            this.customIcons[getIconHash(type, 'normal')] = normal;
-            this.customIcons[getIconHash(type, 'hover')] = hover;
-        }
-    }
-    /**
-     * Creates an icon image from a string containing SVG data.
-     * @param {string} iconString - The string containing SVG data.
-     * @returns {Object} An object containing an Image object and the height of the SVG element.
-     */
-    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);
+            iconTypes.forEach(type => {
+                const customIcon = createCustomIcon(type, iconsConfig[type]);
+                if (customIcon) {
+                    this.customIcons[getIconHash(customIcon.type, 'normal')] = customIcon.normal;
+                    this.customIcons[getIconHash(customIcon.type, 'hover')] = customIcon.hover;
+                }
+            });
         }
-        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,
-        };
     }
     /**
      * Draws events on the chart canvas if they are visible according to the configuration.
@@ -83,20 +55,28 @@ export class EventsDrawer {
         this.model.events
             .filter(e => this.config.components.events.eventsVisibility[e.type])
             .forEach(event => {
+            var _a, _b, _c, _d;
             const x = this.chartModel.candleFromTimestamp(event.timestamp).xCenter(this.chartModel.scale);
             if (x > chartBounds.x && x < chartBounds.x + chartBounds.width) {
-                const color = this.config.colors.events[event.type].color;
-                ctx.strokeStyle = color;
+                const colors = this.config.colors.events[event.type];
+                ctx.strokeStyle = (_b = (_a = colors.line) !== null && _a !== void 0 ? _a : colors.normal) !== null && _b !== void 0 ? _b : colors.color;
                 // check custom icon in cache
                 if (this.customIcons[getIconHash(event.type, 'hover')] !== undefined) {
-                    this.drawCustomSvgEvent(ctx, x, bounds, event);
+                    const point = { x, y: bounds.y + bounds.height / 2 };
+                    const isHovered = this.model.hoveredEvent.getValue() === event;
+                    drawCustomSvgIcon(ctx, this.customIcons, point, event.type, isHovered);
                 }
                 else {
-                    this.drawDefaultEvent(ctx, x, bounds, event, color);
+                    this.drawDefaultEvent(ctx, x, bounds, event, colors);
                 }
                 // draw vertical line and label for the hovered event
                 if (this.model.hoveredEvent.getValue() === event) {
+                    const line = this.config.components.events.line;
+                    const width = line && line[event.type] && ((_c = line[event.type]) === null || _c === void 0 ? void 0 : _c.width);
+                    const dash = line && line[event.type] && ((_d = line[event.type]) === null || _d === void 0 ? void 0 : _d.dash);
+                    ctx.lineWidth = width !== null && width !== void 0 ? width : 1;
                     ctx.beginPath();
+                    ctx.setLineDash(dash !== null && dash !== void 0 ? dash : []);
                     ctx.moveTo(x, chartBounds.y);
                     ctx.lineTo(x, bounds.y + bounds.height / 2);
                     ctx.stroke();
@@ -109,37 +89,19 @@ export class EventsDrawer {
         });
         ctx.restore();
     }
-    /**
-     * Draws a custom SVG event on a canvas context.
-     * @param {CanvasRenderingContext2D} ctx - The canvas context to draw on.
-     * @param {number} x - The x coordinate of the event.
-     * @param {Bounds} bounds - The bounds of the event.
-     * @param {EventWithId} event - The event to draw.
-     * @returns {void}
-     */
-    drawCustomSvgEvent(ctx, x, bounds, event) {
-        const y = bounds.y + bounds.height / 2;
-        const normal = this.customIcons[getIconHash(event.type, 'normal')];
-        const hover = this.customIcons[getIconHash(event.type, 'hover')];
-        if (this.model.hoveredEvent.getValue() === event) {
-            ctx.drawImage(hover.img, x - hover.svgHeight / 2, y - hover.svgHeight / 2);
-        }
-        else {
-            ctx.drawImage(normal.img, x - normal.svgHeight / 2, y - normal.svgHeight / 2);
-        }
-    }
     /**
      * Draws a default event on a canvas context.
      * @param {CanvasRenderingContext2D} ctx - The canvas context to draw on.
      * @param {number} x - The x coordinate of the event.
      * @param {Bounds} bounds - The bounds of the event.
      * @param {EventWithId} event - The event to draw.
-     * @param {string} color - The color of the event.
+     * @param {EventColors} colors - The colors of the event.
      * @returns {void}
      */
-    drawDefaultEvent(ctx, x, bounds, event, color) {
+    drawDefaultEvent(ctx, x, bounds, event, colors) {
+        var _a, _b, _c;
         const y = bounds.y + bounds.height / 2;
-        ctx.fillStyle = color;
+        ctx.fillStyle = (_a = colors.normal) !== null && _a !== void 0 ? _a : colors.color;
         // draw figure
         ctx.lineWidth = 1.5; // 1.5 pixels
         const size = getEventSize(event);
@@ -150,9 +112,11 @@ export class EventsDrawer {
         ctx.lineTo(x, y + size);
         ctx.closePath();
         if (this.model.hoveredEvent.getValue() === event) {
+            ctx.fillStyle = (_b = colors.hover) !== null && _b !== void 0 ? _b : colors.color;
             ctx.fill();
         }
         else {
+            ctx.strokeStyle = (_c = colors.normal) !== null && _c !== void 0 ? _c : colors.color;
             ctx.stroke();
         }
     }
@@ -193,7 +157,7 @@ export class EventsDrawer {
  * Returns the size of an event based on its style
  * @param {EconomicEvent} event - The event to get the size of
  * @returns {number} - The size of the event
- 
+
 */
 export function getEventSize(event) {
     return eventsSizesDict[event.style];

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;
@@ -70,6 +71,7 @@ export declare class PaneManager extends ChartBaseElement {
     /**
      * Creates sub-plot on the chart with y-axis
      * @param uuid
+     * @param {AtLeastOne<YExtentCreationOptions>} options
      * @returns
      */
     createPane(uuid?: string, options?: AtLeastOne<YExtentCreationOptions>): PaneComponent;
@@ -107,6 +109,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, index?: number): 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

@@ -8,7 +8,7 @@ import { CHART_UUID, CanvasElement } from '../../canvas/canvas-bounds-container'
 import { ChartBaseElement } from '../../model/chart-base-element';
 import { uuid as generateUuid } from '../../utils/uuid.utils';
 import { createHighLowOffsetCalculator } from '../chart/data-series.high-low-provider';
-import { BarResizerComponent } from '../resizer/bar-resizer.component';
+import { BarResizerComponent, RESIZER_HIT_TEST_EXTENSION } from '../resizer/bar-resizer.component';
 import { createDefaultYExtentHighLowProvider, } from './extent/y-extent-component';
 import { PaneHitTestController } from './pane-hit-test.controller';
 import { PaneComponent } from './pane.component';
@@ -63,7 +63,7 @@ export class PaneManager extends ChartBaseElement {
      */
     addResizer(uuid) {
         const resizerHT = this.canvasBoundsContainer.getBoundsHitTest(CanvasElement.PANE_UUID_RESIZER(uuid), {
-            extensionY: this.config.components.paneResizer.dragZone,
+            extensionY: this.config.components.paneResizer.dragZone + RESIZER_HIT_TEST_EXTENSION,
         });
         const dragPredicate = () => this.chartBaseModel.mainVisualPoints.length !== 0;
         const dragTick = () => {
@@ -90,6 +90,7 @@ export class PaneManager extends ChartBaseElement {
     /**
      * Creates sub-plot on the chart with y-axis
      * @param uuid
+     * @param {AtLeastOne<YExtentCreationOptions>} options
      * @returns
      */
     createPane(uuid = generateUuid(), options) {
@@ -188,6 +189,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, index = 0) {
+        const pane = paneUUID && this.panes[paneUUID];
+        if (!pane) {
+            const order = direction && direction === 'above' ? index : this.panesOrder.length + index;
+            const newPane = this.createPane(paneUUID, { 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, initialExtent.yAxis.state.align);
+        }
+        initialPane.yExtentComponents.length === 0 && this.removePane(initialPane.uuid);
+    }
     /**
      * Adds cursors to the chart elements based on the provided uuid and cursor type.
      * @private
@@ -200,7 +221,7 @@ export class PaneManager extends ChartBaseElement {
         const paneResizer = CanvasElement.PANE_UUID_RESIZER(uuid);
         this.cursorHandler.setCursorForCanvasEl(pane, cursor);
         this.config.components.paneResizer.visible &&
-            this.cursorHandler.setCursorForCanvasEl(paneResizer, this.config.components.paneResizer.cursor, this.config.components.paneResizer.dragZone);
+            this.cursorHandler.setCursorForCanvasEl(paneResizer, this.config.components.paneResizer.cursor, this.config.components.paneResizer.dragZone + RESIZER_HIT_TEST_EXTENSION);
         return () => {
             this.cursorHandler.removeCursorForCanvasEl(pane);
             this.config.components.paneResizer.visible && this.cursorHandler.removeCursorForCanvasEl(paneResizer);

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';
@@ -51,6 +51,7 @@ export declare class PaneComponent extends ChartBaseElement {
      */
     ht: HitBoundsTest;
     yExtentComponents: YExtentComponent[];
+    yExtentComponentsChangedSubject: Subject<void>;
     get scale(): ScaleModel;
     get yAxis(): YAxisComponent;
     get dataSeries(): DataSeriesModel<import("../../model/data-series.model").DataSeriesPoint, import("../../model/data-series.model").VisualSeriesPoint>[];
@@ -68,8 +69,10 @@ export declare class PaneComponent extends ChartBaseElement {
     /**
      * Creates a new GridComponent instance with the provided parameters.
      * @param {string} uuid - The unique identifier of the pane.
-     * @param {ScaleModel} scaleModel - The scale model used to calculate the scale of the grid.
-     * @param {NumericYAxisLabelsGenerator} yAxisLabelsGenerator - The generator used to create the labels for the y-axis.
+     * @param {ScaleModel} scale - The scale model used to calculate the scale of the grid.
+     * @param {YAxisConfig} yAxisState - y Axis Config
+     * @param {() => NumericAxisLabel[]} yAxisLabelsGetter
+     * @param {() => Unit} yAxisBaselineGetter
      * @returns {GridComponent} - The newly created GridComponent instance.
      */
     private createGridComponent;
@@ -77,13 +80,21 @@ export declare class PaneComponent extends ChartBaseElement {
      * Creates a handler for Y-axis panning of the chart.
      * @private
      * @param {string} uuid - The unique identifier of the chart pane.
-     * @param {ScaleModel} scaleModel - The scale model of the chart.
-     * @returns {Unsubscriber}
+     * @param {ScaleModel} scale - The scale model of the chart.
+     * @returns [Unsubscriber, DragNDropYComponent]
      */
     private createYPanHandler;
     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

@@ -3,6 +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 { Subject } from 'rxjs';
 import { distinctUntilChanged } from 'rxjs/operators';
 import { areBoundsChanged, CanvasElement, } from '../../canvas/canvas-bounds-container';
 import { ChartBaseElement } from '../../model/chart-base-element';
@@ -47,6 +48,7 @@ export class PaneComponent extends ChartBaseElement {
         this.hitTestCanvasModel = hitTestCanvasModel;
         this.chartResizeHandler = chartResizeHandler;
         this.yExtentComponents = [];
+        this.yExtentComponentsChangedSubject = new Subject();
         this.getYAxisBounds = () => {
             return this.canvasBoundsContainer.getBounds(CanvasElement.PANE_UUID_Y_AXIS(this.uuid));
         };
@@ -84,8 +86,10 @@ export class PaneComponent extends ChartBaseElement {
     /**
      * Creates a new GridComponent instance with the provided parameters.
      * @param {string} uuid - The unique identifier of the pane.
-     * @param {ScaleModel} scaleModel - The scale model used to calculate the scale of the grid.
-     * @param {NumericYAxisLabelsGenerator} yAxisLabelsGenerator - The generator used to create the labels for the y-axis.
+     * @param {ScaleModel} scale - The scale model used to calculate the scale of the grid.
+     * @param {YAxisConfig} yAxisState - y Axis Config
+     * @param {() => NumericAxisLabel[]} yAxisLabelsGetter
+     * @param {() => Unit} yAxisBaselineGetter
      * @returns {GridComponent} - The newly created GridComponent instance.
      */
     createGridComponent(uuid, scale, yAxisState, yAxisLabelsGetter, yAxisBaselineGetter) {
@@ -97,8 +101,8 @@ export class PaneComponent extends ChartBaseElement {
      * Creates a handler for Y-axis panning of the chart.
      * @private
      * @param {string} uuid - The unique identifier of the chart pane.
-     * @param {ScaleModel} scaleModel - The scale model of the chart.
-     * @returns {Unsubscriber}
+     * @param {ScaleModel} scale - The scale model of the chart.
+     * @returns [Unsubscriber, DragNDropYComponent]
      */
     createYPanHandler(uuid, scale) {
         const chartPaneId = CanvasElement.PANE_UUID(uuid);
@@ -140,6 +144,7 @@ export class PaneComponent extends ChartBaseElement {
         yExtentComponent.activate();
         this.yExtentComponents.push(yExtentComponent);
         this.canvasBoundsContainer.updateYAxisWidths();
+        this.yExtentComponentsChangedSubject.next();
         return yExtentComponent;
     }
     removeExtentComponent(extentComponent) {
@@ -148,6 +153,24 @@ export class PaneComponent extends ChartBaseElement {
         // re-index extents
         this.yExtentComponents.forEach((c, idx) => (c.idx = idx));
         this.canvasBoundsContainer.updateYAxisWidths();
+        this.yExtentComponentsChangedSubject.next();
+    }
+    /**
+     * 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.yExtentComponentsChangedSubject.next();
     }
     /**
      * This method updates the view by calling the doAutoScale method of the scaleModel and firing the Draw event using the eventBus.

package/dist/chart/components/resizer/bar-resizer.component.d.ts

@@ -14,6 +14,7 @@ import { CanvasInputListenerComponent } from '../../inputlisteners/canvas-input-
 import { ChartPanComponent } from '../pan/chart-pan.component';
 import { BoundsProvider } from '../../model/bounds.model';
 import { HitTestCanvasModel } from '../../model/hit-test-canvas.model';
+export declare const RESIZER_HIT_TEST_EXTENSION: number;
 /**
  * Bar separator between panes.
  * Used to resize the areas height or just draw a fixed line.

package/dist/chart/components/resizer/bar-resizer.component.js

@@ -9,6 +9,7 @@ import { DynamicDrawerType } from '../../drawers/drawing-manager';
 import { ChartBaseElement } from '../../model/chart-base-element';
 import { DragNDropYComponent } from '../dran-n-drop_helper/drag-n-drop-y.component';
 import { BarResizerDrawer } from './bar-resizer.drawer';
+export const RESIZER_HIT_TEST_EXTENSION = 8;
 /**
  * Bar separator between panes.
  * Used to resize the areas height or just draw a fixed line.

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/components/y_axis/price_labels/y-axis-labels.model.d.ts

@@ -60,7 +60,8 @@ export declare class FancyYAxisLabelsModel extends ChartBaseElement {
      * an easier way to manage custom y-axis labels, than y-axis labels providers, but doesn't support overlapping avoidance
      */
     readonly customLabels: Record<string, VisualYAxisLabel>;
-    private labelsProviders;
+    private _labelsProviders;
+    get labelsProviders(): Record<string, Record<string, YAxisLabelsProvider>>;
     private labelsPositionRecalculatedSubject;
     private animFrameId;
     constructor(eventBus: EventBus, scale: ScaleModel, canvasBoundsContainer: CanvasBoundsContainer, state: YAxisConfig, canvasModel: CanvasModel, paneUUID: string, updateYAxisWidth: () => void, chartResizeHandler: ChartResizeHandler);
@@ -157,4 +158,5 @@ export declare class FancyYAxisLabelsModel extends ChartBaseElement {
  */
 export interface YAxisLabelsProvider {
     readonly getUnorderedLabels: () => LabelGroup[];
+    yAxisBoundsProvider?: () => Bounds;
 }

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

@@ -27,6 +27,9 @@ export const LabelsGroups = {
  * Anything but the base labels which are generated in other component {@link YAxisBaseLabelsModel}
  */
 export class FancyYAxisLabelsModel extends ChartBaseElement {
+    get labelsProviders() {
+        return this._labelsProviders;
+    }
     constructor(eventBus, scale, canvasBoundsContainer, state, canvasModel, paneUUID, updateYAxisWidth, chartResizeHandler) {
         super();
         this.eventBus = eventBus;
@@ -42,7 +45,7 @@ export class FancyYAxisLabelsModel extends ChartBaseElement {
          * an easier way to manage custom y-axis labels, than y-axis labels providers, but doesn't support overlapping avoidance
          */
         this.customLabels = {};
-        this.labelsProviders = {};
+        this._labelsProviders = {};
         this.labelsPositionRecalculatedSubject = new Subject();
         this.animFrameId = `anim_cache_${uuid()}`;
         this.initModel();