scichart 2.0.2195 → 2.1.2261

package/Charting/Services/SciChartRenderer.js

@@ -11,15 +11,17 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SciChartRenderer = void 0;
 var Dictionary_1 = require("../../Core/Dictionary");
-var NumberRange_1 = require("../../Core/NumberRange");
 var Rect_1 = require("../../Core/Rect");
 var AutoRange_1 = require("../../types/AutoRange");
 var AxisAlignment_1 = require("../../types/AxisAlignment");
 var RenderLayer_1 = require("../../types/RenderLayer");
+var hash_1 = require("../../utils/hash");
+var ResamplingParams_1 = require("../Numerics/Resamplers/ResamplingParams");
 var IAnnotation_1 = require("../Visuals/Annotations/IAnnotation");
 var SciChartSurfaceBase_1 = require("../Visuals/SciChartSurfaceBase");
 var DpiHelper_1 = require("../Visuals/TextureManager/DpiHelper");
 var RenderPassData_1 = require("./RenderPassData");
+var RenderPassInfo_1 = require("./RenderPassInfo");
 /**
  * A class used internally in SciChart to perform layout, arrangement, data-preparation and rendering on the Cartesian 2D {@link SciChartSurface}
  */
@@ -31,6 +33,66 @@ var SciChartRenderer = /** @class */ (function () {
     function SciChartRenderer(sciChartSurface) {
         this.sciChartSurface = sciChartSurface;
     }
+    /**
+     * Used internally
+     * @param xAxis
+     * @param rs
+     * @param seriesViewRect
+     */
+    SciChartRenderer.resampleSeries = function (xAxis, rs, seriesViewRect) {
+        /**
+         * Stacked series and Heatmap do not support resampling
+         * If a series does not support resampling, the pointSeries is not used in the drawing provider.
+         * For example, UniformHeatmapDrawingProvider does not use renderPassData.pointSeries,
+         * but LineSeriesDrawingProvider use renderPassData.pointSeries in the draw() method!
+         */
+        if (!rs.supportsResampling)
+            return {
+                pointSeries: rs.toPointSeries(),
+                renderableSeries: rs,
+                indicesRange: undefined,
+                resamplingHash: undefined
+            };
+        var rp = new ResamplingParams_1.ResamplingParams(seriesViewRect, rs, xAxis);
+        if (!rs.needsResampling(rp))
+            return {
+                pointSeries: rs.toPointSeries(),
+                renderableSeries: rs,
+                indicesRange: undefined,
+                resamplingHash: undefined
+            };
+        var resamplingHash = SciChartRenderer.calculateResamplingHash(rs, rp);
+        var prevRPD = rs.getCurrentRenderPassData();
+        var useFromCache = Boolean(prevRPD && prevRPD.resamplingHash === resamplingHash);
+        // console.log("resampling ...");
+        // console.log("useFromCache", useFromCache);
+        var pointSeries = useFromCache ? prevRPD.pointSeries : rs.toPointSeries(rp);
+        return {
+            pointSeries: pointSeries,
+            renderableSeries: rs,
+            indicesRange: rp.indexesRange,
+            resamplingHash: resamplingHash
+        };
+    };
+    SciChartRenderer.calculateResamplingHash = function (rs, rp) {
+        var hashes = [];
+        var enableDrawingOptimizationsHash = hash_1.hashUtils.generateBooleanHash(rs.enableDrawingOptimisations);
+        hashes.push(enableDrawingOptimizationsHash);
+        var dataSeries = rs.dataSeries;
+        if (dataSeries) {
+            var dataSeriesHash = hash_1.hashUtils.generateHash(dataSeries.id);
+            hashes.push(dataSeriesHash);
+            var dataSeriesCountHash = hash_1.hashUtils.generateNumberHash(dataSeries.count());
+            hashes.push(dataSeriesCountHash);
+            var dataSeriesSortedHash = hash_1.hashUtils.generateBooleanHash(dataSeries.dataDistributionCalculator.isSortedAscending);
+            hashes.push(dataSeriesSortedHash);
+            var dataSeriesChangeCountHash = hash_1.hashUtils.generateNumberHash(dataSeries.changeCount);
+            hashes.push(dataSeriesChangeCountHash);
+        }
+        var resamplingParamsHash = hash_1.hashUtils.generateObjectHash(rp);
+        hashes.push(resamplingParamsHash);
+        return hash_1.hashUtils.generateCombinedHash(hashes);
+    };
     /**
      * Render loop for the current {@SciChartSurface}
      * @param renderContext the {@WebGLRenderContext2D} used for drawing
@@ -61,7 +123,8 @@ var SciChartRenderer = /** @class */ (function () {
         var seriesViewRect = this.sciChartSurface.layoutManager.layoutChart(renderContext.viewportSize);
         this.updateSvgCanvasSize(seriesViewRect);
         // Step 4 prepare render data
-        var xyAxesById = this.prepareRenderData();
+        var _a = this.prepareAxesRenderData(), xAxesById = _a.xAxesById, yAxesById = _a.yAxesById;
+        var renderPassInfo = this.prepareSeriesRenderData(seriesViewRect, xAxesById);
         // Draw seriesViewRect border
         this.sciChartSurface.drawBorder(renderContext);
         // Step 5 Draw X, Y axis and gridlines
@@ -80,21 +143,22 @@ 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);
-        // 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);
+        renderContext.enqueueLayeredDraw(function () {
+            _this.drawRenderContextAnnotations(renderContextAnnotations, xAxesById, yAxesById, IAnnotation_1.EAnnotationLayer.BelowChart, renderContext, seriesViewRect);
+        }, RenderLayer_1.ERenderLayer.Third);
+        // Step 7 Draw series. Queue series rendering after grid lines and bands, but before the axes
+        renderContext.enqueueLayeredDraw(function () { return _this.drawSeries(_this.sciChartSurface, renderPassInfo, renderContext); }, RenderLayer_1.ERenderLayer.Third);
         // Execute rendering of queued elements
         renderContext.drawLayers();
-        // Step 7 Draw series
         // Step 8 Draw annotations above the series
-        this.drawRenderContextAnnotations(renderContextAnnotations, xyAxesById[0], xyAxesById[1], IAnnotation_1.EAnnotationLayer.AboveChart, renderContext, seriesViewRect);
+        this.drawRenderContextAnnotations(renderContextAnnotations, xAxesById, yAxesById, IAnnotation_1.EAnnotationLayer.AboveChart, renderContext, seriesViewRect);
         // Step 9 Draw SVG or Html Overlays
         var svgAnnotations = annotations.filter(function (el) {
             return el.type === IAnnotation_1.EAnnotationType.SVG ||
                 el.type === IAnnotation_1.EAnnotationType.SVGTextAnnotation ||
                 el.type === IAnnotation_1.EAnnotationType.SVGCustomAnnotation;
         });
-        this.drawSvgAnnotations(svgAnnotations, xyAxesById[0], xyAxesById[1]);
+        this.drawSvgAnnotations(svgAnnotations, xAxesById, yAxesById);
         // Update watermark
         this.updateWatermark(renderContext, seriesViewRect);
         // Step 10 Call OnParentSurfaceRendered
@@ -173,7 +237,7 @@ var SciChartRenderer = /** @class */ (function () {
             svgRootElement.currentScale = 1;
         }
     };
-    SciChartRenderer.prototype.prepareRenderData = function () {
+    SciChartRenderer.prototype.prepareAxesRenderData = function () {
         var xAxesById = new Dictionary_1.Dictionary();
         var yAxesById = new Dictionary_1.Dictionary();
         // Prepare XAxes
@@ -186,7 +250,26 @@ var SciChartRenderer = /** @class */ (function () {
             yAxesById.add(yAxis.id, yAxis);
             yAxis.prepareRenderData();
         });
-        return [xAxesById, yAxesById];
+        return { xAxesById: xAxesById, yAxesById: yAxesById };
+    };
+    SciChartRenderer.prototype.prepareSeriesRenderData = function (seriesViewRect, xAxesById) {
+        var seriesCount = this.sciChartSurface.renderableSeries.size();
+        var renderPassInfo = new RenderPassInfo_1.RenderPassInfo(seriesCount, seriesViewRect);
+        // TODO: Calculate XRange before resample but YRange after resample for faster autorange on large datasets
+        for (var i = 0; i < this.sciChartSurface.renderableSeries.size(); i++) {
+            var series = this.sciChartSurface.renderableSeries.get(i);
+            // don't try and draw series with no data
+            if (!series.isStacked && !series.dataSeries)
+                continue;
+            // TODO: Do resampling, store result for use in drawing
+            var xAxis = xAxesById.item(series.xAxisId);
+            var seriesRenderPassInfo = SciChartRenderer.resampleSeries(xAxis, series, seriesViewRect);
+            renderPassInfo.renderableSeriesArray.push(seriesRenderPassInfo.renderableSeries);
+            renderPassInfo.pointSeriesArray.push(seriesRenderPassInfo.pointSeries);
+            renderPassInfo.indicesRanges.push(seriesRenderPassInfo.indicesRange);
+            renderPassInfo.resamplingHashes.push(seriesRenderPassInfo.resamplingHash);
+        }
+        return renderPassInfo;
     };
     SciChartRenderer.prototype.drawAxes = function (scs, renderContext) {
         scs.xAxes.asArray().forEach(function (xAxis) {
@@ -196,31 +279,30 @@ var SciChartRenderer = /** @class */ (function () {
             yAxis.draw(renderContext);
         });
     };
-    SciChartRenderer.prototype.drawSeries = function (scs, renderableSeries, renderContext) {
-        var drawSeriesImpl = function (series) {
-            var indexRange = new NumberRange_1.NumberRange(0, 0);
-            var xAxis = scs.xAxes.asArray().find(function (a) { return a.id === series.xAxisId; });
-            if (!xAxis) {
-                throw Error("Cannot find an X Axis with ID = " + series.xAxisId);
-            }
-            var yAxis = scs.yAxes.asArray().find(function (a) { return a.id === series.yAxisId; });
-            if (!yAxis) {
-                throw Error("Cannot find a Y Axis with ID = " + series.yAxisId);
-            }
-            if (xAxis.isVerticalChart && ![AxisAlignment_1.EAxisAlignment.Top, AxisAlignment_1.EAxisAlignment.Bottom].includes(yAxis.axisAlignment)) {
+    SciChartRenderer.prototype.drawSeries = function (scs, renderPassInfo, renderContext) {
+        var renderableSeriesArray = renderPassInfo.renderableSeriesArray, pointSeriesArray = renderPassInfo.pointSeriesArray, resamplingHashes = renderPassInfo.resamplingHashes, indicesRanges = renderPassInfo.indicesRanges;
+        var drawSeriesImpl = function (index) {
+            var renderableSeries = renderableSeriesArray[index];
+            var pointSeries = pointSeriesArray[index];
+            var resamplingHash = resamplingHashes[index];
+            var indexRange = indicesRanges[index];
+            var xAxis = scs.xAxes.asArray().find(function (a) { return a.id === renderableSeries.xAxisId; });
+            if (!xAxis)
+                throw Error("Cannot find an X Axis with ID = " + renderableSeries.xAxisId);
+            var yAxis = scs.yAxes.asArray().find(function (a) { return a.id === renderableSeries.yAxisId; });
+            if (!yAxis)
+                throw Error("Cannot find a Y Axis with ID = " + renderableSeries.yAxisId);
+            if (xAxis.isVerticalChart && ![AxisAlignment_1.EAxisAlignment.Top, AxisAlignment_1.EAxisAlignment.Bottom].includes(yAxis.axisAlignment))
                 throw Error("For vertical chart (chart with X Axis alignment Left or Right) Y Axis alignment should be Top or Bottom, X Axis ID = ".concat(xAxis.id));
-            }
-            if ((0, AxisAlignment_1.getIsVertical)(xAxis.axisAlignment) && (0, AxisAlignment_1.getIsVertical)(yAxis.axisAlignment)) {
+            if ((0, AxisAlignment_1.getIsVertical)(xAxis.axisAlignment) && (0, AxisAlignment_1.getIsVertical)(yAxis.axisAlignment))
                 throw Error("Both x and y axes can't have vertical alignment");
-            }
-            if ((0, AxisAlignment_1.getIsHorizontal)(xAxis.axisAlignment) && (0, AxisAlignment_1.getIsHorizontal)(yAxis.axisAlignment)) {
+            if ((0, AxisAlignment_1.getIsHorizontal)(xAxis.axisAlignment) && (0, AxisAlignment_1.getIsHorizontal)(yAxis.axisAlignment))
                 throw Error("Both x and y axes can't have horizontal alignment");
-            }
             var xCalc = xAxis.getCurrentCoordinateCalculator();
             var yCalc = yAxis.getCurrentCoordinateCalculator();
             try {
-                var renderPassData = new RenderPassData_1.RenderPassData(indexRange, xCalc, yCalc, xAxis.isVerticalChart);
-                series.draw(renderContext, renderPassData);
+                var renderPassData = new RenderPassData_1.RenderPassData(indexRange, xCalc, yCalc, xAxis.isVerticalChart, pointSeries, resamplingHash);
+                renderableSeries.draw(renderContext, renderPassData);
             }
             finally {
                 // We can not delete calculators because we use them in Hit Test
@@ -228,10 +310,24 @@ var SciChartRenderer = /** @class */ (function () {
                 // yCalc.delete();
             }
         };
+        var nativeContext = renderContext.getNativeContext();
+        var viewRect = this.sciChartSurface.seriesViewRect;
+        nativeContext.PushMatrix();
+        nativeContext.PushState();
+        nativeContext.Translate(viewRect.x, viewRect.y);
+        nativeContext.SetClipRect(viewRect.x, viewRect.y, viewRect.width, viewRect.height);
         // Draw unselected series first
-        renderableSeries.filter(function (rs) { return rs.isVisible && !rs.isSelected; }).forEach(drawSeriesImpl);
+        renderableSeriesArray.forEach(function (rs, index) {
+            if (rs.isVisible && !rs.isSelected)
+                drawSeriesImpl(index);
+        });
         // Draw selected series at higher z-index
-        renderableSeries.filter(function (rs) { return rs.isVisible && rs.isSelected; }).forEach(drawSeriesImpl);
+        renderableSeriesArray.forEach(function (rs, index) {
+            if (rs.isVisible && rs.isSelected)
+                drawSeriesImpl(index);
+        });
+        nativeContext.PopMatrix();
+        nativeContext.PopState();
     };
     SciChartRenderer.prototype.drawDebugAxes = function (scs, renderContext) {
         scs.xAxes.asArray().forEach(function (xAxis) {

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

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

@@ -1,3 +1,4 @@
+import { CoordinateCalculatorBase } from "../../Numerics/CoordinateCalculators/CoordinateCalculatorBase";
 import { RolloverModifierRenderableSeriesProps } from "../RenderableSeries/RolloverModifier/RolloverModifierRenderableSeriesProps";
 import { EAnnotationType } from "./IAnnotation";
 import { SvgAnnotationBase } from "./SvgAnnotationBase";
@@ -5,6 +6,10 @@ export declare class RolloverMarkerSvgAnnotation extends SvgAnnotationBase {
     /** @inheritDoc */
     readonly type = EAnnotationType.SVG;
     private tooltipProps;
+    private previousMousePosition;
     constructor(renderableSeriesProps: RolloverModifierRenderableSeriesProps);
+    /** @inheritDoc */
+    update(xCalc: CoordinateCalculatorBase, yCalc: CoordinateCalculatorBase): void;
+    /** @inheritDoc */
     protected create(): void;
 }

package/Charting/Visuals/Annotations/RolloverMarkerSvgAnnotation.js

@@ -16,6 +16,7 @@ var __extends = (this && this.__extends) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RolloverMarkerSvgAnnotation = void 0;
+var MousePosition_1 = require("../../../types/MousePosition");
 var IAnnotation_1 = require("./IAnnotation");
 var SvgAnnotationBase_1 = require("./SvgAnnotationBase");
 var RolloverMarkerSvgAnnotation = /** @class */ (function (_super) {
@@ -25,13 +26,23 @@ var RolloverMarkerSvgAnnotation = /** @class */ (function (_super) {
         /** @inheritDoc */
         _this.type = IAnnotation_1.EAnnotationType.SVG;
         _this.tooltipProps = renderableSeriesProps;
-        _this.isHidden = true;
+        _this.isHiddenProperty = true;
         _this.x1 = 0;
         _this.y1 = 0;
         _this.xCoordShift = -4;
         _this.yCoordShift = -4;
         return _this;
     }
+    /** @inheritDoc */
+    RolloverMarkerSvgAnnotation.prototype.update = function (xCalc, yCalc) {
+        var currentMousePosition = this.tooltipProps.rolloverModifier.getMousePosition();
+        if (this.previousMousePosition === currentMousePosition && currentMousePosition !== MousePosition_1.EMousePosition.SeriesArea) {
+            return;
+        }
+        this.previousMousePosition = this.tooltipProps.rolloverModifier.getMousePosition();
+        _super.prototype.update.call(this, xCalc, yCalc);
+    };
+    /** @inheritDoc */
     RolloverMarkerSvgAnnotation.prototype.create = function () {
         if (this.svg) {
             this.delete();

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

@@ -19,6 +19,7 @@ export declare class RolloverTooltipSvgAnnotation extends SvgAnnotationBase {
     height: number;
     private svgLegend;
     private seriesInfoProperty;
+    private previousMousePosition;
     /**
      * Creates an instance of the {@link RolloverTooltipSvgAnnotation}
      * @param renderableSeriesProps The {@link RolloverModifierRenderableSeriesProps | props} pass
@@ -33,18 +34,15 @@ export declare class RolloverTooltipSvgAnnotation extends SvgAnnotationBase {
      * Gets or sets seriesInfo {@link SeriesInfo} value on the tooltip
      */
     set seriesInfo(value: SeriesInfo);
-    /**
-     * @inheritDoc
-     */
+    /** @inheritDoc */
     delete(): void;
-    /**
-     * @inheritDoc
-     */
+    /** @inheritDoc */
     update(xCalc: CoordinateCalculatorBase, yCalc: CoordinateCalculatorBase): void;
-    updateSize(width: number, height: number): void;
     /**
-     * @inheritDoc
+     * Updates size of the tooltip
      */
+    updateSize(width: number, height: number): void;
+    /** @inheritDoc */
     protected create(xCalc: CoordinateCalculatorBase, yCalc: CoordinateCalculatorBase): void;
     private updateLegendTooltip;
 }

package/Charting/Visuals/Annotations/RolloverTooltipSvgAnnotation.js

@@ -16,6 +16,7 @@ var __extends = (this && this.__extends) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RolloverTooltipSvgAnnotation = void 0;
+var MousePosition_1 = require("../../../types/MousePosition");
 var IDataSeries_1 = require("../../Model/IDataSeries");
 var AnnotationBase_1 = require("./AnnotationBase");
 var constants_1 = require("./constants");
@@ -64,9 +65,7 @@ var RolloverTooltipSvgAnnotation = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    /**
-     * @inheritDoc
-     */
+    /** @inheritDoc */
     RolloverTooltipSvgAnnotation.prototype.delete = function () {
         var _a;
         if (!this.parentSurface || this.parentSurface.isDeleted)
@@ -76,23 +75,27 @@ var RolloverTooltipSvgAnnotation = /** @class */ (function (_super) {
             this.svgRoot.removeChild(this.svgLegend);
         }
     };
-    /**
-     * @inheritDoc
-     */
+    /** @inheritDoc */
     RolloverTooltipSvgAnnotation.prototype.update = function (xCalc, yCalc) {
+        var currentMousePosition = this.tooltipProps.rolloverModifier.getMousePosition();
+        if (this.previousMousePosition === currentMousePosition && currentMousePosition !== MousePosition_1.EMousePosition.SeriesArea) {
+            return;
+        }
+        this.previousMousePosition = this.tooltipProps.rolloverModifier.getMousePosition();
         if (this.svg) {
             this.delete();
         }
         _super.prototype.update.call(this, xCalc, yCalc);
         this.updateLegendTooltip();
     };
+    /**
+     * Updates size of the tooltip
+     */
     RolloverTooltipSvgAnnotation.prototype.updateSize = function (width, height) {
         this.width = width;
         this.height = height;
     };
-    /**
-     * @inheritDoc
-     */
+    /** @inheritDoc */
     RolloverTooltipSvgAnnotation.prototype.create = function (xCalc, yCalc) {
         var _a;
         var svgString;

package/Charting/Visuals/Annotations/SvgAnnotationBase.js

@@ -38,6 +38,11 @@ var SvgAnnotationBase = /** @class */ (function (_super) {
         var _this = _super.call(this, options) || this;
         /** @inheritDoc */
         _this.isSvgAnnotation = true;
+        /**
+         * The {@link SVGElement} which will be added to the chart
+         */
+        _this.xCoordShiftProperty = 0;
+        _this.yCoordShiftProperty = 0;
         _this.verticalAnchorPointProperty = AnchorPoint_1.EVerticalAnchorPoint.Top;
         _this.horizontalAnchorPointProperty = AnchorPoint_1.EHorizontalAnchorPoint.Left;
         _this.prevX1Coordinate = 0;
@@ -292,8 +297,8 @@ var SvgAnnotationBase = /** @class */ (function (_super) {
     SvgAnnotationBase.prototype.calcAndSetAnnotationBorders = function (xCalc, yCalc) {
         if (!this.svg)
             return;
-        var borderX1 = this.getX1Coordinate(xCalc, yCalc);
-        var borderY1 = this.getY1Coordinate(xCalc, yCalc);
+        var borderX1 = this.getX1Coordinate(xCalc, yCalc) + this.xCoordShift;
+        var borderY1 = this.getY1Coordinate(xCalc, yCalc) + this.yCoordShift;
         this.svgDOMRect = this.svg.getBoundingClientRect();
         var borderX2 = borderX1 + this.svgDOMRect.width;
         var borderY2 = borderY1 + this.svgDOMRect.height;

package/Charting/Visuals/Axis/AxisBase2D.d.ts

@@ -7,6 +7,7 @@ import { EAxisAlignment } from "../../../types/AxisAlignment";
 import { EAxisType } from "../../../types/AxisType";
 import { TBorder } from "../../../types/TBorder";
 import { SCRTPen, SCRTSolidBrush, TSciChart } from "../../../types/TSciChart";
+import { TStackedAxisLength } from "../../../types/TStackedAxisLength";
 import { WebGlRenderContext2D } from "../../Drawing/WebGlRenderContext2D";
 import { IThemeable } from "../../Themes/IThemeable";
 import { IThemeProvider } from "../../Themes/IThemeProvider";
@@ -112,6 +113,13 @@ export interface IAxisBase2dOptions extends IAxisCoreOptions {
      * @remarks Center axis uses inner layout strategy
      */
     isInnerAxis?: boolean;
+    /** Gets or sets the length of a stacked axis as an absolute number or percentage, e.g. 100, or "30%".
+     * A plain number will be interpreted as a number of pixels.
+     * A number with % will take that percentage of the total length.
+     * Stacked axes without a defined length will have the remaining unreserved spaced split between them.
+     * @remarks The axis length doesn't include border sizes
+     */
+    stackedAxisLength?: TStackedAxisLength;
     /**
      * Sets a {@link LabelProvider} - a class which is responsible for formatting axis labels and cursor labels from numeric values
      */
@@ -230,6 +238,20 @@ export declare abstract class AxisBase2D extends AxisCore implements IThemeable
      * This is only used to allow multiple primary axes, so that all stacked axes can draw gridlines
      */
     set isStackedAxis(value: boolean);
+    /** Gets or sets the length of a stacked axis as an absolute number or percentage, e.g. 100, or "30%".
+     * A plain number will be interpreted as a number of pixels.
+     * A number with % will take that percentage of the total length.
+     * Stacked axes without a defined length will have the remaining unreserved spaced split between them.
+     * @remarks The axis length doesn't include border sizes
+     */
+    get stackedAxisLength(): TStackedAxisLength;
+    /** Gets or sets the length of a stacked axis as an absolute number or percentage, e.g. 100, or "30%".
+     * A plain number will be interpreted as a number of pixels.
+     * A number with % will take that percentage of the total length.
+     * Stacked axes without a defined length will have the remaining unreserved spaced split between them.
+     * @remarks The axis length doesn't include border sizes
+     */
+    set stackedAxisLength(value: TStackedAxisLength);
     /**
      * Called internally - Gets or sets the length the current Axis. E.g. width of horizontal axis or height of vertical axis.
      */
@@ -308,6 +330,7 @@ export declare abstract class AxisBase2D extends AxisCore implements IThemeable
     private zoomExtentsRangeProperty;
     private isPrimaryAxisProperty;
     private isStackedAxisProperty;
+    private stackedAxisLengthProperty;
     private penCacheForMajorGridLines;
     private penCacheForMinorGridLines;
     private penCacheForMajorTickLines;