scichart 2.2.2417 → 3.0.0-beta.230

package/Charting/Visuals/Annotations/annotationHelpers.js

@@ -1,17 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.annotationHelpers = void 0;
+/** All svg creation is run through this funciton so it can be mocked for tests */
 var createSvg = function (svgString, svgRoot) {
     var svgNode = document.createRange().createContextualFragment(svgString);
     svgRoot.appendChild(svgNode);
     return svgRoot.lastChild;
 };
-var calcNewApex = function (x1, y1, x2, y2) {
-    var point1 = { x: x1, y: y2 };
-    var point2 = { x: x2, y: y2 };
-    var point3 = { x: x2, y: y1 };
-    var point4 = { x: x1, y: y1 };
-    return { point1: point1, point2: point2, point3: point3, point4: point4 };
+var calcNewApex = function (x1, y1, x2, y2, isVertical) {
+    var x1y1 = { x: x1, y: y1 };
+    var x2y1 = isVertical ? { x: x1, y: y2 } : { x: x2, y: y1 };
+    var x1y2 = isVertical ? { x: x2, y: y1 } : { x: x1, y: y2 };
+    var x2y2 = { x: x2, y: y2 };
+    return { x1y1: x1y1, x2y1: x2y1, x1y2: x1y2, x2y2: x2y2 };
 };
 exports.annotationHelpers = {
     createSvg: createSvg,

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

@@ -35,6 +35,7 @@ export declare enum PROPERTY {
     STROKE_THICKNESS = "STROKE_THICKNESS",
     STROKE_DASH_ARRAY = "STROKE_DASH_ARRAY",
     SHOW_LABEL = "SHOW_LABEL",
+    TEXT = "TEXT",
     TEXT_STROKE = "TEXT_STROKE",
     TITLE = "TITLE",
     TOOLTIP_LEGEND_OFFSET_X = "TOOLTIP_LEGEND_OFFSET_X",
@@ -52,7 +53,18 @@ export declare enum PROPERTY {
     YAXIS_ID = "YAXIS_ID",
     Y_COORDINATE_MODE = "Y_COORDINATE_MODE",
     Y_COORD_SHIFT = "Y_COORD_SHIFT",
-    PLACEMENT_DIV_ID = "PLACEMENT_DIV_ID"
+    PLACEMENT_DIV_ID = "PLACEMENT_DIV_ID",
+    ROTATION = "ROTATION",
+    ADORNER_STROKE = "ADORNER_STROKE",
+    ADORNER_FILL = "ADORNER_FILL",
+    ADORNER_RADIUS = "ADORNER_RADIUS",
+    SELECTION_STROKE = "SELECTION_STROKE",
+    SELECTION_DELTA = "SELECTION_DELTA",
+    SELECTION_THICKNESS = "SELECTION_THICKNESS",
+    DRAGPOINTS = "DRAGPOINTS",
+    MULTILINE_ALIGNMENT = "MULTILINE_ALIGNMENT",
+    WRAP_TO = "WRAP_TO",
+    LINE_SPACING = "LINE_SPACING"
 }
 export declare const ADORNER_GRIP_RADIUS = 10;
 export declare const DISTANCE_TO_LINE = 10;

package/Charting/Visuals/Annotations/constants.js

@@ -39,6 +39,7 @@ var PROPERTY;
     PROPERTY["STROKE_THICKNESS"] = "STROKE_THICKNESS";
     PROPERTY["STROKE_DASH_ARRAY"] = "STROKE_DASH_ARRAY";
     PROPERTY["SHOW_LABEL"] = "SHOW_LABEL";
+    PROPERTY["TEXT"] = "TEXT";
     PROPERTY["TEXT_STROKE"] = "TEXT_STROKE";
     PROPERTY["TITLE"] = "TITLE";
     PROPERTY["TOOLTIP_LEGEND_OFFSET_X"] = "TOOLTIP_LEGEND_OFFSET_X";
@@ -57,6 +58,17 @@ var PROPERTY;
     PROPERTY["Y_COORDINATE_MODE"] = "Y_COORDINATE_MODE";
     PROPERTY["Y_COORD_SHIFT"] = "Y_COORD_SHIFT";
     PROPERTY["PLACEMENT_DIV_ID"] = "PLACEMENT_DIV_ID";
+    PROPERTY["ROTATION"] = "ROTATION";
+    PROPERTY["ADORNER_STROKE"] = "ADORNER_STROKE";
+    PROPERTY["ADORNER_FILL"] = "ADORNER_FILL";
+    PROPERTY["ADORNER_RADIUS"] = "ADORNER_RADIUS";
+    PROPERTY["SELECTION_STROKE"] = "SELECTION_STROKE";
+    PROPERTY["SELECTION_DELTA"] = "SELECTION_DELTA";
+    PROPERTY["SELECTION_THICKNESS"] = "SELECTION_THICKNESS";
+    PROPERTY["DRAGPOINTS"] = "DRAGPOINTS";
+    PROPERTY["MULTILINE_ALIGNMENT"] = "MULTILINE_ALIGNMENT";
+    PROPERTY["WRAP_TO"] = "WRAP_TO";
+    PROPERTY["LINE_SPACING"] = "LINE_SPACING";
 })(PROPERTY = exports.PROPERTY || (exports.PROPERTY = {}));
 exports.ADORNER_GRIP_RADIUS = 10;
 exports.DISTANCE_TO_LINE = 10;

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

@@ -9,6 +9,7 @@ import { TBorder } from "../../../types/TBorder";
 import { SCRTPen, SCRTSolidBrush, TSciChart } from "../../../types/TSciChart";
 import { TStackedAxisLength } from "../../../types/TStackedAxisLength";
 import { WebGlRenderContext2D } from "../../Drawing/WebGlRenderContext2D";
+import { CoordinateCalculatorBase } from "../../Numerics/CoordinateCalculators/CoordinateCalculatorBase";
 import { IThemeable } from "../../Themes/IThemeable";
 import { IThemeProvider } from "../../Themes/IThemeProvider";
 import { SciChartSurface } from "../SciChartSurface";
@@ -86,6 +87,11 @@ export interface IAxisBase2dOptions extends IAxisCoreOptions {
      * Limits {@link AxisCore.visibleRange}, meaning the chart cannot autorange outside that range
      */
     visibleRangeLimit?: NumberRange;
+    /**
+     * Limits the min and max size of the {@link AxisCore.visibleRange}, meaning that the inequality must hold
+     * visibleRangeSizeLimit.min <= visibleRange.max - visiblerRange.min <= visibleRangeSizeLimit.max
+     */
+    visibleRangeSizeLimit?: NumberRange;
     /**
      * If this is set, it will be used as the range when zooming extents, rather than the data max range
      */
@@ -197,10 +203,13 @@ export declare abstract class AxisBase2D extends AxisCore implements IThemeable
      * Gets or sets a property which limits {@link AxisCore.visibleRange}, meaning the chart cannot autorange outside that range
      */
     get visibleRangeLimit(): NumberRange;
+    set visibleRangeLimit(visibleRangeLimit: NumberRange);
     /**
-     * Gets or sets a property which limits {@link AxisCore.visibleRange}, meaning the chart cannot autorange outside that range
+     * Gets or sets a property which limits the size of {@link AxisCore.visibleRange}, meaning that the inequality must hold
+     * visibleRangeSizeLimit.min <= visibleRange.max - visiblerRange.min <= visibleRangeSizeLimit.max
      */
-    set visibleRangeLimit(visibleRangeLimit: NumberRange);
+    get visibleRangeSizeLimit(): NumberRange;
+    set visibleRangeSizeLimit(value: NumberRange);
     /**
      * Gets or sets a property which, if it is set, will be used as the range when zooming extents, rather than the data max range
      */
@@ -325,17 +334,18 @@ export declare abstract class AxisBase2D extends AxisCore implements IThemeable
      * Gets the {@link Rect | ViewRect} - a rectangle defining the location of the axis within the parent {@link SciChartSurface}
      */
     viewRect: Rect;
-    protected axisRendererProperty: AxisRenderer;
-    protected autoRangeAnimationProperty: IAutoRangeAnimationOptions;
     /**
      * The {@link TSciChart | SciChart 2D WebAssembly Context} containing native methods and
      * access to our WebGL2 Engine and WebAssembly numerical methods
      */
     protected readonly webAssemblyContext2D: TSciChart;
+    protected axisRendererProperty: AxisRenderer;
+    protected autoRangeAnimationProperty: IAutoRangeAnimationOptions;
     private labelStyleProperty;
     private axisAlignmentProperty;
     private isInnerAxisProperty;
     private visibleRangeLimitProperty;
+    private visibleRangeSizeLimitProperty;
     private zoomExtentsRangeProperty;
     private isPrimaryAxisProperty;
     private isStackedAxisProperty;
@@ -345,12 +355,14 @@ export declare abstract class AxisBase2D extends AxisCore implements IThemeable
     private penCacheForMajorTickLines;
     private penCacheForMinorTickLines;
     private solidBrushCacheAxisBands;
+    private solidBrushCacheAxisBackground;
     private axisBorderProperty;
     private solidBrushCacheBorder;
     private axisLengthProperty;
     private offsetProperty;
     private tickCache;
     private backgroundColorProperty;
+    private dpiAdjustedLabelStyleCache;
     /**
      * Creates an instance of the {@link AxisBase2D}
      * @param webAssemblyContext The {@link TSciChart | SciChart 2D WebAssembly Context} containing native methods and
@@ -368,10 +380,15 @@ export declare abstract class AxisBase2D extends AxisCore implements IThemeable
      * Called internally - measures the axis as part of the layout phase
      */
     measure(): void;
+    /**
+     * called internally - allow axis to respond to dpi changes
+     */
+    onDpiChanged(): void;
     /**
      * Called internally - prepares render data before a draw operation
      */
     prepareRenderData(): void;
+    getCurrentCoordinateCalculator(): CoordinateCalculatorBase;
     /**
      * Called internally - draws the current axis using the {@link WebGL2RenderingContext}
      */
@@ -479,7 +496,10 @@ export declare abstract class AxisBase2D extends AxisCore implements IThemeable
      */
     protected notifyPropertyChanged(propertyName: string): void;
     protected getMaxXRange(): NumberRange;
+    protected getAxisSize(): number;
     private getMajorTickIndex;
     private getTicks;
     private getTicksWithCoords;
+    private applyVisibleRangeLimit;
+    private applyVisibleRangeSizeLimit;
 }

package/Charting/Visuals/Axis/AxisBase2D.js

@@ -35,8 +35,8 @@ var NumberRange_1 = require("../../../Core/NumberRange");
 var Thickness_1 = require("../../../Core/Thickness");
 var AxisAlignment_1 = require("../../../types/AxisAlignment");
 var BaseType_1 = require("../../../types/BaseType");
+var DefaultRenderLayer_1 = require("../../../types/DefaultRenderLayer");
 var LabelAlignment_1 = require("../../../types/LabelAlignment");
-var RenderLayer_1 = require("../../../types/RenderLayer");
 var XyDirection_1 = require("../../../types/XyDirection");
 var parseColor_1 = require("../../../utils/parseColor");
 var Pen2DCache_1 = require("../../Drawing/Pen2DCache");
@@ -101,8 +101,9 @@ var AxisBase2D = /** @class */ (function (_super) {
      * @param options Optional parameters of type {@link IAxisBase2dOptions} used to configure the axis at instantiation time
      */
     function AxisBase2D(webAssemblyContext, options) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-        var _this = _super.call(this, options) || this;
+        var _this = this;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        _this = _super.call(this, options) || this;
         /**
          * Gets the {@link AxisLayoutState} class which manages layout
          */
@@ -135,6 +136,7 @@ var AxisBase2D = /** @class */ (function (_super) {
         _this.penCacheForMajorTickLines = new Pen2DCache_1.Pen2DCache(webAssemblyContext);
         _this.penCacheForMinorTickLines = new Pen2DCache_1.Pen2DCache(webAssemblyContext);
         _this.solidBrushCacheAxisBands = new SolidBrushCache_1.SolidBrushCache(webAssemblyContext);
+        _this.solidBrushCacheAxisBackground = new SolidBrushCache_1.SolidBrushCache(webAssemblyContext);
         _this.axisRenderer = new AxisRenderer_1.AxisRenderer(webAssemblyContext);
         _this.axisRenderer.keepLabelsWithinAxis =
             (_a = options === null || options === void 0 ? void 0 : options.keepLabelsWithinAxis) !== null && _a !== void 0 ? _a : _this.axisRenderer.keepLabelsWithinAxis;
@@ -144,13 +146,14 @@ var AxisBase2D = /** @class */ (function (_super) {
         _this.axisTitleRenderer = new AxisTitleRenderer_1.AxisTitleRenderer(webAssemblyContext);
         _this.tickCoordinatesProvider = new DefaultTickCoordinatesProvider_1.DefaultTickCoordinatesProvider();
         _this.visibleRangeLimit = (_d = options === null || options === void 0 ? void 0 : options.visibleRangeLimit) !== null && _d !== void 0 ? _d : _this.visibleRangeLimit;
+        _this.visibleRangeSizeLimit = (_e = options === null || options === void 0 ? void 0 : options.visibleRangeSizeLimit) !== null && _e !== void 0 ? _e : _this.visibleRangeSizeLimit;
         _this.zoomExtentsRange = (options === null || options === void 0 ? void 0 : options.zoomExtentsToInitialRange) ? _this.visibleRange : options === null || options === void 0 ? void 0 : options.zoomExtentsRange;
-        _this.axisAlignment = (_e = options === null || options === void 0 ? void 0 : options.axisAlignment) !== null && _e !== void 0 ? _e : _this.axisAlignment;
-        _this.axisTitle = (_f = options === null || options === void 0 ? void 0 : options.axisTitle) !== null && _f !== void 0 ? _f : _this.axisTitle;
+        _this.axisAlignment = (_f = options === null || options === void 0 ? void 0 : options.axisAlignment) !== null && _f !== void 0 ? _f : _this.axisAlignment;
+        _this.axisTitle = (_g = options === null || options === void 0 ? void 0 : options.axisTitle) !== null && _g !== void 0 ? _g : _this.axisTitle;
         _this.labelStyle = __assign(__assign({}, _this.labelStyle), options === null || options === void 0 ? void 0 : options.labelStyle);
         _this.axisBorder = __assign(__assign({}, _this.axisBorder), options === null || options === void 0 ? void 0 : options.axisBorder);
-        _this.isInnerAxis = (_g = options === null || options === void 0 ? void 0 : options.isInnerAxis) !== null && _g !== void 0 ? _g : _this.isInnerAxis;
-        _this.stackedAxisLength = (_h = options === null || options === void 0 ? void 0 : options.stackedAxisLength) !== null && _h !== void 0 ? _h : _this.stackedAxisLength;
+        _this.isInnerAxis = (_h = options === null || options === void 0 ? void 0 : options.isInnerAxis) !== null && _h !== void 0 ? _h : _this.isInnerAxis;
+        _this.stackedAxisLength = (_j = options === null || options === void 0 ? void 0 : options.stackedAxisLength) !== null && _j !== void 0 ? _j : _this.stackedAxisLength;
         _this.solidBrushCacheBorder = new SolidBrushCache_1.SolidBrushCache(webAssemblyContext);
         if (options === null || options === void 0 ? void 0 : options.labelProvider) {
             if (!("getLabels" in (options === null || options === void 0 ? void 0 : options.labelProvider))) {
@@ -158,7 +161,7 @@ var AxisBase2D = /** @class */ (function (_super) {
             }
         }
         _this.autoRangeAnimationProperty = options === null || options === void 0 ? void 0 : options.autoRangeAnimation;
-        _this.backgroundColor = (_j = options === null || options === void 0 ? void 0 : options.backgroundColor) !== null && _j !== void 0 ? _j : _this.backgroundColor;
+        _this.backgroundColor = (_k = options === null || options === void 0 ? void 0 : options.backgroundColor) !== null && _k !== void 0 ? _k : _this.backgroundColor;
         return _this;
     }
     Object.defineProperty(AxisBase2D.prototype, "labelProvider", {
@@ -250,9 +253,6 @@ var AxisBase2D = /** @class */ (function (_super) {
         get: function () {
             return this.visibleRangeLimitProperty;
         },
-        /**
-         * Gets or sets a property which limits {@link AxisCore.visibleRange}, meaning the chart cannot autorange outside that range
-         */
         set: function (visibleRangeLimit) {
             if (!NumberRange_1.NumberRange.areEqual(this.visibleRangeLimitProperty, visibleRangeLimit)) {
                 this.visibleRangeLimitProperty = visibleRangeLimit;
@@ -262,6 +262,27 @@ var AxisBase2D = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(AxisBase2D.prototype, "visibleRangeSizeLimit", {
+        /**
+         * Gets or sets a property which limits the size of {@link AxisCore.visibleRange}, meaning that the inequality must hold
+         * visibleRangeSizeLimit.min <= visibleRange.max - visiblerRange.min <= visibleRangeSizeLimit.max
+         */
+        get: function () {
+            return this.visibleRangeSizeLimitProperty;
+        },
+        set: function (value) {
+            if (!NumberRange_1.NumberRange.areEqual(this.visibleRangeSizeLimitProperty, value)) {
+                if (value.min < 0)
+                    throw Error("visibleRangeSizeLimit min value must be more or equal 0");
+                if (value.min >= value.max)
+                    throw Error("visibleRangeSizeLimit min value must be less than max value");
+                this.visibleRangeSizeLimitProperty = value;
+                this.notifyPropertyChanged(constants_1.PROPERTY.VISIBLE_RANGE_SIZE_LIMIT);
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(AxisBase2D.prototype, "zoomExtentsRange", {
         /**
          * Gets or sets a property which, if it is set, will be used as the range when zooming extents, rather than the data max range
@@ -429,6 +450,7 @@ var AxisBase2D = /** @class */ (function (_super) {
          */
         set: function (value) {
             if (this.offsetProperty !== value) {
+                this.clearCoordCalcCache();
                 this.offsetProperty = value;
                 this.notifyPropertyChanged(constants_1.PROPERTY.OFFSET);
             }
@@ -457,7 +479,10 @@ var AxisBase2D = /** @class */ (function (_super) {
          * Gets the {@link labelStyle} adjusted for current DPI / Browser zoom level
          */
         get: function () {
-            return DpiHelper_1.DpiHelper.adjustTextStyle(this.labelStyleProperty);
+            if (!this.dpiAdjustedLabelStyleCache) {
+                this.dpiAdjustedLabelStyleCache = DpiHelper_1.DpiHelper.adjustTextStyle(this.labelStyleProperty);
+            }
+            return this.dpiAdjustedLabelStyleCache;
         },
         enumerable: false,
         configurable: true
@@ -474,6 +499,7 @@ var AxisBase2D = /** @class */ (function (_super) {
          */
         set: function (textStyle) {
             this.labelStyleProperty = __assign(__assign({}, this.labelStyle), textStyle);
+            this.dpiAdjustedLabelStyleCache = undefined;
             this.notifyPropertyChanged(constants_1.PROPERTY.TEXT_STYLE);
         },
         enumerable: false,
@@ -559,7 +585,6 @@ var AxisBase2D = /** @class */ (function (_super) {
         // TODO: updateTickProvider, updateLabelProvider
         // TODO: measure for category axes
         if (this.isVisible) {
-            // TODO don't get labels here is drawLabels = false
             var majorTickLabels = this.getTicks(true).majorTickLabels;
             var drawTicks = this.drawMinorTickLines || this.drawMajorTickLines;
             if (SciChartSurfaceBase_1.DebugForDpi) {
@@ -576,11 +601,21 @@ var AxisBase2D = /** @class */ (function (_super) {
         }
         this.isMeasured = true;
     };
+    /**
+     * called internally - allow axis to respond to dpi changes
+     */
+    AxisBase2D.prototype.onDpiChanged = function () {
+        this.dpiAdjustedLabelStyleCache = undefined;
+    };
     /**
      * Called internally - prepares render data before a draw operation
      */
     AxisBase2D.prototype.prepareRenderData = function () {
-        this.getCurrentCoordinateCalculator(true);
+        this.getCurrentCoordinateCalculator();
+    };
+    AxisBase2D.prototype.getCurrentCoordinateCalculator = function () {
+        var coordCalc = _super.prototype.getCurrentCoordinateCalculator.call(this);
+        return coordCalc;
     };
     /**
      * Called internally - draws the current axis using the {@link WebGL2RenderingContext}
@@ -588,9 +623,10 @@ var AxisBase2D = /** @class */ (function (_super) {
     AxisBase2D.prototype.draw = function (renderContext) {
         var _this = this;
         // Draw the Axis borders
+        var axisBordersLayer = (0, WebGlRenderContext2D_1.calculateAbsoluteRenderLayer)(this.parentSurface.layersOffset, this.parentSurface.stepBetweenLayers, DefaultRenderLayer_1.EDefaultRenderLayer.AxisBordersLayer);
         renderContext.enqueueLayeredDraw(function () {
-            return (0, drawBorder_1.drawBorder)(renderContext, _this.webAssemblyContext2D, _this.solidBrushCacheBorder, _this.viewRect, _this.axisBorder.borderLeft, _this.axisBorder.borderTop, _this.axisBorder.borderRight, _this.axisBorder.borderBottom, _this.axisBorder.color);
-        });
+            (0, drawBorder_1.drawBorder)(renderContext, _this.webAssemblyContext2D, _this.solidBrushCacheBorder, _this.viewRect, _this.axisBorder.borderLeft, _this.axisBorder.borderTop, _this.axisBorder.borderRight, _this.axisBorder.borderBottom, _this.axisBorder.color);
+        }, axisBordersLayer);
         if (!this.getIsValidForDrawing()) {
             return;
         }
@@ -609,13 +645,14 @@ var AxisBase2D = /** @class */ (function (_super) {
             // Draw axes and gridlines
             this.drawAxisBandsAndGridLines(renderContext, tickObject, penForMinorGridlines, penForMajorGridlines);
         }
+        var axisLayer = (0, WebGlRenderContext2D_1.calculateAbsoluteRenderLayer)(this.parentSurface.layersOffset, this.parentSurface.stepBetweenLayers, DefaultRenderLayer_1.EDefaultRenderLayer.AxesLayer);
         // make sure axes is drawn at the last stage
         renderContext.enqueueLayeredDraw(function () {
             // Draw background
             if (_this.backgroundColorProperty) {
                 var viewAxisRect = _this.axisRenderer.viewRect;
                 var viewTitleRect = _this.axisTitleRenderer.viewRect;
-                var brush = new _this.webAssemblyContext2D.SCRTSolidBrush((0, parseColor_1.parseColorToUIntArgb)(_this.backgroundColorProperty), false);
+                var brush = _this.solidBrushCacheAxisBackground.newBrush(_this.backgroundColorProperty, false);
                 var nativeAxisRect = void 0;
                 var nativeTitleRect = void 0;
                 // Empty space covering for axis coloring
@@ -656,7 +693,6 @@ var AxisBase2D = /** @class */ (function (_super) {
                     vecRects.push_back(nativeTitleRect);
                     renderContext.drawRects(vecRects, brush, viewTitleRect.left, viewTitleRect.top);
                 }
-                brush.delete();
             }
             // Draw axis labels
             if (_this.drawLabels) {
@@ -674,7 +710,10 @@ var AxisBase2D = /** @class */ (function (_super) {
             }
             // Draw axis title
             _this.axisTitleRenderer.draw(renderContext, _this.dpiAdjustedAxisTitleStyle, _this.axisAlignment, _this.parentSurface.debugRendering);
-        });
+            if (_this.labelProvider.useNativeText && _this.parentSurface.renderNativeAxisLabelsImmediately) {
+                renderContext.endFonts(true);
+            }
+        }, axisLayer);
     };
     /**
      * Function to draw axis areas with red color
@@ -763,9 +802,8 @@ var AxisBase2D = /** @class */ (function (_super) {
         if (this.growBy && maxRange) {
             maxRange = maxRange.growBy(this.growBy);
         }
-        if (this.visibleRangeLimit && maxRange) {
-            maxRange = maxRange.clip(this.visibleRangeLimit);
-        }
+        maxRange = this.applyVisibleRangeLimit(maxRange);
+        maxRange = this.applyVisibleRangeSizeLimit(maxRange);
         return maxRange || new NumberRange_1.NumberRange();
     };
     /**
@@ -779,6 +817,7 @@ var AxisBase2D = /** @class */ (function (_super) {
             return false;
         }
         var translatedRange = this.getCurrentCoordinateCalculator().translateBy(pixelsToScroll, startVisibleRange);
+        // TODO: refactor to use this.applyVisibleRangeLimit() method
         if (this.visibleRangeLimit) {
             var limitDelta = 0;
             if (translatedRange.min < this.visibleRangeLimit.min) {
@@ -791,7 +830,7 @@ var AxisBase2D = /** @class */ (function (_super) {
                 translatedRange = new NumberRange_1.NumberRange(translatedRange.min + limitDelta, translatedRange.max + limitDelta);
             }
         }
-        this.visibleRange = translatedRange;
+        this.visibleRange = this.applyVisibleRangeSizeLimit(translatedRange);
         return true;
     };
     /**
@@ -805,12 +844,8 @@ var AxisBase2D = /** @class */ (function (_super) {
         if (translatedRange.max < translatedRange.min) {
             return;
         }
-        if (this.visibleRangeLimit) {
-            this.visibleRange = translatedRange.clip(this.visibleRangeLimit);
-        }
-        else {
-            this.visibleRange = translatedRange;
-        }
+        var newVisibleRange = this.applyVisibleRangeLimit(translatedRange);
+        this.visibleRange = this.applyVisibleRangeSizeLimit(newVisibleRange);
     };
     /**
      * @summary Programmatically zooms the axis with a from and to coordinate
@@ -829,7 +864,8 @@ var AxisBase2D = /** @class */ (function (_super) {
         var toValue = coordCalc.getDataValue(toCoord);
         var min = fromValue < toValue ? fromValue : toValue;
         var max = fromValue < toValue ? toValue : fromValue;
-        this.animateVisibleRange(new NumberRange_1.NumberRange(min, max), duration, easingFunction);
+        var newVisibleRange = this.applyVisibleRangeSizeLimit(new NumberRange_1.NumberRange(min, max));
+        this.animateVisibleRange(newVisibleRange, duration, easingFunction);
     };
     AxisBase2D.prototype.scale = function (initialRange, delta, isMoreThanHalf) {
         var deltaRange = initialRange.max - initialRange.min;
@@ -882,6 +918,7 @@ var AxisBase2D = /** @class */ (function (_super) {
         this.penCacheForMinorTickLines = (0, Deleter_1.deleteSafe)(this.penCacheForMinorTickLines);
         this.solidBrushCacheBorder = (0, Deleter_1.deleteSafe)(this.solidBrushCacheBorder);
         this.solidBrushCacheAxisBands = (0, Deleter_1.deleteSafe)(this.solidBrushCacheAxisBands);
+        this.solidBrushCacheAxisBackground = (0, Deleter_1.deleteSafe)(this.solidBrushCacheAxisBackground);
         this.labelProviderProperty = (0, Deleter_1.deleteSafe)(this.labelProvider);
         this.axisRendererProperty = (0, Deleter_1.deleteSafe)(this.axisRenderer);
     };
@@ -951,21 +988,24 @@ var AxisBase2D = /** @class */ (function (_super) {
         // Draw axis bands
         if (this.drawMajorBands) {
             var solidBrush_1 = this.solidBrushCacheAxisBands.newBrush(this.axisBandsFill, true);
+            var axisBandsLayer = (0, WebGlRenderContext2D_1.calculateAbsoluteRenderLayer)(this.parentSurface.layersOffset, this.parentSurface.stepBetweenLayers, DefaultRenderLayer_1.EDefaultRenderLayer.AxisBandsLayer);
             renderContext.enqueueLayeredDraw(function () {
                 _this.drawAxisBands(renderContext, tickObject.majorTicks, tickObject.majorTickCoords, solidBrush_1);
-            }, RenderLayer_1.ERenderLayer.First);
+            }, axisBandsLayer);
         }
         // Draw minor grid lines
         if (this.drawMinorGridLines) {
+            var minorGridLinesLayer = (0, WebGlRenderContext2D_1.calculateAbsoluteRenderLayer)(this.parentSurface.layersOffset, this.parentSurface.stepBetweenLayers, DefaultRenderLayer_1.EDefaultRenderLayer.MinorGridLinesLayer);
             renderContext.enqueueLayeredDraw(function () {
                 _this.drawGridLines(renderContext, tickObject.minorTickCoords, penForMinorGridLines);
-            }, RenderLayer_1.ERenderLayer.Second);
+            }, minorGridLinesLayer);
         }
         // Draw major grid lines
         if (this.drawMajorGridLines) {
+            var majorGridLinesLayer = (0, WebGlRenderContext2D_1.calculateAbsoluteRenderLayer)(this.parentSurface.layersOffset, this.parentSurface.stepBetweenLayers, DefaultRenderLayer_1.EDefaultRenderLayer.MajorGridLinesLayer);
             renderContext.enqueueLayeredDraw(function () {
                 _this.drawGridLines(renderContext, tickObject.majorTickCoords, penForMajorGridLines);
-            }, RenderLayer_1.ERenderLayer.Third);
+            }, majorGridLinesLayer);
         }
     };
     /**
@@ -1092,13 +1132,13 @@ var AxisBase2D = /** @class */ (function (_super) {
         if (this.growBy) {
             maximumRange = maximumRange.growBy(this.growBy);
         }
-        if (this.visibleRangeLimit) {
-            maximumRange = maximumRange
-                ? maximumRange.clip(this.visibleRangeLimit)
-                : this.visibleRange.clip(this.visibleRangeLimit);
-        }
+        maximumRange = this.applyVisibleRangeLimit(maximumRange !== null && maximumRange !== void 0 ? maximumRange : this.visibleRange);
+        maximumRange = this.applyVisibleRangeSizeLimit(maximumRange);
         return maximumRange;
     };
+    AxisBase2D.prototype.getAxisSize = function () {
+        return this.axisLength;
+    };
     AxisBase2D.prototype.getMajorTickIndex = function (tick) {
         var step = this.majorDeltaProperty;
         var index = tick / step;
@@ -1149,6 +1189,43 @@ var AxisBase2D = /** @class */ (function (_super) {
         this.tickCache.minorTickCoords = minorTickCoords;
         return this.tickCache;
     };
+    AxisBase2D.prototype.applyVisibleRangeLimit = function (visibleRange) {
+        if (!visibleRange)
+            return undefined;
+        if (!this.visibleRangeLimit)
+            return visibleRange;
+        var newRange = visibleRange.clip(this.visibleRangeLimit);
+        if (newRange.min >= newRange.max) {
+            console.warn("Can not apply visibleRangeLimit for the ".concat(this.isXAxis ? "xAxis" : "yAxis", " with ID ").concat(this.id));
+            return visibleRange;
+        }
+        else {
+            return newRange;
+        }
+    };
+    AxisBase2D.prototype.applyVisibleRangeSizeLimit = function (visibleRange) {
+        if (!visibleRange)
+            return undefined;
+        if (!this.visibleRangeSizeLimit)
+            return visibleRange;
+        var currentSize = visibleRange.max - visibleRange.min;
+        if (currentSize < 0) {
+            console.warn("Can not apply applyVisibleRangeSizeLimit for the ".concat(this.isXAxis ? "xAxis" : "yAxis", " with ID ").concat(this.id));
+            return visibleRange;
+        }
+        else {
+            var newVisibleRange = visibleRange;
+            var _a = this.visibleRangeSizeLimit, min = _a.min, max = _a.max;
+            var middleValue = visibleRange.min + currentSize / 2;
+            if (currentSize < min) {
+                newVisibleRange = new NumberRange_1.NumberRange(middleValue - min / 2, middleValue + min / 2);
+            }
+            else if (currentSize > max) {
+                newVisibleRange = new NumberRange_1.NumberRange(middleValue - max / 2, middleValue + max / 2);
+            }
+            return newVisibleRange;
+        }
+    };
     return AxisBase2D;
 }(AxisCore_1.AxisCore));
 exports.AxisBase2D = AxisBase2D;

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

@@ -54,10 +54,11 @@ export declare type TTextStyle = {
     fontWeight?: string;
     fontStyle?: string;
     color?: string;
-    /** Padding is left 4, right 4, top 4, bottom 0 by default.  This is because there is natural space below the text baseline.
-     * If you are using text labels rather than just numbers, you may want to increase the bottom padding.
+    /** Padding is left 4, right 4, top 2, bottom 0 by default.  This is because there is natural space below the text baseline.
+     * If you are using text labels rather than just numbers, or when using native text, you may want to increase the bottom padding.
      */
     padding?: Thickness;
+    /** Horizontal label alignment for vertical axes.  Default Auto */
     alignment?: ELabelAlignment;
 };
 /**
@@ -737,10 +738,10 @@ export declare abstract class AxisCore implements IAxisParams, IDeletable {
      */
     set autoTicks(value: boolean);
     /**
-     * Gets the current {@link CoordinateCalculatorBase} instance. Valid for this render-pass only, the coordinate-calculator
-     * allows you to transform between pixel and data coordinates (and vice versa)
+     * Gets the current {@link CoordinateCalculatorBase} instance. Recreates the coordinate-calculator if it does not match the axis values
+     * The coordinate-calculator allows you to transform between pixel and data coordinates (and vice versa)
      */
-    getCurrentCoordinateCalculator(forceRecreate?: boolean): CoordinateCalculatorBase;
+    getCurrentCoordinateCalculator(): CoordinateCalculatorBase;
     /** Force the recreation of the coordinate calculator the next time it is requested
      * Required if the dataSeries has changed on a category axis
      */
@@ -763,6 +764,10 @@ export declare abstract class AxisCore implements IAxisParams, IDeletable {
      * allows you to transform between pixel and data coordinates (and vice versa)
      */
     protected abstract getCurrentCoordinateCalculatorInternal(): CoordinateCalculatorBase;
+    /**
+     * Gets the long dimension of the axis, in pixels
+     */
+    protected abstract getAxisSize(): number;
     /**
      * SET INTERNALLY. Sets whether this axis is an XAxis or not
      * @remarks

package/Charting/Visuals/Axis/AxisCore.js

@@ -187,6 +187,7 @@ var AxisCore = /** @class */ (function () {
         this.drawMajorBandsProperty = (_x = options === null || options === void 0 ? void 0 : options.drawMajorBands) !== null && _x !== void 0 ? _x : this.drawMajorBandsProperty;
         this.axisBandsFillProperty = (_y = options === null || options === void 0 ? void 0 : options.axisBandsFill) !== null && _y !== void 0 ? _y : this.axisBandsFillProperty;
         this.flippedCoordinatesProperty = (_z = options === null || options === void 0 ? void 0 : options.flippedCoordinates) !== null && _z !== void 0 ? _z : this.flippedCoordinatesProperty;
+        this.getCurrentCoordinateCalculator = this.getCurrentCoordinateCalculator.bind(this);
     }
     Object.defineProperty(AxisCore.prototype, "isCategoryAxis", {
         /**
@@ -378,6 +379,7 @@ var AxisCore = /** @class */ (function () {
             var _a;
             if (!((_a = this.visibleRangeProperty) === null || _a === void 0 ? void 0 : _a.equals(visibleRange))) {
                 this.visibleRangeProperty = visibleRange;
+                this.clearCoordCalcCache();
                 this.visibleRangeChanged.raiseEvent(new VisibleRangeChangedArgs_1.VisibleRangeChangedArgs(visibleRange));
                 this.notifyPropertyChanged(constants_1.PROPERTY.VISIBLE_RANGE);
             }
@@ -679,8 +681,11 @@ var AxisCore = /** @class */ (function () {
          * 0..10 will render from 10 to 0
          */
         set: function (flippedCoordinates) {
-            this.flippedCoordinatesProperty = flippedCoordinates;
-            this.notifyPropertyChanged(constants_1.PROPERTY.FLIPPED_COORDINATES);
+            if (this.flippedCoordinatesProperty !== flippedCoordinates) {
+                this.flippedCoordinatesProperty = flippedCoordinates;
+                this.clearCoordCalcCache();
+                this.notifyPropertyChanged(constants_1.PROPERTY.FLIPPED_COORDINATES);
+            }
         },
         enumerable: false,
         configurable: true
@@ -957,15 +962,11 @@ var AxisCore = /** @class */ (function () {
         configurable: true
     });
     /**
-     * Gets the current {@link CoordinateCalculatorBase} instance. Valid for this render-pass only, the coordinate-calculator
-     * allows you to transform between pixel and data coordinates (and vice versa)
+     * Gets the current {@link CoordinateCalculatorBase} instance. Recreates the coordinate-calculator if it does not match the axis values
+     * The coordinate-calculator allows you to transform between pixel and data coordinates (and vice versa)
      */
-    AxisCore.prototype.getCurrentCoordinateCalculator = function (forceRecreate) {
-        if (forceRecreate === void 0) { forceRecreate = false; }
-        if (forceRecreate && this.coordCalcCache) {
-            this.coordCalcCache = (0, Deleter_1.deleteSafe)(this.coordCalcCache);
-        }
-        if (!this.coordCalcCache) {
+    AxisCore.prototype.getCurrentCoordinateCalculator = function () {
+        if (!this.coordCalcCache || this.coordCalcCache.viewportDimension !== this.getAxisSize()) {
             this.coordCalcCache = this.getCurrentCoordinateCalculatorInternal();
         }
         return this.coordCalcCache;