scichart 3.0.301 → 3.1.329

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

@@ -65,7 +65,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.LabelProviderBase2D = exports.LabelInfo = void 0;
 var app_1 = require("../../../../constants/app");
 var guid_1 = require("../../../../utils/guid");
-var TextureWorker_1 = require("../../../Services/Workers/TextureWorker");
 var NativeObject_1 = require("../../Helpers/NativeObject");
 var SciChartDefaults_1 = require("../../SciChartDefaults");
 var TextureManager_1 = require("../../TextureManager/TextureManager");
@@ -73,7 +72,6 @@ var LabelCache_1 = require("./LabelCache");
 var LabelProvider_1 = require("./LabelProvider");
 var LabelInfo = /** @class */ (function () {
     function LabelInfo(tick, text, bitmapTexture, textureHeight, textureWidth) {
-        this.subs = [];
         this.tick = tick;
         this.text = text;
         this.bitmapTexture = bitmapTexture;
@@ -81,13 +79,6 @@ var LabelInfo = /** @class */ (function () {
         this.textureWidth = textureWidth;
         this.lastUsed = Date.now();
     }
-    LabelInfo.prototype.registerNotifier = function (callback) {
-        this.subs.push(callback);
-    };
-    LabelInfo.prototype.textureUpdated = function () {
-        this.subs.forEach(function (notifier) { return notifier(); });
-        this.subs = [];
-    };
     return LabelInfo;
 }());
 exports.LabelInfo = LabelInfo;
@@ -99,7 +90,7 @@ var LabelProviderBase2D = /** @class */ (function (_super) {
     __extends(LabelProviderBase2D, _super);
     function LabelProviderBase2D(options) {
         var _this = this;
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d;
         _this = _super.call(this, options) || this;
         _this.useCache = !app_1.IS_TEST_ENV;
         /**
@@ -114,9 +105,8 @@ var LabelProviderBase2D = /** @class */ (function (_super) {
         _this.providerId = (0, guid_1.generateGuid)();
         _this.rotationProperty = (_a = options === null || options === void 0 ? void 0 : options.rotation) !== null && _a !== void 0 ? _a : _this.rotationProperty;
         _this.lineSpacing = (_b = options === null || options === void 0 ? void 0 : options.lineSpacing) !== null && _b !== void 0 ? _b : _this.lineSpacing;
-        _this.asyncLabels = (_c = options === null || options === void 0 ? void 0 : options.asyncLabels) !== null && _c !== void 0 ? _c : SciChartDefaults_1.SciChartDefaults.asyncLabels;
-        _this.useSharedCache = (_d = options === null || options === void 0 ? void 0 : options.useSharedCache) !== null && _d !== void 0 ? _d : SciChartDefaults_1.SciChartDefaults.useSharedCache;
-        _this.useNativeText = (_e = options === null || options === void 0 ? void 0 : options.useNativeText) !== null && _e !== void 0 ? _e : SciChartDefaults_1.SciChartDefaults.useNativeText;
+        _this.useSharedCache = (_c = options === null || options === void 0 ? void 0 : options.useSharedCache) !== null && _c !== void 0 ? _c : SciChartDefaults_1.SciChartDefaults.useSharedCache;
+        _this.useNativeText = (_d = options === null || options === void 0 ? void 0 : options.useNativeText) !== null && _d !== void 0 ? _d : SciChartDefaults_1.SciChartDefaults.useNativeText;
         return _this;
     }
     Object.defineProperty(LabelProviderBase2D.prototype, "rotation", {
@@ -337,69 +327,32 @@ var LabelProviderBase2D = /** @class */ (function (_super) {
      * @returns A TTextureObject containing the bitmapTexture and the size
      */
     LabelProviderBase2D.prototype.getCachedLabelTexture = function (labelText, textureManager, labelStyle) {
-        var _this = this;
         var _a;
         var cachedLabel = LabelCache_1.labelCache.getLabel(labelText, this.styleId);
         if (cachedLabel) {
-            if (cachedLabel.textureWidth === undefined) {
-                // Log when this texture request was made. Kill and restart if too old
-                // Make sure this chart redraws if it is waiting on a label that was requested by a different chart
-                cachedLabel.registerNotifier(function () { return _super.prototype.invalidateParent.call(_this); });
-            }
             return {
                 textureWidth: (_a = cachedLabel.textureWidth) !== null && _a !== void 0 ? _a : null,
                 textureHeight: cachedLabel.textureHeight,
                 bitmapTexture: cachedLabel.bitmapTexture
             };
         }
-        else if (this.asyncLabels) {
-            // Capture the styleId as it might have changed by the time the result comes in.
-            var callBackStyleId_1 = this.styleId;
-            this.getLabelTextureAsync(labelText, textureManager, labelStyle).then(function (result) {
-                var cached = LabelCache_1.labelCache.getLabel(labelText, callBackStyleId_1);
-                // This may not exist if the target chart has been deleted already.
-                if (cached) {
-                    cached.textureHeight = result.textureHeight;
-                    cached.textureWidth = result.textureWidth;
-                    cached.bitmapTexture = result.bitmapTexture;
-                    cached.textureUpdated();
-                    // this.invalidateParent also clears cache, which we don't want here.
-                    _super.prototype.invalidateParent.call(_this);
-                }
-            });
-            return {
-                textureWidth: undefined,
-                textureHeight: undefined,
-                bitmapTexture: undefined
-            };
-        }
         else {
             return this.getLabelTexture(labelText, textureManager, labelStyle);
         }
     };
     /**
-     * Create a texture for the given label text asynchronously. This method is called if asyncLabels is true, otherwise getLabelTexture is used.
-     * If overriding this method with useSharedCache = true, consider setting it false for this LabelProvider,
-     * otherwise other axes using the same style and text may see your custom texture. Alternatively you can override getCachedStyle or set styleId directly
+     * @deprecated AsyncLabels have been removed. useNativeText: true provides much greater performance benefit.
+     * If using texture labels override getLabelTexture instead
      */
     LabelProviderBase2D.prototype.getLabelTextureAsync = function (labelText, textureManager, labelStyle) {
         return __awaiter(this, void 0, void 0, function () {
-            var image;
             return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        if (!TextureWorker_1.textureWorker.isActive) return [3 /*break*/, 2];
-                        return [4 /*yield*/, TextureWorker_1.textureWorker.measureAndGetImageData([labelText], labelStyle, this.rotationProperty)];
-                    case 1:
-                        image = _a.sent();
-                        return [2 /*return*/, textureManager.createTextureFromImageData(image.imageData, image.textureWidth, image.textureHeight)];
-                    case 2: return [2 /*return*/, this.getLabelTexture(labelText, textureManager, labelStyle)];
-                }
+                return [2 /*return*/, this.getLabelTexture(labelText, textureManager, labelStyle)];
             });
         });
     };
     /**
-     * Create a texture for the given label text. This method is called if asyncLabels is false, otherwise getLabelTextureAsync is used.
+     * Create a texture for the given label text. This method is called if useNativeText is false.
      * If overriding this method with useSharedCache = true, consider setting it false for this LabelProvider,
      * otherwise other axes using the same style and text may see your custom texture. Alternatively you can override getCachedStyle or set styleId directly
      */
@@ -421,7 +374,7 @@ var LabelProviderBase2D = /** @class */ (function (_super) {
         var options = {
             rotation: this.rotation,
             lineSpacing: this.lineSpacing,
-            asyncLabels: this.asyncLabels,
+            asyncLabels: false,
             useSharedCache: this.useSharedCache,
             useNativeText: this.useNativeText
         };

package/Charting/Visuals/Axis/LabelProvider/TextLabelProvider.d.ts

@@ -49,7 +49,6 @@ export declare class TextLabelProvider extends LabelProviderBase2D {
     set maxLength(value: number);
     onBeginAxisDraw(): void;
     getLabelWidth(ctx: CanvasRenderingContext2D, labelText: string, labelStyle?: TTextStyle): number;
-    getLabelTextureAsync(labelText: string, textureManager: TextureManager, labelStyle: TTextStyle): Promise<import("../../TextureManager/TextureManager").TTextureObject>;
     getLabelTexture(labelText: string, textureManager: TextureManager, labelStyle: TTextStyle): import("../../TextureManager/TextureManager").TTextureObject;
     /**
      * Wraps the label text and returns it as a string with newlines

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

@@ -25,46 +25,9 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.wrapText = exports.TextLabelProvider = void 0;
 var LabelProviderType_1 = require("../../../../types/LabelProviderType");
-var TextureWorker_1 = require("../../../Services/Workers/TextureWorker");
 var TextureManager_1 = require("../../TextureManager/TextureManager");
 var LabelCache_1 = require("./LabelCache");
 var LabelProviderBase2D_1 = require("./LabelProviderBase2D");
@@ -150,29 +113,6 @@ var TextLabelProvider = /** @class */ (function (_super) {
                 labelStyle.padding.right);
         }
     };
-    TextLabelProvider.prototype.getLabelTextureAsync = function (labelText, textureManager, labelStyle) {
-        return __awaiter(this, void 0, void 0, function () {
-            var image;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        if (!TextureWorker_1.textureWorker.isActive) return [3 /*break*/, 5];
-                        image = void 0;
-                        if (!Array.isArray(labelText)) return [3 /*break*/, 2];
-                        return [4 /*yield*/, TextureWorker_1.textureWorker.measureAndGetImageData(labelText, labelStyle, this.rotation, this.lineSpacing)];
-                    case 1:
-                        image = _a.sent();
-                        return [3 /*break*/, 4];
-                    case 2: return [4 /*yield*/, TextureWorker_1.textureWorker.measureAndGetImageData([labelText], labelStyle, this.rotation, this.lineSpacing)];
-                    case 3:
-                        image = _a.sent();
-                        _a.label = 4;
-                    case 4: return [2 /*return*/, textureManager.createTextureFromImageData(image.imageData, image.textureWidth, image.textureHeight)];
-                    case 5: return [2 /*return*/, this.getLabelTexture(labelText, textureManager, labelStyle)];
-                }
-            });
-        });
-    };
     TextLabelProvider.prototype.getLabelTexture = function (labelText, textureManager, labelStyle) {
         var lines = labelText.split("\n");
         return textureManager.createTextTexture(lines, labelStyle, this.rotation, this.lineSpacing);

package/Charting/Visuals/I2DSurfaceOptions.d.ts

@@ -3,6 +3,7 @@ import { Rect } from "../../Core/Rect";
 import { Thickness } from "../../Core/Thickness";
 import { EAutoColorMode } from "../../types/AutoColorMode";
 import { TBorder } from "../../types/TBorder";
+import { TChartTitleStyle } from "../../types/TextStyle";
 import { ECoordinateMode } from "./Annotations/AnnotationBase";
 import { ISurfaceOptionsBase } from "./SciChartSurfaceBase";
 /**
@@ -45,6 +46,14 @@ export interface I2DSurfaceOptions extends ISurfaceOptionsBase {
      * Optional - An {@link EAutoColorMode} which controls how often series colours set to AUTO_COLOR will be resolved.  Default OnAddRemoveSeries
      */
     autoColorMode?: EAutoColorMode;
+    /**
+     * Optional a title for the SciChartSurface
+     */
+    title?: string | string[];
+    /**
+     * The title text style and placement for the SciChartSurface as {@link TChartTitleStyle}
+     */
+    titleStyle?: TChartTitleStyle;
 }
 export interface I2DSubSurfaceOptions extends I2DSurfaceOptions {
     /**

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

@@ -92,11 +92,11 @@ export declare class FastColumnRenderableSeries extends BaseRenderableSeries {
      */
     set zeroLineY(zeroLineY: number);
     /**
-     * Gets or sets the width of candles as a fraction of available space. Valid values range from 0.0 - 1.0
+     * Gets or sets the width of columns as a fraction of available space. Valid values range from 0.0 - 1.0
      */
     get dataPointWidth(): number;
     /**
-     * Gets or sets the width of candles as a fraction of available space. Valid values range from 0.0 - 1.0
+     * Gets or sets the width of columns as a fraction of available space. Valid values range from 0.0 - 1.0
      */
     set dataPointWidth(dataPointWidth: number);
     /**

package/Charting/Visuals/RenderableSeries/FastColumnRenderableSeries.js

@@ -145,13 +145,13 @@ var FastColumnRenderableSeries = /** @class */ (function (_super) {
     });
     Object.defineProperty(FastColumnRenderableSeries.prototype, "dataPointWidth", {
         /**
-         * Gets or sets the width of candles as a fraction of available space. Valid values range from 0.0 - 1.0
+         * Gets or sets the width of columns as a fraction of available space. Valid values range from 0.0 - 1.0
          */
         get: function () {
             return this.dataPointWidthProperty;
         },
         /**
-         * Gets or sets the width of candles as a fraction of available space. Valid values range from 0.0 - 1.0
+         * Gets or sets the width of columns as a fraction of available space. Valid values range from 0.0 - 1.0
          */
         set: function (dataPointWidth) {
             this.dataPointWidthProperty = dataPointWidth;

package/Charting/Visuals/SciChartDefaults.d.ts

@@ -1,8 +1,7 @@
 import { EWatermarkPosition } from "../../types/WatermarkPosition";
 export declare class SciChartDefaults {
     /**
-     * Experimental - set true to enable async label texture creation
-     * Can also be set on individual labelProviders.
+     * @deprecated This functionality has been removed. useNativeText: true provides much greater performance benefit.
      */
     static asyncLabels: boolean;
     /**
@@ -18,7 +17,7 @@ export declare class SciChartDefaults {
      */
     static performanceWarnings: boolean;
     /**
-     * Experimental - set true to use native text for axes.  Not all text features currently supported
+     * Experimental - set true to use native text for axes and titles.  Not all text features currently supported
      */
     static useNativeText: boolean;
     /**

package/Charting/Visuals/SciChartDefaults.js

@@ -6,8 +6,7 @@ var SciChartDefaults = /** @class */ (function () {
     function SciChartDefaults() {
     }
     /**
-     * Experimental - set true to enable async label texture creation
-     * Can also be set on individual labelProviders.
+     * @deprecated This functionality has been removed. useNativeText: true provides much greater performance benefit.
      */
     SciChartDefaults.asyncLabels = false;
     /**
@@ -23,7 +22,7 @@ var SciChartDefaults = /** @class */ (function () {
      */
     SciChartDefaults.performanceWarnings = true;
     /**
-     * Experimental - set true to use native text for axes.  Not all text features currently supported
+     * Experimental - set true to use native text for axes and titles.  Not all text features currently supported
      */
     SciChartDefaults.useNativeText = false;
     /**

package/Charting/Visuals/SciChartSurface.d.ts

@@ -29,6 +29,8 @@ import { ESurfaceType, SciChartSurfaceBase, TSciChartConfig } from "./SciChartSu
 import { TDpiChangedEventArgs } from "./TextureManager/DpiHelper";
 import { Point } from "../../Core/Point";
 import { EWatermarkPosition } from "../../types/WatermarkPosition";
+import { TChartTitleStyle } from "../../types/TextStyle";
+import { IChartTitleRenderer } from "../Services/TitleRenderer";
 export declare type TSciChart = TWasmContext;
 export declare type TWebAssemblyChart = {
     wasmContext: TSciChart;
@@ -97,6 +99,7 @@ export declare class SciChartSurface extends SciChartSurfaceBase {
      * Tell SciChart to load the Wasm and Data files from the local server, rather than from CDN.
      */
     static useWasmLocal(): void;
+    static isSubSurface(surface: SciChartSurface): surface is SciChartSubSurface;
     private static createTest;
     readonly renderSurface: RenderSurface;
     /**
@@ -218,6 +221,9 @@ export declare class SciChartSurface extends SciChartSurfaceBase {
     /** Set true to position the watermark relative to the overall canvas, rather than the series area.   */
     watermarkRelativeToCanvas: boolean;
     protected animationList: IGenericAnimation[];
+    protected titleProperty: string | string[];
+    protected titleStyleProperty: Readonly<Required<TChartTitleStyle>>;
+    protected chartTitleRendererProperty: IChartTitleRenderer;
     protected paddingProperty: Thickness;
     private readonly sciChartRenderer;
     private layoutManagerProperty;
@@ -272,6 +278,11 @@ export declare class SciChartSurface extends SciChartSurfaceBase {
      * Used internally - gets or sets the {@link LayoutManager}
      */
     set layoutManager(value: LayoutManager);
+    /**
+     * Controls the rendering of {@link SiCharSurface.title}
+     */
+    get chartTitleRenderer(): IChartTitleRenderer;
+    set chartTitleRenderer(value: IChartTitleRenderer);
     /**
      * Gets or sets the {@link ISeriesTextLayoutManager} for performing text layout across multiple series
      */
@@ -280,6 +291,24 @@ export declare class SciChartSurface extends SciChartSurfaceBase {
      * Used internally - gets or sets the {@link ISeriesTextLayoutManager} for performing text layout across multiple series
      */
     set dataLabelLayoutManager(value: IDataLabelLayoutManager);
+    /**
+     * Gets or sets the title for the SciChartSurface
+     */
+    get title(): string | string[];
+    /**
+     * Gets or sets the title for the SciChartSurface
+     */
+    set title(value: string | string[]);
+    /**
+     * Gets or sets the title text style and placement for the SciChartSurface as {@link TChartTitleStyle}
+     */
+    get titleStyle(): Readonly<Required<TChartTitleStyle>>;
+    /**
+     * Gets or sets the title text style and placement for the SciChartSurface as {@link TChartTitleStyle}
+     * @remarks if updating, should be set as an object (or partial object) of type {@link TChartTitleStyle},
+     * instead of directly setting individual properties
+     */
+    set titleStyle(value: TChartTitleStyle);
     /**
      * Gets or sets the Padding between the SciChartSurface and it's inner elements, in order top, right, bottom, left
      * @remarks

package/Charting/Visuals/SciChartSurface.js

@@ -91,7 +91,6 @@ var RenderSurface_1 = require("../Drawing/RenderSurface");
 var SolidBrushCache_1 = require("../Drawing/SolidBrushCache");
 var LayoutManager_1 = require("../LayoutManager/LayoutManager");
 var SciChartRenderer_1 = require("../Services/SciChartRenderer");
-var TextureWorker_1 = require("../Services/Workers/TextureWorker");
 var AdornerLayer_1 = require("./Annotations/AdornerLayer");
 var AnnotationBase_1 = require("./Annotations/AnnotationBase");
 var AxisBase2D_1 = require("./Axis/AxisBase2D");
@@ -109,9 +108,10 @@ var DpiHelper_1 = require("./TextureManager/DpiHelper");
 var UpdateSuspender_1 = require("./UpdateSuspender");
 var Point_1 = require("../../Core/Point");
 var SciChartDefaults_1 = require("./SciChartDefaults");
+var ChartTitleRenderer_1 = require("../Services/ChartTitleRenderer");
+var TextStyle_1 = require("../../types/TextStyle");
+var TextPosition_1 = require("../../types/TextPosition");
 exports.sciChartConfig = {};
-// To force the worker to be created before it is needed, so we know if it alive or not
-var t = TextureWorker_1.textureWorker;
 /**
  * @summary The {@link SciChartSurface} is the root 2D Chart control in SciChart's High Performance Real-time
  * {@link https://www.scichart.com/javascript-chart-features | JavaScript Chart Library}
@@ -170,6 +170,21 @@ var SciChartSurface = /** @class */ (function (_super) {
         /** Set true to position the watermark relative to the overall canvas, rather than the series area.   */
         _this.watermarkRelativeToCanvas = false;
         _this.animationList = [];
+        _this.titleStyleProperty = {
+            fontSize: 60,
+            fontFamily: "Arial",
+            color: SciChartSurfaceBase_1.SciChartSurfaceBase.DEFAULT_THEME.chartTitleColor,
+            fontWeight: "normal",
+            fontStyle: "normal",
+            lineSpacing: 1.1,
+            padding: Thickness_1.Thickness.fromString("2 4 0 4"),
+            multilineAlignment: TextPosition_1.EMultiLineAlignment.Center,
+            // rotation: 0,
+            alignment: TextStyle_1.ETextAlignment.Center,
+            position: TextStyle_1.ETitlePosition.Top,
+            placeWithinChart: false,
+            useNativeText: SciChartDefaults_1.SciChartDefaults.useNativeText
+        };
         _this.paddingProperty = Thickness_1.Thickness.fromNumber(10);
         _this.zoomStateProperty = ZoomState_1.EZoomState.AtExtents;
         _this.viewportBorderProperty = {
@@ -216,6 +231,7 @@ var SciChartSurface = /** @class */ (function (_super) {
         _this.renderSurface = new RenderSurface_1.RenderSurface(webAssemblyContext, viewportSize, (_e = _this.domCanvas2D) === null || _e === void 0 ? void 0 : _e.id);
         _this.renderSurface.handleDraw = _this.onRenderSurfaceDraw;
         _this.sciChartRenderer = new SciChartRenderer_1.SciChartRenderer(_this);
+        _this.chartTitleRendererProperty = new ChartTitleRenderer_1.ChartTitleRenderer(_this.webAssemblyContext2D);
         _this.layoutManager = new LayoutManager_1.LayoutManager();
         // TODO: remove this
         if (_this.domCanvas2D) {
@@ -345,6 +361,9 @@ var SciChartSurface = /** @class */ (function (_super) {
     SciChartSurface.useWasmLocal = function () {
         SciChartSurface.configure(undefined);
     };
+    SciChartSurface.isSubSurface = function (surface) {
+        return surface.isSubSurface;
+    };
     SciChartSurface.createTest = function (divElement, options) {
         var _a, _b;
         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);
@@ -453,6 +472,22 @@ var SciChartSurface = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(SciChartSurface.prototype, "chartTitleRenderer", {
+        /**
+         * Controls the rendering of {@link SiCharSurface.title}
+         */
+        get: function () {
+            return this.chartTitleRendererProperty;
+        },
+        set: function (value) {
+            var _a;
+            (_a = this.chartTitleRendererProperty) === null || _a === void 0 ? void 0 : _a.delete();
+            this.chartTitleRendererProperty = value;
+            this.invalidateElement();
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(SciChartSurface.prototype, "dataLabelLayoutManager", {
         /**
          * Gets or sets the {@link ISeriesTextLayoutManager} for performing text layout across multiple series
@@ -470,6 +505,46 @@ var SciChartSurface = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(SciChartSurface.prototype, "title", {
+        /**
+         * Gets or sets the title for the SciChartSurface
+         */
+        get: function () {
+            return this.titleProperty;
+        },
+        /**
+         * Gets or sets the title for the SciChartSurface
+         */
+        set: function (value) {
+            if (this.titleProperty !== value) {
+                this.titleProperty = value;
+                this.invalidateElement();
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SciChartSurface.prototype, "titleStyle", {
+        /**
+         * Gets or sets the title text style and placement for the SciChartSurface as {@link TChartTitleStyle}
+         */
+        get: function () {
+            return this.titleStyleProperty;
+        },
+        /**
+         * Gets or sets the title text style and placement for the SciChartSurface as {@link TChartTitleStyle}
+         * @remarks if updating, should be set as an object (or partial object) of type {@link TChartTitleStyle},
+         * instead of directly setting individual properties
+         */
+        set: function (value) {
+            if (this.titleStyleProperty !== value) {
+                this.titleStyleProperty = Object.assign({}, this.titleStyleProperty, value);
+                this.invalidateElement();
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(SciChartSurface.prototype, "padding", {
         /**
          * Gets or sets the Padding between the SciChartSurface and it's inner elements, in order top, right, bottom, left
@@ -552,6 +627,11 @@ var SciChartSurface = /** @class */ (function (_super) {
      * @inheritDoc
      */
     SciChartSurface.prototype.applyTheme = function (themeProvider) {
+        // TODO move to base when title is implemented on 3d charts
+        var previousThemeProvider = this.previousThemeProvider;
+        if (this.titleStyle.color === previousThemeProvider.chartTitleColor) {
+            this.titleStyle = { color: themeProvider.chartTitleColor };
+        }
         _super.prototype.applyTheme.call(this, themeProvider);
         this.renderableSeries.asArray().forEach(function (rs) { return rs.applyTheme(themeProvider); });
         this.xAxes.asArray().forEach(function (axis) { return axis.applyTheme(themeProvider); });
@@ -586,7 +666,9 @@ var SciChartSurface = /** @class */ (function (_super) {
             var chart = _a[_i];
             chart.updateSubLayout();
         }
-        this.invalidateElement();
+        // Bypass the isSuspended check, otherwise the chart will go blank if it is resized while suspended
+        var canvasId = this.domCanvas2D ? this.domCanvas2D.id : "undefinedCanvasId";
+        this.renderSurface.invalidateElement(canvasId);
     };
     /**
      * @inheritDoc
@@ -630,7 +712,7 @@ var SciChartSurface = /** @class */ (function (_super) {
             if (err.name === "BindingError") {
                 console.error(err);
                 console.warn("Binding errors can occur if a previous chart using the same div id was not deleted correctly, or if you try to share data or series between charts that use different webassembly contexts.");
-                (0, NativeObject_1.freeCache)(this.webAssemblyContext2D);
+                (0, NativeObject_1.freeCache)(this.webAssemblyContext2D).delete();
             }
             else if (this.domChartRoot) {
                 console.error("Error from chart in div ".concat(this.domChartRoot.id), err);
@@ -663,6 +745,7 @@ var SciChartSurface = /** @class */ (function (_super) {
         this.watermarkProperties = (0, Deleter_1.deleteSafe)(this.watermarkProperties);
         this.watermarkPropertyPosition = (0, Deleter_1.deleteSafe)(this.watermarkPropertyPosition);
         this.chartModifiers.asArray().forEach(function (chm) { return chm.delete(); });
+        this.chartTitleRendererProperty = (0, Deleter_1.deleteSafe)(this.chartTitleRenderer);
         if (clearHtml && this.domChartRoot) {
             var style = this.domChartRoot.style;
             if (style) {
@@ -1092,6 +1175,8 @@ var SciChartSurface = /** @class */ (function (_super) {
         }
         var options = {
             id: this.id,
+            title: this.title,
+            titleStyle: this.titleStyle,
             canvasBorder: this.canvasBorder,
             heightAspect: this.heightAspect,
             widthAspect: this.widthAspect,
@@ -1144,6 +1229,12 @@ var SciChartSurface = /** @class */ (function (_super) {
         if (options === null || options === void 0 ? void 0 : options.autoColorMode) {
             this.autoColorMode = options.autoColorMode;
         }
+        if (options === null || options === void 0 ? void 0 : options.title) {
+            this.title = options.title;
+        }
+        if (options === null || options === void 0 ? void 0 : options.titleStyle) {
+            this.titleStyle = options.titleStyle;
+        }
     };
     /**
      * @inheritDoc
@@ -1610,7 +1701,9 @@ var SciChartSubSurface = /** @class */ (function (_super) {
     /**
      * @inheritDoc
      */
-    SciChartSubSurface.prototype.changeViewportSize = function (pixelWidth, pixelHeight) { };
+    SciChartSubSurface.prototype.changeViewportSize = function (pixelWidth, pixelHeight) {
+        this.renderSurface.viewportSize = this.parentSurface.renderSurface.viewportSize;
+    };
     /**
      * Gets the sub-chart container
      */
@@ -1619,7 +1712,7 @@ var SciChartSubSurface = /** @class */ (function (_super) {
     };
     SciChartSubSurface.prototype.getSubChartRect = function () {
         var _a = this.renderSurface.viewportSize, width = _a.width, height = _a.height;
-        var _b = this.padding, top = _b.top, left = _b.left, bottom = _b.bottom, right = _b.right;
+        var _b = this.adjustedPadding, top = _b.top, left = _b.left, bottom = _b.bottom, right = _b.right;
         return new Rect_1.Rect(left, top, width - left - right, height - top - bottom);
     };
     /**

package/Charting/Visuals/TextureManager/DpiHelper.js

@@ -122,7 +122,7 @@ var DpiHelper = /** @class */ (function () {
         if (dpiScale === void 0) { dpiScale = DpiHelper.PIXEL_RATIO; }
         var dpiAdjusted = __assign({}, gridLineStyle);
         var roundedStrokeThickness = Math.round(gridLineStyle.strokeThickness * dpiScale);
-        dpiAdjusted.strokeDashArray = (_a = gridLineStyle.strokeDashArray) === null || _a === void 0 ? void 0 : _a.map(function (sd) { return sd * dpiScale; });
+        dpiAdjusted.strokeDashArray = (_a = gridLineStyle.strokeDashArray) === null || _a === void 0 ? void 0 : _a.map(function (sd) { return Math.round(sd * dpiScale); });
         dpiAdjusted.strokeThickness =
             roundedStrokeThickness > 0 || gridLineStyle.strokeThickness === 0 ? roundedStrokeThickness : 1;
         return dpiAdjusted;