@devexperts/dxcharts-lite 2.0.1 → 2.1.0

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

@@ -5,6 +5,7 @@
  */
 import { CanvasBoundsContainer } from '../../../canvas/canvas-bounds-container';
 import { FullChartConfig } from '../../../chart.config';
+import { CanvasModel } from '../../../model/canvas.model';
 import { PaneManager } from '../../pane/pane-manager.component';
 import { CrossToolTypeDrawer } from '../cross-tool.drawer';
 import { CrossToolHover } from '../cross-tool.model';
@@ -12,9 +13,10 @@ export declare class CrossAndLabelsDrawerType implements CrossToolTypeDrawer {
     private config;
     private canvasBoundsContainer;
     private paneManager;
+    private backgroundCanvasModel;
     private crossDrawPredicate;
     private noLines?;
-    constructor(config: FullChartConfig, canvasBoundsContainer: CanvasBoundsContainer, paneManager: PaneManager, crossDrawPredicate?: () => boolean, noLines?: boolean | undefined);
+    constructor(config: FullChartConfig, canvasBoundsContainer: CanvasBoundsContainer, paneManager: PaneManager, backgroundCanvasModel: CanvasModel, crossDrawPredicate?: () => boolean, noLines?: boolean | undefined);
     /**
      * Draws a cross tool on a canvas context and its labels if the crossDrawPredicate is true.
      * @param {CanvasRenderingContext2D} ctx - The canvas context to draw on.

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

@@ -7,10 +7,11 @@ import { CanvasElement } from '../../../canvas/canvas-bounds-container';
 import { avoidAntialiasing, drawRoundedRect } from '../../../utils/canvas/canvas-drawing-functions.utils';
 import { priceLabelDrawersMap } from '../../y_axis/price_labels/price-label.drawer';
 export class CrossAndLabelsDrawerType {
-    constructor(config, canvasBoundsContainer, paneManager, crossDrawPredicate = () => true, noLines) {
+    constructor(config, canvasBoundsContainer, paneManager, backgroundCanvasModel, crossDrawPredicate = () => true, noLines) {
         this.config = config;
         this.canvasBoundsContainer = canvasBoundsContainer;
         this.paneManager = paneManager;
+        this.backgroundCanvasModel = backgroundCanvasModel;
         this.crossDrawPredicate = crossDrawPredicate;
         this.noLines = noLines;
     }
@@ -135,7 +136,7 @@ export class CrossAndLabelsDrawerType {
                     paddingBottom: yLabelPadding === null || yLabelPadding === void 0 ? void 0 : yLabelPadding.bottom,
                     paddingEnd: yLabelPadding === null || yLabelPadding === void 0 ? void 0 : yLabelPadding.end,
                     paddingTop: yLabelPadding === null || yLabelPadding === void 0 ? void 0 : yLabelPadding.top,
-                }, extent.yAxis.state, this.config.colors.yAxis, true);
+                }, extent.yAxis.state, this.config.colors.yAxis, true, this.backgroundCanvasModel.ctx);
             }
         }
     }

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

@@ -10,7 +10,7 @@ export class DynamicObjectsComponent extends ChartBaseElement {
     constructor(canvasModel, drawingManager) {
         super();
         // model
-        const dynamicObjectsModel = new DynamicObjectsModel();
+        const dynamicObjectsModel = new DynamicObjectsModel(canvasModel);
         this.model = dynamicObjectsModel;
         this.addChildEntity(dynamicObjectsModel);
         // drawer

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

@@ -4,53 +4,73 @@
  * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 import { ChartBaseElement } from '../../model/chart-base-element';
-import { LinkedList, ListNode } from '../../utils/linkedList.utils';
+import { LinkedList } from '../../utils/linkedList.utils';
 import { DynamicModelDrawer } from './dynamic-objects.drawer';
+import { CanvasModel } from '../../model/canvas.model';
 export type PaneId = string;
+export type DynamicObjectId = string | number;
 export interface DynamicObject<T = unknown> {
+    readonly id: DynamicObjectId;
     readonly drawer: DynamicModelDrawer<T>;
-    readonly model: T;
+    readonly paneId: PaneId;
+    readonly model?: T;
 }
 export declare class DynamicObjectsModel extends ChartBaseElement {
+    private canvasModel;
     private _objects;
-    private modelToObjectMap;
-    constructor();
+    private modelIdToObjectMap;
+    constructor(canvasModel: CanvasModel);
+    /**
+     * @returns the `DynamicObject` itself and pane `LinkedList` where the object is stored.
+     *
+     */
+    private getObjectInfoById;
+    /**
+     * @returns `DynamicObject` position in associated pane `LinkedList`
+     * @returns `-1` if an object was not found
+     *
+     */
+    getObjectPosition(id: DynamicObjectId): number;
     /**
      * Adds an object from outside chart-core into model
      * @param obj
      * @param paneId
      */
-    addObject(obj: DynamicObject, paneId: PaneId): void;
+    addObject(obj: DynamicObject): void;
     /**
      * Removes an object from model
      * @param model
      * @param paneId
      */
-    removeObject(model: unknown, paneId: PaneId): void;
+    removeObject(id: DynamicObjectId): void;
+    /**
+     * Moves the object inside the associated LinkedList to the specified position
+     */
+    moveToPosition(id: DynamicObjectId, position: number): void;
     /**
      * Moves the object inside the drawing order so it's being drawn before the other elements
      * @param paneId
      * @param listNode
      */
-    bringToFront(paneId: PaneId, listNode: ListNode<DynamicObject>): void;
+    bringToFront(id: DynamicObjectId): void;
     /**
      * Moves the object inside the drawing order so it's being drawn after the other elements
      * @param paneId
      * @param listNode
      */
-    bringToBack(paneId: PaneId, listNode: ListNode<DynamicObject>): void;
+    bringToBack(id: DynamicObjectId): void;
     /**
      * Moves the object inside the drawing order so it's being drawn one layer ahead
      * @param obj
      * @param paneId
      */
-    moveForward(paneId: PaneId, listNode: ListNode<DynamicObject>): void;
+    moveForward(id: DynamicObjectId): void;
     /**
      * Moves the object inside the drawing order so it's being drawn one layer closer to the back
      * @param obj
      * @param paneId
      */
-    moveBackwards(paneId: PaneId, listNode: ListNode<DynamicObject>): void;
+    moveBackwards(id: DynamicObjectId): void;
     /**
      * Getter for the objects
      */

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.