scichart 3.0.0-beta.224 → 3.0.0-beta.235

package/Charting/ChartModifiers/CursorModifier.d.ts

@@ -175,11 +175,11 @@ export declare class CursorModifier extends ChartModifierBase2D implements IIncl
     protected xLineAnnotation: LineAnnotation;
     protected yLineAnnotation: LineAnnotation;
     protected tooltipAnnotation: CursorTooltipSvgAnnotation;
-    private mousePosition;
-    private crosshairStrokeProperty;
-    private tooltipDataTemplateProperty?;
-    private includedSeriesMap;
-    private placementDivIdProperty;
+    protected mousePosition: EMousePosition;
+    protected crosshairStrokeProperty: string;
+    protected tooltipDataTemplateProperty?: TCursorTooltipDataTemplate;
+    protected includedSeriesMap: Map<IRenderableSeries, boolean>;
+    protected placementDivIdProperty: string;
     /**
      * Creates an instance of the CursorModifier
      *
@@ -269,16 +269,16 @@ export declare class CursorModifier extends ChartModifierBase2D implements IIncl
         options: Required<Omit<IChartModifierBaseOptions, never>>;
     };
     protected notifyPropertyChanged(propertyName: string): void;
-    private getSeriesInfos;
-    private update;
-    private newLineAnnotation;
+    protected getSeriesInfos(): SeriesInfo[];
+    protected update(): void;
+    protected newLineAnnotation(axisLabelFill: string, axisLabelStroke: string): LineAnnotation;
     /**
      * Test if the series is included or excluded, by default it is included
      * @param series
      * @private
      */
-    private testIsIncludedSeries;
-    private isVerticalChart;
+    protected testIsIncludedSeries(series: IRenderableSeries): boolean;
+    protected isVerticalChart(): boolean;
 }
 /** Calculate the width and height of the tooltip based on the content array */
 export declare const calcTooltipSize: (valuesWithLabels: string[], fontSize?: number) => {

package/Charting/ChartModifiers/OverviewRangeSelectionModifier.d.ts

@@ -47,10 +47,6 @@ export declare class OverviewRangeSelectionModifier extends ChartModifierBase2D
      * @inheritDoc
      */
     onAttach(): void;
-    /**
-     * @inheritDoc
-     */
-    onDetach(): void;
     /**
      * @inheritDoc
      */
@@ -81,5 +77,4 @@ export declare class OverviewRangeSelectionModifier extends ChartModifierBase2D
     set selectedArea(value: NumberRange);
     createAnnotation(options: ICustomResizableAnnotationOptions): OverviewCustomResizableAnnotation;
     protected updateSelectionAnnotation(): void;
-    private xVisibleRangeChangeHandler;
 }

package/Charting/ChartModifiers/OverviewRangeSelectionModifier.js

@@ -67,7 +67,6 @@ var OverviewRangeSelectionModifier = /** @class */ (function (_super) {
         _this.onSelectedAreaChanged = options === null || options === void 0 ? void 0 : options.onSelectedAreaChanged;
         _this.xAxisId = (_a = options === null || options === void 0 ? void 0 : options.xAxisId) !== null && _a !== void 0 ? _a : _this.xAxisId;
         _this.yAxisId = (_b = options === null || options === void 0 ? void 0 : options.yAxisId) !== null && _b !== void 0 ? _b : _this.yAxisId;
-        _this.xVisibleRangeChangeHandler = _this.xVisibleRangeChangeHandler.bind(_this);
         return _this;
     }
     /**
@@ -77,13 +76,6 @@ var OverviewRangeSelectionModifier = /** @class */ (function (_super) {
         _super.prototype.onAttach.call(this);
         this.updateSelectionAnnotation();
     };
-    /**
-     * @inheritDoc
-     */
-    OverviewRangeSelectionModifier.prototype.onDetach = function () {
-        var xAxis = this.parentSurface.getXAxisById(this.xAxisId);
-        xAxis.visibleRangeChanged.unsubscribe(this.xVisibleRangeChangeHandler);
-    };
     /**
      * @inheritDoc
      */
@@ -251,25 +243,32 @@ var OverviewRangeSelectionModifier = /** @class */ (function (_super) {
             this.rangeSelectionAnnotationProperty = dragBox;
             this.annotationBeforeSelectedAreaProperty = annotationBeforeSelectedArea;
             this.annotationAfterSelectedAreaProperty = annotationAfterSelectedArea;
-            xAxis.visibleRangeChanged.subscribe(this.xVisibleRangeChangeHandler);
         }
     };
-    OverviewRangeSelectionModifier.prototype.xVisibleRangeChangeHandler = function (args) {
-        this.annotationBeforeSelectedAreaProperty.x1 = args.visibleRange.min;
-        this.annotationAfterSelectedAreaProperty.x2 = args.visibleRange.max;
-    };
     return OverviewRangeSelectionModifier;
 }(ChartModifierBase2D_1.ChartModifierBase2D));
 exports.OverviewRangeSelectionModifier = OverviewRangeSelectionModifier;
 /** @ignore */
 var horizontalAdornerSvgTemplate = function (x1, y1, x2, y2) {
     var colorLine = "black";
-    return "<svg xmlns=\"http://www.w3.org/2000/svg\">\n        <line x1=\"".concat(x1, "\" y1=\"").concat(y1, "\" x2=\"").concat(x2, "\" y2=\"").concat(y1, "\" stroke=\"").concat(colorLine, "\" stroke-width=\"1\" />\n        <line x1=\"").concat(x2, "\" y1=\"").concat(y1, "\" x2=\"").concat(x2, "\" y2=\"").concat(y2, "\" stroke=\"").concat(colorLine, "\" stroke-width=\"1\" />\n        <line x1=\"").concat(x1, "\" y1=\"").concat(y2, "\" x2=\"").concat(x2, "\" y2=\"").concat(y2, "\" stroke=\"").concat(colorLine, "\" stroke-width=\"1\" />\n        <line x1=\"").concat(x1, "\" y1=\"").concat(y1, "\" x2=\"").concat(x1, "\" y2=\"").concat(y2, "\" stroke=\"").concat(colorLine, "\" stroke-width=\"1\" />\n        <rect x=\"").concat(x1 - 3, "\" y=\"30%\" width=\"7\" height=\"40%\" fill=\"#2e2e2e\" rx=\"5\" stroke=\"").concat(colorLine, "\" />\n        <rect x=\"").concat(x2 - 3, "\" y=\"30%\" width=\"7\" height=\"40%\" fill=\"#2e2e2e\" rx=\"5\" stroke=\"").concat(colorLine, "\" />\n        </svg>");
+    var gridpHandleFill = "#2e2e2e";
+    var gripHandleHalfWidth = 3;
+    var gripHandleHeight = "40%";
+    var gripHandleYCoord = "30%";
+    var width = x2 - x1;
+    var height = y2 - y1;
+    return "<svg x=\"".concat(x1, "\" y=\"").concat(y1, "\" width=\"").concat(width, "px\" height=\"").concat(height, "px\" viewBox=\"0 0 ").concat(width, " ").concat(height, "\" overflow=\"visible\" xmlns=\"http://www.w3.org/2000/svg\">\n        <line x1=\"0\" y1=\"0\" x2=\"").concat(width, "\" y2=\"0\" stroke=\"").concat(colorLine, "\" stroke-width=\"1\" />\n        <line x1=\"0\" y1=\"").concat(height, "\" x2=\"").concat(width, "\" y2=\"").concat(height, "\" stroke=\"").concat(colorLine, "\" stroke-width=\"1\" />\n        <line x1=\"0\" y1=\"0\" x2=\"0\" y2=\"").concat(height, "\" stroke=\"").concat(colorLine, "\" stroke-width=\"1\" />\n        <line x1=\"").concat(width, "\" y1=\"0\" x2=\"").concat(width, "\" y2=\"").concat(height, "\" stroke=\"").concat(colorLine, "\" stroke-width=\"1\" />\n        <rect x=\"").concat(0 - gripHandleHalfWidth, "\" y=\"").concat(gripHandleYCoord, "\" width=\"7\" height=\"").concat(gripHandleHeight, "\" fill=\"").concat(gridpHandleFill, "\" rx=\"5\" stroke=\"").concat(colorLine, "\" />\n        <rect x=\"").concat(width - gripHandleHalfWidth, "\" y=\"").concat(gripHandleYCoord, "\" width=\"7\" height=\"").concat(gripHandleHeight, "\" fill=\"").concat(gridpHandleFill, "\" rx=\"5\" stroke=\"").concat(colorLine, "\" />\n        </svg>");
 };
 /** @ignore */
 var verticalAdornerSvgTemplate = function (x1, y1, x2, y2) {
     var colorLine = "black";
-    return "<svg xmlns=\"http://www.w3.org/2000/svg\">\n        <line x1=\"".concat(x1, "\" y1=\"").concat(y1, "\" x2=\"").concat(x2, "\" y2=\"").concat(y1, "\" stroke=\"").concat(colorLine, "\" stroke-width=\"1\" />\n        <line x1=\"").concat(x2, "\" y1=\"").concat(y1, "\" x2=\"").concat(x2, "\" y2=\"").concat(y2, "\" stroke=\"").concat(colorLine, "\" stroke-width=\"1\" />\n        <line x1=\"").concat(x1, "\" y1=\"").concat(y2, "\" x2=\"").concat(x2, "\" y2=\"").concat(y2, "\" stroke=\"").concat(colorLine, "\" stroke-width=\"1\" />\n        <line x1=\"").concat(x1, "\" y1=\"").concat(y1, "\" x2=\"").concat(x1, "\" y2=\"").concat(y2, "\" stroke=\"").concat(colorLine, "\" stroke-width=\"1\" />\n        <rect x=\"30%\" y=\"").concat(y1 - 3, "\" width=\"40%\" height=\"7\" fill=\"#2e2e2e\" rx=\"5\" stroke=\"").concat(colorLine, "\" />\n        <rect x=\"30%\" y=\"").concat(y2 - 3, "\" width=\"40%\" height=\"7\" fill=\"#2e2e2e\" rx=\"5\" stroke=\"").concat(colorLine, "\" />\n        </svg>");
+    var gridpHandleFill = "#2e2e2e";
+    var gripHandleWidth = "40%";
+    var gripHandleHalfHeight = 3;
+    var gripHandleXCoord = "30%";
+    var width = x2 - x1;
+    var height = y2 - y1;
+    return "<svg x=\"".concat(x1, "\" y=\"").concat(y1, "\" width=\"").concat(width, "px\" height=\"").concat(height, "px\" viewBox=\"0 0 ").concat(width, " ").concat(height, "\" overflow=\"visible\" xmlns=\"http://www.w3.org/2000/svg\">\n        <line x1=\"0\" y1=\"0\" x2=\"").concat(width, "\" y2=\"0\" stroke=\"").concat(colorLine, "\" stroke-width=\"1\" />\n        <line x1=\"0\" y1=\"").concat(height, "\" x2=\"").concat(width, "\" y2=\"").concat(height, "\" stroke=\"").concat(colorLine, "\" stroke-width=\"1\" />\n        <line x1=\"0\" y1=\"0\" x2=\"0\" y2=\"").concat(height, "\" stroke=\"").concat(colorLine, "\" stroke-width=\"1\" />\n        <line x1=\"").concat(width, "\" y1=\"0\" x2=\"").concat(width, "\" y2=\"").concat(height, "\" stroke=\"").concat(colorLine, "\" stroke-width=\"1\" />\n        <rect x=\"").concat(gripHandleXCoord, "\" y=\"").concat(0 - gripHandleHalfHeight, "\" width=\"").concat(gripHandleWidth, "\" height=\"7\" fill=\"").concat(gridpHandleFill, "\" rx=\"5\" stroke=\"").concat(colorLine, "\" />\n        <rect x=\"").concat(gripHandleXCoord, "\" y=\"").concat(height - gripHandleHalfHeight, "\" width=\"").concat(gripHandleWidth, "\" height=\"7\" fill=\"").concat(gridpHandleFill, "\" rx=\"5\" stroke=\"").concat(colorLine, "\" />\n        </svg>");
 };
 var defaultSelectionAnnotationSvgString = "<svg width=\"50\" height=\"50\" preserveAspectRatio=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <rect width=\"100%\" height=\"100%\" style=\"fill:transparent\">\n    </rect>\n</svg>";
 var defaultUnSelectedAnnotationSvgString = "<svg width=\"50\" height=\"50\" preserveAspectRatio=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <rect width=\"100%\" height=\"100%\" style=\"fill:black\">\n        </rect>\n    </svg>";

package/Charting/ChartModifiers/RolloverModifier.d.ts

@@ -2,12 +2,13 @@ import { IIncludeSeries } from "../../Core/IIncludeSeries";
 import { Point } from "../../Core/Point";
 import { Rect } from "../../Core/Rect";
 import { EChart2DModifierType } from "../../types/ChartModifierType";
+import { EMousePosition } from "../../types/MousePosition";
 import { SeriesInfo } from "../Model/ChartData/SeriesInfo";
 import { IThemeProvider } from "../Themes/IThemeProvider";
 import { RolloverLegendSvgAnnotation } from "../Visuals/Annotations/RolloverLegendSvgAnnotation";
 import { HitTestInfo } from "../Visuals/RenderableSeries/HitTest/HitTestInfo";
 import { IRenderableSeries } from "../Visuals/RenderableSeries/IRenderableSeries";
-import { RolloverModifierRenderableSeriesProps } from "../Visuals/RenderableSeries/RolloverModifier/RolloverModifierRenderableSeriesProps";
+import { IRolloverModifier, RolloverModifierRenderableSeriesProps } from "../Visuals/RenderableSeries/RolloverModifier/RolloverModifierRenderableSeriesProps";
 import { ChartModifierBase2D, IChartModifierBaseOptions } from "./ChartModifierBase2D";
 import { ModifierMouseArgs } from "./ModifierMouseArgs";
 export declare type TRolloverLegendSvgTemplate = (seriesInfos: SeriesInfo[], svgAnnotation: RolloverLegendSvgAnnotation) => string;
@@ -52,24 +53,6 @@ export declare type TTooltipProps = {
     width: number;
     seriesInfo: SeriesInfo;
 };
-/**
- * @ignore
- * Defines the MousePosition enum constants, used by the {@link RolloverModifier}
- */
-declare enum EMousePosition {
-    /**
-     * The mouse position is outside the main canvas
-     */
-    OutOfCanvas = "OutOfCanvas",
-    /**
-     * The mouse position is in the Axis area
-     */
-    AxisArea = "AxisArea",
-    /**
-     * The mouse position is in the Series area
-     */
-    SeriesArea = "SeriesArea"
-}
 /**
  * Optional parameters used to configure a {@link RolloverModifier} at construct time
  */
@@ -119,7 +102,7 @@ export interface IRolloverModifierOptions extends IChartModifierBaseOptions {
  * sciChartSurface.chartModifiers.add(new RolloverModifier());
  * ```
  */
-export declare class RolloverModifier extends ChartModifierBase2D implements IIncludeSeries {
+export declare class RolloverModifier extends ChartModifierBase2D implements IIncludeSeries, IRolloverModifier {
     readonly type = EChart2DModifierType.Rollover;
     /**
      * Gets or sets the template for the legend
@@ -300,4 +283,3 @@ export declare const calcTooltipProps: (index: number, rs: IRenderableSeries, ro
  * @param isVerticalChart
  */
 export declare const calcTooltipPositions: (tooltipArray: TTooltipProps[], allowTooltipOverlapping: boolean, spacing: number, seriesViewRect: Rect, pixelRatio: number, isVerticalChart?: boolean) => TTooltipProps[];
-export {};

package/Charting/ChartModifiers/RolloverModifier.js

@@ -19,6 +19,7 @@ exports.calcTooltipPositions = exports.calcTooltipProps = exports.RolloverModifi
 var classFactory_1 = require("../../Builder/classFactory");
 var BaseType_1 = require("../../types/BaseType");
 var ChartModifierType_1 = require("../../types/ChartModifierType");
+var MousePosition_1 = require("../../types/MousePosition");
 var SeriesType_1 = require("../../types/SeriesType");
 var tooltip_1 = require("../../utils/tooltip");
 var translate_1 = require("../../utils/translate");
@@ -31,25 +32,6 @@ var SciChartSurfaceBase_1 = require("../Visuals/SciChartSurfaceBase");
 var DpiHelper_1 = require("../Visuals/TextureManager/DpiHelper");
 var ChartModifierBase2D_1 = require("./ChartModifierBase2D");
 var constants_1 = require("./constants");
-/**
- * @ignore
- * Defines the MousePosition enum constants, used by the {@link RolloverModifier}
- */
-var EMousePosition;
-(function (EMousePosition) {
-    /**
-     * The mouse position is outside the main canvas
-     */
-    EMousePosition["OutOfCanvas"] = "OutOfCanvas";
-    /**
-     * The mouse position is in the Axis area
-     */
-    EMousePosition["AxisArea"] = "AxisArea";
-    /**
-     * The mouse position is in the Series area
-     */
-    EMousePosition["SeriesArea"] = "SeriesArea";
-})(EMousePosition || (EMousePosition = {}));
 /** @ignore */
 var TOOLTIP_SPACING = 4;
 /**
@@ -93,7 +75,7 @@ var RolloverModifier = /** @class */ (function (_super) {
          * 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.mousePosition = MousePosition_1.EMousePosition.OutOfCanvas;
         _this.showRolloverLineProperty = true;
         _this.showTooltipProperty = true;
         _this.allowTooltipOverlappingProperty = false;
@@ -290,15 +272,15 @@ var RolloverModifier = /** @class */ (function (_super) {
         _super.prototype.modifierMouseMove.call(this, args);
         var translatedMousePoint;
         if (!this.mousePoint) {
-            this.mousePosition = EMousePosition.OutOfCanvas;
+            this.mousePosition = MousePosition_1.EMousePosition.OutOfCanvas;
         }
         else {
             translatedMousePoint = (0, translate_1.translateFromCanvasToSeriesViewRect)(this.mousePoint, this.parentSurface.seriesViewRect);
             if (!translatedMousePoint) {
-                this.mousePosition = EMousePosition.AxisArea;
+                this.mousePosition = MousePosition_1.EMousePosition.AxisArea;
             }
             else {
-                this.mousePosition = EMousePosition.SeriesArea;
+                this.mousePosition = MousePosition_1.EMousePosition.SeriesArea;
             }
         }
         this.update();
@@ -308,7 +290,7 @@ var RolloverModifier = /** @class */ (function (_super) {
      */
     RolloverModifier.prototype.modifierMouseLeave = function (args) {
         _super.prototype.modifierMouseLeave.call(this, args);
-        this.mousePosition = EMousePosition.OutOfCanvas;
+        this.mousePosition = MousePosition_1.EMousePosition.OutOfCanvas;
         this.update();
     };
     /**
@@ -477,7 +459,7 @@ var RolloverModifier = /** @class */ (function (_super) {
         }
     };
     RolloverModifier.prototype.updateLine = function () {
-        if (this.mousePosition !== EMousePosition.SeriesArea) {
+        if (this.mousePosition !== MousePosition_1.EMousePosition.SeriesArea) {
             this.rolloverLineAnnotation.isHidden = true;
             return;
         }
@@ -551,7 +533,7 @@ var RolloverModifier = /** @class */ (function (_super) {
                 rs.rolloverModifierProps1.tooltip.y1 = undefined;
             }
         });
-        if (this.mousePosition !== EMousePosition.SeriesArea) {
+        if (this.mousePosition !== MousePosition_1.EMousePosition.SeriesArea) {
             rsList.forEach(function (rs) {
                 rs.rolloverModifierProps.marker.resumeInvalidate();
                 rs.rolloverModifierProps.tooltip.resumeInvalidate();

package/Charting/ChartModifiers/RubberBandXyZoomModifier.d.ts

@@ -5,6 +5,7 @@ import { EChart2DModifierType } from "../../types/ChartModifierType";
 import { EXyDirection } from "../../types/XyDirection";
 import { IThemeProvider } from "../Themes/IThemeProvider";
 import { AxisBase2D } from "../Visuals/Axis/AxisBase2D";
+import { RubberBandSvgRect } from "../Visuals/RubberBandSvgRect/RubberBandSvgRect";
 import { ChartModifierBase2D, IChartModifierBaseOptions } from "./ChartModifierBase2D";
 import { ModifierMouseArgs } from "./ModifierMouseArgs";
 /**
@@ -53,6 +54,7 @@ export interface IRubberBandXyZoomModifierOptions extends IChartModifierBaseOpti
  * {@link RubberBandXyZoomModifier.animationDuration} and {@link RubberBandXyZoomModifier.easingFunction} properties.
  */
 export declare class RubberBandXyZoomModifier extends ChartModifierBase2D {
+    static readonly MIN_DRAG_SENSITIVITY = 5;
     readonly type = EChart2DModifierType.RubberBandXYZoom;
     /**
      * When true, the Zoom operations are animated. See also {@link animationDuration} and {@link easingFunction}
@@ -66,10 +68,10 @@ export declare class RubberBandXyZoomModifier extends ChartModifierBase2D {
      * Defines the easing function for animation. See {@link TEasingFn} for a range of functions
      */
     easingFunction: TEasingFn;
-    private rubberBandRect;
-    private pointFrom;
-    private pointTo;
-    private isClicked;
+    protected rubberBandRect: RubberBandSvgRect;
+    protected pointFrom: Point;
+    protected pointTo: Point;
+    protected isClicked: boolean;
     private fillProperty;
     private strokeProperty;
     private strokeThicknessProperty;
@@ -145,13 +147,14 @@ export declare class RubberBandXyZoomModifier extends ChartModifierBase2D {
      */
     protected performZoomOnAxis(axis: AxisBase2D, fromCoord: number, toCoord: number): void;
     protected notifyPropertyChanged(propertyName: string): void;
-    private calculateDraggedDistance;
-    private updateRubberBandRect;
+    protected calculateDraggedDistance(): number;
+    protected updateRubberBandRect(): void;
 }
 /**
  * Given the starting and end mouse-point, computes a rectangle to perform zoom over. Takes into account the xyDirection
  * @param pointFrom the starting point of the mouse
  * @param pointTo the end point of the mouse
  * @param xyDirection the XyDirection
+ * @param viewportRect
  */
 export declare function getRubberBandRect(pointFrom: Point, pointTo: Point, xyDirection: EXyDirection, viewportRect: Rect): Rect;

package/Charting/ChartModifiers/RubberBandXyZoomModifier.js

@@ -27,8 +27,6 @@ var translate_1 = require("../../utils/translate");
 var RubberBandSvgRect_1 = require("../Visuals/RubberBandSvgRect/RubberBandSvgRect");
 var ChartModifierBase2D_1 = require("./ChartModifierBase2D");
 var constants_1 = require("./constants");
-/** @ignore */
-var MIN_DRAG_SENSITIVITY = 5;
 /**
  * The RubberBandXyZoomModifier provides drag-rectangle to zoom behavior on a 2D {@link SciChartSurface}
  * within SciChart - High Performance {@link https://www.scichart.com/javascript-chart-features | JavaScript Charts}
@@ -134,12 +132,13 @@ var RubberBandXyZoomModifier = /** @class */ (function (_super) {
         var seriesViewRect = this.parentSurface.seriesViewRect;
         if (this.isClicked) {
             this.pointTo = (0, translate_1.translateFromCanvasToSeriesViewRect)(Rect_1.Rect.clipPointToRect(args.mousePoint, seriesViewRect), seriesViewRect);
+            var coordSvgTranslation = this.parentSurface.getCoordSvgTranslation();
             var _a = getRubberBandRect(this.pointFrom, this.pointTo, this.xyDirection, this.parentSurface.seriesViewRect), x = _a.x, right = _a.right, y = _a.y, bottom = _a.bottom;
             this.rubberBandRect.isHidden = false;
-            this.rubberBandRect.x1 = (0, translate_1.translateToNotScaled)(x);
-            this.rubberBandRect.x2 = (0, translate_1.translateToNotScaled)(right);
-            this.rubberBandRect.y1 = (0, translate_1.translateToNotScaled)(y);
-            this.rubberBandRect.y2 = (0, translate_1.translateToNotScaled)(bottom);
+            this.rubberBandRect.x1 = (0, translate_1.translateToNotScaled)(x + coordSvgTranslation.x);
+            this.rubberBandRect.x2 = (0, translate_1.translateToNotScaled)(right + coordSvgTranslation.x);
+            this.rubberBandRect.y1 = (0, translate_1.translateToNotScaled)(y + coordSvgTranslation.y);
+            this.rubberBandRect.y2 = (0, translate_1.translateToNotScaled)(bottom + coordSvgTranslation.y);
         }
     };
     /**
@@ -156,7 +155,7 @@ var RubberBandXyZoomModifier = /** @class */ (function (_super) {
             var _a = getRubberBandRect(this.pointFrom, this.pointTo, this.xyDirection, this.parentSurface.seriesViewRect), x = _a.x, right = _a.right, y = _a.y, bottom = _a.bottom;
             this.isClicked = false;
             this.rubberBandRect.isHidden = true;
-            if (this.calculateDraggedDistance() > MIN_DRAG_SENSITIVITY) {
+            if (this.calculateDraggedDistance() > RubberBandXyZoomModifier.MIN_DRAG_SENSITIVITY) {
                 this.performZoom(new Point_1.Point(x, y), new Point_1.Point(right, bottom));
             }
         }
@@ -271,6 +270,7 @@ var RubberBandXyZoomModifier = /** @class */ (function (_super) {
             this.rubberBandRect = new RubberBandSvgRect_1.RubberBandSvgRect(this.parentSurface.domSvgContainer, this.fill, this.stroke, this.strokeThickness);
         }
     };
+    RubberBandXyZoomModifier.MIN_DRAG_SENSITIVITY = 5;
     return RubberBandXyZoomModifier;
 }(ChartModifierBase2D_1.ChartModifierBase2D));
 exports.RubberBandXyZoomModifier = RubberBandXyZoomModifier;
@@ -279,6 +279,7 @@ exports.RubberBandXyZoomModifier = RubberBandXyZoomModifier;
  * @param pointFrom the starting point of the mouse
  * @param pointTo the end point of the mouse
  * @param xyDirection the XyDirection
+ * @param viewportRect
  */
 function getRubberBandRect(pointFrom, pointTo, xyDirection, viewportRect) {
     var x1 = pointTo.x <= pointFrom.x ? pointTo.x : pointFrom.x;

package/Charting/Services/SciChartRenderer.js

@@ -129,6 +129,7 @@ var SciChartRenderer = /** @class */ (function () {
         // Step 3 layout
         var seriesViewRect = this.sciChartSurface.layoutManager.layoutChart(renderContext.viewportSize);
         var viewportSvgRect = this.getViewportRect(renderContext.viewportSize, seriesViewRect);
+        this.sciChartSurface.setCoordSvgTranslation(seriesViewRect.x - viewportSvgRect.x, seriesViewRect.y - viewportSvgRect.y);
         this.updateSvgCanvasSize(viewportSvgRect);
         // Step 4 prepare render data
         var _a = this.prepareAxesRenderData(), xAxesById = _a.xAxesById, yAxesById = _a.yAxesById;
@@ -176,7 +177,7 @@ var SciChartRenderer = /** @class */ (function () {
                 el.type === IAnnotation_1.EAnnotationType.SVGTextAnnotation ||
                 el.type === IAnnotation_1.EAnnotationType.SVGCustomAnnotation;
         });
-        this.drawSvgAnnotations(svgAnnotations, xAxesById, yAxesById, seriesViewRect, viewportSvgRect);
+        this.drawSvgAnnotations(svgAnnotations, xAxesById, yAxesById, this.sciChartSurface.getCoordSvgTranslation());
         // Update watermark
         this.updateWatermark(renderContext, seriesViewRect);
         // Step 10 Call OnParentSurfaceRendered
@@ -214,9 +215,7 @@ var SciChartRenderer = /** @class */ (function () {
             }
         });
     };
-    SciChartRenderer.prototype.drawSvgAnnotations = function (annotations, xAxisById, yAxisById, seriesViewRect, viewportRect) {
-        var xCoordSvgTranslation = (seriesViewRect.x - viewportRect.x) / DpiHelper_1.DpiHelper.PIXEL_RATIO;
-        var yCoordSvgTranslation = (seriesViewRect.y - viewportRect.y) / DpiHelper_1.DpiHelper.PIXEL_RATIO;
+    SciChartRenderer.prototype.drawSvgAnnotations = function (annotations, xAxisById, yAxisById, coordSvgTranslation) {
         annotations.forEach(function (a) {
             var xAxis = xAxisById.item(a.xAxisId) || xAxisById.values[0];
             var yAxis = yAxisById.item(a.yAxisId) || yAxisById.values[0];
@@ -229,7 +228,7 @@ var SciChartRenderer = /** @class */ (function () {
                 }
                 a.showWarning = false;
             }
-            a.update(xAxis.getCurrentCoordinateCalculator(), yAxis.getCurrentCoordinateCalculator(), xCoordSvgTranslation, yCoordSvgTranslation);
+            a.update(xAxis.getCurrentCoordinateCalculator(), yAxis.getCurrentCoordinateCalculator(), coordSvgTranslation.x / DpiHelper_1.DpiHelper.PIXEL_RATIO, coordSvgTranslation.y / DpiHelper_1.DpiHelper.PIXEL_RATIO);
         });
     };
     SciChartRenderer.prototype.validate = function () {
@@ -240,6 +239,18 @@ var SciChartRenderer = /** @class */ (function () {
         // Is XAxes and YAxes collection null or empty
         // is XAxis a CategoryAxis and renderableseries is null or empty
         // Do all renderableseries have dataseries
+        var errors = [];
+        if (this.sciChartSurface.renderableSeries.size() > 0) {
+            if (this.sciChartSurface.xAxes.size() === 0) {
+                errors.push("Chart must have at least one X axis");
+            }
+            if (this.sciChartSurface.yAxes.size() === 0) {
+                errors.push("Chart must have at least one Y axis");
+            }
+        }
+        if (errors.length > 0) {
+            throw new Error(errors.join("\n"));
+        }
     };
     SciChartRenderer.prototype.updateSvgCanvasSize = function (seriesViewRect) {
         // Convert seriesViewRect back to device pixels

package/Charting/Visuals/Annotations/NativeTextAnnotation.js

@@ -303,7 +303,7 @@ var NativeTextAnnotation = /** @class */ (function (_super) {
         var y1 = this.getY1Coordinate(xCalc, yCalc);
         var style = {
             fontFamily: this.fontFamily,
-            fontSize: this.fontSize
+            fontSize: Math.round(this.fontSize * DpiHelper_1.DpiHelper.PIXEL_RATIO)
         };
         var colorNum = (0, parseColor_1.parseColorToUIntArgb)(this.textColor);
         colorNum = (0, colorUtil_1.uintArgbColorOverrideOpacity)(colorNum, this.opacity);

package/Charting/Visuals/Annotations/RolloverTooltipSvgAnnotation.js

@@ -230,16 +230,16 @@ var defaultTooltipDataTemplate = function (seriesInfo, tooltipTitle, tooltipLabe
 };
 /** @ignore */
 var defaultTooltipTemplate = function (id, seriesInfo, rolloverTooltip) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     var valuesBlock = "";
     var tooltipProps = rolloverTooltip.tooltipProps;
     var tooltipTitle = tooltipProps.tooltipTitle, tooltipColor = tooltipProps.tooltipColor, tooltipTextColor = tooltipProps.tooltipTextColor, tooltipLabelX = tooltipProps.tooltipLabelX, tooltipLabelY = tooltipProps.tooltipLabelY;
-    var tooltipDataTemplate = (_b = (_a = rolloverTooltip.tooltipProps.tooltipDataTemplate) !== null && _a !== void 0 ? _a : rolloverTooltip.tooltipProps.rolloverModifier.tooltipDataTemplate) !== null && _b !== void 0 ? _b : defaultTooltipDataTemplate;
+    var tooltipDataTemplate = (_c = (_a = rolloverTooltip.tooltipProps.tooltipDataTemplate) !== null && _a !== void 0 ? _a : (_b = rolloverTooltip.tooltipProps.rolloverModifier) === null || _b === void 0 ? void 0 : _b.tooltipDataTemplate) !== null && _c !== void 0 ? _c : defaultTooltipDataTemplate;
     var valuesWithLabels = tooltipDataTemplate(seriesInfo, tooltipTitle, tooltipLabelX, tooltipLabelY);
     // tooltip width
-    var width = (_c = tooltipProps.width) !== null && _c !== void 0 ? _c : calcTooltipWidth(valuesWithLabels.reduce(function (prev, cur) { return (cur.length > prev ? cur.length : prev); }, 0));
+    var width = (_d = tooltipProps.width) !== null && _d !== void 0 ? _d : calcTooltipWidth(valuesWithLabels.reduce(function (prev, cur) { return (cur.length > prev ? cur.length : prev); }, 0));
     // tooltip height
-    var height = (_d = tooltipProps.height) !== null && _d !== void 0 ? _d : calcTooltipHeight(valuesWithLabels.length);
+    var height = (_e = tooltipProps.height) !== null && _e !== void 0 ? _e : calcTooltipHeight(valuesWithLabels.length);
     rolloverTooltip.updateSize(width, height);
     valuesWithLabels.forEach(function (val, index) {
         valuesBlock += "<tspan x=\"8\" dy=\"1.2em\">".concat(val, "</tspan>");

package/Charting/Visuals/RenderableSeries/RolloverModifier/RolloverModifierRenderableSeriesProps.d.ts

@@ -1,9 +1,14 @@
-import { RolloverModifier, TRolloverTooltipDataTemplate } from "../../../ChartModifiers/RolloverModifier";
+import { TRolloverTooltipDataTemplate } from "../../../ChartModifiers/RolloverModifier";
 import { SeriesInfo } from "../../../Model/ChartData/SeriesInfo";
 import { RolloverMarkerSvgAnnotation } from "../../Annotations/RolloverMarkerSvgAnnotation";
 import { RolloverTooltipSvgAnnotation } from "../../Annotations/RolloverTooltipSvgAnnotation";
 import { IRenderableSeries } from "../IRenderableSeries";
+import { EMousePosition } from "../../../../types/MousePosition";
 export declare type TRolloverTooltipSvgTemplate = (id: string, seriesInfo: SeriesInfo, rolloverTooltip: RolloverTooltipSvgAnnotation) => string;
+export interface IRolloverModifier {
+    getMousePosition: () => EMousePosition;
+    tooltipDataTemplate: TRolloverTooltipDataTemplate;
+}
 export declare class RolloverModifierRenderableSeriesProps {
     tooltip: RolloverTooltipSvgAnnotation;
     marker: RolloverMarkerSvgAnnotation;
@@ -14,7 +19,7 @@ export declare class RolloverModifierRenderableSeriesProps {
     tooltipTemplate: TRolloverTooltipSvgTemplate;
     tooltipLegendOffsetX: number;
     tooltipLegendOffsetY: number;
-    rolloverModifier: RolloverModifier;
+    rolloverModifier: IRolloverModifier;
     private tooltipLegendTemplateProperty;
     private invalidateParentCallback;
     private showsRolloverProperty;

package/Charting/Visuals/SciChartOverview.d.ts

@@ -32,10 +32,10 @@ export declare class SciChartOverview implements IDeletable, IThemeable {
      * Creates a {@link SciChartOverview} and {@link TSciChart | WebAssembly Context} to occupy the div by element ID in your DOM.
      * @remarks This method is async and must be awaited
      * @param parentChart The {@link SciChartSurface} of the {@link SciChartOverview} will reside
-     * @param overviewRootElementId The Div Element ID where the {@link SciChartSurface} of the {@link SciChartOverview} will reside
+     * @param overviewRootElementId The Div Element ID or reference where the {@link SciChartSurface} of the {@link SciChartOverview} will reside
      * @param options Optional - Optional parameters for chart creation. See {@link IOverviewOptions for more details}
      */
-    static create(parentChart: SciChartSurface, overviewRootElementId: string, options?: IOverviewOptions): Promise<SciChartOverview>;
+    static create(parentChart: SciChartSurface, overviewRootElement?: string | HTMLDivElement, options?: IOverviewOptions): Promise<SciChartOverview>;
     private readonly overviewXAxisProperty;
     private readonly overviewYAxisProperty;
     private readonly rangeSelectionModifierProperty;

package/Charting/Visuals/SciChartOverview.js

@@ -79,15 +79,15 @@ var SciChartOverview = /** @class */ (function () {
      * Creates a {@link SciChartOverview} and {@link TSciChart | WebAssembly Context} to occupy the div by element ID in your DOM.
      * @remarks This method is async and must be awaited
      * @param parentChart The {@link SciChartSurface} of the {@link SciChartOverview} will reside
-     * @param overviewRootElementId The Div Element ID where the {@link SciChartSurface} of the {@link SciChartOverview} will reside
+     * @param overviewRootElementId The Div Element ID or reference where the {@link SciChartSurface} of the {@link SciChartOverview} will reside
      * @param options Optional - Optional parameters for chart creation. See {@link IOverviewOptions for more details}
      */
-    SciChartOverview.create = function (parentChart, overviewRootElementId, options) {
+    SciChartOverview.create = function (parentChart, overviewRootElement, options) {
         return __awaiter(this, void 0, void 0, function () {
             var _a, sciChartSurface, wasmContext, rangeSelectionModifier, xAxis, yAxis;
             return __generator(this, function (_b) {
                 switch (_b.label) {
-                    case 0: return [4 /*yield*/, createSciChartOverview(parentChart, overviewRootElementId, options)];
+                    case 0: return [4 /*yield*/, createSciChartOverview(parentChart, overviewRootElement, options)];
                     case 1:
                         _a = _b.sent(), sciChartSurface = _a.sciChartSurface, wasmContext = _a.wasmContext, rangeSelectionModifier = _a.rangeSelectionModifier, xAxis = _a.xAxis, yAxis = _a.yAxis;
                         return [2 /*return*/, new SciChartOverview(parentChart, sciChartSurface, wasmContext, rangeSelectionModifier, xAxis, yAxis)];
@@ -158,13 +158,13 @@ var SciChartOverview = /** @class */ (function () {
 }());
 exports.SciChartOverview = SciChartOverview;
 /** @ignore */
-var createSciChartOverview = function (originalSciChartSurface, overviewRootElementId, options) { return __awaiter(void 0, void 0, void 0, function () {
+var createSciChartOverview = function (originalSciChartSurface, overviewRootElement, options) { return __awaiter(void 0, void 0, void 0, function () {
     var _a, wasmContext, sciChartSurface, mainAxisId, secondaryAxisId, originalMainAxis, originalSecondaryAxis, originalXAxis, originalYAxis, xAxisOptions, yAxisOptions, xAxis, yAxis, mainOverviewAxis, defaultTransform, renderableSeries, rangeSelectionModifier;
     var _b;
     var _c, _d, _e, _f;
     return __generator(this, function (_g) {
         switch (_g.label) {
-            case 0: return [4 /*yield*/, SciChartSurface_1.SciChartSurface.create(overviewRootElementId, options)];
+            case 0: return [4 /*yield*/, SciChartSurface_1.SciChartSurface.create(overviewRootElement, options)];
             case 1:
                 _a = _g.sent(), wasmContext = _a.wasmContext, sciChartSurface = _a.sciChartSurface;
                 mainAxisId = (_c = options === null || options === void 0 ? void 0 : options.mainAxisId) !== null && _c !== void 0 ? _c : AxisBase2D_1.AxisBase2D.DEFAULT_AXIS_ID;
@@ -225,12 +225,13 @@ var createSciChartOverview = function (originalSciChartSurface, overviewRootElem
                 if ((options === null || options === void 0 ? void 0 : options.rangeSelectionAnnotationSvgString) !== undefined) {
                     rangeSelectionModifier.rangeSelectionAnnotation.svgString = options.rangeSelectionAnnotationSvgString;
                 }
+                xAxis.visibleRangeChanged.subscribe(function (_a) {
+                    var overviewVisibleRange = _a.visibleRange;
+                    var updatedSelectedRange = originalMainAxis.visibleRange.clip(overviewVisibleRange);
+                    rangeSelectionModifier.selectedArea = updatedSelectedRange;
+                });
                 originalMainAxis.visibleRangeChanged.subscribe(function (_a) {
                     var visibleRange = _a.visibleRange;
-                    if (visibleRange.min < mainOverviewAxis.visibleRange.min ||
-                        visibleRange.max > mainOverviewAxis.visibleRange.max) {
-                        mainOverviewAxis.visibleRange = new NumberRange_1.NumberRange(Math.min(visibleRange.min, mainOverviewAxis.visibleRange.min), Math.max(visibleRange.max, mainOverviewAxis.visibleRange.max));
-                    }
                     var updatedSelectedRange = visibleRange.clip(mainOverviewAxis.visibleRange);
                     var shouldUpdateSelectedRange = !updatedSelectedRange.equals(rangeSelectionModifier.selectedArea);
                     if (shouldUpdateSelectedRange) {

package/Charting/Visuals/SciChartSurface.d.ts

@@ -27,6 +27,7 @@ import { IDataLabelLayoutManager } from "./RenderableSeries/DataLabels/DataLabel
 import { IRenderableSeries } from "./RenderableSeries/IRenderableSeries";
 import { ESurfaceType, SciChartSurfaceBase, TSciChartConfig } from "./SciChartSurfaceBase";
 import { TDpiChangedEventArgs } from "./TextureManager/DpiHelper";
+import { Point } from "../../Core/Point";
 export declare type TWebAssemblyChart = {
     wasmContext: TSciChart;
     sciChartSurface: SciChartSurface;
@@ -223,6 +224,8 @@ export declare class SciChartSurface extends SciChartSurfaceBase {
     private drawSeriesBehindAxisProperty;
     private autoColorModeProperty;
     private autoColorRequired;
+    private xCoordSvgTrans;
+    private yCoordSvgTrans;
     /**
      * Creates an instance of the {@link SciChartSurface}
      * @param webAssemblyContext The {@link TSciChart | SciChart 2D WebAssembly Context} containing native methods and
@@ -454,6 +457,16 @@ export declare class SciChartSurface extends SciChartSurfaceBase {
     getSeriesViewRectPadding(scaled?: boolean): Thickness;
     /** Calls resolveAutoColors on each series to resolve colors marked as auto based on the seriesColorPalette */
     resolveAutoColors(maxSeries?: number): void;
+    /**
+     * Used internally - sets SVG Canvas Translation
+     * @param x
+     * @param y
+     */
+    setCoordSvgTranslation(x: number, y: number): void;
+    /**
+     * Gets SVG Canvas Translation, used to draw on SVG Canvas using different {@link ESvgClippingMode}
+     */
+    getCoordSvgTranslation(): Point;
     /**
      * Convert the object to a definition that can be serialized to JSON, or used directly with the builder api
      * @param excludeData if set true, data values will not be included in the json.

package/Charting/Visuals/SciChartSurface.js

@@ -71,6 +71,7 @@ var sciChartInitCommon_1 = require("./sciChartInitCommon");
 var SciChartSurfaceBase_1 = require("./SciChartSurfaceBase");
 var DpiHelper_1 = require("./TextureManager/DpiHelper");
 var UpdateSuspender_1 = require("./UpdateSuspender");
+var Point_1 = require("../../Core/Point");
 exports.sciChartConfig = {};
 // To force the worker to be created before it is needed, so we know if it alive or not
 var t = TextureWorker_1.textureWorker;
@@ -150,6 +151,8 @@ var SciChartSurface = /** @class */ (function (_super) {
         _this.drawSeriesBehindAxisProperty = false;
         _this.autoColorModeProperty = AutoColorMode_1.EAutoColorMode.OnAddRemoveSeries;
         _this.autoColorRequired = true;
+        _this.xCoordSvgTrans = 0;
+        _this.yCoordSvgTrans = 0;
         _this.subChartCounter = 0;
         var canvasWidth = (_b = (_a = _this.domCanvas2D) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : app_1.DEFAULT_WIDTH;
         var canvasHeight = (_d = (_c = _this.domCanvas2D) === null || _c === void 0 ? void 0 : _c.height) !== null && _d !== void 0 ? _d : app_1.DEFAULT_HEIGHT;
@@ -980,6 +983,21 @@ var SciChartSurface = /** @class */ (function (_super) {
             }
         }
     };
+    /**
+     * Used internally - sets SVG Canvas Translation
+     * @param x
+     * @param y
+     */
+    SciChartSurface.prototype.setCoordSvgTranslation = function (x, y) {
+        this.xCoordSvgTrans = x;
+        this.yCoordSvgTrans = y;
+    };
+    /**
+     * Gets SVG Canvas Translation, used to draw on SVG Canvas using different {@link ESvgClippingMode}
+     */
+    SciChartSurface.prototype.getCoordSvgTranslation = function () {
+        return new Point_1.Point(this.xCoordSvgTrans, this.yCoordSvgTrans);
+    };
     /**
      * Convert the object to a definition that can be serialized to JSON, or used directly with the builder api
      * @param excludeData if set true, data values will not be included in the json.