@devexperts/dxcharts-lite 2.7.30 → 2.7.31

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/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

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

@@ -38,6 +38,7 @@ export class HoverProducerComponent extends ChartBaseElement {
          * When true, mobile long-touch (e.g. 200ms) does not activate crosshair / disable pan.
          */
         this.longTouchCrosshairSuppressed = false;
+        this.hoverOverLastCandle = false;
         this.xFormatter = () => '';
         const candleHoverProducerPart = new CandleHoverProducerPart(this.chartModel);
         const compareSeriesHoverProducerPart = new CompareSeriesHoverProducerPart(this.chartModel);
@@ -68,16 +69,14 @@ export class HoverProducerComponent extends ChartBaseElement {
             lastCandle && this.createAndFireHoverFromCandle(lastCandle);
         }));
         this.addRxSubscription(this.chartModel.candlesUpdatedSubject.subscribe(() => {
-            // update hover if its timestamp is equal or greater than last candle's one
             const lastCandle = this.chartModel.getLastVisualCandle();
-            if (this.hover !== null && lastCandle !== undefined) {
-                if (lastCandle.candle.timestamp <= this.hover.timestamp) {
-                    this.updateHover(lastCandle);
-                }
+            if (this.hover !== null && lastCandle !== undefined && this.hoverOverLastCandle) {
+                this.updateHover(lastCandle);
             }
         }));
         this.addRxSubscription(this.crossEventProducer.crossSubject.subscribe((cross) => {
             if (cross === null) {
+                this.hoverOverLastCandle = false;
                 this.hoverSubject.next(null);
             }
             else {
@@ -243,23 +242,53 @@ export class HoverProducerComponent extends ChartBaseElement {
         this.fireHover(hover);
     }
     /**
-     * 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) {
         var _a, _b;
+        if (!this.hover) {
+            return;
+        }
+        const shouldKeepSetTouchCrosshair = isMobile() &&
+            this.longTouchActivatedSubject.getValue() &&
+            this.crossEventProducer.crossSubject.getValue() !== null;
+        const crossToolHover = this.crossEventProducer.crossToolHover;
+        const hoverX = shouldKeepSetTouchCrosshair ? ((_a = crossToolHover === null || crossToolHover === void 0 ? void 0 : crossToolHover.x) !== null && _a !== void 0 ? _a : this.hover.x) : this.hover.x;
+        const hoverY = shouldKeepSetTouchCrosshair ? ((_b = crossToolHover === null || crossToolHover === void 0 ? void 0 : crossToolHover.y) !== null && _b !== void 0 ? _b : this.hover.y) : this.hover.y;
+        const hoveredCandle = this.chartModel.candleFromX(hoverX, true);
+        const lastIdx = candle.candle.idx;
+        const hoveredIdx = hoveredCandle.idx;
+        if (lastIdx !== undefined &&
+            hoveredIdx !== undefined &&
+            hoveredIdx < lastIdx &&
+            hoverX < candle.xStart(this.scale)) {
+            return;
+        }
         const updatedHover = this.createHoverFromCandle(candle);
-        if (this.hover && updatedHover) {
-            const shouldKeepSetTouchCrosshair = isMobile() &&
-                this.longTouchActivatedSubject.getValue() &&
-                this.crossEventProducer.crossSubject.getValue() !== null;
-            const crossToolHover = this.crossEventProducer.crossToolHover;
-            const hoverX = shouldKeepSetTouchCrosshair ? ((_a = crossToolHover === null || crossToolHover === void 0 ? void 0 : crossToolHover.x) !== null && _a !== void 0 ? _a : this.hover.x) : this.hover.x;
-            const hoverY = shouldKeepSetTouchCrosshair ? ((_b = crossToolHover === null || crossToolHover === void 0 ? void 0 : crossToolHover.y) !== null && _b !== void 0 ? _b : this.hover.y) : this.hover.y;
+        if (updatedHover) {
             const hover = Object.assign(Object.assign({}, updatedHover), { x: hoverX, y: hoverY });
             this.fireHover(hover);
         }
     }
+    updateHoverLastCandle(hover) {
+        const lastCandle = this.chartModel.getLastVisualCandle();
+        if (!lastCandle) {
+            this.hoverOverLastCandle = false;
+            return;
+        }
+        const hoveredCandle = this.chartModel.candleFromX(hover.x, true);
+        const lastIdx = lastCandle.candle.idx;
+        const hoveredIdx = hoveredCandle.idx;
+        const isHistoricalCandleHover = lastIdx !== undefined &&
+            hoveredIdx !== undefined &&
+            hoveredIdx < lastIdx &&
+            hover.x < lastCandle.xStart(this.scale);
+        this.hoverOverLastCandle =
+            !isHistoricalCandleHover &&
+                (lastCandle.candle.timestamp <= hover.timestamp ||
+                    (lastIdx !== undefined && hoveredIdx !== undefined && hoveredIdx === lastIdx));
+    }
     /**
      * 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
@@ -292,9 +321,11 @@ export class HoverProducerComponent extends ChartBaseElement {
                     : (_b = hover.candleHover) === null || _b === void 0 ? void 0 : _b.visualCandle.candle;
                 candle && this.chartModel.mainCandleSeries.setActiveCandle(candle);
             }
+            this.updateHoverLastCandle(hover);
             this.hoverSubject.next(hover);
         }
         else {
+            this.hoverOverLastCandle = false;
             this.crossEventProducer.fireCrossClose();
         }
     }

package/dist/chart/utils/candles.utils.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 { CandleTimestampAnchor } from '../chart.config';
 import { Candle } from '../model/candle.model';
 import { DataSeriesPoint } from '../model/data-series.model';
 import { BinarySearchResult } from './array.utils';
@@ -10,7 +11,10 @@ export declare const getDaysOnlyTimestampFn: (isDaysPeriod: boolean) => (timesta
 export declare const searchCandleIndex: (rawTimestamp: number, options: {
     extrapolate?: boolean;
     isDaysPeriod?: boolean;
+    candleTimestampAnchor?: CandleTimestampAnchor;
 } | undefined, candles: DataSeriesPoint[], periodMs?: number) => BinarySearchResult;
+export declare const getCandleStart: (candles: DataSeriesPoint[], index: number, periodMs: number, anchor: CandleTimestampAnchor) => number;
+export declare const getCandleEnd: (candle: DataSeriesPoint, periodMs: number, anchor: CandleTimestampAnchor) => number;
 /**
  * checks if the first or the last candle or both have implied volatility data provided
  * @param candles

package/dist/chart/utils/candles.utils.js

@@ -11,7 +11,7 @@ export const getDaysOnlyTimestampFn = (isDaysPeriod) => (timestamp) => {
     }
     return timestamp;
 };
-export const searchCandleIndex = (rawTimestamp, options = {}, candles, periodMs = 1000) => {
+const searchOpenTimeCandleIndex = (rawTimestamp, options = {}, candles, periodMs = 1000) => {
     var _a, _b, _c, _d;
     const { extrapolate, isDaysPeriod } = options;
     const shouldExtrapolate = Boolean(extrapolate);
@@ -55,6 +55,85 @@ export const searchCandleIndex = (rawTimestamp, options = {}, candles, periodMs
         return binarySearch(candles, timestamp, candle => getDaysOnlyTimestamp(candle.timestamp));
     }
 };
+const searchCloseTimeCandleIndex = (rawTimestamp, options = {}, candles, periodMs = 1000) => {
+    var _a, _b, _c, _d, _e, _f;
+    const { extrapolate, isDaysPeriod } = options;
+    const shouldExtrapolate = Boolean(extrapolate);
+    const getDaysOnlyTimestamp = getDaysOnlyTimestampFn(Boolean(isDaysPeriod));
+    const timestamp = getDaysOnlyTimestamp(rawTimestamp);
+    if (!candles.length) {
+        return {
+            index: -1,
+            exact: true,
+        };
+    }
+    const firstTimestamp = getDaysOnlyTimestamp((_b = (_a = firstOf(candles)) === null || _a === void 0 ? void 0 : _a.timestamp) !== null && _b !== void 0 ? _b : 0);
+    const lastTimestamp = getDaysOnlyTimestamp((_d = (_c = lastOf(candles)) === null || _c === void 0 ? void 0 : _c.timestamp) !== null && _d !== void 0 ? _d : 0);
+    if (timestamp > lastTimestamp) {
+        if (shouldExtrapolate) {
+            return {
+                index: candles.length - 1 + Math.ceil((timestamp - lastTimestamp) / periodMs),
+                exact: true,
+            };
+        }
+        return {
+            index: candles.length - 1,
+            exact: true,
+        };
+    }
+    if (timestamp <= firstTimestamp) {
+        const previousClose = getDaysOnlyTimestamp((_f = (_e = candles[0]) === null || _e === void 0 ? void 0 : _e.timestamp) !== null && _f !== void 0 ? _f : firstTimestamp);
+        const firstCandleStart = previousClose - periodMs;
+        if (timestamp <= firstCandleStart) {
+            if (shouldExtrapolate) {
+                return {
+                    index: floor((timestamp - firstTimestamp) / periodMs),
+                    exact: true,
+                };
+            }
+            return {
+                index: -1,
+                exact: true,
+            };
+        }
+        return {
+            index: 0,
+            exact: timestamp === firstTimestamp,
+        };
+    }
+    let lo = 0;
+    let hi = candles.length;
+    while (lo < hi) {
+        const mid = floor((lo + hi) / 2);
+        if (getDaysOnlyTimestamp(candles[mid].timestamp) < timestamp) {
+            lo = mid + 1;
+        }
+        else {
+            hi = mid;
+        }
+    }
+    const index = lo;
+    return {
+        index: index >= candles.length ? candles.length - 1 : index,
+        exact: index < candles.length && getDaysOnlyTimestamp(candles[index].timestamp) === timestamp,
+    };
+};
+export const searchCandleIndex = (rawTimestamp, options = {}, candles, periodMs = 1000) => {
+    var _a;
+    const anchor = (_a = options.candleTimestampAnchor) !== null && _a !== void 0 ? _a : 'open';
+    if (anchor === 'close') {
+        return searchCloseTimeCandleIndex(rawTimestamp, options, candles, periodMs);
+    }
+    return searchOpenTimeCandleIndex(rawTimestamp, options, candles, periodMs);
+};
+export const getCandleStart = (candles, index, periodMs, anchor) => {
+    var _a, _b;
+    if (anchor === 'close') {
+        return (_b = (_a = candles[index - 1]) === null || _a === void 0 ? void 0 : _a.timestamp) !== null && _b !== void 0 ? _b : candles[index].timestamp - periodMs;
+    }
+    return candles[index].timestamp;
+};
+export const getCandleEnd = (candle, periodMs, anchor) => anchor === 'close' ? candle.timestamp : candle.timestamp + periodMs;
 /**
  * checks if the first or the last candle or both have implied volatility data provided
  * @param candles