@devexperts/dxcharts-lite 2.7.0 → 2.7.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;
 }

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

package/dist/chart/drawers/chart-type-drawers/scatter-plot.drawer.d.ts

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

@@ -9,14 +9,15 @@ export class ScatterPlotDrawer {
     constructor(config) {
         this.config = config;
     }
-    draw(ctx, points, model, drawerConfig) {
+    draw(ctx, points, model, hitTestDrawerConfig) {
         var _a;
-        ctx.fillStyle = (_a = drawerConfig.singleColor) !== null && _a !== void 0 ? _a : this.config.mainColor;
+        const radius = hitTestDrawerConfig.hoverWidth ? hitTestDrawerConfig.hoverWidth / 2 : SCATTER_PLOT_RADIUS;
+        ctx.fillStyle = (_a = hitTestDrawerConfig.color) !== null && _a !== void 0 ? _a : this.config.mainColor;
         for (const visualCandle of flat(points)) {
             ctx.beginPath();
             const lineX = model.view.toX(visualCandle.centerUnit);
             const closeY = model.view.toY(visualCandle.close);
-            ctx.arc(lineX, closeY, SCATTER_PLOT_RADIUS, 0, Math.PI * 2, true);
+            ctx.arc(lineX, closeY, radius, 0, Math.PI * 2, true);
             ctx.fill();
         }
     }

package/dist/chart/drawers/data-series-drawers/candle-series-wrapper.d.ts

@@ -6,7 +6,7 @@
 import { BarType, FullChartConfig } from '../../chart.config';
 import { BoundsProvider } from '../../model/bounds.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 const candleTypesList: BarType[];
 /**
  * A decorator for drawers, that draw something depending on visual candles
@@ -16,7 +16,7 @@ export declare class CandleSeriesWrapper implements SeriesDrawer {
     private config;
     private chartBounds;
     constructor(drawer: SeriesDrawer, config: FullChartConfig, chartBounds: BoundsProvider);
-    draw(ctx: CanvasRenderingContext2D, allPoints: VisualSeriesPoint[][], model: DataSeriesModel, config: ChartDrawerConfig): void;
+    draw(ctx: CanvasRenderingContext2D, allPoints: VisualSeriesPoint[][], model: DataSeriesModel, hitTestDrawerConfig: HTSeriesDrawerConfig): void;
     private beforeDraw;
     private isChartTypeAllowed;
     private afterDraw;

package/dist/chart/drawers/data-series-drawers/candle-series-wrapper.js

@@ -24,10 +24,10 @@ export class CandleSeriesWrapper {
         this.config = config;
         this.chartBounds = chartBounds;
     }
-    draw(ctx, allPoints, model, config) {
+    draw(ctx, allPoints, model, hitTestDrawerConfig) {
         if (this.isChartTypeAllowed()) {
             this.beforeDraw(ctx);
-            this.drawer.draw(ctx, allPoints, model, config);
+            this.drawer.draw(ctx, allPoints, model, hitTestDrawerConfig);
             this.afterDraw(ctx, model);
         }
     }

package/dist/chart/drawers/data-series-drawers/color-candle.drawer.d.ts

@@ -5,7 +5,7 @@
  */
 import { ChartModel } from '../../components/chart/chart.model';
 import { DataSeriesModel, VisualSeriesPoint } from '../../model/data-series.model';
-import { ChartDrawerConfig, SeriesDrawer } from '../data-series.drawer';
+import { HTSeriesDrawerConfig, SeriesDrawer } from '../data-series.drawer';
 /**
  * Some series have candles which are highlighted.
  * This drawer draws the candle box on top of original candles.
@@ -13,5 +13,5 @@ import { ChartDrawerConfig, SeriesDrawer } from '../data-series.drawer';
 export declare class ColorCandleDrawer implements SeriesDrawer {
     private chartModel;
     constructor(chartModel: ChartModel);
-    draw(ctx: CanvasRenderingContext2D, allPoints: VisualSeriesPoint[][], model: DataSeriesModel, drawerConfig: ChartDrawerConfig): void;
+    draw(ctx: CanvasRenderingContext2D, allPoints: VisualSeriesPoint[][], model: DataSeriesModel, hitTestDrawerConfig: HTSeriesDrawerConfig): void;
 }

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

@@ -5,7 +5,7 @@
  */
 import { unitToPixels } from '../../model/scaling/viewport.model';
 import { floorToDPR } from '../../utils/device/device-pixel-ratio.utils';
-import { round } from '../../utils/math.utils';
+import { floor } from '../../utils/math.utils';
 /**
  * Some series have candles which are highlighted.
  * This drawer draws the candle box on top of original candles.
@@ -14,13 +14,13 @@ export class ColorCandleDrawer {
     constructor(chartModel) {
         this.chartModel = chartModel;
     }
-    draw(ctx, allPoints, model, drawerConfig) {
+    draw(ctx, allPoints, model, hitTestDrawerConfig) {
         allPoints.forEach((points, idx) => {
             var _a;
             const config = model.getPaintConfig(idx);
-            ctx.fillStyle = (_a = drawerConfig.singleColor) !== null && _a !== void 0 ? _a : config.color;
+            ctx.fillStyle = (_a = hitTestDrawerConfig.color) !== null && _a !== void 0 ? _a : config.color;
             points.forEach(p => {
-                const visualCandle = this.chartModel.getVisualCandle(round(p.centerUnit));
+                const visualCandle = this.chartModel.getVisualCandle(floor(p.centerUnit));
                 const value = p.close;
                 if (visualCandle && value === 1) {
                     const zoomX = this.chartModel.scale.zoomX;

package/dist/chart/drawers/data-series-drawers/difference-cloud.drawer.d.ts

@@ -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 { DataSeriesModel, VisualSeriesPoint } from '../../model/data-series.model';
-import { ChartDrawerConfig, SeriesDrawer } from '../data-series.drawer';
+import { HTSeriesDrawerConfig, SeriesDrawer } from '../data-series.drawer';
 /**
  * Point used to draw difference type indicator (clouds) (e.g. Ichimoku indicator)
  */
@@ -13,7 +13,7 @@ export interface DifferencePoint {
 }
 export declare class DifferenceCloudDrawer implements SeriesDrawer {
     constructor();
-    draw(ctx: CanvasRenderingContext2D, allPoints: VisualSeriesPoint[][], model: DataSeriesModel, drawerConfig: ChartDrawerConfig): void;
+    draw(ctx: CanvasRenderingContext2D, allPoints: VisualSeriesPoint[][], model: DataSeriesModel, hitTestDrawerConfig: HTSeriesDrawerConfig): void;
     private drawLine;
     private drawDifference;
     private fillCloud;