@devexperts/dxcharts-lite 2.7.1 → 2.7.3

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/price_labels/price-label.drawer.d.ts

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

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

@@ -25,7 +25,7 @@ export const priceLabelDrawersMap = {
  * @param canvasBoundsContainer
  * @param config
  */
-export function drawLabel(ctx, backgroundCtx, bounds, paneBounds, visualLabel, canvasBoundsContainer, config, colors) {
+export function drawLabel(ctx, yAxisDescriptionsCtx, backgroundCtx, bounds, paneBounds, visualLabel, canvasBoundsContainer, config, colors) {
     var _a, _b, _c, _d, _e;
     const centralY = visualLabel.y;
     const text = visualLabel.labelText;
@@ -48,7 +48,8 @@ export function drawLabel(ctx, backgroundCtx, bounds, paneBounds, visualLabel, c
     const drawLabel = priceLabelDrawersMap[appearanceType];
     const showDescription = config.labels.descriptions;
     const showLine = isLineVisible(bounds, labelY, labelBoxHeight);
-    const _drawDescription = () => showDescription && drawDescription(backgroundCtx, ctx, bounds, paneBounds, visualLabel, config);
+    const _drawDescription = () => showDescription &&
+        drawDescription(backgroundCtx, yAxisDescriptionsCtx, bounds, paneBounds, visualLabel, config);
     let lineXStart;
     let lineXEnd;
     // line should touch the label

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

@@ -11,11 +11,12 @@ import { PaneManager } from '../../pane/pane-manager.component';
 import { LabelGroup } from './y-axis-labels.model';
 export declare class YAxisPriceLabelsDrawer implements Drawer {
     private yAxisLabelsCanvasModel;
+    private yAxisDescriptionsCanvasModel;
     private backgroundCanvasModel;
     private canvasBoundsContainer;
     private fullConfig;
     private paneManager;
-    constructor(yAxisLabelsCanvasModel: CanvasModel, backgroundCanvasModel: CanvasModel, canvasBoundsContainer: CanvasBoundsContainer, fullConfig: FullChartConfig, paneManager: PaneManager);
+    constructor(yAxisLabelsCanvasModel: CanvasModel, yAxisDescriptionsCanvasModel: CanvasModel, backgroundCanvasModel: CanvasModel, canvasBoundsContainer: CanvasBoundsContainer, fullConfig: FullChartConfig, paneManager: PaneManager);
     draw(): void;
     drawHighlightedBackgroundBetweenLabels(orderedLabels: LabelGroup[]): void;
     getCanvasIds(): Array<string>;

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

@@ -7,8 +7,9 @@ import { CanvasElement, CHART_UUID, limitYToBounds, } from '../../../canvas/canv
 import { fillRect } from '../../../utils/canvas/canvas-drawing-functions.utils';
 import { drawLabel } from './price-label.drawer';
 export class YAxisPriceLabelsDrawer {
-    constructor(yAxisLabelsCanvasModel, backgroundCanvasModel, canvasBoundsContainer, fullConfig, paneManager) {
+    constructor(yAxisLabelsCanvasModel, yAxisDescriptionsCanvasModel, backgroundCanvasModel, canvasBoundsContainer, fullConfig, paneManager) {
         this.yAxisLabelsCanvasModel = yAxisLabelsCanvasModel;
+        this.yAxisDescriptionsCanvasModel = yAxisDescriptionsCanvasModel;
         this.backgroundCanvasModel = backgroundCanvasModel;
         this.canvasBoundsContainer = canvasBoundsContainer;
         this.fullConfig = fullConfig;
@@ -17,6 +18,7 @@ export class YAxisPriceLabelsDrawer {
     draw() {
         const ctx = this.yAxisLabelsCanvasModel.ctx;
         const backgroundCtx = this.backgroundCanvasModel.ctx;
+        const descriptionsCtx = this.yAxisDescriptionsCanvasModel.ctx;
         this.paneManager.yExtents.forEach(extent => {
             if (extent.yAxis.state.visible) {
                 const yAxisBounds = extent.getYAxisBounds();
@@ -26,10 +28,10 @@ export class YAxisPriceLabelsDrawer {
                 orderedLabels.forEach(l => {
                     var _a;
                     const bounds = (_a = l.bounds) !== null && _a !== void 0 ? _a : yAxisBounds;
-                    l.labels.forEach(vl => drawLabel(ctx, backgroundCtx, bounds, paneBounds, vl, this.canvasBoundsContainer, extent.yAxis.state, this.fullConfig.colors));
+                    l.labels.forEach(vl => drawLabel(ctx, descriptionsCtx, backgroundCtx, bounds, paneBounds, vl, this.canvasBoundsContainer, extent.yAxis.state, this.fullConfig.colors));
                 });
                 // TODO I added this as a simple mechanism to add custom labels, we need to review it
-                Object.values(extent.yAxis.model.fancyLabelsModel.customLabels).forEach(l => drawLabel(ctx, backgroundCtx, yAxisBounds, paneBounds, l, this.canvasBoundsContainer, extent.yAxis.state, this.fullConfig.colors));
+                Object.values(extent.yAxis.model.fancyLabelsModel.customLabels).forEach(l => drawLabel(ctx, descriptionsCtx, backgroundCtx, yAxisBounds, paneBounds, l, this.canvasBoundsContainer, extent.yAxis.state, this.fullConfig.colors));
             }
         });
     }

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

@@ -25,6 +25,11 @@ export declare class YAxisBaseLabelsModel extends ChartBaseElement {
      * If the height of the canvas bounds changes by more than 1.5 times the previous height, the labels cache is invalidated and the previous y-axis height is updated.
      */
     protected doActivate(): void;
+    /**
+     * Generates new labels with labelsGenerator
+     * Then, it calls the updateYAxisWidth method to update the width of the y-axis.
+     */
+    recalculateLabels(): void;
     /**
      * Updates the labels of the chart's y-axis by generating new numeric labels using the yAxisLabelsGenerator object.
      * Then, it calls the updateYAxisWidth method to update the width of the y-axis.

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

@@ -41,6 +41,15 @@ export class YAxisBaseLabelsModel extends ChartBaseElement {
             this.prevYAxisHeight = height;
         }))).subscribe(() => this.updateLabels()));
     }
+    /**
+     * Generates new labels with labelsGenerator
+     * Then, it calls the updateYAxisWidth method to update the width of the y-axis.
+     */
+    recalculateLabels() {
+        const labels = this.labelsGenerator.doGenerateLabels();
+        this.labels = labels;
+        animationFrameThrottledPrior(this.animFrameId, () => this.canvasBoundsContainer.updateYAxisWidths());
+    }
     /**
      * Updates the labels of the chart's y-axis by generating new numeric labels using the yAxisLabelsGenerator object.
      * Then, it calls the updateYAxisWidth method to update the width of the y-axis.

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

@@ -32,18 +32,23 @@ 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;
     model: YAxisModel;
     axisTypeSetSubject: Subject<PriceAxisType>;
     axisAlignSetSubject: Subject<YAxisAlign>;
+    axisAlignMovedSubject: 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 +58,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,14 +23,18 @@ 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();
         this.axisAlignSetSubject = new Subject();
+        this.axisAlignMovedSubject = new Subject();
         /* This function assigns a callback to be executed when a double-click event is detected.
          * It accepts one parameter `cb`, which is a callback function.
          * When a double-click event occurs, the specified callback function `cb` will be invoked.
@@ -62,6 +61,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
@@ -240,7 +247,9 @@ export class YAxisComponent extends ChartBaseElement {
     togglePriceScaleInverse(inverse) {
         this.scale.state.inverse = inverse;
         this.scale.inverseY = inverse;
+        this.model.fancyLabelsModel.updateLabels();
         this.scale.scaleInversedSubject.next(inverse);
+        this.canvasModel.fireDraw();
     }
     /**
      * Changes the visibility of the labels' descriptions.

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-background.drawer.d.ts

@@ -12,6 +12,7 @@ export declare class BackgroundDrawer implements Drawer {
     private drawPredicate;
     constructor(canvasModel: CanvasModel, config: FullChartConfig, drawPredicate?: () => boolean);
     private prevState;
+    isColorsChanged: () => boolean;
     draw(): void;
     getCanvasIds(): Array<string>;
 }

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

@@ -13,9 +13,10 @@ export class BackgroundDrawer {
         this.drawPredicate = drawPredicate;
         // we need to save previous state to avoid unnecessary redraws
         this.prevState = {};
+        this.isColorsChanged = () => !deepEqual(this.config.colors.chartAreaTheme, this.prevState);
     }
     draw() {
-        if (this.drawPredicate() || !deepEqual(this.config.colors.chartAreaTheme, this.prevState)) {
+        if (this.drawPredicate() || this.isColorsChanged()) {
             this.canvasModel.clear();
             const ctx = this.canvasModel.ctx;
             if (this.config.colors.chartAreaTheme.backgroundMode === 'gradient') {

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;
 }

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

@@ -12,9 +12,9 @@ export class BarDrawer {
     constructor(config) {
         this.config = config;
     }
-    setFillStyle(ctx, drawerConfig, candleSeries, visualCandle) {
-        if (drawerConfig.singleColor) {
-            ctx.strokeStyle = drawerConfig.singleColor;
+    setFillStyle(ctx, hitTestDrawerConfig, candleSeries, visualCandle) {
+        if (hitTestDrawerConfig.color) {
+            ctx.strokeStyle = hitTestDrawerConfig.color;
         }
         else {
             const barTheme = candleSeries.colors.barTheme;
@@ -23,14 +23,14 @@ export class BarDrawer {
             }
         }
     }
-    draw(ctx, points, candleSeries, drawerConfig) {
+    draw(ctx, points, candleSeries, hitTestDrawerConfig) {
         if (candleSeries instanceof CandleSeriesModel) {
             // @ts-ignore
             const visualCandles = flat(points);
-            setLineWidth(ctx, this.config.barLineWidth, candleSeries, drawerConfig);
+            setLineWidth(ctx, this.config.barLineWidth, candleSeries, hitTestDrawerConfig);
             avoidAntialiasing(ctx, () => {
                 for (const visualCandle of visualCandles) {
-                    this.setFillStyle(ctx, drawerConfig, candleSeries, visualCandle);
+                    this.setFillStyle(ctx, hitTestDrawerConfig, candleSeries, visualCandle);
                     ctx.beginPath();
                     const bodyLineX = candleSeries.view.toX(visualCandle.centerUnit);
                     const openLineStartX = candleSeries.view.toX(visualCandle.startUnit);

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

@@ -6,10 +6,10 @@
 import { CanvasBoundsContainer } from '../../canvas/canvas-bounds-container';
 import { BaselineModel } from '../../model/baseline.model';
 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 BaselineDrawer implements SeriesDrawer {
     private baseLineModel;
     private canvasBoundContainer;
     constructor(baseLineModel: BaselineModel, canvasBoundContainer: CanvasBoundsContainer);
-    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/baseline.drawer.js

@@ -11,8 +11,8 @@ export class BaselineDrawer {
         this.baseLineModel = baseLineModel;
         this.canvasBoundContainer = canvasBoundContainer;
     }
-    draw(ctx, points, model, drawerConfig) {
-        if (drawerConfig !== undefined && model instanceof CandleSeriesModel) {
+    draw(ctx, points, model, hitTestDrawerConfig) {
+        if (hitTestDrawerConfig !== undefined && model instanceof CandleSeriesModel) {
             const visualCandles = flat(points);
             // calculate baseline
             const baselineYPercents = this.baseLineModel.baselineYPercents;
@@ -29,7 +29,7 @@ export class BaselineDrawer {
                 const prevHigherThanBL = prev ? model.view.toY(prev.close) < baseLine : false;
                 const curHigherThanBL = currentCloseYPx < baseLine;
                 if (prev !== void 0 && prevHigherThanBL !== curHigherThanBL) {
-                    setBaselineFillStyle(ctx, model, drawerConfig, prevHigherThanBL);
+                    setBaselineFillStyle(ctx, model, hitTestDrawerConfig, prevHigherThanBL);
                     const prevLineXPx = model.view.toX(prev.centerUnit);
                     const prevCloseYPx = model.view.toY(prev.close);
                     // our goal here is to find the crossing point X between chart line and baseline
@@ -53,7 +53,7 @@ export class BaselineDrawer {
                     ctx.moveTo(currentLineXPx, currentCloseYPx);
                 }
                 else if (next === void 0) {
-                    setBaselineFillStyle(ctx, model, drawerConfig, curHigherThanBL);
+                    setBaselineFillStyle(ctx, model, hitTestDrawerConfig, curHigherThanBL);
                     ctx.lineTo(currentLineXPx, currentCloseYPx);
                     ctx.stroke();
                     ctx.lineTo(currentLineXPx, baseLine);
@@ -73,10 +73,10 @@ export class BaselineDrawer {
         }
     }
 }
-const setBaselineFillStyle = (ctx, candleSeries, drawerConfig, upper) => {
-    if (drawerConfig.singleColor) {
-        ctx.fillStyle = drawerConfig.singleColor;
-        ctx.strokeStyle = drawerConfig.singleColor;
+const setBaselineFillStyle = (ctx, candleSeries, hitTestDrawerConfig, upper) => {
+    if (hitTestDrawerConfig.color) {
+        ctx.fillStyle = hitTestDrawerConfig.color;
+        ctx.strokeStyle = hitTestDrawerConfig.color;
     }
     else {
         ctx.fillStyle = upper

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

@@ -6,7 +6,7 @@
 import { CandleSeriesModel } from '../../model/candle-series.model';
 import { ChartConfigComponentsChart } from '../../chart.config';
 import VisualCandle from '../../model/visual-candle';
-import { ChartDrawerConfig, SeriesDrawer } from '../data-series.drawer';
+import { HTSeriesDrawerConfig, SeriesDrawer } from '../data-series.drawer';
 import { DataSeriesModel, VisualSeriesPoint } from '../../model/data-series.model';
 export declare class CandleDrawer implements SeriesDrawer {
     private config;
@@ -18,8 +18,8 @@ export declare class CandleDrawer implements SeriesDrawer {
     /**
      * You can pass two-dimension array to divide series into multiple parts
      */
-    points: VisualSeriesPoint[][], model: DataSeriesModel, drawerConfig: ChartDrawerConfig): void;
-    drawCandle(ctx: CanvasRenderingContext2D, drawerConfig: ChartDrawerConfig, candleSeries: CandleSeriesModel, visualCandle: VisualCandle): void;
+    points: VisualSeriesPoint[][], model: DataSeriesModel, hitTestDrawerConfig: HTSeriesDrawerConfig): void;
+    drawCandle(ctx: CanvasRenderingContext2D, hitTestDrawerConfig: HTSeriesDrawerConfig, candleSeries: CandleSeriesModel, visualCandle: VisualCandle): void;
     private drawCandlesWicks;
     private drawCandleBorder;
 }

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

@@ -34,12 +34,12 @@ export class CandleDrawer {
     /**
      * You can pass two-dimension array to divide series into multiple parts
      */
-    points, model, drawerConfig) {
+    points, model, hitTestDrawerConfig) {
         if (model instanceof CandleSeriesModel) {
             // @ts-ignore
             const visualCandles = flat(points);
             // TODO FIXME draw called 3-4 times on single candle update even if multichart is off
-            setLineWidth(ctx, this.config.candleLineWidth, model, drawerConfig, this.config.candleLineWidth);
+            setLineWidth(ctx, this.config.candleLineWidth, model, hitTestDrawerConfig, this.config.candleLineWidth);
             avoidAntialiasing(ctx, () => {
                 this.pixelLength = 1 / dpr;
                 this.halfLineWidthCU = ctx.lineWidth / 2;
@@ -47,20 +47,20 @@ export class CandleDrawer {
                 for (const visualCandle of visualCandles) {
                     const { candleTheme, activeCandleTheme } = model.colors;
                     if (candleTheme && activeCandleTheme) {
-                        this.drawCandle(ctx, drawerConfig, model, visualCandle);
+                        this.drawCandle(ctx, hitTestDrawerConfig, model, visualCandle);
                     }
                 }
             });
         }
     }
-    drawCandle(ctx, drawerConfig, candleSeries, visualCandle) {
+    drawCandle(ctx, hitTestDrawerConfig, candleSeries, visualCandle) {
         const { candleTheme, activeCandleTheme } = candleSeries.colors;
         const direction = visualCandle.name;
         const currentCandleTheme = visualCandle.isActive ? activeCandleTheme : candleTheme;
         const isHollow = visualCandle.isHollow;
         // choose candle filling color
-        if (drawerConfig.singleColor) {
-            ctx.fillStyle = drawerConfig.singleColor;
+        if (hitTestDrawerConfig.color) {
+            ctx.fillStyle = hitTestDrawerConfig.color;
         }
         else if (isHollow) {
             ctx.fillStyle = currentCandleTheme[`${direction}WickColor`];
@@ -78,8 +78,8 @@ export class CandleDrawer {
         const wickColor = direction === 'none' ? candleColor : currentCandleTheme[`${direction}WickColor`];
         ctx.fillStyle = candleColor;
         // wick style, borders are drawn after the wicks, so style for borders will be changed in drawBorder method
-        if (drawerConfig.singleColor) {
-            ctx.strokeStyle = drawerConfig.singleColor;
+        if (hitTestDrawerConfig.color) {
+            ctx.strokeStyle = hitTestDrawerConfig.color;
         }
         else {
             ctx.strokeStyle = wickColor;
@@ -116,7 +116,7 @@ export class CandleDrawer {
                 ctx.lineTo(baseX + offset, bodyEnd);
                 ctx.stroke();
             }
-            this.drawCandleBorder(ctx, drawerConfig, currentCandleTheme, visualCandle, baseX + this.halfLineWidthCU, bodyStart + this.halfLineWidthCU, width - this.lineWidthCU, bodyH - this.lineWidthCU);
+            this.drawCandleBorder(ctx, hitTestDrawerConfig, currentCandleTheme, visualCandle, baseX + this.halfLineWidthCU, bodyStart + this.halfLineWidthCU, width - this.lineWidthCU, bodyH - this.lineWidthCU);
         }
         else {
             // add paddings if exist
@@ -129,14 +129,18 @@ export class CandleDrawer {
             const paddingBaseX = baseX + paddingWidthOffset;
             const paddingWidth = width - paddingWidthOffset * 2;
             if (!isHollow) {
-                if (drawerConfig.singleColor) {
-                    ctx.fillStyle = drawerConfig.singleColor;
+                if (hitTestDrawerConfig.color) {
+                    ctx.fillStyle = hitTestDrawerConfig.color;
                 }
-                ctx.fillRect(paddingBaseX, bodyStart, paddingWidth, bodyH);
+                const bodyWidth = hitTestDrawerConfig.hoverWidth ? width + paddingWidthOffset : paddingWidth;
+                const bodyHeight = hitTestDrawerConfig.hoverWidth
+                    ? bodyH + hitTestDrawerConfig.hoverWidth + paddingWidthOffset
+                    : bodyH;
+                ctx.fillRect(paddingBaseX, bodyStart, bodyWidth, bodyHeight);
             }
             // choose border color around candle and draw candle
             if (showCandleBorder) {
-                this.drawCandleBorder(ctx, drawerConfig, currentCandleTheme, visualCandle, paddingBaseX + this.halfLineWidthCU, bodyStart + this.halfLineWidthCU, paddingWidth - this.lineWidthCU, bodyH - this.lineWidthCU);
+                this.drawCandleBorder(ctx, hitTestDrawerConfig, currentCandleTheme, visualCandle, paddingBaseX + this.halfLineWidthCU, bodyStart + this.halfLineWidthCU, paddingWidth - this.lineWidthCU, bodyH - this.lineWidthCU);
             }
         }
     }
@@ -153,9 +157,9 @@ export class CandleDrawer {
             ctx.stroke();
         }
     }
-    drawCandleBorder(ctx, drawerConfig, candleTheme, visualCandle, x, y, w, h) {
-        if (drawerConfig.singleColor) {
-            ctx.strokeStyle = drawerConfig.singleColor;
+    drawCandleBorder(ctx, hitTestDrawerConfig, candleTheme, visualCandle, x, y, w, h) {
+        if (hitTestDrawerConfig.color) {
+            ctx.strokeStyle = hitTestDrawerConfig.color;
         }
         else {
             const direction = visualCandle.name;

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

@@ -5,9 +5,9 @@
  */
 import { ChartConfigComponentsHistogram } 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 HistogramDrawer implements SeriesDrawer {
     private config;
     constructor(config: ChartConfigComponentsHistogram);
-    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/histogram.drawer.js

@@ -9,7 +9,7 @@ export class HistogramDrawer {
     constructor(config) {
         this.config = config;
     }
-    draw(ctx, points, model, drawerConfig) {
+    draw(ctx, points, model, hitTestDrawerConfig) {
         if (model instanceof CandleSeriesModel) {
             // @ts-ignore
             const visualCandles = points.flat();
@@ -23,8 +23,8 @@ export class HistogramDrawer {
                 if (histogramColors === undefined) {
                     return;
                 }
-                if (drawerConfig.singleColor) {
-                    ctx.fillStyle = drawerConfig.singleColor;
+                if (hitTestDrawerConfig.color) {
+                    ctx.fillStyle = hitTestDrawerConfig.color;
                 }
                 else {
                     ctx.fillStyle = histogramColors[`${direction}Bright`];
@@ -36,8 +36,8 @@ export class HistogramDrawer {
                 ctx.fillRect(baseX, closeY, width, capHeight);
                 // the bar itself
                 const gradient = ctx.createLinearGradient(0, closeY + capHeight, 0, bottomY);
-                if (drawerConfig.singleColor) {
-                    ctx.fillStyle = drawerConfig.singleColor;
+                if (hitTestDrawerConfig.color) {
+                    ctx.fillStyle = hitTestDrawerConfig.color;
                 }
                 else {
                     gradient.addColorStop(0, histogramColors[`${direction}Cap`]);

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

@@ -4,10 +4,10 @@
  * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 import { ChartConfigComponentsChart } from '../../chart.config';
-import { ChartDrawerConfig, SeriesDrawer } from '../data-series.drawer';
+import { HTSeriesDrawerConfig, SeriesDrawer } from '../data-series.drawer';
 import { DataSeriesModel, VisualSeriesPoint } from '../../model/data-series.model';
 export declare class LineDrawer implements SeriesDrawer {
     private config;
     constructor(config: ChartConfigComponentsChart);
-    draw(ctx: CanvasRenderingContext2D, points: VisualSeriesPoint[][], candleSeries: DataSeriesModel, drawerConfig: ChartDrawerConfig): void;
+    draw(ctx: CanvasRenderingContext2D, points: VisualSeriesPoint[][], candleSeries: DataSeriesModel, hitTestDrawerConfig: HTSeriesDrawerConfig): void;
 }

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

@@ -10,23 +10,23 @@ export class LineDrawer {
     constructor(config) {
         this.config = config;
     }
-    draw(ctx, points, candleSeries, drawerConfig) {
+    draw(ctx, points, candleSeries, hitTestDrawerConfig) {
         if (candleSeries instanceof CandleSeriesModel) {
             // @ts-ignore
             const visualCandles = flat(points);
             // TODO rework, make sure drawing is precise
-            setLineWidth(ctx, this.config.lineWidth, candleSeries, drawerConfig, this.config.selectedWidth);
+            setLineWidth(ctx, this.config.lineWidth, candleSeries, hitTestDrawerConfig, this.config.selectedWidth);
             const lineTheme = candleSeries.colors.lineTheme;
             // make style changes outside loop to improve performance
             ctx.lineCap = 'round';
-            if (drawerConfig.singleColor) {
-                ctx.strokeStyle = drawerConfig.singleColor;
+            if (hitTestDrawerConfig.color) {
+                ctx.strokeStyle = hitTestDrawerConfig.color;
             }
             for (let i = 1; i < visualCandles.length; i++) {
                 const prev = visualCandles[i - 1];
                 const vc = visualCandles[i];
                 const direction = vc.name;
-                if (!drawerConfig.singleColor) {
+                if (!hitTestDrawerConfig.color) {
                     ctx.strokeStyle = lineTheme[`${direction}Color`];
                 }
                 const prevX = candleSeries.view.toX(prev.centerUnit);