scichart 2.0.2195 → 2.1.2261

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";
@@ -176,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);
     /**
@@ -184,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

@@ -300,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;
         },
@@ -321,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/DataPointSelectionModifier.js

@@ -410,7 +410,6 @@ var DataPointSelectionModifier = /** @class */ (function (_super) {
                     topYData = yCalc.getDataValue(_this.startPoint.y);
                 }
                 if (rs.dataSeries.type === IDataSeries_1.EDataSeriesType.HeatmapUniform) {
-                    var heatmapSeries = rs.dataSeries;
                     // TODO: Heatmap series
                 }
                 else {

package/Charting/ChartModifiers/RolloverModifier.d.ts

@@ -49,8 +49,27 @@ export declare type TTooltipProps = {
     isCategoryAxis: boolean;
     isY1: boolean;
     height: number;
+    width: 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 +192,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;
@@ -213,14 +238,16 @@ export declare class RolloverModifier extends ChartModifierBase2D implements IIn
  * @param pixelRatio
  * @param isY1
  */
-export declare const calcTooltipProps: (index: number, rs: IRenderableSeries, rolloverProps: RolloverModifierRenderableSeriesProps, seriesViewRect: Rect, xValue: number, yValue: number, absoluteXCoord: number, absoluteYCoord: number, hitTestInfo: HitTestInfo, pixelRatio: number, isY1?: boolean) => TTooltipProps;
+export declare const calcTooltipProps: (index: number, rs: IRenderableSeries, rolloverProps: RolloverModifierRenderableSeriesProps, seriesViewRect: Rect, xValue: number, yValue: number, absoluteXCoord: number, absoluteYCoord: number, hitTestInfo: HitTestInfo, pixelRatio: number, isY1?: boolean, isVerticalChart?: boolean) => TTooltipProps;
 /**
  * @ignore
  * @description Used internally, calculates tooltip positions to avoid overlapping
  * @param tooltipArray
  * @param allowTooltipOverlapping
- * @param tooltipPaddingTop
+ * @param spacing
  * @param seriesViewRect
  * @param pixelRatio
+ * @param isVerticalChart
  */
-export declare const calcTooltipPositions: (tooltipArray: TTooltipProps[], allowTooltipOverlapping: boolean, tooltipPaddingTop: number, seriesViewRect: Rect, pixelRatio: number) => TTooltipProps[];
+export declare const calcTooltipPositions: (tooltipArray: TTooltipProps[], allowTooltipOverlapping: boolean, spacing: number, seriesViewRect: Rect, pixelRatio: number, isVerticalChart?: boolean) => TTooltipProps[];
+export {};

package/Charting/ChartModifiers/RolloverModifier.js

@@ -20,6 +20,7 @@ var classFactory_1 = require("../../Builder/classFactory");
 var BaseType_1 = require("../../types/BaseType");
 var ChartModifierType_1 = require("../../types/ChartModifierType");
 var SeriesType_1 = require("../../types/SeriesType");
+var tooltip_1 = require("../../utils/tooltip");
 var translate_1 = require("../../utils/translate");
 var AnnotationBase_1 = require("../Visuals/Annotations/AnnotationBase");
 var LineAnnotation_1 = require("../Visuals/Annotations/LineAnnotation");
@@ -50,7 +51,7 @@ var EMousePosition;
     EMousePosition["SeriesArea"] = "SeriesArea";
 })(EMousePosition || (EMousePosition = {}));
 /** @ignore */
-var TOOLTIP_PADDING_TOP = 4;
+var TOOLTIP_SPACING = 4;
 /**
  * The RolloverModifier provides tooltip and cursor behavior on a 2D {@link SciChartSurface}
  * within SciChart - High Performance {@link https://www.scichart.com/javascript-chart-features | JavaScript Charts}
@@ -346,6 +347,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 +369,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) {
@@ -510,7 +519,7 @@ var RolloverModifier = /** @class */ (function (_super) {
                     if (isVisible) {
                         var absoluteXCoord = _this.isVerticalChart() ? hitTestInfo.yCoord : hitTestInfo.xCoord;
                         var absoluteYCoord = _this.isVerticalChart() ? hitTestInfo.xCoord : hitTestInfo.yCoord;
-                        var tooltipProps = (0, exports.calcTooltipProps)(index, rs, rs.rolloverModifierProps, _this.parentSurface.seriesViewRect, hitTestInfo.xValue, hitTestInfo.yValue, absoluteXCoord, absoluteYCoord, hitTestInfo, DpiHelper_1.DpiHelper.PIXEL_RATIO);
+                        var tooltipProps = (0, exports.calcTooltipProps)(index, rs, rs.rolloverModifierProps, _this.parentSurface.seriesViewRect, hitTestInfo.xValue, hitTestInfo.yValue, absoluteXCoord, absoluteYCoord, hitTestInfo, DpiHelper_1.DpiHelper.PIXEL_RATIO, false, _this.isVerticalChart());
                         if (tooltipProps)
                             tooltipArray.push(tooltipProps);
                     }
@@ -520,7 +529,7 @@ var RolloverModifier = /** @class */ (function (_super) {
                     if (isVisibleY1) {
                         var absoluteXCoord = _this.isVerticalChart() ? hitTestInfo.y1Coord : hitTestInfo.xCoord;
                         var absoluteYCoord = _this.isVerticalChart() ? hitTestInfo.xCoord : hitTestInfo.y1Coord;
-                        var tooltipY1Props = (0, exports.calcTooltipProps)(index, rs, rs.rolloverModifierProps1, _this.parentSurface.seriesViewRect, hitTestInfo.xValue, hitTestInfo.y1Value, absoluteXCoord, absoluteYCoord, hitTestInfo, DpiHelper_1.DpiHelper.PIXEL_RATIO, true);
+                        var tooltipY1Props = (0, exports.calcTooltipProps)(index, rs, rs.rolloverModifierProps1, _this.parentSurface.seriesViewRect, hitTestInfo.xValue, hitTestInfo.y1Value, absoluteXCoord, absoluteYCoord, hitTestInfo, DpiHelper_1.DpiHelper.PIXEL_RATIO, true, _this.isVerticalChart());
                         if (tooltipY1Props)
                             tooltipArray.push(tooltipY1Props);
                     }
@@ -530,7 +539,7 @@ var RolloverModifier = /** @class */ (function (_super) {
         var orderedTooltipArray = tooltipArray.sort(function (a, b) {
             return a.yCoord > b.yCoord ? 1 : b.yCoord > a.yCoord ? -1 : 0;
         });
-        var tooltipPositions = (0, exports.calcTooltipPositions)(orderedTooltipArray, this.allowTooltipOverlapping, TOOLTIP_PADDING_TOP * DpiHelper_1.DpiHelper.PIXEL_RATIO, this.parentSurface.seriesViewRect, DpiHelper_1.DpiHelper.PIXEL_RATIO);
+        var tooltipPositions = (0, exports.calcTooltipPositions)(orderedTooltipArray, this.allowTooltipOverlapping, TOOLTIP_SPACING * DpiHelper_1.DpiHelper.PIXEL_RATIO, this.parentSurface.seriesViewRect, DpiHelper_1.DpiHelper.PIXEL_RATIO, this.isVerticalChart());
         tooltipPositions.forEach(function (el) {
             var rs = rsList[el.index];
             var showTooltip = _this.showTooltip && el.seriesInfo.isHit;
@@ -581,8 +590,9 @@ exports.RolloverModifier = RolloverModifier;
  * @param pixelRatio
  * @param isY1
  */
-var calcTooltipProps = function (index, rs, rolloverProps, seriesViewRect, xValue, yValue, absoluteXCoord, absoluteYCoord, hitTestInfo, pixelRatio, isY1) {
+var calcTooltipProps = function (index, rs, rolloverProps, seriesViewRect, xValue, yValue, absoluteXCoord, absoluteYCoord, hitTestInfo, pixelRatio, isY1, isVerticalChart) {
     if (isY1 === void 0) { isY1 = false; }
+    if (isVerticalChart === void 0) { isVerticalChart = false; }
     var visibleRange = rs.yAxis.visibleRange;
     var isVisible = visibleRange.min <= yValue && yValue <= visibleRange.max;
     if (isVisible) {
@@ -593,13 +603,21 @@ var calcTooltipProps = function (index, rs, rolloverProps, seriesViewRect, xValu
         var scaledHeight = height * pixelRatio;
         var distTop = absoluteYCoord;
         var distBottom = seriesViewRect.height - absoluteYCoord;
+        var defaultVerticalShift = 5 * pixelRatio;
         var xCoordShift = seriesViewRect.width - absoluteXCoord < scaledWidth ? -width : 5;
-        var yCoordShift = -height / 2;
-        if (distTop < scaledHeight / 2) {
-            yCoordShift = -distTop / pixelRatio;
+        var yCoordShift = isVerticalChart ? defaultVerticalShift : -height / 2;
+        if (isVerticalChart) {
+            if (distBottom < scaledHeight + defaultVerticalShift) {
+                yCoordShift = ((scaledHeight + defaultVerticalShift) / pixelRatio) * -1;
+            }
         }
-        else if (distBottom < scaledHeight / 2) {
-            yCoordShift = -(scaledHeight - distBottom) / pixelRatio;
+        else {
+            if (distTop < scaledHeight / 2) {
+                yCoordShift = -distTop / pixelRatio;
+            }
+            else if (distBottom < scaledHeight / 2) {
+                yCoordShift = -(scaledHeight - distBottom) / pixelRatio;
+            }
         }
         var newRecord = {
             index: index,
@@ -613,6 +631,7 @@ var calcTooltipProps = function (index, rs, rolloverProps, seriesViewRect, xValu
             xCoordShift: xCoordShift,
             yCoordShift: yCoordShift,
             height: scaledHeight,
+            width: scaledWidth,
             seriesInfo: seriesInfo
         };
         return newRecord;
@@ -620,85 +639,32 @@ var calcTooltipProps = function (index, rs, rolloverProps, seriesViewRect, xValu
     return undefined;
 };
 exports.calcTooltipProps = calcTooltipProps;
-/** @ignore */
-var spreadTooltips = function (tooltipArray, totalTooltipsHeight, startY, endY, pixelRatio) {
-    var currentTotalPadding = endY - startY - totalTooltipsHeight;
-    var currentPadding = currentTotalPadding / (tooltipArray.length - 1);
-    tooltipArray.reduce(function (tooltipTopYCoord, tooltip) {
-        tooltip.yCoordShift = (tooltipTopYCoord - tooltip.yCoord) / pixelRatio;
-        return tooltipTopYCoord + tooltip.height + currentPadding;
-    }, startY);
-};
 /**
  * @ignore
  * @description Used internally, calculates tooltip positions to avoid overlapping
  * @param tooltipArray
  * @param allowTooltipOverlapping
- * @param tooltipPaddingTop
+ * @param spacing
  * @param seriesViewRect
  * @param pixelRatio
+ * @param isVerticalChart
  */
-var calcTooltipPositions = function (tooltipArray, allowTooltipOverlapping, tooltipPaddingTop, seriesViewRect, pixelRatio) {
+var calcTooltipPositions = function (tooltipArray, allowTooltipOverlapping, spacing, seriesViewRect, pixelRatio, isVerticalChart) {
+    if (isVerticalChart === void 0) { isVerticalChart = false; }
+    var positionProperties = (0, tooltip_1.getTooltipPositionProperties)(isVerticalChart);
+    var hasOverlap = (0, tooltip_1.checkHasOverlap)(tooltipArray, spacing, pixelRatio, positionProperties);
     var length = tooltipArray.length;
-    if (!allowTooltipOverlapping && length >= 2) {
-        var checkHasOverlap = function () {
-            for (var i = 0; i < length - 1; i++) {
-                var tooltip0 = tooltipArray[i];
-                var scaledHeightTooltip0 = tooltip0.height;
-                var scaledYShiftTooltip0 = tooltip0.yCoordShift * pixelRatio;
-                var bottomYTooltip0 = tooltip0.yCoord + scaledHeightTooltip0 + scaledYShiftTooltip0;
-                var tooltip1 = tooltipArray[i + 1];
-                var scaledYShiftTooltip1 = tooltip1.yCoordShift * pixelRatio;
-                var topYTooltip1 = tooltip1.yCoord + scaledYShiftTooltip1;
-                var diff = topYTooltip1 - bottomYTooltip0;
-                if (diff < tooltipPaddingTop)
-                    return true;
-            }
-            return false;
-        };
-        if (checkHasOverlap()) {
-            var totalTooltipsHeight = tooltipArray.reduce(function (prev, cur) { return prev + cur.height; }, 0);
-            var totalPadding = (length - 1) * tooltipPaddingTop;
-            var totalTooltipsHeightWithPadding = totalTooltipsHeight + totalPadding;
-            var notEnoughViewRectHeight = seriesViewRect.height <= totalTooltipsHeightWithPadding;
-            if (notEnoughViewRectHeight) {
-                var deltaYCoord = tooltipArray[length - 1].yCoord - tooltipArray[0].yCoord;
-                var centerY = tooltipArray[0].yCoord + deltaYCoord / 2;
-                var initialY_1 = centerY - totalTooltipsHeight / 2;
-                tooltipArray.reduce(function (prevSum, cur, index, arr) {
-                    var sum = index === 0 ? initialY_1 : prevSum + arr[index - 1].height + tooltipPaddingTop;
-                    // need to get not scaled value
-                    cur.yCoordShift = (sum - cur.yCoord) / pixelRatio;
-                    return sum;
-                }, 0);
-            }
-            else {
-                var firstTooltip = tooltipArray[0];
-                var lastTooltip = tooltipArray[length - 1];
-                var startY = firstTooltip.yCoord + firstTooltip.yCoordShift * pixelRatio;
-                var endY = lastTooltip.yCoord + lastTooltip.yCoordShift * pixelRatio + lastTooltip.height;
-                var isEnoughHeight = endY - startY >= totalTooltipsHeightWithPadding;
-                if (isEnoughHeight) {
-                    spreadTooltips(tooltipArray, totalTooltipsHeight, startY, endY, pixelRatio);
-                }
-                else {
-                    var additionalHeightNeeded = totalTooltipsHeightWithPadding - (endY - startY);
-                    var availableHeightFromStart = startY;
-                    var availableHeightFromEnd = seriesViewRect.height - endY;
-                    var newStartY = startY - additionalHeightNeeded / 2;
-                    var newEndY = endY + additionalHeightNeeded / 2;
-                    if (availableHeightFromStart < additionalHeightNeeded / 2) {
-                        newStartY = 0;
-                        newEndY = endY + (additionalHeightNeeded - availableHeightFromStart);
-                    }
-                    else if (availableHeightFromEnd < additionalHeightNeeded / 2) {
-                        newStartY = startY - (additionalHeightNeeded - availableHeightFromEnd);
-                        newEndY = seriesViewRect.height;
-                    }
-                    spreadTooltips(tooltipArray, totalTooltipsHeight, newStartY, newEndY, pixelRatio);
-                }
-            }
-        }
+    if (!allowTooltipOverlapping && length >= 2 && hasOverlap) {
+        var spreadMap_1 = (0, tooltip_1.spreadTooltips)(tooltipArray, pixelRatio, positionProperties, spacing, seriesViewRect);
+        tooltipArray.forEach(function (tooltip) {
+            tooltip[positionProperties.shiftPropertyName] = spreadMap_1.get(tooltip.index);
+        });
+    }
+    // centering for vertical charts without overlapping
+    if (isVerticalChart && !hasOverlap) {
+        tooltipArray.forEach(function (tooltip) {
+            return (tooltip[positionProperties.shiftPropertyName] = -(tooltip.width / 2) / pixelRatio);
+        });
     }
     return tooltipArray;
 };

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/Drawing/WebGlRenderContext2D.d.ts

@@ -39,6 +39,7 @@ export declare class WebGlRenderContext2D implements IRenderContext2D {
     private readonly layers;
     private readonly webAssemblyContext;
     private readonly effects;
+    private nativeContext;
     /**
      * Creates an instance of the WebGlRenderContext2D
      * @param webAssemblyContext The {@link TSciChart | SciChart WebAssembly Context} containing native methods and access to our WebGL2 Engine

package/Charting/Drawing/WebGlRenderContext2D.js

@@ -43,7 +43,10 @@ var WebGlRenderContext2D = /** @class */ (function () {
      * Get the native {@link SCRTRenderContext} for direct access to SciChart's WebAssembly Visual Xccelerator engine
      */
     WebGlRenderContext2D.prototype.getNativeContext = function () {
-        return this.webAssemblyContext.SCRTGetMainRenderContext2D();
+        if (!this.nativeContext) {
+            this.nativeContext = this.webAssemblyContext.SCRTGetMainRenderContext2D();
+        }
+        return this.nativeContext;
     };
     /**
      * Draw lines: grid lines, etc.

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;