scichart 2.1.2290 → 2.2.2351

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, _h;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         var _this = _super.call(this, options) || this;
         /**
          * Gets the {@link AxisLayoutState} class which manages layout
@@ -157,6 +157,7 @@ var AxisBase2D = /** @class */ (function (_super) {
             }
         }
         _this.autoRangeAnimationProperty = options === null || options === void 0 ? void 0 : options.autoRangeAnimation;
+        _this.backgroundColor = (_j = options === null || options === void 0 ? void 0 : options.backgroundColor) !== null && _j !== void 0 ? _j : _this.backgroundColor;
         return _this;
     }
     Object.defineProperty(AxisBase2D.prototype, "labelProvider", {
@@ -348,6 +349,25 @@ var AxisBase2D = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(AxisBase2D.prototype, "backgroundColor", {
+        /**
+         * Gets the background color of separate Axis
+         */
+        get: function () {
+            return this.backgroundColorProperty;
+        },
+        /**
+         * Sets the background color of separate Axis
+         */
+        set: function (value) {
+            this.backgroundColorProperty = value;
+            if (this.invalidateParentCallback) {
+                this.invalidateParentCallback();
+            }
+        },
+        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.
@@ -590,6 +610,57 @@ var AxisBase2D = /** @class */ (function (_super) {
         }
         // make sure axes is drawn at the last stage
         renderContext.enqueueLayeredDraw(function () {
+            // Draw background
+            if (_this.backgroundColorProperty) {
+                var viewAxisRect = _this.axisRenderer.viewRect;
+                var viewTitleRect = _this.axisTitleRenderer.viewRect;
+                var brush = new _this.webAssemblyContext2D.SCRTSolidBrush((0, parseColor_1.parseColorToUIntArgb)(_this.backgroundColorProperty), false);
+                var nativeAxisRect = void 0;
+                var nativeTitleRect = void 0;
+                // Empty space covering for axis coloring
+                // let shift: number = 0;
+                // let additionalSize: number = 0;
+                // if (this.isHorizontalAxis) {
+                //     this.parentSurface.yAxes.asArray().forEach((yAxis: AxisBase2D, index: number) => {
+                //         const size: number = yAxis.axisRenderer.viewAxisRect.width + yAxis.axisTitleRenderer.viewAxisRect.width;
+                //         if (index === 0) {
+                //             shift += size;
+                //         } else {
+                //             additionalSize += size;
+                //         }
+                //     });
+                //     nativeAxisRect = createNativeRect(this.webAssemblyContext2D, 0 - shift, 0, viewAxisRect.width + additionalSize, viewAxisRect.height);
+                //     nativeTitleRect = createNativeRect(this.webAssemblyContext2D, 0 - shift, 0, viewTitleRect.width + additionalSize, viewTitleRect.height);
+                // } else {
+                //     this.parentSurface.xAxes.asArray().forEach((xAxis: AxisBase2D, index: number) => {
+                //         const size: number = xAxis.axisRenderer.viewAxisRect.height + xAxis.axisTitleRenderer.viewAxisRect.height;
+                //         if (index === 0) {
+                //             shift += size;
+                //         } else {
+                //             additionalSize += size;
+                //         }
+                //     });
+                //     nativeAxisRect = createNativeRect(this.webAssemblyContext2D, 0, 0 - shift, viewAxisRect.width, viewAxisRect.height + additionalSize);
+                //     nativeTitleRect = createNativeRect(this.webAssemblyContext2D, 0, 0 - shift, viewTitleRect.width, viewTitleRect.height + additionalSize);
+                // }
+                nativeAxisRect = (0, createNativeRect_1.createNativeRect)(_this.webAssemblyContext2D, 0, 0, viewAxisRect.width, viewAxisRect.height);
+                nativeTitleRect = (0, createNativeRect_1.createNativeRect)(_this.webAssemblyContext2D, 0, 0, viewTitleRect.width, viewTitleRect.height);
+                if (nativeAxisRect) {
+                    var vecRects = new _this.webAssemblyContext2D.VectorRectVertex();
+                    vecRects.push_back(nativeAxisRect);
+                    renderContext.drawRects(vecRects, brush, viewAxisRect.left, viewAxisRect.top);
+                    nativeAxisRect.delete();
+                    vecRects.delete();
+                }
+                if (nativeTitleRect) {
+                    var vecRects = new _this.webAssemblyContext2D.VectorRectVertex();
+                    vecRects.push_back(nativeTitleRect);
+                    renderContext.drawRects(vecRects, brush, viewTitleRect.left, viewTitleRect.top);
+                    nativeTitleRect === null || nativeTitleRect === void 0 ? void 0 : nativeTitleRect.delete();
+                    vecRects.delete();
+                }
+                brush.delete();
+            }
             // Draw axis labels
             if (_this.drawLabels) {
                 if (SciChartSurfaceBase_1.DebugForDpi) {

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

@@ -0,0 +1,29 @@
+import { ELabelProviderType } from "../../../../types/LabelProviderType";
+import { IPieSegment } from "../../SciChartPieSurface/PieSegment/IPieSegment";
+import { SciChartPieSurface } from "../../SciChartPieSurface/SciChartPieSurface";
+import { ILabelOptions, LabelProvider } from "./LabelProvider";
+/**
+ * @summary A Label Provider for use with Pie Charts to allow customizing of segment labels
+ */
+export declare class PieLabelProvider extends LabelProvider {
+    readonly type = ELabelProviderType.Pie;
+    /**
+     * The parent {@link SciChartPieSurface}. This will be set once {@link attachedToSurface} is called
+     */
+    protected parentSurface: SciChartPieSurface;
+    /**
+     *
+     */
+    constructor(options?: ILabelOptions);
+    getSegmentText(segment: IPieSegment, total: number): string;
+    /**
+     * Called when the {@link LabelProvider} is attached to an {@link SciChartPieSurface }
+     * @param pieSurface The SciPieSurface we are attached to.
+     */
+    attachedToSurface(pieSurface: SciChartPieSurface): void;
+    /**
+     * @inheritDoc
+     */
+    onBeginAxisDraw(): void;
+    protected invalidateParent(): void;
+}

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

@@ -0,0 +1,77 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PieLabelProvider = void 0;
+var LabelProviderType_1 = require("../../../../types/LabelProviderType");
+var NumericFormat_1 = require("../../../../types/NumericFormat");
+var number_1 = require("../../../../utils/number");
+var SciChartPieSurface_1 = require("../../SciChartPieSurface/SciChartPieSurface");
+var LabelProvider_1 = require("./LabelProvider");
+/**
+ * @summary A Label Provider for use with Pie Charts to allow customizing of segment labels
+ */
+var PieLabelProvider = /** @class */ (function (_super) {
+    __extends(PieLabelProvider, _super);
+    /**
+     *
+     */
+    function PieLabelProvider(options) {
+        var _a, _b;
+        var _this = _super.call(this, __assign({ labelFormat: (_a = options === null || options === void 0 ? void 0 : options.labelFormat) !== null && _a !== void 0 ? _a : NumericFormat_1.ENumericFormat.Decimal, labelPrecision: (_b = options === null || options === void 0 ? void 0 : options.labelPrecision) !== null && _b !== void 0 ? _b : 2 }, options)) || this;
+        _this.type = LabelProviderType_1.ELabelProviderType.Pie;
+        _this.formatLabelProperty = function (dataValue) {
+            return _this.applyFormat((0, number_1.formatNumber)(dataValue, _this.numericFormat, _this.precision)) +
+                (_this.parentSurface.valueMode === SciChartPieSurface_1.EPieValueMode.Percentage ? "%" : "");
+        };
+        return _this;
+    }
+    PieLabelProvider.prototype.getSegmentText = function (segment, total) {
+        var labelValue = this.parentSurface.valueMode === SciChartPieSurface_1.EPieValueMode.Percentage ? segment.getPercentage(total) : segment.value;
+        return this.formatLabel(labelValue);
+    };
+    /**
+     * Called when the {@link LabelProvider} is attached to an {@link SciChartPieSurface }
+     * @param pieSurface The SciPieSurface we are attached to.
+     */
+    PieLabelProvider.prototype.attachedToSurface = function (pieSurface) {
+        this.parentSurface = pieSurface;
+    };
+    /**
+     * @inheritDoc
+     */
+    PieLabelProvider.prototype.onBeginAxisDraw = function () {
+        // TODO: user can override here if they want
+    };
+    PieLabelProvider.prototype.invalidateParent = function () {
+        if (this.parentSurface && this.parentSurface.invalidateElement) {
+            this.parentSurface.invalidateElement();
+        }
+    };
+    return PieLabelProvider;
+}(LabelProvider_1.LabelProvider));
+exports.PieLabelProvider = PieLabelProvider;

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

@@ -1,6 +1,6 @@
 import { ELabelProviderType } from "../../../../types/LabelProviderType";
 import { ENumericFormat } from "../../../../types/NumericFormat";
-import { LabelProviderBase2D } from "./LabelProviderBase2D";
+import { LabelProviderBase2D, ILabel2DOptions } from "./LabelProviderBase2D";
 /**
  * The {@link SmartDateLabelProvider} formats Axis Labels and Cursor / Tooltips for {@link NumericAxis} types
  */
@@ -9,7 +9,7 @@ export declare class SmartDateLabelProvider extends LabelProviderBase2D {
     /**
      * Creates an instance of {@link SmartDateLabelProvider}
      */
-    constructor();
+    constructor(options?: ILabel2DOptions);
     /**
      * @inheritDoc
      */

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

@@ -14,6 +14,17 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SmartDateLabelProvider = void 0;
 var LabelProviderType_1 = require("../../../../types/LabelProviderType");
@@ -41,11 +52,17 @@ var SmartDateLabelProvider = /** @class */ (function (_super) {
     /**
      * Creates an instance of {@link SmartDateLabelProvider}
      */
-    function SmartDateLabelProvider() {
-        var _this = _super.call(this) || this;
+    function SmartDateLabelProvider(options) {
+        var _a, _b;
+        var _this = _super.call(this, __assign({ labelFormat: (_a = options === null || options === void 0 ? void 0 : options.labelFormat) !== null && _a !== void 0 ? _a : NumericFormat_1.ENumericFormat.Date_DDMMYYYY, cursorLabelFormat: (_b = options === null || options === void 0 ? void 0 : options.cursorLabelFormat) !== null && _b !== void 0 ? _b : NumericFormat_1.ENumericFormat.Date_DDMMYYYY }, options)) || this;
         _this.type = LabelProviderType_1.ELabelProviderType.SmartDate;
-        _this.formatLabelProperty = function (dataValue) { return (0, number_1.formatNumber)(dataValue, NumericFormat_1.ENumericFormat.Date_DDMMYYYY, 0); };
-        _this.formatCursorLabelProperty = _this.formatLabelProperty;
+        _this.formatLabelProperty = function (dataValue) {
+            return _this.applyFormat((0, number_1.formatNumber)(dataValue, _this.numericFormat, _this.precision));
+        };
+        _this.formatCursorLabelProperty = function (dataValue) {
+            var _a, _b;
+            return _this.applyFormat((0, number_1.formatNumber)(dataValue, (_a = _this.cursorNumericFormat) !== null && _a !== void 0 ? _a : _this.numericFormat, (_b = _this.cursorPrecision) !== null && _b !== void 0 ? _b : _this.precision));
+        };
         return _this;
     }
     /**

package/Charting/Visuals/Helpers/drawLabel.d.ts

@@ -1,5 +1,5 @@
 import { Rect } from "../../../Core/Rect";
-import { ELabelPlacement } from "../../../types/LabelPlacement";
+import { EHorizontalAlignment, ELabelPlacement, EVerticalAlignment } from "../../../types/LabelPlacement";
 import { IPen2D } from "../../Drawing/IPen2D";
 import { WebGlRenderContext2D } from "../../Drawing/WebGlRenderContext2D";
 import { AxisBase2D } from "../Axis/AxisBase2D";
@@ -8,7 +8,7 @@ export declare const drawModifiersAxisLabel: (currentAxis: AxisBase2D, renderCon
 /**
  * Function to draw Vertical or Horizontal Line annotations with labels
  */
-export declare const drawLineAnnotation: (currentAxis: AxisBase2D, renderContext: WebGlRenderContext2D, labelPlacement: ELabelPlacement, displayValue: string, x1Coord: number, x2Coord: number, y1Coord: number, y2Coord: number, textStyle: TTextStyle, fill: string, strokePen: IPen2D, viewRect: Rect, showLabel: boolean, opacity: number) => Rect;
+export declare const drawLineAnnotation: (currentAxis: AxisBase2D, renderContext: WebGlRenderContext2D, labelPlacement: ELabelPlacement, displayValue: string, x1Coord: number, x2Coord: number, y1Coord: number, y2Coord: number, textStyle: TTextStyle, fill: string, strokePen: IPen2D, viewRect: Rect, showLabel: boolean, opacity: number, horizontalAlignment?: EHorizontalAlignment, verticalAlignment?: EVerticalAlignment) => Rect;
 export declare const drawAxisMarkerAnnotation: (currentAxis: AxisBase2D, renderContext: WebGlRenderContext2D, displayValue: string, markerCoordinate: number, x1Coord: number, y1Coord: number, textStyle: TTextStyle, fill: string, opacity: number, image: HTMLImageElement, imageWidth: number, imageHeight: number) => {
     xPosition: number;
     yPosition: number;
@@ -19,7 +19,7 @@ export declare const drawAxisMarkerAnnotation: (currentAxis: AxisBase2D, renderC
  * Calculates coordinates of the annotation label.
  * The coordinates are defined as an absolute position on the whole SciChartSurface.
  */
-export declare const getLabelCoordinates: (currentAxis: AxisBase2D, labelPlacement: ELabelPlacement, x1Coord: number, x2Coord: number, y1Coord: number, y2Coord: number, textureHeight: number, textureWidth: number) => {
+export declare const getLabelCoordinates: (currentAxis: AxisBase2D, labelPlacement: ELabelPlacement, x1Coord: number, x2Coord: number, y1Coord: number, y2Coord: number, textureHeight: number, textureWidth: number, horizontalAlignment?: EHorizontalAlignment, verticalAlignment?: EVerticalAlignment) => {
     xPosition: number;
     yPosition: number;
 };

package/Charting/Visuals/Helpers/drawLabel.js

@@ -27,7 +27,7 @@ exports.drawModifiersAxisLabel = drawModifiersAxisLabel;
 /**
  * Function to draw Vertical or Horizontal Line annotations with labels
  */
-var drawLineAnnotation = function (currentAxis, renderContext, labelPlacement, displayValue, x1Coord, x2Coord, y1Coord, y2Coord, textStyle, fill, strokePen, viewRect, showLabel, opacity) {
+var drawLineAnnotation = function (currentAxis, renderContext, labelPlacement, displayValue, x1Coord, x2Coord, y1Coord, y2Coord, textStyle, fill, strokePen, viewRect, showLabel, opacity, horizontalAlignment, verticalAlignment) {
     var nativeContext = renderContext.getNativeContext();
     var axisAlignment = currentAxis.axisAlignment;
     var displayVertically = (axisAlignment === AxisAlignment_1.EAxisAlignment.Top || axisAlignment === AxisAlignment_1.EAxisAlignment.Bottom) &&
@@ -41,17 +41,17 @@ var drawLineAnnotation = function (currentAxis, renderContext, labelPlacement, d
     var labelHeight = 0;
     var labelWidth = 0;
     var labelRect;
+    var _a = getLineCoordinates(x1Coord, y1Coord, x2Coord, y2Coord, labelHeight, labelWidth, labelPlacement, currentAxis), x1LineCoord = _a.x1LineCoord, y1LineCoord = _a.y1LineCoord, x2LineCoord = _a.x2LineCoord, y2LineCoord = _a.y2LineCoord;
+    renderContext.drawLine(x1LineCoord, y1LineCoord, x2LineCoord, y2LineCoord, strokePen, viewRect);
     if (showLabel) {
-        var _a = currentAxis.axisRenderer.createAnnotationLabelTexture(text, labelTextStyle, labelBackgroundColor, displayVertically, displayMirrored, opacity), bitmapTexture = _a.bitmapTexture, textureHeight = _a.textureHeight, textureWidth = _a.textureWidth;
-        var _b = (0, exports.getLabelCoordinates)(currentAxis, labelPlacement, x1Coord, x2Coord, y1Coord, y2Coord, textureHeight, textureWidth), xPosition = _b.xPosition, yPosition = _b.yPosition;
+        var _b = currentAxis.axisRenderer.createAnnotationLabelTexture(text, labelTextStyle, labelBackgroundColor, displayVertically, displayMirrored, opacity), bitmapTexture = _b.bitmapTexture, textureHeight = _b.textureHeight, textureWidth = _b.textureWidth;
+        var _c = (0, exports.getLabelCoordinates)(currentAxis, labelPlacement, x1Coord, x2Coord, y1Coord, y2Coord, textureHeight, textureWidth, horizontalAlignment, verticalAlignment), xPosition = _c.xPosition, yPosition = _c.yPosition;
         labelHeight = textureHeight;
         labelWidth = textureWidth;
         labelRect = new Rect_1.Rect(xPosition, yPosition, textureWidth, textureHeight);
         nativeContext.DrawTexture(bitmapTexture, Math.round(xPosition), Math.round(yPosition), textureWidth, textureHeight);
         bitmapTexture.delete();
     }
-    var _c = getLineCoordinates(x1Coord, y1Coord, x2Coord, y2Coord, labelHeight, labelWidth, labelPlacement, currentAxis), x1LineCoord = _c.x1LineCoord, y1LineCoord = _c.y1LineCoord, x2LineCoord = _c.x2LineCoord, y2LineCoord = _c.y2LineCoord;
-    renderContext.drawLine(x1LineCoord, y1LineCoord, x2LineCoord, y2LineCoord, strokePen, viewRect);
     return labelRect;
 };
 exports.drawLineAnnotation = drawLineAnnotation;
@@ -74,7 +74,7 @@ exports.drawAxisMarkerAnnotation = drawAxisMarkerAnnotation;
  * Calculates coordinates of the annotation label.
  * The coordinates are defined as an absolute position on the whole SciChartSurface.
  */
-var getLabelCoordinates = function (currentAxis, labelPlacement, x1Coord, x2Coord, y1Coord, y2Coord, textureHeight, textureWidth) {
+var getLabelCoordinates = function (currentAxis, labelPlacement, x1Coord, x2Coord, y1Coord, y2Coord, textureHeight, textureWidth, horizontalAlignment, verticalAlignment) {
     var axisAlignment = currentAxis.axisAlignment, seriesViewRect = currentAxis.parentSurface.seriesViewRect, axisViewRect = currentAxis.viewRect;
     var xPosition = 0;
     var yPosition = 0;
@@ -166,26 +166,46 @@ var getLabelCoordinates = function (currentAxis, labelPlacement, x1Coord, x2Coor
         switch (axisAlignment) {
             case AxisAlignment_1.EAxisAlignment.Right:
                 centerVertically();
-                xPosition =
-                    axisViewRect.width < textureWidth
-                        ? (xPosition = axisViewRect.right - textureWidth)
-                        : axisViewRect.left;
+                if (horizontalAlignment === LabelPlacement_1.EHorizontalAlignment.Left) {
+                    xPosition = seriesViewRect.left;
+                }
+                else {
+                    xPosition =
+                        axisViewRect.width < textureWidth
+                            ? (xPosition = axisViewRect.right - textureWidth)
+                            : axisViewRect.left;
+                }
                 break;
             case AxisAlignment_1.EAxisAlignment.Left:
                 centerVertically();
-                xPosition =
-                    axisViewRect.width < textureWidth
-                        ? (xPosition = axisViewRect.left)
-                        : axisViewRect.right - textureWidth;
+                if (horizontalAlignment === LabelPlacement_1.EHorizontalAlignment.Right) {
+                    xPosition = seriesViewRect.left + seriesViewRect.width - textureWidth;
+                }
+                else {
+                    xPosition =
+                        axisViewRect.width < textureWidth
+                            ? (xPosition = axisViewRect.left)
+                            : axisViewRect.right - textureWidth;
+                }
                 break;
             case AxisAlignment_1.EAxisAlignment.Top:
-                yPosition =
-                    axisViewRect.height < textureHeight ? axisViewRect.top : axisViewRect.bottom - textureHeight;
+                if (verticalAlignment === LabelPlacement_1.EVerticalAlignment.Bottom) {
+                    yPosition = seriesViewRect.top + seriesViewRect.height - textureHeight;
+                }
+                else {
+                    yPosition =
+                        axisViewRect.height < textureHeight ? axisViewRect.top : axisViewRect.bottom - textureHeight;
+                }
                 centerHorizontally();
                 break;
             case AxisAlignment_1.EAxisAlignment.Bottom:
-                yPosition =
-                    axisViewRect.height < textureHeight ? axisViewRect.bottom - textureHeight : axisViewRect.top;
+                if (verticalAlignment === LabelPlacement_1.EVerticalAlignment.Top) {
+                    yPosition = seriesViewRect.top;
+                }
+                else {
+                    yPosition =
+                        axisViewRect.height < textureHeight ? axisViewRect.bottom - textureHeight : axisViewRect.top;
+                }
                 centerHorizontally();
                 break;
         }

package/Charting/Visuals/I2DSurfaceOptions.d.ts

@@ -16,6 +16,11 @@ export interface I2DSurfaceOptions extends ISurfaceOptionsBase {
      * However if height of the div is not provided it will use width/height aspect ratio to calculate the height. The default ratio is 3/2.
      */
     heightAspect?: number;
+    /**
+     * Optional - the option of disabling / enabling scaling of the {@link SciChartSurface}.
+     * If false - the {@link SciChartSurface} will take the height and width of parent div without scaling.
+     */
+    disableAspect?: boolean;
     /**
      * Optional - Prove a layoutManager to customise the axis layout.  Use CentralAxesLayoutManager for an easy way to configure central axes.
      */
@@ -32,4 +37,5 @@ export interface I2DSurfaceOptions extends ISurfaceOptionsBase {
      * Optional - Properties of the canvas border
      */
     canvasBorder?: TBorder;
+    drawSeriesBehindAxis?: boolean;
 }

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

@@ -5,6 +5,10 @@ import { ELegendType, SciChartLegendBase } from "./SciChartLegendBase";
  */
 export declare class SciChartLegend extends SciChartLegendBase {
     readonly type = ELegendType.SciChartLegend;
+    /**
+     * Checked changed callback - when a legend item row checkbox is checked or unchecked. Set by parent {@link LegendModifier}
+     */
+    legendItemCheckedChangedCallback: (series: IRenderableSeries, isChecked: boolean) => void;
     private renderableSeriesArray;
     private showCheckboxesProperty;
     private showSeriesMarkersProperty;

package/Charting/Visuals/Legend/SciChartLegend.js

@@ -91,9 +91,15 @@ var SciChartLegend = /** @class */ (function (_super) {
      * adds event listeners to a specific {@link IRenderableSeries} series
      */
     SciChartLegend.prototype.addEventListenerToSeries = function (rs) {
+        var _this = this;
         var el = this.getParentDiv().querySelector("[id='".concat(rs.id, "']"));
         if (el) {
-            var onChangeEventListener_1 = function (e) { return (rs.isVisible = e.target.checked); };
+            var onChangeEventListener_1 = function (e) {
+                rs.isVisible = e.target.checked;
+                if (_this.legendItemCheckedChangedCallback) {
+                    _this.legendItemCheckedChangedCallback(rs, rs.isVisible);
+                }
+            };
             el.addEventListener("change", onChangeEventListener_1);
             var eventSubscriptionItem = {
                 element: el,

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

@@ -31,6 +31,7 @@ import { RolloverModifierRenderableSeriesProps } from "./RolloverModifier/Rollov
 import { SeriesHoveredArgs } from "./SeriesHoveredArgs";
 import { SeriesSelectedArgs } from "./SeriesSelectedArgs";
 import { ShaderEffect } from "./ShaderEffect";
+import { SeriesVisibleChangedArgs } from "./SeriesVisibleChangedArgs";
 /**
  * @summary Defines the base class to a Render Series (or Chart Type) in SciChart's High Performance Real-time
  * {@link https://www.scichart.com/javascript-chart-features | JavaScript Charts}
@@ -47,23 +48,21 @@ export declare abstract class BaseRenderableSeries implements IRenderableSeries
     /** @inheritDoc */
     readonly id: string;
     /** @inheritDoc */
-    readonly isStacked = false;
+    readonly isStacked: boolean;
     /** @inheritDoc */
     readonly rolloverModifierProps: RolloverModifierRenderableSeriesProps;
     /** @inheritDoc */
     readonly rolloverModifierProps1: RolloverModifierRenderableSeriesProps;
     /** @inheritDoc */
-    parentSurface: SciChartSurface;
-    /** @inheritDoc */
     invalidateParentCallback: () => void;
     /** @inheritDoc */
-    drawingProviders: ISeriesDrawingProvider[];
-    /** @inheritDoc */
     hitTestProvider: IHitTestProvider;
     /** @inheritDoc */
     selected: EventHandler<SeriesSelectedArgs>;
     /** @inheritDoc */
     hovered: EventHandler<SeriesHoveredArgs>;
+    /** @inheritDoc */
+    isVisibleChanged: EventHandler<SeriesVisibleChangedArgs>;
     protected webAssemblyContext: TSciChart;
     protected dataSeriesProperty: IDataSeries;
     protected animationFSM: SeriesAnimationFiniteStateMachine;
@@ -72,11 +71,14 @@ export declare abstract class BaseRenderableSeries implements IRenderableSeries
     protected typeMap: Map<string, string>;
     protected resamplerHelper: ExtremeResamplerHelper;
     protected pointSeries: XyPointSeriesResampled;
+    protected currentRenderPassData: RenderPassData;
+    protected opacityProperty: number;
+    private parentSurfaceProperty;
+    private drawingProvidersProperty;
     private xAxisIdProperty;
     private yAxisIdProperty;
     private strokeThicknessProperty;
     private strokeProperty;
-    private opacityProperty;
     private pointMarkerProperty;
     private drawNaNAsProperty;
     private isVisibleProperty;
@@ -84,7 +86,6 @@ export declare abstract class BaseRenderableSeries implements IRenderableSeries
     private isDigitalLineProperty;
     private isSelectedProperty;
     private isHoveredProperty;
-    private currentRenderPassData;
     private resamplingModeProperty;
     private resamplingPrecisionProperty;
     /**
@@ -97,6 +98,14 @@ export declare abstract class BaseRenderableSeries implements IRenderableSeries
     /** @inheritDoc */
     applyTheme(themeProvider: IThemeProvider): void;
     /** @inheritDoc */
+    get parentSurface(): SciChartSurface;
+    /** @inheritDoc */
+    set parentSurface(value: SciChartSurface);
+    /** @inheritDoc */
+    get drawingProviders(): ISeriesDrawingProvider[];
+    /** @inheritDoc */
+    set drawingProviders(value: ISeriesDrawingProvider[]);
+    /** @inheritDoc */
     get isSelected(): boolean;
     /** @inheritDoc */
     set isSelected(isSelected: boolean);

package/Charting/Visuals/RenderableSeries/BaseRenderableSeries.js

@@ -30,6 +30,7 @@ var constants_1 = require("./constants");
 var RolloverModifierRenderableSeriesProps_1 = require("./RolloverModifier/RolloverModifierRenderableSeriesProps");
 var SeriesHoveredArgs_1 = require("./SeriesHoveredArgs");
 var SeriesSelectedArgs_1 = require("./SeriesSelectedArgs");
+var SeriesVisibleChangedArgs_1 = require("./SeriesVisibleChangedArgs");
 /**
  * @summary Defines the base class to a Render Series (or Chart Type) in SciChart's High Performance Real-time
  * {@link https://www.scichart.com/javascript-chart-features | JavaScript Charts}
@@ -50,31 +51,31 @@ var BaseRenderableSeries = /** @class */ (function () {
     function BaseRenderableSeries(webAssemblyContext, options) {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
         /** @inheritDoc */
-        this.isStacked = false;
-        /** @inheritDoc */
         this.rolloverModifierProps = new RolloverModifierRenderableSeriesProps_1.RolloverModifierRenderableSeriesProps(this);
         /** @inheritDoc */
         this.rolloverModifierProps1 = new RolloverModifierRenderableSeriesProps_1.RolloverModifierRenderableSeriesProps(this, true);
         /** @inheritDoc */
-        this.drawingProviders = [];
-        /** @inheritDoc */
         this.selected = new EventHandler_1.EventHandler();
         /** @inheritDoc */
         this.hovered = new EventHandler_1.EventHandler();
+        /** @inheritDoc */
+        this.isVisibleChanged = new EventHandler_1.EventHandler();
         this.animationQueue = [];
         this.paletteProviderProperty = IPaletteProvider_1.DefaultPaletteProvider.createEmpty();
-        // used to track if registered types were used for function propertes, so they can be serialized
+        // used to track if registered types were used for function properties, so they can be serialized
         this.typeMap = new Map();
+        this.opacityProperty = 1;
+        this.drawingProvidersProperty = [];
         this.xAxisIdProperty = AxisCore_1.AxisCore.DEFAULT_AXIS_ID;
         this.yAxisIdProperty = AxisCore_1.AxisCore.DEFAULT_AXIS_ID;
         this.strokeThicknessProperty = 2;
         this.strokeProperty = SciChartSurfaceBase_1.SciChartSurfaceBase.DEFAULT_THEME.lineSeriesColor;
-        this.opacityProperty = 1;
         this.drawNaNAsProperty = WebGlRenderContext2D_1.ELineDrawMode.DiscontinuousLine;
         this.isVisibleProperty = true;
         this.isDigitalLineProperty = false;
         this.resamplingModeProperty = ResamplingMode_1.EResamplingMode.Auto;
         this.resamplingPrecisionProperty = 0;
+        this.isStacked = false;
         this.webAssemblyContext = webAssemblyContext;
         this.id = (_a = options === null || options === void 0 ? void 0 : options.id) !== null && _a !== void 0 ? _a : (0, guid_1.generateGuid)();
         // It is very important to add bind(this) first line in constructor,
@@ -113,7 +114,7 @@ var BaseRenderableSeries = /** @class */ (function () {
                 options.effect = (0, classFactory_1.createType)(BaseType_1.EBaseType.ShaderEffect, options.effect.type, webAssemblyContext, options.effect.options);
             }
         }
-        this.effect = options === null || options === void 0 ? void 0 : options.effect;
+        this.effectProperty = options === null || options === void 0 ? void 0 : options.effect;
         if (options === null || options === void 0 ? void 0 : options.paletteProvider) {
             if (!("onAttached" in options.paletteProvider)) {
                 if (options.paletteProvider.type === PaletteProviderType_1.EPaletteProviderType.Custom) {
@@ -130,6 +131,21 @@ var BaseRenderableSeries = /** @class */ (function () {
         this.hitTestProvider = this.newHitTestProvider();
         this.isSelected = (_q = options === null || options === void 0 ? void 0 : options.isSelected) !== null && _q !== void 0 ? _q : false;
         this.isHovered = (_r = options === null || options === void 0 ? void 0 : options.isHovered) !== null && _r !== void 0 ? _r : false;
+        if (options === null || options === void 0 ? void 0 : options.onIsVisibleChanged) {
+            if (typeof options.onIsVisibleChanged === "string") {
+                this.typeMap.set("onIsVisibleChanged", options.onIsVisibleChanged);
+                var visibleChanged_1 = (0, classFactory_1.getFunction)(BaseType_1.EBaseType.OptionFunction, options.onIsVisibleChanged);
+                this.isVisibleChanged.subscribe(function (args) {
+                    return visibleChanged_1(args.sourceSeries, args.isVisible);
+                });
+            }
+            else {
+                var onIsVisibleChangedCallback_1 = options === null || options === void 0 ? void 0 : options.onIsVisibleChanged;
+                this.isVisibleChanged.subscribe(function (args) {
+                    return onIsVisibleChangedCallback_1(args.sourceSeries, args.isVisible);
+                });
+            }
+        }
         if (options === null || options === void 0 ? void 0 : options.onSelectedChanged) {
             if (typeof options.onSelectedChanged === "string") {
                 this.typeMap.set("onSelectedChanged", options.onSelectedChanged);
@@ -182,6 +198,32 @@ var BaseRenderableSeries = /** @class */ (function () {
             this.rolloverModifierProps.markerColor = themeProvider.textAnnotationBackground;
         }
     };
+    Object.defineProperty(BaseRenderableSeries.prototype, "parentSurface", {
+        /** @inheritDoc */
+        get: function () {
+            return this.parentSurfaceProperty;
+        },
+        /** @inheritDoc */
+        set: function (value) {
+            this.parentSurfaceProperty = value;
+            this.notifyPropertyChanged(constants_1.PROPERTY.PARENT_SURFACE);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(BaseRenderableSeries.prototype, "drawingProviders", {
+        /** @inheritDoc */
+        get: function () {
+            return this.drawingProvidersProperty;
+        },
+        /** @inheritDoc */
+        set: function (value) {
+            this.drawingProvidersProperty = value;
+            this.notifyPropertyChanged(constants_1.PROPERTY.DRAWING_PROVIDERS);
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(BaseRenderableSeries.prototype, "isSelected", {
         /** @inheritDoc */
         get: function () {
@@ -248,8 +290,12 @@ var BaseRenderableSeries = /** @class */ (function () {
         },
         /** @inheritDoc */
         set: function (isVisible) {
-            this.isVisibleProperty = isVisible;
-            this.notifyPropertyChanged(constants_1.PROPERTY.IS_VISIBLE);
+            var _a;
+            if (this.valueChanged(this.isVisibleProperty, isVisible)) {
+                this.isVisibleProperty = isVisible;
+                (_a = this.isVisibleChanged) === null || _a === void 0 ? void 0 : _a.raiseEvent(new SeriesVisibleChangedArgs_1.SeriesVisibleChangedArgs(this, isVisible));
+                this.notifyPropertyChanged(constants_1.PROPERTY.IS_VISIBLE);
+            }
         },
         enumerable: false,
         configurable: true
@@ -761,6 +807,7 @@ var BaseRenderableSeries = /** @class */ (function () {
             return (seriesTypeSupportsResampling &&
                 SciChartDefaults_1.SciChartDefaults.enableResampling &&
                 this.enableDrawingOptimisations &&
+                !this.isStacked &&
                 this.dataSeries &&
                 this.dataSeries.count() > 0 &&
                 this.dataSeries.dataDistributionCalculator.isSortedAscending);