scichart 2.0.2186 → 2.0.2228

package/Charting/ChartModifiers/CursorModifier.d.ts

@@ -1,6 +1,7 @@
 import { IIncludeSeries } from "../../Core/IIncludeSeries";
 import { Point } from "../../Core/Point";
 import { EChart2DModifierType } from "../../types/ChartModifierType";
+import { EMousePosition } from "../../types/MousePosition";
 import { SeriesInfo } from "../Model/ChartData/SeriesInfo";
 import { IThemeProvider } from "../Themes/IThemeProvider";
 import { CursorTooltipSvgAnnotation } from "../Visuals/Annotations/CursorTooltipSvgAnnotation";
@@ -117,7 +118,10 @@ export declare class CursorModifier extends ChartModifierBase2D implements IIncl
     private tooltipDataTemplateProperty?;
     private includedSeriesMap;
     /**
-     * Creates an instance of the RolloverModifier
+     * Creates an instance of the CursorModifier
+     *
+     * If number of renderable series is more then 10 and showTooltip enabled consider passing {@link TCursorTooltipDataTemplate} or {@link TCursorTooltipSvgTemplate} to reduce the output for the tooltip
+     *
      * @param options Optional parameters {@link ICursorModifierOptions} used to configure the modifier
      */
     constructor(options?: ICursorModifierOptions);
@@ -173,6 +177,9 @@ export declare class CursorModifier extends ChartModifierBase2D implements IIncl
      * @inheritDoc
      */
     getIncludedRenderableSeries(): IRenderableSeries[];
+    /**
+     * Gets or sets the tooltipDataTemplate, which allows to customize content for the tooltip
+     */
     get tooltipDataTemplate(): TCursorTooltipDataTemplate;
     set tooltipDataTemplate(value: TCursorTooltipDataTemplate);
     /**
@@ -181,6 +188,11 @@ export declare class CursorModifier extends ChartModifierBase2D implements IIncl
      * @param mousePoint
      */
     hitTestRenderableSeries(rs: IRenderableSeries, mousePoint: Point): HitTestInfo;
+    /**
+     * Returns current mouse position
+     */
+    getMousePosition(): EMousePosition;
+    /** @inheritDoc */
     toJSON(): {
         type: string;
         options: Required<Omit<IChartModifierBaseOptions, never>>;

package/Charting/ChartModifiers/CursorModifier.js

@@ -44,7 +44,10 @@ var constants_1 = require("./constants");
 var CursorModifier = /** @class */ (function (_super) {
     __extends(CursorModifier, _super);
     /**
-     * Creates an instance of the RolloverModifier
+     * Creates an instance of the CursorModifier
+     *
+     * If number of renderable series is more then 10 and showTooltip enabled consider passing {@link TCursorTooltipDataTemplate} or {@link TCursorTooltipSvgTemplate} to reduce the output for the tooltip
+     *
      * @param options Optional parameters {@link ICursorModifierOptions} used to configure the modifier
      */
     function CursorModifier(options) {
@@ -297,6 +300,9 @@ var CursorModifier = /** @class */ (function (_super) {
         return allSeries;
     };
     Object.defineProperty(CursorModifier.prototype, "tooltipDataTemplate", {
+        /**
+         * Gets or sets the tooltipDataTemplate, which allows to customize content for the tooltip
+         */
         get: function () {
             return this.tooltipDataTemplateProperty;
         },
@@ -318,6 +324,13 @@ var CursorModifier = /** @class */ (function (_super) {
         }
         return rs.hitTestProvider.hitTestXSlice(mousePoint.x, mousePoint.y);
     };
+    /**
+     * Returns current mouse position
+     */
+    CursorModifier.prototype.getMousePosition = function () {
+        return this.mousePosition;
+    };
+    /** @inheritDoc */
     CursorModifier.prototype.toJSON = function () {
         var json = _super.prototype.toJSON.call(this);
         var options = {

package/Charting/ChartModifiers/RolloverModifier.d.ts

@@ -51,6 +51,24 @@ export declare type TTooltipProps = {
     height: number;
     seriesInfo: SeriesInfo;
 };
+/**
+ * @ignore
+ * Defines the MousePosition enum constants, used by the {@link RolloverModifier}
+ */
+declare enum EMousePosition {
+    /**
+     * The mouse position is outside the main canvas
+     */
+    OutOfCanvas = "OutOfCanvas",
+    /**
+     * The mouse position is in the Axis area
+     */
+    AxisArea = "AxisArea",
+    /**
+     * The mouse position is in the Series area
+     */
+    SeriesArea = "SeriesArea"
+}
 /**
  * Optional parameters used to configure a {@link RolloverModifier} at construct time
  */
@@ -173,10 +191,16 @@ export declare class RolloverModifier extends ChartModifierBase2D implements IIn
      * @param mousePoint
      */
     hitTestRenderableSeries(rs: IRenderableSeries, mousePoint: Point): HitTestInfo;
+    /**
+     * Returns current mouse position
+     */
+    getMousePosition(): EMousePosition;
+    /** @inheritDoc */
     toJSON(): {
         type: string;
         options: Required<Omit<IChartModifierBaseOptions, never>>;
     };
+    /** @inheritDoc */
     protected notifyPropertyChanged(propertyName: string): void;
     private isVerticalChart;
     private removeSeriesAnnotationsFromParentSurface;
@@ -224,3 +248,4 @@ export declare const calcTooltipProps: (index: number, rs: IRenderableSeries, ro
  * @param pixelRatio
  */
 export declare const calcTooltipPositions: (tooltipArray: TTooltipProps[], allowTooltipOverlapping: boolean, tooltipPaddingTop: number, seriesViewRect: Rect, pixelRatio: number) => TTooltipProps[];
+export {};

package/Charting/ChartModifiers/RolloverModifier.js

@@ -346,6 +346,13 @@ var RolloverModifier = /** @class */ (function (_super) {
         }
         return rs.hitTestProvider.hitTestXSlice(mousePoint.x, mousePoint.y);
     };
+    /**
+     * Returns current mouse position
+     */
+    RolloverModifier.prototype.getMousePosition = function () {
+        return this.mousePosition;
+    };
+    /** @inheritDoc */
     RolloverModifier.prototype.toJSON = function () {
         var json = _super.prototype.toJSON.call(this);
         var options = {
@@ -361,6 +368,7 @@ var RolloverModifier = /** @class */ (function (_super) {
         Object.assign(json.options, options);
         return json;
     };
+    /** @inheritDoc */
     RolloverModifier.prototype.notifyPropertyChanged = function (propertyName) {
         _super.prototype.notifyPropertyChanged.call(this, propertyName);
         if (propertyName === constants_1.PROPERTY.X_AXIS_ID) {

package/Charting/Drawing/BrushCache.d.ts

@@ -10,14 +10,18 @@ export declare class BrushCache extends BaseCache<WebGlBrush> {
     private opacity;
     private fillLinearGradient;
     private canvasTexture;
+    private textureHeightRatio;
+    private textureWidthRatio;
     get value(): WebGlBrush;
     /**
      * Creates or fetches a new brush with the specified params
      * @param fill
      * @param opacity
+     * @param textureHeightRatio
+     * @param textureWidthRatio
      * @param fillLinearGradient
      */
-    create(fill: string, opacity: number, fillLinearGradient?: GradientParams): WebGlBrush;
+    create(fill: string, opacity: number, textureHeightRatio?: number, textureWidthRatio?: number, fillLinearGradient?: GradientParams): WebGlBrush;
     invalidateCache(): void;
     reset(): void;
     delete(): void;
@@ -43,7 +47,9 @@ export declare const getScrtBrushFromCache: (cache: BrushCache) => SCRTBrush;
  * @param cache The object that will store a brush
  * @param fill The HTML Color code
  * @param opacity The opacity factor.
+ * @param textureHeightRatio The height ratio of the main canvas to the WebGl canvas.
+ * @param textureWidthRatio The width ratio of the main canvas to the WebGl canvas.
  * @param fillGradientLinear The gradient params.
  * @returns new or existing instance of {@link SCRTBrush}}
  */
-export declare const createBrushInCache: (cache: BrushCache, fill: string, opacity: number, fillGradientLinear?: GradientParams) => SCRTBrush;
+export declare const createBrushInCache: (cache: BrushCache, fill: string, opacity: number, textureHeightRatio?: number, textureWidthRatio?: number, fillGradientLinear?: GradientParams) => SCRTBrush;

package/Charting/Drawing/BrushCache.js

@@ -35,7 +35,7 @@ var BrushCache = /** @class */ (function (_super) {
     Object.defineProperty(BrushCache.prototype, "value", {
         get: function () {
             if (!this.cachedEntity && (this.fill || this.fillLinearGradient)) {
-                this.cachedEntity = this.create(this.fill, this.opacity, this.fillLinearGradient);
+                this.cachedEntity = this.create(this.fill, this.opacity, this.textureHeightRatio, this.textureWidthRatio, this.fillLinearGradient);
             }
             return this.cachedEntity;
         },
@@ -46,18 +46,24 @@ var BrushCache = /** @class */ (function (_super) {
      * Creates or fetches a new brush with the specified params
      * @param fill
      * @param opacity
+     * @param textureHeightRatio
+     * @param textureWidthRatio
      * @param fillLinearGradient
      */
-    BrushCache.prototype.create = function (fill, opacity, fillLinearGradient) {
+    BrushCache.prototype.create = function (fill, opacity, textureHeightRatio, textureWidthRatio, fillLinearGradient) {
         if (this.cachedEntity &&
             fill === this.fill &&
             opacity === this.opacity &&
+            textureHeightRatio === this.textureHeightRatio &&
+            textureWidthRatio === this.textureWidthRatio &&
             fillLinearGradient === this.fillLinearGradient) {
             return this.cachedEntity;
         }
         this.invalidateCache();
         this.fill = fill;
         this.opacity = opacity;
+        this.textureHeightRatio = textureHeightRatio;
+        this.textureWidthRatio = textureWidthRatio;
         this.fillLinearGradient = fillLinearGradient;
         var brush = fillLinearGradient ? this.createGradientBrush() : this.createSolidBrush(fill, opacity);
         return (this.cachedEntity = new WebGlBrush_1.WebGlBrush(brush));
@@ -89,10 +95,10 @@ var BrushCache = /** @class */ (function (_super) {
         this.canvasTexture.clear();
         var ctx = this.canvasTexture.getContext();
         // BEGIN: Drawing gradient rectangle on canvas2D
-        var x1 = convertRelativeToAbsolute(startPoint.x, TEXTURE_SIZE);
-        var y1 = convertRelativeToAbsolute(startPoint.y, TEXTURE_SIZE);
-        var x2 = convertRelativeToAbsolute(endPoint.x, TEXTURE_SIZE);
-        var y2 = convertRelativeToAbsolute(endPoint.y, TEXTURE_SIZE);
+        var x1 = convertRelativeToAbsolute(startPoint.x, TEXTURE_SIZE * this.textureWidthRatio);
+        var y1 = convertRelativeToAbsolute(startPoint.y, TEXTURE_SIZE * this.textureHeightRatio);
+        var x2 = convertRelativeToAbsolute(endPoint.x, TEXTURE_SIZE * this.textureWidthRatio);
+        var y2 = convertRelativeToAbsolute(endPoint.y, TEXTURE_SIZE * this.textureHeightRatio);
         var gradient = ctx.createLinearGradient(x1, y1, x2, y2);
         gradientStops.forEach(function (el) {
             gradient.addColorStop(el.offset, el.color);
@@ -133,12 +139,14 @@ exports.getScrtBrushFromCache = getScrtBrushFromCache;
  * @param cache The object that will store a brush
  * @param fill The HTML Color code
  * @param opacity The opacity factor.
+ * @param textureHeightRatio The height ratio of the main canvas to the WebGl canvas.
+ * @param textureWidthRatio The width ratio of the main canvas to the WebGl canvas.
  * @param fillGradientLinear The gradient params.
  * @returns new or existing instance of {@link SCRTBrush}}
  */
-var createBrushInCache = function (cache, fill, opacity, fillGradientLinear) {
+var createBrushInCache = function (cache, fill, opacity, textureHeightRatio, textureWidthRatio, fillGradientLinear) {
     Guard_1.Guard.notNull(cache, "brushCache");
-    var brush = cache.create(fill, opacity, fillGradientLinear);
+    var brush = cache.create(fill, opacity, textureHeightRatio, textureWidthRatio, fillGradientLinear);
     return brush.scrtBrush;
 };
 exports.createBrushInCache = createBrushInCache;

package/Charting/LayoutManager/BaseAxisLayoutStrategy.d.ts

@@ -36,4 +36,6 @@ export declare abstract class BaseAxisLayoutStrategy {
     protected layoutAxesFromTopToBottom(left: number, top: number, right: number, bottom: number, axes: AxisBase2D[]): void;
     protected layoutAxesFromLeftToRight(left: number, top: number, right: number, bottom: number, axes: AxisBase2D[]): void;
     protected layoutAxesFromRightToLeft(left: number, top: number, right: number, bottom: number, axes: AxisBase2D[]): void;
+    protected calculateTotalAxisHeight(axis: AxisBase2D, totalAxisAreaHeight: number): number;
+    protected calculateTotalAxisWidth(axis: AxisBase2D, totalAxisAreaHeight: number): number;
 }

package/Charting/LayoutManager/BaseAxisLayoutStrategy.js

@@ -56,6 +56,39 @@ var BaseAxisLayoutStrategy = /** @class */ (function () {
             (0, AxisLayoutHelpers_1.layoutAxisParts)(axis, _this.layoutAxisPartsStrategy);
         });
     };
+    BaseAxisLayoutStrategy.prototype.calculateTotalAxisHeight = function (axis, totalAxisAreaHeight) {
+        return (parseSize(axis.stackedAxisLength, totalAxisAreaHeight) +
+            axis.axisLayoutState.additionalBottomSize +
+            axis.axisLayoutState.additionalTopSize);
+    };
+    BaseAxisLayoutStrategy.prototype.calculateTotalAxisWidth = function (axis, totalAxisAreaHeight) {
+        return (parseSize(axis.stackedAxisLength, totalAxisAreaHeight) +
+            axis.axisLayoutState.additionalRightSize +
+            axis.axisLayoutState.additionalLeftSize);
+    };
     return BaseAxisLayoutStrategy;
 }());
 exports.BaseAxisLayoutStrategy = BaseAxisLayoutStrategy;
+var parseSize = function (value, containerSize) {
+    if (typeof value === "number") {
+        if (value < 0) {
+            throw new Error("stackedAxisLength must be a positive value!");
+        }
+        return value;
+    }
+    if (value.includes("%")) {
+        return parsePc(value, containerSize);
+    }
+    var parsedValue = parseFloat(value);
+    if (!isNaN(parsedValue)) {
+        return parsedValue;
+    }
+    throw new Error("stackedAxisLength must be a number or a percentage");
+};
+var parsePc = function (value, containerSize) {
+    var parsedPercentageValue = parseFloat(value);
+    if (parsedPercentageValue < 0 || parsedPercentageValue > 100) {
+        throw new Error("stackedAxisLength percentage must be from 0 to 100");
+    }
+    return Math.round((containerSize * parsedPercentageValue) / 10) / 10;
+};

package/Charting/LayoutManager/BottomAlignedOuterHorizontallyStackedAxisLayoutStrategy.js

@@ -50,14 +50,30 @@ var BottomAlignedOuterHorizontallyStackedAxisLayoutStrategy = /** @class */ (fun
     BottomAlignedOuterHorizontallyStackedAxisLayoutStrategy.prototype.layoutAxes = function (left, top, right, bottom, axes) {
         var _this = this;
         var totalAxisAreaWidth = right - left;
-        var singleAxisReservedWidth = totalAxisAreaWidth / axes.length;
         var firstAxis = axes[0];
+        var lastAxis = axes[axes.length - 1];
+        var axesWithDefinedLength = axes.filter(function (axis) { return axis.stackedAxisLength; });
+        var spaceWithoutBorders = axes.reduce(function (acc, axis) { return acc - axis.axisLayoutState.additionalBottomSize - axis.axisLayoutState.additionalTopSize; }, totalAxisAreaWidth +
+            (firstAxis === null || firstAxis === void 0 ? void 0 : firstAxis.axisLayoutState.additionalLeftSize) +
+            (lastAxis === null || lastAxis === void 0 ? void 0 : lastAxis.axisLayoutState.additionalRightSize));
+        var totalDefinedAxesLength = axesWithDefinedLength.reduce(function (acc, axis) { return acc + _this.calculateTotalAxisWidth(axis, spaceWithoutBorders); }, 0);
+        var availableSpaceForAxes = totalAxisAreaWidth +
+            (firstAxis === null || firstAxis === void 0 ? void 0 : firstAxis.axisLayoutState.additionalLeftSize) +
+            (lastAxis === null || lastAxis === void 0 ? void 0 : lastAxis.axisLayoutState.additionalRightSize) -
+            totalDefinedAxesLength;
+        if (availableSpaceForAxes < 0) {
+            throw new Error("Bottom stacked axes with defined size total ".concat(totalDefinedAxesLength, " pixels which is ").concat(-availableSpaceForAxes, " more than the space available"));
+        }
+        var defaultAxisReservedHeight = availableSpaceForAxes / (axes.length - axesWithDefinedLength.length);
         var leftOffset = left - (firstAxis === null || firstAxis === void 0 ? void 0 : firstAxis.axisLayoutState.additionalLeftSize);
         axes.forEach(function (axis) {
             var _a = axis.axisLayoutState, axisSize = _a.axisSize, additionalLeftSize = _a.additionalLeftSize, additionalRightSize = _a.additionalRightSize, additionalTopSize = _a.additionalTopSize;
             var topOffset = top + additionalTopSize;
             var bottomOffset = topOffset + axisSize;
-            var rightOffset = leftOffset + singleAxisReservedWidth - additionalRightSize;
+            var axisReservedHeight = axis.stackedAxisLength
+                ? _this.calculateTotalAxisWidth(axis, spaceWithoutBorders)
+                : defaultAxisReservedHeight;
+            var rightOffset = leftOffset + axisReservedHeight - additionalRightSize;
             leftOffset += additionalLeftSize;
             axis.offset = leftOffset - left;
             axis.axisLength = rightOffset - leftOffset;

package/Charting/LayoutManager/LeftAlignedOuterVerticallyStackedAxisLayoutStrategy.js

@@ -49,15 +49,32 @@ var LeftAlignedOuterVerticallyStackedAxisLayoutStrategy = /** @class */ (functio
     };
     LeftAlignedOuterVerticallyStackedAxisLayoutStrategy.prototype.layoutAxes = function (left, top, right, bottom, axes) {
         var _this = this;
+        // doesn't include top border of the first and bottom border of the last axis
         var totalAxisAreaHeight = bottom - top;
-        var singleAxisReservedHeight = totalAxisAreaHeight / axes.length;
         var firstAxis = axes[0];
+        var lastAxis = axes[axes.length - 1];
+        var axesWithDefinedLength = axes.filter(function (axis) { return axis.stackedAxisLength; });
+        var spaceWithoutBorders = axes.reduce(function (acc, axis) { return acc - axis.axisLayoutState.additionalBottomSize - axis.axisLayoutState.additionalTopSize; }, totalAxisAreaHeight +
+            (firstAxis === null || firstAxis === void 0 ? void 0 : firstAxis.axisLayoutState.additionalTopSize) +
+            (lastAxis === null || lastAxis === void 0 ? void 0 : lastAxis.axisLayoutState.additionalBottomSize));
+        var totalDefinedAxesLength = axesWithDefinedLength.reduce(function (acc, axis) { return acc + _this.calculateTotalAxisHeight(axis, spaceWithoutBorders); }, 0);
+        var availableSpaceForAxes = totalAxisAreaHeight +
+            (firstAxis === null || firstAxis === void 0 ? void 0 : firstAxis.axisLayoutState.additionalTopSize) +
+            (lastAxis === null || lastAxis === void 0 ? void 0 : lastAxis.axisLayoutState.additionalBottomSize) -
+            totalDefinedAxesLength;
+        if (availableSpaceForAxes < 0) {
+            throw new Error("Left stacked axes with defined size total ".concat(totalDefinedAxesLength, " pixels which is ").concat(-availableSpaceForAxes, " more than the space available"));
+        }
+        var defaultAxisReservedHeight = availableSpaceForAxes / (axes.length - axesWithDefinedLength.length);
         var topOffset = top - (firstAxis === null || firstAxis === void 0 ? void 0 : firstAxis.axisLayoutState.additionalTopSize);
         axes.forEach(function (axis) {
             var _a = axis.axisLayoutState, axisSize = _a.axisSize, additionalRightSize = _a.additionalRightSize, additionalBottomSize = _a.additionalBottomSize, additionalTopSize = _a.additionalTopSize;
             var rightOffset = right - additionalRightSize;
             var leftOffset = rightOffset - axisSize;
-            var bottomOffset = topOffset + singleAxisReservedHeight - additionalBottomSize;
+            var axisReservedHeight = axis.stackedAxisLength
+                ? _this.calculateTotalAxisHeight(axis, spaceWithoutBorders)
+                : defaultAxisReservedHeight;
+            var bottomOffset = topOffset + axisReservedHeight - additionalBottomSize;
             topOffset += additionalTopSize;
             axis.offset = topOffset - top;
             axis.axisLength = bottomOffset - topOffset;

package/Charting/LayoutManager/RightAlignedOuterVerticallyStackedAxisLayoutStrategy.js

@@ -50,14 +50,30 @@ var RightAlignedOuterVerticallyStackedAxisLayoutStrategy = /** @class */ (functi
     RightAlignedOuterVerticallyStackedAxisLayoutStrategy.prototype.layoutAxes = function (left, top, right, bottom, axes) {
         var _this = this;
         var totalAxisAreaHeight = bottom - top;
-        var singleAxisReservedHeight = totalAxisAreaHeight / axes.length;
         var firstAxis = axes[0];
+        var lastAxis = axes[axes.length - 1];
+        var axesWithDefinedLength = axes.filter(function (axis) { return axis.stackedAxisLength; });
+        var spaceWithoutBorders = axes.reduce(function (acc, axis) { return acc - axis.axisLayoutState.additionalBottomSize - axis.axisLayoutState.additionalTopSize; }, totalAxisAreaHeight +
+            (firstAxis === null || firstAxis === void 0 ? void 0 : firstAxis.axisLayoutState.additionalTopSize) +
+            (lastAxis === null || lastAxis === void 0 ? void 0 : lastAxis.axisLayoutState.additionalBottomSize));
+        var totalDefinedAxesLength = axesWithDefinedLength.reduce(function (acc, axis) { return acc + _this.calculateTotalAxisHeight(axis, spaceWithoutBorders); }, 0);
+        var availableSpaceForAxes = totalAxisAreaHeight +
+            (firstAxis === null || firstAxis === void 0 ? void 0 : firstAxis.axisLayoutState.additionalTopSize) +
+            (lastAxis === null || lastAxis === void 0 ? void 0 : lastAxis.axisLayoutState.additionalBottomSize) -
+            totalDefinedAxesLength;
+        if (availableSpaceForAxes < 0) {
+            throw new Error("Right stacked axes with defined size total ".concat(totalDefinedAxesLength, " pixels which is ").concat(-availableSpaceForAxes, " more than the space available"));
+        }
+        var defaultAxisReservedHeight = availableSpaceForAxes / (axes.length - axesWithDefinedLength.length);
         var topOffset = top - (firstAxis === null || firstAxis === void 0 ? void 0 : firstAxis.axisLayoutState.additionalTopSize);
         axes.forEach(function (axis) {
             var _a = axis.axisLayoutState, axisSize = _a.axisSize, additionalLeftSize = _a.additionalLeftSize, additionalBottomSize = _a.additionalBottomSize, additionalTopSize = _a.additionalTopSize;
             var leftOffset = left + additionalLeftSize;
             var rightOffset = leftOffset + axisSize;
-            var bottomOffset = topOffset + singleAxisReservedHeight - additionalBottomSize;
+            var axisReservedHeight = axis.stackedAxisLength
+                ? _this.calculateTotalAxisHeight(axis, spaceWithoutBorders)
+                : defaultAxisReservedHeight;
+            var bottomOffset = topOffset + axisReservedHeight - additionalBottomSize;
             topOffset += additionalTopSize;
             axis.offset = topOffset - top;
             axis.axisLength = bottomOffset - topOffset;

package/Charting/LayoutManager/TopAlignedOuterHorizontallyStackedAxisLayoutStrategy.js

@@ -50,14 +50,30 @@ var TopAlignedOuterHorizontallyStackedAxisLayoutStrategy = /** @class */ (functi
     TopAlignedOuterHorizontallyStackedAxisLayoutStrategy.prototype.layoutAxes = function (left, top, right, bottom, axes) {
         var _this = this;
         var totalAxisAreaWidth = right - left;
-        var singleAxisReservedWidth = totalAxisAreaWidth / axes.length;
         var firstAxis = axes[0];
+        var lastAxis = axes[axes.length - 1];
+        var axesWithDefinedLength = axes.filter(function (axis) { return axis.stackedAxisLength; });
+        var spaceWithoutBorders = axes.reduce(function (acc, axis) { return acc - axis.axisLayoutState.additionalBottomSize - axis.axisLayoutState.additionalTopSize; }, totalAxisAreaWidth +
+            (firstAxis === null || firstAxis === void 0 ? void 0 : firstAxis.axisLayoutState.additionalLeftSize) +
+            (lastAxis === null || lastAxis === void 0 ? void 0 : lastAxis.axisLayoutState.additionalRightSize));
+        var totalDefinedAxesLength = axesWithDefinedLength.reduce(function (acc, axis) { return acc + _this.calculateTotalAxisWidth(axis, spaceWithoutBorders); }, 0);
+        var availableSpaceForAxes = totalAxisAreaWidth +
+            (firstAxis === null || firstAxis === void 0 ? void 0 : firstAxis.axisLayoutState.additionalLeftSize) +
+            (lastAxis === null || lastAxis === void 0 ? void 0 : lastAxis.axisLayoutState.additionalRightSize) -
+            totalDefinedAxesLength;
+        if (availableSpaceForAxes < 0) {
+            throw new Error("Top stacked axes with defined size total ".concat(totalDefinedAxesLength, " pixels which is ").concat(-availableSpaceForAxes, " more than the space available"));
+        }
+        var defaultAxisReservedHeight = availableSpaceForAxes / (axes.length - axesWithDefinedLength.length);
         var leftOffset = left - (firstAxis === null || firstAxis === void 0 ? void 0 : firstAxis.axisLayoutState.additionalLeftSize);
         axes.forEach(function (axis) {
             var _a = axis.axisLayoutState, axisSize = _a.axisSize, additionalLeftSize = _a.additionalLeftSize, additionalRightSize = _a.additionalRightSize, additionalBottomSize = _a.additionalBottomSize;
             var bottomOffset = bottom - additionalBottomSize;
             var topOffset = bottomOffset - axisSize;
-            var rightOffset = leftOffset + singleAxisReservedWidth - additionalRightSize;
+            var axisReservedHeight = axis.stackedAxisLength
+                ? _this.calculateTotalAxisWidth(axis, spaceWithoutBorders)
+                : defaultAxisReservedHeight;
+            var rightOffset = leftOffset + axisReservedHeight - additionalRightSize;
             leftOffset += additionalLeftSize;
             axis.offset = leftOffset - left;
             axis.axisLength = rightOffset - leftOffset;

package/Charting/Model/OhlcDataSeries.js

@@ -130,11 +130,11 @@ var OhlcDataSeries = /** @class */ (function (_super) {
      */
     OhlcDataSeries.prototype.appendRange = function (xValues, openValues, highValues, lowValues, closeValues, metadata) {
         if (!this.getIsDeleted()) {
-            Guard_1.Guard.isTrue(Array.isArray(xValues) || (0, NumberArray_1.isTypedArray)(xValues), "xValues must be an array of numbers");
-            Guard_1.Guard.isTrue(Array.isArray(openValues) || (0, NumberArray_1.isTypedArray)(openValues), "openValues must be an array of numbers");
-            Guard_1.Guard.isTrue(Array.isArray(highValues) || (0, NumberArray_1.isTypedArray)(highValues), "highValues must be an array of numbers");
-            Guard_1.Guard.isTrue(Array.isArray(lowValues) || (0, NumberArray_1.isTypedArray)(lowValues), "lowValues must be an array of numbers");
-            Guard_1.Guard.isTrue(Array.isArray(closeValues) || (0, NumberArray_1.isTypedArray)(closeValues), "closeValues must be an array of numbers");
+            Guard_1.Guard.isTrue((0, NumberArray_1.isNumberArray)(xValues) || (0, NumberArray_1.isTypedArray)(xValues), "xValues must be an array of numbers");
+            Guard_1.Guard.isTrue((0, NumberArray_1.isNumberArray)(openValues) || (0, NumberArray_1.isTypedArray)(openValues), "openValues must be an array of numbers");
+            Guard_1.Guard.isTrue((0, NumberArray_1.isNumberArray)(highValues) || (0, NumberArray_1.isTypedArray)(highValues), "highValues must be an array of numbers");
+            Guard_1.Guard.isTrue((0, NumberArray_1.isNumberArray)(lowValues) || (0, NumberArray_1.isTypedArray)(lowValues), "lowValues must be an array of numbers");
+            Guard_1.Guard.isTrue((0, NumberArray_1.isNumberArray)(closeValues) || (0, NumberArray_1.isTypedArray)(closeValues), "closeValues must be an array of numbers");
             Guard_1.Guard.arraysSameLengthArr([
                 { arg: xValues, name: "xValues" },
                 { arg: openValues, name: "openValues" },
@@ -240,11 +240,11 @@ var OhlcDataSeries = /** @class */ (function (_super) {
      */
     OhlcDataSeries.prototype.insertRange = function (startIndex, xValues, openValues, highValues, lowValues, closeValues, metadata) {
         if (!this.getIsDeleted()) {
-            Guard_1.Guard.isTrue(Array.isArray(xValues) || (0, NumberArray_1.isTypedArray)(xValues), "xValues must be an array of numbers");
-            Guard_1.Guard.isTrue(Array.isArray(openValues) || (0, NumberArray_1.isTypedArray)(openValues), "openValues must be an array of numbers");
-            Guard_1.Guard.isTrue(Array.isArray(highValues) || (0, NumberArray_1.isTypedArray)(highValues), "highValues must be an array of numbers");
-            Guard_1.Guard.isTrue(Array.isArray(lowValues) || (0, NumberArray_1.isTypedArray)(lowValues), "lowValues must be an array of numbers");
-            Guard_1.Guard.isTrue(Array.isArray(closeValues) || (0, NumberArray_1.isTypedArray)(closeValues), "closeValues must be an array of numbers");
+            Guard_1.Guard.isTrue((0, NumberArray_1.isNumberArray)(xValues) || (0, NumberArray_1.isTypedArray)(xValues), "xValues must be an array of numbers");
+            Guard_1.Guard.isTrue((0, NumberArray_1.isNumberArray)(openValues) || (0, NumberArray_1.isTypedArray)(openValues), "openValues must be an array of numbers");
+            Guard_1.Guard.isTrue((0, NumberArray_1.isNumberArray)(highValues) || (0, NumberArray_1.isTypedArray)(highValues), "highValues must be an array of numbers");
+            Guard_1.Guard.isTrue((0, NumberArray_1.isNumberArray)(lowValues) || (0, NumberArray_1.isTypedArray)(lowValues), "lowValues must be an array of numbers");
+            Guard_1.Guard.isTrue((0, NumberArray_1.isNumberArray)(closeValues) || (0, NumberArray_1.isTypedArray)(closeValues), "closeValues must be an array of numbers");
             this.validateIndex(startIndex, "Start index is out of range");
             Guard_1.Guard.arraysSameLengthArr([
                 { arg: xValues, name: "xValues" },

package/Charting/Model/XyDataSeries.js

@@ -98,8 +98,8 @@ var XyDataSeries = /** @class */ (function (_super) {
      */
     XyDataSeries.prototype.appendRange = function (xValues, yValues, metadata) {
         if (!this.getIsDeleted()) {
-            Guard_1.Guard.isTrue(Array.isArray(xValues) || (0, NumberArray_1.isTypedArray)(xValues), "xValues must be an array of numbers");
-            Guard_1.Guard.isTrue(Array.isArray(yValues) || (0, NumberArray_1.isTypedArray)(yValues), "yValues must be an array of numbers");
+            Guard_1.Guard.isTrue((0, NumberArray_1.isNumberArray)(xValues) || (0, NumberArray_1.isTypedArray)(xValues), "xValues must be an array of numbers");
+            Guard_1.Guard.isTrue((0, NumberArray_1.isNumberArray)(yValues) || (0, NumberArray_1.isTypedArray)(yValues), "yValues must be an array of numbers");
             Guard_1.Guard.arraysSameLength(xValues, "xValues", yValues, "yValues");
             if (metadata) {
                 Guard_1.Guard.isTrue(Array.isArray(metadata), "metadata must be an array of IPointMetadata");
@@ -184,8 +184,8 @@ var XyDataSeries = /** @class */ (function (_super) {
      */
     XyDataSeries.prototype.insertRange = function (startIndex, xValues, yValues, metadata) {
         if (!this.getIsDeleted()) {
-            Guard_1.Guard.isTrue(Array.isArray(xValues) || (0, NumberArray_1.isTypedArray)(xValues), "xValues must be an array of numbers");
-            Guard_1.Guard.isTrue(Array.isArray(yValues) || (0, NumberArray_1.isTypedArray)(xValues), "yValues must be an array of numbers");
+            Guard_1.Guard.isTrue((0, NumberArray_1.isNumberArray)(xValues) || (0, NumberArray_1.isTypedArray)(xValues), "xValues must be an array of numbers");
+            Guard_1.Guard.isTrue((0, NumberArray_1.isNumberArray)(yValues) || (0, NumberArray_1.isTypedArray)(yValues), "yValues must be an array of numbers");
             this.validateIndex(startIndex, "Start index is out of range");
             Guard_1.Guard.arraysSameLength(xValues, "xValues", yValues, "yValues");
             if (metadata) {

package/Charting/Model/XyyDataSeries.js

@@ -99,9 +99,9 @@ var XyyDataSeries = /** @class */ (function (_super) {
      */
     XyyDataSeries.prototype.appendRange = function (xValues, yValues, y1Values, metadata) {
         if (!this.getIsDeleted()) {
-            Guard_1.Guard.isTrue(Array.isArray(xValues) || (0, NumberArray_1.isTypedArray)(xValues), "xValues must be an array of numbers");
-            Guard_1.Guard.isTrue(Array.isArray(yValues) || (0, NumberArray_1.isTypedArray)(yValues), "yValues must be an array of numbers");
-            Guard_1.Guard.isTrue(Array.isArray(y1Values) || (0, NumberArray_1.isTypedArray)(y1Values), "y1Values must be an array of numbers");
+            Guard_1.Guard.isTrue((0, NumberArray_1.isNumberArray)(xValues) || (0, NumberArray_1.isTypedArray)(xValues), "xValues must be an array of numbers");
+            Guard_1.Guard.isTrue((0, NumberArray_1.isNumberArray)(yValues) || (0, NumberArray_1.isTypedArray)(yValues), "yValues must be an array of numbers");
+            Guard_1.Guard.isTrue((0, NumberArray_1.isNumberArray)(y1Values) || (0, NumberArray_1.isTypedArray)(y1Values), "y1Values must be an array of numbers");
             Guard_1.Guard.arraysSameLengthArr([
                 { arg: xValues, name: "xValues" },
                 { arg: yValues, name: "yValues" },
@@ -201,9 +201,9 @@ var XyyDataSeries = /** @class */ (function (_super) {
      */
     XyyDataSeries.prototype.insertRange = function (startIndex, xValues, yValues, y1Values, metadata) {
         if (!this.getIsDeleted()) {
-            Guard_1.Guard.isTrue(Array.isArray(xValues) || (0, NumberArray_1.isTypedArray)(xValues), "xValues must be an array of numbers");
-            Guard_1.Guard.isTrue(Array.isArray(yValues) || (0, NumberArray_1.isTypedArray)(yValues), "yValues must be an array of numbers");
-            Guard_1.Guard.isTrue(Array.isArray(y1Values) || (0, NumberArray_1.isTypedArray)(y1Values), "y1Values must be an array of numbers");
+            Guard_1.Guard.isTrue((0, NumberArray_1.isNumberArray)(xValues) || (0, NumberArray_1.isTypedArray)(xValues), "xValues must be an array of numbers");
+            Guard_1.Guard.isTrue((0, NumberArray_1.isNumberArray)(yValues) || (0, NumberArray_1.isTypedArray)(yValues), "yValues must be an array of numbers");
+            Guard_1.Guard.isTrue((0, NumberArray_1.isNumberArray)(y1Values) || (0, NumberArray_1.isTypedArray)(y1Values), "y1Values must be an array of numbers");
             this.validateIndex(startIndex, "Start index is out of range");
             Guard_1.Guard.arraysSameLengthArr([
                 { arg: xValues, name: "xValues" },

package/Charting/Model/XyzDataSeries.js

@@ -98,9 +98,9 @@ var XyzDataSeries = /** @class */ (function (_super) {
      */
     XyzDataSeries.prototype.appendRange = function (xValues, yValues, zValues, metadata) {
         if (!this.getIsDeleted()) {
-            Guard_1.Guard.isTrue(Array.isArray(xValues) || (0, NumberArray_1.isTypedArray)(xValues), "xValues must be an array of numbers");
-            Guard_1.Guard.isTrue(Array.isArray(yValues) || (0, NumberArray_1.isTypedArray)(yValues), "yValues must be an array of numbers");
-            Guard_1.Guard.isTrue(Array.isArray(zValues) || (0, NumberArray_1.isTypedArray)(zValues), "zValues must be an array of numbers");
+            Guard_1.Guard.isTrue((0, NumberArray_1.isNumberArray)(xValues) || (0, NumberArray_1.isTypedArray)(xValues), "xValues must be an array of numbers");
+            Guard_1.Guard.isTrue((0, NumberArray_1.isNumberArray)(yValues) || (0, NumberArray_1.isTypedArray)(yValues), "yValues must be an array of numbers");
+            Guard_1.Guard.isTrue((0, NumberArray_1.isNumberArray)(zValues) || (0, NumberArray_1.isTypedArray)(zValues), "zValues must be an array of numbers");
             Guard_1.Guard.arraysSameLengthArr([
                 { arg: xValues, name: "xValues" },
                 { arg: yValues, name: "yValues" },
@@ -193,9 +193,9 @@ var XyzDataSeries = /** @class */ (function (_super) {
      */
     XyzDataSeries.prototype.insertRange = function (startIndex, xValues, yValues, zValues, metadata) {
         if (!this.getIsDeleted()) {
-            Guard_1.Guard.isTrue(Array.isArray(xValues) || (0, NumberArray_1.isTypedArray)(xValues), "xValues must be an array of numbers");
-            Guard_1.Guard.isTrue(Array.isArray(yValues) || (0, NumberArray_1.isTypedArray)(yValues), "yValues must be an array of numbers");
-            Guard_1.Guard.isTrue(Array.isArray(zValues) || (0, NumberArray_1.isTypedArray)(zValues), "zValues must be an array of numbers");
+            Guard_1.Guard.isTrue((0, NumberArray_1.isNumberArray)(xValues) || (0, NumberArray_1.isTypedArray)(xValues), "xValues must be an array of numbers");
+            Guard_1.Guard.isTrue((0, NumberArray_1.isNumberArray)(yValues) || (0, NumberArray_1.isTypedArray)(yValues), "yValues must be an array of numbers");
+            Guard_1.Guard.isTrue((0, NumberArray_1.isNumberArray)(zValues) || (0, NumberArray_1.isTypedArray)(zValues), "zValues must be an array of numbers");
             this.validateIndex(startIndex, "Start index is out of range");
             Guard_1.Guard.arraysSameLengthArr([
                 { arg: xValues, name: "xValues" },

package/Charting/Services/SciChartRenderer.js

@@ -80,7 +80,9 @@ var SciChartRenderer = /** @class */ (function () {
                 el.type === IAnnotation_1.EAnnotationType.RenderContextVerticalLineAnnotation ||
                 el.type === IAnnotation_1.EAnnotationType.RenderContextAxisMarkerAnnotation);
         });
-        this.drawRenderContextAnnotations(renderContextAnnotations, xyAxesById[0], xyAxesById[1], IAnnotation_1.EAnnotationLayer.BelowChart, renderContext, seriesViewRect);
+        renderContext.enqueueLayeredDraw(function () {
+            _this.drawRenderContextAnnotations(renderContextAnnotations, xyAxesById[0], xyAxesById[1], IAnnotation_1.EAnnotationLayer.BelowChart, renderContext, seriesViewRect);
+        }, RenderLayer_1.ERenderLayer.Third);
         // queue series rendering after grid lines and bands, but before the axes
         renderContext.enqueueLayeredDraw(function () { return _this.drawSeries(_this.sciChartSurface, _this.sciChartSurface.renderableSeries.asArray(), renderContext); }, RenderLayer_1.ERenderLayer.Third);
         // Execute rendering of queued elements

package/Charting/Services/Workers/TextureWorker.js

@@ -87,7 +87,11 @@ var TextureWorkerWrapper = /** @class */ (function () {
         var _this = this;
         this.timeout = 200;
         this.isActiveProperty = true;
-        if (!app_1.IS_TEST_ENV && typeof window !== "undefined" && !!window.Worker) {
+        if (!app_1.IS_TEST_ENV &&
+            typeof window !== "undefined" &&
+            !!window.Worker &&
+            // @ts-ignore
+            typeof OffscreenCanvas !== "undefined") {
             this.worker = this.makeWorker(); // new Worker("./TextureWorkerSource.ts", { type: "module" });
             this.worker.onmessage = handleMsg;
             this.worker.onerror = function (ev) {

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

@@ -227,7 +227,7 @@ export declare abstract class AnnotationBase implements IAnnotation, IAdornerPro
     private opacityProperty;
     private annotationLayerProperty;
     private isEditableProperty;
-    private isHiddenProperty;
+    protected isHiddenProperty: boolean;
     private parentSurfaceProperty;
     private x1Property;
     private x2Property;

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

@@ -30,6 +30,7 @@ export declare class CursorTooltipSvgAnnotation extends SvgAnnotationBase {
     private tooltipLegendOffsetXProperty;
     private tooltipLegendOffsetYProperty;
     private svgLegend;
+    private previousMousePosition;
     /**
      * Creates an instance of the {@link CursorTooltipSvgAnnotation}
      * @param options

package/Charting/Visuals/Annotations/CursorTooltipSvgAnnotation.js

@@ -16,6 +16,7 @@ var __extends = (this && this.__extends) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CursorTooltipSvgAnnotation = void 0;
+var MousePosition_1 = require("../../../types/MousePosition");
 var constants_1 = require("./constants");
 var IAnnotation_1 = require("./IAnnotation");
 var SvgAnnotationBase_1 = require("./SvgAnnotationBase");
@@ -164,6 +165,11 @@ var CursorTooltipSvgAnnotation = /** @class */ (function (_super) {
      * @inheritDoc
      */
     CursorTooltipSvgAnnotation.prototype.update = function (xCalc, yCalc) {
+        var currentMousePosition = this.cursorModifier.getMousePosition();
+        if (this.previousMousePosition === currentMousePosition && currentMousePosition !== MousePosition_1.EMousePosition.SeriesArea) {
+            return;
+        }
+        this.previousMousePosition = this.cursorModifier.getMousePosition();
         if (this.svg) {
             this.delete();
         }