scichart 2.1.2301 → 2.2.2351

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

@@ -13,6 +13,7 @@ export interface ICursorTooltipSvgAnnotationOptions extends ISvgAnnotationBaseOp
     tooltipLegendOffsetX?: number;
     tooltipLegendOffsetY?: number;
     cursorModifier: CursorModifier;
+    placementDivId?: string;
 }
 /**
  * A Tooltip Annotation which provides an SVG tooltip over the chart. Used by the {@link CursorModifier}
@@ -31,6 +32,8 @@ export declare class CursorTooltipSvgAnnotation extends SvgAnnotationBase {
     private tooltipLegendOffsetYProperty;
     private svgLegend;
     private previousMousePosition;
+    private placementDivId?;
+    private svgDivRoot?;
     /**
      * Creates an instance of the {@link CursorTooltipSvgAnnotation}
      * @param options
@@ -62,10 +65,13 @@ export declare class CursorTooltipSvgAnnotation extends SvgAnnotationBase {
      * @inheritDoc
      */
     update(xCalc: CoordinateCalculatorBase, yCalc: CoordinateCalculatorBase): void;
+    /** @inheritDoc */
+    delete(): void;
     /**
      * @inheritDoc
      */
     protected create(xCalc: CoordinateCalculatorBase, yCalc: CoordinateCalculatorBase): void;
     private updateTooltip;
     private updateLegendTooltip;
+    private updateExternalLegendTooltip;
 }

package/Charting/Visuals/Annotations/CursorTooltipSvgAnnotation.js

@@ -30,7 +30,7 @@ var CursorTooltipSvgAnnotation = /** @class */ (function (_super) {
      * @param options
      */
     function CursorTooltipSvgAnnotation(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;
         /** @inheritDoc */
         _this.type = IAnnotation_1.EAnnotationType.SVG;
@@ -45,6 +45,11 @@ var CursorTooltipSvgAnnotation = /** @class */ (function (_super) {
         _this.tooltipLegendOffsetXProperty = (_g = options === null || options === void 0 ? void 0 : options.tooltipLegendOffsetX) !== null && _g !== void 0 ? _g : _this.tooltipLegendOffsetXProperty;
         _this.tooltipLegendOffsetYProperty = (_h = options === null || options === void 0 ? void 0 : options.tooltipLegendOffsetY) !== null && _h !== void 0 ? _h : _this.tooltipLegendOffsetYProperty;
         _this.cursorModifier = options.cursorModifier;
+        _this.placementDivId = (_j = options === null || options === void 0 ? void 0 : options.placementDivId) !== null && _j !== void 0 ? _j : _this.placementDivId;
+        if (_this.placementDivId) {
+            var svgRoot = document.getElementById(_this.placementDivId);
+            _this.svgDivRoot = svgRoot;
+        }
         return _this;
     }
     Object.defineProperty(CursorTooltipSvgAnnotation.prototype, "seriesInfos", {
@@ -174,8 +179,25 @@ var CursorTooltipSvgAnnotation = /** @class */ (function (_super) {
             this.delete();
         }
         this.create(xCalc, yCalc);
-        this.updateTooltip();
-        this.updateLegendTooltip();
+        if (this.placementDivId) {
+            this.updateExternalLegendTooltip();
+        }
+        else {
+            this.updateTooltip();
+            this.updateLegendTooltip();
+        }
+    };
+    /** @inheritDoc */
+    CursorTooltipSvgAnnotation.prototype.delete = function () {
+        if (!this.parentSurface || this.parentSurface.isDeleted || !this.svg)
+            return;
+        if (this.placementDivId) {
+            this.svgDivRoot.removeChild(this.svg);
+        }
+        else {
+            this.svgRoot.removeChild(this.svg);
+        }
+        this.setSvg(undefined);
     };
     /**
      * @inheritDoc
@@ -185,8 +207,14 @@ var CursorTooltipSvgAnnotation = /** @class */ (function (_super) {
             throw Error("Please provide a tooltipSvgTemplate for CursorTooltipSvgAnnotation");
         var svgString = this.tooltipSvgTemplate(this.seriesInfos, this);
         var svgNode = document.createRange().createContextualFragment(svgString);
-        this.svgRoot.appendChild(svgNode);
-        this.setSvg(this.svgRoot.lastChild);
+        if (this.placementDivId) {
+            this.svgDivRoot.appendChild(svgNode);
+            this.setSvg(this.svgDivRoot.lastChild);
+        }
+        else {
+            this.svgRoot.appendChild(svgNode);
+            this.setSvg(this.svgRoot.lastChild);
+        }
     };
     CursorTooltipSvgAnnotation.prototype.updateTooltip = function () {
         var _a, _b, _c, _d;
@@ -218,6 +246,19 @@ var CursorTooltipSvgAnnotation = /** @class */ (function (_super) {
             this.svgLegend.setAttribute("y", this.tooltipLegendOffsetY.toString());
         }
     };
+    CursorTooltipSvgAnnotation.prototype.updateExternalLegendTooltip = function () {
+        if (this.tooltipLegendTemplate) {
+            var svgString = this.seriesInfos
+                ? this.tooltipLegendTemplate(this.seriesInfos, this)
+                : "<svg style='display: none'></svg>";
+            var svgNode = document.createRange().createContextualFragment(svgString);
+            if (this.svgLegend) {
+                this.svgLegend.removeChild(this.svgLegend);
+            }
+            this.svgDivRoot.appendChild(svgNode);
+            this.svgLegend = this.svgDivRoot.lastChild;
+        }
+    };
     return CursorTooltipSvgAnnotation;
 }(SvgAnnotationBase_1.SvgAnnotationBase));
 exports.CursorTooltipSvgAnnotation = CursorTooltipSvgAnnotation;

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

@@ -19,7 +19,7 @@ export declare class CustomAnnotation extends SvgAnnotationBase {
     /**
      * SVG dom element string provided by the user
      */
-    svgString: string;
+    svgStringProperty: string;
     /**
      * Creates an instance of the {@link CustomAnnotation}
      * @param options The {@link ICustomAnnotationOptions} which contain optional parameters
@@ -32,4 +32,6 @@ export declare class CustomAnnotation extends SvgAnnotationBase {
     };
     /** @inheritDoc */
     protected create(xCalc: CoordinateCalculatorBase, yCalc: CoordinateCalculatorBase): void;
+    get svgString(): string;
+    set svgString(value: string);
 }

package/Charting/Visuals/Annotations/CustomAnnotation.js

@@ -33,14 +33,14 @@ var CustomAnnotation = /** @class */ (function (_super) {
         var _this = _super.call(this, options) || this;
         /** @inheritDoc */
         _this.type = IAnnotation_1.EAnnotationType.SVGCustomAnnotation;
-        _this.svgString = (_a = options === null || options === void 0 ? void 0 : options.svgString) !== null && _a !== void 0 ? _a : undefined;
+        _this.svgStringProperty = (_a = options === null || options === void 0 ? void 0 : options.svgString) !== null && _a !== void 0 ? _a : undefined;
         return _this;
     }
     /** @inheritDoc */
     CustomAnnotation.prototype.toJSON = function () {
         var json = _super.prototype.toJSON.call(this);
         var options = {
-            svgString: this.svgString
+            svgString: this.svgStringProperty
         };
         Object.assign(json.options, options);
         return json;
@@ -61,7 +61,7 @@ var CustomAnnotation = /** @class */ (function (_super) {
             if (this.svg) {
                 this.delete();
             }
-            this.setSvg(annotationHelpers_1.annotationHelpers.createSvg(this.svgString, this.svgRoot));
+            this.setSvg(annotationHelpers_1.annotationHelpers.createSvg(this.svgStringProperty, this.svgRoot));
             this.calcAndSetAnnotationBorders(xCalc, yCalc);
             this.updateAdornerInner();
             this.prevIsSelected = this.isSelected;
@@ -74,6 +74,17 @@ var CustomAnnotation = /** @class */ (function (_super) {
             this.prevIsSelected = this.isSelected;
         }
     };
+    Object.defineProperty(CustomAnnotation.prototype, "svgString", {
+        get: function () {
+            return this.svgStringProperty;
+        },
+        set: function (value) {
+            this.delete();
+            this.svgStringProperty = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
     return CustomAnnotation;
 }(SvgAnnotationBase_1.SvgAnnotationBase));
 exports.CustomAnnotation = CustomAnnotation;

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

@@ -1,4 +1,5 @@
 import { Rect } from "../../../Core/Rect";
+import { EHorizontalAlignment, EVerticalAlignment } from "../../../types/LabelPlacement";
 import { ModifierMouseArgs } from "../../ChartModifiers/ModifierMouseArgs";
 import { WebGlRenderContext2D } from "../../Drawing/WebGlRenderContext2D";
 import { CoordinateCalculatorBase } from "../../Numerics/CoordinateCalculators/CoordinateCalculatorBase";
@@ -7,6 +8,8 @@ import { ILineAnnotationOptions, LineAnnotation } from "./LineAnnotation";
 export interface IHVLineAnnotationOptions extends ILineAnnotationOptions {
     dragOnLine?: boolean;
     dragOnLabel?: boolean;
+    horizontalAlignment?: EHorizontalAlignment;
+    verticalAlignment?: EVerticalAlignment;
 }
 /**
  * @summary The {@link HorizontalLineAnnotation} provides an {@link AnnotationBase | Annotation} which draws a horizontal line at
@@ -25,6 +28,7 @@ export declare class HorizontalLineAnnotation extends LineAnnotation {
     readonly type: EAnnotationType;
     dragOnLine: boolean;
     dragOnLabel: boolean;
+    horizontalAlignment: EHorizontalAlignment;
     private labelRect;
     /**
      * Create an instance of a HorizontalLineAnnotation

package/Charting/Visuals/Annotations/HorizontalLineAnnotation.js

@@ -58,7 +58,7 @@ var HorizontalLineAnnotation = /** @class */ (function (_super) {
      * @param options Optional parameters of type {@link ILineAnnotationOptions} which configure the annotation upon construction
      */
     function HorizontalLineAnnotation(options) {
-        var _a, _b;
+        var _a, _b, _c;
         var _this = _super.call(this, options) || this;
         /** @inheritDoc */
         _this.type = IAnnotation_1.EAnnotationType.RenderContextHorizontalLineAnnotation;
@@ -72,6 +72,7 @@ var HorizontalLineAnnotation = /** @class */ (function (_super) {
         }
         _this.dragOnLine = (_a = options === null || options === void 0 ? void 0 : options.dragOnLine) !== null && _a !== void 0 ? _a : _this.dragOnLine;
         _this.dragOnLabel = (_b = options === null || options === void 0 ? void 0 : options.dragOnLabel) !== null && _b !== void 0 ? _b : _this.dragOnLabel;
+        _this.horizontalAlignment = (_c = options === null || options === void 0 ? void 0 : options.horizontalAlignment) !== null && _c !== void 0 ? _c : _this.horizontalAlignment;
         return _this;
     }
     Object.defineProperty(HorizontalLineAnnotation.prototype, "y2", {
@@ -136,7 +137,7 @@ var HorizontalLineAnnotation = /** @class */ (function (_super) {
         var isLineAnnotationEdgeVisible = !isPartialLine || isLineAnnotationInHorizontalVisibleRange;
         if (isAxisLabelInVerticalVisibleRange && isLineAnnotationEdgeVisible) {
             var textStyle = __assign(__assign({}, verticalAxis.labelStyle), { color: this.axisLabelStroke, fontSize: this.axisFontSize * DpiHelper_1.DpiHelper.PIXEL_RATIO, fontFamily: this.axisFontFamily });
-            var labelRect = (0, drawLabel_1.drawLineAnnotation)(verticalAxis, renderContext, this.labelPlacement, this.labelValue, borderX1, borderX2, borderY1, borderY2, textStyle, this.axisLabelFill, strokePen, viewRect, this.showLabel, this.opacity);
+            var labelRect = (0, drawLabel_1.drawLineAnnotation)(verticalAxis, renderContext, this.labelPlacement, this.labelValue, borderX1, borderX2, borderY1, borderY2, textStyle, this.axisLabelFill, strokePen, viewRect, this.showLabel, this.opacity, this.horizontalAlignment);
             if (labelRect) {
                 var point1 = (0, translate_1.translateFromCanvasToSeriesViewRect)(new Point_1.Point(labelRect.left, labelRect.top), viewRect, true);
                 var point2 = (0, translate_1.translateFromCanvasToSeriesViewRect)(new Point_1.Point(labelRect.right, labelRect.bottom), viewRect, true);

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

@@ -31,7 +31,7 @@ export declare class RolloverLegendSvgAnnotation extends SvgAnnotationBase {
     /**
      * Gets or sets seriesInfos {@link SeriesInfo} value on the tooltip
      */
-    set seriesInfos(value: SeriesInfo[]);
+    set seriesInfos(newSeriesInfos: SeriesInfo[]);
     get tooltipLegendTemplate(): TRolloverLegendSvgTemplate;
     set tooltipLegendTemplate(value: TRolloverLegendSvgTemplate);
     get tooltipLegendOffsetX(): number;

package/Charting/Visuals/Annotations/RolloverLegendSvgAnnotation.js

@@ -50,9 +50,19 @@ var RolloverLegendSvgAnnotation = /** @class */ (function (_super) {
         /**
          * Gets or sets seriesInfos {@link SeriesInfo} value on the tooltip
          */
-        set: function (value) {
-            this.seriesInfosProperty = value;
-            this.notifyPropertyChanged(constants_1.PROPERTY.SERIES_INFOS);
+        set: function (newSeriesInfos) {
+            if (this.seriesInfosProperty && newSeriesInfos) {
+                // Compare infos against the ones for the matching series.  See if any are different
+                if (newSeriesInfos.length !== this.seriesInfosProperty.length ||
+                    this.seriesInfosProperty
+                        .map(function (seriesInfo) {
+                        return seriesInfo.equals(newSeriesInfos.find(function (newSeriesInfo) { return newSeriesInfo.renderableSeries.id === seriesInfo.renderableSeries.id; }));
+                    })
+                        .some(function (sameSeriesInfo) { return sameSeriesInfo === false; })) {
+                    this.seriesInfosProperty = newSeriesInfos;
+                    this.notifyPropertyChanged(constants_1.PROPERTY.SERIES_INFOS);
+                }
+            }
         },
         enumerable: false,
         configurable: true

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

@@ -7,6 +7,7 @@ import { ISvgAnnotationBaseOptions, SvgAnnotationBase } from "./SvgAnnotationBas
 export interface IRolloverTooltipSvgAnnotationOptions extends ISvgAnnotationBaseOptions {
     height?: number;
     seriesType?: ESeriesType;
+    placementDivId?: string;
 }
 /**
  * A Tooltip Annotation which provides an SVG tooltip over the chart. Used by the {@link RolloverModifier}
@@ -20,6 +21,8 @@ export declare class RolloverTooltipSvgAnnotation extends SvgAnnotationBase {
     private svgLegend;
     private seriesInfoProperty;
     private previousMousePosition;
+    private placementDivIdProperty;
+    private svgDivRoot;
     /**
      * Creates an instance of the {@link RolloverTooltipSvgAnnotation}
      * @param renderableSeriesProps The {@link RolloverModifierRenderableSeriesProps | props} pass
@@ -44,5 +47,15 @@ export declare class RolloverTooltipSvgAnnotation extends SvgAnnotationBase {
     updateSize(width: number, height: number): void;
     /** @inheritDoc */
     protected create(xCalc: CoordinateCalculatorBase, yCalc: CoordinateCalculatorBase): void;
+    private generateSvgString;
     private updateLegendTooltip;
+    private updateExternalLegendTooltip;
+    /**
+     * Gets or sets the parent div element reference or id for the Tooltip
+     */
+    get placementDivId(): string;
+    /**
+     * Gets or sets the parent div element reference or id for the Tooltip
+     */
+    set placementDivId(value: string);
 }

package/Charting/Visuals/Annotations/RolloverTooltipSvgAnnotation.js

@@ -34,7 +34,7 @@ var RolloverTooltipSvgAnnotation = /** @class */ (function (_super) {
      * @param options
      */
     function RolloverTooltipSvgAnnotation(renderableSeriesProps, options) {
-        var _a;
+        var _a, _b;
         var _this = _super.call(this, options) || this;
         /** @inheritDoc */
         _this.type = IAnnotation_1.EAnnotationType.SVG;
@@ -46,6 +46,7 @@ var RolloverTooltipSvgAnnotation = /** @class */ (function (_super) {
         _this.yCoordinateMode = AnnotationBase_1.ECoordinateMode.DataValue;
         _this.isHidden = true;
         _this.updateSize = _this.updateSize.bind(_this);
+        _this.placementDivIdProperty = (_b = options === null || options === void 0 ? void 0 : options.placementDivId) !== null && _b !== void 0 ? _b : _this.placementDivIdProperty;
         return _this;
     }
     Object.defineProperty(RolloverTooltipSvgAnnotation.prototype, "seriesInfo", {
@@ -59,20 +60,28 @@ var RolloverTooltipSvgAnnotation = /** @class */ (function (_super) {
          * Gets or sets seriesInfo {@link SeriesInfo} value on the tooltip
          */
         set: function (value) {
-            this.seriesInfoProperty = value;
-            this.notifyPropertyChanged(constants_1.PROPERTY.SERIES_INFO);
+            if ((value && !this.seriesInfoProperty) || !this.seriesInfoProperty.equals(value)) {
+                this.seriesInfoProperty = value;
+                this.notifyPropertyChanged(constants_1.PROPERTY.SERIES_INFO);
+            }
         },
         enumerable: false,
         configurable: true
     });
     /** @inheritDoc */
     RolloverTooltipSvgAnnotation.prototype.delete = function () {
-        var _a;
+        var _a, _b, _c, _d;
         if (!this.parentSurface || this.parentSurface.isDeleted)
             return;
-        (_a = this.svgRoot) === null || _a === void 0 ? void 0 : _a.removeChild(this.svg);
+        if (this.svg) {
+            if (this.placementDivId) {
+                (_b = (_a = this.svg) === null || _a === void 0 ? void 0 : _a.parentNode) === null || _b === void 0 ? void 0 : _b.removeChild(this.svg);
+                return;
+            }
+            (_c = this.svgRoot) === null || _c === void 0 ? void 0 : _c.removeChild(this.svg);
+        }
         if (this.svgLegend) {
-            this.svgRoot.removeChild(this.svgLegend);
+            (_d = this.svgLegend.parentNode) === null || _d === void 0 ? void 0 : _d.removeChild(this.svgLegend);
         }
     };
     /** @inheritDoc */
@@ -85,8 +94,13 @@ var RolloverTooltipSvgAnnotation = /** @class */ (function (_super) {
         if (this.svg) {
             this.delete();
         }
-        _super.prototype.update.call(this, xCalc, yCalc);
-        this.updateLegendTooltip();
+        if (this.placementDivId) {
+            this.updateExternalLegendTooltip();
+        }
+        else {
+            _super.prototype.update.call(this, xCalc, yCalc);
+            this.updateLegendTooltip();
+        }
     };
     /**
      * Updates size of the tooltip
@@ -97,22 +111,25 @@ var RolloverTooltipSvgAnnotation = /** @class */ (function (_super) {
     };
     /** @inheritDoc */
     RolloverTooltipSvgAnnotation.prototype.create = function (xCalc, yCalc) {
-        var _a;
         var svgString;
         if (!this.seriesInfo) {
             svgString = "<svg></svg>";
         }
         else {
-            var tooltipTitle = this.tooltipProps.tooltipTitle;
-            var idTitle = ("" + tooltipTitle).replace(/\s/g, "");
-            var id = "id".concat(Math.floor(this.y1), "_").concat(idTitle, "_").concat(Date.now());
-            var tooltipTemplate = (_a = this.tooltipProps.tooltipTemplate) !== null && _a !== void 0 ? _a : defaultTooltipTemplate;
-            svgString = tooltipTemplate(id, this.seriesInfo, this);
+            svgString = this.generateSvgString();
         }
         var svgNode = document.createRange().createContextualFragment(svgString);
         this.svgRoot.appendChild(svgNode);
         this.setSvg(this.svgRoot.lastChild);
     };
+    RolloverTooltipSvgAnnotation.prototype.generateSvgString = function () {
+        var _a;
+        var tooltipTitle = this.tooltipProps.tooltipTitle;
+        var idTitle = ("" + tooltipTitle).replace(/\s/g, "");
+        var id = "id".concat(Math.floor(this.y1), "_").concat(idTitle, "_").concat(Date.now());
+        var tooltipTemplate = (_a = this.tooltipProps.tooltipTemplate) !== null && _a !== void 0 ? _a : defaultTooltipTemplate;
+        return tooltipTemplate(id, this.seriesInfo, this);
+    };
     RolloverTooltipSvgAnnotation.prototype.updateLegendTooltip = function () {
         if (this.tooltipProps.tooltipLegendTemplate) {
             var svgString = this.seriesInfo
@@ -125,6 +142,38 @@ var RolloverTooltipSvgAnnotation = /** @class */ (function (_super) {
             this.svgLegend.setAttribute("y", this.tooltipProps.tooltipLegendOffsetY.toString());
         }
     };
+    RolloverTooltipSvgAnnotation.prototype.updateExternalLegendTooltip = function () {
+        var svgString;
+        if (!this.seriesInfo) {
+            svgString = "<svg style='display: none;'></svg>";
+        }
+        else {
+            svgString = this.generateSvgString();
+        }
+        var svgNode = document.createRange().createContextualFragment(svgString);
+        this.svgDivRoot = document.getElementById(this.placementDivId);
+        this.svgDivRoot.appendChild(svgNode);
+        this.setSvg(this.svgDivRoot.lastChild);
+    };
+    Object.defineProperty(RolloverTooltipSvgAnnotation.prototype, "placementDivId", {
+        /**
+         * Gets or sets the parent div element reference or id for the Tooltip
+         */
+        get: function () {
+            return this.placementDivIdProperty;
+        },
+        /**
+         * Gets or sets the parent div element reference or id for the Tooltip
+         */
+        set: function (value) {
+            if (this.placementDivIdProperty !== value) {
+                this.placementDivIdProperty = value;
+                this.notifyPropertyChanged(constants_1.PROPERTY.PLACEMENT_DIV_ID);
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
     return RolloverTooltipSvgAnnotation;
 }(SvgAnnotationBase_1.SvgAnnotationBase));
 exports.RolloverTooltipSvgAnnotation = RolloverTooltipSvgAnnotation;

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

@@ -1,4 +1,5 @@
 import { Rect } from "../../../Core/Rect";
+import { EVerticalAlignment } from "../../../types/LabelPlacement";
 import { ModifierMouseArgs } from "../../ChartModifiers/ModifierMouseArgs";
 import { WebGlRenderContext2D } from "../../Drawing/WebGlRenderContext2D";
 import { CoordinateCalculatorBase } from "../../Numerics/CoordinateCalculators/CoordinateCalculatorBase";
@@ -22,6 +23,7 @@ export declare class VerticalLineAnnotation extends LineAnnotation {
     readonly type: EAnnotationType;
     dragOnLine: boolean;
     dragOnLabel: boolean;
+    verticalAlignment: EVerticalAlignment;
     private labelRect;
     /**
      * Create an instance of a LineAnnotation

package/Charting/Visuals/Annotations/VerticalLineAnnotation.js

@@ -58,7 +58,7 @@ var VerticalLineAnnotation = /** @class */ (function (_super) {
      * @param options Optional parameters of type {@link ILineAnnotationOptions} which configure the annotation upon construction
      */
     function VerticalLineAnnotation(options) {
-        var _a, _b;
+        var _a, _b, _c;
         var _this = _super.call(this, options) || this;
         /** @inheritDoc */
         _this.type = IAnnotation_1.EAnnotationType.RenderContextVerticalLineAnnotation;
@@ -72,6 +72,7 @@ var VerticalLineAnnotation = /** @class */ (function (_super) {
         }
         _this.dragOnLine = (_a = options === null || options === void 0 ? void 0 : options.dragOnLine) !== null && _a !== void 0 ? _a : _this.dragOnLine;
         _this.dragOnLabel = (_b = options === null || options === void 0 ? void 0 : options.dragOnLabel) !== null && _b !== void 0 ? _b : _this.dragOnLabel;
+        _this.verticalAlignment = (_c = options === null || options === void 0 ? void 0 : options.verticalAlignment) !== null && _c !== void 0 ? _c : _this.verticalAlignment;
         return _this;
     }
     Object.defineProperty(VerticalLineAnnotation.prototype, "y2", {
@@ -138,7 +139,7 @@ var VerticalLineAnnotation = /** @class */ (function (_super) {
         var isLineAnnotationEdgeVisible = !isPartialLine || isLineAnnotationInVerticalVisibleRange;
         if (isAxisLabelInHorizontalVisibleRange && isLineAnnotationEdgeVisible) {
             var textStyle = __assign(__assign({}, verticalAxis.labelStyle), { color: this.axisLabelStroke, fontSize: this.axisFontSize * DpiHelper_1.DpiHelper.PIXEL_RATIO, fontFamily: this.axisFontFamily });
-            var labelRect = (0, drawLabel_1.drawLineAnnotation)(horizontalAxis, renderContext, this.labelPlacement, this.labelValue, borderX1, borderX2, borderY1, borderY2, textStyle, this.axisLabelFill, strokePen, viewRect, this.showLabel, this.opacity);
+            var labelRect = (0, drawLabel_1.drawLineAnnotation)(horizontalAxis, renderContext, this.labelPlacement, this.labelValue, borderX1, borderX2, borderY1, borderY2, textStyle, this.axisLabelFill, strokePen, viewRect, this.showLabel, this.opacity, null, this.verticalAlignment);
             if (labelRect) {
                 var point1 = (0, translate_1.translateFromCanvasToSeriesViewRect)(new Point_1.Point(labelRect.left, labelRect.top), viewRect, true);
                 var point2 = (0, translate_1.translateFromCanvasToSeriesViewRect)(new Point_1.Point(labelRect.right, labelRect.bottom), viewRect, true);

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

@@ -51,7 +51,8 @@ export declare enum PROPERTY {
     Y2 = "Y2",
     YAXIS_ID = "YAXIS_ID",
     Y_COORDINATE_MODE = "Y_COORDINATE_MODE",
-    Y_COORD_SHIFT = "Y_COORD_SHIFT"
+    Y_COORD_SHIFT = "Y_COORD_SHIFT",
+    PLACEMENT_DIV_ID = "PLACEMENT_DIV_ID"
 }
 export declare const ADORNER_GRIP_RADIUS = 10;
 export declare const DISTANCE_TO_LINE = 10;

package/Charting/Visuals/Annotations/constants.js

@@ -56,6 +56,7 @@ var PROPERTY;
     PROPERTY["YAXIS_ID"] = "YAXIS_ID";
     PROPERTY["Y_COORDINATE_MODE"] = "Y_COORDINATE_MODE";
     PROPERTY["Y_COORD_SHIFT"] = "Y_COORD_SHIFT";
+    PROPERTY["PLACEMENT_DIV_ID"] = "PLACEMENT_DIV_ID";
 })(PROPERTY = exports.PROPERTY || (exports.PROPERTY = {}));
 exports.ADORNER_GRIP_RADIUS = 10;
 exports.DISTANCE_TO_LINE = 10;

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

@@ -144,6 +144,7 @@ export interface IAxisBase2dOptions extends IAxisCoreOptions {
      * Useful to align seriesViewRects for different charts
      */
     axisThickness?: number;
+    backgroundColor?: string;
 }
 /**
  * The base class for 2D Chart Axis within SciChart - High Performance {@link https://www.scichart.com/javascript-chart-features | JavaScript Charts}.
@@ -238,6 +239,14 @@ export declare abstract class AxisBase2D extends AxisCore implements IThemeable
      * This is only used to allow multiple primary axes, so that all stacked axes can draw gridlines
      */
     set isStackedAxis(value: boolean);
+    /**
+     * Gets the background color of separate Axis
+     */
+    get backgroundColor(): string;
+    /**
+     * Sets the background color of separate Axis
+     */
+    set backgroundColor(value: string);
     /** Gets or sets the length of a stacked axis as an absolute number or percentage, e.g. 100, or "30%".
      * A plain number will be interpreted as a number of pixels.
      * A number with % will take that percentage of the total length.
@@ -341,6 +350,7 @@ export declare abstract class AxisBase2D extends AxisCore implements IThemeable
     private axisLengthProperty;
     private offsetProperty;
     private tickCache;
+    private backgroundColorProperty;
     /**
      * Creates an instance of the {@link AxisBase2D}
      * @param webAssemblyContext The {@link TSciChart | SciChart 2D WebAssembly Context} containing native methods and

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;
+}