scichart 3.1.348 → 3.2.0-beta

package/Charting/Numerics/Resamplers/ResamplingParams.js

@@ -7,8 +7,8 @@ var ResamplingParams = /** @class */ (function () {
         this.zeroLineY = 0;
         this.precision = 0;
         this.enableExperimentalResampling = false;
-        this.dataIsFifo = false;
         this.fifoCapacity = 0;
+        this.fifoStartIndex = 0;
         this.viewportRect = seriesViewRect;
         if (rs) {
             var dataSeries = rs.dataSeries;
@@ -16,8 +16,8 @@ var ResamplingParams = /** @class */ (function () {
             this.precision = rs.resamplingPrecision;
             if (xAxis) {
                 this.indexesRange = rs.getIndicesRange(xAxis.visibleRange, xAxis.isCategoryAxis);
-                // console.log("visible range", xAxis.visibleRange.min, xAxis.visibleRange.max);
-                // console.log("indexes range", this.indexesRange.min, this.indexesRange.max);
+                //console.log("visible range", xAxis.visibleRange.min, xAxis.visibleRange.max);
+                //console.log("indexes range", this.indexesRange.min, this.indexesRange.max);
                 this.isCategoryAxis = xAxis.isCategoryAxis;
                 this.isXAxisAutoRanged = xAxis.autoRange === AutoRange_1.EAutoRange.Always;
                 this.xVisibleRange = xAxis.visibleRange;
@@ -25,11 +25,15 @@ var ResamplingParams = /** @class */ (function () {
             if (dataSeries) {
                 this.dataHasNaN = dataSeries === null || dataSeries === void 0 ? void 0 : dataSeries.dataDistributionCalculator.containsNaN;
                 this.dataEvenlySpaced = dataSeries === null || dataSeries === void 0 ? void 0 : dataSeries.isEvenlySpaced;
+                this.fifoCapacity = dataSeries.fifoCapacity;
+                this.fifoStartIndex = dataSeries.fifoStartIndex;
+                // Disabling fifo for sweeping nearly works, but is very unreliable.
+                this.dataIsFifo = dataSeries.fifoCapacity > 0 && !dataSeries.fifoSweeping;
             }
         }
     }
     ResamplingParams.prototype.clone = function (options) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
         var rp = new ResamplingParams(undefined, undefined, undefined);
         rp.zeroLineY = (_a = options === null || options === void 0 ? void 0 : options.zeroLineY) !== null && _a !== void 0 ? _a : this.zeroLineY;
         rp.precision = (_b = options === null || options === void 0 ? void 0 : options.precision) !== null && _b !== void 0 ? _b : this.precision;
@@ -42,9 +46,10 @@ var ResamplingParams = /** @class */ (function () {
         rp.renderableSeriesHash = (_j = options === null || options === void 0 ? void 0 : options.renderableSeriesHash) !== null && _j !== void 0 ? _j : this.renderableSeriesHash;
         rp.enableExperimentalResampling = (_k = options === null || options === void 0 ? void 0 : options.enableExperimentalResampling) !== null && _k !== void 0 ? _k : this.enableExperimentalResampling;
         rp.dataHasNaN = (_l = options === null || options === void 0 ? void 0 : options.dataHasNaN) !== null && _l !== void 0 ? _l : this.dataHasNaN;
-        rp.dataIsFifo = (_m = options === null || options === void 0 ? void 0 : options.dataIsFifo) !== null && _m !== void 0 ? _m : this.dataIsFifo;
-        rp.fifoCapacity = (_o = options === null || options === void 0 ? void 0 : options.fifoCapacity) !== null && _o !== void 0 ? _o : this.fifoCapacity;
-        rp.dataEvenlySpaced = (_p = options === null || options === void 0 ? void 0 : options.dataEvenlySpaced) !== null && _p !== void 0 ? _p : this.dataEvenlySpaced;
+        rp.dataEvenlySpaced = (_m = options === null || options === void 0 ? void 0 : options.dataEvenlySpaced) !== null && _m !== void 0 ? _m : this.dataEvenlySpaced;
+        rp.fifoCapacity = (_o = options.fifoCapacity) !== null && _o !== void 0 ? _o : this.fifoCapacity;
+        rp.fifoStartIndex = (_p = options.fifoStartIndex) !== null && _p !== void 0 ? _p : this.fifoStartIndex;
+        rp.dataIsFifo = (_q = options.dataIsFifo) !== null && _q !== void 0 ? _q : this.dataIsFifo;
         return rp;
     };
     return ResamplingParams;

package/Charting/Numerics/TickCoordinateProviders/TickCoordinatesProvider.d.ts

@@ -12,6 +12,11 @@ export declare abstract class TickCoordinatesProvider {
      * @param axis The Axis we are attached to.
      */
     attachedToAxis(axis: AxisCore): void;
+    /**
+     * Called when the {@link TickCoordinatesProvider} is detached from an {@link AxisCore | Axis}
+     * @param axis The Axis we are attached to.
+     */
+    detachedFromAxis(): void;
     /**
      * Converts arrays of major and minor ticks (data values) into structure containing pixel coordinates
      * @param minorTicks

package/Charting/Numerics/TickCoordinateProviders/TickCoordinatesProvider.js

@@ -14,6 +14,13 @@ var TickCoordinatesProvider = /** @class */ (function () {
     TickCoordinatesProvider.prototype.attachedToAxis = function (axis) {
         this.parentAxis = axis;
     };
+    /**
+     * Called when the {@link TickCoordinatesProvider} is detached from an {@link AxisCore | Axis}
+     * @param axis The Axis we are attached to.
+     */
+    TickCoordinatesProvider.prototype.detachedFromAxis = function () {
+        this.parentAxis = undefined;
+    };
     return TickCoordinatesProvider;
 }());
 exports.TickCoordinatesProvider = TickCoordinatesProvider;

package/Charting/Numerics/TickProviders/NumericTickProvider.js

@@ -92,12 +92,11 @@ var NumericTickProvider = /** @class */ (function (_super) {
         var results = [];
         var min = visibleRange.min;
         var max = visibleRange.max;
-        var current = min;
         var calcMajorTicks = delta === majorDelta;
         var numberUtil = this.webAssemblyContext.NumberUtil;
-        if (!numberUtil.IsDivisibleBy(current, delta)) {
-            current = numberUtil.RoundUp(current, delta);
-        }
+        // Skip the divisiblity check here as it can return true if the min is within epsilon of being divisible,
+        // but false for min + delta, leading to only one tick being output.
+        var current = numberUtil.RoundUp(min, delta);
         var start = current;
         var tickCount = 0;
         while (current <= max) {

package/Charting/Numerics/TickProviders/TickProvider.d.ts

@@ -23,6 +23,11 @@ export declare abstract class TickProvider {
      * @param axis
      */
     attachedToAxis(axis: AxisCore): void;
+    /**
+     * Called when the TickProvider is attached from an {@link AxisCore | Axis}
+     * @param axis
+     */
+    detachedFromAxis(): void;
     /**
      * @summary Gets an array of major ticks (data-values values where SciChart will place labels and major gridlines).
      * @description Major ticks are data-values where we will place the major gridlines and labels. For example. if the {@link AxisCore | Axis}

package/Charting/Numerics/TickProviders/TickProvider.js

@@ -24,6 +24,13 @@ var TickProvider = /** @class */ (function () {
     TickProvider.prototype.attachedToAxis = function (axis) {
         this.parentAxis = axis;
     };
+    /**
+     * Called when the TickProvider is attached from an {@link AxisCore | Axis}
+     * @param axis
+     */
+    TickProvider.prototype.detachedFromAxis = function () {
+        this.parentAxis = undefined;
+    };
     return TickProvider;
 }());
 exports.TickProvider = TickProvider;

package/Charting/Services/SciChartRenderer.js

@@ -58,7 +58,7 @@ var SciChartRenderer = /** @class */ (function () {
             return {
                 pointSeries: rs.toPointSeries(),
                 renderableSeries: rs,
-                indicesRange: undefined,
+                indicesRange: rs.isStacked ? undefined : rs.getIndicesRange(xAxis.visibleRange, xAxis.isCategoryAxis),
                 resamplingHash: undefined
             };
         var rp = new ResamplingParams_1.ResamplingParams(seriesViewRect, rs, xAxis);
@@ -66,7 +66,7 @@ var SciChartRenderer = /** @class */ (function () {
             return {
                 pointSeries: rs.toPointSeries(),
                 renderableSeries: rs,
-                indicesRange: undefined,
+                indicesRange: rp.indexesRange,
                 resamplingHash: undefined
             };
         var resamplingHash = SciChartRenderer.calculateResamplingHash(rs, rp);
@@ -110,7 +110,7 @@ var SciChartRenderer = /** @class */ (function () {
         if (this.sciChartSurface.isDeleted) {
             return;
         }
-        // console.log("render start");
+        //console.log("render start");
         var nativeContext = renderContext.getNativeContext();
         var wasmContext = this.sciChartSurface.webAssemblyContext2D;
         var oldBlendMode;
@@ -126,7 +126,7 @@ var SciChartRenderer = /** @class */ (function () {
         this.sciChartSurface.onAnimate(timeElapsed);
         renderContext.enqueueLayeredDraw(function () {
             _this.sciChartSurface.updateBackground();
-        }, this.getAbsoluteLayer(DefaultRenderLayer_1.EDefaultRenderLayer.AxisBandsLayer));
+        }, this.getAbsoluteLayer(DefaultRenderLayer_1.EDefaultRenderLayer.Background));
         // Step 2 autorange
         this.sciChartSurface.updateStackedCollectionAccumulatedVectors();
         this.sciChartSurface.xAxes.asArray().forEach(function (axis) { return _this.tryPerformAutoRangeOn(axis, _this.sciChartSurface); });
@@ -164,6 +164,11 @@ var SciChartRenderer = /** @class */ (function () {
                 el.type === IAnnotation_1.EAnnotationType.RenderContextAxisMarkerAnnotation ||
                 el.type === IAnnotation_1.EAnnotationType.RenderContextNativeTextAnnotation);
         });
+        // Draw annotations before axis
+        var annotationsLayerBelowAxis = this.getAbsoluteLayer(DefaultRenderLayer_1.EDefaultRenderLayer.Background);
+        renderContext.enqueueLayeredDraw(function () {
+            _this.drawRenderContextAnnotations(renderContextAnnotations, xAxesById, yAxesById, IAnnotation_1.EAnnotationLayer.Background, renderContext, seriesViewRect);
+        }, annotationsLayerBelowAxis);
         var annotationsBelowLayer = this.getAbsoluteLayer(DefaultRenderLayer_1.EDefaultRenderLayer.AnnotationsBelowSeriesLayer);
         renderContext.enqueueLayeredDraw(function () {
             _this.drawRenderContextAnnotations(renderContextAnnotations, xAxesById, yAxesById, IAnnotation_1.EAnnotationLayer.BelowChart, renderContext, seriesViewRect);
@@ -373,7 +378,12 @@ var SciChartRenderer = /** @class */ (function () {
         nativeContext.SetClipRect(viewRect.x, viewRect.y, viewRect.width, viewRect.height);
         // Draw unselected series first
         renderableSeriesArray.forEach(function (rs, index) {
-            if (rs.isVisible && !rs.isSelected)
+            if (rs.isVisible && !rs.isSelected && !rs.isHovered)
+                drawSeriesImpl(index);
+        });
+        // Draw hovered series next
+        renderableSeriesArray.forEach(function (rs, index) {
+            if (rs.isVisible && rs.isHovered)
                 drawSeriesImpl(index);
         });
         // Draw selected series at higher z-index

package/Charting/Services/TitleRenderer.d.ts

@@ -1,3 +1,4 @@
+import { DeletableEntity } from "../../Core/DeletableEntity";
 import { ICacheable } from "../../Core/ICacheable";
 import { IDeletable } from "../../Core/IDeletable";
 import { Rect } from "../../Core/Rect";
@@ -18,7 +19,7 @@ export interface IChartTitleRenderer extends ITitleRenderer {
     titleOffset: Thickness;
     measure(title: string | string[], originalTextStyle: Required<TChartTitleStyle>, renderContext: WebGlRenderContext2D): void;
 }
-export declare class TitleRendererBase<TextStyleType extends TAxisTitleStyle | TChartTitleStyle> implements ITitleRenderer {
+export declare class TitleRendererBase<TextStyleType extends TAxisTitleStyle | TChartTitleStyle> extends DeletableEntity implements ITitleRenderer {
     /**
      * Defines a bounding {@link Rect} containing the title text
      */

package/Charting/Services/TitleRenderer.js

@@ -1,7 +1,23 @@
 "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.getAdjustedRotation = exports.TitleRendererBase = void 0;
 var app_1 = require("../../constants/app");
+var DeletableEntity_1 = require("../../Core/DeletableEntity");
 var Deleter_1 = require("../../Core/Deleter");
 var Rect_1 = require("../../Core/Rect");
 var TextPosition_1 = require("../../types/TextPosition");
@@ -12,32 +28,35 @@ var createNativeRect_1 = require("../Visuals/Helpers/createNativeRect");
 var NativeObject_1 = require("../Visuals/Helpers/NativeObject");
 var DpiHelper_1 = require("../Visuals/TextureManager/DpiHelper");
 var TextureManager_1 = require("../Visuals/TextureManager/TextureManager");
-var TitleRendererBase = /** @class */ (function () {
+var TitleRendererBase = /** @class */ (function (_super) {
+    __extends(TitleRendererBase, _super);
     function TitleRendererBase(webAssemblyContext) {
-        this.drawDebug = false;
-        this.useCache = true;
-        this.viewRectProperty = Rect_1.Rect.createZero();
+        var _this = _super.call(this) || this;
+        _this.drawDebug = false;
+        _this.useCache = true;
+        _this.viewRectProperty = Rect_1.Rect.createZero();
         /**
          * The height taken by the text with normal(horizontal) orientation including padding
          */
-        this.textHeight = 0;
+        _this.textHeight = 0;
         /**
          * The width taken by the text with normal(horizontal) orientation including padding
          */
-        this.textWidth = 0;
+        _this.textWidth = 0;
         /**
          * The height taken by the text considering current orientation orientation including padding
          */
-        this.desiredHeightProperty = 0;
+        _this.desiredHeightProperty = 0;
         /**
          * The width taken by the text considering current orientation orientation including padding
          */
-        this.desiredWidthProperty = 0;
-        this.useNativeTextProperty = false;
-        this.webAssemblyContext = webAssemblyContext;
-        this.textureManager = new TextureManager_1.TextureManager(webAssemblyContext);
-        this.onDpiChanged = this.onDpiChanged.bind(this);
-        DpiHelper_1.DpiHelper.dpiChanged.subscribe(this.onDpiChanged);
+        _this.desiredWidthProperty = 0;
+        _this.useNativeTextProperty = false;
+        _this.webAssemblyContext = webAssemblyContext;
+        _this.textureManager = new TextureManager_1.TextureManager(webAssemblyContext);
+        _this.onDpiChanged = _this.onDpiChanged.bind(_this);
+        DpiHelper_1.DpiHelper.dpiChanged.subscribe(_this.onDpiChanged);
+        return _this;
     }
     Object.defineProperty(TitleRendererBase.prototype, "viewRect", {
         /**
@@ -65,6 +84,8 @@ var TitleRendererBase = /** @class */ (function () {
     };
     TitleRendererBase.prototype.delete = function () {
         this.resetCache();
+        this.textureManager = (0, Deleter_1.deleteSafe)(this.textureManager);
+        this.webAssemblyContext = undefined;
         DpiHelper_1.DpiHelper.dpiChanged.unsubscribe(this.onDpiChanged);
     };
     TitleRendererBase.prototype.resetCache = function () {
@@ -236,7 +257,7 @@ var TitleRendererBase = /** @class */ (function () {
         }
     };
     return TitleRendererBase;
-}());
+}(DeletableEntity_1.DeletableEntity));
 exports.TitleRendererBase = TitleRendererBase;
 var getAdjustedRotation = function (rotation, position) {
     if (rotation !== undefined) {

package/Charting/Visuals/Annotations/AdornerLayer.d.ts

@@ -3,7 +3,7 @@ import { SciChartSurface } from "../SciChartSurface";
 import { AnnotationBase } from "./AnnotationBase";
 import { IAnnotation } from "./IAnnotation";
 export declare class AdornerLayer {
-    readonly parentSurface: SciChartSurface;
+    parentSurface: SciChartSurface;
     private selectedAnnotationProperty;
     constructor(scs: SciChartSurface);
     selectAnnotation(args: ModifierMouseArgs): boolean;

package/Charting/Visuals/Annotations/AnnotationBase.d.ts

@@ -1,9 +1,9 @@
+import { DeletableEntity } from "../../../Core/DeletableEntity";
 import { EventHandler } from "../../../Core/EventHandler";
 import { Point } from "../../../Core/Point";
 import { EXyDirection } from "../../../types/XyDirection";
 import { ModifierMouseArgs } from "../../ChartModifiers/ModifierMouseArgs";
 import { CoordinateCalculatorBase } from "../../Numerics/CoordinateCalculators/CoordinateCalculatorBase";
-import { SciChartSurface } from "../SciChartSurface";
 import { SciChartSurfaceBase } from "../SciChartSurfaceBase";
 import { TDpiChangedEventArgs } from "../TextureManager/DpiHelper";
 import { AnnotationClickEventArgs } from "./AnnotationClickEventArgs";
@@ -222,7 +222,7 @@ export declare enum ECoordinateMode {
 /**
  * Defines the base class to an Annotation - a type of marker, text label, line or custom UI overlay on a 2D Cartesian {@link SciChartSurface}
  */
-export declare abstract class AnnotationBase implements IAnnotation, IAdornerProvider {
+export declare abstract class AnnotationBase extends DeletableEntity implements IAnnotation, IAdornerProvider {
     dragStarted: EventHandler<void>;
     dragEnded: EventHandler<void>;
     dragDelta: EventHandler<AnnotationDragDeltaEventArgs>;
@@ -260,10 +260,10 @@ export declare abstract class AnnotationBase implements IAnnotation, IAdornerPro
     protected selectionBoxDeltaProperty: number;
     protected selectionBoxThicknessProperty: number;
     protected dragPointsProperty: readonly EDraggingGripPoint[];
+    protected parentSurfaceProperty: SciChartSurfaceBase;
     private opacityProperty;
     private annotationLayerProperty;
     private isEditableProperty;
-    private parentSurfaceProperty;
     private x1Property;
     private x2Property;
     private y1Property;
@@ -287,11 +287,11 @@ export declare abstract class AnnotationBase implements IAnnotation, IAdornerPro
     /**
      * Gets or sets current {@link EDraggingGripPoint}
      */
-    protected set adornerDraggingPoint(value: EDraggingGripPoint);
+    set adornerDraggingPoint(value: EDraggingGripPoint);
     /** @inheritDoc */
-    get parentSurface(): SciChartSurface;
+    get parentSurface(): SciChartSurfaceBase;
     /** @inheritDoc */
-    set parentSurface(parentSurface: SciChartSurface);
+    set parentSurface(parentSurface: SciChartSurfaceBase);
     /** @inheritDoc */
     get isEditable(): boolean;
     /** @inheritDoc */

package/Charting/Visuals/Annotations/AnnotationBase.js

@@ -1,7 +1,23 @@
 "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.AnnotationBase = exports.ECoordinateMode = exports.EDraggingGripPoint = void 0;
 var classFactory_1 = require("../../../Builder/classFactory");
+var DeletableEntity_1 = require("../../../Core/DeletableEntity");
 var EventHandler_1 = require("../../../Core/EventHandler");
 var Guard_1 = require("../../../Core/Guard");
 var Point_1 = require("../../../Core/Point");
@@ -62,108 +78,112 @@ var ECoordinateMode;
 /**
  * Defines the base class to an Annotation - a type of marker, text label, line or custom UI overlay on a 2D Cartesian {@link SciChartSurface}
  */
-var AnnotationBase = /** @class */ (function () {
+var AnnotationBase = /** @class */ (function (_super) {
+    __extends(AnnotationBase, _super);
     /**
      * Creates an instance of the Annotation
      * @param options optional parameters of type {@link IAnnotationBaseOptions} used to configure the annotation at construct time
      */
     function AnnotationBase(options) {
+        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.showWarning = true;
-        this.prevIsSelected = true;
+        _this = _super.call(this) || this;
+        _this.showWarning = true;
+        _this.prevIsSelected = true;
         /** the annotation absolute coordinates */
-        this.annotationBorders = {
+        _this.annotationBorders = {
             x1: 0,
             x2: 0,
             y1: 0,
             y2: 0
         };
-        this.typeMap = new Map();
-        this.isHiddenProperty = false;
-        this.annotationsGripsStrokeProperty = SciChartSurfaceBase_1.SciChartSurfaceBase.DEFAULT_THEME.annotationsGripsBorderBrush;
-        this.annotationsGripsFillProperty = SciChartSurfaceBase_1.SciChartSurfaceBase.DEFAULT_THEME.annotationsGripsBackroundBrush;
-        this.annotationsGripsRadiusProperty = constants_1.ADORNER_GRIP_RADIUS;
-        this.selectionBoxStrokeProperty = SciChartSurfaceBase_1.SciChartSurfaceBase.DEFAULT_THEME.annotationSelectionStroke;
-        this.selectionBoxDeltaProperty = 1.5;
-        this.selectionBoxThicknessProperty = 6;
-        this.dragPointsProperty = [
+        _this.typeMap = new Map();
+        _this.isHiddenProperty = false;
+        _this.annotationsGripsStrokeProperty = SciChartSurfaceBase_1.SciChartSurfaceBase.DEFAULT_THEME.annotationsGripsBorderBrush;
+        _this.annotationsGripsFillProperty = SciChartSurfaceBase_1.SciChartSurfaceBase.DEFAULT_THEME.annotationsGripsBackroundBrush;
+        _this.annotationsGripsRadiusProperty = constants_1.ADORNER_GRIP_RADIUS;
+        _this.selectionBoxStrokeProperty = SciChartSurfaceBase_1.SciChartSurfaceBase.DEFAULT_THEME.annotationSelectionStroke;
+        _this.selectionBoxDeltaProperty = 1.5;
+        _this.selectionBoxThicknessProperty = 6;
+        _this.dragPointsProperty = [
             EDraggingGripPoint.Body,
             EDraggingGripPoint.x1y1,
             EDraggingGripPoint.x2y2,
             EDraggingGripPoint.x2y1,
             EDraggingGripPoint.x1y2
         ];
-        this.annotationLayerProperty = IAnnotation_1.EAnnotationLayer.AboveChart;
-        this.isEditableProperty = false;
-        this.xAxisIdProperty = AxisCore_1.AxisCore.DEFAULT_AXIS_ID;
-        this.yAxisIdProperty = AxisCore_1.AxisCore.DEFAULT_AXIS_ID;
-        this.xCoordinateModeProperty = ECoordinateMode.DataValue;
-        this.yCoordinateModeProperty = ECoordinateMode.DataValue;
-        this.isSelectedProperty = false;
-        this.resizeDirectionsProperty = XyDirection_1.EXyDirection.XyDirection;
-        this.id = (_a = options === null || options === void 0 ? void 0 : options.id) !== null && _a !== void 0 ? _a : (0, guid_1.generateGuid)();
-        this.dragStarted = new EventHandler_1.EventHandler();
-        this.dragEnded = new EventHandler_1.EventHandler();
-        this.dragDelta = new EventHandler_1.EventHandler();
-        this.selectedChanged = new EventHandler_1.EventHandler();
-        this.clicked = new EventHandler_1.EventHandler();
-        this.annotationLayerProperty = (_b = options === null || options === void 0 ? void 0 : options.annotationLayer) !== null && _b !== void 0 ? _b : this.annotationLayerProperty;
-        this.resizeDirectionsProperty = (_c = options === null || options === void 0 ? void 0 : options.resizeDirections) !== null && _c !== void 0 ? _c : this.resizeDirectionsProperty;
-        this.isEditableProperty = (_d = options === null || options === void 0 ? void 0 : options.isEditable) !== null && _d !== void 0 ? _d : this.isEditableProperty;
-        this.isHiddenProperty = (_e = options === null || options === void 0 ? void 0 : options.isHidden) !== null && _e !== void 0 ? _e : this.isHiddenProperty;
-        this.x1Property = (_f = options === null || options === void 0 ? void 0 : options.x1) !== null && _f !== void 0 ? _f : this.x1Property;
-        this.y1Property = (_g = options === null || options === void 0 ? void 0 : options.y1) !== null && _g !== void 0 ? _g : this.y1Property;
-        this.x2Property = (_h = options === null || options === void 0 ? void 0 : options.x2) !== null && _h !== void 0 ? _h : this.x2Property;
-        this.y2Property = (_j = options === null || options === void 0 ? void 0 : options.y2) !== null && _j !== void 0 ? _j : this.y2Property;
-        this.xAxisIdProperty = (_k = options === null || options === void 0 ? void 0 : options.xAxisId) !== null && _k !== void 0 ? _k : this.xAxisIdProperty;
-        this.yAxisIdProperty = (_l = options === null || options === void 0 ? void 0 : options.yAxisId) !== null && _l !== void 0 ? _l : this.yAxisIdProperty;
-        this.xCoordinateModeProperty = (_m = options === null || options === void 0 ? void 0 : options.xCoordinateMode) !== null && _m !== void 0 ? _m : this.xCoordinateModeProperty;
-        this.yCoordinateModeProperty = (_o = options === null || options === void 0 ? void 0 : options.yCoordinateMode) !== null && _o !== void 0 ? _o : this.yCoordinateModeProperty;
-        this.isSelectedProperty = (_p = options === null || options === void 0 ? void 0 : options.isSelected) !== null && _p !== void 0 ? _p : this.isSelectedProperty;
-        this.opacityProperty = (_q = options === null || options === void 0 ? void 0 : options.opacity) !== null && _q !== void 0 ? _q : 1.0;
-        this.annotationsGripsStrokeProperty = (_r = options === null || options === void 0 ? void 0 : options.annotationsGripsStroke) !== null && _r !== void 0 ? _r : this.annotationsGripsStrokeProperty;
-        this.annotationsGripsFillProperty = (_s = options === null || options === void 0 ? void 0 : options.annotationsGripsFill) !== null && _s !== void 0 ? _s : this.annotationsGripsFillProperty;
-        this.annotationsGripsRadiusProperty = (_t = options === null || options === void 0 ? void 0 : options.annotationsGripsRadius) !== null && _t !== void 0 ? _t : this.annotationsGripsRadius;
-        this.selectionBoxStroke = (_u = options === null || options === void 0 ? void 0 : options.selectionBoxStroke) !== null && _u !== void 0 ? _u : this.selectionBoxStrokeProperty;
-        this.selectionBoxDelta = (_v = options === null || options === void 0 ? void 0 : options.selectionBoxDelta) !== null && _v !== void 0 ? _v : this.selectionBoxDeltaProperty;
-        this.selectionBoxThickness = (_w = options === null || options === void 0 ? void 0 : options.selectionBoxThickness) !== null && _w !== void 0 ? _w : this.selectionBoxThicknessProperty;
-        this.dragPointsProperty = (_x = options === null || options === void 0 ? void 0 : options.dragPoints) !== null && _x !== void 0 ? _x : this.dragPointsProperty;
+        _this.annotationLayerProperty = IAnnotation_1.EAnnotationLayer.AboveChart;
+        _this.isEditableProperty = false;
+        _this.xAxisIdProperty = AxisCore_1.AxisCore.DEFAULT_AXIS_ID;
+        _this.yAxisIdProperty = AxisCore_1.AxisCore.DEFAULT_AXIS_ID;
+        _this.xCoordinateModeProperty = ECoordinateMode.DataValue;
+        _this.yCoordinateModeProperty = ECoordinateMode.DataValue;
+        _this.isSelectedProperty = false;
+        _this.resizeDirectionsProperty = XyDirection_1.EXyDirection.XyDirection;
+        _this.id = (_a = options === null || options === void 0 ? void 0 : options.id) !== null && _a !== void 0 ? _a : (0, guid_1.generateGuid)();
+        _this.dragStarted = new EventHandler_1.EventHandler();
+        _this.dragEnded = new EventHandler_1.EventHandler();
+        _this.dragDelta = new EventHandler_1.EventHandler();
+        _this.selectedChanged = new EventHandler_1.EventHandler();
+        _this.clicked = new EventHandler_1.EventHandler();
+        _this.annotationLayerProperty = (_b = options === null || options === void 0 ? void 0 : options.annotationLayer) !== null && _b !== void 0 ? _b : _this.annotationLayerProperty;
+        _this.resizeDirectionsProperty = (_c = options === null || options === void 0 ? void 0 : options.resizeDirections) !== null && _c !== void 0 ? _c : _this.resizeDirectionsProperty;
+        _this.isEditableProperty = (_d = options === null || options === void 0 ? void 0 : options.isEditable) !== null && _d !== void 0 ? _d : _this.isEditableProperty;
+        _this.isHiddenProperty = (_e = options === null || options === void 0 ? void 0 : options.isHidden) !== null && _e !== void 0 ? _e : _this.isHiddenProperty;
+        _this.x1Property = (_f = options === null || options === void 0 ? void 0 : options.x1) !== null && _f !== void 0 ? _f : _this.x1Property;
+        _this.y1Property = (_g = options === null || options === void 0 ? void 0 : options.y1) !== null && _g !== void 0 ? _g : _this.y1Property;
+        _this.x2Property = (_h = options === null || options === void 0 ? void 0 : options.x2) !== null && _h !== void 0 ? _h : _this.x2Property;
+        _this.y2Property = (_j = options === null || options === void 0 ? void 0 : options.y2) !== null && _j !== void 0 ? _j : _this.y2Property;
+        _this.xAxisIdProperty = (_k = options === null || options === void 0 ? void 0 : options.xAxisId) !== null && _k !== void 0 ? _k : _this.xAxisIdProperty;
+        _this.yAxisIdProperty = (_l = options === null || options === void 0 ? void 0 : options.yAxisId) !== null && _l !== void 0 ? _l : _this.yAxisIdProperty;
+        _this.xCoordinateModeProperty = (_m = options === null || options === void 0 ? void 0 : options.xCoordinateMode) !== null && _m !== void 0 ? _m : _this.xCoordinateModeProperty;
+        _this.yCoordinateModeProperty = (_o = options === null || options === void 0 ? void 0 : options.yCoordinateMode) !== null && _o !== void 0 ? _o : _this.yCoordinateModeProperty;
+        _this.isSelectedProperty = (_p = options === null || options === void 0 ? void 0 : options.isSelected) !== null && _p !== void 0 ? _p : _this.isSelectedProperty;
+        _this.opacityProperty = (_q = options === null || options === void 0 ? void 0 : options.opacity) !== null && _q !== void 0 ? _q : 1.0;
+        _this.annotationsGripsStrokeProperty = (_r = options === null || options === void 0 ? void 0 : options.annotationsGripsStroke) !== null && _r !== void 0 ? _r : _this.annotationsGripsStrokeProperty;
+        _this.annotationsGripsFillProperty = (_s = options === null || options === void 0 ? void 0 : options.annotationsGripsFill) !== null && _s !== void 0 ? _s : _this.annotationsGripsFillProperty;
+        _this.annotationsGripsRadiusProperty = (_t = options === null || options === void 0 ? void 0 : options.annotationsGripsRadius) !== null && _t !== void 0 ? _t : _this.annotationsGripsRadius;
+        _this.selectionBoxStroke = (_u = options === null || options === void 0 ? void 0 : options.selectionBoxStroke) !== null && _u !== void 0 ? _u : _this.selectionBoxStrokeProperty;
+        _this.selectionBoxDelta = (_v = options === null || options === void 0 ? void 0 : options.selectionBoxDelta) !== null && _v !== void 0 ? _v : _this.selectionBoxDeltaProperty;
+        _this.selectionBoxThickness = (_w = options === null || options === void 0 ? void 0 : options.selectionBoxThickness) !== null && _w !== void 0 ? _w : _this.selectionBoxThicknessProperty;
+        _this.dragPointsProperty = (_x = options === null || options === void 0 ? void 0 : options.dragPoints) !== null && _x !== void 0 ? _x : _this.dragPointsProperty;
         if (options === null || options === void 0 ? void 0 : options.onDragStarted) {
             if (typeof options.onDragStarted === "string") {
-                this.typeMap.set("onDragStarted", options.onDragStarted);
-                this.dragStarted.subscribe((0, classFactory_1.getFunction)(BaseType_1.EBaseType.OptionFunction, options.onDragStarted));
+                _this.typeMap.set("onDragStarted", options.onDragStarted);
+                _this.dragStarted.subscribe((0, classFactory_1.getFunction)(BaseType_1.EBaseType.OptionFunction, options.onDragStarted));
             }
             else {
-                this.dragStarted.subscribe(options.onDragStarted);
+                _this.dragStarted.subscribe(options.onDragStarted);
             }
         }
         if (options === null || options === void 0 ? void 0 : options.onDragEnded) {
             if (typeof options.onDragEnded === "string") {
-                this.typeMap.set("onDragEnded", options.onDragEnded);
-                this.dragEnded.subscribe((0, classFactory_1.getFunction)(BaseType_1.EBaseType.OptionFunction, options.onDragEnded));
+                _this.typeMap.set("onDragEnded", options.onDragEnded);
+                _this.dragEnded.subscribe((0, classFactory_1.getFunction)(BaseType_1.EBaseType.OptionFunction, options.onDragEnded));
             }
             else {
-                this.dragEnded.subscribe(options.onDragEnded);
+                _this.dragEnded.subscribe(options.onDragEnded);
             }
         }
         if (options === null || options === void 0 ? void 0 : options.onDrag) {
             if (typeof options.onDrag === "string") {
-                this.typeMap.set("onDrag", options.onDrag);
-                this.dragDelta.subscribe((0, classFactory_1.getFunction)(BaseType_1.EBaseType.OptionFunction, options.onDrag));
+                _this.typeMap.set("onDrag", options.onDrag);
+                _this.dragDelta.subscribe((0, classFactory_1.getFunction)(BaseType_1.EBaseType.OptionFunction, options.onDrag));
             }
             else {
-                this.dragDelta.subscribe(options.onDrag);
+                _this.dragDelta.subscribe(options.onDrag);
             }
         }
         if (options === null || options === void 0 ? void 0 : options.onClick) {
             if (typeof options.onClick === "string") {
-                this.typeMap.set("onClick", options.onClick);
-                this.clicked.subscribe((0, classFactory_1.getFunction)(BaseType_1.EBaseType.OptionFunction, options.onClick));
+                _this.typeMap.set("onClick", options.onClick);
+                _this.clicked.subscribe((0, classFactory_1.getFunction)(BaseType_1.EBaseType.OptionFunction, options.onClick));
             }
             else {
-                this.clicked.subscribe(options.onClick);
+                _this.clicked.subscribe(options.onClick);
             }
         }
+        return _this;
     }
     Object.defineProperty(AnnotationBase.prototype, "annotationLayer", {
         /** @inheritDoc */
@@ -991,5 +1011,5 @@ var AnnotationBase = /** @class */ (function () {
         };
     };
     return AnnotationBase;
-}());
+}(DeletableEntity_1.DeletableEntity));
 exports.AnnotationBase = AnnotationBase;

package/Charting/Visuals/Annotations/CursorTooltipSvgAnnotation.js

@@ -78,6 +78,10 @@ var CursorTooltipSvgAnnotation = /** @class */ (function (_super) {
                     this.notifyPropertyChanged(constants_1.PROPERTY.SERIES_INFOS);
                 }
             }
+            else {
+                this.seriesInfosProperty = newSeriesInfos;
+                this.notifyPropertyChanged(constants_1.PROPERTY.SERIES_INFOS);
+            }
         },
         enumerable: false,
         configurable: true
@@ -201,6 +205,10 @@ var CursorTooltipSvgAnnotation = /** @class */ (function (_super) {
             this.svgRoot.removeChild(this.svg);
         }
         this.setSvg(undefined);
+        if (this.svgLegend) {
+            this.svgRoot.removeChild(this.svgLegend);
+            this.svgLegend = undefined;
+        }
     };
     /**
      * @inheritDoc

package/Charting/Visuals/Annotations/IAnnotation.d.ts

@@ -1,5 +1,4 @@
 import { IDeletable } from "../../../Core/IDeletable";
-import { SciChartSurface } from "../SciChartSurface";
 import { SciChartSurfaceBase } from "../SciChartSurfaceBase";
 import { INotifyOnDpiChanged } from "../TextureManager/DpiHelper";
 import { ECoordinateMode } from "./AnnotationBase";
@@ -21,7 +20,13 @@ export declare enum EAnnotationLayer {
      * The Grid lines and Axis Bands will show over the annotation,
      * so consider setting {@link AxisCore.axisBandsFill} to a semi-transparent color to avoid this.
      */
-    BelowChart = "BelowChart"
+    BelowChart = "BelowChart",
+    /**
+     * The {@link IAnnotation | Annotation} will be displayed below the chart grid lines, bands, and axes.
+     * @remarks
+     * Use this for custom background behind the chart.
+     */
+    Background = "Background"
 }
 /**
  * Defines the type of {@link IAnnotation | Annotation}.
@@ -249,9 +254,9 @@ export interface IAnnotation extends IDeletable, INotifyOnDpiChanged {
      */
     isHidden: boolean;
     /**
-     * @description the parent SciChartSurface for this annotation
+     * @description the parent SciChartSurfaceBase for this annotation
      */
-    parentSurface: SciChartSurface;
+    parentSurface: SciChartSurfaceBase;
     /**
      * @description if true, the chart is vertical
      */

package/Charting/Visuals/Annotations/IAnnotation.js

@@ -21,6 +21,12 @@ var EAnnotationLayer;
      * so consider setting {@link AxisCore.axisBandsFill} to a semi-transparent color to avoid this.
      */
     EAnnotationLayer["BelowChart"] = "BelowChart";
+    /**
+     * The {@link IAnnotation | Annotation} will be displayed below the chart grid lines, bands, and axes.
+     * @remarks
+     * Use this for custom background behind the chart.
+     */
+    EAnnotationLayer["Background"] = "Background";
 })(EAnnotationLayer = exports.EAnnotationLayer || (exports.EAnnotationLayer = {}));
 /**
  * Defines the type of {@link IAnnotation | Annotation}.