@devexperts/dxcharts-lite 2.4.1 → 2.4.2

package/dist/chart/bootstrap.js

@@ -144,7 +144,7 @@ export default class ChartBootstrap {
         this.canvasBoundsContainer.setMainCandleSeries(this.chartModel.mainCandleSeries);
         hitTestCanvasModel.addSubscriber(paneManager.hitTestController);
         // X-axis component
-        this.xAxisComponent = new XAxisComponent(eventBus, config, mainCanvasModel, chartComponent, scaleModel, canvasBoundsContainer, canvasInputListener, chartResizeHandler, this.drawingManager, timeZoneModel, chartPanComponent, this.cursorHandler, backgroundCanvasModel);
+        this.xAxisComponent = new XAxisComponent(eventBus, config, mainCanvasModel, chartComponent, scaleModel, canvasBoundsContainer, canvasInputListener, chartResizeHandler, this.drawingManager, timeZoneModel, chartPanComponent, this.cursorHandler);
         this.chartComponents.push(this.xAxisComponent);
         this.userInputListenerComponents.push(this.xAxisComponent.xAxisScaleHandler);
         const mainCanvasClearDrawer = new ClearCanvasDrawer(mainCanvasModel);
@@ -180,7 +180,7 @@ export default class ChartBootstrap {
         this.chartComponents.push(mainChartGridComponent);
         this.hoverProducer = new HoverProducerComponent(this.crossEventProducer, scaleModel, config, chartModel, canvasInputListener, this.canvasBoundsContainer, this.paneManager, timeZoneModel, formatterFactory);
         this.chartComponents.push(this.hoverProducer);
-        this.crossToolComponent = new CrossToolComponent(config, crossToolCanvasModel, canvasBoundsContainer, drawingManager, paneManager, this.crossEventProducer, this.hoverProducer, this.backgroundCanvasModel);
+        this.crossToolComponent = new CrossToolComponent(config, crossToolCanvasModel, canvasBoundsContainer, drawingManager, paneManager, this.crossEventProducer, this.hoverProducer);
         this.chartComponents.push(this.crossToolComponent);
         // Snapshot component
         const snapshotCanvasModel = createCanvasModel(eventBus, elements.snapshotCanvas, config, drawingManager, this.canvasModels, elements.chartResizer);
@@ -188,7 +188,7 @@ export default class ChartBootstrap {
         this.snapshotComponent = snapshotComponent;
         this.chartComponents.push(snapshotComponent);
         // events
-        const eventsComponent = new EventsComponent(config, this.dynamicObjectsCanvasModel, hitTestCanvasModel, chartModel, canvasBoundsContainer, drawingManager, formatterFactory, this.cursorHandler, backgroundCanvasModel);
+        const eventsComponent = new EventsComponent(config, this.dynamicObjectsCanvasModel, hitTestCanvasModel, chartModel, canvasBoundsContainer, drawingManager, formatterFactory, this.cursorHandler);
         this.eventsComponent = eventsComponent;
         this.chartComponents.push(eventsComponent);
         // Temporary solution - all in one place

package/dist/chart/chart.config.js

@@ -459,7 +459,7 @@ export const getDefaultConfig = () => ({
             },
         ],
         yAxis: {
-            backgroundColor: 'transparent',
+            backgroundColor: 'rgba(20,20,19,1)',
             labelBoxColor: 'rgba(20,20,19,1)',
             labelTextColor: 'rgba(128,128,128,1)',
             labelInvertedTextColor: 'rgba(20,20,19,1)',
@@ -499,7 +499,7 @@ export const getDefaultConfig = () => ({
             prevDayClose: { boxColor: 'rgba(107,96,86,1)', textColor: 'rgba(255,255,255,1)' },
         },
         xAxis: {
-            backgroundColor: 'transparent',
+            backgroundColor: 'rgba(20,20,19,1)',
             labelTextColor: 'rgba(128,128,128,1)',
         },
         navigationMap: {

package/dist/chart/components/cross_tool/cross-tool.component.d.ts

@@ -23,10 +23,9 @@ export declare class CrossToolComponent extends ChartBaseElement {
     private canvasBoundsContainer;
     private drawingManager;
     private paneManager;
-    private backgroundCanvasModel;
     readonly model: CrossToolModel;
     private readonly crossToolTypeDrawers;
-    constructor(config: FullChartConfig, crossToolCanvasModel: CanvasModel, canvasBoundsContainer: CanvasBoundsContainer, drawingManager: DrawingManager, paneManager: PaneManager, crossEventProducer: CrossEventProducerComponent, hoverProducer: HoverProducerComponent, backgroundCanvasModel: CanvasModel);
+    constructor(config: FullChartConfig, crossToolCanvasModel: CanvasModel, canvasBoundsContainer: CanvasBoundsContainer, drawingManager: DrawingManager, paneManager: PaneManager, crossEventProducer: CrossEventProducerComponent, hoverProducer: HoverProducerComponent);
     /**
      * Registers default drawer types for the chart.
      * @private

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

@@ -14,14 +14,13 @@ import { NoneDrawerType } from './types/none.drawer';
  * Default bundled chart cross tool.
  */
 export class CrossToolComponent extends ChartBaseElement {
-    constructor(config, crossToolCanvasModel, canvasBoundsContainer, drawingManager, paneManager, crossEventProducer, hoverProducer, backgroundCanvasModel) {
+    constructor(config, crossToolCanvasModel, canvasBoundsContainer, drawingManager, paneManager, crossEventProducer, hoverProducer) {
         super();
         this.config = config;
         this.crossToolCanvasModel = crossToolCanvasModel;
         this.canvasBoundsContainer = canvasBoundsContainer;
         this.drawingManager = drawingManager;
         this.paneManager = paneManager;
-        this.backgroundCanvasModel = backgroundCanvasModel;
         this.crossToolTypeDrawers = {};
         this.model = new CrossToolModel(config.components.crossTool, this.crossToolCanvasModel, crossEventProducer, hoverProducer);
         this.addChildEntity(this.model);
@@ -42,8 +41,8 @@ export class CrossToolComponent extends ChartBaseElement {
      * @returns {void}
      */
     registerDefaultDrawerTypes() {
-        this.registerCrossToolTypeDrawer('cross-and-labels', new CrossAndLabelsDrawerType(this.config, this.canvasBoundsContainer, this.paneManager, this.backgroundCanvasModel, () => true));
-        this.registerCrossToolTypeDrawer('just-labels', new CrossAndLabelsDrawerType(this.config, this.canvasBoundsContainer, this.paneManager, this.backgroundCanvasModel, () => true, true));
+        this.registerCrossToolTypeDrawer('cross-and-labels', new CrossAndLabelsDrawerType(this.config, this.canvasBoundsContainer, this.paneManager, () => true));
+        this.registerCrossToolTypeDrawer('just-labels', new CrossAndLabelsDrawerType(this.config, this.canvasBoundsContainer, this.paneManager, () => true, true));
         this.registerCrossToolTypeDrawer('none', new NoneDrawerType());
     }
     //#region public methods

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

@@ -5,7 +5,6 @@
  */
 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';
@@ -13,10 +12,9 @@ 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, backgroundCanvasModel: CanvasModel, crossDrawPredicate?: () => boolean, noLines?: boolean | undefined);
+    constructor(config: FullChartConfig, canvasBoundsContainer: CanvasBoundsContainer, paneManager: PaneManager, 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,11 +7,10 @@ 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, backgroundCanvasModel, crossDrawPredicate = () => true, noLines) {
+    constructor(config, canvasBoundsContainer, paneManager, crossDrawPredicate = () => true, noLines) {
         this.config = config;
         this.canvasBoundsContainer = canvasBoundsContainer;
         this.paneManager = paneManager;
-        this.backgroundCanvasModel = backgroundCanvasModel;
         this.crossDrawPredicate = crossDrawPredicate;
         this.noLines = noLines;
     }
@@ -138,7 +137,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, this.backgroundCanvasModel.ctx);
+                }, extent.yAxis.state, this.config.colors.yAxis, true);
             }
         }
     }

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

@@ -22,7 +22,7 @@ export declare class EventsComponent extends ChartBaseElement {
     private formatterFactory;
     eventsModel: EventsModel;
     private eventsXAxisLabelFormatterProvider;
-    constructor(config: FullChartConfig, canvasModel: CanvasModel, hitTestCanvasModel: HitTestCanvasModel, chartModel: ChartModel, canvasBoundsContainer: CanvasBoundsContainer, drawingManager: DrawingManager, formatterFactory: DateTimeFormatterFactory, cursorHandler: CursorHandler, backgroundCanvasModel: CanvasModel);
+    constructor(config: FullChartConfig, canvasModel: CanvasModel, hitTestCanvasModel: HitTestCanvasModel, chartModel: ChartModel, canvasBoundsContainer: CanvasBoundsContainer, drawingManager: DrawingManager, formatterFactory: DateTimeFormatterFactory, cursorHandler: CursorHandler);
     /**
      * Sets the new event list.
      * @param events

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

@@ -11,7 +11,7 @@ import { EventsHitTestDrawer } from './events-hit-test.drawer';
 import { EventsDrawer } from './events.drawer';
 import { EventsModel } from './events.model';
 export class EventsComponent extends ChartBaseElement {
-    constructor(config, canvasModel, hitTestCanvasModel, chartModel, canvasBoundsContainer, drawingManager, formatterFactory, cursorHandler, backgroundCanvasModel) {
+    constructor(config, canvasModel, hitTestCanvasModel, chartModel, canvasBoundsContainer, drawingManager, formatterFactory, cursorHandler) {
         super();
         this.config = config;
         this.canvasModel = canvasModel;
@@ -23,7 +23,7 @@ export class EventsComponent extends ChartBaseElement {
         this.eventsModel = eventsModel;
         this.addChildEntity(eventsModel);
         hitTestCanvasModel.addSubscriber(eventsModel);
-        const eventsDrawer = new EventsDrawer(backgroundCanvasModel, canvasModel, chartModel, config, canvasBoundsContainer, eventsModel, this.eventsXAxisLabelFormatterProvider);
+        const eventsDrawer = new EventsDrawer(canvasModel, chartModel, config, canvasBoundsContainer, eventsModel, this.eventsXAxisLabelFormatterProvider);
         this.drawingManager.addDrawer(eventsDrawer, 'EVENTS');
         const eventsHitTestDrawer = new EventsHitTestDrawer(hitTestCanvasModel, chartModel, config, canvasBoundsContainer, eventsModel);
         this.drawingManager.addDrawerBefore(eventsHitTestDrawer, 'HIT_TEST_EVENTS', 'HIT_TEST_DRAWINGS');

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

@@ -12,7 +12,6 @@ import { DateTimeFormatter } from '../../model/date-time.formatter';
 import { ChartModel } from '../chart/chart.model';
 import { EconomicEvent, EventsModel, EventType, EventWithId } from './events.model';
 export declare class EventsDrawer implements Drawer {
-    private backgroundCanvas;
     private canvasModel;
     private chartModel;
     private config;
@@ -20,7 +19,7 @@ export declare class EventsDrawer implements Drawer {
     private model;
     private formatterProvider;
     private customIcons;
-    constructor(backgroundCanvas: CanvasModel, canvasModel: CanvasModel, chartModel: ChartModel, config: FullChartConfig, canvasBoundsContainer: CanvasBoundsContainer, model: EventsModel, formatterProvider: () => DateTimeFormatter);
+    constructor(canvasModel: CanvasModel, chartModel: ChartModel, config: FullChartConfig, canvasBoundsContainer: CanvasBoundsContainer, model: EventsModel, formatterProvider: () => DateTimeFormatter);
     /**
      * Creates a custom icon for a given event type.
      * @param {EventType} type - The type of the event.
@@ -67,7 +66,7 @@ export declare class EventsDrawer implements Drawer {
     /**
      * This function is responsible for drawing a label on the canvas at a given x coordinate. The label contains a formatted timestamp of a given event. The function takes two parameters: x, which is the x coordinate where the label will be drawn, and event, which is an object containing information about the event, including its timestamp and type.
      * The function first gets the canvas context and the bounds of the x-axis. It then retrieves the font family, font height, and top padding from the configuration object. The y coordinate of the label is calculated based on the font height, top padding, and the y coordinate of the x-axis bounds. The font is set using the retrieved font family and font height.
-     * The timestamp of the event is formatted using a formatter provider function. The width of the label is calculated using the canvas context's measureText() method. The function then calls another function, redrawBackgroundArea(), to hide the regular x-axis label that may overlap with the event label.
+     * The timestamp of the event is formatted using a formatter provider function. The width of the label is calculated using the canvas context's measureText() method. The function then draws rectangle with xAxis background, to be on to hide the regular x-axis label that may overlap with the event label.
      * Finally, the function sets the fill style of the canvas context to the color associated with the event type in the configuration object. The label text is then drawn on the canvas context at the calculated x and y coordinates.
      */
     drawLabel(x: number, event: EventWithId): void;

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

@@ -4,7 +4,6 @@
  * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 import { CanvasElement } from '../../canvas/canvas-bounds-container';
-import { redrawBackgroundArea } from '../../drawers/chart-background.drawer';
 const eventsSizesDict = {
     'rhombus-small': 4,
     rhombus: 6,
@@ -12,8 +11,7 @@ const eventsSizesDict = {
 };
 const getIconHash = (type, state) => `${type}_${state}`;
 export class EventsDrawer {
-    constructor(backgroundCanvas, canvasModel, chartModel, config, canvasBoundsContainer, model, formatterProvider) {
-        this.backgroundCanvas = backgroundCanvas;
+    constructor(canvasModel, chartModel, config, canvasBoundsContainer, model, formatterProvider) {
         this.canvasModel = canvasModel;
         this.chartModel = chartModel;
         this.config = config;
@@ -161,7 +159,7 @@ export class EventsDrawer {
     /**
      * This function is responsible for drawing a label on the canvas at a given x coordinate. The label contains a formatted timestamp of a given event. The function takes two parameters: x, which is the x coordinate where the label will be drawn, and event, which is an object containing information about the event, including its timestamp and type.
      * The function first gets the canvas context and the bounds of the x-axis. It then retrieves the font family, font height, and top padding from the configuration object. The y coordinate of the label is calculated based on the font height, top padding, and the y coordinate of the x-axis bounds. The font is set using the retrieved font family and font height.
-     * The timestamp of the event is formatted using a formatter provider function. The width of the label is calculated using the canvas context's measureText() method. The function then calls another function, redrawBackgroundArea(), to hide the regular x-axis label that may overlap with the event label.
+     * The timestamp of the event is formatted using a formatter provider function. The width of the label is calculated using the canvas context's measureText() method. The function then draws rectangle with xAxis background, to be on to hide the regular x-axis label that may overlap with the event label.
      * Finally, the function sets the fill style of the canvas context to the color associated with the event type in the configuration object. The label text is then drawn on the canvas context at the calculated x and y coordinates.
      */
     drawLabel(x, event) {
@@ -176,7 +174,9 @@ export class EventsDrawer {
         const labelText = this.formatterProvider()(event.timestamp);
         const width = ctx.measureText(labelText).width;
         // label can overlap with regular x-axis label, so we need to hide regular x-axis label
-        redrawBackgroundArea(this.backgroundCanvas.ctx, ctx, x - width / 2, xAxisBounds.y + 1, width, xAxisBounds.height - 1);
+        ctx.fillStyle = this.config.colors.xAxis.backgroundColor;
+        ctx.strokeStyle = this.config.colors.xAxis.backgroundColor;
+        ctx.fillRect(x - width / 2, xAxisBounds.y + 1, width, xAxisBounds.height - 1);
         ctx.fillStyle = this.config.colors.events[event.type].color;
         ctx.fillText(labelText, x - width / 2, y);
     }

package/dist/chart/components/x_axis/x-axis-draw.functions.d.ts

@@ -14,4 +14,4 @@ export type LabelAlign = 'start' | 'end' | 'middle';
  * @param config
  * @param label
  */
-export declare function drawXAxisLabel(backgroundCtx: CanvasRenderingContext2D, ctx: CanvasRenderingContext2D, canvasBoundsContainer: CanvasBoundsContainer, config: FullChartConfig, label: XAxisLabel): void;
+export declare function drawXAxisLabel(ctx: CanvasRenderingContext2D, canvasBoundsContainer: CanvasBoundsContainer, config: FullChartConfig, label: XAxisLabel): void;

package/dist/chart/components/x_axis/x-axis-draw.functions.js

@@ -4,7 +4,6 @@
  * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 import { CanvasElement } from '../../canvas/canvas-bounds-container';
-import { redrawBackgroundArea } from '../../drawers/chart-background.drawer';
 const DEFAULT_X_LABEL_PADDING = { x: 4, y: 4 };
 /**
  * Draws the label on X axis.
@@ -13,12 +12,13 @@ const DEFAULT_X_LABEL_PADDING = { x: 4, y: 4 };
  * @param config
  * @param label
  */
-export function drawXAxisLabel(backgroundCtx, ctx, canvasBoundsContainer, config, label) {
+export function drawXAxisLabel(ctx, canvasBoundsContainer, config, label) {
     var _a, _b;
     const alignType = (_a = label.alignType) !== null && _a !== void 0 ? _a : 'middle';
     const { fontSize, fontFamily, padding } = config.components.xAxis;
+    const xAxisColors = config.colors.xAxis;
     const offsetTop = (_b = padding.top) !== null && _b !== void 0 ? _b : 0;
-    const xAxis = canvasBoundsContainer.getBounds(CanvasElement.X_AXIS);
+    const xAxisBounds = canvasBoundsContainer.getBounds(CanvasElement.X_AXIS);
     ctx.save();
     ctx.font = `bold ${fontSize}px ${fontFamily}`;
     const labelWidth = ctx.measureText(label.text).width;
@@ -38,17 +38,19 @@ export function drawXAxisLabel(backgroundCtx, ctx, canvasBoundsContainer, config
             break;
     }
     // label can overlap with regular x-axis label, so we need to hide regular x-axis label
-    redrawBackgroundArea(backgroundCtx, ctx, boxStart, xAxis.y, boxWidth, xAxis.height - 1);
+    ctx.fillStyle = xAxisColors.backgroundColor;
+    ctx.strokeStyle = xAxisColors.backgroundColor;
+    ctx.fillRect(boxStart, xAxisBounds.y, boxWidth, xAxisBounds.height);
     if (alignType !== 'middle') {
         ctx.strokeStyle = label.color;
         ctx.beginPath();
-        ctx.moveTo(x, xAxis.y);
-        ctx.lineTo(x, xAxis.y + xAxis.height);
+        ctx.moveTo(x, xAxisBounds.y);
+        ctx.lineTo(x, xAxisBounds.y + xAxisBounds.height);
         ctx.stroke();
     }
     ctx.fillStyle = label.color;
     const xTextPos = boxStart + DEFAULT_X_LABEL_PADDING.x;
-    const yTextPos = xAxis.y + offsetTop + fontSize; // -2 for vertical adjustment
+    const yTextPos = xAxisBounds.y + offsetTop + fontSize; // -2 for vertical adjustment
     ctx.fillText(label.text, xTextPos, yTextPos);
     ctx.restore();
 }

package/dist/chart/components/x_axis/x-axis-labels.drawer.d.ts

@@ -13,12 +13,11 @@ import { FullChartConfig } from '../../chart.config';
  * By default labels for drawings are drawn by this drawer.
  */
 export declare class XAxisLabelsDrawer implements Drawer {
-    private backgroundCanvasModel;
     private config;
     private canvasModel;
     private canvasBoundsContainer;
     private xAxisLabelsModel;
-    constructor(backgroundCanvasModel: CanvasModel, config: FullChartConfig, canvasModel: CanvasModel, canvasBoundsContainer: CanvasBoundsContainer, xAxisLabelsModel: XAxisLabelsModel);
+    constructor(config: FullChartConfig, canvasModel: CanvasModel, canvasBoundsContainer: CanvasBoundsContainer, xAxisLabelsModel: XAxisLabelsModel);
     /**
      * Draws the X axis labels on the canvas.
      * @function

package/dist/chart/components/x_axis/x-axis-labels.drawer.js

@@ -12,8 +12,7 @@ import { fillRect } from '../../utils/canvas/canvas-drawing-functions.utils';
  * By default labels for drawings are drawn by this drawer.
  */
 export class XAxisLabelsDrawer {
-    constructor(backgroundCanvasModel, config, canvasModel, canvasBoundsContainer, xAxisLabelsModel) {
-        this.backgroundCanvasModel = backgroundCanvasModel;
+    constructor(config, canvasModel, canvasBoundsContainer, xAxisLabelsModel) {
         this.config = config;
         this.canvasModel = canvasModel;
         this.canvasBoundsContainer = canvasBoundsContainer;
@@ -30,7 +29,7 @@ export class XAxisLabelsDrawer {
         const ctx = this.canvasModel.ctx;
         this.drawHighlightedBackgroundBetweenLabels();
         this.xAxisLabelsModel.labels.forEach(l => {
-            drawXAxisLabel(this.backgroundCanvasModel.ctx, ctx, this.canvasBoundsContainer, this.config, l);
+            drawXAxisLabel(ctx, this.canvasBoundsContainer, this.config, l);
         });
     }
     // this is a very simple solution which matches 2 labels with same "subGroupId"

package/dist/chart/components/x_axis/x-axis.component.d.ts

@@ -38,7 +38,7 @@ export declare class XAxisComponent extends ChartBaseElement {
     xAxisLabelsGenerator: XAxisLabelsGenerator;
     readonly xAxisLabelsModel: XAxisLabelsModel;
     xAxisScaleHandler: XAxisScaleHandler;
-    constructor(eventBus: EventBus, config: FullChartConfig, canvasModel: CanvasModel, chartComponent: ChartComponent, scale: ScaleModel, canvasBoundsContainer: CanvasBoundsContainer, canvasInputListener: CanvasInputListenerComponent, chartResizeHandler: ChartResizeHandler, drawingManager: DrawingManager, timeZoneModel: TimeZoneModel, chartPanComponent: ChartPanComponent, cursorHandler: CursorHandler, backgroundCanvasModel: CanvasModel);
+    constructor(eventBus: EventBus, config: FullChartConfig, canvasModel: CanvasModel, chartComponent: ChartComponent, scale: ScaleModel, canvasBoundsContainer: CanvasBoundsContainer, canvasInputListener: CanvasInputListenerComponent, chartResizeHandler: ChartResizeHandler, drawingManager: DrawingManager, timeZoneModel: TimeZoneModel, chartPanComponent: ChartPanComponent, cursorHandler: CursorHandler);
     /**
      * This method is used to activate the chart and update the labels if there is a new data set or equivolume type.
      * It subscribes to the chart type change, candles set subject, candles updated subject, and time zone change to generate new labels.

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

@@ -20,7 +20,7 @@ import { availableBarTypes } from '../../chart.config';
  * X-axis component, contains all x-axis calculation and rendering logic.
  */
 export class XAxisComponent extends ChartBaseElement {
-    constructor(eventBus, config, canvasModel, chartComponent, scale, canvasBoundsContainer, canvasInputListener, chartResizeHandler, drawingManager, timeZoneModel, chartPanComponent, cursorHandler, backgroundCanvasModel) {
+    constructor(eventBus, config, canvasModel, chartComponent, scale, canvasBoundsContainer, canvasInputListener, chartResizeHandler, drawingManager, timeZoneModel, chartPanComponent, cursorHandler) {
         super();
         this.eventBus = eventBus;
         this.config = config;
@@ -36,7 +36,7 @@ export class XAxisComponent extends ChartBaseElement {
         drawingManager.addDrawer(xAxisCompositeDrawer, 'X_AXIS');
         this.xAxisDrawer = new XAxisTimeLabelsDrawer(config, canvasModel, scale, canvasBoundsContainer, () => this.xAxisLabelsGenerator.labels, () => config.components.xAxis.visible);
         xAxisCompositeDrawer.addDrawer(this.xAxisDrawer);
-        this.xAxisLabelsDrawer = new XAxisLabelsDrawer(backgroundCanvasModel, config, canvasModel, canvasBoundsContainer, this.xAxisLabelsModel);
+        this.xAxisLabelsDrawer = new XAxisLabelsDrawer(config, canvasModel, canvasBoundsContainer, this.xAxisLabelsModel);
         xAxisCompositeDrawer.addDrawer(this.xAxisLabelsDrawer);
         this.xAxisScaleHandler = new XAxisScaleHandler(scale, canvasInputListener, canvasBoundsContainer, chartPanComponent, this.chartComponent.chartModel);
         this.addChildEntity(this.xAxisScaleHandler);

package/dist/chart/components/y_axis/price_labels/price-label.drawer.d.ts

@@ -19,5 +19,5 @@ export declare const priceLabelDrawersMap: Record<YAxisVisualLabelType, LabelDra
  * @param canvasBoundsContainer
  * @param config
  */
-export declare function drawLabel(ctx: CanvasRenderingContext2D, backgroundCtx: CanvasRenderingContext2D, bounds: Bounds, paneBounds: Bounds, visualLabel: VisualYAxisLabel, canvasBoundsContainer: CanvasBoundsContainer, config: YAxisConfig, colors: FullChartColors['yAxis']): void;
+export declare function drawLabel(ctx: CanvasRenderingContext2D, backgroundCtx: CanvasRenderingContext2D, bounds: Bounds, paneBounds: Bounds, visualLabel: VisualYAxisLabel, canvasBoundsContainer: CanvasBoundsContainer, config: YAxisConfig, colors: FullChartColors): void;
 export {};

package/dist/chart/components/y_axis/price_labels/price-label.drawer.js

@@ -48,7 +48,7 @@ export function drawLabel(ctx, backgroundCtx, bounds, paneBounds, visualLabel, c
     const drawLabel = priceLabelDrawersMap[appearanceType];
     const showDescription = config.labels.descriptions;
     const showLine = isLineVisible(bounds, labelY, labelBoxHeight);
-    const _drawDescription = () => showDescription && drawDescription(backgroundCtx, ctx, bounds, paneBounds, visualLabel, config.align, config);
+    const _drawDescription = () => showDescription && drawDescription(backgroundCtx, ctx, bounds, paneBounds, visualLabel, config);
     let lineXStart;
     let lineXEnd;
     // line should touch the label
@@ -65,7 +65,7 @@ export function drawLabel(ctx, backgroundCtx, bounds, paneBounds, visualLabel, c
     }
     const lineY = (_e = visualLabel.lineY) !== null && _e !== void 0 ? _e : visualLabel.y;
     const _drawLine = () => showLine && avoidAntialiasing(ctx, () => drawLine(ctx, lineXStart, lineY, lineXEnd, lineY, 1));
-    const _drawLabel = () => drawLabel(ctx, bounds, text, centralY, visualLabel, config, colors, false, backgroundCtx);
+    const _drawLabel = () => drawLabel(ctx, bounds, text, centralY, visualLabel, config, colors.yAxis, false);
     const drawLineLabel = () => {
         _drawLine();
         _drawDescription();
@@ -80,9 +80,9 @@ export function drawLabel(ctx, backgroundCtx, bounds, paneBounds, visualLabel, c
         _drawLabel();
     };
     const labelDrawerByMode = {
-        'line': drawLineLabel,
+        line: drawLineLabel,
         'line-label': drawLineLabelLabel,
-        'label': drawLabelLabel,
+        label: drawLabelLabel,
     };
     if (mode !== 'none' && checkLabelInBoundaries(centralY, bounds, labelBoxHeight)) {
         labelDrawerByMode[mode]();
@@ -90,8 +90,9 @@ export function drawLabel(ctx, backgroundCtx, bounds, paneBounds, visualLabel, c
     ctx.restore();
 }
 const isLineVisible = (bounds, labelY, labelBoxHeight) => labelY > bounds.y + labelBoxHeight / 2 && labelY < bounds.y + bounds.height - labelBoxHeight / 2;
-function drawDescription(backgroundCtx, ctx, labelBounds, paneBounds, visualLabel, align = 'right', yAxisState) {
+function drawDescription(backgroundCtx, ctx, labelBounds, paneBounds, visualLabel, yAxisState) {
     var _a, _b, _c;
+    const align = yAxisState.align || 'right';
     const description = visualLabel.description;
     if (!description || description.length === 0) {
         return;

package/dist/chart/components/y_axis/price_labels/y-axis-price-labels.drawer.js

@@ -26,10 +26,10 @@ export class YAxisPriceLabelsDrawer {
                 orderedLabels.forEach(l => {
                     var _a;
                     const bounds = (_a = l.bounds) !== null && _a !== void 0 ? _a : yAxisBounds;
-                    l.labels.forEach(vl => drawLabel(ctx, backgroundCtx, bounds, paneBounds, vl, this.canvasBoundsContainer, extent.yAxis.state, this.fullConfig.colors.yAxis));
+                    l.labels.forEach(vl => drawLabel(ctx, backgroundCtx, bounds, paneBounds, vl, this.canvasBoundsContainer, extent.yAxis.state, this.fullConfig.colors));
                 });
                 // TODO I added this as a simple mechanism to add custom labels, we need to review it
-                Object.values(extent.yAxis.model.fancyLabelsModel.customLabels).forEach(l => drawLabel(ctx, backgroundCtx, yAxisBounds, paneBounds, l, this.canvasBoundsContainer, extent.yAxis.state, this.fullConfig.colors.yAxis));
+                Object.values(extent.yAxis.model.fancyLabelsModel.customLabels).forEach(l => drawLabel(ctx, backgroundCtx, yAxisBounds, paneBounds, l, this.canvasBoundsContainer, extent.yAxis.state, this.fullConfig.colors));
             }
         });
     }

package/dist/chart/components/y_axis/y-axis-labels.drawer.d.ts

@@ -63,7 +63,7 @@ export declare function drawRectLabel(ctx: CanvasRenderingContext2D, bounds: Bou
  * @param checkBoundaries
  * @param backgroundCtx
  */
-export declare function drawPlainLabel(ctx: CanvasRenderingContext2D, bounds: Bounds, text: string, centralY: number, config: YAxisLabelDrawConfig, yAxisState: YAxisConfig, yAxisColors: FullChartColors['yAxis'], checkBoundaries?: boolean, backgroundCtx?: CanvasRenderingContext2D): void;
+export declare function drawPlainLabel(ctx: CanvasRenderingContext2D, bounds: Bounds, text: string, centralY: number, config: YAxisLabelDrawConfig, yAxisState: YAxisConfig, yAxisColors: FullChartColors['yAxis'], checkBoundaries?: boolean): void;
 /**
  * Offset from the center of label to the top/bottom.
  *

package/dist/chart/components/y_axis/y-axis-labels.drawer.js

@@ -4,7 +4,6 @@
  * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 import { getFontFromConfig } from '../../chart.config';
-import { redrawBackgroundArea } from '../../drawers/chart-background.drawer';
 import { drawPriceLabel, drawRoundedRect } from '../../utils/canvas/canvas-drawing-functions.utils';
 import { calculateSymbolHeight, calculateTextWidth } from '../../utils/canvas/canvas-font-measure-tool.utils';
 import { getLabelTextColorByBackgroundColor } from '../../utils/canvas/canvas-text-functions.utils';
@@ -120,11 +119,11 @@ export function drawRectLabel(ctx, bounds, text, centralY, config, yAxisState, y
  * @param checkBoundaries
  * @param backgroundCtx
  */
-export function drawPlainLabel(ctx, bounds, text, centralY, config, yAxisState, yAxisColors, checkBoundaries = true, backgroundCtx) {
+export function drawPlainLabel(ctx, bounds, text, centralY, config, yAxisState, yAxisColors, checkBoundaries = true) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const align = yAxisState.align;
     const textFont = (_a = config.textFont) !== null && _a !== void 0 ? _a : getFontFromConfig(yAxisState);
-    const bgColor = config.bgColor;
+    const bgColor = yAxisColors.backgroundColor;
     const textColor = (_b = config.textColor) !== null && _b !== void 0 ? _b : getLabelTextColorByBackgroundColor(bgColor, yAxisColors.labelTextColor, yAxisColors.labelInvertedTextColor);
     const paddings = (_c = yAxisState.typeConfig.rectangle) === null || _c === void 0 ? void 0 : _c.paddings;
     const paddingTop = (_e = (_d = config.paddingTop) !== null && _d !== void 0 ? _d : paddings === null || paddings === void 0 ? void 0 : paddings.top) !== null && _e !== void 0 ? _e : DEFAULT_PRICE_LABEL_PADDING;
@@ -149,7 +148,10 @@ export function drawPlainLabel(ctx, bounds, text, centralY, config, yAxisState,
     const width = paddingStart !== undefined ? textWidth + paddingStart + paddingEnd : bounds.width - marginEnd;
     const x = align === 'right' ? bounds.x + bounds.width - marginEnd - width : bounds.x + marginEnd;
     const textX = align === 'right' ? bounds.x + bounds.width - textWidth - xTextOffset : xTextOffset;
-    backgroundCtx && redrawBackgroundArea(backgroundCtx, ctx, x, labelBoxTopY, width, labelBoxHeight);
+    // label can overlap with regular price y-axis label, so we need to hide regular y-axis label
+    ctx.fillStyle = bgColor;
+    ctx.strokeStyle = bgColor;
+    ctx.fillRect(x, labelBoxTopY, width, labelBoxHeight);
     ctx.fillStyle = textColor;
     ctx.fillText(text, textX, centralY + fontHeight / 2 - 1); // -1 for font height adjustment
     ctx.restore();

package/dist/chart/components/y_axis/y-axis-scale.handler.js

@@ -53,8 +53,10 @@ export class YAxisScaleHandler extends ChartBaseElement {
             const newYStart = this.lastYStart - delta;
             const newYEnd = this.lastYEnd + delta;
             this.autoScaleCallback(false);
-            this.scale.setYScale(newYStart, newYEnd);
-            this.bus.fireDraw();
+            if (this.lastYStart !== newYStart || this.lastYEnd !== newYEnd) {
+                this.scale.setYScale(newYStart, newYEnd);
+                this.bus.fireDraw();
+            }
         };
         this.onYDragEnd = () => {
             this.yAxisDragEndSubject.next();

package/dist/chart/drawers/chart-background.drawer.js

@@ -19,7 +19,7 @@ export class BackgroundDrawer {
             this.canvasModel.clear();
             const ctx = this.canvasModel.ctx;
             if (this.config.colors.chartAreaTheme.backgroundMode === 'gradient') {
-                const grd = ctx.createLinearGradient(0, 0, this.canvasModel.width, this.canvasModel.height);
+                const grd = ctx.createLinearGradient(0, 0 + this.canvasModel.height / 2, this.canvasModel.width, 0 + this.canvasModel.height / 2);
                 grd.addColorStop(0, this.config.colors.chartAreaTheme.backgroundGradientTopColor);
                 grd.addColorStop(1, this.config.colors.chartAreaTheme.backgroundGradientBottomColor);
                 ctx.fillStyle = grd;
@@ -38,6 +38,7 @@ export class BackgroundDrawer {
 }
 // this function in used in case when
 // some entity can overlap with another chart entity, so we need to hide the another entity
+// it has very (!!!) poor perfomance, use it carefully
 export const redrawBackgroundArea = (backgroundCtx, ctx, x, y, width, height, opacity) => {
     const dpr = getDPR();
     const backgroundCoords = [x * dpr, y * dpr, width * dpr, height * dpr];