scichart 2.0.2139 → 2.0.2144

package/Builder/buildSeries.d.ts

@@ -2,7 +2,7 @@ import { ISelectedPointOptions } from "../Charting/Model/DataPointSelectionPalet
 import { IUniformHeatmapSeriesOptions } from "../Charting/Model/UniformHeatmapDataSeries";
 import { IPointMarkerOptions } from "../Charting/Visuals/PointMarkers/BasePointMarker";
 import { ISpritePointMarkerOptions } from "../Charting/Visuals/PointMarkers/SpritePointMarker";
-import { IBaseAnimationOptions } from "../Charting/Visuals/RenderableSeries/Animations/BaseAnimation";
+import { IBaseAnimationOptions } from "../Charting/Visuals/RenderableSeries/Animations/SeriesAnimation";
 import { IFadeAnimationOptions } from "../Charting/Visuals/RenderableSeries/Animations/FadeAnimation";
 import { IScaleAnimationOptions } from "../Charting/Visuals/RenderableSeries/Animations/ScaleAnimation";
 import { ISweepAnimationOptions } from "../Charting/Visuals/RenderableSeries/Animations/SweepAnimation";

package/Charting/ChartModifiers/LegendModifier.js

@@ -84,6 +84,7 @@ var LegendModifier = /** @class */ (function (_super) {
     /** @inheritDoc */
     LegendModifier.prototype.onDetach = function () {
         _super.prototype.onDetach.call(this);
+        this.sciChartLegend.delete();
         this.sciChartLegend.setRootDiv(undefined);
         this.sciChartLegend.setRenderableSeriesArray([]);
         this.sciChartLegend.setInvalidateParentSurface(undefined);

package/Charting/ChartModifiers/OverviewRangeSelectionModifier.d.ts

@@ -1,4 +1,4 @@
-import { AnimationToken } from "../../Core/AnimationToken";
+import { IGenericAnimation } from "../../Core/Animations/GenericAnimation";
 import { NumberRange } from "../../Core/NumberRange";
 import { Point } from "../../Core/Point";
 import { EChart2DModifierType } from "../../types/ChartModifierType";
@@ -29,7 +29,7 @@ export interface IRangeSelectionModifierOptions extends IChartModifierBaseOption
 export declare class OverviewRangeSelectionModifier extends ChartModifierBase2D {
     readonly type = EChart2DModifierType.OverviewRangeSelection;
     onSelectedAreaChanged: (area?: NumberRange) => void;
-    overviewPositionAnimation: AnimationToken;
+    overviewPositionAnimation: IGenericAnimation;
     animationDuration: number;
     animate: boolean;
     protected pointTo: Point;

package/Charting/ChartModifiers/OverviewRangeSelectionModifier.js

@@ -112,7 +112,7 @@ var OverviewRangeSelectionModifier = /** @class */ (function (_super) {
         }
         if (this.isClicked) {
             args.handled = true;
-            (_a = this.overviewPositionAnimation) === null || _a === void 0 ? void 0 : _a.cancelAnimation();
+            (_a = this.overviewPositionAnimation) === null || _a === void 0 ? void 0 : _a.cancel();
             var seriesViewRect = this.parentSurface.seriesViewRect;
             this.pointTo = translate_1.translateFromCanvasToSeriesViewRect(Rect_1.Rect.clipPointToRect(args.mousePoint, seriesViewRect), seriesViewRect);
             this.isClicked = false;
@@ -131,6 +131,7 @@ var OverviewRangeSelectionModifier = /** @class */ (function (_super) {
             };
             if (this.animate) {
                 this.overviewPositionAnimation = NumberRangeAnimator_1.NumberRangeAnimator.animate(initialCoordinatesRange, finalCoordinatesRange, this.animationDuration, updateAnnotationCoordinates, null);
+                this.parentSurface.addAnimation(this.overviewPositionAnimation);
             }
             else {
                 updateAnnotationCoordinates(finalCoordinatesRange);
@@ -201,7 +202,7 @@ var OverviewRangeSelectionModifier = /** @class */ (function (_super) {
         if (this.parentSurface) {
             var onDrag = function () {
                 var _a;
-                (_a = _this.overviewPositionAnimation) === null || _a === void 0 ? void 0 : _a.cancelAnimation();
+                (_a = _this.overviewPositionAnimation) === null || _a === void 0 ? void 0 : _a.cancel();
                 var selectedArea = new NumberRange_1.NumberRange(_this.rangeSelectionAnnotation.x1, _this.rangeSelectionAnnotation.x2);
                 _this.selectedAreaProperty = selectedArea;
                 _this.annotationBeforeSelectedAreaProperty.x2 = _this.rangeSelectionAnnotation.x1;

package/Charting/Model/BaseDataSeries.d.ts

@@ -1,7 +1,7 @@
 import { EventHandler } from "../../Core/EventHandler";
 import { NumberRange } from "../../Core/NumberRange";
 import { DoubleVector, TSciChart } from "../../types/TSciChart";
-import { BaseAnimation } from "../Visuals/RenderableSeries/Animations/BaseAnimation";
+import { SeriesAnimation } from "../Visuals/RenderableSeries/Animations/SeriesAnimation";
 import { EDataChangeType, EDataSeriesType, EDataSeriesValueType, IDataChangeArgs, IDataSeries } from "./IDataSeries";
 import { IMetadataGenerator, IPointMetadata } from "./IPointMetadata";
 /**
@@ -166,7 +166,7 @@ export declare abstract class BaseDataSeries implements IDataSeries {
      * @param progress The animation progress from 0 to 1
      * @param animation The animation
      */
-    updateAnimationProperties(progress: number, animation: BaseAnimation): void;
+    updateAnimationProperties(progress: number, animation: SeriesAnimation): void;
     /** @inheritDoc */
     toJSON(excludeData?: boolean): any;
     protected validateIndex(index: number, message?: string): void;

package/Charting/Model/OhlcDataSeries.d.ts

@@ -1,7 +1,7 @@
 import { NumberRange } from "../../Core/NumberRange";
 import { NumberArray } from "../../types/NumberArray";
 import { DoubleVector, TSciChart } from "../../types/TSciChart";
-import { BaseAnimation } from "../Visuals/RenderableSeries/Animations/BaseAnimation";
+import { SeriesAnimation } from "../Visuals/RenderableSeries/Animations/SeriesAnimation";
 import { BaseDataSeries, IBaseDataSeriesOptions } from "./BaseDataSeries";
 import { EDataSeriesType, EDataSeriesValueType } from "./IDataSeries";
 import { IPointMetadata } from "./IPointMetadata";
@@ -206,7 +206,7 @@ export declare class OhlcDataSeries extends BaseDataSeries {
     /** @inheritDoc */
     validateAnimationVectors(): void;
     /** @inheritDoc */
-    updateAnimationProperties(progress: number, animation: BaseAnimation): void;
+    updateAnimationProperties(progress: number, animation: SeriesAnimation): void;
     /** @inheritDoc */
     toJSON(excludeData?: boolean): any;
     private getOHLCValues;

package/Charting/Model/XyyDataSeries.d.ts

@@ -1,7 +1,7 @@
 import { NumberRange } from "../../Core/NumberRange";
 import { NumberArray } from "../../types/NumberArray";
 import { DoubleVector, TSciChart } from "../../types/TSciChart";
-import { BaseAnimation } from "../Visuals/RenderableSeries/Animations/BaseAnimation";
+import { SeriesAnimation } from "../Visuals/RenderableSeries/Animations/SeriesAnimation";
 import { BaseDataSeries, IBaseDataSeriesOptions } from "./BaseDataSeries";
 import { EDataSeriesType, EDataSeriesValueType } from "./IDataSeries";
 import { IPointMetadata } from "./IPointMetadata";
@@ -158,7 +158,7 @@ export declare class XyyDataSeries extends BaseDataSeries {
     /** @inheritDoc */
     validateAnimationVectors(): void;
     /** @inheritDoc */
-    updateAnimationProperties(progress: number, animation: BaseAnimation): void;
+    updateAnimationProperties(progress: number, animation: SeriesAnimation): void;
     /** @inheritDoc */
     toJSON(excludeData?: boolean): any;
     private getYY1Values;

package/Charting/Model/XyzDataSeries.d.ts

@@ -1,6 +1,6 @@
 import { NumberArray } from "../../types/NumberArray";
 import { DoubleVector, TSciChart } from "../../types/TSciChart";
-import { BaseAnimation } from "../Visuals/RenderableSeries/Animations/BaseAnimation";
+import { SeriesAnimation } from "../Visuals/RenderableSeries/Animations/SeriesAnimation";
 import { BaseDataSeries, IBaseDataSeriesOptions } from "./BaseDataSeries";
 import { EDataSeriesType } from "./IDataSeries";
 import { IPointMetadata } from "./IPointMetadata";
@@ -155,7 +155,7 @@ export declare class XyzDataSeries extends BaseDataSeries {
     /** @inheritDoc */
     validateAnimationVectors(): void;
     /** @inheritDoc */
-    updateAnimationProperties(progress: number, animation: BaseAnimation): void;
+    updateAnimationProperties(progress: number, animation: SeriesAnimation): void;
     /** @inheritDoc */
     toJSON(excludeData?: boolean): any;
     private getYZValues;

package/Charting/Services/SciChartRenderer.js

@@ -15,6 +15,7 @@ var AutoRange_1 = require("../../types/AutoRange");
 var AxisAlignment_1 = require("../../types/AxisAlignment");
 var RenderLayer_1 = require("../../types/RenderLayer");
 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");
 /**
@@ -93,7 +94,7 @@ var SciChartRenderer = /** @class */ (function () {
         this.drawSvgAnnotations(svgAnnotations, xyAxesById[0], xyAxesById[1]);
         // Update watermark
         var left = seriesViewRect.x;
-        var bottom = renderContext.viewportSize.height - (seriesViewRect.top + seriesViewRect.height);
+        var bottom = SciChartSurfaceBase_1.SciChartSurfaceBase.domMasterCanvas.height - (seriesViewRect.top + seriesViewRect.height);
         this.sciChartSurface.updateWatermark(left, bottom);
         // Step 10 Call OnParentSurfaceRendered
         this.onParentSurfaceRendered();
@@ -145,6 +146,8 @@ var SciChartRenderer = /** @class */ (function () {
         });
     };
     SciChartRenderer.prototype.validate = function () {
+        this.sciChartSurface.xAxes.asArray().forEach(function (axis) { return (axis.isMeasured = false); });
+        this.sciChartSurface.yAxes.asArray().forEach(function (axis) { return (axis.isMeasured = false); });
         // TODO: Check the surface is valid and output error codes to console
         // Checks would include
         // Is XAxes and YAxes collection null or empty
@@ -238,13 +241,20 @@ var SciChartRenderer = /** @class */ (function () {
         });
     };
     SciChartRenderer.prototype.tryPerformAutoRangeOn = function (axis, sciChartSurface) {
-        var shouldAutoRange = axis.autoRange === AutoRange_1.EAutoRange.Always ||
-            (axis.autoRange === AutoRange_1.EAutoRange.Once && (!axis.hasValidVisibleRange() || axis.hasDefaultVisibleRange()));
+        var firstRange = !axis.hasValidVisibleRange() || axis.hasDefaultVisibleRange();
+        var shouldAutoRange = axis.autoRange === AutoRange_1.EAutoRange.Always || (axis.autoRange === AutoRange_1.EAutoRange.Once && firstRange);
         if (shouldAutoRange) {
             // Different implementation for YAxis and XAxis because of windowing
             var newRange = axis.getMaximumRange();
             if (!newRange.equals(axis.visibleRange)) {
-                axis.visibleRange = newRange;
+                if (!axis.autoRangeAnimation ||
+                    (firstRange && !axis.autoRangeAnimation.animateInitialRanging) ||
+                    (!firstRange && !axis.autoRangeAnimation.animateSubsequentRanging)) {
+                    axis.visibleRange = newRange;
+                }
+                else if (!newRange.equals(axis.animatedVisibleRange)) {
+                    sciChartSurface.addAnimation(axis.animateVisibleRange(newRange, axis.autoRangeAnimation.duration, axis.autoRangeAnimation.easing));
+                }
             }
         }
     };

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

@@ -70,6 +70,16 @@ export declare type TTickObject = {
      */
     minorTickCoords: number[];
 };
+export interface IAutoRangeAnimationOptions {
+    /** Whether to animate the first autorange  Default false */
+    animateInitialRanging: boolean;
+    /** Whether to animate all other autoRanges */
+    animateSubsequentRanging: boolean;
+    /** The length of the animation */
+    duration: number;
+    /** The easing function to use */
+    easing?: TEasingFn;
+}
 export interface IAxisBase2dOptions extends IAxisCoreOptions {
     /**
      * Limits {@link AxisCore.visibleRange}, meaning the chart cannot autorange outside that range
@@ -116,6 +126,10 @@ export interface IAxisBase2dOptions extends IAxisCoreOptions {
      * as the bounding box of ratoated text may overlap even if the text itself does not.
      */
     hideOverlappingLabels?: boolean;
+    /**
+     * Options to configure if and how the axis should animate when autoRanging
+     */
+    autoRangeAnimation?: IAutoRangeAnimationOptions;
 }
 /**
  * The base class for 2D Chart Axis within SciChart - High Performance {@link https://www.scichart.com/javascript-chart-features | JavaScript Charts}.
@@ -128,28 +142,6 @@ export interface IAxisBase2dOptions extends IAxisCoreOptions {
  *  Set axis on the {@link SciChartSurface.xAxes} or {@link SciChartSurface.yAxes} collections in 2D Charts.
  */
 export declare abstract class AxisBase2D extends AxisCore implements IThemeable {
-    abstract type: EAxisType.CategoryAxis | EAxisType.LogarithmicAxis | EAxisType.NumericAxis;
-    /**
-     * Gets the parent {@link SciChartSurface} that this axis is attached to
-     */
-    parentSurface: SciChartSurface;
-    /**
-     * Gets the {@link AxisTitleRenderer} instance responsible for drawing the axis title
-     */
-    readonly axisTitleRenderer: AxisTitleRenderer;
-    /**
-     * Gets the {@link AxisLayoutState} class which manages layout
-     */
-    readonly axisLayoutState: AxisLayoutState;
-    /**
-     * Gets the {@link Rect | ViewRect} - a rectangle defining the location of the axis within the parent {@link SciChartSurface}
-     */
-    viewRect: Rect;
-    /**
-     * The {@link TSciChart | SciChart 2D WebAssembly Context} containing native methods and
-     * access to our WebGL2 Engine and WebAssembly numerical methods
-     */
-    protected axisRendererProperty: AxisRenderer;
     /**
      * Gets or sets a {@link LabelProvider} - a class which is responsible for formatting axis labels and cursor labels from numeric values
      */
@@ -158,36 +150,6 @@ export declare abstract class AxisBase2D extends AxisCore implements IThemeable
      * Gets or sets a {@link LabelProvider} - a class which is responsible for formatting axis labels and cursor labels from numeric values
      */
     set labelProvider(labelProvider: LabelProviderBase2D);
-    protected readonly webAssemblyContext2D: TSciChart;
-    private labelStyleProperty;
-    private axisAlignmentProperty;
-    private isInnerAxisProperty;
-    private visibleRangeLimitProperty;
-    private zoomExtentsRangeProperty;
-    private isPrimaryAxisProperty;
-    private isStackedAxisProperty;
-    private penCacheForMajorGridLines;
-    private penCacheForMinorGridLines;
-    private penCacheForMajorTickLines;
-    private penCacheForMinorTickLines;
-    private solidBrushCacheAxisBands;
-    private axisBorderProperty;
-    private solidBrushCacheBorder;
-    private axisLengthProperty;
-    private offsetProperty;
-    private tickCache;
-    /**
-     * Creates an instance of the {@link AxisBase2D}
-     * @param webAssemblyContext The {@link TSciChart | SciChart 2D WebAssembly Context} containing native methods and
-     * access to our WebGL2 Engine and WebAssembly numerical methods
-     * @param options Optional parameters of type {@link IAxisBase2dOptions} used to configure the axis at instantiation time
-     */
-    protected constructor(webAssemblyContext: TSciChart, options?: IAxisBase2dOptions);
-    /**
-     * @inheritDoc
-     */
-    applyTheme(themeProvider: IThemeProvider): void;
-    onAttach(parentSurface: SciChartSurface, isXAxis: boolean, isPrimaryAxis: boolean): void;
     /**
      * Gets the {@link AxisRenderer} instance responsible for drawing the axis
      */
@@ -304,6 +266,67 @@ export declare abstract class AxisBase2D extends AxisCore implements IThemeable
      * Gets or sets the Axis Border properties
      */
     set axisBorder(border: TBorder);
+    /**
+     * Gets or sets a {@link IAutoRangeAnimationOptions} object that controls if and how the visible range is animated during autoRanging
+     */
+    get autoRangeAnimation(): IAutoRangeAnimationOptions;
+    /**
+     * Gets or sets a {@link IAutoRangeAnimationOptions} object that controls if and how the visible range is animated during autoRanging
+     */
+    set autoRangeAnimation(autoRangeAnimation: IAutoRangeAnimationOptions);
+    abstract type: EAxisType.CategoryAxis | EAxisType.LogarithmicAxis | EAxisType.NumericAxis;
+    /**
+     * Gets the parent {@link SciChartSurface} that this axis is attached to
+     */
+    parentSurface: SciChartSurface;
+    /**
+     * Gets the {@link AxisTitleRenderer} instance responsible for drawing the axis title
+     */
+    readonly axisTitleRenderer: AxisTitleRenderer;
+    /**
+     * Gets the {@link AxisLayoutState} class which manages layout
+     */
+    readonly axisLayoutState: AxisLayoutState;
+    /**
+     * 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;
+    private labelStyleProperty;
+    private axisAlignmentProperty;
+    private isInnerAxisProperty;
+    private visibleRangeLimitProperty;
+    private zoomExtentsRangeProperty;
+    private isPrimaryAxisProperty;
+    private isStackedAxisProperty;
+    private penCacheForMajorGridLines;
+    private penCacheForMinorGridLines;
+    private penCacheForMajorTickLines;
+    private penCacheForMinorTickLines;
+    private solidBrushCacheAxisBands;
+    private axisBorderProperty;
+    private solidBrushCacheBorder;
+    private axisLengthProperty;
+    private offsetProperty;
+    private tickCache;
+    /**
+     * Creates an instance of the {@link AxisBase2D}
+     * @param webAssemblyContext The {@link TSciChart | SciChart 2D WebAssembly Context} containing native methods and
+     * access to our WebGL2 Engine and WebAssembly numerical methods
+     * @param options Optional parameters of type {@link IAxisBase2dOptions} used to configure the axis at instantiation time
+     */
+    protected constructor(webAssemblyContext: TSciChart, options?: IAxisBase2dOptions);
+    /**
+     * @inheritDoc
+     */
+    applyTheme(themeProvider: IThemeProvider): void;
+    onAttach(parentSurface: SciChartSurface, isXAxis: boolean, isPrimaryAxis: boolean): void;
     /**
      * Called internally - measures the axis as part of the layout phase
      */

package/Charting/Visuals/Axis/AxisBase2D.js

@@ -32,6 +32,7 @@ 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 LabelAlignment_1 = require("../../../types/LabelAlignment");
 var RenderLayer_1 = require("../../../types/RenderLayer");
 var XyDirection_1 = require("../../../types/XyDirection");
 var parseColor_1 = require("../../../utils/parseColor");
@@ -48,7 +49,6 @@ var AxisLayoutState_1 = require("./AxisLayoutState");
 var AxisRenderer_1 = require("./AxisRenderer");
 var AxisTitleRenderer_1 = require("./AxisTitleRenderer");
 var constants_1 = require("./constants");
-var LabelAlignment_1 = require("../../../types/LabelAlignment");
 /**
  * Defines the clipping mode for scrolling operations found on {@link AxisBase2D.scroll}
  */
@@ -149,6 +149,7 @@ var AxisBase2D = /** @class */ (function (_super) {
                 options.labelProvider = classFactory_1.createType(BaseType_1.EBaseType.LabelProvider, options.labelProvider.type, webAssemblyContext, options.labelProvider.options);
             }
         }
+        _this.autoRangeAnimationProperty = options === null || options === void 0 ? void 0 : options.autoRangeAnimation;
         return _this;
     }
     Object.defineProperty(AxisBase2D.prototype, "labelProvider", {
@@ -168,38 +169,6 @@ var AxisBase2D = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    /**
-     * @inheritDoc
-     */
-    AxisBase2D.prototype.applyTheme = function (themeProvider) {
-        var previousThemeProvider = this.parentSurface.previousThemeProvider;
-        if (this.axisBandsFill === previousThemeProvider.axisBandsFill) {
-            this.axisBandsFill = themeProvider.axisBandsFill;
-        }
-        if (this.labelStyle.color === previousThemeProvider.tickTextBrush) {
-            this.labelStyle = { color: themeProvider.tickTextBrush };
-        }
-        if (this.minorGridLineStyle.color === previousThemeProvider.minorGridLineBrush) {
-            this.minorGridLineStyle = { color: themeProvider.minorGridLineBrush };
-        }
-        if (this.majorGridLineStyle.color === previousThemeProvider.majorGridLineBrush) {
-            this.majorGridLineStyle = { color: themeProvider.majorGridLineBrush };
-        }
-        if (this.minorTickLineStyle.color === previousThemeProvider.minorGridLineBrush) {
-            this.minorTickLineStyle = { color: themeProvider.minorGridLineBrush };
-        }
-        if (this.majorTickLineStyle.color === previousThemeProvider.majorGridLineBrush) {
-            this.majorTickLineStyle = { color: themeProvider.majorGridLineBrush };
-        }
-        if (this.axisTitleStyle.color === previousThemeProvider.axisTitleColor) {
-            this.axisTitleStyle = { color: themeProvider.axisTitleColor };
-        }
-    };
-    AxisBase2D.prototype.onAttach = function (parentSurface, isXAxis, isPrimaryAxis) {
-        this.parentSurface = parentSurface;
-        this.setIsXAxis(isXAxis);
-        this.isPrimaryAxisProperty = isPrimaryAxis;
-    };
     Object.defineProperty(AxisBase2D.prototype, "axisRenderer", {
         /**
          * Gets the {@link AxisRenderer} instance responsible for drawing the axis
@@ -469,6 +438,55 @@ var AxisBase2D = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(AxisBase2D.prototype, "autoRangeAnimation", {
+        /**
+         * Gets or sets a {@link IAutoRangeAnimationOptions} object that controls if and how the visible range is animated during autoRanging
+         */
+        get: function () {
+            return this.autoRangeAnimationProperty;
+        },
+        /**
+         * Gets or sets a {@link IAutoRangeAnimationOptions} object that controls if and how the visible range is animated during autoRanging
+         */
+        set: function (autoRangeAnimation) {
+            this.autoRangeAnimationProperty = __assign(__assign({}, this.autoRangeAnimation), autoRangeAnimation);
+            // No need to trigger a redraw.  This will take effect anyway if the chart redraws.
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /**
+     * @inheritDoc
+     */
+    AxisBase2D.prototype.applyTheme = function (themeProvider) {
+        var previousThemeProvider = this.parentSurface.previousThemeProvider;
+        if (this.axisBandsFill === previousThemeProvider.axisBandsFill) {
+            this.axisBandsFill = themeProvider.axisBandsFill;
+        }
+        if (this.labelStyle.color === previousThemeProvider.tickTextBrush) {
+            this.labelStyle = { color: themeProvider.tickTextBrush };
+        }
+        if (this.minorGridLineStyle.color === previousThemeProvider.minorGridLineBrush) {
+            this.minorGridLineStyle = { color: themeProvider.minorGridLineBrush };
+        }
+        if (this.majorGridLineStyle.color === previousThemeProvider.majorGridLineBrush) {
+            this.majorGridLineStyle = { color: themeProvider.majorGridLineBrush };
+        }
+        if (this.minorTickLineStyle.color === previousThemeProvider.minorGridLineBrush) {
+            this.minorTickLineStyle = { color: themeProvider.minorGridLineBrush };
+        }
+        if (this.majorTickLineStyle.color === previousThemeProvider.majorGridLineBrush) {
+            this.majorTickLineStyle = { color: themeProvider.majorGridLineBrush };
+        }
+        if (this.axisTitleStyle.color === previousThemeProvider.axisTitleColor) {
+            this.axisTitleStyle = { color: themeProvider.axisTitleColor };
+        }
+    };
+    AxisBase2D.prototype.onAttach = function (parentSurface, isXAxis, isPrimaryAxis) {
+        this.parentSurface = parentSurface;
+        this.setIsXAxis(isXAxis);
+        this.isPrimaryAxisProperty = isPrimaryAxis;
+    };
     /**
      * Called internally - measures the axis as part of the layout phase
      */
@@ -491,6 +509,7 @@ var AxisBase2D = /** @class */ (function (_super) {
             this.axisTitleRenderer.desiredHeight = 0;
             this.axisTitleRenderer.desiredWidth = 0;
         }
+        this.isMeasured = true;
     };
     /**
      * Called internally - prepares render data before a draw operation
@@ -694,7 +713,7 @@ 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);
+        this.parentSurface.addAnimation(this.animateVisibleRange(new NumberRange_1.NumberRange(min, max), duration, easingFunction));
     };
     AxisBase2D.prototype.scale = function (initialRange, delta, isMoreThanHalf) {
         var deltaRange = initialRange.max - initialRange.min;

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

@@ -1,16 +1,16 @@
 import { TEasingFn } from "../../../Core/Animations/EasingFunctions";
-import { AnimationToken } from "../../../Core/AnimationToken";
+import { IGenericAnimation } from "../../../Core/Animations/GenericAnimation";
 import { EventHandler } from "../../../Core/EventHandler";
 import { IDeletable } from "../../../Core/IDeletable";
 import { NumberRange } from "../../../Core/NumberRange";
 import { Thickness } from "../../../Core/Thickness";
 import { EAutoRange } from "../../../types/AutoRange";
 import { EAxisType } from "../../../types/AxisType";
+import { ELabelAlignment } from "../../../types/LabelAlignment";
 import { CoordinateCalculatorBase } from "../../Numerics/CoordinateCalculators/CoordinateCalculatorBase";
 import { TickCoordinatesProvider } from "../../Numerics/TickCoordinateProviders/TickCoordinatesProvider";
 import { TickProvider } from "../../Numerics/TickProviders/TickProvider";
 import { DeltaCalculator } from "./DeltaCalculator/DeltaCalculator";
-import { ELabelAlignment } from "../../../types/LabelAlignment";
 import { IAxisCoreOptions } from "./IAxisCoreOptions";
 import { LabelProvider } from "./LabelProvider/LabelProvider";
 import { VisibleRangeChangedArgs } from "./VisibleRangeChangedArgs";
@@ -136,6 +136,8 @@ export declare abstract class AxisCore implements IAxisParams, IDeletable {
      * @desc
      */
     visibleRangeChanged: EventHandler<VisibleRangeChangedArgs>;
+    /** A flag to indicate if measure has been called this frame.  Properties updated after measure must trigger a redraw */
+    isMeasured: boolean;
     /**
      * Internal backing property for {@link AxisCore.id}. To fire {@link AxisCore.invalidateParentCallback}, set the public property
      */
@@ -271,7 +273,7 @@ export declare abstract class AxisCore implements IAxisParams, IDeletable {
      * Internal backing property for {@link AxisCore.maxAutoTicks}. To fire {@link AxisCore.invalidateParentCallback}, set the public property
      */
     protected maxAutoTicksProperty: number;
-    protected visibleRangeAnimationToken: AnimationToken;
+    protected visibleRangeAnimationToken: IGenericAnimation;
     protected readonly defaultVisibleRange: NumberRange;
     /**
      * Creates an instance of an {@link AxisCore}
@@ -396,6 +398,7 @@ export declare abstract class AxisCore implements IAxisParams, IDeletable {
      * for {@link CategoryAxis} types.
      */
     set visibleRange(visibleRange: NumberRange);
+    get animatedVisibleRange(): NumberRange;
     /**
      * Sets and animates the visibleRange of the axis from the current value to the provided value over the duration and with
      * {@link TEasingFn | Easing Function} provided
@@ -404,7 +407,7 @@ export declare abstract class AxisCore implements IAxisParams, IDeletable {
      * @param easingFunction the {@link TEasingFn | Easing Function to use}. Default value is outCubic
      * @param onCompleted the callback function
      */
-    animateVisibleRange(visibleRange: NumberRange, durationMs: number, easingFunction?: TEasingFn, onCompleted?: () => void): AnimationToken;
+    animateVisibleRange(visibleRange: NumberRange, durationMs: number, easingFunction?: TEasingFn, onCompleted?: () => void): IGenericAnimation;
     /**
      * The MajorDelta is the spacing between major gridlines and axis labels.
      * @remarks

package/Charting/Visuals/Axis/AxisCore.js

@@ -20,11 +20,11 @@ var Guard_1 = require("../../../Core/Guard");
 var NumberRange_1 = require("../../../Core/NumberRange");
 var Thickness_1 = require("../../../Core/Thickness");
 var AutoRange_1 = require("../../../types/AutoRange");
+var LabelAlignment_1 = require("../../../types/LabelAlignment");
 var isRealNumber_1 = require("../../../utils/isRealNumber");
 var SciChartSurfaceBase_1 = require("../SciChartSurfaceBase");
 var DpiHelper_1 = require("../TextureManager/DpiHelper");
 var constants_1 = require("./constants");
-var LabelAlignment_1 = require("../../../types/LabelAlignment");
 var VisibleRangeChangedArgs_1 = require("./VisibleRangeChangedArgs");
 /** @ignore */
 var ZeroRangeGrowBy = 0.01;
@@ -52,6 +52,8 @@ var AxisCore = /** @class */ (function () {
          * @desc
          */
         this.visibleRangeChanged = new EventHandler_1.EventHandler();
+        /** A flag to indicate if measure has been called this frame.  Properties updated after measure must trigger a redraw */
+        this.isMeasured = false;
         /**
          * Internal backing property for {@link AxisCore.id}. To fire {@link AxisCore.invalidateParentCallback}, set the public property
          */
@@ -364,6 +366,17 @@ var AxisCore = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(AxisCore.prototype, "animatedVisibleRange", {
+        get: function () {
+            if (!this.visibleRangeAnimationToken) {
+                return this.visibleRange;
+            }
+            var animation = this.visibleRangeAnimationToken;
+            return animation.to;
+        },
+        enumerable: false,
+        configurable: true
+    });
     /**
      * Sets and animates the visibleRange of the axis from the current value to the provided value over the duration and with
      * {@link TEasingFn | Easing Function} provided
@@ -383,10 +396,13 @@ var AxisCore = /** @class */ (function () {
             onCompleted();
             return undefined;
         }
-        (_a = this.visibleRangeAnimationToken) === null || _a === void 0 ? void 0 : _a.cancelAnimation();
+        (_a = this.visibleRangeAnimationToken) === null || _a === void 0 ? void 0 : _a.cancel();
         this.visibleRangeAnimationToken = NumberRangeAnimator_1.NumberRangeAnimator.animate(this.visibleRange, visibleRange, durationMs, function (range) {
-            _this.visibleRange = range;
-        }, onCompleted, easingFunction);
+            _this.visibleRangeProperty = range;
+        }, function () {
+            _this.visibleRangeAnimationToken = undefined;
+            onCompleted();
+        }, easingFunction);
         return this.visibleRangeAnimationToken;
     };
     Object.defineProperty(AxisCore.prototype, "majorDelta", {
@@ -1012,7 +1028,7 @@ var AxisCore = /** @class */ (function () {
         if (propertyName === constants_1.PROPERTY.TICK_COORDINATES_CALCULATOR) {
             (_d = this.tickCoordinatesProvider) === null || _d === void 0 ? void 0 : _d.attachedToAxis(this);
         }
-        if (this.invalidateParentCallback) {
+        if (this.isMeasured && this.invalidateParentCallback) {
             this.invalidateParentCallback();
         }
     };

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

@@ -1,5 +1,4 @@
 import { TEasingFn } from "../../../Core/Animations/EasingFunctions";
-import { AnimationToken } from "../../../Core/AnimationToken";
 import { Dictionary } from "../../../Core/Dictionary";
 import { NumberRange } from "../../../Core/NumberRange";
 import { EAxisType } from "../../../types/AxisType";
@@ -96,12 +95,11 @@ export declare class LogarithmicAxis extends AxisBase2D {
     /**
      * @inheritdoc
      */
-    animateVisibleRange(visibleRange: NumberRange, durationMs: number, easingFunction?: TEasingFn, onCompleted?: () => void): AnimationToken;
+    animateVisibleRange(visibleRange: NumberRange, durationMs: number, easingFunction?: TEasingFn, onCompleted?: () => void): import("../../../Core/Animations/GenericAnimation").IGenericAnimation;
     scale(initialRange: NumberRange, delta: number, isMoreThanHalf: boolean): void;
     toJSON(): import("../../../Builder/buildAxis").TAxisDefinition;
     protected getCurrentCoordinateCalculatorInternal(): CoordinateCalculatorBase;
     protected getMaxXRange(): NumberRange;
     private get logTickProvider();
     private updateLogarithmicBase;
-    private interpolateLog;
 }