scichart 2.1.2301 → 2.2.2351

package/Builder/buildModifiers.d.ts

@@ -11,6 +11,7 @@ import { ISeriesSelectionModifierOptions } from "../Charting/ChartModifiers/Seri
 import { IXAxisDragModifierOptions } from "../Charting/ChartModifiers/XAxisDragModifier";
 import { IYAxisDragModifierOptions } from "../Charting/ChartModifiers/YAxisDragModifier";
 import { IZoomExtentsModifierOptions } from "../Charting/ChartModifiers/ZoomExtentsModifier";
+import { IZoomPanModifierOptions } from "../Charting/ChartModifiers/ZoomPanModifier";
 import { EChart2DModifierType } from "../types/ChartModifierType";
 /** Definition of a 2d chart modifier, comprising a {@link EChart2DModifierType} and the relevant options */
 export declare type TModifierDefinition = {
@@ -48,7 +49,7 @@ export declare type TModifierDefinition = {
     options?: IZoomExtentsModifierOptions;
 } | {
     type: EChart2DModifierType.ZoomPan;
-    options?: IChartModifierBaseOptions;
+    options?: IZoomPanModifierOptions;
 } | {
     type: EChart2DModifierType.OverviewRangeSelection;
     options?: IRangeSelectionModifierOptions;

package/Charting/ChartModifiers/CursorModifier.d.ts

@@ -33,6 +33,7 @@ export interface ICursorModifierOptions extends IChartModifierBaseOptions {
     tooltipLegendOffsetX?: number;
     tooltipLegendOffsetY?: number;
     tooltipDataTemplate?: TCursorTooltipDataTemplate | string;
+    placementDivId?: string;
 }
 /**
  * The CursorModifier provides tooltip and cursor behavior on a 2D {@link SciChartSurface}
@@ -117,6 +118,7 @@ export declare class CursorModifier extends ChartModifierBase2D implements IIncl
     private crosshairStrokeProperty;
     private tooltipDataTemplateProperty?;
     private includedSeriesMap;
+    private placementDivId;
     /**
      * Creates an instance of the CursorModifier
      *
@@ -194,6 +196,9 @@ export declare class CursorModifier extends ChartModifierBase2D implements IIncl
     getMousePosition(): EMousePosition;
     /** @inheritDoc */
     toJSON(): {
+        /**
+         * Gets or sets the xAxis label text color as an HTML Color code
+         */
         type: string;
         options: Required<Omit<IChartModifierBaseOptions, never>>;
     };

package/Charting/ChartModifiers/CursorModifier.js

@@ -51,7 +51,7 @@ var CursorModifier = /** @class */ (function (_super) {
      * @param options Optional parameters {@link ICursorModifierOptions} used to configure the modifier
      */
     function CursorModifier(options) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
         var _this = _super.call(this, options) || this;
         _this.type = ChartModifierType_1.EChart2DModifierType.Cursor;
         _this.tooltipSvgTemplate = defaultTooltipTemplate;
@@ -135,6 +135,7 @@ var CursorModifier = /** @class */ (function (_super) {
         _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.placementDivId = (_q = options === null || options === void 0 ? void 0 : options.placementDivId) !== null && _q !== void 0 ? _q : _this.placementDivId;
         if (options === null || options === void 0 ? void 0 : options.tooltipLegendTemplate) {
             if (typeof options.tooltipLegendTemplate === "string") {
                 _this.typeMap.set("tooltipLegendTemplate", options.tooltipLegendTemplate);
@@ -143,9 +144,9 @@ var CursorModifier = /** @class */ (function (_super) {
             }
         }
         _this.tooltipLegendTemplate =
-            (_q = options === null || options === void 0 ? void 0 : options.tooltipLegendTemplate) !== null && _q !== void 0 ? _q : _this.tooltipLegendTemplate;
-        _this.tooltipLegendOffsetX = (_r = options === null || options === void 0 ? void 0 : options.tooltipLegendOffsetX) !== null && _r !== void 0 ? _r : _this.tooltipLegendOffsetX;
-        _this.tooltipLegendOffsetY = (_s = options === null || options === void 0 ? void 0 : options.tooltipLegendOffsetY) !== null && _s !== void 0 ? _s : _this.tooltipLegendOffsetY;
+            (_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;
         if (options === null || options === void 0 ? void 0 : options.tooltipDataTemplate) {
             if (typeof options.tooltipDataTemplate === "string") {
                 _this.typeMap.set("tooltipDataTemplate", options.tooltipDataTemplate);
@@ -154,7 +155,7 @@ var CursorModifier = /** @class */ (function (_super) {
             }
         }
         _this.tooltipDataTemplateProperty =
-            (_t = options === null || options === void 0 ? void 0 : options.tooltipDataTemplate) !== null && _t !== void 0 ? _t : _this.tooltipDataTemplateProperty;
+            (_u = options === null || options === void 0 ? void 0 : options.tooltipDataTemplate) !== null && _u !== void 0 ? _u : _this.tooltipDataTemplateProperty;
         return _this;
     }
     /**
@@ -188,7 +189,8 @@ var CursorModifier = /** @class */ (function (_super) {
             tooltipLegendOffsetX: this.tooltipLegendOffsetX,
             tooltipLegendOffsetY: this.tooltipLegendOffsetY,
             xAxisId: this.xAxisId,
-            yAxisId: this.yAxisId
+            yAxisId: this.yAxisId,
+            placementDivId: this.placementDivId
         });
         this.parentSurface.modifierAnnotations.add(this.xLineAnnotation, this.yLineAnnotation, this.tooltipAnnotation);
     };
@@ -386,6 +388,9 @@ var CursorModifier = /** @class */ (function (_super) {
             this.xLineAnnotation.isHidden = true;
             this.yLineAnnotation.isHidden = true;
             this.tooltipAnnotation.isHidden = true;
+            if (this.placementDivId) {
+                this.tooltipAnnotation.delete();
+            }
             return;
         }
         var translatedMousePoint = (0, translate_1.translateFromCanvasToSeriesViewRect)(this.mousePoint, this.parentSurface.seriesViewRect);
@@ -400,18 +405,18 @@ var CursorModifier = /** @class */ (function (_super) {
             this.xLineAnnotation.y1 = 0;
             this.yLineAnnotation.x1 = 0;
             if (this.isVerticalChart()) {
-                this.xLineAnnotation.y2 = this.parentSurface.seriesViewRect.right;
+                this.xLineAnnotation.y2 = (0, translate_1.translateToNotScaled)(this.parentSurface.seriesViewRect.right);
                 this.xLineAnnotation.x1 = y;
                 this.xLineAnnotation.x2 = y;
-                this.yLineAnnotation.x2 = this.parentSurface.seriesViewRect.bottom;
+                this.yLineAnnotation.x2 = (0, translate_1.translateToNotScaled)(this.parentSurface.seriesViewRect.bottom);
                 this.yLineAnnotation.y1 = x;
                 this.yLineAnnotation.y2 = x;
             }
             else {
-                this.xLineAnnotation.y2 = this.parentSurface.seriesViewRect.bottom;
+                this.xLineAnnotation.y2 = (0, translate_1.translateToNotScaled)(this.parentSurface.seriesViewRect.bottom);
                 this.xLineAnnotation.x1 = x;
                 this.xLineAnnotation.x2 = x;
-                this.yLineAnnotation.x2 = this.parentSurface.seriesViewRect.right;
+                this.yLineAnnotation.x2 = (0, translate_1.translateToNotScaled)(this.parentSurface.seriesViewRect.right);
                 this.yLineAnnotation.y1 = y;
                 this.yLineAnnotation.y2 = y;
             }

package/Charting/ChartModifiers/LegendModifier.d.ts

@@ -1,3 +1,4 @@
+import { EventHandler } from "../../Core/EventHandler";
 import { IIncludeSeries } from "../../Core/IIncludeSeries";
 import { EChart2DModifierType } from "../../types/ChartModifierType";
 import { IThemeProvider } from "../Themes/IThemeProvider";
@@ -37,7 +38,26 @@ export interface ILegendModifierOptions extends IChartModifierBaseOptions {
      * The parent div element Id or reference, the Legend will be appended to this element
      */
     placementDivId?: string | HTMLDivElement;
+    /**
+     * Callback when a legend item checkbox is checked or unchecked (by default, this corresponds to {@link IRenderableSeries.isVisible}
+     * @param series
+     * @param isChecked
+     */
+    isCheckedChangedCallback?: (series: IRenderableSeries, isChecked: boolean) => void;
 }
+/**
+ * Type args for the {@link LegendModifier.isCheckedChanged} callback
+ */
+export declare type TCheckedChangedArgs = {
+    /**
+     * The series which was checked or unchecked
+     */
+    series: IRenderableSeries;
+    /**
+     * Whether the corresponding legend item is checked or not (by default, this corresponds to {@link IRenderableSeries.isVisible})
+     */
+    isChecked: boolean;
+};
 /**
  * The LegendModifier provides interactive legend behavior on a 2D {@link SciChartSurface}
  * within SciChart - High Performance {@link https://www.scichart.com/javascript-chart-features | JavaScript Charts}
@@ -57,6 +77,10 @@ export declare class LegendModifier extends ChartModifierBase2D implements IIncl
      * Gets the {@link SciChartLegend} control used to render the legend
      */
     sciChartLegend: SciChartLegend;
+    /**
+     * An event handler raised when a {@link SciChartLegend} row checkbox is checked or unchecked
+     */
+    readonly isCheckedChanged: EventHandler<TCheckedChangedArgs>;
     private includedSeriesMap;
     /**
      * Creates an instance of the LegendModifier
@@ -86,6 +110,13 @@ export declare class LegendModifier extends ChartModifierBase2D implements IIncl
     };
     /** @inheritDoc */
     delete(): void;
+    /**
+     * Callback called from inner {@link SciChartLegend} when a checkbox is checked or unchecked
+     * @param series
+     * @param isChecked
+     * @protected
+     */
+    protected legendItemCheckedChanged(series: IRenderableSeries, isChecked: boolean): void;
     /**
      * Test if the series is included or excluded, by default it is included
      * @param series

package/Charting/ChartModifiers/LegendModifier.js

@@ -16,6 +16,7 @@ var __extends = (this && this.__extends) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LegendModifier = void 0;
+var EventHandler_1 = require("../../Core/EventHandler");
 var ChartModifierType_1 = require("../../types/ChartModifierType");
 var SciChartLegend_1 = require("../Visuals/Legend/SciChartLegend");
 var ChartModifierBase2D_1 = require("./ChartModifierBase2D");
@@ -42,7 +43,12 @@ var LegendModifier = /** @class */ (function (_super) {
         var _a, _b, _c, _d, _e, _f, _g;
         var _this = _super.call(this, options) || this;
         _this.type = ChartModifierType_1.EChart2DModifierType.Legend;
+        /**
+         * An event handler raised when a {@link SciChartLegend} row checkbox is checked or unchecked
+         */
+        _this.isCheckedChanged = new EventHandler_1.EventHandler();
         _this.includedSeriesMap = new Map();
+        _this.legendItemCheckedChanged = _this.legendItemCheckedChanged.bind(_this);
         _this.sciChartLegend = new SciChartLegend_1.SciChartLegend();
         _this.sciChartLegend.orientation = (_a = options === null || options === void 0 ? void 0 : options.orientation) !== null && _a !== void 0 ? _a : _this.sciChartLegend.orientation;
         _this.sciChartLegend.showLegend = (_b = options === null || options === void 0 ? void 0 : options.showLegend) !== null && _b !== void 0 ? _b : _this.sciChartLegend.showLegend;
@@ -51,6 +57,12 @@ var LegendModifier = /** @class */ (function (_super) {
         _this.sciChartLegend.placement = (_e = options === null || options === void 0 ? void 0 : options.placement) !== null && _e !== void 0 ? _e : _this.sciChartLegend.placement;
         _this.sciChartLegend.margin = (_f = options === null || options === void 0 ? void 0 : options.margin) !== null && _f !== void 0 ? _f : _this.sciChartLegend.margin;
         _this.sciChartLegend.placementDivId = (_g = options === null || options === void 0 ? void 0 : options.placementDivId) !== null && _g !== void 0 ? _g : _this.sciChartLegend.placementDivId;
+        _this.sciChartLegend.legendItemCheckedChangedCallback = _this.legendItemCheckedChanged;
+        if (options === null || options === void 0 ? void 0 : options.isCheckedChangedCallback) {
+            _this.isCheckedChanged.subscribe(function (arg) {
+                return options.isCheckedChangedCallback(arg.series, arg.isChecked);
+            });
+        }
         return _this;
     }
     /** @inheritDoc */
@@ -141,6 +153,16 @@ var LegendModifier = /** @class */ (function (_super) {
         _super.prototype.delete.call(this);
         this.sciChartLegend.delete();
     };
+    /**
+     * Callback called from inner {@link SciChartLegend} when a checkbox is checked or unchecked
+     * @param series
+     * @param isChecked
+     * @protected
+     */
+    LegendModifier.prototype.legendItemCheckedChanged = function (series, isChecked) {
+        var _a;
+        (_a = this.isCheckedChanged) === null || _a === void 0 ? void 0 : _a.raiseEvent({ series: series, isChecked: isChecked });
+    };
     /**
      * Test if the series is included or excluded, by default it is included
      * @param series

package/Charting/ChartModifiers/RolloverModifier.d.ts

@@ -84,6 +84,7 @@ export interface IRolloverModifierOptions extends IChartModifierBaseOptions {
     showTooltip?: boolean;
     allowTooltipOverlapping?: boolean;
     snapToDataPoint?: boolean;
+    placementDivId?: string;
 }
 /**
  * The RolloverModifier provides tooltip and cursor behavior on a 2D {@link SciChartSurface}
@@ -125,6 +126,7 @@ export declare class RolloverModifier extends ChartModifierBase2D implements IIn
     private showTooltipProperty;
     private allowTooltipOverlappingProperty;
     private includedSeriesMap;
+    private placementDivIdProperty;
     /**
      * Creates an instance of the RolloverModifier
      * @param options Optional parameters {@link IRolloverModifierOptions} used to configure the modifier
@@ -222,6 +224,14 @@ export declare class RolloverModifier extends ChartModifierBase2D implements IIn
      */
     private testIsIncludedSeries;
     private getSeriesInfos;
+    /**
+     * 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);
 }
 /**
  * @ignore

package/Charting/ChartModifiers/RolloverModifier.js

@@ -72,7 +72,7 @@ var RolloverModifier = /** @class */ (function (_super) {
      * @param options Optional parameters {@link IRolloverModifierOptions} used to configure the modifier
      */
     function RolloverModifier(options) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
         var _this = _super.call(this, options) || this;
         _this.type = ChartModifierType_1.EChart2DModifierType.Rollover;
         /**
@@ -94,11 +94,12 @@ var RolloverModifier = /** @class */ (function (_super) {
         _this.allowTooltipOverlappingProperty = false;
         _this.includedSeriesMap = new Map();
         _this.hitTestRenderableSeries = _this.hitTestRenderableSeries.bind(_this);
+        _this.placementDivIdProperty = (_a = options === null || options === void 0 ? void 0 : options.placementDivId) !== null && _a !== void 0 ? _a : _this.placementDivIdProperty;
         _this.rolloverLineAnnotation = new LineAnnotation_1.LineAnnotation({
             xCoordinateMode: AnnotationBase_1.ECoordinateMode.Pixel,
             yCoordinateMode: AnnotationBase_1.ECoordinateMode.Pixel,
-            strokeThickness: (_a = options === null || options === void 0 ? void 0 : options.rolloverLineStrokeThickness) !== null && _a !== void 0 ? _a : 2,
-            stroke: (_b = options === null || options === void 0 ? void 0 : options.rolloverLineStroke) !== null && _b !== void 0 ? _b : SciChartSurfaceBase_1.SciChartSurfaceBase.DEFAULT_THEME.cursorLineBrush,
+            strokeThickness: (_b = options === null || options === void 0 ? void 0 : options.rolloverLineStrokeThickness) !== null && _b !== void 0 ? _b : 2,
+            stroke: (_c = options === null || options === void 0 ? void 0 : options.rolloverLineStroke) !== null && _c !== void 0 ? _c : SciChartSurfaceBase_1.SciChartSurfaceBase.DEFAULT_THEME.cursorLineBrush,
             isHidden: true,
             xAxisId: _this.xAxisId,
             yAxisId: _this.yAxisId
@@ -111,9 +112,9 @@ var RolloverModifier = /** @class */ (function (_super) {
             }
         }
         _this.tooltipLegendTemplate =
-            (_c = options === null || options === void 0 ? void 0 : options.tooltipLegendTemplate) !== null && _c !== void 0 ? _c : _this.tooltipLegendTemplate;
-        _this.tooltipLegendOffsetX = (_d = options === null || options === void 0 ? void 0 : options.tooltipLegendOffsetX) !== null && _d !== void 0 ? _d : _this.tooltipLegendOffsetX;
-        _this.tooltipLegendOffsetY = (_e = options === null || options === void 0 ? void 0 : options.tooltipLegendOffsetY) !== null && _e !== void 0 ? _e : _this.tooltipLegendOffsetY;
+            (_d = options === null || options === void 0 ? void 0 : options.tooltipLegendTemplate) !== null && _d !== void 0 ? _d : _this.tooltipLegendTemplate;
+        _this.tooltipLegendOffsetX = (_e = options === null || options === void 0 ? void 0 : options.tooltipLegendOffsetX) !== null && _e !== void 0 ? _e : _this.tooltipLegendOffsetX;
+        _this.tooltipLegendOffsetY = (_f = options === null || options === void 0 ? void 0 : options.tooltipLegendOffsetY) !== null && _f !== void 0 ? _f : _this.tooltipLegendOffsetY;
         if (options === null || options === void 0 ? void 0 : options.tooltipDataTemplate) {
             if (typeof options.tooltipDataTemplate === "string") {
                 _this.typeMap.set("tooltipDataTemplate", options.tooltipDataTemplate);
@@ -122,9 +123,9 @@ var RolloverModifier = /** @class */ (function (_super) {
             }
         }
         _this.tooltipDataTemplateProperty =
-            (_f = options === null || options === void 0 ? void 0 : options.tooltipDataTemplate) !== null && _f !== void 0 ? _f : _this.tooltipDataTemplateProperty;
-        _this.showRolloverLineProperty = (_g = options === null || options === void 0 ? void 0 : options.showRolloverLine) !== null && _g !== void 0 ? _g : _this.showRolloverLineProperty;
-        _this.showTooltipProperty = (_h = options === null || options === void 0 ? void 0 : options.showTooltip) !== null && _h !== void 0 ? _h : _this.showTooltipProperty;
+            (_g = options === null || options === void 0 ? void 0 : options.tooltipDataTemplate) !== null && _g !== void 0 ? _g : _this.tooltipDataTemplateProperty;
+        _this.showRolloverLineProperty = (_h = options === null || options === void 0 ? void 0 : options.showRolloverLine) !== null && _h !== void 0 ? _h : _this.showRolloverLineProperty;
+        _this.showTooltipProperty = (_j = options === null || options === void 0 ? void 0 : options.showTooltip) !== null && _j !== void 0 ? _j : _this.showTooltipProperty;
         _this.legendAnnotation = new RolloverLegendSvgAnnotation_1.RolloverLegendSvgAnnotation({
             tooltipLegendTemplate: _this.tooltipLegendTemplate,
             tooltipLegendOffsetX: _this.tooltipLegendOffsetX,
@@ -132,8 +133,8 @@ var RolloverModifier = /** @class */ (function (_super) {
             xAxisId: _this.xAxisId,
             yAxisId: _this.yAxisId
         });
-        _this.allowTooltipOverlappingProperty = (_j = options === null || options === void 0 ? void 0 : options.allowTooltipOverlapping) !== null && _j !== void 0 ? _j : _this.allowTooltipOverlappingProperty;
-        _this.snapToDataPoint = (_k = options === null || options === void 0 ? void 0 : options.snapToDataPoint) !== null && _k !== void 0 ? _k : _this.snapToDataPoint;
+        _this.allowTooltipOverlappingProperty = (_k = options === null || options === void 0 ? void 0 : options.allowTooltipOverlapping) !== null && _k !== void 0 ? _k : _this.allowTooltipOverlappingProperty;
+        _this.snapToDataPoint = (_l = options === null || options === void 0 ? void 0 : options.snapToDataPoint) !== null && _l !== void 0 ? _l : _this.snapToDataPoint;
         return _this;
     }
     /**
@@ -416,10 +417,13 @@ var RolloverModifier = /** @class */ (function (_super) {
      * @param rs
      */
     RolloverModifier.prototype.addSeriesAnnotationsToParentSurface = function (rs) {
-        if (!this.parentSurface)
+        if (!this.parentSurface ||
+            rs.type === SeriesType_1.ESeriesType.StackedMountainCollection ||
+            rs.type === SeriesType_1.ESeriesType.StackedColumnCollection) {
             return;
+        }
         rs.rolloverModifierProps.rolloverModifier = this;
-        createAnnotations(rs);
+        createAnnotations(rs, this.placementDivIdProperty);
         this.parentSurface.modifierAnnotations.add(rs.rolloverModifierProps.marker);
         this.parentSurface.modifierAnnotations.add(rs.rolloverModifierProps.tooltip);
         if (rs.type === SeriesType_1.ESeriesType.BandSeries) {
@@ -494,11 +498,16 @@ var RolloverModifier = /** @class */ (function (_super) {
         var _this = this;
         var rsList = this.getIncludedRenderableSeries();
         rsList.forEach(function (rs) {
+            rs.rolloverModifierProps.marker.suspendInvalidate();
+            rs.rolloverModifierProps.tooltip.suspendInvalidate();
             rs.rolloverModifierProps.marker.isHidden = true;
             rs.rolloverModifierProps.tooltip.isHidden = true;
             rs.rolloverModifierProps.tooltip.x1 = undefined;
             rs.rolloverModifierProps.tooltip.y1 = undefined;
+            // TODO should be more general than looking at series type
             if (rs.type === SeriesType_1.ESeriesType.BandSeries) {
+                rs.rolloverModifierProps1.marker.suspendInvalidate();
+                rs.rolloverModifierProps1.tooltip.suspendInvalidate();
                 rs.rolloverModifierProps1.marker.isHidden = true;
                 rs.rolloverModifierProps1.tooltip.isHidden = true;
                 rs.rolloverModifierProps1.tooltip.x1 = undefined;
@@ -506,6 +515,14 @@ var RolloverModifier = /** @class */ (function (_super) {
             }
         });
         if (this.mousePosition !== EMousePosition.SeriesArea) {
+            rsList.forEach(function (rs) {
+                rs.rolloverModifierProps.marker.resumeInvalidate();
+                rs.rolloverModifierProps.tooltip.resumeInvalidate();
+                if (rs.type === SeriesType_1.ESeriesType.BandSeries) {
+                    rs.rolloverModifierProps1.marker.resumeInvalidate();
+                    rs.rolloverModifierProps1.tooltip.resumeInvalidate();
+                }
+            });
             return;
         }
         var tooltipArray = [];
@@ -545,10 +562,18 @@ var RolloverModifier = /** @class */ (function (_super) {
             var showTooltip = _this.showTooltip && el.seriesInfo.isHit;
             var showMarker = el.seriesInfo.isHit;
             if (el.isY1) {
-                updateRolloverModifierProps(rs.rolloverModifierProps1, rs, el, showTooltip, showMarker);
+                updateRolloverModifierProps(rs.rolloverModifierProps1, rs, el, showTooltip, showMarker, _this.placementDivId);
             }
             else {
-                updateRolloverModifierProps(rs.rolloverModifierProps, rs, el, showTooltip, showMarker);
+                updateRolloverModifierProps(rs.rolloverModifierProps, rs, el, showTooltip, showMarker, _this.placementDivId);
+            }
+        });
+        rsList.forEach(function (rs) {
+            rs.rolloverModifierProps.marker.resumeInvalidate();
+            rs.rolloverModifierProps.tooltip.resumeInvalidate();
+            if (rs.type === SeriesType_1.ESeriesType.BandSeries) {
+                rs.rolloverModifierProps1.marker.resumeInvalidate();
+                rs.rolloverModifierProps1.tooltip.resumeInvalidate();
             }
         });
     };
@@ -572,6 +597,30 @@ var RolloverModifier = /** @class */ (function (_super) {
         })
             .filter(function (rs) { return rs !== undefined; });
     };
+    Object.defineProperty(RolloverModifier.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) {
+            var _this = this;
+            var _a;
+            if (this.placementDivIdProperty !== value) {
+                this.placementDivIdProperty = value;
+                (_a = this.parentSurface) === null || _a === void 0 ? void 0 : _a.renderableSeries.asArray().forEach(function (rs) {
+                    rs.rolloverModifierProps.tooltip.placementDivId = _this.placementDivIdProperty;
+                    rs.rolloverModifierProps1.tooltip.placementDivId = _this.placementDivIdProperty;
+                });
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
     return RolloverModifier;
 }(ChartModifierBase2D_1.ChartModifierBase2D));
 exports.RolloverModifier = RolloverModifier;
@@ -674,7 +723,7 @@ exports.calcTooltipPositions = calcTooltipPositions;
  * @description Creates MarkerAnnotation and TooltipAnnotation and assigns to rolloverSeries properties
  * @param rs RenderableSeries
  */
-var createAnnotations = function (rs) {
+var createAnnotations = function (rs, placementDivId) {
     var _a, _b, _c, _d, _e, _f;
     if (!rs.rolloverModifierProps.marker) {
         rs.rolloverModifierProps.marker = new RolloverMarkerSvgAnnotation_1.RolloverMarkerSvgAnnotation(rs.rolloverModifierProps);
@@ -688,7 +737,8 @@ var createAnnotations = function (rs) {
         rs.rolloverModifierProps.tooltipTitle = (_b = (_a = rs.rolloverModifierProps.tooltipTitle) !== null && _a !== void 0 ? _a : rs.getDataSeriesName()) !== null && _b !== void 0 ? _b : "";
         rs.rolloverModifierProps.tooltipColor = (_c = rs.rolloverModifierProps.tooltipColor) !== null && _c !== void 0 ? _c : rs.stroke;
         rs.rolloverModifierProps.tooltip = new RolloverTooltipSvgAnnotation_1.RolloverTooltipSvgAnnotation(rs.rolloverModifierProps, {
-            seriesType: rs.type
+            seriesType: rs.type,
+            placementDivId: placementDivId
         });
         // Rollover tooltips for multiple Y-Axes are not supported for stacked series
         if (!rs.isStacked) {
@@ -707,14 +757,16 @@ var createAnnotations = function (rs) {
             bandRs.rolloverModifierProps1.tooltipTitle =
                 (_e = (_d = bandRs.rolloverModifierProps1.tooltipTitle) !== null && _d !== void 0 ? _d : bandRs.getDataSeriesName()) !== null && _e !== void 0 ? _e : "";
             bandRs.rolloverModifierProps1.tooltipColor = (_f = bandRs.rolloverModifierProps1.tooltipColor) !== null && _f !== void 0 ? _f : bandRs.strokeY1;
-            bandRs.rolloverModifierProps1.tooltip = new RolloverTooltipSvgAnnotation_1.RolloverTooltipSvgAnnotation(bandRs.rolloverModifierProps1);
+            bandRs.rolloverModifierProps1.tooltip = new RolloverTooltipSvgAnnotation_1.RolloverTooltipSvgAnnotation(bandRs.rolloverModifierProps1, {
+                placementDivId: placementDivId
+            });
             bandRs.rolloverModifierProps1.tooltip.xAxisId = bandRs.xAxisId;
             bandRs.rolloverModifierProps1.tooltip.yAxisId = bandRs.yAxisId;
         }
     }
 };
 /** @ignore */
-var updateRolloverModifierProps = function (rolloverRSProps, rs, tooltipProps, showTooltip, showMarker) {
+var updateRolloverModifierProps = function (rolloverRSProps, rs, tooltipProps, showTooltip, showMarker, placementDivId) {
     rolloverRSProps.tooltip.seriesInfo = tooltipProps.seriesInfo;
     if (tooltipProps.isY1) {
         rolloverRSProps.tooltip.seriesInfo.isFirstSeries = false;
@@ -732,4 +784,9 @@ var updateRolloverModifierProps = function (rolloverRSProps, rs, tooltipProps, s
         rolloverRSProps.tooltip.xCoordShift = tooltipProps.xCoordShift;
         rolloverRSProps.tooltip.yCoordShift = tooltipProps.yCoordShift;
     }
+    else {
+        if (placementDivId) {
+            rolloverRSProps.tooltip.delete();
+        }
+    }
 };

package/Charting/LayoutManager/LayoutManager.js

@@ -100,7 +100,12 @@ var LayoutManager = /** @class */ (function () {
             var bottomStart = topEnd + (remainingHeight < MIN_SERIES_AREA_SIZE ? MIN_SERIES_AREA_SIZE : remainingHeight);
             var bottomEnd = bottomStart + this.chartLayoutState.bottomOuterAreaSize;
             // layout center parts
-            this.layoutChartCenter(leftEnd, topEnd, rightStart, bottomStart);
+            if (this.sciChartSurface.drawSeriesBehindAxis) {
+                this.layoutChartCenter(leftStart, topStart, rightEnd, bottomEnd);
+            }
+            else {
+                this.layoutChartCenter(leftEnd, topEnd, rightStart, bottomStart);
+            }
             // layout outer axes
             this.leftOuterAxesLayoutStrategy.layoutAxes(leftStart, topEnd, leftEnd - this.sciChartSurface.leftViewportBorder, bottomStart, this.axesGroupedByLayoutStrategy.leftOuterAxes);
             this.rightOuterAxesLayoutStrategy.layoutAxes(rightStart + this.sciChartSurface.rightViewportBorder, topEnd, rightEnd, bottomStart, this.axesGroupedByLayoutStrategy.rightOuterAxes);

package/Charting/Model/BaseHeatmapDataSeries.d.ts

@@ -91,6 +91,7 @@ export declare abstract class BaseHeatmapDataSeries implements IHeatmapSeries {
     private hasNaNsProperty;
     private lastZMin;
     private lastZMax;
+    private lastFillValuesOutOfRange;
     private metadataGeneratorProperty;
     private changeCountProperty;
     /**

package/Charting/Model/BaseHeatmapDataSeries.js

@@ -49,6 +49,7 @@ var BaseHeatmapDataSeries = /** @class */ (function () {
         this.hasNaNsProperty = false;
         this.lastZMin = -1;
         this.lastZMax = -1;
+        this.lastFillValuesOutOfRange = undefined;
         this.metadataGeneratorProperty = undefined;
         this.changeCountProperty = 0;
         this.webAssemblyContext = webAssemblyContext;
@@ -409,10 +410,12 @@ var BaseHeatmapDataSeries = /** @class */ (function () {
         if (this.hasDataChangesProperty ||
             size !== this.normalizedVector.size() ||
             colorMap.minimum !== this.lastZMin ||
-            colorMap.maximum !== this.lastZMax) {
+            colorMap.maximum !== this.lastZMax ||
+            fillValuesOutOfRange !== this.lastFillValuesOutOfRange) {
             this.recreateNormalizedVector(colorMap.minimum, colorMap.maximum, fillValuesOutOfRange);
             this.lastZMin = colorMap.minimum;
             this.lastZMax = colorMap.maximum;
+            this.lastFillValuesOutOfRange = fillValuesOutOfRange;
             this.hasDataChangesProperty = false;
         }
         return this.normalizedVector;

package/Charting/Model/PointSeries/BasePointSeriesWrapped.d.ts

@@ -9,6 +9,6 @@ export declare class BasePointSeriesWrapped implements IPointSeries {
     readonly yValues: SCRTDoubleVector;
     protected dataSeries: IDataSeries;
     protected indexesProperty: SCRTDoubleVector;
-    constructor(dataSeries: IDataSeries);
+    constructor(dataSeries: IDataSeries, yValues?: SCRTDoubleVector);
     get indexes(): SCRTDoubleVector;
 }

package/Charting/Model/PointSeries/BasePointSeriesWrapped.js

@@ -2,11 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BasePointSeriesWrapped = void 0;
 var BasePointSeriesWrapped = /** @class */ (function () {
-    function BasePointSeriesWrapped(dataSeries) {
+    function BasePointSeriesWrapped(dataSeries, yValues) {
         this.dataSeries = dataSeries;
         this.count = dataSeries.count();
         this.xValues = this.dataSeries.getNativeXValues();
-        this.yValues = this.dataSeries.getNativeYValues();
+        this.yValues = yValues !== null && yValues !== void 0 ? yValues : this.dataSeries.getNativeYValues();
     }
     Object.defineProperty(BasePointSeriesWrapped.prototype, "indexes", {
         get: function () {

package/Charting/Model/PointSeries/XyyPointSeriesWrapped.d.ts

@@ -4,5 +4,5 @@ import { BasePointSeriesWrapped } from "./BasePointSeriesWrapped";
 import { IXyyPointSeries } from "./IPointSeries";
 export declare class XyyPointSeriesWrapped extends BasePointSeriesWrapped implements IXyyPointSeries {
     readonly y1Values: SCRTDoubleVector;
-    constructor(dataSeries: XyyDataSeries);
+    constructor(dataSeries: XyyDataSeries, yValues?: SCRTDoubleVector, y1Values?: SCRTDoubleVector);
 }

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/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();
         }
     };