@devexperts/dxcharts-lite 2.7.1 → 2.7.2

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

@@ -132,6 +132,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

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

@@ -228,6 +228,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

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

@@ -151,7 +151,11 @@ export class PaneComponent extends ChartBaseElement {
         extentComponents.forEach(extentComponent => extentComponent.disable());
         this.yExtentComponents = this.yExtentComponents.filter(current => !extentComponents.map(excluded => excluded.idx).includes(current.idx));
         // re-index extents
-        this.yExtentComponents.forEach((c, idx) => (c.idx = idx));
+        this.yExtentComponents.forEach((c, idx) => {
+            c.yAxis.setExtentIdx(idx);
+            c.idx = idx;
+            c.yAxis.updateCursor();
+        });
         this.canvasBoundsContainer.updateYAxisWidths();
         this.yExtentComponentsChangedSubject.next();
     }

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

@@ -35,7 +35,10 @@ export class XAxisTimeLabelsDrawer {
             ctx.font = font;
             ctx.fillStyle = xAxisColors.backgroundColor;
             const bounds = this.canvasBoundsContainer.getBounds(CanvasElement.X_AXIS);
-            ctx.fillRect(bounds.x, bounds.y, bounds.width, bounds.height);
+            // draw axis background rect if the background color is not used
+            if (!this.config.components.chart.applyBackgroundToAxes.x) {
+                ctx.fillRect(bounds.x, bounds.y, bounds.width, bounds.height);
+            }
             const color = this.config.colors.xAxis.labelTextColor;
             const labels = this.labelsProvider();
             this.drawLabels(ctx, labels, bounds, color, fontHeight, fontFamily, offsetTop + X_AXIS_MOBILE_PADDING / 2);

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

@@ -32,10 +32,13 @@ export declare class YAxisComponent extends ChartBaseElement {
     private config;
     private canvasModel;
     scale: ScaleModel;
+    private canvasInputListeners;
     private canvasBoundsContainer;
+    private chartPanComponent;
     private cursors;
     paneUUID: string;
     extentIdx: number;
+    private hitTestCanvasModel;
     private chartResizeHandler;
     private labelsColorByChartTypeMap;
     yAxisScaleHandler: YAxisScaleHandler;
@@ -44,6 +47,7 @@ export declare class YAxisComponent extends ChartBaseElement {
     axisAlignSetSubject: Subject<YAxisAlign>;
     readonly state: YAxisConfig;
     constructor(eventBus: EventBus, config: FullChartConfig, canvasModel: CanvasModel, scale: ScaleModel, canvasInputListeners: CanvasInputListenerComponent, canvasBoundsContainer: CanvasBoundsContainer, chartPanComponent: ChartPanComponent, cursors: CursorHandler, valueFormatter: (value: number) => string, dataSeriesProvider: () => DataSeriesModel | undefined, paneUUID: string, extentIdx: number, hitTestCanvasModel: HitTestCanvasModel, chartResizeHandler: ChartResizeHandler, initialState?: YAxisConfig);
+    setExtentIdx(extentIdx: number): void;
     /**
      * Registers default label color resolvers for different chart types.
      * @private
@@ -53,7 +57,7 @@ export declare class YAxisComponent extends ChartBaseElement {
      */
     private registerDefaultLabelColorResolvers;
     protected doActivate(): void;
-    private updateCursor;
+    updateCursor(): void;
     /**
      * Updates labels visual appearance on canvas
      */

package/dist/chart/components/y_axis/y-axis.component.js

@@ -3,11 +3,6 @@
  * 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/.
  */
-/*
- * Copyright (C) 2019 - 2024 Devexperts Solutions IE Limited
- * This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
- * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
- */
 import { Subject } from 'rxjs';
 import { CanvasElement } from '../../canvas/canvas-bounds-container';
 import { ChartBaseElement } from '../../model/chart-base-element';
@@ -28,10 +23,13 @@ export class YAxisComponent extends ChartBaseElement {
         this.config = config;
         this.canvasModel = canvasModel;
         this.scale = scale;
+        this.canvasInputListeners = canvasInputListeners;
         this.canvasBoundsContainer = canvasBoundsContainer;
+        this.chartPanComponent = chartPanComponent;
         this.cursors = cursors;
         this.paneUUID = paneUUID;
         this.extentIdx = extentIdx;
+        this.hitTestCanvasModel = hitTestCanvasModel;
         this.chartResizeHandler = chartResizeHandler;
         this.labelsColorByChartTypeMap = {};
         this.axisTypeSetSubject = new Subject();
@@ -62,6 +60,14 @@ export class YAxisComponent extends ChartBaseElement {
         this.updateCursor();
         this.registerDefaultLabelColorResolvers();
     }
+    setExtentIdx(extentIdx) {
+        this.extentIdx = extentIdx;
+        this.model.extentIdx = extentIdx;
+        this.yAxisScaleHandler.deactivate();
+        this.removeChildEntity(this.yAxisScaleHandler);
+        this.yAxisScaleHandler = new YAxisScaleHandler(this.eventBus, this.state, this.chartPanComponent, this.scale, this.canvasInputListeners, this.canvasBoundsContainer, this.canvasBoundsContainer.getBoundsHitTest(CanvasElement.PANE_UUID_Y_AXIS(this.paneUUID, extentIdx)), this.hitTestCanvasModel);
+        this.addChildEntity(this.yAxisScaleHandler);
+    }
     /**
      * Registers default label color resolvers for different chart types.
      * @private

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

@@ -30,9 +30,11 @@ export class YAxisDrawer {
                 const labels = yAxisComponent.model.baseLabelsModel.labels;
                 const bounds = yAxisComponent.getBounds();
                 const ctx = this.canvasModel.ctx;
-                // draw axis background rect animation
-                ctx.fillStyle = this.getBackgroundColor();
-                ctx.fillRect(bounds.x, bounds.y, bounds.width, bounds.height);
+                // draw axis background rect if the background color is not used
+                if (!this.fullConfig.components.chart.applyBackgroundToAxes.y) {
+                    ctx.fillStyle = this.getBackgroundColor();
+                    ctx.fillRect(bounds.x, bounds.y, bounds.width, bounds.height);
+                }
                 const font = getFontFromConfig(yAxisComponent.state);
                 const fontHeight = calculateSymbolHeight(font, ctx);
                 const textColor = this.getLabelTextColor();

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

@@ -18,7 +18,7 @@ export declare class YAxisModel extends ChartBaseElement {
     private paneUUID;
     private state;
     private canvasBoundsContainer;
-    private extentIdx;
+    extentIdx: number;
     labelsGenerator: NumericYAxisLabelsGenerator;
     baseLabelsModel: YAxisBaseLabelsModel;
     fancyLabelsModel: FancyYAxisLabelsModel;

package/dist/chart/drawers/chart-type-drawers/area.drawer.d.ts

@@ -5,9 +5,9 @@
  */
 import { ChartConfigComponentsChart } from '../../chart.config';
 import { DataSeriesModel, VisualSeriesPoint } from '../../model/data-series.model';
-import { ChartDrawerConfig, SeriesDrawer } from '../data-series.drawer';
+import { HTSeriesDrawerConfig, SeriesDrawer } from '../data-series.drawer';
 export declare class AreaDrawer implements SeriesDrawer {
     private config;
     constructor(config: ChartConfigComponentsChart);
-    draw(ctx: CanvasRenderingContext2D, points: VisualSeriesPoint[][], model: DataSeriesModel, drawerConfig: ChartDrawerConfig): void;
+    draw(ctx: CanvasRenderingContext2D, points: VisualSeriesPoint[][], model: DataSeriesModel, hitTestDrawerConfig: HTSeriesDrawerConfig): void;
 }

package/dist/chart/drawers/chart-type-drawers/area.drawer.js

@@ -10,15 +10,15 @@ export class AreaDrawer {
     constructor(config) {
         this.config = config;
     }
-    draw(ctx, points, model, drawerConfig) {
+    draw(ctx, points, model, hitTestDrawerConfig) {
         if (model instanceof CandleSeriesModel) {
             // @ts-ignore
             const visualCandles = flat(points);
             if (visualCandles.length === 0) {
                 return;
             }
-            if (drawerConfig.singleColor) {
-                ctx.strokeStyle = drawerConfig.singleColor;
+            if (hitTestDrawerConfig.color) {
+                ctx.strokeStyle = hitTestDrawerConfig.color;
             }
             else {
                 ctx.strokeStyle = model.colors.areaTheme.lineColor;
@@ -51,8 +51,8 @@ export class AreaDrawer {
                     ctx.lineTo(floor(firstLineX), bottomY);
                     ctx.closePath();
                     let fillColor;
-                    if (drawerConfig.singleColor) {
-                        ctx.fillStyle = drawerConfig.singleColor;
+                    if (hitTestDrawerConfig.color) {
+                        ctx.fillStyle = hitTestDrawerConfig.color;
                     }
                     else {
                         ctx.fillStyle =

package/dist/chart/drawers/chart-type-drawers/bar.drawer.d.ts

@@ -5,10 +5,10 @@
  */
 import { ChartConfigComponentsChart } from '../../chart.config';
 import { DataSeriesModel, VisualSeriesPoint } from '../../model/data-series.model';
-import { ChartDrawerConfig, SeriesDrawer } from '../data-series.drawer';
+import { HTSeriesDrawerConfig, SeriesDrawer } from '../data-series.drawer';
 export declare class BarDrawer implements SeriesDrawer {
     private config;
     constructor(config: ChartConfigComponentsChart);
     private setFillStyle;
-    draw(ctx: CanvasRenderingContext2D, points: VisualSeriesPoint[][], candleSeries: DataSeriesModel, drawerConfig: ChartDrawerConfig): void;
+    draw(ctx: CanvasRenderingContext2D, points: VisualSeriesPoint[][], candleSeries: DataSeriesModel, hitTestDrawerConfig: HTSeriesDrawerConfig): void;
 }