scichart 2.2.2416 → 3.0.0-beta.224

package/Charting/ChartModifiers/ModifierMouseArgs.js

@@ -42,8 +42,9 @@ var ModifierMouseArgs = /** @class */ (function (_super) {
      * @param options optional parameters to configure the args
      */
     function ModifierMouseArgs(mousePoint, options) {
+        var _this = this;
         var _a;
-        var _this = _super.call(this) || this;
+        _this = _super.call(this) || this;
         _this.mousePoint = mousePoint;
         _this.button = options === null || options === void 0 ? void 0 : options.button;
         _this.mouseWheelDelta = (_a = options === null || options === void 0 ? void 0 : options.mouseWheelDelta) !== null && _a !== void 0 ? _a : 0;
@@ -120,7 +121,7 @@ var ModifierMouseArgs = /** @class */ (function (_super) {
      * @param masterViewport the master viewport or parent chart issuing mouse events
      * @param slaveViewport the slave viewport or child chart receiving mouse events
      */
-    ModifierMouseArgs.copy = function (args, modifierGroup, masterViewport, slaveViewport) {
+    ModifierMouseArgs.copy = function (args, modifierGroup, masterViewport, slaveViewport, masterData) {
         var mousePoint = args.mousePoint;
         if (masterViewport && slaveViewport) {
             var sourceX = args.mousePoint.x - masterViewport.x;
@@ -129,7 +130,16 @@ var ModifierMouseArgs = /** @class */ (function (_super) {
             var scaleY = slaveViewport.height / masterViewport.height;
             mousePoint = new Point_1.Point(slaveViewport.x + sourceX * scaleX, slaveViewport.y + sourceY * scaleY);
         }
-        return __assign(__assign({}, args), { isMaster: false, handled: false, modifierGroup: modifierGroup, mousePoint: mousePoint });
+        return __assign(__assign({}, args), { isMaster: false, masterData: masterData, handled: false, modifierGroup: modifierGroup, mousePoint: mousePoint });
+    };
+    ModifierMouseArgs.copyForSubChart = function (args, modifierGroup, masterViewport, slaveViewport, masterData) {
+        var mousePoint = args.mousePoint;
+        if (masterViewport && slaveViewport) {
+            var scaleX = slaveViewport.width / masterViewport.width;
+            var scaleY = slaveViewport.height / masterViewport.height;
+            mousePoint = new Point_1.Point((args.mousePoint.x - masterViewport.x) * scaleX + slaveViewport.x, (args.mousePoint.y - masterViewport.y) * scaleY + slaveViewport.y);
+        }
+        return __assign(__assign({}, args), { isMaster: false, masterData: masterData, handled: false, modifierGroup: modifierGroup, mousePoint: mousePoint });
     };
     return ModifierMouseArgs;
 }(ModifierArgsBase_1.ModifierArgsBase));

package/Charting/ChartModifiers/MouseWheelZoomModifier.d.ts

@@ -110,12 +110,12 @@ export declare class MouseWheelZoomModifier extends ChartModifierBase2D implemen
      * @param mousePoint The X,Y location of the mouse at the time of the zoom
      * @param wheelDelta the MouseWheel delta
      */
-    performZoom(mousePoint: Point, wheelDelta: number): void;
+    performZoom(mousePoint: Point, wheelDelta: number): boolean;
     /**
      * Performs a pan operation
      * @param wheelDelta the MouseWheel delta
      */
-    performPan(wheelDelta: number): void;
+    performPan(wheelDelta: number): boolean;
     /** @inheritDoc */
     includeXAxis(axis: AxisBase2D, isIncluded: boolean): void;
     /** @inheritDoc */

package/Charting/ChartModifiers/MouseWheelZoomModifier.js

@@ -18,6 +18,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MouseWheelZoomModifier = exports.EActionType = void 0;
 var ChartModifierType_1 = require("../../types/ChartModifierType");
 var XyDirection_1 = require("../../types/XyDirection");
+var ZoomState_1 = require("../../types/ZoomState");
 var includedAxis_1 = require("../../utils/includedAxis");
 var translate_1 = require("../../utils/translate");
 var AxisBase2D_1 = require("../Visuals/Axis/AxisBase2D");
@@ -58,8 +59,9 @@ var MouseWheelZoomModifier = /** @class */ (function (_super) {
      * @param options Optional parameters to configure the modifier via {@link IMouseWheelZoomModifierOptions}
      */
     function MouseWheelZoomModifier(options) {
+        var _this = this;
         var _a, _b, _c, _d, _e, _f, _g;
-        var _this = _super.call(this, options) || this;
+        _this = _super.call(this, options) || this;
         _this.type = ChartModifierType_1.EChart2DModifierType.MouseWheelZoom;
         /**
          * Whether the modifier applies when the mouse is over the area where series are drawn (ie not over the axes).  Default true.
@@ -108,12 +110,11 @@ var MouseWheelZoomModifier = /** @class */ (function (_super) {
         var zoomPoint = (0, translate_1.translateFromCanvasToSeriesViewRect)(args.mousePoint, this.parentSurface.seriesViewRect);
         if (zoomPoint && this.applyToSeriesViewRect) {
             if (this.actionType === EActionType.Zoom) {
-                this.performZoom(zoomPoint, args.mouseWheelDelta);
+                args.handled = this.performZoom(zoomPoint, args.mouseWheelDelta);
             }
             else if (this.actionType === EActionType.Pan) {
-                this.performPan(args.mouseWheelDelta);
+                args.handled = this.performPan(args.mouseWheelDelta);
             }
-            args.handled = true;
         }
         else if (this.applyToAxes) {
             var targetAxes = [];
@@ -142,6 +143,9 @@ var MouseWheelZoomModifier = /** @class */ (function (_super) {
                 }
             }
         }
+        if (args.handled) {
+            this.parentSurface.setZoomState(ZoomState_1.EZoomState.UserZooming);
+        }
     };
     /**
      * Performs the zoom operation around the mouse point
@@ -151,16 +155,20 @@ var MouseWheelZoomModifier = /** @class */ (function (_super) {
     MouseWheelZoomModifier.prototype.performZoom = function (mousePoint, wheelDelta) {
         var _this = this;
         var fraction = this.growFactor * wheelDelta;
+        var anyUpdated = false;
         if ([XyDirection_1.EXyDirection.XDirection, XyDirection_1.EXyDirection.XyDirection].includes(this.xyDirection)) {
             this.getIncludedXAxis().forEach(function (axis) {
                 _this.growBy(mousePoint, axis, fraction);
+                anyUpdated = true;
             });
         }
         if ([XyDirection_1.EXyDirection.YDirection, XyDirection_1.EXyDirection.XyDirection].includes(this.xyDirection)) {
             this.getIncludedYAxis().forEach(function (axis) {
                 _this.growBy(mousePoint, axis, fraction);
+                anyUpdated = true;
             });
         }
+        return anyUpdated;
     };
     /**
      * Performs a pan operation
@@ -168,11 +176,13 @@ var MouseWheelZoomModifier = /** @class */ (function (_super) {
      */
     MouseWheelZoomModifier.prototype.performPan = function (wheelDelta) {
         var _this = this;
+        var anyUpdated = false;
         if ([XyDirection_1.EXyDirection.XDirection, XyDirection_1.EXyDirection.XyDirection].includes(this.xyDirection)) {
             this.getIncludedXAxis().forEach(function (axis) {
                 var size = _this.getAxisSize(axis);
                 var pixels = wheelDelta * _this.growFactor * size;
                 axis.scroll(pixels, AxisBase2D_1.EClipMode.None);
+                anyUpdated = true;
             });
         }
         if ([XyDirection_1.EXyDirection.YDirection, XyDirection_1.EXyDirection.XyDirection].includes(this.xyDirection)) {
@@ -180,8 +190,10 @@ var MouseWheelZoomModifier = /** @class */ (function (_super) {
                 var size = _this.getAxisSize(axis);
                 var pixels = wheelDelta * _this.growFactor * size;
                 axis.scroll(pixels, AxisBase2D_1.EClipMode.None);
+                anyUpdated = true;
             });
         }
+        return anyUpdated;
     };
     /** @inheritDoc */
     MouseWheelZoomModifier.prototype.includeXAxis = function (axis, isIncluded) {

package/Charting/ChartModifiers/OverviewRangeSelectionModifier.d.ts

@@ -2,7 +2,7 @@ import { IGenericAnimation } from "../../Core/Animations/GenericAnimation";
 import { NumberRange } from "../../Core/NumberRange";
 import { Point } from "../../Core/Point";
 import { EChart2DModifierType } from "../../types/ChartModifierType";
-import { OverviewCustomResizableAnnotation } from "../Visuals/Annotations/OverviewCustomResizableAnnotation";
+import { ICustomResizableAnnotationOptions, OverviewCustomResizableAnnotation } from "../Visuals/Annotations/OverviewCustomResizableAnnotation";
 import { ChartModifierBase2D, IChartModifierBaseOptions } from "./ChartModifierBase2D";
 import { ModifierMouseArgs } from "./ModifierMouseArgs";
 /**
@@ -79,6 +79,7 @@ export declare class OverviewRangeSelectionModifier extends ChartModifierBase2D
      * Gets or sets the selected area ranges of the modifier
      */
     set selectedArea(value: NumberRange);
+    createAnnotation(options: ICustomResizableAnnotationOptions): OverviewCustomResizableAnnotation;
     protected updateSelectionAnnotation(): void;
     private xVisibleRangeChangeHandler;
 }

package/Charting/ChartModifiers/OverviewRangeSelectionModifier.js

@@ -57,8 +57,9 @@ var OverviewRangeSelectionModifier = /** @class */ (function (_super) {
      * @param options Optional parameters used to configure the modifier
      */
     function OverviewRangeSelectionModifier(options) {
+        var _this = this;
         var _a, _b;
-        var _this = _super.call(this, options) || this;
+        _this = _super.call(this, options) || this;
         _this.type = ChartModifierType_1.EChart2DModifierType.OverviewRangeSelection;
         _this.animationDuration = 1000;
         _this.animate = true;
@@ -198,6 +199,9 @@ var OverviewRangeSelectionModifier = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    OverviewRangeSelectionModifier.prototype.createAnnotation = function (options) {
+        return new OverviewCustomResizableAnnotation_1.OverviewCustomResizableAnnotation(options);
+    };
     OverviewRangeSelectionModifier.prototype.updateSelectionAnnotation = function () {
         var _this = this;
         var _a;
@@ -222,9 +226,9 @@ var OverviewRangeSelectionModifier = /** @class */ (function (_super) {
                 yCoordinateMode: AnnotationBase_1.ECoordinateMode.Relative,
                 resizeDirections: XyDirection_1.EXyDirection.XDirection
             };
-            var dragBox = new OverviewCustomResizableAnnotation_1.OverviewCustomResizableAnnotation(__assign(__assign({}, commonAnnotationProperties), { x1: this.selectedArea.min, x2: this.selectedArea.max, isEditable: true, svgString: defaultSelectionAnnotationSvgString, onDrag: onDrag }));
-            var annotationBeforeSelectedArea = new OverviewCustomResizableAnnotation_1.OverviewCustomResizableAnnotation(__assign(__assign({}, commonAnnotationProperties), { x1: xAxis.visibleRange.min, x2: this.selectedArea.min, svgString: defaultUnSelectedAnnotationSvgString }));
-            var annotationAfterSelectedArea = new OverviewCustomResizableAnnotation_1.OverviewCustomResizableAnnotation(__assign(__assign({}, commonAnnotationProperties), { x1: this.selectedArea.max, x2: xAxis.visibleRange.max, svgString: defaultUnSelectedAnnotationSvgString }));
+            var dragBox = this.createAnnotation(__assign(__assign({}, commonAnnotationProperties), { x1: this.selectedArea.min, x2: this.selectedArea.max, isEditable: true, svgString: defaultSelectionAnnotationSvgString, onDrag: onDrag }));
+            var annotationBeforeSelectedArea = this.createAnnotation(__assign(__assign({}, commonAnnotationProperties), { x1: xAxis.visibleRange.min, x2: this.selectedArea.min, svgString: defaultUnSelectedAnnotationSvgString }));
+            var annotationAfterSelectedArea = this.createAnnotation(__assign(__assign({}, commonAnnotationProperties), { x1: this.selectedArea.max, x2: xAxis.visibleRange.max, svgString: defaultUnSelectedAnnotationSvgString }));
             if (xAxis.isHorizontalAxis) {
                 dragBox.adornerSvgStringTemplate = horizontalAdornerSvgTemplate;
                 annotationBeforeSelectedArea.minWidth = 0;

package/Charting/ChartModifiers/PinchZoomModifier.js

@@ -44,8 +44,9 @@ var PinchZoomModifier = /** @class */ (function (_super) {
      * @param options Optional parameters used to configure the modifier
      */
     function PinchZoomModifier(options) {
+        var _this = this;
         var _a, _b;
-        var _this = _super.call(this, options) || this;
+        _this = _super.call(this, options) || this;
         _this.type = ChartModifierType_1.EChart2DModifierType.PinchZoom;
         /**
          * Defines the sensitivity of zooming in horizontal direction

package/Charting/ChartModifiers/RolloverModifier.d.ts

@@ -74,17 +74,37 @@ declare enum EMousePosition {
  * Optional parameters used to configure a {@link RolloverModifier} at construct time
  */
 export interface IRolloverModifierOptions extends IChartModifierBaseOptions {
+    /** Sets the color of the vertical rollover line as an html color code */
     rolloverLineStroke?: string;
+    /** Sets the thickness of the vertical rollover line */
     rolloverLineStrokeThickness?: number;
+    /** Gets or Sets the dash array of the vertical rollover line */
+    rolloverLineStrokeDashArray?: number[];
+    /** Gets or Sets whether to show the vertical rollover line. Default true */
     showRolloverLine?: boolean;
+    /** Sets the template for the legend */
     tooltipLegendTemplate?: TRolloverLegendSvgTemplate | string;
+    /** Sets the legend X offset */
     tooltipLegendOffsetX?: number;
+    /** Sets the legend Y offset */
     tooltipLegendOffsetY?: number;
+    /** Sets the tooltipDataTemplate, which allows to customize content for the tooltip */
     tooltipDataTemplate?: TRolloverTooltipDataTemplate | string;
+    /** Sets whether to show the tooltip. Default true */
     showTooltip?: boolean;
+    /** Sets if tooltips for multiple series are allowed to overlap.  Default false  */
     allowTooltipOverlapping?: boolean;
+    /**
+     * If True the {@link RolloverModifier} line snaps to
+     * the nearest data-point of the first visible renderable series
+     */
     snapToDataPoint?: boolean;
+    /** Sets the parent div element id for the Tooltip */
     placementDivId?: string;
+    /**
+     * If this is set greater than the default of zero, the toolip will only show values for points in this radius, rather than all points on the vertical line
+     */
+    hitTestRadius?: number;
 }
 /**
  * The RolloverModifier provides tooltip and cursor behavior on a 2D {@link SciChartSurface}
@@ -118,6 +138,10 @@ export declare class RolloverModifier extends ChartModifierBase2D implements IIn
      * the nearest data-point of the first visible renderable series
      */
     snapToDataPoint: boolean;
+    /**
+     * If this is set greater than the default of zero, the toolip will only show values for points in this radius, rather than all points on the vertical line
+     */
+    hitTestRadius: number;
     private readonly rolloverLineAnnotation;
     private readonly legendAnnotation;
     private mousePosition;
@@ -136,17 +160,33 @@ export declare class RolloverModifier extends ChartModifierBase2D implements IIn
      * @inheritDoc
      */
     applyTheme(themeProvider: IThemeProvider): void;
+    /** Gets or Sets the color of the vertical rollover line as an html color code */
     get rolloverLineStroke(): string;
+    /** Gets or Sets the color of the vertical rollover line as an html color code */
     set rolloverLineStroke(rolloverLineStroke: string);
+    /** Gets or Sets the thickness of the vertical rollover line */
     get rolloverLineStrokeThickness(): number;
+    /** Gets or Sets the thickness of the vertical rollover line */
     set rolloverLineStrokeThickness(rolloverLineStrokeThickness: number);
+    /** Gets or Sets the dash array of the vertical rollover line */
+    get rolloverLineStrokeDashArray(): number[];
+    /** Gets or Sets the dash array of the vertical rollover line */
+    set rolloverLineStrokeDashArray(rolloverLineStrokeDashArray: number[]);
+    /** Gets or Sets whether to show the vertical rollover line. Default true */
     get showRolloverLine(): boolean;
+    /** Gets or Sets whether to show the vertical rollover line. Default true */
     set showRolloverLine(showRolloverLine: boolean);
+    /** Gets or Sets the tooltipDataTemplate, which allows you to customize content for the tooltip */
     get tooltipDataTemplate(): TRolloverTooltipDataTemplate;
+    /** Gets or Sets the tooltipDataTemplate, which allows you to customize content for the tooltip */
     set tooltipDataTemplate(value: TRolloverTooltipDataTemplate);
+    /** Gets or Sets whether to show the tooltip. Default true */
     get showTooltip(): boolean;
+    /** Gets or Sets whether to show the tooltip. Default true */
     set showTooltip(value: boolean);
+    /** Gets or Sets if tooltips for multiple series are allowed to overlap.  Default false  */
     get allowTooltipOverlapping(): boolean;
+    /** Gets or Sets if tooltips for multiple series are allowed to overlap.  Default false  */
     set allowTooltipOverlapping(value: boolean);
     /**
      * @inheritDoc

package/Charting/ChartModifiers/RolloverModifier.js

@@ -72,8 +72,9 @@ var RolloverModifier = /** @class */ (function (_super) {
      * @param options Optional parameters {@link IRolloverModifierOptions} used to configure the modifier
      */
     function RolloverModifier(options) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-        var _this = _super.call(this, options) || this;
+        var _this = this;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+        _this = _super.call(this, options) || this;
         _this.type = ChartModifierType_1.EChart2DModifierType.Rollover;
         /**
          * Gets or sets the legend X offset
@@ -88,6 +89,10 @@ var RolloverModifier = /** @class */ (function (_super) {
          * the nearest data-point of the first visible renderable series
          */
         _this.snapToDataPoint = false;
+        /**
+         * If this is set greater than the default of zero, the toolip will only show values for points in this radius, rather than all points on the vertical line
+         */
+        _this.hitTestRadius = 0;
         _this.mousePosition = EMousePosition.OutOfCanvas;
         _this.showRolloverLineProperty = true;
         _this.showTooltipProperty = true;
@@ -98,6 +103,7 @@ var RolloverModifier = /** @class */ (function (_super) {
         _this.rolloverLineAnnotation = new LineAnnotation_1.LineAnnotation({
             xCoordinateMode: AnnotationBase_1.ECoordinateMode.Pixel,
             yCoordinateMode: AnnotationBase_1.ECoordinateMode.Pixel,
+            strokeDashArray: options === null || options === void 0 ? void 0 : options.rolloverLineStrokeDashArray,
             strokeThickness: (_b = options === null || options === void 0 ? void 0 : options.rolloverLineStrokeThickness) !== null && _b !== void 0 ? _b : 2,
             stroke: (_c = options === null || options === void 0 ? void 0 : options.rolloverLineStroke) !== null && _c !== void 0 ? _c : SciChartSurfaceBase_1.SciChartSurfaceBase.DEFAULT_THEME.cursorLineBrush,
             isHidden: true,
@@ -135,6 +141,7 @@ var RolloverModifier = /** @class */ (function (_super) {
         });
         _this.allowTooltipOverlappingProperty = (_k = options === null || options === void 0 ? void 0 : options.allowTooltipOverlapping) !== null && _k !== void 0 ? _k : _this.allowTooltipOverlappingProperty;
         _this.snapToDataPoint = (_l = options === null || options === void 0 ? void 0 : options.snapToDataPoint) !== null && _l !== void 0 ? _l : _this.snapToDataPoint;
+        _this.hitTestRadius = (_m = options === null || options === void 0 ? void 0 : options.hitTestRadius) !== null && _m !== void 0 ? _m : _this.hitTestRadius;
         return _this;
     }
     /**
@@ -149,9 +156,11 @@ var RolloverModifier = /** @class */ (function (_super) {
         }
     };
     Object.defineProperty(RolloverModifier.prototype, "rolloverLineStroke", {
+        /** Gets or Sets the color of the vertical rollover line as an html color code */
         get: function () {
             return this.rolloverLineAnnotation.stroke;
         },
+        /** Gets or Sets the color of the vertical rollover line as an html color code */
         set: function (rolloverLineStroke) {
             this.rolloverLineAnnotation.stroke = rolloverLineStroke;
             this.notifyPropertyChanged(constants_1.PROPERTY.STROKE);
@@ -160,9 +169,11 @@ var RolloverModifier = /** @class */ (function (_super) {
         configurable: true
     });
     Object.defineProperty(RolloverModifier.prototype, "rolloverLineStrokeThickness", {
+        /** Gets or Sets the thickness of the vertical rollover line */
         get: function () {
             return this.rolloverLineAnnotation.strokeThickness;
         },
+        /** Gets or Sets the thickness of the vertical rollover line */
         set: function (rolloverLineStrokeThickness) {
             this.rolloverLineAnnotation.strokeThickness = rolloverLineStrokeThickness;
             this.notifyPropertyChanged(constants_1.PROPERTY.STROKE_THICKNESS);
@@ -170,10 +181,25 @@ var RolloverModifier = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(RolloverModifier.prototype, "rolloverLineStrokeDashArray", {
+        /** Gets or Sets the dash array of the vertical rollover line */
+        get: function () {
+            return this.rolloverLineAnnotation.strokeDashArray;
+        },
+        /** Gets or Sets the dash array of the vertical rollover line */
+        set: function (rolloverLineStrokeDashArray) {
+            this.rolloverLineAnnotation.strokeDashArray = rolloverLineStrokeDashArray;
+            this.notifyPropertyChanged(constants_1.PROPERTY.STROKE_DASH_ARRAY);
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(RolloverModifier.prototype, "showRolloverLine", {
+        /** Gets or Sets whether to show the vertical rollover line. Default true */
         get: function () {
             return this.showRolloverLineProperty;
         },
+        /** Gets or Sets whether to show the vertical rollover line. Default true */
         set: function (showRolloverLine) {
             this.showRolloverLineProperty = showRolloverLine;
             this.notifyPropertyChanged(constants_1.PROPERTY.SHOW_ROLLOVER_LINE);
@@ -182,9 +208,11 @@ var RolloverModifier = /** @class */ (function (_super) {
         configurable: true
     });
     Object.defineProperty(RolloverModifier.prototype, "tooltipDataTemplate", {
+        /** Gets or Sets the tooltipDataTemplate, which allows you to customize content for the tooltip */
         get: function () {
             return this.tooltipDataTemplateProperty;
         },
+        /** Gets or Sets the tooltipDataTemplate, which allows you to customize content for the tooltip */
         set: function (value) {
             this.tooltipDataTemplateProperty = value;
             this.notifyPropertyChanged(constants_1.PROPERTY.TOOLTIP_DATA_TEMPLATE);
@@ -193,9 +221,11 @@ var RolloverModifier = /** @class */ (function (_super) {
         configurable: true
     });
     Object.defineProperty(RolloverModifier.prototype, "showTooltip", {
+        /** Gets or Sets whether to show the tooltip. Default true */
         get: function () {
             return this.showTooltipProperty;
         },
+        /** Gets or Sets whether to show the tooltip. Default true */
         set: function (value) {
             this.showTooltipProperty = value;
             this.notifyPropertyChanged(constants_1.PROPERTY.SHOW_TOOLTIP);
@@ -204,9 +234,11 @@ var RolloverModifier = /** @class */ (function (_super) {
         configurable: true
     });
     Object.defineProperty(RolloverModifier.prototype, "allowTooltipOverlapping", {
+        /** Gets or Sets if tooltips for multiple series are allowed to overlap.  Default false  */
         get: function () {
             return this.allowTooltipOverlappingProperty;
         },
+        /** Gets or Sets if tooltips for multiple series are allowed to overlap.  Default false  */
         set: function (value) {
             this.allowTooltipOverlappingProperty = value;
             this.notifyPropertyChanged(constants_1.PROPERTY.ALLOW_TOOLTIP_OVERLAPPING);
@@ -346,7 +378,12 @@ var RolloverModifier = /** @class */ (function (_super) {
         if (!mousePoint) {
             return undefined;
         }
-        return rs.hitTestProvider.hitTestXSlice(mousePoint.x, mousePoint.y);
+        if (this.hitTestRadius <= 0) {
+            return rs.hitTestProvider.hitTestXSlice(mousePoint.x, mousePoint.y);
+        }
+        else {
+            return rs.hitTestProvider.hitTestDataPoint(mousePoint.x, mousePoint.y, this.hitTestRadius);
+        }
     };
     /**
      * Returns current mouse position

package/Charting/ChartModifiers/RubberBandXyZoomModifier.js

@@ -52,8 +52,9 @@ var RubberBandXyZoomModifier = /** @class */ (function (_super) {
      * @param options Optional parameters used to configure the modifier
      */
     function RubberBandXyZoomModifier(options) {
+        var _this = this;
         var _a, _b, _c, _d, _e, _f;
-        var _this = _super.call(this, options) || this;
+        _this = _super.call(this, options) || this;
         _this.type = ChartModifierType_1.EChart2DModifierType.RubberBandXYZoom;
         /**
          * When true, the Zoom operations are animated. See also {@link animationDuration} and {@link easingFunction}

package/Charting/ChartModifiers/SeriesSelectionModifier.js

@@ -33,8 +33,9 @@ var SeriesSelectionModifier = /** @class */ (function (_super) {
      * @param options Optional parameters used to configure the modifier
      */
     function SeriesSelectionModifier(options) {
+        var _this = this;
         var _a, _b;
-        var _this = _super.call(this, options) || this;
+        _this = _super.call(this, options) || this;
         _this.type = ChartModifierType_1.EChart2DModifierType.SeriesSelection;
         /**
          * An array of currently selected series which can be observed by subscribing to the {@link selectionChanged} {@link EventHandler | event handler}

package/Charting/ChartModifiers/XAxisDragModifier.d.ts

@@ -30,10 +30,10 @@ export interface IXAxisDragModifierOptions extends IChartModifierBaseOptions {
 export declare class XAxisDragModifier extends ChartModifierBase2D {
     readonly type = EChart2DModifierType.XAxisDrag;
     dragMode: EDragMode;
+    protected isClickedOverXAxis: boolean;
     private pointFrom;
     private activeAxes;
     private initialVisibleRanges;
-    private isClickedOverXAxis;
     private isVerticalChart;
     private cursorStyle;
     private includedSeriesMapProperty;

package/Charting/ChartModifiers/XAxisDragModifier.js

@@ -43,8 +43,9 @@ var XAxisDragModifier = /** @class */ (function (_super) {
      * @param options optional parameters to pass to the XAxisDragModifier to configure it upon construction
      */
     function XAxisDragModifier(options) {
+        var _this = this;
         var _a, _b;
-        var _this = _super.call(this, options) || this;
+        _this = _super.call(this, options) || this;
         _this.type = ChartModifierType_1.EChart2DModifierType.XAxisDrag;
         _this.dragMode = DragMode_1.EDragMode.Scaling;
         _this.isClickedOverXAxis = false;

package/Charting/ChartModifiers/YAxisDragModifier.d.ts

@@ -31,10 +31,10 @@ export interface IYAxisDragModifierOptions extends IChartModifierBaseOptions {
 export declare class YAxisDragModifier extends ChartModifierBase2D implements IIncludeAxis {
     readonly type = EChart2DModifierType.YAxisDrag;
     dragMode: EDragMode;
+    protected isClickedOverYAxis: boolean;
     private pointFrom;
     private activeAxes;
     private initialVisibleRanges;
-    private isClickedOverYAxis;
     private isVerticalChart;
     private cursorStyle;
     private includedSeriesMapProperty;

package/Charting/ChartModifiers/YAxisDragModifier.js

@@ -43,8 +43,9 @@ var YAxisDragModifier = /** @class */ (function (_super) {
      * @param options optional parameters to pass to the XAxisDragModifier to configure it upon construction
      */
     function YAxisDragModifier(options) {
+        var _this = this;
         var _a, _b;
-        var _this = _super.call(this, options) || this;
+        _this = _super.call(this, options) || this;
         _this.type = ChartModifierType_1.EChart2DModifierType.YAxisDrag;
         _this.dragMode = DragMode_1.EDragMode.Scaling;
         _this.isClickedOverYAxis = false;

package/Charting/ChartModifiers/ZoomExtentsModifier.js

@@ -43,8 +43,9 @@ var ChartModifierBase2D_1 = require("./ChartModifierBase2D");
 var ZoomExtentsModifier = /** @class */ (function (_super) {
     __extends(ZoomExtentsModifier, _super);
     function ZoomExtentsModifier(options) {
+        var _this = this;
         var _a, _b, _c, _d, _e;
-        var _this = _super.call(this, options) || this;
+        _this = _super.call(this, options) || this;
         _this.type = ChartModifierType_1.EChart2DModifierType.ZoomExtents;
         /**
          * When true, the Zoom operations are animated. See also {@link animationDuration} and {@link easingFunction}

package/Charting/ChartModifiers/ZoomPanModifier.js

@@ -43,8 +43,9 @@ var ZoomPanModifier = /** @class */ (function (_super) {
      * @param options optional parameters to pass to the ZoomPanModifier to configure it upon construction
      */
     function ZoomPanModifier(options) {
+        var _this = this;
         var _a, _b, _c, _d;
-        var _this = _super.call(this, options) || this;
+        _this = _super.call(this, options) || this;
         _this.type = ChartModifierType_1.EChart2DModifierType.ZoomPan;
         _this.includedXAxisMap = new Map();
         _this.includedYAxisMap = new Map();

package/Charting/ChartModifiers/constants.d.ts

@@ -17,7 +17,9 @@ export declare enum PROPERTY {
     SELECTION_STROKE_THICKNESS = "SELECTION_STROKE_THICKNESS",
     STROKE = "STROKE",
     STROKE_THICKNESS = "STROKE_THICKNESS",
+    STROKE_DASH_ARRAY = "STROKE_DASH_ARRAY",
     TOOLTIP_DATA_TEMPLATE = "TOOLTIP_DATA_TEMPLATE",
     X_AXIS_ID = "X_AXIS_ID",
-    Y_AXIS_ID = "Y_AXIS_ID"
+    Y_AXIS_ID = "Y_AXIS_ID",
+    PLACEMENT_DIV_ID = "PLACEMENT_DIV_ID"
 }

package/Charting/ChartModifiers/constants.js

@@ -21,7 +21,9 @@ var PROPERTY;
     PROPERTY["SELECTION_STROKE_THICKNESS"] = "SELECTION_STROKE_THICKNESS";
     PROPERTY["STROKE"] = "STROKE";
     PROPERTY["STROKE_THICKNESS"] = "STROKE_THICKNESS";
+    PROPERTY["STROKE_DASH_ARRAY"] = "STROKE_DASH_ARRAY";
     PROPERTY["TOOLTIP_DATA_TEMPLATE"] = "TOOLTIP_DATA_TEMPLATE";
     PROPERTY["X_AXIS_ID"] = "X_AXIS_ID";
     PROPERTY["Y_AXIS_ID"] = "Y_AXIS_ID";
+    PROPERTY["PLACEMENT_DIV_ID"] = "PLACEMENT_DIV_ID";
 })(PROPERTY = exports.PROPERTY || (exports.PROPERTY = {}));

package/Charting/Drawing/BatchRenderContext.d.ts

@@ -0,0 +1,6 @@
+import { WebGlRenderContext2D } from "./WebGlRenderContext2D";
+export declare class BatchRenderContext extends WebGlRenderContext2D {
+    doDraw: boolean;
+    drawLayers(): void;
+    endFonts(force?: boolean): void;
+}

package/Charting/Drawing/BatchRenderContext.js

@@ -0,0 +1,40 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BatchRenderContext = void 0;
+var WebGlRenderContext2D_1 = require("./WebGlRenderContext2D");
+var BatchRenderContext = /** @class */ (function (_super) {
+    __extends(BatchRenderContext, _super);
+    function BatchRenderContext() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.doDraw = false;
+        return _this;
+    }
+    BatchRenderContext.prototype.drawLayers = function () {
+        if (this.doDraw) {
+            _super.prototype.drawLayers.call(this);
+        }
+    };
+    BatchRenderContext.prototype.endFonts = function (force) {
+        if (force === void 0) { force = false; }
+        if (this.doDraw || force) {
+            _super.prototype.endFonts.call(this);
+        }
+    };
+    return BatchRenderContext;
+}(WebGlRenderContext2D_1.WebGlRenderContext2D));
+exports.BatchRenderContext = BatchRenderContext;

package/Charting/Drawing/RenderSurface.d.ts

@@ -7,8 +7,9 @@ import { WebGlRenderContext2D } from "./WebGlRenderContext2D";
 export declare class RenderSurface {
     handleDraw: () => void;
     viewportSize: Size;
+    readonly canvasId: string;
     private webAssemblyContext;
-    constructor(webAssemblyContext: TSciChart, size: Size);
+    constructor(webAssemblyContext: TSciChart, size: Size, canvasId: string);
     getRenderContext(): WebGlRenderContext2D;
     invalidateElement(canvasId: string): void;
     onRenderTimeElapsed(): void;

package/Charting/Drawing/RenderSurface.js

@@ -8,12 +8,13 @@ var WebGlRenderContext2D_1 = require("./WebGlRenderContext2D");
  * @ignore
  */
 var RenderSurface = /** @class */ (function () {
-    function RenderSurface(webAssemblyContext, size) {
+    function RenderSurface(webAssemblyContext, size, canvasId) {
         this.webAssemblyContext = webAssemblyContext;
         this.viewportSize = size;
+        this.canvasId = canvasId;
     }
     RenderSurface.prototype.getRenderContext = function () {
-        return new WebGlRenderContext2D_1.WebGlRenderContext2D(this.webAssemblyContext, this.viewportSize);
+        return new WebGlRenderContext2D_1.WebGlRenderContext2D(this.webAssemblyContext, this.viewportSize, this.canvasId);
     };
     // Step_2: Something is changed and it calls invalidateElement
     RenderSurface.prototype.invalidateElement = function (canvasId) {