@devexperts/dxcharts-lite 2.7.1 → 2.7.2

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;

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

@@ -9,14 +9,14 @@ import { firstOf, lastOf } from '../../utils/array.utils';
 import { toRGBA } from '../../utils/color.utils';
 export class DifferenceCloudDrawer {
     constructor() { }
-    draw(ctx, allPoints, model, drawerConfig) {
+    draw(ctx, allPoints, model, hitTestDrawerConfig) {
         if (model.config.visible) {
             // draw main line
             allPoints.forEach((points, idx) => {
                 var _a;
                 const config = model.getPaintConfig(idx);
-                setLineWidth(ctx, config.lineWidth, model, drawerConfig, config.hoveredLineWidth);
-                const lineColor = (_a = drawerConfig.singleColor) !== null && _a !== void 0 ? _a : config.color;
+                setLineWidth(ctx, config.lineWidth, model, hitTestDrawerConfig, config.hoveredLineWidth);
+                const lineColor = (_a = hitTestDrawerConfig.color) !== null && _a !== void 0 ? _a : config.color;
                 ctx.strokeStyle = lineColor;
                 this.drawLine(ctx, points, model.view);
             });
@@ -42,7 +42,7 @@ export class DifferenceCloudDrawer {
                         }
                         const curSeriesColor = mainSeries.getPaintConfig(idx).color;
                         const nextSeriesColor = linkedSeries.getPaintConfig(linkedSeriesIdx).color;
-                        this.drawDifference(ctx, curSeriesColor, nextSeriesColor, differencePoints, mainSeries, linkedSeries, drawerConfig);
+                        this.drawDifference(ctx, curSeriesColor, nextSeriesColor, differencePoints, mainSeries, linkedSeries, hitTestDrawerConfig);
                     });
                 }
             });
@@ -53,7 +53,7 @@ export class DifferenceCloudDrawer {
         buildLinePath(points, ctx, view);
         ctx.stroke();
     }
-    drawDifference(ctx, lineColor, nextLineColor, diffPoints, curSeries, nextSeries, drawerConfig) {
+    drawDifference(ctx, lineColor, nextLineColor, diffPoints, curSeries, nextSeries, hitTestDrawerConfig) {
         const [linePoints, nextLinePoints] = [[], []];
         diffPoints.forEach(points => {
             const [point, nextPoint] = points.diffPoints;
@@ -62,10 +62,10 @@ export class DifferenceCloudDrawer {
         });
         const curSeriesPoints = mapDataSeriesDiffPointsIntoPoints(linePoints, curSeries.view);
         const nextSeriesPoints = mapDataSeriesDiffPointsIntoPoints(nextLinePoints, nextSeries.view);
-        this.fillCloud(ctx, nextLineColor, curSeriesPoints, nextSeriesPoints, drawerConfig);
-        this.fillCloud(ctx, lineColor, nextSeriesPoints, curSeriesPoints, drawerConfig);
+        this.fillCloud(ctx, nextLineColor, curSeriesPoints, nextSeriesPoints, hitTestDrawerConfig);
+        this.fillCloud(ctx, lineColor, nextSeriesPoints, curSeriesPoints, hitTestDrawerConfig);
     }
-    fillCloud(ctx, color, linePoints, nextLinePoints, drawerConfig) {
+    fillCloud(ctx, color, linePoints, nextLinePoints, hitTestDrawerConfig) {
         var _a, _b, _c, _d;
         ctx.save();
         // clip above lowerLine
@@ -95,7 +95,7 @@ export class DifferenceCloudDrawer {
             ctx.lineTo(p.x, p.y);
         });
         ctx.closePath();
-        ctx.fillStyle = drawerConfig.singleColor ? drawerConfig.singleColor : toRGBA(color ? color : '#383838', 0.3);
+        ctx.fillStyle = hitTestDrawerConfig.color ? hitTestDrawerConfig.color : toRGBA(color ? color : '#383838', 0.3);
         ctx.fill();
         ctx.restore();
     }

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

@@ -4,8 +4,8 @@
  * 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';
 export declare class HistogramDrawer implements SeriesDrawer {
     constructor();
-    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/histogram.drawer.js

@@ -7,14 +7,14 @@ import { floor } from '../../utils/math.utils';
 import { setLineWidth } from '../data-series.drawer';
 export class HistogramDrawer {
     constructor() { }
-    draw(ctx, allPoints, model, drawerConfig) {
+    draw(ctx, allPoints, model, hitTestDrawerConfig) {
         const zero = model.view.toY(0);
         allPoints.forEach((points, idx) => {
             var _a;
             // odd width is crucial to draw histogram without antialiasing
             const config = model.getPaintConfig(idx);
-            setLineWidth(ctx, config.lineWidth, model, drawerConfig, config.hoveredLineWidth);
-            ctx.strokeStyle = (_a = drawerConfig.singleColor) !== null && _a !== void 0 ? _a : config.color;
+            setLineWidth(ctx, config.lineWidth, model, hitTestDrawerConfig, config.hoveredLineWidth);
+            ctx.strokeStyle = (_a = hitTestDrawerConfig.color) !== null && _a !== void 0 ? _a : config.color;
             ctx.beginPath();
             points.forEach(p => {
                 const x = model.view.toX(p.centerUnit);

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

@@ -4,9 +4,9 @@
  * 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';
 export declare class LinearDrawer implements SeriesDrawer {
     constructor();
-    draw(ctx: CanvasRenderingContext2D, allPoints: VisualSeriesPoint[][], model: DataSeriesModel, drawerConfig: ChartDrawerConfig): void;
+    draw(ctx: CanvasRenderingContext2D, allPoints: VisualSeriesPoint[][], model: DataSeriesModel, hitTestDrawerConfig: HTSeriesDrawerConfig): void;
     private drawLinePath;
 }

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

@@ -7,12 +7,12 @@ import { setLineWidth } from '../data-series.drawer';
 import { buildLinePath } from './data-series-drawers.utils';
 export class LinearDrawer {
     constructor() { }
-    draw(ctx, allPoints, model, drawerConfig) {
+    draw(ctx, allPoints, model, hitTestDrawerConfig) {
         allPoints.forEach((points, idx) => {
             var _a;
             const config = model.getPaintConfig(idx);
-            setLineWidth(ctx, config.lineWidth, model, drawerConfig, config.hoveredLineWidth);
-            ctx.strokeStyle = (_a = drawerConfig.singleColor) !== null && _a !== void 0 ? _a : config.color;
+            setLineWidth(ctx, config.lineWidth, model, hitTestDrawerConfig, config.hoveredLineWidth);
+            ctx.strokeStyle = (_a = hitTestDrawerConfig.color) !== null && _a !== void 0 ? _a : config.color;
             this.drawLinePath(ctx, points, model.view);
         });
     }

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

@@ -4,8 +4,8 @@
  * 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';
 export declare class PointsDrawer implements SeriesDrawer {
     constructor();
-    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/points.drawer.js

@@ -5,12 +5,12 @@
  */
 export class PointsDrawer {
     constructor() { }
-    draw(ctx, allPoints, model, drawerConfig) {
+    draw(ctx, allPoints, model, hitTestDrawerConfig) {
         allPoints.forEach((points, idx) => {
             var _a;
             const config = model.getPaintConfig(idx);
-            const radius = config.lineWidth;
-            ctx.fillStyle = (_a = drawerConfig.singleColor) !== null && _a !== void 0 ? _a : config.color;
+            const radius = hitTestDrawerConfig.hoverWidth ? hitTestDrawerConfig.hoverWidth / 2 : config.lineWidth;
+            ctx.fillStyle = (_a = hitTestDrawerConfig.color) !== null && _a !== void 0 ? _a : config.color;
             ctx.lineWidth = 1;
             points.forEach(p => {
                 ctx.beginPath();

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

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

@@ -8,12 +8,12 @@ export class TextDrawer {
     constructor(config) {
         this.config = config;
     }
-    draw(ctx, allPoints, model, drawerConfig) {
+    draw(ctx, allPoints, model, hitTestDrawerConfig) {
         ctx.save();
         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;
             const font = config.lineWidth + 'px ' + this.config.components.yAxis.fontFamily;
             ctx.font = font;
             points.forEach(p => {

package/dist/chart/drawers/data-series-drawers/trend-histogram.drawer.d.ts

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