scichart 2.0.2204 → 2.1.2267

package/Charting/Visuals/Axis/AxisRenderer.js

@@ -45,6 +45,7 @@ var AxisRenderer = /** @class */ (function () {
         this.hideOverlappingLabelsProperty = true;
         this.webAssemblyContext = webAssemblyContext;
         this.textureManager = new TextureManager_1.TextureManager(webAssemblyContext);
+        this.vertices = new webAssemblyContext.VectorColorVertex();
         if (!app_1.IS_TEST_ENV) {
             this.measureTextCanvas = document.createElement("canvas");
             this.measureTextCanvas.width = 1;
@@ -55,6 +56,7 @@ var AxisRenderer = /** @class */ (function () {
     AxisRenderer.prototype.delete = function () {
         this.measureTextCanvas = undefined;
         this.textureManager = (0, Deleter_1.deleteSafe)(this.textureManager);
+        this.vertices = (0, Deleter_1.deleteSafe)(this.vertices);
     };
     /**
      * Called when the {@link AxisRenderer} is attached to an {@link AxisBase2D | Axis}
@@ -311,7 +313,6 @@ var AxisRenderer = /** @class */ (function () {
             return;
         var viewRect = this.viewRect;
         var tickSize = tickStyle.tickSize;
-        var vertices = new this.webAssemblyContext.VectorColorVertex();
         var isHorizontal = (0, AxisAlignment_1.getIsHorizontal)(axisAlignment);
         if (isHorizontal === undefined) {
             return;
@@ -347,17 +348,16 @@ var AxisRenderer = /** @class */ (function () {
                 }
             }
             var vertex = new _this.webAssemblyContext.SCRTColorVertex(x1, y1);
-            vertices.push_back(vertex);
+            _this.vertices.push_back(vertex);
             vertex.delete();
             var vertex2 = new _this.webAssemblyContext.SCRTColorVertex(x2, y2);
-            vertices.push_back(vertex2);
+            _this.vertices.push_back(vertex2);
             vertex2.delete();
         });
         var leftOffset = viewRect.left - (isHorizontal ? axisOffset : 0);
         var topOffset = viewRect.top - (isHorizontal ? 0 : axisOffset);
-        renderContext.drawLinesNative(vertices, pen, WebGlRenderContext2D_1.ELineDrawMode.DiscontinuousLine, leftOffset, topOffset);
-        vertices.clear();
-        vertices.delete();
+        renderContext.drawLinesNative(this.vertices, pen, WebGlRenderContext2D_1.ELineDrawMode.DiscontinuousLine, leftOffset, topOffset);
+        this.vertices.clear();
     };
     /**
      * Called internally - draws axis labels when needed, for example for line annotations
@@ -367,22 +367,49 @@ var AxisRenderer = /** @class */ (function () {
             return undefined;
         var nativeContext = renderContext.getNativeContext();
         var _a = this.textureManager.createSimpleTextTexture(displayValue, __assign(__assign({}, textStyle), { padding: new Thickness_1.Thickness(2, 2, 2, 2) }), fill), bitmapTexture = _a.bitmapTexture, textureHeight = _a.textureHeight, textureWidth = _a.textureWidth;
+        var canvas = {
+            height: this.parentAxis.parentSurface.domCanvas2D.height,
+            width: this.parentAxis.parentSurface.domCanvas2D.width
+        };
+        var getPosition = function (viewRectSize, coord, canvasSize, textureSize$) {
+            if (viewRectSize + coord < textureSize$ / 2) {
+                return 0;
+            }
+            else if (viewRectSize + coord > canvasSize - textureSize$ / 2) {
+                return canvasSize - textureSize$;
+            }
+            else {
+                return viewRectSize + coord - textureSize$ / 2;
+            }
+        };
         var xPosition, yPosition;
         if (axisAlignment === AxisAlignment_1.EAxisAlignment.Bottom) {
-            xPosition = this.viewRect.x + coord - textureWidth / 2;
+            xPosition = getPosition(this.viewRect.x, coord, canvas.width, textureWidth);
             yPosition = this.viewRect.y;
+            if (canvas.height - yPosition < textureHeight) {
+                yPosition = canvas.height - textureHeight;
+            }
         }
         else if (axisAlignment === AxisAlignment_1.EAxisAlignment.Top) {
-            xPosition = this.viewRect.x + coord - textureWidth / 2;
+            xPosition = getPosition(this.viewRect.x, coord, canvas.width, textureWidth);
             yPosition = this.viewRect.y + this.viewRect.height - textureHeight;
+            if (this.parentAxis.axisLayoutState.axisSize < textureHeight) {
+                yPosition = 0;
+            }
         }
         else if (axisAlignment === AxisAlignment_1.EAxisAlignment.Left) {
             xPosition = this.viewRect.x + this.viewRect.width - textureWidth;
-            yPosition = this.viewRect.y + coord - textureHeight / 2;
+            yPosition = getPosition(this.viewRect.y, coord, canvas.height, textureHeight);
+            if (this.parentAxis.axisLayoutState.axisSize < textureWidth) {
+                xPosition = 0;
+            }
         }
         else if (axisAlignment === AxisAlignment_1.EAxisAlignment.Right) {
             xPosition = this.viewRect.x;
-            yPosition = this.viewRect.y + coord - textureHeight / 2;
+            yPosition = getPosition(this.viewRect.y, coord, canvas.height, textureHeight);
+            if (canvas.width - xPosition < textureWidth) {
+                xPosition = canvas.width - textureWidth;
+            }
         }
         nativeContext.DrawTexture(bitmapTexture, Math.round(xPosition), Math.round(yPosition), textureWidth, textureHeight);
         bitmapTexture.delete();

package/Charting/Visuals/Axis/CategoryAxisBase.d.ts

@@ -6,11 +6,30 @@ import { AxisBase2D, IAxisBase2dOptions } from "./AxisBase2D";
 import { ILabel2DOptions } from "./LabelProvider/LabelProviderBase2D";
 export declare type TCategoryCoordCalc = CategoryCoordinateCalculator | FlippedCategoryCoordinateCalculator;
 export interface ICategoryAxisBaseOptions extends IAxisBase2dOptions, ILabel2DOptions {
+    /**
+     * The default x values to use if no series or data is added to the chart.
+     * The tick values shown will depend on the visible range, which for category axis is by index, not by value.
+     * eg if you want default values [10, 20, 30, 40] you would need to set visibleRange: new NumberRange(0,3)
+     * By default it will start at 0 and increment by 1, up to the size of the visible range.
+     * To change the start and step set defaultXStart and defaultXStep
+     */
+    defaultXValues?: number[];
+    /**
+     * The starting value for default x values.  See defaultXValues
+     */
+    defaultXStart?: number;
+    /**
+     * The step size for default x values.  See defaultXValues
+     */
+    defaultXStep?: number;
 }
 /**
  * @summary A 2D Chart Category Axis Base type
  */
 export declare abstract class CategoryAxisBase extends AxisBase2D {
+    private defaultXValuesProperty;
+    private defaultXStartProperty;
+    private defaultXStepProperty;
     /**
      * Creates an instance of a {@link CategoryAxisBase}
      * @param webAssemblyContext The {@link TSciChart | SciChart 2D WebAssembly Context} containing native methods and
@@ -22,6 +41,38 @@ export declare abstract class CategoryAxisBase extends AxisBase2D {
      * @inheritDoc
      */
     get isCategoryAxis(): boolean;
+    /**
+     * The default x values to use if no series or data is added to the chart.
+     * The tick values shown will depend on the visible range, which for category axis is by index, not by value.
+     * eg if you want default values [10, 20, 30, 40] you would need to set visibleRange: new NumberRange(0,3)
+     * By default it will start at 0 and increment by 1, up to the size of the visible range.
+     * To change the start and step set defaultXStart and defaultXStep
+     */
+    get defaultXValues(): number[];
+    /**
+     * The default x values to use if no series or data is added to the chart.
+     * The tick values shown will depend on the visible range, which for category axis is by index, not by value.
+     * eg if you want default values [10, 20, 30, 40] you would need to set visibleRange: new NumberRange(0,3)
+     * By default it will start at 0 and increment by 1, up to the size of the visible range.
+     * To change the start and step set defaultXStart and defaultXStep
+     */
+    set defaultXValues(values: number[]);
+    /**
+     * The starting value for default x values.  See defaultXValues
+     */
+    get defaultXStart(): number;
+    /**
+     * The starting value for default x values.  See defaultXValues
+     */
+    set defaultXStart(value: number);
+    /**
+     * The step size for default x values.  See defaultXValues
+     */
+    get defaultXStep(): number;
+    /**
+     * The step size for default x values.  See defaultXValues
+     */
+    set defaultXStep(value: number);
     /**
      * @inheritDoc
      */

package/Charting/Visuals/Axis/CategoryAxisBase.js

@@ -19,6 +19,7 @@ exports.CategoryAxisBase = void 0;
 var Deleter_1 = require("../../../Core/Deleter");
 var NumberRange_1 = require("../../../Core/NumberRange");
 var SeriesType_1 = require("../../../types/SeriesType");
+var appendDoubleVectorFromJsArray_1 = require("../../../utils/ccall/appendDoubleVectorFromJsArray");
 var CategoryCoordinateCalculator_1 = require("../../Numerics/CoordinateCalculators/CategoryCoordinateCalculator");
 var FlippedCategoryCoordinateCalculator_1 = require("../../Numerics/CoordinateCalculators/FlippedCategoryCoordinateCalculator");
 var NumericTickProvider_1 = require("../../Numerics/TickProviders/NumericTickProvider");
@@ -36,7 +37,14 @@ var CategoryAxisBase = /** @class */ (function (_super) {
      * @param options Optional parameters of type {@link ICategoryAxisBaseOptions} used to configure the axis at instantiation time
      */
     function CategoryAxisBase(webAssemblyContext, options) {
+        var _a, _b, _c;
         var _this = _super.call(this, webAssemblyContext, options) || this;
+        _this.defaultXValuesProperty = [];
+        _this.defaultXStartProperty = 0;
+        _this.defaultXStepProperty = 1;
+        _this.defaultXValuesProperty = (_a = options === null || options === void 0 ? void 0 : options.defaultXValues) !== null && _a !== void 0 ? _a : _this.defaultXValuesProperty;
+        _this.defaultXStartProperty = (_b = options === null || options === void 0 ? void 0 : options.defaultXStart) !== null && _b !== void 0 ? _b : _this.defaultXStartProperty;
+        _this.defaultXStepProperty = (_c = options === null || options === void 0 ? void 0 : options.defaultXStep) !== null && _c !== void 0 ? _c : _this.defaultXStepProperty;
         _this.tickProvider = new NumericTickProvider_1.NumericTickProvider(_this.webAssemblyContext2D);
         _this.deltaCalculator = new CategoryDeltaCalculator_1.CategoryDeltaCalculator(_this.webAssemblyContext2D);
         return _this;
@@ -51,6 +59,68 @@ var CategoryAxisBase = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(CategoryAxisBase.prototype, "defaultXValues", {
+        /**
+         * The default x values to use if no series or data is added to the chart.
+         * The tick values shown will depend on the visible range, which for category axis is by index, not by value.
+         * eg if you want default values [10, 20, 30, 40] you would need to set visibleRange: new NumberRange(0,3)
+         * By default it will start at 0 and increment by 1, up to the size of the visible range.
+         * To change the start and step set defaultXStart and defaultXStep
+         */
+        get: function () {
+            return this.defaultXValuesProperty;
+        },
+        /**
+         * The default x values to use if no series or data is added to the chart.
+         * The tick values shown will depend on the visible range, which for category axis is by index, not by value.
+         * eg if you want default values [10, 20, 30, 40] you would need to set visibleRange: new NumberRange(0,3)
+         * By default it will start at 0 and increment by 1, up to the size of the visible range.
+         * To change the start and step set defaultXStart and defaultXStep
+         */
+        set: function (values) {
+            this.defaultXValuesProperty = values;
+            if (this.invalidateParentCallback)
+                this.invalidateParentCallback();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(CategoryAxisBase.prototype, "defaultXStart", {
+        /**
+         * The starting value for default x values.  See defaultXValues
+         */
+        get: function () {
+            return this.defaultXStartProperty;
+        },
+        /**
+         * The starting value for default x values.  See defaultXValues
+         */
+        set: function (value) {
+            this.defaultXStartProperty = value;
+            if (this.invalidateParentCallback)
+                this.invalidateParentCallback();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(CategoryAxisBase.prototype, "defaultXStep", {
+        /**
+         * The step size for default x values.  See defaultXValues
+         */
+        get: function () {
+            return this.defaultXStepProperty;
+        },
+        /**
+         * The step size for default x values.  See defaultXValues
+         */
+        set: function (value) {
+            this.defaultXStepProperty = value;
+            if (this.invalidateParentCallback)
+                this.invalidateParentCallback();
+        },
+        enumerable: false,
+        configurable: true
+    });
     /**
      * @inheritDoc
      */
@@ -60,16 +130,6 @@ var CategoryAxisBase = /** @class */ (function (_super) {
         var coordCalc = this.getCurrentCoordinateCalculatorInternal();
         var scs = this.parentSurface;
         var renderableSeries = scs.renderableSeries.asArray().find(function (rs) { return rs.xAxisId === _this.id; });
-        if (!renderableSeries) {
-            throw new Error("category x axis with id=".concat(this.id, " should have renderable series"));
-        }
-        if (!renderableSeries.hasDataSeries()) {
-            throw new Error("category x axis with id=".concat(this.id, " should have data series"));
-        }
-        var dataSeriesLength = renderableSeries.getDataSeriesValuesCount();
-        if (dataSeriesLength === 0) {
-            throw new Error("category x axis with id=".concat(this.id, " should have data series count > 0"));
-        }
         this.setBaseXValues(coordCalc, renderableSeries);
         this.coordCalcCache = coordCalc;
     };
@@ -84,16 +144,6 @@ var CategoryAxisBase = /** @class */ (function (_super) {
         var shouldFlip = !(this.isXAxis !== this.flippedCoordinates);
         var scs = this.parentSurface;
         var renderableSeries = scs.renderableSeries.asArray().find(function (rs) { return rs.xAxisId === _this.id; });
-        if (!renderableSeries) {
-            throw new Error("category x axis with id=".concat(this.id, " should have renderable series"));
-        }
-        if (!renderableSeries.hasDataSeries()) {
-            throw new Error("category x axis with id=".concat(this.id, " should have data series"));
-        }
-        var dataSeriesLength = renderableSeries.getDataSeriesValuesCount();
-        if (dataSeriesLength === 0) {
-            throw new Error("category x axis with id=".concat(this.id, " should have data series count > 0"));
-        }
         var coordCalc = shouldFlip
             ? new FlippedCategoryCoordinateCalculator_1.FlippedCategoryCoordinateCalculator(this.webAssemblyContext2D, size, 0, 0, min, max, this.offset)
             : new CategoryCoordinateCalculator_1.CategoryCoordinateCalculator(this.webAssemblyContext2D, size, 0, 0, min, max, this.offset);
@@ -128,6 +178,21 @@ var CategoryAxisBase = /** @class */ (function (_super) {
         return Math.min(Math.max(1, this.maxAutoTicks), coordCalc.baseXValues.size());
     };
     CategoryAxisBase.prototype.setBaseXValues = function (coordCalc, renderableSeries) {
+        var _this = this;
+        if (!(renderableSeries === null || renderableSeries === void 0 ? void 0 : renderableSeries.dataSeries)) {
+            if (!coordCalc.baseXValues) {
+                var defaultBaseXValues = new this.webAssemblyContext2D.SCRTDoubleVector();
+                if (this.defaultXValues && this.defaultXValues.length > 0) {
+                    (0, appendDoubleVectorFromJsArray_1.appendDoubleVectorFromJsArray)(this.webAssemblyContext2D, defaultBaseXValues, this.defaultXValues);
+                }
+                else {
+                    var xValues = Array.from(Array(this.visibleRange.diff), function (_, i) { return _this.defaultXStart + i * _this.defaultXStep; });
+                    (0, appendDoubleVectorFromJsArray_1.appendDoubleVectorFromJsArray)(this.webAssemblyContext2D, defaultBaseXValues, xValues);
+                }
+                coordCalc.baseXValues = defaultBaseXValues;
+            }
+            return;
+        }
         if (renderableSeries.type === SeriesType_1.ESeriesType.UniformHeatmapSeries) {
             throw Error("Category Axis is not supported for UniformHeatmapRenderableSeries");
         }

package/Charting/Visuals/Axis/IAxisCoreOptions.d.ts

@@ -5,6 +5,11 @@ import { TGridLineStyle, TTextStyle, TTickLineStyle } from "./AxisCore";
  * Optional parameters passed to {@link AxisCore} constructor to set defaults at construction time
  */
 export interface IAxisCoreOptions {
+    /**
+     * When true, 32-bit faster paths for coordinate calculation maths are used. This improves performance in
+     * edge-cases where every CPU cycle counts.
+     */
+    allowFastMath?: boolean;
     /**
      * The VisibleRange is the range of the Axis (min to max).
      * @description

package/Charting/Visuals/Axis/LabelProvider/SmartDateLabelProvider.js

@@ -117,7 +117,8 @@ var SmartDateLabelProvider = /** @class */ (function (_super) {
     };
     SmartDateLabelProvider.prototype.formatTradeChartLabel = function (tradeChartLabelFormat, value, prevValue, prevPrevValue) {
         if (tradeChartLabelFormat === ETradeChartLabelFormat.Minutes) {
-            var newDate = !prevValue || (0, date_1.formatUnixDateToHumanStringMMMDD)(value) !== (0, date_1.formatUnixDateToHumanStringMMMDD)(prevValue);
+            var newDate = prevValue === undefined ||
+                (0, date_1.formatUnixDateToHumanStringMMMDD)(value) !== (0, date_1.formatUnixDateToHumanStringMMMDD)(prevValue);
             if (newDate) {
                 return (0, date_1.formatUnixDateToHumanStringMMMDD)(value);
             }
@@ -126,7 +127,8 @@ var SmartDateLabelProvider = /** @class */ (function (_super) {
             }
         }
         else if (tradeChartLabelFormat === ETradeChartLabelFormat.Days) {
-            var newMonth = !prevValue || (0, date_1.formatUnixDateToHumanStringMMM)(value) !== (0, date_1.formatUnixDateToHumanStringMMM)(prevValue);
+            var newMonth = prevValue === undefined ||
+                (0, date_1.formatUnixDateToHumanStringMMM)(value) !== (0, date_1.formatUnixDateToHumanStringMMM)(prevValue);
             if (newMonth) {
                 return (0, date_1.formatUnixDateToHumanStringMMM)(value);
             }
@@ -135,12 +137,13 @@ var SmartDateLabelProvider = /** @class */ (function (_super) {
             }
         }
         else if (tradeChartLabelFormat === ETradeChartLabelFormat.Months) {
-            var newYear = !prevValue || (0, date_1.formatUnixDateToHumanStringYYYY)(value) !== (0, date_1.formatUnixDateToHumanStringYYYY)(prevValue);
+            var newYear = prevValue === undefined ||
+                (0, date_1.formatUnixDateToHumanStringYYYY)(value) !== (0, date_1.formatUnixDateToHumanStringYYYY)(prevValue);
             if (newYear) {
                 return (0, date_1.formatUnixDateToHumanStringYYYY)(value);
             }
             // If previous label was year, display month label
-            var prevPrevNewYear = !prevPrevValue ||
+            var prevPrevNewYear = prevPrevValue === undefined ||
                 (0, date_1.formatUnixDateToHumanStringYYYY)(prevValue) !== (0, date_1.formatUnixDateToHumanStringYYYY)(prevPrevValue);
             var newMonth = prevPrevNewYear || (0, date_1.formatUnixDateToHumanStringMMM)(value) !== (0, date_1.formatUnixDateToHumanStringMMM)(prevValue);
             if (newMonth) {

package/Charting/Visuals/Axis/NumericAxis.js

@@ -58,8 +58,8 @@ var NumericAxis = /** @class */ (function (_super) {
         var size = this.axisLength;
         var shouldFlip = this.isXAxis !== this.flippedCoordinatesProperty;
         return shouldFlip
-            ? new FlippedNumericCoordinateCalculator_1.FlippedNumericCoordinateCalculator(this.webAssemblyContext2D, size, min, max, offset)
-            : new NumericCoordinateCalculator_1.NumericCoordinateCalculator(this.webAssemblyContext2D, size, min, max, offset);
+            ? new FlippedNumericCoordinateCalculator_1.FlippedNumericCoordinateCalculator(this.webAssemblyContext2D, size, min, max, offset, this.allowFastMath)
+            : new NumericCoordinateCalculator_1.NumericCoordinateCalculator(this.webAssemblyContext2D, size, min, max, offset, this.allowFastMath);
     };
     return NumericAxis;
 }(AxisBase2D_1.AxisBase2D));

package/Charting/Visuals/Axis/constants.d.ts

@@ -1,4 +1,5 @@
 export declare enum PROPERTY {
+    ALLOW_FAST_MATH = "ALLOW_FAST_MATH",
     AUTO_RANGE = "AUTO_RANGE",
     AUTO_TICKS = "AUTO_TICKS",
     AXIS_ALIGNMENT = "AXIS_ALIGNMENT",

package/Charting/Visuals/Axis/constants.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PROPERTY = void 0;
 var PROPERTY;
 (function (PROPERTY) {
+    PROPERTY["ALLOW_FAST_MATH"] = "ALLOW_FAST_MATH";
     PROPERTY["AUTO_RANGE"] = "AUTO_RANGE";
     PROPERTY["AUTO_TICKS"] = "AUTO_TICKS";
     PROPERTY["AXIS_ALIGNMENT"] = "AXIS_ALIGNMENT";

package/Charting/Visuals/Legend/SciChartLegend.d.ts

@@ -35,5 +35,11 @@ export declare class SciChartLegend extends SciChartLegendBase {
     /** @inheritDoc */
     protected addEventListeners(): void;
     /** @inheritDoc */
+    protected removeEventListeners(): void;
+    /**
+     * adds event listeners to a specific {@link IRenderableSeries} series
+     */
+    protected addEventListenerToSeries(rs: IRenderableSeries): void;
+    /** @inheritDoc */
     protected getInnerHTML(): string;
 }

package/Charting/Visuals/Legend/SciChartLegend.js

@@ -79,7 +79,36 @@ var SciChartLegend = /** @class */ (function (_super) {
     };
     /** @inheritDoc */
     SciChartLegend.prototype.addEventListeners = function () {
-        this.renderableSeriesArray.forEach(function (rs) { return addEventListenerToSeries(rs); });
+        var _this = this;
+        this.renderableSeriesArray.forEach(function (rs) { return _this.addEventListenerToSeries(rs); });
+    };
+    /** @inheritDoc */
+    SciChartLegend.prototype.removeEventListeners = function () {
+        var _this = this;
+        this.renderableSeriesArray.forEach(function (rs) { return _this.removeEventListenerFromSeries(rs.id); });
+    };
+    /**
+     * adds event listeners to a specific {@link IRenderableSeries} series
+     */
+    SciChartLegend.prototype.addEventListenerToSeries = function (rs) {
+        var el = this.getParentDiv().querySelector("[id='".concat(rs.id, "']"));
+        if (el) {
+            var onChangeEventListener_1 = function (e) { return (rs.isVisible = e.target.checked); };
+            el.addEventListener("change", onChangeEventListener_1);
+            var eventSubscriptionItem = {
+                element: el,
+                eventType: "change",
+                eventListener: onChangeEventListener_1,
+                delete: function () { return el.removeEventListener("change", onChangeEventListener_1); }
+            };
+            var eventListenersForRenderableSeries = this.eventListenersCollection.get(rs.id);
+            if (eventListenersForRenderableSeries) {
+                eventListenersForRenderableSeries.push(eventSubscriptionItem);
+            }
+            else {
+                this.eventListenersCollection.set(rs.id, [eventSubscriptionItem]);
+            }
+        }
     };
     /** @inheritDoc */
     SciChartLegend.prototype.getInnerHTML = function () {
@@ -104,15 +133,3 @@ var SciChartLegend = /** @class */ (function (_super) {
     return SciChartLegend;
 }(SciChartLegendBase_1.SciChartLegendBase));
 exports.SciChartLegend = SciChartLegend;
-/** @ignore */
-var addEventListenerToSeries = function (rs) {
-    var el = document.getElementById(rs.id);
-    if (el) {
-        // @ts-ignore
-        el.addEventListener("change", function (e) { return (rs.isVisible = e.target.checked); });
-    }
-};
-/** @ignore */
-var removeEventListenerFromSeries = function (renderableSeriesId) {
-    // TODO: to think about how to remove event listeners when removing series
-};

package/Charting/Visuals/Legend/SciChartLegendBase.d.ts

@@ -10,6 +10,11 @@ export declare type TLegendItem = {
     checked: boolean;
     gradient?: GradientParams;
 };
+export interface IEventSubscriptionItem extends IDeletable {
+    element: HTMLElement;
+    eventType: string;
+    eventListener: EventListener;
+}
 /**
  * Enumeration constants to define legend orientation
  */
@@ -48,7 +53,8 @@ export declare abstract class SciChartLegendBase implements IDeletable {
     protected marginProperty: number;
     protected isDirty: boolean;
     protected parentSurfaceProperty: ISciChartSurfaceBase;
-    protected placementDivIdProperty: string;
+    protected placementDivIdProperty: string | HTMLDivElement;
+    protected eventListenersCollection: Map<string, IEventSubscriptionItem[]>;
     /** @inheritDoc */
     abstract applyTheme(): void;
     setInvalidateParentSurface(value: () => void): void;
@@ -107,13 +113,13 @@ export declare abstract class SciChartLegendBase implements IDeletable {
      */
     set margin(value: number);
     /**
-     * Gets or sets the parent div element for the Legend
+     * Gets or sets the parent div element reference or id for the Legend
      */
-    get placementDivId(): string;
+    get placementDivId(): string | HTMLDivElement;
     /**
-     * Gets or sets the parent div element for the Legend
+     * Gets or sets the parent div element reference or id for the Legend
      */
-    set placementDivId(value: string);
+    set placementDivId(value: string | HTMLDivElement);
     /** @inheritDoc */
     delete(): void;
     /**
@@ -156,7 +162,15 @@ export declare abstract class SciChartLegendBase implements IDeletable {
      * When overridden in a derived class, will be called when its time to add event listeners to series
      */
     protected abstract addEventListeners(): void;
-    private getParentDiv;
+    /**
+     * When overridden in a derived class, will be called when its time to remove event listeners from series
+     */
+    protected abstract removeEventListeners(): void;
+    /**
+     * removes event listeners from a specific {@link IRenderableSeries} series
+     */
+    protected removeEventListenerFromSeries: (renderableSeriesId: string) => void;
+    protected getParentDiv(): HTMLDivElement;
 }
 export declare const getLegendItemHtml: (orientation: ELegendOrientation, showCheckboxes: boolean, showSeriesMarkers: boolean, item: TLegendItem) => string;
 export declare const getLegendContainerHtml: (placement: ELegendPlacement, textColor: string, backgroundColor: string, margin: Thickness, body: string) => string;

package/Charting/Visuals/Legend/SciChartLegendBase.js

@@ -35,11 +35,24 @@ var ELegendType;
  */
 var SciChartLegendBase = /** @class */ (function () {
     function SciChartLegendBase() {
+        var _this = this;
         this.orientationProperty = ELegendOrientation.Vertical;
         this.showLegendProperty = true;
         this.placementProperty = ELegendPlacement.TopLeft;
         this.marginProperty = 10;
         this.isDirty = true;
+        this.eventListenersCollection = new Map();
+        /**
+         * removes event listeners from a specific {@link IRenderableSeries} series
+         */
+        this.removeEventListenerFromSeries = function (renderableSeriesId) {
+            var _a;
+            (_a = _this.eventListenersCollection.get(renderableSeriesId)) === null || _a === void 0 ? void 0 : _a.forEach(function (_a) {
+                var element = _a.element, eventListener = _a.eventListener, eventType = _a.eventType;
+                element.removeEventListener(eventType, eventListener);
+            });
+            _this.eventListenersCollection.delete(renderableSeriesId);
+        };
     }
     SciChartLegendBase.prototype.setInvalidateParentSurface = function (value) {
         this.invalidateParentSurface = value;
@@ -156,13 +169,13 @@ var SciChartLegendBase = /** @class */ (function () {
     });
     Object.defineProperty(SciChartLegendBase.prototype, "placementDivId", {
         /**
-         * Gets or sets the parent div element for the Legend
+         * Gets or sets the parent div element reference or id for the Legend
          */
         get: function () {
             return this.placementDivIdProperty;
         },
         /**
-         * Gets or sets the parent div element for the Legend
+         * Gets or sets the parent div element reference or id for the Legend
          */
         set: function (value) {
             this.delete();
@@ -175,8 +188,8 @@ var SciChartLegendBase = /** @class */ (function () {
     /** @inheritDoc */
     SciChartLegendBase.prototype.delete = function () {
         var _a;
-        // TODO: remove listeners from renderable series to prevent memory leaks in older browsers
         if (this.div) {
+            this.removeEventListeners();
             (_a = this.getParentDiv()) === null || _a === void 0 ? void 0 : _a.removeChild(this.div);
             this.div = undefined;
         }
@@ -239,7 +252,12 @@ var SciChartLegendBase = /** @class */ (function () {
         }
     };
     SciChartLegendBase.prototype.getParentDiv = function () {
-        return this.placementDivId ? document.getElementById(this.placementDivId) : this.rootDiv;
+        if (this.placementDivId) {
+            return typeof this.placementDivId === "string"
+                ? document.getElementById(this.placementDivId)
+                : this.placementDivId;
+        }
+        return this.rootDiv;
     };
     return SciChartLegendBase;
 }());

package/Charting/Visuals/Legend/SciChartPieLegend.d.ts

@@ -43,6 +43,8 @@ export declare class SciChartPieLegend extends SciChartLegendBase {
      * @inheritDoc
      */
     protected addEventListeners(): void;
+    /** @inheritDoc */
+    protected removeEventListeners(): void;
     /**
      * @inheritDoc
      */

package/Charting/Visuals/Legend/SciChartPieLegend.js

@@ -95,10 +95,25 @@ var SciChartPieLegend = /** @class */ (function (_super) {
     SciChartPieLegend.prototype.addEventListeners = function () {
         var _this = this;
         this.pieSegmentArray.forEach(function (ps) {
-            var el = document.getElementById(getCheckboxId(ps.id));
-            (0, SciChartPieSurface_1.addEventListenerToPieSegment)(ps, el, _this.animate);
+            var el = _this.getParentDiv().querySelector("#".concat(getCheckboxId(ps.id)));
+            if (!el) {
+                return;
+            }
+            var eventSubscriptionItem = (0, SciChartPieSurface_1.addEventListenerToPieSegment)(ps, el, _this.animate);
+            var eventListenersForRenderableSeries = _this.eventListenersCollection.get(ps.id);
+            if (eventListenersForRenderableSeries) {
+                eventListenersForRenderableSeries.push(eventSubscriptionItem);
+            }
+            else {
+                _this.eventListenersCollection.set(ps.id, [eventSubscriptionItem]);
+            }
         });
     };
+    /** @inheritDoc */
+    SciChartPieLegend.prototype.removeEventListeners = function () {
+        var _this = this;
+        this.pieSegmentArray.forEach(function (ps) { return _this.removeEventListenerFromSeries(ps.id); });
+    };
     /**
      * @inheritDoc
      */
@@ -123,7 +138,3 @@ var SciChartPieLegend = /** @class */ (function (_super) {
 exports.SciChartPieLegend = SciChartPieLegend;
 /** @ignore */
 var getCheckboxId = function (pieSegmentId) { return "check".concat(pieSegmentId); };
-/** @ignore */
-var removeEventListenerFromSeries = function (renderableSeriesId) {
-    // TODO: to think about how to remove event listeners when removing series
-};

package/Charting/Visuals/RenderableSeries/Animations/FadeAnimation.d.ts

@@ -1,5 +1,5 @@
 import { EAnimationType } from "../../../../types/AnimationType";
-import { DoubleVector, TSciChart } from "../../../../types/TSciChart";
+import { SCRTDoubleVector, TSciChart } from "../../../../types/TSciChart";
 import { SeriesAnimation, IBaseAnimationOptions } from "./SeriesAnimation";
 export interface IFadeAnimationOptions extends IBaseAnimationOptions {
 }
@@ -8,5 +8,5 @@ export declare class FadeAnimation extends SeriesAnimation {
     readonly type = EAnimationType.Fade;
     constructor(options?: IFadeAnimationOptions);
     /** @inheritDoc */
-    calculateAnimationValues(wasmContext: TSciChart, originalValues: DoubleVector, animationValues: DoubleVector, progress: number, noZeroLine?: boolean): void;
+    calculateAnimationValues(wasmContext: TSciChart, originalValues: SCRTDoubleVector, animationValues: SCRTDoubleVector, progress: number, noZeroLine?: boolean): void;
 }