@devexperts/dxcharts-lite 2.2.0 → 2.4.0

package/dist/chart/bootstrap.js

@@ -106,8 +106,9 @@ export default class ChartBootstrap {
         // canvas animation container
         const canvasAnimation = new CanvasAnimation(eventBus);
         this.canvasAnimation = canvasAnimation;
+        const chartPaneId = CanvasElement.PANE_UUID(CHART_UUID);
         //#region ScaleModel init
-        const scaleModel = new ScaleModel(config, () => canvasBoundsContainer.getBounds(CanvasElement.PANE_UUID(CHART_UUID)), canvasAnimation);
+        const scaleModel = new ScaleModel(config, () => canvasBoundsContainer.getBounds(chartPaneId), canvasAnimation);
         this.scaleModel = scaleModel;
         //#endregion
         const backgroundCanvasModel = createCanvasModel(eventBus, elements.backgroundCanvas, config, drawingManager, this.canvasModels, elements.chartResizer, {
@@ -135,7 +136,7 @@ export default class ChartBootstrap {
         this.chartComponents.push(this.dynamicObjects);
         this.chartModel = new ChartModel(chartBaseModel, paneManager, eventBus, this.dynamicObjectsCanvasModel, config, scaleModel, formatterFactory, mainCanvasParent, canvasBoundsContainer, chartResizeHandler);
         //#region main chart component init
-        const chartComponent = new ChartComponent(this.chartModel, this.dynamicObjectsCanvasModel, config, scaleModel, canvasBoundsContainer, drawingManager, hitTestCanvasModel, canvasInputListener, backgroundCanvasModel, chartPanComponent, paneManager, this.cursorHandler, this.dynamicObjects);
+        const chartComponent = new ChartComponent(this.chartModel, this.dynamicObjectsCanvasModel, config, scaleModel, canvasBoundsContainer, drawingManager, hitTestCanvasModel, canvasInputListener, backgroundCanvasModel, chartPanComponent, paneManager, this.cursorHandler, this.dynamicObjects, this.chartResizeHandler);
         this.chartComponents.push(chartComponent);
         this.chartComponent = chartComponent;
         const chartModel = this.chartComponent.chartModel;
@@ -175,7 +176,7 @@ export default class ChartBootstrap {
         this.volumesComponent = new VolumesComponent(this.dynamicObjectsCanvasModel, chartComponent, scaleModel, canvasBoundsContainer, drawingManager, config, paneManager, this.dynamicObjects);
         this.chartComponents.push(this.volumesComponent);
         // grid component
-        const mainChartGridComponent = new GridComponent(mainCanvasModel, scaleModel, config, this.yAxisComponent.state, 'GRID', drawingManager, () => this.canvasBoundsContainer.getBounds(CanvasElement.ALL_PANES), () => this.canvasBoundsContainer.getBounds(CanvasElement.PANE_UUID(CHART_UUID)), () => this.xAxisComponent.xAxisLabelsGenerator.labels, () => this.yAxisComponent.model.baseLabelsModel.labels, () => mainPane.mainExtent.toY(mainPane.mainExtent.getBaseline()), () => config.components.grid.visible);
+        const mainChartGridComponent = new GridComponent(mainCanvasModel, scaleModel, config, this.yAxisComponent.state, 'GRID', drawingManager, () => this.canvasBoundsContainer.getBounds(CanvasElement.ALL_PANES), () => this.canvasBoundsContainer.getBounds(chartPaneId), () => this.xAxisComponent.xAxisLabelsGenerator.labels, () => this.yAxisComponent.model.baseLabelsModel.labels, () => mainPane.mainExtent.toY(mainPane.mainExtent.getBaseline()), () => config.components.grid.visible);
         this.chartComponents.push(mainChartGridComponent);
         this.hoverProducer = new HoverProducerComponent(this.crossEventProducer, scaleModel, config, chartModel, canvasInputListener, this.canvasBoundsContainer, this.paneManager, timeZoneModel, formatterFactory);
         this.chartComponents.push(this.hoverProducer);

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 };
@@ -565,10 +565,12 @@ export class CanvasBoundsContainer {
      * @return {Bounds} bounds of element
      */
     getBounds(el) {
-        if (this.bounds[el] === undefined) {
-            this.bounds[el] = this.copyOf(DEFAULT_BOUNDS);
+        let bounds = this.bounds[el];
+        if (bounds === undefined) {
+            bounds = this.copyOf(DEFAULT_BOUNDS);
+            this.bounds[el] = bounds;
         }
-        return this.bounds[el];
+        return bounds;
     }
     /**
      * Returns the position of CANVAS on whole page.

package/dist/chart/canvas/cursor.handler.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 { Subject } from 'rxjs';
+import { Subject, animationFrameScheduler } from 'rxjs';
 import { distinctUntilChanged, throttleTime } from 'rxjs/operators';
 import { ChartBaseElement } from '../model/chart-base-element';
 import { CanvasBoundsContainer } from './canvas-bounds-container';
@@ -29,7 +29,7 @@ export class CursorHandler extends ChartBaseElement {
         super.doActivate();
         this.canvasInputListener
             .observeMouseMoveNoDrag()
-            .pipe(throttleTime(100, undefined, { trailing: true }))
+            .pipe(throttleTime(100, animationFrameScheduler, { trailing: true }))
             .subscribe(point => {
             const cursorFromHT = this.hitTestCanvasModel.resolveCursor(point);
             if (cursorFromHT !== undefined) {

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

@@ -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 { merge } from 'rxjs';
+import { merge, animationFrameScheduler } from 'rxjs';
 import { throttleTime } from 'rxjs/operators';
 import { VIEWPORT_ANIMATION_ID } from '../../animation/canvas-animation';
 import { CanvasElement } from '../../canvas/canvas-bounds-container';
@@ -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;
@@ -114,11 +112,17 @@ export class ChartAreaPanHandler extends ChartBaseElement {
         const allPanesHitTest = this.canvasBoundsContainer.getBoundsHitTest(CanvasElement.ALL_PANES);
         //#endregion
         this.addRxSubscription(merge(this.canvasInputListener.observeWheel(allPanesHitTest), this.canvasInputListener.observePinch(allPanesHitTest))
-            .pipe(throttleTime(this.wheelTrottleTime, undefined, { trailing: true, leading: true }))
-            .subscribe(this.zoomXHandler));
+            .pipe(throttleTime(this.wheelTrottleTime, animationFrameScheduler, { trailing: true, leading: true }))
+            .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 }))
+            .pipe(throttleTime(this.wheelTrottleTime, animationFrameScheduler, { trailing: true, leading: true }))
             .subscribe((e) => {
             let direction = -1;
             const device = deviceDetector();
@@ -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/chart/chart.component.d.ts

@@ -24,6 +24,7 @@ import { PaneManager } from '../pane/pane-manager.component';
 import { CandleWidthCalculator, ChartModel, LastCandleLabelHandler, VisualCandleCalculator } from './chart.model';
 import { PrependedCandlesData } from './chart-base.model';
 import { DynamicObjectsComponent } from '../dynamic-objects/dynamic-objects.component';
+import { ChartResizeHandler } from '../../inputhandlers/chart-resize.handler';
 /**
  * Represents a financial instrument to be displayed on a chart
  * @class
@@ -59,11 +60,13 @@ export declare class ChartComponent extends ChartBaseElement {
     private canvasInputListener;
     private paneManager;
     private dynamicObjects;
+    private chartResizeHandler;
     readonly baselineModel: BaselineModel;
     private readonly backgroundDrawer;
     private readonly _dataSeriesDrawers;
     private readonly dataSeriesDrawer;
-    constructor(chartModel: ChartModel, canvasModel: CanvasModel, config: FullChartConfig, scale: ScaleModel, canvasBoundsContainer: CanvasBoundsContainer, drawingManager: DrawingManager, hitTestCanvasModel: HitTestCanvasModel, canvasInputListener: CanvasInputListenerComponent, backgroundCanvasModel: CanvasModel, chartPanComponent: ChartPanComponent, paneManager: PaneManager, cursorHandler: CursorHandler, dynamicObjects: DynamicObjectsComponent);
+    private backgroundDrawPredicateSubj;
+    constructor(chartModel: ChartModel, canvasModel: CanvasModel, config: FullChartConfig, scale: ScaleModel, canvasBoundsContainer: CanvasBoundsContainer, drawingManager: DrawingManager, hitTestCanvasModel: HitTestCanvasModel, canvasInputListener: CanvasInputListenerComponent, backgroundCanvasModel: CanvasModel, chartPanComponent: ChartPanComponent, paneManager: PaneManager, cursorHandler: CursorHandler, dynamicObjects: DynamicObjectsComponent, chartResizeHandler: ChartResizeHandler);
     /**
      * This method overrides the doActivate method of the parent class and calls it.
      * It does not take any parameters and does not return anything.
@@ -118,13 +121,13 @@ export declare class ChartComponent extends ChartBaseElement {
      * @param {Timestamp} end - The end timestamp of the range.
      * @returns {void}
      */
-    setTimestampRange(start: Timestamp, end: Timestamp): void;
+    setTimestampRange(start: Timestamp, end: Timestamp, forceNoAnimation?: boolean): void;
     /**
      * Moves the viewport to exactly xStart..xEnd place.
      * @param xStart - viewport start in units
      * @param xEnd - viewport end in units
      */
-    setXScale(xStart: Unit, xEnd: Unit): void;
+    setXScale(xStart: Unit, xEnd: Unit, forceNoAnimation?: boolean): void;
     /**
      * Sets the visibility of the wicks in the chart.
      * @param {boolean} isShow - A boolean value indicating whether to show or hide the wicks.

package/dist/chart/components/chart/chart.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 { BehaviorSubject } from 'rxjs';
 import { CHART_UUID, CanvasElement } from '../../canvas/canvas-bounds-container';
 import { ChartBaseElement } from '../../model/chart-base-element';
 import { BackgroundDrawer } from '../../drawers/chart-background.drawer';
@@ -48,7 +49,7 @@ export class ChartInstrument {
     }
 }
 export class ChartComponent extends ChartBaseElement {
-    constructor(chartModel, canvasModel, config, scale, canvasBoundsContainer, drawingManager, hitTestCanvasModel, canvasInputListener, backgroundCanvasModel, chartPanComponent, paneManager, cursorHandler, dynamicObjects) {
+    constructor(chartModel, canvasModel, config, scale, canvasBoundsContainer, drawingManager, hitTestCanvasModel, canvasInputListener, backgroundCanvasModel, chartPanComponent, paneManager, cursorHandler, dynamicObjects, chartResizeHandler) {
         super();
         this.chartModel = chartModel;
         this.canvasModel = canvasModel;
@@ -60,7 +61,9 @@ export class ChartComponent extends ChartBaseElement {
         this.canvasInputListener = canvasInputListener;
         this.paneManager = paneManager;
         this.dynamicObjects = dynamicObjects;
+        this.chartResizeHandler = chartResizeHandler;
         this._dataSeriesDrawers = {};
+        this.backgroundDrawPredicateSubj = new BehaviorSubject(true);
         this.strToBarType = (str) => { var _a; return (_a = this.barTypeValues.find(t => t === str)) !== null && _a !== void 0 ? _a : 'candle'; };
         this.addChildEntity(this.chartModel);
         this.registerDefaultCandlesTransformers();
@@ -73,7 +76,7 @@ export class ChartComponent extends ChartBaseElement {
         //#region data series drawers
         this.registerDefaultDataSeriesDrawers();
         //#endregion
-        this.backgroundDrawer = new BackgroundDrawer(backgroundCanvasModel, this.config);
+        this.backgroundDrawer = new BackgroundDrawer(backgroundCanvasModel, this.config, () => this.backgroundDrawPredicateSubj.getValue());
         drawingManager.addDrawer(this.backgroundDrawer, 'MAIN_BACKGROUND');
         cursorHandler.setCursorForCanvasEl(CanvasElement.PANE_UUID(CHART_UUID), config.components.chart.cursor);
         this.dataSeriesDrawer = new DataSeriesDrawer(paneManager, this.dataSeriesDrawers);
@@ -104,6 +107,13 @@ export class ChartComponent extends ChartBaseElement {
         this.addRxSubscription(this.paneManager.dataSeriesRemovedSubject.subscribe(series => {
             this.dynamicObjects.model.removeObject(series.id);
         }));
+        // redraw background only when chart is resized
+        this.addRxSubscription(this.canvasBoundsContainer.observeAnyBoundsChanged().subscribe(() => {
+            this.backgroundDrawPredicateSubj.next(false);
+        }));
+        this.addRxSubscription(this.chartResizeHandler.canvasResized.subscribe(() => {
+            this.backgroundDrawPredicateSubj.next(true);
+        }));
     }
     /**
      * Registers default candle transformers.
@@ -162,7 +172,8 @@ export class ChartComponent extends ChartBaseElement {
         this.registerDataSeriesTypeDrawer('area', new AreaDrawer(this.config.components.chart));
         this.registerDataSeriesTypeDrawer('baseline', new BaselineDrawer(this.baselineModel, this.canvasBoundsContainer));
         this.registerDataSeriesTypeDrawer('histogram', new MainChartHistogramDrawer(this.config.components.chart.histogram));
-        const mainChartBoundsProvider = () => this.canvasBoundsContainer.getBounds(CanvasElement.PANE_UUID(CHART_UUID));
+        const chartPaneId = CanvasElement.PANE_UUID(CHART_UUID);
+        const mainChartBoundsProvider = () => this.canvasBoundsContainer.getBounds(chartPaneId);
         this.registerDataSeriesTypeDrawer('LINEAR', new LinearDrawer());
         this.registerDataSeriesTypeDrawer('HISTOGRAM', new HistogramDrawer());
         this.registerDataSeriesTypeDrawer('TREND_HISTOGRAM', new TrendHistogramDrawer());
@@ -196,16 +207,16 @@ export class ChartComponent extends ChartBaseElement {
      * @param {Timestamp} end - The end timestamp of the range.
      * @returns {void}
      */
-    setTimestampRange(start, end) {
-        return this.chartModel.setTimestampRange(start, end);
+    setTimestampRange(start, end, forceNoAnimation = true) {
+        return this.chartModel.setTimestampRange(start, end, forceNoAnimation);
     }
     /**
      * Moves the viewport to exactly xStart..xEnd place.
      * @param xStart - viewport start in units
      * @param xEnd - viewport end in units
      */
-    setXScale(xStart, xEnd) {
-        return this.scale.setXScale(xStart, xEnd);
+    setXScale(xStart, xEnd, forceNoAnimation = true) {
+        return this.scale.setXScale(xStart, xEnd, forceNoAnimation);
     }
     /**
      * Sets the visibility of the wicks in the chart.

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

@@ -49,7 +49,6 @@ export declare class ChartModel extends ChartBaseElement {
     readonly nextCandleTimeStampSubject: Subject<void>;
     readonly chartTypeChanged: Subject<BarType>;
     readonly mainInstrumentChangedSubject: Subject<ChartInstrument>;
-    readonly scaleInversedSubject: Subject<void>;
     readonly offsetsChanged: Subject<void>;
     private candlesTransformersByChartType;
     lastCandleLabelsByChartType: Partial<Record<BarType, LastCandleLabelHandler>>;
@@ -319,7 +318,7 @@ export declare class ChartModel extends ChartBaseElement {
      * @param {Timestamp} end - The end timestamp of the range.
      * @returns {void}
      */
-    setTimestampRange(start: Timestamp, end: Timestamp): void;
+    setTimestampRange(start: Timestamp, end: Timestamp, forceNoAnimation?: boolean): void;
     /**
      * Returns the last candle of the main candle series.
      * @returns {Candle | undefined} The last candle of the main candle series or undefined if the series is empty.

package/dist/chart/components/chart/chart.model.js

@@ -50,7 +50,6 @@ export class ChartModel extends ChartBaseElement {
         this.nextCandleTimeStampSubject = new Subject();
         this.chartTypeChanged = new Subject();
         this.mainInstrumentChangedSubject = new Subject();
-        this.scaleInversedSubject = new Subject();
         this.offsetsChanged = new Subject();
         this.candlesTransformersByChartType = {};
         this.lastCandleLabelsByChartType = {};
@@ -656,11 +655,11 @@ export class ChartModel extends ChartBaseElement {
      * @param {Timestamp} end - The end timestamp of the range.
      * @returns {void}
      */
-    setTimestampRange(start, end) {
+    setTimestampRange(start, end, forceNoAnimation = true) {
         const startUnit = this.candleFromTimestamp(start).startUnit;
         const endCandle = this.candleFromTimestamp(end);
         const endUnit = endCandle.startUnit + endCandle.width;
-        return this.scale.setXScale(startUnit, endUnit);
+        return this.scale.setXScale(startUnit, endUnit, forceNoAnimation);
     }
     /**
      * Returns the last candle of the main candle series.

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/cross_tool/types/cross-and-labels.drawer.js

@@ -122,6 +122,7 @@ export class CrossAndLabelsDrawerType {
         if (this.config.components.yAxis.visible) {
             const pane = this.paneManager.panes[point.paneId];
             const y = point.y;
+            const type = this.config.components.crossTool.yLabel.type;
             if (!pane) {
                 return;
             }
@@ -129,9 +130,10 @@ export class CrossAndLabelsDrawerType {
                 const price = extent.regularValueFromY(y);
                 const label = extent.valueFormatter(price);
                 const bounds = this.canvasBoundsContainer.getBounds(CanvasElement.PANE_UUID_Y_AXIS(pane.uuid, extent.idx));
-                const drawYLabel = priceLabelDrawersMap[this.config.components.crossTool.yLabel.type];
+                const drawYLabel = priceLabelDrawersMap[type];
+                const textColor = type === 'plain' ? crossToolColors.lineColor : crossToolColors.labelTextColor;
                 drawYLabel(ctx, bounds, label, y, {
-                    textColor: crossToolColors.labelTextColor,
+                    textColor,
                     bgColor: crossToolColors.labelBoxColor,
                     paddingBottom: yLabelPadding === null || yLabelPadding === void 0 ? void 0 : yLabelPadding.bottom,
                     paddingEnd: yLabelPadding === null || yLabelPadding === void 0 ? void 0 : yLabelPadding.end,

package/dist/chart/components/high_low/high-low.drawer.js

@@ -5,6 +5,7 @@
  */
 import { CanvasElement } from '../../canvas/canvas-bounds-container';
 import { getTextLineHeight } from '../../utils/canvas/canvas-text-functions.utils';
+import { clipToBounds } from '../../utils/canvas/canvas-drawing-functions.utils';
 export class HighLowDrawer {
     constructor(canvasModel, chartModel, config, canvasBoundsContainer) {
         this.canvasModel = canvasModel;
@@ -34,7 +35,10 @@ export class HighLowDrawer {
             ctx.font = this.config.components.highLow.font;
             this.drawMarkerLabel(ctx, finalHighIdx, high, 'high');
             this.drawMarkerLabel(ctx, finalLowIdx, low, 'low');
+            const chartBounds = this.canvasBoundsContainer.getBounds('PANE_CHART');
             ctx.restore();
+            // We need clip here so lowLabel won't overlap other panes
+            clipToBounds(ctx, chartBounds);
         }
     }
     /**
@@ -47,7 +51,10 @@ export class HighLowDrawer {
      */
     drawMarkerLabel(ctx, candleIdx, yValue, type) {
         const y = this.getMarkerY(ctx, yValue, type === 'low');
-        if (!this.checkMarkerInBounds(y)) {
+        const fontSize = getTextLineHeight(ctx, false);
+        // we need to measure fit into the bounds for low label by its top point
+        const yForBoundsTrack = type === 'low' ? y - fontSize : y;
+        if (!this.checkMarkerInBounds(yForBoundsTrack)) {
             return;
         }
         const text = this.getMarkerText(yValue, type);
@@ -79,7 +86,7 @@ export class HighLowDrawer {
     getMarkerY(ctx, yValue, offset = false) {
         const y = this.chartModel.toY(yValue);
         if (offset) {
-            const fontSize = getTextLineHeight(ctx);
+            const fontSize = getTextLineHeight(ctx, false);
             return y + fontSize;
         }
         return y;

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

@@ -7,7 +7,7 @@ import { calculateTextWidth } from '../../utils/canvas/canvas-font-measure-tool.
 import { HIGHLIGHTS_TYPES } from './highlights.model';
 import { CanvasElement } from '../../canvas/canvas-bounds-container';
 import { unitToPixels } from '../../model/scaling/viewport.model';
-import { clipToBounds } from '../../drawers/data-series.drawer';
+import { clipToBounds } from '../../utils/canvas/canvas-drawing-functions.utils';
 const LABEL_PADDINGS = [20, 10];
 export class HighlightsDrawer {
     constructor(highlightsModel, chartModel, canvasModel, canvasBoundsContainer, config) {

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

@@ -85,7 +85,8 @@ export class PaneComponent extends ChartBaseElement {
      * @returns {GridComponent} - The newly created GridComponent instance.
      */
     createGridComponent(uuid, scale, yAxisLabelsGenerator, yAxisState) {
-        const gridComponent = new GridComponent(this.mainCanvasModel, scale, this.config, yAxisState, `PANE_${uuid}_grid_drawer`, this.drawingManager, () => this.canvasBoundsContainer.getBounds(CanvasElement.PANE_UUID(uuid)), () => this.canvasBoundsContainer.getBounds(CanvasElement.PANE_UUID(uuid)), () => [], () => yAxisLabelsGenerator.generateNumericLabels());
+        const chartPaneId = CanvasElement.PANE_UUID(uuid);
+        const gridComponent = new GridComponent(this.mainCanvasModel, scale, this.config, yAxisState, `PANE_${uuid}_grid_drawer`, this.drawingManager, () => this.canvasBoundsContainer.getBounds(chartPaneId), () => this.canvasBoundsContainer.getBounds(chartPaneId), () => [], () => yAxisLabelsGenerator.generateNumericLabels());
         return gridComponent;
     }
     /**
@@ -96,7 +97,8 @@ export class PaneComponent extends ChartBaseElement {
      * @returns {Unsubscriber}
      */
     createYPanHandler(uuid, scale) {
-        const dragNDropComponent = this.chartPanComponent.chartAreaPanHandler.registerChartYPanHandler(scale, this.canvasBoundsContainer.getBoundsHitTest(CanvasElement.PANE_UUID(uuid)));
+        const chartPaneId = CanvasElement.PANE_UUID(uuid);
+        const dragNDropComponent = this.chartPanComponent.chartAreaPanHandler.registerChartYPanHandler(scale, this.canvasBoundsContainer.getBoundsHitTest(chartPaneId));
         return [
             () => {
                 this.chartPanComponent.chartAreaPanHandler.removeChildEntity(dragNDropComponent);
@@ -113,7 +115,8 @@ export class PaneComponent extends ChartBaseElement {
     createExtentComponent(options) {
         var _a, _b;
         const extentIdx = this.yExtentComponents.length;
-        const getBounds = () => this.canvasBoundsContainer.getBounds(CanvasElement.PANE_UUID(this.uuid));
+        const chartPaneId = CanvasElement.PANE_UUID(this.uuid);
+        const getBounds = () => this.canvasBoundsContainer.getBounds(chartPaneId);
         const scaleModel = (_a = options === null || options === void 0 ? void 0 : options.scale) !== null && _a !== void 0 ? _a : new SyncedByXScaleModel(this.mainScale, this.config, getBounds, this.canvasAnimation);
         const [unsub, dragNDrop] = this.createYPanHandler(this.uuid, scaleModel);
         // creating partially resolved constructor except formatter & dataSeriesProvider - bcs it's not possible to provide formatter

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.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 { clipToBounds } from '../../drawers/data-series.drawer';
+import { clipToBounds } from '../../utils/canvas/canvas-drawing-functions.utils';
 import { unitToPixels } from '../../model/scaling/viewport.model';
 import { flat } from '../../utils/array.utils';
 import { ceilToDPR, floorToDPR } from '../../utils/device/device-pixel-ratio.utils';

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/x_axis/time/parser/time-formats-matchers.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 { eachDayOfInterval, isSameDay, isMonday, isTuesday, isWednesday, isThursday, isFriday, isSaturday, isSunday, startOfMonth, endOfMonth, } from 'date-fns/esm';
+import { eachDayOfInterval, isSameDay, isMonday, isTuesday, isWednesday, isThursday, isFriday, isSaturday, isSunday, startOfMonth, endOfMonth, } from 'date-fns';
 /**
  * Factory that return a {@link TimeFormatMatcher} function for a given {@link ParsedTimeFormats}
  * @see

package/dist/chart/components/x_axis/time/parser/time-formats.model.d.ts

@@ -27,7 +27,7 @@ export interface ParsedNCTimeFormat {
 }
 export type ParsedTimeFormat = ParsedCTimeFormat | ParsedWeekFormat | ParsedNCTimeFormat;
 export type SpecialSymbol = '!' | '$';
-export declare const timeFormatConfirugableGuard: (key: string) => key is "second" | "minute" | "hour" | "day" | "month" | "year";
+export declare const timeFormatConfirugableGuard: (key: string) => key is "year" | "month" | "day" | "hour" | "minute" | "second";
 export declare const weekWeekdayGuard: (key: string) => key is "week-weekday";
 export declare const timeFormatNoNConfirugableGuard: (key: string) => key is "lessThanSecond";
 export {};

package/dist/chart/components/x_axis/time/x-axis-weights.functions.js

@@ -51,7 +51,7 @@ export const getWeightFromTimeFormat = (format) => {
  */
 export const groupLabelsByWeight = (weightedLabels) => {
     const labelsGroupedByWeight = {};
-    weightedLabels.forEach(weightedLabel => {
+    for (const weightedLabel of weightedLabels) {
         const labelsByWeight = labelsGroupedByWeight[weightedLabel.weight];
         if (labelsByWeight === undefined) {
             labelsGroupedByWeight[weightedLabel.weight] = [weightedLabel];
@@ -59,7 +59,7 @@ export const groupLabelsByWeight = (weightedLabels) => {
         else {
             labelsByWeight.push(weightedLabel);
         }
-    });
+    }
     return labelsGroupedByWeight;
 };
 /**