@devexperts/dxcharts-lite 2.7.1 → 2.7.3

package/dist/chart/animation/canvas-animation.d.ts

@@ -4,18 +4,16 @@
  * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 import EventBus from '../events/event-bus';
-import { Animation } from './types/animation';
-import { ColorAlphaAnimationConfig, ColorAlphaAnimation } from './types/color-alpha-animation';
-import { ColorTransitionAnimationConfig, ColorTransitionAnimation } from './types/color-transition-animation';
-import { ViewportMovementAnimationConfig, ViewportMovementAnimation } from './types/viewport-movement-animation';
-import { ViewportModel } from '../model/scaling/viewport.model';
-import { StringTMap } from '../utils/object.utils';
 import { BehaviorSubject } from 'rxjs';
+import { ViewportModel } from '../model/scaling/viewport.model';
+import { ColorAlphaAnimation, ColorAlphaAnimationConfig } from './types/color-alpha-animation';
+import { ColorTransitionAnimation, ColorTransitionAnimationConfig } from './types/color-transition-animation';
+import { ViewportMovementAnimation, ViewportMovementAnimationConfig } from './types/viewport-movement-animation';
+export declare const VIEWPORT_ANIMATION_ID = "VIEWPORT_ANIMATION";
 export interface AnimationConfig {
     duration: number;
     timeLeft?: number;
 }
-export declare const VIEWPORT_ANIMATION_ID = "VIEWPORT_ANIMATION";
 /**
  * Singleton animation container for all chart animations.
  * Does the following things:
@@ -28,10 +26,10 @@ export declare const VIEWPORT_ANIMATION_ID = "VIEWPORT_ANIMATION";
  * @doc-tags chart-core,animation
  */
 export declare class CanvasAnimation {
-    private eventBus;
-    animationIntervalId?: number;
-    animations: StringTMap<Animation>;
+    eventBus: EventBus;
+    animations: Record<string, any>;
     animationInProgressSubject: BehaviorSubject<boolean>;
+    animFrameId: string;
     constructor(eventBus: EventBus);
     /**
      * Starts a viewport movement animation with the given configuration and adds it to the list of animations.
@@ -41,7 +39,10 @@ export declare class CanvasAnimation {
      * @param {Function} [onTickFunction] - The function to be called on each tick of the animation.
      * @returns {ViewportMovementAnimation} The container for the created animation.
      */
-    startViewportMovementAnimation(viewportModel: ViewportModel, config: ViewportMovementAnimationConfig, uniqueAnimationId?: string, onTickFunction?: () => void): ViewportMovementAnimation;
+    startViewportMovementAnimation(viewportModel: ViewportModel, config: ViewportMovementAnimationConfig, uniqueAnimationId: string | undefined, onTickFunction: {
+        (): boolean;
+        (): void;
+    }): ViewportMovementAnimation;
     /**
      * Starts a color alpha animation with the given configuration and adds it to the list of animations.
      * @param {string} uniqueAnimationId - A unique identifier for the animation.
@@ -50,7 +51,7 @@ export declare class CanvasAnimation {
      * @param {Partial<ACAnimationConfig>} [animationConfig] - An optional configuration for the animation.
      * @returns {ColorAlphaAnimation} - The created animation container.
      */
-    startColorAlphaAnimation(uniqueAnimationId: string, colorConfigs: Array<ColorAlphaAnimationConfig>, onTickFunction?: () => void, animationConfig?: Partial<AnimationConfig>): ColorAlphaAnimation;
+    startColorAlphaAnimation(uniqueAnimationId: string, colorConfigs: Array<ColorAlphaAnimationConfig>, onTickFunction?: (() => void) | undefined, animationConfig?: AnimationConfig): ColorAlphaAnimation;
     /**
      * Starts a color transition animation with the given configurations and duration.
      * @param {string} uniqueAnimationId - A unique identifier for the animation.
@@ -63,20 +64,20 @@ export declare class CanvasAnimation {
     /**
      * This function takes an id as a string and returns an animation container object of type T. It retrieves the animation container object from the animations object using the provided id. The @ts-ignore comment is used to ignore any TypeScript errors that may occur due to the dynamic nature of the function.
      */
-    getAnimation<T extends Animation>(id: string): T;
+    getAnimation(id: string | number): any;
     /**
      * Returns a ColorAlphaAnimation object for the given animation ID.
      *
      * @param {string} id - The ID of the animation to retrieve.
      * @returns {ColorAlphaAnimation} - The ColorAlphaAnimation object for the given ID.
      */
-    getColorAlphaAnimation(id: string): ColorAlphaAnimation;
+    getColorAlphaAnimation(id: string): any;
     /**
      * Returns a ColorTransitionAnimation object for the given id.
      * @param {string} id - The id of the animation to retrieve.
      * @returns {ColorTransitionAnimation} - The ColorTransitionAnimation object for the given id.
      */
-    getColorTransitionAnimation(id: string): ColorTransitionAnimation;
+    getColorTransitionAnimation(id: string): any;
     /**
      * Stops the animation with the given ID.
      * @param {string} id - The ID of the animation to be stopped.
@@ -86,13 +87,10 @@ export declare class CanvasAnimation {
     /**
      * This method ensures that the animation interval is started. If the animation interval ID is not set, it sets it to a new interval ID using `window.setInterval()` with a callback function of `this.tick()` and a delay of 20 milliseconds.
      */
-    private ensureIntervalStarted;
+    processAnimation(): void;
     /**
      * This is a private method that iterates through all the animations in the container and calls their tick method. If any animation is still in progress, it sets the allCompleted flag to false. If all animations are completed, it stops the interval. If not, it fires the draw event.
      */
-    private tick;
-    /**
-     * Stops the interval for the animation.
-     */
-    private stopInterval;
+    tick(): void;
+    stopInterval(): void;
 }

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

@@ -3,11 +3,13 @@
  * This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
+import { BehaviorSubject } from 'rxjs';
+import { animationFrameThrottledPrior, cancelThrottledAnimationFrame, } from '../utils/performance/request-animation-frame-throttle.utils';
+import { uuid } from '../utils/uuid.utils';
 import { ColorAlphaAnimation } from './types/color-alpha-animation';
 import { ColorTransitionAnimation } from './types/color-transition-animation';
 import { ViewportMovementAnimation } from './types/viewport-movement-animation';
-import { BehaviorSubject } from 'rxjs';
-const DEFAULT_ANIMATION_TIME = 10;
+const DEFAULT_ANIMATION_TIME_MS = 400;
 export const VIEWPORT_ANIMATION_ID = 'VIEWPORT_ANIMATION';
 /**
  * Singleton animation container for all chart animations.
@@ -22,9 +24,10 @@ export const VIEWPORT_ANIMATION_ID = 'VIEWPORT_ANIMATION';
  */
 export class CanvasAnimation {
     constructor(eventBus) {
-        this.eventBus = eventBus;
         this.animations = {};
         this.animationInProgressSubject = new BehaviorSubject(false);
+        this.animFrameId = `canvas_animation_${uuid()}`;
+        this.eventBus = eventBus;
     }
     /**
      * Starts a viewport movement animation with the given configuration and adds it to the list of animations.
@@ -37,7 +40,7 @@ export class CanvasAnimation {
     startViewportMovementAnimation(viewportModel, config, uniqueAnimationId = VIEWPORT_ANIMATION_ID, onTickFunction) {
         const animation = new ViewportMovementAnimation(viewportModel, config, onTickFunction);
         this.animations[uniqueAnimationId] = animation;
-        this.ensureIntervalStarted();
+        this.processAnimation();
         return animation;
     }
     /**
@@ -49,9 +52,9 @@ export class CanvasAnimation {
      * @returns {ColorAlphaAnimation} - The created animation container.
      */
     startColorAlphaAnimation(uniqueAnimationId, colorConfigs, onTickFunction, animationConfig) {
-        const animation = new ColorAlphaAnimation(Object.assign(Object.assign({}, animationConfig), { duration: (animationConfig && animationConfig.duration) || DEFAULT_ANIMATION_TIME }), colorConfigs, onTickFunction);
+        const animation = new ColorAlphaAnimation(Object.assign(Object.assign({}, animationConfig), { duration: (animationConfig && animationConfig.duration) || DEFAULT_ANIMATION_TIME_MS }), colorConfigs, onTickFunction);
         this.animations[uniqueAnimationId] = animation;
-        this.ensureIntervalStarted();
+        this.processAnimation();
         return animation;
     }
     /**
@@ -62,10 +65,10 @@ export class CanvasAnimation {
      * @param {Function} [onTickFunction] - A function to be called on each tick of the animation.
      * @returns {ColorTransitionAnimation} - The created animation container.
      */
-    startColorTransitionAnimation(uniqueAnimationId, colorConfigs, duration = DEFAULT_ANIMATION_TIME, onTickFunction) {
+    startColorTransitionAnimation(uniqueAnimationId, colorConfigs, duration = DEFAULT_ANIMATION_TIME_MS, onTickFunction) {
         const animation = new ColorTransitionAnimation({ duration }, colorConfigs, onTickFunction);
         this.animations[uniqueAnimationId] = animation;
-        this.ensureIntervalStarted();
+        this.processAnimation();
         return animation;
     }
     /**
@@ -100,17 +103,15 @@ export class CanvasAnimation {
     forceStopAnimation(id) {
         const animation = this.animations[id];
         if (animation) {
-            animation.animationTimeLeft = -1;
             animation.animationInProgress = false;
+            animation.animationStartTime = 0;
         }
     }
     /**
      * This method ensures that the animation interval is started. If the animation interval ID is not set, it sets it to a new interval ID using `window.setInterval()` with a callback function of `this.tick()` and a delay of 20 milliseconds.
      */
-    ensureIntervalStarted() {
-        if (!this.animationIntervalId) {
-            this.animationIntervalId = window.setInterval(() => this.tick(), 20);
-        }
+    processAnimation() {
+        animationFrameThrottledPrior(this.animFrameId, () => this.tick());
     }
     /**
      * This is a private method that iterates through all the animations in the container and calls their tick method. If any animation is still in progress, it sets the allCompleted flag to false. If all animations are completed, it stops the interval. If not, it fires the draw event.
@@ -126,17 +127,16 @@ export class CanvasAnimation {
         }
         this.animationInProgressSubject.next(!allCompleted);
         if (!allCompleted) {
-            this.eventBus.fireDraw();
+            queueMicrotask(() => {
+                this.processAnimation();
+                this.eventBus.fireDraw();
+            });
         }
         else {
             this.stopInterval();
         }
     }
-    /**
-     * Stops the interval for the animation.
-     */
     stopInterval() {
-        clearInterval(this.animationIntervalId);
-        this.animationIntervalId = undefined;
+        cancelThrottledAnimationFrame(this.animFrameId);
     }
 }

package/dist/chart/animation/types/animation.d.ts

@@ -4,32 +4,20 @@
  * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 import { AnimationConfig } from '../canvas-animation';
-interface AnimationAware {
-    tick: () => void;
-}
+type OnTickFunction = () => void;
 /**
  * Basic animation. Holds current state: inProgress, timeLeft.
  * Additional params are useful to pass data which helps animating.
  */
-export declare class Animation implements AnimationAware {
-    private onTickFunction?;
+export declare class Animation {
     animationTime: number;
     animationTimeLeft: number;
+    animationStartTime: number;
     animationInProgress: boolean;
-    constructor(animationConfig: AnimationConfig, onTickFunction?: (() => void) | undefined);
-    /**
-     * Decrements the animation time left and executes the onTickFunction if it exists.
-     * If the animation time left reaches zero, sets the animationInProgress flag to false.
-     */
+    onTickFunction?: OnTickFunction;
+    constructor(animationConfig: AnimationConfig, onTickFunction: OnTickFunction);
     tick(): void;
-    /**
-     * Calculates the normalized progress of an animation.
-     * @returns {number} A value between 0 and 1 representing the progress of the animation.
-     */
     getProgress(): number;
-    /**
-     * Sets the animationInProgress flag to false and resets the animationTimeLeft to 0.
-     */
     finishAnimation(): void;
 }
 export {};

package/dist/chart/animation/types/animation.js

@@ -9,40 +9,35 @@
  */
 export class Animation {
     constructor(animationConfig, onTickFunction) {
-        this.onTickFunction = onTickFunction;
         this.animationTimeLeft = 0;
-        this.animationInProgress = false;
+        this.onTickFunction = onTickFunction;
         this.animationTime = animationConfig.duration;
-        this.animationTimeLeft =
-            animationConfig.timeLeft === undefined ? animationConfig.duration : animationConfig.timeLeft;
+        this.animationStartTime = Date.now();
         this.animationInProgress = true;
     }
-    /**
+    /*
      * Decrements the animation time left and executes the onTickFunction if it exists.
      * If the animation time left reaches zero, sets the animationInProgress flag to false.
      */
     tick() {
-        if (this.animationTimeLeft <= 0) {
+        var _a;
+        if (Date.now() > this.animationStartTime + this.animationTime) {
             this.animationInProgress = false;
         }
-        else {
-            this.animationTimeLeft--;
-        }
-        this.onTickFunction && this.onTickFunction();
+        (_a = this.onTickFunction) === null || _a === void 0 ? void 0 : _a.call(this);
     }
-    // normalized time [0..1]
-    /**
-     * Calculates the normalized progress of an animation.
+    /*
+     * Gets the normalized progress of the animation.
      * @returns {number} A value between 0 and 1 representing the progress of the animation.
      */
     getProgress() {
-        return 1 - this.animationTimeLeft / this.animationTime;
+        return Math.min((Date.now() - this.animationStartTime) / this.animationTime, 1);
     }
-    /**
-     * Sets the animationInProgress flag to false and resets the animationTimeLeft to 0.
+    /*
+     * Sets the animationInProgress flag to false and resets the animationStartTime to 0.
      */
     finishAnimation() {
         this.animationInProgress = false;
-        this.animationTimeLeft = 0;
+        this.animationStartTime = 0;
     }
 }

package/dist/chart/animation/types/color-alpha-animation.js

@@ -3,6 +3,7 @@
  * This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
+import { clamp } from '../../utils/math.utils';
 import { Animation } from './animation';
 import Color from 'color';
 /**
@@ -24,19 +25,13 @@ export class ColorAlphaAnimation extends Animation {
      */
     tick() {
         super.tick();
-        if (this.animationInProgress) {
-            this.colorConfigs.forEach(config => {
-                if (config.initialAlpha === undefined || config.rgbColor === undefined) {
-                    return;
-                }
-                if (config.type === 'fading') {
-                    config.currentAnimationColor = config.rgbColor.alpha((config.initialAlpha * this.animationTimeLeft) / this.animationTime);
-                }
-                else if (config.type === 'appearing') {
-                    config.currentAnimationColor = config.rgbColor.alpha(config.initialAlpha * (1 - this.animationTimeLeft / this.animationTime));
-                }
-            });
-        }
+        this.colorConfigs.forEach(config => {
+            if (config.initialAlpha === undefined || config.rgbColor === undefined) {
+                return;
+            }
+            const alpha = config.initialAlpha * (config.type === 'fading' ? 1 - this.getProgress() : this.getProgress());
+            config.currentAnimationColor = config.rgbColor.alpha(alpha);
+        });
     }
     /**
      * Returns the color of the current animation for a given index.
@@ -51,15 +46,10 @@ export class ColorAlphaAnimation extends Animation {
      * This function reverts the animation by changing the type of color configurations from 'fading' to 'appearing' and vice versa. It also ensures that the animationTimeLeft is not zero to avoid getting stuck in the middle of the animation.
      */
     revert() {
-        // if animationTimeLeft becomes zero it halts the animation and we'll stuck in the middle of animation
-        this.animationTimeLeft = Math.max(this.animationTime - this.animationTimeLeft, 1);
+        const timePassed = clamp(Date.now() - this.animationStartTime, 0, this.animationTime);
+        this.animationStartTime = Date.now() - this.animationTime + timePassed;
         this.colorConfigs.forEach(config => {
-            if (config.type === 'fading') {
-                config.type = 'appearing';
-            }
-            else {
-                config.type = 'fading';
-            }
+            config.type = config.type === 'fading' ? 'appearing' : 'fading';
         });
     }
 }

package/dist/chart/animation/types/viewport-movement-animation.d.ts

@@ -32,7 +32,7 @@ export declare class ViewportMovementAnimation extends Animation {
     readonly zoomY: number;
     readonly easingFn: easingFn;
     readonly id: string;
-    constructor(viewportModel: ViewportModel, animationConfig: ViewportMovementAnimationConfig, onTickFunction?: () => void);
+    constructor(viewportModel: ViewportModel, animationConfig: ViewportMovementAnimationConfig, onTickFunction: () => void);
     /**
      * Updates the viewport model's properties based on the animation configuration and easing function. If an animation is in progress, the properties are updated based on the current progress of the animation. The updated properties include the start and end coordinates for the x and y axes, as well as the zoom level for both axes. The updated properties are then applied to the viewport model.
      */

package/dist/chart/animation/viewport-model-animation.js

@@ -4,7 +4,7 @@
  * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 import { VIEWPORT_ANIMATION_ID } from './canvas-animation';
-const VIEWPORT_ANIMATION_DURATION = 20;
+const VIEWPORT_ANIMATION_DURATION_MS = 400;
 /**
  * Starts the animation for chart viewport movement.
  * @param canvasAnimation
@@ -14,7 +14,7 @@ const VIEWPORT_ANIMATION_DURATION = 20;
  */
 export const startViewportModelAnimation = (canvasAnimation, viewportModel, state) => {
     const animation = canvasAnimation.startViewportMovementAnimation(viewportModel, {
-        duration: VIEWPORT_ANIMATION_DURATION,
+        duration: VIEWPORT_ANIMATION_DURATION_MS,
         targetXStart: state.xStart,
         targetXEnd: state.xEnd,
         targetYStart: state.yStart,

package/dist/chart/bootstrap.js

@@ -88,6 +88,7 @@ export default class ChartBootstrap {
         const dataSeriesCanvasClearDrawer = new ClearCanvasDrawer(this.dynamicObjectsCanvasModel);
         drawingManager.addDrawer(dataSeriesCanvasClearDrawer, 'SERIES_CLEAR');
         const yAxisLabelsCanvasModel = createCanvasModel(eventBus, elements.yAxisLabelsCanvas, config, drawingManager, this.canvasModels, elements.chartResizer);
+        const yAxisDescriptionsCanvasModel = createCanvasModel(eventBus, elements.yAxisDescriptionsCanvas, config, drawingManager, this.canvasModels, elements.chartResizer);
         const canvasBoundsContainer = new CanvasBoundsContainer(config, eventBus, mainCanvasModel, formatterFactory, chartResizeHandler);
         this.canvasBoundsContainer = canvasBoundsContainer;
         //#region  main canvas user input listeners
@@ -172,7 +173,7 @@ export default class ChartBootstrap {
         // high low component
         const highLowComponent = new HighLowComponent(config, this.dynamicObjectsCanvasModel, chartModel, canvasBoundsContainer, drawingManager);
         this.chartComponents.push(highLowComponent);
-        this.initYAxisDrawer(yAxisLabelsCanvasModel);
+        this.initYAxisDrawer(yAxisLabelsCanvasModel, yAxisDescriptionsCanvasModel);
         this.yAxisComponent = mainPane.mainExtent.yAxis;
         // default labels provider
         const lastCandleLabelsProvider = new LastCandleLabelsProvider(this.chartModel, this.config, mainPane.mainExtent.yAxis.state, this.chartModel.lastCandleLabelsByChartType, this.yAxisComponent.getLabelsColorResolver.bind(this.yAxisComponent));
@@ -201,15 +202,17 @@ export default class ChartBootstrap {
         drawingManager.reorderDrawers(config.drawingOrder);
         this.clearer = clearerSafe(this.components);
     }
-    initYAxisDrawer(yAxisLabelsCanvasModel) {
+    initYAxisDrawer(yAxisLabelsCanvasModel, yAxisDescriptionsCanvasModel) {
         const yAxisCompositeDrawer = new CompositeDrawer();
         const clearYAxis = new ClearCanvasDrawer(yAxisLabelsCanvasModel);
+        const clearYAxisDescriptions = new ClearCanvasDrawer(yAxisDescriptionsCanvasModel);
         yAxisCompositeDrawer.addDrawer(clearYAxis, 'YAXIS_CLEAR');
+        yAxisCompositeDrawer.addDrawer(clearYAxisDescriptions, 'Y_AXIS_DESCRIPTIONS_CLEAR');
         this.drawingManager.addDrawer(yAxisCompositeDrawer, 'Y_AXIS');
         const yAxisDrawer = new YAxisDrawer(this.config, yAxisLabelsCanvasModel, this.paneManager);
         yAxisCompositeDrawer.addDrawer(yAxisDrawer);
-        const yAxisLabelsDrawer = new YAxisPriceLabelsDrawer(yAxisLabelsCanvasModel, this.backgroundCanvasModel, this.canvasBoundsContainer, this.config, this.paneManager);
-        yAxisCompositeDrawer.addDrawer(yAxisLabelsDrawer);
+        const yAxisPriceLabelsDrawer = new YAxisPriceLabelsDrawer(yAxisLabelsCanvasModel, yAxisDescriptionsCanvasModel, this.backgroundCanvasModel, this.canvasBoundsContainer, this.config, this.paneManager);
+        this.drawingManager.addDrawer(yAxisPriceLabelsDrawer, 'Y_AXIS_PRICE_LABELS');
     }
     // TODO remove chartModel dependency, put period to global config somewhere
     /**

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

@@ -11,6 +11,7 @@ export default (devexpertsPromoLink) => '<div data-element="chartResizer" style=
     '\t\t\t<canvas data-element="mainCanvas"></canvas>\n' +
     '\t\t\t<canvas data-element="yAxisLabelsCanvas"></canvas>\n' +
     '\t\t\t<canvas data-element="dynamicObjectsCanvas"></canvas>\n' +
+    '\t\t\t<canvas data-element="yAxisDescriptionsCanvas"></canvas>\n' +
     '\t\t\t<canvas data-element="crossToolCanvas"></canvas>\n' +
     '\t\t\t<canvas data-element="hitTestCanvas"></canvas>\n' +
     `${devexpertsPromoLink

package/dist/chart/canvas/chart-elements.d.ts

@@ -10,6 +10,7 @@ export interface ChartElements {
     mainCanvas?: HTMLCanvasElement;
     dynamicObjectsCanvas?: HTMLCanvasElement;
     yAxisLabelsCanvas?: HTMLCanvasElement;
+    yAxisDescriptionsCanvas?: HTMLCanvasElement;
     crossToolCanvas?: HTMLCanvasElement;
     hitTestCanvas?: HTMLCanvasElement;
     chartResizer?: HTMLElement;

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

@@ -322,6 +322,13 @@ export interface ChartConfigComponentsChart {
      * The maximum amount of Y axis scales on a single chart
      */
     maxYAxisScalesAmount: number;
+    /**
+     * Background color will be also applied to the chart axes
+     */
+    applyBackgroundToAxes: {
+        x: boolean;
+        y: boolean;
+    };
     sortCandles?: (candles: Candle[]) => Candle[];
 }
 export interface ChartConfigComponentsEvents {

package/dist/chart/chart.config.js

@@ -72,6 +72,10 @@ export const getDefaultConfig = () => ({
                 barCapSize: 1,
             },
             maxYAxisScalesAmount: 10,
+            applyBackgroundToAxes: {
+                x: true,
+                y: true,
+            },
             sortCandles: defaultSortCandles,
         },
         yAxis: {

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

@@ -117,6 +117,7 @@ export declare class ChartComponent extends ChartBaseElement {
      * Sets the timestamp range of the chart by setting the x-axis scale.
      * @param {Timestamp} start - The start timestamp of the range.
      * @param {Timestamp} end - The end timestamp of the range.
+     * @param {boolean} forceNoAnimation - true by default
      * @returns {void}
      */
     setTimestampRange(start: Timestamp, end: Timestamp, forceNoAnimation?: boolean): void;
@@ -124,6 +125,7 @@ export declare class ChartComponent extends ChartBaseElement {
      * Moves the viewport to exactly xStart..xEnd place.
      * @param xStart - viewport start in units
      * @param xEnd - viewport end in units
+     * @param {boolean} forceNoAnimation - true by default
      */
     setXScale(xStart: Unit, xEnd: Unit, forceNoAnimation?: boolean): void;
     /**
@@ -132,6 +134,17 @@ export declare class ChartComponent extends ChartBaseElement {
      * @returns {void}
      */
     setShowWicks(isShow: boolean): void;
+    /**
+     * Sets the options for the background color applying to the chart axes
+     * @param {Object} options - options for both axes
+     * @param {boolean} options.x - should the background color apply to the x axis
+     * @param {boolean} options.y - should the background color apply to the y axis
+     * @returns {void}
+     */
+    setApplyBackgroundToAxes(options: {
+        x: boolean;
+        y: boolean;
+    }): void;
     /**
      * Used to set the main series to chart.
      * @param series
@@ -171,12 +184,12 @@ export declare class ChartComponent extends ChartBaseElement {
     /**
      * Removes all data points from the main candle series that are newer than the given timestamp.
      * Can be useful for data replay.
-     * @param startTimestamp
+     * @param {Timestamp } timestamp
      */
     removeDataFrom(timestamp: Timestamp): void;
     /**
      * Removes chart candles series.
-     * @param instrument
+     * @param {CandleSeriesModel} series
      */
     removeSecondarySeries(series: CandleSeriesModel): void;
     /**
@@ -223,13 +236,13 @@ export declare class ChartComponent extends ChartBaseElement {
     /**
      * Updates last candle value
      * @param candle - updated candle
-     * @param instrumentSymbol - name of the instrument to update
+     * @param {string} instrumentSymbol - name of the instrument to update
      */
     updateLastCandle(candle: Candle, instrumentSymbol?: string): void;
     /**
      * Updates candle series for instrument. By default takes main instrument.
-     * @param candles
-     * @param instrument
+     * @param {Array<Candle>} candles
+     * @param {string} instrumentSymbol - name of the instrument to update
      */
     updateCandles(candles: Array<Candle>, instrumentSymbol?: string): void;
     /**
@@ -246,7 +259,7 @@ export declare class ChartComponent extends ChartBaseElement {
     /**
      * Registers a new chart type drawer or overrides default drawer if drawerType is {BarType}.
      * @param drawerType {string} - a unique name for the drawer, could be {BarType} - in this case will override default drawer for the type
-     * @param drawer {ChartTypeDrawer} - an implementation of the drawer
+     * @param drawer {SeriesDrawer} - an implementation of the drawer
      */
     registerDataSeriesTypeDrawer(drawerType: DataSeriesType, drawer: SeriesDrawer): void;
     /**

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

@@ -27,10 +27,12 @@ import { HIT_TEST_PREFIX } from '../../drawers/drawing-manager';
 import { HTDataSeriesDrawer } from '../../drawers/ht-data-series.drawer';
 import { BaselineModel } from '../../model/baseline.model';
 import { keys } from '../../utils/object.utils';
+import { ONE_FRAME_MS } from '../../utils/numeric-constants.utils';
 import { PriceIncrementsUtils } from '../../utils/price-increments.utils';
 import { defaultCandleTransformer, hollowCandleTransformer, lineCandleTransformer, trendCandleTransformer, } from './candle-transformer.functions';
 import { deleteCandlesIndex } from './candle.functions';
 import { TrendHistogramDrawer } from '../../drawers/data-series-drawers/trend-histogram.drawer';
+import { debounce } from '../../utils/performance/debounce.utils';
 /**
  * Represents a financial instrument to be displayed on a chart
  * @class
@@ -109,9 +111,13 @@ export class ChartComponent extends ChartBaseElement {
             this.dynamicObjects.model.removeObject(series.id);
         }));
         // redraw background only when chart is resized
-        this.addRxSubscription(this.canvasBoundsContainer.observeAnyBoundsChanged().subscribe(() => {
+        this.addRxSubscription(this.canvasBoundsContainer.observeAnyBoundsChanged().subscribe(debounce(() => {
+            // there is multiple calls on this bounds change on lots of sources,
+            // and sometimes this calls mixes with this.chartResizeHandler.canvasResized
+            // and this leads to change of background in situations when it's not needed,
+            // so on multiple calls in one frame we debounced it to avoid that collisions and steam races
             this.backgroundDrawerPredicateSubject.next(false);
-        }));
+        }, ONE_FRAME_MS)));
         this.addRxSubscription(this.chartResizeHandler.canvasResized.subscribe(() => {
             this.backgroundDrawerPredicateSubject.next(true);
         }));
@@ -206,6 +212,7 @@ export class ChartComponent extends ChartBaseElement {
      * Sets the timestamp range of the chart by setting the x-axis scale.
      * @param {Timestamp} start - The start timestamp of the range.
      * @param {Timestamp} end - The end timestamp of the range.
+     * @param {boolean} forceNoAnimation - true by default
      * @returns {void}
      */
     setTimestampRange(start, end, forceNoAnimation = true) {
@@ -215,6 +222,7 @@ export class ChartComponent extends ChartBaseElement {
      * Moves the viewport to exactly xStart..xEnd place.
      * @param xStart - viewport start in units
      * @param xEnd - viewport end in units
+     * @param {boolean} forceNoAnimation - true by default
      */
     setXScale(xStart, xEnd, forceNoAnimation = true) {
         return this.scale.setXScale(xStart, xEnd, forceNoAnimation);
@@ -228,6 +236,17 @@ export class ChartComponent extends ChartBaseElement {
         this.config.components.chart.showWicks = isShow;
         this.canvasModel.fireDraw();
     }
+    /**
+     * Sets the options for the background color applying to the chart axes
+     * @param {Object} options - options for both axes
+     * @param {boolean} options.x - should the background color apply to the x axis
+     * @param {boolean} options.y - should the background color apply to the y axis
+     * @returns {void}
+     */
+    setApplyBackgroundToAxes(options) {
+        this.config.components.chart.applyBackgroundToAxes = Object.assign({}, options);
+        this.chartModel.bus.fireDraw();
+    }
     /**
      * Used to set the main series to chart.
      * @param series
@@ -314,14 +333,14 @@ export class ChartComponent extends ChartBaseElement {
     /**
      * Removes all data points from the main candle series that are newer than the given timestamp.
      * Can be useful for data replay.
-     * @param startTimestamp
+     * @param {Timestamp } timestamp
      */
     removeDataFrom(timestamp) {
         this.chartModel.removeDataFrom(timestamp);
     }
     /**
      * Removes chart candles series.
-     * @param instrument
+     * @param {CandleSeriesModel} series
      */
     removeSecondarySeries(series) {
         this.chartModel.removeSecondaryCandleSeries(series);
@@ -382,15 +401,15 @@ export class ChartComponent extends ChartBaseElement {
     /**
      * Updates last candle value
      * @param candle - updated candle
-     * @param instrumentSymbol - name of the instrument to update
+     * @param {string} instrumentSymbol - name of the instrument to update
      */
     updateLastCandle(candle, instrumentSymbol) {
         this.chartModel.updateLastCandle(candle, instrumentSymbol);
     }
     /**
      * Updates candle series for instrument. By default takes main instrument.
-     * @param candles
-     * @param instrument
+     * @param {Array<Candle>} candles
+     * @param {string} instrumentSymbol - name of the instrument to update
      */
     updateCandles(candles, instrumentSymbol) {
         this.chartModel.updateCandles(candles, instrumentSymbol);
@@ -413,7 +432,7 @@ export class ChartComponent extends ChartBaseElement {
     /**
      * Registers a new chart type drawer or overrides default drawer if drawerType is {BarType}.
      * @param drawerType {string} - a unique name for the drawer, could be {BarType} - in this case will override default drawer for the type
-     * @param drawer {ChartTypeDrawer} - an implementation of the drawer
+     * @param drawer {SeriesDrawer} - an implementation of the drawer
      */
     registerDataSeriesTypeDrawer(drawerType, drawer) {
         this._dataSeriesDrawers[drawerType] = drawer;