@devexperts/dxcharts-lite 2.7.31 → 2.7.33

package/dist/chart/components/chart/price-formatters/__tests__/price.formatter.test.d.ts

@@ -0,0 +1,6 @@
+/*
+ * Copyright (C) 2019 - 2026 Devexperts Solutions IE Limited
+ * 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 {};

package/dist/chart/components/chart/price-formatters/__tests__/price.formatter.test.js

@@ -0,0 +1,150 @@
+/*
+ * Copyright (C) 2019 - 2026 Devexperts Solutions IE Limited
+ * 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 { getDefaultConfig } from '../../../../chart.config';
+import { PriceIncrementsUtils } from '../../../../utils/price-increments.utils';
+import { createPercentFormatter, createRegularPriceFormatter } from '../price.formatter';
+const DEFAULT_PRICE_PRECISIONS = PriceIncrementsUtils.computePrecisions([0.01, 1, 0.1, 10, 0.01]);
+const DEFAULT_INTL_FORMATTER = getDefaultConfig().intlFormatter;
+const DEFAULT_Y_AXIS_CONFIG = getDefaultConfig().components.yAxis;
+const createMockDataSeries = (baseline, pricePrecisions = DEFAULT_PRICE_PRECISIONS) => ({
+    pricePrecisions,
+    getBaseline: () => baseline,
+});
+const createMockExtent = ({ intlFormatter = DEFAULT_INTL_FORMATTER, pricePrecisions = DEFAULT_PRICE_PRECISIONS, dataSeries, } = {}) => ({
+    dataSeries: dataSeries !== null && dataSeries !== void 0 ? dataSeries : new Set([{ pricePrecisions }]),
+    paneComponent: {
+        intlFormatter,
+    },
+});
+const createRegularFormatter = (options, yAxisConfig = createRegularYAxisConfig()) => {
+    // @ts-expect-error partial YExtentComponent mock for price formatter tests
+    return createRegularPriceFormatter(createMockExtent(options), yAxisConfig);
+};
+const createPercentFormatterFromMock = (options) => {
+    // @ts-expect-error partial YExtentComponent mock for price formatter tests
+    return createPercentFormatter(createMockExtent(options));
+};
+const createTreasuryYAxisConfig = () => (Object.assign(Object.assign({}, DEFAULT_Y_AXIS_CONFIG), { treasuryFormat: { enabled: true } }));
+const createRegularYAxisConfig = () => (Object.assign(Object.assign({}, DEFAULT_Y_AXIS_CONFIG), { treasuryFormat: { enabled: false } }));
+describe('createRegularPriceFormatter', () => {
+    describe('input coercion', () => {
+        it('should format numeric values', () => {
+            const formatter = createRegularFormatter();
+            expect(formatter(123.45)).toBe('123.45');
+        });
+        it('should parse string values without separators by default', () => {
+            const formatter = createRegularFormatter({
+                intlFormatter: { decimalSeparator: ',', thousandsSeparator: '_' },
+            });
+            expect(formatter('3456.78')).toBe('3456.78');
+        });
+        it('should return em dash for falsy non-string values', () => {
+            const formatter = createRegularFormatter();
+            expect(formatter(undefined)).toBe('—');
+            expect(formatter(null)).toBe('—');
+        });
+    });
+    describe('thousands and decimal separators', () => {
+        it('should not apply thousandsSeparator by default for values of 1000 or more', () => {
+            const formatter = createRegularFormatter();
+            expect(formatter(1234.5)).toBe('1234.50');
+            expect(formatter(1234567.89)).toBe('1234567.89');
+            expect(formatter(1234567890.12)).toBe('1234567890.12');
+        });
+        it('should use toFixed without thousands grouping for values below 1000', () => {
+            const formatter = createRegularFormatter();
+            expect(formatter(999.99)).toBe('999.99');
+        });
+        it('should support custom decimalSeparator and thousandsSeparator when formatWithIntlSeparators is true', () => {
+            const atWithSpaceFormatter = createRegularFormatter({
+                intlFormatter: { decimalSeparator: '@', thousandsSeparator: ' ' },
+            });
+            const enUSFormatter = createRegularFormatter({
+                intlFormatter: { decimalSeparator: '.', thousandsSeparator: ',' },
+            });
+            expect(enUSFormatter(1234.5, true)).toBe('1,234.50');
+            expect(enUSFormatter(1234567.89, true)).toBe('1,234,567.89');
+            expect(enUSFormatter(1234567890.12, true)).toBe('1,234,567,890.12');
+            expect(atWithSpaceFormatter(1234.5, true)).toBe('1 234@50');
+        });
+    });
+    describe('treasury formatting', () => {
+        it('should format treasury prices when treasury format is enabled', () => {
+            const formatter = createRegularFormatter(undefined, createTreasuryYAxisConfig());
+            expect(formatter(132.0625)).toBe("132'02");
+        });
+        it('should not group treasury integer part below 1000 even with thousandsSeparator', () => {
+            const formatter = createRegularFormatter({ intlFormatter: { decimalSeparator: '.', thousandsSeparator: ',' } }, createTreasuryYAxisConfig());
+            expect(formatter(999.99)).toBe("999'31");
+        });
+        it('should support custom thousandsSeparator in treasury format when formatWithIntlSeparators is true', () => {
+            const commaSeparatorFormatter = createRegularFormatter({ intlFormatter: { thousandsSeparator: ',' } }, createTreasuryYAxisConfig());
+            const spaceSeparatorFormatter = createRegularFormatter({ intlFormatter: { thousandsSeparator: ' ' } }, createTreasuryYAxisConfig());
+            expect(spaceSeparatorFormatter(1234567.5, true)).toBe("1 234 567'16");
+            expect(commaSeparatorFormatter(1234567.5, true)).toBe("1,234,567'16");
+        });
+    });
+    describe('data series availability', () => {
+        it('should return stringified value when main data series is missing', () => {
+            const formatter = createRegularFormatter({ dataSeries: new Set() });
+            expect(formatter(1234.56)).toBe('1234.56');
+        });
+    });
+    describe('optional edge cases — review whether to keep', () => {
+        // Boundary: exactly 1000 triggers thousands formatting path when formatWithIntlSeparators is true.
+        it('should apply thousandsSeparator at exactly 1000 when formatWithIntlSeparators is true', () => {
+            const formatter = createRegularFormatter({
+                intlFormatter: { decimalSeparator: '.', thousandsSeparator: ',' },
+            });
+            expect(formatter(1000, true)).toBe('1,000.00');
+        });
+        // Current implementation uses `checkedValue >= 1000`, not absolute value.
+        it('should apply thousandsSeparator for negative values above 1000 threshold check', () => {
+            const formatter = createRegularFormatter({
+                intlFormatter: { decimalSeparator: '.', thousandsSeparator: ',' },
+            });
+            expect(formatter(-1500, true)).toBe('-1,500.00');
+        });
+        // Treasury formatting takes precedence over intl thousands/decimal separators.
+        it('should prefer treasury formatting over thousandsSeparator config', () => {
+            const formatter = createRegularFormatter({ intlFormatter: { decimalSeparator: ',', thousandsSeparator: ' ' } }, createTreasuryYAxisConfig());
+            expect(formatter(132.0625)).toBe("132'02");
+        });
+        // Invalid numeric strings become NaN and are stringified by the fallback path.
+        it('should stringify NaN when data series is missing and input is not numeric', () => {
+            const formatter = createRegularFormatter({ dataSeries: new Set() });
+            expect(formatter('not-a-number')).toBe('NaN');
+        });
+    });
+});
+describe('createPercentFormatter', () => {
+    describe('basic formatting', () => {
+        it('should return zero percent for zero value', () => {
+            const formatter = createPercentFormatterFromMock({ dataSeries: new Set() });
+            expect(formatter(0)).toBe('0.00 %');
+        });
+        it('should format value without conversion when no series is available', () => {
+            const formatter = createPercentFormatterFromMock({ dataSeries: new Set() });
+            expect(formatter(5)).toBe('5.00 %');
+        });
+        it('should convert value using main data series baseline', () => {
+            const formatter = createPercentFormatterFromMock({
+                dataSeries: new Set([createMockDataSeries(100)]),
+            });
+            expect(formatter(110)).toBe('10.00 %');
+        });
+        it('should convert value using explicitly passed data series', () => {
+            const formatter = createPercentFormatterFromMock({ dataSeries: new Set() });
+            const series = createMockDataSeries(200);
+            // @ts-expect-error partial DataSeriesModel mock for price formatter tests
+            expect(formatter(250, series)).toBe('25.00 %');
+        });
+        it('should normalize negative zero percent display', () => {
+            const formatter = createPercentFormatterFromMock({ dataSeries: new Set() });
+            expect(formatter(-0.0001)).toBe('0.00 %');
+        });
+    });
+});

package/dist/chart/components/chart/price-formatters/price.formatter.d.ts

@@ -8,6 +8,6 @@ import { DataSeriesModel } from '../../../model/data-series.model';
 import { Unit } from '../../../model/scaling/viewport.model';
 import { YExtentComponent } from '../../pane/extent/y-extent-component';
 import { YExtentFormatters } from '../../pane/pane.component';
-export declare const createRegularPriceFormatter: (extent: YExtentComponent, config: YAxisConfig) => (value: unknown) => string;
+export declare const createRegularPriceFormatter: (extent: YExtentComponent, config: YAxisConfig) => (value: unknown, shouldAddSeparators?: boolean) => string;
 export declare const createPercentFormatter: (extent: YExtentComponent) => (value: Unit, dataSeries?: DataSeriesModel) => string;
 export declare const createYExtentFormatters: (extent: YExtentComponent, config: YAxisConfig) => YExtentFormatters;

package/dist/chart/components/chart/price-formatters/price.formatter.js

@@ -4,11 +4,11 @@
  * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 import { unitToPercent } from '../../../model/scaling/viewport.model';
-import { replaceMinusSign } from '../../../utils/math.utils';
+import { MathUtils, replaceMinusSign } from '../../../utils/math.utils';
 import { PriceIncrementsUtils } from '../../../utils/price-increments.utils';
 import { MINUS_SIGN } from '../../../utils/symbol-constants';
 import { treasuryPriceFormatter } from './treasury-price.formatter';
-export const createRegularPriceFormatter = (extent, config) => (value) => {
+export const createRegularPriceFormatter = (extent, config) => (value, shouldAddSeparators = false) => {
     let checkedValue;
     if (typeof value === 'number') {
         checkedValue = value;
@@ -19,13 +19,20 @@ export const createRegularPriceFormatter = (extent, config) => (value) => {
     else {
         return '—';
     }
+    const separators = extent.paneComponent.intlFormatter;
+    const formatWithIntlSeparators = (precision) => {
+        return MathUtils.makeDecimal(checkedValue, precision, separators.decimalSeparator, separators.thousandsSeparator);
+    };
     const treasuryFormatConfig = config.treasuryFormat;
     if (treasuryFormatConfig && treasuryFormatConfig.enabled) {
-        return treasuryPriceFormatter(checkedValue);
+        return treasuryPriceFormatter(checkedValue, shouldAddSeparators ? separators.thousandsSeparator : undefined);
     }
     const [mainDataSeries] = extent.dataSeries;
     if (mainDataSeries !== undefined) {
         const precision = PriceIncrementsUtils.getPricePrecision(checkedValue, mainDataSeries.pricePrecisions);
+        if (shouldAddSeparators && Math.abs(checkedValue) >= 1000) {
+            return formatWithIntlSeparators(precision);
+        }
         return checkedValue.toFixed(precision);
     }
     return `${checkedValue}`;

package/dist/chart/components/chart/price-formatters/treasury-price.formatter.d.ts

@@ -13,7 +13,7 @@
  *
  */
 export declare const TREASURY_32ND: number;
-export declare const treasuryPriceFormatter: (value: number) => string;
+export declare const treasuryPriceFormatter: (value: number, thousandsSeparator?: string) => string;
 export declare const isTreasuryPriceFormat: (value: string) => boolean;
 /**
  * Parses treasury price format back to decimal number

package/dist/chart/components/chart/price-formatters/treasury-price.formatter.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 { MathUtils } from '../../../utils/math.utils';
 /**
  * Formats price values for US Treasury contracts in 32nds format
  *
@@ -13,8 +14,12 @@
  *
  */
 export const TREASURY_32ND = 1 / 32; // 0.03125
-export const treasuryPriceFormatter = (value) => {
+export const treasuryPriceFormatter = (value, thousandsSeparator) => {
     const integerValue = Math.floor(value);
+    // Format the integer part with the thousands separator if provided
+    const formattedInteger = thousandsSeparator !== undefined
+        ? MathUtils.formatIntegerWithSeparator(integerValue, thousandsSeparator)
+        : integerValue.toString();
     // Get the decimal part and convert to 64ths
     const decimalPart = value - integerValue;
     const sixtyFourths = Math.round(decimalPart * 64);
@@ -22,7 +27,7 @@ export const treasuryPriceFormatter = (value) => {
     const thirtySeconds = Math.floor(sixtyFourths / 2);
     // Format the 32nds part to always show 2 digits (00-31)
     const thirtySecondsFormatted = thirtySeconds.toString().padStart(2, '0');
-    return `${integerValue}'${thirtySecondsFormatted}`;
+    return `${formattedInteger}'${thirtySecondsFormatted}`;
 };
 const getTreasuryPriceMatch = (value) => value.match(/^\-?0*(\d+)'(\d{2})$/);
 export const isTreasuryPriceFormat = (value) => Boolean(getTreasuryPriceMatch(value));

package/dist/chart/components/cross_tool/types/cross-and-labels.drawer.js

@@ -132,7 +132,7 @@ export class CrossAndLabelsDrawerType {
             }
             for (const extent of pane.yExtentComponents) {
                 const price = extent.regularValueFromY(y);
-                const label = extent.valueFormatter(price);
+                const label = extent.valueFormatter(price, { formatWithSeparators: true });
                 const bounds = this.canvasBoundsContainer.getBounds(CanvasElement.PANE_UUID_Y_AXIS(pane.uuid, extent.idx));
                 const drawYLabel = priceLabelDrawersMap[type];
                 const textColor = type === 'plain' ? crossToolColors.lineColor : crossToolColors.labelTextColor;

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

@@ -28,10 +28,9 @@ export declare class HighlightsDrawer implements Drawer {
      * chartComponent.draw();
      */
     draw(): void;
-    private findHighlightStartIndex;
-    private resolveHighlightFromCandle;
-    private resolveHighlightToCandle;
-    private getHighlightEndLookupTimestamp;
+    private getHighlightBoundaryX;
+    private findCandleIndicesInHighlight;
+    private isCandleTimestampInHighlight;
     /**
      * Calculates the position of the highlight label based on the given parameters.
      * @param {HighlightTextPlacement} placement - The placement of the highlight text.

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

@@ -8,7 +8,6 @@ import { HIGHLIGHTS_TYPES } from './highlights.model';
 import { CanvasElement } from '../../canvas/canvas-bounds-container';
 import { unitToPixels } from '../../model/scaling/viewport.model';
 import { clipToBounds } from '../../utils/canvas/canvas-drawing-functions.utils';
-import { getCandleStart, searchCandleIndex } from '../../utils/candles.utils';
 const LABEL_PADDINGS = [20, 10];
 export class HighlightsDrawer {
     constructor(highlightsModel, chartModel, canvasModel, canvasBoundsContainer, config) {
@@ -64,21 +63,24 @@ export class HighlightsDrawer {
                         ctx.strokeStyle = strokeStyle;
                         items.forEach(item => {
                             var _a, _b, _c;
-                            const period = this.chartModel.chartBaseModel.period;
                             const anchor = this.chartModel.getCandleTimestampAnchor();
                             const candles = this.chartModel.getCandles();
-                            const fromXCandle = this.resolveHighlightFromCandle(item.from, candles, period, anchor);
-                            const fromXCandleWidth = unitToPixels(fromXCandle.width, this.chartModel.scale.zoomX);
-                            const fromX = fromXCandle.xStart(this.chartModel.scale);
-                            const toXCandle = this.resolveHighlightToCandle(item.to, candles, period, anchor);
-                            const toXCandleWidth = unitToPixels(toXCandle.width, this.chartModel.scale.zoomX);
-                            const toX = toXCandle.xStart(this.chartModel.scale) + toXCandleWidth;
-                            // draw highlight' borders
+                            const inRange = this.findCandleIndicesInHighlight(candles, item.from, item.to);
+                            const highlightFromX = this.getHighlightBoundaryX(item.from, anchor);
+                            const highlightToX = this.getHighlightBoundaryX(item.to, anchor);
+                            let fillFromX = highlightFromX;
+                            let fillToX = highlightToX;
                             if (item.border) {
-                                this.drawBorders(item.border, ctx, fromX + fromXCandleWidth, toX - toXCandleWidth, chartBounds);
+                                this.drawBorders(item.border, ctx, highlightFromX, highlightToX, chartBounds);
+                            }
+                            if (inRange) {
+                                const fromXCandle = this.chartModel.candleFromIdx(inRange.startIdx);
+                                const toXCandle = this.chartModel.candleFromIdx(inRange.endIdx);
+                                fillFromX = fromXCandle.xStart(this.chartModel.scale);
+                                const toXCandleWidth = unitToPixels(toXCandle.width, this.chartModel.scale.zoomX);
+                                fillToX = toXCandle.xStart(this.chartModel.scale) + toXCandleWidth;
+                                ctx.fillRect(fillFromX, chartBounds.y, fillToX - fillFromX, chartBounds.y + chartBounds.height);
                             }
-                            // draw highlight' background
-                            ctx.fillRect(fromX, chartBounds.y, toX - fromX, chartBounds.y + chartBounds.height);
                             // draw highlight' label
                             if (item.label) {
                                 const label = (_a = item.label.text) !== null && _a !== void 0 ? _a : '';
@@ -86,7 +88,7 @@ export class HighlightsDrawer {
                                 ctx.save();
                                 ctx.fillStyle = (_b = itemColors === null || itemColors === void 0 ? void 0 : itemColors.label) !== null && _b !== void 0 ? _b : '#ffffff';
                                 const labelWidth = calculateTextWidth(label, ctx, font);
-                                const [labelX, labelY] = this.resolveHighlightLabelPosition((_c = item.label.placement) !== null && _c !== void 0 ? _c : 'left-left', chartBounds, [fromX, toX], labelWidth);
+                                const [labelX, labelY] = this.resolveHighlightLabelPosition((_c = item.label.placement) !== null && _c !== void 0 ? _c : 'left-left', chartBounds, [fillFromX, fillToX], labelWidth);
                                 ctx.fillText(label, labelX, labelY);
                                 ctx.restore();
                             }
@@ -99,26 +101,33 @@ export class HighlightsDrawer {
             }
         }
     }
-    findHighlightStartIndex(candles, sessionFrom, periodMs, anchor) {
-        if (anchor === 'open') {
-            const result = searchCandleIndex(sessionFrom, { extrapolate: false, candleTimestampAnchor: 'open' }, candles, periodMs);
-            return result.index;
+    getHighlightBoundaryX(highlightTimestamp, anchor) {
+        const candle = this.chartModel.candleFromTimestamp(highlightTimestamp, { extrapolate: true });
+        const width = unitToPixels(candle.width, this.chartModel.scale.zoomX);
+        const xStart = candle.xStart(this.chartModel.scale);
+        if (anchor === 'close') {
+            return xStart + width;
         }
-        return candles.findIndex((_, index) => getCandleStart(candles, index, periodMs, 'close') === sessionFrom);
-    }
-    resolveHighlightFromCandle(sessionFrom, candles, period, anchor) {
-        const startIdx = this.findHighlightStartIndex(candles, sessionFrom, period, anchor);
-        if (startIdx >= 0) {
-            return this.chartModel.candleFromIdx(startIdx);
+        if (candle.candle.timestamp < highlightTimestamp) {
+            return xStart + width;
         }
-        return this.chartModel.candleFromTimestamp(sessionFrom);
+        return xStart;
     }
-    resolveHighlightToCandle(sessionTo, candles, period, anchor) {
-        const lookupTimestamp = this.getHighlightEndLookupTimestamp(sessionTo, period, anchor);
-        return this.chartModel.candleFromTimestamp(lookupTimestamp);
+    findCandleIndicesInHighlight(candles, highlightFrom, highlightTo) {
+        let startIdx = -1;
+        let endIdx = -1;
+        for (let i = 0; i < candles.length; i++) {
+            if (this.isCandleTimestampInHighlight(candles[i].timestamp, highlightFrom, highlightTo)) {
+                if (startIdx === -1) {
+                    startIdx = i;
+                }
+                endIdx = i;
+            }
+        }
+        return startIdx === -1 ? null : { startIdx, endIdx };
     }
-    getHighlightEndLookupTimestamp(sessionTo, periodMs, anchor) {
-        return anchor === 'close' ? sessionTo - 1 : sessionTo - periodMs;
+    isCandleTimestampInHighlight(candleTimestamp, highlightFrom, highlightTo) {
+        return highlightFrom <= candleTimestamp && candleTimestamp < highlightTo;
     }
     /**
      * Calculates the position of the highlight label based on the given parameters.

package/dist/chart/components/pane/extent/y-extent-component.d.ts

@@ -17,6 +17,10 @@ import { DragNDropYComponent } from '../../dran-n-drop_helper/drag-n-drop-y.comp
 import { YAxisComponent } from '../../y_axis/y-axis.component';
 import { PaneHitTestController } from '../pane-hit-test.controller';
 import { PaneComponent, YExtentFormatters } from '../pane.component';
+export type ValueFormatterOptions = Partial<{
+    dataSeries: DataSeriesModel;
+    formatWithSeparators: boolean;
+}>;
 export interface YExtentCreationOptions {
     scale: ScaleModel;
     order: number;
@@ -73,8 +77,9 @@ export declare class YExtentComponent extends ChartBaseElement {
      * @returns {void}
      */
     removeDataSeries(series: DataSeriesModel): void;
-    valueFormatter: (value: Unit, dataSeries?: DataSeriesModel) => string;
-    get regularFormatter(): (value: number, precision?: number) => string;
+    valueFormatter: (value: Unit, options?: ValueFormatterOptions) => string;
+    private yAxisNumericLabelsFormatter;
+    get regularFormatter(): (value: number, formatWithIntlSeparators?: boolean) => string;
     /**
      * Sets the pane value formatters for the current instance.
      * @param {YExtentFormatters} formatters - The pane value formatters to be set.

package/dist/chart/components/pane/extent/y-extent-component.js

@@ -40,25 +40,29 @@ export class YExtentComponent extends ChartBaseElement {
             var _a, _b;
             return (_b = (_a = this.mainDataSeries) === null || _a === void 0 ? void 0 : _a.view.toY(value)) !== null && _b !== void 0 ? _b : 1;
         };
-        this.valueFormatter = (value, dataSeries) => {
+        this.valueFormatter = (value, options) => {
+            const { dataSeries, formatWithSeparators = false } = options !== null && options !== void 0 ? options : {};
             if (!this.formatters[this.yAxis.getAxisType()]) {
-                return this.formatters.regular(value);
+                return this.formatters.regular(value, formatWithSeparators);
             }
             const { regular, percent, logarithmic } = this.formatters;
             switch (this.yAxis.getAxisType()) {
                 case 'regular':
-                    return this.formatters.regular(value);
+                    return this.formatters.regular(value, formatWithSeparators);
                 case 'percent':
                     return percent ? percent(value, dataSeries) : regular(value);
                 case 'logarithmic':
                     return logarithmic ? logarithmic(value) : regular(value);
                 default:
-                    return this.regularFormatter(value);
+                    return this.regularFormatter(value, formatWithSeparators);
             }
         };
+        this.yAxisNumericLabelsFormatter = (value) => {
+            return this.valueFormatter(value, { formatWithSeparators: true });
+        };
         this.addChildEntity(scale);
         this.setValueFormatters(createYExtentFormatters(this, config));
-        this.yAxis = createYAxisComponent(this.valueFormatter.bind(this), () => this.mainDataSeries);
+        this.yAxis = createYAxisComponent((value) => this.yAxisNumericLabelsFormatter(value), () => this.mainDataSeries);
         this.addChildEntity(this.yAxis);
     }
     doDeactivate() {

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, YAxisAlign } from '../../chart.config';
+import { FullChartConfig, IntlFormatter, YAxisAlign } from '../../chart.config';
 import { DrawingManager } from '../../drawers/drawing-manager';
 import EventBus from '../../events/event-bus';
 import { CanvasInputListenerComponent } from '../../inputlisteners/canvas-input-listener.component';
@@ -22,7 +22,7 @@ import { ChartBaseModel } from '../chart/chart-base.model';
 import { PriceAxisType } from '../labels_generator/numeric-axis-labels.generator';
 import { ChartPanComponent } from '../pan/chart-pan.component';
 import { YAxisComponent } from '../y_axis/y-axis.component';
-import { YExtentComponent, YExtentCreationOptions } from './extent/y-extent-component';
+import { ValueFormatterOptions, YExtentComponent, YExtentCreationOptions } from './extent/y-extent-component';
 import { PaneHitTestController } from './pane-hit-test.controller';
 import { HitTestCanvasModel } from '../../model/hit-test-canvas.model';
 import { ChartResizeHandler } from '../../inputhandlers/chart-resize.handler';
@@ -54,6 +54,7 @@ export declare class PaneComponent extends ChartBaseElement {
     yExtentComponentsChangedSubject: Subject<void>;
     get scale(): ScaleModel;
     get yAxis(): YAxisComponent;
+    get intlFormatter(): IntlFormatter;
     get dataSeries(): DataSeriesModel<import("../../model/data-series.model").DataSeriesPoint, import("../../model/data-series.model").VisualSeriesPoint, import("../../model/data-series.config").DataSeriesConfig>[];
     get visible(): boolean;
     mainExtent: YExtentComponent;
@@ -86,6 +87,7 @@ export declare class PaneComponent extends ChartBaseElement {
     private createYPanHandler;
     private addCursors;
     createExtentComponent(options?: AtLeastOne<YExtentCreationOptions>): YExtentComponent;
+    private shouldKeepVolumeHostExtent;
     removeExtentComponents(extentComponents: YExtentComponent[]): void;
     /**
      * Create new pane extent and attach data series to it
@@ -159,8 +161,8 @@ export declare class PaneComponent extends ChartBaseElement {
      * @deprecated Use `paneManager.canMovePaneDown()` instead
      */
     canMoveDown(): boolean;
-    valueFormatter: (value: Unit, dataSeries?: DataSeriesModel) => string;
-    get regularFormatter(): (value: number, precision?: number) => string;
+    valueFormatter: (value: Unit, options?: ValueFormatterOptions) => string;
+    get regularFormatter(): (value: number, formatWithIntlSeparators?: boolean) => string;
     /**
      * Sets the pane value formatters for the current instance.
      * @param {YExtentFormatters} formatters - The pane value formatters to be set.
@@ -174,7 +176,7 @@ export declare class PaneComponent extends ChartBaseElement {
     regularValueFromY(y: number): number;
 }
 export interface YExtentFormatters {
-    regular: (value: number, precision?: number) => string;
+    regular: (value: number, formatWithIntlSeparators?: boolean) => string;
     percent?: (value: number, dataSeries?: DataSeriesModel) => string;
     logarithmic?: (value: number) => string;
 }

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

@@ -15,6 +15,7 @@ import { GridComponent } from '../grid/grid.component';
 import { YAxisComponent } from '../y_axis/y-axis.component';
 import { createDefaultYExtentHighLowProvider, YExtentComponent, } from './extent/y-extent-component';
 import { merge } from '../../utils/merge.utils';
+import { VOLUMES_UUID } from '../volumes/volumes.model';
 export class PaneComponent extends ChartBaseElement {
     get scale() {
         return this.mainExtent.scale;
@@ -22,6 +23,9 @@ export class PaneComponent extends ChartBaseElement {
     get yAxis() {
         return this.mainExtent.yAxis;
     }
+    get intlFormatter() {
+        return this.config.intlFormatter;
+    }
     get dataSeries() {
         return flatMap(this.yExtentComponents, c => Array.from(c.dataSeries));
     }
@@ -54,8 +58,8 @@ export class PaneComponent extends ChartBaseElement {
         this.getYAxisBounds = () => {
             return this.canvasBoundsContainer.getBounds(CanvasElement.PANE_UUID_Y_AXIS(this.uuid));
         };
-        this.valueFormatter = (value, dataSeries) => {
-            return this.mainExtent.valueFormatter(value, dataSeries);
+        this.valueFormatter = (value, options) => {
+            return this.mainExtent.valueFormatter(value, options);
         };
         const yExtentComponent = this.createExtentComponent(options);
         this.mainExtent = yExtentComponent;
@@ -160,9 +164,16 @@ export class PaneComponent extends ChartBaseElement {
         this.yExtentComponentsChangedSubject.next();
         return yExtentComponent;
     }
+    shouldKeepVolumeHostExtent(extent) {
+        return (this.uuid === VOLUMES_UUID && extent === this.mainExtent && this.config.components.volumes.showSeparately);
+    }
     removeExtentComponents(extentComponents) {
-        extentComponents.forEach(extentComponent => extentComponent.disable());
-        this.yExtentComponents = this.yExtentComponents.filter(current => !extentComponents.map(excluded => excluded.idx).includes(current.idx));
+        const removableExtents = extentComponents.filter(extent => !this.shouldKeepVolumeHostExtent(extent));
+        if (removableExtents.length === 0) {
+            return;
+        }
+        removableExtents.forEach(extentComponent => extentComponent.disable());
+        this.yExtentComponents = this.yExtentComponents.filter(current => !removableExtents.map(excluded => excluded.idx).includes(current.idx));
         // re-index extents
         this.yExtentComponents.forEach((c, idx) => {
             c.yAxis.setExtentIdx(idx);

package/dist/chart/components/volumes/separate-volumes.component.d.ts

@@ -19,6 +19,7 @@ export declare class SeparateVolumesComponent extends ChartBaseElement {
     pane: PaneComponent | undefined;
     constructor(chartComponent: ChartComponent, config: FullChartConfig, volumesModel: VolumesModel, paneManager: PaneManager);
     protected doActivate(): void;
+    private paneHasStudyDataSeries;
     /**
      * Activates the separate volumes feature.
      * If the pane component for separate volumes does not exist, it creates a new pane with the specified UUID and options.
@@ -27,7 +28,8 @@ export declare class SeparateVolumesComponent extends ChartBaseElement {
      */
     activateSeparateVolumes(): void;
     /**
-     * Deactivates the separate volumes feature by removing the separate volumes pane, deleting the scale model, and removing the underlay volumes area drawer.
+     * Deactivates the separate volumes feature by removing the separate volumes pane when it has no study data series,
+     * or by keeping the pane when studies remain on it.
      */
     deactiveSeparateVolumes(): void;
     /**

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

@@ -22,6 +22,9 @@ export class SeparateVolumesComponent extends ChartBaseElement {
         this.addRxSubscription(this.chartComponent.chartModel.candlesUpdatedSubject.subscribe(() => { var _a, _b; return !((_a = this.pane) === null || _a === void 0 ? void 0 : _a.scale.isViewportValid()) && ((_b = this.pane) === null || _b === void 0 ? void 0 : _b.scale.doAutoScale(true)); }));
         this.addRxSubscription(this.volumesModel.volumeMax.subscribe(() => { var _a; return (_a = this.pane) === null || _a === void 0 ? void 0 : _a.scale.doAutoScale(); }));
     }
+    paneHasStudyDataSeries(pane) {
+        return pane.dataSeries.length > 0;
+    }
     /**
      * Activates the separate volumes feature.
      * If the pane component for separate volumes does not exist, it creates a new pane with the specified UUID and options.
@@ -29,7 +32,8 @@ export class SeparateVolumesComponent extends ChartBaseElement {
      * A new VolumesDrawer is created and added to the drawing manager with the specified parameters.
      */
     activateSeparateVolumes() {
-        if (this.paneManager.panes[SeparateVolumesComponent.UUID] === undefined) {
+        const existingPane = this.paneManager.panes[SeparateVolumesComponent.UUID];
+        if (existingPane === undefined) {
             const precision = 1;
             const volumePane = this.paneManager.createPane(SeparateVolumesComponent.UUID, {
                 paneFormatters: {
@@ -38,18 +42,30 @@ export class SeparateVolumesComponent extends ChartBaseElement {
                 useDefaultHighLow: false,
                 increment: 1,
             });
-            this.pane = volumePane;
             volumePane.mainExtent.yAxis.setAxisType('regular');
             const { scale: scaleModel } = volumePane;
             const volumesHighLowProvider = createCandlesOffsetProvider(() => ({ top: 10, bottom: 0, left: 0, right: 0, visible: true }), this.volumesModel.highLowProvider);
             scaleModel.autoScaleModel.setHighLowProvider('volumes', volumesHighLowProvider);
             scaleModel.doAutoScale(true);
+            this.pane = volumePane;
+            return;
         }
+        this.pane = existingPane;
     }
     /**
-     * Deactivates the separate volumes feature by removing the separate volumes pane, deleting the scale model, and removing the underlay volumes area drawer.
+     * Deactivates the separate volumes feature by removing the separate volumes pane when it has no study data series,
+     * or by keeping the pane when studies remain on it.
      */
     deactiveSeparateVolumes() {
+        const pane = this.paneManager.panes[SeparateVolumesComponent.UUID];
+        if (pane === undefined) {
+            delete this.pane;
+            return;
+        }
+        if (this.paneHasStudyDataSeries(pane)) {
+            this.pane = undefined;
+            return;
+        }
         this.paneManager.removePane(SeparateVolumesComponent.UUID);
         delete this.pane;
     }

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

@@ -40,6 +40,8 @@ export declare class VolumesComponent extends ChartBaseElement {
      * @param {boolean} separate - A boolean value indicating whether the volumes should be shown separately or not.
      * @returns {void}
      */
+    /** Restores separate volumes pane and dynamic object after study pane cleanup. */
+    ensureSeparateVolumesHost(): void;
     setShowVolumesSeparatly(separate: boolean): void;
     /**
      * This method deactivates the current component by calling the superclass doDeactivate method and setting the visibility of the component to false.

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

@@ -53,6 +53,15 @@ export class VolumesComponent extends ChartBaseElement {
      * @param {boolean} separate - A boolean value indicating whether the volumes should be shown separately or not.
      * @returns {void}
      */
+    /** Restores separate volumes pane and dynamic object after study pane cleanup. */
+    ensureSeparateVolumesHost() {
+        if (!this.config.components.volumes.showSeparately) {
+            return;
+        }
+        this.separateVolumes.activateSeparateVolumes();
+        this.syncVolumesDynamicObject();
+        this.canvasModel.fireDraw();
+    }
     setShowVolumesSeparatly(separate) {
         if (this.config.components.volumes.showSeparately !== separate) {
             this.config.components.volumes.showSeparately = separate;