@devexperts/dxcharts-lite 2.1.0 → 2.3.0

package/README.md

@@ -23,7 +23,7 @@
     <img src="https://img.shields.io/static/v1?label=PRs&message=Welcome&color=blue" alt="PRs: Welcome" />
   </a>&nbsp;
   <a href="https://devexperts.com/dxcharts-demo/?lang=en">
-    <img src="https://img.shields.io/static/v1?label=Latest%20version&message=2.1.0&color=blue" alt="Version" />
+    <img src="https://img.shields.io/static/v1?label=Latest%20version&message=2.2.0&color=blue" alt="Version" />
   </a>
 </p>
 

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

@@ -35,11 +35,11 @@ export declare class CanvasElement {
     static CHART_WITH_Y_AXIS: string;
     static EVENTS: string;
     /**
-     * @deprecated - use CanvasElement.PANE_UUID(CHART_UUID) instead
+     * @returns pane bounds for the main chart
      */
     static CHART: string;
     /**
-     * @deprecated - use CanvasElement.PANE_UUID_Y_AXIS(CHART_UUID) instead
+     * @returns y-axis bounds for the main chart
      */
     static Y_AXIS: string;
 }

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

@@ -31,11 +31,11 @@ CanvasElement.ALL_PANES = 'ALL_PANES';
 CanvasElement.CHART_WITH_Y_AXIS = 'CHART_WITH_Y_AXIS';
 CanvasElement.EVENTS = 'EVENTS';
 /**
- * @deprecated - use CanvasElement.PANE_UUID(CHART_UUID) instead
+ * @returns pane bounds for the main chart
  */
 CanvasElement.CHART = CanvasElement.PANE_UUID(CHART_UUID);
 /**
- * @deprecated - use CanvasElement.PANE_UUID_Y_AXIS(CHART_UUID) instead
+ * @returns y-axis bounds for the main chart
  */
 CanvasElement.Y_AXIS = CanvasElement.PANE_UUID_Y_AXIS(CHART_UUID);
 export { CanvasElement };

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

@@ -233,10 +233,23 @@ export interface ChartScale {
      * When dragging chart under specific angle - will automatically disable auto-scale.
      */
     autoScaleDisableOnDrag: AutoScaleDisableOnDrag;
-    /**
-     * 0..1 ratio of full viewport; 0.5 = middle, 0.75 = 3/4 of viewport
-     */
-    zoomSensitivity: number;
+    zoomSensitivity: {
+        /**
+         * Value is related to zoom event (zooming chart via mouse wheel)
+         * 0..1 ratio of full viewport; 0.5 = middle, 0.75 = 3/4 of viewport
+         */
+        wheel: number;
+        /**
+         * Value is related to pinch touchpad event (zooming chart via touchpad)
+         * 0..1 ratio of full viewport; 0.5 = middle, 0.75 = 3/4 of viewport
+         */
+        pinch: number;
+        /**
+         * Value is related to glide touchpad event (scrolling chart via touchpad)
+         * 0..1 ratio of full viewport; 0.5 = middle, 0.75 = 3/4 of viewport
+         */
+        glide: number;
+    };
     /**
      * Defines how much items (candles) will be in viewport when chart applies basic scale
      */

package/dist/chart/chart.config.js

@@ -41,9 +41,13 @@ export const getDefaultConfig = () => ({
             yDiff: 80,
         },
         inverse: false,
-        zoomSensitivity: 0.25,
+        zoomSensitivity: {
+            wheel: 0.25,
+            pinch: 0.05,
+            glide: 0.05,
+        },
         defaultViewportItems: 100,
-        disableAnimations: false
+        disableAnimations: false,
     },
     timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
     components: {

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

@@ -60,10 +60,8 @@ export class ChartAreaPanHandler extends ChartBaseElement {
          * @param {WheelEvent} e - Wheel event
          * @returns {void}
          */
-        this.zoomXHandler = (e) => {
-            const isTouchpad = touchpadDetector(e);
+        this.zoomXHandler = (e, zoomSensitivity) => {
             const zoomIn = e.deltaY < 0;
-            const zoomSensitivity = isTouchpad ? getTouchpadSensitivity(this.config) : this.config.scale.zoomSensitivity;
             if (this.config.scale.zoomToCursor) {
                 const b = this.canvasBoundsContainer.getBounds(CanvasElement.CANVAS);
                 const canvasW = b.width;
@@ -115,7 +113,13 @@ export class ChartAreaPanHandler extends ChartBaseElement {
         //#endregion
         this.addRxSubscription(merge(this.canvasInputListener.observeWheel(allPanesHitTest), this.canvasInputListener.observePinch(allPanesHitTest))
             .pipe(throttleTime(this.wheelTrottleTime, undefined, { trailing: true, leading: true }))
-            .subscribe(this.zoomXHandler));
+            .subscribe(e => {
+            const isTouchpad = touchpadDetector(e);
+            const zoomSensitivity = isTouchpad
+                ? getTouchpadSensitivity(this.config.components.yAxis.type, this.config.scale.zoomSensitivity.pinch)
+                : this.config.scale.zoomSensitivity.wheel;
+            this.zoomXHandler(e, zoomSensitivity);
+        }));
         this.addRxSubscription(this.canvasInputListener
             .observeScrollGesture()
             .pipe(throttleTime(this.wheelTrottleTime, undefined, { trailing: true, leading: true }))
@@ -134,7 +138,8 @@ export class ChartAreaPanHandler extends ChartBaseElement {
                 this.scale.moveXStart(this.scale.xStart - unitsDelta);
             }
             else if (deltaY !== 0 && Math.abs(deltaY) > Math.abs(deltaX)) {
-                this.zoomXHandler(e);
+                const zoomSensitivity = getTouchpadSensitivity(this.config.components.yAxis.type, this.config.scale.zoomSensitivity.glide);
+                this.zoomXHandler(e, zoomSensitivity);
             }
             this.bus.fireDraw();
         }));

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

@@ -107,7 +107,7 @@ export class CrossToolModel extends ChartBaseElement {
         else {
             this.currentHover.y = hover.y;
         }
-        this.currentHover.paneId = CHART_UUID;
+        this.currentHover.paneId = hover.paneId;
         this.currentHoverSubject.next(this.currentHover);
     }
 }

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

@@ -40,6 +40,7 @@ export class SnapshotComponent extends ChartBaseElement {
             ctx.drawImage(this.elements.mainCanvas, 0, 0, width, height);
             ctx.drawImage(this.elements.dynamicObjectsCanvas, 0, 0, width, height);
             ctx.drawImage(this.elements.crossToolCanvas, 0, 0, width, height);
+            ctx.drawImage(this.elements.yAxisLabelsCanvas, 0, 0, width, height);
             userDrawCallback && userDrawCallback(ctx);
             return new Promise((resolve, fail) => this.elements.snapshotCanvas.toBlob(blob => {
                 return blob ? resolve(blob) : fail('Blob is null');

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

@@ -31,9 +31,10 @@ class SeparateVolumesComponent extends ChartBaseElement {
      */
     activateSeparateVolumes() {
         if (this.paneManager.panes[SeparateVolumesComponent.UUID] === undefined) {
+            const precision = 1;
             const volumePane = this.paneManager.createPane(SeparateVolumesComponent.UUID, {
                 paneFormatters: {
-                    regular: volumeFormatter,
+                    regular: (value) => volumeFormatter(value, precision),
                 },
                 useDefaultHighLow: false,
                 increment: 1,

package/dist/chart/components/volumes/volumes.formatter.d.ts

@@ -3,4 +3,4 @@
  * This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
-export declare const volumeFormatter: (value: number) => string;
+export declare const volumeFormatter: (value: number, precision?: number) => string;

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

@@ -3,34 +3,37 @@
  * 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/.
  */
-const DEFAULT_PRECISION = 5;
-const MIN_VALUE = 0.0000000001;
-const TRAILLING_ZEROES_REGEXP = /\.?0+$/;
-const TRAILLING_FRACTION_WITH_ZEROES_REGEXP = /(\.[1-9]*)0+$/;
-export const volumeFormatter = (value) => {
-    const formatValue = (value, amountToCut) => {
-        const rounder = Math.pow(10, DEFAULT_PRECISION);
-        const roundedValue = Math.round(value * rounder) / rounder;
-        if (roundedValue < 1 && roundedValue >= MIN_VALUE) {
-            return roundedValue
-                .toFixed(DEFAULT_PRECISION)
-                .replace(TRAILLING_ZEROES_REGEXP, '')
-                .replace(TRAILLING_FRACTION_WITH_ZEROES_REGEXP, '');
+export const volumeFormatter = (value, precision = 1) => {
+    function formatNumber(value) {
+        let formattedResult;
+        const priceScale = Math.pow(10, precision);
+        value = Math.round(value * priceScale) / priceScale;
+        if (value >= 1e-15 && value < 1) {
+            formattedResult = value.toFixed(precision).replace(/\.?0+$/, ''); // regex removes trailing zeroes
         }
         else {
-            return (roundedValue + '').replace(TRAILLING_FRACTION_WITH_ZEROES_REGEXP, '') + (amountToCut || '');
+            formattedResult = String(value);
         }
-    };
-    if (Math.abs(value) > 999999999) {
-        value = Math.round(value / 1000000) * 1000000;
-        return formatValue(value / 1000000000, 'B');
+        return formattedResult.replace(/(\.[1-9]*)0+$/, (e, p1) => p1);
     }
-    if (Math.abs(value) > 999999) {
-        value = 1000 * Math.round(value / 1000);
-        return formatValue(value / 1000000, 'M');
-    }
-    if (Math.abs(value) > 9999) {
-        return formatValue(value / 1000, 'K');
+    function format(value) {
+        let sign = '';
+        if (value < 0) {
+            sign = '-';
+            value = -value;
+        }
+        if (value < 995) {
+            return sign + formatNumber(value);
+        }
+        if (value < 999995) {
+            return sign + formatNumber(value / 1000) + 'K';
+        }
+        if (value < 999999995) {
+            value = 1000 * Math.round(value / 1000);
+            return sign + formatNumber(value / 1000000) + 'M';
+        }
+        value = 1000000 * Math.round(value / 1000000);
+        return sign + formatNumber(value / 1000000000) + 'B';
     }
-    return formatValue(value);
+    return format(value);
 };

package/dist/chart/components/y_axis/y-axis-scale.handler.d.ts

@@ -9,23 +9,24 @@ import { YAxisConfig } from '../../chart.config';
 import EventBus from '../../events/event-bus';
 import { ChartBaseElement } from '../../model/chart-base-element';
 import { CanvasInputListenerComponent } from '../../inputlisteners/canvas-input-listener.component';
-import { Pixel, Unit, ViewportModel } from '../../model/scaling/viewport.model';
+import { Pixel, Unit } from '../../model/scaling/viewport.model';
 import { ChartPanComponent } from '../pan/chart-pan.component';
+import { ScaleModel } from '../../model/scale.model';
 /**
  * Handles the mouse drag on Y axis - to zoom the viewport vertically.
  * @doc-tags scaling,zoom,viewport
  */
 export declare class YAxisScaleHandler extends ChartBaseElement {
     private bus;
-    private viewportModel;
-    private canvasBoundsContainer;
+    private scale;
+    private bounds;
     private autoScaleCallback;
     yAxisDragEndSubject: Subject<void>;
     lastYStart: Unit;
     lastYEnd: Unit;
     lastYHeight: Unit;
     lastYPxHeight: Pixel;
-    constructor(bus: EventBus, config: YAxisConfig, chartPanComponent: ChartPanComponent, viewportModel: ViewportModel, canvasInputListener: CanvasInputListenerComponent, canvasBoundsContainer: CanvasBoundsContainer, hitTest: HitBoundsTest, autoScaleCallback: (auto: boolean) => void);
+    constructor(bus: EventBus, config: YAxisConfig, panning: ChartPanComponent, scale: ScaleModel, canvasInputListener: CanvasInputListenerComponent, bounds: CanvasBoundsContainer, hitTest: HitBoundsTest, autoScaleCallback: (auto: boolean) => void);
     private onYDragStart;
     private onYDragTick;
     private onYDragEnd;

package/dist/chart/components/y_axis/y-axis-scale.handler.js

@@ -14,11 +14,11 @@ const FULL_Y_HEIGHT_ZOOM_FACTOR = 10;
  * @doc-tags scaling,zoom,viewport
  */
 export class YAxisScaleHandler extends ChartBaseElement {
-    constructor(bus, config, chartPanComponent, viewportModel, canvasInputListener, canvasBoundsContainer, hitTest, autoScaleCallback) {
+    constructor(bus, config, panning, scale, canvasInputListener, bounds, hitTest, autoScaleCallback) {
         super();
         this.bus = bus;
-        this.viewportModel = viewportModel;
-        this.canvasBoundsContainer = canvasBoundsContainer;
+        this.scale = scale;
+        this.bounds = bounds;
         this.autoScaleCallback = autoScaleCallback;
         this.yAxisDragEndSubject = new Subject();
         this.lastYStart = 0;
@@ -26,10 +26,10 @@ export class YAxisScaleHandler extends ChartBaseElement {
         this.lastYHeight = 0;
         this.lastYPxHeight = 0;
         this.onYDragStart = () => {
-            this.lastYStart = this.viewportModel.yStart;
-            this.lastYEnd = this.viewportModel.yEnd;
-            this.lastYHeight = this.viewportModel.yEnd - this.viewportModel.yStart;
-            this.lastYPxHeight = this.canvasBoundsContainer.getBounds(CanvasElement.Y_AXIS).height;
+            this.lastYStart = this.scale.yStart;
+            this.lastYEnd = this.scale.yEnd;
+            this.lastYHeight = this.scale.yEnd - this.scale.yStart;
+            this.lastYPxHeight = this.bounds.getBounds(CanvasElement.Y_AXIS).height;
         };
         this.onYDragTick = (dragInfo) => {
             const { delta: absoluteYDelta } = dragInfo;
@@ -48,7 +48,7 @@ export class YAxisScaleHandler extends ChartBaseElement {
             const newYStart = this.lastYStart - delta;
             const newYEnd = this.lastYEnd + delta;
             this.autoScaleCallback(false);
-            this.viewportModel.setYScale(newYStart, newYEnd);
+            this.scale.setYScale(newYStart, newYEnd);
             this.bus.fireDraw();
         };
         this.onYDragEnd = () => {
@@ -61,7 +61,7 @@ export class YAxisScaleHandler extends ChartBaseElement {
                 onDragTick: callIfPredicateTrue(this.onYDragTick, dragPredicate),
                 onDragStart: callIfPredicateTrue(this.onYDragStart, dragPredicate),
                 onDragEnd: callIfPredicateTrue(this.onYDragEnd, dragPredicate),
-            }, canvasInputListener, chartPanComponent, {
+            }, canvasInputListener, panning, {
                 disableChartPanning: false,
             });
             this.addChildEntity(dragNDropYComponent);

package/dist/chart/components/y_axis/y-axis.component.js

@@ -151,6 +151,7 @@ export class YAxisComponent extends ChartBaseElement {
     setAxisType(type) {
         if (type !== this.state.type) {
             this.state.type = type;
+            this.config.components.yAxis.type = type;
             this.axisTypeSetSubject.next(type);
             this.scale.autoScale(true);
             this.model.fancyLabelsModel.updateLabels(true);

package/dist/chart/drawers/data-series.drawer.js

@@ -53,7 +53,7 @@ export const setLineWidth = (ctx, lineWidth, dataSeries, drawerConfig, seriesSel
         ctx.lineWidth = drawerConfig.forceBold;
     }
     else if (dataSeries.hovered) {
-        ctx.lineWidth = seriesSelectedWidth;
+        ctx.lineWidth = lineWidth !== seriesSelectedWidth ? lineWidth + 1 : seriesSelectedWidth;
     }
     else {
         ctx.lineWidth = lineWidth;

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

@@ -3,7 +3,8 @@
  * 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 { BehaviorSubject, combineLatest, filter } from 'rxjs';
+import { BehaviorSubject, combineLatest } from 'rxjs';
+import { filter } from 'rxjs/operators';
 import { ChartBaseElement } from '../model/chart-base-element';
 export class CrossEventProducerComponent extends ChartBaseElement {
     constructor(canvasInputListener, canvasBoundsContainer) {

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

@@ -84,7 +84,7 @@ export class HoverProducerComponent extends ChartBaseElement {
         // special handling for mobile
         // on long touch - disable panning and show cross tool
         const hitTest = this.canvasBoundsContainer.getBoundsHitTest(CanvasElement.ALL_PANES);
-        this.addRxSubscription(this.canvasInputListener.observeLongTouch(hitTest).subscribe(event => {
+        this.addRxSubscription(this.canvasInputListener.observeLongTouchStart(hitTest).subscribe(event => {
             this.paneManager.chartPanComponent.deactivatePanHandlers();
             this.longTouchActivatedSubject.next(true);
             const x = event.touches[0].clientX - this.canvasBoundsContainer.canvasOnPageLocation.x;

package/dist/chart/inputlisteners/canvas-input-listener.component.d.ts

@@ -44,13 +44,16 @@ export declare class CanvasInputListenerComponent extends ChartBaseElement {
     private mouseUpDocumentSubject;
     private wheelSubject;
     private touchStartSubject;
+    private touchStartTimestamp;
     private touchMoveSubject;
     private touchEndSubject;
     private touchCancelSubject;
+    private longTouchStartSubject;
+    private longTouchEndSubject;
     private contextMenuSubject;
-    private longTouchSubject;
     private pinchSubject;
     private scrollGestureSubject;
+    private fastTouchScroll;
     mouseLeavesCanvasSubject: Subject<boolean>;
     dragStartPoint: Point;
     prevDragPoint: Point;
@@ -300,11 +303,24 @@ export declare class CanvasInputListenerComponent extends ChartBaseElement {
      */
     observeContextMenu(hitBoundsTest?: HitBoundsTest): Observable<MouseEvent>;
     /**
-     * Returns an Observable that emits a TouchEvent when a long touch is detected on the current element.
+     * Returns an Observable that emits a TouchEvent when a long touch start is detected on the current element.
      * @param {HitBoundsTest} [hitBoundsTest=() => true] - A function that returns a boolean indicating whether the touch event occurred within the bounds of the current element.
      * @returns {Observable<TouchEvent>} - An Observable that emits a TouchEvent when a long touch is detected on the current element.
      */
-    observeLongTouch(hitBoundsTest?: HitBoundsTest): Observable<TouchEvent>;
+    observeLongTouchStart(hitBoundsTest?: HitBoundsTest): Observable<TouchEvent>;
+    /**
+     * Returns an Observable that emits a TouchEvent when a long touch end is detected on the current element.
+     * @param {HitBoundsTest} [hitBoundsTest=() => true] - A function that returns a boolean indicating whether the touch event occurred within the bounds of the current element.
+     * @returns {Observable<TouchEvent>} - An Observable that emits a TouchEvent when a long touch is detected on the current element.
+     */
+    observeLongTouchEnd(hitBoundsTest?: HitBoundsTest): Observable<TouchEvent>;
+    /**
+     * Returns an Observable that emits a Touch whenever a fast scroll is detected.
+     * Fast scroll happens whenever chart or any other pane were moved faster than usual
+     * The Observable is created from a Subject that is subscribed to by the component's template.
+     * @returns {Observable<TouchEvent>} An Observable that emits a TouchEvent whenever a fast scroll is detected.
+     */
+    observeFastTouchScroll(hitBoundsTest?: HitBoundsTest): Observable<TouchEvent>;
     /**
      * Returns the current point of the object.
      * @returns {Point} The current point of the object.

package/dist/chart/inputlisteners/canvas-input-listener.component.js

@@ -8,8 +8,8 @@ import { merge, Subject } from 'rxjs';
 import { ChartBaseElement } from '../model/chart-base-element';
 import { distinctUntilChanged, filter, map, tap } from 'rxjs/operators';
 import { EVENT_RESIZED } from '../events/events';
-import { deviceDetector } from '../utils/device/device-detector.utils';
 import { touchpadDetector } from '../utils/device/touchpad.utils';
+import { deviceDetector } from '../utils/device/device-detector.utils';
 /**
  * Gathers user input on canvas element:
  * Chart update order should be following:
@@ -46,13 +46,16 @@ class CanvasInputListenerComponent extends ChartBaseElement {
         this.mouseUpDocumentSubject = new Subject();
         this.wheelSubject = new Subject();
         this.touchStartSubject = new Subject();
+        this.touchStartTimestamp = 0;
         this.touchMoveSubject = new Subject();
         this.touchEndSubject = new Subject();
         this.touchCancelSubject = new Subject();
+        this.longTouchStartSubject = new Subject();
+        this.longTouchEndSubject = new Subject();
         this.contextMenuSubject = new Subject();
-        this.longTouchSubject = new Subject();
         this.pinchSubject = new Subject();
         this.scrollGestureSubject = new Subject();
+        this.fastTouchScroll = new Subject();
         this.mouseLeavesCanvasSubject = new Subject();
         // point at which start dragging
         this.dragStartPoint = { x: 0, y: 0 };
@@ -184,52 +187,84 @@ class CanvasInputListenerComponent extends ChartBaseElement {
         const device = deviceDetector();
         if (device === 'apple' || device === 'mobile') {
             // workaround to handle double taps for iOS
-            const doubleTapListenerProducer = () => {
-                let timeoutId = null;
-                return () => {
-                    if (timeoutId) {
-                        this.dbTapSubject.next(this.currentPoint);
-                        clearTimeout(timeoutId);
-                        timeoutId = null;
+            let dbTapTimeout = null;
+            const doubleTapListenerProducer = (e) => {
+                e.preventDefault();
+                if (dbTapTimeout) {
+                    this.dbTapSubject.next(this.currentPoint);
+                    clearTimeout(dbTapTimeout);
+                    dbTapTimeout = null;
+                }
+                else {
+                    dbTapTimeout = window.setTimeout(() => {
+                        dbTapTimeout = null;
+                    }, 250);
+                }
+            };
+            this.addSubscription(subscribeListener(this.element, doubleTapListenerProducer, 'touchend'));
+            // workaround to handle long touch start/end for iOS
+            const longTouchListeners = (e, delay = 700, pixelsForMoveReset = 3) => {
+                e.preventDefault();
+                const initialCoords = { x: e.touches[0].clientX, y: e.touches[0].clientY };
+                let coords = { x: 0, y: 0 };
+                let longTouchStart = false;
+                let timerLongTouchStart = null;
+                // start timeout for long touch
+                timerLongTouchStart = setTimeout(() => {
+                    longTouchStart = true;
+                    this.longTouchStartSubject.next(e);
+                }, delay);
+                const touchMoveHandler = (e) => {
+                    e.preventDefault();
+                    coords = { x: e.touches[0].clientX, y: e.touches[0].clientY };
+                    // clear long touch timeout if move area is bigger than pixelsForMove
+                    if (Math.sqrt(Math.pow(coords.x - initialCoords.x, 2) + Math.pow(coords.y - initialCoords.y, 2)) >
+                        pixelsForMoveReset ||
+                        e.touches.length > 1) {
+                        timerLongTouchStart && clearTimeout(timerLongTouchStart);
                     }
-                    else {
-                        timeoutId = window.setTimeout(() => {
-                            timeoutId = null;
-                        }, 250);
+                };
+                const touchEndHandler = (e) => {
+                    e.preventDefault();
+                    timerLongTouchStart && clearTimeout(timerLongTouchStart);
+                    if (longTouchStart) {
+                        longTouchStart = false;
+                        this.longTouchEndSubject.next(e);
                     }
+                    this.element.removeEventListener('touchend', touchEndHandler);
+                    this.element.removeEventListener('touchmove', touchMoveHandler);
                 };
+                this.element.addEventListener('touchmove', touchMoveHandler);
+                this.element.addEventListener('touchend', touchEndHandler);
             };
-            const doubleTapListener = doubleTapListenerProducer();
-            this.addSubscription(subscribeListener(this.element, doubleTapListener, 'touchend'));
-        }
-        const longTouchListener = (e, delay = 500, pixelsForMoveReset = 2) => {
-            e.preventDefault();
-            let timer = null;
-            const initialCoords = { x: e.touches[0].clientX, y: e.touches[0].clientY };
-            let coords = { x: 0, y: 0 };
-            const touchMoveHandler = (e) => {
-                coords = { x: e.touches[0].clientX, y: e.touches[0].clientY };
-                if (Math.sqrt(Math.pow(coords.x - initialCoords.x, 2) + Math.pow(coords.y - initialCoords.y, 2)) >
-                    pixelsForMoveReset ||
-                    e.touches.length > 1) {
-                    touchEnd();
-                }
-            };
-            const touchEnd = () => {
-                if (timer) {
-                    clearTimeout(timer);
-                    timer = null;
+            this.addSubscription(subscribeListener(this.element, (e) => longTouchListeners(e), 'touchstart'));
+            const fastScrollListenerProducer = (e) => {
+                e.preventDefault();
+                // should work only if dragged to the left
+                if (this.prevDragPoint.x > this.dragStartPoint.x) {
+                    // in percent, perhaps should be changed to just pixels,
+                    // because landscape and portait orientations would give different % results
+                    const minDistance = 35;
+                    // in ms, should be lower to detect as "fast"
+                    const maxTime = 250;
+                    const touchStartTs = this.touchStartTimestamp;
+                    const touchEndTs = Date.now();
+                    const time = touchEndTs - touchStartTs;
+                    const distance = ((this.prevDragPoint.x - this.dragStartPoint.x) / this.canvasBounds.width) * 100;
+                    const isRightDistance = distance > minDistance;
+                    const isRightTime = time <= maxTime;
+                    if (isRightDistance && isRightTime) {
+                        this.fastTouchScroll.next(e);
+                    }
                 }
-                this.element.removeEventListener('touchend', touchEnd);
-                this.element.removeEventListener('touchmove', touchMoveHandler);
             };
-            timer = setTimeout(() => this.longTouchSubject.next(e), delay);
-            this.element.addEventListener('touchmove', touchMoveHandler, { passive: true });
-            this.element.addEventListener('touchend', touchEnd);
-        };
-        this.addSubscription(subscribeListener(this.element, (e) => longTouchListener(e), 'touchstart'));
+            this.addSubscription(subscribeListener(this.element, fastScrollListenerProducer, 'touchend'));
+        }
         this.addSubscription(subscribeListener(this.element, leftMouseButtonListener(() => this.dbClickSubject.next(this.currentPoint)), 'dblclick'));
-        this.addSubscription(subscribeListener(this.element, (e) => this.touchStartSubject.next(e), 'touchstart'));
+        this.addSubscription(subscribeListener(this.element, (e) => {
+            this.touchStartSubject.next(e);
+            this.touchStartTimestamp = Date.now();
+        }, 'touchstart'));
         this.addSubscription(subscribeListener(this.element, (e) => this.touchMoveSubject.next(e), 'touchmove', true));
         this.addSubscription(subscribeListener(this.element, (e) => this.touchEndSubject.next(e), 'touchend'));
         this.addSubscription(subscribeListener(this.element, (e) => this.touchCancelSubject.next(e), 'touchcancel'));
@@ -615,12 +650,35 @@ class CanvasInputListenerComponent extends ChartBaseElement {
         return this.contextMenuSubject.asObservable().pipe(filter(() => hitBoundsTest(this.currentPoint.x, this.currentPoint.y)), tap(p => p.preventDefault()));
     }
     /**
-     * Returns an Observable that emits a TouchEvent when a long touch is detected on the current element.
+     * Returns an Observable that emits a TouchEvent when a long touch start is detected on the current element.
      * @param {HitBoundsTest} [hitBoundsTest=() => true] - A function that returns a boolean indicating whether the touch event occurred within the bounds of the current element.
      * @returns {Observable<TouchEvent>} - An Observable that emits a TouchEvent when a long touch is detected on the current element.
      */
-    observeLongTouch(hitBoundsTest = () => true) {
-        return this.longTouchSubject.asObservable().pipe(filter(() => hitBoundsTest(this.currentPoint.x, this.currentPoint.y)), tap(p => p.preventDefault()));
+    observeLongTouchStart(hitBoundsTest = () => true) {
+        return this.longTouchStartSubject
+            .asObservable()
+            .pipe(filter(() => hitBoundsTest(this.currentPoint.x, this.currentPoint.y)));
+    }
+    /**
+     * Returns an Observable that emits a TouchEvent when a long touch end is detected on the current element.
+     * @param {HitBoundsTest} [hitBoundsTest=() => true] - A function that returns a boolean indicating whether the touch event occurred within the bounds of the current element.
+     * @returns {Observable<TouchEvent>} - An Observable that emits a TouchEvent when a long touch is detected on the current element.
+     */
+    observeLongTouchEnd(hitBoundsTest = () => true) {
+        return this.longTouchEndSubject
+            .asObservable()
+            .pipe(filter(() => hitBoundsTest(this.currentPoint.x, this.currentPoint.y)));
+    }
+    /**
+     * Returns an Observable that emits a Touch whenever a fast scroll is detected.
+     * Fast scroll happens whenever chart or any other pane were moved faster than usual
+     * The Observable is created from a Subject that is subscribed to by the component's template.
+     * @returns {Observable<TouchEvent>} An Observable that emits a TouchEvent whenever a fast scroll is detected.
+     */
+    observeFastTouchScroll(hitBoundsTest = () => true) {
+        return this.fastTouchScroll
+            .asObservable()
+            .pipe(filter(() => hitBoundsTest(this.currentPoint.x, this.currentPoint.y)));
     }
     /**
      * Returns the current point of the object.

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

@@ -71,13 +71,13 @@ export declare class ScaleModel extends ViewportModel {
      * @param forceNoAnimation Whether to skip animation.
      * @param zoomSensitivity The sensitivity of the zoom.
      */
-    zoomXToPercent(viewportPercent: ViewportPercent, zoomIn: boolean, forceNoAnimation?: boolean, zoomSensitivity?: number): void;
+    zoomXToPercent(viewportPercent: ViewportPercent, zoomIn: boolean, forceNoAnimation: boolean | undefined, zoomSensitivity: number): void;
     /**
      * Zooms the X axis of the chart relativly to the end of the data range.
      * @param zoomIn - If true, the chart will be zoomed in. If false, the chart will be zoomed out.
      * @param zoomSensitivity - The sensitivity of the zoom. Default value is taken from the configuration object.
      */
-    zoomXToEnd(zoomIn: boolean, zoomSensitivity?: number): void;
+    zoomXToEnd(zoomIn: boolean, zoomSensitivity: number): void;
     haltAnimation(): void;
     private zoomXTo;
     /**
@@ -89,6 +89,7 @@ export declare class ScaleModel extends ViewportModel {
      * @param forceNoAutoScale - force NOT apply auto-scaling (for lazy loading)
      */
     setXScale(xStart: Unit, xEnd: Unit): void;
+    setYScale(yStart: Unit, yEnd: Unit, fire?: boolean): void;
     /**
      * Moves both xStart and xEnd without changing the viewport width (zoom).
      * Works without animation.