scichart 2.2.2417 → 3.0.0-beta.230

package/Charting/ChartModifiers/ChartModifierBase.d.ts

@@ -4,6 +4,7 @@ import { EExecuteOn } from "../../types/ExecuteOn";
 import { IThemeable } from "../Themes/IThemeable";
 import { IThemeProvider } from "../Themes/IThemeProvider";
 import { IRenderableSeries } from "../Visuals/RenderableSeries/IRenderableSeries";
+import { SciChartSubSurface } from "../Visuals/SciChartSurface";
 import { SciChartSurfaceBase } from "../Visuals/SciChartSurfaceBase";
 import { ModifierMouseArgs } from "./ModifierMouseArgs";
 export declare enum EModifierType {
@@ -72,6 +73,14 @@ export interface IChartModifierBase extends IThemeable, IDeletable {
      * Called when a {@link IRenderableSeries | RenderableSeries} is detached from this modifier
      */
     onDetachSeries(rs: IRenderableSeries): void;
+    /**
+     * Called when a {@link SciChartSubSurface | SciChartSubSurface}} is attached to the parent {@link SciChartSurface}
+     */
+    onAttachSubSurface(subChart: SciChartSubSurface): void;
+    /**
+     * Called when a {@link SciChartSubSurface | SciChartSubSurface} is detached from the parent {@link SciChartSurface}
+     */
+    onDetachSubSurface(subChart: SciChartSubSurface): void;
     /**
      * Called when the parent {@link SciChartSurfaceBase} is rendered
      */
@@ -120,6 +129,12 @@ export interface IChartModifierBase extends IThemeable, IDeletable {
      * @param scs the {@link SciChartSurfaceBase} on which method was called
      */
     modifierMouseEnter(args: ModifierMouseArgs, scs: SciChartSurfaceBase): void;
+    /**
+     * Method called when the drop event occurs {@link SciChartSurfaceBase}
+     * @param args the {@link ModifierMouseArgs} containing data about the mouse event
+     * @param scs the {@link SciChartSurfaceBase} on which method was called
+     */
+    modifierDrop(args: ModifierMouseArgs, scs: SciChartSurfaceBase): void;
     /**
      * Method called when pointer event is canceled {@link SciChartSurfaceBase}
      * @param args the {@link ModifierMouseArgs} containing data about the pointer event
@@ -185,6 +200,10 @@ export declare abstract class ChartModifierBase<TSurfaceType extends SciChartSur
     /** @inheritDoc */
     onDetachSeries(rs: IRenderableSeries): void;
     /** @inheritDoc */
+    onAttachSubSurface(subChart: SciChartSubSurface): void;
+    /** @inheritDoc */
+    onDetachSubSurface(subChart: SciChartSubSurface): void;
+    /** @inheritDoc */
     onParentSurfaceRendered(): void;
     /** @inheritDoc */
     modifierMouseDown(args: ModifierMouseArgs): void;
@@ -201,6 +220,8 @@ export declare abstract class ChartModifierBase<TSurfaceType extends SciChartSur
     /** @inheritDoc */
     modifierMouseLeave(args: ModifierMouseArgs): void;
     /** @inheritDoc */
+    modifierDrop(args: ModifierMouseArgs): void;
+    /** @inheritDoc */
     modifierPointerCancel(args: ModifierMouseArgs): void;
     /** @inheritDoc */
     setParentSurface(parentSurface: SciChartSurfaceBase): void;

package/Charting/ChartModifiers/ChartModifierBase.js

@@ -106,6 +106,14 @@ var ChartModifierBase = /** @class */ (function () {
         // Override in derived class to be notified of detached
     };
     /** @inheritDoc */
+    ChartModifierBase.prototype.onAttachSubSurface = function (subChart) {
+        // Override in derived class to be notified of attached
+    };
+    /** @inheritDoc */
+    ChartModifierBase.prototype.onDetachSubSurface = function (subChart) {
+        // Override in derived class to be notified of detached
+    };
+    /** @inheritDoc */
     ChartModifierBase.prototype.onParentSurfaceRendered = function () {
         // Override in derived class to be notified when render pass is finished
     };
@@ -143,6 +151,10 @@ var ChartModifierBase = /** @class */ (function () {
         // Override in derived class to be notified of mouse leave
     };
     /** @inheritDoc */
+    ChartModifierBase.prototype.modifierDrop = function (args) {
+        // Override in derived class to be notified of drop event
+    };
+    /** @inheritDoc */
     ChartModifierBase.prototype.modifierPointerCancel = function (args) {
         // Override in derived class to be notified of mouse leave
     };

package/Charting/ChartModifiers/ChartModifierBase2D.js

@@ -32,8 +32,9 @@ var ChartModifierBase2D = /** @class */ (function (_super) {
      * @param options optional parameters via {@link IChartModifierBaseOptions} which can be passed to configure the modifier
      */
     function ChartModifierBase2D(options) {
+        var _this = this;
         var _a, _b, _c, _d, _e;
-        var _this = _super.call(this, options) || this;
+        _this = _super.call(this, options) || this;
         _this.xyDirection = XyDirection_1.EXyDirection.XyDirection;
         _this.changedPropertiesList = [];
         _this.xAxisIdProperty = AxisCore_1.AxisCore.DEFAULT_AXIS_ID;

package/Charting/ChartModifiers/CursorModifier.d.ts

@@ -5,6 +5,7 @@ import { EMousePosition } from "../../types/MousePosition";
 import { SeriesInfo } from "../Model/ChartData/SeriesInfo";
 import { IThemeProvider } from "../Themes/IThemeProvider";
 import { CursorTooltipSvgAnnotation } from "../Visuals/Annotations/CursorTooltipSvgAnnotation";
+import { LineAnnotation } from "../Visuals/Annotations/LineAnnotation";
 import { HitTestInfo } from "../Visuals/RenderableSeries/HitTest/HitTestInfo";
 import { IRenderableSeries } from "../Visuals/RenderableSeries/IRenderableSeries";
 import { ChartModifierBase2D, IChartModifierBaseOptions } from "./ChartModifierBase2D";
@@ -15,25 +16,63 @@ export declare type TCursorTooltipDataTemplate = (seriesInfos: SeriesInfo[], too
  * Optional parameters used to configure a {@link CursorModifier} at construct time
  */
 export interface ICursorModifierOptions extends IChartModifierBaseOptions {
+    /**
+     * Set a function which generates the svg for the entire tooltip. Note that the repositioning of the tooltip to keep it within the chart is normally done in this function.
+     * To retain this functionality in your own template function, include the following:
+     * ```ts
+     *   // valuesWithLabels is the result of the tooltipDataTemplate function, which is the text content of the tooltip as an array of strings
+     *   const { width, height } = calcTooltipSize(valuesWithLabels);
+     *   // this calculates and sets svgAnnotation.xCoordShift and svgAnnotation.yCoordShift.  Do not set x1 or y1 at this point.
+     *   adjustTooltipPosition(width, height, svgAnnotation);
+     * ```
+     */
     tooltipSvgTemplate?: TCursorTooltipSvgTemplate | string;
+    /** Sets the crosshair stroke color as an HTML Color code */
     crosshairStroke?: string;
+    /**
+     * Sets the crosshair line strokethickness
+     */
     crosshairStrokeThickness?: number;
+    /** Sets the crosshair line dash array */
     crosshairStrokeDashArray?: number[];
+    /** Sets the tooltip container background color as an HTML Color code */
     tooltipContainerBackground?: string;
+    /** Sets the tooltip text color as an HTML Color code */
     tooltipTextStroke?: string;
+    /** Sets whether we should display the tooltip. Default is false */
     showTooltip?: boolean;
+    /** Sets whether we should display axis labels. Default is true */
     showAxisLabels?: boolean;
+    /** Sets both axis label text color as an HTML Color code */
     axisLabelStroke?: string;
+    /** Sets both axis label fill as an HTML Color code. */
     axisLabelFill?: string;
+    /** Sets the xAxis label text color as an HTML Color code */
     xAxisLabelStroke?: string;
+    /** Sets the xAxis label fill as an HTML Color code. */
     xAxisLabelFill?: string;
+    /** Sets the yAxis label text color as an HTML Color code */
     yAxisLabelStroke?: string;
+    /** Sets the yAxis label fill as an HTML Color code. */
     yAxisLabelFill?: string;
+    /** Sets the template for the legend */
     tooltipLegendTemplate?: TCursorTooltipSvgTemplate | 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?: TCursorTooltipDataTemplate | string;
+    /** Sets the parent div element reference or id for the Tooltip */
     placementDivId?: string;
+    /** Sets whether we should display the X Line. Default is true */
+    showXLine?: boolean;
+    /** Sets whether we should display the Y Line. Default is true */
+    showYLine?: 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;
 }
 /**
  * The CursorModifier provides tooltip and cursor behavior on a 2D {@link SciChartSurface}
@@ -50,6 +89,16 @@ export interface ICursorModifierOptions extends IChartModifierBaseOptions {
  */
 export declare class CursorModifier extends ChartModifierBase2D implements IIncludeSeries {
     readonly type = EChart2DModifierType.Cursor;
+    /**
+     * Get or set a function which generates the svg for the entire tooltip. Note that the repositioning of the tooltip to keep it within the chart is normally done in this function.
+     * To retain this functionality in your own template function, include the following:
+     * ```ts
+     *   // valuesWithLabels is the result of the tooltipDataTemplate function, which is the text content of the tooltip as an array of strings
+     *   const { width, height } = calcTooltipSize(valuesWithLabels);
+     *   // this calculates and sets svgAnnotation.xCoordShift and svgAnnotation.yCoordShift.  Do not set x1 or y1 at this point.
+     *   adjustTooltipPosition(width, height, svgAnnotation);
+     * ```
+     */
     tooltipSvgTemplate?: TCursorTooltipSvgTemplate;
     /**
      * Gets or sets the crosshair line strokethickness
@@ -76,11 +125,11 @@ export declare class CursorModifier extends ChartModifierBase2D implements IIncl
      */
     showAxisLabels: boolean;
     /**
-     * Gets or sets both axiseslabel text color as an HTML Color code
+     * Gets or sets both axis label text color as an HTML Color code
      */
     axisLabelStroke: string;
     /**
-     * Gets or sets both axises label fill as an HTML Color code.
+     * Gets or sets both axis label fill as an HTML Color code.
      */
     axisLabelFill: string;
     /**
@@ -96,7 +145,7 @@ export declare class CursorModifier extends ChartModifierBase2D implements IIncl
      */
     yAxisLabelStroke: string;
     /**
-     * Gets or sets the xAxis label fill as an HTML Color code.
+     * Gets or sets the yAxis label fill as an HTML Color code.
      */
     yAxisLabelFill: string;
     /**
@@ -111,14 +160,26 @@ export declare class CursorModifier extends ChartModifierBase2D implements IIncl
      * Gets or sets the legend Y offset
      */
     tooltipLegendOffsetY: number;
-    private xLineAnnotation;
-    private yLineAnnotation;
-    private tooltipAnnotation;
-    private mousePosition;
-    private crosshairStrokeProperty;
-    private tooltipDataTemplateProperty?;
-    private includedSeriesMap;
-    private placementDivId;
+    /**
+     * Gets or sets whether we should display the X Line. Default is true
+     */
+    showXLine: boolean;
+    /**
+     * Gets or sets whether we should display the Y Line. Default is true
+     */
+    showYLine: 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;
+    protected xLineAnnotation: LineAnnotation;
+    protected yLineAnnotation: LineAnnotation;
+    protected tooltipAnnotation: CursorTooltipSvgAnnotation;
+    protected mousePosition: EMousePosition;
+    protected crosshairStrokeProperty: string;
+    protected tooltipDataTemplateProperty?: TCursorTooltipDataTemplate;
+    protected includedSeriesMap: Map<IRenderableSeries, boolean>;
+    protected placementDivIdProperty: string;
     /**
      * Creates an instance of the CursorModifier
      *
@@ -171,6 +232,14 @@ export declare class CursorModifier extends ChartModifierBase2D implements IIncl
      * Gets or sets the crosshair line Stroke color as an HTML Color code
      */
     set crosshairStroke(value: string);
+    /**
+     * Gets or sets the parent div element reference or id for the Tooltip
+     */
+    get placementDivId(): string;
+    /**
+     * Gets or sets the parent div element reference or id for the Tooltip
+     */
+    set placementDivId(value: string);
     /**
      * @inheritDoc
      */
@@ -196,21 +265,25 @@ export declare class CursorModifier extends ChartModifierBase2D implements IIncl
     getMousePosition(): EMousePosition;
     /** @inheritDoc */
     toJSON(): {
-        /**
-         * Gets or sets the xAxis label text color as an HTML Color code
-         */
         type: string;
         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) => {
+    width: number;
+    height: number;
+};
+/** Relocate the tooltip so that it is always within the seriesViewRect */
+export declare const adjustTooltipPosition: (width: number, height: number, svgAnnotation: CursorTooltipSvgAnnotation) => void;

package/Charting/ChartModifiers/CursorModifier.js

@@ -15,7 +15,7 @@ var __extends = (this && this.__extends) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CursorModifier = void 0;
+exports.adjustTooltipPosition = exports.calcTooltipSize = exports.CursorModifier = void 0;
 var classFactory_1 = require("../../Builder/classFactory");
 var BaseType_1 = require("../../types/BaseType");
 var ChartModifierType_1 = require("../../types/ChartModifierType");
@@ -51,9 +51,20 @@ var CursorModifier = /** @class */ (function (_super) {
      * @param options Optional parameters {@link ICursorModifierOptions} used to configure the modifier
      */
     function CursorModifier(options) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
-        var _this = _super.call(this, options) || this;
+        var _this = this;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
+        _this = _super.call(this, options) || this;
         _this.type = ChartModifierType_1.EChart2DModifierType.Cursor;
+        /**
+         * Get or set a function which generates the svg for the entire tooltip. Note that the repositioning of the tooltip to keep it within the chart is normally done in this function.
+         * To retain this functionality in your own template function, include the following:
+         * ```ts
+         *   // valuesWithLabels is the result of the tooltipDataTemplate function, which is the text content of the tooltip as an array of strings
+         *   const { width, height } = calcTooltipSize(valuesWithLabels);
+         *   // this calculates and sets svgAnnotation.xCoordShift and svgAnnotation.yCoordShift.  Do not set x1 or y1 at this point.
+         *   adjustTooltipPosition(width, height, svgAnnotation);
+         * ```
+         */
         _this.tooltipSvgTemplate = defaultTooltipTemplate;
         /**
          * Gets or sets the crosshair line strokethickness
@@ -80,11 +91,11 @@ var CursorModifier = /** @class */ (function (_super) {
          */
         _this.showAxisLabels = true;
         /**
-         * Gets or sets both axiseslabel text color as an HTML Color code
+         * Gets or sets both axis label text color as an HTML Color code
          */
         _this.axisLabelStroke = "#fff";
         /**
-         * Gets or sets both axises label fill as an HTML Color code.
+         * Gets or sets both axis label fill as an HTML Color code.
          */
         _this.axisLabelFill = "#228B22";
         /**
@@ -100,7 +111,7 @@ var CursorModifier = /** @class */ (function (_super) {
          */
         _this.yAxisLabelStroke = undefined;
         /**
-         * Gets or sets the xAxis label fill as an HTML Color code.
+         * Gets or sets the yAxis label fill as an HTML Color code.
          */
         _this.yAxisLabelFill = undefined;
         /**
@@ -111,6 +122,18 @@ var CursorModifier = /** @class */ (function (_super) {
          * Gets or sets the legend Y offset
          */
         _this.tooltipLegendOffsetY = 0;
+        /**
+         * Gets or sets whether we should display the X Line. Default is true
+         */
+        _this.showXLine = true;
+        /**
+         * Gets or sets whether we should display the Y Line. Default is true
+         */
+        _this.showYLine = true;
+        /**
+         * 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 = MousePosition_1.EMousePosition.OutOfCanvas;
         _this.crosshairStrokeProperty = SciChartSurfaceBase_1.SciChartSurfaceBase.DEFAULT_THEME.cursorLineBrush;
         _this.includedSeriesMap = new Map();
@@ -135,7 +158,7 @@ var CursorModifier = /** @class */ (function (_super) {
         _this.xAxisLabelFill = (_m = options === null || options === void 0 ? void 0 : options.xAxisLabelFill) !== null && _m !== void 0 ? _m : _this.xAxisLabelFill;
         _this.yAxisLabelStroke = (_o = options === null || options === void 0 ? void 0 : options.yAxisLabelStroke) !== null && _o !== void 0 ? _o : _this.yAxisLabelStroke;
         _this.yAxisLabelFill = (_p = options === null || options === void 0 ? void 0 : options.yAxisLabelFill) !== null && _p !== void 0 ? _p : _this.yAxisLabelFill;
-        _this.placementDivId = (_q = options === null || options === void 0 ? void 0 : options.placementDivId) !== null && _q !== void 0 ? _q : _this.placementDivId;
+        _this.placementDivIdProperty = (_q = options === null || options === void 0 ? void 0 : options.placementDivId) !== null && _q !== void 0 ? _q : _this.placementDivIdProperty;
         if (options === null || options === void 0 ? void 0 : options.tooltipLegendTemplate) {
             if (typeof options.tooltipLegendTemplate === "string") {
                 _this.typeMap.set("tooltipLegendTemplate", options.tooltipLegendTemplate);
@@ -156,6 +179,9 @@ var CursorModifier = /** @class */ (function (_super) {
         }
         _this.tooltipDataTemplateProperty =
             (_u = options === null || options === void 0 ? void 0 : options.tooltipDataTemplate) !== null && _u !== void 0 ? _u : _this.tooltipDataTemplateProperty;
+        _this.showXLine = (_v = options === null || options === void 0 ? void 0 : options.showXLine) !== null && _v !== void 0 ? _v : _this.showXLine;
+        _this.showYLine = (_w = options === null || options === void 0 ? void 0 : options.showYLine) !== null && _w !== void 0 ? _w : _this.showYLine;
+        _this.hitTestRadius = (_x = options === null || options === void 0 ? void 0 : options.hitTestRadius) !== null && _x !== void 0 ? _x : _this.hitTestRadius;
         return _this;
     }
     /**
@@ -176,8 +202,14 @@ var CursorModifier = /** @class */ (function (_super) {
         var yAxisLabelFill = this.yAxisLabelFill ? this.yAxisLabelFill : this.axisLabelFill;
         var xAxisLabelStroke = this.xAxisLabelStroke ? this.xAxisLabelStroke : this.axisLabelStroke;
         var yAxisLabelStroke = this.yAxisLabelStroke ? this.yAxisLabelStroke : this.axisLabelStroke;
-        this.xLineAnnotation = this.newLineAnnotation(xAxisLabelFill, xAxisLabelStroke);
-        this.yLineAnnotation = this.newLineAnnotation(yAxisLabelFill, yAxisLabelStroke);
+        if (this.showXLine) {
+            this.xLineAnnotation = this.newLineAnnotation(xAxisLabelFill, xAxisLabelStroke);
+            this.parentSurface.modifierAnnotations.add(this.xLineAnnotation);
+        }
+        if (this.showYLine) {
+            this.yLineAnnotation = this.newLineAnnotation(yAxisLabelFill, yAxisLabelStroke);
+            this.parentSurface.modifierAnnotations.add(this.yLineAnnotation);
+        }
         this.tooltipAnnotation = new CursorTooltipSvgAnnotation_1.CursorTooltipSvgAnnotation({
             cursorModifier: this,
             xCoordinateMode: AnnotationBase_1.ECoordinateMode.Pixel,
@@ -192,17 +224,22 @@ var CursorModifier = /** @class */ (function (_super) {
             yAxisId: this.yAxisId,
             placementDivId: this.placementDivId
         });
-        this.parentSurface.modifierAnnotations.add(this.xLineAnnotation, this.yLineAnnotation, this.tooltipAnnotation);
+        this.parentSurface.modifierAnnotations.add(this.tooltipAnnotation);
     };
     /**
      * @inheritDoc
      */
     CursorModifier.prototype.onDetach = function () {
+        var _a;
         _super.prototype.onDetach.call(this);
-        this.xLineAnnotation.delete();
-        this.parentSurface.modifierAnnotations.remove(this.xLineAnnotation);
-        this.yLineAnnotation.delete();
-        this.parentSurface.modifierAnnotations.remove(this.yLineAnnotation);
+        if (this.xLineAnnotation) {
+            (_a = this.xLineAnnotation) === null || _a === void 0 ? void 0 : _a.delete();
+            this.parentSurface.modifierAnnotations.remove(this.xLineAnnotation);
+        }
+        if (this.yLineAnnotation) {
+            this.yLineAnnotation.delete();
+            this.parentSurface.modifierAnnotations.remove(this.yLineAnnotation);
+        }
         this.tooltipAnnotation.delete();
         this.parentSurface.modifierAnnotations.remove(this.tooltipAnnotation);
     };
@@ -275,6 +312,25 @@ var CursorModifier = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(CursorModifier.prototype, "placementDivId", {
+        /**
+         * Gets or sets the parent div element reference or id for the Tooltip
+         */
+        get: function () {
+            return this.placementDivIdProperty;
+        },
+        /**
+         * Gets or sets the parent div element reference or id for the Tooltip
+         */
+        set: function (value) {
+            if (this.placementDivIdProperty !== value) {
+                this.placementDivIdProperty = value;
+                this.notifyPropertyChanged(constants_1.PROPERTY.PLACEMENT_DIV_ID);
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
     /**
      * @inheritDoc
      */
@@ -324,7 +380,12 @@ var CursorModifier = /** @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
@@ -362,13 +423,21 @@ var CursorModifier = /** @class */ (function (_super) {
         _super.prototype.notifyPropertyChanged.call(this, propertyName);
         if (propertyName === constants_1.PROPERTY.X_AXIS_ID) {
             this.tooltipAnnotation.xAxisId = this.xAxisId;
-            this.xLineAnnotation.xAxisId = this.xAxisId;
-            this.yLineAnnotation.xAxisId = this.xAxisId;
+            if (this.xLineAnnotation) {
+                this.xLineAnnotation.xAxisId = this.xAxisId;
+            }
+            if (this.yLineAnnotation) {
+                this.yLineAnnotation.xAxisId = this.xAxisId;
+            }
         }
         if (propertyName === constants_1.PROPERTY.Y_AXIS_ID) {
             this.tooltipAnnotation.yAxisId = this.yAxisId;
-            this.xLineAnnotation.yAxisId = this.yAxisId;
-            this.yLineAnnotation.yAxisId = this.yAxisId;
+            if (this.xLineAnnotation) {
+                this.xLineAnnotation.yAxisId = this.yAxisId;
+            }
+            if (this.yLineAnnotation) {
+                this.yLineAnnotation.yAxisId = this.yAxisId;
+            }
         }
     };
     CursorModifier.prototype.getSeriesInfos = function () {
@@ -385,8 +454,12 @@ var CursorModifier = /** @class */ (function (_super) {
     };
     CursorModifier.prototype.update = function () {
         if (this.mousePosition !== MousePosition_1.EMousePosition.SeriesArea) {
-            this.xLineAnnotation.isHidden = true;
-            this.yLineAnnotation.isHidden = true;
+            if (this.xLineAnnotation) {
+                this.xLineAnnotation.isHidden = true;
+            }
+            if (this.yLineAnnotation) {
+                this.yLineAnnotation.isHidden = true;
+            }
             this.tooltipAnnotation.isHidden = true;
             if (this.placementDivId) {
                 this.tooltipAnnotation.delete();
@@ -394,31 +467,47 @@ var CursorModifier = /** @class */ (function (_super) {
             return;
         }
         var translatedMousePoint = (0, translate_1.translateFromCanvasToSeriesViewRect)(this.mousePoint, this.parentSurface.seriesViewRect);
-        this.xLineAnnotation.isHidden = false;
-        this.yLineAnnotation.isHidden = false;
+        if (this.xLineAnnotation) {
+            this.xLineAnnotation.isHidden = false;
+        }
+        if (this.yLineAnnotation) {
+            this.yLineAnnotation.isHidden = false;
+        }
         if (this.showTooltip) {
             this.tooltipAnnotation.isHidden = false;
         }
         if (translatedMousePoint) {
             var x = (0, translate_1.translateToNotScaled)(translatedMousePoint.x);
             var y = (0, translate_1.translateToNotScaled)(translatedMousePoint.y);
-            this.xLineAnnotation.y1 = 0;
-            this.yLineAnnotation.x1 = 0;
+            if (this.xLineAnnotation) {
+                this.xLineAnnotation.y1 = 0;
+            }
+            if (this.yLineAnnotation) {
+                this.yLineAnnotation.x1 = 0;
+            }
             if (this.isVerticalChart()) {
-                this.xLineAnnotation.y2 = (0, translate_1.translateToNotScaled)(this.parentSurface.seriesViewRect.right);
-                this.xLineAnnotation.x1 = y;
-                this.xLineAnnotation.x2 = y;
-                this.yLineAnnotation.x2 = (0, translate_1.translateToNotScaled)(this.parentSurface.seriesViewRect.bottom);
-                this.yLineAnnotation.y1 = x;
-                this.yLineAnnotation.y2 = x;
+                if (this.xLineAnnotation) {
+                    this.xLineAnnotation.y2 = (0, translate_1.translateToNotScaled)(this.parentSurface.seriesViewRect.right);
+                    this.xLineAnnotation.x1 = y;
+                    this.xLineAnnotation.x2 = y;
+                }
+                if (this.yLineAnnotation) {
+                    this.yLineAnnotation.x2 = (0, translate_1.translateToNotScaled)(this.parentSurface.seriesViewRect.bottom);
+                    this.yLineAnnotation.y1 = x;
+                    this.yLineAnnotation.y2 = x;
+                }
             }
             else {
-                this.xLineAnnotation.y2 = (0, translate_1.translateToNotScaled)(this.parentSurface.seriesViewRect.bottom);
-                this.xLineAnnotation.x1 = x;
-                this.xLineAnnotation.x2 = x;
-                this.yLineAnnotation.x2 = (0, translate_1.translateToNotScaled)(this.parentSurface.seriesViewRect.right);
-                this.yLineAnnotation.y1 = y;
-                this.yLineAnnotation.y2 = y;
+                if (this.xLineAnnotation) {
+                    this.xLineAnnotation.y2 = (0, translate_1.translateToNotScaled)(this.parentSurface.seriesViewRect.bottom);
+                    this.xLineAnnotation.x1 = x;
+                    this.xLineAnnotation.x2 = x;
+                }
+                if (this.yLineAnnotation) {
+                    this.yLineAnnotation.x2 = (0, translate_1.translateToNotScaled)(this.parentSurface.seriesViewRect.right);
+                    this.yLineAnnotation.y1 = y;
+                    this.yLineAnnotation.y2 = y;
+                }
             }
             if (this.showTooltip) {
                 this.tooltipAnnotation.x1 = x;
@@ -518,18 +607,10 @@ var defaultTooltipTemplate = function (seriesInfos, svgAnnotation) {
     if (valuesWithLabels.length === 0) {
         return "<svg></svg>";
     }
-    // tooltip width
-    var width = calcTooltipWidth(valuesWithLabels.reduce(function (prev, cur) { return (cur.length > prev ? cur.length : prev); }, 0));
-    // tooltip height
-    var height = calcTooltipHeight(valuesWithLabels.length);
-    // Positioning the tooltip
-    var seriesViewRect = svgAnnotation.parentSurface.seriesViewRect;
-    var xCoord = svgAnnotation.x1;
-    var yCoord = svgAnnotation.y1;
-    var xCoordShift = (0, translate_1.translateToNotScaled)(seriesViewRect.width) - xCoord < width ? -width : 5;
-    var yCoordShift = (0, translate_1.translateToNotScaled)(seriesViewRect.height) - yCoord < height ? -height : 5;
-    svgAnnotation.xCoordShift = xCoordShift;
-    svgAnnotation.yCoordShift = yCoordShift;
+    // tooltip size
+    var _b = (0, exports.calcTooltipSize)(valuesWithLabels), width = _b.width, height = _b.height;
+    // adjust position
+    (0, exports.adjustTooltipPosition)(width, height, svgAnnotation);
     var valuesBlock = "";
     valuesWithLabels.forEach(function (val, index) {
         valuesBlock += "<tspan x=\"8\" dy=\"1.2em\">".concat(val, "</tspan>");
@@ -538,15 +619,23 @@ var defaultTooltipTemplate = function (seriesInfos, svgAnnotation) {
     var tooltipStroke = svgAnnotation.textStroke;
     return "<svg class=\"scichart__cursor-tooltip\" width=\"".concat(width, "\" height=\"").concat(height, "\">\n        <defs>\n            <filter id=\"").concat(id, "\" x=\"0\" y=\"0\" width=\"200%\" height=\"200%\">\n                <feOffset result=\"offOut\" in=\"SourceAlpha\" dx=\"3\" dy=\"3\" />\n                <feGaussianBlur result=\"blurOut\" in=\"offOut\" stdDeviation=\"3\" />\n                <feBlend in=\"SourceGraphic\" in2=\"blurOut\" mode=\"normal\" />\n            </filter>\n        </defs>\n        <rect rx=\"4\" ry=\"4\" width=\"95%\" height=\"90%\" fill=\"").concat(tooltipFill, "\" filter=\"url(#").concat(id, ")\" />\n        <svg width=\"100%\">\n            <text x=\"8\" y=\"3\" font-size=\"13\" font-family=\"Verdana\" dy=\"0\" fill=\"").concat(tooltipStroke, "\">").concat(valuesBlock, "</text>\n        </svg>\n    </svg>");
 };
-/** @ignore */
-var calcTooltipWidth = function (textLength, fontSize) {
-    if (textLength === void 0) { textLength = 20; }
+/** Calculate the width and height of the tooltip based on the content array */
+var calcTooltipSize = function (valuesWithLabels, fontSize) {
     if (fontSize === void 0) { fontSize = 13; }
-    return textLength * 8 + 20;
+    var textLength = valuesWithLabels.reduce(function (prev, cur) { return (cur.length > prev ? cur.length : prev); }, 0);
+    var width = textLength * 8 + 20;
+    var height = 17 * valuesWithLabels.length + 16;
+    return { width: width, height: height };
 };
-/** @ignore */
-var calcTooltipHeight = function (lines, fontSize) {
-    if (lines === void 0) { lines = 2; }
-    if (fontSize === void 0) { fontSize = 13; }
-    return 17 * lines + 16;
+exports.calcTooltipSize = calcTooltipSize;
+/** Relocate the tooltip so that it is always within the seriesViewRect */
+var adjustTooltipPosition = function (width, height, svgAnnotation) {
+    var seriesViewRect = svgAnnotation.parentSurface.seriesViewRect;
+    var xCoord = svgAnnotation.x1;
+    var yCoord = svgAnnotation.y1;
+    var xCoordShift = (0, translate_1.translateToNotScaled)(seriesViewRect.width) - xCoord < width ? -width : 5;
+    var yCoordShift = (0, translate_1.translateToNotScaled)(seriesViewRect.height) - yCoord < height ? -height : 5;
+    svgAnnotation.xCoordShift = xCoordShift;
+    svgAnnotation.yCoordShift = yCoordShift;
 };
+exports.adjustTooltipPosition = adjustTooltipPosition;

package/Charting/ChartModifiers/DataPointSelectionModifier.js

@@ -57,8 +57,9 @@ var DataPointSelectionModifier = /** @class */ (function (_super) {
      * @param options Optional parameters of type {@link IDataPointSelectionModifierOptions} used to configure the modifier
      */
     function DataPointSelectionModifier(options) {
+        var _this = this;
         var _a, _b, _c;
-        var _this = _super.call(this, options) || this;
+        _this = _super.call(this, options) || this;
         _this.type = ChartModifierType_1.EChart2DModifierType.DataPointSelection;
         /**
          * A selection-changed EventHandler. See {@link EventHandler} for how to subscribe to and be

package/Charting/ChartModifiers/LegendModifier.js

@@ -40,8 +40,9 @@ var LegendModifier = /** @class */ (function (_super) {
      * @param options Optional parameters {@link ILegendModifierOptions} used to configure the modifier
      */
     function LegendModifier(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.Legend;
         /**
          * An event handler raised when a {@link SciChartLegend} row checkbox is checked or unchecked