scichart 2.2.2417 → 3.0.0-beta.224

package/Charting/Visuals/SciChartSurface.js

@@ -26,10 +26,11 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SciChartSurface = exports.sciChartConfig = void 0;
+exports.SciChartSubSurface = exports.SciChartSurface = exports.sciChartConfig = void 0;
 var chartBuilder_1 = require("../../Builder/chartBuilder");
 var classFactory_1 = require("../../Builder/classFactory");
 var app_1 = require("../../constants/app");
+var performanceWarnings_1 = require("../../constants/performanceWarnings");
 var EasingFunctions_1 = require("../../Core/Animations/EasingFunctions");
 var BuildStamp_1 = require("../../Core/BuildStamp");
 var Deleter_1 = require("../../Core/Deleter");
@@ -38,11 +39,17 @@ var EventHandler_1 = require("../../Core/EventHandler");
 var ObservableArray_1 = require("../../Core/ObservableArray");
 var Rect_1 = require("../../Core/Rect");
 var Thickness_1 = require("../../Core/Thickness");
+var AutoColorMode_1 = require("../../types/AutoColorMode");
 var BaseType_1 = require("../../types/BaseType");
 var SeriesType_1 = require("../../types/SeriesType");
 var Size_1 = require("../../types/Size");
+var SvgClippingMode_1 = require("../../types/SvgClippingMode");
 var ZoomState_1 = require("../../types/ZoomState");
+var parseColor_1 = require("../../utils/parseColor");
+var translate_1 = require("../../utils/translate");
 var ChartModifierBase_1 = require("../ChartModifiers/ChartModifierBase");
+var BatchRenderContext_1 = require("../Drawing/BatchRenderContext");
+var BrushCache_1 = require("../Drawing/BrushCache");
 var RenderContext2D_1 = require("../Drawing/RenderContext2D");
 var RenderSurface_1 = require("../Drawing/RenderSurface");
 var SolidBrushCache_1 = require("../Drawing/SolidBrushCache");
@@ -50,14 +57,20 @@ 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");
+var AxisCore_1 = require("./Axis/AxisCore");
 var createMaster_1 = require("./createMaster");
 var createSingle_1 = require("./createSingle");
+var createNativeRect_1 = require("./Helpers/createNativeRect");
 var drawBorder_1 = require("./Helpers/drawBorder");
+var NativeObject_1 = require("./Helpers/NativeObject");
 var StackedColumnCollection_1 = require("./RenderableSeries/StackedColumnCollection");
 var StackedMountainCollection_1 = require("./RenderableSeries/StackedMountainCollection");
 var sciChartInitCommon_1 = require("./sciChartInitCommon");
 var SciChartSurfaceBase_1 = require("./SciChartSurfaceBase");
 var DpiHelper_1 = require("./TextureManager/DpiHelper");
+var UpdateSuspender_1 = require("./UpdateSuspender");
 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;
@@ -88,16 +101,35 @@ var SciChartSurface = /** @class */ (function (_super) {
      * @param options optional parameters of type {@link ISciChartSurfaceOptions} used to configure the {@link SciChartSurface}
      */
     function SciChartSurface(webAssemblyContext, options) {
-        var _a, _b, _c, _d;
-        var _this = _super.call(this, webAssemblyContext, options === null || options === void 0 ? void 0 : options.canvases) || this;
+        var _this = this;
+        var _a, _b, _c, _d, _e;
+        _this = _super.call(this, webAssemblyContext, options === null || options === void 0 ? void 0 : options.canvases) || this;
         /**
-         * An event handler which notifies its subsribers when a render operation has finished. Use this
+         * An event handler which notifies its subscribers when a render operation has finished. Use this
          * to time render performance, or to update elements of the chart or your UI on redraw.
          */
         _this.rendered = new EventHandler_1.EventHandler();
+        /**
+         * An event handler which notifies its subscribers when a render operation starts. Use this
+         * to update elements of the chart for the current render.  Any updates made here will not trigger a subsequent render.
+         */
+        _this.preRender = new EventHandler_1.EventHandler();
+        // TODO make these properties internal only; or add some provider
+        _this.layersOffset = 0;
+        _this.stepBetweenLayers = 10;
+        _this.isSubSurface = false;
+        /**
+         * Sets / Gets the clipping mode for SVG Annotations
+         */
+        _this.svgClippingMode = SvgClippingMode_1.ESvgClippingMode.SeriesViewRect;
+        /**
+         * Normally, native labels are drawn all at once at the end of the render cycle to improve performance.
+         * In circumstances where you want to draw over the labels, eg with a subchart, set this true to have them drawn earlier.
+         */
+        _this.renderNativeAxisLabelsImmediately = false;
         _this.animationList = [];
-        _this.zoomStateProperty = ZoomState_1.EZoomState.AtExtents;
         _this.paddingProperty = Thickness_1.Thickness.fromNumber(10);
+        _this.zoomStateProperty = ZoomState_1.EZoomState.AtExtents;
         _this.viewportBorderProperty = {
             borderBottom: undefined,
             borderLeft: undefined,
@@ -114,7 +146,11 @@ var SciChartSurface = /** @class */ (function (_super) {
             color: "#00000000",
             border: undefined
         };
+        _this.subChartsProperty = [];
         _this.drawSeriesBehindAxisProperty = false;
+        _this.autoColorModeProperty = AutoColorMode_1.EAutoColorMode.OnAddRemoveSeries;
+        _this.autoColorRequired = true;
+        _this.subChartCounter = 0;
         var canvasWidth = (_b = (_a = _this.domCanvas2D) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : app_1.DEFAULT_WIDTH;
         var canvasHeight = (_d = (_c = _this.domCanvas2D) === null || _c === void 0 ? void 0 : _c.height) !== null && _d !== void 0 ? _d : app_1.DEFAULT_HEIGHT;
         _this.webAssemblyContext2D = webAssemblyContext;
@@ -133,7 +169,7 @@ var SciChartSurface = /** @class */ (function (_super) {
         var viewportSize = _this.domCanvas2D
             ? new Size_1.Size(canvasWidth, canvasHeight)
             : new Size_1.Size(app_1.DEFAULT_WIDTH, app_1.DEFAULT_HEIGHT);
-        _this.renderSurface = new RenderSurface_1.RenderSurface(webAssemblyContext, viewportSize);
+        _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.layoutManager = new LayoutManager_1.LayoutManager();
@@ -191,7 +227,6 @@ var SciChartSurface = /** @class */ (function (_super) {
             _this.watermarkProperties.SetOpacity(0.5);
             webAssemblyContext.SCRTSetWaterMarkProperties(_this.watermarkProperties);
         }
-        _this.applySciChartBackground(SciChartSurfaceBase_1.SciChartSurfaceBase.DEFAULT_THEME.sciChartBackground);
         return _this;
     }
     /**
@@ -214,7 +249,9 @@ var SciChartSurface = /** @class */ (function (_super) {
         }
     };
     /**
-     * USED INTERNALLY - performs a similar operation to {@link SciChartSurface.create} but used internally for testing
+     * Performs a similar operation to {@link SciChartSurface.create} but uses a dedicated WebAssembly context for this chart, and draws directly to the target canvas
+     * This provides better performance for a single chart, but there is a limit (16) to how many you can have on one page.
+     * If you need large numbers of charts all updating at the same time, use this, together with {@link addSubChart} to create many charts on one surface.
      * @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
      */
@@ -268,6 +305,76 @@ var SciChartSurface = /** @class */ (function (_super) {
             return resolve({ wasmContext: sciChartSurface.webAssemblyContext2D, sciChartSurface: sciChartSurface });
         });
     };
+    /**
+     * Add another chart to an existing surface.
+     * This is a performance optimization if you need to have multiple charts all updating together, eg because they have synced axes.
+     * We suggest you use SciChartSurface.createSingle for the parent surface.  The parent surface does not have to have any chart elements defined.
+     * The position property required in the options determines the placement and size of the subchart.  Its values are interpreted differently depending on the coordinateMode
+     * Modifiers using modifierGroup will work across other subcharts on the surface, but not to any other surface.
+     */
+    SciChartSurface.prototype.addSubChart = function (options) {
+        var optionsBase = SciChartSurface.resolveOptions(options);
+        options = __assign(__assign({}, options), optionsBase);
+        this.subChartCounter++;
+        var divElementId = this.domChartRoot.id + "_" + this.subChartCounter.toString();
+        var chartRoot = this.domChartRoot;
+        var width = chartRoot.clientWidth;
+        var height = chartRoot.clientHeight;
+        // SVG Root Element
+        var svgRootElement = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+        svgRootElement.id = "".concat(divElementId, "_SVG");
+        svgRootElement.setAttribute("width", width.toString());
+        svgRootElement.setAttribute("height", height.toString());
+        svgRootElement.setAttribute("role", "img");
+        svgRootElement.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+        svgRootElement.style.position = "absolute";
+        svgRootElement.style.left = "0";
+        svgRootElement.style.top = "0";
+        svgRootElement.style.display = "block";
+        svgRootElement.style.pointerEvents = "none";
+        chartRoot.appendChild(svgRootElement);
+        var canvases = {
+            domChartRoot: this.domChartRoot,
+            domCanvasWebGL: this.domCanvasWebGL,
+            domCanvas2D: this.domCanvas2D,
+            domSvgContainer: svgRootElement,
+            domSvgAdornerLayer: this.domSvgAdornerLayer,
+            domDivContainer: this.domDivContainer
+        };
+        var subSurface = new SciChartSubSurface(this.webAssemblyContext2D, {
+            canvases: canvases,
+            parentSurface: this,
+            subSurfaceOptions: options
+        });
+        if (options === null || options === void 0 ? void 0 : options.theme) {
+            subSurface.applyTheme(options.theme);
+        }
+        // subcharts get mouse events from parent
+        subSurface.mouseManager.unsubscribe();
+        this.subChartsProperty.push(subSurface);
+        this.onAttachSubSurface(subSurface);
+        return subSurface;
+    };
+    /**
+     * Remove an existing subChart from a parent surface.  See {@link addSubChart}
+     */
+    SciChartSurface.prototype.removeSubChart = function (subChart) {
+        var index = this.subChartsProperty.findIndex(function (s) { return s === subChart; });
+        if (index > -1) {
+            this.subChartsProperty.splice(index, 1);
+            subChart.delete();
+        }
+    };
+    Object.defineProperty(SciChartSurface.prototype, "subCharts", {
+        /**
+         * The list of subCharts on this surface.  See {@link addSubChart}
+         */
+        get: function () {
+            return this.subChartsProperty;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(SciChartSurface.prototype, "surfaceType", {
         /**
          * @inheritDoc
@@ -296,6 +403,23 @@ var SciChartSurface = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(SciChartSurface.prototype, "dataLabelLayoutManager", {
+        /**
+         * Gets or sets the {@link ISeriesTextLayoutManager} for performing text layout across multiple series
+         */
+        get: function () {
+            return this.dataLabelLayoutManagerProperty;
+        },
+        /**
+         * Used internally - gets or sets the {@link ISeriesTextLayoutManager} for performing text layout across multiple series
+         */
+        set: function (value) {
+            this.dataLabelLayoutManagerProperty = 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
@@ -313,8 +437,10 @@ var SciChartSurface = /** @class */ (function (_super) {
          * set a new Thickness when you want to change the padding.
          */
         set: function (padding) {
-            this.paddingProperty = padding;
-            this.invalidateElement();
+            if (!this.paddingProperty.equals(padding)) {
+                this.paddingProperty = padding;
+                this.invalidateElement();
+            }
         },
         enumerable: false,
         configurable: true
@@ -349,6 +475,29 @@ var SciChartSurface = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(SciChartSurface.prototype, "autoColorMode", {
+        /**
+         * Gets or sets the EAutoColorMode which determines when resolution of AUTO_COLOR should occur
+         */
+        get: function () {
+            return this.autoColorModeProperty;
+        },
+        /**
+         * Gets or sets the EAutoColorMode which determines when resolution of AUTO_COLOR should occur
+         */
+        set: function (autoColorMode) {
+            this.autoColorModeProperty = autoColorMode;
+            if (autoColorMode !== AutoColorMode_1.EAutoColorMode.Never && !this.autoColorRequired) {
+                this.autoColorRequired = true;
+            }
+            else if (autoColorMode === AutoColorMode_1.EAutoColorMode.Never) {
+                this.autoColorRequired = false;
+            }
+            this.invalidateElement();
+        },
+        enumerable: false,
+        configurable: true
+    });
     /**
      * @inheritDoc
      */
@@ -383,8 +532,9 @@ var SciChartSurface = /** @class */ (function (_super) {
             this.domSvgAdornerLayer.setAttribute("width", pixelWidth.toString());
             this.domSvgAdornerLayer.setAttribute("height", pixelHeight.toString());
         }
-        if (this.domDivContainer) {
-            this.domDivContainer.style.height = "".concat(pixelHeight, "px");
+        for (var _i = 0, _a = this.subChartsProperty; _i < _a.length; _i++) {
+            var chart = _a[_i];
+            chart.updateSubLayout();
         }
         this.invalidateElement();
     };
@@ -402,14 +552,43 @@ var SciChartSurface = /** @class */ (function (_super) {
         this.renderSurface.invalidateElement(canvasId);
     };
     // Step_5: Get context and pass drawing to SciChartRenderer
-    SciChartSurface.prototype.doDrawingLoop = function () {
-        var context = this.renderSurface.getRenderContext();
+    SciChartSurface.prototype.doDrawingLoop = function (context) {
+        context = context !== null && context !== void 0 ? context : this.renderSurface.getRenderContext();
         try {
-            // console.log("Drawing ", this.domChartRoot.id);
+            var sus = new UpdateSuspender_1.UpdateSuspender(this, false); // Don't want to invalidate on resume
+            try {
+                if (this.autoColorRequired &&
+                    this.themeProvider.strokePalette &&
+                    this.themeProvider.strokePalette.length > 0) {
+                    this.resolveAutoColors();
+                    if (this.autoColorMode !== AutoColorMode_1.EAutoColorMode.Always) {
+                        this.autoColorRequired = false;
+                    }
+                }
+                this.preRender.raiseEvent(context);
+            }
+            catch (err) {
+                console.error(err);
+            }
+            finally {
+                sus.resume();
+            }
             this.sciChartRenderer.render(context);
         }
         catch (err) {
-            console.error("Error from chart in div ".concat(this.domChartRoot.id), err);
+            // @ts-ignore
+            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);
+            }
+            else if (this.domChartRoot) {
+                console.error("Error from chart in div ".concat(this.domChartRoot.id), err);
+            }
+            else {
+                // Surface the error for tests
+                throw err;
+            }
         }
     };
     /**
@@ -418,6 +597,11 @@ var SciChartSurface = /** @class */ (function (_super) {
     SciChartSurface.prototype.delete = function (clearHtml) {
         if (clearHtml === void 0) { clearHtml = true; }
         _super.prototype.delete.call(this);
+        for (var _i = 0, _a = this.subChartsProperty; _i < _a.length; _i++) {
+            var chart = _a[_i];
+            chart.delete();
+        }
+        this.subChartsProperty = [];
         this.renderableSeries.asArray().forEach(function (rs) { return rs.delete(); });
         this.renderableSeries.clear();
         this.xAxes.asArray().forEach(function (xAxis) { return xAxis.delete(); });
@@ -452,6 +636,8 @@ var SciChartSurface = /** @class */ (function (_super) {
         this.renderableSeries.asArray().forEach(function (rs) { return rs.onDpiChanged(args); });
         this.annotations.asArray().forEach(function (a) { return a.onDpiChanged(args); });
         this.modifierAnnotations.asArray().forEach(function (a) { return a.onDpiChanged(args); });
+        this.xAxes.asArray().forEach(function (a) { return a.onDpiChanged(); });
+        this.yAxes.asArray().forEach(function (a) { return a.onDpiChanged(); });
         // Force a viewport size change as size-changed may not fire when parent div has width, height
         this.changeViewportSize((_a = this.getMainCanvas()) === null || _a === void 0 ? void 0 : _a.clientWidth, (_b = this.getMainCanvas()) === null || _b === void 0 ? void 0 : _b.clientHeight);
         _super.prototype.onDpiChanged.call(this, args);
@@ -461,20 +647,28 @@ var SciChartSurface = /** @class */ (function (_super) {
      * @param axisId The AxisId to search for
      */
     SciChartSurface.prototype.getXAxisById = function (axisId) {
-        return this.xAxes.asArray().find(function (x) { return x.id === axisId; });
+        var axis = this.xAxes.getById(axisId);
+        if (!axis && axisId === AxisCore_1.AxisCore.DEFAULT_AXIS_ID && this.xAxes.size() > 0) {
+            axis = this.xAxes.get(0);
+        }
+        return axis;
     };
     /**
      * Gets the {@link AxisBase2D | YAxis} which matches the axisId. Returns undefined if not axis found
      * @param axisId The AxisId to search for
      */
     SciChartSurface.prototype.getYAxisById = function (axisId) {
-        return this.yAxes.asArray().find(function (y) { return y.id === axisId; });
+        var axis = this.yAxes.getById(axisId);
+        if (!axis && axisId === AxisCore_1.AxisCore.DEFAULT_AXIS_ID && this.yAxes.size() > 0) {
+            axis = this.yAxes.get(0);
+        }
+        return axis;
     };
     /**
      * Update accumulated vectors for all stacked collections
      */
     SciChartSurface.prototype.updateStackedCollectionAccumulatedVectors = function () {
-        var stackedCollection = this.renderableSeries.asArray().filter(function (el) { return el.isStacked; });
+        var stackedCollection = this.renderableSeries.asArray().filter(function (el) { return el.isStacked && "size" in el; });
         stackedCollection.forEach(function (el) { return el.updateAccumulatedVectors(); });
     };
     /**
@@ -525,10 +719,14 @@ var SciChartSurface = /** @class */ (function (_super) {
      * @inheritDoc
      */
     SciChartSurface.prototype.updateWatermark = function (left, bottom) {
+        var _a;
         if (!app_1.IS_TEST_ENV) {
             this.watermarkPropertyPosition.x = left;
             this.watermarkPropertyPosition.y = bottom;
+            this.watermarkProperties.m_fCanvasWidth = this.renderSurface.viewportSize.width;
             this.watermarkProperties.SetPosition(this.watermarkPropertyPosition);
+            var isLightBackground = (_a = this.themeProvider) === null || _a === void 0 ? void 0 : _a.isLightBackground;
+            this.watermarkProperties.m_bIsDarkBackground = isLightBackground !== undefined ? !isLightBackground : false;
             this.webAssemblyContext2D.SCRTSetWaterMarkProperties(this.watermarkProperties);
         }
     };
@@ -715,10 +913,15 @@ var SciChartSurface = /** @class */ (function (_super) {
      * Multiple animations will be run in parallel, so if you want to run one after another, use the onCompleted callback
      * to add another animation after the first completes
      */
-    SciChartSurface.prototype.addAnimation = function (animation) {
-        if (!animation)
+    SciChartSurface.prototype.addAnimation = function () {
+        var _this = this;
+        var animations = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            animations[_i] = arguments[_i];
+        }
+        if (animations === undefined)
             return;
-        this.animationList.push(animation);
+        animations.forEach(function (a) { return _this.animationList.push(a); });
         this.invalidateElement();
     };
     Object.defineProperty(SciChartSurface.prototype, "isRunningAnimation", {
@@ -751,6 +954,32 @@ var SciChartSurface = /** @class */ (function (_super) {
         var bottom = (this.domCanvas2D.height - seriesViewRect.bottom) / divider;
         return new Thickness_1.Thickness(top, right, bottom, left);
     };
+    /** Calls resolveAutoColors on each series to resolve colors marked as auto based on the seriesColorPalette */
+    SciChartSurface.prototype.resolveAutoColors = function (maxSeries) {
+        if (!maxSeries) {
+            var stackedCollections = this.renderableSeries
+                .asArray()
+                .filter(function (el) { return el.isStacked && "size" in el; });
+            maxSeries = this.renderableSeries.size() - stackedCollections.length;
+            for (var _i = 0, stackedCollections_1 = stackedCollections; _i < stackedCollections_1.length; _i++) {
+                var sc = stackedCollections_1[_i];
+                maxSeries += sc.size();
+            }
+        }
+        var index = 0;
+        for (var i = 0; i < this.renderableSeries.size(); i++) {
+            var rs = this.renderableSeries.get(i);
+            if (rs) {
+                rs.resolveAutoColors(index, maxSeries, this.themeProvider);
+            }
+            if (rs.isStacked && "size" in rs) {
+                index += rs.size();
+            }
+            else {
+                index += 1;
+            }
+        }
+    };
     /**
      * Convert the object to a definition that can be serialized to JSON, or used directly with the builder api
      * @param excludeData if set true, data values will not be included in the json.
@@ -767,6 +996,7 @@ var SciChartSurface = /** @class */ (function (_super) {
             theme = this.themeProvider;
         }
         var options = {
+            id: this.id,
             canvasBorder: this.canvasBorder,
             heightAspect: this.heightAspect,
             widthAspect: this.widthAspect,
@@ -774,7 +1004,10 @@ var SciChartSurface = /** @class */ (function (_super) {
             padding: this.padding,
             theme: theme,
             viewportBorder: this.viewportBorder,
-            loader: this.loaderJson
+            loader: this.loaderJson,
+            drawSeriesBehindAxis: this.drawSeriesBehindAxis,
+            disableAspect: this.disableAspect,
+            autoColorMode: this.autoColorMode
         };
         var definition = {
             surface: options,
@@ -783,7 +1016,9 @@ var SciChartSurface = /** @class */ (function (_super) {
             series: this.renderableSeries.asArray().map(function (series) { return series.toJSON(excludeData); }),
             modifiers: this.chartModifiers.asArray().map(function (modifier) { return modifier.toJSON(); }),
             annotations: this.annotations.asArray().map(function (annotation) { return annotation.toJSON(); }),
-            onCreated: this.onCreatedName
+            onCreated: this.onCreatedName,
+            subCharts: this.subCharts.map(function (sc) { return sc.toJSON(); }),
+            createSingle: this.webAssemblyContext2D.canvas.id !== "SciChartMasterCanvas"
         };
         return definition;
     };
@@ -811,12 +1046,18 @@ var SciChartSurface = /** @class */ (function (_super) {
         if (options === null || options === void 0 ? void 0 : options.drawSeriesBehindAxis) {
             this.drawSeriesBehindAxisProperty = options.drawSeriesBehindAxis;
         }
+        if (options === null || options === void 0 ? void 0 : options.autoColorMode) {
+            this.autoColorMode = options.autoColorMode;
+        }
     };
     /**
      * @inheritDoc
      */
     SciChartSurface.prototype.detachChartModifier = function (chartModifier) {
         _super.prototype.detachChartModifier.call(this, chartModifier);
+        this.subCharts.forEach(function (subChart) {
+            chartModifier.onDetachSubSurface(subChart);
+        });
     };
     /**
      * @inheritDoc
@@ -827,6 +1068,9 @@ var SciChartSurface = /** @class */ (function (_super) {
             chartModifier.setParentSurface(this);
             chartModifier.invalidateParentCallback = this.invalidateElement;
             chartModifier.onAttach();
+            this.subCharts.forEach(function (subChart) {
+                chartModifier.onAttachSubSurface(subChart);
+            });
             this.invalidateElement();
         }
     };
@@ -857,7 +1101,9 @@ var SciChartSurface = /** @class */ (function (_super) {
         if (onCompleted === void 0) { onCompleted = function () { }; }
         this.yAxes.asArray().forEach(function (yAxis) {
             var yRange = yAxis.getWindowedYRange(xRanges);
-            yAxis.animateVisibleRange(yRange, animationDurationMs, easingFunction, onCompleted);
+            if (yRange) {
+                yAxis.animateVisibleRange(yRange, animationDurationMs, easingFunction, onCompleted);
+            }
         });
     };
     SciChartSurface.prototype.zoomExtentsXInternal = function (animationDurationMs, easingFunction, onCompleted) {
@@ -874,8 +1120,29 @@ var SciChartSurface = /** @class */ (function (_super) {
     };
     // Step_4: Start drawing
     SciChartSurface.prototype.onRenderSurfaceDraw = function () {
-        // Logger.log("onRenderSurfaceDraw! " + Date.now().toLocaleString());
-        this.doDrawingLoop();
+        var _a;
+        if (this.subChartsProperty.length > 0) {
+            var batchContext_1 = new BatchRenderContext_1.BatchRenderContext(this.webAssemblyContext2D, this.renderSurface.viewportSize, (_a = this.domCanvas2D) === null || _a === void 0 ? void 0 : _a.id);
+            var visibleSubCharts_1 = this.subChartsProperty.filter(function (sc) { return sc.isVisible; });
+            if (visibleSubCharts_1.length === 0) {
+                // Draw on parent if no visible SubCharts
+                batchContext_1.doDraw = true;
+            }
+            // Render parent
+            this.doDrawingLoop(batchContext_1);
+            var middleChartLayersOffset_1 = 100;
+            visibleSubCharts_1.forEach(function (chart, index) {
+                chart.layersOffset = middleChartLayersOffset_1 * (index + 1);
+                if (index === visibleSubCharts_1.length - 1) {
+                    // If this is the last subChart, draw
+                    batchContext_1.doDraw = true;
+                }
+                chart.doDrawingLoop(batchContext_1);
+            });
+        }
+        else {
+            this.doDrawingLoop();
+        }
     };
     SciChartSurface.prototype.detachSeries = function (renderableSeries) {
         if (renderableSeries.type === SeriesType_1.ESeriesType.StackedColumnSeries ||
@@ -886,6 +1153,9 @@ var SciChartSurface = /** @class */ (function (_super) {
             cm.onDetachSeries(renderableSeries);
         });
         renderableSeries.onDetach();
+        if (this.autoColorMode === AutoColorMode_1.EAutoColorMode.OnAddRemoveSeries) {
+            this.autoColorRequired = true;
+        }
         this.invalidateElement();
     };
     SciChartSurface.prototype.attachSeries = function (renderableSeries) {
@@ -916,13 +1186,18 @@ var SciChartSurface = /** @class */ (function (_super) {
             col.add(renderableSeries);
             this.renderableSeries.remove(renderableSeries);
         }
-        renderableSeries.onAttach(this);
+        if (!renderableSeries.isStacked || "size" in renderableSeries) {
+            renderableSeries.onAttach(this);
+        }
         if (this.themeProviderProperty) {
             renderableSeries.applyTheme(this.themeProviderProperty);
         }
         this.chartModifiers.asArray().forEach(function (cm) {
             cm.onAttachSeries(renderableSeries);
         });
+        if (this.autoColorMode === AutoColorMode_1.EAutoColorMode.OnAddRemoveSeries) {
+            this.autoColorRequired = true;
+        }
         this.invalidateElement();
     };
     SciChartSurface.prototype.detachAxis = function (axis) {
@@ -963,6 +1238,16 @@ var SciChartSurface = /** @class */ (function (_super) {
         annotation.onAttach(this);
         this.invalidateElement();
     };
+    SciChartSurface.prototype.onAttachSubSurface = function (subSurface) {
+        this.chartModifiers.asArray().forEach(function (modifier) {
+            modifier.onAttachSubSurface(subSurface);
+        });
+    };
+    SciChartSurface.prototype.onDetachSubSurface = function (subSurface) {
+        this.chartModifiers.asArray().forEach(function (modifier) {
+            modifier.onDetachSubSurface(subSurface);
+        });
+    };
     Object.defineProperty(SciChartSurface.prototype, "drawSeriesBehindAxis", {
         /**
          * Gets or sets the boolean flag for switching behaviour of Axises rendering
@@ -983,3 +1268,472 @@ var SciChartSurface = /** @class */ (function (_super) {
     return SciChartSurface;
 }(SciChartSurfaceBase_1.SciChartSurfaceBase));
 exports.SciChartSurface = SciChartSurface;
+/**
+ * @summary The {@link SciChartSubSurface} is the surface created within another surface
+ * @description
+ * It can be added using {@link SciChartSurface.addSubChart} method.
+ *
+ * To update the positioning of the {@link SciChartSubSurface}, use {@link SciChartSubSurface.subPosition};
+ * also you can call {@link SciChartSubSurface.updateSubLayout} to refresh the layout of the sub-surface.
+ * @remarks
+ * It is not possible to have more than one level of nested sub-surfaces.
+ */
+// tslint:disable-next-line: max-classes-per-file
+var SciChartSubSurface = /** @class */ (function (_super) {
+    __extends(SciChartSubSurface, _super);
+    /**
+     * Creates an instance of the {@link SciChartSurface}
+     * @param webAssemblyContext The {@link TSciChart | SciChart 2D WebAssembly Context} containing native methods and
+     * access to our WebGL2 Engine and WebAssembly numerical methods
+     * @param options optional parameters of type {@link ISciChartSurfaceOptions} used to configure the {@link SciChart2DSurfaceBase}
+     */
+    function SciChartSubSurface(webAssemblyContext, options) {
+        var _this = this;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+        _this = _super.call(this, webAssemblyContext, options) || this;
+        _this.isSubSurface = true;
+        _this.topSectionClass = "top-section";
+        _this.leftSectionClass = "left-section";
+        _this.bottomSectionClass = "bottom-section";
+        _this.rightSectionClass = "right-section";
+        // TODO move to constant for subCharts
+        _this.backgroundProperty = "transparent";
+        _this.isTransparentProperty = true;
+        _this.subPositionProperty = new Rect_1.Rect(0, 0, 1, 1);
+        _this.coordinateModeProperty = AnnotationBase_1.ECoordinateMode.Relative;
+        _this.parentXAxisIdProperty = AxisBase2D_1.AxisBase2D.DEFAULT_AXIS_ID;
+        _this.parentYAxisIdProperty = AxisBase2D_1.AxisBase2D.DEFAULT_AXIS_ID;
+        _this.isVisibleProperty = true;
+        _this.sectionScaleProperty = 1;
+        _this.parentSurfaceProperty = options.parentSurface;
+        _this.subChartContainerId = (_a = options.subSurfaceOptions) === null || _a === void 0 ? void 0 : _a.subChartContainerId;
+        _this.subPaddingProperty = (_b = options === null || options === void 0 ? void 0 : options.subSurfaceOptions) === null || _b === void 0 ? void 0 : _b.subChartPadding;
+        _this.isTransparentProperty = (_d = (_c = options === null || options === void 0 ? void 0 : options.subSurfaceOptions) === null || _c === void 0 ? void 0 : _c.isTransparent) !== null && _d !== void 0 ? _d : _this.isTransparent;
+        _this.coordinateModeProperty = (_f = (_e = options === null || options === void 0 ? void 0 : options.subSurfaceOptions) === null || _e === void 0 ? void 0 : _e.coordinateMode) !== null && _f !== void 0 ? _f : _this.coordinateMode;
+        _this.parentXAxisIdProperty = (_h = (_g = options === null || options === void 0 ? void 0 : options.subSurfaceOptions) === null || _g === void 0 ? void 0 : _g.parentXAxisId) !== null && _h !== void 0 ? _h : _this.parentXAxisId;
+        _this.parentYAxisIdProperty = (_k = (_j = options === null || options === void 0 ? void 0 : options.subSurfaceOptions) === null || _j === void 0 ? void 0 : _j.parentYAxisId) !== null && _k !== void 0 ? _k : _this.parentYAxisId;
+        _this.sectionScaleProperty = (_m = (_l = options === null || options === void 0 ? void 0 : options.subSurfaceOptions) === null || _l === void 0 ? void 0 : _l.sectionScale) !== null && _m !== void 0 ? _m : _this.sectionScaleProperty;
+        _this.isVisible = (_p = (_o = options === null || options === void 0 ? void 0 : options.subSurfaceOptions) === null || _o === void 0 ? void 0 : _o.isVisible) !== null && _p !== void 0 ? _p : _this.isVisible;
+        if (_this.subChartContainerId) {
+            _this.subChartContainer =
+                typeof _this.subChartContainerId === "string"
+                    ? document.getElementById(_this.subChartContainerId)
+                    : _this.subChartContainerId;
+        }
+        _this.applyOptions(options.subSurfaceOptions);
+        _this.subPosition = (_q = options.subSurfaceOptions.position) !== null && _q !== void 0 ? _q : _this.subPositionProperty;
+        _this.backgroundFillBrushCache = new BrushCache_1.BrushCache(webAssemblyContext);
+        _this.preRender.subscribe(function (context) {
+            // Parent coordcalc may not be available when the chart is first created, so recalculate padding before drawing
+            if (_this.coordinateMode === AnnotationBase_1.ECoordinateMode.DataValue) {
+                _this.updateSubLayout(true);
+            }
+        });
+        return _this;
+    }
+    Object.defineProperty(SciChartSubSurface.prototype, "isTransparent", {
+        /**
+         * Whether other surfaces, including the parent, will be visible underneath this surface
+         */
+        get: function () {
+            return this.isTransparentProperty;
+        },
+        /**
+         * Whether other surfaces, including the parent, will be visible underneath this surface
+         */
+        set: function (value) {
+            if (this.isTransparentProperty !== value) {
+                this.isTransparentProperty = value;
+                this.updateBackground();
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SciChartSubSurface.prototype, "subChartPadding", {
+        /**
+         * Gets or sets additional absolute padding between the SciChartSubSurface and its parent, in order top, right, bottom, left
+         * {@link subPosition} is applied first, then this padding is added.
+         */
+        get: function () {
+            return this.subPaddingProperty;
+        },
+        /**
+         * Gets or sets additional absolute padding between the SciChartSubSurface and its parent, in order top, right, bottom, left
+         * {@link subPosition} is applied first, then this padding is added.
+         */
+        set: function (padding) {
+            this.subPaddingProperty = padding;
+            this.updateSubLayout();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SciChartSubSurface.prototype, "coordinateMode", {
+        /**
+         * Gets or sets the {@link ECoordinateMode} used when calculating the actual position based on the {@link subPosition}
+         */
+        get: function () {
+            return this.coordinateModeProperty;
+        },
+        /**
+         * Gets or sets the {@link ECoordinateMode} used when calculating the actual position based on the {@link subPosition}
+         */
+        set: function (coordinateMode) {
+            this.coordinateModeProperty = coordinateMode;
+            this.updateSubLayout();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SciChartSubSurface.prototype, "parentXAxisId", {
+        /**
+         * Gets or sets the AxisId used to determing which X Axis should be used when calculating the actual position based on the {@link subPosition}
+         * if {@link coordinateMode} is DataValue
+         */
+        get: function () {
+            return this.parentXAxisIdProperty;
+        },
+        /**
+         * Gets or sets the AxisId used to determing which X Axis should be used when calculating the actual position based on the {@link subPosition}
+         * if {@link coordinateMode} is DataValue
+         */
+        set: function (id) {
+            this.parentXAxisIdProperty = id;
+            this.updateSubLayout();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SciChartSubSurface.prototype, "parentYAxisId", {
+        /**
+         * Gets or sets the AxisId used to determing which Y Axis should be used when calculating the actual position based on the {@link subPosition}
+         * if {@link coordinateMode} is DataValue
+         */
+        get: function () {
+            return this.parentYAxisIdProperty;
+        },
+        /**
+         * Gets or sets the AxisId used to determing which Y Axis should be used when calculating the actual position based on the {@link subPosition}
+         * if {@link coordinateMode} is DataValue
+         */
+        set: function (id) {
+            this.parentYAxisIdProperty = id;
+            this.updateSubLayout();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SciChartSubSurface.prototype, "subPosition", {
+        /**
+         * A rectangle defining the position and size of a subchart.
+         * If {@link coordinateMode} is Relative (the default) then the values give the size as a proportion of the parent div, and all properties must be between 0 and 1 inclusive.
+         * If {@link coordinateMode} is DataValue, values will be converted to coordinates using {@link parentXAxisId} and {@link parentYAxisId}. Subchart will be clpped to the parent SeriesViewRect
+         * Can only be set if this is a subChart.  See {@link addSubChart}
+         */
+        get: function () {
+            return this.subPositionProperty;
+        },
+        /**
+         * A rectangle defining the position and size of a subchart.
+         * If {@link coordinateMode} is Relative (the default) then the values give the size as a proportion of the parent div, and all properties must be between 0 and 1 inclusive.
+         * If {@link coordinateMode} is DataValue, values will be converted to coordinates using {@link parentXAxisId} and {@link parentYAxisId}. Subchart will be clpped to the parent SeriesViewRect
+         * Can only be set if this is a subChart.  See {@link addSubChart}
+         */
+        set: function (value) {
+            if (!this.parentSurface) {
+                throw new Error("subPosition can only be changed for subCharts.");
+            }
+            if (!Rect_1.Rect.isEqual(this.subPositionProperty, value)) {
+                this.subPositionProperty = value;
+                this.updateSubLayout();
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SciChartSubSurface.prototype, "isVisible", {
+        /**
+         * Gets or sets if the subchart is visible, allowing you to hide a subchart without removing it from the parent surface
+         */
+        get: function () {
+            return this.isVisibleProperty;
+        },
+        /**
+         * Gets or sets if the subchart is visible, allowing you to hide a subchart without removing it from the parent surface
+         */
+        set: function (isVisible) {
+            this.isVisibleProperty = isVisible;
+            this.invalidateElement();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SciChartSubSurface.prototype, "sectionScale", {
+        /**
+         * Gets or sets scale property for all sections
+         * It is necessary if the scale transformation is being used for html areas around the subchart
+         * For example, style = { width: "50%", transform: scale(2), transformOrigin: 'left top' }
+         */
+        get: function () {
+            return this.sectionScaleProperty;
+        },
+        set: function (value) {
+            this.sectionScaleProperty = value;
+            this.updateSubLayout();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /** Recalculate the position of the subChart.  Call if you update the size of html elements in the wrapper */
+    SciChartSubSurface.prototype.updateSubLayout = function (isDrawing) {
+        if (isDrawing === void 0) { isDrawing = false; }
+        this.updateWrapper(this.subPosition);
+        var offsets = this.getOffsets(this.subChartContainer);
+        this.padding = this.calcPadding(this.parentSurface.renderSurface.viewportSize, this.subPositionProperty, offsets, isDrawing);
+    };
+    Object.defineProperty(SciChartSubSurface.prototype, "parentSurface", {
+        /**
+         * The parent SciChartSurface, if this is a subChart. See {@link addSubChart}
+         */
+        get: function () {
+            return this.parentSurfaceProperty;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SciChartSubSurface.prototype, "surfaceType", {
+        /**
+         * @inheritDoc
+         */
+        get: function () {
+            return SciChartSurfaceBase_1.ESurfaceType.SciChartSurfaceType;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /**
+     * @inheritDoc
+     */
+    SciChartSubSurface.prototype.changeViewportSize = function (pixelWidth, pixelHeight) { };
+    /**
+     * Gets the sub-chart container
+     */
+    SciChartSubSurface.prototype.getSubChartContainer = function () {
+        return this.subChartContainer;
+    };
+    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;
+        return new Rect_1.Rect(left, top, width - left - right, height - top - bottom);
+    };
+    /**
+     * @inheritDoc
+     */
+    SciChartSubSurface.prototype.delete = function (clearHtml) {
+        if (clearHtml === void 0) { clearHtml = true; }
+        // Don't ever clear html on the parent here as it kills the drawing for all subcharts.
+        _super.prototype.delete.call(this, false);
+        if (clearHtml && this.domChartRoot.contains(this.domSvgContainer)) {
+            this.domChartRoot.removeChild(this.domSvgContainer);
+        }
+        this.backgroundFillBrushCache = (0, Deleter_1.deleteSafe)(this.backgroundFillBrushCache);
+    };
+    SciChartSubSurface.prototype.toJSON = function (excludeData) {
+        var _a;
+        if (excludeData === void 0) { excludeData = false; }
+        var theme;
+        if ("toJSON" in this.themeProvider) {
+            // @ts-ignore
+            theme = this.themeProvider.toJSON();
+        }
+        else {
+            theme = this.themeProvider;
+        }
+        var options = {
+            canvasBorder: this.canvasBorder,
+            heightAspect: this.heightAspect,
+            widthAspect: this.widthAspect,
+            layoutManager: (_a = this.layoutManager) === null || _a === void 0 ? void 0 : _a.toJSON(),
+            padding: this.subPaddingProperty,
+            theme: theme,
+            viewportBorder: this.viewportBorder,
+            loader: this.loaderJson,
+            position: this.subPosition,
+            subChartContainerId: typeof this.subChartContainerId === "string" ? this.subChartContainerId : this.subChartContainerId.id,
+            subChartPadding: this.subChartPadding,
+            coordinateMode: this.coordinateMode,
+            parentXAxisId: this.parentXAxisId,
+            parentYAxisId: this.parentYAxisId
+        };
+        var definition = {
+            surface: options,
+            xAxes: this.xAxes.asArray().map(function (axis) { return axis.toJSON(); }),
+            yAxes: this.yAxes.asArray().map(function (axis) { return axis.toJSON(); }),
+            series: this.renderableSeries.asArray().map(function (series) { return series.toJSON(excludeData); }),
+            modifiers: this.chartModifiers.asArray().map(function (modifier) { return modifier.toJSON(); }),
+            annotations: this.annotations.asArray().map(function (annotation) { return annotation.toJSON(); })
+        };
+        return definition;
+    };
+    SciChartSubSurface.prototype.calcPadding = function (viewportSize, position, offsets, isDrawing) {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        if (isDrawing === void 0) { isDrawing = false; }
+        var scaledViewWidth = viewportSize.width, scaledViewHeight = viewportSize.height;
+        var viewWidth = (0, translate_1.translateToNotScaled)(scaledViewWidth);
+        var viewHeight = (0, translate_1.translateToNotScaled)(scaledViewHeight);
+        var x = position.x, y = position.y, width = position.width, height = position.height;
+        // Pixel mode
+        // TODO DPI scale absolute coords?
+        var left = x;
+        var top = y;
+        var bottom = viewHeight - y - height;
+        var right = viewWidth - x - width;
+        if (this.coordinateMode === AnnotationBase_1.ECoordinateMode.Relative) {
+            left = viewWidth * x + offsets.left;
+            top = viewHeight * y + offsets.top;
+            right = viewWidth - viewWidth * x - viewWidth * width + offsets.right;
+            bottom = viewHeight - viewHeight * y - viewHeight * height + offsets.bottom;
+        }
+        else if (this.coordinateMode === AnnotationBase_1.ECoordinateMode.DataValue && isDrawing) {
+            var xAxis = this.parentSurface.getXAxisById(this.parentXAxisId);
+            if (!xAxis) {
+                throw new Error("No x axis with id ".concat(this.parentXAxisId, " found on parent surface"));
+            }
+            var xCoordCalc = xAxis.getCurrentCoordinateCalculator();
+            var yAxis = this.parentSurface.getYAxisById(this.parentYAxisId);
+            if (!yAxis) {
+                throw new Error("No y axis with id ".concat(this.parentYAxisId, " found on parent surface"));
+            }
+            var seriesViewRect = this.parentSurface.seriesViewRect;
+            var scaledParentLeft = (0, translate_1.translateToNotScaled)(seriesViewRect.left);
+            var scaledParentTop = (0, translate_1.translateToNotScaled)(seriesViewRect.top);
+            var scaledParentBottom = (0, translate_1.translateToNotScaled)(seriesViewRect.bottom);
+            var scaledParentRight = (0, translate_1.translateToNotScaled)(seriesViewRect.right);
+            var yCoordCalc = yAxis.getCurrentCoordinateCalculator();
+            left = xAxis.isVerticalChart ? yCoordCalc.getCoordinate(x) : xCoordCalc.getCoordinate(x);
+            top = xAxis.isVerticalChart ? xCoordCalc.getCoordinate(y) : yCoordCalc.getCoordinate(y);
+            left = Math.max((0, translate_1.translateToNotScaled)(left), 0);
+            top = Math.max((0, translate_1.translateToNotScaled)(top), 0);
+            left += scaledParentLeft;
+            top += scaledParentTop;
+            var x2 = xAxis.flippedCoordinates ? x - width : x + width;
+            var y2 = yAxis.flippedCoordinates ? y + height : y - height;
+            bottom = Math.max(viewHeight -
+                scaledParentTop -
+                (0, translate_1.translateToNotScaled)(xAxis.isVerticalChart ? xCoordCalc.getCoordinate(y2) : yCoordCalc.getCoordinate(y2)), viewHeight - scaledParentBottom);
+            right = Math.max(viewWidth -
+                scaledParentLeft -
+                (0, translate_1.translateToNotScaled)(xAxis.isVerticalChart ? yCoordCalc.getCoordinate(x2) : xCoordCalc.getCoordinate(x2)), viewWidth - scaledParentRight);
+        }
+        left += (_b = (_a = this.subPaddingProperty) === null || _a === void 0 ? void 0 : _a.left) !== null && _b !== void 0 ? _b : 0;
+        top += (_d = (_c = this.subPaddingProperty) === null || _c === void 0 ? void 0 : _c.top) !== null && _d !== void 0 ? _d : 0;
+        right += (_f = (_e = this.subPaddingProperty) === null || _e === void 0 ? void 0 : _e.right) !== null && _f !== void 0 ? _f : 0;
+        bottom += (_h = (_g = this.subPaddingProperty) === null || _g === void 0 ? void 0 : _g.bottom) !== null && _h !== void 0 ? _h : 0;
+        return new Thickness_1.Thickness(top, right, bottom, left);
+    };
+    /**
+     * @inheritDoc
+     */
+    SciChartSubSurface.prototype.applySciChartBackground = function (background, alphaEnabled) {
+        if (alphaEnabled === void 0) { alphaEnabled = true; }
+        this.backgroundProperty = background;
+        if (!this.isTransparent) {
+            var renderContext = this.renderSurface.getRenderContext();
+            var nativeContext = renderContext.getNativeContext();
+            var _a = this.parentSurface.renderSurface.viewportSize, width = _a.width, height = _a.height;
+            nativeContext.SetClipRect(this.adjustedPadding.left, this.adjustedPadding.top, width - this.adjustedPadding.right - this.adjustedPadding.left, height - this.adjustedPadding.bottom - this.adjustedPadding.top);
+            nativeContext.SetClearColor(0, 0, 0, 0);
+            nativeContext.Clear();
+            nativeContext.SetClipRect(0, 0, width, height);
+            try {
+                // try parse background value. throws if cannot parse html color
+                var brushColor = (0, parseColor_1.parseColorToUIntArgb)(background);
+                var vecRects = (0, NativeObject_1.getVectorRectVertex)(this.webAssemblyContext2D);
+                vecRects.push_back((0, createNativeRect_1.createNativeRect)(this.webAssemblyContext2D, this.adjustedPadding.left, this.adjustedPadding.top, this.renderSurface.viewportSize.width - this.adjustedPadding.right, this.renderSurface.viewportSize.height - this.adjustedPadding.bottom));
+                var brush = (0, BrushCache_1.createBrushInCache)(this.backgroundFillBrushCache, background, 1);
+                renderContext.drawRects(vecRects, brush, 0, 0);
+            }
+            catch (error) {
+                performanceWarnings_1.performanceWarnings.subchartBackgroundNotSimpleColor.warn();
+            }
+        }
+    };
+    SciChartSubSurface.prototype.updateWrapper = function (subChartPosition) {
+        var _this = this;
+        if (!this.parentSurface || !this.subChartContainer) {
+            return;
+        }
+        var seriesViewRect = this.parentSurface.seriesViewRect;
+        if (!seriesViewRect && this.coordinateMode !== AnnotationBase_1.ECoordinateMode.Relative) {
+            return;
+        }
+        this.subChartContainer.style.pointerEvents = "none";
+        this.subChartContainer.style.position = "absolute";
+        var getSubChartContainerPosition = function (subChartPosition) {
+            if (_this.coordinateMode === AnnotationBase_1.ECoordinateMode.DataValue) {
+                var xAxis = _this.parentSurface.getXAxisById(_this.parentXAxisId);
+                if (!xAxis) {
+                    throw new Error("No x axis with id ".concat(_this.parentXAxisId, " found on parent surface"));
+                }
+                var yAxis = _this.parentSurface.getYAxisById(_this.parentYAxisId);
+                if (!yAxis) {
+                    throw new Error("No y axis with id ".concat(_this.parentYAxisId, " found on parent surface"));
+                }
+                var absolutePositionRect = (0, translate_1.translateDataValueRectToAbsolute)(subChartPosition, xAxis, yAxis, seriesViewRect);
+                var left = (0, translate_1.convertToHtmlPx)(absolutePositionRect.x);
+                var top_1 = (0, translate_1.convertToHtmlPx)(absolutePositionRect.y);
+                var width = (0, translate_1.convertToHtmlPx)(absolutePositionRect.width);
+                var height = (0, translate_1.convertToHtmlPx)(absolutePositionRect.height);
+                return { left: left, top: top_1, width: width, height: height };
+            }
+            else if (_this.coordinateMode === AnnotationBase_1.ECoordinateMode.Relative) {
+                var left = (0, translate_1.convertToRelativeHtmlSize)(subChartPosition.x);
+                var top_2 = (0, translate_1.convertToRelativeHtmlSize)(subChartPosition.y);
+                var width = (0, translate_1.convertToRelativeHtmlSize)(subChartPosition.width);
+                var height = (0, translate_1.convertToRelativeHtmlSize)(subChartPosition.height);
+                return { left: left, top: top_2, width: width, height: height };
+            }
+            else {
+                var left = (0, translate_1.convertToHtmlPx)(subChartPosition.x);
+                var top_3 = (0, translate_1.convertToHtmlPx)(subChartPosition.y);
+                var width = (0, translate_1.convertToHtmlPx)(subChartPosition.width);
+                var height = (0, translate_1.convertToHtmlPx)(subChartPosition.height);
+                return { left: left, top: top_3, width: width, height: height };
+            }
+        };
+        var subChartContainerPosition = getSubChartContainerPosition(subChartPosition);
+        this.subChartContainer.style.left = subChartContainerPosition.left;
+        this.subChartContainer.style.top = subChartContainerPosition.top;
+        this.subChartContainer.style.width = subChartContainerPosition.width;
+        this.subChartContainer.style.height = subChartContainerPosition.height;
+    };
+    SciChartSubSurface.prototype.getOffsets = function (subChartContainer) {
+        var _a, _b, _c, _d;
+        if (!subChartContainer) {
+            return {
+                left: 0,
+                top: 0,
+                right: 0,
+                bottom: 0
+            };
+        }
+        // TODO probably we can use better selector
+        var leftSection = subChartContainer.getElementsByClassName(this.leftSectionClass)[0];
+        var topSection = subChartContainer.getElementsByClassName(this.topSectionClass)[0];
+        var rightSection = subChartContainer.getElementsByClassName(this.rightSectionClass)[0];
+        var bottomSection = subChartContainer.getElementsByClassName(this.bottomSectionClass)[0];
+        var leftSectionWidth = (_a = leftSection === null || leftSection === void 0 ? void 0 : leftSection.clientWidth) !== null && _a !== void 0 ? _a : 0;
+        var topSectionHeight = (_b = topSection === null || topSection === void 0 ? void 0 : topSection.clientHeight) !== null && _b !== void 0 ? _b : 0;
+        var rightSectionWidth = (_c = rightSection === null || rightSection === void 0 ? void 0 : rightSection.clientWidth) !== null && _c !== void 0 ? _c : 0;
+        var bottomSectionHeight = (_d = bottomSection === null || bottomSection === void 0 ? void 0 : bottomSection.clientHeight) !== null && _d !== void 0 ? _d : 0;
+        return {
+            left: leftSectionWidth * this.sectionScaleProperty,
+            top: topSectionHeight * this.sectionScaleProperty,
+            right: rightSectionWidth * this.sectionScaleProperty,
+            bottom: bottomSectionHeight * this.sectionScaleProperty
+        };
+    };
+    return SciChartSubSurface;
+}(SciChartSurface));
+exports.SciChartSubSurface = SciChartSubSurface;