@devexperts/dxcharts-lite 2.0.2 → 2.2.0

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

@@ -7,25 +7,58 @@ import { BehaviorSubject } from 'rxjs';
 import { ChartBaseElement } from '../../model/chart-base-element';
 import { LinkedList, ListNode } from '../../utils/linkedList.utils';
 export class DynamicObjectsModel extends ChartBaseElement {
-    constructor() {
+    constructor(canvasModel) {
         super();
-        this.modelToObjectMap = new Map();
+        this.canvasModel = canvasModel;
+        this.modelIdToObjectMap = new Map();
         this._objects = new BehaviorSubject({});
     }
+    /**
+     * @returns the `DynamicObject` itself and pane `LinkedList` where the object is stored.
+     *
+     */
+    getObjectInfoById(id) {
+        const obj = this.modelIdToObjectMap.get(id);
+        if (!obj) {
+            return undefined;
+        }
+        const paneId = obj.paneId;
+        const objects = this.objects;
+        const paneList = objects[paneId];
+        if (!paneList) {
+            return undefined;
+        }
+        return [obj, paneList];
+    }
+    /**
+     * @returns `DynamicObject` position in associated pane `LinkedList`
+     * @returns `-1` if an object was not found
+     *
+     */
+    getObjectPosition(id) {
+        const objInfo = this.getObjectInfoById(id);
+        if (!objInfo) {
+            return -1;
+        }
+        const [obj, paneList] = objInfo;
+        const targetNode = new ListNode(obj);
+        return paneList.getNodePosition(targetNode);
+    }
     /**
      * Adds an object from outside chart-core into model
      * @param obj
      * @param paneId
      */
-    addObject(obj, paneId) {
+    addObject(obj) {
         var _a;
+        const paneId = obj.paneId;
         const objects = this.objects;
         const paneList = (_a = objects[paneId]) !== null && _a !== void 0 ? _a : new LinkedList();
         if (!Object.keys(objects).find(pane => pane === paneId)) {
             objects[paneId] = paneList;
         }
         paneList.insertAtEnd(obj);
-        this.modelToObjectMap.set(obj.model, obj);
+        this.modelIdToObjectMap.set(obj.id, obj);
         this.setDynamicObjects(objects);
     }
     /**
@@ -33,36 +66,61 @@ export class DynamicObjectsModel extends ChartBaseElement {
      * @param model
      * @param paneId
      */
-    removeObject(model, paneId) {
-        const objects = this.objects;
-        const paneList = objects[paneId];
-        const obj = this.modelToObjectMap.get(model);
-        if (paneList && obj) {
-            const targetNode = new ListNode(obj);
-            const targetPos = paneList.getNodePosition(targetNode);
-            paneList.removeAt(targetPos);
-            this.modelToObjectMap.delete(model);
-            if (paneList.size() === 0) {
-                delete objects[paneId];
-            }
-            this.setDynamicObjects(objects);
+    removeObject(id) {
+        const objInfo = this.getObjectInfoById(id);
+        if (!objInfo) {
+            return;
+        }
+        const [obj, paneList] = objInfo;
+        const targetNode = new ListNode(obj);
+        const targetPos = paneList.getNodePosition(targetNode);
+        paneList.removeAt(targetPos);
+        this.modelIdToObjectMap.delete(id);
+        if (paneList.size() === 0) {
+            delete this.objects[obj.paneId];
         }
+        this.setDynamicObjects(this.objects);
+    }
+    /**
+     * Moves the object inside the associated LinkedList to the specified position
+     */
+    moveToPosition(id, position) {
+        const objInfo = this.getObjectInfoById(id);
+        if (!objInfo) {
+            return;
+        }
+        const [obj, paneList] = objInfo;
+        const node = new ListNode(obj);
+        const currentPos = paneList.getNodePosition(node);
+        if (currentPos === position) {
+            return;
+        }
+        if (currentPos < position) {
+            paneList.insertAt(position, obj);
+            paneList.removeAt(currentPos);
+        }
+        else {
+            paneList.removeAt(currentPos);
+            paneList.insertAt(position, obj);
+        }
+        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(paneId, listNode) {
-        const list = this.objects[paneId];
-        if (list) {
-            const targetPos = list.getNodePosition(listNode);
-            if (targetPos >= 0 && targetPos < list.size()) {
-                const nodeToReplace = list.removeAt(targetPos);
-                if (nodeToReplace) {
-                    list.insertAtEnd(nodeToReplace.data);
-                }
-            }
+    bringToFront(id) {
+        const objInfo = this.getObjectInfoById(id);
+        if (!objInfo) {
+            return;
+        }
+        const [obj, paneList] = objInfo;
+        const targetNode = new ListNode(obj);
+        const targetPos = paneList.getNodePosition(targetNode);
+        if (targetPos >= 0 && targetPos < paneList.size()) {
+            paneList.removeAt(targetPos);
+            paneList.insertAtEnd(obj);
             this.setDynamicObjects(this.objects);
         }
     }
@@ -71,16 +129,17 @@ export class DynamicObjectsModel extends ChartBaseElement {
      * @param paneId
      * @param listNode
      */
-    bringToBack(paneId, listNode) {
-        const list = this.objects[paneId];
-        if (list) {
-            const targetPos = list.getNodePosition(listNode);
-            if (targetPos > 0 && targetPos <= list.size()) {
-                const nodeToReplace = list.removeAt(targetPos);
-                if (nodeToReplace) {
-                    list.insertAt(0, nodeToReplace === null || nodeToReplace === void 0 ? void 0 : nodeToReplace.data);
-                }
-            }
+    bringToBack(id) {
+        const objInfo = this.getObjectInfoById(id);
+        if (!objInfo) {
+            return;
+        }
+        const [obj, paneList] = objInfo;
+        const targetNode = new ListNode(obj);
+        const targetPos = paneList.getNodePosition(targetNode);
+        if (targetPos > 0 && targetPos <= paneList.size()) {
+            paneList.removeAt(targetPos);
+            paneList.insertAt(0, obj);
             this.setDynamicObjects(this.objects);
         }
     }
@@ -89,16 +148,17 @@ export class DynamicObjectsModel extends ChartBaseElement {
      * @param obj
      * @param paneId
      */
-    moveForward(paneId, listNode) {
-        const list = this.objects[paneId];
-        if (list) {
-            const targetPos = list.getNodePosition(listNode);
-            if (targetPos >= 0 && targetPos < list.size()) {
-                const nodeToReplace = list.removeAt(targetPos);
-                if (nodeToReplace) {
-                    list.insertAt(targetPos + 1, nodeToReplace.data);
-                }
-            }
+    moveForward(id) {
+        const objInfo = this.getObjectInfoById(id);
+        if (!objInfo) {
+            return;
+        }
+        const [obj, paneList] = objInfo;
+        const targetNode = new ListNode(obj);
+        const targetPos = paneList.getNodePosition(targetNode);
+        if (targetPos >= 0 && targetPos + 1 < paneList.size()) {
+            paneList.removeAt(targetPos);
+            paneList.insertAt(targetPos + 1, obj);
             this.setDynamicObjects(this.objects);
         }
     }
@@ -107,16 +167,17 @@ export class DynamicObjectsModel extends ChartBaseElement {
      * @param obj
      * @param paneId
      */
-    moveBackwards(paneId, listNode) {
-        const list = this.objects[paneId];
-        if (list) {
-            const targetPos = list.getNodePosition(listNode);
-            if (targetPos > 0 && targetPos <= list.size()) {
-                const nodeToReplace = list.removeAt(targetPos);
-                if (nodeToReplace) {
-                    list.insertAt(targetPos - 1, nodeToReplace === null || nodeToReplace === void 0 ? void 0 : nodeToReplace.data);
-                }
-            }
+    moveBackwards(id) {
+        const objInfo = this.getObjectInfoById(id);
+        if (!objInfo) {
+            return;
+        }
+        const [obj, paneList] = objInfo;
+        const targetNode = new ListNode(obj);
+        const targetPos = paneList.getNodePosition(targetNode);
+        if (targetPos > 0 && targetPos < paneList.size()) {
+            paneList.removeAt(targetPos);
+            paneList.insertAt(targetPos - 1, obj);
             this.setDynamicObjects(this.objects);
         }
     }
@@ -132,5 +193,6 @@ export class DynamicObjectsModel extends ChartBaseElement {
      */
     setDynamicObjects(objects) {
         this._objects.next(objects);
+        this.canvasModel.fireDraw();
     }
 }

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

@@ -40,9 +40,11 @@ export class GridDrawer {
      * @param {CanvasRenderingContext2D} ctx - The 2D rendering context of the canvas element.
      */
     drawZeroLine(ctx) {
+        const yAxisLabels = this.yLabelsProvider();
         if (this.getBaseline &&
             this.yAxisState.type === 'percent' &&
-            this.yAxisState.zeroPercentLine) {
+            this.yAxisState.zeroPercentLine &&
+            yAxisLabels.length) {
             const bounds = this.xBoundsProvider();
             const y = floor(this.getBaseline());
             ctx.beginPath();

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

@@ -7,6 +7,7 @@ import { CanvasElement } from '../../../canvas/canvas-bounds-container';
 import { ChartBaseElement } from '../../../model/chart-base-element';
 import { DataSeriesModel, VisualSeriesPoint, defaultValueFormatter, } from '../../../model/data-series.model';
 import { mergeHighLow } from '../../../model/scaling/auto-scale.model';
+import { uuid } from '../../../utils/uuid.utils';
 import { createYExtentFormatters } from '../../chart/price.formatter';
 export class YExtentComponent extends ChartBaseElement {
     constructor(paneUUID, idx, paneComponent, chartBaseModel, canvasBoundsContainer, hitTestController, dynamicObjectsCanvasModel, scale, createYAxisComponent, dragNDrop, dataSeries = new Set(), formatters = {
@@ -66,7 +67,7 @@ export class YExtentComponent extends ChartBaseElement {
      * @returns {DataSeriesModel} - The newly created DataSeriesModel object.
      */
     createDataSeries() {
-        const series = new DataSeriesModel(this, this.hitTestController.getNewDataSeriesHitTestId());
+        const series = new DataSeriesModel(this, uuid(), this.hitTestController.getNewDataSeriesHitTestId());
         series.toVisualPoints = this.toVisualPoints;
         return series;
     }

package/dist/chart/components/pane/pane-hit-test.controller.js

@@ -32,7 +32,7 @@ export class PaneHitTestController {
      * @returns {DataSeriesModel | undefined} - The data series with the given ID, or undefined if it does not exist.
      */
     lookup(id) {
-        const result = this.allDataSeries.find(d => d.id === id);
+        const result = this.allDataSeries.find(d => d.htId === id);
         return result;
     }
     /**
@@ -41,7 +41,7 @@ export class PaneHitTestController {
      * @returns {void}
      */
     onHover(model) {
-        this.allDataSeries.forEach(d => (d.hovered = d.id === (model === null || model === void 0 ? void 0 : model.id)));
+        this.allDataSeries.forEach(d => (d.hovered = d.htId === (model === null || model === void 0 ? void 0 : model.htId)));
         this.canvasModel.fireDraw();
     }
     onMouseDown(model) {

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

@@ -21,9 +21,11 @@ export declare class VolumesComponent extends ChartBaseElement {
     private canvasModel;
     private canvasBoundsContainer;
     private config;
+    private dynamicObjectsComponent;
     separateVolumes: SeparateVolumesComponent;
     volumesColorByChartTypeMap: Partial<Record<BarType, VolumeColorResolver>>;
     volumesModel: VolumesModel;
+    private readonly volumesDrawer;
     volumeVisibilityChangedSubject: BehaviorSubject<boolean>;
     volumeIsSeparateModeChangedSubject: BehaviorSubject<boolean>;
     constructor(canvasModel: CanvasModel, chartComponent: ChartComponent, scale: ScaleModel, canvasBoundsContainer: CanvasBoundsContainer, drawingManager: DrawingManager, config: FullChartConfig, paneManager: PaneManager, dynamicObjectsComponent: DynamicObjectsComponent);
@@ -56,4 +58,5 @@ export declare class VolumesComponent extends ChartBaseElement {
      * @returns {void}
      */
     setVisible(visible?: boolean): void;
+    private addVolumesToDynamicObjects;
 }

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

@@ -9,13 +9,14 @@ import { ChartBaseElement } from '../../model/chart-base-element';
 import { SeparateVolumesComponent } from './separate-volumes.component';
 import { resolveColorForBar, resolveColorForCandle, resolveColorForLine } from './volume-color-resolvers.functions';
 import { VolumesDrawer } from './volumes.drawer';
-import { VolumesModel } from './volumes.model';
+import { VOLUMES_UUID, VolumesModel } from './volumes.model';
 export class VolumesComponent extends ChartBaseElement {
     constructor(canvasModel, chartComponent, scale, canvasBoundsContainer, drawingManager, config, paneManager, dynamicObjectsComponent) {
         super();
         this.canvasModel = canvasModel;
         this.canvasBoundsContainer = canvasBoundsContainer;
         this.config = config;
+        this.dynamicObjectsComponent = dynamicObjectsComponent;
         this.volumesColorByChartTypeMap = {};
         this.volumeVisibilityChangedSubject = new BehaviorSubject(false);
         this.volumeIsSeparateModeChangedSubject = new BehaviorSubject(false);
@@ -23,8 +24,8 @@ export class VolumesComponent extends ChartBaseElement {
         this.volumesModel = volumesModel;
         this.addChildEntity(volumesModel);
         this.separateVolumes = new SeparateVolumesComponent(chartComponent, drawingManager, config, volumesModel, paneManager);
-        const volumesDrawer = new VolumesDrawer(config, this.volumesModel, chartComponent.chartModel, () => { var _a, _b; return (this.config.components.volumes.showSeparately ? (_b = (_a = this.separateVolumes.pane) === null || _a === void 0 ? void 0 : _a.scale) !== null && _b !== void 0 ? _b : scale : scale); }, this.volumesColorByChartTypeMap, () => true);
-        dynamicObjectsComponent.model.addObject({ drawer: volumesDrawer, model: volumesModel }, CHART_UUID);
+        this.volumesDrawer = new VolumesDrawer(config, this.volumesModel, chartComponent.chartModel, () => { var _a, _b; return (this.config.components.volumes.showSeparately ? (_b = (_a = this.separateVolumes.pane) === null || _a === void 0 ? void 0 : _a.scale) !== null && _b !== void 0 ? _b : scale : scale); }, this.volumesColorByChartTypeMap, () => true);
+        config.components.volumes.visible && this.addVolumesToDynamicObjects();
         this.addChildEntity(this.separateVolumes);
         this.registerDefaultVolumeColorResolvers();
         this.volumeVisibilityChangedSubject.next(config.components.volumes.visible);
@@ -83,7 +84,10 @@ export class VolumesComponent extends ChartBaseElement {
     setVisible(visible = true) {
         this.config.components.volumes.visible = visible;
         this.volumeVisibilityChangedSubject.next(visible);
-        if (this.config.components.volumes.showSeparately === true) {
+        visible
+            ? this.addVolumesToDynamicObjects()
+            : this.dynamicObjectsComponent.model.removeObject(this.volumesModel.id);
+        if (this.config.components.volumes.showSeparately) {
             if (visible) {
                 this.separateVolumes.activateSeparateVolumes();
                 this.volumeIsSeparateModeChangedSubject.next(true);
@@ -96,4 +100,17 @@ export class VolumesComponent extends ChartBaseElement {
         this.canvasBoundsContainer.recalculatePanesHeightRatios();
         this.canvasModel.fireDraw();
     }
+    addVolumesToDynamicObjects() {
+        // check if the volumes dynamic object is already added
+        const position = this.dynamicObjectsComponent.model.getObjectPosition(this.volumesModel.id);
+        if (position !== -1) {
+            return;
+        }
+        this.dynamicObjectsComponent.model.addObject({
+            id: this.volumesModel.id,
+            paneId: this.config.components.volumes.showSeparately ? VOLUMES_UUID : CHART_UUID,
+            drawer: this.volumesDrawer,
+            model: this.volumesModel,
+        });
+    }
 }

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

@@ -8,9 +8,11 @@ import { ChartBaseElement } from '../../model/chart-base-element';
 import { ScaleModel } from '../../model/scale.model';
 import { HighLowProvider } from '../../model/scaling/auto-scale.model';
 import { ChartComponent } from '../chart/chart.component';
+export declare const VOLUMES_UUID = "volumes";
 export declare class VolumesModel extends ChartBaseElement {
     private chartComponent;
     private scale;
+    readonly id = "volumes";
     volumeMax: BehaviorSubject<number>;
     highLowProvider: HighLowProvider;
     constructor(chartComponent: ChartComponent, scale: ScaleModel);

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

@@ -7,11 +7,13 @@ import { BehaviorSubject, merge } from 'rxjs';
 import { ChartBaseElement } from '../../model/chart-base-element';
 import { firstOf, maxMin } from '../../utils/array.utils';
 const volumeMaxMinFn = maxMin(candle => candle.candle.volume);
+export const VOLUMES_UUID = 'volumes';
 export class VolumesModel extends ChartBaseElement {
     constructor(chartComponent, scale) {
         super();
         this.chartComponent = chartComponent;
         this.scale = scale;
+        this.id = VOLUMES_UUID;
         // max volume in all data series
         this.volumeMax = new BehaviorSubject(0);
         this.highLowProvider = {

package/dist/chart/components/x_axis/x-axis.component.js

@@ -56,8 +56,8 @@ export class XAxisComponent extends ChartBaseElement {
             this.xAxisLabelsGenerator.generateLabels();
         }));
         this.addRxSubscription(this.chartComponent.chartModel.candlesPrependSubject
-            .pipe(filter(({ preparedCandles }) => preparedCandles.length !== 0), map(({ preparedCandles }) => {
-            return this.chartComponent.chartModel.mainCandleSeries.visualPoints.slice(0, preparedCandles.length);
+            .pipe(filter(({ prependedCandles }) => prependedCandles.length !== 0), map(({ prependedCandles }) => {
+            return this.chartComponent.chartModel.mainCandleSeries.visualPoints.slice(0, prependedCandles.length);
         }))
             .subscribe(newCandles => {
             //@ts-ignore

package/dist/chart/components/y_axis/label-color.functions.d.ts

@@ -4,8 +4,9 @@
  * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 import { PriceMovement } from '../../model/candle-series.model';
-import { FullChartColors, YAxisLabelsColors } from '../../chart.config';
+import { FullChartColors, YAxisConfig, YAxisLabelsColors } from '../../chart.config';
 export declare const DEFAULT_LABEL_COLOR = "#FF00FF";
+export declare function getPlainLabelTextColor(colorsConfig: FullChartColors, textColor: string, invertedTextColor: string, yAxisState: YAxisConfig): string;
 export declare const getPrimaryLabelTextColor: (lastPriceMovement: PriceMovement, colors: YAxisLabelsColors) => string;
 export declare const resolveColorForBar: (priceMovement: PriceMovement, colors: FullChartColors) => string;
 export declare const resolveColorForLine: (priceMovement: PriceMovement, colors: FullChartColors) => string;

package/dist/chart/components/y_axis/label-color.functions.js

@@ -3,7 +3,24 @@
  * 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 { getLabelTextColorByBackgroundColor } from '../../utils/canvas/canvas-text-functions.utils';
 export const DEFAULT_LABEL_COLOR = '#FF00FF';
+export function getPlainLabelTextColor(colorsConfig, textColor, invertedTextColor, yAxisState) {
+    // `plain` label is transparent, so to calculate text color
+    // we need to go down to draw hierarchy
+    // the next is YAxis bg color
+    const yAxisBGColor = colorsConfig.yAxis.backgroundColor;
+    // if yAxis bg color is transparent, then we need to check chart area background color
+    const plainChartBGColor = colorsConfig.chartAreaTheme.backgroundColor;
+    // when chart area bg color is gradient, then we need to check which side yAxis is drawn
+    // because color on the right side and left side is different
+    const leftChartBGColor = colorsConfig.chartAreaTheme.backgroundGradientTopColor;
+    const rightChartBGColor = colorsConfig.chartAreaTheme.backgroundGradientBottomColor;
+    const gradientChartBGColor = yAxisState.align === 'left' ? leftChartBGColor : rightChartBGColor;
+    const chartBGColor = colorsConfig.chartAreaTheme.backgroundMode === 'gradient' ? gradientChartBGColor : plainChartBGColor;
+    const bgColor = yAxisBGColor === 'transparent' ? chartBGColor : yAxisBGColor;
+    return getLabelTextColorByBackgroundColor(bgColor, textColor, invertedTextColor);
+}
 export const getPrimaryLabelTextColor = (lastPriceMovement, colors) => {
     if (lastPriceMovement === 'down') {
         return colors.lastPrice.textNegative;

package/dist/chart/components/y_axis/price_labels/data-series-y-axis-labels.provider.d.ts

@@ -12,8 +12,8 @@ export declare class DataSeriesYAxisLabelsProvider implements YAxisLabelsProvide
     private series;
     private config;
     yAxisBoundsProvider: BoundsProvider;
-    axisState?: YAxisConfig | undefined;
-    constructor(series: DataSeriesModel, config: DataSeriesConfig, yAxisBoundsProvider: BoundsProvider, axisState?: YAxisConfig | undefined);
+    axisState: YAxisConfig;
+    constructor(series: DataSeriesModel, config: DataSeriesConfig, yAxisBoundsProvider: BoundsProvider, axisState: YAxisConfig);
     /**
      * Returns an array of LabelGroup objects that contain VisualYAxisLabel objects.
      * The labels are unordered and are based on the last data series point or the last visual series point, depending on the configuration.

package/dist/chart/components/y_axis/price_labels/data-series-y-axis-labels.provider.js

@@ -21,32 +21,34 @@ export class DataSeriesYAxisLabelsProvider {
      */
     getUnorderedLabels() {
         const visible = this.config.visible;
-        if (visible) {
-            const getLastPointForLabel = this.config.labelLastValue === 'series'
-                ? this.series.getLastDataSeriesPoint
-                : this.series.getLastVisualSeriesPoint;
-            const bounds = this.yAxisBoundsProvider();
-            const mode = this.config.labelMode;
-            const appearanceType = this.config.labelAppearanceType;
-            const lastPoint = getLastPointForLabel();
-            if (lastPoint !== undefined) {
-                const lastPointY = this.series.view.toY(lastPoint.close);
-                if (isFinite(lastPointY)) {
-                    const label = this.series.valueFormatter(lastPoint.close);
-                    const drawConfig = this.getLabelDrawConfig();
-                    return [
-                        {
-                            labels: [
-                                Object.assign({ y: lastPointY, description: this.series.name, mode, labelType: appearanceType, labelText: label }, drawConfig),
-                            ],
-                            axisState: this.axisState,
-                            bounds,
-                        },
-                    ];
-                }
-            }
+        if (!visible) {
+            return [];
         }
-        return [];
+        const getLastPointForLabel = this.config.labelLastValue === 'series'
+            ? this.series.getLastDataSeriesPoint
+            : this.series.getLastVisualSeriesPoint;
+        const bounds = this.yAxisBoundsProvider();
+        const mode = this.config.labelMode;
+        const appearanceType = this.config.labelAppearanceType;
+        const lastPoint = getLastPointForLabel();
+        if (lastPoint === undefined) {
+            return [];
+        }
+        const lastPointY = this.series.view.toY(lastPoint.close);
+        if (!isFinite(lastPointY)) {
+            return [];
+        }
+        const label = this.series.valueFormatter(lastPoint.close);
+        const drawConfig = this.getLabelDrawConfig();
+        return [
+            {
+                labels: [
+                    Object.assign({ y: lastPointY, description: this.series.name, mode, labelType: appearanceType, labelText: label }, drawConfig),
+                ],
+                axisState: this.axisState,
+                bounds,
+            },
+        ];
     }
     /**
      * Retrieves the `config` object from the `series` object and then retrieves the `paintConfig` object from the `config` object.

package/dist/chart/components/y_axis/price_labels/labels-positions-calculator.js

@@ -21,23 +21,34 @@ export function calcLabelsYCoordinates(points, labelHeight) {
         .filter(notEmpty)
         .sort(sortLabels); // sort labels in ascending order, top -> down
     const newCoordinates = new Array(formattedCoordinates.length);
-    formattedCoordinates.forEach((current, idx) => {
-        if (current === null) {
-            return;
+    const lowestWeight = formattedCoordinates.reduce((acc, curr) => Math.min(acc, curr.labelWeight), Number.POSITIVE_INFINITY);
+    const lowestWeightIndex = formattedCoordinates.findIndex(x => x.labelWeight === lowestWeight);
+    for (let i = lowestWeightIndex; i >= 0; i--) {
+        const current = formattedCoordinates[i];
+        const prev = formattedCoordinates[i - 1];
+        if (!current) {
+            continue;
+        }
+        if (prev && prev.bottom > current.top) {
+            const paddingAdjust = Math.abs(prev.labelWeight - current.labelWeight) === 1 ? 2 : 0;
+            prev.bottom = current.top - paddingAdjust;
+            prev.top = prev.bottom - labelHeight;
+        }
+        newCoordinates[current.actualIndex] = (current.top + current.bottom) / 2;
+    }
+    for (let i = lowestWeightIndex; i < formattedCoordinates.length; i++) {
+        const current = formattedCoordinates[i];
+        const next = formattedCoordinates[i + 1];
+        if (!current) {
+            break;
         }
-        const next = formattedCoordinates[idx + 1];
         if (next && next.top < current.bottom) {
-            /**
-             * adjust padding if weight diff is 1, used for countdown label padding
-             * @doc-tags tricky
-             */
-            const paddingAdjust = next.labelWeight - current.labelWeight === 1 ? 2 : 0;
-            const delta = current.bottom - next.top + paddingAdjust;
-            next.top += delta;
-            next.bottom += delta;
+            const paddingAdjust = Math.abs(next.labelWeight - current.labelWeight) === 1 ? 2 : 0;
+            next.top = current.bottom + paddingAdjust;
+            next.bottom = next.top + labelHeight;
         }
         newCoordinates[current.actualIndex] = (current.top + current.bottom) / 2;
-    });
+    }
     return newCoordinates;
 }
 const toLabel = (point, index, labelHeight) => point

package/dist/chart/components/y_axis/price_labels/last-candle-labels.provider.d.ts

@@ -10,11 +10,11 @@ import { LabelGroup, YAxisLabelsProvider } from './y-axis-labels.model';
 import { LabelColorResolver } from '../y-axis.component';
 export declare class LastCandleLabelsProvider implements YAxisLabelsProvider {
     private chartModel;
-    private fullConfig;
+    private chartConfig;
     private yAxisConfig;
     private lastCandleLabelsByChartType;
     private resolveLabelColorFn;
-    constructor(chartModel: ChartModel, fullConfig: FullChartConfig, yAxisConfig: YAxisConfig, lastCandleLabelsByChartType: Partial<Record<DataSeriesType, LastCandleLabelHandler>>, resolveLabelColorFn: (chartType: DataSeriesType) => LabelColorResolver);
+    constructor(chartModel: ChartModel, chartConfig: FullChartConfig, yAxisConfig: YAxisConfig, lastCandleLabelsByChartType: Partial<Record<DataSeriesType, LastCandleLabelHandler>>, resolveLabelColorFn: (chartType: DataSeriesType) => LabelColorResolver);
     /**
      * Returns an array of LabelGroup objects that contain the labels for the yAxis of the chart.
      * @returns {LabelGroup[]} An array of LabelGroup objects that contain the labels for the yAxis of the chart.
@@ -29,7 +29,7 @@ export declare class LastCandleLabelsProvider implements YAxisLabelsProvider {
     /**
      * Returns the configuration object for drawing the label of the Y-axis.
      * @param {CandleSeriesModel} series - The series model for which the label configuration is to be returned.
-     * @param {boolean} primary - A boolean value indicating whether the label is primary or not.
+     * @param {boolean} primary - A boolean value indicating whether the label is for the main series or not.
      * @returns {YAxisLabelDrawConfig} - The configuration object for drawing the label of the Y-axis.
      */
     private getLabelDrawConfig;