@devexperts/dxcharts-lite 2.4.6 → 2.5.1

package/dist/chart/components/dran-n-drop_helper/drag-n-drop-y.component.d.ts

@@ -15,9 +15,4 @@ export declare class DragNDropYComponent extends DragNDropComponent {
      * @returns {void}
      */
     protected doActivate(): void;
-    /**
-     * This method overrides the doDeactivate method of the parent class and calls the parent method before executing its own code.
-     * It is a protected method, which means it can only be accessed within the class and its subclasses.
-     */
-    protected doDeactivate(): void;
 }

package/dist/chart/components/dran-n-drop_helper/drag-n-drop-y.component.js

@@ -19,11 +19,4 @@ export class DragNDropYComponent extends DragNDropComponent {
         this.addRxSubscription(this.canvasInputListener.observeYDrag().subscribe(this.onDragTick));
         this.addRxSubscription(this.canvasInputListener.observeYDragEnd().subscribe(this.onDragEnd));
     }
-    /**
-     * This method overrides the doDeactivate method of the parent class and calls the parent method before executing its own code.
-     * It is a protected method, which means it can only be accessed within the class and its subclasses.
-     */
-    doDeactivate() {
-        super.doDeactivate();
-    }
 }

package/dist/chart/components/dran-n-drop_helper/drag-n-drop.component.d.ts

@@ -29,17 +29,6 @@ export declare class DragNDropComponent extends ChartBaseElement {
     dragging: boolean;
     draggedPixels: number;
     constructor(hitTest: HitBoundsTest, dragCallbacks: DragNDropComponentCallbacks, canvasInputListener: CanvasInputListenerComponent, chartPanComponent: ChartPanComponent, dragComponentOptions: DragComponentOptions);
-    /**
-     * Calls the parent class's doActivate method and performs any additional activation logic.
-     * This method is protected and can only be accessed by the class itself and its subclasses.
-     */
-    protected doActivate(): void;
-    /**
-     * This method overrides the doDeactivate method of the parent class and calls it using the super keyword.
-     * It is a protected method that can only be accessed within the class and its subclasses.
-     * This method is responsible for deactivating the current object.
-     */
-    protected doDeactivate(): void;
     protected onDragStart: (point: Point) => void;
     protected onDragTick: (yDelta: number) => void;
     protected onDragEnd: () => void;

package/dist/chart/components/dran-n-drop_helper/drag-n-drop.component.js

@@ -40,24 +40,8 @@ export class DragNDropComponent extends ChartBaseElement {
                 if (this.dragging) {
                     this.dragging = false;
                     this.dragCallbacks.onDragEnd && this.dragCallbacks.onDragEnd(this.draggedPixels);
-                    this.chartPanComponent.activateChartPanHandlers();
                 }
             }
         };
     }
-    /**
-     * Calls the parent class's doActivate method and performs any additional activation logic.
-     * This method is protected and can only be accessed by the class itself and its subclasses.
-     */
-    doActivate() {
-        super.doActivate();
-    }
-    /**
-     * This method overrides the doDeactivate method of the parent class and calls it using the super keyword.
-     * It is a protected method that can only be accessed within the class and its subclasses.
-     * This method is responsible for deactivating the current object.
-     */
-    doDeactivate() {
-        super.doDeactivate();
-    }
 }

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

@@ -7,12 +7,13 @@ import { CanvasAnimation } from '../../animation/canvas-animation';
 import { CanvasBoundsContainer } from '../../canvas/canvas-bounds-container';
 import { FullChartConfig } from '../../chart.config';
 import EventBus from '../../events/event-bus';
-import { ChartBaseElement, ChartEntity } from '../../model/chart-base-element';
+import { ChartBaseElement } from '../../model/chart-base-element';
 import { CanvasInputListenerComponent } from '../../inputlisteners/canvas-input-listener.component';
 import { ScaleModel } from '../../model/scale.model';
 import { ChartAreaPanHandler } from '../chart/chart-area-pan.handler';
 import { BaseType, ChartBaseModel } from '../chart/chart-base.model';
 import { HitTestCanvasModel } from '../../model/hit-test-canvas.model';
+import { MainCanvasTouchHandler } from '../../inputhandlers/main-canvas-touch.handler';
 export declare class ChartPanComponent extends ChartBaseElement {
     private eventBus;
     private mainScale;
@@ -23,21 +24,9 @@ export declare class ChartPanComponent extends ChartBaseElement {
     private mainCanvasParent;
     chartBaseModel: ChartBaseModel<BaseType>;
     private hitTestCanvasModel;
-    chartPanComponents: Array<ChartEntity>;
     chartAreaPanHandler: ChartAreaPanHandler;
+    mainCanvasTouchHandler: MainCanvasTouchHandler;
     constructor(eventBus: EventBus, mainScale: ScaleModel, canvasBoundsContainer: CanvasBoundsContainer, config: FullChartConfig, canvasAnimation: CanvasAnimation, canvasInputListener: CanvasInputListenerComponent, mainCanvasParent: Element, chartBaseModel: ChartBaseModel<BaseType>, hitTestCanvasModel: HitTestCanvasModel);
-    /**
-     * Activates the chart pan handlers.
-     * @protected
-     * @returns {void}
-     */
-    protected doActivate(): void;
-    /**
-     * This method is used to deactivate the pan handlers.
-     * @returns {void}
-     * @protected
-     */
-    protected doDeactivate(): void;
     /**
      * Activates user mouse handlers on main chart view.
      * @function

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

@@ -5,6 +5,7 @@
  */
 import { ChartBaseElement } from '../../model/chart-base-element';
 import { ChartAreaPanHandler } from '../chart/chart-area-pan.handler';
+import { MainCanvasTouchHandler } from '../../inputhandlers/main-canvas-touch.handler';
 export class ChartPanComponent extends ChartBaseElement {
     constructor(eventBus, mainScale, canvasBoundsContainer, config, canvasAnimation, canvasInputListener, mainCanvasParent, chartBaseModel, hitTestCanvasModel) {
         super();
@@ -17,25 +18,10 @@ export class ChartPanComponent extends ChartBaseElement {
         this.mainCanvasParent = mainCanvasParent;
         this.chartBaseModel = chartBaseModel;
         this.hitTestCanvasModel = hitTestCanvasModel;
-        this.chartPanComponents = [];
-        this.chartAreaPanHandler = new ChartAreaPanHandler(this.eventBus, this.config, this.mainScale, this.mainCanvasParent, this.canvasInputListener, this.canvasBoundsContainer, this.canvasAnimation, this, this.hitTestCanvasModel);
-        this.chartPanComponents.push(this.chartAreaPanHandler);
-    }
-    /**
-     * Activates the chart pan handlers.
-     * @protected
-     * @returns {void}
-     */
-    doActivate() {
-        this.activateChartPanHandlers();
-    }
-    /**
-     * This method is used to deactivate the pan handlers.
-     * @returns {void}
-     * @protected
-     */
-    doDeactivate() {
-        this.deactivatePanHandlers();
+        this.chartAreaPanHandler = new ChartAreaPanHandler(this.eventBus, this.config, this.mainScale, this.canvasInputListener, this.canvasBoundsContainer, this.canvasAnimation, this, this.hitTestCanvasModel);
+        this.addChildEntity(this.chartAreaPanHandler);
+        this.mainCanvasTouchHandler = new MainCanvasTouchHandler(this.chartAreaPanHandler, this.mainScale, this.canvasInputListener, this.mainCanvasParent);
+        this.addChildEntity(this.mainCanvasTouchHandler);
     }
     /**
      * Activates user mouse handlers on main chart view.
@@ -46,13 +32,13 @@ export class ChartPanComponent extends ChartBaseElement {
      * @returns {void}
      */
     activateChartPanHandlers() {
-        this.chartPanComponents.forEach(c => c.activate());
+        this.activate();
     }
     /**
      * Deactivates all the pan handlers of the chart.
      */
     deactivatePanHandlers() {
-        this.chartPanComponents.forEach(c => c.deactivate());
+        this.deactivate();
     }
     setChartPanningOptions(horizontal, vertical) {
         this.chartAreaPanHandler.chartPanningOptions = { horizontal, vertical };

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

@@ -41,7 +41,7 @@ export class PaneHitTestController {
      * @returns {void}
      */
     onHover(model) {
-        this.allDataSeries.forEach(d => (d.hovered = d.htId === (model === null || model === void 0 ? void 0 : model.htId)));
+        this.allDataSeries.forEach(d => (d.highlighted = d.htId === (model === null || model === void 0 ? void 0 : model.htId)));
         this.canvasModel.fireDraw();
     }
     onMouseDown(model) {

package/dist/chart/components/pane/pane-manager.component.d.ts

@@ -71,11 +71,40 @@ export declare class PaneManager extends ChartBaseElement {
      * @returns
      */
     createPane(uuid?: string, options?: AtLeastOne<YExtentCreationOptions>): PaneComponent;
+    /**
+     * Moves the canvas bounds container up by calling the movePaneUp method with the uuid of the current object.
+     * @returns {void}
+     */
+    movePaneUp(uuid: string): void;
+    /**
+     * Moves the canvas bounds container down by calling the movePaneDown method with the uuid of the current object.
+     * @returns {void}
+     */
+    movePaneDown(uuid: string): void;
+    /**
+     * Checks if the current pane can move up.
+     * @returns {boolean} - Returns true if the current pane can move up, otherwise false.
+     */
+    canMovePaneUp(uuid: string): boolean;
+    /**
+     * Checks if the current pane can move down.
+     *
+     * @returns {boolean} - Returns true if the current pane is not the last one in the canvasBoundsContainer, otherwise returns false.
+     */
+    canMovePaneDown(uuid: string): boolean;
     /**
      * Removes pane from the chart and all related components
      * @param uuid
      */
     removePane(uuid: string): void;
+    /**
+     * Hides a pane from the chart and all related components
+     */
+    hidePane(paneUUID: string): void;
+    /**
+     * Shows a pane, use if the pane is hidden
+     */
+    showPane(paneUUID: string): void;
     /**
      * Adds cursors to the chart elements based on the provided uuid and cursor type.
      * @private

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

@@ -12,7 +12,7 @@ import { BarResizerComponent } from '../resizer/bar-resizer.component';
 import { createDefaultYExtentHighLowProvider, } from './extent/y-extent-component';
 import { PaneHitTestController } from './pane-hit-test.controller';
 import { PaneComponent } from './pane.component';
-import { flatMap } from '../../utils/array.utils';
+import { firstOf, flatMap, lastOf } from '../../utils/array.utils';
 export class PaneManager extends ChartBaseElement {
     /**
      * Returns order of panes in the chart from top to bottom.
@@ -53,7 +53,7 @@ export class PaneManager extends ChartBaseElement {
     }
     addBounds(uuid, order) {
         this.canvasBoundsContainer.addPaneBounds(uuid, order);
-        return () => this.canvasBoundsContainer.removedPaneBounds(uuid);
+        return () => this.canvasBoundsContainer.removePaneBounds(uuid);
     }
     /**
      * Adds a resizer to the canvas bounds container for the given uuid.
@@ -110,19 +110,82 @@ export class PaneManager extends ChartBaseElement {
         this.paneAddedSubject.next(this.panes);
         return paneComponent;
     }
+    /**
+     * Moves the canvas bounds container up by calling the movePaneUp method with the uuid of the current object.
+     * @returns {void}
+     */
+    movePaneUp(uuid) {
+        this.canvasBoundsContainer.movePaneUp(uuid);
+    }
+    /**
+     * Moves the canvas bounds container down by calling the movePaneDown method with the uuid of the current object.
+     * @returns {void}
+     */
+    movePaneDown(uuid) {
+        this.canvasBoundsContainer.movePaneDown(uuid);
+    }
+    /**
+     * Checks if the current pane can move up.
+     * @returns {boolean} - Returns true if the current pane can move up, otherwise false.
+     */
+    canMovePaneUp(uuid) {
+        var _a, _b;
+        const firstVisiblePane = firstOf(this.canvasBoundsContainer.panesOrder.filter(uuid => { var _a, _b; return (_b = (_a = this.panes[uuid]) === null || _a === void 0 ? void 0 : _a.visible) !== null && _b !== void 0 ? _b : false; }));
+        return uuid !== firstVisiblePane && ((_b = (_a = this.panes[uuid]) === null || _a === void 0 ? void 0 : _a.visible) !== null && _b !== void 0 ? _b : false);
+    }
+    /**
+     * Checks if the current pane can move down.
+     *
+     * @returns {boolean} - Returns true if the current pane is not the last one in the canvasBoundsContainer, otherwise returns false.
+     */
+    canMovePaneDown(uuid) {
+        var _a, _b;
+        const lastVisiblePane = lastOf(this.canvasBoundsContainer.panesOrder.filter(uuid => { var _a, _b; return (_b = (_a = this.panes[uuid]) === null || _a === void 0 ? void 0 : _a.visible) !== null && _b !== void 0 ? _b : false; }));
+        return uuid !== lastVisiblePane && ((_b = (_a = this.panes[uuid]) === null || _a === void 0 ? void 0 : _a.visible) !== null && _b !== void 0 ? _b : false);
+    }
     /**
      * Removes pane from the chart and all related components
      * @param uuid
      */
     removePane(uuid) {
         const pane = this.panes[uuid];
-        if (pane !== undefined) {
-            this.paneRemovedSubject.next(pane);
-            pane.disable();
-            pane.yExtentComponents.forEach(yExtentComponent => yExtentComponent.disable());
-            delete this.panes[uuid];
-            this.recalculateState();
+        if (pane === undefined) {
+            return;
+        }
+        this.paneRemovedSubject.next(pane);
+        pane.disable();
+        pane.yExtentComponents.forEach(yExtentComponent => yExtentComponent.disable());
+        delete this.panes[uuid];
+        this.recalculateState();
+    }
+    /**
+     * Hides a pane from the chart and all related components
+     */
+    hidePane(paneUUID) {
+        const pane = this.panes[paneUUID];
+        // hide pane only if we have more than one visible pane
+        if (pane === undefined || !pane.visible) {
+            return;
         }
+        const paneResizerId = CanvasElement.PANE_UUID_RESIZER(paneUUID);
+        const resizer = this.userInputListenerComponents.find(el => el instanceof BarResizerComponent && el.id === paneResizerId);
+        resizer === null || resizer === void 0 ? void 0 : resizer.disable();
+        this.canvasBoundsContainer.hidePaneBounds(paneUUID);
+        this.recalculateState();
+    }
+    /**
+     * Shows a pane, use if the pane is hidden
+     */
+    showPane(paneUUID) {
+        const pane = this.panes[paneUUID];
+        const paneResizerId = CanvasElement.PANE_UUID_RESIZER(paneUUID);
+        if (pane === undefined || pane.visible) {
+            return;
+        }
+        const resizer = this.userInputListenerComponents.find(el => el instanceof BarResizerComponent && el.id === paneResizerId);
+        resizer === null || resizer === void 0 ? void 0 : resizer.enable();
+        this.canvasBoundsContainer.showPaneBounds(paneUUID);
+        this.recalculateState();
     }
     /**
      * Adds cursors to the chart elements based on the provided uuid and cursor type.

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

@@ -44,7 +44,6 @@ export declare class PaneComponent extends ChartBaseElement {
     seriesAddedSubject: Subject<DataSeriesModel>;
     seriesRemovedSubject: Subject<DataSeriesModel>;
     private hitTestCanvasModel;
-    private _paneOrder;
     /**
      * Pane hit test (without Y-Axis and resizer)
      */
@@ -53,6 +52,7 @@ export declare class PaneComponent extends ChartBaseElement {
     get scale(): ScaleModel;
     get yAxis(): YAxisComponent;
     get dataSeries(): DataSeriesModel<import("../../model/data-series.model").DataSeriesPoint, import("../../model/data-series.model").VisualSeriesPoint>[];
+    get visible(): boolean;
     mainExtent: YExtentComponent;
     constructor(chartBaseModel: ChartBaseModel<'candle'>, mainCanvasModel: CanvasModel, yAxisLabelsCanvasModel: CanvasModel, dynamicObjectsCanvasModel: CanvasModel, hitTestController: PaneHitTestController, config: FullChartConfig, mainScale: ScaleModel, drawingManager: DrawingManager, chartPanComponent: ChartPanComponent, canvasInputListener: CanvasInputListenerComponent, canvasAnimation: CanvasAnimation, cursorHandler: CursorHandler, eventBus: EventBus, canvasBoundsContainer: CanvasBoundsContainer, uuid: string, seriesAddedSubject: Subject<DataSeriesModel>, seriesRemovedSubject: Subject<DataSeriesModel>, hitTestCanvasModel: HitTestCanvasModel, options?: AtLeastOne<YExtentCreationOptions>);
     /**
@@ -96,22 +96,6 @@ export declare class PaneComponent extends ChartBaseElement {
      * Returns the bounds of the pane component.
      */
     getBounds(): Bounds;
-    /**
-     * Hides the pane by removing its bounds from the canvasBoundsContainer and firing a draw event.
-     * @function
-     * @name hide
-     * @memberof PaneComponent
-     * @returns {void}
-     */
-    hide(): void;
-    /**
-     * Adds the bounds of the pane to the canvas bounds container and fires a draw event.
-     * @function
-     * @name show
-     * @memberof PaneComponent
-     * @returns {void}
-     */
-    show(): void;
     /**
      * Creates a new DataSeriesModel object.
      * @returns {DataSeriesModel} - The newly created DataSeriesModel object.
@@ -140,22 +124,26 @@ export declare class PaneComponent extends ChartBaseElement {
     /**
      * Moves the canvas bounds container up by calling the movePaneUp method with the uuid of the current object.
      * @returns {void}
+     * @deprecated Use `paneManager.movePaneUp()` instead
      */
     moveUp(): void;
     /**
      * Moves the canvas bounds container down by calling the movePaneDown method with the uuid of the current object.
      * @returns {void}
+     * @deprecated Use `paneManager.movePaneDown()` instead
      */
     moveDown(): void;
     /**
      * Checks if the current pane can move up.
      * @returns {boolean} - Returns true if the current pane can move up, otherwise false.
+     * @deprecated Use `paneManager.canMovePaneUp()` instead
      */
     canMoveUp(): boolean;
     /**
      * Checks if the current pane can move down.
      *
      * @returns {boolean} - Returns true if the current pane is not the last one in the canvasBoundsContainer, otherwise returns false.
+     * @deprecated Use `paneManager.canMovePaneDown()` instead
      */
     canMoveDown(): boolean;
     valueFormatter: (value: Unit, dataSeries?: DataSeriesModel) => string;

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

@@ -22,6 +22,9 @@ export class PaneComponent extends ChartBaseElement {
     get dataSeries() {
         return flatMap(this.yExtentComponents, c => Array.from(c.dataSeries));
     }
+    get visible() {
+        return this.canvasBoundsContainer.graphsHeightRatio[this.uuid] > 0;
+    }
     constructor(chartBaseModel, mainCanvasModel, yAxisLabelsCanvasModel, dynamicObjectsCanvasModel, hitTestController, config, mainScale, drawingManager, chartPanComponent, canvasInputListener, canvasAnimation, cursorHandler, eventBus, canvasBoundsContainer, uuid, seriesAddedSubject, seriesRemovedSubject, hitTestCanvasModel, options) {
         super();
         this.chartBaseModel = chartBaseModel;
@@ -42,7 +45,6 @@ export class PaneComponent extends ChartBaseElement {
         this.seriesAddedSubject = seriesAddedSubject;
         this.seriesRemovedSubject = seriesRemovedSubject;
         this.hitTestCanvasModel = hitTestCanvasModel;
-        this._paneOrder = 0;
         this.yExtentComponents = [];
         this.getYAxisBounds = () => {
             return this.canvasBoundsContainer.getBounds(CanvasElement.PANE_UUID_Y_AXIS(this.uuid));
@@ -176,29 +178,6 @@ export class PaneComponent extends ChartBaseElement {
     getBounds() {
         return this.mainExtent.getBounds();
     }
-    /**
-     * Hides the pane by removing its bounds from the canvasBoundsContainer and firing a draw event.
-     * @function
-     * @name hide
-     * @memberof PaneComponent
-     * @returns {void}
-     */
-    hide() {
-        this._paneOrder = this.canvasBoundsContainer.panesOrder.indexOf(this.uuid);
-        this.canvasBoundsContainer.removedPaneBounds(this.uuid);
-        this.eventBus.fireDraw();
-    }
-    /**
-     * Adds the bounds of the pane to the canvas bounds container and fires a draw event.
-     * @function
-     * @name show
-     * @memberof PaneComponent
-     * @returns {void}
-     */
-    show() {
-        this.canvasBoundsContainer.addPaneBounds(this.uuid, this._paneOrder);
-        this.eventBus.fireDraw();
-    }
     /**
      * Creates a new DataSeriesModel object.
      * @returns {DataSeriesModel} - The newly created DataSeriesModel object.
@@ -239,6 +218,7 @@ export class PaneComponent extends ChartBaseElement {
     /**
      * Moves the canvas bounds container up by calling the movePaneUp method with the uuid of the current object.
      * @returns {void}
+     * @deprecated Use `paneManager.movePaneUp()` instead
      */
     moveUp() {
         this.canvasBoundsContainer.movePaneUp(this.uuid);
@@ -246,6 +226,7 @@ export class PaneComponent extends ChartBaseElement {
     /**
      * Moves the canvas bounds container down by calling the movePaneDown method with the uuid of the current object.
      * @returns {void}
+     * @deprecated Use `paneManager.movePaneDown()` instead
      */
     moveDown() {
         this.canvasBoundsContainer.movePaneDown(this.uuid);
@@ -253,19 +234,21 @@ export class PaneComponent extends ChartBaseElement {
     /**
      * Checks if the current pane can move up.
      * @returns {boolean} - Returns true if the current pane can move up, otherwise false.
+     * @deprecated Use `paneManager.canMovePaneUp()` instead
      */
     canMoveUp() {
-        const firstPane = firstOf(this.canvasBoundsContainer.panesOrder);
-        return this.uuid !== firstPane;
+        const firstVisiblePane = firstOf(this.canvasBoundsContainer.panesOrder.filter(uuid => this.canvasBoundsContainer.graphsHeightRatio[uuid] > 0));
+        return this.uuid !== firstVisiblePane && this.visible;
     }
     /**
      * Checks if the current pane can move down.
      *
      * @returns {boolean} - Returns true if the current pane is not the last one in the canvasBoundsContainer, otherwise returns false.
+     * @deprecated Use `paneManager.canMovePaneDown()` instead
      */
     canMoveDown() {
-        const lastPane = lastOf(this.canvasBoundsContainer.panesOrder);
-        return this.uuid !== lastPane;
+        const lastVisiblePane = lastOf(this.canvasBoundsContainer.panesOrder.filter(uuid => this.canvasBoundsContainer.graphsHeightRatio[uuid] > 0));
+        return this.uuid !== lastVisiblePane && this.visible;
     }
     get regularFormatter() {
         return this.mainExtent.formatters.regular;

package/dist/chart/components/resizer/bar-resizer.component.d.ts

@@ -22,7 +22,7 @@ import { HitTestCanvasModel } from '../../model/hit-test-canvas.model';
  * @doc-tags chart-core,resizer
  */
 export declare class BarResizerComponent extends ChartBaseElement {
-    private id;
+    readonly id: string;
     private boundsProvider;
     private hitTest;
     private dragTickCb;

package/dist/chart/components/resizer/bar-resizer.component.js

@@ -39,6 +39,7 @@ export class BarResizerComponent extends ChartBaseElement {
             this.initialY = this.boundsProvider().y;
             // Stop redrawing hit test
             this.hitTestCanvasModel.hitTestDrawersPredicateSubject.next(false);
+            this.chartPanComponent.deactivatePanHandlers();
         };
         this.onYDragEnd = () => {
             this.config.components.crossTool.type = 'cross-and-labels';
@@ -46,6 +47,7 @@ export class BarResizerComponent extends ChartBaseElement {
             this.canvasBoundsContainer.graphsHeightRatioChangedSubject.next(this.canvasBoundsContainer.graphsHeightRatio);
             // Continue redrawing hit test
             this.hitTestCanvasModel.hitTestDrawersPredicateSubject.next(true);
+            this.chartPanComponent.activateChartPanHandlers();
         };
         this.onYDragTick = (dragInfo) => {
             const { delta: yDelta, draggedPixels } = dragInfo;
@@ -75,7 +77,7 @@ export class BarResizerComponent extends ChartBaseElement {
             const dragNDropYComponent = new DragNDropYComponent(this.hitTest, {
                 onDragTick: this.onYDragTick,
                 onDragStart: this.onYDragStart,
-                onDragEnd: this.onYDragEnd
+                onDragEnd: this.onYDragEnd,
             }, this.canvasInputListener, this.chartPanComponent, {
                 dragPredicate: this.dragPredicate,
             });

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

@@ -58,5 +58,5 @@ export declare class VolumesComponent extends ChartBaseElement {
      * @returns {void}
      */
     setVisible(visible?: boolean): void;
-    private addVolumesToDynamicObjects;
+    private syncVolumesDynamicObject;
 }

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

@@ -25,7 +25,7 @@ export class VolumesComponent extends ChartBaseElement {
         this.addChildEntity(volumesModel);
         this.separateVolumes = new SeparateVolumesComponent(chartComponent, drawingManager, config, volumesModel, paneManager);
         this.volumesDrawer = new VolumesDrawer(config, this.volumesModel, chartComponent.chartModel, () => { var _a, _b; return (this.config.components.volumes.showSeparately ? (_b = (_a = this.separateVolumes.pane) === null || _a === void 0 ? void 0 : _a.scale) !== null && _b !== void 0 ? _b : scale : scale); }, this.volumesColorByChartTypeMap, () => true);
-        config.components.volumes.visible && this.addVolumesToDynamicObjects();
+        config.components.volumes.visible && this.syncVolumesDynamicObject();
         this.addChildEntity(this.separateVolumes);
         this.registerDefaultVolumeColorResolvers();
         this.volumeVisibilityChangedSubject.next(config.components.volumes.visible);
@@ -58,6 +58,7 @@ export class VolumesComponent extends ChartBaseElement {
                 this.separateVolumes.deactiveSeparateVolumes();
             }
             this.volumeIsSeparateModeChangedSubject.next(separate);
+            this.syncVolumesDynamicObject();
         }
     }
     /**
@@ -84,9 +85,6 @@ export class VolumesComponent extends ChartBaseElement {
     setVisible(visible = true) {
         this.config.components.volumes.visible = visible;
         this.volumeVisibilityChangedSubject.next(visible);
-        visible
-            ? this.addVolumesToDynamicObjects()
-            : this.dynamicObjectsComponent.model.removeObject(this.volumesModel.id);
         if (this.config.components.volumes.showSeparately) {
             if (visible) {
                 this.separateVolumes.activateSeparateVolumes();
@@ -98,19 +96,28 @@ export class VolumesComponent extends ChartBaseElement {
             }
         }
         this.canvasBoundsContainer.recalculatePanesHeightRatios();
+        this.syncVolumesDynamicObject();
         this.canvasModel.fireDraw();
     }
-    addVolumesToDynamicObjects() {
-        // check if the volumes dynamic object is already added
-        const position = this.dynamicObjectsComponent.model.getObjectPosition(this.volumesModel.id);
-        if (position !== -1) {
+    syncVolumesDynamicObject() {
+        const visible = this.config.components.volumes.visible;
+        if (!visible) {
+            this.dynamicObjectsComponent.model.removeObject(this.volumesModel.id);
             return;
         }
-        this.dynamicObjectsComponent.model.addObject({
+        const paneId = this.config.components.volumes.showSeparately ? VOLUMES_UUID : CHART_UUID;
+        const volumesDynamicObject = {
             id: this.volumesModel.id,
-            paneId: this.config.components.volumes.showSeparately ? VOLUMES_UUID : CHART_UUID,
+            paneId,
             drawer: this.volumesDrawer,
             model: this.volumesModel,
-        });
+        };
+        // check if the volumes dynamic object is already added
+        const position = this.dynamicObjectsComponent.model.getObjectPosition(this.volumesModel.id);
+        if (position === -1) {
+            this.dynamicObjectsComponent.model.addObject(volumesDynamicObject);
+            return;
+        }
+        this.dynamicObjectsComponent.model.updateObject(volumesDynamicObject);
     }
 }

package/dist/chart/components/y_axis/y-axis-scale.handler.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 { Subject } from 'rxjs';
-import { CanvasElement } from '../../canvas/canvas-bounds-container';
+import { CanvasElement, DEFAULT_MIN_PANE_HEIGHT } from '../../canvas/canvas-bounds-container';
 import { ChartBaseElement } from '../../model/chart-base-element';
 import { DragNDropYComponent } from '../dran-n-drop_helper/drag-n-drop-y.component';
 // if you drag full Y height from top to bottom - you will have x3 zoom, and vice-versa
@@ -35,7 +35,7 @@ export class YAxisScaleHandler extends ChartBaseElement {
             this.lastYStart = this.scale.yStart;
             this.lastYEnd = this.scale.yEnd;
             this.lastYHeight = this.scale.yEnd - this.scale.yStart;
-            this.lastYPxHeight = this.bounds.getBounds(CanvasElement.Y_AXIS).height;
+            this.lastYPxHeight = Math.max(this.bounds.getBounds(CanvasElement.Y_AXIS).height, DEFAULT_MIN_PANE_HEIGHT);
             // Stop redrawing hit test
             this.hitTestCanvasModel.hitTestDrawersPredicateSubject.next(false);
         };
@@ -73,7 +73,7 @@ export class YAxisScaleHandler extends ChartBaseElement {
                 onDragStart: this.onYDragStart,
                 onDragEnd: this.onYDragEnd,
             }, canvasInputListener, panning, {
-                dragPredicate: () => panning.chartAreaPanHandler.chartPanningOptions.vertical && config.type !== 'percent' && config.visible,
+                dragPredicate: () => panning.chartAreaPanHandler.chartPanningOptions.vertical && config.type !== 'percent',
             });
             this.addChildEntity(dragNDropYComponent);
         }

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

@@ -176,7 +176,7 @@ export class YAxisComponent extends ChartBaseElement {
     setVisible(isVisible) {
         this.state.visible = isVisible;
         this.config.components.yAxis.visible = isVisible;
-        isVisible ? this.enable() : this.disable();
+        isVisible ? this.activate() : this.deactivate();
         this.model.fancyLabelsModel.updateLabels();
         this.model.baseLabelsModel.updateLabels();
     }

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

@@ -23,7 +23,7 @@ export class AreaDrawer {
             else {
                 ctx.strokeStyle = model.colors.areaTheme.lineColor;
             }
-            if (model.hovered) {
+            if (model.highlighted) {
                 ctx.lineWidth = this.config.selectedWidth;
             }
             else {

package/dist/chart/drawers/data-series.drawer.js

@@ -47,7 +47,7 @@ export const setLineWidth = (ctx, lineWidth, dataSeries, drawerConfig, seriesSel
     if (drawerConfig.forceBold) {
         ctx.lineWidth = drawerConfig.forceBold;
     }
-    else if (dataSeries.hovered) {
+    else if (dataSeries.highlighted) {
         ctx.lineWidth = lineWidth !== seriesSelectedWidth ? lineWidth + 1 : seriesSelectedWidth;
     }
     else {

package/dist/chart/inputhandlers/hover-producer.component.d.ts

@@ -58,7 +58,7 @@ export declare class HoverProducerComponent extends ChartBaseElement {
     private longTouchActivatedSubject;
     private hoverProducerParts;
     xFormatter: DateTimeFormatter;
-    constructor(crossEventProducer: CrossEventProducerComponent, scale: ScaleModel, config: FullChartConfig, chartModel: ChartModel, canvasInputListener: CanvasInputListenerComponent, canvasBoundsContainer: CanvasBoundsContainer, paneManager: PaneManager, timeZoneModel: TimeZoneModel, formatterFactory: (format: string) => (timestamp: number | Date) => string);
+    constructor(crossEventProducer: CrossEventProducerComponent, scale: ScaleModel, config: FullChartConfig, chartModel: ChartModel, canvasInputListener: CanvasInputListenerComponent, canvasBoundsContainer: CanvasBoundsContainer, paneManager: PaneManager, timeZoneModel: TimeZoneModel, formatterFactory: (format: string) => (timestamp: number) => string);
     /**
      * This method is responsible for activating the chart hover functionality. It subscribes to several observables to
      * update the hover when the chart is updated or when the user interacts with it. It also handles special behavior