scichart 2.0.2204 → 2.1.2267

package/Charting/Visuals/RenderableSeries/StackedColumnCollection.js

@@ -335,12 +335,6 @@ var drawColumns = function (wasmContext, renderContext, xCoordinateCalculator, y
         args.SetFillBrush(fillBrush);
     }
     var nativeContext = renderContext.getNativeContext();
-    nativeContext.PushMatrix();
-    nativeContext.PushState();
-    nativeContext.Translate(viewRect.x, viewRect.y);
-    nativeContext.SetClipRect(viewRect.x, viewRect.y, viewRect.width, viewRect.height);
     nativeDrawingProvider.DrawPointsVec(nativeContext, xValues, y1Values, yValues, xCoordinateCalculator.nativeCalculator, yCoordinateCalculator.nativeCalculator, args);
-    nativeContext.PopMatrix();
-    nativeContext.PopState();
     args.delete();
 };

package/Charting/Visuals/RenderableSeries/StackedMountainCollection.d.ts

@@ -38,7 +38,7 @@ export declare class StackedMountainCollection extends BaseStackedCollection<Sta
      * Creates an instance of the {@link StackedMountainCollection}
      * @param webAssemblyContext The {@link TSciChart | SciChart WebAssembly Context} containing
      * native methods and access to our WebGL2 WebAssembly Drawing Engine
-     * @param options Optional parameters of type {@link IBaseStackedCollectionOptions} to configure the
+     * @param options Optional parameters of type {@link IBaseStackedCollectionOptions} to configure the series
      */
     constructor(webAssemblyContext: TSciChart, options?: IBaseStackedCollectionOptions);
     /** @inheritDoc */

package/Charting/Visuals/RenderableSeries/StackedMountainCollection.js

@@ -52,7 +52,7 @@ var StackedMountainCollection = /** @class */ (function (_super) {
      * Creates an instance of the {@link StackedMountainCollection}
      * @param webAssemblyContext The {@link TSciChart | SciChart WebAssembly Context} containing
      * native methods and access to our WebGL2 WebAssembly Drawing Engine
-     * @param options Optional parameters of type {@link IBaseStackedCollectionOptions} to configure the
+     * @param options Optional parameters of type {@link IBaseStackedCollectionOptions} to configure the series
      */
     function StackedMountainCollection(webAssemblyContext, options) {
         var _this = _super.call(this, webAssemblyContext, options) || this;
@@ -213,12 +213,6 @@ var drawBand = function (wasmContext, renderContext, renderPassData, nativeDrawi
         args.SetLinesPen1(strokePenY1);
     }
     var nativeContext = renderContext.getNativeContext();
-    nativeContext.PushMatrix();
-    nativeContext.PushState();
-    nativeContext.Translate(viewRect.x, viewRect.y);
-    nativeContext.SetClipRect(viewRect.x, viewRect.y, viewRect.width, viewRect.height);
     nativeDrawingProvider.DrawPointsVec(nativeContext, xValues, yValues, y1Values, renderPassData.xCoordinateCalculator.nativeCalculator, renderPassData.yCoordinateCalculator.nativeCalculator, args);
-    nativeContext.PopMatrix();
-    nativeContext.PopState();
     args.delete();
 };

package/Charting/Visuals/RenderableSeries/UniformContoursRenderableSeries.d.ts

@@ -1,7 +1,9 @@
 import { PropertyChangedEventArgs } from "../../../Core/PropertyChangedEventArgs";
 import { ESeriesType } from "../../../types/SeriesType";
 import { TSciChart } from "../../../types/TSciChart";
+import { IPointSeries } from "../../Model/PointSeries/IPointSeries";
 import { UniformHeatmapDataSeries } from "../../Model/UniformHeatmapDataSeries";
+import { ResamplingParams } from "../../Numerics/Resamplers/ResamplingParams";
 import { BaseRenderableSeries } from "./BaseRenderableSeries";
 import { HeatmapColorMap, IHeatmapColorMapOptions } from "./HeatmapColorMap";
 import { IHitTestProvider } from "./HitTest/IHitTestProvider";
@@ -106,6 +108,9 @@ export declare class UniformContoursRenderableSeries extends BaseRenderableSerie
     get minorsPerMajor(): number;
     set minorsPerMajor(minorsPerMajor: number);
     getContourDrawingParams(): IContourDrawingParams;
+    /** @inheritDoc */
+    toPointSeries(resamplingParams?: ResamplingParams): IPointSeries;
+    /** @inheritDoc */
     toJSON(excludeData?: boolean): import("../../../Builder/buildSeries").TSeriesDefinition;
     /**
      * Called when a property changes on {@link HeatmapColorMap}, and notifies the parent {@link SciChartSurface}

package/Charting/Visuals/RenderableSeries/UniformContoursRenderableSeries.js

@@ -206,6 +206,12 @@ var UniformContoursRenderableSeries = /** @class */ (function (_super) {
         };
         return result;
     };
+    /** @inheritDoc */
+    UniformContoursRenderableSeries.prototype.toPointSeries = function (resamplingParams) {
+        // not used for Contours
+        return undefined;
+    };
+    /** @inheritDoc */
     UniformContoursRenderableSeries.prototype.toJSON = function (excludeData) {
         var _a;
         if (excludeData === void 0) { excludeData = false; }

package/Charting/Visuals/RenderableSeries/UniformHeatmapRenderableSeries.d.ts

@@ -1,7 +1,9 @@
 import { PropertyChangedEventArgs } from "../../../Core/PropertyChangedEventArgs";
 import { ESeriesType } from "../../../types/SeriesType";
 import { TSciChart } from "../../../types/TSciChart";
+import { IPointSeries } from "../../Model/PointSeries/IPointSeries";
 import { UniformHeatmapDataSeries } from "../../Model/UniformHeatmapDataSeries";
+import { ResamplingParams } from "../../Numerics/Resamplers/ResamplingParams";
 import { LabelProvider } from "../Axis/LabelProvider/LabelProvider";
 import { BaseRenderableSeries } from "./BaseRenderableSeries";
 import { HeatmapColorMap, IHeatmapColorMapOptions } from "./HeatmapColorMap";
@@ -98,6 +100,9 @@ export declare class UniformHeatmapRenderableSeries extends BaseRenderableSeries
     checkIsOutOfDataRange(xValue: number, yValue: number): boolean;
     get zLabelProvider(): LabelProvider;
     set zLabelProvider(labelProvider: LabelProvider);
+    /** @inheritDoc */
+    toPointSeries(resamplingParams?: ResamplingParams): IPointSeries;
+    /** @inheritDoc */
     toJSON(excludeData?: boolean): import("../../../Builder/buildSeries").TSeriesDefinition;
     /**
      * Called when a property changes on {@link HeatmapColorMap}, and notifies the parent {@link SciChartSurface}

package/Charting/Visuals/RenderableSeries/UniformHeatmapRenderableSeries.js

@@ -159,6 +159,12 @@ var UniformHeatmapRenderableSeries = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    /** @inheritDoc */
+    UniformHeatmapRenderableSeries.prototype.toPointSeries = function (resamplingParams) {
+        // not used for Heatmap
+        return undefined;
+    };
+    /** @inheritDoc */
     UniformHeatmapRenderableSeries.prototype.toJSON = function (excludeData) {
         var _a;
         if (excludeData === void 0) { excludeData = false; }

package/Charting/Visuals/RenderableSeries/XyScatterRenderableSeries.d.ts

@@ -1,5 +1,7 @@
 import { ESeriesType } from "../../../types/SeriesType";
 import { TSciChart } from "../../../types/TSciChart";
+import { IPointSeries } from "../../Model/PointSeries/IPointSeries";
+import { ResamplingParams } from "../../Numerics/Resamplers/ResamplingParams";
 import { BaseRenderableSeries } from "./BaseRenderableSeries";
 import { IHitTestProvider } from "./HitTest/IHitTestProvider";
 import { IBaseRenderableSeriesOptions } from "./IBaseRenderableSeriesOptions";
@@ -45,8 +47,8 @@ export declare class XyScatterRenderableSeries extends BaseRenderableSeries {
      * @param options Optional parameters of type {@link IBaseRenderableSeriesOptions} to configure the series
      */
     constructor(webAssemblyContext: TSciChart, options?: IXyScatterRenderableSeriesOptions);
-    /**
-     * @inheritDoc
-     */
+    /** @inheritDoc */
+    toPointSeries(rp?: ResamplingParams): IPointSeries;
+    /** @inheritDoc */
     protected newHitTestProvider(): IHitTestProvider;
 }

package/Charting/Visuals/RenderableSeries/XyScatterRenderableSeries.js

@@ -17,6 +17,7 @@ var __extends = (this && this.__extends) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.XyScatterRenderableSeries = void 0;
 var SeriesType_1 = require("../../../types/SeriesType");
+var XyPointSeriesWrapped_1 = require("../../Model/PointSeries/XyPointSeriesWrapped");
 var EllipsePointMarker_1 = require("../PointMarkers/EllipsePointMarker");
 var BaseRenderableSeries_1 = require("./BaseRenderableSeries");
 var PointMarkerDrawingProvider_1 = require("./DrawingProviders/PointMarkerDrawingProvider");
@@ -75,9 +76,11 @@ var XyScatterRenderableSeries = /** @class */ (function (_super) {
         }
         return _this;
     }
-    /**
-     * @inheritDoc
-     */
+    /** @inheritDoc */
+    XyScatterRenderableSeries.prototype.toPointSeries = function (rp) {
+        return new XyPointSeriesWrapped_1.XyPointSeriesWrapped(this.dataSeries);
+    };
+    /** @inheritDoc */
     XyScatterRenderableSeries.prototype.newHitTestProvider = function () {
         return new ScatterSeriesHitTestProvider_1.ScatterSeriesHitTestProvider(this, this.webAssemblyContext);
     };

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

@@ -12,6 +12,7 @@ export declare enum PROPERTY {
     DATA_SERIES = "dataSeries",
     DRAW_NAN_AS = "drawNaNAs",
     EFFECT = "EFFECT",
+    ENABLE_DRAWING_OPTIMISATIONS = "ENABLE_DRAWING_OPTIMISATIONS",
     FILL = "fill",
     FILL_Y1 = "FILL_Y1",
     FILL_LINEAR_GRADIENT = "FILL_LINEAR_GRADIENT",
@@ -30,6 +31,8 @@ export declare enum PROPERTY {
     PALETTE_PROVIDER = "PALETTE_PROVIDER",
     POINT_MARKER = "pointMarker",
     RANGE = "RANGE",
+    RESAMPLING_MODE = "RESAMPLING_MODE",
+    RESAMPLING_PRECISION = "RESAMPLING_PRECISION",
     SPACING = "SPACING",
     STACKED_GROUP_ID = "STACKED_GROUP_ID",
     STROKE = "STROKE",

package/Charting/Visuals/RenderableSeries/constants.js

@@ -16,6 +16,7 @@ var PROPERTY;
     PROPERTY["DATA_SERIES"] = "dataSeries";
     PROPERTY["DRAW_NAN_AS"] = "drawNaNAs";
     PROPERTY["EFFECT"] = "EFFECT";
+    PROPERTY["ENABLE_DRAWING_OPTIMISATIONS"] = "ENABLE_DRAWING_OPTIMISATIONS";
     PROPERTY["FILL"] = "fill";
     PROPERTY["FILL_Y1"] = "FILL_Y1";
     PROPERTY["FILL_LINEAR_GRADIENT"] = "FILL_LINEAR_GRADIENT";
@@ -34,6 +35,8 @@ var PROPERTY;
     PROPERTY["PALETTE_PROVIDER"] = "PALETTE_PROVIDER";
     PROPERTY["POINT_MARKER"] = "pointMarker";
     PROPERTY["RANGE"] = "RANGE";
+    PROPERTY["RESAMPLING_MODE"] = "RESAMPLING_MODE";
+    PROPERTY["RESAMPLING_PRECISION"] = "RESAMPLING_PRECISION";
     PROPERTY["SPACING"] = "SPACING";
     PROPERTY["STACKED_GROUP_ID"] = "STACKED_GROUP_ID";
     PROPERTY["STROKE"] = "STROKE";

package/Charting/Visuals/SciChartDefaults.d.ts

@@ -5,7 +5,15 @@ export declare class SciChartDefaults {
      */
     static asyncLabels: boolean;
     /**
-     * Set this true to allow resuse of label textures across diferent axes and different charts
+     * Set this true to allow reuse of label textures across different axes and different charts
      */
     static useSharedCache: boolean;
+    /**
+     * Turn on/off resampling
+     */
+    static enableResampling: boolean;
+    /**
+     * Turn on/off warnings to optimize performance
+     */
+    static performanceWarnings: boolean;
 }

package/Charting/Visuals/SciChartDefaults.js

@@ -10,9 +10,17 @@ var SciChartDefaults = /** @class */ (function () {
      */
     SciChartDefaults.asyncLabels = false;
     /**
-     * Set this true to allow resuse of label textures across diferent axes and different charts
+     * Set this true to allow reuse of label textures across different axes and different charts
      */
     SciChartDefaults.useSharedCache = false;
+    /**
+     * Turn on/off resampling
+     */
+    SciChartDefaults.enableResampling = true;
+    /**
+     * Turn on/off warnings to optimize performance
+     */
+    SciChartDefaults.performanceWarnings = true;
     return SciChartDefaults;
 }());
 exports.SciChartDefaults = SciChartDefaults;

package/Charting/Visuals/SciChartPieSurface/SciChartPieSurface.d.ts

@@ -4,6 +4,7 @@ import { ObservableArray } from "../../../Core/ObservableArray";
 import { ESciChartSurfaceType } from "../../../types/SciChartSurfaceType";
 import { TSciChartSurfaceCanvases } from "../../../types/TSciChartSurfaceCanvases";
 import { IThemeProvider } from "../../Themes/IThemeProvider";
+import { IEventSubscriptionItem } from "../Legend/SciChartLegendBase";
 import { SciChartPieLegend } from "../Legend/SciChartPieLegend";
 import { ISciChartSurfaceBase } from "../SciChartSurfaceBase";
 import { IPieSurfaceOptions } from "./IPieSurfaceOptions";
@@ -45,7 +46,7 @@ export declare class SciChartPieSurface implements ISciChartSurfaceBase {
      * @param width Optional - the width of the {@link SciChartPieSurface} in pixels. By default SciChart will scale to fit the parent Div
      * @param height Optional - the height of the {@link SciChartPieSurface} in pixels. By default SciChart will scale to fit the parent Div
      */
-    static create(divElementId: string, options?: IPieSurfaceOptions): Promise<SciChartPieSurface>;
+    static create(divElement: string | HTMLDivElement, options?: IPieSurfaceOptions): Promise<SciChartPieSurface>;
     /**
      * @summary Gets the collection of {@link IPieSegment} - the pie segments or slices on this {@link SciChartPieSurface}
      * @description A {@link SciChartPieSurface} can have one to many {@link IPieSegment | Pie Segments}.     *
@@ -57,6 +58,7 @@ export declare class SciChartPieSurface implements ISciChartSurfaceBase {
     readonly domChartRoot: HTMLDivElement;
     readonly domCanvas2D: HTMLCanvasElement;
     readonly domSvgContainer: SVGSVGElement;
+    readonly domSvgAdornerLayer: SVGSVGElement;
     readonly domDivContainer: HTMLDivElement;
     animate: boolean;
     /**
@@ -177,4 +179,4 @@ export declare class SciChartPieSurface implements ISciChartSurfaceBase {
     private applySciChartBackground;
 }
 /** @ignore */
-export declare const addEventListenerToPieSegment: (ps: IPieSegment, el: HTMLElement, animate: boolean) => void;
+export declare const addEventListenerToPieSegment: (ps: IPieSegment, el: HTMLElement, animate: boolean) => IEventSubscriptionItem;

package/Charting/Visuals/SciChartPieSurface/SciChartPieSurface.js

@@ -79,6 +79,7 @@ var SciChartPieSurface = /** @class */ (function () {
         this.domChartRoot = canvases.domChartRoot;
         this.domCanvas2D = canvases.domCanvas2D;
         this.domSvgContainer = canvases.domSvgContainer;
+        this.domSvgAdornerLayer = canvases.domSvgAdornerLayer;
         this.domDivContainer = canvases.domDivContainer;
         this.viewRect = new Rect_1.Rect(0, 0, this.domCanvas2D.width, this.domCanvas2D.height);
         this.drawChart = this.drawChart.bind(this);
@@ -117,10 +118,10 @@ var SciChartPieSurface = /** @class */ (function () {
      * @param width Optional - the width of the {@link SciChartPieSurface} in pixels. By default SciChart will scale to fit the parent Div
      * @param height Optional - the height of the {@link SciChartPieSurface} in pixels. By default SciChart will scale to fit the parent Div
      */
-    SciChartPieSurface.create = function (divElementId, options) {
+    SciChartPieSurface.create = function (divElement, options) {
         var _a, _b;
         (0, chartBuilder_1.ensureRegistrations)();
-        var canvases = sciChartInitCommon_1.default.initCanvas(divElementId, (_a = options === null || options === void 0 ? void 0 : options.widthAspect) !== null && _a !== void 0 ? _a : 0, (_b = options === null || options === void 0 ? void 0 : options.heightAspect) !== null && _b !== void 0 ? _b : 0, sciChartInitCommon_1.default.ECanvasType.svg);
+        var canvases = sciChartInitCommon_1.default.initCanvas(divElement, (_a = options === null || options === void 0 ? void 0 : options.widthAspect) !== null && _a !== void 0 ? _a : 0, (_b = options === null || options === void 0 ? void 0 : options.heightAspect) !== null && _b !== void 0 ? _b : 0, sciChartInitCommon_1.default.ECanvasType.svg);
         return new Promise(function (resolve) {
             var conflictingRenderContextDestinations = __spreadArray(__spreadArray(__spreadArray([], createMaster_1.sciChartDestinations, true), createMaster3d_1.sciChartDestinations, true), createSingle_1.sciChartSingleDestinations, true).filter(function (destination) { return destination.sciChartSurface.domChartRoot.id === canvases.domChartRoot.id; });
             conflictingRenderContextDestinations.forEach(function (destination) { return destination.sciChartSurface.delete(); });
@@ -128,6 +129,7 @@ var SciChartPieSurface = /** @class */ (function () {
             var scps = new SciChartPieSurface(canvases, options);
             scps.applyTheme(options === null || options === void 0 ? void 0 : options.theme);
             var unsub = sciChartInitCommon_1.default.subscribeToResize(canvases.domChartRoot, canvases.aspect, scps);
+            scps.addDeletable(unsub);
             // setTimeout is used to make function async like createSciChartSurface, to have a consistent API
             setTimeout(function () { return resolve(scps); }, 0);
         });
@@ -328,13 +330,17 @@ var SciChartPieSurface = /** @class */ (function () {
             this.domChartRoot.style.height = "".concat(height, "px");
         }
         if (this.domCanvas2D) {
-            this.domCanvas2D.width = width;
-            this.domCanvas2D.height = height;
+            this.domCanvas2D.style.width = "".concat(width, "px");
+            this.domCanvas2D.style.height = "".concat(height, "px");
         }
         if (this.domSvgContainer) {
             this.domSvgContainer.setAttribute("width", width.toString());
             this.domSvgContainer.setAttribute("height", height.toString());
         }
+        if (this.domSvgAdornerLayer) {
+            this.domSvgAdornerLayer.setAttribute("width", width.toString());
+            this.domSvgAdornerLayer.setAttribute("height", height.toString());
+        }
         if (this.domDivContainer) {
             this.domDivContainer.style.height = "".concat(height, "px");
         }
@@ -387,8 +393,11 @@ var SciChartPieSurface = /** @class */ (function () {
         // ADD EVENT LISTENERS
         if (!app_1.IS_TEST_ENV) {
             this.pieSegments.asArray().forEach(function (ps) {
-                var el = document.getElementById(ps.id);
-                (0, exports.addEventListenerToPieSegment)(ps, el, _this.animate);
+                var el = _this.domChartRoot.querySelector("[id='".concat(ps.id, "']"));
+                if (el) {
+                    var subscriptionToken = (0, exports.addEventListenerToPieSegment)(ps, el, _this.animate);
+                    _this.addDeletable(subscriptionToken);
+                }
             });
         }
         this.drawSegmentTitles();
@@ -556,31 +565,36 @@ var calcTitlePosition = function (x, y, outerRadius, innerRadius, a1, a2, delta,
 var isListenerBlocked = false;
 /** @ignore */
 var addEventListenerToPieSegment = function (ps, el, animate) {
-    if (el) {
-        el.addEventListener("click", function (e) {
-            if (!animate) {
-                ps.isSelected = !ps.isSelected;
-                return;
-            }
-            // ANIMATE
-            if (!isListenerBlocked) {
-                var ROUNDS_1 = 10;
-                var directionDown = ps.isSelected;
-                var start_1 = directionDown ? PieSegment_1.PieSegment.DEFAULT_DELTA : 0;
-                var d_1 = directionDown ? -PieSegment_1.PieSegment.DEFAULT_DELTA / ROUNDS_1 : PieSegment_1.PieSegment.DEFAULT_DELTA / ROUNDS_1;
-                isListenerBlocked = true;
-                (function myLoop(k) {
-                    setTimeout(function () {
-                        ps.delta = start_1 + d_1 * k;
-                        if (k === ROUNDS_1) {
-                            isListenerBlocked = false;
-                        }
-                        if (++k <= ROUNDS_1)
-                            myLoop(k);
-                    }, 20);
-                })(1);
-            }
-        });
-    }
+    var eventListener = function (e) {
+        if (!animate) {
+            ps.isSelected = !ps.isSelected;
+            return;
+        }
+        // ANIMATE
+        if (!isListenerBlocked) {
+            var ROUNDS_1 = 10;
+            var directionDown = ps.isSelected;
+            var start_1 = directionDown ? PieSegment_1.PieSegment.DEFAULT_DELTA : 0;
+            var d_1 = directionDown ? -PieSegment_1.PieSegment.DEFAULT_DELTA / ROUNDS_1 : PieSegment_1.PieSegment.DEFAULT_DELTA / ROUNDS_1;
+            isListenerBlocked = true;
+            (function myLoop(k) {
+                setTimeout(function () {
+                    ps.delta = start_1 + d_1 * k;
+                    if (k === ROUNDS_1) {
+                        isListenerBlocked = false;
+                    }
+                    if (++k <= ROUNDS_1)
+                        myLoop(k);
+                }, 20);
+            })(1);
+        }
+    };
+    el.addEventListener("click", eventListener);
+    return {
+        eventListener: eventListener,
+        eventType: "click",
+        element: el,
+        delete: function () { return el.removeEventListener("click", eventListener); }
+    };
 };
 exports.addEventListenerToPieSegment = addEventListenerToPieSegment;

package/Charting/Visuals/SciChartSurface.d.ts

@@ -53,16 +53,16 @@ export declare class SciChartSurface extends SciChartSurfaceBase {
     /**
      * Creates a {@link SciChartSurface} and {@link TSciChart | WebAssembly Context} to occupy the div by element ID in your DOM.
      * @remarks This method is async and must be awaited
-     * @param divElementId The Div Element ID where the {@link SciChartSurface} will reside
+     * @param divElement The Div Element ID or reference where the {@link SciChartSurface} will reside
      * @param options Optional - Optional parameters for chart creation. See {@link I2DSurfaceOptions} for more details
      */
-    static create(divElementId: string, options?: I2DSurfaceOptions): Promise<TWebAssemblyChart>;
+    static create(divElement: string | HTMLDivElement, options?: I2DSurfaceOptions): Promise<TWebAssemblyChart>;
     /**
      * USED INTERNALLY - performs a similar operation to {@link SciChartSurface.create} but used internally for testing
-     * @param divElementId
+     * @param divElement The Div Element ID or reference where the {@link SciChartSurface} will reside
      * @param options - optional parameters for chart creation. See {@link I2DSurfaceOptions} for more details
      */
-    static createSingle(divElementId: string, options?: I2DSurfaceOptions): Promise<TWebAssemblyChart>;
+    static createSingle(divElement: string | HTMLDivElement, options?: I2DSurfaceOptions): Promise<TWebAssemblyChart>;
     /**
      * Allows setting of web URL for Wasm and Data files, in the case you are loading SciChart outside of npm/webpack environment.
      * Note if loading from CDN the version number of data/wasm Urls must match the version number of SciChart.js you are using.

package/Charting/Visuals/SciChartSurface.js

@@ -195,17 +195,17 @@ var SciChartSurface = /** @class */ (function (_super) {
     /**
      * Creates a {@link SciChartSurface} and {@link TSciChart | WebAssembly Context} to occupy the div by element ID in your DOM.
      * @remarks This method is async and must be awaited
-     * @param divElementId The Div Element ID where the {@link SciChartSurface} will reside
+     * @param divElement The Div Element ID or reference where the {@link SciChartSurface} will reside
      * @param options Optional - Optional parameters for chart creation. See {@link I2DSurfaceOptions} for more details
      */
-    SciChartSurface.create = function (divElementId, options) {
+    SciChartSurface.create = function (divElement, options) {
         (0, chartBuilder_1.ensureRegistrations)();
         options = SciChartSurface.resolveOptions(options);
         if (app_1.IS_TEST_ENV) {
-            return this.createTest(divElementId, options);
+            return this.createTest(divElement, options);
         }
         else {
-            return (0, createMaster_1.createMultichart)(divElementId, options).then(function (result) {
+            return (0, createMaster_1.createMultichart)(divElement, options).then(function (result) {
                 result.sciChartSurface.applyOptions(options);
                 return result;
             });
@@ -213,17 +213,17 @@ var SciChartSurface = /** @class */ (function (_super) {
     };
     /**
      * USED INTERNALLY - performs a similar operation to {@link SciChartSurface.create} but used internally for testing
-     * @param divElementId
+     * @param divElement The Div Element ID or reference where the {@link SciChartSurface} will reside
      * @param options - optional parameters for chart creation. See {@link I2DSurfaceOptions} for more details
      */
-    SciChartSurface.createSingle = function (divElementId, options) {
+    SciChartSurface.createSingle = function (divElement, options) {
         (0, chartBuilder_1.ensureRegistrations)();
         options = SciChartSurface.resolveOptions(options);
         if (app_1.IS_TEST_ENV) {
-            return this.createTest(divElementId, options);
+            return this.createTest(divElement, options);
         }
         else {
-            return (0, createSingle_1.createSingleInternal)(divElementId, options).then(function (result) {
+            return (0, createSingle_1.createSingleInternal)(divElement, options).then(function (result) {
                 result.sciChartSurface.applyOptions(options);
                 return result;
             });
@@ -246,9 +246,9 @@ var SciChartSurface = /** @class */ (function (_super) {
         exports.sciChartConfig.dataUrl = (_a = config === null || config === void 0 ? void 0 : config.dataUrl) !== null && _a !== void 0 ? _a : undefined;
         exports.sciChartConfig.wasmUrl = (_b = config === null || config === void 0 ? void 0 : config.wasmUrl) !== null && _b !== void 0 ? _b : undefined;
     };
-    SciChartSurface.createTest = function (divElementId, options) {
+    SciChartSurface.createTest = function (divElement, options) {
         var _a, _b;
-        var canvases = sciChartInitCommon_1.default.initCanvas(divElementId, (_a = options === null || options === void 0 ? void 0 : options.widthAspect) !== null && _a !== void 0 ? _a : 0, (_b = options === null || options === void 0 ? void 0 : options.heightAspect) !== null && _b !== void 0 ? _b : 0, sciChartInitCommon_1.default.ECanvasType.canvas2D);
+        var canvases = sciChartInitCommon_1.default.initCanvas(divElement, (_a = options === null || options === void 0 ? void 0 : options.widthAspect) !== null && _a !== void 0 ? _a : 0, (_b = options === null || options === void 0 ? void 0 : options.heightAspect) !== null && _b !== void 0 ? _b : 0, sciChartInitCommon_1.default.ECanvasType.canvas2D);
         var sciChartSurface = new SciChartSurface(exports.sciChartConfig.testWasm, { canvases: canvases });
         sciChartSurface.applyTheme(options === null || options === void 0 ? void 0 : options.theme);
         sciChartSurface.applyOptions(options);
@@ -385,13 +385,20 @@ var SciChartSurface = /** @class */ (function (_super) {
             // Logger.log("SciChartSurface.isSuspended = true. Ignoring invalidateElement() call");
             return;
         }
+        // console.log("Invalidating ", this.domChartRoot.id);
         var canvasId = this.domCanvas2D ? this.domCanvas2D.id : "undefinedCanvasId";
         this.renderSurface.invalidateElement(canvasId);
     };
     // Step_5: Get context and pass drawing to SciChartRenderer
     SciChartSurface.prototype.doDrawingLoop = function () {
         var context = this.renderSurface.getRenderContext();
-        this.sciChartRenderer.render(context);
+        try {
+            // console.log("Drawing ", this.domChartRoot.id);
+            this.sciChartRenderer.render(context);
+        }
+        catch (err) {
+            console.error("Error from chart in div ".concat(this.domChartRoot.id), err);
+        }
     };
     /**
      * @inheritDoc

package/Charting/Visuals/SciChartSurfaceBase.d.ts

@@ -325,13 +325,14 @@ export declare abstract class SciChartSurfaceBase implements ISciChartSurfaceBas
     protected changeMasterCanvasViewportSize(wasmContext: TSciChart | TSciChart3D, pixelWidth: number, pixelHeight: number): void;
     protected changeWebGLCanvasViewportSize(wasmContext: TSciChart | TSciChart3D, pixelWidth: number, pixelHeight: number): void;
 }
-export declare const createChartDestination: (canvasId: string) => {
+export declare const createChartDestination: (canvas: HTMLCanvasElement) => {
     canvas: HTMLCanvasElement;
     GetHeight(): any;
     GetWidth(): any;
     GetID(): any;
 };
 export declare const getMasterCanvas: () => HTMLCanvasElement;
-export declare const copyToCanvas: (sourceCanvas: HTMLCanvasElement) => (destinationId: string) => void;
+export declare type TGetDestinationFn = (destinationId: string) => TSciChartDestination;
+export declare const copyToCanvas: (sourceCanvas: HTMLCanvasElement, getDestinationById: TGetDestinationFn) => (destinationId: string) => void;
 /** @ignore */
 export declare const getLocateFile: (sciChartConfig: TSciChartConfig) => (path: string, prefix: string) => string;

package/Charting/Visuals/SciChartSurfaceBase.js

@@ -420,8 +420,7 @@ var SciChartSurfaceBase = /** @class */ (function () {
     return SciChartSurfaceBase;
 }());
 exports.SciChartSurfaceBase = SciChartSurfaceBase;
-var createChartDestination = function (canvasId) {
-    var canvas = document.querySelector("#".concat(canvasId));
+var createChartDestination = function (canvas) {
     if (!canvas)
         return undefined;
     return {
@@ -475,8 +474,9 @@ var getMasterCanvas = function () {
     return SciChartSurfaceBase.domMasterCanvas;
 };
 exports.getMasterCanvas = getMasterCanvas;
-var copyToCanvas = function (sourceCanvas) { return function (destinationId) {
-    var destinationCanvas = document.querySelector("#".concat(destinationId));
+var copyToCanvas = function (sourceCanvas, getDestinationById) { return function (destinationId) {
+    var destination = getDestinationById(destinationId);
+    var destinationCanvas = destination === null || destination === void 0 ? void 0 : destination.sciChartSurface.domCanvas2D;
     if (destinationCanvas) {
         var destinationCanvasContext = destinationCanvas.getContext("2d");
         destinationCanvasContext.clearRect(0, 0, destinationCanvasContext.canvas.width, destinationCanvasContext.canvas.height);

package/Charting/Visuals/createMaster.d.ts

@@ -2,6 +2,6 @@ import { I2DSurfaceOptions } from "./I2DSurfaceOptions";
 import { TWebAssemblyChart } from "./SciChartSurface";
 import { TSciChartDestination } from "./SciChartSurfaceBase";
 /** @ignore */
-export declare const createMultichart: (divElementId: string, options?: I2DSurfaceOptions) => Promise<TWebAssemblyChart>;
+export declare const createMultichart: (divElement: string | HTMLDivElement, options?: I2DSurfaceOptions) => Promise<TWebAssemblyChart>;
 /** @ignore */
 export declare const sciChartDestinations: TSciChartDestination[];

package/Charting/Visuals/createMaster.js

@@ -57,14 +57,14 @@ var sciChartMaster = {
 /** @ignore */
 var sciChartMasterPromise;
 /** @ignore */
-var createMultichart = function (divElementId, options) { return __awaiter(void 0, void 0, void 0, function () {
-    var canvases, loader, loaderDiv, master, createChildSurface, wasmContext_1, sciChartSurface_1, err_1;
+var createMultichart = function (divElement, options) { return __awaiter(void 0, void 0, void 0, function () {
+    var canvases, loader, loaderDiv, master, createChildSurface, wasmContext_1, divElementId, sciChartSurface_1, err_1;
     var _a, _b, _c;
     return __generator(this, function (_d) {
         switch (_d.label) {
             case 0:
-                sciChartInitCommon_1.default.checkChartDivExists(divElementId);
-                canvases = sciChartInitCommon_1.default.initCanvas(divElementId, (_a = options === null || options === void 0 ? void 0 : options.widthAspect) !== null && _a !== void 0 ? _a : 0, (_b = options === null || options === void 0 ? void 0 : options.heightAspect) !== null && _b !== void 0 ? _b : 0, sciChartInitCommon_1.default.ECanvasType.canvas2D);
+                sciChartInitCommon_1.default.checkChartDivExists(divElement);
+                canvases = sciChartInitCommon_1.default.initCanvas(divElement, (_a = options === null || options === void 0 ? void 0 : options.widthAspect) !== null && _a !== void 0 ? _a : 0, (_b = options === null || options === void 0 ? void 0 : options.heightAspect) !== null && _b !== void 0 ? _b : 0, sciChartInitCommon_1.default.ECanvasType.canvas2D);
                 loader = (_c = options === null || options === void 0 ? void 0 : options.loader) !== null && _c !== void 0 ? _c : new loader_1.DefaultSciChartLoader();
                 loaderDiv = loader.addChartLoader(canvases.domDivContainer, options === null || options === void 0 ? void 0 : options.theme);
                 _d.label = 1;
@@ -85,6 +85,7 @@ var createMultichart = function (divElementId, options) { return __awaiter(void
                 _d.label = 3;
             case 3:
                 createChildSurface = sciChartMaster.createChildSurface, wasmContext_1 = sciChartMaster.wasmContext;
+                divElementId = canvases.domChartRoot.id;
                 sciChartSurface_1 = createChildSurface(divElementId, canvases, options === null || options === void 0 ? void 0 : options.theme);
                 return [2 /*return*/, new Promise(function (resolve) {
                         setTimeout(function () {
@@ -147,7 +148,7 @@ var createMaster = function () {
         return sciChartSurface;
     };
     var addDestination = function (wasmContext, canvasElementId, sciChartSurface, width, height, chartInitObj) {
-        var newDestination = (0, SciChartSurfaceBase_1.createChartDestination)(canvasElementId);
+        var newDestination = (0, SciChartSurfaceBase_1.createChartDestination)(sciChartSurface.domCanvas2D);
         if (!newDestination) {
             sciChartSurface.delete();
             return;
@@ -212,7 +213,7 @@ var createMaster = function () {
             wasmContext.SCRTSetGlobalSampleChartInterface(chartInitObj);
             /// create an object that native side can trigger the copy to from...
             var canvasCopyObj = wasmContext.SCRTCopyToDestinationInterface.implement({
-                CopyToDestination: (0, SciChartSurfaceBase_1.copyToCanvas)(SciChartSurfaceBase_1.SciChartSurfaceBase.domMasterCanvas)
+                CopyToDestination: (0, SciChartSurfaceBase_1.copyToCanvas)(SciChartSurfaceBase_1.SciChartSurfaceBase.domMasterCanvas, getDestinationById)
             });
             wasmContext.SCRTSetGlobalCopyToDestinationInterface(canvasCopyObj);
             wasmContext.TSRSetDrawRequestsEnabled(true);
@@ -224,3 +225,7 @@ var createMaster = function () {
         });
     });
 };
+/** @ignore */
+var getDestinationById = function (destinationId) {
+    return exports.sciChartDestinations.find(function (dest) { return dest.canvasElementId === destinationId; });
+};

package/Charting/Visuals/createSingle.d.ts

@@ -6,6 +6,6 @@ import { TWebAssemblyChart } from "./SciChartSurface";
 import { TSciChartDestination } from "./SciChartSurfaceBase";
 export declare const sciChartSingleDestinations: TSciChartDestination[];
 /** @ignore */
-export declare const createSingleInternal: (divElementId: string, options?: I2DSurfaceOptions) => Promise<TWebAssemblyChart>;
+export declare const createSingleInternal: (divElement: string | HTMLDivElement, options?: I2DSurfaceOptions) => Promise<TWebAssemblyChart>;
 /** @ignore */
 export declare const initDrawEngineSingleChart: (wasmContext: TSciChart, canvases: TSciChartSurfaceCanvases, resolve: (value: TWebAssemblyChart) => void, theme: IThemeProvider) => void;

package/Charting/Visuals/createSingle.js

@@ -15,10 +15,10 @@ var SciChartSurfaceBase_1 = require("./SciChartSurfaceBase");
 // Global variables
 exports.sciChartSingleDestinations = [];
 /** @ignore */
-var createSingleInternal = function (divElementId, options) {
+var createSingleInternal = function (divElement, options) {
     return new Promise(function (resolve, reject) {
         var _a;
-        var canvases = sciChartInitCommon_1.default.initCanvas(divElementId, options === null || options === void 0 ? void 0 : options.widthAspect, options === null || options === void 0 ? void 0 : options.heightAspect);
+        var canvases = sciChartInitCommon_1.default.initCanvas(divElement, options === null || options === void 0 ? void 0 : options.widthAspect, options === null || options === void 0 ? void 0 : options.heightAspect);
         var loader = (_a = options === null || options === void 0 ? void 0 : options.loader) !== null && _a !== void 0 ? _a : new loader_1.DefaultSciChartLoader();
         var loaderDiv = loader.addChartLoader(canvases.domDivContainer, options === null || options === void 0 ? void 0 : options.theme);
         var webGLSupport = WebGlHelper_1.WebGlHelper.getWebGlSupport();