scichart 2.1.2294 → 2.2.2378

package/Charting/Model/PointSeries/XyyPointSeriesWrapped.js

@@ -19,9 +19,9 @@ exports.XyyPointSeriesWrapped = void 0;
 var BasePointSeriesWrapped_1 = require("./BasePointSeriesWrapped");
 var XyyPointSeriesWrapped = /** @class */ (function (_super) {
     __extends(XyyPointSeriesWrapped, _super);
-    function XyyPointSeriesWrapped(dataSeries) {
-        var _this = _super.call(this, dataSeries) || this;
-        _this.y1Values = dataSeries.getNativeY1Values();
+    function XyyPointSeriesWrapped(dataSeries, yValues, y1Values) {
+        var _this = _super.call(this, dataSeries, yValues) || this;
+        _this.y1Values = y1Values !== null && y1Values !== void 0 ? y1Values : dataSeries.getNativeY1Values();
         return _this;
     }
     return XyyPointSeriesWrapped;

package/Charting/Numerics/CoordinateCalculators/LogarithmicCoordinateCalculator.d.ts

@@ -1,8 +1,8 @@
+import { NumberRange } from "../../../Core/NumberRange";
 import { TSciChart } from "../../../types/TSciChart";
 import { TSciChart3D } from "../../../types/TSciChart3D";
-import { CoordinateCalculatorBase } from "./CoordinateCalculatorBase";
 import { EXyDirection } from "../../../types/XyDirection";
-import { NumberRange } from "../../../Core/NumberRange";
+import { CoordinateCalculatorBase } from "./CoordinateCalculatorBase";
 /**
  * Provides an implementation of Numeric {@link CoordinateCalculatorBase | Coordinate Calculator} which transforms
  * numeric data-values to pixel coordinates using logarithmic scaling and vice versa.

package/Charting/Numerics/CoordinateCalculators/LogarithmicCoordinateCalculator.js

@@ -16,9 +16,9 @@ var __extends = (this && this.__extends) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LogarithmicCoordinateCalculator = void 0;
-var CoordinateCalculatorBase_1 = require("./CoordinateCalculatorBase");
-var XyDirection_1 = require("../../../types/XyDirection");
 var NumberRange_1 = require("../../../Core/NumberRange");
+var XyDirection_1 = require("../../../types/XyDirection");
+var CoordinateCalculatorBase_1 = require("./CoordinateCalculatorBase");
 /**
  * Provides an implementation of Numeric {@link CoordinateCalculatorBase | Coordinate Calculator} which transforms
  * numeric data-values to pixel coordinates using logarithmic scaling and vice versa.
@@ -73,18 +73,27 @@ var LogarithmicCoordinateCalculator = /** @class */ (function (_super) {
         configurable: true
     });
     LogarithmicCoordinateCalculator.prototype.translateBy = function (pixels, range) {
+        if (pixels === 0) {
+            return range;
+        }
         var zeroPoint = Math.abs(this.nativeCalculator.GetDataValue(0));
         var toScrollPoint = Math.abs(this.nativeCalculator.GetDataValue(pixels));
         var numberUtil = this.webAssemblyContext.NumberUtil;
+        var isNegative = range.min < 0;
+        if (isNegative) {
+            range = new NumberRange_1.NumberRange(Math.abs(range.max), Math.abs(range.min));
+        }
         var expDelta = numberUtil.Log(toScrollPoint, this.logBase) - numberUtil.Log(zeroPoint, this.logBase);
         if (this.hasFlippedCoordinates)
             expDelta = -expDelta;
         var expMin = numberUtil.Log(range.min, this.logBase);
         var expMax = numberUtil.Log(range.max, this.logBase);
-        var _mult = this.visibleMin < 0 ? -1.0 : 1.0;
-        var newMin = _mult * Math.pow(this.logBase, expMin + expDelta);
-        var newMax = _mult * Math.pow(this.logBase, expMax + expDelta);
-        return new NumberRange_1.NumberRange(newMin, newMax);
+        var newMin = Math.pow(this.logBase, expMin + expDelta);
+        var newMax = Math.pow(this.logBase, expMax + expDelta);
+        if (isNegative)
+            return new NumberRange_1.NumberRange(-newMax, -newMin);
+        else
+            return new NumberRange_1.NumberRange(newMin, newMax);
     };
     LogarithmicCoordinateCalculator.prototype.zoomTranslateBy = function (minFraction, maxFraction, inputRange) {
         return inputRange.growByLog(new NumberRange_1.NumberRange(minFraction, maxFraction), this.logBase);

package/Charting/Services/SciChartRenderer.d.ts

@@ -31,6 +31,7 @@ export declare class SciChartRenderer {
     private drawRenderContextAnnotations;
     private drawSvgAnnotations;
     private validate;
+    private prevRect;
     private updateSvgCanvasSize;
     private prepareAxesRenderData;
     private prepareSeriesRenderData;

package/Charting/Services/SciChartRenderer.js

@@ -223,6 +223,12 @@ var SciChartRenderer = /** @class */ (function () {
         // Convert seriesViewRect back to device pixels
         // e.g. at Retina display canvas size may be 400x300 but seriesViewRect size would be 800x600
         var viewRectInDevicePixels = new Rect_1.Rect(seriesViewRect.x / DpiHelper_1.DpiHelper.PIXEL_RATIO, seriesViewRect.y / DpiHelper_1.DpiHelper.PIXEL_RATIO, seriesViewRect.width / DpiHelper_1.DpiHelper.PIXEL_RATIO, seriesViewRect.height / DpiHelper_1.DpiHelper.PIXEL_RATIO);
+        if (!this.prevRect) {
+            this.prevRect = viewRectInDevicePixels;
+        }
+        else if (Rect_1.Rect.isEqual(this.prevRect, viewRectInDevicePixels)) {
+            return;
+        }
         var svgRootElement = this.sciChartSurface.domSvgContainer;
         if (svgRootElement) {
             svgRootElement.style.marginLeft = "".concat(viewRectInDevicePixels.x, "px");

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

@@ -224,10 +224,10 @@ export declare abstract class AnnotationBase implements IAnnotation, IAdornerPro
         y: number;
     };
     protected typeMap: Map<string, string>;
+    protected isHiddenProperty: boolean;
     private opacityProperty;
     private annotationLayerProperty;
     private isEditableProperty;
-    protected isHiddenProperty: boolean;
     private parentSurfaceProperty;
     private x1Property;
     private x2Property;
@@ -240,6 +240,7 @@ export declare abstract class AnnotationBase implements IAnnotation, IAdornerPro
     private isSelectedProperty;
     private resizeDirectionsProperty;
     private svgAdornerRootProperty;
+    private invalidateState;
     /** @inheritDoc */
     get annotationLayer(): EAnnotationLayer;
     /** @inheritDoc */
@@ -325,6 +326,10 @@ export declare abstract class AnnotationBase implements IAnnotation, IAdornerPro
      * @inheritDoc
      */
     onDpiChanged(args: TDpiChangedEventArgs): void;
+    /** Internal use. Captures the state of isHidden,x1,y1 and prevents invalidateParent being called on change to these properties */
+    suspendInvalidate(): void;
+    /** Internal use. If isHidden,x1,y1 have change since suspendInvalidate was called, call invalidateParent */
+    resumeInvalidate(): void;
     toJSON(): {
         type: EAnnotationType;
         options: Required<Omit<IAnnotationBaseOptions, never>>;

package/Charting/Visuals/Annotations/AnnotationBase.js

@@ -70,9 +70,9 @@ var AnnotationBase = /** @class */ (function () {
             y2: 0
         };
         this.typeMap = new Map();
+        this.isHiddenProperty = false;
         this.annotationLayerProperty = IAnnotation_1.EAnnotationLayer.AboveChart;
         this.isEditableProperty = false;
-        this.isHiddenProperty = false;
         this.xAxisIdProperty = AxisCore_1.AxisCore.DEFAULT_AXIS_ID;
         this.yAxisIdProperty = AxisCore_1.AxisCore.DEFAULT_AXIS_ID;
         this.xCoordinateModeProperty = ECoordinateMode.DataValue;
@@ -425,6 +425,27 @@ var AnnotationBase = /** @class */ (function () {
      * @inheritDoc
      */
     AnnotationBase.prototype.onDpiChanged = function (args) { };
+    /** Internal use. Captures the state of isHidden,x1,y1 and prevents invalidateParent being called on change to these properties */
+    AnnotationBase.prototype.suspendInvalidate = function () {
+        this.invalidateState = {
+            isHidden: this.isHidden,
+            x1: this.x1,
+            y1: this.y1
+        };
+    };
+    /** Internal use. If isHidden,x1,y1 have change since suspendInvalidate was called, call invalidateParent */
+    AnnotationBase.prototype.resumeInvalidate = function () {
+        if (!this.invalidateState)
+            return;
+        if (this.isHidden !== this.invalidateState.isHidden ||
+            this.x1 !== this.invalidateState.x1 ||
+            this.y1 !== this.invalidateState.y1) {
+            if (this.invalidateParentCallback) {
+                this.invalidateParentCallback();
+            }
+        }
+        this.invalidateState = undefined;
+    };
     AnnotationBase.prototype.toJSON = function () {
         var options = {
             id: this.id,
@@ -497,7 +518,7 @@ var AnnotationBase = /** @class */ (function () {
      * @param propertyName The name of the property which has changed
      */
     AnnotationBase.prototype.notifyPropertyChanged = function (propertyName) {
-        if (this.invalidateParentCallback) {
+        if (this.invalidateParentCallback && !this.invalidateState) {
             this.invalidateParentCallback();
         }
     };

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;
@@ -144,6 +193,14 @@ var defaultTooltipDataTemplate = function (seriesInfo, tooltipTitle, tooltipLabe
         valuesWithLabels.push("Lowest: ".concat(ohlcSeriesInfo.formattedLowValue));
         valuesWithLabels.push("Close: ".concat(ohlcSeriesInfo.formattedCloseValue));
     }
+    else if (seriesInfo.dataSeriesType === IDataSeries_1.EDataSeriesType.Hlc) {
+        var hlcSeriesInfo = seriesInfo;
+        if (tooltipLabelX) {
+            valuesWithLabels.push("".concat(tooltipLabelX, ": ").concat(hlcSeriesInfo.formattedXValue));
+        }
+        valuesWithLabels.push("High: ".concat(hlcSeriesInfo.formattedHighValue));
+        valuesWithLabels.push("Low: ".concat(hlcSeriesInfo.formattedLowValue));
+    }
     else if (seriesInfo.dataSeriesType === IDataSeries_1.EDataSeriesType.Xyy) {
         // Band Series
         var xyySeriesInfo = seriesInfo;

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