@devexperts/dxcharts-lite 2.7.30 → 2.7.32

package/dist/chart/canvas/canvas-chart-html.js

@@ -9,8 +9,8 @@ export default (devexpertsPromoLink) => '<div data-element="chartResizer" style=
     '\t\t\t<canvas data-element="snapshotCanvas"></canvas>\n' +
     '\t\t\t<canvas data-element="backgroundCanvas"></canvas>\n' +
     '\t\t\t<canvas data-element="mainCanvas"></canvas>\n' +
-    '\t\t\t<canvas data-element="yAxisLabelsCanvas"></canvas>\n' +
     '\t\t\t<canvas data-element="dynamicObjectsCanvas"></canvas>\n' +
+    '\t\t\t<canvas data-element="yAxisLabelsCanvas"></canvas>\n' +
     '\t\t\t<canvas data-element="yAxisDescriptionsCanvas"></canvas>\n' +
     '\t\t\t<canvas data-element="crossToolCanvas"></canvas>\n' +
     '\t\t\t<canvas data-element="hitTestCanvas"></canvas>\n' +

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

@@ -289,6 +289,8 @@ export interface ChartComponents {
      */
     paneResizer: ChartConfigComponentsPaneResizer;
 }
+export declare const candleTimestampAnchor: readonly ["open", "close"];
+export type CandleTimestampAnchor = (typeof candleTimestampAnchor)[number];
 export interface ChartConfigComponentsChart {
     /**
      * The type of chart. Candle, bar, area and others.
@@ -335,6 +337,11 @@ export interface ChartConfigComponentsChart {
         y: boolean;
     };
     sortCandles?: (candles: Candle[]) => Candle[];
+    /**
+     * Defines whether `Candle.timestamp` represents candle open (start) or close (end) time.
+     * @default 'open'
+     */
+    candleTimestampAnchor?: CandleTimestampAnchor;
 }
 export interface ChartConfigComponentsEvents {
     /**

package/dist/chart/chart.config.js

@@ -81,6 +81,7 @@ export const getDefaultConfig = () => ({
                 y: true,
             },
             sortCandles: defaultSortCandles,
+            candleTimestampAnchor: 'open',
         },
         yAxis: {
             type: 'regular',
@@ -682,4 +683,5 @@ export function immutableMerge(base, override, options) {
     });
     return result;
 }
+export const candleTimestampAnchor = ['open', 'close'];
 export const getFontFromConfig = (config) => `${config.fontSize}px ${config.fontFamily}`;

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

@@ -8,6 +8,7 @@ import { Candle } from '../../model/candle.model';
 import { DataSeriesPoint, VisualSeriesPoint } from '../../model/data-series.model';
 import { Index, Timestamp } from '../../model/scaling/viewport.model';
 import VisualCandle from '../../model/visual-candle';
+import { CandleTimestampAnchor } from '../../chart.config';
 export type BaseType = 'candle' | 'point';
 type DataPoint<T extends BaseType> = T extends 'candle' ? Candle : DataSeriesPoint;
 type VisualPoint<T extends BaseType> = T extends 'candle' ? VisualCandle : VisualSeriesPoint;
@@ -35,6 +36,7 @@ export declare class ChartBaseModel<T extends BaseType = 'point'> {
      * Candles aggregation period in ms. Required for future candles calculation.
      */
     period: number;
+    candleTimestampAnchor: CandleTimestampAnchor;
     constructor(type: T);
     /**
      * For given timestamp finds the closest candle in dataset.

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

@@ -28,6 +28,7 @@ export class ChartBaseModel {
          * Candles aggregation period in ms. Required for future candles calculation.
          */
         this.period = 1;
+        this.candleTimestampAnchor = 'open';
     }
     /**
      * For given timestamp finds the closest candle in dataset.
@@ -35,7 +36,7 @@ export class ChartBaseModel {
      */
     // TODO think how to make this function like candleFromX
     dataFromTimestamp(timestamp, options = { extrapolate: true }, selectedDataPoints = this.mainDataPoints) {
-        const result = searchCandleIndex(timestamp, options, selectedDataPoints, this.period);
+        const result = searchCandleIndex(timestamp, Object.assign(Object.assign({}, options), { candleTimestampAnchor: this.candleTimestampAnchor }), selectedDataPoints, this.period);
         return this.dataFromIdx(result.index);
     }
     /**

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

@@ -370,6 +370,8 @@ export declare class ChartModel extends ChartBaseElement {
      */
     private reindexCandlesBasedOnSeries;
     getPeriod(): number;
+    getCandleTimestampAnchor(): "close" | "open";
+    private candleSearchOptions;
     /**
      * Checks if a given candle is within the viewport.
      * @param {number} idx - The index of the candle to check.

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

@@ -6,7 +6,7 @@
 import { Subject, merge } from 'rxjs';
 import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
 import { CHART_UUID, CanvasElement, areBoundsChanged, } from '../../canvas/canvas-bounds-container';
-import { getDefaultConfig } from '../../chart.config';
+import { getDefaultConfig, } from '../../chart.config';
 import { CandleSeriesModel } from '../../model/candle-series.model';
 import { copyCandle } from '../../model/candle.model';
 import { MIN_SUPPORTED_CANVAS_SIZE } from '../../model/canvas.model';
@@ -66,6 +66,7 @@ export class ChartModel extends ChartBaseElement {
             return sortCandles ? sortCandles(prepared) : prepared;
         };
         this.chartTypeChanged.next(this.config.components.chart.type);
+        this.chartBaseModel.candleTimestampAnchor = this.getCandleTimestampAnchor();
         this.secondaryChartColors = new SecondaryChartColorsPool(this.config);
         const candleSeries = new MainCandleSeriesModel(this.chartBaseModel, this.paneManager.panes[CHART_UUID].mainExtent, uuid(), this.paneManager.hitTestController.getNewDataSeriesHitTestId(), this.bus, this.scale, new ChartInstrument(), this.candlesTransformersByChartType, this.candleWidthByChartType, Object.assign({}, this.config.colors));
         candleSeries.config.type = this.config.components.chart.type;
@@ -305,7 +306,7 @@ export class ChartModel extends ChartBaseElement {
             return;
         }
         const preparedCandles = this.prepareCandles(mainSeries.candles);
-        const updateResult = updateCandles(this.mainCandleSeries.dataPoints, preparedCandles);
+        const updateResult = updateCandles(this.mainCandleSeries.dataPoints, preparedCandles, this.getCandleTimestampAnchor());
         const updatedCandles = updateResult.candles;
         reindexCandles(updatedCandles);
         this.mainCandleSeries.dataPoints = updatedCandles;
@@ -313,7 +314,7 @@ export class ChartModel extends ChartBaseElement {
         secondarySeries.map(series => {
             var _a, _b, _c, _d;
             const preparedCandles = this.prepareCandles(series.candles);
-            const updatedCandles = updateCandles((_d = (_c = this.findSecondarySeriesBySymbol((_b = (_a = series.instrument) === null || _a === void 0 ? void 0 : _a.symbol) !== null && _b !== void 0 ? _b : '')) === null || _c === void 0 ? void 0 : _c.dataPoints) !== null && _d !== void 0 ? _d : [], preparedCandles).candles;
+            const updatedCandles = updateCandles((_d = (_c = this.findSecondarySeriesBySymbol((_b = (_a = series.instrument) === null || _a === void 0 ? void 0 : _a.symbol) !== null && _b !== void 0 ? _b : '')) === null || _c === void 0 ? void 0 : _c.dataPoints) !== null && _d !== void 0 ? _d : [], preparedCandles, this.getCandleTimestampAnchor()).candles;
             return this.setSecondaryCandleSeries(updatedCandles, series.instrument, false);
         });
         // do visual recalculations
@@ -738,7 +739,7 @@ export class ChartModel extends ChartBaseElement {
         return series.reduce((candles, candle) => {
             const timestamp = candle.timestamp;
             // find index of candle in baseSeries
-            const result = searchCandleIndex(timestamp, { extrapolate: false }, baseSeries, this.chartBaseModel.period);
+            const result = searchCandleIndex(timestamp, this.candleSearchOptions(false), baseSeries, this.chartBaseModel.period);
             if (result.index >= 0 && result.index < baseSeries.length) {
                 candle.idx = result.index;
                 candles[result.index] = candle;
@@ -749,6 +750,17 @@ export class ChartModel extends ChartBaseElement {
     getPeriod() {
         return this.chartBaseModel.period;
     }
+    getCandleTimestampAnchor() {
+        var _a;
+        return (_a = this.config.components.chart.candleTimestampAnchor) !== null && _a !== void 0 ? _a : 'open';
+    }
+    candleSearchOptions(extrapolate, isDaysPeriod) {
+        return {
+            extrapolate,
+            isDaysPeriod,
+            candleTimestampAnchor: this.getCandleTimestampAnchor(),
+        };
+    }
     /**
      * Checks if a given candle is within the viewport.
      * @param {number} idx - The index of the candle to check.
@@ -793,7 +805,7 @@ export class ChartModel extends ChartBaseElement {
                     return;
                 }
                 // detect index of updating candle
-                const result = searchCandleIndex(candle.timestamp, { extrapolate: true }, curCandles, this.getPeriod());
+                const result = searchCandleIndex(candle.timestamp, this.candleSearchOptions(true), curCandles, this.getPeriod());
                 const idx = Math.min(result.index, curCandles.length);
                 isNewCandle = isNewCandle || idx === curCandles.length;
                 // update the candle and index
@@ -898,7 +910,7 @@ export class ChartModel extends ChartBaseElement {
         const targetCopy = target.slice();
         const prepend = [];
         prependUpdate.forEach(c => {
-            const result = searchCandleIndex(c.timestamp, { extrapolate: false }, target);
+            const result = searchCandleIndex(c.timestamp, this.candleSearchOptions(false), target);
             const idx = result.index;
             if (idx < 0) {
                 prepend.push(c);
@@ -1027,12 +1039,12 @@ const findFirstNotEmptyCandle = (candles, startIdx, iterateStep) => {
  * @param target {Candle[]} - sorted candles
  * @param update {Candle[]} - sorted candles
  */
-const updateCandles = (target, update) => {
+const updateCandles = (target, update, candleTimestampAnchor = 'open') => {
     const targetCopy = target.slice();
     const prepend = [];
     const append = [];
     update.forEach(c => {
-        const result = searchCandleIndex(c.timestamp, { extrapolate: true }, target);
+        const result = searchCandleIndex(c.timestamp, { extrapolate: true, candleTimestampAnchor }, target);
         const idx = result.index;
         if (idx < 0) {
             prepend.push(c);

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

@@ -156,6 +156,13 @@ export class CrossToolModel extends ChartBaseElement {
             this.updateCrossTool(hover);
             return;
         }
+        const anchoredHover = this.crossEventProducer.crossToolHover;
+        if (anchoredHover && hover.x === anchoredHover.x && hover.y === anchoredHover.y) {
+            const refreshedHover = Object.assign(Object.assign({}, hover), { x: anchoredHover.x, y: anchoredHover.y });
+            this.crossEventProducer.crossToolHover = refreshedHover;
+            this.updateCrossTool(refreshedHover);
+            return;
+        }
         // additional crosstool move logic
         const paneBounds = this.canvasBoundsContainer.getBounds(CanvasElement.PANE_UUID(hover.paneId));
         const offset = 5;

package/dist/chart/components/dynamic-objects/dynamic-objects.model.d.ts

@@ -3,6 +3,7 @@
  * This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
+import { Subject } from 'rxjs';
 import { ChartBaseElement } from '../../model/chart-base-element';
 import { LinkedList } from '../../utils/linkedList.utils';
 import { DynamicModelDrawer } from './dynamic-objects.drawer';
@@ -21,6 +22,7 @@ export declare class DynamicObjectsModel extends ChartBaseElement {
     private _objects;
     private modelIdToObjectMap;
     private _uniqueObjects;
+    orderChangedSubject: Subject<void>;
     constructor(canvasModel: CanvasModel);
     /**
      * @returns the `DynamicObject` itself and pane `LinkedList` where the object is stored.
@@ -52,6 +54,11 @@ export declare class DynamicObjectsModel extends ChartBaseElement {
      * Moves the object inside the associated LinkedList to the specified position
      */
     moveToPosition(id: DynamicObjectId, position: number): void;
+    getPaneObjectIds(paneId: PaneId): DynamicObjectId[];
+    setPaneOrder(paneId: PaneId, orderedIds: DynamicObjectId[], forceUpdate?: boolean): void;
+    reorderObjectIds(paneId: PaneId, orderedIds: DynamicObjectId[], forceUpdate?: boolean): void;
+    private notifyOrderChanged;
+    private moveObjectToFront;
     /**
      * Moves the object inside the drawing order so it's being drawn before the other elements
      * @param paneId

package/dist/chart/components/dynamic-objects/dynamic-objects.model.js

@@ -8,7 +8,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 { BehaviorSubject, Subject } from 'rxjs';
 import { ChartBaseElement } from '../../model/chart-base-element';
 import { LinkedList, ListNode } from '../../utils/linkedList.utils';
 export class DynamicObjectsModel extends ChartBaseElement {
@@ -17,6 +17,7 @@ export class DynamicObjectsModel extends ChartBaseElement {
         this.canvasModel = canvasModel;
         this.modelIdToObjectMap = new Map();
         this._uniqueObjects = {};
+        this.orderChangedSubject = new Subject();
         this._objects = new BehaviorSubject({});
     }
     /**
@@ -130,12 +131,52 @@ export class DynamicObjectsModel extends ChartBaseElement {
         }
         this.setDynamicObjects(this.objects);
     }
-    /**
-     * Moves the object inside the drawing order so it's being drawn before the other elements
-     * @param paneId
-     * @param listNode
-     */
-    bringToFront(id) {
+    getPaneObjectIds(paneId) {
+        const paneList = this.objects[paneId];
+        if (!paneList) {
+            return [];
+        }
+        return [...paneList].map(obj => obj.id);
+    }
+    setPaneOrder(paneId, orderedIds, forceUpdate = true) {
+        const paneList = this.objects[paneId];
+        if (!paneList || orderedIds.length === 0) {
+            return;
+        }
+        const currentIds = this.getPaneObjectIds(paneId);
+        const filteredOrderedIds = orderedIds.filter(id => currentIds.includes(id));
+        const missingIds = currentIds.filter(id => !filteredOrderedIds.includes(id));
+        const targetOrder = [...filteredOrderedIds, ...missingIds];
+        for (let i = 0; i < targetOrder.length; i++) {
+            const id = targetOrder[i];
+            const currentPos = this.getObjectPosition(id);
+            if (currentPos >= 0 && currentPos !== i) {
+                this.moveToPosition(id, i);
+            }
+        }
+        if (forceUpdate) {
+            this.notifyOrderChanged();
+        }
+    }
+    reorderObjectIds(paneId, orderedIds, forceUpdate = true) {
+        const orderedIdSet = new Set(orderedIds);
+        const paneObjectIds = this.getPaneObjectIds(paneId).filter(id => orderedIdSet.has(id));
+        if (paneObjectIds.length === 0) {
+            return;
+        }
+        for (const id of orderedIds) {
+            if (paneObjectIds.includes(id)) {
+                this.moveObjectToFront(id);
+            }
+        }
+        if (forceUpdate) {
+            this.notifyOrderChanged();
+        }
+    }
+    notifyOrderChanged() {
+        this.orderChangedSubject.next();
+    }
+    moveObjectToFront(id) {
         const objInfo = this.getObjectInfoById(id);
         if (!objInfo) {
             return;
@@ -149,6 +190,15 @@ export class DynamicObjectsModel extends ChartBaseElement {
             this.setDynamicObjects(this.objects);
         }
     }
+    /**
+     * Moves the object inside the drawing order so it's being drawn before the other elements
+     * @param paneId
+     * @param listNode
+     */
+    bringToFront(id) {
+        this.moveObjectToFront(id);
+        this.notifyOrderChanged();
+    }
     /**
      * Moves the object inside the drawing order so it's being drawn after the other elements
      * @param paneId
@@ -166,6 +216,7 @@ export class DynamicObjectsModel extends ChartBaseElement {
             paneList.removeAt(targetPos);
             paneList.insertAt(0, obj);
             this.setDynamicObjects(this.objects);
+            this.notifyOrderChanged();
         }
     }
     /**
@@ -185,6 +236,7 @@ export class DynamicObjectsModel extends ChartBaseElement {
             paneList.removeAt(targetPos);
             paneList.insertAt(targetPos + 1, obj);
             this.setDynamicObjects(this.objects);
+            this.notifyOrderChanged();
         }
     }
     /**
@@ -204,6 +256,7 @@ export class DynamicObjectsModel extends ChartBaseElement {
             paneList.removeAt(targetPos);
             paneList.insertAt(targetPos - 1, obj);
             this.setDynamicObjects(this.objects);
+            this.notifyOrderChanged();
         }
     }
     /**

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

@@ -28,6 +28,10 @@ export declare class HighlightsDrawer implements Drawer {
      * chartComponent.draw();
      */
     draw(): void;
+    private findHighlightStartIndex;
+    private resolveHighlightFromCandle;
+    private resolveHighlightToCandle;
+    private getHighlightEndLookupTimestamp;
     /**
      * 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,6 +8,7 @@ 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) {
@@ -63,13 +64,13 @@ export class HighlightsDrawer {
                         ctx.strokeStyle = strokeStyle;
                         items.forEach(item => {
                             var _a, _b, _c;
-                            const fromXCandle = this.chartModel.candleFromTimestamp(item.from);
+                            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);
-                            // currently endTime timestamp for PRE_MARKET type includes same timestamp for REGULAR type startTime
-                            // so we have to take previous timestamp based on current period to exclude PRE_MARKET highlighting
-                            const xCandleTimestamp = item.to - this.chartModel.chartBaseModel.period;
-                            const toXCandle = this.chartModel.candleFromTimestamp(xCandleTimestamp);
+                            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
@@ -98,6 +99,27 @@ export class HighlightsDrawer {
             }
         }
     }
+    findHighlightStartIndex(candles, sessionFrom, periodMs, anchor) {
+        if (anchor === 'open') {
+            const result = searchCandleIndex(sessionFrom, { extrapolate: false, candleTimestampAnchor: 'open' }, candles, periodMs);
+            return result.index;
+        }
+        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);
+        }
+        return this.chartModel.candleFromTimestamp(sessionFrom);
+    }
+    resolveHighlightToCandle(sessionTo, candles, period, anchor) {
+        const lookupTimestamp = this.getHighlightEndLookupTimestamp(sessionTo, period, anchor);
+        return this.chartModel.candleFromTimestamp(lookupTimestamp);
+    }
+    getHighlightEndLookupTimestamp(sessionTo, periodMs, anchor) {
+        return anchor === 'close' ? sessionTo - 1 : sessionTo - periodMs;
+    }
     /**
      * 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/pane/pane.component.d.ts

@@ -86,6 +86,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

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;
@@ -160,9 +161,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;

package/dist/chart/inputhandlers/hover-producer.component.d.ts

@@ -62,6 +62,7 @@ export declare class HoverProducerComponent extends ChartBaseElement {
      * When true, mobile long-touch (e.g. 200ms) does not activate crosshair / disable pan.
      */
     private longTouchCrosshairSuppressed;
+    private hoverOverLastCandle;
     private hoverProducerParts;
     xFormatter: DateTimeFormatter;
     constructor(crossEventProducer: CrossEventProducerComponent, scale: ScaleModel, config: FullChartConfig, chartModel: ChartModel, canvasInputListener: CanvasInputListenerComponent, canvasBoundsContainer: CanvasBoundsContainer, paneManager: PaneManager, timeZoneModel: TimeZoneModel, mainCanvasTouchHandler: MainCanvasTouchHandler, formatterFactory: (format: string) => (timestamp: number) => string);
@@ -103,10 +104,11 @@ export declare class HoverProducerComponent extends ChartBaseElement {
      */
     createAndFireHoverFromCandle(candle: VisualCandle): void;
     /**
-     * Update current hover using a VisualCandle and fires it.
-     * @param {VisualCandle} candle - The VisualCandle object to create the hover from.
+     * Refreshes hover data (candles, studies, etc.) for the current pointer position.
+     * Used when the last candle updates while the legend must stay aligned to crosshair X — not to the last candle center.
      */
     updateHover(candle: VisualCandle): void;
+    private updateHoverLastCandle;
     /**
      * Creates a hover element at the specified coordinates and fires it with the option to show the cross tool
      * @param {CrossEvent} [x,y] - The coordinates where the hover element will be created