scichart 2.0.2186 → 2.0.2228

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

@@ -1,3 +1,4 @@
+import { CoordinateCalculatorBase } from "../../Numerics/CoordinateCalculators/CoordinateCalculatorBase";
 import { RolloverModifierRenderableSeriesProps } from "../RenderableSeries/RolloverModifier/RolloverModifierRenderableSeriesProps";
 import { EAnnotationType } from "./IAnnotation";
 import { SvgAnnotationBase } from "./SvgAnnotationBase";
@@ -5,6 +6,10 @@ export declare class RolloverMarkerSvgAnnotation extends SvgAnnotationBase {
     /** @inheritDoc */
     readonly type = EAnnotationType.SVG;
     private tooltipProps;
+    private previousMousePosition;
     constructor(renderableSeriesProps: RolloverModifierRenderableSeriesProps);
+    /** @inheritDoc */
+    update(xCalc: CoordinateCalculatorBase, yCalc: CoordinateCalculatorBase): void;
+    /** @inheritDoc */
     protected create(): void;
 }

package/Charting/Visuals/Annotations/RolloverMarkerSvgAnnotation.js

@@ -16,6 +16,7 @@ var __extends = (this && this.__extends) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RolloverMarkerSvgAnnotation = void 0;
+var MousePosition_1 = require("../../../types/MousePosition");
 var IAnnotation_1 = require("./IAnnotation");
 var SvgAnnotationBase_1 = require("./SvgAnnotationBase");
 var RolloverMarkerSvgAnnotation = /** @class */ (function (_super) {
@@ -25,13 +26,23 @@ var RolloverMarkerSvgAnnotation = /** @class */ (function (_super) {
         /** @inheritDoc */
         _this.type = IAnnotation_1.EAnnotationType.SVG;
         _this.tooltipProps = renderableSeriesProps;
-        _this.isHidden = true;
+        _this.isHiddenProperty = true;
         _this.x1 = 0;
         _this.y1 = 0;
         _this.xCoordShift = -4;
         _this.yCoordShift = -4;
         return _this;
     }
+    /** @inheritDoc */
+    RolloverMarkerSvgAnnotation.prototype.update = function (xCalc, yCalc) {
+        var currentMousePosition = this.tooltipProps.rolloverModifier.getMousePosition();
+        if (this.previousMousePosition === currentMousePosition && currentMousePosition !== MousePosition_1.EMousePosition.SeriesArea) {
+            return;
+        }
+        this.previousMousePosition = this.tooltipProps.rolloverModifier.getMousePosition();
+        _super.prototype.update.call(this, xCalc, yCalc);
+    };
+    /** @inheritDoc */
     RolloverMarkerSvgAnnotation.prototype.create = function () {
         if (this.svg) {
             this.delete();

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

@@ -19,6 +19,7 @@ export declare class RolloverTooltipSvgAnnotation extends SvgAnnotationBase {
     height: number;
     private svgLegend;
     private seriesInfoProperty;
+    private previousMousePosition;
     /**
      * Creates an instance of the {@link RolloverTooltipSvgAnnotation}
      * @param renderableSeriesProps The {@link RolloverModifierRenderableSeriesProps | props} pass
@@ -33,18 +34,15 @@ export declare class RolloverTooltipSvgAnnotation extends SvgAnnotationBase {
      * Gets or sets seriesInfo {@link SeriesInfo} value on the tooltip
      */
     set seriesInfo(value: SeriesInfo);
-    /**
-     * @inheritDoc
-     */
+    /** @inheritDoc */
     delete(): void;
-    /**
-     * @inheritDoc
-     */
+    /** @inheritDoc */
     update(xCalc: CoordinateCalculatorBase, yCalc: CoordinateCalculatorBase): void;
-    updateSize(width: number, height: number): void;
     /**
-     * @inheritDoc
+     * Updates size of the tooltip
      */
+    updateSize(width: number, height: number): void;
+    /** @inheritDoc */
     protected create(xCalc: CoordinateCalculatorBase, yCalc: CoordinateCalculatorBase): void;
     private updateLegendTooltip;
 }

package/Charting/Visuals/Annotations/RolloverTooltipSvgAnnotation.js

@@ -16,6 +16,7 @@ var __extends = (this && this.__extends) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RolloverTooltipSvgAnnotation = void 0;
+var MousePosition_1 = require("../../../types/MousePosition");
 var IDataSeries_1 = require("../../Model/IDataSeries");
 var AnnotationBase_1 = require("./AnnotationBase");
 var constants_1 = require("./constants");
@@ -64,9 +65,7 @@ var RolloverTooltipSvgAnnotation = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    /**
-     * @inheritDoc
-     */
+    /** @inheritDoc */
     RolloverTooltipSvgAnnotation.prototype.delete = function () {
         var _a;
         if (!this.parentSurface || this.parentSurface.isDeleted)
@@ -76,23 +75,27 @@ var RolloverTooltipSvgAnnotation = /** @class */ (function (_super) {
             this.svgRoot.removeChild(this.svgLegend);
         }
     };
-    /**
-     * @inheritDoc
-     */
+    /** @inheritDoc */
     RolloverTooltipSvgAnnotation.prototype.update = function (xCalc, yCalc) {
+        var currentMousePosition = this.tooltipProps.rolloverModifier.getMousePosition();
+        if (this.previousMousePosition === currentMousePosition && currentMousePosition !== MousePosition_1.EMousePosition.SeriesArea) {
+            return;
+        }
+        this.previousMousePosition = this.tooltipProps.rolloverModifier.getMousePosition();
         if (this.svg) {
             this.delete();
         }
         _super.prototype.update.call(this, xCalc, yCalc);
         this.updateLegendTooltip();
     };
+    /**
+     * Updates size of the tooltip
+     */
     RolloverTooltipSvgAnnotation.prototype.updateSize = function (width, height) {
         this.width = width;
         this.height = height;
     };
-    /**
-     * @inheritDoc
-     */
+    /** @inheritDoc */
     RolloverTooltipSvgAnnotation.prototype.create = function (xCalc, yCalc) {
         var _a;
         var svgString;

package/Charting/Visuals/Annotations/SvgAnnotationBase.js

@@ -38,6 +38,11 @@ var SvgAnnotationBase = /** @class */ (function (_super) {
         var _this = _super.call(this, options) || this;
         /** @inheritDoc */
         _this.isSvgAnnotation = true;
+        /**
+         * The {@link SVGElement} which will be added to the chart
+         */
+        _this.xCoordShiftProperty = 0;
+        _this.yCoordShiftProperty = 0;
         _this.verticalAnchorPointProperty = AnchorPoint_1.EVerticalAnchorPoint.Top;
         _this.horizontalAnchorPointProperty = AnchorPoint_1.EHorizontalAnchorPoint.Left;
         _this.prevX1Coordinate = 0;
@@ -292,8 +297,8 @@ var SvgAnnotationBase = /** @class */ (function (_super) {
     SvgAnnotationBase.prototype.calcAndSetAnnotationBorders = function (xCalc, yCalc) {
         if (!this.svg)
             return;
-        var borderX1 = this.getX1Coordinate(xCalc, yCalc);
-        var borderY1 = this.getY1Coordinate(xCalc, yCalc);
+        var borderX1 = this.getX1Coordinate(xCalc, yCalc) + this.xCoordShift;
+        var borderY1 = this.getY1Coordinate(xCalc, yCalc) + this.yCoordShift;
         this.svgDOMRect = this.svg.getBoundingClientRect();
         var borderX2 = borderX1 + this.svgDOMRect.width;
         var borderY2 = borderY1 + this.svgDOMRect.height;

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

@@ -7,6 +7,7 @@ import { EAxisAlignment } from "../../../types/AxisAlignment";
 import { EAxisType } from "../../../types/AxisType";
 import { TBorder } from "../../../types/TBorder";
 import { SCRTPen, SCRTSolidBrush, TSciChart } from "../../../types/TSciChart";
+import { TStackedAxisLength } from "../../../types/TStackedAxisLength";
 import { WebGlRenderContext2D } from "../../Drawing/WebGlRenderContext2D";
 import { IThemeable } from "../../Themes/IThemeable";
 import { IThemeProvider } from "../../Themes/IThemeProvider";
@@ -112,6 +113,13 @@ export interface IAxisBase2dOptions extends IAxisCoreOptions {
      * @remarks Center axis uses inner layout strategy
      */
     isInnerAxis?: boolean;
+    /** Gets or sets the length of a stacked axis as an absolute number or percentage, e.g. 100, or "30%".
+     * A plain number will be interpreted as a number of pixels.
+     * A number with % will take that percentage of the total length.
+     * Stacked axes without a defined length will have the remaining unreserved spaced split between them.
+     * @remarks The axis length doesn't include border sizes
+     */
+    stackedAxisLength?: TStackedAxisLength;
     /**
      * Sets a {@link LabelProvider} - a class which is responsible for formatting axis labels and cursor labels from numeric values
      */
@@ -230,6 +238,20 @@ export declare abstract class AxisBase2D extends AxisCore implements IThemeable
      * This is only used to allow multiple primary axes, so that all stacked axes can draw gridlines
      */
     set isStackedAxis(value: boolean);
+    /** Gets or sets the length of a stacked axis as an absolute number or percentage, e.g. 100, or "30%".
+     * A plain number will be interpreted as a number of pixels.
+     * A number with % will take that percentage of the total length.
+     * Stacked axes without a defined length will have the remaining unreserved spaced split between them.
+     * @remarks The axis length doesn't include border sizes
+     */
+    get stackedAxisLength(): TStackedAxisLength;
+    /** Gets or sets the length of a stacked axis as an absolute number or percentage, e.g. 100, or "30%".
+     * A plain number will be interpreted as a number of pixels.
+     * A number with % will take that percentage of the total length.
+     * Stacked axes without a defined length will have the remaining unreserved spaced split between them.
+     * @remarks The axis length doesn't include border sizes
+     */
+    set stackedAxisLength(value: TStackedAxisLength);
     /**
      * Called internally - Gets or sets the length the current Axis. E.g. width of horizontal axis or height of vertical axis.
      */
@@ -308,6 +330,7 @@ export declare abstract class AxisBase2D extends AxisCore implements IThemeable
     private zoomExtentsRangeProperty;
     private isPrimaryAxisProperty;
     private isStackedAxisProperty;
+    private stackedAxisLengthProperty;
     private penCacheForMajorGridLines;
     private penCacheForMinorGridLines;
     private penCacheForMajorTickLines;

package/Charting/Visuals/Axis/AxisBase2D.js

@@ -100,7 +100,7 @@ var AxisBase2D = /** @class */ (function (_super) {
      * @param options Optional parameters of type {@link IAxisBase2dOptions} used to configure the axis at instantiation time
      */
     function AxisBase2D(webAssemblyContext, options) {
-        var _a, _b, _c, _d, _e, _f, _g;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         var _this = _super.call(this, options) || this;
         /**
          * Gets the {@link AxisLayoutState} class which manages layout
@@ -149,6 +149,7 @@ var AxisBase2D = /** @class */ (function (_super) {
         _this.labelStyle = __assign(__assign({}, _this.labelStyle), options === null || options === void 0 ? void 0 : options.labelStyle);
         _this.axisBorder = __assign(__assign({}, _this.axisBorder), options === null || options === void 0 ? void 0 : options.axisBorder);
         _this.isInnerAxis = (_g = options === null || options === void 0 ? void 0 : options.isInnerAxis) !== null && _g !== void 0 ? _g : _this.isInnerAxis;
+        _this.stackedAxisLength = (_h = options === null || options === void 0 ? void 0 : options.stackedAxisLength) !== null && _h !== void 0 ? _h : _this.stackedAxisLength;
         _this.solidBrushCacheBorder = new SolidBrushCache_1.SolidBrushCache(webAssemblyContext);
         if (options === null || options === void 0 ? void 0 : options.labelProvider) {
             if (!("getLabels" in (options === null || options === void 0 ? void 0 : options.labelProvider))) {
@@ -232,8 +233,10 @@ var AxisBase2D = /** @class */ (function (_super) {
          * SciChart also supports XAxis on the left and YAxis on the top to rotate / create vertical charts.
          */
         set: function (axisAlignment) {
-            this.axisAlignmentProperty = axisAlignment;
-            this.notifyPropertyChanged(constants_1.PROPERTY.AXIS_ALIGNMENT);
+            if (this.axisAlignmentProperty !== axisAlignment) {
+                this.axisAlignmentProperty = axisAlignment;
+                this.notifyPropertyChanged(constants_1.PROPERTY.AXIS_ALIGNMENT);
+            }
         },
         enumerable: false,
         configurable: true
@@ -249,8 +252,10 @@ var AxisBase2D = /** @class */ (function (_super) {
          * Gets or sets a property which limits {@link AxisCore.visibleRange}, meaning the chart cannot autorange outside that range
          */
         set: function (visibleRangeLimit) {
-            this.visibleRangeLimitProperty = visibleRangeLimit;
-            this.notifyPropertyChanged(constants_1.PROPERTY.VISIBLE_RANGE_LIMIT);
+            if (!NumberRange_1.NumberRange.areEqual(this.visibleRangeLimitProperty, visibleRangeLimit)) {
+                this.visibleRangeLimitProperty = visibleRangeLimit;
+                this.notifyPropertyChanged(constants_1.PROPERTY.VISIBLE_RANGE_LIMIT);
+            }
         },
         enumerable: false,
         configurable: true
@@ -266,8 +271,10 @@ var AxisBase2D = /** @class */ (function (_super) {
          * Gets or sets a property which, if it is set, will be used as the range when zooming extents, rather than the data max range
          */
         set: function (zoomExtentsRange) {
-            this.zoomExtentsRangeProperty = zoomExtentsRange;
-            this.notifyPropertyChanged(constants_1.PROPERTY.ZOOMEXTENTS_RANGE);
+            if (!NumberRange_1.NumberRange.areEqual(this.zoomExtentsRangeProperty, zoomExtentsRange)) {
+                this.zoomExtentsRangeProperty = zoomExtentsRange;
+                this.notifyPropertyChanged(constants_1.PROPERTY.ZOOMEXTENTS_RANGE);
+            }
         },
         enumerable: false,
         configurable: true
@@ -285,8 +292,10 @@ var AxisBase2D = /** @class */ (function (_super) {
          * @remarks Center axis uses inner layout strategy
          */
         set: function (value) {
-            this.isInnerAxisProperty = value;
-            this.notifyPropertyChanged(constants_1.PROPERTY.IS_INNER_AXIS);
+            if (this.isInnerAxisProperty !== value) {
+                this.isInnerAxisProperty = value;
+                this.notifyPropertyChanged(constants_1.PROPERTY.IS_INNER_AXIS);
+            }
         },
         enumerable: false,
         configurable: true
@@ -307,15 +316,17 @@ var AxisBase2D = /** @class */ (function (_super) {
          */
         set: function (value) {
             var _this = this;
-            this.isPrimaryAxisProperty = value;
-            this.notifyPropertyChanged(constants_1.PROPERTY.IS_PRIMARY_AXIS);
-            if (value && !this.isStackedAxis) {
-                var axes = this.isXAxis ? this.parentSurface.xAxes : this.parentSurface.yAxes;
-                axes.asArray().forEach(function (a) {
-                    if (a !== _this && !a.isStackedAxis) {
-                        a.isPrimaryAxis = false;
-                    }
-                });
+            if (this.isPrimaryAxisProperty !== value) {
+                this.isPrimaryAxisProperty = value;
+                this.notifyPropertyChanged(constants_1.PROPERTY.IS_PRIMARY_AXIS);
+                if (value && !this.isStackedAxis) {
+                    var axes = this.isXAxis ? this.parentSurface.xAxes : this.parentSurface.yAxes;
+                    axes.asArray().forEach(function (a) {
+                        if (a !== _this && !a.isStackedAxis) {
+                            a.isPrimaryAxis = false;
+                        }
+                    });
+                }
             }
         },
         enumerable: false,
@@ -337,6 +348,31 @@ var AxisBase2D = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(AxisBase2D.prototype, "stackedAxisLength", {
+        /** Gets or sets the length of a stacked axis as an absolute number or percentage, e.g. 100, or "30%".
+         * A plain number will be interpreted as a number of pixels.
+         * A number with % will take that percentage of the total length.
+         * Stacked axes without a defined length will have the remaining unreserved spaced split between them.
+         * @remarks The axis length doesn't include border sizes
+         */
+        get: function () {
+            return this.stackedAxisLengthProperty;
+        },
+        /** Gets or sets the length of a stacked axis as an absolute number or percentage, e.g. 100, or "30%".
+         * A plain number will be interpreted as a number of pixels.
+         * A number with % will take that percentage of the total length.
+         * Stacked axes without a defined length will have the remaining unreserved spaced split between them.
+         * @remarks The axis length doesn't include border sizes
+         */
+        set: function (value) {
+            if (this.stackedAxisLengthProperty !== value) {
+                this.stackedAxisLengthProperty = value;
+                this.notifyPropertyChanged(constants_1.PROPERTY.AXIS_LENGTH);
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(AxisBase2D.prototype, "axisLength", {
         /**
          * Called internally - Gets or sets the length the current Axis. E.g. width of horizontal axis or height of vertical axis.
@@ -351,8 +387,10 @@ var AxisBase2D = /** @class */ (function (_super) {
             return (_b = this.axisLengthProperty) !== null && _b !== void 0 ? _b : defaultAxisLength;
         },
         set: function (value) {
-            this.axisLengthProperty = value;
-            this.notifyPropertyChanged(constants_1.PROPERTY.AXIS_LENGTH);
+            if (this.axisLengthProperty !== value) {
+                this.axisLengthProperty = value;
+                this.notifyPropertyChanged(constants_1.PROPERTY.AXIS_LENGTH);
+            }
         },
         enumerable: false,
         configurable: true
@@ -369,8 +407,10 @@ var AxisBase2D = /** @class */ (function (_super) {
          * Gets or sets the offset of the axis position
          */
         set: function (value) {
-            this.offsetProperty = value;
-            this.notifyPropertyChanged(constants_1.PROPERTY.OFFSET);
+            if (this.offsetProperty !== value) {
+                this.offsetProperty = value;
+                this.notifyPropertyChanged(constants_1.PROPERTY.OFFSET);
+            }
         },
         enumerable: false,
         configurable: true
@@ -676,8 +716,15 @@ var AxisBase2D = /** @class */ (function (_super) {
         }
         var translatedRange = this.getCurrentCoordinateCalculator().translateBy(pixelsToScroll, startVisibleRange);
         if (this.visibleRangeLimit) {
-            if (translatedRange.min < this.visibleRangeLimit.min || translatedRange.max > this.visibleRangeLimit.max) {
-                return false;
+            var limitDelta = 0;
+            if (translatedRange.min < this.visibleRangeLimit.min) {
+                limitDelta = this.visibleRangeLimit.min - translatedRange.min;
+            }
+            else if (this.visibleRangeLimit.max < translatedRange.max) {
+                limitDelta = this.visibleRangeLimit.max - translatedRange.max;
+            }
+            if (limitDelta) {
+                translatedRange = new NumberRange_1.NumberRange(translatedRange.min + limitDelta, translatedRange.max + limitDelta);
             }
         }
         this.visibleRange = translatedRange;

package/Charting/Visuals/Axis/AxisRenderer.js

@@ -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/LabelProvider/LabelCache.js

@@ -72,7 +72,7 @@ var clearCacheByStyle = function (styleId) {
         }
     }
 };
-var maxSize = 100;
+var maxSize = 200;
 var minAge = 1000 * 60;
 var lastUsed = 0;
 var getMaxSize = function () { return maxSize; };
@@ -88,7 +88,7 @@ var pruneCache = function () {
     if (labelCacheByTextAndStyle.size > maxSize && lastUsed < latest) {
         try {
             // remove more than we need so we do this less.
-            var toRemove = (labelCacheByTextAndStyle.size - maxSize) * 2;
+            var toRemove = Math.min(Math.floor(labelCacheByTextAndStyle.size / 2), (labelCacheByTextAndStyle.size - maxSize) * 2);
             // Sort the items by LastUsed ascending
             var labels = Array.from(labelCacheByTextAndStyle.entries());
             labels.sort(function (a, b) { return a[1].lastUsed - b[1].lastUsed; });

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

@@ -148,11 +148,16 @@ var LabelProviderBase2D = /** @class */ (function (_super) {
                 var cachedLabel = void 0;
                 if (cachedLabelText) {
                     cachedLabel = LabelCache_1.labelCache.getLabel(cachedLabelText, this.styleId);
-                    labels.push(cachedLabelText);
+                    if (cachedLabel) {
+                        labels.push(cachedLabelText);
+                    }
                 }
-                else {
-                    var text = this.formatLabel(tick);
-                    this.tickToText.set(tick, text);
+                if (!cachedLabel) {
+                    var text = cachedLabelText;
+                    if (!cachedLabelText) {
+                        text = this.formatLabel(tick);
+                        this.tickToText.set(tick, text);
+                    }
                     var texture = this.getCachedLabelTexture(text, axis.axisRenderer.textureManager, axis.dpiAdjustedLabelStyle);
                     if (texture.textureWidth !== null) {
                         cachedLabel = new LabelInfo(tick, text, texture.bitmapTexture, texture.textureHeight, texture.textureWidth);

package/Charting/Visuals/RenderableSeries/BaseRenderableSeries.js

@@ -512,7 +512,8 @@ var BaseRenderableSeries = /** @class */ (function () {
     };
     /** @inheritDoc */
     BaseRenderableSeries.prototype.getDataSeriesName = function () {
-        return this.dataSeries.dataSeriesName;
+        var _a;
+        return (_a = this.dataSeries) === null || _a === void 0 ? void 0 : _a.dataSeriesName;
     };
     /** @inheritDoc */
     BaseRenderableSeries.prototype.getNativeXValues = function () {

package/Charting/Visuals/RenderableSeries/DrawingProviders/MountainSeriesDrawingProvider.js

@@ -21,6 +21,7 @@ var SeriesType_1 = require("../../../../types/SeriesType");
 var BrushCache_1 = require("../../../Drawing/BrushCache");
 var Pen2DCache_1 = require("../../../Drawing/Pen2DCache");
 var WebGlRenderContext2D_1 = require("../../../Drawing/WebGlRenderContext2D");
+var SciChartSurfaceBase_1 = require("../../SciChartSurfaceBase");
 var constants_1 = require("../constants");
 var BaseSeriesDrawingProvider_1 = require("./BaseSeriesDrawingProvider");
 /**
@@ -67,7 +68,7 @@ var MountainSeriesDrawingProvider = /** @class */ (function (_super) {
         args.verticalChart = renderPassData.isVerticalChart;
         args.zeroLineY = this.parentSeries.zeroLineY;
         args.isDigitalLine = this.parentSeries.isDigitalLine;
-        var fillBrush = (0, BrushCache_1.getScrtBrushFromCache)(this.fillBrushCache);
+        var fillBrush = this.createBrush();
         if (fillBrush) {
             args.SetFillBrush(fillBrush);
         }
@@ -141,8 +142,14 @@ var MountainSeriesDrawingProvider = /** @class */ (function (_super) {
         this.createBrush();
     };
     MountainSeriesDrawingProvider.prototype.createBrush = function () {
-        var _a = this.parentSeries, fill = _a.fill, opacity = _a.opacity, fillLinearGradient = _a.fillLinearGradient;
-        return (0, BrushCache_1.createBrushInCache)(this.fillBrushCache, fill, opacity, fillLinearGradient);
+        var _a = this.parentSeries, fill = _a.fill, opacity = _a.opacity, fillLinearGradient = _a.fillLinearGradient, parentSurface = _a.parentSurface;
+        var textureHeightRatio = (parentSurface === null || parentSurface === void 0 ? void 0 : parentSurface.isCopyCanvasSurface)
+            ? parentSurface.domCanvas2D.height / SciChartSurfaceBase_1.SciChartSurfaceBase.domMasterCanvas.height
+            : 1;
+        var textureWidthRatio = (parentSurface === null || parentSurface === void 0 ? void 0 : parentSurface.isCopyCanvasSurface)
+            ? parentSurface.domCanvas2D.width / SciChartSurfaceBase_1.SciChartSurfaceBase.domMasterCanvas.width
+            : 1;
+        return (0, BrushCache_1.createBrushInCache)(this.fillBrushCache, fill, opacity, textureHeightRatio, textureWidthRatio, fillLinearGradient);
     };
     MountainSeriesDrawingProvider.prototype.createPen = function () {
         var _a = this.parentSeries, stroke = _a.stroke, strokeThickness = _a.strokeThickness, opacity = _a.opacity, strokeDashArray = _a.strokeDashArray;

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
@@ -662,8 +669,6 @@ var SciChartSurface = /** @class */ (function (_super) {
                 if (!animation.isComplete) {
                     animation.update(timeElapsed);
                     if (!animation.isComplete) {
-                        // Request another draw to advance animation
-                        this.invalidateElement();
                         remainingAnimations.push(animation);
                     }
                 }