scichart 3.2.516 → 3.2.528

package/Charting/ChartModifiers/CursorModifier.d.ts

@@ -39,6 +39,8 @@ export interface ICursorModifierOptions extends IChartModifierBaseOptions {
     tooltipContainerBackground?: string;
     /** Sets the tooltip text color as an HTML Color code */
     tooltipTextStroke?: string;
+    /** Sets the tooltip shadow color as an HTML Color code */
+    tooltipShadow?: string;
     /** Sets whether we should display the tooltip. Default is false */
     showTooltip?: boolean;
     /** Sets whether we should display axis labels. Default is true */
@@ -165,6 +167,7 @@ export declare class CursorModifier extends ChartModifierBase2D implements IIncl
     protected tooltipAnnotation: CursorTooltipSvgAnnotation | undefined;
     protected mousePosition: EMousePosition;
     protected crosshairStrokeProperty: string;
+    protected tooltipShadowProperty: string;
     protected tooltipDataTemplateProperty?: TCursorTooltipDataTemplate | undefined;
     protected includedSeriesMap: Map<IRenderableSeries, boolean>;
     protected placementDivIdProperty: string | undefined;
@@ -219,6 +222,14 @@ export declare class CursorModifier extends ChartModifierBase2D implements IIncl
      * Gets or sets the crosshair line Stroke color as an HTML Color code
      */
     set crosshairStroke(value: string);
+    /**
+     * Gets or sets the tooltip shadow color as an HTML Color code
+     */
+    get tooltipShadow(): string;
+    /**
+     * Gets or sets the tooltip shadow color as an HTML Color code
+     */
+    set tooltipShadow(value: string);
     /**
      *  Gets or sets whether we should display the X Line. Default is true
      */

package/Charting/ChartModifiers/CursorModifier.js

@@ -21,6 +21,7 @@ var Deleter_1 = require("../../Core/Deleter");
 var BaseType_1 = require("../../types/BaseType");
 var ChartModifierType_1 = require("../../types/ChartModifierType");
 var MousePosition_1 = require("../../types/MousePosition");
+var parseColor_1 = require("../../utils/parseColor");
 var translate_1 = require("../../utils/translate");
 var IDataSeries_1 = require("../Model/IDataSeries");
 var AnnotationBase_1 = require("../Visuals/Annotations/AnnotationBase");
@@ -53,7 +54,7 @@ var CursorModifier = /** @class */ (function (_super) {
      */
     function CursorModifier(options) {
         var _this = this;
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
         _this = _super.call(this, options) || this;
         _this.type = ChartModifierType_1.EChart2DModifierType.Cursor;
         /**
@@ -125,6 +126,7 @@ var CursorModifier = /** @class */ (function (_super) {
         _this.hitTestRadius = 0;
         _this.mousePosition = MousePosition_1.EMousePosition.OutOfCanvas;
         _this.crosshairStrokeProperty = SciChartSurfaceBase_1.SciChartSurfaceBase.DEFAULT_THEME.cursorLineBrush;
+        _this.tooltipShadowProperty = SciChartSurfaceBase_1.SciChartSurfaceBase.DEFAULT_THEME.shadowEffectColor;
         _this.includedSeriesMap = new Map();
         _this.showXLineProperty = true;
         _this.showYLineProperty = true;
@@ -142,15 +144,16 @@ var CursorModifier = /** @class */ (function (_super) {
         _this.crosshairStroke = (_d = options === null || options === void 0 ? void 0 : options.crosshairStroke) !== null && _d !== void 0 ? _d : _this.crosshairStroke;
         _this.tooltipContainerBackground = (_e = options === null || options === void 0 ? void 0 : options.tooltipContainerBackground) !== null && _e !== void 0 ? _e : _this.tooltipContainerBackground;
         _this.tooltipTextStroke = (_f = options === null || options === void 0 ? void 0 : options.tooltipTextStroke) !== null && _f !== void 0 ? _f : _this.tooltipTextStroke;
-        _this.showTooltip = (_g = options === null || options === void 0 ? void 0 : options.showTooltip) !== null && _g !== void 0 ? _g : _this.showTooltip;
-        _this.showAxisLabels = (_h = options === null || options === void 0 ? void 0 : options.showAxisLabels) !== null && _h !== void 0 ? _h : _this.showAxisLabels;
-        _this.axisLabelFill = (_j = options === null || options === void 0 ? void 0 : options.axisLabelFill) !== null && _j !== void 0 ? _j : _this.axisLabelFill;
-        _this.axisLabelStroke = (_k = options === null || options === void 0 ? void 0 : options.axisLabelStroke) !== null && _k !== void 0 ? _k : _this.axisLabelStroke;
-        _this.xAxisLabelStroke = (_l = options === null || options === void 0 ? void 0 : options.xAxisLabelStroke) !== null && _l !== void 0 ? _l : _this.xAxisLabelStroke;
-        _this.xAxisLabelFill = (_m = options === null || options === void 0 ? void 0 : options.xAxisLabelFill) !== null && _m !== void 0 ? _m : _this.xAxisLabelFill;
-        _this.yAxisLabelStroke = (_o = options === null || options === void 0 ? void 0 : options.yAxisLabelStroke) !== null && _o !== void 0 ? _o : _this.yAxisLabelStroke;
-        _this.yAxisLabelFill = (_p = options === null || options === void 0 ? void 0 : options.yAxisLabelFill) !== null && _p !== void 0 ? _p : _this.yAxisLabelFill;
-        _this.placementDivIdProperty = (_q = options === null || options === void 0 ? void 0 : options.placementDivId) !== null && _q !== void 0 ? _q : _this.placementDivIdProperty;
+        _this.tooltipShadow = (_g = options === null || options === void 0 ? void 0 : options.tooltipShadow) !== null && _g !== void 0 ? _g : _this.tooltipShadowProperty;
+        _this.showTooltip = (_h = options === null || options === void 0 ? void 0 : options.showTooltip) !== null && _h !== void 0 ? _h : _this.showTooltip;
+        _this.showAxisLabels = (_j = options === null || options === void 0 ? void 0 : options.showAxisLabels) !== null && _j !== void 0 ? _j : _this.showAxisLabels;
+        _this.axisLabelFill = (_k = options === null || options === void 0 ? void 0 : options.axisLabelFill) !== null && _k !== void 0 ? _k : _this.axisLabelFill;
+        _this.axisLabelStroke = (_l = options === null || options === void 0 ? void 0 : options.axisLabelStroke) !== null && _l !== void 0 ? _l : _this.axisLabelStroke;
+        _this.xAxisLabelStroke = (_m = options === null || options === void 0 ? void 0 : options.xAxisLabelStroke) !== null && _m !== void 0 ? _m : _this.xAxisLabelStroke;
+        _this.xAxisLabelFill = (_o = options === null || options === void 0 ? void 0 : options.xAxisLabelFill) !== null && _o !== void 0 ? _o : _this.xAxisLabelFill;
+        _this.yAxisLabelStroke = (_p = options === null || options === void 0 ? void 0 : options.yAxisLabelStroke) !== null && _p !== void 0 ? _p : _this.yAxisLabelStroke;
+        _this.yAxisLabelFill = (_q = options === null || options === void 0 ? void 0 : options.yAxisLabelFill) !== null && _q !== void 0 ? _q : _this.yAxisLabelFill;
+        _this.placementDivIdProperty = (_r = options === null || options === void 0 ? void 0 : options.placementDivId) !== null && _r !== void 0 ? _r : _this.placementDivIdProperty;
         if (options === null || options === void 0 ? void 0 : options.tooltipLegendTemplate) {
             if (typeof options.tooltipLegendTemplate === "string") {
                 _this.typeMap.set("tooltipLegendTemplate", options.tooltipLegendTemplate);
@@ -159,9 +162,9 @@ var CursorModifier = /** @class */ (function (_super) {
             }
         }
         _this.tooltipLegendTemplate =
-            (_r = options === null || options === void 0 ? void 0 : options.tooltipLegendTemplate) !== null && _r !== void 0 ? _r : _this.tooltipLegendTemplate;
-        _this.tooltipLegendOffsetX = (_s = options === null || options === void 0 ? void 0 : options.tooltipLegendOffsetX) !== null && _s !== void 0 ? _s : _this.tooltipLegendOffsetX;
-        _this.tooltipLegendOffsetY = (_t = options === null || options === void 0 ? void 0 : options.tooltipLegendOffsetY) !== null && _t !== void 0 ? _t : _this.tooltipLegendOffsetY;
+            (_s = options === null || options === void 0 ? void 0 : options.tooltipLegendTemplate) !== null && _s !== void 0 ? _s : _this.tooltipLegendTemplate;
+        _this.tooltipLegendOffsetX = (_t = options === null || options === void 0 ? void 0 : options.tooltipLegendOffsetX) !== null && _t !== void 0 ? _t : _this.tooltipLegendOffsetX;
+        _this.tooltipLegendOffsetY = (_u = options === null || options === void 0 ? void 0 : options.tooltipLegendOffsetY) !== null && _u !== void 0 ? _u : _this.tooltipLegendOffsetY;
         if (options === null || options === void 0 ? void 0 : options.tooltipDataTemplate) {
             if (typeof options.tooltipDataTemplate === "string") {
                 _this.typeMap.set("tooltipDataTemplate", options.tooltipDataTemplate);
@@ -170,10 +173,10 @@ var CursorModifier = /** @class */ (function (_super) {
             }
         }
         _this.tooltipDataTemplateProperty =
-            (_u = options === null || options === void 0 ? void 0 : options.tooltipDataTemplate) !== null && _u !== void 0 ? _u : _this.tooltipDataTemplateProperty;
-        _this.showXLine = (_v = options === null || options === void 0 ? void 0 : options.showXLine) !== null && _v !== void 0 ? _v : _this.showXLine;
-        _this.showYLine = (_w = options === null || options === void 0 ? void 0 : options.showYLine) !== null && _w !== void 0 ? _w : _this.showYLine;
-        _this.hitTestRadius = (_x = options === null || options === void 0 ? void 0 : options.hitTestRadius) !== null && _x !== void 0 ? _x : _this.hitTestRadius;
+            (_v = options === null || options === void 0 ? void 0 : options.tooltipDataTemplate) !== null && _v !== void 0 ? _v : _this.tooltipDataTemplateProperty;
+        _this.showXLine = (_w = options === null || options === void 0 ? void 0 : options.showXLine) !== null && _w !== void 0 ? _w : _this.showXLine;
+        _this.showYLine = (_x = options === null || options === void 0 ? void 0 : options.showYLine) !== null && _x !== void 0 ? _x : _this.showYLine;
+        _this.hitTestRadius = (_y = options === null || options === void 0 ? void 0 : options.hitTestRadius) !== null && _y !== void 0 ? _y : _this.hitTestRadius;
         return _this;
     }
     /**
@@ -183,6 +186,9 @@ var CursorModifier = /** @class */ (function (_super) {
         if (!this.testPropertyChanged(constants_1.PROPERTY.CROSSHAIR_STROKE)) {
             this.crosshairStroke = themeProvider.cursorLineBrush;
         }
+        if (!this.testPropertyChanged(constants_1.PROPERTY.TOOLTIP_SHADOW)) {
+            this.tooltipShadow = themeProvider.shadowEffectColor;
+        }
     };
     /**
      * @inheritDoc
@@ -292,8 +298,29 @@ var CursorModifier = /** @class */ (function (_super) {
          * Gets or sets the crosshair line Stroke color as an HTML Color code
          */
         set: function (value) {
-            this.crosshairStrokeProperty = value;
-            this.notifyPropertyChanged(constants_1.PROPERTY.CROSSHAIR_STROKE);
+            if (this.crosshairStrokeProperty !== value) {
+                this.crosshairStrokeProperty = value;
+                this.notifyPropertyChanged(constants_1.PROPERTY.CROSSHAIR_STROKE);
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(CursorModifier.prototype, "tooltipShadow", {
+        /**
+         * Gets or sets the tooltip shadow color as an HTML Color code
+         */
+        get: function () {
+            return this.tooltipShadowProperty;
+        },
+        /**
+         * Gets or sets the tooltip shadow color as an HTML Color code
+         */
+        set: function (value) {
+            if (this.tooltipShadowProperty !== value) {
+                this.tooltipShadowProperty = value;
+                this.notifyPropertyChanged(constants_1.PROPERTY.TOOLTIP_SHADOW);
+            }
         },
         enumerable: false,
         configurable: true
@@ -487,7 +514,8 @@ var CursorModifier = /** @class */ (function (_super) {
             tooltipLegendOffsetY: this.tooltipLegendOffsetY,
             tooltipLegendTemplate: this.typeMap.get("tooltipLegendTemplate"),
             tooltipSvgTemplate: this.typeMap.get("tooltipSvgTemplate"),
-            tooltipTextStroke: this.tooltipTextStroke
+            tooltipTextStroke: this.tooltipTextStroke,
+            tooltipShadow: this.tooltipShadow
         };
         Object.assign(json.options, options);
         return json;
@@ -689,23 +717,38 @@ var defaultTooltipTemplate = function (seriesInfos, svgAnnotation) {
         return "<svg></svg>";
     }
     // tooltip size
-    var _b = (0, exports.calcTooltipSize)(valuesWithLabels), width = _b.width, height = _b.height;
+    var _b = (0, exports.calcTooltipSize)(valuesWithLabels, 13), width = _b.width, height = _b.height;
     // adjust position
     (0, exports.adjustTooltipPosition)(width, height, svgAnnotation);
     var valuesBlock = "";
     valuesWithLabels.forEach(function (val, index) {
         valuesBlock += "<tspan x=\"8\" dy=\"1.2em\">".concat(val, "</tspan>");
     });
+    var rectHeight = "95%";
+    if (svgAnnotation.yCoordShift < 0) {
+        // Fix the issue where the rect would be too small if the height was enormous
+        var maxHeight = (0, translate_1.translateToNotScaled)(svgAnnotation.parentSurface.seriesViewRect.height) - svgAnnotation.y1;
+        if (height > maxHeight) {
+            rectHeight = (height - 5).toFixed(0);
+        }
+    }
     var tooltipFill = svgAnnotation.containerBackground;
     var tooltipStroke = svgAnnotation.textStroke;
-    return "<svg class=\"scichart__cursor-tooltip\" width=\"".concat(width, "\" height=\"").concat(height, "\">\n        <defs>\n            <filter id=\"").concat(id, "\" x=\"0\" y=\"0\" width=\"200%\" height=\"200%\">\n                <feOffset result=\"offOut\" in=\"SourceAlpha\" dx=\"3\" dy=\"3\" />\n                <feGaussianBlur result=\"blurOut\" in=\"offOut\" stdDeviation=\"3\" />\n                <feBlend in=\"SourceGraphic\" in2=\"blurOut\" mode=\"normal\" />\n            </filter>\n        </defs>\n        <rect rx=\"4\" ry=\"4\" width=\"95%\" height=\"90%\" fill=\"").concat(tooltipFill, "\" filter=\"url(#").concat(id, ")\" />\n        <svg width=\"100%\">\n            <text x=\"8\" y=\"3\" font-size=\"13\" font-family=\"Verdana\" dy=\"0\" fill=\"").concat(tooltipStroke, "\">").concat(valuesBlock, "</text>\n        </svg>\n    </svg>");
+    var shadowColor = svgAnnotation.cursorModifier.tooltipShadow;
+    console.log(shadowColor);
+    var blur = "<feGaussianBlur result=\"blurOut\" in=\"offOut\" stdDeviation=\"3\" />";
+    if (shadowColor !== undefined) {
+        var shadowRGBA = (0, parseColor_1.parseColorToTArgb)(shadowColor);
+        blur = "<feColorMatrix result=\"matrixOut\" in=\"offOut\" type=\"matrix\"\n        values=\"0 0 0 0 ".concat(shadowRGBA.red / 255, "\n                0 0 0 0 ").concat(shadowRGBA.green / 255, "\n                0 0 0 0 ").concat(shadowRGBA.blue / 255, "\n                0 0 0 ").concat(shadowRGBA.opacity / 255, " 0\" />\n        <feGaussianBlur result=\"blurOut\" in=\"matrixOut\" stdDeviation=\"3\" />");
+    }
+    return "<svg class=\"scichart__cursor-tooltip\" width=\"".concat(width, "\" height=\"").concat(height, "\">\n        <defs>\n            <filter id=\"").concat(id, "\" x=\"0\" y=\"0\" width=\"200%\" height=\"200%\">\n                <feOffset result=\"offOut\" in=\"SourceAlpha\" dx=\"3\" dy=\"3\" />\n                ").concat(blur, "\n                <feBlend in=\"SourceGraphic\" in2=\"blurOut\" mode=\"normal\" />\n            </filter>\n        </defs>\n        <rect rx=\"4\" ry=\"4\" width=\"95%\" height=\"").concat(rectHeight, "\" fill=\"").concat(tooltipFill, "\" filter=\"url(#").concat(id, ")\" />\n        <svg width=\"100%\">\n            <text x=\"8\" y=\"3\" font-size=\"13\" font-family=\"Verdana\" dy=\"0\" fill=\"").concat(tooltipStroke, "\">").concat(valuesBlock, "</text>\n        </svg>\n    </svg>");
 };
 /** Calculate the width and height of the tooltip based on the content array */
 var calcTooltipSize = function (valuesWithLabels, fontSize) {
     if (fontSize === void 0) { fontSize = 13; }
     var textLength = valuesWithLabels.reduce(function (prev, cur) { return (cur.length > prev ? cur.length : prev); }, 0);
     var width = textLength * 8 + 20;
-    var height = 17 * valuesWithLabels.length + 16;
+    var height = fontSize * 1.2 * valuesWithLabels.length + 16;
     return { width: width, height: height };
 };
 exports.calcTooltipSize = calcTooltipSize;

package/Charting/ChartModifiers/RolloverModifier.js

@@ -585,7 +585,7 @@ var RolloverModifier = /** @class */ (function (_super) {
         rsList.forEach(function (rs, index) {
             var hitTestInfo = _this.hitTestRenderableSeries(rs, _this.mousePoint);
             if (hitTestInfo) {
-                if (rs.type !== SeriesType_1.ESeriesType.StackedColumnSeries || hitTestInfo.isHit) {
+                if ((rs.type !== SeriesType_1.ESeriesType.StackedColumnSeries && _this.hitTestRadius === 0) || hitTestInfo.isHit) {
                     var isVisible = 0 <= hitTestInfo.yCoord && hitTestInfo.yCoord <= height;
                     if (isVisible) {
                         _this.absoluteXCoord = _this.isVerticalChart() ? hitTestInfo.yCoord : hitTestInfo.xCoord;
@@ -607,9 +607,13 @@ var RolloverModifier = /** @class */ (function (_super) {
                 }
             }
         });
-        var orderedTooltipArray = tooltipArray.sort(function (a, b) {
-            return a.yCoord > b.yCoord ? 1 : b.yCoord > a.yCoord ? -1 : 0;
-        });
+        var orderedTooltipArray;
+        if (this.isVerticalChart()) {
+            orderedTooltipArray = tooltipArray.sort(function (a, b) { return (a.xCoord > b.xCoord ? 1 : b.xCoord > a.xCoord ? -1 : 0); });
+        }
+        else {
+            orderedTooltipArray = tooltipArray.sort(function (a, b) { return (a.yCoord > b.yCoord ? 1 : b.yCoord > a.yCoord ? -1 : 0); });
+        }
         var tooltipPositions = this.CalculateTooltipPositions(orderedTooltipArray, this.allowTooltipOverlapping, exports.TOOLTIP_SPACING * DpiHelper_1.DpiHelper.PIXEL_RATIO, this.parentSurface.seriesViewRect, DpiHelper_1.DpiHelper.PIXEL_RATIO, this.isVerticalChart());
         tooltipPositions.forEach(function (el) {
             var rs = rsList[el.index];
@@ -756,6 +760,15 @@ exports.calcTooltipProps = calcTooltipProps;
 var calcTooltipPositions = function (tooltipArray, allowTooltipOverlapping, spacing, seriesViewRect, pixelRatio, isVerticalChart) {
     if (isVerticalChart === void 0) { isVerticalChart = false; }
     var positionProperties = (0, tooltip_1.getTooltipPositionProperties)(isVerticalChart);
+    // centering for vertical charts
+    if (isVerticalChart) {
+        tooltipArray.forEach(function (tooltip) {
+            var halfWidth = tooltip.width / 2 / pixelRatio;
+            if (tooltip.xCoord > halfWidth) {
+                tooltip[positionProperties.shiftPropertyName] = -(tooltip.width / 2) / pixelRatio;
+            }
+        });
+    }
     var hasOverlap = (0, tooltip_1.checkHasOverlap)(tooltipArray, spacing, pixelRatio, positionProperties);
     var length = tooltipArray.length;
     if (!allowTooltipOverlapping && length >= 2 && hasOverlap) {
@@ -764,12 +777,6 @@ var calcTooltipPositions = function (tooltipArray, allowTooltipOverlapping, spac
             tooltip[positionProperties.shiftPropertyName] = spreadMap_1.get(tooltip.index);
         });
     }
-    // centering for vertical charts without overlapping
-    if (isVerticalChart && !hasOverlap) {
-        tooltipArray.forEach(function (tooltip) {
-            return (tooltip[positionProperties.shiftPropertyName] = -(tooltip.width / 2) / pixelRatio);
-        });
-    }
     return tooltipArray;
 };
 exports.calcTooltipPositions = calcTooltipPositions;
@@ -791,6 +798,7 @@ var createAnnotations = function (rs, rolloverModifierProps, rolloverModifierPro
     if (!rolloverModifierProps.tooltip) {
         rolloverModifierProps.tooltipTitle = (_b = (_a = rolloverModifierProps.tooltipTitle) !== null && _a !== void 0 ? _a : rs.getDataSeriesName()) !== null && _b !== void 0 ? _b : "";
         rolloverModifierProps.tooltipColor = rolloverModifierProps.tooltipColor;
+        rolloverModifierProps.shadowColor = rs.parentSurface.themeProvider.shadowEffectColor;
         rolloverModifierProps.tooltip = new RolloverTooltipSvgAnnotation_1.RolloverTooltipSvgAnnotation(rolloverModifierProps, {
             seriesType: rs.type,
             placementDivId: placementDivId

package/Charting/ChartModifiers/constants.d.ts

@@ -29,5 +29,6 @@ export declare enum PROPERTY {
     X_COORDINATE_MODE = "X_COORDINATE_MODE",
     IS_DRAGGABLE = "IS_DRAGGABLE",
     LINE_ANNOTATIONS_OPTIONS = "LINE_ANNOTATIONS_OPTIONS",
-    LINE_SELECTION_COLOR = "LINE_SELECTION_COLOR"
+    LINE_SELECTION_COLOR = "LINE_SELECTION_COLOR",
+    TOOLTIP_SHADOW = "TOOLTIP_SHADOW"
 }

package/Charting/ChartModifiers/constants.js

@@ -34,4 +34,5 @@ var PROPERTY;
     PROPERTY["IS_DRAGGABLE"] = "IS_DRAGGABLE";
     PROPERTY["LINE_ANNOTATIONS_OPTIONS"] = "LINE_ANNOTATIONS_OPTIONS";
     PROPERTY["LINE_SELECTION_COLOR"] = "LINE_SELECTION_COLOR";
+    PROPERTY["TOOLTIP_SHADOW"] = "TOOLTIP_SHADOW";
 })(PROPERTY = exports.PROPERTY || (exports.PROPERTY = {}));

package/Charting/Model/ChartData/SeriesInfo.d.ts

@@ -35,6 +35,7 @@ export declare class SeriesInfo {
     point2yCoordinate: number;
     isHit: boolean;
     dataSeriesIndex: number;
+    distance: number;
     /**
      * When true the hit-test operation was within the first and the last DataSeries X-values
      */

package/Charting/Model/ChartData/SeriesInfo.js

@@ -30,6 +30,7 @@ var SeriesInfo = /** @class */ (function () {
         this.point2yCoordinate = hitTestInfo.point2yCoord;
         this.pointMetadata = hitTestInfo.metadata;
         this.point2metadata = hitTestInfo.point2metadata;
+        this.distance = hitTestInfo.distance;
         if (renderableSeries.type === SeriesType_1.ESeriesType.ColumnSeries) {
             this.fill = renderableSeries.fill;
         }

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

@@ -16,15 +16,46 @@ export interface ICustomAnnotationOptions extends ISvgAnnotationBaseOptions {
 export declare class CustomAnnotation extends SvgAnnotationBase {
     /** @inheritDoc */
     readonly type = EAnnotationType.SVGCustomAnnotation;
-    /**
-     * SVG dom element string provided by the user
-     */
-    svgStringProperty: string;
+    private svgStringProperty;
     /**
      * Creates an instance of the {@link CustomAnnotation}
      * @param options The {@link ICustomAnnotationOptions} which contain optional parameters
      */
     constructor(options?: ICustomAnnotationOptions);
+    /**
+     * SVG dom element string provided by the user
+     */
+    get svgString(): string;
+    /**
+     * SVG dom element string provided by the user
+     */
+    set svgString(value: string);
+    /** This is called to get the svg string to use. Override this to customise the svg string for each render */
+    getSvgString(annotation: CustomAnnotation): string;
+    /**
+     * This is called on the svg element immediately after it is created.  Use this to do adjustments or additions to it which require knowlege of its size.
+     * For instance, this method adds a bounding rectangle to the existing svg
+     * ```ts
+     * updateSvg(annotation: CustomAnnotation, svg: SVGSVGElement) {
+     *    const annotationRect = svg.getBoundingClientRect();
+     *    const padding = 5;
+     *    // Offset the existing element by the padding
+     *    (svg.firstChild as SVGElement).setAttribute("x", padding.toString());
+     *    (svg.firstChild as SVGElement).setAttribute("y", padding.toString());
+     *    const rectWidth = annotationRect.width + padding + padding;
+     *    const rectHeight = annotationRect.height + padding + padding;
+     *    const namespace = "http://www.w3.org/2000/svg";
+     *    const newRect = document.createElementNS(namespace, "rect");
+     *    newRect.setAttribute("x", "0");
+     *    newRect.setAttribute("y", "0");
+     *    newRect.setAttribute("width", `${rectWidth}`);
+     *    newRect.setAttribute("height", `${rectHeight}`);
+     *    newRect.setAttribute("fill", `red`);
+     *    return svg;
+     * }
+     * ```
+     */
+    updateSvg(annotation: CustomAnnotation, svg: SVGSVGElement): SVGSVGElement;
     /** @inheritDoc */
     toJSON(): {
         type: EAnnotationType;
@@ -32,6 +63,4 @@ export declare class CustomAnnotation extends SvgAnnotationBase {
     };
     /** @inheritDoc */
     protected create(xCalc: CoordinateCalculatorBase, yCalc: CoordinateCalculatorBase, xCoordSvgTrans: number, yCoordSvgTrans: number): void;
-    get svgString(): string;
-    set svgString(value: string);
 }

package/Charting/Visuals/Annotations/CustomAnnotation.js

@@ -37,11 +37,61 @@ var CustomAnnotation = /** @class */ (function (_super) {
         _this.svgStringProperty = (_a = options === null || options === void 0 ? void 0 : options.svgString) !== null && _a !== void 0 ? _a : undefined;
         return _this;
     }
+    Object.defineProperty(CustomAnnotation.prototype, "svgString", {
+        /**
+         * SVG dom element string provided by the user
+         */
+        get: function () {
+            return this.svgStringProperty;
+        },
+        /**
+         * SVG dom element string provided by the user
+         */
+        set: function (value) {
+            if (this.svgStringProperty !== value) {
+                this.clear();
+                this.svgStringProperty = value;
+                this.notifyPropertyChanged("svgString");
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /** This is called to get the svg string to use. Override this to customise the svg string for each render */
+    CustomAnnotation.prototype.getSvgString = function (annotation) {
+        return annotation.svgString;
+    };
+    /**
+     * This is called on the svg element immediately after it is created.  Use this to do adjustments or additions to it which require knowlege of its size.
+     * For instance, this method adds a bounding rectangle to the existing svg
+     * ```ts
+     * updateSvg(annotation: CustomAnnotation, svg: SVGSVGElement) {
+     *    const annotationRect = svg.getBoundingClientRect();
+     *    const padding = 5;
+     *    // Offset the existing element by the padding
+     *    (svg.firstChild as SVGElement).setAttribute("x", padding.toString());
+     *    (svg.firstChild as SVGElement).setAttribute("y", padding.toString());
+     *    const rectWidth = annotationRect.width + padding + padding;
+     *    const rectHeight = annotationRect.height + padding + padding;
+     *    const namespace = "http://www.w3.org/2000/svg";
+     *    const newRect = document.createElementNS(namespace, "rect");
+     *    newRect.setAttribute("x", "0");
+     *    newRect.setAttribute("y", "0");
+     *    newRect.setAttribute("width", `${rectWidth}`);
+     *    newRect.setAttribute("height", `${rectHeight}`);
+     *    newRect.setAttribute("fill", `red`);
+     *    return svg;
+     * }
+     * ```
+     */
+    CustomAnnotation.prototype.updateSvg = function (annotation, svg) {
+        return svg;
+    };
     /** @inheritDoc */
     CustomAnnotation.prototype.toJSON = function () {
         var json = _super.prototype.toJSON.call(this);
         var options = {
-            svgString: this.svgStringProperty
+            svgString: this.svgString
         };
         Object.assign(json.options, options);
         return json;
@@ -60,9 +110,10 @@ var CustomAnnotation = /** @class */ (function (_super) {
             this.prevX1Coordinate = this.getX1Coordinate(xCalc, yCalc);
             this.prevY1Coordinate = this.getY1Coordinate(xCalc, yCalc);
             if (this.svg) {
-                this.delete();
+                this.clear();
             }
-            this.setSvg(annotationHelpers_1.annotationHelpers.createSvg(this.svgStringProperty, this.svgRoot));
+            var svg = annotationHelpers_1.annotationHelpers.createSvg(this.getSvgString(this), this.svgRoot);
+            this.setSvg(this.updateSvg(this, svg));
             this.calcAndSetAnnotationBorders(xCalc, yCalc);
             this.updateAdornerInner();
             this.prevIsSelected = this.isSelected;
@@ -75,17 +126,6 @@ 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/NativeTextAnnotation.js

@@ -88,6 +88,7 @@ var NativeTextAnnotation = /** @class */ (function (_super) {
         _this.initialWidth = Math.abs(_this.x2 - _this.x1);
         _this.scaleOnResize = (_m = options === null || options === void 0 ? void 0 : options.scaleOnResize) !== null && _m !== void 0 ? _m : _this.scaleOnResize;
         return _this;
+        // this.fill = options?.fill ?? this.fillProperty;
     }
     Object.defineProperty(NativeTextAnnotation.prototype, "textColor", {
         /**
@@ -107,6 +108,21 @@ var NativeTextAnnotation = /** @class */ (function (_super) {
         configurable: true
     });
     Object.defineProperty(NativeTextAnnotation.prototype, "fontSize", {
+        // /**
+        //  * Gets the fill for the {@link NativeTextAnnotation}
+        //  * @remarks Acceptable values include RGB format e.g. ```#FF0000```, RGBA format e.g. ```#FF000077`` and RGBA format e.g. ```rgba(255,0,0,0.5)```
+        //  */
+        // public get fill(): string {
+        //     return this.fillProperty;
+        // }
+        // /**
+        //  * Sets the fill for the {@link NativeTextAnnotation}
+        //  * @remarks Acceptable values include RGB format e.g. ```#FF0000```, RGBA format e.g. ```#FF000077`` and RGBA format e.g. ```rgba(255,0,0,0.5)```
+        //  */
+        // public set fill(htmlColorCode: string) {
+        //     this.fillProperty = htmlColorCode;
+        //     this.notifyPropertyChanged(PROPERTY.FILL);
+        // }
         /**
          * Gets the fontSize for the {@link NativeTextAnnotation}
          */
@@ -291,10 +307,16 @@ var NativeTextAnnotation = /** @class */ (function (_super) {
         configurable: true
     });
     /** @inheritDoc */
-    NativeTextAnnotation.prototype.delete = function () { };
+    NativeTextAnnotation.prototype.delete = function () {
+        // this.fillBrushCache = deleteSafe(this.fillBrushCache);
+    };
     /** @inheritDoc */
     NativeTextAnnotation.prototype.onAttach = function (scs) {
         _super.prototype.onAttach.call(this, scs);
+        // if (!this.fillBrushCache) {
+        //     this.fillBrushCache = new BrushCache(scs.webAssemblyContext2D);
+        // }
+        // createBrushInCache(this.fillBrushCache, this.fill, this.opacity);
     };
     /** Calculate the center point for a rotation */
     NativeTextAnnotation.prototype.getRotationCenter = function (x, y, bounds) {
@@ -371,6 +393,14 @@ var NativeTextAnnotation = /** @class */ (function (_super) {
                 (textBounds.GetLineBounds(0).m_fHeight - textBounds.GetLineBounds(0).m_fOffsetY) *
                     (textBounds.GetLinesCount() - 1);
         }
+        // TODO use for text background when rect rotation is implemented
+        // const padding = Thickness.fromNumber(0);
+        // const x = x1 + viewRect.x + padding.left;
+        // const y = y1 + viewRect.y + padding.top;
+        // let borderX1 = x1;
+        // let borderY1 = y1 - textBounds.GetLineBounds(0).m_fHeight - padding.top - padding.bottom;
+        // let borderX2 = x1 + textBounds.m_fWidth + padding.left + padding.right;
+        // let borderY2 = borderY1 + textBounds.m_fHeight + padding.top;
         var x = x1 + viewRect.x;
         var y = y1 + viewRect.y;
         var borderX1 = x1;
@@ -403,6 +433,15 @@ var NativeTextAnnotation = /** @class */ (function (_super) {
             scaleChanged = true;
         }
         this.setAnnotationBorders(borderX1, borderX1 + (borderX2 - borderX1) * this.scale, borderY1, borderY1 + (borderY2 - borderY1) * this.scale);
+        // const strokePen: WebGlPen = undefined;
+        // const fillBrush = this.fill ? getWebGlBrushFromCache(this.fillBrushCache) : undefined;
+        // fillBrush?.setOpacity(this.opacity);
+        // const rect = Rect.createWithPoints(new Point(borderX1, borderY1), new Point(borderX2, borderY2));
+        // // Temporary HAX! drawRect is rubbish with large strokeThickness, whereas the columnDrawingProvider does a nice
+        // // outlined rectangle, but the code is ugly.  In 2.3 we will improve the native drawRect to do the outline properly.
+        // if (!IS_TEST_ENV) {
+        //     renderContext.drawRect(rect, viewRect, strokePen, fillBrush);
+        // }
         font.DrawStringAdvanced(text, colorNum, Math.round(x), Math.round(y), rotationVector, alignMode, spacing);
         if (scaleChanged) {
             font.SetScale(oldScale);
@@ -532,6 +571,7 @@ var NativeTextAnnotation = /** @class */ (function (_super) {
             fontFamily: this.fontFamily,
             fontSize: this.fontSize,
             textColor: this.textColor,
+            // fill: this.fill,
             rotation: this.rotation,
             text: this.text
         };
@@ -542,6 +582,13 @@ var NativeTextAnnotation = /** @class */ (function (_super) {
         var _a = this.getAnnotationBorders(true), x1 = _a.x1, x2 = _a.x2, y1 = _a.y1, y2 = _a.y2;
         return (0, pointUtil_1.testIsInBounds)(x, y, x1, y2, x2, y1);
     };
+    // protected notifyPropertyChanged(propertyName: string): void {
+    //     super.notifyPropertyChanged(propertyName);
+    //     const fillBrushRelatedProperties = [PROPERTY.FILL, PROPERTY.OPACITY];
+    //     if (this.fillBrushCache && fillBrushRelatedProperties.includes(propertyName as PROPERTY)) {
+    //         createBrushInCache(this.fillBrushCache, this.fill, this.opacity);
+    //     }
+    // }
     NativeTextAnnotation.prototype.updateAdornerInner = function () {
         this.deleteAdorner();
         if (this.isSelected) {

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

@@ -7,6 +7,7 @@ export declare class RolloverMarkerSvgAnnotation extends SvgAnnotationBase {
     readonly type = EAnnotationType.SVG;
     private tooltipProps;
     private previousMousePosition;
+    private currentColor;
     constructor(renderableSeriesProps: RolloverModifierRenderableSeriesProps);
     /** @inheritDoc */
     update(xCalc: CoordinateCalculatorBase, yCalc: CoordinateCalculatorBase, xCoordSvgTrans: number, yCoordSvgTrans: number): void;

package/Charting/Visuals/Annotations/RolloverMarkerSvgAnnotation.js

@@ -45,13 +45,17 @@ var RolloverMarkerSvgAnnotation = /** @class */ (function (_super) {
     };
     /** @inheritDoc */
     RolloverMarkerSvgAnnotation.prototype.create = function (xCalc, yCalc, xCoordSvgTrans, yCoordSvgTrans) {
-        if (this.svg) {
+        var _a = this.tooltipProps, tooltipColor = _a.tooltipColor, markerColor = _a.markerColor;
+        var color = markerColor !== null && markerColor !== void 0 ? markerColor : tooltipColor;
+        if (this.svg && this.currentColor !== color) {
             this.clear();
         }
-        var _a = this.tooltipProps, tooltipColor = _a.tooltipColor, markerColor = _a.markerColor;
-        var svgString = tooltipSvgTemplate(markerColor !== null && markerColor !== void 0 ? markerColor : tooltipColor);
-        var svgNode = annotationHelpers_1.annotationHelpers.createSvg(svgString, this.svgRoot);
-        this.setSvg(svgNode);
+        if (!this.svg) {
+            this.currentColor === color;
+            var svgString = tooltipSvgTemplate(color);
+            var svgNode = annotationHelpers_1.annotationHelpers.createSvg(svgString, this.svgRoot);
+            this.setSvg(svgNode);
+        }
     };
     return RolloverMarkerSvgAnnotation;
 }(SvgAnnotationBase_1.SvgAnnotationBase));

package/Charting/Visuals/Annotations/RolloverTooltipSvgAnnotation.js

@@ -23,6 +23,7 @@ var annotationHelpers_1 = require("./annotationHelpers");
 var constants_1 = require("./constants");
 var IAnnotation_1 = require("./IAnnotation");
 var SvgAnnotationBase_1 = require("./SvgAnnotationBase");
+var parseColor_1 = require("../../../utils/parseColor");
 // TODO: Rename to RolloverTooltipSvgAnnotation
 /**
  * A Tooltip Annotation which provides an SVG tooltip over the chart. Used by the {@link RolloverModifier}
@@ -238,7 +239,7 @@ var defaultTooltipTemplate = function (id, seriesInfo, rolloverTooltip) {
     var _a, _b, _c, _d, _e;
     var valuesBlock = "";
     var tooltipProps = rolloverTooltip.tooltipProps;
-    var tooltipTitle = tooltipProps.tooltipTitle, tooltipColor = tooltipProps.tooltipColor, tooltipTextColor = tooltipProps.tooltipTextColor, tooltipLabelX = tooltipProps.tooltipLabelX, tooltipLabelY = tooltipProps.tooltipLabelY;
+    var tooltipTitle = tooltipProps.tooltipTitle, tooltipColor = tooltipProps.tooltipColor, tooltipTextColor = tooltipProps.tooltipTextColor, tooltipLabelX = tooltipProps.tooltipLabelX, tooltipLabelY = tooltipProps.tooltipLabelY, shadowColor = tooltipProps.shadowColor;
     var tooltipDataTemplate = (_c = (_a = rolloverTooltip.tooltipProps.tooltipDataTemplate) !== null && _a !== void 0 ? _a : (_b = rolloverTooltip.tooltipProps.rolloverModifier) === null || _b === void 0 ? void 0 : _b.tooltipDataTemplate) !== null && _c !== void 0 ? _c : defaultTooltipDataTemplate;
     var valuesWithLabels = tooltipDataTemplate(seriesInfo, tooltipTitle, tooltipLabelX, tooltipLabelY);
     // tooltip width
@@ -249,7 +250,12 @@ var defaultTooltipTemplate = function (id, seriesInfo, rolloverTooltip) {
     valuesWithLabels.forEach(function (val, index) {
         valuesBlock += "<tspan x=\"8\" dy=\"1.2em\">".concat(val, "</tspan>");
     });
-    return "<svg class=\"scichart__rollover-tooltip\" width=\"".concat(width, "\" height=\"").concat(height, "\">\n        <defs>\n            <filter id=\"").concat(id, "\" x=\"0\" y=\"0\" width=\"200%\" height=\"200%\">\n                <feOffset result=\"offOut\" in=\"SourceAlpha\" dx=\"3\" dy=\"3\" />\n                <feGaussianBlur result=\"blurOut\" in=\"offOut\" stdDeviation=\"3\" />\n                <feBlend in=\"SourceGraphic\" in2=\"blurOut\" mode=\"normal\" />\n            </filter>\n        </defs>\n        <rect rx=\"4\" ry=\"4\" width=\"95%\" height=\"90%\" fill=\"").concat(tooltipColor, "\" filter=\"url(#").concat(id, ")\" />\n        <svg width=\"100%\">\n            <text x=\"8\" y=\"3\" font-size=\"13\" font-family=\"Verdana\" dy=\"0\" fill=\"").concat(tooltipTextColor, "\">").concat(valuesBlock, "</text>\n        </svg>\n    </svg>");
+    var blur = "<feGaussianBlur result=\"blurOut\" in=\"offOut\" stdDeviation=\"3\" />";
+    if (shadowColor !== undefined) {
+        var shadowRGBA = (0, parseColor_1.parseColorToTArgb)(shadowColor);
+        blur = "<feColorMatrix result=\"matrixOut\" in=\"offOut\" type=\"matrix\"\n        values=\"0 0 0 0 ".concat(shadowRGBA.red / 255, "\n                0 0 0 0 ").concat(shadowRGBA.green / 255, "\n                0 0 0 0 ").concat(shadowRGBA.blue / 255, "\n                0 0 0 ").concat(shadowRGBA.opacity / 255, " 0\" />\n        <feGaussianBlur result=\"blurOut\" in=\"matrixOut\" stdDeviation=\"3\" />");
+    }
+    return "<svg class=\"scichart__rollover-tooltip\" width=\"".concat(width, "\" height=\"").concat(height, "\">\n        <defs>\n            <filter id=\"").concat(id, "\" x=\"0\" y=\"0\" width=\"200%\" height=\"200%\">\n                <feOffset result=\"offOut\" in=\"SourceAlpha\" dx=\"3\" dy=\"3\" />\n                ").concat(blur, "\n                <feBlend in=\"SourceGraphic\" in2=\"blurOut\" mode=\"normal\" />\n            </filter>\n        </defs>\n        <rect rx=\"4\" ry=\"4\" width=\"90%\" height=\"90%\" fill=\"").concat(tooltipColor, "\" filter=\"url(#").concat(id, ")\" />\n        <svg width=\"100%\">\n            <text x=\"8\" y=\"3\" font-size=\"13\" font-family=\"Verdana\" dy=\"0\" fill=\"").concat(tooltipTextColor, "\">").concat(valuesBlock, "</text>\n        </svg>\n    </svg>");
 };
 /** @ignore */
 var calcTooltipWidth = function (textLength, fontSize) {